From d9bf6f0d69ecb4475c06c772ef6314e5a7ee0fe8 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 15 Apr 2022 16:32:55 +0200
Subject: chore: add a LinksListWidget component

---
 .../widgets/links-list-widget.module.scss          | 71 +++++++++++++++++
 .../widgets/links-list-widget.stories.tsx          | 92 ++++++++++++++++++++++
 .../organisms/widgets/links-list-widget.test.tsx   | 32 ++++++++
 .../organisms/widgets/links-list-widget.tsx        | 81 +++++++++++++++++++
 4 files changed, 276 insertions(+)
 create mode 100644 src/components/organisms/widgets/links-list-widget.module.scss
 create mode 100644 src/components/organisms/widgets/links-list-widget.stories.tsx
 create mode 100644 src/components/organisms/widgets/links-list-widget.test.tsx
 create mode 100644 src/components/organisms/widgets/links-list-widget.tsx

(limited to 'src/components/organisms/widgets')

diff --git a/src/components/organisms/widgets/links-list-widget.module.scss b/src/components/organisms/widgets/links-list-widget.module.scss
new file mode 100644
index 0000000..cbad83e
--- /dev/null
+++ b/src/components/organisms/widgets/links-list-widget.module.scss
@@ -0,0 +1,71 @@
+@use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/placeholders";
+
+.widget {
+  .list {
+    &__link {
+      display: block;
+      padding: var(--spacing-2xs) var(--spacing-xs);
+      background: none;
+      text-decoration: underline solid transparent 0;
+
+      &:hover,
+      &:focus {
+        background: var(--color-bg-secondary);
+        font-weight: 600;
+      }
+
+      &:focus {
+        color: var(--color-primary);
+        text-decoration-color: var(--color-primary-light);
+        text-decoration-thickness: 0.25ex;
+      }
+
+      &:active {
+        background: var(--color-bg-tertiary);
+        text-decoration-color: transparent;
+        text-decoration-thickness: 0;
+      }
+    }
+
+    &--ordered {
+      @extend %reset-ordered-list;
+
+      counter-reset: link;
+
+      .list__link {
+        counter-increment: link;
+
+        &::before {
+          padding-right: var(--spacing-2xs);
+          content: counters(link, ".") ". ";
+          color: var(--color-secondary);
+        }
+      }
+    }
+
+    &--unordered {
+      @extend %reset-list;
+    }
+
+    &__item {
+      &:not(:last-child) {
+        .list__link {
+          border-bottom: fun.convert-px(1) solid var(--color-primary);
+        }
+      }
+
+      > .list {
+        .list__link {
+          padding-left: var(--spacing-md);
+        }
+
+        .list__item > .list {
+          .list__link {
+            padding-left: var(--spacing-xl);
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/organisms/widgets/links-list-widget.stories.tsx b/src/components/organisms/widgets/links-list-widget.stories.tsx
new file mode 100644
index 0000000..528f6f7
--- /dev/null
+++ b/src/components/organisms/widgets/links-list-widget.stories.tsx
@@ -0,0 +1,92 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { IntlProvider } from 'react-intl';
+import LinksListWidget from './links-list-widget';
+
+export default {
+  title: 'Organisms/Widgets',
+  component: LinksListWidget,
+  args: {
+    kind: 'unordered',
+  },
+  argTypes: {
+    items: {
+      description: 'The widget data.',
+      type: {
+        name: 'object',
+        required: true,
+        value: {},
+      },
+    },
+    kind: {
+      control: {
+        type: 'select',
+      },
+      description: 'The list kind: either ordered or unordered.',
+      options: ['ordered', 'unordered'],
+      table: {
+        category: 'Options',
+        defaultValue: { summary: 'unordered' },
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    level: {
+      control: {
+        type: 'number',
+      },
+      description: 'The heading level.',
+      type: {
+        name: 'number',
+        required: true,
+      },
+    },
+    title: {
+      control: {
+        type: 'text',
+      },
+      description: 'The widget title.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+  },
+} as ComponentMeta<typeof LinksListWidget>;
+
+const Template: ComponentStory<typeof LinksListWidget> = (args) => (
+  <IntlProvider locale="en">
+    <LinksListWidget {...args} />
+  </IntlProvider>
+);
+
+const items = [
+  { name: 'Level 1: Item 1', url: '#' },
+  {
+    name: 'Level 1: Item 2',
+    url: '#',
+    child: [
+      { name: 'Level 2: Item 1', url: '#' },
+      { name: 'Level 2: Item 2', url: '#' },
+      {
+        name: 'Level 2: Item 3',
+        url: '#',
+        child: [
+          { name: 'Level 3: Item 1', url: '#' },
+          { name: 'Level 3: Item 2', url: '#' },
+        ],
+      },
+      { name: 'Level 2: Item 4', url: '#' },
+    ],
+  },
+  { name: 'Level 1: Item 3', url: '#' },
+  { name: 'Level 1: Item 4', url: '#' },
+];
+
+export const LinksList = Template.bind({});
+LinksList.args = {
+  items,
+  level: 2,
+  title: 'A list of links',
+};
diff --git a/src/components/organisms/widgets/links-list-widget.test.tsx b/src/components/organisms/widgets/links-list-widget.test.tsx
new file mode 100644
index 0000000..a8d6a35
--- /dev/null
+++ b/src/components/organisms/widgets/links-list-widget.test.tsx
@@ -0,0 +1,32 @@
+import { render, screen } from '@test-utils';
+import LinksListWidget from './links-list-widget';
+
+const title = 'Voluptatem minus autem';
+
+const items = [
+  { name: 'Item 1', url: '/item-1' },
+  { name: 'Item 2', url: '/item-2' },
+  { name: 'Item 3', url: '/item-3' },
+];
+
+describe('LinksListWidget', () => {
+  it('renders a widget title', () => {
+    render(<LinksListWidget items={items} title={title} level={2} />);
+    expect(
+      screen.getByRole('heading', { level: 2, name: new RegExp(title, 'i') })
+    ).toBeInTheDocument();
+  });
+
+  it('renders the correct number of items', () => {
+    render(<LinksListWidget items={items} title={title} level={2} />);
+    expect(screen.getAllByRole('listitem')).toHaveLength(items.length);
+  });
+
+  it('renders some links', () => {
+    render(<LinksListWidget items={items} title={title} level={2} />);
+    expect(screen.getByRole('link', { name: items[0].name })).toHaveAttribute(
+      'href',
+      items[0].url
+    );
+  });
+});
diff --git a/src/components/organisms/widgets/links-list-widget.tsx b/src/components/organisms/widgets/links-list-widget.tsx
new file mode 100644
index 0000000..155354e
--- /dev/null
+++ b/src/components/organisms/widgets/links-list-widget.tsx
@@ -0,0 +1,81 @@
+import Link from '@components/atoms/links/link';
+import List, { ListProps, type ListItem } from '@components/atoms/lists/list';
+import Widget, { type WidgetProps } from '@components/molecules/layout/widget';
+import { slugify } from '@utils/helpers/slugify';
+import { VFC } from 'react';
+import styles from './links-list-widget.module.scss';
+
+export type LinksListItems = {
+  /**
+   * An array of name/url couple child of this list item.
+   */
+  child?: LinksListItems[];
+  /**
+   * The item name.
+   */
+  name: string;
+  /**
+   * The item url.
+   */
+  url: string;
+};
+
+export type LinksListWidgetProps = Pick<WidgetProps, 'level' | 'title'> &
+  Pick<ListProps, 'kind'> & {
+    /**
+     * An array of name/url couple.
+     */
+    items: LinksListItems[];
+  };
+
+/**
+ * LinksListWidget component
+ *
+ * Render a list of links inside a widget.
+ */
+const LinksListWidget: VFC<LinksListWidgetProps> = ({
+  items,
+  kind = 'unordered',
+  ...props
+}) => {
+  const listKindClass = `list--${kind}`;
+
+  /**
+   * Format the widget data to be used as List items.
+   *
+   * @param {LinksListItems[]} data - The widget data.
+   * @returns {ListItem[]} The list items data.
+   */
+  const getListItems = (data: LinksListItems[]): ListItem[] => {
+    return data.map((item) => {
+      return {
+        id: slugify(item.name),
+        child: item.child && getListItems(item.child),
+        value: (
+          <Link href={item.url} className={styles.list__link}>
+            {item.name}
+          </Link>
+        ),
+      };
+    });
+  };
+
+  return (
+    <Widget
+      expanded={true}
+      withBorders={true}
+      className={styles.widget}
+      {...props}
+    >
+      <List
+        items={getListItems(items)}
+        kind={kind}
+        withMargin={false}
+        className={`${styles.list} ${styles[listKindClass]}`}
+        itemsClassName={styles.list__item}
+      />
+    </Widget>
+  );
+};
+
+export default LinksListWidget;
-- 
cgit v1.2.3


From a07729064790df13324dbe7f4d1629892070558b Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 15 Apr 2022 17:13:21 +0200
Subject: chore: add a SharingWidget component

---
 .../organisms/widgets/sharing.module.scss          |  10 ++
 .../organisms/widgets/sharing.stories.tsx          |  78 +++++++++
 src/components/organisms/widgets/sharing.test.tsx  |  31 ++++
 src/components/organisms/widgets/sharing.tsx       | 190 +++++++++++++++++++++
 4 files changed, 309 insertions(+)
 create mode 100644 src/components/organisms/widgets/sharing.module.scss
 create mode 100644 src/components/organisms/widgets/sharing.stories.tsx
 create mode 100644 src/components/organisms/widgets/sharing.test.tsx
 create mode 100644 src/components/organisms/widgets/sharing.tsx

(limited to 'src/components/organisms/widgets')

diff --git a/src/components/organisms/widgets/sharing.module.scss b/src/components/organisms/widgets/sharing.module.scss
new file mode 100644
index 0000000..e06d4e3
--- /dev/null
+++ b/src/components/organisms/widgets/sharing.module.scss
@@ -0,0 +1,10 @@
+@use "@styles/abstracts/mixins" as mix;
+
+.list {
+  display: flex;
+  flex-flow: row wrap;
+  gap: var(--spacing-xs);
+  margin: 0;
+  padding: 0 var(--spacing-2xs);
+  list-style-type: none;
+}
diff --git a/src/components/organisms/widgets/sharing.stories.tsx b/src/components/organisms/widgets/sharing.stories.tsx
new file mode 100644
index 0000000..be20b84
--- /dev/null
+++ b/src/components/organisms/widgets/sharing.stories.tsx
@@ -0,0 +1,78 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { IntlProvider } from 'react-intl';
+import SharingWidget from './sharing';
+
+export default {
+  title: 'Organisms/Widgets',
+  component: SharingWidget,
+  argTypes: {
+    data: {
+      description: 'The page data.',
+      type: {
+        name: 'object',
+        required: true,
+        value: {},
+      },
+    },
+    expanded: {
+      control: {
+        type: null,
+      },
+      description: 'Default widget state (expanded or collapsed).',
+      type: {
+        name: 'boolean',
+        required: true,
+      },
+    },
+    level: {
+      control: {
+        type: 'number',
+      },
+      description: 'The heading level.',
+      type: {
+        name: 'number',
+        required: true,
+      },
+    },
+    media: {
+      control: {
+        type: null,
+      },
+      description: 'An array of active and ordered sharing medium.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    title: {
+      control: {
+        type: 'text',
+      },
+      description: 'The widget title.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+  },
+} as ComponentMeta<typeof SharingWidget>;
+
+const Template: ComponentStory<typeof SharingWidget> = (args) => (
+  <IntlProvider locale="en">
+    <SharingWidget {...args} />
+  </IntlProvider>
+);
+
+export const Sharing = Template.bind({});
+Sharing.args = {
+  expanded: true,
+  data: {
+    excerpt:
+      'Alias similique eius ducimus laudantium aspernatur. Est rem ut eum temporibus sit reprehenderit aut non molestias. Vel dolorem expedita labore quo inventore aliquid nihil nam. Possimus nobis enim quas corporis eos.',
+    title: 'Accusantium totam nostrum',
+    url: 'https://www.example.test',
+  },
+  level: 2,
+  media: ['diaspora', 'facebook', 'linkedin', 'twitter', 'email'],
+  title: 'Sharing',
+};
diff --git a/src/components/organisms/widgets/sharing.test.tsx b/src/components/organisms/widgets/sharing.test.tsx
new file mode 100644
index 0000000..265dbe1
--- /dev/null
+++ b/src/components/organisms/widgets/sharing.test.tsx
@@ -0,0 +1,31 @@
+import { render, screen } from '@test-utils';
+import Sharing, { type SharingData } from './sharing';
+
+const postData: SharingData = {
+  excerpt: 'A post excerpt',
+  title: 'A post title',
+  url: 'https://sharing-website.test',
+};
+
+describe('Sharing', () => {
+  it('renders a sharing widget', () => {
+    render(
+      <Sharing
+        data={postData}
+        media={['facebook', 'twitter']}
+        expanded={true}
+        title="Sharing"
+        level={2}
+      />
+    );
+    expect(
+      screen.getByRole('link', { name: 'Share on facebook' })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('link', { name: 'Share on twitter' })
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByRole('link', { name: 'Share on linkedin' })
+    ).not.toBeInTheDocument();
+  });
+});
diff --git a/src/components/organisms/widgets/sharing.tsx b/src/components/organisms/widgets/sharing.tsx
new file mode 100644
index 0000000..ccd3a21
--- /dev/null
+++ b/src/components/organisms/widgets/sharing.tsx
@@ -0,0 +1,190 @@
+import SharingLink, {
+  type SharingMedium,
+} from '@components/atoms/links/sharing-link';
+import Widget, { type WidgetProps } from '@components/molecules/layout/widget';
+import { VFC } from 'react';
+import { useIntl } from 'react-intl';
+import styles from './sharing.module.scss';
+
+export type SharingData = {
+  /**
+   * The content excerpt.
+   */
+  excerpt: string;
+  /**
+   * The content title.
+   */
+  title: string;
+  /**
+   * The content url.
+   */
+  url: string;
+};
+
+export type SharingProps = WidgetProps & {
+  /**
+   * The page data to share.
+   */
+  data: SharingData;
+  /**
+   * A list of active and ordered sharing medium.
+   */
+  media: SharingMedium[];
+};
+
+/**
+ * Sharing widget component
+ *
+ * Render a list of sharing links inside a widget.
+ */
+const Sharing: VFC<SharingProps> = ({ data, media, ...props }) => {
+  const intl = useIntl();
+
+  /**
+   * Build the Diaspora sharing url with provided data.
+   *
+   * @param {string} title - The content title.
+   * @param {string} url - The content url.
+   * @returns {string} The Diaspora url.
+   */
+  const buildDiasporaUrl = (title: string, url: string): string => {
+    const titleParam = `title=${encodeURI(title)}`;
+    const urlParam = `url=${encodeURI(url)}`;
+    return `https://share.diasporafoundation.org/?${titleParam}&${urlParam}`;
+  };
+
+  /**
+   * Build the mailto url from provided data.
+   *
+   * @param {string} excerpt - The content excerpt.
+   * @param {string} title - The content title.
+   * @param {string} url - The content url.
+   * @returns {string} The mailto url with params.
+   */
+  const buildEmailUrl = (
+    excerpt: string,
+    title: string,
+    url: string
+  ): string => {
+    const intro = intl.formatMessage({
+      defaultMessage: 'Introduction:',
+      description: 'Sharing: email content prefix',
+      id: 'yfgMcl',
+    });
+    const readMore = intl.formatMessage({
+      defaultMessage: 'Read more here:',
+      description: 'Sharing: content link prefix',
+      id: 'UsQske',
+    });
+    const body = `${intro}\n\n"${excerpt}"\n\n${readMore} ${url}`;
+    const bodyParam = excerpt ? `body=${encodeURI(body)}` : '';
+
+    const subject = intl.formatMessage(
+      {
+        defaultMessage: 'You should read {title}',
+        description: 'Sharing: subject text',
+        id: 'azgQuH',
+      },
+      { title }
+    );
+    const subjectParam = `subject=${encodeURI(subject)}`;
+
+    return `mailto:?${bodyParam}&${subjectParam}`;
+  };
+
+  /**
+   * Build the Facebook sharing url with provided data.
+   *
+   * @param {string} url - The content url.
+   * @returns {string} The Facebook url.
+   */
+  const buildFacebookUrl = (url: string): string => {
+    const urlParam = `u=${encodeURI(url)}`;
+    return `https://www.facebook.com/sharer/sharer.php?${urlParam}`;
+  };
+
+  /**
+   * Build the Journal du Hacker sharing url with provided data.
+   *
+   * @param {string} title - The content title.
+   * @param {string} url - The content url.
+   * @returns {string} The Journal du Hacker url.
+   */
+  const buildJdHUrl = (title: string, url: string): string => {
+    const titleParam = `title=${encodeURI(title)}`;
+    const urlParam = `url=${encodeURI(url)}`;
+    return `https://www.journalduhacker.net/stories/new?${titleParam}&${urlParam}`;
+  };
+
+  /**
+   * Build the LinkedIn sharing url with provided data.
+   *
+   * @param {string} url - The content url.
+   * @returns {string} The LinkedIn url.
+   */
+  const buildLinkedInUrl = (url: string): string => {
+    const urlParam = `url=${encodeURI(url)}`;
+    return `https://www.linkedin.com/sharing/share-offsite/?${urlParam}`;
+  };
+
+  /**
+   * Build the Twitter sharing url with provided data.
+   *
+   * @param {string} title - The content title.
+   * @param {string} url - The content url.
+   * @returns {string} The Twitter url.
+   */
+  const buildTwitterUrl = (title: string, url: string): string => {
+    const titleParam = `text=${encodeURI(title)}`;
+    const urlParam = `url=${encodeURI(url)}`;
+    return `https://twitter.com/intent/tweet?${titleParam}&${urlParam}`;
+  };
+
+  /**
+   * Retrieve the sharing url by medium id.
+   *
+   * @param {SharingMedium} medium - A sharing medium id.
+   * @returns {string} The sharing url.
+   */
+  const getUrl = (medium: SharingMedium): string => {
+    const { excerpt, title, url } = data;
+
+    switch (medium) {
+      case 'diaspora':
+        return buildDiasporaUrl(title, url);
+      case 'email':
+        return buildEmailUrl(excerpt, title, url);
+      case 'facebook':
+        return buildFacebookUrl(url);
+      case 'journal-du-hacker':
+        return buildJdHUrl(title, url);
+      case 'linkedin':
+        return buildLinkedInUrl(url);
+      case 'twitter':
+        return buildTwitterUrl(title, url);
+      default:
+        return '#';
+    }
+  };
+
+  /**
+   * Get the sharing list items.
+   *
+   * @returns {JSX.Element[]} The sharing links wrapped with li element.
+   */
+  const getItems = (): JSX.Element[] => {
+    return media.map((medium) => (
+      <li key={medium}>
+        <SharingLink medium={medium} url={getUrl(medium)} />
+      </li>
+    ));
+  };
+
+  return (
+    <Widget {...props}>
+      <ul className={styles.list}>{getItems()}</ul>
+    </Widget>
+  );
+};
+
+export default Sharing;
-- 
cgit v1.2.3


From b3ac82bba9605fa9d9c4b1d29c5a56a52e9de015 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 15 Apr 2022 17:38:16 +0200
Subject: chore: add a SocialMedia component

---
 .../organisms/widgets/social-media.module.scss     | 10 ++++
 .../organisms/widgets/social-media.stories.tsx     | 56 ++++++++++++++++++++++
 .../organisms/widgets/social-media.test.tsx        | 33 +++++++++++++
 src/components/organisms/widgets/social-media.tsx  | 41 ++++++++++++++++
 4 files changed, 140 insertions(+)
 create mode 100644 src/components/organisms/widgets/social-media.module.scss
 create mode 100644 src/components/organisms/widgets/social-media.stories.tsx
 create mode 100644 src/components/organisms/widgets/social-media.test.tsx
 create mode 100644 src/components/organisms/widgets/social-media.tsx

(limited to 'src/components/organisms/widgets')

diff --git a/src/components/organisms/widgets/social-media.module.scss b/src/components/organisms/widgets/social-media.module.scss
new file mode 100644
index 0000000..01b6c0e
--- /dev/null
+++ b/src/components/organisms/widgets/social-media.module.scss
@@ -0,0 +1,10 @@
+@use "@styles/abstracts/placeholders";
+
+.list {
+  @extend %reset-list;
+
+  display: flex;
+  flex-flow: row wrap;
+  gap: var(--spacing-xs);
+  padding: 0 var(--spacing-2xs);
+}
diff --git a/src/components/organisms/widgets/social-media.stories.tsx b/src/components/organisms/widgets/social-media.stories.tsx
new file mode 100644
index 0000000..2b84012
--- /dev/null
+++ b/src/components/organisms/widgets/social-media.stories.tsx
@@ -0,0 +1,56 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { IntlProvider } from 'react-intl';
+import SocialMediaWidget, { Media } from './social-media';
+
+export default {
+  title: 'Organisms/Widgets',
+  component: SocialMediaWidget,
+  argTypes: {
+    level: {
+      control: {
+        type: 'number',
+      },
+      description: 'The heading level.',
+      type: {
+        name: 'number',
+        required: true,
+      },
+    },
+    media: {
+      description: 'The links data.',
+      type: {
+        name: 'object',
+        required: true,
+        value: {},
+      },
+    },
+    title: {
+      control: {
+        type: 'text',
+      },
+      description: 'The widget title.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+  },
+} as ComponentMeta<typeof SocialMediaWidget>;
+
+const Template: ComponentStory<typeof SocialMediaWidget> = (args) => (
+  <IntlProvider locale="en">
+    <SocialMediaWidget {...args} />
+  </IntlProvider>
+);
+
+const media: Media[] = [
+  { name: 'Github', url: '#' },
+  { name: 'LinkedIn', url: '#' },
+];
+
+export const SocialMedia = Template.bind({});
+SocialMedia.args = {
+  media,
+  title: 'Follow me',
+  level: 2,
+};
diff --git a/src/components/organisms/widgets/social-media.test.tsx b/src/components/organisms/widgets/social-media.test.tsx
new file mode 100644
index 0000000..e40db30
--- /dev/null
+++ b/src/components/organisms/widgets/social-media.test.tsx
@@ -0,0 +1,33 @@
+import { render, screen } from '@test-utils';
+import SocialMedia, { Media } from './social-media';
+
+const media: Media[] = [
+  { name: 'Github', url: '#' },
+  { name: 'LinkedIn', url: '#' },
+];
+const title = 'Dolores ut ut';
+const titleLevel = 2;
+
+/**
+ * Next.js mock images with next/image component. So for now, I need to mock
+ * the svg files manually.
+ */
+jest.mock('@assets/images/social-media/github.svg', () => 'svg-file');
+jest.mock('@assets/images/social-media/linkedin.svg', () => 'svg-file');
+
+describe('SocialMedia', () => {
+  it('renders the widget title', () => {
+    render(<SocialMedia media={media} title={title} level={titleLevel} />);
+    expect(
+      screen.getByRole('heading', {
+        level: titleLevel,
+        name: new RegExp(title, 'i'),
+      })
+    ).toBeInTheDocument();
+  });
+
+  it('renders the correct number of items', () => {
+    render(<SocialMedia media={media} title={title} level={titleLevel} />);
+    expect(screen.getAllByRole('listitem')).toHaveLength(media.length);
+  });
+});
diff --git a/src/components/organisms/widgets/social-media.tsx b/src/components/organisms/widgets/social-media.tsx
new file mode 100644
index 0000000..58b2f73
--- /dev/null
+++ b/src/components/organisms/widgets/social-media.tsx
@@ -0,0 +1,41 @@
+import SocialLink, {
+  type SocialLinkProps,
+} from '@components/atoms/links/social-link';
+import Widget, { type WidgetProps } from '@components/molecules/layout/widget';
+import { FC } from 'react';
+import styles from './social-media.module.scss';
+
+export type Media = SocialLinkProps;
+
+export type SocialMediaProps = Pick<WidgetProps, 'level' | 'title'> & {
+  media: Media[];
+};
+
+/**
+ * Social Media widget component
+ *
+ * Render a social media list with links.
+ */
+const SocialMedia: FC<SocialMediaProps> = ({ media, ...props }) => {
+  /**
+   * Retrieve the social media items.
+   *
+   * @param {SocialMedia[]} links - An array of social media name and url.
+   * @returns {JSX.Element[]} The social links.
+   */
+  const getItems = (links: Media[]): JSX.Element[] => {
+    return links.map((link, index) => (
+      <li key={`media-${index}`}>
+        <SocialLink name={link.name} url={link.url} />
+      </li>
+    ));
+  };
+
+  return (
+    <Widget expanded={true} {...props}>
+      <ul className={styles.list}>{getItems(media)}</ul>
+    </Widget>
+  );
+};
+
+export default SocialMedia;
-- 
cgit v1.2.3


From d8a5c90ef58fa451c19e8d9e0aab0c493a0a6a9f Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 15 Apr 2022 22:56:36 +0200
Subject: chore: add an ImageWidget component

---
 .../organisms/widgets/image-widget.module.scss     |  43 ++++++++
 .../organisms/widgets/image-widget.stories.tsx     | 113 +++++++++++++++++++++
 .../organisms/widgets/image-widget.test.tsx        |  54 ++++++++++
 src/components/organisms/widgets/image-widget.tsx  |  75 ++++++++++++++
 4 files changed, 285 insertions(+)
 create mode 100644 src/components/organisms/widgets/image-widget.module.scss
 create mode 100644 src/components/organisms/widgets/image-widget.stories.tsx
 create mode 100644 src/components/organisms/widgets/image-widget.test.tsx
 create mode 100644 src/components/organisms/widgets/image-widget.tsx

(limited to 'src/components/organisms/widgets')

diff --git a/src/components/organisms/widgets/image-widget.module.scss b/src/components/organisms/widgets/image-widget.module.scss
new file mode 100644
index 0000000..78c0d26
--- /dev/null
+++ b/src/components/organisms/widgets/image-widget.module.scss
@@ -0,0 +1,43 @@
+@use "@styles/abstracts/functions" as fun;
+
+.img {
+  max-height: fun.convert-px(350);
+  margin: 0;
+}
+
+.txt {
+  padding: var(--spacing-sm);
+}
+
+.widget {
+  &--left {
+    .img {
+      margin-right: auto;
+    }
+
+    .txt {
+      text-align: left;
+    }
+  }
+
+  &--center {
+    .img {
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    .txt {
+      text-align: center;
+    }
+  }
+
+  &--right {
+    .img {
+      margin-left: auto;
+    }
+
+    .txt {
+      text-align: right;
+    }
+  }
+}
diff --git a/src/components/organisms/widgets/image-widget.stories.tsx b/src/components/organisms/widgets/image-widget.stories.tsx
new file mode 100644
index 0000000..1c2397b
--- /dev/null
+++ b/src/components/organisms/widgets/image-widget.stories.tsx
@@ -0,0 +1,113 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { IntlProvider } from 'react-intl';
+import ImageWidgetComponent from './image-widget';
+
+export default {
+  title: 'Organisms/Widgets',
+  component: ImageWidgetComponent,
+  args: {
+    alignment: 'left',
+  },
+  argTypes: {
+    alignment: {
+      control: {
+        type: 'select',
+      },
+      description: 'The content alignment.',
+      options: ['left', 'center', 'right'],
+      table: {
+        category: 'Options',
+        defaultValue: { summary: 'left' },
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    description: {
+      control: {
+        type: 'text',
+      },
+      description: 'Add a caption image.',
+      table: {
+        category: 'Options',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    expanded: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'The state of the widget.',
+      type: {
+        name: 'boolean',
+        required: true,
+      },
+    },
+    img: {
+      description: 'An image object.',
+      type: {
+        name: 'object',
+        required: true,
+        value: {},
+      },
+    },
+    level: {
+      control: {
+        type: 'number',
+      },
+      description: 'The widget title level (hn).',
+      type: {
+        name: 'number',
+        required: true,
+      },
+    },
+    title: {
+      control: {
+        type: 'text',
+      },
+      description: 'The widget title.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    url: {
+      control: {
+        type: 'text',
+      },
+      description: 'Add a link to the image.',
+      table: {
+        category: 'Options',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+  },
+} as ComponentMeta<typeof ImageWidgetComponent>;
+
+const Template: ComponentStory<typeof ImageWidgetComponent> = (args) => (
+  <IntlProvider locale="en">
+    <ImageWidgetComponent {...args} />
+  </IntlProvider>
+);
+
+const img = {
+  alt: 'Et perferendis quaerat',
+  height: 480,
+  src: 'http://placeimg.com/640/480/nature',
+  width: 640,
+};
+
+export const ImageWidget = Template.bind({});
+ImageWidget.args = {
+  expanded: true,
+  img,
+  level: 2,
+  title: 'Quo et totam',
+};
diff --git a/src/components/organisms/widgets/image-widget.test.tsx b/src/components/organisms/widgets/image-widget.test.tsx
new file mode 100644
index 0000000..8c24bd9
--- /dev/null
+++ b/src/components/organisms/widgets/image-widget.test.tsx
@@ -0,0 +1,54 @@
+import { render, screen } from '@test-utils';
+import ImageWidget from './image-widget';
+
+const description = 'Ut vitae sit';
+
+const img = {
+  alt: 'Et perferendis quaerat',
+  height: 480,
+  src: 'http://placeimg.com/640/480/nature',
+  width: 640,
+};
+
+const title = 'Fugiat cumque et';
+const titleLevel = 2;
+
+const url = '/another-page';
+
+describe('ImageWidget', () => {
+  it('renders an image', () => {
+    render(
+      <ImageWidget expanded={true} img={img} title={title} level={titleLevel} />
+    );
+    expect(screen.getByRole('img', { name: img.alt })).toBeInTheDocument();
+  });
+
+  it('renders a link', () => {
+    render(
+      <ImageWidget
+        expanded={true}
+        img={img}
+        title={title}
+        level={titleLevel}
+        url={url}
+      />
+    );
+    expect(screen.getByRole('link', { name: img.alt })).toHaveAttribute(
+      'href',
+      url
+    );
+  });
+
+  it('renders a description', () => {
+    render(
+      <ImageWidget
+        expanded={true}
+        img={img}
+        description={description}
+        title={title}
+        level={titleLevel}
+      />
+    );
+    expect(screen.getByText(description)).toBeInTheDocument();
+  });
+});
diff --git a/src/components/organisms/widgets/image-widget.tsx b/src/components/organisms/widgets/image-widget.tsx
new file mode 100644
index 0000000..928d5ea
--- /dev/null
+++ b/src/components/organisms/widgets/image-widget.tsx
@@ -0,0 +1,75 @@
+import ResponsiveImage from '@components/molecules/images/responsive-image';
+import Widget, { type WidgetProps } from '@components/molecules/layout/widget';
+import { VFC } from 'react';
+import styles from './image-widget.module.scss';
+
+export type Alignment = 'left' | 'center' | 'right';
+
+export type Image = {
+  /**
+   * An alternative text for the image.
+   */
+  alt: string;
+  /**
+   * The image height.
+   */
+  height: number;
+  /**
+   * The image source.
+   */
+  src: string;
+  /**
+   * The image width.
+   */
+  width: number;
+};
+
+export type ImageWidgetProps = Pick<
+  WidgetProps,
+  'expanded' | 'level' | 'title'
+> & {
+  /**
+   * The content alignment.
+   */
+  alignment?: Alignment;
+  /**
+   * Add a caption to the image.
+   */
+  description?: string;
+  /**
+   * An object describing the image.
+   */
+  img: Image;
+  /**
+   * Add a link to the image.
+   */
+  url?: string;
+};
+
+/**
+ * ImageWidget component
+ *
+ * Renders a widget that print an image and an optional text.
+ */
+const ImageWidget: VFC<ImageWidgetProps> = ({
+  alignment = 'left',
+  description,
+  img,
+  url,
+  ...props
+}) => {
+  const alignmentClass = `widget--${alignment}`;
+
+  return (
+    <Widget className={styles[alignmentClass]} {...props}>
+      <ResponsiveImage
+        target={url}
+        caption={description}
+        className={styles.img}
+        {...img}
+      />
+    </Widget>
+  );
+};
+
+export default ImageWidget;
-- 
cgit v1.2.3


From 5a6e4eea16047083e2de0e91a1b3ed9be8d6eb68 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Sat, 16 Apr 2022 16:08:49 +0200
Subject: refactor: support React 18

I replaced the deprecated VFC type with FC type and made all children
explicits.
Formatjs is still not compatible with React 18 so I need to skip type
checking when comitting. There are some type errors because of
IntlProvider in Storybook stories.
---
 jest.setup.js                                      |  1 +
 src/components/atoms/buttons/button-link.tsx       |  6 +-
 src/components/atoms/buttons/button.tsx            |  6 +-
 src/components/atoms/forms/checkbox.tsx            |  4 +-
 src/components/atoms/forms/field.tsx               |  4 +-
 src/components/atoms/forms/form.test.tsx           |  6 +-
 src/components/atoms/forms/form.tsx                |  6 +-
 src/components/atoms/forms/label.tsx               |  6 +-
 src/components/atoms/forms/select.tsx              |  4 +-
 src/components/atoms/headings/heading.tsx          |  6 +-
 src/components/atoms/icons/arrow.tsx               |  4 +-
 src/components/atoms/icons/career.tsx              |  4 +-
 src/components/atoms/icons/cc-by-sa.tsx            |  4 +-
 src/components/atoms/icons/close.tsx               |  4 +-
 src/components/atoms/icons/cog.tsx                 |  4 +-
 src/components/atoms/icons/computer-screen.tsx     |  4 +-
 src/components/atoms/icons/envelop.tsx             |  4 +-
 src/components/atoms/icons/hamburger.tsx           |  2 +-
 src/components/atoms/icons/home.tsx                |  4 +-
 src/components/atoms/icons/magnifying-glass.tsx    |  4 +-
 src/components/atoms/icons/moon.tsx                |  6 +-
 src/components/atoms/icons/plus-minus.tsx          |  2 +-
 src/components/atoms/icons/posts-stack.tsx         |  4 +-
 src/components/atoms/icons/sun.tsx                 |  6 +-
 src/components/atoms/images/logo.tsx               |  6 +-
 src/components/atoms/layout/copyright.tsx          |  4 +-
 src/components/atoms/layout/main.tsx               |  6 +-
 src/components/atoms/layout/no-script.tsx          |  4 +-
 src/components/atoms/layout/notice.tsx             |  4 +-
 src/components/atoms/layout/section.tsx            |  4 +-
 src/components/atoms/links/link.module.scss        | 20 ++++--
 src/components/atoms/links/link.tsx                |  6 +-
 src/components/atoms/links/nav-link.tsx            |  4 +-
 src/components/atoms/links/sharing-link.tsx        |  4 +-
 src/components/atoms/links/social-link.tsx         |  4 +-
 src/components/atoms/lists/description-list.tsx    |  4 +-
 src/components/atoms/lists/list.tsx                |  4 +-
 src/components/atoms/loaders/progress-bar.tsx      |  4 +-
 src/components/atoms/loaders/spinner.tsx           |  4 +-
 src/components/molecules/buttons/back-to-top.tsx   | 14 ++--
 .../molecules/buttons/heading-button.tsx           |  4 +-
 src/components/molecules/buttons/help-button.tsx   |  6 +-
 .../molecules/forms/ackee-select.test.tsx          | 16 +++--
 src/components/molecules/forms/ackee-select.tsx    |  6 +-
 src/components/molecules/forms/labelled-field.tsx  |  4 +-
 src/components/molecules/forms/labelled-select.tsx | 15 +++--
 src/components/molecules/forms/motion-toggle.tsx   |  8 +--
 .../molecules/forms/prism-theme-toggle.tsx         |  8 +--
 .../molecules/forms/select-with-tooltip.tsx        | 10 +--
 src/components/molecules/forms/theme-toggle.tsx    |  8 +--
 src/components/molecules/forms/toggle.tsx          | 18 ++---
 .../molecules/images/responsive-image.tsx          | 10 +--
 src/components/molecules/layout/branding.tsx       | 12 ++--
 src/components/molecules/layout/card.tsx           |  8 +--
 src/components/molecules/layout/flipping-logo.tsx  | 10 +--
 src/components/molecules/layout/meta.tsx           |  4 +-
 src/components/molecules/layout/widget.tsx         | 10 ++-
 src/components/molecules/modals/modal.test.tsx     | 13 +++-
 src/components/molecules/modals/modal.tsx          | 14 ++--
 src/components/molecules/modals/tooltip.tsx        |  4 +-
 src/components/molecules/nav/breadcrumb.tsx        |  4 +-
 src/components/molecules/nav/nav.tsx               |  4 +-
 .../organisms/forms/comment-form.stories.tsx       |  1 -
 src/components/organisms/forms/comment-form.tsx    |  4 +-
 src/components/organisms/forms/contact-form.tsx    |  4 +-
 src/components/organisms/forms/search-form.tsx     | 11 +++-
 src/components/organisms/layout/cards-list.tsx     |  4 +-
 src/components/organisms/layout/footer.tsx         | 13 ++--
 src/components/organisms/layout/overview.tsx       |  4 +-
 .../organisms/layout/summary.stories.tsx           |  2 +-
 src/components/organisms/layout/summary.test.tsx   |  2 +-
 src/components/organisms/layout/summary.tsx        | 77 +++++++++++++---------
 src/components/organisms/modals/search-modal.tsx   |  8 +--
 src/components/organisms/modals/settings-modal.tsx | 14 ++--
 src/components/organisms/toolbar/main-nav.tsx      | 18 +++--
 src/components/organisms/toolbar/search.tsx        | 16 ++---
 src/components/organisms/toolbar/settings.tsx      | 14 ++--
 src/components/organisms/toolbar/toolbar.tsx       |  4 +-
 src/components/organisms/widgets/image-widget.tsx  | 34 ++++------
 .../organisms/widgets/links-list-widget.tsx        |  9 ++-
 src/components/organisms/widgets/sharing.tsx       |  6 +-
 81 files changed, 353 insertions(+), 289 deletions(-)

(limited to 'src/components/organisms/widgets')

diff --git a/jest.setup.js b/jest.setup.js
index 5c5ecbc..d50c988 100644
--- a/jest.setup.js
+++ b/jest.setup.js
@@ -2,3 +2,4 @@ import '@testing-library/jest-dom/extend-expect';
 import './__tests__/jest/__mocks__/matchMedia.mock';
 
 jest.mock('next/dist/client/router', () => require('next-router-mock'));
+jest.mock('next/dynamic', () => () => 'dynamic-import');
diff --git a/src/components/atoms/buttons/button-link.tsx b/src/components/atoms/buttons/button-link.tsx
index 77a7f7b..906fa76 100644
--- a/src/components/atoms/buttons/button-link.tsx
+++ b/src/components/atoms/buttons/button-link.tsx
@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import styles from './buttons.module.scss';
 
 export type ButtonLinkProps = {
@@ -7,6 +7,10 @@ export type ButtonLinkProps = {
    * ButtonLink accessible label.
    */
   'aria-label'?: string;
+  /**
+   * The button link body.
+   */
+  children: ReactNode;
   /**
    * Set additional classnames to the button link.
    */
diff --git a/src/components/atoms/buttons/button.tsx b/src/components/atoms/buttons/button.tsx
index 545c5c5..a6eef8b 100644
--- a/src/components/atoms/buttons/button.tsx
+++ b/src/components/atoms/buttons/button.tsx
@@ -1,7 +1,11 @@
-import { FC, MouseEventHandler } from 'react';
+import { FC, MouseEventHandler, ReactNode } from 'react';
 import styles from './buttons.module.scss';
 
 export type ButtonProps = {
+  /**
+   * The button body.
+   */
+  children: ReactNode;
   /**
    * Set additional classnames to the button wrapper.
    */
diff --git a/src/components/atoms/forms/checkbox.tsx b/src/components/atoms/forms/checkbox.tsx
index 8babcc8..aec97f0 100644
--- a/src/components/atoms/forms/checkbox.tsx
+++ b/src/components/atoms/forms/checkbox.tsx
@@ -1,4 +1,4 @@
-import { SetStateAction, VFC } from 'react';
+import { FC, SetStateAction } from 'react';
 
 export type CheckboxProps = {
   /**
@@ -32,7 +32,7 @@ export type CheckboxProps = {
  *
  * Render a checkbox type input.
  */
-const Checkbox: VFC<CheckboxProps> = ({ value, setValue, ...props }) => {
+const Checkbox: FC<CheckboxProps> = ({ value, setValue, ...props }) => {
   return (
     <input
       type="checkbox"
diff --git a/src/components/atoms/forms/field.tsx b/src/components/atoms/forms/field.tsx
index 2e75d0f..e45a8a7 100644
--- a/src/components/atoms/forms/field.tsx
+++ b/src/components/atoms/forms/field.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent, SetStateAction, VFC } from 'react';
+import { ChangeEvent, FC, SetStateAction } from 'react';
 import styles from './forms.module.scss';
 
 export type FieldType =
@@ -72,7 +72,7 @@ export type FieldProps = {
  *
  * Render either an input or a textarea.
  */
-const Field: VFC<FieldProps> = ({
+const Field: FC<FieldProps> = ({
   className = '',
   setValue,
   type,
diff --git a/src/components/atoms/forms/form.test.tsx b/src/components/atoms/forms/form.test.tsx
index 9cd3c58..8b534f1 100644
--- a/src/components/atoms/forms/form.test.tsx
+++ b/src/components/atoms/forms/form.test.tsx
@@ -3,7 +3,11 @@ import Form from './form';
 
 describe('Form', () => {
   it('renders a form', () => {
-    render(<Form aria-label="Jest form" onSubmit={() => null}></Form>);
+    render(
+      <Form aria-label="Jest form" onSubmit={() => null}>
+        Fields
+      </Form>
+    );
     expect(screen.getByRole('form', { name: 'Jest form' })).toBeInTheDocument();
   });
 });
diff --git a/src/components/atoms/forms/form.tsx b/src/components/atoms/forms/form.tsx
index 8e80930..ef8dce4 100644
--- a/src/components/atoms/forms/form.tsx
+++ b/src/components/atoms/forms/form.tsx
@@ -1,4 +1,4 @@
-import { Children, FC, FormEvent, Fragment } from 'react';
+import { Children, FC, FormEvent, Fragment, ReactNode } from 'react';
 import styles from './forms.module.scss';
 
 export type FormProps = {
@@ -10,6 +10,10 @@ export type FormProps = {
    * One or more ids that refers to the form name.
    */
   'aria-labelledby'?: string;
+  /**
+   * The form body.
+   */
+  children: ReactNode;
   /**
    * Set additional classnames to the form wrapper.
    */
diff --git a/src/components/atoms/forms/label.tsx b/src/components/atoms/forms/label.tsx
index 8d57ee2..ce4c70f 100644
--- a/src/components/atoms/forms/label.tsx
+++ b/src/components/atoms/forms/label.tsx
@@ -1,7 +1,11 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import styles from './label.module.scss';
 
 export type LabelProps = {
+  /**
+   * The label body.
+   */
+  children: ReactNode;
   /**
    * Add classnames to the label.
    */
diff --git a/src/components/atoms/forms/select.tsx b/src/components/atoms/forms/select.tsx
index 25e86e0..dbe9b37 100644
--- a/src/components/atoms/forms/select.tsx
+++ b/src/components/atoms/forms/select.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent, SetStateAction, VFC } from 'react';
+import { ChangeEvent, FC, SetStateAction } from 'react';
 import styles from './forms.module.scss';
 
 export type SelectOptions = {
@@ -60,7 +60,7 @@ export type SelectProps = {
  *
  * Render a HTML select element.
  */
-const Select: VFC<SelectProps> = ({
+const Select: FC<SelectProps> = ({
   className = '',
   options,
   setValue,
diff --git a/src/components/atoms/headings/heading.tsx b/src/components/atoms/headings/heading.tsx
index 4703b5d..c5bf4ca 100644
--- a/src/components/atoms/headings/heading.tsx
+++ b/src/components/atoms/headings/heading.tsx
@@ -1,9 +1,13 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import styles from './heading.module.scss';
 
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 
 export type HeadingProps = {
+  /**
+   * The heading body.
+   */
+  children: ReactNode;
   /**
    * Set additional classnames.
    */
diff --git a/src/components/atoms/icons/arrow.tsx b/src/components/atoms/icons/arrow.tsx
index 5f3c460..2962530 100644
--- a/src/components/atoms/icons/arrow.tsx
+++ b/src/components/atoms/icons/arrow.tsx
@@ -1,4 +1,4 @@
-import { VFC } from 'react';
+import { FC } from 'react';
 import styles from './arrow.module.scss';
 
 export type ArrowDirection = 'top' | 'right' | 'bottom' | 'left';
@@ -19,7 +19,7 @@ export type ArrowProps = {
  *
  * Render a svg arrow icon.
  */
-const Arrow: VFC<ArrowProps> = ({ className = '', direction }) => {
+const Arrow: FC<ArrowProps> = ({ className = '', direction }) => {
   const directionClass = styles[`icon--${direction}`];
   const classes = `${styles.icon} ${directionClass} ${className}`;
 
diff --git a/src/components/atoms/icons/career.tsx b/src/components/atoms/icons/career.tsx
index 28edcc7..f28d399 100644
--- a/src/components/atoms/icons/career.tsx
+++ b/src/components/atoms/icons/career.tsx
@@ -1,4 +1,4 @@
-import { VFC } from 'react';
+import { FC } from 'react';
 import styles from './career.module.scss';
 
 export type CareerProps = {
@@ -13,7 +13,7 @@ export type CareerProps = {
  *
  * Render a career svg icon.
  */
-const Career: VFC<CareerProps> = ({ className = '' }) => {
+const Career: FC<CareerProps> = ({ className = '' }) => {
   return (
     <svg
       viewBox="0 0 100 100"
diff --git a/src/components/atoms/icons/cc-by-sa.tsx b/src/components/atoms/icons/cc-by-sa.tsx
index 552504e..8239154 100644
--- a/src/components/atoms/icons/cc-by-sa.tsx
+++ b/src/components/atoms/icons/cc-by-sa.tsx
@@ -1,4 +1,4 @@
-import { VFC } from 'react';
+import { FC } from 'react';
 import { useIntl } from 'react-intl';
 import styles from './cc-by-sa.module.scss';
 
@@ -14,7 +14,7 @@ export type CCBySAProps = {
  *
  * Render a CC BY SA svg icon.
  */
-const CCBySA: VFC<CCBySAProps> = ({ className = '' }) => {
+const CCBySA: FC<CCBySAProps> = ({ className = '' }) => {
   const intl = useIntl();
 
   return (
diff --git a/src/components/atoms/icons/close.tsx b/src/components/atoms/icons/close.tsx
index eb9ce7c..3e0adb5 100644
--- a/src/components/atoms/icons/close.tsx
+++ b/src/components/atoms/icons/close.tsx
@@ -1,4 +1,4 @@
-import { VFC } from 'react';
+import { FC } from 'react';
 import styles from './close.module.scss';
 
 export type CloseProps = {
@@ -13,7 +13,7 @@ export type CloseProps = {
  *
  * Render a close svg icon.
  */
-const Close: VFC<CloseProps> = ({ className = '' }) => {
+const Close: FC<CloseProps> = ({ className = '' }) => {
   return (
     <svg
       viewBox="0 0 100 100"
diff --git a/src/components/atoms/icons/cog.tsx b/src/components/atoms/icons/cog.tsx
index df6d54d..9e78a7b 100644
--- a/src/components/atoms/icons/cog.tsx
+++ b/src/components/atoms/icons/cog.tsx
@@ -1,4 +1,4 @@
-import { VFC } from 'react';
+import { FC } from 'react';
 import styles from './cog.module.scss';
 
 export type CogProps = {
@@ -13,7 +13,7 @@ export type CogProps = {
  *
  * Render a cog svg icon.
  */
-const Cog: VFC<CogProps> = ({ className = '' }) => {
+const Cog: FC<CogProps> = ({ className = '' }) => {
   return (
     <svg
       viewBox="0 0 100 100"
diff --git a/src/components/atoms/icons/computer-screen.tsx b/src/components/atoms/icons/computer-screen.tsx
index 310836f..8786139 100644
--- a/src/components/atoms/icons/computer-screen.tsx
+++ b/src/components/atoms/icons/computer-screen.tsx
@@ -1,4 +1,4 @@
-import { VFC } from 'react';
+import { FC } from 'react';
 import styles from './computer-screen.module.scss';
 
 export type ComputerScreenProps = {
@@ -13,7 +13,7 @@ export type ComputerScreenProps = {
  *
  * Render a computer screen svg icon.
  */
-const ComputerScreen: VFC<ComputerScreenProps> = ({ className = '' }) => {
+const ComputerScreen: FC<ComputerScreenProps> = ({ className = '' }) => {
   return (
     <svg
       viewBox="0 0 100 100"
diff --git a/src/components/atoms/icons/envelop.tsx b/src/components/atoms/icons/envelop.tsx
index 7b50d1d..84dca97 100644
--- a/src/components/atoms/icons/envelop.tsx
+++ b/src/components/atoms/icons/envelop.tsx
@@ -1,4 +1,4 @@
-import { VFC } from 'react';
+import { FC } from 'react';
 import styles from './envelop.module.scss';
 
 export type EnvelopProps = {
@@ -13,7 +13,7 @@ export type EnvelopProps = {
  *
  * Render an envelop svg icon.
  */
-const Envelop: VFC<EnvelopProps> = ({ className = '' }) => {
+const Envelop: FC<EnvelopProps> = ({ className = '' }) => {
   return (
     <svg
       viewBox="0 0 100 100"
diff --git a/src/components/atoms/icons/hamburger.tsx b/src/components/atoms/icons/hamburger.tsx
index 7e7c2c9..93aed2a 100644
--- a/src/components/atoms/icons/hamburger.tsx
+++ b/src/components/atoms/icons/hamburger.tsx
@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import styles from './hamburger.module.scss';
 
-type HamburgerProps = {
+export type HamburgerProps = {
   /**
    * Set additional classnames to the icon wrapper.
    */
diff --git a/src/components/atoms/icons/home.tsx b/src/components/atoms/icons/home.tsx
index 71bbc4a..3b6732d 100644
--- a/src/components/atoms/icons/home.tsx
+++ b/src/components/atoms/icons/home.tsx
@@ -1,4 +1,4 @@
-import { VFC } from 'react';
+import { FC } from 'react';
 import styles from './home.module.scss';
 
 export type HomeProps = {
@@ -13,7 +13,7 @@ export type HomeProps = {
  *
  * Render a home svg icon.
  */
-const Home: VFC<HomeProps> = ({ className = '' }) => {
+const Home: FC<HomeProps> = ({ className = '' }) => {
   return (
     <svg
       viewBox="0 0 100 100"
diff --git a/src/components/atoms/icons/magnifying-glass.tsx b/src/components/atoms/icons/magnifying-glass.tsx
index 445ef10..1ca2a44 100644
--- a/src/components/atoms/icons/magnifying-glass.tsx
+++ b/src/components/atoms/icons/magnifying-glass.tsx
@@ -1,4 +1,4 @@
-import { VFC } from 'react';
+import { FC } from 'react';
 import styles from './magnifying-glass.module.scss';
 
 export type MagnifyingGlassProps = {
@@ -13,7 +13,7 @@ export type MagnifyingGlassProps = {
  *
  * Render a magnifying glass svg icon.
  */
-const MagnifyingGlass: VFC<MagnifyingGlassProps> = ({ className = '' }) => {
+const MagnifyingGlass: FC<MagnifyingGlassProps> = ({ className = '' }) => {
   return (
     <svg
       viewBox="0 0 100 100"
diff --git a/src/components/atoms/icons/moon.tsx b/src/components/atoms/icons/moon.tsx
index 4f52319..ec4fa0c 100644
--- a/src/components/atoms/icons/moon.tsx
+++ b/src/components/atoms/icons/moon.tsx
@@ -1,7 +1,7 @@
-import { VFC } from 'react';
+import { FC } from 'react';
 import styles from './moon.module.scss';
 
-type MoonProps = {
+export type MoonProps = {
   /**
    * Set additional classnames to the icon.
    */
@@ -12,7 +12,7 @@ type MoonProps = {
   title?: string;
 };
 
-const Moon: VFC<MoonProps> = ({ className = '', title }) => {
+const Moon: FC<MoonProps> = ({ className = '', title }) => {
   return (
     <svg
       className={`${styles.icon} ${className}`}
diff --git a/src/components/atoms/icons/plus-minus.tsx b/src/components/atoms/icons/plus-minus.tsx
index 78aa14a..e8897b7 100644
--- a/src/components/atoms/icons/plus-minus.tsx
+++ b/src/components/atoms/icons/plus-minus.tsx
@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import styles from './plus-minus.module.scss';
 
-type PlusMinusProps = {
+export type PlusMinusProps = {
   /**
    * Set additional classnames to the icon.
    */
diff --git a/src/components/atoms/icons/posts-stack.tsx b/src/components/atoms/icons/posts-stack.tsx
index 1998d25..ab21323 100644
--- a/src/components/atoms/icons/posts-stack.tsx
+++ b/src/components/atoms/icons/posts-stack.tsx
@@ -1,4 +1,4 @@
-import { VFC } from 'react';
+import { FC } from 'react';
 import styles from './posts-stack.module.scss';
 
 export type PostsStackProps = {
@@ -13,7 +13,7 @@ export type PostsStackProps = {
  *
  * Render a posts stack svg icon.
  */
-const PostsStack: VFC<PostsStackProps> = ({ className = '' }) => {
+const PostsStack: FC<PostsStackProps> = ({ className = '' }) => {
   return (
     <svg
       viewBox="0 0 100 100"
diff --git a/src/components/atoms/icons/sun.tsx b/src/components/atoms/icons/sun.tsx
index fa9d922..ca31747 100644
--- a/src/components/atoms/icons/sun.tsx
+++ b/src/components/atoms/icons/sun.tsx
@@ -1,7 +1,7 @@
-import { VFC } from 'react';
+import { FC } from 'react';
 import styles from './sun.module.scss';
 
-type SunProps = {
+export type SunProps = {
   /**
    * Set additional classnames to the icon.
    */
@@ -17,7 +17,7 @@ type SunProps = {
  *
  * Render a svg sun icon.
  */
-const Sun: VFC<SunProps> = ({ className = '', title }) => {
+const Sun: FC<SunProps> = ({ className = '', title }) => {
   return (
     <svg
       className={`${styles.sun} ${className}`}
diff --git a/src/components/atoms/images/logo.tsx b/src/components/atoms/images/logo.tsx
index 2e52110..3978882 100644
--- a/src/components/atoms/images/logo.tsx
+++ b/src/components/atoms/images/logo.tsx
@@ -1,7 +1,7 @@
-import { VFC } from 'react';
+import { FC } from 'react';
 import styles from './logo.module.scss';
 
-type LogoProps = {
+export type LogoProps = {
   /**
    * SVG Image title.
    */
@@ -13,7 +13,7 @@ type LogoProps = {
  *
  * Render a SVG logo.
  */
-const Logo: VFC<LogoProps> = ({ title }) => {
+const Logo: FC<LogoProps> = ({ title }) => {
   return (
     <svg
       viewBox="0 0 512 512"
diff --git a/src/components/atoms/layout/copyright.tsx b/src/components/atoms/layout/copyright.tsx
index 76252ee..f70695d 100644
--- a/src/components/atoms/layout/copyright.tsx
+++ b/src/components/atoms/layout/copyright.tsx
@@ -1,4 +1,4 @@
-import { ReactNode, VFC } from 'react';
+import { FC, ReactNode } from 'react';
 import styles from './copyright.module.scss';
 
 export type CopyrightDates = {
@@ -32,7 +32,7 @@ export type CopyrightProps = {
  *
  * Renders a copyright information (owner, dates, license icon).
  */
-const Copyright: VFC<CopyrightProps> = ({ owner, dates, icon }) => {
+const Copyright: FC<CopyrightProps> = ({ owner, dates, icon }) => {
   const getFormattedDate = (date: string) => {
     const datetime = new Date(date).toISOString();
 
diff --git a/src/components/atoms/layout/main.tsx b/src/components/atoms/layout/main.tsx
index 4549328..d92a5c7 100644
--- a/src/components/atoms/layout/main.tsx
+++ b/src/components/atoms/layout/main.tsx
@@ -1,6 +1,10 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 
 export type MainProps = {
+  /**
+   * The main body.
+   */
+  children: ReactNode;
   /**
    * Set additional classnames to the main element.
    */
diff --git a/src/components/atoms/layout/no-script.tsx b/src/components/atoms/layout/no-script.tsx
index 6358cf8..a503e0c 100644
--- a/src/components/atoms/layout/no-script.tsx
+++ b/src/components/atoms/layout/no-script.tsx
@@ -1,4 +1,4 @@
-import { VFC } from 'react';
+import { FC } from 'react';
 import styles from './no-script.module.scss';
 
 export type NoScriptProps = {
@@ -12,7 +12,7 @@ export type NoScriptProps = {
   position?: 'initial' | 'top';
 };
 
-const NoScript: VFC<NoScriptProps> = ({ message, position = 'initial' }) => {
+const NoScript: FC<NoScriptProps> = ({ message, position = 'initial' }) => {
   const positionClass = styles[`noscript--${position}`];
 
   return <div className={`${styles.noscript} ${positionClass}`}>{message}</div>;
diff --git a/src/components/atoms/layout/notice.tsx b/src/components/atoms/layout/notice.tsx
index b6e09c5..115bd9c 100644
--- a/src/components/atoms/layout/notice.tsx
+++ b/src/components/atoms/layout/notice.tsx
@@ -1,4 +1,4 @@
-import { VFC } from 'react';
+import { FC } from 'react';
 import styles from './notice.module.scss';
 
 export type NoticeKind = 'error' | 'info' | 'success' | 'warning';
@@ -19,7 +19,7 @@ export type NoticeProps = {
  *
  * Render a colored message depending on notice kind.
  */
-const Notice: VFC<NoticeProps> = ({ kind, message }) => {
+const Notice: FC<NoticeProps> = ({ kind, message }) => {
   const kindClass = `wrapper--${kind}`;
 
   return (
diff --git a/src/components/atoms/layout/section.tsx b/src/components/atoms/layout/section.tsx
index f1bbb34..cb727ff 100644
--- a/src/components/atoms/layout/section.tsx
+++ b/src/components/atoms/layout/section.tsx
@@ -1,4 +1,4 @@
-import { ReactNode, VFC } from 'react';
+import { FC, ReactNode } from 'react';
 import Heading from '../headings/heading';
 import styles from './section.module.scss';
 
@@ -32,7 +32,7 @@ export type SectionProps = {
  *
  * Render a section element.
  */
-const Section: VFC<SectionProps> = ({
+const Section: FC<SectionProps> = ({
   className = '',
   content,
   title,
diff --git a/src/components/atoms/links/link.module.scss b/src/components/atoms/links/link.module.scss
index e7ead86..d23667a 100644
--- a/src/components/atoms/links/link.module.scss
+++ b/src/components/atoms/links/link.module.scss
@@ -5,7 +5,9 @@
   &[hreflang] {
     &::after {
       display: inline-block;
-      content: "\0000a0["attr(hreflang) "]";
+      /* Prettier is removing spacing between content parts. */
+      /* prettier-ignore */
+      content: "\0000a0[" attr(hreflang) "]";
       font-size: var(--font-size-sm);
     }
   }
@@ -13,22 +15,30 @@
   &--external {
     &::after {
       display: inline-block;
-      content: "\0000a0"url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'));
+      /* Prettier is removing spacing between content parts. */
+      /* prettier-ignore */
+      content: "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'));
     }
 
     &:focus:not(:active)::after {
-      content: "\0000a0"url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'));
+      /* Prettier is removing spacing between content parts. */
+      /* prettier-ignore */
+      content: "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'));
     }
 
     &[hreflang] {
       &::after {
-        content: "\0000a0["attr(hreflang) "]\0000a0"url(fun.encode-svg(
+        /* Prettier is removing spacing between content parts. */
+        /* prettier-ignore */
+        content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg(
             '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'
           ));
       }
 
       &:focus:not(:active)::after {
-        content: "\0000a0["attr(hreflang) "]\0000a0"url(fun.encode-svg(
+        /* Prettier is removing spacing between content parts. */
+        /* prettier-ignore */
+        content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg(
             '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'
           ));
       }
diff --git a/src/components/atoms/links/link.tsx b/src/components/atoms/links/link.tsx
index 87f11fc..674c07b 100644
--- a/src/components/atoms/links/link.tsx
+++ b/src/components/atoms/links/link.tsx
@@ -1,8 +1,12 @@
 import NextLink from 'next/link';
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import styles from './link.module.scss';
 
 export type LinkProps = {
+  /**
+   * The link body.
+   */
+  children: ReactNode;
   /**
    * Set additional classnames to the link.
    */
diff --git a/src/components/atoms/links/nav-link.tsx b/src/components/atoms/links/nav-link.tsx
index 25c0e7d..7c6fede 100644
--- a/src/components/atoms/links/nav-link.tsx
+++ b/src/components/atoms/links/nav-link.tsx
@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import { VFC, ReactNode } from 'react';
+import { FC, ReactNode } from 'react';
 import styles from './nav-link.module.scss';
 
 export type NavLinkProps = {
@@ -22,7 +22,7 @@ export type NavLinkProps = {
  *
  * Render a navigation link.
  */
-const NavLink: VFC<NavLinkProps> = ({ href, label, logo }) => {
+const NavLink: FC<NavLinkProps> = ({ href, label, logo }) => {
   return (
     <Link href={href}>
       <a className={styles.link}>
diff --git a/src/components/atoms/links/sharing-link.tsx b/src/components/atoms/links/sharing-link.tsx
index 3cd2dd1..ca53ef9 100644
--- a/src/components/atoms/links/sharing-link.tsx
+++ b/src/components/atoms/links/sharing-link.tsx
@@ -1,4 +1,4 @@
-import { VFC } from 'react';
+import { FC } from 'react';
 import { useIntl } from 'react-intl';
 import styles from './sharing-link.module.scss';
 
@@ -26,7 +26,7 @@ export type SharingLinkProps = {
  *
  * Render a sharing link.
  */
-const SharingLink: VFC<SharingLinkProps> = ({ medium, url }) => {
+const SharingLink: FC<SharingLinkProps> = ({ medium, url }) => {
   const intl = useIntl();
   const text = intl.formatMessage(
     {
diff --git a/src/components/atoms/links/social-link.tsx b/src/components/atoms/links/social-link.tsx
index 8c7c790..464bc60 100644
--- a/src/components/atoms/links/social-link.tsx
+++ b/src/components/atoms/links/social-link.tsx
@@ -2,7 +2,7 @@ import GithubIcon from '@assets/images/social-media/github.svg';
 import GitlabIcon from '@assets/images/social-media/gitlab.svg';
 import LinkedInIcon from '@assets/images/social-media/linkedin.svg';
 import TwitterIcon from '@assets/images/social-media/twitter.svg';
-import { VFC } from 'react';
+import { FC } from 'react';
 import styles from './social-link.module.scss';
 
 export type SocialWebsite = 'Github' | 'Gitlab' | 'LinkedIn' | 'Twitter';
@@ -23,7 +23,7 @@ export type SocialLinkProps = {
  *
  * Render a social icon link.
  */
-const SocialLink: VFC<SocialLinkProps> = ({ name, url }) => {
+const SocialLink: FC<SocialLinkProps> = ({ name, url }) => {
   /**
    * Retrieve a social link icon by id.
    * @param {string} id - The social website id.
diff --git a/src/components/atoms/lists/description-list.tsx b/src/components/atoms/lists/description-list.tsx
index 0a92465..a60a6a1 100644
--- a/src/components/atoms/lists/description-list.tsx
+++ b/src/components/atoms/lists/description-list.tsx
@@ -1,4 +1,4 @@
-import { VFC } from 'react';
+import { FC } from 'react';
 import styles from './description-list.module.scss';
 
 export type DescriptionListItem = {
@@ -52,7 +52,7 @@ export type DescriptionListProps = {
  *
  * Render a description list.
  */
-const DescriptionList: VFC<DescriptionListProps> = ({
+const DescriptionList: FC<DescriptionListProps> = ({
   className = '',
   descriptionClassName = '',
   groupClassName = '',
diff --git a/src/components/atoms/lists/list.tsx b/src/components/atoms/lists/list.tsx
index d100a31..6726802 100644
--- a/src/components/atoms/lists/list.tsx
+++ b/src/components/atoms/lists/list.tsx
@@ -1,4 +1,4 @@
-import { VFC } from 'react';
+import { FC } from 'react';
 import styles from './list.module.scss';
 
 export type ListItem = {
@@ -44,7 +44,7 @@ export type ListProps = {
  *
  * Render either an ordered or an unordered list.
  */
-const List: VFC<ListProps> = ({
+const List: FC<ListProps> = ({
   className = '',
   items,
   itemsClassName = '',
diff --git a/src/components/atoms/loaders/progress-bar.tsx b/src/components/atoms/loaders/progress-bar.tsx
index 1b1ff06..9bac847 100644
--- a/src/components/atoms/loaders/progress-bar.tsx
+++ b/src/components/atoms/loaders/progress-bar.tsx
@@ -1,4 +1,4 @@
-import { VFC } from 'react';
+import { FC } from 'react';
 import styles from './progress-bar.module.scss';
 
 export type ProgressBarProps = {
@@ -29,7 +29,7 @@ export type ProgressBarProps = {
  *
  * Render a progress bar.
  */
-const ProgressBar: VFC<ProgressBarProps> = ({
+const ProgressBar: FC<ProgressBarProps> = ({
   current,
   info,
   min,
diff --git a/src/components/atoms/loaders/spinner.tsx b/src/components/atoms/loaders/spinner.tsx
index bff0f25..6655141 100644
--- a/src/components/atoms/loaders/spinner.tsx
+++ b/src/components/atoms/loaders/spinner.tsx
@@ -1,4 +1,4 @@
-import { VFC } from 'react';
+import { FC } from 'react';
 import { useIntl } from 'react-intl';
 import styles from './spinner.module.scss';
 
@@ -14,7 +14,7 @@ export type SpinnerProps = {
  *
  * Render a loading message with animation.
  */
-const Spinner: VFC<SpinnerProps> = ({ message }) => {
+const Spinner: FC<SpinnerProps> = ({ message }) => {
   const intl = useIntl();
 
   return (
diff --git a/src/components/molecules/buttons/back-to-top.tsx b/src/components/molecules/buttons/back-to-top.tsx
index 8a52231..bd1925a 100644
--- a/src/components/molecules/buttons/back-to-top.tsx
+++ b/src/components/molecules/buttons/back-to-top.tsx
@@ -1,18 +1,16 @@
-import ButtonLink from '@components/atoms/buttons/button-link';
+import ButtonLink, {
+  type ButtonLinkProps,
+} from '@components/atoms/buttons/button-link';
 import Arrow from '@components/atoms/icons/arrow';
-import { VFC } from 'react';
+import { FC } from 'react';
 import { useIntl } from 'react-intl';
 import styles from './back-to-top.module.scss';
 
-export type BackToTopProps = {
+export type BackToTopProps = Pick<ButtonLinkProps, 'target'> & {
   /**
    * Set additional classnames to the button wrapper.
    */
   className?: string;
-  /**
-   * An element id (without hashtag) to use as anchor.
-   */
-  target: string;
 };
 
 /**
@@ -20,7 +18,7 @@ export type BackToTopProps = {
  *
  * Render a back to top link.
  */
-const BackToTop: VFC<BackToTopProps> = ({ className = '', target }) => {
+const BackToTop: FC<BackToTopProps> = ({ className = '', target }) => {
   const intl = useIntl();
   const linkName = intl.formatMessage({
     defaultMessage: 'Back to top',
diff --git a/src/components/molecules/buttons/heading-button.tsx b/src/components/molecules/buttons/heading-button.tsx
index fc79749..0ed9a76 100644
--- a/src/components/molecules/buttons/heading-button.tsx
+++ b/src/components/molecules/buttons/heading-button.tsx
@@ -1,6 +1,6 @@
 import Heading, { type HeadingProps } from '@components/atoms/headings/heading';
 import PlusMinus from '@components/atoms/icons/plus-minus';
-import { SetStateAction, VFC } from 'react';
+import { FC, SetStateAction } from 'react';
 import { useIntl } from 'react-intl';
 import styles from './heading-button.module.scss';
 
@@ -28,7 +28,7 @@ export type HeadingButtonProps = Pick<HeadingProps, 'level'> & {
  *
  * Render a button as accordion title to toggle body.
  */
-const HeadingButton: VFC<HeadingButtonProps> = ({
+const HeadingButton: FC<HeadingButtonProps> = ({
   className = '',
   expanded,
   level,
diff --git a/src/components/molecules/buttons/help-button.tsx b/src/components/molecules/buttons/help-button.tsx
index aeb84ec..f19322f 100644
--- a/src/components/molecules/buttons/help-button.tsx
+++ b/src/components/molecules/buttons/help-button.tsx
@@ -1,5 +1,5 @@
-import Button, { ButtonProps } from '@components/atoms/buttons/button';
-import { VFC } from 'react';
+import Button, { type ButtonProps } from '@components/atoms/buttons/button';
+import { FC } from 'react';
 import { useIntl } from 'react-intl';
 import styles from './help-button.module.scss';
 
@@ -15,7 +15,7 @@ export type HelpButtonProps = Pick<ButtonProps, 'onClick'> & {
  *
  * Render a button with an interrogation mark icon.
  */
-const HelpButton: VFC<HelpButtonProps> = ({ className = '', onClick }) => {
+const HelpButton: FC<HelpButtonProps> = ({ className = '', onClick }) => {
   const intl = useIntl();
   const text = intl.formatMessage({
     defaultMessage: 'Help',
diff --git a/src/components/molecules/forms/ackee-select.test.tsx b/src/components/molecules/forms/ackee-select.test.tsx
index e1e6b2d..ec27922 100644
--- a/src/components/molecules/forms/ackee-select.test.tsx
+++ b/src/components/molecules/forms/ackee-select.test.tsx
@@ -1,5 +1,5 @@
-import userEvent from '@testing-library/user-event';
-import { render, screen } from '@test-utils';
+import user from '@testing-library/user-event';
+import { act, render, screen } from '@test-utils';
 import AckeeSelect from './ackee-select';
 
 describe('Select', () => {
@@ -9,13 +9,15 @@ describe('Select', () => {
     expect(screen.queryByRole('combobox')).not.toHaveValue('partial');
   });
 
-  it('should correctly change value when user choose another option', () => {
+  it('should correctly change value when user choose another option', async () => {
     render(<AckeeSelect initialValue="full" />);
 
-    userEvent.selectOptions(
-      screen.getByRole('combobox'),
-      screen.getByRole('option', { name: 'Partial' })
-    );
+    await act(async () => {
+      await user.selectOptions(
+        screen.getByRole('combobox'),
+        screen.getByRole('option', { name: 'Partial' })
+      );
+    });
 
     expect(screen.getByRole('combobox')).toHaveValue('partial');
     expect(screen.queryByRole('combobox')).not.toHaveValue('full');
diff --git a/src/components/molecules/forms/ackee-select.tsx b/src/components/molecules/forms/ackee-select.tsx
index 4a8410c..101e5b5 100644
--- a/src/components/molecules/forms/ackee-select.tsx
+++ b/src/components/molecules/forms/ackee-select.tsx
@@ -1,8 +1,8 @@
 import { SelectOptions } from '@components/atoms/forms/select';
-import { Dispatch, SetStateAction, useState, VFC } from 'react';
+import { Dispatch, FC, SetStateAction, useState } from 'react';
 import { useIntl } from 'react-intl';
 import SelectWithTooltip, {
-  SelectWithTooltipProps,
+  type SelectWithTooltipProps,
 } from './select-with-tooltip';
 
 export type AckeeOptions = 'full' | 'partial';
@@ -22,7 +22,7 @@ export type AckeeSelectProps = Pick<
  *
  * Render a select to set Ackee settings.
  */
-const AckeeSelect: VFC<AckeeSelectProps> = ({ initialValue, ...props }) => {
+const AckeeSelect: FC<AckeeSelectProps> = ({ initialValue, ...props }) => {
   const intl = useIntl();
   const [value, setValue] = useState<AckeeOptions>(initialValue);
 
diff --git a/src/components/molecules/forms/labelled-field.tsx b/src/components/molecules/forms/labelled-field.tsx
index 08d0126..ecc9255 100644
--- a/src/components/molecules/forms/labelled-field.tsx
+++ b/src/components/molecules/forms/labelled-field.tsx
@@ -1,6 +1,6 @@
 import Field, { type FieldProps } from '@components/atoms/forms/field';
 import Label from '@components/atoms/forms/label';
-import { VFC } from 'react';
+import { FC } from 'react';
 import styles from './labelled-field.module.scss';
 
 export type LabelledFieldProps = FieldProps & {
@@ -23,7 +23,7 @@ export type LabelledFieldProps = FieldProps & {
  *
  * Render a field tied to a label.
  */
-const LabelledField: VFC<LabelledFieldProps> = ({
+const LabelledField: FC<LabelledFieldProps> = ({
   hideLabel = false,
   id,
   label,
diff --git a/src/components/molecules/forms/labelled-select.tsx b/src/components/molecules/forms/labelled-select.tsx
index 7d4237a..23057d0 100644
--- a/src/components/molecules/forms/labelled-select.tsx
+++ b/src/components/molecules/forms/labelled-select.tsx
@@ -1,6 +1,6 @@
-import Label, { LabelProps } from '@components/atoms/forms/label';
+import Label, { type LabelProps } from '@components/atoms/forms/label';
 import Select, { type SelectProps } from '@components/atoms/forms/select';
-import { VFC } from 'react';
+import { FC } from 'react';
 import styles from './labelled-select.module.scss';
 
 export type LabelledSelectProps = Omit<
@@ -14,7 +14,7 @@ export type LabelledSelectProps = Omit<
   /**
    * Set additional classnames to the label.
    */
-  labelClassName?: string;
+  labelClassName?: LabelProps['className'];
   /**
    * The label position. Default: top.
    */
@@ -26,10 +26,15 @@ export type LabelledSelectProps = Omit<
   /**
    * Set additional classnames to the select field.
    */
-  selectClassName?: string;
+  selectClassName?: SelectProps['className'];
 };
 
-const LabelledSelect: VFC<LabelledSelectProps> = ({
+/**
+ * LabelledSelect component
+ *
+ * Render a select with a label.
+ */
+const LabelledSelect: FC<LabelledSelectProps> = ({
   id,
   label,
   labelClassName = '',
diff --git a/src/components/molecules/forms/motion-toggle.tsx b/src/components/molecules/forms/motion-toggle.tsx
index 9f30b42..24b54ae 100644
--- a/src/components/molecules/forms/motion-toggle.tsx
+++ b/src/components/molecules/forms/motion-toggle.tsx
@@ -1,8 +1,8 @@
 import Toggle, {
-  ToggleChoices,
-  ToggleProps,
+  type ToggleChoices,
+  type ToggleProps,
 } from '@components/molecules/forms/toggle';
-import { useState, VFC } from 'react';
+import { FC, useState } from 'react';
 import { useIntl } from 'react-intl';
 
 export type MotionToggleProps = Pick<ToggleProps, 'labelClassName' | 'value'>;
@@ -12,7 +12,7 @@ export type MotionToggleProps = Pick<ToggleProps, 'labelClassName' | 'value'>;
  *
  * Render a Toggle component to set reduce motion.
  */
-const MotionToggle: VFC<MotionToggleProps> = ({ value, ...props }) => {
+const MotionToggle: FC<MotionToggleProps> = ({ value, ...props }) => {
   const intl = useIntl();
   const [isDeactivated, setIsDeactivated] = useState<boolean>(value);
   const reduceMotionLabel = intl.formatMessage({
diff --git a/src/components/molecules/forms/prism-theme-toggle.tsx b/src/components/molecules/forms/prism-theme-toggle.tsx
index daee6bd..0b9c447 100644
--- a/src/components/molecules/forms/prism-theme-toggle.tsx
+++ b/src/components/molecules/forms/prism-theme-toggle.tsx
@@ -1,10 +1,10 @@
 import Moon from '@components/atoms/icons/moon';
 import Sun from '@components/atoms/icons/sun';
 import Toggle, {
-  ToggleChoices,
-  ToggleProps,
+  type ToggleChoices,
+  type ToggleProps,
 } from '@components/molecules/forms/toggle';
-import { useState, VFC } from 'react';
+import { FC, useState } from 'react';
 import { useIntl } from 'react-intl';
 
 export type PrismThemeToggleProps = Pick<
@@ -17,7 +17,7 @@ export type PrismThemeToggleProps = Pick<
  *
  * Render a Toggle component to set code blocks theme.
  */
-const PrismThemeToggle: VFC<PrismThemeToggleProps> = ({ value, ...props }) => {
+const PrismThemeToggle: FC<PrismThemeToggleProps> = ({ value, ...props }) => {
   const intl = useIntl();
   const [isDarkTheme, setIsDarkTheme] = useState<boolean>(value);
   const themeLabel = intl.formatMessage({
diff --git a/src/components/molecules/forms/select-with-tooltip.tsx b/src/components/molecules/forms/select-with-tooltip.tsx
index f537e1e..cf7b041 100644
--- a/src/components/molecules/forms/select-with-tooltip.tsx
+++ b/src/components/molecules/forms/select-with-tooltip.tsx
@@ -1,4 +1,4 @@
-import { useState, VFC } from 'react';
+import { FC, useState } from 'react';
 import HelpButton from '../buttons/help-button';
 import Tooltip, { type TooltipProps } from '../modals/tooltip';
 import LabelledSelect, { type LabelledSelectProps } from './labelled-select';
@@ -9,14 +9,10 @@ export type SelectWithTooltipProps = Omit<
   'labelPosition'
 > &
   Pick<TooltipProps, 'title' | 'content'> & {
-    /**
-     * The select label.
-     */
-    label: string;
     /**
      * Set additional classnames to the tooltip wrapper.
      */
-    tooltipClassName?: string;
+    tooltipClassName?: TooltipProps['className'];
   };
 
 /**
@@ -24,7 +20,7 @@ export type SelectWithTooltipProps = Omit<
  *
  * Render a select with a button to display a tooltip about options.
  */
-const SelectWithTooltip: VFC<SelectWithTooltipProps> = ({
+const SelectWithTooltip: FC<SelectWithTooltipProps> = ({
   title,
   content,
   id,
diff --git a/src/components/molecules/forms/theme-toggle.tsx b/src/components/molecules/forms/theme-toggle.tsx
index eb56ce9..10c6c47 100644
--- a/src/components/molecules/forms/theme-toggle.tsx
+++ b/src/components/molecules/forms/theme-toggle.tsx
@@ -1,10 +1,10 @@
 import Moon from '@components/atoms/icons/moon';
 import Sun from '@components/atoms/icons/sun';
 import Toggle, {
-  ToggleChoices,
-  ToggleProps,
+  type ToggleChoices,
+  type ToggleProps,
 } from '@components/molecules/forms/toggle';
-import { useState, VFC } from 'react';
+import { FC, useState } from 'react';
 import { useIntl } from 'react-intl';
 
 export type ThemeToggleProps = Pick<ToggleProps, 'labelClassName' | 'value'>;
@@ -14,7 +14,7 @@ export type ThemeToggleProps = Pick<ToggleProps, 'labelClassName' | 'value'>;
  *
  * Render a Toggle component to set theme.
  */
-const ThemeToggle: VFC<ThemeToggleProps> = ({ value, ...props }) => {
+const ThemeToggle: FC<ThemeToggleProps> = ({ value, ...props }) => {
   const intl = useIntl();
   const [isDarkTheme, setIsDarkTheme] = useState<boolean>(value);
   const themeLabel = intl.formatMessage({
diff --git a/src/components/molecules/forms/toggle.tsx b/src/components/molecules/forms/toggle.tsx
index dff2d2d..288062d 100644
--- a/src/components/molecules/forms/toggle.tsx
+++ b/src/components/molecules/forms/toggle.tsx
@@ -1,6 +1,6 @@
-import Checkbox from '@components/atoms/forms/checkbox';
+import Checkbox, { type CheckboxProps } from '@components/atoms/forms/checkbox';
 import Label, { type LabelProps } from '@components/atoms/forms/label';
-import { ReactNode, VFC } from 'react';
+import { FC, ReactNode } from 'react';
 import styles from './toggle.module.scss';
 
 export type ToggleChoices = {
@@ -14,15 +14,11 @@ export type ToggleChoices = {
   right: ReactNode;
 };
 
-export type ToggleProps = {
+export type ToggleProps = Pick<CheckboxProps, 'id' | 'name'> & {
   /**
    * The toggle choices.
    */
   choices: ToggleChoices;
-  /**
-   * The input id.
-   */
-  id: string;
   /**
    * The toggle label.
    */
@@ -30,15 +26,11 @@ export type ToggleProps = {
   /**
    * Set additional classnames to the label.
    */
-  labelClassName?: string;
+  labelClassName?: LabelProps['className'];
   /**
    * The label size.
    */
   labelSize?: LabelProps['size'];
-  /**
-   * The input name.
-   */
-  name: string;
   /**
    * The toggle value. True if checked.
    */
@@ -54,7 +46,7 @@ export type ToggleProps = {
  *
  * Render a toggle with a label and two choices.
  */
-const Toggle: VFC<ToggleProps> = ({
+const Toggle: FC<ToggleProps> = ({
   choices,
   id,
   label,
diff --git a/src/components/molecules/images/responsive-image.tsx b/src/components/molecules/images/responsive-image.tsx
index 1d8787e..31cbcd1 100644
--- a/src/components/molecules/images/responsive-image.tsx
+++ b/src/components/molecules/images/responsive-image.tsx
@@ -1,6 +1,6 @@
-import Link from '@components/atoms/links/link';
-import Image, { ImageProps } from 'next/image';
-import { VFC } from 'react';
+import Link, { type LinkProps } from '@components/atoms/links/link';
+import Image, { type ImageProps } from 'next/image';
+import { FC } from 'react';
 import styles from './responsive-image.module.scss';
 
 export type ResponsiveImageProps = Omit<
@@ -26,7 +26,7 @@ export type ResponsiveImageProps = Omit<
   /**
    * A link target.
    */
-  target?: string;
+  target?: LinkProps['href'];
   /**
    * The image width.
    */
@@ -38,7 +38,7 @@ export type ResponsiveImageProps = Omit<
  *
  * Render a responsive image wrapped in a figure element.
  */
-const ResponsiveImage: VFC<ResponsiveImageProps> = ({
+const ResponsiveImage: FC<ResponsiveImageProps> = ({
   alt,
   caption,
   className = '',
diff --git a/src/components/molecules/layout/branding.tsx b/src/components/molecules/layout/branding.tsx
index 9f564bf..9fe89e7 100644
--- a/src/components/molecules/layout/branding.tsx
+++ b/src/components/molecules/layout/branding.tsx
@@ -1,11 +1,11 @@
 import Heading from '@components/atoms/headings/heading';
 import Link from 'next/link';
-import { VFC } from 'react';
+import { FC } from 'react';
 import { useIntl } from 'react-intl';
 import styles from './branding.module.scss';
-import FlippingLogo from './flipping-logo';
+import FlippingLogo, { type FlippingLogoProps } from './flipping-logo';
 
-type BrandingProps = {
+export type BrandingProps = Pick<FlippingLogoProps, 'photo'> & {
   /**
    * The Branding baseline.
    */
@@ -14,10 +14,6 @@ type BrandingProps = {
    * Use H1 if the current page is homepage. Default: false.
    */
   isHome?: boolean;
-  /**
-   * A photography URL.
-   */
-  photo: string;
   /**
    * The Branding title;
    */
@@ -33,7 +29,7 @@ type BrandingProps = {
  *
  * Render the branding logo, title and optional baseline.
  */
-const Branding: VFC<BrandingProps> = ({
+const Branding: FC<BrandingProps> = ({
   baseline,
   isHome = false,
   photo,
diff --git a/src/components/molecules/layout/card.tsx b/src/components/molecules/layout/card.tsx
index 23a0e54..89f100e 100644
--- a/src/components/molecules/layout/card.tsx
+++ b/src/components/molecules/layout/card.tsx
@@ -1,11 +1,11 @@
 import ButtonLink from '@components/atoms/buttons/button-link';
 import Heading, { type HeadingLevel } from '@components/atoms/headings/heading';
 import DescriptionList, {
-  DescriptionListItem,
+  type DescriptionListItem,
 } from '@components/atoms/lists/description-list';
-import { VFC } from 'react';
+import { FC } from 'react';
 import ResponsiveImage, {
-  ResponsiveImageProps,
+  type ResponsiveImageProps,
 } from '../images/responsive-image';
 import styles from './card.module.scss';
 
@@ -68,7 +68,7 @@ export type CardProps = {
  *
  * Render a link with minimal information about its content.
  */
-const Card: VFC<CardProps> = ({
+const Card: FC<CardProps> = ({
   className = '',
   cover,
   coverFit = 'cover',
diff --git a/src/components/molecules/layout/flipping-logo.tsx b/src/components/molecules/layout/flipping-logo.tsx
index 6f7645f..4a216ef 100644
--- a/src/components/molecules/layout/flipping-logo.tsx
+++ b/src/components/molecules/layout/flipping-logo.tsx
@@ -1,9 +1,9 @@
-import Logo from '@components/atoms/images/logo';
+import Logo, { type LogoProps } from '@components/atoms/images/logo';
 import Image from 'next/image';
-import { VFC } from 'react';
+import { FC } from 'react';
 import styles from './flipping-logo.module.scss';
 
-type FlippingLogoProps = {
+export type FlippingLogoProps = {
   /**
    * Set additional classnames to the logo wrapper.
    */
@@ -15,7 +15,7 @@ type FlippingLogoProps = {
   /**
    * Logo image title.
    */
-  logoTitle?: string;
+  logoTitle?: LogoProps['title'];
   /**
    * Photo url.
    */
@@ -27,7 +27,7 @@ type FlippingLogoProps = {
  *
  * Render a logo and a photo with a flipping effect.
  */
-const FlippingLogo: VFC<FlippingLogoProps> = ({
+const FlippingLogo: FC<FlippingLogoProps> = ({
   className = '',
   altText,
   logoTitle,
diff --git a/src/components/molecules/layout/meta.tsx b/src/components/molecules/layout/meta.tsx
index 218ebd9..fcce473 100644
--- a/src/components/molecules/layout/meta.tsx
+++ b/src/components/molecules/layout/meta.tsx
@@ -2,7 +2,7 @@ import DescriptionList, {
   type DescriptionListProps,
   type DescriptionListItem,
 } from '@components/atoms/lists/description-list';
-import { ReactNode, VFC } from 'react';
+import { FC, ReactNode } from 'react';
 
 export type MetaItem = {
   /**
@@ -43,7 +43,7 @@ export type MetaProps = {
  *
  * Renders the page metadata.
  */
-const Meta: VFC<MetaProps> = ({ data, ...props }) => {
+const Meta: FC<MetaProps> = ({ data, ...props }) => {
   /**
    * Transform the metadata to description list item format.
    *
diff --git a/src/components/molecules/layout/widget.tsx b/src/components/molecules/layout/widget.tsx
index c04362a..feb2add 100644
--- a/src/components/molecules/layout/widget.tsx
+++ b/src/components/molecules/layout/widget.tsx
@@ -1,11 +1,17 @@
-import { FC, useState } from 'react';
-import HeadingButton, { HeadingButtonProps } from '../buttons/heading-button';
+import { FC, ReactNode, useState } from 'react';
+import HeadingButton, {
+  type HeadingButtonProps,
+} from '../buttons/heading-button';
 import styles from './widget.module.scss';
 
 export type WidgetProps = Pick<
   HeadingButtonProps,
   'expanded' | 'level' | 'title'
 > & {
+  /**
+   * The widget body.
+   */
+  children: ReactNode;
   /**
    * Set additional classnames to the widget wrapper.
    */
diff --git a/src/components/molecules/modals/modal.test.tsx b/src/components/molecules/modals/modal.test.tsx
index 14fb224..9a0e237 100644
--- a/src/components/molecules/modals/modal.test.tsx
+++ b/src/components/molecules/modals/modal.test.tsx
@@ -1,9 +1,18 @@
 import { render, screen } from '@test-utils';
 import Modal from './modal';
 
+const title = 'A custom title';
+const children =
+  'Labore ullam delectus sit modi quam dolores. Ratione id sint aliquid facilis ipsum. Unde necessitatibus provident minus.';
+
 describe('Modal', () => {
   it('renders a title', () => {
-    render(<Modal title="A custom title" />);
-    expect(screen.getByText('A custom title')).toBeInTheDocument();
+    render(<Modal title={title}>{children}</Modal>);
+    expect(screen.getByText(title)).toBeInTheDocument();
+  });
+
+  it('renders the modal body', () => {
+    render(<Modal title={title}>{children}</Modal>);
+    expect(screen.getByText(children)).toBeInTheDocument();
   });
 });
diff --git a/src/components/molecules/modals/modal.tsx b/src/components/molecules/modals/modal.tsx
index 52ada57..58f5fa0 100644
--- a/src/components/molecules/modals/modal.tsx
+++ b/src/components/molecules/modals/modal.tsx
@@ -1,13 +1,17 @@
-import Heading from '@components/atoms/headings/heading';
-import { CogProps } from '@components/atoms/icons/cog';
-import { MagnifyingGlassProps } from '@components/atoms/icons/magnifying-glass';
+import Heading, { type HeadingProps } from '@components/atoms/headings/heading';
+import { type CogProps } from '@components/atoms/icons/cog';
+import { type MagnifyingGlassProps } from '@components/atoms/icons/magnifying-glass';
 import dynamic from 'next/dynamic';
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import styles from './modal.module.scss';
 
 export type Icons = 'cogs' | 'search';
 
 export type ModalProps = {
+  /**
+   * The modal body.
+   */
+  children: ReactNode;
   /**
    * Set additional classnames.
    */
@@ -15,7 +19,7 @@ export type ModalProps = {
   /**
    * Set additional classnames to the heading.
    */
-  headingClassName?: string;
+  headingClassName?: HeadingProps['className'];
   /**
    * A icon to illustrate the modal.
    */
diff --git a/src/components/molecules/modals/tooltip.tsx b/src/components/molecules/modals/tooltip.tsx
index 73f36e7..80721f3 100644
--- a/src/components/molecules/modals/tooltip.tsx
+++ b/src/components/molecules/modals/tooltip.tsx
@@ -1,5 +1,5 @@
 import List, { type ListItem } from '@components/atoms/lists/list';
-import { ReactNode, VFC } from 'react';
+import { FC, ReactNode } from 'react';
 import styles from './tooltip.module.scss';
 
 export type TooltipProps = {
@@ -26,7 +26,7 @@ export type TooltipProps = {
  *
  * Render a tooltip modal.
  */
-const Tooltip: VFC<TooltipProps> = ({
+const Tooltip: FC<TooltipProps> = ({
   className = '',
   content,
   icon,
diff --git a/src/components/molecules/nav/breadcrumb.tsx b/src/components/molecules/nav/breadcrumb.tsx
index 33af735..6dc86a0 100644
--- a/src/components/molecules/nav/breadcrumb.tsx
+++ b/src/components/molecules/nav/breadcrumb.tsx
@@ -1,7 +1,7 @@
 import Link from '@components/atoms/links/link';
 import { settings } from '@utils/config';
 import Script from 'next/script';
-import { VFC } from 'react';
+import { FC } from 'react';
 import { useIntl } from 'react-intl';
 import { BreadcrumbList, ListItem, WithContext } from 'schema-dts';
 import styles from './breadcrumb.module.scss';
@@ -37,7 +37,7 @@ export type BreadcrumbProps = {
  *
  * Render a breadcrumb navigation.
  */
-const Breadcrumb: VFC<BreadcrumbProps> = ({ items, ...props }) => {
+const Breadcrumb: FC<BreadcrumbProps> = ({ items, ...props }) => {
   const intl = useIntl();
 
   /**
diff --git a/src/components/molecules/nav/nav.tsx b/src/components/molecules/nav/nav.tsx
index 6ef9158..2666ea2 100644
--- a/src/components/molecules/nav/nav.tsx
+++ b/src/components/molecules/nav/nav.tsx
@@ -1,6 +1,6 @@
 import Link from '@components/atoms/links/link';
 import NavLink from '@components/atoms/links/nav-link';
-import { ReactNode, VFC } from 'react';
+import { FC, ReactNode } from 'react';
 import styles from './nav.module.scss';
 
 export type NavItem = {
@@ -46,7 +46,7 @@ export type NavProps = {
  *
  * Render the nav links.
  */
-const Nav: VFC<NavProps> = ({
+const Nav: FC<NavProps> = ({
   className = '',
   items,
   kind,
diff --git a/src/components/organisms/forms/comment-form.stories.tsx b/src/components/organisms/forms/comment-form.stories.tsx
index 1ab7cf2..670176c 100644
--- a/src/components/organisms/forms/comment-form.stories.tsx
+++ b/src/components/organisms/forms/comment-form.stories.tsx
@@ -1,4 +1,3 @@
-import Notice from '@components/atoms/layout/notice';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { IntlProvider } from 'react-intl';
 import CommentFormComponent from './comment-form';
diff --git a/src/components/organisms/forms/comment-form.tsx b/src/components/organisms/forms/comment-form.tsx
index 6acbf94..d7cb0f5 100644
--- a/src/components/organisms/forms/comment-form.tsx
+++ b/src/components/organisms/forms/comment-form.tsx
@@ -3,7 +3,7 @@ import Form from '@components/atoms/forms/form';
 import Heading, { type HeadingLevel } from '@components/atoms/headings/heading';
 import Spinner from '@components/atoms/loaders/spinner';
 import LabelledField from '@components/molecules/forms/labelled-field';
-import { ReactNode, useState, VFC } from 'react';
+import { FC, ReactNode, useState } from 'react';
 import { useIntl } from 'react-intl';
 import styles from './comment-form.module.scss';
 
@@ -31,7 +31,7 @@ export type CommentFormProps = {
   titleLevel?: HeadingLevel;
 };
 
-const CommentForm: VFC<CommentFormProps> = ({
+const CommentForm: FC<CommentFormProps> = ({
   className = '',
   Notice,
   saveComment,
diff --git a/src/components/organisms/forms/contact-form.tsx b/src/components/organisms/forms/contact-form.tsx
index 994244a..4a6902b 100644
--- a/src/components/organisms/forms/contact-form.tsx
+++ b/src/components/organisms/forms/contact-form.tsx
@@ -2,7 +2,7 @@ import Button from '@components/atoms/buttons/button';
 import Form from '@components/atoms/forms/form';
 import Spinner from '@components/atoms/loaders/spinner';
 import LabelledField from '@components/molecules/forms/labelled-field';
-import { ReactNode, useState, VFC } from 'react';
+import { FC, ReactNode, useState } from 'react';
 import { useIntl } from 'react-intl';
 import styles from './contact-form.module.scss';
 
@@ -27,7 +27,7 @@ export type ContactFormProps = {
  *
  * Render a contact form.
  */
-const ContactForm: VFC<ContactFormProps> = ({
+const ContactForm: FC<ContactFormProps> = ({
   className = '',
   Notice,
   sendMail,
diff --git a/src/components/organisms/forms/search-form.tsx b/src/components/organisms/forms/search-form.tsx
index 351d93c..18b7c08 100644
--- a/src/components/organisms/forms/search-form.tsx
+++ b/src/components/organisms/forms/search-form.tsx
@@ -2,15 +2,20 @@ import Button from '@components/atoms/buttons/button';
 import Form from '@components/atoms/forms/form';
 import MagnifyingGlass from '@components/atoms/icons/magnifying-glass';
 import LabelledField, {
-  LabelledFieldProps,
+  type LabelledFieldProps,
 } from '@components/molecules/forms/labelled-field';
-import { useState, VFC } from 'react';
+import { FC, useState } from 'react';
 import { useIntl } from 'react-intl';
 import styles from './search-form.module.scss';
 
 export type SearchFormProps = Pick<LabelledFieldProps, 'hideLabel'>;
 
-const SearchForm: VFC<SearchFormProps> = ({ hideLabel }) => {
+/**
+ * SearchForm component
+ *
+ * Render a search form.
+ */
+const SearchForm: FC<SearchFormProps> = ({ hideLabel }) => {
   const intl = useIntl();
   const fieldLabel = intl.formatMessage({
     defaultMessage: 'Search for:',
diff --git a/src/components/organisms/layout/cards-list.tsx b/src/components/organisms/layout/cards-list.tsx
index a53df0d..33ffe23 100644
--- a/src/components/organisms/layout/cards-list.tsx
+++ b/src/components/organisms/layout/cards-list.tsx
@@ -3,7 +3,7 @@ import List, {
   type ListProps,
 } from '@components/atoms/lists/list';
 import Card, { type CardProps } from '@components/molecules/layout/card';
-import { VFC } from 'react';
+import { FC } from 'react';
 import styles from './cards-list.module.scss';
 
 export type CardsListItem = Omit<
@@ -37,7 +37,7 @@ export type CardsListProps = {
  *
  * Return a list of Card components.
  */
-const CardsList: VFC<CardsListProps> = ({
+const CardsList: FC<CardsListProps> = ({
   coverFit,
   items,
   kind = 'unordered',
diff --git a/src/components/organisms/layout/footer.tsx b/src/components/organisms/layout/footer.tsx
index c9cb067..15bfa24 100644
--- a/src/components/organisms/layout/footer.tsx
+++ b/src/components/organisms/layout/footer.tsx
@@ -1,7 +1,9 @@
-import Copyright, { CopyrightProps } from '@components/atoms/layout/copyright';
+import Copyright, {
+  type CopyrightProps,
+} from '@components/atoms/layout/copyright';
 import BackToTop from '@components/molecules/buttons/back-to-top';
 import Nav, { type NavItem } from '@components/molecules/nav/nav';
-import { VFC } from 'react';
+import { FC } from 'react';
 import styles from './footer.module.scss';
 
 export type FooterProps = {
@@ -28,12 +30,7 @@ export type FooterProps = {
  *
  * Renders a footer with copyright and nav;
  */
-const Footer: VFC<FooterProps> = ({
-  className,
-  copyright,
-  navItems,
-  topId,
-}) => {
+const Footer: FC<FooterProps> = ({ className, copyright, navItems, topId }) => {
   return (
     <footer className={`${styles.wrapper} ${className}`}>
       <Copyright
diff --git a/src/components/organisms/layout/overview.tsx b/src/components/organisms/layout/overview.tsx
index 3f83342..42d0431 100644
--- a/src/components/organisms/layout/overview.tsx
+++ b/src/components/organisms/layout/overview.tsx
@@ -2,7 +2,7 @@ import ResponsiveImage, {
   type ResponsiveImageProps,
 } from '@components/molecules/images/responsive-image';
 import Meta, { type MetaMap } from '@components/molecules/layout/meta';
-import { VFC } from 'react';
+import { FC } from 'react';
 import styles from './overview.module.scss';
 
 export type OverviewProps = {
@@ -15,7 +15,7 @@ export type OverviewProps = {
  *
  * Render an overview.
  */
-const Overview: VFC<OverviewProps> = ({ cover, meta }) => {
+const Overview: FC<OverviewProps> = ({ cover, meta }) => {
   return (
     <div className={styles.wrapper}>
       {cover && (
diff --git a/src/components/organisms/layout/summary.stories.tsx b/src/components/organisms/layout/summary.stories.tsx
index 5214d70..b33acde 100644
--- a/src/components/organisms/layout/summary.stories.tsx
+++ b/src/components/organisms/layout/summary.stories.tsx
@@ -103,7 +103,7 @@ Summary.args = {
   cover: {
     alt: 'A cover',
     height: 480,
-    url: 'http://placeimg.com/640/480',
+    src: 'http://placeimg.com/640/480',
     width: 640,
   },
   excerpt:
diff --git a/src/components/organisms/layout/summary.test.tsx b/src/components/organisms/layout/summary.test.tsx
index ce87c0c..4944805 100644
--- a/src/components/organisms/layout/summary.test.tsx
+++ b/src/components/organisms/layout/summary.test.tsx
@@ -4,7 +4,7 @@ import Summary from './summary';
 const cover = {
   alt: 'A cover',
   height: 480,
-  url: 'http://placeimg.com/640/480',
+  src: 'http://placeimg.com/640/480',
   width: 640,
 };
 
diff --git a/src/components/organisms/layout/summary.tsx b/src/components/organisms/layout/summary.tsx
index 3624e5d..733a660 100644
--- a/src/components/organisms/layout/summary.tsx
+++ b/src/components/organisms/layout/summary.tsx
@@ -2,18 +2,18 @@ import ButtonLink from '@components/atoms/buttons/button-link';
 import Heading, { type HeadingLevel } from '@components/atoms/headings/heading';
 import Arrow from '@components/atoms/icons/arrow';
 import Link from '@components/atoms/links/link';
-import ResponsiveImage from '@components/molecules/images/responsive-image';
+import ResponsiveImage, {
+  type ResponsiveImageProps,
+} from '@components/molecules/images/responsive-image';
 import Meta, { type MetaItem } from '@components/molecules/layout/meta';
-import { VFC } from 'react';
+import { FC } from 'react';
 import { useIntl } from 'react-intl';
 import styles from './summary.module.scss';
 
-export type Cover = {
-  alt: string;
-  height: number;
-  url: string;
-  width: number;
-};
+export type Cover = Pick<
+  ResponsiveImageProps,
+  'alt' | 'src' | 'width' | 'height'
+>;
 
 export type RequiredMetaKey = 'publication';
 
@@ -35,11 +35,29 @@ export type OptionalMeta = {
 export type Meta = RequiredMeta & OptionalMeta;
 
 export type SummaryProps = {
+  /**
+   * The post cover.
+   */
   cover?: Cover;
+  /**
+   * The post excerpt.
+   */
   excerpt: string;
+  /**
+   * The post meta.
+   */
   meta: Meta;
+  /**
+   * The post title.
+   */
   title: string;
+  /**
+   * The heading level (hn).
+   */
   titleLevel?: HeadingLevel;
+  /**
+   * The post url.
+   */
   url: string;
 };
 
@@ -48,7 +66,7 @@ export type SummaryProps = {
  *
  * Render a page summary.
  */
-const Summary: VFC<SummaryProps> = ({
+const Summary: FC<SummaryProps> = ({
   cover,
   excerpt,
   meta,
@@ -57,18 +75,23 @@ const Summary: VFC<SummaryProps> = ({
   url,
 }) => {
   const intl = useIntl();
+  const readMore = intl.formatMessage(
+    {
+      defaultMessage: 'Read more<a11y> about {title}</a11y>',
+      description: 'Summary: read more link',
+      id: 'Zpgv+f',
+    },
+    {
+      title,
+      a11y: (chunks: string) => (
+        <span className="screen-reader-text">{chunks}</span>
+      ),
+    }
+  );
 
   return (
     <article className={styles.wrapper}>
-      {cover && (
-        <ResponsiveImage
-          alt={cover.alt}
-          src={cover.url}
-          width={cover.width}
-          height={cover.height}
-          className={styles.cover}
-        />
-      )}
+      {cover && <ResponsiveImage className={styles.cover} {...cover} />}
       <header className={styles.header}>
         <Link href={url}>
           <Heading level={titleLevel} className={styles.title}>
@@ -79,20 +102,10 @@ const Summary: VFC<SummaryProps> = ({
       <div className={styles.body}>
         {excerpt}
         <ButtonLink target={url} className={styles['read-more']}>
-          {intl.formatMessage(
-            {
-              defaultMessage: 'Read more<a11y> about {title}</a11y>',
-              description: 'Summary: read more link',
-              id: 'Zpgv+f',
-            },
-            {
-              title,
-              a11y: (chunks: string) => (
-                <span className="screen-reader-text">{chunks}</span>
-              ),
-            }
-          )}
-          <Arrow direction="right" />
+          <>
+            {readMore}
+            <Arrow direction="right" />
+          </>
         </ButtonLink>
       </div>
       <footer className={styles.footer}>
diff --git a/src/components/organisms/modals/search-modal.tsx b/src/components/organisms/modals/search-modal.tsx
index 883b783..0e0ceed 100644
--- a/src/components/organisms/modals/search-modal.tsx
+++ b/src/components/organisms/modals/search-modal.tsx
@@ -1,5 +1,5 @@
-import Modal from '@components/molecules/modals/modal';
-import { VFC } from 'react';
+import Modal, { type ModalProps } from '@components/molecules/modals/modal';
+import { FC } from 'react';
 import { useIntl } from 'react-intl';
 import SearchForm from '../forms/search-form';
 import styles from './search-modal.module.scss';
@@ -8,7 +8,7 @@ export type SearchModalProps = {
   /**
    * Set additional classnames to modal wrapper.
    */
-  className?: string;
+  className?: ModalProps['className'];
 };
 
 /**
@@ -16,7 +16,7 @@ export type SearchModalProps = {
  *
  * Render a search form modal.
  */
-const SearchModal: VFC<SearchModalProps> = ({ className }) => {
+const SearchModal: FC<SearchModalProps> = ({ className }) => {
   const intl = useIntl();
   const modalTitle = intl.formatMessage({
     defaultMessage: 'Search',
diff --git a/src/components/organisms/modals/settings-modal.tsx b/src/components/organisms/modals/settings-modal.tsx
index 25d6f6f..20d2605 100644
--- a/src/components/organisms/modals/settings-modal.tsx
+++ b/src/components/organisms/modals/settings-modal.tsx
@@ -1,10 +1,12 @@
 import Form from '@components/atoms/forms/form';
-import AckeeSelect from '@components/molecules/forms/ackee-select';
+import AckeeSelect, {
+  type AckeeSelectProps,
+} from '@components/molecules/forms/ackee-select';
 import MotionToggle from '@components/molecules/forms/motion-toggle';
 import PrismThemeToggle from '@components/molecules/forms/prism-theme-toggle';
 import ThemeToggle from '@components/molecules/forms/theme-toggle';
-import Modal from '@components/molecules/modals/modal';
-import { VFC } from 'react';
+import Modal, { type ModalProps } from '@components/molecules/modals/modal';
+import { FC } from 'react';
 import { useIntl } from 'react-intl';
 import styles from './settings-modal.module.scss';
 
@@ -12,11 +14,11 @@ export type SettingsModalProps = {
   /**
    * Set additional classnames to the modal wrapper.
    */
-  className?: string;
+  className?: ModalProps['className'];
   /**
    * Set additional classnames to the tooltip wrapper.
    */
-  tooltipClassName?: string;
+  tooltipClassName?: AckeeSelectProps['tooltipClassName'];
 };
 
 /**
@@ -24,7 +26,7 @@ export type SettingsModalProps = {
  *
  * Render a modal with settings options.
  */
-const SettingsModal: VFC<SettingsModalProps> = ({
+const SettingsModal: FC<SettingsModalProps> = ({
   className = '',
   tooltipClassName = '',
 }) => {
diff --git a/src/components/organisms/toolbar/main-nav.tsx b/src/components/organisms/toolbar/main-nav.tsx
index 50bbe8b..35e3fd6 100644
--- a/src/components/organisms/toolbar/main-nav.tsx
+++ b/src/components/organisms/toolbar/main-nav.tsx
@@ -1,17 +1,20 @@
 import Checkbox, { type CheckboxProps } from '@components/atoms/forms/checkbox';
 import Label from '@components/atoms/forms/label';
 import Hamburger from '@components/atoms/icons/hamburger';
-import Nav, { type NavItem } from '@components/molecules/nav/nav';
-import { VFC } from 'react';
+import Nav, {
+  type NavProps,
+  type NavItem,
+} from '@components/molecules/nav/nav';
+import { FC } from 'react';
 import { useIntl } from 'react-intl';
-import sharedStyles from './toolbar-items.module.scss';
 import mainNavStyles from './main-nav.module.scss';
+import sharedStyles from './toolbar-items.module.scss';
 
 export type MainNavProps = {
   /**
    * Set additional classnames to the nav element.
    */
-  className?: string;
+  className?: NavProps['className'];
   /**
    * The button state.
    */
@@ -26,7 +29,12 @@ export type MainNavProps = {
   setIsActive: CheckboxProps['setValue'];
 };
 
-const MainNav: VFC<MainNavProps> = ({
+/**
+ * MainNav component
+ *
+ * Render the main navigation.
+ */
+const MainNav: FC<MainNavProps> = ({
   className = '',
   isActive,
   items,
diff --git a/src/components/organisms/toolbar/search.tsx b/src/components/organisms/toolbar/search.tsx
index 070bce0..72cd576 100644
--- a/src/components/organisms/toolbar/search.tsx
+++ b/src/components/organisms/toolbar/search.tsx
@@ -1,17 +1,17 @@
-import Checkbox, { CheckboxProps } from '@components/atoms/forms/checkbox';
+import Checkbox, { type CheckboxProps } from '@components/atoms/forms/checkbox';
 import Label from '@components/atoms/forms/label';
 import MagnifyingGlass from '@components/atoms/icons/magnifying-glass';
-import { VFC } from 'react';
+import { FC } from 'react';
 import { useIntl } from 'react-intl';
-import SearchModal from '../modals/search-modal';
-import sharedStyles from './toolbar-items.module.scss';
+import SearchModal, { type SearchModalProps } from '../modals/search-modal';
 import searchStyles from './search.module.scss';
+import sharedStyles from './toolbar-items.module.scss';
 
 export type SearchProps = {
   /**
    * Set additional classnames to the modal wrapper.
    */
-  className?: string;
+  className?: SearchModalProps['className'];
   /**
    * The button state.
    */
@@ -22,11 +22,7 @@ export type SearchProps = {
   setIsActive: CheckboxProps['setValue'];
 };
 
-const Search: VFC<SearchProps> = ({
-  className = '',
-  isActive,
-  setIsActive,
-}) => {
+const Search: FC<SearchProps> = ({ className = '', isActive, setIsActive }) => {
   const intl = useIntl();
   const label = isActive
     ? intl.formatMessage({
diff --git a/src/components/organisms/toolbar/settings.tsx b/src/components/organisms/toolbar/settings.tsx
index 88539fb..3b10226 100644
--- a/src/components/organisms/toolbar/settings.tsx
+++ b/src/components/organisms/toolbar/settings.tsx
@@ -1,11 +1,13 @@
-import Checkbox, { CheckboxProps } from '@components/atoms/forms/checkbox';
+import Checkbox, { type CheckboxProps } from '@components/atoms/forms/checkbox';
 import Label from '@components/atoms/forms/label';
 import Cog from '@components/atoms/icons/cog';
-import { VFC } from 'react';
+import { FC } from 'react';
 import { useIntl } from 'react-intl';
-import SettingsModal from '../modals/settings-modal';
-import sharedStyles from './toolbar-items.module.scss';
+import SettingsModal, {
+  type SettingsModalProps,
+} from '../modals/settings-modal';
 import settingsStyles from './settings.module.scss';
+import sharedStyles from './toolbar-items.module.scss';
 
 export type SettingsProps = {
   /**
@@ -23,10 +25,10 @@ export type SettingsProps = {
   /**
    * Set additional classnames to the tooltip wrapper.
    */
-  tooltipClassName?: string;
+  tooltipClassName?: SettingsModalProps['tooltipClassName'];
 };
 
-const Settings: VFC<SettingsProps> = ({
+const Settings: FC<SettingsProps> = ({
   className = '',
   isActive,
   setIsActive,
diff --git a/src/components/organisms/toolbar/toolbar.tsx b/src/components/organisms/toolbar/toolbar.tsx
index 81e80cf..f1ce530 100644
--- a/src/components/organisms/toolbar/toolbar.tsx
+++ b/src/components/organisms/toolbar/toolbar.tsx
@@ -1,4 +1,4 @@
-import { useState, VFC } from 'react';
+import { FC, useState } from 'react';
 import MainNav, { type MainNavProps } from '../toolbar/main-nav';
 import Search from '../toolbar/search';
 import Settings from '../toolbar/settings';
@@ -20,7 +20,7 @@ export type ToolbarProps = {
  *
  * Render the website toolbar.
  */
-const Toolbar: VFC<ToolbarProps> = ({ className = '', nav }) => {
+const Toolbar: FC<ToolbarProps> = ({ className = '', nav }) => {
   const [isNavOpened, setIsNavOpened] = useState<boolean>(false);
   const [isSettingsOpened, setIsSettingsOpened] = useState<boolean>(false);
   const [isSearchOpened, setIsSearchOpened] = useState<boolean>(false);
diff --git a/src/components/organisms/widgets/image-widget.tsx b/src/components/organisms/widgets/image-widget.tsx
index 928d5ea..ba04c6a 100644
--- a/src/components/organisms/widgets/image-widget.tsx
+++ b/src/components/organisms/widgets/image-widget.tsx
@@ -1,28 +1,16 @@
-import ResponsiveImage from '@components/molecules/images/responsive-image';
+import ResponsiveImage, {
+  type ResponsiveImageProps,
+} from '@components/molecules/images/responsive-image';
 import Widget, { type WidgetProps } from '@components/molecules/layout/widget';
-import { VFC } from 'react';
+import { FC } from 'react';
 import styles from './image-widget.module.scss';
 
 export type Alignment = 'left' | 'center' | 'right';
 
-export type Image = {
-  /**
-   * An alternative text for the image.
-   */
-  alt: string;
-  /**
-   * The image height.
-   */
-  height: number;
-  /**
-   * The image source.
-   */
-  src: string;
-  /**
-   * The image width.
-   */
-  width: number;
-};
+export type Image = Pick<
+  ResponsiveImageProps,
+  'alt' | 'height' | 'src' | 'width'
+>;
 
 export type ImageWidgetProps = Pick<
   WidgetProps,
@@ -35,7 +23,7 @@ export type ImageWidgetProps = Pick<
   /**
    * Add a caption to the image.
    */
-  description?: string;
+  description?: ResponsiveImageProps['caption'];
   /**
    * An object describing the image.
    */
@@ -43,7 +31,7 @@ export type ImageWidgetProps = Pick<
   /**
    * Add a link to the image.
    */
-  url?: string;
+  url?: ResponsiveImageProps['target'];
 };
 
 /**
@@ -51,7 +39,7 @@ export type ImageWidgetProps = Pick<
  *
  * Renders a widget that print an image and an optional text.
  */
-const ImageWidget: VFC<ImageWidgetProps> = ({
+const ImageWidget: FC<ImageWidgetProps> = ({
   alignment = 'left',
   description,
   img,
diff --git a/src/components/organisms/widgets/links-list-widget.tsx b/src/components/organisms/widgets/links-list-widget.tsx
index 155354e..559d0b6 100644
--- a/src/components/organisms/widgets/links-list-widget.tsx
+++ b/src/components/organisms/widgets/links-list-widget.tsx
@@ -1,8 +1,11 @@
 import Link from '@components/atoms/links/link';
-import List, { ListProps, type ListItem } from '@components/atoms/lists/list';
+import List, {
+  type ListProps,
+  type ListItem,
+} from '@components/atoms/lists/list';
 import Widget, { type WidgetProps } from '@components/molecules/layout/widget';
 import { slugify } from '@utils/helpers/slugify';
-import { VFC } from 'react';
+import { FC } from 'react';
 import styles from './links-list-widget.module.scss';
 
 export type LinksListItems = {
@@ -33,7 +36,7 @@ export type LinksListWidgetProps = Pick<WidgetProps, 'level' | 'title'> &
  *
  * Render a list of links inside a widget.
  */
-const LinksListWidget: VFC<LinksListWidgetProps> = ({
+const LinksListWidget: FC<LinksListWidgetProps> = ({
   items,
   kind = 'unordered',
   ...props
diff --git a/src/components/organisms/widgets/sharing.tsx b/src/components/organisms/widgets/sharing.tsx
index ccd3a21..571c1a4 100644
--- a/src/components/organisms/widgets/sharing.tsx
+++ b/src/components/organisms/widgets/sharing.tsx
@@ -2,7 +2,7 @@ import SharingLink, {
   type SharingMedium,
 } from '@components/atoms/links/sharing-link';
 import Widget, { type WidgetProps } from '@components/molecules/layout/widget';
-import { VFC } from 'react';
+import { FC } from 'react';
 import { useIntl } from 'react-intl';
 import styles from './sharing.module.scss';
 
@@ -21,7 +21,7 @@ export type SharingData = {
   url: string;
 };
 
-export type SharingProps = WidgetProps & {
+export type SharingProps = Omit<WidgetProps, 'children'> & {
   /**
    * The page data to share.
    */
@@ -37,7 +37,7 @@ export type SharingProps = WidgetProps & {
  *
  * Render a list of sharing links inside a widget.
  */
-const Sharing: VFC<SharingProps> = ({ data, media, ...props }) => {
+const Sharing: FC<SharingProps> = ({ data, media, ...props }) => {
   const intl = useIntl();
 
   /**
-- 
cgit v1.2.3


From a08291b1586858fc894a27d56f55f87a88f8dbd3 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Wed, 20 Apr 2022 19:24:21 +0200
Subject: refactor(storybook): reorganize design system

Add more stories for each components and change some components
categories for better organization.
---
 .storybook/main.js                                 |  14 ++-
 .../atoms/buttons/button-link.stories.tsx          |  46 +++++++--
 src/components/atoms/buttons/button-link.tsx       |   2 +-
 src/components/atoms/buttons/button.stories.tsx    |  42 ++++++--
 src/components/atoms/buttons/buttons.module.scss   |   5 +-
 src/components/atoms/forms/checkbox.stories.tsx    |   6 ++
 src/components/atoms/forms/field.stories.tsx       |  74 ++++++++++++--
 src/components/atoms/forms/label.stories.tsx       |   6 ++
 src/components/atoms/forms/select.stories.tsx      |   6 ++
 src/components/atoms/headings/heading.stories.tsx  |  72 ++++++++++++--
 src/components/atoms/icons/arrow.stories.tsx       |   8 +-
 src/components/atoms/icons/career.stories.tsx      |   8 +-
 src/components/atoms/icons/cc-by-sa.stories.tsx    |  19 +++-
 src/components/atoms/icons/close.stories.tsx       |   8 +-
 src/components/atoms/icons/cog.stories.tsx         |   8 +-
 .../atoms/icons/computer-screen.stories.tsx        |   8 +-
 src/components/atoms/icons/envelop.stories.tsx     |   8 +-
 src/components/atoms/icons/hamburger.stories.tsx   |   8 +-
 src/components/atoms/icons/home.stories.tsx        |   8 +-
 .../atoms/icons/magnifying-glass.stories.tsx       |   8 +-
 src/components/atoms/icons/moon.stories.tsx        |   8 +-
 src/components/atoms/icons/plus-minus.stories.tsx  |   8 +-
 src/components/atoms/icons/posts-stack.stories.tsx |   8 +-
 src/components/atoms/icons/sun.stories.tsx         |   8 +-
 src/components/atoms/images/logo.stories.tsx       |   8 +-
 src/components/atoms/layout/copyright.stories.tsx  |  17 +++-
 src/components/atoms/layout/main.stories.tsx       |   6 ++
 src/components/atoms/layout/no-script.stories.tsx  |  32 ++++--
 src/components/atoms/layout/notice.stories.tsx     |  39 +++++++-
 src/components/atoms/layout/section.stories.tsx    |  33 +++++--
 src/components/atoms/links/link.stories.tsx        |  43 +++++++--
 src/components/atoms/links/nav-link.stories.tsx    |   8 +-
 .../atoms/links/sharing-link.stories.tsx           |  57 ++++++++++-
 src/components/atoms/links/social-link.stories.tsx |  49 ++++++++--
 .../atoms/lists/description-list.stories.tsx       |   8 +-
 src/components/atoms/lists/list.stories.tsx        |  21 ++--
 .../atoms/loaders/progress-bar.stories.tsx         |  19 +++-
 src/components/atoms/loaders/spinner.stories.tsx   |  27 +++++-
 .../molecules/buttons/back-to-top.stories.tsx      |  17 +++-
 .../molecules/buttons/heading-button.stories.tsx   |  78 +++++++++++++--
 .../molecules/buttons/help-button.stories.tsx      |  17 +++-
 .../molecules/forms/ackee-select.stories.tsx       |  57 +++++++++--
 .../molecules/forms/labelled-field.stories.tsx     | 107 +++++++++++++++++++--
 .../molecules/forms/labelled-select.stories.tsx    |  69 ++++++++++---
 .../molecules/forms/motion-toggle.stories.tsx      |  36 +++++--
 .../molecules/forms/prism-theme-toggle.stories.tsx |  44 +++++++--
 .../forms/select-with-tooltip.stories.tsx          |  35 ++++---
 .../molecules/forms/theme-toggle.stories.tsx       |  44 +++++++--
 src/components/molecules/forms/toggle.stories.tsx  |  24 +++--
 .../molecules/images/flipping-logo.module.scss     |  59 ++++++++++++
 .../molecules/images/flipping-logo.stories.tsx     |  75 +++++++++++++++
 .../molecules/images/flipping-logo.test.tsx        |  25 +++++
 src/components/molecules/images/flipping-logo.tsx  |  55 +++++++++++
 .../molecules/images/responsive-image.module.scss  |   2 +-
 .../molecules/images/responsive-image.stories.tsx  |  63 ++++++++++--
 .../molecules/layout/branding.stories.tsx          |  46 +++++++--
 src/components/molecules/layout/branding.tsx       |   4 +-
 src/components/molecules/layout/card.module.scss   |   5 +-
 src/components/molecules/layout/card.stories.tsx   |  69 +++++++++++--
 src/components/molecules/layout/card.tsx           |   2 +-
 .../molecules/layout/flipping-logo.module.scss     |  59 ------------
 .../molecules/layout/flipping-logo.stories.tsx     |  66 -------------
 .../molecules/layout/flipping-logo.test.tsx        |  25 -----
 src/components/molecules/layout/flipping-logo.tsx  |  48 ---------
 src/components/molecules/layout/meta.stories.tsx   |  11 ++-
 src/components/molecules/layout/widget.module.scss |   5 +
 src/components/molecules/layout/widget.stories.tsx |  46 ++++++---
 src/components/molecules/modals/modal.stories.tsx  |  32 ++++--
 .../molecules/modals/tooltip.stories.tsx           |  22 +++--
 .../molecules/nav/breadcrumb.stories.tsx           |  60 +++++++++---
 src/components/molecules/nav/nav.stories.tsx       |  42 +++++---
 .../organisms/forms/comment-form.stories.tsx       |  31 ++++--
 .../organisms/forms/contact-form.stories.tsx       |  29 ++++--
 .../organisms/forms/search-form.stories.tsx        |  46 +++++++--
 .../organisms/layout/cards-list.stories.tsx        |  30 ++++++
 src/components/organisms/layout/footer.stories.tsx |  17 +++-
 .../organisms/layout/overview.stories.tsx          |  37 +++++--
 .../organisms/layout/summary.module.scss           |   1 +
 .../organisms/layout/summary.stories.tsx           |  60 +++++++++---
 src/components/organisms/layout/summary.tsx        |   4 +-
 .../organisms/modals/search-modal.stories.tsx      |  42 ++++++--
 .../organisms/modals/settings-modal.stories.tsx    |  30 +++++-
 .../organisms/toolbar/main-nav.stories.tsx         |  45 ++++++---
 .../organisms/toolbar/search.stories.tsx           |  41 +++++---
 .../organisms/toolbar/settings.stories.tsx         |  41 +++++---
 .../organisms/toolbar/toolbar.stories.tsx          |  40 +++++++-
 .../organisms/widgets/image-widget.module.scss     |   1 -
 .../organisms/widgets/image-widget.stories.tsx     |  71 ++++++++++++--
 .../widgets/links-list-widget.stories.tsx          |  37 +++++--
 .../organisms/widgets/sharing.stories.tsx          |  19 +++-
 src/components/organisms/widgets/sharing.tsx       |   2 +-
 .../organisms/widgets/social-media.stories.tsx     |  19 +++-
 92 files changed, 2117 insertions(+), 638 deletions(-)
 create mode 100644 src/components/molecules/images/flipping-logo.module.scss
 create mode 100644 src/components/molecules/images/flipping-logo.stories.tsx
 create mode 100644 src/components/molecules/images/flipping-logo.test.tsx
 create mode 100644 src/components/molecules/images/flipping-logo.tsx
 delete mode 100644 src/components/molecules/layout/flipping-logo.module.scss
 delete mode 100644 src/components/molecules/layout/flipping-logo.stories.tsx
 delete mode 100644 src/components/molecules/layout/flipping-logo.test.tsx
 delete mode 100644 src/components/molecules/layout/flipping-logo.tsx

(limited to 'src/components/organisms/widgets')

diff --git a/.storybook/main.js b/.storybook/main.js
index 05aa578..bedbd0e 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -1,5 +1,9 @@
 const path = require('path');
 
+/**
+ * @typedef {import('webpack').Configuration} WebpackConfig
+ */
+
 const storybookConfig = {
   stories: ['../src/**/*.stories.@(md|mdx|js|jsx|ts|tsx)'],
   addons: [
@@ -12,6 +16,11 @@ const storybookConfig = {
   core: {
     builder: 'webpack5',
   },
+  staticDirs: ['../public'],
+  /**
+   * @param {WebpackConfig} config
+   * @return {Promise<WebpackConfig>}
+   */
   webpackFinal: async (config) => {
     // Use SVGR for SVG files. See: https://medium.com/@derek_19900/config-storybook-4-to-use-svgr-webpack-plugin-22cb1152f004
     const rules = config.module.rules;
@@ -22,6 +31,9 @@ const storybookConfig = {
       use: [{ loader: '@svgr/webpack', options: { dimensions: false } }],
     });
 
+    /** @type {import('next').NextConfig} */
+    const nextConfig = require('../next.config');
+
     // Set modules aliases.
     config.resolve.alias = {
       ...config.resolve.alias,
@@ -35,7 +47,7 @@ const storybookConfig = {
       '@utils': path.resolve(__dirname, '../src/utils'),
     };
 
-    return config;
+    return { ...config, ...nextConfig.webpack };
   },
 };
 
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...',
+};
diff --git a/src/components/molecules/buttons/back-to-top.stories.tsx b/src/components/molecules/buttons/back-to-top.stories.tsx
index fe58293..7d4bc39 100644
--- a/src/components/molecules/buttons/back-to-top.stories.tsx
+++ b/src/components/molecules/buttons/back-to-top.stories.tsx
@@ -2,6 +2,9 @@ import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { IntlProvider } from 'react-intl';
 import BackToTopComponent from './back-to-top';
 
+/**
+ * BackToTop - Storybook Meta
+ */
 export default {
   title: 'Molecules/Buttons',
   component: BackToTopComponent,
@@ -30,14 +33,22 @@ export default {
       },
     },
   },
+  decorators: [
+    (Story) => (
+      <IntlProvider locale="en">
+        <Story />
+      </IntlProvider>
+    ),
+  ],
 } as ComponentMeta<typeof BackToTopComponent>;
 
 const Template: ComponentStory<typeof BackToTopComponent> = (args) => (
-  <IntlProvider locale="en">
-    <BackToTopComponent {...args} />
-  </IntlProvider>
+  <BackToTopComponent {...args} />
 );
 
+/**
+ * Buttons Stories - Back to top
+ */
 export const BackToTop = Template.bind({});
 BackToTop.args = {
   target: 'top',
diff --git a/src/components/molecules/buttons/heading-button.stories.tsx b/src/components/molecules/buttons/heading-button.stories.tsx
index 0a23b08..b0e1465 100644
--- a/src/components/molecules/buttons/heading-button.stories.tsx
+++ b/src/components/molecules/buttons/heading-button.stories.tsx
@@ -3,8 +3,11 @@ import { useState } from 'react';
 import { IntlProvider } from 'react-intl';
 import HeadingButtonComponent from './heading-button';
 
+/**
+ * HeadingButton - Storybook Meta
+ */
 export default {
-  title: 'Molecules/Buttons',
+  title: 'Molecules/Buttons/HeadingButton',
   component: HeadingButtonComponent,
   argTypes: {
     expanded: {
@@ -20,6 +23,8 @@ export default {
     level: {
       control: {
         type: 'number',
+        min: 1,
+        max: 6,
       },
       description: 'Heading level.',
       type: {
@@ -48,6 +53,13 @@ export default {
       },
     },
   },
+  decorators: [
+    (Story) => (
+      <IntlProvider locale="en">
+        <Story />
+      </IntlProvider>
+    ),
+  ],
 } as ComponentMeta<typeof HeadingButtonComponent>;
 
 const Template: ComponentStory<typeof HeadingButtonComponent> = ({
@@ -58,18 +70,64 @@ const Template: ComponentStory<typeof HeadingButtonComponent> = ({
   const [isExpanded, setIsExpanded] = useState<boolean>(expanded);
 
   return (
-    <IntlProvider locale="en">
-      <HeadingButtonComponent
-        expanded={isExpanded}
-        setExpanded={setIsExpanded}
-        {...args}
-      />
-    </IntlProvider>
+    <HeadingButtonComponent
+      expanded={isExpanded}
+      setExpanded={setIsExpanded}
+      {...args}
+    />
   );
 };
 
-export const HeadingButton = Template.bind({});
-HeadingButton.args = {
+/**
+ * Heading Button Stories - Level 1
+ */
+export const Level1 = Template.bind({});
+Level1.args = {
+  level: 1,
+  title: 'Your title',
+};
+
+/**
+ * Heading Button Stories - Level 2
+ */
+export const Level2 = Template.bind({});
+Level2.args = {
   level: 2,
   title: 'Your title',
 };
+
+/**
+ * Heading Button Stories - Level 3
+ */
+export const Level3 = Template.bind({});
+Level3.args = {
+  level: 3,
+  title: 'Your title',
+};
+
+/**
+ * Heading Button Stories - Level 4
+ */
+export const Level4 = Template.bind({});
+Level4.args = {
+  level: 4,
+  title: 'Your title',
+};
+
+/**
+ * Heading Button Stories - Level 5
+ */
+export const Level5 = Template.bind({});
+Level5.args = {
+  level: 5,
+  title: 'Your title',
+};
+
+/**
+ * Heading Button Stories - Level 6
+ */
+export const Level6 = Template.bind({});
+Level6.args = {
+  level: 6,
+  title: 'Your title',
+};
diff --git a/src/components/molecules/buttons/help-button.stories.tsx b/src/components/molecules/buttons/help-button.stories.tsx
index cfc1b0b..cfc603e 100644
--- a/src/components/molecules/buttons/help-button.stories.tsx
+++ b/src/components/molecules/buttons/help-button.stories.tsx
@@ -2,6 +2,9 @@ import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { IntlProvider } from 'react-intl';
 import HelpButtonComponent from './help-button';
 
+/**
+ * HelpButton - Storybook Meta
+ */
 export default {
   title: 'Molecules/Buttons',
   component: HelpButtonComponent,
@@ -33,12 +36,20 @@ export default {
       },
     },
   },
+  decorators: [
+    (Story) => (
+      <IntlProvider locale="en">
+        <Story />
+      </IntlProvider>
+    ),
+  ],
 } as ComponentMeta<typeof HelpButtonComponent>;
 
 const Template: ComponentStory<typeof HelpButtonComponent> = (args) => (
-  <IntlProvider locale="en">
-    <HelpButtonComponent {...args} />
-  </IntlProvider>
+  <HelpButtonComponent {...args} />
 );
 
+/**
+ * Help Button Stories - Level 1
+ */
 export const HelpButton = Template.bind({});
diff --git a/src/components/molecules/forms/ackee-select.stories.tsx b/src/components/molecules/forms/ackee-select.stories.tsx
index a59bfa9..4e6adf1 100644
--- a/src/components/molecules/forms/ackee-select.stories.tsx
+++ b/src/components/molecules/forms/ackee-select.stories.tsx
@@ -1,10 +1,13 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { IntlProvider } from 'react-intl';
-import AckeeSelectComponent from './ackee-select';
+import AckeeSelect from './ackee-select';
 
+/**
+ * AckeeSelect - Storybook Meta
+ */
 export default {
-  title: 'Molecules/Forms',
-  component: AckeeSelectComponent,
+  title: 'Molecules/Forms/Select',
+  component: AckeeSelect,
   argTypes: {
     initialValue: {
       control: {
@@ -17,16 +20,50 @@ export default {
         required: true,
       },
     },
+    labelClassName: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the label wrapper.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    tooltipClassName: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the tooltip wrapper.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
   },
-} as ComponentMeta<typeof AckeeSelectComponent>;
+  decorators: [
+    (Story) => (
+      <IntlProvider locale="en">
+        <Story />
+      </IntlProvider>
+    ),
+  ],
+} as ComponentMeta<typeof AckeeSelect>;
 
-const Template: ComponentStory<typeof AckeeSelectComponent> = (args) => (
-  <IntlProvider locale="en">
-    <AckeeSelectComponent {...args} />
-  </IntlProvider>
+const Template: ComponentStory<typeof AckeeSelect> = (args) => (
+  <AckeeSelect {...args} />
 );
 
-export const AckeeSelect = Template.bind({});
-AckeeSelect.args = {
+/**
+ * Select Stories - Ackee select
+ */
+export const Ackee = Template.bind({});
+Ackee.args = {
   initialValue: 'full',
 };
diff --git a/src/components/molecules/forms/labelled-field.stories.tsx b/src/components/molecules/forms/labelled-field.stories.tsx
index b77d71e..56eef00 100644
--- a/src/components/molecules/forms/labelled-field.stories.tsx
+++ b/src/components/molecules/forms/labelled-field.stories.tsx
@@ -1,16 +1,45 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useState } from 'react';
-import LabelledFieldComponent from './labelled-field';
+import LabelledField from './labelled-field';
 
+/**
+ * LabelledField - Storybook Meta
+ */
 export default {
-  title: 'Molecules/Forms',
-  component: LabelledFieldComponent,
+  title: 'Molecules/Forms/Field',
+  component: LabelledField,
   args: {
     disabled: false,
     labelPosition: 'top',
     required: false,
   },
   argTypes: {
+    'aria-labelledby': {
+      control: {
+        type: 'text',
+      },
+      description: 'One or more ids that refers to the field name.',
+      table: {
+        category: 'Accessibility',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the field.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     disabled: {
       control: {
         type: 'boolean',
@@ -35,6 +64,20 @@ export default {
         required: true,
       },
     },
+    hideLabel: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Visually hide the field label.',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: false },
+      },
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+    },
     label: {
       control: {
         type: 'text',
@@ -181,20 +224,68 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof LabelledFieldComponent>;
+} as ComponentMeta<typeof LabelledField>;
 
-const Template: ComponentStory<typeof LabelledFieldComponent> = ({
+const Template: ComponentStory<typeof LabelledField> = ({
   value: _value,
   setValue: _setValue,
   ...args
 }) => {
   const [value, setValue] = useState<string>('');
 
-  return <LabelledFieldComponent value={value} setValue={setValue} {...args} />;
+  return <LabelledField value={value} setValue={setValue} {...args} />;
+};
+
+/**
+ * Labelled Field Stories - Left
+ */
+export const Left = Template.bind({});
+Left.args = {
+  id: 'labelled-field-storybook',
+  label: 'Labelled field',
+  labelPosition: 'left',
+  name: 'labelled-field-storybook',
+};
+
+/**
+ * Labelled Field Stories - Top
+ */
+export const Top = Template.bind({});
+Top.args = {
+  id: 'labelled-field-storybook',
+  label: 'Labelled field',
+  labelPosition: 'top',
+  name: 'labelled-field-storybook',
+};
+
+/**
+ * Labelled Field Stories - Required
+ */
+export const Required = Template.bind({});
+Required.args = {
+  id: 'labelled-field-storybook',
+  label: 'Labelled field',
+  name: 'labelled-field-storybook',
+  required: true,
+};
+
+/**
+ * Labelled Field Stories - Hidden label
+ */
+export const HiddenLabel = Template.bind({});
+HiddenLabel.args = {
+  hideLabel: true,
+  id: 'labelled-field-storybook',
+  label: 'Labelled field',
+  name: 'labelled-field-storybook',
 };
 
-export const LabelledField = Template.bind({});
-LabelledField.args = {
+/**
+ * Labelled Field Stories - Disabled
+ */
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
   id: 'labelled-field-storybook',
   label: 'Labelled field',
   name: 'labelled-field-storybook',
diff --git a/src/components/molecules/forms/labelled-select.stories.tsx b/src/components/molecules/forms/labelled-select.stories.tsx
index 0c569f5..d02732c 100644
--- a/src/components/molecules/forms/labelled-select.stories.tsx
+++ b/src/components/molecules/forms/labelled-select.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useState } from 'react';
-import LabelledSelectComponent from './labelled-select';
+import LabelledSelect from './labelled-select';
 
 const selectOptions = [
   { id: 'option1', name: 'Option 1', value: 'option1' },
@@ -8,9 +8,12 @@ const selectOptions = [
   { id: 'option3', name: 'Option 3', value: 'option3' },
 ];
 
+/**
+ * LabelledSelect - Storybook Meta
+ */
 export default {
-  title: 'Molecules/Forms',
-  component: LabelledSelectComponent,
+  title: 'Molecules/Forms/Select',
+  component: LabelledSelect,
   args: {
     disabled: false,
     labelPosition: 'top',
@@ -167,29 +170,67 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof LabelledSelectComponent>;
+} as ComponentMeta<typeof LabelledSelect>;
 
-const Template: ComponentStory<typeof LabelledSelectComponent> = ({
+const Template: ComponentStory<typeof LabelledSelect> = ({
   value,
   setValue: _setValue,
   ...args
 }) => {
   const [selected, setSelected] = useState<string>(value);
 
-  return (
-    <LabelledSelectComponent
-      value={selected}
-      setValue={setSelected}
-      {...args}
-    />
-  );
+  return <LabelledSelect value={selected} setValue={setSelected} {...args} />;
 };
 
-export const LabelledSelect = Template.bind({});
-LabelledSelect.args = {
+/**
+ * Labelled Select Stories - Left
+ */
+export const Left = Template.bind({});
+Left.args = {
   id: 'labelled-select-storybook',
   label: 'Labelled select',
+  labelPosition: 'left',
   name: 'labelled-select-storybook',
   options: selectOptions,
   value: 'option1',
 };
+
+/**
+ * Labelled Select Stories - Top
+ */
+export const Top = Template.bind({});
+Top.args = {
+  id: 'labelled-select-storybook',
+  label: 'Labelled select',
+  labelPosition: 'top',
+  name: 'labelled-select-storybook',
+  options: selectOptions,
+  value: 'option1',
+};
+
+/**
+ * Labelled Select Stories - Disabled
+ */
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+  id: 'labelled-select-storybook',
+  label: 'Labelled select',
+  name: 'labelled-select-storybook',
+  options: selectOptions,
+  value: 'option1',
+};
+
+/**
+ * Labelled Select Stories - Required
+ */
+export const Required = Template.bind({});
+Required.args = {
+  id: 'labelled-select-storybook',
+  label: 'Labelled select',
+  labelPosition: 'top',
+  name: 'labelled-select-storybook',
+  options: selectOptions,
+  required: true,
+  value: 'option1',
+};
diff --git a/src/components/molecules/forms/motion-toggle.stories.tsx b/src/components/molecules/forms/motion-toggle.stories.tsx
index dc4d2a9..dcfc68d 100644
--- a/src/components/molecules/forms/motion-toggle.stories.tsx
+++ b/src/components/molecules/forms/motion-toggle.stories.tsx
@@ -2,10 +2,26 @@ import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { IntlProvider } from 'react-intl';
 import MotionToggleComponent from './motion-toggle';
 
+/**
+ * MotionToggle - Storybook Meta
+ */
 export default {
-  title: 'Molecules/Forms',
+  title: 'Molecules/Forms/Toggle',
   component: MotionToggleComponent,
   argTypes: {
+    labelClassName: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the label wrapper.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     value: {
       control: {
         type: null,
@@ -17,15 +33,23 @@ export default {
       },
     },
   },
+  decorators: [
+    (Story) => (
+      <IntlProvider locale="en">
+        <Story />
+      </IntlProvider>
+    ),
+  ],
 } as ComponentMeta<typeof MotionToggleComponent>;
 
 const Template: ComponentStory<typeof MotionToggleComponent> = (args) => (
-  <IntlProvider locale="en">
-    <MotionToggleComponent {...args} />
-  </IntlProvider>
+  <MotionToggleComponent {...args} />
 );
 
-export const MotionToggle = Template.bind({});
-MotionToggle.args = {
+/**
+ * Toggle Stories - Motion
+ */
+export const Motion = Template.bind({});
+Motion.args = {
   value: false,
 };
diff --git a/src/components/molecules/forms/prism-theme-toggle.stories.tsx b/src/components/molecules/forms/prism-theme-toggle.stories.tsx
index dc9090b..513ebfc 100644
--- a/src/components/molecules/forms/prism-theme-toggle.stories.tsx
+++ b/src/components/molecules/forms/prism-theme-toggle.stories.tsx
@@ -1,11 +1,27 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { IntlProvider } from 'react-intl';
-import PrismThemeToggleComponent from './prism-theme-toggle';
+import PrismThemeToggle from './prism-theme-toggle';
 
+/**
+ * PrismThemeToggle - Storybook Meta
+ */
 export default {
-  title: 'Molecules/Forms',
-  component: PrismThemeToggleComponent,
+  title: 'Molecules/Forms/Toggle',
+  component: PrismThemeToggle,
   argTypes: {
+    labelClassName: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the label wrapper.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     value: {
       control: {
         type: null,
@@ -17,15 +33,23 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof PrismThemeToggleComponent>;
+  decorators: [
+    (Story) => (
+      <IntlProvider locale="en">
+        <Story />
+      </IntlProvider>
+    ),
+  ],
+} as ComponentMeta<typeof PrismThemeToggle>;
 
-const Template: ComponentStory<typeof PrismThemeToggleComponent> = (args) => (
-  <IntlProvider locale="en">
-    <PrismThemeToggleComponent {...args} />
-  </IntlProvider>
+const Template: ComponentStory<typeof PrismThemeToggle> = (args) => (
+  <PrismThemeToggle {...args} />
 );
 
-export const PrismThemeToggle = Template.bind({});
-PrismThemeToggle.args = {
+/**
+ * Toggle Stories - Prism theme
+ */
+export const PrismTheme = Template.bind({});
+PrismTheme.args = {
   value: false,
 };
diff --git a/src/components/molecules/forms/select-with-tooltip.stories.tsx b/src/components/molecules/forms/select-with-tooltip.stories.tsx
index c63e9b8..d757b2b 100644
--- a/src/components/molecules/forms/select-with-tooltip.stories.tsx
+++ b/src/components/molecules/forms/select-with-tooltip.stories.tsx
@@ -1,11 +1,14 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useState } from 'react';
 import { IntlProvider } from 'react-intl';
-import SelectWithTooltipComponent from './select-with-tooltip';
+import SelectWithTooltip from './select-with-tooltip';
 
+/**
+ * SelectWithTooltip - Storybook Meta
+ */
 export default {
-  title: 'Molecules/Forms',
-  component: SelectWithTooltipComponent,
+  title: 'Molecules/Forms/Select',
+  component: SelectWithTooltip,
   argTypes: {
     content: {
       control: {
@@ -175,7 +178,14 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof SelectWithTooltipComponent>;
+  decorators: [
+    (Story) => (
+      <IntlProvider locale="en">
+        <Story />
+      </IntlProvider>
+    ),
+  ],
+} as ComponentMeta<typeof SelectWithTooltip>;
 
 const selectOptions = [
   { id: 'option1', name: 'Option 1', value: 'option1' },
@@ -183,25 +193,22 @@ const selectOptions = [
   { id: 'option3', name: 'Option 3', value: 'option3' },
 ];
 
-const Template: ComponentStory<typeof SelectWithTooltipComponent> = ({
+const Template: ComponentStory<typeof SelectWithTooltip> = ({
   value: _value,
   setValue: _setValue,
   ...args
 }) => {
   const [selected, setSelected] = useState<string>('option1');
   return (
-    <IntlProvider locale="en">
-      <SelectWithTooltipComponent
-        value={selected}
-        setValue={setSelected}
-        {...args}
-      />
-    </IntlProvider>
+    <SelectWithTooltip value={selected} setValue={setSelected} {...args} />
   );
 };
 
-export const SelectWithTooltip = Template.bind({});
-SelectWithTooltip.args = {
+/**
+ * Select Stories - With tooltip
+ */
+export const WithTooltip = Template.bind({});
+WithTooltip.args = {
   content: 'Illo voluptatibus quia minima placeat sit nostrum excepturi.',
   title: 'Possimus quidem dolor',
   id: 'storybook-select',
diff --git a/src/components/molecules/forms/theme-toggle.stories.tsx b/src/components/molecules/forms/theme-toggle.stories.tsx
index a9bcf73..05d94b9 100644
--- a/src/components/molecules/forms/theme-toggle.stories.tsx
+++ b/src/components/molecules/forms/theme-toggle.stories.tsx
@@ -1,11 +1,27 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { IntlProvider } from 'react-intl';
-import ThemeToggleComponent from './theme-toggle';
+import ThemeToggle from './theme-toggle';
 
+/**
+ * ThemeToggle - Storybook Meta
+ */
 export default {
-  title: 'Molecules/Forms',
-  component: ThemeToggleComponent,
+  title: 'Molecules/Forms/Toggle',
+  component: ThemeToggle,
   argTypes: {
+    labelClassName: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the label wrapper.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     value: {
       control: {
         type: null,
@@ -17,15 +33,23 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof ThemeToggleComponent>;
+  decorators: [
+    (Story) => (
+      <IntlProvider locale="en">
+        <Story />
+      </IntlProvider>
+    ),
+  ],
+} as ComponentMeta<typeof ThemeToggle>;
 
-const Template: ComponentStory<typeof ThemeToggleComponent> = (args) => (
-  <IntlProvider locale="en">
-    <ThemeToggleComponent {...args} />
-  </IntlProvider>
+const Template: ComponentStory<typeof ThemeToggle> = (args) => (
+  <ThemeToggle {...args} />
 );
 
-export const ThemeToggle = Template.bind({});
-ThemeToggle.args = {
+/**
+ * Toggle Stories - Theme
+ */
+export const Theme = Template.bind({});
+Theme.args = {
   value: false,
 };
diff --git a/src/components/molecules/forms/toggle.stories.tsx b/src/components/molecules/forms/toggle.stories.tsx
index 078a34c..0351ab7 100644
--- a/src/components/molecules/forms/toggle.stories.tsx
+++ b/src/components/molecules/forms/toggle.stories.tsx
@@ -1,10 +1,13 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useState } from 'react';
-import ToggleComponent from './toggle';
+import Toggle from './toggle';
 
+/**
+ * ThemeToggle - Storybook Meta
+ */
 export default {
-  title: 'Molecules/Forms',
-  component: ToggleComponent,
+  title: 'Molecules/Forms/Toggle',
+  component: Toggle,
   argTypes: {
     choices: {
       description: 'The toggle choices.',
@@ -92,21 +95,22 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof ToggleComponent>;
+} as ComponentMeta<typeof Toggle>;
 
-const Template: ComponentStory<typeof ToggleComponent> = ({
+const Template: ComponentStory<typeof Toggle> = ({
   value: _value,
   setValue: _setValue,
   ...args
 }) => {
   const [isChecked, setIsChecked] = useState<boolean>(false);
-  return (
-    <ToggleComponent value={isChecked} setValue={setIsChecked} {...args} />
-  );
+  return <Toggle value={isChecked} setValue={setIsChecked} {...args} />;
 };
 
-export const Toggle = Template.bind({});
-Toggle.args = {
+/**
+ * Toggle Stories - Default
+ */
+export const Default = Template.bind({});
+Default.args = {
   choices: {
     left: 'On',
     right: 'Off',
diff --git a/src/components/molecules/images/flipping-logo.module.scss b/src/components/molecules/images/flipping-logo.module.scss
new file mode 100644
index 0000000..89b9499
--- /dev/null
+++ b/src/components/molecules/images/flipping-logo.module.scss
@@ -0,0 +1,59 @@
+@use "@styles/abstracts/functions" as fun;
+
+.logo {
+  width: var(--logo-size, fun.convert-px(100));
+  height: var(--logo-size, fun.convert-px(100));
+  position: relative;
+  border-radius: 50%;
+  transform-style: preserve-3d;
+  transition: all 0.6s linear 0s;
+
+  &__front,
+  &__back {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    backface-visibility: hidden;
+    background: var(--color-bg);
+    border: fun.convert-px(2) solid var(--color-primary-dark);
+    border-radius: 50%;
+    transition: all 0.6s linear 0s;
+
+    svg,
+    img {
+      // !important is required to override next/image styles...
+      padding: fun.convert-px(2) !important;
+      border-radius: 50%;
+    }
+  }
+
+  &__front {
+    box-shadow: fun.convert-px(1) fun.convert-px(2) fun.convert-px(1) 0
+        var(--color-shadow-light),
+      fun.convert-px(2) fun.convert-px(3) fun.convert-px(3) 0
+        var(--color-shadow-light);
+  }
+
+  &__back {
+    transform: rotateY(180deg);
+  }
+
+  &:hover {
+    transform: rotateY(180deg);
+  }
+
+  &:hover & {
+    &__front {
+      box-shadow: none;
+    }
+
+    &__back {
+      box-shadow: fun.convert-px(1) fun.convert-px(2) fun.convert-px(1) 0
+          var(--color-shadow-light),
+        fun.convert-px(2) fun.convert-px(3) fun.convert-px(3) 0
+          var(--color-shadow-light);
+    }
+  }
+}
diff --git a/src/components/molecules/images/flipping-logo.stories.tsx b/src/components/molecules/images/flipping-logo.stories.tsx
new file mode 100644
index 0000000..40a4c49
--- /dev/null
+++ b/src/components/molecules/images/flipping-logo.stories.tsx
@@ -0,0 +1,75 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import FlippingLogoComponent from './flipping-logo';
+
+/**
+ * FlippingLogo - Storybook Meta
+ */
+export default {
+  title: 'Molecules/Images',
+  component: FlippingLogoComponent,
+  argTypes: {
+    altText: {
+      control: {
+        type: 'text',
+      },
+      description: 'Photo alternative text.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the logo wrapper.',
+      table: {
+        category: 'Options',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    logoTitle: {
+      control: {
+        type: 'text',
+      },
+      description: 'An accessible name for the logo.',
+      table: {
+        category: 'Accessibility',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    photo: {
+      control: {
+        type: 'text',
+      },
+      description: 'Photo url.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    unoptimized: { table: { disable: true } },
+  },
+} as ComponentMeta<typeof FlippingLogoComponent>;
+
+const Template: ComponentStory<typeof FlippingLogoComponent> = (args) => (
+  <FlippingLogoComponent {...args} />
+);
+
+/**
+ * Images Stories - Flipping Logo
+ */
+export const FlippingLogo = Template.bind({});
+FlippingLogo.args = {
+  altText: 'Website picture',
+  logoTitle: 'Website logo',
+  photo: 'http://placeimg.com/640/480',
+  // @ts-ignore - Needed because of the placeholder image.
+  unoptimized: true,
+};
diff --git a/src/components/molecules/images/flipping-logo.test.tsx b/src/components/molecules/images/flipping-logo.test.tsx
new file mode 100644
index 0000000..806fdbe
--- /dev/null
+++ b/src/components/molecules/images/flipping-logo.test.tsx
@@ -0,0 +1,25 @@
+import { render, screen } from '@test-utils';
+import FlippingLogo from './flipping-logo';
+
+describe('FlippingLogo', () => {
+  it('renders a photo', () => {
+    render(
+      <FlippingLogo
+        altText="Alternative text"
+        photo="http://placeimg.com/640/480"
+      />
+    );
+    expect(screen.getByAltText('Alternative text')).toBeInTheDocument();
+  });
+
+  it('renders a logo', () => {
+    render(
+      <FlippingLogo
+        altText="Alternative text"
+        logoTitle="A logo title"
+        photo="http://placeimg.com/640/480"
+      />
+    );
+    expect(screen.getByTitle('A logo title')).toBeInTheDocument();
+  });
+});
diff --git a/src/components/molecules/images/flipping-logo.tsx b/src/components/molecules/images/flipping-logo.tsx
new file mode 100644
index 0000000..0d31fa3
--- /dev/null
+++ b/src/components/molecules/images/flipping-logo.tsx
@@ -0,0 +1,55 @@
+import Logo, { type LogoProps } from '@components/atoms/images/logo';
+import Image from 'next/image';
+import { FC } from 'react';
+import styles from './flipping-logo.module.scss';
+
+export type FlippingLogoProps = {
+  /**
+   * Set additional classnames to the logo wrapper.
+   */
+  className?: string;
+  /**
+   * Photo alternative text.
+   */
+  altText: string;
+  /**
+   * Logo image title.
+   */
+  logoTitle?: LogoProps['title'];
+  /**
+   * Photo url.
+   */
+  photo: string;
+};
+
+/**
+ * FlippingLogo component
+ *
+ * Render a logo and a photo with a flipping effect.
+ */
+const FlippingLogo: FC<FlippingLogoProps> = ({
+  className = '',
+  altText,
+  logoTitle,
+  photo,
+  ...props
+}) => {
+  return (
+    <div className={`${styles.logo} ${className}`}>
+      <div className={styles.logo__front}>
+        <Image
+          src={photo}
+          alt={altText}
+          layout="fill"
+          objectFit="cover"
+          {...props}
+        />
+      </div>
+      <div className={styles.logo__back}>
+        <Logo title={logoTitle} />
+      </div>
+    </div>
+  );
+};
+
+export default FlippingLogo;
diff --git a/src/components/molecules/images/responsive-image.module.scss b/src/components/molecules/images/responsive-image.module.scss
index 83e8d10..3566421 100644
--- a/src/components/molecules/images/responsive-image.module.scss
+++ b/src/components/molecules/images/responsive-image.module.scss
@@ -5,7 +5,7 @@
   flex-flow: column;
   width: 100%;
   max-width: max-content;
-  margin: var(--spacing-sm) auto;
+  margin: 0;
   position: relative;
   text-align: center;
 }
diff --git a/src/components/molecules/images/responsive-image.stories.tsx b/src/components/molecules/images/responsive-image.stories.tsx
index f9c1d2b..a1f5295 100644
--- a/src/components/molecules/images/responsive-image.stories.tsx
+++ b/src/components/molecules/images/responsive-image.stories.tsx
@@ -1,9 +1,12 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import ResponsiveImageComponent from './responsive-image';
+import ResponsiveImage from './responsive-image';
 
+/**
+ * ResponsiveImage - Storybook Meta
+ */
 export default {
-  title: 'Molecules/Images',
-  component: ResponsiveImageComponent,
+  title: 'Molecules/Images/ResponsiveImage',
+  component: ResponsiveImage,
   argTypes: {
     alt: {
       control: {
@@ -72,16 +75,60 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof ResponsiveImageComponent>;
+} as ComponentMeta<typeof ResponsiveImage>;
 
-const Template: ComponentStory<typeof ResponsiveImageComponent> = (args) => (
-  <ResponsiveImageComponent {...args} />
+const Template: ComponentStory<typeof ResponsiveImage> = (args) => (
+  <ResponsiveImage {...args} />
 );
 
-export const ResponsiveImage = Template.bind({});
-ResponsiveImage.args = {
+/**
+ * Responsive Image Stories - Default
+ */
+export const Default = Template.bind({});
+Default.args = {
   alt: 'An example',
   src: 'http://placeimg.com/640/480/transport',
   width: 640,
   height: 480,
+  unoptimized: true,
+};
+
+/**
+ * Responsive Image Stories - With link
+ */
+export const WithLink = Template.bind({});
+WithLink.args = {
+  alt: 'An example',
+  src: 'http://placeimg.com/640/480/transport',
+  width: 640,
+  height: 480,
+  unoptimized: true,
+  target: '#',
+};
+
+/**
+ * Responsive Image Stories - With caption
+ */
+export const WithCaption = Template.bind({});
+WithCaption.args = {
+  alt: 'An example',
+  src: 'http://placeimg.com/640/480/transport',
+  width: 640,
+  height: 480,
+  caption: 'Omnis nulla labore',
+  unoptimized: true,
+};
+
+/**
+ * Responsive Image Stories - With caption and link
+ */
+export const WithCaptionAndLink = Template.bind({});
+WithCaptionAndLink.args = {
+  alt: 'An example',
+  src: 'http://placeimg.com/640/480/transport',
+  width: 640,
+  height: 480,
+  caption: 'Omnis nulla labore',
+  target: '#',
+  unoptimized: true,
 };
diff --git a/src/components/molecules/layout/branding.stories.tsx b/src/components/molecules/layout/branding.stories.tsx
index 726ba26..1637c99 100644
--- a/src/components/molecules/layout/branding.stories.tsx
+++ b/src/components/molecules/layout/branding.stories.tsx
@@ -1,10 +1,13 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { IntlProvider } from 'react-intl';
-import BrandingComponent from './branding';
+import Branding from './branding';
 
+/**
+ * Branding - Storybook Meta
+ */
 export default {
-  title: 'Molecules/Layout',
-  component: BrandingComponent,
+  title: 'Molecules/Layout/Branding',
+  component: Branding,
   args: {
     isHome: false,
   },
@@ -53,6 +56,7 @@ export default {
         required: true,
       },
     },
+    unoptimized: { table: { disable: true } },
     withLink: {
       control: {
         type: 'boolean',
@@ -68,16 +72,38 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof BrandingComponent>;
+  decorators: [
+    (Story) => (
+      <IntlProvider locale="en">
+        <Story />
+      </IntlProvider>
+    ),
+  ],
+} as ComponentMeta<typeof Branding>;
 
-const Template: ComponentStory<typeof BrandingComponent> = (args) => (
-  <IntlProvider locale="en">
-    <BrandingComponent {...args} />
-  </IntlProvider>
+const Template: ComponentStory<typeof Branding> = (args) => (
+  <Branding {...args} />
 );
 
-export const Branding = Template.bind({});
-Branding.args = {
+/**
+ * Branding Stories - Default
+ */
+export const Default = Template.bind({});
+Default.args = {
   title: 'Website title',
   photo: 'http://placeimg.com/640/480',
+  // @ts-ignore - Needed because of the placeholder image.
+  unoptimized: true,
+};
+
+/**
+ * Branding Stories - With baseline
+ */
+export const WithBaseline = Template.bind({});
+WithBaseline.args = {
+  title: 'Website title',
+  baseline: 'Maiores corporis qui',
+  photo: 'http://placeimg.com/640/480',
+  // @ts-ignore - Needed because of the placeholder image.
+  unoptimized: true,
 };
diff --git a/src/components/molecules/layout/branding.tsx b/src/components/molecules/layout/branding.tsx
index 9fe89e7..423c54f 100644
--- a/src/components/molecules/layout/branding.tsx
+++ b/src/components/molecules/layout/branding.tsx
@@ -2,8 +2,8 @@ import Heading from '@components/atoms/headings/heading';
 import Link from 'next/link';
 import { FC } from 'react';
 import { useIntl } from 'react-intl';
+import FlippingLogo, { type FlippingLogoProps } from '../images/flipping-logo';
 import styles from './branding.module.scss';
-import FlippingLogo, { type FlippingLogoProps } from './flipping-logo';
 
 export type BrandingProps = Pick<FlippingLogoProps, 'photo'> & {
   /**
@@ -35,6 +35,7 @@ const Branding: FC<BrandingProps> = ({
   photo,
   title,
   withLink = false,
+  ...props
 }) => {
   const intl = useIntl();
   const altText = intl.formatMessage(
@@ -61,6 +62,7 @@ const Branding: FC<BrandingProps> = ({
         altText={altText}
         logoTitle={logoTitle}
         photo={photo}
+        {...props}
       />
       <Heading
         isFake={!isHome}
diff --git a/src/components/molecules/layout/card.module.scss b/src/components/molecules/layout/card.module.scss
index 2b1b7dc..85c319a 100644
--- a/src/components/molecules/layout/card.module.scss
+++ b/src/components/molecules/layout/card.module.scss
@@ -17,10 +17,6 @@
     justify-content: flex-start;
   }
 
-  .footer {
-    margin-top: var(--spacing-md);
-  }
-
   .cover {
     align-self: flex-start;
     max-height: fun.convert-px(150);
@@ -46,6 +42,7 @@
 
   .tagline {
     flex: 1;
+    margin-bottom: var(--spacing-md);
     color: var(--color-fg);
     font-weight: 400;
   }
diff --git a/src/components/molecules/layout/card.stories.tsx b/src/components/molecules/layout/card.stories.tsx
index a07f8dc..ed78d00 100644
--- a/src/components/molecules/layout/card.stories.tsx
+++ b/src/components/molecules/layout/card.stories.tsx
@@ -1,9 +1,12 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import CardComponent from './card';
+import Card from './card';
 
+/**
+ * Card - Storybook Meta
+ */
 export default {
-  title: 'Molecules/Layout',
-  component: CardComponent,
+  title: 'Molecules/Layout/Card',
+  component: Card,
   argTypes: {
     cover: {
       description: 'The card cover data (src, dimensions, alternative text).',
@@ -53,6 +56,8 @@ export default {
     titleLevel: {
       control: {
         type: 'number',
+        min: 1,
+        max: 6,
       },
       description: 'The title level.',
       type: {
@@ -71,17 +76,16 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof CardComponent>;
+} as ComponentMeta<typeof Card>;
 
-const Template: ComponentStory<typeof CardComponent> = (args) => (
-  <CardComponent {...args} />
-);
+const Template: ComponentStory<typeof Card> = (args) => <Card {...args} />;
 
 const cover = {
   alt: 'A picture',
   height: 480,
   src: 'http://placeimg.com/640/480',
   width: 640,
+  unoptimized: true,
 };
 
 const meta = [
@@ -92,10 +96,57 @@ const meta = [
   },
 ];
 
-export const Card = Template.bind({});
-Card.args = {
+/**
+ * Card Stories - Default
+ */
+export const Default = Template.bind({});
+Default.args = {
+  title: 'Veritatis dicta quod',
+  titleLevel: 2,
+  url: '#',
+};
+
+/**
+ * Card Stories - With cover
+ */
+export const WithCover = Template.bind({});
+WithCover.args = {
+  cover,
+  title: 'Veritatis dicta quod',
+  titleLevel: 2,
+  url: '#',
+};
+
+/**
+ * Card Stories - With meta
+ */
+export const WithMeta = Template.bind({});
+WithMeta.args = {
+  meta,
+  title: 'Veritatis dicta quod',
+  titleLevel: 2,
+  url: '#',
+};
+
+/**
+ * Card Stories - With tagline
+ */
+export const WithTagline = Template.bind({});
+WithTagline.args = {
+  tagline: 'Ullam accusantium ipsa',
+  title: 'Veritatis dicta quod',
+  titleLevel: 2,
+  url: '#',
+};
+
+/**
+ * Card Stories - With all data
+ */
+export const WithAll = Template.bind({});
+WithAll.args = {
   cover,
   meta,
+  tagline: 'Ullam accusantium ipsa',
   title: 'Veritatis dicta quod',
   titleLevel: 2,
   url: '#',
diff --git a/src/components/molecules/layout/card.tsx b/src/components/molecules/layout/card.tsx
index 89f100e..15927e9 100644
--- a/src/components/molecules/layout/card.tsx
+++ b/src/components/molecules/layout/card.tsx
@@ -93,7 +93,7 @@ const Card: FC<CardProps> = ({
             {title}
           </Heading>
         </header>
-        <div className={styles.tagline}>{tagline}</div>
+        {tagline && <div className={styles.tagline}>{tagline}</div>}
         {meta && (
           <footer className={styles.footer}>
             <DescriptionList
diff --git a/src/components/molecules/layout/flipping-logo.module.scss b/src/components/molecules/layout/flipping-logo.module.scss
deleted file mode 100644
index 89b9499..0000000
--- a/src/components/molecules/layout/flipping-logo.module.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-
-.logo {
-  width: var(--logo-size, fun.convert-px(100));
-  height: var(--logo-size, fun.convert-px(100));
-  position: relative;
-  border-radius: 50%;
-  transform-style: preserve-3d;
-  transition: all 0.6s linear 0s;
-
-  &__front,
-  &__back {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    backface-visibility: hidden;
-    background: var(--color-bg);
-    border: fun.convert-px(2) solid var(--color-primary-dark);
-    border-radius: 50%;
-    transition: all 0.6s linear 0s;
-
-    svg,
-    img {
-      // !important is required to override next/image styles...
-      padding: fun.convert-px(2) !important;
-      border-radius: 50%;
-    }
-  }
-
-  &__front {
-    box-shadow: fun.convert-px(1) fun.convert-px(2) fun.convert-px(1) 0
-        var(--color-shadow-light),
-      fun.convert-px(2) fun.convert-px(3) fun.convert-px(3) 0
-        var(--color-shadow-light);
-  }
-
-  &__back {
-    transform: rotateY(180deg);
-  }
-
-  &:hover {
-    transform: rotateY(180deg);
-  }
-
-  &:hover & {
-    &__front {
-      box-shadow: none;
-    }
-
-    &__back {
-      box-shadow: fun.convert-px(1) fun.convert-px(2) fun.convert-px(1) 0
-          var(--color-shadow-light),
-        fun.convert-px(2) fun.convert-px(3) fun.convert-px(3) 0
-          var(--color-shadow-light);
-    }
-  }
-}
diff --git a/src/components/molecules/layout/flipping-logo.stories.tsx b/src/components/molecules/layout/flipping-logo.stories.tsx
deleted file mode 100644
index 1ac8de8..0000000
--- a/src/components/molecules/layout/flipping-logo.stories.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import FlippingLogoComponent from './flipping-logo';
-
-export default {
-  title: 'Molecules/Layout',
-  component: FlippingLogoComponent,
-  argTypes: {
-    altText: {
-      control: {
-        type: 'text',
-      },
-      description: 'Photo alternative text.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the logo wrapper.',
-      table: {
-        category: 'Options',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    logoTitle: {
-      control: {
-        type: 'text',
-      },
-      description: 'An accessible name for the logo.',
-      table: {
-        category: 'Accessibility',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    photo: {
-      control: {
-        type: 'text',
-      },
-      description: 'Photo url.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-  },
-} as ComponentMeta<typeof FlippingLogoComponent>;
-
-const Template: ComponentStory<typeof FlippingLogoComponent> = (args) => (
-  <FlippingLogoComponent {...args} />
-);
-
-export const FlippingLogo = Template.bind({});
-FlippingLogo.args = {
-  altText: 'Website picture',
-  logoTitle: 'Website logo',
-  photo: 'http://placeimg.com/640/480',
-};
diff --git a/src/components/molecules/layout/flipping-logo.test.tsx b/src/components/molecules/layout/flipping-logo.test.tsx
deleted file mode 100644
index 806fdbe..0000000
--- a/src/components/molecules/layout/flipping-logo.test.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { render, screen } from '@test-utils';
-import FlippingLogo from './flipping-logo';
-
-describe('FlippingLogo', () => {
-  it('renders a photo', () => {
-    render(
-      <FlippingLogo
-        altText="Alternative text"
-        photo="http://placeimg.com/640/480"
-      />
-    );
-    expect(screen.getByAltText('Alternative text')).toBeInTheDocument();
-  });
-
-  it('renders a logo', () => {
-    render(
-      <FlippingLogo
-        altText="Alternative text"
-        logoTitle="A logo title"
-        photo="http://placeimg.com/640/480"
-      />
-    );
-    expect(screen.getByTitle('A logo title')).toBeInTheDocument();
-  });
-});
diff --git a/src/components/molecules/layout/flipping-logo.tsx b/src/components/molecules/layout/flipping-logo.tsx
deleted file mode 100644
index 4a216ef..0000000
--- a/src/components/molecules/layout/flipping-logo.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import Logo, { type LogoProps } from '@components/atoms/images/logo';
-import Image from 'next/image';
-import { FC } from 'react';
-import styles from './flipping-logo.module.scss';
-
-export type FlippingLogoProps = {
-  /**
-   * Set additional classnames to the logo wrapper.
-   */
-  className?: string;
-  /**
-   * Photo alternative text.
-   */
-  altText: string;
-  /**
-   * Logo image title.
-   */
-  logoTitle?: LogoProps['title'];
-  /**
-   * Photo url.
-   */
-  photo: string;
-};
-
-/**
- * FlippingLogo component
- *
- * Render a logo and a photo with a flipping effect.
- */
-const FlippingLogo: FC<FlippingLogoProps> = ({
-  className = '',
-  altText,
-  logoTitle,
-  photo,
-}) => {
-  return (
-    <div className={`${styles.logo} ${className}`}>
-      <div className={styles.logo__front}>
-        <Image src={photo} alt={altText} layout="fill" objectFit="cover" />
-      </div>
-      <div className={styles.logo__back}>
-        <Logo title={logoTitle} />
-      </div>
-    </div>
-  );
-};
-
-export default FlippingLogo;
diff --git a/src/components/molecules/layout/meta.stories.tsx b/src/components/molecules/layout/meta.stories.tsx
index e7a932d..0323f90 100644
--- a/src/components/molecules/layout/meta.stories.tsx
+++ b/src/components/molecules/layout/meta.stories.tsx
@@ -1,6 +1,9 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import MetaComponent from './meta';
 
+/**
+ * Meta - Storybook Meta
+ */
 export default {
   title: 'Molecules/Layout',
   component: MetaComponent,
@@ -18,10 +21,7 @@ export default {
         required: false,
       },
     },
-    meta: {
-      control: {
-        type: null,
-      },
+    data: {
       description: 'The page metadata.',
       type: {
         name: 'object',
@@ -51,6 +51,9 @@ const data = {
   },
 };
 
+/**
+ * Layout Stories - Meta
+ */
 export const Meta = Template.bind({});
 Meta.args = {
   data,
diff --git a/src/components/molecules/layout/widget.module.scss b/src/components/molecules/layout/widget.module.scss
index 727ffb7..5854206 100644
--- a/src/components/molecules/layout/widget.module.scss
+++ b/src/components/molecules/layout/widget.module.scss
@@ -5,9 +5,14 @@
   flex-flow: column;
 
   &__header {
+    z-index: 2;
     background: var(--color-bg);
   }
 
+  &__body {
+    position: relative;
+  }
+
   &--has-borders & {
     &__body {
       border: fun.convert-px(2) solid var(--color-primary-dark);
diff --git a/src/components/molecules/layout/widget.stories.tsx b/src/components/molecules/layout/widget.stories.tsx
index d79f66e..c113db9 100644
--- a/src/components/molecules/layout/widget.stories.tsx
+++ b/src/components/molecules/layout/widget.stories.tsx
@@ -1,12 +1,14 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { IntlProvider } from 'react-intl';
-import WidgetComponent from './widget';
+import Widget from './widget';
 
+/**
+ * Widget - Storybook Meta
+ */
 export default {
-  title: 'Molecules/Layout',
-  component: WidgetComponent,
+  title: 'Molecules/Layout/Widget',
+  component: Widget,
   args: {
-    expanded: true,
     withBorders: false,
   },
   argTypes: {
@@ -37,6 +39,8 @@ export default {
     level: {
       control: {
         type: 'number',
+        min: 1,
+        max: 6,
       },
       description: 'The heading level.',
       type: {
@@ -69,17 +73,35 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof WidgetComponent>;
+  decorators: [
+    (Story) => (
+      <IntlProvider locale="en">
+        <Story />
+      </IntlProvider>
+    ),
+  ],
+} as ComponentMeta<typeof Widget>;
 
-const Template: ComponentStory<typeof WidgetComponent> = (args) => (
-  <IntlProvider locale="en">
-    <WidgetComponent {...args} />
-  </IntlProvider>
-);
+const Template: ComponentStory<typeof Widget> = (args) => <Widget {...args} />;
 
-export const Widget = Template.bind({});
-Widget.args = {
+/**
+ * Widget Stories - Expanded
+ */
+export const Expanded = Template.bind({});
+Expanded.args = {
   children: 'Widget body',
+  expanded: true,
+  level: 2,
+  title: 'Widget title',
+};
+
+/**
+ * Widget Stories - Collapsed
+ */
+export const Collapsed = Template.bind({});
+Collapsed.args = {
+  children: 'Widget body',
+  expanded: false,
   level: 2,
   title: 'Widget title',
 };
diff --git a/src/components/molecules/modals/modal.stories.tsx b/src/components/molecules/modals/modal.stories.tsx
index bd7d9f4..55b7677 100644
--- a/src/components/molecules/modals/modal.stories.tsx
+++ b/src/components/molecules/modals/modal.stories.tsx
@@ -1,9 +1,12 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import ModalComponent from './modal';
+import Modal from './modal';
 
+/**
+ * Widget - Storybook Meta
+ */
 export default {
-  title: 'Molecules/Modals',
-  component: ModalComponent,
+  title: 'Molecules/Modals/Modal',
+  component: Modal,
   argTypes: {
     children: {
       control: {
@@ -56,14 +59,25 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof ModalComponent>;
+} as ComponentMeta<typeof Modal>;
 
-const Template: ComponentStory<typeof ModalComponent> = (args) => (
-  <ModalComponent {...args} />
-);
+const Template: ComponentStory<typeof Modal> = (args) => <Modal {...args} />;
 
-export const Modal = Template.bind({});
-Modal.args = {
+/**
+ * Modal Stories - Default
+ */
+export const Default = Template.bind({});
+Default.args = {
   children:
     'Inventore natus dignissimos aut illum modi asperiores. Et voluptatibus delectus.',
 };
+
+/**
+ * Modal Stories - With title
+ */
+export const WithTitle = Template.bind({});
+WithTitle.args = {
+  children:
+    'Inventore natus dignissimos aut illum modi asperiores. Et voluptatibus delectus.',
+  title: 'Alias praesentium corporis',
+};
diff --git a/src/components/molecules/modals/tooltip.stories.tsx b/src/components/molecules/modals/tooltip.stories.tsx
index 63fc71d..06a4855 100644
--- a/src/components/molecules/modals/tooltip.stories.tsx
+++ b/src/components/molecules/modals/tooltip.stories.tsx
@@ -1,9 +1,12 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import TooltipComponent from './tooltip';
+import Tooltip from './tooltip';
 
+/**
+ * Tooltip - Storybook Meta
+ */
 export default {
-  title: 'Molecules/Modals',
-  component: TooltipComponent,
+  title: 'Molecules/Modals/Tooltip',
+  component: Tooltip,
   argTypes: {
     className: {
       control: {
@@ -49,14 +52,17 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof TooltipComponent>;
+} as ComponentMeta<typeof Tooltip>;
 
-const Template: ComponentStory<typeof TooltipComponent> = (args) => (
-  <TooltipComponent {...args} />
+const Template: ComponentStory<typeof Tooltip> = (args) => (
+  <Tooltip {...args} />
 );
 
-export const Tooltip = Template.bind({});
-Tooltip.args = {
+/**
+ * Tooltip Stories - Help
+ */
+export const Help = Template.bind({});
+Help.args = {
   content:
     'Minima tempora fuga omnis ratione doloribus ut. Totam ea vitae consequatur. Fuga hic ipsum. In non debitis ex assumenda ut dicta. Sit ut maxime eligendi est.',
   icon: '?',
diff --git a/src/components/molecules/nav/breadcrumb.stories.tsx b/src/components/molecules/nav/breadcrumb.stories.tsx
index d283619..500ae6c 100644
--- a/src/components/molecules/nav/breadcrumb.stories.tsx
+++ b/src/components/molecules/nav/breadcrumb.stories.tsx
@@ -1,10 +1,13 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { IntlProvider } from 'react-intl';
-import BreadcrumbComponent, { type BreadcrumbItem } from './breadcrumb';
+import Breadcrumb from './breadcrumb';
 
+/**
+ * Breadcrumb - Storybook Meta
+ */
 export default {
-  title: 'Molecules/Nav',
-  component: BreadcrumbComponent,
+  title: 'Molecules/Navigation/Breadcrumb',
+  component: Breadcrumb,
   argTypes: {
     className: {
       control: {
@@ -28,21 +31,46 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof BreadcrumbComponent>;
+  decorators: [
+    (Story) => (
+      <IntlProvider locale="en">
+        <Story />
+      </IntlProvider>
+    ),
+  ],
+} as ComponentMeta<typeof Breadcrumb>;
 
-const Template: ComponentStory<typeof BreadcrumbComponent> = (args) => (
-  <IntlProvider locale="en">
-    <BreadcrumbComponent {...args} />
-  </IntlProvider>
+const Template: ComponentStory<typeof Breadcrumb> = (args) => (
+  <Breadcrumb {...args} />
 );
 
-const items: BreadcrumbItem[] = [
-  { id: 'home', url: '#', name: 'Home' },
-  { id: 'blog', url: '#', name: 'Blog' },
-  { id: 'post1', url: '#', name: 'A Post' },
-];
+/**
+ * Breadcrumb Stories - One item
+ */
+export const OneItem = Template.bind({});
+OneItem.args = {
+  items: [{ id: 'home', url: '#', name: 'Home' }],
+};
+
+/**
+ * Breadcrumb Stories - Two items
+ */
+export const TwoItems = Template.bind({});
+TwoItems.args = {
+  items: [
+    { id: 'home', url: '#', name: 'Home' },
+    { id: 'blog', url: '#', name: 'Blog' },
+  ],
+};
 
-export const Breadcrumb = Template.bind({});
-Breadcrumb.args = {
-  items,
+/**
+ * Breadcrumb Stories - Three items
+ */
+export const ThreeItems = Template.bind({});
+ThreeItems.args = {
+  items: [
+    { id: 'home', url: '#', name: 'Home' },
+    { id: 'blog', url: '#', name: 'Blog' },
+    { id: 'post1', url: '#', name: 'A Post' },
+  ],
 };
diff --git a/src/components/molecules/nav/nav.stories.tsx b/src/components/molecules/nav/nav.stories.tsx
index 9975bbd..25455fd 100644
--- a/src/components/molecules/nav/nav.stories.tsx
+++ b/src/components/molecules/nav/nav.stories.tsx
@@ -4,18 +4,11 @@ import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { IntlProvider } from 'react-intl';
 import NavComponent, { type NavItem } from './nav';
 
-const MainNavItems: NavItem[] = [
-  { id: 'homeLink', href: '/', label: 'Home', logo: <Home /> },
-  { id: 'contactLink', href: '/contact', label: 'Contact', logo: <Envelop /> },
-];
-
-const FooterNavItems: NavItem[] = [
-  { id: 'contactLink', href: '/contact', label: 'Contact' },
-  { id: 'legalLink', href: '/legal-notice', label: 'Legal notice' },
-];
-
+/**
+ * Nav - Storybook Meta
+ */
 export default {
-  title: 'Molecules/Nav',
+  title: 'Molecules/Navigation/Nav',
   component: NavComponent,
   argTypes: {
     className: {
@@ -54,20 +47,41 @@ export default {
       },
     },
   },
+  decorators: [
+    (Story) => (
+      <IntlProvider locale="en">
+        <Story />
+      </IntlProvider>
+    ),
+  ],
 } as ComponentMeta<typeof NavComponent>;
 
 const Template: ComponentStory<typeof NavComponent> = (args) => (
-  <IntlProvider locale="en">
-    <NavComponent {...args} />
-  </IntlProvider>
+  <NavComponent {...args} />
 );
 
+const MainNavItems: NavItem[] = [
+  { id: 'homeLink', href: '/', label: 'Home', logo: <Home /> },
+  { id: 'contactLink', href: '/contact', label: 'Contact', logo: <Envelop /> },
+];
+
+const FooterNavItems: NavItem[] = [
+  { id: 'contactLink', href: '/contact', label: 'Contact' },
+  { id: 'legalLink', href: '/legal-notice', label: 'Legal notice' },
+];
+
+/**
+ * Nav Stories - Main navigation
+ */
 export const MainNav = Template.bind({});
 MainNav.args = {
   items: MainNavItems,
   kind: 'main',
 };
 
+/**
+ * Nav Stories - Footer navigation
+ */
 export const FooterNav = Template.bind({});
 FooterNav.args = {
   items: FooterNavItems,
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,
-- 
cgit v1.2.3


From 947a06bfdfdc5bca62c27fa2ee27f0ab9fefa0ea Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 22 Apr 2022 18:33:04 +0200
Subject: chore: add a TableOfContents component

---
 .../widgets/table-of-contents.stories.tsx          |  41 ++++++
 .../organisms/widgets/table-of-contents.test.tsx   |  12 ++
 .../organisms/widgets/table-of-contents.tsx        |  53 +++++++
 src/utils/hooks/use-headings-tree.tsx              | 153 +++++++++++++++++++++
 4 files changed, 259 insertions(+)
 create mode 100644 src/components/organisms/widgets/table-of-contents.stories.tsx
 create mode 100644 src/components/organisms/widgets/table-of-contents.test.tsx
 create mode 100644 src/components/organisms/widgets/table-of-contents.tsx
 create mode 100644 src/utils/hooks/use-headings-tree.tsx

(limited to 'src/components/organisms/widgets')

diff --git a/src/components/organisms/widgets/table-of-contents.stories.tsx b/src/components/organisms/widgets/table-of-contents.stories.tsx
new file mode 100644
index 0000000..fba7c54
--- /dev/null
+++ b/src/components/organisms/widgets/table-of-contents.stories.tsx
@@ -0,0 +1,41 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { IntlProvider } from 'react-intl';
+import ToCWidget from './table-of-contents';
+
+/**
+ * TableOfContents - Storybook Meta
+ */
+export default {
+  title: 'Organisms/Widgets',
+  component: ToCWidget,
+  argTypes: {
+    wrapper: {
+      control: {
+        type: null,
+      },
+      description:
+        'A reference to the HTML element that contains the headings.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <IntlProvider locale="en">
+        <Story />
+      </IntlProvider>
+    ),
+  ],
+} as ComponentMeta<typeof ToCWidget>;
+
+const Template: ComponentStory<typeof ToCWidget> = (args) => (
+  <ToCWidget {...args} />
+);
+
+/**
+ * Widgets Stories - Table of Contents
+ */
+export const TableOfContents = Template.bind({});
+TableOfContents.args = {};
diff --git a/src/components/organisms/widgets/table-of-contents.test.tsx b/src/components/organisms/widgets/table-of-contents.test.tsx
new file mode 100644
index 0000000..2064f39
--- /dev/null
+++ b/src/components/organisms/widgets/table-of-contents.test.tsx
@@ -0,0 +1,12 @@
+import { render, screen } from '@test-utils';
+import TableOfContents from './table-of-contents';
+
+describe('TableOfContents', () => {
+  it('renders the ToC title', () => {
+    const divEl = document.createElement('div');
+    render(<TableOfContents wrapper={divEl} />);
+    expect(
+      screen.getByRole('heading', { level: 2, name: /Table of Contents/i })
+    ).toBeInTheDocument();
+  });
+});
diff --git a/src/components/organisms/widgets/table-of-contents.tsx b/src/components/organisms/widgets/table-of-contents.tsx
new file mode 100644
index 0000000..3778e02
--- /dev/null
+++ b/src/components/organisms/widgets/table-of-contents.tsx
@@ -0,0 +1,53 @@
+import useHeadingsTree, { type Heading } from '@utils/hooks/use-headings-tree';
+import { FC } from 'react';
+import { useIntl } from 'react-intl';
+import LinksListWidget, { type LinksListItems } from './links-list-widget';
+
+type TableOfContentsProps = {
+  /**
+   * A reference to the HTML element that contains the headings.
+   */
+  wrapper: HTMLElement;
+};
+
+/**
+ * Table of Contents widget component
+ *
+ * Render a table of contents.
+ */
+const TableOfContents: FC<TableOfContentsProps> = ({ wrapper }) => {
+  const intl = useIntl();
+  const headingsTree = useHeadingsTree(wrapper);
+  const title = intl.formatMessage({
+    defaultMessage: 'Table of Contents',
+    description: 'TableOfContents: the widget title',
+    id: 'WKG9wj',
+  });
+
+  /**
+   * Convert an headings tree to list items.
+   *
+   * @param {Heading[]} tree - The headings tree.
+   * @returns {LinksListItems[]} The list items.
+   */
+  const getItems = (tree: Heading[]): LinksListItems[] => {
+    return tree.map((heading) => {
+      return {
+        name: heading.title,
+        url: `#${heading.id}`,
+        child: getItems(heading.children),
+      };
+    });
+  };
+
+  return (
+    <LinksListWidget
+      kind="ordered"
+      title={title}
+      level={2}
+      items={getItems(headingsTree)}
+    />
+  );
+};
+
+export default TableOfContents;
diff --git a/src/utils/hooks/use-headings-tree.tsx b/src/utils/hooks/use-headings-tree.tsx
new file mode 100644
index 0000000..5506e8b
--- /dev/null
+++ b/src/utils/hooks/use-headings-tree.tsx
@@ -0,0 +1,153 @@
+import { slugify } from '@utils/helpers/slugify';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+export type Heading = {
+  /**
+   * The heading depth.
+   */
+  depth: number;
+  /**
+   * The heading id.
+   */
+  id: string;
+  /**
+   * The heading children.
+   */
+  children: Heading[];
+  /**
+   * The heading title.
+   */
+  title: string;
+};
+
+/**
+ * Get the headings tree of the given HTML element.
+ *
+ * @param {HTMLElement} wrapper - An HTML element that contains the headings.
+ * @returns {Heading[]} The headings tree.
+ */
+const useHeadingsTree = (wrapper: HTMLElement): Heading[] => {
+  const depths = useMemo(() => ['h2', 'h3', 'h4', 'h5', 'h6'], []);
+  const [allHeadings, setAllHeadings] =
+    useState<NodeListOf<HTMLHeadingElement>>();
+  const [headingsTree, setHeadingsTree] = useState<Heading[]>([]);
+
+  useEffect(() => {
+    const query = depths.join(', ');
+    const result: NodeListOf<HTMLHeadingElement> =
+      wrapper.querySelectorAll(query);
+    setAllHeadings(result);
+  }, [depths, wrapper]);
+
+  const getDepth = useCallback(
+    /**
+     * Retrieve the heading element depth.
+     *
+     * @param {HTMLHeadingElement} el - An heading element.
+     * @returns {number} The heading depth.
+     */
+    (el: HTMLHeadingElement): number => {
+      return depths.findIndex((depth) => depth === el.localName);
+    },
+    [depths]
+  );
+
+  const formatHeadings = useCallback(
+    /**
+     * Convert a list of headings into an array of Heading objects.
+     *
+     * @param {NodeListOf<HTMLHeadingElement>} headings - A list of headings.
+     * @returns {Heading[]} An array of Heading objects.
+     */
+    (headings: NodeListOf<HTMLHeadingElement>): Heading[] => {
+      const formattedHeadings: Heading[] = [];
+
+      Array.from(headings).forEach((heading) => {
+        const title: string = heading.textContent!;
+        const id = slugify(title);
+        const depth = getDepth(heading);
+        const children: Heading[] = [];
+
+        heading.id = id;
+
+        formattedHeadings.push({
+          depth,
+          id,
+          children,
+          title,
+        });
+      });
+
+      return formattedHeadings;
+    },
+    [getDepth]
+  );
+
+  const buildSubTree = useCallback(
+    /**
+     * Build the heading subtree.
+     *
+     * @param {Heading} parent - The heading parent.
+     * @param {Heading} currentHeading - The current heading element.
+     */
+    (parent: Heading, currentHeading: Heading): void => {
+      if (parent.depth === currentHeading.depth - 1) {
+        parent.children.push(currentHeading);
+      } else {
+        const lastItem = parent.children[parent.children.length - 1];
+        buildSubTree(lastItem, currentHeading);
+      }
+    },
+    []
+  );
+
+  const buildTree = useCallback(
+    /**
+     * Build a heading tree.
+     *
+     * @param {Heading[]} headings - An array of Heading objects.
+     * @returns {Heading[]} The headings tree.
+     */
+    (headings: Heading[]): Heading[] => {
+      const tree: Heading[] = [];
+
+      headings.forEach((heading) => {
+        if (heading.depth === 0) {
+          tree.push(heading);
+        } else {
+          const lastItem = tree[tree.length - 1];
+          buildSubTree(lastItem, heading);
+        }
+      });
+
+      return tree;
+    },
+    [buildSubTree]
+  );
+
+  const getHeadingsTree = useCallback(
+    /**
+     * Retrieve a headings tree from a list of headings element.
+     *
+     * @param {NodeListOf<HTMLHeadingElement>} headings - A headings list.
+     * @returns {Heading[]} The headings tree.
+     */
+    (headings: NodeListOf<HTMLHeadingElement>): Heading[] => {
+      const formattedHeadings = formatHeadings(headings);
+
+      return buildTree(formattedHeadings);
+    },
+    [formatHeadings, buildTree]
+  );
+
+  useEffect(() => {
+    if (allHeadings) {
+      const headingsList = getHeadingsTree(allHeadings);
+      setHeadingsTree(headingsList);
+    }
+  }, [allHeadings, getHeadingsTree]);
+
+  return headingsTree;
+};
+
+export default useHeadingsTree;
-- 
cgit v1.2.3


From 83a029084f1bbfd78b7099d9bea3371d4533c6d9 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 3 May 2022 16:51:22 +0200
Subject: chore: add a LegalNotice page

---
 mdx.d.ts                                           |  10 +-
 .../molecules/buttons/heading-button.module.scss   |   4 +-
 src/components/molecules/layout/meta.module.scss   |   8 +-
 .../molecules/layout/page-header.module.scss       |   7 +-
 .../widgets/links-list-widget.module.scss          |  10 +-
 .../organisms/widgets/links-list-widget.tsx        |   5 +-
 .../widgets/table-of-contents.module.scss          |   4 +
 .../organisms/widgets/table-of-contents.tsx        |   2 +
 src/pages/mentions-legales.tsx                     | 140 +++++++++++++++++++++
 src/ts/types/app.ts                                |  16 ++-
 src/ts/types/mdx.ts                                |  20 +++
 src/ts/types/raw-data.ts                           |   6 +-
 src/utils/helpers/author.ts                        |  10 +-
 13 files changed, 209 insertions(+), 33 deletions(-)
 create mode 100644 src/components/organisms/widgets/table-of-contents.module.scss
 create mode 100644 src/pages/mentions-legales.tsx
 create mode 100644 src/ts/types/mdx.ts

(limited to 'src/components/organisms/widgets')

diff --git a/mdx.d.ts b/mdx.d.ts
index f3a9a90..b4e333d 100644
--- a/mdx.d.ts
+++ b/mdx.d.ts
@@ -1,13 +1,9 @@
 declare module '*.mdx' {
+  import { MDXData, MDXPageMeta, MDXProjectMeta } from '@ts/types/mdx';
   import { MDXProps } from 'mdx/types';
-  import { Meta } from '@ts/types/app';
 
   let MDXComponent: (props: MDXProps) => JSX.Element;
   export default MDXComponent;
-  export const cover: string;
-  export const image: string;
-  export const intro: string;
-  export const meta: Meta;
-  export const pdf: string;
-  export const seo: { title: string; description: string };
+  export const data: MDXData;
+  export const meta: MDXPageMeta | MDXProjectMeta;
 }
diff --git a/src/components/molecules/buttons/heading-button.module.scss b/src/components/molecules/buttons/heading-button.module.scss
index 1d16410..9c278e4 100644
--- a/src/components/molecules/buttons/heading-button.module.scss
+++ b/src/components/molecules/buttons/heading-button.module.scss
@@ -36,6 +36,8 @@
 }
 
 .heading {
-  background: none;
   padding: var(--spacing-2xs) 0;
+  background: none;
+  font-size: var(--font-size-xl);
+  text-align: left;
 }
diff --git a/src/components/molecules/layout/meta.module.scss b/src/components/molecules/layout/meta.module.scss
index f7cc55b..0485545 100644
--- a/src/components/molecules/layout/meta.module.scss
+++ b/src/components/molecules/layout/meta.module.scss
@@ -2,12 +2,18 @@
 
 .list {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: var(--spacing-sm);
 
   @include mix.media("screen") {
+    @include mix.dimensions("2xs") {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
     @include mix.dimensions("sm") {
       display: flex;
       flex-flow: column nowrap;
+      gap: var(--spacing-2xs);
     }
   }
 }
diff --git a/src/components/molecules/layout/page-header.module.scss b/src/components/molecules/layout/page-header.module.scss
index 93f7595..4c7df5f 100644
--- a/src/components/molecules/layout/page-header.module.scss
+++ b/src/components/molecules/layout/page-header.module.scss
@@ -1,5 +1,4 @@
 @use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
 @use "@styles/abstracts/placeholders";
 
 .wrapper {
@@ -55,9 +54,5 @@
 }
 
 .meta {
-  @include mix.media("screen") {
-    @include mix.dimensions("xs") {
-      font-size: var(--font-size-sm);
-    }
-  }
+  font-size: var(--font-size-sm);
 }
diff --git a/src/components/organisms/widgets/links-list-widget.module.scss b/src/components/organisms/widgets/links-list-widget.module.scss
index cbad83e..4444df4 100644
--- a/src/components/organisms/widgets/links-list-widget.module.scss
+++ b/src/components/organisms/widgets/links-list-widget.module.scss
@@ -3,6 +3,12 @@
 
 .widget {
   .list {
+    .list {
+      > *:first-child {
+        border-top: fun.convert-px(1) solid var(--color-primary);
+      }
+    }
+
     &__link {
       display: block;
       padding: var(--spacing-2xs) var(--spacing-xs);
@@ -50,9 +56,7 @@
 
     &__item {
       &:not(:last-child) {
-        .list__link {
-          border-bottom: fun.convert-px(1) solid var(--color-primary);
-        }
+        border-bottom: fun.convert-px(1) solid var(--color-primary);
       }
 
       > .list {
diff --git a/src/components/organisms/widgets/links-list-widget.tsx b/src/components/organisms/widgets/links-list-widget.tsx
index 559d0b6..37a20fc 100644
--- a/src/components/organisms/widgets/links-list-widget.tsx
+++ b/src/components/organisms/widgets/links-list-widget.tsx
@@ -24,7 +24,7 @@ export type LinksListItems = {
 };
 
 export type LinksListWidgetProps = Pick<WidgetProps, 'level' | 'title'> &
-  Pick<ListProps, 'kind'> & {
+  Pick<ListProps, 'className' | 'kind'> & {
     /**
      * An array of name/url couple.
      */
@@ -37,6 +37,7 @@ export type LinksListWidgetProps = Pick<WidgetProps, 'level' | 'title'> &
  * Render a list of links inside a widget.
  */
 const LinksListWidget: FC<LinksListWidgetProps> = ({
+  className = '',
   items,
   kind = 'unordered',
   ...props
@@ -74,7 +75,7 @@ const LinksListWidget: FC<LinksListWidgetProps> = ({
         items={getListItems(items)}
         kind={kind}
         withMargin={false}
-        className={`${styles.list} ${styles[listKindClass]}`}
+        className={`${styles.list} ${styles[listKindClass]} ${className}`}
         itemsClassName={styles.list__item}
       />
     </Widget>
diff --git a/src/components/organisms/widgets/table-of-contents.module.scss b/src/components/organisms/widgets/table-of-contents.module.scss
new file mode 100644
index 0000000..36217ed
--- /dev/null
+++ b/src/components/organisms/widgets/table-of-contents.module.scss
@@ -0,0 +1,4 @@
+.list {
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+}
diff --git a/src/components/organisms/widgets/table-of-contents.tsx b/src/components/organisms/widgets/table-of-contents.tsx
index 3778e02..800ff58 100644
--- a/src/components/organisms/widgets/table-of-contents.tsx
+++ b/src/components/organisms/widgets/table-of-contents.tsx
@@ -2,6 +2,7 @@ import useHeadingsTree, { type Heading } from '@utils/hooks/use-headings-tree';
 import { FC } from 'react';
 import { useIntl } from 'react-intl';
 import LinksListWidget, { type LinksListItems } from './links-list-widget';
+import styles from './table-of-contents.module.scss';
 
 type TableOfContentsProps = {
   /**
@@ -46,6 +47,7 @@ const TableOfContents: FC<TableOfContentsProps> = ({ wrapper }) => {
       title={title}
       level={2}
       items={getItems(headingsTree)}
+      className={styles.list}
     />
   );
 };
diff --git a/src/pages/mentions-legales.tsx b/src/pages/mentions-legales.tsx
new file mode 100644
index 0000000..8dd0a1d
--- /dev/null
+++ b/src/pages/mentions-legales.tsx
@@ -0,0 +1,140 @@
+import Link from '@components/atoms/links/link';
+import ResponsiveImage from '@components/molecules/images/responsive-image';
+import { type BreadcrumbItem } from '@components/molecules/nav/breadcrumb';
+import PageLayout, {
+  type PageLayoutProps,
+} from '@components/templates/page/page-layout';
+import LegalNoticeContent, { meta } from '@content/pages/legal-notice.mdx';
+import { getFormattedDate } from '@utils/helpers/dates';
+import { loadTranslation } from '@utils/helpers/i18n';
+import useSettings from '@utils/hooks/use-settings';
+import { NestedMDXComponents } from 'mdx/types';
+import { GetStaticProps, NextPage } from 'next';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+import Script from 'next/script';
+import { useIntl } from 'react-intl';
+import { Article, Graph, WebPage } from 'schema-dts';
+
+/**
+ * Legal Notice page.
+ */
+const LegalNoticePage: NextPage = () => {
+  const intl = useIntl();
+  const { dates, intro, seo, title } = meta;
+  const homeLabel = intl.formatMessage({
+    defaultMessage: 'Home',
+    description: 'Breadcrumb: home label',
+    id: 'j5k9Fe',
+  });
+  const breadcrumb: BreadcrumbItem[] = [
+    { id: 'home', name: homeLabel, url: '/' },
+    { id: 'legal-notice', name: title, url: '/mentions-legales' },
+  ];
+
+  const publicationLabel = intl.formatMessage({
+    defaultMessage: 'Published on:',
+    description: 'Meta: publication date label',
+    id: 'QGi5uD',
+  });
+
+  const updateLabel = intl.formatMessage({
+    defaultMessage: 'Updated on:',
+    description: 'Meta: update date label',
+    id: 'tLC7bh',
+  });
+
+  const headerMeta: PageLayoutProps['headerMeta'] = {
+    publication: {
+      name: publicationLabel,
+      value: getFormattedDate(dates.publication),
+    },
+    update: { name: updateLabel, value: getFormattedDate(dates.update) },
+  };
+
+  const components: NestedMDXComponents = {
+    Image: (props) => <ResponsiveImage {...props} />,
+    Link: (props) => <Link {...props} />,
+  };
+
+  const { website } = useSettings();
+  const { asPath } = useRouter();
+  const pageUrl = `${website.url}${asPath}`;
+  const pagePublicationDate = new Date(dates.publication);
+  const pageUpdateDate = new Date(dates.update);
+
+  const webpageSchema: WebPage = {
+    '@id': `${pageUrl}`,
+    '@type': 'WebPage',
+    breadcrumb: { '@id': `${website.url}/#breadcrumb` },
+    name: seo.title,
+    description: seo.description,
+    inLanguage: website.locales.default,
+    license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
+    reviewedBy: { '@id': `${website.url}/#branding` },
+    url: `${pageUrl}`,
+    isPartOf: {
+      '@id': `${website.url}`,
+    },
+  };
+
+  const articleSchema: Article = {
+    '@id': `${website.url}/#legal-notice`,
+    '@type': 'Article',
+    name: title,
+    description: intro,
+    author: { '@id': `${website.url}/#branding` },
+    copyrightYear: pagePublicationDate.getFullYear(),
+    creator: { '@id': `${website.url}/#branding` },
+    dateCreated: pagePublicationDate.toISOString(),
+    dateModified: pageUpdateDate.toISOString(),
+    datePublished: pagePublicationDate.toISOString(),
+    editor: { '@id': `${website.url}/#branding` },
+    headline: title,
+    inLanguage: website.locales.default,
+    license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
+    mainEntityOfPage: { '@id': `${pageUrl}` },
+  };
+
+  const schemaJsonLd: Graph = {
+    '@context': 'https://schema.org',
+    '@graph': [webpageSchema, articleSchema],
+  };
+
+  return (
+    <PageLayout
+      title={title}
+      intro={intro}
+      headerMeta={headerMeta}
+      breadcrumb={breadcrumb}
+      withToC={true}
+    >
+      <Head>
+        <title>{`${seo.title} - ${website.name}`}</title>
+        <meta name="description" content={seo.description} />
+        <meta property="og:url" content={`${pageUrl}`} />
+        <meta property="og:type" content="article" />
+        <meta property="og:title" content={`${seo.title} - ${website.name}`} />
+        <meta property="og:description" content={intro} />
+      </Head>
+      <Script
+        id="schema-legal-notice"
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
+      />
+      <LegalNoticeContent components={components} />
+    </PageLayout>
+  );
+};
+
+export const getStaticProps: GetStaticProps = async ({ locale }) => {
+  const translation = await loadTranslation(locale);
+
+  return {
+    props: {
+      translation,
+    },
+  };
+};
+
+export default LegalNoticePage;
diff --git a/src/ts/types/app.ts b/src/ts/types/app.ts
index b09f3d5..4d9c71c 100644
--- a/src/ts/types/app.ts
+++ b/src/ts/types/app.ts
@@ -1,8 +1,14 @@
-export type AuthorKind = 'page' | 'comment';
+export type ContentKind =
+  | 'article'
+  | 'comment'
+  | 'page'
+  | 'project'
+  | 'thematic'
+  | 'topic';
 
-export type Author<T extends AuthorKind> = {
+export type Author<T extends ContentKind> = {
   avatar?: Image;
-  description?: T extends 'page' ? string | undefined : never;
+  description?: T extends 'comment' ? never : string;
   name: string;
   website?: string;
 };
@@ -44,11 +50,11 @@ export type SEO = {
   title: string;
 };
 
-export type PageKind = 'article' | 'project' | 'thematic' | 'topic';
+export type PageKind = Exclude<ContentKind, 'comment'>;
 
 export type Meta<T extends PageKind> = {
   articles?: T extends 'thematic' | 'topic' ? Article[] : never;
-  author: Author<'page'>;
+  author?: T extends 'article' | 'page' ? Author<T> : never;
   commentsCount?: T extends 'article' ? number : never;
   cover?: Image;
   dates: Dates;
diff --git a/src/ts/types/mdx.ts b/src/ts/types/mdx.ts
new file mode 100644
index 0000000..6b72f21
--- /dev/null
+++ b/src/ts/types/mdx.ts
@@ -0,0 +1,20 @@
+import { StaticImageData } from 'next/image';
+import { Meta } from './app';
+
+export type MDXData = {
+  file: string;
+  image: StaticImageData;
+};
+
+export type MDXPageMeta = Pick<Meta<'page'>, 'cover' | 'dates' | 'seo'> & {
+  intro: string;
+  title: string;
+};
+
+export type MDXProjectMeta = Omit<
+  Meta<'project'>,
+  'readingTime' | 'wordsCount'
+> & {
+  intro: string;
+  title: string;
+};
diff --git a/src/ts/types/raw-data.ts b/src/ts/types/raw-data.ts
index 43a2453..7e12e7f 100644
--- a/src/ts/types/raw-data.ts
+++ b/src/ts/types/raw-data.ts
@@ -3,7 +3,7 @@
  */
 
 import { NodeResponse, PageInfo } from '@services/graphql/api';
-import { AuthorKind } from './app';
+import { ContentKind } from './app';
 
 export type ACFPosts = {
   postsInThematic?: RawThematicPreview[];
@@ -29,8 +29,8 @@ export type Info = {
   wordsCount: number;
 };
 
-export type RawAuthor<T extends AuthorKind> = {
-  description?: T extends 'page' ? string | undefined : never;
+export type RawAuthor<T extends ContentKind> = {
+  description?: T extends 'comment' ? never : string;
   gravatarUrl?: string;
   name: string;
   url?: string;
diff --git a/src/utils/helpers/author.ts b/src/utils/helpers/author.ts
index cf125fc..40743ca 100644
--- a/src/utils/helpers/author.ts
+++ b/src/utils/helpers/author.ts
@@ -1,17 +1,17 @@
-import { type Author, type AuthorKind } from '@ts/types/app';
+import { type Author, type ContentKind } from '@ts/types/app';
 import { type RawAuthor } from '@ts/types/raw-data';
 
 /**
  * Convert author raw data to regular data.
  *
- * @param {RawAuthor<AuthorKind>} data - The author raw data.
- * @param {AuthorKind} kind - The author kind. Either `page` or `comment`.
+ * @param {RawAuthor<ContentKind>} data - The author raw data.
+ * @param {ContentKind} kind - The author kind. Either `page` or `comment`.
  * @param {number} [avatarSize] - The author avatar size.
- * @returns {Author<AuthorKind>} The author data.
+ * @returns {Author<ContentKind>} The author data.
  */
 export const getAuthorFromRawData = (
   data: RawAuthor<typeof kind>,
-  kind: AuthorKind,
+  kind: ContentKind,
   avatarSize: number = 80
 ): Author<typeof kind> => {
   const { name, description, gravatarUrl, url } = data;
-- 
cgit v1.2.3


From ee04742d1f0645908baa30e47845126c28848f50 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 3 May 2022 16:53:55 +0200
Subject: chore: add a CV page

---
 src/components/atoms/links/link.module.scss        |  87 ++++++++-
 src/components/atoms/links/link.stories.tsx        |  20 ++-
 src/components/atoms/links/link.tsx                |  18 +-
 .../molecules/images/responsive-image.module.scss  |  11 +-
 .../molecules/images/responsive-image.stories.tsx  |   1 +
 .../molecules/images/responsive-image.tsx          |   6 +-
 .../organisms/widgets/image-widget.module.scss     |  13 +-
 .../organisms/widgets/image-widget.stories.tsx     |  25 ++-
 .../organisms/widgets/image-widget.test.tsx        |  11 +-
 src/components/organisms/widgets/image-widget.tsx  |  18 +-
 src/pages/cv.tsx                                   | 198 +++++++++++++++++++++
 src/styles/pages/cv.module.scss                    |   3 +
 12 files changed, 375 insertions(+), 36 deletions(-)
 create mode 100644 src/pages/cv.tsx
 create mode 100644 src/styles/pages/cv.module.scss

(limited to 'src/components/organisms/widgets')

diff --git a/src/components/atoms/links/link.module.scss b/src/components/atoms/links/link.module.scss
index d23667a..1b89727 100644
--- a/src/components/atoms/links/link.module.scss
+++ b/src/components/atoms/links/link.module.scss
@@ -5,23 +5,64 @@
   &[hreflang] {
     &::after {
       display: inline-block;
+
       /* Prettier is removing spacing between content parts. */
+
       /* prettier-ignore */
       content: "\0000a0[" attr(hreflang) "]";
       font-size: var(--font-size-sm);
     }
   }
 
+  &--download {
+    &::after {
+      display: inline-block;
+
+      /* Prettier is removing spacing between content parts. */
+
+      /* prettier-ignore */
+      content: "\0000a0" url(
+fun.encode-svg(
+        '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z"/><path fill="#{var.$light-theme_blue}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z"/></svg>'
+));
+    }
+
+    &:focus:not(:active)::after {
+      /* Prettier is removing spacing between content parts. */
+
+      /* prettier-ignore */
+      content: "\0000a0" url(
+fun.encode-svg(
+        '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z"/><path fill="#{var.$light-theme_white}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z"/></svg>'
+));
+    }
+
+    &[hreflang] {
+      &::after {
+        /* Prettier is removing spacing between content parts. */
+
+        /* prettier-ignore */
+        content: "\0000a0[" attr(hreflang) "]\0000a0" url(
+fun.encode-svg(
+          '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z"/><path fill="#{var.$light-theme_blue}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z"/></svg>'
+));
+      }
+    }
+  }
+
   &--external {
     &::after {
       display: inline-block;
+
       /* Prettier is removing spacing between content parts. */
+
       /* prettier-ignore */
       content: "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'));
     }
 
     &:focus:not(:active)::after {
       /* Prettier is removing spacing between content parts. */
+
       /* prettier-ignore */
       content: "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'));
     }
@@ -29,18 +70,56 @@
     &[hreflang] {
       &::after {
         /* Prettier is removing spacing between content parts. */
+
         /* prettier-ignore */
-        content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg(
+        content: "\0000a0[" attr(hreflang) "]\0000a0" url(
+fun.encode-svg(
             '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'
-          ));
+));
       }
 
       &:focus:not(:active)::after {
         /* Prettier is removing spacing between content parts. */
+
         /* prettier-ignore */
-        content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg(
+        content: "\0000a0[" attr(hreflang) "]\0000a0" url(
+fun.encode-svg(
             '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'
-          ));
+));
+      }
+    }
+  }
+
+  &--external#{&}--download {
+    &::after {
+      /* Prettier is removing spacing between content parts. */
+
+      /* prettier-ignore */
+      content: "\0000a0" url(
+fun.encode-svg(
+          '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z"/><path fill="#{var.$light-theme_blue}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z"/></svg>'
+)) "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'));
+    }
+
+    &[hreflang] {
+      &::after {
+        /* Prettier is removing spacing between content parts. */
+
+        /* prettier-ignore */
+        content: "\0000a0[" attr(hreflang) "]\0000a0" url(
+fun.encode-svg(
+          '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z"/><path fill="#{var.$light-theme_blue}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z"/></svg>'
+)) "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'));
+      }
+
+      &:focus:not(:active)::after {
+        /* Prettier is removing spacing between content parts. */
+
+        /* prettier-ignore */
+        content: "\0000a0[" attr(hreflang) "]\0000a0" url(
+fun.encode-svg(
+          '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z"/><path fill="#{var.$light-theme_blue}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z"/></svg>'
+)) "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'));
       }
     }
   }
diff --git a/src/components/atoms/links/link.stories.tsx b/src/components/atoms/links/link.stories.tsx
index c3b3465..420eafe 100644
--- a/src/components/atoms/links/link.stories.tsx
+++ b/src/components/atoms/links/link.stories.tsx
@@ -31,14 +31,29 @@ export default {
         required: false,
       },
     },
-    external: {
+    download: {
       control: {
         type: 'boolean',
       },
+      description: 'Determine if the link purpose is to download a file.',
       table: {
         category: 'Options',
+        defaultValue: { summary: false },
+      },
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+    },
+    external: {
+      control: {
+        type: 'boolean',
       },
       description: 'Determine if the link is external of the current website.',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: false },
+      },
       type: {
         name: 'boolean',
         required: false,
@@ -79,6 +94,7 @@ export const Default = Template.bind({});
 Default.args = {
   children: 'A link',
   href: '#',
+  download: false,
   external: false,
 };
 
@@ -89,6 +105,7 @@ export const External = Template.bind({});
 External.args = {
   children: 'A link',
   href: '#',
+  download: false,
   external: true,
 };
 
@@ -99,6 +116,7 @@ export const ExternalWithLang = Template.bind({});
 ExternalWithLang.args = {
   children: 'A link',
   href: '#',
+  download: false,
   external: true,
   lang: 'en',
 };
diff --git a/src/components/atoms/links/link.tsx b/src/components/atoms/links/link.tsx
index 674c07b..c8ba273 100644
--- a/src/components/atoms/links/link.tsx
+++ b/src/components/atoms/links/link.tsx
@@ -11,6 +11,10 @@ export type LinkProps = {
    * Set additional classnames to the link.
    */
   className?: string;
+  /**
+   * True if it is a download link. Default: false.
+   */
+  download?: boolean;
   /**
    * True if it is an external link. Default: false.
    */
@@ -33,21 +37,29 @@ export type LinkProps = {
 const Link: FC<LinkProps> = ({
   children,
   className = '',
+  download = false,
+  external = false,
   href,
   lang,
-  external = false,
 }) => {
+  const downloadClass = download ? styles['link--download'] : '';
+
   return external ? (
     <a
       href={href}
       hrefLang={lang}
-      className={`${styles.link} ${styles['link--external']} ${className}`}
+      className={`${styles.link} ${styles['link--external']} ${downloadClass} ${className}`}
     >
       {children}
     </a>
   ) : (
     <NextLink href={href}>
-      <a className={`${styles.link} ${className}`}>{children}</a>
+      <a
+        hrefLang={lang}
+        className={`${styles.link} ${downloadClass} ${className}`}
+      >
+        {children}
+      </a>
     </NextLink>
   );
 };
diff --git a/src/components/molecules/images/responsive-image.module.scss b/src/components/molecules/images/responsive-image.module.scss
index 3566421..3a4f283 100644
--- a/src/components/molecules/images/responsive-image.module.scss
+++ b/src/components/molecules/images/responsive-image.module.scss
@@ -3,8 +3,7 @@
 .wrapper {
   display: flex;
   flex-flow: column;
-  width: 100%;
-  max-width: max-content;
+  width: fit-content;
   margin: 0;
   position: relative;
   text-align: center;
@@ -14,9 +13,7 @@
   margin: 0;
   padding: fun.convert-px(4) var(--spacing-2xs);
   background: var(--color-bg-secondary);
-  border: fun.convert-px(1) solid var(--color-border);
-  box-shadow: 0 fun.convert-px(-1) fun.convert-px(1) fun.convert-px(1)
-    var(--color-shadow-light);
+  border: fun.convert-px(1) solid var(--color-border-light);
   font-weight: 500;
 }
 
@@ -32,7 +29,7 @@
 
   &:hover,
   &:focus {
-    transform: scale(1.1);
+    transform: scale(var(--scale-up, 1.05));
   }
 
   &:focus {
@@ -43,7 +40,7 @@
   }
 
   &:active {
-    transform: scale(0.9);
+    transform: scale(var(--scale-down, 0.95));
 
     .caption {
       text-decoration: none;
diff --git a/src/components/molecules/images/responsive-image.stories.tsx b/src/components/molecules/images/responsive-image.stories.tsx
index a1f5295..35d9116 100644
--- a/src/components/molecules/images/responsive-image.stories.tsx
+++ b/src/components/molecules/images/responsive-image.stories.tsx
@@ -64,6 +64,7 @@ export default {
         required: false,
       },
     },
+    unoptimized: { table: { disable: true } },
     width: {
       control: {
         type: 'number',
diff --git a/src/components/molecules/images/responsive-image.tsx b/src/components/molecules/images/responsive-image.tsx
index 31cbcd1..d07dd6c 100644
--- a/src/components/molecules/images/responsive-image.tsx
+++ b/src/components/molecules/images/responsive-image.tsx
@@ -1,6 +1,6 @@
 import Link, { type LinkProps } from '@components/atoms/links/link';
 import Image, { type ImageProps } from 'next/image';
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import styles from './responsive-image.module.scss';
 
 export type ResponsiveImageProps = Omit<
@@ -14,7 +14,7 @@ export type ResponsiveImageProps = Omit<
   /**
    * A figure caption.
    */
-  caption?: string;
+  caption?: ReactNode;
   /**
    * Set additional classnames to the figure wrapper.
    */
@@ -55,6 +55,7 @@ const ResponsiveImage: FC<ResponsiveImageProps> = ({
             alt={alt}
             layout={layout || 'intrinsic'}
             objectFit={objectFit || 'contain'}
+            className={styles.img}
             {...props}
           />
           {caption && (
@@ -67,6 +68,7 @@ const ResponsiveImage: FC<ResponsiveImageProps> = ({
             alt={alt}
             layout={layout || 'intrinsic'}
             objectFit={objectFit || 'contain'}
+            className={styles.img}
             {...props}
           />
           {caption && (
diff --git a/src/components/organisms/widgets/image-widget.module.scss b/src/components/organisms/widgets/image-widget.module.scss
index 8e4d0aa..0d69441 100644
--- a/src/components/organisms/widgets/image-widget.module.scss
+++ b/src/components/organisms/widgets/image-widget.module.scss
@@ -1,7 +1,12 @@
 @use "@styles/abstracts/functions" as fun;
 
-.img {
+.figure {
+  --scale-up: 1.02;
+  --scale-down: 0.98;
+
   margin: 0;
+  padding: fun.convert-px(5);
+  border: fun.convert-px(1) solid var(--color-border);
 }
 
 .txt {
@@ -10,7 +15,7 @@
 
 .widget {
   &--left {
-    .img {
+    .figure {
       margin-right: auto;
     }
 
@@ -20,7 +25,7 @@
   }
 
   &--center {
-    .img {
+    .figure {
       margin-left: auto;
       margin-right: auto;
     }
@@ -31,7 +36,7 @@
   }
 
   &--right {
-    .img {
+    .figure {
       margin-left: auto;
     }
 
diff --git a/src/components/organisms/widgets/image-widget.stories.tsx b/src/components/organisms/widgets/image-widget.stories.tsx
index 27871ae..3014b36 100644
--- a/src/components/organisms/widgets/image-widget.stories.tsx
+++ b/src/components/organisms/widgets/image-widget.stories.tsx
@@ -50,7 +50,7 @@ export default {
         required: true,
       },
     },
-    img: {
+    image: {
       description: 'An image object.',
       type: {
         name: 'object',
@@ -58,6 +58,19 @@ export default {
         value: {},
       },
     },
+    imageClassName: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the image wrapper.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     level: {
       control: {
         type: 'number',
@@ -107,7 +120,7 @@ const Template: ComponentStory<typeof ImageWidget> = (args) => (
   <ImageWidget {...args} />
 );
 
-const img = {
+const image = {
   alt: 'Et perferendis quaerat',
   height: 480,
   src: 'http://placeimg.com/640/480/nature',
@@ -122,7 +135,7 @@ export const AlignLeft = Template.bind({});
 AlignLeft.args = {
   alignment: 'left',
   expanded: true,
-  img,
+  image,
   level: 2,
   title: 'Quo et totam',
 };
@@ -134,7 +147,7 @@ export const AlignCenter = Template.bind({});
 AlignCenter.args = {
   alignment: 'center',
   expanded: true,
-  img,
+  image,
   level: 2,
   title: 'Quo et totam',
 };
@@ -146,7 +159,7 @@ export const AlignRight = Template.bind({});
 AlignRight.args = {
   alignment: 'right',
   expanded: true,
-  img,
+  image,
   level: 2,
   title: 'Quo et totam',
 };
@@ -158,7 +171,7 @@ export const WithDescription = Template.bind({});
 WithDescription.args = {
   description: 'Sint enim harum',
   expanded: true,
-  img,
+  image,
   level: 2,
   title: 'Quo et totam',
 };
diff --git a/src/components/organisms/widgets/image-widget.test.tsx b/src/components/organisms/widgets/image-widget.test.tsx
index 8c24bd9..c6b1a3a 100644
--- a/src/components/organisms/widgets/image-widget.test.tsx
+++ b/src/components/organisms/widgets/image-widget.test.tsx
@@ -18,7 +18,12 @@ const url = '/another-page';
 describe('ImageWidget', () => {
   it('renders an image', () => {
     render(
-      <ImageWidget expanded={true} img={img} title={title} level={titleLevel} />
+      <ImageWidget
+        expanded={true}
+        image={img}
+        title={title}
+        level={titleLevel}
+      />
     );
     expect(screen.getByRole('img', { name: img.alt })).toBeInTheDocument();
   });
@@ -27,7 +32,7 @@ describe('ImageWidget', () => {
     render(
       <ImageWidget
         expanded={true}
-        img={img}
+        image={img}
         title={title}
         level={titleLevel}
         url={url}
@@ -43,7 +48,7 @@ describe('ImageWidget', () => {
     render(
       <ImageWidget
         expanded={true}
-        img={img}
+        image={img}
         description={description}
         title={title}
         level={titleLevel}
diff --git a/src/components/organisms/widgets/image-widget.tsx b/src/components/organisms/widgets/image-widget.tsx
index ba04c6a..873337b 100644
--- a/src/components/organisms/widgets/image-widget.tsx
+++ b/src/components/organisms/widgets/image-widget.tsx
@@ -14,7 +14,7 @@ export type Image = Pick<
 
 export type ImageWidgetProps = Pick<
   WidgetProps,
-  'expanded' | 'level' | 'title'
+  'className' | 'expanded' | 'level' | 'title'
 > & {
   /**
    * The content alignment.
@@ -27,7 +27,11 @@ export type ImageWidgetProps = Pick<
   /**
    * An object describing the image.
    */
-  img: Image;
+  image: Image;
+  /**
+   * Set additional classnames to the image wrapper.
+   */
+  imageClassName?: string;
   /**
    * Add a link to the image.
    */
@@ -41,20 +45,22 @@ export type ImageWidgetProps = Pick<
  */
 const ImageWidget: FC<ImageWidgetProps> = ({
   alignment = 'left',
+  className = '',
   description,
-  img,
+  image,
+  imageClassName = '',
   url,
   ...props
 }) => {
   const alignmentClass = `widget--${alignment}`;
 
   return (
-    <Widget className={styles[alignmentClass]} {...props}>
+    <Widget className={`${styles[alignmentClass]} ${className}`} {...props}>
       <ResponsiveImage
         target={url}
         caption={description}
-        className={styles.img}
-        {...img}
+        className={`${styles.figure} ${imageClassName}`}
+        {...image}
       />
     </Widget>
   );
diff --git a/src/pages/cv.tsx b/src/pages/cv.tsx
new file mode 100644
index 0000000..d47edc6
--- /dev/null
+++ b/src/pages/cv.tsx
@@ -0,0 +1,198 @@
+import Link from '@components/atoms/links/link';
+import { type BreadcrumbItem } from '@components/molecules/nav/breadcrumb';
+import ImageWidget from '@components/organisms/widgets/image-widget';
+import SocialMedia from '@components/organisms/widgets/social-media';
+import PageLayout, {
+  type PageLayoutProps,
+} from '@components/templates/page/page-layout';
+import CVContent, { data, meta } from '@content/pages/cv.mdx';
+import styles from '@styles/pages/cv.module.scss';
+import { getFormattedDate } from '@utils/helpers/dates';
+import { loadTranslation } from '@utils/helpers/i18n';
+import useSettings from '@utils/hooks/use-settings';
+import { GetStaticProps, NextPage } from 'next';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+import Script from 'next/script';
+import { ReactNode } from 'react';
+import { useIntl } from 'react-intl';
+import { AboutPage, Graph, WebPage } from 'schema-dts';
+
+/**
+ * CV page.
+ */
+const CVPage: NextPage = () => {
+  const intl = useIntl();
+  const { file, image } = data;
+  const { dates, intro, seo, title } = meta;
+  const homeLabel = intl.formatMessage({
+    defaultMessage: 'Home',
+    description: 'Breadcrumb: home label',
+    id: 'j5k9Fe',
+  });
+  const breadcrumb: BreadcrumbItem[] = [
+    { id: 'home', name: homeLabel, url: '/' },
+    { id: 'cv', name: title, url: '/cv' },
+  ];
+
+  const imageWidgetTitle = intl.formatMessage({
+    defaultMessage: 'Others formats',
+    description: 'CVPage: cv preview widget title',
+    id: 'B9OCyV',
+  });
+  const socialMediaTitle = intl.formatMessage({
+    defaultMessage: 'Open-source projects',
+    description: 'CVPage: social media widget title',
+    id: '+Dre5J',
+  });
+
+  const publicationLabel = intl.formatMessage({
+    defaultMessage: 'Published on:',
+    description: 'Meta: publication date label',
+    id: 'QGi5uD',
+  });
+
+  const updateLabel = intl.formatMessage({
+    defaultMessage: 'Updated on:',
+    description: 'Meta: update date label',
+    id: 'tLC7bh',
+  });
+
+  const headerMeta: PageLayoutProps['headerMeta'] = {
+    publication: {
+      name: publicationLabel,
+      value: getFormattedDate(dates.publication),
+    },
+    update: { name: updateLabel, value: getFormattedDate(dates.update) },
+  };
+
+  const { website } = useSettings();
+  const cvAlt = intl.formatMessage(
+    {
+      defaultMessage: '{name} CV',
+      description: 'CVPage: CV image alternative text',
+      id: 'KUowUk',
+    },
+    { name: website.name }
+  );
+  const cvCaption = intl.formatMessage(
+    {
+      defaultMessage: '<link>Download the CV in PDF</link>',
+      id: 'fN04AJ',
+      description: 'CVPage: download CV in PDF text',
+    },
+    {
+      link: (chunks: ReactNode) => (
+        <Link download={true} href={file}>
+          {chunks}
+        </Link>
+      ),
+    }
+  );
+
+  const widgets = [
+    <ImageWidget
+      key="image-widget"
+      expanded={true}
+      title={imageWidgetTitle}
+      level={2}
+      image={{ alt: cvAlt, ...image }}
+      description={cvCaption}
+      imageClassName={styles.image}
+    />,
+    <SocialMedia
+      key="social-media"
+      title={socialMediaTitle}
+      level={2}
+      media={[
+        { name: 'Github', url: 'https://github.com/ArmandPhilippot' },
+        { name: 'Gitlab', url: 'https://gitlab.com/ArmandPhilippot' },
+        {
+          name: 'LinkedIn',
+          url: 'https://www.linkedin.com/in/armandphilippot',
+        },
+      ]}
+    />,
+  ];
+
+  const { asPath } = useRouter();
+  const pageUrl = `${website.url}${asPath}`;
+  const pagePublicationDate = new Date(dates.publication);
+  const pageUpdateDate = new Date(dates.update);
+
+  const webpageSchema: WebPage = {
+    '@id': `${pageUrl}`,
+    '@type': 'WebPage',
+    breadcrumb: { '@id': `${website.url}/#breadcrumb` },
+    name: seo.title,
+    description: seo.description,
+    reviewedBy: { '@id': `${website.url}/#branding` },
+    url: `${pageUrl}`,
+    isPartOf: {
+      '@id': `${website.url}`,
+    },
+  };
+
+  const cvSchema: AboutPage = {
+    '@id': `${website.url}/#cv`,
+    '@type': 'AboutPage',
+    name: seo.title,
+    description: intro,
+    author: { '@id': `${website.url}/#branding` },
+    creator: { '@id': `${website.url}/#branding` },
+    dateCreated: pagePublicationDate.toISOString(),
+    dateModified: pageUpdateDate.toISOString(),
+    datePublished: pagePublicationDate.toISOString(),
+    editor: { '@id': `${website.url}/#branding` },
+    image: image.src,
+    inLanguage: website.locales.default,
+    license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
+    thumbnailUrl: image.src,
+    mainEntityOfPage: { '@id': `${pageUrl}` },
+  };
+
+  const schemaJsonLd: Graph = {
+    '@context': 'https://schema.org',
+    '@graph': [webpageSchema, cvSchema],
+  };
+
+  return (
+    <PageLayout
+      title={title}
+      intro={intro}
+      headerMeta={headerMeta}
+      breadcrumb={breadcrumb}
+      withToC={true}
+      widgets={widgets}
+    >
+      <Head>
+        <title>{`${seo.title} - ${website.name}`}</title>
+        <meta name="description" content={seo.description} />
+        <meta property="og:url" content={`${pageUrl}`} />
+        <meta property="og:type" content="article" />
+        <meta property="og:title" content={title} />
+        <meta property="og:description" content={intro} />
+        <meta property="og:image" content={image.src} />
+        <meta property="og:image:alt" content={title} />
+      </Head>
+      <Script
+        id="schema-cv"
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
+      />
+      <CVContent />
+    </PageLayout>
+  );
+};
+
+export const getStaticProps: GetStaticProps = async ({ locale }) => {
+  const translation = await loadTranslation(locale);
+
+  return {
+    props: {
+      translation,
+    },
+  };
+};
+
+export default CVPage;
diff --git a/src/styles/pages/cv.module.scss b/src/styles/pages/cv.module.scss
new file mode 100644
index 0000000..615c50d
--- /dev/null
+++ b/src/styles/pages/cv.module.scss
@@ -0,0 +1,3 @@
+.image {
+  max-width: min(100%, 25ch);
+}
-- 
cgit v1.2.3


From 9c8921db92d16b07ffc2a63ff3c80c4dcdd9ff9d Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 10 May 2022 17:38:07 +0200
Subject: chore: add Project single pages

---
 .../organisms/widgets/links-list-widget.tsx        |   2 +-
 .../organisms/widgets/sharing.stories.tsx          |  25 +--
 src/components/organisms/widgets/sharing.test.tsx  |  10 +-
 src/components/organisms/widgets/sharing.tsx       |  25 ++-
 .../templates/page/page-layout.module.scss         |   5 +
 src/pages/projets.tsx                              | 150 -------------
 src/pages/projets/[slug].tsx                       | 249 +++++++++++++++++++++
 src/pages/projets/index.tsx                        | 143 ++++++++++++
 src/ts/types/app.ts                                |  17 +-
 src/ts/types/swr.ts                                |   5 +
 src/utils/helpers/projects.ts                      |  80 ++++---
 src/utils/helpers/slugify.ts                       |  18 --
 src/utils/helpers/strings.ts                       |  29 +++
 src/utils/hooks/use-github-api.tsx                 |  30 +++
 src/utils/hooks/use-headings-tree.tsx              |   2 +-
 15 files changed, 553 insertions(+), 237 deletions(-)
 delete mode 100644 src/pages/projets.tsx
 create mode 100644 src/pages/projets/[slug].tsx
 create mode 100644 src/pages/projets/index.tsx
 create mode 100644 src/ts/types/swr.ts
 delete mode 100644 src/utils/helpers/slugify.ts
 create mode 100644 src/utils/helpers/strings.ts
 create mode 100644 src/utils/hooks/use-github-api.tsx

(limited to 'src/components/organisms/widgets')

diff --git a/src/components/organisms/widgets/links-list-widget.tsx b/src/components/organisms/widgets/links-list-widget.tsx
index 37a20fc..3f291e3 100644
--- a/src/components/organisms/widgets/links-list-widget.tsx
+++ b/src/components/organisms/widgets/links-list-widget.tsx
@@ -4,7 +4,7 @@ import List, {
   type ListItem,
 } from '@components/atoms/lists/list';
 import Widget, { type WidgetProps } from '@components/molecules/layout/widget';
-import { slugify } from '@utils/helpers/slugify';
+import { slugify } from '@utils/helpers/strings';
 import { FC } from 'react';
 import styles from './links-list-widget.module.scss';
 
diff --git a/src/components/organisms/widgets/sharing.stories.tsx b/src/components/organisms/widgets/sharing.stories.tsx
index c3c3488..47213b6 100644
--- a/src/components/organisms/widgets/sharing.stories.tsx
+++ b/src/components/organisms/widgets/sharing.stories.tsx
@@ -22,9 +22,13 @@ export default {
         type: null,
       },
       description: 'Default widget state (expanded or collapsed).',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: true },
+      },
       type: {
         name: 'boolean',
-        required: true,
+        required: false,
       },
     },
     level: {
@@ -34,9 +38,13 @@ export default {
         max: 6,
       },
       description: 'The heading level.',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: 2 },
+      },
       type: {
         name: 'number',
-        required: true,
+        required: false,
       },
     },
     media: {
@@ -49,16 +57,6 @@ export default {
         required: true,
       },
     },
-    title: {
-      control: {
-        type: 'text',
-      },
-      description: 'The widget title.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
   },
   decorators: [
     (Story) => (
@@ -78,14 +76,11 @@ const Template: ComponentStory<typeof SharingWidget> = (args) => (
  */
 export const Sharing = Template.bind({});
 Sharing.args = {
-  expanded: true,
   data: {
     excerpt:
       'Alias similique eius ducimus laudantium aspernatur. Est rem ut eum temporibus sit reprehenderit aut non molestias. Vel dolorem expedita labore quo inventore aliquid nihil nam. Possimus nobis enim quas corporis eos.',
     title: 'Accusantium totam nostrum',
     url: 'https://www.example.test',
   },
-  level: 2,
   media: ['diaspora', 'facebook', 'linkedin', 'twitter', 'email'],
-  title: 'Sharing',
 };
diff --git a/src/components/organisms/widgets/sharing.test.tsx b/src/components/organisms/widgets/sharing.test.tsx
index 265dbe1..48da49e 100644
--- a/src/components/organisms/widgets/sharing.test.tsx
+++ b/src/components/organisms/widgets/sharing.test.tsx
@@ -9,15 +9,7 @@ const postData: SharingData = {
 
 describe('Sharing', () => {
   it('renders a sharing widget', () => {
-    render(
-      <Sharing
-        data={postData}
-        media={['facebook', 'twitter']}
-        expanded={true}
-        title="Sharing"
-        level={2}
-      />
-    );
+    render(<Sharing data={postData} media={['facebook', 'twitter']} />);
     expect(
       screen.getByRole('link', { name: 'Share on facebook' })
     ).toBeInTheDocument();
diff --git a/src/components/organisms/widgets/sharing.tsx b/src/components/organisms/widgets/sharing.tsx
index 05a3f73..85dadb0 100644
--- a/src/components/organisms/widgets/sharing.tsx
+++ b/src/components/organisms/widgets/sharing.tsx
@@ -21,11 +21,19 @@ export type SharingData = {
   url: string;
 };
 
-export type SharingProps = Pick<WidgetProps, 'expanded' | 'level' | 'title'> & {
+export type SharingProps = {
   /**
    * The page data to share.
    */
   data: SharingData;
+  /**
+   * The widget default state.
+   */
+  expanded?: WidgetProps['expanded'];
+  /**
+   * The HTML heading level.
+   */
+  level?: WidgetProps['level'];
   /**
    * A list of active and ordered sharing medium.
    */
@@ -37,8 +45,19 @@ export type SharingProps = Pick<WidgetProps, 'expanded' | 'level' | 'title'> & {
  *
  * Render a list of sharing links inside a widget.
  */
-const Sharing: FC<SharingProps> = ({ data, media, ...props }) => {
+const Sharing: FC<SharingProps> = ({
+  data,
+  media,
+  expanded = true,
+  level = 2,
+  ...props
+}) => {
   const intl = useIntl();
+  const widgetTitle = intl.formatMessage({
+    defaultMessage: 'Share',
+    id: 'q3U6uI',
+    description: 'Sharing: widget title',
+  });
 
   /**
    * Build the Diaspora sharing url with provided data.
@@ -181,7 +200,7 @@ const Sharing: FC<SharingProps> = ({ data, media, ...props }) => {
   };
 
   return (
-    <Widget {...props}>
+    <Widget expanded={expanded} level={level} title={widgetTitle} {...props}>
       <ul className={styles.list}>{getItems()}</ul>
     </Widget>
   );
diff --git a/src/components/templates/page/page-layout.module.scss b/src/components/templates/page/page-layout.module.scss
index d5a1a2b..7602492 100644
--- a/src/components/templates/page/page-layout.module.scss
+++ b/src/components/templates/page/page-layout.module.scss
@@ -35,6 +35,11 @@
 
 .body {
   grid-column: 2;
+
+  > * + * {
+    margin-top: var(--spacing-sm);
+    margin-bottom: var(--spacing-sm);
+  }
 }
 
 .sidebar {
diff --git a/src/pages/projets.tsx b/src/pages/projets.tsx
deleted file mode 100644
index 996af74..0000000
--- a/src/pages/projets.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-import Link from '@components/atoms/links/link';
-import { BreadcrumbItem } from '@components/molecules/nav/breadcrumb';
-import CardsList, {
-  CardsListItem,
-} from '@components/organisms/layout/cards-list';
-import PageLayout from '@components/templates/page/page-layout';
-import PageContent, { meta } from '@content/pages/projects.mdx';
-import styles from '@styles/pages/projects.module.scss';
-import { ProjectCard } from '@ts/types/app';
-import { loadTranslation, Messages } from '@utils/helpers/i18n';
-import { getProjectsCard } from '@utils/helpers/projects';
-import useSettings from '@utils/hooks/use-settings';
-import { NestedMDXComponents } from 'mdx/types';
-import { GetStaticProps, NextPage } from 'next';
-import Head from 'next/head';
-import { useRouter } from 'next/router';
-import Script from 'next/script';
-import { useIntl } from 'react-intl';
-import { Article, Graph, WebPage } from 'schema-dts';
-
-type ProjectsPageProps = {
-  projects: ProjectCard[];
-  translation?: Messages;
-};
-
-/**
- * Projects page.
- */
-const ProjectsPage: NextPage<ProjectsPageProps> = ({ projects }) => {
-  const intl = useIntl();
-  const { dates, seo, title } = meta;
-  const homeLabel = intl.formatMessage({
-    defaultMessage: 'Home',
-    description: 'Breadcrumb: home label',
-    id: 'j5k9Fe',
-  });
-  const breadcrumb: BreadcrumbItem[] = [
-    { id: 'home', name: homeLabel, url: '/' },
-    { id: 'projects', name: title, url: '/projets' },
-  ];
-
-  const items: CardsListItem[] = projects.map(
-    ({ id, meta: projectMeta, slug, title: projectTitle }) => {
-      const { cover, tagline, ...remainingMeta } = projectMeta;
-      const formattedMeta: CardsListItem['meta'] = remainingMeta.technologies
-        ? [
-            {
-              id: 'technologies',
-              term: 'Technologies',
-              value: remainingMeta.technologies,
-            },
-          ]
-        : undefined;
-
-      return {
-        cover,
-        id: id as string,
-        meta: formattedMeta,
-        tagline,
-        title: projectTitle,
-        url: `/projets/${slug}`,
-      };
-    }
-  );
-
-  const components: NestedMDXComponents = {
-    Links: (props) => <Link {...props} />,
-  };
-
-  const { website } = useSettings();
-  const { asPath } = useRouter();
-  const pageUrl = `${website.url}${asPath}`;
-  const pagePublicationDate = new Date(dates.publication);
-  const pageUpdateDate = new Date(dates.update);
-
-  const webpageSchema: WebPage = {
-    '@id': `${pageUrl}`,
-    '@type': 'WebPage',
-    breadcrumb: { '@id': `${website.url}/#breadcrumb` },
-    name: seo.title,
-    description: seo.description,
-    inLanguage: website.locales.default,
-    license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
-    reviewedBy: { '@id': `${website.url}/#branding` },
-    url: `${pageUrl}`,
-    isPartOf: {
-      '@id': `${website.url}`,
-    },
-  };
-
-  const articleSchema: Article = {
-    '@id': `${website.url}/#projects`,
-    '@type': 'Article',
-    name: meta.title,
-    description: seo.description,
-    author: { '@id': `${website.url}/#branding` },
-    copyrightYear: pagePublicationDate.getFullYear(),
-    creator: { '@id': `${website.url}/#branding` },
-    dateCreated: pagePublicationDate.toISOString(),
-    dateModified: pageUpdateDate.toISOString(),
-    datePublished: pagePublicationDate.toISOString(),
-    editor: { '@id': `${website.url}/#branding` },
-    headline: meta.title,
-    inLanguage: website.locales.default,
-    license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
-    mainEntityOfPage: { '@id': `${pageUrl}` },
-  };
-
-  const schemaJsonLd: Graph = {
-    '@context': 'https://schema.org',
-    '@graph': [webpageSchema, articleSchema],
-  };
-
-  return (
-    <PageLayout
-      title={title}
-      intro={<PageContent components={components} />}
-      breadcrumb={breadcrumb}
-    >
-      <Head>
-        <title>{seo.title}</title>
-        <meta name="description" content={seo.description} />
-        <meta property="og:url" content={`${pageUrl}`} />
-        <meta property="og:type" content="article" />
-        <meta property="og:title" content={`${seo.title} - ${website.name}`} />
-        <meta property="og:description" content={seo.description} />
-      </Head>
-      <Script
-        id="schema-projects"
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
-      />
-      <CardsList items={items} titleLevel={2} className={styles.list} />
-    </PageLayout>
-  );
-};
-
-export const getStaticProps: GetStaticProps = async ({ locale }) => {
-  const projects = await getProjectsCard();
-  const translation = await loadTranslation(locale);
-
-  return {
-    props: {
-      projects,
-      translation,
-    },
-  };
-};
-
-export default ProjectsPage;
diff --git a/src/pages/projets/[slug].tsx b/src/pages/projets/[slug].tsx
new file mode 100644
index 0000000..711a5cd
--- /dev/null
+++ b/src/pages/projets/[slug].tsx
@@ -0,0 +1,249 @@
+import Link from '@components/atoms/links/link';
+import SocialLink, { SocialWebsite } from '@components/atoms/links/social-link';
+import Spinner from '@components/atoms/loaders/spinner';
+import ResponsiveImage from '@components/molecules/images/responsive-image';
+import Code from '@components/molecules/layout/code';
+import { BreadcrumbItem } from '@components/molecules/nav/breadcrumb';
+import Gallery from '@components/organisms/images/gallery';
+import Overview, { OverviewMeta } from '@components/organisms/layout/overview';
+import Sharing from '@components/organisms/widgets/sharing';
+import PageLayout, {
+  PageLayoutProps,
+} from '@components/templates/page/page-layout';
+import { ProjectPreview, Repos } from '@ts/types/app';
+import { loadTranslation, Messages } from '@utils/helpers/i18n';
+import { getProjectData, getProjectFilenames } from '@utils/helpers/projects';
+import { capitalize } from '@utils/helpers/strings';
+import useGithubApi, { RepoData } from '@utils/hooks/use-github-api';
+import useSettings from '@utils/hooks/use-settings';
+import { MDXComponents, NestedMDXComponents } from 'mdx/types';
+import { GetStaticPaths, GetStaticProps, NextPage } from 'next';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+import Script from 'next/script';
+import { ComponentType } from 'react';
+import { useIntl } from 'react-intl';
+import { Article, Graph, WebPage } from 'schema-dts';
+
+type ProjectPageProps = {
+  project: ProjectPreview;
+  translation: Messages;
+};
+
+/**
+ * Project page.
+ */
+const ProjectPage: NextPage<ProjectPageProps> = ({ project }) => {
+  const { id, intro, meta, title } = project;
+  const { cover, dates, license, repos, seo, technologies } = meta;
+  const intl = useIntl();
+  const homeLabel = intl.formatMessage({
+    defaultMessage: 'Home',
+    description: 'Breadcrumb: home label',
+    id: 'j5k9Fe',
+  });
+  const projectsLabel = intl.formatMessage({
+    defaultMessage: 'Projects',
+    description: 'Breadcrumb: projects label',
+    id: '28GZdv',
+  });
+  const breadcrumb: BreadcrumbItem[] = [
+    { id: 'home', name: homeLabel, url: '/' },
+    { id: 'projects', name: projectsLabel, url: '/projets' },
+    { id: 'project', name: title, url: `/projets/${id}` },
+  ];
+
+  const ProjectContent: ComponentType<MDXComponents> =
+    require(`../../content/projects/${id}.mdx`).default;
+
+  const components: NestedMDXComponents = {
+    Code: (props) => <Code {...props} />,
+    Gallery: (props) => <Gallery {...props} />,
+    Image: (props) => <ResponsiveImage {...props} />,
+    Link: (props) => <Link {...props} />,
+    pre: ({ children }) => <Code {...children.props} />,
+  };
+
+  const { website } = useSettings();
+  const { asPath } = useRouter();
+  const pageUrl = `${website.url}${asPath}`;
+  const pagePublicationDate = new Date(dates.publication);
+  const pageUpdateDate = dates.update ? new Date(dates.update) : undefined;
+
+  const headerMeta: PageLayoutProps['headerMeta'] = {
+    publication: { date: dates.publication },
+    update: dates.update ? { date: dates.update } : undefined,
+  };
+
+  /**
+   * Retrieve the repositories links.
+   *
+   * @param {Repos} repos - A repositories object.
+   * @returns {JSX.Element[]} - An array of SocialLink.
+   */
+  const getReposLinks = (repositories: Repos): JSX.Element[] => {
+    const links = [];
+
+    for (const [name, url] of Object.entries(repositories)) {
+      const socialWebsite = capitalize(name) as SocialWebsite;
+      const socialUrl = `https://${name}.com/${url}`;
+
+      links.push(<SocialLink name={socialWebsite} url={socialUrl} />);
+    }
+
+    return links;
+  };
+
+  const { isError, isLoading, data } = useGithubApi(meta.repos!.github!);
+
+  const getGithubData = (key: keyof RepoData) => {
+    if (isError) return 'Error';
+    if (isLoading || !data) return <Spinner />;
+
+    switch (key) {
+      case 'created_at':
+        return data.created_at;
+      case 'updated_at':
+        return data.updated_at;
+      case 'stargazers_count':
+        const stars = intl.formatMessage(
+          {
+            defaultMessage:
+              '{starsCount, plural, =0 {No stars on Github} one {# star on Github} other {# stars on Github}}',
+            id: 'Gnf1Si',
+            description: 'Projets: Github stars count',
+          },
+          { starsCount: data.stargazers_count }
+        );
+        return (
+          <>
+            ⭐&nbsp;
+            <Link href={`https://github.com/${repos!.github}/stargazers`}>
+              {stars}
+            </Link>
+          </>
+        );
+    }
+  };
+
+  const overviewData: OverviewMeta = {
+    creation: data && { date: getGithubData('created_at') as string },
+    update: data && { date: getGithubData('updated_at') as string },
+    license,
+    popularity: data && getGithubData('stargazers_count'),
+    repositories: repos ? getReposLinks(repos) : undefined,
+    technologies,
+  };
+
+  const webpageSchema: WebPage = {
+    '@id': `${pageUrl}`,
+    '@type': 'WebPage',
+    breadcrumb: { '@id': `${website.url}/#breadcrumb` },
+    name: seo.title,
+    description: seo.description,
+    inLanguage: website.locales.default,
+    reviewedBy: { '@id': `${website.url}/#branding` },
+    url: `${website.url}`,
+    isPartOf: {
+      '@id': `${website.url}`,
+    },
+  };
+
+  const articleSchema: Article = {
+    '@id': `${website.url}/project`,
+    '@type': 'Article',
+    name: title,
+    description: intro,
+    author: { '@id': `${website.url}/#branding` },
+    copyrightYear: pagePublicationDate.getFullYear(),
+    creator: { '@id': `${website.url}/#branding` },
+    dateCreated: pagePublicationDate.toISOString(),
+    dateModified: pageUpdateDate && pageUpdateDate.toISOString(),
+    datePublished: pagePublicationDate.toISOString(),
+    editor: { '@id': `${website.url}/#branding` },
+    headline: title,
+    thumbnailUrl: `/projects/${id}.jpg`,
+    image: `/projects/${id}.jpg`,
+    inLanguage: website.locales.default,
+    license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
+    mainEntityOfPage: { '@id': `${pageUrl}` },
+  };
+
+  const schemaJsonLd: Graph = {
+    '@context': 'https://schema.org',
+    '@graph': [webpageSchema, articleSchema],
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{`${seo.title} - ${website.name}`}</title>
+        <meta name="description" content={seo.description} />
+        <meta property="og:url" content={`${pageUrl}`} />
+        <meta property="og:type" content="article" />
+        <meta property="og:title" content={title} />
+        <meta property="og:description" content={intro} />
+      </Head>
+      <Script
+        id="schema-project"
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
+      />
+      <PageLayout
+        title={title}
+        intro={intro}
+        breadcrumb={breadcrumb}
+        headerMeta={headerMeta}
+        withToC={true}
+        widgets={[
+          <Sharing
+            key="sharing-widget"
+            data={{ excerpt: intro, title, url: pageUrl }}
+            media={[
+              'diaspora',
+              'email',
+              'facebook',
+              'journal-du-hacker',
+              'linkedin',
+              'twitter',
+            ]}
+          />,
+        ]}
+      >
+        <Overview cover={cover} meta={overviewData} />
+        <ProjectContent components={components} />
+      </PageLayout>
+    </>
+  );
+};
+
+export const getStaticProps: GetStaticProps = async ({ locale, params }) => {
+  const translation = await loadTranslation(locale);
+  const { slug } = params!;
+  const project = await getProjectData(slug as string);
+
+  return {
+    props: {
+      project,
+      translation,
+    },
+  };
+};
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  const filenames = getProjectFilenames();
+  const paths = filenames.map((filename) => {
+    return {
+      params: {
+        slug: filename,
+      },
+    };
+  });
+
+  return {
+    paths,
+    fallback: false,
+  };
+};
+
+export default ProjectPage;
diff --git a/src/pages/projets/index.tsx b/src/pages/projets/index.tsx
new file mode 100644
index 0000000..a6858c8
--- /dev/null
+++ b/src/pages/projets/index.tsx
@@ -0,0 +1,143 @@
+import Link from '@components/atoms/links/link';
+import { BreadcrumbItem } from '@components/molecules/nav/breadcrumb';
+import CardsList, {
+  CardsListItem,
+} from '@components/organisms/layout/cards-list';
+import PageLayout from '@components/templates/page/page-layout';
+import PageContent, { meta } from '@content/pages/projects.mdx';
+import styles from '@styles/pages/projects.module.scss';
+import { ProjectCard } from '@ts/types/app';
+import { loadTranslation, Messages } from '@utils/helpers/i18n';
+import { getProjectsCard } from '@utils/helpers/projects';
+import useSettings from '@utils/hooks/use-settings';
+import { NestedMDXComponents } from 'mdx/types';
+import { GetStaticProps, NextPage } from 'next';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+import Script from 'next/script';
+import { useIntl } from 'react-intl';
+import { Article, Graph, WebPage } from 'schema-dts';
+
+type ProjectsPageProps = {
+  projects: ProjectCard[];
+  translation?: Messages;
+};
+
+/**
+ * Projects page.
+ */
+const ProjectsPage: NextPage<ProjectsPageProps> = ({ projects }) => {
+  const intl = useIntl();
+  const { dates, seo, title } = meta;
+  const homeLabel = intl.formatMessage({
+    defaultMessage: 'Home',
+    description: 'Breadcrumb: home label',
+    id: 'j5k9Fe',
+  });
+  const breadcrumb: BreadcrumbItem[] = [
+    { id: 'home', name: homeLabel, url: '/' },
+    { id: 'projects', name: title, url: '/projets' },
+  ];
+
+  const items: CardsListItem[] = projects.map(
+    ({ id, meta: projectMeta, slug, title: projectTitle }) => {
+      const { cover, tagline, technologies } = projectMeta;
+
+      return {
+        cover,
+        id: id as string,
+        meta: { technologies: technologies },
+        tagline,
+        title: projectTitle,
+        url: `/projets/${slug}`,
+      };
+    }
+  );
+
+  const components: NestedMDXComponents = {
+    Links: (props) => <Link {...props} />,
+  };
+
+  const { website } = useSettings();
+  const { asPath } = useRouter();
+  const pageUrl = `${website.url}${asPath}`;
+  const pagePublicationDate = new Date(dates.publication);
+  const pageUpdateDate = dates.update ? new Date(dates.update) : undefined;
+
+  const webpageSchema: WebPage = {
+    '@id': `${pageUrl}`,
+    '@type': 'WebPage',
+    breadcrumb: { '@id': `${website.url}/#breadcrumb` },
+    name: seo.title,
+    description: seo.description,
+    inLanguage: website.locales.default,
+    license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
+    reviewedBy: { '@id': `${website.url}/#branding` },
+    url: `${pageUrl}`,
+    isPartOf: {
+      '@id': `${website.url}`,
+    },
+  };
+
+  const articleSchema: Article = {
+    '@id': `${website.url}/#projects`,
+    '@type': 'Article',
+    name: meta.title,
+    description: seo.description,
+    author: { '@id': `${website.url}/#branding` },
+    copyrightYear: pagePublicationDate.getFullYear(),
+    creator: { '@id': `${website.url}/#branding` },
+    dateCreated: pagePublicationDate.toISOString(),
+    dateModified: pageUpdateDate && pageUpdateDate.toISOString(),
+    datePublished: pagePublicationDate.toISOString(),
+    editor: { '@id': `${website.url}/#branding` },
+    headline: meta.title,
+    inLanguage: website.locales.default,
+    license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
+    mainEntityOfPage: { '@id': `${pageUrl}` },
+  };
+
+  const schemaJsonLd: Graph = {
+    '@context': 'https://schema.org',
+    '@graph': [webpageSchema, articleSchema],
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{`${seo.title} - ${website.name}`}</title>
+        <meta name="description" content={seo.description} />
+        <meta property="og:url" content={`${pageUrl}`} />
+        <meta property="og:type" content="article" />
+        <meta property="og:title" content={`${seo.title} - ${website.name}`} />
+        <meta property="og:description" content={seo.description} />
+      </Head>
+      <Script
+        id="schema-projects"
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
+      />
+      <PageLayout
+        title={title}
+        intro={<PageContent components={components} />}
+        breadcrumb={breadcrumb}
+      >
+        <CardsList items={items} titleLevel={2} className={styles.list} />
+      </PageLayout>
+    </>
+  );
+};
+
+export const getStaticProps: GetStaticProps = async ({ locale }) => {
+  const projects = await getProjectsCard();
+  const translation = await loadTranslation(locale);
+
+  return {
+    props: {
+      projects: JSON.parse(JSON.stringify(projects)),
+      translation,
+    },
+  };
+};
+
+export default ProjectsPage;
diff --git a/src/ts/types/app.ts b/src/ts/types/app.ts
index 87ab042..f354118 100644
--- a/src/ts/types/app.ts
+++ b/src/ts/types/app.ts
@@ -29,7 +29,7 @@ export type Comment = {
 
 export type Dates = {
   publication: string;
-  update: string;
+  update?: string;
 };
 
 export type Image = {
@@ -58,23 +58,23 @@ export type Meta<T extends PageKind> = {
   commentsCount?: T extends 'article' ? number : never;
   cover?: Image;
   dates: Dates;
-  license?: T extends 'projects' ? string : never;
-  readingTime: number;
-  repos?: T extends 'projects' ? Repos : never;
+  license?: T extends 'project' ? string : never;
+  readingTime?: number;
+  repos?: T extends 'project' ? Repos : never;
   seo: SEO;
-  tagline?: T extends 'projects' ? string : never;
-  technologies?: T extends 'projects' ? string[] : never;
+  tagline?: T extends 'project' ? string : never;
+  technologies?: T extends 'project' ? string[] : never;
   thematics?: T extends 'article' | 'topic' ? PageLink[] : never;
   topics?: T extends 'article' | 'thematic' ? PageLink[] : never;
   website?: T extends 'topic' ? string : never;
-  wordsCount: number;
+  wordsCount?: number;
 };
 
 export type Page<T extends PageKind> = {
   content: string;
   id: number | string;
   intro: string;
-  meta?: Meta<T>;
+  meta: Meta<T>;
   slug: string;
   title: string;
 };
@@ -89,6 +89,7 @@ export type Article = Page<'article'>;
 export type ArticleCard = Pick<Article, 'id' | 'slug' | 'title'> &
   Pick<Meta<'article'>, 'cover' | 'dates'>;
 export type Project = Page<'project'>;
+export type ProjectPreview = Omit<Page<'project'>, 'content'>;
 export type ProjectCard = Pick<Page<'project'>, 'id' | 'slug' | 'title'> & {
   meta: Pick<Meta<'project'>, 'cover' | 'dates' | 'tagline' | 'technologies'>;
 };
diff --git a/src/ts/types/swr.ts b/src/ts/types/swr.ts
new file mode 100644
index 0000000..4da6b2c
--- /dev/null
+++ b/src/ts/types/swr.ts
@@ -0,0 +1,5 @@
+export type SWRResult<T> = {
+  data?: T;
+  isLoading: boolean;
+  isError: boolean;
+};
diff --git a/src/utils/helpers/projects.ts b/src/utils/helpers/projects.ts
index 02e0e02..a0f0c04 100644
--- a/src/utils/helpers/projects.ts
+++ b/src/utils/helpers/projects.ts
@@ -1,4 +1,4 @@
-import { ProjectCard } from '@ts/types/app';
+import { ProjectCard, ProjectPreview } from '@ts/types/app';
 import { MDXProjectMeta } from '@ts/types/mdx';
 import { readdirSync } from 'fs';
 import path from 'path';
@@ -16,45 +16,61 @@ export const getProjectFilenames = (): string[] => {
 };
 
 /**
- * Retrieve project's data by filename.
+ * Retrieve the data of a project by filename.
+ *
+ * @param {string} filename - The project filename.
+ * @returns {Promise<ProjectPreview>}
+ */
+export const getProjectData = async (
+  filename: string
+): Promise<ProjectPreview> => {
+  try {
+    const {
+      meta,
+    }: {
+      meta: MDXProjectMeta;
+    } = await import(`../../content/projects/${filename}.mdx`);
+
+    const { dates, intro, title, ...projectMeta } = meta;
+    const { publication, update } = dates;
+    const cover = await import(`../../../public/projects/${filename}.jpg`);
+
+    return {
+      id: filename,
+      intro,
+      meta: {
+        ...projectMeta,
+        dates: { publication, update },
+        // Dynamic import source does not work so I use it only to get sizes
+        cover: {
+          ...cover.default,
+          alt: `${title} image`,
+          src: `/projects/${filename}.jpg`,
+        },
+      },
+      slug: filename,
+      title: title,
+    };
+  } catch (err) {
+    console.error(err);
+    throw err;
+  }
+};
+
+/**
+ * Retrieve all the projects data using filenames.
  *
  * @param {string[]} filenames - The filenames without extension.
- * @returns {Promise<ProjectCard[]>} - The project data.
+ * @returns {Promise<ProjectCard[]>} - An array of projects data.
  */
 export const getProjectsData = async (
   filenames: string[]
 ): Promise<ProjectCard[]> => {
   return Promise.all(
     filenames.map(async (filename) => {
-      try {
-        const {
-          meta,
-        }: {
-          meta: MDXProjectMeta;
-        } = await import(`../../content/projects/${filename}.mdx`);
-
-        const { intro: _intro, title, ...projectMeta } = meta;
-
-        const cover = await import(`../../../public/projects/${filename}.jpg`);
-
-        return {
-          id: filename,
-          meta: {
-            ...projectMeta,
-            // Dynamic import source does not work so I use it only to get sizes
-            cover: {
-              ...cover.default,
-              alt: `${title} image`,
-              src: `/projects/${filename}.jpg`,
-            },
-          },
-          slug: filename,
-          title: title,
-        };
-      } catch (err) {
-        console.error(err);
-        throw err;
-      }
+      const { id, meta, slug, title } = await getProjectData(filename);
+      const { cover, dates, tagline, technologies } = meta;
+      return { id, meta: { cover, dates, tagline, technologies }, slug, title };
     })
   );
 };
diff --git a/src/utils/helpers/slugify.ts b/src/utils/helpers/slugify.ts
deleted file mode 100644
index 55ff583..0000000
--- a/src/utils/helpers/slugify.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Convert a text into a slug or id.
- * https://gist.github.com/codeguy/6684588#gistcomment-3332719
- *
- * @param {string} text Text to slugify.
- */
-export const slugify = (text: string) => {
-  return text
-    .toString()
-    .normalize('NFD')
-    .replace(/[\u0300-\u036f]/g, '')
-    .toLowerCase()
-    .trim()
-    .replace(/\s+/g, '-')
-    .replace(/[^\w\-]+/g, '-')
-    .replace(/\-\-+/g, '-')
-    .replace(/(^-)|(-$)/g, '');
-};
diff --git a/src/utils/helpers/strings.ts b/src/utils/helpers/strings.ts
new file mode 100644
index 0000000..5d90161
--- /dev/null
+++ b/src/utils/helpers/strings.ts
@@ -0,0 +1,29 @@
+/**
+ * Convert a text into a slug or id.
+ * https://gist.github.com/codeguy/6684588#gistcomment-3332719
+ *
+ * @param {string} text - A text to slugify.
+ * @returns {string} The slug.
+ */
+export const slugify = (text: string): string => {
+  return text
+    .toString()
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .toLowerCase()
+    .trim()
+    .replace(/\s+/g, '-')
+    .replace(/[^\w\-]+/g, '-')
+    .replace(/\-\-+/g, '-')
+    .replace(/(^-)|(-$)/g, '');
+};
+
+/**
+ * Capitalize the first letter of a string.
+ *
+ * @param {string} text - A text to capitalize.
+ * @returns {string} The capitalized text.
+ */
+export const capitalize = (text: string): string => {
+  return text.replace(/^\w/, (firstLetter) => firstLetter.toUpperCase());
+};
diff --git a/src/utils/hooks/use-github-api.tsx b/src/utils/hooks/use-github-api.tsx
new file mode 100644
index 0000000..edff974
--- /dev/null
+++ b/src/utils/hooks/use-github-api.tsx
@@ -0,0 +1,30 @@
+import { SWRResult } from '@ts/types/swr';
+import useSWR, { Fetcher } from 'swr';
+
+export type RepoData = {
+  created_at: string;
+  updated_at: string;
+  stargazers_count: number;
+};
+
+const fetcher: Fetcher<RepoData, string> = (...args) =>
+  fetch(...args).then((res) => res.json());
+
+/**
+ * Retrieve data from Github API.
+ *
+ * @param repo - The Github repo (`owner/repo-name`).
+ * @returns The repository data.
+ */
+const useGithubApi = (repo: string): SWRResult<RepoData> => {
+  const apiUrl = repo ? `https://api.github.com/repos/${repo}` : null;
+  const { data, error } = useSWR<RepoData>(apiUrl, fetcher);
+
+  return {
+    data,
+    isLoading: !error && !data,
+    isError: error,
+  };
+};
+
+export default useGithubApi;
diff --git a/src/utils/hooks/use-headings-tree.tsx b/src/utils/hooks/use-headings-tree.tsx
index 5506e8b..4646b4a 100644
--- a/src/utils/hooks/use-headings-tree.tsx
+++ b/src/utils/hooks/use-headings-tree.tsx
@@ -1,4 +1,4 @@
-import { slugify } from '@utils/helpers/slugify';
+import { slugify } from '@utils/helpers/strings';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
 export type Heading = {
-- 
cgit v1.2.3


From c77c58e18143233be042c4980a6ed08ae9beac52 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 16 May 2022 19:40:23 +0200
Subject: chore: adjust and complete missing styles

* add logo to topics pages and links
* add Prism styles to articles
* and a few other adjustements
---
 src/components/atoms/forms/form.tsx                |   3 +-
 src/components/atoms/links/link.module.scss        |  23 --
 .../atoms/lists/description-list-item.module.scss  |   2 +
 src/components/molecules/layout/meta.tsx           |  59 ++--
 src/components/molecules/layout/page-footer.tsx    |   4 +-
 .../molecules/layout/page-header.module.scss       |   6 +
 src/components/molecules/layout/page-header.tsx    |  11 +-
 src/components/organisms/forms/comment-form.tsx    |  12 +-
 .../organisms/widgets/sharing.stories.tsx          |  21 +-
 src/components/organisms/widgets/sharing.tsx       |   7 +-
 .../templates/page/page-layout.module.scss         |   6 +
 .../templates/page/page-layout.stories.tsx         |   2 +-
 src/components/templates/page/page-layout.tsx      |  17 +-
 src/pages/article/[slug].tsx                       |  43 ++-
 src/pages/blog/index.tsx                           |  12 +-
 src/pages/cv.tsx                                   |  19 +-
 src/pages/recherche/index.tsx                      |  12 +-
 src/pages/sujet/[slug].tsx                         |  35 ++-
 src/services/graphql/articles.query.ts             |  11 +
 src/services/graphql/topics.query.ts               |  11 +
 src/styles/base/_typography.scss                   |  24 +-
 src/styles/components/_wp-blocks.scss              | 166 ------------
 src/styles/globals.scss                            |  10 +-
 src/styles/pages/article.module.scss               |  36 +++
 src/styles/pages/partials/_article-headings.scss   |  57 ++++
 src/styles/pages/partials/_article-links.scss      | 104 +++++++
 src/styles/pages/partials/_article-lists.scss      |  65 +++++
 src/styles/pages/partials/_article-media.scss      |  11 +
 src/styles/pages/partials/_article-prism.scss      | 301 +++++++++++++++++++++
 src/styles/pages/partials/_article-wp-blocks.scss  | 168 ++++++++++++
 src/styles/pages/topic.module.scss                 |   6 +
 src/ts/types/app.ts                                |   1 +
 src/ts/types/raw-data.ts                           |   7 +-
 src/utils/helpers/pages.ts                         |   5 +-
 src/utils/hooks/use-add-prism-class-attr.tsx       |  60 ++++
 35 files changed, 1036 insertions(+), 301 deletions(-)
 delete mode 100644 src/styles/components/_wp-blocks.scss
 create mode 100644 src/styles/pages/article.module.scss
 create mode 100644 src/styles/pages/partials/_article-headings.scss
 create mode 100644 src/styles/pages/partials/_article-links.scss
 create mode 100644 src/styles/pages/partials/_article-lists.scss
 create mode 100644 src/styles/pages/partials/_article-media.scss
 create mode 100644 src/styles/pages/partials/_article-prism.scss
 create mode 100644 src/styles/pages/partials/_article-wp-blocks.scss
 create mode 100644 src/styles/pages/topic.module.scss
 create mode 100644 src/utils/hooks/use-add-prism-class-attr.tsx

(limited to 'src/components/organisms/widgets')

diff --git a/src/components/atoms/forms/form.tsx b/src/components/atoms/forms/form.tsx
index ef8dce4..b819aea 100644
--- a/src/components/atoms/forms/form.tsx
+++ b/src/components/atoms/forms/form.tsx
@@ -35,7 +35,6 @@ export type FormProps = {
  */
 const Form: FC<FormProps> = ({
   children,
-  className = '',
   grouped = true,
   onSubmit,
   ...props
@@ -68,7 +67,7 @@ const Form: FC<FormProps> = ({
   };
 
   return (
-    <form onSubmit={handleSubmit} className={className} {...props}>
+    <form onSubmit={handleSubmit} {...props}>
       {getFormItems()}
     </form>
   );
diff --git a/src/components/atoms/links/link.module.scss b/src/components/atoms/links/link.module.scss
index 5c97bd2..1b89727 100644
--- a/src/components/atoms/links/link.module.scss
+++ b/src/components/atoms/links/link.module.scss
@@ -2,29 +2,6 @@
 @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/atoms/lists/description-list-item.module.scss b/src/components/atoms/lists/description-list-item.module.scss
index 60cad57..aba90ce 100644
--- a/src/components/atoms/lists/description-list-item.module.scss
+++ b/src/components/atoms/lists/description-list-item.module.scss
@@ -27,6 +27,8 @@
   }
 
   &--inline-values {
+    row-gap: var(--spacing-2xs);
+
     .term {
       flex: 1 1 100%;
     }
diff --git a/src/components/molecules/layout/meta.tsx b/src/components/molecules/layout/meta.tsx
index 1f6219a..74bd4ff 100644
--- a/src/components/molecules/layout/meta.tsx
+++ b/src/components/molecules/layout/meta.tsx
@@ -92,13 +92,17 @@ export type MetaData = {
    */
   topics?: string[] | JSX.Element[];
   /**
-   * A total.
+   * A total number of posts.
    */
-  total?: string;
+  total?: number;
   /**
    * The update date.
    */
   update?: MetaDate;
+  /**
+   * An url.
+   */
+  website?: string;
 };
 
 export type MetaKey = keyof MetaData;
@@ -145,80 +149,86 @@ const Meta: FC<MetaProps> = ({
       case 'author':
         return intl.formatMessage({
           defaultMessage: 'Written by:',
-          id: 'OI0N37',
           description: 'Meta: author label',
+          id: 'OI0N37',
         });
       case 'comments':
         return intl.formatMessage({
           defaultMessage: 'Comments:',
-          id: 'jTVIh8',
           description: 'Meta: comments label',
+          id: 'jTVIh8',
         });
       case 'creation':
         return intl.formatMessage({
           defaultMessage: 'Created on:',
-          id: 'b4fdYE',
           description: 'Meta: creation date label',
+          id: 'b4fdYE',
         });
       case 'license':
         return intl.formatMessage({
           defaultMessage: 'License:',
-          id: 'AuGklx',
           description: 'Meta: license label',
+          id: 'AuGklx',
         });
       case 'popularity':
         return intl.formatMessage({
           defaultMessage: 'Popularity:',
-          id: 'pWTj2W',
           description: 'Meta: popularity label',
+          id: 'pWTj2W',
         });
       case 'publication':
         return intl.formatMessage({
           defaultMessage: 'Published on:',
-          id: 'QGi5uD',
           description: 'Meta: publication date label',
+          id: 'QGi5uD',
         });
       case 'readingTime':
         return intl.formatMessage({
           defaultMessage: 'Reading time:',
-          id: 'EbFvsM',
           description: 'Meta: reading time label',
+          id: 'EbFvsM',
         });
       case 'repositories':
         return intl.formatMessage({
           defaultMessage: 'Repositories:',
-          id: 'DssFG1',
           description: 'Meta: repositories label',
+          id: 'DssFG1',
         });
       case 'technologies':
         return intl.formatMessage({
           defaultMessage: 'Technologies:',
-          id: 'ADQmDF',
           description: 'Meta: technologies label',
+          id: 'ADQmDF',
         });
       case 'thematics':
         return intl.formatMessage({
           defaultMessage: 'Thematics:',
-          id: 'bz53Us',
           description: 'Meta: thematics label',
+          id: 'bz53Us',
         });
       case 'topics':
         return intl.formatMessage({
           defaultMessage: 'Topics:',
-          id: 'gJNaBD',
           description: 'Meta: topics label',
+          id: 'gJNaBD',
         });
       case 'total':
         return intl.formatMessage({
           defaultMessage: 'Total:',
-          id: '92zgdp',
           description: 'Meta: total label',
+          id: '92zgdp',
         });
       case 'update':
         return intl.formatMessage({
           defaultMessage: 'Updated on:',
-          id: 'tLC7bh',
           description: 'Meta: update date label',
+          id: 'tLC7bh',
+        });
+      case 'website':
+        return intl.formatMessage({
+          defaultMessage: 'Official website:',
+          description: 'Meta: official website label',
+          id: 'GRyyfy',
         });
       default:
         return '';
@@ -279,8 +289,8 @@ const Meta: FC<MetaProps> = ({
       {
         defaultMessage:
           '{commentsCount, plural, =0 {No comments} one {# comment} other {# comments}}<a11y> about {title}</a11y>',
-        id: '02rgLO',
         description: 'Meta: comments count',
+        id: '02rgLO',
       },
       {
         a11y: (chunks: ReactNode) => (
@@ -316,6 +326,23 @@ const Meta: FC<MetaProps> = ({
       case 'publication':
       case 'update':
         return getDate(value as MetaDate);
+      case 'total':
+        return intl.formatMessage(
+          {
+            defaultMessage:
+              '{postsCount, plural, =0 {No articles} one {# article} other {# articles}}',
+            description: 'BlogPage: posts count meta',
+            id: 'OF5cPz',
+          },
+          { postsCount: value as number }
+        );
+      case 'website':
+        const url = value as string;
+        return (
+          <Link href={url} external={true}>
+            {url}
+          </Link>
+        );
       default:
         return value as string | ReactNode | ReactNode[];
     }
diff --git a/src/components/molecules/layout/page-footer.tsx b/src/components/molecules/layout/page-footer.tsx
index e998b1e..97e449f 100644
--- a/src/components/molecules/layout/page-footer.tsx
+++ b/src/components/molecules/layout/page-footer.tsx
@@ -19,7 +19,9 @@ export type PageFooterProps = {
  */
 const PageFooter: FC<PageFooterProps> = ({ meta, ...props }) => {
   return (
-    <footer {...props}>{meta && <Meta data={meta} layout="column" />}</footer>
+    <footer {...props}>
+      {meta && <Meta data={meta} withSeparator={false} />}
+    </footer>
   );
 };
 
diff --git a/src/components/molecules/layout/page-header.module.scss b/src/components/molecules/layout/page-header.module.scss
index 4c7df5f..232023a 100644
--- a/src/components/molecules/layout/page-header.module.scss
+++ b/src/components/molecules/layout/page-header.module.scss
@@ -56,3 +56,9 @@
 .meta {
   font-size: var(--font-size-sm);
 }
+
+.intro {
+  > *:last-child {
+    margin-bottom: 0;
+  }
+}
diff --git a/src/components/molecules/layout/page-header.tsx b/src/components/molecules/layout/page-header.tsx
index 9abe9af..6759c7f 100644
--- a/src/components/molecules/layout/page-header.tsx
+++ b/src/components/molecules/layout/page-header.tsx
@@ -1,5 +1,5 @@
 import Heading from '@components/atoms/headings/heading';
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import Meta, { type MetaData } from './meta';
 import styles from './page-header.module.scss';
 
@@ -19,7 +19,7 @@ export type PageHeaderProps = {
   /**
    * The page title.
    */
-  title: string;
+  title: ReactNode;
 };
 
 /**
@@ -35,9 +35,12 @@ const PageHeader: FC<PageHeaderProps> = ({
 }) => {
   const getIntro = () => {
     return typeof intro === 'string' ? (
-      <div dangerouslySetInnerHTML={{ __html: intro }} />
+      <div
+        className={styles.intro}
+        dangerouslySetInnerHTML={{ __html: intro }}
+      />
     ) : (
-      <div>{intro}</div>
+      <div className={styles.intro}>{intro}</div>
     );
   };
 
diff --git a/src/components/organisms/forms/comment-form.tsx b/src/components/organisms/forms/comment-form.tsx
index 9e0abdf..5ff4ea4 100644
--- a/src/components/organisms/forms/comment-form.tsx
+++ b/src/components/organisms/forms/comment-form.tsx
@@ -1,5 +1,5 @@
 import Button from '@components/atoms/buttons/button';
-import Form from '@components/atoms/forms/form';
+import Form, { type FormProps } from '@components/atoms/forms/form';
 import Heading, { type HeadingLevel } from '@components/atoms/headings/heading';
 import Spinner from '@components/atoms/loaders/spinner';
 import LabelledField from '@components/molecules/forms/labelled-field';
@@ -15,11 +15,7 @@ export type CommentFormData = {
   website?: string;
 };
 
-export type CommentFormProps = {
-  /**
-   * Set additional classnames to the form wrapper.
-   */
-  className?: string;
+export type CommentFormProps = Pick<FormProps, 'className'> & {
   /**
    * Pass a component to print a success/error message.
    */
@@ -44,12 +40,12 @@ export type CommentFormProps = {
 };
 
 const CommentForm: FC<CommentFormProps> = ({
-  className = '',
   Notice,
   parentId,
   saveComment,
   title,
   titleLevel = 2,
+  ...props
 }) => {
   const intl = useIntl();
   const [name, setName] = useState<string>('');
@@ -116,9 +112,9 @@ const CommentForm: FC<CommentFormProps> = ({
   return (
     <Form
       onSubmit={submitHandler}
-      className={className}
       aria-label={formAriaLabel}
       aria-labelledby={formLabelledBy}
+      {...props}
     >
       {title && (
         <Heading id={formId} level={titleLevel}>
diff --git a/src/components/organisms/widgets/sharing.stories.tsx b/src/components/organisms/widgets/sharing.stories.tsx
index 47213b6..59b86d3 100644
--- a/src/components/organisms/widgets/sharing.stories.tsx
+++ b/src/components/organisms/widgets/sharing.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import SharingWidget from './sharing';
 
 /**
@@ -9,6 +8,19 @@ export default {
   title: 'Organisms/Widgets',
   component: SharingWidget,
   argTypes: {
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the sharing links list.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     data: {
       description: 'The page data.',
       type: {
@@ -58,13 +70,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof SharingWidget>;
 
 const Template: ComponentStory<typeof SharingWidget> = (args) => (
diff --git a/src/components/organisms/widgets/sharing.tsx b/src/components/organisms/widgets/sharing.tsx
index 85dadb0..c63f5db 100644
--- a/src/components/organisms/widgets/sharing.tsx
+++ b/src/components/organisms/widgets/sharing.tsx
@@ -22,6 +22,10 @@ export type SharingData = {
 };
 
 export type SharingProps = {
+  /**
+   * Set additional classnames to the sharing links list.
+   */
+  className?: string;
   /**
    * The page data to share.
    */
@@ -46,6 +50,7 @@ export type SharingProps = {
  * Render a list of sharing links inside a widget.
  */
 const Sharing: FC<SharingProps> = ({
+  className = '',
   data,
   media,
   expanded = true,
@@ -201,7 +206,7 @@ const Sharing: FC<SharingProps> = ({
 
   return (
     <Widget expanded={expanded} level={level} title={widgetTitle} {...props}>
-      <ul className={styles.list}>{getItems()}</ul>
+      <ul className={`${styles.list} ${className}`}>{getItems()}</ul>
     </Widget>
   );
 };
diff --git a/src/components/templates/page/page-layout.module.scss b/src/components/templates/page/page-layout.module.scss
index 7602492..83e5a80 100644
--- a/src/components/templates/page/page-layout.module.scss
+++ b/src/components/templates/page/page-layout.module.scss
@@ -72,6 +72,7 @@
 
 .footer {
   grid-column: 2;
+  margin: var(--spacing-sm) 0 var(--spacing-2xs);
 }
 
 .comments {
@@ -87,4 +88,9 @@
     grid-column: 2;
     margin: var(--spacing-md) 0 0;
   }
+
+  &__form {
+    max-width: 40ch;
+    margin: auto;
+  }
 }
diff --git a/src/components/templates/page/page-layout.stories.tsx b/src/components/templates/page/page-layout.stories.tsx
index 002b951..8af5f98 100644
--- a/src/components/templates/page/page-layout.stories.tsx
+++ b/src/components/templates/page/page-layout.stories.tsx
@@ -473,7 +473,7 @@ export const Blog = Template.bind({});
 Blog.args = {
   breadcrumb: postsListBreadcrumb,
   title: 'Blog',
-  headerMeta: { total: `${posts.length} posts` },
+  headerMeta: { total: posts.length },
   children: (
     <>
       <PostsList posts={posts} byYear={true} total={posts.length} />
diff --git a/src/components/templates/page/page-layout.tsx b/src/components/templates/page/page-layout.tsx
index bc90f4c..f3f3ea8 100644
--- a/src/components/templates/page/page-layout.tsx
+++ b/src/components/templates/page/page-layout.tsx
@@ -20,7 +20,7 @@ import TableOfContents from '@components/organisms/widgets/table-of-contents';
 import { type SendCommentVars } from '@services/graphql/api';
 import { sendComment } from '@services/graphql/comments';
 import useIsMounted from '@utils/hooks/use-is-mounted';
-import { FC, ReactNode, useRef, useState } from 'react';
+import { FC, HTMLAttributes, ReactNode, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 import Layout, { type LayoutProps } from '../layout/layout';
 import styles from './page-layout.module.scss';
@@ -33,6 +33,11 @@ export type PageLayoutProps = Pick<
    * True if the page accepts new comments. Default: false.
    */
   allowComments?: boolean;
+  bodyAttributes?: HTMLAttributes<HTMLDivElement>;
+  /**
+   * Set additional classnames to the body wrapper.
+   */
+  bodyClassName?: string;
   /**
    * The breadcrumb items.
    */
@@ -83,6 +88,8 @@ export type PageLayoutProps = Pick<
 const PageLayout: FC<PageLayoutProps> = ({
   children,
   allowComments = false,
+  bodyAttributes,
+  bodyClassName = '',
   breadcrumb,
   breadcrumbSchema,
   comments,
@@ -91,8 +98,8 @@ const PageLayout: FC<PageLayoutProps> = ({
   id,
   intro,
   isHome = false,
-  widgets,
   title,
+  widgets,
   withToC = false,
 }) => {
   const intl = useIntl();
@@ -202,11 +209,12 @@ const PageLayout: FC<PageLayoutProps> = ({
       {typeof children === 'string' ? (
         <div
           ref={bodyRef}
-          className={styles.body}
+          className={`${styles.body} ${bodyClassName}`}
           dangerouslySetInnerHTML={{ __html: children }}
+          {...bodyAttributes}
         />
       ) : (
-        <div ref={bodyRef} className={styles.body}>
+        <div ref={bodyRef} className={`${styles.body} ${bodyClassName}`}>
           {children}
         </div>
       )}
@@ -245,6 +253,7 @@ const PageLayout: FC<PageLayoutProps> = ({
           {allowComments && (
             <section className={styles.comments__section}>
               <CommentForm
+                className={styles.comments__form}
                 saveComment={saveComment}
                 title={commentFormTitle}
                 Notice={
diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
index 5eeabd9..995e3a9 100644
--- a/src/pages/article/[slug].tsx
+++ b/src/pages/article/[slug].tsx
@@ -1,5 +1,6 @@
 import ButtonLink from '@components/atoms/buttons/button-link';
 import Link from '@components/atoms/links/link';
+import ResponsiveImage from '@components/molecules/images/responsive-image';
 import Sharing from '@components/organisms/widgets/sharing';
 import PageLayout, {
   type PageLayoutProps,
@@ -9,15 +10,20 @@ import {
   getArticleBySlug,
 } from '@services/graphql/articles';
 import { getPostComments } from '@services/graphql/comments';
+import styles from '@styles/pages/article.module.scss';
 import { type Article, type Comment } from '@ts/types/app';
 import { loadTranslation, type Messages } from '@utils/helpers/i18n';
+import useAddPrismClassAttr from '@utils/hooks/use-add-prism-class-attr';
 import useBreadcrumb from '@utils/hooks/use-breadcrumb';
+import usePrismPlugins, { PrismPlugin } from '@utils/hooks/use-prism-plugins';
 import useSettings from '@utils/hooks/use-settings';
 import { GetStaticPaths, GetStaticProps, NextPage } from 'next';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import Script from 'next/script';
 import { ParsedUrlQuery } from 'querystring';
+import { HTMLAttributes } from 'react';
+import { useIntl } from 'react-intl';
 import { Blog, BlogPosting, Graph, WebPage } from 'schema-dts';
 import useSWR from 'swr';
 
@@ -54,16 +60,31 @@ const ArticlePage: NextPage<ArticlePageProps> = ({ comments, post }) => {
       )),
   };
 
+  const intl = useIntl();
+  const footerMetaLabel = intl.formatMessage({
+    defaultMessage: 'Read more articles about:',
+    description: 'ArticlePage: footer topics list label',
+    id: '50xc4o',
+  });
+
   const footerMeta: PageLayoutProps['footerMeta'] = {
-    topics:
-      topics &&
-      topics.map((topic) => {
+    custom: topics && {
+      label: footerMetaLabel,
+      value: topics.map((topic) => {
         return (
-          <ButtonLink key={topic.id} target={`/sujet/${topic.slug}`}>
+          <ButtonLink
+            key={topic.id}
+            target={`/sujet/${topic.slug}`}
+            className={styles.btn}
+          >
+            {topic.logo && (
+              <ResponsiveImage className={styles.btn__icon} {...topic.logo} />
+            )}{' '}
             {topic.name}
           </ButtonLink>
         );
       }),
+    },
   };
 
   const { website } = useSettings();
@@ -156,6 +177,15 @@ const ArticlePage: NextPage<ArticlePageProps> = ({ comments, post }) => {
     });
   };
 
+  const prismPlugins: PrismPlugin[] = ['command-line', 'line-numbers'];
+  const { pluginsAttribute, pluginsClassName } = usePrismPlugins(prismPlugins);
+  useAddPrismClassAttr({
+    attributes: {
+      'data-filter-output': '#output#"',
+    },
+    classNames: pluginsClassName,
+  });
+
   return (
     <>
       <Head>
@@ -173,6 +203,10 @@ const ArticlePage: NextPage<ArticlePageProps> = ({ comments, post }) => {
       />
       <PageLayout
         allowComments={true}
+        bodyAttributes={{
+          ...(pluginsAttribute as HTMLAttributes<HTMLDivElement>),
+        }}
+        bodyClassName={styles.body}
         breadcrumb={breadcrumbItems}
         breadcrumbSchema={breadcrumbSchema}
         comments={data && getCommentsList(data)}
@@ -185,6 +219,7 @@ const ArticlePage: NextPage<ArticlePageProps> = ({ comments, post }) => {
         widgets={[
           <Sharing
             key="sharing-widget"
+            className={styles.widget}
             data={{ excerpt: intro, title, url: pageUrl }}
             media={[
               'diaspora',
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index a5ef045..b6ce221 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -114,16 +114,6 @@ const BlogPage: NextPage<BlogPageProps> = ({
     '@graph': [webpageSchema, blogSchema],
   };
 
-  const postsCount = intl.formatMessage(
-    {
-      defaultMessage:
-        '{postsCount, plural, =0 {No articles} one {# article} other {# articles}}',
-      id: 'OF5cPz',
-      description: 'BlogPage: posts count meta',
-    },
-    { postsCount: totalArticles }
-  );
-
   /**
    * Retrieve the formatted meta.
    *
@@ -231,7 +221,7 @@ const BlogPage: NextPage<BlogPageProps> = ({
         title={title}
         breadcrumb={breadcrumbItems}
         breadcrumbSchema={breadcrumbSchema}
-        headerMeta={{ total: postsCount }}
+        headerMeta={{ total: totalArticles }}
         widgets={[
           <LinksListWidget
             key="thematics-list"
diff --git a/src/pages/cv.tsx b/src/pages/cv.tsx
index b3dec10..7936c84 100644
--- a/src/pages/cv.tsx
+++ b/src/pages/cv.tsx
@@ -1,4 +1,6 @@
+import Heading from '@components/atoms/headings/heading';
 import Link from '@components/atoms/links/link';
+import List from '@components/atoms/lists/list';
 import ImageWidget from '@components/organisms/widgets/image-widget';
 import SocialMedia from '@components/organisms/widgets/social-media';
 import PageLayout, {
@@ -9,11 +11,12 @@ import styles from '@styles/pages/cv.module.scss';
 import { loadTranslation } from '@utils/helpers/i18n';
 import useBreadcrumb from '@utils/hooks/use-breadcrumb';
 import useSettings from '@utils/hooks/use-settings';
+import { NestedMDXComponents } from 'mdx/types';
 import { GetStaticProps, NextPage } from 'next';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import Script from 'next/script';
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { useIntl } from 'react-intl';
 import { AboutPage, Graph, WebPage } from 'schema-dts';
 
@@ -141,6 +144,18 @@ const CVPage: NextPage = () => {
     '@graph': [webpageSchema, cvSchema],
   };
 
+  const components: NestedMDXComponents = {
+    a: (props) => <Link external={true} {...props} />,
+    h1: (props) => <Heading level={1} {...props} />,
+    h2: (props) => <Heading level={2} {...props} />,
+    h3: (props) => <Heading level={3} {...props} />,
+    h4: (props) => <Heading level={4} {...props} />,
+    h5: (props) => <Heading level={5} {...props} />,
+    h6: (props) => <Heading level={6} {...props} />,
+    Link: (props) => <Link {...props} />,
+    List: (props) => <List {...props} />,
+  };
+
   return (
     <PageLayout
       breadcrumb={breadcrumbItems}
@@ -166,7 +181,7 @@ const CVPage: NextPage = () => {
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
       />
-      <CVContent />
+      <CVContent components={components} />
     </PageLayout>
   );
 };
diff --git a/src/pages/recherche/index.tsx b/src/pages/recherche/index.tsx
index 0a7dc60..d88a293 100644
--- a/src/pages/recherche/index.tsx
+++ b/src/pages/recherche/index.tsx
@@ -140,16 +140,6 @@ const SearchPage: NextPage<SearchPageProps> = ({
     getTotalArticles(query.s as string)
   );
 
-  const postsCount = intl.formatMessage(
-    {
-      defaultMessage:
-        '{postsCount, plural, =0 {No articles} one {# article} other {# articles}}',
-      id: 'LtsVOx',
-      description: 'SearchPage: posts count meta',
-    },
-    { postsCount: totalArticles || 0 }
-  );
-
   /**
    * Retrieve the formatted meta.
    *
@@ -244,7 +234,7 @@ const SearchPage: NextPage<SearchPageProps> = ({
         title={title}
         breadcrumb={breadcrumbItems}
         breadcrumbSchema={breadcrumbSchema}
-        headerMeta={{ total: postsCount }}
+        headerMeta={{ total: totalArticles }}
         widgets={[
           <LinksListWidget
             key="thematics-list"
diff --git a/src/pages/sujet/[slug].tsx b/src/pages/sujet/[slug].tsx
index 447d969..348fe05 100644
--- a/src/pages/sujet/[slug].tsx
+++ b/src/pages/sujet/[slug].tsx
@@ -1,4 +1,5 @@
 import Heading from '@components/atoms/headings/heading';
+import ResponsiveImage from '@components/molecules/images/responsive-image';
 import PostsList, { type Post } from '@components/organisms/layout/posts-list';
 import LinksListWidget from '@components/organisms/widgets/links-list-widget';
 import PageLayout, {
@@ -10,6 +11,7 @@ import {
   getTopicsPreview,
   getTotalTopics,
 } from '@services/graphql/topics';
+import styles from '@styles/pages/topic.module.scss';
 import { type Article, type PageLink, type Topic } from '@ts/types/app';
 import { loadTranslation, type Messages } from '@utils/helpers/i18n';
 import {
@@ -35,7 +37,14 @@ export type TopicPageProps = {
 
 const TopicPage: NextPage<TopicPageProps> = ({ currentTopic, topics }) => {
   const { content, intro, meta, slug, title } = currentTopic;
-  const { articles, dates, seo, thematics } = meta;
+  const {
+    articles,
+    cover,
+    dates,
+    seo,
+    thematics,
+    website: officialWebsite,
+  } = meta;
   const intl = useIntl();
   const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({
     title,
@@ -45,6 +54,8 @@ const TopicPage: NextPage<TopicPageProps> = ({ currentTopic, topics }) => {
   const headerMeta: PageLayoutProps['headerMeta'] = {
     publication: { date: dates.publication },
     update: dates.update ? { date: dates.update } : undefined,
+    website: officialWebsite,
+    total: articles ? articles.length : undefined,
   };
 
   const { website } = useSettings();
@@ -98,10 +109,10 @@ const TopicPage: NextPage<TopicPageProps> = ({ currentTopic, topics }) => {
         ...remainingData
       } = article;
 
-      const { cover, ...remainingMeta } = articleMeta;
+      const { cover: articleCover, ...remainingMeta } = articleMeta;
 
       return {
-        cover,
+        cover: articleCover,
         excerpt: articleIntro,
         meta: getPostMeta(remainingMeta),
         url: `/article/${articleSlug}`,
@@ -122,6 +133,15 @@ const TopicPage: NextPage<TopicPageProps> = ({ currentTopic, topics }) => {
     id: '/sRqPT',
   });
 
+  const getPageHeading = () => {
+    return (
+      <>
+        {cover && <ResponsiveImage className={styles.logo} {...cover} />}
+        {title}
+      </>
+    );
+  };
+
   return (
     <>
       <Head>
@@ -140,7 +160,7 @@ const TopicPage: NextPage<TopicPageProps> = ({ currentTopic, topics }) => {
       <PageLayout
         breadcrumb={breadcrumbItems}
         breadcrumbSchema={breadcrumbSchema}
-        title={title}
+        title={getPageHeading()}
         intro={intro}
         headerMeta={headerMeta}
         widgets={
@@ -206,14 +226,15 @@ export const getStaticProps: GetStaticProps<TopicPageProps> = async ({
   const allTopics = allTopicsEdges.edges.map((edge) =>
     getPageLinkFromRawData(edge.node)
   );
+  const topicsLinks = allTopics.filter(
+    (topic) => topic.slug !== (params!.slug as TopicParams['slug'])
+  );
   const translation = await loadTranslation(locale);
 
   return {
     props: {
       currentTopic: JSON.parse(JSON.stringify(currentTopic)),
-      topics: allTopics.filter(
-        (topic) => topic.slug !== (params!.slug as TopicParams['slug'])
-      ),
+      topics: JSON.parse(JSON.stringify(topicsLinks)),
       translation,
     },
   };
diff --git a/src/services/graphql/articles.query.ts b/src/services/graphql/articles.query.ts
index d65bc9e..e02ca8e 100644
--- a/src/services/graphql/articles.query.ts
+++ b/src/services/graphql/articles.query.ts
@@ -14,6 +14,17 @@ export const articleBySlugQuery = `query PostBy($slug: ID!) {
       postsInTopic {
         ... on Topic {
           databaseId
+          featuredImage {
+            node {
+              altText
+              mediaDetails {
+                height
+                width
+              }
+              sourceUrl
+              title
+            }
+          }
           slug
           title
         }
diff --git a/src/services/graphql/topics.query.ts b/src/services/graphql/topics.query.ts
index 19be5d7..4574256 100644
--- a/src/services/graphql/topics.query.ts
+++ b/src/services/graphql/topics.query.ts
@@ -94,6 +94,17 @@ export const topicsListQuery = `query TopicsList($after: String = "", $first: In
       cursor
       node {
         databaseId
+        featuredImage {
+          node {
+            altText
+            mediaDetails {
+              height
+              width
+            }
+            sourceUrl
+            title
+          }
+        }
         slug
         title
       }
diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss
index 7b7a695..2c3c8cc 100644
--- a/src/styles/base/_typography.scss
+++ b/src/styles/base/_typography.scss
@@ -120,21 +120,15 @@ dl {
   & & {
     margin: var(--spacing-2xs) 0 0;
   }
-}
-
-dt {
-  flex: 0 0 max-content;
-  font-weight: 600;
-}
 
-dd {
-  flex: 0 0 auto;
-  margin: 0;
+  ::marker {
+    color: var(--color-primary-dark);
+  }
 }
 
 a {
   background: linear-gradient(to top, var(--color-primary) 50%, transparent 50%)
-    0 0 / 100% 200% no-repeat;
+    0 0 / 100% 201% no-repeat;
   color: var(--color-primary);
   text-decoration-thickness: 0.15em;
   text-underline-offset: 20%;
@@ -199,13 +193,3 @@ pre {
   word-break: normal;
   word-wrap: normal;
 }
-
-figure {
-  margin: var(--spacing-md) 0;
-}
-
-figcaption {
-  margin-top: var(--spacing-xs);
-  font-size: var(--font-size-sm);
-  text-align: center;
-}
diff --git a/src/styles/components/_wp-blocks.scss b/src/styles/components/_wp-blocks.scss
deleted file mode 100644
index efd6db5..0000000
--- a/src/styles/components/_wp-blocks.scss
+++ /dev/null
@@ -1,166 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
-@use "@styles/abstracts/placeholders";
-
-.wp-block-quote {
-  margin: var(--spacing-sm) 0;
-  padding: var(--spacing-sm);
-  position: relative;
-  border: fun.convert-px(1) solid var(--color-primary-lighter);
-  border-left: fun.convert-px(5) solid var(--color-primary-lighter);
-  box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
-    fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
-      var(--color-shadow-light),
-    fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0
-      var(--color-shadow-light);
-  font-style: italic;
-
-  > *:last-child {
-    margin: 0;
-  }
-
-  cite {
-    font-size: var(--font-size-sm);
-    font-style: normal;
-    font-weight: 600;
-  }
-}
-
-.wp-block-code,
-.wp-block-preformatted {
-  margin: 0 auto var(--spacing-md);
-  padding: var(--spacing-xs) var(--spacing-sm);
-  background: var(--color-bg-secondary);
-  border: fun.convert-px(1) solid var(--color-border-light);
-  color: var(--color-fg);
-}
-
-.wp-block-columns {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: var(--spacing-md);
-  margin: var(--spacing-md) 0;
-
-  @include mix.media("screen") {
-    @include mix.dimensions("sm") {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-  }
-
-  &.are-vertically-aligned-center {
-    align-items: center;
-  }
-}
-
-.wp-block-column {
-  > *:first-child {
-    margin-top: 0;
-  }
-
-  > *:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.wp-block-gallery {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: var(--spacing-sm);
-
-  .blocks-gallery-grid {
-    @extend %reset-list;
-
-    grid-column: 1 / -1;
-    grid-row: 1 / -1;
-    display: grid;
-    grid-template-columns: minmax(0, 1fr);
-    gap: var(--spacing-sm);
-  }
-
-  .blocks-gallery-item {
-    figure {
-      margin: 0;
-    }
-
-    a {
-      display: block;
-      box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
-        fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
-          var(--color-shadow-light),
-        fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0
-          var(--color-shadow-light);
-
-      &:hover,
-      &:focus {
-        transform: scale(1.05);
-        box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
-          fun.convert-px(3) fun.convert-px(3) fun.convert-px(2) 0
-            var(--color-shadow-light),
-          fun.convert-px(5) fun.convert-px(5) fun.convert-px(8) 0
-            var(--color-shadow-light);
-      }
-
-      &:focus {
-        outline: solid var(--color-primary-light);
-      }
-
-      &:active {
-        transform: scale(0.95);
-        box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
-          fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
-            var(--color-shadow-light),
-          0 0 0 0 var(--color-shadow-light);
-        outline: none;
-      }
-    }
-  }
-
-  &.aligncenter {
-    .blocks-gallery-grid {
-      align-items: center;
-    }
-  }
-
-  @for $i from 0 to 6 {
-    &.columns-#{$i} {
-      @include mix.media("screen") {
-        @include mix.dimensions("xs") {
-          grid-template-columns: repeat(2, minmax(0, 1fr));
-
-          .blocks-gallery-grid {
-            grid-template-columns: repeat(2, minmax(0, 1fr));
-          }
-        }
-
-        @include mix.dimensions("sm") {
-          grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
-
-          .blocks-gallery-grid {
-            grid-template-columns: repeat(3, minmax(0, 1fr));
-          }
-        }
-      }
-    }
-  }
-}
-
-.wp-block-image {
-  img {
-    display: block;
-    margin: auto;
-    box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
-      fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
-        var(--color-shadow-light),
-      fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0
-        var(--color-shadow-light);
-    text-align: center;
-  }
-}
-
-.wp-block-video {
-  box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
-    fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
-      var(--color-shadow-light),
-    fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0
-      var(--color-shadow-light);
-}
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index f9a1281..8ece909 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -6,7 +6,6 @@
  * Import each files separately to define vendors styles order.
  */
 @use "modern-normalize";
-@use "vendors/prism";
 
 /**
  * 2.0. Base
@@ -22,14 +21,7 @@
 @use "base/typography";
 
 /**
- * 3.0. Components
- *
- * Define styles for external components (like WordPress blocks).
- */
-@use "components/wp-blocks";
-
-/**
- * 4.0. Themes
+ * 3.0. Themes
  *
  * Define themes specific styles.
  */
diff --git a/src/styles/pages/article.module.scss b/src/styles/pages/article.module.scss
new file mode 100644
index 0000000..a42c633
--- /dev/null
+++ b/src/styles/pages/article.module.scss
@@ -0,0 +1,36 @@
+@use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/mixins" as mix;
+@use "@styles/abstracts/variables" as var;
+@use "partials/article-links";
+@use "partials/article-lists";
+@use "partials/article-media";
+@use "partials/article-prism";
+@use "partials/article-wp-blocks";
+
+.btn {
+  margin-right: var(--spacing-2xs);
+  padding: var(--spacing-2xs) var(--spacing-xs);
+
+  &__icon {
+    max-width: fun.convert-px(22);
+    margin-right: var(--spacing-2xs);
+  }
+}
+
+.body {
+  :global {
+    @include article-links.styles;
+    @include article-lists.styles;
+    @include article-media.styles;
+    @include article-prism.styles;
+    @include article-wp-blocks.styles;
+  }
+}
+
+.widget {
+  @include mix.media("screen") {
+    @include mix.dimensions("md") {
+      width: min-content;
+    }
+  }
+}
diff --git a/src/styles/pages/partials/_article-headings.scss b/src/styles/pages/partials/_article-headings.scss
new file mode 100644
index 0000000..c0c3519
--- /dev/null
+++ b/src/styles/pages/partials/_article-headings.scss
@@ -0,0 +1,57 @@
+@use "@styles/abstracts/functions" as fun;
+
+@mixin styles {
+  h1 {
+    font-size: var(--font-size-3xl);
+    font-weight: 500;
+  }
+
+  h2 {
+    padding-bottom: fun.convert-px(3);
+    background: linear-gradient(
+        to top,
+        var(--color-primary-dark) 0.3rem,
+        transparent 0.3rem
+      )
+      0 0 / 3rem 100% no-repeat;
+    font-size: var(--font-size-2xl);
+    font-weight: 500;
+    text-shadow: fun.convert-px(1) fun.convert-px(1) 0 var(--color-shadow-light);
+  }
+
+  h3 {
+    font-size: var(--font-size-xl);
+    font-weight: 500;
+  }
+
+  h4 {
+    font-size: var(--font-size-lg);
+    font-weight: 500;
+  }
+
+  h5 {
+    font-size: var(--font-size-md);
+    font-weight: 600;
+  }
+
+  h6 {
+    font-size: var(--font-size-md);
+    font-weight: 500;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: var(--color-primary-dark);
+    font-family: var(--font-family-secondary);
+    letter-spacing: 0.01ex;
+    margin: 0 0 var(--spacing-sm);
+
+    & + & {
+      margin-top: var(--spacing-md);
+    }
+  }
+}
diff --git a/src/styles/pages/partials/_article-links.scss b/src/styles/pages/partials/_article-links.scss
new file mode 100644
index 0000000..df86dcf
--- /dev/null
+++ b/src/styles/pages/partials/_article-links.scss
@@ -0,0 +1,104 @@
+@use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/variables" as var;
+
+@mixin styles {
+  a {
+    &[hreflang] {
+      &::after {
+        display: inline-block;
+
+        /* Prettier is removing spacing between content parts. */
+
+        /* prettier-ignore */
+        content: "\0000a0[" attr(hreflang) "]";
+        font-size: var(--font-size-sm);
+      }
+    }
+  }
+
+  a.download {
+    &::after {
+      display: inline-block;
+
+      /* Prettier is removing spacing between content parts. */
+
+      /* prettier-ignore */
+      content: "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z"/><path fill="#{var.$light-theme_blue}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z"/></svg>'));
+    }
+
+    &:focus:not(:active)::after {
+      /* Prettier is removing spacing between content parts. */
+
+      /* prettier-ignore */
+      content: "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z"/><path fill="#{var.$light-theme_white}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z"/></svg>'));
+    }
+
+    &[hreflang] {
+      &::after {
+        /* Prettier is removing spacing between content parts. */
+
+        /* prettier-ignore */
+        content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z"/><path fill="#{var.$light-theme_blue}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z"/></svg>'));
+      }
+    }
+  }
+
+  a.external {
+    &::after {
+      display: inline-block;
+
+      /* Prettier is removing spacing between content parts. */
+
+      /* prettier-ignore */
+      content: "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'));
+    }
+
+    &:focus:not(:active)::after {
+      /* Prettier is removing spacing between content parts. */
+
+      /* prettier-ignore */
+      content: "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'));
+    }
+
+    &[hreflang] {
+      &::after {
+        /* Prettier is removing spacing between content parts. */
+
+        /* prettier-ignore */
+        content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'));
+      }
+
+      &:focus:not(:active)::after {
+        /* Prettier is removing spacing between content parts. */
+
+        /* prettier-ignore */
+        content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'));
+      }
+    }
+  }
+
+  a.external.download {
+    &::after {
+      /* Prettier is removing spacing between content parts. */
+
+      /* prettier-ignore */
+      content: "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z"/><path fill="#{var.$light-theme_blue}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z"/></svg>')) "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'));
+    }
+
+    &[hreflang] {
+      &::after {
+        /* Prettier is removing spacing between content parts. */
+
+        /* prettier-ignore */
+        content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z"/><path fill="#{var.$light-theme_blue}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z"/></svg>')) "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'));
+      }
+
+      &:focus:not(:active)::after {
+        /* Prettier is removing spacing between content parts. */
+
+        /* prettier-ignore */
+        content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z"/><path fill="#{var.$light-theme_blue}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z"/></svg>')) "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'));
+      }
+    }
+  }
+}
diff --git a/src/styles/pages/partials/_article-lists.scss b/src/styles/pages/partials/_article-lists.scss
new file mode 100644
index 0000000..c0084b0
--- /dev/null
+++ b/src/styles/pages/partials/_article-lists.scss
@@ -0,0 +1,65 @@
+@mixin styles {
+  ol {
+    padding: 0;
+    list-style-type: none;
+    counter-reset: li;
+
+    > li {
+      display: table;
+      counter-increment: li;
+
+      &::before {
+        content: counters(li, ".") ". ";
+        display: table-cell;
+        padding-right: var(--spacing-2xs);
+        color: var(--color-secondary);
+      }
+    }
+
+    li ol > li::before {
+      content: counters(li, ".") ". ";
+    }
+  }
+
+  ul,
+  ol {
+    li:not(:last-child) {
+      margin-bottom: var(--spacing-2xs);
+    }
+
+    ::marker {
+      color: var(--color-primary-dark);
+    }
+  }
+
+  ul {
+    padding-left: var(--spacing-sm);
+  }
+
+  dl {
+    display: flex;
+    flex-flow: row wrap;
+    gap: var(--spacing-2xs);
+    width: fit-content;
+  }
+
+  ul,
+  ol,
+  dl {
+    margin: var(--spacing-sm) 0;
+
+    & & {
+      margin: var(--spacing-2xs) 0 0;
+    }
+  }
+
+  dt {
+    color: var(--color-fg-light);
+    font-weight: 600;
+  }
+
+  dd {
+    margin: 0;
+    word-break: break-all;
+  }
+}
diff --git a/src/styles/pages/partials/_article-media.scss b/src/styles/pages/partials/_article-media.scss
new file mode 100644
index 0000000..8359881
--- /dev/null
+++ b/src/styles/pages/partials/_article-media.scss
@@ -0,0 +1,11 @@
+@mixin styles {
+  figure {
+    margin: var(--spacing-md) 0;
+  }
+
+  figcaption {
+    margin-top: var(--spacing-xs);
+    font-size: var(--font-size-sm);
+    text-align: center;
+  }
+}
diff --git a/src/styles/pages/partials/_article-prism.scss b/src/styles/pages/partials/_article-prism.scss
new file mode 100644
index 0000000..025e0c0
--- /dev/null
+++ b/src/styles/pages/partials/_article-prism.scss
@@ -0,0 +1,301 @@
+@use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/mixins" as mix;
+
+@mixin styles {
+  .code-toolbar {
+    --gutter-size: clamp(#{fun.convert-px(75)}, 20vw, #{fun.convert-px(90)});
+    --toolbar-height: #{fun.convert-px(90)};
+
+    position: relative;
+    margin-top: calc(var(--toolbar-height) + var(--spacing-md));
+
+    @include mix.media("screen") {
+      @include mix.dimensions("2xs") {
+        --toolbar-height: #{fun.convert-px(60)};
+      }
+    }
+
+    .toolbar {
+      display: grid;
+      grid-template-columns: max-content minmax(0, 1fr);
+      justify-items: end;
+      width: 100%;
+      height: var(--toolbar-height);
+      position: absolute;
+      top: calc(var(--toolbar-height) * -1);
+      left: 0;
+      right: 0;
+      background: var(--color-bg-tertiary);
+      border: fun.convert-px(1) solid var(--color-border);
+
+      @include mix.media("screen") {
+        @include mix.dimensions("2xs") {
+          display: flex;
+          flex-flow: row wrap;
+        }
+      }
+    }
+
+    .toolbar-item {
+      display: flex;
+      align-items: center;
+    }
+
+    .toolbar-item:nth-child(1) {
+      grid-column: 1;
+      grid-row: 1 / 3;
+      margin-right: auto;
+      padding: 0 var(--spacing-sm);
+      background: var(--color-bg-code);
+      border-right: fun.convert-px(1) solid var(--color-border);
+      color: var(--color-primary-darker);
+      font-size: var(--font-size-sm);
+      font-weight: 600;
+    }
+
+    .toolbar-item:nth-child(2) {
+      grid-column: 2;
+      grid-row: 1;
+      margin: 0 var(--spacing-2xs);
+    }
+
+    .toolbar-item:nth-child(3) {
+      grid-column: 2;
+      grid-row: 2;
+      margin: 0 var(--spacing-2xs);
+    }
+  }
+
+  pre[class*="language-"] {
+    max-height: max(30vw, fun.convert-px(300));
+    margin: var(--spacing-md) 0;
+    padding: 0;
+    position: relative;
+    background: var(--color-bg-secondary);
+    color: var(--color-fg);
+    border: fun.convert-px(1) solid var(--color-border);
+
+    > code {
+      display: block;
+      padding: var(--spacing-xs) 0 var(--spacing-xs)
+        calc(var(--gutter-size) + var(--spacing-xs));
+    }
+
+    .line-numbers-rows,
+    .command-line-prompt {
+      width: var(--gutter-size);
+      min-height: 100%;
+      padding: var(--spacing-xs) var(--spacing-2xs);
+      position: absolute;
+      top: 0;
+      left: 0;
+      pointer-events: none;
+      user-select: none;
+      background: var(--color-bg);
+      border-right: fun.convert-px(1) solid var(--color-border);
+    }
+
+    .token {
+      &.comment,
+      &.doc-comment {
+        color: var(--color-fg-light);
+      }
+
+      &.punctuation {
+        color: var(--color-fg);
+      }
+
+      &.attr-name,
+      &.hexcode,
+      &.inserted,
+      &.string {
+        color: var(--color-token-green);
+      }
+
+      &.class,
+      &.coord,
+      &.id,
+      &.function {
+        color: var(--color-token-purple);
+      }
+
+      &.builtin,
+      &.builtin.class-name,
+      &.property-access,
+      &.regex,
+      &.scope {
+        color: var(--color-token-magenta);
+      }
+
+      &.class-name,
+      &.constant,
+      &.global,
+      &.interpolation,
+      &.key,
+      &.package,
+      &.this,
+      &.title,
+      &.variable {
+        color: var(--color-token-blue);
+      }
+
+      &.combinator,
+      &.keyword,
+      &.operator,
+      &.pseudo-class,
+      &.pseudo-element,
+      &.rule,
+      &.selector,
+      &.unit {
+        color: var(--color-token-orange);
+      }
+
+      &.attr-value,
+      &.boolean,
+      &.number {
+        color: var(--color-token-yellow);
+      }
+
+      &.delimiter,
+      &.doctype,
+      &.parameter,
+      &.parent,
+      &.property,
+      &.shebang,
+      &.tag {
+        color: var(--color-token-cyan);
+      }
+
+      &.deleted {
+        color: var(--color-token-red);
+      }
+
+      &.punctuation.brace-hover,
+      &.punctuation.brace-selected {
+        background: var(--color-bg);
+        outline: solid fun.convert-px(1) var(--color-primary-light);
+      }
+    }
+
+    span.inline-color-wrapper {
+      background: url(fun.encode-svg(
+        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="gray" d="M0 0h2v2H0z"/><path fill="white" d="M0 0h1v1H0zM1 1h1v1H1z"/></svg>'
+      ));
+
+      /* Prevent glitches where 1px from the repeating pattern could be seen. */
+      background-position: center;
+      background-size: 110%;
+
+      display: inline-block;
+      height: 1.1ch;
+      width: 1.1ch;
+      margin: 0 0.5ch 0 0;
+      border: fun.convert-px(1) solid var(--color-bg);
+      outline: fun.convert-px(1) solid var(--color-border-dark);
+      overflow: hidden;
+    }
+
+    span.inline-color {
+      display: block;
+
+      /* To prevent visual glitches again */
+      height: 120%;
+      width: 120%;
+    }
+  }
+
+  pre.line-numbers {
+    counter-reset: lineNumber;
+
+    .line-numbers-rows {
+      > span {
+        counter-increment: lineNumber;
+
+        &::before {
+          display: block;
+          padding: 0 var(--spacing-xs);
+          content: counter(lineNumber);
+          color: var(--color-primary-darker);
+          text-align: right;
+          line-height: var(--line-height);
+        }
+      }
+    }
+  }
+
+  pre.command-line {
+    --gutter-size: clamp(#{fun.convert-px(195)}, 48vw, #{fun.convert-px(235)});
+
+    ~ .toolbar {
+      --gutter-size: clamp(
+        #{fun.convert-px(195)},
+        48vw,
+        #{fun.convert-px(235)}
+      );
+    }
+
+    .command-line-prompt {
+      > span {
+        &::before {
+          display: block;
+          content: "";
+        }
+
+        &[data-user]::before {
+          content: "[" attr(data-user) "@" attr(data-host) "] $";
+        }
+
+        &[data-user="root"]::before {
+          content: "[" attr(data-user) "@" attr(data-host) "] #";
+        }
+
+        &[data-prompt]::before {
+          content: attr(data-prompt);
+        }
+      }
+    }
+  }
+
+  .copy-to-clipboard-button,
+  .prism-color-scheme-button {
+    display: block;
+    padding: fun.convert-px(3) var(--spacing-xs);
+    background: var(--color-bg);
+    border: 0.4ex solid var(--color-primary);
+    border-radius: fun.convert-px(30);
+    box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
+        var(--color-shadow),
+      fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2)
+        var(--color-shadow),
+      fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4)
+        var(--color-shadow);
+    color: var(--color-primary);
+    font-size: var(--font-size-sm);
+    font-weight: 600;
+    transition: all 0.35s ease-in-out 0s;
+
+    &:hover,
+    &:focus {
+      transform: translateX(#{fun.convert-px(-2)})
+        translateY(#{fun.convert-px(-2)});
+      box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
+          var(--color-shadow-light),
+        fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2)
+          var(--color-shadow-light),
+        fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4)
+          var(--color-shadow-light),
+        fun.convert-px(4) fun.convert-px(7) fun.convert-px(8) fun.convert-px(-3)
+          var(--color-shadow-light);
+    }
+
+    &:focus {
+      text-decoration: underline var(--color-primary) fun.convert-px(3);
+    }
+
+    &:active {
+      text-decoration: none;
+      transform: translateY(#{fun.convert-px(2)});
+      box-shadow: 0 0 0 0 var(--color-shadow);
+    }
+  }
+}
diff --git a/src/styles/pages/partials/_article-wp-blocks.scss b/src/styles/pages/partials/_article-wp-blocks.scss
new file mode 100644
index 0000000..d4fed5a
--- /dev/null
+++ b/src/styles/pages/partials/_article-wp-blocks.scss
@@ -0,0 +1,168 @@
+@use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/mixins" as mix;
+@use "@styles/abstracts/placeholders";
+
+@mixin styles {
+  .wp-block-quote {
+    margin: var(--spacing-sm) 0;
+    padding: var(--spacing-sm);
+    position: relative;
+    border: fun.convert-px(1) solid var(--color-primary-lighter);
+    border-left: fun.convert-px(5) solid var(--color-primary-lighter);
+    box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
+      fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
+        var(--color-shadow-light),
+      fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0
+        var(--color-shadow-light);
+    font-style: italic;
+
+    > *:last-child {
+      margin: 0;
+    }
+
+    cite {
+      font-size: var(--font-size-sm);
+      font-style: normal;
+      font-weight: 600;
+    }
+  }
+
+  .wp-block-code,
+  .wp-block-preformatted {
+    margin: 0 auto var(--spacing-md);
+    padding: var(--spacing-xs) var(--spacing-sm);
+    background: var(--color-bg-secondary);
+    border: fun.convert-px(1) solid var(--color-border-light);
+    color: var(--color-fg);
+  }
+
+  .wp-block-columns {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--spacing-md);
+    margin: var(--spacing-md) 0;
+
+    @include mix.media("screen") {
+      @include mix.dimensions("sm") {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+    }
+
+    &.are-vertically-aligned-center {
+      align-items: center;
+    }
+  }
+
+  .wp-block-column {
+    > *:first-child {
+      margin-top: 0;
+    }
+
+    > *:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .wp-block-gallery {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--spacing-sm);
+
+    .blocks-gallery-grid {
+      @extend %reset-list;
+
+      grid-column: 1 / -1;
+      grid-row: 1 / -1;
+      display: grid;
+      grid-template-columns: minmax(0, 1fr);
+      gap: var(--spacing-sm);
+    }
+
+    .blocks-gallery-item {
+      figure {
+        margin: 0;
+      }
+
+      a {
+        display: block;
+        box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
+          fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
+            var(--color-shadow-light),
+          fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0
+            var(--color-shadow-light);
+
+        &:hover,
+        &:focus {
+          transform: scale(1.05);
+          box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
+            fun.convert-px(3) fun.convert-px(3) fun.convert-px(2) 0
+              var(--color-shadow-light),
+            fun.convert-px(5) fun.convert-px(5) fun.convert-px(8) 0
+              var(--color-shadow-light);
+        }
+
+        &:focus {
+          outline: solid var(--color-primary-light);
+        }
+
+        &:active {
+          transform: scale(0.95);
+          box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
+            fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
+              var(--color-shadow-light),
+            0 0 0 0 var(--color-shadow-light);
+          outline: none;
+        }
+      }
+    }
+
+    &.aligncenter {
+      .blocks-gallery-grid {
+        align-items: center;
+      }
+    }
+
+    @for $i from 0 to 6 {
+      &.columns-#{$i} {
+        @include mix.media("screen") {
+          @include mix.dimensions("xs") {
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+
+            .blocks-gallery-grid {
+              grid-template-columns: repeat(2, minmax(0, 1fr));
+            }
+          }
+
+          @include mix.dimensions("sm") {
+            grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
+
+            .blocks-gallery-grid {
+              grid-template-columns: repeat(3, minmax(0, 1fr));
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .wp-block-image {
+    img {
+      display: block;
+      margin: auto;
+      box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
+        fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
+          var(--color-shadow-light),
+        fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0
+          var(--color-shadow-light);
+      text-align: center;
+    }
+  }
+
+  .wp-block-video {
+    box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
+      fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
+        var(--color-shadow-light),
+      fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0
+        var(--color-shadow-light);
+  }
+}
diff --git a/src/styles/pages/topic.module.scss b/src/styles/pages/topic.module.scss
new file mode 100644
index 0000000..badb694
--- /dev/null
+++ b/src/styles/pages/topic.module.scss
@@ -0,0 +1,6 @@
+@use "@styles/abstracts/functions" as fun;
+
+.logo {
+  max-width: fun.convert-px(50);
+  margin-right: var(--spacing-xs);
+}
diff --git a/src/ts/types/app.ts b/src/ts/types/app.ts
index f354118..a3b9889 100644
--- a/src/ts/types/app.ts
+++ b/src/ts/types/app.ts
@@ -81,6 +81,7 @@ export type Page<T extends PageKind> = {
 
 export type PageLink = {
   id: number;
+  logo?: Image;
   name: string;
   slug: string;
 };
diff --git a/src/ts/types/raw-data.ts b/src/ts/types/raw-data.ts
index 7e12e7f..ba6d596 100644
--- a/src/ts/types/raw-data.ts
+++ b/src/ts/types/raw-data.ts
@@ -89,14 +89,17 @@ export type RawThematic = RawPage & {
 
 export type RawThematicPreview = Pick<
   RawThematic,
-  'databaseId' | 'slug' | 'title'
+  'databaseId' | 'featuredImage' | 'slug' | 'title'
 >;
 
 export type RawTopic = RawPage & {
   acfTopics: ACFTopics;
 };
 
-export type RawTopicPreview = Pick<RawTopic, 'databaseId' | 'slug' | 'title'>;
+export type RawTopicPreview = Pick<
+  RawTopic,
+  'databaseId' | 'featuredImage' | 'slug' | 'title'
+>;
 
 export type TotalItems = {
   pageInfo: Pick<PageInfo, 'total'>;
diff --git a/src/utils/helpers/pages.ts b/src/utils/helpers/pages.ts
index 93582f0..62337db 100644
--- a/src/utils/helpers/pages.ts
+++ b/src/utils/helpers/pages.ts
@@ -5,12 +5,14 @@ import {
   type RawThematicPreview,
   type RawTopicPreview,
 } from '@ts/types/raw-data';
+import { getImageFromRawData } from './images';
 
 /**
  * Convert raw data to a Link object.
  *
  * @param data - An object.
  * @param {number} data.databaseId - The data id.
+ * @param {number} [data.logo] - The data logo.
  * @param {string} data.slug - The data slug.
  * @param {string} data.title - The data name.
  * @returns {PageLink} The link data (id, slug and title).
@@ -18,10 +20,11 @@ import {
 export const getPageLinkFromRawData = (
   data: RawThematicPreview | RawTopicPreview
 ): PageLink => {
-  const { databaseId, slug, title } = data;
+  const { databaseId, featuredImage, slug, title } = data;
 
   return {
     id: databaseId,
+    logo: featuredImage ? getImageFromRawData(featuredImage?.node) : undefined,
     name: title,
     slug,
   };
diff --git a/src/utils/hooks/use-add-prism-class-attr.tsx b/src/utils/hooks/use-add-prism-class-attr.tsx
new file mode 100644
index 0000000..7d33cc2
--- /dev/null
+++ b/src/utils/hooks/use-add-prism-class-attr.tsx
@@ -0,0 +1,60 @@
+import { useCallback, useEffect, useState } from 'react';
+
+export type AttributesMap = {
+  [key: string]: string;
+};
+
+export type useAddPrismClassAttrProps = {
+  attributes?: AttributesMap;
+  classNames?: string;
+};
+
+/**
+ * Add classnames and/or attributes to pre elements.
+ *
+ * @param props - An object of attributes and classnames.
+ */
+const useAddPrismClassAttr = ({
+  attributes,
+  classNames,
+}: useAddPrismClassAttrProps) => {
+  const [elements, setElements] = useState<HTMLPreElement[]>([]);
+
+  useEffect(() => {
+    const targetElements = document.querySelectorAll('pre');
+    setElements(Array.from(targetElements));
+  }, []);
+
+  const setClassNameAndAttributes = useCallback(
+    (array: HTMLElement[]) => {
+      array.forEach((el) => {
+        if (classNames) {
+          const classNamesArray = classNames.split(' ');
+          const isCommandLine = el.classList.contains('command-line');
+          const removedClassName = isCommandLine
+            ? 'line-numbers'
+            : 'command-line';
+          const filteredClassNames = classNamesArray.filter(
+            (className) => className !== removedClassName
+          );
+          filteredClassNames.forEach((className) =>
+            el.classList.add(className)
+          );
+        }
+
+        if (attributes) {
+          for (const [key, value] of Object.entries(attributes)) {
+            el.setAttribute(key, value);
+          }
+        }
+      });
+    },
+    [attributes, classNames]
+  );
+
+  useEffect(() => {
+    if (elements.length > 0) setClassNameAndAttributes(elements);
+  }, [elements, setClassNameAndAttributes]);
+};
+
+export default useAddPrismClassAttr;
-- 
cgit v1.2.3


From 4e53a8654441481029746ff4e35a4a19c8d83709 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 17 May 2022 18:43:24 +0200
Subject: chore: make some widgets scrollable (like ToC)

---
 src/components/molecules/layout/widget.module.scss   | 20 ++++++++++++++++++++
 src/components/molecules/layout/widget.tsx           |  8 +++++++-
 .../organisms/widgets/links-list-widget.tsx          |  1 +
 3 files changed, 28 insertions(+), 1 deletion(-)

(limited to 'src/components/organisms/widgets')

diff --git a/src/components/molecules/layout/widget.module.scss b/src/components/molecules/layout/widget.module.scss
index 5854206..27d7ffd 100644
--- a/src/components/molecules/layout/widget.module.scss
+++ b/src/components/molecules/layout/widget.module.scss
@@ -1,4 +1,5 @@
 @use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/mixins" as mix;
 
 .widget {
   display: flex;
@@ -32,6 +33,25 @@
     }
   }
 
+  &--expanded#{&}--has-scroll {
+    @include mix.media("screen") {
+      @include mix.dimensions("lg") {
+        max-height: 95vh;
+
+        .widget__body {
+          overflow: hidden;
+        }
+
+        &:hover,
+        &:focus-within {
+          .widget__body {
+            overflow-y: auto;
+          }
+        }
+      }
+    }
+  }
+
   &--expanded & {
     &__body {
       max-height: 10000px; // needs a fixed value for transition.
diff --git a/src/components/molecules/layout/widget.tsx b/src/components/molecules/layout/widget.tsx
index feb2add..f50fe80 100644
--- a/src/components/molecules/layout/widget.tsx
+++ b/src/components/molecules/layout/widget.tsx
@@ -20,6 +20,10 @@ export type WidgetProps = Pick<
    * Determine if the widget body should have borders. Default: false.
    */
   withBorders?: boolean;
+  /**
+   * Determine if a vertical scrollbar should be displayed. Default: false.
+   */
+  withScroll?: boolean;
 };
 
 /**
@@ -34,16 +38,18 @@ const Widget: FC<WidgetProps> = ({
   level,
   title,
   withBorders = false,
+  withScroll = false,
 }) => {
   const [isExpanded, setIsExpanded] = useState<boolean>(expanded);
   const stateClass = isExpanded ? 'widget--expanded' : 'widget--collapsed';
   const bordersClass = withBorders
     ? 'widget--has-borders'
     : 'widget--no-borders';
+  const scrollClass = withScroll ? 'widget--has-scroll' : 'widget--no-scroll';
 
   return (
     <div
-      className={`${styles.widget} ${styles[bordersClass]} ${styles[stateClass]} ${className}`}
+      className={`${styles.widget} ${styles[bordersClass]} ${styles[stateClass]} ${styles[scrollClass]} ${className}`}
     >
       <HeadingButton
         level={level}
diff --git a/src/components/organisms/widgets/links-list-widget.tsx b/src/components/organisms/widgets/links-list-widget.tsx
index 3f291e3..90dae4a 100644
--- a/src/components/organisms/widgets/links-list-widget.tsx
+++ b/src/components/organisms/widgets/links-list-widget.tsx
@@ -69,6 +69,7 @@ const LinksListWidget: FC<LinksListWidgetProps> = ({
       expanded={true}
       withBorders={true}
       className={styles.widget}
+      withScroll={true}
       {...props}
     >
       <List
-- 
cgit v1.2.3


From 802548124071039f83ebfa2605e839ded82b5689 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 20 May 2022 22:22:35 +0200
Subject: chore: update some styles

* Improve wp-blocks-columns, wp-block-quote and some images
* Make Sharing widget consistent between pages
* Remove margin option from lists
* Fix Topic logo alignement
---
 src/components/atoms/lists/list.module.scss        | 10 ------
 src/components/atoms/lists/list.tsx                | 12 ++-----
 src/components/organisms/layout/cards-list.tsx     |  1 -
 .../organisms/layout/posts-list.module.scss        |  9 ++++-
 src/components/organisms/layout/posts-list.tsx     |  4 +--
 .../organisms/widgets/links-list-widget.tsx        |  1 -
 src/pages/article/[slug].tsx                       |  5 +--
 src/pages/projets/[slug].tsx                       |  9 +++--
 src/pages/sujet/[slug].tsx                         |  2 +-
 src/styles/pages/partials/_article-wp-blocks.scss  | 38 +++++++++++-----------
 src/styles/pages/project.module.scss               | 10 ++++++
 src/styles/pages/topic.module.scss                 |  2 +-
 12 files changed, 51 insertions(+), 52 deletions(-)
 create mode 100644 src/styles/pages/project.module.scss

(limited to 'src/components/organisms/widgets')

diff --git a/src/components/atoms/lists/list.module.scss b/src/components/atoms/lists/list.module.scss
index f647072..95f9b40 100644
--- a/src/components/atoms/lists/list.module.scss
+++ b/src/components/atoms/lists/list.module.scss
@@ -7,10 +7,6 @@
     color: var(--color-primary-dark);
   }
 
-  & & {
-    margin-top: var(--spacing-2xs);
-  }
-
   &--ordered {
     padding: 0;
     counter-reset: li;
@@ -33,12 +29,6 @@
     padding: 0 0 0 var(--spacing-sm);
   }
 
-  &--has-margin &__item {
-    &:not(:last-child) {
-      margin-bottom: var(--spacing-2xs);
-    }
-  }
-
   &--flex {
     @extend %reset-list;
 
diff --git a/src/components/atoms/lists/list.tsx b/src/components/atoms/lists/list.tsx
index 711ade1..aa0a241 100644
--- a/src/components/atoms/lists/list.tsx
+++ b/src/components/atoms/lists/list.tsx
@@ -33,10 +33,6 @@ export type ListProps = {
    * The list kind.
    */
   kind?: 'ordered' | 'unordered' | 'flex';
-  /**
-   * Set margin between list items. Default: true.
-   */
-  withMargin?: boolean;
 };
 
 /**
@@ -49,11 +45,9 @@ const List: FC<ListProps> = ({
   items,
   itemsClassName = '',
   kind = 'unordered',
-  withMargin = true,
 }) => {
   const ListTag = kind === 'ordered' ? 'ol' : 'ul';
   const kindClass = `list--${kind}`;
-  const marginClass = withMargin ? 'list--has-margin' : 'list--no-margin';
 
   /**
    * Retrieve the list items.
@@ -66,7 +60,7 @@ const List: FC<ListProps> = ({
         {value}
         {child && (
           <ListTag
-            className={`${styles.list} ${styles[kindClass]} ${styles[marginClass]} ${className}`}
+            className={`${styles.list} ${styles[kindClass]} ${className}`}
           >
             {getItems(child)}
           </ListTag>
@@ -76,9 +70,7 @@ const List: FC<ListProps> = ({
   };
 
   return (
-    <ListTag
-      className={`${styles.list} ${styles[kindClass]} ${styles[marginClass]} ${className}`}
-    >
+    <ListTag className={`${styles.list} ${styles[kindClass]} ${className}`}>
       {getItems(items)}
     </ListTag>
   );
diff --git a/src/components/organisms/layout/cards-list.tsx b/src/components/organisms/layout/cards-list.tsx
index 1558d7c..0168bb2 100644
--- a/src/components/organisms/layout/cards-list.tsx
+++ b/src/components/organisms/layout/cards-list.tsx
@@ -77,7 +77,6 @@ const CardsList: FC<CardsListProps> = ({
     <List
       kind="flex"
       items={getCards(items)}
-      withMargin={false}
       className={`${styles.wrapper} ${styles[kindModifier]} ${className}`}
     />
   );
diff --git a/src/components/organisms/layout/posts-list.module.scss b/src/components/organisms/layout/posts-list.module.scss
index a006914..b09bb12 100644
--- a/src/components/organisms/layout/posts-list.module.scss
+++ b/src/components/organisms/layout/posts-list.module.scss
@@ -3,6 +3,10 @@
 @use "@styles/abstracts/placeholders";
 
 .section {
+  &:not(:last-of-type) {
+    margin-bottom: var(--spacing-md);
+  }
+
   @include mix.media("screen") {
     @include mix.dimensions("md") {
       display: grid;
@@ -17,8 +21,11 @@
   @extend %reset-ordered-list;
 
   .item {
-    margin-bottom: var(--spacing-md);
     border-bottom: fun.convert-px(1) solid var(--color-border);
+
+    &:not(:last-child) {
+      margin-bottom: var(--spacing-md);
+    }
   }
 }
 
diff --git a/src/components/organisms/layout/posts-list.tsx b/src/components/organisms/layout/posts-list.tsx
index 50192dd..608130e 100644
--- a/src/components/organisms/layout/posts-list.tsx
+++ b/src/components/organisms/layout/posts-list.tsx
@@ -100,6 +100,8 @@ const PostsList: FC<PostsListProps> = ({
   const isMounted = useIsMounted(listRef);
   const { blog } = useSettings();
 
+  const lastPostId = posts.length ? posts[posts.length - 1].id : 0;
+
   /**
    * Retrieve the list of posts.
    *
@@ -111,8 +113,6 @@ const PostsList: FC<PostsListProps> = ({
     allPosts: Post[],
     headingLevel: HeadingLevel = 2
   ): JSX.Element => {
-    const lastPostId = allPosts[allPosts.length - 1].id;
-
     return (
       <ol className={styles.list} ref={listRef}>
         {allPosts.map(({ id, ...post }) => (
diff --git a/src/components/organisms/widgets/links-list-widget.tsx b/src/components/organisms/widgets/links-list-widget.tsx
index 90dae4a..a9c677b 100644
--- a/src/components/organisms/widgets/links-list-widget.tsx
+++ b/src/components/organisms/widgets/links-list-widget.tsx
@@ -75,7 +75,6 @@ const LinksListWidget: FC<LinksListWidgetProps> = ({
       <List
         items={getListItems(items)}
         kind={kind}
-        withMargin={false}
         className={`${styles.list} ${styles[listKindClass]} ${className}`}
         itemsClassName={styles.list__item}
       />
diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
index 7abbabc..812fffe 100644
--- a/src/pages/article/[slug].tsx
+++ b/src/pages/article/[slug].tsx
@@ -99,10 +99,7 @@ const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({
             target={`/sujet/${topic.slug}`}
             className={styles.btn}
           >
-            {topic.logo && (
-              <ResponsiveImage className={styles.btn__icon} {...topic.logo} />
-            )}{' '}
-            {topic.name}
+            {topic.logo && <ResponsiveImage {...topic.logo} />} {topic.name}
           </ButtonLink>
         );
       }),
diff --git a/src/pages/projets/[slug].tsx b/src/pages/projets/[slug].tsx
index cf7d0dc..e9b36fa 100644
--- a/src/pages/projets/[slug].tsx
+++ b/src/pages/projets/[slug].tsx
@@ -10,6 +10,7 @@ import { getLayout } from '@components/templates/layout/layout';
 import PageLayout, {
   PageLayoutProps,
 } from '@components/templates/page/page-layout';
+import styles from '@styles/pages/project.module.scss';
 import {
   type NextPageWithLayout,
   type ProjectPreview,
@@ -53,7 +54,7 @@ const ProjectPage: NextPageWithLayout<ProjectPageProps> = ({ project }) => {
   const components: NestedMDXComponents = {
     Code: (props) => <Code {...props} />,
     Gallery: (props) => <Gallery {...props} />,
-    Image: (props) => <ResponsiveImage {...props} />,
+    Image: (props) => <ResponsiveImage withBorders={true} {...props} />,
     Link: (props) => <Link {...props} />,
     pre: ({ children }) => <Code {...children.props} />,
   };
@@ -66,7 +67,10 @@ const ProjectPage: NextPageWithLayout<ProjectPageProps> = ({ project }) => {
 
   const headerMeta: PageLayoutProps['headerMeta'] = {
     publication: { date: dates.publication },
-    update: dates.update ? { date: dates.update } : undefined,
+    update:
+      dates.update && dates.update !== dates.publication
+        ? { date: dates.update }
+        : undefined,
   };
 
   /**
@@ -202,6 +206,7 @@ const ProjectPage: NextPageWithLayout<ProjectPageProps> = ({ project }) => {
               'linkedin',
               'twitter',
             ]}
+            className={styles.widget}
           />,
         ]}
       >
diff --git a/src/pages/sujet/[slug].tsx b/src/pages/sujet/[slug].tsx
index 271f4ec..b4845eb 100644
--- a/src/pages/sujet/[slug].tsx
+++ b/src/pages/sujet/[slug].tsx
@@ -191,7 +191,7 @@ const TopicPage: NextPageWithLayout<TopicPageProps> = ({
             : []
         }
       >
-        <div dangerouslySetInnerHTML={{ __html: content }} />
+        {content && <div dangerouslySetInnerHTML={{ __html: content }} />}
         {articles && (
           <>
             <Heading level={2}>
diff --git a/src/styles/pages/partials/_article-wp-blocks.scss b/src/styles/pages/partials/_article-wp-blocks.scss
index 33e59a1..86be062 100644
--- a/src/styles/pages/partials/_article-wp-blocks.scss
+++ b/src/styles/pages/partials/_article-wp-blocks.scss
@@ -7,13 +7,12 @@
     margin: var(--spacing-sm) 0;
     padding: var(--spacing-sm);
     position: relative;
-    border: fun.convert-px(1) solid var(--color-primary-lighter);
-    border-left: fun.convert-px(5) solid var(--color-primary-lighter);
-    box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
-      fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
-        var(--color-shadow-light),
-      fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0
-        var(--color-shadow-light);
+    border: fun.convert-px(1) solid var(--color-border-dark);
+    border-left: fun.convert-px(5) solid var(--color-border-dark);
+    box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) 0
+        var(--color-shadow),
+      fun.convert-px(3) fun.convert-px(3) fun.convert-px(4) 0
+        var(--color-shadow);
     font-style: italic;
 
     > *:last-child {
@@ -21,6 +20,7 @@
     }
 
     cite {
+      color: var(--color-fg-light);
       font-size: var(--font-size-sm);
       font-style: normal;
       font-weight: 600;
@@ -62,18 +62,26 @@
     }
   }
 
+  .wp-block-image,
+  .wp-block-video {
+    padding: fun.convert-px(4);
+    border: fun.convert-px(1) solid var(--color-border);
+    box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) 0
+      var(--color-shadow);
+  }
+
   .wp-block-image {
     display: flex;
     flex-flow: column;
     width: fit-content;
     margin: 0 auto;
-    padding: fun.convert-px(4);
     position: relative;
-    border: fun.convert-px(1) solid var(--color-border);
-    box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) 0
-      var(--color-shadow);
     text-align: center;
 
+    img {
+      margin: auto;
+    }
+
     figcaption {
       margin-top: fun.convert-px(4);
       font-size: var(--font-size-sm);
@@ -166,12 +174,4 @@
       object-fit: cover;
     }
   }
-
-  .wp-block-video {
-    box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
-      fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
-        var(--color-shadow-light),
-      fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0
-        var(--color-shadow-light);
-  }
 }
diff --git a/src/styles/pages/project.module.scss b/src/styles/pages/project.module.scss
new file mode 100644
index 0000000..3b1b5cc
--- /dev/null
+++ b/src/styles/pages/project.module.scss
@@ -0,0 +1,10 @@
+@use "@styles/abstracts/mixins" as mix;
+
+.widget {
+  @include mix.media("screen") {
+    @include mix.dimensions("md") {
+      width: min-content;
+      gap: var(--spacing-2xs);
+    }
+  }
+}
diff --git a/src/styles/pages/topic.module.scss b/src/styles/pages/topic.module.scss
index badb694..fd5f742 100644
--- a/src/styles/pages/topic.module.scss
+++ b/src/styles/pages/topic.module.scss
@@ -2,5 +2,5 @@
 
 .logo {
   max-width: fun.convert-px(50);
-  margin-right: var(--spacing-xs);
+  margin: 0 var(--spacing-xs) 0 0;
 }
-- 
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/organisms/widgets')

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


From 321dae4a47594af83269fa560b375965d7f35763 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Sun, 22 May 2022 15:09:39 +0200
Subject: fix: render all images unoptimized in Storybook

There is a bug with next/image and Storybook. I was manually adding
`unoptimized` to images. Instead we can use a workaround by adding an
extra config in Storybook `preview.js` file.
---
 .storybook/preview.js                              | 18 +++++++
 .../molecules/images/flipping-logo.stories.tsx     |  3 --
 .../molecules/images/responsive-image.stories.tsx  | 57 ++++++++++++++++++++--
 .../molecules/layout/branding.stories.tsx          |  5 --
 src/components/molecules/layout/card.stories.tsx   |  1 -
 .../organisms/images/gallery.stories.tsx           |  8 +--
 .../organisms/layout/cards-list.stories.tsx        |  6 ---
 .../organisms/layout/cards-list.test.tsx           |  6 ---
 .../organisms/layout/comment.stories.tsx           |  2 -
 .../organisms/layout/comments-list.stories.tsx     | 10 ----
 src/components/organisms/layout/header.stories.tsx |  3 --
 .../organisms/layout/overview.stories.tsx          |  1 -
 .../organisms/layout/posts-list.stories.tsx        |  4 --
 .../organisms/layout/posts-list.test.tsx           |  4 --
 .../organisms/layout/summary.stories.tsx           |  1 -
 .../organisms/widgets/image-widget.stories.tsx     |  1 -
 .../templates/page/page-layout.stories.tsx         | 22 +++------
 src/components/templates/page/page-layout.test.tsx |  2 -
 18 files changed, 80 insertions(+), 74 deletions(-)

(limited to 'src/components/organisms/widgets')

diff --git a/.storybook/preview.js b/.storybook/preview.js
index 344df2a..e30927b 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,6 +1,24 @@
 import '@styles/globals.scss';
+import * as NextImage from 'next/image';
 import { IntlProvider } from 'react-intl';
 
+const OriginalNextImage = NextImage.default;
+
+Object.defineProperty(NextImage, 'default', {
+  configurable: true,
+  value: (props) =>
+    typeof props.src === 'string' ? (
+      <OriginalNextImage {...props} unoptimized blurDataURL={props.src} />
+    ) : (
+      <OriginalNextImage {...props} unoptimized />
+    ),
+});
+
+Object.defineProperty(NextImage, '__esModule', {
+  configurable: true,
+  value: true,
+});
+
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
diff --git a/src/components/molecules/images/flipping-logo.stories.tsx b/src/components/molecules/images/flipping-logo.stories.tsx
index 40a4c49..9d09293 100644
--- a/src/components/molecules/images/flipping-logo.stories.tsx
+++ b/src/components/molecules/images/flipping-logo.stories.tsx
@@ -54,7 +54,6 @@ export default {
         required: true,
       },
     },
-    unoptimized: { table: { disable: true } },
   },
 } as ComponentMeta<typeof FlippingLogoComponent>;
 
@@ -70,6 +69,4 @@ FlippingLogo.args = {
   altText: 'Website picture',
   logoTitle: 'Website logo',
   photo: 'http://placeimg.com/640/480',
-  // @ts-ignore - Needed because of the placeholder image.
-  unoptimized: true,
 };
diff --git a/src/components/molecules/images/responsive-image.stories.tsx b/src/components/molecules/images/responsive-image.stories.tsx
index ca69d4f..4917cde 100644
--- a/src/components/molecules/images/responsive-image.stories.tsx
+++ b/src/components/molecules/images/responsive-image.stories.tsx
@@ -80,7 +80,6 @@ export default {
         required: false,
       },
     },
-    unoptimized: { table: { disable: true } },
     width: {
       control: {
         type: 'number',
@@ -121,7 +120,18 @@ Default.args = {
   src: 'http://placeimg.com/640/480/transport',
   width: 640,
   height: 480,
-  unoptimized: true,
+};
+
+/**
+ * Responsive Image Stories - With borders
+ */
+export const WithBorders = Template.bind({});
+WithBorders.args = {
+  alt: 'An example',
+  src: 'http://placeimg.com/640/480/transport',
+  width: 640,
+  height: 480,
+  withBorders: true,
 };
 
 /**
@@ -133,10 +143,22 @@ WithLink.args = {
   src: 'http://placeimg.com/640/480/transport',
   width: 640,
   height: 480,
-  unoptimized: true,
   target: '#',
 };
 
+/**
+ * Responsive Image Stories - With link and borders
+ */
+export const WithLinkAndBorders = Template.bind({});
+WithLinkAndBorders.args = {
+  alt: 'An example',
+  src: 'http://placeimg.com/640/480/transport',
+  width: 640,
+  height: 480,
+  target: '#',
+  withBorders: true,
+};
+
 /**
  * Responsive Image Stories - With caption
  */
@@ -147,7 +169,19 @@ WithCaption.args = {
   width: 640,
   height: 480,
   caption: 'Omnis nulla labore',
-  unoptimized: true,
+};
+
+/**
+ * Responsive Image Stories - With caption and borders
+ */
+export const WithCaptionAndBorders = Template.bind({});
+WithCaptionAndBorders.args = {
+  alt: 'An example',
+  src: 'http://placeimg.com/640/480/transport',
+  width: 640,
+  height: 480,
+  caption: 'Omnis nulla labore',
+  withBorders: true,
 };
 
 /**
@@ -161,5 +195,18 @@ WithCaptionAndLink.args = {
   height: 480,
   caption: 'Omnis nulla labore',
   target: '#',
-  unoptimized: true,
+};
+
+/**
+ * Responsive Image Stories - With caption, link and borders
+ */
+export const WithCaptionLinkAndBorders = Template.bind({});
+WithCaptionLinkAndBorders.args = {
+  alt: 'An example',
+  src: 'http://placeimg.com/640/480/transport',
+  width: 640,
+  height: 480,
+  caption: 'Omnis nulla labore',
+  target: '#',
+  withBorders: true,
 };
diff --git a/src/components/molecules/layout/branding.stories.tsx b/src/components/molecules/layout/branding.stories.tsx
index d2e0694..94bb166 100644
--- a/src/components/molecules/layout/branding.stories.tsx
+++ b/src/components/molecules/layout/branding.stories.tsx
@@ -56,7 +56,6 @@ export default {
         required: true,
       },
     },
-    unoptimized: { table: { disable: true } },
     withLink: {
       control: {
         type: 'boolean',
@@ -85,8 +84,6 @@ export const Default = Template.bind({});
 Default.args = {
   title: 'Website title',
   photo: 'http://placeimg.com/640/480',
-  // @ts-ignore - Needed because of the placeholder image.
-  unoptimized: true,
 };
 
 /**
@@ -97,6 +94,4 @@ WithBaseline.args = {
   title: 'Website title',
   baseline: 'Maiores corporis qui',
   photo: 'http://placeimg.com/640/480',
-  // @ts-ignore - Needed because of the placeholder image.
-  unoptimized: true,
 };
diff --git a/src/components/molecules/layout/card.stories.tsx b/src/components/molecules/layout/card.stories.tsx
index 2e99bbb..0ad42c0 100644
--- a/src/components/molecules/layout/card.stories.tsx
+++ b/src/components/molecules/layout/card.stories.tsx
@@ -113,7 +113,6 @@ const cover = {
   height: 480,
   src: 'http://placeimg.com/640/480',
   width: 640,
-  unoptimized: true,
 };
 
 const meta = {
diff --git a/src/components/organisms/images/gallery.stories.tsx b/src/components/organisms/images/gallery.stories.tsx
index 786cfff..6fc278f 100644
--- a/src/components/organisms/images/gallery.stories.tsx
+++ b/src/components/organisms/images/gallery.stories.tsx
@@ -43,10 +43,10 @@ const image = {
 
 const Template: ComponentStory<typeof Gallery> = (args) => (
   <Gallery {...args}>
-    <ResponsiveImage unoptimized {...image} />
-    <ResponsiveImage unoptimized {...image} />
-    <ResponsiveImage unoptimized {...image} />
-    <ResponsiveImage unoptimized {...image} />
+    <ResponsiveImage {...image} />
+    <ResponsiveImage {...image} />
+    <ResponsiveImage {...image} />
+    <ResponsiveImage {...image} />
   </Gallery>
 );
 
diff --git a/src/components/organisms/layout/cards-list.stories.tsx b/src/components/organisms/layout/cards-list.stories.tsx
index 522d068..c19220a 100644
--- a/src/components/organisms/layout/cards-list.stories.tsx
+++ b/src/components/organisms/layout/cards-list.stories.tsx
@@ -90,8 +90,6 @@ const items: CardsListItem[] = [
       src: 'http://placeimg.com/640/480',
       width: 640,
       height: 480,
-      // @ts-ignore - Needed because of the placeholder image.
-      unoptimized: true,
     },
     meta: { thematics: ['Velit', 'Ex', 'Alias'] },
     tagline: 'Molestias ut error',
@@ -105,8 +103,6 @@ const items: CardsListItem[] = [
       src: 'http://placeimg.com/640/480',
       width: 640,
       height: 480,
-      // @ts-ignore - Needed because of the placeholder image.
-      unoptimized: true,
     },
     meta: { thematics: ['Voluptas'] },
     tagline: 'Quod vel accusamus',
@@ -120,8 +116,6 @@ const items: CardsListItem[] = [
       src: 'http://placeimg.com/640/480',
       width: 640,
       height: 480,
-      // @ts-ignore - Needed because of the placeholder image.
-      unoptimized: true,
     },
     meta: {
       thematics: ['Quisquam', 'Quia', 'Sapiente', 'Perspiciatis'],
diff --git a/src/components/organisms/layout/cards-list.test.tsx b/src/components/organisms/layout/cards-list.test.tsx
index 7d98844..8558fa6 100644
--- a/src/components/organisms/layout/cards-list.test.tsx
+++ b/src/components/organisms/layout/cards-list.test.tsx
@@ -9,8 +9,6 @@ const items: CardsListItem[] = [
       src: 'http://placeimg.com/640/480',
       width: 640,
       height: 480,
-      // @ts-ignore - Needed because of the placeholder image.
-      unoptimized: true,
     },
     meta: { thematics: ['Velit', 'Ex', 'Alias'] },
     tagline: 'Molestias ut error',
@@ -24,8 +22,6 @@ const items: CardsListItem[] = [
       src: 'http://placeimg.com/640/480',
       width: 640,
       height: 480,
-      // @ts-ignore - Needed because of the placeholder image.
-      unoptimized: true,
     },
     meta: { thematics: ['Voluptas'] },
     tagline: 'Quod vel accusamus',
@@ -39,8 +35,6 @@ const items: CardsListItem[] = [
       src: 'http://placeimg.com/640/480',
       width: 640,
       height: 480,
-      // @ts-ignore - Needed because of the placeholder image.
-      unoptimized: true,
     },
     meta: {
       thematics: ['Quisquam', 'Quia', 'Sapiente', 'Perspiciatis'],
diff --git a/src/components/organisms/layout/comment.stories.tsx b/src/components/organisms/layout/comment.stories.tsx
index c7649ab..fa4bba9 100644
--- a/src/components/organisms/layout/comment.stories.tsx
+++ b/src/components/organisms/layout/comment.stories.tsx
@@ -123,6 +123,4 @@ Comment.args = {
     'Harum aut cumque iure fugit neque sequi cupiditate repudiandae laudantium. Ratione aut assumenda qui illum voluptas accusamus quis officiis exercitationem. Consectetur est harum eius perspiciatis officiis nihil. Aut corporis minima debitis adipisci possimus debitis et.',
   id: 2,
   publication: '2021-04-03 23:04:24',
-  // @ts-ignore - Needed because of the placeholder image.
-  unoptimized: true,
 };
diff --git a/src/components/organisms/layout/comments-list.stories.tsx b/src/components/organisms/layout/comments-list.stories.tsx
index 1ed159a..22cc9d9 100644
--- a/src/components/organisms/layout/comments-list.stories.tsx
+++ b/src/components/organisms/layout/comments-list.stories.tsx
@@ -81,8 +81,6 @@ const comments: Comment[] = [
       'Voluptas ducimus inventore. Libero ut et doloribus. Earum nostrum ab. Aliquam rem dolores omnis voluptate. Sunt aut ut et.',
     id: 1,
     publication: '2021-04-03 18:04:11',
-    // @ts-ignore - Needed because of the placeholder image.
-    unoptimized: true,
   },
   {
     child: [
@@ -95,8 +93,6 @@ const comments: Comment[] = [
           'Vel ullam in porro tempore. Maiores quos quia magnam beatae nemo libero velit numquam. Sapiente aliquid cumque. Velit neque in adipisci aut assumenda voluptates earum. Autem esse autem provident in tempore. Aut distinctio dolor qui repellat et et adipisci velit aspernatur.',
         id: 4,
         publication: '2021-04-03 23:04:24',
-        // @ts-ignore - Needed because of the placeholder image.
-        unoptimized: true,
       },
       {
         author: {
@@ -107,8 +103,6 @@ const comments: Comment[] = [
           'Sed non omnis. Quam porro est. Quae tempore quae. Exercitationem eos non velit voluptatem velit voluptas iusto. Sit debitis qui ipsam quo asperiores numquam veniam praesentium ut.',
         id: 5,
         publication: '2021-04-04 08:05:14',
-        // @ts-ignore - Needed because of the placeholder image.
-        unoptimized: true,
       },
     ],
     author: {
@@ -120,8 +114,6 @@ const comments: Comment[] = [
       'Sit sed error quasi voluptatem velit voluptas aut. Aut debitis eveniet. Praesentium dolores quia voluptate vero quis dicta quasi vel. Aut voluptas accusantium ut aut quidem consectetur itaque laboriosam occaecati.',
     id: 2,
     publication: '2021-04-03 23:30:20',
-    // @ts-ignore - Needed because of the placeholder image.
-    unoptimized: true,
   },
   {
     author: {
@@ -132,8 +124,6 @@ const comments: Comment[] = [
       'Natus consequatur maiores aperiam dolore eius nesciunt ut qui et. Ab ea nobis est. Eaque dolor corrupti id aut. Impedit architecto autem qui neque rerum ab dicta dignissimos voluptates.',
     id: 3,
     publication: '2021-09-13 13:24:54',
-    // @ts-ignore - Needed because of the placeholder image.
-    unoptimized: true,
   },
 ];
 
diff --git a/src/components/organisms/layout/header.stories.tsx b/src/components/organisms/layout/header.stories.tsx
index a5233ea..0507e89 100644
--- a/src/components/organisms/layout/header.stories.tsx
+++ b/src/components/organisms/layout/header.stories.tsx
@@ -112,7 +112,6 @@ export default {
         required: true,
       },
     },
-    unoptimized: { table: { disable: true } },
     withLink: {
       control: {
         type: 'boolean',
@@ -151,6 +150,4 @@ Header.args = {
   nav,
   photo: 'http://placeimg.com/640/480/people',
   title: 'Website title',
-  // @ts-ignore - Needed because of the placeholder image.
-  unoptimized: true,
 };
diff --git a/src/components/organisms/layout/overview.stories.tsx b/src/components/organisms/layout/overview.stories.tsx
index 1139350..26f7ba0 100644
--- a/src/components/organisms/layout/overview.stories.tsx
+++ b/src/components/organisms/layout/overview.stories.tsx
@@ -52,7 +52,6 @@ const cover = {
   height: 480,
   src: 'http://placeimg.com/640/480/cats',
   width: 640,
-  unoptimized: true,
 };
 
 const meta: OverviewMeta = {
diff --git a/src/components/organisms/layout/posts-list.stories.tsx b/src/components/organisms/layout/posts-list.stories.tsx
index 96fb2f0..360d441 100644
--- a/src/components/organisms/layout/posts-list.stories.tsx
+++ b/src/components/organisms/layout/posts-list.stories.tsx
@@ -181,8 +181,6 @@ const posts: Post[] = [
       height: 480,
       src: 'http://placeimg.com/640/480',
       width: 640,
-      // @ts-ignore - Needed because of the placeholder image.
-      unoptimized: true,
     },
   },
   {
@@ -213,8 +211,6 @@ const posts: Post[] = [
       height: 480,
       src: 'http://placeimg.com/640/480',
       width: 640,
-      // @ts-ignore - Needed because of the placeholder image.
-      unoptimized: true,
     },
   },
 ];
diff --git a/src/components/organisms/layout/posts-list.test.tsx b/src/components/organisms/layout/posts-list.test.tsx
index 7429cbd..dfb9825 100644
--- a/src/components/organisms/layout/posts-list.test.tsx
+++ b/src/components/organisms/layout/posts-list.test.tsx
@@ -28,8 +28,6 @@ const posts: Post[] = [
       height: 480,
       src: 'http://placeimg.com/640/480',
       width: 640,
-      // @ts-ignore - Needed because of the placeholder image.
-      unoptimized: true,
     },
   },
   {
@@ -60,8 +58,6 @@ const posts: Post[] = [
       height: 480,
       src: 'http://placeimg.com/640/480',
       width: 640,
-      // @ts-ignore - Needed because of the placeholder image.
-      unoptimized: true,
     },
   },
 ];
diff --git a/src/components/organisms/layout/summary.stories.tsx b/src/components/organisms/layout/summary.stories.tsx
index 92736b8..2512051 100644
--- a/src/components/organisms/layout/summary.stories.tsx
+++ b/src/components/organisms/layout/summary.stories.tsx
@@ -88,7 +88,6 @@ const cover = {
   height: 480,
   src: 'http://placeimg.com/640/480',
   width: 640,
-  unoptimized: true,
 };
 
 const excerpt =
diff --git a/src/components/organisms/widgets/image-widget.stories.tsx b/src/components/organisms/widgets/image-widget.stories.tsx
index fa39745..2271c03 100644
--- a/src/components/organisms/widgets/image-widget.stories.tsx
+++ b/src/components/organisms/widgets/image-widget.stories.tsx
@@ -130,7 +130,6 @@ const image = {
   height: 480,
   src: 'http://placeimg.com/640/480/nature',
   width: 640,
-  unoptimized: true,
 };
 
 /**
diff --git a/src/components/templates/page/page-layout.stories.tsx b/src/components/templates/page/page-layout.stories.tsx
index 12fe26a..bc1d7b6 100644
--- a/src/components/templates/page/page-layout.stories.tsx
+++ b/src/components/templates/page/page-layout.stories.tsx
@@ -179,8 +179,12 @@ export default {
     },
   },
   decorators: [
-    (Story) => (
-      <LayoutBase {...LayoutBase.args}>
+    (Story, context) => (
+      <LayoutBase
+        useGrid={true}
+        withExtraPadding={!context.args.allowComments && !context.args.comments}
+        {...LayoutBase.args}
+      >
         <Story />
       </LayoutBase>
     ),
@@ -273,8 +277,6 @@ const comments = [
       'Voluptas ducimus inventore. Libero ut et doloribus. Earum nostrum ab. Aliquam rem dolores omnis voluptate. Sunt aut ut et.',
     id: 1,
     publication: '2021-04-03 18:04:11',
-    // @ts-ignore - Needed because of the placeholder image.
-    unoptimized: true,
   },
   {
     child: [
@@ -287,8 +289,6 @@ const comments = [
           'Vel ullam in porro tempore. Maiores quos quia magnam beatae nemo libero velit numquam. Sapiente aliquid cumque. Velit neque in adipisci aut assumenda voluptates earum. Autem esse autem provident in tempore. Aut distinctio dolor qui repellat et et adipisci velit aspernatur.',
         id: 4,
         publication: '2021-04-03 23:04:24',
-        // @ts-ignore - Needed because of the placeholder image.
-        unoptimized: true,
       },
       {
         author: {
@@ -299,8 +299,6 @@ const comments = [
           'Sed non omnis. Quam porro est. Quae tempore quae. Exercitationem eos non velit voluptatem velit voluptas iusto. Sit debitis qui ipsam quo asperiores numquam veniam praesentium ut.',
         id: 5,
         publication: '2021-04-04 08:05:14',
-        // @ts-ignore - Needed because of the placeholder image.
-        unoptimized: true,
       },
     ],
     author: {
@@ -312,8 +310,6 @@ const comments = [
       'Sit sed error quasi voluptatem velit voluptas aut. Aut debitis eveniet. Praesentium dolores quia voluptate vero quis dicta quasi vel. Aut voluptas accusantium ut aut quidem consectetur itaque laboriosam occaecati.',
     id: 2,
     publication: '2021-04-03 23:30:20',
-    // @ts-ignore - Needed because of the placeholder image.
-    unoptimized: true,
   },
   {
     author: {
@@ -324,8 +320,6 @@ const comments = [
       'Natus consequatur maiores aperiam dolore eius nesciunt ut qui et. Ab ea nobis est. Eaque dolor corrupti id aut. Impedit architecto autem qui neque rerum ab dicta dignissimos voluptates.',
     id: 3,
     publication: '2021-09-13 13:24:54',
-    // @ts-ignore - Needed because of the placeholder image.
-    unoptimized: true,
   },
 ];
 
@@ -435,8 +429,6 @@ const posts = [
       height: 480,
       src: 'http://placeimg.com/640/480',
       width: 640,
-      // @ts-ignore - Needed because of the placeholder image.
-      unoptimized: true,
     },
   },
   {
@@ -467,8 +459,6 @@ const posts = [
       height: 480,
       src: 'http://placeimg.com/640/480',
       width: 640,
-      // @ts-ignore - Needed because of the placeholder image.
-      unoptimized: true,
     },
   },
 ];
diff --git a/src/components/templates/page/page-layout.test.tsx b/src/components/templates/page/page-layout.test.tsx
index a414e14..a0c8923 100644
--- a/src/components/templates/page/page-layout.test.tsx
+++ b/src/components/templates/page/page-layout.test.tsx
@@ -98,8 +98,6 @@ describe('PageLayout', () => {
           'Voluptas ducimus inventore. Libero ut et doloribus. Earum nostrum ab. Aliquam rem dolores omnis voluptate. Sunt aut ut et.',
         id: 1,
         publication: '2021-04-03 18:04:11',
-        // @ts-ignore - Needed because of the placeholder image.
-        unoptimized: true,
       },
     ];
     render(
-- 
cgit v1.2.3


From abdcc01386fff0c1caa5d290cffcb0c5be906900 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Sun, 22 May 2022 18:42:51 +0200
Subject: fix(storybook): create a fake wrapper for Table of Contents story

---
 .../widgets/table-of-contents.stories.tsx          | 23 +++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

(limited to 'src/components/organisms/widgets')

diff --git a/src/components/organisms/widgets/table-of-contents.stories.tsx b/src/components/organisms/widgets/table-of-contents.stories.tsx
index d8b3af7..9490ee3 100644
--- a/src/components/organisms/widgets/table-of-contents.stories.tsx
+++ b/src/components/organisms/widgets/table-of-contents.stories.tsx
@@ -26,8 +26,29 @@ const Template: ComponentStory<typeof ToCWidget> = (args) => (
   <ToCWidget {...args} />
 );
 
+export const GetWrapper = () => {
+  const wrapper = document.createElement('div');
+  const firstTitle = document.createElement('h2');
+  const firstParagraph = document.createElement('p');
+  const secondTitle = document.createElement('h2');
+  const secondParagraph = document.createElement('p');
+
+  firstTitle.textContent = 'dignissimos odit odit';
+  firstParagraph.textContent =
+    'Sint error saepe in. Vel doloribus facere deleniti minima magni. Consequatur veniam quia rerum praesentium eaque culpa culpa quas optio.';
+  secondTitle.textContent = 'aliquam exercitationem ut';
+  secondParagraph.textContent =
+    'Doloribus sunt ut pariatur et praesentium rerum quam deserunt. Quod omnis quia qui quis debitis recusandae. Voluptate et impedit quam quidem quis id explicabo similique enim. Velit illum amet quos veniam consequatur amet nam sunt et. Et odit atque totam culpa officia saepe sed eaque consequatur.';
+
+  wrapper.append(...[firstTitle, firstParagraph, secondTitle, secondParagraph]);
+
+  return wrapper;
+};
+
 /**
  * Widgets Stories - Table of Contents
  */
 export const TableOfContents = Template.bind({});
-TableOfContents.args = {};
+TableOfContents.args = {
+  wrapper: GetWrapper(),
+};
-- 
cgit v1.2.3