@navikt/ds-react 6.4.1 → 6.6.0

package/src/chips/chips.stories.tsx

@@ -1,260 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import React, { useState } from "react";
-import { Chips } from ".";
-
-const meta: Meta<typeof Chips> = {
-  title: "ds-react/Chips",
-  component: Chips,
-  parameters: {
-    chromatic: { disable: true },
-  },
-};
-export default meta;
-
-type Story = StoryObj<typeof Chips>;
-
-const options = ["Norsk", "Dansk", "Svensk", "Tysk", "Spansk"];
-
-export const Default = (props) => {
-  const [selected, setSelected] = useState(["Dansk", "Svensk"]);
-  const [filter, setFilter] = useState(options);
-
-  if (props.type === "toggle") {
-    return (
-      <Chips size={props.size ?? "medium"}>
-        {options.map((c) => (
-          <Chips.Toggle
-            selected={selected.includes(c)}
-            key={c}
-            onClick={() =>
-              setSelected(
-                selected.includes(c)
-                  ? selected.filter((x) => x !== c)
-                  : [...selected, c],
-              )
-            }
-          >
-            {c}
-          </Chips.Toggle>
-        ))}
-      </Chips>
-    );
-  }
-
-  return (
-    <Chips size={props.size ?? "medium"}>
-      {filter.map((c) => (
-        <Chips.Removable
-          key={c}
-          onClick={() => setFilter((x) => x.filter((y) => y !== c))}
-        >
-          {c}
-        </Chips.Removable>
-      ))}
-    </Chips>
-  );
-};
-Default.argTypes = {
-  type: {
-    control: { type: "radio" },
-    options: ["toggle", "removable"],
-  },
-  size: {
-    control: { type: "radio" },
-    options: ["medium", "small"],
-  },
-};
-
-export const Toggle = ({ size }) => {
-  const [selected, setSelected] = useState<number[]>([2, 4]);
-  return (
-    <div className="colgap">
-      <Chips size={size}>
-        {options.map((c, y) => (
-          <Chips.Toggle
-            selected={selected.includes(y)}
-            onClick={() =>
-              setSelected(
-                selected.includes(y)
-                  ? selected.filter((x) => x !== y)
-                  : [...selected, y],
-              )
-            }
-            key={y}
-          >
-            {c}
-          </Chips.Toggle>
-        ))}
-      </Chips>
-      <Chips size={size}>
-        {options.map((c, y) => (
-          <Chips.Toggle
-            variant="neutral"
-            selected={selected.includes(y)}
-            onClick={() =>
-              setSelected(
-                selected.includes(y)
-                  ? selected.filter((x) => x !== y)
-                  : [...selected, y],
-              )
-            }
-            key={y}
-          >
-            {c}
-          </Chips.Toggle>
-        ))}
-      </Chips>
-    </div>
-  );
-};
-Toggle.argTypes = {
-  size: {
-    control: { type: "radio" },
-    options: ["medium", "small"],
-  },
-};
-
-export const ToggleNoCheckmark = () => {
-  const [selected, setSelected] = useState<number>(2);
-  return (
-    <div className="colgap">
-      <Chips>
-        {options.map((c, y) => (
-          <Chips.Toggle
-            selected={selected === y}
-            checkmark={false}
-            onClick={() => setSelected(y)}
-            key={y}
-          >
-            {c}
-          </Chips.Toggle>
-        ))}
-      </Chips>
-      <Chips>
-        {options.map((c, y) => (
-          <Chips.Toggle
-            variant="neutral"
-            selected={selected === y}
-            checkmark={false}
-            onClick={() => setSelected(y)}
-            key={y}
-          >
-            {c}
-          </Chips.Toggle>
-        ))}
-      </Chips>
-    </div>
-  );
-};
-
-export const Removable = () => {
-  return (
-    <div className="colgap">
-      <Chips>
-        {options.map((c, y) => (
-          <Chips.Removable key={y}>{c}</Chips.Removable>
-        ))}
-      </Chips>
-      <Chips>
-        {options.map((c, y) => (
-          <Chips.Removable variant="neutral" key={y}>
-            {c}
-          </Chips.Removable>
-        ))}
-      </Chips>
-    </div>
-  );
-};
-
-export const Regular = () => {
-  const [selected, setSelected] = useState<number[]>([2]);
-  return (
-    <div className="colgap">
-      <Chips>
-        {options.map((c, y) => (
-          <Chips.Removable key={y}>{c}</Chips.Removable>
-        ))}
-      </Chips>
-      <Chips>
-        {options.map((c, y) => (
-          <Chips.Toggle
-            selected={selected.includes(y)}
-            onClick={() =>
-              setSelected(
-                selected.includes(y)
-                  ? selected.filter((x) => x !== y)
-                  : [...selected, y],
-              )
-            }
-            key={y}
-          >
-            {c}
-          </Chips.Toggle>
-        ))}
-      </Chips>
-    </div>
-  );
-};
-
-export const Small = () => {
-  const [selected, setSelected] = useState<number[]>([2, 4]);
-  return (
-    <div className="colgap">
-      <Chips size="small">
-        {options.map((c, y) => (
-          <Chips.Removable key={y}>{c}</Chips.Removable>
-        ))}
-      </Chips>
-      <Chips size="small">
-        {options.map((c, y) => (
-          <Chips.Toggle
-            selected={selected.includes(y)}
-            onClick={() =>
-              setSelected(
-                selected.includes(y)
-                  ? selected.filter((x) => x !== y)
-                  : [...selected, y],
-              )
-            }
-            key={y}
-          >
-            {c}
-          </Chips.Toggle>
-        ))}
-      </Chips>
-    </div>
-  );
-};
-
-export const Chromatic: Story = {
-  render: () => (
-    <div>
-      <div>
-        <h2>Default</h2>
-        <Default />
-      </div>
-      <div>
-        <h2>Toggle</h2>
-        <h3>Medium</h3>
-        <Toggle size="medium" />
-        <h3>Small</h3>
-        <Toggle size="small" />
-      </div>
-      <div>
-        <h2>Removable</h2>
-        <Removable />
-      </div>
-      <div>
-        <h2>Regular</h2>
-        <Regular />
-      </div>
-      <div>
-        <h2>Small</h2>
-        <Small />
-      </div>
-    </div>
-  ),
-  parameters: {
-    chromatic: { disable: false },
-  },
-};

package/src/copybutton/copy-button.stories.tsx

@@ -1,261 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { userEvent, within } from "@storybook/test";
-import React from "react";
-import { LinkIcon, ThumbUpIcon } from "@navikt/aksel-icons";
-import { CopyButton } from ".";
-import { Tooltip } from "../tooltip";
-
-const meta: Meta<typeof CopyButton> = {
-  title: "ds-react/CopyButton",
-  component: CopyButton,
-};
-export default meta;
-
-type Story = StoryObj<typeof CopyButton>;
-
-export const Default: Story = {
-  render: (props) => <CopyButton {...props} />,
-  argTypes: {
-    size: {
-      control: { type: "radio" },
-      options: ["medium", "small", "xsmall"],
-    },
-    variant: {
-      control: { type: "radio" },
-      options: ["neutral", "action"],
-    },
-  },
-  args: {
-    size: "medium",
-    activeDuration: 2000,
-    copyText: "3.14",
-    text: "",
-    activeText: "",
-  },
-  parameters: {
-    chromatic: { disable: true },
-  },
-};
-
-export const Interaction: Story = {
-  render: () => (
-    <CopyButton
-      copyText="3.14"
-      variant="action"
-      text="Kopier"
-      data-testid="copy-button"
-    />
-  ),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    const button = canvas.getByTestId("copy-button");
-
-    userEvent.click(button);
-  },
-};
-
-export const Variants: Story = {
-  render: () => (
-    <div className="colgap">
-      <CopyButton copyText="3.14" variant="action" text="Kopier" />
-
-      <CopyButton copyText="3.14" variant="neutral" text="Kopier" />
-    </div>
-  ),
-};
-
-export const IconPosition: Story = {
-  render: () => (
-    <div className="colgap">
-      <CopyButton copyText="3.14" iconPosition="left" text="Kopier" />
-
-      <CopyButton copyText="3.14" iconPosition="right" text="Kopier" />
-    </div>
-  ),
-};
-
-export const Sizes: Story = {
-  render: () => (
-    <div className="colgap">
-      <div className="rowgap">
-        <CopyButton copyText="3.14" variant="action" />
-        <CopyButton copyText="3.14" variant="neutral" />
-        <CopyButton copyText="3.14" variant="action" text="Kopier" />
-        <CopyButton copyText="3.14" variant="neutral" text="Kopier" />
-      </div>
-      <div className="rowgap">
-        <CopyButton size="small" copyText="3.14" variant="action" />
-        <CopyButton size="small" copyText="3.14" variant="neutral" />
-        <CopyButton
-          size="small"
-          copyText="3.14"
-          variant="action"
-          text="Kopier"
-        />
-        <CopyButton
-          size="small"
-          copyText="3.14"
-          variant="neutral"
-          text="Kopier"
-        />
-      </div>
-      <div className="rowgap">
-        <CopyButton size="xsmall" copyText="3.14" variant="action" />
-        <CopyButton size="xsmall" copyText="3.14" variant="neutral" />
-        <CopyButton
-          size="xsmall"
-          copyText="3.14"
-          variant="action"
-          text="Kopier"
-        />
-        <CopyButton
-          size="xsmall"
-          copyText="3.14"
-          variant="neutral"
-          text="Kopier"
-        />
-      </div>
-    </div>
-  ),
-};
-
-export const Texts: Story = {
-  render: () => (
-    <div className="colgap">
-      <div>
-        <CopyButton
-          copyText="3.14"
-          text="Kopier XYZ"
-          activeText="Kopierte XYZ"
-        />
-      </div>
-      <div>
-        <CopyButton
-          copyText="3.14"
-          size="small"
-          text="Kopier XYZ"
-          activeText="Kopierte XYZ"
-        />
-      </div>
-      <div>
-        <CopyButton
-          copyText="3.14"
-          size="xsmall"
-          text="Kopier XYZ"
-          activeText="Kopierte XYZ"
-        />
-      </div>
-    </div>
-  ),
-};
-
-export const Icons: Story = {
-  render: () => (
-    <div className="rowgap">
-      <div>
-        <CopyButton
-          copyText="3.14"
-          icon={<LinkIcon title="Kopier" />}
-          activeIcon={<ThumbUpIcon title="Kopiert" />}
-        />
-      </div>
-      <div>
-        <CopyButton
-          copyText="3.14"
-          size="small"
-          icon={<LinkIcon title="Kopier" />}
-          activeIcon={<ThumbUpIcon title="Kopiert" />}
-        />
-      </div>
-      <div>
-        <CopyButton
-          copyText="3.14"
-          size="xsmall"
-          icon={<LinkIcon title="Kopier" />}
-          activeIcon={<ThumbUpIcon title="Kopiert" />}
-        />
-      </div>
-    </div>
-  ),
-};
-
-export const InlineDemo: Story = {
-  render: () => (
-    <div style={{ display: "flex", gap: "0.5rem", alignItems: "center" }}>
-      <CopyButton size="small" copyText="3.14" /> Kopier dette feltet
-    </div>
-  ),
-};
-
-export const WithTooltip: Story = {
-  render: () => {
-    return (
-      <div>
-        <Tooltip content="Kopier fødselsnummer">
-          <CopyButton copyText="3.14" />
-        </Tooltip>
-      </div>
-    );
-  },
-};
-
-export const Duration: Story = {
-  render: () => <CopyButton copyText="3.14" activeDuration={300} />,
-};
-
-export const Disabled: Story = {
-  render: () => (
-    <div className="colgap">
-      <CopyButton copyText="3.14" disabled />
-      <CopyButton copyText="3.14" size="small" disabled />
-      <CopyButton copyText="3.14" disabled variant="action" />
-    </div>
-  ),
-};
-
-export const Chromatic: Story = {
-  render: (...props) => (
-    <div>
-      <div>
-        <h2>Variants</h2>
-        {Variants.render?.(...props)}
-      </div>
-      <div>
-        <h2>IconPosition</h2>
-        {IconPosition.render?.(...props)}
-      </div>
-      <div>
-        <h2>Sizes</h2>
-        {Sizes.render?.(...props)}
-      </div>
-      <div>
-        <h2>Texts</h2>
-        {Texts.render?.(...props)}
-      </div>
-      <div>
-        <h2>Icons</h2>
-        {Icons.render?.(...props)}
-      </div>
-      <div>
-        <h2>InlineDemo</h2>
-        {InlineDemo.render?.(...props)}
-      </div>
-      <div>
-        <h2>WithTooltip</h2>
-        {WithTooltip.render?.(...props)}
-      </div>
-      <div>
-        <h2>Duration</h2>
-        {Duration.render?.(...props)}
-      </div>
-      <div>
-        <h2>Disabled</h2>
-        {Disabled.render?.(...props)}
-      </div>
-    </div>
-  ),
-  parameters: {
-    chromatic: { disable: false },
-  },
-};