refactor(storybook): reorganize design system

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

1 files changed, 62 insertions, 10 deletions

diff --git a/src/components/atoms/headings/heading.stories.tsx b/src/components/atoms/headings/heading.stories.tsx
index 66a84dc..da5a718 100644
--- a/src/components/atoms/headings/heading.stories.tsx
+++ b/src/components/atoms/headings/heading.stories.tsx
@@ -1,9 +1,12 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import HeadingComponent from './heading';
+import Heading from './heading';
 
+/**
+ * Heading - Storybook Meta
+ */
 export default {
-  title: 'Atoms/Headings',
-  component: HeadingComponent,
+  title: 'Atoms/Typography/Headings',
+  component: Heading,
   args: {
     isFake: false,
     withMargin: true,
@@ -45,10 +48,11 @@ export default {
     },
     level: {
       control: {
-        type: 'select',
+        type: 'number',
+        min: 1,
+        max: 6,
       },
       description: 'Heading level.',
-      options: [1, 2, 3, 4, 5, 6],
       type: {
         name: 'number',
         required: true,
@@ -69,14 +73,62 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof HeadingComponent>;
+} as ComponentMeta<typeof Heading>;
 
-const Template: ComponentStory<typeof HeadingComponent> = (args) => (
-  <HeadingComponent {...args} />
+const Template: ComponentStory<typeof Heading> = (args) => (
+  <Heading {...args} />
 );
 
-export const Heading = Template.bind({});
-Heading.args = {
+/**
+ * Heading Story - h1
+ */
+export const H1 = Template.bind({});
+H1.args = {
   children: 'Your title',
   level: 1,
 };
+
+/**
+ * Heading Story - h2
+ */
+export const H2 = Template.bind({});
+H2.args = {
+  children: 'Your title',
+  level: 2,
+};
+
+/**
+ * Heading Story - h3
+ */
+export const H3 = Template.bind({});
+H3.args = {
+  children: 'Your title',
+  level: 3,
+};
+
+/**
+ * Heading Story - h4
+ */
+export const H4 = Template.bind({});
+H4.args = {
+  children: 'Your title',
+  level: 4,
+};
+
+/**
+ * Heading Story - h5
+ */
+export const H5 = Template.bind({});
+H5.args = {
+  children: 'Your title',
+  level: 5,
+};
+
+/**
+ * Heading Story - h6
+ */
+export const H6 = Template.bind({});
+H6.args = {
+  children: 'Your title',
+  level: 6,
+};