@navikt/ds-react 7.40.0 → 8.0.1

package/src/tag/Tag.tsx

@@ -1,46 +1,43 @@
 import React, { HTMLAttributes, forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
 import { AkselColor } from "../types";
 import { BodyShort } from "../typography";
+import { cl } from "../util/className";
+
+type legacyVariants =
+  | "warning"
+  | "warning-filled"
+  | "warning-moderate"
+  | "error"
+  | "error-filled"
+  | "error-moderate"
+  | "info"
+  | "info-filled"
+  | "info-moderate"
+  | "success"
+  | "success-filled"
+  | "success-moderate"
+  | "neutral"
+  | "neutral-filled"
+  | "neutral-moderate"
+  | "alt1"
+  | "alt1-filled"
+  | "alt1-moderate"
+  | "alt2"
+  | "alt2-filled"
+  | "alt2-moderate"
+  | "alt3"
+  | "alt3-filled"
+  | "alt3-moderate";
+
+type HiddenVariant = legacyVariants & { __brand?: never };
 
 export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
   children: React.ReactNode;
   /**
    * Changes visual profile of tag
+   * @default "outline"
    */
-  variant:
-    | "warning"
-    | "warning-filled"
-    | "warning-moderate"
-    | "error"
-    | "error-filled"
-    | "error-moderate"
-    | "info"
-    | "info-filled"
-    | "info-moderate"
-    | "success"
-    | "success-filled"
-    | "success-moderate"
-    | "neutral"
-    | "neutral-filled"
-    | "neutral-moderate"
-    | "alt1"
-    | "alt1-filled"
-    | "alt1-moderate"
-    | "alt2"
-    | "alt2-filled"
-    | "alt2-moderate"
-    | "alt3"
-    | "alt3-filled"
-    | "alt3-moderate";
-
-  /* Temp hide these until naming is resolved */
-  // | "meta-purple"
-  // | "meta-purple-filled"
-  // | "meta-purple-moderate"
-  // | "meta-lime"
-  // | "meta-lime-filled"
-  // | "meta-lime-moderate";
+  variant?: "outline" | "moderate" | "strong" | HiddenVariant;
   /**
    * @default "medium"
    */
@@ -49,6 +46,11 @@ export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
    * Tag Icon
    */
   icon?: React.ReactNode;
+  /**
+   * Tag color
+   * @default "neutral"
+   */
+  "data-color"?: AkselColor;
 }
 
 /**
@@ -67,7 +69,7 @@ export const Tag = forwardRef<HTMLSpanElement, TagProps>(
     {
       children,
       className,
-      variant,
+      variant = "outline",
       size = "medium",
       icon,
       "data-color": color,
@@ -75,26 +77,27 @@ export const Tag = forwardRef<HTMLSpanElement, TagProps>(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     const filledVariant = variant?.endsWith("-filled") && "strong";
     const moderateVariant = variant?.endsWith("-moderate") && "moderate";
 
+    const updatedVariant =
+      variant === "moderate" || variant === "strong" || variant === "outline";
+
     return (
       <BodyShort
         data-color={color ?? variantToColor(variant)}
-        data-variant={filledVariant || moderateVariant || "outline"}
+        data-variant={
+          updatedVariant
+            ? variant
+            : filledVariant || moderateVariant || "outline"
+        }
         {...rest}
         ref={ref}
         as="span"
         size={size === "medium" ? "medium" : "small"}
-        className={cn(
-          "navds-tag",
-          className,
-          `navds-tag--${variant}`,
-          `navds-tag--${size}`,
-        )}
+        className={cl("aksel-tag", className, `aksel-tag--${size}`)}
       >
-        {icon && <span className={cn("navds-tag__icon--left")}>{icon}</span>}
+        {icon && <span className="aksel-tag__icon--left">{icon}</span>}
         {children}
       </BodyShort>
     );

package/src/theme/Theme.tsx

@@ -1,63 +1,23 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
 import { Slot } from "../slot/Slot";
 import { AkselColor } from "../types";
+import { cl } from "../util/className";
 import { createStrictContext } from "../util/create-strict-context";
 import { AsChildProps } from "../util/types";
 
-/* -------------------------------------------------------------------------- */
-/*                               CSS Translation                              */
-/* -------------------------------------------------------------------------- */
-type RenameCSSContext = {
-  /**
-   * Extends `clsx` with custom className handler
-   */
-  cn: (...inputs: Parameters<typeof cl>) => ReturnType<typeof cl>;
-};
-
-const { Provider: RenameCSSProvider, useContext: useRenameCSS } =
-  createStrictContext<RenameCSSContext>({
-    name: "RenameCSS",
-    defaultValue: { cn: cl },
-  });
-
-export const compositeClassFunction = (
-  ...inputs: Parameters<typeof cl>
-): string => {
-  const classes = cl(inputs)
-    /* Replaces only if start of string  "navds- navds-"*/
-    .replace(/^navds-/g, "aksel-")
-    /* Replaces all " navds-" hits */
-    .replace(/\snavds-/g, " aksel-");
-
-  return classes.trim();
-};
-
-const RenameCSS = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <RenameCSSProvider cn={compositeClassFunction}>
-      {children}
-    </RenameCSSProvider>
-  );
-};
-
-/* -------------------------------------------------------------------------- */
-/*                               Theme provider                               */
-/* -------------------------------------------------------------------------- */
 const DEFAULT_COLOR: AkselColor = "accent";
 
 type ThemeContext = {
   /**
-   * Color theme
-   * @default Inherits parent theme, or "light" if root
+   * Color theme.
+   * @default Inherits parent theme, or "light" if root.
    */
   theme?: "light" | "dark";
   color?: AkselColor;
   /**
-   * Indicates if Theme-component is used or not.
-   * @default false
+   * Indicates if Theme-component is on root-level or not.
    */
-  isDarkside: boolean;
+  isRoot: boolean;
 };
 
 const { Provider: ThemeProvider, useContext: useThemeInternal } =
@@ -65,21 +25,22 @@ const { Provider: ThemeProvider, useContext: useThemeInternal } =
     name: "ThemeProvider",
     defaultValue: {
       color: DEFAULT_COLOR,
-      isDarkside: false,
+      isRoot: true,
     },
   });
 
 export type ThemeProps = {
   className?: string;
   /**
-   * Sets default background when enabled
+   * Whether to apply the default background.
+   * @default `true` if this is the root instance and `theme` is defined, otherwise `false`.
    */
   hasBackground?: boolean;
   /**
-   * Sets default 'base'-color for application
+   * Changes default 'base'-color for application.
    */
   "data-color"?: AkselColor;
-} & Omit<ThemeContext, "color" | "isDarkside"> &
+} & Omit<ThemeContext, "color" | "isRoot"> &
   AsChildProps;
 
 const Theme = forwardRef<HTMLDivElement, ThemeProps>(
@@ -91,11 +52,11 @@ const Theme = forwardRef<HTMLDivElement, ThemeProps>(
       className,
       asChild = false,
       theme = context?.theme,
-      hasBackground: hasBackgroundProp = true,
+      hasBackground: hasBackgroundProp,
       "data-color": color = context?.color,
     } = props;
 
-    const isRoot = !context?.isDarkside;
+    const isRoot = context?.isRoot;
 
     const hasBackground =
       hasBackgroundProp ?? (isRoot && props.theme !== undefined);
@@ -103,20 +64,18 @@ const Theme = forwardRef<HTMLDivElement, ThemeProps>(
     const SlotElement = asChild ? Slot : "div";
 
     return (
-      <ThemeProvider theme={theme} color={color} isDarkside={true}>
-        <RenameCSS>
-          <SlotElement
-            ref={ref}
-            className={cl("aksel-theme", className, theme)}
-            data-background={hasBackground}
-            data-color={color ?? ""}
-          >
-            {children}
-          </SlotElement>
-        </RenameCSS>
+      <ThemeProvider theme={theme} color={color} isRoot={false}>
+        <SlotElement
+          ref={ref}
+          className={cl("aksel-theme", className, theme)}
+          data-background={hasBackground}
+          data-color={color ?? DEFAULT_COLOR}
+        >
+          {children}
+        </SlotElement>
       </ThemeProvider>
     );
   },
 );
 
-export { Theme, useRenameCSS, useThemeInternal };
+export { Theme, useThemeInternal };

package/src/timeline/AxisLabels.tsx

@@ -15,7 +15,6 @@ import {
   subDays,
 } from "date-fns";
 import React from "react";
-import { useRenameCSS } from "../theme/Theme";
 import { Detail } from "../typography/Detail";
 import { useDateLocale, useI18n } from "../util/i18n/i18n.hooks";
 import { TFunction } from "../util/i18n/i18n.types";
@@ -150,13 +149,11 @@ export const AxisLabels = ({
 
   const labels = getLabels(startDate, endDate, direction, locale, translate);
 
-  const { cn } = useRenameCSS();
-
   return (
-    <div className={cn("navds-timeline__axislabels")} aria-hidden="true">
+    <div className="aksel-timeline__axislabels" aria-hidden="true">
       {labels.filter(isVisible).map((etikett) => (
         <Detail
-          className={cn("navds-timeline__axislabels-label")}
+          className="aksel-timeline__axislabels-label"
           as="div"
           key={etikett.label}
           style={{

package/src/timeline/Timeline.tsx

@@ -1,6 +1,5 @@
 import { endOfDay, isSameDay, startOfDay } from "date-fns";
 import React, { forwardRef, useMemo, useRef, useState } from "react";
-import { useRenameCSS } from "../theme/Theme";
 import { AxisLabels } from "./AxisLabels";
 import TimelineRow, { TimelineRowType } from "./TimelineRow";
 import { RowContext } from "./hooks/useRowContext";
@@ -96,7 +95,6 @@ export const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     const isMultipleRows = Array.isArray(children);
 
     const firstFocusabled = useRef<
@@ -215,7 +213,7 @@ export const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
         }}
       >
         <div {...rest} ref={ref}>
-          <div className={cn("navds-timeline")}>
+          <div className="aksel-timeline">
             <AxisLabels templates={axisLabelTemplates} />
 
             {pins.map((PinChild, i) => (

package/src/timeline/TimelineRow.tsx

@@ -1,7 +1,7 @@
 import { format } from "date-fns";
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
 import { BodyShort } from "../typography/BodyShort";
+import { cl } from "../util/className";
 import { useI18n } from "../util/i18n/i18n.hooks";
 import { PeriodContext } from "./hooks/usePeriodContext";
 import { useRowContext } from "./hooks/useRowContext";
@@ -38,7 +38,6 @@ export interface TimelineRowType
 
 export const TimelineRow = forwardRef<HTMLOListElement, TimelineRowProps>(
   ({ label, className, headingTag = "h3", icon, ...rest }, ref) => {
-    const { cn } = useRenameCSS();
     const { periods, id, active } = useRowContext();
     const { setActiveRow } = useTimelineContext();
     const translate = useI18n("Timeline");
@@ -61,7 +60,7 @@ export const TimelineRow = forwardRef<HTMLOListElement, TimelineRowProps>(
           <BodyShort
             as={headingTag}
             id={`timeline-row-${id}`}
-            className={cn("navds-timeline__row-label")}
+            className="aksel-timeline__row-label"
             size="small"
           >
             {icon}
@@ -69,8 +68,8 @@ export const TimelineRow = forwardRef<HTMLOListElement, TimelineRowProps>(
           </BodyShort>
         )}
         <div
-          className={cn("navds-timeline__row", {
-            "navds-timeline__row--active": active,
+          className={cl("aksel-timeline__row", {
+            "aksel-timeline__row--active": active,
           })}
         >
           {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
@@ -86,7 +85,7 @@ export const TimelineRow = forwardRef<HTMLOListElement, TimelineRowProps>(
                     end: format(latest.end, translate("dateFormat")),
                   })
             }
-            className={cn("navds-timeline__row-periods", className)}
+            className={cl("aksel-timeline__row-periods", className)}
             onKeyDown={(e) => {
               if (e.key === "ArrowDown" || e.key === "ArrowUp") {
                 e.preventDefault();

package/src/timeline/period/ClickablePeriod.tsx

@@ -12,7 +12,7 @@ import {
   useInteractions,
 } from "@floating-ui/react";
 import React, { useState } from "react";
-import { useRenameCSS } from "../../theme/Theme";
+import { cl } from "../../util/className";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
 import { useI18n } from "../../util/i18n/i18n.hooks";
 import { usePeriodContext } from "../hooks/usePeriodContext";
@@ -51,7 +51,6 @@ const ClickablePeriod = React.memo(
     restProps,
     periodRef,
   }: TimelineClickablePeriodProps) => {
-    const { cn } = useRenameCSS();
     const [open, setOpen] = useState(false);
     const { index } = useRowContext();
     const { firstFocus } = usePeriodContext();
@@ -101,12 +100,12 @@ const ClickablePeriod = React.memo(
             mergedRef?.(r);
           }}
           aria-label={label}
-          className={cn(
-            "navds-timeline__period--clickable",
+          className={cl(
+            "aksel-timeline__period--clickable",
             getConditionalClasses(cropped, direction, status),
             restProps?.className,
             {
-              "navds-timeline__period--selected": isActive,
+              "aksel-timeline__period--selected": isActive,
             },
           )}
           aria-expanded={children ? open : undefined}
@@ -138,7 +137,7 @@ const ClickablePeriod = React.memo(
             },
           })}
         >
-          <span className={cn("navds-timeline__period--inner")}>{icon}</span>
+          <span className="aksel-timeline__period--inner">{icon}</span>
         </button>
         {children && open && (
           <FloatingFocusManager
@@ -148,7 +147,7 @@ const ClickablePeriod = React.memo(
             returnFocus={false}
           >
             <div
-              className={cn("navds-timeline__popover")}
+              className="aksel-timeline__popover"
               data-placement={placement}
               ref={refs.setFloating}
               role="dialog"

package/src/timeline/period/NonClickablePeriod.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useRenameCSS } from "../../theme/Theme";
+import { cl } from "../../util/className";
 import { useI18n } from "../../util/i18n/i18n.hooks";
 import { ariaLabel, getConditionalClasses } from "../utils/period";
 import type { PeriodProps } from "./types";
@@ -23,13 +23,12 @@ const NonClickablePeriod = ({
 }: TimelineNonClickablePeriodProps) => {
   const translate = useI18n("Timeline");
 
-  const { cn } = useRenameCSS();
   return (
     <div
       ref={periodRef}
       {...restProps}
       data-color={restProps?.["data-color"] ?? status}
-      className={cn(
+      className={cl(
         getConditionalClasses(cropped, direction, status),
         restProps?.className,
       )}
@@ -38,9 +37,9 @@ const NonClickablePeriod = ({
         [direction]: `${left}%`,
       }}
     >
-      <span className={cn("navds-timeline__period--inner")}>
+      <span className="aksel-timeline__period--inner">
         {icon}
-        <span className={cn("navds-sr-only")}>
+        <span className="aksel-sr-only">
           {ariaLabel(start, end, status, statusLabel, translate)}
         </span>
       </span>

package/src/timeline/period/index.tsx

@@ -1,4 +1,5 @@
 import React, { forwardRef } from "react";
+import type { AkselColor } from "../../types";
 import { usePeriodContext } from "../hooks/usePeriodContext";
 import { useRowContext } from "../hooks/useRowContext";
 import type { TimelineComponentTypes } from "../utils/types.internal";
@@ -24,6 +25,13 @@ export interface TimelinePeriodProps
    * @default "neutral"
    */
   status?: "success" | "warning" | "danger" | "info" | "neutral";
+  /**
+   * Overrides color set by status.
+   *
+   * @see 🏷️ {@link AkselColor}
+   * @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
+   */
+  "data-color"?: AkselColor;
   /**
    * Status label for screen-readers
    * e.g "Sykemeldt", "foreldrepermisjon"

package/src/timeline/pin/PinInternal.tsx

@@ -13,7 +13,6 @@ import {
 } from "@floating-ui/react";
 import { format } from "date-fns";
 import React, { forwardRef, useState } from "react";
-import { useRenameCSS } from "../../theme/Theme";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
 import { useI18n } from "../../util/i18n/i18n.hooks";
 import { useTimelineContext } from "../hooks/useTimelineContext";
@@ -33,7 +32,6 @@ export interface TimelinePinProps
 
 export const PinInternal = forwardRef<HTMLButtonElement, TimelinePinProps>(
   ({ date, children, ...rest }, ref) => {
-    const { cn } = useRenameCSS();
     const { startDate, endDate, direction } = useTimelineContext();
     const [open, setOpen] = useState(false);
 
@@ -81,13 +79,13 @@ export const PinInternal = forwardRef<HTMLButtonElement, TimelinePinProps>(
     return (
       <>
         <div
-          className={cn("navds-timeline__pin-wrapper")}
+          className="aksel-timeline__pin-wrapper"
           style={{ [direction]: `${position(date, startDate, endDate)}%` }}
         >
           <button
             {...rest}
             ref={mergedRef}
-            className={cn("navds-timeline__pin-button")}
+            className="aksel-timeline__pin-button"
             aria-label={label}
             type="button"
             aria-expanded={children ? open : undefined}
@@ -111,7 +109,7 @@ export const PinInternal = forwardRef<HTMLButtonElement, TimelinePinProps>(
             returnFocus={false}
           >
             <div
-              className={cn("navds-timeline__popover")}
+              className="aksel-timeline__popover"
               data-placement={placement}
               ref={refs.setFloating}
               role="dialog"

package/src/timeline/utils/period.ts

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import { format } from "date-fns";
+import { cl } from "../../util/className";
 import type { TFunction } from "../../util/i18n/i18n.types";
 import type { PeriodProps } from "../period/types";
 
@@ -8,13 +8,12 @@ export const getConditionalClasses = (
   direction: string,
   status: PeriodProps["status"],
 ) => {
-  /* Renaming to aksel-* happends where these are used, so no need to rename here */
-  return cl(`navds-timeline__period navds-timeline__period--${status}`, {
-    "navds-timeline__period--connected-both": cropped === "both",
-    "navds-timeline__period--connected-right":
+  return cl(`aksel-timeline__period aksel-timeline__period--${status}`, {
+    "aksel-timeline__period--connected-both": cropped === "both",
+    "aksel-timeline__period--connected-right":
       (cropped === "right" && direction === "left") ||
       (cropped === "left" && direction === "right"),
-    "navds-timeline__period--connected-left":
+    "aksel-timeline__period--connected-left":
       (cropped === "left" && direction === "left") ||
       (cropped === "right" && direction === "right"),
   });

package/src/timeline/zoom/ZoomButton.tsx

@@ -7,7 +7,6 @@ import {
   subYears,
 } from "date-fns";
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../theme/Theme";
 import { Detail } from "../../typography/Detail";
 import { useI18n } from "../../util/i18n/i18n.hooks";
 import { useTimelineContext } from "../hooks/useTimelineContext";
@@ -38,8 +37,6 @@ export const ZoomButton: ZoomButtonType = forwardRef(
     const translate = useI18n("Timeline");
     const dateFormat = translate("dateFormat");
 
-    const { cn } = useRenameCSS();
-
     let startOfRange: Date;
 
     if (interval === "month") {
@@ -73,7 +70,7 @@ export const ZoomButton: ZoomButtonType = forwardRef(
           }
           ref={ref}
           {...rest}
-          className={cn("navds-timeline__zoom-button")}
+          className="aksel-timeline__zoom-button"
           onClick={() => {
             setStart(startOfRange);
           }}

package/src/timeline/zoom/index.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../theme/Theme";
+import { cl } from "../../util/className";
 import ZoomButton, { ZoomButtonType } from "./ZoomButton";
 
 interface ZoomProps extends React.HTMLAttributes<HTMLUListElement> {
@@ -16,10 +16,8 @@ export interface ZoomType<Props = ZoomProps>
 
 export const Zoom = forwardRef<HTMLUListElement, ZoomProps>(
   ({ className, children, ...rest }, ref) => {
-    const { cn } = useRenameCSS();
-
     return (
-      <ul ref={ref} className={cn(className, "navds-timeline__zoom")} {...rest}>
+      <ul ref={ref} className={cl(className, "aksel-timeline__zoom")} {...rest}>
         {children}
       </ul>
     );

package/src/toggle-group/ToggleGroup.tsx

@@ -1,8 +1,8 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS, useThemeInternal } from "../theme/Theme";
 import { AkselColor } from "../types";
 import { Label } from "../typography";
 import { useId } from "../util";
+import { cl } from "../util/className";
 import {
   ToggleGroupDescendantsProvider,
   ToggleGroupProvider,
@@ -54,8 +54,6 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
-    const themeContext = useThemeInternal();
     const descendants = useToggleGroupDescendants();
 
     const toggleGroupContext = useToggleGroup({
@@ -82,28 +80,20 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
       console.error("ToggleGroup needs either a value or defaultValue");
     }
 
-    let localVariant: ToggleGroupProps["variant"] | undefined;
-
-    if (themeContext?.isDarkside) {
-      localVariant = variant;
-    } else {
-      localVariant = variant ?? "action";
-    }
-
     return (
       <ToggleGroupDescendantsProvider value={descendants}>
         <ToggleGroupProvider {...context}>
           <div
-            className={cn("navds-toggle-group__wrapper", className, {
-              "navds-toggle-group__wrapper--fill": fill,
+            className={cl("aksel-toggle-group__wrapper", className, {
+              "aksel-toggle-group__wrapper--fill": fill,
             })}
-            data-color={color ?? variantToColor(localVariant)}
+            data-color={color ?? variantToColor(variant)}
           >
             {label && (
               <Label
                 as="div"
                 size={size}
-                className={cn("navds-toggle-group__label")}
+                className="aksel-toggle-group__label"
                 id={labelId}
               >
                 {label}
@@ -113,10 +103,9 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
               aria-labelledby={label ? labelId : undefined}
               {...rest}
               ref={ref}
-              className={cn(
-                "navds-toggle-group",
-                `navds-toggle-group--${size}`,
-                { [`navds-toggle-group--${localVariant}`]: localVariant },
+              className={cl(
+                "aksel-toggle-group",
+                `aksel-toggle-group--${size}`,
               )}
               role="radiogroup"
             >