@navikt/ds-react 0.19.9 → 0.19.10

package/src/popover/popover.stories.tsx

@@ -0,0 +1,126 @@
+import React, { useState } from "react";
+import { Popover } from "../index";
+import { placements } from "@popperjs/core";
+import { Button } from "../button";
+
+export default {
+  title: "ds-react/Popover",
+  component: Popover,
+  parameters: {
+    chromatic: { disable: true },
+  },
+  argTypes: {
+    open: {
+      control: {
+        type: "boolean",
+      },
+    },
+    arrow: {
+      control: {
+        type: "boolean",
+      },
+    },
+    offset: {
+      control: {
+        type: "number",
+      },
+    },
+    strategy: {
+      defaultValue: "fixed",
+      control: {
+        type: "radio",
+        options: ["fixed", "absolute"],
+      },
+    },
+    placement: {
+      defaultValue: "bottom",
+      control: {
+        type: "radio",
+        options: [
+          "bottom",
+          "right",
+          "left",
+          "top-start",
+          "top-end",
+          "bottom-start",
+          "bottom-end",
+          "right-start",
+          "right-end",
+          "left-start",
+          "left-end",
+          "auto",
+          "auto-start",
+          "auto-end",
+        ],
+      },
+    },
+  },
+};
+
+export const Default = (props: any) => {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [open, setOpen] = useState<boolean>(false);
+  return (
+    <>
+      <Button ref={(el) => setAnchorEl(el)} onClick={() => setOpen((x) => !x)}>
+        Open
+      </Button>
+      <Popover
+        {...props}
+        open={props.open ?? open}
+        anchorEl={anchorEl}
+        onClose={() => setOpen(false)}
+      >
+        <Popover.Content>
+          Velit in consequat Lorem sunt ut deserunt nostrud enim enim sint
+          cillum ad veniam.
+        </Popover.Content>
+      </Popover>
+    </>
+  );
+};
+
+const Template = (props) => {
+  const [anchorEl, setAnchorEl] = useState(null);
+
+  return (
+    <>
+      <Button ref={(el) => setAnchorEl(el)}>X</Button>
+      <Popover {...props} open anchorEl={anchorEl}>
+        <Popover.Content>
+          Velit in consequat Lorem
+          <br />
+          sunt Pariatur ullamco ullamco
+        </Popover.Content>
+      </Popover>
+    </>
+  );
+};
+
+export const Placement = () => {
+  return (
+    <div className="colgap" style={{ gap: "12rem" }}>
+      {placements.map((placement) => (
+        <Template key={placement} placement={placement} />
+      ))}
+    </div>
+  );
+};
+
+export const Arrow = () => {
+  return (
+    <div className="colgap" style={{ gap: "12rem" }}>
+      <Template arrow />
+      <Template arrow={false} />
+    </div>
+  );
+};
+
+export const Offset = () => {
+  return (
+    <div className="colgap" style={{ gap: "12rem" }}>
+      <Template arrow offset={30} />
+      <Template arrow={false} offset={30} />
+    </div>
+  );
+};

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

@@ -5,7 +5,7 @@ import { Table } from "../index";
 import { Loader, Pagination, SortState } from "../..";
 
 export default {
-  title: "ds-react/table",
+  title: "ds-react/Table",
   component: Table,
   parameters: {
     chromatic: { delay: 500 },

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

@@ -3,76 +3,73 @@ import { Table } from "..";
 import { Link } from "../..";
 
 export default {
-  title: "ds-react/table",
+  title: "ds-react/Table",
   component: Table,
 };
 
 export const Expandable = () => {
-  const [open, setOpen] = useState(false);
-
   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((data) => (
-            <Table.ExpandableRow
-              expansionDisabled={data.animal === "Sel"}
-              content={data.content}
-              key={data.name}
-              togglePlacement="right"
-            >
-              {columns.map(({ key }) => (
-                <Table.DataCell key={key}>{data[key]}</Table.DataCell>
-              ))}
-            </Table.ExpandableRow>
+    <Table zebraStripes>
+      <Table.Header>
+        <Table.Row>
+          {columns.map(({ key, name }) => (
+            <Table.HeaderCell key={key}>{name}</Table.HeaderCell>
           ))}
-        </Table.Body>
-      </Table>
-      <h2>defaultOpen/controlled + small</h2>
-      <Table size="small">
-        <Table.Header>
-          <Table.Row>
-            <Table.HeaderCell />
-            {columns.map(({ key, name }) => (
-              <Table.HeaderCell key={key}>{name}</Table.HeaderCell>
+          <Table.HeaderCell />
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {data.map((data) => (
+          <Table.ExpandableRow
+            expansionDisabled={data.animal === "Sel"}
+            content={data.content}
+            key={data.name}
+            togglePlacement="right"
+          >
+            {columns.map(({ key }) => (
+              <Table.DataCell key={key}>{data[key]}</Table.DataCell>
             ))}
-          </Table.Row>
-        </Table.Header>
-        <Table.Body>
-          {data.slice(0, 1).map((data) => (
-            <Table.ExpandableRow
-              content={data.content}
-              key={data.name}
-              defaultOpen
-            >
-              {columns.map(({ key }) => (
-                <Table.DataCell key={key}>{data[key]}</Table.DataCell>
-              ))}
-            </Table.ExpandableRow>
-          ))}
-          {data.slice(1, 2).map((data) => (
-            <Table.ExpandableRow
-              content={data.content}
-              key={data.name}
-              open={open}
-              onOpenChange={(open) => setOpen(open)}
-            >
-              {columns.map(({ key }) => (
-                <Table.DataCell key={key}>{data[key]}</Table.DataCell>
-              ))}
-            </Table.ExpandableRow>
+          </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.Body>
-      </Table>
-    </>
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {data.slice(0, 1).map((data) => (
+          <Table.ExpandableRow content={data.content} key={data.name}>
+            {columns.map(({ key }) => (
+              <Table.DataCell key={key}>{data[key]}</Table.DataCell>
+            ))}
+          </Table.ExpandableRow>
+        ))}
+        {data.slice(1, 2).map((data) => (
+          <Table.ExpandableRow
+            content={data.content}
+            key={data.name}
+            open={open}
+            onOpenChange={(open) => setOpen(open)}
+          >
+            {columns.map(({ key }) => (
+              <Table.DataCell key={key}>{data[key]}</Table.DataCell>
+            ))}
+          </Table.ExpandableRow>
+        ))}
+      </Table.Body>
+    </Table>
   );
 };
 
@@ -200,3 +197,33 @@ const data = [
     ),
   },
 ];
+
+export const ExpandableOpen = () => {
+  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((data) => (
+          <Table.ExpandableRow
+            expansionDisabled={data.animal === "Sel"}
+            content={data.content}
+            key={data.name}
+            togglePlacement="right"
+            defaultOpen
+          >
+            {columns.map(({ key }) => (
+              <Table.DataCell key={key}>{data[key]}</Table.DataCell>
+            ))}
+          </Table.ExpandableRow>
+        ))}
+      </Table.Body>
+    </Table>
+  );
+};

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

@@ -3,85 +3,82 @@ import { Table } from "../";
 import { Alert, Button, Checkbox, Link } from "../..";
 
 export default {
-  title: "ds-react/table",
+  title: "ds-react/Table",
   component: Table,
 };
 
-export const All = () => {
-  const TableComponent = (props) => (
-    <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>
-          <Table.HeaderCell>Rolle</Table.HeaderCell>
-        </Table.Row>
-      </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>
-          <Table.DataCell>Sjefsingeniør</Table.DataCell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  );
+const TableComponent = (props) => (
+  <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>
+        <Table.HeaderCell>Rolle</Table.HeaderCell>
+      </Table.Row>
+    </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>
+        <Table.DataCell>Sjefsingeniør</Table.DataCell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
+);
+
+export const Default = () => <TableComponent />;
+export const Zebra = () => <TableComponent zebraStripes />;
+export const Small = () => <TableComponent size="small" />;
+export const Buttons = () => <TableComponent size="small" button />;
+
+export const WithDivs = () => {
   return (
     <>
-      <h1>Table</h1>
-      <TableComponent />
-      <h2>Zebra</h2>
-      <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> "}
         -markup er det svært viktig at man supplerer elementene med{" "}
@@ -147,15 +144,8 @@ export const All = () => {
   );
 };
 
-export const Selection = () => (
-  <>
-    <h1>Selection</h1>
-    <h2>Medium</h2>
-    <SelectionTable />
-    <h2>Small</h2>
-    <SelectionTable size="small" />
-  </>
-);
+export const Selection = () => <SelectionTable />;
+export const SelectionSmall = () => <SelectionTable size="small" />;
 
 const SelectionTable = ({ size = "medium" }: { size?: "small" | "medium" }) => {
   const useToggleList = (initialState) => {

package/src/tag/tag.stories.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { Tag } from ".";
+
+export default {
+  title: "ds-react/Tag",
+  component: Tag,
+  argTypes: {
+    variant: {
+      defaultValue: "info",
+      control: {
+        type: "radio",
+        options: ["error", "warning", "info", "success"],
+      },
+    },
+  },
+};
+
+const variants: Array<"error" | "warning" | "info" | "success"> = [
+  "error",
+  "warning",
+  "info",
+  "success",
+];
+
+export const Default = (props) => (
+  <Tag variant={props.variant} size={props.size}>
+    {props.children}
+  </Tag>
+);
+
+Default.args = {
+  children: "Id elit esse",
+};
+
+export const Small = () => {
+  return (
+    <div className="rowgap">
+      {variants.map((variant, i) => (
+        <Tag key={variant} variant={variant} size="small">
+          {new Array(i + 1).fill("Id elit esse")}
+        </Tag>
+      ))}
+    </div>
+  );
+};

package/src/typography/heading.stories.tsx

@@ -0,0 +1,75 @@
+import { Meta } from "@storybook/react";
+import React from "react";
+import { Heading } from "..";
+
+export default {
+  title: "ds-react/Typography/Heading",
+  component: Heading,
+  argTypes: {
+    size: {
+      defaultValue: "large",
+      control: {
+        type: "radio",
+        options: ["xlarge", "large", "medium", "small", "xsmall"],
+      },
+    },
+    level: {
+      defaultValue: "1",
+      control: {
+        type: "radio",
+        options: ["1", "2", "3", "4", "5", "6"],
+      },
+    },
+  },
+} as Meta;
+
+const lorem = "Veniam consequat cillum";
+
+export const Default = (props) => <Heading {...props}>{lorem}</Heading>;
+
+Default.args = {
+  spacing: false,
+};
+
+export const Sizes = () => (
+  <div className="colgap">
+    <Heading level="1" size="xlarge">
+      {lorem}
+    </Heading>
+    <Heading level="2" size="large">
+      {lorem}
+    </Heading>
+    <Heading level="3" size="medium">
+      {lorem}
+    </Heading>
+    <Heading level="4" size="small">
+      {lorem}
+    </Heading>
+    <Heading level="5" size="xsmall">
+      {lorem}
+    </Heading>
+  </div>
+);
+
+export const Spacing = () => (
+  <div>
+    <Heading level="1" size="xlarge" spacing>
+      {lorem}
+    </Heading>
+    <Heading level="2" size="large" spacing>
+      {lorem}
+    </Heading>
+    <Heading level="3" size="medium" spacing>
+      {lorem}
+    </Heading>
+    <Heading level="4" size="small" spacing>
+      {lorem}
+    </Heading>
+    <Heading level="5" size="xsmall" spacing>
+      {lorem}
+    </Heading>
+    <Heading level="5" size="xsmall">
+      {lorem}
+    </Heading>
+  </div>
+);