@navikt/ds-react 6.4.1 → 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/Tab.tsx

@@ -1,66 +0,0 @@
-import * as RadixTabs from "@radix-ui/react-tabs";
-import cl from "clsx";
-import React, { forwardRef, useContext } from "react";
-import { BodyShort } from "../typography";
-import { OverridableComponent } from "../util/types";
-import { TabsContext } from "./context";
-
-export interface TabProps
-  extends Omit<React.HTMLAttributes<HTMLButtonElement>, "children"> {
-  /**
-   * Tab label
-   */
-  label?: React.ReactNode;
-  /**
-   * Tab Icon
-   */
-  icon?: React.ReactNode;
-  /**
-   * Value for state-handling
-   */
-  value: string;
-}
-
-export const Tab: OverridableComponent<TabProps, HTMLButtonElement> =
-  forwardRef(
-    (
-      { className, as: Component = "button", label, icon, value, ...rest },
-      ref,
-    ) => {
-      const context = useContext(TabsContext);
-
-      if (!label && !icon) {
-        console.error("<Tabs.Tab/> needs label/icon");
-        return null;
-      }
-
-      return (
-        <RadixTabs.Trigger value={value} asChild>
-          <Component
-            ref={ref}
-            className={cl(
-              "navds-tabs__tab",
-              `navds-tabs__tab--${context?.size ?? "medium"}`,
-              `navds-tabs__tab-icon--${context?.iconPosition}`,
-              className,
-              {
-                "navds-tabs__tab--icon-only": icon && !label,
-              },
-            )}
-            {...rest}
-          >
-            <BodyShort
-              as="span"
-              className="navds-tabs__tab-inner"
-              size={context?.size}
-            >
-              {icon}
-              {label}
-            </BodyShort>
-          </Component>
-        </RadixTabs.Trigger>
-      );
-    },
-  );
-
-export default Tab;

package/src/tabs/TabList.tsx

@@ -1,128 +0,0 @@
-import * as RadixTabs from "@radix-ui/react-tabs";
-import cl from "clsx";
-import React, {
-  forwardRef,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { ChevronLeftIcon, ChevronRightIcon } from "@navikt/aksel-icons";
-import { debounce } from "../util";
-import { useMergeRefs } from "../util/hooks/useMergeRefs";
-import { TabsContext } from "./context";
-
-export interface TabListProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * `<Tabs.Tab />` elements
-   */
-  children: React.ReactNode;
-}
-
-export const TabList = forwardRef<HTMLDivElement, TabListProps>(
-  ({ className, ...rest }, ref) => {
-    const context = useContext(TabsContext);
-    const listRef = useRef<HTMLDivElement | null>(null);
-    const mergedRef = useMergeRefs(listRef, ref);
-
-    const [displayScroll, setDisplayScroll] = useState({
-      start: false,
-      end: false,
-    });
-
-    const updateScrollButtonState = useMemo(
-      () =>
-        debounce(() => {
-          if (!listRef?.current) return;
-          const { scrollWidth, clientWidth } = listRef.current;
-          const scrollLeft = listRef.current.scrollLeft;
-          // use 1 for the potential rounding error with browser zooms.
-          const showStartScroll = scrollLeft > 1;
-          const showEndScroll = scrollLeft < scrollWidth - clientWidth - 1;
-
-          setDisplayScroll((oldDisplayScroll) =>
-            showStartScroll === oldDisplayScroll.start &&
-            showEndScroll === oldDisplayScroll.end
-              ? oldDisplayScroll
-              : { start: showStartScroll, end: showEndScroll },
-          );
-        }),
-      [],
-    );
-
-    useEffect(() => {
-      const handleResize = () => updateScrollButtonState();
-      const win = listRef.current?.ownerDocument ?? document ?? window;
-      win.addEventListener("resize", handleResize);
-
-      let resizeObserver;
-
-      if (typeof ResizeObserver !== "undefined") {
-        resizeObserver = new ResizeObserver(handleResize);
-        resizeObserver.observe(listRef.current);
-      }
-
-      return () => {
-        win.removeEventListener("resize", handleResize);
-        if (resizeObserver) {
-          resizeObserver.disconnect();
-        }
-      };
-    }, [updateScrollButtonState]);
-
-    useEffect(() => {
-      updateScrollButtonState();
-    });
-
-    useEffect(() => {
-      return () => {
-        updateScrollButtonState.clear();
-      };
-    }, [updateScrollButtonState]);
-
-    const ScrollButton = ({
-      dir,
-      hidden,
-    }: {
-      dir: 1 | -1;
-      hidden: boolean;
-    }) => (
-      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-      <div
-        className={cl("navds-tabs__scroll-button", {
-          "navds-tabs__scroll-button--hidden": hidden,
-        })}
-        onClick={() => {
-          if (!listRef.current) return;
-          listRef.current.scrollLeft += dir * 100;
-        }}
-      >
-        {dir === -1 ? (
-          <ChevronLeftIcon title="scroll tilbake" />
-        ) : (
-          <ChevronRightIcon title="scroll neste" />
-        )}
-      </div>
-    );
-
-    const showSteppers = displayScroll.end || displayScroll.start;
-    return (
-      <div className="navds-tabs__tablist-wrapper">
-        {showSteppers && (
-          <ScrollButton dir={-1} hidden={!displayScroll.start} />
-        )}
-        <RadixTabs.TabsList
-          {...rest}
-          ref={mergedRef}
-          onScroll={updateScrollButtonState}
-          loop={context?.loop}
-          className={cl("navds-tabs__tablist", className)}
-        />
-        {showSteppers && <ScrollButton dir={1} hidden={!displayScroll.end} />}
-      </div>
-    );
-  },
-);
-
-export default TabList;

package/src/tabs/TabPanel.tsx

@@ -1,26 +0,0 @@
-import * as RadixTabs from "@radix-ui/react-tabs";
-import cl from "clsx";
-import React, { forwardRef } from "react";
-
-export interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * Tab panel content
-   */
-  children: React.ReactNode;
-  /**
-   * Value for state-handling
-   */
-  value: string;
-}
-
-const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(
-  ({ className, ...rest }, ref) => (
-    <RadixTabs.TabsContent
-      {...rest}
-      ref={ref}
-      className={cl("navds-tabs__tabpanel", className)}
-    />
-  ),
-);
-
-export default TabPanel;

package/src/tabs/Tabs.stories.tsx

@@ -1,191 +0,0 @@
-import { Meta } from "@storybook/react";
-import React, { useState } from "react";
-import { DishwasherIcon, FreezerIcon, MugIcon } from "@navikt/aksel-icons";
-import { Tabs } from ".";
-
-export default {
-  title: "ds-react/Tabs",
-  component: Tabs,
-  argTypes: {
-    size: {
-      options: ["medium", "small"],
-      control: {
-        type: "radio",
-      },
-    },
-    iconPosition: {
-      options: ["top", "left"],
-      control: {
-        type: "radio",
-      },
-    },
-  },
-} satisfies Meta<typeof Tabs>;
-
-const Panel = () => {
-  return (
-    <>
-      <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 = {
-  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 />} label="Skap" />
-          <Tabs.Tab
-            value="test2"
-            label="Oppvaskmaskin"
-            icon={<DishwasherIcon />}
-          />
-          <Tabs.Tab value="test3" icon={<FreezerIcon />} label="Fryser" />
-        </Tabs.List>
-        <Panel />
-      </Tabs>
-    );
-  },
-
-  args: {
-    selectionFollowsFocus: false,
-    loop: false,
-  },
-};
-
-export const Small = () => {
-  return (
-    <Tabs defaultValue="test2" size="small">
-      <Tabs.List>
-        <Tabs.Tab value="test1" icon={<MugIcon />} label="Skap" />
-        <Tabs.Tab
-          value="test2"
-          label="Oppvaskmaskin"
-          icon={<DishwasherIcon />}
-        />
-        <Tabs.Tab value="test3" icon={<FreezerIcon />} 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 />} label="Skap" />
-        <Tabs.Tab
-          value="test2"
-          label="Oppvaskmaskin"
-          icon={<DishwasherIcon />}
-        />
-        <Tabs.Tab value="test3" icon={<FreezerIcon />} label="Fryser" />
-      </Tabs.List>
-      <Panel />
-    </Tabs>
-  );
-};
-
-export const IconPosition = () => {
-  return (
-    <div className="colgap">
-      <Tabs defaultValue="test2" size="small">
-        <Tabs.List>
-          <Tabs.Tab value="test1" icon={<MugIcon />} label="Skap" />
-          <Tabs.Tab
-            value="test2"
-            label="Oppvaskmaskin"
-            icon={<DishwasherIcon />}
-          />
-          <Tabs.Tab value="test3" icon={<FreezerIcon />} 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 />} label="Skap" />
-          <Tabs.Tab
-            value="test2"
-            label="Oppvaskmaskin"
-            icon={<DishwasherIcon />}
-          />
-          <Tabs.Tab value="test3" icon={<FreezerIcon />} label="Fryser" />
-        </Tabs.List>
-        <Panel />
-      </Tabs>
-    </div>
-  );
-};
-
-export const Icon = () => {
-  return (
-    <div className="colgap">
-      <Tabs defaultValue="test2">
-        <Tabs.List style={{ margin: "0 auto" }}>
-          <Tabs.Tab value="test1" icon={<MugIcon />} />
-          <Tabs.Tab value="test2" icon={<DishwasherIcon />} />
-          <Tabs.Tab value="test3" icon={<FreezerIcon />} />
-        </Tabs.List>
-        <Panel />
-      </Tabs>
-      <Tabs defaultValue="test2" size="small" iconPosition="top">
-        <Tabs.List style={{ margin: "0 auto" }}>
-          <Tabs.Tab value="test1" icon={<MugIcon />} />
-          <Tabs.Tab value="test2" icon={<DishwasherIcon />} />
-          <Tabs.Tab value="test3" icon={<FreezerIcon />} />
-        </Tabs.List>
-        <Panel />
-      </Tabs>
-    </div>
-  );
-};
-
-export const Overflow = () => {
-  return (
-    <Tabs defaultValue="test2" style={{ maxWidth: 300 }}>
-      <Tabs.List>
-        <Tabs.Tab value="test1" icon={<MugIcon />} label="Skap" />
-        <Tabs.Tab
-          value="test2"
-          label="Oppvaskmaskin"
-          icon={<DishwasherIcon />}
-        />
-        <Tabs.Tab value="test3" icon={<FreezerIcon />} label="Fryser" />
-      </Tabs.List>
-      <Panel />
-    </Tabs>
-  );
-};

package/src/tabs/context.ts

@@ -1,9 +0,0 @@
-import { createContext } from "react";
-
-interface TabsContextProps {
-  size: "medium" | "small";
-  loop: boolean;
-  iconPosition: "left" | "top";
-}
-
-export const TabsContext = createContext<TabsContextProps | null>(null);