@navikt/ds-react 7.23.2 → 7.25.1

package/src/form/file-upload/parts/item/Item.tsx

@@ -1,4 +1,5 @@
 import React, { MouseEvent, forwardRef } from "react";
+import { Spacer } from "../../../../layout/stack";
 import { useRenameCSS } from "../../../../theme/Theme";
 import { BodyShort, ErrorMessage } from "../../../../typography";
 import { OverridableComponent } from "../../../../util";
@@ -51,11 +52,13 @@ export interface FileUploadItemProps
   /**
    * Props for the action button.
    */
-  button?: {
-    action: "delete" | "retry";
-    onClick: (event: MouseEvent<HTMLButtonElement>) => void;
-    id?: string;
-  };
+  button?:
+    | {
+        action: "delete" | "retry";
+        onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+        id?: string;
+      }
+    | React.ReactNode;
   /**
    * i18n-API for customizing texts and labels
    */
@@ -100,6 +103,9 @@ export const Item: OverridableComponent<FileUploadItemProps, HTMLDivElement> =
         return description ?? formatFileSize(file);
       }
 
+      const renderButton = status === "idle" && button;
+      const renderCustomButton = isCustomButton(button);
+
       return (
         <Component
           ref={ref}
@@ -131,8 +137,9 @@ export const Item: OverridableComponent<FileUploadItemProps, HTMLDivElement> =
                 )}
               </div>
             </div>
+            {renderButton && <Spacer />}
 
-            {status === "idle" && button && (
+            {renderButton && !renderCustomButton && (
               <ItemButton
                 {...button}
                 title={translate(
@@ -142,10 +149,17 @@ export const Item: OverridableComponent<FileUploadItemProps, HTMLDivElement> =
                 )}
               />
             )}
+            {renderButton && renderCustomButton && button}
           </div>
         </Component>
       );
     },
   );
 
+function isCustomButton(
+  button: FileUploadItemProps["button"],
+): button is React.ReactNode {
+  return React.isValidElement(button);
+}
+
 export default Item;

package/src/form/search/Search.tsx

@@ -121,6 +121,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
       onChange,
       onSearchClick,
       htmlSize,
+      "data-color": dataColor,
       ...rest
     } = props;
 
@@ -170,6 +171,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
             "navds-search--with-size": htmlSize,
           },
         )}
+        data-color={dataColor}
       >
         <Label
           htmlFor={inputProps.id}
@@ -233,7 +235,9 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
               handleClick,
             }}
           >
-            {children ? children : variant !== "simple" && <SearchButton />}
+            {children
+              ? children
+              : variant !== "simple" && <SearchButton data-color={dataColor} />}
           </SearchContext.Provider>
         </div>
         <div

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/modal/Modal.test.tsx

@@ -2,7 +2,7 @@ import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import React, { useState } from "react";
 import { describe, expect, test } from "vitest";
 import { Button, Modal } from "..";
-import { BODY_CLASS } from "./ModalUtils";
+import { BODY_CLASS, BODY_CLASS_LEGACY } from "./ModalUtils";
 
 const Test = () => {
   const [open, setOpen] = useState(true);
@@ -32,11 +32,15 @@ describe("Modal", () => {
   test("should toggle body class", async () => {
     render(<Test />);
     expect(document.body.classList).toContain(BODY_CLASS);
+    expect(document.body.classList).toContain(BODY_CLASS_LEGACY);
 
     fireEvent.click(screen.getByText("Close"));
-    await waitFor(() =>
-      expect(document.body.classList).not.toContain(BODY_CLASS),
-    );
+    await waitFor(() => {
+      expect(document.body.classList).not.toContain(BODY_CLASS);
+    });
+    await waitFor(() => {
+      expect(document.body.classList).not.toContain(BODY_CLASS_LEGACY);
+    });
   });
 
   test("should toggle body class when using portal", async () => {
@@ -46,10 +50,14 @@ describe("Modal", () => {
       </Modal>,
     );
     expect(document.body.classList).toContain(BODY_CLASS);
+    expect(document.body.classList).toContain(BODY_CLASS_LEGACY);
 
     fireEvent.click(screen.getByRole("button"));
     await waitFor(() =>
       expect(document.body.classList).not.toContain(BODY_CLASS),
     );
+    await waitFor(() =>
+      expect(document.body.classList).not.toContain(BODY_CLASS_LEGACY),
+    );
   });
 });

package/src/modal/ModalUtils.ts

@@ -27,7 +27,8 @@ export function getCloseHandler(
   return () => modalRef.current?.close();
 }
 
-export const BODY_CLASS = "navds-modal__document-body";
+export const BODY_CLASS_LEGACY = "navds-modal__document-body";
+export const BODY_CLASS = "aksel-modal__document-body";
 
 export function useBodyScrollLock(
   modalRef: React.RefObject<HTMLDialogElement>,
@@ -35,21 +36,37 @@ export function useBodyScrollLock(
   isNested: boolean,
 ) {
   React.useEffect(() => {
-    if (isNested) return;
-    if (!modalRef.current || !portalNode) return; // We check both to avoid running this twice when not using portal
-    if (modalRef.current.open) document.body.classList.add(BODY_CLASS); // In case `open` is true initially
+    if (isNested) {
+      return;
+    }
+
+    // We check both to avoid running this twice when not using portal
+    if (!modalRef.current || !portalNode) {
+      return;
+    }
+
+    // In case `open` is true initially
+    if (modalRef.current.open) {
+      document.body.classList.add(BODY_CLASS, BODY_CLASS_LEGACY);
+    }
 
     const observer = new MutationObserver(() => {
-      if (modalRef.current?.open) document.body.classList.add(BODY_CLASS);
-      else document.body.classList.remove(BODY_CLASS);
+      if (modalRef.current?.open) {
+        document.body.classList.add(BODY_CLASS, BODY_CLASS_LEGACY);
+      } else {
+        document.body.classList.remove(BODY_CLASS, BODY_CLASS_LEGACY);
+      }
     });
+
     observer.observe(modalRef.current, {
       attributes: true,
       attributeFilter: ["open"],
     });
+
     return () => {
       observer.disconnect();
-      document.body.classList.remove(BODY_CLASS); // In case modal is unmounted before it's closed
+      // In case modal is unmounted before it's closed
+      document.body.classList.remove(BODY_CLASS, BODY_CLASS_LEGACY);
     };
   }, [modalRef, portalNode, isNested]);
 }