Lerna versionbump [ci skip]

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

.github/workflows/build-publish.yml

@@ -8,6 +8,7 @@ on:
     branches: [master]
   pull_request:
     branches: [master]
+  workflow_dispatch:
 
 jobs:
   build:
@@ -28,11 +29,15 @@ jobs:
           key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
       - name: Install deps
         if: steps.node-cache.outputs.cache-hit != 'true'
-        run: yarn install --frozen-lockfile
+        run: yarn install
       - name: Gulp-build
         run: yarn boot
       - name: Eslint and Stylelint
         run: yarn lint
+      - name: add access token to .env
+        run: echo "ACCESS_TOKEN=${{ secrets.VERKTOYKASSE_INNHOLD_TOKEN }}" >> website/.env
+      - name: add branch token to .env
+        run: echo "BRANCH=HEAD" >> website/.env
       - name: Test gatsby-build
         run: yarn build:gatsby
       - name: Test chromatic
@@ -96,9 +101,13 @@ jobs:
           key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
       - name: Install deps
         if: steps.node-cache.outputs.cache-hit != 'true'
-        run: yarn install --frozen-lockfile
+        run: yarn install
       - name: Gulp-build
         run: yarn boot
+      - name: add access token to .env
+        run: echo "ACCESS_TOKEN=${{ secrets.VERKTOYKASSE_INNHOLD_TOKEN }}" >> website/.env
+      - name: add branch token to .env
+        run: echo "BRANCH=HEAD" >> website/.env
       - name: Building Gatsby
         run: yarn build:gatsby
       - name: Building Storybook

.github/workflows/vk-innhold-dev.yml

@@ -0,0 +1,47 @@
+name: Publish verktøykasse-innhold to dev
+
+on:
+  push:
+    branches: verktoykasse-prototype
+  repository_dispatch:
+    types: [new-content]
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          ref: verktoykasse-prototype
+          fetch-depth: 0 # Required to retrieve git history
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14
+      - name: Node-modules cache
+        uses: actions/cache@v2
+        id: node-cache
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+      - name: Install deps
+        if: steps.node-cache.outputs.cache-hit != 'true'
+        run: yarn install
+      - name: Gulp-build
+        run: yarn boot
+      - name: Eslint and Stylelint
+        run: yarn lint
+      - name: add access token to .env
+        run: echo "ACCESS_TOKEN=${{ secrets.VERKTOYKASSE_INNHOLD_TOKEN }}" >> website/.env
+      - name: add branch token to .env
+        run: echo "BRANCH=dev" >> website/.env
+      - name: Gatsby-build
+        run: yarn build:gatsby
+      - name: Deploy to dev gh-pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          personal_token: ${{secrets.GIT_REPO}}
+          external_repository: navikt/verktoykasse-innhold
+          publish_dir: website/public
+          user_name: "github-actions[bot]"
+          user_email: "github-actions[bot]@users.noreply.github.com"

.specifyrc.json

@@ -0,0 +1,57 @@
+{
+  "repository": "@nav/designsystem",
+  "head": "updated-specify-tokens",
+  "base": "master",
+  "rules": [
+    {
+      "name": "Specify / Icons",
+      "path": "@navikt/ds-icons/svg",
+      "filter": {
+        "types": ["vector"]
+      },
+      "parsers": [
+        {
+          "name": "pascalcasify",
+          "options": {
+            "keys": ["name"]
+          }
+        },
+        {
+          "name": "name-assets-files-by-pattern",
+          "options": {
+            "pattern": "{{name}}.{{format}}"
+          }
+        }
+      ]
+    },
+    {
+      "name": "Specify / Icons - metadata",
+      "path": "@navikt/ds-icons/figma-api/metadata-specify.json",
+      "filter": {
+        "types": ["vector"]
+      },
+      "parsers": [
+        {
+          "name": "pascalcasify",
+          "options": {
+            "keys": ["name"]
+          }
+        },
+        {
+          "name": "pick",
+          "options": {
+            "keys": [
+              "name",
+              "createdAt",
+              "updatedAt",
+              "meta.description",
+              "meta.parentFrame",
+              "meta.frame",
+              "page"
+            ]
+          }
+        }
+      ]
+    }
+  ]
+}

.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/accordion-menu.css

@@ -22,18 +22,11 @@
   text-decoration: underline;
 }
 
-.navds-accordion-menu-collapsable .navds-accordion-menu__list,
-.navds-accordion-menu-collapsable
-  .navds-accordion-menu-collapsable
-  .navds-accordion-menu-collapsable__button {
-  font-weight: var(--navds-font-weight-regular);
-}
-
 .navds-accordion-menu-item,
 .navds-accordion-menu-collapsable__button {
   display: flex;
   padding: var(--navds-spacing-3) var(--navds-spacing-4);
-  line-height: 1.5rem; /* TODO: fix typography. */
+  text-decoration: none;
 }
 
 .navds-accordion-menu-collapsable__expand-icon {
@@ -82,16 +75,16 @@
 .navds-accordion-menu-collapsable__button:focus {
   outline: 3px solid var(--navds-text-focus);
   outline-offset: -3px;
+  color: var(--navds-color-darkgray);
 }
 
 .navds-accordion-menu-item:hover,
 .navds-accordion-menu-collapsable__button:hover {
-  background-color: var(--navds-color-gray-20);
+  background-color: var(--navds-color-blue-10);
 }
 
 .navds-accordion-menu-item--active {
   box-shadow: inset 0.5rem 0 var(--navds-color-text-link);
   color: var(--navds-color-text);
   text-decoration: none;
-  font-weight: var(--navds-font-weight-bold);
 }

@navikt/ds-css/accordion.css

@@ -5,14 +5,12 @@
 .navds-accordion {
   position: relative;
   background: var(--navds-color-background);
-  border: var(--navds-border-default);
-  border-radius: 4px;
+  border-bottom: 2px solid #c9c9c9;
 }
 
 .navds-accordion:hover {
-  box-shadow: var(--navds-color-hover);
-  border: var(--navds-panel-hover);
-  color: black;
+  /* color: black; */
+  border-bottom: 2px solid var(--navds-color-blue-50);
 }
 
 .navds-accordion:focus,
@@ -39,16 +37,16 @@
 
 .navds-accordion__button {
   padding: var(--navds-spacing-4);
-  border-radius: 4px;
   background: transparent;
-  border: 0;
   text-align: left;
+  border: none;
   width: 100%;
   margin-bottom: 0;
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   align-items: center;
+  color: var(--navds-color-text-link);
 }
 
 .navds-accordion__button:hover .navds-accordion__heading {
@@ -69,3 +67,16 @@
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
+
+.navds-accordion__chevron--filled {
+  display: none;
+}
+
+.navds-accordion__button:hover
+  > .navds-accordion__chevron.navds-accordion__chevron--filled {
+  display: inherit;
+}
+
+.navds-accordion__button:hover > .navds-accordion__chevron {
+  display: none;
+}

@navikt/ds-css/alert.css

@@ -2,21 +2,24 @@
   border-radius: 4px;
   border: var(--navds-border-default);
 
-  /* Padding calculated based on 16px font for 64px tall alert */
-  padding: 1.1875rem var(--navds-spacing-4);
+  /* Padding calculated based on 18px font for 64px tall alert */
+  padding: var(--navds-spacing-4) var(--navds-spacing-4);
   display: grid;
   grid-auto-flow: column;
-  column-gap: 0.75rem;
   justify-content: start;
+  min-height: 64px;
+  box-sizing: border-box;
 }
 
-.navds-alert--small {
-  border-radius: 0;
-  padding: var(--navds-spacing-2) var(--navds-spacing-4);
+.navds-alert--s {
+  padding: var(--navds-spacing-1) var(--navds-spacing-4);
+  min-height: 32px;
 }
 
-.navds-alert > svg {
+.navds-alert > span > svg {
+  margin-right: var(--navds-spacing-3);
   font-size: 1.5rem;
+  flex-shrink: 0;
   background: radial-gradient(
     circle,
     var(--navds-color-background) 50%,
@@ -25,8 +28,17 @@
   );
 }
 
+.navds-alert > div {
+  display: block;
+  margin: auto 0;
+  max-width: 43.5rem;
+  flex: 1;
+}
+
 .navds-alert > span {
-  margin-top: 1px;
+  display: flex;
+  align-items: center;
+  max-height: calc(var(--navds-spacing-8) - 2px);
 }
 
 .navds-alert--error {
@@ -34,7 +46,7 @@
   background-color: var(--navds-color-error-background);
 }
 
-.navds-alert--error > svg {
+.navds-alert--error > span > svg {
   color: var(--navds-color-red-60);
 }
 
@@ -43,7 +55,7 @@
   background-color: var(--navds-color-warning-background);
 }
 
-.navds-alert--warning > svg {
+.navds-alert--warning > span > svg {
   color: var(--navds-color-orange-40);
   background: radial-gradient(
     circle,
@@ -58,7 +70,7 @@
   background-color: var(--navds-color-info-background);
 }
 
-.navds-alert--info > svg {
+.navds-alert--info > span > svg {
   color: var(--navds-color-lightblue-70);
 }
 
@@ -67,6 +79,6 @@
   background-color: var(--navds-color-success-background);
 }
 
-.navds-alert--success > svg {
+.navds-alert--success > span > svg {
   color: var(--navds-color-green-70);
 }

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

@@ -5,7 +5,13 @@
 @import "Source-Sans-Pro-600.css";
 @import "print.css";
 @import "utility.css";
-@import "smooth-scroll.css";
+
+/* Disabled because of UU concerns */
+/* @import "smooth-scroll.css"; */
+
+* {
+  box-sizing: border-box;
+}
 
 body {
   font-family: var(--navds-font-family);

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

@@ -1,6 +1,7 @@
 /**
 * Solution copied from blogpost
 * https://schepp.dev/posts/smooth-scrolling-and-page-search/
+* Currently disabled
 */
 
 @keyframes smoothscroll1 {

@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: calc(0.625rem - 2px) calc(var(--navds-spacing-8) - 2px);
+  padding: calc(var(--navds-spacing-3) - 2px) var(--navds-spacing-3);
 }
 
-.navds-button--small {
+.navds-button > svg {
+  font-size: 1.5rem;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.navds-button--s > svg {
+  font-size: 1.25rem;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.navds-button > svg + *:not(.sr-only),
+.navds-button > *:not(.sr-only) + svg {
+  margin-left: 0.5rem;
+}
+
+/* .navds-button:last-child {
+  margin-left: 0.5rem;
+} */
+
+.navds-button--s {
   /* Padding calculated based on 16px font for 32px tall button */
-  padding: calc(0.3125rem - 2px) calc(var(--navds-spacing-4) - 2px);
+  padding: 0.25rem calc(var(--navds-spacing-4) - 2px);
+  min-height: 32px;
 }
 
 .navds-button:focus {
@@ -33,16 +57,7 @@
 .navds-button--primary:active {
   color: var(--navds-color-text-inverse);
   background-color: var(--navds-color-action-hover);
-  border-width: 0;
-
-  /* Padding calculated based on 18px font for 44px tall button */
-  padding: 0.625rem var(--navds-spacing-8);
-}
-
-.navds-button--primary:hover.navds-button--small,
-.navds-button--primary:active.navds-button--small {
-  /* Padding calculated based on 16px font for 32px tall button */
-  padding: 0.3125rem var(--navds-spacing-4);
+  border-color: transparent;
 }
 
 .navds-button--primary:active {
@@ -86,42 +101,18 @@
 
 .navds-button--action,
 .navds-button--danger {
-  /* Padding calculated based on 18px font for 44px tall button */
-  padding: 0.625rem var(--navds-spacing-8);
-  border-width: 0;
-  transform: translateY(calc(-1 * 2px));
-  position: relative;
-  color: var(--navds-color-text-inverse);
-}
-
-.navds-button--action.navds-button--small,
-.navds-button--danger.navds-button--small {
-  /* Padding calculated based on 16px font for 32px tall button */
-  padding: 0.3125rem var(--navds-spacing-4);
-}
-
-.navds-button--action:not(:focus),
-.navds-button--danger:not(:focus) {
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 2px 0 rgba(0, 0, 0, 0.25);
+  color: white;
+  border-width: 1px;
 }
 
 .navds-button--action:hover {
   background-color: var(--navds-color-action-hover);
+  border-color: var(--navds-color-action-hover);
 }
 
 .navds-button--danger:hover {
   background-color: var(--navds-color-danger-hover);
-}
-
-.navds-button--danger:hover,
-.navds-button--action:hover {
-  transform: translateY(calc(-1 * 3px));
-  position: relative;
-}
-
-.navds-button--action:hover:not(:focus),
-.navds-button--danger:hover:not(:focus) {
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 3px 0 rgba(0, 0, 0, 0.25);
+  border-color: var(--navds-color-danger-hover);
 }
 
 .navds-button--action:active {
@@ -132,131 +123,9 @@
   background-color: var(--navds-color-danger-active);
 }
 
-.navds-button--action:active,
-.navds-button--danger:active {
-  transform: translateY(0);
-  position: relative;
-}
-
-.navds-button--action:active:not(:focus),
-.navds-button--danger:active:not(:focus) {
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 0 0 rgba(0, 0, 0, 0.25);
-}
-
-.navds-button--action:focus {
-  color: var(--navds-color-action-default);
-  background-color: var(--navds-color-background);
-}
-
+.navds-button--action:focus,
 .navds-button--danger:focus {
-  color: var(--navds-color-danger-default);
-  background-color: var(--navds-color-background);
-}
-
-.navds-button--danger:focus,
-.navds-button--action:focus {
-  /* Padding calculated based on 18px font for 44px tall button */
-  padding: calc(0.625rem - 2px) calc(var(--navds-spacing-8) - 2px);
-  transform: translateY(calc(-1 * 2px));
-  position: relative;
-  border-width: 2px;
-}
-
-.navds-button--action:focus.navds-button--small,
-.navds-button--danger:focus.navds-button--small {
-  /* Padding calculated based on 16px font for 32px tall button */
-  padding: calc(0.3125rem - 2px) calc(var(--navds-spacing-4) - 2px);
-}
-
-.navds-button--action:hover:focus {
-  background-color: var(--navds-color-action-hover);
-}
-
-.navds-button--danger:hover:focus {
-  background-color: var(--navds-color-danger-hover);
-}
-
-.navds-button--action:hover:focus,
-.navds-button--danger:hover:focus {
-  /* Padding calculated based on 18px font for 44px tall button */
-  padding: 0.625rem var(--navds-spacing-8);
-  border-width: 0;
-  color: var(--navds-color-text-inverse);
-}
-
-.navds-button--action:hover:focus.navds-button--small,
-.navds-button--danger:hover:focus.navds-button--small {
-  /* Padding calculated based on 16px font for 32px tall button */
-  padding: 0.3125rem var(--navds-spacing-4);
-}
-
-.navds-button--action:active:focus {
-  color: var(--navds-color-action-active);
-  border-color: var(--navds-color-action-active);
-}
-
-.navds-button--danger:active:focus {
-  color: var(--navds-color-danger-active);
-  border-color: var(--navds-color-danger-active);
-}
-
-.navds-button--action:active:focus,
-.navds-button--danger:active:focus {
-  /* Padding calculated based on 18px font for 44px tall button */
-  padding: calc(0.625rem - 2px) calc(var(--navds-spacing-8) - 2px);
-  transform: translateY(0);
-  position: relative;
-  border-width: 2px;
-  background-color: var(--navds-color-background);
-}
-
-.navds-button--action:active:focus.navds-button--small,
-.navds-button--danger:active:focus.navds-button--small {
-  /* Padding calculated based on 16px font for 32px tall button */
-  padding: calc(0.3125rem - 2px) calc(var(--navds-spacing-4) - 2px);
-}
-
-.navds-button--action:hover:focus:active {
-  color: var(--navds-color-text-inverse);
-  background-color: var(--navds-color-action-active);
-}
-
-.navds-button--danger:hover:focus:active {
-  color: var(--navds-color-text-inverse);
-  background-color: var(--navds-color-danger-active);
-}
-
-/**************************
- * ::before *
- **************************/
-
-.navds-button--action::before,
-.navds-button--danger::before {
-  bottom: calc(-1 * 2px);
-  height: 2px;
-  content: "";
-  display: block;
-  position: absolute;
-  left: 0;
-  right: 0;
-}
-
-.navds-button--action:hover::before,
-.navds-button--danger:hover::before {
-  bottom: calc(-1 * 3px);
-  height: 3px;
-}
-
-.navds-button--action:focus::before,
-.navds-button--danger:focus::before {
-  bottom: calc(-1 * 2px);
-  height: 2px;
-}
-
-.navds-button--action:active::before,
-.navds-button--danger:active::before {
-  bottom: 0;
-  height: 0;
+  border-color: white;
 }
 
 /**************************
@@ -264,8 +133,6 @@
  **************************/
 
 .navds-button:disabled:disabled {
-  /* Padding calculated based on 18px font for 44px tall button */
-  padding: 0.625rem var(--navds-spacing-8);
   background-color: var(--navds-color-disabled);
   color: var(--navds-color-text-inverse);
   cursor: not-allowed;
@@ -273,8 +140,3 @@
   box-shadow: none;
   transform: none;
 }
-
-.navds-button:disabled:disabled.navds-button--small {
-  /* Padding calculated based on 16px font for 32px tall button */
-  padding: 0.3125rem var(--navds-spacing-4);
-}

@navikt/ds-css/card.css

@@ -0,0 +1,31 @@
+/*
+  MicroCard
+*/
+
+.navds-card__micro {
+  border-radius: 1rem;
+  color: var(--navds-color-text-primary);
+  display: inline-flex;
+  padding: var(--navds-spacing-1) var(--navds-spacing-2);
+  text-decoration: none;
+  background-color: var(--navds-color-orange-20);
+  border: 1px solid transparent;
+}
+
+.navds-card__micro:hover {
+  background-color: var(--navds-color-white);
+  border-color: var(--navds-color-blue-50);
+  color: var(--navds-color-blue-50);
+}
+
+.navds-card__micro:focus {
+  background-color: var(--navds-color-white);
+  color: var(--navds-color-blue-50);
+  outline: none;
+  box-shadow: var(--navds-shadow-focus);
+}
+
+.navds-card__micro:active {
+  background-color: var(--navds-color-blue-70);
+  color: var(--navds-color-white);
+}

@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/header.css

@@ -0,0 +1,63 @@
+.navds-header {
+  display: flex;
+  justify-content: center;
+  background-color: var(--navds-color-background);
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+  padding-left: calc((100vw - 100%) / 2);
+  padding-right: calc((100vw - 100%) / 2);
+  margin-left: calc((100vw - 100%) / -2);
+  margin-right: calc((100vw - 100%) / -2);
+}
+
+.navds-header__wrapper {
+  width: 100%;
+  max-width: 56.5rem;
+  text-align: start;
+}
+
+.navds-header__title {
+  display: flex;
+  margin: 0 auto;
+  width: 100%;
+  position: relative;
+  flex-direction: column;
+}
+
+.navds-header--left > .navds-header__wrapper {
+  text-align: start;
+}
+
+.navds-header--center > .navds-header__wrapper {
+  text-align: center;
+}
+
+.navds-header__illustration {
+  margin-right: 1.5rem;
+  pointer-events: none;
+}
+
+.navds-header__illustration > svg {
+  width: 5rem;
+  height: 5rem;
+}
+
+.navds-header--situation {
+  box-shadow: 0 -4px 0 var(--navds-color-orange-40) inset;
+}
+.navds-header--product {
+  box-shadow: 0 -4px 0 var(--navds-color-green-40) inset;
+}
+.navds-header--guide {
+  box-shadow: 0 -4px 0 var(--navds-color-deepblue-40) inset;
+}
+
+@media (max-width: 649px) {
+  .navds-header__illustration > svg {
+    width: 3rem;
+    height: 3rem;
+  }
+  .navds-header__title {
+    font-size: var(--navds-font-size-title-xl);
+  }
+}

@navikt/ds-css/index.css

@@ -8,12 +8,16 @@
 @import "accordion-menu.css";
 @import "alert.css";
 @import "button.css";
+@import "card.css";
 @import "content-container.css";
 @import "copy-to-clipboard.css";
+@import "header.css";
 @import "internal-header.css";
 @import "link.css";
+@import "loader.css";
 @import "modal.css";
 @import "popover.css";
 @import "tag.css";
 @import "panel.css";
 @import "link-panel.css";
+@import "speech-bubble.css";

@navikt/ds-css/internal-header.css

@@ -2,7 +2,7 @@
  * .navds-header *
  **************************/
 
-.navds-header {
+.navds-interal-header {
   display: flex;
   align-items: center;
   background: var(--navds-color-darkgray);
@@ -11,16 +11,16 @@
   min-height: 50px;
 }
 
-.navds-header__column {
+.navds-interal-header__column {
   display: flex;
   align-items: center;
 }
 
 /**************************
-  * .navds-header__title *
+  * .navds-interal-header__title *
   **************************/
 
-.navds-header__title {
+.navds-interal-header__title {
   padding: 0 var(--navds-spacing-6);
   border-right: 1px solid var(--navds-color-gray-40);
   display: flex;
@@ -31,21 +31,21 @@
   color: var(--navds-color-text-inverse);
 }
 
-.navds-header__title > span > a {
+.navds-interal-header__title > span > a {
   text-decoration: none;
   color: inherit;
 }
 
-.navds-header__title > span > a:focus {
+.navds-interal-header__title > span > a:focus {
   box-shadow: var(--navds-shadow-focus-on-dark);
   outline: none;
 }
 
 /**************************
-  * .navds-header__user *
+  * .navds-interal-header__user *
   **************************/
 
-.navds-header__user {
+.navds-interal-header__user {
   color: var(--navds-color-text-inverse);
   padding: 0 var(--navds-spacing-6);
   margin-left: auto;
@@ -55,6 +55,6 @@
   align-items: center;
 }
 
-.navds-header__name.navds-body-short {
+.navds-interal-header__name.navds-body-short {
   margin-right: var(--navds-spacing-4);
 }

@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.5.3",
+  "version": "0.6.14",
   "private": false,
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",
@@ -21,7 +21,7 @@
     "watch-css": "postcss -w --use postcss-import -o dist/index.css index.css"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^0.3.2",
+    "@navikt/ds-tokens": "^0.4.3",
     "normalize.css": "^8.0.1",
     "postcss": "^8.2.7",
     "postcss-cli": "^8.3.1",

@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-css/typography.css

@@ -7,7 +7,7 @@
 .navds-title--2xl {
   font-size: var(--navds-font-size-title-2xl);
   letter-spacing: -0.01em;
-  line-height: var(--navds-font-line-height-2xl);
+  line-height: var(--navds-font-line-height-s);
 }
 
 .navds-title--2xl.navds-typo--spacing {
@@ -17,7 +17,7 @@
 .navds-title--xl {
   font-size: var(--navds-font-size-title-xl);
   letter-spacing: -0.008em;
-  line-height: var(--navds-font-line-height-xl);
+  line-height: var(--navds-font-line-height-s);
 }
 
 .navds-title--xl.navds-typo--spacing {
@@ -27,7 +27,7 @@
 .navds-title--l {
   font-size: var(--navds-font-size-title-l);
   letter-spacing: -0.004em;
-  line-height: var(--navds-font-line-height-l);
+  line-height: var(--navds-font-line-height-s);
 }
 
 .navds-title--l.navds-typo--spacing {
@@ -37,7 +37,7 @@
 .navds-title--m {
   font-size: var(--navds-font-size-title-m);
   letter-spacing: -0.002em;
-  line-height: var(--navds-font-line-height-m);
+  line-height: var(--navds-font-line-height-s);
 }
 
 .navds-title--m.navds-typo--spacing {
@@ -58,7 +58,7 @@
 .navds-ingress {
   font-size: var(--navds-font-size-xl);
   letter-spacing: -0.001em;
-  line-height: var(--navds-font-line-height-s);
+  line-height: var(--navds-font-line-height-m);
   margin: 0;
 }
 
@@ -70,14 +70,14 @@
 .navds-body-long {
   font-size: var(--navds-font-size-l);
   letter-spacing: 0;
-  line-height: var(--navds-font-line-height-s);
+  line-height: var(--navds-font-line-height-m);
   margin: 0;
 }
 
 .navds-body-short {
   font-size: var(--navds-font-size-l);
   letter-spacing: 0;
-  line-height: var(--navds-font-line-height-xs);
+  line-height: var(--navds-font-line-height-s);
   margin: 0;
 }
 
@@ -92,7 +92,7 @@
 .navds-body--s {
   font-size: var(--navds-font-size-m);
   letter-spacing: 0.002em;
-  line-height: var(--navds-font-line-height-xs);
+  line-height: var(--navds-font-line-height-s);
 }
 
 .navds-body-long.navds-body--s.navds-typo--spacing {
@@ -107,7 +107,7 @@
 .navds-label {
   font-size: var(--navds-font-size-l);
   letter-spacing: 0;
-  line-height: var(--navds-font-line-height-xs);
+  line-height: var(--navds-font-line-height-s);
   font-weight: var(--navds-font-weight-bold);
   margin: 0;
 }
@@ -119,7 +119,7 @@
 .navds-label--s {
   font-size: var(--navds-font-size-m);
   letter-spacing: 0.002em;
-  line-height: var(--navds-font-line-height-2xs);
+  line-height: var(--navds-font-line-height-s);
 }
 
 .navds-label--s.navds-typo--spacing {
@@ -130,7 +130,7 @@
 .navds-detail {
   font-size: var(--navds-font-size-s);
   letter-spacing: 0.004em;
-  line-height: var(--navds-font-line-height-2xs);
+  line-height: var(--navds-font-line-height-s);
   font-weight: var(--navds-font-weight-bold);
   margin: 0;
 }

@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.5.4",
+  "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/AccordionMenuCollapsable.tsx

@@ -32,6 +32,7 @@ const AccordionMenuCollapsable = forwardRef<
         {title}
         <Expand
           role="img"
+          focusable="false"
           aria-label={isOpen ? "Pil peker opp" : "Pil peker ned"}
           className="navds-accordion-menu-collapsable__expand-icon"
         />

@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/Accordion.tsx

@@ -1,7 +1,7 @@
-import React, { forwardRef, useEffect, useRef, useState } from "react";
+import React, { forwardRef, useEffect, useState } from "react";
 import cl from "classnames";
 import { UnmountClosed, Collapse } from "react-collapse";
-import { Expand } from "@navikt/ds-icons";
+import { Expand, ExpandFilled } from "@navikt/ds-icons";
 import { v4 as uuidv4 } from "uuid";
 
 export interface AccordionProps
@@ -37,7 +37,7 @@ export interface AccordionProps
   renderContentWhenClosed?: boolean;
 }
 
-const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
+const Accordion = forwardRef<HTMLButtonElement, AccordionProps>(
   (
     {
       children,
@@ -50,10 +50,16 @@ const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
     },
     ref
   ) => {
-    const contentId = useRef(uuidv4());
-    const buttonId = useRef(uuidv4());
+    const [contentId, setContentId] = useState("");
+    const [buttonId, setButtonId] = useState("");
     const [internalOpen, setInternalOpen] = useState<boolean>(open);
 
+    // Forsøk på å fikse Nextjs SSR server/client clock problem
+    useEffect(() => {
+      setContentId(() => uuidv4());
+      setButtonId(() => uuidv4());
+    }, []);
+
     useEffect(() => {
       setInternalOpen(open);
     }, [open]);
@@ -64,17 +70,17 @@ const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
 
     return (
       <div
-        ref={ref}
         className={cl("navds-accordion", className, {
           "navds-accordion--open": internalOpen,
           "navds-accordion--closed": !internalOpen,
         })}
       >
         <button
-          id={buttonId.current}
+          ref={ref}
+          id={buttonId}
           className="navds-accordion__button"
           aria-expanded={open}
-          aria-controls={contentId.current}
+          aria-controls={contentId}
           onClick={onClick ? onClick : () => setInternalOpen((open) => !open)}
           {...rest}
         >
@@ -82,17 +88,24 @@ const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
             {heading}
           </span>
           <Expand
+            focusable="false"
+            role="img"
             className={cl(
               "navds-accordion__chevron",
               `navds-accordion__chevron--${internalOpen ? "up" : "down"}`
             )}
           />
+          <ExpandFilled
+            focusable="false"
+            role="img"
+            className={cl(
+              "navds-accordion__chevron",
+              "navds-accordion__chevron--filled",
+              `navds-accordion__chevron--${internalOpen ? "up" : "down"}`
+            )}
+          />
         </button>
-        <div
-          id={contentId.current}
-          role="region"
-          aria-labelledby={buttonId.current}
-        >
+        <div id={contentId} role="region" aria-labelledby={buttonId}>
           <CollapseComponent isOpened={internalOpen}>
             <div className="navds-accordion__content">{children}</div>
           </CollapseComponent>

@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/Alert.tsx

@@ -24,26 +24,50 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
    * Reduces padding on component
    * @default "medium"
    */
-  size?: "medium" | "small";
+  size?: "m" | "s";
 }
 
 const Icon = ({ variant }) => {
   switch (variant) {
     case "error":
-      return <ErrorFilled />;
+      return (
+        <ErrorFilled
+          aria-label={`${variant}-ikon`}
+          focusable="false"
+          role="img"
+        />
+      );
     case "warning":
-      return <WarningFilled />;
+      return (
+        <WarningFilled
+          aria-label={`${variant}-ikon`}
+          focusable="false"
+          role="img"
+        />
+      );
     case "info":
-      return <InformationFilled />;
+      return (
+        <InformationFilled
+          aria-label={`${variant}-ikon`}
+          focusable="false"
+          role="img"
+        />
+      );
     case "success":
-      return <SuccessFilled />;
+      return (
+        <SuccessFilled
+          aria-label={`${variant}-ikon`}
+          focusable="false"
+          role="img"
+        />
+      );
     default:
       return null;
   }
 };
 
 const Alert = forwardRef<HTMLDivElement, AlertProps>(
-  ({ variant, children, className, size = "medium", ...rest }, ref) => (
+  ({ variant, children, className, size = "m", ...rest }, ref) => (
     <div
       ref={ref}
       className={cl(
@@ -52,12 +76,15 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(
         `navds-alert--${variant}`,
         `navds-alert--${size}`,
         "navds-body-long",
-        "navds-body--s"
+        { "navds-body--s": size === "s" }
       )}
       {...rest}
     >
-      <Icon variant={variant} />
-      <span>{children}</span>
+      <span>
+        <span className="sr-only">{`${variant}-ikon`}</span>
+        <Icon variant={variant} />
+      </span>
+      <div>{children}</div>
     </div>
   )
 );

@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="small">
-            {Array(8).fill(`${variant} content`).join(" ")}
+          <Alert key={variant} variant={variant} size="s">
+            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/Button.tsx

@@ -19,7 +19,7 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
    * Reduces internal padding for component
    * @default "medium"
    */
-  size?: "medium" | "small";
+  size?: "m" | "s";
   /**
    * Prevent the user from interacting with the button: it cannot be pressed or focused.
    * @default false
@@ -28,7 +28,7 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
 }
 
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ variant = "primary", className, size = "medium", ...rest }, ref) => (
+  ({ variant = "primary", className, size = "m", ...rest }, ref) => (
     <button
       ref={ref}
       className={cl(
@@ -36,7 +36,8 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         "navds-button",
         `navds-button--${variant}`,
         `navds-button--${size}`,
-        "navds-body-short"
+        "navds-body-short",
+        { "navds-body--s": size === "s" }
       )}
       {...rest}
     />

@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",
@@ -52,7 +53,7 @@ export const All = () => {
         {variants.map((variant) => (
           <a
             key={variant}
-            className={`navds-button navds-button--${variant}`}
+            className={`navds-button navds-button--${variant} navds-body-short`}
             href="the-link"
           >
             {variant}
@@ -62,11 +63,35 @@ export const All = () => {
       <h2>Small</h2>
       <Section>
         {variants.map((variant) => (
-          <Button key={variant} variant={variant} size="small">
+          <Button key={variant} variant={variant} size="s">
             {variant}
           </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/MicroCard.tsx

@@ -0,0 +1,34 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+import { OverridableComponent } from "../util";
+
+export interface MicroCardProps {
+  props: {
+    children: string;
+    /**
+     * @ignore
+     */
+    className?: string;
+  } & React.HTMLAttributes<HTMLAnchorElement>;
+  defaultComponent: "a";
+}
+
+export const MicroCard: OverridableComponent<MicroCardProps> = forwardRef(
+  ({ className, component: Component = "a", children, ...rest }, ref) => (
+    <Component
+      ref={ref}
+      className={cl(
+        "navds-card__micro",
+        "navds-detail",
+        "navds-detail--s",
+        className
+      )}
+      title={children}
+      {...rest}
+    >
+      {children}
+    </Component>
+  )
+);
+
+export default MicroCard;

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

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

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

@@ -0,0 +1,26 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+import { MicroCard } from "../index.ts";
+
+<Meta title="ds-react/card/intro" />
+
+# Hvordan ta i bruk card
+
+## MicroCard
+
+Kan brukes som en vanlig lenke direkte:
+
+```
+<MicroCard href="/lenke/til/side">Lenketekst</MicroCard>
+```
+
+<Canvas>
+  <MicroCard href="/lenke/til/side">Lenketekst</MicroCard>
+</Canvas>
+
+Hvis man ønsker å ta i bruk nextjs sin `Link`-komponent:
+
+```jsx
+<Link href="/lenke/til/side" passHref>
+  <MicroCard>Lenketekst</MicroCard>
+</Link>
+```

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { MicroCard } from "../index";
+import { Meta } from "@storybook/react/types-6-0";
+export default {
+  title: "ds-react/card",
+  component: MicroCard,
+} as Meta;
+
+export const All = () => {
+  return (
+    <div>
+      <h2>MicroCard</h2>
+      <MicroCard href="#">Sit laborum aliqua.</MicroCard>
+    </div>
+  );
+};

@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/CopyToClipboard.tsx

@@ -61,7 +61,15 @@ const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
           onClick={handleClick}
           {...rest}
         >
-          {icon ? <>{icon}</> : <Copy aria-label="Fil ikon for kopiering" />}
+          {icon ? (
+            <>{icon}</>
+          ) : (
+            <Copy
+              focusable="false"
+              role="img"
+              aria-label="Fil ikon for kopiering"
+            />
+          )}
           {children ? children : <span className="sr-only">{title}</span>}
         </Button>
         <Popover

@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/Header.tsx

@@ -0,0 +1,73 @@
+import React, { forwardRef, HTMLAttributes } from "react";
+import cl from "classnames";
+
+export interface HeaderProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Header title
+   */
+  children: string;
+  /**
+   * @ignore
+   */
+  className?: string;
+  /**
+   * Pictogram placed in header
+   */
+  illustration?: React.ReactNode;
+  /**
+   * Short text placed under title
+   */
+  description?: string;
+  /**
+   * Decides how to align content
+   * @default "left"
+   */
+  variant?: "left" | "center";
+  /**
+   * Predefined theming for header
+   * @default "guide"
+   */
+  theme?: "situation" | "product" | "guide";
+}
+
+const Header = forwardRef<HTMLDivElement, HeaderProps>(
+  (
+    {
+      children,
+      className,
+      illustration,
+      description,
+      theme = "guide",
+      variant = "left",
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cl(
+          "navds-header",
+          className,
+          `navds-header--${theme}`,
+          `navds-header--${variant}`
+        )}
+        {...rest}
+      >
+        {illustration && (
+          <div className="navds-header__illustration">{illustration}</div>
+        )}
+        <div className="navds-header__wrapper">
+          <h1 className="navds-header__title navds-title navds-title--2xl">
+            {children}
+          </h1>
+          {description && (
+            <p className="navds-body-short navds-body--s">{description}</p>
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+
+export default Header;

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

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

@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

@@ -0,0 +1,61 @@
+import React from "react";
+import { Header } from "../index";
+import { Meta } from "@storybook/react/types-6-0";
+import { illustrationPictogram } from "./pictogram";
+export default {
+  title: "ds-react/header",
+  component: Header,
+} as Meta;
+
+export const All = () => {
+  return (
+    <div>
+      <h2>Header</h2>
+      <Header description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE.">
+        AUTE OFFICIA SINT SUNT FUGIAT
+      </Header>
+      <br />
+      <h2>Header m/illustration</h2>
+      <Header
+        illustration={illustrationPictogram}
+        description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
+      >
+        AUTE OFFICIA SINT SUNT FUGIAT
+      </Header>
+      <h2>Header center</h2>
+      <Header
+        description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
+        variant="center"
+      >
+        AUTE OFFICIA SINT SUNT FUGIAT
+      </Header>
+      <h2>Header center m/illustration</h2>
+      <Header
+        illustration={illustrationPictogram}
+        description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
+        variant="center"
+      >
+        AUTE OFFICIA SINT SUNT FUGIAT
+      </Header>
+      <h2>Header variants</h2>
+      <Header
+        description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
+        theme="guide"
+      >
+        AUTE OFFICIA SINT SUNT FUGIAT
+      </Header>
+      <Header
+        description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
+        theme="product"
+      >
+        AUTE OFFICIA SINT SUNT FUGIAT
+      </Header>
+      <Header
+        description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
+        theme="situation"
+      >
+        AUTE OFFICIA SINT SUNT FUGIAT
+      </Header>
+    </div>
+  );
+};

@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,
@@ -25,6 +31,7 @@ export {
   InternalHeaderUser,
   InternalHeaderUserProps,
 } from "./internal-header/index";
+export { Header, HeaderProps } from "./header/index";
 export {
   ProductPageLayout,
   ProductPagePanel,
@@ -36,6 +43,8 @@ export { Popover, PopoverProps } from "./popover/index";
 export { Tag, TagProps } from "./tag/index";
 export { LinkPanel, LinkPanelProps, LinkPanelTitle } from "./link-panel/index";
 export { Panel, PanelProps } from "./panel/index";
+export { MicroCard, MicroCardProps } from "./card/index";
+export { Loader, LoaderProps } from "./loader/index";
 export {
   Title,
   Ingress,

@navikt/ds-react/src/internal-header/InternalHeader.tsx

@@ -14,7 +14,11 @@ export interface InternalHeaderProps extends HTMLAttributes<HTMLElement> {
 
 const InternalHeader = forwardRef<HTMLElement, InternalHeaderProps>(
   ({ children, className, ...rest }, ref) => (
-    <header ref={ref} className={cl("navds-header", className)} {...rest}>
+    <header
+      ref={ref}
+      className={cl("navds-interal-header", className)}
+      {...rest}
+    >
       {children}
     </header>
   )

@navikt/ds-react/src/internal-header/InternalHeaderTitle.tsx

@@ -22,7 +22,7 @@ const InternalHeaderTitle = forwardRef<HTMLElement, InternalHeaderTitleProps>(
     createElement(element, {
       ...rest,
       ref,
-      className: cl("navds-header__title", "navds-label", className),
+      className: cl("navds-interal-header__title", "navds-label", className),
       children: <span>{children}</span>,
     })
 );

@navikt/ds-react/src/internal-header/InternalHeaderUser.tsx

@@ -19,8 +19,12 @@ export interface InternalHeaderUserProps
 
 const InternalHeaderUser = forwardRef<HTMLDivElement, InternalHeaderUserProps>(
   ({ className, name, ident, ...rest }, ref) => (
-    <div ref={ref} className={cl("navds-header__user", className)} {...rest}>
-      <span className="navds-header__name navds-body-short navds-body--s">
+    <div
+      ref={ref}
+      className={cl("navds-interal-header__user", className)}
+      {...rest}
+    >
+      <span className="navds-interal-header__name navds-body-short navds-body--s">
         {name}
       </span>
       <span className="navds-detail navds-detail--s">{ident}</span>

@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/Modal.tsx

@@ -80,13 +80,17 @@ const Modal: ModalLifecycle &
           className={cl("navds-modal__button", {
             "navds-modal__button--shake": shouldCloseOnOverlayClick,
           })}
-          size="small"
+          size="s"
           variant="secondary"
           ref={buttonRef}
           aria-label="lukk modalvindu"
           onClick={onClose}
         >
-          <Close />
+          <Close
+            focusable="false"
+            role="img"
+            aria-label="X-ikon for å lukke modal"
+          />
         </Button>
       </ReactModal>
     );

@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/Title.tsx

@@ -7,7 +7,7 @@ export interface TitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
     /**
      * Heading level
      */
-    level: 1 | 2 | 3 | 4 | 5;
+    level: 1 | 2 | 3 | 4 | 5 | "1" | "2" | "3" | "4" | "5";
     /**
      * Sizes from largest "2xl" to smallest "s"
      */

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

@@ -0,0 +1,39 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="ds-react/Typography/intro" />
+
+# Hvordan ta i bruk typografien
+
+Typografien kan tas i bruk som React komponenter eller ved å ta i bruk css-stilene.
+Se eksemplene under ds-react tabben her i storybook for å se hvordan man tar i bruk både react og stilpakken for dette oppsettet.
+
+Oppsettet er forbedret med blandt annet letter-spacing og line-height.
+I tillegg kan man nå sette `spacing` proppen og man får da automatisk margin-bottom på typo-elementet.
+Da kan man lett sikre riktig spacing mellom tekst i en artikkel.
+
+Font-size er skrevet med REM, men basert på 16px root font size.
+Dette vil si at de som har forstørret font-size på root vil ende opp med større font enn forventet.
+For de som har satt root font size til 18px (1.125rem) kan da "fikse" dette ved å endre tilbake til 16px,
+da det nye typo-oppsettet fikser større font, eller man ta i bruk css-en under.
+
+Denne stylingen vil overskrive default variablene og tilpasse font-size.
+
+```css
+/* autogenerated fix for 18px root-font-size*/
+:root {
+  --navds-font-size-title-2xl: 2.2222222222222223rem;
+  --navds-font-size-title-xl: 1.7777777777777777rem;
+  --navds-font-size-title-l: 1.5555555555555556rem;
+  --navds-font-size-title-m: 1.3333333333333333rem;
+  --navds-font-size-title-s: 1.1111111111111112rem;
+  --navds-font-size-xl: 1.1111111111111112rem;
+  --navds-font-size-l: 1rem;
+  --navds-font-size-m: 0.8888888888888888rem;
+  --navds-font-size-s: 0.7777777777777778rem;
+}
+```
+
+Vi anbefaler å før eller siden endre tilbake til default root font size da designsystemet sine nye
+komponenter og design-tokens er basert på dette. Endringen til 18px root font size var i grunn for å teste en løsning for å
+forstørre font, noe som er fikset ved nye typo-løsningen. Vi vil derfor unngå å måtte ha midlertidge patcher/fikser
+for å tilpasse systemet for alle de forskjellige variantene av font size på root.

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

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

@navikt/ds-tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tokens",
-  "version": "0.3.2",
+  "version": "0.4.3",
   "private": false,
   "description": "Auto-generated design-tokens for NAV design-systems framework",
   "author": "NAV Designsystem team",

@navikt/ds-tokens/src/index.js

@@ -68,12 +68,12 @@ module.exports = {
       disabled: { value: "{navds.color.gray.40.value}" },
       action: {
         default: { value: "{navds.color.blue.50.value}" },
-        hover: { value: Color(baseColors.blue).lighten(0.1) },
+        hover: { value: "{navds.color.blue.60.value}" },
         active: { value: "{navds.color.deepblue.50.value}" },
       },
       danger: {
         default: { value: "{navds.color.red.50.value}" },
-        hover: { value: Color(baseColors.red).lighten(0.1) },
+        hover: { value: "{navds.color.red.60.value}" },
         active: { value: "{navds.color.red.70.value}" },
       },
       error: {
@@ -95,7 +95,7 @@ module.exports = {
       border: { value: "{navds.color.gray.40.value}" },
       background: { value: "{navds.color.white.value}" },
       text: {
-        primary: { value: "{navds.color.gray.90}" },
+        primary: { value: "{navds.color.gray.90.value}" },
         inverse: { value: "{navds.color.white.value}" },
         disabled: { value: "{navds.color.gray.60.value}" },
         link: { value: "{navds.color.blue.50.value}" },
@@ -139,13 +139,8 @@ module.exports = {
       family: { value: '"Source Sans Pro", Arial, sans-serif' },
       line: {
         height: {
-          "2xl": { value: getFontSize(52) },
-          xl: { value: getFontSize(40) },
-          l: { value: getFontSize(36) },
-          m: { value: getFontSize(32) },
-          s: { value: getFontSize(28) },
-          xs: { value: getFontSize(24) },
-          "2xs": { value: getFontSize(20) },
+          m: { value: 1.5 },
+          s: { value: 1.3 },
         },
       },
       size: {

README.md

@@ -11,7 +11,7 @@
       <a href="https://github.com/navikt/nav-frontend-moduler/pulls">
           <img src="https://img.shields.io/badge/PRs-welcome-green.svg" />
       </a>
-                  <img src="https://github.com/navikt/nav-frontend-moduler/workflows/Build,%20test%20and%20maybe%20publish/badge.svg" />
+         <img src="https://github.com/navikt/nav-frontend-moduler/workflows/Build,%20test%20and%20maybe%20publish/badge.svg" />
     </p>
     <h4><a href="https://design.nav.no">Nettside</a> | <a href="https://github.com/navikt/nav-frontend-moduler/blob/master/CONTRIBUTING.md">Bidra</a> | <a href="https://github.com/navikt/nav-frontend-moduler/issues">Bug-rapport</a>
 </div>

docs/examples/resources/icons/IconPage.tsx

@@ -220,7 +220,7 @@ const IconPage = () => {
             onClick={() => setListView(0)}
             variant={!listView ? "primary" : "secondary"}
             aria-label="Vis ikoner med kategorier"
-            size="small"
+            size="s"
             className="iconPage__viewSelectButton"
           >
             <List />
@@ -229,7 +229,7 @@ const IconPage = () => {
             onClick={() => setListView(1)}
             variant={!listView ? "secondary" : "primary"}
             aria-label="Vis ikoner uten kategorier"
-            size="small"
+            size="s"
             className="iconPage__viewSelectButton"
           >
             <System />
@@ -257,7 +257,7 @@ const IconPage = () => {
                 <p className="iconPage__modalTitle navds-label">Last ned</p>
                 <div className="iconPage__modalButton--wrapper">
                   <Button
-                    size="small"
+                    size="s"
                     variant="action"
                     onClick={() => downloadSvg()}
                     className="iconPage__modalButton"
@@ -267,7 +267,7 @@ const IconPage = () => {
                     SVG
                   </Button>
                   <Button
-                    size="small"
+                    size="s"
                     variant="action"
                     onClick={() => downloadPng()}
                     className="iconPage__modalButton"

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",
@@ -38,7 +38,8 @@
     "@navikt/ds-css/*",
     "@navikt/ds-react",
     "@navikt/ds-icons",
-    "@navikt/ds-tokens"
+    "@navikt/ds-tokens",
+    "utilities/build/from-git-fix"
   ],
   "prettier": {},
   "eslintConfig": {
@@ -77,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",
@@ -114,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}

packages/nav-frontend-ikonknapper/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nav-frontend-ikonknapper",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "license": "MIT",
@@ -25,7 +25,7 @@
   "devDependencies": {
     "nav-frontend-chevron": "^1.0.30",
     "nav-frontend-ikoner-assets": "^3.0.1",
-    "nav-frontend-knapper": "^3.0.1",
+    "nav-frontend-knapper": "^3.0.2",
     "react": "^16.8.0 || ^17.0.0"
   }
 }

packages/nav-frontend-knapper-style/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nav-frontend-knapper-style",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "main": "src/index.less",
   "license": "MIT",
   "files": [

packages/nav-frontend-knapper-style/src/index.less

@@ -12,11 +12,11 @@
 }
 
 .knapp--hoved {
-  .knappfylt-mixin(@navBla, @white, @navDypBla, lighten(@navBla, 5%));
+  .knappefylt-cta-mixin(@navBla, @navBlaDarken20, @navDypBla);
 }
 
 .knapp--fare {
-  .knappfylt-mixin(@redError, @white, darken(@redError, 5%), lighten(@redError, 5%));
+  .knappefylt-cta-mixin(@redError, @redErrorDarken20, @redErrorDarken40);
 }
 
 .knapp--flat {

packages/nav-frontend-knapper-style/src/mixins.less

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

packages/nav-frontend-knapper/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nav-frontend-knapper",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "license": "MIT",
@@ -28,7 +28,7 @@
     "@types/react": "15.0.23 || ^16.0.0",
     "classnames": "^2.2.5",
     "nav-frontend-js-utils": "^1.0.19",
-    "nav-frontend-knapper-style": "^2.0.1",
+    "nav-frontend-knapper-style": "^2.0.2",
     "prop-types": "^15.5.10",
     "react": "^16.8.0 || ^17.0.0"
   },

packages/nav-frontend-tabell-style/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nav-frontend-tabell-style",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "main": "src/index.less",
   "license": "MIT",
   "files": [
@@ -21,7 +21,7 @@
   },
   "devDependencies": {
     "nav-frontend-core": "^6.0.1",
-    "nav-frontend-knapper-style": "^2.0.1",
+    "nav-frontend-knapper-style": "^2.0.2",
     "nav-frontend-typografi-style": "^2.0.1"
   }
 }

packages/nav-frontend-toggle-style/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nav-frontend-toggle-style",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "main": "src/toggle-style.less",
   "license": "MIT",
   "files": [
@@ -17,7 +17,7 @@
   },
   "devDependencies": {
     "nav-frontend-core": "^6.0.1",
-    "nav-frontend-knapper-style": "^2.0.1",
+    "nav-frontend-knapper-style": "^2.0.2",
     "nav-frontend-typografi-style": "^2.0.1"
   }
 }

packages/nav-frontend-toggle/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nav-frontend-toggle",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "license": "MIT",
@@ -22,7 +22,7 @@
   "devDependencies": {
     "classnames": "^2.2.5",
     "nav-frontend-js-utils": "^1.0.19",
-    "nav-frontend-toggle-style": "^2.0.1",
+    "nav-frontend-toggle-style": "^2.0.2",
     "prop-types": "^15.5.10",
     "react": "^16.8.0 || ^17.0.0"
   }

packages/nav-frontend-typografi/md/Typografi.overview.mdx

@@ -14,6 +14,22 @@ import {
   Undertekst,
   UndertekstBold,
 } from "./../";
+import Lenkepanel from "nav-frontend-lenkepanel";
+
+## Nytt typografi-oppsett (beta)
+
+Vi har nå en ny og forbedret typografi-løsning for både react og css i beta. Vi anbefaler
+alle å ta en titt på dette og ta den i bruk hvis ønskelig.
+
+For nå kan man finne dokumentasjon om hvordan man tar denne i bruk her:
+
+<Lenkepanel
+  href="https://navikt.github.io/Designsystemet/?path=/story/ds-react-typography-intro--page"
+  className="resource-link"
+  border
+>
+  Typografi storybook
+</Lenkepanel>
 
 ## Bruk av Typografi i prosjekter
 

utilities/build/from-git-fix/.babelrc

@@ -0,0 +1,13 @@
+{
+  "plugins": ["transform-object-rest-spread"],
+  "presets": [
+    [
+      "env",
+      {
+        "targets": {
+          "node": 6
+        }
+      }
+    ]
+  ]
+}

utilities/build/from-git-fix/README.md

@@ -0,0 +1,81 @@
+# gatsby-source-github
+
+Source plugin for pulling data into Gatsby from Github repositories.
+Works with gatsby-transform-remark if you like to pull markdown files from your repository.
+
+## Supports
+
+- Pulling trees / files from Github repositories
+- Pulling release information from Github repositories
+
+## How to use
+
+### NPM package
+
+This package is available on npm as "@mosch/gatsby-source-github".
+
+`yarn add @mosch/gatsby-source-github`
+
+### Gatsby Configuration
+
+```javascript
+// In your gatsby-config.js
+module.exports = {
+  plugins: [
+    {
+      resolve: `@mosch/gatsby-source-github`,
+      options: {
+        repository: "YOUR_REPOSITORY",
+        tree: true,
+        releases: true,
+        user: "YOUR_USER",
+        secrets: {
+          token: "YOUR_API_TOKEN",
+        },
+      },
+    },
+  ],
+};
+```
+
+### Plugin options
+
+- **tree**: Pulls in the Github tree (all files) as GithubFiles _(default false)_
+- **releases**: Pulls in the Github releases as GithubReleases _(default false)_
+
+### How to query Files using GraphQL
+
+A a sample query for fetching all File nodes.
+
+```graphql
+query GithubFileQuery {
+  allGithubFile {
+    edges {
+      node {
+        repository
+        user
+        path
+      }
+    }
+  }
+}
+```
+
+### How to query Releases using GraphQL
+
+A a sample query for fetching all Release nodes.
+
+```graphql
+query GithubReleasesQuery {
+  allGithubReleases {
+    edges {
+      node {
+        user
+        repository
+        version
+        description
+      }
+    }
+  }
+}
+```

utilities/build/from-git-fix/gatsby-node.js

@@ -0,0 +1,165 @@
+var _extends =
+  Object.assign ||
+  function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+
+function _asyncToGenerator(fn) {
+  return function () {
+    var gen = fn.apply(this, arguments);
+    return new Promise(function (resolve, reject) {
+      function step(key, arg) {
+        try {
+          var info = gen[key](arg);
+          var value = info.value;
+        } catch (error) {
+          reject(error);
+          return;
+        }
+        if (info.done) {
+          resolve(value);
+        } else {
+          return Promise.resolve(value).then(
+            function (value) {
+              step("next", value);
+            },
+            function (err) {
+              step("throw", err);
+            }
+          );
+        }
+      }
+      return step("next");
+    });
+  };
+}
+
+const Octokat = require("octokat");
+const crypto = require("crypto");
+const fileType = require("file-type");
+const mime = require("mime-types");
+const path = require("path");
+const minimatch = require("minimatch");
+
+exports.sourceNodes = (() => {
+  var _ref = _asyncToGenerator(function* (
+    { boundActionCreators },
+    { user, repository, tree = false, releases = false, branch, secrets = {} }
+  ) {
+    if (!user || !repository) {
+      throw new Error(
+        "You need to define user & repository for gatsby-source-github to work"
+      );
+    }
+
+    const octo = new Octokat(secrets);
+    const createNode = boundActionCreators.createNode;
+
+    console.time(`fetch Github data`);
+    secrets.token && console.log("Using Github Token");
+    console.log(
+      `starting to fetch data from the Github API. Warning: This may take a long time.`
+    );
+
+    const repo = octo.repos(user, repository);
+
+    if (tree) {
+      const patternFilter = function patternFilter(file) {
+        return minimatch(file.path, (tree && tree.pattern) || "**");
+      };
+      const data = yield repo.git
+        .trees(branch ? branch : "HEAD")
+        .fetch({ recursive: 1 });
+
+      const files = yield Promise.all(
+        data.tree
+          .filter(function (file) {
+            return file.type !== "tree";
+          })
+          .filter(patternFilter)
+          .map(function (file) {
+            return octo
+              .fromUrl(file.url)
+              .fetch()
+              .then(function (result) {
+                const buffer = Buffer.from(result.content, "base64");
+                const type = fileType(buffer);
+                const mimeType = type
+                  ? type.mime
+                  : mime.lookup(file.path) || "plaintext";
+
+                return {
+                  user: user,
+                  repository: repository,
+                  path: file.path,
+                  fileAbsolutePath: file.url,
+                  relativePath: file.path,
+                  base: path.basename(file.path),
+                  relativeDirectory: path.dirname(file.path),
+                  url: file.url,
+                  type: file.type,
+                  mime: mimeType,
+                  sha: file.sha,
+                  content: buffer.toString("utf8"),
+                };
+              });
+          })
+      );
+
+      files.forEach(function (file) {
+        return createNode(
+          _extends({}, file, {
+            id: file.url,
+            parent: `__SOURCE__`,
+            children: [],
+            internal: {
+              mediaType: file.mime,
+              type: "GithubFile",
+              contentDigest: crypto
+                .createHash(`md5`)
+                .update(file.content)
+                .digest(`hex`),
+            },
+          })
+        );
+      });
+    }
+
+    if (releases) {
+      const data = yield repo.releases.fetch();
+
+      data.items.forEach(function (item) {
+        createNode(
+          _extends({}, item, {
+            id: item.url,
+            parent: null,
+            children: [],
+            internal: {
+              type: "GithubRelease",
+              contentDigest: crypto
+                .createHash(`md5`)
+                .update(JSON.stringify(item))
+                .digest(`hex`),
+            },
+          })
+        );
+      });
+    }
+
+    console.timeEnd(`fetch Github data`);
+
+    return;
+  });
+
+  return function (_x, _x2) {
+    return _ref.apply(this, arguments);
+  };
+})();

utilities/build/from-git-fix/index.js

@@ -0,0 +1 @@
+exports.loadNodeContent = (node) => Promise.resolve(node.content);

utilities/build/from-git-fix/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "from-git-fix",
+  "private": true,
+  "version": "0.5.0",
+  "homepage": "https://github.com/mosch/gatsby-source-github",
+  "scripts": {
+    "build": "babel src --out-dir .",
+    "watch": "babel src --watch --out-dir ."
+  },
+  "keywords": [
+    "gatsby",
+    "gatsby-plugin",
+    "gatsby-source-plugin"
+  ],
+  "dependencies": {
+    "file-type": "^7.2.0",
+    "mime-types": "^2.1.17",
+    "minimatch": "^3.0.4",
+    "octokat": "^0.9.2"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-preset-env": "^1.6.0"
+  }
+}

utilities/build/from-git-fix/renovate.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["config:base"]
+}

utilities/build/from-git-fix/src/gatsby-node.js

@@ -0,0 +1,108 @@
+const Octokat = require("octokat");
+const crypto = require("crypto");
+const fileType = require("file-type");
+const mime = require("mime-types");
+const path = require("path");
+const minimatch = require("minimatch");
+
+exports.sourceNodes = async (
+  { boundActionCreators },
+  { user, repository, tree = false, releases = false, secrets = {} }
+) => {
+  if (!user || !repository) {
+    throw new Error(
+      "You need to define user & repository for gatsby-source-github to work"
+    );
+  }
+
+  const octo = new Octokat(secrets);
+  const { createNode } = boundActionCreators;
+
+  console.time(`fetch Github data`);
+  secrets.token && console.log("Using Github Token");
+  console.log(
+    `starting to fetch data from the Github API. Warning: This may take a long time.`
+  );
+
+  const repo = octo.repos(user, repository);
+
+  if (tree) {
+    const patternFilter = (file) =>
+      minimatch(file.path, (tree && tree.pattern) || "**");
+    const data = await repo.git.trees("HEAD").fetch({ recursive: 1 });
+
+    const files = await Promise.all(
+      data.tree
+        .filter((file) => file.type !== "tree")
+        .filter(patternFilter)
+        .map((file) => {
+          return octo
+            .fromUrl(file.url)
+            .fetch()
+            .then((result) => {
+              const buffer = Buffer.from(result.content, "base64");
+              const type = fileType(buffer);
+              const mimeType = type
+                ? type.mime
+                : mime.lookup(file.path) || "plaintext";
+
+              return {
+                user: user,
+                repository: repository,
+                path: file.path,
+                fileAbsolutePath: file.url,
+                relativePath: file.path,
+                base: path.basename(file.path),
+                relativeDirectory: path.dirname(file.path),
+                url: file.url,
+                type: file.type,
+                mime: mimeType,
+                sha: file.sha,
+                content: buffer.toString("utf8"),
+              };
+            });
+        })
+    );
+
+    files.forEach((file) =>
+      createNode({
+        ...file,
+        id: file.url,
+        parent: `__SOURCE__`,
+        children: [],
+        internal: {
+          mediaType: file.mime,
+          type: "GithubFile",
+          contentDigest: crypto
+            .createHash(`md5`)
+            .update(file.content)
+            .digest(`hex`),
+        },
+      })
+    );
+  }
+
+  if (releases) {
+    const data = await repo.releases.fetch();
+
+    data.items.forEach((item) => {
+      createNode({
+        ...item,
+        id: item.url,
+        parent: null,
+        children: [],
+        internal: {
+          type: "GithubRelease",
+          contentDigest: crypto
+            .createHash(`md5`)
+            .update(JSON.stringify(item))
+            .digest(`hex`),
+        },
+      });
+    });
+  }
+
+  console.timeEnd(`fetch Github data`);
+
+  return;
+};