Merge branch 'develop' into feature/DES-884-semantic-elements-for-grid

Amsterdam · Nov 11, 2024 · e3d2052 · e3d2052
2 parents e36ba8b + e5725a7
commit e3d2052
Show file tree

Hide file tree

Showing 25 changed files with 74 additions and 115 deletions.
diff --git 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 `<body>` 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/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/storybook/config/preview.tsx b/storybook/config/preview.tsx
@@ -4,7 +4,10 @@ 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 { StoryContext, StoryFn } from '@storybook/react'
+import clsx from 'clsx'
 import { viewports } from './viewports'
 
 export const argTypes = {
@@ -13,12 +16,18 @@ 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) => (
-    <div lang="nl">
+  (Story: StoryFn, { args }: StoryContext) => (
+    <Screen
+      className={clsx({
+        'ams-docs-dark-background': args['inverseColor'],
+        'ams-docs-light-background': args['contrastColor'],
+      })}
+      lang="nl"
+    >
       <Story />
-    </div>
+    </Screen>
   ),
   withThemeByClassName({
     themes: {
@@ -58,6 +67,6 @@ export const parameters = {
   },
   viewMode: 'docs',
   html: {
-    root: 'div[lang="nl"]',
+    root: '.ams-screen',
   },
 }
diff --git 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
@@ -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<typeof Blockquote>
 
 export default meta

diff --git 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}
       >
-        <Image alt="" src="https://picsum.photos/960/960" aspectRatio="square" />
+        <Image alt="" aspectRatio="square" src="https://picsum.photos/960/960" />
       </Breakout.Cell>,
     ],
   },

diff --git 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: [
       <DescriptionList.Term key={1}>Het hoger onderwijs</DescriptionList.Term>,

diff --git 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'
@@ -81,23 +80,23 @@ const BackgroundGrid = () => (
 const StoryTemplate: Story = {
   decorators: [
     (Story) => (
-      <Screen>
+      <>
         <BackgroundGrid />
         <Story />
-      </Screen>
+      </>
     ),
   ],
 }
 
 const CellStoryTemplate: CellStory = {
   decorators: [
     (Story) => (
-      <Screen>
+      <>
         <BackgroundGrid />
         <Grid paddingVertical="medium">
           <Story />
         </Grid>
-      </Screen>
+      </>
     ),
   ],
   render: ({ children, ...args }) => <Grid.Cell {...args}>{children}</Grid.Cell>,

diff --git 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<typeof Heading>
 
 export default meta

diff --git 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<typeof IconButton>
 
 export default meta

diff --git 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) => (
-      <Screen>
-        <Story />
-      </Screen>
-    ),
-  ],
 } satisfies Meta<typeof ImageSlider>
 
 export default meta

diff --git 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<typeof Link>
 
@@ -30,7 +29,6 @@ const meta = {
       type: { name: 'string', required: false },
     },
   },
-  decorators: [inverseColorDecorator, contrastColorDecorator],
 } satisfies Meta<typeof Link>
 
 export default meta

diff --git 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 = {
         <Story />
       </LinkList>
     ),
-    inverseColorDecorator,
-    contrastColorDecorator,
   ],
   render: ({ children, ...args }) => <LinkList.Link {...args}>{children}</LinkList.Link>,
 }

diff --git 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) => (
-      <Screen>
-        <Story />
-      </Screen>
-    ),
-  ],
 } satisfies Meta<typeof MegaMenu>
 
 export default meta

diff --git 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<typeof OrderedList>
 
 export default meta

diff --git 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<typeof PageHeading>
 
 export default meta

diff --git 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 }) => (
+      <div key={JSON.stringify(args)} id="ams-docs-custom-root">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    html: {
+      root: '#ams-docs-custom-root',
+    },
+  },
 } satisfies Meta<typeof Pagination>
 
 export default meta

diff --git 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<typeof Paragraph>
 
 export default meta

diff --git 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) => (
-      <Screen>
-        <Grid>
-          <Grid.Cell span="all">
-            <Story />
-          </Grid.Cell>
-        </Grid>
-      </Screen>
-    ),
-  ],
 } satisfies Meta<typeof SkipLink>
 
 export default meta