From 209d1ef6d4a53bccc299b06908dbdad99185a737 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Thu, 4 Jul 2024 17:44:21 +0200
Subject: [PATCH] chore: Extract common layout component for pages (#1323)

---
 .../ArticlePage/ArticlePage.stories.tsx       |   4 -
 .../amsterdam/ArticlePage/ArticlePage.tsx     |  31 ++--
 .../src/pages/amsterdam/FormPage/FormPage.tsx | 155 +++++++++---------
 .../amsterdam/HomePage/HomePage.stories.tsx   |   6 -
 .../src/pages/amsterdam/HomePage/HomePage.tsx |  31 +---
 .../src/pages/amsterdam/common/Layout.tsx     |  17 ++
 .../src/pages/amsterdam/common/config.ts      |  11 --
 .../src/pages/amsterdam/common/config.tsx     |  16 ++
 8 files changed, 124 insertions(+), 147 deletions(-)
 create mode 100644 storybook/src/pages/amsterdam/common/Layout.tsx
 delete mode 100644 storybook/src/pages/amsterdam/common/config.ts
 create mode 100644 storybook/src/pages/amsterdam/common/config.tsx

diff --git a/storybook/src/pages/amsterdam/ArticlePage/ArticlePage.stories.tsx b/storybook/src/pages/amsterdam/ArticlePage/ArticlePage.stories.tsx
index a8d3b6fcef..63bf5ad169 100644
--- a/storybook/src/pages/amsterdam/ArticlePage/ArticlePage.stories.tsx
+++ b/storybook/src/pages/amsterdam/ArticlePage/ArticlePage.stories.tsx
@@ -3,11 +3,8 @@
  * Copyright Gemeente Amsterdam
  */
 
-import type { FooterProps } from '@amsterdam/design-system-react'
 import { Meta, StoryObj } from '@storybook/react'
-import type { ReactElement } from 'react'
 import { ArticlePage } from './ArticlePage'
-import * as FooterStories from '../../../components/Footer/Footer.stories'
 import * as ImageStories from '../../../components/Image/Image.stories'
 import { commonMeta } from '../common/config'
 
@@ -16,7 +13,6 @@ const meta = {
   title: 'Pages/Amsterdam.nl/Article Page',
   component: ArticlePage,
   args: {
-    footer: FooterStories.Default.args?.children as ReactElement<FooterProps>,
     heading: 'Ontvang uw paspoort of ID-kaart in de zomer gratis thuis',
     imageSrc: ImageStories.LazyLoading.args?.src,
     lead: 'Niet meer naar het Stadsloket, maar thuis of op het werk uw nieuwe paspoort ontvangen. In juni en juli kan dat. Deze zomer bezorgt de gemeente reisdocumenten gratis aan huis. We doen dat om de drukte in de Stadsloketten te verminderen. En u hoeft maar 1 keer naar het Stadsloket.',
diff --git a/storybook/src/pages/amsterdam/ArticlePage/ArticlePage.tsx b/storybook/src/pages/amsterdam/ArticlePage/ArticlePage.tsx
index 85cf5854aa..b30ec3d443 100644
--- a/storybook/src/pages/amsterdam/ArticlePage/ArticlePage.tsx
+++ b/storybook/src/pages/amsterdam/ArticlePage/ArticlePage.tsx
@@ -1,13 +1,8 @@
-import { Footer, Screen, SkipLink } from '@amsterdam/design-system-react'
-import type { FooterProps } from '@amsterdam/design-system-react'
-import { ReactElement } from 'react'
 import { ArticleBody } from './ArticleBody'
 import { ArticleBreadcrumb } from './ArticleBreadcrumb'
 import { ArticleHeader } from './ArticleHeader'
-import { AppHeader } from '../common/AppHeader'
 
 export type ArticlePageProps = {
-  footer: ReactElement<FooterProps>
   heading: string
   imageSrc: string
   lead: string
@@ -17,7 +12,6 @@ export type ArticlePageProps = {
 }
 
 export const ArticlePage = ({
-  footer,
   heading,
   imageSrc,
   lead,
@@ -26,20 +20,15 @@ export const ArticlePage = ({
   spotlightLinkLabel,
 }: ArticlePageProps) => (
   <>
-    <SkipLink href="#main">Direct naar inhoud</SkipLink>
-    <Screen maxWidth="wide">
-      <AppHeader />
-      <ArticleBreadcrumb />
-      <main id="main">
-        <ArticleHeader heading={heading} imageSrc={imageSrc} />
-        <ArticleBody
-          lead={lead}
-          paragraph1={paragraph1}
-          spotlightHeading={spotlightHeading}
-          spotlightLinkLabel={spotlightLinkLabel}
-        />
-      </main>
-      <Footer>{footer}</Footer>
-    </Screen>
+    <ArticleBreadcrumb />
+    <main id="main">
+      <ArticleHeader heading={heading} imageSrc={imageSrc} />
+      <ArticleBody
+        lead={lead}
+        paragraph1={paragraph1}
+        spotlightHeading={spotlightHeading}
+        spotlightLinkLabel={spotlightLinkLabel}
+      />
+    </main>
   </>
 )
diff --git a/storybook/src/pages/amsterdam/FormPage/FormPage.tsx b/storybook/src/pages/amsterdam/FormPage/FormPage.tsx
index 9be619a571..037632cd7d 100644
--- a/storybook/src/pages/amsterdam/FormPage/FormPage.tsx
+++ b/storybook/src/pages/amsterdam/FormPage/FormPage.tsx
@@ -12,100 +12,91 @@ import {
   Paragraph,
   Radio,
   Row,
-  Screen,
   Select,
-  SkipLink,
   TextArea,
   TextInput,
 } from '@amsterdam/design-system-react'
 import { useState } from 'react'
-import { AppHeader } from '../common/AppHeader'
 
 export const FormPage = () => {
   const [textareaLength, setTextareaLength] = useState(0)
 
   return (
-    <>
-      <SkipLink href="#main">Direct naar inhoud</SkipLink>
-      <Screen maxWidth="wide">
-        <AppHeader />
-        <Grid paddingTop="small" paddingBottom="medium">
-          <Grid.Cell span={{ narrow: 4, medium: 6, wide: 8 }} start={{ narrow: 1, medium: 2, wide: 3 }}>
-            <Breadcrumb>
-              <Breadcrumb.Link>Home</Breadcrumb.Link>
-            </Breadcrumb>
-            <Heading className="ams-mb--md">Contact</Heading>
-            <form className="ams-gap--md" id="main" onSubmit={(e) => e.preventDefault()}>
+    <Grid paddingTop="small" paddingBottom="medium">
+      <Grid.Cell span={{ narrow: 4, medium: 6, wide: 8 }} start={{ narrow: 1, medium: 2, wide: 3 }}>
+        <Breadcrumb>
+          <Breadcrumb.Link>Home</Breadcrumb.Link>
+        </Breadcrumb>
+        <Heading className="ams-mb--md">Contact</Heading>
+        <form className="ams-gap--md" id="main" onSubmit={(e) => e.preventDefault()}>
+          <Field>
+            <Label htmlFor="body">Wat wilt u aan de gemeente vragen?</Label>
+            <Paragraph id="bodyDescription" size="small">
+              Een duidelijke beschrijving van uw vraag helpt ons bij het behandelen.
+            </Paragraph>
+            <TextArea
+              aria-describedby="bodyDescription"
+              id="body"
+              onChange={(e) => setTextareaLength(e.target.value.length)}
+              rows={4}
+            />
+            <FormFieldCharacterCounter length={textareaLength} maxLength={1000} />
+          </Field>
+          <FieldSet aria-describedby="contactDetailsDescription" legend="Wat zijn uw gegevens?">
+            <Column gap="small">
+              <Paragraph id="contactDetailsDescription">
+                Wij hebben uw gegevens nodig om contact met u te kunnen opnemen.
+              </Paragraph>
               <Field>
-                <Label htmlFor="body">Wat wilt u aan de gemeente vragen?</Label>
-                <Paragraph id="bodyDescription" size="small">
-                  Een duidelijke beschrijving van uw vraag helpt ons bij het behandelen.
-                </Paragraph>
-                <TextArea
-                  aria-describedby="bodyDescription"
-                  id="body"
-                  onChange={(e) => setTextareaLength(e.target.value.length)}
-                  rows={4}
-                />
-                <FormFieldCharacterCounter length={textareaLength} maxLength={1000} />
+                <Label htmlFor="initials">Voorletters</Label>
+                <TextInput id="initials" name="initials" />
               </Field>
-              <FieldSet aria-describedby="contactDetailsDescription" legend="Wat zijn uw gegevens?">
-                <Column gap="small">
-                  <Paragraph id="contactDetailsDescription">
-                    Wij hebben uw gegevens nodig om contact met u te kunnen opnemen.
-                  </Paragraph>
-                  <Field>
-                    <Label htmlFor="initials">Voorletters</Label>
-                    <TextInput id="initials" name="initials" />
-                  </Field>
-                  <Field>
-                    <Label htmlFor="familyName">Achternaam</Label>
-                    <TextInput autoComplete="family-name" id="familyName" name="familyName" />
-                  </Field>
-                  <FieldSet legend="Woonplaats">
-                    <Radio name="city" value="amsterdam">
-                      Amsterdam
-                    </Radio>
-                    <Radio name="city" value="weesp">
-                      Weesp
-                    </Radio>
-                    <Radio name="city" value="anders">
-                      Anders
-                    </Radio>
-                  </FieldSet>
-                  <Field>
-                    <Label htmlFor="email">E-mail</Label>
-                    <TextInput autoComplete="email" id="email" name="email" />
-                  </Field>
-                  <Row wrap>
-                    <Field>
-                      <Label htmlFor="countryCode">Landnummer</Label>
-                      <Select id="countryCode" name="countryCode">
-                        <Select.Option value="+31">Nederland +31</Select.Option>
-                        <Select.Option value="+32">België +32</Select.Option>
-                        <Select.Option value="+33">Frankrijk +33</Select.Option>
-                      </Select>
-                    </Field>
-                    <Field>
-                      <Label htmlFor="phone">Telefoonnummer</Label>
-                      <TextInput autoComplete="tel" id="phone" name="phone" />
-                    </Field>
-                  </Row>
-                </Column>
+              <Field>
+                <Label htmlFor="familyName">Achternaam</Label>
+                <TextInput autoComplete="family-name" id="familyName" name="familyName" />
+              </Field>
+              <FieldSet legend="Woonplaats">
+                <Radio name="city" value="amsterdam">
+                  Amsterdam
+                </Radio>
+                <Radio name="city" value="weesp">
+                  Weesp
+                </Radio>
+                <Radio name="city" value="anders">
+                  Anders
+                </Radio>
               </FieldSet>
-              <Alert severity="info">
-                <Paragraph>
-                  We bewaren uw contactgegevens voor het afhandelen van uw vraag of klacht en het verbeteren van onze
-                  dienstverlening.
-                </Paragraph>
-              </Alert>
-              <div>
-                <Button type="submit">Versturen</Button>
-              </div>
-            </form>
-          </Grid.Cell>
-        </Grid>
-      </Screen>
-    </>
+              <Field>
+                <Label htmlFor="email">E-mail</Label>
+                <TextInput autoComplete="email" id="email" name="email" />
+              </Field>
+              <Row wrap>
+                <Field>
+                  <Label htmlFor="countryCode">Landnummer</Label>
+                  <Select id="countryCode" name="countryCode">
+                    <Select.Option value="+31">Nederland +31</Select.Option>
+                    <Select.Option value="+32">België +32</Select.Option>
+                    <Select.Option value="+33">Frankrijk +33</Select.Option>
+                  </Select>
+                </Field>
+                <Field>
+                  <Label htmlFor="phone">Telefoonnummer</Label>
+                  <TextInput autoComplete="tel" id="phone" name="phone" />
+                </Field>
+              </Row>
+            </Column>
+          </FieldSet>
+          <Alert severity="info">
+            <Paragraph>
+              We bewaren uw contactgegevens voor het afhandelen van uw vraag of klacht en het verbeteren van onze
+              dienstverlening.
+            </Paragraph>
+          </Alert>
+          <div>
+            <Button type="submit">Versturen</Button>
+          </div>
+        </form>
+      </Grid.Cell>
+    </Grid>
   )
 }
diff --git a/storybook/src/pages/amsterdam/HomePage/HomePage.stories.tsx b/storybook/src/pages/amsterdam/HomePage/HomePage.stories.tsx
index a4aa46900e..65d7a40aa7 100644
--- a/storybook/src/pages/amsterdam/HomePage/HomePage.stories.tsx
+++ b/storybook/src/pages/amsterdam/HomePage/HomePage.stories.tsx
@@ -3,20 +3,14 @@
  * Copyright Gemeente Amsterdam
  */
 
-import type { FooterProps } from '@amsterdam/design-system-react'
 import { Meta, StoryObj } from '@storybook/react'
-import type { ReactElement } from 'react'
 import { HomePage } from './HomePage'
-import * as FooterStories from '../../../components/Footer/Footer.stories'
 import { commonMeta } from '../common/config'
 
 const meta = {
   ...commonMeta,
   title: 'Pages/Amsterdam.nl/Home Page',
   component: HomePage,
-  args: {
-    footer: FooterStories.Default.args?.children as ReactElement<FooterProps>,
-  },
 } satisfies Meta<typeof HomePage>
 
 export default meta
diff --git a/storybook/src/pages/amsterdam/HomePage/HomePage.tsx b/storybook/src/pages/amsterdam/HomePage/HomePage.tsx
index c181ba0e3f..a002138d55 100644
--- a/storybook/src/pages/amsterdam/HomePage/HomePage.tsx
+++ b/storybook/src/pages/amsterdam/HomePage/HomePage.tsx
@@ -1,29 +1,14 @@
-import { Footer, Overlap, Screen, SkipLink } from '@amsterdam/design-system-react'
-import type { FooterProps } from '@amsterdam/design-system-react'
-import { ReactElement } from 'react'
+import { Overlap } from '@amsterdam/design-system-react'
 import { HomeNews } from './HomeNews'
 import { HomeSpotlight } from './HomeSpotlight'
 import { HomeTopTasks } from './HomeTopTasks'
 import { Default as OverlapStory } from '../../../components/Overlap/Overlap.stories'
-import SkipLinkStoryMeta from '../../../components/SkipLink/SkipLink.stories'
-import { AppHeader } from '../common/AppHeader'
 
-type HomePageProps = {
-  footer: ReactElement<FooterProps>
-}
-
-export const HomePage = ({ footer }: HomePageProps) => (
-  <>
-    <SkipLink href="#main">{SkipLinkStoryMeta.args.children}</SkipLink>
-    <Screen maxWidth="wide">
-      <AppHeader />
-      <main id="main">
-        <Overlap>{OverlapStory.args?.children}</Overlap>
-        <HomeTopTasks />
-        <HomeSpotlight />
-        <HomeNews />
-      </main>
-      <Footer>{footer}</Footer>
-    </Screen>
-  </>
+export const HomePage = () => (
+  <main id="main">
+    <Overlap>{OverlapStory.args?.children}</Overlap>
+    <HomeTopTasks />
+    <HomeSpotlight />
+    <HomeNews />
+  </main>
 )
diff --git a/storybook/src/pages/amsterdam/common/Layout.tsx b/storybook/src/pages/amsterdam/common/Layout.tsx
new file mode 100644
index 0000000000..901af75a10
--- /dev/null
+++ b/storybook/src/pages/amsterdam/common/Layout.tsx
@@ -0,0 +1,17 @@
+import { Footer, Screen, SkipLink } from '@amsterdam/design-system-react'
+import type { HTMLAttributes, PropsWithChildren } from 'react'
+import { AppHeader } from './AppHeader'
+import { Default as FooterStory } from '../../../components/Footer/Footer.stories'
+
+type LayoutProps = PropsWithChildren<HTMLAttributes<HTMLElement>>
+
+export const Layout = ({ children }: LayoutProps) => (
+  <>
+    <SkipLink href="#main">Direct naar inhoud</SkipLink>
+    <Screen maxWidth="wide">
+      <AppHeader />
+      {children}
+      <Footer>{FooterStory.args?.children}</Footer>
+    </Screen>
+  </>
+)
diff --git a/storybook/src/pages/amsterdam/common/config.ts b/storybook/src/pages/amsterdam/common/config.ts
deleted file mode 100644
index ab4c8ae887..0000000000
--- a/storybook/src/pages/amsterdam/common/config.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export const commonMeta = {
-  argTypes: {
-    footer: {
-      table: { disable: true },
-    },
-  },
-  parameters: {
-    layout: 'fullscreen',
-    themes: { themeOverride: 'Spacious' },
-  },
-}
diff --git a/storybook/src/pages/amsterdam/common/config.tsx b/storybook/src/pages/amsterdam/common/config.tsx
new file mode 100644
index 0000000000..4c66b1e198
--- /dev/null
+++ b/storybook/src/pages/amsterdam/common/config.tsx
@@ -0,0 +1,16 @@
+import type { Meta } from '@storybook/react'
+import { Layout } from './Layout'
+
+export const commonMeta = {
+  decorators: [
+    (Story) => (
+      <Layout>
+        <Story />
+      </Layout>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    themes: { themeOverride: 'Spacious' },
+  },
+} satisfies Meta