From 5d9bd331e02ee778979510777414b6aa1e21f288 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Thu, 2 May 2024 14:21:01 +0200 Subject: [PATCH 1/5] refactor(Link): :recycle: Move styling to `link.css` #1846 --- packages/{react/src/components/Link => css}/Link.module.css | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename packages/{react/src/components/Link => css}/Link.module.css (100%) diff --git a/packages/react/src/components/Link/Link.module.css b/packages/css/Link.module.css similarity index 100% rename from packages/react/src/components/Link/Link.module.css rename to packages/css/Link.module.css From 3d19df14fe493b8a427d1345c5c28c5b039d0982 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Thu, 2 May 2024 14:24:10 +0200 Subject: [PATCH 2/5] updated css --- packages/css/Link.module.css | 14 +++++++------- packages/react/src/components/Link/Link.tsx | 6 ++---- 2 files changed, 9 insertions(+), 11 deletions(-) diff --git a/packages/css/Link.module.css b/packages/css/Link.module.css index e57fee6a3b..82644315f7 100644 --- a/packages/css/Link.module.css +++ b/packages/css/Link.module.css @@ -1,5 +1,5 @@ @layer fds.link { - .link { + .fds-link { color: var(--fds-semantic-text-action-default); cursor: pointer; text-decoration: underline; @@ -10,17 +10,17 @@ gap: var(--fds-spacing-1); } - .link:visited { + .fds-link:visited { color: var(--fds-semantic-text-visited-default); text-decoration: none; } - .link:hover { + .fds-link:hover { color: var(--fds-semantic-text-action-hover); text-decoration-thickness: max(2px, 0.125rem, 0.12em); } - .link:focus-visible { + .fds-link:focus-visible { background: var(--fds-semantic-border-focus-outline); box-shadow: 0 max(3px, 0.1875rem, 0.18em) var(--fds-semantic-border-focus-boxshadow); color: var(--fds-semantic-text-action-active); @@ -28,9 +28,9 @@ text-decoration: none; } - .link.inverted:not(:focus-visible, :active), - .link.inverted:not(:focus-visible, :active):hover, - .link.inverted:not(:focus-visible, :active):visited { + .fds-link.fds-link--inverted:not(:focus-visible, :active), + .fds-link.fds-link--inverted:not(:focus-visible, :active):hover, + .fds-link.fds-link--inverted:not(:focus-visible, :active):visited { color: white; } } diff --git a/packages/react/src/components/Link/Link.tsx b/packages/react/src/components/Link/Link.tsx index f6e97064b1..d16d21440d 100644 --- a/packages/react/src/components/Link/Link.tsx +++ b/packages/react/src/components/Link/Link.tsx @@ -1,10 +1,8 @@ import type { AnchorHTMLAttributes, ReactNode } from 'react'; import { forwardRef } from 'react'; -import cl from 'clsx'; +import cl from 'clsx/lite'; import { Slot } from '@radix-ui/react-slot'; -import classes from './Link.module.css'; - export type LinkProps = { /** The content to display inside the link. */ children: ReactNode; @@ -30,7 +28,7 @@ export const Link = forwardRef( return ( From a00f97d2ec4715ae5eae8b74589008361f9e5f28 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Thu, 2 May 2024 14:25:32 +0200 Subject: [PATCH 3/5] updated css --- packages/css/index.css | 1 + packages/css/{Link.module.css => link.css} | 6 +++--- 2 files changed, 4 insertions(+), 3 deletions(-) rename packages/css/{Link.module.css => link.css} (81%) diff --git a/packages/css/index.css b/packages/css/index.css index c9fd3c35a4..4a34c09f50 100644 --- a/packages/css/index.css +++ b/packages/css/index.css @@ -18,3 +18,4 @@ @import url('./heading.css'); @import url('./paragraph.css'); @import url('./radio.css'); +@import url('./link.css'); diff --git a/packages/css/Link.module.css b/packages/css/link.css similarity index 81% rename from packages/css/Link.module.css rename to packages/css/link.css index 82644315f7..c7c154b1d4 100644 --- a/packages/css/Link.module.css +++ b/packages/css/link.css @@ -28,9 +28,9 @@ text-decoration: none; } - .fds-link.fds-link--inverted:not(:focus-visible, :active), - .fds-link.fds-link--inverted:not(:focus-visible, :active):hover, - .fds-link.fds-link--inverted:not(:focus-visible, :active):visited { + .fds-link--inverted:not(:focus-visible, :active), + .fds-link--inverted:not(:focus-visible, :active):hover, + .fds-link--inverted:not(:focus-visible, :active):visited { color: white; } } From 02e9ea6cf38af91efb7329a549536d346be84a47 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Thu, 2 May 2024 14:31:46 +0200 Subject: [PATCH 4/5] built css --- packages/css/react-css-modules.css | 37 ------------------------------ 1 file changed, 37 deletions(-) diff --git a/packages/css/react-css-modules.css b/packages/css/react-css-modules.css index 4dcb7373bb..131c064a1a 100644 --- a/packages/css/react-css-modules.css +++ b/packages/css/react-css-modules.css @@ -212,43 +212,6 @@ } } -@layer fds.link { - .fds-link-link-7f2464f { - color: var(--fds-semantic-text-action-default); - cursor: pointer; - text-decoration: underline; - text-decoration-thickness: max(1px, 0.0625rem); - text-underline-offset: max(4px, 0.25rem); - display: inline-flex; - align-items: center; - gap: var(--fds-spacing-1); - } - - .fds-link-link-7f2464f:visited { - color: var(--fds-semantic-text-visited-default); - text-decoration: none; - } - - .fds-link-link-7f2464f:hover { - color: var(--fds-semantic-text-action-hover); - text-decoration-thickness: max(2px, 0.125rem, 0.12em); - } - - .fds-link-link-7f2464f:focus-visible { - background: var(--fds-semantic-border-focus-outline); - box-shadow: 0 max(3px, 0.1875rem, 0.18em) var(--fds-semantic-border-focus-boxshadow); - color: var(--fds-semantic-text-action-active); - outline: none; - text-decoration: none; - } - - .fds-link-link-7f2464f.fds-link-inverted-7f2464f:not(:focus-visible, :active), - .fds-link-link-7f2464f.fds-link-inverted-7f2464f:not(:focus-visible, :active):hover, - .fds-link-link-7f2464f.fds-link-inverted-7f2464f:not(:focus-visible, :active):visited { - color: white; - } -} - @layer fds.list { .fds-list-small-a2926fcf { padding-left: var(--fds-spacing-4); From 57dd41f16a9ab3591a1476c12e9ad1efbc6cab99 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Thu, 2 May 2024 15:00:50 +0200 Subject: [PATCH 5/5] fix tests --- packages/react/src/components/Link/Link.test.tsx | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/react/src/components/Link/Link.test.tsx b/packages/react/src/components/Link/Link.test.tsx index f8031d7978..8e584e17d7 100644 --- a/packages/react/src/components/Link/Link.test.tsx +++ b/packages/react/src/components/Link/Link.test.tsx @@ -23,20 +23,14 @@ describe('Link', () => { const className = 'foo'; render({ className }); const link = screen.getByRole('link'); - expect(link).toHaveClass('link'); + expect(link).toHaveClass('fds-link'); expect(link).toHaveClass(className); }); - it('Is not inverted by default', () => { - render(); - const link = screen.getByRole('link'); - expect(link).not.toHaveClass('inverted'); - }); - it('Is inverted when the `inverted` property is `true`', () => { render({ inverted: true }); const link = screen.getByRole('link'); - expect(link).toHaveClass('inverted'); + expect(link).toHaveClass('fds-link--inverted'); }); it('Sets the ref on the anchor element if given', () => {