9 files changed, 515 insertions, 676 deletions

diff --git a/src/components/templates/layout/layout.stories.ts b/src/components/templates/layout/layout.stories.ts
new file mode 100644
index 0000000..262da0b
--- /dev/null
+++ b/src/components/templates/layout/layout.stories.ts
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Layout } from './layout';
+
+const meta = {
+  component: Layout,
+  title: 'Templates/Layout',
+} satisfies Meta<typeof Layout>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'The contents.',
+  },
+};
diff --git a/src/components/templates/layout/layout.stories.tsx b/src/components/templates/layout/layout.stories.tsx
deleted file mode 100644
index 6d55f34..0000000
--- a/src/components/templates/layout/layout.stories.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Layout as LayoutComponent } from './layout';
-
-/**
- * Layout - Storybook Meta
- */
-export default {
-  title: 'Templates/LayoutBase',
-  component: LayoutComponent,
-  args: {
-    breadcrumbSchema: [],
-    isHome: false,
-  },
-  argTypes: {
-    children: {
-      control: {
-        type: 'text',
-      },
-      description: 'The article content.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    breadcrumbSchema: {
-      control: {
-        type: 'null',
-      },
-      description: 'The JSON schema for breadcrumb items.',
-      type: {
-        name: 'object',
-        required: true,
-        value: {},
-      },
-    },
-    isHome: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Determine if it is the homepage.',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the article element.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        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) => (
-      <div
-        id="__next"
-        style={{
-          flex: 1,
-          display: 'flex',
-          flexFlow: 'column nowrap',
-          minHeight: '100vh',
-        }}
-      >
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
-} as ComponentMeta<typeof LayoutComponent>;
-
-const Template: ComponentStory<typeof LayoutComponent> = (args) => (
-  <LayoutComponent {...args} />
-);
-
-/**
- * Layout Stories - Default
- */
-export const LayoutBase = Template.bind({});
diff --git a/src/components/templates/page/loading-page-comments.stories.tsx b/src/components/templates/page/loading-page-comments.stories.tsx
index 6069068..1ebb4bd 100644
--- a/src/components/templates/page/loading-page-comments.stories.tsx
+++ b/src/components/templates/page/loading-page-comments.stories.tsx
@@ -1,22 +1,29 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { LoadingPageComments } from './loading-page-comments';
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  LoadingPageComments,
+  type LoadingPageCommentsProps,
+} from './loading-page-comments';
+import { Page } from './page';
 
-/**
- * LoadingPageComments - Storybook Meta
- */
-export default {
-  title: 'Templates/LoadingPageComments',
+const WrappedLoadingPageComments = (props: LoadingPageCommentsProps) => (
+  <Page>
+    <LoadingPageComments {...props} />
+  </Page>
+);
+
+const meta = {
   component: LoadingPageComments,
+  title: 'Templates/Page/LoadingPageComments',
+  render: WrappedLoadingPageComments,
   parameters: {
     layout: 'fullscreen',
   },
-} as ComponentMeta<typeof LoadingPageComments>;
+} satisfies Meta<typeof LoadingPageComments>;
 
-const Template: ComponentStory<typeof LoadingPageComments> = (args) => (
-  <LoadingPageComments {...args} />
-);
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-/**
- * LoadingPageComments Stories - Example
- */
-export const Example = Template.bind({});
+export const Default: Story = {
+  args: {},
+};
diff --git a/src/components/templates/page/loading-page.stories.ts b/src/components/templates/page/loading-page.stories.ts
new file mode 100644
index 0000000..a5d9b2b
--- /dev/null
+++ b/src/components/templates/page/loading-page.stories.ts
@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { LoadingPage } from './loading-page';
+
+const meta = {
+  component: LoadingPage,
+  title: 'Templates/Page/LoadingPage',
+} satisfies Meta<typeof LoadingPage>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
diff --git a/src/components/templates/page/loading-page.stories.tsx b/src/components/templates/page/loading-page.stories.tsx
deleted file mode 100644
index 2ea0b33..0000000
--- a/src/components/templates/page/loading-page.stories.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { LoadingPage } from './loading-page';
-
-/**
- * LoadingPage - Storybook Meta
- */
-export default {
-  title: 'Templates/LoadingPage',
-  component: LoadingPage,
-  parameters: {
-    layout: 'fullscreen',
-  },
-} as ComponentMeta<typeof LoadingPage>;
-
-const Template: ComponentStory<typeof LoadingPage> = (args) => (
-  <LoadingPage {...args} />
-);
-
-/**
- * LoadingPage Stories - Example
- */
-export const Example = Template.bind({});
diff --git a/src/components/templates/page/page-comments.stories.tsx b/src/components/templates/page/page-comments.stories.tsx
index 362f0a4..ba73747 100644
--- a/src/components/templates/page/page-comments.stories.tsx
+++ b/src/components/templates/page/page-comments.stories.tsx
@@ -1,45 +1,27 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import type { CommentData } from '../../organisms/comments-list';
+import type { Meta, StoryObj } from '@storybook/react';
+import type { CommentData } from '../../organisms';
 import { Page } from './page';
-import { PageComments } from './page-comments';
+import { PageComments, type PageCommentsProps } from './page-comments';
 
-/**
- * PageComments - Storybook Meta
- */
-export default {
-  title: 'Templates/Page/Comments Section',
-  component: PageComments,
-  argTypes: {
-    comments: {
-      control: {
-        type: null,
-      },
-      description: 'An array of comments.',
-      type: {
-        name: 'object',
-        required: true,
-        value: {},
-      },
-    },
-    pageId: {
-      control: {
-        type: 'number',
-      },
-      description: 'Define the page id in the database.',
-      type: {
-        name: 'number',
-        required: true,
-      },
-    },
-  },
-} as ComponentMeta<typeof PageComments>;
-
-const Template: ComponentStory<typeof PageComments> = (args) => (
+const WrappedPageComments = (props: PageCommentsProps) => (
   <Page>
-    <PageComments {...args} />
+    <PageComments {...props} />
   </Page>
 );
 
+const meta = {
+  component: PageComments,
+  title: 'Templates/Page/PageComments',
+  render: WrappedPageComments,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof PageComments>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
 const comments = [
   {
     author: {
@@ -139,32 +121,26 @@ const comments = [
   },
 ] satisfies CommentData[];
 
-/**
- * PageComments Stories - Without comments
- */
-export const WithoutComments = Template.bind({});
-WithoutComments.args = {
-  comments: [],
-  pageId: 1,
+export const WithoutComments: Story = {
+  args: {
+    comments: [],
+    pageId: 1,
+  },
 };
 
-/**
- * PageComments Stories - With comments
- */
-export const WithComments = Template.bind({});
-WithComments.args = {
-  comments,
-  depth: 2,
-  pageId: 1,
+export const WithComments: Story = {
+  args: {
+    comments,
+    depth: 2,
+    pageId: 1,
+  },
 };
 
-/**
- * PageComments Stories - With comments closed
- */
-export const WithCommentsClosed = Template.bind({});
-WithCommentsClosed.args = {
-  areCommentsClosed: true,
-  comments,
-  depth: 2,
-  pageId: 1,
+export const WithCommentsClosed: Story = {
+  args: {
+    areCommentsClosed: true,
+    comments,
+    depth: 2,
+    pageId: 1,
+  },
 };
diff --git a/src/components/templates/page/page-footer.stories.tsx b/src/components/templates/page/page-footer.stories.tsx
index aee8979..5c72583 100644
--- a/src/components/templates/page/page-footer.stories.tsx
+++ b/src/components/templates/page/page-footer.stories.tsx
@@ -1,41 +1,31 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { Page } from './page';
-import { PageFooter } from './page-footer';
+import { PageFooter, type PageFooterProps } from './page-footer';
 
-/**
- * PageFooter - Storybook Meta
- */
-export default {
-  title: 'Templates/Page/Footer',
-  component: PageFooter,
-  argTypes: {
-    readMoreAbout: {
-      control: {
-        type: null,
-      },
-      description: 'An array of page links.',
-      type: {
-        name: 'object',
-        required: true,
-        value: {},
-      },
-    },
-  },
-} as ComponentMeta<typeof PageFooter>;
-
-const Template: ComponentStory<typeof PageFooter> = (args) => (
+const WrappedPageFooter = (props: PageFooterProps) => (
   <Page>
-    <PageFooter {...args} />
+    <PageFooter {...props} />
   </Page>
 );
 
-/**
- * PageFooter Stories - Footer
- */
-export const Footer = Template.bind({});
-Footer.args = {
-  readMoreAbout: [
-    { id: 1, name: 'Topic 1', url: '#topic1' },
-    { id: 2, name: 'Topic 2', url: '#topic2' },
-  ],
+const meta = {
+  component: PageFooter,
+  title: 'Templates/Page/PageFooter',
+  render: WrappedPageFooter,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof PageFooter>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Example: Story = {
+  args: {
+    readMoreAbout: [
+      { id: 1, name: 'Topic 1', url: '#topic1' },
+      { id: 2, name: 'Topic 2', url: '#topic2' },
+    ],
+  },
 };
diff --git a/src/components/templates/page/page-header.stories.tsx b/src/components/templates/page/page-header.stories.tsx
index 3af9b47..8640823 100644
--- a/src/components/templates/page/page-header.stories.tsx
+++ b/src/components/templates/page/page-header.stories.tsx
@@ -1,76 +1,60 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { Page } from './page';
-import { PageHeader } from './page-header';
+import { PageHeader, type PageHeaderProps } from './page-header';
 
-/**
- * PageHeader - Storybook Meta
- */
-export default {
-  title: 'Templates/Page/Header',
-  component: PageHeader,
-  argTypes: {
-    meta: {
-      control: {
-        type: null,
-      },
-      description: 'Define the page meta.',
-      type: {
-        name: 'object',
-        required: true,
-        value: {},
-      },
-    },
-  },
-} as ComponentMeta<typeof PageHeader>;
-
-const Template: ComponentStory<typeof PageHeader> = (args) => (
+const WrappedPageHeader = (props: PageHeaderProps) => (
   <Page>
-    <PageHeader {...args} />
+    <PageHeader {...props} />
   </Page>
 );
 
-/**
- * PageHeader Stories - TitleOnly
- */
-export const TitleOnly = Template.bind({});
-TitleOnly.args = {
-  heading: 'The page title',
+const meta = {
+  component: PageHeader,
+  title: 'Templates/Page/PageHeader',
+  render: WrappedPageHeader,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof PageHeader>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const TitleOnly: Story = {
+  args: {
+    heading: 'The page title',
+  },
 };
 
-/**
- * PageHeader Stories - TitleAndIntro
- */
-export const TitleAndIntro = Template.bind({});
-TitleAndIntro.args = {
-  heading: 'The page title',
-  intro:
-    'Eos similique impedit dolor illo. Rerum voluptates corporis quod et molestiae eum. Ut tenetur repellat hic eum. Doloremque et illum sequi aspernatur.',
+export const TitleAndIntro: Story = {
+  args: {
+    heading: 'The page title',
+    intro:
+      'Eos similique impedit dolor illo. Rerum voluptates corporis quod et molestiae eum. Ut tenetur repellat hic eum. Doloremque et illum sequi aspernatur.',
+  },
 };
 
-/**
- * PageHeader Stories - TitleAndMeta
- */
-export const TitleAndMeta = Template.bind({});
-TitleAndMeta.args = {
-  heading: 'The page title',
-  meta: {
-    author: 'Robin_Schroeder77',
-    publicationDate: '2023-11-15',
-    updateDate: '2023-11-16',
+export const TitleAndMeta: Story = {
+  args: {
+    heading: 'The page title',
+    meta: {
+      author: 'Robin_Schroeder77',
+      publicationDate: '2023-11-15',
+      updateDate: '2023-11-16',
+    },
   },
 };
 
-/**
- * PageHeader Stories - All
- */
-export const All = Template.bind({});
-All.args = {
-  heading: 'The page title',
-  intro:
-    'Eos similique impedit dolor illo. Rerum voluptates corporis quod et molestiae eum. Ut tenetur repellat hic eum. Doloremque et illum sequi aspernatur.',
-  meta: {
-    author: 'Robin_Schroeder77',
-    publicationDate: '2023-11-15',
-    updateDate: '2023-11-16',
+export const TitleMetaAndIntro: Story = {
+  args: {
+    heading: 'The page title',
+    intro:
+      'Eos similique impedit dolor illo. Rerum voluptates corporis quod et molestiae eum. Ut tenetur repellat hic eum. Doloremque et illum sequi aspernatur.',
+    meta: {
+      author: 'Robin_Schroeder77',
+      publicationDate: '2023-11-15',
+      updateDate: '2023-11-16',
+    },
   },
 };
diff --git a/src/components/templates/page/page.stories.tsx b/src/components/templates/page/page.stories.tsx
index 3f03b44..1dbb63a 100644
--- a/src/components/templates/page/page.stories.tsx
+++ b/src/components/templates/page/page.stories.tsx
@@ -1,7 +1,6 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { Heading } from '../../atoms';
-import type { CommentData } from '../../organisms/comments-list';
-import { SharingWidget, TocWidget } from '../../organisms/widgets';
+import { type CommentData, SharingWidget, TocWidget } from '../../organisms';
 import { Page } from './page';
 import { PageBody } from './page-body';
 import { PageComments } from './page-comments';
@@ -10,19 +9,17 @@ import { PageHeader } from './page-header';
 import { PageSection } from './page-section';
 import { PageSidebar } from './page-sidebar';
 
-/**
- * Page - Storybook Meta
- */
-export default {
-  title: 'Templates/Page',
+const meta = {
   component: Page,
-  argTypes: {},
+  title: 'Templates/Page',
   parameters: {
     layout: 'fullscreen',
   },
-} as ComponentMeta<typeof Page>;
+} satisfies Meta<typeof Page>;
+
+export default meta;
 
-const Template: ComponentStory<typeof Page> = (args) => <Page {...args} />;
+type Story = StoryObj<typeof meta>;
 
 const comments = [
   {
@@ -123,374 +120,366 @@ const comments = [
   },
 ] satisfies CommentData[];
 
-/**
- * Page Stories - HeaderBody
- */
-export const HeaderBody = Template.bind({});
-HeaderBody.args = {
-  children: (
-    <>
-      <PageHeader
-        heading="The page title"
-        intro="Dolores deleniti et nemo fuga minus dicta enim dolores. Animi magnam dignissimos quaerat repellat autem alias. Recusandae pariatur autem et omnis eveniet. Magni fuga consequatur ut omnis debitis est error. Quos quae odit."
-      />
-      <PageBody>
-        <Heading level={2}>Sint debitis blanditiis</Heading>
-        <p>
-          Exercitationem dolorum sed incidunt commodi sapiente fuga. Qui qui
-          minima nulla ullam alias magnam et. Reiciendis ea voluptatem ab nisi
-          est aut repudiandae eum magnam. Iusto ex ut velit voluptatem sequi
-          facere voluptas.
-        </p>
-        <p>
-          Vel ut ullam veritatis aut quaerat a eveniet. Voluptatem molestias
-          atque rerum quam eos doloremque dolor dolor non. Rerum laudantium
-          provident eos voluptas minus sit mollitia ex neque. Ea est ut est. Id
-          quaerat repudiandae sint autem architecto adipisci est.
-        </p>
-        <Heading level={2}>Non nisi similique</Heading>
-        <p>
-          Non ut id. Dolorem in ex voluptas quis quod ut facere. Laboriosam non
-          necessitatibus mollitia voluptatibus dolorem non ducimus. Et non illo
-          aut quasi accusantium fugiat laudantium veritatis. Odit dicta vel et
-          et rem ipsa nihil. Possimus architecto voluptatibus labore repellat
-          sint aperiam reprehenderit est ratione.
-        </p>
-        <p>
-          Nemo quod est ex ut et quasi. Sed minima voluptatem dolore. Non dolore
-          placeat eos qui praesentium sunt dolores. Consequatur atque quibusdam
-          tempore aut. Quas officiis adipisci consequatur nisi. Quasi veniam qui
-          mollitia sapiente eius ratione necessitatibus nobis molestiae.
-        </p>
-      </PageBody>
-    </>
-  ),
+export const HeaderBody: Story = {
+  args: {
+    children: (
+      <>
+        <PageHeader
+          heading="The page title"
+          intro="Dolores deleniti et nemo fuga minus dicta enim dolores. Animi magnam dignissimos quaerat repellat autem alias. Recusandae pariatur autem et omnis eveniet. Magni fuga consequatur ut omnis debitis est error. Quos quae odit."
+        />
+        <PageBody>
+          <Heading level={2}>Sint debitis blanditiis</Heading>
+          <p>
+            Exercitationem dolorum sed incidunt commodi sapiente fuga. Qui qui
+            minima nulla ullam alias magnam et. Reiciendis ea voluptatem ab nisi
+            est aut repudiandae eum magnam. Iusto ex ut velit voluptatem sequi
+            facere voluptas.
+          </p>
+          <p>
+            Vel ut ullam veritatis aut quaerat a eveniet. Voluptatem molestias
+            atque rerum quam eos doloremque dolor dolor non. Rerum laudantium
+            provident eos voluptas minus sit mollitia ex neque. Ea est ut est.
+            Id quaerat repudiandae sint autem architecto adipisci est.
+          </p>
+          <Heading level={2}>Non nisi similique</Heading>
+          <p>
+            Non ut id. Dolorem in ex voluptas quis quod ut facere. Laboriosam
+            non necessitatibus mollitia voluptatibus dolorem non ducimus. Et non
+            illo aut quasi accusantium fugiat laudantium veritatis. Odit dicta
+            vel et et rem ipsa nihil. Possimus architecto voluptatibus labore
+            repellat sint aperiam reprehenderit est ratione.
+          </p>
+          <p>
+            Nemo quod est ex ut et quasi. Sed minima voluptatem dolore. Non
+            dolore placeat eos qui praesentium sunt dolores. Consequatur atque
+            quibusdam tempore aut. Quas officiis adipisci consequatur nisi.
+            Quasi veniam qui mollitia sapiente eius ratione necessitatibus nobis
+            molestiae.
+          </p>
+        </PageBody>
+      </>
+    ),
+  },
 };
 
-/**
- * Page Stories - BreadcrumbsHeaderBody
- */
-export const BreadcrumbsHeaderBody = Template.bind({});
-BreadcrumbsHeaderBody.args = {
-  breadcrumbs: [
-    { id: 'home', label: 'Home', slug: '#home' },
-    { id: 'blog', label: 'Blog', slug: '#blog' },
-  ],
-  children: (
-    <>
-      <PageHeader
-        heading="The page title"
-        intro="Dolores deleniti et nemo fuga minus dicta enim dolores. Animi magnam dignissimos quaerat repellat autem alias. Recusandae pariatur autem et omnis eveniet. Magni fuga consequatur ut omnis debitis est error. Quos quae odit."
-      />
-      <PageBody>
-        <Heading level={2}>Sint debitis blanditiis</Heading>
-        <p>
-          Exercitationem dolorum sed incidunt commodi sapiente fuga. Qui qui
-          minima nulla ullam alias magnam et. Reiciendis ea voluptatem ab nisi
-          est aut repudiandae eum magnam. Iusto ex ut velit voluptatem sequi
-          facere voluptas.
-        </p>
-        <p>
-          Vel ut ullam veritatis aut quaerat a eveniet. Voluptatem molestias
-          atque rerum quam eos doloremque dolor dolor non. Rerum laudantium
-          provident eos voluptas minus sit mollitia ex neque. Ea est ut est. Id
-          quaerat repudiandae sint autem architecto adipisci est.
-        </p>
-        <Heading level={2}>Non nisi similique</Heading>
-        <p>
-          Non ut id. Dolorem in ex voluptas quis quod ut facere. Laboriosam non
-          necessitatibus mollitia voluptatibus dolorem non ducimus. Et non illo
-          aut quasi accusantium fugiat laudantium veritatis. Odit dicta vel et
-          et rem ipsa nihil. Possimus architecto voluptatibus labore repellat
-          sint aperiam reprehenderit est ratione.
-        </p>
-        <p>
-          Nemo quod est ex ut et quasi. Sed minima voluptatem dolore. Non dolore
-          placeat eos qui praesentium sunt dolores. Consequatur atque quibusdam
-          tempore aut. Quas officiis adipisci consequatur nisi. Quasi veniam qui
-          mollitia sapiente eius ratione necessitatibus nobis molestiae.
-        </p>
-      </PageBody>
-    </>
-  ),
+export const BreadcrumbsHeaderBody: Story = {
+  args: {
+    breadcrumbs: [
+      { id: 'home', label: 'Home', slug: '#home' },
+      { id: 'blog', label: 'Blog', slug: '#blog' },
+    ],
+    children: (
+      <>
+        <PageHeader
+          heading="The page title"
+          intro="Dolores deleniti et nemo fuga minus dicta enim dolores. Animi magnam dignissimos quaerat repellat autem alias. Recusandae pariatur autem et omnis eveniet. Magni fuga consequatur ut omnis debitis est error. Quos quae odit."
+        />
+        <PageBody>
+          <Heading level={2}>Sint debitis blanditiis</Heading>
+          <p>
+            Exercitationem dolorum sed incidunt commodi sapiente fuga. Qui qui
+            minima nulla ullam alias magnam et. Reiciendis ea voluptatem ab nisi
+            est aut repudiandae eum magnam. Iusto ex ut velit voluptatem sequi
+            facere voluptas.
+          </p>
+          <p>
+            Vel ut ullam veritatis aut quaerat a eveniet. Voluptatem molestias
+            atque rerum quam eos doloremque dolor dolor non. Rerum laudantium
+            provident eos voluptas minus sit mollitia ex neque. Ea est ut est.
+            Id quaerat repudiandae sint autem architecto adipisci est.
+          </p>
+          <Heading level={2}>Non nisi similique</Heading>
+          <p>
+            Non ut id. Dolorem in ex voluptas quis quod ut facere. Laboriosam
+            non necessitatibus mollitia voluptatibus dolorem non ducimus. Et non
+            illo aut quasi accusantium fugiat laudantium veritatis. Odit dicta
+            vel et et rem ipsa nihil. Possimus architecto voluptatibus labore
+            repellat sint aperiam reprehenderit est ratione.
+          </p>
+          <p>
+            Nemo quod est ex ut et quasi. Sed minima voluptatem dolore. Non
+            dolore placeat eos qui praesentium sunt dolores. Consequatur atque
+            quibusdam tempore aut. Quas officiis adipisci consequatur nisi.
+            Quasi veniam qui mollitia sapiente eius ratione necessitatibus nobis
+            molestiae.
+          </p>
+        </PageBody>
+      </>
+    ),
+  },
 };
 
-/**
- * Page Stories - HeaderBodyToc
- */
-export const HeaderBodyToc = Template.bind({});
-HeaderBodyToc.args = {
-  children: (
-    <>
-      <PageHeader
-        heading="The page title"
-        intro="Dolores deleniti et nemo fuga minus dicta enim dolores. Animi magnam dignissimos quaerat repellat autem alias. Recusandae pariatur autem et omnis eveniet. Magni fuga consequatur ut omnis debitis est error. Quos quae odit."
-      />
-      <PageSidebar>
-        <TocWidget
-          heading={<Heading level={2}>Table of Contents</Heading>}
-          tree={[
-            {
-              children: [],
-              depth: 2,
-              id: 'sint-debitis',
-              label: 'Sint debitis blanditiis',
-            },
-            {
-              children: [],
-              depth: 2,
-              id: 'non-nisi',
-              label: 'Non nisi similique',
-            },
-          ]}
+export const HeaderBodyToc: Story = {
+  args: {
+    children: (
+      <>
+        <PageHeader
+          heading="The page title"
+          intro="Dolores deleniti et nemo fuga minus dicta enim dolores. Animi magnam dignissimos quaerat repellat autem alias. Recusandae pariatur autem et omnis eveniet. Magni fuga consequatur ut omnis debitis est error. Quos quae odit."
         />
-      </PageSidebar>
-      <PageBody>
-        <Heading id="sint-debitis" level={2}>
-          Sint debitis blanditiis
-        </Heading>
-        <p>
-          Exercitationem dolorum sed incidunt commodi sapiente fuga. Qui qui
-          minima nulla ullam alias magnam et. Reiciendis ea voluptatem ab nisi
-          est aut repudiandae eum magnam. Iusto ex ut velit voluptatem sequi
-          facere voluptas.
-        </p>
-        <p>
-          Vel ut ullam veritatis aut quaerat a eveniet. Voluptatem molestias
-          atque rerum quam eos doloremque dolor dolor non. Rerum laudantium
-          provident eos voluptas minus sit mollitia ex neque. Ea est ut est. Id
-          quaerat repudiandae sint autem architecto adipisci est.
-        </p>
-        <Heading id="non-nisi" level={2}>
-          Non nisi similique
-        </Heading>
-        <p>
-          Non ut id. Dolorem in ex voluptas quis quod ut facere. Laboriosam non
-          necessitatibus mollitia voluptatibus dolorem non ducimus. Et non illo
-          aut quasi accusantium fugiat laudantium veritatis. Odit dicta vel et
-          et rem ipsa nihil. Possimus architecto voluptatibus labore repellat
-          sint aperiam reprehenderit est ratione.
-        </p>
-        <p>
-          Nemo quod est ex ut et quasi. Sed minima voluptatem dolore. Non dolore
-          placeat eos qui praesentium sunt dolores. Consequatur atque quibusdam
-          tempore aut. Quas officiis adipisci consequatur nisi. Quasi veniam qui
-          mollitia sapiente eius ratione necessitatibus nobis molestiae.
-        </p>
-      </PageBody>
-    </>
-  ),
+        <PageSidebar>
+          <TocWidget
+            heading={<Heading level={2}>Table of Contents</Heading>}
+            tree={[
+              {
+                children: [],
+                depth: 2,
+                id: 'sint-debitis',
+                label: 'Sint debitis blanditiis',
+              },
+              {
+                children: [],
+                depth: 2,
+                id: 'non-nisi',
+                label: 'Non nisi similique',
+              },
+            ]}
+          />
+        </PageSidebar>
+        <PageBody>
+          <Heading id="sint-debitis" level={2}>
+            Sint debitis blanditiis
+          </Heading>
+          <p>
+            Exercitationem dolorum sed incidunt commodi sapiente fuga. Qui qui
+            minima nulla ullam alias magnam et. Reiciendis ea voluptatem ab nisi
+            est aut repudiandae eum magnam. Iusto ex ut velit voluptatem sequi
+            facere voluptas.
+          </p>
+          <p>
+            Vel ut ullam veritatis aut quaerat a eveniet. Voluptatem molestias
+            atque rerum quam eos doloremque dolor dolor non. Rerum laudantium
+            provident eos voluptas minus sit mollitia ex neque. Ea est ut est.
+            Id quaerat repudiandae sint autem architecto adipisci est.
+          </p>
+          <Heading id="non-nisi" level={2}>
+            Non nisi similique
+          </Heading>
+          <p>
+            Non ut id. Dolorem in ex voluptas quis quod ut facere. Laboriosam
+            non necessitatibus mollitia voluptatibus dolorem non ducimus. Et non
+            illo aut quasi accusantium fugiat laudantium veritatis. Odit dicta
+            vel et et rem ipsa nihil. Possimus architecto voluptatibus labore
+            repellat sint aperiam reprehenderit est ratione.
+          </p>
+          <p>
+            Nemo quod est ex ut et quasi. Sed minima voluptatem dolore. Non
+            dolore placeat eos qui praesentium sunt dolores. Consequatur atque
+            quibusdam tempore aut. Quas officiis adipisci consequatur nisi.
+            Quasi veniam qui mollitia sapiente eius ratione necessitatibus nobis
+            molestiae.
+          </p>
+        </PageBody>
+      </>
+    ),
+  },
 };
 
-/**
- * Page Stories - HeaderBodyTocSidebar
- */
-export const HeaderBodyTocSidebar = Template.bind({});
-HeaderBodyTocSidebar.args = {
-  children: (
-    <>
-      <PageHeader
-        heading="The page title"
-        intro="Dolores deleniti et nemo fuga minus dicta enim dolores. Animi magnam dignissimos quaerat repellat autem alias. Recusandae pariatur autem et omnis eveniet. Magni fuga consequatur ut omnis debitis est error. Quos quae odit."
-      />
-      <PageSidebar>
-        <TocWidget
-          heading={<Heading level={2}>Table of Contents</Heading>}
-          tree={[
-            {
-              children: [],
-              depth: 2,
-              id: 'sint-debitis',
-              label: 'Sint debitis blanditiis',
-            },
-            {
-              children: [],
-              depth: 2,
-              id: 'non-nisi',
-              label: 'Non nisi similique',
-            },
-          ]}
-        />
-      </PageSidebar>
-      <PageBody>
-        <Heading id="sint-debitis" level={2}>
-          Sint debitis blanditiis
-        </Heading>
-        <p>
-          Exercitationem dolorum sed incidunt commodi sapiente fuga. Qui qui
-          minima nulla ullam alias magnam et. Reiciendis ea voluptatem ab nisi
-          est aut repudiandae eum magnam. Iusto ex ut velit voluptatem sequi
-          facere voluptas.
-        </p>
-        <p>
-          Vel ut ullam veritatis aut quaerat a eveniet. Voluptatem molestias
-          atque rerum quam eos doloremque dolor dolor non. Rerum laudantium
-          provident eos voluptas minus sit mollitia ex neque. Ea est ut est. Id
-          quaerat repudiandae sint autem architecto adipisci est.
-        </p>
-        <Heading id="non-nisi" level={2}>
-          Non nisi similique
-        </Heading>
-        <p>
-          Non ut id. Dolorem in ex voluptas quis quod ut facere. Laboriosam non
-          necessitatibus mollitia voluptatibus dolorem non ducimus. Et non illo
-          aut quasi accusantium fugiat laudantium veritatis. Odit dicta vel et
-          et rem ipsa nihil. Possimus architecto voluptatibus labore repellat
-          sint aperiam reprehenderit est ratione.
-        </p>
-        <p>
-          Nemo quod est ex ut et quasi. Sed minima voluptatem dolore. Non dolore
-          placeat eos qui praesentium sunt dolores. Consequatur atque quibusdam
-          tempore aut. Quas officiis adipisci consequatur nisi. Quasi veniam qui
-          mollitia sapiente eius ratione necessitatibus nobis molestiae.
-        </p>
-      </PageBody>
-      <PageSidebar>
-        <SharingWidget
-          data={{
-            excerpt:
-              'Dolores deleniti et nemo fuga minus dicta enim dolores. Animi magnam dignissimos quaerat repellat autem alias. Recusandae pariatur autem et omnis eveniet. Magni fuga consequatur ut omnis debitis est error. Quos quae odit.',
-            title: 'The page title',
-            url: '#page',
-          }}
-          heading={<Heading level={2}>Share</Heading>}
-          media={['diaspora', 'email', 'facebook']}
+export const HeaderBodyTocSidebar: Story = {
+  args: {
+    children: (
+      <>
+        <PageHeader
+          heading="The page title"
+          intro="Dolores deleniti et nemo fuga minus dicta enim dolores. Animi magnam dignissimos quaerat repellat autem alias. Recusandae pariatur autem et omnis eveniet. Magni fuga consequatur ut omnis debitis est error. Quos quae odit."
         />
-      </PageSidebar>
-    </>
-  ),
+        <PageSidebar>
+          <TocWidget
+            heading={<Heading level={2}>Table of Contents</Heading>}
+            tree={[
+              {
+                children: [],
+                depth: 2,
+                id: 'sint-debitis',
+                label: 'Sint debitis blanditiis',
+              },
+              {
+                children: [],
+                depth: 2,
+                id: 'non-nisi',
+                label: 'Non nisi similique',
+              },
+            ]}
+          />
+        </PageSidebar>
+        <PageBody>
+          <Heading id="sint-debitis" level={2}>
+            Sint debitis blanditiis
+          </Heading>
+          <p>
+            Exercitationem dolorum sed incidunt commodi sapiente fuga. Qui qui
+            minima nulla ullam alias magnam et. Reiciendis ea voluptatem ab nisi
+            est aut repudiandae eum magnam. Iusto ex ut velit voluptatem sequi
+            facere voluptas.
+          </p>
+          <p>
+            Vel ut ullam veritatis aut quaerat a eveniet. Voluptatem molestias
+            atque rerum quam eos doloremque dolor dolor non. Rerum laudantium
+            provident eos voluptas minus sit mollitia ex neque. Ea est ut est.
+            Id quaerat repudiandae sint autem architecto adipisci est.
+          </p>
+          <Heading id="non-nisi" level={2}>
+            Non nisi similique
+          </Heading>
+          <p>
+            Non ut id. Dolorem in ex voluptas quis quod ut facere. Laboriosam
+            non necessitatibus mollitia voluptatibus dolorem non ducimus. Et non
+            illo aut quasi accusantium fugiat laudantium veritatis. Odit dicta
+            vel et et rem ipsa nihil. Possimus architecto voluptatibus labore
+            repellat sint aperiam reprehenderit est ratione.
+          </p>
+          <p>
+            Nemo quod est ex ut et quasi. Sed minima voluptatem dolore. Non
+            dolore placeat eos qui praesentium sunt dolores. Consequatur atque
+            quibusdam tempore aut. Quas officiis adipisci consequatur nisi.
+            Quasi veniam qui mollitia sapiente eius ratione necessitatibus nobis
+            molestiae.
+          </p>
+        </PageBody>
+        <PageSidebar>
+          <SharingWidget
+            data={{
+              excerpt:
+                'Dolores deleniti et nemo fuga minus dicta enim dolores. Animi magnam dignissimos quaerat repellat autem alias. Recusandae pariatur autem et omnis eveniet. Magni fuga consequatur ut omnis debitis est error. Quos quae odit.',
+              title: 'The page title',
+              url: '#page',
+            }}
+            heading={<Heading level={2}>Share</Heading>}
+            media={['diaspora', 'email', 'facebook']}
+          />
+        </PageSidebar>
+      </>
+    ),
+  },
 };
 
-/**
- * Page Stories - HeaderBodyFooter
- */
-export const HeaderBodyFooter = Template.bind({});
-HeaderBodyFooter.args = {
-  children: (
-    <>
-      <PageHeader
-        heading="The page title"
-        intro="Dolores deleniti et nemo fuga minus dicta enim dolores. Animi magnam dignissimos quaerat repellat autem alias. Recusandae pariatur autem et omnis eveniet. Magni fuga consequatur ut omnis debitis est error. Quos quae odit."
-      />
-      <PageBody>
-        <Heading level={2}>Sint debitis blanditiis</Heading>
-        <p>
-          Exercitationem dolorum sed incidunt commodi sapiente fuga. Qui qui
-          minima nulla ullam alias magnam et. Reiciendis ea voluptatem ab nisi
-          est aut repudiandae eum magnam. Iusto ex ut velit voluptatem sequi
-          facere voluptas.
-        </p>
-        <p>
-          Vel ut ullam veritatis aut quaerat a eveniet. Voluptatem molestias
-          atque rerum quam eos doloremque dolor dolor non. Rerum laudantium
-          provident eos voluptas minus sit mollitia ex neque. Ea est ut est. Id
-          quaerat repudiandae sint autem architecto adipisci est.
-        </p>
-        <Heading level={2}>Non nisi similique</Heading>
-        <p>
-          Non ut id. Dolorem in ex voluptas quis quod ut facere. Laboriosam non
-          necessitatibus mollitia voluptatibus dolorem non ducimus. Et non illo
-          aut quasi accusantium fugiat laudantium veritatis. Odit dicta vel et
-          et rem ipsa nihil. Possimus architecto voluptatibus labore repellat
-          sint aperiam reprehenderit est ratione.
-        </p>
-        <p>
-          Nemo quod est ex ut et quasi. Sed minima voluptatem dolore. Non dolore
-          placeat eos qui praesentium sunt dolores. Consequatur atque quibusdam
-          tempore aut. Quas officiis adipisci consequatur nisi. Quasi veniam qui
-          mollitia sapiente eius ratione necessitatibus nobis molestiae.
-        </p>
-      </PageBody>
-      <PageFooter
-        readMoreAbout={[
-          { id: 1, name: 'Topic 1', url: '#topic1' },
-          { id: 2, name: 'Topic 2', url: '#topic2' },
-        ]}
-      />
-    </>
-  ),
+export const HeaderBodyFooter: Story = {
+  args: {
+    children: (
+      <>
+        <PageHeader
+          heading="The page title"
+          intro="Dolores deleniti et nemo fuga minus dicta enim dolores. Animi magnam dignissimos quaerat repellat autem alias. Recusandae pariatur autem et omnis eveniet. Magni fuga consequatur ut omnis debitis est error. Quos quae odit."
+        />
+        <PageBody>
+          <Heading level={2}>Sint debitis blanditiis</Heading>
+          <p>
+            Exercitationem dolorum sed incidunt commodi sapiente fuga. Qui qui
+            minima nulla ullam alias magnam et. Reiciendis ea voluptatem ab nisi
+            est aut repudiandae eum magnam. Iusto ex ut velit voluptatem sequi
+            facere voluptas.
+          </p>
+          <p>
+            Vel ut ullam veritatis aut quaerat a eveniet. Voluptatem molestias
+            atque rerum quam eos doloremque dolor dolor non. Rerum laudantium
+            provident eos voluptas minus sit mollitia ex neque. Ea est ut est.
+            Id quaerat repudiandae sint autem architecto adipisci est.
+          </p>
+          <Heading level={2}>Non nisi similique</Heading>
+          <p>
+            Non ut id. Dolorem in ex voluptas quis quod ut facere. Laboriosam
+            non necessitatibus mollitia voluptatibus dolorem non ducimus. Et non
+            illo aut quasi accusantium fugiat laudantium veritatis. Odit dicta
+            vel et et rem ipsa nihil. Possimus architecto voluptatibus labore
+            repellat sint aperiam reprehenderit est ratione.
+          </p>
+          <p>
+            Nemo quod est ex ut et quasi. Sed minima voluptatem dolore. Non
+            dolore placeat eos qui praesentium sunt dolores. Consequatur atque
+            quibusdam tempore aut. Quas officiis adipisci consequatur nisi.
+            Quasi veniam qui mollitia sapiente eius ratione necessitatibus nobis
+            molestiae.
+          </p>
+        </PageBody>
+        <PageFooter
+          readMoreAbout={[
+            { id: 1, name: 'Topic 1', url: '#topic1' },
+            { id: 2, name: 'Topic 2', url: '#topic2' },
+          ]}
+        />
+      </>
+    ),
+  },
 };
 
-/**
- * Page Stories - HeaderBodyComments
- */
-export const HeaderBodyComments = Template.bind({});
-HeaderBodyComments.args = {
-  children: (
-    <>
-      <PageHeader
-        heading="The page title"
-        intro="Dolores deleniti et nemo fuga minus dicta enim dolores. Animi magnam dignissimos quaerat repellat autem alias. Recusandae pariatur autem et omnis eveniet. Magni fuga consequatur ut omnis debitis est error. Quos quae odit."
-      />
-      <PageBody>
-        <Heading level={2}>Sint debitis blanditiis</Heading>
-        <p>
-          Exercitationem dolorum sed incidunt commodi sapiente fuga. Qui qui
-          minima nulla ullam alias magnam et. Reiciendis ea voluptatem ab nisi
-          est aut repudiandae eum magnam. Iusto ex ut velit voluptatem sequi
-          facere voluptas.
-        </p>
-        <p>
-          Vel ut ullam veritatis aut quaerat a eveniet. Voluptatem molestias
-          atque rerum quam eos doloremque dolor dolor non. Rerum laudantium
-          provident eos voluptas minus sit mollitia ex neque. Ea est ut est. Id
-          quaerat repudiandae sint autem architecto adipisci est.
-        </p>
-        <Heading level={2}>Non nisi similique</Heading>
-        <p>
-          Non ut id. Dolorem in ex voluptas quis quod ut facere. Laboriosam non
-          necessitatibus mollitia voluptatibus dolorem non ducimus. Et non illo
-          aut quasi accusantium fugiat laudantium veritatis. Odit dicta vel et
-          et rem ipsa nihil. Possimus architecto voluptatibus labore repellat
-          sint aperiam reprehenderit est ratione.
-        </p>
-        <p>
-          Nemo quod est ex ut et quasi. Sed minima voluptatem dolore. Non dolore
-          placeat eos qui praesentium sunt dolores. Consequatur atque quibusdam
-          tempore aut. Quas officiis adipisci consequatur nisi. Quasi veniam qui
-          mollitia sapiente eius ratione necessitatibus nobis molestiae.
-        </p>
-      </PageBody>
-      <PageComments comments={comments} pageId={1} />
-    </>
-  ),
+export const HeaderBodyComments: Story = {
+  args: {
+    children: (
+      <>
+        <PageHeader
+          heading="The page title"
+          intro="Dolores deleniti et nemo fuga minus dicta enim dolores. Animi magnam dignissimos quaerat repellat autem alias. Recusandae pariatur autem et omnis eveniet. Magni fuga consequatur ut omnis debitis est error. Quos quae odit."
+        />
+        <PageBody>
+          <Heading level={2}>Sint debitis blanditiis</Heading>
+          <p>
+            Exercitationem dolorum sed incidunt commodi sapiente fuga. Qui qui
+            minima nulla ullam alias magnam et. Reiciendis ea voluptatem ab nisi
+            est aut repudiandae eum magnam. Iusto ex ut velit voluptatem sequi
+            facere voluptas.
+          </p>
+          <p>
+            Vel ut ullam veritatis aut quaerat a eveniet. Voluptatem molestias
+            atque rerum quam eos doloremque dolor dolor non. Rerum laudantium
+            provident eos voluptas minus sit mollitia ex neque. Ea est ut est.
+            Id quaerat repudiandae sint autem architecto adipisci est.
+          </p>
+          <Heading level={2}>Non nisi similique</Heading>
+          <p>
+            Non ut id. Dolorem in ex voluptas quis quod ut facere. Laboriosam
+            non necessitatibus mollitia voluptatibus dolorem non ducimus. Et non
+            illo aut quasi accusantium fugiat laudantium veritatis. Odit dicta
+            vel et et rem ipsa nihil. Possimus architecto voluptatibus labore
+            repellat sint aperiam reprehenderit est ratione.
+          </p>
+          <p>
+            Nemo quod est ex ut et quasi. Sed minima voluptatem dolore. Non
+            dolore placeat eos qui praesentium sunt dolores. Consequatur atque
+            quibusdam tempore aut. Quas officiis adipisci consequatur nisi.
+            Quasi veniam qui mollitia sapiente eius ratione necessitatibus nobis
+            molestiae.
+          </p>
+        </PageBody>
+        <PageComments comments={comments} pageId={1} />
+      </>
+    ),
+  },
 };
 
-/**
- * Page Stories - SectionedPage
- */
-export const SectionedPage = Template.bind({});
-SectionedPage.args = {
-  children: (
-    <>
-      <PageSection>
-        <Heading level={2}>A section title</Heading>
-        <p>
-          Illo temporibus nihil maiores nesciunt. Veritatis distinctio aperiam
-          culpa eveniet incidunt eos harum porro labore. Soluta culpa unde
-          adipisci fugiat voluptas eos.
-        </p>
-      </PageSection>
-      <PageSection variant="dark">
-        <Heading level={2}>Another section title</Heading>
-        <p>
-          Sint consequatur animi eum beatae. Non corporis quos quia et magnam.
-          Cumque molestiae blanditiis aut. Et suscipit iusto laudantium iusto
-          dignissimos.
-        </p>
-      </PageSection>
-      <PageSection>
-        <Heading level={2}>A third section title</Heading>
-        <p>
-          Omnis corporis perferendis animi iste quidem placeat est minus. Enim
-          autem consequatur voluptatem provident qui culpa. Aliquid aliquam
-          consequatur non explicabo ut distinctio quis a non. Delectus unde odio
-          eveniet temporibus omnis. Reprehenderit consequatur minima in
-          consequatur saepe est sed. Accusantium quia quae magnam expedita nihil
-          rerum omnis temporibus perspiciatis.
-        </p>
-      </PageSection>
-    </>
-  ),
-  hasSections: true,
+export const SectionedPage: Story = {
+  args: {
+    children: (
+      <>
+        <PageSection>
+          <Heading level={2}>A section title</Heading>
+          <p>
+            Illo temporibus nihil maiores nesciunt. Veritatis distinctio aperiam
+            culpa eveniet incidunt eos harum porro labore. Soluta culpa unde
+            adipisci fugiat voluptas eos.
+          </p>
+        </PageSection>
+        <PageSection variant="dark">
+          <Heading level={2}>Another section title</Heading>
+          <p>
+            Sint consequatur animi eum beatae. Non corporis quos quia et magnam.
+            Cumque molestiae blanditiis aut. Et suscipit iusto laudantium iusto
+            dignissimos.
+          </p>
+        </PageSection>
+        <PageSection>
+          <Heading level={2}>A third section title</Heading>
+          <p>
+            Omnis corporis perferendis animi iste quidem placeat est minus. Enim
+            autem consequatur voluptatem provident qui culpa. Aliquid aliquam
+            consequatur non explicabo ut distinctio quis a non. Delectus unde
+            odio eveniet temporibus omnis. Reprehenderit consequatur minima in
+            consequatur saepe est sed. Accusantium quia quae magnam expedita
+            nihil rerum omnis temporibus perspiciatis.
+          </p>
+        </PageSection>
+      </>
+    ),
+    hasSections: true,
+  },
 };