@navikt/ds-react 0.19.7 → 0.19.10

package/src/panel/stories/panel.stories.mdx

@@ -1,42 +0,0 @@
-import { Meta, Canvas } from "@storybook/addon-docs";
-import { Panel } from "../../index";
-
-<Meta title="ds-react/panel/intro" />
-
-# Hvordan ta i bruk Panel
-
-Veldig enkel wrapper-komponent for panel-styling. Kan erstattes 1-1 med `nav-frontend-paneler`.
-
-```jsx
-<Panel>
-  Eu quis exercitation voluptate ex. Aute irure esse occaecat minim cupidatat
-  velit minim duis sint culpa anim laboris. Consectetur nulla eu commodo ea
-  culpa velit commodo incididunt sunt ipsum.
-</Panel>
-```
-
-<Canvas>
-  <Panel>
-    Eu quis exercitation voluptate ex. Aute irure esse occaecat minim cupidatat
-    velit minim duis sint culpa anim laboris. Consectetur nulla eu commodo ea
-    culpa velit commodo incididunt sunt ipsum.
-  </Panel>
-</Canvas>
-
-## Border
-
-```jsx
-<Panel border>
-  Eu quis exercitation voluptate ex. Aute irure esse occaecat minim cupidatat
-  velit minim duis sint culpa anim laboris. Consectetur nulla eu commodo ea
-  culpa velit commodo incididunt sunt ipsum.
-</Panel>
-```
-
-<Canvas>
-  <Panel border>
-    Eu quis exercitation voluptate ex. Aute irure esse occaecat minim cupidatat
-    velit minim duis sint culpa anim laboris. Consectetur nulla eu commodo ea
-    culpa velit commodo incididunt sunt ipsum.
-  </Panel>
-</Canvas>

package/src/popover/stories/popover.stories.mdx

@@ -1,23 +0,0 @@
-import { Meta, Canvas } from "@storybook/addon-docs";
-import { Popover } from "../../index";
-import { placements } from "@popperjs/core";
-
-<Meta title="ds-react/popover/intro" />
-
-# Hvordan ta i bruk Popover
-
-```jsx
-<Popover anchorEl={anchorEl} onClose={() => handleClose} open={open}>
-  <div style={{ margin: "1rem" }}>Contents</div>
-</Popover>
-```
-
-## Plassering
-
-Plassering er alle mulighetene tilbytt av `import { placements } from "@popperjs/core";`
-
-`auto` , `auto-start` , `auto-end` , `top` , `bottom` , `right` , `left` , `top` ,`top-start` , `top-end` , `bottom-start` , `bottom-end` , `right-start` , `right-end` , `left-start` , `left-end`
-
-## Arrow + offset
-
-`arrow`-proppen toggler om arrow skal rendres med popoveren, mens `offset`-proppen er `px` offset popoveren har fra ankerelementet.

package/src/popover/stories/popover.stories.tsx

@@ -1,56 +0,0 @@
-import React, { useState } from "react";
-import { Popover } from "../index";
-import { Meta } from "@storybook/react/types-6-0";
-import { placements } from "@popperjs/core";
-export default {
-  title: "ds-react/popover",
-  component: Popover,
-  parameters: {
-    chromatic: { disable: true },
-  },
-} as Meta;
-
-const Template = (props) => {
-  const [anchorEl, setAnchorEl] = useState(null);
-
-  return (
-    <>
-      <div
-        style={{
-          background: "var(--navds-global-color-gray-600)",
-          textAlign: "center",
-          width: "2rem",
-          height: "2rem",
-        }}
-        ref={(el) => setAnchorEl(el)}
-      ></div>
-      <Popover {...props} anchorEl={anchorEl} onClose={() => {}} open>
-        <Popover.Content>{props.placement}</Popover.Content>
-      </Popover>
-    </>
-  );
-};
-
-export const All = () => {
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexWrap: "wrap",
-        margin: "4rem 8rem 4rem 8rem",
-        gap: "4rem",
-      }}
-    >
-      {placements.map((placement) => (
-        <div
-          style={{
-            width: "20%",
-            height: "100px",
-          }}
-        >
-          <Template placement={placement} />
-        </div>
-      ))}
-    </div>
-  );
-};

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

@@ -1,376 +0,0 @@
-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.mdx

@@ -1,112 +0,0 @@
-import { Table } from "../index";
-import { Meta, Canvas } from "@storybook/addon-docs";
-
-<Meta title="ds-react/table/intro" />
-
-# Hvordan ta i bruk Table
-
-Komponenten er fortsatt WIP. Dette vil si at komponenten ikke er tilpasset for eks ikoner, inputelementer og lignende.
-Dette er noe vi har planer om å få på plass etterhvert.
-
-```jsx
-<Table>
-  <Table.Header>
-    <Table.Row>
-      <Table.HeaderCell>ID</Table.HeaderCell>
-      <Table.HeaderCell>Fornavn</Table.HeaderCell>
-      <Table.HeaderCell>Etternavn</Table.HeaderCell>
-      <Table.HeaderCell>Rolle</Table.HeaderCell>
-    </Table.Row>
-  </Table.Header>
-  <Table.Body>
-    <Table.Row>
-      <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>
-      <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>
-      <Table.HeaderCell>3</Table.HeaderCell>
-      <Table.DataCell>Geordi</Table.DataCell>
-      <Table.DataCell>La Forge</Table.DataCell>
-      <Table.DataCell>Sjefsingeniør</Table.DataCell>
-    </Table.Row>
-  </Table.Body>
-</Table>
-```
-
-<Canvas>
-  <Table>
-    <Table.Header>
-      <Table.Row>
-        <Table.HeaderCell>ID</Table.HeaderCell>
-        <Table.HeaderCell>Fornavn</Table.HeaderCell>
-        <Table.HeaderCell>Etternavn</Table.HeaderCell>
-        <Table.HeaderCell>Rolle</Table.HeaderCell>
-      </Table.Row>
-    </Table.Header>
-    <Table.Body>
-      <Table.Row>
-        <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>
-        <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>
-        <Table.HeaderCell>3</Table.HeaderCell>
-        <Table.DataCell>Geordi</Table.DataCell>
-        <Table.DataCell>La Forge</Table.DataCell>
-        <Table.DataCell>Sjefsingeniør</Table.DataCell>
-      </Table.Row>
-    </Table.Body>
-  </Table>
-</Canvas>
-
-## Sizing
-
-Størrelse kan justeres med `size`-proppen. Valg: `medium | small`
-
-<Canvas>
-  <Table size="small">
-    <Table.Header>
-      <Table.Row>
-        <Table.HeaderCell>ID</Table.HeaderCell>
-        <Table.HeaderCell>Fornavn</Table.HeaderCell>
-        <Table.HeaderCell>Etternavn</Table.HeaderCell>
-        <Table.HeaderCell>Rolle</Table.HeaderCell>
-      </Table.Row>
-    </Table.Header>
-    <Table.Body>
-      <Table.Row>
-        <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>
-        <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>
-        <Table.HeaderCell>3</Table.HeaderCell>
-        <Table.DataCell>Geordi</Table.DataCell>
-        <Table.DataCell>La Forge</Table.DataCell>
-        <Table.DataCell>Sjefsingeniør</Table.DataCell>
-      </Table.Row>
-    </Table.Body>
-  </Table>
-</Canvas>

package/src/tag/stories/tag.stories.mdx

@@ -1,56 +0,0 @@
-import { Meta, Canvas } from "@storybook/addon-docs";
-import { Tag } from "../../index";
-
-<Meta title="ds-react/tag/intro" />
-
-# Hvordan ta i bruk Tag
-
-Veldig enkel Tag-komponent som er lik `nav-frontend-etiketter`
-
-```jsx
-<Tag variant="info"> Info tag</Tag>
-```
-
-<Canvas>
-  <Tag variant="info"> Info tag</Tag>
-</Canvas>
-
-## Varianter
-
-```jsx
-<Tag variant="info"> Info tag</Tag>
-<Tag variant="warning"> Warning tag</Tag>
-<Tag variant="success"> Success tag</Tag>
-<Tag variant="error">Error tag</Tag>
-```
-
-<Canvas>
-  <Tag variant="info"> Info tag</Tag>
-  <Tag variant="warning"> Warning tag</Tag>
-  <Tag variant="success"> Success tag</Tag>
-  <Tag variant="error">Error tag</Tag>
-</Canvas>
-
-## Sizing
-
-```jsx
-<Tag variant="info" size="small"> Info tag</Tag>
-<Tag variant="warning" size="small"> Warning tag</Tag>
-<Tag variant="success" size="small"> Success tag</Tag>
-<Tag variant="error" size="small">Error tag</Tag>
-```
-
-<Canvas>
-  <Tag variant="info" size="small">
-    Info tag
-  </Tag>
-  <Tag variant="warning" size="small">
-    Warning tag
-  </Tag>
-  <Tag variant="success" size="small">
-    Success tag
-  </Tag>
-  <Tag variant="error" size="small">
-    Error tag
-  </Tag>
-</Canvas>

package/src/tag/stories/tag.stories.tsx

@@ -1,32 +0,0 @@
-import React from "react";
-import { Tag } from "../index";
-import { Meta } from "@storybook/react/types-6-0";
-export default {
-  title: "ds-react/tag",
-  component: Tag,
-} as Meta;
-
-export const All = () => {
-  return (
-    <div>
-      <h1>Tag</h1>
-      <Tag variant="info"> Info tag</Tag>
-      <Tag variant="warning"> Warning tag</Tag>
-      <Tag variant="success"> Success tag</Tag>
-      <Tag variant="error">Error tag</Tag>
-      <h1>Tag small</h1>
-      <Tag variant="info" size="small">
-        Info tag
-      </Tag>
-      <Tag variant="warning" size="small">
-        Warning tag
-      </Tag>
-      <Tag variant="success" size="small">
-        Success tag
-      </Tag>
-      <Tag variant="error" size="small">
-        Error tag
-      </Tag>
-    </div>
-  );
-};