refactor(storybook): reorganize design system

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

1 files changed, 24 insertions, 8 deletions

diff --git a/src/components/atoms/layout/no-script.stories.tsx b/src/components/atoms/layout/no-script.stories.tsx
index 474e2fb..22d2fea 100644
--- a/src/components/atoms/layout/no-script.stories.tsx
+++ b/src/components/atoms/layout/no-script.stories.tsx
@@ -1,9 +1,12 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import NoScriptComponent from './no-script';
+import NoScript from './no-script';
 
+/**
+ * NoScript - Storybook Meta
+ */
 export default {
-  title: 'Atoms/Layout',
-  component: NoScriptComponent,
+  title: 'Atoms/Layout/NoScript',
+  component: NoScript,
   args: {
     position: 'initial',
   },
@@ -34,13 +37,26 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof NoScriptComponent>;
+} as ComponentMeta<typeof NoScript>;
 
-const Template: ComponentStory<typeof NoScriptComponent> = (args) => (
-  <NoScriptComponent {...args} />
+const Template: ComponentStory<typeof NoScript> = (args) => (
+  <NoScript {...args} />
 );
 
-export const NoScript = Template.bind({});
-NoScript.args = {
+/**
+ * NoScript Stories - Default
+ */
+export const Default = Template.bind({});
+Default.args = {
   message: 'A noscript only message.',
+  position: 'initial',
+};
+
+/**
+ * NoScript Stories - Top
+ */
+export const Top = Template.bind({});
+Top.args = {
+  message: 'A noscript only message.',
+  position: 'top',
 };