@navikt/ds-react 6.5.0 → 6.6.0

package/src/table/stories/table-3-async.stories.tsx

@@ -1,179 +0,0 @@
-import React, { useState } from "react";
-import useSWR from "swr";
-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: { disable: true },
-  },
-};
-
-const rowsPerPage = 10;
-
-const queryString = (obj: Record<string, number | string | undefined>) =>
-  Object.keys(obj)
-    .filter((key) => obj[key] !== undefined)
-    .map((key) => key + "=" + obj[key])
-    .join("&");
-
-const updateData = async (url: string) => {
-  const newUrl = new URL(`https://www.example.com/${url}`);
-  const comparator = (
-    a: Record<string, string | number | null>,
-    b: Record<string, string | number | null>,
-    orderBy: string,
-  ) => {
-    if ((b[orderBy] ?? "") < (a[orderBy] ?? "")) {
-      return -1;
-    }
-    if ((b[orderBy] ?? "") > (a[orderBy] ?? "")) {
-      return 1;
-    }
-    return 0;
-  };
-
-  const page = Number(newUrl.searchParams.get("page"));
-  const sort = newUrl.searchParams.get("sort");
-
-  await new Promise((resolve) =>
-    setTimeout(resolve, Math.round(Math.random() * (1000 - 200) + 200)),
-  );
-
-  return {
-    count: peopleJson.length,
-    results: peopleJson
-      .slice()
-      .sort((a, b) => {
-        if (sort) {
-          const [orderBy, direction] = sort.split(":");
-          return direction === "ascending"
-            ? comparator(b, a, orderBy)
-            : comparator(a, b, orderBy);
-        }
-        return 1;
-      })
-      .slice((page - 1) * rowsPerPage, page * rowsPerPage),
-  };
-};
-
-export const Async = () => {
-  const [page, setPage] = useState(1);
-  const [sort, setSort] = useState<SortState>();
-
-  const { data } = useSWR(
-    `/people?${queryString({
-      page,
-      sort: sort ? `${sort.orderBy}:${sort.direction}` : undefined,
-    })}`,
-    (url) => updateData(url),
-  );
-
-  if (!data) {
-    return <Loader size="2xlarge" />;
-  }
-
-  const { results: people, count } = data;
-
-  type ColumnsType = {
-    key: keyof (typeof people)[0];
-    name: string;
-    width: number;
-    sortable?: boolean;
-    value?: (person: (typeof people)[0]) => string | undefined;
-  };
-  const columns: ColumnsType[] = [
-    { key: "name", name: "Name", width: 154 },
-    { key: "height", name: "Height", width: 108 },
-    { key: "mass", name: "Mass", width: 95 },
-    {
-      key: "birth_year",
-      name: "Birth year",
-      value: (person) =>
-        person.birth_year !== null ? `${person.birth_year}BBY` : undefined,
-      width: 133,
-    },
-    { key: "eye_color", name: "Eye color", width: 127 },
-    { key: "gender", name: "Gender", width: 113, sortable: false },
-    { key: "hair_color", name: "Hair color", width: 132 },
-    { key: "skin_color", name: "Skin color", width: 133 },
-  ];
-
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        gap: 16,
-      }}
-    >
-      <div style={{ overflow: "auto" }}>
-        <Table
-          style={{ width: "initial" }}
-          sort={sort}
-          onSortChange={(sortKey) =>
-            setSort(
-              !sortKey ||
-                (sort?.orderBy === sortKey && sort.direction === "descending")
-                ? undefined
-                : {
-                    orderBy: sortKey,
-                    direction:
-                      sort?.direction === "ascending"
-                        ? "descending"
-                        : "ascending",
-                  },
-            )
-          }
-        >
-          <Table.Header>
-            <Table.Row>
-              {columns.map(({ key, name, width, sortable = true }) => (
-                <Table.ColumnHeader
-                  style={{ width, minWidth: width, maxWidth: width }}
-                  key={key}
-                  sortable={sortable}
-                  sortKey={key}
-                >
-                  {name}
-                </Table.ColumnHeader>
-              ))}
-            </Table.Row>
-          </Table.Header>
-          <Table.Body>
-            {people.map((person) => (
-              <Table.Row key={person.name}>
-                {columns.map(({ key, width, value }) => (
-                  <Table.DataCell
-                    style={{
-                      width,
-                      minWidth: width,
-                      maxWidth: width,
-                      overflow: "hidden",
-                      whiteSpace: "nowrap",
-                      textOverflow: "ellipsis",
-                    }}
-                    title={person[key]?.toString()}
-                    key={key}
-                  >
-                    {value ? value(person) : person[key]}
-                  </Table.DataCell>
-                ))}
-              </Table.Row>
-            ))}
-          </Table.Body>
-        </Table>
-      </div>
-      <Pagination
-        page={page}
-        onPageChange={setPage}
-        count={Math.ceil(count / rowsPerPage)}
-      />
-    </div>
-  );
-};

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

@@ -1,102 +0,0 @@
-import { expect, fn, userEvent, within } from "@storybook/test";
-import React from "react";
-import Table from "../../Table";
-
-export default {
-  title: "ds-react/Table/Tests",
-  component: Table,
-  parameters: {
-    chromatic: { disable: true },
-  },
-};
-
-export const ClickableRowTest = {
-  render: ({ onOpenChange }) => {
-    return (
-      <>
-        <Table zebraStripes>
-          <Table.Header>
-            <Table.Row>
-              <Table.HeaderCell aria-hidden />
-              <Table.HeaderCell aria-hidden />
-              <Table.HeaderCell aria-hidden />
-              <Table.HeaderCell aria-hidden />
-              <Table.HeaderCell aria-hidden />
-              <Table.HeaderCell aria-hidden />
-            </Table.Row>
-          </Table.Header>
-          <Table.Body>
-            <Table.ExpandableRow
-              content={<div>placeholder row 2</div>}
-              togglePlacement="right"
-              data-testid="row1"
-              expandOnRowClick
-              onOpenChange={onOpenChange}
-            >
-              <Table.DataCell>
-                <div data-testid="cell1">Should be clickable</div>
-              </Table.DataCell>
-              <Table.DataCell data-testid="cell2">
-                Should also be clickable
-              </Table.DataCell>
-
-              <Table.DataCell>
-                <button data-testid="cell3">Should not be clickable</button>
-              </Table.DataCell>
-              <Table.DataCell>
-                <div>
-                  <div>
-                    <button data-testid="cell4">
-                      Nested should not be clickable
-                    </button>
-                  </div>
-                </div>
-              </Table.DataCell>
-              <Table.DataCell>
-                <div>
-                  <div>
-                    <button data-testid="cell4">
-                      <span>2x nested should not be clickable</span>
-                    </button>
-                  </div>
-                </div>
-              </Table.DataCell>
-            </Table.ExpandableRow>
-          </Table.Body>
-        </Table>
-      </>
-    );
-  },
-  args: {
-    onOpenChange: fn(),
-  },
-  play: async ({ canvasElement, args }) => {
-    args.onOpenChange.mockClear();
-    const canvas = within(canvasElement);
-
-    const cell1 = canvas.getByText("Should be clickable");
-    const cell2 = canvas.getByText("Should also be clickable");
-    const cell3 = canvas.getByText("Should not be clickable");
-    const cell4 = canvas.getByText("Nested should not be clickable");
-    const cell5 = canvas.getByText("2x nested should not be clickable");
-
-    await userEvent.click(cell1);
-    expect(args.onOpenChange.mock.calls).toHaveLength(1);
-    await userEvent.click(cell1);
-    expect(args.onOpenChange.mock.calls).toHaveLength(2);
-
-    await userEvent.click(cell2);
-    expect(args.onOpenChange.mock.calls).toHaveLength(3);
-    await userEvent.click(cell2);
-    expect(args.onOpenChange.mock.calls).toHaveLength(4);
-
-    await userEvent.click(cell3);
-    expect(args.onOpenChange.mock.calls).toHaveLength(4);
-
-    await userEvent.click(cell4);
-    expect(args.onOpenChange.mock.calls).toHaveLength(4);
-
-    await userEvent.click(cell5);
-    expect(args.onOpenChange.mock.calls).toHaveLength(4);
-  },
-};

package/src/tabs/Tabs.stories.tsx

@@ -1,311 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import React, { useState } from "react";
-import { DishwasherIcon, FreezerIcon, MugIcon } from "@navikt/aksel-icons";
-import { Tabs } from ".";
-import { VStack } from "../layout/stack";
-
-export default {
-  title: "ds-react/Tabs",
-  component: Tabs,
-  argTypes: {
-    size: {
-      options: ["medium", "small"],
-      control: {
-        type: "radio",
-      },
-    },
-    iconPosition: {
-      options: ["top", "left"],
-      control: {
-        type: "radio",
-      },
-    },
-  },
-  parameters: {
-    chromatic: { disable: true },
-  },
-} satisfies Meta<typeof Tabs>;
-
-type Story = StoryObj<typeof Tabs>;
-
-const Panel = () => (
-  <>
-    <Tabs.Panel
-      value="test1"
-      className="panel"
-      style={{ background: "var(--a-gray-50)", height: 100 }}
-    >
-      Innholdspanel for Skap-tab
-    </Tabs.Panel>
-    <Tabs.Panel
-      value="test2"
-      className="panel"
-      style={{
-        background: "var(--a-green-50)",
-        height: 100,
-      }}
-    >
-      Innholdspanel for Oppvaskmaskin-tab
-    </Tabs.Panel>
-    <Tabs.Panel
-      value="test3"
-      className="panel"
-      style={{ background: "var(--a-red-50)", height: 100 }}
-    >
-      Innholdspanel for Fryser-tab
-    </Tabs.Panel>
-    <style>{`.panel[data-state="active"] { display:grid; place-content: center;}`}</style>
-  </>
-);
-
-export const Default: Story = {
-  render: (props) => {
-    return (
-      <Tabs
-        defaultValue="test2"
-        size={props?.size}
-        selectionFollowsFocus={props?.selectionFollowsFocus}
-        loop={props?.loop}
-        iconPosition={props?.iconPosition}
-      >
-        <Tabs.List>
-          <Tabs.Tab value="test1" icon={<MugIcon aria-hidden />} label="Skap" />
-          <Tabs.Tab
-            value="test2"
-            label="Oppvaskmaskin"
-            icon={<DishwasherIcon aria-hidden />}
-          />
-          <Tabs.Tab
-            value="test3"
-            icon={<FreezerIcon aria-hidden />}
-            label="Fryser"
-          />
-        </Tabs.List>
-        <Panel />
-      </Tabs>
-    );
-  },
-
-  args: {
-    selectionFollowsFocus: false,
-    loop: false,
-  },
-};
-
-export const Small = () => (
-  <Tabs defaultValue="test2" size="small">
-    <Tabs.List>
-      <Tabs.Tab value="test1" icon={<MugIcon aria-hidden />} label="Skap" />
-      <Tabs.Tab
-        value="test2"
-        label="Oppvaskmaskin"
-        icon={<DishwasherIcon aria-hidden />}
-      />
-      <Tabs.Tab
-        value="test3"
-        icon={<FreezerIcon aria-hidden />}
-        label="Fryser"
-      />
-    </Tabs.List>
-    <Panel />
-  </Tabs>
-);
-
-export const Controlled = () => {
-  const [activeValue, setActiveValue] = useState("test1");
-  return (
-    <Tabs value={activeValue} onChange={setActiveValue}>
-      <Tabs.List>
-        <Tabs.Tab value="test1" icon={<MugIcon aria-hidden />} label="Skap" />
-        <Tabs.Tab
-          value="test2"
-          label="Oppvaskmaskin"
-          icon={<DishwasherIcon aria-hidden />}
-        />
-        <Tabs.Tab
-          value="test3"
-          icon={<FreezerIcon aria-hidden />}
-          label="Fryser"
-        />
-      </Tabs.List>
-      <Panel />
-    </Tabs>
-  );
-};
-
-export const IconPosition = () => (
-  <VStack gap="4">
-    <Tabs defaultValue="test2" size="small">
-      <Tabs.List>
-        <Tabs.Tab value="test1" icon={<MugIcon aria-hidden />} label="Skap" />
-        <Tabs.Tab
-          value="test2"
-          label="Oppvaskmaskin"
-          icon={<DishwasherIcon aria-hidden />}
-        />
-        <Tabs.Tab
-          value="test3"
-          icon={<FreezerIcon aria-hidden />}
-          label="Fryser"
-        />
-      </Tabs.List>
-      <Panel />
-    </Tabs>
-    <Tabs defaultValue="test2" size="small" iconPosition="top">
-      <Tabs.List style={{ margin: "0 auto" }}>
-        <Tabs.Tab value="test1" icon={<MugIcon aria-hidden />} label="Skap" />
-        <Tabs.Tab
-          value="test2"
-          label="Oppvaskmaskin"
-          icon={<DishwasherIcon aria-hidden />}
-        />
-        <Tabs.Tab
-          value="test3"
-          icon={<FreezerIcon aria-hidden />}
-          label="Fryser"
-        />
-      </Tabs.List>
-      <Panel />
-    </Tabs>
-  </VStack>
-);
-
-export const Icon = () => (
-  <VStack gap="4">
-    <Tabs defaultValue="test2">
-      <Tabs.List style={{ margin: "0 auto" }}>
-        <Tabs.Tab value="test1" icon={<MugIcon title="Skap" />} />
-        <Tabs.Tab
-          value="test2"
-          icon={<DishwasherIcon title="Oppvaskmaskin" />}
-        />
-        <Tabs.Tab value="test3" icon={<FreezerIcon title="Fryser" />} />
-      </Tabs.List>
-      <Panel />
-    </Tabs>
-    <Tabs defaultValue="test2" size="small" iconPosition="top">
-      <Tabs.List style={{ margin: "0 auto" }}>
-        <Tabs.Tab value="test1" icon={<MugIcon title="Skap" />} />
-        <Tabs.Tab
-          value="test2"
-          icon={<DishwasherIcon title="Oppvaskmaskin" />}
-        />
-        <Tabs.Tab value="test3" icon={<FreezerIcon title="Fryser" />} />
-      </Tabs.List>
-      <Panel />
-    </Tabs>
-  </VStack>
-);
-
-export const Overflow = () => (
-  <Tabs defaultValue="test2" style={{ maxWidth: 300 }}>
-    <Tabs.List>
-      <Tabs.Tab value="test1" icon={<MugIcon aria-hidden />} label="Skap" />
-      <Tabs.Tab
-        value="test2"
-        label="Oppvaskmaskin"
-        icon={<DishwasherIcon aria-hidden />}
-      />
-      <Tabs.Tab
-        value="test3"
-        icon={<FreezerIcon aria-hidden />}
-        label="Fryser"
-      />
-    </Tabs.List>
-    <Panel />
-  </Tabs>
-);
-
-export const Fill = () => (
-  <Tabs defaultValue="test2" fill>
-    <Tabs.List>
-      <Tabs.Tab value="test1" icon={<MugIcon aria-hidden />} label="Skap" />
-      <Tabs.Tab
-        value="test2"
-        icon={<DishwasherIcon aria-hidden />}
-        label="Oppvaskmaskin"
-      />
-      <Tabs.Tab
-        value="test3"
-        icon={<FreezerIcon aria-hidden />}
-        label="Fryser"
-      />
-    </Tabs.List>
-    <Panel />
-  </Tabs>
-);
-
-Fill.parameters = {
-  layout: "fullscreen",
-};
-
-export const CustomIds = () => (
-  <Tabs defaultValue="test2">
-    <Tabs.List>
-      <Tabs.Tab
-        value="test1"
-        label="Skap"
-        id="custom-tabid-1"
-        aria-controls="custom-tabpanelid-1"
-      />
-      <Tabs.Tab
-        value="test2"
-        label="Oppvaskmaskin"
-        id="custom-tabid-2"
-        aria-controls="custom-tabpanelid-2"
-      />
-    </Tabs.List>
-    <Tabs.Panel
-      value="test1"
-      className="panel"
-      id="custom-tabpanelid-1"
-      aria-labelledby="custom-tabid-1"
-    >
-      Innholdspanel for Skap-tab
-    </Tabs.Panel>
-    <Tabs.Panel
-      value="test2"
-      className="panel"
-      id="custom-tabpanelid-2"
-      aria-labelledby="custom-tabid-2"
-    >
-      Innholdspanel for Oppvaskmaskin-tab
-    </Tabs.Panel>
-  </Tabs>
-);
-
-export const Chromatic = {
-  render: () => (
-    <VStack gap="6" align="center">
-      <div>
-        <h2>Small</h2>
-        <Small />
-      </div>
-      <div>
-        <h2>Controlled</h2>
-        <Controlled />
-      </div>
-      <div>
-        <h2>IconPosition</h2>
-        <IconPosition />
-      </div>
-      <div>
-        <h2>Icon</h2>
-        <Icon />
-      </div>
-      <div>
-        <h2>Overflow</h2>
-        <Overflow />
-      </div>
-      <div>
-        <h2>Fill</h2>
-        <div style={{ minWidth: 600 }}>
-          <Fill />
-        </div>
-      </div>
-    </VStack>
-  ),
-  parameters: {
-    chromatic: { disable: false, delay: 300 },
-  },
-};