docs: reuse candidate link stories (#1249)

closes: #1227

Author: petergoes

packages/voorbeeld-design-tokens/documentation/link/nl-link.stories.tsx

@@ -1,94 +1,26 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Link } from '@nl-design-system-candidate/link-react/css';
+import { Meta } from '@storybook/react';
+import * as Stories from '@nl-design-system-candidate/link-docs/stories/link.stories';
+import reactMeta from '@nl-design-system-candidate/link-docs/stories/link.react.meta';
 
 const meta = {
   id: 'nl-link',
   title: 'Components/Link/Candidate',
-  component: Link,
   parameters: { actions: { disable: true } },
-  args: {
-    children: 'Lees meer',
-    href: 'https://www.example.com',
-  },
-  argTypes: {
-    external: {
-      name: 'external',
-      type: { name: 'boolean', required: false },
-      table: {
-        category: 'API',
-        defaultValue: { summary: 'false' },
-      },
-    },
-    href: {
-      name: 'href',
-      type: { name: 'string', required: false },
-      table: {
-        category: 'HTML attribute',
-        defaultValue: { summary: '' },
-      },
-    },
-    'aria-current': {
-      name: 'aria-current',
-      type: { name: 'string', required: false },
-      options: [undefined, 'page', 'step', 'location', 'date', 'time', 'true', 'false'],
-      table: {
-        category: 'HTML attribute',
-        defaultValue: { summary: '' },
-      },
-    },
-    hrefLang: {
-      name: 'hrefLang',
-      type: { name: 'string', required: false },
-      table: {
-        category: 'HTML attribute',
-        defaultValue: { summary: '' },
-      },
-    },
-    lang: {
-      name: 'lang',
-      type: { name: 'string', required: false },
-      table: {
-        category: 'HTML attribute',
-        defaultValue: { summary: '' },
-      },
-    },
-    placeholder: {
-      name: 'placeholder',
-      type: { name: 'boolean', required: false },
-      table: {
-        category: 'API',
-        defaultValue: { summary: '' },
-      },
-    },
-    rel: {
-      name: 'rel',
-      type: { name: 'string', required: false },
-      table: {
-        category: 'HTML attribute',
-        defaultValue: { summary: '' },
-      },
-    },
-    target: {
-      name: 'target',
-      type: { name: 'string', required: false },
-      table: {
-        category: 'HTML attribute',
-        defaultValue: { summary: '' },
-      },
-    },
-  },
-} satisfies Meta<typeof Link>;
+  ...reactMeta,
+} satisfies Meta;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
 
-export const VoorbeeldTheme: Story = {
+export const VoorbeeldTheme = {
+  ...Stories.Link,
   name: 'Voorbeeld theme',
   parameters: {
     theme: 'voorbeeld-theme',
   },
 };
-export const BasisTheme: Story = {
+
+export const BasisTheme = {
+  ...Stories.Link,
   name: 'Start theme',
   parameters: {
     theme: 'start-theme',

packages/voorbeeld-design-tokens/package.json

@@ -35,6 +35,7 @@
     "@gemeente-denhaag/icons": "3.1.0",
     "@gemeente-denhaag/side-navigation": "3.1.0",
     "@lux-design-system/web-components-react": "1.1.0",
+    "@nl-design-system-candidate/link-docs": "1.2.0",
     "@nl-design-system-community/design-tokens-definition": "workspace:*",
     "@nl-design-system-unstable/design-tokens-table-react": "workspace:*",
     "@nl-design-system-unstable/theme-toolkit": "workspace:*",