feat: Add examples of entire pages to Storybook (#1234)

Co-authored-by: Vincent Smedinga <[email protected]>
Amsterdam · Jun 21, 2024 · e5f8d58 · e5f8d58
1 parent 5593916
commit e5f8d58
Show file tree

Hide file tree

Showing 27 changed files with 808 additions and 89 deletions.
diff --git a/packages/react/src/PageMenu/PageMenu.test.tsx b/packages/react/src/PageMenu/PageMenu.test.tsx
@@ -8,9 +8,11 @@ describe('Page menu', () => {
   it('renders a page menu with children', () => {
     const { container } = render(
       <PageMenu>
-        <PageMenu.Link href="#">English</PageMenu.Link>
+        <PageMenu.Link href="#" lang="en">
+          English
+        </PageMenu.Link>
         <PageMenu.Link href="#" icon={LoginIcon}>
-          Inloggen Mijn Amsterdam
+          Mijn Amsterdam
         </PageMenu.Link>
       </PageMenu>,
     )
@@ -39,7 +41,9 @@ describe('Page menu', () => {
     const ref = createRef<HTMLUListElement>()
     const { container } = render(
       <PageMenu ref={ref}>
-        <PageMenu.Link href="#">English</PageMenu.Link>
+        <PageMenu.Link href="#" lang="en">
+          English
+        </PageMenu.Link>
       </PageMenu>,
     )
     const component = container.querySelector(':only-child')

diff --git a/storybook/config/manager-head.html b/storybook/config/manager-head.html
@@ -1,9 +1,11 @@
 <script id="storybook-mod-expand-all-folders" type="text/javascript">
   // Somewhat hacky way to expand all folders. Storybook does not support that natively.
   var clickCollapsedItemsUntilNoneLeft = () => {
-    const itemsLeftToClick = document.querySelectorAll('button[data-parent-id="components"][aria-expanded="false"]');
+    const collapsedItems = document.querySelectorAll(
+      ':is(button[data-parent-id="components"], button[data-parent-id="pages"])[aria-expanded="false"]',
+    );
 
-    for (item of itemsLeftToClick) {
+    for (item of collapsedItems) {
       item.click();
     }
   };

diff --git a/storybook/config/preview.tsx b/storybook/config/preview.tsx
@@ -42,6 +42,8 @@ export const parameters = {
         ['Introduction', 'Assets', 'Design Guidelines'],
         'Components',
         ['Buttons', 'Containers', 'Feedback', 'Forms', 'Layout', 'Media', 'Navigation', 'Text'],
+        'Pages',
+        ['Introduction', 'Amsterdam.nl', ['Home']],
       ],
     },
   },

diff --git a/storybook/config/storybook-overrides.css b/storybook/config/storybook-overrides.css
@@ -114,4 +114,8 @@
   font-size: 0.875rem;
 }
 
+:is(#storybook-root, .sbdocs-content) a[href="#"] {
+  cursor: not-allowed;
+}
+
 /* stylelint-enable */
diff --git a/storybook/src/components/Breadcrumb/Breadcrumb.stories.tsx b/storybook/src/components/Breadcrumb/Breadcrumb.stories.tsx
@@ -22,10 +22,13 @@ export const Default: Story = {
         Home
       </Breadcrumb.Link>,
       <Breadcrumb.Link href="#" key={2}>
-        Nieuws
+        Afval
       </Breadcrumb.Link>,
       <Breadcrumb.Link href="#" key={3}>
-        Kennisgevingen en bekendmakingen
+        Bedrijfsafval
+      </Breadcrumb.Link>,
+      <Breadcrumb.Link href="#" key={4}>
+        Recyclepunten voor bedrijven
       </Breadcrumb.Link>,
     ],
   },

diff --git a/storybook/src/components/Card/Card.stories.tsx b/storybook/src/components/Card/Card.stories.tsx
@@ -5,6 +5,7 @@
 
 import { AspectRatio, Card, Heading, Image, Paragraph } from '@amsterdam/design-system-react/src'
 import { Meta, StoryObj } from '@storybook/react'
+import { exampleTopTask } from '../shared/exampleContent'
 
 const dateFormat = new Intl.DateTimeFormat('nl', {
   day: 'numeric',
@@ -13,6 +14,8 @@ const dateFormat = new Intl.DateTimeFormat('nl', {
 })
 const today = dateFormat.format(Date.now())
 
+const topTask = exampleTopTask()
+
 const meta = {
   title: 'Components/Navigation/Card',
   component: Card,
@@ -33,11 +36,9 @@ export const Default: Story = {
   args: {
     children: [
       <Heading size="level-4" key={1}>
-        <Card.Link href="/">Monitor Attracties MRA</Card.Link>
+        <Card.Link href="/">{topTask.heading}</Card.Link>
       </Heading>,
-      <Paragraph key={2}>
-        Ontwikkeling van het aantal attracties en bezoekers in de metropoolregio Amsterdam.
-      </Paragraph>,
+      <Paragraph key={2}>{topTask.description}</Paragraph>,
     ],
   },
 }
@@ -63,13 +64,13 @@ export const WithImage: Story = {
       <AspectRatio key={1} ratio="wide">
         <Image alt="" src="https://picsum.photos/480/360" />
       </AspectRatio>,
-      <Card.HeadingGroup key={2} tagline="Dossier">
+      <Card.HeadingGroup key={2} tagline="Nieuws">
         <Heading size="level-4">
-          <Card.Link href="/">Monitor Attracties MRA</Card.Link>
+          <Card.Link href="/">Nederlands eerste houten woonwijk komt in Zuidoost</Card.Link>
         </Heading>
       </Card.HeadingGroup>,
       <Paragraph key={3}>
-        Ontwikkeling van het aantal attracties en bezoekers in de metropoolregio Amsterdam.
+        We bouwen een levendige, groene en duurzame woonbuurt tussen de Gooiseweg en het Nelson Mandelapark.
       </Paragraph>,
       <Paragraph key={4} size="small">
         {today}

diff --git a/storybook/src/components/Footer/Footer.docs.mdx b/storybook/src/components/Footer/Footer.docs.mdx
@@ -1,6 +1,6 @@
 {/* @license CC0-1.0 */}
 
-import { Markdown, Meta, Primary } from "@storybook/blocks";
+import { Canvas, Markdown, Meta, Primary } from "@storybook/blocks";
 import * as FooterStories from "./Footer.stories.tsx";
 import README from "../../../../packages/css/src/components/footer/README.md?raw";
 
@@ -9,3 +9,12 @@ import README from "../../../../packages/css/src/components/footer/README.md?raw
 <Markdown>{README}</Markdown>
 
 <Primary />
+
+## Examples
+
+### Onderzoek en Statistiek
+
+The footer for a specific website can be a bit different.
+Here’s an example for the ‘Onderzoek en Statistiek’ department.
+
+<Canvas of={FooterStories.Onderzoek} />
diff --git a/storybook/src/components/Footer/Footer.stories.tsx b/storybook/src/components/Footer/Footer.stories.tsx
@@ -12,8 +12,17 @@ import {
   Paragraph,
   VisuallyHidden,
 } from '@amsterdam/design-system-react/src'
-import { EmailIcon, PhoneIcon } from '@amsterdam/design-system-react-icons'
+import {
+  CameraIcon,
+  ClockIcon,
+  EmailIcon,
+  FacebookIcon,
+  LinkedinIcon,
+  PhoneIcon,
+  TwitterIcon,
+} from '@amsterdam/design-system-react-icons'
 import { Meta, StoryObj } from '@storybook/react'
+import { Default as PageMenuStory } from '../../components/PageMenu/PageMenu.stories'
 
 const meta = {
   title: 'Components/Containers/Footer',
@@ -24,6 +33,13 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
+const socialPlatforms = [
+  { icon: TwitterIcon, name: 'Twitter' },
+  { icon: FacebookIcon, name: 'Facebook' },
+  { icon: LinkedinIcon, name: 'Linkedin' },
+  { icon: CameraIcon, name: 'Instagram' },
+]
+
 export const Default: Story = {
   args: {
     children: [
@@ -32,65 +48,140 @@ export const Default: Story = {
           <Heading>Colofon</Heading>
         </VisuallyHidden>
         <Grid gapVertical="large" paddingVertical="medium">
-          <Grid.Cell span={3}>
-            <div style={{ display: 'grid', gap: '2.5rem' }}>
-              <Heading level={2} size="level-4" inverseColor>
-                Contact
+          <Grid.Cell span={4}>
+            <Heading className="ams-mb--xs" level={2} size="level-4" inverseColor>
+              Meer weten
+            </Heading>
+            <LinkList>
+              {['Veel gestelde vragen', 'Over ons', 'Werken bij', 'Kalender', 'Uit in Amsterdam', 'Bronnen'].map(
+                (label, index) => (
+                  <LinkList.Link href="#" key={index} onBackground="dark" size="small">
+                    {label}
+                  </LinkList.Link>
+                ),
+              )}
+            </LinkList>
+          </Grid.Cell>
+          <Grid.Cell span={4} start={{ narrow: 1, medium: 5, wide: 5 }}>
+            <Heading className="ams-mb--xs" level={2} size="level-4" inverseColor>
+              Contact
+            </Heading>
+            <Paragraph className="ams-mb--xs" inverseColor size="small">
+              Hebt u een vraag en kunt u het antwoord niet vinden op deze website? Neem dan contact met ons op.
+            </Paragraph>
+            <LinkList>
+              <LinkList.Link href="mailto:[email protected]" icon={EmailIcon} onBackground="dark" size="small">
+                E-mail
+              </LinkList.Link>
+              <LinkList.Link href="tel:+3114020" icon={PhoneIcon} onBackground="dark" size="small">
+                14 020
+              </LinkList.Link>
+              <LinkList.Link href="#" icon={ClockIcon} onBackground="dark" size="small">
+                Contactgegevens en openingstijden
+              </LinkList.Link>
+            </LinkList>
+          </Grid.Cell>
+          <Grid.Cell span={4} start={{ narrow: 1, medium: 1, wide: 9 }}>
+            <section className="ams-mb--md">
+              <Heading className="ams-mb--xs" level={2} size="level-4" inverseColor>
+                Nieuwsbrief
               </Heading>
-              <Paragraph size="small" inverseColor>
-                Heeft u een vraag en kunt u het antwoord niet vinden op deze site? Neem dan contact met ons op.
-              </Paragraph>
               <LinkList>
-                <LinkList.Link href="mailto:[email protected]" icon={EmailIcon} onBackground="dark" size="small">
-                  E-mail
-                </LinkList.Link>
-                <LinkList.Link href="tel:+31202510333" icon={PhoneIcon} onBackground="dark" size="small">
-                  020 251 0333
+                <LinkList.Link href="#" onBackground="dark" size="small">
+                  Inschrijven
                 </LinkList.Link>
               </LinkList>
-            </div>
-          </Grid.Cell>
-          <Grid.Cell span={3} start={{ narrow: 1, medium: 5, wide: 5 }}>
-            <div style={{ display: 'grid', gap: '2.5rem' }}>
-              <Heading level={2} size="level-4" inverseColor>
-                Panels en enquêtes
+            </section>
+            <section>
+              <Heading className="ams-mb--xs" level={2} size="level-4" inverseColor>
+                Volg ons
               </Heading>
-              <Paragraph size="small" inverseColor>
-                Bent u uitgenodigd om mee te doen aan onderzoek of heeft u vragen over het panel of stadspaspanel?
-              </Paragraph>
               <LinkList>
-                <LinkList.Link href="#" onBackground="dark" rel="external" size="small">
-                  Meedoen aan onderzoek
-                </LinkList.Link>
-                <LinkList.Link href="#" onBackground="dark" rel="external" size="small">
-                  Panel Amsterdam
-                </LinkList.Link>
-                <LinkList.Link href="#" onBackground="dark" rel="external" size="small">
-                  Stadspaspanel Amsterdam
-                </LinkList.Link>
+                {socialPlatforms.map(({ name, icon }) => (
+                  <LinkList.Link href="#" icon={icon} key={name} onBackground="dark" size="small">
+                    {name}
+                  </LinkList.Link>
+                ))}
               </LinkList>
-            </div>
+            </section>
+          </Grid.Cell>
+        </Grid>
+      </Footer.Top>,
+      <Footer.Bottom key="footer-bottom">
+        <VisuallyHidden>
+          <Heading level={2}>Over deze website</Heading>
+        </VisuallyHidden>
+        <Grid paddingVertical="small">
+          <Grid.Cell span="all">
+            <PageMenu>{PageMenuStory.args?.children}</PageMenu>
+          </Grid.Cell>
+        </Grid>
+      </Footer.Bottom>,
+    ],
+  },
+}
+
+export const Onderzoek: Story = {
+  args: {
+    children: [
+      <Footer.Top key="footer-top">
+        <VisuallyHidden>
+          <Heading>Colofon</Heading>
+        </VisuallyHidden>
+        <Grid gapVertical="large" paddingVertical="medium">
+          <Grid.Cell span={3}>
+            <Heading className="ams-mb--xs" level={2} size="level-4" inverseColor>
+              Contact
+            </Heading>
+            <Paragraph className="ams-mb--xs" size="small" inverseColor>
+              Heeft u een vraag en kunt u het antwoord niet vinden op deze site? Neem dan contact met ons op.
+            </Paragraph>
+            <LinkList>
+              <LinkList.Link href="mailto:[email protected]" icon={EmailIcon} onBackground="dark" size="small">
+                E-mail
+              </LinkList.Link>
+              <LinkList.Link href="tel:+31202510333" icon={PhoneIcon} onBackground="dark" size="small">
+                020 251 0333
+              </LinkList.Link>
+            </LinkList>
+          </Grid.Cell>
+          <Grid.Cell span={3} start={{ narrow: 1, medium: 5, wide: 5 }}>
+            <Heading className="ams-mb--xs" level={2} size="level-4" inverseColor>
+              Panels en enquêtes
+            </Heading>
+            <Paragraph className="ams-mb--xs" inverseColor size="small">
+              Bent u uitgenodigd om mee te doen aan onderzoek of heeft u vragen over het panel of stadspaspanel?
+            </Paragraph>
+            <LinkList>
+              <LinkList.Link href="#" onBackground="dark" rel="external" size="small">
+                Meedoen aan onderzoek
+              </LinkList.Link>
+              <LinkList.Link href="#" onBackground="dark" rel="external" size="small">
+                Panel Amsterdam
+              </LinkList.Link>
+              <LinkList.Link href="#" onBackground="dark" rel="external" size="small">
+                Stadspaspanel Amsterdam
+              </LinkList.Link>
+            </LinkList>
           </Grid.Cell>
           <Grid.Cell span={3} start={{ narrow: 1, medium: 1, wide: 9 }}>
-            <div style={{ display: 'grid', gap: '2.5rem' }}>
-              <Heading level={2} size="level-4" inverseColor>
-                Onderzoek en Statistiek
-              </Heading>
-              <LinkList>
-                <LinkList.Link href="#" onBackground="dark" size="small">
-                  Over Onderzoek en Statistiek
-                </LinkList.Link>
-                <LinkList.Link href="#" onBackground="dark" size="small">
-                  Veelgestelde vragen
-                </LinkList.Link>
-                <LinkList.Link href="#" onBackground="dark" rel="external" size="small">
-                  Nieuwsbrief
-                </LinkList.Link>
-                <LinkList.Link href="#" onBackground="dark" size="small">
-                  Vacatures
-                </LinkList.Link>
-              </LinkList>
-            </div>
+            <Heading className="ams-mb--xs" level={2} size="level-4" inverseColor>
+              Onderzoek en Statistiek
+            </Heading>
+            <LinkList>
+              <LinkList.Link href="#" onBackground="dark" size="small">
+                Over Onderzoek en Statistiek
+              </LinkList.Link>
+              <LinkList.Link href="#" onBackground="dark" size="small">
+                Veelgestelde vragen
+              </LinkList.Link>
+              <LinkList.Link href="#" onBackground="dark" rel="external" size="small">
+                Nieuwsbrief
+              </LinkList.Link>
+              <LinkList.Link href="#" onBackground="dark" size="small">
+                Vacatures
+              </LinkList.Link>
+            </LinkList>
           </Grid.Cell>
         </Grid>
       </Footer.Top>,
@@ -100,10 +191,7 @@ export const Default: Story = {
         </VisuallyHidden>
         <Grid paddingVertical="small">
           <Grid.Cell span="all">
-            <PageMenu>
-              <PageMenu.Link href="#">Privacy</PageMenu.Link>
-              <PageMenu.Link href="#">Toegankelijkheid</PageMenu.Link>
-            </PageMenu>
+            <PageMenu>{PageMenuStory.args?.children}</PageMenu>
           </Grid.Cell>
         </Grid>
       </Footer.Bottom>,

diff --git a/storybook/src/components/Image/Image.docs.mdx b/storybook/src/components/Image/Image.docs.mdx
@@ -18,6 +18,7 @@ import README from "../../../../packages/css/src/components/image/README.md?raw"
 
 Use the srcSet prop, which controls the corresponding HTML attribute (see [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#srcset)), to let the browser select the optimal source file for the image.
 A mobile device can often download a smaller file, saving the user’s bandwidth and time.
+Don’t forget to still include the required `src` attribute.
 
 <Canvas of={ImageStories.MultipleSources} />
 

diff --git a/storybook/src/components/Image/Image.stories.tsx b/storybook/src/components/Image/Image.stories.tsx
@@ -36,6 +36,7 @@ export const Default: Story = {
 export const MultipleSources: Story = {
   args: {
     alt: '',
+    src: 'https://picsum.photos/1280/720',
     srcSet: 'https://picsum.photos/640/360 640w, https://picsum.photos/1280/720 1280w',
     sizes: '(max-width: 36rem) 640px, 50vw',
   },