From ec54c7692d5588addcd7563626df381aa86d5d79 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Wed, 20 Apr 2022 19:27:46 +0200
Subject: chore: add a Sidebar component

---
 src/components/atoms/layout/sidebar.stories.tsx | 55 +++++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 src/components/atoms/layout/sidebar.stories.tsx

(limited to 'src/components/atoms/layout/sidebar.stories.tsx')

diff --git a/src/components/atoms/layout/sidebar.stories.tsx b/src/components/atoms/layout/sidebar.stories.tsx
new file mode 100644
index 0000000..337d0c9
--- /dev/null
+++ b/src/components/atoms/layout/sidebar.stories.tsx
@@ -0,0 +1,55 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { IntlProvider } from 'react-intl';
+import SidebarComponent from './sidebar';
+
+/**
+ * Sidebar - Storybook Meta
+ */
+export default {
+  title: 'Atoms/Layout',
+  component: SidebarComponent,
+  argTypes: {
+    children: {
+      control: {
+        type: 'text',
+      },
+      description: 'The sidebar content.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the aside element.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <IntlProvider locale="en">
+        <Story />
+      </IntlProvider>
+    ),
+  ],
+} as ComponentMeta<typeof SidebarComponent>;
+
+const Template: ComponentStory<typeof SidebarComponent> = (args) => (
+  <SidebarComponent {...args} />
+);
+
+/**
+ * Layout Stories - Sidebar
+ */
+export const Sidebar = Template.bind({});
+Sidebar.args = {
+  children: 'Some widgets.',
+};
-- 
cgit v1.2.3


From 056ed0d5f050158cebad689099214b164539899a Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Sun, 15 May 2022 19:08:58 +0200
Subject: chore: improve accessibility

---
 src/components/atoms/layout/sidebar.stories.tsx    | 13 +++++++++++
 src/components/atoms/layout/sidebar.tsx            |  8 +++++--
 src/components/atoms/links/link.module.scss        | 23 +++++++++++++++++++
 src/components/molecules/layout/meta.tsx           | 26 +++++++++++++++++-----
 src/components/organisms/layout/footer.tsx         | 15 ++++++++++++-
 .../organisms/layout/summary.module.scss           |  5 +++++
 src/components/organisms/layout/summary.tsx        |  3 ++-
 src/components/templates/page/page-layout.tsx      | 18 +++++++++++++--
 src/pages/index.tsx                                |  2 +-
 9 files changed, 100 insertions(+), 13 deletions(-)

(limited to 'src/components/atoms/layout/sidebar.stories.tsx')

diff --git a/src/components/atoms/layout/sidebar.stories.tsx b/src/components/atoms/layout/sidebar.stories.tsx
index 337d0c9..175af94 100644
--- a/src/components/atoms/layout/sidebar.stories.tsx
+++ b/src/components/atoms/layout/sidebar.stories.tsx
@@ -9,6 +9,19 @@ export default {
   title: 'Atoms/Layout',
   component: SidebarComponent,
   argTypes: {
+    'aria-label': {
+      control: {
+        type: 'text',
+      },
+      description: 'An accessible name for the sidebar.',
+      table: {
+        category: 'Accessibility',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     children: {
       control: {
         type: 'text',
diff --git a/src/components/atoms/layout/sidebar.tsx b/src/components/atoms/layout/sidebar.tsx
index d13cc0d..d86af37 100644
--- a/src/components/atoms/layout/sidebar.tsx
+++ b/src/components/atoms/layout/sidebar.tsx
@@ -2,6 +2,10 @@ import { FC, ReactNode } from 'react';
 import styles from './sidebar.module.scss';
 
 export type SidebarProps = {
+  /**
+   * An accessible name for the sidebar.
+   */
+  'aria-label'?: string;
   /**
    * The sidebar body.
    */
@@ -17,9 +21,9 @@ export type SidebarProps = {
  *
  * Render an aside element.
  */
-const Sidebar: FC<SidebarProps> = ({ children, className = '' }) => {
+const Sidebar: FC<SidebarProps> = ({ children, className = '', ...props }) => {
   return (
-    <aside className={`${styles.wrapper} ${className}`}>
+    <aside className={`${styles.wrapper} ${className}`} {...props}>
       <div className={styles.body}>{children}</div>
     </aside>
   );
diff --git a/src/components/atoms/links/link.module.scss b/src/components/atoms/links/link.module.scss
index 1b89727..5c97bd2 100644
--- a/src/components/atoms/links/link.module.scss
+++ b/src/components/atoms/links/link.module.scss
@@ -2,6 +2,29 @@
 @use "@styles/abstracts/variables" as var;
 
 .link {
+  background: linear-gradient(to top, var(--color-primary) 50%, transparent 50%)
+    0 0 / 100% 201% no-repeat;
+  color: var(--color-primary);
+  text-decoration-thickness: 0.15em;
+  text-underline-offset: 20%;
+  transition: all 0.3s linear 0s, text-decoration 0.18s ease-in-out 0s;
+
+  &:hover {
+    color: var(--color-primary-light);
+    text-decoration-thickness: 0.25em;
+  }
+
+  &:focus {
+    background-position: 0 100%;
+    color: var(--color-fg-inverted);
+  }
+
+  &:active {
+    background-position: 0 0;
+    color: var(--color-primary-dark);
+    text-decoration-thickness: 18%;
+  }
+
   &[hreflang] {
     &::after {
       display: inline-block;
diff --git a/src/components/molecules/layout/meta.tsx b/src/components/molecules/layout/meta.tsx
index 1d5e04b..1f6219a 100644
--- a/src/components/molecules/layout/meta.tsx
+++ b/src/components/molecules/layout/meta.tsx
@@ -13,6 +13,10 @@ export type CustomMeta = {
 };
 
 export type MetaComments = {
+  /**
+   * A page title.
+   */
+  about: string;
   /**
    * The comments count.
    */
@@ -269,19 +273,29 @@ const Meta: FC<MetaProps> = ({
    * @param comments - The comments object.
    * @returns {string | JSX.Element} - The comments count.
    */
-  const getCommentsCount = (comments: MetaComments) => {
-    const { count, target } = comments;
+  const getCommentsCount = (comments: MetaComments): string | JSX.Element => {
+    const { about, count, target } = comments;
     const commentsCount = intl.formatMessage(
       {
         defaultMessage:
-          '{commentsCount, plural, =0 {No comments} one {# comment} other {# comments}}',
-        id: 'adTrj7',
+          '{commentsCount, plural, =0 {No comments} one {# comment} other {# comments}}<a11y> about {title}</a11y>',
+        id: '02rgLO',
         description: 'Meta: comments count',
       },
-      { commentsCount: count }
+      {
+        a11y: (chunks: ReactNode) => (
+          <span className="screen-reader-text">{chunks}</span>
+        ),
+        commentsCount: count,
+        title: about,
+      }
     );
 
-    return target ? <Link href={target}>{commentsCount}</Link> : commentsCount;
+    return target ? (
+      <Link href={target}>{commentsCount as JSX.Element}</Link>
+    ) : (
+      (commentsCount as JSX.Element)
+    );
   };
 
   /**
diff --git a/src/components/organisms/layout/footer.tsx b/src/components/organisms/layout/footer.tsx
index 15bfa24..1426e96 100644
--- a/src/components/organisms/layout/footer.tsx
+++ b/src/components/organisms/layout/footer.tsx
@@ -4,6 +4,7 @@ import Copyright, {
 import BackToTop from '@components/molecules/buttons/back-to-top';
 import Nav, { type NavItem } from '@components/molecules/nav/nav';
 import { FC } from 'react';
+import { useIntl } from 'react-intl';
 import styles from './footer.module.scss';
 
 export type FooterProps = {
@@ -31,6 +32,13 @@ export type FooterProps = {
  * Renders a footer with copyright and nav;
  */
 const Footer: FC<FooterProps> = ({ className, copyright, navItems, topId }) => {
+  const intl = useIntl();
+  const ariaLabel = intl.formatMessage({
+    defaultMessage: 'Footer',
+    description: 'Footer: an accessible name for footer nav',
+    id: 'd4N8nD',
+  });
+
   return (
     <footer className={`${styles.wrapper} ${className}`}>
       <Copyright
@@ -39,7 +47,12 @@ const Footer: FC<FooterProps> = ({ className, copyright, navItems, topId }) => {
         icon={copyright.icon}
       />
       {navItems && (
-        <Nav kind="footer" items={navItems} className={styles.nav} />
+        <Nav
+          aria-label={ariaLabel}
+          kind="footer"
+          items={navItems}
+          className={styles.nav}
+        />
       )}
       <BackToTop target={topId} className={styles['back-to-top']} />
     </footer>
diff --git a/src/components/organisms/layout/summary.module.scss b/src/components/organisms/layout/summary.module.scss
index 9d28bc6..7e86dd2 100644
--- a/src/components/organisms/layout/summary.module.scss
+++ b/src/components/organisms/layout/summary.module.scss
@@ -80,6 +80,11 @@
   }
 }
 
+.link {
+  display: block;
+  width: fit-content;
+}
+
 .title {
   margin: 0;
   background: none;
diff --git a/src/components/organisms/layout/summary.tsx b/src/components/organisms/layout/summary.tsx
index 078f9ee..3831c0c 100644
--- a/src/components/organisms/layout/summary.tsx
+++ b/src/components/organisms/layout/summary.tsx
@@ -116,6 +116,7 @@ const Summary: FC<SummaryProps> = ({
         </Link>
       )),
       comments: {
+        about: title,
         count: commentsCount || 0,
         target: `${url}#comments`,
       },
@@ -126,7 +127,7 @@ const Summary: FC<SummaryProps> = ({
     <article className={styles.wrapper}>
       {cover && <ResponsiveImage className={styles.cover} {...cover} />}
       <header className={styles.header}>
-        <Link href={url}>
+        <Link href={url} className={styles.link}>
           <Heading level={titleLevel} className={styles.title}>
             {title}
           </Heading>
diff --git a/src/components/templates/page/page-layout.tsx b/src/components/templates/page/page-layout.tsx
index 045b8c1..4e4ff00 100644
--- a/src/components/templates/page/page-layout.tsx
+++ b/src/components/templates/page/page-layout.tsx
@@ -185,7 +185,14 @@ const PageLayout: FC<PageLayoutProps> = ({
         className={styles.header}
       />
       {withToC && (
-        <Sidebar className={`${styles.sidebar} ${styles['sidebar--first']}`}>
+        <Sidebar
+          className={`${styles.sidebar} ${styles['sidebar--first']}`}
+          aria-label={intl.formatMessage({
+            defaultMessage: 'Table of contents sidebar',
+            id: 'Q+1GbT',
+            description: 'PageLayout: accessible name for ToC sidebar',
+          })}
+        >
           {isMounted && bodyRef.current && (
             <TableOfContents wrapper={bodyRef.current} />
           )}
@@ -203,7 +210,14 @@ const PageLayout: FC<PageLayoutProps> = ({
         </div>
       )}
       <PageFooter meta={footerMeta} className={styles.footer} />
-      <Sidebar className={`${styles.sidebar} ${styles['sidebar--last']}`}>
+      <Sidebar
+        className={`${styles.sidebar} ${styles['sidebar--last']}`}
+        aria-label={intl.formatMessage({
+          defaultMessage: 'Sidebar',
+          id: 'c556Qo',
+          description: 'PageLayout: accessible name for the sidebar',
+        })}
+      >
         {widgets}
       </Sidebar>
       {hasCommentsSection && (
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 6108d2f..bc9b572 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -322,7 +322,7 @@ const HomePage: NextPage<HomeProps> = ({ recentPosts }) => {
   };
 
   return (
-    <Layout>
+    <Layout isHome={true}>
       <Head>
         <title>{pageTitle}</title>
         <meta name="description" content={pageDescription} />
-- 
cgit v1.2.3


From 4581c262ca06704baaa3c0a172d509207f41f5c3 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Sat, 21 May 2022 18:42:19 +0200
Subject: chore: complete Storybook stories

---
 .../atoms/buttons/button-link.stories.tsx          | 14 ++++++
 src/components/atoms/icons/cc-by-sa.stories.tsx    |  8 ----
 src/components/atoms/layout/copyright.stories.tsx  |  8 ----
 src/components/atoms/layout/sidebar.stories.tsx    |  8 ----
 .../atoms/links/sharing-link.stories.tsx           |  5 +--
 .../atoms/lists/description-list-item.stories.tsx  |  2 +-
 src/components/atoms/lists/list.stories.tsx        | 13 ++++++
 src/components/atoms/loaders/spinner.stories.tsx   |  8 ----
 .../molecules/buttons/back-to-top.stories.tsx      |  8 ----
 .../molecules/buttons/heading-button.stories.tsx   |  1 +
 .../molecules/buttons/help-button.stories.tsx      |  8 ----
 src/components/molecules/buttons/help-button.tsx   | 11 ++---
 .../molecules/forms/labelled-field.stories.tsx     |  1 +
 .../forms/select-with-tooltip.stories.tsx          |  8 ----
 .../molecules/images/responsive-image.stories.tsx  | 13 ++++++
 .../molecules/layout/branding.stories.tsx          |  9 +---
 src/components/molecules/layout/code.stories.tsx   |  8 ----
 src/components/molecules/layout/code.tsx           | 36 ++--------------
 src/components/molecules/layout/meta.stories.tsx   | 34 +++++++--------
 src/components/molecules/layout/widget.stories.tsx | 50 +++++++++++++---------
 src/components/molecules/modals/modal.stories.tsx  | 13 ++++++
 .../molecules/nav/breadcrumb.stories.tsx           |  8 ----
 src/components/molecules/nav/nav.stories.tsx       |  8 ----
 .../molecules/nav/pagination.stories.tsx           | 12 ++----
 .../organisms/forms/comment-form.stories.tsx       | 21 +++++++++
 .../organisms/forms/contact-form.stories.tsx       | 11 ++---
 .../organisms/forms/search-form.stories.tsx        | 10 +++++
 .../organisms/forms/settings-form.stories.tsx      | 20 +++++++++
 .../organisms/layout/comment.stories.tsx           |  1 +
 .../organisms/layout/comments-list.stories.tsx     |  4 +-
 src/components/organisms/layout/header.stories.tsx | 10 +++++
 .../organisms/layout/posts-list.stories.tsx        | 44 +++++++++++++++++++
 .../organisms/modals/search-modal.stories.tsx      | 10 +++++
 .../organisms/modals/settings-modal.stories.tsx    | 20 +++++++++
 .../organisms/toolbar/main-nav.stories.tsx         | 11 ++---
 .../organisms/toolbar/search.stories.tsx           | 13 ++++++
 .../organisms/toolbar/settings.stories.tsx         |  3 ++
 src/components/organisms/toolbar/settings.tsx      |  9 +---
 .../organisms/toolbar/toolbar.stories.tsx          | 10 +++++
 .../organisms/widgets/image-widget.stories.tsx     | 21 +++++----
 .../widgets/links-list-widget.stories.tsx          | 21 +++++----
 .../organisms/widgets/social-media.stories.tsx     |  8 ----
 .../widgets/table-of-contents.stories.tsx          |  8 ----
 src/components/templates/layout/layout.stories.tsx | 26 +++++++++++
 .../templates/page/page-layout.stories.tsx         | 24 +++++++++++
 45 files changed, 362 insertions(+), 237 deletions(-)

(limited to 'src/components/atoms/layout/sidebar.stories.tsx')

diff --git a/src/components/atoms/buttons/button-link.stories.tsx b/src/components/atoms/buttons/button-link.stories.tsx
index 2e1c040..d06aff3 100644
--- a/src/components/atoms/buttons/button-link.stories.tsx
+++ b/src/components/atoms/buttons/button-link.stories.tsx
@@ -47,6 +47,20 @@ export default {
         required: false,
       },
     },
+    external: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Determine if the link is an external link.',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: false },
+      },
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+    },
     kind: {
       control: {
         type: 'select',
diff --git a/src/components/atoms/icons/cc-by-sa.stories.tsx b/src/components/atoms/icons/cc-by-sa.stories.tsx
index f2bc8f0..4229725 100644
--- a/src/components/atoms/icons/cc-by-sa.stories.tsx
+++ b/src/components/atoms/icons/cc-by-sa.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import CCBySAIcon from './cc-by-sa';
 
 /**
@@ -23,13 +22,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof CCBySAIcon>;
 
 const Template: ComponentStory<typeof CCBySAIcon> = (args) => (
diff --git a/src/components/atoms/layout/copyright.stories.tsx b/src/components/atoms/layout/copyright.stories.tsx
index b988165..612b114 100644
--- a/src/components/atoms/layout/copyright.stories.tsx
+++ b/src/components/atoms/layout/copyright.stories.tsx
@@ -1,6 +1,5 @@
 import CCBySA from '@components/atoms/icons/cc-by-sa';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import CopyrightComponent from './copyright';
 
 /**
@@ -39,13 +38,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof CopyrightComponent>;
 
 const Template: ComponentStory<typeof CopyrightComponent> = (args) => (
diff --git a/src/components/atoms/layout/sidebar.stories.tsx b/src/components/atoms/layout/sidebar.stories.tsx
index 175af94..6876f95 100644
--- a/src/components/atoms/layout/sidebar.stories.tsx
+++ b/src/components/atoms/layout/sidebar.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import SidebarComponent from './sidebar';
 
 /**
@@ -46,13 +45,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof SidebarComponent>;
 
 const Template: ComponentStory<typeof SidebarComponent> = (args) => (
diff --git a/src/components/atoms/links/sharing-link.stories.tsx b/src/components/atoms/links/sharing-link.stories.tsx
index c91e938..e6bd11b 100644
--- a/src/components/atoms/links/sharing-link.stories.tsx
+++ b/src/components/atoms/links/sharing-link.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import SharingLinkComponent from './sharing-link';
 
 /**
@@ -41,9 +40,7 @@ export default {
 } as ComponentMeta<typeof SharingLinkComponent>;
 
 const Template: ComponentStory<typeof SharingLinkComponent> = (args) => (
-  <IntlProvider locale="en">
-    <SharingLinkComponent {...args} />
-  </IntlProvider>
+  <SharingLinkComponent {...args} />
 );
 
 /**
diff --git a/src/components/atoms/lists/description-list-item.stories.tsx b/src/components/atoms/lists/description-list-item.stories.tsx
index e05493c..c7beb0d 100644
--- a/src/components/atoms/lists/description-list-item.stories.tsx
+++ b/src/components/atoms/lists/description-list-item.stories.tsx
@@ -52,7 +52,7 @@ export default {
       description: 'The item layout.',
       options: ['inline', 'inline-values', 'stacked'],
       table: {
-        category: 'Styles',
+        category: 'Options',
         defaultValue: { summary: 'stacked' },
       },
       type: {
diff --git a/src/components/atoms/lists/list.stories.tsx b/src/components/atoms/lists/list.stories.tsx
index 54fdd3a..eac3cd3 100644
--- a/src/components/atoms/lists/list.stories.tsx
+++ b/src/components/atoms/lists/list.stories.tsx
@@ -35,6 +35,19 @@ export default {
         value: {},
       },
     },
+    itemsClassName: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the list items.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     kind: {
       control: {
         type: 'select',
diff --git a/src/components/atoms/loaders/spinner.stories.tsx b/src/components/atoms/loaders/spinner.stories.tsx
index dc577dc..1792c6c 100644
--- a/src/components/atoms/loaders/spinner.stories.tsx
+++ b/src/components/atoms/loaders/spinner.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import SpinnerComponent from './spinner';
 
 /**
@@ -23,13 +22,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof SpinnerComponent>;
 
 const Template: ComponentStory<typeof SpinnerComponent> = (args) => (
diff --git a/src/components/molecules/buttons/back-to-top.stories.tsx b/src/components/molecules/buttons/back-to-top.stories.tsx
index 7d4bc39..a338b8b 100644
--- a/src/components/molecules/buttons/back-to-top.stories.tsx
+++ b/src/components/molecules/buttons/back-to-top.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import BackToTopComponent from './back-to-top';
 
 /**
@@ -33,13 +32,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof BackToTopComponent>;
 
 const Template: ComponentStory<typeof BackToTopComponent> = (args) => (
diff --git a/src/components/molecules/buttons/heading-button.stories.tsx b/src/components/molecules/buttons/heading-button.stories.tsx
index d1b5ed4..59f7be9 100644
--- a/src/components/molecules/buttons/heading-button.stories.tsx
+++ b/src/components/molecules/buttons/heading-button.stories.tsx
@@ -1,3 +1,4 @@
+import headingStories from '@components/atoms/headings/heading.stories';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useState } from 'react';
 import HeadingButtonComponent from './heading-button';
diff --git a/src/components/molecules/buttons/help-button.stories.tsx b/src/components/molecules/buttons/help-button.stories.tsx
index cfc603e..4968b27 100644
--- a/src/components/molecules/buttons/help-button.stories.tsx
+++ b/src/components/molecules/buttons/help-button.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import HelpButtonComponent from './help-button';
 
 /**
@@ -36,13 +35,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof HelpButtonComponent>;
 
 const Template: ComponentStory<typeof HelpButtonComponent> = (args) => (
diff --git a/src/components/molecules/buttons/help-button.tsx b/src/components/molecules/buttons/help-button.tsx
index e351453..ccf1ebd 100644
--- a/src/components/molecules/buttons/help-button.tsx
+++ b/src/components/molecules/buttons/help-button.tsx
@@ -3,12 +3,7 @@ import { forwardRef, ForwardRefRenderFunction } from 'react';
 import { useIntl } from 'react-intl';
 import styles from './help-button.module.scss';
 
-export type HelpButtonProps = Pick<ButtonProps, 'onClick'> & {
-  /**
-   * Set additional classnames to the button wrapper.
-   */
-  className?: string;
-};
+export type HelpButtonProps = Pick<ButtonProps, 'className' | 'onClick'>;
 
 /**
  * HelpButton component
@@ -18,7 +13,7 @@ export type HelpButtonProps = Pick<ButtonProps, 'onClick'> & {
 const HelpButton: ForwardRefRenderFunction<
   HTMLButtonElement,
   HelpButtonProps
-> = ({ className = '', onClick }, ref) => {
+> = ({ className = '', ...props }, ref) => {
   const intl = useIntl();
   const text = intl.formatMessage({
     defaultMessage: 'Help',
@@ -29,9 +24,9 @@ const HelpButton: ForwardRefRenderFunction<
   return (
     <Button
       className={`${styles.btn} ${className}`}
-      onClick={onClick}
       ref={ref}
       shape="circle"
+      {...props}
     >
       <span className="screen-reader-text">{text}</span>
       <span className={styles.icon}>?</span>
diff --git a/src/components/molecules/forms/labelled-field.stories.tsx b/src/components/molecules/forms/labelled-field.stories.tsx
index 56eef00..795e785 100644
--- a/src/components/molecules/forms/labelled-field.stories.tsx
+++ b/src/components/molecules/forms/labelled-field.stories.tsx
@@ -10,6 +10,7 @@ export default {
   component: LabelledField,
   args: {
     disabled: false,
+    hideLabel: false,
     labelPosition: 'top',
     required: false,
   },
diff --git a/src/components/molecules/forms/select-with-tooltip.stories.tsx b/src/components/molecules/forms/select-with-tooltip.stories.tsx
index d757b2b..ddf5d4c 100644
--- a/src/components/molecules/forms/select-with-tooltip.stories.tsx
+++ b/src/components/molecules/forms/select-with-tooltip.stories.tsx
@@ -1,6 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useState } from 'react';
-import { IntlProvider } from 'react-intl';
 import SelectWithTooltip from './select-with-tooltip';
 
 /**
@@ -178,13 +177,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof SelectWithTooltip>;
 
 const selectOptions = [
diff --git a/src/components/molecules/images/responsive-image.stories.tsx b/src/components/molecules/images/responsive-image.stories.tsx
index 4294208..ca69d4f 100644
--- a/src/components/molecules/images/responsive-image.stories.tsx
+++ b/src/components/molecules/images/responsive-image.stories.tsx
@@ -34,6 +34,19 @@ export default {
         required: false,
       },
     },
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the image wrapper.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     height: {
       control: {
         type: 'number',
diff --git a/src/components/molecules/layout/branding.stories.tsx b/src/components/molecules/layout/branding.stories.tsx
index 1637c99..d2e0694 100644
--- a/src/components/molecules/layout/branding.stories.tsx
+++ b/src/components/molecules/layout/branding.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import Branding from './branding';
 
 /**
@@ -10,6 +9,7 @@ export default {
   component: Branding,
   args: {
     isHome: false,
+    withLink: false,
   },
   argTypes: {
     baseline: {
@@ -72,13 +72,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof Branding>;
 
 const Template: ComponentStory<typeof Branding> = (args) => (
diff --git a/src/components/molecules/layout/code.stories.tsx b/src/components/molecules/layout/code.stories.tsx
index a2a6b2c..ac0e98f 100644
--- a/src/components/molecules/layout/code.stories.tsx
+++ b/src/components/molecules/layout/code.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import CodeComponent from './code';
 
 /**
@@ -70,13 +69,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof CodeComponent>;
 
 const Template: ComponentStory<typeof CodeComponent> = (args) => (
diff --git a/src/components/molecules/layout/code.tsx b/src/components/molecules/layout/code.tsx
index f5b60b9..30351b9 100644
--- a/src/components/molecules/layout/code.tsx
+++ b/src/components/molecules/layout/code.tsx
@@ -1,38 +1,10 @@
-import usePrism, { OptionalPrismPlugin } from '@utils/hooks/use-prism';
+import usePrism, {
+  type OptionalPrismPlugin,
+  type PrismLanguage,
+} from '@utils/hooks/use-prism';
 import { FC, useRef } from 'react';
 import styles from './code.module.scss';
 
-export type PrismLanguage =
-  | 'apacheconf'
-  | 'bash'
-  | 'css'
-  | 'diff'
-  | 'docker'
-  | 'editorconfig'
-  | 'ejs'
-  | 'git'
-  | 'graphql'
-  | 'html'
-  | 'ignore'
-  | 'ini'
-  | 'javascript'
-  | 'jsdoc'
-  | 'json'
-  | 'jsx'
-  | 'makefile'
-  | 'markup'
-  | 'php'
-  | 'phpdoc'
-  | 'regex'
-  | 'scss'
-  | 'shell-session'
-  | 'smarty'
-  | 'tcl'
-  | 'toml'
-  | 'tsx'
-  | 'twig'
-  | 'yaml';
-
 export type CodeProps = {
   /**
    * The code to highlight.
diff --git a/src/components/molecules/layout/meta.stories.tsx b/src/components/molecules/layout/meta.stories.tsx
index a1755a0..c33680f 100644
--- a/src/components/molecules/layout/meta.stories.tsx
+++ b/src/components/molecules/layout/meta.stories.tsx
@@ -1,3 +1,5 @@
+import descriptionListItemStories from '@components/atoms/lists/description-list-item.stories';
+import descriptionListStories from '@components/atoms/lists/description-list.stories';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import MetaComponent, { MetaData } from './meta';
 
@@ -7,7 +9,12 @@ import MetaComponent, { MetaData } from './meta';
 export default {
   title: 'Molecules/Layout',
   component: MetaComponent,
+  args: {
+    itemsLayout: 'inline-values',
+    withSeparator: false,
+  },
   argTypes: {
+    className: descriptionListStories.argTypes?.className,
     data: {
       description: 'The page metadata.',
       type: {
@@ -16,34 +23,23 @@ export default {
         value: {},
       },
     },
+    groupClassName: descriptionListStories.argTypes?.groupClassName,
     itemsLayout: {
-      control: {
-        type: 'select',
-      },
-      description: 'The items layout.',
-      options: ['inline', 'inline-values', 'stacked'],
+      ...descriptionListItemStories.argTypes?.layout,
       table: {
-        category: 'Options',
+        ...descriptionListItemStories.argTypes?.layout?.table,
         defaultValue: { summary: 'inline-values' },
       },
-      type: {
-        name: 'string',
-        required: false,
-      },
     },
+    labelClassName: descriptionListStories.argTypes?.labelClassName,
+    layout: descriptionListStories.argTypes?.layout,
+    valueClassName: descriptionListStories.argTypes?.valueClassName,
     withSeparator: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Add a slash as separator between multiple values.',
+      ...descriptionListStories.argTypes?.withSeparator,
       table: {
-        category: 'Options',
+        ...descriptionListStories.argTypes?.withSeparator?.table,
         defaultValue: { summary: true },
       },
-      type: {
-        name: 'boolean',
-        required: true,
-      },
     },
   },
 } as ComponentMeta<typeof MetaComponent>;
diff --git a/src/components/molecules/layout/widget.stories.tsx b/src/components/molecules/layout/widget.stories.tsx
index c113db9..dd5a30b 100644
--- a/src/components/molecules/layout/widget.stories.tsx
+++ b/src/components/molecules/layout/widget.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
+import headingButtonStories from '../buttons/heading-button.stories';
 import Widget from './widget';
 
 /**
@@ -10,6 +10,7 @@ export default {
   component: Widget,
   args: {
     withBorders: false,
+    withScroll: false,
   },
   argTypes: {
     children: {
@@ -22,6 +23,19 @@ export default {
         required: true,
       },
     },
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the widget wrapper.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     expanded: {
       control: {
         type: 'boolean',
@@ -36,18 +50,7 @@ export default {
         required: false,
       },
     },
-    level: {
-      control: {
-        type: 'number',
-        min: 1,
-        max: 6,
-      },
-      description: 'The heading level.',
-      type: {
-        name: 'number',
-        required: true,
-      },
-    },
+    level: headingButtonStories.argTypes?.level,
     title: {
       control: {
         type: 'text',
@@ -72,14 +75,21 @@ export default {
         required: false,
       },
     },
+    withScroll: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Define if the widget should be scrollable',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: false },
+      },
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+    },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof Widget>;
 
 const Template: ComponentStory<typeof Widget> = (args) => <Widget {...args} />;
diff --git a/src/components/molecules/modals/modal.stories.tsx b/src/components/molecules/modals/modal.stories.tsx
index 55b7677..f6dd364 100644
--- a/src/components/molecules/modals/modal.stories.tsx
+++ b/src/components/molecules/modals/modal.stories.tsx
@@ -31,6 +31,19 @@ export default {
         required: false,
       },
     },
+    headingClassName: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the modal heading.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     icon: {
       control: {
         type: 'select',
diff --git a/src/components/molecules/nav/breadcrumb.stories.tsx b/src/components/molecules/nav/breadcrumb.stories.tsx
index e26b480..cf67e60 100644
--- a/src/components/molecules/nav/breadcrumb.stories.tsx
+++ b/src/components/molecules/nav/breadcrumb.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import Breadcrumb from './breadcrumb';
 
 /**
@@ -44,13 +43,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof Breadcrumb>;
 
 const Template: ComponentStory<typeof Breadcrumb> = (args) => (
diff --git a/src/components/molecules/nav/nav.stories.tsx b/src/components/molecules/nav/nav.stories.tsx
index 5cef5f0..f3a29a6 100644
--- a/src/components/molecules/nav/nav.stories.tsx
+++ b/src/components/molecules/nav/nav.stories.tsx
@@ -1,7 +1,6 @@
 import Envelop from '@components/atoms/icons/envelop';
 import Home from '@components/atoms/icons/home';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import NavComponent, { type NavItem } from './nav';
 
 /**
@@ -73,13 +72,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof NavComponent>;
 
 const Template: ComponentStory<typeof NavComponent> = (args) => (
diff --git a/src/components/molecules/nav/pagination.stories.tsx b/src/components/molecules/nav/pagination.stories.tsx
index b31c2b5..2e86db4 100644
--- a/src/components/molecules/nav/pagination.stories.tsx
+++ b/src/components/molecules/nav/pagination.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import PaginationComponent from './pagination';
 
 /**
@@ -8,6 +7,10 @@ import PaginationComponent from './pagination';
 export default {
   title: 'Molecules/Navigation/Pagination',
   component: PaginationComponent,
+  args: {
+    baseUrl: '/page/',
+    siblings: 1,
+  },
   argTypes: {
     'aria-label': {
       control: {
@@ -95,13 +98,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof PaginationComponent>;
 
 const Template: ComponentStory<typeof PaginationComponent> = (args) => (
diff --git a/src/components/organisms/forms/comment-form.stories.tsx b/src/components/organisms/forms/comment-form.stories.tsx
index 8b11df7..1a9e7b7 100644
--- a/src/components/organisms/forms/comment-form.stories.tsx
+++ b/src/components/organisms/forms/comment-form.stories.tsx
@@ -13,6 +13,8 @@ export default {
   component: CommentForm,
   args: {
     saveComment,
+    titleAlignment: 'left',
+    titleLevel: 2,
   },
   argTypes: {
     className: {
@@ -56,6 +58,9 @@ export default {
         type: null,
       },
       description: 'A callback function to process the comment form data.',
+      table: {
+        category: 'Events',
+      },
       type: {
         name: 'function',
         required: true,
@@ -74,6 +79,21 @@ export default {
         required: false,
       },
     },
+    titleAlignment: {
+      control: {
+        type: 'select',
+      },
+      description: 'The heading alignment.',
+      options: ['center', 'left'],
+      table: {
+        category: 'Options',
+        defaultValue: { summary: 'left' },
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     titleLevel: {
       control: {
         type: 'number',
@@ -83,6 +103,7 @@ export default {
       description: 'The title level (hn).',
       table: {
         category: 'Options',
+        defaultValue: { summary: 2 },
       },
       type: {
         name: 'number',
diff --git a/src/components/organisms/forms/contact-form.stories.tsx b/src/components/organisms/forms/contact-form.stories.tsx
index 39d0b71..191d448 100644
--- a/src/components/organisms/forms/contact-form.stories.tsx
+++ b/src/components/organisms/forms/contact-form.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import ContactForm from './contact-form';
 
 /**
@@ -40,19 +39,15 @@ export default {
         type: null,
       },
       description: 'A callback function to process the contact form data.',
+      table: {
+        category: 'Events',
+      },
       type: {
         name: 'function',
         required: true,
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof ContactForm>;
 
 const Template: ComponentStory<typeof ContactForm> = (args) => (
diff --git a/src/components/organisms/forms/search-form.stories.tsx b/src/components/organisms/forms/search-form.stories.tsx
index 6ea6122..d8c8e1e 100644
--- a/src/components/organisms/forms/search-form.stories.tsx
+++ b/src/components/organisms/forms/search-form.stories.tsx
@@ -39,6 +39,16 @@ export default {
         required: false,
       },
     },
+    searchPage: {
+      control: {
+        type: 'text',
+      },
+      description: 'The search results page url.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
   },
 } as ComponentMeta<typeof SearchForm>;
 
diff --git a/src/components/organisms/forms/settings-form.stories.tsx b/src/components/organisms/forms/settings-form.stories.tsx
index 46305e7..70e1844 100644
--- a/src/components/organisms/forms/settings-form.stories.tsx
+++ b/src/components/organisms/forms/settings-form.stories.tsx
@@ -8,6 +8,16 @@ export default {
   title: 'Organisms/Forms',
   component: SettingsForm,
   argTypes: {
+    ackeeStorageKey: {
+      control: {
+        type: 'text',
+      },
+      description: 'The local storage key for Ackee setting.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
     className: {
       control: {
         type: 'text',
@@ -21,6 +31,16 @@ export default {
         required: false,
       },
     },
+    motionStorageKey: {
+      control: {
+        type: 'text',
+      },
+      description: 'The local storage key for reduced motion setting.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
     tooltipClassName: {
       control: {
         type: 'text',
diff --git a/src/components/organisms/layout/comment.stories.tsx b/src/components/organisms/layout/comment.stories.tsx
index c31b77a..c7649ab 100644
--- a/src/components/organisms/layout/comment.stories.tsx
+++ b/src/components/organisms/layout/comment.stories.tsx
@@ -12,6 +12,7 @@ export default {
   title: 'Organisms/Layout',
   component: CommentComponent,
   args: {
+    canReply: true,
     saveComment,
   },
   argTypes: {
diff --git a/src/components/organisms/layout/comments-list.stories.tsx b/src/components/organisms/layout/comments-list.stories.tsx
index 4d95205..1ed159a 100644
--- a/src/components/organisms/layout/comments-list.stories.tsx
+++ b/src/components/organisms/layout/comments-list.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import CommentsListComponent, { Comment } from './comments-list';
+import CommentsListComponent, { type Comment } from './comments-list';
 
 const saveComment = async () => {
   /** Do nothing. */
@@ -29,6 +29,8 @@ export default {
     depth: {
       control: {
         type: 'number',
+        min: 0,
+        max: 4,
       },
       description: 'The maximum depth. Use `0` to not display nested comments.',
       type: {
diff --git a/src/components/organisms/layout/header.stories.tsx b/src/components/organisms/layout/header.stories.tsx
index 3ceb337..a5233ea 100644
--- a/src/components/organisms/layout/header.stories.tsx
+++ b/src/components/organisms/layout/header.stories.tsx
@@ -92,6 +92,16 @@ export default {
         required: true,
       },
     },
+    searchPage: {
+      control: {
+        type: 'text',
+      },
+      description: 'The search results page url.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
     title: {
       control: {
         type: 'text',
diff --git a/src/components/organisms/layout/posts-list.stories.tsx b/src/components/organisms/layout/posts-list.stories.tsx
index 77318f4..96fb2f0 100644
--- a/src/components/organisms/layout/posts-list.stories.tsx
+++ b/src/components/organisms/layout/posts-list.stories.tsx
@@ -10,10 +10,26 @@ export default {
   args: {
     byYear: false,
     isLoading: false,
+    pageNumber: 1,
     showLoadMoreBtn: false,
+    siblings: 1,
     titleLevel: 2,
   },
   argTypes: {
+    baseUrl: {
+      control: {
+        type: 'text',
+      },
+      description: 'The pagination base url.',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: '/page/' },
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     byYear: {
       control: {
         type: 'boolean',
@@ -55,6 +71,20 @@ export default {
         required: false,
       },
     },
+    pageNumber: {
+      control: {
+        type: 'number',
+      },
+      description: 'The current page number.',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: 1 },
+      },
+      type: {
+        name: 'number',
+        required: false,
+      },
+    },
     posts: {
       description: 'The posts data.',
       type: {
@@ -77,6 +107,20 @@ export default {
         required: false,
       },
     },
+    siblings: {
+      control: {
+        type: 'number',
+      },
+      description: 'The number of page siblings inside pagination.',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: 1 },
+      },
+      type: {
+        name: 'number',
+        required: false,
+      },
+    },
     titleLevel: {
       control: {
         type: 'number',
diff --git a/src/components/organisms/modals/search-modal.stories.tsx b/src/components/organisms/modals/search-modal.stories.tsx
index f40696c..5a607c6 100644
--- a/src/components/organisms/modals/search-modal.stories.tsx
+++ b/src/components/organisms/modals/search-modal.stories.tsx
@@ -24,6 +24,16 @@ export default {
         required: false,
       },
     },
+    searchPage: {
+      control: {
+        type: 'text',
+      },
+      description: 'The search results page url.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
   },
 } as ComponentMeta<typeof SearchModal>;
 
diff --git a/src/components/organisms/modals/settings-modal.stories.tsx b/src/components/organisms/modals/settings-modal.stories.tsx
index 0fe8c18..d263e2b 100644
--- a/src/components/organisms/modals/settings-modal.stories.tsx
+++ b/src/components/organisms/modals/settings-modal.stories.tsx
@@ -8,6 +8,16 @@ export default {
   title: 'Organisms/Modals',
   component: SettingsModal,
   argTypes: {
+    ackeeStorageKey: {
+      control: {
+        type: 'text',
+      },
+      description: 'A local storage key for Ackee.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
     className: {
       control: {
         type: 'text',
@@ -21,6 +31,16 @@ export default {
         required: false,
       },
     },
+    motionStorageKey: {
+      control: {
+        type: 'text',
+      },
+      description: 'A local storage key for reduced motion setting..',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
     tooltipClassName: {
       control: {
         type: 'text',
diff --git a/src/components/organisms/toolbar/main-nav.stories.tsx b/src/components/organisms/toolbar/main-nav.stories.tsx
index 04b22cb..831636f 100644
--- a/src/components/organisms/toolbar/main-nav.stories.tsx
+++ b/src/components/organisms/toolbar/main-nav.stories.tsx
@@ -1,6 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useState } from 'react';
-import { IntlProvider } from 'react-intl';
 import MainNav from './main-nav';
 
 /**
@@ -46,19 +45,15 @@ export default {
         type: null,
       },
       description: 'A callback function to change main nav state.',
+      table: {
+        category: 'Events',
+      },
       type: {
         name: 'function',
         required: true,
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof MainNav>;
 
 const Template: ComponentStory<typeof MainNav> = ({
diff --git a/src/components/organisms/toolbar/search.stories.tsx b/src/components/organisms/toolbar/search.stories.tsx
index 6aaffde..f0f65b4 100644
--- a/src/components/organisms/toolbar/search.stories.tsx
+++ b/src/components/organisms/toolbar/search.stories.tsx
@@ -35,11 +35,24 @@ export default {
         required: true,
       },
     },
+    searchPage: {
+      control: {
+        type: 'text',
+      },
+      description: 'The search results page url.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
     setIsActive: {
       control: {
         type: null,
       },
       description: 'A callback function to update modal state.',
+      table: {
+        category: 'Events',
+      },
       type: {
         name: 'function',
         required: true,
diff --git a/src/components/organisms/toolbar/settings.stories.tsx b/src/components/organisms/toolbar/settings.stories.tsx
index 9d04932..08ec579 100644
--- a/src/components/organisms/toolbar/settings.stories.tsx
+++ b/src/components/organisms/toolbar/settings.stories.tsx
@@ -41,6 +41,9 @@ export default {
         type: null,
       },
       description: 'Define the modal state: either opened or closed.',
+      table: {
+        category: 'Events',
+      },
       type: {
         name: 'boolean',
         required: true,
diff --git a/src/components/organisms/toolbar/settings.tsx b/src/components/organisms/toolbar/settings.tsx
index 9985ba0..f558eb7 100644
--- a/src/components/organisms/toolbar/settings.tsx
+++ b/src/components/organisms/toolbar/settings.tsx
@@ -9,14 +9,7 @@ import SettingsModal, {
 import settingsStyles from './settings.module.scss';
 import sharedStyles from './toolbar-items.module.scss';
 
-export type SettingsProps = Pick<
-  SettingsModalProps,
-  'ackeeStorageKey' | 'motionStorageKey' | 'tooltipClassName'
-> & {
-  /**
-   * Set additional classnames to the modal wrapper.
-   */
-  className?: string;
+export type SettingsProps = SettingsModalProps & {
   /**
    * The button state.
    */
diff --git a/src/components/organisms/toolbar/toolbar.stories.tsx b/src/components/organisms/toolbar/toolbar.stories.tsx
index 1f07e79..d613442 100644
--- a/src/components/organisms/toolbar/toolbar.stories.tsx
+++ b/src/components/organisms/toolbar/toolbar.stories.tsx
@@ -54,6 +54,16 @@ export default {
         value: {},
       },
     },
+    searchPage: {
+      control: {
+        type: 'text',
+      },
+      description: 'The search results page url.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
   },
   parameters: {
     layout: 'fullscreen',
diff --git a/src/components/organisms/widgets/image-widget.stories.tsx b/src/components/organisms/widgets/image-widget.stories.tsx
index 3014b36..fa39745 100644
--- a/src/components/organisms/widgets/image-widget.stories.tsx
+++ b/src/components/organisms/widgets/image-widget.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import ImageWidget from './image-widget';
 
 /**
@@ -27,6 +26,19 @@ export default {
         required: false,
       },
     },
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the widget wrapper.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     description: {
       control: {
         type: 'text',
@@ -107,13 +119,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof ImageWidget>;
 
 const Template: ComponentStory<typeof ImageWidget> = (args) => (
diff --git a/src/components/organisms/widgets/links-list-widget.stories.tsx b/src/components/organisms/widgets/links-list-widget.stories.tsx
index 0f03a2c..cdfa96a 100644
--- a/src/components/organisms/widgets/links-list-widget.stories.tsx
+++ b/src/components/organisms/widgets/links-list-widget.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import LinksListWidget from './links-list-widget';
 
 /**
@@ -12,6 +11,19 @@ export default {
     kind: 'unordered',
   },
   argTypes: {
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the list wrapper.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     items: {
       description: 'The widget data.',
       type: {
@@ -58,13 +70,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof LinksListWidget>;
 
 const Template: ComponentStory<typeof LinksListWidget> = (args) => (
diff --git a/src/components/organisms/widgets/social-media.stories.tsx b/src/components/organisms/widgets/social-media.stories.tsx
index 2fa8bd7..6c9de4d 100644
--- a/src/components/organisms/widgets/social-media.stories.tsx
+++ b/src/components/organisms/widgets/social-media.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import SocialMediaWidget, { Media } from './social-media';
 
 /**
@@ -40,13 +39,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof SocialMediaWidget>;
 
 const Template: ComponentStory<typeof SocialMediaWidget> = (args) => (
diff --git a/src/components/organisms/widgets/table-of-contents.stories.tsx b/src/components/organisms/widgets/table-of-contents.stories.tsx
index fba7c54..d8b3af7 100644
--- a/src/components/organisms/widgets/table-of-contents.stories.tsx
+++ b/src/components/organisms/widgets/table-of-contents.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import ToCWidget from './table-of-contents';
 
 /**
@@ -21,13 +20,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof ToCWidget>;
 
 const Template: ComponentStory<typeof ToCWidget> = (args) => (
diff --git a/src/components/templates/layout/layout.stories.tsx b/src/components/templates/layout/layout.stories.tsx
index 105e808..4666b07 100644
--- a/src/components/templates/layout/layout.stories.tsx
+++ b/src/components/templates/layout/layout.stories.tsx
@@ -60,6 +60,32 @@ export default {
         required: false,
       },
     },
+    useGrid: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Use the grid layout.',
+      table: {
+        category: 'Options',
+      },
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+    },
+    withExtraPadding: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Set additional padding at the bottom of the page.',
+      table: {
+        category: 'Options',
+      },
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+    },
   },
   decorators: [
     (Story) => (
diff --git a/src/components/templates/page/page-layout.stories.tsx b/src/components/templates/page/page-layout.stories.tsx
index bec1066..12fe26a 100644
--- a/src/components/templates/page/page-layout.stories.tsx
+++ b/src/components/templates/page/page-layout.stories.tsx
@@ -33,6 +33,30 @@ export default {
         required: false,
       },
     },
+    bodyAttributes: {
+      description: 'Set additional HTML attributes to the main content body.',
+      table: {
+        category: 'Options',
+      },
+      type: {
+        name: 'object',
+        required: false,
+        value: {},
+      },
+    },
+    bodyClassName: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the main content body.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     breadcrumb: {
       description: 'The breadcrumb items.',
       type: {
-- 
cgit v1.2.3