Ny komponent FileUpload

@navikt/core/css/config/_mappings.js

@@ -120,6 +120,7 @@ const StyleMappings = {
       dependencies: [typoCss],
     },
     { component: "Fieldset", main: formCss, dependencies: [typoCss] },
+    { component: "FileUpload", main: formCss, dependencies: [typoCss] },
     { component: "Grid", main: "grid.css", dependencies: [typoCss] },
     {
       component: "GuidePanel",

@navikt/core/css/form/file-upload.css

@@ -0,0 +1,68 @@
+.navds-fileupload {
+  position: relative;
+  text-align: center
+}
+
+.navds-fileupload__button {
+  position: relative;
+  cursor: pointer;
+  background-color: var(--ac-file-upload-button-bg, var(--a-bg-default));
+  transition: 0.2s ease all;
+}
+
+.navds-fileupload:hover .navds-fileupload__button {
+  background-color: var(--ac-file-upload-action-hover-bg, var(--a-surface-action-subtle-hover));
+}
+
+.navds-fileupload--zone {
+  position: relative;
+  background-color: var(--ac-file-upload-bg, var(--a-surface-subtle));
+  padding: var(--a-spacing-5);
+  border: 1px dashed #0067C5;
+  border-radius: var(--ac-file-upload-border-radius, var(--a-border-radius-medium));
+  color: var(--ac-file-upload-text, var(--a-text-action));
+  transition: 0.2s ease border, 0.2s ease background-color;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.navds-fileupload--zone:hover {
+  background-color: var(--ac-file-upload-action-hover-bg, var(--a-surface-action-subtle-hover));
+}
+
+.navds-fileupload--dragover,
+.navds-fileupload--dragover .navds-fileupload__button {
+  background-color: var(--ac-file-upload-dragover-bg, var(--a-surface-action-subtle-hover));
+}
+
+.navds-fileupload--error:not(:hover):not(.navds-fileupload--dragover) .navds-fileupload__button {
+  box-shadow: inset 0 0 0 2px var(--ac-file-upload-error-border, var(--a-surface-danger))
+}
+
+.navds-fileupload:focus:not(.navds-fileupload--dragover) .navds-fileupload__button,
+.navds-fileupload:focus-within:not(.navds-fileupload--dragover) .navds-fileupload__button {
+  box-shadow: inset 0 0 0 2px
+    var(--ac-button-secondary-focus-border, var(--__ac-button-secondary-focus-border, var(--a-border-action))),
+  var(--a-shadow-focus);
+}
+
+.navds-fileupload__input {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.navds-fileupload__icon {
+  margin-right: 0.1em;
+  cursor: pointer;
+}

@navikt/core/css/form/index.css

@@ -2,6 +2,7 @@
   Order matters; rearrange with care
 */
 @import "fieldset.css";
+@import "file-upload.css";
 @import "form.css";
 @import "error-summary.css";
 @import "confirmation-panel.css";

@navikt/core/css/tokens.json

@@ -357,6 +357,16 @@
     "--ac-error-summary-border": "--a-border-danger",
     "--ac-error-summary-list-dot": "--a-text-action"
   },
+  "fileupload": {
+    "--ac-file-upload-bg": "--a-surface-subtle",
+    "--ac-file-upload-button-bg": "--a-bg-default",
+    "--ac-file-upload-dragover-bg": "--a-surface-action-subtle-hover",
+    "--ac-file-upload-border": "--a-border-action",
+    "--ac-file-upload-error-border": "--a-surface-danger",
+    "--ac-file-upload-action-hover-bg": "--a-surface-action-subtle-hover",
+    "--ac-file-upload-border-radius": "--a-border-radius-medium",
+    "--ac-file-upload-text": "--a-text-action"
+  },
   "checkbox-radio": {
     "--ac-radio-checkbox-bg": "--a-surface-default",
     "--ac-radio-checkbox-border": "--a-border-default",

@navikt/core/react/src/form/file-upload/ButtonVariant.tsx

@@ -0,0 +1,53 @@
+import React, { ChangeEvent } from "react";
+import Wrapper from "./Wrapper";
+import UploadButton from "./UploadButton";
+
+interface Props {
+  label: string;
+  description: string | undefined;
+  className: string | undefined;
+  divRef: React.Ref<HTMLDivElement>;
+  error: string | undefined;
+  inputId: string;
+  multiple: boolean;
+  accept: string | undefined;
+  handleUpload: (event: ChangeEvent<HTMLInputElement>) => void;
+  onDragEnter: () => void;
+  onDragEnd: () => void;
+  isDraggingOver: boolean;
+}
+
+const ButtonVariant = ({
+  label,
+  description,
+  className,
+  onDragEnter,
+  onDragEnd,
+  divRef,
+  error,
+  isDraggingOver,
+  inputId,
+  multiple,
+  accept,
+  handleUpload
+}: Props) => (
+  <Wrapper
+    label={label}
+    description={description}
+    divRef={divRef}
+    className={className}
+    error={error}
+    inputId={inputId}
+    multiple={multiple}
+    accept={accept}
+    handleUpload={handleUpload}
+    onDragEnter={onDragEnter}
+    onDragEnd={onDragEnd}
+    isDraggingOver={isDraggingOver}
+    fullWidth={false}
+  >
+    <UploadButton />
+  </Wrapper>
+)
+
+export default ButtonVariant

@navikt/core/react/src/form/file-upload/FileUpload.tsx

@@ -0,0 +1,151 @@
+import React, { forwardRef, ChangeEvent, useState } from "react";
+import { partitionFiles } from "./partition-files";
+import ButtonVariant from "./ButtonVariant";
+import ZoneVariant from "./ZoneVariant";
+
+export interface OnUploadProps {
+  allFiles: File[],
+  acceptedFiles: File[],
+  rejectedFiles: File[]
+}
+
+export interface FileUploadProps {
+  /**
+   * Changes styling when changed.
+   * The "zone" variant takes up the full
+   * width of its parent, while the "button"
+   * variant takes up width based on its content.
+   * Both styles support opening a file viewer
+   * and drag-and-drop.
+   */
+  variant: "zone" | "button";
+  /**
+   * ID of the input element. Required to properly
+   * connect input element to potential error message.
+   */
+  inputId: string;
+  /**
+   * Text shown to the user.
+   */
+  label: string;
+  /**
+   * Adds a description to extend labling of FileUpload
+   */
+  description?: string;
+  /**
+   * Class name passed to the outermost <div> element.
+   */
+  className?: string;
+  /**
+   * Error message.
+   */
+  error?: string;
+  /**
+   * Indicates if it is possible
+   * to upload multiple files at once.
+   */
+  multiple?: boolean;
+  /**
+   * Indicates which MIME types are
+   * selectable in the file browser.
+   */
+  accept?: string;
+  /**
+   * Sets a ref on the outermost div.
+   */
+  ref?: React.Ref<HTMLDivElement>;
+  /**
+   * Callback triggered on file upload
+   */
+  onUpload({ allFiles, acceptedFiles, rejectedFiles }: OnUploadProps): void;
+  /**
+   * Custom validator that is used to decide
+   * if a file is accepted or rejected.
+   */
+  validator?(file: File): boolean;
+}
+
+/**
+ * A component for uploading files
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/FileUpload)
+ * @see 🏷️ {@link FileUploadProps}
+ * @example
+ * ```jsx
+ * <FileUpload
+ *   onUpload={onUpload}
+ *   variant="button"
+ *   label="Last opp filer her"
+ *   inputId="fileupload-input"
+ * />
+ * ```
+ */
+export const FileUpload = forwardRef<HTMLDivElement, FileUploadProps>(
+  (
+    {
+      onUpload,
+      error,
+      inputId,
+      label,
+      description,
+      className,
+      variant = "zone",
+      multiple = true,
+      accept,
+      validator
+    },
+    ref
+  ) => {
+    const [isDraggingOver, setIsDraggingOver] = useState<boolean>(false)
+
+    const onDragEnter = () => setIsDraggingOver(true)
+    const onDragEnd = () => setIsDraggingOver(false)
+
+    const handleUpload = (event: ChangeEvent<HTMLInputElement>) => {
+      const fileList = event.target.files
+      if (!fileList) {
+        return
+      }
+      const files = Array.from(fileList)
+      const { acceptedFiles, rejectedFiles } = partitionFiles(files, accept, validator)
+
+      onUpload({ allFiles: files, acceptedFiles, rejectedFiles })
+
+      // Resets the value to make it is possible to upload the same file several consecutive times
+      event.target.value = ""
+    }
+
+    if (variant === "button") {
+      return <ButtonVariant
+        label={label}
+        description={description}
+        divRef={ref}
+        className={className}
+        error={error}
+        inputId={inputId}
+        multiple={multiple}
+        accept={accept}
+        handleUpload={handleUpload}
+        onDragEnter={onDragEnter}
+        onDragEnd={onDragEnd}
+        isDraggingOver={isDraggingOver}
+      />
+    } else {
+      return <ZoneVariant
+        label={label}
+        description={description}
+        divRef={ref}
+        className={className}
+        error={error}
+        inputId={inputId}
+        multiple={multiple}
+        accept={accept}
+        handleUpload={handleUpload}
+        onDragEnter={onDragEnter}
+        onDragEnd={onDragEnd}
+        isDraggingOver={isDraggingOver}
+      />
+    }
+  }
+);
+
+export default FileUpload;

@navikt/core/react/src/form/file-upload/UploadButton.tsx

@@ -0,0 +1,11 @@
+import { UploadIcon } from "@navikt/aksel-icons";
+import React from "react";
+
+const UploadButton = () => (
+  <span className="navds-button navds-button--secondary navds-fileupload__button">
+    <UploadIcon fontSize="1.5rem" focusable={false} aria-hidden={true} className="navds-fileupload__icon" />
+    Velg dine filer
+  </span>
+)
+
+export default UploadButton