@navikt/ds-react 6.5.0 → 6.6.0

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

@@ -1,248 +0,0 @@
-import { Meta, StoryFn, StoryObj } from "@storybook/react";
-import React, { useEffect, useState } from "react";
-import { UploadIcon } from "@navikt/aksel-icons";
-import { UNSAFE_FileUpload as FileUpload, FileUploadItemProps } from ".";
-import { Alert } from "../../alert";
-import { Button } from "../../button";
-import { VStack } from "../../layout/stack";
-import { Heading } from "../../typography";
-import {
-  FileObject,
-  FileRejected,
-  FileRejectionReason,
-} from "./FileUpload.types";
-
-const meta: Meta<typeof FileUpload.Dropzone> = {
-  title: "ds-react/FileUpload",
-  component: FileUpload.Dropzone,
-};
-
-export default meta;
-
-const MAX_FILES = 3;
-const MAX_SIZE_MB = 1;
-const MAX_SIZE = MAX_SIZE_MB * 1024 * 1024;
-
-const CustomItem = ({
-  index,
-  onDelete,
-  ...props
-}: FileUploadItemProps & {
-  index: number;
-  onDelete: (event: React.MouseEvent<HTMLButtonElement>) => void;
-}) => {
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    setTimeout(
-      () => {
-        setLoading(false);
-      },
-      1700 * index + 1,
-    );
-  }, [index]);
-
-  return (
-    <FileUpload.Item
-      {...props}
-      status={loading ? "uploading" : "idle"}
-      button={{
-        action: "delete",
-        onClick: onDelete,
-      }}
-      as="li"
-    />
-  );
-};
-
-export const Default: StoryFn = () => {
-  const [files, setFiles] = useState<FileObject[]>([]);
-
-  function addFiles(filesToAdd: FileObject[]) {
-    setFiles([...files, ...filesToAdd]);
-  }
-
-  function removeFile(fileToRemove: FileObject) {
-    setFiles(files.filter((file) => file !== fileToRemove));
-  }
-
-  const acceptedFiles = files.filter((file) => !file.error);
-  const rejectedFiles = files.filter((f): f is FileRejected => f.error);
-
-  return (
-    <FileUpload style={{ width: 500, maxWidth: "100%", margin: "0 auto" }}>
-      <VStack gap="6">
-        <FileUpload.Dropzone
-          label="Last opp filer til søknaden"
-          description={`Maks størrelse ${MAX_SIZE_MB} MB`}
-          accept=".doc,.docx,.xls,.xlsx,.pdf"
-          maxSizeInBytes={MAX_SIZE}
-          fileLimit={{ max: MAX_FILES, current: acceptedFiles.length }}
-          onSelect={addFiles}
-        />
-
-        {getListError(acceptedFiles) && (
-          <Alert variant="error">{getListError(acceptedFiles)}</Alert>
-        )}
-
-        {acceptedFiles.length > 0 && (
-          <VStack gap="2">
-            <Heading level="3" size="xsmall">
-              {`Vedlegg (${acceptedFiles.length} av maks ${MAX_FILES})`}
-            </Heading>
-            <VStack as="ul" gap="3">
-              {acceptedFiles.map((file, index) => (
-                <CustomItem
-                  key={index}
-                  index={index}
-                  file={file.file}
-                  onDelete={() => removeFile(file)}
-                />
-              ))}
-            </VStack>
-          </VStack>
-        )}
-        {rejectedFiles.length > 0 && (
-          <VStack gap="2">
-            <Heading level="3" size="xsmall">
-              Vedlegg med feil
-            </Heading>
-            <VStack as="ul" gap="3">
-              {rejectedFiles.map((rejected, index) => (
-                <CustomItem
-                  key={index}
-                  index={index}
-                  file={rejected.file}
-                  error={errors[rejected.reasons[0]]}
-                  onDelete={() => removeFile(rejected)}
-                />
-              ))}
-            </VStack>
-          </VStack>
-        )}
-      </VStack>
-    </FileUpload>
-  );
-};
-Default.parameters = {
-  chromatic: { disable: true },
-  layout: "padded",
-};
-
-const errors: Record<FileRejectionReason, string> = {
-  fileType: "Filformatet støttes ikke",
-  fileSize: `Filen er større enn ${MAX_SIZE_MB} MB`,
-};
-
-function getListError(acceptedFiles: FileObject[]) {
-  const filesTooMany = acceptedFiles.length - MAX_FILES;
-  if (filesTooMany === 1)
-    return "Du har lagt ved en fil for mye, vennligst fjern en fil";
-  if (filesTooMany > 1)
-    return `Du har lagt ved ${filesTooMany} filer for mye, vennligst fjern ${filesTooMany} filer`;
-}
-
-export const Single: StoryFn = () => {
-  const [files, setFiles] = useState<FileObject[]>([]);
-
-  function addFiles(filesToAdd: FileObject[]) {
-    setFiles(filesToAdd);
-  }
-
-  function removeFile() {
-    setFiles([]);
-  }
-
-  return (
-    <VStack gap="6" style={{ width: 500, maxWidth: "100%" }}>
-      <FileUpload.Dropzone
-        label="Last opp fil til søknaden"
-        description={`Maks størrelse ${MAX_SIZE_MB} MB`}
-        accept=".doc,.docx,.xls,.xlsx,.pdf"
-        maxSizeInBytes={MAX_SIZE}
-        fileLimit={{ max: 1, current: files.length }}
-        multiple={false}
-        onSelect={addFiles}
-      />
-      {files.map((file) => (
-        <FileUpload.Item
-          key={file.file.name}
-          file={file.file}
-          error={file.error ? errors[file.reasons[0]] : undefined}
-          button={{
-            action: "delete",
-            onClick: removeFile,
-          }}
-        />
-      ))}
-    </VStack>
-  );
-};
-Single.parameters = { chromatic: { disable: true } };
-
-export const Translation = () => (
-  <FileUpload
-    translations={{
-      dropzone: {
-        dragAndDropMultiple: "Dra og slipp bilder i format .png",
-        buttonMultiple: "Velg bilder",
-        or: "eventuelt",
-        disabled: "Du kan ikke laste opp flere bilder",
-      },
-      item: {
-        deleteButtonTitle: "Slett bilde",
-        downloading: "Laster bilde...",
-        uploading: "Laster opp bilde...",
-        retryButtonTitle: "Last opp bilde på nytt",
-      },
-    }}
-  >
-    <VStack gap="3" style={{ width: 500, maxWidth: "100%" }}>
-      <FileUpload.Dropzone label="Last opp bilder" onSelect={console.log} />
-      <FileUpload.Item
-        file={{ name: "eksempel.png", size: 200000 }}
-        button={{
-          action: "delete",
-          onClick: () => null,
-        }}
-      />
-      <FileUpload.Item
-        file={{ name: "eksempel.png", size: 200000 }}
-        button={{
-          action: "retry",
-          onClick: () => null,
-        }}
-      />
-      <FileUpload.Item
-        file={{ name: "eksempel.png", size: 200000 }}
-        status="downloading"
-      />
-      <FileUpload.Item
-        file={{ name: "eksempel.png", size: 200000 }}
-        status="uploading"
-      />
-      <FileUpload.Item
-        file={{ name: "eksempel.png", size: 200000 }}
-        status="uploading"
-        translations={{ uploading: "Sender bilde..." }}
-      />
-    </VStack>
-  </FileUpload>
-);
-
-export const TriggerWithButton: StoryObj<typeof FileUpload.Trigger> = {
-  render: (props) => {
-    return (
-      <FileUpload.Trigger {...props} onSelect={console.log}>
-        <Button variant="secondary" icon={<UploadIcon aria-hidden />}>
-          Last opp filer
-        </Button>
-      </FileUpload.Trigger>
-    );
-  },
-  args: {
-    multiple: true,
-    accept: "",
-    maxSizeInBytes: 0,
-  },
-};

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

@@ -1,230 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import React, { useState } from "react";
-import { Accordion } from "../../accordion";
-import AccordionContent from "../../accordion/AccordionContent";
-import AccordionHeader from "../../accordion/AccordionHeader";
-import AccordionItem from "../../accordion/AccordionItem";
-import Radio from "./Radio";
-import RadioGroup from "./RadioGroup";
-
-const meta: Meta<typeof Radio> = {
-  title: "ds-react/Radio",
-  component: Radio,
-  argTypes: {
-    size: {
-      options: ["medium", "small"],
-      control: { type: "radio" },
-    },
-  },
-  parameters: {
-    chromatic: { disable: true },
-  },
-};
-export default meta;
-
-type Story = StoryObj<typeof Radio>;
-
-export const Default = (props) => {
-  const [state, setState] = useState("radio1");
-
-  return (
-    <RadioGroup
-      legend={props.legend}
-      description={props.description}
-      value={props.controlled ? state : undefined}
-      onChange={props.controlled ? setState : undefined}
-      hideLegend={props.hideLegend}
-      error={props.error ? "Errormelding" : undefined}
-      size={props?.size}
-    >
-      <Radio value="radio1">{props.children || "Apple"}</Radio>
-      <Radio
-        value="radio2"
-        description={props.radioDescription ? "Orange description" : undefined}
-      >
-        {props.children || "Orange"}
-      </Radio>
-      <Radio value="radio3">{props.children || "Banana"}</Radio>
-      <Radio value="radio4">{props.children || "Melon"}</Radio>
-    </RadioGroup>
-  );
-};
-
-Default.args = {
-  controlled: false,
-  error: false,
-  size: "medium",
-  legend: "Legend-tekst",
-  radioDescription: false,
-  hideLegend: false,
-  children: "",
-  description: "",
-};
-
-export const Group = () => (
-  <RadioGroup legend="Group legend" defaultValue="tekst2">
-    <Radio value="tekst">Radiotekst</Radio>
-    <Radio value="tekst2">Radiotekst</Radio>
-  </RadioGroup>
-);
-
-export const GroupError = () => {
-  const [isValueSelected, setValueSelected] = useState(false);
-  return (
-    <>
-      <button>Stop her</button>
-      <RadioGroup
-        legend="Velg din aldersgruppe"
-        description="Informasjonen blir brukt for å gi deg bedre søketreff."
-        error={!isValueSelected ? "Du må velge en aldersgruppe" : undefined}
-      >
-        <Radio onChange={() => setValueSelected(true)} value="0-20">
-          0-20 år
-        </Radio>
-        <Radio
-          onChange={() => setValueSelected(true)}
-          value="21-45"
-          description="Gjelder fra året man blir 21"
-        >
-          21-45 år
-        </Radio>
-        <Radio onChange={() => setValueSelected(true)} value="46-100">
-          46-100 år
-        </Radio>
-      </RadioGroup>
-    </>
-  );
-};
-
-export const GroupSmall = () => (
-  <RadioGroup legend="Group legend" defaultValue="tekst2" size="small">
-    <Radio value="tekst">Radiotekst</Radio>
-    <Radio value="tekst2">Radiotekst</Radio>
-  </RadioGroup>
-);
-
-export const GroupDescription = () => (
-  <RadioGroup
-    legend="Group legend"
-    defaultValue="tekst2"
-    description="Group description"
-  >
-    <Radio value="tekst" description="textdesc">
-      Radiotekst
-    </Radio>
-    <Radio value="tekst2">Radiotekst</Radio>
-  </RadioGroup>
-);
-
-export const UUDemo = () => (
-  <div className="colgap">
-    <RadioGroup
-      legend="Hvilken frukt vil du ha?"
-      description="Du kan bare velge en frukt"
-      defaultValue="eple"
-      readOnly
-    >
-      <Radio value="eple">Eple</Radio>
-      <Radio value="banan" description="Bananer er importert fra X">
-        Banan
-      </Radio>
-      <Radio value="druer">Druer</Radio>
-    </RadioGroup>
-    <RadioGroup
-      legend="Når har du ferie?"
-      defaultValue="1"
-      readOnly
-      error="du må velge en ferie"
-    >
-      <Radio value="1">August</Radio>
-      <Radio value="2">Juli</Radio>
-      <Radio value="3">Juni</Radio>
-    </RadioGroup>
-  </div>
-);
-
-/**
- * Added to test bug where Radio labels are sometimes omitted from accessibility tree in Chrome when inside of an Accordion.
- * It was not possible to replicate using a Storybook-test.
- *
- * See https://nav-it.slack.com/archives/C7NE7A8UF/p1695723000232659
- */
-export const TestInsideAccordion = () => (
-  <Accordion>
-    <AccordionItem>
-      <AccordionHeader>Åpne for å velge</AccordionHeader>
-      <AccordionContent>
-        <RadioGroup legend="Velg én">
-          <Radio value="1">Første valg</Radio>
-          <Radio value="2">Andre valg</Radio>
-          <Radio value="3">Tredje valg</Radio>
-        </RadioGroup>
-      </AccordionContent>
-    </AccordionItem>
-  </Accordion>
-);
-
-export const Readonly = () => (
-  <div className="colgap">
-    <RadioGroup
-      legend="Hvilken frukt liker du?"
-      defaultValue={["banan"]}
-      readOnly
-    >
-      <Radio value="banan">Banan</Radio>
-      <Radio value="eple">Eple</Radio>
-      <Radio value="druer">Druer</Radio>
-    </RadioGroup>
-    <RadioGroup
-      legend="Hvilken frukt liker du?"
-      error="feilmelding"
-      defaultValue="eple"
-      readOnly
-    >
-      <Radio value="eple">Eple</Radio>
-      <Radio value="banan">Banan</Radio>
-    </RadioGroup>
-  </div>
-);
-
-export const Chromatic: Story = {
-  render: () => (
-    <div>
-      <div>
-        <h2>Default</h2>
-        <Default />
-      </div>
-      <div>
-        <h2>Group</h2>
-        <Group />
-      </div>
-      <div>
-        <h2>GroupError</h2>
-        <GroupError />
-      </div>
-      <div>
-        <h2>GroupSmall</h2>
-        <GroupSmall />
-      </div>
-      <div>
-        <h2>GroupDescription</h2>
-        <GroupDescription />
-      </div>
-      <div>
-        <h2>UUDemo</h2>
-        <UUDemo />
-      </div>
-      <div>
-        <h2>TestInsideAccordion</h2>
-        <TestInsideAccordion />
-      </div>
-      <div>
-        <h2>Readonly</h2>
-        <Readonly />
-      </div>
-    </div>
-  ),
-  parameters: {
-    chromatic: { disable: false },
-  },
-};

package/src/form/search/search.stories.tsx

@@ -1,238 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import React, { useState } from "react";
-import Search from "./Search";
-
-export default {
-  title: "ds-react/Search",
-  component: Search,
-  argTypes: {
-    clearButton: {
-      control: {
-        type: "boolean",
-      },
-    },
-    size: {
-      control: {
-        type: "radio",
-        options: ["medium", "small"],
-      },
-    },
-    variant: {
-      control: {
-        type: "radio",
-        options: ["primary", "secondary", "simple"],
-      },
-    },
-    error: {
-      control: {
-        type: "text",
-      },
-    },
-  },
-  parameters: {
-    chromatic: { disable: true },
-  },
-} as Meta;
-
-type Story = StoryObj<typeof Search>;
-
-export const Default = (props) => {
-  const [state, setState] = useState("");
-  return (
-    <div data-theme={props.darkmode ? "dark" : "light"}>
-      <Search
-        value={props.controlled ? state : undefined}
-        onChange={props.controlled ? setState : undefined}
-        label="Søk"
-        size={props.size}
-        clearButton={props.clearButton}
-        variant={props.variant}
-        hideLabel={props.hideLabel}
-        error={props.error}
-        onSearchClick={console.log}
-      />
-    </div>
-  );
-};
-Default.args = {
-  controlled: false,
-  darkmode: false,
-  hideLabel: true,
-};
-
-export const Small = () => (
-  <div className="rowgap">
-    <div className="colgap">
-      <Search label="Søk" size="small" />
-      <Search label="Søk" variant="secondary" size="small" />
-      <Search label="Søk" variant="simple" size="small" />
-    </div>
-    <div className="colgap" data-theme="dark">
-      <Search label="Søk" size="small" />
-      <Search label="Søk" variant="secondary" size="small" />
-      <Search label="Søk" variant="simple" size="small" />
-    </div>
-  </div>
-);
-
-export const Variants = () => (
-  <div className="rowgap">
-    <div className="colgap">
-      <Search label="Søk" />
-      <Search label="Søk" variant="secondary" />
-      <Search label="Søk" variant="simple" />
-    </div>
-    <div className="colgap" data-theme="dark">
-      <Search label="Søk" />
-      <Search label="Søk" variant="secondary" />
-      <Search label="Søk" variant="simple" />
-    </div>
-  </div>
-);
-
-export const ErrorVariants = () => (
-  <div className="rowgap">
-    <div className="colgap">
-      <Search error="errormsg" label="Søk" />
-      <Search error="errormsg" label="Søk" variant="secondary" />
-      <Search error="errormsg" label="Søk" variant="simple" />
-    </div>
-    <div className="colgap" data-theme="dark">
-      <Search error="errormsg" label="Søk" />
-      <Search error="errormsg" label="Søk" variant="secondary" />
-      <Search error="errormsg" label="Søk" variant="simple" />
-    </div>
-  </div>
-);
-
-export const Placeholder = () => (
-  <div className="rowgap">
-    <div className="colgap">
-      <Search label="Søk" placeholder="Søk" />
-    </div>
-    <div className="colgap" data-theme="dark">
-      <Search label="Søk" placeholder="Søk" />
-    </div>
-  </div>
-);
-
-export const Text = () => (
-  <div className="rowgap">
-    <div className="colgap">
-      <Search label="Søk" value="Søketekst" />
-      <Search label="Søk" variant="secondary" value="Søketekst" />
-      <Search label="Søk" variant="simple" value="Søketekst" />
-    </div>
-    <div className="colgap" data-theme="dark">
-      <Search label="Søk" value="Søketekst" />
-      <Search label="Søk" variant="secondary" value="Søketekst" />
-      <Search label="Søk" variant="simple" value="Søketekst" />
-    </div>
-  </div>
-);
-
-export const WLabel = () => (
-  <div className="rowgap">
-    <div className="colgap">
-      <Search label="Label søk" variant="simple" hideLabel={false} />
-      <Search
-        label="Label søk"
-        description="Description søk"
-        variant="simple"
-        hideLabel={false}
-      />
-    </div>
-    <div className="colgap" data-theme="dark">
-      <Search label="Label søk" variant="simple" hideLabel={false} />
-      <Search
-        label="Label søk"
-        description="Description søk"
-        variant="simple"
-        hideLabel={false}
-      />
-    </div>
-  </div>
-);
-
-export const NoClearButton = () => (
-  <div className="colgap">
-    <Search label="Label søk" clearButton={false} value="søketekst" />
-    <Search
-      label="Label søk"
-      variant="simple"
-      clearButton={false}
-      value="søketekst"
-    />
-  </div>
-);
-
-export const HtmlSize = () => (
-  <div className="colgap">
-    <Search
-      label="Lorem ipsum dolor sit amet"
-      description="Saepe laborum delectus officia perferendis quaerat excepturi possimus hic enim dicta assumenda."
-      hideLabel={false}
-      htmlSize="20"
-    />
-    <Search
-      label="Lorem ipsum dolor sit amet"
-      description="Saepe laborum delectus officia perferendis quaerat excepturi possimus hic enim dicta assumenda."
-      hideLabel={false}
-      htmlSize="20"
-      variant="secondary"
-    />
-    <Search
-      label="Lorem ipsum dolor sit amet"
-      description="Saepe laborum delectus officia perferendis quaerat excepturi possimus hic enim dicta assumenda."
-      hideLabel={false}
-      htmlSize="20"
-      variant="simple"
-    />
-  </div>
-);
-
-export const Chromatic: Story = {
-  render: (...props) => (
-    <div>
-      <div>
-        <h2>Default</h2>
-        <Default {...props} />
-      </div>
-      <div>
-        <h2>Small</h2>
-        <Small />
-      </div>
-      <div>
-        <h2>Variants</h2>
-        <Variants />
-      </div>
-      <div>
-        <h2>ErrorVariants</h2>
-        <ErrorVariants />
-      </div>
-      <div>
-        <h2>Placeholder</h2>
-        <Placeholder />
-      </div>
-      <div>
-        <h2>Text</h2>
-        <Text />
-      </div>
-      <div>
-        <h2>WLabel</h2>
-        <WLabel />
-      </div>
-      <div>
-        <h2>NoClearButton</h2>
-        <NoClearButton />
-      </div>
-      <div>
-        <h2>HtmlSize</h2>
-        <HtmlSize />
-      </div>
-    </div>
-  ),
-  parameters: {
-    chromatic: { disable: false },
-  },
-};