feat!: Remove HeadingLevel type, group Heading sizes in story

packages/react/src/Heading/Heading.tsx

@@ -9,8 +9,11 @@ import { forwardRef } from 'react'
 import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
 import { getHeadingElement } from './getHeadingElement'
 
-export type HeadingLevel = 1 | 2 | 3 | 4
-type HeadingSize = 'level-1' | 'level-2' | 'level-3' | 'level-4' | 'level-5' | 'level-6'
+export const headingLevels: Array<number> = [1, 2, 3, 4]
+export const headingSizes: Array<string> = ['level-1', 'level-2', 'level-3', 'level-4', 'level-5', 'level-6']
+
+export type HeadingLevel = (typeof headingLevels)[number]
+export type HeadingSize = (typeof headingSizes)[number]
 
 export type HeadingProps = {
   /** Changes the text colour for readability on a dark background. */

packages/react/src/Heading/index.ts

@@ -1,2 +1,2 @@
-export { Heading } from './Heading'
+export { Heading, headingLevels, headingSizes } from './Heading'
 export type { HeadingLevel, HeadingProps } from './Heading'

storybook/src/components/Heading/Heading.docs.mdx

@@ -14,21 +14,22 @@ import README from "../../../../packages/css/src/components/heading/README.md?ra
 
 ## Examples
 
-### Heading 1
+### Levels
 
-<Canvas of={HeadingStories.Heading1} />
+Four levels of headings are available.
+A page should contain only one Heading with level 1.
+Do not skip heading levels.
+User agents can use heading information to construct a table of contents for a document.
 
-### Heading 2
+<Canvas of={HeadingStories.Levels} />
 
-<Canvas of={HeadingStories.Heading2} />
+### Sizes
 
-### Heading 3
+It may be useful to display a heading in smaller font sizes.
+We offer six sizes to match the list of [Text Levels](?path=/docs/docs-design-guidelines-typography--docs).
+Be sure to maintain a consistent semantic hierarchy of heading levels.
 
-<Canvas of={HeadingStories.Heading3} />
-
-### Heading 4
-
-<Canvas of={HeadingStories.Heading4} />
+<Canvas of={HeadingStories.Sizes} />
 
 ### Inverse colour
 

storybook/src/components/Heading/Heading.stories.tsx

@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-import { Heading } from '@amsterdam/design-system-react/src'
+import { Column, Heading, headingLevels, headingSizes } from '@amsterdam/design-system-react/src'
 import { Meta, StoryObj } from '@storybook/react'
 import { inverseColorDecorator } from '../shared/decorators'
 import { exampleHeading } from '../shared/exampleContent'
@@ -32,24 +32,24 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {}
 
-export const Heading1: Story = {}
-
-export const Heading2: Story = {
-  args: {
-    level: 2,
-  },
+export const Levels: Story = {
+  render: (args) => (
+    <Column gap="small">
+      {headingLevels.map((level) => (
+        <Heading {...args} key={level} level={level} />
+      ))}
+    </Column>
+  ),
 }
 
-export const Heading3: Story = {
-  args: {
-    level: 3,
-  },
-}
-
-export const Heading4: Story = {
-  args: {
-    level: 4,
-  },
+export const Sizes: Story = {
+  render: (args) => (
+    <Column gap="small">
+      {headingSizes.map((size) => (
+        <Heading {...args} key={size} size={size} />
+      ))}
+    </Column>
+  ),
 }
 
 export const InvertedColor: Story = {