@navikt/ds-react 7.14.3 → 7.16.0

package/src/form/confirmation-panel/ConfirmationPanel.tsx

@@ -1,5 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../../theme/Theme";
 import { BodyLong, ErrorMessage } from "../../typography";
 import { useId } from "../../util/hooks";
 import { Checkbox, CheckboxProps } from "../checkbox";
@@ -50,6 +51,7 @@ export const ConfirmationPanel = forwardRef<
   HTMLInputElement,
   ConfirmationPanelProps
 >(({ className, children, label, ...props }, ref) => {
+  const { cn } = useRenameCSS();
   const { errorId, showErrorMsg, hasError, size, inputProps } = useFormField(
     props,
     "confirmation-panel",
@@ -65,18 +67,18 @@ export const ConfirmationPanel = forwardRef<
 
   return (
     <div
-      className={cl("navds-confirmation-panel", "navds-form-field", className, {
+      className={cn("navds-confirmation-panel", "navds-form-field", className, {
         "navds-confirmation-panel--small": size === "small",
         "navds-confirmation-panel--error": hasError,
         "navds-confirmation-panel--checked": !!props.checked,
       })}
       data-color-role={currentRole}
     >
-      <div className="navds-confirmation-panel__inner">
+      <div className={cn("navds-confirmation-panel__inner")}>
         {children && (
           <BodyLong
             size={props.size}
-            className="navds-confirmation-panel__content"
+            className={cn("navds-confirmation-panel__content")}
             id={`confirmation-panel-${id}`}
             as="div"
           >
@@ -97,7 +99,7 @@ export const ConfirmationPanel = forwardRef<
           {label}
         </Checkbox>
       </div>
-      <div className="navds-form-field__error" id={errorId} role="alert">
+      <div className={cn("navds-form-field__error")} id={errorId} role="alert">
         {showErrorMsg && (
           <ErrorMessage size={size} showIcon>
             {props.error}

package/src/form/error-summary/ErrorSummary.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { HTMLAttributes, forwardRef, useRef } from "react";
+import { useRenameCSS } from "../../theme/Theme";
 import { BodyShort, Heading } from "../../typography";
 import { composeEventHandlers } from "../../util/composeEventHandlers";
 import { useMergeRefs } from "../../util/hooks";
@@ -78,6 +78,8 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
     },
     ref,
   ) => {
+    const { cn } = useRenameCSS();
+
     const translate = useI18n("ErrorSummary");
     const wrapperRef = useRef<HTMLDivElement>(null);
     const headingRef = useRef<HTMLHeadingElement>(null);
@@ -88,7 +90,7 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
       <div
         ref={mergedRef}
         {...rest}
-        className={cl(
+        className={cn(
           className,
           "navds-error-summary",
           `navds-error-summary--${size}`,
@@ -101,7 +103,7 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
         })}
       >
         <Heading
-          className="navds-error-summary__heading"
+          className={cn("navds-error-summary__heading")}
           as={headingTag}
           size="small"
           ref={headingRef}
@@ -109,7 +111,11 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
         >
           {heading ?? translate("heading")}
         </Heading>
-        <BodyShort as="ul" size={size} className="navds-error-summary__list">
+        <BodyShort
+          as="ul"
+          size={size}
+          className={cn("navds-error-summary__list")}
+        >
           {children}
         </BodyShort>
       </div>

package/src/form/error-summary/ErrorSummaryItem.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 ErrorSummaryItemProps
@@ -21,12 +21,14 @@ type ErrorSummaryItemType = OverridableComponent<
 
 export const ErrorSummaryItem: ErrorSummaryItemType = forwardRef(
   ({ children, as: Component = "a", className, ...rest }, ref) => {
+    const { cn } = useRenameCSS();
+
     return (
       <li>
         <Component
           {...rest}
           ref={ref}
-          className={cl(className, "navds-error-summary__item", "navds-link")}
+          className={cn(className, "navds-error-summary__item", "navds-link")}
         >
           {children}
         </Component>

package/src/form/fieldset/Fieldset.tsx

@@ -1,5 +1,6 @@
 import cl from "clsx";
 import React, { FieldsetHTMLAttributes, forwardRef, useContext } from "react";
+import { useRenameCSS } from "../../theme/Theme";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
 import { omit } from "../../util";
 import { ReadOnlyIcon, ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
@@ -42,6 +43,7 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
       inputDescriptionId,
     } = useFieldset(props);
 
+    const { cn } = useRenameCSS();
     const fieldset = useContext(FieldsetContext);
 
     const {
@@ -72,7 +74,7 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
           {...omit(rest, ["errorId", "error", "size", "readOnly"])}
           {...omit(inputProps, ["aria-describedby", "aria-invalid"])}
           ref={ref}
-          className={cl(
+          className={cn(
             className,
             "navds-fieldset",
             `navds-fieldset--${size}`,
@@ -85,7 +87,7 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
           <Label
             size={size}
             as="legend"
-            className={cl("navds-fieldset__legend", {
+            className={cn("navds-fieldset__legend", {
               "navds-sr-only": !!hideLegend,
             })}
           >
@@ -95,7 +97,7 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
           </Label>
           {!!description && (
             <BodyShort
-              className={cl("navds-fieldset__description", {
+              className={cn("navds-fieldset__description", {
                 "navds-sr-only": !!hideLegend,
               })}
               id={inputDescriptionId}
@@ -110,7 +112,7 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
             id={errorId}
             aria-relevant="additions removals"
             aria-live="polite"
-            className="navds-fieldset__error"
+            className={cn("navds-fieldset__error")}
           >
             {showErrorMsg && (
               <ErrorMessage size={size} showIcon>

package/src/form/file-upload/FileUpload.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { HTMLAttributes, forwardRef } from "react";
+import { useRenameCSS } from "../../theme/Theme";
 import { ComponentTranslation } from "../../util/i18n/i18n.types";
 import { FileUploadLocaleContextProvider } from "./FileUpload.context";
 import Trigger from "./parts/Trigger";
@@ -125,9 +125,10 @@ interface FileUploadComponent
  */
 export const FileUpload = forwardRef<HTMLDivElement, FileUploadProps>(
   ({ children, className, translations, ...rest }: FileUploadProps, ref) => {
+    const { cn } = useRenameCSS();
     return (
       <FileUploadLocaleContextProvider translations={translations}>
-        <div ref={ref} {...rest} className={cl("navds-file-upload", className)}>
+        <div ref={ref} {...rest} className={cn("navds-file-upload", className)}>
           {children}
         </div>
       </FileUploadLocaleContextProvider>

package/src/form/file-upload/parts/dropzone/Dropzone.tsx

@@ -2,6 +2,7 @@ import cl from "clsx";
 import React, { forwardRef } from "react";
 import { CircleSlashIcon, CloudUpIcon } from "@navikt/aksel-icons";
 import { Button } from "../../../../button";
+import { useRenameCSS } from "../../../../theme/Theme";
 import { BodyShort, ErrorMessage, Label } from "../../../../typography";
 import { composeEventHandlers } from "../../../../util/composeEventHandlers";
 import { useId } from "../../../../util/hooks";
@@ -34,6 +35,7 @@ const Dropzone = forwardRef<HTMLInputElement, FileUploadDropzoneProps>(
       ...rest
     } = props;
 
+    const { cn } = useRenameCSS();
     const context = useFileUploadTranslation(false);
     const translate = useI18n(
       "FileUpload",
@@ -74,7 +76,7 @@ const Dropzone = forwardRef<HTMLInputElement, FileUploadDropzoneProps>(
 
     return (
       <div
-        className={cl("navds-form-field", "navds-dropzone", className, {
+        className={cn("navds-form-field", "navds-dropzone", className, {
           "navds-dropzone--error": hasError,
           "navds-dropzone--dragging": dropzoneCtx.isDraggingOver,
           "navds-dropzone--disabled": inputProps.disabled,
@@ -83,14 +85,14 @@ const Dropzone = forwardRef<HTMLInputElement, FileUploadDropzoneProps>(
         <Label
           htmlFor={inputId}
           id={labelId}
-          className="navds-form-field__label"
+          className={cn("navds-form-field__label")}
         >
           {label}
         </Label>
         {!!description && (
           <BodyShort
             id={inputDescriptionId}
-            className="navds-form-field__description"
+            className={cn("navds-form-field__description")}
             as="div"
           >
             {description}
@@ -98,7 +100,7 @@ const Dropzone = forwardRef<HTMLInputElement, FileUploadDropzoneProps>(
         )}
         {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
         <div
-          className="navds-dropzone__area"
+          className={cn("navds-dropzone__area")}
           onDragEnter={dropzoneCtx.onDragEnter}
           onDragOver={dropzoneCtx.onDragOver}
           onDragLeave={dropzoneCtx.onDragLeave}
@@ -111,16 +113,16 @@ const Dropzone = forwardRef<HTMLInputElement, FileUploadDropzoneProps>(
         >
           {!inputProps.disabled && (
             <>
-              <div className="navds-dropzone__area-icon">
+              <div className={cn("navds-dropzone__area-icon")}>
                 <DropzoneIcon fontSize="1.5rem" aria-hidden />
               </div>
-              <div className="navds-dropzone__area-release">
-                <div className="navds-dropzone__area-release__icon">
+              <div className={cn("navds-dropzone__area-release")}>
+                <div className={cn("navds-dropzone__area-release__icon")}>
                   <DropzoneIcon aria-hidden />
                 </div>
                 <span
                   aria-hidden={!dropzoneCtx.isDraggingOver}
-                  className="navds-dropzone__area-release__text"
+                  className={cn("navds-dropzone__area-release__text")}
                 >
                   {translate("dropzone.drop")}
                 </span>
@@ -138,7 +140,7 @@ const Dropzone = forwardRef<HTMLInputElement, FileUploadDropzoneProps>(
                 {...inputPropsRest}
                 id={buttonId}
                 aria-describedby={cl(labelId, ariaDescribedby)}
-                className="navds-dropzone__area-button"
+                className={cn("navds-dropzone__area-button")}
                 type="button"
                 variant="secondary"
               >
@@ -150,7 +152,7 @@ const Dropzone = forwardRef<HTMLInputElement, FileUploadDropzoneProps>(
           )}
 
           {inputProps.disabled && (
-            <div className="navds-dropzone__area-disabled">
+            <div className={cn("navds-dropzone__area-disabled")}>
               <CircleSlashIcon aria-hidden fontSize="1.75rem" />
               <BodyShort as="div">
                 {fileLimitReached
@@ -172,7 +174,7 @@ const Dropzone = forwardRef<HTMLInputElement, FileUploadDropzoneProps>(
           />
         </div>
         <div
-          className="navds-form-field__error"
+          className={cn("navds-form-field__error")}
           id={errorId}
           aria-relevant="additions removals"
           aria-live="polite"

package/src/form/file-upload/parts/item/Item.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { MouseEvent, forwardRef } from "react";
+import { useRenameCSS } from "../../../../theme/Theme";
 import { BodyShort, ErrorMessage } from "../../../../typography";
 import { OverridableComponent } from "../../../../util";
 import { useI18n } from "../../../../util/i18n/i18n.hooks";
@@ -80,6 +80,7 @@ export const Item: OverridableComponent<FileUploadItemProps, HTMLDivElement> =
       }: FileUploadItemProps,
       ref,
     ) => {
+      const { cn } = useRenameCSS();
       const context = useFileUploadTranslation(false);
       const translate = useI18n(
         "FileUpload",
@@ -103,23 +104,23 @@ export const Item: OverridableComponent<FileUploadItemProps, HTMLDivElement> =
         <Component
           ref={ref}
           {...rest}
-          className={cl("navds-file-item", className, {
+          className={cn("navds-file-item", className, {
             "navds-file-item--error": showError,
           })}
         >
-          <div className="navds-file-item__inner">
+          <div className={cn("navds-file-item__inner")}>
             <ItemIcon
               isLoading={status !== "idle"}
               file={file}
               showError={showError}
             />
-            <div className="navds-file-item__file-info">
+            <div className={cn("navds-file-item__file-info")}>
               <ItemName file={file} href={href} onClick={onFileClick} />
               <BodyShort as="div" size="small">
                 {getStatusText()}
               </BodyShort>
               <div
-                className="navds-file-item__error"
+                className={cn("navds-file-item__error")}
                 aria-relevant="additions removals"
                 aria-live="polite"
               >

package/src/form/file-upload/parts/item/ItemButton.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { ArrowsCirclepathIcon, TrashIcon } from "@navikt/aksel-icons";
 import { Button } from "../../../../button";
+import { useRenameCSS } from "../../../../theme/Theme";
 
 interface Props {
   action: "delete" | "retry";
@@ -10,12 +11,13 @@ interface Props {
 }
 
 const ItemButton = ({ action, onClick, id, title }: Props) => {
+  const { cn } = useRenameCSS();
   const Icon = action === "delete" ? TrashIcon : ArrowsCirclepathIcon;
 
   return (
     <Button
       id={id}
-      className="navds-file-item__button"
+      className={cn("navds-file-item__button")}
       type="button"
       variant="tertiary-neutral"
       onClick={onClick}

package/src/form/file-upload/parts/item/ItemIcon.tsx

@@ -10,6 +10,7 @@ import {
   FileXMarkIcon,
 } from "@navikt/aksel-icons";
 import { Loader } from "../../../../loader";
+import { useRenameCSS } from "../../../../theme/Theme";
 import { FileItem } from "./Item.types";
 
 interface ItemIconProps {
@@ -24,9 +25,12 @@ const iconProps = {
 };
 
 function ItemIcon({ isLoading, file, showError }: ItemIconProps) {
+  const { cn } = useRenameCSS();
   if (isLoading) {
     return (
-      <div className="navds-file-item__icon navds-file-item__icon--loading">
+      <div
+        className={cn("navds-file-item__icon navds-file-item__icon--loading")}
+      >
         <Loader size="large" />
       </div>
     );
@@ -34,13 +38,13 @@ function ItemIcon({ isLoading, file, showError }: ItemIconProps) {
 
   if (showError) {
     return (
-      <div className="navds-file-item__icon">
+      <div className={cn("navds-file-item__icon")}>
         <FileXMarkIcon {...iconProps} />
       </div>
     );
   }
   return (
-    <div className="navds-file-item__icon">
+    <div className={cn("navds-file-item__icon")}>
       <Icon file={file} />
     </div>
   );

package/src/form/form-progress/FormProgress.tsx

@@ -5,6 +5,7 @@ import Collapsible from "../../collapsible/Collapsible";
 import { HStack } from "../../layout/stack";
 import { ProgressBar } from "../../progress-bar";
 import { Stepper, StepperStepProps } from "../../stepper";
+import { useRenameCSS } from "../../theme/Theme";
 import { BodyShort } from "../../typography";
 import { useI18n } from "../../util/i18n/i18n.hooks";
 import { ComponentTranslation } from "../../util/i18n/i18n.types";
@@ -91,6 +92,7 @@ export const FormProgress = forwardRef<HTMLDivElement, FormProgressProps>(
     }: FormProgressProps,
     ref,
   ) => {
+    const { cn } = useRenameCSS();
     const translate = useI18n("FormProgress", translations);
 
     return (
@@ -99,7 +101,7 @@ export const FormProgress = forwardRef<HTMLDivElement, FormProgressProps>(
           aria-hidden
           value={activeStep}
           valueMax={totalSteps}
-          className="navds-form-progress__bar"
+          className={cn("navds-form-progress__bar")}
         />
 
         <Collapsible lazy open={open} onOpenChange={onOpenChange}>
@@ -111,22 +113,24 @@ export const FormProgress = forwardRef<HTMLDivElement, FormProgressProps>(
               <Button
                 variant="tertiary"
                 size="small"
-                className="navds-form-progress__button"
+                className={cn("navds-form-progress__button")}
                 icon={<ChevronDownIcon aria-hidden />}
               >
-                <span className="navds-form-progress__btn-txt-hide">
+                <span className={cn("navds-form-progress__btn-txt-hide")}>
                   {translate("hideAllSteps")}
                 </span>
-                <span className="navds-form-progress__btn-txt-show">
+                <span className={cn("navds-form-progress__btn-txt-show")}>
                   {translate("showAllSteps")}
                 </span>
               </Button>
             </Collapsible.Trigger>
           </HStack>
 
-          <Collapsible.Content className="navds-form-progress__collapsible">
-            <div className="navds-form-progress__collapsible-content">
-              <div className="navds-form-progress__stepper">
+          <Collapsible.Content
+            className={cn("navds-form-progress__collapsible")}
+          >
+            <div className={cn("navds-form-progress__collapsible-content")}>
+              <div className={cn("navds-form-progress__stepper")}>
                 <Stepper
                   activeStep={activeStep}
                   onStepChange={onStepChange}

package/src/form/form-summary/FormSummary.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { HTMLAttributes, forwardRef } from "react";
+import { useRenameCSS } from "../../theme/Theme";
 import FormSummaryAnswer from "./FormSummaryAnswer";
 import FormSummaryAnswers from "./FormSummaryAnswers";
 import FormSummaryEditLink from "./FormSummaryEditLink";
@@ -87,8 +87,10 @@ export interface FormSummaryProps extends HTMLAttributes<HTMLDivElement> {
  */
 export const FormSummary = forwardRef<HTMLDivElement, FormSummaryProps>(
   ({ children, className, ...rest }, ref) => {
+    const { cn } = useRenameCSS();
+
     return (
-      <div ref={ref} {...rest} className={cl("navds-form-summary", className)}>
+      <div ref={ref} {...rest} className={cn("navds-form-summary", className)}>
         {children}
       </div>
     );

package/src/form/form-summary/FormSummaryAnswer.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React from "react";
+import { useRenameCSS } from "../../theme/Theme";
 
 export interface FormSummaryAnswerProps
   extends React.HTMLAttributes<HTMLDivElement> {
@@ -14,14 +14,18 @@ export interface FormSummaryAnswerProps
 export const FormSummaryAnswer = React.forwardRef<
   HTMLDivElement,
   FormSummaryAnswerProps
->(({ children, className, ...rest }, ref) => (
-  <div
-    ref={ref}
-    {...rest}
-    className={cl("navds-form-summary__answer", className)}
-  >
-    {children}
-  </div>
-));
+>(({ children, className, ...rest }, ref) => {
+  const { cn } = useRenameCSS();
+
+  return (
+    <div
+      ref={ref}
+      {...rest}
+      className={cn("navds-form-summary__answer", className)}
+    >
+      {children}
+    </div>
+  );
+});
 
 export default FormSummaryAnswer;

package/src/form/form-summary/FormSummaryAnswers.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../../theme/Theme";
 
 export interface FormSummaryAnswersProps
   extends React.HTMLAttributes<HTMLDListElement> {
@@ -12,14 +12,18 @@ export interface FormSummaryAnswersProps
 export const FormSummaryAnswers = forwardRef<
   HTMLDListElement,
   FormSummaryAnswersProps
->(({ children, className, ...rest }: FormSummaryAnswersProps, ref) => (
-  <dl
-    ref={ref}
-    {...rest}
-    className={cl("navds-form-summary__answers", className)}
-  >
-    {children}
-  </dl>
-));
+>(({ children, className, ...rest }: FormSummaryAnswersProps, ref) => {
+  const { cn } = useRenameCSS();
+
+  return (
+    <dl
+      ref={ref}
+      {...rest}
+      className={cn("navds-form-summary__answers", className)}
+    >
+      {children}
+    </dl>
+  );
+});
 
 export default FormSummaryAnswers;

package/src/form/form-summary/FormSummaryEditLink.tsx

@@ -1,6 +1,6 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
 import { Link } from "../../link";
+import { useRenameCSS } from "../../theme/Theme";
 import { useI18n } from "../../util/i18n/i18n.hooks";
 import { OverridableComponent } from "../../util/types";
 
@@ -23,13 +23,15 @@ export const FormSummaryEditLink: OverridableComponent<
   FormSummaryEditProps,
   HTMLAnchorElement
 > = forwardRef(({ children, className, as = "a", ...rest }, ref) => {
+  const { cn } = useRenameCSS();
   const translate = useI18n("FormSummary");
+
   return (
     <Link
       ref={ref}
       as={as}
       {...rest}
-      className={cl("navds-form-summary__edit", className)}
+      className={cn("navds-form-summary__edit", className)}
     >
       {children || translate("editAnswer")}
     </Link>

package/src/form/form-summary/FormSummaryHeader.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../../theme/Theme";
 
 export interface FormSummaryHeaderProps
   extends React.HTMLAttributes<HTMLDivElement> {
@@ -12,14 +12,18 @@ export interface FormSummaryHeaderProps
 export const FormSummaryHeader = forwardRef<
   HTMLDivElement,
   FormSummaryHeaderProps
->(({ children, className, ...rest }, ref) => (
-  <header
-    ref={ref}
-    {...rest}
-    className={cl("navds-form-summary__header", className)}
-  >
-    {children}
-  </header>
-));
+>(({ children, className, ...rest }, ref) => {
+  const { cn } = useRenameCSS();
+
+  return (
+    <header
+      ref={ref}
+      {...rest}
+      className={cn("navds-form-summary__header", className)}
+    >
+      {children}
+    </header>
+  );
+});
 
 export default FormSummaryHeader;

package/src/form/form-summary/FormSummaryValue.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../../theme/Theme";
 import { BodyLong } from "../../typography";
 
 export interface FormSummaryValueProps
@@ -10,15 +10,19 @@ export interface FormSummaryValueProps
 export const FormSummaryValue = forwardRef<
   HTMLDivElement,
   FormSummaryValueProps
->(({ children, className, ...rest }, ref) => (
-  <BodyLong
-    ref={ref}
-    {...rest}
-    as="dd"
-    className={cl("navds-form-summary__value", className)}
-  >
-    {children}
-  </BodyLong>
-));
+>(({ children, className, ...rest }, ref) => {
+  const { cn } = useRenameCSS();
+
+  return (
+    <BodyLong
+      ref={ref}
+      {...rest}
+      as="dd"
+      className={cn("navds-form-summary__value", className)}
+    >
+      {children}
+    </BodyLong>
+  );
+});
 
 export default FormSummaryValue;