@navikt/ds-react 6.5.0 → 6.6.0

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

package/src/typography/stories/error-message.stories.tsx

@@ -1,122 +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 ErrorMessage from "../ErrorMessage";
-
-const meta: Meta<typeof ErrorMessage> = {
-  title: "ds-react/Typography/ErrorMessage",
-  component: ErrorMessage,
-  parameters: {
-    chromatic: { disable: true },
-  },
-};
-export default meta;
-
-type Story = StoryObj<typeof ErrorMessage>;
-
-const lorem =
-  "Du må fylle ut: Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon";
-
-export const Controls: Story = {
-  args: {
-    spacing: false,
-    children: lorem,
-  },
-  argTypes: {
-    size: {
-      control: "radio",
-      options: ["medium", "small"],
-    },
-  },
-};
-
-export const SizeMedium: Story = {
-  render: () => (
-    <VStack gap="2">
-      <ErrorMessage size="medium">{lorem}</ErrorMessage>
-      <ErrorMessage size="medium">{lorem}</ErrorMessage>
-    </VStack>
-  ),
-};
-
-export const SizeSmall: Story = {
-  render: () => (
-    <VStack gap="2">
-      <ErrorMessage size="small">{lorem}</ErrorMessage>
-      <ErrorMessage size="small">{lorem}</ErrorMessage>
-    </VStack>
-  ),
-};
-
-export const SpacingMedium: Story = {
-  render: () => (
-    <div>
-      <ErrorMessage size="medium" spacing>
-        {lorem}
-      </ErrorMessage>
-      <ErrorMessage size="medium" spacing>
-        {lorem}
-      </ErrorMessage>
-    </div>
-  ),
-};
-
-export const SpacingSmall: Story = {
-  render: () => (
-    <div>
-      <ErrorMessage size="small" spacing>
-        {lorem}
-      </ErrorMessage>
-      <ErrorMessage size="small" spacing>
-        {lorem}
-      </ErrorMessage>
-    </div>
-  ),
-};
-
-export const OverrideTag: Story = {
-  render: () => (
-    <div>
-      <ErrorMessage spacing>default errormessage</ErrorMessage>
-      <ErrorMessage as="legend">legend errormessage</ErrorMessage>
-    </div>
-  ),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    const defaultErrorMessage = canvas.getByText("default errormessage");
-    const legendErrorMessage = canvas.getByText("legend errormessage");
-
-    expect(defaultErrorMessage.tagName).toEqual("P");
-    expect(legendErrorMessage.tagName).toEqual("LEGEND");
-  },
-};
-
-export const Chromatic: Story = {
-  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>Override Tag</h2>
-        {OverrideTag.render?.(...props)}
-      </div>
-    </div>
-  ),
-  parameters: {
-    chromatic: { disable: false },
-  },
-};

package/src/typography/stories/heading.stories.tsx

@@ -1,169 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { expect, within } from "@storybook/test";
-import { default as React } from "react";
-import { VStack } from "../../layout/stack";
-import Heading from "../Heading";
-
-const meta: Meta<typeof Heading> = {
-  title: "ds-react/Typography/Heading",
-  component: Heading,
-  decorators: [(story) => <div style={{ maxWidth: "300px" }}>{story()}</div>],
-  parameters: {
-    chromatic: { disable: true },
-  },
-};
-export default meta;
-
-type Story = StoryObj<typeof Heading>;
-
-const lorem = "Hva kan vi hjelpe deg med?";
-
-export const Controls: Story = {
-  args: {
-    spacing: false,
-    children: lorem,
-    visuallyHidden: false,
-  },
-  argTypes: {
-    size: {
-      control: "radio",
-      options: ["xlarge", "large", "medium", "small", "xsmall"],
-    },
-    level: {
-      control: "radio",
-      options: ["1", "2", "3", "4", "5", "6"],
-    },
-    align: {
-      control: "radio",
-      options: ["start", "center", "end"],
-    },
-    textColor: {
-      control: "radio",
-      options: ["default", "subtle"],
-    },
-  },
-};
-
-export const Sizes: Story = {
-  render: () => (
-    <VStack gap="4">
-      <Heading level="1" size="xlarge">
-        {lorem}
-      </Heading>
-      <Heading level="2" size="large">
-        {lorem}
-      </Heading>
-      <Heading level="3" size="medium">
-        {lorem}
-      </Heading>
-      <Heading level="4" size="small">
-        {lorem}
-      </Heading>
-      <Heading level="5" size="xsmall">
-        {lorem}
-      </Heading>
-    </VStack>
-  ),
-};
-
-export const Spacing: Story = {
-  render: () => (
-    <div>
-      <Heading level="1" size="xlarge" spacing>
-        {lorem}
-      </Heading>
-      <Heading level="2" size="large" spacing>
-        {lorem}
-      </Heading>
-      <Heading level="3" size="medium" spacing>
-        {lorem}
-      </Heading>
-      <Heading level="4" size="small" spacing>
-        {lorem}
-      </Heading>
-      <Heading level="5" size="xsmall" spacing>
-        {lorem}
-      </Heading>
-      <Heading level="5" size="xsmall">
-        {lorem}
-      </Heading>
-    </div>
-  ),
-};
-
-export const Colors: Story = {
-  render: () => (
-    <VStack gap="2">
-      <Heading level="1" size="large" textColor="default">
-        {lorem}
-      </Heading>
-      <Heading level="2" size="large" textColor="subtle">
-        {lorem}
-      </Heading>
-    </VStack>
-  ),
-};
-
-export const Align: Story = {
-  render: () => (
-    <VStack gap="2">
-      <Heading level="1" size="large" align="start">
-        {lorem}
-      </Heading>
-      <Heading level="2" size="large" align="center">
-        {lorem}
-      </Heading>
-      <Heading level="3" size="large" align="end">
-        {lorem}
-      </Heading>
-    </VStack>
-  ),
-};
-
-export const OverrideTag: Story = {
-  render: () => (
-    <div>
-      <Heading spacing level="1" size="large">
-        default heading
-      </Heading>
-      <Heading as="legend" size="large">
-        legend heading
-      </Heading>
-    </div>
-  ),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    const defaultHeading = canvas.getByText("default heading");
-    const legendHeading = canvas.getByText("legend heading");
-
-    expect(defaultHeading.tagName).toEqual("H1");
-    expect(legendHeading.tagName).toEqual("LEGEND");
-  },
-};
-
-export const Chromatic: Story = {
-  render: (...props) => (
-    <div>
-      <div>
-        <h2>Sizes</h2>
-        {Sizes.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/label.stories.tsx

@@ -1,131 +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 Label from "../Label";
-
-const meta: Meta<typeof Label> = {
-  title: "ds-react/Typography/Label",
-  component: Label,
-  decorators: [(story) => <div style={{ maxWidth: "400px" }}>{story()}</div>],
-  parameters: {
-    chromatic: { disable: true },
-  },
-};
-export default meta;
-
-type Story = StoryObj<typeof Label>;
-
-const lorem =
-  "Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon";
-
-export const Controls: Story = {
-  args: {
-    spacing: false,
-    children: lorem,
-    visuallyHidden: false,
-  },
-  argTypes: {
-    size: {
-      control: "radio",
-      options: ["large", "medium", "small"],
-    },
-    textColor: {
-      control: "radio",
-      options: ["default", "subtle"],
-    },
-  },
-};
-
-export const SizeMedium: Story = {
-  render: () => <Label size="medium">{lorem}</Label>,
-};
-
-export const SizeSmall: Story = {
-  render: () => <Label size="small">{lorem}</Label>,
-};
-
-export const SpacingMedium: Story = {
-  render: () => (
-    <div>
-      <Label size="medium" spacing as="p">
-        {lorem}
-      </Label>
-      <Label size="medium" spacing as="p">
-        {lorem}
-      </Label>
-    </div>
-  ),
-};
-
-export const SpacingSmall: Story = {
-  render: () => (
-    <div>
-      <Label size="small" spacing as="p">
-        {lorem}
-      </Label>
-      <Label size="small" spacing as="p">
-        {lorem}
-      </Label>
-    </div>
-  ),
-};
-
-export const Colors: Story = {
-  render: () => (
-    <VStack gap="2">
-      <Label textColor="default">{lorem}</Label>
-      <Label textColor="subtle">{lorem}</Label>
-    </VStack>
-  ),
-};
-
-export const OverrideTag: Story = {
-  render: () => (
-    <div>
-      <Label spacing>default label</Label>
-      <Label as="legend">legend label</Label>
-    </div>
-  ),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    const defaultLabel = canvas.getByText("default label");
-    const legendLabel = canvas.getByText("legend label");
-
-    expect(defaultLabel.tagName).toEqual("LABEL");
-    expect(legendLabel.tagName).toEqual("LEGEND");
-  },
-};
-
-export const Chromatic: Story = {
-  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>Override Tag</h2>
-        {OverrideTag.render?.(...props)}
-      </div>
-    </div>
-  ),
-  parameters: {
-    chromatic: { disable: false },
-  },
-};

package/src/util/hooks/descendants/descendant.stories.tsx

@@ -1,147 +0,0 @@
-import * as React from "react";
-import { Box } from "../../../layout/box";
-import { HStack } from "../../../layout/stack";
-import { createDescendantContext } from "./useDescendant";
-
-export default {
-  title: "Utilities/Descendants",
-  parameters: {
-    chromatic: { disable: true },
-  },
-};
-
-const [
-  DescendantsProvider,
-  /* eslint-disable @typescript-eslint/no-unused-vars */
-  _useDescendantsContext,
-  useDescendants,
-  useDescendant,
-] = createDescendantContext<HTMLDivElement, { value?: string }>();
-
-function Select({ children }: { children?: React.ReactNode }) {
-  const descendants = useDescendants();
-  const count = descendants.count();
-
-  React.useEffect(() => {
-    descendants.last()?.node.focus();
-  }, [descendants, count]);
-
-  return (
-    <DescendantsProvider value={descendants}>{children}</DescendantsProvider>
-  );
-}
-
-function Option({ value, disabled }: { value?: string; disabled?: boolean }) {
-  const { register, index, descendants } = useDescendant({
-    disabled,
-  });
-
-  return (
-    <Box
-      ref={register}
-      role="button"
-      tabIndex={0}
-      data-value={value}
-      onKeyDown={(event) => {
-        if (event.key === "ArrowDown") {
-          descendants.next(index)?.node.focus();
-        } else if (event.key === "ArrowUp") {
-          descendants.prev(index)?.node.focus();
-        }
-      }}
-    >
-      Option {index + 1}
-    </Box>
-  );
-}
-
-export const DynamicUpdates = () => {
-  const [done, setDone] = React.useState(false);
-
-  React.useEffect(() => {
-    const interval = setInterval(() => setDone((x) => !x), 3000);
-
-    return () => window.clearInterval(interval);
-  }, []);
-
-  return (
-    <Select>
-      <Option value="option 1" />
-      <div>
-        <div>
-          <Option value="option 2" />
-          {done && (
-            <div>
-              <Option value="option 3" />
-              <Option value="option 4" />
-            </div>
-          )}
-        </div>
-        <Option value="option 5" disabled />
-      </div>
-      {done && (
-        <div>
-          <Option value="option 6" />
-          <Option value="option 7" />
-        </div>
-      )}
-    </Select>
-  );
-};
-
-function NumberInputWrapper({ children }: { children?: React.ReactNode }) {
-  const descendants = useDescendants();
-
-  React.useEffect(() => {
-    descendants.first()?.node.focus();
-  }, [descendants]);
-
-  return (
-    <DescendantsProvider value={descendants}>
-      <HStack gap="1">{children}</HStack>
-    </DescendantsProvider>
-  );
-}
-
-function Input() {
-  const [focused, setFocused] = React.useState(false);
-  const { register, index, descendants } = useDescendant();
-
-  return (
-    <input
-      style={{
-        width: "3rem",
-        height: "3rem",
-        borderRadius: "4px",
-        textAlign: "center",
-        border: "1px solid var(--a-border-default)",
-      }}
-      placeholder={focused ? "" : "0"}
-      onFocus={() => setFocused(true)}
-      onBlur={() => setFocused(false)}
-      ref={register}
-      type="tel"
-      autoCapitalize="none"
-      autoComplete="false"
-      inputMode="numeric"
-      onKeyDown={(event) => {
-        if (event.key === "ArrowRight") {
-          descendants.next(index, false)?.node.focus();
-        }
-        if (event.key === "ArrowLeft") {
-          descendants.prev(index, false)?.node.focus();
-        }
-      }}
-    />
-  );
-}
-
-export const NumberInput = () => {
-  return (
-    <NumberInputWrapper>
-      <Input />
-      <Input />
-      <Input />
-    </NumberInputWrapper>
-  );
-};