From b3a92929b0e8d8591972b96add2a0a99d2640e24 Mon Sep 17 00:00:00 2001 From: Aram Limpens Date: Mon, 3 Jun 2024 17:39:11 +0200 Subject: [PATCH 01/13] Add Form Error List component --- .../src/components/form-error-list/README.md | 3 ++ .../form-error-list/form-error-list.scss | 8 +++ packages/css/src/components/index.scss | 1 + .../src/FormErrorList/FormErrorList.test.tsx | 54 +++++++++++++++++++ .../react/src/FormErrorList/FormErrorList.tsx | 54 +++++++++++++++++++ packages/react/src/FormErrorList/README.md | 5 ++ packages/react/src/FormErrorList/index.ts | 2 + packages/react/src/index.ts | 1 + .../ams/form-error-list.tokens.json | 5 ++ .../FormErrorList/FormErrorList.docs.mdx | 11 ++++ .../FormErrorList/FormErrorList.stories.tsx | 24 +++++++++ 11 files changed, 168 insertions(+) create mode 100644 packages/css/src/components/form-error-list/README.md create mode 100644 packages/css/src/components/form-error-list/form-error-list.scss create mode 100644 packages/react/src/FormErrorList/FormErrorList.test.tsx create mode 100644 packages/react/src/FormErrorList/FormErrorList.tsx create mode 100644 packages/react/src/FormErrorList/README.md create mode 100644 packages/react/src/FormErrorList/index.ts create mode 100644 proprietary/tokens/src/components/ams/form-error-list.tokens.json create mode 100644 storybook/src/components/FormErrorList/FormErrorList.docs.mdx create mode 100644 storybook/src/components/FormErrorList/FormErrorList.stories.tsx diff --git a/packages/css/src/components/form-error-list/README.md b/packages/css/src/components/form-error-list/README.md new file mode 100644 index 0000000000..329a47ce45 --- /dev/null +++ b/packages/css/src/components/form-error-list/README.md @@ -0,0 +1,3 @@ + + +# Form Error List diff --git a/packages/css/src/components/form-error-list/form-error-list.scss b/packages/css/src/components/form-error-list/form-error-list.scss new file mode 100644 index 0000000000..3503445679 --- /dev/null +++ b/packages/css/src/components/form-error-list/form-error-list.scss @@ -0,0 +1,8 @@ +/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */ + +.ams-form-error-list { + /* Add styles here */ +} diff --git a/packages/css/src/components/index.scss b/packages/css/src/components/index.scss index 5f7cf2d09a..1f1963ed8f 100644 --- a/packages/css/src/components/index.scss +++ b/packages/css/src/components/index.scss @@ -4,6 +4,7 @@ */ /* Append here */ +@import "./form-error-list/form-error-list"; @import "./file-input/file-input"; @import "./field/field"; @import "./select/select"; diff --git a/packages/react/src/FormErrorList/FormErrorList.test.tsx b/packages/react/src/FormErrorList/FormErrorList.test.tsx new file mode 100644 index 0000000000..4992ea49b8 --- /dev/null +++ b/packages/react/src/FormErrorList/FormErrorList.test.tsx @@ -0,0 +1,54 @@ +import { render, screen } from '@testing-library/react' +import { createRef } from 'react' +import { FormErrorList } from './FormErrorList' +import '@testing-library/jest-dom' + +describe('Form error list', () => { + const testErrors = [ + { id: '#', label: 'Vul een geldige datum in (bijvoorbeeld 6 januari 2030).' }, + { id: '#', label: 'De geldigheidsdatum van uw paspoort moet in de toekomst liggen.' }, + ] + + it('renders', () => { + render() + + const component = screen.getByRole('alert') + + expect(component).toBeInTheDocument() + expect(component).toBeVisible() + }) + + it('does not render when there are no errors', () => {}) + + it('renders a design system BEM class name', () => { + render() + + const component = screen.getByRole('alert') + + expect(component).toHaveClass('ams-form-error-list') + }) + + it('renders an additional class name', () => { + render() + + const component = screen.getByRole('alert') + + expect(component).toHaveClass('ams-form-error-list extra') + }) + + it('renders a list item and link for every error', () => {}) + + it('renders a custom heading', () => {}) + + it('renders the correct heading level', () => {}) + + it('supports ForwardRef in React', () => { + const ref = createRef() + + render() + + const component = screen.getByRole('alert') + + expect(ref.current).toBe(component) + }) +}) diff --git a/packages/react/src/FormErrorList/FormErrorList.tsx b/packages/react/src/FormErrorList/FormErrorList.tsx new file mode 100644 index 0000000000..a8e33e572e --- /dev/null +++ b/packages/react/src/FormErrorList/FormErrorList.tsx @@ -0,0 +1,54 @@ +/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */ + +import clsx from 'clsx' +import { forwardRef } from 'react' +import type { ForwardedRef, HTMLAttributes } from 'react' +import { Alert } from '../Alert' +import { HeadingLevel } from '../Heading/Heading' +import { LinkList } from '../LinkList' + +export type FormErrorListProps = { + errors: { id: string; label: string }[] + heading?: string + headingLevel?: HeadingLevel +} & HTMLAttributes + +export const FormErrorList = forwardRef( + ( + { + className, + errors, + heading = 'Verbeter de fouten voor u verder gaat', + headingLevel = 2, + ...restProps + }: FormErrorListProps, + ref: ForwardedRef, + ) => { + if (!errors) return undefined + + return ( + + + {errors.map(({ id, label }) => ( + + {label} + + ))} + + + ) + }, +) + +FormErrorList.displayName = 'FormErrorList' diff --git a/packages/react/src/FormErrorList/README.md b/packages/react/src/FormErrorList/README.md new file mode 100644 index 0000000000..6ecaab7111 --- /dev/null +++ b/packages/react/src/FormErrorList/README.md @@ -0,0 +1,5 @@ + + +# React Form Error List component + +[Form Error List documentation](../../../css/src/components/form-error-list/README.md) diff --git a/packages/react/src/FormErrorList/index.ts b/packages/react/src/FormErrorList/index.ts new file mode 100644 index 0000000000..864585f6c1 --- /dev/null +++ b/packages/react/src/FormErrorList/index.ts @@ -0,0 +1,2 @@ +export { FormErrorList } from './FormErrorList' +export type { FormErrorListProps } from './FormErrorList' diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 4334528431..129ed0b182 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -4,6 +4,7 @@ */ /* Append here */ +export * from './FormErrorList' export * from './FileInput' export * from './Field' export * from './Select' diff --git a/proprietary/tokens/src/components/ams/form-error-list.tokens.json b/proprietary/tokens/src/components/ams/form-error-list.tokens.json new file mode 100644 index 0000000000..9ce34275b6 --- /dev/null +++ b/proprietary/tokens/src/components/ams/form-error-list.tokens.json @@ -0,0 +1,5 @@ +{ + "ams": { + "form-error-list": {} + } +} diff --git a/storybook/src/components/FormErrorList/FormErrorList.docs.mdx b/storybook/src/components/FormErrorList/FormErrorList.docs.mdx new file mode 100644 index 0000000000..fedbf60997 --- /dev/null +++ b/storybook/src/components/FormErrorList/FormErrorList.docs.mdx @@ -0,0 +1,11 @@ +import { Controls, Markdown, Meta, Primary } from "@storybook/blocks"; +import * as FormErrorListStories from "./FormErrorList.stories.tsx"; +import README from "../../../../packages/css/src/components/form-error-list/README.md?raw"; + + + +{README} + + + + diff --git a/storybook/src/components/FormErrorList/FormErrorList.stories.tsx b/storybook/src/components/FormErrorList/FormErrorList.stories.tsx new file mode 100644 index 0000000000..1fca049964 --- /dev/null +++ b/storybook/src/components/FormErrorList/FormErrorList.stories.tsx @@ -0,0 +1,24 @@ +/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */ + +import { FormErrorList } from '@amsterdam/design-system-react/src' +import { Meta, StoryObj } from '@storybook/react' + +const meta = { + title: 'Form Error List', + component: FormErrorList, + args: { + errors: [ + { id: '#', label: 'Vul een geldige datum in (bijvoorbeeld 6 januari 2030).' }, + { id: '#', label: 'De geldigheidsdatum van uw paspoort moet in de toekomst liggen.' }, + ], + }, +} satisfies Meta + +export default meta + +type Story = StoryObj + +export const Default: Story = {} From 2ca4eac8358b67eccba030a77f9a32b7d91e85a7 Mon Sep 17 00:00:00 2001 From: Aram Limpens Date: Wed, 5 Jun 2024 09:42:21 +0200 Subject: [PATCH 02/13] Add tests --- .../src/FormErrorList/FormErrorList.test.tsx | 44 +++++++++++++++++-- .../react/src/FormErrorList/FormErrorList.tsx | 2 +- 2 files changed, 41 insertions(+), 5 deletions(-) diff --git a/packages/react/src/FormErrorList/FormErrorList.test.tsx b/packages/react/src/FormErrorList/FormErrorList.test.tsx index 4992ea49b8..143d9faa6e 100644 --- a/packages/react/src/FormErrorList/FormErrorList.test.tsx +++ b/packages/react/src/FormErrorList/FormErrorList.test.tsx @@ -18,7 +18,13 @@ describe('Form error list', () => { expect(component).toBeVisible() }) - it('does not render when there are no errors', () => {}) + it('does not render when there are no errors', () => { + render() + + const component = screen.queryByRole('alert') + + expect(component).not.toBeInTheDocument() + }) it('renders a design system BEM class name', () => { render() @@ -36,11 +42,41 @@ describe('Form error list', () => { expect(component).toHaveClass('ams-form-error-list extra') }) - it('renders a list item and link for every error', () => {}) + it('renders a list item and link for every error', () => { + render() + + const listitems = screen.getAllByRole('listitem') + const links = screen.getAllByRole('link') + + expect(listitems.length).toBe(2) + expect(links.length).toBe(2) + }) + + it('renders a link with the correct name and href for every error', () => { + render() + + const link1 = screen.getByRole('link', { name: testErrors[0].label }) + const link2 = screen.getByRole('link', { name: testErrors[1].label }) + + expect(link1).toHaveAttribute('href', testErrors[0].id) + expect(link2).toHaveAttribute('href', testErrors[1].id) + }) + + it('renders a custom heading', () => { + render() + + const component = screen.getByRole('heading', { name: 'Testheading' }) + + expect(component).toBeInTheDocument() + }) + + it('renders the correct heading level', () => { + render() - it('renders a custom heading', () => {}) + const component = screen.getByRole('heading', { level: 4 }) - it('renders the correct heading level', () => {}) + expect(component).toBeInTheDocument() + }) it('supports ForwardRef in React', () => { const ref = createRef() diff --git a/packages/react/src/FormErrorList/FormErrorList.tsx b/packages/react/src/FormErrorList/FormErrorList.tsx index a8e33e572e..6e8a02820b 100644 --- a/packages/react/src/FormErrorList/FormErrorList.tsx +++ b/packages/react/src/FormErrorList/FormErrorList.tsx @@ -27,7 +27,7 @@ export const FormErrorList = forwardRef( }: FormErrorListProps, ref: ForwardedRef, ) => { - if (!errors) return undefined + if (errors.length === 0) return undefined return ( Date: Wed, 5 Jun 2024 10:25:36 +0200 Subject: [PATCH 03/13] Add docs --- .../src/components/form-error-list/README.md | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/packages/css/src/components/form-error-list/README.md b/packages/css/src/components/form-error-list/README.md index 329a47ce45..93e553d317 100644 --- a/packages/css/src/components/form-error-list/README.md +++ b/packages/css/src/components/form-error-list/README.md @@ -1,3 +1,35 @@ # Form Error List + +Use this component at the top of a page to summarise any errors a user has made. +When a user makes an error, you must show both a Form Error List and an Error Message above each answer that contains an error. + +## Guidelines + +- Always show an error summary when there is a validation error, even if there’s only one. +- You must link the errors in the error summary to the answer they relate to (see below). + +## Linking from the error summary to each answer + +For questions that require a user to answer using a single field, like a file upload, select, textarea, text input or character count, link to the `id` of that field. + +When a user has to enter their answer into multiple fields, such as day, month and year fields, link to the `id` of the first field that contains an error. +If you do not know which field contains an error, link to the `id` of the first field. + +For questions that require a user to select one or more options from a list using Radios or Checkboxes, link to the `id` of first Radio or Checkbox. + +## Where to put the error summary + +Put the error summary at the top of the main container, outside of the `
`-tag. If your page includes breadcrumbs or a back link, place it below these, but above the `

`. + +## Relevant WCAG requirements + +Pay extra attention to these parts: + +- [WCAG requirement 1.3.1](https://www.w3.org/TR/WCAG21/#info-and-relationships): the heading level of the accordion sections depends on where in the page the accordion is placed, this may differ per page. + +## References + +- [Show an error summary above the form - NL Design System](https://www.nldesignsystem.nl/richtlijnen/formulieren/foutmeldingen#zet-een-samenvatting-van-de-foutmeldingen-boven-het-formulier) +- [Error Summary component - Gov.uk](https://design-system.service.gov.uk/components/error-summary/) From 09ce0d3af4a98060e184246d2d09054d7fadbf36 Mon Sep 17 00:00:00 2001 From: Aram Limpens Date: Wed, 5 Jun 2024 10:29:04 +0200 Subject: [PATCH 04/13] Move to correct folder in Storybook --- .../src/components/FormErrorList/FormErrorList.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/storybook/src/components/FormErrorList/FormErrorList.stories.tsx b/storybook/src/components/FormErrorList/FormErrorList.stories.tsx index 1fca049964..93104cd252 100644 --- a/storybook/src/components/FormErrorList/FormErrorList.stories.tsx +++ b/storybook/src/components/FormErrorList/FormErrorList.stories.tsx @@ -7,7 +7,7 @@ import { FormErrorList } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' const meta = { - title: 'Form Error List', + title: 'Components/Forms/Form Error List', component: FormErrorList, args: { errors: [ From ea5355352e662e48be240088f1430c5568bbc853 Mon Sep 17 00:00:00 2001 From: Aram Limpens Date: Wed, 5 Jun 2024 10:33:02 +0200 Subject: [PATCH 05/13] Remove unused files --- .../src/components/form-error-list/form-error-list.scss | 8 -------- packages/css/src/components/index.scss | 1 - .../tokens/src/components/ams/form-error-list.tokens.json | 5 ----- 3 files changed, 14 deletions(-) delete mode 100644 packages/css/src/components/form-error-list/form-error-list.scss delete mode 100644 proprietary/tokens/src/components/ams/form-error-list.tokens.json diff --git a/packages/css/src/components/form-error-list/form-error-list.scss b/packages/css/src/components/form-error-list/form-error-list.scss deleted file mode 100644 index 3503445679..0000000000 --- a/packages/css/src/components/form-error-list/form-error-list.scss +++ /dev/null @@ -1,8 +0,0 @@ -/** - * @license EUPL-1.2+ - * Copyright Gemeente Amsterdam - */ - -.ams-form-error-list { - /* Add styles here */ -} diff --git a/packages/css/src/components/index.scss b/packages/css/src/components/index.scss index 1f1963ed8f..5f7cf2d09a 100644 --- a/packages/css/src/components/index.scss +++ b/packages/css/src/components/index.scss @@ -4,7 +4,6 @@ */ /* Append here */ -@import "./form-error-list/form-error-list"; @import "./file-input/file-input"; @import "./field/field"; @import "./select/select"; diff --git a/proprietary/tokens/src/components/ams/form-error-list.tokens.json b/proprietary/tokens/src/components/ams/form-error-list.tokens.json deleted file mode 100644 index 9ce34275b6..0000000000 --- a/proprietary/tokens/src/components/ams/form-error-list.tokens.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "ams": { - "form-error-list": {} - } -} From 57db53527b5f4356a3ae15fc9be79b3c06fe486a Mon Sep 17 00:00:00 2001 From: Aram Limpens Date: Wed, 5 Jun 2024 10:37:36 +0200 Subject: [PATCH 06/13] Update readme --- packages/css/src/components/form-error-list/README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/css/src/components/form-error-list/README.md b/packages/css/src/components/form-error-list/README.md index 93e553d317..38536eb2ec 100644 --- a/packages/css/src/components/form-error-list/README.md +++ b/packages/css/src/components/form-error-list/README.md @@ -7,10 +7,10 @@ When a user makes an error, you must show both a Form Error List and an Error Me ## Guidelines -- Always show an error summary when there is a validation error, even if there’s only one. -- You must link the errors in the error summary to the answer they relate to (see below). +- Always show a Form Error List when there is a validation error, even if there’s only one. +- You must link the errors in the Form Error List to the answer they relate to (see below). -## Linking from the error summary to each answer +## Linking from the Form Error List to each answer For questions that require a user to answer using a single field, like a file upload, select, textarea, text input or character count, link to the `id` of that field. @@ -19,9 +19,9 @@ If you do not know which field contains an error, link to the `id` of the first For questions that require a user to select one or more options from a list using Radios or Checkboxes, link to the `id` of first Radio or Checkbox. -## Where to put the error summary +## Where to put the Form Error List -Put the error summary at the top of the main container, outside of the ``-tag. If your page includes breadcrumbs or a back link, place it below these, but above the `

`. +Put the Form Error List at the top of the main container, outside of the ``-tag. If your page includes breadcrumbs or a back link, place it below these, but above the `

`. ## Relevant WCAG requirements From bbaa3638fb59739becdbc37bd7929244b6e8113f Mon Sep 17 00:00:00 2001 From: Aram Limpens Date: Wed, 5 Jun 2024 10:39:58 +0200 Subject: [PATCH 07/13] Fix typo --- packages/css/src/components/form-error-list/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/css/src/components/form-error-list/README.md b/packages/css/src/components/form-error-list/README.md index 38536eb2ec..2c83086fba 100644 --- a/packages/css/src/components/form-error-list/README.md +++ b/packages/css/src/components/form-error-list/README.md @@ -17,7 +17,7 @@ For questions that require a user to answer using a single field, like a file up When a user has to enter their answer into multiple fields, such as day, month and year fields, link to the `id` of the first field that contains an error. If you do not know which field contains an error, link to the `id` of the first field. -For questions that require a user to select one or more options from a list using Radios or Checkboxes, link to the `id` of first Radio or Checkbox. +For questions that require a user to select one or more options from a list using Radios or Checkboxes, link to the `id` of the first Radio or Checkbox. ## Where to put the Form Error List From 28fe7640768506ef996dfcee396c8c012ad9d6d0 Mon Sep 17 00:00:00 2001 From: Aram Limpens Date: Wed, 5 Jun 2024 13:36:51 +0200 Subject: [PATCH 08/13] Fix typo --- packages/css/src/components/form-error-list/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/css/src/components/form-error-list/README.md b/packages/css/src/components/form-error-list/README.md index 2c83086fba..9ddd4542fd 100644 --- a/packages/css/src/components/form-error-list/README.md +++ b/packages/css/src/components/form-error-list/README.md @@ -27,7 +27,7 @@ Put the Form Error List at the top of the main container, outside of the ` Pay extra attention to these parts: -- [WCAG requirement 1.3.1](https://www.w3.org/TR/WCAG21/#info-and-relationships): the heading level of the accordion sections depends on where in the page the accordion is placed, this may differ per page. +- [WCAG requirement 1.3.1](https://www.w3.org/TR/WCAG21/#info-and-relationships): the heading level of the Form Error List depends on where in the page it is placed, this may differ per page. ## References From 2161224d434e0302ca3c305e9d76021046b7e3b7 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Fri, 7 Jun 2024 11:29:48 +0200 Subject: [PATCH 09/13] Add descriptions to header props --- packages/react/src/FormErrorList/FormErrorList.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/react/src/FormErrorList/FormErrorList.tsx b/packages/react/src/FormErrorList/FormErrorList.tsx index 6e8a02820b..bbfb5200bd 100644 --- a/packages/react/src/FormErrorList/FormErrorList.tsx +++ b/packages/react/src/FormErrorList/FormErrorList.tsx @@ -11,8 +11,11 @@ import { HeadingLevel } from '../Heading/Heading' import { LinkList } from '../LinkList' export type FormErrorListProps = { + /** The list of error messages to display. */ errors: { id: string; label: string }[] + /** The text for the Heading. */ heading?: string + /** The hierarchical level of the Heading within the document. */ headingLevel?: HeadingLevel } & HTMLAttributes From de0d97803194ffabf4ae06bd3ddca7b766c9703a Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Fri, 7 Jun 2024 11:30:56 +0200 Subject: [PATCH 10/13] Extract and export FormError type --- packages/react/src/FormErrorList/FormErrorList.tsx | 7 ++++++- packages/react/src/FormErrorList/index.ts | 2 +- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/react/src/FormErrorList/FormErrorList.tsx b/packages/react/src/FormErrorList/FormErrorList.tsx index bbfb5200bd..84ba1fb9a1 100644 --- a/packages/react/src/FormErrorList/FormErrorList.tsx +++ b/packages/react/src/FormErrorList/FormErrorList.tsx @@ -10,9 +10,14 @@ import { Alert } from '../Alert' import { HeadingLevel } from '../Heading/Heading' import { LinkList } from '../LinkList' +export type FormError = { + id: string + label: string +} + export type FormErrorListProps = { /** The list of error messages to display. */ - errors: { id: string; label: string }[] + errors: FormError[] /** The text for the Heading. */ heading?: string /** The hierarchical level of the Heading within the document. */ diff --git a/packages/react/src/FormErrorList/index.ts b/packages/react/src/FormErrorList/index.ts index 864585f6c1..9f699d683f 100644 --- a/packages/react/src/FormErrorList/index.ts +++ b/packages/react/src/FormErrorList/index.ts @@ -1,2 +1,2 @@ export { FormErrorList } from './FormErrorList' -export type { FormErrorListProps } from './FormErrorList' +export type { FormError, FormErrorListProps } from './FormErrorList' From 9b5038a0b87591ed03163db972e96efde8e64679 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Fri, 7 Jun 2024 11:32:55 +0200 Subject: [PATCH 11/13] Make descriptions and imports consistent for heading and heading level --- packages/react/src/Alert/Alert.tsx | 6 +++--- packages/react/src/FormErrorList/FormErrorList.tsx | 2 +- packages/react/src/Heading/index.ts | 2 +- packages/react/src/TableOfContents/TableOfContents.tsx | 7 ++++--- 4 files changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/react/src/Alert/Alert.tsx b/packages/react/src/Alert/Alert.tsx index 5e87bb4b3e..e602a6e4e3 100644 --- a/packages/react/src/Alert/Alert.tsx +++ b/packages/react/src/Alert/Alert.tsx @@ -8,7 +8,7 @@ import clsx from 'clsx' import { forwardRef } from 'react' import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react' import { Heading } from '../Heading' -import type { HeadingProps } from '../Heading' +import type { HeadingLevel } from '../Heading' import { Icon } from '../Icon' import { IconButton } from '../IconButton' @@ -19,8 +19,8 @@ export type AlertProps = { closeButtonLabel?: string /** The text for the Heading. */ heading?: string - /** The hierarchical level of the Alert’s heading within the document. */ - headingLevel?: HeadingProps['level'] + /** The hierarchical level of the Heading within the document. */ + headingLevel?: HeadingLevel /** A function to run when dismissing. */ onClose?: () => void /** The significance of the message conveyed. */ diff --git a/packages/react/src/FormErrorList/FormErrorList.tsx b/packages/react/src/FormErrorList/FormErrorList.tsx index 84ba1fb9a1..edbf3a1021 100644 --- a/packages/react/src/FormErrorList/FormErrorList.tsx +++ b/packages/react/src/FormErrorList/FormErrorList.tsx @@ -7,7 +7,7 @@ import clsx from 'clsx' import { forwardRef } from 'react' import type { ForwardedRef, HTMLAttributes } from 'react' import { Alert } from '../Alert' -import { HeadingLevel } from '../Heading/Heading' +import type { HeadingLevel } from '../Heading' import { LinkList } from '../LinkList' export type FormError = { diff --git a/packages/react/src/Heading/index.ts b/packages/react/src/Heading/index.ts index 4c4d1020ec..0f3e45e47e 100644 --- a/packages/react/src/Heading/index.ts +++ b/packages/react/src/Heading/index.ts @@ -1,2 +1,2 @@ -export type { HeadingProps } from './Heading' export { Heading } from './Heading' +export type { HeadingLevel, HeadingProps } from './Heading' diff --git a/packages/react/src/TableOfContents/TableOfContents.tsx b/packages/react/src/TableOfContents/TableOfContents.tsx index 0ea362c1be..4f399567ff 100644 --- a/packages/react/src/TableOfContents/TableOfContents.tsx +++ b/packages/react/src/TableOfContents/TableOfContents.tsx @@ -8,13 +8,14 @@ import { forwardRef } from 'react' import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react' import { TableOfContentsLink } from './TableOfContentsLink' import { TableOfContentsList } from './TableOfContentsList' -import { Heading, type HeadingProps } from '../Heading' +import { Heading } from '../Heading' +import type { HeadingLevel } from '../Heading' export type TableOfContentsProps = { /** The text for the Heading. */ heading?: string - /** The hierarchical level of the Alert’s heading within the document. */ - headingLevel?: HeadingProps['level'] + /** The hierarchical level of the Heading within the document. */ + headingLevel?: HeadingLevel } & PropsWithChildren> const TableOfContentsRoot = forwardRef( From 9ec5da7ede5bb22a0460abc9b6bab4dc8139ddd1 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Fri, 7 Jun 2024 11:38:53 +0200 Subject: [PATCH 12/13] Clarify that heading level has no visual effect --- packages/react/src/Alert/Alert.tsx | 5 ++++- packages/react/src/FormErrorList/FormErrorList.tsx | 5 ++++- packages/react/src/TableOfContents/TableOfContents.tsx | 5 ++++- 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/packages/react/src/Alert/Alert.tsx b/packages/react/src/Alert/Alert.tsx index e602a6e4e3..7c476fe39d 100644 --- a/packages/react/src/Alert/Alert.tsx +++ b/packages/react/src/Alert/Alert.tsx @@ -19,7 +19,10 @@ export type AlertProps = { closeButtonLabel?: string /** The text for the Heading. */ heading?: string - /** The hierarchical level of the Heading within the document. */ + /** + * The hierarchical level of the Heading within the document. + * Note: this intentionally does not change the font size. + */ headingLevel?: HeadingLevel /** A function to run when dismissing. */ onClose?: () => void diff --git a/packages/react/src/FormErrorList/FormErrorList.tsx b/packages/react/src/FormErrorList/FormErrorList.tsx index edbf3a1021..ce29f292e4 100644 --- a/packages/react/src/FormErrorList/FormErrorList.tsx +++ b/packages/react/src/FormErrorList/FormErrorList.tsx @@ -20,7 +20,10 @@ export type FormErrorListProps = { errors: FormError[] /** The text for the Heading. */ heading?: string - /** The hierarchical level of the Heading within the document. */ + /** + * The hierarchical level of the Heading within the document. + * Note: this intentionally does not change the font size. + */ headingLevel?: HeadingLevel } & HTMLAttributes diff --git a/packages/react/src/TableOfContents/TableOfContents.tsx b/packages/react/src/TableOfContents/TableOfContents.tsx index 4f399567ff..db7c78c303 100644 --- a/packages/react/src/TableOfContents/TableOfContents.tsx +++ b/packages/react/src/TableOfContents/TableOfContents.tsx @@ -14,7 +14,10 @@ import type { HeadingLevel } from '../Heading' export type TableOfContentsProps = { /** The text for the Heading. */ heading?: string - /** The hierarchical level of the Heading within the document. */ + /** + * The hierarchical level of the Heading within the document. + * Note: this intentionally does not change the font size. + */ headingLevel?: HeadingLevel } & PropsWithChildren> From fe252cd755046b25858a347315821093b16b2e67 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Fri, 7 Jun 2024 11:49:27 +0200 Subject: [PATCH 13/13] Use changed Alert API --- packages/react/src/FormErrorList/FormErrorList.test.tsx | 4 ++-- packages/react/src/FormErrorList/FormErrorList.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react/src/FormErrorList/FormErrorList.test.tsx b/packages/react/src/FormErrorList/FormErrorList.test.tsx index 143d9faa6e..e1b16dd591 100644 --- a/packages/react/src/FormErrorList/FormErrorList.test.tsx +++ b/packages/react/src/FormErrorList/FormErrorList.test.tsx @@ -63,9 +63,9 @@ describe('Form error list', () => { }) it('renders a custom heading', () => { - render() + render() - const component = screen.getByRole('heading', { name: 'Testheading' }) + const component = screen.getByRole('heading', { name: 'Test heading' }) expect(component).toBeInTheDocument() }) diff --git a/packages/react/src/FormErrorList/FormErrorList.tsx b/packages/react/src/FormErrorList/FormErrorList.tsx index ce29f292e4..15dc5c3c8b 100644 --- a/packages/react/src/FormErrorList/FormErrorList.tsx +++ b/packages/react/src/FormErrorList/FormErrorList.tsx @@ -44,11 +44,11 @@ export const FormErrorList = forwardRef( {errors.map(({ id, label }) => (