refactor(storybook): reorganize design system

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

21 files changed, 512 insertions, 131 deletions

diff --git a/src/components/organisms/forms/comment-form.stories.tsx b/src/components/organisms/forms/comment-form.stories.tsx
index 670176c..f66d35c 100644
--- a/src/components/organisms/forms/comment-form.stories.tsx
+++ b/src/components/organisms/forms/comment-form.stories.tsx
@@ -1,10 +1,13 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { IntlProvider } from 'react-intl';
-import CommentFormComponent from './comment-form';
+import CommentForm from './comment-form';
 
+/**
+ * CommentForm - Storybook Meta
+ */
 export default {
   title: 'Organisms/Forms',
-  component: CommentFormComponent,
+  component: CommentForm,
   argTypes: {
     className: {
       control: {
@@ -58,6 +61,8 @@ export default {
     titleLevel: {
       control: {
         type: 'number',
+        min: 1,
+        max: 6,
       },
       description: 'The title level (hn).',
       table: {
@@ -69,16 +74,24 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof CommentFormComponent>;
+  decorators: [
+    (Story) => (
+      <IntlProvider locale="en">
+        <Story />
+      </IntlProvider>
+    ),
+  ],
+} as ComponentMeta<typeof CommentForm>;
 
-const Template: ComponentStory<typeof CommentFormComponent> = (args) => (
-  <IntlProvider locale="en">
-    <CommentFormComponent {...args} />
-  </IntlProvider>
+const Template: ComponentStory<typeof CommentForm> = (args) => (
+  <CommentForm {...args} />
 );
 
-export const CommentForm = Template.bind({});
-CommentForm.args = {
+/**
+ * Forms Stories - Comment
+ */
+export const Comment = Template.bind({});
+Comment.args = {
   saveComment: (reset: () => void) => {
     reset();
   },
diff --git a/src/components/organisms/forms/contact-form.stories.tsx b/src/components/organisms/forms/contact-form.stories.tsx
index 2c8ab32..9b936f9 100644
--- a/src/components/organisms/forms/contact-form.stories.tsx
+++ b/src/components/organisms/forms/contact-form.stories.tsx
@@ -1,10 +1,13 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { IntlProvider } from 'react-intl';
-import ContactFormComponent from './contact-form';
+import ContactForm from './contact-form';
 
+/**
+ * ContactForm - Storybook Meta
+ */
 export default {
   title: 'Organisms/Forms',
-  component: ContactFormComponent,
+  component: ContactForm,
   argTypes: {
     className: {
       control: {
@@ -43,16 +46,24 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof ContactFormComponent>;
+  decorators: [
+    (Story) => (
+      <IntlProvider locale="en">
+        <Story />
+      </IntlProvider>
+    ),
+  ],
+} as ComponentMeta<typeof ContactForm>;
 
-const Template: ComponentStory<typeof ContactFormComponent> = (args) => (
-  <IntlProvider locale="en">
-    <ContactFormComponent {...args} />
-  </IntlProvider>
+const Template: ComponentStory<typeof ContactForm> = (args) => (
+  <ContactForm {...args} />
 );
 
-export const ContactForm = Template.bind({});
-ContactForm.args = {
+/**
+ * Forms Stories - Contact
+ */
+export const Contact = Template.bind({});
+Contact.args = {
   sendMail: (reset: () => void) => {
     reset();
   },
diff --git a/src/components/organisms/forms/search-form.stories.tsx b/src/components/organisms/forms/search-form.stories.tsx
index 4ec1c21..7f4c7c0 100644
--- a/src/components/organisms/forms/search-form.stories.tsx
+++ b/src/components/organisms/forms/search-form.stories.tsx
@@ -1,10 +1,16 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { IntlProvider } from 'react-intl';
-import SearchFormComponent from './search-form';
+import SearchForm from './search-form';
 
+/**
+ * SearchForm - Storybook Meta
+ */
 export default {
   title: 'Organisms/Forms',
-  component: SearchFormComponent,
+  component: SearchForm,
+  args: {
+    hideLabel: false,
+  },
   argTypes: {
     className: {
       control: {
@@ -19,16 +25,38 @@ export default {
         required: false,
       },
     },
+    hideLabel: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Determine if the input label should be visually hidden.',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: false },
+      },
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+    },
   },
-} as ComponentMeta<typeof SearchFormComponent>;
+  decorators: [
+    (Story) => (
+      <IntlProvider locale="en">
+        <Story />
+      </IntlProvider>
+    ),
+  ],
+} as ComponentMeta<typeof SearchForm>;
 
-const Template: ComponentStory<typeof SearchFormComponent> = (args) => (
-  <IntlProvider locale="en">
-    <SearchFormComponent {...args} />
-  </IntlProvider>
+const Template: ComponentStory<typeof SearchForm> = (args) => (
+  <SearchForm {...args} />
 );
 
-export const SearchForm = Template.bind({});
-SearchForm.args = {
+/**
+ * Forms Stories - Search
+ */
+export const Search = Template.bind({});
+Search.args = {
   hideLabel: true,
 };
diff --git a/src/components/organisms/layout/cards-list.stories.tsx b/src/components/organisms/layout/cards-list.stories.tsx
index 5182808..7ff4365 100644
--- a/src/components/organisms/layout/cards-list.stories.tsx
+++ b/src/components/organisms/layout/cards-list.stories.tsx
@@ -1,13 +1,32 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import CardsListComponent, { type CardsListItem } from './cards-list';
 
+/**
+ * CardsList - Storybook Meta
+ */
 export default {
   title: 'Organisms/Layout',
   component: CardsListComponent,
   args: {
+    coverFit: 'cover',
     kind: 'unordered',
   },
   argTypes: {
+    coverFit: {
+      control: {
+        type: 'select',
+      },
+      description: 'The cover fit.',
+      options: ['fill', 'contain', 'cover', 'none', 'scale-down'],
+      table: {
+        category: 'Options',
+        defaultValue: { summary: 'cover' },
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     items: {
       description: 'The cards data.',
       type: {
@@ -34,6 +53,8 @@ export default {
     titleLevel: {
       control: {
         type: 'number',
+        min: 1,
+        max: 6,
       },
       description: 'The heading level for each card.',
       type: {
@@ -56,6 +77,8 @@ const items: CardsListItem[] = [
       src: 'http://placeimg.com/640/480',
       width: 640,
       height: 480,
+      // @ts-ignore - Needed because of the placeholder image.
+      unoptimized: true,
     },
     meta: [
       { id: 'meta-1', term: 'Quibusdam', value: ['Velit', 'Ex', 'Alias'] },
@@ -71,6 +94,8 @@ const items: CardsListItem[] = [
       src: 'http://placeimg.com/640/480',
       width: 640,
       height: 480,
+      // @ts-ignore - Needed because of the placeholder image.
+      unoptimized: true,
     },
     meta: [{ id: 'meta-1', term: 'Est', value: ['Voluptas'] }],
     tagline: 'Quod vel accusamus',
@@ -84,6 +109,8 @@ const items: CardsListItem[] = [
       src: 'http://placeimg.com/640/480',
       width: 640,
       height: 480,
+      // @ts-ignore - Needed because of the placeholder image.
+      unoptimized: true,
     },
     meta: [
       {
@@ -98,6 +125,9 @@ const items: CardsListItem[] = [
   },
 ];
 
+/**
+ * Layout Stories - Cards list
+ */
 export const CardsList = Template.bind({});
 CardsList.args = {
   items,
diff --git a/src/components/organisms/layout/footer.stories.tsx b/src/components/organisms/layout/footer.stories.tsx
index 2ce7ee1..06819da 100644
--- a/src/components/organisms/layout/footer.stories.tsx
+++ b/src/components/organisms/layout/footer.stories.tsx
@@ -2,6 +2,9 @@ import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { IntlProvider } from 'react-intl';
 import FooterComponent from './footer';
 
+/**
+ * Footer - Storybook Meta
+ */
 export default {
   title: 'Organisms/Layout',
   component: FooterComponent,
@@ -50,12 +53,17 @@ export default {
       },
     },
   },
+  decorators: [
+    (Story) => (
+      <IntlProvider locale="en">
+        <Story />
+      </IntlProvider>
+    ),
+  ],
 } as ComponentMeta<typeof FooterComponent>;
 
 const Template: ComponentStory<typeof FooterComponent> = (args) => (
-  <IntlProvider locale="en">
-    <FooterComponent {...args} />
-  </IntlProvider>
+  <FooterComponent {...args} />
 );
 
 const copyright = {
@@ -66,6 +74,9 @@ const copyright = {
 
 const navItems = [{ id: 'legal-notice', href: '#', label: 'Legal notice' }];
 
+/**
+ * Layout Stories - Footer
+ */
 export const Footer = Template.bind({});
 Footer.args = {
   copyright,
diff --git a/src/components/organisms/layout/overview.stories.tsx b/src/components/organisms/layout/overview.stories.tsx
index 61d8b35..b18a6b6 100644
--- a/src/components/organisms/layout/overview.stories.tsx
+++ b/src/components/organisms/layout/overview.stories.tsx
@@ -1,15 +1,21 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import OverviewComponent from './overview';
+import Overview from './overview';
 
+/**
+ * Overview - Storybook Meta
+ */
 export default {
-  title: 'Organisms/Layout',
-  component: OverviewComponent,
+  title: 'Organisms/Layout/Overview',
+  component: Overview,
   argTypes: {
     cover: {
       description: 'The overview cover.',
+      table: {
+        category: 'Options',
+      },
       type: {
         name: 'object',
-        required: true,
+        required: false,
         value: {},
       },
     },
@@ -22,10 +28,10 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof OverviewComponent>;
+} as ComponentMeta<typeof Overview>;
 
-const Template: ComponentStory<typeof OverviewComponent> = (args) => (
-  <OverviewComponent {...args} />
+const Template: ComponentStory<typeof Overview> = (args) => (
+  <Overview {...args} />
 );
 
 const cover = {
@@ -33,6 +39,7 @@ const cover = {
   height: 480,
   src: 'http://placeimg.com/640/480/cats',
   width: 640,
+  unoptimized: true,
 };
 
 const meta = {
@@ -43,8 +50,20 @@ const meta = {
   },
 };
 
-export const Overview = Template.bind({});
-Overview.args = {
+/**
+ * Overview Stories - Default
+ */
+export const Default = Template.bind({});
+Default.args = {
+  cover,
+  meta,
+};
+
+/**
+ * Overview Stories - With cover
+ */
+export const WithCover = Template.bind({});
+WithCover.args = {
   cover,
   meta,
 };
diff --git a/src/components/organisms/layout/summary.module.scss b/src/components/organisms/layout/summary.module.scss
index 5da0a18..3919e15 100644
--- a/src/components/organisms/layout/summary.module.scss
+++ b/src/components/organisms/layout/summary.module.scss
@@ -28,6 +28,7 @@
   width: auto;
   max-height: fun.convert-px(100);
   max-width: 100%;
+  margin-bottom: var(--spacing-sm);
   border: fun.convert-px(1) solid var(--color-border);
 
   @include mix.media("screen") {
diff --git a/src/components/organisms/layout/summary.stories.tsx b/src/components/organisms/layout/summary.stories.tsx
index b33acde..05be7da 100644
--- a/src/components/organisms/layout/summary.stories.tsx
+++ b/src/components/organisms/layout/summary.stories.tsx
@@ -1,10 +1,13 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { IntlProvider } from 'react-intl';
-import SummaryComponent from './summary';
+import Summary from './summary';
 
+/**
+ * Summary - Storybook Meta
+ */
 export default {
-  title: 'Organisms/Layout',
-  component: SummaryComponent,
+  title: 'Organisms/Layout/Summary',
+  component: Summary,
   args: {
     titleLevel: 2,
   },
@@ -51,6 +54,8 @@ export default {
     titleLevel: {
       control: {
         type: 'number',
+        min: 1,
+        max: 6,
       },
       description: 'The page title level (hn)',
       table: {
@@ -73,14 +78,27 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof SummaryComponent>;
+  decorators: [
+    (Story) => (
+      <IntlProvider locale="en">
+        <Story />
+      </IntlProvider>
+    ),
+  ],
+} as ComponentMeta<typeof Summary>;
 
-const Template: ComponentStory<typeof SummaryComponent> = (args) => (
-  <IntlProvider locale="en">
-    <SummaryComponent {...args} />
-  </IntlProvider>
+const Template: ComponentStory<typeof Summary> = (args) => (
+  <Summary {...args} />
 );
 
+const cover = {
+  alt: 'A cover',
+  height: 480,
+  src: 'http://placeimg.com/640/480',
+  width: 640,
+  unoptimized: true,
+};
+
 const meta = {
   publication: { name: 'Published on:', value: 'April 11th 2022' },
   readingTime: { name: 'Reading time:', value: '5 minutes' },
@@ -98,14 +116,24 @@ const meta = {
   comments: { name: 'Comments:', value: '1 comment' },
 };
 
-export const Summary = Template.bind({});
-Summary.args = {
-  cover: {
-    alt: 'A cover',
-    height: 480,
-    src: 'http://placeimg.com/640/480',
-    width: 640,
-  },
+/**
+ * Summary Stories - Default
+ */
+export const Default = Template.bind({});
+Default.args = {
+  excerpt:
+    'Perspiciatis quasi libero nemo non eligendi nam minima. Deleniti expedita tempore. Praesentium explicabo molestiae eaque consectetur vero. Quae nostrum quisquam similique. Ut hic est quas ut esse quisquam nobis.',
+  meta,
+  title: 'Odio odit necessitatibus',
+  url: '#',
+};
+
+/**
+ * Summary Stories - With cover
+ */
+export const WithCover = Template.bind({});
+WithCover.args = {
+  cover,
   excerpt:
     'Perspiciatis quasi libero nemo non eligendi nam minima. Deleniti expedita tempore. Praesentium explicabo molestiae eaque consectetur vero. Quae nostrum quisquam similique. Ut hic est quas ut esse quisquam nobis.',
   meta,
diff --git a/src/components/organisms/layout/summary.tsx b/src/components/organisms/layout/summary.tsx
index 733a660..28aac68 100644
--- a/src/components/organisms/layout/summary.tsx
+++ b/src/components/organisms/layout/summary.tsx
@@ -6,7 +6,7 @@ import ResponsiveImage, {
   type ResponsiveImageProps,
 } from '@components/molecules/images/responsive-image';
 import Meta, { type MetaItem } from '@components/molecules/layout/meta';
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import { useIntl } from 'react-intl';
 import styles from './summary.module.scss';
 
@@ -83,7 +83,7 @@ const Summary: FC<SummaryProps> = ({
     },
     {
       title,
-      a11y: (chunks: string) => (
+      a11y: (chunks: ReactNode) => (
         <span className="screen-reader-text">{chunks}</span>
       ),
     }
diff --git a/src/components/organisms/modals/search-modal.stories.tsx b/src/components/organisms/modals/search-modal.stories.tsx
index b35c841..3ad6abd 100644
--- a/src/components/organisms/modals/search-modal.stories.tsx
+++ b/src/components/organisms/modals/search-modal.stories.tsx
@@ -1,16 +1,42 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { IntlProvider } from 'react-intl';
-import SearchModalComponent from './search-modal';
+import SearchModal from './search-modal';
 
+/**
+ * SearchModal - Storybook Meta
+ */
 export default {
   title: 'Organisms/Modals',
-  component: SearchModalComponent,
-} as ComponentMeta<typeof SearchModalComponent>;
+  component: SearchModal,
+  argTypes: {
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the search modal wrapper.',
+      table: {
+        category: 'Options',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <IntlProvider locale="en">
+        <Story />
+      </IntlProvider>
+    ),
+  ],
+} as ComponentMeta<typeof SearchModal>;
 
-const Template: ComponentStory<typeof SearchModalComponent> = (args) => (
-  <IntlProvider locale="en">
-    <SearchModalComponent {...args} />
-  </IntlProvider>
+const Template: ComponentStory<typeof SearchModal> = (args) => (
+  <SearchModal {...args} />
 );
 
-export const SearchModal = Template.bind({});
+/**
+ * Modals Stories - Search
+ */
+export const Search = Template.bind({});
diff --git a/src/components/organisms/modals/settings-modal.stories.tsx b/src/components/organisms/modals/settings-modal.stories.tsx
index c19a6d7..0abe004 100644
--- a/src/components/organisms/modals/settings-modal.stories.tsx
+++ b/src/components/organisms/modals/settings-modal.stories.tsx
@@ -2,6 +2,9 @@ import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { IntlProvider } from 'react-intl';
 import SettingsModal from './settings-modal';
 
+/**
+ * SettingsModal - Storybook Meta
+ */
 export default {
   title: 'Organisms/Modals',
   component: SettingsModal,
@@ -19,13 +22,34 @@ export default {
         required: false,
       },
     },
+    tooltipClassName: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the tooltip wrapper.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
   },
+  decorators: [
+    (Story) => (
+      <IntlProvider locale="en">
+        <Story />
+      </IntlProvider>
+    ),
+  ],
 } as ComponentMeta<typeof SettingsModal>;
 
 const Template: ComponentStory<typeof SettingsModal> = (args) => (
-  <IntlProvider locale="en">
-    <SettingsModal {...args} />
-  </IntlProvider>
+  <SettingsModal {...args} />
 );
 
+/**
+ * Modals Stories - Settings
+ */
 export const Settings = Template.bind({});
diff --git a/src/components/organisms/toolbar/main-nav.stories.tsx b/src/components/organisms/toolbar/main-nav.stories.tsx
index 27387c0..04b22cb 100644
--- a/src/components/organisms/toolbar/main-nav.stories.tsx
+++ b/src/components/organisms/toolbar/main-nav.stories.tsx
@@ -1,11 +1,14 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useState } from 'react';
 import { IntlProvider } from 'react-intl';
-import MainNavComponent from './main-nav';
+import MainNav from './main-nav';
 
+/**
+ * MainNav - Storybook Meta
+ */
 export default {
-  title: 'Organisms/Toolbar',
-  component: MainNavComponent,
+  title: 'Organisms/Toolbar/MainNav',
+  component: MainNav,
   argTypes: {
     className: {
       control: {
@@ -49,27 +52,45 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof MainNavComponent>;
+  decorators: [
+    (Story) => (
+      <IntlProvider locale="en">
+        <Story />
+      </IntlProvider>
+    ),
+  ],
+} as ComponentMeta<typeof MainNav>;
 
-const Template: ComponentStory<typeof MainNavComponent> = ({
+const Template: ComponentStory<typeof MainNav> = ({
   isActive,
   setIsActive: _setIsActive,
   ...args
 }) => {
   const [isOpen, setIsOpen] = useState<boolean>(isActive);
 
-  return (
-    <IntlProvider locale="en">
-      <MainNavComponent isActive={isOpen} setIsActive={setIsOpen} {...args} />
-    </IntlProvider>
-  );
+  return <MainNav isActive={isOpen} setIsActive={setIsOpen} {...args} />;
 };
 
-export const MainNav = Template.bind({});
-MainNav.args = {
+/**
+ * MainNav Stories - Inactive
+ */
+export const Inactive = Template.bind({});
+Inactive.args = {
   isActive: false,
   items: [
     { id: 'home', label: 'Home', href: '#' },
     { id: 'contact', label: 'Contact', href: '#' },
   ],
 };
+
+/**
+ * MainNav Stories - Active
+ */
+export const Active = Template.bind({});
+Active.args = {
+  isActive: true,
+  items: [
+    { id: 'home', label: 'Home', href: '#' },
+    { id: 'contact', label: 'Contact', href: '#' },
+  ],
+};
diff --git a/src/components/organisms/toolbar/search.stories.tsx b/src/components/organisms/toolbar/search.stories.tsx
index 8c2e871..0421c8c 100644
--- a/src/components/organisms/toolbar/search.stories.tsx
+++ b/src/components/organisms/toolbar/search.stories.tsx
@@ -1,11 +1,14 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useState } from 'react';
 import { IntlProvider } from 'react-intl';
-import SearchComponent from './search';
+import Search from './search';
 
+/**
+ * Search - Storybook Meta
+ */
 export default {
-  title: 'Organisms/Toolbar',
-  component: SearchComponent,
+  title: 'Organisms/Toolbar/Search',
+  component: Search,
   argTypes: {
     className: {
       control: {
@@ -41,23 +44,37 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof SearchComponent>;
+  decorators: [
+    (Story) => (
+      <IntlProvider locale="en">
+        <Story />
+      </IntlProvider>
+    ),
+  ],
+} as ComponentMeta<typeof Search>;
 
-const Template: ComponentStory<typeof SearchComponent> = ({
+const Template: ComponentStory<typeof Search> = ({
   isActive,
   setIsActive: _setIsActive,
   ...args
 }) => {
   const [isOpen, setIsOpen] = useState<boolean>(isActive);
 
-  return (
-    <IntlProvider locale="en">
-      <SearchComponent isActive={isOpen} setIsActive={setIsOpen} {...args} />
-    </IntlProvider>
-  );
+  return <Search isActive={isOpen} setIsActive={setIsOpen} {...args} />;
 };
 
-export const Search = Template.bind({});
-Search.args = {
+/**
+ * Search Stories - Inactive
+ */
+export const Inactive = Template.bind({});
+Inactive.args = {
   isActive: false,
 };
+
+/**
+ * Search Stories - Active
+ */
+export const Active = Template.bind({});
+Active.args = {
+  isActive: true,
+};
diff --git a/src/components/organisms/toolbar/settings.stories.tsx b/src/components/organisms/toolbar/settings.stories.tsx
index f01e772..1ec0897 100644
--- a/src/components/organisms/toolbar/settings.stories.tsx
+++ b/src/components/organisms/toolbar/settings.stories.tsx
@@ -1,11 +1,14 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useState } from 'react';
 import { IntlProvider } from 'react-intl';
-import SettingsComponent from './settings';
+import Settings from './settings';
 
+/**
+ * Settings - Storybook Meta
+ */
 export default {
-  title: 'Organisms/Toolbar',
-  component: SettingsComponent,
+  title: 'Organisms/Toolbar/Settings',
+  component: Settings,
   argTypes: {
     className: {
       control: {
@@ -54,23 +57,37 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof SettingsComponent>;
+  decorators: [
+    (Story) => (
+      <IntlProvider locale="en">
+        <Story />
+      </IntlProvider>
+    ),
+  ],
+} as ComponentMeta<typeof Settings>;
 
-const Template: ComponentStory<typeof SettingsComponent> = ({
+const Template: ComponentStory<typeof Settings> = ({
   isActive,
   setIsActive: _setIsActive,
   ...args
 }) => {
   const [isOpen, setIsOpen] = useState<boolean>(isActive);
 
-  return (
-    <IntlProvider locale="en">
-      <SettingsComponent isActive={isOpen} setIsActive={setIsOpen} {...args} />
-    </IntlProvider>
-  );
+  return <Settings isActive={isOpen} setIsActive={setIsOpen} {...args} />;
 };
 
-export const Settings = Template.bind({});
-Settings.args = {
+/**
+ * Settings Stories - Inactive
+ */
+export const Inactive = Template.bind({});
+Inactive.args = {
   isActive: false,
 };
+
+/**
+ * Settings Stories - Active
+ */
+export const Active = Template.bind({});
+Active.args = {
+  isActive: true,
+};
diff --git a/src/components/organisms/toolbar/toolbar.stories.tsx b/src/components/organisms/toolbar/toolbar.stories.tsx
index 75d70d8..de94e31 100644
--- a/src/components/organisms/toolbar/toolbar.stories.tsx
+++ b/src/components/organisms/toolbar/toolbar.stories.tsx
@@ -2,15 +2,46 @@ import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { IntlProvider } from 'react-intl';
 import ToolbarComponent from './toolbar';
 
+/**
+ * Toolbar - Storybook Meta
+ */
 export default {
   title: 'Organisms/Toolbar',
   component: ToolbarComponent,
+  argTypes: {
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the toolbar wrapper.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    nav: {
+      description: 'The main nav items.',
+      type: {
+        name: 'object',
+        required: true,
+        value: {},
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <IntlProvider locale="en">
+        <Story />
+      </IntlProvider>
+    ),
+  ],
 } as ComponentMeta<typeof ToolbarComponent>;
 
 const Template: ComponentStory<typeof ToolbarComponent> = (args) => (
-  <IntlProvider locale="en">
-    <ToolbarComponent {...args} />
-  </IntlProvider>
+  <ToolbarComponent {...args} />
 );
 
 const nav = [
@@ -20,6 +51,9 @@ const nav = [
   { id: 'contact-link', href: '#', label: 'Contact' },
 ];
 
+/**
+ * Toolbar Story
+ */
 export const Toolbar = Template.bind({});
 Toolbar.args = {
   nav,
diff --git a/src/components/organisms/widgets/image-widget.module.scss b/src/components/organisms/widgets/image-widget.module.scss
index 78c0d26..8e4d0aa 100644
--- a/src/components/organisms/widgets/image-widget.module.scss
+++ b/src/components/organisms/widgets/image-widget.module.scss
@@ -1,7 +1,6 @@
 @use "@styles/abstracts/functions" as fun;
 
 .img {
-  max-height: fun.convert-px(350);
   margin: 0;
 }
 
diff --git a/src/components/organisms/widgets/image-widget.stories.tsx b/src/components/organisms/widgets/image-widget.stories.tsx
index 1c2397b..27871ae 100644
--- a/src/components/organisms/widgets/image-widget.stories.tsx
+++ b/src/components/organisms/widgets/image-widget.stories.tsx
@@ -1,10 +1,13 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { IntlProvider } from 'react-intl';
-import ImageWidgetComponent from './image-widget';
+import ImageWidget from './image-widget';
 
+/**
+ * ImageWidget - Storybook Meta
+ */
 export default {
-  title: 'Organisms/Widgets',
-  component: ImageWidgetComponent,
+  title: 'Organisms/Widgets/Image',
+  component: ImageWidget,
   args: {
     alignment: 'left',
   },
@@ -58,6 +61,8 @@ export default {
     level: {
       control: {
         type: 'number',
+        min: 1,
+        max: 6,
       },
       description: 'The widget title level (hn).',
       type: {
@@ -89,12 +94,17 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof ImageWidgetComponent>;
+  decorators: [
+    (Story) => (
+      <IntlProvider locale="en">
+        <Story />
+      </IntlProvider>
+    ),
+  ],
+} as ComponentMeta<typeof ImageWidget>;
 
-const Template: ComponentStory<typeof ImageWidgetComponent> = (args) => (
-  <IntlProvider locale="en">
-    <ImageWidgetComponent {...args} />
-  </IntlProvider>
+const Template: ComponentStory<typeof ImageWidget> = (args) => (
+  <ImageWidget {...args} />
 );
 
 const img = {
@@ -102,10 +112,51 @@ const img = {
   height: 480,
   src: 'http://placeimg.com/640/480/nature',
   width: 640,
+  unoptimized: true,
 };
 
-export const ImageWidget = Template.bind({});
-ImageWidget.args = {
+/**
+ * ImageWidget Stories - Align left
+ */
+export const AlignLeft = Template.bind({});
+AlignLeft.args = {
+  alignment: 'left',
+  expanded: true,
+  img,
+  level: 2,
+  title: 'Quo et totam',
+};
+
+/**
+ * ImageWidget Stories - Align center
+ */
+export const AlignCenter = Template.bind({});
+AlignCenter.args = {
+  alignment: 'center',
+  expanded: true,
+  img,
+  level: 2,
+  title: 'Quo et totam',
+};
+
+/**
+ * ImageWidget Stories - Align right
+ */
+export const AlignRight = Template.bind({});
+AlignRight.args = {
+  alignment: 'right',
+  expanded: true,
+  img,
+  level: 2,
+  title: 'Quo et totam',
+};
+
+/**
+ * ImageWidget Stories - With description
+ */
+export const WithDescription = Template.bind({});
+WithDescription.args = {
+  description: 'Sint enim harum',
   expanded: true,
   img,
   level: 2,
diff --git a/src/components/organisms/widgets/links-list-widget.stories.tsx b/src/components/organisms/widgets/links-list-widget.stories.tsx
index 528f6f7..0f03a2c 100644
--- a/src/components/organisms/widgets/links-list-widget.stories.tsx
+++ b/src/components/organisms/widgets/links-list-widget.stories.tsx
@@ -2,8 +2,11 @@ import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { IntlProvider } from 'react-intl';
 import LinksListWidget from './links-list-widget';
 
+/**
+ * LinksListWidget - Storybook Meta
+ */
 export default {
-  title: 'Organisms/Widgets',
+  title: 'Organisms/Widgets/LinksList',
   component: LinksListWidget,
   args: {
     kind: 'unordered',
@@ -35,6 +38,8 @@ export default {
     level: {
       control: {
         type: 'number',
+        min: 1,
+        max: 6,
       },
       description: 'The heading level.',
       type: {
@@ -53,12 +58,17 @@ export default {
       },
     },
   },
+  decorators: [
+    (Story) => (
+      <IntlProvider locale="en">
+        <Story />
+      </IntlProvider>
+    ),
+  ],
 } as ComponentMeta<typeof LinksListWidget>;
 
 const Template: ComponentStory<typeof LinksListWidget> = (args) => (
-  <IntlProvider locale="en">
-    <LinksListWidget {...args} />
-  </IntlProvider>
+  <LinksListWidget {...args} />
 );
 
 const items = [
@@ -84,9 +94,24 @@ const items = [
   { name: 'Level 1: Item 4', url: '#' },
 ];
 
-export const LinksList = Template.bind({});
-LinksList.args = {
+/**
+ * Links List Widget Stories - Unordered
+ */
+export const Unordered = Template.bind({});
+Unordered.args = {
   items,
+  kind: 'unordered',
+  level: 2,
+  title: 'A list of links',
+};
+
+/**
+ * Links List Widget Stories - Ordered
+ */
+export const Ordered = Template.bind({});
+Ordered.args = {
+  items,
+  kind: 'ordered',
   level: 2,
   title: 'A list of links',
 };
diff --git a/src/components/organisms/widgets/sharing.stories.tsx b/src/components/organisms/widgets/sharing.stories.tsx
index be20b84..c3c3488 100644
--- a/src/components/organisms/widgets/sharing.stories.tsx
+++ b/src/components/organisms/widgets/sharing.stories.tsx
@@ -2,6 +2,9 @@ import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { IntlProvider } from 'react-intl';
 import SharingWidget from './sharing';
 
+/**
+ * Sharing - Storybook Meta
+ */
 export default {
   title: 'Organisms/Widgets',
   component: SharingWidget,
@@ -27,6 +30,8 @@ export default {
     level: {
       control: {
         type: 'number',
+        min: 1,
+        max: 6,
       },
       description: 'The heading level.',
       type: {
@@ -55,14 +60,22 @@ export default {
       },
     },
   },
+  decorators: [
+    (Story) => (
+      <IntlProvider locale="en">
+        <Story />
+      </IntlProvider>
+    ),
+  ],
 } as ComponentMeta<typeof SharingWidget>;
 
 const Template: ComponentStory<typeof SharingWidget> = (args) => (
-  <IntlProvider locale="en">
-    <SharingWidget {...args} />
-  </IntlProvider>
+  <SharingWidget {...args} />
 );
 
+/**
+ * Widgets Stories - Sharing
+ */
 export const Sharing = Template.bind({});
 Sharing.args = {
   expanded: true,
diff --git a/src/components/organisms/widgets/sharing.tsx b/src/components/organisms/widgets/sharing.tsx
index 571c1a4..05a3f73 100644
--- a/src/components/organisms/widgets/sharing.tsx
+++ b/src/components/organisms/widgets/sharing.tsx
@@ -21,7 +21,7 @@ export type SharingData = {
   url: string;
 };
 
-export type SharingProps = Omit<WidgetProps, 'children'> & {
+export type SharingProps = Pick<WidgetProps, 'expanded' | 'level' | 'title'> & {
   /**
    * The page data to share.
    */
diff --git a/src/components/organisms/widgets/social-media.stories.tsx b/src/components/organisms/widgets/social-media.stories.tsx
index 2b84012..2fa8bd7 100644
--- a/src/components/organisms/widgets/social-media.stories.tsx
+++ b/src/components/organisms/widgets/social-media.stories.tsx
@@ -2,6 +2,9 @@ import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { IntlProvider } from 'react-intl';
 import SocialMediaWidget, { Media } from './social-media';
 
+/**
+ * SocialMedia - Storybook Meta
+ */
 export default {
   title: 'Organisms/Widgets',
   component: SocialMediaWidget,
@@ -9,6 +12,8 @@ export default {
     level: {
       control: {
         type: 'number',
+        min: 1,
+        max: 6,
       },
       description: 'The heading level.',
       type: {
@@ -35,12 +40,17 @@ export default {
       },
     },
   },
+  decorators: [
+    (Story) => (
+      <IntlProvider locale="en">
+        <Story />
+      </IntlProvider>
+    ),
+  ],
 } as ComponentMeta<typeof SocialMediaWidget>;
 
 const Template: ComponentStory<typeof SocialMediaWidget> = (args) => (
-  <IntlProvider locale="en">
-    <SocialMediaWidget {...args} />
-  </IntlProvider>
+  <SocialMediaWidget {...args} />
 );
 
 const media: Media[] = [
@@ -48,6 +58,9 @@ const media: Media[] = [
   { name: 'LinkedIn', url: '#' },
 ];
 
+/**
+ * Widgets Stories - Social media
+ */
 export const SocialMedia = Template.bind({});
 SocialMedia.args = {
   media,