@navikt/ds-react 6.0.0-alpha.2 → 6.0.0

package/src/tabs/Tabs.test.tsx

@@ -0,0 +1,109 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import React from "react";
+import { Tabs } from "./Tabs";
+
+const TestTabs = ({
+  value,
+  onChange,
+  defaultValue,
+  selectionFollowsFocus,
+  loop,
+  iconPosition,
+}: any) => (
+  <Tabs
+    value={value}
+    onChange={onChange}
+    defaultValue={defaultValue}
+    selectionFollowsFocus={selectionFollowsFocus}
+    loop={loop}
+    iconPosition={iconPosition}
+  >
+    <Tabs.List data-testid="tablist">
+      <Tabs.Tab value="tab1" data-testid="tab1" label="Tab 1" />
+      <Tabs.Tab value="tab2" data-testid="tab2" label="Tab 2" />
+      <Tabs.Tab value="tab3" data-testid="tab3" label="Tab 3" />
+    </Tabs.List>
+    <Tabs.Panel value="tab1" data-testid="tabpanel1">
+      Tabpanel 1
+    </Tabs.Panel>
+    <Tabs.Panel value="tab2" data-testid="tabpanel2">
+      Tabpanel 2
+    </Tabs.Panel>
+    <Tabs.Panel value="tab3" data-testid="tabpanel3">
+      Tabpanel 3
+    </Tabs.Panel>
+  </Tabs>
+);
+
+describe("Tabs", () => {
+  test("sets default value correctly", () => {
+    render(<TestTabs defaultValue="tab2" />);
+    const tab = screen.getByTestId("tab2");
+    const panel = screen.getByTestId("tabpanel2");
+
+    expect(tab).toHaveAttribute("aria-selected", "true");
+    expect(panel).toHaveTextContent("Tabpanel 2");
+  });
+
+  test("label-connection between tab and tabpanel is correct", async () => {
+    render(<TestTabs defaultValue="tab2" />);
+    const tab = screen.getByTestId("tab2");
+    const panel = screen.getByTestId("tabpanel2");
+
+    const controlsId = tab.getAttribute("aria-controls");
+    const panelLabelledBy = panel.getAttribute("aria-labelledby");
+
+    expect(controlsId).toEqual(panel.id);
+    expect(tab.id).toEqual(panelLabelledBy);
+  });
+
+  test("sets correct attributes on active tab", () => {
+    render(<TestTabs defaultValue="tab2" />);
+    const tab = screen.getByTestId("tab2");
+
+    expect(tab).toHaveAttribute("aria-selected", "true");
+    expect(tab).toHaveAttribute("role", "tab");
+    expect(tab).toHaveAttribute("aria-controls");
+    expect(tab).toHaveAttribute("tabindex", "-1");
+  });
+
+  test("sets correct attributes on idle tab", () => {
+    render(<TestTabs defaultValue="tab2" />);
+    const tab = screen.getByTestId("tab1");
+
+    expect(tab).toHaveAttribute("aria-selected", "false");
+    expect(tab).toHaveAttribute("role", "tab");
+    expect(tab).toHaveAttribute("aria-controls");
+    expect(tab).toHaveAttribute("tabindex", "-1");
+  });
+
+  test("sets correct attributes on active tabpanel", () => {
+    render(<TestTabs defaultValue="tab2" />);
+    const panel = screen.getByTestId("tabpanel2");
+
+    expect(panel).toHaveAttribute("aria-labelledby");
+    expect(panel).toHaveAttribute("role", "tabpanel");
+    expect(panel).toHaveAttribute("tabindex", "0");
+    expect(panel).toHaveTextContent("Tabpanel 2");
+    expect(panel).toHaveStyle({ display: "block" });
+  });
+
+  test("sets correct attributes on idle tabpanel", () => {
+    render(<TestTabs defaultValue="tab1" />);
+    const panel = screen.getByTestId("tabpanel2");
+
+    expect(panel).toHaveAttribute("aria-labelledby");
+    expect(panel).toHaveAttribute("role", "tabpanel");
+    expect(panel).toHaveAttribute("tabindex", "0");
+    expect(panel).toBeEmptyDOMElement();
+    expect(panel).toHaveStyle({ display: "none" });
+  });
+
+  test("sets tabindex to 0 when focused", () => {
+    render(<TestTabs defaultValue="tab2" />);
+    const tab = screen.getByTestId("tab2");
+
+    fireEvent.focus(tab);
+    expect(tab).toHaveAttribute("tabindex", "0");
+  });
+});

package/src/timeline/AxisLabels.tsx

@@ -13,7 +13,7 @@ import {
   startOfYear,
   subDays,
 } from "date-fns";
-import nbLocale from "date-fns/locale/nb";
+import { nb as nbLocale } from "date-fns/locale";
 import React from "react";
 import { Detail } from "../typography/Detail";
 import { useTimelineContext } from "./hooks/useTimelineContext";

package/src/toggle-group/ToggleGroup.test.tsx

@@ -0,0 +1,54 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import React from "react";
+import { ToggleGroup } from "./ToggleGroup";
+
+const TestToggleGroup = ({ value, onChange, defaultValue }: any) => (
+  <ToggleGroup value={value} onChange={onChange} defaultValue={defaultValue}>
+    <ToggleGroup.Item value="toggle1" data-testid="toggle1">
+      Toggle 1
+    </ToggleGroup.Item>
+    <ToggleGroup.Item value="toggle2" data-testid="toggle2">
+      Toggle 2
+    </ToggleGroup.Item>
+    <ToggleGroup.Item value="toggle3" data-testid="toggle3">
+      Toggle 3
+    </ToggleGroup.Item>
+  </ToggleGroup>
+);
+
+describe("ToggleGroup", () => {
+  test("sets default value correctly", () => {
+    render(<TestToggleGroup defaultValue="toggle2" />);
+    const toggle = screen.getByTestId("toggle2");
+
+    expect(toggle).toHaveAttribute("aria-checked", "true");
+  });
+
+  test("sets correct attributes on active toggle", () => {
+    render(<TestToggleGroup defaultValue="toggle2" />);
+    const toggle = screen.getByTestId("toggle2");
+
+    expect(toggle).toHaveAttribute("aria-checked", "true");
+    expect(toggle).toHaveAttribute("role", "radio");
+    expect(toggle).toHaveAttribute("type", "button");
+    expect(toggle).toHaveAttribute("tabindex", "-1");
+  });
+
+  test("sets correct attributes on idle toggle", () => {
+    render(<TestToggleGroup defaultValue="toggle1" />);
+    const toggle = screen.getByTestId("toggle2");
+
+    expect(toggle).toHaveAttribute("aria-checked", "false");
+    expect(toggle).toHaveAttribute("role", "radio");
+    expect(toggle).toHaveAttribute("type", "button");
+    expect(toggle).toHaveAttribute("tabindex", "-1");
+  });
+
+  test("sets tabindex to 0 when focused", () => {
+    render(<TestToggleGroup defaultValue="toggle2" />);
+    const toggle = screen.getByTestId("toggle2");
+
+    fireEvent.focus(toggle);
+    expect(toggle).toHaveAttribute("tabindex", "0");
+  });
+});

package/src/tooltip/Tooltip.tsx

@@ -1,5 +1,4 @@
 import {
-  FloatingPortal,
   autoUpdate,
   arrow as flArrow,
   flip,
@@ -13,15 +12,9 @@ import {
   useInteractions,
 } from "@floating-ui/react";
 import cl from "clsx";
-import React, {
-  HTMLAttributes,
-  cloneElement,
-  forwardRef,
-  useContext,
-  useRef,
-} from "react";
-import { ModalContext } from "../modal/ModalContext";
-import { useProvider } from "../provider";
+import React, { HTMLAttributes, cloneElement, forwardRef, useRef } from "react";
+import { useModalContext } from "../modal/Modal.context";
+import Portal from "../overlays/portal/Portal";
 import { Detail } from "../typography";
 import { useId } from "../util/hooks";
 import { useControllableState } from "../util/hooks/useControllableState";
@@ -122,11 +115,8 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
     });
 
     const arrowRef = useRef<HTMLDivElement | null>(null);
-    const modalContext = useContext(ModalContext);
-    const providerRootElement = useProvider()?.rootElement;
-    const rootElement = modalContext
-      ? modalContext.ref.current
-      : providerRootElement;
+    const modalContext = useModalContext(false);
+    const rootElement = modalContext ? modalContext.ref.current : undefined;
 
     const {
       x,
@@ -199,7 +189,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
               : children?.props["aria-describedby"],
           }),
         )}
-        <FloatingPortal root={rootElement}>
+        <Portal rootElement={rootElement} asChild>
           {_open && (
             <div
               {...getFloatingProps({
@@ -253,7 +243,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
               )}
             </div>
           )}
-        </FloatingPortal>
+        </Portal>
       </>
     );
   },

package/src/tooltip/tooltip.stories.tsx

@@ -1,6 +1,9 @@
 import { Meta } from "@storybook/react";
 import React from "react";
-import { Alert, Button, Search, Tooltip } from "..";
+import { Alert } from "../alert";
+import { Button } from "../button";
+import { Search } from "../form";
+import Tooltip from "./Tooltip";
 
 export default {
   title: "ds-react/Tooltip",

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

@@ -1,13 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { expect, within } from "@storybook/test";
 import React from "react";
-import { BodyLong } from "..";
-import { VStack } from "../..";
+import { VStack } from "../../layout/stack";
+import BodyLong from "../BodyLong";
 
 const meta = {
   title: "ds-react/Typography/BodyLong",
   component: BodyLong,
   decorators: [(story) => <div style={{ maxWidth: "700px" }}>{story()}</div>],
+  parameters: {
+    chromatic: { disable: true },
+  },
 } satisfies Meta<typeof BodyLong>;
 
 export default meta;
@@ -17,7 +20,7 @@ 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 = {
+export const Controls: Story = {
   args: {
     spacing: false,
     children: lorem,
@@ -162,3 +165,46 @@ export const OverrideTag: Story = {
     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,13 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { expect, within } from "@storybook/test";
 import React from "react";
-import { BodyShort } from "..";
-import { VStack } from "../..";
+import { VStack } from "../../layout/stack";
+import { BodyShort } from "../BodyShort";
 
 const meta = {
   title: "ds-react/Typography/BodyShort",
   component: BodyShort,
-  decorators: [(story) => <div style={{ maxWidth: "200px" }}>{story()}</div>],
+  decorators: [(story) => <div style={{ maxWidth: "250px" }}>{story()}</div>],
+  parameters: {
+    chromatic: { disable: true },
+  },
 } satisfies Meta<typeof BodyShort>;
 
 export default meta;
@@ -16,7 +19,7 @@ type Story = StoryObj<typeof meta>;
 
 const lorem = "Du må gjøre en filtrering for å se brukere i listen.";
 
-export const Default: Story = {
+export const Controls: Story = {
   args: {
     spacing: false,
     children: lorem,
@@ -161,3 +164,46 @@ export const OverrideTag: Story = {
     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,13 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { expect, within } from "@storybook/test";
 import React from "react";
-import { Detail } from "..";
-import { VStack } from "../..";
+import { VStack } from "../../layout/stack";
+import Detail from "../Detail";
 
 const meta = {
   title: "ds-react/Typography/Detail",
   component: Detail,
   decorators: [(story) => <div style={{ maxWidth: "200px" }}>{story()}</div>],
+  parameters: {
+    chromatic: { disable: true },
+  },
 } satisfies Meta<typeof Detail>;
 
 export default meta;
@@ -16,7 +19,7 @@ type Story = StoryObj<typeof meta>;
 
 const lorem = "Du må gjøre en filtrering for å se brukere i listen.";
 
-export const Default: Story = {
+export const Controls: Story = {
   args: {
     spacing: false,
     children: lorem,
@@ -85,3 +88,29 @@ export const OverrideTag: Story = {
     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,12 +1,15 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { expect, within } from "@storybook/test";
 import React from "react";
-import { ErrorMessage } from "..";
-import { VStack } from "../..";
+import { VStack } from "../../layout/stack";
+import ErrorMessage from "../ErrorMessage";
 
 const meta = {
   title: "ds-react/Typography/ErrorMessage",
   component: ErrorMessage,
+  parameters: {
+    chromatic: { disable: true },
+  },
 } satisfies Meta<typeof ErrorMessage>;
 
 export default meta;
@@ -16,7 +19,7 @@ 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 = {
+export const Controls: Story = {
   args: {
     spacing: false,
     children: lorem,
@@ -90,3 +93,31 @@ export const OverrideTag: Story = {
     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,13 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { expect, within } from "@storybook/test";
 import { default as React } from "react";
-import { Heading } from "..";
-import { VStack } from "../..";
+import { VStack } from "../../layout/stack";
+import Heading from "../Heading";
 
 const meta = {
   title: "ds-react/Typography/Heading",
   component: Heading,
   decorators: [(story) => <div style={{ maxWidth: "300px" }}>{story()}</div>],
+  parameters: {
+    chromatic: { disable: true },
+  },
 } satisfies Meta<typeof Heading>;
 
 export default meta;
@@ -16,7 +19,7 @@ type Story = StoryObj<typeof meta>;
 
 const lorem = "Hva kan vi hjelpe deg med?";
 
-export const Default: Story = {
+export const Controls: Story = {
   args: {
     spacing: false,
     children: lorem,
@@ -139,3 +142,29 @@ export const OverrideTag: Story = {
     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,13 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { expect, within } from "@storybook/test";
 import React from "react";
-import { Label } from "..";
-import { VStack } from "../..";
+import { VStack } from "../../layout/stack";
+import Label from "../Label";
 
 const meta = {
   title: "ds-react/Typography/Label",
   component: Label,
   decorators: [(story) => <div style={{ maxWidth: "400px" }}>{story()}</div>],
+  parameters: {
+    chromatic: { disable: true },
+  },
 } satisfies Meta<typeof Label>;
 
 export default meta;
@@ -17,7 +20,7 @@ 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 = {
+export const Controls: Story = {
   args: {
     spacing: false,
     children: lorem,
@@ -95,3 +98,35 @@ export const OverrideTag: Story = {
     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/Slot.tsx

@@ -20,10 +20,12 @@ export const Slot = React.forwardRef<HTMLElement, SlotProps>(
     }
 
     if (React.Children.count(children) > 1) {
-      console.error(
+      const error = new Error(
         "Aksel: Components using 'asChild' expects to recieve a single React element child.",
       );
-      return React.Children.only(null);
+      error.name = "SlotError";
+      Error.captureStackTrace?.(error, Slot);
+      throw error;
     }
 
     return null;