From fd7d06b9e20b6d44e437da949386675236cb249e Mon Sep 17 00:00:00 2001
From: Vivian Phung <dev+github@vivianphung.com>
Date: Tue, 14 May 2024 16:15:27 -0400
Subject: [PATCH] [13/n][Storybook] Radio argTypes update

---
 .../src/stories/Components/Radio.stories.tsx  | 64 ++++++++++++++-----
 1 file changed, 47 insertions(+), 17 deletions(-)

diff --git a/packages/frontend/src/stories/Components/Radio.stories.tsx b/packages/frontend/src/stories/Components/Radio.stories.tsx
index d8dba202..34e02f30 100644
--- a/packages/frontend/src/stories/Components/Radio.stories.tsx
+++ b/packages/frontend/src/stories/Components/Radio.stories.tsx
@@ -1,11 +1,17 @@
 import { StoryObj, Meta } from '@storybook/react';
 
-import { Radio, RadioTheme } from 'components/shared/Radio';
+import { Radio, RadioOption, RadioTheme } from 'components/shared/Radio';
 
+const radioVariants: RadioTheme['variant'][] = ['unstyled', 'card'];
 const radioOrientation: RadioTheme['orientation'][] = [
   'horizontal',
   'vertical',
 ];
+const radioOptions: RadioOption[] = [
+  { label: 'Option 1', value: 'option1' },
+  { label: 'Option 2', value: 'option2' },
+  { label: 'Option 3', value: 'option3' },
+];
 
 const meta: Meta<typeof Radio> = {
   title: 'Components/Radio',
@@ -20,11 +26,22 @@ const meta: Meta<typeof Radio> = {
       options: radioOrientation,
     },
     value: {
-      control: 'text',
+      control: 'object',
     },
     onValueChange: {
-      action: 'onValueChange',
+      action: 'valueChange',
     },
+    variant: {
+      control: 'select',
+      options: radioVariants,
+    },
+  },
+  args: {
+    options: radioOptions,
+    orientation: 'horizontal',
+    value: 'option1',
+    onValueChange: (value: string) => console.log(value),
+    variant: 'unstyled',
   },
 };
 
@@ -33,43 +50,56 @@ export default meta;
 type Story = StoryObj<typeof Radio>;
 
 export const Default: Story = {
-  render: ({ options, orientation, value, onValueChange }) => (
+  render: ({ options, orientation, value, onValueChange, ...args }) => (
     <Radio
       options={options}
       orientation={orientation}
       value={value}
       onValueChange={onValueChange}
+      {...args}
     />
   ),
   args: {
-    options: [
-      { label: 'Option 1', value: 'option1' },
-      { label: 'Option 2', value: 'option2' },
-      { label: 'Option 3', value: 'option3' },
-    ],
+    options: radioOptions,
     orientation: 'horizontal',
     value: 'option1',
-    onValueChange: (value: string) => console.log(value),
+    onValueChange: (value) => console.log(value),
   },
 };
 
 export const Vertical: Story = {
-  render: ({ options, orientation, value, onValueChange }) => (
+  render: ({ options, orientation, value, onValueChange, ...args }) => (
     <Radio
       options={options}
       orientation={orientation}
       value={value}
       onValueChange={onValueChange}
+      {...args}
     />
   ),
   args: {
-    options: [
-      { label: 'Option 1', value: 'option1' },
-      { label: 'Option 2', value: 'option2' },
-      { label: 'Option 3', value: 'option3' },
-    ],
+    options: radioOptions,
     orientation: 'vertical',
     value: 'option1',
-    onValueChange: (value: string) => console.log(value),
+    onValueChange: (value) => console.log(value),
+  },
+};
+
+export const Card: Story = {
+  render: ({ options, orientation, value, onValueChange, ...args }) => (
+    <Radio
+      options={options}
+      orientation={orientation}
+      value={value}
+      onValueChange={onValueChange}
+      {...args}
+    />
+  ),
+  args: {
+    options: radioOptions,
+    orientation: 'horizontal',
+    value: 'option1',
+    onValueChange: (value: string) => console.log(value),
+    variant: 'card',
   },
 };