From 7bf27417ac39a7a7ae89f36d93009da9428fb8c0 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Tue, 29 Oct 2024 00:04:10 +0100 Subject: [PATCH 1/9] Wrap all stories in a Screen --- storybook/config/preview.tsx | 10 ++++------ storybook/src/components/Breakout/Breakout.stories.tsx | 9 +-------- storybook/src/components/Grid/Grid.stories.tsx | 9 ++++----- .../src/components/ImageSlider/ImageSlider.stories.tsx | 10 +--------- storybook/src/components/MegaMenu/MegaMenu.stories.tsx | 9 +-------- storybook/src/components/SkipLink/SkipLink.stories.tsx | 6 +++--- .../src/components/Spotlight/Spotlight.stories.tsx | 9 +-------- storybook/src/pages/amsterdam/common/Layout.tsx | 10 ++++------ 8 files changed, 19 insertions(+), 53 deletions(-) diff --git a/storybook/config/preview.tsx b/storybook/config/preview.tsx index 49108b0c0f..b6f5ce4433 100644 --- a/storybook/config/preview.tsx +++ b/storybook/config/preview.tsx @@ -4,6 +4,7 @@ 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 { viewports } from './viewports' @@ -13,12 +14,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) => ( -
+ -
+ ), withThemeByClassName({ themes: { @@ -57,7 +58,4 @@ export const parameters = { viewports, }, viewMode: 'docs', - html: { - root: 'div[lang="nl"]', - }, } diff --git a/storybook/src/components/Breakout/Breakout.stories.tsx b/storybook/src/components/Breakout/Breakout.stories.tsx index 383261a874..8ba0a76a4d 100644 --- a/storybook/src/components/Breakout/Breakout.stories.tsx +++ b/storybook/src/components/Breakout/Breakout.stories.tsx @@ -3,20 +3,13 @@ * Copyright Gemeente Amsterdam */ -import { AspectRatio, Image, Paragraph, Screen, Spotlight } from '@amsterdam/design-system-react' +import { AspectRatio, Image, Paragraph, Spotlight } from '@amsterdam/design-system-react' import { Breakout } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' const meta = { title: 'Components/Layout/Breakout', component: Breakout, - decorators: [ - (Story) => ( - - - - ), - ], } satisfies Meta export default meta 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..a99cd29ff0 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 { Grid, Paragraph } from '@amsterdam/design-system-react' import { SkipLink } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' @@ -28,13 +28,13 @@ const meta = { }, decorators: [ (Story) => ( - + <> - + ), ], } satisfies 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/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 d9aafe44f7cc9677e5902bc41a021ff3b424fbbf Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Tue, 29 Oct 2024 00:04:35 +0100 Subject: [PATCH 2/9] Move Skip Link into Screen in example as well --- storybook/src/pages/amsterdam/HomePage/HomePage.docs.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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
From 271bf3b1f188beeb41bd501c34798116560d513b Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Tue, 29 Oct 2024 12:14:17 +0100 Subject: [PATCH 3/9] Remove unnecessary fragment --- .../src/components/SkipLink/SkipLink.stories.tsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/storybook/src/components/SkipLink/SkipLink.stories.tsx b/storybook/src/components/SkipLink/SkipLink.stories.tsx index a99cd29ff0..0fc5907994 100644 --- a/storybook/src/components/SkipLink/SkipLink.stories.tsx +++ b/storybook/src/components/SkipLink/SkipLink.stories.tsx @@ -28,13 +28,11 @@ const meta = { }, decorators: [ (Story) => ( - <> - - - - - - + + + + + ), ], } satisfies Meta From b4b069a6c71d65f9fe8150adeef4ce1d0383eced Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Fri, 8 Nov 2024 14:50:31 +0100 Subject: [PATCH 4/9] Fix merge --- storybook/src/components/Breakout/Breakout.stories.tsx | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/storybook/src/components/Breakout/Breakout.stories.tsx b/storybook/src/components/Breakout/Breakout.stories.tsx index 383261a874..a5fbee7d49 100644 --- a/storybook/src/components/Breakout/Breakout.stories.tsx +++ b/storybook/src/components/Breakout/Breakout.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { AspectRatio, Image, Paragraph, Screen, Spotlight } from '@amsterdam/design-system-react' +import { Image, Paragraph, Screen, Spotlight } from '@amsterdam/design-system-react' import { Breakout } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' @@ -45,9 +45,7 @@ export const Default: Story = { rowSpan={2} rowStart={1} > - - - + , ], }, @@ -57,9 +55,7 @@ export const VerticalLayout: Story = { args: { children: [ - - - + , From 66587bdaf1c845ebd803257bd5e52e07fa399e24 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Fri, 8 Nov 2024 14:35:49 +0100 Subject: [PATCH 5/9] Restore root selector for HTML tab --- storybook/config/preview.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/storybook/config/preview.tsx b/storybook/config/preview.tsx index b6f5ce4433..484f129b4f 100644 --- a/storybook/config/preview.tsx +++ b/storybook/config/preview.tsx @@ -58,4 +58,7 @@ export const parameters = { viewports, }, viewMode: 'docs', + html: { + root: '.ams-screen', + }, } From 1ae4dfb71c34fbb23c60977ebcea8ca05091eb73 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Fri, 8 Nov 2024 14:47:09 +0100 Subject: [PATCH 6/9] Add type to Story function --- storybook/config/preview.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/storybook/config/preview.tsx b/storybook/config/preview.tsx index 484f129b4f..2e2c0de51f 100644 --- a/storybook/config/preview.tsx +++ b/storybook/config/preview.tsx @@ -6,6 +6,7 @@ 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 = { @@ -16,7 +17,7 @@ export const argTypes = { // Wrap in Screen, set language to Dutch for Canvas and Stories export const decorators = [ - (Story: any) => ( + (Story: StoryFn) => ( From 820aa53043513bbadfefcdec511a59b808afdb56 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Fri, 8 Nov 2024 15:04:35 +0100 Subject: [PATCH 7/9] Instruct to position the Skip Link within the Screen --- .../css/src/components/skip-link/README.md | 24 +++++++++---------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/packages/css/src/components/skip-link/README.md b/packages/css/src/components/skip-link/README.md index 160262d603..2f87ec61d5 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 navigating past recurring content, such as a menu in the header or the breadcrumbs 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. From e519b8555bb0201ea56ed038ecf1895bde1cd2e2 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Fri, 8 Nov 2024 15:14:23 +0100 Subject: [PATCH 8/9] Restore part of the wording of the rationale --- packages/css/src/components/skip-link/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/css/src/components/skip-link/README.md b/packages/css/src/components/skip-link/README.md index 2f87ec61d5..2c037b94ea 100644 --- a/packages/css/src/components/skip-link/README.md +++ b/packages/css/src/components/skip-link/README.md @@ -2,7 +2,7 @@ # Skip Link -Allows navigating past recurring content, such as a menu in the header or the breadcrumbs of a page. +Allows skipping past recurring navigation blocks at the top of a page. ## Design From 3f771d60ef6e38efe17a0ca40e195fadf7ec2254 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Fri, 8 Nov 2024 15:24:37 +0100 Subject: [PATCH 9/9] Remove incorrect decorator from Skip Link --- .../src/components/SkipLink/SkipLink.stories.tsx | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/storybook/src/components/SkipLink/SkipLink.stories.tsx b/storybook/src/components/SkipLink/SkipLink.stories.tsx index 0fc5907994..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 } 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,15 +26,6 @@ const meta = { table: { disable: true }, }, }, - decorators: [ - (Story) => ( - - - - - - ), - ], } satisfies Meta export default meta