Article page pattern for demo

storybook/src/docs/patterns/AmsterdamArticleContent.tsx

@@ -0,0 +1,30 @@
+import { Column, Grid, Heading, Paragraph } from '@amsterdam/design-system-react'
+
+export type AmsterdamArticleContentProps = {}
+
+export const AmsterdamArticleContent = () => {
+  return (
+    <Grid paddingVertical="large">
+      <Grid.Cell span={{ narrow: 4, medium: 8, wide: 10 }} start={{ narrow: 1, medium: 1, wide: 2 }}>
+        <Column gap="medium">
+          <Paragraph size="large">
+            Tussen 1813 en 1870 was Amsterdam in verval. In 1735 leefden er 240.000 mensen in de stad. In 1815 waren dat
+            er nog maar 180.000. Amsterdam was een stervende stad, terend op oude roem en een kleine groep rijken.
+            Verkrotting, isolement en armoede tekenden de stad. Amsterdam verdween bijna van het wereldtoneel.
+          </Paragraph>
+          <Paragraph>
+            Tot slaaf gemaakte mensen vluchtten en kwamen regelmatig in opstand. De Nederlandse
+            anti-slavernij-activisten waren vaak jongeren en vrouwen. Bezoekers zien, lezen en horen persoonlijke
+            verhalen van mensen die tegen de trans-Atlantische slavernij in verzet kwamen.
+          </Paragraph>
+          <Heading level={3}>Van alle tijden</Heading>
+          <Paragraph>
+            “Verzet tegen onrecht is van alle tijden en van alle mensen. Dat is wat ons verbindt. Deze tentoonstelling
+            past daarom goed in het Verzetsmuseum”, zegt Peggy Brandon, kwartiermaker Nationaal Slavernijmuseum. Het
+            Verzetsmuseum gaat over de geschiedenis van de Tweede Wereldoorlog.
+          </Paragraph>
+        </Column>
+      </Grid.Cell>
+    </Grid>
+  )
+}

storybook/src/docs/patterns/AmsterdamArticleHeader.tsx

@@ -0,0 +1,25 @@
+import { AspectRatio, Grid, Heading, Image, Overlap } from '@amsterdam/design-system-react'
+
+export type AmsterdamArticleHeaderProps = {
+  src: string
+  alt: string
+}
+
+export const AmsterdamArticleHeader = ({ src, alt }: AmsterdamArticleHeaderProps) => {
+  return (
+    <header>
+      <Grid paddingVertical="small">
+        <Grid.Cell span={{ narrow: 4, medium: 8, wide: 10 }} start={{ narrow: 1, medium: 1, wide: 2 }}>
+          <Heading>Amsterdam Article Header</Heading>
+        </Grid.Cell>
+      </Grid>
+      {src && (
+        <Overlap>
+          <AspectRatio ratio="2x-wide">
+            <Image src={src} alt={alt ? alt : ''} loading="lazy" />
+          </AspectRatio>
+        </Overlap>
+      )}
+    </header>
+  )
+}

storybook/src/docs/patterns/AmsterdamArticlePage.tsx

@@ -0,0 +1,43 @@
+import { BreadcrumbProps, Footer, FooterProps, Grid, Header, Screen, SkipLink } from '@amsterdam/design-system-react'
+import { ReactElement } from 'react'
+import { AmsterdamArticleContent } from './AmsterdamArticleContent'
+import { AmsterdamArticleHeader } from './AmsterdamArticleHeader'
+
+export type AmsterdamArticlePageProps = {
+  articleImage?: string
+  articleImageAlt?: string
+  breadcrumbs?: ReactElement<BreadcrumbProps>
+  footer?: ReactElement<FooterProps>
+}
+
+export const AmsterdamArticlePage = ({
+  articleImage = '',
+  articleImageAlt = '',
+  breadcrumbs,
+  footer,
+}: AmsterdamArticlePageProps) => {
+  return (
+    <>
+      <SkipLink href="#main">Direct naar inhoud</SkipLink>
+      <Screen maxWidth="wide">
+        <Grid>
+          <Grid.Cell span="all">
+            <Header menu={<button className="ams-header__menu-button">Menu</button>} />
+          </Grid.Cell>
+        </Grid>
+
+        {breadcrumbs && (
+          <Grid paddingTop="medium">
+            <Grid.Cell span="all">{breadcrumbs}</Grid.Cell>
+          </Grid>
+        )}
+
+        <AmsterdamArticleHeader src={articleImage} alt={articleImageAlt} />
+
+        <AmsterdamArticleContent />
+
+        <Footer>{footer}</Footer>
+      </Screen>
+    </>
+  )
+}