From fa0e4dc691d56f51496968c83d58d17893f7d3cf Mon Sep 17 00:00:00 2001
From: Arlindo Pereira <arlindosaraivapereira@gmail.com>
Date: Wed, 13 Nov 2024 17:52:03 +0100
Subject: [PATCH 1/2] CheckboxGroup story with state handling

---
 .../fields/CheckboxField/CheckboxField.tsx    |  4 +++
 .../CheckboxGroup/CheckboxGroup.stories.tsx   | 28 +++++++++++++++----
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/components/forms/fields/CheckboxField/CheckboxField.tsx b/src/components/forms/fields/CheckboxField/CheckboxField.tsx
index 1046974..3b8b49c 100644
--- 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
index b332db5..f3bce5b 100644
--- 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,26 @@ 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) => {
+      selectedColors.includes(color) ?
+        setSelectedColors(selectedColors.filter(c => c !== color)) :
+        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 = {};

From 108c636041e0224743d7f932ae799b70540f1232 Mon Sep 17 00:00:00 2001
From: Arlindo Pereira <arlindosaraivapereira@gmail.com>
Date: Thu, 14 Nov 2024 17:25:45 +0100
Subject: [PATCH 2/2] Code Review fixes: turn ternary into if/else block;
 onChange fn fix

---
 .../forms/fields/CheckboxGroup/CheckboxGroup.stories.tsx  | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/forms/fields/CheckboxGroup/CheckboxGroup.stories.tsx b/src/components/forms/fields/CheckboxGroup/CheckboxGroup.stories.tsx
index f3bce5b..78b8014 100644
--- a/src/components/forms/fields/CheckboxGroup/CheckboxGroup.stories.tsx
+++ b/src/components/forms/fields/CheckboxGroup/CheckboxGroup.stories.tsx
@@ -26,9 +26,11 @@ export default {
   render: (args) => {
     const [selectedColors, setSelectedColors] = React.useState<Array<Color>>([]);
     const handleCheckboxChange = (color: Color) => {
-      selectedColors.includes(color) ?
-        setSelectedColors(selectedColors.filter(c => c !== color)) :
+      if (selectedColors.includes(color)) {
+        setSelectedColors(selectedColors.filter(c => c !== color));
+      } else {
         setSelectedColors([...selectedColors, color]);
+      }
     };
     return (
       <CheckboxGroup {...args}>
@@ -37,7 +39,7 @@ export default {
             key={color}
             label={color}
             checked={selectedColors.includes(color)}
-            onChange={() => handleCheckboxChange(color as Color)}
+            onChange={() => { handleCheckboxChange(color as Color); }}
           />
         )}
       </CheckboxGroup>