@navikt/ds-react 7.40.0 → 8.0.1

package/src/dialog/footer/DialogFooter.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../theme/Theme";
+import { cl } from "../../util/className";
 
 type DialogFooterProps = React.HTMLAttributes<HTMLDivElement>;
 
@@ -20,13 +20,11 @@ type DialogFooterProps = React.HTMLAttributes<HTMLDivElement>;
  */
 const DialogFooter = forwardRef<HTMLDivElement, DialogFooterProps>(
   ({ className, children, ...restProps }, forwardedRef) => {
-    const { cn } = useRenameCSS();
-
     return (
       <div
         {...restProps}
         ref={forwardedRef}
-        className={cn("navds-dialog__footer", className)}
+        className={cl("aksel-dialog__footer", className)}
       >
         {children}
       </div>

package/src/dialog/header/DialogHeader.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
 import { XMarkIcon } from "@navikt/aksel-icons";
 import { Button } from "../../button";
-import { useRenameCSS } from "../../theme/Theme";
+import { cl } from "../../util/className";
 import { useI18n } from "../../util/i18n/i18n.hooks";
 import { DialogCloseTrigger } from "../close-trigger/DialogCloseTrigger";
 
@@ -32,20 +32,19 @@ const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(
     { className, children, withClosebutton = true, ...restProps },
     forwardedRef,
   ) => {
-    const { cn } = useRenameCSS();
     const translate = useI18n("global");
 
     return (
       <div
         {...restProps}
         ref={forwardedRef}
-        className={cn("navds-dialog__header", className)}
+        className={cl("aksel-dialog__header", className)}
       >
         {withClosebutton && (
           <DialogCloseTrigger>
             <Button
               type="button"
-              className={cn("navds-dialog__close-button")}
+              className="aksel-dialog__close-button"
               size="small"
               variant="tertiary-neutral"
               icon={<XMarkIcon title={translate("close")} />}

package/src/dialog/popup/DialogPopupInternal.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
 import { BoxNew, type BoxNewProps } from "../../layout/box";
 import { DismissableLayer } from "../../overlays/dismissablelayer/DismissableLayer";
-import { useRenameCSS } from "../../theme/Theme";
+import { cl } from "../../util/className";
 import { FocusBoundary } from "../../util/focus-boundary/FocusBoundary";
 import { FocusGuards } from "../../util/focus-guards/FocusGuards";
 import { useMergeRefs } from "../../util/hooks";
@@ -98,7 +98,6 @@ const DialogPopupInternal = forwardRef<
     },
     forwardedRef,
   ) => {
-    const { cn } = useRenameCSS();
     const {
       mounted,
       popupRef,
@@ -208,7 +207,7 @@ const DialogPopupInternal = forwardRef<
               id={id ?? popupId}
               {...restProps}
               ref={mergedRefs}
-              className={cn("navds-dialog__popup", className)}
+              className={cl("aksel-dialog__popup", className)}
               role={role}
               aria-modal="true"
               {...createTransitionStatusAttribute(transitionStatus)}

package/src/dialog/title/DialogTitle.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../theme/Theme";
 import { Heading } from "../../typography";
 import { useClientLayoutEffect, useId } from "../../util";
+import { cl } from "../../util/className";
 import { useDialogContext } from "../root/DialogRoot.context";
 
 type DialogTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
@@ -21,7 +21,6 @@ type DialogTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
  */
 const DialogTitle = forwardRef<HTMLHeadingElement, DialogTitleProps>(
   ({ className, children, id, ...restProps }, forwardedRef) => {
-    const { cn } = useRenameCSS();
     const { size, setTitleId } = useDialogContext();
 
     const titleId = useId(id);
@@ -38,7 +37,7 @@ const DialogTitle = forwardRef<HTMLHeadingElement, DialogTitleProps>(
         {...restProps}
         id={titleId}
         ref={forwardedRef}
-        className={cn("navds-dialog__title", className)}
+        className={cl("aksel-dialog__title", className)}
         size={size}
         level="1"
       >

package/src/dropdown/Menu/Divider.tsx

@@ -1,17 +1,15 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../theme/Theme";
+import { cl } from "../../util/className";
 
 export const Divider = forwardRef<
   HTMLHRElement,
   React.HTMLAttributes<HTMLHRElement>
 >(({ className, ...rest }, ref) => {
-  const { cn } = useRenameCSS();
-
   return (
     <hr
       {...rest}
       ref={ref}
-      className={cn("navds-dropdown__divider", className)}
+      className={cl("aksel-dropdown__divider", className)}
     />
   );
 });

package/src/dropdown/Menu/GroupedList/GroupedHeading.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../../theme/Theme";
+import { cl } from "../../../util/className";
 
 export interface GroupedHeadingProps
   extends React.HTMLAttributes<HTMLDetailsElement> {
@@ -13,15 +13,14 @@ export const GroupedHeading = forwardRef<
   HTMLDetailsElement,
   GroupedHeadingProps
 >(({ className, ...rest }, ref) => {
-  const { cn } = useRenameCSS();
   return (
     <dt
       {...rest}
       ref={ref}
-      className={cn(
-        "navds-dropdown__list-heading",
-        "navds-heading",
-        "navds-heading--xsmall",
+      className={cl(
+        "aksel-dropdown__list-heading",
+        "aksel-heading",
+        "aksel-heading--xsmall",
         className,
       )}
     />

package/src/dropdown/Menu/GroupedList/GroupedItem.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, useContext } from "react";
-import { useRenameCSS } from "../../../theme/Theme";
+import { cl } from "../../../util/className";
 import { composeEventHandlers } from "../../../util/composeEventHandlers";
 import { OverridableComponent } from "../../../util/types";
 import { DropdownContext } from "../../context";
@@ -17,20 +17,19 @@ export const GroupedItem: OverridableComponent<
   HTMLButtonElement
 > = forwardRef(
   ({ as: Component = "button", className, onClick, ...rest }, ref) => {
-    const { cn } = useRenameCSS();
     const context = useContext(DropdownContext);
 
     return (
-      <dd className={cn("navds-dropdown__list-item")}>
+      <dd className="aksel-dropdown__list-item">
         <Component
           {...rest}
           value={rest.children}
           onClick={composeEventHandlers(onClick, context?.onSelect)}
           ref={ref}
-          className={cn(
-            "navds-dropdown__item",
-            "navds-body-short",
-            "navds-body-short--small",
+          className={cl(
+            "aksel-dropdown__item",
+            "aksel-body-short",
+            "aksel-body-short--small",
             className,
           )}
         />

package/src/dropdown/Menu/GroupedList/index.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";
 import GroupedHeading, { GroupedHeadingProps } from "./GroupedHeading";
 import GroupedItem, { GroupedItemProps } from "./GroupedItem";
@@ -31,9 +31,8 @@ export interface GroupedListType
 
 export const DescriptionList = forwardRef(
   ({ className, children, ...rest }, ref) => {
-    const { cn } = useRenameCSS();
     return (
-      <dl {...rest} ref={ref} className={cn("navds-dropdown__list", className)}>
+      <dl {...rest} ref={ref} className={cl("aksel-dropdown__list", className)}>
         {children}
       </dl>
     );

package/src/dropdown/Menu/List/Item.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, useContext } from "react";
-import { useRenameCSS } from "../../../theme/Theme";
+import { cl } from "../../../util/className";
 import { composeEventHandlers } from "../../../util/composeEventHandlers";
 import { OverridableComponent } from "../../../util/types";
 import { DropdownContext } from "../../context";
@@ -14,20 +14,19 @@ export interface ListItemProps extends React.ButtonHTMLAttributes<HTMLElement> {
 export const ListItem: OverridableComponent<ListItemProps, HTMLButtonElement> =
   forwardRef(
     ({ as: Component = "button", className, onClick, ...rest }, ref) => {
-      const { cn } = useRenameCSS();
       const context = useContext(DropdownContext);
 
       return (
-        <li className={cn("navds-dropdown__list-item")}>
+        <li className="aksel-dropdown__list-item">
           <Component
             {...rest}
             value={rest.children}
             onClick={composeEventHandlers(onClick, context?.onSelect)}
             ref={ref}
-            className={cn(
-              "navds-dropdown__item",
-              "navds-body-short",
-              "navds-body-short--small",
+            className={cl(
+              "aksel-dropdown__item",
+              "aksel-body-short",
+              "aksel-body-short--small",
               className,
             )}
           />

package/src/dropdown/Menu/List/index.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";
 import ListItem, { ListItemProps } from "./Item";
 
@@ -22,10 +22,8 @@ export interface ListType
 }
 
 export const List = forwardRef(({ className, children, ...rest }, ref) => {
-  const { cn } = useRenameCSS();
-
   return (
-    <ul {...rest} ref={ref} className={cn("navds-dropdown__list", className)}>
+    <ul {...rest} ref={ref} className={cl("aksel-dropdown__list", className)}>
       {children}
     </ul>
   );

package/src/dropdown/Menu/index.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, useContext } from "react";
 import { Popover } from "../../popover";
-import { useRenameCSS } from "../../theme/Theme";
+import { cl } from "../../util/className";
 import { DropdownContext } from "../context";
 import Divider from "./Divider";
 import GroupedList, { GroupedListType } from "./GroupedList";
@@ -61,7 +61,6 @@ export interface MenuType<Props = DropdownMenuProps>
 
 export const Menu = forwardRef<HTMLDivElement, DropdownMenuProps>(
   ({ className, onClose, placement = "bottom-end", ...rest }, ref) => {
-    const { cn } = useRenameCSS();
     const context = useContext(DropdownContext);
 
     if (!context) {
@@ -76,8 +75,7 @@ export const Menu = forwardRef<HTMLDivElement, DropdownMenuProps>(
         {...rest}
         placement={placement}
         ref={ref}
-        arrow={false}
-        className={cn("navds-dropdown__menu", className)}
+        className={cl("aksel-dropdown__menu", className)}
         offset={-4}
         anchorEl={anchorEl}
         open={isOpen}

package/src/dropdown/Toggle.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, useContext } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import { cl } from "../util/className";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { DropdownContext } from "./context";
 
@@ -16,7 +16,6 @@ export const DropdownToggle = forwardRef<
   DropdownToggleProps
 >(({ className, onClick, ...rest }, ref) => {
   const context = useContext(DropdownContext);
-  const { cn } = useRenameCSS();
 
   if (!context) {
     console.warn("Dropdown.Toggle has to be wrapped in <Dropdown />");
@@ -44,7 +43,7 @@ export const DropdownToggle = forwardRef<
       }}
       onClick={composeEventHandlers(onClick, handleClick)}
       aria-expanded={isOpen}
-      className={cn("navds-dropdown__toggle", className)}
+      className={cl("aksel-dropdown__toggle", className)}
     />
   );
 });

package/src/expansion-card/ExpansionCard.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef, useRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import type { AkselColor } from "../types";
+import { cl } from "../util/className";
 import { useControllableState } from "../util/hooks";
 import { OverridableComponent } from "../util/types";
 import ExpansionCardContent, {
@@ -68,6 +69,12 @@ interface ExpansionCardCommonProps
    * @default "medium"
    */
   size?: "medium" | "small";
+  /**
+   * Overrides inherited color.
+   * @see 🏷️ {@link AkselColor}
+   * @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
+   */
+  "data-color"?: AkselColor;
 }
 
 type ExpansionCardConditionalProps =
@@ -118,7 +125,6 @@ export const ExpansionCard = forwardRef<HTMLDivElement, ExpansionCardProps>(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     const shouldFade = useRef<boolean>(!(Boolean(open) || defaultOpen));
 
     const [_open, _setOpen] = useControllableState({
@@ -141,13 +147,12 @@ export const ExpansionCard = forwardRef<HTMLDivElement, ExpansionCardProps>(
         <section
           data-color={color}
           {...rest}
-          className={cn(
-            "navds-expansioncard",
+          className={cl(
+            "aksel-expansioncard",
             className,
-            `navds-expansioncard--${size}`,
+            `aksel-expansioncard--${size}`,
             {
-              "navds-expansioncard--open": open ?? _open,
-              "navds-expansioncard--no-animation": !shouldFade.current,
+              "aksel-expansioncard--no-animation": !shouldFade.current,
             },
           )}
           ref={ref}

package/src/expansion-card/ExpansionCardContent.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef, useContext } from "react";
-import { useRenameCSS, useThemeInternal } from "../theme/Theme";
+import { useThemeInternal } from "../theme/Theme";
 import { BodyLong } from "../typography";
+import { cl } from "../util/className";
 import { ExpansionCardContext } from "./context";
 
 export interface ExpansionCardContentProps
@@ -12,7 +13,6 @@ const ExpansionCardContent = forwardRef<
   HTMLDivElement,
   ExpansionCardContentProps
 >(({ children, className, "data-color": dataColor, ...rest }, ref) => {
-  const { cn } = useRenameCSS();
   const panelContext = useContext(ExpansionCardContext);
   const themeContext = useThemeInternal();
 
@@ -28,15 +28,15 @@ const ExpansionCardContent = forwardRef<
       {...rest}
       ref={ref}
       as="div"
-      className={cn("navds-expansioncard__content", className, {
-        "navds-expansioncard__content--closed": !panelContext.open,
+      className={cl("aksel-expansioncard__content", className, {
+        "aksel-expansioncard__content--closed": !panelContext.open,
       })}
       aria-hidden={!panelContext.open}
       size={panelContext.size}
       data-open={panelContext.open}
     >
       <div
-        className={cn("navds-expansioncard__content-inner")}
+        className="aksel-expansioncard__content-inner"
         data-color={dataColor ?? themeContext?.color}
       >
         {children}

package/src/expansion-card/ExpansionCardDescription.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 { ExpansionCardContext } from "./context";
 
 export interface ExpansionCardDescriptionProps
@@ -12,7 +12,6 @@ export const ExpansionCardDescription = forwardRef<
   HTMLParagraphElement,
   ExpansionCardDescriptionProps
 >(({ className, ...rest }, ref) => {
-  const { cn } = useRenameCSS();
   const panelContext = useContext(ExpansionCardContext);
 
   if (panelContext === null) {
@@ -27,7 +26,7 @@ export const ExpansionCardDescription = forwardRef<
       {...rest}
       as="p"
       ref={ref}
-      className={cn("navds-link-panel__description", className)}
+      className={cl("aksel-link-panel__description", className)}
       size={panelContext.size}
     />
   );

package/src/expansion-card/ExpansionCardHeader.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, useContext } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
-import { useRenameCSS } from "../theme/Theme";
+import { cl } from "../util/className";
 import { useI18n } from "../util/i18n/i18n.hooks";
 import { ExpansionCardContext } from "./context";
 
@@ -13,7 +13,6 @@ const ExpansionCardHeader = forwardRef<
   HTMLDivElement,
   ExpansionCardHeaderProps
 >(({ children, className, ...rest }, ref) => {
-  const { cn } = useRenameCSS();
   const panelContext = useContext(ExpansionCardContext);
   const translate = useI18n("global");
 
@@ -28,21 +27,19 @@ const ExpansionCardHeader = forwardRef<
     <div
       ref={ref}
       {...rest}
-      className={cn("navds-expansioncard__header", className)}
+      className={cl("aksel-expansioncard__header", className)}
       data-open={panelContext.open}
     >
-      <div className={cn("navds-expansioncard__header-content")}>
-        {children}
-      </div>
+      <div>{children}</div>
 
       <button
-        className={cn("navds-expansioncard__header-button")}
+        className="aksel-expansioncard__header-button"
         onClick={panelContext.toggleOpen}
         type="button"
         aria-expanded={panelContext.open}
       >
         <ChevronDownIcon
-          className={cn("navds-expansioncard__header-chevron")}
+          className="aksel-expansioncard__header-chevron"
           title={translate("showMore")}
         />
       </button>

package/src/expansion-card/ExpansionCardTitle.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 ExpansionCardTitleProps
@@ -17,17 +17,15 @@ export const ExpansionCardTitle: OverridableComponent<
   HTMLHeadingElement
 > = forwardRef(
   ({ className, as: Component = "h3", size = "medium", ...rest }, ref) => {
-    const { cn } = useRenameCSS();
-
     return (
       <Component
         {...rest}
         ref={ref}
-        className={cn(
-          "navds-expansioncard__title",
-          `navds-expansioncard__title--${size}`,
-          "navds-heading",
-          `navds-heading--${size}`,
+        className={cl(
+          "aksel-expansioncard__title",
+          `aksel-expansioncard__title--${size}`,
+          "aksel-heading",
+          `aksel-heading--${size}`,
           className,
         )}
       />

package/src/form/ReadOnlyIcon.tsx

@@ -1,24 +1,21 @@
 import React from "react";
 import { PadlockLockedFillIcon } from "@navikt/aksel-icons";
-import { useRenameCSS } from "../theme/Theme";
 import { useI18n } from "../util/i18n/i18n.hooks";
 
 export const ReadOnlyIcon = () => {
-  const { cn } = useRenameCSS();
   return (
     <PadlockLockedFillIcon
       aria-hidden
-      className={cn("navds-form-field__readonly-icon")}
+      className="aksel-form-field__readonly-icon"
     />
   );
 };
 
 export const ReadOnlyIconWithTitle = () => {
-  const { cn } = useRenameCSS();
   return (
     <PadlockLockedFillIcon
       title={useI18n("global")("readOnly")}
-      className={cn("navds-form-field__readonly-icon")}
+      className="aksel-form-field__readonly-icon"
     />
   );
 };