@navikt/ds-react 6.5.0 → 6.6.0

package/src/form/confirmation-panel/confirmation-panel.stories.tsx

@@ -1,128 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import React, { useState } from "react";
-import { Link } from "../../link";
-import { ConfirmationPanel } from "./index";
-
-export default {
-  title: "ds-react/ConfirmationPanel",
-  component: ConfirmationPanel,
-  argTypes: {
-    size: {
-      control: {
-        type: "radio",
-        options: ["medium", "small"],
-      },
-    },
-    error: {
-      type: "string",
-    },
-  },
-  parameters: {
-    chromatic: { disable: true },
-  },
-} as Meta;
-
-type Story = StoryObj<typeof ConfirmationPanel>;
-
-const content = (
-  <>
-    Ipsum voluptate pariatur <Link href="#123">testlink</Link> anim officia
-    minim ut mollit voluptate exercitation nulla mollit.
-  </>
-);
-
-export const Default = {
-  render: (props) => {
-    return (
-      <ConfirmationPanel
-        error={props?.error}
-        size={props?.size}
-        checked={props?.checked ?? undefined}
-        label={props?.label ?? "Checkbox label text"}
-      >
-        {content}
-      </ConfirmationPanel>
-    );
-  },
-
-  args: {
-    label: "Checkbox label text",
-    checked: false,
-  },
-};
-
-export const Small = () => {
-  const [checked, setChecked] = useState(false);
-  return (
-    <ConfirmationPanel
-      checked={checked}
-      onChange={() => setChecked(!checked)}
-      label="Checkbox label text"
-      size="small"
-    >
-      {content}
-    </ConfirmationPanel>
-  );
-};
-
-export const NoContent = () => {
-  const [checked, setChecked] = useState(false);
-  return (
-    <ConfirmationPanel
-      checked={checked}
-      onChange={() => setChecked(!checked)}
-      label="Checkbox label text"
-    />
-  );
-};
-
-export const Error = () => {
-  const [checked, setChecked] = useState(false);
-  return (
-    <div className="colgap">
-      <ConfirmationPanel
-        checked={checked}
-        onChange={() => setChecked(!checked)}
-        label="Checkbox label text"
-        error="Adipisicing sint aute quis veniam incididunt duis est sint aute cillum."
-      >
-        {content}
-      </ConfirmationPanel>
-      <ConfirmationPanel
-        checked={checked}
-        onChange={() => setChecked(!checked)}
-        label="Checkbox label text"
-        error="Adipisicing sint aute quis veniam incididunt duis est sint aute cillum."
-        size="small"
-      >
-        {content}
-      </ConfirmationPanel>
-    </div>
-  );
-};
-
-export const Chromatic: Story = {
-  render: (...props) => (
-    <div>
-      <div>
-        <h2>Default</h2>
-        {Default.render?.(props)}
-      </div>
-      <div>
-        <h2>Small</h2>
-        <Small />
-      </div>
-      <div>
-        <h2>No content</h2>
-        <NoContent />
-      </div>
-      <div>
-        <h2>Error</h2>
-        <Error />
-      </div>
-    </div>
-  ),
-  parameters: {
-    chromatic: { disable: false },
-  },
-};

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

@@ -1,81 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import React from "react";
-import { VStack } from "../../layout/stack";
-import { ErrorSummary } from "./ErrorSummary";
-
-export default {
-  title: "ds-react/Errorsummary",
-  component: ErrorSummary,
-  argTypes: {
-    headingTag: {
-      control: {
-        type: "text",
-      },
-    },
-    size: {
-      control: {
-        type: "radio",
-        options: ["medium", "small"],
-      },
-    },
-  },
-  parameters: {
-    chromatic: { disable: true },
-  },
-} satisfies Meta<typeof ErrorSummary>;
-
-type Story = StoryObj<typeof ErrorSummary>;
-
-export const Default: Story = {
-  render: (props) => (
-    <ErrorSummary
-      heading="Feiloppsummering komponent"
-      headingTag={props.headingTag || "h2"}
-      size={props.size ?? undefined}
-    >
-      <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,157 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import React from "react";
-import { VStack } from "../../layout/stack";
-import TextField from "../textfield/TextField";
-import { Fieldset } from "./index";
-
-export default {
-  title: "ds-react/Fieldset",
-  component: Fieldset,
-  argTypes: {
-    size: {
-      control: {
-        type: "radio",
-        options: ["medium", "small"],
-      },
-    },
-    description: {
-      type: "string",
-    },
-    error: {
-      type: "string",
-    },
-    hideLegend: {
-      type: "boolean",
-    },
-    disabled: {
-      type: "boolean",
-    },
-  },
-  parameters: {
-    chromatic: { disable: true },
-  },
-} satisfies Meta<typeof Fieldset>;
-
-type Story = StoryObj<typeof Fieldset>;
-
-const content = (
-  <>
-    <TextField label="Textfield label" hideLabel />
-    <TextField label="Textfield label" hideLabel />
-  </>
-);
-
-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: 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 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 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 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 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 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/file-upload-dropzone.stories.tsx

@@ -1,123 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { fireEvent, within } from "@storybook/test";
-import React from "react";
-import { ImageIcon } from "@navikt/aksel-icons";
-import {
-  type FileObject,
-  UNSAFE_FileUpload as FileUpload,
-  type FilesPartitioned,
-} from ".";
-
-const meta: Meta<typeof FileUpload.Dropzone> = {
-  title: "ds-react/FileUpload/Dropzone",
-  component: FileUpload.Dropzone,
-  decorators: [
-    (Story) => (
-      <div style={{ width: 500, maxWidth: "100%" }}>
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default meta;
-
-const onSelect = (
-  allFiles: FileObject[],
-  { accepted, rejected }: FilesPartitioned,
-) => {
-  alert(
-    `Lastet opp ${allFiles.length} filer. Accepted: ${accepted.length}. Rejected: ${rejected.length}`,
-  );
-};
-
-export const Default: StoryObj<typeof FileUpload.Dropzone> = {
-  render: (props) => <FileUpload.Dropzone {...props} onSelect={console.log} />,
-  args: {
-    label: "Last opp filer",
-    description: "",
-    error: "",
-    multiple: true,
-    accept: "",
-    maxSizeInBytes: 0,
-    fileLimit: { max: 2, current: 1 },
-  },
-  argTypes: {
-    disabled: { control: { type: "boolean" } },
-  },
-  parameters: { chromatic: { disable: true } },
-};
-
-export const States: StoryObj = {
-  render: () => (
-    <div>
-      <h2>Disabled</h2>
-      <FileUpload.Dropzone
-        label="Disabled prop"
-        onSelect={console.log}
-        disabled
-      />
-      <FileUpload.Dropzone
-        label="FileLimit disabled"
-        onSelect={console.log}
-        fileLimit={{ max: 1, current: 2 }}
-      />
-
-      <h2>Error</h2>
-      <FileUpload.Dropzone
-        label="Last opp filer"
-        onSelect={onSelect}
-        error="Du må laste opp en fil"
-        description="Bruk filtype DOC, PPT eller PDF. Maks filstørrelse 10 MB."
-      />
-
-      <h2>Dragging</h2>
-      <FileUpload.Dropzone
-        label="Drag over test"
-        multiple={false}
-        onSelect={onSelect}
-      />
-    </div>
-  ),
-};
-States.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const button = canvas.getByText("Velg fil");
-  fireEvent.dragEnter(button);
-};
-
-export const Translation: StoryObj = {
-  render: () => (
-    <div>
-      <h2>Single file</h2>
-      <FileUpload.Dropzone
-        label="Last opp fil"
-        multiple={false}
-        onSelect={onSelect}
-      />
-
-      <h2>Custom texts</h2>
-      <FileUpload.Dropzone
-        translations={{
-          dragAndDropMultiple: "Dra og slipp bilder i format .png",
-          buttonMultiple: "Velg bilder",
-          disabled: "Du kan ikke laste opp flere bilder",
-        }}
-        label="Last opp bilder"
-        onSelect={console.log}
-        icon={ImageIcon}
-      />
-
-      <h3>Disabled</h3>
-      <FileUpload.Dropzone
-        translations={{
-          disabled: "Du kan ikke laste opp flere bilder",
-        }}
-        label="Last opp bilder"
-        onSelect={console.log}
-        icon={ImageIcon}
-        disabled
-      />
-    </div>
-  ),
-};

package/src/form/file-upload/file-upload-item.stories.tsx

@@ -1,148 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import React from "react";
-import { FileItem, UNSAFE_FileUpload as FileUpload } from ".";
-import { VStack } from "../../layout/stack";
-
-const meta: Meta<typeof FileUpload.Item> = {
-  title: "ds-react/FileUpload/Item",
-  component: FileUpload.Item,
-  decorators: [
-    (Story) => (
-      <div style={{ width: 400, maxWidth: "100%" }}>
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default meta;
-
-const onDelete = (file: FileItem) => alert(`Delete ${file.name}`);
-const onRetry = (file: FileItem) => alert(`Retry ${file.name}`);
-const fileTxt = new File(["abc".repeat(10000)], "file.txt");
-const filePng = new File(["abc".repeat(10000)], "file.png");
-const filePdf = new File(["abc".repeat(100000)], "file.pdf");
-const fileXlsx = new File(["abc"], "file.xlsx");
-const fileCsv = new File(["abc"], "file.csv");
-const filePptx = new File(["abc"], "file.pptx");
-const fileWebp = new File(["abc"], "file.webp");
-const fileDocx = new File(["abc"], "file.docx");
-
-export const Icons: StoryObj<typeof FileUpload.Item> = {
-  render: () => (
-    <FileUpload>
-      <VStack gap="5" as="ul">
-        <FileUpload.Item file={fileTxt} as="li" />
-        <FileUpload.Item file={filePng} as="li" />
-        <FileUpload.Item file={fileWebp} as="li" />
-        <FileUpload.Item file={filePdf} as="li" />
-        <FileUpload.Item file={fileDocx} as="li" />
-        <FileUpload.Item file={fileDocx} as="li" status="uploading" />
-        <FileUpload.Item file={fileDocx} as="li" status="downloading" />
-        <FileUpload.Item file={fileXlsx} as="li" />
-        <FileUpload.Item file={fileCsv} as="li" />
-        <FileUpload.Item file={filePptx} as="li" />
-      </VStack>
-    </FileUpload>
-  ),
-};
-
-export const States: StoryObj<typeof FileUpload.Item> = {
-  render: () => (
-    <div>
-      <h2>Error</h2>
-      <FileUpload.Item file={fileTxt} error="Plain error" />
-      <h3>error + status</h3>
-      <FileUpload.Item
-        file={fileTxt}
-        error="Error og uploading"
-        status="uploading"
-        button={{
-          onClick: () => onDelete(fileTxt),
-          action: "delete",
-        }}
-      />
-      <h2>Item Actions</h2>
-      <h3>status + delete</h3>
-      <FileUpload.Item
-        file={fileDocx}
-        status="uploading"
-        button={{
-          onClick: () => onDelete(fileDocx),
-          action: "delete",
-        }}
-      />
-      <h3>status + retry</h3>
-      <FileUpload.Item
-        file={fileDocx}
-        status="downloading"
-        button={{
-          onClick: () => onRetry(fileDocx),
-          action: "retry",
-        }}
-      />
-      <h3>retry</h3>
-      <FileUpload.Item
-        file={fileCsv}
-        button={{
-          onClick: () => onRetry(fileCsv),
-          action: "retry",
-        }}
-      />
-      <h3>delete</h3>
-      <FileUpload.Item
-        file={filePptx}
-        button={{
-          onClick: () => onDelete(filePptx),
-          action: "delete",
-        }}
-      />
-      <h3>retry + error</h3>
-      <FileUpload.Item
-        file={fileCsv}
-        error="Error og onRetry"
-        button={{
-          onClick: () => onRetry(fileCsv),
-          action: "retry",
-        }}
-      />
-      <h3>delete + error</h3>
-      <FileUpload.Item
-        file={filePptx}
-        error="Error og onDelete"
-        button={{
-          onClick: () => onDelete(filePptx),
-          action: "delete",
-        }}
-      />
-    </div>
-  ),
-};
-
-export const Download: StoryObj = {
-  render: () => (
-    <VStack gap="5">
-      <FileUpload.Item
-        file={{
-          name: "with onClick.txt",
-          size: 1_048_576,
-        }}
-        onFileClick={() => alert("onFileClick")}
-      />
-      <FileUpload.Item
-        file={{
-          name: "with href.txt",
-          size: 1,
-        }}
-        href="https://www.nav.no"
-      />
-      <FileUpload.Item
-        file={{
-          name: "without href/onFileClick.txt",
-          size: 2_000_000,
-        }}
-      />
-      <FileUpload.Item file={fileTxt} />
-    </VStack>
-  ),
-};