From 121b9dea06f78a89cee96c0d14dc7c87e40ae538 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Fri, 8 Nov 2024 16:17:35 +0100 Subject: [PATCH 1/3] chore: Wrap all stories in a Screen (#1728) --- .../css/src/components/skip-link/README.md | 24 +++++++++---------- storybook/config/preview.tsx | 12 ++++++---- .../components/Breakout/Breakout.stories.tsx | 2 +- .../src/components/Grid/Grid.stories.tsx | 9 ++++--- .../ImageSlider/ImageSlider.stories.tsx | 10 +------- .../components/MegaMenu/MegaMenu.stories.tsx | 9 +------ .../components/SkipLink/SkipLink.stories.tsx | 13 +--------- .../Spotlight/Spotlight.stories.tsx | 9 +------ .../amsterdam/HomePage/HomePage.docs.mdx | 4 ++-- .../src/pages/amsterdam/common/Layout.tsx | 10 ++++---- 10 files changed, 33 insertions(+), 69 deletions(-) diff --git a/packages/css/src/components/skip-link/README.md b/packages/css/src/components/skip-link/README.md index 160262d603..2c037b94ea 100644 --- a/packages/css/src/components/skip-link/README.md +++ b/packages/css/src/components/skip-link/README.md @@ -2,22 +2,20 @@ # Skip Link -Use a Skip Link to navigate to the main content quickly with the keyboard. -A Skip Link allows skipping recurring navigation blocks, such as the main menu or breadcrumb trail. +Allows skipping past recurring navigation blocks at the top of a page. -The Skip Link is placed above the header. -The link is hidden until activated with the tab key. -When the link is shown, it pushes the entire page down. +## Design + +The Skip Link sits above the header and is as wide as the Screen container. +It remains hidden until activated with the ‘Tab’ key. +After appearing, it pushes the entire page down. ## Guidelines -- Place the Skip Link as the first element in `` unless you have a cookie banner. - In that case, place the Skip Link immediately after the cookie banner. -- Use the Skip Link to navigate to the main content. - On an article page, for example, it could be the title of the article; on a search page, it could be the search field. +- Place the Skip Link as the first element in the Screen. +- Target the Skip Link to the main content. + On an article page, for example, it could be the title of the article. + On a search page, it could be the search field. - Set `id="example-id"` on the container of that element and then use `href="#example-id"` on the Skip Link. -- You can use more than one Skip Link for complex pages with multiple sections. - In most cases, this is not necessary. +- Complex pages with multiple sections may benefit from more than one Skip Link. - Skip Links are unnecessary on a simple page with only text and minimal navigation. - The purpose of a Skip Link is to bypass recurring navigation blocks. - If those blocks are not present, a Skip Link is not needed. diff --git a/storybook/config/preview.tsx b/storybook/config/preview.tsx index 49108b0c0f..2e2c0de51f 100644 --- a/storybook/config/preview.tsx +++ b/storybook/config/preview.tsx @@ -4,7 +4,9 @@ import '@amsterdam/design-system-assets/font/index.css' import '@amsterdam/design-system-css/dist/index.css' import '../src/styles/docs.css' import '../src/styles/overrides.css' +import { Screen } from '@amsterdam/design-system-react' import { withThemeByClassName } from '@storybook/addon-themes' +import type { StoryFn } from '@storybook/react' import { viewports } from './viewports' export const argTypes = { @@ -13,12 +15,12 @@ export const argTypes = { }, } -// Set language to Dutch for Canvas and Stories +// Wrap in Screen, set language to Dutch for Canvas and Stories export const decorators = [ - (Story: any) => ( -
+ (Story: StoryFn) => ( + -
+ ), withThemeByClassName({ themes: { @@ -58,6 +60,6 @@ export const parameters = { }, viewMode: 'docs', html: { - root: 'div[lang="nl"]', + root: '.ams-screen', }, } diff --git a/storybook/src/components/Breakout/Breakout.stories.tsx b/storybook/src/components/Breakout/Breakout.stories.tsx index e45b4d0c45..a5fbee7d49 100644 --- a/storybook/src/components/Breakout/Breakout.stories.tsx +++ b/storybook/src/components/Breakout/Breakout.stories.tsx @@ -45,7 +45,7 @@ export const Default: Story = { rowSpan={2} rowStart={1} > - + , ], }, diff --git a/storybook/src/components/Grid/Grid.stories.tsx b/storybook/src/components/Grid/Grid.stories.tsx index 0e6582af49..65116c5bf5 100644 --- a/storybook/src/components/Grid/Grid.stories.tsx +++ b/storybook/src/components/Grid/Grid.stories.tsx @@ -3,7 +3,6 @@ * Copyright Gemeente Amsterdam */ -import { Screen } from '@amsterdam/design-system-react' import { Grid } from '@amsterdam/design-system-react/src' import type { GridCellProps } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' @@ -85,10 +84,10 @@ const BackgroundGrid = () => ( const StoryTemplate: Story = { decorators: [ (Story) => ( - + <> - + ), ], } @@ -96,12 +95,12 @@ const StoryTemplate: Story = { const CellStoryTemplate: CellStory = { decorators: [ (Story) => ( - + <> - + ), ], render: ({ children, ...args }) => {children}, diff --git a/storybook/src/components/ImageSlider/ImageSlider.stories.tsx b/storybook/src/components/ImageSlider/ImageSlider.stories.tsx index 683c33d7c9..e2b140cce2 100644 --- a/storybook/src/components/ImageSlider/ImageSlider.stories.tsx +++ b/storybook/src/components/ImageSlider/ImageSlider.stories.tsx @@ -3,9 +3,8 @@ * Copyright Gemeente Amsterdam */ -import { ImageSlider, Screen } from '@amsterdam/design-system-react/src' +import { ImageSlider } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' -import React from 'react' const meta = { title: 'Components/Media/Image Slider', @@ -40,13 +39,6 @@ const meta = { }, ], }, - decorators: [ - (Story) => ( - - - - ), - ], } satisfies Meta export default meta diff --git a/storybook/src/components/MegaMenu/MegaMenu.stories.tsx b/storybook/src/components/MegaMenu/MegaMenu.stories.tsx index e09d0ee19a..824fcec8ae 100644 --- a/storybook/src/components/MegaMenu/MegaMenu.stories.tsx +++ b/storybook/src/components/MegaMenu/MegaMenu.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { Grid, Heading, LinkList, Screen } from '@amsterdam/design-system-react' +import { Grid, Heading, LinkList } from '@amsterdam/design-system-react' import { MegaMenu } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' @@ -13,13 +13,6 @@ const meta = { parameters: { layout: 'fullscreen', }, - decorators: [ - (Story) => ( - - - - ), - ], } satisfies Meta export default meta diff --git a/storybook/src/components/SkipLink/SkipLink.stories.tsx b/storybook/src/components/SkipLink/SkipLink.stories.tsx index fe449999bb..2aabc3c36b 100644 --- a/storybook/src/components/SkipLink/SkipLink.stories.tsx +++ b/storybook/src/components/SkipLink/SkipLink.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { Grid, Paragraph, Screen } from '@amsterdam/design-system-react' +import { Paragraph } from '@amsterdam/design-system-react' import { SkipLink } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' @@ -26,17 +26,6 @@ const meta = { table: { disable: true }, }, }, - decorators: [ - (Story) => ( - - - - - - - - ), - ], } satisfies Meta export default meta diff --git a/storybook/src/components/Spotlight/Spotlight.stories.tsx b/storybook/src/components/Spotlight/Spotlight.stories.tsx index 1e924f9f43..4383b9f57d 100644 --- a/storybook/src/components/Spotlight/Spotlight.stories.tsx +++ b/storybook/src/components/Spotlight/Spotlight.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { Blockquote, Grid, Screen } from '@amsterdam/design-system-react' +import { Blockquote, Grid } from '@amsterdam/design-system-react' import { Spotlight } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' import { exampleQuote } from '../shared/exampleContent' @@ -13,13 +13,6 @@ const quote = exampleQuote() const meta = { title: 'Components/Containers/Spotlight', component: Spotlight, - decorators: [ - (Story) => ( - - - - ), - ], render: ({ as, color }) => ( diff --git a/storybook/src/pages/amsterdam/HomePage/HomePage.docs.mdx b/storybook/src/pages/amsterdam/HomePage/HomePage.docs.mdx index cc2f7e30da..732da7ad86 100644 --- a/storybook/src/pages/amsterdam/HomePage/HomePage.docs.mdx +++ b/storybook/src/pages/amsterdam/HomePage/HomePage.docs.mdx @@ -14,8 +14,8 @@ The starting page of an application generally provides a broad overview of subje A typical layout for a homepage: ```tsx -Direct naar inhoud - + + Direct naar inhoud
diff --git a/storybook/src/pages/amsterdam/common/Layout.tsx b/storybook/src/pages/amsterdam/common/Layout.tsx index 901af75a10..8bb6453e1c 100644 --- a/storybook/src/pages/amsterdam/common/Layout.tsx +++ b/storybook/src/pages/amsterdam/common/Layout.tsx @@ -1,4 +1,4 @@ -import { Footer, Screen, SkipLink } from '@amsterdam/design-system-react' +import { Footer, SkipLink } from '@amsterdam/design-system-react' import type { HTMLAttributes, PropsWithChildren } from 'react' import { AppHeader } from './AppHeader' import { Default as FooterStory } from '../../../components/Footer/Footer.stories' @@ -8,10 +8,8 @@ type LayoutProps = PropsWithChildren> export const Layout = ({ children }: LayoutProps) => ( <> Direct naar inhoud - - - {children} -
{FooterStory.args?.children}
- + + {children} +
{FooterStory.args?.children}
) From 473f7402ed920a8d5e2dabe2697d995adfce3487 Mon Sep 17 00:00:00 2001 From: Ruben Sibon Date: Fri, 8 Nov 2024 16:27:19 +0100 Subject: [PATCH 2/3] fix: Page control re-renders entire component (#1737) Co-authored-by: alimpens Co-authored-by: Aram <37216945+alimpens@users.noreply.github.com> --- .../Pagination/Pagination.stories.tsx | 23 ++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/storybook/src/components/Pagination/Pagination.stories.tsx b/storybook/src/components/Pagination/Pagination.stories.tsx index b7f7e3e728..935b5d8981 100644 --- a/storybook/src/components/Pagination/Pagination.stories.tsx +++ b/storybook/src/components/Pagination/Pagination.stories.tsx @@ -14,7 +14,28 @@ const meta = { maxVisiblePages: 7, totalPages: 10, }, - argTypes: { onPageChange: { action: 'page changed' } }, + argTypes: { + onPageChange: { action: 'page changed' }, + page: { + control: { + type: 'number', + min: 1, + }, + }, + }, + decorators: [ + // Wrap the story in a div with a key, to force a rerender when the 'page' arg changes + (Story, { args }) => ( +
+ +
+ ), + ], + parameters: { + html: { + root: '#ams-docs-custom-root', + }, + }, } satisfies Meta export default meta From e5725a76ad40f8f0756ebb177fde6ae650d42309 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Mon, 11 Nov 2024 09:53:17 +0100 Subject: [PATCH 3/3] chore: Merge decorators (#1747) --- pnpm-lock.yaml | 4 ++++ storybook/config/preview.tsx | 13 +++++++++--- storybook/package.json | 3 +++ .../Blockquote/Blockquote.stories.tsx | 2 -- .../DescriptionList.stories.tsx | 2 -- .../components/Heading/Heading.stories.tsx | 2 -- .../IconButton/IconButton.stories.tsx | 2 -- .../src/components/Link/Link.stories.tsx | 2 -- .../components/LinkList/LinkList.stories.tsx | 3 --- .../OrderedList/OrderedList.stories.tsx | 2 -- .../PageHeading/PageHeading.stories.tsx | 2 -- .../Paragraph/Paragraph.stories.tsx | 2 -- .../UnorderedList/UnorderedList.stories.tsx | 2 -- .../src/components/shared/decorators.tsx | 20 ------------------- storybook/src/styles/docs.css | 9 +++++---- 15 files changed, 22 insertions(+), 48 deletions(-) delete mode 100644 storybook/src/components/shared/decorators.tsx diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index da0d4760ea..10d534e454 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -282,6 +282,10 @@ importers: version: 4.1.4 storybook: + dependencies: + clsx: + specifier: 2.1.1 + version: 2.1.1 devDependencies: '@amsterdam/design-system-assets': specifier: workspace:* diff --git a/storybook/config/preview.tsx b/storybook/config/preview.tsx index 2e2c0de51f..7485b93bde 100644 --- a/storybook/config/preview.tsx +++ b/storybook/config/preview.tsx @@ -6,7 +6,8 @@ import '../src/styles/docs.css' import '../src/styles/overrides.css' import { Screen } from '@amsterdam/design-system-react' import { withThemeByClassName } from '@storybook/addon-themes' -import type { StoryFn } from '@storybook/react' +import type { StoryContext, StoryFn } from '@storybook/react' +import clsx from 'clsx' import { viewports } from './viewports' export const argTypes = { @@ -17,8 +18,14 @@ export const argTypes = { // Wrap in Screen, set language to Dutch for Canvas and Stories export const decorators = [ - (Story: StoryFn) => ( - + (Story: StoryFn, { args }: StoryContext) => ( + ), diff --git a/storybook/package.json b/storybook/package.json index 5434c9e072..2d7595d337 100644 --- a/storybook/package.json +++ b/storybook/package.json @@ -17,6 +17,9 @@ "clean": "rimraf dist/", "start": "storybook dev --config-dir config/ --port 6006" }, + "dependencies": { + "clsx": "2.1.1" + }, "devDependencies": { "@amsterdam/design-system-assets": "workspace:*", "@amsterdam/design-system-css": "workspace:*", diff --git a/storybook/src/components/Blockquote/Blockquote.stories.tsx b/storybook/src/components/Blockquote/Blockquote.stories.tsx index f0e69365e3..26e4608a33 100644 --- a/storybook/src/components/Blockquote/Blockquote.stories.tsx +++ b/storybook/src/components/Blockquote/Blockquote.stories.tsx @@ -5,7 +5,6 @@ import { Blockquote } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' -import { inverseColorDecorator } from '../shared/decorators' import { exampleQuote } from '../shared/exampleContent' const quote = exampleQuote() @@ -23,7 +22,6 @@ const meta = { table: { disable: false }, }, }, - decorators: [inverseColorDecorator], } satisfies Meta export default meta diff --git a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx index 0c7a9eb7f1..5430965a8c 100644 --- a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx +++ b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx @@ -6,12 +6,10 @@ import { Link, Paragraph, UnorderedList } from '@amsterdam/design-system-react' import { DescriptionList } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' -import { inverseColorDecorator } from '../shared/decorators' const meta = { title: 'Components/Text/Description List', component: DescriptionList, - decorators: [inverseColorDecorator], args: { children: [ Het hoger onderwijs, diff --git a/storybook/src/components/Heading/Heading.stories.tsx b/storybook/src/components/Heading/Heading.stories.tsx index 1ac5035dbf..3634ce132a 100644 --- a/storybook/src/components/Heading/Heading.stories.tsx +++ b/storybook/src/components/Heading/Heading.stories.tsx @@ -6,7 +6,6 @@ import { Column } from '@amsterdam/design-system-react' import { Heading } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' -import { inverseColorDecorator } from '../shared/decorators' import { exampleHeading } from '../shared/exampleContent' const heading = exampleHeading() @@ -24,7 +23,6 @@ const meta = { table: { disable: false }, }, }, - decorators: [inverseColorDecorator], } satisfies Meta export default meta diff --git a/storybook/src/components/IconButton/IconButton.stories.tsx b/storybook/src/components/IconButton/IconButton.stories.tsx index f35409967a..9a141af75d 100644 --- a/storybook/src/components/IconButton/IconButton.stories.tsx +++ b/storybook/src/components/IconButton/IconButton.stories.tsx @@ -6,7 +6,6 @@ import { IconButton } from '@amsterdam/design-system-react/src' import * as Icons from '@amsterdam/design-system-react-icons' import { Meta, StoryObj } from '@storybook/react' -import { contrastColorDecorator, inverseColorDecorator } from '../shared/decorators' const meta = { title: 'Components/Buttons/Icon Button', @@ -37,7 +36,6 @@ const meta = { mapping: Icons, }, }, - decorators: [inverseColorDecorator, contrastColorDecorator], } satisfies Meta export default meta diff --git a/storybook/src/components/Link/Link.stories.tsx b/storybook/src/components/Link/Link.stories.tsx index 6253cc8e07..7c6e9be767 100644 --- a/storybook/src/components/Link/Link.stories.tsx +++ b/storybook/src/components/Link/Link.stories.tsx @@ -6,7 +6,6 @@ import { Paragraph } from '@amsterdam/design-system-react' import { Link } from '@amsterdam/design-system-react/src' import type { Meta, StoryObj } from '@storybook/react' -import { contrastColorDecorator, inverseColorDecorator } from '../shared/decorators' type Story = StoryObj @@ -30,7 +29,6 @@ const meta = { type: { name: 'string', required: false }, }, }, - decorators: [inverseColorDecorator, contrastColorDecorator], } satisfies Meta export default meta diff --git a/storybook/src/components/LinkList/LinkList.stories.tsx b/storybook/src/components/LinkList/LinkList.stories.tsx index bff513c4d3..f7a4733c59 100644 --- a/storybook/src/components/LinkList/LinkList.stories.tsx +++ b/storybook/src/components/LinkList/LinkList.stories.tsx @@ -6,7 +6,6 @@ import { LinkList } from '@amsterdam/design-system-react/src' import * as Icons from '@amsterdam/design-system-react-icons' import { Meta, StoryObj } from '@storybook/react' -import { contrastColorDecorator, inverseColorDecorator } from '../shared/decorators' import { exampleLinkList } from '../shared/exampleContent' const linkList = exampleLinkList() @@ -66,8 +65,6 @@ const LinkStoryTemplate: LinkStory = { ), - inverseColorDecorator, - contrastColorDecorator, ], render: ({ children, ...args }) => {children}, } diff --git a/storybook/src/components/OrderedList/OrderedList.stories.tsx b/storybook/src/components/OrderedList/OrderedList.stories.tsx index 47362d3209..167b9a8b78 100644 --- a/storybook/src/components/OrderedList/OrderedList.stories.tsx +++ b/storybook/src/components/OrderedList/OrderedList.stories.tsx @@ -6,7 +6,6 @@ import { Heading, Paragraph } from '@amsterdam/design-system-react' import { OrderedList } from '@amsterdam/design-system-react/src' import type { Meta, StoryObj } from '@storybook/react' -import { inverseColorDecorator } from '../shared/decorators' import { exampleOrderedList } from '../shared/exampleContent' const orderedListItems = exampleOrderedList().map((text, index) => ( @@ -40,7 +39,6 @@ const meta = { options: ['small', undefined], }, }, - decorators: [inverseColorDecorator], } satisfies Meta export default meta diff --git a/storybook/src/components/PageHeading/PageHeading.stories.tsx b/storybook/src/components/PageHeading/PageHeading.stories.tsx index 137e0d419e..798f83475e 100644 --- a/storybook/src/components/PageHeading/PageHeading.stories.tsx +++ b/storybook/src/components/PageHeading/PageHeading.stories.tsx @@ -5,7 +5,6 @@ import { PageHeading } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' -import { inverseColorDecorator } from '../shared/decorators' const meta = { title: 'Components/Text/Page Heading', @@ -20,7 +19,6 @@ const meta = { table: { disable: false }, }, }, - decorators: [inverseColorDecorator], } satisfies Meta export default meta diff --git a/storybook/src/components/Paragraph/Paragraph.stories.tsx b/storybook/src/components/Paragraph/Paragraph.stories.tsx index db46c8d356..ddcb965e9a 100644 --- a/storybook/src/components/Paragraph/Paragraph.stories.tsx +++ b/storybook/src/components/Paragraph/Paragraph.stories.tsx @@ -5,7 +5,6 @@ import { Paragraph } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' -import { inverseColorDecorator } from '../shared/decorators' import { exampleParagraph } from '../shared/exampleContent' const paragraph = exampleParagraph() @@ -30,7 +29,6 @@ const meta = { options: ['small', undefined, 'large'], }, }, - decorators: [inverseColorDecorator], } satisfies Meta export default meta diff --git a/storybook/src/components/UnorderedList/UnorderedList.stories.tsx b/storybook/src/components/UnorderedList/UnorderedList.stories.tsx index ffa1530a29..1594ff8cc0 100644 --- a/storybook/src/components/UnorderedList/UnorderedList.stories.tsx +++ b/storybook/src/components/UnorderedList/UnorderedList.stories.tsx @@ -16,7 +16,6 @@ import { TrashBinIcon, } from '@amsterdam/design-system-react-icons' import type { Meta, StoryObj } from '@storybook/react' -import { inverseColorDecorator } from '../shared/decorators' import { exampleUnorderedList } from '../shared/exampleContent' const unorderedListItems = exampleUnorderedList().map((text, index) => ( @@ -40,7 +39,6 @@ const meta = { options: ['small', undefined], }, }, - decorators: [inverseColorDecorator], } satisfies Meta export default meta diff --git a/storybook/src/components/shared/decorators.tsx b/storybook/src/components/shared/decorators.tsx deleted file mode 100644 index bf10cea775..0000000000 --- a/storybook/src/components/shared/decorators.tsx +++ /dev/null @@ -1,20 +0,0 @@ -/** - * @license EUPL-1.2+ - * Copyright Gemeente Amsterdam - */ - -import type { StoryContext, StoryFn } from '@storybook/react' - -/** Applies a light background colour if the `contrastColor` arg is true. */ -export const contrastColorDecorator = (Story: StoryFn, context: StoryContext) => ( -
- -
-) - -/** Applies a dark background colour if the `inverseColor` arg is true. */ -export const inverseColorDecorator = (Story: StoryFn, context: StoryContext) => ( -
- -
-) diff --git a/storybook/src/styles/docs.css b/storybook/src/styles/docs.css index e60f4f3616..a480162d30 100644 --- a/storybook/src/styles/docs.css +++ b/storybook/src/styles/docs.css @@ -57,14 +57,15 @@ padding-inline: 1rem; } -.ams-docs-dark-background { - background-color: #004699; /* Dark blue */ -} - +/* Do not change the order of these two selectors. They ensure the dark background wins if both are set, which is in line with the implementation of the React-component. */ .ams-docs-light-background { background-color: #ffe600; /* Yellow */ } +.ams-docs-dark-background { + background-color: #004699; /* Dark blue */ +} + .ams-docs-backdrop { background-color: #0006; block-size: 100%;