@navikt/ds-react 5.2.1 → 5.3.1

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

@@ -0,0 +1,165 @@
+import { expect } from "@storybook/jest";
+import type { Meta, StoryObj } from "@storybook/react";
+import { within } from "@storybook/testing-library";
+import React from "react";
+import { BodyLong } from "..";
+import { VStack } from "../..";
+
+const meta = {
+  title: "ds-react/Typography/BodyLong",
+  component: BodyLong,
+  decorators: [(story) => <div style={{ maxWidth: "700px" }}>{story()}</div>],
+} satisfies Meta<typeof BodyLong>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+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 Default: 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");
+  },
+};

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

@@ -0,0 +1,164 @@
+import { expect } from "@storybook/jest";
+import type { Meta, StoryObj } from "@storybook/react";
+import { within } from "@storybook/testing-library";
+import React from "react";
+import { BodyShort } from "..";
+import { VStack } from "../..";
+
+const meta = {
+  title: "ds-react/Typography/BodyShort",
+  component: BodyShort,
+  decorators: [(story) => <div style={{ maxWidth: "200px" }}>{story()}</div>],
+} satisfies Meta<typeof BodyShort>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const lorem = "Du må gjøre en filtrering for å se brukere i listen.";
+
+export const Default: 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");
+  },
+};

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

@@ -0,0 +1,88 @@
+import { expect } from "@storybook/jest";
+import type { Meta, StoryObj } from "@storybook/react";
+import { within } from "@storybook/testing-library";
+import React from "react";
+import { Detail } from "..";
+import { VStack } from "../..";
+
+const meta = {
+  title: "ds-react/Typography/Detail",
+  component: Detail,
+  decorators: [(story) => <div style={{ maxWidth: "200px" }}>{story()}</div>],
+} satisfies Meta<typeof Detail>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const lorem = "Du må gjøre en filtrering for å se brukere i listen.";
+
+export const Default: 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");
+  },
+};

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

@@ -0,0 +1,93 @@
+import { expect } from "@storybook/jest";
+import type { Meta, StoryObj } from "@storybook/react";
+import { within } from "@storybook/testing-library";
+import React from "react";
+import { ErrorMessage } from "..";
+import { VStack } from "../..";
+
+const meta = {
+  title: "ds-react/Typography/ErrorMessage",
+  component: ErrorMessage,
+} satisfies Meta<typeof ErrorMessage>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+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 Default: 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");
+  },
+};

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

@@ -0,0 +1,143 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { expect } from "@storybook/jest";
+import { within } from "@storybook/testing-library";
+import { default as React } from "react";
+import { Heading } from "..";
+import { VStack } from "../..";
+
+const meta = {
+  title: "ds-react/Typography/Heading",
+  component: Heading,
+  decorators: [(story) => <div style={{ maxWidth: "300px" }}>{story()}</div>],
+} satisfies Meta<typeof Heading>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const lorem = "Hva kan vi hjelpe deg med?";
+
+export const Default: 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");
+  },
+};

package/src/typography/stories/ingress.stories.tsx

@@ -0,0 +1,51 @@
+import { expect } from "@storybook/jest";
+import type { Meta, StoryObj } from "@storybook/react";
+import { within } from "@storybook/testing-library";
+import React from "react";
+import { Ingress } from "..";
+
+const meta = {
+  title: "ds-react/Typography/deprecated/Ingress",
+  component: Ingress,
+} satisfies Meta<typeof Ingress>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+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 Default: Story = {
+  args: {
+    spacing: false,
+    children: lorem,
+  },
+};
+
+export const Spacing: Story = {
+  render: () => (
+    <div>
+      <Ingress spacing>{lorem}</Ingress>
+      <Ingress spacing>{lorem}</Ingress>
+    </div>
+  ),
+};
+
+export const OverrideTag: Story = {
+  render: () => (
+    <div>
+      <Ingress spacing>default ingress</Ingress>
+      <Ingress as="legend">legend ingress</Ingress>
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const defaultIngress = canvas.getByText("default ingress");
+    const legendIngress = canvas.getByText("legend ingress");
+
+    expect(defaultIngress.tagName).toEqual("P");
+    expect(legendIngress.tagName).toEqual("LEGEND");
+  },
+};