@navikt/ds-react 0.19.8 → 0.19.11

package/src/link-panel/link-panel.stories.tsx

@@ -0,0 +1,57 @@
+import { Meta } from "@storybook/react/types-6-0";
+import React from "react";
+import { LinkPanel } from "..";
+
+export default {
+  title: "ds-react/LinkPanel",
+  component: LinkPanel,
+  argTypes: {
+    border: {
+      control: {
+        type: "boolean",
+      },
+    },
+  },
+} as Meta;
+
+export const Default = (props: any) => {
+  return (
+    <LinkPanel href="#" border={props?.border}>
+      <LinkPanel.Title>
+        Consectetur eu duis aliqua eu irure fugiat fugiat eu.
+      </LinkPanel.Title>
+      {props.description && (
+        <LinkPanel.Description>
+          Aliqua id aliquip Lorem esse
+        </LinkPanel.Description>
+      )}
+    </LinkPanel>
+  );
+};
+
+Default.args = {
+  description: false,
+};
+
+export const Description = () => {
+  return (
+    <LinkPanel href="#">
+      <LinkPanel.Title>
+        Consectetur eu duis aliqua eu irure fugiat fugiat eu.
+      </LinkPanel.Title>
+      <LinkPanel.Description>
+        Aliqua id aliquip Lorem esse
+      </LinkPanel.Description>
+    </LinkPanel>
+  );
+};
+
+export const NoBorder = () => {
+  return (
+    <LinkPanel href="#" border={false}>
+      <LinkPanel.Title>
+        Consectetur eu duis aliqua eu irure fugiat fugiat eu.
+      </LinkPanel.Title>
+    </LinkPanel>
+  );
+};

package/src/loader/Loader.tsx

@@ -8,7 +8,14 @@ export interface LoaderProps extends SVGProps<SVGSVGElement> {
    * 64px | 40px | 32px | 24px | 20px | 16px
    * @default "medium"
    */
-  size?: "2xlarge" | "xlarge" | "large" | "medium" | "small" | "xsmall";
+  size?:
+    | "3xlarge"
+    | "2xlarge"
+    | "xlarge"
+    | "large"
+    | "medium"
+    | "small"
+    | "xsmall";
   /**
    * Title prop on svg
    * @default "venter..."
@@ -68,7 +75,6 @@ export const Loader = forwardRef<SVGSVGElement, LoaderProps>(
           cy="25"
           r="20"
           fill="none"
-          strokeWidth="5"
         />
         <circle
           className="navds-loader__foreground"
@@ -77,9 +83,7 @@ export const Loader = forwardRef<SVGSVGElement, LoaderProps>(
           r="20"
           stroke={"var(--navds-global-color-gray-400)"}
           fill="none"
-          strokeWidth="5"
           strokeDasharray="50 155"
-          strokeLinecap="round"
         />
       </svg>
     );

package/src/loader/loader.stories.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import { Loader } from "..";
+import { Meta } from "@storybook/react/types-6-0";
+export default {
+  title: "ds-react/Loader",
+  component: Loader,
+  argTypes: {
+    size: {
+      control: {
+        type: "radio",
+        options: [
+          "3xlarge",
+          "2xlarge",
+          "xlarge",
+          "large",
+          "medium",
+          "small",
+          "xsmall",
+        ],
+      },
+    },
+    variant: {
+      control: {
+        type: "radio",
+        options: ["neutral", "interaction", "inverted"],
+      },
+    },
+  },
+} as Meta;
+
+export const Default = (props: any) => {
+  return <Loader {...props} />;
+};
+
+Default.args = {
+  transparent: false,
+};
+
+export const Size = () => (
+  <div>
+    <Loader size="3xlarge" />
+    <Loader size="2xlarge" />
+    <Loader size="xlarge" />
+    <Loader size="large" />
+    <Loader size="medium" />
+    <Loader size="small" />
+    <Loader size="xsmall" />
+  </div>
+);
+
+export const Variant = () => (
+  <div className="colgap">
+    <div>
+      <Loader size="3xlarge" variant="neutral" />
+      <Loader size="3xlarge" variant="inverted" />
+      <Loader size="3xlarge" variant="interaction" />
+    </div>
+    <div style={{ backgroundColor: "#292929" }}>
+      <Loader size="3xlarge" variant="neutral" />
+      <Loader size="3xlarge" variant="inverted" />
+      <Loader size="3xlarge" variant="interaction" />
+    </div>
+  </div>
+);
+
+export const Transparent = () => (
+  <div className="colgap">
+    <div>
+      <Loader size="3xlarge" transparent variant="neutral" />
+      <Loader size="3xlarge" transparent variant="inverted" />
+      <Loader size="3xlarge" transparent variant="interaction" />
+    </div>
+    <div style={{ backgroundColor: "#292929" }}>
+      <Loader size="3xlarge" transparent variant="neutral" />
+      <Loader size="3xlarge" transparent variant="inverted" />
+      <Loader size="3xlarge" transparent variant="interaction" />
+    </div>
+  </div>
+);

package/src/modal/modal.stories.tsx

@@ -1,69 +1,102 @@
-import React, { useState } from "react";
-import { Modal } from "../..";
+import React, { useEffect, useState } from "react";
+import { BodyLong, Button, Heading, Modal } from "../..";
 
 export default {
-  title: "ds-react/modal",
+  title: "ds-react/Modal",
   component: Modal,
+  parameters: {
+    chromatic: { delay: 1000 },
+  },
 };
 
-Modal.setAppElement("#root");
+export const Default = (props) => {
+  const [open, setOpen] = useState(false);
 
-export const All = () => {
-  const [open, setOpen] = useState(true);
-  const [openTwo, setOpenTwo] = useState(false);
-  const [openThree, setOpenThree] = useState(false);
+  useEffect(() => {
+    Modal.setAppElement("#root");
+  }, []);
 
   return (
     <>
-      <button onClick={() => setOpen(true)}>Open modal</button>
+      <Button onClick={() => setOpen(true)}>Open</Button>
       <Modal
         open={open}
         onClose={() => setOpen(false)}
         aria-labelledby="header123"
+        {...props}
       >
         <Modal.Content>
-          <h1 id="header123">Header</h1>
-          <h2>subheader</h2>
-          <p>Cupidatat irure ipsum veniam ad in esse.</p>
-          <p>Cillum tempor pariatur amet ut laborum Lorem enim enim.</p>
+          <Heading spacing id="header123" level="1" size="large">
+            Header
+          </Heading>
+          <Heading spacing level="2" size="medium">
+            Header
+          </Heading>
+          <BodyLong>Voluptate laboris mollit dolore qui. Magna elit.</BodyLong>
         </Modal.Content>
       </Modal>
+    </>
+  );
+};
+
+Default.args = {
+  shouldCloseOnOverlayClick: true,
+  closeButton: true,
+};
 
-      <button onClick={() => setOpenTwo(true)}>
-        Open modal,shouldCloseOnOverlayClick false{" "}
-      </button>
+export const Open = () => {
+  const [open, setOpen] = useState(null);
+
+  useEffect(() => {
+    Modal.setAppElement("#root");
+  }, []);
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Open</Button>
       <Modal
-        shouldCloseOnOverlayClick={false}
-        open={openTwo}
-        onClose={() => setOpenTwo(false)}
+        open={open ?? true}
+        onClose={() => setOpen(false)}
         aria-labelledby="header123"
       >
         <Modal.Content>
-          <h1 id="header123">Header</h1>
-          <h2>subheader</h2>
-          <p>
-            Cupidatat irure ipsum veniam ad in esse. Voluptate do nulla amet
-            laboris ea ex aliquip. Dolore dolore reprehenderit sint esse commodo
-            aliqua cupidatat incididunt proident laborum qui. Officia fugiat non
-            anim cupidatat. Adipisicing ut aliqua cillum nulla elit. Mollit et
-            id duis cupidatat labore magna consectetur et veniam tempor. In
-            minim exercitation id irure velit sit dolor aliquip velit esse.
-            Excepteur sint non minim nulla excepteur labore non magna eu.
-          </p>
+          <Heading spacing id="header123" level="1" size="large">
+            Header
+          </Heading>
+          <Heading spacing level="2" size="medium">
+            Header
+          </Heading>
+          <BodyLong>Voluptate laboris mollit dolore qui. Magna elit.</BodyLong>
         </Modal.Content>
       </Modal>
-      <button onClick={() => setOpenThree(true)}>
-        Open modal without x-button
-      </button>
+    </>
+  );
+};
+
+export const CloseButton = () => {
+  const [open, setOpen] = useState(true);
+
+  useEffect(() => {
+    Modal.setAppElement("#root");
+  }, []);
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Open</Button>
       <Modal
-        open={openThree}
+        open={open}
+        onClose={() => setOpen(false)}
+        aria-labelledby="header123"
         closeButton={false}
-        onClose={() => setOpenThree(false)}
-        aria-label="Min modal"
       >
         <Modal.Content>
-          <p>Cupidatat irure ipsum veniam ad in esse.</p>
-          <p>Cillum tempor pariatur amet ut laborum Lorem enim enim.</p>
+          <Heading spacing id="header123" level="1" size="large">
+            Header
+          </Heading>
+          <Heading spacing level="2" size="medium">
+            Header
+          </Heading>
+          <BodyLong>Voluptate laboris mollit dolore qui. Magna elit.</BodyLong>
         </Modal.Content>
       </Modal>
     </>

package/src/panel/{stories/panel.stories.tsx → panel.stories.tsx}

@@ -2,14 +2,37 @@ import React from "react";
 import { Panel } from "../index";
 import { Meta } from "@storybook/react/types-6-0";
 export default {
-  title: "ds-react/panel",
+  title: "ds-react/Panel",
   component: Panel,
+  argTypes: {
+    border: {
+      defaultValue: true,
+      control: {
+        type: "boolean",
+      },
+    },
+  },
 } as Meta;
 
-export const All = () => {
+export const Default = (props) => {
   return (
-    <div>
-      <h1>Panel</h1>
+    <Panel {...props}>
+      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. Amet anim
+      adipisicing minim ipsum do. Non laborum culpa reprehenderit est sint
+      officia quis excepteur. Fugiat eiusmod eiusmod commodo incididunt nisi
+      minim ex eu cupidatat quis ex. Lorem irure ea ea enim consectetur ea
+      aliqua cupidatat. Officia aute veniam aute exercitation ipsum aliqua
+      adipisicing. Est aliqua ad ullamco aute nostrud amet ea adipisicing
+      consequat id officia irure pariatur. Eu mollit amet culpa culpa velit.
+    </Panel>
+  );
+};
+
+export const Border = () => {
+  return (
+    <div className="colgap">
       <Panel>
         Eu quis exercitation voluptate ex. Aute irure esse occaecat minim
         cupidatat velit minim duis sint culpa anim laboris. Consectetur nulla eu
@@ -21,7 +44,6 @@ export const All = () => {
         adipisicing. Est aliqua ad ullamco aute nostrud amet ea adipisicing
         consequat id officia irure pariatur. Eu mollit amet culpa culpa velit.
       </Panel>
-      <h2>With border</h2>
       <Panel border>
         Eu quis exercitation voluptate ex. Aute irure esse occaecat minim
         cupidatat velit minim duis sint culpa anim laboris. Consectetur nulla eu

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>
+  );
+};