chore: replace the toggle component

1 files changed, 54 insertions, 0 deletions

diff --git a/src/components/molecules/forms/radio-group.stories.tsx b/src/components/molecules/forms/radio-group.stories.tsx
index b4c913a..3c01af5 100644
--- a/src/components/molecules/forms/radio-group.stories.tsx
+++ b/src/components/molecules/forms/radio-group.stories.tsx
@@ -9,6 +9,7 @@ export default {
   title: 'Molecules/Forms/RadioGroup',
   component: RadioGroup,
   args: {
+    kind: 'regular',
     labelSize: 'small',
   },
   argTypes: {
@@ -35,6 +36,21 @@ export default {
         required: true,
       },
     },
+    kind: {
+      control: {
+        type: 'select',
+      },
+      description: 'The radio group kind.',
+      options: ['regular', 'toggle'],
+      table: {
+        category: 'Options',
+        defaultValue: { summary: 'regular' },
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     labelPosition: {
       control: {
         type: 'select',
@@ -102,6 +118,32 @@ export default {
         required: false,
       },
     },
+    onChange: {
+      control: {
+        type: null,
+      },
+      description: 'A callback function to handle selected option change.',
+      table: {
+        category: 'Events',
+      },
+      type: {
+        name: 'function',
+        required: false,
+      },
+    },
+    optionClassName: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the option wrapper.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     options: {
       description: 'An array of radio option object.',
       type: {
@@ -164,3 +206,15 @@ StackedLegendRightLabel.args = {
   legendPosition: 'stacked',
   options: getOptions('group4'),
 };
+
+/**
+ * Radio Group Stories - Toggle
+ */
+export const Toggle = Template.bind({});
+Toggle.args = {
+  initialChoice: initialChoice,
+  kind: 'toggle',
+  labelPosition: 'right',
+  legend: legend,
+  options: getOptions('group5'),
+};