@navikt/ds-react 6.3.1 → 6.3.3

package/esm/form/search/Search.d.ts

@@ -13,43 +13,47 @@ export interface SearchProps extends Omit<FormFieldProps, "readOnly">, Omit<Inpu
     /**
      * Search label.
      *
-     * Will be hidden by default, is required for accessibility reasons.
+     * Will be hidden by default and is required for WCAG compliance.
      */
     label: React.ReactNode;
     /**
-     * Shows label and description for screenreaders-only
+     * Shows label and description for screenreaders only.
      * @default true
      */
     hideLabel?: boolean;
     /**
-     * Callback for value-change in input
+     * Callback for value-change in input.
      */
     onChange?: (value: string) => void;
     /**
-     * Callback for click on clear-button or Escape keydown
+     * Callback for click on clear-button or Escape keydown.
      */
     onClear?: (e: SearchClearEvent) => void;
     /**
-     * Callback for Search-button submit
+     * Callback for Search-button submit.
      */
     onSearchClick?: (value: string) => void;
     /**
-     * aria-label on clear button
+     * Sets the `aria-label` for the clear button.
      * @default "Tøm"
      */
     clearButtonLabel?: string;
     /**
-     * If false, removes clear-button option from input.
+     * Removes clear-button if `false`.
      * @default true
      */
     clearButton?: boolean;
     /**
-     * Changes button-variant, "simple" removes button
+     * Changes button-variant.
+     *
+     * - "primary": When this is the main function of the page.
+     * - "secondary": This is probably the one you want if in doubt.
+     * - "simple": Removes the search button.
      * @default "primary"
      */
     variant?: "primary" | "secondary" | "simple";
     /**
-     * Exposes the HTML size attribute
+     * Exposes the HTML size attribute. Specifies the width of the element, in characters.
      */
     htmlSize?: number | string;
     role?: string;
@@ -65,7 +69,7 @@ interface SearchComponent extends React.ForwardRefExoticComponent<SearchProps &
  *
  * @example
  * ```jsx
- * <form>
+ * <form role="search">
  *   <Search label="Søk alle NAV sine sider" variant="primary" />
  * </form>
  * ```

package/esm/form/search/Search.js

@@ -26,7 +26,7 @@ import { SearchContext } from "./context.js";
  *
  * @example
  * ```jsx
- * <form>
+ * <form role="search">
  *   <Search label="Søk alle NAV sine sider" variant="primary" />
  * </form>
  * ```

package/esm/form/search/Search.js.map

@@ -1 +1 @@
-{"version":3,"file":"Search.js","sourceRoot":"","sources":["../../../src/form/search/Search.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Search.js","sourceRoot":"","sources":["../../../src/form/search/Search.tsx"],"names":[],"mappings":"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"}

package/esm/form/switch/Switch.d.ts

@@ -19,7 +19,7 @@ export interface SwitchProps extends Omit<FormFieldProps, "error" | "errorId">,
      */
     position?: "left" | "right";
     /**
-     * Adds a description to extend labling of Switch.
+     * Adds a description to extend labeling of Switch.
      */
     description?: string;
 }

package/esm/form/useFormField.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 export interface FormFieldProps {
     /**
-     * Adds a description to extend labling of the field.
+     * Adds a description to extend labeling of the field.
      * Error message for element.
      */
     error?: React.ReactNode;
@@ -20,7 +20,7 @@ export interface FormFieldProps {
      */
     disabled?: boolean;
     /**
-     * Adds a description to extend labling of a field.
+     * Adds a description to extend labeling of a field.
      */
     description?: React.ReactNode;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "6.3.1",
+  "version": "6.3.3",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -562,8 +562,8 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.25.4",
-    "@navikt/aksel-icons": "^6.3.1",
-    "@navikt/ds-tokens": "^6.3.1",
+    "@navikt/aksel-icons": "^6.3.3",
+    "@navikt/ds-tokens": "^6.3.3",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^2.1.0",

package/src/date/datepicker/datepicker.stories.tsx

@@ -160,6 +160,7 @@ export const UseDatepicker = () => {
     fromDate: new Date("Aug 23 2019"),
     toDate: new Date("Feb 23 2024"),
     onDateChange: console.log,
+    onValidate: console.log,
   });
 
   return (

package/src/date/hooks/useDatepicker.tsx

@@ -272,7 +272,7 @@ export const useDatepicker = (
     ) {
       updateDate(undefined);
       updateValidation({
-        isInvalid: isValidDate(day),
+        isInvalid: !isValidDate(day),
         isWeekend: disableWeekends && isWeekend(day),
         isDisabled: disabled && isMatch(day, disabled),
         isValidDate: false,

package/src/dropdown/dropdown.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React, { useState } from "react";
 import { Button } from "../button";
 import Dropdown from "./Dropdown";
@@ -6,10 +6,15 @@ import Dropdown from "./Dropdown";
 export default {
   title: "ds-react/Dropdown",
   component: Dropdown,
-} as Meta;
+  parameters: {
+    chromatic: { disable: true },
+  },
+} satisfies Meta<typeof Dropdown>;
 
-export const Default = () => {
-  return (
+type Story = StoryObj<typeof Dropdown>;
+
+export const Default: Story = {
+  render: () => (
     <Dropdown onSelect={(event) => console.log(event)}>
       <Dropdown.Toggle>Toggle</Dropdown.Toggle>
       <Dropdown.Menu strategy="fixed">
@@ -33,10 +38,10 @@ export const Default = () => {
         </Dropdown.Menu.List>
       </Dropdown.Menu>
     </Dropdown>
-  );
+  ),
 };
 
-export const DefaultOpen = {
+export const DefaultOpen: Story = {
   render: () => (
     <Dropdown onSelect={(event) => console.log(event)} defaultOpen>
       <Button as={Dropdown.Toggle}>Toggle</Button>
@@ -57,20 +62,41 @@ export const DefaultOpen = {
       </Dropdown.Menu>
     </Dropdown>
   ),
-  args: { chromatic: { delay: 300 } },
 };
 
-export const ControlledOpen = () => {
-  const [openState, setOpenState] = useState(true);
-  return (
-    <Dropdown onSelect={(event) => console.log(event)} open={openState}>
-      <Button as={Dropdown.Toggle} onClick={() => setOpenState(!openState)}>
-        Toggle
-      </Button>
-      <Dropdown.Menu
-        strategy="fixed"
-        onClose={() => console.log("ONCLOSE CONTROLLED")}
-      >
+export const ControlledOpen: Story = {
+  render: () => {
+    const [openState, setOpenState] = useState(true);
+    return (
+      <Dropdown onSelect={(event) => console.log(event)} open={openState}>
+        <Button as={Dropdown.Toggle} onClick={() => setOpenState(!openState)}>
+          Toggle
+        </Button>
+        <Dropdown.Menu
+          strategy="fixed"
+          onClose={() => console.log("ONCLOSE CONTROLLED")}
+        >
+          <Dropdown.Menu.GroupedList>
+            <Dropdown.Menu.GroupedList.Heading>
+              Systemer og oppslagsverk
+            </Dropdown.Menu.GroupedList.Heading>
+            <Dropdown.Menu.GroupedList.Item
+              onClick={() => console.log("GroupedList.Item-click")}
+            >
+              Gosys
+            </Dropdown.Menu.GroupedList.Item>
+          </Dropdown.Menu.GroupedList>
+        </Dropdown.Menu>
+      </Dropdown>
+    );
+  },
+};
+
+export const Chromatic: Story = {
+  render: () => (
+    <Dropdown onSelect={(event) => console.log(event)} open>
+      <Dropdown.Toggle>Toggle</Dropdown.Toggle>
+      <Dropdown.Menu strategy="fixed">
         <Dropdown.Menu.GroupedList>
           <Dropdown.Menu.GroupedList.Heading>
             Systemer og oppslagsverk
@@ -81,8 +107,18 @@ export const ControlledOpen = () => {
             Gosys
           </Dropdown.Menu.GroupedList.Item>
         </Dropdown.Menu.GroupedList>
+        <Dropdown.Menu.Divider />
+        <Dropdown.Menu.List>
+          <Dropdown.Menu.List.Item onClick={() => console.log("Item-click")}>
+            Gosys
+          </Dropdown.Menu.List.Item>
+          <Dropdown.Menu.List.Item>Psys</Dropdown.Menu.List.Item>
+          <Dropdown.Menu.List.Item disabled>Infotrygd</Dropdown.Menu.List.Item>
+        </Dropdown.Menu.List>
       </Dropdown.Menu>
     </Dropdown>
-  );
+  ),
+  parameters: {
+    chromatic: { disable: false, delay: 300 },
+  },
 };
-ControlledOpen.args = { chromatic: { delay: 300 } };

package/src/form/checkbox/types.ts

@@ -31,7 +31,7 @@ export interface CheckboxProps
    */
   indeterminate?: boolean;
   /**
-   * Adds a description to extend labling of Checkbox.
+   * Adds a description to extend labeling of Checkbox.
    */
   description?: string;
 }

package/src/form/error-summary/error-summary.stories.tsx

@@ -1,5 +1,6 @@
-import { Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
+import { VStack } from "../../layout/stack";
 import { ErrorSummary } from "./ErrorSummary";
 
 export default {
@@ -18,9 +19,14 @@ export default {
       },
     },
   },
-} as Meta;
+  parameters: {
+    chromatic: { disable: true },
+  },
+} satisfies Meta<typeof ErrorSummary>;
+
+type Story = StoryObj<typeof ErrorSummary>;
 
-export const Default = {
+export const Default: Story = {
   render: (props) => (
     <ErrorSummary
       heading="Feiloppsummering komponent"
@@ -35,11 +41,41 @@ export const Default = {
   ),
 };
 
-export const Small = () => (
-  <ErrorSummary heading="Feiloppsummering komponent" size="small">
-    <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
-    <ErrorSummary.Item href="#2">
-      Tekstfeltet må ha en godkjent e-mail
-    </ErrorSummary.Item>
-  </ErrorSummary>
-);
+export const Small: Story = {
+  render: () => (
+    <ErrorSummary heading="Feiloppsummering komponent" size="small">
+      <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
+      <ErrorSummary.Item href="#2">
+        Tekstfeltet må ha en godkjent e-mail
+      </ErrorSummary.Item>
+    </ErrorSummary>
+  ),
+};
+
+export const Chromatic: Story = {
+  render: () => (
+    <VStack gap="4">
+      <div>
+        <h2>Default</h2>
+        <ErrorSummary heading="Feiloppsummering komponent">
+          <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
+          <ErrorSummary.Item href="#2">
+            Tekstfeltet må ha en godkjent e-mail
+          </ErrorSummary.Item>
+        </ErrorSummary>
+      </div>
+      <div>
+        <h2>Small</h2>
+        <ErrorSummary heading="Feiloppsummering komponent" size="small">
+          <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
+          <ErrorSummary.Item href="#2">
+            Tekstfeltet må ha en godkjent e-mail
+          </ErrorSummary.Item>
+        </ErrorSummary>
+      </div>
+    </VStack>
+  ),
+  parameters: {
+    chromatic: { disable: false },
+  },
+};

package/src/form/fieldset/fieldset.stories.tsx

@@ -1,5 +1,6 @@
-import { Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
+import { VStack } from "../../layout/stack";
 import TextField from "../textfield/TextField";
 import { Fieldset } from "./index";
 
@@ -26,7 +27,12 @@ export default {
       type: "boolean",
     },
   },
-} as Meta;
+  parameters: {
+    chromatic: { disable: true },
+  },
+} satisfies Meta<typeof Fieldset>;
+
+type Story = StoryObj<typeof Fieldset>;
 
 const content = (
   <>
@@ -35,88 +41,117 @@ const content = (
   </>
 );
 
-export const Default = {
-  render: (props) => {
-    return (
-      <Fieldset legend="Mollit eiusmod" {...props}>
-        {content}
-      </Fieldset>
-    );
-  },
+const contentWithError = (
+  <>
+    <TextField label="Textfield label" hideLabel error="Må være fylt ut" />
+    <TextField label="Textfield label" hideLabel />
+  </>
+);
 
+export const Default: Story = {
   args: {
+    legend: "Mollit eiusmod",
+    description:
+      "Do ullamco amet mollit labore tempor minim cupidatat dolore voluptate velit irure.",
     errorPropagation: true,
+    children: content,
   },
 };
 
-export const Small = () => (
-  <Fieldset
-    size="small"
-    legend="Mollit eiusmod"
-    description="Do ullamco amet mollit labore tempor minim cupidatat dolore voluptate velit irure."
-  >
-    {content}
-  </Fieldset>
-);
+export const Small: Story = {
+  args: {
+    legend: "Mollit eiusmod",
+    description:
+      "Do ullamco amet mollit labore tempor minim cupidatat dolore voluptate velit irure.",
+    errorPropagation: true,
+    children: content,
+    size: "small",
+  },
+};
 
-export const Description = () => (
-  <Fieldset
-    legend="Mollit eiusmod"
-    description="Esse cupidatat reprehenderit est culpa consectetur sit dolor esse."
-  >
-    <TextField
-      label="Textfield label"
-      description="Amet quis cillum incididunt "
-    />
-    <TextField
-      label="Textfield label"
-      description="Enim et occaecat voluptate labore sit do exercitation laborum non "
-    />
-  </Fieldset>
-);
+export const ErrorPropagation: Story = {
+  args: {
+    legend: "Mollit eiusmod",
+    description:
+      "Do ullamco amet mollit labore tempor minim cupidatat dolore voluptate velit irure.",
+    errorPropagation: false,
+    children: contentWithError,
+  },
+};
 
-export const ErrorPropagation = () => (
-  <Fieldset
-    legend="Mollit eiusmod"
-    error="Fieldsett error"
-    errorPropagation={false}
-  >
-    <TextField label="Textfield label" hideLabel error="Må være fylt ut" />
-    <TextField label="Textfield label" hideLabel />
-  </Fieldset>
-);
+export const Error: Story = {
+  args: {
+    legend: "Mollit eiusmod",
+    description:
+      "Do ullamco amet mollit labore tempor minim cupidatat dolore voluptate velit irure.",
+    children: content,
+    error: "Laborum officia nisi aliqua esse minim in amet.",
+  },
+};
 
-export const Error = () => (
-  <div className="colgap">
-    <Fieldset
-      legend="Mollit eiusmod"
-      error="Laborum officia nisi aliqua esse minim in amet."
-    >
-      {content}
-    </Fieldset>
-    <Fieldset
-      size="small"
-      legend="Mollit eiusmod"
-      error="Laborum officia nisi aliqua esse minim in amet."
-    >
-      {content}
-    </Fieldset>
-  </div>
-);
+export const Disabled: Story = {
+  args: {
+    legend: "Mollit eiusmod",
+    description:
+      "Do ullamco amet mollit labore tempor minim cupidatat dolore voluptate velit irure.",
+    children: content,
+    disabled: true,
+  },
+};
 
-export const Disabled = () => (
-  <div className="colgap">
-    <Fieldset legend="Mollit eiusmod" disabled>
-      {content}
-    </Fieldset>
-    <Fieldset size="small" legend="Mollit eiusmod" disabled>
-      {content}
-    </Fieldset>
-  </div>
-);
+export const HideLegend: Story = {
+  args: {
+    legend: "Mollit eiusmod",
+    description:
+      "Do ullamco amet mollit labore tempor minim cupidatat dolore voluptate velit irure.",
+    children: content,
+    hideLegend: true,
+  },
+};
 
-export const HideLegend = () => (
-  <Fieldset legend="Mollit eiusmod" hideLegend>
-    {content}
-  </Fieldset>
-);
+export const Chromatic: Story = {
+  render: () => {
+    return (
+      <VStack gap="4">
+        <div>
+          <h2>Default</h2>
+          {/* @ts-expect-error Args are Partial here */}
+          <Fieldset {...Default.args} />
+        </div>
+        <div>
+          <h2>Small</h2>
+          {/* @ts-expect-error Args are Partial here */}
+          <Fieldset {...Small.args} />
+        </div>
+        <div>
+          <h2>ErrorPropagation</h2>
+          {/* @ts-expect-error Args are Partial here */}
+          <Fieldset {...ErrorPropagation.args} />
+        </div>
+        <div>
+          <h2>Error</h2>
+          {/* @ts-expect-error Args are Partial here */}
+          <Fieldset {...Error.args} />
+        </div>
+        <div>
+          <h2>Error small</h2>
+          {/* @ts-expect-error Args are Partial here */}
+          <Fieldset {...Error.args} size="small" />
+        </div>
+        <div>
+          <h2>Disabled</h2>
+          {/* @ts-expect-error Args are Partial here */}
+          <Fieldset {...Disabled.args} />
+        </div>
+        <div>
+          <h2>HideLegend</h2>
+          {/* @ts-expect-error Args are Partial here */}
+          <Fieldset {...HideLegend.args} />
+        </div>
+      </VStack>
+    );
+  },
+  parameters: {
+    chromatic: { disable: false },
+  },
+};

package/src/form/file-upload/i18n/i18n.context.ts

@@ -5,7 +5,7 @@ import {
   ComponentTranslation,
   TranslationDictionary,
 } from "./i18n.types";
-import nb from "./locales/nb.json";
+import nb from "./locales/nb";
 
 /**
  * https://regex101.com/r/LYKWi3/1

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

@@ -1,4 +1,4 @@
-import nb from "./locales/nb.json";
+import nb from "./locales/nb";
 
 export interface TranslationObject {
   [key: string]: string | TranslationObject | undefined;

package/src/form/file-upload/i18n/locales/nb.ts

@@ -0,0 +1,20 @@
+export default {
+  FileUpload: {
+    dropzone: {
+      button: "Velg fil",
+      buttonMultiple: "Velg filer",
+      dragAndDrop: "Dra og slipp filen her",
+      dragAndDropMultiple: "Dra og slipp filer her",
+      drop: "Slipp",
+      or: "eller",
+      disabled: "Filopplasting er deaktivert",
+      disabledFilelimit: "Du kan ikke laste opp flere filer",
+    },
+    item: {
+      retryButtonTitle: "Prøv å laste opp filen på nytt",
+      deleteButtonTitle: "Slett filen",
+      uploading: "Laster opp…",
+      downloading: "Laster ned…",
+    },
+  },
+};

package/src/form/file-upload/parts/dropzone/Dropzone.tsx

@@ -129,7 +129,7 @@ const Dropzone = forwardRef<HTMLInputElement, FileUploadDropzoneProps>(
                 <BodyShort as="div">{translate("dropzone.or")}</BodyShort>
               </div>
               <Button
-                {...omit(rest, ["errorId"])}
+                {...omit(rest, ["errorId", "id"])}
                 {...inputPropsRest}
                 aria-describedby={cl(labelId, ariaDescribedby)}
                 className="navds-dropzone__area-button"

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

@@ -24,12 +24,14 @@ export interface FileItemBaseProps {
   file: FileItem;
   /**
    * onClick on the file name.
-   * @note If this and `href` is not set and the `file` prop is a native file, onClick will download the file.
+   *
+   * If neither this nor `href` is set, and the `file` prop is a native file, onClick will download the file.
    */
   onFileClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
   /**
    * href on the file name.
-   * @note If this and `onFileClick` is not set and the `file` prop is a native file, onClick will download the file.
+   *
+   * If neither this nor `onFileClick` is set, and the `file` prop is a native file, onClick will download the file.
    */
   href?: string;
   /**

package/src/form/radio/radio.stories.tsx

@@ -49,6 +49,7 @@ export const Default = (props) => {
     </RadioGroup>
   );
 };
+
 Default.args = {
   controlled: false,
   error: false,