Lerna versionbump [ci skip]

- @navikt/ds-react@0.6.7
Bedre dokumentasjon for nye pakkebiblioteket i storybook (#1148 )
2026-10-13 01:02:02 +00:00 · 2021-07-14 09:35:27 +00:00 · 2021-07-14 11:23:42 +02:00 · 2021-07-13 18:09:43 +00:00 · 2021-07-13 19:57:35 +02:00 · 2021-07-13 13:48:22 +00:00
48 changed files with 1991 additions and 452 deletions
@@ -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.
@@ -3,20 +3,23 @@
  border: var(--navds-border-default);

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

 .navds-alert--s {
-  padding: 0.1875rem var(--navds-spacing-4);
+  padding: var(--navds-spacing-1) var(--navds-spacing-4);
+  min-height: 32px;
 }

-.navds-alert > svg {
-  align-self: center;
+.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: 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);
-}
@@ -3,6 +3,7 @@
  align-items: center;
  column-gap: 0.5em;
  padding: var(--navds-spacing-1);
+  min-height: 32px;
 }

 .navds-copy-to-clipboard__popover {
@@ -14,6 +14,7 @@
@import "header.css";
@import "internal-header.css";
@import "link.css";
+@import "loader.css";
@import "modal.css";
@import "popover.css";
@import "tag.css";
@@ -0,0 +1,89 @@
+.navds-loader {
+  width: 1.5rem;
+  display: inline-block;
+  position: relative;
+  animation: loader-rotate 1.4s linear infinite;
+}
+
+.navds-loader circle:nth-child(3) {
+  animation: loader-dasharray 1.4s ease-in-out infinite;
+  stroke-dasharray: 80px, 200px;
+  stroke-dashoffset: 0;
+  stroke: var(--navds-color-gray-40);
+}
+
+.navds-loader circle:nth-child(2) {
+  stroke: var(--navds-color-gray-10);
+}
+
+.navds-loader--transparent circle:nth-child(2) {
+  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 circle:nth-child(3) {
+  stroke: currentColor;
+}
+
+.navds-button:hover .navds-loader circle:nth-child(2) {
+  stroke: rgba(255, 255, 255, 0.3);
+}
+
+.navds-button:active .navds-loader circle:nth-child(2) {
+  stroke: rgba(255, 255, 255, 0.3);
+}
+
+.navds-button--action .navds-loader circle:nth-child(2),
+.navds-button--danger .navds-loader circle:nth-child(2) {
+  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.4",
+  "version": "0.6.12",
  "private": false,
  "description": "Css for NAV Designsystem components",
  "author": "NAV Designsystem team",
@@ -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.4",
+  "version": "0.6.7",
  "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.
@@ -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">
@@ -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 focusable="false" role="img" />;
+      return (
+        <ErrorFilled
+          aria-label={`${variant}-ikon`}
+          focusable="false"
+          role="img"
+        />
+      );
    case "warning":
-      return <WarningFilled focusable="false" role="img" />;
+      return (
+        <WarningFilled
+          aria-label={`${variant}-ikon`}
+          focusable="false"
+          role="img"
+        />
+      );
    case "info":
-      return <InformationFilled focusable="false" role="img" />;
+      return (
+        <InformationFilled
+          aria-label={`${variant}-ikon`}
+          focusable="false"
+          role="img"
+        />
+      );
    case "success":
-      return <SuccessFilled focusable="false" role="img" />;
+      return (
+        <SuccessFilled
+          aria-label={`${variant}-ikon`}
+          focusable="false"
+          role="img"
+        />
+      );
    default:
      return null;
  }
@@ -56,8 +80,11 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(
      )}
      {...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>
@@ -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",
@@ -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>
    </>
  );
 };
@@ -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>
@@ -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);
+  }
+}
+```
@@ -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,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>
@@ -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>
@@ -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>
@@ -38,6 +38,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,
@@ -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
+
+Kmponentene og storisene 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,78 @@
+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;
+}
+
+const Loader = forwardRef<SVGSVGElement, LoaderProps>(
+  (
+    {
+      children,
+      className,
+      size = "m",
+      title = "venter...",
+      transparent = false,
+      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,
+        })}
+        focusable="false"
+        viewBox="0 0 50 50"
+        preserveAspectRatio="xMidYMid"
+        {...rest}
+      >
+        <title id={id ?? internalId.current}>{title}</title>
+        <circle
+          xmlns="http://www.w3.org/2000/svg"
+          cx="25"
+          cy="25"
+          r="20"
+          fill="none"
+          strokeWidth="5"
+        />
+        <circle
+          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,86 @@
+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>
+
+## 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 circle:nth-child(3) {
+  stroke: var(--navds-color-gray-40);
+}
+
+/* Background */
+.navds-loader circle:nth-child(2) {
+  stroke: var(--navds-color-gray-10);
+}
+```
@@ -0,0 +1,59 @@
+import React from "react";
+import { Loader } from "../index";
+import { Button } from "../../index";
+import { Meta } from "@storybook/react/types-6-0";
+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 />
+      <h2>Brukt i knapper</h2>
+      <div>
+        <Button>
+          Laster...
+          <Loader />
+        </Button>{" "}
+        <Button size="s">
+          Laster...
+          <Loader />
+        </Button>
+        <h2>Variants</h2>
+        <Button variant="secondary">
+          Laster...
+          <Loader />
+        </Button>{" "}
+        <Button variant="action">
+          Laster...
+          <Loader />
+        </Button>{" "}
+        <Button variant="danger">
+          Laster...
+          <Loader />
+        </Button>
+      </div>
+    </div>
+  );
+};
@@ -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,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>
@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/addon-docs/blocks";
+import { Meta } from "@storybook/addon-docs";

 <Meta title="ds-react/Typography/intro" />

@@ -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}
Author	SHA1	Message	Date
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