Lerna versionbump [ci skip]

- @navikt/ds-react@0.6.4
oppdatert focus + role for ikonbruk i komponenter
2026-10-13 01:02:02 +00:00 · 2021-07-06 18:53:10 +00:00 · 2021-07-06 20:37:20 +02:00 · 2021-07-06 17:10:14 +02:00 · 2021-07-06 17:00:10 +02:00 · 2021-07-03 22:36:56 +02:00
156 changed files with 3334 additions and 1434 deletions
@@ -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
@@ -0,0 +1,39 @@
+# This workflow will run will build the component library and the storybook, then publish it to https://navikt.github.io/Designsystemet
+
+name: Publish Storybook
+
+on:
+ workflow_dispatch
+
+jobs:
+  publish-storybook:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: "0"
+          token: ${{secrets.GIT_REPO}}
+      - 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 --frozen-lockfile
+      - name: Gulp-build
+        run: yarn boot
+      - name: Building Storybook
+        run: yarn build-storybook
+      - name: Deploy storybook
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          personal_token: ${{secrets.GIT_REPO}}
+          external_repository: navikt/designsystemet
+          publish_dir: ./storybook-static
+          user_name: "github-actions[bot]"
+          user_email: "github-actions[bot]@users.noreply.github.com"
@@ -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"
@@ -0,0 +1,57 @@
+{
+  "repository": "@nav/designsystem",
+  "head": "updated-specify-tokens",
+  "base": "master",
+  "rules": [
+    {
+      "name": "Specify / Icons",
+      "path": "@navikt/ds-icons/svg",
+      "filter": {
+        "types": ["vector"]
+      },
+      "parsers": [
+        {
+          "name": "pascalcasify",
+          "options": {
+            "keys": ["name"]
+          }
+        },
+        {
+          "name": "name-assets-files-by-pattern",
+          "options": {
+            "pattern": "{{name}}.{{format}}"
+          }
+        }
+      ]
+    },
+    {
+      "name": "Specify / Icons - metadata",
+      "path": "@navikt/ds-icons/figma-api/metadata-specify.json",
+      "filter": {
+        "types": ["vector"]
+      },
+      "parsers": [
+        {
+          "name": "pascalcasify",
+          "options": {
+            "keys": ["name"]
+          }
+        },
+        {
+          "name": "pick",
+          "options": {
+            "keys": [
+              "name",
+              "createdAt",
+              "updatedAt",
+              "meta.description",
+              "meta.parentFrame",
+              "meta.frame",
+              "page"
+            ]
+          }
+        }
+      ]
+    }
+  ]
+}
@@ -1,6 +0,0 @@
-<div id="decorator-wrapper">
-  <div id="decorator-header" style="display: none"></div>
-  <div id="root"></div>
-  <div id="docs-root"></div>
-  <div id="decorator-footer" style="display: none"></div>
-</div>
@@ -1,18 +0,0 @@
-<!-- prettier-ignore -->
-<div data-src='https://www.nav.no/dekoratoren/env?availableLanguages=[{"locale":"nb","url":"http://localhost:8088/dekoratoren/","handleInApp":true},{"locale":"en","url":"http://localhost:8088/dekoratoren/en/","handleInApp":true}]&breadcrumbs=[{"url":"https://www.nav.no/person/dittnav","title":"ditt%20nav"},%20{"url":"https://www.nav.no/person/kontakt-oss/nb/","title":"kontakt%20oss"}]' id="decorator-env"></div>
-<link href="https://www.nav.no/dekoratoren/css/client.css" rel="stylesheet" />
-<script async src="https://www.nav.no/dekoratoren/client.js"></script>
-<style>
-  html,
-  body,
-  #decorator-wrapper {
-    min-height: 100vh;
-  }
-  #decorator-wrapper {
-    display: flex;
-    flex-direction: column;
-  }
-  #decorator-footer {
-    margin-top: auto;
-  }
-</style>
@@ -1,8 +1,8 @@
 .navds-accordion-anchor-menu {
-  padding: 1rem 0;
+  padding: var(--navds-spacing-4) 0;
 }

 .navds-accordion-anchor-menu__title {
-  margin-left: 1rem;
-  margin-right: 1rem;
+  margin-left: var(--navds-spacing-4);
+  margin-right: var(--navds-spacing-4);
 }
@@ -22,25 +22,18 @@
  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: 0.75rem 1rem;
-  line-height: 1.5rem; /* TODO: fix typography. */
+  padding: var(--navds-spacing-3) var(--navds-spacing-4);
+  text-decoration: none;
 }

 .navds-accordion-menu-collapsable__expand-icon {
  font-size: 1.5rem;
  color: var(--navds-color-text-link);
  flex-shrink: 0;
-  margin-left: 0.5rem;
+  margin-left: var(--navds-spacing-2);
 }

 .navds-accordion-menu-collapsable--open
@@ -53,7 +46,7 @@
 .navds-accordion-menu-collapsable
  .navds-accordion-menu-collapsable
  .navds-accordion-menu-collapsable__button {
-  padding-left: 2rem;
+  padding-left: var(--navds-spacing-8);
 }

 .navds-accordion-menu-collapsable
@@ -63,7 +56,7 @@
  .navds-accordion-menu-collapsable
  .navds-accordion-menu-collapsable
  .navds-accordion-menu-collapsable__button {
-  padding-left: 3rem;
+  padding-left: var(--navds-spacing-12);
 }

 .navds-accordion-menu-collapsable
@@ -75,23 +68,23 @@
  .navds-accordion-menu-collapsable
  .navds-accordion-menu-collapsable
  .navds-accordion-menu-collapsable__button {
-  padding-left: 4rem;
+  padding-left: var(--navds-spacing-16);
 }

 .navds-accordion-menu-item:focus,
 .navds-accordion-menu-collapsable__button:focus {
  outline: 3px solid var(--navds-text-focus);
  outline-offset: -3px;
+  color: var(--navds-color-darkgray);
 }

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

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

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

 .navds-accordion:focus,
@@ -26,7 +24,7 @@
  height: 1.25em;
  transform: rotateZ(0deg);
  flex-shrink: 0;
-  margin-left: 1rem;
+  margin-left: var(--navds-spacing-4);
 }

 .navds-accordion__chevron--up {
@@ -38,17 +36,17 @@
 }

 .navds-accordion__button {
-  padding: 1rem;
-  border-radius: 4px;
+  padding: var(--navds-spacing-4);
  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 {
@@ -57,7 +55,7 @@
 }

 .navds-accordion__content {
-  padding: 0.5rem 1rem 1rem;
+  padding: var(--navds-spacing-2) var(--navds-spacing-4) var(--navds-spacing-4);
 }

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

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

-.navds-alert--small {
-  border-radius: 0;
-  padding: 0.5em 1em;
+.navds-alert--s {
+  padding: 0.1875rem var(--navds-spacing-4);
 }

 .navds-alert > svg {
+  align-self: center;
+  margin-right: var(--navds-spacing-3);
  font-size: 1.5rem;
  background: radial-gradient(
    circle,
@@ -5,7 +5,9 @@
@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"; */

 body {
  font-family: var(--navds-font-family);
@@ -1,6 +1,7 @@
 /**
 * Solution copied from blogpost
 * https://schepp.dev/posts/smooth-scrolling-and-page-search/
+* Currently disabled
 */

@keyframes smoothscroll1 {
@@ -11,13 +11,13 @@
  border-style: solid;
  border-width: 2px;

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

-.navds-button.navds-button--small {
+.navds-button--s {
  /* Padding calculated based on 16px font for 32px tall button */
-  padding: calc(0.3125em - 2px) calc(1.11em - 2px);
+  padding: 0.25rem calc(var(--navds-spacing-4) - 2px);
 }

 .navds-button:focus {
@@ -33,16 +33,16 @@
 .navds-button--primary:active {
  color: var(--navds-color-text-inverse);
  background-color: var(--navds-color-action-hover);
-  border-width: 0;
+  border-color: transparent;

-  /* Padding calculated based on 16px font for 40px tall button */
-  padding: 0.5625em 2em;
+  /* Padding calculated based on 18px font for 44px tall button */
+  padding: 0.53125rem var(--navds-spacing-3);
 }

-.navds-button--primary:hover.navds-button--small,
-.navds-button--primary:active.navds-button--small {
+.navds-button--primary:hover.navds-button--s,
+.navds-button--primary:active.navds-button--s {
  /* Padding calculated based on 16px font for 32px tall button */
-  padding: 0.3125em 1.11em;
+  padding: 0.25rem calc(var(--navds-spacing-4) - 2px);
 }

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

 .navds-button--action,
 .navds-button--danger {
-  /* Padding calculated based on 16px font for 40px tall button */
-  padding: 0.5625em 2em;
-  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.3125em 1.11em;
-}
-
-.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 +108,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 16px font for 40px tall button */
-  padding: calc(0.5625em - 2px) calc(2em - 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.3125em - 2px) calc(1.11em - 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 16px font for 40px tall button */
-  padding: 0.5625em 2em;
-  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.3125em 1.11em;
-}
-
-.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 16px font for 40px tall button */
-  padding: calc(0.5625em - 2px) calc(2em - 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.3125em - 2px) calc(1.11em - 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 +118,8 @@
 **************************/

 .navds-button:disabled:disabled {
-  /* Padding calculated based on 16px font for 40px tall button */
-  padding: 0.5625em 2em;
+  /* 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;
@@ -274,7 +128,7 @@
  transform: none;
 }

-.navds-button:disabled:disabled.navds-button--small {
+.navds-button:disabled:disabled.navds-button--s {
  /* Padding calculated based on 16px font for 32px tall button */
-  padding: 0.3125em 1.11em;
+  padding: 0.3125rem var(--navds-spacing-4);
 }
@@ -0,0 +1,31 @@
+/*
+  MicroCard
+*/
+
+.navds-card__micro {
+  border-radius: 1rem;
+  color: var(--navds-color-text-primary);
+  display: inline-flex;
+  padding: var(--navds-spacing-1) var(--navds-spacing-2);
+  text-decoration: none;
+  background-color: var(--navds-color-orange-20);
+  border: 1px solid transparent;
+}
+
+.navds-card__micro:hover {
+  background-color: var(--navds-color-white);
+  border-color: var(--navds-color-blue-50);
+  color: var(--navds-color-blue-50);
+}
+
+.navds-card__micro:focus {
+  background-color: var(--navds-color-white);
+  color: var(--navds-color-blue-50);
+  outline: none;
+  box-shadow: var(--navds-shadow-focus);
+}
+
+.navds-card__micro:active {
+  background-color: var(--navds-color-blue-70);
+  color: var(--navds-color-white);
+}
@@ -2,9 +2,9 @@
  display: inline-flex;
  align-items: center;
  column-gap: 0.5em;
-  padding: 0.25em;
+  padding: var(--navds-spacing-1);
 }

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

-.navds-header {
+.navds-interal-header {
  display: flex;
  align-items: center;
  background: var(--navds-color-darkgray);
@@ -11,17 +11,17 @@
  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 {
-  padding: 0 1.5rem 0 1.5rem;
+.navds-interal-header__title {
+  padding: 0 var(--navds-spacing-6);
  border-right: 1px solid var(--navds-color-gray-40);
  display: flex;
  align-self: stretch;
@@ -31,23 +31,23 @@
  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 1.5rem 0 1.5rem;
+  padding: 0 var(--navds-spacing-6);
  margin-left: auto;
  border-left: 1px solid var(--navds-color-gray-40);
  display: flex;
@@ -55,6 +55,6 @@
  align-items: center;
 }

-.navds-header__name.navds-body-short {
-  margin-right: 1rem;
+.navds-interal-header__name.navds-body-short {
+  margin-right: var(--navds-spacing-4);
 }
@@ -168,12 +168,12 @@
 }

 .navds-layout__header-title {
-  margin: 0.25rem 0.85rem;
+  margin: var(--navds-spacing-1) var(--navds-spacing-3);
 }

@media (min-width: 448px) {
  .navds-layout__header-title {
-    margin: 0.25rem 0;
+    margin: var(--navds-spacing-1) 0;
  }
 }

@@ -6,7 +6,7 @@
  background-color: var(--navds-color-background);
  display: block;
  position: relative;
-  padding: 1rem;
+  padding: var(--navds-spacing-4);
  border-radius: 4px;
  overflow: auto;
  max-height: 100%;
@@ -29,7 +29,7 @@
  left: 0;
  right: 0;
  background-color: var(--navds-color-modal-overlay);
-  padding: 1rem;
+  padding: var(--navds-spacing-4);
 }

 .navds-modal__button--shake {
@@ -45,9 +45,10 @@

 .navds-modal__button {
  position: fixed;
-  top: 1rem;
-  right: 1rem;
+  top: var(--navds-spacing-4);
+  right: var(--navds-spacing-4);
  display: flex;
+  padding: var(--navds-spacing-2);
 }

 .navds-modal__button svg {
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "0.5.2",
+  "version": "0.6.4",
  "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.1",
+    "@navikt/ds-tokens": "^0.4.3",
    "normalize.css": "^8.0.1",
    "postcss": "^8.2.7",
    "postcss-cli": "^8.3.1",
@@ -1,7 +1,7 @@
 .navds-panel {
  background-color: var(--navds-color-white);
  display: block;
-  padding: 1rem;
+  padding: var(--navds-spacing-4);
  border-radius: var(--navds-border-radius);
  border: 1px solid transparent;
 }
@@ -6,7 +6,7 @@
  display: inline-block;

  /* Padding calculated based on 16px font for 24px tall tag */
-  padding: 0.0625rem 0.5rem;
+  padding: 0.0625rem var(--navds-spacing-2);
 }

 .navds-tag--error {
@@ -7,41 +7,41 @@
 .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 {
-  margin-bottom: var(--navds-font-spacing-s);
+  margin-bottom: var(--navds-spacing-5);
 }

 .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 {
-  margin-bottom: var(--navds-font-spacing-xs);
+  margin-bottom: var(--navds-spacing-4);
 }

 .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 {
-  margin-bottom: var(--navds-font-spacing-2xs);
+  margin-bottom: var(--navds-spacing-3);
 }

 .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 {
-  margin-bottom: var(--navds-font-spacing-2xs);
+  margin-bottom: var(--navds-spacing-3);
 }

 .navds-title--s {
@@ -51,92 +51,92 @@
 }

 .navds-title--s.navds-typo--spacing {
-  margin-bottom: var(--navds-font-spacing-2xs);
+  margin-bottom: var(--navds-spacing-3);
 }

 /* Ingress */
 .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;
 }

 .navds-ingress.navds-typo--spacing {
-  margin-bottom: var(--navds-font-spacing-3xl);
+  margin-bottom: var(--navds-spacing-10);
 }

 /* Body */
 .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;
 }

 .navds-body-long.navds-typo--spacing {
-  margin-bottom: var(--navds-font-spacing-l);
+  margin-bottom: var(--navds-spacing-7);
 }

 .navds-body-short.navds-typo--spacing {
-  margin-bottom: var(--navds-font-spacing-2xs);
+  margin-bottom: var(--navds-spacing-3);
 }

 .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 {
-  margin-bottom: var(--navds-font-spacing-m);
+  margin-bottom: var(--navds-spacing-6);
 }

 .navds-body-short.navds-body--s.navds-typo--spacing {
-  margin-bottom: var(--navds-font-spacing-3xs);
+  margin-bottom: var(--navds-spacing-2);
 }

 /* Label */
 .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;
 }

 .navds-label.navds-typo--spacing {
-  margin-bottom: var(--navds-font-spacing-2xs);
+  margin-bottom: var(--navds-spacing-3);
 }

 .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 {
-  margin-bottom: var(--navds-font-spacing-3xs);
+  margin-bottom: var(--navds-spacing-2);
 }

 /* Small text */
 .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;
 }

 .navds-detail.navds-typo--spacing {
-  margin-bottom: var(--navds-font-spacing-3xs);
+  margin-bottom: var(--navds-spacing-2);
 }

 .navds-detail--s {
@@ -144,5 +144,5 @@
 }

 .navds-detail--s.navds-typo--spacing {
-  margin-bottom: var(--navds-font-spacing-3xs);
+  margin-bottom: var(--navds-spacing-2);
 }
@@ -31,6 +31,22 @@
    "pageName": "Interface",
    "visible": true
  },
+  {
+    "name": "AddPeople",
+    "description": "",
+    "created_at": "2021-06-15T15:06:55.651Z",
+    "updated_at": "2021-06-15T15:06:55.651Z",
+    "pageName": "People",
+    "visible": true
+  },
+  {
+    "name": "AddPeopleFilled",
+    "description": "",
+    "created_at": "2021-06-15T15:06:55.654Z",
+    "updated_at": "2021-06-15T15:06:55.654Z",
+    "pageName": "People",
+    "visible": true
+  },
  {
    "name": "Applicant",
    "description": "",
@@ -107,7 +123,7 @@
    "name": "Bag",
    "description": "",
    "created_at": "2020-07-01T10:37:42.673Z",
-    "updated_at": "2021-04-09T13:32:23.625Z",
+    "updated_at": "2021-06-14T07:21:59.055Z",
    "pageName": "Jobs",
    "visible": true
  },
@@ -115,7 +131,7 @@
    "name": "BagFilled",
    "description": "",
    "created_at": "2021-01-11T13:37:55.239Z",
-    "updated_at": "2021-04-09T13:32:16.648Z",
+    "updated_at": "2021-06-14T07:21:59.051Z",
    "pageName": "Jobs",
    "visible": true
  },
@@ -235,7 +251,7 @@
    "name": "Calculator",
    "description": "",
    "created_at": "2020-07-01T10:37:42.917Z",
-    "updated_at": "2021-04-09T13:32:16.330Z",
+    "updated_at": "2021-06-14T07:21:59.043Z",
    "pageName": "Money",
    "visible": true
  },
@@ -347,7 +363,7 @@
    "name": "Caseworker",
    "description": "",
    "created_at": "2021-04-28T14:10:50.983Z",
-    "updated_at": "2021-04-30T07:23:11.918Z",
+    "updated_at": "2021-06-14T07:21:59.040Z",
    "pageName": "People",
    "visible": true
  },
@@ -355,7 +371,7 @@
    "name": "CaseworkerFilled",
    "description": "",
    "created_at": "2021-04-28T14:11:08.212Z",
-    "updated_at": "2021-04-29T18:47:14.999Z",
+    "updated_at": "2021-06-14T07:21:59.036Z",
    "pageName": "People",
    "visible": true
  },
@@ -655,6 +671,22 @@
    "pageName": "Communication",
    "visible": true
  },
+  {
+    "name": "DirectionSign",
+    "description": "",
+    "created_at": "2021-06-14T07:21:59.013Z",
+    "updated_at": "2021-06-14T07:21:59.013Z",
+    "pageName": "Jobs",
+    "visible": true
+  },
+  {
+    "name": "DirectionSignFilled",
+    "description": "",
+    "created_at": "2021-06-14T07:21:59.009Z",
+    "updated_at": "2021-06-14T07:21:59.009Z",
+    "pageName": "Jobs",
+    "visible": true
+  },
  {
    "name": "Disability",
    "description": "",
@@ -2371,7 +2403,7 @@
    "name": "Service",
    "description": "",
    "created_at": "2020-07-01T10:37:42.707Z",
-    "updated_at": "2021-04-09T13:32:23.429Z",
+    "updated_at": "2021-06-14T07:21:59.047Z",
    "pageName": "People",
    "visible": true
  },
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-icons",
-  "version": "0.3.2",
+  "version": "0.3.3",
  "private": false,
  "description": "NAVs egne ikoner i SVG og React format",
  "repository": {
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 24V14H20V24H18Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 18L24 18L24 20L14 20L14 18Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 5C15 6.65685 13.6569 8 12 8C10.3431 8 9 6.65685 9 5C9 3.34315 10.3431 2 12 2C13.6569 2 15 3.34315 15 5ZM17 5C17 7.76142 14.7614 10 12 10C9.23858 10 7 7.76142 7 5C7 2.23858 9.23858 0 12 0C14.7614 0 17 2.23858 17 5ZM15.2322 14.185L16.8296 12.9329C15.5735 11.7353 13.8726 11 12 11C8.13401 11 5 14.134 5 18H7C7 15.2386 9.23858 13 12 13C13.2323 13 14.3606 13.4458 15.2322 14.185Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 10C14.7614 10 17 7.76142 17 5C17 2.23858 14.7614 0 12 0C9.23858 0 7 2.23858 7 5C7 7.76142 9.23858 10 12 10ZM12 16H16L16 12.2547C14.8662 11.4638 13.4873 11 12 11C8.13401 11 5 14.134 5 18H12V16ZM18 18H14V20H18V24H20V20H24V18H20V14H18V18Z" fill="#262626"/>
+</svg>
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14 4H10C9.44772 4 9 4.44772 9 5V6H15V5C15 4.44772 14.5523 4 14 4ZM7 5V6H1C0.447715 6 0 6.44772 0 7V12C0 12.5523 0.447716 13 1 13H11V12C11 11.4477 11.4477 11 12 11C12.5523 11 13 11.4477 13 12V13H23C23.5523 13 24 12.5523 24 12V7C24 6.44772 23.5523 6 23 6H17V5C17 3.34315 15.6569 2 14 2H10C8.34315 2 7 3.34315 7 5ZM11 15V16C11 16.5523 11.4477 17 12 17C12.5523 17 13 16.5523 13 16V15H23V20C23 21.1046 22.1046 22 21 22H3C1.89543 22 1 21.1046 1 20V15H11Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 3H10C9.44772 3 9 3.44772 9 4V5H15V4C15 3.44772 14.5523 3 14 3ZM7 4V5H1C0.447715 5 0 5.44772 0 6V12C0 12.5523 0.447716 13 1 13H11V12C11 11.4477 11.4477 11 12 11C12.5523 11 13 11.4477 13 12V13H23C23.5523 13 24 12.5523 24 12V6C24 5.44772 23.5523 5 23 5H17V4C17 2.34315 15.6569 1 14 1H10C8.34315 1 7 2.34315 7 4ZM11 15V16C11 16.5523 11.4477 17 12 17C12.5523 17 13 16.5523 13 16V15H23V21C23 22.1046 22.1046 23 21 23H3C1.89543 23 1 22.1046 1 21V15H11Z" fill="#262626"/>
 </svg>
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 8C13.6569 8 15 6.65685 15 5C15 3.34315 13.6569 2 12 2C10.3431 2 9 3.34315 9 5C9 6.65685 10.3431 8 12 8ZM12 10C14.7614 10 17 7.76142 17 5C17 2.23858 14.7614 0 12 0C9.23858 0 7 2.23858 7 5C7 7.76142 9.23858 10 12 10ZM17.0997 13.2048C15.823 11.8476 14.0105 11 12 11C8.13401 11 5 14.134 5 18H7C7 15.2386 9.23858 13 12 13C13.4582 13 14.7706 13.6242 15.6845 14.62L17.0997 13.2048ZM21.689 16.8125L17.2773 21.2243L15.4587 21.5413L15.7757 19.7227L20.1875 15.311C20.6021 14.8963 21.2744 14.8963 21.689 15.311C22.1037 15.7256 22.1037 16.3979 21.689 16.8125ZM23.1032 18.2267L18.2441 23.0859L13 24L13.9141 18.7559L18.7733 13.8968C19.969 12.7011 21.9076 12.7011 23.1032 13.8968C24.2989 15.0924 24.2989 17.031 23.1032 18.2267Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.75 8.5C13.5449 8.5 15 7.04493 15 5.25C15 3.45507 13.5449 2 11.75 2C9.95504 2 8.49996 3.45507 8.49996 5.25C8.49996 7.04493 9.95504 8.5 11.75 8.5ZM11.75 10.5C14.6495 10.5 17 8.1495 17 5.25C17 2.35051 14.6495 0 11.75 0C8.85047 0 6.49996 2.35051 6.49996 5.25C6.49996 8.1495 8.85047 10.5 11.75 10.5ZM17.0996 13.9384C15.752 12.5057 13.8388 11.6111 11.7166 11.6111C7.63588 11.6111 4.32776 14.9192 4.32776 19H6.43887C6.43887 16.0852 8.80181 13.7222 11.7166 13.7222C13.2558 13.7222 14.6411 14.3811 15.6059 15.4322L17.0996 13.9384ZM20.8991 17.4659L16.8884 21.4766L15.2352 21.7648L15.5234 20.1116L19.534 16.1009C19.911 15.7239 20.5221 15.7239 20.8991 16.1009C21.276 16.4778 21.276 17.089 20.8991 17.4659ZM22.1847 18.7516L17.7673 23.169L13 24L13.831 19.2327L18.2484 14.8152C19.3354 13.7283 21.0977 13.7283 22.1847 14.8152C23.2717 15.9022 23.2717 17.6646 22.1847 18.7516Z" fill="#262626"/>
 </svg>
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17 4.99999C17 7.7614 14.7614 9.99998 12 9.99998C9.23855 9.99998 6.99998 7.7614 6.99998 4.99999C6.99998 2.23857 9.23855 0 12 0C14.7614 0 17 2.23857 17 4.99999ZM12 11C8.13399 11 4.99999 14.134 4.99999 18H14.6289L18.0873 14.5415C16.883 12.4263 14.6081 11 12 11ZM23.2663 15.7337C22.288 14.7554 20.7019 14.7554 19.7236 15.7337L15.4573 20L15 23.9999L19 23.5426L23.2663 19.2764C24.2446 18.2981 24.2446 16.712 23.2663 15.7337Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17 5.25C17 8.1495 14.6495 10.5 11.75 10.5C8.85047 10.5 6.49996 8.1495 6.49996 5.25C6.49996 2.35051 8.85047 0 11.75 0C14.6495 0 17 2.35051 17 5.25ZM11.6618 11.6111C7.58101 11.6111 4.27289 14.9192 4.27289 19H14.4367L18.0873 15.3494C16.8161 13.1167 14.4148 11.6111 11.6618 11.6111ZM22.3478 16.6522C21.4782 15.7826 20.0683 15.7826 19.1987 16.6522L15.4065 20.4444L15 24L18.5555 23.5935L22.3478 19.8013C23.2174 18.9317 23.2174 17.5218 22.3478 16.6522Z" fill="#262626"/>
 </svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 1V4H19.4648C19.7992 4 20.1114 4.1671 20.2969 4.4453L24 10L20.2969 15.5547C20.1114 15.8329 19.7992 16 19.4648 16H13V24H11V16H0.934253C0.534905 16 0.296708 15.5549 0.518226 15.2227L3.99999 10L0.518226 4.77735C0.296708 4.44507 0.534904 4 0.934252 4H11V1C11 0.447715 11.4477 0 12 0C12.5523 0 13 0.447715 13 1ZM3.73703 6L6.40369 10L3.73703 14H18.9296L21.5963 10L18.9296 6H3.73703Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 1V3H11V1C11 0.447715 11.4477 0 12 0C12.5523 0 13 0.447715 13 1ZM0.518226 4.77735C0.296708 4.44507 0.534904 4 0.934252 4H19.4648C19.7992 4 20.1114 4.1671 20.2969 4.4453L24 10L20.2969 15.5547C20.1114 15.8329 19.7992 16 19.4648 16H0.934253C0.534905 16 0.296708 15.5549 0.518226 15.2227L3.99999 10L0.518226 4.77735ZM11 17V24H13V17H11Z" fill="#262626"/>
+</svg>
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10 2H14V3H13H11H10V2ZM8 3.58152V2C8 0.89543 8.89543 0 10 0H14C15.1046 0 16 0.895431 16 2V3.58152C18.9318 4.76829 21 7.64262 21 11V20C21 22.2091 19.2091 24 17 24H7C4.79086 24 3 22.2091 3 20V11C3 7.64262 5.06817 4.76829 8 3.58152ZM2 22V20V15V13C0.895431 13 0 13.8954 0 15V20C0 21.1046 0.895431 22 2 22ZM22 20V22C23.1046 22 24 21.1046 24 20V15C24 13.8954 23.1046 13 22 13V15V20ZM9 8C8.44772 8 8 8.44772 8 9C8 9.55228 8.44772 10 9 10H15C15.5523 10 16 9.55228 16 9C16 8.44772 15.5523 8 15 8H9ZM9 15H15V18H9V15ZM7 15C7 13.8954 7.89543 13 9 13H15C16.1046 13 17 13.8954 17 15V18C17 19.1046 16.1046 20 15 20H9C7.89543 20 7 19.1046 7 18V15Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 2H14V3H13H11H10V2ZM8 3.58152V2C8 0.89543 8.89543 0 10 0H14C15.1046 0 16 0.895431 16 2V3.58152C18.9318 4.76829 21 7.64262 21 11V13H22C23.1046 13 24 13.8954 24 15V20C24 21.1046 23.1046 22 22 22H20.4649C19.7733 23.1956 18.4806 24 17 24H7C5.51944 24 4.22675 23.1956 3.53513 22H2C0.89543 22 0 21.1046 0 20V15C0 13.8954 0.895431 13 2 13H3V11C3 7.64262 5.06817 4.76829 8 3.58152ZM19 20V13V11C19 7.68629 16.3137 5 13 5H11C7.68629 5 5 7.68629 5 11V13V20C5 21.1046 5.89543 22 7 22H17C18.1046 22 19 21.1046 19 20ZM21 15V20H22V15H21ZM2 15H3V20H2L2 15ZM15 15H9V18H15V15ZM9 13C7.89543 13 7 13.8954 7 15V18C7 19.1046 7.89543 20 9 20H15C16.1046 20 17 19.1046 17 18V15C17 13.8954 16.1046 13 15 13H9ZM9 8C8.44772 8 8 8.44772 8 9C8 9.55228 8.44772 10 9 10H15C15.5523 10 16 9.55228 16 9C16 8.44772 15.5523 8 15 8H9Z" fill="#262626"/>
 </svg>
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14 4H10C9.44772 4 9 4.44772 9 5V6H15V5C15 4.44772 14.5523 4 14 4ZM7 5V6H1C0.447715 6 0 6.44772 0 7V13C0 13.7403 0.402199 14.3866 1 14.7324V20C1 21.1046 1.89543 22 3 22H21C22.1046 22 23 21.1046 23 20V14.7324C23.5978 14.3866 24 13.7403 24 13V7C24 6.44772 23.5523 6 23 6H17V5C17 3.34315 15.6569 2 14 2H10C8.34315 2 7 3.34315 7 5ZM7 8H17H22V13H13V12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12V13H2L2 8H7ZM11 15H3L3 20H21V15H13V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V15Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 3H10C9.44772 3 9 3.44772 9 4V5H15V4C15 3.44772 14.5523 3 14 3ZM7 4V5H1C0.447715 5 0 5.44772 0 6V13C0 13.7403 0.402199 14.3866 1 14.7324V21C1 22.1046 1.89543 23 3 23H21C22.1046 23 23 22.1046 23 21V14.7324C23.5978 14.3866 24 13.7403 24 13V6C24 5.44772 23.5523 5 23 5H17V4C17 2.34315 15.6569 1 14 1H10C8.34315 1 7 2.34315 7 4ZM7 7H17H22V13H13V12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12V13H2L2 7H7ZM11 15H3L3 21H21V15H13V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V15Z" fill="#262626"/>
 </svg>
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "0.5.2",
+  "version": "0.6.4",
  "private": false,
  "description": "NAV designsystem react components",
  "author": "NAV Designsystem team",
@@ -34,7 +34,7 @@
    "watch": "tsc --watch -p tsconfig-esm.json"
  },
  "dependencies": {
-    "@navikt/ds-icons": "^0.3.2",
+    "@navikt/ds-icons": "^0.3.3",
    "@popperjs/core": "^2.5.4",
    "classnames": "^2.2.6",
    "copy-to-clipboard": "^3.3.1",
@@ -4,7 +4,6 @@ import {
  AccordionAnchorMenuCollapsable as Collapsable,
  AccordionAnchorMenuItem as Item,
 } from "../index";
-import { useEffect } from "react";
 import {
  ProductPageLayout as Layout,
  ProductPageSection as Section,
@@ -20,19 +19,6 @@ import { Link, HashRouter as Router } from "react-router-dom";
 export default {
  title: "ds-react/accordion-anchor-menu",
  component: { Menu },
-  decorators: [
-    (Story) => {
-      useEffect(() => {
-        document.getElementById("decorator-header").style.display = "block";
-        document.getElementById("decorator-footer").style.display = "block";
-        return () => {
-          document.getElementById("decorator-header").style.display = "none";
-          document.getElementById("decorator-footer").style.display = "none";
-        };
-      }, []);
-      return <Story />;
-    },
-  ],
  parameters: {
    layout: "fullscreen",
  },
@@ -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"
        />
@@ -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>
@@ -24,26 +24,26 @@ 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 focusable="false" role="img" />;
    case "warning":
-      return <WarningFilled />;
+      return <WarningFilled focusable="false" role="img" />;
    case "info":
-      return <InformationFilled />;
+      return <InformationFilled focusable="false" role="img" />;
    case "success":
-      return <SuccessFilled />;
+      return <SuccessFilled 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,7 +52,7 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(
        `navds-alert--${variant}`,
        `navds-alert--${size}`,
        "navds-body-long",
-        "navds-body--s"
+        { "navds-body--s": size === "s" }
      )}
      {...rest}
    >
@@ -25,7 +25,7 @@ export const All = () => {
      <h2>Small</h2>
      <div>
        {variants.map((variant) => (
-          <Alert key={variant} variant={variant} size="small">
+          <Alert key={variant} variant={variant} size="s">
            {Array(8).fill(`${variant} content`).join(" ")}
          </Alert>
        ))}
@@ -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}
    />
@@ -52,7 +52,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,7 +62,7 @@ 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>
        ))}
@@ -0,0 +1,34 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+import { OverridableComponent } from "../util";
+
+export interface MicroCardProps {
+  props: {
+    children: string;
+    /**
+     * @ignore
+     */
+    className?: string;
+  } & React.HTMLAttributes<HTMLAnchorElement>;
+  defaultComponent: "a";
+}
+
+export const MicroCard: OverridableComponent<MicroCardProps> = forwardRef(
+  ({ className, component: Component = "a", children, ...rest }, ref) => (
+    <Component
+      ref={ref}
+      className={cl(
+        "navds-card__micro",
+        "navds-detail",
+        "navds-detail--s",
+        className
+      )}
+      title={children}
+      {...rest}
+    >
+      {children}
+    </Component>
+  )
+);
+
+export default MicroCard;
@@ -0,0 +1,2 @@
+export { default as MicroCard } from "./MicroCard";
+export * from "./MicroCard";
@@ -0,0 +1,21 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+
+<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>
+```
+
+Hvis man ønsker å ta i bruk nextjs sin `Link`-komponent:
+
+```
+<Link href="/lenke/til/side" passHref>
+  <MicroCard>Lenketekst</MicroCard>
+</Link>
+```
@@ -0,0 +1,16 @@
+import React from "react";
+import { MicroCard } from "../index";
+import { Meta } from "@storybook/react/types-6-0";
+export default {
+  title: "ds-react/card",
+  component: MicroCard,
+} as Meta;
+
+export const All = () => {
+  return (
+    <div>
+      <h2>MicroCard</h2>
+      <MicroCard href="#">Sit laborum aliqua.</MicroCard>
+    </div>
+  );
+};
@@ -2,24 +2,10 @@ import * as React from "react";
 import { ContentContainer } from "../index";
 import { BodyLong } from "../../index";
 import "./style.css";
-import { useEffect } from "react";

 export default {
  title: "ds-react/content-container",
  component: ContentContainer,
-  decorators: [
-    (Story) => {
-      useEffect(() => {
-        document.getElementById("decorator-header").style.display = "block";
-        document.getElementById("decorator-footer").style.display = "block";
-        return () => {
-          document.getElementById("decorator-header").style.display = "none";
-          document.getElementById("decorator-footer").style.display = "none";
-        };
-      }, []);
-      return <Story />;
-    },
-  ],
  parameters: {
    layout: "fullscreen",
    backgrounds: {
@@ -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
@@ -0,0 +1,73 @@
+import React, { forwardRef, HTMLAttributes } from "react";
+import cl from "classnames";
+
+export interface HeaderProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Header title
+   */
+  children: string;
+  /**
+   * @ignore
+   */
+  className?: string;
+  /**
+   * Pictogram placed in header
+   */
+  illustration?: React.ReactNode;
+  /**
+   * Short text placed under title
+   */
+  description?: string;
+  /**
+   * Decides how to align content
+   * @default "left"
+   */
+  variant?: "left" | "center";
+  /**
+   * Predefined theming for header
+   * @default "guide"
+   */
+  theme?: "situation" | "product" | "guide";
+}
+
+const Header = forwardRef<HTMLDivElement, HeaderProps>(
+  (
+    {
+      children,
+      className,
+      illustration,
+      description,
+      theme = "guide",
+      variant = "left",
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cl(
+          "navds-header",
+          className,
+          `navds-header--${theme}`,
+          `navds-header--${variant}`
+        )}
+        {...rest}
+      >
+        {illustration && (
+          <div className="navds-header__illustration">{illustration}</div>
+        )}
+        <div className="navds-header__wrapper">
+          <h1 className="navds-header__title navds-title navds-title--2xl">
+            {children}
+          </h1>
+          {description && (
+            <p className="navds-body-short navds-body--s">{description}</p>
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+
+export default Header;
@@ -0,0 +1,2 @@
+export { default as Header } from "./Header";
+export * from "./Header";
@@ -0,0 +1,74 @@
+import React from "react";
+import { Header } from "../index";
+import { Meta } from "@storybook/react/types-6-0";
+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>
+  );
+};
+
+/* prettier-ignore */
+const illustrationPictogram = <svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M37.6697 60.6469L9 31.9772L30.9772 10L59.6469 38.6697L72.1116 26.205L81 82L25.205 73.1116L37.6697 60.6469Z" fill="#FFECCC"/>
+<path d="M94.5 64.0584C94.5 72.104 88.003 78.6169 80 78.6169C71.997 78.6169 65.5 72.104 65.5 64.0584C65.5 56.0129 71.997 49.5 80 49.5C88.003 49.5 94.5 56.0129 94.5 64.0584Z" stroke="#262626" stroke-width="3"/>
+<path d="M91.9999 95.9999V95.9999C91.9999 89.3725 86.6274 83.9561 79.9999 83.9561V83.9561C73.3725 83.9561 67.9999 89.3725 67.9999 95.9999V95.9999" stroke="#262626" stroke-width="3"/>
+<ellipse cx="76.0001" cy="63.5566" rx="2" ry="2.00731" fill="#262626"/>
+<ellipse cx="84" cy="63.5566" rx="2" ry="2.00731" fill="#262626"/>
+<path d="M29 29.488V30C29 25.0515 25.866 22 22 22C18.134 22 15 25.0515 15 30V29.488" stroke="#262626" stroke-width="3"/>
+<circle cx="22" cy="15" r="5.5" stroke="#262626" stroke-width="3"/>
+<rect x="1.5" y="1.5" width="41" height="56" stroke="#262626" stroke-width="3"/>
+<path d="M10 37H27" stroke="#262626" stroke-width="3"/>
+<path d="M10 47H18.5" stroke="#262626" stroke-width="3"/>
+</svg>
@@ -25,6 +25,7 @@ export {
  InternalHeaderUser,
  InternalHeaderUserProps,
 } from "./internal-header/index";
+export { Header, HeaderProps } from "./header/index";
 export {
  ProductPageLayout,
  ProductPagePanel,
@@ -34,8 +35,9 @@ export { Link, LinkProps } from "./link/index";
 export { Modal, ModalProps } from "./modal/index";
 export { Popover, PopoverProps } from "./popover/index";
 export { Tag, TagProps } from "./tag/index";
-export { LinkPanel, LinkPanelProps } from "./link-panel/index";
+export { LinkPanel, LinkPanelProps, LinkPanelTitle } from "./link-panel/index";
 export { Panel, PanelProps } from "./panel/index";
+export { MicroCard, MicroCardProps } from "./card/index";
 export {
  Title,
  Ingress,
@@ -14,7 +14,11 @@ export interface InternalHeaderProps extends HTMLAttributes<HTMLElement> {

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

 const InternalHeaderUser = forwardRef<HTMLDivElement, InternalHeaderUserProps>(
  ({ className, name, ident, ...rest }, ref) => (
-    <div ref={ref} className={cl("navds-header__user", className)} {...rest}>
-      <span className="navds-header__name navds-body-short navds-body--s">
+    <div
+      ref={ref}
+      className={cl("navds-interal-header__user", className)}
+      {...rest}
+    >
+      <span className="navds-interal-header__name navds-body-short navds-body--s">
        {name}
      </span>
      <span className="navds-detail navds-detail--s">{ident}</span>
@@ -1,5 +1,4 @@
 import * as React from "react";
-import { useEffect } from "react";
 import {
  ProductPageLayout as Layout,
  ProductPageSection as Section,
@@ -14,19 +13,6 @@ import "./components/styles.css";
 export default {
  title: "ds-react/layouts/ProductPage",
  component: Layout,
-  decorators: [
-    (Story) => {
-      useEffect(() => {
-        document.getElementById("decorator-header").style.display = "block";
-        document.getElementById("decorator-footer").style.display = "block";
-        return () => {
-          document.getElementById("decorator-header").style.display = "none";
-          document.getElementById("decorator-footer").style.display = "none";
-        };
-      }, []);
-      return <Story />;
-    },
-  ],
  parameters: {
    layout: "fullscreen",
  },
@@ -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>
    );
@@ -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"
     */
@@ -0,0 +1,39 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+
+<Meta title="ds-react/Typography/intro" />
+
+# Hvordan ta i bruk typografien
+
+Typografien kan tas i bruk som React komponenter eller ved å ta i bruk css-stilene.
+Se eksemplene under ds-react tabben her i storybook for å se hvordan man tar i bruk både react og stilpakken for dette oppsettet.
+
+Oppsettet er forbedret med blandt annet letter-spacing og line-height.
+I tillegg kan man nå sette `spacing` proppen og man får da automatisk margin-bottom på typo-elementet.
+Da kan man lett sikre riktig spacing mellom tekst i en artikkel.
+
+Font-size er skrevet med REM, men basert på 16px root font size.
+Dette vil si at de som har forstørret font-size på root vil ende opp med større font enn forventet.
+For de som har satt root font size til 18px (1.125rem) kan da "fikse" dette ved å endre tilbake til 16px,
+da det nye typo-oppsettet fikser større font, eller man ta i bruk css-en under.
+
+Denne stylingen vil overskrive default variablene og tilpasse font-size.
+
+```css
+/* autogenerated fix for 18px root-font-size*/
+:root {
+  --navds-font-size-title-2xl: 2.2222222222222223rem;
+  --navds-font-size-title-xl: 1.7777777777777777rem;
+  --navds-font-size-title-l: 1.5555555555555556rem;
+  --navds-font-size-title-m: 1.3333333333333333rem;
+  --navds-font-size-title-s: 1.1111111111111112rem;
+  --navds-font-size-xl: 1.1111111111111112rem;
+  --navds-font-size-l: 1rem;
+  --navds-font-size-m: 0.8888888888888888rem;
+  --navds-font-size-s: 0.7777777777777778rem;
+}
+```
+
+Vi anbefaler å før eller siden endre tilbake til default root font size da designsystemet sine nye
+komponenter og design-tokens er basert på dette. Endringen til 18px root font size var i grunn for å teste en løsning for å
+forstørre font, noe som er fikset ved nye typo-løsningen. Vi vil derfor unngå å måtte ha midlertidge patcher/fikser
+for å tilpasse systemet for alle de forskjellige variantene av font size på root.
@@ -7,73 +7,64 @@ export default {
  component: BodyLong,
 };

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

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

 export const SideInnholdEksempel = () => {
  return (
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "0.3.1",
+  "version": "0.4.3",
  "private": false,
  "description": "Auto-generated design-tokens for NAV design-systems framework",
  "author": "NAV Designsystem team",
@@ -68,12 +68,12 @@ module.exports = {
      disabled: { value: "{navds.color.gray.40.value}" },
      action: {
        default: { value: "{navds.color.blue.50.value}" },
-        hover: { value: Color(baseColors.blue).lighten(0.1) },
+        hover: { value: "{navds.color.blue.60.value}" },
        active: { value: "{navds.color.deepblue.50.value}" },
      },
      danger: {
        default: { value: "{navds.color.red.50.value}" },
-        hover: { value: Color(baseColors.red).lighten(0.1) },
+        hover: { value: "{navds.color.red.60.value}" },
        active: { value: "{navds.color.red.70.value}" },
      },
      error: {
@@ -95,7 +95,7 @@ module.exports = {
      border: { value: "{navds.color.gray.40.value}" },
      background: { value: "{navds.color.white.value}" },
      text: {
-        primary: { value: "{navds.color.gray.90}" },
+        primary: { value: "{navds.color.gray.90.value}" },
        inverse: { value: "{navds.color.white.value}" },
        disabled: { value: "{navds.color.gray.60.value}" },
        link: { value: "{navds.color.blue.50.value}" },
@@ -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: {
@@ -161,17 +156,6 @@ module.exports = {
        m: { value: getFontSize(16) },
        s: { value: getFontSize(14) },
      },
-      spacing: {
-        "3xl": { value: getFontSize(40) },
-        "2xl": { value: getFontSize(36) },
-        xl: { value: getFontSize(32) },
-        l: { value: getFontSize(28) },
-        m: { value: getFontSize(24) },
-        s: { value: getFontSize(20) },
-        xs: { value: getFontSize(16) },
-        "2xs": { value: getFontSize(12) },
-        "3xs": { value: getFontSize(8) },
-      },
      weight: {
        bold: { value: "600" },
        regular: { value: "400" },
@@ -189,14 +173,14 @@ module.exports = {
    contentContainer: {
      maxWidth: { value: "79.5rem" },
      padding: {
-        small: { value: "1rem" },
-        mediumAndLarger: { value: "1.5rem" },
+        small: { value: "{navds.spacing.4.value}" },
+        mediumAndLarger: { value: "{navds.spacing.6.value}" },
      },
    },
    grid: {
      gutter: {
-        small: { value: "1rem" },
-        mediumAndLarger: { value: "1.5rem" },
+        small: { value: "{navds.spacing.4.value}" },
+        mediumAndLarger: { value: "{navds.spacing.6.value}" },
      },
    },
    layout: {
@@ -205,20 +189,18 @@ module.exports = {
        gray: { value: "{navds.color.gray.10.value}" },
      },
      padding: {
-        small: { value: "1rem" },
-        mediumAndLarger: { value: "2.5rem" },
+        small: { value: "{navds.spacing.4.value}" },
+        mediumAndLarger: { value: "{navds.spacing.10.value}" },
      },
    },
-    z: {
-      index: {
-        modal: {
-          content: { value: "1010" },
-          overlay: { value: "1000" },
-        },
-        popover: {
-          default: { value: "2000" },
-          arrow: { value: "-1" },
-        },
+    "z-index": {
+      modal: {
+        content: { value: "1010" },
+        overlay: { value: "1000" },
+      },
+      popover: {
+        default: { value: "2000" },
+        arrow: { value: "-1" },
      },
    },
    sidebar: {
@@ -226,5 +208,14 @@ module.exports = {
        offset: { value: "0" },
      },
    },
+    spacing: Array(24)
+      .fill(0)
+      .reduce(
+        (spacing, _, index) => ({
+          ...spacing,
+          [index + 1]: { value: `${(index + 1) / 4}rem` },
+        }),
+        {}
+      ),
  },
 };
@@ -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>
@@ -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"
@@ -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": {
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-ikonknapper",
-  "version": "2.0.1",
+  "version": "2.0.2",
  "main": "lib/index.js",
  "types": "lib/index.d.ts",
  "license": "MIT",
@@ -25,7 +25,7 @@
  "devDependencies": {
    "nav-frontend-chevron": "^1.0.30",
    "nav-frontend-ikoner-assets": "^3.0.1",
-    "nav-frontend-knapper": "^3.0.1",
+    "nav-frontend-knapper": "^3.0.2",
    "react": "^16.8.0 || ^17.0.0"
  }
 }
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-knapper-style",
-  "version": "2.0.1",
+  "version": "2.0.2",
  "main": "src/index.less",
  "license": "MIT",
  "files": [
@@ -12,11 +12,11 @@
 }

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

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

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

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

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

 ## Bruk av Typografi i prosjekter

@@ -0,0 +1,13 @@
+{
+  "plugins": ["transform-object-rest-spread"],
+  "presets": [
+    [
+      "env",
+      {
+        "targets": {
+          "node": 6
+        }
+      }
+    ]
+  ]
+}
@@ -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
+      }
+    }
+  }
+}
+```
@@ -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);
+  };
+})();
@@ -0,0 +1 @@
+exports.loadNodeContent = (node) => Promise.resolve(node.content);
@@ -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"
+  }
+}
@@ -0,0 +1,3 @@
+{
+  "extends": ["config:base"]
+}
@@ -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;
+};
@@ -1,11 +1,16 @@
+require("dotenv").config({
+  path: ".env",
+});
+
 module.exports = {
  siteMetadata: {
-    title: `Designsystemet NAV`,
+    title: `Verktøykassen NAV`,
    description: ``,
    author: `@navikt`,
    siteUrl: "https://design.nav.no/",
  },
  plugins: [
+    `gatsby-plugin-client-side-redirect`,
    "gatsby-plugin-robots-txt",
    `gatsby-plugin-sitemap`,
    `gatsby-plugin-react-helmet`,
@@ -28,17 +33,6 @@ module.exports = {
        ],
      },
    },
-    {
-      resolve: `gatsby-plugin-manifest`,
-      options: {
-        name: `NAV Designsystem`,
-        short_name: `NAV DS`,
-        start_url: `/`,
-        background_color: `#fff`,
-        theme_color: `#fff`,
-        icon: `src/components/assets/images/favicon.png`,
-      },
-    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
@@ -102,23 +96,32 @@ module.exports = {
      },
    },
    {
-      resolve: `gatsby-plugin-amplitude-analytics`,
+      resolve: `from-git-fix`,
      options: {
-        apiKey: "default",
-        respectDNT: true,
-        eventTypes: {
-          pageView: "sidevisning",
-        },
-        amplitudeConfig: {
-          apiEndpoint: "amplitude.nav.no/collect-auto",
-          saveEvents: false,
-          includeUtm: true,
-          includeReferrer: true,
-          platform: "https://design.nav.no/",
+        repository: "verktoykasse-innhold",
+        tree: true,
+        releases: false,
+        user: "navikt",
+        branch: process.env.BRANCH,
+        secrets: {
+          token: process.env.ACCESS_TOKEN,
        },
      },
    },
-
+    {
+      resolve: `gatsby-plugin-manifest`,
+      options: {
+        name: `NAV Designsystem`,
+        short_name: `NAV DS`,
+        start_url: `/`,
+        background_color: `#fff`,
+        theme_color: `#fff`,
+        icon: `src/components/assets/images/favicon.png`,
+      },
+    },
+    {
+      resolve: `gatsby-transformer-remark`,
+    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
@@ -1,4 +1,7 @@
+const path = require(`path`);
+const redirects = require("./redirects");
 let packages = {};
+const dsUrl = "/designsystem";

 const getDependencyEdgesFromPackages = () =>
  Object.keys(packages)
@@ -76,10 +79,13 @@ exports.onCreatePage = ({ page, actions }) => {
    deletePage(page);
  };
  if (compOverview !== null) {
-    makePage(`/components/${compOverview[2].toLowerCase()}`, compOverview[2]);
+    makePage(
+      `${dsUrl}/components/${compOverview[2].toLowerCase()}`,
+      compOverview[2]
+    );

    makePage(
-      `/components/${compOverview[2].toLowerCase()}/overview`,
+      `${dsUrl}/components/${compOverview[2].toLowerCase()}/overview`,
      "Oversikt",
      0
    );
@@ -91,7 +97,7 @@ exports.onCreatePage = ({ page, actions }) => {
    scan(`nav-frontend-${source}`);

    createPage({
-      path: `/components/${compOverview[2].toLowerCase()}/technical`,
+      path: `${dsUrl}/components/${compOverview[2].toLowerCase()}/technical`,
      context: {
        frontmatter: { title: "Teknisk", rank: 1 },
        source: page.path,
@@ -112,7 +118,7 @@ exports.onCreatePage = ({ page, actions }) => {
  }
  if (compAcce !== null) {
    makePage(
-      `/components/${compAcce[2].toLowerCase()}/accessibility`,
+      `${dsUrl}/components/${compAcce[2].toLowerCase()}/accessibility`,
      "Tilgjengelighet",
      2
    );
@@ -120,9 +126,75 @@ exports.onCreatePage = ({ page, actions }) => {

  if (compIngress !== null) {
    makePage(
-      `/components/${compIngress[2].toLowerCase()}/ingress`,
+      `${dsUrl}/components/${compIngress[2].toLowerCase()}/ingress`,
      "Ingress",
      3
    );
  }
 };
+
+exports.createPages = async ({ graphql, actions, reporter }) => {
+  const { createPage, createRedirect } = actions;
+
+  redirects.forEach((path) => {
+    createRedirect({
+      fromPath: `${path}`,
+      toPath: `/designsystem${path}`,
+      isPermanent: true,
+    });
+  });
+
+  const result = await graphql(`
+    {
+      allGithubFile(filter: { relativeDirectory: { nin: "." } }) {
+        edges {
+          node {
+            base
+            path
+            relativeDirectory
+            childMdx {
+              tableOfContents(maxDepth: 3)
+              excerpt
+            }
+            childMarkdownRemark {
+              htmlAst
+              frontmatter {
+                title
+              }
+            }
+          }
+        }
+      }
+    }
+  `);
+  result.data.allGithubFile.edges
+    .filter(({ node }) => node.path.endsWith(".md"))
+    .forEach(({ node }) => {
+      const parsedPath = `/${node.path.replace(".md", "").replace(" ", "-")}`
+        .toLowerCase()
+        .replace("readme", "");
+      console.log(parsedPath);
+
+      createPage({
+        path: parsedPath,
+        component: path.resolve(
+          `./src/components/layout/templates/verktoykasseArticle.jsx`
+        ),
+        context: {
+          parentDir: node.relativeDirectory,
+          htmlAst: node.childMarkdownRemark.htmlAst,
+          frontmatter: {
+            ...node.childMarkdownRemark.frontmatter,
+            ingress: node.childMdx?.excerpt || null,
+          },
+          toc: node.childMdx?.tableOfContents || null,
+        },
+      });
+    });
+};
+
+exports.onPostBuild = ({ store, reporter }) => {
+  const { redirects } = store.getState();
+  reporter.info("Finished building site, here are all the redirects: ");
+  console.log(redirects);
+};
@@ -28,7 +28,7 @@
    "gatsby-remark-autolink-headers": "^2.3.15",
    "gatsby-remark-prismjs": "^3.5.16",
    "gatsby-source-filesystem": "^2.3.31",
-    "gatsby-transformer-remark": "^2.8.38",
+    "gatsby-transformer-remark": "^2.8.28",
    "gatsby-transformer-sharp": "^2.5.16",
    "mdx-utils": "^0.2.0",
    "object-path-immutable": "^4.1.0",
@@ -45,7 +45,17 @@
    "rehype-toc": "^3.0.2",
    "@navikt/ds-css": "*",
    "@navikt/ds-react": "*",
-    "canvg": "^3.0.7"
+    "canvg": "^3.0.7",
+    "@mosch/gatsby-source-github": "^0.4.1",
+    "dotenv": "^10.0.0",
+    "rehype-react": "^6.2.0",
+    "lodash.startcase": "4.4.0",
+    "gatsby-plugin-client-side-redirect": "^1.1.0",
+    "file-type": "^7.2.0",
+    "mime-types": "^2.1.17",
+    "minimatch": "^3.0.4",
+    "octokat": "^0.9.2",
+    "from-git-fix": "0.5.0"
  },
  "devDependencies": {
    "prettier": "2.2.1"
@@ -0,0 +1,162 @@
+const redirects = [
+  "/components/alertstripe/overview",
+  "/components/chevron/overview",
+  "/components/ekspanderbartpanel/overview",
+  "/components/etikett/overview",
+  "/components/hjelpetekst/overview",
+  "/components/ikonknapper/overview",
+  "/components/knapp/overview",
+  "/components/lenkepanel/overview",
+  "/components/lenke/overview",
+  "/components/lesmerpanel/overview",
+  "/components/lukknapp/overview",
+  "/components/modal/overview",
+  "/components/panel/overview",
+  "/components/popover/overview",
+  "/components/snakkeboble/overview",
+  "/components/stegindikator/overview",
+  "/components/spinner/overview",
+  "/components/tabell/overview",
+  "/components/tabs/overview",
+  "/components/tekstomrade/overview",
+  "/components/togglegruppe/overview",
+  "/components/toggleknapp/overview",
+  "/components/typografi/overview",
+  "/components/bekreftcheckbokspanel/overview",
+  "/components/veileder/overview",
+  "/components/veilederpanel/overview",
+  "/components/checkbox/overview",
+  "/components/checkbokspanelgruppe/overview",
+  "/components/feiloppsummering/overview",
+  "/components/fnrinput/overview",
+  "/components/input/overview",
+  "/components/radio/overview",
+  "/components/radiopanelgruppe/overview",
+  "/components/skjemagruppe/overview",
+  "/components/select/overview",
+  "/components/textarea/overview",
+  "/accessibility/overview/",
+  "/patterns/form-validation/",
+  "/resources/identity/",
+  "/resources/new-project/",
+  "/resources/colors/palette/",
+  "/resources/icons/iconsearch/",
+  "/resources/illustrations/resources/",
+  "/resources/language/principles/",
+  "/components/alertstripe/technical",
+  "/components/chevron/technical",
+  "/components/ekspanderbartpanel/technical",
+  "/components/etikett/technical",
+  "/components/hjelpetekst/technical",
+  "/components/ikonknapper/technical",
+  "/components/knapp/technical",
+  "/components/lenkepanel/technical",
+  "/components/lenke/technical",
+  "/components/lesmerpanel/technical",
+  "/components/lukknapp/technical",
+  "/components/modal/technical",
+  "/components/panel/technical",
+  "/components/popover/technical",
+  "/components/snakkeboble/technical",
+  "/components/stegindikator/technical",
+  "/components/spinner/technical",
+  "/components/tabell/technical",
+  "/components/tabs/technical",
+  "/components/tekstomrade/technical",
+  "/components/togglegruppe/technical",
+  "/components/toggleknapp/technical",
+  "/components/typografi/technical",
+  "/components/bekreftcheckbokspanel/technical",
+  "/components/veileder/technical",
+  "/components/veilederpanel/technical",
+  "/components/checkbox/technical",
+  "/components/checkbokspanelgruppe/technical",
+  "/components/feiloppsummering/technical",
+  "/components/fnrinput/technical",
+  "/components/input/technical",
+  "/components/radio/technical",
+  "/components/radiopanelgruppe/technical",
+  "/components/skjemagruppe/technical",
+  "/components/select/technical",
+  "/components/textarea/technical",
+  "/components/",
+  "/resources/colors/",
+  "/resources/colors/accessibility/",
+  "/resources/icons/install/",
+  "/resources/illustrations/guidelines/",
+  "/resources/language/guidelines/",
+  "/components/alertstripe/accessibility",
+  "/components/chevron/accessibility",
+  "/components/etikett/accessibility",
+  "/components/hjelpetekst/accessibility",
+  "/components/knapp/accessibility",
+  "/components/lenke/accessibility",
+  "/components/lukknapp/accessibility",
+  "/components/modal/accessibility",
+  "/components/popover/accessibility",
+  "/components/snakkeboble/accessibility",
+  "/components/spinner/accessibility",
+  "/components/tabell/accessibility",
+  "/components/tabs/accessibility",
+  "/components/veileder/accessibility",
+  "/components/bekreftcheckbokspanel/accessibility",
+  "/components/input/accessibility",
+  "/components/fnrinput/accessibility",
+  "/components/textarea/accessibility",
+  "/patterns/",
+  "/accessibility/alt-text/",
+  "/accessibility/placeholders/",
+  "/resources/illustrations/",
+  "/resources/colors/technical/",
+  "/resources/icons/guidelines/",
+  "/resources/language/checklist/",
+  "/resources/",
+  "/resources/icons/",
+  "/resources/language/units/",
+  "/accessibility/",
+  "/accessibility/disabled/",
+  "/resources/language/",
+  "/accessibility/tools/",
+  "/resources/subdomains/",
+  "/resources/internal-ux-principles/",
+  "/resources/typography/",
+  "/components/alertstripe",
+  "/components/chevron",
+  "/components/ekspanderbartpanel",
+  "/components/etikett",
+  "/components/hjelpetekst",
+  "/components/ikonknapper",
+  "/components/knapp",
+  "/components/lenkepanel",
+  "/components/lenke",
+  "/components/lesmerpanel",
+  "/components/lukknapp",
+  "/components/modal",
+  "/components/panel",
+  "/components/popover",
+  "/components/snakkeboble",
+  "/components/stegindikator",
+  "/components/spinner",
+  "/components/tabell",
+  "/components/tabs",
+  "/components/tekstomrade",
+  "/components/togglegruppe",
+  "/components/toggleknapp",
+  "/components/typografi",
+  "/components/bekreftcheckbokspanel",
+  "/components/veileder",
+  "/components/veilederpanel",
+  "/components/checkbox",
+  "/components/checkbokspanelgruppe",
+  "/components/feiloppsummering",
+  "/components/fnrinput",
+  "/components/input",
+  "/components/radio",
+  "/components/radiopanelgruppe",
+  "/components/skjemagruppe",
+  "/components/select",
+  "/components/textarea",
+  "/components/other/",
+];
+
+module.exports = redirects;
@@ -46,6 +46,35 @@ export const CrossIcon = (props) => {
  );
 };

+export const NAVLogoDark = ({ className }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`navLogo ${className}`}
+    width="90"
+    height="57"
+    viewBox="0 0 269 169"
+    focusable="false"
+    aria-label="Nav logo mørk versjon"
+    role="img"
+  >
+    <defs>
+      <path d="M22.407 43.417V.687H.564v42.73h21.843z" />
+    </defs>
+    <g fill="none" fillRule="evenodd">
+      <path
+        fill="#262626"
+        d="M125.31 168.942c-46.642 0-84.46-37.817-84.46-84.465C40.85 37.824 78.667 0 125.31 0c46.657 0 84.48 37.824 84.48 84.477 0 46.648-37.823 84.465-84.48 84.465zM0 121.359l17.265-42.73h16.589l-17.243 42.73zM213.044 121.359l17.044-42.73h9.044l-17.043 42.73z"
+      />
+      <g transform="translate(246 77.942)">
+        <path fill="#262626" d="M.564 43.417L17.604.687h4.803L5.364 43.418z" />
+      </g>
+      <path
+        fill="#FEFEFE"
+        d="M197.36 78.63h-15.016s-1.035 0-1.4.914l-8.31 25.439-8.304-25.44c-.366-.913-1.407-.913-1.407-.913h-28.872c-.625 0-1.149.522-1.149 1.143v8.639c0-6.853-7.292-9.782-11.562-9.782-9.562 0-15.963 6.298-17.956 15.873-.108-6.352-.636-8.628-2.347-10.96-.786-1.141-1.922-2.101-3.159-2.895-2.547-1.492-4.834-2.018-9.749-2.018h-5.77s-1.044 0-1.412.914l-5.25 13.013V79.773c0-.621-.52-1.143-1.145-1.143H61.198s-1.03 0-1.406.914l-5.459 13.53s-.545 1.354.701 1.354h5.133v25.784c0 .64.504 1.147 1.147 1.147h13.238c.624 0 1.144-.507 1.144-1.147V94.428h5.16c2.961 0 3.588.08 4.74.618.694.262 1.32.792 1.66 1.403.698 1.314.873 2.892.873 7.545v16.218c0 .64.514 1.147 1.15 1.147h12.687s1.434 0 2.001-1.416l2.812-6.95c3.74 5.237 9.893 8.366 17.541 8.366h1.671s1.443 0 2.014-1.416l4.897-12.128v12.397c0 .64.524 1.147 1.15 1.147h12.951s1.43 0 2.003-1.416c0 0 5.18-12.861 5.2-12.958h.008c.2-1.07-1.153-1.07-1.153-1.07h-4.623V83.847l14.545 36.096c.568 1.416 2 1.416 2 1.416h15.301s1.44 0 2.008-1.416l16.125-39.93c.558-1.383-1.057-1.383-1.057-1.383zm-64.458 27.285h-8.7c-3.463 0-6.28-2.804-6.28-6.271 0-3.461 2.817-6.283 6.28-6.283h2.433c3.454 0 6.267 2.822 6.267 6.283v6.27z"
+      />
+    </g>
+  </svg>
+);
 export const NAVLogo = () => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
@@ -0,0 +1,23 @@
+import React from "react";
+import { Link } from "gatsby";
+
+import "./card.less";
+
+const Card = ({ content, title, link, icon }) => {
+  const internalLink = link.startsWith("/");
+  return internalLink ? (
+    <Link className="card" to={link}>
+      <div className="card__icon">{icon}</div>
+      <div className="card__title">{title}</div>
+      <div className="card__content">{content}</div>
+    </Link>
+  ) : (
+    <a className="card" href={link}>
+      <div className="card__icon">{icon}</div>
+      <div className="card__title">{title}</div>
+      <div className="card__content">{content}</div>
+    </a>
+  );
+};
+
+export default Card;
@@ -0,0 +1,87 @@
+.card {
+  height: 22rem;
+  width: 18rem;
+  text-decoration: none;
+  color: var(--navds-color-darkgray);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 4rem 2rem 2rem 2rem;
+  border-radius: 8px;
+  border: 2px solid var(--navds-color-gray-20);
+  background-color: white;
+  position: relative;
+
+  &:hover {
+    box-shadow: 0 16px 18px -13px rgba(0, 0, 0, 0.1),
+      0 17px 36px -14px rgba(0, 0, 0, 0.17);
+  }
+
+  &:focus {
+    border-color: var(--navds-color-text-focus);
+    outline: none;
+  }
+}
+
+.card__grid {
+  column-gap: 1rem;
+  row-gap: 1rem;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  padding: 0;
+}
+
+.card__icon {
+  width: 4.5rem;
+  height: 4.5rem;
+  border-radius: 10rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 3rem;
+  flex-shrink: 0;
+  background: linear-gradient(
+    -52deg,
+    rgba(153, 195, 255, 1) 0%,
+    rgba(153, 195, 255, 1) 50%,
+    rgba(204, 225, 255, 1) 50%,
+    rgba(204, 225, 255, 1) 100%
+  );
+
+  svg {
+    font-size: 1.5rem;
+  }
+  .icon-facilitet--align {
+    margin-top: 0.25rem;
+    margin-left: 0.25rem;
+  }
+}
+
+.card__title {
+  margin-bottom: 1rem;
+  font-size: 1.5rem;
+  line-height: 1.75rem;
+  font-weight: 600;
+}
+
+.card:hover .card__title,
+.card:focus .card__title {
+  text-decoration: underline;
+}
+
+.card__content {
+  text-align: center;
+}
+
+@media screen and (max-width: 1350px) {
+  .card__grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media screen and (max-width: 700px) {
+  .card__grid {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
@@ -14,7 +14,7 @@ const GetStartedPage = ({ ...props }) => (
          {props.children}
        </Link>
      )}
-      href="/components"
+      href="/designsystem/components"
      border
    >
      <div>
@@ -28,7 +28,7 @@ const GetStartedPage = ({ ...props }) => (
          {props.children}
        </Link>
      )}
-      href="/resources/icons"
+      href="/designsystem/resources/icons"
      border
    >
      <div>
@@ -42,7 +42,7 @@ const GetStartedPage = ({ ...props }) => (
          {props.children}
        </Link>
      )}
-      href="/resources/new-project"
+      href="/designsystem/resources/new-project"
      border
    >
      <div>
@@ -229,7 +229,7 @@ const IconPage = () => {
            onClick={() => setListView(0)}
            variant={!listView ? "primary" : "secondary"}
            aria-label="Vis ikoner med kategorier"
-            size="small"
+            size="s"
            className="iconPage__viewSelectButton"
          >
            <List />
@@ -238,7 +238,7 @@ const IconPage = () => {
            onClick={() => setListView(1)}
            variant={!listView ? "secondary" : "primary"}
            aria-label="Vis ikoner uten kategorier"
-            size="small"
+            size="s"
            className="iconPage__viewSelectButton"
          >
            <System />
@@ -267,7 +267,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"
@@ -277,7 +277,7 @@ const IconPage = () => {
                    SVG
                  </Button>
                  <Button
-                    size="small"
+                    size="s"
                    variant="action"
                    onClick={() => downloadPng()}
                    className="iconPage__modalButton"
@@ -1,66 +0,0 @@
-import React, { useEffect, useState, useRef } from "react";
-import { Hamburger } from "@navikt/ds-icons";
-import { InternalHeader } from "@navikt/ds-react";
-import { Link } from "gatsby";
-import { GithubLogoEm, NAVLogoWhite } from "../../assets/images/svg";
-import "./layout.css";
-import "./theme.css";
-
-export const Header = ({ onClick, open, onOpenSidebar }) => {
-  const [sidebarOpen, setSidebarOpen] = useState(false);
-
-  const handleClick = () => {
-    onOpenSidebar(!sidebarOpen);
-    setSidebarOpen(!sidebarOpen);
-  };
-
-  useEffect(() => {
-    setSidebarOpen(open);
-  }, [open]);
-
-  const buttonRef = useRef(null);
-  const prevOpen = useRef(open);
-
-  useEffect(() => {
-    if (prevOpen.current && !open) {
-      //buttonRef.current.focus();
-    }
-    prevOpen.current = open;
-  }, [open]);
-
-  return (
-    <>
-      <a href="#hovedinnhold" id="skip-link-v2" className="sr-only">
-        Hopp til innhold
-      </a>
-      <InternalHeader className="ds-header">
-        <div className="ds-header__title--wrapper">
-          <button
-            aria-label="Åpne sidenavigasjon"
-            onClick={() => handleClick()}
-            className="ds-header__icon ds-header__icon--slideIn"
-            ref={buttonRef}
-          >
-            <Hamburger focusable="false" aria-label="Hamburger ikon" />
-          </button>
-          <Link to="/beta/" className="ds-header__title">
-            {/* <NAVLogoWhite /> */}
-            <span>NAV Design System v2</span>
-          </Link>
-        </div>
-        <span className="ds-header__logo">
-          <NAVLogoWhite role="img" aria-label="NAV logo hvit" />
-        </span>
-        <div className="ds-header--right">
-          <a
-            href="https://github.com/navikt/nav-frontend-moduler"
-            className="ds-header__link ds-header__link--right"
-            aria-label="Github lenke"
-          >
-            <GithubLogoEm role="img" aria-label="Github-logo" />
-          </a>
-        </div>
-      </InternalHeader>
-    </>
-  );
-};
@@ -1,82 +0,0 @@
-import React, { forwardRef, useState } from "react";
-import { Expand } from "@navikt/ds-icons";
-import cl from "classnames";
-import { Link } from "gatsby";
-import { useBetaMenu } from "../../../useSiteStructure";
-import "./layout.css";
-import "./theme.css";
-
-export const SubMenu = ({ hidden, ...props }) => {
-  const [expanded, setExpanded] = useState(false);
-  return (
-    <>
-      <button
-        className="ds-sidebar__button"
-        onClick={() => setExpanded(!expanded)}
-        aria-expanded={expanded}
-        tabIndex={hidden ? -1 : 0}
-        aria-label={props.title}
-      >
-        {props.title}
-        <Expand
-          className={cl(
-            "navds-accordion__chevron",
-            `navds-accordion__chevron--${expanded ? "up" : "down"}`,
-            "ds-sidebar__chevron"
-          )}
-          focusable="false"
-        />
-      </button>
-      <ul
-        className={cl("ds-sidebar__submenu", {
-          "ds-sidebar__submenu--hidden": !expanded,
-        })}
-      >
-        {props.children.map((props) => (
-          <li key={props.title}>
-            {
-              <Link
-                to={props.link}
-                className="ds-sidebar__submenu--item"
-                activeClassName="active"
-                tabIndex={hidden ? -1 : 0}
-              >
-                {props.title}
-              </Link>
-            }
-          </li>
-        ))}
-      </ul>
-    </>
-  );
-};
-
-export const Menu = forwardRef<HTMLElement, { hidden: boolean }>(
-  ({ children, hidden, ...rest }, ref) => {
-    const menu = useBetaMenu();
-
-    return (
-      <nav ref={ref}>
-        <ul className="ds-sidebar__menu">
-          {menu.map((props) => (
-            <li key={props.title}>
-              {props.children ? (
-                <SubMenu {...props} hidden={hidden} />
-              ) : (
-                <Link
-                  to={props.link}
-                  className="ds-sidebar__button"
-                  activeClassName="active"
-                  tabIndex={hidden ? -1 : 0}
-                  aria-label={props.title}
-                >
-                  {props.title}
-                </Link>
-              )}
-            </li>
-          ))}
-        </ul>
-      </nav>
-    );
-  }
-);
@@ -1,60 +0,0 @@
-import { Close } from "@navikt/ds-icons";
-import cl from "classnames";
-import { default as React, useEffect, useState } from "react";
-import { useMediaQuery } from "react-responsive";
-import useKeypress from "react-use-keypress";
-import "./layout.css";
-import { Menu } from "./Menu";
-import "./theme.css";
-
-export const Sidebar = ({ open, closeSidebar }) => {
-  const [openButton, setOpenButton] = useState(open);
-  const small = useMediaQuery({
-    query: "(max-width: 960px)",
-  });
-
-  useKeypress("Escape", () => {
-    closeSidebar();
-  });
-
-  useEffect(() => {
-    if (!open) {
-      setTimeout(() => {
-        setOpenButton(false);
-      }, 150);
-    } else {
-      setOpenButton(true);
-    }
-  }, [open]);
-
-  return (
-    <>
-      {openButton && small && (
-        <div
-          onClick={closeSidebar}
-          className={cl("ds-sidebar--overlay", {
-            "ds-sidebar--overlay--fade": open,
-          })}
-        />
-      )}
-      <div
-        className={cl("ds-sidebar", {
-          "ds-sidebar__mobile": small,
-          "ds-sidebar__mobile--open": small && open,
-        })}
-      >
-        {small && openButton && (
-          <button
-            aria-label="Lukk sidenavigasjon"
-            onClick={closeSidebar}
-            className="ds-header__icon ds-header__icon--onSidebar"
-            autoFocus
-          >
-            <Close focusable="false" aria-label="Lukk ikon" />
-          </button>
-        )}
-        <Menu hidden={small && !open} />
-      </div>
-    </>
-  );
-};
@@ -1,75 +0,0 @@
-import { MDXProvider } from "@mdx-js/react";
-import { Title, BodyLong } from "@navikt/ds-react";
-import cl from "classnames";
-import React, { useEffect, useState } from "react";
-import { Helmet } from "react-helmet";
-import Codeblock, { InlineCode } from "../../code/Code";
-import Example from "../../example/Example";
-import { Header } from "./Header";
-import "./layout.css";
-import { Sidebar } from "./Sidebar";
-import "./theme.css";
-
-const BetaLayout = (props) => {
-  const [darkmode, setDarkmode] = useState(false);
-  const [sidebarOpen, setSidebarOpen] = useState(false);
-
-  useEffect(() => {
-    document.getElementById("gatsby-focus-wrapper").focus();
-  }, [sidebarOpen]);
-
-  return (
-    <>
-      <Helmet
-        title={props.pageContext?.frontmatter?.title}
-        titleTemplate="%s - NAV Designsystem"
-      >
-        <html lang="no" />
-        {props.pageContext?.frontmatter?.ingress && (
-          <meta
-            name="description"
-            content={props.pageContext?.frontmatter?.ingress}
-          />
-        )}
-      </Helmet>
-
-      <div
-        className={cl("ds-page-wrapper", {
-          "ds-lightmode": !darkmode,
-          "ds-darkmode": darkmode,
-        })}
-      >
-        <Header
-          onOpenSidebar={(e) => setSidebarOpen(e)}
-          open={sidebarOpen}
-          onClick={() => setDarkmode(!darkmode)}
-        />
-        <Sidebar
-          open={sidebarOpen}
-          closeSidebar={() => setSidebarOpen(false)}
-        />
-        <main className="ds-content--wrapper" id="hovedinnhold">
-          <div className="ds-content">
-            <MDXProvider
-              components={{
-                code: (props) => <Codeblock {...props} />,
-                inlineCode: (props) => <InlineCode {...props} />,
-                Example,
-                h1: (props) => <Title {...props} level={1} size="2xl" />,
-                h2: (props) => <Title {...props} level={2} size="xl" />,
-                h3: (props) => <Title {...props} level={3} size="l" />,
-                h4: (props) => <Title {...props} level={4} size="m" />,
-                h5: (props) => <Title {...props} level={5} size="s" />,
-                p: (props) => <BodyLong {...props} />,
-              }}
-            >
-              {props.children}
-            </MDXProvider>
-          </div>
-        </main>
-      </div>
-    </>
-  );
-};
-
-export default BetaLayout;
@@ -1,314 +0,0 @@
-@import "~@navikt/ds-css";
-
-div[class="ds-content"] > .table-of-contents {
-  display: none;
-  width: 0px;
-}
-
-.ds-page-wrapper {
-  display: grid;
-  padding: 0;
-  margin: 0;
-  /* max-width: 2560px; */
-  grid-template-areas:
-    "header header"
-    "sidebar content";
-  grid-template-columns: auto 1fr;
-  grid-template-rows: auto 1fr;
-  height: 100vh;
-}
-
-.ds-header {
-  grid-area: header;
-  display: flex;
-  z-index: 300;
-  justify-content: space-between;
-  background-color: var(--header-color);
-  min-height: auto;
-}
-
-.ds-content--wrapper {
-  width: 100%;
-}
-
-.ds-content {
-  grid-area: content;
-  overflow-y: auto;
-  padding: 24px 0 24px 24px;
-  background-color: var(--background-color);
-  color: var(--text-color);
-  max-width: 750px;
-  margin: 0 auto 0 0;
-}
-
-.ds-header__title {
-  text-decoration: none;
-  color: white;
-  display: inline-grid;
-  grid-auto-flow: column;
-  align-items: center;
-  padding: 0 1rem 0 1rem;
-  margin-left: -1.5rem;
-  column-gap: 1rem;
-  font-weight: var(--navds-font-weight-bold);
-  transition: background-color 150ms;
-  white-space: nowrap;
-  height: 3rem;
-  transform: translateX(0);
-  transition: transform 150ms;
-}
-
-.ds-header__title--wrapper {
-  display: flex;
-  align-items: center;
-  padding-right: 1rem;
-  height: 3rem;
-}
-
-.ds-header__icon {
-  font-size: 1.2rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 1rem 0 1rem;
-  outline: none;
-  border: none;
-  height: 3rem;
-  width: 3rem;
-  background-color: var(--header-color);
-  color: white;
-}
-
-.ds-header__icon--slideIn {
-  transform: translateX(-100%);
-  transition: transform 150ms;
-}
-
-.ds-header__icon--onSidebar {
-  background-color: transparent;
-  color: var(--text-color);
-}
-
-.ds-header__logo {
-  font-size: 3rem;
-  display: flex;
-  position: absolute;
-  left: calc(50% - 32px);
-}
-
-.ds-header__title > svg {
-  font-size: 3rem;
-}
-
-.ds-header__link {
-  height: 100%;
-  fill: white;
-  padding: 0 1rem 0 1rem;
-  font-size: 2rem;
-  transition: background-color 100ms;
-  display: flex;
-  align-items: center;
-}
-
-.ds-header__title:hover,
-.ds-header__icon:hover,
-.ds-header__link:hover {
-  background-color: var(--header-background-active);
-}
-
-.ds-header__title:focus,
-.ds-header__icon:focus,
-.ds-header__link:focus {
-  outline: 2px solid white;
-  outline-offset: -2px;
-}
-
-.ds-header__icon--onSidebar:hover {
-  background-color: var(--menu-background-active);
-}
-.ds-header__icon--onSidebar:focus {
-  background-color: transparent;
-  outline: 2px solid var(--header-color);
-  outline-offset: -2px;
-}
-.ds-header__icon--onSidebar:active {
-  background-color: var(--menu-background-active);
-  outline: 2px solid var(--header-color);
-  outline-offset: -2px;
-}
-
-.ds-header-darkswitch {
-  height: 30px;
-  width: 30px;
-}
-
-.ds-header--right {
-  display: flex;
-}
-
-.ds-sidebar {
-  grid-area: sidebar;
-  background-color: var(--sidebar-color);
-  /* width: 256px; */
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  color: var(--text-color);
-  border-right: var(--sidebar-divider);
-  width: 256px;
-}
-
-@media (max-width: 960px) {
-  .ds-sidebar {
-    display: none;
-  }
-  .ds-content {
-    padding-left: 1rem;
-  }
-  .ds-header__icon--slideIn {
-    transform: translateX(0%);
-  }
-  .ds-header__title {
-    transform: translateX(1.5rem);
-  }
-}
-
-.ds-sidebar * > li,
-.ds-sidebar__mobile * > li {
-  list-style: none;
-}
-
-.ds-sidebar__logo {
-  text-decoration: none;
-  color: white;
-  display: inline-grid;
-  grid-auto-flow: column;
-  align-items: center;
-  gap: 1rem;
-  font-weight: var(--navds-font-weight-bold);
-}
-
-.ds-sidebar__menu {
-  display: flex;
-  flex-direction: column;
-  margin: 0;
-  padding: 2rem 0 0 0;
-}
-
-.ds-sidebar__menu-item.active {
-  font-weight: bold;
-}
-
-.ds-sidebar__submenu {
-  max-height: max-content;
-  visibility: inherit;
-  display: block;
-  padding: 0;
-}
-
-.ds-sidebar__submenu--hidden {
-  visibility: hidden;
-  max-height: 0px;
-}
-
-.ds-sidebar__submenu--item {
-  height: 2rem;
-  min-height: 2rem;
-  padding-left: 2rem;
-  text-decoration: none;
-  color: var(--text-color);
-  display: flex;
-  align-items: center;
-}
-
-.ds-sidebar__button {
-  font-weight: var(--navds-font-weight-bold);
-  background-color: transparent;
-  color: var(--text-color);
-  text-decoration: none;
-  appearance: none;
-  margin: 0;
-  border: none;
-  width: 100%;
-  height: 2rem;
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-  padding: 0 1rem 0 1rem;
-  cursor: pointer;
-}
-
-.ds-sidebar__chevron {
-  width: 1rem;
-  height: 1rem;
-  transition: 150ms transform;
-}
-
-.ds-sidebar__button,
-.ds-sidebar__submenu--item {
-  background-color: transparent;
-  outline-width: 0px;
-  outline-offset: 0px;
-  transition: background-color 100ms;
-  transition: outline-width 100ms;
-  transition: outline-offset 100ms;
-}
-
-.ds-sidebar__button:hover,
-.ds-sidebar__submenu--item:hover {
-  background-color: var(--menu-background-active);
-}
-
-.ds-sidebar__button:focus,
-.ds-sidebar__submenu--item:focus {
-  background-color: var(--menu-background-active);
-  outline: var(--focus-outline);
-  outline-offset: -2px;
-}
-
-.ds-sidebar__mobile {
-  z-index: 999;
-  display: flex;
-  background-color: var(--sidebar-color);
-  flex-direction: column;
-  color: var(--text-color);
-  overflow-y: auto;
-  transition: transform 250ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
-  position: fixed;
-  left: -256px;
-  min-height: 100vh;
-  border-right: var(--sidebar-divider);
-}
-
-.ds-sidebar__mobile--open {
-  transform: translateX(100%);
-}
-
-.ds-sidebar--overlay {
-  display: block;
-  z-index: 200;
-  background: rgba(0, 0, 0, 0);
-  position: fixed;
-
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  transition: background 0.15s linear;
-}
-
-.ds-sidebar--overlay--fade {
-  background: rgba(0, 0, 0, 0.5);
-}
-
-#skip-link-v2 {
-  padding: 1rem;
-  border: 2px solid var(--navds-color-action-default);
-  background: white;
-}
-
-#skip-link-v2:focus {
-  position: absolute;
-  top: 0;
-  z-index: 1;
-}
@@ -1,27 +0,0 @@
-.ds-darkmode {
-  --background-color: #2c3741;
-  --header-color: #222b32;
-  --sidebar-color: #222b32;
-  --text-color: var(--navds-color-text-inverse);
-  --text-color-inverse: var(--navds-color-text-primary);
-  --heading-block-background: #f1f1f1;
-  --menu-background-active: #3c4b58;
-  --header-background-active: #3c4b58;
-  --focus-outline: 2px solid #fff;
-  --sidebar-divider: 2px solid #3c4b58;
-  --header-divider: 1px solid #3c4b58;
-}
-
-.ds-lightmode {
-  --background-color: #fff;
-  --sidebar-color: #fff;
-  --header-color: #222b32;
-  --text-color: var(--navds-color-text-primary);
-  --text-color-inverse: var(--navds-color-text-inverse);
-  --heading-block-background: #1a2026;
-  --header-background-active: #3c4b58;
-  --menu-background-active: #e6e6e6;
-  --focus-outline: 2px solid #1a2026;
-  --sidebar-divider: 1px solid #3c4b58;
-  --header-divider: 1px solid #3c4b58;
-}
@@ -6,29 +6,34 @@ import {
  Innholdstittel,
  Systemtittel,
  Undertittel,
+  Ingress,
 } from "nav-frontend-typografi";
 import Lenke from "nav-frontend-lenker";
+import Alertstripe from "nav-frontend-alertstriper";

 import { FileIcon, Cog } from "../assets/images/svg";
 import Example from "../example/Example";

-const MdxWrapper = (props) => (
-  <MDXProvider
-    components={{
-      h1: Innholdstittel,
-      h2: Systemtittel,
-      h3: (props) => <Undertittel {...props} tag="h3" />,
-      a: Lenke,
-      code: (props) => <Codeblock {...props} />,
-      inlineCode: (props) => <InlineCode {...props} />,
-      Undertittel,
-      InlineCode,
-      FileIcon,
-      Cog,
-      Example,
-    }}
-    {...props}
-  />
-);
+export const comps = {
+  h1: Innholdstittel,
+  h2: Systemtittel,
+  h3: (props) => <Undertittel {...props} tag="h3" />,
+  h4: (props) => <Undertittel {...props} tag="h4" />,
+  Ingress: Ingress,
+  ingress: Ingress,
+  a: Lenke,
+  code: (props) => <Codeblock {...props} />,
+  inlineCode: (props) => <InlineCode {...props} />,
+  Alertstripe: (props) => <Alertstripe {...props} />,
+  alertstripe: (props) => <Alertstripe {...props} />,
+  Undertittel,
+  undertittel: (props) => <Undertittel {...props} />,
+  InlineCode,
+  FileIcon,
+  Cog,
+  Example,
+};
+
+const MdxWrapper = (props) => <MDXProvider components={comps} {...props} />;

 export default MdxWrapper;
@@ -9,6 +9,7 @@ import LayoutPicker from "./layoutPicker";
 import MdxWrapper from "./Mdxprovider";
 import { globalHistory } from "@reach/router";
 import "./layout.less";
+import startCase from "lodash.startcase";

 const Layout = (props) => {
  useEffect(() => {
@@ -19,11 +20,16 @@ const Layout = (props) => {
    });
  }, []);

+  let source = startCase(props.path.split("/")[1]);
+  source = source === "Designsystem" ? "Designsystemet" : source;
+
  return (
    <>
      <Helmet
        title={props.pageContext?.frontmatter?.title}
-        titleTemplate="%s - NAV Designsystem"
+        titleTemplate={`%s - ${
+          source === "" ? "" : source + " -"
+        }  NAV Verktøykassen`}
      >
        <html lang="no" />
        {props.pageContext?.frontmatter?.ingress && (
@@ -33,18 +39,22 @@ const Layout = (props) => {
          />
        )}
      </Helmet>
+      <a href="#hovedinnhold" tab-index={-1} id="skip-link">
+        Hopp til innhold
+      </a>
      <div className="mainWrapper">
-        <Header location={props.location} />
-        <Breadcrumb location={props.location} />
+        <Header location={props.location} title={source} />
+        {props.path.startsWith("/designsystem") && (
+          <Breadcrumb location={props.location} />
+        )}
        <div className="contentWrapper">
-          {!(
-            ["/", "/404.html"].includes(props.pageResources?.page?.path) ||
-            props.location.pathname === "/404.html"
-          ) && <Sidebar className="leftNavigation" location={props.location} />}
+          {props?.pageResources?.page?.path !== "/404.html" && (
+            <Sidebar className="leftNavigation" location={props.location} />
+          )}
          <main
            id="hovedinnhold"
            className={cl("mainContent", {
-              "dsportal--fullwidth": props.path === "/",
+              forside: props.location.pathname === "/",
            })}
          >
            <LayoutPicker {...props}>
@@ -0,0 +1,69 @@
+import React from "react";
+import { Ingress, Sidetittel } from "nav-frontend-typografi";
+import Card from "../../card/Card";
+import { Star, Facilitet, HandsHeart, Like } from "@navikt/ds-icons";
+import { NAVLogoDark } from "../../assets/images/svg";
+import "./styles.less";
+/* import Lenke from "nav-frontend-lenker"; */
+
+const Forside = ({ ...props }) => (
+  <div className="forside__wrapper">
+    <div className="forside__intro">
+      <div className="forside__logo-wrapper">
+        <NAVLogoDark className="forside__logo" />
+        {/* <span className="forside__logo-links">
+          <Lenke href="#">Noe info</Lenke>
+          <Lenke href="#">Noe annet</Lenke>
+        </span>
+       */}
+      </div>
+      <Sidetittel>Verktøykassen</Sidetittel>
+      <Ingress>
+        En samling ressurser fra ulike fagdisipliner, som sammen hjelper oss med
+        å skape bedre, universelt tilgjengelige og sammenhengende produkter i
+        NAV.
+      </Ingress>
+    </div>
+
+    <nav className="card__wrapper" aria-label="Hovedmeny">
+      <ol className="card__grid">
+        <li>
+          <Card
+            content="Brand og visuell profil basert på vår visjon og våre verdier."
+            title="Brand"
+            link="https://identitet.nav.no/"
+            icon={<Star focusable="false" />}
+          />
+        </li>
+        <li>
+          <Card
+            content="Gjør det enklere å lage produkter i NAV."
+            title="Designsystem"
+            link="/designsystem"
+            icon={
+              <Facilitet focusable="false" className="icon-facilitet--align" />
+            }
+          />
+        </li>
+        <li>
+          <Card
+            content="Tjenester til brukerne må fungere for alle."
+            title="Universell utforming"
+            link="https://navikt.github.io/uu/"
+            icon={<HandsHeart focusable="false" />}
+          />
+        </li>
+        <li>
+          <Card
+            content="Vi gjør innholdsarbeidet åpent og tidlig tilgjengelig."
+            title="God praksis"
+            link="/god-praksis"
+            icon={<Like focusable="false" />}
+          />
+        </li>
+      </ol>
+    </nav>
+  </div>
+);
+
+export default Forside;
Author	SHA1	Message	Date
github-actions[bot]	145489756d	Lerna versionbump [ci skip] - @navikt/ds-react@0.6.4	2021-07-06 18:53:10 +00:00
Ken	8df7514055	oppdatert focus + role for ikonbruk i komponenter	2021-07-06 20:37:20 +02:00
Ken	614767d5a2	oppdatert specify for icons [ci skip]	2021-07-06 17:10:14 +02:00
Ken	fb23dbac85	oppdatert specify for icons [ci skip]	2021-07-06 17:00:10 +02:00
Ken	51acc59fde	[ci skip]	2021-07-03 22:36:56 +02:00
Ken	a18e62ec95	[ci skip]	2021-07-03 22:18:59 +02:00
Ken	9dc465dc76	Update .specifyrc.json	2021-07-03 22:12:02 +02:00
Ken	ffd5023dd9	[ci skip]	2021-07-03 22:07:39 +02:00
Ken	6ae42fccef	[ci skip]	2021-07-03 22:07:08 +02:00
Ken	3692c588af	[CI SKIP]	2021-07-03 21:57:42 +02:00
Ken	e2be70da9b	Update .specifyrc.json	2021-07-03 21:51:52 +02:00
Ken	dd4c90c24f	Create .specifyrc.json	2021-07-03 21:47:51 +02:00
github-actions[bot]	c1615a5acd	Lerna versionbump [ci skip] - @navikt/ds-css@0.6.4	2021-07-02 19:46:26 +00:00
Ken	c6aef457de	Oppdatert accordion-menu styling (#1135 )	2021-07-02 21:34:37 +02:00
github-actions[bot]	6f36724570	Lerna versionbump [ci skip] - @navikt/ds-css@0.6.3 - @navikt/ds-react@0.6.3 - @navikt/ds-tokens@0.4.3 - nav-frontend-ikonknapper@2.0.2 - nav-frontend-knapper-style@2.0.2 - nav-frontend-knapper@3.0.2 - nav-frontend-tabell-style@2.0.2 - nav-frontend-toggle-style@2.0.2 - nav-frontend-toggle@2.0.2	2021-07-02 15:03:44 +00:00
Ken	91b956d8c2	Button styling + oppdatert styling for ds-react komponenter (#1134 )	2021-07-02 16:50:09 +02:00
Ken	c9d70ebd1c	Update README.md	2021-06-24 09:02:56 +02:00
github-actions[bot]	6dee56062c	Lerna versionbump [ci skip] - @navikt/ds-css@0.6.2 - @navikt/ds-react@0.6.2 - @navikt/ds-tokens@0.4.2	2021-06-23 13:53:34 +00:00
Ken	b24c959968	MicroCard komponent (#1129 )	2021-06-23 15:41:56 +02:00
Ken	c44b82b603	Header for bruk på sider (#1128 )	2021-06-23 15:41:46 +02:00
Ken	c1b622de8c	Oppdatert typo komponent dokumentasjon (#1127 )	2021-06-22 21:53:37 +02:00
github-actions[bot]	a54449eaa7	Lerna versionbump [ci skip] - @navikt/ds-css@0.6.1 - @navikt/ds-react@0.6.1 - @navikt/ds-tokens@0.4.1	2021-06-21 13:58:11 +00:00
Ken	9a83f76822	Endret line-height bort fra rem (#1126 )	2021-06-21 15:43:11 +02:00
Ken	62d08d5483	la til string type for heading-level	2021-06-21 15:42:16 +02:00
Ken	98a44fc41c	Fikset RefAttributes for Accordion (#1122 )	2021-06-21 15:17:44 +02:00
Ken	26819e20e0	Update MobileNav.jsx	2021-06-18 17:27:58 +02:00
Ken	37e3727a8a	Update verktoykasseArticle.jsx	2021-06-18 17:27:16 +02:00
Ken	d7e277d934	Update build-publish.yml	2021-06-18 17:14:15 +02:00
Ken	3477719be4	Fikset workflow, la til cname (#1125 )	2021-06-18 16:43:32 +02:00
Ken	867e027c9e	Verktøykasse prototype MVP (#1124 )	2021-06-18 16:22:02 +02:00
Ken	04e91df171	Update build-publish.yml	2021-06-18 16:09:43 +02:00
Ken	36570d615a	Update build-publish.yml	2021-06-18 16:04:53 +02:00
Ken	d7446345ad	Update build-publish.yml	2021-06-18 15:40:32 +02:00
Ken	37e1d945a4	Update build-publish.yml	2021-06-18 14:53:44 +02:00
Ken	b0f08f26e9	Update vk-innhold-dev.yml	2021-06-18 14:51:52 +02:00
github-actions[bot]	fcfddd159d	Lerna versionbump [ci skip] - @navikt/ds-css@0.5.4	2021-06-18 09:47:54 +00:00
Ken	d7551d6e75	Fjernet smoothscroll fra ds-css (#1123 )	2021-06-18 11:34:39 +02:00
Ken	8ebf83d1b5	Update vk-innhold-dev.yml	2021-06-18 09:53:21 +02:00
Ken	70138c3364	Update build-publish.yml	2021-06-17 22:10:56 +02:00
Ken	208c5ad0ed	Update vk-innhold-dev.yml	2021-06-17 20:20:42 +02:00
Ken	187eabd1e6	Update and rename vk-innhold-dev to vk-innhold-dev.yml	2021-06-17 20:17:39 +02:00
Ken	5b7caf7f71	Create vk-innhold-dev	2021-06-17 20:16:32 +02:00
github-actions[bot]	812df58952	Lerna versionbump [ci skip] - @navikt/ds-icons@0.3.3 - @navikt/ds-react@0.5.4	2021-06-17 11:34:40 +00:00
Ken	8fa7bdf245	oppdatert ikoner + la tilbake ds-css (#1120 )	2021-06-17 13:20:52 +02:00
Ken	993b443614	Fjernet ubrukt beta-side for design.nav.no (#1119 )	2021-06-15 15:39:42 +02:00
Ken	fb5d5e2662	Create publish_storybook.yml	2021-06-11 19:34:21 +02:00
Ken	7b467323c2	Fjernet dekoratør fra stories (#1118 )	2021-06-09 19:32:38 +02:00
Ken	a9f626593f	La til identitet.nav.no under resources (#1117 )	2021-06-09 19:32:27 +02:00
github-actions[bot]	3e41d0e6c5	Lerna versionbump [ci skip] - @navikt/ds-react@0.5.3	2021-06-04 16:12:35 +00:00
Ken	d304309962	Update index.ts	2021-06-04 17:57:19 +02:00
github-actions[bot]	360294cab3	Lerna versionbump [ci skip] - @navikt/ds-css@0.5.3 - @navikt/ds-tokens@0.3.2	2021-06-04 09:55:02 +00:00
Andreas NordahlandKen	cac9c5d1ed	spacing as tokens (#1114 ) * spacing as token * missed a few * fikset typo spacing * fikset button sizing Co-authored-by: Ken <ken.aleksander@gmail.com>	2021-06-04 11:40:23 +02:00
				`@@ -0,0 +1 @@`
				`exports.loadNodeContent = (node) => Promise.resolve(node.content);`