From 671321ef4d73e09f3317ee6704e1d12b19893d43 Mon Sep 17 00:00:00 2001
From: Vivian Phung <dev+github@vivianphung.com>
Date: Tue, 14 May 2024 18:16:49 -0400
Subject: [PATCH] [18/n][Storybook] Switch update argTypes and add stories

---
 .../src/stories/Components/Switch.stories.tsx | 84 ++++++++++++++-----
 1 file changed, 63 insertions(+), 21 deletions(-)

diff --git a/packages/frontend/src/stories/Components/Switch.stories.tsx b/packages/frontend/src/stories/Components/Switch.stories.tsx
index c7256282..b56394e2 100644
--- a/packages/frontend/src/stories/Components/Switch.stories.tsx
+++ b/packages/frontend/src/stories/Components/Switch.stories.tsx
@@ -17,7 +17,10 @@ const meta: Meta<typeof Switch> = {
       control: 'object',
     },
     onCheckedChange: {
-      action: 'onCheckedChange',
+      action: 'checkedChange',
+    },
+    fullWidth: {
+      control: 'boolean',
     },
   },
 };
@@ -26,26 +29,65 @@ export default meta;
 
 type Story = StoryObj<typeof Switch>;
 
-export const Default: Story = {
-  render: ({ label, description, wrapperProps, onCheckedChange }) => (
-    <Switch
-      label={label}
-      description={description}
-      wrapperProps={wrapperProps}
-      checked={false}
-      onCheckedChange={onCheckedChange}
-    />
-  ),
-};
+export const Default: Story = {};
 
 export const Checked: Story = {
-  render: ({ label, description, wrapperProps, onCheckedChange }) => (
-    <Switch
-      label={label}
-      description={description}
-      wrapperProps={wrapperProps}
-      checked={true}
-      onCheckedChange={onCheckedChange}
-    />
-  ),
+  args: {
+    checked: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const WithLabel: Story = {
+  args: {
+    label: 'Label',
+  },
+};
+
+export const WithDescription: Story = {
+  args: {
+    description: 'Description',
+  },
+};
+
+export const WithWrapperProps: Story = {
+  args: {
+    wrapperProps: {
+      style: {
+        border: '1px solid red',
+      },
+    },
+  },
+};
+
+export const WithLabelAndDescription: Story = {
+  args: {
+    label: 'Label',
+    description: 'Description',
+  },
+};
+
+export const WithLabelAndDescriptionAndWrapperProps: Story = {
+  args: {
+    label: 'Label',
+    description: 'Description',
+    wrapperProps: {
+      style: {
+        border: '1px solid red',
+      },
+    },
+  },
+};
+
+export const FullWidthWithLabelAndDescription: Story = {
+  args: {
+    fullWidth: true,
+    label: 'Label',
+    description: 'Description',
+  },
 };