Merge pull request #211 from MetroStar/uswds-cbx-fix

Fix: Checkbox component to work well with useForm
MetroStar · Jul 29, 2024 · b73308a · b73308a
2 parents 7418a33 + 750f966
commit b73308a
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 15 deletions.
diff --git a/packages/comet-uswds/src/components/checkbox/checkbox.stories.tsx b/packages/comet-uswds/src/components/checkbox/checkbox.stories.tsx
@@ -20,7 +20,7 @@ const Template: StoryFn<typeof Checkbox> = (args: CheckboxProps) => (
         name={checkboxName}
         label={word}
         value={word.toLowerCase()}
-        checked={wordIndex === 0}
+        defaultChecked={wordIndex === 0}
         key={wordIndex}
         isTile={args.isTile}
       />
@@ -37,3 +37,25 @@ Standard.args = {
   name: 'checkbox-1',
   isTile: false,
 };
+
+const SingleTemplate: StoryFn<typeof Checkbox> = (args: CheckboxProps) => (
+  <Checkbox
+    id={`checkbox$`}
+    name={checkboxName}
+    label={args.label}
+    value={args.value}
+    checked={args.checked}
+    defaultChecked={args.defaultChecked}
+    isTile={args.isTile}
+  />
+);
+
+export const Single = SingleTemplate.bind({});
+Single.args = {
+  id: 'checkbox-1',
+  name: 'checkbox-1',
+  label: 'Lorem',
+  value: 'lorem',
+  isTile: false,
+  defaultChecked: true,
+};
diff --git a/packages/comet-uswds/src/components/checkbox/checkbox.test.tsx b/packages/comet-uswds/src/components/checkbox/checkbox.test.tsx
@@ -27,7 +27,13 @@ describe('Checkbox', () => {
 
   test('should render a standard checked checkbox successfully', () => {
     const { baseElement } = render(
-      <Checkbox id={defaultId} name={checkboxName} label="Lorem" value="lorem" checked={true} />,
+      <Checkbox
+        id={defaultId}
+        name={checkboxName}
+        label="Lorem"
+        value="lorem"
+        defaultChecked={true}
+      />,
     );
     expect(baseElement).toBeTruthy();
     const checkboxInput = baseElement.querySelector('.usa-checkbox__input') as HTMLInputElement;
@@ -85,7 +91,7 @@ describe('Checkbox', () => {
           return {
             label: word,
             value: word.toLowerCase(),
-            checked: wordIndex === 0,
+            defaultChecked: wordIndex === 0,
           } as CheckboxData;
         })}
       />,
@@ -108,7 +114,7 @@ describe('Checkbox', () => {
           return {
             label: word,
             value: word.toLowerCase(),
-            checked: wordIndex === 0,
+            defaultChecked: wordIndex === 0,
           } as CheckboxData;
         })}
         areTiles={true}
@@ -130,7 +136,7 @@ describe('Checkbox', () => {
           return {
             label: word,
             value: word.toLowerCase(),
-            checked: wordIndex === 0,
+            defaultChecked: wordIndex === 0,
           } as CheckboxData;
         })}
         onChange={onCheck}
@@ -163,7 +169,7 @@ describe('Checkbox', () => {
           return {
             label: word,
             value: word.toLowerCase(),
-            checked: wordIndex === 0,
+            defaultChecked: wordIndex === 0,
           } as CheckboxData;
         })}
         onClick={onClick}

diff --git a/packages/comet-uswds/src/components/checkbox/checkbox.tsx b/packages/comet-uswds/src/components/checkbox/checkbox.tsx
@@ -14,6 +14,10 @@ export interface CheckboxData {
    * Whether the checkbox is checked by default
    */
   checked?: boolean;
+  /**
+   * Whether the checkbox is checked by default
+   */
+  defaultChecked?: boolean;
 }
 
 export interface CheckboxProps extends CheckboxData {
@@ -48,6 +52,7 @@ export const Checkbox = ({
   label,
   value,
   checked,
+  defaultChecked,
   isTile,
   onChange,
   onClick,
@@ -65,8 +70,8 @@ export const Checkbox = ({
         id={inputId}
         type="checkbox"
         name={name}
-        defaultValue={value}
-        defaultChecked={checked}
+        checked={checked}
+        defaultChecked={defaultChecked}
         onChange={onChange}
         onClick={onClick}
         {...inputProps}
@@ -126,6 +131,7 @@ export const CheckboxGroup = ({
             label={checkboxData.label}
             value={checkboxData.value}
             checked={checkboxData.checked}
+            defaultChecked={checkboxData.defaultChecked}
             isTile={areTiles}
             onChange={onChange}
             onClick={onClick}

diff --git a/packages/comet-uswds/src/components/radio-button/radio-button.stories.tsx b/packages/comet-uswds/src/components/radio-button/radio-button.stories.tsx
@@ -38,3 +38,25 @@ Standard.args = {
   name: 'radio-button-1',
   isTile: false,
 };
+
+const SingleTemplate: StoryFn<typeof RadioButton> = (args: RadioButtonProps) => (
+  <RadioButton
+    id={radioButtonName}
+    name={radioButtonName}
+    label={args.label}
+    value={args.value}
+    checked={args.checked}
+    defaultChecked={args.defaultChecked}
+    isTile={args.isTile}
+  />
+);
+
+export const Single = SingleTemplate.bind({});
+Single.args = {
+  id: 'radio-button-1',
+  name: 'radio-button-1',
+  label: 'Lorem',
+  value: 'lorem',
+  isTile: false,
+  defaultChecked: true,
+};
diff --git a/packages/comet-uswds/src/components/radio-button/radio-button.test.tsx b/packages/comet-uswds/src/components/radio-button/radio-button.test.tsx
@@ -32,7 +32,7 @@ describe('RadioButton', () => {
         name={radioButtonName}
         label="Lorem"
         value="lorem"
-        checked={true}
+        defaultChecked={true}
       />,
     );
     expect(baseElement).toBeTruthy();
@@ -103,7 +103,7 @@ describe('RadioButton', () => {
           return {
             label: word,
             value: word.toLowerCase(),
-            checked: wordIndex === 0,
+            defaultChecked: wordIndex === 0,
           } as RadioButtonData;
         })}
       />,
@@ -126,7 +126,7 @@ describe('RadioButton', () => {
           return {
             label: word,
             value: word.toLowerCase(),
-            checked: wordIndex === 0,
+            defaultChecked: wordIndex === 0,
           } as RadioButtonData;
         })}
         areTiles={true}
@@ -146,7 +146,7 @@ describe('RadioButton', () => {
           return {
             label: word,
             value: word.toLowerCase(),
-            checked: wordIndex === 0,
+            defaultChecked: wordIndex === 0,
           } as RadioButtonData;
         })}
         onChange={onCheck}
@@ -179,7 +179,7 @@ describe('RadioButton', () => {
           return {
             label: word,
             value: word.toLowerCase(),
-            checked: wordIndex === 0,
+            defaultChecked: wordIndex === 0,
           } as RadioButtonData;
         })}
         onClick={onClick}

diff --git a/packages/comet-uswds/src/components/radio-button/radio-button.tsx b/packages/comet-uswds/src/components/radio-button/radio-button.tsx
@@ -14,6 +14,10 @@ export interface RadioButtonData {
    * Whether the radioButton is checked by default
    */
   checked?: boolean;
+  /**
+   * Whether the checkbox is checked by default
+   */
+  defaultChecked?: boolean;
 }
 
 export interface RadioButtonProps extends RadioButtonData {
@@ -48,6 +52,7 @@ export const RadioButton = ({
   label,
   value,
   checked,
+  defaultChecked,
   isTile,
   onChange,
   onClick,
@@ -65,8 +70,8 @@ export const RadioButton = ({
         id={inputId}
         type="radio"
         name={name}
-        defaultValue={value}
-        defaultChecked={checked}
+        checked={checked}
+        defaultChecked={defaultChecked}
         onChange={onChange}
         onClick={onClick}
         {...inputProps}
@@ -126,6 +131,7 @@ export const RadioButtonGroup = ({
             label={radioButtonData.label}
             value={radioButtonData.value}
             checked={radioButtonData.checked}
+            defaultChecked={radioButtonData.defaultChecked}
             isTile={areTiles}
             onChange={onChange}
             onClick={onClick}