@navikt/ds-react 6.1.1 → 6.3.0

package/src/form/file-upload/utils/validate-files.test.ts

@@ -0,0 +1,132 @@
+import { validateFiles } from "./validate-files";
+
+const createTxtFile = (name: string = "foo.txt") =>
+  new File(["foo"], name, {
+    type: "text/plain",
+  });
+const createCsvFile = (name: string = "bar.csv") =>
+  new File(["abc,123"], name, {
+    type: "text/csv",
+  });
+
+describe("partitionFiles", () => {
+  test("accepts all files when accept parameter is undefined", () => {
+    const files = [createTxtFile(), createCsvFile()];
+    const {
+      partitionedFiles: { accepted, rejected },
+    } = validateFiles(files);
+
+    expect(accepted.length).toBe(2);
+    expect(rejected.length).toBe(0);
+  });
+
+  test("accepts all files when accept parameter is empty", () => {
+    const files = [createTxtFile(), createCsvFile()];
+    const {
+      partitionedFiles: { accepted, rejected },
+    } = validateFiles(files, "");
+
+    expect(accepted.length).toBe(2);
+    expect(rejected.length).toBe(0);
+  });
+
+  test("rejects file that does not match accept parameter", () => {
+    const txtFileName = "foo.txt";
+    const csvFileName = "bar.csv";
+    const files = [createTxtFile(txtFileName), createCsvFile(csvFileName)];
+    const {
+      partitionedFiles: { accepted, rejected },
+    } = validateFiles(files, ".txt");
+
+    expect(accepted.length).toBe(1);
+    expect(rejected.length).toBe(1);
+    expect(accepted[0].name).toBe(txtFileName);
+    expect(rejected[0].file.name).toBe(csvFileName);
+  });
+
+  test("rejects file that does not pass validator", () => {
+    const txtFileName = "foo.txt";
+    const csvFileName = "bar.csv";
+    const csvFile = createCsvFile(csvFileName);
+    const txtFile = createTxtFile(txtFileName);
+    const files = [txtFile, csvFile];
+    const validator = (file: File) => {
+      if (file.name === txtFile.name) {
+        return true;
+      }
+      return "custom validation error";
+    };
+    const {
+      partitionedFiles: { accepted, rejected },
+    } = validateFiles(files, undefined, validator);
+
+    expect(accepted.length).toBe(1);
+    expect(rejected.length).toBe(1);
+    expect(accepted[0].name).toBe(txtFileName);
+    expect(rejected[0].file.name).toBe(csvFileName);
+    expect(rejected[0].reasons).toEqual(["custom validation error"]);
+  });
+
+  test("rejects file that passes accept parameter but does not pass validator", () => {
+    const txtFileName = "foo.txt";
+    const csvFileName = "bar.csv";
+    const csvFile = createCsvFile(csvFileName);
+    const txtFile = createTxtFile(txtFileName);
+    const files = [txtFile, csvFile];
+    const validator = (file: File) => {
+      if (file.name === txtFile.name) {
+        return true;
+      }
+      return "custom validation error";
+    };
+    const {
+      partitionedFiles: { accepted, rejected },
+    } = validateFiles(files, ".txt, .csv", validator);
+
+    expect(accepted.length).toBe(1);
+    expect(rejected.length).toBe(1);
+    expect(accepted[0].name).toBe(txtFileName);
+    expect(rejected[0].file.name).toBe(csvFileName);
+  });
+
+  test("rejects file that passes validator but does not pass accept parameter", () => {
+    const txtFileName = "foo.txt";
+    const csvFileName = "bar.csv";
+    const csvFile = createCsvFile(csvFileName);
+    const txtFile = createTxtFile(txtFileName);
+    const files = [txtFile, csvFile];
+    const validator = (file: File) => {
+      if (file.name === csvFile.name || file.name === txtFile.name) {
+        return true;
+      }
+      return "custom validation error";
+    };
+    const {
+      partitionedFiles: { accepted, rejected },
+    } = validateFiles(files, ".csv", validator);
+
+    expect(accepted.length).toBe(1);
+    expect(rejected.length).toBe(1);
+    expect(accepted[0].name).toBe(csvFileName);
+    expect(rejected[0].file.name).toBe(txtFileName);
+    expect(rejected[0].reasons).toEqual(["fileType"]);
+  });
+
+  test("rejects file that is too large", () => {
+    const txtFileName = "foo.txt";
+    const csvFileName = "bar.csv";
+    const csvFile = createCsvFile(csvFileName);
+    const txtFile = createTxtFile(txtFileName);
+    const files = [txtFile, csvFile];
+    const maxSizeInBytes = 5;
+    const {
+      partitionedFiles: { accepted, rejected },
+    } = validateFiles(files, undefined, undefined, maxSizeInBytes);
+
+    expect(accepted.length).toBe(1);
+    expect(rejected.length).toBe(1);
+    expect(accepted[0].name).toBe(txtFileName);
+    expect(rejected[0].file.name).toBe(csvFileName);
+    expect(rejected[0].reasons).toEqual(["fileSize"]);
+  });
+});

package/src/form/file-upload/utils/validate-files.ts

@@ -0,0 +1,62 @@
+import {
+  FileObject,
+  FileUploadBaseProps,
+  FilesPartitioned,
+  fileRejectionReason,
+} from "../FileUpload.types";
+import { isAcceptedFileType } from "./is-accepted-file-type";
+import { isAcceptedSize } from "./is-accepted-size";
+
+export const validateFiles = (
+  files: File[],
+  accept?: string,
+  validator?: FileUploadBaseProps["validator"],
+  maxSizeInBytes: number = -1,
+) => {
+  const allFiles: FileObject[] = [];
+  const accepted: File[] = [];
+  const rejected: FilesPartitioned["rejected"] = [];
+
+  files.forEach((file) => {
+    const acceptedFileType = isAcceptedFileType(file, accept);
+    const acceptedFileSize = isAcceptedSize(file, maxSizeInBytes);
+    const customValidation = validator ? validator(file) : true;
+
+    const reasons: FilesPartitioned["rejected"][0]["reasons"] = [];
+    if (customValidation !== true) {
+      reasons.push(customValidation);
+    }
+
+    if (!acceptedFileType) {
+      reasons.push(fileRejectionReason.FileType);
+    }
+
+    if (!acceptedFileSize) {
+      reasons.push(fileRejectionReason.FileSize);
+    }
+
+    allFiles.push({
+      file,
+      error: reasons.length > 0,
+      reasons,
+    });
+
+    if (reasons.length === 0) {
+      accepted.push(file);
+      return;
+    }
+
+    rejected.push({
+      file,
+      reasons,
+    });
+  });
+
+  return {
+    files: allFiles,
+    partitionedFiles: {
+      accepted,
+      rejected,
+    },
+  };
+};

package/src/form/radio/RadioGroup.tsx

@@ -21,7 +21,7 @@ export interface RadioGroupProps
     "onChange" | "errorPropagation" | "defaultValue"
   > {
   /**
-   * Collection of <Radio />-elements
+   * Collection of `<Radio />`-elements
    */
   children: React.ReactNode;
   /**

package/src/form/search/Search.tsx

@@ -26,8 +26,9 @@ export interface SearchProps
     Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "type"> {
   children?: React.ReactNode;
   /**
-   * Search label
-   * @note Will be hidden by default, is required for accessibility reasons.
+   * Search label.
+   *
+   * Will be hidden by default, is required for accessibility reasons.
    */
   label: React.ReactNode;
   /**

package/src/form/select/Select.tsx

@@ -8,27 +8,27 @@ import { FormFieldProps, useFormField } from "../useFormField";
 
 export interface SelectProps
   extends FormFieldProps,
-    Omit<SelectHTMLAttributes<HTMLSelectElement>, "size"> {
+    Omit<SelectHTMLAttributes<HTMLSelectElement>, "size" | "multiple"> {
   /**
-   * Collection of <option />-elements
+   * Collection of <option />-elements.
    */
   children: React.ReactNode;
   /**
-   * Exposes the HTML size attribute
+   * Exposes the HTML size attribute.
    */
   htmlSize?: number;
   /**
-   * Label for select
+   * Sets inline-style on select wrapper.
    */
-  label: React.ReactNode;
+  style?: React.CSSProperties;
   /**
-   * If enabled shows the label and description for screenreaders only
+   * Label for select.
    */
-  hideLabel?: boolean;
+  label: React.ReactNode;
   /**
-   * Sets inline-style on select wrapper
+   * Shows label and description for screenreaders only.
    */
-  style?: React.CSSProperties;
+  hideLabel?: boolean;
 }
 
 /**

package/src/form/select/select.stories.tsx

@@ -1,36 +1,15 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryFn, StoryObj } from "@storybook/react";
 import React from "react";
-import Select from "./Select";
+import Select, { SelectProps } from "./Select";
 
-export default {
+const meta: Meta<typeof Select> = {
   title: "ds-react/Select",
   component: Select,
-  argTypes: {
-    size: {
-      control: {
-        type: "radio",
-        options: ["medium", "small"],
-      },
-    },
-    description: {
-      type: "string",
-    },
-    error: {
-      type: "string",
-    },
-    hideLabel: {
-      type: "boolean",
-    },
-    disabled: {
-      type: "boolean",
-    },
-  },
   parameters: {
     chromatic: { disable: true },
   },
-} as Meta;
-
-type Story = StoryObj<typeof Select>;
+};
+export default meta;
 
 const content = (
   <>
@@ -40,16 +19,32 @@ const content = (
   </>
 );
 
-export const Default = {
-  render: (props) => {
-    return (
-      <Select {...props} label="Ipsum enim quis culpa">
-        {content}
-      </Select>
-    );
+export const Default: StoryFn<Omit<SelectProps, "children">> = (props) => (
+  <Select {...props}>{content}</Select>
+);
+Default.args = {
+  label: "Ipsum enim quis culpa",
+};
+Default.argTypes = {
+  description: {
+    type: "string",
+  },
+  size: {
+    control: { type: "radio" },
+    options: ["medium", "small"],
+  },
+  error: {
+    type: "string",
+  },
+  hideLabel: {
+    type: "boolean",
+  },
+  disabled: {
+    type: "boolean",
+  },
+  readOnly: {
+    type: "boolean",
   },
-
-  args: {},
 };
 
 export const Small = () => {
@@ -138,12 +133,12 @@ export const Readonly = () => {
   );
 };
 
-export const Chromatic: Story = {
+export const Chromatic: StoryObj<typeof Select> = {
   render: () => (
     <div>
       <div>
         <h2>Default</h2>
-        {Default.render?.({ label: "Ipsum enim quis culpa" })}
+        <Default label="Ipsum enim quis culpa" />
       </div>
       <div>
         <h2>Small</h2>

package/src/form/switch/Switch.tsx

@@ -36,24 +36,24 @@ export interface SwitchProps
   extends Omit<FormFieldProps, "error" | "errorId">,
     Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
   /**
-   * Switch-label
+   * Switch-label.
    */
   children: React.ReactNode;
   /**
-   * If enabled shows the label and description for screenreaders only
+   * If enabled shows the label and description for screenreaders only.
    */
   hideLabel?: boolean;
   /**
-   * Toggles loading state with loader-component on switch
+   * Toggles loading state with loader-component on switch.
    */
   loading?: boolean;
   /**
-   * Positions switch on left/right side of label
+   * Positions switch on left/right side of label.
    * @default "left"
    */
   position?: "left" | "right";
   /**
-   * Adds a description to extend labling of Switch
+   * Adds a description to extend labling of Switch.
    */
   description?: string;
 }

package/src/form/textarea/Textarea.tsx

@@ -17,7 +17,8 @@ export interface TextareaProps
     React.TextareaHTMLAttributes<HTMLTextAreaElement> {
   /**
    * Allowed character-count for content
-   * @note This is just a visual indicator! You will need to handle actual character-limits/validation if needed
+   *
+   * This is just a visual indicator! You will still need to handle actual character-limits/validation if needed.
    */
   maxLength?: number;
   /**
@@ -37,15 +38,15 @@ export interface TextareaProps
    */
   minRows?: number;
   /**
-   * Textarea label
+   * Textarea label.
    */
   label: React.ReactNode;
   /**
-   * If enabled shows the label and description for screenreaders only
+   * If enabled shows the label and description for screenreaders only.
    */
   hideLabel?: boolean;
   /**
-   * Enables resizing of field
+   * Enables resizing of field.
    */
   resize?: boolean | "vertical" | "horizontal";
   /**

package/src/form/useFormField.ts

@@ -5,32 +5,34 @@ import { FieldsetContext } from "./fieldset/context";
 
 export interface FormFieldProps {
   /**
-   * Error message for element
+   * Adds a description to extend labling of the field.
+   * Error message for element.
    */
   error?: React.ReactNode;
   /**
-   * Override internal errorId
+   * Override internal errorId.
    */
   errorId?: string;
   /**
-   * Changes font-size, padding and gaps
+   * Changes font-size, padding and gaps.
    */
   size?: "medium" | "small";
   /**
-   * Disables element
-   * @note Avoid using if possible for accessibility purposes
+   * **Avoid using if possible for accessibility purposes**.
+   *
+   * Disables element.
    */
   disabled?: boolean;
   /**
-   * Adds a description to extend labling of a field
+   * Adds a description to extend labling of a field.
    */
   description?: React.ReactNode;
   /**
-   * Override internal id
+   * Override internal id.
    */
   id?: string;
   /**
-   * Read only-state
+   * Read-only state.
    */
   readOnly?: boolean;
 }

package/src/index.ts

@@ -136,6 +136,20 @@ export { Select, type SelectProps } from "./form/select";
 export { Switch, type SwitchProps } from "./form/switch";
 export { Textarea, type TextareaProps } from "./form/textarea";
 export { TextField, type TextFieldProps } from "./form/textfield";
+export {
+  UNSAFE_FileUpload,
+  type FileUploadDropzoneProps,
+  type FileUploadTriggerProps,
+  type FileObject,
+  type FileRejected,
+  type FileAccepted,
+  type FileRejectedPartitioned,
+  type FilesPartitioned,
+  type FileRejectionReason,
+  type FileUploadItemProps,
+  type FileItem,
+  type FileMetadata,
+} from "./form/file-upload";
 
 /**
  * @deprecated

package/src/internal-header/header.stories.tsx

@@ -2,10 +2,12 @@ import { Meta } from "@storybook/react";
 import React from "react";
 import {
   ChevronDownIcon,
+  CogIcon,
   ExternalLinkIcon,
+  LeaveIcon,
   MenuGridIcon,
 } from "@navikt/aksel-icons";
-import { BodyLong, BodyShort, Detail } from "@navikt/ds-react";
+import { BodyLong, BodyShort, Detail, Spacer } from "@navikt/ds-react";
 import { Dropdown } from "../dropdown";
 import InternalHeader from "./InternalHeader";
 
@@ -102,10 +104,11 @@ export const Default = {
               <Dropdown.Menu.Divider />
               <Dropdown.Menu.List>
                 <Dropdown.Menu.List.Item as="a" href="/#settings">
-                  Innstillinger
+                  Innstillinger <Spacer />{" "}
+                  <CogIcon aria-hidden fontSize="1.5rem" />
                 </Dropdown.Menu.List.Item>
                 <Dropdown.Menu.List.Item onClick={() => console.log("logg ut")}>
-                  Logg ut
+                  Logg ut <Spacer /> <LeaveIcon aria-hidden fontSize="1.5rem" />
                 </Dropdown.Menu.List.Item>
               </Dropdown.Menu.List>
             </Dropdown.Menu>
@@ -180,10 +183,10 @@ export const UserWithMenu = () => (
         <Dropdown.Menu.Divider />
         <Dropdown.Menu.List>
           <Dropdown.Menu.List.Item as="a" href="/#settings">
-            Innstillinger
+            Innstillinger <Spacer /> <CogIcon aria-hidden fontSize="1.5rem" />
           </Dropdown.Menu.List.Item>
           <Dropdown.Menu.List.Item onClick={() => console.log("logg ut")}>
-            Logg ut
+            Logg ut <Spacer /> <LeaveIcon aria-hidden fontSize="1.5rem" />
           </Dropdown.Menu.List.Item>
         </Dropdown.Menu.List>
       </Dropdown.Menu>

package/src/layout/bleed/Bleed.tsx

@@ -9,7 +9,11 @@ export type BleedSpacingBlock = "0" | "px" | SpacingScale;
 
 export interface BleedProps extends React.HTMLAttributes<HTMLDivElement> {
   /** **Negative** horizontal margin around children.
-   *  Accepts a spacing token or an object of spacing tokens for different breakpoints.
+   * Accepts a spacing token or an object of spacing tokens for different breakpoints.
+   *
+   * The `px` value is useful to nudge by just 1px.
+   * The `full` value is used to extend the margin to the full width of the parent.
+   *
    * @example
    * marginInline='4'
    * marginInline='4 5'
@@ -20,6 +24,10 @@ export interface BleedProps extends React.HTMLAttributes<HTMLDivElement> {
   >;
   /** **Negative** vertical margin around children.
    *  Accepts a spacing token or an object of spacing tokens for different breakpoints.
+   *
+   * The `px` value is useful to nudge by just 1px.
+   * This prop does **not** accept the `full` value.
+   *
    * @example
    * marginBlock='4'
    * marginBlock='4 5'

package/src/layout/box/Box.tsx

@@ -13,11 +13,11 @@ import {
 } from "../utilities/types";
 
 export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Background color. Accepts a color token. */
+  /** CSS `background-color` property. Accepts a color token. */
   background?: BackgroundToken;
-  /** Border color. Accepts a color token. */
+  /** CSS `border-color` property. Accepts a color token. */
   borderColor?: BorderColorToken;
-  /** Border radius. Accepts a radius token, or an object of radius tokens for different breakpoints.
+  /** CSS `border-radius` property. Accepts a radius token, or an object of radius tokens for different breakpoints.
    * @example
    * borderRadius='full'
    * borderRadius='0 full large small'
@@ -25,13 +25,13 @@ export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
    */
   borderRadius?: ResponsiveProp<SpaceDelimitedAttribute<BorderRadiiToken>>;
   /**
-   * Border-width. If this is not set there will be no border.
+   * CSS `border-width` property. If this is not set there will be no border.
    * @example
    * borderWidth='2'
    * borderWidth='1 2 3 4'
    */
   borderWidth?: SpaceDelimitedAttribute<"0" | "1" | "2" | "3" | "4" | "5">;
-  /** Spacing around children. Accepts a spacing token or an object of spacing tokens for different breakpoints.
+  /** Padding around children. Accepts a spacing token or an object of spacing tokens for different breakpoints.
    * @example
    * padding='4'
    * padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}

package/src/layout/grid/HGrid.tsx

@@ -6,13 +6,11 @@ import { ResponsiveProp, SpacingScale } from "../utilities/types";
 export interface HGridProps extends HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   /**
-   * Number of columns to display. Can be a number, a string with a unit or tokens for spesific breakpoints.
+   * Number of columns to display. Can be a number, a string with a unit, or tokens for specific breakpoints.
    * Sets `grid-template-columns`, so `fr`, `minmax` etc. works.
    * @example
    * columns={{ sm: 1, md: 1, lg: "1fr auto", xl: "1fr auto"}}
-   * @example
    * columns={3}
-   * @example
    * columns="repeat(3, minmax(0, 1fr))"
    */
   columns?: ResponsiveProp<number | string>;

package/src/layout/page/Page.tsx

@@ -12,7 +12,7 @@ export interface PageProps extends React.HTMLAttributes<HTMLElement> {
   as?: "div" | "body";
   /**
    * Background color. Accepts a color token.
-   * @default bg-default
+   * @default "bg-default"
    */
   background?: keyof typeof bgColors.a | "surface-subtle";
   /**
@@ -25,7 +25,7 @@ export interface PageProps extends React.HTMLAttributes<HTMLElement> {
   footerPosition?: "belowFold";
   /**
    * Adds a standardised padding of 4rem between content and footer
-   * @default block-end
+   * @default "end"
    */
   contentBlockPadding?: "end" | "none";
 }

package/src/layout/responsive/Responsive.tsx

@@ -6,13 +6,11 @@ import { BreakpointsAlias } from "../utilities/types";
 export interface ResponsiveProps extends HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   /**
-   * @example
-   * above='md'
+   * Will show/hide element above breakpoint (inclusive)
    */
   above?: Exclude<BreakpointsAlias, "xs">;
   /**
-   * @example
-   * below='md'
+   * Will show/hide element below breakpoint (inclusive)
    */
   below?: Exclude<BreakpointsAlias, "xs">;
   /**

package/src/layout/stack/Stack.tsx

@@ -7,7 +7,11 @@ import { ResponsiveProp, SpacingScale } from "../utilities/types";
 export interface StackProps extends HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   /**
-   * Justify-content
+   * CSS `justify-content` property.
+   *
+   * @example
+   * justify='center'
+   * justify={{xs: 'start', sm: 'center', md: 'end', lg: 'space-around', xl: 'space-between'}}
    */
   justify?: ResponsiveProp<
     | "start"
@@ -18,22 +22,32 @@ export interface StackProps extends HTMLAttributes<HTMLDivElement> {
     | "space-evenly"
   >;
   /**
-   * Align-items
+   * CSS `align-items` property.
+   *
+   * @example
+   * align='center'
+   * align={{xs: 'start', sm: 'center', md: 'end', lg: 'baseline', xl: 'stretch'}}
    */
   align?: ResponsiveProp<"start" | "center" | "end" | "baseline" | "stretch">;
   /**
-   * flex-wrap
+   * Sets the CSS `flex-wrap` property.
    */
   wrap?: boolean;
   /**
+   * CSS `gap` property.
+   *
    * @example
    * gap='4'
    * gap={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
    */
   gap?: ResponsiveProp<SpacingScale>;
   /**
-   * flex-direction
+   * CSS `flex-direction` property.
    * @default "row"
+   *
+   * @example
+   * direction='row'
+   * direction={{xs: 'row', sm: 'column'}}
    */
   direction?: ResponsiveProp<"row" | "column">;
 }