@navikt/ds-react 6.4.1 → 6.6.0

package/src/toggle-group/ToggleItem.tsx

@@ -1,41 +0,0 @@
-import * as RadixToggleGroup from "@radix-ui/react-toggle-group";
-import cl from "clsx";
-import React, { forwardRef, useContext } from "react";
-import { BodyShort } from "../typography/BodyShort";
-import { ToggleGroupContext } from "./context";
-
-export interface ToggleGroupItemProps
-  extends React.HTMLAttributes<HTMLButtonElement> {
-  /**
-   * Content
-   */
-  children: React.ReactNode;
-  /**
-   * Value for state-handling
-   */
-  value: string;
-}
-
-const ToggleItem = forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
-  ({ className, children, ...rest }, ref) => {
-    const context = useContext(ToggleGroupContext);
-
-    return (
-      <RadixToggleGroup.Item
-        {...rest}
-        ref={ref}
-        className={cl("navds-toggle-group__button", className)}
-      >
-        <BodyShort
-          as="span"
-          className="navds-toggle-group__button-inner"
-          size={context?.size}
-        >
-          {children}
-        </BodyShort>
-      </RadixToggleGroup.Item>
-    );
-  },
-);
-
-export default ToggleItem;

package/src/toggle-group/context.ts

@@ -1,9 +0,0 @@
-import { createContext } from "react";
-
-interface ToggleContextProps {
-  size: "medium" | "small";
-}
-
-export const ToggleGroupContext = createContext<ToggleContextProps | null>(
-  null,
-);

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 },
-  },
-};

package/src/typography/stories/detail.stories.tsx

@@ -1,115 +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 Detail from "../Detail";
-
-const meta: Meta<typeof Detail> = {
-  title: "ds-react/Typography/Detail",
-  component: Detail,
-  decorators: [(story) => <div style={{ maxWidth: "200px" }}>{story()}</div>],
-  parameters: {
-    chromatic: { disable: true },
-  },
-};
-export default meta;
-
-type Story = StoryObj<typeof Detail>;
-
-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: {
-    weight: {
-      control: "radio",
-      options: ["regular", "semibold"],
-    },
-    align: {
-      control: "radio",
-      options: ["start", "center", "end"],
-    },
-    textColor: {
-      control: "radio",
-      options: ["default", "subtle"],
-    },
-  },
-};
-
-export const Spacing: Story = {
-  render: () => (
-    <div>
-      <Detail spacing>{lorem}</Detail>
-      <Detail spacing>{lorem}</Detail>
-    </div>
-  ),
-};
-
-export const Colors: Story = {
-  render: () => (
-    <VStack gap="2">
-      <Detail textColor="default">{lorem}</Detail>
-      <Detail textColor="subtle">{lorem}</Detail>
-    </VStack>
-  ),
-};
-
-export const Align: Story = {
-  render: () => (
-    <VStack gap="2">
-      <Detail align="start">{lorem}</Detail>
-      <Detail align="center">{lorem}</Detail>
-      <Detail align="end">{lorem}</Detail>
-    </VStack>
-  ),
-};
-
-export const OverrideTag: Story = {
-  render: () => (
-    <div>
-      <Detail spacing>default detail</Detail>
-      <Detail as="legend">legend detail</Detail>
-    </div>
-  ),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    const defaultDetail = canvas.getByText("default detail");
-    const legendDetail = canvas.getByText("legend detail");
-
-    expect(defaultDetail.tagName).toEqual("P");
-    expect(legendDetail.tagName).toEqual("LEGEND");
-  },
-};
-
-export const Chromatic: Story = {
-  render: (...props) => (
-    <div>
-      <div>
-        <h2>Spacing</h2>
-        {Spacing.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 },
-  },
-};