Lerna versionbump [ci skip]

- @navikt/ds-css@0.6.14 - @navikt/ds-react@0.6.9
Vnext SpeechBubble (snakkeboble) (#1152 )
2026-10-13 17:22:02 +00:00 · 2021-07-16 13:56:44 +00:00 · 2021-07-16 15:41:12 +02:00 · 2021-07-15 09:34:35 +02:00 · 2021-07-14 13:02:15 +00:00 · 2021-07-14 14:48:24 +02:00
90 changed files with 3328 additions and 714 deletions
@@ -0,0 +1,57 @@
+{
+  "repository": "@nav/designsystem",
+  "head": "updated-specify-tokens",
+  "base": "master",
+  "rules": [
+    {
+      "name": "Specify / Icons",
+      "path": "@navikt/ds-icons/svg",
+      "filter": {
+        "types": ["vector"]
+      },
+      "parsers": [
+        {
+          "name": "pascalcasify",
+          "options": {
+            "keys": ["name"]
+          }
+        },
+        {
+          "name": "name-assets-files-by-pattern",
+          "options": {
+            "pattern": "{{name}}.{{format}}"
+          }
+        }
+      ]
+    },
+    {
+      "name": "Specify / Icons - metadata",
+      "path": "@navikt/ds-icons/figma-api/metadata-specify.json",
+      "filter": {
+        "types": ["vector"]
+      },
+      "parsers": [
+        {
+          "name": "pascalcasify",
+          "options": {
+            "keys": ["name"]
+          }
+        },
+        {
+          "name": "pick",
+          "options": {
+            "keys": [
+              "name",
+              "createdAt",
+              "updatedAt",
+              "meta.description",
+              "meta.parentFrame",
+              "meta.frame",
+              "page"
+            ]
+          }
+        }
+      ]
+    }
+  ]
+}
@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/addon-docs/blocks";
+import { Meta } from "@storybook/addon-docs";

 <Meta title="ds-react/Kom i gang" />

@@ -0,0 +1,57 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="ds-react/Roadmap" />
+
+# Plan videre
+
+Arbeidet med det nye pakke-oppsettet har nå foregått en stund og skulle egentlig vært
+lengre på vei en det er nå. Men arbeidet har på ingen måte stoppet opp! Vi jobber kontinuerlig med
+å finne bedre løsninger for å kunne bygge systemet opp fra bunnen av. Dette innegår da
+ny dokumentasjons-side bygd med Sanity, nye byggeblokker helt fra token-nivå og bedre sizing for eksterne/interne sider. Dette vil da forhåpentligvis la oss
+bygge mer robuste og fleksible løsninger for fremtiden.
+
+(Rekkefølgen representer ikke faktisk tidsline eller prioritet)
+
+## Tokens
+
+Vi bygger opp `@navikt/ds-tokens` pakken som inneholder alle design-tokensene til designsystemet fra bunnen av.
+Dette vil gjøre styling og overriding av komponenter enklere da man kan bruke css-variabler.
+
+## Intern / Ekstern sizing
+
+Komponenter tilpasses og standariseres bedre for skillet mellom interne/eksterne flater.
+Løsning er ikke fast bestemt, men eksempel på dette er `size="s" -> 32px, size="m"-> 48px`.
+Dette vil da eksempelvis kunne være en standard som er gjennomgående for de fleste komponentene.
+
+## Ny dokumentasjon-side
+
+Vi bygger en ny side for å dokumentere systemet, og mer rundt utvikling/design i nav med "Verktøykassen"
+
+## Migrere komponenter/styling fra nav-frontend-\* -> `@navikt/ds-css / @navikt/ds-react`
+
+Dette arbeidet kommer sakte men sikkert på plass, men tar litt tid da mye må på plass først, da eksempelvis sizing og tokens.
+Noen komponenter vil ha oppdatert funksjonalitet, noen bare stilendringer, mens noen kan nesten brukes 1-1 fra nav-frontend-.
+
+Note: Noen pakker vil ikke flyttes over fra nav-frontend og `deprecates` i praksis da. De pakkene som ikka tas over vil ikke bli deprecated på `npm`, slik at man kan fortsette å ta dem i bruk uten en sint terminal hver gang man kjører `yarn install`.
+
+## Theming
+
+Etterhvert når vi har nye react, css og token pakke på plass har vi et ønske om å kunne se på theming for
+eks darkmode.
+
+## Vue, svelte, web-components etc...
+
+Dette er noe vi ikke har på planene for tiden, men etterhvert som ting faller på plass så vil dette være
+noe vi kunne ta en titt på hvis vi ser at det trengs.
+
+## Feature-flagging
+
+Ideen om å ta i bruk feature-flagging er noe som virker veldig interessant og vil da se på muligheten for å kunne levere
+større endringe i feature-flags for testing, og da publisere under eks major-bump i faste intervaller. Dette vil da kunne
+gjøre det enklere for deg som consumer av pakkene å ha oversikt over endringer og hva som må migreres.
+
+## Versjonering
+
+To av de nye pakkene under `@navikt`, da `ds-css` og `ds-react` er nå versjonert under to store pakker med alle komponentene. I fremtiden vil vi se på å
+ha både samversjonering (alle pakker under en eks ds-react versjon) og induvduell verjsonering da eks ds-react/button har en egen versjon
+slik at man kan ha mer finkontroll over komponentbruk på siden sin.
@@ -22,18 +22,11 @@
  text-decoration: underline;
 }

-.navds-accordion-menu-collapsable .navds-accordion-menu__list,
-.navds-accordion-menu-collapsable
-  .navds-accordion-menu-collapsable
-  .navds-accordion-menu-collapsable__button {
-  font-weight: var(--navds-font-weight-regular);
-}
-
 .navds-accordion-menu-item,
 .navds-accordion-menu-collapsable__button {
  display: flex;
  padding: var(--navds-spacing-3) var(--navds-spacing-4);
-  line-height: 1.5rem; /* TODO: fix typography. */
+  text-decoration: none;
 }

 .navds-accordion-menu-collapsable__expand-icon {
@@ -82,16 +75,16 @@
 .navds-accordion-menu-collapsable__button:focus {
  outline: 3px solid var(--navds-text-focus);
  outline-offset: -3px;
+  color: var(--navds-color-darkgray);
 }

 .navds-accordion-menu-item:hover,
 .navds-accordion-menu-collapsable__button:hover {
-  background-color: var(--navds-color-gray-20);
+  background-color: var(--navds-color-blue-10);
 }

 .navds-accordion-menu-item--active {
  box-shadow: inset 0.5rem 0 var(--navds-color-text-link);
  color: var(--navds-color-text);
  text-decoration: none;
-  font-weight: var(--navds-font-weight-bold);
 }
@@ -5,14 +5,12 @@
 .navds-accordion {
  position: relative;
  background: var(--navds-color-background);
-  border: var(--navds-border-default);
-  border-radius: 4px;
+  border-bottom: 2px solid #c9c9c9;
 }

 .navds-accordion:hover {
-  box-shadow: var(--navds-color-hover);
-  border: var(--navds-panel-hover);
-  color: black;
+  /* color: black; */
+  border-bottom: 2px solid var(--navds-color-blue-50);
 }

 .navds-accordion:focus,
@@ -39,16 +37,16 @@

 .navds-accordion__button {
  padding: var(--navds-spacing-4);
-  border-radius: 4px;
  background: transparent;
-  border: 0;
  text-align: left;
+  border: none;
  width: 100%;
  margin-bottom: 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
+  color: var(--navds-color-text-link);
 }

 .navds-accordion__button:hover .navds-accordion__heading {
@@ -69,3 +67,16 @@
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
 }
+
+.navds-accordion__chevron--filled {
+  display: none;
+}
+
+.navds-accordion__button:hover
+  > .navds-accordion__chevron.navds-accordion__chevron--filled {
+  display: inherit;
+}
+
+.navds-accordion__button:hover > .navds-accordion__chevron {
+  display: none;
+}
@@ -2,21 +2,24 @@
  border-radius: 4px;
  border: var(--navds-border-default);

-  /* Padding calculated based on 16px font for 64px tall alert */
-  padding: 1.1875rem var(--navds-spacing-4);
+  /* Padding calculated based on 18px font for 64px tall alert */
+  padding: var(--navds-spacing-4) var(--navds-spacing-4);
  display: grid;
  grid-auto-flow: column;
-  column-gap: 0.75rem;
  justify-content: start;
+  min-height: 64px;
+  box-sizing: border-box;
 }

 .navds-alert--s {
-  border-radius: 0;
-  padding: var(--navds-spacing-2) var(--navds-spacing-4);
+  padding: var(--navds-spacing-1) var(--navds-spacing-4);
+  min-height: 32px;
 }

-.navds-alert > svg {
+.navds-alert > span > svg {
+  margin-right: var(--navds-spacing-3);
  font-size: 1.5rem;
+  flex-shrink: 0;
  background: radial-gradient(
    circle,
    var(--navds-color-background) 50%,
@@ -25,8 +28,17 @@
  );
 }

+.navds-alert > div {
+  display: block;
+  margin: auto 0;
+  max-width: 43.5rem;
+  flex: 1;
+}
+
 .navds-alert > span {
-  margin-top: 1px;
+  display: flex;
+  align-items: center;
+  max-height: calc(var(--navds-spacing-8) - 2px);
 }

 .navds-alert--error {
@@ -34,7 +46,7 @@
  background-color: var(--navds-color-error-background);
 }

-.navds-alert--error > svg {
+.navds-alert--error > span > svg {
  color: var(--navds-color-red-60);
 }

@@ -43,7 +55,7 @@
  background-color: var(--navds-color-warning-background);
 }

-.navds-alert--warning > svg {
+.navds-alert--warning > span > svg {
  color: var(--navds-color-orange-40);
  background: radial-gradient(
    circle,
@@ -58,7 +70,7 @@
  background-color: var(--navds-color-info-background);
 }

-.navds-alert--info > svg {
+.navds-alert--info > span > svg {
  color: var(--navds-color-lightblue-70);
 }

@@ -67,6 +79,6 @@
  background-color: var(--navds-color-success-background);
 }

-.navds-alert--success > svg {
+.navds-alert--success > span > svg {
  color: var(--navds-color-green-70);
 }
@@ -9,6 +9,10 @@
 /* Disabled because of UU concerns */
 /* @import "smooth-scroll.css"; */

+* {
+  box-sizing: border-box;
+}
+
 body {
  font-family: var(--navds-font-family);
  line-height: 1.375;
@@ -1,5 +1,5 @@
 .navds-button {
-  display: inline-block;
+  display: inline-flex;
  cursor: pointer;
  background-color: var(--navds-color-background);
  color: var(--navds-color-action-default);
@@ -10,14 +10,38 @@
  border-radius: 2px;
  border-style: solid;
  border-width: 2px;
+  min-height: 48px;
+  align-items: center;

  /* Padding calculated based on 18px font for 44px tall button */
-  padding: calc(0.625rem - 2px) calc(var(--navds-spacing-8) - 2px);
+  padding: calc(var(--navds-spacing-3) - 2px) var(--navds-spacing-3);
 }

+.navds-button > svg {
+  font-size: 1.5rem;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.navds-button--s > svg {
+  font-size: 1.25rem;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.navds-button > svg + *:not(.sr-only),
+.navds-button > *:not(.sr-only) + svg {
+  margin-left: 0.5rem;
+}
+
+/* .navds-button:last-child {
+  margin-left: 0.5rem;
+} */
+
 .navds-button--s {
  /* Padding calculated based on 16px font for 32px tall button */
-  padding: calc(0.3125rem - 2px) calc(var(--navds-spacing-4) - 2px);
+  padding: 0.25rem calc(var(--navds-spacing-4) - 2px);
+  min-height: 32px;
 }

 .navds-button:focus {
@@ -33,16 +57,7 @@
 .navds-button--primary:active {
  color: var(--navds-color-text-inverse);
  background-color: var(--navds-color-action-hover);
-  border-width: 0;
-
-  /* Padding calculated based on 18px font for 44px tall button */
-  padding: 0.625rem var(--navds-spacing-8);
-}
-
-.navds-button--primary:hover.navds-button--s,
-.navds-button--primary:active.navds-button--s {
-  /* Padding calculated based on 16px font for 32px tall button */
-  padding: 0.3125rem var(--navds-spacing-4);
+  border-color: transparent;
 }

 .navds-button--primary:active {
@@ -86,42 +101,18 @@

 .navds-button--action,
 .navds-button--danger {
-  /* Padding calculated based on 18px font for 44px tall button */
-  padding: 0.625rem var(--navds-spacing-8);
-  border-width: 0;
-  transform: translateY(calc(-1 * 2px));
-  position: relative;
-  color: var(--navds-color-text-inverse);
-}
-
-.navds-button--action.navds-button--s,
-.navds-button--danger.navds-button--s {
-  /* Padding calculated based on 16px font for 32px tall button */
-  padding: 0.3125rem var(--navds-spacing-4);
-}
-
-.navds-button--action:not(:focus),
-.navds-button--danger:not(:focus) {
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 2px 0 rgba(0, 0, 0, 0.25);
+  color: white;
+  border-width: 1px;
 }

 .navds-button--action:hover {
  background-color: var(--navds-color-action-hover);
+  border-color: var(--navds-color-action-hover);
 }

 .navds-button--danger:hover {
  background-color: var(--navds-color-danger-hover);
-}
-
-.navds-button--danger:hover,
-.navds-button--action:hover {
-  transform: translateY(calc(-1 * 3px));
-  position: relative;
-}
-
-.navds-button--action:hover:not(:focus),
-.navds-button--danger:hover:not(:focus) {
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 3px 0 rgba(0, 0, 0, 0.25);
+  border-color: var(--navds-color-danger-hover);
 }

 .navds-button--action:active {
@@ -132,131 +123,9 @@
  background-color: var(--navds-color-danger-active);
 }

-.navds-button--action:active,
-.navds-button--danger:active {
-  transform: translateY(0);
-  position: relative;
-}
-
-.navds-button--action:active:not(:focus),
-.navds-button--danger:active:not(:focus) {
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 0 0 rgba(0, 0, 0, 0.25);
-}
-
-.navds-button--action:focus {
-  color: var(--navds-color-action-default);
-  background-color: var(--navds-color-background);
-}
-
+.navds-button--action:focus,
 .navds-button--danger:focus {
-  color: var(--navds-color-danger-default);
-  background-color: var(--navds-color-background);
-}
-
-.navds-button--danger:focus,
-.navds-button--action:focus {
-  /* Padding calculated based on 18px font for 44px tall button */
-  padding: calc(0.625rem - 2px) calc(var(--navds-spacing-8) - 2px);
-  transform: translateY(calc(-1 * 2px));
-  position: relative;
-  border-width: 2px;
-}
-
-.navds-button--action:focus.navds-button--s,
-.navds-button--danger:focus.navds-button--s {
-  /* Padding calculated based on 16px font for 32px tall button */
-  padding: calc(0.3125rem - 2px) calc(var(--navds-spacing-4) - 2px);
-}
-
-.navds-button--action:hover:focus {
-  background-color: var(--navds-color-action-hover);
-}
-
-.navds-button--danger:hover:focus {
-  background-color: var(--navds-color-danger-hover);
-}
-
-.navds-button--action:hover:focus,
-.navds-button--danger:hover:focus {
-  /* Padding calculated based on 18px font for 44px tall button */
-  padding: 0.625rem var(--navds-spacing-8);
-  border-width: 0;
-  color: var(--navds-color-text-inverse);
-}
-
-.navds-button--action:hover:focus.navds-button--s,
-.navds-button--danger:hover:focus.navds-button--s {
-  /* Padding calculated based on 16px font for 32px tall button */
-  padding: 0.3125rem var(--navds-spacing-4);
-}
-
-.navds-button--action:active:focus {
-  color: var(--navds-color-action-active);
-  border-color: var(--navds-color-action-active);
-}
-
-.navds-button--danger:active:focus {
-  color: var(--navds-color-danger-active);
-  border-color: var(--navds-color-danger-active);
-}
-
-.navds-button--action:active:focus,
-.navds-button--danger:active:focus {
-  /* Padding calculated based on 18px font for 44px tall button */
-  padding: calc(0.625rem - 2px) calc(var(--navds-spacing-8) - 2px);
-  transform: translateY(0);
-  position: relative;
-  border-width: 2px;
-  background-color: var(--navds-color-background);
-}
-
-.navds-button--action:active:focus.navds-button--s,
-.navds-button--danger:active:focus.navds-button--s {
-  /* Padding calculated based on 16px font for 32px tall button */
-  padding: calc(0.3125rem - 2px) calc(var(--navds-spacing-4) - 2px);
-}
-
-.navds-button--action:hover:focus:active {
-  color: var(--navds-color-text-inverse);
-  background-color: var(--navds-color-action-active);
-}
-
-.navds-button--danger:hover:focus:active {
-  color: var(--navds-color-text-inverse);
-  background-color: var(--navds-color-danger-active);
-}
-
-/**************************
- * ::before *
- **************************/
-
-.navds-button--action::before,
-.navds-button--danger::before {
-  bottom: calc(-1 * 2px);
-  height: 2px;
-  content: "";
-  display: block;
-  position: absolute;
-  left: 0;
-  right: 0;
-}
-
-.navds-button--action:hover::before,
-.navds-button--danger:hover::before {
-  bottom: calc(-1 * 3px);
-  height: 3px;
-}
-
-.navds-button--action:focus::before,
-.navds-button--danger:focus::before {
-  bottom: calc(-1 * 2px);
-  height: 2px;
-}
-
-.navds-button--action:active::before,
-.navds-button--danger:active::before {
-  bottom: 0;
-  height: 0;
+  border-color: white;
 }

 /**************************
@@ -264,8 +133,6 @@
 **************************/

 .navds-button:disabled:disabled {
-  /* Padding calculated based on 18px font for 44px tall button */
-  padding: 0.625rem var(--navds-spacing-8);
  background-color: var(--navds-color-disabled);
  color: var(--navds-color-text-inverse);
  cursor: not-allowed;
@@ -273,8 +140,3 @@
  box-shadow: none;
  transform: none;
 }
-
-.navds-button:disabled:disabled.navds-button--s {
-  /* Padding calculated based on 16px font for 32px tall button */
-  padding: 0.3125rem var(--navds-spacing-4);
-}
@@ -0,0 +1,31 @@
+/*
+  MicroCard
+*/
+
+.navds-card__micro {
+  border-radius: 1rem;
+  color: var(--navds-color-text-primary);
+  display: inline-flex;
+  padding: var(--navds-spacing-1) var(--navds-spacing-2);
+  text-decoration: none;
+  background-color: var(--navds-color-orange-20);
+  border: 1px solid transparent;
+}
+
+.navds-card__micro:hover {
+  background-color: var(--navds-color-white);
+  border-color: var(--navds-color-blue-50);
+  color: var(--navds-color-blue-50);
+}
+
+.navds-card__micro:focus {
+  background-color: var(--navds-color-white);
+  color: var(--navds-color-blue-50);
+  outline: none;
+  box-shadow: var(--navds-shadow-focus);
+}
+
+.navds-card__micro:active {
+  background-color: var(--navds-color-blue-70);
+  color: var(--navds-color-white);
+}
@@ -3,6 +3,7 @@
  align-items: center;
  column-gap: 0.5em;
  padding: var(--navds-spacing-1);
+  min-height: 32px;
 }

 .navds-copy-to-clipboard__popover {
@@ -0,0 +1,63 @@
+.navds-header {
+  display: flex;
+  justify-content: center;
+  background-color: var(--navds-color-background);
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+  padding-left: calc((100vw - 100%) / 2);
+  padding-right: calc((100vw - 100%) / 2);
+  margin-left: calc((100vw - 100%) / -2);
+  margin-right: calc((100vw - 100%) / -2);
+}
+
+.navds-header__wrapper {
+  width: 100%;
+  max-width: 56.5rem;
+  text-align: start;
+}
+
+.navds-header__title {
+  display: flex;
+  margin: 0 auto;
+  width: 100%;
+  position: relative;
+  flex-direction: column;
+}
+
+.navds-header--left > .navds-header__wrapper {
+  text-align: start;
+}
+
+.navds-header--center > .navds-header__wrapper {
+  text-align: center;
+}
+
+.navds-header__illustration {
+  margin-right: 1.5rem;
+  pointer-events: none;
+}
+
+.navds-header__illustration > svg {
+  width: 5rem;
+  height: 5rem;
+}
+
+.navds-header--situation {
+  box-shadow: 0 -4px 0 var(--navds-color-orange-40) inset;
+}
+.navds-header--product {
+  box-shadow: 0 -4px 0 var(--navds-color-green-40) inset;
+}
+.navds-header--guide {
+  box-shadow: 0 -4px 0 var(--navds-color-deepblue-40) inset;
+}
+
+@media (max-width: 649px) {
+  .navds-header__illustration > svg {
+    width: 3rem;
+    height: 3rem;
+  }
+  .navds-header__title {
+    font-size: var(--navds-font-size-title-xl);
+  }
+}
@@ -8,12 +8,16 @@
@import "accordion-menu.css";
@import "alert.css";
@import "button.css";
+@import "card.css";
@import "content-container.css";
@import "copy-to-clipboard.css";
+@import "header.css";
@import "internal-header.css";
@import "link.css";
+@import "loader.css";
@import "modal.css";
@import "popover.css";
@import "tag.css";
@import "panel.css";
@import "link-panel.css";
+@import "speech-bubble.css";
@@ -2,7 +2,7 @@
 * .navds-header *
 **************************/

-.navds-header {
+.navds-interal-header {
  display: flex;
  align-items: center;
  background: var(--navds-color-darkgray);
@@ -11,16 +11,16 @@
  min-height: 50px;
 }

-.navds-header__column {
+.navds-interal-header__column {
  display: flex;
  align-items: center;
 }

 /**************************
-  * .navds-header__title *
+  * .navds-interal-header__title *
  **************************/

-.navds-header__title {
+.navds-interal-header__title {
  padding: 0 var(--navds-spacing-6);
  border-right: 1px solid var(--navds-color-gray-40);
  display: flex;
@@ -31,21 +31,21 @@
  color: var(--navds-color-text-inverse);
 }

-.navds-header__title > span > a {
+.navds-interal-header__title > span > a {
  text-decoration: none;
  color: inherit;
 }

-.navds-header__title > span > a:focus {
+.navds-interal-header__title > span > a:focus {
  box-shadow: var(--navds-shadow-focus-on-dark);
  outline: none;
 }

 /**************************
-  * .navds-header__user *
+  * .navds-interal-header__user *
  **************************/

-.navds-header__user {
+.navds-interal-header__user {
  color: var(--navds-color-text-inverse);
  padding: 0 var(--navds-spacing-6);
  margin-left: auto;
@@ -55,6 +55,6 @@
  align-items: center;
 }

-.navds-header__name.navds-body-short {
+.navds-interal-header__name.navds-body-short {
  margin-right: var(--navds-spacing-4);
 }
@@ -0,0 +1,105 @@
+.navds-loader {
+  width: 1.5rem;
+  display: inline-block;
+  position: relative;
+  animation: loader-rotate 1.4s linear infinite;
+}
+
+.navds-loader__foreground {
+  animation: loader-dasharray 1.4s ease-in-out infinite;
+  stroke-dasharray: 80px, 200px;
+  stroke-dashoffset: 0;
+  stroke: var(--navds-color-gray-40);
+}
+
+.navds-loader__background {
+  stroke: var(--navds-color-gray-10);
+}
+
+.navds-loader--neutral .navds-loader__foreground {
+  stroke: var(--navds-color-gray-40);
+}
+
+.navds-loader--interaction .navds-loader__foreground {
+  stroke: var(--navds-color-blue-50);
+}
+
+.navds-loader--inverted .navds-loader__foreground {
+  stroke: white;
+}
+
+.navds-loader--inverted .navds-loader__background {
+  stroke: rgba(255, 255, 255, 0.3);
+}
+
+.navds-loader--transparent .navds-loader__background {
+  stroke: transparent;
+}
+
+.navds-loader--2xl {
+  width: 4rem;
+}
+
+.navds-loader--xl {
+  width: 2.5rem;
+}
+
+.navds-loader--l {
+  width: 2rem;
+}
+
+.navds-loader--m {
+  width: 1.5rem;
+}
+
+.navds-loader--s {
+  width: 1.25rem;
+}
+
+.navds-loader--xs {
+  width: 1rem;
+}
+
+/*
+ * Button spesific styling
+ */
+
+.navds-button .navds-loader .navds-loader__foreground {
+  stroke: currentColor;
+}
+
+.navds-button:hover .navds-loader .navds-loader__background {
+  stroke: rgba(255, 255, 255, 0.3);
+}
+
+.navds-button:active .navds-loader .navds-loader__background {
+  stroke: rgba(255, 255, 255, 0.3);
+}
+
+.navds-button--action .navds-loader .navds-loader__background,
+.navds-button--danger .navds-loader .navds-loader__background {
+  stroke: rgba(255, 255, 255, 0.3);
+}
+
+@keyframes loader-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes loader-dasharray {
+  0% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -15px;
+  }
+
+  100% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -120px;
+  }
+}
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "0.6.1",
+  "version": "0.6.14",
  "private": false,
  "description": "Css for NAV Designsystem components",
  "author": "NAV Designsystem team",
@@ -21,7 +21,7 @@
    "watch-css": "postcss -w --use postcss-import -o dist/index.css index.css"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^0.4.1",
+    "@navikt/ds-tokens": "^0.4.3",
    "normalize.css": "^8.0.1",
    "postcss": "^8.2.7",
    "postcss-cli": "^8.3.1",
@@ -0,0 +1,108 @@
+.navds-speechbubble {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  padding-left: 4rem;
+  position: relative;
+}
+
+.navds-speechbubble__illustration {
+  align-items: center;
+  background: var(--navds-color-gray-20);
+  color: var(--navds-color-darkgray);
+  border-radius: 50%;
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  order: 3;
+  overflow: hidden;
+  height: 3rem;
+  width: 3rem;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.navds-speechbubble--right {
+  align-items: flex-end;
+  padding-left: 0;
+  padding-right: 4rem;
+}
+
+.navds-speechbubble--right > .navds-speechbubble__illustration {
+  right: 0;
+  left: inherit;
+}
+
+.navds-speechbubble__illustration svg {
+  align-self: center;
+  height: 100%;
+  width: 100%;
+}
+
+.navds-speechbubble__bubble {
+  padding: 1rem;
+  box-shadow: 0 2px 4px 0 var(--navds-color-gray-20);
+  margin-bottom: 1rem;
+  min-height: 3rem;
+  width: fit-content;
+  max-width: 37.5rem;
+  min-width: 12rem;
+  background-color: var(--navds-color-gray-10);
+  border-radius: 2px;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+  border-end-end-radius: 12px;
+}
+
+.navds-speechbubble__bubble:focus {
+  box-shadow: var(--navds-shadow-focus);
+  outline: none;
+}
+
+.navds-speechbubble__bubble ~ .navds-speechbubble__bubble {
+  border-top-right-radius: 12px;
+  border-end-end-radius: 12px;
+  border-top-left-radius: 2px;
+  border-end-start-radius: 2px;
+}
+
+.navds-speechbubble--right .navds-speechbubble__bubble {
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+  border-end-end-radius: 2px;
+  border-end-start-radius: 12px;
+}
+
+.navds-speechbubble__bubble:last-child {
+  margin-bottom: 0;
+  border-top-right-radius: 12px;
+  border-end-end-radius: 12px;
+}
+
+.navds-speechbubble--right .navds-speechbubble__bubble:last-child {
+  border-end-end-radius: 2px;
+  border-end-start-radius: 12px;
+  border-start-start-radius: 12px;
+  border-top-right-radius: 12px;
+}
+
+.navds-speechbubble--right
+  .navds-speechbubble__bubble
+  ~ .navds-speechbubble__bubble {
+  border-top-left-radius: 12px;
+  border-end-start-radius: 12px;
+  border-top-right-radius: 2px;
+  border-end-end-radius: 2px;
+}
+
+.navds-speechbubble__top-text {
+  text-align: left;
+  margin-bottom: 0.5rem;
+  color: var(--navds-color-gray-60);
+  display: block;
+}
+
+.navds-speechbubble--right .navds-speechbubble__top-text {
+  text-align: right;
+}
@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/addon-docs/blocks";
+import { Meta } from "@storybook/addon-docs";

 <Meta title="ds-icons/Kom i gang" />

@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "0.6.1",
+  "version": "0.6.9",
  "private": false,
  "description": "NAV designsystem react components",
  "author": "NAV Designsystem team",
@@ -0,0 +1,14 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+import { AccordionAnchorMenu } from "../../index";
+import { Success } from "@navikt/ds-react";
+
+<Meta title="ds-react/accordion-anchor-menu/intro" />
+
+# AccordionAnchorMenu
+
+NOTE: Komponenten er ikke oppdatert og er veldig buggy. Ville ungått bruk av denne om mulig og bare brukt
+vanlig `AccordionMenu`. Hvorvidt vi kommer til å oppdatere denne og ta den med i 1.0 er usikkert.
+
+`AccordionAnchorMenu` er en meny-komponent som implementerer `AccordionMenu` med context
+for lytting på aktiv anchor/heading. Dette vil si at active-state settes automatisk.
+når man scroller forbi den relevante linken på siden.
@@ -32,6 +32,7 @@ const AccordionMenuCollapsable = forwardRef<
        {title}
        <Expand
          role="img"
+          focusable="false"
          aria-label={isOpen ? "Pil peker opp" : "Pil peker ned"}
          className="navds-accordion-menu-collapsable__expand-icon"
        />
@@ -0,0 +1,70 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+import {
+  AccordionMenu,
+  AccordionMenuItem,
+  AccordionMenuCollapsable,
+} from "../../index";
+
+<Meta title="ds-react/accordion-menu/intro" />
+
+# Hvordan ta i bruk Accordion-menu
+
+```jsx
+<AccordionMenu>
+  <AccordionMenuItem href="#leo">Leo</AccordionMenuItem>
+  <AccordionMenuCollapsable title="Proin">
+    <AccordionMenuItem href="#nulla" active>
+      Nulla
+    </AccordionMenuItem>
+    <AccordionMenuItem href="#luctus">Luctus</AccordionMenuItem>
+  </AccordionMenuCollapsable>
+  <AccordionMenuCollapsable title="Accumsan">
+    <AccordionMenuItem href="#justo" aria-current="page">
+      Justo
+    </AccordionMenuItem>
+    <AccordionMenuCollapsable title="Proin">
+      <AccordionMenuItem href="#nulla">Nulla</AccordionMenuItem>
+      <AccordionMenuItem href="#luctus">Luctus</AccordionMenuItem>
+    </AccordionMenuCollapsable>
+  </AccordionMenuCollapsable>
+</AccordionMenu>
+```
+
+<Canvas>
+  <AccordionMenu>
+    <AccordionMenuItem href="#leo">Leo</AccordionMenuItem>
+    <AccordionMenuCollapsable title="Proin">
+      <AccordionMenuItem href="#nulla" active>
+        Nulla
+      </AccordionMenuItem>
+      <AccordionMenuItem href="#luctus">Luctus</AccordionMenuItem>
+    </AccordionMenuCollapsable>
+    <AccordionMenuCollapsable title="Accumsan">
+      <AccordionMenuItem href="#justo" aria-current="page">
+        Justo
+      </AccordionMenuItem>
+      <AccordionMenuCollapsable title="Proin">
+        <AccordionMenuItem href="#nulla">Nulla</AccordionMenuItem>
+        <AccordionMenuItem href="#luctus">Luctus</AccordionMenuItem>
+      </AccordionMenuCollapsable>
+    </AccordionMenuCollapsable>
+  </AccordionMenu>
+</Canvas>
+
+Accordion-menu støtter opp til maks to-nivårer av `AccordionMenuCollapsable` akkurat nå.
+
+`AccordionMenuItem` er implementert med `OverridableComponent`, noe som
+gjør at man kan ta i bruk eks react-router slik:
+
+```jsx
+<Item
+  component={NavLink}
+  activeClassName="navds-accordion-menu-item--active"
+  to="/1"
+>
+  Lenketekst
+</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.
@@ -42,10 +42,10 @@ export const All = () => (
        <Item href="#luctus">Luctus</Item>
      </Collapsable>
      <Collapsable title="Accumsan">
-        <Item href="#justo" ariaCurrent="page">
+        <Item href="#justo" aria-current="page">
          Justo
        </Item>
-        <Item href="#pariatur" active ariaCurrent="page">
+        <Item href="#pariatur" active aria-current="page">
          Pariatur
        </Item>
        <Collapsable title="Proin">
@@ -1,7 +1,7 @@
 import React, { forwardRef, useEffect, useState } from "react";
 import cl from "classnames";
 import { UnmountClosed, Collapse } from "react-collapse";
-import { Expand } from "@navikt/ds-icons";
+import { Expand, ExpandFilled } from "@navikt/ds-icons";
 import { v4 as uuidv4 } from "uuid";

 export interface AccordionProps
@@ -88,11 +88,22 @@ const Accordion = forwardRef<HTMLButtonElement, AccordionProps>(
            {heading}
          </span>
          <Expand
+            focusable="false"
+            role="img"
            className={cl(
              "navds-accordion__chevron",
              `navds-accordion__chevron--${internalOpen ? "up" : "down"}`
            )}
          />
+          <ExpandFilled
+            focusable="false"
+            role="img"
+            className={cl(
+              "navds-accordion__chevron",
+              "navds-accordion__chevron--filled",
+              `navds-accordion__chevron--${internalOpen ? "up" : "down"}`
+            )}
+          />
        </button>
        <div id={contentId} role="region" aria-labelledby={buttonId}>
          <CollapseComponent isOpened={internalOpen}>
@@ -0,0 +1,33 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+import { Accordion } from "../../index";
+
+<Meta title="ds-react/accordion/intro" />
+
+# Hvordan ta i bruk Accordion
+
+```jsx
+<Accordion heading="Qui id id ad cupidatat ullamco.">
+  Et anim nostrud reprehenderit duis eu tempor et irure proident. Eu ea occaecat
+  aliqua commodo sunt. Sit cupidatat ad id occaecat exercitation ipsum laboris
+  duis velit consequat adipisicing do amet aute. Aliquip culpa minim commodo
+  laborum eiusmod eu magna elit veniam ullamco ullamco minim.
+</Accordion>
+```
+
+<Canvas>
+  <Accordion heading="Qui id id ad cupidatat ullamco.">
+    Et anim nostrud reprehenderit duis eu tempor et irure proident. Eu ea
+    occaecat aliqua commodo sunt. Sit cupidatat ad id occaecat exercitation
+    ipsum laboris duis velit consequat adipisicing do amet aute. Aliquip culpa
+    minim commodo laborum eiusmod eu magna elit veniam ullamco ullamco minim.
+  </Accordion>
+</Canvas>
+
+Accordion-komponeten styrer selv open/closed state, men om man ønsker kan man selv overskrive denne med
+`open`-prop + `onClick`-prop.
+
+Note: Hvis man tar i bruk `onClick`, så tolker komponeten det slik at du ønsker å styre state selv, så
+man må da også bruke `open`-prop
+
+`renderContentWhenClosed`-prop bestemmer om innholdet (children) skal beholdes i dom-strukturen mens
+Accordion er lukket. Defaulter til `false`.
@@ -30,13 +30,37 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
 const Icon = ({ variant }) => {
  switch (variant) {
    case "error":
-      return <ErrorFilled />;
+      return (
+        <ErrorFilled
+          aria-label={`${variant}-ikon`}
+          focusable="false"
+          role="img"
+        />
+      );
    case "warning":
-      return <WarningFilled />;
+      return (
+        <WarningFilled
+          aria-label={`${variant}-ikon`}
+          focusable="false"
+          role="img"
+        />
+      );
    case "info":
-      return <InformationFilled />;
+      return (
+        <InformationFilled
+          aria-label={`${variant}-ikon`}
+          focusable="false"
+          role="img"
+        />
+      );
    case "success":
-      return <SuccessFilled />;
+      return (
+        <SuccessFilled
+          aria-label={`${variant}-ikon`}
+          focusable="false"
+          role="img"
+        />
+      );
    default:
      return null;
  }
@@ -52,12 +76,15 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(
        `navds-alert--${variant}`,
        `navds-alert--${size}`,
        "navds-body-long",
-        "navds-body--s"
+        { "navds-body--s": size === "s" }
      )}
      {...rest}
    >
-      <Icon variant={variant} />
-      <span>{children}</span>
+      <span>
+        <span className="sr-only">{`${variant}-ikon`}</span>
+        <Icon variant={variant} />
+      </span>
+      <div>{children}</div>
    </div>
  )
 );
@@ -0,0 +1,55 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+import { Alert } 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 min-height og small 32px min-height
+
+<Canvas>
+  <Alert size="s" variant="info">
+    Id elit esse enim reprehenderit.
+  </Alert>
+  <Alert size="s" variant="success">
+    Id elit esse enim reprehenderit.
+  </Alert>
+  <Alert size="s" variant="warning">
+    Id elit esse enim reprehenderit.
+  </Alert>
+  <Alert size="s" variant="error">
+    Id elit esse enim reprehenderit.
+  </Alert>
+</Canvas>
@@ -19,14 +19,19 @@ export const All = () => {
      <h1>Alert</h1>
      {variants.map((variant) => (
        <Alert key={variant} variant={variant}>
-          {Array(8).fill(`${variant} content`).join(" ")}
+          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>
      ))}
      <h2>Small</h2>
      <div>
        {variants.map((variant) => (
          <Alert key={variant} variant={variant} size="s">
-            {Array(8).fill(`${variant} content`).join(" ")}
+            Exercitation enim nisi veniam nostrud Lorem ipsum ea fugiat. Aute
+            exercitation voluptate proident sit ex reprehenderit quis ex ut
+            mollit.
          </Alert>
        ))}
      </div>
@@ -36,7 +36,8 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
        "navds-button",
        `navds-button--${variant}`,
        `navds-button--${size}`,
-        "navds-body-short"
+        "navds-body-short",
+        { "navds-body--s": size === "s" }
      )}
      {...rest}
    />
@@ -0,0 +1,65 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+import { Button, Loader } from "../../index";
+import { Success } from "@navikt/ds-react";
+
+<Meta title="ds-react/button/intro" />
+
+# Hvordan ta i bruk Button
+
+```jsx
+<Button>Buttontekst</Button>
+```
+
+<Canvas>
+  <Button>Buttontekst</Button>
+</Canvas>
+
+## Varianter
+
+`variants`-prop kan brukes for å endre utseende mellom
+`primary`, `secondary`, `action` og `danger`
+
+<Canvas>
+  <Button variant="primary">Buttontekst</Button>
+  <Button variant="secondary">Buttontekst</Button>
+  <Button variant="action">Buttontekst</Button>
+  <Button variant="danger">Buttontekst</Button>
+</Canvas>
+
+## Sizing
+
+Button har to størrelser: Default 48px min-height og small 32px min-height
+
+<Canvas>
+  <Button size="s" variant="primary">
+    Buttontekst
+  </Button>
+  <Button size="s" variant="secondary">
+    Buttontekst
+  </Button>
+  <Button size="s" variant="action">
+    Buttontekst
+  </Button>
+  <Button size="s" variant="danger">
+    Buttontekst
+  </Button>
+</Canvas>
+
+## Med ikon eller `<Loader />`
+
+Hvis man setter ikoner (svg) eller `<Loader />` rett på button vil størrelsen
+bli justert automatisk. For å få riktige marginer rundt ikonet må man da wrappe innholdet
+i et element
+
+<Canvas>
+  <Button>
+    <span>Buttontekst</span> <Loader />
+  </Button>
+  <Button size="s">
+    <span>Buttontekst</span>
+    <Loader />
+  </Button>
+  <Button>
+    <Loader /> <span>Buttontekst</span>
+  </Button>
+</Canvas>
@@ -1,5 +1,6 @@
 import React from "react";
 import { Button } from "../index";
+import { Success } from "@navikt/ds-icons";

 export default {
  title: "ds-react/button",
@@ -52,7 +53,7 @@ export const All = () => {
        {variants.map((variant) => (
          <a
            key={variant}
-            className={`navds-button navds-button--${variant}`}
+            className={`navds-button navds-button--${variant} navds-body-short`}
            href="the-link"
          >
            {variant}
@@ -67,6 +68,30 @@ export const All = () => {
          </Button>
        ))}
      </Section>
+      <h2>Button w/icon</h2>
+      <Section>
+        {variants.map((variant) => (
+          <Button key={variant} variant={variant}>
+            <span>{variant}</span> <Success />
+          </Button>
+        ))}
+      </Section>
+      <h2>Small w/icon</h2>
+      <Section>
+        {variants.map((variant) => (
+          <Button key={variant} variant={variant} size="s">
+            <Success /> <span>{variant}</span>
+          </Button>
+        ))}
+      </Section>
+      <Section>
+        {variants.map((variant) => (
+          <Button key={variant} variant={variant} size="s">
+            <span className="sr-only">Success ikon</span>
+            <Success />
+          </Button>
+        ))}
+      </Section>
    </>
  );
 };
@@ -0,0 +1,34 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+import { OverridableComponent } from "../util";
+
+export interface MicroCardProps {
+  props: {
+    children: string;
+    /**
+     * @ignore
+     */
+    className?: string;
+  } & React.HTMLAttributes<HTMLAnchorElement>;
+  defaultComponent: "a";
+}
+
+export const MicroCard: OverridableComponent<MicroCardProps> = forwardRef(
+  ({ className, component: Component = "a", children, ...rest }, ref) => (
+    <Component
+      ref={ref}
+      className={cl(
+        "navds-card__micro",
+        "navds-detail",
+        "navds-detail--s",
+        className
+      )}
+      title={children}
+      {...rest}
+    >
+      {children}
+    </Component>
+  )
+);
+
+export default MicroCard;
@@ -0,0 +1,2 @@
+export { default as MicroCard } from "./MicroCard";
+export * from "./MicroCard";
@@ -0,0 +1,26 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+import { MicroCard } from "../index.ts";
+
+<Meta title="ds-react/card/intro" />
+
+# Hvordan ta i bruk card
+
+## MicroCard
+
+Kan brukes som en vanlig lenke direkte:
+
+```
+<MicroCard href="/lenke/til/side">Lenketekst</MicroCard>
+```
+
+<Canvas>
+  <MicroCard href="/lenke/til/side">Lenketekst</MicroCard>
+</Canvas>
+
+Hvis man ønsker å ta i bruk nextjs sin `Link`-komponent:
+
+```jsx
+<Link href="/lenke/til/side" passHref>
+  <MicroCard>Lenketekst</MicroCard>
+</Link>
+```
@@ -0,0 +1,16 @@
+import React from "react";
+import { MicroCard } from "../index";
+import { Meta } from "@storybook/react/types-6-0";
+export default {
+  title: "ds-react/card",
+  component: MicroCard,
+} as Meta;
+
+export const All = () => {
+  return (
+    <div>
+      <h2>MicroCard</h2>
+      <MicroCard href="#">Sit laborum aliqua.</MicroCard>
+    </div>
+  );
+};
@@ -0,0 +1,31 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+
+<Meta title="ds-react/content-container/intro" />
+
+# Hvordan ta i bruk ContentContainer
+
+```jsx
+<ContentContainer>
+  <div>innhold...</div>
+</ContentContainer>
+```
+
+## Bruk
+
+Komponenten fungerer som en wrapper rundt innholdet ditt på siden for å
+justere padding og max-width. Dette er all stylingen som blir applied
+
+```css
+.navds-content-container {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: var(--navds-content-container-max-width);
+  padding: var(--navds-content-container-padding-small);
+}
+
+@media (min-width: 448px) {
+  .navds-content-container {
+    padding: var(--navds-content-container-padding-medium-and-larger);
+  }
+}
+```
@@ -61,7 +61,15 @@ const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
          onClick={handleClick}
          {...rest}
        >
-          {icon ? <>{icon}</> : <Copy aria-label="Fil ikon for kopiering" />}
+          {icon ? (
+            <>{icon}</>
+          ) : (
+            <Copy
+              focusable="false"
+              role="img"
+              aria-label="Fil ikon for kopiering"
+            />
+          )}
          {children ? children : <span className="sr-only">{title}</span>}
        </Button>
        <Popover
@@ -9,7 +9,7 @@ export default {
 };

 export const All = () => {
-  const label = "pi";
+  const label = "Kopierte PI til clipboard";

  const text = "3.14159265359";
  return (
@@ -0,0 +1,35 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+import { CopyToClipboard } from "../../index";
+import { Success } from "@navikt/ds-react";
+
+<Meta title="ds-react/copy-to-clipboard/intro" />
+
+# Hvordan ta i bruk CopyToClipboard
+
+Innholdet i `text` vil da bli kopiert til clipboard, mens innholdet i `label`
+brukes i popovertekst og `sr-only` span som rendres hvis knappen ikke har noe tekstinnhold
+`sr-only` tekst blir da `Kopier ${label} (${text})`
+
+```jsx
+<CopyToClipboard label={"Kopierte PI til clipboard"} text={"3.14"}>
+  Kopier Pi{" "}
+</CopyToClipboard>
+```
+
+<Canvas>
+  <CopyToClipboard label={"Kopierte PI til clipboard"} text={"3.14"}>
+    Kopier Pi{" "}
+  </CopyToClipboard>
+</Canvas>
+
+## Custom ikon
+
+Man kan sette andre ikoner en `Copy` ved `icon`-proppen
+
+```jsx
+<CopyToClipboard
+  icon={<Link />}
+  label={"Kopierte PI til clipboard"}
+  text={"3.14"}
+/>
+```
@@ -0,0 +1,60 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+import { Grid, Cell, ContentContainer } from "../../index";
+
+<Meta title="ds-react/grid/intro" />
+
+# Hvordan ta i bruk Grid
+
+`<ContentContainer />` er ikke nødvendig her, men er laget for tas i bruk i grid.
+
+```jsx
+<ContentContainer>
+  <Grid>
+    <Cell xs={12} sm={6} lg={4}>
+      Kolonne
+    </Cell>
+    <Cell xs={12} sm={6} lg={4}>
+      Kolonne
+    </Cell>
+    <Cell xs={12} sm={12} lg={4}>
+      Kolonne
+    </Cell>
+  </Grid>
+</ContentContainer>
+```
+
+## Bredder
+
+Bredden til hver `Cell` bestemmes av propsene `lg`, `md`, `sm`og `xs`
+som respektivt styrer disse breakpointene
+
+```jsx
+type Column = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+/**
+* Cell columns on width < 448px
+*/
+xs: Column;
+
+/**
+* Cell columns on min-width: 448
+*/
+sm?: Column;
+
+/**
+* Cell columns on min-width: 648
+*/
+md?: Column;
+
+/**
+* Cell columns on min-width: 960px
+*/
+lg?: Column;
+```
+
+Eks `xs={12} lg={4}` vil da si at `Cell` tar opp
+4/12 av griddet når `width > 960px` og 12/12 av griddet
+når skjermen er `width < 448px`
+
+Griddet er dynamiskt, noe som vil si at griddet alltids består av 12 columns
+selv om skjermen er 1920px eller 400px.
@@ -0,0 +1,73 @@
+import React, { forwardRef, HTMLAttributes } from "react";
+import cl from "classnames";
+
+export interface HeaderProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Header title
+   */
+  children: string;
+  /**
+   * @ignore
+   */
+  className?: string;
+  /**
+   * Pictogram placed in header
+   */
+  illustration?: React.ReactNode;
+  /**
+   * Short text placed under title
+   */
+  description?: string;
+  /**
+   * Decides how to align content
+   * @default "left"
+   */
+  variant?: "left" | "center";
+  /**
+   * Predefined theming for header
+   * @default "guide"
+   */
+  theme?: "situation" | "product" | "guide";
+}
+
+const Header = forwardRef<HTMLDivElement, HeaderProps>(
+  (
+    {
+      children,
+      className,
+      illustration,
+      description,
+      theme = "guide",
+      variant = "left",
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cl(
+          "navds-header",
+          className,
+          `navds-header--${theme}`,
+          `navds-header--${variant}`
+        )}
+        {...rest}
+      >
+        {illustration && (
+          <div className="navds-header__illustration">{illustration}</div>
+        )}
+        <div className="navds-header__wrapper">
+          <h1 className="navds-header__title navds-title navds-title--2xl">
+            {children}
+          </h1>
+          {description && (
+            <p className="navds-body-short navds-body--s">{description}</p>
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+
+export default Header;
@@ -0,0 +1,2 @@
+export { default as Header } from "./Header";
+export * from "./Header";
@@ -0,0 +1,74 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+import { Header } from "../../index";
+import { illustrationPictogram } from "./pictogram";
+
+<Meta title="ds-react/header/intro" />
+
+# Hvordan ta i bruk Header
+
+Denne header-komponenten er utviklet i sammenheng med nye produktsider på NAV og
+vil sannsynligvis forgå en del endringer før de er ferdige.
+
+```jsx
+<Header description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE.">
+  AUTE OFFICIA SINT SUNT FUGIAT
+</Header>
+```
+
+<Canvas>
+  <Header description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE.">
+    AUTE OFFICIA SINT SUNT FUGIAT
+  </Header>
+</Canvas>
+
+## Med illustrasjon
+
+Illustrasjonene brukt i header er "Pictogram" som er designet for den sepsifikke siden og
+man skal da ikke bare velge et fra figma vilkårlig.
+
+<Canvas>
+  <Header
+    illustration={illustrationPictogram}
+    description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
+  >
+    AUTE OFFICIA SINT SUNT FUGIAT
+  </Header>
+</Canvas>
+
+## Temaer
+
+Headeren kommer i tre tema: `guide`, `product` og `situation`
+
+<Canvas>
+  <Header
+    description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
+    theme="guide"
+  >
+    AUTE OFFICIA SINT SUNT FUGIAT
+  </Header>
+  <Header
+    description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
+    theme="product"
+  >
+    AUTE OFFICIA SINT SUNT FUGIAT
+  </Header>
+  <Header
+    description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
+    theme="situation"
+  >
+    AUTE OFFICIA SINT SUNT FUGIAT
+  </Header>
+</Canvas>
+
+## Sentrert
+
+Innhold kan sentreres med `variant="center"`-prop
+
+<Canvas>
+  <Header
+    description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
+    variant="center"
+  >
+    AUTE OFFICIA SINT SUNT FUGIAT
+  </Header>
+</Canvas>
@@ -0,0 +1,61 @@
+import React from "react";
+import { Header } from "../index";
+import { Meta } from "@storybook/react/types-6-0";
+import { illustrationPictogram } from "./pictogram";
+export default {
+  title: "ds-react/header",
+  component: Header,
+} as Meta;
+
+export const All = () => {
+  return (
+    <div>
+      <h2>Header</h2>
+      <Header description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE.">
+        AUTE OFFICIA SINT SUNT FUGIAT
+      </Header>
+      <br />
+      <h2>Header m/illustration</h2>
+      <Header
+        illustration={illustrationPictogram}
+        description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
+      >
+        AUTE OFFICIA SINT SUNT FUGIAT
+      </Header>
+      <h2>Header center</h2>
+      <Header
+        description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
+        variant="center"
+      >
+        AUTE OFFICIA SINT SUNT FUGIAT
+      </Header>
+      <h2>Header center m/illustration</h2>
+      <Header
+        illustration={illustrationPictogram}
+        description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
+        variant="center"
+      >
+        AUTE OFFICIA SINT SUNT FUGIAT
+      </Header>
+      <h2>Header variants</h2>
+      <Header
+        description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
+        theme="guide"
+      >
+        AUTE OFFICIA SINT SUNT FUGIAT
+      </Header>
+      <Header
+        description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
+        theme="product"
+      >
+        AUTE OFFICIA SINT SUNT FUGIAT
+      </Header>
+      <Header
+        description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
+        theme="situation"
+      >
+        AUTE OFFICIA SINT SUNT FUGIAT
+      </Header>
+    </div>
+  );
+};
@@ -0,0 +1,14 @@
+import React from "react";
+/* prettier-ignore */
+export const illustrationPictogram = <svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M37.6697 60.6469L9 31.9772L30.9772 10L59.6469 38.6697L72.1116 26.205L81 82L25.205 73.1116L37.6697 60.6469Z" fill="#FFECCC"/>
+<path d="M94.5 64.0584C94.5 72.104 88.003 78.6169 80 78.6169C71.997 78.6169 65.5 72.104 65.5 64.0584C65.5 56.0129 71.997 49.5 80 49.5C88.003 49.5 94.5 56.0129 94.5 64.0584Z" stroke="#262626" stroke-width="3"/>
+<path d="M91.9999 95.9999V95.9999C91.9999 89.3725 86.6274 83.9561 79.9999 83.9561V83.9561C73.3725 83.9561 67.9999 89.3725 67.9999 95.9999V95.9999" stroke="#262626" stroke-width="3"/>
+<ellipse cx="76.0001" cy="63.5566" rx="2" ry="2.00731" fill="#262626"/>
+<ellipse cx="84" cy="63.5566" rx="2" ry="2.00731" fill="#262626"/>
+<path d="M29 29.488V30C29 25.0515 25.866 22 22 22C18.134 22 15 25.0515 15 30V29.488" stroke="#262626" stroke-width="3"/>
+<circle cx="22" cy="15" r="5.5" stroke="#262626" stroke-width="3"/>
+<rect x="1.5" y="1.5" width="41" height="56" stroke="#262626" stroke-width="3"/>
+<path d="M10 37H27" stroke="#262626" stroke-width="3"/>
+<path d="M10 47H18.5" stroke="#262626" stroke-width="3"/>
+</svg>
@@ -11,6 +11,12 @@ export {
 export { Accordion, AccordionProps } from "./accordion/index";
 export { Alert, AlertProps } from "./alert/index";
 export { Button, ButtonProps } from "./button/index";
+export {
+  SpeechBubble,
+  SpeechBubbleProps,
+  Bubble,
+  BubbleProps,
+} from "./speech-bubble/index";
 export {
  ContentContainer,
  ContentContainerProps,
@@ -25,6 +31,7 @@ export {
  InternalHeaderUser,
  InternalHeaderUserProps,
 } from "./internal-header/index";
+export { Header, HeaderProps } from "./header/index";
 export {
  ProductPageLayout,
  ProductPagePanel,
@@ -36,6 +43,8 @@ export { Popover, PopoverProps } from "./popover/index";
 export { Tag, TagProps } from "./tag/index";
 export { LinkPanel, LinkPanelProps, LinkPanelTitle } from "./link-panel/index";
 export { Panel, PanelProps } from "./panel/index";
+export { MicroCard, MicroCardProps } from "./card/index";
+export { Loader, LoaderProps } from "./loader/index";
 export {
  Title,
  Ingress,
@@ -14,7 +14,11 @@ export interface InternalHeaderProps extends HTMLAttributes<HTMLElement> {

 const InternalHeader = forwardRef<HTMLElement, InternalHeaderProps>(
  ({ children, className, ...rest }, ref) => (
-    <header ref={ref} className={cl("navds-header", className)} {...rest}>
+    <header
+      ref={ref}
+      className={cl("navds-interal-header", className)}
+      {...rest}
+    >
      {children}
    </header>
  )
@@ -22,7 +22,7 @@ const InternalHeaderTitle = forwardRef<HTMLElement, InternalHeaderTitleProps>(
    createElement(element, {
      ...rest,
      ref,
-      className: cl("navds-header__title", "navds-label", className),
+      className: cl("navds-interal-header__title", "navds-label", className),
      children: <span>{children}</span>,
    })
 );
@@ -19,8 +19,12 @@ export interface InternalHeaderUserProps

 const InternalHeaderUser = forwardRef<HTMLDivElement, InternalHeaderUserProps>(
  ({ className, name, ident, ...rest }, ref) => (
-    <div ref={ref} className={cl("navds-header__user", className)} {...rest}>
-      <span className="navds-header__name navds-body-short navds-body--s">
+    <div
+      ref={ref}
+      className={cl("navds-interal-header__user", className)}
+      {...rest}
+    >
+      <span className="navds-interal-header__name navds-body-short navds-body--s">
        {name}
      </span>
      <span className="navds-detail navds-detail--s">{ident}</span>
@@ -0,0 +1,71 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+import {
+  InternalHeader,
+  InternalHeaderTitle,
+  InternalHeaderUser,
+} from "../../index.ts";
+
+<Meta title="ds-react/internal-header/intro" />
+
+# Hvordan ta i bruk InternalHeader
+
+Denne header-komponenten vil forgå en del endringer og er for det meste nå
+bare en enkel wrapper med lit enkel styling. Bruk på egen risiko
+
+```jsx
+<InternalHeader>
+  <InternalHeaderTitle>NAV Internside</InternalHeaderTitle>
+  <InternalHeaderUser name="Ola Normann" ident="D123456" />
+</InternalHeader>
+```
+
+<Canvas>
+  <InternalHeader>
+    <InternalHeaderTitle>NAV Internside</InternalHeaderTitle>
+    <InternalHeaderUser name="Ola Normann" ident="D123456" />
+  </InternalHeader>
+</Canvas>
+
+## Uten innhold (wrapper)
+
+```jsx
+<InternalHeader></InternalHeader>
+```
+
+<Canvas>
+  <InternalHeader />
+</Canvas>
+
+## Tittel, men ikke heading (h-element)
+
+```jsx
+<InternalHeader>
+  <InternalHeaderTitle element="span">NAV Internside</InternalHeaderTitle>
+</InternalHeader>
+```
+
+<Canvas>
+  <InternalHeader>
+    <InternalHeaderTitle element="span">NAV Internside</InternalHeaderTitle>
+  </InternalHeader>
+</Canvas>
+
+## Heading med link
+
+Focus-stylingen her er bare placeholder for nå
+
+```jsx
+<InternalHeader>
+  <InternalHeaderTitle>
+    <a href="/#">NAV Internside med lenke</a>
+  </InternalHeaderTitle>
+</InternalHeader>
+```
+
+<Canvas>
+  <InternalHeader>
+    <InternalHeaderTitle>
+      <a href="/#">NAV Internside med lenke</a>
+    </InternalHeaderTitle>
+  </InternalHeader>
+</Canvas>
@@ -0,0 +1,8 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+
+<Meta title="ds-react/layouts/intro" />
+
+# Layouts
+
+Komponenten og storybook-stories her er utdaterte og anbefales ikke å bruke, før
+react-pakken er publisert så kommer disse til å forgå store endringer og evt fjernes fra pakken.
@@ -0,0 +1,125 @@
+import React from "react";
+export const Illustration = (
+  <>
+    <svg xmlns="http://www.w3.org/2000/svg" width="110" height="110">
+      <defs>
+        <path id="a" d="M.686.654h4.399v5.852H.686z"></path>
+      </defs>
+      <g fill="none" fillRule="evenodd">
+        <path fill="transparent" d="M-287-1518H993V543H-287z"></path>
+        <rect
+          width="796"
+          height="181"
+          fill="transparent"
+          rx="8"
+          transform="translate(-45 -36)"
+        ></rect>
+        <circle cx="55" cy="55" r="55" fill="#CCDEE6"></circle>
+        <g fill="#D8D8D8">
+          <path
+            fill="#337C9B"
+            d="M32.034 5.834l-11.606 3.11-9.517 2.55-4.637 1.242 1.284 4.794 9.069 33.843 1.284 4.795 4.637-1.243 9.518-2.55 11.605-3.11c2.561-.686 4.063-3.389 3.353-6.037L37.956 9.385c-.71-2.648-3.361-4.238-5.922-3.551"
+          ></path>
+          <path
+            fill="#38363A"
+            d="M38.322 51.833l1.77-.474-12.12-45.233-1.77.474z"
+          ></path>
+          <path
+            fill="#CE2128"
+            d="M26.593 57.996l-1.179-.613-.713 1.12-.93-3.47 1.892-.507z"
+          ></path>
+        </g>
+        <path
+          fill="#FFF"
+          d="M61.773 69.14l8.95 38.112a2.524 2.524 0 0 0 3.036 1.881l32.913-7.745a2.528 2.528 0 0 0 1.88-3.04L98.279 54.591a2.526 2.526 0 0 0-3.037-1.883L68.425 59.02l-6.652 10.12z"
+        ></path>
+        <path
+          fill="#C0C0BE"
+          d="M68.425 59.02l1.326 5.645a2.527 2.527 0 0 1-1.88 3.038l-6.098 1.436 6.652-10.12z"
+        ></path>
+        <path
+          stroke="#8E9294"
+          strokeLinecap="round"
+          strokeWidth="2.152"
+          d="M68.902 74.197l11.982-2.82m-10.721 8.19l24.874-5.853M71.424 84.937l24.873-5.853"
+        ></path>
+        <path
+          stroke="#8E9294"
+          strokeLinecap="round"
+          strokeWidth="2.264"
+          d="M72.685 90.307l24.873-5.854M73.857 95.297l24.873-5.853M75.021 100.7l24.874-5.853"
+        ></path>
+        <path
+          fill="#CCDEE6"
+          d="M21.698 86.68c-5.726-3.643-7.42-11.243-3.78-16.976 3.64-5.733 11.231-7.427 16.958-3.784 5.727 3.643 7.42 11.243 3.78 16.976-3.639 5.733-11.231 7.427-16.958 3.784z"
+        ></path>
+        <path
+          fill="#C42B34"
+          d="M9.283 106.905a2.772 2.772 0 0 1-.851-3.823l8.759-13.798a2.765 2.765 0 0 1 3.817-.852 2.77 2.77 0 0 1 .851 3.822l-8.758 13.799a2.764 2.764 0 0 1-3.818.852"
+        ></path>
+        <path
+          fill="#2E3137"
+          d="M19.032 90.912c-.86-.547-1.348-1.318-.801-2.179l1.826-2.877a1.841 1.841 0 0 1 2.546-.567 1.847 1.847 0 0 1 .566 2.547l-1.826 2.878c-.547.86-1.452.744-2.31.198"
+        ></path>
+        <path
+          fill="#D84B55"
+          d="M16.41 91l-8.266 13.021a.925.925 0 0 0 .283 1.275.92.92 0 0 0 1.272-.284l7.912-12.463c-.713-.47-1.083-1.039-1.2-1.549"
+        ></path>
+        <path
+          fill="#2E3137"
+          d="M27.811 87.523a11.115 11.115 0 0 1-1.117-.196 11.283 11.283 0 0 1-3.577-1.48c-5.295-3.369-6.866-10.423-3.502-15.723 3.366-5.301 10.412-6.874 15.709-3.504 5.296 3.368 6.866 10.422 3.5 15.723a11.317 11.317 0 0 1-2.86 3.053 11.4 11.4 0 0 1-4.72 2.029c-1.127.203-2.284.24-3.433.098m12.57-4.19c3.911-6.16 2.085-14.358-4.069-18.271-6.154-3.915-14.342-2.089-18.253 4.072-3.91 6.16-2.085 14.356 4.07 18.271 6.153 3.915 14.343 2.09 18.252-4.072"
+        ></path>
+        <path
+          fill="#FFD399"
+          d="M93.445 12.554c2.45 5.367.088 11.707-5.274 14.159-5.361 2.452-11.695.088-14.145-5.279-2.449-5.368-.088-11.707 5.275-14.16 5.361-2.452 11.695-.088 14.144 5.28"
+        ></path>
+        <path
+          fill="#FFD399"
+          d="M91.45 28.239l-4.274 1.954a2.697 2.697 0 0 1-3.574-1.334l-2.775-6.08a2.7 2.7 0 0 1 1.333-3.578l4.274-1.955a2.696 2.696 0 0 1 3.575 1.334l2.775 6.08a2.702 2.702 0 0 1-1.333 3.579"
+        ></path>
+        <path
+          fill="#5A5C5D"
+          d="M94.1 30.6l-6.9 3.156a1.255 1.255 0 0 1-1.043-2.284l6.902-3.155a1.253 1.253 0 1 1 1.04 2.282m1.275 2.794l-6.9 3.156a1.254 1.254 0 1 1-1.041-2.283l6.9-3.156a1.254 1.254 0 0 1 1.041 2.283m-1.682 1.387l-3.044 1.392c-.458.21-.4.889.09 1.006.685.164 1.425.11 2.115-.207a3.25 3.25 0 0 0 1.54-1.464c.233-.449-.241-.936-.701-.727"
+        ></path>
+        <g transform="rotate(-69 92.268 -44.056)">
+          <mask id="b" fill="#fff">
+            <use xlinkHref="#a"></use>
+          </mask>
+          <path
+            fill="#C42B34"
+            d="M.732 4.08l.397-1.844a1.999 1.999 0 1 1 3.91.842l-.396 1.846A2 2 0 1 1 .732 4.08"
+            mask="url(#b)"
+          ></path>
+        </g>
+        <path
+          fill="#E1CFB4"
+          d="M86.458 79.011l-1.334 7.43 6.268-4.21-2.12-2.355z"
+        ></path>
+        <path
+          fill="#FECB86"
+          d="M103.266 56.87l-1.644-1.073-14.841 22.72 1.643 1.072z"
+        ></path>
+        <path
+          fill="#FAA736"
+          d="M104.912 57.945l-1.644-1.074-14.841 22.72 1.644 1.073z"
+        ></path>
+        <path
+          fill="#FECB86"
+          d="M90.071 80.664l1.644 1.072 14.842-22.72-1.645-1.072zm-3.306-.951c.31.203.774-.055 1.188.215a.513.513 0 0 1 .152.15l.32-.488-1.644-1.073-.297.453s-.028.542.281.743"
+        ></path>
+        <path
+          fill="#FAA736"
+          d="M88.106 80.078c.205.277.111.67.548.956.44.286.764.042 1.098.118l.32-.488-1.648-1.075-.318.489z"
+        ></path>
+        <path
+          fill="#FECB86"
+          d="M89.752 81.152a.507.507 0 0 1 .198.08c.414.27.365.797.675 1 .311.204.794-.041.794-.041l.296-.454-1.644-1.073-.32.488z"
+        ></path>
+        <path
+          fill="#535756"
+          d="M85.123 86.44l2.22-1.488-1.749-1.14zm21.434-27.423l-4.935-3.22.437-.67 4.935 3.22z"
+        ></path>
+      </g>
+    </svg>
+  </>
+);
@@ -0,0 +1,81 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+import { LinkPanel, LinkPanelTitle } from "../../index";
+import { Success } from "@navikt/ds-react";
+import { Illustration } from "./illustration";
+
+<Meta title="ds-react/linkPanel/intro" />
+
+# Hvordan ta i bruk LinkPanel
+
+Komponenten fungerer relativt likt son `nav-frontend-lenkepanel`
+
+```jsx
+<LinkPanel href="#">Dette er en tekstlenke</LinkPanel>
+```
+
+<Canvas>
+  <LinkPanel href="#">Dette er en tekstlenke</LinkPanel>
+</Canvas>
+
+## Uten border
+
+```jsx
+<LinkPanel href="#" border={false}>
+  Dette er en tekstlenke
+</LinkPanel>
+```
+
+<Canvas>
+  <LinkPanel href="#" border={false}>
+    Dette er en tekstlenke
+  </LinkPanel>
+</Canvas>
+
+## Custom styling
+
+Kan her ta i bruk `<LinkPanelTitle />` for å få riktig styling på lenke-tittel.
+
+```jsx
+<LinkPanel href="#" style={{ textDecoration: "none" }}>
+  <div
+    style={{
+      padding: "1rem",
+      display: "grid",
+      gridAutoFlow: "column",
+      gap: "2rem",
+      alignItems: "center",
+    }}
+  >
+    {Illustration}
+    <div>
+      <LinkPanelTitle>Dagpenger</LinkPanelTitle>
+      <p>
+        Du kan få dagpenger når du er arbeidsledig og har mistet inntekten din.
+      </p>
+    </div>
+  </div>
+</LinkPanel>
+```
+
+<Canvas>
+  <LinkPanel href="#" style={{ textDecoration: "none" }}>
+    <div
+      style={{
+        padding: "1rem",
+        display: "grid",
+        gridAutoFlow: "column",
+        gap: "2rem",
+        alignItems: "center",
+      }}
+    >
+      {Illustration}
+      <div>
+        <LinkPanelTitle>Dagpenger</LinkPanelTitle>
+        <p>
+          Du kan få dagpenger når du er arbeidsledig og har mistet inntekten
+          din.
+        </p>
+      </div>
+    </div>
+  </LinkPanel>
+</Canvas>
@@ -1,5 +1,6 @@
 import React from "react";
 import { LinkPanel, LinkPanelTitle } from "../index";
+import { Illustration } from "./illustration";

 export default {
  title: "ds-react/linkPanel",
@@ -28,7 +29,7 @@ export const All = () => {
            alignItems: "center",
          }}
        >
-          <Illustration />
+          {Illustration}
          <div>
            <LinkPanelTitle>Dagpenger</LinkPanelTitle>
            <p>
@@ -41,126 +42,3 @@ export const All = () => {
    </>
  );
 };
-
-const Illustration = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="110" height="110">
-    <defs>
-      <path id="a" d="M.686.654h4.399v5.852H.686z"></path>
-    </defs>
-    <g fill="none" fillRule="evenodd">
-      <path fill="transparent" d="M-287-1518H993V543H-287z"></path>
-      <rect
-        width="796"
-        height="181"
-        fill="transparent"
-        rx="8"
-        transform="translate(-45 -36)"
-      ></rect>
-      <circle cx="55" cy="55" r="55" fill="#CCDEE6"></circle>
-      <g fill="#D8D8D8">
-        <path
-          fill="#337C9B"
-          d="M32.034 5.834l-11.606 3.11-9.517 2.55-4.637 1.242 1.284 4.794 9.069 33.843 1.284 4.795 4.637-1.243 9.518-2.55 11.605-3.11c2.561-.686 4.063-3.389 3.353-6.037L37.956 9.385c-.71-2.648-3.361-4.238-5.922-3.551"
-        ></path>
-        <path
-          fill="#38363A"
-          d="M38.322 51.833l1.77-.474-12.12-45.233-1.77.474z"
-        ></path>
-        <path
-          fill="#CE2128"
-          d="M26.593 57.996l-1.179-.613-.713 1.12-.93-3.47 1.892-.507z"
-        ></path>
-      </g>
-      <path
-        fill="#FFF"
-        d="M61.773 69.14l8.95 38.112a2.524 2.524 0 0 0 3.036 1.881l32.913-7.745a2.528 2.528 0 0 0 1.88-3.04L98.279 54.591a2.526 2.526 0 0 0-3.037-1.883L68.425 59.02l-6.652 10.12z"
-      ></path>
-      <path
-        fill="#C0C0BE"
-        d="M68.425 59.02l1.326 5.645a2.527 2.527 0 0 1-1.88 3.038l-6.098 1.436 6.652-10.12z"
-      ></path>
-      <path
-        stroke="#8E9294"
-        strokeLinecap="round"
-        strokeWidth="2.152"
-        d="M68.902 74.197l11.982-2.82m-10.721 8.19l24.874-5.853M71.424 84.937l24.873-5.853"
-      ></path>
-      <path
-        stroke="#8E9294"
-        strokeLinecap="round"
-        strokeWidth="2.264"
-        d="M72.685 90.307l24.873-5.854M73.857 95.297l24.873-5.853M75.021 100.7l24.874-5.853"
-      ></path>
-      <path
-        fill="#CCDEE6"
-        d="M21.698 86.68c-5.726-3.643-7.42-11.243-3.78-16.976 3.64-5.733 11.231-7.427 16.958-3.784 5.727 3.643 7.42 11.243 3.78 16.976-3.639 5.733-11.231 7.427-16.958 3.784z"
-      ></path>
-      <path
-        fill="#C42B34"
-        d="M9.283 106.905a2.772 2.772 0 0 1-.851-3.823l8.759-13.798a2.765 2.765 0 0 1 3.817-.852 2.77 2.77 0 0 1 .851 3.822l-8.758 13.799a2.764 2.764 0 0 1-3.818.852"
-      ></path>
-      <path
-        fill="#2E3137"
-        d="M19.032 90.912c-.86-.547-1.348-1.318-.801-2.179l1.826-2.877a1.841 1.841 0 0 1 2.546-.567 1.847 1.847 0 0 1 .566 2.547l-1.826 2.878c-.547.86-1.452.744-2.31.198"
-      ></path>
-      <path
-        fill="#D84B55"
-        d="M16.41 91l-8.266 13.021a.925.925 0 0 0 .283 1.275.92.92 0 0 0 1.272-.284l7.912-12.463c-.713-.47-1.083-1.039-1.2-1.549"
-      ></path>
-      <path
-        fill="#2E3137"
-        d="M27.811 87.523a11.115 11.115 0 0 1-1.117-.196 11.283 11.283 0 0 1-3.577-1.48c-5.295-3.369-6.866-10.423-3.502-15.723 3.366-5.301 10.412-6.874 15.709-3.504 5.296 3.368 6.866 10.422 3.5 15.723a11.317 11.317 0 0 1-2.86 3.053 11.4 11.4 0 0 1-4.72 2.029c-1.127.203-2.284.24-3.433.098m12.57-4.19c3.911-6.16 2.085-14.358-4.069-18.271-6.154-3.915-14.342-2.089-18.253 4.072-3.91 6.16-2.085 14.356 4.07 18.271 6.153 3.915 14.343 2.09 18.252-4.072"
-      ></path>
-      <path
-        fill="#FFD399"
-        d="M93.445 12.554c2.45 5.367.088 11.707-5.274 14.159-5.361 2.452-11.695.088-14.145-5.279-2.449-5.368-.088-11.707 5.275-14.16 5.361-2.452 11.695-.088 14.144 5.28"
-      ></path>
-      <path
-        fill="#FFD399"
-        d="M91.45 28.239l-4.274 1.954a2.697 2.697 0 0 1-3.574-1.334l-2.775-6.08a2.7 2.7 0 0 1 1.333-3.578l4.274-1.955a2.696 2.696 0 0 1 3.575 1.334l2.775 6.08a2.702 2.702 0 0 1-1.333 3.579"
-      ></path>
-      <path
-        fill="#5A5C5D"
-        d="M94.1 30.6l-6.9 3.156a1.255 1.255 0 0 1-1.043-2.284l6.902-3.155a1.253 1.253 0 1 1 1.04 2.282m1.275 2.794l-6.9 3.156a1.254 1.254 0 1 1-1.041-2.283l6.9-3.156a1.254 1.254 0 0 1 1.041 2.283m-1.682 1.387l-3.044 1.392c-.458.21-.4.889.09 1.006.685.164 1.425.11 2.115-.207a3.25 3.25 0 0 0 1.54-1.464c.233-.449-.241-.936-.701-.727"
-      ></path>
-      <g transform="rotate(-69 92.268 -44.056)">
-        <mask id="b" fill="#fff">
-          <use xlinkHref="#a"></use>
-        </mask>
-        <path
-          fill="#C42B34"
-          d="M.732 4.08l.397-1.844a1.999 1.999 0 1 1 3.91.842l-.396 1.846A2 2 0 1 1 .732 4.08"
-          mask="url(#b)"
-        ></path>
-      </g>
-      <path
-        fill="#E1CFB4"
-        d="M86.458 79.011l-1.334 7.43 6.268-4.21-2.12-2.355z"
-      ></path>
-      <path
-        fill="#FECB86"
-        d="M103.266 56.87l-1.644-1.073-14.841 22.72 1.643 1.072z"
-      ></path>
-      <path
-        fill="#FAA736"
-        d="M104.912 57.945l-1.644-1.074-14.841 22.72 1.644 1.073z"
-      ></path>
-      <path
-        fill="#FECB86"
-        d="M90.071 80.664l1.644 1.072 14.842-22.72-1.645-1.072zm-3.306-.951c.31.203.774-.055 1.188.215a.513.513 0 0 1 .152.15l.32-.488-1.644-1.073-.297.453s-.028.542.281.743"
-      ></path>
-      <path
-        fill="#FAA736"
-        d="M88.106 80.078c.205.277.111.67.548.956.44.286.764.042 1.098.118l.32-.488-1.648-1.075-.318.489z"
-      ></path>
-      <path
-        fill="#FECB86"
-        d="M89.752 81.152a.507.507 0 0 1 .198.08c.414.27.365.797.675 1 .311.204.794-.041.794-.041l.296-.454-1.644-1.073-.32.488z"
-      ></path>
-      <path
-        fill="#535756"
-        d="M85.123 86.44l2.22-1.488-1.749-1.14zm21.434-27.423l-4.935-3.22.437-.67 4.935 3.22z"
-      ></path>
-    </g>
-  </svg>
-);
@@ -0,0 +1,26 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+import { Link } from "../../index";
+import { Add } from "@navikt/ds-icons";
+
+<Meta title="ds-react/link/intro" />
+
+# Hvordan ta i bruk Link
+
+Komponeten skal være nesten 1-1 med nav-frontend-lenker for de som er kjent med den.
+
+```jsx
+<Link href="#">Dette er en tekstlenke</Link>
+```
+
+<Canvas>
+  <Link href="#">Dette er en tekstlenke</Link>
+</Canvas>
+
+## Med ikon
+
+<Canvas>
+  <Link href="#">
+    <span>Dette er en tekstlenke</span>
+    <Add />
+  </Link>
+</Canvas>
@@ -0,0 +1,89 @@
+import React, { forwardRef, SVGProps, useRef } from "react";
+import cl from "classnames";
+import { v4 as uuidv4 } from "uuid";
+
+export interface LoaderProps extends SVGProps<SVGSVGElement> {
+  /**
+   * @ignore
+   */
+  className?: string;
+  /**
+   * Changes sizing
+   * 64px | 40px | 32px | 24px | 20px | 16px
+   * @default "m"
+   */
+  size?: "2xl" | "xl" | "l" | "m" | "s" | "xs";
+  /**
+   * Title prop on svg
+   * @default "venter..."
+   */
+  title?: React.ReactNode;
+  /*
+   * Background-circle in svg set to transparent
+   */
+  transparent?: boolean;
+  /**
+   * Colored variants for loader
+   * @default "neutral"
+   */
+  variant?: "neutral" | "interaction" | "inverted";
+}
+
+const Loader = forwardRef<SVGSVGElement, LoaderProps>(
+  (
+    {
+      children,
+      className,
+      size = "m",
+      title = "venter...",
+      transparent = false,
+      variant = "neutral",
+      id,
+      ...rest
+    },
+    ref
+  ) => {
+    const internalId = useRef(uuidv4());
+
+    return (
+      <svg
+        aria-labelledby={id ?? internalId.current}
+        ref={ref}
+        className={cl("navds-loader", className, `navds-loader--${size}`, {
+          "navds-loader--transparent": transparent,
+          "navds-loader--neutral": variant === "neutral",
+          "navds-loader--interaction": variant === "interaction",
+          "navds-loader--inverted": variant === "inverted",
+        })}
+        focusable="false"
+        viewBox="0 0 50 50"
+        preserveAspectRatio="xMidYMid"
+        {...rest}
+      >
+        <title id={id ?? internalId.current}>{title}</title>
+        <circle
+          className="navds-loader__background"
+          xmlns="http://www.w3.org/2000/svg"
+          cx="25"
+          cy="25"
+          r="20"
+          fill="none"
+          strokeWidth="5"
+        />
+        <circle
+          className="navds-loader__foreground"
+          cx="25"
+          cy="25"
+          r="20"
+          stroke={"var(--navds-color-gray-40)"}
+          fill="none"
+          strokeWidth="5"
+          strokeDasharray="50 155"
+          strokeLinecap="round"
+        />
+      </svg>
+    );
+  }
+);
+
+export default Loader;
@@ -0,0 +1,2 @@
+export { default as Loader } from "./Loader";
+export * from "./Loader";
@@ -0,0 +1,18 @@
+.demo__panel {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 30rem;
+  height: 30rem;
+  text-align: center;
+  row-gap: 0.5rem;
+  margin-top: 10rem;
+}
+
+.demo__wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100vh;
+}
@@ -0,0 +1,104 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+import { background } from "@storybook/theming";
+import { Loader } from "../index";
+import { Button } from "../../index";
+
+<Meta title="ds-react/loader/intro" />
+
+# Hvordan ta i bruk Loader
+
+```jsx
+<Loader title="Laster inn ny data" />
+```
+
+<Canvas>
+  <Loader />
+</Canvas>
+
+Her kan `title` proppen brukes for å gi en liten tooltip som sier hvorfor den laster
+
+## Justering av størrelse
+
+Loaderen kommer i størrelsene `2xl`, `xl`, `l`, `m`, `s` og `xs`
+
+```jsx
+<Loader size="xl" />
+```
+
+<Canvas>
+  <Loader size="2xl" />
+  <Loader size="xl" />
+  <Loader size="l" />
+  <Loader size="m" />
+  <Loader size="s" />
+  <Loader size="xs" />
+</Canvas>
+
+## Varianter
+
+Loaderen kommer i variantene `neutral`, `interaction` og `inverted`
+
+```jsx
+<Loader size="2xl" variant="neutral"/>
+<Loader size="2xl" variant="interaction"/>
+<Loader size="2xl" variant="inverted"/>
+```
+
+<Canvas>
+  <Loader size="2xl" variant="neutral" />
+  <Loader size="2xl" variant="interaction" />
+  <div style={{ backgroundColor: "black" }}>
+    <Loader size="2xl" variant="inverted" />
+  </div>
+</Canvas>
+
+## Transparent
+
+Bakgrunnen kan settes til transparent med `transparent={true}`
+
+```jsx
+<Loader transparent />
+```
+
+<Canvas>
+  <Loader size="2xl" transparent />
+</Canvas>
+
+## Bruk av loader i knapper
+
+Husk her å gi brukeren nok informasjon om hvorfor knappen har en Loader. Dette kan gjøres ved å ha god tekst på siden,
+i knappen og i `title`-proppen for `Loader`. Unngå også bruk av `Loader` uten noen tekst som hinter til hva som foregår.
+
+Stylingen er overstyrt for knapper, slik at `transparent` ikke fungerer by-default ved bruk i knapper.
+Størrelsen justeres også automatisk, slik at alt man trenger er å sette Loaderen rett inn i knappen.
+
+```jsx
+<Button>
+  <span>Laster inn nytt innhold...</span>
+  <Loader />
+</Button>
+```
+
+<Canvas>
+  <Button>
+    <span>Laster inn nytt innhold...</span>
+    <Loader />
+  </Button>
+</Canvas>
+
+## Overskrive farger for å sikre kontrast
+
+I de casene der man må justere fargene for å ha bedre kontrast så vil disse to klassene være relevante.
+Om mulig bør man unngå dette og bare ta i bruk default.
+
+```css
+/* Foreground */
+.navds-loader > .navds-loader__foreground {
+  stroke: var(--navds-color-gray-40);
+}
+
+/* Background */
+.navds-loader > .navds-loader__background {
+  stroke: var(--navds-color-gray-10);
+}
+```
@@ -0,0 +1,129 @@
+import React, { useState } from "react";
+import { Loader } from "../index";
+import { Button, Panel, Title } from "../../index";
+import { Meta } from "@storybook/react/types-6-0";
+import "./demo.css";
+export default {
+  title: "ds-react/loader",
+  component: Loader,
+} as Meta;
+
+export const All = () => {
+  return (
+    <div>
+      <h1>Loader</h1>
+      <Loader />
+
+      <h2>Transparent</h2>
+      <Loader transparent />
+
+      <h2>Sizing</h2>
+      <Loader size="2xl" />
+      <Loader size="xl" />
+      <Loader size="l" />
+      <Loader size="m" />
+      <Loader size="s" />
+      <Loader size="xs" />
+      <h2>Sizing transparent</h2>
+      <Loader size="2xl" transparent />
+      <Loader size="xl" transparent />
+      <Loader size="l" transparent />
+      <Loader size="m" transparent />
+      <Loader size="s" transparent />
+      <Loader size="xs" transparent />
+      <div style={{ backgroundColor: "#c9c9c9" }}>
+        <h2>Varianter</h2>
+        <Loader size="xl" variant="neutral" />
+        <Loader size="xl" variant="interaction" />
+        <Loader size="xl" variant="inverted" />
+        <h2>Varianter transparent</h2>
+        <Loader size="xl" variant="neutral" transparent />
+        <Loader size="xl" variant="interaction" transparent />
+        <Loader size="xl" variant="inverted" transparent />
+        <h2>Brukt i knapper</h2>
+      </div>
+      <div>
+        <Button>
+          <span>Laster...</span>
+          <Loader />
+        </Button>{" "}
+        <Button size="s">
+          <span>Laster...</span>
+          <Loader />
+        </Button>
+        <h2>Variants</h2>
+        <Button variant="secondary">
+          <span>Laster...</span>
+          <Loader />
+        </Button>{" "}
+        <Button variant="action">
+          <span>Laster...</span>
+          <Loader />
+        </Button>{" "}
+        <Button variant="danger">
+          <span>Laster...</span>
+          <Loader />
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export const LoaderDemo = () => {
+  const [loading, setLoading] = useState(false);
+  const [longText, setLongText] = useState(false);
+
+  const handleAuto = () => {
+    setLoading(true);
+    setTimeout(() => {
+      setLoading(false);
+    }, 3000);
+  };
+
+  const text = longText
+    ? "Laster inn nytt innhold fra databasen. Hvis dette tar lengre enn 10 sekunder kan man prøve å laste siden på nytt. Om dette ikke fungerer kan det hende tjenesten har nedetid nå, sjekk ut denne linken for å se status"
+    : "Laster inn innholdet...";
+
+  return (
+    <div className="demo__wrapper">
+      <Title level="1" size="l">
+        Test/Demo for loading state. Ikke bruk som referanse i implmentasjon
+      </Title>
+      <div>
+        <Button onClick={() => setLoading(!loading)}>
+          Toggle Loading state
+        </Button>
+        <Button onClick={() => setLongText(!longText)}>
+          Toggle Text-lengde
+        </Button>
+        <Button onClick={() => handleAuto()}>
+          Automatisk endring (3 sekunder)
+        </Button>
+      </div>
+
+      <Panel
+        border
+        className="demo__panel"
+        aria-live="polite"
+        aria-busy={loading}
+      >
+        {loading ? (
+          <>
+            <Loader size="xl" title={text} />
+            <span>{text}</span>
+          </>
+        ) : (
+          <div>
+            <h2>DummyTittel</h2>
+            <p>
+              Dolor nostrud sint incididunt consectetur adipisicing sit. Laborum
+              enim consequat non labore velit ex. Esse amet irure cillum amet
+              dolor ad consequat. Est sit id tempor dolore officia proident
+              consequat sunt cillum.
+            </p>
+          </div>
+        )}
+      </Panel>
+    </div>
+  );
+};
@@ -86,7 +86,11 @@ const Modal: ModalLifecycle &
          aria-label="lukk modalvindu"
          onClick={onClose}
        >
-          <Close />
+          <Close
+            focusable="false"
+            role="img"
+            aria-label="X-ikon for å lukke modal"
+          />
        </Button>
      </ReactModal>
    );
@@ -0,0 +1,23 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+import { Modal } from "../../index";
+
+<Meta title="ds-react/modal/intro" />
+
+# Hvordan ta i bruk Modal
+
+NOTE: For at modalen skal mountes riktig må man kjøre
+`Modal.setAppElement("#root");` før man bruke modalen, da i eks useEffect/useLayoutEffect.
+`#root` kan da her erstattes med andre elementer, men root er relativt vanlig.
+Dette er nødvendig for at skjermlesere ikke skal lese opp innholdet feil i open/closed state
+
+Modalen styres med `open`-proppen som triggrer modal-staten til å endre. Når bruker ønsker å lukke modalen
+vil `onClose`-triggre og det er opp til systemet å håndtere det.
+
+```jsx
+<Modal open={open} onClose={() => setOpen(false)}>
+```
+
+## shouldCloseOnOverlayClick
+
+Proppen `shouldCloseOnOverlayClick` toggler om `onClose` skal triggres
+når bruker trykker utenfor modalen (overlayet). Defaulter til true.
@@ -0,0 +1,42 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+import { Panel } from "../../index";
+
+<Meta title="ds-react/panel/intro" />
+
+# Hvordan ta i bruk Panel
+
+Veldig enkel wrapper-komponent for panel-styling. Kan erstattes 1-1 med `nav-frontend-paneler`.
+
+```jsx
+<Panel>
+  Eu quis exercitation voluptate ex. Aute irure esse occaecat minim cupidatat
+  velit minim duis sint culpa anim laboris. Consectetur nulla eu commodo ea
+  culpa velit commodo incididunt sunt ipsum.
+</Panel>
+```
+
+<Canvas>
+  <Panel>
+    Eu quis exercitation voluptate ex. Aute irure esse occaecat minim cupidatat
+    velit minim duis sint culpa anim laboris. Consectetur nulla eu commodo ea
+    culpa velit commodo incididunt sunt ipsum.
+  </Panel>
+</Canvas>
+
+## Border
+
+```jsx
+<Panel border>
+  Eu quis exercitation voluptate ex. Aute irure esse occaecat minim cupidatat
+  velit minim duis sint culpa anim laboris. Consectetur nulla eu commodo ea
+  culpa velit commodo incididunt sunt ipsum.
+</Panel>
+```
+
+<Canvas>
+  <Panel border>
+    Eu quis exercitation voluptate ex. Aute irure esse occaecat minim cupidatat
+    velit minim duis sint culpa anim laboris. Consectetur nulla eu commodo ea
+    culpa velit commodo incididunt sunt ipsum.
+  </Panel>
+</Canvas>
@@ -0,0 +1,23 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+import { Popover } from "../../index";
+import { placements } from "@popperjs/core";
+
+<Meta title="ds-react/popover/intro" />
+
+# Hvordan ta i bruk Popover
+
+```jsx
+<Popover anchorEl={anchorEl} onClose={() => handleClose} open={open}>
+  <div style={{ margin: "1rem" }}>Contents</div>
+</Popover>
+```
+
+## Plassering
+
+Plassering er alle mulighetene tilbytt av `import { placements } from "@popperjs/core";`
+
+`auto` , `auto-start` , `auto-end` , `top` , `bottom` , `right` , `left` , `top` ,`top-start` , `top-end` , `bottom-start` , `bottom-end` , `right-start` , `right-end` , `left-start` , `left-end`
+
+## Arrow + offset
+
+`arrow`-proppen toggler om arrow skal rendres med popoveren, mens `offset`-proppen er `px` offset popoveren har fra ankerelementet.
@@ -0,0 +1,48 @@
+import React, { forwardRef, HTMLAttributes } from "react";
+import cl from "classnames";
+
+export interface BubbleProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Component content
+   */
+  children: React.ReactNode;
+  /**
+   * @ignore
+   */
+  className?: string;
+  /**
+   * User defined toptext, normally "username + date"
+   */
+  topText?: React.ReactNode;
+  /**
+   * Background color bubble
+   */
+  backgroundColor?: string;
+}
+
+const Bubble = forwardRef<HTMLDivElement, BubbleProps>(
+  ({ children, className, topText, backgroundColor, ...rest }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cl(
+          "navds-speechbubble__bubble",
+          className,
+          "navds-body-long"
+        )}
+        style={{ backgroundColor: backgroundColor }}
+        tabIndex={0}
+        {...rest}
+      >
+        {topText && (
+          <span className="navds-speechbubble__top-text navds-detail">
+            {topText}
+          </span>
+        )}
+        {children}
+      </div>
+    );
+  }
+);
+
+export default Bubble;
@@ -0,0 +1,82 @@
+import React, { forwardRef, HTMLAttributes } from "react";
+import cl from "classnames";
+
+export interface SpeechBubbleProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Children of type <Bubble />
+   * TODO: Type this to <Bubble /> comp
+   */
+  children: React.ReactNode;
+  /**
+   * @ignore
+   */
+  className?: string;
+  /**
+   * Top text for personalia and date
+   */
+  topText?: React.ReactNode;
+  /**
+   * Illustration for messenger
+   */
+  illustration: React.ReactNode;
+  /**
+   * Background color bubbles
+   */
+  backgroundColor?: string;
+  /**
+   * Background color for illustration
+   */
+  illustrationBgColor?: string;
+  /**
+   * Positions illustration and Speechbubbles
+   * @default "left"
+   */
+  position?: "left" | "right";
+}
+
+const SpeechBubble = forwardRef<HTMLDivElement, SpeechBubbleProps>(
+  (
+    {
+      children,
+      className,
+      topText,
+      illustration,
+      position = "left",
+      illustrationBgColor,
+      backgroundColor,
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cl(
+          "navds-speechbubble",
+          className,
+          `navds-speechbubble--${position}`,
+          "navds-body-long"
+        )}
+        {...rest}
+      >
+        <div
+          className="navds-speechbubble__illustration"
+          style={{ backgroundColor: illustrationBgColor }}
+        >
+          {illustration}
+        </div>
+        {React.Children.map(children, (child, i) => {
+          if (React.isValidElement(child)) {
+            return React.cloneElement(child, {
+              topText: topText && i === 0 ? topText : undefined,
+              backgroundColor,
+              ...child.props,
+            });
+          }
+        })}
+      </div>
+    );
+  }
+);
+
+export default SpeechBubble;
@@ -0,0 +1,4 @@
+export { default as SpeechBubble } from "./SpeechBubble";
+export * from "./SpeechBubble";
+export { default as Bubble } from "./Bubble";
+export * from "./Bubble";
@@ -0,0 +1,66 @@
+import React from "react";
+export const Illustration = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 93">
+    <path
+      fill="#e7e5e2"
+      d="M14 50.7C15 52.3 17.9 81 26.5 81S39 51.8 39 50.3c-13.2-7.6-25 .4-25 .4z"
+    />
+    <path
+      fill="#5c4378"
+      d="M38.7 50.2c6 2.9 15.3 10.9 15.3 18.3V93H0V68.5c0-7.1 8.5-14.8 14.5-18-.3.2-.5.3-.5.3 1 1.7 3.8 9.2 12.4 9.2C35 60 39 51.9 39 50.4c-.1-.1-.2-.2-.3-.2z"
+    />
+    <path
+      fill="#d2242a"
+      d="M46.7 76H31.2c-.7 0-1.3-.6-1.2-1.3v-8.5c0-.7.6-1.3 1.3-1.3h15.5c.7 0 1.3.6 1.3 1.3v8.5c-.1.7-.7 1.3-1.4 1.3"
+    />
+    <path
+      fill="#fff"
+      d="M42.9 71c0 2.1-1.7 3.8-3.8 3.8-2.1 0-3.8-1.7-3.8-3.8s1.7-3.8 3.8-3.8c2.1 0 3.8 1.7 3.8 3.8m-8.7 1.7h-.7l.8-1.9h.7l-.8 1.9zm9.3 0H43l.8-1.9h.5l-.8 1.9zm1.2 0h-.2l.8-1.9h.2l-.8 1.9z"
+    />
+    <path
+      fill="#c52d35"
+      d="M36.2 72.7h.6s.1 0 .1-.1v-1.8s0-.1-.1-.1h-.6s-.1 0-.1.1l-.2.6v.1h.2l.1 1.2c0-.1 0 0 0 0"
+    />
+    <path
+      fill="#c52d35"
+      d="M37.5 72.7h.6s.1 0 .1-.1v-1.8s0-.1-.1-.1h-.9s-.1 0-.1.1l-.2.6-.1.1h.5c.1 0 .2.1.2.2v1c-.1-.1-.1 0 0 0m2.6-1.9h-.6s-.1 0-.1.1v1.8s0 .1.1.1h.6s.1 0 .1-.1l.2-.6V72h-.2l-.1-1.2"
+    />
+    <path
+      fill="#c52d35"
+      d="M37.7 72.7h.4s.1 0 .1-.1l.2-.6v-.1h-.2c0 .1-.5.8-.5.8zm3.9-1.9h.7s.1 0 0 .1l-.7 1.8H41l.6-1.9"
+    />
+    <path
+      fill="#c52d35"
+      d="M40.8 70.8h-1c-.1 0 .3.1.3.1l.7 1.7s0 .1.1.1h.6l-.7-1.9m-1.3.6v.4s-.1-.4-.3-.4c-.3 0-.3.2-.3.3 0 .1.1.3.2.3h.5l-.3.7H39c-.2 0-.9-.3-.9-.9 0-.6.5-1 .9-1 .2-.1.5.2.5.6 0-.1 0-.1 0 0z"
+    />
+    <path
+      fill="#5a1f57"
+      d="M39.9 66.7h-1.6c-.1 0-.2-.1-.2-.2v-.3c0-.1.1-.2.2-.2h1.6c.1 0 .2.1.2.2v.3c0 .2-.1.2-.2.2"
+    />
+    <path fill="#c2b5cf" d="M38.7 66.5h.9V64h-.9v2.5z" />
+    <path
+      fill="#e7e5e2"
+      d="M47.2 35.3C44.7 45.6 36.6 53.1 27 53.1S9.3 45.6 6.8 35.3c-.2.1-.5.1-.8.1-1.1 0-2-.8-2-1.7v-7c0-1 .9-1.7 2-1.7h.2C7.7 13.1 16.4 4 27 4c10.6 0 19.3 9.1 20.8 21h.2c1.1 0 2 .8 2 1.7v7c0 1-.9 1.7-2 1.7-.3 0-.5 0-.8-.1z"
+    />
+    <path
+      fill="#635e59"
+      d="M19 27.6c-1.4.1-1.9-2-1.4-3.4.1-.3.6-1.5 1.4-1.5.8 0 1.2.7 1.3.8.6 1.4.3 4-1.3 4.1m16.2 0c1.4.1 1.9-2 1.4-3.4-.1-.3-.6-1.5-1.4-1.5-.8 0-1.2.7-1.3.8-.6 1.4-.3 4 1.3 4.1"
+    />
+    <path
+      fill="#d1bfa3"
+      d="M26.8 34.6c-.4 0-.7-.1-1-.2-.3-.1-.4-.4-.3-.7.1-.3.4-.4.7-.3.5.2 1.5.1 2.2-.4.7-.4 1.1-1 1.2-1.5.1-.4-.1-.9-.4-1.3-.2-.2-.8-.2-1.6-.1-.3 0-.5-.1-.6-.4 0-.3.1-.5.4-.6 1.2-.2 2.1 0 2.6.6.5.7.8 1.4.6 2.1-.1.8-.7 1.6-1.7 2.2-.6.3-1.4.6-2.1.6z"
+    />
+    <path
+      fill="#593a32"
+      d="M27.1 42.1h-.3c-5.3-.2-7.3-4.1-7.4-4.3-.1-.3 0-.6.2-.7.2-.1.6 0 .7.2.1.1 1.9 3.6 6.6 3.8 4.7.2 6.4-3.7 6.4-3.7.1-.3.4-.4.7-.3.3.1.4.4.3.7-.1 0-2.1 4.3-7.2 4.3z"
+    />
+    <path
+      fill="#f6b873"
+      d="M6.6 30.7c.1-.1.1-.2.1-.3v-2c-.1-5.6 1.8-8.1 3.4-10.1 0 0-1 4.3-.3 3.4 3.8-5 21.4-1.6 25-8.1.5 3.6-4.1 4.6-4.1 4.6 3.7.7 6.9-.8 7.7-2.5.3 1.4-.6 2.4-1.9 3.4 4.5-.9 4.6-4 4.6-4 .6 4.1 5.3 2.5 5.3 9.3v6c0 .3.2.6.5.6h.5c.3 0 .5-.3.5-.6V26c.3-15.6-8.5-26-20.6-26C15.9 0 5 10.4 5 24.1v6.3c0 .4.2.6.5.6h.6c.2 0 .3-.1.5-.3"
+    />
+    <path
+      fill="#f6b873"
+      d="M25.9 43.4c-4.4 0-8-1.4-8-3.2s3.6-3.2 8-3.2 8 1.4 8 3.2c0 1.8-3.6 3.2-8 3.2m.8-9.4c-2.9 0-4.7.7-8.8 2.1-12.7 4.6-11.6-14-11.6-14C3.4 46 18.6 52 26.5 52c8.1 0 24.1-8.1 21-30 0 0 .4 17.1-12.9 13.8-3.7-.9-5-1.8-7.9-1.8z"
+    />
+  </svg>
+);
@@ -0,0 +1,174 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+import { SpeechBubble, Bubble } from "../../index";
+import { Illustration } from "./illustration";
+
+<Meta title="ds-react/speechbubble/intro" />
+
+# Hvordan ta i bruk Speechbubble
+
+NOTE: Komponenten er i tidlig BETA og ikke testet ordentlig. Derfor kan/vil det komme potensielle
+breaking-changes før v1 er klar. Anbefaler da å ikke override styling som er brukt utenom det som er tilbytt som props.
+
+```jsx
+<SpeechBubble illustration="OLA" topText="Ola Normann 01.01.21 14:00">
+  <Bubble>
+    Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+  </Bubble>
+  <Bubble>Tempor fugiat amet eu sint in in ullamco.</Bubble>
+  <Bubble>
+    Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+    labore nisi ut.
+  </Bubble>
+</SpeechBubble>
+```
+
+<Canvas>
+  <SpeechBubble illustration="OLA" topText="Ola Normann 01.01.21 14:00">
+    <Bubble>
+      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+    </Bubble>
+    <Bubble>Tempor fugiat amet eu sint in in ullamco.</Bubble>
+    <Bubble>
+      Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+      labore nisi ut.
+    </Bubble>
+  </SpeechBubble>
+</Canvas>
+
+## Posisjonering
+
+Speechbubble kan bli posisjonert "left" og "right" med `position`-proppen
+
+```jsx
+<SpeechBubble illustration="OLA" position="left">
+  <Bubble>
+    Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+  </Bubble>
+</SpeechBubble>
+<SpeechBubble illustration="OLA" position="right">
+  <Bubble>
+    Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+  </Bubble>
+</SpeechBubble>
+```
+
+<Canvas>
+  <div>
+    <SpeechBubble illustration="OLA" position="left">
+      <Bubble>
+        Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+      </Bubble>
+    </SpeechBubble>
+    <br />
+    <SpeechBubble illustration="PER" position="right">
+      <Bubble>Ipsum laborum culpa ea ea commodo eiusmod in aute.</Bubble>
+    </SpeechBubble>
+  </div>
+</Canvas>
+
+## Endring av farger
+
+Man kan endre bakgrunnsfargen selv med `illustrationBgColor` og `backgroundColor` proppene.
+
+```jsx
+<SpeechBubble
+  illustration="OLA"
+  position="left"
+  illustrationBgColor="var(--navds-color-lightblue-10)"
+  backgroundColor="var(--navds-color-lightblue-20)"
+>
+  <Bubble>
+    Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+  </Bubble>
+</SpeechBubble>
+```
+
+<Canvas>
+  <SpeechBubble
+    illustration="OLA"
+    position="left"
+    illustrationBgColor="var(--navds-color-lightblue-10)"
+    backgroundColor="var(--navds-color-lightblue-20)"
+  >
+    <Bubble>
+      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+    </Bubble>
+  </SpeechBubble>
+</Canvas>
+
+## Illustrasjoner
+
+`illustration`-proppen aksepterer `ReactNode`.
+Hvis man bruker en illustrasjon i SVG-fromat vil den fungere likt `nav-frontend-veilederpanel` sin illustrasjon.
+
+```jsx
+<SpeechBubble illustration={<Illustration />} position="left">
+  <Bubble>
+    Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+  </Bubble>
+</SpeechBubble>
+```
+
+<Canvas>
+  <SpeechBubble illustration={<Illustration />} position="left">
+    <Bubble>
+      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+    </Bubble>
+  </SpeechBubble>
+</Canvas>
+
+## Styling av topText
+
+`topText`-proppen aksepterer `ReactNode` og man kan da selv style den
+
+```jsx
+<SpeechBubble
+  illustration={<div>OLA</div>}
+  topText={
+    <div
+      style={{
+        display: "flex",
+        columnGap: "1rem",
+      }}
+    >
+      <span>Ola Normann</span>
+      <span className="navds-detail--s">01.01.21 14:00</span>
+    </div>
+  }
+>
+  <Bubble>
+    Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+  </Bubble>
+  <Bubble>Tempor fugiat amet eu sint in in ullamco.</Bubble>
+  <Bubble>
+    Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+    labore nisi ut.
+  </Bubble>
+</SpeechBubble>
+```
+
+<Canvas>
+  <SpeechBubble
+    illustration={<div>OLA</div>}
+    topText={
+      <div
+        style={{
+          display: "flex",
+          columnGap: "1rem",
+        }}
+      >
+        <span>Ola Normann</span>
+        <span className="navds-detail--s">01.01.21 14:00</span>
+      </div>
+    }
+  >
+    <Bubble>
+      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+    </Bubble>
+    <Bubble>Tempor fugiat amet eu sint in in ullamco.</Bubble>
+    <Bubble>
+      Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+      labore nisi ut.
+    </Bubble>
+  </SpeechBubble>
+</Canvas>
@@ -0,0 +1,97 @@
+import React from "react";
+import { SpeechBubble, Bubble } from "../index";
+import { Meta } from "@storybook/react/types-6-0";
+import { Illustration } from "./illustration";
+
+export default {
+  title: "ds-react/speechbubble",
+  component: SpeechBubble,
+  subcomponents: { Bubble },
+} as Meta;
+
+export const All = () => {
+  return (
+    <div style={{ rowGap: "2rem", display: "flex", flexDirection: "column" }}>
+      <SpeechBubble
+        illustration={<Illustration />}
+        topText="Ola Normann 01.01.21 14:00"
+        backgroundColor="var(--navds-color-lightblue-20)"
+      >
+        <Bubble>
+          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+        </Bubble>
+        <Bubble>Tempor fugiat amet eu sint in in ullamco.</Bubble>
+        <Bubble>
+          Adipisicing laborum est eu laborum est sit in commodo enim sint
+          laboris labore nisi ut.
+        </Bubble>
+      </SpeechBubble>
+      <SpeechBubble
+        illustration={<div>KAJ</div>}
+        topText={
+          <div
+            style={{
+              columnGap: "1rem",
+              display: "flex",
+              justifyContent: "flex-end",
+            }}
+          >
+            <span>Ola Normann</span>
+            <span className="navds-detail--s">01.01.21 14:00</span>
+          </div>
+        }
+        position="right"
+        backgroundColor="var(--navds-color-gray-10)"
+      >
+        <Bubble>
+          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+        </Bubble>
+        <Bubble>Tempor fugiat amet eu sint in in ullamco.</Bubble>
+        <Bubble>
+          Adipisicing laborum est eu laborum est sit in commodo enim sint
+          laboris labore nisi ut.
+        </Bubble>
+      </SpeechBubble>
+      <SpeechBubble
+        illustration={<div>KAJ</div>}
+        topText="Ola Normann 01.01.21 14:00"
+        position="left"
+      >
+        <Bubble>
+          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+        </Bubble>
+        <Bubble>Tempor fugiat amet eu sint in in ullamco.</Bubble>
+        <Bubble>
+          Adipisicing laborum est eu laborum est sit in commodo enim sint
+          laboris labore nisi ut.
+        </Bubble>
+      </SpeechBubble>
+      <SpeechBubble
+        illustration={<div>KAJ</div>}
+        topText="Ola Normann 01.01.21 14:00"
+        position="right"
+      >
+        <Bubble>
+          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+        </Bubble>
+        <Bubble>Tempor fugiat amet eu sint in in ullamco.</Bubble>
+      </SpeechBubble>
+      <SpeechBubble
+        illustration={<div>KAJ</div>}
+        topText="Ola Normann 01.01.21 14:00"
+        position="left"
+      >
+        <Bubble>
+          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+        </Bubble>
+      </SpeechBubble>
+      <SpeechBubble
+        illustration={<div>KAJ</div>}
+        topText="Ola Normann 01.01.21 14:00"
+        position="right"
+      >
+        <Bubble>Per skriver....</Bubble>
+      </SpeechBubble>
+    </div>
+  );
+};
@@ -0,0 +1,32 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+import { Tag } from "../../index";
+
+<Meta title="ds-react/tag/intro" />
+
+# Hvordan ta i bruk Tag
+
+Veldig enkel Tag-komponent som er lik `nav-frontend-etiketter`
+
+```jsx
+<Tag variant="info"> Info tag</Tag>
+```
+
+<Canvas>
+  <Tag variant="info"> Info tag</Tag>
+</Canvas>
+
+## Varianter
+
+```jsx
+<Tag variant="info"> Info tag</Tag>
+<Tag variant="warning"> Warning tag</Tag>
+<Tag variant="success"> Success tag</Tag>
+<Tag variant="error">Error tag</Tag>
+```
+
+<Canvas>
+  <Tag variant="info"> Info tag</Tag>
+  <Tag variant="warning"> Warning tag</Tag>
+  <Tag variant="success"> Success tag</Tag>
+  <Tag variant="error">Error tag</Tag>
+</Canvas>
@@ -0,0 +1,39 @@
+import { Meta } from "@storybook/addon-docs";
+
+<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-title-2xl: 2.2222222222222223rem;
+  --navds-font-size-title-xl: 1.7777777777777777rem;
+  --navds-font-size-title-l: 1.5555555555555556rem;
+  --navds-font-size-title-m: 1.3333333333333333rem;
+  --navds-font-size-title-s: 1.1111111111111112rem;
+  --navds-font-size-xl: 1.1111111111111112rem;
+  --navds-font-size-l: 1rem;
+  --navds-font-size-m: 0.8888888888888888rem;
+  --navds-font-size-s: 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.
@@ -7,73 +7,64 @@ export default {
  component: BodyLong,
 };

-export const TypoMedSpacing = () => <TypoMal spacing={true} />;
-export const TypoUtenSpacing = () => <TypoMal spacing={false} />;
+const lorem = () => (
+  <>
+    Veniam consequat cillum pariatur officia duis aute labore anim labore.
+    Pariatur ad duis do nulla.
+  </>
+);

-const TypoMal = ({ ...rest }) => {
-  const lorem = (text) => (
-    <>
-      {text} <br /> Veniam consequat cillum pariatur officia duis aute labore
-      anim labore. Pariatur ad duis do nulla.
-    </>
-  );
-  return (
-    <div
-      className="typo-story"
-      style={{
-        display: "flex",
-        flexDirection: "column",
-      }}
-    >
-      <div>
-        <Title {...rest} level={1} size="2xl">
-          {lorem("Title 2xl")}
-        </Title>
-        <Title {...rest} level={2} size="xl">
-          {lorem("Title xl")}
-        </Title>
-        <Title {...rest} level={3} size="l">
-          {lorem("Title l")}
-        </Title>
-        <Title {...rest} level={4} size="m">
-          {lorem("Title m")}
-        </Title>
-        <Title {...rest} level={5} size="s">
-          {lorem("Title s")}
-        </Title>
-      </div>
-      <div>
-        <Ingress {...rest}>{lorem("Ingress")}</Ingress>
-      </div>
-      <div>
-        <BodyLong {...rest}>{lorem("BodyLong")}</BodyLong>
-        <BodyLong {...rest} size="s">
-          {lorem("BodyLong small")}
-        </BodyLong>
-      </div>
-      <div>
-        <BodyShort component="span" {...rest} {...rest}>
-          {lorem("BodyShort")}
-        </BodyShort>
-        <BodyShort {...rest} size="s">
-          {lorem("BodyShort small")}
-        </BodyShort>
-      </div>
-      <div>
-        <Label {...rest}>{lorem("Label")}</Label>
-        <Label {...rest} size="s">
-          {lorem("Label small")}
-        </Label>
-      </div>
-      <div>
-        <Detail {...rest}>{lorem("Detail")}</Detail>
-        <Detail {...rest} size="s">
-          {lorem("Detail small")}
-        </Detail>
-      </div>
-    </div>
-  );
-};
+const TitleTemplate = ({ level, size, spacing }) => (
+  <Title spacing={spacing} size={size} level={level}>
+    {lorem()}
+  </Title>
+);
+
+export const TitleStory = TitleTemplate.bind({});
+TitleStory.args = { level: 1, size: "2xl", spacing: false };
+
+const IngressTemplate = ({ spacing }) => (
+  <Ingress spacing={spacing}>{lorem()}</Ingress>
+);
+
+export const IngressStory = IngressTemplate.bind({});
+IngressStory.args = { spacing: false };
+
+const BodyLongTemplate = ({ spacing, size }) => (
+  <BodyLong size={size} spacing={spacing}>
+    {lorem()}
+  </BodyLong>
+);
+
+export const BodyLongStory = BodyLongTemplate.bind({});
+BodyLongStory.args = { spacing: false, size: "m" };
+
+const BodyShortTemplate = ({ spacing, size }) => (
+  <BodyShort size={size} spacing={spacing}>
+    {lorem()}
+  </BodyShort>
+);
+
+export const BodyShortStory = BodyShortTemplate.bind({});
+BodyShortStory.args = { spacing: false, size: "m" };
+
+const LabelTemplate = ({ spacing, size }) => (
+  <Label size={size} spacing={spacing}>
+    {lorem()}
+  </Label>
+);
+
+export const LabelStory = LabelTemplate.bind({});
+LabelStory.args = { spacing: false, size: "m" };
+
+const DetailTemplate = ({ spacing, size }) => (
+  <Detail size={size} spacing={spacing}>
+    {lorem()}
+  </Detail>
+);
+
+export const DetailStory = DetailTemplate.bind({});
+DetailStory.args = { spacing: false, size: "m" };

 export const SideInnholdEksempel = () => {
  return (
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "0.4.1",
+  "version": "0.4.3",
  "private": false,
  "description": "Auto-generated design-tokens for NAV design-systems framework",
  "author": "NAV Designsystem team",
@@ -68,12 +68,12 @@ module.exports = {
      disabled: { value: "{navds.color.gray.40.value}" },
      action: {
        default: { value: "{navds.color.blue.50.value}" },
-        hover: { value: Color(baseColors.blue).lighten(0.1) },
+        hover: { value: "{navds.color.blue.60.value}" },
        active: { value: "{navds.color.deepblue.50.value}" },
      },
      danger: {
        default: { value: "{navds.color.red.50.value}" },
-        hover: { value: Color(baseColors.red).lighten(0.1) },
+        hover: { value: "{navds.color.red.60.value}" },
        active: { value: "{navds.color.red.70.value}" },
      },
      error: {
@@ -95,7 +95,7 @@ module.exports = {
      border: { value: "{navds.color.gray.40.value}" },
      background: { value: "{navds.color.white.value}" },
      text: {
-        primary: { value: "{navds.color.gray.90}" },
+        primary: { value: "{navds.color.gray.90.value}" },
        inverse: { value: "{navds.color.white.value}" },
        disabled: { value: "{navds.color.gray.60.value}" },
        link: { value: "{navds.color.blue.50.value}" },
@@ -11,7 +11,7 @@
      <a href="https://github.com/navikt/nav-frontend-moduler/pulls">
          <img src="https://img.shields.io/badge/PRs-welcome-green.svg" />
      </a>
-                  <img src="https://github.com/navikt/nav-frontend-moduler/workflows/Build,%20test%20and%20maybe%20publish/badge.svg" />
+         <img src="https://github.com/navikt/nav-frontend-moduler/workflows/Build,%20test%20and%20maybe%20publish/badge.svg" />
    </p>
    <h4><a href="https://design.nav.no">Nettside</a> | <a href="https://github.com/navikt/nav-frontend-moduler/blob/master/CONTRIBUTING.md">Bidra</a> | <a href="https://github.com/navikt/nav-frontend-moduler/issues">Bug-rapport</a>
 </div>
@@ -10,7 +10,7 @@
    "clean": "yarn workspace website clean",
    "build:gatsby": "yarn react-docgen && yarn workspace website build:gatsby",
    "serve": "yarn workspace website serve",
-    "storybook": "yarn run start-storybook -p 6006",
+    "storybook": "yarn run start-storybook --loglevel warn --quiet -p 6006",
    "build-storybook": "build-storybook",
    "watch-css": "yarn workspace @navikt/ds-css run watch",
    "chromatic": "STORYBOOK_CHROMATIC=true npx chromatic --project-token x3xqdfgkujg",
@@ -78,9 +78,9 @@
  },
  "dependencies": {
    "@popperjs/core": "^2.5.4",
-    "@storybook/addon-storysource": "^6.2.9",
-    "@storybook/addons": "^6.2.9",
-    "@storybook/theming": "^6.2.9",
+    "@storybook/addon-storysource": "^6.3.4",
+    "@storybook/addons": "^6.3.4",
+    "@storybook/theming": "^6.3.4",
    "@whitespace/storybook-addon-html": "^5.0.0",
    "axios": "^0.21.0",
    "chalk": "^1.1.3",
@@ -115,11 +115,11 @@
  },
  "devDependencies": {
    "@babel/core": "^7.11.6",
-    "@storybook/addon-actions": "^6.2.9",
-    "@storybook/addon-docs": "^6.2.9",
-    "@storybook/addon-essentials": "^6.2.9",
-    "@storybook/addon-links": "^6.2.9",
-    "@storybook/react": "^6.2.9",
+    "@storybook/addon-actions": "^6.3.4",
+    "@storybook/addon-docs": "^6.3.4",
+    "@storybook/addon-essentials": "^6.3.4",
+    "@storybook/addon-links": "^6.3.4",
+    "@storybook/react": "^6.3.4",
    "@typescript-eslint/eslint-plugin": "^4.3.0",
    "@typescript-eslint/parser": "^4.3.0",
    "babel-eslint": "^10.1.0",
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-hjelpetekst",
-  "version": "3.0.2",
+  "version": "3.1.1",
  "main": "lib/hjelpetekst.js",
  "types": "lib/hjelpetekst.d.ts",
  "license": "MIT",
@@ -75,6 +75,11 @@ class Hjelpetekst extends React.Component<HjelpetekstProps, State> {
    }
  };

+  handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    this.togglePopover(e);
+    this.props.onClick && this.props.onClick(e);
+  };
+
  render() {
    const {
      children,
@@ -82,6 +87,7 @@ class Hjelpetekst extends React.Component<HjelpetekstProps, State> {
      popoverProps,
      type,
      tittel,
+      onClick,
      ...rest
    } = this.props;

@@ -90,7 +96,7 @@ class Hjelpetekst extends React.Component<HjelpetekstProps, State> {
        <button
          type="button"
          className="hjelpetekst__apneknapp"
-          onClick={this.togglePopover}
+          onClick={this.handleClick}
          title={tittel}
          aria-expanded={this.state.ankerEl !== undefined}
          aria-controls={this.popoverId}
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-ikonknapper",
-  "version": "2.0.1",
+  "version": "2.0.2",
  "main": "lib/index.js",
  "types": "lib/index.d.ts",
  "license": "MIT",
@@ -25,7 +25,7 @@
  "devDependencies": {
    "nav-frontend-chevron": "^1.0.30",
    "nav-frontend-ikoner-assets": "^3.0.1",
-    "nav-frontend-knapper": "^3.0.1",
+    "nav-frontend-knapper": "^3.0.2",
    "react": "^16.8.0 || ^17.0.0"
  }
 }
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-knapper-style",
-  "version": "2.0.1",
+  "version": "2.0.2",
  "main": "src/index.less",
  "license": "MIT",
  "files": [
@@ -12,11 +12,11 @@
 }

 .knapp--hoved {
-  .knappfylt-mixin(@navBla, @white, @navDypBla, lighten(@navBla, 5%));
+  .knappefylt-cta-mixin(@navBla, @navBlaDarken20, @navDypBla);
 }

 .knapp--fare {
-  .knappfylt-mixin(@redError, @white, darken(@redError, 5%), lighten(@redError, 5%));
+  .knappefylt-cta-mixin(@redError, @redErrorDarken20, @redErrorDarken40);
 }

 .knapp--flat {
@@ -64,6 +64,44 @@
  }
 }

+.knappefylt-cta-mixin(@bgColor, @hoverColor, @activeColor) {
+  color: white;
+  border-color: @bgColor;
+  background-color: @bgColor;
+  position: relative;
+  border-width: 1px;
+
+  &:hover {
+    background-color: @hoverColor;
+    border-color: @hoverColor;
+  }
+
+  &:hover&:focus {
+    background-color: @hoverColor;
+    border-color: @hoverColor;
+    border-color: white;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: white;
+    box-shadow: 0 0 0 3px @fokusFarge;
+  }
+
+  &:active {
+    background-color: @activeColor;
+    border-color: transparent;
+    border-color: white;
+  }
+
+  &:hover&:focus&:active {
+    background-color: @activeColor;
+    border-color: @activeColor;
+    border-color: white;
+  }
+}
+
+/* Beholdes i kode for å unngå breaking change */
 .knappfylt-mixin(@bgColor, @textColor, @activeColor, @highlighColor) {
  .knapptaktil-mixin();

@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-knapper",
-  "version": "3.0.1",
+  "version": "3.0.2",
  "main": "lib/index.js",
  "types": "lib/index.d.ts",
  "license": "MIT",
@@ -28,7 +28,7 @@
    "@types/react": "15.0.23 || ^16.0.0",
    "classnames": "^2.2.5",
    "nav-frontend-js-utils": "^1.0.19",
-    "nav-frontend-knapper-style": "^2.0.1",
+    "nav-frontend-knapper-style": "^2.0.2",
    "prop-types": "^15.5.10",
    "react": "^16.8.0 || ^17.0.0"
  },
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-tabell-style",
-  "version": "2.0.1",
+  "version": "2.0.2",
  "main": "src/index.less",
  "license": "MIT",
  "files": [
@@ -21,7 +21,7 @@
  },
  "devDependencies": {
    "nav-frontend-core": "^6.0.1",
-    "nav-frontend-knapper-style": "^2.0.1",
+    "nav-frontend-knapper-style": "^2.0.2",
    "nav-frontend-typografi-style": "^2.0.1"
  }
 }
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-toggle-style",
-  "version": "2.0.1",
+  "version": "2.0.2",
  "main": "src/toggle-style.less",
  "license": "MIT",
  "files": [
@@ -17,7 +17,7 @@
  },
  "devDependencies": {
    "nav-frontend-core": "^6.0.1",
-    "nav-frontend-knapper-style": "^2.0.1",
+    "nav-frontend-knapper-style": "^2.0.2",
    "nav-frontend-typografi-style": "^2.0.1"
  }
 }
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-toggle",
-  "version": "2.0.1",
+  "version": "2.0.2",
  "main": "lib/index.js",
  "types": "lib/index.d.ts",
  "license": "MIT",
@@ -22,7 +22,7 @@
  "devDependencies": {
    "classnames": "^2.2.5",
    "nav-frontend-js-utils": "^1.0.19",
-    "nav-frontend-toggle-style": "^2.0.1",
+    "nav-frontend-toggle-style": "^2.0.2",
    "prop-types": "^15.5.10",
    "react": "^16.8.0 || ^17.0.0"
  }
@@ -14,6 +14,22 @@ import {
  Undertekst,
  UndertekstBold,
 } from "./../";
+import Lenkepanel from "nav-frontend-lenkepanel";
+
+## Nytt typografi-oppsett (beta)
+
+Vi har nå en ny og forbedret typografi-løsning for både react og css i beta. Vi anbefaler
+alle å ta en titt på dette og ta den i bruk hvis ønskelig.
+
+For nå kan man finne dokumentasjon om hvordan man tar denne i bruk her:
+
+<Lenkepanel
+  href="https://navikt.github.io/Designsystemet/?path=/story/ds-react-typography-intro--page"
+  className="resource-link"
+  border
+>
+  Typografi storybook
+</Lenkepanel>

 ## Bruk av Typografi i prosjekter

@@ -55,7 +55,9 @@ exports.sourceNodes = (() => {
    { user, repository, tree = false, releases = false, branch, secrets = {} }
  ) {
    if (!user || !repository) {
-      throw "You need to define user & repository for gatsby-source-github to work";
+      throw new Error(
+        "You need to define user & repository for gatsby-source-github to work"
+      );
    }

    const octo = new Octokat(secrets);
@@ -10,7 +10,9 @@ exports.sourceNodes = async (
  { user, repository, tree = false, releases = false, secrets = {} }
 ) => {
  if (!user || !repository) {
-    throw "You need to define user & repository for gatsby-source-github to work";
+    throw new Error(
+      "You need to define user & repository for gatsby-source-github to work"
+    );
  }

  const octo = new Octokat(secrets);
Author	SHA1	Message	Date
github-actions[bot]	223a328382	Lerna versionbump [ci skip] - @navikt/ds-css@0.6.14 - @navikt/ds-react@0.6.9	2021-07-16 13:56:44 +00:00
Ken	6450782d49	Vnext SpeechBubble (snakkeboble) (#1152 )	2021-07-16 15:41:12 +02:00
Ken	1c05a87aa0	Update layout.stories.mdx	2021-07-15 09:34:35 +02:00
github-actions[bot]	286e8e7265	Lerna versionbump [ci skip] - @navikt/ds-css@0.6.13 - @navikt/ds-react@0.6.8	2021-07-14 13:02:15 +00:00
Ken	fea8356538	Oppdatert Loader (#1150 )	2021-07-14 14:48:24 +02:00
Ken	3017843435	Fikset loader eksempler i storybook	2021-07-14 11:46:56 +02:00
github-actions[bot]	5a8807cf30	Lerna versionbump [ci skip] - @navikt/ds-react@0.6.7	2021-07-14 09:35:27 +00:00
Ken	ca7c15118f	Bedre dokumentasjon for nye pakkebiblioteket i storybook (#1148 )	2021-07-14 11:23:42 +02:00
github-actions[bot]	564df74c79	Lerna versionbump [ci skip] - @navikt/ds-css@0.6.12	2021-07-13 18:09:43 +00:00
Ken	50bfca15e8	Patched button med ikon (#1147 )	2021-07-13 19:57:35 +02:00
github-actions[bot]	8d0c782903	Lerna versionbump [ci skip] - @navikt/ds-css@0.6.10 - @navikt/ds-react@0.6.6	2021-07-13 13:48:22 +00:00
Ken	b50c5c5b20	Loader (spinner) (#1146 )	2021-07-13 15:34:07 +02:00
github-actions[bot]	c13ae0ba42	Lerna versionbump [ci skip] - @navikt/ds-css@0.6.9	2021-07-13 13:28:48 +00:00
Ken	db3598b763	Oppdatert Button for ikonbruk (#1145 )	2021-07-13 15:16:05 +02:00
github-actions[bot]	bfb3d2fd04	Lerna versionbump [ci skip] - @navikt/ds-css@0.6.8	2021-07-12 10:25:58 +00:00
Ken	9c9d69dc4a	Hotfikser for ds-css styling (#1144 )	2021-07-12 12:11:33 +02:00
github-actions[bot]	8fcc763ee0	Lerna versionbump [ci skip] - @navikt/ds-css@0.6.7	2021-07-11 10:42:36 +00:00
Ken	70a202737f	Merge branch 'master' of https://github.com/navikt/nav-frontend-moduler	2021-07-11 12:29:54 +02:00
Ken	e91c4b5853	border-box fix for alert	2021-07-11 01:47:58 +02:00
github-actions[bot]	c4588ba1d2	Lerna versionbump [ci skip] - @navikt/ds-css@0.6.6	2021-07-10 23:30:25 +00:00
Ken	759cf51851	hotfix button errors	2021-07-11 01:17:33 +02:00
github-actions[bot]	4c5f810fdc	Lerna versionbump [ci skip] - nav-frontend-hjelpetekst@3.1.1	2021-07-09 11:44:26 +00:00
Ken	ae142178ad	Oppdatert hjelpetekst (#1143 )	2021-07-09 13:32:02 +02:00
github-actions[bot]	74aefe9329	Lerna versionbump [ci skip] - @navikt/ds-css@0.6.5 - @navikt/ds-react@0.6.5	2021-07-08 13:37:45 +00:00
Ken	d774cda10f	Alertstripe patch (#1142 )	2021-07-08 15:25:51 +02:00
github-actions[bot]	145489756d	Lerna versionbump [ci skip] - @navikt/ds-react@0.6.4	2021-07-06 18:53:10 +00:00
Ken	8df7514055	oppdatert focus + role for ikonbruk i komponenter	2021-07-06 20:37:20 +02:00
Ken	614767d5a2	oppdatert specify for icons [ci skip]	2021-07-06 17:10:14 +02:00
Ken	fb23dbac85	oppdatert specify for icons [ci skip]	2021-07-06 17:00:10 +02:00
Ken	51acc59fde	[ci skip]	2021-07-03 22:36:56 +02:00
Ken	a18e62ec95	[ci skip]	2021-07-03 22:18:59 +02:00
Ken	9dc465dc76	Update .specifyrc.json	2021-07-03 22:12:02 +02:00
Ken	ffd5023dd9	[ci skip]	2021-07-03 22:07:39 +02:00
Ken	6ae42fccef	[ci skip]	2021-07-03 22:07:08 +02:00
Ken	3692c588af	[CI SKIP]	2021-07-03 21:57:42 +02:00
Ken	e2be70da9b	Update .specifyrc.json	2021-07-03 21:51:52 +02:00
Ken	dd4c90c24f	Create .specifyrc.json	2021-07-03 21:47:51 +02:00
github-actions[bot]	c1615a5acd	Lerna versionbump [ci skip] - @navikt/ds-css@0.6.4	2021-07-02 19:46:26 +00:00
Ken	c6aef457de	Oppdatert accordion-menu styling (#1135 )	2021-07-02 21:34:37 +02:00
github-actions[bot]	6f36724570	Lerna versionbump [ci skip] - @navikt/ds-css@0.6.3 - @navikt/ds-react@0.6.3 - @navikt/ds-tokens@0.4.3 - nav-frontend-ikonknapper@2.0.2 - nav-frontend-knapper-style@2.0.2 - nav-frontend-knapper@3.0.2 - nav-frontend-tabell-style@2.0.2 - nav-frontend-toggle-style@2.0.2 - nav-frontend-toggle@2.0.2	2021-07-02 15:03:44 +00:00
Ken	91b956d8c2	Button styling + oppdatert styling for ds-react komponenter (#1134 )	2021-07-02 16:50:09 +02:00
Ken	c9d70ebd1c	Update README.md	2021-06-24 09:02:56 +02:00
github-actions[bot]	6dee56062c	Lerna versionbump [ci skip] - @navikt/ds-css@0.6.2 - @navikt/ds-react@0.6.2 - @navikt/ds-tokens@0.4.2	2021-06-23 13:53:34 +00:00
Ken	b24c959968	MicroCard komponent (#1129 )	2021-06-23 15:41:56 +02:00
Ken	c44b82b603	Header for bruk på sider (#1128 )	2021-06-23 15:41:46 +02:00
Ken	c1b622de8c	Oppdatert typo komponent dokumentasjon (#1127 )	2021-06-22 21:53:37 +02:00