Lerna versionbump [ci skip]

- @navikt/ds-css@0.16.16 - @navikt/ds-tailwind@0.1.9 - @navikt/ds-tokens@0.8.7 - @navikt/ds-react-internal@0.12.21
[fix]
2026-10-16 18:52:02 +00:00 · 2022-04-04 14:37:36 +00:00 · 2022-04-04 16:29:08 +02:00 · 2022-04-04 16:03:55 +02:00 · 2022-04-04 16:02:09 +02:00 · 2022-04-04 15:06:25 +02:00
34 changed files with 1331 additions and 1104 deletions
@@ -0,0 +1 @@
+509e1f2ded31a7d804422d05025454fac5a4c988
@@ -0,0 +1,12 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+
+<Meta title="ds-react(deprecated)/intro" />
+
+# Utdaterte pakker
+
+På sikt vil komponentene under bli flyttet ut av ds-react eller erstattes av andre komponenter
+
+- PageHeader -> @navikt/ds-react-navno
+- MicroCard -> @navikt/ds-react-navno
+
+- StepIndicator -> Horisontal `<Stepper />`
@@ -0,0 +1,10 @@
+.rowgap {
+  display: flex;
+  gap: 1rem;
+}
+
+.colgap {
+  display: flex;
+  gap: 1rem;
+  flex-direction: column;
+}
@@ -10,7 +10,7 @@ module.exports = {
    return config;
  },
  devServer: { stats: "errors-only" },
-  stories: () => getStories(),
+  stories: () => [...getStories(), "./*.stories.mdx"],
  addons: [
    "@storybook/addon-docs",
    "@storybook/addon-a11y",
@@ -1,5 +1,6 @@
 import "@navikt/ds-css/index.css";
 import "@navikt/ds-css-internal/index.css";
+import "./layout.css";
 import { initialize, mswDecorator } from "msw-storybook-addon";

 initialize();
@@ -7,12 +8,14 @@ initialize();
 export const decorators = [mswDecorator];

 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
+  /* actions: { argTypesRegex: "^on[A-Z].*" }, */
  options: {
    storySort: {
      method: "",
-      order: [],
+      order: ["ds-icons", "ds-react", ["Default"]],
      locales: "",
    },
  },
+  viewMode: "docs",
+  layout: "centered",
 };
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "0.16.14",
+  "version": "0.16.16",
  "private": false,
  "description": "Css for NAV Designsystem components",
  "author": "NAV Designsystem team",
@@ -17,14 +17,15 @@
  },
  "main": "./dist/index.css",
  "scripts": {
-    "build": "postcss --use postcss-import -o dist/index.css index.css",
+    "build": "postcss --use postcss-import postcss-combine-duplicated-selectors -o dist/index.css index.css",
    "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^0.8.6",
+    "@navikt/ds-tokens": "^0.8.7",
    "normalize.css": "^8.0.1",
    "postcss": "^8.3.6",
    "postcss-cli": "^8.3.1",
+    "postcss-combine-duplicated-selectors": "10.0.3",
    "postcss-import": "^14.0.2"
  }
 }
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-icons",
-  "version": "0.8.6",
+  "version": "0.8.8",
  "private": false,
  "description": "NAVs egne ikoner i SVG og React format",
  "repository": {
@@ -26,7 +26,7 @@
    "/meta.json"
  ],
  "scripts": {
-    "create-package-json-pointers-to-esm": "node ../../../utilities/scripts/createPackageJsonsWithESMPointers.js",
+    "create-package-json-pointers-to-esm": "node ../../../scripts/createPackageJsonsWithESMPointers.js",
    "create-icons": "svgr --out-dir src svg",
    "clean": "rimraf src cjs esm",
    "build": "yarn clean && copyfiles util/* src && yarn create-icons && tsc && tsc -p tsconfig.esm.json && yarn create-package-json-pointers-to-esm",
@@ -37,7 +37,7 @@
  },
  "peerDependencies": {
    "@types/react": "^17.0.30",
-    "react": "^17.0.0"
+    "react": "^17.0.0 | ^18.0.0"
  },
  "devDependencies": {
    "@svgr/cli": "^5.5.0",
@@ -49,7 +49,7 @@
    "dotenv": "^10.0.0",
    "lodash.kebabcase": "^4.1.1",
    "lodash.startcase": "4.4.0",
-    "react": "^16.8.0 || ^17.0.0",
+    "react": "^18.0.0",
    "rimraf": "3.0.2",
    "sharp": "0.29.1",
    "ts-node": "^10.4.0"
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "0.17.18",
+  "version": "0.17.20",
  "private": false,
  "description": "NAV designsystem react components",
  "author": "NAV Designsystem team",
@@ -27,7 +27,7 @@
    "/src"
  ],
  "scripts": {
-    "create-package-json-pointers-to-esm": "node ../../../utilities/scripts/createPackageJsonsWithESMPointers.js",
+    "create-package-json-pointers-to-esm": "node ../../../scripts/createPackageJsonsWithESMPointers.js",
    "clean": "rimraf cjs esm",
    "build": "yarn run clean && tsc && tsc -p tsconfig.esm.json && yarn create-package-json-pointers-to-esm",
    "watch": "tsc --watch -p tsconfig.esm.json",
@@ -36,7 +36,7 @@
  "dependencies": {
    "@floating-ui/react-dom": "0.6.0",
    "@material-ui/core": "^4.12.3",
-    "@navikt/ds-icons": "^0.8.6",
+    "@navikt/ds-icons": "^0.8.8",
    "@popperjs/core": "^2.10.1",
    "@radix-ui/react-tabs": "0.1.5",
    "@radix-ui/react-toggle-group": "0.1.5",
@@ -48,25 +48,25 @@
    "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"
  }
 }
@@ -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 (
-    <>
-      <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>
+      {[...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 (
+    <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>
+);
@@ -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>
  );
 };
@@ -1,30 +1,29 @@
-import React, { useState } from "react";
+import { Star } from "@navikt/ds-icons";
+import React from "react";
 import { Button } from "./index";
-import { Success } from "@navikt/ds-icons";

 export default {
-  title: "ds-react/button",
+  title: "ds-react/Button",
  component: Button,
  parameters: {
    chromatic: { delay: 300 },
  },
+  argTypes: {
+    variant: {
+      control: {
+        type: "radio",
+        options: ["primary", "secondary", "tertiary", "danger"],
+      },
+    },
+    size: {
+      control: {
+        type: "radio",
+        options: ["medium", "small"],
+      },
+    },
+  },
 };

-const Section = ({ children }) => (
-  <div
-    style={{
-      display: "flex",
-      gap: 16,
-      gridAutoFlow: "column",
-      justifyContent: "start",
-      padding: 24,
-      paddingLeft: 0,
-    }}
-  >
-    {children}
-  </div>
-);
-
 const variants: Array<"primary" | "secondary" | "tertiary" | "danger"> = [
  "primary",
  "secondary",
@@ -39,119 +38,132 @@ const varSwitch = {
  danger: "Danger",
 };

-export const All = () => {
-  const [loadingState, setLoadingState] = useState(true);
-  const [content, setContent] = useState<string>("");
-
-  const toggleLoading = () => {
-    setLoadingState(!loadingState);
-  };
-
+export const Default = (props) => {
  return (
-    <div style={{ paddingLeft: "1rem" }}>
-      <h1>Button</h1>
-      <Section>
-        {variants.map((variant) => (
-          <Button key={variant} variant={variant}>
-            {varSwitch[variant]}
-          </Button>
-        ))}
-      </Section>
-      <h2>disabled</h2>
-      <Section>
-        {variants.map((variant) => (
-          <Button key={variant} variant={variant} disabled>
-            {varSwitch[variant]}
-          </Button>
-        ))}
-      </Section>
-      <h2>As link</h2>
-      <Section>
-        {variants.map((variant) => (
-          <Button as="a" key={variant} variant={variant} href="the-link">
-            {varSwitch[variant]}
-          </Button>
-        ))}
-      </Section>
-      <h2>Small</h2>
-      <Section>
-        {variants.map((variant) => (
-          <Button key={variant} variant={variant} size="small">
-            {varSwitch[variant]}
-          </Button>
-        ))}
-      </Section>
-      <h2>Xsmall</h2>
-      <Section>
-        {variants.map((variant) => (
-          <Button key={variant} variant={variant} size="xsmall">
-            {varSwitch[variant]}
-          </Button>
-        ))}
-      </Section>
-      <h2>Button w/icon</h2>
-      <Section>
-        {variants.map((variant) => (
-          <Button key={variant} variant={variant}>
-            {variant} <Success />
-          </Button>
-        ))}
-      </Section>
-      <Section>
-        {variants.map((variant) => (
-          <Button key={variant} variant={variant}>
-            <span className="navds-sr-only">Success ikon</span>
-            <Success />
-          </Button>
-        ))}
-      </Section>
-      <h2>Small w/icon</h2>
-      <Section>
-        {variants.map((variant) => (
-          <Button key={variant} variant={variant} size="small">
-            <Success /> {variant}
-          </Button>
-        ))}
-      </Section>
-      <Section>
-        {variants.map((variant) => (
-          <Button key={variant} variant={variant} size="small">
-            <span className="navds-sr-only">Success ikon</span>
-            <Success />
-          </Button>
-        ))}
-      </Section>
-      <h2>Button w/loader</h2>
-      <Button onClick={toggleLoading}>Toggle loaders</Button>
-      <Button onClick={() => setContent((content) => `${content} wat`)}>
-        Change content
-      </Button>
-      <Section>
-        {variants.map((variant) => (
-          <Button
-            key={variant}
-            variant={variant}
-            loading={loadingState}
-            onClick={toggleLoading}
-          >
-            {content || varSwitch[variant]}
-          </Button>
-        ))}
-      </Section>
-      <h2>Small w/loader</h2>
-      <Section>
-        {variants.map((variant) => (
-          <Button
-            key={variant}
-            variant={variant}
-            size="small"
-            loading={loadingState}
-            onClick={toggleLoading}
-          >
-            {varSwitch[variant]}
-          </Button>
-        ))}
-      </Section>
-    </div>
+    <Button variant={props.variant} size={props.size} loading={props.loading}>
+      {props.icon ? <Star /> : null}
+      {props.children}
+      {props.icon ? <Star /> : null}
+    </Button>
  );
 };
+
+Default.args = {
+  icon: false,
+  loading: false,
+  children: "Knapp",
+};
+
+export const Small = () => (
+  <div className="rowgap">
+    {variants.map((variant) => (
+      <Button key={variant} variant={variant} size="small">
+        {varSwitch[variant]}
+      </Button>
+    ))}
+  </div>
+);
+
+export const XSmall = () => (
+  <div className="rowgap">
+    {variants.map((variant) => (
+      <Button key={variant} variant={variant} size="xsmall">
+        {varSwitch[variant]}
+      </Button>
+    ))}
+  </div>
+);
+
+export const Loading = () => (
+  <div className="colgap">
+    <div className="rowgap">
+      {variants.map((variant) => (
+        <Button key={variant} variant={variant} loading>
+          {varSwitch[variant]}
+        </Button>
+      ))}
+    </div>
+    <div className="rowgap">
+      {variants.map((variant) => (
+        <Button key={variant} variant={variant} loading size="small">
+          {varSwitch[variant]}
+        </Button>
+      ))}
+    </div>
+    <div className="rowgap">
+      {variants.map((variant) => (
+        <Button key={variant} variant={variant} loading size="xsmall">
+          {varSwitch[variant]}
+        </Button>
+      ))}
+    </div>
+  </div>
+);
+
+export const Icon = () => (
+  <div className="colgap">
+    <div className="rowgap">
+      {variants.map((variant) => (
+        <Button key={variant} variant={variant}>
+          <Star />
+        </Button>
+      ))}
+    </div>
+    <div className="rowgap">
+      {variants.map((variant) => (
+        <Button key={variant} variant={variant} size="small">
+          <Star />
+        </Button>
+      ))}
+    </div>
+    <div className="rowgap">
+      {variants.map((variant) => (
+        <Button key={variant} variant={variant} size="xsmall">
+          <Star />
+        </Button>
+      ))}
+    </div>
+  </div>
+);
+
+export const IconWText = () => (
+  <div className="colgap">
+    <div className="rowgap">
+      {variants.map((variant) => (
+        <Button key={variant} variant={variant}>
+          <Star />
+          {varSwitch[variant]}
+          <Star />
+        </Button>
+      ))}
+    </div>
+    <div className="rowgap">
+      {variants.map((variant) => (
+        <Button key={variant} variant={variant} size="small">
+          <Star />
+          {varSwitch[variant]}
+          <Star />
+        </Button>
+      ))}
+    </div>
+    <div className="rowgap">
+      {variants.map((variant) => (
+        <Button key={variant} variant={variant} size="xsmall">
+          <Star />
+          {varSwitch[variant]}
+          <Star />
+        </Button>
+      ))}
+    </div>
+  </div>
+);
+
+export const Link = () => (
+  <div className="rowgap">
+    {variants.map((variant) => (
+      <Button key={variant} variant={variant} as="a" href="#thecakeisalie">
+        {varSwitch[variant]}
+      </Button>
+    ))}
+  </div>
+);
@@ -1,7 +1,7 @@
 import { Meta, Canvas } from "@storybook/addon-docs";
 import { MicroCard } from "../index.ts";

-<Meta title="ds-react/card/intro" />
+<Meta title="ds-react(deprecated)/card/intro" />

 # Hvordan ta i bruk card

@@ -2,7 +2,7 @@ import React from "react";
 import { MicroCard } from "../index";
 import { Meta } from "@storybook/react/types-6-0";
 export default {
-  title: "ds-react/card",
+  title: "ds-react(deprecated)/card",
  component: MicroCard,
 } as Meta;

@@ -6,11 +6,12 @@ import { Checkbox, CheckboxGroup } from ".";

 const firstArgumentOfFirstCall = (fn: jest.Mock) => fn.mock.calls[0][0];

-test("checkbox group chains onChange calls", () => {
+test("checkbox group chains onChange calls", async () => {
  const onGroupChange = jest.fn();
  const onChange = jest.fn();
  const value = faker.datatype.string();
  const label = faker.datatype.string();
+  const user = userEvent.setup();

  render(
    <CheckboxGroup legend="legend" onChange={onGroupChange}>
@@ -20,7 +21,7 @@ test("checkbox group chains onChange calls", () => {
    </CheckboxGroup>
  );

-  userEvent.click(screen.getByLabelText(label));
+  await user.click(screen.getByLabelText(label));

  expect(onGroupChange).toBeCalledTimes(1);
  expect(onGroupChange).toBeCalledWith([value]);
@@ -36,21 +37,24 @@ describe("Checkbox handles controlled-state correctly", () => {
    </CheckboxGroup>
  );

-  test("Checkbox is still checked after click when controlled", () => {
+  test("Checkbox is still checked after click when controlled", async () => {
+    const user = userEvent.setup();
    render(<CheckboxComponent value={["value1", "value2"]} />);
-    userEvent.click(screen.getByLabelText("label1"));
-    userEvent.click(screen.getByLabelText("label2"));
+    await user.click(screen.getByLabelText("label1"));
+    await user.click(screen.getByLabelText("label2"));

    expect((screen.getByLabelText("label1") as HTMLInputElement).checked).toBe(
      true
    );
+
    expect((screen.getByLabelText("label2") as HTMLInputElement).checked).toBe(
      true
    );
  });

-  test("onChange called with expected values", () => {
+  test("onChange called with expected values", async () => {
    const onGroupChange = jest.fn();
+    const user = userEvent.setup();

    render(
      <CheckboxComponent
@@ -59,11 +63,11 @@ describe("Checkbox handles controlled-state correctly", () => {
      />
    );

-    userEvent.click(screen.getByLabelText("label1"));
+    await user.click(screen.getByLabelText("label1"));

    expect(onGroupChange).lastCalledWith(["value2"]);

-    userEvent.click(screen.getByLabelText("label2"));
+    await user.click(screen.getByLabelText("label2"));

    expect(onGroupChange).lastCalledWith(["value1"]);
  });
@@ -31,7 +31,9 @@ describe("Controlled RadioGroup", () => {
 });

 describe("Uncontrolled RadioGroup", () => {
-  test("handles state correctly", () => {
+  test("handles state correctly", async () => {
+    const user = userEvent.setup();
+
    render(<Group />);

    const input1 = screen.getByLabelText(label1) as HTMLInputElement;
@@ -40,13 +42,14 @@ describe("Uncontrolled RadioGroup", () => {
    expect(input1.checked).toBe(false);
    expect(input2.checked).toBe(false);

-    userEvent.click(screen.getByLabelText(label2));
+    await user.click(screen.getByLabelText(label2));

    expect(input1.checked).toBe(false);
    expect(input2.checked).toBe(true);
  });

-  test("handles defaultValue correctly", () => {
+  test("handles defaultValue correctly", async () => {
+    const user = userEvent.setup();
    render(<Group defaultValue={value1} />);

    const input1 = screen.getByLabelText(label1) as HTMLInputElement;
@@ -55,7 +58,7 @@ describe("Uncontrolled RadioGroup", () => {
    expect(input1.checked).toBe(true);
    expect(input2.checked).toBe(false);

-    userEvent.click(screen.getByLabelText(label2));
+    await user.click(screen.getByLabelText(label2));

    expect(input1.checked).toBe(false);
    expect(input2.checked).toBe(true);
@@ -2,7 +2,7 @@ import { Meta, Canvas } from "@storybook/addon-docs";
 import { PageHeader } from "../index";
 import { illustrationPictogram } from "./pictogram";

-<Meta title="ds-react/page-header/intro" />
+<Meta title="ds-react(deprecated)/page-header/intro" />

 # Hvordan ta i bruk PageHeader

@@ -3,7 +3,7 @@ import { PageHeader } from "../index";
 import { Meta } from "@storybook/react/types-6-0";
 import { illustrationPictogram } from "./pictogram";
 export default {
-  title: "ds-react/page-header",
+  title: "ds-react(deprecated)/page-header",
  component: PageHeader,
 } as Meta;

@@ -2,7 +2,7 @@ import { Meta, Canvas } from "@storybook/addon-docs";
 import { StepIndicator } from "..";
 import { Example } from "./Example";

-<Meta title="ds-react/step-indicator/intro" />
+<Meta title="ds-react(deprecated)/step-indicator/intro" />

 # Hvordan ta i bruk StepIndicator

@@ -4,7 +4,7 @@ import { Meta } from "@storybook/react/types-6-0";
 import { Link, HashRouter as Router, useLocation } from "react-router-dom";

 export default {
-  title: "ds-react/step-indicator",
+  title: "ds-react(deprecated)/step-indicator",
  component: StepIndicator,
 } as Meta;

@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tailwind",
-  "version": "0.1.8",
+  "version": "0.1.9",
  "private": false,
  "description": "Auto-generated tailwind config based on @navikt/ds-tokens",
  "author": "NAV Designsystem team",
@@ -23,7 +23,7 @@
    "directory": "@navikt/core/tailwind"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^0.8.6",
+    "@navikt/ds-tokens": "^0.8.7",
    "@types/jest": "^27.0.1",
    "jest": "^27.2.0",
    "lodash": "^4.17.21",
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "0.8.6",
+  "version": "0.8.7",
  "private": false,
  "description": "Auto-generated design-tokens for NAV design-systems framework",
  "author": "NAV Designsystem team",
@@ -0,0 +1,42 @@
+import React from "react";
+import { Meta } from "@storybook/react/types-6-0";
+import * as tokens from "../dist/tokens.js";
+
+export default {
+  title: "ds-tokens/Border-radius",
+} as Meta;
+
+export const BorderRadius = () => {
+  const allRadius: { [key: string]: string } = Object.entries(tokens).reduce(
+    (old, [key, val]) =>
+      key.startsWith("NavdsBorderRadius") ? { ...old, [key]: val } : { ...old },
+    {}
+  );
+
+  const sortObject = Object.fromEntries(
+    Object.entries(allRadius).sort(
+      (a, b) => Number(a[1].replace("px", "")) - Number(b[1].replace("px", ""))
+    )
+  );
+
+  return (
+    <div className="colgap">
+      {Object.entries(sortObject).map(([key, val]) => (
+        <div
+          key={key}
+          style={{
+            width: 600,
+            height: 40,
+            backgroundColor: "thistle",
+            borderRadius: val,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          {key}
+        </div>
+      ))}
+    </div>
+  );
+};
@@ -0,0 +1,45 @@
+import React from "react";
+import { Meta } from "@storybook/react/types-6-0";
+import * as tokens from "../dist/tokens.js";
+
+export default {
+  title: "ds-tokens/Colors",
+} as Meta;
+
+export const Global = () => {
+  const globalColors: { [key: string]: string } = Object.entries(tokens).reduce(
+    (old, [key, val]) =>
+      key.includes("GlobalColor") ? { ...old, [key]: val } : { ...old },
+    {}
+  );
+
+  return (
+    <div className="colgap">
+      {Object.entries(globalColors).map(([key, val]) => (
+        <div key={key}>
+          <span>{key}</span>
+          <div style={{ background: val, width: 600, height: 40 }} />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export const Semantic = () => {
+  const globalColors: { [key: string]: string } = Object.entries(tokens).reduce(
+    (old, [key, val]) =>
+      key.includes("SemanticColor") ? { ...old, [key]: val } : { ...old },
+    {}
+  );
+
+  return (
+    <div className="colgap">
+      {Object.entries(globalColors).map(([key, val]) => (
+        <div key={key}>
+          <span>{key}</span>
+          <div style={{ background: val, width: 600, height: 40 }} />
+        </div>
+      ))}
+    </div>
+  );
+};
@@ -0,0 +1,35 @@
+import React from "react";
+import { Meta } from "@storybook/react/types-6-0";
+import * as tokens from "../dist/tokens.js";
+
+export default {
+  title: "ds-tokens/Shadows",
+} as Meta;
+
+export const Shadows = () => {
+  const allShadows: { [key: string]: string } = Object.entries(tokens).reduce(
+    (old, [key, val]) =>
+      key.startsWith("NavdsShadow") ? { ...old, [key]: val } : { ...old },
+    {}
+  );
+
+  return (
+    <div className="colgap" style={{ gap: "4rem" }}>
+      {Object.entries(allShadows).map(([key, val]) => (
+        <div
+          key={key}
+          style={{
+            height: 40,
+            width: 600,
+            boxShadow: val,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          {key}
+        </div>
+      ))}
+    </div>
+  );
+};
@@ -0,0 +1,43 @@
+import React from "react";
+import { Meta } from "@storybook/react/types-6-0";
+import * as tokens from "../dist/tokens.js";
+
+export default {
+  title: "ds-tokens/Spacing",
+} as Meta;
+
+export const Spacing = () => {
+  const allSpacing: { [key: string]: string } = Object.entries(tokens).reduce(
+    (old, [key, val]) =>
+      key.startsWith("NavdsSpacing") ? { ...old, [key]: val } : { ...old },
+    {}
+  );
+
+  const sortObject = Object.fromEntries(
+    Object.entries(allSpacing).sort(
+      (a, b) =>
+        Number(a[0].replace("NavdsSpacing", "")) -
+        Number(b[0].replace("NavdsSpacing", ""))
+    )
+  );
+
+  return (
+    <div className="colgap">
+      {Object.entries(sortObject).map(([key, val]) => (
+        <div>
+          {key}
+          <div
+            key={key}
+            style={{
+              width: val,
+              height: 40,
+              backgroundColor: "thistle",
+              display: "flex",
+              alignItems: "center",
+            }}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};
@@ -1,6 +1,8 @@
 {
  "compilerOptions": {
+    "jsx": "react",
    "esModuleInterop": true,
    "resolveJsonModule": true
-  }
+  },
+  "include": ["./stories"]
 }
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css-internal",
-  "version": "0.7.2",
+  "version": "0.7.3",
  "private": false,
  "description": "Css for NAV internal Designsystem components",
  "author": "NAV Designsystem team",
@@ -17,12 +17,13 @@
  },
  "main": "./dist/index.css",
  "scripts": {
-    "build": "postcss --use postcss-import -o dist/index.css index.css",
+    "build": "postcss --use postcss-import postcss-combine-duplicated-selectors -o dist/index.css index.css",
    "watch": "yarn build --watch"
  },
  "devDependencies": {
    "postcss": "^8.3.8",
    "postcss-cli": "^9.0.0",
+    "postcss-combine-duplicated-selectors": "10.0.3",
    "postcss-import": "^14.0.2"
  }
 }
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react-internal",
-  "version": "0.12.18",
+  "version": "0.12.21",
  "private": false,
  "description": "NAV internal designsystem react components",
  "author": "NAV Designsystem team",
@@ -27,14 +27,14 @@
    "/src"
  ],
  "scripts": {
-    "create-package-json-pointers-to-esm": "node ../../../utilities/scripts/createPackageJsonsWithESMPointers.js",
+    "create-package-json-pointers-to-esm": "node ../../../scripts/createPackageJsonsWithESMPointers.js",
    "clean": "rimraf cjs esm",
    "build": "yarn run clean && tsc && tsc -p tsconfig.esm.json && yarn create-package-json-pointers-to-esm",
    "watch": "tsc --watch -p tsconfig.esm.json"
  },
  "dependencies": {
-    "@navikt/ds-icons": "^0.8.6",
-    "@navikt/ds-react": "^0.17.18",
+    "@navikt/ds-icons": "^0.8.8",
+    "@navikt/ds-react": "^0.17.20",
    "@popperjs/core": "^2.10.1",
    "classnames": "^2.3.1",
    "copy-to-clipboard": "^3.3.1",
@@ -45,6 +45,6 @@
  },
  "peerDependencies": {
    "@types/react": "^17.0.30",
-    "react": "^17.0.0"
+    "react": "^17.0.0 | ^18.0.0"
  }
 }
@@ -16,7 +16,7 @@ export interface CopyToClipboardProps extends Omit<ButtonProps, "children"> {
   */
  copyText: string;
  /**
-   * Description of text, examples: "personnummer", "navn", "epost" etc.
+   * Description of text. Example: "Kopierte personnummer til clipboard"
   */
  popoverText: string;
  /**
@@ -24,6 +24,11 @@ export interface CopyToClipboardProps extends Omit<ButtonProps, "children"> {
   * @default "right"
   */
  popoverPlacement?: Placement;
+  /**
+   * Copy button title attribute
+   * @default `Kopier ${copyText}`
+   */
+  title?: string;
 }

 const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
@@ -35,6 +40,7 @@ const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
      className,
      size = "medium",
      popoverPlacement = "right",
+      title,
      ...rest
    },
    ref
@@ -53,8 +59,6 @@ const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
      };
    }, [openPopover]);

-    const title = `Kopier ${copyText}`;
-
    const handleClick = () => {
      copy(copyText);
      setOpenPopover(true);
@@ -65,14 +69,12 @@ const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
        <Button
          ref={mergedRef}
          variant="secondary"
-          title={title}
          className={cl("navdsi-copy-to-clipboard", className)}
          onClick={handleClick}
          size={size}
          {...rest}
        >
-          <Copy title="Fil ikon for kopiering" />
-          {children ? children : <span className="navds-sr-only">{title}</span>}
+          <Copy title={title ?? `Kopier ${copyText}`} />
        </Button>
        <Popover
          role="alert"
@@ -23,12 +23,12 @@
 Repoet inneholder følgende:

 - [Felleskomponenter](https://github.com/navikt/nav-frontend-moduler/tree/master/@navikt/)
- [Storybook](https://5f801fb2aea7820022de2936-rognyzqcpw.chromatic.com/) for komponenter.
+- [Storybook](https://master--5f801fb2aea7820022de2936.chromatic.com/) for komponenter.
 - [Gammel dokumentasjon](https://old-design-nav.vercel.app) for komponenter.

 ## Dokumentasjon

-[Dokumentasjon side forvaltes i dette repoet](https://github.com/navikt/verktoykassen)
+[Dokumentasjon side forvaltes i dette repoet](https://github.com/navikt/aksel-website)

 ## Endringslogg

@@ -18,7 +18,7 @@
    "lint": "yarn lint:jsts && yarn lint:css",
    "lint:jsts": "yarn eslint .",
    "lint:css": "yarn stylelint --syntax css @navikt/**/*.css",
-    "clean:lib": "node utilities/scripts/clean.js"
+    "clean:lib": "node scripts/clean.js"
  },
  "workspaces": [
    "@navikt/core/*",
@@ -60,11 +60,11 @@
    "extend": "^3.0.2",
    "gh-pages": "^3.1.0",
    "glob": "^7.1.6",
-    "fast-glob": "^3.2.7",
-    "fs-extra": "^10.0.0",
+    "fast-glob": "^3.2.11",
+    "fs-extra": "^10.0.1",
    "husky": "^5.0.0",
    "lerna": "^4.0.0",
-    "pretty-quick": "^3.1.0",
+    "pretty-quick": "^3.1.3",
    "style-loader": "^1.2.1",
    "yarn": "^1.22.10"
  },
@@ -96,14 +96,14 @@
    "eslint-plugin-react-hooks": "^4.1.2",
    "prettier": "2.2.1",
    "prop-types": "^15.5.10",
-    "react": "^17.0.0",
+    "react": "^18.0.0",
    "stylelint": "^13.13.1",
    "stylelint-config-standard": "^22.0.0",
    "stylelint-config-prettier": "^8.0.2",
    "typescript": "^4.3.5",
    "webpack": "^5.4.0",
    "webpack-cli": "^4.2.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.0.0",
    "msw": "^0.36.5",
    "msw-storybook-addon": "^1.6.0"
  }
Author	SHA1	Message	Date
github-actions[bot]	2a468378dd	Lerna versionbump [ci skip] - @navikt/ds-css@0.16.16 - @navikt/ds-tailwind@0.1.9 - @navikt/ds-tokens@0.8.7 - @navikt/ds-react-internal@0.12.21	2022-04-04 14:37:36 +00:00
Ken	626b9069d2	[fix] riktig aksel-repo link	2022-04-04 16:29:08 +02:00
KenandAndreas Nordahl	49c5e8f284	Tokens stories (#1484 ) * tokens stories * Update @navikt/core/tokens/stories/spacing.stories.tsx Co-authored-by: Andreas Nordahl <andnorda@gmail.com> Co-authored-by: Andreas Nordahl <andnorda@gmail.com>	2022-04-04 16:03:55 +02:00
Andreas Nordahl	0d549cb87b	[fix] overridable title for copy-to-clipboard (#1485 )	2022-04-04 16:02:09 +02:00
Ken	c0ef8a4d7d	Permalenke til chromatic build	2022-04-04 15:06:25 +02:00
github-actions[bot]	3daa36efa7	Lerna versionbump [ci skip] - @navikt/ds-icons@0.8.8 - @navikt/ds-react@0.17.20 - @navikt/ds-react-internal@0.12.20	2022-04-04 13:05:20 +00:00
Ken	16bec93d1f	[FIX] storybook-lenke	2022-04-04 14:56:10 +02:00
Ken	ad033d9b1a	Flyttet noen komponenter under (deprecated) (#1483 )	2022-04-04 14:30:46 +02:00
Ken	b55ead2301	button stories (#1481 )	2022-04-04 14:29:20 +02:00
Ken	92532dd586	[FIX] React v18 upgrade (#1482 )	2022-04-04 14:25:38 +02:00
Ken	5d3361615a	Alert stories (#1478 )	2022-04-01 22:41:49 +02:00
Ken	7779d93bf3	Storybook + Accordion-story rydding (#1477 )	2022-04-01 14:13:13 +02:00
github-actions[bot]	31bd40c02c	Lerna versionbump [ci skip] - @navikt/ds-css@0.16.15 - @navikt/ds-icons@0.8.7 - @navikt/ds-react@0.17.19 - @navikt/ds-css-internal@0.7.3 - @navikt/ds-react-internal@0.12.19	2022-04-01 11:48:01 +00:00
Ken	52eda50e3c	[FIX] Script for å gjøre :root mer lesbar (#1476 )	2022-04-01 13:37:51 +02:00
larseirikhansen	e9e5084214	Patch updates (#1474 ) * patch-update pretty-quick, fast-glob, fs-extra * publish and share .git-blame-ignore-revs-file	2022-04-01 11:14:56 +02:00