From 72f08d66f34e87c8afc421aca2c2feaeee33b0be Mon Sep 17 00:00:00 2001
From: Niels Roozemond <n.roozemond@amsterdam.nl>
Date: Wed, 5 Jun 2024 09:53:36 +0200
Subject: [PATCH 01/13] Rename Dialog title prop

---
 packages/react/src/Dialog/Dialog.test.tsx     | 24 +++++++++----------
 packages/react/src/Dialog/Dialog.tsx          |  5 ++--
 .../src/components/Dialog/Dialog.stories.tsx  |  6 ++---
 3 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/packages/react/src/Dialog/Dialog.test.tsx b/packages/react/src/Dialog/Dialog.test.tsx
index 1dcfb2ad0c..724081990f 100644
--- a/packages/react/src/Dialog/Dialog.test.tsx
+++ b/packages/react/src/Dialog/Dialog.test.tsx
@@ -5,7 +5,7 @@ import '@testing-library/jest-dom'
 
 describe('Dialog', () => {
   it('renders', () => {
-    render(<Dialog open />)
+    render(<Dialog heading="Dialog Title" open />)
 
     const component = screen.getByRole('dialog')
 
@@ -14,7 +14,7 @@ describe('Dialog', () => {
   })
 
   it('renders a design system BEM class name', () => {
-    render(<Dialog />)
+    render(<Dialog heading="Dialog Title" />)
 
     const component = screen.getByRole('dialog', { hidden: true })
 
@@ -22,7 +22,7 @@ describe('Dialog', () => {
   })
 
   it('renders an additional class name', () => {
-    render(<Dialog className="extra" />)
+    render(<Dialog heading="Dialog Title" className="extra" />)
 
     const component = screen.getByRole('dialog', { hidden: true })
 
@@ -34,7 +34,7 @@ describe('Dialog', () => {
   it('supports ForwardRef in React', () => {
     const ref = createRef<HTMLDialogElement>()
 
-    render(<Dialog ref={ref} />)
+    render(<Dialog heading="Dialog Title" ref={ref} />)
 
     const component = screen.getByRole('dialog', { hidden: true })
 
@@ -42,7 +42,7 @@ describe('Dialog', () => {
   })
 
   it('is not visible when open attribute is not used', () => {
-    render(<Dialog />)
+    render(<Dialog heading="Dialog Title" />)
 
     const component = screen.getByRole('dialog', { hidden: true })
 
@@ -50,32 +50,32 @@ describe('Dialog', () => {
     expect(component).not.toBeVisible()
   })
 
-  it('renders a title', () => {
-    const { getByText } = render(<Dialog title="Dialog Title" />)
+  it('renders a heading', () => {
+    const { getByText } = render(<Dialog heading="Dialog Title" />)
 
     expect(getByText('Dialog Title')).toBeInTheDocument()
   })
 
   it('renders children', () => {
-    const { getByText } = render(<Dialog>Dialog Content</Dialog>)
+    const { getByText } = render(<Dialog heading="Dialog Title">Dialog Content</Dialog>)
 
     expect(getByText('Dialog Content')).toBeInTheDocument()
   })
 
   it('renders actions when provided', () => {
-    const { getByText } = render(<Dialog actions={<button>Click Me</button>} />)
+    const { getByText } = render(<Dialog heading="Dialog Title" actions={<button>Click Me</button>} />)
 
     expect(getByText('Click Me')).toBeInTheDocument()
   })
 
   it('does not render actions when not provided', () => {
-    const { queryByText } = render(<Dialog />)
+    const { queryByText } = render(<Dialog heading="Dialog Title" />)
 
     expect(queryByText('Click Me')).not.toBeInTheDocument()
   })
 
   it('renders DialogClose button', () => {
-    render(<Dialog open />)
+    render(<Dialog heading="Dialog Title" open />)
 
     const closeButton = screen.getByRole('button', { name: 'Sluiten' })
 
@@ -83,7 +83,7 @@ describe('Dialog', () => {
   })
 
   it('renders a custom close label', () => {
-    render(<Dialog open closeButtonLabel="Close" />)
+    render(<Dialog heading="Dialog Title" open closeButtonLabel="Close" />)
 
     const closeButton = screen.getByRole('button', { name: 'Close' })
 
diff --git a/packages/react/src/Dialog/Dialog.tsx b/packages/react/src/Dialog/Dialog.tsx
index 684fc2cee9..f76b4a0a32 100644
--- a/packages/react/src/Dialog/Dialog.tsx
+++ b/packages/react/src/Dialog/Dialog.tsx
@@ -10,6 +10,7 @@ import { Heading } from '../Heading'
 import { IconButton } from '../IconButton'
 
 export type DialogProps = {
+  heading: string
   /** The button(s) in the footer. Start with a primary button. */
   actions?: ReactNode
   /** The label for the button that dismisses the Dialog. */
@@ -18,13 +19,13 @@ export type DialogProps = {
 
 export const Dialog = forwardRef(
   (
-    { actions, children, className, closeButtonLabel = 'Sluiten', title, ...restProps }: DialogProps,
+    { heading, actions, children, className, closeButtonLabel = 'Sluiten', ...restProps }: DialogProps,
     ref: ForwardedRef<HTMLDialogElement>,
   ) => (
     <dialog {...restProps} ref={ref} className={clsx('ams-dialog', className)}>
       <form method="dialog" className="ams-dialog__form">
         <header className="ams-dialog__header">
-          <Heading size="level-4">{title}</Heading>
+          <Heading size="level-4">{heading}</Heading>
           <IconButton formNoValidate label={closeButtonLabel} size="level-4" />
         </header>
         <article className="ams-dialog__article">{children}</article>
diff --git a/storybook/src/components/Dialog/Dialog.stories.tsx b/storybook/src/components/Dialog/Dialog.stories.tsx
index f1440f19ed..3094673f54 100644
--- a/storybook/src/components/Dialog/Dialog.stories.tsx
+++ b/storybook/src/components/Dialog/Dialog.stories.tsx
@@ -29,7 +29,7 @@ const meta = {
         opgeslagen zijn.
       </Paragraph>
     ),
-    title: 'Niet alle gegevens zijn opgeslagen',
+    heading: 'Niet alle gegevens zijn opgeslagen',
   },
   argTypes: {
     actions: {
@@ -50,7 +50,7 @@ export const Default: Story = {
     open: {
       description: 'Whether the dialog box is active and available for interaction.',
     },
-    title: {
+    heading: {
       description: 'The text for the heading.',
     },
   },
@@ -103,7 +103,7 @@ export const WithScrollbar: Story = {
       </Paragraph>,
     ],
     open: true,
-    title: 'Privacyverklaring gemeente Amsterdam',
+    heading: 'Privacyverklaring gemeente Amsterdam',
   },
   decorators: [
     (Story) => (

From db6823e44a9ca7b91adc7a18432a8e312de1788e Mon Sep 17 00:00:00 2001
From: Niels Roozemond <n.roozemond@amsterdam.nl>
Date: Wed, 5 Jun 2024 09:57:19 +0200
Subject: [PATCH 02/13] Rename Alert title prop

---
 packages/css/src/components/alert/README.md      |  2 +-
 packages/react/src/Alert/Alert.test.tsx          |  6 ++++++
 packages/react/src/Alert/Alert.tsx               | 12 ++++++------
 storybook/src/components/Alert/Alert.stories.tsx | 12 ++++++------
 4 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/packages/css/src/components/alert/README.md b/packages/css/src/components/alert/README.md
index d7a2c87f09..2675b5fe5b 100644
--- a/packages/css/src/components/alert/README.md
+++ b/packages/css/src/components/alert/README.md
@@ -21,4 +21,4 @@ There are four types of notifications:
   The grid’s white space is a good reference – place the Alert in its own cell.
 - By default, the Alert cannot be closed.
   This functionality can be added optionally.
-- Optionally, the title can be omitted.
+- Optionally, the heading can be omitted.
diff --git a/packages/react/src/Alert/Alert.test.tsx b/packages/react/src/Alert/Alert.test.tsx
index 28dde6ea6d..204e4c303f 100644
--- a/packages/react/src/Alert/Alert.test.tsx
+++ b/packages/react/src/Alert/Alert.test.tsx
@@ -42,6 +42,12 @@ describe('Alert', () => {
     expect(ref.current).toBe(component)
   })
 
+  it('renders a heading', () => {
+    const { getByText } = render(<Alert heading="Alert Title" />)
+
+    expect(getByText('Alert Title')).toBeInTheDocument()
+  })
+
   it('renders the close button', () => {
     const { container } = render(<Alert closeable={true} />)
 
diff --git a/packages/react/src/Alert/Alert.tsx b/packages/react/src/Alert/Alert.tsx
index 51eaaa066a..c4077ffaea 100644
--- a/packages/react/src/Alert/Alert.tsx
+++ b/packages/react/src/Alert/Alert.tsx
@@ -24,7 +24,7 @@ export type AlertProps = {
   /** The significance of the message conveyed. */
   severity?: 'error' | 'info' | 'success' | 'warning'
   /** The text for the Heading. */
-  title?: string
+  heading?: string
 } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>
 
 const iconSvgBySeverity = {
@@ -44,13 +44,13 @@ export const Alert = forwardRef(
       headingLevel = 2,
       onClose,
       severity = 'warning',
-      title,
+      heading,
       ...restProps
     }: AlertProps,
     ref: ForwardedRef<HTMLDivElement>,
   ) => {
-    const alertSize = title ? 'level-4' : 'level-5'
-    const Tag = title ? 'section' : 'div'
+    const alertSize = heading ? 'level-4' : 'level-5'
+    const Tag = heading ? 'section' : 'div'
 
     return (
       <Tag {...restProps} ref={ref} className={clsx('ams-alert', severity && `ams-alert--${severity}`, className)}>
@@ -58,9 +58,9 @@ export const Alert = forwardRef(
           <Icon size={alertSize} svg={iconSvgBySeverity[severity]} />
         </div>
         <div className="ams-alert__content">
-          {title && (
+          {heading && (
             <Heading level={headingLevel} size="level-4">
-              {title}
+              {heading}
             </Heading>
           )}
           {children}
diff --git a/storybook/src/components/Alert/Alert.stories.tsx b/storybook/src/components/Alert/Alert.stories.tsx
index 356f4620b7..3eaab6a61e 100644
--- a/storybook/src/components/Alert/Alert.stories.tsx
+++ b/storybook/src/components/Alert/Alert.stories.tsx
@@ -10,7 +10,7 @@ const meta = {
   title: 'Components/Feedback/Alert',
   component: Alert,
   args: {
-    title: 'Let op',
+    heading: 'Let op',
     closeable: false,
   },
 } satisfies Meta<typeof Alert>
@@ -33,7 +33,7 @@ export const Default: Story = {
 export const Warning: Story = {
   args: {
     children: <Paragraph>U bent vergeten verplichte velden in te vullen.</Paragraph>,
-    title: 'Vul de gegevens aan',
+    heading: 'Vul de gegevens aan',
   },
 }
 
@@ -46,7 +46,7 @@ export const Error: Story = {
       </Paragraph>
     ),
     severity: 'error',
-    title: 'Niet gelukt',
+    heading: 'Niet gelukt',
   },
 }
 
@@ -55,7 +55,7 @@ export const Success: Story = {
     children: <Paragraph>Het formulier is verzonden. We hebben uw gegevens goed ontvangen.</Paragraph>,
     closeable: true,
     severity: 'success',
-    title: 'Gelukt',
+    heading: 'Gelukt',
   },
 }
 
@@ -74,7 +74,7 @@ export const Info: Story = {
 
 export const WithList: Story = {
   args: {
-    title: 'Vul de gegevens aan',
+    heading: 'Vul de gegevens aan',
     children: [
       <Paragraph key={1}>U bent vergeten de volgende verplichte velden in te vullen:</Paragraph>,
       <UnorderedList key={2}>
@@ -107,6 +107,6 @@ export const WithoutTitle: Story = {
         De geschatte wachttijd in de adreszoeker klopt momenteel niet altijd. We werken aan een oplossing.
       </Paragraph>
     ),
-    title: undefined,
+    heading: undefined,
   },
 }

From 6e86af8c117cee786afd1896e35db79d19c1085b Mon Sep 17 00:00:00 2001
From: Niels Roozemond <n.roozemond@amsterdam.nl>
Date: Wed, 5 Jun 2024 10:05:13 +0200
Subject: [PATCH 03/13] Rename Header title prop and various docs renames

---
 packages/css/src/components/header/header.scss     |  4 ++--
 packages/react/src/Header/Header.test.tsx          | 11 +++++++++++
 packages/react/src/Header/Header.tsx               | 12 ++++++------
 storybook/src/components/Alert/Alert.docs.mdx      |  4 ++--
 storybook/src/components/Alert/Alert.stories.tsx   |  2 +-
 storybook/src/components/Header/Header.docs.mdx    | 14 +++++++-------
 storybook/src/components/Header/Header.stories.tsx | 12 ++++++------
 7 files changed, 35 insertions(+), 24 deletions(-)

diff --git a/packages/css/src/components/header/header.scss b/packages/css/src/components/header/header.scss
index 02743d4a7a..518b5d1058 100644
--- a/packages/css/src/components/header/header.scss
+++ b/packages/css/src/components/header/header.scss
@@ -47,14 +47,14 @@
   }
 }
 
-.ams-header__title {
+.ams-header__site-name {
   flex: 1 1 100%;
 
   @media screen and (min-width: $ams-breakpoint-wide) {
     min-inline-size: 0;
     order: 2;
 
-    .ams-header__title-heading {
+    .ams-header__site-name-heading {
       display: block;
       inline-size: 100%;
       line-height: 1;
diff --git a/packages/react/src/Header/Header.test.tsx b/packages/react/src/Header/Header.test.tsx
index c2e40c5f68..7f12b2b900 100644
--- a/packages/react/src/Header/Header.test.tsx
+++ b/packages/react/src/Header/Header.test.tsx
@@ -56,6 +56,17 @@ describe('Header', () => {
     expect(logoLinkTitle).toHaveTextContent('Go to homepage')
   })
 
+  it('renders a site name', () => {
+    render(<Header siteName="Site Name" />)
+
+    const heading = screen.getByRole('heading', {
+      name: 'Site Name',
+      level: 1,
+    })
+
+    expect(heading).toBeInTheDocument()
+  })
+
   it('renders with links', () => {
     const { container } = render(<Header links={<div>Menu Content</div>} />)
 
diff --git a/packages/react/src/Header/Header.tsx b/packages/react/src/Header/Header.tsx
index 71319261cb..d6c88fdc50 100644
--- a/packages/react/src/Header/Header.tsx
+++ b/packages/react/src/Header/Header.tsx
@@ -19,7 +19,7 @@ export type HeaderProps = {
   /** The accessible text for the link on the logo. */
   logoLinkTitle?: string
   /** The name of the application. */
-  title?: string
+  siteName?: string
   /** The list of menu links. Use a Page Menu here. */
   links?: ReactNode
   /** A button to toggle the visibility of a Mega Menu. */
@@ -33,7 +33,7 @@ export const Header = forwardRef(
       logoBrand = 'amsterdam',
       logoLink = '/',
       logoLinkTitle = 'Ga naar de homepage',
-      title,
+      siteName,
       links,
       menu,
       ...restProps
@@ -49,10 +49,10 @@ export const Header = forwardRef(
           </a>
           {links && <div className="ams-header__links">{links}</div>}
           {menu && <div className="ams-header__menu">{menu}</div>}
-          {title && (
-            <div className="ams-header__title">
-              <Heading level={1} size="level-3" className="ams-header__title-heading">
-                {title}
+          {siteName && (
+            <div className="ams-header__site-name">
+              <Heading level={1} size="level-3" className="ams-header__site-name-heading">
+                {siteName}
               </Heading>
             </div>
           )}
diff --git a/storybook/src/components/Alert/Alert.docs.mdx b/storybook/src/components/Alert/Alert.docs.mdx
index de9159318e..c4005d91af 100644
--- a/storybook/src/components/Alert/Alert.docs.mdx
+++ b/storybook/src/components/Alert/Alert.docs.mdx
@@ -51,9 +51,9 @@ For clarification, formatted text can be included in the alert.
 
 <Canvas of={AlertStories.WithList} />
 
-### Without Title
+### Without Heading
 
 Sometimes, a title is unnecessary.
 The icon automatically becomes slightly smaller.
 
-<Canvas of={AlertStories.WithoutTitle} />
+<Canvas of={AlertStories.WithoutHeading} />
diff --git a/storybook/src/components/Alert/Alert.stories.tsx b/storybook/src/components/Alert/Alert.stories.tsx
index 3eaab6a61e..d9f09626ec 100644
--- a/storybook/src/components/Alert/Alert.stories.tsx
+++ b/storybook/src/components/Alert/Alert.stories.tsx
@@ -100,7 +100,7 @@ export const WithInlineLink: Story = {
   },
 }
 
-export const WithoutTitle: Story = {
+export const WithoutHeading: Story = {
   args: {
     children: (
       <Paragraph>
diff --git a/storybook/src/components/Header/Header.docs.mdx b/storybook/src/components/Header/Header.docs.mdx
index 0f73bfc46f..a00e918c7e 100644
--- a/storybook/src/components/Header/Header.docs.mdx
+++ b/storybook/src/components/Header/Header.docs.mdx
@@ -17,9 +17,9 @@ import { StatusBadge } from "../../docs/components/StatusBadge";
 
 <Canvas of={HeaderStories.WithLogoVariant} />
 
-## With subsite title
+## With site name
 
-<Canvas of={HeaderStories.WithTitle} />
+<Canvas of={HeaderStories.WithSiteName} />
 
 ## With menu
 
@@ -32,14 +32,14 @@ A Page Menu in the Header should not wrap.
 
 <Canvas of={HeaderStories.WithLinks} />
 
-## With links and menu
+## With site name and menu
 
 <Canvas of={HeaderStories.WithLinksAndMenu} />
 
-## With a title and menu
+## With site name and menu
 
-<Canvas of={HeaderStories.WithTitleAndMenu} />
+<Canvas of={HeaderStories.WithSiteNameAndMenu} />
 
-## With a title, links and menu
+## With site name, links and menu
 
-<Canvas of={HeaderStories.WithTitleLinksAndMenu} />
+<Canvas of={HeaderStories.WithSiteNameLinksAndMenu} />
diff --git a/storybook/src/components/Header/Header.stories.tsx b/storybook/src/components/Header/Header.stories.tsx
index e0aea6a44b..87b851bbe0 100644
--- a/storybook/src/components/Header/Header.stories.tsx
+++ b/storybook/src/components/Header/Header.stories.tsx
@@ -26,9 +26,9 @@ export const WithLogoVariant: Story = {
   },
 }
 
-export const WithTitle: Story = {
+export const WithSiteName: Story = {
   args: {
-    title: 'Aan de Amsterdamse grachten',
+    siteName: 'Aan de Amsterdamse grachten',
   },
 }
 
@@ -67,16 +67,16 @@ export const WithLinksAndMenu: Story = {
   },
 }
 
-export const WithTitleAndMenu: Story = {
+export const WithSiteNameAndMenu: Story = {
   args: {
-    title: 'Aan de Amsterdamse grachten',
+    siteName: 'Aan de Amsterdamse grachten',
     menu: <button className="ams-header__menu-button">Menu</button>,
   },
 }
 
-export const WithTitleLinksAndMenu: Story = {
+export const WithSiteNameLinksAndMenu: Story = {
   args: {
-    title: 'Aan de Amsterdamse grachten',
+    siteName: 'Aan de Amsterdamse grachten',
     links: (
       <PageMenu alignEnd wrap={false}>
         <PageMenu.Link href="#">Contact</PageMenu.Link>

From f13d6a4bd0115a781426ec28856bf7574dbfc21b Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Wed, 5 Jun 2024 11:34:32 +0200
Subject: [PATCH 04/13] Generalize siteName to appName

---
 packages/css/src/components/header/README.md       |  2 +-
 packages/css/src/components/header/header.scss     |  4 ++--
 packages/react/src/Header/Header.test.tsx          |  4 ++--
 packages/react/src/Header/Header.tsx               | 12 ++++++------
 storybook/src/components/Header/Header.docs.mdx    |  6 +++---
 storybook/src/components/Header/Header.stories.tsx | 12 ++++++------
 6 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/packages/css/src/components/header/README.md b/packages/css/src/components/header/README.md
index c084059cf3..c66c1a97af 100644
--- a/packages/css/src/components/header/README.md
+++ b/packages/css/src/components/header/README.md
@@ -2,7 +2,7 @@
 
 # Header
 
-Arranges the City’s logo, the title of the website, and a page menu.
+Arranges the City’s logo, the title for the application, and a page menu.
 
 ## Guidelines
 
diff --git a/packages/css/src/components/header/header.scss b/packages/css/src/components/header/header.scss
index 518b5d1058..895c8e5298 100644
--- a/packages/css/src/components/header/header.scss
+++ b/packages/css/src/components/header/header.scss
@@ -47,14 +47,14 @@
   }
 }
 
-.ams-header__site-name {
+.ams-header__app-name {
   flex: 1 1 100%;
 
   @media screen and (min-width: $ams-breakpoint-wide) {
     min-inline-size: 0;
     order: 2;
 
-    .ams-header__site-name-heading {
+    .ams-header__app-name-heading {
       display: block;
       inline-size: 100%;
       line-height: 1;
diff --git a/packages/react/src/Header/Header.test.tsx b/packages/react/src/Header/Header.test.tsx
index 7f12b2b900..d6d3cfc273 100644
--- a/packages/react/src/Header/Header.test.tsx
+++ b/packages/react/src/Header/Header.test.tsx
@@ -57,10 +57,10 @@ describe('Header', () => {
   })
 
   it('renders a site name', () => {
-    render(<Header siteName="Site Name" />)
+    render(<Header appName="Application name" />)
 
     const heading = screen.getByRole('heading', {
-      name: 'Site Name',
+      name: 'Application name',
       level: 1,
     })
 
diff --git a/packages/react/src/Header/Header.tsx b/packages/react/src/Header/Header.tsx
index d6c88fdc50..6795d0a43f 100644
--- a/packages/react/src/Header/Header.tsx
+++ b/packages/react/src/Header/Header.tsx
@@ -19,7 +19,7 @@ export type HeaderProps = {
   /** The accessible text for the link on the logo. */
   logoLinkTitle?: string
   /** The name of the application. */
-  siteName?: string
+  appName?: string
   /** The list of menu links. Use a Page Menu here. */
   links?: ReactNode
   /** A button to toggle the visibility of a Mega Menu. */
@@ -33,7 +33,7 @@ export const Header = forwardRef(
       logoBrand = 'amsterdam',
       logoLink = '/',
       logoLinkTitle = 'Ga naar de homepage',
-      siteName,
+      appName,
       links,
       menu,
       ...restProps
@@ -49,10 +49,10 @@ export const Header = forwardRef(
           </a>
           {links && <div className="ams-header__links">{links}</div>}
           {menu && <div className="ams-header__menu">{menu}</div>}
-          {siteName && (
-            <div className="ams-header__site-name">
-              <Heading level={1} size="level-3" className="ams-header__site-name-heading">
-                {siteName}
+          {appName && (
+            <div className="ams-header__app-name">
+              <Heading level={1} size="level-3" className="ams-header__app-name-heading">
+                {appName}
               </Heading>
             </div>
           )}
diff --git a/storybook/src/components/Header/Header.docs.mdx b/storybook/src/components/Header/Header.docs.mdx
index a00e918c7e..771cbd3fc2 100644
--- a/storybook/src/components/Header/Header.docs.mdx
+++ b/storybook/src/components/Header/Header.docs.mdx
@@ -19,7 +19,7 @@ import { StatusBadge } from "../../docs/components/StatusBadge";
 
 ## With site name
 
-<Canvas of={HeaderStories.WithSiteName} />
+<Canvas of={HeaderStories.WithAppName} />
 
 ## With menu
 
@@ -38,8 +38,8 @@ A Page Menu in the Header should not wrap.
 
 ## With site name and menu
 
-<Canvas of={HeaderStories.WithSiteNameAndMenu} />
+<Canvas of={HeaderStories.WithAppNameAndMenu} />
 
 ## With site name, links and menu
 
-<Canvas of={HeaderStories.WithSiteNameLinksAndMenu} />
+<Canvas of={HeaderStories.WithAppNameLinksAndMenu} />
diff --git a/storybook/src/components/Header/Header.stories.tsx b/storybook/src/components/Header/Header.stories.tsx
index 87b851bbe0..29b4d1595f 100644
--- a/storybook/src/components/Header/Header.stories.tsx
+++ b/storybook/src/components/Header/Header.stories.tsx
@@ -26,9 +26,9 @@ export const WithLogoVariant: Story = {
   },
 }
 
-export const WithSiteName: Story = {
+export const WithAppName: Story = {
   args: {
-    siteName: 'Aan de Amsterdamse grachten',
+    appName: 'Aan de Amsterdamse grachten',
   },
 }
 
@@ -67,16 +67,16 @@ export const WithLinksAndMenu: Story = {
   },
 }
 
-export const WithSiteNameAndMenu: Story = {
+export const WithAppNameAndMenu: Story = {
   args: {
-    siteName: 'Aan de Amsterdamse grachten',
+    appName: 'Aan de Amsterdamse grachten',
     menu: <button className="ams-header__menu-button">Menu</button>,
   },
 }
 
-export const WithSiteNameLinksAndMenu: Story = {
+export const WithAppNameLinksAndMenu: Story = {
   args: {
-    siteName: 'Aan de Amsterdamse grachten',
+    appName: 'Aan de Amsterdamse grachten',
     links: (
       <PageMenu alignEnd wrap={false}>
         <PageMenu.Link href="#">Contact</PageMenu.Link>

From fe3535d9399c84989e7e5a70c4d4c47c662e3781 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Wed, 5 Jun 2024 11:39:31 +0200
Subject: [PATCH 05/13] Sort and document props

---
 packages/react/src/Alert/Alert.tsx   |  6 +++---
 packages/react/src/Dialog/Dialog.tsx |  5 +++--
 packages/react/src/Header/Header.tsx | 12 ++++++------
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/react/src/Alert/Alert.tsx b/packages/react/src/Alert/Alert.tsx
index c4077ffaea..5e87bb4b3e 100644
--- a/packages/react/src/Alert/Alert.tsx
+++ b/packages/react/src/Alert/Alert.tsx
@@ -17,14 +17,14 @@ export type AlertProps = {
   closeable?: boolean
   /** The label for the button that dismisses the Alert. */
   closeButtonLabel?: string
+  /** The text for the Heading. */
+  heading?: string
   /** The hierarchical level of the Alert’s heading within the document. */
   headingLevel?: HeadingProps['level']
   /** A function to run when dismissing. */
   onClose?: () => void
   /** The significance of the message conveyed. */
   severity?: 'error' | 'info' | 'success' | 'warning'
-  /** The text for the Heading. */
-  heading?: string
 } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>
 
 const iconSvgBySeverity = {
@@ -41,10 +41,10 @@ export const Alert = forwardRef(
       className,
       closeable,
       closeButtonLabel = 'Sluiten',
+      heading,
       headingLevel = 2,
       onClose,
       severity = 'warning',
-      heading,
       ...restProps
     }: AlertProps,
     ref: ForwardedRef<HTMLDivElement>,
diff --git a/packages/react/src/Dialog/Dialog.tsx b/packages/react/src/Dialog/Dialog.tsx
index f76b4a0a32..6cebcf0f55 100644
--- a/packages/react/src/Dialog/Dialog.tsx
+++ b/packages/react/src/Dialog/Dialog.tsx
@@ -10,16 +10,17 @@ import { Heading } from '../Heading'
 import { IconButton } from '../IconButton'
 
 export type DialogProps = {
-  heading: string
   /** The button(s) in the footer. Start with a primary button. */
   actions?: ReactNode
   /** The label for the button that dismisses the Dialog. */
   closeButtonLabel?: string
+  /** The text for the Heading. */
+  heading: string
 } & PropsWithChildren<DialogHTMLAttributes<HTMLDialogElement>>
 
 export const Dialog = forwardRef(
   (
-    { heading, actions, children, className, closeButtonLabel = 'Sluiten', ...restProps }: DialogProps,
+    { actions, children, className, closeButtonLabel = 'Sluiten', heading, ...restProps }: DialogProps,
     ref: ForwardedRef<HTMLDialogElement>,
   ) => (
     <dialog {...restProps} ref={ref} className={clsx('ams-dialog', className)}>
diff --git a/packages/react/src/Header/Header.tsx b/packages/react/src/Header/Header.tsx
index 6795d0a43f..f5ac29d449 100644
--- a/packages/react/src/Header/Header.tsx
+++ b/packages/react/src/Header/Header.tsx
@@ -12,16 +12,16 @@ import type { LogoBrand } from '../Logo'
 import { VisuallyHidden } from '../VisuallyHidden'
 
 export type HeaderProps = {
+  /** The name of the application. */
+  appName?: string
+  /** The list of menu links. Use a Page Menu here. */
+  links?: ReactNode
   /** The name of the brand for which to display the logo. */
   logoBrand?: LogoBrand
   /** The url for the link on the logo. */
   logoLink?: string
   /** The accessible text for the link on the logo. */
   logoLinkTitle?: string
-  /** The name of the application. */
-  appName?: string
-  /** The list of menu links. Use a Page Menu here. */
-  links?: ReactNode
   /** A button to toggle the visibility of a Mega Menu. */
   menu?: ReactNode
 } & HTMLAttributes<HTMLElement>
@@ -29,12 +29,12 @@ export type HeaderProps = {
 export const Header = forwardRef(
   (
     {
+      appName,
       className,
+      links,
       logoBrand = 'amsterdam',
       logoLink = '/',
       logoLinkTitle = 'Ga naar de homepage',
-      appName,
-      links,
       menu,
       ...restProps
     }: HeaderProps,

From 18ee5743d22b14d30a4a1cb63e1dbb08699a6302 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Wed, 5 Jun 2024 12:00:02 +0200
Subject: [PATCH 06/13] =?UTF-8?q?Rename=20remaining=20occurrences=20of=20?=
 =?UTF-8?q?=E2=80=98site=20name=E2=80=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/react/src/Header/Header.test.tsx       | 2 +-
 storybook/src/components/Header/Header.docs.mdx | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/Header/Header.test.tsx b/packages/react/src/Header/Header.test.tsx
index d6d3cfc273..e709ae0164 100644
--- a/packages/react/src/Header/Header.test.tsx
+++ b/packages/react/src/Header/Header.test.tsx
@@ -56,7 +56,7 @@ describe('Header', () => {
     expect(logoLinkTitle).toHaveTextContent('Go to homepage')
   })
 
-  it('renders a site name', () => {
+  it('renders an application name', () => {
     render(<Header appName="Application name" />)
 
     const heading = screen.getByRole('heading', {
diff --git a/storybook/src/components/Header/Header.docs.mdx b/storybook/src/components/Header/Header.docs.mdx
index 771cbd3fc2..6ee030a9e2 100644
--- a/storybook/src/components/Header/Header.docs.mdx
+++ b/storybook/src/components/Header/Header.docs.mdx
@@ -17,7 +17,7 @@ import { StatusBadge } from "../../docs/components/StatusBadge";
 
 <Canvas of={HeaderStories.WithLogoVariant} />
 
-## With site name
+## With app name
 
 <Canvas of={HeaderStories.WithAppName} />
 
@@ -32,14 +32,14 @@ A Page Menu in the Header should not wrap.
 
 <Canvas of={HeaderStories.WithLinks} />
 
-## With site name and menu
+## With app name and menu
 
 <Canvas of={HeaderStories.WithLinksAndMenu} />
 
-## With site name and menu
+## With app name and menu
 
 <Canvas of={HeaderStories.WithAppNameAndMenu} />
 
-## With site name, links and menu
+## With app name, links and menu
 
 <Canvas of={HeaderStories.WithAppNameLinksAndMenu} />

From ffc3dc9799d9dd4d3832e3621d22b042318fda29 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Wed, 5 Jun 2024 12:03:40 +0200
Subject: [PATCH 07/13] Sort args in affected stories

---
 .../src/components/Alert/Alert.stories.tsx     |  6 +++---
 .../src/components/Dialog/Dialog.stories.tsx   | 18 +++++++++++-------
 .../src/components/Header/Header.stories.tsx   |  2 +-
 3 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/storybook/src/components/Alert/Alert.stories.tsx b/storybook/src/components/Alert/Alert.stories.tsx
index d9f09626ec..80fc52bb38 100644
--- a/storybook/src/components/Alert/Alert.stories.tsx
+++ b/storybook/src/components/Alert/Alert.stories.tsx
@@ -45,8 +45,8 @@ export const Error: Story = {
         Probeer het over een paar minuten opnieuw.
       </Paragraph>
     ),
-    severity: 'error',
     heading: 'Niet gelukt',
+    severity: 'error',
   },
 }
 
@@ -54,8 +54,8 @@ export const Success: Story = {
   args: {
     children: <Paragraph>Het formulier is verzonden. We hebben uw gegevens goed ontvangen.</Paragraph>,
     closeable: true,
-    severity: 'success',
     heading: 'Gelukt',
+    severity: 'success',
   },
 }
 
@@ -74,7 +74,6 @@ export const Info: Story = {
 
 export const WithList: Story = {
   args: {
-    heading: 'Vul de gegevens aan',
     children: [
       <Paragraph key={1}>U bent vergeten de volgende verplichte velden in te vullen:</Paragraph>,
       <UnorderedList key={2}>
@@ -82,6 +81,7 @@ export const WithList: Story = {
         <UnorderedList.Item>Telefoonnummer</UnorderedList.Item>
       </UnorderedList>,
     ],
+    heading: 'Vul de gegevens aan',
   },
 }
 
diff --git a/storybook/src/components/Dialog/Dialog.stories.tsx b/storybook/src/components/Dialog/Dialog.stories.tsx
index 3094673f54..459b7753ea 100644
--- a/storybook/src/components/Dialog/Dialog.stories.tsx
+++ b/storybook/src/components/Dialog/Dialog.stories.tsx
@@ -47,12 +47,12 @@ export const Default: Story = {
     open: true,
   },
   argTypes: {
-    open: {
-      description: 'Whether the dialog box is active and available for interaction.',
-    },
     heading: {
       description: 'The text for the heading.',
     },
+    open: {
+      description: 'Whether the dialog box is active and available for interaction.',
+    },
   },
   decorators: [
     (Story) => (
@@ -62,8 +62,10 @@ export const Default: Story = {
     ),
   ],
   parameters: {
+    docs: {
+      story: { height: '32em' },
+    },
     layout: 'fullscreen',
-    docs: { story: { height: '32em' } },
   },
 }
 
@@ -102,8 +104,8 @@ export const WithScrollbar: Story = {
         vinden op de website van Autoriteit Persoonsgegevens.
       </Paragraph>,
     ],
-    open: true,
     heading: 'Privacyverklaring gemeente Amsterdam',
+    open: true,
   },
   decorators: [
     (Story) => (
@@ -113,8 +115,10 @@ export const WithScrollbar: Story = {
     ),
   ],
   parameters: {
+    docs: {
+      story: { height: '100vh' },
+    },
     layout: 'fullscreen',
-    docs: { story: { height: '100vh' } },
   },
 }
 
@@ -154,9 +158,9 @@ export const VerticalButtons: Story = {
     ),
   ],
   parameters: {
-    layout: 'fullscreen',
     docs: {
       story: { height: '32em' },
     },
+    layout: 'fullscreen',
   },
 }
diff --git a/storybook/src/components/Header/Header.stories.tsx b/storybook/src/components/Header/Header.stories.tsx
index 29b4d1595f..fadec57ba5 100644
--- a/storybook/src/components/Header/Header.stories.tsx
+++ b/storybook/src/components/Header/Header.stories.tsx
@@ -54,7 +54,6 @@ export const WithMenu: Story = {
 
 export const WithLinksAndMenu: Story = {
   args: {
-    menu: <button className="ams-header__menu-button">Menu</button>,
     links: (
       <PageMenu alignEnd wrap={false}>
         <PageMenu.Link href="#">Contact</PageMenu.Link>
@@ -64,6 +63,7 @@ export const WithLinksAndMenu: Story = {
         </PageMenu.Link>
       </PageMenu>
     ),
+    menu: <button className="ams-header__menu-button">Menu</button>,
   },
 }
 

From c8c69219e564e0ecf3f592fb1b04a4c296511e86 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Wed, 5 Jun 2024 12:05:00 +0200
Subject: [PATCH 08/13] Sort another arg in affected story

---
 storybook/src/components/Alert/Alert.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/storybook/src/components/Alert/Alert.stories.tsx b/storybook/src/components/Alert/Alert.stories.tsx
index 80fc52bb38..65e30655bb 100644
--- a/storybook/src/components/Alert/Alert.stories.tsx
+++ b/storybook/src/components/Alert/Alert.stories.tsx
@@ -10,8 +10,8 @@ const meta = {
   title: 'Components/Feedback/Alert',
   component: Alert,
   args: {
-    heading: 'Let op',
     closeable: false,
+    heading: 'Let op',
   },
 } satisfies Meta<typeof Alert>
 

From 380fbc8c5d60694efe9668863f961a29a7d968e4 Mon Sep 17 00:00:00 2001
From: Niels Roozemond <n.roozemond@amsterdam.nl>
Date: Thu, 6 Jun 2024 15:45:46 +0200
Subject: [PATCH 09/13] Unit test corrections and typo

---
 packages/react/src/Alert/Alert.test.tsx         | 8 ++++++--
 packages/react/src/Dialog/Dialog.test.tsx       | 8 ++++++--
 storybook/src/components/Header/Header.docs.mdx | 2 +-
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/Alert/Alert.test.tsx b/packages/react/src/Alert/Alert.test.tsx
index 204e4c303f..b905236e11 100644
--- a/packages/react/src/Alert/Alert.test.tsx
+++ b/packages/react/src/Alert/Alert.test.tsx
@@ -43,9 +43,13 @@ describe('Alert', () => {
   })
 
   it('renders a heading', () => {
-    const { getByText } = render(<Alert heading="Alert Title" />)
+    render(<Alert heading="Alert heading" />)
 
-    expect(getByText('Alert Title')).toBeInTheDocument()
+    const heading = screen.getByRole('heading', {
+      name: 'Alert heading',
+    })
+
+    expect(heading).toBeInTheDocument()
   })
 
   it('renders the close button', () => {
diff --git a/packages/react/src/Dialog/Dialog.test.tsx b/packages/react/src/Dialog/Dialog.test.tsx
index 724081990f..b0dc02b1d8 100644
--- a/packages/react/src/Dialog/Dialog.test.tsx
+++ b/packages/react/src/Dialog/Dialog.test.tsx
@@ -51,9 +51,13 @@ describe('Dialog', () => {
   })
 
   it('renders a heading', () => {
-    const { getByText } = render(<Dialog heading="Dialog Title" />)
+    render(<Dialog heading="Dialog Heading" />)
 
-    expect(getByText('Dialog Title')).toBeInTheDocument()
+    const heading = screen.getByRole('heading', {
+      name: 'Dialog Heading',
+    })
+
+    expect(heading).toBeInTheDocument()
   })
 
   it('renders children', () => {
diff --git a/storybook/src/components/Header/Header.docs.mdx b/storybook/src/components/Header/Header.docs.mdx
index 6ee030a9e2..83dedbe82a 100644
--- a/storybook/src/components/Header/Header.docs.mdx
+++ b/storybook/src/components/Header/Header.docs.mdx
@@ -32,7 +32,7 @@ A Page Menu in the Header should not wrap.
 
 <Canvas of={HeaderStories.WithLinks} />
 
-## With app name and menu
+## With links and menu
 
 <Canvas of={HeaderStories.WithLinksAndMenu} />
 

From 22ad829a76ca6805ad6aae1c7bf2e33e37938de1 Mon Sep 17 00:00:00 2001
From: Niels Roozemond <n.roozemond@amsterdam.nl>
Date: Fri, 7 Jun 2024 10:53:44 +0200
Subject: [PATCH 10/13] Test fix

---
 packages/react/src/Dialog/Dialog.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/Dialog/Dialog.test.tsx b/packages/react/src/Dialog/Dialog.test.tsx
index b0dc02b1d8..d40bbcebdb 100644
--- a/packages/react/src/Dialog/Dialog.test.tsx
+++ b/packages/react/src/Dialog/Dialog.test.tsx
@@ -51,7 +51,7 @@ describe('Dialog', () => {
   })
 
   it('renders a heading', () => {
-    render(<Dialog heading="Dialog Heading" />)
+    render(<Dialog heading="Dialog Heading" open />)
 
     const heading = screen.getByRole('heading', {
       name: 'Dialog Heading',

From 0f8593f9c756ecadf75d7b77ea191a0f97291ec9 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Fri, 7 Jun 2024 11:14:28 +0200
Subject: [PATCH 11/13] Increase consistency in test content

---
 packages/react/src/Alert/Alert.test.tsx       |  4 ++--
 packages/react/src/Dialog/Dialog.test.tsx     | 24 +++++++++----------
 packages/react/src/Header/Header.test.tsx     |  4 ++--
 .../TableOfContentsLink.test.tsx              |  4 ++--
 4 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/packages/react/src/Alert/Alert.test.tsx b/packages/react/src/Alert/Alert.test.tsx
index b905236e11..892879ec87 100644
--- a/packages/react/src/Alert/Alert.test.tsx
+++ b/packages/react/src/Alert/Alert.test.tsx
@@ -43,10 +43,10 @@ describe('Alert', () => {
   })
 
   it('renders a heading', () => {
-    render(<Alert heading="Alert heading" />)
+    render(<Alert heading="Test heading" />)
 
     const heading = screen.getByRole('heading', {
-      name: 'Alert heading',
+      name: 'Test heading',
     })
 
     expect(heading).toBeInTheDocument()
diff --git a/packages/react/src/Dialog/Dialog.test.tsx b/packages/react/src/Dialog/Dialog.test.tsx
index d40bbcebdb..cd3c6f9387 100644
--- a/packages/react/src/Dialog/Dialog.test.tsx
+++ b/packages/react/src/Dialog/Dialog.test.tsx
@@ -5,7 +5,7 @@ import '@testing-library/jest-dom'
 
 describe('Dialog', () => {
   it('renders', () => {
-    render(<Dialog heading="Dialog Title" open />)
+    render(<Dialog heading="Test heading" open />)
 
     const component = screen.getByRole('dialog')
 
@@ -14,7 +14,7 @@ describe('Dialog', () => {
   })
 
   it('renders a design system BEM class name', () => {
-    render(<Dialog heading="Dialog Title" />)
+    render(<Dialog heading="Test heading" />)
 
     const component = screen.getByRole('dialog', { hidden: true })
 
@@ -22,7 +22,7 @@ describe('Dialog', () => {
   })
 
   it('renders an additional class name', () => {
-    render(<Dialog heading="Dialog Title" className="extra" />)
+    render(<Dialog heading="Test heading" className="extra" />)
 
     const component = screen.getByRole('dialog', { hidden: true })
 
@@ -34,7 +34,7 @@ describe('Dialog', () => {
   it('supports ForwardRef in React', () => {
     const ref = createRef<HTMLDialogElement>()
 
-    render(<Dialog heading="Dialog Title" ref={ref} />)
+    render(<Dialog heading="Test heading" ref={ref} />)
 
     const component = screen.getByRole('dialog', { hidden: true })
 
@@ -42,7 +42,7 @@ describe('Dialog', () => {
   })
 
   it('is not visible when open attribute is not used', () => {
-    render(<Dialog heading="Dialog Title" />)
+    render(<Dialog heading="Test heading" />)
 
     const component = screen.getByRole('dialog', { hidden: true })
 
@@ -51,7 +51,7 @@ describe('Dialog', () => {
   })
 
   it('renders a heading', () => {
-    render(<Dialog heading="Dialog Heading" open />)
+    render(<Dialog heading="Test heading" open />)
 
     const heading = screen.getByRole('heading', {
       name: 'Dialog Heading',
@@ -61,25 +61,25 @@ describe('Dialog', () => {
   })
 
   it('renders children', () => {
-    const { getByText } = render(<Dialog heading="Dialog Title">Dialog Content</Dialog>)
+    const { getByText } = render(<Dialog heading="Test heading">Test content</Dialog>)
 
-    expect(getByText('Dialog Content')).toBeInTheDocument()
+    expect(getByText('Test content')).toBeInTheDocument()
   })
 
   it('renders actions when provided', () => {
-    const { getByText } = render(<Dialog heading="Dialog Title" actions={<button>Click Me</button>} />)
+    const { getByText } = render(<Dialog heading="Test heading" actions={<button>Click Me</button>} />)
 
     expect(getByText('Click Me')).toBeInTheDocument()
   })
 
   it('does not render actions when not provided', () => {
-    const { queryByText } = render(<Dialog heading="Dialog Title" />)
+    const { queryByText } = render(<Dialog heading="Test heading" />)
 
     expect(queryByText('Click Me')).not.toBeInTheDocument()
   })
 
   it('renders DialogClose button', () => {
-    render(<Dialog heading="Dialog Title" open />)
+    render(<Dialog heading="Test heading" open />)
 
     const closeButton = screen.getByRole('button', { name: 'Sluiten' })
 
@@ -87,7 +87,7 @@ describe('Dialog', () => {
   })
 
   it('renders a custom close label', () => {
-    render(<Dialog heading="Dialog Title" open closeButtonLabel="Close" />)
+    render(<Dialog heading="Test heading" open closeButtonLabel="Close" />)
 
     const closeButton = screen.getByRole('button', { name: 'Close' })
 
diff --git a/packages/react/src/Header/Header.test.tsx b/packages/react/src/Header/Header.test.tsx
index e709ae0164..663342a1ec 100644
--- a/packages/react/src/Header/Header.test.tsx
+++ b/packages/react/src/Header/Header.test.tsx
@@ -68,12 +68,12 @@ describe('Header', () => {
   })
 
   it('renders with links', () => {
-    const { container } = render(<Header links={<div>Menu Content</div>} />)
+    const { container } = render(<Header links={<div>Test content</div>} />)
 
     const menu = container.querySelector('.ams-header__links')
 
     expect(menu).toBeInTheDocument()
-    expect(menu).toHaveTextContent('Menu Content')
+    expect(menu).toHaveTextContent('Test content')
   })
 
   it('renders with menu button', () => {
diff --git a/packages/react/src/TableOfContents/TableOfContentsLink.test.tsx b/packages/react/src/TableOfContents/TableOfContentsLink.test.tsx
index 5b30cfb4b5..aae147e41d 100644
--- a/packages/react/src/TableOfContents/TableOfContentsLink.test.tsx
+++ b/packages/react/src/TableOfContents/TableOfContentsLink.test.tsx
@@ -5,13 +5,13 @@ import { TableOfContents } from './TableOfContents'
 
 describe('Table of Contents link', () => {
   it('renders', () => {
-    render(<TableOfContents.Link label="Test" href="#" />)
+    render(<TableOfContents.Link label="Test label" href="#" />)
 
     const link = screen.getByRole('link')
 
     expect(link).toBeInTheDocument()
     expect(link).toBeVisible()
-    expect(link).toHaveTextContent('Test')
+    expect(link).toHaveTextContent('Test label')
   })
 
   it('renders a design system BEM class name', () => {

From 65dec795494ba21a9b9e69d41c72d1ce4442c5d6 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Fri, 7 Jun 2024 11:14:44 +0200
Subject: [PATCH 12/13] =?UTF-8?q?Use=20=E2=80=98heading=E2=80=99=20instead?=
 =?UTF-8?q?=20of=20=E2=80=98title=E2=80=99=20in=20all=20docs=20as=20well?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/css/src/components/header/README.md                | 2 +-
 storybook/src/components/Alert/Alert.docs.mdx               | 2 +-
 storybook/src/components/Card/Card.docs.mdx                 | 6 +++---
 storybook/src/components/OrderedList/OrderedList.docs.mdx   | 2 +-
 .../src/components/UnorderedList/UnorderedList.docs.mdx     | 2 +-
 storybook/src/docs/typography.docs.mdx                      | 6 +++---
 6 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/css/src/components/header/README.md b/packages/css/src/components/header/README.md
index c66c1a97af..f2782bcb5f 100644
--- a/packages/css/src/components/header/README.md
+++ b/packages/css/src/components/header/README.md
@@ -2,7 +2,7 @@
 
 # Header
 
-Arranges the City’s logo, the title for the application, and a page menu.
+Arranges the City’s logo, the name of the application, and a page menu.
 
 ## Guidelines
 
diff --git a/storybook/src/components/Alert/Alert.docs.mdx b/storybook/src/components/Alert/Alert.docs.mdx
index c4005d91af..f67799d3cf 100644
--- a/storybook/src/components/Alert/Alert.docs.mdx
+++ b/storybook/src/components/Alert/Alert.docs.mdx
@@ -53,7 +53,7 @@ For clarification, formatted text can be included in the alert.
 
 ### Without Heading
 
-Sometimes, a title is unnecessary.
+Sometimes, a heading is unnecessary.
 The icon automatically becomes slightly smaller.
 
 <Canvas of={AlertStories.WithoutHeading} />
diff --git a/storybook/src/components/Card/Card.docs.mdx b/storybook/src/components/Card/Card.docs.mdx
index 3490295126..abcabc05cc 100644
--- a/storybook/src/components/Card/Card.docs.mdx
+++ b/storybook/src/components/Card/Card.docs.mdx
@@ -10,9 +10,9 @@ import README from "../../../../packages/css/src/components/card/README.md?raw";
 
 ## With Tagline
 
-A card can display a tagline above the title, a short term like a category or type of information.
-Wrap the tagline and the title in a `Card.HeadingGroup`.
-This ensures screen readers first read the title and then the tagline.
+A card can display a tagline above the heading, a short term like a category or type of information.
+Wrap the tagline and the heading in a `Card.HeadingGroup`.
+This ensures screen readers first read the heading and then the tagline.
 
 <Canvas of={CardStories.WithTagline} />
 
diff --git a/storybook/src/components/OrderedList/OrderedList.docs.mdx b/storybook/src/components/OrderedList/OrderedList.docs.mdx
index 3cfa2becac..dbe2980014 100644
--- a/storybook/src/components/OrderedList/OrderedList.docs.mdx
+++ b/storybook/src/components/OrderedList/OrderedList.docs.mdx
@@ -50,7 +50,7 @@ An overview of articles or search results can be presented as an ordered can be
 In such cases, apply the list semantics while hiding markers.
 This helps screen readers understand and navigate the list.
 
-Note: each item typically contains a container with titles and other text components in this variant.
+Note: each item typically contains a container with headings and other text components in this variant.
 Therefore, it does not define typography for the items and the `inverseColor` prop has no effect.
 
 For example, here are three news articles:
diff --git a/storybook/src/components/UnorderedList/UnorderedList.docs.mdx b/storybook/src/components/UnorderedList/UnorderedList.docs.mdx
index 2709266afa..20f37b0dbe 100644
--- a/storybook/src/components/UnorderedList/UnorderedList.docs.mdx
+++ b/storybook/src/components/UnorderedList/UnorderedList.docs.mdx
@@ -32,7 +32,7 @@ An overview of equivalent elements is also an unordered list.
 In such cases, apply the list semantics while hiding markers.
 This helps screen readers understand and navigate the list.
 
-Note: In this variant, each item typically contains a container with titles and other text components.
+Note: In this variant, each item typically contains a container with headings and other text components.
 Therefore, this variant does not define typography for the items and the `inverseColor` prop has no effect.
 
 This example is based on the top tasks on the homepage of the website:
diff --git a/storybook/src/docs/typography.docs.mdx b/storybook/src/docs/typography.docs.mdx
index 4c7c38356e..eb0088b8d6 100644
--- a/storybook/src/docs/typography.docs.mdx
+++ b/storybook/src/docs/typography.docs.mdx
@@ -9,7 +9,7 @@ import { Meta, Typeset } from "@storybook/blocks";
 ### Seven Text Levels
 
 There are 7 levels of text size and corresponding line height.
-Each typographic element belongs to one of these levels: title, paragraph, link, quote, form text, etc.
+Each typographic element belongs to one of these levels: heading, paragraph, link, quote, form text, etc.
 They are numbered from 0 to 6 to align them with the levels of headings.
 Examples:
 
@@ -38,7 +38,7 @@ The typographic scale is based on a factor of 5 ÷ 4 = 1.25.
 For each adjacent level, the text is that much larger or smaller.
 
 The text size grows more slowly at the minimum window width, with a factor of 7 ÷ 6 ≈ 1.17.
-This prevents titles from becoming too large on phones and other narrow windows and small texts from becoming too small.
+This prevents headings from becoming too large on phones and other narrow windows and small texts from becoming too small.
 
 ### Two Themes for Websites and Applications
 
@@ -132,7 +132,7 @@ In CSS terms: 400 and 800.
   sampleText="Jouw typograaf biedt mij zulke exquise schreven"
 />
 
-The text of all kinds of titles, decorative quotes, and form labels use the bold weight.
+The text of all kinds of headings, decorative quotes, and form labels use the bold weight.
 
 <Typeset
   fontFamily="Amsterdam Sans, Arial, sans-serif"

From 7d496dc40237412b5d58af4f97d723d6875a289b Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Fri, 7 Jun 2024 11:19:07 +0200
Subject: [PATCH 13/13] Great, the tests still do their job

---
 packages/react/src/Dialog/Dialog.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/Dialog/Dialog.test.tsx b/packages/react/src/Dialog/Dialog.test.tsx
index cd3c6f9387..71a7beb457 100644
--- a/packages/react/src/Dialog/Dialog.test.tsx
+++ b/packages/react/src/Dialog/Dialog.test.tsx
@@ -54,7 +54,7 @@ describe('Dialog', () => {
     render(<Dialog heading="Test heading" open />)
 
     const heading = screen.getByRole('heading', {
-      name: 'Dialog Heading',
+      name: 'Test heading',
     })
 
     expect(heading).toBeInTheDocument()