@navikt/ds-react 6.5.0 → 6.6.0

package/src/form/select/select.stories.tsx

@@ -1,172 +0,0 @@
-import { Meta, StoryFn, StoryObj } from "@storybook/react";
-import React from "react";
-import Select, { SelectProps } from "./Select";
-
-const meta: Meta<typeof Select> = {
-  title: "ds-react/Select",
-  component: Select,
-  parameters: {
-    chromatic: { disable: true },
-  },
-};
-export default meta;
-
-const content = (
-  <>
-    <option value="">Velg land</option>
-    <option value="norge">Norge</option>
-    <option value="sverige">Sverige</option>
-  </>
-);
-
-export const Default: StoryFn<Omit<SelectProps, "children">> = (props) => (
-  <Select {...props}>{content}</Select>
-);
-Default.args = {
-  label: "Ipsum enim quis culpa",
-};
-Default.argTypes = {
-  description: {
-    type: "string",
-  },
-  size: {
-    control: { type: "radio" },
-    options: ["medium", "small"],
-  },
-  error: {
-    type: "string",
-  },
-  hideLabel: {
-    type: "boolean",
-  },
-  disabled: {
-    type: "boolean",
-  },
-  readOnly: {
-    type: "boolean",
-  },
-};
-
-export const Small = () => {
-  return (
-    <Select size="small" label="Ipsum enim quis culpa">
-      {content}
-    </Select>
-  );
-};
-
-export const Description = () => {
-  return (
-    <div className="colgap">
-      <Select
-        label="Ipsum enim quis culpa"
-        description="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
-      >
-        {content}
-      </Select>
-      <Select
-        label="Ipsum enim quis culpa"
-        description="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
-        size="small"
-      >
-        {content}
-      </Select>
-    </div>
-  );
-};
-
-export const Error = () => {
-  return (
-    <div className="colgap">
-      <Select
-        label="Ipsum enim quis culpa"
-        error="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
-      >
-        {content}
-      </Select>
-      <Select
-        label="Ipsum enim quis culpa"
-        error="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
-        size="small"
-      >
-        {content}
-      </Select>
-    </div>
-  );
-};
-
-export const Disabled = () => {
-  return (
-    <div className="colgap">
-      <Select label="Ipsum enim quis culpa" disabled>
-        {content}
-      </Select>
-      <Select label="Ipsum enim quis culpa" disabled size="small">
-        {content}
-      </Select>
-    </div>
-  );
-};
-
-export const HideLabel = () => {
-  return (
-    <Select label="Ipsum enim quis culpa" hideLabel>
-      {content}
-    </Select>
-  );
-};
-
-export const Readonly = () => {
-  return (
-    <div className="colgap">
-      <Select
-        label="Hvilkets land er du fra?"
-        description="Velg landet du bor 180 dagen i året"
-        readOnly
-      >
-        {content}
-      </Select>
-      <Select label="Hvilkets land er du fra?" readOnly error="feilmelding">
-        {content}
-      </Select>
-    </div>
-  );
-};
-
-export const Chromatic: StoryObj<typeof Select> = {
-  render: () => (
-    <div>
-      <div>
-        <h2>Default</h2>
-        <Default label="Ipsum enim quis culpa" />
-      </div>
-      <div>
-        <h2>Small</h2>
-        <Small />
-      </div>
-      <div>
-        <h2>Description</h2>
-        <Description />
-      </div>
-      <div>
-        <h2>Error</h2>
-        <Error />
-      </div>
-      <div>
-        <h2>Disabled</h2>
-        <Disabled />
-      </div>
-      <div>
-        <h2>HideLabel</h2>
-        <HideLabel />
-      </div>
-      <div>
-        <h2>Readonly</h2>
-        <Readonly />
-      </div>
-    </div>
-  ),
-  parameters: {
-    chromatic: { disable: false },
-  },
-};

package/src/form/switch/switch.stories.tsx

@@ -1,171 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import React from "react";
-import { VStack } from "../../layout/stack";
-import Switch from "./Switch";
-
-export default {
-  title: "ds-react/Switch",
-  component: Switch,
-  argTypes: {
-    size: {
-      control: {
-        type: "radio",
-        options: ["medium", "small"],
-      },
-    },
-    position: {
-      control: {
-        type: "radio",
-        options: ["right", "left"],
-      },
-    },
-    description: {
-      type: "string",
-    },
-    hideLabel: {
-      type: "boolean",
-    },
-    disabled: {
-      type: "boolean",
-    },
-    loading: {
-      type: "boolean",
-    },
-  },
-  parameters: {
-    chromatic: { disable: true },
-  },
-} satisfies Meta<typeof Switch>;
-
-type Story = StoryObj<typeof Switch>;
-
-export const Default: Story = {
-  args: {
-    children: "Label text",
-  },
-};
-
-export const Small: Story = {
-  args: {
-    children: "Label text",
-    size: "small",
-  },
-};
-
-export const Description: Story = {
-  args: {
-    children: "Label text",
-    description: "Cillum sint exercitation ut cillum.",
-  },
-};
-
-export const Loading: Story = {
-  render: () => {
-    return (
-      <div className="colgap">
-        <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>
-        </div>
-      </div>
-    );
-  },
-};
-
-export const Disabled: Story = {
-  render: () => (
-    <div className="colgap">
-      <Switch disabled>Label text</Switch>
-
-      <Switch checked disabled>
-        Label text
-      </Switch>
-    </div>
-  ),
-};
-
-export const HideLabel: Story = {
-  render: () => (
-    <div className="colgap">
-      <Switch hideLabel>Label text</Switch>
-
-      <Switch checked hideLabel>
-        Label text
-      </Switch>
-    </div>
-  ),
-};
-
-export const Readonly: Story = {
-  render: () => (
-    <div className="colgap">
-      <Switch description="Slår av alle notifikasjoner" readOnly>
-        Notifikasjoner
-      </Switch>
-
-      <Switch checked 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/textarea/textarea.stories.tsx

@@ -1,254 +0,0 @@
-import { Meta, StoryFn, StoryObj } from "@storybook/react";
-import { expect, userEvent, within } from "@storybook/test";
-import React, { useState } from "react";
-import { Button } from "../../button";
-import { Modal } from "../../modal";
-import { Textarea } from "./index";
-
-const meta: Meta<typeof Textarea> = {
-  title: "ds-react/Textarea",
-  component: Textarea,
-};
-export default meta;
-
-type Story = StoryObj<typeof Textarea>;
-
-export const Default: StoryObj<typeof Textarea> = {
-  render: (props) => {
-    return <Textarea {...props} />;
-  },
-
-  args: {
-    maxLength: 0,
-    label: "Ipsum enim quis culpa",
-  },
-
-  argTypes: {
-    resize: {
-      control: { type: "radio" },
-      options: [true, "vertical", "horizontal"],
-    },
-    size: {
-      control: { type: "radio" },
-      options: ["medium", "small"],
-    },
-    description: { type: "string" },
-    error: { type: "string" },
-    hideLabel: { type: "boolean" },
-    disabled: { type: "boolean" },
-    readOnly: { type: "boolean" },
-    maxRows: { type: "number" },
-    minRows: { type: "number" },
-  },
-  parameters: {
-    chromatic: { disable: true },
-  },
-};
-
-export const Small: StoryFn = () => {
-  return <Textarea size="small" label="Ipsum enim quis culpa" />;
-};
-
-export const Description: StoryFn = () => {
-  return (
-    <div className="colgap">
-      <Textarea
-        label="Ipsum enim quis culpa"
-        description="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
-      />
-      <Textarea
-        label="Ipsum enim quis culpa"
-        description="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
-        size="small"
-      />
-    </div>
-  );
-};
-
-export const Error: StoryFn = () => {
-  return (
-    <div className="colgap">
-      <Textarea
-        label="Ipsum enim quis culpa"
-        error="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
-      />
-
-      <Textarea
-        label="Ipsum enim quis culpa"
-        error="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
-        size="small"
-      />
-
-      <Textarea
-        label="Ipsum enim quis culpa"
-        error="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
-        maxLength={20}
-      />
-
-      <Textarea
-        label="Ipsum enim quis culpa"
-        error="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
-        value="Sed dignissim sollicitudin porta."
-        maxLength={20}
-        size="small"
-      />
-    </div>
-  );
-};
-
-export const Disabled: StoryFn = () => {
-  return (
-    <div className="colgap">
-      <Textarea label="Ipsum enim quis culpa" disabled />
-      <Textarea label="Ipsum enim quis culpa" disabled size="small" />
-    </div>
-  );
-};
-
-export const HideLabel: StoryFn = () => {
-  return <Textarea label="Ipsum enim quis culpa" hideLabel />;
-};
-
-export const MaxLength: StoryFn = () => {
-  return <Textarea maxLength={50} label="Ipsum enim quis culpa" />;
-};
-
-export const MinRows: StoryFn = () => {
-  return <Textarea minRows={5} label="Ipsum enim quis culpa" />;
-};
-
-export const MaxRows: StoryFn = () => {
-  return (
-    <Textarea
-      maxRows={3}
-      value="Aute fugiat ut culpa enim ad culpa proident adipisicing anim proident ipsum elit. Cillum Lorem magna nisi cupidatat consequat culpa. Veniam ex quis elit dolore ea cupidatat fugiat in. Sint proident magna duis consequat velit ea velit pariatur in dolore ad. Aliqua officia nostrud veniam pariatur eu sint elit qui amet."
-      label="Ipsum enim quis culpa"
-    />
-  );
-};
-
-export const Resize: StoryFn = () => {
-  return <Textarea resize label="Ipsum enim quis culpa" />;
-};
-
-export const OnChange: StoryFn = () => {
-  return (
-    <Textarea
-      label="Ipsum enim quis culpa"
-      onChange={console.log}
-      maxLength={50}
-    />
-  );
-};
-OnChange.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const input = canvas.getByLabelText("Ipsum enim quis culpa");
-  userEvent.click(input);
-  await userEvent.type(input, "Aute fugiat ut culpa");
-  const text = canvas.getByText("30 tegn igjen");
-  expect(text).toBeVisible();
-};
-
-export const Controlled: StoryFn = () => {
-  const [value, setValue] = useState("");
-  return (
-    <Textarea
-      resize
-      label="Ipsum enim quis culpa"
-      value={value}
-      onChange={(event) => setValue(event.currentTarget.value)}
-    />
-  );
-};
-
-export const Readonly: StoryFn = () => {
-  return (
-    <div className="colgap">
-      <Textarea
-        label="På hvilket grunnlag har du tatt denne vurderingen?"
-        description="Beskriv i korte punkter"
-        value="Denne vurderingen ble gjort på grunnlag av X og Y"
-        readOnly
-      />
-      <Textarea
-        label="På hvilket grunnlag har du tatt denne vurderingen?"
-        readOnly
-        value="Denne vurderingen ble gjort på grunnlag av X og Y"
-        error="feilmelding"
-      />
-    </div>
-  );
-};
-
-export const AutoScrollbar: StoryFn<typeof Textarea> = (props) => (
-  <div
-    style={{
-      border: "1px solid lightGreen",
-      height: "90vh",
-      display: "flex",
-      flexDirection: "column",
-    }}
-  >
-    <div style={{ border: "1px dashed gray" }}>
-      <h1>Header</h1>
-    </div>
-    <Textarea
-      {...props}
-      resize
-      label="Textarea with autoScrollbar"
-      description="Description"
-      maxLength={30}
-      UNSAFE_autoScrollbar
-    />
-    <div style={{ border: "1px dashed gray" }}>
-      <Button>Send</Button>
-    </div>
-  </div>
-);
-AutoScrollbar.argTypes = {
-  error: { type: "string" },
-  hideLabel: { type: "boolean" },
-  maxRows: { type: "number" },
-  minRows: { type: "number" },
-};
-
-export const ModalStrictMode: StoryFn<typeof Textarea> = () => {
-  // Story added after fixing an issue where TextareaAutoSize would reach max re-renders
-  // and set the height to 2px when used in StrictMode in a Modal that is initially open.
-  return (
-    <React.StrictMode>
-      <Modal open onClose={() => null} aria-label="Modal med textarea">
-        <Modal.Body>
-          <Textarea label="Har du noen tilbakemeldinger?" />
-        </Modal.Body>
-      </Modal>
-    </React.StrictMode>
-  );
-};
-ModalStrictMode.parameters = {
-  chromatic: { disable: true }, // Not reproducable in Chromatic
-};
-
-export const Chromatic: Story = {
-  render: (props) => (
-    <div>
-      <Textarea {...props} label="Textarea" />
-      <Small />
-      <Description />
-      <Error />
-      <Disabled />
-      <HideLabel />
-      <MaxLength />
-      <MinRows />
-      <MaxRows />
-      <Resize />
-      <OnChange />
-      <Controlled />
-      <Readonly />
-      <AutoScrollbar label="autoscrollbar" />
-    </div>
-  ),
-  parameters: {
-    chromatic: { disable: false },
-  },
-};