Added link story and tokens. (#15)

Co-authored-by: Joost Wiechers <[email protected]>
nl-design-system · May 15, 2024 · fd90e96 · fd90e96
1 parent 145070f
commit fd90e96
Show file tree

Hide file tree

Showing 3 changed files with 201 additions and 0 deletions.
diff --git a/packages/storybook/src/css-utrecht-link.stories.tsx b/packages/storybook/src/css-utrecht-link.stories.tsx
@@ -0,0 +1,98 @@
+/* @license CC0-1.0 */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Link, Paragraph } from '@utrecht/component-library-react/dist/css-module';
+import readme from './documentation/link.md?raw';
+
+const meta = {
+  title: 'CSS Component/Link',
+  id: 'css-utrecht-link',
+  component: Link,
+  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=153-1056&t=nrvRAztL0ecku9kp-0',
+    },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+} satisfies Meta<typeof Link>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: 'Link',
+  args: {
+    children: 'Website van Tilburg',
+    href: '#',
+  },
+};
+export const LinkInParagraph: Story = {
+  name: 'Link in paragraph',
+  args: {
+    children: 'website van Tilburg',
+    href: '#',
+  },
+  decorators: [
+    (Story) => (
+      <Paragraph>
+        Tilburg, gelegen in het zuiden van Nederland, is een bruisende stad met een rijke geschiedenis en een levendige
+        cultuur. Bekijk de {Story()}. Ooit bekend als een centrum van de textielindustrie, heeft Tilburg zich ontwikkeld
+        tot een moderne en dynamische stad met een bloeiende economie en een levendige gemeenschap.
+      </Paragraph>
+    ),
+  ],
+};
+
+export const LinkInLeadParagraph: Story = {
+  name: 'Link in lead paragraph',
+  args: {
+    children: 'Website van Tilburg',
+    href: '#',
+  },
+  decorators: [
+    (Story) => (
+      <Paragraph lead>
+        Tilburg, gelegen in het zuiden van Nederland, is een bruisende stad met een rijke geschiedenis en een levendige
+        cultuur. Bekijk de {Story()}. Ooit bekend als een centrum van de textielindustrie, heeft Tilburg zich ontwikkeld
+        tot een moderne en dynamische stad met een bloeiende economie en een levendige gemeenschap.
+      </Paragraph>
+    ),
+  ],
+};
+
+export const LinkInSmallPrint: Story = {
+  name: 'Link in small print',
+  args: {
+    children: 'Website van Tilburg',
+    href: '#',
+  },
+  decorators: [
+    (Story) => (
+      <Paragraph small>
+        Tilburg, gelegen in het zuiden van Nederland, is een bruisende stad met een rijke geschiedenis en een levendige
+        cultuur. Bekijk de {Story()}. Ooit bekend als een centrum van de textielindustrie, heeft Tilburg zich ontwikkeld
+        tot een moderne en dynamische stad met een bloeiende economie en een levendige gemeenschap.
+      </Paragraph>
+    ),
+  ],
+};
diff --git a/packages/storybook/src/documentation/link.md b/packages/storybook/src/documentation/link.md
@@ -0,0 +1,3 @@
+# Link
+
+This is the link component.
diff --git a/proprietary/design-tokens/src/components/utrecht/link.tokens.json b/proprietary/design-tokens/src/components/utrecht/link.tokens.json
@@ -0,0 +1,100 @@
+{
+  "utrecht": {
+    "link": {
+      "line-height": {
+        "value": "{tilburg.document.line-height}",
+        "type": "lineHeights"
+      },
+      "color": {
+        "type": "color",
+        "value": "{tilburg.interaction.color}"
+      },
+      "text-decoration-color": {
+        "type": "color",
+        "value": "{tilburg.interaction.color}"
+      },
+      "active": {
+        "color": {
+          "type": "color",
+          "value": "{tilburg.interaction.active.color}"
+        },
+        "text-decoration": {
+          "value": "none",
+          "type": "textDecoration"
+        }
+      },
+      "focus": {
+        "background-color": {
+          "type": "color",
+          "value": "{tilburg.focus.background-color}"
+        },
+        "color": {
+          "type": "color",
+          "value": "{tilburg.focus.color}"
+        },
+        "text-decoration": {
+          "value": "none",
+          "type": "textDecoration"
+        },
+        "text-decoration-thickness": {
+          "value": "auto",
+          "type": "other"
+        }
+      },
+      "hover": {
+        "color": {
+          "type": "color",
+          "value": "{tilburg.interaction.hover.color}"
+        },
+        "text-decoration": {
+          "value": "none",
+          "type": "textDecoration"
+        },
+        "text-decoration-thickness": {
+          "value": "auto",
+          "type": "other"
+        }
+      },
+      "visited": {
+        "color": {
+          "type": "color",
+          "value": "{tilburg.interaction.color}"
+        }
+      },
+      "text-decoration": {
+        "value": "underline",
+        "type": "textDecoration"
+      },
+      "icon": {
+        "size": {
+          "type": "sizing",
+          "value": "{tilburg.icon.functional.size}"
+        },
+        "margin-inline": {
+          "value": "{tilburg.space.text.beetle}",
+          "type": "spacing"
+        }
+      },
+      "font-size": {
+        "value": "{tilburg.document.font-size}",
+        "type": "fontSizes"
+      },
+      "font-family": {
+        "value": "{tilburg.document.font-family}",
+        "type": "fontFamilies"
+      },
+      "text-decoration-thickness": {
+        "value": "auto",
+        "type": "other"
+      },
+      "text-underline-offset": {
+        "value": "auto",
+        "type": "other"
+      },
+      "font-weight": {
+        "value": "{tilburg.document.font-weight}",
+        "type": "fontWeights"
+      }
+    }
+  }
+}