Added Rijkshuisstijl stories

Theme toegevoegd aan preview. Desing tokens pacakge geinstalleerd.
nl-design-system · Feb 3, 2025 · df041d9 · df041d9
1 parent 13893f4
commit df041d9
Show file tree

Hide file tree

Showing 5 changed files with 170 additions and 0 deletions.
diff --git a/packages/storybook/config/preview.ts b/packages/storybook/config/preview.ts
@@ -4,6 +4,7 @@ import '@amsterdam/design-system-css/dist/index.css';
 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 '@rijkshuisstijl-community/design-tokens/dist/index.css';
 import '@nl-design-system-community/nora-design-tokens/src/font.js';
 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';

diff --git a/packages/storybook/package.json b/packages/storybook/package.json
@@ -71,6 +71,7 @@
     "@nl-design-system-unstable/zevenaar-design-tokens": "workspace:*",
     "@nl-design-system-unstable/zwolle-design-tokens": "workspace:*",
     "@open-formulieren/design-tokens": "0.52.1",
+    "@rijkshuisstijl-community/design-tokens": "1.0.0-alpha.125",
     "@storybook/addon-a11y": "8.2.7",
     "@storybook/addon-actions": "8.2.7",
     "@storybook/addon-backgrounds": "8.2.7",

diff --git a/packages/theme-toolkit/package.json b/packages/theme-toolkit/package.json
@@ -50,6 +50,7 @@
     "@jest/globals": "29.7.0",
     "@nl-design-system-unstable/design-tokens-table-react": "workspace:*",
     "@nl-design-system-unstable/tokens-lib": "workspace:*",
+    "@rijkshuisstijl-community/components-react": "1.0.0-alpha.100",
     "@rollup/plugin-babel": "6.0.4",
     "@rollup/plugin-json": "6.1.0",
     "@rollup/plugin-node-resolve": "15.2.3",

diff --git a/packages/theme-toolkit/src/component-stories-rhc.tsx b/packages/theme-toolkit/src/component-stories-rhc.tsx
@@ -0,0 +1,12 @@
+import { STORY_GROUPS } from './component-stories-util';
+import { DotBadge } from '@rijkshuisstijl-community/components-react';
+
+export const RHC_COMPONENT_STORIES = [
+  {
+    storyId: 'react-rhc-dot-badge--default',
+    component: 'rhc-dot-badge',
+    group: STORY_GROUPS['BADGES'],
+    name: 'Rijkshuisstijl Dot Badge',
+    render: () => <DotBadge aria-label={'Nieuw bericht'} />,
+  },
+];
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml