From 1b2e87db032d1500e301c2027596a5c908d59c8c Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Fri, 22 Dec 2023 13:16:26 +0100 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20Introduce=20=E2=80=98Overlap?= =?UTF-8?q?=E2=80=99=20component=20for=20hero=20image=20with=20search=20fi?= =?UTF-8?q?eld=20(#932)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Aram <37216945+alimpens@users.noreply.github.com> --- packages/css/src/components/image/README.md | 7 ++- packages/css/src/components/image/image.scss | 4 ++ packages/css/src/components/index.scss | 1 + packages/css/src/components/overlap/README.md | 3 ++ .../css/src/components/overlap/overlap.scss | 12 +++++ packages/react/src/Image/Image.tsx | 14 ++++-- packages/react/src/Image/index.ts | 3 +- packages/react/src/Overlap/Overlap.test.tsx | 42 +++++++++++++++++ packages/react/src/Overlap/Overlap.tsx | 20 ++++++++ packages/react/src/Overlap/README.md | 3 ++ packages/react/src/Overlap/index.ts | 1 + packages/react/src/index.ts | 1 + .../src/Overlap/Overlap.docs.mdx | 24 ++++++++++ .../src/Overlap/Overlap.stories.tsx | 47 +++++++++++++++++++ 14 files changed, 174 insertions(+), 8 deletions(-) create mode 100644 packages/css/src/components/overlap/README.md create mode 100644 packages/css/src/components/overlap/overlap.scss create mode 100644 packages/react/src/Overlap/Overlap.test.tsx create mode 100644 packages/react/src/Overlap/Overlap.tsx create mode 100644 packages/react/src/Overlap/README.md create mode 100644 packages/react/src/Overlap/index.ts create mode 100644 storybook/storybook-react/src/Overlap/Overlap.docs.mdx create mode 100644 storybook/storybook-react/src/Overlap/Overlap.stories.tsx diff --git a/packages/css/src/components/image/README.md b/packages/css/src/components/image/README.md index ce7feeb1d1..80717ce572 100644 --- a/packages/css/src/components/image/README.md +++ b/packages/css/src/components/image/README.md @@ -7,8 +7,13 @@ Toont een afbeelding. - Vergeet niet om een beschrijving van de afbeelding op te nemen in het `alt`-attribuut. Dit zorgt ervoor dat gebruikers van schermlezers deze informatie ook tot zich kunnen nemen. Daarnaast kan het helpen bij zoekmachineoptimalisatie. -- Alleen voor decoratieve afbeeldingen is zo’n beschrijving niet nodig. Gebruik in dit geval `alt=""`. + Alleen voor decoratieve afbeeldingen is zo’n beschrijving niet nodig. Gebruik in dit geval `alt=""`. Denk aan afbeeldingen die weinig toevoegen aan de nabije tekst of afbeeldingen die louter bijdragen aan het ontwerp of de sfeer van de pagina (bron: [W3C Web Accessibility Initiative](https://www.w3.org/WAI/tutorials/images/decorative/)). +- Specificeer eventueel meerdere kandidaten voor de afbeelding via het `srcSet`-attribuut. + Bijvoorbeeld een kleine, middelgrote en grote variant voor de diverse schermformaten. + Zo voorkom je het onnodige downloaden van grote bestanden. + Doe dit vooral voor de hoofdafbeelding van een pagina, + daar is het verschil tussen de formaten op een smal en breed scherm het grootst. - Zorg ervoor dat de afbeelding een beeldverhouding heeft die ondersteund wordt door het [Aspect Ratio](?path=/docs/layout-aspect-ratio--docs) component. ## Relevante WCAG-eisen diff --git a/packages/css/src/components/image/image.scss b/packages/css/src/components/image/image.scss index c80f4df812..870bfcd845 100644 --- a/packages/css/src/components/image/image.scss +++ b/packages/css/src/components/image/image.scss @@ -8,6 +8,10 @@ height: auto; /* [1] */ max-width: 100%; /* [1] */ vertical-align: middle; /* [2] */ + + &--cover { + object-fit: cover; + } } // [1] Allow for fluid image sizing while maintaining aspect ratio governed by width/height attributes diff --git a/packages/css/src/components/index.scss b/packages/css/src/components/index.scss index 0fc1c01168..7ebd37cb9c 100644 --- a/packages/css/src/components/index.scss +++ b/packages/css/src/components/index.scss @@ -4,6 +4,7 @@ */ /* Append here */ +@import "./overlap/overlap"; @import "./header/header"; @import "./mark/mark"; @import "./text-input/text-input"; diff --git a/packages/css/src/components/overlap/README.md b/packages/css/src/components/overlap/README.md new file mode 100644 index 0000000000..481e65e3c7 --- /dev/null +++ b/packages/css/src/components/overlap/README.md @@ -0,0 +1,3 @@ +# Overlap + +Toont twee of meer componenten over elkaar heen. diff --git a/packages/css/src/components/overlap/overlap.scss b/packages/css/src/components/overlap/overlap.scss new file mode 100644 index 0000000000..607bc074ce --- /dev/null +++ b/packages/css/src/components/overlap/overlap.scss @@ -0,0 +1,12 @@ +/** + * @license EUPL-1.2+ + * Copyright (c) 2023 Gemeente Amsterdam + */ + +.amsterdam-overlap { + display: grid; + + > * { + grid-area: 1 / -1; + } +} diff --git a/packages/react/src/Image/Image.tsx b/packages/react/src/Image/Image.tsx index 6e0f6a1f19..2fb6f726ba 100644 --- a/packages/react/src/Image/Image.tsx +++ b/packages/react/src/Image/Image.tsx @@ -4,12 +4,16 @@ */ import clsx from 'clsx' -import { ForwardedRef, forwardRef, ImgHTMLAttributes } from 'react' +import { type ForwardedRef, forwardRef, type ImgHTMLAttributes } from 'react' -export interface ImageProps extends ImgHTMLAttributes {} +export interface ImageProps extends ImgHTMLAttributes { + cover?: Boolean +} -export const Image = forwardRef(({ className, ...restProps }: ImageProps, ref: ForwardedRef) => ( - -)) +export const Image = forwardRef( + ({ className, cover = false, ...restProps }: ImageProps, ref: ForwardedRef) => ( + + ), +) Image.displayName = 'Image' diff --git a/packages/react/src/Image/index.ts b/packages/react/src/Image/index.ts index f9de85a6b9..d28c8bd778 100644 --- a/packages/react/src/Image/index.ts +++ b/packages/react/src/Image/index.ts @@ -1,2 +1 @@ -export { Image } from './Image' -export type { ImageProps } from './Image' +export { Image, type ImageProps } from './Image' diff --git a/packages/react/src/Overlap/Overlap.test.tsx b/packages/react/src/Overlap/Overlap.test.tsx new file mode 100644 index 0000000000..d1e46ded25 --- /dev/null +++ b/packages/react/src/Overlap/Overlap.test.tsx @@ -0,0 +1,42 @@ +import { render, screen } from '@testing-library/react' +import { createRef } from 'react' +import { Overlap } from './Overlap' +import '@testing-library/jest-dom' + +describe('Overlap', () => { + it('renders', () => { + const { container } = render() + const component = container.querySelector(':only-child') + expect(component).toBeInTheDocument() + expect(component).toBeVisible() + }) + + it('renders a design system BEM class name', () => { + const { container } = render() + const component = container.querySelector(':only-child') + expect(component).toHaveClass('amsterdam-overlap') + }) + + it('renders an additional class name', () => { + const { container } = render() + const component = container.querySelector(':only-child') + expect(component).toHaveClass('amsterdam-overlap extra') + }) + + it('supports ForwardRef in React', () => { + const ref = createRef() + const { container } = render() + const component = container.querySelector(':only-child') + expect(ref.current).toBe(component) + }) + + it('renders children', () => { + render( + +

Test Child

+ , + ) + const testChild = screen.getByText('Test Child') + expect(testChild).toBeTruthy() + }) +}) diff --git a/packages/react/src/Overlap/Overlap.tsx b/packages/react/src/Overlap/Overlap.tsx new file mode 100644 index 0000000000..15909896b8 --- /dev/null +++ b/packages/react/src/Overlap/Overlap.tsx @@ -0,0 +1,20 @@ +/** + * @license EUPL-1.2+ + * Copyright (c) 2023 Gemeente Amsterdam + */ + +import clsx from 'clsx' +import { type ForwardedRef, forwardRef, type HTMLAttributes, type PropsWithChildren } from 'react' + +export const Overlap = forwardRef( + ( + { children, className, ...restProps }: PropsWithChildren>, + ref: ForwardedRef, + ) => ( +
+ {children} +
+ ), +) + +Overlap.displayName = 'Overlap' diff --git a/packages/react/src/Overlap/README.md b/packages/react/src/Overlap/README.md new file mode 100644 index 0000000000..09be12dc64 --- /dev/null +++ b/packages/react/src/Overlap/README.md @@ -0,0 +1,3 @@ +# React Overlap component + +[Overlap documentation](../../../css/src/overlap/README.md) diff --git a/packages/react/src/Overlap/index.ts b/packages/react/src/Overlap/index.ts new file mode 100644 index 0000000000..2e2fa9599e --- /dev/null +++ b/packages/react/src/Overlap/index.ts @@ -0,0 +1 @@ +export { Overlap } from './Overlap' diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index c4f981f6be..084f81faa0 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -4,6 +4,7 @@ */ /* Append here */ +export * from './Overlap' export * from './Header' export * from './Mark' export * from './TextInput' diff --git a/storybook/storybook-react/src/Overlap/Overlap.docs.mdx b/storybook/storybook-react/src/Overlap/Overlap.docs.mdx new file mode 100644 index 0000000000..e061a2fe40 --- /dev/null +++ b/storybook/storybook-react/src/Overlap/Overlap.docs.mdx @@ -0,0 +1,24 @@ +import { Markdown, Meta, Primary } from "@storybook/blocks"; +import * as OverlapStories from "./Overlap.stories.tsx"; +import README from "../../../../packages/css/src/components/overlap/README.md?raw"; + + + +{README} + +## Voorbeeld + +### ‘Hero’ afbeelding met zoekveld + +Hiermee kan een sfeerbepalende afbeelding als achtergrond wordt gebruikt. +Een [Grid](?path=/docs/react_layout-grid--docs) verzorgt horizontale witruimte aan weerszijden en kolommen voor layout. +De library biedt nu nog geen optie om het formulier verticaal te centreren. + + + +#### Richtlijnen + +- Voer eerst het onder gelegen component op. +- Volg [de algemene richtlijnen voor afbeeldingen](?path=/docs/react_media-image--docs#richtlijnen). +- Gebruik een voldoende grote afbeelding. + De beeldverhouding van 32:9 is het meest geschikt. diff --git a/storybook/storybook-react/src/Overlap/Overlap.stories.tsx b/storybook/storybook-react/src/Overlap/Overlap.stories.tsx new file mode 100644 index 0000000000..ee439db302 --- /dev/null +++ b/storybook/storybook-react/src/Overlap/Overlap.stories.tsx @@ -0,0 +1,47 @@ +/** + * @license EUPL-1.2+ + * Copyright (c) 2023 Gemeente Amsterdam + */ + +import { AspectRatio, Grid, Image, Overlap, SearchField } from '@amsterdam/design-system-react' +import { Meta, StoryObj } from '@storybook/react' + +const meta = { + title: 'Layout/Overlap', + component: Overlap, + argTypes: { + children: { + table: { + disable: true, + }, + }, + }, +} satisfies Meta + +export default meta + +type Story = StoryObj + +export const Default: Story = { + args: { + children: [ + + + , + + + e.preventDefault()}> + + + + + , + ], + }, +} From 82323b594c7fba99819cf6873227ca3dcd084315 Mon Sep 17 00:00:00 2001 From: Aram <37216945+alimpens@users.noreply.github.com> Date: Fri, 22 Dec 2023 13:32:16 +0100 Subject: [PATCH 2/3] feat: Add Skip link component (#988) Co-authored-by: Vincent Smedinga --- packages/css/src/components/index.scss | 1 + .../css/src/components/skip-link/README.md | 33 ++++++++ .../src/components/skip-link/skip-link.scss | 28 +++++++ packages/react/src/SkipLink/README.md | 3 + packages/react/src/SkipLink/SkipLink.test.tsx | 41 ++++++++++ packages/react/src/SkipLink/SkipLink.tsx | 20 +++++ packages/react/src/SkipLink/index.ts | 2 + packages/react/src/index.ts | 1 + plop-templates/react.test.tsx.hbs | 4 +- plop-templates/react.tsx.hbs | 3 +- .../amsterdam/skip-link.tokens.json | 20 +++++ .../src/SkipLink/SkipLink.docs.mdx | 24 ++++++ .../src/SkipLink/SkipLink.stories.tsx | 79 +++++++++++++++++++ 13 files changed, 255 insertions(+), 4 deletions(-) create mode 100644 packages/css/src/components/skip-link/README.md create mode 100644 packages/css/src/components/skip-link/skip-link.scss create mode 100644 packages/react/src/SkipLink/README.md create mode 100644 packages/react/src/SkipLink/SkipLink.test.tsx create mode 100644 packages/react/src/SkipLink/SkipLink.tsx create mode 100644 packages/react/src/SkipLink/index.ts create mode 100644 proprietary/tokens/src/components/amsterdam/skip-link.tokens.json create mode 100644 storybook/storybook-react/src/SkipLink/SkipLink.docs.mdx create mode 100644 storybook/storybook-react/src/SkipLink/SkipLink.stories.tsx diff --git a/packages/css/src/components/index.scss b/packages/css/src/components/index.scss index 7ebd37cb9c..9095893b75 100644 --- a/packages/css/src/components/index.scss +++ b/packages/css/src/components/index.scss @@ -4,6 +4,7 @@ */ /* Append here */ +@import "./skip-link/skip-link"; @import "./overlap/overlap"; @import "./header/header"; @import "./mark/mark"; diff --git a/packages/css/src/components/skip-link/README.md b/packages/css/src/components/skip-link/README.md new file mode 100644 index 0000000000..71e158dee1 --- /dev/null +++ b/packages/css/src/components/skip-link/README.md @@ -0,0 +1,33 @@ +# Skip Link + +Gebruik een Skip Link om makkelijk met het toetsenbord naar de belangrijkste inhoud te navigeren. +Met een Skip Link kun je terugkerende navigatieblokken (zoals het hoofdmenu of het kruimelpad) overslaan. + +De Skip Link staat boven de header. +De link is verborgen totdat deze met de tab-toets geactiveerd wordt. +Als de link getoond wordt, duwt deze de hele pagina omlaag. + +## Richtlijnen + +### Zo gebruiken + +- Plaats de Skip Link als eerste element in ``, tenzij je een cookie-banner hebt. + Plaats de Skip Link dan direct na de cookie-banner. +- Gebruik de Skip Link om naar de belangrijkste inhoud te navigeren. + Op een artikelpagina is dat bijvoorbeeld de titel van het artikel, op een zoekpagina is dat het zoekveld. +- Voor complexe pagina's met meerdere secties kun je meer dan 1 Skip Link gebruiken. + In de meeste gevallen is dit niet nodig. + +### Dit vermijden + +- Skip Links zijn niet nodig op een simpele pagina waar alleen tekst staat en weinig navigatie. + Het doel van een Skip Link is om terugkerende navigatieblokken over te slaan. + Als die blokken er niet zijn, is een Skip Link niet nodig. +- Plaats de Skip Link niet in een `nav` regio, of in de Header. + +## Relevante WCAG eisen + +- Voor dit component gelden dezelfde WCAG eisen als voor [het link component](https://amsterdam.github.io/design-system/?path=/docs/react_navigation-link--docs). +- [WCAG 2.4.1](https://www.w3.org/TR/WCAG22/#bypass-blocks): gebruik een Skip Link op elke pagina die begint met een terugkerend navigatieblok. +- [WCAG 3.2.3](https://www.w3.org/TR/WCAG22/#consistent-navigation): een Skip Link staat op elke pagina op dezelfde plek. +- [WCAG 3.2.4](https://www.w3.org/TR/WCAG22/#consistent-identification): een Skip Link heeft dezelfde labels op alle pagina's. Bijvoorbeeld niet: "Navigatie overslaan" op een gedeelte van de site, en "Naar de inhoud" op andere pagina's. diff --git a/packages/css/src/components/skip-link/skip-link.scss b/packages/css/src/components/skip-link/skip-link.scss new file mode 100644 index 0000000000..7ecdfd3b78 --- /dev/null +++ b/packages/css/src/components/skip-link/skip-link.scss @@ -0,0 +1,28 @@ +/** + * @license EUPL-1.2+ + * Copyright (c) 2023 Gemeente Amsterdam + */ + +.amsterdam-skip-link { + background-color: var(--amsterdam-skip-link-background-color); + color: var(--amsterdam-skip-link-color); + display: block; + font-family: var(--amsterdam-skip-link-font-family); + font-size: var(--amsterdam-skip-link-font-size); + font-weight: var(--amsterdam-skip-link-font-weight); + line-height: var(--amsterdam-skip-link-line-height); + outline-offset: var(--amsterdam-skip-link-outline-offset); + padding-block: 0.5rem; + padding-inline: 1rem; + text-align: center; + text-decoration: none; + + &:hover { + background-color: var(--amsterdam-skip-link-hover-background-color); + } + + .amsterdam-theme--compact & { + font-size: var(--amsterdam-skip-link-compact-font-size); + line-height: var(--amsterdam-skip-link-compact-line-height); + } +} diff --git a/packages/react/src/SkipLink/README.md b/packages/react/src/SkipLink/README.md new file mode 100644 index 0000000000..1171149ddf --- /dev/null +++ b/packages/react/src/SkipLink/README.md @@ -0,0 +1,3 @@ +# React Skip Link component + +[Skip Link documentation](../../../css/src/skip-link/README.md) diff --git a/packages/react/src/SkipLink/SkipLink.test.tsx b/packages/react/src/SkipLink/SkipLink.test.tsx new file mode 100644 index 0000000000..7472d8d022 --- /dev/null +++ b/packages/react/src/SkipLink/SkipLink.test.tsx @@ -0,0 +1,41 @@ +import { render, screen } from '@testing-library/react' +import { createRef } from 'react' +import { SkipLink } from './SkipLink' +import '@testing-library/jest-dom' + +describe('Skip Link', () => { + it('renders', () => { + render() + + const component = screen.getByRole('link') + + expect(component).toBeInTheDocument() + expect(component).toBeVisible() + }) + + it('renders a design system BEM class name', () => { + render() + + const component = screen.getByRole('link') + + expect(component).toHaveClass('amsterdam-skip-link') + }) + + it('renders an additional class name', () => { + render() + + const component = screen.getByRole('link') + + expect(component).toHaveClass('amsterdam-skip-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/SkipLink/SkipLink.tsx b/packages/react/src/SkipLink/SkipLink.tsx new file mode 100644 index 0000000000..c4e37c2930 --- /dev/null +++ b/packages/react/src/SkipLink/SkipLink.tsx @@ -0,0 +1,20 @@ +/** + * @license EUPL-1.2+ + * Copyright (c) 2023 Gemeente Amsterdam + */ + +import clsx from 'clsx' +import { forwardRef } from 'react' +import type { AnchorHTMLAttributes, ForwardedRef, PropsWithChildren } from 'react' + +export interface SkipLinkProps extends PropsWithChildren> {} + +export const SkipLink = forwardRef( + ({ children, className, ...restProps }: SkipLinkProps, ref: ForwardedRef) => ( + + {children} + + ), +) + +SkipLink.displayName = 'SkipLink' diff --git a/packages/react/src/SkipLink/index.ts b/packages/react/src/SkipLink/index.ts new file mode 100644 index 0000000000..e5d8796e1d --- /dev/null +++ b/packages/react/src/SkipLink/index.ts @@ -0,0 +1,2 @@ +export { SkipLink } from './SkipLink' +export type { SkipLinkProps } from './SkipLink' diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 084f81faa0..82ee475213 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -4,6 +4,7 @@ */ /* Append here */ +export * from './SkipLink' export * from './Overlap' export * from './Header' export * from './Mark' diff --git a/plop-templates/react.test.tsx.hbs b/plop-templates/react.test.tsx.hbs index fa7eda0e41..f510c332b3 100644 --- a/plop-templates/react.test.tsx.hbs +++ b/plop-templates/react.test.tsx.hbs @@ -26,9 +26,7 @@ describe('{{sentenceCase name}}', () => { const component = container.querySelector(':only-child') - expect(component).toHaveClass('extra') - - expect(component).toHaveClass('amsterdam-{{kebabCase name}}') + expect(component).toHaveClass('amsterdam-{{kebabCase name}} extra') }) it('supports ForwardRef in React', () => { diff --git a/plop-templates/react.tsx.hbs b/plop-templates/react.tsx.hbs index b30eb0eee9..c8c7d3aee3 100644 --- a/plop-templates/react.tsx.hbs +++ b/plop-templates/react.tsx.hbs @@ -4,7 +4,8 @@ */ import clsx from 'clsx' -import { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'react' +import { forwardRef } from 'react' +import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react' export interface {{pascalCase name}}Props extends PropsWithChildren> {} diff --git a/proprietary/tokens/src/components/amsterdam/skip-link.tokens.json b/proprietary/tokens/src/components/amsterdam/skip-link.tokens.json new file mode 100644 index 0000000000..8e9f937c47 --- /dev/null +++ b/proprietary/tokens/src/components/amsterdam/skip-link.tokens.json @@ -0,0 +1,20 @@ +{ + "amsterdam": { + "skip-link": { + "background-color": { "value": "{amsterdam.color.primary-blue}" }, + "color": { "value": "{amsterdam.color.primary-white}" }, + "font-family": { "value": "{amsterdam.typography.font-family}" }, + "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" }, + "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" }, + "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }, + "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }, + "compact": { + "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" }, + "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" } + }, + "hover": { + "background-color": { "value": "{amsterdam.color.dark-blue}" } + } + } + } +} diff --git a/storybook/storybook-react/src/SkipLink/SkipLink.docs.mdx b/storybook/storybook-react/src/SkipLink/SkipLink.docs.mdx new file mode 100644 index 0000000000..c74717f3d2 --- /dev/null +++ b/storybook/storybook-react/src/SkipLink/SkipLink.docs.mdx @@ -0,0 +1,24 @@ +import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; +import * as SkipLinkStories from "./SkipLink.stories.tsx"; +import README from "../../../../packages/css/src/components/skip-link/README.md?raw"; + + + +{README} + + + + + +## Toon bij focus + +Een Skip Link wordt pas getoond als deze focus krijgt. + + + +## Meerdere links + +Als je een complexe pagina met meerdere secties hebt, kun je meer dan 1 Skip Link gebruiken. +In de meeste gevallen is dit niet nodig. + + diff --git a/storybook/storybook-react/src/SkipLink/SkipLink.stories.tsx b/storybook/storybook-react/src/SkipLink/SkipLink.stories.tsx new file mode 100644 index 0000000000..94e65603f5 --- /dev/null +++ b/storybook/storybook-react/src/SkipLink/SkipLink.stories.tsx @@ -0,0 +1,79 @@ +/** + * @license EUPL-1.2+ + * Copyright (c) 2023 Gemeente Amsterdam + */ + +import { Grid, Paragraph, Screen, SkipLink } from '@amsterdam/design-system-react' +import { Meta, StoryObj } from '@storybook/react' + +const meta = { + title: 'Navigation/Skip Link', + component: SkipLink, + args: { + children: 'Direct naar inhoud', + href: '#', + }, + argTypes: { + style: { + table: { + disable: true, + }, + }, + }, + decorators: [ + (Story) => ( + + + + + + + + ), + ], +} satisfies Meta + +export default meta + +type Story = StoryObj + +export const Default: Story = { + args: { + // This resets the default behaviour of only showing the link + // on focus, in order to always show the link in Storybook + style: { + clip: 'initial', + clipPath: 'initial', + height: 'initial', + overflow: 'initial', + position: 'initial', + whiteSpace: 'initial', + width: 'initial', + }, + }, +} + +export const OnFocus: Story = { + decorators: [ + (Story) => ( + <> + + Klik op deze tekst en druk vervolgens op tab om de Skip Link te tonen. + + + + ), + ], +} + +export const MultipleLinks: Story = { + render: () => ( + <> + + Klik op deze tekst en druk vervolgens twee keer op tab om de Skip Links te tonen. + + Direct naar inhoud + Direct naar contactgegevens + + ), +} From 0201bd289e2eec2297f23d93959718f7235d76c4 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Fri, 22 Dec 2023 13:53:20 +0100 Subject: [PATCH 3/3] chore: Publish new release - @amsterdam/design-system-css@0.3.0 - @amsterdam/design-system-react@0.3.0 - @amsterdam/design-system-assets@0.1.6 - @amsterdam/design-system-react-icons@0.1.11 - @amsterdam/design-system-tokens@0.3.0 --- packages/css/CHANGELOG.md | 28 ++++++++++++++++++++++++++++ packages/css/package.json | 2 +- packages/react/CHANGELOG.md | 27 +++++++++++++++++++++++++++ packages/react/package.json | 2 +- proprietary/assets/CHANGELOG.md | 4 ++++ proprietary/assets/package.json | 2 +- proprietary/react-icons/CHANGELOG.md | 4 ++++ proprietary/react-icons/package.json | 2 +- proprietary/tokens/CHANGELOG.md | 22 ++++++++++++++++++++++ proprietary/tokens/package.json | 2 +- 10 files changed, 90 insertions(+), 5 deletions(-) diff --git a/packages/css/CHANGELOG.md b/packages/css/CHANGELOG.md index 9132293328..7b6c37d337 100644 --- a/packages/css/CHANGELOG.md +++ b/packages/css/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.3.0](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-css@0.2.0...@amsterdam/design-system-css@0.3.0) (2023-12-22) + +### ⚠ BREAKING CHANGES + +* Replace `fullWidth` prop on `Grid.Cell` with an `"all"` value on `span` (#963) +* Rename ‘Highlight’ component to ‘Spotlight’ (#929) +* Update line heights and text levels (#898) + +### Features + +* Add Header Component ([#807](https://github.com/Amsterdam/design-system/issues/807)) ([34abcd0](https://github.com/Amsterdam/design-system/commit/34abcd07a849fda94fd46bf995b540e20928c2bf)) +* Add Search Field component ([#892](https://github.com/Amsterdam/design-system/issues/892)) ([dd1a437](https://github.com/Amsterdam/design-system/commit/dd1a437d46c4ac7d43d64f7c1acadecc377e7928)) +* Add Skip link component ([#988](https://github.com/Amsterdam/design-system/issues/988)) ([82323b5](https://github.com/Amsterdam/design-system/commit/82323b594c7fba99819cf6873227ca3dcd084315)) +* Add text input component ([#912](https://github.com/Amsterdam/design-system/issues/912)) ([d4401cc](https://github.com/Amsterdam/design-system/commit/d4401ccf9d41d5c8a48ec32d63cdaabec549d5f2)) +* Introduce ‘Mark’ component ([#933](https://github.com/Amsterdam/design-system/issues/933)) ([d399454](https://github.com/Amsterdam/design-system/commit/d399454ed729a595cab902c83e54d61e3c2aaf71)) +* Introduce ‘Overlap’ component for hero image with search field ([#932](https://github.com/Amsterdam/design-system/issues/932)) ([1b2e87d](https://github.com/Amsterdam/design-system/commit/1b2e87db032d1500e301c2027596a5c908d59c8c)) +* Rename ‘Highlight’ component to ‘Spotlight’ ([#929](https://github.com/Amsterdam/design-system/issues/929)) ([9993d8d](https://github.com/Amsterdam/design-system/commit/9993d8dd4ff17ec5e686295d711cc7688f7ce28c)) +* Replace `fullWidth` prop on `Grid.Cell` with an `"all"` value on `span` ([#963](https://github.com/Amsterdam/design-system/issues/963)) ([b6a8b34](https://github.com/Amsterdam/design-system/commit/b6a8b3450af823f5c033f290783f013e6f20b205)) +* Update line heights and text levels ([#898](https://github.com/Amsterdam/design-system/issues/898)) ([82356bb](https://github.com/Amsterdam/design-system/commit/82356bbf11c389c0f29146ca5f715d5b7459a634)) + +### Bug Fixes + +* Adjust size of breadcrumb separator and allow natural text wrapping ([#913](https://github.com/Amsterdam/design-system/issues/913)) ([caba940](https://github.com/Amsterdam/design-system/commit/caba94024c5aedf9092a5afbbf625d921fd124b5)) +* Improve examples and documentation for cards ([#936](https://github.com/Amsterdam/design-system/issues/936)) ([0f91370](https://github.com/Amsterdam/design-system/commit/0f913702de12cb7b9ca50e8f9da4899c3d934320)) +* Merge grid cell files into grid files and directories ([#815](https://github.com/Amsterdam/design-system/issues/815)) ([f4b4ec5](https://github.com/Amsterdam/design-system/commit/f4b4ec5de92d283ee2ef083075297a64b3dfd1cb)) +* Resolve malformed outline and remove excessive whitespace on dialog ([#937](https://github.com/Amsterdam/design-system/issues/937)) ([1fc264a](https://github.com/Amsterdam/design-system/commit/1fc264ac577edaa92e37d4c7e81427dd75b6dbe7)) +* Use rems for checkbox underline ([#944](https://github.com/Amsterdam/design-system/issues/944)) ([8622326](https://github.com/Amsterdam/design-system/commit/8622326b8686856c44ad03856bac886ee4e5632b)) + ## [0.2.0](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-css@0.1.9...@amsterdam/design-system-css@0.2.0) (2023-12-01) ### ⚠ BREAKING CHANGES diff --git a/packages/css/package.json b/packages/css/package.json index b6ef36cc59..417b45c8d0 100644 --- a/packages/css/package.json +++ b/packages/css/package.json @@ -1,5 +1,5 @@ { - "version": "0.2.0", + "version": "0.3.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/react/CHANGELOG.md b/packages/react/CHANGELOG.md index c1a88e2c41..9c18af2335 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -3,6 +3,33 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.0](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-react@0.2.0...@amsterdam/design-system-react@0.3.0) (2023-12-22) + +### ⚠ BREAKING CHANGES + +* Replace `fullWidth` prop on `Grid.Cell` with an `"all"` value on `span` (#963) +* Rename ‘Highlight’ component to ‘Spotlight’ (#929) +* Update line heights and text levels (#898) + +### Features + +* Add Header Component ([#807](https://github.com/Amsterdam/design-system/issues/807)) ([34abcd0](https://github.com/Amsterdam/design-system/commit/34abcd07a849fda94fd46bf995b540e20928c2bf)) +* Add Search Field component ([#892](https://github.com/Amsterdam/design-system/issues/892)) ([dd1a437](https://github.com/Amsterdam/design-system/commit/dd1a437d46c4ac7d43d64f7c1acadecc377e7928)) +* Add Skip link component ([#988](https://github.com/Amsterdam/design-system/issues/988)) ([82323b5](https://github.com/Amsterdam/design-system/commit/82323b594c7fba99819cf6873227ca3dcd084315)) +* Add text input component ([#912](https://github.com/Amsterdam/design-system/issues/912)) ([d4401cc](https://github.com/Amsterdam/design-system/commit/d4401ccf9d41d5c8a48ec32d63cdaabec549d5f2)) +* Allow ‘Grid Cell’ to render a custom HTML element ([#968](https://github.com/Amsterdam/design-system/issues/968)) ([1b9cda7](https://github.com/Amsterdam/design-system/commit/1b9cda7ce57abd45166f48c18c919769bff033fe)) +* Introduce ‘Mark’ component ([#933](https://github.com/Amsterdam/design-system/issues/933)) ([d399454](https://github.com/Amsterdam/design-system/commit/d399454ed729a595cab902c83e54d61e3c2aaf71)) +* Introduce ‘Overlap’ component for hero image with search field ([#932](https://github.com/Amsterdam/design-system/issues/932)) ([1b2e87d](https://github.com/Amsterdam/design-system/commit/1b2e87db032d1500e301c2027596a5c908d59c8c)) +* Rename ‘Highlight’ component to ‘Spotlight’ ([#929](https://github.com/Amsterdam/design-system/issues/929)) ([9993d8d](https://github.com/Amsterdam/design-system/commit/9993d8dd4ff17ec5e686295d711cc7688f7ce28c)) +* Replace `fullWidth` prop on `Grid.Cell` with an `"all"` value on `span` ([#963](https://github.com/Amsterdam/design-system/issues/963)) ([b6a8b34](https://github.com/Amsterdam/design-system/commit/b6a8b3450af823f5c033f290783f013e6f20b205)) +* Update line heights and text levels ([#898](https://github.com/Amsterdam/design-system/issues/898)) ([82356bb](https://github.com/Amsterdam/design-system/commit/82356bbf11c389c0f29146ca5f715d5b7459a634)) + +### Bug Fixes + +* Clean up redundant subcomponent types ([#894](https://github.com/Amsterdam/design-system/issues/894)) ([0c4bbc1](https://github.com/Amsterdam/design-system/commit/0c4bbc1404f66d3d70441812de9949b77060a951)) +* Merge grid cell files into grid files and directories ([#815](https://github.com/Amsterdam/design-system/issues/815)) ([f4b4ec5](https://github.com/Amsterdam/design-system/commit/f4b4ec5de92d283ee2ef083075297a64b3dfd1cb)) +* Remove unused prop type in TextInput ([#990](https://github.com/Amsterdam/design-system/issues/990)) ([f150e16](https://github.com/Amsterdam/design-system/commit/f150e16c1953791ec7c6d6891e2cd5cb43c26ffa)) + ## [0.2.0](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-react@0.1.9...@amsterdam/design-system-react@0.2.0) (2023-12-01) ### ⚠ BREAKING CHANGES diff --git a/packages/react/package.json b/packages/react/package.json index 6a1640fd50..326ee38376 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,5 +1,5 @@ { - "version": "0.2.0", + "version": "0.3.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/proprietary/assets/CHANGELOG.md b/proprietary/assets/CHANGELOG.md index 8b329f40fa..9d650cf1d4 100644 --- a/proprietary/assets/CHANGELOG.md +++ b/proprietary/assets/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.1.6](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-assets@0.1.5...@amsterdam/design-system-assets@0.1.6) (2023-12-22) + +**Note:** Version bump only for package @amsterdam/design-system-assets + ## [0.1.5](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-assets@0.1.4...@amsterdam/design-system-assets@0.1.5) (2023-12-01) **Note:** Version bump only for package @amsterdam/design-system-assets diff --git a/proprietary/assets/package.json b/proprietary/assets/package.json index e7fbac613e..3487fc9ae5 100644 --- a/proprietary/assets/package.json +++ b/proprietary/assets/package.json @@ -1,5 +1,5 @@ { - "version": "0.1.5", + "version": "0.1.6", "author": "Community for NL Design System", "description": "Assets for the City of Amsterdam", "license": "SEE LICENSE IN LICENSE.md", diff --git a/proprietary/react-icons/CHANGELOG.md b/proprietary/react-icons/CHANGELOG.md index b6109eed31..9b3ea48f9e 100644 --- a/proprietary/react-icons/CHANGELOG.md +++ b/proprietary/react-icons/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.1.11](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-react-icons@0.1.10...@amsterdam/design-system-react-icons@0.1.11) (2023-12-22) + +**Note:** Version bump only for package @amsterdam/design-system-react-icons + ## [0.1.10](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-react-icons@0.1.9...@amsterdam/design-system-react-icons@0.1.10) (2023-12-01) **Note:** Version bump only for package @amsterdam/design-system-react-icons diff --git a/proprietary/react-icons/package.json b/proprietary/react-icons/package.json index 37c0361aaf..0936b6a5ed 100644 --- a/proprietary/react-icons/package.json +++ b/proprietary/react-icons/package.json @@ -1,5 +1,5 @@ { - "version": "0.1.10", + "version": "0.1.11", "author": "Community for NL Design System", "description": "React icon components for the City of Amsterdam", "license": "SEE LICENSE IN LICENSE.md", diff --git a/proprietary/tokens/CHANGELOG.md b/proprietary/tokens/CHANGELOG.md index 1b8efa9c45..663cd032ab 100644 --- a/proprietary/tokens/CHANGELOG.md +++ b/proprietary/tokens/CHANGELOG.md @@ -3,6 +3,28 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.0](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-tokens@0.2.0...@amsterdam/design-system-tokens@0.3.0) (2023-12-22) + +### ⚠ BREAKING CHANGES + +* Rename ‘Highlight’ component to ‘Spotlight’ (#929) +* Update line heights and text levels (#898) + +### Features + +* Add Header Component ([#807](https://github.com/Amsterdam/design-system/issues/807)) ([34abcd0](https://github.com/Amsterdam/design-system/commit/34abcd07a849fda94fd46bf995b540e20928c2bf)) +* Add Search Field component ([#892](https://github.com/Amsterdam/design-system/issues/892)) ([dd1a437](https://github.com/Amsterdam/design-system/commit/dd1a437d46c4ac7d43d64f7c1acadecc377e7928)) +* Add Skip link component ([#988](https://github.com/Amsterdam/design-system/issues/988)) ([82323b5](https://github.com/Amsterdam/design-system/commit/82323b594c7fba99819cf6873227ca3dcd084315)) +* Add text input component ([#912](https://github.com/Amsterdam/design-system/issues/912)) ([d4401cc](https://github.com/Amsterdam/design-system/commit/d4401ccf9d41d5c8a48ec32d63cdaabec549d5f2)) +* Introduce ‘Mark’ component ([#933](https://github.com/Amsterdam/design-system/issues/933)) ([d399454](https://github.com/Amsterdam/design-system/commit/d399454ed729a595cab902c83e54d61e3c2aaf71)) +* Rename ‘Highlight’ component to ‘Spotlight’ ([#929](https://github.com/Amsterdam/design-system/issues/929)) ([9993d8d](https://github.com/Amsterdam/design-system/commit/9993d8dd4ff17ec5e686295d711cc7688f7ce28c)) +* Update line heights and text levels ([#898](https://github.com/Amsterdam/design-system/issues/898)) ([82356bb](https://github.com/Amsterdam/design-system/commit/82356bbf11c389c0f29146ca5f715d5b7459a634)) + +### Bug Fixes + +* Adjust size of breadcrumb separator and allow natural text wrapping ([#913](https://github.com/Amsterdam/design-system/issues/913)) ([caba940](https://github.com/Amsterdam/design-system/commit/caba94024c5aedf9092a5afbbf625d921fd124b5)) +* Change tertiary button hover border color ([#989](https://github.com/Amsterdam/design-system/issues/989)) ([f4ec6e7](https://github.com/Amsterdam/design-system/commit/f4ec6e7461420c7606441a35caacc9ee10d146eb)) + ## [0.2.0](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-tokens@0.1.8...@amsterdam/design-system-tokens@0.2.0) (2023-12-01) ### ⚠ BREAKING CHANGES diff --git a/proprietary/tokens/package.json b/proprietary/tokens/package.json index 4933e7978b..498f88c831 100644 --- a/proprietary/tokens/package.json +++ b/proprietary/tokens/package.json @@ -1,5 +1,5 @@ { - "version": "0.2.0", + "version": "0.3.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",