(feat(components): new link component

Wrapped Utrecht Link als LUX Link LUX Document met `utrecht-document` class toegevoegd. Known bugs / missing features: - Active underline does not change - Border radius is not implemented --------- Co-authored-by: Jaap-Hein Wester <j.h.wester@setonix.nl> Co-authored-by: Jaap-Hein Wester <MrSkippy@users.noreply.github.com>
nl-design-system · Sep 27, 2024 · 4a41faf · 4a41faf
1 parent afdb226
commit 4a41faf
Show file tree

Hide file tree

Showing 20 changed files with 750 additions and 7 deletions.
diff --git a/.changeset/stale-worms-glow.md b/.changeset/stale-worms-glow.md
@@ -0,0 +1,14 @@
+---
+"@lux-design-system/web-components-stencil": minor
+"@lux-design-system/design-tokens": minor
+"@lux-design-system/web-components-react": minor
+---
+
+Wrapped Utrecht Link als LUX Link
+
+LUX Document met utrecht-document class toegevoegd.
+
+Known bugs / missing features:
+
+- Active underline does not change
+- Border radius is not implemented
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
@@ -51,6 +51,7 @@
     "@types/react-dom": "18.3.0",
     "@utrecht/alert-css": "1.1.0",
     "@utrecht/button-css": "1.2.0",
+    "@utrecht/link-css": "1.1.0",
     "@utrecht/paragraph-css": "1.1.0",
     "@vitejs/plugin-react": "4.3.1",
     "chromatic": "11.7.0",

diff --git a/packages/storybook/src/web-components/button/button.mdx b/packages/storybook/src/web-components/button/button.mdx
@@ -37,7 +37,7 @@ niet bestaat in onze tokens dan zal je een paarse styling zien, als visuele waar
 <Description of={ButtonStories.Tertiary} />
 <Canvas of={ButtonStories.Tertiary} />
 
-## States
+<h2 id="states_examples">States</h2>
 
 ### Active
 

diff --git a/packages/storybook/src/web-components/button/button.stories.tsx b/packages/storybook/src/web-components/button/button.stories.tsx
@@ -32,7 +32,7 @@ const meta = {
       options: [undefined, 'button', 'primary-action-button', 'secondary-action-button', 'subtle-button'],
     },
     children: {
-      name: 'label',
+      name: 'content (label)',
       description: 'Button text',
       control: 'text',
     },
@@ -59,6 +59,11 @@ const meta = {
         },
       },
     },
+    forceState: {
+      table: {
+        disable: true,
+      },
+    },
   },
 } satisfies Meta<typeof LuxButton>;
 
@@ -144,6 +149,13 @@ export const Active: Story = {
     children: 'Active Button',
     forceState: 'active',
   },
+  argTypes: {
+    appearance: {
+      table: {
+        disable: true,
+      },
+    },
+  },
   play: async ({ canvasElement }) => {
     const canvas = await within(canvasElement);
     const luxButton = canvas.getByShadowText('Active Button');
@@ -178,6 +190,13 @@ export const Hover: Story = {
     children: 'Hover Button',
     forceState: 'hover',
   },
+  argTypes: {
+    appearance: {
+      table: {
+        disable: true,
+      },
+    },
+  },
   render: (args) => (
     <>
       <LuxButton {...args} appearance="primary-action-button">
@@ -207,6 +226,13 @@ export const Focus: Story = {
     children: 'Focus Button',
     forceState: 'focus',
   },
+  argTypes: {
+    appearance: {
+      table: {
+        disable: true,
+      },
+    },
+  },
   render: (args) => (
     <>
       <LuxButton {...args} appearance="primary-action-button">

diff --git a/packages/storybook/src/web-components/document/document.stories.tsx b/packages/storybook/src/web-components/document/document.stories.tsx
@@ -0,0 +1,39 @@
+import tokens from '@lux-design-system/design-tokens/dist/index.json';
+import { LuxDocument as Document } from '@lux-design-system/web-components-react';
+import type { JSX } from '@lux-design-system/web-components-stencil';
+import type { Meta, StoryObj } from '@storybook/react';
+import { type PropsWithChildren } from 'react';
+import tokensDefinition from './tokens.json';
+import { createDesignTokensStory } from '../../utils';
+
+const LuxDocument = (props: PropsWithChildren<JSX.LuxDocument>) => <Document {...props} />;
+
+type Story = StoryObj<typeof meta>;
+
+const meta = {
+  title: 'Web Components/Document',
+  id: 'web-components-document',
+  component: LuxDocument,
+  parameters: {
+    tokens,
+    tokensPrefix: 'lux-link',
+    tokensDefinition,
+  },
+  tags: ['!autodocs'],
+} satisfies Meta<typeof LuxDocument>;
+
+export default meta;
+
+export const Playground: Story = {
+  name: 'Playground',
+  args: {
+    children: 'Lorem',
+  },
+  parameters: {
+    docs: {
+      sourceState: 'shown',
+    },
+  },
+};
+
+export const DesignTokens = createDesignTokensStory(meta);
diff --git a/packages/storybook/src/web-components/document/tokens.json b/packages/storybook/src/web-components/document/tokens.json
@@ -0,0 +1,66 @@
+{
+  "lux": {
+    "document": {
+      "background-color": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<color>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": true
+        },
+        "type": "color"
+      },
+      "color": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<color>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": true
+        },
+        "type": "color"
+      },
+      "font-family": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "*",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": true
+        },
+        "type": "fontFamilies"
+      },
+      "font-size": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": true
+        },
+        "type": "fontSizes"
+      },
+      "font-weight": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<number>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": true
+        },
+        "type": "fontWeights"
+      },
+      "line-height": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": ["<length>", "<number>"],
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": true
+        },
+        "type": "lineHeights"
+      }
+    }
+  }
+}
diff --git a/packages/storybook/src/web-components/link/link.mdx b/packages/storybook/src/web-components/link/link.mdx
@@ -0,0 +1,64 @@
+import { Canvas, Controls, Description, Markdown, Meta } from "@storybook/blocks";
+import markdown from "@utrecht/link-css/README.md?raw";
+import * as LinkStories from "./link.stories";
+
+<Meta of={LinkStories} />
+
+<p className="lsb-citation">
+  {`Documentatie afkomstig van `}
+  <cite>
+    {/* prettier-ignore */}
+    <a href="https://nl-design-system.github.io/utrecht/storybook-css/index.html?path=/docs/css-link--docs">Utrecht Link</a>
+  </cite>
+  {`.`}
+</p>
+
+<Markdown>{markdown}</Markdown>
+
+## Playground
+
+<Canvas of={LinkStories.Playground} />
+<Controls of={LinkStories.Playground} />
+
+{/* Utrecht documentation took id #states... */}
+
+<h2 id="states_examples">States</h2>
+
+### Active
+
+<Description of={LinkStories.Active} />
+<Canvas of={LinkStories.Active} sourceState="none" />
+
+### Hover
+
+<Description of={LinkStories.Hover} />
+<Canvas of={LinkStories.Hover} sourceState="none" />
+
+### Focus
+
+<Description of={LinkStories.Focus} />
+<Canvas of={LinkStories.Focus} sourceState="none" />
+
+## Attributes
+
+### Download
+
+<Description of={LinkStories.Download} />
+<Canvas of={LinkStories.Download} sourceState="hidden" />
+
+### Target
+
+<Description of={LinkStories.Target} />
+<Canvas of={LinkStories.Target} sourceState="hidden" />
+
+## Gebruik
+
+### Icon
+
+<Description of={LinkStories.Icon} />
+<Canvas of={LinkStories.Icon} sourceState="hidden" />
+
+### In Tekst
+
+<Description of={LinkStories.InText} />
+<Canvas of={LinkStories.InText} sourceState="none" />