From 97e2680c5785866c76b6791f56aed5af5e6337a6 Mon Sep 17 00:00:00 2001 From: adilallo <39313955+adilallo@users.noreply.github.com> Date: Wed, 4 Feb 2026 14:15:22 -0700 Subject: [PATCH] Resolve errors and pass tests --- .../CheckboxGroup/CheckboxGroup.container.tsx | 23 +++++++++---------- .../RadioButton/RadioButton.container.tsx | 19 --------------- .../RadioButton/RadioButton.types.ts | 1 - .../RadioButton/RadioButton.view.tsx | 1 - .../SelectInput/SelectInput.view.tsx | 1 - stories/Create.stories.js | 2 +- tests/unit/NumberCard.test.jsx | 4 +++- 7 files changed, 15 insertions(+), 36 deletions(-) diff --git a/app/components/CheckboxGroup/CheckboxGroup.container.tsx b/app/components/CheckboxGroup/CheckboxGroup.container.tsx index 0afad08..a45bd5c 100644 --- a/app/components/CheckboxGroup/CheckboxGroup.container.tsx +++ b/app/components/CheckboxGroup/CheckboxGroup.container.tsx @@ -1,6 +1,6 @@ "use client"; -import { memo, useCallback, useId, useState, useEffect } from "react"; +import { memo, useCallback, useId, useState } from "react"; import { CheckboxGroupView } from "./CheckboxGroup.view"; import type { CheckboxGroupProps } from "./CheckboxGroup.types"; @@ -18,15 +18,11 @@ const CheckboxGroupContainer = ({ const generatedId = useId(); const groupId = name || `checkbox-group-${generatedId}`; - // Internal state to track checked values - const [checkedValues, setCheckedValues] = useState(value || []); - - // Sync internal state with external value prop - useEffect(() => { - if (value !== undefined) { - setCheckedValues(value); - } - }, [value]); + // Internal state to track checked values (only used if value prop is not provided) + const [internalCheckedValues, setInternalCheckedValues] = useState([]); + + // Use controlled value if provided, otherwise use internal state + const checkedValues = value !== undefined ? value : internalCheckedValues; const handleOptionChange = useCallback( (optionValue: string, checked: boolean) => { @@ -36,13 +32,16 @@ const CheckboxGroupContainer = ({ ? [...checkedValues, optionValue] : checkedValues.filter((v) => v !== optionValue); - setCheckedValues(newCheckedValues); + // Only update internal state if uncontrolled + if (value === undefined) { + setInternalCheckedValues(newCheckedValues); + } if (onChange) { onChange({ value: newCheckedValues }); } }, - [disabled, checkedValues, onChange], + [disabled, checkedValues, onChange, value], ); return ( diff --git a/app/components/RadioButton/RadioButton.container.tsx b/app/components/RadioButton/RadioButton.container.tsx index ff9099e..91812a5 100644 --- a/app/components/RadioButton/RadioButton.container.tsx +++ b/app/components/RadioButton/RadioButton.container.tsx @@ -16,7 +16,6 @@ const RadioButtonContainer = ({ value, ariaLabel, className = "", - ...props }: RadioButtonProps) => { const isInverse = mode === "inverse"; const isStandard = mode === "standard"; @@ -82,23 +81,6 @@ const RadioButtonContainer = ({ const combinedBoxStyles = getBoxStyles(); - // Dot color per Figma - // Selected state: light cream/yellow (#fefcc9) - // Selected hover state: darker yellow/brown (#333000 or rgba(51, 48, 0, 1)) - const getDotColor = (): string => { - if (!checked) return "transparent"; - - if (isStandard) { - // Use CSS to handle hover state - default is light cream, hover is darker - return "var(--color-content-default-brand-primary, #fefcc9)"; - } - - // Inverse mode: black dot - return "var(--color-content-default-primary, #000000)"; - }; - - const dotColor = getDotColor(); - // Label color const labelColor = isInverse ? "var(--color-content-inverse-primary)" @@ -139,7 +121,6 @@ const RadioButtonContainer = ({ ariaLabel={ariaLabel} className={className} combinedBoxStyles={combinedBoxStyles} - dotColor={dotColor} labelColor={labelColor} onToggle={handleToggle} onKeyDown={handleKeyDown} diff --git a/app/components/RadioButton/RadioButton.types.ts b/app/components/RadioButton/RadioButton.types.ts index 04639a5..ed1c247 100644 --- a/app/components/RadioButton/RadioButton.types.ts +++ b/app/components/RadioButton/RadioButton.types.ts @@ -24,7 +24,6 @@ export interface RadioButtonViewProps { ariaLabel?: string; className: string; combinedBoxStyles: string; - dotColor: string; labelColor: string; onToggle: (_e: React.MouseEvent | React.KeyboardEvent) => void; onKeyDown: (_e: React.KeyboardEvent) => void; diff --git a/app/components/RadioButton/RadioButton.view.tsx b/app/components/RadioButton/RadioButton.view.tsx index 8b2e069..80970fa 100644 --- a/app/components/RadioButton/RadioButton.view.tsx +++ b/app/components/RadioButton/RadioButton.view.tsx @@ -11,7 +11,6 @@ export function RadioButtonView({ ariaLabel, className, combinedBoxStyles, - dotColor, labelColor, onToggle, onKeyDown, diff --git a/app/components/SelectInput/SelectInput.view.tsx b/app/components/SelectInput/SelectInput.view.tsx index a18035e..26ea67b 100644 --- a/app/components/SelectInput/SelectInput.view.tsx +++ b/app/components/SelectInput/SelectInput.view.tsx @@ -59,7 +59,6 @@ export function SelectInputView({ menuRef, ariaLabelledby, ariaInvalid, - ...props }: SelectInputViewProps) { // Styles based on Figma design const containerClasses = "flex flex-col gap-[8px]"; diff --git a/stories/Create.stories.js b/stories/Create.stories.js index 276c9f2..d6d989b 100644 --- a/stories/Create.stories.js +++ b/stories/Create.stories.js @@ -99,7 +99,7 @@ Step2.args = { description: "You can also combine or add new approaches to the list", children: (
- +
), showBackButton: true, diff --git a/tests/unit/NumberCard.test.jsx b/tests/unit/NumberCard.test.jsx index 370cad5..69cd9c9 100644 --- a/tests/unit/NumberCard.test.jsx +++ b/tests/unit/NumberCard.test.jsx @@ -188,9 +188,10 @@ describe("NumberCard Component", () => { it("applies Small size variant correctly", () => { render(); + // For Small size, text is directly in card div (no wrapper), so use closest("div") const card = screen .getByText("Test Card Text") - .closest("div").parentElement; + .closest("div"); expect(card).toHaveClass( "flex", "flex-col", @@ -198,6 +199,7 @@ describe("NumberCard Component", () => { "justify-center", "gap-4", "p-5", + "relative", ); const textElement = screen.getByText("Test Card Text");