From 1049c5415081667a913ed0410308af7fddb05661 Mon Sep 17 00:00:00 2001
From: Robbert Broersma <git@robbertbroersma.nl>
Date: Tue, 12 Nov 2024 10:55:22 +0100
Subject: [PATCH] docs: add Utrecht Data Badge

---
 packages/storybook/src/utrecht/config.json    |  1 +
 .../src/component-stories-utrecht.tsx         |  8 +++----
 .../data-badge/utrecht-data-badge.stories.tsx | 23 +++++++++++++++++++
 3 files changed, 27 insertions(+), 5 deletions(-)
 create mode 100644 packages/voorbeeld-design-tokens/documentation/data-badge/utrecht-data-badge.stories.tsx

diff --git a/packages/storybook/src/utrecht/config.json b/packages/storybook/src/utrecht/config.json
index 18bb2e47e..578be84d9 100644
--- 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
index 367da18d3..4c1b6ccf1 100644
--- 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
new file mode 100644
index 000000000..52990d42a
--- /dev/null
+++ 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' },
+};