refactor(Link): ♻️ Move styling to link.css (#1935)

digdir · May 3, 2024 · b621c22 · b621c22
1 parent 7f13236
commit b621c22
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 56 deletions.
diff --git 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/...react/src/components/Link/Link.module.css → packages/css/link.css b/...react/src/components/Link/Link.module.css → packages/css/link.css
@@ -1,5 +1,5 @@
 @layer fds.link {
-  .link {
+  .fds-link {
     color: var(--fds-semantic-text-action-default);
     cursor: pointer;
     text-decoration: underline;
@@ -10,27 +10,27 @@
     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);
     outline: none;
     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--inverted:not(:focus-visible, :active),
+  .fds-link--inverted:not(:focus-visible, :active):hover,
+  .fds-link--inverted:not(:focus-visible, :active):visited {
     color: white;
   }
 }
diff --git 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);

diff --git 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', () => {

diff --git 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<HTMLAnchorElement, LinkProps>(
 
     return (
       <Component
-        className={cl(classes.link, inverted && classes.inverted, className)}
+        className={cl('fds-link', inverted && 'fds-link--inverted', className)}
         ref={ref}
         {...rest}
       >