refactor(storybook): reorganize design system

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

37 files changed, 636 insertions, 113 deletions

diff --git a/src/components/atoms/buttons/button-link.stories.tsx b/src/components/atoms/buttons/button-link.stories.tsx
index 92b7521..2e1c040 100644
--- a/src/components/atoms/buttons/button-link.stories.tsx
+++ b/src/components/atoms/buttons/button-link.stories.tsx
@@ -1,9 +1,15 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import ButtonLinkComponent from './button-link';
+import ButtonLink from './button-link';
 
+/**
+ * ButtonLink - Storybook Meta
+ */
 export default {
-  title: 'Atoms/Buttons',
-  component: ButtonLinkComponent,
+  title: 'Atoms/Buttons/ButtonLink',
+  component: ButtonLink,
+  args: {
+    shape: 'rectangle',
+  },
   argTypes: {
     'aria-label': {
       control: {
@@ -82,14 +88,38 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof ButtonLinkComponent>;
+} as ComponentMeta<typeof ButtonLink>;
 
-const Template: ComponentStory<typeof ButtonLinkComponent> = (args) => (
-  <ButtonLinkComponent {...args} />
+const Template: ComponentStory<typeof ButtonLink> = (args) => (
+  <ButtonLink {...args} />
 );
 
-export const ButtonLink = Template.bind({});
-ButtonLink.args = {
+/**
+ * ButtonLink Story - Primary
+ */
+export const Primary = Template.bind({});
+Primary.args = {
+  children: 'Link',
+  kind: 'primary',
+  target: '#',
+};
+
+/**
+ * ButtonLink Story - Secondary
+ */
+export const Secondary = Template.bind({});
+Secondary.args = {
+  children: 'Link',
+  kind: 'secondary',
+  target: '#',
+};
+
+/**
+ * ButtonLink Story - Tertiary
+ */
+export const Tertiary = Template.bind({});
+Tertiary.args = {
   children: 'Link',
+  kind: 'tertiary',
   target: '#',
 };
diff --git a/src/components/atoms/buttons/button-link.tsx b/src/components/atoms/buttons/button-link.tsx
index 906fa76..64e0afd 100644
--- a/src/components/atoms/buttons/button-link.tsx
+++ b/src/components/atoms/buttons/button-link.tsx
@@ -22,7 +22,7 @@ export type ButtonLinkProps = {
   /**
    * ButtonLink kind. Default: secondary.
    */
-  kind?: 'primary' | 'secondary';
+  kind?: 'primary' | 'secondary' | 'tertiary';
   /**
    * ButtonLink shape. Default: rectangle.
    */
diff --git a/src/components/atoms/buttons/button.stories.tsx b/src/components/atoms/buttons/button.stories.tsx
index d47a1ea..6803706 100644
--- a/src/components/atoms/buttons/button.stories.tsx
+++ b/src/components/atoms/buttons/button.stories.tsx
@@ -1,12 +1,14 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import ButtonComponent from './button';
+import Button from './button';
 
+/**
+ * Button - Storybook Meta
+ */
 export default {
-  title: 'Atoms/Buttons',
-  component: ButtonComponent,
+  title: 'Atoms/Buttons/Button',
+  component: Button,
   args: {
     disabled: false,
-    kind: 'secondary',
     type: 'button',
   },
   argTypes: {
@@ -119,9 +121,9 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof ButtonComponent>;
+} as ComponentMeta<typeof Button>;
 
-const Template: ComponentStory<typeof ButtonComponent> = (args) => {
+const Template: ComponentStory<typeof Button> = (args) => {
   const { children, type, ...props } = args;
 
   const getBody = () => {
@@ -139,10 +141,32 @@ const Template: ComponentStory<typeof ButtonComponent> = (args) => {
   };
 
   return (
-    <ButtonComponent type={type} {...props}>
+    <Button type={type} {...props}>
       {getBody()}
-    </ButtonComponent>
+    </Button>
   );
 };
 
-export const Button = Template.bind({});
+/**
+ * Button Story - Primary
+ */
+export const Primary = Template.bind({});
+Primary.args = {
+  kind: 'primary',
+};
+
+/**
+ * Button Story - Secondary
+ */
+export const Secondary = Template.bind({});
+Secondary.args = {
+  kind: 'secondary',
+};
+
+/**
+ * Button Story - Tertiary
+ */
+export const Tertiary = Template.bind({});
+Tertiary.args = {
+  kind: 'tertiary',
+};
diff --git a/src/components/atoms/buttons/buttons.module.scss b/src/components/atoms/buttons/buttons.module.scss
index 8e3e196..36c66b6 100644
--- a/src/components/atoms/buttons/buttons.module.scss
+++ b/src/components/atoms/buttons/buttons.module.scss
@@ -8,6 +8,7 @@
   border-radius: fun.convert-px(5);
   font-size: var(--font-size-md);
   font-weight: 600;
+  text-decoration: none;
   transition: all 0.3s ease-in-out 0s;
 
   &--initial {
@@ -44,7 +45,6 @@
       fun.convert-px(2) fun.convert-px(2) 0 fun.convert-px(3)
         var(--color-primary-dark);
     color: var(--color-fg-inverted);
-    text-decoration: none;
     text-shadow: fun.convert-px(2) fun.convert-px(2) 0 var(--color-shadow);
 
     &:disabled {
@@ -91,7 +91,6 @@
       fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4)
         var(--color-shadow);
     color: var(--color-primary);
-    text-decoration: underline transparent 0;
 
     &:disabled {
       border-color: var(--color-border-dark);
@@ -122,7 +121,7 @@
         border-color: var(--color-primary-dark);
         box-shadow: 0 0 0 0 var(--color-shadow);
         color: var(--color-primary-dark);
-        text-decoration: underline transparent 0;
+        text-decoration: none;
         transform: scale(var(--scale-down, 0.94));
       }
     }
diff --git a/src/components/atoms/forms/checkbox.stories.tsx b/src/components/atoms/forms/checkbox.stories.tsx
index 7faf343..588fdcc 100644
--- a/src/components/atoms/forms/checkbox.stories.tsx
+++ b/src/components/atoms/forms/checkbox.stories.tsx
@@ -2,6 +2,9 @@ import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useState } from 'react';
 import CheckboxComponent from './checkbox';
 
+/**
+ * Checkbox - Storybook Meta
+ */
 export default {
   title: 'Atoms/Forms',
   component: CheckboxComponent,
@@ -88,6 +91,9 @@ const Template: ComponentStory<typeof CheckboxComponent> = ({
   );
 };
 
+/**
+ * Checkbox Story
+ */
 export const Checkbox = Template.bind({});
 Checkbox.args = {
   id: 'storybook-checkbox',
diff --git a/src/components/atoms/forms/field.stories.tsx b/src/components/atoms/forms/field.stories.tsx
index ec81922..00a183d 100644
--- a/src/components/atoms/forms/field.stories.tsx
+++ b/src/components/atoms/forms/field.stories.tsx
@@ -1,14 +1,16 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useState } from 'react';
-import FieldComponent from './field';
+import Field from './field';
 
+/**
+ * Field - Storybook Meta
+ */
 export default {
-  title: 'Atoms/Forms',
-  component: FieldComponent,
+  title: 'Atoms/Forms/Fields',
+  component: Field,
   args: {
     disabled: false,
     required: false,
-    type: 'text',
   },
   argTypes: {
     'aria-labelledby': {
@@ -182,20 +184,74 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof FieldComponent>;
+} as ComponentMeta<typeof Field>;
 
-const Template: ComponentStory<typeof FieldComponent> = ({
+const Template: ComponentStory<typeof Field> = ({
   value: _value,
   setValue: _setValue,
   ...args
 }) => {
   const [value, setValue] = useState<string>('');
 
-  return <FieldComponent value={value} setValue={setValue} {...args} />;
+  return <Field value={value} setValue={setValue} {...args} />;
 };
 
-export const Field = Template.bind({});
-Field.args = {
+/**
+ * Field Story - DateTime
+ */
+export const DateTime = Template.bind({});
+DateTime.args = {
   id: 'field-storybook',
   name: 'field-storybook',
+  type: 'datetime-local',
+};
+
+/**
+ * Field Story - Email
+ */
+export const Email = Template.bind({});
+Email.args = {
+  id: 'field-storybook',
+  name: 'field-storybook',
+  type: 'email',
+};
+
+/**
+ * Field Story - Text
+ */
+export const Text = Template.bind({});
+Text.args = {
+  id: 'field-storybook',
+  name: 'field-storybook',
+  type: 'text',
+};
+
+/**
+ * Field Story - Number
+ */
+export const Number = Template.bind({});
+Number.args = {
+  id: 'field-storybook',
+  name: 'field-storybook',
+  type: 'number',
+};
+
+/**
+ * Field Story - TextArea
+ */
+export const TextArea = Template.bind({});
+TextArea.args = {
+  id: 'field-storybook',
+  name: 'field-storybook',
+  type: 'textarea',
+};
+
+/**
+ * Field Story - Time
+ */
+export const Time = Template.bind({});
+Time.args = {
+  id: 'field-storybook',
+  name: 'field-storybook',
+  type: 'time',
 };
diff --git a/src/components/atoms/forms/label.stories.tsx b/src/components/atoms/forms/label.stories.tsx
index 463e8ac..79f1a34 100644
--- a/src/components/atoms/forms/label.stories.tsx
+++ b/src/components/atoms/forms/label.stories.tsx
@@ -1,6 +1,9 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import LabelComponent from './label';
 
+/**
+ * Label - Storybook Meta
+ */
 export default {
   title: 'Atoms/Forms',
   component: LabelComponent,
@@ -79,6 +82,9 @@ const Template: ComponentStory<typeof LabelComponent> = ({
   ...args
 }) => <LabelComponent {...args}>{children}</LabelComponent>;
 
+/**
+ * Label Story
+ */
 export const Label = Template.bind({});
 Label.args = {
   children: 'A label',
diff --git a/src/components/atoms/forms/select.stories.tsx b/src/components/atoms/forms/select.stories.tsx
index c2fb8c6..7127597 100644
--- a/src/components/atoms/forms/select.stories.tsx
+++ b/src/components/atoms/forms/select.stories.tsx
@@ -8,6 +8,9 @@ const selectOptions = [
   { id: 'option3', name: 'Option 3', value: 'option3' },
 ];
 
+/**
+ * Select - Storybook Meta
+ */
 export default {
   title: 'Atoms/Forms',
   component: SelectComponent,
@@ -136,6 +139,9 @@ const Template: ComponentStory<typeof SelectComponent> = ({
   return <SelectComponent value={selected} setValue={setSelected} {...args} />;
 };
 
+/**
+ * Select Story
+ */
 export const Select = Template.bind({});
 Select.args = {
   id: 'storybook-select',
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,
+};
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({});
diff --git a/src/components/atoms/images/logo.stories.tsx b/src/components/atoms/images/logo.stories.tsx
index fbc7501..458ec08 100644
--- a/src/components/atoms/images/logo.stories.tsx
+++ b/src/components/atoms/images/logo.stories.tsx
@@ -1,8 +1,11 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import LogoComponent from './logo';
 
+/**
+ * Logo - Storybook Meta
+ */
 export default {
-  title: 'Atoms/Images',
+  title: 'Atoms/Illustrations/Images',
   component: LogoComponent,
   argTypes: {
     title: {
@@ -25,4 +28,7 @@ const Template: ComponentStory<typeof LogoComponent> = (args) => (
   <LogoComponent {...args} />
 );
 
+/**
+ * Images Stories - Logo
+ */
 export const Logo = Template.bind({});
diff --git a/src/components/atoms/layout/copyright.stories.tsx b/src/components/atoms/layout/copyright.stories.tsx
index 3b315fa..b988165 100644
--- a/src/components/atoms/layout/copyright.stories.tsx
+++ b/src/components/atoms/layout/copyright.stories.tsx
@@ -3,6 +3,9 @@ import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { IntlProvider } from 'react-intl';
 import CopyrightComponent from './copyright';
 
+/**
+ * Copyright - Storybook Meta
+ */
 export default {
   title: 'Atoms/Layout',
   component: CopyrightComponent,
@@ -36,14 +39,22 @@ export default {
       },
     },
   },
+  decorators: [
+    (Story) => (
+      <IntlProvider locale="en">
+        <Story />
+      </IntlProvider>
+    ),
+  ],
 } as ComponentMeta<typeof CopyrightComponent>;
 
 const Template: ComponentStory<typeof CopyrightComponent> = (args) => (
-  <IntlProvider locale="en">
-    <CopyrightComponent {...args} />
-  </IntlProvider>
+  <CopyrightComponent {...args} />
 );
 
+/**
+ * Layout Stories - Copyright
+ */
 export const Copyright = Template.bind({});
 Copyright.args = {
   dates: {
diff --git a/src/components/atoms/layout/main.stories.tsx b/src/components/atoms/layout/main.stories.tsx
index 64df890..5bde475 100644
--- a/src/components/atoms/layout/main.stories.tsx
+++ b/src/components/atoms/layout/main.stories.tsx
@@ -1,6 +1,9 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import MainComponent from './main';
 
+/**
+ * Main - Storybook Meta
+ */
 export default {
   title: 'Atoms/Layout',
   component: MainComponent,
@@ -45,6 +48,9 @@ const Template: ComponentStory<typeof MainComponent> = (args) => (
   <MainComponent {...args} />
 );
 
+/**
+ * Layout Stories - Main
+ */
 export const Main = Template.bind({});
 Main.args = {
   children: 'The main content.',
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',
 };
diff --git a/src/components/atoms/layout/notice.stories.tsx b/src/components/atoms/layout/notice.stories.tsx
index 0555a2e..62f4cba 100644
--- a/src/components/atoms/layout/notice.stories.tsx
+++ b/src/components/atoms/layout/notice.stories.tsx
@@ -1,8 +1,11 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import NoticeComponent from './notice';
 
+/**
+ * Notice - Storybook Meta
+ */
 export default {
-  title: 'Atoms/Layout',
+  title: 'Atoms/Layout/Notice',
   component: NoticeComponent,
   argTypes: {
     kind: {
@@ -33,8 +36,38 @@ const Template: ComponentStory<typeof NoticeComponent> = (args) => (
   <NoticeComponent {...args} />
 );
 
-export const Notice = Template.bind({});
-Notice.args = {
+/**
+ * Notice stories - Error
+ */
+export const Error = Template.bind({});
+Error.args = {
+  kind: 'error',
+  message: 'Nisi provident sapiente.',
+};
+
+/**
+ * Notice stories - Info
+ */
+export const Info = Template.bind({});
+Info.args = {
   kind: 'info',
   message: 'Nisi provident sapiente.',
 };
+
+/**
+ * Notice stories - Success
+ */
+export const Success = Template.bind({});
+Success.args = {
+  kind: 'success',
+  message: 'Nisi provident sapiente.',
+};
+
+/**
+ * Notice stories - Warning
+ */
+export const Warning = Template.bind({});
+Warning.args = {
+  kind: 'warning',
+  message: 'Nisi provident sapiente.',
+};
diff --git a/src/components/atoms/layout/section.stories.tsx b/src/components/atoms/layout/section.stories.tsx
index abbbeed..530b2a0 100644
--- a/src/components/atoms/layout/section.stories.tsx
+++ b/src/components/atoms/layout/section.stories.tsx
@@ -1,9 +1,12 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import SectionComponent from './section';
+import Section from './section';
 
+/**
+ * Section - Storybook Meta
+ */
 export default {
-  title: 'Atoms/Layout',
-  component: SectionComponent,
+  title: 'Atoms/Layout/Section',
+  component: Section,
   args: {
     variant: 'dark',
     withBorder: true,
@@ -72,14 +75,28 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof SectionComponent>;
+} as ComponentMeta<typeof Section>;
 
-const Template: ComponentStory<typeof SectionComponent> = (args) => (
-  <SectionComponent {...args} />
+const Template: ComponentStory<typeof Section> = (args) => (
+  <Section {...args} />
 );
 
-export const Section = Template.bind({});
-Section.args = {
+/**
+ * Section Stories - Light
+ */
+export const Light = Template.bind({});
+Light.args = {
   title: 'A title',
   content: 'The content.',
+  variant: 'light',
+};
+
+/**
+ * Section Stories - Dark
+ */
+export const Dark = Template.bind({});
+Dark.args = {
+  title: 'A title',
+  content: 'The content.',
+  variant: 'dark',
 };
diff --git a/src/components/atoms/links/link.stories.tsx b/src/components/atoms/links/link.stories.tsx
index 569c874..c3b3465 100644
--- a/src/components/atoms/links/link.stories.tsx
+++ b/src/components/atoms/links/link.stories.tsx
@@ -1,9 +1,12 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import LinkComponent from './link';
+import Link from './link';
 
+/**
+ * Link - Storybook Meta
+ */
 export default {
-  title: 'Atoms/Links',
-  component: LinkComponent,
+  title: 'Atoms/Typography/Links',
+  component: Link,
   argTypes: {
     children: {
       control: {
@@ -65,15 +68,37 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof LinkComponent>;
+} as ComponentMeta<typeof Link>;
 
-const Template: ComponentStory<typeof LinkComponent> = (args) => (
-  <LinkComponent {...args} />
-);
+const Template: ComponentStory<typeof Link> = (args) => <Link {...args} />;
 
-export const Link = Template.bind({});
-Link.args = {
+/**
+ * Links Stories - Default
+ */
+export const Default = Template.bind({});
+Default.args = {
   children: 'A link',
   href: '#',
   external: false,
 };
+
+/**
+ * Links Stories - External
+ */
+export const External = Template.bind({});
+External.args = {
+  children: 'A link',
+  href: '#',
+  external: true,
+};
+
+/**
+ * Links Stories - External With Lang
+ */
+export const ExternalWithLang = Template.bind({});
+ExternalWithLang.args = {
+  children: 'A link',
+  href: '#',
+  external: true,
+  lang: 'en',
+};
diff --git a/src/components/atoms/links/nav-link.stories.tsx b/src/components/atoms/links/nav-link.stories.tsx
index 08553be..7f7a334 100644
--- a/src/components/atoms/links/nav-link.stories.tsx
+++ b/src/components/atoms/links/nav-link.stories.tsx
@@ -1,8 +1,11 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import NavLinkComponent from './nav-link';
 
+/**
+ * NavLink - Storybook Meta
+ */
 export default {
-  title: 'Atoms/Links',
+  title: 'Atoms/Typography/Links',
   component: NavLinkComponent,
   argTypes: {
     href: {
@@ -42,6 +45,9 @@ const Template: ComponentStory<typeof NavLinkComponent> = (args) => (
   <NavLinkComponent {...args} />
 );
 
+/**
+ * Links Stories - Nav Link
+ */
 export const NavLink = Template.bind({});
 NavLink.args = {
   href: '#',
diff --git a/src/components/atoms/links/sharing-link.stories.tsx b/src/components/atoms/links/sharing-link.stories.tsx
index 335fa50..c91e938 100644
--- a/src/components/atoms/links/sharing-link.stories.tsx
+++ b/src/components/atoms/links/sharing-link.stories.tsx
@@ -2,8 +2,11 @@ import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { IntlProvider } from 'react-intl';
 import SharingLinkComponent from './sharing-link';
 
+/**
+ * SharingLink - Storybook Meta
+ */
 export default {
-  title: 'Atoms/Links',
+  title: 'Atoms/Buttons/Sharing',
   component: SharingLinkComponent,
   argTypes: {
     medium: {
@@ -43,8 +46,56 @@ const Template: ComponentStory<typeof SharingLinkComponent> = (args) => (
   </IntlProvider>
 );
 
-export const SharingLink = Template.bind({});
-SharingLink.args = {
+/**
+ * Sharing Link Stories - Diaspora
+ */
+export const Diaspora = Template.bind({});
+Diaspora.args = {
   medium: 'diaspora',
   url: '#',
 };
+
+/**
+ * Sharing Link Stories - Email
+ */
+export const Email = Template.bind({});
+Email.args = {
+  medium: 'email',
+  url: '#',
+};
+
+/**
+ * Sharing Link Stories - Facebook
+ */
+export const Facebook = Template.bind({});
+Facebook.args = {
+  medium: 'facebook',
+  url: '#',
+};
+
+/**
+ * Sharing Link Stories - Journal du Hacker
+ */
+export const JournalDuHacker = Template.bind({});
+JournalDuHacker.args = {
+  medium: 'journal-du-hacker',
+  url: '#',
+};
+
+/**
+ * Sharing Link Stories - LinkedIn
+ */
+export const LinkedIn = Template.bind({});
+LinkedIn.args = {
+  medium: 'linkedin',
+  url: '#',
+};
+
+/**
+ * Sharing Link Stories - Twitter
+ */
+export const Twitter = Template.bind({});
+Twitter.args = {
+  medium: 'twitter',
+  url: '#',
+};
diff --git a/src/components/atoms/links/social-link.stories.tsx b/src/components/atoms/links/social-link.stories.tsx
index bd9a364..977ae6b 100644
--- a/src/components/atoms/links/social-link.stories.tsx
+++ b/src/components/atoms/links/social-link.stories.tsx
@@ -1,9 +1,12 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import SocialLinkComponent from './social-link';
+import SocialLink from './social-link';
 
+/**
+ * SocialLink - Storybook Meta
+ */
 export default {
-  title: 'Atoms/Links',
-  component: SocialLinkComponent,
+  title: 'Atoms/Buttons/Social',
+  component: SocialLink,
   argTypes: {
     name: {
       control: {
@@ -27,14 +30,44 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof SocialLinkComponent>;
+} as ComponentMeta<typeof SocialLink>;
 
-const Template: ComponentStory<typeof SocialLinkComponent> = (args) => (
-  <SocialLinkComponent {...args} />
+const Template: ComponentStory<typeof SocialLink> = (args) => (
+  <SocialLink {...args} />
 );
 
-export const SocialLink = Template.bind({});
-SocialLink.args = {
+/**
+ * Social Link Stories - Github
+ */
+export const Github = Template.bind({});
+Github.args = {
   name: 'Github',
   url: '#',
 };
+
+/**
+ * Social Link Stories - Gitlab
+ */
+export const Gitlab = Template.bind({});
+Gitlab.args = {
+  name: 'Gitlab',
+  url: '#',
+};
+
+/**
+ * Social Link Stories - LinkedIn
+ */
+export const LinkedIn = Template.bind({});
+LinkedIn.args = {
+  name: 'LinkedIn',
+  url: '#',
+};
+
+/**
+ * Social Link Stories - Twitter
+ */
+export const Twitter = Template.bind({});
+Twitter.args = {
+  name: 'Twitter',
+  url: '#',
+};
diff --git a/src/components/atoms/lists/description-list.stories.tsx b/src/components/atoms/lists/description-list.stories.tsx
index 66d94af..43ee66e 100644
--- a/src/components/atoms/lists/description-list.stories.tsx
+++ b/src/components/atoms/lists/description-list.stories.tsx
@@ -3,8 +3,11 @@ import DescriptionListComponent, {
   DescriptionListItem,
 } from './description-list';
 
+/**
+ * DescriptionList - Storybook Meta
+ */
 export default {
-  title: 'Atoms/Lists',
+  title: 'Atoms/Typography/Lists',
   component: DescriptionListComponent,
   args: {
     layout: 'column',
@@ -67,6 +70,9 @@ const items: DescriptionListItem[] = [
   { id: 'term-4', term: 'Term 4:', value: ['Value for term 4'] },
 ];
 
+/**
+ * List Stories - Description list
+ */
 export const DescriptionList = Template.bind({});
 DescriptionList.args = {
   items,
diff --git a/src/components/atoms/lists/list.stories.tsx b/src/components/atoms/lists/list.stories.tsx
index 30079cb..3a80962 100644
--- a/src/components/atoms/lists/list.stories.tsx
+++ b/src/components/atoms/lists/list.stories.tsx
@@ -1,8 +1,11 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import ListComponent, { type ListItem } from './list';
 
+/**
+ * List - Storybook Meta
+ */
 export default {
-  title: 'Atoms/Lists',
+  title: 'Atoms/Typography/Lists',
   component: ListComponent,
   args: {
     kind: 'unordered',
@@ -68,13 +71,19 @@ const items: ListItem[] = [
   { id: 'item-4', value: 'Item 4' },
 ];
 
-export const Unordered = Template.bind({});
-Unordered.args = {
-  items,
-};
-
+/**
+ * List Stories - Ordered list
+ */
 export const Ordered = Template.bind({});
 Ordered.args = {
   items,
   kind: 'ordered',
 };
+
+/**
+ * List Stories - Unordered list
+ */
+export const Unordered = Template.bind({});
+Unordered.args = {
+  items,
+};
diff --git a/src/components/atoms/loaders/progress-bar.stories.tsx b/src/components/atoms/loaders/progress-bar.stories.tsx
index 4fde5a7..fcd631c 100644
--- a/src/components/atoms/loaders/progress-bar.stories.tsx
+++ b/src/components/atoms/loaders/progress-bar.stories.tsx
@@ -1,8 +1,11 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import ProgressBarComponent from './progress-bar';
 
+/**
+ * ProgressBar - Storybook Meta
+ */
 export default {
-  title: 'Atoms/Loaders',
+  title: 'Atoms/Loaders/ProgressBar',
   component: ProgressBarComponent,
   argTypes: {
     'aria-label': {
@@ -68,9 +71,23 @@ const Template: ComponentStory<typeof ProgressBarComponent> = (args) => (
   <ProgressBarComponent {...args} />
 );
 
+/**
+ * Loaders Stories - Default Progress bar
+ */
 export const ProgressBar = Template.bind({});
 ProgressBar.args = {
   current: 10,
   min: 0,
   max: 50,
 };
+
+/**
+ * Loaders Stories - Progress bar With Info
+ */
+export const ProgressBarWithInfo = Template.bind({});
+ProgressBarWithInfo.args = {
+  current: 10,
+  info: 'Loaded: 10 / 50',
+  min: 0,
+  max: 50,
+};
diff --git a/src/components/atoms/loaders/spinner.stories.tsx b/src/components/atoms/loaders/spinner.stories.tsx
index 5006ce4..dc577dc 100644
--- a/src/components/atoms/loaders/spinner.stories.tsx
+++ b/src/components/atoms/loaders/spinner.stories.tsx
@@ -2,8 +2,11 @@ import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { IntlProvider } from 'react-intl';
 import SpinnerComponent from './spinner';
 
+/**
+ * Spinner - Storybook Meta
+ */
 export default {
-  title: 'Atoms/Loaders',
+  title: 'Atoms/Loaders/Spinner',
   component: SpinnerComponent,
   argTypes: {
     message: {
@@ -20,12 +23,28 @@ export default {
       },
     },
   },
+  decorators: [
+    (Story) => (
+      <IntlProvider locale="en">
+        <Story />
+      </IntlProvider>
+    ),
+  ],
 } as ComponentMeta<typeof SpinnerComponent>;
 
 const Template: ComponentStory<typeof SpinnerComponent> = (args) => (
-  <IntlProvider locale="en">
-    <SpinnerComponent {...args} />
-  </IntlProvider>
+  <SpinnerComponent {...args} />
 );
 
+/**
+ * Loaders Stories - Default Spinner
+ */
 export const Spinner = Template.bind({});
+
+/**
+ * Loaders Stories - Spinner with custom message
+ */
+export const SpinnerCustomMessage = Template.bind({});
+SpinnerCustomMessage.args = {
+  message: 'Submitting...',
+};