@navikt/ds-react 0.16.17 → 0.16.18

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

@@ -0,0 +1,169 @@
+import React, { useState } from "react";
+import { rest } from "msw";
+import useSWR from "swr";
+import people from "./people.json";
+import { Table } from "../index";
+import { Loader, Pagination, SortState } from "../..";
+
+export default {
+  title: "ds-react/table",
+  component: Table,
+  parameters: {
+    chromatic: { delay: 500 },
+  },
+};
+
+const rowsPerPage = 10;
+
+const queryString = (obj) =>
+  Object.keys(obj)
+    .filter((key) => obj[key] !== undefined)
+    .map((key) => key + "=" + obj[key])
+    .join("&");
+
+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) => fetch(url).then((res) => res.json())
+  );
+
+  if (!data) {
+    return <Loader size="2xlarge" />;
+  }
+
+  const { results: people, count } = data;
+
+  const columns = [
+    { 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(
+              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]}
+                    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>
+  );
+};
+
+Async.parameters = {
+  msw: {
+    handlers: [
+      rest.get("/people", (req, res, ctx) => {
+        const comparator = (a, b, orderBy) => {
+          if (b[orderBy] < a[orderBy]) {
+            return -1;
+          }
+          if (b[orderBy] > a[orderBy]) {
+            return 1;
+          }
+          return 0;
+        };
+
+        const page = Number(req.url.searchParams.get("page"));
+        const sort = req.url.searchParams.get("sort");
+        return res(
+          //ctx.delay(),
+          ctx.json({
+            count: people.length,
+            results: people
+              .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),
+          })
+        );
+      }),
+    ],
+  },
+};

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

@@ -0,0 +1,376 @@
+import React, { useState } from "react";
+import { capitalize } from "@material-ui/core";
+import { Table } from "../";
+import { Button } from "../..";
+import { SortState } from "../..";
+
+export default {
+  title: "ds-react/table",
+  component: Table,
+};
+
+interface Column {
+  key: string;
+  name?: string;
+  sortable?: boolean;
+  render?: (value: any) => React.ReactElement<any, any> | null;
+  value?: (oppgave: any) => any;
+  width?: number;
+  align?: "left" | "center" | "right";
+}
+
+export const Hot = () => {
+  const [sort, setSort] = useState<SortState>();
+
+  const columns: Column[] = [
+    {
+      key: "eier",
+      name: "Eier",
+      render: (value) =>
+        value ?? (
+          <Button
+            size="xsmall"
+            style={{ marginTop: -2, marginBottom: -2, marginLeft: -6 }}
+            variant="tertiary"
+          >
+            Start saken
+          </Button>
+        ),
+      value: (oppgave) => oppgave.saksbehandler?.navn,
+      width: 152,
+    },
+    {
+      key: "status",
+      name: "Status",
+      value: (oppgave) =>
+        ({
+          ALLE: "Alle",
+          VEDTAK_FATTET: "Innvilget",
+          AVVENTER_SAKSBEHANDLER: "Mottatt",
+          SENDT_GOSYS: "Sendt GOSYS",
+          TILDELT_SAKSBEHANDLER: "Under behandling",
+        }[oppgave.status]),
+      width: 154,
+    },
+    {
+      key: "område",
+      name: "Område",
+      value: (oppgave) =>
+        capitalize(oppgave.personinformasjon.funksjonsnedsettelse[0]),
+      width: 152,
+    },
+    {
+      key: "søknadOm",
+      name: "Søknad om",
+      width: 192,
+    },
+    {
+      key: "hjelpemiddelbruker",
+      name: "Hjelpemiddelbruker",
+      value: (oppgave) =>
+        `${oppgave.personinformasjon.etternavn}, ${oppgave.personinformasjon.fornavn}`,
+      width: 188,
+    },
+    {
+      key: "fødselsnr",
+      name: "Fødselsnr.",
+      value: (oppgave) =>
+        `${oppgave.personinformasjon.fnr.slice(
+          0,
+          6
+        )} ${oppgave.personinformasjon.fnr.slice(6)}`,
+      width: 124,
+      align: "right",
+    },
+    {
+      key: "bosted",
+      name: "Bosted",
+      value: (oppgave) => oppgave.personinformasjon.bosted,
+      width: 144,
+    },
+    {
+      key: "formidlerNavn",
+      name: "Formidler",
+      width: 164,
+    },
+    {
+      key: "mottattDato",
+      name: "Mottatt dato",
+      width: 124,
+    },
+    {
+      key: "menu",
+      sortable: false,
+      render: (value) => (
+        <span style={{ display: "flex", marginBlock: -2 }}></span>
+      ),
+      value: (oppgave) => oppgave.saksbehandler,
+    },
+  ];
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: 16,
+      }}
+    >
+      <div style={{ overflow: "auto" }}>
+        <Table
+          size="small"
+          style={{ width: "initial" }}
+          sort={sort}
+          onSortChange={(sortKey) =>
+            setSort({
+              orderBy: sortKey,
+              direction:
+                sort?.direction === "ascending" ? "descending" : "ascending",
+            })
+          }
+        >
+          <Table.Header>
+            <Table.Row>
+              {columns.map(({ key, name, width, sortable = true, align }) => (
+                <Table.ColumnHeader
+                  style={{
+                    width,
+                    minWidth: width,
+                    maxWidth: width,
+                  }}
+                  key={key}
+                  sortable={sortable}
+                  sortKey={key}
+                  align={align}
+                >
+                  <div
+                    style={{
+                      overflow: "hidden",
+                      whiteSpace: "nowrap",
+                      textOverflow: "ellipsis",
+                    }}
+                  >
+                    {name}
+                  </div>
+                </Table.ColumnHeader>
+              ))}
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {data
+              .slice()
+              .sort((a, b) => {
+                if (sort) {
+                  const comparator = (a, b, orderBy) => {
+                    const lookup = (oppgave) => {
+                      const column = columns.find(({ key }) => key === orderBy);
+
+                      return column.value
+                        ? column.value(oppgave)
+                        : oppgave[orderBy];
+                    };
+
+                    if (lookup(b) < lookup(a) || lookup(b) === undefined) {
+                      return -1;
+                    }
+                    if (lookup(b) > lookup(a)) {
+                      return 1;
+                    }
+                    return 0;
+                  };
+
+                  return sort.direction === "ascending"
+                    ? comparator(b, a, sort.orderBy)
+                    : comparator(a, b, sort.orderBy);
+                }
+                return 1;
+              })
+              .map((oppgave) => (
+                <Table.Row key={oppgave.saksid}>
+                  {columns.map(
+                    ({
+                      key,
+                      value,
+                      width,
+                      render = (value) => value,
+                      align,
+                    }) => (
+                      <Table.DataCell
+                        style={{
+                          width,
+                          minWidth: width,
+                          maxWidth: width,
+                          overflow: "hidden",
+                          whiteSpace: "nowrap",
+                          textOverflow: "ellipsis",
+                        }}
+                        title={oppgave[key]}
+                        key={key}
+                        align={align}
+                      >
+                        {render(value ? value(oppgave) : oppgave[key])}
+                      </Table.DataCell>
+                    )
+                  )}
+                </Table.Row>
+              ))}
+          </Table.Body>
+        </Table>
+      </div>
+    </div>
+  );
+};
+
+const data = [
+  {
+    saksid: "111111",
+    søknadOm:
+      "Søknad om: Toalettforhøyer; kalender-/minnesystem; støttehåndtak; tidsur; komfyr-/elvakt",
+    mottattDato: "2021-09-19T13:55:45",
+    formidlerNavn: "Kari Johansen",
+    personinformasjon: {
+      fnr: "19044238651",
+      funksjonsnedsettelse: ["bevegelse"],
+      fornavn: "Petter Andreas",
+      etternavn: "Hansen",
+      poststed: "Trondheim",
+      bosted: "TRONDHEIM",
+    },
+    saksbehandler: null,
+    status: "AVVENTER_SAKSBEHANDLER",
+    enhet: [
+      {
+        enhetsnummer: "6969",
+        enhetsnavn: "Enhetsnavn",
+      },
+    ],
+  },
+  {
+    saksid: "222222",
+    søknadOm: "Hjelpemidler",
+    mottattDato: "2021-09-24T13:55:45",
+    formidlerNavn: "Kari Johansen",
+    personinformasjon: {
+      fnr: "13044238651",
+      funksjonsnedsettelse: ["bevegelse"],
+      fornavn: "Mia Cathrine",
+      etternavn: "Svendsen",
+      poststed: "Trondheim",
+      bosted: "TRONDHEIM",
+    },
+    saksbehandler: null,
+    status: "AVVENTER_SAKSBEHANDLER",
+    enhet: [
+      {
+        enhetsnummer: "6969",
+        enhetsnavn: "Enhetsnavn",
+      },
+    ],
+  },
+
+  {
+    saksid: "5878444",
+    søknadOm: "Hjelpemidler",
+    mottattDato: "2021-09-20T13:55:45",
+    formidlerNavn: "Kari Johansen",
+    personinformasjon: {
+      fnr: "130441386551",
+      funksjonsnedsettelse: ["bevegelse"],
+      fornavn: "Per Bjørkli",
+      etternavn: "Hansen",
+      poststed: "Trondheim",
+      bosted: "TRONDHEIM",
+    },
+    saksbehandler: {
+      epost: "a.b@nav.no",
+      objectId: "23ea7485-1324-4b25-a763-6969",
+      navn: "Geir Markusen",
+    },
+    status: "SENDT_GOSYS",
+    enhet: [
+      {
+        enhetsnummer: "6969",
+        enhetsnavn: "Enhetsnavn",
+      },
+    ],
+  },
+
+  {
+    saksid: "1234567",
+    søknadOm: "Hjelpemidler",
+    mottattDato: "2021-06-25T13:55:45",
+    formidlerNavn: "Kari Johansen",
+    personinformasjon: {
+      fnr: "06115559891",
+      funksjonsnedsettelse: ["kognisjon"],
+      fornavn: "Iver",
+      etternavn: "Slettan",
+      poststed: "Lade",
+      bosted: "TRONDHEIM",
+    },
+    saksbehandler: {
+      epost: "a.b@nav.no",
+      objectId: "23ea7485-1324-4b25-a763-assdfdfa",
+      navn: "Silje Saksbehandler",
+    },
+    status: "TILDELT_SAKSBEHANDLER",
+    enhet: [
+      {
+        enhetsnummer: "6969",
+        enhetsnavn: "Enhetsnavn",
+      },
+    ],
+  },
+  {
+    saksid: "999999",
+    søknadOm: "Hjelpemidler",
+    mottattDato: "2021-06-25T16:55:45",
+    formidlerNavn: "Kari Johansen",
+    personinformasjon: {
+      fnr: "16120101181",
+      funksjonsnedsettelse: ["bevegelse"],
+      fornavn: "Sondre",
+      etternavn: "Hansen",
+      poststed: "Lade",
+      bosted: "TRONDHEIM",
+    },
+    saksbehandler: {
+      epost: "a.b@nav.no",
+      objectId: "23ea7485-1324-4b25-a763-6969",
+      navn: "Geir Markusen",
+    },
+    status: "TILDELT_SAKSBEHANDLER",
+    enhet: [
+      {
+        enhetsnummer: "6969",
+        enhetsnavn: "Enhetsnavn",
+      },
+    ],
+  },
+  {
+    saksid: "888888",
+    søknadOm: "Hjelpemidler",
+    mottattDato: "2021-09-19T13:55:45",
+    formidlerNavn: "Kari Johansen",
+    personinformasjon: {
+      fnr: "19044238651",
+      funksjonsnedsettelse: ["bevegelse"],
+      fornavn: "Geir",
+      etternavn: "Dalby",
+      poststed: "Trondheim",
+      bosted: "TRONDHEIM",
+    },
+    saksbehandler: {
+      epost: "a.b@nav.no",
+      objectId: "23ea7485-1324-4b25-a763-assdfdfa",
+      navn: "Silje Saksbehandler",
+    },
+    status: "VEDTAK_FATTET",
+    enhet: [
+      {
+        enhetsnummer: "6969",
+        enhetsnavn: "Enhetsnavn",
+      },
+    ],
+  },
+];

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

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
-import { Table } from "../index";
-import { Alert, Checkbox, Link } from "@navikt/ds-react";
+import { Table } from "../";
+import { Alert, Button, Checkbox, Link } from "../..";
 
 export default {
   title: "ds-react/table",
@@ -12,6 +12,7 @@ export const All = () => {
     <Table {...props}>
       <Table.Header>
         <Table.Row>
+          {props.button && <Table.HeaderCell>Action</Table.HeaderCell>}
           <Table.HeaderCell>ID</Table.HeaderCell>
           <Table.HeaderCell>Fornavn</Table.HeaderCell>
           <Table.HeaderCell>Etternavn</Table.HeaderCell>
@@ -20,18 +21,48 @@ export const All = () => {
       </Table.Header>
       <Table.Body>
         <Table.Row>
+          {props.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>
+          {props.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>
+          {props.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>La Forge</Table.DataCell>
@@ -48,6 +79,8 @@ export const All = () => {
       <TableComponent zebraStripes />
       <h2>Small Table</h2>
       <TableComponent size="small" />
+      <h2>Small Table with buttons</h2>
+      <TableComponent size="small" button />
       <h2>Table with divs</h2>
       <Alert variant="warning">
         Obs! Hvis man skal bygge tabeller uten å bruke vanlig {"<tabell> "}