@navikt/ds-react 5.2.0 → 5.3.0

package/src/typography/stories/label.stories.tsx

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

package/src/typography/types.ts

@@ -0,0 +1,26 @@
+export type TypoProps = {
+  /**
+   * Truncate text overflow with ellipsis.
+   */
+  truncate?: boolean;
+  /**
+   * Adjusts font-weight.
+   */
+  weight?: "regular" | "semibold";
+  /**
+   * Adjust text-align.
+   */
+  align?: "start" | "center" | "end";
+  /**
+   * Visually hide text. Text will still be accessible for screenreaders
+   */
+  visuallyHidden?: boolean;
+  /**
+   * Adds spacing below text
+   */
+  spacing?: boolean;
+  /**
+   * Adjusts color
+   */
+  textColor?: "default" | "subtle";
+};

package/src/typography/util.ts

@@ -0,0 +1,14 @@
+import cl from "clsx";
+import { TypoProps } from "./types";
+
+export const typoClassNames = (props: TypoProps & { uppercase?: boolean }) => {
+  return cl({
+    "navds-typo--spacing": props.spacing,
+    "navds-typo--truncate": props.truncate,
+    "navds-typo--semibold": props.weight === "semibold",
+    [`navds-typo--align-${props.align}`]: props.align,
+    [`navds-typo--color-${props.textColor}`]: props.textColor,
+    "navds-typo--visually-hidden": props.visuallyHidden,
+    "navds-typo--uppercase": props.uppercase,
+  });
+};

package/src/typography/heading.stories.tsx

@@ -1,77 +0,0 @@
-import { Meta } from "@storybook/react";
-import React from "react";
-import { Heading } from "..";
-
-export default {
-  title: "ds-react/Typography/Heading",
-  component: Heading,
-  argTypes: {
-    size: {
-      defaultValue: "large",
-      control: {
-        type: "radio",
-        options: ["xlarge", "large", "medium", "small", "xsmall"],
-      },
-    },
-    level: {
-      defaultValue: "1",
-      control: {
-        type: "radio",
-        options: ["1", "2", "3", "4", "5", "6"],
-      },
-    },
-  },
-} as Meta;
-
-const lorem = "Veniam consequat cillum";
-
-export const Default = {
-  render: (props) => <Heading {...props}>{lorem}</Heading>,
-
-  args: {
-    spacing: false,
-  },
-};
-
-export const Sizes = () => (
-  <div className="colgap">
-    <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>
-  </div>
-);
-
-export const Spacing = () => (
-  <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>
-);

package/src/typography/typography.stories.tsx

@@ -1,166 +0,0 @@
-import { Meta } from "@storybook/react";
-import React from "react";
-import {
-  BodyLong as DsBodyLong,
-  BodyShort as DsBodyShort,
-  Detail as DsDetail,
-  ErrorMessage as DsErrorMessage,
-  Ingress as DsIngress,
-  Label as DsLabel,
-} from "..";
-
-export default {
-  title: "ds-react/Typography",
-  component: DsBodyLong,
-  subcomponents: {
-    DsBodyShort,
-    DsDetail,
-    DsErrorMessage,
-    DsIngress,
-    DsLabel,
-  },
-} as Meta;
-
-export const Ingress = () => (
-  <>
-    <DsIngress spacing>
-      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
-    </DsIngress>
-    <DsIngress>
-      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
-    </DsIngress>
-  </>
-);
-
-export const BodyLong = () => (
-  <>
-    <DsBodyLong spacing>
-      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip. Aute amet
-      occaecat ex aliqua irure elit labore pariatur. Proident pariatur proident
-      pariatur magna consequat velit id commodo quis sunt tempor ullamco aliquip
-      pariatur.
-    </DsBodyLong>
-    <DsBodyLong>
-      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip. Aute amet
-      occaecat ex aliqua irure elit labore pariatur. Proident pariatur proident
-      pariatur magna consequat velit id commodo quis sunt tempor ullamco aliquip
-      pariatur.
-    </DsBodyLong>
-  </>
-);
-
-export const BodyLongSmall = () => (
-  <>
-    <DsBodyLong size="small" spacing>
-      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip. Aute amet
-      occaecat ex aliqua irure elit labore pariatur. Proident pariatur proident
-      pariatur magna consequat velit id commodo quis sunt tempor ullamco aliquip
-      pariatur.
-    </DsBodyLong>
-    <DsBodyLong size="small">
-      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip. Aute amet
-      occaecat ex aliqua irure elit labore pariatur. Proident pariatur proident
-      pariatur magna consequat velit id commodo quis sunt tempor ullamco aliquip
-      pariatur.
-    </DsBodyLong>
-  </>
-);
-
-export const BodyShort = () => (
-  <>
-    <DsBodyShort spacing>
-      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
-    </DsBodyShort>
-    <DsBodyShort>
-      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
-    </DsBodyShort>
-  </>
-);
-
-export const BodyShortSmall = () => (
-  <>
-    <DsBodyShort size="small" spacing>
-      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
-    </DsBodyShort>
-    <DsBodyShort size="small">
-      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
-    </DsBodyShort>
-  </>
-);
-
-export const Label = () => (
-  <>
-    <DsLabel spacing>
-      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
-    </DsLabel>
-    <DsLabel>
-      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
-    </DsLabel>
-  </>
-);
-
-export const LabelSmall = () => (
-  <>
-    <DsLabel size="small" spacing>
-      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
-    </DsLabel>
-    <DsLabel size="small">
-      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
-    </DsLabel>
-  </>
-);
-
-export const Detail = () => (
-  <>
-    <DsDetail spacing>
-      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
-    </DsDetail>
-    <DsDetail>
-      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
-    </DsDetail>
-  </>
-);
-
-export const DetailUppercase = () => (
-  <>
-    <DsDetail spacing uppercase>
-      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
-    </DsDetail>
-    <DsDetail uppercase>
-      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
-    </DsDetail>
-  </>
-);
-
-export const DetailSmall = () => (
-  <>
-    <DsDetail size="small" spacing>
-      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
-    </DsDetail>
-    <DsDetail size="small">
-      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
-    </DsDetail>
-  </>
-);
-
-export const ErrorMessage = () => (
-  <>
-    <DsErrorMessage spacing>
-      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
-    </DsErrorMessage>
-    <DsErrorMessage>
-      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
-    </DsErrorMessage>
-  </>
-);
-
-export const ErrorMessageSmall = () => (
-  <>
-    <DsErrorMessage size="small" spacing>
-      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
-    </DsErrorMessage>
-    <DsErrorMessage size="small">
-      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
-    </DsErrorMessage>
-  </>
-);