refactor(storybook): reorganize design system

Add more stories for each components and change some components
categories for better organization.

1 files changed, 99 insertions, 8 deletions

diff --git a/src/components/molecules/forms/labelled-field.stories.tsx b/src/components/molecules/forms/labelled-field.stories.tsx
index b77d71e..56eef00 100644
--- a/src/components/molecules/forms/labelled-field.stories.tsx
+++ b/src/components/molecules/forms/labelled-field.stories.tsx
@@ -1,16 +1,45 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useState } from 'react';
-import LabelledFieldComponent from './labelled-field';
+import LabelledField from './labelled-field';
 
+/**
+ * LabelledField - Storybook Meta
+ */
 export default {
-  title: 'Molecules/Forms',
-  component: LabelledFieldComponent,
+  title: 'Molecules/Forms/Field',
+  component: LabelledField,
   args: {
     disabled: false,
     labelPosition: 'top',
     required: false,
   },
   argTypes: {
+    'aria-labelledby': {
+      control: {
+        type: 'text',
+      },
+      description: 'One or more ids that refers to the field name.',
+      table: {
+        category: 'Accessibility',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the field.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     disabled: {
       control: {
         type: 'boolean',
@@ -35,6 +64,20 @@ export default {
         required: true,
       },
     },
+    hideLabel: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Visually hide the field label.',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: false },
+      },
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+    },
     label: {
       control: {
         type: 'text',
@@ -181,20 +224,68 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof LabelledFieldComponent>;
+} as ComponentMeta<typeof LabelledField>;
 
-const Template: ComponentStory<typeof LabelledFieldComponent> = ({
+const Template: ComponentStory<typeof LabelledField> = ({
   value: _value,
   setValue: _setValue,
   ...args
 }) => {
   const [value, setValue] = useState<string>('');
 
-  return <LabelledFieldComponent value={value} setValue={setValue} {...args} />;
+  return <LabelledField value={value} setValue={setValue} {...args} />;
+};
+
+/**
+ * Labelled Field Stories - Left
+ */
+export const Left = Template.bind({});
+Left.args = {
+  id: 'labelled-field-storybook',
+  label: 'Labelled field',
+  labelPosition: 'left',
+  name: 'labelled-field-storybook',
+};
+
+/**
+ * Labelled Field Stories - Top
+ */
+export const Top = Template.bind({});
+Top.args = {
+  id: 'labelled-field-storybook',
+  label: 'Labelled field',
+  labelPosition: 'top',
+  name: 'labelled-field-storybook',
+};
+
+/**
+ * Labelled Field Stories - Required
+ */
+export const Required = Template.bind({});
+Required.args = {
+  id: 'labelled-field-storybook',
+  label: 'Labelled field',
+  name: 'labelled-field-storybook',
+  required: true,
+};
+
+/**
+ * Labelled Field Stories - Hidden label
+ */
+export const HiddenLabel = Template.bind({});
+HiddenLabel.args = {
+  hideLabel: true,
+  id: 'labelled-field-storybook',
+  label: 'Labelled field',
+  name: 'labelled-field-storybook',
 };
 
-export const LabelledField = Template.bind({});
-LabelledField.args = {
+/**
+ * Labelled Field Stories - Disabled
+ */
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
   id: 'labelled-field-storybook',
   label: 'Labelled field',
   name: 'labelled-field-storybook',