Lerna versionbump [ci skip]

- @navikt/ds-css@0.15.1
 - @navikt/ds-react@0.16.1
 - @navikt/ds-tailwind@0.1.2
 - @navikt/ds-react-internal@0.11.1

@navikt/core/css/accordion-menu.css

@@ -1,105 +0,0 @@
-:root {
-  --navds-accordion-menu-color-text: var(--navds-semantic-color-link);
-  --navds-accordion-menu-color-text-focus: var(--navds-semantic-color-text);
-  --navds-accordion-menu-color-background-hover: var(
-    --navds-global-color-blue-50
-  );
-  --navds-accordion-menu-color-text-active: var(--navds-semantic-color-text);
-  --navds-accordion-menu-outline-focus: var(--navds-semantic-color-focus);
-}
-
-.navds-accordion-menu__list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  font-weight: var(--navds-font-weight-bold);
-}
-
-.navds-accordion-menu-collapsable__button {
-  cursor: pointer;
-  background-color: transparent;
-  border: none;
-  font: inherit;
-  text-align: inherit;
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-weight: var(--navds-font-weight-bold);
-  color: var(--navds-accordion-menu-color-text);
-  text-decoration: underline;
-}
-
-.navds-accordion-menu-item,
-.navds-accordion-menu-collapsable__button {
-  display: flex;
-  padding: var(--navds-spacing-3) var(--navds-spacing-4);
-  text-decoration: none;
-}
-
-.navds-accordion-menu-collapsable__expand-icon {
-  font-size: 1.5rem;
-  color: var(--navds-accordion-menu-color);
-  flex-shrink: 0;
-  margin-left: var(--navds-spacing-2);
-}
-
-.navds-accordion-menu-collapsable--open
-  > .navds-accordion-menu-collapsable__button
-  > .navds-accordion-menu-collapsable__expand-icon {
-  transform: rotate(180deg);
-}
-
-.navds-accordion-menu-collapsable .navds-accordion-menu-item,
-.navds-accordion-menu-collapsable
-  .navds-accordion-menu-collapsable
-  .navds-accordion-menu-collapsable__button {
-  padding-left: var(--navds-spacing-8);
-}
-
-.navds-accordion-menu-collapsable
-  .navds-accordion-menu-collapsable
-  .navds-accordion-menu-item,
-.navds-accordion-menu-collapsable
-  .navds-accordion-menu-collapsable
-  .navds-accordion-menu-collapsable
-  .navds-accordion-menu-collapsable__button {
-  padding-left: var(--navds-spacing-12);
-}
-
-.navds-accordion-menu-collapsable
-  .navds-accordion-menu-collapsable
-  .navds-accordion-menu-collapsable
-  .navds-accordion-menu-item,
-.navds-accordion-menu-collapsable
-  .navds-accordion-menu-collapsable
-  .navds-accordion-menu-collapsable
-  .navds-accordion-menu-collapsable
-  .navds-accordion-menu-collapsable__button {
-  padding-left: var(--navds-spacing-16);
-}
-
-.navds-accordion-menu-item:focus,
-.navds-accordion-menu-collapsable__button:focus {
-  outline: 3px solid var(--navds-accordion-menu-outline-focus);
-  outline-offset: -3px;
-  color: var(--navds-accordion-menu-color-text-focus);
-}
-
-.navds-accordion-menu-collapsable__button:focus
-  > .navds-accordion-menu-collapsable__expand-icon {
-  color: var(--navds-accordion-menu-color-focus);
-}
-
-.navds-accordion-menu-item:hover,
-.navds-accordion-menu-collapsable__button:hover {
-  background-color: var(--navds-accordion-menu-color-background-hover);
-}
-
-.navds-accordion-menu-item--active {
-  box-shadow: inset 0.5rem 0 var(--navds-semantic-color-link);
-  color: var(--navds-accordion-menu-color-text-active);
-  text-decoration: none;
-}

@navikt/core/css/accordion.css

@@ -4,11 +4,16 @@
     ---navds-semantic-color-component-background-light
   );
   --navds-accordion-color-text-hover: var(--navds-semantic-color-link);
+  --navds-accordion-color-border: var(--navds-semantic-color-border-muted);
   --navds-accordion-color-border-hover: var(
     --navds-semantic-color-interaction-primary
   );
-  --navds-accordion-color-border-focus: var(
-    ---navds-semantic-color-component-background-light
+  --navds-accordion-color-text-open: var(--navds-semantic-color-text);
+  --navds-accordion-color-text-open-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-accordion-color-background-open: var(
+    --navds-semantic-color-interaction-primary-hover-subtle
   );
 }
 
@@ -20,16 +25,53 @@
   background: var(--navds-accordion-color-background);
 }
 
+.navds-accordion__header {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--navds-spacing-4);
+  padding: var(--navds-spacing-4) var(--navds-spacing-3);
+  margin: 0;
+  text-align: left;
+  background: transparent;
+  cursor: pointer;
+  border: none;
+  border-bottom: 2px solid var(--navds-accordion-color-border);
+}
+
 .navds-accordion__header:focus {
   outline: none;
   box-shadow: var(--navds-shadow-focus);
-  border-color: var(--navds-accordion-color-border-focus);
 }
 
 .navds-accordion__header:hover {
   color: var(--navds-accordion-color-text-hover);
   border-color: var(--navds-accordion-color-border-hover);
-  text-decoration: underline;
+}
+
+.navds-accordion__item--open > .navds-accordion__header {
+  background-color: var(--navds-accordion-color-background-open);
+  color: var(--navds-accordion-color-text-open);
+  border-color: transparent;
+}
+
+.navds-accordion__item--open > .navds-accordion__header:hover {
+  border-color: transparent;
+  color: var(--navds-accordion-color-text-open-hover);
+}
+
+.navds-accordion__content {
+  color: var(--navds-accordion-color-text);
+  padding: var(--navds-spacing-5) var(--navds-spacing-3) var(--navds-spacing-10);
+  border-bottom: 2px solid var(--navds-accordion-color-border);
+}
+
+.navds-accordion__item--open
+  > .navds-accordion__header:hover
+  + *
+  .navds-accordion__content {
+  border-color: var(--navds-accordion-color-border-hover);
 }
 
 .navds-accordion__expand-icon {
@@ -42,26 +84,6 @@
   transform: rotateZ(180deg);
 }
 
-.navds-accordion__header {
-  padding: var(--navds-spacing-4) var(--navds-spacing-3);
-  background: transparent;
-  text-align: left;
-  border: none;
-  width: 100%;
-  margin: 0;
-  cursor: pointer;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 2px solid #a0a0a0;
-  gap: var(--navds-spacing-4);
-}
-
-.navds-accordion__content {
-  color: var(--navds-accordion-color-text);
-  padding: var(--navds-spacing-5) var(--navds-spacing-3) var(--navds-spacing-10);
-}
-
 .navds-accordion__expand-icon--filled {
   display: none;
 }

@navikt/core/css/form/radio-checkbox.css

@@ -1,6 +1,6 @@
 :root {
   --navds-radio-checkbox-color-background: var(
-    --navds-semantic-color-canvas-background-light
+    --navds-semantic-color-component-background-light
   );
   --navds-radio-checkbox-color-background-hover: var(
     --navds-semantic-color-interaction-primary-hover-subtle
@@ -107,6 +107,29 @@
     var(--navds-shadow-focus);
 }
 
+.navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
+  box-shadow: none;
+  background-color: var(--navds-radio-checkbox-color-background-checked);
+}
+
+.navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  transform: translate(0.375rem, -50%);
+  background-color: var(--navds-radio-checkbox-color-background);
+  width: 0.75rem;
+  height: 0.25rem;
+  border-radius: 1px;
+  flex-shrink: 0;
+}
+
+.navds-checkbox--small
+  .navds-checkbox__input:indeterminate
+  + .navds-checkbox__label::after {
+  transform: translate(0.25rem, -50%);
+}
+
 .navds-checkbox__input:checked + .navds-checkbox__label::before {
   background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
   background-position: 6px center;
@@ -121,7 +144,7 @@
   + .navds-checkbox__label::before {
   background-position: 4px center;
 }
-
+.navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
 .navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
   box-shadow: inset 0 0 0 1px white, var(--navds-shadow-focus);
 }
@@ -142,28 +165,28 @@
   color: var(--navds-radio-checkbox-color-label-hover);
 }
 
-.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:focus)
+.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
   + .navds-checkbox__label::before,
-.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus)
+.navds-radio__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
   + .navds-radio__label::before {
   box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-hover);
   background-color: var(--navds-radio-checkbox-color-background-hover);
 }
 
 .navds-checkbox--error
-  > .navds-checkbox__input:not(:hover):not(:disabled):not(:checked)
+  > .navds-checkbox__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
   + .navds-checkbox__label::before,
 .navds-radio--error
-  > .navds-radio__input:not(:hover):not(:disabled):not(:checked)
+  > .navds-radio__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
   + .navds-radio__label::before {
   box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-error);
 }
 
 .navds-checkbox--error
-  > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked)
+  > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
   + .navds-checkbox__label::before,
 .navds-radio--error
-  > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked)
+  > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
   + .navds-radio__label::before {
   box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-error),
     var(--navds-shadow-focus);

@navikt/core/css/form/switch.css

@@ -210,7 +210,7 @@
   appearance: none;
 }
 
-.navds-switch--disabled {
+.navds-switch--disabled:not(.navds-switch--loading) {
   opacity: 0.3;
 }
 

@navikt/core/css/index.css

@@ -3,7 +3,6 @@
 @import "grid.css";
 
 @import "accordion.css";
-@import "accordion-menu.css";
 @import "alert.css";
 @import "button.css";
 @import "content-container.css";
@@ -12,6 +11,7 @@
 @import "help-text.css";
 @import "link.css";
 @import "loader.css";
+@import "menu.css";
 @import "modal.css";
 @import "popover.css";
 @import "tag.css";

@navikt/core/css/menu.css

@@ -0,0 +1,102 @@
+:root {
+  --navds-menu-color-text: var(--navds-semantic-color-link);
+  --navds-menu-color-text-hover: var(--navds-semantic-color-text);
+  --navds-menu-color-text-focus: var(--navds-semantic-color-text);
+  --navds-menu-color-background-hover: var(--navds-global-color-blue-50);
+  --navds-menu-color-text-active: var(--navds-semantic-color-text);
+  --navds-menu-outline-focus: var(--navds-semantic-color-focus);
+}
+
+.navds-menu__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  padding: 0 0.5rem;
+}
+
+.navds-menu__list--inner {
+  padding: 0;
+}
+
+.navds-menu-collapse__button {
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+  font: inherit;
+  text-align: inherit;
+  margin: 0;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: var(--navds-font-weight-bold);
+  color: var(--navds-menu-color-text);
+}
+
+.navds-menu-item,
+.navds-menu-collapse__button {
+  font-weight: var(--navds-font-weight-bold);
+  display: flex;
+  padding: var(--navds-spacing-3) var(--navds-spacing-2);
+  text-decoration: none;
+}
+
+.navds-menu-item:focus,
+.navds-menu-collapse__button:focus {
+  outline: 3px solid var(--navds-menu-outline-focus);
+  outline-offset: -3px;
+  color: var(--navds-menu-color-text-focus);
+}
+
+.navds-menu-collapse__button:focus > .navds-menu-collapse__expand-icon {
+  color: var(--navds-menu-color-focus);
+}
+
+.navds-menu-item:hover,
+.navds-menu-collapse__button:hover {
+  background-color: var(--navds-menu-color-background-hover);
+  color: var(--navds-menu-color-text-hover);
+}
+
+.navds-menu-item--active {
+  box-shadow: -0.5rem 0 var(--navds-semantic-color-link);
+  color: var(--navds-menu-color-text-active);
+  text-decoration: none;
+}
+
+/* Collapse icon */
+.navds-menu-collapse__expand-icon {
+  font-size: 1.5rem;
+  flex-shrink: 0;
+  margin-left: var(--navds-spacing-2);
+}
+
+.navds-menu-collapse__expand-icon--filled,
+.navds-menu-collapse__button:hover > .navds-menu-collapse__expand-icon {
+  display: none;
+}
+
+.navds-menu-collapse__button:hover > .navds-menu-collapse__expand-icon--filled {
+  display: block;
+}
+
+.navds-menu-collapse--open
+  > .navds-menu-collapse__button
+  > .navds-menu-collapse__expand-icon {
+  transform: rotate(180deg);
+}
+
+/* Nesting levels */
+.navds-menu__list[data-depth="1"] .navds-menu-collapse__button,
+.navds-menu__list[data-depth="1"] .navds-menu-item {
+  padding-left: var(--navds-spacing-6);
+}
+
+.navds-menu__list[data-depth="2"] .navds-menu-collapse__button,
+.navds-menu__list[data-depth="2"] .navds-menu-item {
+  padding-left: var(--navds-spacing-10);
+}
+
+.navds-menu__list[data-depth="3"] .navds-menu-collapse__button,
+.navds-menu__list[data-depth="3"] .navds-menu-item {
+  padding-left: var(--navds-spacing-14);
+}

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.12.12",
+  "version": "0.15.1",
   "private": false,
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",
@@ -21,7 +21,7 @@
     "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^0.7.1",
+    "@navikt/ds-tokens": "^0.8.1",
     "normalize.css": "^8.0.1",
     "postcss": "^8.3.6",
     "postcss-cli": "^8.3.1",

@navikt/core/css/typography.css

@@ -4,34 +4,47 @@
   margin: 0;
 }
 
-.navds-heading--2xlarge {
+.navds-heading--xlarge {
   font-size: var(--navds-font-size-heading-2xlarge);
   letter-spacing: -0.01em;
   line-height: var(--navds-font-line-height-heading-2xlarge);
 }
 
-.navds-heading--2xlarge.navds-typo--spacing {
+.navds-heading--xlarge.navds-typo--spacing {
   margin-bottom: var(--navds-spacing-5);
 }
 
-.navds-heading--xlarge {
+.navds-heading--large {
   font-size: var(--navds-font-size-heading-xlarge);
   letter-spacing: -0.008em;
   line-height: var(--navds-font-line-height-heading-xlarge);
 }
 
-.navds-heading--xlarge.navds-typo--spacing {
+.navds-heading--large.navds-typo--spacing {
   margin-bottom: var(--navds-spacing-4);
 }
 
-.navds-heading--large {
-  font-size: var(--navds-font-size-heading-large);
-  letter-spacing: -0.004em;
-  line-height: var(--navds-font-line-height-heading-large);
-}
+/* Mobile scale */
+@media (max-width: 480px) {
+  .navds-heading--xlarge {
+    font-size: var(--navds-font-size-heading-xlarge);
+    letter-spacing: -0.008em;
+    line-height: var(--navds-font-line-height-heading-xlarge);
+  }
 
-.navds-heading--large.navds-typo--spacing {
-  margin-bottom: var(--navds-spacing-3);
+  .navds-heading--xlarge.navds-typo--spacing {
+    margin-bottom: var(--navds-spacing-4);
+  }
+
+  .navds-heading--large {
+    font-size: var(--navds-font-size-heading-large);
+    letter-spacing: -0.004em;
+    line-height: var(--navds-font-line-height-heading-large);
+  }
+
+  .navds-heading--large.navds-typo--spacing {
+    margin-bottom: var(--navds-spacing-3);
+  }
 }
 
 .navds-heading--medium {

@navikt/core/icons/figma/api.ts

@@ -22,9 +22,10 @@ export const getPublishedIcons = async () => {
       throw e;
     });
 
-  return data?.meta?.components?.filter(
-    (component: any) => component?.containing_frame?.pageName !== "🔆Pictogram"
-  );
+  return data?.meta?.components?.filter((component: any) => {
+    const page = component?.containing_frame?.pageName;
+    return page !== "🔆Pictogram" && page !== "🧩Placeholder";
+  });
 };
 
 /**

@navikt/core/icons/icons.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { storiesOf } from "@storybook/react";
 import isChromatic from "chromatic/isChromatic";
 
-import * as Icons from "../src";
+import * as Icons from "./src";
 export default {
   title: "ds-icons/Ikoner",
   argTypes: {

@navikt/core/icons/meta.json

@@ -857,6 +857,18 @@
     "created_at": "2021-01-11T13:37:55.491Z",
     "pageName": "File"
   },
+  {
+    "name": "FileError",
+    "description": "",
+    "created_at": "2022-01-27T12:48:37.583Z",
+    "pageName": "File"
+  },
+  {
+    "name": "FileErrorFilled",
+    "description": "",
+    "created_at": "2022-01-27T12:48:37.605Z",
+    "pageName": "File"
+  },
   {
     "name": "FileFilled",
     "description": "",
@@ -875,6 +887,30 @@
     "created_at": "2021-04-26T09:24:37.951Z",
     "pageName": "File"
   },
+  {
+    "name": "FileProgressFilled",
+    "description": "",
+    "created_at": "2022-01-27T12:48:37.592Z",
+    "pageName": "File"
+  },
+  {
+    "name": "Files",
+    "description": "",
+    "created_at": "2022-01-27T12:48:37.567Z",
+    "pageName": "File"
+  },
+  {
+    "name": "FileSuccess",
+    "description": "",
+    "created_at": "2022-01-27T12:48:37.575Z",
+    "pageName": "File"
+  },
+  {
+    "name": "FileSuccessFilled",
+    "description": "",
+    "created_at": "2022-01-27T12:48:37.598Z",
+    "pageName": "File"
+  },
   {
     "name": "FillForms",
     "description": "",
@@ -900,15 +936,15 @@
     "pageName": "Interface"
   },
   {
-    "name": "FilterFilled",
+    "name": "Filter2Filled",
     "description": "",
-    "created_at": "2021-01-11T13:37:55.605Z",
+    "created_at": "2022-01-14T09:16:08.197Z",
     "pageName": "Interface"
   },
   {
-    "name": "FilterFilled2",
+    "name": "FilterFilled",
     "description": "",
-    "created_at": "2022-01-14T09:16:08.197Z",
+    "created_at": "2021-01-11T13:37:55.605Z",
     "pageName": "Interface"
   },
   {

@navikt/core/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-icons",
-  "version": "0.7.3",
+  "version": "0.8.1",
   "private": false,
   "description": "NAVs egne ikoner i SVG og React format",
   "repository": {

@navikt/core/icons/stories/icons.stories.mdx

@@ -1,23 +0,0 @@
-import { Meta } from "@storybook/addon-docs";
-
-<Meta title="ds-icons/Kom i gang" />
-
-# Ta i bruk ikonpakken `@navikt/ds-icons`
-
-Alle ikoner kan bli funnet her https://design.nav.no/designsystem/resources/icons
-
-## Oppsett
-
-```bash
-yarn add @navikt/ds-icons
-```
-
-```jsx
-Import { Expand } from `@navikt/ds-icons`;
-
-<Expand
-	title="Åpne meny"
-/>
-```
-
-Note: Det kan være tilfeller der oppsettet ditt ikke har støtte for SVG, og det må da legges til manuelt i eks en webpack config basert på hva som blir brukt.

@navikt/core/icons/svg/FileError.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.4142 0H2V22H12V20H4V2H12V7H17V14H19V4.58579L14.4142 0ZM16.5858 5L14 2.41421V5H16.5858ZM18 17.5858L21.2929 14.2929L22.7071 15.7071L19.4142 19L22.7071 22.2929L21.2929 23.7071L18 20.4142L14.7071 23.7071L13.2929 22.2929L16.5858 19L13.2929 15.7071L14.7071 14.2929L18 17.5858Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/FileErrorFilled.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 0V22H11.5L14.5 19L11 15.5L14.5 12L18 15.5L19 14.5V4.5L14.5 0H2ZM13.5 5V2L16.5 5H13.5ZM13.2929 22.2929L16.5858 19L13.2929 15.7071L14.7071 14.2929L18 17.5858L21.2929 14.2929L22.7071 15.7071L19.4142 19L22.7071 22.2929L21.2929 23.7071L18 20.4142L14.7071 23.7071L13.2929 22.2929Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/FileProgressFilled.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 22V0H14.5L19 4.5V11H17.3135C11.6605 11 8.31543 17.3293 11.5 22H2ZM13.5 2V5H16.5L13.5 2ZM20.2122 20.7723C18.8453 22.1391 16.6293 22.1391 15.2624 20.7723C13.8956 19.4054 13.8956 17.1893 15.2624 15.8225C16.6293 14.4557 18.8453 14.4557 20.2122 15.8225L20.3897 16H19V18H24.0406V13L22.0406 13V14.8225L21.6264 14.4083C19.4785 12.2604 15.9961 12.2604 13.8482 14.4083C11.7003 16.5562 11.7003 20.0386 13.8482 22.1865C15.9961 24.3344 19.4785 24.3344 21.6264 22.1865L20.2122 20.7723Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/FileSuccess.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 1V6H18" stroke="#262626" stroke-width="2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.4142 0H2V22H11V20H4V2H13.5858L17 5.41421V16H19V4.58579L14.4142 0ZM22.2689 14.3177L16.0317 21.0004L13.7593 18.3492L12.2407 19.6508L15.9683 23.9996L23.7311 15.6823L22.2689 14.3177Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/FileSuccessFilled.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 0V22H12L10 19.5L14 16L16 18L19 15V4.5L14.5 0H2ZM13.5 5V2L16.5 5H13.5ZM22.2689 14.3177L16.0317 21.0004L13.7593 18.3492L12.2407 19.6508L15.9683 23.9996L23.7311 15.6823L22.2689 14.3177Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/Files.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.4142 0H2V22H11V20H4V2H12V7H17V11H19V4.58579L14.4142 0ZM16.5858 5L14 2.41421V5H16.5858ZM20.2122 20.7723C18.8453 22.1391 16.6293 22.1391 15.2624 20.7723C13.8956 19.4054 13.8956 17.1893 15.2624 15.8225C16.6293 14.4557 18.8453 14.4557 20.2122 15.8225L20.3897 16H19V18H24.0406V13L22.0406 13V14.8225L21.6264 14.4083C19.4785 12.2604 15.9961 12.2604 13.8482 14.4083C11.7003 16.5562 11.7003 20.0386 13.8482 22.1865C15.9961 24.3344 19.4785 24.3344 21.6264 22.1865L20.2122 20.7723Z" fill="#262626"/>
+</svg>

@navikt/core/icons/tsconfig.json

@@ -4,5 +4,5 @@
     "outDir": "./cjs",
     "module": "commonjs"
   },
-  "exclude": ["./figma", "./scripts", "**/stories"]
+  "exclude": ["./figma", "./scripts", "**/*.stories.*"]
 }

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.14.13",
+  "version": "0.16.1",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@material-ui/core": "^4.12.3",
-    "@navikt/ds-icons": "^0.7.3",
+    "@navikt/ds-icons": "^0.8.1",
     "@popperjs/core": "^2.10.1",
     "classnames": "^2.2.6",
     "react-collapse": "^5.1.0",

@navikt/core/react/src/accordion-menu/AccordionMenu.tsx

@@ -1,39 +0,0 @@
-import React, { forwardRef } from "react";
-import cl from "classnames";
-import MenuItems from "./MenuItems";
-import Collapsable, {
-  AccordionMenuCollapsableType,
-} from "./AccordionMenuCollapsable";
-import Item, { AccordionMenuItemType } from "./AccordionMenuItem";
-
-export interface AccordionMenuProps extends React.HTMLAttributes<HTMLElement> {
-  children: React.ReactNode;
-}
-
-interface AccordionMenuComponent
-  extends React.ForwardRefExoticComponent<
-    AccordionMenuProps & React.RefAttributes<HTMLElement>
-  > {
-  Collapsable: AccordionMenuCollapsableType;
-  Item: AccordionMenuItemType;
-}
-
-const AccordionMenu = forwardRef<HTMLElement, AccordionMenuProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
-      <nav
-        role="navigation"
-        ref={ref}
-        className={cl("navds-accordion-menu", className)}
-        {...rest}
-      >
-        <MenuItems>{children}</MenuItems>
-      </nav>
-    );
-  }
-) as AccordionMenuComponent;
-
-AccordionMenu.Collapsable = Collapsable;
-AccordionMenu.Item = Item;
-
-export default AccordionMenu;

@navikt/core/react/src/accordion-menu/AccordionMenuCollapsable.tsx

@@ -1,45 +0,0 @@
-import React, { forwardRef, HTMLAttributes, useState } from "react";
-import cl from "classnames";
-import { Expand } from "@navikt/ds-icons";
-import MenuItems from "./MenuItems";
-
-export interface AccordionMenuCollapsableProps
-  extends HTMLAttributes<HTMLDivElement> {
-  title: string;
-  defaultOpen?: boolean;
-  children: React.ReactNode;
-}
-
-export type AccordionMenuCollapsableType = React.ForwardRefExoticComponent<
-  AccordionMenuCollapsableProps & React.RefAttributes<HTMLDivElement>
->;
-
-const Collapsable: AccordionMenuCollapsableType = forwardRef(
-  ({ children, defaultOpen = false, title, className, ...rest }, ref) => {
-    const [isOpen, setIsOpen] = useState(defaultOpen);
-
-    return (
-      <div
-        ref={ref}
-        className={cl("navds-accordion-menu-collapsable", className, {
-          "navds-accordion-menu-collapsable--open": isOpen,
-        })}
-        {...rest}
-      >
-        <button
-          onClick={() => setIsOpen(!isOpen)}
-          className="navds-accordion-menu-collapsable__button"
-        >
-          {title}
-          <Expand
-            title={isOpen ? "Pil peker opp" : "Pil peker ned"}
-            className="navds-accordion-menu-collapsable__expand-icon"
-          />
-        </button>
-        {isOpen && <MenuItems>{children}</MenuItems>}
-      </div>
-    );
-  }
-);
-
-export default Collapsable;

@navikt/core/react/src/accordion-menu/MenuItems.tsx

@@ -1,13 +0,0 @@
-import React from "react";
-
-const MenuItems = ({ children }: { children: React.ReactNode }) => (
-  <ul className="navds-accordion-menu__list">
-    {React.Children.toArray(children).map((child, i) => (
-      <li key={i} className="navds-accordion-menu__list-item">
-        {child}
-      </li>
-    ))}
-  </ul>
-);
-
-export default MenuItems;

@navikt/core/react/src/accordion-menu/index.ts

@@ -1,3 +0,0 @@
-export { default as AccordionMenu, AccordionMenuProps } from "./AccordionMenu";
-export { AccordionMenuCollapsableProps } from "./AccordionMenuCollapsable";
-export { AccordionMenuItemProps } from "./AccordionMenuItem";

@navikt/core/react/src/accordion-menu/stories/accordion-menu.stories.mdx

@@ -1,66 +0,0 @@
-import { Meta, Canvas } from "@storybook/addon-docs";
-import { AccordionMenu } from "../../index";
-
-<Meta title="ds-react/accordion-menu/intro" />
-
-# Hvordan ta i bruk Accordion-menu
-
-```jsx
-<AccordionMenu>
-  <AccordionMenu.item href="#leo">Leo</AccordionMenu.item>
-  <AccordionMenu.Collapsable title="Proin">
-    <AccordionMenu.item href="#nulla" active>
-      Nulla
-    </AccordionMenu.item>
-    <AccordionMenu.item href="#luctus">Luctus</AccordionMenu.item>
-  </AccordionMenu.Collapsable>
-  <AccordionMenu.Collapsable title="Accumsan">
-    <AccordionMenu.item href="#justo" aria-current="page">
-      Justo
-    </AccordionMenu.item>
-    <AccordionMenu.Collapsable title="Proin">
-      <AccordionMenu.item href="#nulla">Nulla</AccordionMenu.item>
-      <AccordionMenu.item href="#luctus">Luctus</AccordionMenu.item>
-    </AccordionMenu.Collapsable>
-  </AccordionMenu.Collapsable>
-</AccordionMenu>
-```
-
-<Canvas>
-  <AccordionMenu>
-    <AccordionMenu.Item href="#leo">Leo</AccordionMenu.Item>
-    <AccordionMenu.Collapsable title="Proin">
-      <AccordionMenu.Item href="#nulla" active>
-        Nulla
-      </AccordionMenu.Item>
-      <AccordionMenu.Item href="#luctus">Luctus</AccordionMenu.Item>
-    </AccordionMenu.Collapsable>
-    <AccordionMenu.Collapsable title="Accumsan">
-      <AccordionMenu.Item href="#justo" aria-current="page">
-        Justo
-      </AccordionMenu.Item>
-      <AccordionMenu.Collapsable title="Proin">
-        <AccordionMenu.Item href="#nulla">Nulla</AccordionMenu.Item>
-        <AccordionMenu.Item href="#luctus">Luctus</AccordionMenu.Item>
-      </AccordionMenu.Collapsable>
-    </AccordionMenu.Collapsable>
-  </AccordionMenu>
-</Canvas>
-
-Accordion-menu støtter opp til maks to-nivårer av `AccordionMenu.Collapsable` akkurat nå.
-
-`AccordionMenu.Item` er implementert med `OverridableComponent`, noe som
-gjør at man kan ta i bruk eks react-router slik:
-
-```jsx
-<AccordionMenu.item
-  as={NavLink}
-  activeClassName="navds-accordion-menu-item--active"
-  to="/1"
->
-  Lenketekst
-</AccordionMenu.item>
-```
-
-Her er `NavLink` fra `react-router-dom` brukt, og man får da
-samtidig bruke alle propsene til denne komponenten som da er `activeClassName` her.

@navikt/core/react/src/accordion-menu/stories/accordion-menu.stories.tsx

@@ -1,141 +0,0 @@
-import * as React from "react";
-import { AccordionMenu } from "../index";
-import { NavLink, HashRouter as Router } from "react-router-dom";
-
-export default {
-  title: "ds-react/accordion-menu",
-  component: { AccordionMenu },
-};
-
-export const All = () => (
-  <div
-    style={{
-      background: "white",
-      maxWidth: 288,
-    }}
-  >
-    <AccordionMenu>
-      <AccordionMenu.Item href="#leo">Leo</AccordionMenu.Item>
-      <AccordionMenu.Collapsable title="Proin">
-        <AccordionMenu.Item href="#nulla" active>
-          Nulla
-        </AccordionMenu.Item>
-        <AccordionMenu.Item href="#luctus">Luctus</AccordionMenu.Item>
-      </AccordionMenu.Collapsable>
-      <AccordionMenu.Collapsable title="Accumsan">
-        <AccordionMenu.Item href="#justo" aria-current="page">
-          Justo
-        </AccordionMenu.Item>
-        <AccordionMenu.Item href="#pariatur" active aria-current="page">
-          Pariatur
-        </AccordionMenu.Item>
-        <AccordionMenu.Collapsable title="Proin">
-          <AccordionMenu.Item href="#nulla" active>
-            Nulla
-          </AccordionMenu.Item>
-          <AccordionMenu.Item href="#luctus">Luctus</AccordionMenu.Item>
-        </AccordionMenu.Collapsable>
-      </AccordionMenu.Collapsable>
-      <AccordionMenu.Item href="#justo" active>
-        Justo
-      </AccordionMenu.Item>
-      <AccordionMenu.Item href="#pariatur">Pariatur</AccordionMenu.Item>
-    </AccordionMenu>
-  </div>
-);
-
-export const ReactRouter = () => (
-  <AccordionMenu>
-    <AccordionMenu.Collapsable title="Nivå 1 – 3 rems høy">
-      <AccordionMenu.Item
-        as={NavLink}
-        activeClassName="navds-accordion-menu-item--active"
-        to="/1"
-      >
-        Nivå 2 innrykk 2 rems
-      </AccordionMenu.Item>
-      <AccordionMenu.Item
-        as={NavLink}
-        activeClassName="navds-accordion-menu-item--active"
-        to="/2"
-      >
-        Subtitle 3
-      </AccordionMenu.Item>
-    </AccordionMenu.Collapsable>
-    <AccordionMenu.Collapsable title="Skjema og søknad">
-      <AccordionMenu.Collapsable title="Satser">
-        <AccordionMenu.Item
-          as={NavLink}
-          activeClassName="navds-accordion-menu-item--active"
-          to="/3"
-        >
-          Nivå 3 – 3 rems innrykk Har du rett til dagpenger når du mottar annen
-          økonomisk støtte fra NAV?
-        </AccordionMenu.Item>
-      </AccordionMenu.Collapsable>
-      <AccordionMenu.Item
-        as={NavLink}
-        activeClassName="navds-accordion-menu-item--active"
-        to="/4"
-      >
-        Subtitle 2
-      </AccordionMenu.Item>
-      <AccordionMenu.Item
-        as={NavLink}
-        activeClassName="navds-accordion-menu-item--active"
-        to="/5"
-      >
-        Subtitle 3
-      </AccordionMenu.Item>
-    </AccordionMenu.Collapsable>
-    <AccordionMenu.Collapsable title="Sakbehandlingstider">
-      <AccordionMenu.Collapsable title="Subtitle 4 Lang tittel på andre nivå lorem ipsum">
-        <AccordionMenu.Item
-          as={NavLink}
-          activeClassName="navds-accordion-menu-item--active"
-          to="/6"
-        >
-          Subtitle 5
-        </AccordionMenu.Item>
-      </AccordionMenu.Collapsable>
-    </AccordionMenu.Collapsable>
-    <AccordionMenu.Item
-      as={NavLink}
-      activeClassName="navds-accordion-menu-item--active"
-      to="/7"
-    >
-      Internasjonalt
-    </AccordionMenu.Item>
-    <AccordionMenu.Collapsable title="Meld fra om endringer lang tittel på første nivå">
-      <AccordionMenu.Item
-        as={NavLink}
-        activeClassName="navds-accordion-menu-item--active"
-        to="/8"
-      >
-        Subtitle 6
-      </AccordionMenu.Item>
-    </AccordionMenu.Collapsable>
-    <AccordionMenu.Item
-      as={NavLink}
-      activeClassName="navds-accordion-menu-item--active"
-      to="/9"
-    >
-      Nivå 1
-    </AccordionMenu.Item>
-  </AccordionMenu>
-);
-
-ReactRouter.decorators = [
-  (Story) => (
-    <Router>
-      <div
-        style={{
-          background: "white",
-          maxWidth: 288,
-        }}
-      >
-        <Story />
-      </div>
-    </Router>
-  ),
-];

@navikt/core/react/src/accordion/AccordionHeader.tsx

@@ -43,6 +43,7 @@ const AccordionHeader: AccordionHeaderType = forwardRef(
 
     return (
       <button
+        {...rest}
         ref={ref}
         id={context.buttonId}
         className={cl(
@@ -52,17 +53,17 @@ const AccordionHeader: AccordionHeaderType = forwardRef(
           "navds-heading--small"
         )}
         onClick={handleClick}
-        {...rest}
+        aria-expanded={context.open}
       >
         {children}
         <Expand
-          title={context.open ? "Lukk panel ikon" : "Åpne panel ikon"}
+          aria-hidden
           className={cl("navds-accordion__expand-icon", {
             "navds-accordion__expand-icon--flip": context.open,
           })}
         />
         <ExpandFilled
-          title={context.open ? "Lukk panel ikon" : "Åpne panel ikon"}
+          aria-hidden
           className={cl(
             "navds-accordion__expand-icon",
             "navds-accordion__expand-icon--filled",

@navikt/core/react/src/accordion/accordion.stories.tsx

@@ -0,0 +1,90 @@
+import React, { useState } from "react";
+import AccordionContent from "./AccordionContent";
+import AccordionHeader from "./AccordionHeader";
+import AccordionItem from "./AccordionItem";
+import { Accordion } from ".";
+
+export default {
+  title: "ds-react/accordion",
+  component: Accordion,
+  subcomponents: {
+    AccordionItem,
+    AccordionContent,
+    AccordionHeader,
+  },
+};
+
+export const All = () => {
+  const [open, setOpen] = 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>
+    </>
+  );
+};

@navikt/core/react/src/accordion/stories/accordion.stories.mdx

@@ -1,72 +0,0 @@
-import { Meta, Canvas, Props } from "@storybook/addon-docs";
-import { Accordion } from "../../index";
-
-<Meta title="ds-react/accordion/intro" />
-
-# Hvordan ta i bruk Accordion
-
-```jsx
-<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.
-    </Accordion.Content>
-  </Accordion.Item>
-  <Accordion.Item>
-    <Accordion.Header>Aliquip amet irure consectetur occaecat</Accordion.Header>
-    <Accordion.Content>
-      Cupidatat aliqua eu ea et anim excepteur. Labore aliquip dolore laborum
-      consequat. Reprehenderit ad velit quis eiusmod ex sint aliquip do deserunt
-      amet exercitation velit Lorem.
-    </Accordion.Content>
-  </Accordion.Item>
-</Accordion>
-```
-
-<Canvas>
-  <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.
-      </Accordion.Content>
-    </Accordion.Item>
-    <Accordion.Item>
-      <Accordion.Header>
-        Aliquip amet irure consectetur occaecat
-      </Accordion.Header>
-      <Accordion.Content>
-        Cupidatat aliqua eu ea et anim excepteur. Labore aliquip dolore laborum
-        consequat. Reprehenderit ad velit quis eiusmod ex sint aliquip do
-        deserunt amet exercitation velit Lorem.
-      </Accordion.Content>
-    </Accordion.Item>
-  </Accordion>
-</Canvas>
-
-## Controlled state
-
-Accordion-komponeten styrer selv open-state, men om man ønsker kan man selv overskrive denne med
-`open`-prop + `onClick`-prop slik det er gjort på eksemplet.
-
-```jsx
-<Accordion>
-  <Accordion.Item open={open}>
-    <Accordion.Header onClick={(open) => 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
-    </Accordion.Content>
-  </Accordion.Item>
-</Accordion>
-```
-
-`renderContentWhenClosed`-prop på `Accordion.Item` bestemmer om innholdet (children) skal beholdes i dom-strukturen mens
-Accordion er lukket. Defaulter til `false`.

@navikt/core/react/src/accordion/stories/accordion.stories.tsx

@@ -1,92 +0,0 @@
-import React, { useState } from "react";
-import AccordionContent from "../AccordionContent";
-import AccordionHeader from "../AccordionHeader";
-import AccordionItem from "../AccordionItem";
-import { Accordion } from "../index";
-
-export default {
-  title: "ds-react/accordion",
-  component: Accordion,
-  subcomponents: {
-    AccordionItem,
-    AccordionContent,
-    AccordionHeader,
-  },
-};
-
-export const All = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <div>
-        <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>
-      </div>
-    </>
-  );
-};

@navikt/core/react/src/alert/alert.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { Alert } from "..";
-import { BodyLong, Heading } from "../..";
+import { Alert } from ".";
+import { BodyLong, Heading } from "..";
 
 export default {
   title: "ds-react/alert",

@navikt/core/react/src/alert/stories/alert.stories.mdx

@@ -1,96 +0,0 @@
-import { Meta, Canvas } from "@storybook/addon-docs";
-import { Alert, Heading, BodyLong } from "../../index";
-
-<Meta title="ds-react/alert/intro" />
-
-# Hvordan ta i bruk Alert
-
-```jsx
-<Alert variant="info">
-  Id elit esse enim reprehenderit.Tempor tempor ex exercitation id aute
-  eu.Laborum nulla nisi irure voluptate mollit fugiat.Est quis culpa nostrud et
-  reprehenderit ea sint.Eu veniam labore enim labore qui eiusmod Lorem amet ad
-  esse.
-</Alert>
-```
-
-<Canvas>
-  <Alert variant="info">
-    Id elit esse enim reprehenderit.Tempor tempor ex exercitation id aute
-    eu.Laborum nulla nisi irure voluptate mollit fugiat.Est quis culpa nostrud
-    et reprehenderit ea sint.Eu veniam labore enim labore qui eiusmod Lorem amet
-    ad esse.
-  </Alert>
-</Canvas>
-
-## Varianter
-
-`variants`-prop kan brukes for å endre utseende mellom
-`info`, `success`, `warning` og `error`.
-
-<Canvas>
-  <Alert variant="info">Id elit esse enim reprehenderit.</Alert>
-  <Alert variant="success">Id elit esse enim reprehenderit.</Alert>
-  <Alert variant="warning">Id elit esse enim reprehenderit.</Alert>
-  <Alert variant="error">Id elit esse enim reprehenderit.</Alert>
-</Canvas>
-
-## Sizing
-
-Alert har to størrelser: Default 64px height og small 32px height default.
-
-<Canvas>
-  <Alert size="small" variant="info">
-    Id elit esse enim reprehenderit.
-  </Alert>
-  <Alert size="small" variant="success">
-    Id elit esse enim reprehenderit.
-  </Alert>
-  <Alert size="small" variant="warning">
-    Id elit esse enim reprehenderit.
-  </Alert>
-  <Alert size="small" variant="error">
-    Id elit esse enim reprehenderit.
-  </Alert>
-</Canvas>
-
-## fullWidth
-
-<Canvas>
-  <div style={{ margin: 32, display: "grid", gap: 16 }}>
-    <Alert fullWidth variant="info">
-      Id elit esse enim reprehenderit.
-    </Alert>
-    <Alert fullWidth size="small" variant="info">
-      Id elit esse enim reprehenderit.
-    </Alert>
-  </div>
-</Canvas>
-
-## Med heading
-
-```jsx
-<Alert variant="info">
-  <Heading spacing size="small" level="2">
-    Aliquip duis est in commodo pariatur
-  </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>
-```
-
-<Canvas>
-  <Alert variant="info">
-    <Heading spacing size="small" level="3">
-      Aliquip duis est in commodo pariatur
-    </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>
-</Canvas>

@navikt/core/react/src/button/button.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Button } from "../index";
+import { Button } from "./index";
 import { Success } from "@navikt/ds-icons";
 
 export default {

@navikt/core/react/src/button/stories/button.stories.mdx

@@ -1,76 +0,0 @@
-import { Meta, Canvas } from "@storybook/addon-docs";
-import { Button, Loader } from "../../index";
-import { Success } from "@navikt/ds-icons";
-
-<Meta title="ds-react/button/intro" />
-
-# Hvordan ta i bruk Button
-
-```jsx
-<Button>Button</Button>
-```
-
-<Canvas>
-  <Button>Button</Button>
-</Canvas>
-
-## Varianter
-
-`variants`-prop kan brukes for å endre utseende mellom
-`primary`, `secondary`, `tertiary` og `danger`
-
-<Canvas>
-  <Button variant="primary">Primary</Button>
-  <Button variant="secondary">Secondary</Button>
-  <Button variant="tertiary">Tertiary</Button>
-  <Button variant="danger">Danger</Button>
-</Canvas>
-
-## Sizing
-
-Button har to størrelser: Default 48px min-height og small 32px min-height
-
-<Canvas>
-  <Button size="small" variant="primary">
-    Primary
-  </Button>
-  <Button size="small" variant="secondary">
-    Secondary
-  </Button>
-  <Button size="small" variant="tertiary">
-    Tertiary
-  </Button>
-  <Button size="small" variant="danger">
-    Danger
-  </Button>
-</Canvas>
-
-## Loading
-
-Button har en egen `loading`-prop setter knappen til disabled og viser `Loader`.
-Button width bli automatisk justert basert på innholdet sin bredde.
-
-<Canvas>
-  <Button loading variant="primary">
-    Primary
-  </Button>
-  <Button loading variant="secondary">
-    Secondary
-  </Button>
-</Canvas>
-
-## Med ikon
-
-Hvis man setter ikoner (svg) rett på button vil størrelsen
-bli justert automatisk og sentrert.
-
-<Canvas>
-  <Button>
-    <Success /> Knapp <Success />
-  </Button>
-  <Button size="small">
-    <Success />
-    Knapp
-    <Success />
-  </Button>
-</Canvas>

@navikt/core/react/src/form/Switch.tsx

@@ -89,13 +89,15 @@ const Switch = forwardRef<HTMLInputElement, SwitchProps>((props, ref) => {
         `navds-switch--${size}`,
         `navds-switch--${position}`,
         {
-          "navds-switch--disabled": inputProps.disabled,
+          "navds-switch--loading": loading,
+          "navds-switch--disabled": inputProps.disabled ?? loading,
         }
       )}
     >
       <input
         {...omit(rest, ["size"])}
         {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
+        disabled={inputProps.disabled ?? loading}
         checked={checkedProp}
         defaultChecked={defaultChecked}
         ref={ref}
@@ -106,7 +108,7 @@ const Switch = forwardRef<HTMLInputElement, SwitchProps>((props, ref) => {
       <span className="navds-switch__track">
         <span className="navds-switch__thumb">
           {loading ? (
-            <Loader size="xsmall" />
+            <Loader size="xsmall" aria-live="polite" />
           ) : checked ? (
             <SelectedIcon />
           ) : null}

@navikt/core/react/src/form/checkbox/Checkbox.tsx

@@ -24,6 +24,11 @@ export interface CheckboxProps
    * The value of the HTML element.
    */
   value?: string;
+  /**
+   * Specify whether the Checkbox is in an indeterminate state
+   * @default false
+   */
+  indeterminate?: boolean;
 }
 
 const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
@@ -52,8 +57,20 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
           "hideLabel",
         ])}
         {...inputProps}
+        type="checkbox"
         className="navds-checkbox__input"
-        ref={ref}
+        aria-checked={props.indeterminate ? "mixed" : inputProps.checked}
+        ref={(el) => {
+          if (el) {
+            el.indeterminate = props.indeterminate ?? false;
+          }
+
+          if (typeof ref === "function") {
+            ref(el);
+          } else if (ref != null) {
+            ref.current = el;
+          }
+        }}
       />
       <label htmlFor={inputProps.id} className="navds-checkbox__label">
         <div

@navikt/core/react/src/form/checkbox/stories/checkbox.stories.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { Checkbox, CheckboxGroup } from "../../index";
 import { Meta } from "@storybook/react/types-6-0";
 export default {
@@ -6,6 +6,36 @@ export default {
   component: Checkbox,
 } as Meta;
 
+export const Indeterminate = () => {
+  const [checked, setChecked] = useState([true, false]);
+
+  return (
+    <>
+      <Checkbox
+        checked={checked[0] && checked[1]}
+        indeterminate={checked[0] !== checked[1]}
+        onChange={(e) => setChecked([e.target.checked, e.target.checked])}
+      >
+        Parent
+      </Checkbox>
+      <div style={{ paddingLeft: "2rem" }}>
+        <Checkbox
+          checked={checked[0]}
+          onChange={(e) => setChecked([e.target.checked, checked[1]])}
+        >
+          Child 1
+        </Checkbox>
+        <Checkbox
+          checked={checked[1]}
+          onChange={(e) => setChecked([checked[0], e.target.checked])}
+        >
+          Child 2
+        </Checkbox>
+      </div>
+    </>
+  );
+};
+
 export const All = () => {
   const Checkboxes = (props) => (
     <CheckboxGroup
@@ -51,6 +81,13 @@ export const All = () => {
       <Checkbox value="Orange" description="Laborum ad" disabled defaultChecked>
         Orange
       </Checkbox>
+      <h3>Indeterminate</h3>
+      <Checkbox value="Apple" indeterminate>
+        Apple
+      </Checkbox>
+      <Checkbox value="Orange" indeterminate size="small">
+        Orange
+      </Checkbox>
 
       <h2>Checkbox group</h2>
       <Checkboxes />

@navikt/core/react/src/form/checkbox/useCheckbox.ts

@@ -32,7 +32,6 @@ const useCheckbox = ({ children, ...props }: CheckboxProps) => {
     ...rest,
     inputProps: {
       ...inputProps,
-      type: "checkbox",
       checked: checkboxGroup?.value
         ? checkboxGroup.value.includes(props.value as string)
         : props.checked,

@navikt/core/react/src/form/stories/switch.stories.tsx

@@ -9,6 +9,7 @@ export default {
 
 export const All = () => {
   const [checked, setChecked] = useState(false);
+  const [loadingState, setLoadingState] = useState(false);
   return (
     <div style={{ width: "fit-content" }}>
       <h1>Switch</h1>
@@ -91,6 +92,13 @@ export const All = () => {
       <Switch disabled loading>
         Label text
       </Switch>
+      <Switch checked loading>
+        Label text
+      </Switch>
+      <button onClick={() => setLoadingState(!loadingState)}>
+        Toggle loading
+      </button>
+      <Switch loading={loadingState}>Label text</Switch>
     </div>
   );
 };

@navikt/core/react/src/help-text/HelpText.tsx

@@ -27,14 +27,14 @@ const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
   ) => {
     const buttonRef = useRef<HTMLButtonElement | null>(null);
     const mergedRef = mergeRefs([buttonRef, ref]);
-    const popoverRef = useRef<HTMLDivElement | null>(null);
+    const [popoverRef, setPopoverRef] = useState<HTMLDivElement | null>(null);
     const wrapperRef = useRef<HTMLDivElement | null>(null);
 
     const [open, setOpen] = useState(false);
 
     useEffect(() => {
-      open && popoverRef.current?.focus();
-    }, [open]);
+      open && popoverRef?.focus?.();
+    }, [open, popoverRef]);
 
     const handleClick = (
       e: React.MouseEvent<HTMLButtonElement, MouseEvent>
@@ -42,7 +42,6 @@ const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
       setOpen((x) => !x);
       rest.onClick && rest.onClick(e);
     };
-
     return (
       <div className="navds-help-text" ref={wrapperRef}>
         <button
@@ -59,7 +58,7 @@ const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
           <span className="navds-sr-only">{title}</span>
         </button>
         <Popover
-          ref={popoverRef}
+          ref={setPopoverRef}
           onClose={() => setOpen(false)}
           className="navds-help-text__popover"
           open={open}

@navikt/core/react/src/index.ts

@@ -1,5 +1,4 @@
 export * from "./accordion";
-export * from "./accordion-menu";
 export * from "./alert";
 export * from "./button";
 export * from "./form";
@@ -9,6 +8,7 @@ export * from "./guide-panel";
 export * from "./link";
 export * from "./link-panel";
 export * from "./loader";
+export * from "./menu";
 export * from "./modal";
 export * from "./panel";
 export * from "./popover";

@navikt/core/react/src/menu/Menu.tsx

@@ -0,0 +1,36 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+import MenuItems from "./MenuItems";
+
+import Item, { MenuItemType } from "./MenuItem";
+import Collapse, { MenuCollapseType } from "./MenuCollapse";
+
+export interface MenuProps extends React.HTMLAttributes<HTMLElement> {
+  children: React.ReactNode;
+}
+
+interface MenuComponent
+  extends React.ForwardRefExoticComponent<
+    MenuProps & React.RefAttributes<HTMLElement>
+  > {
+  Collapse: MenuCollapseType;
+  Item: MenuItemType;
+}
+
+const Menu = forwardRef<HTMLElement, MenuProps>(
+  ({ children, className, ...rest }, ref) => (
+      <nav
+        {...rest}
+        role="navigation"
+        ref={ref}
+        className={cl("navds-menu", className)}
+      >
+        <MenuItems>{children}</MenuItems>
+      </nav>
+    )
+) as MenuComponent;
+
+Menu.Collapse = Collapse;
+Menu.Item = Item;
+
+export default Menu;

@navikt/core/react/src/menu/MenuCollapse.tsx

@@ -0,0 +1,80 @@
+import React, {
+  createContext,
+  forwardRef,
+  HTMLAttributes,
+  useContext,
+  useState,
+} from "react";
+import cl from "classnames";
+import { Expand, ExpandFilled } from "@navikt/ds-icons";
+import MenuItems from "./MenuItems";
+
+export const NestingContext = createContext<{ depth: number }>({ depth: 1 });
+
+const NestingProvider = ({ children }) => {
+  const context = useContext(NestingContext);
+
+  return (
+    <NestingContext.Provider
+      value={{
+        depth: context.depth + 1,
+      }}
+    >
+      {children}
+    </NestingContext.Provider>
+  );
+};
+
+export interface MenuCollapseProps extends HTMLAttributes<HTMLDivElement> {
+  title: string;
+  defaultOpen?: boolean;
+  children: React.ReactNode;
+}
+
+export type MenuCollapseType = React.ForwardRefExoticComponent<
+  MenuCollapseProps & React.RefAttributes<HTMLDivElement>
+>;
+
+const Collapse: MenuCollapseType = forwardRef(
+  ({ children, defaultOpen = false, title, className, ...rest }, ref) => {
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+    const context = useContext(NestingContext);
+
+    return (
+      <div
+        {...rest}
+        ref={ref}
+        className={cl("navds-menu-collapse", className, {
+          "navds-menu-collapse--open": isOpen,
+        })}
+      >
+        <button
+          onClick={() => setIsOpen(!isOpen)}
+          className="navds-menu-collapse__button"
+        >
+          {title}
+          <Expand
+            title={isOpen ? "lukk navigasjons-skuff" : "åpne navigason-skuff"}
+            className="navds-menu-collapse__expand-icon"
+          />
+          <ExpandFilled
+            title={isOpen ? "lukk navigasjons-skuff" : "åpne navigason-skuff"}
+            className="navds-menu-collapse__expand-icon navds-menu-collapse__expand-icon--filled"
+          />
+        </button>
+        <NestingProvider>
+          {isOpen && (
+            <MenuItems
+              data-depth={context.depth}
+              className="navds-menu__list--inner"
+            >
+              {children}
+            </MenuItems>
+          )}
+        </NestingProvider>
+      </div>
+    );
+  }
+);
+
+export default Collapse;

@navikt/core/react/src/menu/MenuItem.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from "react";
 import { OverridableComponent } from "..";
 import cl from "classnames";
 
-export interface AccordionMenuItemProps
+export interface MenuItemProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   children: React.ReactNode;
   /**
@@ -12,12 +12,12 @@ export interface AccordionMenuItemProps
   active?: boolean;
 }
 
-export type AccordionMenuItemType = OverridableComponent<
-  AccordionMenuItemProps,
+export type MenuItemType = OverridableComponent<
+  MenuItemProps,
   HTMLAnchorElement
 >;
 
-const Item: AccordionMenuItemType = forwardRef(
+const Item: MenuItemType = forwardRef(
   (
     { children, as: Component = "a", active = false, className, ...rest },
     ref
@@ -25,8 +25,8 @@ const Item: AccordionMenuItemType = forwardRef(
     return (
       <Component
         ref={ref}
-        className={cl("navds-accordion-menu-item", className, {
-          "navds-accordion-menu-item--active": active,
+        className={cl("navds-menu-item", className, {
+          "navds-menu-item--active": active,
         })}
         {...rest}
       >

@navikt/core/react/src/menu/MenuItems.tsx

@@ -0,0 +1,21 @@
+import cl from "classnames";
+import React from "react";
+
+const MenuItems = ({
+  children,
+  className,
+  ...rest
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => (
+  <ul {...rest} className={cl("navds-menu__list", className)}>
+    {React.Children.toArray(children).map((child, i) => (
+      <li key={i} className="navds-menu__list-item">
+        {child}
+      </li>
+    ))}
+  </ul>
+);
+
+export default MenuItems;

@navikt/core/react/src/menu/index.ts

@@ -0,0 +1,3 @@
+export { default as Menu, MenuProps } from "./Menu";
+export { MenuCollapseProps } from "./MenuCollapse";
+export { MenuItemProps } from "./MenuItem";

@navikt/core/react/src/menu/stories/menu.stories.mdx

@@ -0,0 +1,93 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+import { Menu } from "../../index";
+
+<Meta title="ds-react/menu/intro" />
+
+# Hvordan ta i bruk Menu
+
+```jsx
+<Menu>
+  <Menu.Item href="#leo">Leo</Menu.Item>
+  <Menu.Collapse title="Proin">
+    <Menu.Item href="#nulla" active>
+      Nulla
+    </Menu.Item>
+    <Menu.Item href="#luctus">Luctus</Menu.Item>
+  </Menu.Collapse>
+  <Menu.Collapse title="Accumsan">
+    <Menu.Item href="#justo" aria-current="page">
+      Justo
+    </Menu.Item>
+    <Menu.Collapse title="Proin">
+      <Menu.Item href="#nulla">Nulla</Menu.Item>
+      <Menu.Item href="#luctus">Luctus</Menu.Item>
+    </Menu.Collapse>
+  </Menu.Collapse>
+</Menu>
+```
+
+<Canvas>
+  <Menu>
+    <Menu.Item href="#leo">Leo</Menu.Item>
+    <Menu.Collapse title="Proin">
+      <Menu.Item href="#nulla" active>
+        Nulla
+      </Menu.Item>
+      <Menu.Item href="#luctus">Luctus</Menu.Item>
+    </Menu.Collapse>
+    <Menu.Collapse title="Accumsan">
+      <Menu.Item href="#justo">Justo</Menu.Item>
+      <Menu.Collapse title="Proin">
+        <Menu.Item href="#nulla">Nulla</Menu.Item>
+        <Menu.Item href="#luctus">Luctus</Menu.Item>
+      </Menu.Collapse>
+    </Menu.Collapse>
+  </Menu>
+</Canvas>
+
+## Elementer i menyen
+
+Menyen har to typer elementer man kan bruke: `Collapse` for nesting og `Item` for navigasjonslenker på siden.
+
+<Canvas>
+  <div>
+    <h2>Item</h2>
+    <Menu>
+      <Menu.Item href="#leo">Lenke</Menu.Item>
+      <Menu.Item href="#leo">Lenke</Menu.Item>
+      <Menu.Item href="#leo">Lenke</Menu.Item>
+      <Menu.Item href="#leo">Lenke</Menu.Item>
+      <Menu.Item href="#leo">Lenke</Menu.Item>
+    </Menu>
+    <h2>Collapses + Item</h2>
+    <Menu>
+      <Menu.Collapse title="Proin">
+        <Menu.Item href="#nulla" active>
+          Nulla
+        </Menu.Item>
+        <Menu.Item href="#luctus">Luctus</Menu.Item>
+      </Menu.Collapse>
+      <Menu.Collapse title="Accumsan">
+        <Menu.Item href="#justo">Justo</Menu.Item>
+        <Menu.Collapse title="Proin">
+          <Menu.Item href="#nulla">Nulla</Menu.Item>
+          <Menu.Item href="#luctus">Luctus</Menu.Item>
+        </Menu.Collapse>
+      </Menu.Collapse>
+      <Menu.Item href="#leo">Lenke</Menu.Item>
+      <Menu.Item href="#leo">Lenke</Menu.Item>
+    </Menu>
+  </div>
+</Canvas>
+
+`Menu.Item` er implementert med `OverridableComponent`, noe som
+gjør at man kan ta i bruk eks react-router slik:
+
+```jsx
+<Menu.Item as={NavLink} activeClassName="navds-menu-item--active" to="/1">
+  Lenketekst
+</Menu.Item>
+```
+
+Her er `NavLink` fra `react-router-dom` brukt, og man får da
+samtidig bruke alle propsene til denne komponenten som da er `activeClassName` her.

@navikt/core/react/src/menu/stories/menu.stories.tsx

@@ -0,0 +1,139 @@
+import * as React from "react";
+import cl from "classnames";
+import { Menu } from "../index";
+import { NavLink, HashRouter as Router } from "react-router-dom";
+import { MenuItemProps } from "../MenuItem";
+
+export default {
+  title: "ds-react/menu",
+  component: { Menu },
+};
+
+export const All = () => (
+  <div
+    style={{
+      background: "white",
+      maxWidth: 288,
+    }}
+  >
+    <h2>Only Menu.Items</h2>
+    <Menu>
+      <Menu.Item href="#leo">Leo</Menu.Item>
+
+      <Menu.Item href="#justo">Justo</Menu.Item>
+      <Menu.Item href="#pariatur" active aria-current="page">
+        Pariatur
+      </Menu.Item>
+      <Menu.Item href="#nulla">Nulla</Menu.Item>
+      <Menu.Item href="#luctus">Luctus</Menu.Item>
+      <Menu.Item href="#justo">Justo</Menu.Item>
+      <Menu.Item href="#pariatur">Pariatur</Menu.Item>
+    </Menu>
+
+    <h2>With Collapse</h2>
+    <Menu>
+      <Menu.Item href="#leo">Leo</Menu.Item>
+      <Menu.Collapse title="Proin">
+        <Menu.Item href="#nulla" active>
+          Nulla
+        </Menu.Item>
+        <Menu.Item href="#luctus">Luctus</Menu.Item>
+      </Menu.Collapse>
+      <Menu.Collapse title="Accumsan">
+        <Menu.Item href="#justo" aria-current="page">
+          Justo
+        </Menu.Item>
+        <Menu.Item href="#pariatur" active aria-current="page">
+          Pariatur
+        </Menu.Item>
+        <Menu.Collapse title="Proin">
+          <Menu.Item href="#nulla" active>
+            Nulla
+          </Menu.Item>
+          <Menu.Collapse title="Proin">
+            <Menu.Item href="#nulla" active>
+              Nulla
+            </Menu.Item>
+            <Menu.Item href="#luctus">Luctus</Menu.Item>
+          </Menu.Collapse>
+          <Menu.Item href="#luctus">Luctus</Menu.Item>
+        </Menu.Collapse>
+      </Menu.Collapse>
+      <Menu.Item href="#justo" active>
+        Justo
+      </Menu.Item>
+      <Menu.Item href="#pariatur">Pariatur</Menu.Item>
+    </Menu>
+  </div>
+);
+
+export const ReactRouter = () => {
+  const MenuItemLink = (props: MenuItemProps & { to: string }) => {
+    const { to } = props;
+
+    const CustomLink = React.useMemo(
+      () => (props: MenuItemProps) => (
+        <NavLink
+          {...props}
+          to={to}
+          className={({ isActive }) =>
+            cl(props.className, {
+              "navds-menu-item--active": isActive,
+            })
+          }
+        />
+      ),
+      [to]
+    );
+
+    return (
+      <Menu.Item {...props} as={CustomLink}>
+        Nivå 2 innrykk 2 rems
+      </Menu.Item>
+    );
+  };
+
+  return (
+    <Menu>
+      <Menu.Collapse title="Nivå 1 - 3 rems høy">
+        <MenuItemLink to="/1">Nivå 2 innrykk 2 rems</MenuItemLink>
+        <MenuItemLink to="/2">Subtitle 3</MenuItemLink>
+      </Menu.Collapse>
+      <Menu.Collapse title="Skjema og søknad">
+        <Menu.Collapse title="Satser">
+          <MenuItemLink to="/3">
+            Nivå 3 - 3 rems innrykk Har du rett til dagpenger når du mottar
+            annen økonomisk støtte fra NAV?
+          </MenuItemLink>
+        </Menu.Collapse>
+        <MenuItemLink to="/4">Subtitle 2</MenuItemLink>
+        <MenuItemLink to="/5">Subtitle 3</MenuItemLink>
+      </Menu.Collapse>
+      <Menu.Collapse title="Sakbehandlingstider">
+        <Menu.Collapse title="Subtitle 4 Lang tittel på andre nivå lorem ipsum">
+          <MenuItemLink to="/6">Subtitle 5</MenuItemLink>
+        </Menu.Collapse>
+      </Menu.Collapse>
+      <MenuItemLink to="/7">Internasjonalt</MenuItemLink>
+      <Menu.Collapse title="Meld fra om endringer lang tittel på første nivå">
+        <MenuItemLink to="/8">Subtitle 6</MenuItemLink>
+      </Menu.Collapse>
+      <MenuItemLink to="/9">Nivå 1</MenuItemLink>
+    </Menu>
+  );
+};
+
+ReactRouter.decorators = [
+  (Story) => (
+    <Router>
+      <div
+        style={{
+          background: "white",
+          maxWidth: 288,
+        }}
+      >
+        <Story />
+      </div>
+    </Router>
+  ),
+];

@navikt/core/react/src/page-header/PageHeader.tsx

@@ -55,11 +55,7 @@ const PageHeader = forwardRef<HTMLDivElement, PageHeaderProps>(
           <div className="navds-page-header__illustration">{illustration}</div>
         )}
         <div className="navds-page-header__wrapper">
-          <Heading
-            className="navds-page-header__title"
-            size="2xlarge"
-            level="1"
-          >
+          <Heading className="navds-page-header__title" size="xlarge" level="1">
             {children}
           </Heading>
           {description && (

@navikt/core/react/src/typography/Heading.tsx

@@ -11,7 +11,7 @@ export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
   /**
    * Sizes from largest "2xl" to smallest "s"
    */
-  size: "2xlarge" | "xlarge" | "large" | "medium" | "small" | "xsmall";
+  size: "xlarge" | "large" | "medium" | "small" | "xsmall";
   /**
    * Heading text
    */

@navikt/core/react/src/typography/stories/index.css

@@ -1,3 +0,0 @@
-.typo-story > div:nth-child(even) {
-  background: var(--navds-global-color-gray-200);
-}

@navikt/core/react/src/typography/stories/typography.stories.mdx

@@ -1,83 +0,0 @@
-import { Meta } from "@storybook/addon-docs";
-import { Alert, Heading, BodyLong } from "@navikt/ds-react";
-
-<Meta title="ds-react/Typography/intro" />
-
-# Hvordan ta i bruk typografien
-
-Typografien kan tas i bruk som React komponenter eller ved å ta i bruk css-stilene.
-Se eksemplene under ds-react tabben her i storybook for å se hvordan man tar i bruk både react og stilpakken for dette oppsettet.
-
-Oppsettet er forbedret med blandt annet letter-spacing og line-height.
-I tillegg kan man nå sette `spacing` proppen og man får da automatisk margin-bottom på typo-elementet.
-Da kan man lett sikre riktig spacing mellom tekst i en artikkel.
-
-Font-size er skrevet med REM, men basert på 16px root font size.
-Dette vil si at de som har forstørret font-size på root vil ende opp med større font enn forventet.
-For de som har satt root font size til 18px (1.125rem) kan da "fikse" dette ved å endre tilbake til 16px,
-da det nye typo-oppsettet fikser større font, eller man ta i bruk css-en under.
-
-Denne stylingen vil overskrive default variablene og tilpasse font-size.
-
-```css
-/* autogenerated fix for 18px root-font-size*/
-:root {
-  --navds-font-size-heading-2xlarge: 2.2222222222222223rem;
-  --navds-font-size-heading-xlarge: 1.7777777777777777rem;
-  --navds-font-size-heading-large: 1.5555555555555556rem;
-  --navds-font-size-heading-medium: 1.3333333333333333rem;
-  --navds-font-size-heading-small: 1.1111111111111112rem;
-  --navds-font-size-xlarge: 1.1111111111111112rem;
-  --navds-font-size-large: 1rem;
-  --navds-font-size-medium: 0.8888888888888888rem;
-  --navds-font-size-small: 0.7777777777777778rem;
-}
-```
-
-Vi anbefaler å før eller siden endre tilbake til default root font size da designsystemet sine nye
-komponenter og design-tokens er basert på dette. Endringen til 18px root font size var i grunn for å teste en løsning for å
-forstørre font, noe som er fikset ved nye typo-løsningen. Vi vil derfor unngå å måtte ha midlertidge patcher/fikser
-for å tilpasse systemet for alle de forskjellige variantene av font size på root.
-
-## Migrasjonsguide fra `nav-frontend-typografi` til `@navikt/ds-react`
-
-De nye typografi-komponentene er ikke helt en-til-en med de gamle, så det kan hende du må trekke på en designer om du er usikker på hvilken komponent du skal velge. Eller du kan spørre en av oss i designsystemet.
-
-### Overskrifter
-
-Overskrifters tekststørrelse er nå uavhengig heading-nivå. Det betyr at du står fritt til å sørge for at overskrift-hierarkiet stemmer for din side, uavhengig av visuelt hierarki. Før kunne det være trøblete om men f.eks. ønsket seg en h1, men `<Sidetittel>` opplevdes som for stor.
-
-En direkte en-til-en oversettelse av gamle komponenter til nye, hvor man bevarer størrelsene, ser sånn ut:
-
-`<Sidetittel> -> <Heading size="2xlarge">`
-
-`<Innholdstittel> -> <Heading size="xlarge">`
-
-`<Systemtittel> -> <Heading size="medium">`
-
-`<Undertittel> -> <Heading size="small">`
-
-<Alert variant="warning">
-  Pass på å sette riktig `level` i hver Heading-komponent for å ivareta
-  hierarkiet (h1-h6).
-</Alert>
-
-### Brødtekst
-
-De nye komponentene for brødtekst heter `<BodyLong>` og `<BodyShort>`. `<BodyLong>` er ment å brukes der det er snakk om løpende tekst, f.eks. i en artikkel. I komponent-tekst som med fordel kan være mer kompakt skal `<BodyShort>` brukes, for den har en lavere linjehøyde.
-
-Ny brødtekst-størrelse er 18px. Om du bygger grensesnitt med kompakt design (les; interne flater) der du ønsker å fortsette å bruke 16px brødtekst så finnes det en `<BodyLong size="small">` og `<BodyShort size="small">` som er til for deg.
-
-`<Normaltekst> ->` `<BodyLong>`/`<BodyShort>` (muligens med `size=small`)
-
-### Andre komponenter
-
-`<Ingress> -> <Ingress>`
-
-`<Element> -> <Label>`
-
-`<UndertekstBold> -> <Detail>`
-
-`<Undertekst> -> <Detail size="small">`
-
-`<Feilmelding>` Denne har vi valgt å ikke videreføre, for vi er usikre på om det er behov for en egen komponent. Skriv gjerne en melding på #designsystem eller send en PM til @andreas.nordahl eller @ken.aleksander.johansen om du savner den.

@navikt/core/react/src/typography/typography.stories.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import { Heading, BodyShort, BodyLong, Detail, Ingress, Label } from "../index";
-import "./index.css";
 
 export default {
   title: "ds-react/typography",
@@ -16,7 +15,7 @@ const TitleTemplate = ({ level, size, spacing }) => (
 );
 
 export const HeadingStory = TitleTemplate.bind({});
-HeadingStory.args = { level: 1, size: "2xlarge", spacing: false };
+HeadingStory.args = { level: 1, size: "xlarge", spacing: false };
 
 const IngressTemplate = ({ spacing }) => (
   <Ingress spacing={spacing}>{lorem()}</Ingress>
@@ -64,8 +63,8 @@ DetailStory.args = { spacing: false, size: "medium" };
 export const SideInnholdEksempel = () => {
   return (
     <div style={{ maxWidth: 600 }}>
-      <Heading level={"1"} size="2xlarge" spacing>
-        Title lvl 1 2xlarge
+      <Heading level={"1"} size="xlarge" spacing>
+        Title lvl 1 xlarge
       </Heading>
       <BodyLong spacing>
         BodyLong: Aliqua ad et nisi commodo sit excepteur in commodo proident
@@ -87,7 +86,7 @@ export const SideInnholdEksempel = () => {
         sunt proident irure consectetur excepteur.
       </BodyLong>
       <Heading level={"2"} size="xlarge" spacing>
-        Title lvl 2 xlarge
+        Title lvl 2 large
       </Heading>
       <Ingress spacing>
         Ingress: Mollit incididunt incididunt officia amet est et non aliqua

@navikt/core/tailwind/.gitignore

@@ -0,0 +1,2 @@
+src/tokens.ts
+tailwind.config.js

@navikt/core/tailwind/jest.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  transform: {
+    "^.+\\.ts?$": "ts-jest",
+  },
+};

@navikt/core/tailwind/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@navikt/ds-tailwind",
+  "version": "0.1.2",
+  "private": false,
+  "description": "Auto-generated tailwind config based on @navikt/ds-tokens",
+  "author": "NAV Designsystem team",
+  "keywords": [
+    "tailwind",
+    "design-tokens"
+  ],
+  "main": "tailwind.config.js",
+  "license": "MIT",
+  "files": [
+    "tailwind.config.js"
+  ],
+  "scripts": {
+    "build": "ts-node ./src",
+    "test": "jest"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/navikt/nav-frontend-moduler.git",
+    "directory": "@navikt/core/tailwind"
+  },
+  "devDependencies": {
+    "@navikt/ds-tokens": "^0.8.1",
+    "@types/jest": "^27.0.1",
+    "jest": "^27.2.0",
+    "lodash": "^4.17.21",
+    "ts-jest": "^27.0.5",
+    "ts-node": "^10.3.0"
+  }
+}

@navikt/core/tailwind/src/index.ts

@@ -0,0 +1,34 @@
+// @ts-ignore
+import * as TokensBuild from "@navikt/ds-tokens/dist/tokens";
+import { writeFileSync } from "fs";
+import { kebabCase } from "lodash";
+import Reducer from "./reducer";
+
+const tokens = Object.entries(TokensBuild).reduce(
+  (old, [key, val]) => ({
+    ...old,
+    [kebabCase(key).replace("navds-", "")]: val,
+  }),
+  {}
+);
+
+const config = {
+  theme: {
+    colors: Reducer(tokens, ["semantic-color", "global-color"]),
+    extend: {
+      spacing: Reducer(tokens, ["spacing"]),
+      zIndex: Reducer(tokens, ["z-index"]),
+      boxShadow: Reducer(tokens, ["shadow"]),
+      fontWeight: Reducer(tokens, ["font-weight"]),
+      fontSize: Reducer(tokens, ["font-size"]),
+      lineHeight: Reducer(tokens, ["font-line-height"]),
+      fontFamily: Reducer(tokens, ["font-family"]),
+    },
+  },
+};
+
+const outputString = `module.exports = ${JSON.stringify(config, null, 2)};`;
+
+writeFileSync("tailwind.config.js", outputString);
+
+console.log("Success: Tailwind config ");

@navikt/core/tailwind/src/reducer.ts

@@ -0,0 +1,20 @@
+const replaceKey = (s: string, keys: string[]) => {
+  let key = s;
+  keys.forEach((k) => {
+    key = key.replace(`${k}-`, "");
+  });
+  return key;
+};
+
+/* Cherry-picks object keys we want */
+const Reducer = (
+  tokens: { [key: string]: string | number },
+  replace: string[]
+) =>
+  Object.entries(tokens).reduce((old, [key, value]) => {
+    return replace.find((v) => key.startsWith(v))
+      ? { ...old, [replaceKey(key, replace)]: value }
+      : { ...old };
+  }, {});
+
+export default Reducer;

@navikt/core/tailwind/src/tests/reducer.test.ts

@@ -0,0 +1,42 @@
+import Reducer from "../reducer";
+
+describe("Check correct parsing of tailind tokens", () => {
+  test("Check reducer function", () => {
+    expect(
+      Reducer(
+        {
+          "shadow-focus-inverted":
+            "0 0 0 3px var(navds-semantic-color-focus-inverted)",
+          "z-index-focus": 10,
+          "global-color-blue-300": "rgba(102, 165, 244, 1)",
+          "semantic-color-interaction-primary":
+            "var(--navds-gloab-color-blue-300)",
+        },
+        ["shadow"]
+      )
+    ).toEqual({
+      "focus-inverted": "0 0 0 3px var(navds-semantic-color-focus-inverted)",
+    });
+  });
+  test("Check reducer function with multiple keys", () => {
+    expect(
+      Reducer(
+        {
+          "shadow-focus-inverted":
+            "0 0 0 3px var(navds-semantic-color-focus-inverted)",
+          "z-index-focus": 10,
+          "global-color-transparent": "rgba(255, 255, 255, 0)",
+          "global-color-white": "rgba(255, 255, 255, 1)",
+          "semantic-color-border-inverted": "var(navds-global-color-gray-200)",
+          "semantic-color-border-muted": "var(navds-global-color-gray-400)",
+        },
+        ["global-color", "semantic-color"]
+      )
+    ).toEqual({
+      transparent: "rgba(255, 255, 255, 0)",
+      white: "rgba(255, 255, 255, 1)",
+      "border-inverted": "var(navds-global-color-gray-200)",
+      "border-muted": "var(navds-global-color-gray-400)",
+    });
+  });
+});

@navikt/core/tailwind/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "allowJs": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules"]
+}

@navikt/core/tokens/build.js

@@ -9,6 +9,7 @@ StyleDictionary.registerTransform({
 });
 
 const StyleDictionaryExtended = StyleDictionary.extend(
-  __dirname + "/config.json"
+  __dirname + "/config.js"
 );
+
 StyleDictionaryExtended.buildAllPlatforms();

@navikt/core/tokens/config.js

@@ -0,0 +1,52 @@
+module.exports = {
+  source: ["src/index.js", "src/**/*.json"],
+  platforms: {
+    scss: {
+      transformGroup: "scss",
+      buildPath: "dist/",
+      files: [
+        {
+          destination: "tokens.scss",
+          format: "scss/variables",
+        },
+      ],
+    },
+    less: {
+      transformGroup: "less",
+      buildPath: "dist/",
+      files: [
+        {
+          destination: "tokens.less",
+          format: "less/variables",
+        },
+      ],
+    },
+    css: {
+      transformGroup: "css",
+      buildPath: "dist/",
+      files: [
+        {
+          destination: "tokens.css",
+          format: "css/variables",
+          options: {
+            outputReferences: true,
+          },
+        },
+      ],
+    },
+    js: {
+      transformGroup: "js",
+      buildPath: "dist/",
+      files: [
+        {
+          destination: "tokens.js",
+          format: "javascript/es6",
+        },
+        {
+          destination: "tokens-cjs.js",
+          format: "javascript/module-flat",
+        },
+      ],
+    },
+  },
+};

@navikt/core/tokens/config.json

@@ -1,52 +0,0 @@
-{
-  "source": ["src/index.js", "src/**/*.json"],
-  "platforms": {
-    "scss": {
-      "transformGroup": "scss",
-      "buildPath": "dist/",
-      "files": [
-        {
-          "destination": "tokens.scss",
-          "format": "scss/variables"
-        }
-      ]
-    },
-    "less": {
-      "transformGroup": "less",
-      "buildPath": "dist/",
-      "files": [
-        {
-          "destination": "tokens.less",
-          "format": "less/variables"
-        }
-      ]
-    },
-    "css": {
-      "transformGroup": "css",
-      "buildPath": "dist/",
-      "files": [
-        {
-          "destination": "tokens.css",
-          "format": "css/variables",
-          "options": {
-            "outputReferences": true
-          }
-        }
-      ]
-    },
-    "js": {
-      "transformGroup": "js",
-      "buildPath": "dist/",
-      "files": [
-        {
-          "destination": "tokens.js",
-          "format": "javascript/es6"
-        },
-        {
-          "destination": "tokens-cjs.js",
-          "format": "javascript/module-flat"
-        }
-      ]
-    }
-  }
-}

@navikt/core/tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tokens",
-  "version": "0.7.1",
+  "version": "0.8.1",
   "private": false,
   "description": "Auto-generated design-tokens for NAV design-systems framework",
   "author": "NAV Designsystem team",
@@ -14,7 +14,8 @@
   "license": "MIT",
   "files": [
     "/dist",
-    "/src"
+    "/src",
+    "/tailwind"
   ],
   "scripts": {
     "build": "node ./build.js",

@navikt/core/tokens/src/colors.json

@@ -74,16 +74,25 @@
             "value": "rgba(241, 241, 241, 1)"
           },
           "200": {
-            "value": "rgba(201, 201, 201, 1)"
+            "value": "rgba(229, 229, 229, 1)"
+          },
+          "300": {
+            "value": "rgba(207, 207, 207, 1)"
           },
           "400": {
-            "value": "rgba(160, 160, 160, 1)"
+            "value": "rgba(176, 176, 176, 1)"
+          },
+          "500": {
+            "value": "rgba(143, 143, 143, 1)"
           },
           "600": {
-            "value": "rgba(106, 106, 106, 1)"
+            "value": "rgba(112, 112, 112, 1)"
+          },
+          "700": {
+            "value": "rgba(89, 89, 89, 1)"
           },
           "800": {
-            "value": "rgba(79, 79, 79, 1)"
+            "value": "rgba(64, 64, 64, 1)"
           },
           "900": {
             "value": "rgba(38, 38, 38, 1)"

@navikt/internal/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react-internal",
-  "version": "0.9.13",
+  "version": "0.11.1",
   "private": false,
   "description": "NAV internal designsystem react components",
   "author": "NAV Designsystem team",
@@ -33,8 +33,8 @@
     "watch": "tsc --watch -p tsconfig.esm.json"
   },
   "dependencies": {
-    "@navikt/ds-icons": "^0.7.3",
-    "@navikt/ds-react": "^0.14.13",
+    "@navikt/ds-icons": "^0.8.1",
+    "@navikt/ds-react": "^0.16.1",
     "@popperjs/core": "^2.10.1",
     "classnames": "^2.3.1",
     "copy-to-clipboard": "^3.3.1",

README.md

@@ -40,7 +40,7 @@ Gå til [CONTRIBUTING.md](https://github.com/navikt/nav-frontend-moduler/blob/ma
 
 ## Lisenser
 
-Gå til [LICENSE](https://github.com/navikt/nav-frontend-moduler/blob/master/LICENSE)
+Gå til [LICENSE](https://github.com/navikt/nav-frontend-moduler/blob/master/LICENCE)
     
 ## Contributors
     

lerna.json

@@ -17,6 +17,7 @@
     "@navikt/core/react",
     "@navikt/core/icons",
     "@navikt/core/tokens",
+    "@navikt/core/tailwind",
     "@navikt/internal/css",
     "@navikt/internal/react"
   ]

package.json

@@ -8,8 +8,9 @@
     "postinstall": "husky install",
     "boot": "yarn clean:lib && yarn build:packages --stream",
     "storybook": "start-storybook -p 6006",
-    "build:packages": "yarn run --silent lerna run build",
+    "build:packages": "yarn build:tokens && yarn run --silent lerna run build",
     "build:storybook": "build-storybook",
+    "build:tokens": "yarn workspace @navikt/ds-tokens build",
     "chromatic": "npx chromatic --project-token x3xqdfgkujg",
     "lerna:watch": "yarn run lerna run watch --stream",
     "update:icons": "yarn workspace @navikt/ds-icons update",

tsconfig.json

@@ -6,5 +6,5 @@
     "target": "es6",
     "moduleResolution": "node"
   },
-  "exclude": ["**/stories", "**/*.test.ts", "**/*.test.tsx"]
+  "exclude": ["**/stories", "**/*.stories.*", "**/*.test.ts", "**/*.test.tsx"]
 }