Lerna versionbump [ci skip]

- @navikt/ds-css@0.6.14
 - @navikt/ds-react@0.6.9

.storybook/stories/introduction.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/addon-docs/blocks";
+import { Meta } from "@storybook/addon-docs";
 
 <Meta title="ds-react/Kom i gang" />
 

.storybook/stories/roadmap.stories.mdx

@@ -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.

@navikt/ds-css/alert.css

@@ -8,6 +8,7 @@
   grid-auto-flow: column;
   justify-content: start;
   min-height: 64px;
+  box-sizing: border-box;
 }
 
 .navds-alert--s {
@@ -18,6 +19,7 @@
 .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%,
@@ -27,8 +29,10 @@
 }
 
 .navds-alert > div {
-  display: flex;
-  align-items: center;
+  display: block;
+  margin: auto 0;
+  max-width: 43.5rem;
+  flex: 1;
 }
 
 .navds-alert > span {

@navikt/ds-css/baseline/baseline.css

@@ -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;

@navikt/ds-css/button.css

@@ -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: 0.65625rem var(--navds-spacing-3);
+  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: 0.25rem calc(var(--navds-spacing-4) - 2px);
+  min-height: 32px;
 }
 
 .navds-button:focus {
@@ -34,15 +58,6 @@
   color: var(--navds-color-text-inverse);
   background-color: var(--navds-color-action-hover);
   border-color: transparent;
-
-  /* Padding calculated based on 18px font for 44px tall button */
-  padding: 0.53125rem var(--navds-spacing-3);
-}
-
-.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.25rem calc(var(--navds-spacing-4) - 2px);
 }
 
 .navds-button--primary:active {
@@ -118,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;
@@ -127,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);
-}

@navikt/ds-css/copy-to-clipboard.css

@@ -3,6 +3,7 @@
   align-items: center;
   column-gap: 0.5em;
   padding: var(--navds-spacing-1);
+  min-height: 32px;
 }
 
 .navds-copy-to-clipboard__popover {

@navikt/ds-css/index.css

@@ -14,8 +14,10 @@
 @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";

@navikt/ds-css/loader.css

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

@navikt/ds-css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.6.5",
+  "version": "0.6.14",
   "private": false,
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",

@navikt/ds-css/speech-bubble.css

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

@navikt/ds-icons/stories/icons.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/addon-docs/blocks";
+import { Meta } from "@storybook/addon-docs";
 
 <Meta title="ds-icons/Kom i gang" />
 

@navikt/ds-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.6.5",
+  "version": "0.6.9",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",

@navikt/ds-react/src/accordion-anchor-menu/stories/menu.stories.mdx

@@ -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.

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

@@ -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.

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

@@ -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">

@navikt/ds-react/src/accordion/stories/accordion.stories.mdx

@@ -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`.

@navikt/ds-react/src/alert/stories/alert.stories.mdx

@@ -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>

@navikt/ds-react/src/alert/stories/alert.stories.tsx

@@ -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>

@navikt/ds-react/src/button/stories/button.stories.mdx

@@ -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>

@navikt/ds-react/src/button/stories/button.stories.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Button } from "../index";
+import { Success } from "@navikt/ds-icons";
 
 export default {
   title: "ds-react/button",
@@ -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>
     </>
   );
 };

@navikt/ds-react/src/card/stories/card.stories.mdx

@@ -1,4 +1,5 @@
-import { Meta } from "@storybook/addon-docs/blocks";
+import { Meta, Canvas } from "@storybook/addon-docs";
+import { MicroCard } from "../index.ts";
 
 <Meta title="ds-react/card/intro" />
 
@@ -12,9 +13,13 @@ 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>

@navikt/ds-react/src/content-container/stories/container.stories.mdx

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

@navikt/ds-react/src/copy-to-clipboard/stories/copy-to-clipboard.stories.tsx

@@ -9,7 +9,7 @@ export default {
 };
 
 export const All = () => {
-  const label = "pi";
+  const label = "Kopierte PI til clipboard";
 
   const text = "3.14159265359";
   return (

@navikt/ds-react/src/copy-to-clipboard/stories/copy.stories.mdx

@@ -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"}
+/>
+```

@navikt/ds-react/src/grid/stories/grid.stories.mdx

@@ -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.

@navikt/ds-react/src/header/stories/header.stories.mdx

@@ -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>

@navikt/ds-react/src/header/stories/header.stories.tsx

@@ -1,6 +1,7 @@
 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,
@@ -58,17 +59,3 @@ export const All = () => {
     </div>
   );
 };
-
-/* prettier-ignore */
-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>

@navikt/ds-react/src/header/stories/pictogram.tsx

@@ -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>

@navikt/ds-react/src/index.ts

@@ -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,
@@ -38,6 +44,7 @@ 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,

@navikt/ds-react/src/internal-header/stories/internalheader.stories.mdx

@@ -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>

@navikt/ds-react/src/layouts/stories/layout.stories.mdx

@@ -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.

@navikt/ds-react/src/link-panel/stories/illustration.tsx

@@ -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>
+  </>
+);

@navikt/ds-react/src/link-panel/stories/link-panel.stories.mdx

@@ -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>

@navikt/ds-react/src/link-panel/stories/link-panel.stories.tsx

@@ -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>
-);

@navikt/ds-react/src/link/stories/link.stories.mdx

@@ -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>

@navikt/ds-react/src/loader/Loader.tsx

@@ -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;

@navikt/ds-react/src/loader/index.ts

@@ -0,0 +1,2 @@
+export { default as Loader } from "./Loader";
+export * from "./Loader";

@navikt/ds-react/src/loader/stories/demo.css

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

@navikt/ds-react/src/loader/stories/loader.stories.mdx

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

@navikt/ds-react/src/loader/stories/loader.stories.tsx

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

@navikt/ds-react/src/modal/stories/modal.stories.mdx

@@ -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.

@navikt/ds-react/src/panel/stories/panel.stories.mdx

@@ -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>

@navikt/ds-react/src/popover/stories/popover.stories.mdx

@@ -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.

@navikt/ds-react/src/speech-bubble/Bubble.tsx

@@ -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;

@navikt/ds-react/src/speech-bubble/SpeechBubble.tsx

@@ -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;

@navikt/ds-react/src/speech-bubble/index.ts

@@ -0,0 +1,4 @@
+export { default as SpeechBubble } from "./SpeechBubble";
+export * from "./SpeechBubble";
+export { default as Bubble } from "./Bubble";
+export * from "./Bubble";

@navikt/ds-react/src/speech-bubble/stories/illustration.tsx

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

@navikt/ds-react/src/speech-bubble/stories/speechbubble.stories.mdx

@@ -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>

@navikt/ds-react/src/speech-bubble/stories/speechbubble.stories.tsx

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

@navikt/ds-react/src/tag/stories/tag.stories.mdx

@@ -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>

@navikt/ds-react/src/typography/stories/typography.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/addon-docs/blocks";
+import { Meta } from "@storybook/addon-docs";
 
 <Meta title="ds-react/Typography/intro" />
 

package.json

@@ -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",

packages/nav-frontend-hjelpetekst/package.json

@@ -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",

packages/nav-frontend-hjelpetekst/src/hjelpetekst.tsx

@@ -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}