@navikt/ds-react 6.3.1 → 6.3.3

package/src/form/radio/types.ts

@@ -5,15 +5,15 @@ export interface RadioProps
   extends Omit<FormFieldProps, "error" | "errorId" | "readOnly">,
     Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "value"> {
   /**
-   * Radio label
+   * Radio label.
    */
   children: React.ReactNode;
   /**
-   * The value of the HTML element
+   * The value of the HTML element.
    */
   value: any;
   /**
-   * Adds a description to extend labling of Radio
+   * Adds a description to extend labeling of Radio.
    */
   description?: string;
 }

package/src/form/search/Search.tsx

@@ -28,47 +28,51 @@ export interface SearchProps
   /**
    * 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;
   /*
-   * Exposes role attribute
+   * Exposes role attribute.
    */
   role?: string;
 }
@@ -88,7 +92,7 @@ interface SearchComponent
  *
  * @example
  * ```jsx
- * <form>
+ * <form role="search">
  *   <Search label="Søk alle NAV sine sider" variant="primary" />
  * </form>
  * ```

package/src/form/switch/Switch.tsx

@@ -53,7 +53,7 @@ export interface SwitchProps
    */
   position?: "left" | "right";
   /**
-   * Adds a description to extend labling of Switch.
+   * Adds a description to extend labeling of Switch.
    */
   description?: string;
 }

package/src/form/switch/switch.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 Switch from "./Switch";
 
 export default {
@@ -31,70 +32,59 @@ export default {
       type: "boolean",
     },
   },
-} as Meta;
-
-export const Default = {
-  render: (props) => {
-    return <Switch {...props}>Label text</Switch>;
+  parameters: {
+    chromatic: { disable: true },
   },
+} satisfies Meta<typeof Switch>;
+
+type Story = StoryObj<typeof Switch>;
 
+export const Default: Story = {
   args: {
-    position: "right",
+    children: "Label text",
   },
 };
 
-export const Small = () => {
-  return (
-    <div className="colgap">
-      <Switch size="small">Label text</Switch>
-      <Switch size="small" position="right">
-        Label text
-      </Switch>
-    </div>
-  );
+export const Small: Story = {
+  args: {
+    children: "Label text",
+    size: "small",
+  },
 };
 
-export const Description = () => {
-  return (
-    <div className="colgap">
-      <Switch size="small" description="Cillum sint exercitation ut cillum.">
-        Label text
-      </Switch>
-      <Switch
-        size="small"
-        position="right"
-        description="Cillum sint exercitation ut cillum."
-      >
-        Label text
-      </Switch>
-    </div>
-  );
+export const Description: Story = {
+  args: {
+    children: "Label text",
+    description: "Cillum sint exercitation ut cillum.",
+  },
 };
 
-export const Loading = () => {
-  return (
-    <div className="colgap">
+export const Loading: Story = {
+  render: () => {
+    return (
       <div className="colgap">
-        <Switch loading>Label text</Switch>
+        <div className="colgap">
+          <Switch loading>Label text</Switch>
 
-        <Switch checked loading>
-          Label text
-        </Switch>
-      </div>
-      <div className="colgap">
-        <Switch loading size="small">
-          Label text
-        </Switch>
-        <Switch checked loading size="small">
-          Label text
-        </Switch>
+          <Switch checked loading>
+            Label text
+          </Switch>
+        </div>
+        <div className="colgap">
+          <Switch loading size="small">
+            Label text
+          </Switch>
+          <Switch checked loading size="small">
+            Label text
+          </Switch>
+        </div>
       </div>
-    </div>
-  );
+    );
+  },
 };
 
-export const Disabled = () => {
-  return (
+export const Disabled: Story = {
+  render: () => (
     <div className="colgap">
       <Switch disabled>Label text</Switch>
 
@@ -102,11 +92,11 @@ export const Disabled = () => {
         Label text
       </Switch>
     </div>
-  );
+  ),
 };
 
-export const HideLabel = () => {
-  return (
+export const HideLabel: Story = {
+  render: () => (
     <div className="colgap">
       <Switch hideLabel>Label text</Switch>
 
@@ -114,11 +104,11 @@ export const HideLabel = () => {
         Label text
       </Switch>
     </div>
-  );
+  ),
 };
 
-export const Readonly = () => {
-  return (
+export const Readonly: Story = {
+  render: () => (
     <div className="colgap">
       <Switch description="Slår av alle notifikasjoner" readOnly>
         Notifikasjoner
@@ -128,5 +118,54 @@ export const Readonly = () => {
         Notifikasjoner
       </Switch>
     </div>
-  );
+  ),
+};
+
+export const Chromatic: Story = {
+  render: () => (
+    <VStack gap="4" align="start">
+      <div>
+        <h2>Default</h2>
+        {/* @ts-expect-error Args are Partial here */}
+        <Switch {...Default.args} />
+      </div>
+      <div>
+        <h2>Small</h2>
+        {/* @ts-expect-error Args are Partial here */}
+        <Switch {...Small.args} position="left" />
+        {/* @ts-expect-error Args are Partial here */}
+        <Switch {...Small.args} position="right" />
+      </div>
+      <div>
+        <h2>Description</h2>
+        {/* @ts-expect-error Args are Partial here */}
+        <Switch {...Description.args} position="left" />
+        {/* @ts-expect-error Args are Partial here */}
+        <Switch {...Description.args} position="right" />
+      </div>
+      <div>
+        <h2>Loading</h2>
+        {/* @ts-expect-error Args are Partial here */}
+        <Loading.render />
+      </div>
+      <div>
+        <h2>Disabled</h2>
+        {/* @ts-expect-error Args are Partial here */}
+        <Disabled.render />
+      </div>
+      <div>
+        <h2>HideLabel</h2>
+        {/* @ts-expect-error Args are Partial here */}
+        <HideLabel.render />
+      </div>
+      <div>
+        <h2>Readonly</h2>
+        {/* @ts-expect-error Args are Partial here */}
+        <Readonly.render />
+      </div>
+    </VStack>
+  ),
+  parameters: {
+    chromatic: { disable: false },
+  },
 };

package/src/form/useFormField.ts

@@ -5,7 +5,7 @@ import { FieldsetContext } from "./fieldset/context";
 
 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;
@@ -24,7 +24,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/cjs/form/file-upload/i18n/locales/nb.json

@@ -1,20 +0,0 @@
-{
-    "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/esm/form/file-upload/i18n/locales/nb.json

@@ -1,20 +0,0 @@
-{
-    "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/i18n/locales/nb.json

@@ -1,20 +0,0 @@
-{
-  "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…"
-    }
-  }
-}