Merge pull request #18 from fortanix/feature/checkboxgroup-stateful

CheckboxGroup story with state handling
fortanix · Nov 14, 2024 · be28eee · be28eee
2 parents be59715 + 108c636
commit be28eee
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 5 deletions.
diff --git a/src/components/forms/fields/CheckboxField/CheckboxField.tsx b/src/components/forms/fields/CheckboxField/CheckboxField.tsx
@@ -69,6 +69,9 @@ export type CheckboxFieldProps = ComponentProps<'div'> & {
 
   /** Whether the checkbox is disabled. Passed down to Checkbox component. */
   disabled?: undefined | boolean,
+
+  /** The onChange event for the checkbox. Passed down to Checkbox component. */
+  onChange?: (e: React.FormEvent) => void,
 };
 
 /**
@@ -105,6 +108,7 @@ export const CheckboxField = (props: CheckboxFieldProps) => {
           checked={props.checked}
           defaultChecked={props.defaultChecked}
           disabled={props.disabled}
+          onChange={props.onChange}
         />
         <span className={cl['bk-checkbox-field__label__content']}>
           {label}

diff --git a/src/components/forms/fields/CheckboxGroup/CheckboxGroup.stories.tsx b/src/components/forms/fields/CheckboxGroup/CheckboxGroup.stories.tsx
@@ -12,6 +12,9 @@ import { CheckboxGroup } from './CheckboxGroup.tsx';
 type CheckboxGroupArgs = React.ComponentProps<typeof CheckboxGroup>;
 type Story = StoryObj<CheckboxGroupArgs>;
 
+const Color = ['Red', 'Green', 'Blue'] as const;
+type Color = (typeof Color)[number];
+
 export default {
   component: CheckboxGroup,
   parameters: {
@@ -20,11 +23,28 @@ export default {
   tags: ['autodocs'],
   argTypes: {
   },
-  render: (args) => <CheckboxGroup {...args}>
-    <CheckboxGroup.CheckboxField label='Label'/>
-    <CheckboxGroup.CheckboxField label='Label'/>
-    <CheckboxGroup.CheckboxField label='Label'/>
-  </CheckboxGroup>,
+  render: (args) => {
+    const [selectedColors, setSelectedColors] = React.useState<Array<Color>>([]);
+    const handleCheckboxChange = (color: Color) => {
+      if (selectedColors.includes(color)) {
+        setSelectedColors(selectedColors.filter(c => c !== color));
+      } else {
+        setSelectedColors([...selectedColors, color]);
+      }
+    };
+    return (
+      <CheckboxGroup {...args}>
+        {Color.map(color =>
+          <CheckboxGroup.CheckboxField
+            key={color}
+            label={color}
+            checked={selectedColors.includes(color)}
+            onChange={() => { handleCheckboxChange(color as Color); }}
+          />
+        )}
+      </CheckboxGroup>
+    );
+  },
 } satisfies Meta<CheckboxGroupArgs>;
 
 export const CheckboxGroupVertical: Story = {};