Merge branch 'develop' into fix/accordion-button-text-align

packages/css/src/components/field-set/field-set.scss

@@ -28,6 +28,10 @@
   float: inline-start; // [1]
   inline-size: 100%; // [1]
   padding-inline: 0;
+
+  + * {
+    clear: both; // Reset the applied float for the legend’s first sibling
+  }
 }
 
 // [1] This combination allows the fieldset border to go around the legend, instead of through it.

packages/css/src/components/text-input/README.md

@@ -9,8 +9,8 @@ A form field in which a user can enter text.
 - Use a Text Input when users need to enter a single line of text, such as their name or phone number.
 - Do not use a Text Input when users could provide more than 1 sentence of text.
 - The width of the Text Input should be appropriate for the information to be entered.
-- A Text Input must have a label, and in most cases, this label should be visible.
+- A Text Input must have a Label, and in most cases, this label should be visible.
 - Use `spellcheck="false"` for fields that may contain sensitive information, such as passwords and personal data.
   Some browser extensions for spell-checking send this information to external servers.
 - Apply automatic assistance where possible.
-  For example, in logged-in systems, pre-filling input can prevent errors and save time.
+  For example, in logged-in systems, pre-filling known values can prevent errors and save time.

packages/react/src/DateInput/DateInput.test.tsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react'
 import { createRef } from 'react'
-import { DateInput } from './DateInput'
+import { DateInput, dateInputTypes } from './DateInput'
 import '@testing-library/jest-dom'
 
 describe('Date input', () => {
@@ -65,4 +65,16 @@ describe('Date input', () => {
       expect(component).not.toHaveAttribute('aria-invalid')
     })
   })
+
+  describe('Type', () => {
+    dateInputTypes.map((type) =>
+      it(`sets the ‘${type}’ type`, () => {
+        const { container } = render(<DateInput type={type} />)
+
+        const component = container.querySelector(':only-child')
+
+        expect(component).toHaveAttribute('type', type)
+      }),
+    )
+  })
 })

packages/react/src/DateInput/DateInput.tsx

@@ -7,11 +7,15 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, InputHTMLAttributes } from 'react'
 
+export const dateInputTypes = ['date', 'datetime-local'] as const
+
+type DateInputType = (typeof dateInputTypes)[number]
+
 export type DateInputProps = {
   /** Whether the value fails a validation rule. */
   invalid?: boolean
   /** The kind of data that the user should provide. */
-  type?: 'date' | 'datetime-local'
+  type?: DateInputType
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>
 
 export const DateInput = forwardRef(

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')

packages/react/src/TextInput/TextInput.test.tsx

@@ -1,7 +1,8 @@
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { createRef, useState } from 'react'
-import { TextInput } from './TextInput'
+import { TextInput, textInputTypes } from './TextInput'
+import { Label } from '../Label'
 import '@testing-library/jest-dom'
 
 describe('Text input', () => {
@@ -116,4 +117,32 @@ describe('Text input', () => {
       expect(component).not.toHaveAttribute('aria-invalid')
     })
   })
+
+  describe('Type', () => {
+    textInputTypes
+      .filter((type) => type !== 'password')
+      .map((type) =>
+        it(`sets the ‘${type}’ type`, () => {
+          render(<TextInput type={type} />)
+
+          const component = screen.getByRole('textbox')
+
+          expect(component).toHaveAttribute('type', type)
+        }),
+      )
+
+    // https://github.com/testing-library/dom-testing-library/issues/567
+    it('sets the ‘password’ type', () => {
+      render(
+        <>
+          <Label htmlFor="password-field">Password</Label>
+          <TextInput id="password-field" type="password" />
+        </>,
+      )
+
+      const component = screen.getByLabelText(/password/i)
+
+      expect(component).toHaveAttribute('type', 'password')
+    })
+  })
 })

packages/react/src/TextInput/TextInput.tsx

@@ -7,20 +7,26 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, InputHTMLAttributes } from 'react'
 
+export const textInputTypes = ['email', 'password', 'tel', 'text', 'url'] as const
+
+type TextInputType = (typeof textInputTypes)[number]
+
 export type TextInputProps = {
   /** Whether the value fails a validation rule. */
   invalid?: boolean
+  /** The kind of data that the user should provide. */
+  type?: TextInputType
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid'>
 
 export const TextInput = forwardRef(
-  ({ className, dir, invalid, ...restProps }: TextInputProps, ref: ForwardedRef<HTMLInputElement>) => (
+  ({ className, dir, invalid, type = 'text', ...restProps }: TextInputProps, ref: ForwardedRef<HTMLInputElement>) => (
     <input
       {...restProps}
       aria-invalid={invalid || undefined}
       className={clsx('ams-text-input', className)}
       dir={dir ?? 'auto'}
       ref={ref}
-      type="text"
+      type={type}
     />
   ),
 )

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();
     }
   };

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']],
       ],
     },
   },

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 */

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>,
     ],
   },

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}

storybook/src/components/FieldSet/FieldSet.stories.tsx

@@ -38,7 +38,7 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
   render: (args) => (
     <FieldSet invalid={args.invalid} legend={args.legend}>
-      <Column gap="extra-small" style={{ width: '100%' }}>
+      <Column gap="extra-small">
         <Label htmlFor="input1">Voornaam</Label>
         <TextInput id="input1" invalid={args.invalid} aria-required="true" />
         <Label htmlFor="input2">Achternaam</Label>
@@ -161,7 +161,7 @@ export const CheckboxGroup: Story = {
   },
   render: (args) => (
     <FieldSet legend={args.legend} invalid={args.invalid}>
-      <Column gap="extra-small" style={{ width: '100%' }}>
+      <Column gap="extra-small">
         <Checkbox name="about" value="horeca" invalid={args.invalid} aria-required="true">
           Horecabedrijf
         </Checkbox>
@@ -187,7 +187,7 @@ export const CheckboxGroup: Story = {
 //   render: (args) => (
 //     <FieldSet legend={args.legend} invalid={args.invalid}>
 //       {args.invalid && <ErrorMessage className="ams-mb--sm">Geef aan waar uw melding over gaat.</ErrorMessage>}
-//       <Column gap="extra-small" style={{ width: '100%' }}>
+//       <Column gap="extra-small">
 //         <Checkbox name="about" value="horeca" invalid={args.invalid} aria-required="true">
 //           Horecabedrijf
 //         </Checkbox>

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} />