-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'develop' into feature/DES-778-add-form-error-list
# Conflicts: # packages/react/src/index.ts
- Loading branch information
Showing
37 changed files
with
829 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| <!-- @license CC0-1.0 --> | ||
|
|
||
| # 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. |
22 changes: 22 additions & 0 deletions
22
packages/css/src/components/error-message/error-message.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| <!-- @license CC0-1.0 --> | ||
|
|
||
| # 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. |
50 changes: 50 additions & 0 deletions
50
packages/css/src/components/table-of-contents/table-of-contents.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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(<ErrorMessage />) | ||
| const component = screen.getByRole('paragraph') | ||
|
|
||
| expect(component).toBeInTheDocument() | ||
| expect(component).toBeVisible() | ||
| }) | ||
|
|
||
| it('renders a design system BEM class name', () => { | ||
| render(<ErrorMessage />) | ||
| const component = screen.getByRole('paragraph') | ||
|
|
||
| expect(component).toHaveClass('ams-error-message') | ||
| }) | ||
|
|
||
| it('renders an additional class name', () => { | ||
| render(<ErrorMessage className="extra" />) | ||
| const component = screen.getByRole('paragraph') | ||
|
|
||
| expect(component).toHaveClass('ams-error-message extra') | ||
| }) | ||
|
|
||
| it('renders a Dutch prefix by default', () => { | ||
| render(<ErrorMessage />) | ||
| const component = screen.getByText('Invoerfout', { exact: false }) | ||
|
|
||
| expect(component).toBeInTheDocument() | ||
| }) | ||
|
|
||
| it('renders a custom prefix', () => { | ||
| render(<ErrorMessage prefix="Error" />) | ||
| const component = screen.getByText('Error', { exact: false }) | ||
|
|
||
| expect(component).toBeInTheDocument() | ||
| }) | ||
|
|
||
| it('supports ForwardRef in React', () => { | ||
| const ref = createRef<HTMLParagraphElement>() | ||
|
|
||
| render(<ErrorMessage ref={ref} />) | ||
| const component = screen.getByRole('paragraph') | ||
|
|
||
| expect(ref.current).toBe(component) | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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<HTMLAttributes<HTMLParagraphElement>> | ||
|
|
||
| export const ErrorMessage = forwardRef( | ||
| ( | ||
| { children, className, prefix = 'Invoerfout', ...restProps }: ErrorMessageProps, | ||
| ref: ForwardedRef<HTMLParagraphElement>, | ||
| ) => ( | ||
| <p {...restProps} ref={ref} className={clsx('ams-error-message', className)}> | ||
| <VisuallyHidden> | ||
| {prefix} | ||
| {': '} | ||
| </VisuallyHidden> | ||
| {children} | ||
| </p> | ||
| ), | ||
| ) | ||
|
|
||
| ErrorMessage.displayName = 'ErrorMessage' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| <!-- @license CC0-1.0 --> | ||
|
|
||
| # React Error Message component | ||
|
|
||
| [Error Message documentation](../../../css/src/components/error-message/README.md) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export { ErrorMessage } from './ErrorMessage' | ||
| export type { ErrorMessageProps } from './ErrorMessage' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| <!-- @license CC0-1.0 --> | ||
|
|
||
| # React Table of Contents component | ||
|
|
||
| [Table of Contents documentation](../../../css/src/components/table-of-contents/README.md) |
57 changes: 57 additions & 0 deletions
57
packages/react/src/TableOfContents/TableOfContents.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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(<TableOfContents />) | ||
| const component = container.querySelector(':only-child') | ||
|
|
||
| expect(component).toBeInTheDocument() | ||
| expect(component).toBeVisible() | ||
| }) | ||
|
|
||
| it('renders its children', () => { | ||
| render( | ||
| <TableOfContents> | ||
| <TableOfContents.List /> | ||
| </TableOfContents>, | ||
| ) | ||
|
|
||
| const testChild = screen.getByRole('list') | ||
|
|
||
| expect(testChild).toBeTruthy() | ||
| }) | ||
|
|
||
| it('renders a heading', () => { | ||
| render(<TableOfContents heading="Test heading" />) | ||
|
|
||
| const heading = screen.getByRole('heading') | ||
|
|
||
| expect(heading).toBeInTheDocument() | ||
| expect(heading).toHaveTextContent('Test heading') | ||
| }) | ||
|
|
||
| it('renders a design system BEM class name', () => { | ||
| const { container } = render(<TableOfContents />) | ||
| const component = container.querySelector(':only-child') | ||
|
|
||
| expect(component).toHaveClass('ams-table-of-contents') | ||
| }) | ||
|
|
||
| it('renders an additional class name', () => { | ||
| const { container } = render(<TableOfContents className="extra" />) | ||
| const component = container.querySelector(':only-child') | ||
|
|
||
| expect(component).toHaveClass('ams-table-of-contents extra') | ||
| }) | ||
|
|
||
| it('supports ForwardRef in React', () => { | ||
| const ref = createRef<HTMLElement>() | ||
| const { container } = render(<TableOfContents ref={ref} />) | ||
| const component = container.querySelector(':only-child') | ||
|
|
||
| expect(ref.current).toBe(component) | ||
| }) | ||
| }) |
Oops, something went wrong.