From a27331f54fdf19cf0487a00d2ce74399a3f82477 Mon Sep 17 00:00:00 2001
From: Vivian Phung <dev+github@vivianphung.com>
Date: Tue, 14 May 2024 15:43:51 -0400
Subject: [PATCH] [6/n][Storybook] Checkbox update argTypes

---
 .../stories/Components/Checkbox.stories.tsx   | 36 +++++++++++++++----
 1 file changed, 29 insertions(+), 7 deletions(-)

diff --git a/packages/frontend/src/stories/Components/Checkbox.stories.tsx b/packages/frontend/src/stories/Components/Checkbox.stories.tsx
index 75794575..e9d82e32 100644
--- a/packages/frontend/src/stories/Components/Checkbox.stories.tsx
+++ b/packages/frontend/src/stories/Components/Checkbox.stories.tsx
@@ -6,13 +6,25 @@ const meta: Meta<typeof Checkbox> = {
   title: 'Components/Checkbox',
   component: Checkbox,
   tags: ['autodocs'],
-  args: {
-    label: 'string',
-    description: 'string',
-    checked: 'CheckedState' as unknown as any,
-    defaultChecked: 'CheckedState' as unknown as any,
-    required: 'boolean' as unknown as any,
-    onCheckedChange: '(checked: CheckedState) => void' as unknown as any,
+  argTypes: {
+    label: {
+      control: 'text',
+    },
+    description: {
+      control: 'text',
+    },
+    checked: {
+      control: 'boolean',
+    },
+    defaultChecked: {
+      control: 'boolean',
+    },
+    required: {
+      control: 'boolean',
+    },
+    onCheckedChange: {
+      action: 'checkedChange',
+    },
   },
 };
 
@@ -28,6 +40,7 @@ export const Default: Story = {
     defaultChecked,
     required,
     onCheckedChange,
+    ...arg
   }) => (
     <Checkbox
       label={label}
@@ -36,6 +49,15 @@ export const Default: Story = {
       defaultChecked={defaultChecked}
       required={required}
       onCheckedChange={onCheckedChange}
+      {...arg}
     />
   ),
+  args: {
+    label: 'Label',
+    description: 'Description',
+    checked: false,
+    defaultChecked: false,
+    required: false,
+    onCheckedChange: (checked: boolean) => console.log(checked),
+  },
 };