@navikt/ds-react 8.0.0 → 8.1.0

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

@@ -1,9 +1,9 @@
 import React, { MouseEvent, forwardRef } from "react";
-import { useRenameCSS } from "../../../../theme/Theme";
 import { BodyLong, BodyShort, ErrorMessage } from "../../../../typography";
-import { OverridableComponent } from "../../../../util";
-import { useI18n } from "../../../../util/i18n/i18n.hooks";
-import { ComponentTranslation } from "../../../../util/i18n/i18n.types";
+import type { OverridableComponent } from "../../../../utils-external";
+import { cl } from "../../../../utils/helpers";
+import { useI18n } from "../../../../utils/i18n/i18n.hooks";
+import type { ComponentTranslation } from "../../../../utils/i18n/i18n.types";
 import { useFileUploadTranslation } from "../../FileUpload.context";
 import { FileItem } from "./Item.types";
 import { ItemActionField } from "./ItemActionField";
@@ -81,7 +81,6 @@ export const Item: OverridableComponent<FileUploadItemProps, HTMLDivElement> =
       }: FileUploadItemProps,
       ref,
     ) => {
-      const { cn } = useRenameCSS();
       const context = useFileUploadTranslation(false);
       const translate = useI18n(
         "FileUpload",
@@ -105,18 +104,18 @@ export const Item: OverridableComponent<FileUploadItemProps, HTMLDivElement> =
         <Component
           ref={ref}
           {...rest}
-          className={cn("navds-file-item", className, {
-            "navds-file-item--error": showError,
+          className={cl("aksel-file-item", className, {
+            "aksel-file-item--error": showError,
           })}
         >
-          <div className={cn("navds-file-item__inner")}>
-            <BodyLong as="div" className={cn("navds-file-item__file-info")}>
+          <div className="aksel-file-item__inner">
+            <BodyLong as="div" className="aksel-file-item__file-info">
               <ItemHeader file={file} href={href} onClick={onFileClick} />
               <BodyShort as="div" size="small">
                 {getStatusText()}
               </BodyShort>
               <div
-                className={cn("navds-file-item__error")}
+                className="aksel-file-item__error"
                 aria-relevant="additions removals"
                 aria-live="polite"
               >

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

@@ -3,8 +3,7 @@ import { ArrowsCirclepathIcon, TrashIcon } from "@navikt/aksel-icons";
 import { Button } from "../../../../button";
 import Spacer from "../../../../layout/stack/Spacer";
 import { Loader } from "../../../../loader";
-import { useRenameCSS } from "../../../../theme/Theme";
-import { TFunction } from "../../../../util/i18n/i18n.types";
+import type { TFunction } from "../../../../utils/i18n/i18n.types";
 
 interface ItemActionFieldProps {
   isLoading: boolean;
@@ -23,13 +22,11 @@ function ItemActionField({
   button,
   translate,
 }: ItemActionFieldProps) {
-  const { cn } = useRenameCSS();
-
   if (isLoading) {
     return (
       <>
         <Spacer />
-        <div className={cn("navds-file-item__icon--loading")}>
+        <div className="aksel-file-item__icon--loading">
           <Loader size="medium" />
         </div>
       </>
@@ -56,7 +53,7 @@ function ItemActionField({
       <Spacer />
       <Button
         id={button.id}
-        className={cn("navds-file-item__button")}
+        className="aksel-file-item__button"
         type="button"
         variant="tertiary-neutral"
         onClick={button.onClick}

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

@@ -1,7 +1,6 @@
 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";
@@ -11,13 +10,12 @@ interface Props {
 }
 
 const ItemButton = ({ action, onClick, id, title }: Props) => {
-  const { cn } = useRenameCSS();
   const Icon = action === "delete" ? TrashIcon : ArrowsCirclepathIcon;
 
   return (
     <Button
       id={id}
-      className={cn("navds-file-item__button")}
+      className="aksel-file-item__button"
       type="button"
       variant="tertiary-neutral"
       onClick={onClick}

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

@@ -1,6 +1,6 @@
 import React from "react";
-import { useRenameCSS } from "../../../../theme/Theme";
-import { LinkAnchor } from "../../../../util/link-anchor";
+import { useThemeInternal } from "../../../../theme/Theme";
+import { LinkAnchor } from "../../../../utils/components/link-anchor";
 import { FileItem } from "./Item.types";
 import ItemIcon from "./ItemIcon";
 import { downloadFile } from "./utils/download-file";
@@ -13,14 +13,15 @@ interface Props {
 }
 
 const ItemHeader = ({ file, href, onClick }: Props) => {
-  const { cn } = useRenameCSS();
+  const ctx = useThemeInternal();
 
   if (onClick && href) {
     return (
       <LinkAnchor
         href={href}
         onClick={onClick}
-        className={cn("navds-file-item__link")}
+        className="aksel-file-item__link"
+        data-color={ctx.color}
       >
         <ItemIcon file={file} />
         {file.name}
@@ -36,7 +37,8 @@ const ItemHeader = ({ file, href, onClick }: Props) => {
           event.preventDefault();
           onClick(event);
         }}
-        className={cn("navds-file-item__link")}
+        className="aksel-file-item__link"
+        data-color={ctx.color}
       >
         <ItemIcon file={file} />
         {file.name}
@@ -46,7 +48,11 @@ const ItemHeader = ({ file, href, onClick }: Props) => {
 
   if (href) {
     return (
-      <LinkAnchor href={href} className={cn("navds-file-item__link")}>
+      <LinkAnchor
+        href={href}
+        className="aksel-file-item__link"
+        data-color={ctx.color}
+      >
         <ItemIcon file={file} />
         {file.name}
       </LinkAnchor>
@@ -62,7 +68,8 @@ const ItemHeader = ({ file, href, onClick }: Props) => {
           event.preventDefault();
           downloadFile(file);
         }}
-        className={cn("navds-file-item__link")}
+        className="aksel-file-item__link"
+        data-color={ctx.color}
       >
         <ItemIcon file={file} />
         {file.name}
@@ -71,7 +78,7 @@ const ItemHeader = ({ file, href, onClick }: Props) => {
   }
 
   return (
-    <span className={cn("navds-file-item__link")}>
+    <span className="aksel-file-item__link">
       <ItemIcon file={file} />
       {file.name}
     </span>

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

@@ -8,7 +8,6 @@ import {
   FileTextIcon,
   FileWordIcon,
 } from "@navikt/aksel-icons";
-import { useRenameCSS } from "../../../../theme/Theme";
 import { FileItem } from "./Item.types";
 
 interface ItemIconProps {
@@ -21,9 +20,8 @@ const iconProps = {
 };
 
 function ItemIcon({ file }: ItemIconProps) {
-  const { cn } = useRenameCSS();
   return (
-    <div className={cn("navds-file-item__icon")}>
+    <div className="aksel-file-item__icon">
       <Icon file={file} />
     </div>
   );

package/src/form/file-upload/useFileUpload.ts

@@ -1,5 +1,5 @@
 import { useRef } from "react";
-import { useMergeRefs } from "../../util/hooks";
+import { useMergeRefs } from "../../utils/hooks";
 import { FileUploadBaseProps } from "./FileUpload.types";
 import { validateFiles } from "./utils/validate-files";
 

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

@@ -5,10 +5,9 @@ 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";
+import { useI18n } from "../../utils/i18n/i18n.hooks";
+import { ComponentTranslation } from "../../utils/i18n/i18n.types";
 
 export interface FormProgressProps
   extends React.HTMLAttributes<HTMLDivElement> {
@@ -92,7 +91,6 @@ export const FormProgress = forwardRef<HTMLDivElement, FormProgressProps>(
     }: FormProgressProps,
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     const translate = useI18n("FormProgress", translations);
 
     return (
@@ -101,7 +99,7 @@ export const FormProgress = forwardRef<HTMLDivElement, FormProgressProps>(
           aria-hidden
           value={activeStep}
           valueMax={totalSteps}
-          className={cn("navds-form-progress__bar")}
+          className="aksel-form-progress__bar"
         />
 
         <Collapsible lazy open={open} onOpenChange={onOpenChange}>
@@ -113,24 +111,22 @@ export const FormProgress = forwardRef<HTMLDivElement, FormProgressProps>(
               <Button
                 variant="tertiary"
                 size="small"
-                className={cn("navds-form-progress__button")}
+                className="aksel-form-progress__button"
                 icon={<ChevronDownIcon aria-hidden />}
               >
-                <span className={cn("navds-form-progress__btn-txt-hide")}>
+                <span className="aksel-form-progress__btn-txt-hide">
                   {translate("hideAllSteps")}
                 </span>
-                <span className={cn("navds-form-progress__btn-txt-show")}>
+                <span className="aksel-form-progress__btn-txt-show">
                   {translate("showAllSteps")}
                 </span>
               </Button>
             </Collapsible.Trigger>
           </HStack>
 
-          <Collapsible.Content
-            className={cn("navds-form-progress__collapsible")}
-          >
-            <div className={cn("navds-form-progress__collapsible-content")}>
-              <div className={cn("navds-form-progress__stepper")}>
+          <Collapsible.Content className="aksel-form-progress__collapsible">
+            <div className="aksel-form-progress__collapsible-content">
+              <div className="aksel-form-progress__stepper">
                 <Stepper
                   activeStep={activeStep}
                   onStepChange={onStepChange}

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

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes, forwardRef } from "react";
-import { useRenameCSS } from "../../theme/Theme";
+import { cl } from "../../utils/helpers";
 import FormSummaryAnswer from "./FormSummaryAnswer";
 import FormSummaryAnswers from "./FormSummaryAnswers";
 import FormSummaryEditLink from "./FormSummaryEditLink";
@@ -81,10 +81,8 @@ 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={cn("navds-form-summary", className)}>
+      <div ref={ref} {...rest} className={cl("aksel-form-summary", className)}>
         {children}
       </div>
     );

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

@@ -1,5 +1,6 @@
 import React from "react";
-import { useRenameCSS, useThemeInternal } from "../../theme/Theme";
+import { useThemeInternal } from "../../theme/Theme";
+import { cl } from "../../utils/helpers";
 
 export interface FormSummaryAnswerProps
   extends React.HTMLAttributes<HTMLDivElement> {
@@ -15,7 +16,6 @@ export const FormSummaryAnswer = React.forwardRef<
   HTMLDivElement,
   FormSummaryAnswerProps
 >(({ children, className, ...rest }, ref) => {
-  const { cn } = useRenameCSS();
   const ctx = useThemeInternal();
 
   return (
@@ -23,7 +23,7 @@ export const FormSummaryAnswer = React.forwardRef<
       ref={ref}
       data-color={ctx.color}
       {...rest}
-      className={cn("navds-form-summary__answer", className)}
+      className={cl("aksel-form-summary__answer", className)}
     >
       {children}
     </div>

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

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../theme/Theme";
+import { cl } from "../../utils/helpers";
 
 const FormSummaryAnswersContext = React.createContext(false);
 
@@ -15,8 +15,6 @@ export const FormSummaryAnswers = forwardRef<
   HTMLDListElement,
   FormSummaryAnswersProps
 >(({ children, className, ...rest }: FormSummaryAnswersProps, ref) => {
-  const { cn } = useRenameCSS();
-
   const isNested = React.useContext(FormSummaryAnswersContext);
 
   return (
@@ -25,7 +23,7 @@ export const FormSummaryAnswers = forwardRef<
         ref={ref}
         data-color={isNested ? "info" : undefined}
         {...rest}
-        className={cn("navds-form-summary__answers", className)}
+        className={cl("aksel-form-summary__answers", className)}
       >
         {children}
       </dl>

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

@@ -1,10 +1,10 @@
 import React, { forwardRef } from "react";
 import { PencilIcon } from "@navikt/aksel-icons";
 import { Link } from "../../link";
-import { useRenameCSS } from "../../theme/Theme";
-import { CompositionWarning } from "../../util/composition-warning";
-import { useI18n } from "../../util/i18n/i18n.hooks";
-import { OverridableComponent } from "../../util/types";
+import type { OverridableComponent } from "../../utils-external";
+import { CompositionWarning } from "../../utils/components/composition-warning";
+import { cl } from "../../utils/helpers";
+import { useI18n } from "../../utils/i18n/i18n.hooks";
 
 export interface FormSummaryEditProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
@@ -25,8 +25,6 @@ export const FormSummaryEditLink: OverridableComponent<
   FormSummaryEditProps,
   HTMLAnchorElement
 > = forwardRef(({ children, className, as = "a", ...rest }, ref) => {
-  const { cn } = useRenameCSS();
-
   const translate = useI18n("FormSummary");
 
   return (
@@ -38,7 +36,7 @@ export const FormSummaryEditLink: OverridableComponent<
         ref={ref}
         as={as}
         {...rest}
-        className={cn("navds-form-summary__edit", className)}
+        className={cl("aksel-form-summary__edit", className)}
       >
         <PencilIcon aria-hidden fontSize="1.5rem" />
         {children || translate("editAnswer")}

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

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../theme/Theme";
+import { cl } from "../../utils/helpers";
 
 /**
  * Footer slot for actions in `FormSummary`.
@@ -16,13 +16,11 @@ export const FormSummaryFooter = forwardRef<
   HTMLDivElement,
   FormSummaryFooterProps
 >(({ children, className, ...rest }, ref) => {
-  const { cn } = useRenameCSS();
-
   return (
     <div
       ref={ref}
       {...rest}
-      className={cn("navds-form-summary__footer", className)}
+      className={cl("aksel-form-summary__footer", className)}
     >
       {children}
     </div>

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

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../theme/Theme";
-import { CompositionWarning } from "../../util/composition-warning";
+import { CompositionWarning } from "../../utils/components/composition-warning";
+import { cl } from "../../utils/helpers";
 
 export interface FormSummaryHeaderProps
   extends React.HTMLAttributes<HTMLDivElement> {
@@ -14,14 +14,12 @@ export const FormSummaryHeader = forwardRef<
   HTMLDivElement,
   FormSummaryHeaderProps
 >(({ children, className, ...rest }: FormSummaryHeaderProps, ref) => {
-  const { cn } = useRenameCSS();
-
   return (
     <CompositionWarning.Root name="FormSummary.Header">
       <div
         ref={ref}
         {...rest}
-        className={cn("navds-form-summary__header", className)}
+        className={cl("aksel-form-summary__header", className)}
       >
         {children}
       </div>

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

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../theme/Theme";
 import { BodyLong } from "../../typography";
+import { cl } from "../../utils/helpers";
 
 export interface FormSummaryValueProps
   extends React.HTMLAttributes<HTMLDivElement> {
@@ -11,14 +11,12 @@ export const FormSummaryValue = forwardRef<
   HTMLDivElement,
   FormSummaryValueProps
 >(({ children, className, ...rest }, ref) => {
-  const { cn } = useRenameCSS();
-
   return (
     <BodyLong
       ref={ref}
       {...rest}
       as="dd"
-      className={cn("navds-form-summary__value", className)}
+      className={cl("aksel-form-summary__value", className)}
     >
       {children}
     </BodyLong>

package/src/form/radio/Radio.tsx

@@ -1,22 +1,20 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../theme/Theme";
 import { BodyShort } from "../../typography";
-import { omit, useId } from "../../util";
+import { omit, useId } from "../../utils-external";
+import { cl } from "../../utils/helpers";
 import { RadioProps } from "./types";
 import { useRadio } from "./useRadio";
 
 export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
-  const { cn } = useRenameCSS();
   const { inputProps, size, hasError, readOnly } = useRadio(props);
   const descriptionId = useId();
 
   return (
     <div
-      className={cn(props.className, "navds-radio", `navds-radio--${size}`, {
-        "navds-radio--error": hasError,
-        "navds-radio--disabled": inputProps.disabled,
-        "navds-radio--readonly": readOnly,
+      className={cl(props.className, "aksel-radio", `aksel-radio--${size}`, {
+        "aksel-radio--error": hasError,
+        "aksel-radio--disabled": inputProps.disabled,
+        "aksel-radio--readonly": readOnly,
       })}
       data-color={hasError ? "danger" : props["data-color"]}
     >
@@ -28,13 +26,13 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
             [descriptionId]: props.description,
           }) || undefined
         }
-        className={cn("navds-radio__input")}
+        className="aksel-radio__input"
         ref={ref}
       />
       <BodyShort
         as="label"
         htmlFor={inputProps.id}
-        className={cn("navds-radio__label")}
+        className="aksel-radio__label"
         size={size}
       >
         {props.children}
@@ -43,9 +41,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
         <BodyShort
           id={descriptionId}
           size={size}
-          className={cn(
-            "navds-form-field__subdescription navds-radio__description",
-          )}
+          className="aksel-form-field__subdescription aksel-radio__description"
         >
           {props.description}
         </BodyShort>

package/src/form/radio/RadioGroup.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, useContext } from "react";
-import { useRenameCSS } from "../../theme/Theme";
-import { useId } from "../../util/hooks";
+import { useId } from "../../utils-external";
+import { cl } from "../../utils/helpers";
 import { Fieldset, FieldsetProps } from "../fieldset";
 import { FieldsetContext } from "../fieldset/context";
 
@@ -71,7 +71,6 @@ export const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     const fieldset = useContext(FieldsetContext);
 
     const nameId = useId();
@@ -81,10 +80,10 @@ export const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(
         {...rest}
         readOnly={readOnly}
         ref={ref}
-        className={cn(
+        className={cl(
           className,
-          "navds-radio-group",
-          `navds-radio-group--${rest.size ?? fieldset?.size ?? "medium"}`,
+          "aksel-radio-group",
+          `aksel-radio-group--${rest.size ?? fieldset?.size ?? "medium"}`,
         )}
         nativeReadOnly={false}
       >
@@ -97,7 +96,7 @@ export const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(
             required,
           }}
         >
-          <div className={cn("navds-radio-buttons")}>{children}</div>
+          <div className="aksel-radio-buttons">{children}</div>
         </RadioGroupContext.Provider>
       </Fieldset>
     );

package/src/form/radio/useRadio.ts

@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { omit } from "../../util";
+import { omit } from "../../utils-external";
 import { useFormField } from "../useFormField";
 import { RadioGroupContext } from "./RadioGroup";
 import { RadioProps } from "./types";