diff --git a/.release-please-manifest.json b/.release-please-manifest.json index cd5d886d21..5953233f70 100644 --- a/.release-please-manifest.json +++ b/.release-please-manifest.json @@ -1,7 +1,7 @@ { - "packages/css": "0.8.0", - "packages/react": "0.8.0", - "proprietary/assets": "0.2.0", + "packages/css": "0.9.0", + "packages/react": "0.9.0", + "proprietary/assets": "0.2.1", "proprietary/react-icons": "0.1.12", - "proprietary/tokens": "0.8.0" + "proprietary/tokens": "0.9.0" } diff --git a/packages/css/CHANGELOG.md b/packages/css/CHANGELOG.md index 5638634812..feeae74924 100644 --- a/packages/css/CHANGELOG.md +++ b/packages/css/CHANGELOG.md @@ -3,6 +3,42 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.9.0](https://github.com/Amsterdam/design-system/compare/design-system-css-v0.8.0...design-system-css-v0.9.0) (2024-06-05) + + +### ⚠ BREAKING CHANGES + +* Disallow directional style rules ([#1245](https://github.com/Amsterdam/design-system/issues/1245)) +* Use invalid prop for most inputs ([#1240](https://github.com/Amsterdam/design-system/issues/1240)) +* Add invalid prop to Field Set and update Field and Field Set docs ([#1237](https://github.com/Amsterdam/design-system/issues/1237)) +* Allow additional background colours for Badge and remove dark blue option ([#1236](https://github.com/Amsterdam/design-system/issues/1236)) +* Rename Breadcrumb Item to Link ([#1232](https://github.com/Amsterdam/design-system/issues/1232)) +* Use logical properties for Search Field, Select, Text Area and Text Input ([#1226](https://github.com/Amsterdam/design-system/issues/1226)) +* Flatten token names for default text size and line height ([#1221](https://github.com/Amsterdam/design-system/issues/1221)) + +### Features + +* Add Error Message ([#1247](https://github.com/Amsterdam/design-system/issues/1247)) ([1dec2ea](https://github.com/Amsterdam/design-system/commit/1dec2ead41fba24e4128c2e1d60b72a7ccb29a92)) +* Add Field component ([#1228](https://github.com/Amsterdam/design-system/issues/1228)) ([66832aa](https://github.com/Amsterdam/design-system/commit/66832aaf14a209915b60498acecf90cecff27c23)) +* Add invalid prop to Field Set and update Field and Field Set docs ([#1237](https://github.com/Amsterdam/design-system/issues/1237)) ([d7316e8](https://github.com/Amsterdam/design-system/commit/d7316e81cd424f79f9bd655265d1c9b41296fecf)) +* Allow additional background colours for Badge and remove dark blue option ([#1236](https://github.com/Amsterdam/design-system/issues/1236)) ([eec669a](https://github.com/Amsterdam/design-system/commit/eec669ad79353fc205e12a35aa7d0a8297c72e41)) +* Allow installing only the React or CSS package ([#1206](https://github.com/Amsterdam/design-system/issues/1206)) ([963860d](https://github.com/Amsterdam/design-system/commit/963860d916d54ce3a0b191eb51a83cf3023ab88b)) +* Allow small text for ordered lists ([#1219](https://github.com/Amsterdam/design-system/issues/1219)) ([0e77bd6](https://github.com/Amsterdam/design-system/commit/0e77bd60d8f395417c3c736d8e51a3ca3729ece5)) +* Allow small text for unordered lists ([#1217](https://github.com/Amsterdam/design-system/issues/1217)) ([5012851](https://github.com/Amsterdam/design-system/commit/5012851492e50e50e2a651250622740e517fd22f)) +* File Input ([#1218](https://github.com/Amsterdam/design-system/issues/1218)) ([7b6ba98](https://github.com/Amsterdam/design-system/commit/7b6ba98530caaefafedada5b89a175ef0b1a8784)) +* Rename Breadcrumb Item to Link ([#1232](https://github.com/Amsterdam/design-system/issues/1232)) ([6cf2e5e](https://github.com/Amsterdam/design-system/commit/6cf2e5e51217900a24d739c4569c13237b9fb4ab)) +* Start-align Dialog buttons and place the primary button first ([#1143](https://github.com/Amsterdam/design-system/issues/1143)) ([fd668c1](https://github.com/Amsterdam/design-system/commit/fd668c15c5fce9cf28b66b811d2463ada7165f7f)) +* Use invalid prop for most inputs ([#1240](https://github.com/Amsterdam/design-system/issues/1240)) ([9477186](https://github.com/Amsterdam/design-system/commit/9477186b8432d6d20991e93d92c64a4357d6f391)) +* Use logical properties for Search Field, Select, Text Area and Text Input ([#1226](https://github.com/Amsterdam/design-system/issues/1226)) ([4471c7a](https://github.com/Amsterdam/design-system/commit/4471c7a154e9f1f31dd92298f932f4bbc134dbf9)) + + +### Bug Fixes + +* Disallow directional style rules ([#1245](https://github.com/Amsterdam/design-system/issues/1245)) ([8ab6f81](https://github.com/Amsterdam/design-system/commit/8ab6f81d4cbcdb75b7acb986a145d49ccd1895c8)) +* Fix issues with inputs on iOS ([#1241](https://github.com/Amsterdam/design-system/issues/1241)) ([dcd2f6e](https://github.com/Amsterdam/design-system/commit/dcd2f6e609699a5db6ee026d9d3024e13aff06c9)) +* Flatten token names for default text size and line height ([#1221](https://github.com/Amsterdam/design-system/issues/1221)) ([6eeaeb4](https://github.com/Amsterdam/design-system/commit/6eeaeb41fae90a2d455b4e41da3ff3a4561dcbe4)) +* Reset the lower placeholder opacity set by Firefox ([#1239](https://github.com/Amsterdam/design-system/issues/1239)) ([d2b371e](https://github.com/Amsterdam/design-system/commit/d2b371e02c385b2ee8371c9ca0c85ea5c0e706aa)) + ## [0.8.0](https://github.com/Amsterdam/design-system/compare/design-system-css-v0.7.1...design-system-css-v0.8.0) (2024-04-22) diff --git a/packages/css/package.json b/packages/css/package.json index c010bde735..b8182a8304 100644 --- a/packages/css/package.json +++ b/packages/css/package.json @@ -1,5 +1,5 @@ { - "version": "0.8.0", + "version": "0.9.0", "author": "Community for NL Design System", "description": "CSS files for components for the City of Amsterdam based on the NL Design System architecture", "license": "EUPL-1.2", diff --git a/packages/css/src/components/error-message/README.md b/packages/css/src/components/error-message/README.md new file mode 100644 index 0000000000..779ef3cd4e --- /dev/null +++ b/packages/css/src/components/error-message/README.md @@ -0,0 +1,11 @@ + + +# Error Message + +Show an error message when there is a form field validation error. +In the error message explain what went wrong and how to fix it. + +For guidance and examples on using error messages in a form, +refer to the [Field](/docs/components-forms-field--docs) and [Field Set](/docs/components-forms-field-set--docs) documentation. + +Read the documentation by [NL Design System](https://www.nldesignsystem.nl/richtlijnen/formulieren/foutmeldingen) and [Gov.uk](https://design-system.service.gov.uk/components/error-message/) for more information on the contents of error messages and when to show them. diff --git a/packages/css/src/components/error-message/error-message.scss b/packages/css/src/components/error-message/error-message.scss new file mode 100644 index 0000000000..4dd6e3fd19 --- /dev/null +++ b/packages/css/src/components/error-message/error-message.scss @@ -0,0 +1,22 @@ +/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */ + +@import "../../common/text-rendering"; + +@mixin reset { + box-sizing: border-box; + margin-block: 0; +} + +.ams-error-message { + color: var(--ams-error-message-color); + font-family: var(--ams-error-message-font-family); + font-size: var(--ams-error-message-font-size); + font-weight: var(--ams-error-message-font-weight); + line-height: var(--ams-error-message-line-height); + + @include text-rendering; + @include reset; +} diff --git a/packages/css/src/components/index.scss b/packages/css/src/components/index.scss index 5f7cf2d09a..2f7c417b1a 100644 --- a/packages/css/src/components/index.scss +++ b/packages/css/src/components/index.scss @@ -4,6 +4,8 @@ */ /* Append here */ +@import "./table-of-contents/table-of-contents"; +@import "./error-message/error-message"; @import "./file-input/file-input"; @import "./field/field"; @import "./select/select"; diff --git a/packages/css/src/components/table-of-contents/README.md b/packages/css/src/components/table-of-contents/README.md new file mode 100644 index 0000000000..2dd8ee8d16 --- /dev/null +++ b/packages/css/src/components/table-of-contents/README.md @@ -0,0 +1,6 @@ + + +# Table of Contents + +A list of links corresponding to the content sections on the page. +It helps users to easily navigate to different sections on the same page. diff --git a/packages/css/src/components/table-of-contents/table-of-contents.scss b/packages/css/src/components/table-of-contents/table-of-contents.scss new file mode 100644 index 0000000000..3875892f9a --- /dev/null +++ b/packages/css/src/components/table-of-contents/table-of-contents.scss @@ -0,0 +1,50 @@ +/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */ + +@import "../../common/text-rendering"; + +@mixin reset { + box-sizing: border-box; + margin-block: 0; + padding-inline: 0; +} + +.ams-table-of-contents { + display: flex; + flex-direction: column; + font-family: var(--ams-table-of-contents-font-family); + font-size: var(--ams-table-of-contents-font-size); + font-weight: var(--ams-table-of-contents-font-weight); + gap: var(--ams-table-of-contents-gap); + line-height: var(--ams-table-of-contents-line-height); +} + +.ams-table-of-contents__list { + display: flex; + flex-direction: column; + gap: var(--ams-table-of-contents-list-gap); + list-style: none; + + @include text-rendering; + @include reset; + + .ams-table-of-contents__list { + padding-block-start: var(--ams-table-of-contents-list-list-padding-block-start); + padding-inline-start: var(--ams-table-of-contents-list-list-padding-inline-start); + } +} + +.ams-table-of-contents__link { + color: var(--ams-table-of-contents-link-color); + outline-offset: var(--ams-table-of-contents-link-outline-offset); + text-decoration-line: var(--ams-table-of-contents-link-text-decoration-line); + text-decoration-thickness: var(--ams-table-of-contents-link-text-decoration-thickness); + text-underline-offset: var(--ams-table-of-contents-link-text-underline-offset); + + &:hover { + color: var(--ams-table-of-contents-link-hover-color); + text-decoration-line: var(--ams-table-of-contents-link-hover-text-decoration-line); + } +} diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index c4c03be67a..94d0ff9459 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -3,6 +3,34 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.9.0](https://github.com/Amsterdam/design-system/compare/design-system-react-v0.8.0...design-system-react-v0.9.0) (2024-06-05) + + +### ⚠ BREAKING CHANGES + +* Change Accordion `section` boolean prop to `sectionAs` enum ([#1244](https://github.com/Amsterdam/design-system/issues/1244)) +* Use invalid prop for most inputs ([#1240](https://github.com/Amsterdam/design-system/issues/1240)) +* Add invalid prop to Field Set and update Field and Field Set docs ([#1237](https://github.com/Amsterdam/design-system/issues/1237)) +* Allow additional background colours for Badge and remove dark blue option ([#1236](https://github.com/Amsterdam/design-system/issues/1236)) +* Rename Breadcrumb Item to Link ([#1232](https://github.com/Amsterdam/design-system/issues/1232)) + +### Features + +* Add Error Message ([#1247](https://github.com/Amsterdam/design-system/issues/1247)) ([1dec2ea](https://github.com/Amsterdam/design-system/commit/1dec2ead41fba24e4128c2e1d60b72a7ccb29a92)) +* Add Field component ([#1228](https://github.com/Amsterdam/design-system/issues/1228)) ([66832aa](https://github.com/Amsterdam/design-system/commit/66832aaf14a209915b60498acecf90cecff27c23)) +* Add invalid prop to Field Set and update Field and Field Set docs ([#1237](https://github.com/Amsterdam/design-system/issues/1237)) ([d7316e8](https://github.com/Amsterdam/design-system/commit/d7316e81cd424f79f9bd655265d1c9b41296fecf)) +* Allow additional background colours for Badge and remove dark blue option ([#1236](https://github.com/Amsterdam/design-system/issues/1236)) ([eec669a](https://github.com/Amsterdam/design-system/commit/eec669ad79353fc205e12a35aa7d0a8297c72e41)) +* Allow installing only the React or CSS package ([#1206](https://github.com/Amsterdam/design-system/issues/1206)) ([963860d](https://github.com/Amsterdam/design-system/commit/963860d916d54ce3a0b191eb51a83cf3023ab88b)) +* Allow overriding button labels in Alert, Dialog, Pagination, and Search Field ([#1220](https://github.com/Amsterdam/design-system/issues/1220)) ([c88e569](https://github.com/Amsterdam/design-system/commit/c88e569acd2dd56b37b24ad57e21fc47254d0aaf)) +* Allow small text for ordered lists ([#1219](https://github.com/Amsterdam/design-system/issues/1219)) ([0e77bd6](https://github.com/Amsterdam/design-system/commit/0e77bd60d8f395417c3c736d8e51a3ca3729ece5)) +* Allow small text for unordered lists ([#1217](https://github.com/Amsterdam/design-system/issues/1217)) ([5012851](https://github.com/Amsterdam/design-system/commit/5012851492e50e50e2a651250622740e517fd22f)) +* Change Accordion `section` boolean prop to `sectionAs` enum ([#1244](https://github.com/Amsterdam/design-system/issues/1244)) ([fef3fb1](https://github.com/Amsterdam/design-system/commit/fef3fb1b4d3cb53d2f9d6478225621423d97ad03)) +* File Input ([#1218](https://github.com/Amsterdam/design-system/issues/1218)) ([7b6ba98](https://github.com/Amsterdam/design-system/commit/7b6ba98530caaefafedada5b89a175ef0b1a8784)) +* **internal:** Indicate beta status for some components, patterns, and assets ([#1242](https://github.com/Amsterdam/design-system/issues/1242)) ([358f40a](https://github.com/Amsterdam/design-system/commit/358f40a9159eb6da3bf5ca053044143491dda12b)) +* Rename Breadcrumb Item to Link ([#1232](https://github.com/Amsterdam/design-system/issues/1232)) ([6cf2e5e](https://github.com/Amsterdam/design-system/commit/6cf2e5e51217900a24d739c4569c13237b9fb4ab)) +* Set dir auto by default for text input form fields ([#1238](https://github.com/Amsterdam/design-system/issues/1238)) ([b588d10](https://github.com/Amsterdam/design-system/commit/b588d104095365bcadff4f34f7db53e247afc873)) +* Use invalid prop for most inputs ([#1240](https://github.com/Amsterdam/design-system/issues/1240)) ([9477186](https://github.com/Amsterdam/design-system/commit/9477186b8432d6d20991e93d92c64a4357d6f391)) + ## [0.8.0](https://github.com/Amsterdam/design-system/compare/design-system-react-v0.7.1...design-system-react-v0.8.0) (2024-04-22) diff --git a/packages/react/package.json b/packages/react/package.json index 0965dc83f4..5f783a90f1 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,5 +1,5 @@ { - "version": "0.8.0", + "version": "0.9.0", "author": "Community for NL Design System", "description": "React component library bundle for the City of Amsterdam based on the NL Design System architecture", "license": "EUPL-1.2", diff --git a/packages/react/src/ErrorMessage/ErrorMessage.test.tsx b/packages/react/src/ErrorMessage/ErrorMessage.test.tsx new file mode 100644 index 0000000000..4026873e78 --- /dev/null +++ b/packages/react/src/ErrorMessage/ErrorMessage.test.tsx @@ -0,0 +1,51 @@ +import { render, screen } from '@testing-library/react' +import { createRef } from 'react' +import { ErrorMessage } from './ErrorMessage' +import '@testing-library/jest-dom' + +describe('Error message', () => { + it('renders', () => { + render() + const component = screen.getByRole('paragraph') + + expect(component).toBeInTheDocument() + expect(component).toBeVisible() + }) + + it('renders a design system BEM class name', () => { + render() + const component = screen.getByRole('paragraph') + + expect(component).toHaveClass('ams-error-message') + }) + + it('renders an additional class name', () => { + render() + const component = screen.getByRole('paragraph') + + expect(component).toHaveClass('ams-error-message extra') + }) + + it('renders a Dutch prefix by default', () => { + render() + const component = screen.getByText('Invoerfout', { exact: false }) + + expect(component).toBeInTheDocument() + }) + + it('renders a custom prefix', () => { + render() + const component = screen.getByText('Error', { exact: false }) + + expect(component).toBeInTheDocument() + }) + + it('supports ForwardRef in React', () => { + const ref = createRef() + + render() + const component = screen.getByRole('paragraph') + + expect(ref.current).toBe(component) + }) +}) diff --git a/packages/react/src/ErrorMessage/ErrorMessage.tsx b/packages/react/src/ErrorMessage/ErrorMessage.tsx new file mode 100644 index 0000000000..ce9b2e1c0a --- /dev/null +++ b/packages/react/src/ErrorMessage/ErrorMessage.tsx @@ -0,0 +1,31 @@ +/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */ + +import clsx from 'clsx' +import { forwardRef } from 'react' +import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react' +import { VisuallyHidden } from '../VisuallyHidden' + +export type ErrorMessageProps = { + /** An accessible phrase that screen readers announce before the error message. Should translate to something like ‘input error’. */ + prefix?: string +} & PropsWithChildren> + +export const ErrorMessage = forwardRef( + ( + { children, className, prefix = 'Invoerfout', ...restProps }: ErrorMessageProps, + ref: ForwardedRef, + ) => ( +

+ + {prefix} + {': '} + + {children} +

+ ), +) + +ErrorMessage.displayName = 'ErrorMessage' diff --git a/packages/react/src/ErrorMessage/README.md b/packages/react/src/ErrorMessage/README.md new file mode 100644 index 0000000000..b7a1e98d1a --- /dev/null +++ b/packages/react/src/ErrorMessage/README.md @@ -0,0 +1,5 @@ + + +# React Error Message component + +[Error Message documentation](../../../css/src/components/error-message/README.md) diff --git a/packages/react/src/ErrorMessage/index.ts b/packages/react/src/ErrorMessage/index.ts new file mode 100644 index 0000000000..50e3b5c5c3 --- /dev/null +++ b/packages/react/src/ErrorMessage/index.ts @@ -0,0 +1,2 @@ +export { ErrorMessage } from './ErrorMessage' +export type { ErrorMessageProps } from './ErrorMessage' diff --git a/packages/react/src/TableOfContents/README.md b/packages/react/src/TableOfContents/README.md new file mode 100644 index 0000000000..6edaf03ab9 --- /dev/null +++ b/packages/react/src/TableOfContents/README.md @@ -0,0 +1,5 @@ + + +# React Table of Contents component + +[Table of Contents documentation](../../../css/src/components/table-of-contents/README.md) diff --git a/packages/react/src/TableOfContents/TableOfContents.test.tsx b/packages/react/src/TableOfContents/TableOfContents.test.tsx new file mode 100644 index 0000000000..1ddae1b4ad --- /dev/null +++ b/packages/react/src/TableOfContents/TableOfContents.test.tsx @@ -0,0 +1,57 @@ +import { render, screen } from '@testing-library/react' +import { createRef } from 'react' +import { TableOfContents } from './TableOfContents' +import '@testing-library/jest-dom' + +describe('Table of contents', () => { + it('renders', () => { + const { container } = render() + const component = container.querySelector(':only-child') + + expect(component).toBeInTheDocument() + expect(component).toBeVisible() + }) + + it('renders its children', () => { + render( + + + , + ) + + const testChild = screen.getByRole('list') + + expect(testChild).toBeTruthy() + }) + + it('renders a heading', () => { + render() + + const heading = screen.getByRole('heading') + + expect(heading).toBeInTheDocument() + expect(heading).toHaveTextContent('Test heading') + }) + + it('renders a design system BEM class name', () => { + const { container } = render() + const component = container.querySelector(':only-child') + + expect(component).toHaveClass('ams-table-of-contents') + }) + + it('renders an additional class name', () => { + const { container } = render() + const component = container.querySelector(':only-child') + + expect(component).toHaveClass('ams-table-of-contents extra') + }) + + it('supports ForwardRef in React', () => { + const ref = createRef() + const { container } = render() + const component = container.querySelector(':only-child') + + expect(ref.current).toBe(component) + }) +}) diff --git a/packages/react/src/TableOfContents/TableOfContents.tsx b/packages/react/src/TableOfContents/TableOfContents.tsx new file mode 100644 index 0000000000..0ea362c1be --- /dev/null +++ b/packages/react/src/TableOfContents/TableOfContents.tsx @@ -0,0 +1,43 @@ +/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */ + +import clsx from 'clsx' +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' + +export type TableOfContentsProps = { + /** The text for the Heading. */ + heading?: string + /** The hierarchical level of the Alert’s heading within the document. */ + headingLevel?: HeadingProps['level'] +} & PropsWithChildren> + +const TableOfContentsRoot = forwardRef( + ( + { children, className, heading, headingLevel = 2, ...restProps }: TableOfContentsProps, + ref: ForwardedRef, + ) => { + return ( + + ) + }, +) + +TableOfContentsRoot.displayName = 'TableOfContents' + +export const TableOfContents = Object.assign(TableOfContentsRoot, { + Link: TableOfContentsLink, + List: TableOfContentsList, +}) diff --git a/packages/react/src/TableOfContents/TableOfContentsLink.test.tsx b/packages/react/src/TableOfContents/TableOfContentsLink.test.tsx new file mode 100644 index 0000000000..5b30cfb4b5 --- /dev/null +++ b/packages/react/src/TableOfContents/TableOfContentsLink.test.tsx @@ -0,0 +1,42 @@ +import '@testing-library/jest-dom' +import { render, screen } from '@testing-library/react' +import { createRef } from 'react' +import { TableOfContents } from './TableOfContents' + +describe('Table of Contents link', () => { + it('renders', () => { + render() + + const link = screen.getByRole('link') + + expect(link).toBeInTheDocument() + expect(link).toBeVisible() + expect(link).toHaveTextContent('Test') + }) + + it('renders a design system BEM class name', () => { + render() + + const component = screen.getByRole('link') + + expect(component).toHaveClass('ams-table-of-contents__link') + }) + + it('renders an additional class name', () => { + render() + + const component = screen.getByRole('link') + + expect(component).toHaveClass('ams-table-of-contents__link extra') + }) + + it('supports ForwardRef in React', () => { + const ref = createRef() + + render() + + const component = screen.getByRole('link') + + expect(ref.current).toBe(component) + }) +}) diff --git a/packages/react/src/TableOfContents/TableOfContentsLink.tsx b/packages/react/src/TableOfContents/TableOfContentsLink.tsx new file mode 100644 index 0000000000..c78d763874 --- /dev/null +++ b/packages/react/src/TableOfContents/TableOfContentsLink.tsx @@ -0,0 +1,26 @@ +/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */ + +import { clsx } from 'clsx' +import { forwardRef } from 'react' +import type { AnchorHTMLAttributes, ForwardedRef } from 'react' + +export type TableOfContentsLinkProps = { + /** The text for the link. */ + label: string +} & AnchorHTMLAttributes + +export const TableOfContentsLink = forwardRef( + ({ children, className, label, ...restProps }: TableOfContentsLinkProps, ref: ForwardedRef) => ( +
  • + + {label} + + {children} +
    • + ), +) + +TableOfContentsLink.displayName = 'TableOfContents.Link' diff --git a/packages/react/src/TableOfContents/TableOfContentsList.test.tsx b/packages/react/src/TableOfContents/TableOfContentsList.test.tsx new file mode 100644 index 0000000000..075746b7c0 --- /dev/null +++ b/packages/react/src/TableOfContents/TableOfContentsList.test.tsx @@ -0,0 +1,57 @@ +import { render, screen } from '@testing-library/react' +import { createRef } from 'react' +import { TableOfContents } from './TableOfContents' +import '@testing-library/jest-dom' + +describe('Table of Contents list', () => { + it('renders an HTML ul element', () => { + const { container } = render() + const list = container.querySelector('ul:only-child') + + expect(list).toBeInTheDocument() + }) + + it('renders a design system BEM class name', () => { + render() + + const component = screen.getByRole('list') + + expect(component).toHaveClass('ams-table-of-contents__list') + }) + + it('renders an additional class name', () => { + render() + + const component = screen.getByRole('list') + + expect(component).toHaveClass('ams-table-of-contents__list extra') + }) + + it('renders its subcomponent', () => { + const listItems = ['Item 1', 'Item 2', 'Item 3'] + + const { container } = render( + + {listItems.map((item, index) => ( + + ))} + , + ) + + const list = screen.getByRole('list') + const items = container.querySelectorAll('.ams-table-of-contents__item') + + expect(list).toBeInTheDocument() + expect(items.length).toBe(3) + }) + + it('supports ForwardRef in React', () => { + const ref = createRef() + + render() + + const component = screen.getByRole('list') + + expect(ref.current).toBe(component) + }) +}) diff --git a/packages/react/src/TableOfContents/TableOfContentsList.tsx b/packages/react/src/TableOfContents/TableOfContentsList.tsx new file mode 100644 index 0000000000..b00b5d31d7 --- /dev/null +++ b/packages/react/src/TableOfContents/TableOfContentsList.tsx @@ -0,0 +1,22 @@ +/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */ + +import clsx from 'clsx' +import { forwardRef } from 'react' +import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react' + +export type TableOfContentsListProps = PropsWithChildren> + +export const TableOfContentsList = forwardRef( + ({ children, className, ...restProps }: TableOfContentsListProps, ref: ForwardedRef) => { + return ( +
      + {children} +
    + ) + }, +) + +TableOfContentsList.displayName = 'TableOfContents.List' diff --git a/packages/react/src/TableOfContents/index.ts b/packages/react/src/TableOfContents/index.ts new file mode 100644 index 0000000000..923942b9e9 --- /dev/null +++ b/packages/react/src/TableOfContents/index.ts @@ -0,0 +1,4 @@ +export { TableOfContents } from './TableOfContents' +export type { TableOfContentsProps } from './TableOfContents' +export type { TableOfContentsLinkProps } from './TableOfContentsLink' +export type { TableOfContentsListProps } from './TableOfContentsList' diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 129ed0b182..cf6e5be48c 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -5,6 +5,8 @@ /* Append here */ export * from './FormErrorList' +export * from './TableOfContents' +export * from './ErrorMessage' export * from './FileInput' export * from './Field' export * from './Select' diff --git a/proprietary/assets/CHANGELOG.md b/proprietary/assets/CHANGELOG.md index 490c62f0d3..02e05646f6 100644 --- a/proprietary/assets/CHANGELOG.md +++ b/proprietary/assets/CHANGELOG.md @@ -3,6 +3,13 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.2.1](https://github.com/Amsterdam/design-system/compare/design-system-assets-v0.2.0...design-system-assets-v0.2.1) (2024-06-05) + + +### Features + +* favicon, app icons and optional Web Manifest ([#1205](https://github.com/Amsterdam/design-system/issues/1205)) ([5513961](https://github.com/Amsterdam/design-system/commit/55139617966514207402f791a5b4e9778d059946)) + ## [0.2.0](https://github.com/Amsterdam/design-system/compare/design-system-assets-v0.1.8...design-system-assets-v0.2.0) (2024-03-12) diff --git a/proprietary/assets/package.json b/proprietary/assets/package.json index cfe1ef3c46..a89be55d33 100644 --- a/proprietary/assets/package.json +++ b/proprietary/assets/package.json @@ -1,5 +1,5 @@ { - "version": "0.2.0", + "version": "0.2.1", "author": "Community for NL Design System", "description": "Assets for the City of Amsterdam", "license": "SEE LICENSE IN LICENSE.md", diff --git a/proprietary/tokens/CHANGELOG.md b/proprietary/tokens/CHANGELOG.md index 68776379b9..56fbf6211c 100644 --- a/proprietary/tokens/CHANGELOG.md +++ b/proprietary/tokens/CHANGELOG.md @@ -3,6 +3,38 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.9.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.8.0...design-system-tokens-v0.9.0) (2024-06-05) + + +### ⚠ BREAKING CHANGES + +* Disallow directional style rules ([#1245](https://github.com/Amsterdam/design-system/issues/1245)) +* Use invalid prop for most inputs ([#1240](https://github.com/Amsterdam/design-system/issues/1240)) +* Add invalid prop to Field Set and update Field and Field Set docs ([#1237](https://github.com/Amsterdam/design-system/issues/1237)) +* Allow additional background colours for Badge and remove dark blue option ([#1236](https://github.com/Amsterdam/design-system/issues/1236)) +* Rename Breadcrumb Item to Link ([#1232](https://github.com/Amsterdam/design-system/issues/1232)) +* Use logical properties for Search Field, Select, Text Area and Text Input ([#1226](https://github.com/Amsterdam/design-system/issues/1226)) +* Flatten token names for default text size and line height ([#1221](https://github.com/Amsterdam/design-system/issues/1221)) + +### Features + +* Add Error Message ([#1247](https://github.com/Amsterdam/design-system/issues/1247)) ([1dec2ea](https://github.com/Amsterdam/design-system/commit/1dec2ead41fba24e4128c2e1d60b72a7ccb29a92)) +* Add Field component ([#1228](https://github.com/Amsterdam/design-system/issues/1228)) ([66832aa](https://github.com/Amsterdam/design-system/commit/66832aaf14a209915b60498acecf90cecff27c23)) +* Add invalid prop to Field Set and update Field and Field Set docs ([#1237](https://github.com/Amsterdam/design-system/issues/1237)) ([d7316e8](https://github.com/Amsterdam/design-system/commit/d7316e81cd424f79f9bd655265d1c9b41296fecf)) +* Allow additional background colours for Badge and remove dark blue option ([#1236](https://github.com/Amsterdam/design-system/issues/1236)) ([eec669a](https://github.com/Amsterdam/design-system/commit/eec669ad79353fc205e12a35aa7d0a8297c72e41)) +* Allow small text for ordered lists ([#1219](https://github.com/Amsterdam/design-system/issues/1219)) ([0e77bd6](https://github.com/Amsterdam/design-system/commit/0e77bd60d8f395417c3c736d8e51a3ca3729ece5)) +* Allow small text for unordered lists ([#1217](https://github.com/Amsterdam/design-system/issues/1217)) ([5012851](https://github.com/Amsterdam/design-system/commit/5012851492e50e50e2a651250622740e517fd22f)) +* File Input ([#1218](https://github.com/Amsterdam/design-system/issues/1218)) ([7b6ba98](https://github.com/Amsterdam/design-system/commit/7b6ba98530caaefafedada5b89a175ef0b1a8784)) +* Rename Breadcrumb Item to Link ([#1232](https://github.com/Amsterdam/design-system/issues/1232)) ([6cf2e5e](https://github.com/Amsterdam/design-system/commit/6cf2e5e51217900a24d739c4569c13237b9fb4ab)) +* Use invalid prop for most inputs ([#1240](https://github.com/Amsterdam/design-system/issues/1240)) ([9477186](https://github.com/Amsterdam/design-system/commit/9477186b8432d6d20991e93d92c64a4357d6f391)) +* Use logical properties for Search Field, Select, Text Area and Text Input ([#1226](https://github.com/Amsterdam/design-system/issues/1226)) ([4471c7a](https://github.com/Amsterdam/design-system/commit/4471c7a154e9f1f31dd92298f932f4bbc134dbf9)) + + +### Bug Fixes + +* Disallow directional style rules ([#1245](https://github.com/Amsterdam/design-system/issues/1245)) ([8ab6f81](https://github.com/Amsterdam/design-system/commit/8ab6f81d4cbcdb75b7acb986a145d49ccd1895c8)) +* Flatten token names for default text size and line height ([#1221](https://github.com/Amsterdam/design-system/issues/1221)) ([6eeaeb4](https://github.com/Amsterdam/design-system/commit/6eeaeb41fae90a2d455b4e41da3ff3a4561dcbe4)) + ## [0.8.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.7.1...design-system-tokens-v0.8.0) (2024-04-22) diff --git a/proprietary/tokens/package.json b/proprietary/tokens/package.json index 72cfc07c26..0fff7794bb 100644 --- a/proprietary/tokens/package.json +++ b/proprietary/tokens/package.json @@ -1,5 +1,5 @@ { - "version": "0.8.0", + "version": "0.9.0", "author": "Community for NL Design System", "description": "Design tokens for components for the City of Amsterdam based on the NL Design System architecture", "license": "SEE LICENSE IN LICENSE.md", diff --git a/proprietary/tokens/src/components/ams/error-message.tokens.json b/proprietary/tokens/src/components/ams/error-message.tokens.json new file mode 100644 index 0000000000..a742de7279 --- /dev/null +++ b/proprietary/tokens/src/components/ams/error-message.tokens.json @@ -0,0 +1,11 @@ +{ + "ams": { + "error-message": { + "color": { "value": "{ams.color.primary-red}" }, + "font-family": { "value": "{ams.text.font-family}" }, + "font-size": { "value": "{ams.text.level.6.font-size}" }, + "font-weight": { "value": "{ams.text.font-weight.normal}" }, + "line-height": { "value": "{ams.text.level.6.line-height}" } + } + } +} diff --git a/proprietary/tokens/src/components/ams/table-of-contents.tokens.json b/proprietary/tokens/src/components/ams/table-of-contents.tokens.json new file mode 100644 index 0000000000..9329766bb0 --- /dev/null +++ b/proprietary/tokens/src/components/ams/table-of-contents.tokens.json @@ -0,0 +1,34 @@ +{ + "ams": { + "table-of-contents": { + "font-family": { "value": "{ams.text.font-family}" }, + "font-size": { "value": "{ams.text.level.5.font-size}" }, + "font-weight": { "value": "{ams.text.font-weight.normal}" }, + "gap": { "value": "{ams.space.inside.md}" }, + "line-height": { "value": "{ams.text.level.5.line-height}" }, + "link": { + "color": { "value": "{ams.link-appearance.color}" }, + "outline-offset": { "value": "{ams.focus.outline-offset}" }, + "text-decoration-line": { "value": "{ams.link-appearance.subtle.text-decoration-line}" }, + "text-decoration-thickness": { "value": "{ams.link-appearance.text-decoration-thickness}" }, + "text-underline-offset": { "value": "{ams.link-appearance.text-underline-offset}" }, + "hover": { + "color": { "value": "{ams.link-appearance.hover.color}" }, + "text-decoration-line": { "value": "{ams.link-appearance.subtle.hover.text-decoration-line}" } + } + }, + "list": { + "gap": { "value": "{ams.space.inside.md}" }, + "list": { + "padding-block-start": { "value": "{ams.space.inside.md}" }, + "padding-inline-start": { "value": "{ams.space.inside.lg}" } + } + }, + "heading": { + "font-weight": { "value": "{ams.text.font-weight.bold}" }, + "font-size": { "value": "{ams.text.level.4.font-size}" }, + "line-height": { "value": "{ams.text.level.4.line-height}" } + } + } + } +} diff --git a/storybook/src/components/ErrorMessage/ErrorMessage.docs.mdx b/storybook/src/components/ErrorMessage/ErrorMessage.docs.mdx new file mode 100644 index 0000000000..74fae9a038 --- /dev/null +++ b/storybook/src/components/ErrorMessage/ErrorMessage.docs.mdx @@ -0,0 +1,19 @@ +import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; +import * as ErrorMessageStories from "./ErrorMessage.stories.tsx"; +import README from "../../../../packages/css/src/components/error-message/README.md?raw"; + + + +{README} + + + + + +## With a custom prefix + +Error messages are automatically prefixed with a visually hidden text, the Dutch word "Invoerfout". +This makes the error message more clear for screen reader users. +If you want to change this prefix, to support another language for example, you can use the `prefix` prop. + + diff --git a/storybook/src/components/ErrorMessage/ErrorMessage.stories.tsx b/storybook/src/components/ErrorMessage/ErrorMessage.stories.tsx new file mode 100644 index 0000000000..8e6c3e4312 --- /dev/null +++ b/storybook/src/components/ErrorMessage/ErrorMessage.stories.tsx @@ -0,0 +1,33 @@ +/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */ + +import { ErrorMessage } from '@amsterdam/design-system-react/src' +import { Meta, StoryObj } from '@storybook/react' + +const meta = { + title: 'Components/Forms/Error Message', + component: ErrorMessage, + args: { + children: 'Vul een geldig e-mailadres in, bijvoorbeeld naam@voorbeeld.nl.', + }, + argTypes: { + children: { + table: { disable: false }, + }, + }, +} satisfies Meta + +export default meta + +type Story = StoryObj + +export const Default: Story = {} + +export const WithCustomPrefix: Story = { + args: { + children: 'Enter an email address in the correct format, like name@example.com', + prefix: 'Error', + }, +} diff --git a/storybook/src/components/Field/Field.docs.mdx b/storybook/src/components/Field/Field.docs.mdx index c2283e9caf..4a0eb86187 100644 --- a/storybook/src/components/Field/Field.docs.mdx +++ b/storybook/src/components/Field/Field.docs.mdx @@ -14,7 +14,7 @@ import README from "../../../../packages/css/src/components/field/README.md?raw" A Field can have a description. Make sure to connect this description to the input in the Field, -otherwise this won’t be read by a screen reader. +otherwise it won’t be read by a screen reader. Add an `aria-describedby` attribute to the input and provide the `id` of the describing element as its value. @@ -22,5 +22,9 @@ Add an `aria-describedby` attribute to the input and provide the `id` of the des ## With Error A Field can indicate if the contained input has a validation error. +Use Error Message to describe the error. +Make sure to connect the error message to the input in the Field, +otherwise it won’t be read by a screen reader. +Add an `aria-describedby` attribute to the input and provide the `id` of Error Message as its value. diff --git a/storybook/src/components/Field/Field.stories.tsx b/storybook/src/components/Field/Field.stories.tsx index c1559c47a3..e542c88ea8 100644 --- a/storybook/src/components/Field/Field.stories.tsx +++ b/storybook/src/components/Field/Field.stories.tsx @@ -3,8 +3,8 @@ * Copyright Gemeente Amsterdam */ -import { TextInput } from '@amsterdam/design-system-react' -import { Field, Label, Paragraph } from '@amsterdam/design-system-react/src' +import { ErrorMessage, Label, TextInput } from '@amsterdam/design-system-react' +import { Field, Paragraph } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' const meta = { @@ -48,7 +48,8 @@ export const WithError: Story = { Typ geen persoonsgegevens in deze omschrijving. We vragen dit later in dit formulier aan u. - + Geef aan waar het om gaat. + ), } diff --git a/storybook/src/components/FieldSet/FieldSet.docs.mdx b/storybook/src/components/FieldSet/FieldSet.docs.mdx index 4214143dec..506cab411d 100644 --- a/storybook/src/components/FieldSet/FieldSet.docs.mdx +++ b/storybook/src/components/FieldSet/FieldSet.docs.mdx @@ -25,6 +25,10 @@ and provide the `id` of the describing element as its value. ## With Error A Field Set can indicate whether any of the inputs it contains has a validation error. +Use Error Message to describe the error. +Make sure to connect the error message to the correct input in the Field Set, +otherwise it won’t be read by a screen reader. +Add an `aria-describedby` attribute to the input and provide the `id` of Error Message as its value. @@ -32,12 +36,19 @@ A Field Set can indicate whether any of the inputs it contains has a validation Use a Field Set to group radio buttons. When grouping radio inputs, use `role="radiogroup"` on Field Set to have this grouping explicitly announced as a radio group (the default role is `group`). - Using `role="radiogroup"` also allows you to use `aria-required` on Field Set, which isn’t allowed for role `group`. Always also set `aria-required` on the individual radio buttons though, to make sure it’s read by screen readers. +### Radio group with error + +A Field Set with a radio button group can also have a validation error. +In this case, connect the error message to the Field Set instead of an input. +Add an `aria-describedby` attribute to the Field Set and provide the `id` of Error Message as its value. + + + ### Checkbox group Use a Field Set to group checkboxes. @@ -48,3 +59,9 @@ not report a description connected to a Field Set when it contains checkboxes. Try to avoid using descriptions for Field Sets containing checkboxes for this reason. + +### Checkbox group with error + +Because of [the NVDA bug mentioned earlier](https://github.com/nvaccess/nvda/issues/12718), +we currently do not have a reliable way to report error messages for checkbox groups with a validation error. +We are working on adding this as soon as possible. diff --git a/storybook/src/components/FieldSet/FieldSet.stories.tsx b/storybook/src/components/FieldSet/FieldSet.stories.tsx index 501d5c56bd..1aed9b47b9 100644 --- a/storybook/src/components/FieldSet/FieldSet.stories.tsx +++ b/storybook/src/components/FieldSet/FieldSet.stories.tsx @@ -3,7 +3,16 @@ * Copyright Gemeente Amsterdam */ -import { Checkbox, Column, FieldSet, Label, Paragraph, Radio, TextInput } from '@amsterdam/design-system-react/src' +import { + Checkbox, + Column, + ErrorMessage, + FieldSet, + Label, + Paragraph, + Radio, + TextInput, +} from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' const meta = { @@ -64,9 +73,11 @@ export const WithError: Story = { - + {args.invalid && Vul uw voornaam in.} + - + {args.invalid && Vul uw achternaam in.} + ), @@ -105,6 +116,45 @@ export const RadioGroup: Story = { ), } +export const RadioGroupWithError: Story = { + args: { + legend: 'Waar gaat uw melding over?', + invalid: true, + }, + render: (args) => ( +
    + + De laatstgenoemde melding. + + {args.invalid && ( + + Geef aan waar uw laatstgenoemde melding over gaat. + + )} + + + Horecabedrijf + + + Ander soort bedrijf + + + Evenement + + + Iets anders + + +
    + ), +} + export const CheckboxGroup: Story = { args: { legend: 'Waar gaat uw melding over?', @@ -128,3 +178,29 @@ export const CheckboxGroup: Story = { ), } + +// export const CheckboxGroupWithError: Story = { +// args: { +// invalid: true, +// legend: 'Waar gaat uw melding over?', +// }, +// render: (args) => ( +//
    +// {args.invalid && Geef aan waar uw melding over gaat.} +// +// +// Horecabedrijf +// +// +// Ander soort bedrijf +// +// +// Evenement +// +// +// Iets anders +// +// +//
    +// ), +// } diff --git a/storybook/src/components/TableOfContents/TableOfContents.docs.mdx b/storybook/src/components/TableOfContents/TableOfContents.docs.mdx new file mode 100644 index 0000000000..421979f29d --- /dev/null +++ b/storybook/src/components/TableOfContents/TableOfContents.docs.mdx @@ -0,0 +1,15 @@ +import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; +import * as TableOfContentsStories from "./TableOfContents.stories.tsx"; +import README from "../../../../packages/css/src/components/table-of-contents/README.md?raw"; + + + +{README} + + + + + +## Multilevel + + diff --git a/storybook/src/components/TableOfContents/TableOfContents.stories.tsx b/storybook/src/components/TableOfContents/TableOfContents.stories.tsx new file mode 100644 index 0000000000..abfed9e065 --- /dev/null +++ b/storybook/src/components/TableOfContents/TableOfContents.stories.tsx @@ -0,0 +1,62 @@ +/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */ + +import { TableOfContents } from '@amsterdam/design-system-react/src' +import { Meta, StoryObj } from '@storybook/react' + +const meta = { + title: 'Components/Navigation/Table of Contents', + component: TableOfContents, + args: { + heading: 'Op deze pagina', + children: ( + + + + + + + ), + }, +} satisfies Meta + +export default meta + +type Story = StoryObj + +export const Default: Story = {} + +export const MultiLevel: Story = { + args: { + heading: 'Inhoudsopgave', + children: ( + + + + + + + + + + + + + + + + + + + + + + + + + + ), + }, +}