@navikt/ds-react 6.1.1 → 6.3.0

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

@@ -0,0 +1,142 @@
+import cl from "clsx";
+import React, { HTMLAttributes, forwardRef } from "react";
+import { FileUploadLocaleContextProvider } from "./FileUpload.context";
+import { ComponentTranslation } from "./i18n/i18n.types";
+import Trigger from "./parts/Trigger";
+import Dropzone from "./parts/dropzone/Dropzone";
+import Item from "./parts/item/Item";
+
+interface FileUploadProps extends HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  /**
+   * i18n-API for customizing texts and labels
+   */
+  translations?: ComponentTranslation<"FileUpload">;
+}
+
+interface FileUploadComponent
+  extends React.ForwardRefExoticComponent<
+    FileUploadProps & React.RefAttributes<HTMLDivElement>
+  > {
+  /**
+   * Framed area to drag-n-drop files, upload files with button-click or copy-paste.
+   * @example
+   * Single file
+   * ```jsx
+   * <FileUpload.Dropzone
+   *   label="Last opp fil"
+   *   multiple={false}
+   *   onSelect={onSelect}
+   * />
+   * ```
+   *
+   * @example
+   * Multiple files
+   * ```jsx
+   * <FileUpload.Dropzone
+   *   label="Last opp fil"
+   *   multiple={true}
+   *   onSelect={onSelect}
+   * />
+   * ```
+   *
+   * @example
+   * Error
+   * ```jsx
+   * <FileUpload.Dropzone
+   *   label="Last opp filer"
+   *   onSelect={onSelect}
+   *   error={error}
+   * />
+   * ```
+   */
+  Dropzone: typeof Dropzone;
+
+  /**
+   * Displays a file with status, file size, action and error message.
+   * @example
+   * Single
+   * ```jsx
+   * <FileUpload.Item file={file} status="uploading" />
+   * ```
+   *
+   * @example
+   * Multiple items can be semantically grouped as a list.
+   * ```jsx
+   * <FileUpload>
+   *   <VStack gap="4" as="ul">
+   *     <FileUpload.Item as="li" file={file} />
+   *     <FileUpload.Item as="li" file={file2} />
+   *     <FileUpload.Item as="li" file={file3} status="uploading" />
+   *   </VStack>
+   * </FileUpload>
+   * ```
+   *
+   * @example
+   * Custom file object
+   * ```jsx
+   * <FileUpload.Item file={{ name: "fileName.pdf", size: 1_048_576 }} />
+   * ```
+   *
+   * @example
+   * Error
+   * ```jsx
+   * <FileUpload.Item file={file} error="Something went wrong" />
+   * ```
+   *
+   * @example
+   * Status & actions
+   * ```jsx
+   * <FileUpload.Item file={file} status="uploading" />
+   * <FileUpload.Item file={file} status="downloading" />
+   * <FileUpload.Item file={file} itemAction="retry" onRetry={...} />
+   * <FileUpload.Item file={file} itemAction="delete" onDelete={...} />
+   * ```
+   */
+  Item: typeof Item;
+  /**
+   * Wrapper for a button to trigger file select.
+   * @example
+   * ```jsx
+   * <FileUpload.Trigger onSelect={...}>
+   *   <Button variant="secondary">Last opp filer</Button>
+   * </FileUpload.Trigger>
+   * ```
+   */
+  Trigger: typeof Trigger;
+}
+
+/**
+ * A set of components used to upload and display files.
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/fileupload)
+ * @example Dropzone
+ * ```jsx
+ *  <FileUpload.Dropzone />
+ * ```
+ *
+ * @example
+ * Items
+ * ```jsx
+ * <VStack gap="4" as="ul">
+ *   <FileUpload.Item as="li" file={myFile} />
+ *   <FileUpload.Item as="li" file={mySecondFile} />
+ * </VStack>
+ * ```
+ */
+export const FileUpload = forwardRef<HTMLDivElement, FileUploadProps>(
+  ({ children, className, translations, ...rest }: FileUploadProps, ref) => {
+    return (
+      <FileUploadLocaleContextProvider translations={translations}>
+        <div ref={ref} {...rest} className={cl("navds-file-upload", className)}>
+          {children}
+        </div>
+      </FileUploadLocaleContextProvider>
+    );
+  },
+) as FileUploadComponent;
+
+FileUpload.Dropzone = Dropzone;
+FileUpload.Item = Item;
+FileUpload.Trigger = Trigger;
+
+export default FileUpload;

package/src/form/file-upload/FileUpload.types.ts

@@ -0,0 +1,57 @@
+export const fileRejectionReason = {
+  FileType: "fileType" as const,
+  FileSize: "fileSize" as const,
+};
+
+export type FileRejectionReason =
+  (typeof fileRejectionReason)[keyof typeof fileRejectionReason];
+
+export type FileRejected = {
+  file: File;
+  error: true;
+  reasons: string[];
+};
+export type FileAccepted = { file: File; error: false };
+
+export type FileObject = FileRejected | FileAccepted;
+export type FileRejectedPartitioned = {
+  file: File;
+  reasons: string[];
+};
+export type FilesPartitioned = {
+  accepted: File[];
+  rejected: FileRejectedPartitioned[];
+};
+
+export interface FileUploadBaseProps {
+  /**
+   * Indicates if it is possible to select multiple files at once.
+   * @default true
+   */
+  multiple?: boolean;
+  /**
+   * Indicates which file types to accept.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept
+   */
+  accept?: string;
+  /**
+   * Maximum size of a file to accept
+   */
+  maxSizeInBytes?: number;
+  /**
+   * Custom validator that is used to decide if a file is accepted or rejected.
+   * @return true if the file is accepted, otherwise a string with the reason for rejection
+   */
+  validator?: (file: File) => true | string;
+  /**
+   * Callback triggered on file select
+   */
+  onSelect: (files: FileObject[], partitionedFiles: FilesPartitioned) => void;
+  /**
+   * Disables the dropzone when current >= max, unless `disabled` prop is set to `false`.
+   */
+  fileLimit?: {
+    max: number;
+    current: number;
+  };
+}

package/src/form/file-upload/file-upload-dropzone.stories.tsx

@@ -0,0 +1,123 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { fireEvent, within } from "@storybook/test";
+import React from "react";
+import { ImageIcon } from "@navikt/aksel-icons";
+import {
+  type FileObject,
+  UNSAFE_FileUpload as FileUpload,
+  type FilesPartitioned,
+} from ".";
+
+const meta: Meta<typeof FileUpload.Dropzone> = {
+  title: "ds-react/FileUpload/Dropzone",
+  component: FileUpload.Dropzone,
+  decorators: [
+    (Story) => (
+      <div style={{ width: 500, maxWidth: "100%" }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+const onSelect = (
+  allFiles: FileObject[],
+  { accepted, rejected }: FilesPartitioned,
+) => {
+  alert(
+    `Lastet opp ${allFiles.length} filer. Accepted: ${accepted.length}. Rejected: ${rejected.length}`,
+  );
+};
+
+export const Default: StoryObj<typeof FileUpload.Dropzone> = {
+  render: (props) => <FileUpload.Dropzone {...props} onSelect={console.log} />,
+  args: {
+    label: "Last opp filer",
+    description: "",
+    error: "",
+    multiple: true,
+    accept: "",
+    maxSizeInBytes: 0,
+    fileLimit: { max: 2, current: 1 },
+  },
+  argTypes: {
+    disabled: { control: { type: "boolean" } },
+  },
+  parameters: { chromatic: { disable: true } },
+};
+
+export const States: StoryObj = {
+  render: () => (
+    <div>
+      <h2>Disabled</h2>
+      <FileUpload.Dropzone
+        label="Disabled prop"
+        onSelect={console.log}
+        disabled
+      />
+      <FileUpload.Dropzone
+        label="FileLimit disabled"
+        onSelect={console.log}
+        fileLimit={{ max: 1, current: 2 }}
+      />
+
+      <h2>Error</h2>
+      <FileUpload.Dropzone
+        label="Last opp filer"
+        onSelect={onSelect}
+        error="Du må laste opp en fil"
+        description="Bruk filtype DOC, PPT eller PDF. Maks filstørrelse 10 MB."
+      />
+
+      <h2>Dragging</h2>
+      <FileUpload.Dropzone
+        label="Drag over test"
+        multiple={false}
+        onSelect={onSelect}
+      />
+    </div>
+  ),
+};
+States.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const button = canvas.getByText("Velg fil");
+  fireEvent.dragEnter(button);
+};
+
+export const Translation: StoryObj = {
+  render: () => (
+    <div>
+      <h2>Single file</h2>
+      <FileUpload.Dropzone
+        label="Last opp fil"
+        multiple={false}
+        onSelect={onSelect}
+      />
+
+      <h2>Custom texts</h2>
+      <FileUpload.Dropzone
+        translations={{
+          dragAndDropMultiple: "Dra og slipp bilder i format .png",
+          buttonMultiple: "Velg bilder",
+          disabled: "Du kan ikke laste opp flere bilder",
+        }}
+        label="Last opp bilder"
+        onSelect={console.log}
+        icon={ImageIcon}
+      />
+
+      <h3>Disabled</h3>
+      <FileUpload.Dropzone
+        translations={{
+          disabled: "Du kan ikke laste opp flere bilder",
+        }}
+        label="Last opp bilder"
+        onSelect={console.log}
+        icon={ImageIcon}
+        disabled
+      />
+    </div>
+  ),
+};

package/src/form/file-upload/file-upload-item.stories.tsx

@@ -0,0 +1,136 @@
+import { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { FileItem, UNSAFE_FileUpload as FileUpload } from ".";
+import { VStack } from "../../layout/stack";
+
+const meta: Meta<typeof FileUpload.Item> = {
+  title: "ds-react/FileUpload/Item",
+  component: FileUpload.Item,
+  decorators: [
+    (Story) => (
+      <div style={{ width: 400, maxWidth: "100%" }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+const onDelete = (file: FileItem) => alert(`Delete ${file.name}`);
+const onRetry = (file: FileItem) => alert(`Retry ${file.name}`);
+const fileTxt = new File(["abc".repeat(10000)], "file.txt");
+const filePng = new File(["abc".repeat(10000)], "file.png");
+const filePdf = new File(["abc".repeat(100000)], "file.pdf");
+const fileXlsx = new File(["abc"], "file.xlsx");
+const fileCsv = new File(["abc"], "file.csv");
+const filePptx = new File(["abc"], "file.pptx");
+const fileWebp = new File(["abc"], "file.webp");
+const fileDocx = new File(["abc"], "file.docx");
+
+export const Icons: StoryObj<typeof FileUpload.Item> = {
+  render: () => (
+    <FileUpload>
+      <VStack gap="5" as="ul">
+        <FileUpload.Item file={fileTxt} as="li" />
+        <FileUpload.Item file={filePng} as="li" />
+        <FileUpload.Item file={fileWebp} as="li" />
+        <FileUpload.Item file={filePdf} as="li" />
+        <FileUpload.Item file={fileDocx} as="li" />
+        <FileUpload.Item file={fileDocx} as="li" status="uploading" />
+        <FileUpload.Item file={fileDocx} as="li" status="downloading" />
+        <FileUpload.Item file={fileXlsx} as="li" />
+        <FileUpload.Item file={fileCsv} as="li" />
+        <FileUpload.Item file={filePptx} as="li" />
+      </VStack>
+    </FileUpload>
+  ),
+};
+
+export const States: StoryObj<typeof FileUpload.Item> = {
+  render: () => (
+    <div>
+      <h2>Error</h2>
+      <FileUpload.Item file={fileTxt} error="Plain error" />
+      <h3>error + status</h3>
+      <FileUpload.Item
+        file={fileTxt}
+        error="Error og uploading"
+        status="uploading"
+        onRetry={() => onRetry(fileTxt)}
+        onDelete={() => onDelete(fileTxt)}
+      />
+      <h2>Item Actions</h2>
+      <h3>status + delete</h3>
+      <FileUpload.Item
+        file={fileDocx}
+        onDelete={() => onDelete(fileDocx)}
+        onRetry={() => onRetry(fileDocx)}
+        status="uploading"
+        itemAction="delete"
+      />
+      <h3>status + retry</h3>
+      <FileUpload.Item
+        file={fileDocx}
+        onDelete={() => onDelete(fileDocx)}
+        onRetry={() => onRetry(fileDocx)}
+        status="downloading"
+        itemAction="retry"
+      />
+      <h3>retry</h3>
+      <FileUpload.Item
+        file={fileCsv}
+        onRetry={() => onRetry(fileCsv)}
+        itemAction="retry"
+      />
+      <h3>delete</h3>
+      <FileUpload.Item
+        file={filePptx}
+        onDelete={() => onDelete(filePptx)}
+        itemAction="delete"
+      />
+      <h3>retry + error</h3>
+      <FileUpload.Item
+        file={fileCsv}
+        error="Error og onRetry"
+        onRetry={() => onRetry(fileCsv)}
+        itemAction="retry"
+      />
+      <h3>delete + error</h3>
+      <FileUpload.Item
+        file={filePptx}
+        error="Error og onDelete"
+        onDelete={() => onDelete(filePptx)}
+        itemAction="delete"
+      />
+    </div>
+  ),
+};
+
+export const Download: StoryObj = {
+  render: () => (
+    <VStack gap="5">
+      <FileUpload.Item
+        file={{
+          name: "with onClick.txt",
+          size: 1_048_576,
+        }}
+        onFileClick={() => alert("onFileClick")}
+      />
+      <FileUpload.Item
+        file={{
+          name: "with href.txt",
+          size: 1,
+        }}
+        href="https://www.nav.no"
+      />
+      <FileUpload.Item
+        file={{
+          name: "without href/onFileClick.txt",
+          size: 2_000_000,
+        }}
+      />
+      <FileUpload.Item file={fileTxt} />
+    </VStack>
+  ),
+};

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

@@ -0,0 +1,236 @@
+import { Meta, StoryFn, StoryObj } from "@storybook/react";
+import React, { useEffect, useState } from "react";
+import { UploadIcon } from "@navikt/aksel-icons";
+import { UNSAFE_FileUpload as FileUpload, FileUploadItemProps } from ".";
+import { Alert } from "../../alert";
+import { Button } from "../../button";
+import { VStack } from "../../layout/stack";
+import { Heading } from "../../typography";
+import {
+  FileObject,
+  FileRejected,
+  FileRejectionReason,
+} from "./FileUpload.types";
+
+const meta: Meta<typeof FileUpload.Dropzone> = {
+  title: "ds-react/FileUpload",
+  component: FileUpload.Dropzone,
+};
+
+export default meta;
+
+const MAX_FILES = 3;
+const MAX_SIZE_MB = 1;
+const MAX_SIZE = MAX_SIZE_MB * 1024 * 1024;
+
+const CustomItem = ({
+  index,
+  ...props
+}: FileUploadItemProps & {
+  index: number;
+  onDelete: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}) => {
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setTimeout(
+      () => {
+        setLoading(false);
+      },
+      1700 * index + 1,
+    );
+  }, [index]);
+
+  return (
+    <FileUpload.Item
+      {...props}
+      status={loading ? "uploading" : "idle"}
+      itemAction="delete"
+      as="li"
+    />
+  );
+};
+
+export const Default: StoryFn = () => {
+  const [files, setFiles] = useState<FileObject[]>([]);
+
+  function addFiles(filesToAdd: FileObject[]) {
+    setFiles([...files, ...filesToAdd]);
+  }
+
+  function removeFile(fileToRemove: FileObject) {
+    setFiles(files.filter((file) => file !== fileToRemove));
+  }
+
+  const acceptedFiles = files.filter((file) => !file.error);
+  const rejectedFiles = files.filter((f): f is FileRejected => f.error);
+
+  return (
+    <FileUpload style={{ width: 500, maxWidth: "100%", margin: "0 auto" }}>
+      <VStack gap="6">
+        <FileUpload.Dropzone
+          label="Last opp filer til søknaden"
+          description={`Maks størrelse ${MAX_SIZE_MB} MB`}
+          accept=".doc,.docx,.xls,.xlsx,.pdf"
+          maxSizeInBytes={MAX_SIZE}
+          fileLimit={{ max: MAX_FILES, current: acceptedFiles.length }}
+          onSelect={addFiles}
+        />
+
+        {getListError(acceptedFiles) && (
+          <Alert variant="error">{getListError(acceptedFiles)}</Alert>
+        )}
+
+        {acceptedFiles.length > 0 && (
+          <VStack gap="2">
+            <Heading level="3" size="xsmall">
+              {`Vedlegg (${acceptedFiles.length} av maks ${MAX_FILES})`}
+            </Heading>
+            <VStack as="ul" gap="3">
+              {acceptedFiles.map((file, index) => (
+                <CustomItem
+                  key={index}
+                  index={index}
+                  file={file.file}
+                  onDelete={() => removeFile(file)}
+                />
+              ))}
+            </VStack>
+          </VStack>
+        )}
+        {rejectedFiles.length > 0 && (
+          <VStack gap="2">
+            <Heading level="3" size="xsmall">
+              Vedlegg med feil
+            </Heading>
+            <VStack as="ul" gap="3">
+              {rejectedFiles.map((rejected, index) => (
+                <CustomItem
+                  key={index}
+                  index={index}
+                  file={rejected.file}
+                  error={errors[rejected.reasons[0]]}
+                  onDelete={() => removeFile(rejected)}
+                />
+              ))}
+            </VStack>
+          </VStack>
+        )}
+      </VStack>
+    </FileUpload>
+  );
+};
+Default.parameters = {
+  chromatic: { disable: true },
+  layout: "padded",
+};
+
+const errors: Record<FileRejectionReason, string> = {
+  fileType: "Filformatet støttes ikke",
+  fileSize: `Filen er større enn ${MAX_SIZE_MB} MB`,
+};
+
+function getListError(acceptedFiles: FileObject[]) {
+  const filesTooMany = acceptedFiles.length - MAX_FILES;
+  if (filesTooMany === 1)
+    return "Du har lagt ved en fil for mye, vennligst fjern en fil";
+  if (filesTooMany > 1)
+    return `Du har lagt ved ${filesTooMany} filer for mye, vennligst fjern ${filesTooMany} filer`;
+}
+
+export const Single: StoryFn = () => {
+  const [files, setFiles] = useState<FileObject[]>([]);
+
+  function addFiles(filesToAdd: FileObject[]) {
+    setFiles(filesToAdd);
+  }
+
+  function removeFile() {
+    setFiles([]);
+  }
+
+  return (
+    <VStack gap="6" style={{ width: 500, maxWidth: "100%" }}>
+      <FileUpload.Dropzone
+        label="Last opp fil til søknaden"
+        description={`Maks størrelse ${MAX_SIZE_MB} MB`}
+        accept=".doc,.docx,.xls,.xlsx,.pdf"
+        maxSizeInBytes={MAX_SIZE}
+        fileLimit={{ max: 1, current: files.length }}
+        multiple={false}
+        onSelect={addFiles}
+      />
+      {files.map((file) => (
+        <FileUpload.Item
+          key={file.file.name}
+          file={file.file}
+          error={file.error ? errors[file.reasons[0]] : undefined}
+          onDelete={removeFile}
+        />
+      ))}
+    </VStack>
+  );
+};
+Single.parameters = { chromatic: { disable: true } };
+
+export const Translation = () => (
+  <FileUpload
+    translations={{
+      dropzone: {
+        dragAndDropMultiple: "Dra og slipp bilder i format .png",
+        buttonMultiple: "Velg bilder",
+        or: "eventuelt",
+        disabled: "Du kan ikke laste opp flere bilder",
+      },
+      item: {
+        deleteButtonTitle: "Slett bilde",
+        downloading: "Laster bilde...",
+        uploading: "Laster opp bilde...",
+        retryButtonTitle: "Last opp bilde på nytt",
+      },
+    }}
+  >
+    <VStack gap="3" style={{ width: 500, maxWidth: "100%" }}>
+      <FileUpload.Dropzone label="Last opp bilder" onSelect={console.log} />
+      <FileUpload.Item
+        file={{ name: "eksempel.png", size: 200000 }}
+        onDelete={() => null}
+      />
+      <FileUpload.Item
+        file={{ name: "eksempel.png", size: 200000 }}
+        itemAction="retry"
+        onRetry={() => null}
+      />
+      <FileUpload.Item
+        file={{ name: "eksempel.png", size: 200000 }}
+        status="downloading"
+      />
+      <FileUpload.Item
+        file={{ name: "eksempel.png", size: 200000 }}
+        status="uploading"
+      />
+      <FileUpload.Item
+        file={{ name: "eksempel.png", size: 200000 }}
+        status="uploading"
+        translations={{ uploading: "Sender bilde..." }}
+      />
+    </VStack>
+  </FileUpload>
+);
+
+export const TriggerWithButton: StoryObj<typeof FileUpload.Trigger> = {
+  render: (props) => {
+    return (
+      <FileUpload.Trigger {...props} onSelect={console.log}>
+        <Button variant="secondary" icon={<UploadIcon aria-hidden />}>
+          Last opp filer
+        </Button>
+      </FileUpload.Trigger>
+    );
+  },
+  args: {
+    multiple: true,
+    accept: "",
+    maxSizeInBytes: 0,
+  },
+};