@navikt/ds-react 0.17.19 → 0.17.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.17.19",
+  "version": "0.17.22",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -36,7 +36,7 @@
   "dependencies": {
     "@floating-ui/react-dom": "0.6.0",
     "@material-ui/core": "^4.12.3",
-    "@navikt/ds-icons": "^0.8.7",
+    "@navikt/ds-icons": "^0.8.10",
     "@popperjs/core": "^2.10.1",
     "@radix-ui/react-tabs": "0.1.5",
     "@radix-ui/react-toggle-group": "0.1.5",
@@ -48,26 +48,26 @@
     "uuid": "^8.3.2"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.1.0",
-    "@testing-library/user-event": "^13.2.1",
-    "@types/faker": "^5.5.8",
+    "@testing-library/jest-dom": "^5.16.0",
+    "@testing-library/react": "^13.0.0",
+    "@testing-library/user-event": "^14.0.0",
+    "@types/faker": "5.5.8",
     "@types/jest": "^27.0.1",
     "@types/react-collapse": "^5.0.1",
     "@types/react-modal": "^3.13.1",
     "@types/styled-components": "^5.1.14",
     "copyfiles": "^2.4.1",
-    "faker": "^5.5.3",
-    "jest": "^27.2.0",
-    "react-router-dom": "^6.1.0",
+    "faker": "5.5.3",
+    "jest": "^27.5.0",
+    "react-router-dom": "^6.3.0",
     "rimraf": "3.0.2",
     "styled-components": "^5.3.1",
     "swr": "^1.1.2",
-    "ts-jest": "^27.0.5"
+    "ts-jest": "^27.1.0"
   },
   "peerDependencies": {
     "@types/react": "^17.0.30",
-    "react": "^17.0.0"
+    "react": "^17.0.0 || ^18.0.0"
   },
-  "gitHead": "31bd40c02cde72ad9aeea011a2005ba8660718cc"
+  "gitHead": "c6c721a469948d436d2811652492da23862efdcd"
 }

package/src/accordion/accordion.stories.tsx

@@ -5,7 +5,7 @@ import AccordionItem from "./AccordionItem";
 import { Accordion } from ".";
 
 export default {
-  title: "ds-react/accordion",
+  title: "ds-react/Accordion",
   component: Accordion,
   subcomponents: {
     AccordionItem,
@@ -14,77 +14,89 @@ export default {
   },
 };
 
-export const All = () => {
+const Content = () => (
+  <Accordion.Content>
+    Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam officia
+    laboris voluptate officia pariatur.Lorem est ex anim velit occaecat nisi qui
+    nostrud sit consectetur consectetur officia nostrud ullamco. Est ex duis
+    proident nostrud elit qui laborum anim minim eu eiusmod. Veniam in nostrud
+    sunt tempor velit incididunt sint ex dolor qui velit id eu. Deserunt magna
+    sunt velit in. Est exercitation id cillum qui do. Minim adipisicing nostrud
+    commodo proident occaecat aliquip nulla anim proident reprehenderit. Magna
+    ipsum officia veniam cupidatat duis veniam dolore reprehenderit mollit
+    velit.Ut consequat commodo minim occaecat id pariatur. Nisi enim tempor
+    laborum commodo. Tempor sit quis nostrud eu cupidatat sunt commodo
+    reprehenderit irure deserunt eiusmod ipsum. Exercitation quis commodo cillum
+    eiusmod eiusmod. Do laborum qui proident commodo adipisicing eiusmod id.
+  </Accordion.Content>
+);
+
+export const Default = (props) => {
+  const [open, setOpen] = useState(false);
+
+  const Item = () =>
+    props.controlled ? (
+      <Accordion.Item
+        open={open}
+        renderContentWhenClosed={props.renderContentWhenClosed}
+      >
+        <Accordion.Header onClick={() => setOpen(!open)}>
+          Accordion header text
+        </Accordion.Header>
+        <Content />
+      </Accordion.Item>
+    ) : (
+      <Accordion.Item renderContentWhenClosed={props.renderContentWhenClosed}>
+        <Accordion.Header>Accordion header text</Accordion.Header>
+        <Content />
+      </Accordion.Item>
+    );
+  return (
+    <Accordion>
+      {[...Array(props.nItems ? props.nItems : 2)].map((_, y) => (
+        <Item key={y} />
+      ))}
+    </Accordion>
+  );
+};
+
+Default.args = {
+  controlled: false,
+  renderContentWhenClosed: false,
+  nItems: 2,
+};
+
+export const Controlled = () => {
   const [open, setOpen] = useState(false);
+  const [open2, setOpen2] = useState(false);
 
   return (
-    <>
-      <h1>Accordion</h1>
-      <h2>Controlled</h2>
-      <Accordion>
-        <Accordion.Item open={open}>
-          <Accordion.Header onClick={() => setOpen(!open)}>
-            Accordion header text
-          </Accordion.Header>
-          <Accordion.Content>
-            Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
-            officia laboris voluptate officia pariatur.Lorem est ex anim velit
-            occaecat nisi qui nostrud sit consectetur consectetur officia
-            nostrud ullamco. Est ex duis proident nostrud elit qui laborum anim
-            minim eu eiusmod. Veniam in nostrud sunt tempor velit incididunt
-            sint ex dolor qui velit id eu. Deserunt magna sunt velit in. Est
-            exercitation id cillum qui do. Minim adipisicing nostrud commodo
-            proident occaecat aliquip nulla anim proident reprehenderit. Magna
-            ipsum officia veniam cupidatat duis veniam dolore reprehenderit
-            mollit velit.Ut consequat commodo minim occaecat id pariatur. Nisi
-            enim tempor laborum commodo. Tempor sit quis nostrud eu cupidatat
-            sunt commodo reprehenderit irure deserunt eiusmod ipsum.
-            Exercitation quis commodo cillum eiusmod eiusmod. Do laborum qui
-            proident commodo adipisicing eiusmod id.
-          </Accordion.Content>
-        </Accordion.Item>
-      </Accordion>
-      <h2>Un-controlled</h2>
-      <Accordion>
-        <Accordion.Item>
-          <Accordion.Header>Accordion header text</Accordion.Header>
-          <Accordion.Content>
-            Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
-            officia laboris voluptate officia pariatur.Lorem est ex anim velit
-            occaecat nisi qui nostrud sit consectetur consectetur officia
-            nostrud ullamco. Est ex duis proident nostrud elit qui laborum anim
-            minim eu eiusmod. Veniam in nostrud sunt tempor velit incididunt
-            sint ex dolor qui velit id eu. Deserunt magna sunt velit in. Est
-            exercitation id cillum qui do. Minim adipisicing nostrud commodo
-            proident occaecat aliquip nulla anim proident reprehenderit. Magna
-            ipsum officia veniam cupidatat duis veniam dolore reprehenderit
-            mollit velit.Ut consequat commodo minim occaecat id pariatur. Nisi
-            enim tempor laborum commodo. Tempor sit quis nostrud eu cupidatat
-            sunt commodo reprehenderit irure deserunt eiusmod ipsum.
-            Exercitation quis commodo cillum eiusmod eiusmod. Do laborum qui
-            proident commodo adipisicing eiusmod id.
-          </Accordion.Content>
-        </Accordion.Item>
-        <Accordion.Item>
-          <Accordion.Header>Accordion header text</Accordion.Header>
-          <Accordion.Content>
-            Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
-            officia laboris voluptate officia pariatur.Lorem est ex anim velit
-            occaecat nisi qui nostrud sit consectetur consectetur officia
-            nostrud ullamco. Est ex duis proident nostrud elit qui laborum anim
-            minim eu eiusmod. Veniam in nostrud sunt tempor velit incididunt
-            sint ex dolor qui velit id eu. Deserunt magna sunt velit in. Est
-            exercitation id cillum qui do. Minim adipisicing nostrud commodo
-            proident occaecat aliquip nulla anim proident reprehenderit. Magna
-            ipsum officia veniam cupidatat duis veniam dolore reprehenderit
-            mollit velit.Ut consequat commodo minim occaecat id pariatur. Nisi
-            enim tempor laborum commodo. Tempor sit quis nostrud eu cupidatat
-            sunt commodo reprehenderit irure deserunt eiusmod ipsum.
-            Exercitation quis commodo cillum eiusmod eiusmod. Do laborum qui
-            proident commodo adipisicing eiusmod id.
-          </Accordion.Content>
-        </Accordion.Item>
-      </Accordion>
-    </>
+    <Accordion>
+      <Accordion.Item open={open}>
+        <Accordion.Header onClick={() => setOpen(!open)}>
+          Accordion header text
+        </Accordion.Header>
+        <Content />
+      </Accordion.Item>
+      <Accordion.Item open={open2}>
+        <Accordion.Header onClick={() => setOpen2(!open2)}>
+          Accordion header text
+        </Accordion.Header>
+        <Content />
+      </Accordion.Item>
+    </Accordion>
   );
 };
+
+export const Uncontrolled = () => (
+  <Accordion>
+    <Accordion.Item>
+      <Accordion.Header>Accordion header text</Accordion.Header>
+      <Content />
+    </Accordion.Item>
+    <Accordion.Item>
+      <Accordion.Header>Accordion header text</Accordion.Header>
+      <Content />
+    </Accordion.Item>
+  </Accordion>
+);

package/src/alert/alert.stories.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { Alert } from ".";
-import { BodyLong, Heading } from "..";
+import { BodyLong, Heading as DsHeading } from "..";
 
 export default {
-  title: "ds-react/alert",
+  title: "ds-react/Alert",
   component: Alert,
 };
 
@@ -14,111 +14,101 @@ const variants: Array<"error" | "warning" | "info" | "success"> = [
   "success",
 ];
 
-export const All = () => {
+export const Default = (props) => (
+  <Alert
+    variant={props.variant}
+    size={props.size}
+    fullWidth={props.fullWidth}
+    inline={props.inline}
+  >
+    {props.children}
+  </Alert>
+);
+
+Default.args = {
+  variant: "info",
+  children: "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
+};
+
+export const Small = () => {
   return (
-    <>
-      <h1>Alert</h1>
+    <div className="colgap">
       {variants.map((variant, i) => (
-        <Alert key={variant} variant={variant}>
+        <Alert key={variant} variant={variant} size="small">
           {new Array(i + 1).fill(
             "Id elit esse enim reprehenderit enim nisi veniam nostrud."
           )}
         </Alert>
       ))}
-      <h2>Small</h2>
-      <div>
-        {variants.map((variant, i) => (
-          <Alert key={variant} variant={variant} size="small">
-            {new Array(i + 1).fill(
-              "Id elit esse enim reprehenderit enim nisi veniam nostrud."
-            )}
-          </Alert>
-        ))}
-      </div>
-      <h2>Alert fullWidth</h2>
+    </div>
+  );
+};
+
+export const FullWidth = () => {
+  return (
+    <div className="colgap">
       {variants.map((variant, i) => (
-        <Alert fullWidth key={variant} variant={variant}>
+        <Alert key={variant} variant={variant} fullWidth>
           {new Array(i + 1).fill(
             "Id elit esse enim reprehenderit enim nisi veniam nostrud."
           )}
         </Alert>
       ))}
-      <h2>Small</h2>
-      <div>
-        {variants.map((variant, i) => (
-          <Alert fullWidth key={variant} variant={variant} size="small">
-            {new Array(i + 1).fill(
-              "Id elit esse enim reprehenderit enim nisi veniam nostrud."
-            )}
-          </Alert>
-        ))}
-      </div>
-      <h2>Inline</h2>
-      <div>
-        {variants.map((variant, i) => (
-          <Alert inline key={variant} variant={variant}>
-            {new Array(i + 1).fill(
-              "Id elit esse enim reprehenderit enim nisi veniam nostrud."
-            )}
-          </Alert>
-        ))}
-      </div>
-      <h2>Inline small</h2>
-      <div>
-        {variants.map((variant, i) => (
-          <Alert inline key={variant} variant={variant} size="small">
-            {new Array(i + 1).fill(
-              "Id elit esse enim reprehenderit enim nisi veniam nostrud."
-            )}
-          </Alert>
-        ))}
-      </div>
-      <h2>Med Heading</h2>
-      <div>
-        {variants.map((variant, i) => (
-          <Alert key={variant} variant={variant}>
-            <Heading spacing size="small" level="3">
-              Aliquip duis est in commodo pariatur
-            </Heading>
-            <BodyLong spacing>
-              Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
-              laboris ex. Labore ex occaecat proident qui qui fugiat magna.
-              Fugiat sint commodo consequat eu aute.
-            </BodyLong>
-            <Heading level="4" size="xsmall" spacing>
-              Ullamco eiusmod Lorem eiusmod eu.
-            </Heading>
-            <BodyLong>
-              Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
-              laboris ex. Labore ex occaecat proident qui qui fugiat magna.
-              Fugiat sint commodo consequat eu aute.
-            </BodyLong>
-          </Alert>
-        ))}
-      </div>
-      <h2>Med Heading small</h2>
-      <div>
-        {variants.map((variant, i) => (
-          <Alert key={variant} variant={variant} size="small">
-            <Heading spacing size="small" level="3">
-              Aliquip duis est in commodo pariatur
-            </Heading>
-            <BodyLong spacing>
-              Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
-              laboris ex. Labore ex occaecat proident qui qui fugiat magna.
-              Fugiat sint commodo consequat eu aute.
-            </BodyLong>
-            <Heading level="4" size="xsmall" spacing>
-              Ullamco eiusmod Lorem eiusmod eu.
-            </Heading>
-            <BodyLong>
-              Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
-              laboris ex. Labore ex occaecat proident qui qui fugiat magna.
-              Fugiat sint commodo consequat eu aute.
-            </BodyLong>
-          </Alert>
-        ))}
-      </div>
-    </>
+      {variants.map((variant, i) => (
+        <Alert key={variant} variant={variant} fullWidth size="small">
+          {new Array(i + 1).fill(
+            "Id elit esse enim reprehenderit enim nisi veniam nostrud."
+          )}
+        </Alert>
+      ))}
+    </div>
+  );
+};
+
+export const Inline = () => {
+  return (
+    <div className="colgap">
+      {variants.map((variant, i) => (
+        <Alert key={variant} variant={variant} inline>
+          {new Array(i + 1).fill(
+            "Id elit esse enim reprehenderit enim nisi veniam nostrud."
+          )}
+        </Alert>
+      ))}
+      {variants.map((variant, i) => (
+        <Alert key={variant} variant={variant} inline size="small">
+          {new Array(i + 1).fill(
+            "Id elit esse enim reprehenderit enim nisi veniam nostrud."
+          )}
+        </Alert>
+      ))}
+    </div>
+  );
+};
+
+export const Heading = () => {
+  return (
+    <div className="colgap">
+      <Alert variant="info">
+        <DsHeading spacing size="small" level="3">
+          Aliquip duis est in commodo pariatur
+        </DsHeading>
+        <BodyLong>
+          Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
+          laboris ex. Labore ex occaecat proident qui qui fugiat magna. Fugiat
+          sint commodo consequat eu aute.
+        </BodyLong>
+      </Alert>
+      <Alert variant="info" size="small">
+        <DsHeading spacing size="xsmall" level="3">
+          Aliquip duis est in commodo pariatur
+        </DsHeading>
+        <BodyLong>
+          Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
+          laboris ex. Labore ex occaecat proident qui qui fugiat magna. Fugiat
+          sint commodo consequat eu aute.
+        </BodyLong>
+      </Alert>
+    </div>
   );
 };