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

package/src/table/stories/{table.stories.tsx → table-1.stories.tsx}

@@ -1,16 +1,27 @@
 import React, { useState } from "react";
 import { Table, TableProps } from "../";
-import { Alert, Button, Checkbox, CheckboxGroup, Link } from "../..";
+import { Button } from "../../button";
+import { Checkbox } from "../../form";
+import { VStack } from "../../layout/stack";
+import {
+  Expandable,
+  ExpandableLarge,
+  ExpandableSmall,
+} from "./table-2-expandable.stories";
 
 export default {
   title: "ds-react/Table",
   component: Table,
+  parameters: {
+    chromatic: { disable: true },
+  },
 };
 
 interface Props extends TableProps {
   button?: boolean;
   shadeOnHover?: boolean;
 }
+
 const TableComponent = ({ button, shadeOnHover, ...rest }: Props) => (
   <Table {...rest}>
     <Table.Header>
@@ -89,75 +100,59 @@ export const Buttons = () => <TableComponent size="small" button />;
 
 export const WithDivs = () => {
   return (
-    <>
-      <Alert variant="warning">
-        Obs! Hvis man skal bygge tabeller uten å bruke vanlig {"<tabell> "}
-        -markup er det svært viktig at man supplerer elementene med{" "}
-        <Link href="https://www.w3.org/TR/wai-aria-practices-1.1/examples/table/table.html">
-          riktige
-        </Link>{" "}
-        role-attributter og display-stiler for å bevare den semantiske verdien i
-        tabellene. Vi anbefaler fortsatt å ikke ta i bruk denne metoden hvis
-        mulig, da nettleseren ikke kan tolke tabellen like bra uten riktig
-        markup.
-      </Alert>
-      <div className="navds-table" role="table">
-        <div className="navds-table__header" role="rowgroup">
-          <div className="navds-table__row" role="row">
-            <div className="navds-table__header-cell" role="columnheader">
-              Fornavn
-            </div>
-            <div className="navds-table__header-cell" role="columnheader">
-              Etternavn
-            </div>
-            <div className="navds-table__header-cell" role="columnheader">
-              Rolle
-            </div>
+    <div className="navds-table" role="table">
+      <div className="navds-table__header" role="rowgroup">
+        <div className="navds-table__row" role="row">
+          <div className="navds-table__header-cell" role="columnheader">
+            Fornavn
+          </div>
+          <div className="navds-table__header-cell" role="columnheader">
+            Etternavn
+          </div>
+          <div className="navds-table__header-cell" role="columnheader">
+            Rolle
+          </div>
+        </div>
+      </div>
+      <div className="navds-table__body" role="rowgroup">
+        <div className="navds-table__row" role="row">
+          <div className="navds-table__data-cell" role="cell">
+            Jean-Luc
+          </div>
+          <div className="navds-table__data-cell" role="cell">
+            Picard
+          </div>
+          <div className="navds-table__data-cell" role="cell">
+            Kaptein
+          </div>
+        </div>
+        <div className="navds-table__row" role="row">
+          <div className="navds-table__data-cell" role="cell">
+            William
+          </div>
+          <div className="navds-table__data-cell" role="cell">
+            Riker
+          </div>
+          <div className="navds-table__data-cell" role="cell">
+            Kommandør
           </div>
         </div>
-        <div className="navds-table__body" role="rowgroup">
-          <div className="navds-table__row" role="row">
-            <div className="navds-table__data-cell" role="cell">
-              Jean-Luc
-            </div>
-            <div className="navds-table__data-cell" role="cell">
-              Picard
-            </div>
-            <div className="navds-table__data-cell" role="cell">
-              Kaptein
-            </div>
+        <div className="navds-table__row" role="row">
+          <div className="navds-table__data-cell" role="cell">
+            Geordi
           </div>
-          <div className="navds-table__row" role="row">
-            <div className="navds-table__data-cell" role="cell">
-              William
-            </div>
-            <div className="navds-table__data-cell" role="cell">
-              Riker
-            </div>
-            <div className="navds-table__data-cell" role="cell">
-              Kommandør
-            </div>
+          <div className="navds-table__data-cell" role="cell">
+            La Forge
           </div>
-          <div className="navds-table__row" role="row">
-            <div className="navds-table__data-cell" role="cell">
-              Geordi
-            </div>
-            <div className="navds-table__data-cell" role="cell">
-              La Forge
-            </div>
-            <div className="navds-table__data-cell" role="cell">
-              Sjefsingeniør
-            </div>
+          <div className="navds-table__data-cell" role="cell">
+            Sjefsingeniør
           </div>
         </div>
       </div>
-    </>
+    </div>
   );
 };
 
-export const Selection = () => <SelectionTable />;
-export const SelectionSmall = () => <SelectionTable size="small" />;
-
 const SelectionTable = ({ size = "medium" }: { size?: "small" | "medium" }) => {
   const useToggleList = (initialState) => {
     const [list, setList] = useState(initialState);
@@ -182,7 +177,7 @@ const SelectionTable = ({ size = "medium" }: { size?: "small" | "medium" }) => {
           <Table.DataCell>
             <Checkbox
               size={size}
-              checked={selectedRows.includes("all")}
+              indeterminate
               onChange={() => toggleSelectedRow("all")}
             >
               Select all
@@ -212,12 +207,12 @@ const SelectionTable = ({ size = "medium" }: { size?: "small" | "medium" }) => {
           <Table.DataCell>USA</Table.DataCell>
           <Table.DataCell>38</Table.DataCell>
         </Table.Row>
-        <Table.Row selected={selectedRows.includes("2")}>
+        <Table.Row selected>
           <Table.DataCell>
             <Checkbox
               size={size}
               hideLabel
-              checked={selectedRows.includes("2")}
+              checked
               onChange={() => toggleSelectedRow("2")}
               aria-labelledby={`x_r2-${size}`}
             >
@@ -231,36 +226,67 @@ const SelectionTable = ({ size = "medium" }: { size?: "small" | "medium" }) => {
           <Table.DataCell>Denmark</Table.DataCell>
           <Table.DataCell>11</Table.DataCell>
         </Table.Row>
-        <Table.Row selected={selectedRows.includes("3")}>
-          <Table.DataCell>
-            <CheckboxGroup legend="velg flere felt" hideLegend>
-              <Checkbox
-                size={size}
-                hideLabel
-                checked={selectedRows.includes("3")}
-                onChange={() => toggleSelectedRow("3")}
-                aria-labelledby={`x_r3-${size}`}
-              >
-                {" "}
-              </Checkbox>
-              <Checkbox
-                size={size}
-                hideLabel
-                checked={selectedRows.includes("3")}
-                onChange={() => toggleSelectedRow("3")}
-                aria-labelledby={`x_r3-${size}`}
-              >
-                {" "}
-              </Checkbox>
-            </CheckboxGroup>
-          </Table.DataCell>
-          <Table.HeaderCell scope="row" colSpan={4}>
-            <span id={`x_r3-${size}`}>
-              Don&apos;t stack multiple checkboxes
-            </span>
-          </Table.HeaderCell>
-        </Table.Row>
       </Table.Body>
     </Table>
   );
 };
+
+export const Selection = () => <SelectionTable />;
+export const SelectionSmall = () => <SelectionTable size="small" />;
+
+export const Chromatic = {
+  render: () => (
+    <VStack gap="8">
+      <div>
+        <h3>Default</h3>
+        <Default />
+        <h3>Zebra</h3>
+        <Zebra />
+      </div>
+      <div>
+        <h3>Large</h3>
+        <SizeLarge />
+      </div>
+      <div>
+        <h3>Medium</h3>
+        <SizeMedium />
+      </div>
+      <div>
+        <h3>Small</h3>
+        <SizeSmall />
+      </div>
+      <div>
+        <h3>With Buttons</h3>
+        <Buttons />
+      </div>
+      <div>
+        <h3>Custom with divs</h3>
+        <WithDivs />
+      </div>
+      <div>
+        <h3>Selection</h3>
+        <Selection />
+      </div>
+      <div>
+        <h3>Selection small</h3>
+        <SelectionSmall />
+      </div>
+      <h2>Expandable</h2>
+      <div>
+        <h3>Large</h3>
+        <ExpandableLarge />
+      </div>
+      <div>
+        <h3>Medium</h3>
+        <Expandable />
+      </div>
+      <div>
+        <h3>Small</h3>
+        <ExpandableSmall />
+      </div>
+    </VStack>
+  ),
+  parameters: {
+    chromatic: { disable: false },
+  },
+};

package/src/table/stories/{table-expandable.stories.tsx → table-2-expandable.stories.tsx}

@@ -1,10 +1,15 @@
 import React, { useState } from "react";
-import { Table } from "..";
-import { Button, Checkbox, Link } from "../..";
+import { Button } from "../../button";
+import { Checkbox } from "../../form";
+import { Link } from "../../link";
+import Table from "../Table";
 
 export default {
   title: "ds-react/Table",
   component: Table,
+  parameters: {
+    chromatic: { disable: true },
+  },
 };
 
 export const Expandable = () => {
@@ -25,6 +30,7 @@ export const Expandable = () => {
             content={row.content}
             key={row.name}
             togglePlacement="right"
+            defaultOpen
           >
             {columns.map(({ key }) => (
               <Table.DataCell key={key}>{row[key]}</Table.DataCell>
@@ -50,7 +56,7 @@ export const ExpandableLarge = () => {
       </Table.Header>
       <Table.Body>
         {data.slice(0, 1).map((row) => (
-          <Table.ExpandableRow content={row.content} key={row.name}>
+          <Table.ExpandableRow defaultOpen content={row.content} key={row.name}>
             {columns.map(({ key }) => (
               <Table.DataCell key={key}>{row[key]}</Table.DataCell>
             ))}
@@ -87,7 +93,7 @@ export const ExpandableSmall = () => {
       </Table.Header>
       <Table.Body>
         {data.slice(0, 1).map((row) => (
-          <Table.ExpandableRow content={row.content} key={row.name}>
+          <Table.ExpandableRow defaultOpen content={row.content} key={row.name}>
             {columns.map(({ key }) => (
               <Table.DataCell key={key}>{row[key]}</Table.DataCell>
             ))}
@@ -235,36 +241,6 @@ const data = [
   },
 ];
 
-export const ExpandableOpen = () => {
-  return (
-    <Table zebraStripes>
-      <Table.Header>
-        <Table.Row>
-          {columns.map(({ key, name }) => (
-            <Table.HeaderCell key={key}>{name}</Table.HeaderCell>
-          ))}
-          <Table.HeaderCell />
-        </Table.Row>
-      </Table.Header>
-      <Table.Body>
-        {data.map((row) => (
-          <Table.ExpandableRow
-            expansionDisabled={row.animal === "Sel"}
-            content={row.content}
-            key={row.name}
-            togglePlacement="right"
-            defaultOpen
-          >
-            {columns.map(({ key }) => (
-              <Table.DataCell key={key}>{row[key]}</Table.DataCell>
-            ))}
-          </Table.ExpandableRow>
-        ))}
-      </Table.Body>
-    </Table>
-  );
-};
-
 export const ClickableRow = () => {
   const [isRowOpen1, setIsRowOpen1] = useState(false);
   const [isRowOpen2, setIsRowOpen2] = useState(false);

package/src/table/stories/{table-async.stories.tsx → table-3-async.stories.tsx}

@@ -1,14 +1,16 @@
 import React, { useState } from "react";
 import useSWR from "swr";
-import { Loader, Pagination, SortState } from "../..";
-import { Table } from "../index";
+import { Loader } from "../../loader";
+import { Pagination } from "../../pagination";
+import Table from "../Table";
+import { SortState } from "../types";
 import peopleJson from "./people.json";
 
 export default {
   title: "ds-react/Table",
   component: Table,
   parameters: {
-    chromatic: { delay: 500 },
+    chromatic: { disable: true },
   },
 };
 

package/src/table/stories/tests/table.stories.tsx

@@ -1,10 +1,13 @@
 import { expect, fn, userEvent, within } from "@storybook/test";
 import React from "react";
-import { Table } from "../..";
+import Table from "../../Table";
 
 export default {
   title: "ds-react/Table/Tests",
   component: Table,
+  parameters: {
+    chromatic: { disable: true },
+  },
 };
 
 export const ClickableRowTest = {

package/src/table/types.ts

@@ -1,4 +1,4 @@
 export interface SortState {
   orderBy: string;
-  direction: "ascending" | "descending";
+  direction: "ascending" | "descending" | "none";
 }

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/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

@@ -12,14 +12,8 @@ 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 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";
@@ -121,7 +115,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
     });
 
     const arrowRef = useRef<HTMLDivElement | null>(null);
-    const modalContext = useContext(ModalContext);
+    const modalContext = useModalContext(false);
     const rootElement = modalContext ? modalContext.ref.current : undefined;
 
     const {
@@ -195,7 +189,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
               : children?.props["aria-describedby"],
           }),
         )}
-        <Portal rootElement={rootElement}>
+        <Portal rootElement={rootElement} asChild>
           {_open && (
             <div
               {...getFloatingProps({

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