refactor(storybook): reorganize design system

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

14 files changed, 106 insertions, 17 deletions

diff --git a/src/components/atoms/icons/arrow.stories.tsx b/src/components/atoms/icons/arrow.stories.tsx
index 96ce1d8..1941479 100644
--- a/src/components/atoms/icons/arrow.stories.tsx
+++ b/src/components/atoms/icons/arrow.stories.tsx
@@ -1,8 +1,11 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import ArrowIcon from './arrow';
 
+/**
+ * Arrow icon - Storybook Meta
+ */
 export default {
-  title: 'Atoms/Icons',
+  title: 'Atoms/Illustrations/Icons',
   component: ArrowIcon,
   argTypes: {
     className: {
@@ -36,6 +39,9 @@ const Template: ComponentStory<typeof ArrowIcon> = (args) => (
   <ArrowIcon {...args} />
 );
 
+/**
+ * Icons Stories - Arrow
+ */
 export const Arrow = Template.bind({});
 Arrow.args = {
   direction: 'right',
diff --git a/src/components/atoms/icons/career.stories.tsx b/src/components/atoms/icons/career.stories.tsx
index 8575cb9..7b11bb8 100644
--- a/src/components/atoms/icons/career.stories.tsx
+++ b/src/components/atoms/icons/career.stories.tsx
@@ -1,8 +1,11 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import CareerIcon from './career';
 
+/**
+ * Career icon - Storybook Meta
+ */
 export default {
-  title: 'Atoms/Icons',
+  title: 'Atoms/Illustrations/Icons',
   component: CareerIcon,
   argTypes: {
     className: {
@@ -25,4 +28,7 @@ const Template: ComponentStory<typeof CareerIcon> = (args) => (
   <CareerIcon {...args} />
 );
 
+/**
+ * Icons Stories - Career
+ */
 export const Career = Template.bind({});
diff --git a/src/components/atoms/icons/cc-by-sa.stories.tsx b/src/components/atoms/icons/cc-by-sa.stories.tsx
index 21d6cd5..f2bc8f0 100644
--- a/src/components/atoms/icons/cc-by-sa.stories.tsx
+++ b/src/components/atoms/icons/cc-by-sa.stories.tsx
@@ -2,8 +2,11 @@ import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { IntlProvider } from 'react-intl';
 import CCBySAIcon from './cc-by-sa';
 
+/**
+ * CC BY SA icon - Storybook Meta
+ */
 export default {
-  title: 'Atoms/Icons',
+  title: 'Atoms/Illustrations/Icons',
   component: CCBySAIcon,
   argTypes: {
     className: {
@@ -20,12 +23,20 @@ export default {
       },
     },
   },
+  decorators: [
+    (Story) => (
+      <IntlProvider locale="en">
+        <Story />
+      </IntlProvider>
+    ),
+  ],
 } as ComponentMeta<typeof CCBySAIcon>;
 
 const Template: ComponentStory<typeof CCBySAIcon> = (args) => (
-  <IntlProvider locale="en">
-    <CCBySAIcon {...args} />
-  </IntlProvider>
+  <CCBySAIcon {...args} />
 );
 
+/**
+ * Icons Stories - CC BY SA
+ */
 export const CCBySA = Template.bind({});
diff --git a/src/components/atoms/icons/close.stories.tsx b/src/components/atoms/icons/close.stories.tsx
index b1d88cd..f9628db 100644
--- a/src/components/atoms/icons/close.stories.tsx
+++ b/src/components/atoms/icons/close.stories.tsx
@@ -1,8 +1,11 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import CloseIcon from './close';
 
+/**
+ * Close icon - Storybook Meta
+ */
 export default {
-  title: 'Atoms/Icons',
+  title: 'Atoms/Illustrations/Icons',
   component: CloseIcon,
   argTypes: {
     className: {
@@ -25,4 +28,7 @@ const Template: ComponentStory<typeof CloseIcon> = (args) => (
   <CloseIcon {...args} />
 );
 
+/**
+ * Icons Stories - Close
+ */
 export const Close = Template.bind({});
diff --git a/src/components/atoms/icons/cog.stories.tsx b/src/components/atoms/icons/cog.stories.tsx
index ee883d8..631f30d 100644
--- a/src/components/atoms/icons/cog.stories.tsx
+++ b/src/components/atoms/icons/cog.stories.tsx
@@ -1,8 +1,11 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import CogIcon from './cog';
 
+/**
+ * Cogs icon - Storybook Meta
+ */
 export default {
-  title: 'Atoms/Icons',
+  title: 'Atoms/Illustrations/Icons',
   component: CogIcon,
   argTypes: {
     className: {
@@ -25,4 +28,7 @@ const Template: ComponentStory<typeof CogIcon> = (args) => (
   <CogIcon {...args} />
 );
 
+/**
+ * Icons Stories - Cogs
+ */
 export const Cog = Template.bind({});
diff --git a/src/components/atoms/icons/computer-screen.stories.tsx b/src/components/atoms/icons/computer-screen.stories.tsx
index 46e3ad4..19649ad 100644
--- a/src/components/atoms/icons/computer-screen.stories.tsx
+++ b/src/components/atoms/icons/computer-screen.stories.tsx
@@ -1,8 +1,11 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import ComputerScreenIcon from './computer-screen';
 
+/**
+ * Computer Screen icon - Storybook Meta
+ */
 export default {
-  title: 'Atoms/Icons',
+  title: 'Atoms/Illustrations/Icons',
   component: ComputerScreenIcon,
   argTypes: {
     className: {
@@ -25,4 +28,7 @@ const Template: ComponentStory<typeof ComputerScreenIcon> = (args) => (
   <ComputerScreenIcon {...args} />
 );
 
+/**
+ * Icons Stories - Computer Screen
+ */
 export const ComputerScreen = Template.bind({});
diff --git a/src/components/atoms/icons/envelop.stories.tsx b/src/components/atoms/icons/envelop.stories.tsx
index 9139b44..efa94dd 100644
--- a/src/components/atoms/icons/envelop.stories.tsx
+++ b/src/components/atoms/icons/envelop.stories.tsx
@@ -1,8 +1,11 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import EnvelopIcon from './envelop';
 
+/**
+ * Envelop icon - Storybook Meta
+ */
 export default {
-  title: 'Atoms/Icons',
+  title: 'Atoms/Illustrations/Icons',
   component: EnvelopIcon,
   argTypes: {
     className: {
@@ -25,4 +28,7 @@ const Template: ComponentStory<typeof EnvelopIcon> = (args) => (
   <EnvelopIcon {...args} />
 );
 
+/**
+ * Icons Stories - Envelop
+ */
 export const Envelop = Template.bind({});
diff --git a/src/components/atoms/icons/hamburger.stories.tsx b/src/components/atoms/icons/hamburger.stories.tsx
index c753e69..0a8a8cc 100644
--- a/src/components/atoms/icons/hamburger.stories.tsx
+++ b/src/components/atoms/icons/hamburger.stories.tsx
@@ -1,8 +1,11 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import HamburgerIcon from './hamburger';
 
+/**
+ * Hamburger icon - Storybook Meta
+ */
 export default {
-  title: 'Atoms/Icons',
+  title: 'Atoms/Illustrations/Icons',
   component: HamburgerIcon,
   argTypes: {
     className: {
@@ -38,4 +41,7 @@ const Template: ComponentStory<typeof HamburgerIcon> = (args) => (
   <HamburgerIcon {...args} />
 );
 
+/**
+ * Icons Stories - Hamburger
+ */
 export const Hamburger = Template.bind({});
diff --git a/src/components/atoms/icons/home.stories.tsx b/src/components/atoms/icons/home.stories.tsx
index b1c995c..ffb3061 100644
--- a/src/components/atoms/icons/home.stories.tsx
+++ b/src/components/atoms/icons/home.stories.tsx
@@ -1,8 +1,11 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import HomeIcon from './home';
 
+/**
+ * Home icon - Storybook Meta
+ */
 export default {
-  title: 'Atoms/Icons',
+  title: 'Atoms/Illustrations/Icons',
   component: HomeIcon,
   argTypes: {
     className: {
@@ -25,4 +28,7 @@ const Template: ComponentStory<typeof HomeIcon> = (args) => (
   <HomeIcon {...args} />
 );
 
+/**
+ * Icons Stories - Home
+ */
 export const Home = Template.bind({});
diff --git a/src/components/atoms/icons/magnifying-glass.stories.tsx b/src/components/atoms/icons/magnifying-glass.stories.tsx
index 80e183e..3e33deb 100644
--- a/src/components/atoms/icons/magnifying-glass.stories.tsx
+++ b/src/components/atoms/icons/magnifying-glass.stories.tsx
@@ -1,8 +1,11 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import MagnifyingGlassIcon from './magnifying-glass';
 
+/**
+ * Magnifying Glass icon - Storybook Meta
+ */
 export default {
-  title: 'Atoms/Icons',
+  title: 'Atoms/Illustrations/Icons',
   component: MagnifyingGlassIcon,
   argTypes: {
     className: {
@@ -25,4 +28,7 @@ const Template: ComponentStory<typeof MagnifyingGlassIcon> = (args) => (
   <MagnifyingGlassIcon {...args} />
 );
 
+/**
+ * Icons Stories - Magnifying Glass
+ */
 export const MagnifyingGlass = Template.bind({});
diff --git a/src/components/atoms/icons/moon.stories.tsx b/src/components/atoms/icons/moon.stories.tsx
index 4d2fb9a..e8b34de 100644
--- a/src/components/atoms/icons/moon.stories.tsx
+++ b/src/components/atoms/icons/moon.stories.tsx
@@ -1,8 +1,11 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import MoonIcon from './moon';
 
+/**
+ * Moon icon - Storybook Meta
+ */
 export default {
-  title: 'Atoms/Icons',
+  title: 'Atoms/Illustrations/Icons',
   component: MoonIcon,
   argTypes: {
     className: {
@@ -38,4 +41,7 @@ const Template: ComponentStory<typeof MoonIcon> = (args) => (
   <MoonIcon {...args} />
 );
 
+/**
+ * Icons Stories - Moon
+ */
 export const Moon = Template.bind({});
diff --git a/src/components/atoms/icons/plus-minus.stories.tsx b/src/components/atoms/icons/plus-minus.stories.tsx
index ffa28f2..f7e55f8 100644
--- a/src/components/atoms/icons/plus-minus.stories.tsx
+++ b/src/components/atoms/icons/plus-minus.stories.tsx
@@ -1,8 +1,11 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import PlusMinusIcon from './plus-minus';
 
+/**
+ * Plus/Minus icon - Storybook Meta
+ */
 export default {
-  title: 'Atoms/Icons',
+  title: 'Atoms/Illustrations/Icons',
   component: PlusMinusIcon,
   argTypes: {
     className: {
@@ -37,6 +40,9 @@ const Template: ComponentStory<typeof PlusMinusIcon> = (args) => (
   <PlusMinusIcon {...args} />
 );
 
+/**
+ * Icons Stories - Plus/Minus
+ */
 export const PlusMinus = Template.bind({});
 PlusMinus.args = {
   state: 'plus',
diff --git a/src/components/atoms/icons/posts-stack.stories.tsx b/src/components/atoms/icons/posts-stack.stories.tsx
index 46bb39f..1990b98 100644
--- a/src/components/atoms/icons/posts-stack.stories.tsx
+++ b/src/components/atoms/icons/posts-stack.stories.tsx
@@ -1,8 +1,11 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import PostsStackIcon from './posts-stack';
 
+/**
+ * Posts Stack icon - Storybook Meta
+ */
 export default {
-  title: 'Atoms/Icons',
+  title: 'Atoms/Illustrations/Icons',
   component: PostsStackIcon,
   argTypes: {
     className: {
@@ -25,4 +28,7 @@ const Template: ComponentStory<typeof PostsStackIcon> = (args) => (
   <PostsStackIcon {...args} />
 );
 
+/**
+ * Icons Stories - Posts Stack
+ */
 export const PostsStack = Template.bind({});
diff --git a/src/components/atoms/icons/sun.stories.tsx b/src/components/atoms/icons/sun.stories.tsx
index 23c5b27..60af648 100644
--- a/src/components/atoms/icons/sun.stories.tsx
+++ b/src/components/atoms/icons/sun.stories.tsx
@@ -1,8 +1,11 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import SunIcon from './sun';
 
+/**
+ * Sun icon - Storybook Meta
+ */
 export default {
-  title: 'Atoms/Icons',
+  title: 'Atoms/Illustrations/Icons',
   component: SunIcon,
   argTypes: {
     className: {
@@ -38,4 +41,7 @@ const Template: ComponentStory<typeof SunIcon> = (args) => (
   <SunIcon {...args} />
 );
 
+/**
+ * Icons Stories - Sun
+ */
 export const Sun = Template.bind({});