From 0f936ec0e7606cb79434d94096b6e113a7ce78eb Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 15 Dec 2023 18:35:16 +0100
Subject: refactor(stories): migrate stories to CSF3 format

---
 src/components/templates/page/page.stories.tsx | 723 ++++++++++++-------------
 1 file changed, 356 insertions(+), 367 deletions(-)

(limited to 'src/components/templates/page/page.stories.tsx')

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,
+  },
 };
-- 
cgit v1.2.3