From 143d39fb4fb551dc0177fd218fcd1de2248832f4 Mon Sep 17 00:00:00 2001 From: Ruben Smit Date: Wed, 11 Sep 2024 13:07:17 +0200 Subject: [PATCH] feat(link): changed styling and icon after design feedback (#626) closes #474 and #448 Changes are based on feedback: https://github.com/nl-design-system/rijkshuisstijl-community/issues/474#issuecomment-2332016801 --------- Co-authored-by: Ruben Smit --- packages/components-css/link/_mixin.scss | 30 ++++++++++ packages/components-css/link/index.scss | 23 +++++++- .../src/icons/ExternalLinkIcon.tsx | 22 ++++--- packages/storybook/config/main.ts | 1 + packages/storybook/package.json | 2 + .../storybook/src/community/link.stories.tsx | 57 +++++++++++++++++-- pnpm-lock.yaml | 31 ++++++++++ .../design-tokens/figma/figma.tokens.json | 6 +- 8 files changed, 156 insertions(+), 16 deletions(-) create mode 100644 packages/components-css/link/_mixin.scss diff --git a/packages/components-css/link/_mixin.scss b/packages/components-css/link/_mixin.scss new file mode 100644 index 000000000..015b17ead --- /dev/null +++ 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 index 806f6ff23..0a5c6db89 100644 --- 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 index 8a4b7f44f..9232641a7 100644 --- a/packages/components-react/src/icons/ExternalLinkIcon.tsx +++ b/packages/components-react/src/icons/ExternalLinkIcon.tsx @@ -1,10 +1,18 @@ export const ExternalLinkIcon = () => ( - - + + + + + ); diff --git a/packages/storybook/config/main.ts b/packages/storybook/config/main.ts index aaf688eb8..e0b503b5a 100644 --- 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 index e4e3a6031..9a5bb1a89 100644 --- a/packages/storybook/package.json +++ b/packages/storybook/package.json @@ -61,6 +61,7 @@ "@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", @@ -68,6 +69,7 @@ "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 index d6d9df693..6ca6ff46f 100644 --- 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) => ( - + {iconLeft && ( @@ -115,14 +123,14 @@ type Story = StoryObj; 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, }, @@ -130,7 +138,7 @@ export const IconLeft: Story = { export const IconRight: Story = { args: { - href: 'https://example.com/', + href: '#', children: 'Label', iconRight: true, }, @@ -138,9 +146,48 @@ export const IconRight: Story = { 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 index 22d9846bc..404e7355e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -461,6 +461,9 @@ importers: chromatic: specifier: 11.3.0 version: 11.3.0 + clsx: + specifier: 2.1.1 + version: 2.1.1 prettier: specifier: 3.3.3 version: 3.3.3 @@ -482,6 +485,9 @@ importers: storybook: specifier: 8.2.4 version: 8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9)) + storybook-addon-pseudo-states: + specifier: 4.0.2 + version: 4.0.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))) typescript: specifier: 5.5.3 version: 5.5.3 @@ -2414,6 +2420,13 @@ packages: '@storybook/global@5.0.0': resolution: {integrity: sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==} + '@storybook/icons@1.2.10': + resolution: {integrity: sha512-310apKdDcjbbX2VSLWPwhEwAgjxTzVagrwucVZIdGPErwiAppX8KvBuWZgPo+rQLVrtH8S+pw1dbUwjcE6d7og==} + engines: {node: '>=14.0.0'} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + '@storybook/icons@1.2.9': resolution: {integrity: sha512-cOmylsz25SYXaJL/gvTk/dl3pyk7yBFRfeXTsHvTA3dfhoU/LWSq0NKL9nM7WBasJyn6XPSGnLS4RtKXLw5EUg==} engines: {node: '>=14.0.0'} @@ -7931,6 +7944,11 @@ packages: resolution: {integrity: sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==} engines: {node: '>= 0.4'} + storybook-addon-pseudo-states@4.0.2: + resolution: {integrity: sha512-dTHkeq4VzqIrJfR8k2BHkX190cQ+aYBZUktWNZpDw3N5tJ8IwaRLzf6ZjHDHY6xwDshaNiTO5UkziRE0Ytukkw==} + peerDependencies: + storybook: ^8.2.0 + storybook@8.2.4: resolution: {integrity: sha512-ASavW8vIHiWpFY+4M6ngeqK5oL4OkxqdpmQYxvRqH0gA1G1hfq/vmDw4YC4GnqKwyWPQh2kaV5JFurKZVaeaDQ==} hasBin: true @@ -11220,6 +11238,11 @@ snapshots: '@storybook/global@5.0.0': {} + '@storybook/icons@1.2.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + '@storybook/icons@1.2.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: react: 18.3.1 @@ -18034,6 +18057,14 @@ snapshots: dependencies: internal-slot: 1.0.5 + storybook-addon-pseudo-states@4.0.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9))): + dependencies: + '@storybook/icons': 1.2.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + storybook: 8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9)) + transitivePeerDependencies: + - react + - react-dom + storybook@8.2.4(@babel/preset-env@7.24.8(@babel/core@7.24.9)): dependencies: '@babel/core': 7.24.9 diff --git a/proprietary/design-tokens/figma/figma.tokens.json b/proprietary/design-tokens/figma/figma.tokens.json index 258ec6dc3..d1462736b 100644 --- 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"