@navikt/ds-react 6.3.2 → 6.3.4

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/parts/dropzone/Dropzone.tsx

@@ -30,6 +30,7 @@ const Dropzone = forwardRef<HTMLInputElement, FileUploadDropzoneProps>(
       disabled,
       translations,
       onClick,
+      id: buttonId,
       ...rest
     } = props;
 
@@ -46,7 +47,10 @@ const Dropzone = forwardRef<HTMLInputElement, FileUploadDropzoneProps>(
     const _disabled = disabled ?? fileLimitReached;
 
     const { inputProps, errorId, showErrorMsg, hasError, inputDescriptionId } =
-      useFormField({ ...props, disabled: _disabled }, "fileUpload");
+      useFormField(
+        { ...omit(props, ["id"]), disabled: _disabled },
+        "fileUpload",
+      );
     const {
       id: inputId,
       "aria-describedby": ariaDescribedby,
@@ -131,6 +135,7 @@ const Dropzone = forwardRef<HTMLInputElement, FileUploadDropzoneProps>(
               <Button
                 {...omit(rest, ["errorId"])}
                 {...inputPropsRest}
+                id={buttonId}
                 aria-describedby={cl(labelId, ariaDescribedby)}
                 className="navds-dropzone__area-button"
                 type="button"

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

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

package/src/form/switch/Switch.tsx

@@ -85,7 +85,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
       ...rest
     } = props;
 
-    const [checked, setChecked] = useState(
+    const [_checked, setChecked] = useState(
       defaultChecked ?? checkedProp ?? false,
     );
 
@@ -93,6 +93,8 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
       checkedProp !== undefined && setChecked(checkedProp);
     }, [checkedProp]);
 
+    const checked = checkedProp ?? _checked;
+
     return (
       <div
         className={cl(

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 },
+  },
 };