@navikt/ds-react 7.23.2 → 7.24.0

package/esm/util/link-anchor/LinkAnchor.js

@@ -0,0 +1,72 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { forwardRef, useRef, } from "react";
+import { ArrowRightIcon } from "@navikt/aksel-icons";
+import { Slot } from "../../slot/Slot.js";
+import { useRenameCSS } from "../../theme/Theme.js";
+import { composeEventHandlers } from "../composeEventHandlers.js";
+import { createContext } from "../create-context.js";
+import { useMergeRefs } from "../hooks/useMergeRefs.js";
+const [LinkAnchorContextProvider, useLinkAnchorContext] = createContext({
+    name: "LinkAnchorOverlayContext",
+});
+const LinkAnchorOverlay = forwardRef((_a, forwardedRef) => {
+    var { children, asChild, className, onClick } = _a, restProps = __rest(_a, ["children", "asChild", "className", "onClick"]);
+    const { cn } = useRenameCSS();
+    const anchorRef = useRef(null);
+    const Component = asChild ? Slot : "div";
+    return (React.createElement(LinkAnchorContextProvider, { anchorRef: anchorRef },
+        React.createElement(Component, Object.assign({ ref: forwardedRef }, restProps, { className: cn("navds-link-anchor__overlay", className), onClick: composeEventHandlers(onClick, (e) => {
+                var _a;
+                if (e.target === anchorRef.current || isTextSelected()) {
+                    return;
+                }
+                const event = new MouseEvent("click", {
+                    bubbles: true,
+                    cancelable: true,
+                    view: window,
+                    ctrlKey: e.ctrlKey,
+                    shiftKey: e.shiftKey,
+                    altKey: e.altKey,
+                    metaKey: e.metaKey,
+                    button: e.button,
+                    screenX: e.screenX,
+                    screenY: e.screenY,
+                    clientX: e.clientX,
+                    clientY: e.clientY,
+                });
+                (_a = anchorRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(event);
+            }) }), children)));
+});
+const LinkAnchor = forwardRef((_a, forwardedRef) => {
+    var { children, asChild, className } = _a, restProps = __rest(_a, ["children", "asChild", "className"]);
+    const { cn } = useRenameCSS();
+    const context = useLinkAnchorContext(false);
+    const mergedRefs = useMergeRefs(forwardedRef, context === null || context === void 0 ? void 0 : context.anchorRef);
+    const Component = asChild ? Slot : "a";
+    return (React.createElement(Component, Object.assign({ ref: mergedRefs }, restProps, { className: cn("navds-link-anchor", className) }), children));
+});
+const LinkAnchorArrow = forwardRef((_a, forwardedRef) => {
+    var { className } = _a, restProps = __rest(_a, ["className"]);
+    const { cn } = useRenameCSS();
+    return (React.createElement(ArrowRightIcon, Object.assign({ ref: forwardedRef, "aria-hidden": true, className: cn("navds-link-anchor__arrow", className) }, restProps)));
+});
+/* -------------------------- LinkAnchor Utilities -------------------------- */
+function isTextSelected() {
+    var _a;
+    if (typeof window === "undefined") {
+        return false;
+    }
+    return !!((_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.toString());
+}
+export { LinkAnchor, LinkAnchorArrow, LinkAnchorOverlay };
+//# sourceMappingURL=LinkAnchor.js.map

package/esm/util/link-anchor/LinkAnchor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkAnchor.js","sourceRoot":"","sources":["../../../src/util/link-anchor/LinkAnchor.tsx"],"names":[],"mappings":"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"}

package/esm/util/link-anchor/index.d.ts

@@ -0,0 +1,2 @@
+export { LinkAnchor, LinkAnchorOverlay, LinkAnchorArrow } from "./LinkAnchor.js";
+export type { LinkAnchorProps, LinkAnchorOverlayProps, LinkAnchorArrowProps, } from "./LinkAnchor.js";

package/esm/util/link-anchor/index.js

@@ -0,0 +1,3 @@
+"use client";
+export { LinkAnchor, LinkAnchorOverlay, LinkAnchorArrow } from "./LinkAnchor.js";
+//# sourceMappingURL=index.js.map

package/esm/util/link-anchor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/util/link-anchor/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "7.23.2",
+  "version": "7.24.0",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -264,6 +264,16 @@
         "default": "./cjs/link/index.js"
       }
     },
+    "./LinkCard": {
+      "import": {
+        "types": "./esm/link-card/index.d.ts",
+        "default": "./esm/link-card/index.js"
+      },
+      "require": {
+        "types": "./cjs/link-card/index.d.ts",
+        "default": "./cjs/link-card/index.js"
+      }
+    },
     "./LinkPanel": {
       "import": {
         "types": "./esm/link-panel/index.d.ts",
@@ -630,8 +640,8 @@
   "dependencies": {
     "@floating-ui/react": "0.27.8",
     "@floating-ui/react-dom": "^2.0.9",
-    "@navikt/aksel-icons": "^7.23.2",
-    "@navikt/ds-tokens": "^7.23.2",
+    "@navikt/aksel-icons": "^7.24.0",
+    "@navikt/ds-tokens": "^7.24.0",
     "clsx": "^2.1.0",
     "date-fns": "^4.0.0",
     "react-day-picker": "9.7.0"

package/src/form/switch/Switch.tsx

@@ -117,32 +117,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
         />
         <span className={cn("navds-switch__track")}>
           <span className={cn("navds-switch__thumb")}>
-            {loading ? (
-              <Loader
-                size="xsmall"
-                aria-live="polite"
-                variant={checked ? "interaction" : "inverted"}
-              />
-            ) : (
-              <svg
-                width="12"
-                height="10"
-                viewBox="0 0 12 10"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                focusable={false}
-                role="img"
-                aria-hidden
-                className={cn("navds-switch__checkmark")}
-              >
-                <path
-                  fillRule="evenodd"
-                  clipRule="evenodd"
-                  d="M11.2674 0.647802C11.8762 1.20971 11.9141 2.1587 11.3522 2.76743L5.35221 9.26743C5.07531 9.56739 4.68813 9.74155 4.27998 9.74971C3.87184 9.75787 3.478 9.59933 3.18934 9.31067L0.68934 6.81067C0.103553 6.22488 0.103553 5.27513 0.68934 4.68935C1.27513 4.10356 2.22487 4.10356 2.81066 4.68935L4.20673 6.08541L9.14779 0.732587C9.7097 0.123856 10.6587 0.0858967 11.2674 0.647802Z"
-                  fill="currentColor"
-                />
-              </svg>
-            )}
+            <SwitchIcon size={size} checked={checked} loading={loading} />
           </span>
         </span>
         <label
@@ -181,4 +156,82 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
   },
 );
 
+const SwitchIcon = ({
+  size,
+  checked,
+  loading,
+}: {
+  size: SwitchProps["size"];
+  checked: SwitchProps["checked"];
+  loading: SwitchProps["loading"];
+}) => {
+  if (loading) {
+    let baseSize = 16;
+
+    if (size === "small") {
+      baseSize = 12;
+    }
+
+    if (checked) {
+      baseSize += 2;
+    }
+
+    return (
+      <Loader
+        size="small"
+        aria-live="polite"
+        variant={checked ? "interaction" : "inverted"}
+        width={`${baseSize / 16}rem`}
+        height={`${baseSize / 16}rem`}
+      />
+    );
+  }
+
+  if (!checked) {
+    return null;
+  }
+
+  if (size === "small") {
+    return (
+      <svg
+        width="11"
+        height="8"
+        viewBox="0 0 11 8"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        focusable={false}
+        role="img"
+        aria-hidden
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M9.62013 0.530226C10.1194 0.952686 10.1817 1.6999 9.7592 2.19917L5.4171 7.33075C5.20318 7.58356 4.89318 7.73525 4.5623 7.74901C4.23142 7.76277 3.90989 7.63735 3.67572 7.40318L1.3073 5.03476C0.844833 4.5723 0.844833 3.8225 1.3073 3.36003C1.76976 2.89757 2.51956 2.89757 2.98202 3.36003L4.4404 4.81841L7.95118 0.669304C8.37364 0.170033 9.12085 0.107765 9.62013 0.530226Z"
+          fill="currentColor"
+        />
+      </svg>
+    );
+  }
+
+  return (
+    <svg
+      width="12"
+      height="10"
+      viewBox="0 0 12 10"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      focusable={false}
+      role="img"
+      aria-hidden
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.2674 0.647802C11.8762 1.20971 11.9141 2.1587 11.3522 2.76743L5.35221 9.26743C5.07531 9.56739 4.68813 9.74155 4.27998 9.74971C3.87184 9.75787 3.478 9.59933 3.18934 9.31067L0.68934 6.81067C0.103553 6.22488 0.103553 5.27513 0.68934 4.68935C1.27513 4.10356 2.22487 4.10356 2.81066 4.68935L4.20673 6.08541L9.14779 0.732587C9.7097 0.123856 10.6587 0.0858967 11.2674 0.647802Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
 export default Switch;

package/src/index.ts

@@ -150,6 +150,16 @@ export { Select, type SelectProps } from "./form/select";
 export { Switch, type SwitchProps } from "./form/switch";
 export { Textarea, type TextareaProps } from "./form/textarea";
 export { TextField, type TextFieldProps } from "./form/textfield";
+export {
+  LinkCard,
+  type LinkCardProps,
+  type LinkCardTitleProps,
+  type LinkCardDescriptionProps,
+  type LinkCardFooterProps,
+  type LinkCardAnchorProps,
+  type LinkCardIconProps,
+  type LinkCardImageProps,
+} from "./link-card";
 
 /**
  * Theming

package/src/link-card/LinkCard.tsx

@@ -0,0 +1,317 @@
+import React, { HTMLAttributes, forwardRef } from "react";
+import { useRenameCSS } from "../theme/Theme";
+import { BodyLong, Heading } from "../typography";
+import { createContext } from "../util/create-context";
+import {
+  LinkAnchor,
+  LinkAnchorArrow,
+  LinkAnchorOverlay,
+  LinkAnchorProps,
+} from "../util/link-anchor";
+
+/* ------------------------------ LinkCard Root ----------------------------- */
+interface LinkCardProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * @default true
+   */
+  arrow?: boolean;
+  /**
+   * Changes padding and typo sizes.
+   * @default "medium"
+   */
+  size?: "small" | "medium";
+}
+
+type LinkCardContextProps = {
+  size: LinkCardProps["size"];
+  arrow: LinkCardProps["arrow"];
+};
+
+const [LinkCardContextProvider, useLinkCardContext] =
+  createContext<LinkCardContextProps>({
+    name: "LinkCardContextProvider",
+  });
+
+interface LinkCardComponent
+  extends React.ForwardRefExoticComponent<
+    LinkCardProps & React.RefAttributes<HTMLDivElement>
+  > {
+  /**
+   * @see 🏷️ {@link LinkCardTitleProps}
+   */
+  Title: typeof LinkCardTitle;
+  /**
+   * @see 🏷️ {@link LinkCardAnchorProps}
+   */
+  Anchor: typeof LinkCardAnchor;
+  /**
+   * @see 🏷️ {@link LinkCardDescriptionProps}
+   */
+  Description: typeof LinkCardDescription;
+  /**
+   * @see 🏷️ {@link LinkCardFooterProps}
+   */
+  Footer: typeof LinkCardFooter;
+  /**
+   * @see 🏷️ {@link LinkCardIconProps}
+   */
+  Icon: typeof LinkCardIcon;
+  /**
+   * @see 🏷️ {@link LinkCardImageProps}
+   */
+  Image: typeof LinkCardImage;
+}
+
+/**
+ * Accessible clickable card as a link.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/linkcard)
+ * @see 🏷️ {@link LinkCardProps}
+ *
+ *
+ * @example
+ * ```tsx
+ * <LinkCard>
+ *   <LinkCard.Icon>
+ *     <IconOrPictogram />
+ *   </LinkCard.Icon>
+ *   <LinkCard.Title>
+ *     <LinkCard.Anchor href="/href">
+ *       LinkCard title
+ *     </LinkCard.Anchor>
+ *   </LinkCard.Title>
+ *   <LinkCard.Description>
+ *     This is a description of the link card.
+ *   </LinkCard.Description>
+ *   <LinkCard.Footer>Footer content</LinkCard.Footer>
+ * </LinkCard>
+ * ```
+ */
+export const LinkCard = forwardRef<HTMLDivElement, LinkCardProps>(
+  (
+    {
+      children,
+      className,
+      arrow = true,
+      size = "medium",
+      ...restProps
+    }: LinkCardProps,
+    forwardedRef,
+  ) => {
+    const { cn } = useRenameCSS();
+
+    return (
+      <LinkCardContextProvider size={size} arrow={arrow}>
+        <LinkAnchorOverlay asChild>
+          <BodyLong
+            as="div"
+            size={size}
+            ref={forwardedRef}
+            data-color="neutral"
+            className={cn(
+              "navds-link-card",
+              className,
+              `navds-link-card--${size}`,
+            )}
+            {...restProps}
+          >
+            {children}
+          </BodyLong>
+        </LinkAnchorOverlay>
+      </LinkCardContextProvider>
+    );
+  },
+) as LinkCardComponent;
+
+/* ---------------------------- LinkCard Title ---------------------------- */
+type LinkCardTitleProps = HTMLAttributes<HTMLHeadingElement> & {
+  children: React.ReactNode;
+  /**
+   * Heading tag. Use "span" if you want a non header defining card
+   * (eg. you have a lot of them all at once, such as in a grid)
+   * @default "span"
+   */
+  as?: "span" | "h2" | "h3" | "h4" | "h5" | "h6";
+};
+
+/**
+ * @see 🏷️ {@link LinkCardTitleProps}
+ */
+export const LinkCardTitle = forwardRef<HTMLHeadingElement, LinkCardTitleProps>(
+  (
+    { children, as = "span", className, ...restProps }: LinkCardTitleProps,
+    forwardedRef,
+  ) => {
+    const { cn } = useRenameCSS();
+
+    const context = useLinkCardContext();
+
+    return (
+      <Heading
+        ref={forwardedRef}
+        as={as}
+        size={context.size === "medium" ? "small" : "xsmall"}
+        className={cn("navds-link-card__title", className)}
+        {...restProps}
+      >
+        {children}
+        {context.arrow && (
+          <LinkAnchorArrow
+            fontSize={context.size === "medium" ? "1.75rem" : "1.5rem"}
+          />
+        )}
+      </Heading>
+    );
+  },
+);
+
+/* ---------------------------- LinkCard Anchor ---------------------------- */
+type LinkCardAnchorProps = LinkAnchorProps;
+
+/**
+ * @see 🏷️ {@link LinkCardAnchorProps}
+ */
+export const LinkCardAnchor = LinkAnchor;
+
+/* ---------------------------- LinkCard Description ---------------------------- */
+interface LinkCardDescriptionProps extends HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+/**
+ * @see 🏷️ {@link LinkCardDescriptionProps}
+ */
+export const LinkCardDescription = forwardRef<
+  HTMLDivElement,
+  LinkCardDescriptionProps
+>(
+  (
+    { children, className, ...restProps }: LinkCardDescriptionProps,
+    forwardedRef,
+  ) => {
+    const { cn } = useRenameCSS();
+
+    return (
+      <div
+        ref={forwardedRef}
+        className={cn("navds-link-card__description", className)}
+        {...restProps}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+/* ---------------------------- LinkCard Footer ---------------------------- */
+interface LinkCardFooterProps extends HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+/**
+ * @see 🏷️ {@link LinkCardFooterProps}
+ */
+export const LinkCardFooter = forwardRef<HTMLDivElement, LinkCardFooterProps>(
+  (
+    { children, className, ...restProps }: LinkCardFooterProps,
+    forwardedRef,
+  ) => {
+    const { cn } = useRenameCSS();
+
+    return (
+      <div
+        ref={forwardedRef}
+        className={cn("navds-link-card__footer", className)}
+        {...restProps}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+/* ---------------------------- LinkCard Icon ---------------------------- */
+interface LinkCardIconProps extends HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+/**
+ * @see 🏷️ {@link LinkCardIconProps}
+ */
+export const LinkCardIcon = forwardRef<HTMLDivElement, LinkCardIconProps>(
+  ({ children, className, ...restProps }: LinkCardIconProps, forwardedRef) => {
+    const { cn } = useRenameCSS();
+
+    return (
+      <div
+        ref={forwardedRef}
+        aria-hidden
+        className={cn("navds-link-card__icon", className)}
+        {...restProps}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+/* ---------------------------- LinkCard Image ---------------------------- */
+type ImageAspectRatio = "1/1" | "16/9" | "16/10" | "4/3" | (string & {});
+
+interface LinkCardImageProps extends HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  /**
+   * The aspect-ratio CSS property allows you to define the desired width-to-height ratio of an element's box.
+   * This means that even if the parent container or viewport size changes, the browser will adjust the element's dimensions to maintain the specified width-to-height ratio.
+   */
+  aspectRatio?: ImageAspectRatio;
+}
+
+/**
+ * @see 🏷️ {@link LinkCardImageProps}
+ */
+export const LinkCardImage = forwardRef<HTMLDivElement, LinkCardImageProps>(
+  (
+    {
+      children,
+      className,
+      aspectRatio,
+      style,
+      ...restProps
+    }: LinkCardImageProps,
+    forwardedRef,
+  ) => {
+    const { cn } = useRenameCSS();
+
+    return (
+      <div
+        ref={forwardedRef}
+        className={cn("navds-link-card__image-container", className)}
+        style={{
+          ...style,
+          aspectRatio,
+        }}
+        {...restProps}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+LinkCard.Title = LinkCardTitle;
+LinkCard.Anchor = LinkCardAnchor;
+LinkCard.Description = LinkCardDescription;
+LinkCard.Footer = LinkCardFooter;
+LinkCard.Icon = LinkCardIcon;
+LinkCard.Image = LinkCardImage;
+
+export type {
+  LinkCardAnchorProps,
+  LinkCardDescriptionProps,
+  LinkCardFooterProps,
+  LinkCardIconProps,
+  LinkCardImageProps,
+  LinkCardProps,
+  LinkCardTitleProps,
+};

package/src/link-card/index.tsx

@@ -0,0 +1,20 @@
+"use client";
+export {
+  LinkCard,
+  LinkCardTitle,
+  LinkCardDescription,
+  LinkCardFooter,
+  LinkCardAnchor,
+  LinkCardIcon,
+  LinkCardImage,
+} from "./LinkCard";
+
+export type {
+  LinkCardProps,
+  LinkCardTitleProps,
+  LinkCardDescriptionProps,
+  LinkCardFooterProps,
+  LinkCardAnchorProps,
+  LinkCardIconProps,
+  LinkCardImageProps,
+} from "./LinkCard";

package/src/link-panel/LinkPanel.tsx

@@ -38,21 +38,13 @@ interface LinkPanelComponentType
 }
 
 /**
- * A component that displays a link panel.
+ * @deprecated Use `LinkCard` instead. Migrations should be straightforward as the API is similar.
+ * @see [📝 LinkCard documentation](https://aksel.nav.no/komponenter/core/linkcard)
  *
- * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/linkpanel)
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/legacy/linkpanel)
  * @see 🏷️ {@link LinkPanelProps}
  * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
  *
- * @example
- * ```jsx
- * <LinkPanel href="#" border>
- *   <LinkPanel.Title>Arbeidssøker eller permittert</LinkPanel.Title>
- *   <LinkPanel.Description>
- *     Om jobb, registrering, CV, dagpenger og feriepenger av dagpenger
- *   </LinkPanel.Description>
- * </LinkPanel>
- * ```
  */
 export const LinkPanelComponent: OverridableComponent<
   LinkPanelProps,

package/src/table/Table.tsx

@@ -22,6 +22,11 @@ export interface TableProps
    * @default false
    */
   zebraStripes?: boolean;
+  /**
+   * Makes the header sticky
+   * @default false
+   */
+  stickyHeader?: boolean;
   /**
    * Sort state
    */
@@ -85,6 +90,7 @@ export const Table = forwardRef(
       size = "medium",
       onSortChange,
       sort,
+      stickyHeader = false,
       ...rest
     },
     ref,
@@ -97,6 +103,7 @@ export const Table = forwardRef(
           ref={ref}
           className={cn("navds-table", `navds-table--${size}`, className, {
             "navds-table--zebra-stripes": zebraStripes,
+            "navds-table--sticky-header": stickyHeader,
           })}
         />
       </TableContext.Provider>