Skip to content

Commit

Permalink
chore: Extract common layout component for pages (#1323)
Browse files Browse the repository at this point in the history
  • Loading branch information
@VincentSmedinga
VincentSmedinga authored Jul 4, 2024
1 parent cdff513 commit 209d1ef
Show file tree
Hide file tree
Showing 8 changed files with 124 additions and 147 deletions.
4 changes: 0 additions & 4 deletions storybook/src/pages/amsterdam/ArticlePage/ArticlePage.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand All @@ -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.',
Expand Down
31 changes: 10 additions & 21 deletions storybook/src/pages/amsterdam/ArticlePage/ArticlePage.tsx
View file
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -17,7 +12,6 @@ export type ArticlePageProps = {
}

export const ArticlePage = ({
footer,
heading,
imageSrc,
lead,
Expand All @@ -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>
</>
)
155 changes: 73 additions & 82 deletions storybook/src/pages/amsterdam/FormPage/FormPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
}
6 changes: 0 additions & 6 deletions storybook/src/pages/amsterdam/HomePage/HomePage.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
31 changes: 8 additions & 23 deletions storybook/src/pages/amsterdam/HomePage/HomePage.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
)
17 changes: 17 additions & 0 deletions storybook/src/pages/amsterdam/common/Layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
</>
)
11 changes: 0 additions & 11 deletions storybook/src/pages/amsterdam/common/config.ts
View file

This file was deleted.

16 changes: 16 additions & 0 deletions storybook/src/pages/amsterdam/common/config.tsx
View file
Original file line number Diff line number Diff line change
@@ -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

0 comments on commit 209d1ef

Please sign in to comment.