update links

.changeset/proud-tigers-share.md

@@ -0,0 +1,7 @@
+---
+"@navikt/ds-css": minor
+"@navikt/ds-react": minor
+---
+
+Link: La til 'variant', 'underline' og 'inlineText'-prop
+

@navikt/core/css/link.css

@@ -6,15 +6,36 @@
   gap: var(--a-spacing-1);
 }
 
-.navds-alert .navds-link,
-.navds-confirmation-panel .navds-link {
-  color: var(--a-text-default);
+.navds-link.navds-link--inline-text {
+  display: inline;
+}
+
+.navds-link.navds-link--inline-text > svg {
+  margin: 0.1em 0.1em -0.1em;
+  transform: translateY(0.05em);
+}
+
+.navds-link:visited {
+  color: var(--ac-link-visited-text, var(--a-text-visited));
 }
 
 .navds-link:hover {
   text-decoration: none;
 }
 
+.navds-link.navds-link--remove-underline {
+  text-decoration: none;
+}
+
+.navds-link.navds-link--remove-underline:hover {
+  text-decoration: underline;
+}
+
+.navds-alert .navds-link,
+.navds-confirmation-panel .navds-link {
+  color: var(--a-text-default);
+}
+
 .navds-link:focus-visible {
   outline: none;
   color: var(--ac-link-focus-text, var(--a-text-on-action));
@@ -45,3 +66,15 @@
   color: inherit;
   flex-shrink: 0;
 }
+
+.navds-link--action {
+  color: var(--ac-link-action-text, var(--a-text-action));
+}
+
+.navds-link--neutral {
+  color: var(--ac-link-neutral-text, var(--a-text-default));
+}
+
+.navds-link--subtle {
+  color: var(--ac-link-subtle-text, var(--a-text-subtle));
+}

@navikt/core/css/tokens.json

@@ -175,7 +175,11 @@
     "--ac-link-focus-border": "--a-border-focus",
     "--ac-link-active-text": "--a-text-on-action",
     "--ac-link-active-bg": "--a-border-focus",
-    "--ac-link-active-border": "--a-border-focus"
+    "--ac-link-active-border": "--a-border-focus",
+    "--ac-link-action-text": "--a-text-action",
+    "--ac-link-neutral-text": "--a-text-default",
+    "--ac-link-subtle-text": "--a-text-subtle",
+    "--ac-link-visited-text": "--a-text-visited"
   },
   "list": {
     "--ac-list-marker-ul-color": "--ac-list-marker-color",

@navikt/core/react/src/link/Link.tsx

@@ -4,6 +4,23 @@ import { OverridableComponent } from "../util/OverridableComponent";
 
 export interface LinkProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  /**
+   * Inverts when the underline appears. If this is false,
+   * the underline does not appear by default, but does appear when the link is hovered.
+   * This makes it more suitable for use when inlined in text.
+   * @default true
+   */
+  underline?: boolean;
+  /**
+   * Renders link with `display: inline` for better wrapping in text.
+   * @default false
+   */
+  inlineText?: boolean;
+  /**
+   * Variant of the component to use.
+   * @default "action"
+   */
+  variant?: "action" | "neutral" | "subtle";
   /**
    * Link text
    */
@@ -22,10 +39,37 @@ export interface LinkProps
  * <Link href="#">lenke til ny side</Link>
  * <Link as={ReactRouter.Link} to="#">lenke til ny side</Link>
  * ```
+ * @example
+ * ```jsx
+ * <BodyLong>
+ * ...
+ *  <Link href="#" inlineText>lenke til ny side</Link>
+ * ...
+ * </BodyLong>
+ * ```
  */
 export const Link: OverridableComponent<LinkProps, HTMLAnchorElement> =
-  forwardRef(({ as: Component = "a", className, ...rest }, ref) => (
-    <Component {...rest} ref={ref} className={cl("navds-link", className)} />
-  ));
+  forwardRef(
+    (
+      {
+        as: Component = "a",
+        className,
+        underline = true,
+        variant = "action",
+        inlineText = false,
+        ...rest
+      },
+      ref
+    ) => (
+      <Component
+        {...rest}
+        ref={ref}
+        className={cl("navds-link", className, `navds-link--${variant}`, {
+          "navds-link--remove-underline": !underline,
+          "navds-link--inline-text": inlineText,
+        })}
+      />
+    )
+  );
 
 export default Link;

@navikt/core/react/src/link/link.stories.tsx

@@ -6,29 +6,76 @@ import {
   ConfirmationPanel as DsConfirmationPanel,
   Link,
 } from "..";
+import { RandomIcon } from "../util/RandomIcon";
+
 export default {
   title: "ds-react/Link",
   component: Link,
 };
 
+const LinkWrapper = ({
+  children = "Ex aliqua incididunt",
+  iconRight = false,
+  iconLeft = false,
+  variant = "action",
+  underline = false,
+  inlineText = true,
+}) => (
+  <>
+    {" "}
+    <Link
+      href="#"
+      underline={underline}
+      variant={variant as "action" | "neutral" | "subtle"}
+      inlineText={inlineText}
+    >
+      {iconLeft && (
+        <>
+          <RandomIcon />{" "}
+        </>
+      )}
+      {children}
+      {iconRight && (
+        <>
+          {" "}
+          <RandomIcon />
+        </>
+      )}
+    </Link>{" "}
+  </>
+);
+
 export const Default = {
-  render: (props) => {
+  render: ({ icon, inline }) => {
     const LinkD = () => (
-      <Link href="#">
-        {props.icon && <PlusCircleFillIcon />}Ex aliqua incididunt{" "}
-        {props.icon && <PlusCircleFillIcon />}
-      </Link>
+      <>
+        {" "}
+        <Link href="#" underline={!inline} inlineText={inline}>
+          {icon && <PlusCircleFillIcon />}Ex aliqua incididunt
+          {icon && <PlusCircleFillIcon />}
+        </Link>{" "}
+      </>
     );
 
-    if (props.inline) {
+    if (inline) {
       return (
-        <BodyLong>
-          Incididunt laborum nisi nisi Lorem <LinkD /> in. Laborum aute fugiat
-          officia adipisicing non veniam dolor nulla non ex consectetur fugiat
-          eiusmod aute. Culpa sit aute est duis minim in in voluptate velit
-          fugiat. Laboris est id deserunt ut ea Lorem eu. Esse elit laboris aute
-          commodo sint laborum fugiat aliqua.
-        </BodyLong>
+        <div
+          className="colgap"
+          style={{
+            width: "800px",
+            border: "1px solid black",
+            borderRadius: "8px",
+          }}
+        >
+          <BodyLong>
+            Incididunt laborum nisi nisi Lorem
+            <LinkD />
+            in. Laborum aute fugiat officia adipisicing non veniam dolor nulla
+            non ex consectetur fugiat eiusmod aute. Culpa sit aute est duis
+            minim in in voluptate velit fugiat. Laboris est id deserunt ut ea
+            Lorem eu. Esse elit laboris aute commodo sint laborum fugiat aliqua.
+          </BodyLong>
+        </div>
       );
     }
     return <LinkD />;
@@ -40,6 +87,49 @@ export const Default = {
   },
 };
 
+export const InlineInsideBodyLong = {
+  render: ({ iconLeft, iconRight }) => {
+    return (
+      <div
+        className="colgap"
+        style={{
+          width: "800px",
+          border: "1px solid black",
+          borderRadius: "8px",
+        }}
+      >
+        <style>{`.storybook-custom-spacing { white-space: pre;}`}</style>
+        <BodyLong>
+          <LinkWrapper underline iconLeft={iconLeft} iconRight={iconRight} />
+          Eiusmod aute.
+          <LinkWrapper underline iconLeft={iconLeft} iconRight={iconRight} />
+          Culpa sit aute est duis minim in in voluptate velit Incididunt laborum
+          nisi nisi Lorem officia adipisicing non veniam
+          <LinkWrapper underline iconLeft={iconLeft} iconRight={iconRight}>
+            blah blah blah blah blah blah blah blah blah blah blah blah blah
+            blah blah blah blah blah blah blah blah
+          </LinkWrapper>
+          dolor eu. Esse elit laboris aute commodo sint laborum fugiat aliqua.
+          <LinkWrapper underline iconLeft={iconLeft} iconRight={iconRight}>
+            Link
+          </LinkWrapper>
+        </BodyLong>
+        <BodyLong className="storybook-custom-spacing">
+          Custom{"   "}
+          <LinkWrapper underline iconLeft={iconLeft} iconRight={iconRight}>
+            link
+          </LinkWrapper>
+          {"     "}spacing.
+        </BodyLong>
+      </div>
+    );
+  },
+  args: {
+    iconLeft: false,
+    iconRight: false,
+  },
+};
+
 const DemoLink = () => (
   <Link href="#">
     <PlusCircleFillIcon aria-hidden /> Ex aliqua incididunt{" "}
@@ -83,3 +173,27 @@ export const ConfirmationPanel = () => {
     </div>
   );
 };
+
+export const Variants = {
+  render: ({ iconLeft, iconRight }) => {
+    return (
+      <div className="colgap">
+        {["action", "neutral", "subtle"].map((variant) => (
+          <>
+            <div>
+              <LinkWrapper
+                iconLeft={iconLeft}
+                iconRight={iconRight}
+                variant={variant}
+              />
+            </div>
+          </>
+        ))}
+      </div>
+    );
+  },
+  args: {
+    iconLeft: false,
+    iconRight: false,
+  },
+};

@navikt/core/react/src/util/RandomIcon.tsx

@@ -0,0 +1,9 @@
+import * as AllIcons from "@navikt/aksel-icons";
+import React from "react";
+
+const icons = Object.keys(AllIcons).map((key) => AllIcons[key]);
+
+export const RandomIcon = () => {
+  const Icon = icons[Math.floor(Math.random() * icons.length)];
+  return <Icon />;
+};

aksel.nav.no/website/pages/eksempler/link/inline.tsx

@@ -0,0 +1,30 @@
+import { PlusCircleFillIcon } from "@navikt/aksel-icons";
+import { BodyLong, Link } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <BodyLong>
+      Officia incididunt Culpa sit aute est duis minim in in voluptate velit
+      Incididunt laborum nisi nisi Lorem officia adipisicing non veniam{" "}
+      <Link href="#" inlineText={true}>
+        lenke til ny side
+        <PlusCircleFillIcon aria-hidden />
+      </Link>{" "}
+      Culpa sit aute est duis minim in in voluptate velit Incididunt laborum
+      nisi nisi Lorem officia adipisicing non veniam occaecat commodo id ad
+      aliquip.
+    </BodyLong>
+  );
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 0,
+};

aksel.nav.no/website/pages/eksempler/link/remove-underline.tsx

@@ -0,0 +1,25 @@
+import { BodyLong, Link } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <BodyLong>
+      Officia incididunt{" "}
+      <Link href="#" underline={false}>
+        lenke til ny side
+      </Link>{" "}
+      occaecat commodo id ad aliquip.
+    </BodyLong>
+  );
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 0,
+};