@navikt/ds-react 7.40.0 → 8.0.1

package/src/layout/utilities/types.ts

@@ -1,29 +1,16 @@
 import type {
   AkselBorderRadiusToken,
   AkselBreakpointToken,
-  AkselLegacyBackgroundColorToken,
-  AkselLegacyBorderColorToken,
-  AkselLegacyBorderRadiusToken,
-  AkselLegacyShadowToken,
-  AkselLegacySpacingToken,
-  AkselLegacySurfaceColorToken,
   AkselSpaceToken,
 } from "@navikt/ds-tokens/types";
 
-export type BackgroundColorToken = AkselLegacyBackgroundColorToken;
-export type SurfaceColorToken = AkselLegacySurfaceColorToken;
-export type BorderColorToken = AkselLegacyBorderColorToken;
-export type ShadowToken = AkselLegacyShadowToken;
-
 export type BreakpointsAlias = Extract<
   AkselBreakpointToken,
   "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
 >;
 
-export type SpacingScale = AkselLegacySpacingToken | AkselSpaceToken;
-export type BorderRadiusScale =
-  | AkselLegacyBorderRadiusToken
-  | AkselBorderRadiusToken;
+export type SpacingScale = AkselSpaceToken;
+export type BorderRadiusScale = AkselBorderRadiusToken;
 
 export type SpaceDelimitedAttribute<T extends string> =
   | T

package/src/link/Link.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS, useThemeInternal } from "../theme/Theme";
+import type { AkselStatusColorRole } from "@navikt/ds-tokens/types";
 import { AkselColor } from "../types";
+import { cl } from "../util/className";
 import { OverridableComponent } from "../util/types";
 
 export interface LinkProps
@@ -19,14 +20,21 @@ export interface LinkProps
    */
   inlineText?: boolean;
   /**
-   * Variant of the component to use.
-   * @default "action"
+   * @deprecated Deprecated in v8. Use `data-color` prop instead.
    */
   variant?: "action" | "neutral" | "subtle";
   /**
    * Link text
    */
   children: React.ReactNode;
+  /**
+   * Overrides inherited color.
+   *
+   * We recommend only using `accent` and `neutral`. We have disallowed status-colors.
+   * @see 🏷️ {@link AkselColor}
+   * @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
+   */
+  "data-color"?: Exclude<AkselColor, AkselStatusColorRole>;
 }
 
 /**
@@ -64,30 +72,14 @@ export const Link: OverridableComponent<LinkProps, HTMLAnchorElement> =
       },
       ref,
     ) => {
-      const themeContext = useThemeInternal();
-      const { cn } = useRenameCSS();
-
-      /*
-       * We avoid defaulting to "action" in darkside.
-       */
-      let localVariant: LinkProps["variant"];
-
-      if (themeContext?.isDarkside) {
-        localVariant = variant;
-      } else {
-        localVariant = variant ?? "action";
-      }
-
       return (
         <Component
-          data-color={color ?? variantToColor(localVariant)}
-          data-variant={localVariant}
+          data-color={color ?? variantToColor(variant)}
           {...rest}
           ref={ref}
-          className={cn("navds-link", className, {
-            [`navds-link--${localVariant}`]: localVariant,
-            "navds-link--remove-underline": !underline,
-            "navds-link--inline-text": inlineText,
+          className={cl("aksel-link", className, {
+            "aksel-link--remove-underline": !underline,
+            "aksel-link--inline-text": inlineText,
           })}
         />
       );
@@ -101,7 +93,6 @@ function variantToColor(
     case "action":
       return "accent";
     case "neutral":
-      return "neutral";
     case "subtle":
       return "neutral";
     default:

package/src/link-card/LinkCard.tsx

@@ -1,6 +1,7 @@
 import React, { HTMLAttributes, forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import type { AkselColor } from "../types";
 import { BodyLong, Heading } from "../typography";
+import { cl } from "../util/className";
 import { createStrictContext } from "../util/create-strict-context";
 import {
   LinkAnchor,
@@ -25,6 +26,14 @@ interface LinkCardProps extends HTMLAttributes<HTMLDivElement> {
    * @default "medium"
    */
   size?: "small" | "medium";
+  /**
+   * Overrides inherited color.
+   *
+   * We reccomend avoiding status-colors (`info`, `success`, `warning`, `danger`) in LinkCards.
+   * @see 🏷️ {@link AkselColor}
+   * @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
+   */
+  "data-color"?: AkselColor;
 }
 
 type LinkCardContextProps = {
@@ -103,8 +112,6 @@ export const LinkCard = forwardRef<HTMLDivElement, LinkCardProps>(
     }: LinkCardProps,
     forwardedRef,
   ) => {
-    const { cn } = useRenameCSS();
-
     return (
       <LinkCardContextProvider size={size}>
         <LinkAnchorOverlay asChild>
@@ -113,10 +120,10 @@ export const LinkCard = forwardRef<HTMLDivElement, LinkCardProps>(
             size={size}
             ref={forwardedRef}
             data-color="neutral"
-            className={cn(
-              "navds-link-card",
+            className={cl(
+              "aksel-link-card",
               className,
-              `navds-link-card--${size}`,
+              `aksel-link-card--${size}`,
             )}
             data-align-arrow={arrowPosition}
             {...restProps}
@@ -125,7 +132,7 @@ export const LinkCard = forwardRef<HTMLDivElement, LinkCardProps>(
             {arrow && (
               <LinkAnchorArrow
                 fontSize={size === "medium" ? "1.75rem" : "1.5rem"}
-                className={cn("navds-link-card__arrow")}
+                className="aksel-link-card__arrow"
               />
             )}
           </BodyLong>
@@ -154,8 +161,6 @@ export const LinkCardTitle = forwardRef<HTMLHeadingElement, LinkCardTitleProps>(
     { children, as = "span", className, ...restProps }: LinkCardTitleProps,
     forwardedRef,
   ) => {
-    const { cn } = useRenameCSS();
-
     const context = useLinkCardContext();
 
     return (
@@ -163,7 +168,7 @@ export const LinkCardTitle = forwardRef<HTMLHeadingElement, LinkCardTitleProps>(
         ref={forwardedRef}
         as={as}
         size={context.size === "medium" ? "small" : "xsmall"}
-        className={cn("navds-link-card__title", className)}
+        className={cl("aksel-link-card__title", className)}
         {...restProps}
       >
         {children}
@@ -196,12 +201,10 @@ export const LinkCardDescription = forwardRef<
     { children, className, ...restProps }: LinkCardDescriptionProps,
     forwardedRef,
   ) => {
-    const { cn } = useRenameCSS();
-
     return (
       <div
         ref={forwardedRef}
-        className={cn("navds-link-card__description", className)}
+        className={cl("aksel-link-card__description", className)}
         {...restProps}
       >
         {children}
@@ -223,12 +226,10 @@ 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)}
+        className={cl("aksel-link-card__footer", className)}
         {...restProps}
       >
         {children}
@@ -247,13 +248,11 @@ interface LinkCardIconProps extends HTMLAttributes<HTMLDivElement> {
  */
 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)}
+        className={cl("aksel-link-card__icon", className)}
         {...restProps}
       >
         {children}
@@ -288,12 +287,10 @@ export const LinkCardImage = forwardRef<HTMLDivElement, LinkCardImageProps>(
     }: LinkCardImageProps,
     forwardedRef,
   ) => {
-    const { cn } = useRenameCSS();
-
     return (
       <div
         ref={forwardedRef}
-        className={cn("navds-link-card__image-container", className)}
+        className={cl("aksel-link-card__image-container", className)}
         style={{
           ...style,
           aspectRatio,

package/src/link-panel/LinkPanel.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
 import { ChevronRightIcon } from "@navikt/aksel-icons";
 import { Panel } from "../panel";
-import { useRenameCSS } from "../theme/Theme";
+import { cl } from "../util/className";
 import { OverridableComponent } from "../util/types";
 import {
   LinkPanelDescription,
@@ -51,21 +51,16 @@ export const LinkPanelComponent: OverridableComponent<
   HTMLAnchorElement
 > = forwardRef(
   ({ children, as = "a", border = true, className, ...rest }, ref) => {
-    const { cn } = useRenameCSS();
-
     return (
       <Panel
         {...rest}
         as={as}
         border={border}
         ref={ref}
-        className={cn("navds-link-panel", className)}
+        className={cl("aksel-link-panel", className)}
       >
-        <div className={cn("navds-link-panel__content")}>{children}</div>
-        <ChevronRightIcon
-          className={cn("navds-link-panel__chevron")}
-          aria-hidden
-        />
+        <div className="aksel-link-panel__content">{children}</div>
+        <ChevronRightIcon className="aksel-link-panel__chevron" aria-hidden />
       </Panel>
     );
   },

package/src/link-panel/LinkPanelDescription.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
 import { BodyLong } from "../typography";
+import { cl } from "../util/className";
 
 export interface LinkPanelDescriptionProps
   extends React.HTMLAttributes<HTMLDivElement> {
@@ -11,14 +11,12 @@ export const LinkPanelDescription = forwardRef<
   HTMLDivElement,
   LinkPanelDescriptionProps
 >(({ className, ...rest }, ref) => {
-  const { cn } = useRenameCSS();
-
   return (
     <BodyLong
       {...rest}
       as="div"
       ref={ref}
-      className={cn("navds-link-panel__description", className)}
+      className={cl("aksel-link-panel__description", className)}
     />
   );
 });

package/src/link-panel/LinkPanelTitle.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import { cl } from "../util/className";
 import { OverridableComponent } from "../util/types";
 
 export interface LinkPanelTitleProps
@@ -11,16 +11,14 @@ export const LinkPanelTitle: OverridableComponent<
   LinkPanelTitleProps,
   HTMLDivElement
 > = forwardRef(({ className, as: Component = "div", ...rest }, ref) => {
-  const { cn } = useRenameCSS();
-
   return (
     <Component
       {...rest}
       ref={ref}
-      className={cn(
-        "navds-link-panel__title",
-        "navds-heading",
-        "navds-heading--medium",
+      className={cl(
+        "aksel-link-panel__title",
+        "aksel-heading",
+        "aksel-heading--medium",
         className,
       )}
     />

package/src/list/List.Item.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, useContext } from "react";
-import { useRenameCSS } from "../theme/Theme";
 import { BodyLong } from "../typography";
+import { cl } from "../util/className";
 import { ListContext } from "./List.context";
 import type { ListItemProps } from "./List.types";
 
@@ -10,7 +10,6 @@ import type { ListItemProps } from "./List.types";
 export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
   ({ className, children, title, icon, ...rest }, ref) => {
     const { listType, size } = useContext(ListContext);
-    const { cn } = useRenameCSS();
 
     if (listType === "ol" && icon) {
       console.warn(
@@ -19,12 +18,12 @@ export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
     }
 
     return (
-      <li {...rest} ref={ref} className={cn("navds-list__item", className)}>
+      <li {...rest} ref={ref} className={cl("aksel-list__item", className)}>
         {listType === "ul" && (
           <div
-            className={cn("navds-list__item-marker", {
-              "navds-list__item-marker--icon": icon,
-              "navds-list__item-marker--bullet": !icon,
+            className={cl("aksel-list__item-marker", {
+              "aksel-list__item-marker--icon": icon,
+              "aksel-list__item-marker--bullet": !icon,
             })}
           >
             {icon ? (

package/src/list/List.tsx

@@ -1,20 +1,11 @@
 import React, { forwardRef, useContext } from "react";
-import { useRenameCSS, useThemeInternal } from "../theme/Theme";
-import { BodyLong, BodyShort, Heading, HeadingProps } from "../typography";
+import { BodyLong } from "../typography";
+import { cl } from "../util/className";
 import { ListItem } from "./List.Item";
 import { ListContext } from "./List.context";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import type { ListItemProps, ListProps } from "./List.types";
 
-const headingSizeMap: Record<
-  Exclude<ListProps["size"], undefined>,
-  HeadingProps["size"]
-> = {
-  small: "xsmall",
-  medium: "small",
-  large: "medium",
-};
-
 export interface ListComponent
   extends React.ForwardRefExoticComponent<
     ListProps & React.RefAttributes<HTMLDivElement>
@@ -46,9 +37,6 @@ export const List = forwardRef<HTMLDivElement, ListProps>(
       children,
       className,
       as: ListTag = "ul",
-      title,
-      description,
-      headingTag,
       size,
       "aria-label": _ariaLabel,
       "aria-labelledby": _ariaLabelledBy,
@@ -58,47 +46,8 @@ export const List = forwardRef<HTMLDivElement, ListProps>(
   ) => {
     const { size: contextSize } = useContext(ListContext);
 
-    const { cn } = useRenameCSS();
-    const themeContext = useThemeInternal();
-
     const listSize = size ?? contextSize;
 
-    if (themeContext?.isDarkside) {
-      if (
-        process.env.NODE_ENV !== "production" &&
-        (title || description || headingTag)
-      ) {
-        console.warn(
-          "List: title, description and headingTag are deprecated and will not work with updated theme for Aksel.",
-        );
-      }
-
-      return (
-        <ListContext.Provider
-          value={{
-            listType: ListTag,
-            size: listSize,
-          }}
-        >
-          <BodyLong
-            as="div"
-            {...rest}
-            size={listSize}
-            ref={ref}
-            className={cn("navds-list", `navds-list--${listSize}`, className)}
-          >
-            <ListTag
-              role="list"
-              aria-label={_ariaLabel}
-              aria-labelledby={_ariaLabelledBy}
-            >
-              {children}
-            </ListTag>
-          </BodyLong>
-        </ListContext.Provider>
-      );
-    }
-
     return (
       <ListContext.Provider
         value={{
@@ -111,14 +60,8 @@ export const List = forwardRef<HTMLDivElement, ListProps>(
           {...rest}
           size={listSize}
           ref={ref}
-          className={cn("navds-list", `navds-list--${listSize}`, className)}
+          className={cl("aksel-list", `aksel-list--${listSize}`, className)}
         >
-          {title && (
-            <Heading size={headingSizeMap[listSize]} as={headingTag ?? "h3"}>
-              {title}
-            </Heading>
-          )}
-          {description && <BodyShort size={listSize}>{description}</BodyShort>}
           <ListTag
             role="list"
             aria-label={_ariaLabel}

package/src/list/List.types.ts

@@ -6,21 +6,9 @@ export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
    */
   as?: "ul" | "ol";
   /**
-   * List heading title.
-   * @deprecated Use a "plain" <Heading> instead of `title`, Composition of smaller components preferred over smarter components.
+   * @deprecated Use <Heading> instead of `title`.
    */
-  title?: string;
-  /**
-   * List heading description.
-   * @deprecated Use a "plain" <BodyShort> instead of `description`, Composition of smaller components preferred over smarter components.
-   */
-  description?: string;
-  /**
-   * Allows setting a different HTML h-tag.
-   * @default "h3"
-   * @deprecated The `title` prop gets deprecated, so this one follows suit, as it was a supplementary prop to the title.
-   */
-  headingTag?: React.ElementType<any>;
+  title?: never;
   /**
    * Changes margin-block on list and font size on items.
    * @default "medium"

package/src/loader/Loader.tsx

@@ -1,7 +1,7 @@
 import React, { SVGProps, forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
 import { AkselColor } from "../types";
 import { omit } from "../util";
+import { cl } from "../util/className";
 import { useId } from "../util/hooks";
 import { useI18n } from "../util/i18n/i18n.hooks";
 
@@ -35,7 +35,10 @@ export interface LoaderProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
    */
   variant?: "neutral" | "interaction" | "inverted";
   /**
-   * Overrides loader-color
+   * Overrides color.
+   *
+   * @see 🏷️ {@link AkselColor}
+   * @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
    */
   "data-color"?: AkselColor;
 }
@@ -70,7 +73,6 @@ export const Loader: LoaderType = forwardRef<SVGSVGElement, LoaderProps>(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     const internalId = useId();
     const translate = useI18n("Loader");
 
@@ -78,13 +80,13 @@ export const Loader: LoaderType = forwardRef<SVGSVGElement, LoaderProps>(
       <svg
         aria-labelledby={id ?? `loader-${internalId}`}
         ref={ref}
-        className={cn(
-          "navds-loader",
+        className={cl(
+          "aksel-loader",
           className,
-          `navds-loader--${size}`,
-          `navds-loader--${variant}`,
+          `aksel-loader--${size}`,
+          `aksel-loader--${variant}`,
           {
-            "navds-loader--transparent": transparent,
+            "aksel-loader--transparent": transparent,
           },
         )}
         focusable="false"
@@ -98,7 +100,7 @@ export const Loader: LoaderType = forwardRef<SVGSVGElement, LoaderProps>(
           {title || translate("title")}
         </title>
         <circle
-          className={cn("navds-loader__background")}
+          className="aksel-loader__background"
           xmlns="http://www.w3.org/2000/svg"
           cx="25"
           cy="25"
@@ -106,7 +108,7 @@ export const Loader: LoaderType = forwardRef<SVGSVGElement, LoaderProps>(
           fill="none"
         />
         <circle
-          className={cn("navds-loader__foreground")}
+          className="aksel-loader__foreground"
           cx="25"
           cy="25"
           r="20"

package/src/modal/Modal.context.ts

@@ -3,7 +3,7 @@ import { createStrictContext } from "../util/create-strict-context";
 
 interface ModalContextProps {
   closeHandler?: React.MouseEventHandler<HTMLButtonElement>;
-  modalRef: React.RefObject<HTMLDialogElement>;
+  modalRef: React.RefObject<HTMLDialogElement | null>;
 }
 
 export const { Provider: ModalContextProvider, useContext: useModalContext } =

package/src/modal/Modal.tsx

@@ -3,8 +3,8 @@ import React, { forwardRef, useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
 import { useDateInputContext } from "../date/Date.Input";
 import { useProvider } from "../provider/Provider";
-import { useRenameCSS } from "../theme/Theme";
 import { Detail, Heading } from "../typography";
+import { cl } from "../util/className";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { useId } from "../util/hooks";
 import { useMergeRefs } from "../util/hooks/useMergeRefs";
@@ -17,12 +17,13 @@ import {
   MouseCoordinates,
   coordsAreInside,
   getCloseHandler,
-  useBodyScrollLock,
   useIsModalOpen,
 } from "./ModalUtils";
 import dialogPolyfill, { needPolyfill } from "./dialog-polyfill";
 import { ModalProps } from "./types";
 
+const polyfillClassName = "aksel-modal--polyfilled";
+
 interface ModalComponent
   extends React.ForwardRefExoticComponent<
     ModalProps & React.RefAttributes<HTMLDialogElement>
@@ -99,10 +100,6 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
     }: ModalProps,
     ref,
   ) => {
-    const { cn } = useRenameCSS();
-
-    const polyfillClassName = useRef(cn("navds-modal--polyfilled"));
-
     const modalRef = useRef<HTMLDialogElement>(null);
     const mergedRef = useMergeRefs(modalRef, ref);
 
@@ -127,7 +124,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
         dialogPolyfill.registerDialog(modalRef.current);
 
         // Force-add the "polyfilled" class in case of SSR (needPolyfill will always be false on the server)
-        modalRef.current.classList.add(polyfillClassName.current);
+        modalRef.current.classList.add(polyfillClassName);
       }
       // We set autofocus on the dialog element to prevent the default behavior where first focusable element gets focus when modal is opened.
       // This is mainly to fix an edge case where having a Tooltip as the first focusable element would make it activate when you open the modal.
@@ -156,20 +153,14 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
       referenceElement: modalRef.current,
     });
 
-    /**
-     * TODO: Kept for legacy support.
-     * - Remove utility in v8 and deprecate body-classes in ModalUtils.ts
-     */
-    useBodyScrollLock(modalRef, portalNode, isNested);
-
     const isWidthPreset =
       typeof width === "string" && ["small", "medium"].includes(width);
 
-    const mergedClassName = cn("navds-modal", className, {
-      [polyfillClassName.current]: needPolyfill,
-      "navds-modal--autowidth": !width,
-      [`navds-modal--${width}`]: isWidthPreset,
-      "navds-modal--top": placement === "top" && !needPolyfill,
+    const mergedClassName = cl("aksel-modal", className, {
+      [polyfillClassName]: needPolyfill,
+      "aksel-modal--autowidth": !width,
+      [`aksel-modal--${width}`]: isWidthPreset,
+      "aksel-modal--top": placement === "top" && !needPolyfill,
     });
 
     const mergedStyle = {
@@ -264,9 +255,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
           {header && (
             <ModalHeader>
               {header.label && (
-                <Detail className={cn("navds-modal__label")}>
-                  {header.label}
-                </Detail>
+                <Detail className="aksel-modal__label">{header.label}</Detail>
               )}
               <Heading
                 size={header.size ?? "medium"}
@@ -274,7 +263,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
                 id={ariaLabelId}
               >
                 {header.icon && (
-                  <span className={cn("navds-modal__header-icon")}>
+                  <span className="aksel-modal__header-icon">
                     {header.icon}
                   </span>
                 )}

package/src/modal/ModalBody.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import { cl } from "../util/className";
 
 export interface ModalBodyProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
@@ -7,9 +7,8 @@ export interface ModalBodyProps extends React.HTMLAttributes<HTMLDivElement> {
 
 const ModalBody = forwardRef<HTMLDivElement, ModalBodyProps>(
   ({ className, ...rest }, ref) => {
-    const { cn } = useRenameCSS();
     return (
-      <div {...rest} ref={ref} className={cn("navds-modal__body", className)} />
+      <div {...rest} ref={ref} className={cl("aksel-modal__body", className)} />
     );
   },
 );