✨ Add Link component

Inline link with action (default) and neutral variants, plus an
inlineText mode that keeps the underline when embedded in body text.
Includes styles and a website example.

aksel.nav.no/website/src/App.tsx

@@ -5,6 +5,7 @@ import {
   BodyShort,
   Button,
   Heading,
+  Link,
   Modal,
   TextField,
 } from "@navikt/ds-react";
@@ -72,6 +73,18 @@ export function App() {
         </div>
       </section>
 
+      <section className="example">
+        <Heading level="2" size="medium">
+          Link
+        </Heading>
+        <div className="example__preview example__preview--column">
+          <BodyShort>
+            Les mer om <Link href="#top" inlineText>hvordan vi behandler data</Link> før du
+            søker, eller gå tilbake til <Link href="#top" variant="neutral">forsiden</Link>.
+          </BodyShort>
+        </div>
+      </section>
+
       <section className="example">
         <Heading level="2" size="medium">
           Accordion

packages/core/css/src/index.css

@@ -6,3 +6,4 @@
 @import "./alert.css";
 @import "./accordion.css";
 @import "./modal.css";
+@import "./link.css";

packages/core/css/src/link.css

@@ -0,0 +1,26 @@
+/**
+ * Link
+ */
+
+.navds-link {
+  color: var(--a-icon-action);
+  text-decoration: none;
+  text-underline-offset: 0.15em;
+}
+
+.navds-link:hover {
+  text-decoration: underline;
+}
+
+.navds-link--neutral {
+  color: var(--a-text-default);
+}
+
+.navds-link--inline-text {
+  text-decoration: underline;
+}
+
+.navds-link:focus-visible {
+  outline: 2px solid var(--a-border-focus);
+  outline-offset: 2px;
+}

packages/core/react/src/index.ts

@@ -12,3 +12,5 @@ export { Accordion, AccordionItem } from "./accordion";
 export type { AccordionProps, AccordionItemProps } from "./accordion";
 export { Modal } from "./modal";
 export type { ModalProps } from "./modal";
+export { Link } from "./link";
+export type { LinkProps } from "./link";

packages/core/react/src/link/Link.tsx

@@ -0,0 +1,34 @@
+import { forwardRef } from "react";
+import type { AnchorHTMLAttributes } from "react";
+import { cn } from "../util/cn";
+
+export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  /**
+   * Link variant.
+   * @default "action"
+   */
+  variant?: "action" | "neutral";
+  /**
+   * Underlines the link so it reads as part of surrounding body text.
+   * @default false
+   */
+  inlineText?: boolean;
+}
+
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
+  { variant = "action", inlineText = false, className, ...rest },
+  ref,
+) {
+  return (
+    <a
+      ref={ref}
+      className={cn(
+        "navds-link",
+        `navds-link--${variant}`,
+        inlineText && "navds-link--inline-text",
+        className,
+      )}
+      {...rest}
+    />
+  );
+});

packages/core/react/src/link/index.ts

@@ -0,0 +1,2 @@
+export { Link } from "./Link";
+export type { LinkProps } from "./Link";