@navikt/ds-react 8.0.0 → 8.0.1

package/src/guide-panel/GuidePanel.tsx

@@ -1,5 +1,6 @@
 import React, { HTMLAttributes, forwardRef } from "react";
-import { useRenameCSS, useThemeInternal } from "../theme/Theme";
+import { useThemeInternal } from "../theme/Theme";
+import { cl } from "../util/className";
 import { GudiepanelIllustration } from "./Illustration";
 
 export interface GuidePanelProps extends HTMLAttributes<HTMLDivElement> {
@@ -45,7 +46,6 @@ export const GuidePanel = forwardRef<HTMLDivElement, GuidePanelProps>(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     const themeContext = useThemeInternal();
 
     return (
@@ -53,21 +53,21 @@ export const GuidePanel = forwardRef<HTMLDivElement, GuidePanelProps>(
         data-color={color}
         {...rest}
         ref={ref}
-        className={cn("navds-guide-panel", className)}
+        className={cl("aksel-guide-panel", className)}
         data-responsive={poster === undefined}
         data-poster={poster}
       >
-        <div className={cn("navds-guide")}>
+        <div className="aksel-guide">
           {illustration ?? <GudiepanelIllustration />}
         </div>
-        <div className={cn("navds-guide-panel__content")}>
+        <div className="aksel-guide-panel__content">
           <svg
             viewBox="0 0 33 22"
             width="33"
             height="22"
             fill="none"
             xmlns="http://www.w3.org/2000/svg"
-            className={cn("navds-guide-panel__tail")}
+            className="aksel-guide-panel__tail"
           >
             <path
               d="M8.74229e-08 22L0 20L33 20V22L8.74229e-08 22Z"
@@ -85,7 +85,7 @@ export const GuidePanel = forwardRef<HTMLDivElement, GuidePanelProps>(
             />
           </svg>
           <div
-            className={cn("navds-guide-panel__content-inner")}
+            className="aksel-guide-panel__content-inner"
             data-color={themeContext?.color}
           >
             {children}

package/src/help-text/HelpText.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, useRef, useState } from "react";
 import { Popover, PopoverProps } from "../popover";
-import { useRenameCSS } from "../theme/Theme";
 import type { AkselColor } from "../types";
+import { cl } from "../util/className";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { useMergeRefs } from "../util/hooks/useMergeRefs";
 import { useI18n } from "../util/i18n/i18n.hooks";
@@ -59,7 +59,6 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     const buttonRef = useRef<HTMLButtonElement | null>(null);
     const mergedRef = useMergeRefs(buttonRef, ref);
     const [open, setOpen] = useState(false);
@@ -69,14 +68,14 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
 
     return (
       <div
-        className={cn("navds-help-text", wrapperClassName)}
+        className={cl("aksel-help-text", wrapperClassName)}
         data-color={color}
       >
         <button
           {...rest}
           ref={mergedRef}
           onClick={composeEventHandlers(onClick, () => setOpen((x) => !x))}
-          className={cn(className, "navds-help-text__button")}
+          className={cl(className, "aksel-help-text__button")}
           type="button"
           aria-expanded={open}
           aria-label={titleWithFallback}
@@ -86,13 +85,13 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
         </button>
         <Popover
           onClose={() => setOpen(false)}
-          className={cn("navds-help-text__popover")}
+          className="aksel-help-text__popover"
           open={open}
           anchorEl={buttonRef.current}
           placement={placement}
           strategy={strategy}
         >
-          <Popover.Content className={cn("navds-body-short")}>
+          <Popover.Content className="aksel-body-short">
             {children}
           </Popover.Content>
         </Popover>

package/src/help-text/HelpTextIcon.tsx

@@ -1,9 +1,7 @@
 import React from "react";
-import { useRenameCSS } from "../theme/Theme";
+import { cl } from "../util/className";
 
 export const HelpTextIcon = ({ filled = false }: { filled?: boolean }) => {
-  const { cn } = useRenameCSS();
-
   return (
     <svg
       width="1em"
@@ -13,8 +11,8 @@ export const HelpTextIcon = ({ filled = false }: { filled?: boolean }) => {
       xmlns="http://www.w3.org/2000/svg"
       focusable={false}
       role="img"
-      className={cn("navds-help-text__icon", {
-        "navds-help-text__icon--filled": filled,
+      className={cl("aksel-help-text__icon", {
+        "aksel-help-text__icon--filled": filled,
       })}
       aria-hidden
     >

package/src/inline-message/icon/InlineMessageIcon.tsx

@@ -5,7 +5,6 @@ import {
   InformationSquareFillIcon,
   XMarkOctagonFillIcon,
 } from "@navikt/aksel-icons";
-import { useRenameCSS } from "../../theme/Theme";
 
 const STATUS_ICONS = {
   info: InformationSquareFillIcon,
@@ -19,15 +18,13 @@ function InlineMessageIcon({
 }: {
   status: "info" | "success" | "warning" | "error";
 }) {
-  const { cn } = useRenameCSS();
-
   if (!(status in STATUS_ICONS)) {
     return null;
   }
 
   const Icon = STATUS_ICONS[status];
 
-  return <Icon className={cn("navds-inline-message__icon")} aria-hidden />;
+  return <Icon className="aksel-inline-message__icon" aria-hidden />;
 }
 
 export { InlineMessageIcon };

package/src/inline-message/root/InlineMessage.tsx

@@ -1,8 +1,8 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
-import { useRenameCSS, useThemeInternal } from "../../theme/Theme";
+import { useThemeInternal } from "../../theme/Theme";
 import { BodyShort } from "../../typography";
 import { type OverridableComponent, useId } from "../../util";
+import { cl } from "../../util/className";
 import { useI18n } from "../../util/i18n/i18n.hooks";
 import { InlineMessageIcon } from "../icon/InlineMessageIcon";
 
@@ -57,7 +57,6 @@ export const InlineMessage: OverridableComponent<
     }: InlineMessageProps & { as?: React.ElementType },
     forwardedRef,
   ) => {
-    const { cn } = useRenameCSS();
     const themeContext = useThemeInternal();
 
     const translate = useI18n("global");
@@ -67,7 +66,7 @@ export const InlineMessage: OverridableComponent<
     return (
       <BodyShort
         ref={forwardedRef}
-        className={cn("navds-inline-message", className)}
+        className={cl("aksel-inline-message", className)}
         data-color={status === "error" ? "danger" : status}
         {...restProps}
         size={size}

package/src/internal-header/InternalHeader.tsx

@@ -1,5 +1,6 @@
 import React, { HTMLAttributes, forwardRef } from "react";
-import { Theme, useRenameCSS } from "../theme/Theme";
+import { Theme } from "../theme/Theme";
+import { cl } from "../util/className";
 import { OverridableComponent } from "../util/types";
 import InternalHeaderButton, {
   InternalHeaderButtonProps,
@@ -78,8 +79,6 @@ interface InternalHeaderComponent
  * ```
  */
 export const InternalHeader = forwardRef(({ className, ...rest }, ref) => {
-  const { cn } = useRenameCSS();
-
   /*
    * Component is always in "dark" mode, so we manually override global theme.
    */
@@ -88,7 +87,7 @@ export const InternalHeader = forwardRef(({ className, ...rest }, ref) => {
       <header
         {...rest}
         ref={ref}
-        className={cn("navds-internalheader", className)}
+        className={cl("aksel-internalheader", className)}
       />
     </Theme>
   );

package/src/internal-header/InternalHeaderButton.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 InternalHeaderButtonProps
@@ -13,13 +13,11 @@ export const InternalHeaderButton: OverridableComponent<
   InternalHeaderButtonProps,
   HTMLButtonElement
 > = forwardRef(({ as: Component = "button", className, ...rest }, ref) => {
-  const { cn } = useRenameCSS();
-
   return (
     <Component
       {...rest}
       ref={ref}
-      className={cn("navds-internalheader__button", className)}
+      className={cl("aksel-internalheader__button", className)}
     />
   );
 });

package/src/internal-header/InternalHeaderTitle.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 InternalHeaderTitleProps
@@ -14,16 +14,14 @@ export const InternalHeaderTitle: OverridableComponent<
   InternalHeaderTitleProps,
   HTMLAnchorElement
 > = forwardRef(({ as: Component = "a", children, className, ...rest }, ref) => {
-  const { cn } = useRenameCSS();
-
   return (
     <Component
       {...rest}
       ref={ref}
       size="xsmall"
-      className={cn(
-        "navds-internalheader__title",
-        "navds-body-short",
+      className={cl(
+        "aksel-internalheader__title",
+        "aksel-body-short",
         className,
       )}
     >

package/src/internal-header/InternalHeaderUser.tsx

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes, forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
 import { BodyShort, Detail } from "../typography";
+import { cl } from "../util/className";
 
 export interface InternalHeaderUserProps
   extends HTMLAttributes<HTMLDivElement> {
@@ -18,13 +18,11 @@ export const InternalHeaderUser = forwardRef<
   HTMLDivElement,
   InternalHeaderUserProps
 >(({ className, name, description, ...rest }, ref) => {
-  const { cn } = useRenameCSS();
-
   return (
     <div
       {...rest}
       ref={ref}
-      className={cn("navds-internalheader__user", className)}
+      className={cl("aksel-internalheader__user", className)}
     >
       <div>
         <BodyShort size="small" as="div">

package/src/internal-header/InternalHeaderUserButton.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
-import { useRenameCSS } from "../theme/Theme";
 import { BodyShort, Detail } from "../typography";
+import { cl } from "../util/className";
 import { OverridableComponent } from "../util/types";
 import InternalHeaderButton from "./InternalHeaderButton";
 
@@ -21,14 +21,12 @@ export const InternalHeaderUserButton: OverridableComponent<
   InternalHeaderUserButtonProps,
   HTMLButtonElement
 > = forwardRef(({ as, name, description, className, ...rest }, ref) => {
-  const { cn } = useRenameCSS();
-
   return (
     <InternalHeaderButton
       {...rest}
       as={as}
       ref={ref}
-      className={cn("navds-internalheader__user-button", className)}
+      className={cl("aksel-internalheader__user-button", className)}
     >
       <div>
         <BodyShort size="small" as="div">

package/src/layout/base/BasePrimitive.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Slot } from "../../slot/Slot";
-import { useRenameCSS } from "../../theme/Theme";
+import { cl } from "../../util/className";
 import { getResponsiveProps, getResponsiveValue } from "../utilities/css";
 import { ResponsiveProp, SpacingScale } from "../utilities/types";
 
@@ -250,8 +250,6 @@ export const BasePrimitive = ({
   flexShrink,
   gridColumn,
 }: BasePrimitiveProps) => {
-  const { cn } = useRenameCSS();
-
   const style: React.CSSProperties = {
     /* Padding */
     ...getResponsiveProps("r", "p", "space", padding),
@@ -289,33 +287,33 @@ export const BasePrimitive = ({
 
   return (
     <Slot
-      className={cn({
+      className={cl({
         className,
-        "navds-r-p": padding,
-        "navds-r-pi": paddingInline,
-        "navds-r-pb": paddingBlock,
-        "navds-r-m": margin,
-        "navds-r-mi": marginInline,
-        "navds-r-mb": marginBlock,
-        "navds-r-w": width,
-        "navds-r-minw": minWidth,
-        "navds-r-maxw": maxWidth,
-        "navds-r-h": height,
-        "navds-r-minh": minHeight,
-        "navds-r-maxh": maxHeight,
-        "navds-r-position": position,
-        "navds-r-inset": inset,
-        "navds-r-top": top,
-        "navds-r-right": right,
-        "navds-r-bottom": bottom,
-        "navds-r-left": left,
-        "navds-r-overflow": overflow,
-        "navds-r-overflowx": overflowX,
-        "navds-r-overflowy": overflowY,
-        "navds-r-flex-basis": flexBasis,
-        "navds-r-flex-grow": flexGrow,
-        "navds-r-flex-shrink": flexShrink,
-        "navds-r-grid-column": gridColumn,
+        "aksel-r-p": padding,
+        "aksel-r-pi": paddingInline,
+        "aksel-r-pb": paddingBlock,
+        "aksel-r-m": margin,
+        "aksel-r-mi": marginInline,
+        "aksel-r-mb": marginBlock,
+        "aksel-r-w": width,
+        "aksel-r-minw": minWidth,
+        "aksel-r-maxw": maxWidth,
+        "aksel-r-h": height,
+        "aksel-r-minh": minHeight,
+        "aksel-r-maxh": maxHeight,
+        "aksel-r-position": position,
+        "aksel-r-inset": inset,
+        "aksel-r-top": top,
+        "aksel-r-right": right,
+        "aksel-r-bottom": bottom,
+        "aksel-r-left": left,
+        "aksel-r-overflow": overflow,
+        "aksel-r-overflowx": overflowX,
+        "aksel-r-overflowy": overflowY,
+        "aksel-r-flex-basis": flexBasis,
+        "aksel-r-flex-grow": flexGrow,
+        "aksel-r-flex-shrink": flexShrink,
+        "aksel-r-grid-column": gridColumn,
       })}
       style={style}
     >

package/src/layout/bleed/Bleed.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
 import { Slot } from "../../slot/Slot";
-import { useRenameCSS } from "../../theme/Theme";
+import { cl } from "../../util/className";
 import { getResponsiveProps } from "../utilities/css";
 import { ResponsiveProp, SpacingScale } from "../utilities/types";
 
@@ -80,8 +80,6 @@ export const Bleed = forwardRef<HTMLDivElement, BleedProps>(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
-
     let style: React.CSSProperties = {
       ..._style,
       ...getResponsiveProps(
@@ -126,8 +124,8 @@ export const Bleed = forwardRef<HTMLDivElement, BleedProps>(
     return (
       <Comp
         {...rest}
-        className={cn("navds-bleed", className, {
-          "navds-bleed--padding": reflectivePadding,
+        className={cl("aksel-bleed", className, {
+          "aksel-bleed--padding": reflectivePadding,
         })}
         ref={ref}
         style={style}

package/src/layout/box/Box.darkside.tsx

@@ -8,8 +8,8 @@ import type {
   AkselShadowToken,
 } from "@navikt/ds-tokens/types";
 import { Slot } from "../../slot/Slot";
-import { useRenameCSS } from "../../theme/Theme";
 import { omit } from "../../util";
+import { cl } from "../../util/className";
 import { OverridableComponent } from "../../util/types";
 import BasePrimitive, {
   PRIMITIVE_PROPS,
@@ -118,7 +118,6 @@ export const BoxNew: OverridableComponent<BoxNewProps, HTMLDivElement> =
       }: BoxNewProps & { as?: React.ElementType },
       ref,
     ) => {
-      const { cn } = useRenameCSS();
       const style: React.CSSProperties = {
         ..._style,
         "--__axc-box-background": background
@@ -147,12 +146,12 @@ export const BoxNew: OverridableComponent<BoxNewProps, HTMLDivElement> =
             {...omit(rest, PRIMITIVE_PROPS)}
             ref={ref}
             style={style}
-            className={cn("navds-box", className, {
-              "navds-box-bg": background,
-              "navds-box-border-color": borderColor,
-              "navds-box-border-width": borderWidth,
-              "navds-box-radius": borderRadius,
-              "navds-box-shadow": shadow,
+            className={cl("aksel-box", className, {
+              "aksel-box-bg": background,
+              "aksel-box-border-color": borderColor,
+              "aksel-box-border-width": borderWidth,
+              "aksel-box-radius": borderRadius,
+              "aksel-box-shadow": shadow,
             })}
           >
             {children}

package/src/layout/box/Box.tsx

@@ -8,8 +8,8 @@ import type {
   AkselShadowToken,
 } from "@navikt/ds-tokens/types";
 import { Slot } from "../../slot/Slot";
-import { useRenameCSS } from "../../theme/Theme";
 import { omit } from "../../util";
+import { cl } from "../../util/className";
 import { OverridableComponent } from "../../util/types";
 import BasePrimitive, {
   PRIMITIVE_PROPS,
@@ -126,7 +126,6 @@ export const BoxComponent: OverridableComponent<BoxProps, HTMLDivElement> =
       }: BoxProps & { as?: React.ElementType },
       ref,
     ) => {
-      const { cn } = useRenameCSS();
       const style: React.CSSProperties = {
         ..._style,
         "--__axc-box-background": background
@@ -155,12 +154,12 @@ export const BoxComponent: OverridableComponent<BoxProps, HTMLDivElement> =
             {...omit(rest, PRIMITIVE_PROPS)}
             ref={ref}
             style={style}
-            className={cn("navds-box", className, {
-              "navds-box-bg": background,
-              "navds-box-border-color": borderColor,
-              "navds-box-border-width": borderWidth,
-              "navds-box-radius": borderRadius,
-              "navds-box-shadow": shadow,
+            className={cl("aksel-box", className, {
+              "aksel-box-bg": background,
+              "aksel-box-border-color": borderColor,
+              "aksel-box-border-width": borderWidth,
+              "aksel-box-radius": borderRadius,
+              "aksel-box-shadow": shadow,
             })}
           >
             {children}

package/src/layout/grid/HGrid.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
 import { Slot } from "../../slot/Slot";
-import { useRenameCSS } from "../../theme/Theme";
 import { OverridableComponent, omit } from "../../util";
+import { cl } from "../../util/className";
 import BasePrimitive, {
   PRIMITIVE_PROPS,
   PrimitiveProps,
@@ -77,8 +77,6 @@ export const HGrid: OverridableComponent<HGridProps, HTMLDivElement> =
       },
       ref,
     ) => {
-      const { cn } = useRenameCSS();
-
       const styles: React.CSSProperties = {
         ...style,
         "--__axc-hgrid-align": align,
@@ -93,9 +91,9 @@ export const HGrid: OverridableComponent<HGridProps, HTMLDivElement> =
           <Comp
             {...omit(rest, PRIMITIVE_PROPS)}
             ref={ref}
-            className={cn("navds-hgrid", className, {
-              "navds-hgrid-gap": gap,
-              "navds-hgrid-align": align,
+            className={cl("aksel-hgrid", className, {
+              "aksel-hgrid-gap": gap,
+              "aksel-hgrid-align": align,
             })}
             style={styles}
           >

package/src/layout/page/Page.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../theme/Theme";
 import { OverridableComponent, omit } from "../../util";
+import { cl } from "../../util/className";
 import { PageBlock } from "./parts/PageBlock";
 
 export interface PageProps extends React.HTMLAttributes<HTMLElement> {
@@ -47,21 +47,19 @@ export const PageComponent: OverridableComponent<PageProps, HTMLElement> =
       },
       ref,
     ) => {
-      const { cn } = useRenameCSS();
-
       const belowFold = footerPosition === "belowFold";
 
       return (
         <Component
           {...omit(rest, ["background"])}
-          className={cn("navds-page", className)}
+          className={cl("aksel-page", className)}
           ref={ref}
         >
           <div
-            className={cn({
-              "navds-page__content--fullheight": belowFold,
-              "navds-page__content--grow": !belowFold,
-              "navds-page__content--padding": contentBlockPadding === "end",
+            className={cl({
+              "aksel-page__content--fullheight": belowFold,
+              "aksel-page__content--grow": !belowFold,
+              "aksel-page__content--padding": contentBlockPadding === "end",
             })}
           >
             {children}

package/src/layout/page/parts/PageBlock.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 const widths = ["text", "md", "lg", "xl", "2xl"] as const;
@@ -65,16 +65,14 @@ export interface PageBlockProps extends React.HTMLAttributes<HTMLDivElement> {
 export const PageBlock: OverridableComponent<PageBlockProps, HTMLDivElement> =
   forwardRef(
     ({ as: Component = "div", gutters, className, width, ...rest }, ref) => {
-      const { cn } = useRenameCSS();
-
       return (
         <Component
           {...rest}
-          className={cn(
-            "navds-pageblock",
-            width && `navds-pageblock--${width}`,
+          className={cl(
+            "aksel-pageblock",
+            width && `aksel-pageblock--${width}`,
             className,
-            { "navds-pageblock--gutters": gutters },
+            { "aksel-pageblock--gutters": gutters },
           )}
           ref={ref}
         />

package/src/layout/responsive/Responsive.tsx

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes, forwardRef } from "react";
 import { Slot } from "../../slot/Slot";
-import { useRenameCSS } from "../../theme/Theme";
+import { cl } from "../../util/className";
 import { BreakpointsAlias } from "../utilities/types";
 
 export interface ResponsiveProps extends HTMLAttributes<HTMLDivElement> {
@@ -40,7 +40,6 @@ const Responsive = forwardRef<
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     const aboveProp = variant === "show" ? above : below;
     const belowProp = variant === "show" ? below : above;
 
@@ -50,9 +49,9 @@ const Responsive = forwardRef<
       <Comp
         {...rest}
         ref={ref}
-        className={cn("navds-responsive", className, {
-          [`navds-responsive__above--${aboveProp}`]: aboveProp,
-          [`navds-responsive__below--${belowProp}`]: belowProp,
+        className={cl("aksel-responsive", className, {
+          [`aksel-responsive__above--${aboveProp}`]: aboveProp,
+          [`aksel-responsive__below--${belowProp}`]: belowProp,
         })}
       />
     );

package/src/layout/stack/Spacer.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { useRenameCSS } from "../../theme/Theme";
 
 /**
  * Layout-primitive for auto-spacing between elements
@@ -14,8 +13,7 @@ import { useRenameCSS } from "../../theme/Theme";
  * </HStack>
  */
 export const Spacer = () => {
-  const { cn } = useRenameCSS();
-  return <span className={cn("navds-stack__spacer")} />;
+  return <span className="aksel-stack__spacer" />;
 };
 
 export default Spacer;