Merge branch 'develop' of https://github.com/Amsterdam/design-system …

…into feature/DES-630-accordion-update
Amsterdam · Apr 16, 2024 · 59c3563 · 59c3563
2 parents eb4a9ca + 104ee42
commit 59c3563
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 97 deletions.
diff --git a/storybook/src/components/Blockquote/Blockquote.stories.tsx b/storybook/src/components/Blockquote/Blockquote.stories.tsx
@@ -5,6 +5,7 @@
 
 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()
@@ -21,31 +22,17 @@ const meta = {
       table: { disable: false },
     },
   },
+  decorators: [inverseColorDecorator],
 } satisfies Meta<typeof Blockquote>
 
 export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  decorators: [
-    (Story, context) => (
-      <div className={context.args.inverseColor ? 'ams-docs-dark-background' : undefined}>
-        <Story />
-      </div>
-    ),
-  ],
-}
+export const Default: Story = {}
 
 export const InvertedColor: Story = {
   args: {
     inverseColor: true,
   },
-  decorators: [
-    (Story, context) => (
-      <div className={context.args.inverseColor ? 'ams-docs-dark-background' : undefined}>
-        <Story />
-      </div>
-    ),
-  ],
 }
diff --git a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx
@@ -5,20 +5,15 @@
 
 import { DescriptionList } from '@amsterdam/design-system-react'
 import { Meta, StoryObj } from '@storybook/react'
+import { inverseColorDecorator } from '../shared/decorators'
 import { exampleParagraph } from '../shared/exampleContent'
 
 const paragraph = exampleParagraph()
 
 const meta = {
   title: 'Components/Text/Description List',
   component: DescriptionList,
-  decorators: [
-    (Story, context) => (
-      <div className={context.args['inverseColor'] ? 'ams-docs-dark-background' : undefined}>
-        <Story />
-      </div>
-    ),
-  ],
+  decorators: [inverseColorDecorator],
   args: {
     children: [
       <DescriptionList.Term key={1}>Gebied</DescriptionList.Term>,

diff --git a/storybook/src/components/Heading/Heading.stories.tsx b/storybook/src/components/Heading/Heading.stories.tsx
@@ -5,6 +5,7 @@
 
 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()
@@ -21,21 +22,14 @@ const meta = {
       table: { disable: false },
     },
   },
+  decorators: [inverseColorDecorator],
 } satisfies Meta<typeof Heading>
 
 export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  decorators: [
-    (Story, context) => (
-      <div className={context.args.inverseColor ? 'ams-docs-dark-background' : undefined}>
-        <Story />
-      </div>
-    ),
-  ],
-}
+export const Default: Story = {}
 
 export const Heading1: Story = {}
 
@@ -61,11 +55,4 @@ export const InvertedColor: Story = {
   args: {
     inverseColor: true,
   },
-  decorators: [
-    (Story, context) => (
-      <div className={context.args.inverseColor ? 'ams-docs-dark-background' : undefined}>
-        <Story />
-      </div>
-    ),
-  ],
 }
diff --git a/storybook/src/components/OrderedList/OrderedList.stories.tsx b/storybook/src/components/OrderedList/OrderedList.stories.tsx
@@ -5,6 +5,7 @@
 
 import { Heading, OrderedList, Paragraph } 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) => (
@@ -25,13 +26,7 @@ const meta = {
     reversed: { control: 'boolean' },
     start: { control: 'number' },
   },
-  decorators: [
-    (Story, context) => (
-      <div className={context.args.inverseColor ? 'ams-docs-dark-background' : undefined}>
-        <Story />
-      </div>
-    ),
-  ],
+  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,6 +5,7 @@
 
 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',
@@ -18,43 +19,17 @@ const meta = {
       table: { disable: false },
     },
   },
+  decorators: [inverseColorDecorator],
 } satisfies Meta<typeof PageHeading>
 
 export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  decorators: [
-    (Story, context) => (
-      <div
-        style={{
-          background: context.args.inverseColor ? '#004699' : 'transparent',
-          margin: context.args.inverseColor ? -16 : 0,
-          padding: context.args.inverseColor ? 16 : 0,
-        }}
-      >
-        <Story />
-      </div>
-    ),
-  ],
-}
+export const Default: Story = {}
 
 export const InvertedColor: Story = {
   args: {
     inverseColor: true,
   },
-  decorators: [
-    (Story) => (
-      <div
-        style={{
-          background: '#004699',
-          margin: -16,
-          padding: 16,
-        }}
-      >
-        <Story />
-      </div>
-    ),
-  ],
 }
diff --git a/storybook/src/components/Paragraph/Paragraph.stories.tsx b/storybook/src/components/Paragraph/Paragraph.stories.tsx
@@ -5,6 +5,7 @@
 
 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()
@@ -28,21 +29,14 @@ const meta = {
       options: ['small', undefined, 'large'],
     },
   },
+  decorators: [inverseColorDecorator],
 } satisfies Meta<typeof Paragraph>
 
 export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  decorators: [
-    (Story, context) => (
-      <div className={context.args.inverseColor ? 'ams-docs-dark-background' : undefined}>
-        <Story />
-      </div>
-    ),
-  ],
-}
+export const Default: Story = {}
 
 export const Large: Story = {
   args: {
@@ -60,11 +54,4 @@ export const InvertedColor: Story = {
   args: {
     inverseColor: true,
   },
-  decorators: [
-    (Story, context) => (
-      <div className={context.args.inverseColor ? 'ams-docs-dark-background' : undefined}>
-        <Story />
-      </div>
-    ),
-  ],
 }
diff --git a/storybook/src/components/UnorderedList/UnorderedList.stories.tsx b/storybook/src/components/UnorderedList/UnorderedList.stories.tsx
@@ -15,6 +15,7 @@ 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) => (
@@ -29,13 +30,7 @@ const meta = {
     inverseColor: false,
     markers: undefined,
   },
-  decorators: [
-    (Story, context) => (
-      <div className={context.args.inverseColor ? 'ams-docs-dark-background' : undefined}>
-        <Story />
-      </div>
-    ),
-  ],
+  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
@@ -0,0 +1,13 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+import type { StoryContext, StoryFn } from '@storybook/react'
+
+/** Applies a dark background colour if the `inverseColor` arg is true. */
+export const inverseColorDecorator = (Story: StoryFn, context: StoryContext) => (
+  <div className={context.args['inverseColor'] ? 'ams-docs-dark-background' : undefined}>
+    <Story />
+  </div>
+)