diff --git a/app/(app)/create/components/ApplicableScopeField.tsx b/app/(app)/create/components/ApplicableScopeField.tsx index dff8c6b..a1bf68d 100644 --- a/app/(app)/create/components/ApplicableScopeField.tsx +++ b/app/(app)/create/components/ApplicableScopeField.tsx @@ -70,7 +70,7 @@ function ApplicableScopeFieldComponent({ return (
- +
{scopes.map((scope) => { const isSelected = selectedScopes.includes(scope); diff --git a/app/(app)/create/components/CustomMethodCardFieldBlocksSummary/CustomMethodCardFieldBlocksSummary.view.tsx b/app/(app)/create/components/CustomMethodCardFieldBlocksSummary/CustomMethodCardFieldBlocksSummary.view.tsx index bd9e7be..06230a6 100644 --- a/app/(app)/create/components/CustomMethodCardFieldBlocksSummary/CustomMethodCardFieldBlocksSummary.view.tsx +++ b/app/(app)/create/components/CustomMethodCardFieldBlocksSummary/CustomMethodCardFieldBlocksSummary.view.tsx @@ -60,7 +60,6 @@ function CustomMethodCardFieldBlocksSummaryViewComponent({
@@ -123,7 +122,6 @@ function CustomMethodCardFieldBlocksSummaryViewComponent({
@@ -169,6 +167,7 @@ function CustomMethodCardFieldBlocksSummaryViewComponent({ @@ -77,6 +76,7 @@ function CustomMethodCardUploadBlockRowViewComponent({ ) : ( diff --git a/app/(app)/create/components/CustomMethodCardWizard/CustomMethodCardWizardFieldBodies.view.tsx b/app/(app)/create/components/CustomMethodCardWizard/CustomMethodCardWizardFieldBodies.view.tsx index 279381c..aba6e85 100644 --- a/app/(app)/create/components/CustomMethodCardWizard/CustomMethodCardWizardFieldBodies.view.tsx +++ b/app/(app)/create/components/CustomMethodCardWizard/CustomMethodCardWizardFieldBodies.view.tsx @@ -51,12 +51,10 @@ function CustomMethodCardWizardFieldBodiesViewComponent({ value={textBlockTitle} onChange={onTextBlockTitleChange} maxLength={CUSTOM_METHOD_CARD_WIZARD_MAX_FIELD_CHARS} - showHelpIcon />
@@ -82,7 +80,6 @@ function CustomMethodCardWizardFieldBodiesViewComponent({
{hasUploadPreview ? (
@@ -158,6 +154,7 @@ function CustomMethodCardWizardFieldBodiesViewComponent({ ) : ( onTitleChange(e.target.value)} inputSize="medium" + showHelpIcon={false} /> {showDescription ? ( onCardSelect(item.id)} /> ))} @@ -457,7 +457,7 @@ export function CardStackView({ recommended={item.recommended ?? false} selected={isSelected(item.id)} orientation="vertical" - showInfoIcon={true} + showInfoIcon={false} onClick={() => onCardSelect(item.id)} /> ))} diff --git a/app/components/cards/Selection/Selection.container.tsx b/app/components/cards/Selection/Selection.container.tsx index 1825343..954c0cc 100644 --- a/app/components/cards/Selection/Selection.container.tsx +++ b/app/components/cards/Selection/Selection.container.tsx @@ -6,7 +6,7 @@ import type { SelectionProps } from "./Selection.types"; /** * Figma: "Card / CardSelection" — stacked tile e.g. `16775:28762` (recommended + label + supportText). - * `orientation="horizontal"` selects that vertical stack; `"vertical"` is label + optional info icon with tag on the right (CardStack `singleStack` / right-rail). + * `orientation="horizontal"` selects that vertical stack; `"vertical"` is label + tag on the right (CardStack `singleStack` / right-rail). Helper `?` stays off until tooltip behavior ships. */ const SelectionContainer = memo( ({ diff --git a/app/components/cards/Selection/Selection.types.ts b/app/components/cards/Selection/Selection.types.ts index 3df9ec0..f6af30e 100644 --- a/app/components/cards/Selection/Selection.types.ts +++ b/app/components/cards/Selection/Selection.types.ts @@ -4,6 +4,7 @@ export interface SelectionProps { recommended?: boolean; selected?: boolean; orientation: "horizontal" | "vertical"; + /** Off in product until tooltip behavior ships. */ showInfoIcon?: boolean; /** Optional id for the root (e.g. `data-card-id` for focus after modal close). */ id?: string; diff --git a/app/components/cards/TemplateReviewCard/TemplateChipDetailModal.tsx b/app/components/cards/TemplateReviewCard/TemplateChipDetailModal.tsx index 5d649eb..80bf5bd 100644 --- a/app/components/cards/TemplateReviewCard/TemplateChipDetailModal.tsx +++ b/app/components/cards/TemplateReviewCard/TemplateChipDetailModal.tsx @@ -291,7 +291,7 @@ function ReadOnlyScopeField({ }) { return (
- +
{scopes.map((scope) => ( - + {value} diff --git a/stories/cards/Selection.stories.js b/stories/cards/Selection.stories.js index 0b6468f..0fe5824 100644 --- a/stories/cards/Selection.stories.js +++ b/stories/cards/Selection.stories.js @@ -36,7 +36,8 @@ export default { }, showInfoIcon: { control: { type: "boolean" }, - description: "Show info icon next to label (typically in vertical)", + description: + "Optional helper ? next to the label. Off in product until tooltip behavior ships.", }, onClick: { action: "clicked" }, }, @@ -82,7 +83,7 @@ export const VerticalRecommended = { recommended: true, selected: false, orientation: "vertical", - showInfoIcon: true, + showInfoIcon: false, }, }; @@ -93,7 +94,7 @@ export const VerticalSelected = { recommended: false, selected: true, orientation: "vertical", - showInfoIcon: true, + showInfoIcon: false, }, }; @@ -134,7 +135,7 @@ export const AllVariants = { recommended={true} selected={false} orientation="vertical" - showInfoIcon={true} + showInfoIcon={false} />
@@ -147,7 +148,7 @@ export const AllVariants = { recommended={false} selected={true} orientation="vertical" - showInfoIcon={true} + showInfoIcon={false} />
diff --git a/stories/create-flow/ModalTextAreaField.stories.js b/stories/create-flow/ModalTextAreaField.stories.js index 6e17f72..6376558 100644 --- a/stories/create-flow/ModalTextAreaField.stories.js +++ b/stories/create-flow/ModalTextAreaField.stories.js @@ -9,7 +9,7 @@ export default { docs: { description: { component: - "Shared 'labelled text area' field used by every create-flow modal section. Pairs `InputLabel` (with help icon) with a `TextArea` set to the `embedded` appearance.", + "Shared 'labelled text area' field used by every create-flow modal section. Pairs `InputLabel` with a `TextArea` set to the `embedded` appearance. Section help marks stay off until tooltip behavior ships.", }, }, }, @@ -35,7 +35,7 @@ export const Default = { }, args: { label: "Description", - helpIcon: true, + helpIcon: false, placeholder: "What does this rule cover?", rows: 4, }, diff --git a/tests/components/ApplicableScopeField.test.tsx b/tests/components/ApplicableScopeField.test.tsx index 7daaa2c..2367114 100644 --- a/tests/components/ApplicableScopeField.test.tsx +++ b/tests/components/ApplicableScopeField.test.tsx @@ -119,4 +119,10 @@ describe("ApplicableScopeField behavior", () => { screen.queryByRole("textbox", { name: /Add Applicable Scope/i }), ).not.toBeInTheDocument(); }); + + it("does not render a section help icon", () => { + renderWithProviders(); + + expect(screen.queryByAltText("Help")).not.toBeInTheDocument(); + }); }); diff --git a/tests/components/CommunicationMethodsScreenPersistence.test.tsx b/tests/components/CommunicationMethodsScreenPersistence.test.tsx index e9f754a..9ab2adc 100644 --- a/tests/components/CommunicationMethodsScreenPersistence.test.tsx +++ b/tests/components/CommunicationMethodsScreenPersistence.test.tsx @@ -77,6 +77,7 @@ describe("CommunicationMethodsScreen — Add Platform persistence", () => { ); const dialog = await screen.findByRole("dialog"); + expect(within(dialog).queryByAltText("Help")).not.toBeInTheDocument(); const textboxes = within(dialog).getAllByRole("textbox"); expect(textboxes.length).toBe(3); const corePrincipleField = textboxes[0] as HTMLTextAreaElement; diff --git a/tests/components/CustomMethodCardFieldBlocksSummary.test.tsx b/tests/components/CustomMethodCardFieldBlocksSummary.test.tsx index 762ee1f..4ab28db 100644 --- a/tests/components/CustomMethodCardFieldBlocksSummary.test.tsx +++ b/tests/components/CustomMethodCardFieldBlocksSummary.test.tsx @@ -45,6 +45,7 @@ describe("CustomMethodCardFieldBlocksSummary", () => { }), ).toBeInTheDocument(); expect(screen.queryByRole("button", { name: "Upload" })).not.toBeInTheDocument(); + expect(screen.queryByAltText("Help")).not.toBeInTheDocument(); }); it("after remove, parent can pass cleared blocks and Upload shows again", () => { diff --git a/tests/components/ModalTextAreaField.test.tsx b/tests/components/ModalTextAreaField.test.tsx index 043b4b5..996aae0 100644 --- a/tests/components/ModalTextAreaField.test.tsx +++ b/tests/components/ModalTextAreaField.test.tsx @@ -85,4 +85,29 @@ describe("ModalTextAreaField behavior", () => { expect(screen.getByRole("textbox", { name: /Notes/i })).toBeDisabled(); }); + + it("does not render a section help icon by default", () => { + renderWithProviders( + {}} + />, + ); + + expect(screen.queryByAltText("Help")).not.toBeInTheDocument(); + }); + + it("renders a section help icon when helpIcon is true", () => { + renderWithProviders( + {}} + />, + ); + + expect(screen.getByAltText("Help")).toBeInTheDocument(); + }); }); diff --git a/tests/unit/CardStack.test.jsx b/tests/unit/CardStack.test.jsx index 4470b72..e13dc13 100644 --- a/tests/unit/CardStack.test.jsx +++ b/tests/unit/CardStack.test.jsx @@ -65,6 +65,21 @@ describe("CardStack Component", () => { expect(screen.getAllByText("Option C").length).toBeGreaterThanOrEqual(1); }); + test("hides helper icons on compact, expanded, and single-stack cards", () => { + const { unmount } = render( + , + ); + expect(screen.queryByText("?")).not.toBeInTheDocument(); + unmount(); + + const expanded = render(); + expect(screen.queryByText("?")).not.toBeInTheDocument(); + expanded.unmount(); + + render(); + expect(screen.queryByText("?")).not.toBeInTheDocument(); + }); + test("expanded tiles use the compact 142px CardSelection height", () => { render(); diff --git a/tests/unit/Selection.test.jsx b/tests/unit/Selection.test.jsx index 6704adc..52af666 100644 --- a/tests/unit/Selection.test.jsx +++ b/tests/unit/Selection.test.jsx @@ -54,6 +54,24 @@ describe("Selection Component", () => { expect(card).toHaveClass("flex-row"); }); + it("does not render a helper icon by default", () => { + render(); + + expect(screen.queryByText("?")).not.toBeInTheDocument(); + }); + + it("renders a helper icon when showInfoIcon is true", () => { + render( + , + ); + + expect(screen.getByText("?")).toBeInTheDocument(); + }); + it("handles click events", () => { const handleClick = vi.fn(); render();