@navikt/ds-react 7.15.0 → 7.16.0

package/src/typography/Detail.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../theme/Theme";
 import { OverridableComponent } from "../util/types";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
@@ -52,28 +52,32 @@ export const Detail: OverridableComponent<DetailProps, HTMLParagraphElement> =
         ...rest
       },
       ref,
-    ) => (
-      <Component
-        {...rest}
-        ref={ref}
-        className={cl(
-          className,
-          "navds-detail",
-          typoClassNames({
-            spacing,
-            truncate,
-            weight,
-            align,
-            visuallyHidden,
-            textColor,
-            uppercase,
-          }),
-          {
-            "navds-detail--small": size === "small",
-          },
-        )}
-      />
-    ),
+    ) => {
+      const { cn } = useRenameCSS();
+
+      return (
+        <Component
+          {...rest}
+          ref={ref}
+          className={cn(
+            className,
+            "navds-detail",
+            typoClassNames({
+              spacing,
+              truncate,
+              weight,
+              align,
+              visuallyHidden,
+              textColor,
+              uppercase,
+            }),
+            {
+              "navds-detail--small": size === "small",
+            },
+          )}
+        />
+      );
+    },
   );
 
 export default Detail;

package/src/typography/ErrorMessage.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../theme/Theme";
 import { OverridableComponent } from "../util/types";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
@@ -51,42 +51,46 @@ export const ErrorMessage: OverridableComponent<
       ...rest
     },
     ref,
-  ) => (
-    <Component
-      {...rest}
-      ref={ref}
-      className={cl(
-        "navds-error-message",
-        "navds-label",
-        className,
-        typoClassNames({
-          spacing,
-        }),
-        {
-          "navds-label--small": size === "small",
-          "navds-error-message--show-icon": showIcon,
-        },
-      )}
-    >
-      {showIcon && (
-        <svg
-          viewBox="0 0 17 16"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          focusable={false}
-          aria-hidden
-        >
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M3.49209 11.534L8.11398 2.7594C8.48895 2.04752 9.50833 2.04743 9.88343 2.75924L14.5073 11.5339C14.8582 12.1998 14.3753 13 13.6226 13H4.37685C3.6242 13 3.14132 12.1999 3.49209 11.534ZM9.74855 10.495C9.74855 10.9092 9.41276 11.245 8.99855 11.245C8.58433 11.245 8.24855 10.9092 8.24855 10.495C8.24855 10.0808 8.58433 9.74497 8.99855 9.74497C9.41276 9.74497 9.74855 10.0808 9.74855 10.495ZM9.49988 5.49997C9.49988 5.22383 9.27602 4.99997 8.99988 4.99997C8.72373 4.99997 8.49988 5.22383 8.49988 5.49997V7.99997C8.49988 8.27611 8.72373 8.49997 8.99988 8.49997C9.27602 8.49997 9.49988 8.27611 9.49988 7.99997V5.49997Z"
-            fill="currentColor"
-          />
-        </svg>
-      )}
-      {children}
-    </Component>
-  ),
+  ) => {
+    const { cn } = useRenameCSS();
+
+    return (
+      <Component
+        {...rest}
+        ref={ref}
+        className={cn(
+          "navds-error-message",
+          "navds-label",
+          className,
+          typoClassNames({
+            spacing,
+          }),
+          {
+            "navds-label--small": size === "small",
+            "navds-error-message--show-icon": showIcon,
+          },
+        )}
+      >
+        {showIcon && (
+          <svg
+            viewBox="0 0 17 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            focusable={false}
+            aria-hidden
+          >
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M3.49209 11.534L8.11398 2.7594C8.48895 2.04752 9.50833 2.04743 9.88343 2.75924L14.5073 11.5339C14.8582 12.1998 14.3753 13 13.6226 13H4.37685C3.6242 13 3.14132 12.1999 3.49209 11.534ZM9.74855 10.495C9.74855 10.9092 9.41276 11.245 8.99855 11.245C8.58433 11.245 8.24855 10.9092 8.24855 10.495C8.24855 10.0808 8.58433 9.74497 8.99855 9.74497C9.41276 9.74497 9.74855 10.0808 9.74855 10.495ZM9.49988 5.49997C9.49988 5.22383 9.27602 4.99997 8.99988 4.99997C8.72373 4.99997 8.49988 5.22383 8.49988 5.49997V7.99997C8.49988 8.27611 8.72373 8.49997 8.99988 8.49997C9.27602 8.49997 9.49988 8.27611 9.49988 7.99997V5.49997Z"
+              fill="currentColor"
+            />
+          </svg>
+        )}
+        {children}
+      </Component>
+    );
+  },
 );
 
 export default ErrorMessage;

package/src/typography/Heading.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../theme/Theme";
 import { OverridableComponent } from "../util/types";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
@@ -52,13 +52,14 @@ export const Heading: OverridableComponent<HeadingProps, HTMLHeadingElement> =
       },
       ref,
     ) => {
+      const { cn } = useRenameCSS();
       const HeadingTag = as ?? (`h${level}` as React.ElementType);
 
       return (
         <HeadingTag
           {...rest}
           ref={ref}
-          className={cl(
+          className={cn(
             className,
             "navds-heading",
             `navds-heading--${size}`,

package/src/typography/Ingress.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../theme/Theme";
 import { OverridableComponent } from "../util/types";
 
 export interface IngressProps
@@ -31,14 +31,18 @@ export interface IngressProps
  * ```
  */
 export const Ingress: OverridableComponent<IngressProps, HTMLParagraphElement> =
-  forwardRef(({ className, spacing, as: Component = "p", ...rest }, ref) => (
-    <Component
-      {...rest}
-      ref={ref}
-      className={cl(className, "navds-ingress", {
-        "navds-typo--spacing": !!spacing,
-      })}
-    />
-  ));
+  forwardRef(({ className, spacing, as: Component = "p", ...rest }, ref) => {
+    const { cn } = useRenameCSS();
+
+    return (
+      <Component
+        {...rest}
+        ref={ref}
+        className={cn(className, "navds-ingress", {
+          "navds-typo--spacing": !!spacing,
+        })}
+      />
+    );
+  });
 
 export default Ingress;

package/src/typography/Label.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../theme/Theme";
 import { OverridableComponent } from "../util/types";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
@@ -45,24 +45,28 @@ export const Label: OverridableComponent<LabelProps, HTMLLabelElement> =
         ...rest
       },
       ref,
-    ) => (
-      <Component
-        {...rest}
-        ref={ref}
-        className={cl(
-          className,
-          "navds-label",
-          typoClassNames({
-            spacing,
-            visuallyHidden,
-            textColor,
-          }),
-          {
-            "navds-label--small": size === "small",
-          },
-        )}
-      />
-    ),
+    ) => {
+      const { cn } = useRenameCSS();
+
+      return (
+        <Component
+          {...rest}
+          ref={ref}
+          className={cn(
+            className,
+            "navds-label",
+            typoClassNames({
+              spacing,
+              visuallyHidden,
+              textColor,
+            }),
+            {
+              "navds-label--small": size === "small",
+            },
+          )}
+        />
+      );
+    },
   );
 
 export default Label;

package/src/typography/util.ts

@@ -2,6 +2,7 @@ import cl from "clsx";
 import { TypoProps } from "./types";
 
 export const typoClassNames = (props: TypoProps & { uppercase?: boolean }) => {
+  /* Renaming to aksel-* prefix is done in components themselves */
   return cl({
     "navds-typo--spacing": props.spacing,
     "navds-typo--truncate": props.truncate,

package/src/util/types/AsChildProps.ts

@@ -6,12 +6,12 @@ export type AsChildProps =
        * merging the props of the component with the props of the child.
        *
        * @example
-       * ```tsx
+       * ```
        * <Component asChild data-prop>
        *   <ChildComponent data-child />
        * </Component>
        *
-       * // Renders
+       * Out:
        * <MergedComponent data-prop data-child />
        * ```
        */
@@ -25,12 +25,12 @@ export type AsChildProps =
        * merging the props of the component with the props of the child.
        *
        * @example
-       * ```tsx
+       * ```
        * <Component asChild data-prop>
        *   <ChildComponent data-child />
        * </Component>
        *
-       * // Renders
+       * Out:
        * <MergedComponent data-prop data-child />
        * ```
        */