@navikt/ds-react 7.40.0 → 8.0.1

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

@@ -0,0 +1,88 @@
+import React from "react";
+import { useThemeInternal } from "../../../../theme/Theme";
+import { LinkAnchor } from "../../../../util/link-anchor";
+import { FileItem } from "./Item.types";
+import ItemIcon from "./ItemIcon";
+import { downloadFile } from "./utils/download-file";
+import { isNativeFile } from "./utils/file-type-checker";
+
+interface Props {
+  file: FileItem;
+  href?: string;
+  onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+}
+
+const ItemHeader = ({ file, href, onClick }: Props) => {
+  const ctx = useThemeInternal();
+
+  if (onClick && href) {
+    return (
+      <LinkAnchor
+        href={href}
+        onClick={onClick}
+        className="aksel-file-item__link"
+        data-color={ctx.color}
+      >
+        <ItemIcon file={file} />
+        {file.name}
+      </LinkAnchor>
+    );
+  }
+
+  if (onClick) {
+    return (
+      <LinkAnchor
+        href="#"
+        onClick={(event) => {
+          event.preventDefault();
+          onClick(event);
+        }}
+        className="aksel-file-item__link"
+        data-color={ctx.color}
+      >
+        <ItemIcon file={file} />
+        {file.name}
+      </LinkAnchor>
+    );
+  }
+
+  if (href) {
+    return (
+      <LinkAnchor
+        href={href}
+        className="aksel-file-item__link"
+        data-color={ctx.color}
+      >
+        <ItemIcon file={file} />
+        {file.name}
+      </LinkAnchor>
+    );
+  }
+
+  if (isNativeFile(file)) {
+    return (
+      <LinkAnchor
+        href="#"
+        download={file.name}
+        onClick={(event) => {
+          event.preventDefault();
+          downloadFile(file);
+        }}
+        className="aksel-file-item__link"
+        data-color={ctx.color}
+      >
+        <ItemIcon file={file} />
+        {file.name}
+      </LinkAnchor>
+    );
+  }
+
+  return (
+    <span className="aksel-file-item__link">
+      <ItemIcon file={file} />
+      {file.name}
+    </span>
+  );
+};
+
+export { ItemHeader };

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

@@ -7,16 +7,11 @@ import {
   FilePdfIcon,
   FileTextIcon,
   FileWordIcon,
-  FileXMarkIcon,
 } from "@navikt/aksel-icons";
-import { Loader } from "../../../../loader";
-import { useRenameCSS } from "../../../../theme/Theme";
 import { FileItem } from "./Item.types";
 
 interface ItemIconProps {
-  isLoading?: boolean;
   file: FileItem;
-  showError: boolean;
 }
 
 const iconProps = {
@@ -24,27 +19,9 @@ const iconProps = {
   "aria-hidden": true,
 };
 
-function ItemIcon({ isLoading, file, showError }: ItemIconProps) {
-  const { cn } = useRenameCSS();
-  if (isLoading) {
-    return (
-      <div
-        className={cn("navds-file-item__icon navds-file-item__icon--loading")}
-      >
-        <Loader size="large" />
-      </div>
-    );
-  }
-
-  if (showError) {
-    return (
-      <div className={cn("navds-file-item__icon")}>
-        <FileXMarkIcon {...iconProps} />
-      </div>
-    );
-  }
+function ItemIcon({ file }: ItemIconProps) {
   return (
-    <div className={cn("navds-file-item__icon")}>
+    <div className="aksel-file-item__icon">
       <Icon file={file} />
     </div>
   );

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

@@ -5,7 +5,6 @@ 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";
@@ -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 "../../util/className";
 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 } from "../../theme/Theme";
+import { useThemeInternal } from "../../theme/Theme";
+import { cl } from "../../util/className";
 
 export interface FormSummaryAnswerProps
   extends React.HTMLAttributes<HTMLDivElement> {
@@ -15,13 +16,14 @@ export const FormSummaryAnswer = React.forwardRef<
   HTMLDivElement,
   FormSummaryAnswerProps
 >(({ children, className, ...rest }, ref) => {
-  const { cn } = useRenameCSS();
+  const ctx = useThemeInternal();
 
   return (
     <div
       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,7 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../theme/Theme";
+import { cl } from "../../util/className";
+
+const FormSummaryAnswersContext = React.createContext(false);
 
 export interface FormSummaryAnswersProps
   extends React.HTMLAttributes<HTMLDListElement> {
@@ -12,29 +14,21 @@ export interface FormSummaryAnswersProps
 export const FormSummaryAnswers = forwardRef<
   HTMLDListElement,
   FormSummaryAnswersProps
->(
-  (
-    {
-      children,
-      className,
-      "data-color": color = "info",
-      ...rest
-    }: FormSummaryAnswersProps,
-    ref,
-  ) => {
-    const { cn } = useRenameCSS();
+>(({ children, className, ...rest }: FormSummaryAnswersProps, ref) => {
+  const isNested = React.useContext(FormSummaryAnswersContext);
 
-    return (
+  return (
+    <FormSummaryAnswersContext.Provider value>
       <dl
         ref={ref}
-        data-color={color}
+        data-color={isNested ? "info" : undefined}
         {...rest}
-        className={cn("navds-form-summary__answers", className)}
+        className={cl("aksel-form-summary__answers", className)}
       >
         {children}
       </dl>
-    );
-  },
-);
+    </FormSummaryAnswersContext.Provider>
+  );
+});
 
 export default FormSummaryAnswers;

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

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
 import { PencilIcon } from "@navikt/aksel-icons";
 import { Link } from "../../link";
-import { useRenameCSS } from "../../theme/Theme";
+import { cl } from "../../util/className";
 import { CompositionWarning } from "../../util/composition-warning";
 import { useI18n } from "../../util/i18n/i18n.hooks";
 import { OverridableComponent } from "../../util/types";
@@ -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 "../../util/className";
 
 /**
  * Footer slot for actions in `FormSummary`.
@@ -16,14 +16,11 @@ export const FormSummaryFooter = forwardRef<
   HTMLDivElement,
   FormSummaryFooterProps
 >(({ children, className, ...rest }, ref) => {
-  const { cn } = useRenameCSS();
-
   return (
     <div
       ref={ref}
-      data-color="info"
       {...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,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../theme/Theme";
+import { cl } from "../../util/className";
 import { CompositionWarning } from "../../util/composition-warning";
 
 export interface FormSummaryHeaderProps
@@ -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 "../../util/className";
 
 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,94 +1,51 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
-import { useRenameCSS, useThemeInternal } from "../../theme/Theme";
 import { BodyShort } from "../../typography";
 import { omit, useId } from "../../util";
+import { cl } from "../../util/className";
 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();
-  const themeContext = useThemeInternal();
-
-  if (themeContext?.isDarkside) {
-    return (
-      <div
-        className={cn(props.className, "navds-radio", `navds-radio--${size}`, {
-          "navds-radio--error": hasError,
-          "navds-radio--disabled": inputProps.disabled,
-          "navds-radio--readonly": readOnly,
-        })}
-        data-color={hasError ? "danger" : props["data-color"]}
-      >
-        <input
-          {...omit(props, ["children", "size", "description", "readOnly"])}
-          {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
-          aria-describedby={
-            cl(inputProps["aria-describedby"], {
-              [descriptionId]: props.description,
-            }) || undefined
-          }
-          className={cn("navds-radio__input")}
-          ref={ref}
-        />
-        <BodyShort
-          as="label"
-          htmlFor={inputProps.id}
-          className={cn("navds-radio__label")}
-          size={size}
-        >
-          {props.children}
-        </BodyShort>
-        {props.description && (
-          <BodyShort
-            id={descriptionId}
-            size={size}
-            className={cn(
-              "navds-form-field__subdescription navds-radio__description",
-            )}
-          >
-            {props.description}
-          </BodyShort>
-        )}
-      </div>
-    );
-  }
 
   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"]}
     >
       <input
         {...omit(props, ["children", "size", "description", "readOnly"])}
-        {...omit(inputProps, ["aria-invalid"])}
-        className={cn("navds-radio__input")}
+        {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
+        aria-describedby={
+          cl(inputProps["aria-describedby"], {
+            [descriptionId]: props.description,
+          }) || undefined
+        }
+        className="aksel-radio__input"
         ref={ref}
       />
-      <label htmlFor={inputProps.id} className={cn("navds-radio__label")}>
-        <span className={cn("navds-radio__content")}>
-          <BodyShort as="span" size={size}>
-            {props.children}
-          </BodyShort>
-          {props.description && (
-            <BodyShort
-              as="span"
-              size={size}
-              className={cn(
-                "navds-form-field__subdescription navds-radio__description",
-              )}
-            >
-              {props.description}
-            </BodyShort>
-          )}
-        </span>
-      </label>
+      <BodyShort
+        as="label"
+        htmlFor={inputProps.id}
+        className="aksel-radio__label"
+        size={size}
+      >
+        {props.children}
+      </BodyShort>
+      {props.description && (
+        <BodyShort
+          id={descriptionId}
+          size={size}
+          className="aksel-form-field__subdescription aksel-radio__description"
+        >
+          {props.description}
+        </BodyShort>
+      )}
     </div>
   );
 });

package/src/form/radio/RadioGroup.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, useContext } from "react";
-import { useRenameCSS } from "../../theme/Theme";
+import { cl } from "../../util/className";
 import { useId } from "../../util/hooks";
 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>
     );