docs: add Utrecht Data Badge

nl-design-system · Nov 12, 2024 · 1049c54 · 1049c54
1 parent 23c149b
commit 1049c54
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 5 deletions.
diff --git a/packages/storybook/src/utrecht/config.json b/packages/storybook/src/utrecht/config.json
@@ -41,6 +41,7 @@
     "react-utrecht-mark",
     "react-utrecht-superscript",
     "react-utrecht-subscript",
+    "react-utrecht-data-badge--default",
     "react-utrecht-color-sample"
   ]
 }
diff --git a/packages/theme-toolkit/src/component-stories-utrecht.tsx b/packages/theme-toolkit/src/component-stories-utrecht.tsx
@@ -21,9 +21,9 @@ import {
   UnorderedListItem,
   OrderedList,
   OrderedListItem,
+  DataBadge,
   Document,
   // BadgeCounter,
-  // BadgeData,
   // Blockquote,
   Checkbox,
   // CustomCheckbox ,
@@ -63,8 +63,6 @@ const Blockquote = ({ children }: PropsWithChildren) => <div className="utrecht-
 
 const BadgeCounter = ({ children }: PropsWithChildren) => <div className="utrecht-badge-counter">{children}</div>;
 
-const BadgeData = ({ children }: PropsWithChildren) => <div className="utrecht-badge-data">{children}</div>;
-
 export const UTRECHT_COMPONENT_STORIES: ComponentStory[] = [
   {
     storyId: 'react-utrecht-button--default',
@@ -793,10 +791,10 @@ export const UTRECHT_COMPONENT_STORIES: ComponentStory[] = [
     render: () => <BadgeCounter>42</BadgeCounter>,
   },
   {
-    storyId: 'react-utrecht-badge-data--default',
+    storyId: 'react-utrecht-data-badge--default',
     group: STORY_GROUPS['BADGES'],
     name: 'Utrecht Data Badge',
-    render: () => <BadgeData>Category 1</BadgeData>,
+    render: () => <DataBadge>Category 1</DataBadge>,
   },
   {
     storyId: 'react-utrecht-blockquote--default',

diff --git a/packages/voorbeeld-design-tokens/documentation/data-badge/utrecht-data-badge.stories.tsx b/packages/voorbeeld-design-tokens/documentation/data-badge/utrecht-data-badge.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DataBadge } from '@utrecht/component-library-react/dist/css-module';
+
+const meta = {
+  id: 'utrecht-data-badge',
+  title: 'Components/Data Badge/Utrecht',
+  component: DataBadge,
+  args: { children: 'Nieuw!' },
+} satisfies Meta<typeof DataBadge>;
+
+type Story = StoryObj<typeof meta>;
+
+export default meta;
+
+export const VoorbeeldTheme: Story = {
+  name: 'Voorbeeld theme',
+  parameters: { theme: 'voorbeeld-theme' },
+};
+
+export const UtrechtTheme: Story = {
+  name: 'Utrecht theme',
+  parameters: { theme: 'utrecht-theme' },
+};