@navikt/ds-react 7.40.0 → 8.0.0

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

@@ -0,0 +1,89 @@
+import React, { MouseEvent } from "react";
+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";
+
+interface ItemActionFieldProps {
+  isLoading: boolean;
+  button?:
+    | {
+        action: "delete" | "retry";
+        onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+        id?: string;
+      }
+    | React.ReactNode;
+  translate: TFunction<"FileUpload">;
+}
+
+function ItemActionField({
+  isLoading,
+  button,
+  translate,
+}: ItemActionFieldProps) {
+  const { cn } = useRenameCSS();
+
+  if (isLoading) {
+    return (
+      <>
+        <Spacer />
+        <div className={cn("navds-file-item__icon--loading")}>
+          <Loader size="medium" />
+        </div>
+      </>
+    );
+  }
+
+  if (!button) {
+    return null;
+  }
+
+  if (isCustomButton(button)) {
+    return (
+      <>
+        <Spacer />
+        {button}
+      </>
+    );
+  }
+
+  const Icon = button.action === "delete" ? TrashIcon : ArrowsCirclepathIcon;
+
+  return (
+    <>
+      <Spacer />
+      <Button
+        id={button.id}
+        className={cn("navds-file-item__button")}
+        type="button"
+        variant="tertiary-neutral"
+        onClick={button.onClick}
+        icon={
+          <Icon
+            title={translate(
+              button.action === "retry"
+                ? "item.retryButtonTitle"
+                : "item.deleteButtonTitle",
+            )}
+          />
+        }
+      />
+    </>
+  );
+}
+
+function isCustomButton(
+  button:
+    | {
+        action: "delete" | "retry";
+        onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+        id?: string;
+      }
+    | React.ReactNode,
+): button is React.ReactNode {
+  return React.isValidElement(button);
+}
+
+export { ItemActionField };

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

@@ -0,0 +1,81 @@
+import React from "react";
+import { useRenameCSS } 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 { cn } = useRenameCSS();
+
+  if (onClick && href) {
+    return (
+      <LinkAnchor
+        href={href}
+        onClick={onClick}
+        className={cn("navds-file-item__link")}
+      >
+        <ItemIcon file={file} />
+        {file.name}
+      </LinkAnchor>
+    );
+  }
+
+  if (onClick) {
+    return (
+      <LinkAnchor
+        href="#"
+        onClick={(event) => {
+          event.preventDefault();
+          onClick(event);
+        }}
+        className={cn("navds-file-item__link")}
+      >
+        <ItemIcon file={file} />
+        {file.name}
+      </LinkAnchor>
+    );
+  }
+
+  if (href) {
+    return (
+      <LinkAnchor href={href} className={cn("navds-file-item__link")}>
+        <ItemIcon file={file} />
+        {file.name}
+      </LinkAnchor>
+    );
+  }
+
+  if (isNativeFile(file)) {
+    return (
+      <LinkAnchor
+        href="#"
+        download={file.name}
+        onClick={(event) => {
+          event.preventDefault();
+          downloadFile(file);
+        }}
+        className={cn("navds-file-item__link")}
+      >
+        <ItemIcon file={file} />
+        {file.name}
+      </LinkAnchor>
+    );
+  }
+
+  return (
+    <span className={cn("navds-file-item__link")}>
+      <ItemIcon file={file} />
+      {file.name}
+    </span>
+  );
+};
+
+export { ItemHeader };

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

@@ -7,16 +7,12 @@ 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,25 +20,8 @@ const iconProps = {
   "aria-hidden": true,
 };
 
-function ItemIcon({ isLoading, file, showError }: ItemIconProps) {
+function ItemIcon({ file }: 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>
-    );
-  }
   return (
     <div className={cn("navds-file-item__icon")}>
       <Icon file={file} />

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { useRenameCSS } from "../../theme/Theme";
+import { useRenameCSS, useThemeInternal } from "../../theme/Theme";
 
 export interface FormSummaryAnswerProps
   extends React.HTMLAttributes<HTMLDivElement> {
@@ -16,10 +16,12 @@ export const FormSummaryAnswer = React.forwardRef<
   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)}
     >

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

@@ -1,6 +1,8 @@
 import React, { forwardRef } from "react";
 import { useRenameCSS } from "../../theme/Theme";
 
+const FormSummaryAnswersContext = React.createContext(false);
+
 export interface FormSummaryAnswersProps
   extends React.HTMLAttributes<HTMLDListElement> {
   /**
@@ -12,29 +14,23 @@ 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 { cn } = useRenameCSS();
+
+  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)}
       >
         {children}
       </dl>
-    );
-  },
-);
+    </FormSummaryAnswersContext.Provider>
+  );
+});
 
 export default FormSummaryAnswers;

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

@@ -21,7 +21,6 @@ export const FormSummaryFooter = forwardRef<
   return (
     <div
       ref={ref}
-      data-color="info"
       {...rest}
       className={cn("navds-form-summary__footer", className)}
     >

package/src/form/radio/Radio.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { useRenameCSS, useThemeInternal } from "../../theme/Theme";
+import { useRenameCSS } from "../../theme/Theme";
 import { BodyShort } from "../../typography";
 import { omit, useId } from "../../util";
 import { RadioProps } from "./types";
@@ -10,51 +10,6 @@ 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
@@ -67,28 +22,34 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
     >
       <input
         {...omit(props, ["children", "size", "description", "readOnly"])}
-        {...omit(inputProps, ["aria-invalid"])}
+        {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
+        aria-describedby={
+          cl(inputProps["aria-describedby"], {
+            [descriptionId]: props.description,
+          }) || undefined
+        }
         className={cn("navds-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>
+      <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",
           )}
-        </span>
-      </label>
+        >
+          {props.description}
+        </BodyShort>
+      )}
     </div>
   );
 });

package/src/form/search/Search.tsx

@@ -6,8 +6,10 @@ import React, {
   useState,
 } from "react";
 import { MagnifyingGlassIcon, XMarkIcon } from "@navikt/aksel-icons";
+import type { AkselStatusColorRole } from "@navikt/ds-tokens/types";
 import { Button } from "../../button";
-import { useRenameCSS, useThemeInternal } from "../../theme/Theme";
+import { useRenameCSS } from "../../theme/Theme";
+import { AkselColor } from "../../types";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
 import { omit } from "../../util";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
@@ -74,6 +76,10 @@ export interface SearchProps
    * HTML size attribute. Specifies the width of the input, in characters.
    */
   htmlSize?: number | string;
+  /**
+   * @private
+   */
+  "data-color"?: Exclude<AkselColor, AkselStatusColorRole>;
 }
 
 interface SearchComponent
@@ -269,10 +275,9 @@ function ClearButton({
 }: SearchClearButtonProps) {
   const { cn } = useRenameCSS();
 
-  const themeContext = useThemeInternal();
   const translate = useI18n("Search");
 
-  return themeContext?.isDarkside ? (
+  return (
     <Button
       className={cn("navds-search__button-clear")}
       variant="tertiary"
@@ -283,17 +288,6 @@ function ClearButton({
       onClick={(event) => handleClear({ trigger: "Click", event })}
       type="button"
     />
-  ) : (
-    <button
-      type="button"
-      onClick={(event) => handleClear({ trigger: "Click", event })}
-      className={cn("navds-search__button-clear")}
-    >
-      <span className={cn("navds-sr-only")}>
-        {clearButtonLabel || translate("clear")}
-      </span>
-      <XMarkIcon aria-hidden />
-    </button>
   );
 }
 

package/src/guide-panel/GuidePanel.tsx

@@ -1,7 +1,6 @@
 import React, { HTMLAttributes, forwardRef } from "react";
 import { useRenameCSS, useThemeInternal } from "../theme/Theme";
-import { DefaultIllustration } from "./Illustration";
-import { DarksideGudiepanelIllustration } from "./Illustration.darkside";
+import { GudiepanelIllustration } from "./Illustration";
 
 export interface GuidePanelProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -54,55 +53,43 @@ export const GuidePanel = forwardRef<HTMLDivElement, GuidePanelProps>(
         data-color={color}
         {...rest}
         ref={ref}
-        className={cn("navds-guide-panel", className, {
-          "navds-guide-panel--poster": poster === true,
-          "navds-guide-panel--not-poster": poster === false,
-          "navds-guide-panel--responsive-poster": poster === undefined,
-        })}
+        className={cn("navds-guide-panel", className)}
         data-responsive={poster === undefined}
         data-poster={poster}
       >
         <div className={cn("navds-guide")}>
-          {illustration ??
-            (themeContext?.isDarkside ? (
-              <DarksideGudiepanelIllustration />
-            ) : (
-              <DefaultIllustration />
-            ))}
+          {illustration ?? <GudiepanelIllustration />}
         </div>
         <div className={cn("navds-guide-panel__content")}>
-          {themeContext?.isDarkside && (
-            <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")}
-            >
-              <path
-                d="M8.74229e-08 22L0 20L33 20V22L8.74229e-08 22Z"
-                fill="var(--ax-bg-raised)"
-              />
-              <path
-                d="M31 20.0001L2 20.0001C2.09817 10.0296 3 7.00011 6 2.00011C8 12.5001 20 20.0001 31 20.0001Z"
-                fill="var(--ax-bg-raised)"
-              />
-              <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M0 20C-2.87106e-10 19.9934 3.21047e-05 19.987 9.68646e-05 19.9804C0.0494722 14.9659 0.299239 11.5341 0.964025 8.68212C1.64231 5.77217 2.72947 3.56367 4.28501 0.971094C4.71185 0.259692 5.53358 -0.114327 6.35038 0.0310157C7.16718 0.176359 7.80944 0.810884 7.96467 1.62586C8.84145 6.22896 11.9453 10.3172 16.2599 13.2908C20.5715 16.2623 25.9294 18.0001 31 18.0001C32.1046 18.0001 33 18.8954 33 20L0 20ZM6.755 4.70521C8.97688 10.7068 14.4934 15.469 20.8803 18.0001C24.1345 19.2897 27.6146 20.0001 31 20.0001L2 20.0001C2.00689 19.3003 2.01774 18.6346 2.033 18.0001C2.19625 11.2107 2.86405 7.98363 4.58479 4.54371C4.9944 3.72487 5.46367 2.89399 6 2.00011C6.17639 2.92619 6.43058 3.82889 6.755 4.70521Z"
-                fill="var(--ax-border-default)"
-              />
-            </svg>
-          )}
-          {themeContext?.isDarkside ? (
-            <div className={cn("navds-guide-panel__content-inner")}>
-              {children}
-            </div>
-          ) : (
-            children
-          )}
+          <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")}
+          >
+            <path
+              d="M8.74229e-08 22L0 20L33 20V22L8.74229e-08 22Z"
+              fill="var(--ax-bg-raised)"
+            />
+            <path
+              d="M31 20.0001L2 20.0001C2.09817 10.0296 3 7.00011 6 2.00011C8 12.5001 20 20.0001 31 20.0001Z"
+              fill="var(--ax-bg-raised)"
+            />
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M0 20C-2.87106e-10 19.9934 3.21047e-05 19.987 9.68646e-05 19.9804C0.0494722 14.9659 0.299239 11.5341 0.964025 8.68212C1.64231 5.77217 2.72947 3.56367 4.28501 0.971094C4.71185 0.259692 5.53358 -0.114327 6.35038 0.0310157C7.16718 0.176359 7.80944 0.810884 7.96467 1.62586C8.84145 6.22896 11.9453 10.3172 16.2599 13.2908C20.5715 16.2623 25.9294 18.0001 31 18.0001C32.1046 18.0001 33 18.8954 33 20L0 20ZM6.755 4.70521C8.97688 10.7068 14.4934 15.469 20.8803 18.0001C24.1345 19.2897 27.6146 20.0001 31 20.0001L2 20.0001C2.00689 19.3003 2.01774 18.6346 2.033 18.0001C2.19625 11.2107 2.86405 7.98363 4.58479 4.54371C4.9944 3.72487 5.46367 2.89399 6 2.00011C6.17639 2.92619 6.43058 3.82889 6.755 4.70521Z"
+              fill="var(--ax-border-default)"
+            />
+          </svg>
+          <div
+            className={cn("navds-guide-panel__content-inner")}
+            data-color={themeContext?.color}
+          >
+            {children}
+          </div>
         </div>
       </div>
     );