docs(button): stories with utrecht icon (#803)

closes: #782

Author: petergoes

.changeset/moody-clubs-hug.md

@@ -0,0 +1,2 @@
+---
+---

packages/components-css/button-css/src/_mixin.scss

@@ -1,6 +1,7 @@
 @mixin nl-button {
   --nl-icon-block-size: var(--nl-button-icon-size);
   --nl-icon-inline-size: var(--nl-button-icon-size);
+  --nl-icon-color: currentColor;
 
   align-items: center;
   border-radius: var(--nl-button-border-radius);

packages/storybook-test/package.json

@@ -36,6 +36,7 @@
     "@types/lodash-es": "4.17.12",
     "@types/react": "18.3.23",
     "@types/react-dom": "18.3.7",
+    "@utrecht/icon-css": "3.0.1",
     "@whitespace/storybook-addon-html": "8.0.2",
     "clsx": "2.1.1",
     "lodash-es": "4.17.21",

packages/storybook-test/stories/button.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import '../../components-css/icon-css/src/icon.scss';
 import '../../components-css/button-css/src/button.scss';
 import '../../components-css/button-css/src/test.scss';
+import '@utrecht/icon-css/dist/index.css';
 import packageJSON from '../../components-react/button-react/package.json';
 import { Icon } from '../../components-react/icon-react/src/icon';
 import { IconAccessible } from '@tabler/icons-react';
@@ -83,6 +84,42 @@ export const ButtonIconEnd: Story = {
   },
 };
 
+export const ButtonUtrechtIconStart: Story = {
+  name: 'Button met Utrecht iconStart',
+  args: {
+    iconStart: (
+      <span className="utrecht-icon">
+        <IconAccessible />
+      </span>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `Een button met een utrecht-icon aan de linkerkant en tekst`,
+      },
+    },
+  },
+};
+
+export const ButtonUtrechtIconEnd: Story = {
+  name: 'Button met Utrecht iconEnd',
+  args: {
+    iconEnd: (
+      <span className="utrecht-icon">
+        <IconAccessible />
+      </span>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `Een button met een utrecht-icon aan de rechterkant en tekst`,
+      },
+    },
+  },
+};
+
 export const ButtonLargeText: Story = {
   name: 'Button 200% zoom',
   args: {