chore: Merge decorators (#1747)

Amsterdam · Nov 11, 2024 · e5725a7 · e5725a7
1 parent 473f740
commit e5725a7
Show file tree

Hide file tree

Showing 15 changed files with 22 additions and 48 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git 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) => (
-    <Screen lang="nl">
+  (Story: StoryFn, { args }: StoryContext) => (
+    <Screen
+      className={clsx({
+        'ams-docs-dark-background': args['inverseColor'],
+        'ams-docs-light-background': args['contrastColor'],
+      })}
+      lang="nl"
+    >
       <Story />
     </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/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/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/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/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/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/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<typeof UnorderedList>
 
 export default meta

diff --git a/storybook/src/components/shared/decorators.tsx b/storybook/src/components/shared/decorators.tsx
diff --git 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%;