@navikt/ds-react 6.4.1 → 6.6.0

package/src/table/stories/table-1.stories.tsx

@@ -1,292 +0,0 @@
-import React, { useState } from "react";
-import { Table, TableProps } from "../";
-import { Button } from "../../button";
-import { Checkbox } from "../../form/checkbox";
-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>
-      <Table.Row>
-        {button && <Table.HeaderCell>Action</Table.HeaderCell>}
-        <Table.HeaderCell>ID</Table.HeaderCell>
-        <Table.HeaderCell>Fornavn</Table.HeaderCell>
-        <Table.HeaderCell textSize="medium">Etternavn</Table.HeaderCell>
-        <Table.HeaderCell textSize="small">Rolle</Table.HeaderCell>
-      </Table.Row>
-    </Table.Header>
-    <Table.Body>
-      <Table.Row shadeOnHover={shadeOnHover}>
-        {button && (
-          <Table.DataCell
-            style={{
-              paddingTop: 6,
-              paddingBottom: 6,
-            }}
-          >
-            <Button size="xsmall">Click me!</Button>
-          </Table.DataCell>
-        )}
-        <Table.HeaderCell>1</Table.HeaderCell>
-        <Table.DataCell>Jean-Luc</Table.DataCell>
-        <Table.DataCell>Picard</Table.DataCell>
-        <Table.DataCell>Kaptein</Table.DataCell>
-      </Table.Row>
-      <Table.Row shadeOnHover={shadeOnHover}>
-        {button && (
-          <Table.DataCell
-            style={{
-              paddingTop: 6,
-              paddingBottom: 6,
-            }}
-          >
-            <Button size="xsmall">Click me!</Button>
-          </Table.DataCell>
-        )}
-        <Table.HeaderCell>2</Table.HeaderCell>
-        <Table.DataCell>William</Table.DataCell>
-        <Table.DataCell>Riker</Table.DataCell>
-        <Table.DataCell>Kommandør</Table.DataCell>
-      </Table.Row>
-      <Table.Row shadeOnHover={shadeOnHover}>
-        {button && (
-          <Table.DataCell
-            style={{
-              paddingTop: 6,
-              paddingBottom: 6,
-            }}
-          >
-            <Button size="xsmall">Click me!</Button>
-          </Table.DataCell>
-        )}
-        <Table.HeaderCell>3</Table.HeaderCell>
-        <Table.DataCell>Geordi</Table.DataCell>
-        <Table.DataCell textSize="medium">La Forge</Table.DataCell>
-        <Table.DataCell textSize="small">Sjefsingeniør</Table.DataCell>
-      </Table.Row>
-    </Table.Body>
-  </Table>
-);
-
-export const Default = () => <TableComponent />;
-export const Zebra = () => <TableComponent zebraStripes />;
-export const NoShadeOnHover = () => <TableComponent shadeOnHover={false} />;
-export const ZebraNoShadeOnHover = () => (
-  <TableComponent zebraStripes shadeOnHover={false} />
-);
-export const SizeLarge = () => <TableComponent size="large" />;
-export const SizeMedium = () => <TableComponent size="medium" />;
-export const SizeSmall = () => <TableComponent size="small" />;
-
-export const Buttons = () => <TableComponent size="small" button />;
-
-export const WithDivs = () => {
-  return (
-    <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__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>
-      </div>
-    </div>
-  );
-};
-
-const SelectionTable = ({ size = "medium" }: { size?: "small" | "medium" }) => {
-  const useToggleList = (initialState) => {
-    const [list, setList] = useState(initialState);
-
-    return [
-      list,
-      (value) =>
-        setList((oldList) =>
-          oldList.includes(value)
-            ? oldList.filter((id) => id !== value)
-            : [...oldList, value],
-        ),
-    ];
-  };
-
-  const [selectedRows, toggleSelectedRow] = useToggleList([]);
-
-  return (
-    <Table size={size} zebraStripes>
-      <Table.Body>
-        <Table.Row>
-          <Table.DataCell>
-            <Checkbox
-              size={size}
-              indeterminate
-              onChange={() => toggleSelectedRow("all")}
-            >
-              Select all
-            </Checkbox>
-          </Table.DataCell>
-          <Table.HeaderCell scope="col">Name</Table.HeaderCell>
-          <Table.HeaderCell scope="col">Age</Table.HeaderCell>
-          <Table.HeaderCell scope="col">Country</Table.HeaderCell>
-          <Table.HeaderCell scope="col">Points</Table.HeaderCell>
-        </Table.Row>
-        <Table.Row selected={selectedRows.includes("1")}>
-          <Table.DataCell>
-            <Checkbox
-              size={size}
-              hideLabel
-              checked={selectedRows.includes("1")}
-              onChange={() => toggleSelectedRow("1")}
-              aria-labelledby={`x_r1-${size}`}
-            >
-              {" "}
-            </Checkbox>
-          </Table.DataCell>
-          <Table.HeaderCell scope="row">
-            <span id={`x_r1-${size}`}>Donald Smith</span>
-          </Table.HeaderCell>
-          <Table.DataCell>32</Table.DataCell>
-          <Table.DataCell>USA</Table.DataCell>
-          <Table.DataCell>38</Table.DataCell>
-        </Table.Row>
-        <Table.Row selected>
-          <Table.DataCell>
-            <Checkbox
-              size={size}
-              hideLabel
-              checked
-              onChange={() => toggleSelectedRow("2")}
-              aria-labelledby={`x_r2-${size}`}
-            >
-              {" "}
-            </Checkbox>
-          </Table.DataCell>
-          <Table.HeaderCell scope="row">
-            <span id={`x_r2-${size}`}>Preben Aalborg</span>
-          </Table.HeaderCell>
-          <Table.DataCell>44</Table.DataCell>
-          <Table.DataCell>Denmark</Table.DataCell>
-          <Table.DataCell>11</Table.DataCell>
-        </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-2-expandable.stories.tsx

@@ -1,298 +0,0 @@
-import React, { useState } from "react";
-import { Button } from "../../button";
-import { Checkbox } from "../../form/checkbox";
-import { Link } from "../../link";
-import Table from "../Table";
-
-export default {
-  title: "ds-react/Table",
-  component: Table,
-  parameters: {
-    chromatic: { disable: true },
-  },
-};
-
-export const Expandable = () => {
-  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 ExpandableLarge = () => {
-  const [open, setOpen] = useState(false);
-  return (
-    <Table size="large">
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell />
-          {columns.map(({ key, name }) => (
-            <Table.HeaderCell key={key}>{name}</Table.HeaderCell>
-          ))}
-        </Table.Row>
-      </Table.Header>
-      <Table.Body>
-        {data.slice(0, 1).map((row) => (
-          <Table.ExpandableRow defaultOpen content={row.content} key={row.name}>
-            {columns.map(({ key }) => (
-              <Table.DataCell key={key}>{row[key]}</Table.DataCell>
-            ))}
-          </Table.ExpandableRow>
-        ))}
-        {data.slice(1, 2).map((row) => (
-          <Table.ExpandableRow
-            content={row.content}
-            key={row.name}
-            open={open}
-            onOpenChange={setOpen}
-          >
-            {columns.map(({ key }) => (
-              <Table.DataCell key={key}>{row[key]}</Table.DataCell>
-            ))}
-          </Table.ExpandableRow>
-        ))}
-      </Table.Body>
-    </Table>
-  );
-};
-
-export const ExpandableSmall = () => {
-  const [open, setOpen] = useState(false);
-  return (
-    <Table size="small">
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell />
-          {columns.map(({ key, name }) => (
-            <Table.HeaderCell key={key}>{name}</Table.HeaderCell>
-          ))}
-        </Table.Row>
-      </Table.Header>
-      <Table.Body>
-        {data.slice(0, 1).map((row) => (
-          <Table.ExpandableRow defaultOpen content={row.content} key={row.name}>
-            {columns.map(({ key }) => (
-              <Table.DataCell key={key}>{row[key]}</Table.DataCell>
-            ))}
-          </Table.ExpandableRow>
-        ))}
-        {data.slice(1, 2).map((row) => (
-          <Table.ExpandableRow
-            content={row.content}
-            key={row.name}
-            open={open}
-            onOpenChange={setOpen}
-          >
-            {columns.map(({ key }) => (
-              <Table.DataCell key={key}>{row[key]}</Table.DataCell>
-            ))}
-          </Table.ExpandableRow>
-        ))}
-      </Table.Body>
-    </Table>
-  );
-};
-
-const columns = [
-  {
-    name: "Navn",
-    key: "name",
-  },
-  {
-    name: "Favoritt dyr",
-    key: "animal",
-  },
-  {
-    name: "Favoritt farge",
-    key: "color",
-  },
-  {
-    name: "Minst favoritt dyr",
-    key: "leastAnimal",
-  },
-  {
-    name: "Minst favoritt farge",
-    key: "leastColor",
-  },
-  {
-    name: "Status",
-    key: "status",
-  },
-];
-
-const data = [
-  {
-    name: "Ola Conny Brakkestad",
-    animal: "Ku",
-    color: "Brun",
-    leastAnimal: "Sel",
-    leastColor: "Lyseblå",
-    status: "Inaktiv",
-    content: (
-      <>
-        Ola Conny Brakkestad sier hei. Her er litt innhold med en{" "}
-        <Link href="#">link.</Link>
-      </>
-    ),
-  },
-
-  {
-    name: "Henriette Kristensen",
-    animal: "Bjørn",
-    color: "Hvit",
-    leastAnimal: "Grevling",
-    leastColor: "Transparent",
-    status: <Link href="http://example.com">Hissig</Link>,
-    content: (
-      <>
-        Henriette Kristensen sier hei. Her er litt innhold med en{" "}
-        <Link href="http://example.com">lenke</Link>. I forhold til en betydelig
-        avveining synliggjøres potensialet med sikte på satsingsområdet. Gitt en
-        manglende avveining synliggjøres instrumentet på bakgrunn av forholdene.
-        Under hensyntagen til en inkluderende avveining stimuleres resultatene
-        med henblikk på løsningen. På grunn av en integrert organisasjon
-        initieres kunnskapene eller sagt på en annen måte: evalueringen. Grunnet
-        en gjeldende målsetting dokumenteres relasjonene hva angår egenarten.
-      </>
-    ),
-  },
-
-  {
-    name: "Suki Clydesdale",
-    animal: "Sel",
-    color: "Grønn",
-    leastAnimal: "Serval",
-    leastColor: "Rosa",
-    status: "Deaktivert",
-    content: (
-      <>
-        Suki Clydesdale sier hei. Her er litt innhold med en{" "}
-        <Link href="http://example.com">link</Link>.
-      </>
-    ),
-  },
-
-  {
-    name: "Hans-Hermann Hoppe",
-    animal: "Mudkip",
-    color: "Oransje",
-    leastAnimal: "Skare",
-    leastColor: "Hvit",
-    status: <Link href="#">Starter</Link>,
-    content: (
-      <>
-        Hans-Hermann Hoppe sier hei. Her er litt innhold med en{" "}
-        <Link href="http://example.com">link</Link>.
-      </>
-    ),
-  },
-
-  {
-    name: "Max Kraft",
-    animal: "Løve",
-    color: "Blå",
-    leastAnimal: "Hund",
-    leastColor: "Cyan",
-    status: <Link href="#">Eksplodert</Link>,
-    content: (
-      <>
-        Max Kraft sier hei. Her er litt innhold med en{" "}
-        <Link href="http://example.com">link</Link>.
-      </>
-    ),
-  },
-
-  {
-    name: "Pat Ole",
-    animal: "Bjørnedyr",
-    color: "Gul",
-    leastAnimal: "Meitemark",
-    leastColor: "Svart",
-    status: <Link href="#">Gunstig</Link>,
-    content: (
-      <>
-        Pat Ole sier hei. Her er litt innhold med en{" "}
-        <Link href="http://example.com">lenke</Link>.
-      </>
-    ),
-  },
-];
-
-export const ClickableRow = () => {
-  const [isRowOpen1, setIsRowOpen1] = useState(false);
-  const [isRowOpen2, setIsRowOpen2] = useState(false);
-
-  return (
-    <>
-      <Table zebraStripes>
-        <Table.Header>
-          <Table.Row>
-            <Table.HeaderCell>Navn</Table.HeaderCell>
-            <Table.HeaderCell>Info</Table.HeaderCell>
-            <Table.HeaderCell aria-hidden />
-          </Table.Row>
-        </Table.Header>
-        <Table.Body>
-          <Table.ExpandableRow
-            content={<div>placeholder row 1</div>}
-            togglePlacement="right"
-            onOpenChange={setIsRowOpen1}
-            data-testid="row1"
-            open={isRowOpen1}
-            expandOnRowClick
-          >
-            <Table.DataCell>Ola</Table.DataCell>
-            <Table.DataCell>
-              <Button
-                size="xsmall"
-                onClick={() => {
-                  alert("Mer info");
-                }}
-              >
-                Mer info
-              </Button>
-            </Table.DataCell>
-          </Table.ExpandableRow>
-          <Table.ExpandableRow
-            content={<div>placeholder row 2</div>}
-            togglePlacement="right"
-            onOpenChange={setIsRowOpen2}
-            data-testid="row2"
-            open={isRowOpen2}
-            expandOnRowClick
-          >
-            <Table.DataCell>Hans</Table.DataCell>
-            <Table.DataCell>
-              <Checkbox hideLabel size="small">
-                Sett
-              </Checkbox>
-            </Table.DataCell>
-          </Table.ExpandableRow>
-        </Table.Body>
-      </Table>
-    </>
-  );
-};