From 48c961023932d673ff815d6e123e61670ed9d1d0 Mon Sep 17 00:00:00 2001 From: Aram <37216945+alimpens@users.noreply.github.com> Date: Fri, 5 Apr 2024 14:21:23 +0200 Subject: [PATCH] fix: Fix autodocs for stories (#1149) Co-authored-by: Vincent Smedinga --- documentation/storybook.md | 22 ++++++++++++++++++- packages/react/src/Accordion/Accordion.tsx | 1 + .../react/src/Accordion/AccordionSection.tsx | 2 +- packages/react/src/Heading/Heading.tsx | 14 +----------- .../react/src/Heading/getHeadingElement.ts | 14 ++++++++++++ packages/react/src/Image/Image.tsx | 2 +- plop-templates/storybook.stories.tsx.hbs | 2 +- storybook/config/main.ts | 3 +++ .../Accordion/Accordion.stories.tsx | 15 +------------ .../src/components/Alert/Alert.stories.tsx | 19 +--------------- .../AspectRatio/AspectRatio.stories.tsx | 2 +- .../src/components/Avatar/Avatar.stories.tsx | 11 +--------- .../src/components/Badge/Badge.stories.tsx | 11 +--------- .../Blockquote/Blockquote.stories.tsx | 3 +-- .../Breadcrumb/Breadcrumb.stories.tsx | 2 +- .../src/components/Button/Button.stories.tsx | 7 +----- .../src/components/Card/Card.stories.tsx | 2 +- .../components/Checkbox/Checkbox.stories.tsx | 2 +- .../src/components/Column/Column.stories.tsx | 9 +------- .../src/components/Dialog/Dialog.stories.tsx | 2 +- .../components/Fieldset/Fieldset.stories.tsx | 2 +- .../src/components/Footer/Footer.stories.tsx | 10 ++++++++- .../FormFieldCharacterCounter.stories.tsx | 2 +- .../FormLabel/FormLabel.stories.tsx | 2 +- storybook/src/components/Grid/Grid.docs.mdx | 4 +++- .../src/components/Grid/Grid.stories.tsx | 4 ++-- .../src/components/Header/Header.docs.mdx | 4 +++- .../src/components/Header/Header.stories.tsx | 10 +-------- .../components/Heading/Heading.stories.tsx | 11 +--------- .../src/components/Icon/Icon.stories.tsx | 13 +---------- .../IconButton/IconButton.stories.tsx | 3 +-- .../src/components/Image/Image.stories.tsx | 2 +- .../src/components/Link/Link.stories.tsx | 15 +------------ .../components/LinkList/LinkList.stories.tsx | 2 +- .../src/components/Logo/Logo.stories.tsx | 17 +------------- .../src/components/Mark/Mark.stories.tsx | 5 +---- .../components/MegaMenu/MegaMenu.stories.tsx | 2 +- .../OrderedList/OrderedList.stories.tsx | 4 +--- .../components/Overlap/Overlap.stories.tsx | 2 +- .../PageHeading/PageHeading.stories.tsx | 3 +-- .../components/PageMenu/PageMenu.stories.tsx | 13 ++--------- .../Pagination/Pagination.stories.tsx | 2 +- .../Paragraph/Paragraph.stories.tsx | 2 +- .../src/components/Radio/Radio.stories.tsx | 2 +- storybook/src/components/Row/Row.stories.tsx | 6 +---- .../src/components/Screen/Screen.docs.mdx | 4 +++- .../src/components/Screen/Screen.stories.tsx | 2 +- .../SearchField/SearchField.stories.tsx | 4 ++-- .../components/SkipLink/SkipLink.stories.tsx | 2 +- .../Spotlight/Spotlight.stories.tsx | 16 +------------- .../src/components/Switch/Switch.stories.tsx | 5 +---- .../src/components/Table/Table.stories.tsx | 2 +- .../src/components/Tabs/Tabs.stories.tsx | 2 +- .../components/TextArea/TextArea.stories.tsx | 7 +----- .../TextInput/TextInput.stories.tsx | 2 +- .../TopTaskLink/TopTaskLink.stories.tsx | 2 +- .../UnorderedList/UnorderedList.stories.tsx | 6 +---- .../VisuallyHidden/VisuallyHidden.stories.tsx | 2 +- .../docs/components/AmsterdamIconGallery.tsx | 2 +- 59 files changed, 111 insertions(+), 234 deletions(-) create mode 100644 packages/react/src/Heading/getHeadingElement.ts diff --git a/documentation/storybook.md b/documentation/storybook.md index 31c3b1698c..2c89b131c5 100644 --- a/documentation/storybook.md +++ b/documentation/storybook.md @@ -2,7 +2,7 @@ # Storybook guidelines -We use Storybook 7 to display all components and allow interaction with them. +We use Storybook to display all components and allow interaction with them. We publish each merge to the `main` branch to [amsterdam.github.io/design-system](https://amsterdam.github.io/design-system/). @@ -20,6 +20,11 @@ We write our documentation in English, the stories are Dutch. ## Best practices for controls +Controls are automatically generated based on the component’s typing. +If you want to document native HTML attributes, you can use [`argTypes`](https://storybook.js.org/docs/api/arg-types). +You can also use `argTypes` to override the automatically generated controls. +Be sure to follow these guidelines when you do: + 1. For props offering five options or less, use radio buttons rather than a select. This makes it easier to compare the options. It saves the user a click to select each option and shows everything up front. @@ -28,6 +33,21 @@ We write our documentation in English, the stories are Dutch. More to follow. +By default, we hide the `children` prop from the controls. +Children of React components are often React components themselves, which isn't very useful to show in Storybook. +However, sometimes it is useful to add `children` to the controls. +For example, when the child is a simple string (like in the default Button component story). + +To do this, you can override the default like so: + +```js +argTypes: { + children: { + table: { disable: false }, + }, +}, +``` + ## Best practices for stories 1. Use decorators and / or `args.children` before reaching for `render`. `render` can easily mess up the stories’ code view. diff --git a/packages/react/src/Accordion/Accordion.tsx b/packages/react/src/Accordion/Accordion.tsx index 85ee8e210f..28d0600742 100644 --- a/packages/react/src/Accordion/Accordion.tsx +++ b/packages/react/src/Accordion/Accordion.tsx @@ -12,6 +12,7 @@ import { HeadingLevel } from '../Heading/Heading' import { useKeyboardFocus } from '../common/useKeyboardFocus' export type AccordionProps = { + /** The hierarchical level of the accordion title within the document. */ headingLevel: HeadingLevel section?: boolean } & PropsWithChildren> diff --git a/packages/react/src/Accordion/AccordionSection.tsx b/packages/react/src/Accordion/AccordionSection.tsx index b5dcd4ab0e..4865faa134 100644 --- a/packages/react/src/Accordion/AccordionSection.tsx +++ b/packages/react/src/Accordion/AccordionSection.tsx @@ -8,7 +8,7 @@ import clsx from 'clsx' import { forwardRef, useContext, useId, useState } from 'react' import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react' import AccordionContext from './AccordionContext' -import { getHeadingElement } from '../Heading/Heading' +import { getHeadingElement } from '../Heading/getHeadingElement' import { Icon } from '../Icon/Icon' export type AccordionSectionProps = { diff --git a/packages/react/src/Heading/Heading.tsx b/packages/react/src/Heading/Heading.tsx index f22914038c..3844508c5b 100644 --- a/packages/react/src/Heading/Heading.tsx +++ b/packages/react/src/Heading/Heading.tsx @@ -7,6 +7,7 @@ import clsx from 'clsx' import { forwardRef } from 'react' import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react' +import { getHeadingElement } from './getHeadingElement' export type HeadingLevel = 1 | 2 | 3 | 4 type HeadingSize = 'level-1' | 'level-2' | 'level-3' | 'level-4' | 'level-5' | 'level-6' @@ -28,19 +29,6 @@ export type HeadingProps = { inverseColor?: boolean } & PropsWithChildren> -export function getHeadingElement(level: HeadingLevel) { - switch (level) { - case 2: - return 'h2' - case 3: - return 'h3' - case 4: - return 'h4' - default: - return 'h1' - } -} - export const Heading = forwardRef( ( { children, className, inverseColor, level = 1, size, ...restProps }: HeadingProps, diff --git a/packages/react/src/Heading/getHeadingElement.ts b/packages/react/src/Heading/getHeadingElement.ts new file mode 100644 index 0000000000..04c13683a3 --- /dev/null +++ b/packages/react/src/Heading/getHeadingElement.ts @@ -0,0 +1,14 @@ +import { HeadingLevel } from './Heading' + +export function getHeadingElement(level: HeadingLevel) { + switch (level) { + case 2: + return 'h2' + case 3: + return 'h3' + case 4: + return 'h4' + default: + return 'h1' + } +} diff --git a/packages/react/src/Image/Image.tsx b/packages/react/src/Image/Image.tsx index e094ab83e7..0d91832ad0 100644 --- a/packages/react/src/Image/Image.tsx +++ b/packages/react/src/Image/Image.tsx @@ -8,7 +8,7 @@ import { forwardRef } from 'react' import type { ForwardedRef, ImgHTMLAttributes } from 'react' export type ImageProps = { - cover?: Boolean + cover?: boolean } & ImgHTMLAttributes export const Image = forwardRef( diff --git a/plop-templates/storybook.stories.tsx.hbs b/plop-templates/storybook.stories.tsx.hbs index 2413bd2990..20f34ccfd2 100644 --- a/plop-templates/storybook.stories.tsx.hbs +++ b/plop-templates/storybook.stories.tsx.hbs @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { {{pascalCase name}} } from '@amsterdam/design-system-react' +import { {{pascalCase name}} } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' const meta = { diff --git a/storybook/config/main.ts b/storybook/config/main.ts index 625b850cb3..f729adbb0e 100644 --- a/storybook/config/main.ts +++ b/storybook/config/main.ts @@ -30,6 +30,9 @@ const config: StorybookConfig = { docs: { autodocs: true, }, + typescript: { + reactDocgen: 'react-docgen-typescript', + }, } export default config diff --git a/storybook/src/components/Accordion/Accordion.stories.tsx b/storybook/src/components/Accordion/Accordion.stories.tsx index 9b77a104ab..d8abf573e7 100644 --- a/storybook/src/components/Accordion/Accordion.stories.tsx +++ b/storybook/src/components/Accordion/Accordion.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { Accordion, Paragraph } from '@amsterdam/design-system-react' +import { Accordion, Paragraph } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' import { exampleParagraph } from '../shared/exampleContent' @@ -17,19 +17,6 @@ const meta = { args: { headingLevel: 1, }, - argTypes: { - headingLevel: { - control: { - type: 'radio', - }, - options: [1, 2, 3, 4], - }, - section: { - control: { - type: 'boolean', - }, - }, - }, } satisfies Meta export default meta diff --git a/storybook/src/components/Alert/Alert.stories.tsx b/storybook/src/components/Alert/Alert.stories.tsx index 10cb5d6b71..356f4620b7 100644 --- a/storybook/src/components/Alert/Alert.stories.tsx +++ b/storybook/src/components/Alert/Alert.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { Alert, Link, Paragraph, UnorderedList } from '@amsterdam/design-system-react' +import { Alert, Link, Paragraph, UnorderedList } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' const meta = { @@ -13,23 +13,6 @@ const meta = { title: 'Let op', closeable: false, }, - argTypes: { - severity: { - control: { - type: 'radio', - }, - options: ['warning', 'error', 'success', 'info'], - }, - closeable: { - control: { - type: 'boolean', - default: false, - }, - }, - onClose: { - action: 'onClose', - }, - }, } satisfies Meta export default meta diff --git a/storybook/src/components/AspectRatio/AspectRatio.stories.tsx b/storybook/src/components/AspectRatio/AspectRatio.stories.tsx index 30b144d457..9c84e5acda 100644 --- a/storybook/src/components/AspectRatio/AspectRatio.stories.tsx +++ b/storybook/src/components/AspectRatio/AspectRatio.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { AspectRatio, Image } from '@amsterdam/design-system-react' +import { AspectRatio, Image } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' const meta = { diff --git a/storybook/src/components/Avatar/Avatar.stories.tsx b/storybook/src/components/Avatar/Avatar.stories.tsx index b60a6a00d4..53014afa35 100644 --- a/storybook/src/components/Avatar/Avatar.stories.tsx +++ b/storybook/src/components/Avatar/Avatar.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { Avatar, Header, PageMenu } from '@amsterdam/design-system-react' +import { Avatar, Header, PageMenu } from '@amsterdam/design-system-react/src' import { SearchIcon } from '@amsterdam/design-system-react-icons' import { Meta, StoryObj } from '@storybook/react' @@ -14,15 +14,6 @@ const meta = { label: 'DS', imageSrc: '', }, - argTypes: { - color: { - control: { - type: 'select', - }, - options: ['blue', 'dark-blue', 'dark-green', 'green', 'magenta', 'orange', 'purple', 'red', 'yellow'], - selected: 'dark-blue', - }, - }, } satisfies Meta export default meta diff --git a/storybook/src/components/Badge/Badge.stories.tsx b/storybook/src/components/Badge/Badge.stories.tsx index 739115b0a0..78a68cc540 100644 --- a/storybook/src/components/Badge/Badge.stories.tsx +++ b/storybook/src/components/Badge/Badge.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { Badge } from '@amsterdam/design-system-react' +import { Badge } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' const meta = { @@ -12,15 +12,6 @@ const meta = { args: { label: 'Tip', }, - argTypes: { - color: { - control: { - type: 'select', - }, - options: ['blue', 'dark-blue', 'dark-green', 'green', 'magenta', 'orange', 'purple', 'yellow'], - selected: 'dark-green', - }, - }, } satisfies Meta export default meta diff --git a/storybook/src/components/Blockquote/Blockquote.stories.tsx b/storybook/src/components/Blockquote/Blockquote.stories.tsx index 15945b42cd..9cf5a61c37 100644 --- a/storybook/src/components/Blockquote/Blockquote.stories.tsx +++ b/storybook/src/components/Blockquote/Blockquote.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { Blockquote } from '@amsterdam/design-system-react' +import { Blockquote } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' import { exampleQuote } from '../shared/exampleContent' @@ -20,7 +20,6 @@ const meta = { children: { table: { disable: false }, }, - inverseColor: { control: 'boolean' }, }, } satisfies Meta diff --git a/storybook/src/components/Breadcrumb/Breadcrumb.stories.tsx b/storybook/src/components/Breadcrumb/Breadcrumb.stories.tsx index 8128c74c5a..865377a9ff 100644 --- a/storybook/src/components/Breadcrumb/Breadcrumb.stories.tsx +++ b/storybook/src/components/Breadcrumb/Breadcrumb.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { Breadcrumb } from '@amsterdam/design-system-react' +import { Breadcrumb } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' const meta = { diff --git a/storybook/src/components/Button/Button.stories.tsx b/storybook/src/components/Button/Button.stories.tsx index b730a97601..eb9657e8a6 100644 --- a/storybook/src/components/Button/Button.stories.tsx +++ b/storybook/src/components/Button/Button.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { Button, Icon } from '@amsterdam/design-system-react' +import { Button, Icon } from '@amsterdam/design-system-react/src' import { ShareIcon } from '@amsterdam/design-system-react-icons' import { Meta, StoryObj } from '@storybook/react' @@ -19,11 +19,6 @@ const meta = { children: { table: { disable: false }, }, - disabled: { control: 'boolean' }, - variant: { - control: 'select', - options: ['primary', 'secondary', 'tertiary'], - }, }, } satisfies Meta diff --git a/storybook/src/components/Card/Card.stories.tsx b/storybook/src/components/Card/Card.stories.tsx index f47beb3785..24e8a4666c 100644 --- a/storybook/src/components/Card/Card.stories.tsx +++ b/storybook/src/components/Card/Card.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { AspectRatio, Card, Heading, Image, Paragraph } from '@amsterdam/design-system-react' +import { AspectRatio, Card, Heading, Image, Paragraph } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' const dateFormat = new Intl.DateTimeFormat('nl', { diff --git a/storybook/src/components/Checkbox/Checkbox.stories.tsx b/storybook/src/components/Checkbox/Checkbox.stories.tsx index 58d00ea525..1c5d0720d2 100644 --- a/storybook/src/components/Checkbox/Checkbox.stories.tsx +++ b/storybook/src/components/Checkbox/Checkbox.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { Checkbox } from '@amsterdam/design-system-react' +import { Checkbox } from '@amsterdam/design-system-react/src' import { useArgs } from '@storybook/preview-api' import { Meta, StoryObj } from '@storybook/react' diff --git a/storybook/src/components/Column/Column.stories.tsx b/storybook/src/components/Column/Column.stories.tsx index 62323879f0..d7f8782858 100644 --- a/storybook/src/components/Column/Column.stories.tsx +++ b/storybook/src/components/Column/Column.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { Card, Column, Heading, Paragraph } from '@amsterdam/design-system-react' +import { Card, Column, Heading, Paragraph } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' const ThreeBoxes = Array.from(Array(3).keys()).map((i) => ( @@ -19,13 +19,6 @@ const meta = { children: ThreeBoxes, }, argTypes: { - as: { - control: { type: 'radio' }, - options: ['article', 'div', 'section'], - }, - children: { - table: { disable: true }, - }, gap: { control: 'radio', options: ['extra-small', 'small', 'medium', 'large', 'extra-large'], diff --git a/storybook/src/components/Dialog/Dialog.stories.tsx b/storybook/src/components/Dialog/Dialog.stories.tsx index 9c6c335c27..c11d4d9e44 100644 --- a/storybook/src/components/Dialog/Dialog.stories.tsx +++ b/storybook/src/components/Dialog/Dialog.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { Button, Dialog, Heading, Paragraph } from '@amsterdam/design-system-react' +import { Button, Dialog, Heading, Paragraph } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' const meta = { diff --git a/storybook/src/components/Fieldset/Fieldset.stories.tsx b/storybook/src/components/Fieldset/Fieldset.stories.tsx index 18dc352679..563ed7ce5d 100644 --- a/storybook/src/components/Fieldset/Fieldset.stories.tsx +++ b/storybook/src/components/Fieldset/Fieldset.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { Checkbox, Fieldset } from '@amsterdam/design-system-react' +import { Checkbox, Fieldset } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' const meta = { diff --git a/storybook/src/components/Footer/Footer.stories.tsx b/storybook/src/components/Footer/Footer.stories.tsx index 786c24d353..2d65c76acf 100644 --- a/storybook/src/components/Footer/Footer.stories.tsx +++ b/storybook/src/components/Footer/Footer.stories.tsx @@ -3,7 +3,15 @@ * Copyright Gemeente Amsterdam */ -import { Footer, Grid, Heading, LinkList, PageMenu, Paragraph, VisuallyHidden } from '@amsterdam/design-system-react' +import { + Footer, + Grid, + Heading, + LinkList, + PageMenu, + Paragraph, + VisuallyHidden, +} from '@amsterdam/design-system-react/src' import { EmailIcon, PhoneIcon } from '@amsterdam/design-system-react-icons' import { Meta, StoryObj } from '@storybook/react' diff --git a/storybook/src/components/FormFieldCharacterCounter/FormFieldCharacterCounter.stories.tsx b/storybook/src/components/FormFieldCharacterCounter/FormFieldCharacterCounter.stories.tsx index 86b7b36d5c..a42124eb3c 100644 --- a/storybook/src/components/FormFieldCharacterCounter/FormFieldCharacterCounter.stories.tsx +++ b/storybook/src/components/FormFieldCharacterCounter/FormFieldCharacterCounter.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { FormFieldCharacterCounter } from '@amsterdam/design-system-react' +import { FormFieldCharacterCounter } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' const meta = { diff --git a/storybook/src/components/FormLabel/FormLabel.stories.tsx b/storybook/src/components/FormLabel/FormLabel.stories.tsx index 124a2f79eb..4ab6aa5e3a 100644 --- a/storybook/src/components/FormLabel/FormLabel.stories.tsx +++ b/storybook/src/components/FormLabel/FormLabel.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { FormLabel } from '@amsterdam/design-system-react' +import { FormLabel } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' const meta = { diff --git a/storybook/src/components/Grid/Grid.docs.mdx b/storybook/src/components/Grid/Grid.docs.mdx index dab60a3c8a..d842ab3193 100644 --- a/storybook/src/components/Grid/Grid.docs.mdx +++ b/storybook/src/components/Grid/Grid.docs.mdx @@ -1,4 +1,4 @@ -import { Canvas, Markdown, Meta, Primary } from "@storybook/blocks"; +import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as GridStories from "./Grid.stories"; import README from "../../../../packages/css/src/components/grid/README.md?raw"; @@ -16,6 +16,8 @@ On narrow screens, you will see three rows of four columns; on medium-wide scree + + ### Vertical Margin Unlike the horizontal margins between columns, the vertical ones above and below are adjustable. diff --git a/storybook/src/components/Grid/Grid.stories.tsx b/storybook/src/components/Grid/Grid.stories.tsx index 52fa7648ef..561e3802e1 100644 --- a/storybook/src/components/Grid/Grid.stories.tsx +++ b/storybook/src/components/Grid/Grid.stories.tsx @@ -3,8 +3,8 @@ * Copyright Gemeente Amsterdam */ -import { Grid, Screen } from '@amsterdam/design-system-react' -import type { GridCellProps } from '@amsterdam/design-system-react' +import { Grid, Screen } from '@amsterdam/design-system-react/src' +import type { GridCellProps } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' import { paddingArgType } from '../shared/argTypes' diff --git a/storybook/src/components/Header/Header.docs.mdx b/storybook/src/components/Header/Header.docs.mdx index 185ac40072..1f0ed5f1ab 100644 --- a/storybook/src/components/Header/Header.docs.mdx +++ b/storybook/src/components/Header/Header.docs.mdx @@ -1,4 +1,4 @@ -import { Canvas, Markdown, Meta, Primary } from "@storybook/blocks"; +import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as HeaderStories from "./Header.stories.tsx"; import README from "../../../../packages/css/src/components/header/README.md?raw"; @@ -8,6 +8,8 @@ import README from "../../../../packages/css/src/components/header/README.md?raw + + ## With logo variant diff --git a/storybook/src/components/Header/Header.stories.tsx b/storybook/src/components/Header/Header.stories.tsx index 78cf35c0ae..e0aea6a44b 100644 --- a/storybook/src/components/Header/Header.stories.tsx +++ b/storybook/src/components/Header/Header.stories.tsx @@ -3,21 +3,13 @@ * Copyright Gemeente Amsterdam */ -import { Header, PageMenu } from '@amsterdam/design-system-react' +import { Header, PageMenu } from '@amsterdam/design-system-react/src' import { SearchIcon } from '@amsterdam/design-system-react-icons' import { Meta, StoryObj } from '@storybook/react' const meta = { title: 'Components/Containers/Header', component: Header, - argTypes: { - logoBrand: { - control: { - type: 'radio', - }, - options: ['amsterdam', 'ggd-amsterdam', 'stadsarchief', 'stadsbank-van-lening', 'vga-verzekeringen'], - }, - }, } satisfies Meta export default meta diff --git a/storybook/src/components/Heading/Heading.stories.tsx b/storybook/src/components/Heading/Heading.stories.tsx index 1ecd353d6d..667a12a281 100644 --- a/storybook/src/components/Heading/Heading.stories.tsx +++ b/storybook/src/components/Heading/Heading.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { Heading } from '@amsterdam/design-system-react' +import { Heading } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' import { exampleHeading } from '../shared/exampleContent' @@ -20,15 +20,6 @@ const meta = { children: { table: { disable: false }, }, - level: { - control: 'radio', - options: [1, 2, 3, 4], - }, - size: { - control: 'radio', - options: ['level-1', 'level-2', 'level-3', 'level-4', 'level-5', 'level-6'], - }, - inverseColor: { control: 'boolean' }, }, } satisfies Meta diff --git a/storybook/src/components/Icon/Icon.stories.tsx b/storybook/src/components/Icon/Icon.stories.tsx index f5a88099e7..12fd25c2f1 100644 --- a/storybook/src/components/Icon/Icon.stories.tsx +++ b/storybook/src/components/Icon/Icon.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { Heading, Icon } from '@amsterdam/design-system-react' +import { Heading, Icon } from '@amsterdam/design-system-react/src' import * as Icons from '@amsterdam/design-system-react-icons' import { Meta, StoryObj } from '@storybook/react' @@ -11,17 +11,6 @@ const meta = { title: 'Components/Media/Icon', component: Icon, argTypes: { - size: { - control: { - type: 'radio', - }, - options: ['level-3', 'level-4', 'level-5', 'level-6'], - }, - square: { - control: { - type: 'boolean', - }, - }, svg: { control: { type: 'select', diff --git a/storybook/src/components/IconButton/IconButton.stories.tsx b/storybook/src/components/IconButton/IconButton.stories.tsx index 86f267023d..03066f42ba 100644 --- a/storybook/src/components/IconButton/IconButton.stories.tsx +++ b/storybook/src/components/IconButton/IconButton.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { IconButton } from '@amsterdam/design-system-react' +import { IconButton } from '@amsterdam/design-system-react/src' import * as Icons from '@amsterdam/design-system-react-icons' import { Meta, StoryObj } from '@storybook/react' @@ -17,7 +17,6 @@ const meta = { size: undefined, }, argTypes: { - disabled: { control: 'boolean' }, onBackground: { control: { type: 'radio', diff --git a/storybook/src/components/Image/Image.stories.tsx b/storybook/src/components/Image/Image.stories.tsx index d526ff8a38..72cef505cc 100644 --- a/storybook/src/components/Image/Image.stories.tsx +++ b/storybook/src/components/Image/Image.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { Image } from '@amsterdam/design-system-react' +import { Image } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' const meta = { diff --git a/storybook/src/components/Link/Link.stories.tsx b/storybook/src/components/Link/Link.stories.tsx index c54c6ed148..8f046f04ac 100644 --- a/storybook/src/components/Link/Link.stories.tsx +++ b/storybook/src/components/Link/Link.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { Link, Paragraph } from '@amsterdam/design-system-react' +import { Link, Paragraph } from '@amsterdam/design-system-react/src' import type { Meta, StoryObj } from '@storybook/react' type Story = StoryObj @@ -26,19 +26,6 @@ const meta = { labels: { undefined: 'default', light: 'light', dark: 'dark' }, }, options: [undefined, 'light', 'dark'], - table: { - category: 'API', - }, - }, - variant: { - control: { - type: 'radio', - }, - options: ['standalone', 'inline'], - table: { - category: 'API', - defaultValue: { summary: 'standalone' }, - }, }, href: { name: 'href', diff --git a/storybook/src/components/LinkList/LinkList.stories.tsx b/storybook/src/components/LinkList/LinkList.stories.tsx index 04f16f06c6..18f3027644 100644 --- a/storybook/src/components/LinkList/LinkList.stories.tsx +++ b/storybook/src/components/LinkList/LinkList.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { LinkList } from '@amsterdam/design-system-react' +import { LinkList } from '@amsterdam/design-system-react/src' import * as Icons from '@amsterdam/design-system-react-icons' import { Meta, StoryObj } from '@storybook/react' import { exampleLinkList } from '../shared/exampleContent' diff --git a/storybook/src/components/Logo/Logo.stories.tsx b/storybook/src/components/Logo/Logo.stories.tsx index f6b2cdb384..41c6d7af6e 100644 --- a/storybook/src/components/Logo/Logo.stories.tsx +++ b/storybook/src/components/Logo/Logo.stories.tsx @@ -3,27 +3,12 @@ * Copyright Gemeente Amsterdam */ -import { Logo } from '@amsterdam/design-system-react' +import { Logo } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' const meta = { title: 'Components/Media/Logo', component: Logo, - argTypes: { - brand: { - control: { - type: 'radio', - }, - options: [ - 'amsterdam', - 'ggd-amsterdam', - 'museum-weesp', - 'stadsarchief', - 'stadsbank-van-lening', - 'vga-verzekeringen', - ], - }, - }, } satisfies Meta export default meta diff --git a/storybook/src/components/Mark/Mark.stories.tsx b/storybook/src/components/Mark/Mark.stories.tsx index 5fe6e49f4a..46bf79062c 100644 --- a/storybook/src/components/Mark/Mark.stories.tsx +++ b/storybook/src/components/Mark/Mark.stories.tsx @@ -3,15 +3,12 @@ * Copyright Gemeente Amsterdam */ -import { Mark, Paragraph } from '@amsterdam/design-system-react' +import { Mark, Paragraph } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' const meta = { title: 'Components/Text/Mark', component: Mark, - args: { - children: 'Nieuw component', - }, argTypes: { children: { table: { disable: false }, diff --git a/storybook/src/components/MegaMenu/MegaMenu.stories.tsx b/storybook/src/components/MegaMenu/MegaMenu.stories.tsx index 67f294bdd3..819c0e5fcf 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, MegaMenu, Screen } from '@amsterdam/design-system-react' +import { Grid, Heading, LinkList, MegaMenu, Screen } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' const meta = { diff --git a/storybook/src/components/OrderedList/OrderedList.stories.tsx b/storybook/src/components/OrderedList/OrderedList.stories.tsx index fc516e6f17..9c78511339 100644 --- a/storybook/src/components/OrderedList/OrderedList.stories.tsx +++ b/storybook/src/components/OrderedList/OrderedList.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { Heading, OrderedList, Paragraph } from '@amsterdam/design-system-react' +import { Heading, OrderedList, Paragraph } from '@amsterdam/design-system-react/src' import type { Meta, StoryObj } from '@storybook/react' import { exampleOrderedList } from '../shared/exampleContent' @@ -22,8 +22,6 @@ const meta = { start: undefined, }, argTypes: { - inverseColor: { control: 'boolean' }, - markers: { control: 'boolean' }, reversed: { control: 'boolean' }, start: { control: 'number' }, }, diff --git a/storybook/src/components/Overlap/Overlap.stories.tsx b/storybook/src/components/Overlap/Overlap.stories.tsx index 238967076d..6530e80ec1 100644 --- a/storybook/src/components/Overlap/Overlap.stories.tsx +++ b/storybook/src/components/Overlap/Overlap.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { AspectRatio, Grid, Image, Overlap, SearchField } from '@amsterdam/design-system-react' +import { AspectRatio, Grid, Image, Overlap, SearchField } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' const meta = { diff --git a/storybook/src/components/PageHeading/PageHeading.stories.tsx b/storybook/src/components/PageHeading/PageHeading.stories.tsx index 93a0dc8a38..f5b01b3882 100644 --- a/storybook/src/components/PageHeading/PageHeading.stories.tsx +++ b/storybook/src/components/PageHeading/PageHeading.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { PageHeading } from '@amsterdam/design-system-react' +import { PageHeading } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' const meta = { @@ -17,7 +17,6 @@ const meta = { children: { table: { disable: false }, }, - inverseColor: { control: 'boolean' }, }, } satisfies Meta diff --git a/storybook/src/components/PageMenu/PageMenu.stories.tsx b/storybook/src/components/PageMenu/PageMenu.stories.tsx index ecf03a4ece..d618024fd3 100644 --- a/storybook/src/components/PageMenu/PageMenu.stories.tsx +++ b/storybook/src/components/PageMenu/PageMenu.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { PageMenu } from '@amsterdam/design-system-react' +import { PageMenu } from '@amsterdam/design-system-react/src' import { LoginIcon, SearchIcon } from '@amsterdam/design-system-react-icons' import { Meta, StoryObj } from '@storybook/react' @@ -12,15 +12,7 @@ const meta = { component: PageMenu, args: { alignEnd: false, - wrap: true, - }, - argTypes: { - alignEnd: { - control: 'boolean', - }, - wrap: { - control: 'boolean', - }, + wrap: undefined, }, } satisfies Meta @@ -55,7 +47,6 @@ export const Alignment: Story = { Zoeken , ], - wrap: false, }, } diff --git a/storybook/src/components/Pagination/Pagination.stories.tsx b/storybook/src/components/Pagination/Pagination.stories.tsx index 52900110a4..b7f7e3e728 100644 --- a/storybook/src/components/Pagination/Pagination.stories.tsx +++ b/storybook/src/components/Pagination/Pagination.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { Pagination } from '@amsterdam/design-system-react' +import { Pagination } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' const meta = { diff --git a/storybook/src/components/Paragraph/Paragraph.stories.tsx b/storybook/src/components/Paragraph/Paragraph.stories.tsx index e3ae8c9063..93549aedc3 100644 --- a/storybook/src/components/Paragraph/Paragraph.stories.tsx +++ b/storybook/src/components/Paragraph/Paragraph.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { Paragraph } from '@amsterdam/design-system-react' +import { Paragraph } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' import { exampleParagraph } from '../shared/exampleContent' diff --git a/storybook/src/components/Radio/Radio.stories.tsx b/storybook/src/components/Radio/Radio.stories.tsx index d3ae617a7d..0b4c834795 100644 --- a/storybook/src/components/Radio/Radio.stories.tsx +++ b/storybook/src/components/Radio/Radio.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { Fieldset, Radio } from '@amsterdam/design-system-react' +import { Fieldset, Radio } from '@amsterdam/design-system-react/src' import { useArgs } from '@storybook/preview-api' import { Meta, StoryObj } from '@storybook/react' diff --git a/storybook/src/components/Row/Row.stories.tsx b/storybook/src/components/Row/Row.stories.tsx index 4bd0bc5654..24325dacb0 100644 --- a/storybook/src/components/Row/Row.stories.tsx +++ b/storybook/src/components/Row/Row.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { Button, Row } from '@amsterdam/design-system-react' +import { Button, Row } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' const ThreeButtons = Array.from(Array(3).keys()).map((i) => ) @@ -15,10 +15,6 @@ const meta = { children: ThreeButtons, }, argTypes: { - as: { - control: { type: 'radio' }, - options: ['article', 'div', 'section'], - }, gap: { control: 'radio', options: ['extra-small', 'small', 'medium', 'large', 'extra-large'], diff --git a/storybook/src/components/Screen/Screen.docs.mdx b/storybook/src/components/Screen/Screen.docs.mdx index bc0494e687..2c000da8c1 100644 --- a/storybook/src/components/Screen/Screen.docs.mdx +++ b/storybook/src/components/Screen/Screen.docs.mdx @@ -1,4 +1,4 @@ -import { Canvas, Markdown, Meta, Primary } from "@storybook/blocks"; +import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as ScreenStories from "./Screen.stories.tsx"; import README from "../../../../packages/css/src/components/screen/README.md?raw"; @@ -8,6 +8,8 @@ import README from "../../../../packages/css/src/components/screen/README.md?raw + + ## Extra wide diff --git a/storybook/src/components/Screen/Screen.stories.tsx b/storybook/src/components/Screen/Screen.stories.tsx index 0ab71c4a7c..3dac5062c1 100644 --- a/storybook/src/components/Screen/Screen.stories.tsx +++ b/storybook/src/components/Screen/Screen.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { Screen } from '@amsterdam/design-system-react' +import { Screen } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' const meta = { diff --git a/storybook/src/components/SearchField/SearchField.stories.tsx b/storybook/src/components/SearchField/SearchField.stories.tsx index 600bf0fe12..ff510c7f70 100644 --- a/storybook/src/components/SearchField/SearchField.stories.tsx +++ b/storybook/src/components/SearchField/SearchField.stories.tsx @@ -3,8 +3,8 @@ * Copyright Gemeente Amsterdam */ -import { SearchField } from '@amsterdam/design-system-react' -import type { SearchFieldProps } from '@amsterdam/design-system-react' +import { SearchField } from '@amsterdam/design-system-react/src' +import type { SearchFieldProps } from '@amsterdam/design-system-react/src' import { useArgs } from '@storybook/preview-api' import { Meta, StoryObj } from '@storybook/react' diff --git a/storybook/src/components/SkipLink/SkipLink.stories.tsx b/storybook/src/components/SkipLink/SkipLink.stories.tsx index db348d808d..043f93f2f7 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, SkipLink } from '@amsterdam/design-system-react' +import { Grid, Paragraph, Screen, SkipLink } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' const meta = { diff --git a/storybook/src/components/Spotlight/Spotlight.stories.tsx b/storybook/src/components/Spotlight/Spotlight.stories.tsx index 41d9f649ab..af13e7705d 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, Spotlight } from '@amsterdam/design-system-react' +import { Blockquote, Grid, Spotlight } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' import { exampleQuote } from '../shared/exampleContent' @@ -12,20 +12,6 @@ const quote = exampleQuote() const meta = { title: 'Components/Containers/Spotlight', component: Spotlight, - argTypes: { - as: { - control: { - type: 'radio', - }, - options: ['article', 'aside', 'div', 'footer', 'section'], - }, - color: { - control: { - type: 'select', - }, - options: ['blue', 'dark-blue', 'dark-green', 'green', 'magenta', 'orange', 'purple', 'yellow'], - }, - }, render: ({ as, color }) => ( diff --git a/storybook/src/components/Switch/Switch.stories.tsx b/storybook/src/components/Switch/Switch.stories.tsx index 4967757ed9..4ba5e8e62d 100644 --- a/storybook/src/components/Switch/Switch.stories.tsx +++ b/storybook/src/components/Switch/Switch.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { FormLabel, Switch } from '@amsterdam/design-system-react' +import { FormLabel, Switch } from '@amsterdam/design-system-react/src' import { useArgs } from '@storybook/preview-api' import { Meta, StoryObj } from '@storybook/react' @@ -15,9 +15,6 @@ const meta = { disabled: false, }, argTypes: { - disabled: { - control: 'boolean', - }, onChange: { action: 'clicked', table: { disable: true } }, }, render: (args) => { diff --git a/storybook/src/components/Table/Table.stories.tsx b/storybook/src/components/Table/Table.stories.tsx index 79e7bdf9d4..c20023f72b 100644 --- a/storybook/src/components/Table/Table.stories.tsx +++ b/storybook/src/components/Table/Table.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { Table } from '@amsterdam/design-system-react' +import { Table } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' const meta = { diff --git a/storybook/src/components/Tabs/Tabs.stories.tsx b/storybook/src/components/Tabs/Tabs.stories.tsx index 28205d3f91..40a6cebdfb 100644 --- a/storybook/src/components/Tabs/Tabs.stories.tsx +++ b/storybook/src/components/Tabs/Tabs.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { Heading, Paragraph, Tabs } from '@amsterdam/design-system-react' +import { Heading, Paragraph, Tabs } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' import { PropsWithChildren } from 'react' import { exampleParagraph } from '../shared/exampleContent' diff --git a/storybook/src/components/TextArea/TextArea.stories.tsx b/storybook/src/components/TextArea/TextArea.stories.tsx index f6f5898df3..7c9ea73cb1 100644 --- a/storybook/src/components/TextArea/TextArea.stories.tsx +++ b/storybook/src/components/TextArea/TextArea.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { TextArea, TextAreaProps } from '@amsterdam/design-system-react' +import { TextArea, TextAreaProps } from '@amsterdam/design-system-react/src' import { useArgs } from '@storybook/preview-api' import { Meta, StoryObj } from '@storybook/react' import { exampleParagraph } from '../shared/exampleContent' @@ -37,11 +37,6 @@ const meta = { type: 'number', }, }, - disabled: { - control: { - type: 'boolean', - }, - }, }, render: ({ invalid, ...args }) => { const [, setArgs] = useArgs() diff --git a/storybook/src/components/TextInput/TextInput.stories.tsx b/storybook/src/components/TextInput/TextInput.stories.tsx index acc15aadf5..73a1297b6e 100644 --- a/storybook/src/components/TextInput/TextInput.stories.tsx +++ b/storybook/src/components/TextInput/TextInput.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { TextInput, TextInputProps } from '@amsterdam/design-system-react' +import { TextInput, TextInputProps } from '@amsterdam/design-system-react/src' import { useArgs } from '@storybook/preview-api' import { Meta, StoryObj } from '@storybook/react' diff --git a/storybook/src/components/TopTaskLink/TopTaskLink.stories.tsx b/storybook/src/components/TopTaskLink/TopTaskLink.stories.tsx index 19aa46387a..3137d14bdc 100644 --- a/storybook/src/components/TopTaskLink/TopTaskLink.stories.tsx +++ b/storybook/src/components/TopTaskLink/TopTaskLink.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { Grid, TopTaskLink } from '@amsterdam/design-system-react' +import { Grid, TopTaskLink } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' const meta = { diff --git a/storybook/src/components/UnorderedList/UnorderedList.stories.tsx b/storybook/src/components/UnorderedList/UnorderedList.stories.tsx index dd24015133..d2e0679f19 100644 --- a/storybook/src/components/UnorderedList/UnorderedList.stories.tsx +++ b/storybook/src/components/UnorderedList/UnorderedList.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { Icon, Paragraph, UnorderedList } from '@amsterdam/design-system-react' +import { Icon, Paragraph, UnorderedList } from '@amsterdam/design-system-react/src' import { AlertIcon, AnnouncementIcon, @@ -29,10 +29,6 @@ const meta = { inverseColor: false, markers: undefined, }, - argTypes: { - inverseColor: { control: 'boolean' }, - markers: { control: 'boolean' }, - }, decorators: [ (Story, context) => (
diff --git a/storybook/src/components/VisuallyHidden/VisuallyHidden.stories.tsx b/storybook/src/components/VisuallyHidden/VisuallyHidden.stories.tsx index 690058e4c8..bfec6b07df 100644 --- a/storybook/src/components/VisuallyHidden/VisuallyHidden.stories.tsx +++ b/storybook/src/components/VisuallyHidden/VisuallyHidden.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { Paragraph, VisuallyHidden } from '@amsterdam/design-system-react' +import { Paragraph, VisuallyHidden } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' const meta = { diff --git a/storybook/src/docs/components/AmsterdamIconGallery.tsx b/storybook/src/docs/components/AmsterdamIconGallery.tsx index 1abe502003..1e8902b695 100644 --- a/storybook/src/docs/components/AmsterdamIconGallery.tsx +++ b/storybook/src/docs/components/AmsterdamIconGallery.tsx @@ -1,4 +1,4 @@ -import { Icon } from '@amsterdam/design-system-react' +import { Icon } from '@amsterdam/design-system-react/src' import * as Icons from '@amsterdam/design-system-react-icons' import { IconGallery, IconItem } from '@storybook/blocks'