feat: add counter badge (#23)

Co-authored-by: Mark Teekman <[email protected]>
nl-design-system · May 21, 2024 · 24412f2 · 24412f2
1 parent b82f9c9
commit 24412f2
Show file tree

Hide file tree

Showing 4 changed files with 154 additions and 1 deletion.
diff --git a/packages/storybook/src/css-breadcrumb-nav.stories.tsx b/packages/storybook/src/css-breadcrumb-nav.stories.tsx
@@ -45,7 +45,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  name: 'Breadcrumb navigation',
+  name: 'Breadcrumb Navigation',
   args: {
     children: [
       <BreadcrumbNavLink href="/" rel="home" index={0}>

diff --git a/packages/storybook/src/css-counter-badge.stories.tsx b/packages/storybook/src/css-counter-badge.stories.tsx
@@ -0,0 +1,92 @@
+/* @license CC0-1.0 */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { BadgeCounter } from '@utrecht/component-library-react/dist/css-module';
+import readme from './documentation/counter-badge.md?raw';
+
+const meta = {
+  title: 'CSS Component/Counter badge',
+  id: 'css-utrecht-badge-counter',
+  component: BadgeCounter,
+  argTypes: {
+    children: {
+      name: 'Content',
+      type: {
+        name: 'string',
+        required: true,
+      },
+      defaultValue: '',
+    },
+  },
+  args: {
+    children: '',
+  },
+  tags: ['autodocs'],
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/ck81CE8SNzePi30jCEu7MK/NLDS---Gemeente-Tilburg---Bibliotheek?node-id=1235%3A4364&t=VEgVZGuEwb18Kx3g-1',
+    },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+} satisfies Meta<typeof BadgeCounter>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Single: Story = {
+  name: 'Single',
+  args: {
+    children: '9',
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/ck81CE8SNzePi30jCEu7MK/NLDS---Gemeente-Tilburg---Bibliotheek?node-id=1235%3A4364&t=VEgVZGuEwb18Kx3g-1',
+    },
+  },
+};
+
+export const Double: Story = {
+  name: 'Double',
+  args: {
+    children: '99',
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/ck81CE8SNzePi30jCEu7MK/NLDS---Gemeente-Tilburg---Bibliotheek?node-id=1235%3A4364&t=VEgVZGuEwb18Kx3g-1',
+    },
+  },
+};
+
+export const Triple: Story = {
+  name: 'Triple',
+  args: {
+    children: '999',
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/ck81CE8SNzePi30jCEu7MK/NLDS---Gemeente-Tilburg---Bibliotheek?node-id=1235%3A4364&t=VEgVZGuEwb18Kx3g-1',
+    },
+  },
+};
+
+export const Quadruple: Story = {
+  name: 'Quadruple',
+  args: {
+    children: '9.999',
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/ck81CE8SNzePi30jCEu7MK/NLDS---Gemeente-Tilburg---Bibliotheek?node-id=1235%3A4364&t=VEgVZGuEwb18Kx3g-1',
+    },
+  },
+};
diff --git a/packages/storybook/src/documentation/counter-badge.md b/packages/storybook/src/documentation/counter-badge.md
@@ -0,0 +1,3 @@
+# Counter Badge
+
+The Counter Badge component is used to display a count of items. It is typically used in a list or table to show the number of items in a list or table.
diff --git a/proprietary/design-tokens/src/components/utrecht/badge-counter.tokens.json b/proprietary/design-tokens/src/components/utrecht/badge-counter.tokens.json
@@ -0,0 +1,58 @@
+{
+  "utrecht": {
+    "badge-counter": {
+      "font-size": {
+        "value": "{tilburg.typography.font-size.sm}",
+        "type": "fontSizes"
+      },
+      "line-height": {
+        "value": "{tilburg.document.line-height}",
+        "type": "lineHeights"
+      },
+      "min-block-size": {
+        "type": "sizing",
+        "value": "{tilburg.size.xs}"
+      },
+      "min-inline-size": {
+        "type": "sizing",
+        "value": "{tilburg.size.xs}"
+      },
+      "font-weight": {
+        "value": "{tilburg.document.strong.font-weight}",
+        "type": "fontWeights"
+      },
+      "border-width": {
+        "value": "{tilburg.border-width.sm}",
+        "type": "borderWidth"
+      },
+      "border-radius": {
+        "type": "borderRadius",
+        "value": "{tilburg.border-radius.round}"
+      },
+      "font-family": {
+        "value": "{tilburg.document.font-family}",
+        "type": "fontFamilies"
+      },
+      "background-color": {
+        "type": "color",
+        "value": "{tilburg.feedback.informative.background-color}"
+      },
+      "border-color": {
+        "type": "color",
+        "value": "transparent"
+      },
+      "color": {
+        "type": "color",
+        "value": "{tilburg.color.blue.500}"
+      },
+      "padding-inline": {
+        "value": "{tilburg.space.inline.ant}",
+        "type": "spacing"
+      },
+      "padding-block": {
+        "value": "{tilburg.space.block.ant}",
+        "type": "spacing"
+      }
+    }
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# Counter Badge

		The Counter Badge component is used to display a count of items. It is typically used in a list or table to show the number of items in a list or table.