feat: display design tokens for each component story

package.json

@@ -30,7 +30,6 @@
     "@types/node": "20.14.14",
     "@typescript-eslint/eslint-plugin": "8.0.0",
     "@typescript-eslint/parser": "8.0.0",
-    "@utrecht/component-library-css": "4.2.0",
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-json": "3.1.0",

packages/storybook/config/preview.ts

@@ -5,7 +5,8 @@ import '@gemeente-denhaag/design-tokens-components/dist/theme/index.css';
 import '@gemeente-rotterdam/design-tokens/dist/index.css';
 import '@nl-design-system-community/nora-design-tokens/dist/theme.css';
 import '@nl-design-system-community/nora-design-tokens/src/font.js';
-import '@nl-design-system-community/purmerend-design-tokens/dist/index.css';
+import '@nl-design-system-community/purmerend-design-tokens/dist/theme.css';
+import '@nl-design-system-community/purmerend-design-tokens/dist/color-scheme-dark/theme.css';
 import '@nl-design-system-community/purmerend-design-tokens/src/font.js';
 import '@nl-design-system-unstable/basis-design-tokens/dist/theme.css';
 import '@nl-design-system-unstable/bodegraven-reeuwijk-design-tokens/dist/index.css';

packages/theme-toolkit/src/ComponentStories.tsx

@@ -5,7 +5,9 @@ import { CustomStory } from './CustomStory';
 // eslint-disable-next-line no-unused-vars
 import { type PropsWithChildren } from 'react';
 import { ComponentStory } from './component-stories-util';
-import { StyleDictionaryDesignToken } from '@nl-design-system-unstable/tokens-lib/src/design-tokens';
+import { DesignToken, StyleDictionaryDesignToken } from '@nl-design-system-unstable/tokens-lib/src/design-tokens';
+import { tokenRef } from '@nl-design-system-unstable/tokens-lib/src/util';
+import { DesignTokensTable } from '@nl-design-system-unstable/design-tokens-table-react/css';
 
 interface HeadingProps {
   level?: number;
@@ -37,9 +39,19 @@ interface ComponentStoriesProps {
   showAll?: boolean;
   theme?: string;
   tokens?: StyleDictionaryDesignToken[];
+  displayDesignTokens?: boolean;
 }
 
-export const ComponentStories = ({ config, showAll = false, theme, tokens }: ComponentStoriesProps) => {
+const arrayToMap = <T extends DesignToken>(tokens: T[]) =>
+  new Map(tokens.map((token) => [tokenRef((token as any).path), token]));
+
+export const ComponentStories = ({
+  config,
+  showAll = false,
+  theme,
+  tokens = [],
+  displayDesignTokens = false,
+}: ComponentStoriesProps) => {
   const availableComponents = [...AMS_COMPONENT_STORIES, ...UTRECHT_COMPONENT_STORIES, ...DENHAAG_COMPONENT_STORIES];
 
   // TODO: Add glob option for variants to config https://www.npmjs.com/package/glob
@@ -75,7 +87,6 @@ export const ComponentStories = ({ config, showAll = false, theme, tokens }: Com
   interface StoryGroups {
     [index: string]: ComponentStory[];
   }
-
   const groupedStories: StoryGroups = components.reduce((groups: StoryGroups, story: ComponentStory) => {
     if (story.group) {
       const group = groups[story.group] || [];
@@ -89,34 +100,44 @@ export const ComponentStories = ({ config, showAll = false, theme, tokens }: Com
     return groups;
   }, {});
 
+  const tokensMap = arrayToMap(tokens || []);
+
   return (
     <div>
       {Object.entries(groupedStories).map(([group, stories]) => {
         const isGrouped = group !== UNGROUPED && stories.length > 1;
         return (
-          <div key={group}>
+          <div key={group} className="nlds-component-story">
             {isGrouped && <Heading level={2}>{group}</Heading>}
-            {stories.map((story) => (
-              <section key={story.storyId}>
-                <Heading level={isGrouped ? 3 : 2}>{story.name}</Heading>
-                {showAll && !config.stories.includes(story.storyId) ? (
-                  <p>
-                    <strong>Let op</strong>: Story{' '}
-                    <span style={{ textDecoration: 'underline', textUnderlineOffset: '2px' }}>{story.storyId}</span>{' '}
-                    staat nog niet in config.json en wordt dus niet getest
-                  </p>
-                ) : showAll ? (
-                  <p>
-                    Story{' '}
-                    <span style={{ textDecoration: 'underline', textUnderlineOffset: '2px' }}>{story.storyId}</span>{' '}
-                    wordt getest
-                  </p>
-                ) : null}
-                {/* TODO: Implement `theme` and `inline` properties again */}
-                {/* <CustomStory theme={`${config.prefix}-theme`} inline={story.inline}> */}
-                <CustomStory className={theme || `${config.prefix}-theme`}>{story.render()}</CustomStory>
-              </section>
-            ))}
+            {stories.map((story) => {
+              const relatedTokens =
+                story.detectTokens?.anyOf?.map((ref) => tokensMap.get(ref)).filter((x) => !!x) || [];
+
+              return (
+                <section key={story.storyId}>
+                  <Heading level={isGrouped ? 3 : 2}>{story.name}</Heading>
+                  {showAll && !config.stories.includes(story.storyId) ? (
+                    <p>
+                      <strong>Let op</strong>: Story{' '}
+                      <span style={{ textDecoration: 'underline', textUnderlineOffset: '2px' }}>{story.storyId}</span>{' '}
+                      staat nog niet in config.json en wordt dus niet getest
+                    </p>
+                  ) : showAll ? (
+                    <p>
+                      Story{' '}
+                      <span style={{ textDecoration: 'underline', textUnderlineOffset: '2px' }}>{story.storyId}</span>{' '}
+                      wordt getest
+                    </p>
+                  ) : null}
+                  {/* TODO: Implement `theme` and `inline` properties again */}
+                  {/* <CustomStory theme={`${config.prefix}-theme`} inline={story.inline}> */}
+                  <CustomStory className={theme || `${config.prefix}-theme`}>{story.render()}</CustomStory>
+                  {displayDesignTokens && relatedTokens.length >= 1 ? (
+                    <DesignTokensTable tokens={relatedTokens}></DesignTokensTable>
+                  ) : null}
+                </section>
+              );
+            })}
           </div>
         );
       })}

packages/theme-toolkit/src/component-stories-utrecht.tsx

@@ -565,31 +565,178 @@ export const UTRECHT_COMPONENT_STORIES: ComponentStory[] = [
     component: 'utrecht-radio-button',
     name: 'Utrecht Radio Button Default',
     render: () => <RadioButton />,
+    detectTokens: {
+      anyOf: [
+        'utrecht.form-control.color',
+        'utrecht.form-control.background-color',
+        'utrecht.form-control.border-color',
+        'utrecht.radio-button.color',
+        'utrecht.radio-button.background-color',
+        'utrecht.radio-button.border-color',
+      ],
+    },
   },
   {
-    storyId: 'react-utrecht-radio-button--checked',
+    storyId: 'react-utrecht-radio-button--hover',
     component: 'utrecht-radio-button',
-    name: 'Utrecht Radio Button Checked',
-    render: () => <RadioButton defaultChecked />,
+    name: 'Utrecht Radio Button Hover',
+    render: () => <RadioButton className="utrecht-radio-button--hover" />,
+    detectTokens: {
+      anyOf: [
+        'utrecht.form-control.hover.color',
+        'utrecht.form-control.hover.background-color',
+        'utrecht.form-control.hover.border-color',
+        'utrecht.radio-button.hover.color',
+        'utrecht.radio-button.hover.background-color',
+        'utrecht.radio-button.hover.border-color',
+      ],
+    },
+  },
+  {
+    storyId: 'react-utrecht-radio-button--focus',
+    component: 'utrecht-radio-button',
+    name: 'Utrecht Radio Button focus',
+    render: () => <RadioButton className="utrecht-radio-button--focus" />,
+    detectTokens: {
+      anyOf: [
+        'utrecht.radio-button.color',
+        'utrecht.radio-button.background-color',
+        'utrecht.radio-button.border-color',
+      ],
+    },
+  },
+  {
+    storyId: 'react-utrecht-radio-button--focus-visible',
+    component: 'utrecht-radio-button',
+    name: 'Utrecht Radio Button focus-visible',
+    render: () => <RadioButton className="utrecht-radio-button--focus-visible" />,
+    detectTokens: {
+      anyOf: [
+        'utrecht.radio-button.color',
+        'utrecht.radio-button.background-color',
+        'utrecht.radio-button.border-color',
+      ],
+    },
+  },
+  {
+    storyId: 'react-utrecht-radio-button--active',
+    component: 'utrecht-radio-button',
+    name: 'Utrecht Radio Button active',
+    render: () => <RadioButton className="utrecht-radio-button--active" />,
+    detectTokens: {
+      anyOf: [
+        'utrecht.radio-button.color',
+        'utrecht.radio-button.background-color',
+        'utrecht.radio-button.border-color',
+      ],
+    },
   },
   {
     storyId: 'react-utrecht-radio-button--disabled',
     component: 'utrecht-radio-button',
     name: 'Utrecht Radio Button Disabled',
     render: () => <RadioButton disabled />,
+    detectTokens: {
+      anyOf: [
+        'utrecht.radio-button.color',
+        'utrecht.radio-button.background-color',
+        'utrecht.radio-button.border-color',
+      ],
+    },
   },
+  /* disable + focus should not have any specific styling, skipped that one */
   {
-    storyId: 'react-utrecht-radio-button--disabled-checked',
+    storyId: 'react-utrecht-radio-button--disabled-focus-visible',
     component: 'utrecht-radio-button',
-    name: 'Utrecht Radio Button Disabled Checked',
+    name: 'Utrecht Radio Button Disabled + focus-visible',
+    render: () => <RadioButton disabled className="utrecht-radio-button--focus-visible" />,
+    detectTokens: {
+      anyOf: [
+        'utrecht.radio-button.color',
+        'utrecht.radio-button.background-color',
+        'utrecht.radio-button.border-color',
+      ],
+    },
+  },
+  /* disable + hover should not have any specific styling, skipped that one */
+  /* disable + active should not have any specific styling, skipped that one */
+  {
+    storyId: 'react-utrecht-radio-button--checked',
+    component: 'utrecht-radio-button',
+    name: 'Utrecht Radio Button Checked',
+    render: () => <RadioButton defaultChecked />,
+    detectTokens: {
+      anyOf: [
+        'utrecht.radio-button.color',
+        'utrecht.radio-button.background-color',
+        'utrecht.radio-button.border-color',
+      ],
+    },
+  },
+  {
+    storyId: 'react-utrecht-radio-button--checked-focus-visible',
+    component: 'utrecht-radio-button',
+    name: 'Utrecht Radio Button Checked + focus-visible',
+    render: () => <RadioButton defaultChecked className="utrecht-radio-button--focus-visible" />,
+    detectTokens: {
+      anyOf: [
+        'utrecht.radio-button.color',
+        'utrecht.radio-button.background-color',
+        'utrecht.radio-button.border-color',
+      ],
+    },
+  },
+  {
+    storyId: 'react-utrecht-radio-button--checked-hover',
+    component: 'utrecht-radio-button',
+    name: 'Utrecht Radio Checked + hover',
+    render: () => <RadioButton defaultChecked className="utrecht-radio-button--hover" />,
+    detectTokens: {
+      anyOf: [
+        'utrecht.radio-button.color',
+        'utrecht.radio-button.background-color',
+        'utrecht.radio-button.border-color',
+      ],
+    },
+  },
+  {
+    storyId: 'react-utrecht-radio-button--checked-active',
+    component: 'utrecht-radio-button',
+    name: 'Utrecht Radio Checked + active',
+    render: () => <RadioButton defaultChecked className="utrecht-radio-button--active" />,
+    detectTokens: {
+      anyOf: [
+        'utrecht.radio-button.color',
+        'utrecht.radio-button.background-color',
+        'utrecht.radio-button.border-color',
+      ],
+    },
+  },
+  {
+    storyId: 'react-utrecht-radio-button--checked-disabled',
+    component: 'utrecht-radio-button',
+    name: 'Utrecht Radio Button Checked + disabled',
     render: () => <RadioButton defaultChecked disabled />,
+    detectTokens: {
+      anyOf: [
+        'utrecht.radio-button.color',
+        'utrecht.radio-button.background-color',
+        'utrecht.radio-button.border-color',
+      ],
+    },
   },
   {
     storyId: 'react-utrecht-radio-button--invalid',
     component: 'utrecht-radio-button',
     name: 'Utrecht Radio Button Invalid',
     render: () => <RadioButton invalid />,
   },
+  {
+    storyId: 'react-utrecht-radio-button--checked-invalid',
+    component: 'utrecht-radio-button',
+    name: 'Utrecht Radio Button Checked + Invalid',
+    render: () => <RadioButton defaultChecked invalid />,
+  },
   {
     storyId: 'react-utrecht-alert--default',
     component: 'utrecht-alert',

proprietary/purmerend-design-tokens/documentation/component-tokens.stories.ts

@@ -0,0 +1,34 @@
+import { ComponentStories } from '@nl-design-system-unstable/theme-toolkit/src/ComponentStories';
+import type { Meta, StoryObj } from '@storybook/react';
+import config from '../src/config.json';
+import tokens from '../dist/list.json';
+
+const meta = {
+  title: 'Purmerend',
+  component: ComponentStories,
+  parameters: { controls: { include: 'showAll' }, chromatic: { disableSnapshot: false } },
+  args: {
+    config,
+    showAll: false,
+    tokens,
+    displayDesignTokens: true,
+  },
+} satisfies Meta<typeof ComponentStories>;
+
+type Story = StoryObj<typeof meta>;
+
+export default meta;
+
+export const ComponentTokensLightMode: Story = {
+  name: 'Component Tokens (color-scheme: light)',
+  args: {
+    theme: 'purmerend-theme purmerend-theme--color-scheme-light',
+  },
+};
+
+export const ComponentTokensDarkMode: Story = {
+  name: 'Component Tokens (color-scheme: dark)',
+  args: {
+    theme: 'purmerend-theme purmerend-theme--color-scheme-dark',
+  },
+};

proprietary/purmerend-design-tokens/documentation/components.stories.ts

@@ -7,14 +7,23 @@ const meta = {
   title: 'Purmerend',
   component: ComponentStories,
   parameters: { controls: { include: 'showAll' }, chromatic: { disableSnapshot: false } },
-  args: { config, showAll: false, tokens },
+  args: { config, showAll: false, tokens, displayDesignTokens: false },
 } satisfies Meta<typeof ComponentStories>;
 
 type Story = StoryObj<typeof meta>;
 
 export default meta;
-export const Components: Story = {
+
+export const ComponentsLightMode: Story = {
+  name: 'Visual regression test (color-scheme: light)',
+  args: {
+    theme: 'purmerend-theme purmerend-theme--color-scheme-light',
+  },
+};
+
+export const ComponentsDarkMode: Story = {
+  name: 'Visual regression test (color-scheme: dark)',
   args: {
-    theme: 'purmerend-theme purmerend-theme--media-query',
+    theme: 'purmerend-theme purmerend-theme--color-scheme-dark',
   },
 };