feat(link): changed styling and icon after design feedback (#626)

closes #474 and #448 Changes are based on feedback: #474 (comment) --------- Co-authored-by: Ruben Smit <[email protected]>
nl-design-system · Sep 11, 2024 · 143d39f · 143d39f
1 parent de74fed
commit 143d39f
Show file tree

Hide file tree

Showing 8 changed files with 156 additions and 16 deletions.
diff --git a/packages/components-css/link/_mixin.scss b/packages/components-css/link/_mixin.scss
@@ -0,0 +1,30 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+
+@mixin rhc-link--any-link {
+  --utrecht-icon-inset-block-start: var(--utrecht-link-icon-inset-block-start, inherit);
+
+  column-gap: var(--utrecht-link-column-gap, inherit);
+  display: inline-flex;
+}
+
+@mixin rhc-link--icon {
+  min-block-size: var(--utrecht-link-icon-size, inherit);
+  min-inline-size: var(--utrecht-link-icon-size, inherit);
+}
+
+@mixin rhc-link--visited {
+  --utrecht-link-text-decoration-color: var(--utrecht-link-visited-color, inherit);
+
+  color: var(--utrecht-link-visited-color, inherit);
+}
+
+@mixin rhc-link--visited-icon {
+  color: var(--utrecht-link-visited-color, inherit);
+}
+
+@mixin rhc-link--active {
+  --utrecht-link-text-decoration: var(--utrecht-link-active-text-decoration, inherit);
+}
diff --git a/packages/components-css/link/index.scss b/packages/components-css/link/index.scss
@@ -3,11 +3,28 @@
  * Copyright (c) 2021 Community for NL Design System
  */
 @import "../button/mixin";
+@import "./mixin";
 
 .rhc-link:any-link {
-  align-items: center;
-  column-gap: var(--utrecht-link-column-gap, inherit);
-  display: inline-flex;
+  @include rhc-link--any-link;
+}
+
+.rhc-link:any-link .utrecht-icon {
+  @include rhc-link--icon;
+}
+
+.rhc-link:visited,
+.utrecht-link--visted {
+  @include rhc-link--visited;
+}
+
+.rhc-link:visited .utrecht-icon {
+  @include rhc-link--visited-icon;
+}
+
+.rhc-link:active,
+.utrecht-link--active {
+  @include rhc-link--active;
 }
 
 .rhc-link .rhc-link__sr-only {

diff --git a/packages/components-react/src/icons/ExternalLinkIcon.tsx b/packages/components-react/src/icons/ExternalLinkIcon.tsx
@@ -1,10 +1,18 @@
 export const ExternalLinkIcon = () => (
-  <svg fill="none" height="18" viewBox="0 0 18 18" width="18" xmlns="http://www.w3.org/2000/svg">
-    <path
-      clip-rule="evenodd"
-      d="M12 2C11.4477 2 11 1.55228 11 1C11 0.447715 11.4477 0 12 0H17C17.5523 0 18 0.447715 18 1V6C18 6.55228 17.5523 7 17 7C16.4477 7 16 6.55228 16 6V3.41421L7.70711 11.7071C7.31658 12.0976 6.68342 12.0976 6.29289 11.7071C5.90237 11.3166 5.90237 10.6834 6.29289 10.2929L14.5858 2H12ZM0 6C0 4.34315 1.34315 3 3 3H8C8.55228 3 9 3.44772 9 4C9 4.55228 8.55228 5 8 5H3C2.44772 5 2 5.44772 2 6V15C2 15.5523 2.44772 16 3 16H12C12.5523 16 13 15.5523 13 15V10C13 9.44771 13.4477 9 14 9C14.5523 9 15 9.44771 15 10V15C15 16.6569 13.6569 18 12 18H3C1.34315 18 0 16.6569 0 15V6Z"
-      fill="#01689B"
-      fill-rule="evenodd"
-    />
+  <svg
+    fill="none"
+    height="24"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M0 0h24v24H0z" fill="none" stroke="none" />
+    <path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6" />
+    <path d="M11 13l9 -9" />
+    <path d="M15 4h5v5" />
   </svg>
 );
diff --git a/packages/storybook/config/main.ts b/packages/storybook/config/main.ts
@@ -16,6 +16,7 @@ const config: StorybookConfig = {
     '@etchteam/storybook-addon-status',
     '@whitespace/storybook-addon-html',
     '@chromatic-com/storybook',
+    'storybook-addon-pseudo-states',
   ],
   framework: '@storybook/react-vite',
   staticDirs: ['../../../proprietary/assets/src'],

diff --git a/packages/storybook/package.json b/packages/storybook/package.json
@@ -61,13 +61,15 @@
     "@utrecht/web-component-library-stencil": "1.3.0",
     "@whitespace/storybook-addon-html": "6.1.1",
     "chromatic": "11.3.0",
+    "clsx": "2.1.1",
     "prettier": "3.3.3",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-syntax-highlighter": "15.5.0",
     "require-from-string": "2.0.2",
     "rimraf": "6.0.1",
     "storybook": "8.2.4",
+    "storybook-addon-pseudo-states": "4.0.2",
     "typescript": "5.5.3",
     "vite": "5.3.4"
   }

diff --git a/packages/storybook/src/community/link.stories.tsx b/packages/storybook/src/community/link.stories.tsx
@@ -4,6 +4,7 @@ import { Link } from '@rijkshuisstijl-community/components-react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { IconArrowRight, IconCalendarEvent } from '@tabler/icons-react';
 import { Icon } from '@utrecht/component-library-react/dist/css-module';
+import clsx from 'clsx';
 import { PropsWithChildren } from 'react';
 import readme from './link.md?raw';
 interface LinkStoryProps {
@@ -15,7 +16,14 @@ interface LinkStoryProps {
 }
 
 const LinkStory = ({ href, children, iconLeft, iconRight, external, ...props }: PropsWithChildren<LinkStoryProps>) => (
-  <Link external={external} href={href} {...props}>
+  <Link
+    external={external}
+    href={href}
+    className={clsx({
+      'utrecht-link--external': external,
+    })}
+    {...props}
+  >
     {iconLeft && (
       <Icon>
         <IconCalendarEvent />
@@ -115,32 +123,71 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    href: 'https://example.com/',
+    href: '#',
     children: 'Label',
   },
 };
 
 export const IconLeft: Story = {
   args: {
-    href: 'https://example.com/',
+    href: '#',
     children: 'Label',
     iconLeft: true,
   },
 };
 
 export const IconRight: Story = {
   args: {
-    href: 'https://example.com/',
+    href: '#',
     children: 'Label',
     iconRight: true,
   },
 };
 
 export const External: Story = {
   args: {
-    href: 'https://example.com/',
+    href: '#',
     children: 'Label',
     external: true,
     externalLabel: 'example external label',
   },
 };
+
+export const Active: Story = {
+  parameters: {
+    pseudo: { active: true },
+  },
+  args: {
+    href: '#',
+    children: 'Label',
+  },
+};
+
+export const Focus: Story = {
+  parameters: {
+    pseudo: { focus: true },
+  },
+  args: {
+    href: '#',
+    children: 'Label',
+  },
+};
+
+export const FocusVisible: Story = {
+  parameters: {},
+  args: {
+    href: '#',
+    children: 'Label',
+    className: 'utrecht-link--focus-visible',
+  },
+};
+
+export const Visited: Story = {
+  parameters: {
+    pseudo: { visited: true },
+  },
+  args: {
+    href: 'https://example.com/',
+    children: 'Label',
+  },
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/proprietary/design-tokens/figma/figma.tokens.json b/proprietary/design-tokens/figma/figma.tokens.json
@@ -1215,7 +1215,7 @@
           "type": "fontSizes"
         },
         "line-height": {
-          "value": "1.4",
+          "value": "{rhc.line-height.md}",
           "type": "lineHeights"
         },
         "font-weight": {
@@ -3307,6 +3307,10 @@
           "type": "textDecoration"
         },
         "icon": {
+          "inset-block-start": {
+          "value": "{rhc.space.50}",
+          "type": "spacing"
+          },
           "size": {
             "value": "{rhc.size.icon.functional}",
             "type": "sizing"