@navikt/ds-react 6.5.0 → 6.6.0

package/src/toggle-group/ToggleGroup.stories.tsx

@@ -1,198 +0,0 @@
-import { Meta } from "@storybook/react";
-import React, { useState } from "react";
-import {
-  EnvelopeClosedIcon,
-  EnvelopeOpenIcon,
-  InboxUpIcon,
-} from "@navikt/aksel-icons";
-import { VStack } from "../layout/stack";
-import ToggleGroup from "./ToggleGroup";
-
-const meta: Meta<typeof ToggleGroup> = {
-  title: "ds-react/ToggleGroup",
-  component: ToggleGroup,
-  argTypes: {
-    size: {
-      options: ["medium", "small"],
-      control: {
-        type: "radio",
-      },
-    },
-    variant: {
-      options: ["action", "neutral"],
-      control: { type: "radio" },
-    },
-  },
-  parameters: {
-    chromatic: { disable: true },
-  },
-};
-
-export default meta;
-
-const Items = (icon?: boolean, both?: boolean) => (
-  <>
-    <ToggleGroup.Item value="ulest">
-      {both ? (
-        <>
-          <EnvelopeClosedIcon /> Uleste
-        </>
-      ) : (
-        <>{icon ? <EnvelopeClosedIcon /> : "Uleste"}</>
-      )}
-    </ToggleGroup.Item>
-    <ToggleGroup.Item value="lest">
-      {both ? (
-        <>
-          <EnvelopeOpenIcon /> Leste
-        </>
-      ) : (
-        <>{icon ? <EnvelopeOpenIcon /> : "Leste"}</>
-      )}
-    </ToggleGroup.Item>
-    <ToggleGroup.Item value="sendt">
-      {both ? (
-        <>
-          <InboxUpIcon /> Sendt
-        </>
-      ) : (
-        <>{icon ? <InboxUpIcon /> : "Sendt"}</>
-      )}
-    </ToggleGroup.Item>
-  </>
-);
-
-export const Default = (props) => {
-  const [activeValue, setActiveValue] = useState("ulest");
-  return (
-    <ToggleGroup
-      size={props.size}
-      variant={props.variant}
-      value={activeValue}
-      onChange={setActiveValue}
-      label={props.label ? "Proident minim dolor pariatur." : undefined}
-    >
-      {Items(props.icon, props.text && props.icon)}
-    </ToggleGroup>
-  );
-};
-
-Default.args = {
-  icon: true,
-  text: true,
-  label: false,
-};
-
-export const Compositions = () => {
-  const [activeValue, setActiveValue] = useState("ulest");
-
-  return (
-    <VStack gap="6">
-      <ToggleGroup value={activeValue} onChange={setActiveValue}>
-        {Items()}
-      </ToggleGroup>
-      <ToggleGroup value={activeValue} onChange={setActiveValue}>
-        {Items(true, true)}
-      </ToggleGroup>
-      <ToggleGroup value={activeValue} onChange={setActiveValue}>
-        {Items(true)}
-      </ToggleGroup>
-      <ToggleGroup fill value={activeValue} onChange={setActiveValue}>
-        {Items(true)}
-      </ToggleGroup>
-    </VStack>
-  );
-};
-
-export const Variants = () => {
-  const [activeValue, setActiveValue] = useState("ulest");
-
-  return (
-    <VStack gap="6">
-      <ToggleGroup
-        variant="action"
-        value={activeValue}
-        onChange={setActiveValue}
-      >
-        {Items(true, true)}
-      </ToggleGroup>
-      <ToggleGroup
-        variant="neutral"
-        value={activeValue}
-        onChange={setActiveValue}
-      >
-        {Items(true, true)}
-      </ToggleGroup>
-    </VStack>
-  );
-};
-
-export const Small = () => {
-  const [activeValue, setActiveValue] = useState("ulest");
-
-  return (
-    <VStack gap="6">
-      <ToggleGroup size="small" value={activeValue} onChange={setActiveValue}>
-        {Items()}
-      </ToggleGroup>
-      <ToggleGroup size="small" value={activeValue} onChange={setActiveValue}>
-        {Items(true, true)}
-      </ToggleGroup>
-      <ToggleGroup size="small" value={activeValue} onChange={setActiveValue}>
-        {Items(true)}
-      </ToggleGroup>
-    </VStack>
-  );
-};
-
-export const Chromatic = {
-  render: () => (
-    <VStack gap="6">
-      <div>
-        <h2>Text</h2>
-        <ToggleGroup value="ulest" onChange={console.log}>
-          {Items()}
-        </ToggleGroup>
-      </div>
-      <div>
-        <h2>Icon</h2>
-        <ToggleGroup value="ulest" onChange={console.log}>
-          {Items(true)}
-        </ToggleGroup>
-      </div>
-      <div>
-        <h2>Text + icon</h2>
-        <ToggleGroup value="ulest" onChange={console.log}>
-          {Items(true, true)}
-        </ToggleGroup>
-      </div>
-      <div style={{ minWidth: 600 }}>
-        <h2>Fill</h2>
-        <ToggleGroup value="ulest" onChange={console.log} fill>
-          {Items(true, true)}
-        </ToggleGroup>
-      </div>
-      <div>
-        <h2>Small</h2>
-        <ToggleGroup value="ulest" onChange={console.log} size="small">
-          {Items(true, true)}
-        </ToggleGroup>
-      </div>
-      <div>
-        <h2>Small + fill</h2>
-        <ToggleGroup value="ulest" onChange={console.log} size="small" fill>
-          {Items(true, true)}
-        </ToggleGroup>
-      </div>
-      <div>
-        <h2>Neutral</h2>
-        <ToggleGroup value="ulest" onChange={console.log} variant="neutral">
-          {Items(true, true)}
-        </ToggleGroup>
-      </div>
-    </VStack>
-  ),
-  parameters: {
-    chromatic: { disable: false },
-  },
-};

package/src/tooltip/tooltip.stories.tsx

@@ -1,101 +0,0 @@
-import { Meta } from "@storybook/react";
-import React from "react";
-import { Alert } from "../alert";
-import { Button } from "../button";
-import { Search } from "../form/search";
-import Tooltip from "./Tooltip";
-
-export default {
-  title: "ds-react/Tooltip",
-  component: Tooltip,
-  parameters: {
-    chromatic: { disable: true },
-  },
-  argTypes: {
-    open: {
-      control: {
-        type: "boolean",
-      },
-    },
-    offset: {
-      control: {
-        type: "number",
-      },
-    },
-    placement: {
-      control: {
-        type: "radio",
-        options: ["top", "right", "bottom", "left"],
-      },
-    },
-  },
-} as Meta;
-
-export const Demo = () => (
-  <div>
-    <Tooltip content="Tooltip example" placement="top">
-      <Alert variant="info">test</Alert>
-    </Tooltip>
-    <Tooltip content="Tooltip example" placement="top">
-      <Search label="søk" />
-    </Tooltip>
-    <Tooltip content="Tooltip example" placement="top">
-      <Button aria-describedby="test123">Tooltip</Button>
-    </Tooltip>
-  </div>
-);
-
-export const Default = {
-  render: (props) => {
-    return (
-      <Tooltip
-        content="Tooltip example"
-        open={props?.open}
-        keys={props?.keys ? ["Cmd", "K"] : undefined}
-        placement={props?.placement}
-        arrow={props?.arrow}
-        delay={props?.delay}
-        offset={props?.offset}
-      >
-        <Button aria-describedby="test123">Tooltip</Button>
-      </Tooltip>
-    );
-  },
-
-  args: {
-    keys: false,
-    arrow: true,
-    delay: 150,
-  },
-};
-
-export const Placement = () => {
-  return (
-    <div className="colgap">
-      <Tooltip content="Tooltip example" open={true} placement="top">
-        <div>Element</div>
-      </Tooltip>
-      <Tooltip content="Tooltip example" open={true} placement="right">
-        <div>Element</div>
-      </Tooltip>
-      <Tooltip content="Tooltip example" open={true} placement="left">
-        <div>Element</div>
-      </Tooltip>
-      <Tooltip content="Tooltip example" open={true} placement="bottom">
-        <div>Element</div>
-      </Tooltip>
-    </div>
-  );
-};
-
-export const Keys = () => {
-  return (
-    <Tooltip
-      content="Tooltip example Laboris reprehenderit sit sunt nisi velit mollit esse excepteur. Consectetur ullamco quis laboris enim nulla amet proident proident deserunt laborum. Aliqua adipisicing ipsum nisi ipsum nisi pariatur tempor amet aute labore laboris eiusmod adipisicing eu. Et cillum ipsum voluptate ea irure aliquip laboris mollit in. Voluptate tempor do voluptate reprehenderit ea dolor velit ullamco et magna enim ut sit. Pariatur culpa nulla consectetur voluptate id Lorem incididunt magna aliqua sunt ut Lorem. Laborum est quis aute enim et fugiat aute."
-      open={true}
-      keys={["CMD", "K"]}
-    >
-      <div>Element</div>
-    </Tooltip>
-  );
-};

package/src/typography/stories/bodylong.stories.tsx

@@ -1,209 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { expect, within } from "@storybook/test";
-import React from "react";
-import { VStack } from "../../layout/stack";
-import BodyLong from "../BodyLong";
-
-const meta: Meta<typeof BodyLong> = {
-  title: "ds-react/Typography/BodyLong",
-  component: BodyLong,
-  decorators: [(story) => <div style={{ maxWidth: "700px" }}>{story()}</div>],
-  parameters: {
-    chromatic: { disable: true },
-  },
-};
-export default meta;
-
-type Story = StoryObj<typeof BodyLong>;
-
-const lorem =
-  "Hvis du ikke bor sammen med begge foreldrene dine, kan du ha rett til barnebidrag fra en eller begge foreldre mens du fullfører videregående skole eller tilsvarende.";
-
-export const Controls: Story = {
-  args: {
-    spacing: false,
-    children: lorem,
-
-    truncate: false,
-    visuallyHidden: false,
-  },
-  argTypes: {
-    size: {
-      control: "radio",
-      options: ["large", "medium", "small"],
-    },
-    weight: {
-      control: "radio",
-      options: ["regular", "semibold"],
-    },
-    align: {
-      control: "radio",
-      options: ["start", "center", "end"],
-    },
-    textColor: {
-      control: "radio",
-      options: ["default", "subtle"],
-    },
-  },
-};
-
-export const SizeLarge: Story = {
-  render: () => (
-    <VStack gap="4">
-      <BodyLong size="large">{lorem}</BodyLong>
-      <BodyLong size="large" weight="semibold">
-        {lorem}
-      </BodyLong>
-      <BodyLong size="large" truncate>
-        {lorem}
-      </BodyLong>
-    </VStack>
-  ),
-};
-
-export const SizeMedium: Story = {
-  render: () => (
-    <VStack gap="2">
-      <BodyLong size="medium">{lorem}</BodyLong>
-      <BodyLong size="medium" weight="semibold">
-        {lorem}
-      </BodyLong>
-      <BodyLong size="medium" truncate>
-        {lorem}
-      </BodyLong>
-    </VStack>
-  ),
-};
-
-export const SizeSmall: Story = {
-  render: () => (
-    <VStack gap="2">
-      <BodyLong size="small">{lorem}</BodyLong>
-      <BodyLong size="small" weight="semibold">
-        {lorem}
-      </BodyLong>
-      <BodyLong size="small" truncate>
-        {lorem}
-      </BodyLong>
-    </VStack>
-  ),
-};
-
-export const SpacingLarge: Story = {
-  render: () => (
-    <div>
-      <BodyLong size="large" spacing>
-        {lorem}
-      </BodyLong>
-      <BodyLong size="large" spacing>
-        {lorem}
-      </BodyLong>
-    </div>
-  ),
-};
-
-export const SpacingMedium: Story = {
-  render: () => (
-    <div>
-      <BodyLong size="medium" spacing>
-        {lorem}
-      </BodyLong>
-      <BodyLong size="medium" spacing>
-        {lorem}
-      </BodyLong>
-    </div>
-  ),
-};
-
-export const SpacingSmall: Story = {
-  render: () => (
-    <div>
-      <BodyLong size="small" spacing>
-        {lorem}
-      </BodyLong>
-      <BodyLong size="small" spacing>
-        {lorem}
-      </BodyLong>
-    </div>
-  ),
-};
-
-export const Colors: Story = {
-  render: () => (
-    <VStack gap="2">
-      <BodyLong textColor="default">{lorem}</BodyLong>
-      <BodyLong textColor="subtle">{lorem}</BodyLong>
-    </VStack>
-  ),
-};
-
-export const Align: Story = {
-  render: () => (
-    <VStack gap="2">
-      <BodyLong align="start">{lorem}</BodyLong>
-      <BodyLong align="center">{lorem}</BodyLong>
-      <BodyLong align="end">{lorem}</BodyLong>
-    </VStack>
-  ),
-};
-
-export const OverrideTag: Story = {
-  render: () => (
-    <div>
-      <BodyLong spacing>default bodylong</BodyLong>
-      <BodyLong as="legend">legend bodylong</BodyLong>
-    </div>
-  ),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    const defaultBodyLong = canvas.getByText("default bodylong");
-    const legendBodyLong = canvas.getByText("legend bodylong");
-
-    expect(defaultBodyLong.tagName).toEqual("P");
-    expect(legendBodyLong.tagName).toEqual("LEGEND");
-  },
-};
-
-export const Chromatic: Story = {
-  render: (...props) => (
-    <div>
-      <div>
-        <h2>Large</h2>
-        <h3>Size</h3>
-        {SizeLarge.render?.(...props)}
-        <h3>Spacing</h3>
-        {SpacingLarge.render?.(...props)}
-      </div>
-      <div>
-        <h2>Medium</h2>
-        <h3>Size</h3>
-        {SizeMedium.render?.(...props)}
-        <h3>Spacing</h3>
-        {SpacingMedium.render?.(...props)}
-      </div>
-      <div>
-        <h2>Small</h2>
-        <h3>Size</h3>
-        {SizeSmall.render?.(...props)}
-        <h3>Spacing</h3>
-        {SpacingSmall.render?.(...props)}
-      </div>
-      <div>
-        <h2>Colors</h2>
-        {Colors.render?.(...props)}
-      </div>
-      <div>
-        <h2>Align</h2>
-        {Align.render?.(...props)}
-      </div>
-      <div>
-        <h2>Override Tag</h2>
-        {OverrideTag.render?.(...props)}
-      </div>
-    </div>
-  ),
-  parameters: {
-    chromatic: { disable: false },
-  },
-};

package/src/typography/stories/bodyshort.stories.tsx

@@ -1,208 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { expect, within } from "@storybook/test";
-import React from "react";
-import { VStack } from "../../layout/stack";
-import { BodyShort } from "../BodyShort";
-
-const meta: Meta<typeof BodyShort> = {
-  title: "ds-react/Typography/BodyShort",
-  component: BodyShort,
-  decorators: [(story) => <div style={{ maxWidth: "250px" }}>{story()}</div>],
-  parameters: {
-    chromatic: { disable: true },
-  },
-};
-export default meta;
-
-type Story = StoryObj<typeof BodyShort>;
-
-const lorem = "Du må gjøre en filtrering for å se brukere i listen.";
-
-export const Controls: Story = {
-  args: {
-    spacing: false,
-    children: lorem,
-
-    truncate: false,
-    visuallyHidden: false,
-  },
-  argTypes: {
-    size: {
-      control: "radio",
-      options: ["large", "medium", "small"],
-    },
-    weight: {
-      control: "radio",
-      options: ["regular", "semibold"],
-    },
-    align: {
-      control: "radio",
-      options: ["start", "center", "end"],
-    },
-    textColor: {
-      control: "radio",
-      options: ["default", "subtle"],
-    },
-  },
-};
-
-export const SizeLarge: Story = {
-  render: () => (
-    <VStack gap="2">
-      <BodyShort size="large">{lorem}</BodyShort>
-      <BodyShort size="large" weight="semibold">
-        {lorem}
-      </BodyShort>
-      <BodyShort size="large" truncate>
-        {lorem}
-      </BodyShort>
-    </VStack>
-  ),
-};
-
-export const SizeMedium: Story = {
-  render: () => (
-    <VStack gap="2">
-      <BodyShort size="medium">{lorem}</BodyShort>
-      <BodyShort size="medium" weight="semibold">
-        {lorem}
-      </BodyShort>
-      <BodyShort size="medium" truncate>
-        {lorem}
-      </BodyShort>
-    </VStack>
-  ),
-};
-
-export const SizeSmall: Story = {
-  render: () => (
-    <VStack gap="2">
-      <BodyShort size="small">{lorem}</BodyShort>
-      <BodyShort size="small" weight="semibold">
-        {lorem}
-      </BodyShort>
-      <BodyShort size="small" truncate>
-        {lorem}
-      </BodyShort>
-    </VStack>
-  ),
-};
-
-export const SpacingLarge: Story = {
-  render: () => (
-    <div>
-      <BodyShort size="large" spacing>
-        {lorem}
-      </BodyShort>
-      <BodyShort size="large" spacing>
-        {lorem}
-      </BodyShort>
-    </div>
-  ),
-};
-
-export const SpacingMedium: Story = {
-  render: () => (
-    <div>
-      <BodyShort size="medium" spacing>
-        {lorem}
-      </BodyShort>
-      <BodyShort size="medium" spacing>
-        {lorem}
-      </BodyShort>
-    </div>
-  ),
-};
-
-export const SpacingSmall: Story = {
-  render: () => (
-    <div>
-      <BodyShort size="small" spacing>
-        {lorem}
-      </BodyShort>
-      <BodyShort size="small" spacing>
-        {lorem}
-      </BodyShort>
-    </div>
-  ),
-};
-
-export const Colors: Story = {
-  render: () => (
-    <VStack gap="2">
-      <BodyShort textColor="default">{lorem}</BodyShort>
-      <BodyShort textColor="subtle">{lorem}</BodyShort>
-    </VStack>
-  ),
-};
-
-export const Align: Story = {
-  render: () => (
-    <VStack gap="2">
-      <BodyShort align="start">{lorem}</BodyShort>
-      <BodyShort align="center">{lorem}</BodyShort>
-      <BodyShort align="end">{lorem}</BodyShort>
-    </VStack>
-  ),
-};
-
-export const OverrideTag: Story = {
-  render: () => (
-    <div>
-      <BodyShort spacing>default bodyshort</BodyShort>
-      <BodyShort as="legend">legend bodyshort</BodyShort>
-    </div>
-  ),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    const defaultBodyShort = canvas.getByText("default bodyshort");
-    const legendBodyShort = canvas.getByText("legend bodyshort");
-
-    expect(defaultBodyShort.tagName).toEqual("P");
-    expect(legendBodyShort.tagName).toEqual("LEGEND");
-  },
-};
-
-export const Chromatic: Story = {
-  render: (...props) => (
-    <div>
-      <div>
-        <h2>Large</h2>
-        <h3>Size</h3>
-        {SizeLarge.render?.(...props)}
-        <h3>Spacing</h3>
-        {SpacingLarge.render?.(...props)}
-      </div>
-      <div>
-        <h2>Medium</h2>
-        <h3>Size</h3>
-        {SizeMedium.render?.(...props)}
-        <h3>Spacing</h3>
-        {SpacingMedium.render?.(...props)}
-      </div>
-      <div>
-        <h2>Small</h2>
-        <h3>Size</h3>
-        {SizeSmall.render?.(...props)}
-        <h3>Spacing</h3>
-        {SpacingSmall.render?.(...props)}
-      </div>
-      <div>
-        <h2>Colors</h2>
-        {Colors.render?.(...props)}
-      </div>
-      <div>
-        <h2>Align</h2>
-        {Align.render?.(...props)}
-      </div>
-      <div>
-        <h2>Override Tag</h2>
-        {OverrideTag.render?.(...props)}
-      </div>
-    </div>
-  ),
-  parameters: {
-    chromatic: { disable: false },
-  },
-};