feat: uses the new material icons for link arrows

packages/core/src/components/Link.tsx

@@ -38,6 +38,22 @@ export const Link = React.forwardRef(function Link<
             {...rest}
         >
             {children}
+            {(external || rest.target === "_blank") && (
+                <>
+                    {/* This corresponds with ArrowNorthEastIcon from icon-react package */}
+                    <span
+                        aria-hidden
+                        ref={ref}
+                        className={cn(
+                            "jkl-icon",
+                            `jkl-icon--small`,
+                            "jkl-nav-link__icon",
+                        )}
+                    >
+                        {"\uf1e1"}
+                    </span>
+                </>
+            )}
             {external && (
                 <span hidden={true} id={srId}>
                     Ekstern lenke

packages/core/src/components/NavLink.tsx

@@ -41,7 +41,39 @@ export const NavLink = React.forwardRef(function NavLink<
             )}
             {...rest}
         >
+            {back && (
+                <>
+                    {/* This corresponds with ArrowLeftIcon from icon-react package */}
+                    <span
+                        aria-hidden
+                        ref={ref}
+                        className={cn(
+                            "jkl-icon",
+                            `jkl-icon--small`,
+                            "jkl-nav-link__icon",
+                        )}
+                    >
+                        {"\ue5c4"}
+                    </span>
+                </>
+            )}
             {children}
+            {!back && (
+                <>
+                    {/* This corresponds with ArrowRightIcon from icon-react package */}
+                    <span
+                        aria-hidden
+                        ref={ref}
+                        className={cn(
+                            "jkl-icon",
+                            `jkl-icon--small`,
+                            "jkl-nav-link__icon",
+                        )}
+                    >
+                        {"\ue5c8"}
+                    </span>
+                </>
+            )}
         </Component>
     );
 });

packages/core/styles/_links.scss

@@ -4,27 +4,18 @@
     background-image: linear-gradient(to bottom, $color 0%, $color 100%);
 }
 
-$_right-arrow: "\2192"; // unicode right arrow
-$_left-arrow: "\2190"; // unicode left arrow
-$_north-east-arrow: "\2197"; // unicode north east arrow (up/right)
-
 $_link-underline-thickness: jkl.rem(1px);
 $_link-underline-thickness--focus: jkl.rem(2px);
 
-@include jkl.light-mode-variables {
-    --jkl-link-color: #{jkl.$color-granitt};
-    --jkl-link-hover-color: #{jkl.$color-stein};
-    --jkl-link-active-color: #{jkl.$color-granitt};
-}
-@include jkl.dark-mode-variables {
-    --jkl-link-color: #{jkl.$color-snohvit};
-    --jkl-link-hover-color: #{jkl.$color-svaberg};
-    --jkl-link-active-color: #{jkl.$color-snohvit};
-}
-
 .jkl-link {
-    color: var(--jkl-link-color);
-    @include _underline-gradient(var(--jkl-link-color));
+    color: var(--jkl-color-text-default);
+    outline: none;
+    text-decoration: none;
+
+    display: inline-flex;
+    align-items: center;
+    gap: jkl.rem(1.5px);
+
     background-position: 0
         calc(
             100% -
@@ -34,18 +25,19 @@ $_link-underline-thickness--focus: jkl.rem(2px);
         );
     background-size: $_link-underline-thickness $_link-underline-thickness;
     background-repeat: repeat-x;
-    @include jkl.motion("standard", "energetic");
+
     transition-property: color;
-    outline: none;
-    text-decoration: none;
+    @include jkl.motion("standard", "energetic");
+
+    @include _underline-gradient(var(--jkl-color-text-default));
 
     &:hover:not(:focus) {
-        color: var(--jkl-link-hover-color);
-        @include _underline-gradient(var(--jkl-link-hover-color));
+        color: var(--jkl-color-text-subdued);
+        @include _underline-gradient(var(--jkl-color-text-subdued));
     }
 
     &:hover {
-        @include _underline-gradient(var(--jkl-link-hover-color));
+        @include _underline-gradient(var(--jkl-color-text-subdued));
     }
 
     &:focus-visible {
@@ -62,88 +54,67 @@ $_link-underline-thickness--focus: jkl.rem(2px);
             );
     }
 
-    /* Show arrow after external links, or links opening
-    in a new window or tab: */
-    &[target="_blank"],
-    &--external {
-        &::after {
-            @include jkl.decorative($content: $_north-east-arrow);
-        }
-    }
-
     @include jkl.forced-colors-mode {
         outline: revert;
         text-decoration: revert;
     }
 }
 
 .jkl-nav-link {
-    color: var(--jkl-link-color);
+    color: var(--jkl-color-text-default);
 
     box-sizing: border-box;
     font-weight: jkl.$typography-weight-normal;
     text-decoration: none;
     position: relative;
 
-    @include jkl.reset-outline;
+    display: inline-flex;
+    align-items: center;
+    gap: jkl.rem(1.5px);
 
-    &::after {
-        @include jkl.decorative($content: $_right-arrow);
-        @include jkl.motion;
-        transition-property: padding-left, padding-right;
-        display: inline;
-        margin-left: -0.2em;
-        padding-left: 0.35em;
-        padding-right: 0.35em;
-    }
+    @include jkl.reset-outline;
 
     &:hover:not(:focus) {
-        color: var(--jkl-link-hover-color);
-
-        &::after {
-            padding-left: 0.7em;
-            padding-right: 0;
-        }
+        color: var(--jkl-color-text-subdued);
     }
 
     &:focus-visible {
         @include jkl.focus-outline($offset: 0);
-
-        &::after {
-            padding-left: 0.7em;
-            padding-right: 0;
-        }
     }
 
-    &--active {
-        @include jkl.no-grow-bold;
-    }
-}
-
-.jkl-nav-link--back {
-    padding-right: 0;
-
-    $left-arrow-focus-margin: 0.3em; // Unngå at border ved tastaturfokus "kapper" pila
-    padding-left: $left-arrow-focus-margin;
-    margin-left: -#{$left-arrow-focus-margin};
-
-    &::after {
-        display: none;
+    &:focus-visible,
+    &:hover:not(:focus) {
+        .jkl-nav-link__icon {
+            transform: translateX(0.3rem);
+        }
     }
 
-    &::before {
-        @include jkl.decorative($content: $_left-arrow);
+    &__icon {
         @include jkl.motion;
-        transform: translateX(0);
         transition-property: transform;
-        display: inline-block;
-        padding-right: jkl.rem(4px);
     }
 
-    &:hover,
-    &:focus-visible {
-        &::before {
-            transform: translateX(-33%);
+    &--active {
+        @include jkl.no-grow-bold;
+    }
+
+    // Unngå at border ved tastaturfokus "kapper" pila
+    $arrow-spacing: 0.15rem;
+    padding-right: $arrow-spacing;
+    margin-right: -#{$arrow-spacing};
+
+    &--back {
+        padding-right: 0;
+        margin-right: 0;
+        padding-left: $arrow-spacing;
+        margin-left: -#{$arrow-spacing};
+
+        &:focus-visible,
+        &:hover:not(:focus) {
+            .jkl-nav-link__icon {
+                padding-left: 0;
+                transform: translateX(-0.3rem);
+            }
         }
     }
 }

packages/jokul/src/components/link/Link.tsx

@@ -4,6 +4,7 @@ import {
     PolymorphicPropsWithRef,
     PolymorphicRef,
 } from "../../utilities/polymorphism/polymorphism.js";
+import { ArrowNorthEastIcon } from "../icon/icons/ArrowNorthEastIcon.js";
 
 export type LinkProps<ElementType extends React.ElementType> =
     PolymorphicPropsWithRef<
@@ -34,13 +35,19 @@ export const Link = React.forwardRef(function Link<
     return (
         <Component
             ref={ref}
-            className={clsx("jkl-link", className, {
-                "jkl-link--external": external,
-            })}
+            className={clsx("jkl-link", className, {})}
             aria-describedby={external ? srId : undefined}
             {...rest}
+            style={{
+                display: "flex",
+                alignItems: "center",
+                gap: "0.1rem",
+            }}
         >
             {children}
+            {(external || rest.target === "_blank") && (
+                <ArrowNorthEastIcon variant="small" />
+            )}
             {external && (
                 <span hidden={true} id={srId}>
                     Ekstern lenke

packages/jokul/src/components/link/NavLink.tsx

@@ -4,6 +4,8 @@ import {
     PolymorphicPropsWithRef,
     PolymorphicRef,
 } from "../../utilities/polymorphism/polymorphism.js";
+import { ArrowRightIcon } from "../icon/icons/ArrowRightIcon.js";
+import { ArrowLeftIcon } from "../icon/index.js";
 
 export type NavLinkProps<ElementType extends React.ElementType> =
     PolymorphicPropsWithRef<
@@ -44,7 +46,16 @@ export const NavLink = React.forwardRef(function NavLink<
             )}
             {...rest}
         >
+            {back && (
+                <ArrowLeftIcon variant="small" className="jkl-nav-link__icon" />
+            )}
             {children}
+            {!back && (
+                <ArrowRightIcon
+                    variant="small"
+                    className="jkl-nav-link__icon"
+                />
+            )}
         </Component>
     );
 });

packages/jokul/src/components/link/documentation/NavLinkExample.tsx

@@ -3,12 +3,12 @@ import React, { FC } from "react";
 import { NavLink } from "../NavLink.js";
 
 export const knobs: ExampleKnobsProps = {
-    boolProps: ["active", "back"],
+    boolProps: ["Aktiv", "Tilbakelenke"],
 };
 
 export const NavLinkExample: FC<ExampleComponentProps> = ({ boolValues }) => {
-    const active = boolValues?.["active"];
-    const back = boolValues?.["back"];
+    const active = boolValues?.["Aktiv"];
+    const back = boolValues?.["Tilbakelenke"];
     return (
         <div>
             <NavLink href="#" active={active} back={back}>

packages/jokul/src/components/link/integration/link.spec.ts

@@ -21,3 +21,11 @@ test("renders correctly", async () => {
 
     await helper.snapshots({ focusElement: ".jkl-link" });
 });
+
+test("renders external link correctly", async () => {
+    await helper.open();
+
+    await helper.checkProp("bool-prop-ekstern");
+
+    await helper.snapshots();
+});

packages/jokul/src/components/link/styles/link.scss

@@ -4,16 +4,18 @@
     background-image: linear-gradient(to bottom, $color 0%, $color 100%);
 }
 
-$_right-arrow: "\2192"; // unicode right arrow
-$_left-arrow: "\2190"; // unicode left arrow
-$_north-east-arrow: "\2197"; // unicode north east arrow (up/right)
-
 $_link-underline-thickness: jkl.rem(1px);
 $_link-underline-thickness--focus: jkl.rem(2px);
 
 .jkl-link {
     color: var(--jkl-color-text-default);
-    @include _underline-gradient(var(--jkl-color-text-default));
+    outline: none;
+    text-decoration: none;
+
+    display: inline-flex;
+    align-items: center;
+    gap: jkl.rem(1.5px);
+
     background-position: 0
         calc(
             100% -
@@ -23,10 +25,11 @@ $_link-underline-thickness--focus: jkl.rem(2px);
         );
     background-size: $_link-underline-thickness $_link-underline-thickness;
     background-repeat: repeat-x;
-    @include jkl.motion("standard", "energetic");
+
     transition-property: color;
-    outline: none;
-    text-decoration: none;
+    @include jkl.motion("standard", "energetic");
+
+    @include _underline-gradient(var(--jkl-color-text-default));
 
     &:hover:not(:focus) {
         color: var(--jkl-color-text-subdued);
@@ -51,15 +54,6 @@ $_link-underline-thickness--focus: jkl.rem(2px);
             );
     }
 
-    /* Show arrow after external links, or links opening
-    in a new window or tab: */
-    &[target="_blank"],
-    &--external {
-        &::after {
-            @include jkl.decorative($content: $_north-east-arrow);
-        }
-    }
-
     @include jkl.forced-colors-mode {
         outline: revert;
         text-decoration: revert;