diff --git a/src/pages/OutcomeChip.tsx b/src/pages/OutcomeChip.tsx index e1415f3..3ffd4fc 100644 --- a/src/pages/OutcomeChip.tsx +++ b/src/pages/OutcomeChip.tsx @@ -1,5 +1,7 @@ import * as React from "react"; +import type { MechanicHelpContent } from "@/components/patterns/MechanicHelp"; +import { MechanicHelp } from "@/components/patterns/MechanicHelp"; /** * OutcomeChip @@ -36,6 +38,12 @@ export interface OutcomeChipProps { onSelect?: () => void; /** Optional additional className for layout composition */ className?: string; + /** + * Optional contextual help content. When provided, a help icon + popover + * is rendered next to the chip label, helping first-time users understand + * the outcome metric/field. + */ + helpContent?: MechanicHelpContent; } const variantTokenMap: Record = { @@ -67,6 +75,7 @@ export const OutcomeChip: React.FC = ({ disabled = false, onSelect, className = "", + helpContent, }) => { const tokens = variantTokenMap[variant]; @@ -111,6 +120,11 @@ export const OutcomeChip: React.FC = ({ > {label} {badge ? {badge} : null} + {helpContent ? ( + e.stopPropagation()}> + + + ) : null}