Lerna versionbump [ci skip]

- @navikt/ds-react@0.6.4

.github/workflows/build-publish.yml

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

.github/workflows/publish_storybook.yml

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

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

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

.specifyrc.json

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

.storybook/preview-body.html

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

.storybook/preview-head.html

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

.storybook/webpack.config.js

@@ -16,7 +16,7 @@ module.exports = (baseConfig) => {
     }
   );
   baseConfig.config.resolve.alias = {
-    ...baseConfig.config.resolve?.alias,
+    ...baseConfig.config.resolve.alias,
     "./normalize.css": path.resolve(
       __dirname,
       "../node_modules/normalize.css/normalize.css"

@navikt/ds-css/accordion-anchor-menu.css

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

@navikt/ds-css/accordion-menu.css

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

@navikt/ds-css/accordion.css

@@ -5,14 +5,12 @@
 .navds-accordion {
   position: relative;
   background: var(--navds-color-background);
-  border: var(--navds-border-default);
-  border-radius: 4px;
+  border-bottom: 2px solid #c9c9c9;
 }
 
 .navds-accordion:hover {
-  box-shadow: var(--navds-color-hover);
-  border: var(--navds-panel-hover);
-  color: black;
+  /* color: black; */
+  border-bottom: 2px solid var(--navds-color-blue-50);
 }
 
 .navds-accordion:focus,
@@ -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,23 +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;
-}
-
-.navds-accordion__button .navds-accordion__heading {
-  font-size: var(--navds-font-size-large);
-  font-weight: var(--navds-font-weight-bold);
-  line-height: var(--navds-font-line-height-large);
+  color: var(--navds-color-text-link);
 }
 
 .navds-accordion__button:hover .navds-accordion__heading {
@@ -63,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 {
@@ -75,3 +67,16 @@
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
+
+.navds-accordion__chevron--filled {
+  display: none;
+}
+
+.navds-accordion__button:hover
+  > .navds-accordion__chevron.navds-accordion__chevron--filled {
+  display: inherit;
+}
+
+.navds-accordion__button:hover > .navds-accordion__chevron {
+  display: none;
+}

@navikt/ds-css/alert.css

@@ -2,22 +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;
-  font-size: var(--navds-font-size-small);
-  line-height: var(--navds-font-line-height-small);
 }
 
-.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,

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

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

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

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

@navikt/ds-css/button.css

@@ -3,24 +3,21 @@
   cursor: pointer;
   background-color: var(--navds-color-background);
   color: var(--navds-color-action-default);
-  font: inherit;
   margin: 0;
   text-align: center;
   text-decoration: none;
-  font-size: var(--navds-font-size-small);
-  line-height: var(--navds-font-line-height-small);
   border-color: var(--navds-color-action-default);
   border-radius: 2px;
   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 {
@@ -36,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 {
@@ -89,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 {
@@ -135,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;
 }
 
 /**************************
@@ -267,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;
@@ -277,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);
 }

@navikt/ds-css/card.css

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

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

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

@navikt/ds-css/header.css

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

@navikt/ds-css/index.css

@@ -1,16 +1,21 @@
 @import "baseline/baseline.css";
+@import "typography.css";
+@import "grid.css";
+@import "layouts.css";
+
 @import "accordion.css";
 @import "accordion-anchor-menu.css";
 @import "accordion-menu.css";
 @import "alert.css";
 @import "button.css";
+@import "card.css";
 @import "content-container.css";
 @import "copy-to-clipboard.css";
-@import "grid.css";
+@import "header.css";
 @import "internal-header.css";
-@import "layouts.css";
 @import "link.css";
 @import "modal.css";
 @import "popover.css";
 @import "tag.css";
-@import "typography.css";
+@import "panel.css";
+@import "link-panel.css";

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

@@ -2,7 +2,7 @@
  * .navds-header *
  **************************/
 
-.navds-header {
+.navds-interal-header {
   display: flex;
   align-items: center;
   background: var(--navds-color-darkgray);
@@ -11,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;
@@ -29,28 +29,25 @@
   text-decoration: none;
   margin: 0;
   color: var(--navds-color-text-inverse);
-  font-size: var(--navds-font-size-medium);
-  font-weight: var(--navds-font-weight-bold);
-  line-height: var(--navds-font-line-height-medium);
 }
 
-.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;
@@ -58,15 +55,6 @@
   align-items: center;
 }
 
-.navds-header__name {
-  margin-right: 1rem;
-  font-size: var(--navds-font-size-small);
-  font-weight: var(--navds-font-weight-bold);
-  line-height: var(--navds-font-line-height-small);
-}
-
-.navds-header__ident {
-  font-size: var(--navds-font-size-xs);
-  font-weight: var(--navds-font-weight-bold);
-  line-height: var(--navds-font-line-height-xs);
+.navds-interal-header__name.navds-body-short {
+  margin-right: var(--navds-spacing-4);
 }

@navikt/ds-css/layouts.css

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

@navikt/ds-css/link-panel.css

@@ -0,0 +1,32 @@
+.navds-link-panel {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  text-decoration: none;
+  color: var(--navds-color-gray-90);
+}
+
+.navds-link-panel:hover .navds-link-panel-title {
+  text-decoration: underline;
+  color: var(--navds-color-text-link);
+}
+
+.navds-link-panel:hover {
+  box-shadow: var(--navds-shadow-hover);
+  border-color: var(--navds-color-blue-50);
+}
+
+.navds-link-panel:focus {
+  box-shadow: var(--navds-shadow-focus);
+  outline: none;
+}
+
+.navds-link-panel__chevron {
+  font-size: 1.5rem;
+  transition: transform 200ms;
+}
+
+.navds-link-panel:hover > .navds-link-panel__chevron,
+.navds-link-panel:focus-within > .navds-link-panel__chevron {
+  transform: translateX(4px);
+}

@navikt/ds-css/modal.css

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

@navikt/ds-css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.3.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.1.3",
+    "@navikt/ds-tokens": "^0.4.3",
     "normalize.css": "^8.0.1",
     "postcss": "^8.2.7",
     "postcss-cli": "^8.3.1",

@navikt/ds-css/panel.css

@@ -0,0 +1,11 @@
+.navds-panel {
+  background-color: var(--navds-color-white);
+  display: block;
+  padding: var(--navds-spacing-4);
+  border-radius: var(--navds-border-radius);
+  border: 1px solid transparent;
+}
+
+.navds-panel--border {
+  border-color: var(--navds-color-border);
+}

@navikt/ds-css/tag.css

@@ -3,12 +3,10 @@
   border: var(--navds-border-default);
   background-color: var(--navds-color-tag-info-background);
   border-color: var(--navds-color-tag-info-border);
-  font-size: var(--navds-font-size-xs);
-  line-height: var(--navds-font-line-height-xs);
   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 {

@navikt/ds-css/typography.css

@@ -1,63 +1,148 @@
-/*
- * Heading
- */
-.navds-heading {
+/* Title */
+.navds-title {
   font-weight: var(--navds-font-weight-bold);
-  line-height: calc(1em + 0.25rem);
+  margin: 0;
 }
 
-.navds-heading--xxl {
-  font-size: var(--navds-font-size-heading-xxl);
+.navds-title--2xl {
+  font-size: var(--navds-font-size-title-2xl);
+  letter-spacing: -0.01em;
+  line-height: var(--navds-font-line-height-s);
 }
 
-.navds-heading--xl {
-  font-size: var(--navds-font-size-heading-xl);
+.navds-title--2xl.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-5);
 }
 
-.navds-heading--large {
-  font-size: var(--navds-font-size-heading-large);
+.navds-title--xl {
+  font-size: var(--navds-font-size-title-xl);
+  letter-spacing: -0.008em;
+  line-height: var(--navds-font-line-height-s);
 }
 
-.navds-heading--medium {
-  font-size: var(--navds-font-size-heading-medium);
+.navds-title--xl.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-4);
 }
 
-.navds-heading--small {
-  font-size: var(--navds-font-size-heading-small);
+.navds-title--l {
+  font-size: var(--navds-font-size-title-l);
+  letter-spacing: -0.004em;
+  line-height: var(--navds-font-line-height-s);
 }
 
-/*
- * Text
- */
-.navds-text--large {
-  font-size: var(--navds-font-size-large);
-  line-height: var(--navds-font-line-height-large);
+.navds-title--l.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-3);
 }
 
-.navds-text--medium {
-  font-size: var(--navds-font-size-medium);
-  line-height: var(--navds-font-line-height-medium);
+.navds-title--m {
+  font-size: var(--navds-font-size-title-m);
+  letter-spacing: -0.002em;
+  line-height: var(--navds-font-line-height-s);
 }
 
-.navds-text--small {
-  font-size: var(--navds-font-size-small);
-  line-height: var(--navds-font-line-height-small);
+.navds-title--m.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-3);
 }
 
-.navds-text--xs {
-  font-size: var(--navds-font-size-xs);
-  line-height: var(--navds-font-line-height-xs);
+.navds-title--s {
+  font-size: var(--navds-font-size-title-s);
+  letter-spacing: -0.001em;
+  line-height: var(--navds-font-line-height-s);
 }
 
-/*
- * Article typography
- */
-.navds-article__lead {
-  font-size: var(--navds-font-size-article-lead);
-  line-height: var(--navds-font-line-height-large);
+.navds-title--s.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-3);
 }
 
-.navds-article__paragraph {
-  font-size: var(--navds-font-size-article-paragraph);
-  line-height: var(--navds-font-line-height-medium);
+/* Ingress */
+.navds-ingress {
+  font-size: var(--navds-font-size-xl);
+  letter-spacing: -0.001em;
+  line-height: var(--navds-font-line-height-m);
+  margin: 0;
+}
+
+.navds-ingress.navds-typo--spacing {
+  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-m);
+  margin: 0;
+}
+
+.navds-body-short {
+  font-size: var(--navds-font-size-l);
+  letter-spacing: 0;
+  line-height: var(--navds-font-line-height-s);
+  margin: 0;
+}
+
+.navds-body-long.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-7);
+}
+
+.navds-body-short.navds-typo--spacing {
+  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-s);
+}
+
+.navds-body-long.navds-body--s.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-6);
+}
+
+.navds-body-short.navds-body--s.navds-typo--spacing {
+  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-s);
+  font-weight: var(--navds-font-weight-bold);
+  margin: 0;
+}
+
+.navds-label.navds-typo--spacing {
+  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-s);
+}
+
+.navds-label--s.navds-typo--spacing {
+  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-s);
+  font-weight: var(--navds-font-weight-bold);
+  margin: 0;
+}
+
+.navds-detail.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-2);
+}
+
+.navds-detail--s {
+  font-weight: var(--navds-font-weight-regular);
+}
+
+.navds-detail--s.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-2);
 }

@navikt/ds-icons/figma-api/metadata.json

@@ -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
   },
@@ -2495,6 +2527,22 @@
     "pageName": "Handicap",
     "visible": true
   },
+  {
+    "name": "SignLanguageTwoHands",
+    "description": "",
+    "created_at": "2021-05-20T14:35:02.839Z",
+    "updated_at": "2021-05-20T14:35:02.839Z",
+    "pageName": "Handicap",
+    "visible": true
+  },
+  {
+    "name": "SignLanguageTwoHandsFilled",
+    "description": "",
+    "created_at": "2021-05-20T14:35:02.835Z",
+    "updated_at": "2021-05-21T11:39:15.041Z",
+    "pageName": "Handicap",
+    "visible": true
+  },
   {
     "name": "SingleParent",
     "description": "",

@navikt/ds-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-icons",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "private": false,
   "description": "NAVs egne ikoner i SVG og React format",
   "repository": {

@navikt/ds-icons/svg/AddPeople.svg

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

@navikt/ds-icons/svg/AddPeopleFilled.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>

@navikt/ds-icons/svg/BagFilled.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>

@navikt/ds-icons/svg/Caseworker.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>

@navikt/ds-icons/svg/CaseworkerFilled.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>

@navikt/ds-icons/svg/DirectionSign.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>

@navikt/ds-icons/svg/DirectionSignFilled.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>

@navikt/ds-icons/svg/SignLanguageTwoHands.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="M17.2759 0.794191C16.307 -0.244097 14.667 -0.26221 13.6754 0.754417L9.74143 4.78747C9.649 3.25296 8.37333 2 6.77509 2C5.8588 2 5.06149 2.62698 4.84543 3.51743L4.0564 6.76929C4.01893 6.9237 4 7.08201 4 7.24089V12H6V7.24089L6.78636 4.00006C7.36372 4.00658 7.80905 4.51343 7.73931 5.08828L7.50726 7.00087C7.46893 7.31686 7.58332 7.63224 7.81533 7.85018L7.85281 7.88538C8.73673 8.71568 9.02192 10.0026 8.57152 11.1286L10.4285 11.8714C11.0294 10.3691 10.8502 8.69616 10.0063 7.37311C10.0317 7.35181 10.0562 7.32906 10.0798 7.30485L15.1071 2.15093C15.3017 1.9514 15.6236 1.95495 15.8137 2.15873C15.9899 2.34745 15.9887 2.64064 15.8111 2.82797L12.8809 5.91858C12.5009 6.31936 12.5178 6.9523 12.9186 7.33229C13.3194 7.71227 13.9523 7.69541 14.3323 7.29462L14.9911 6.59976L15.009 6.61825L19.1448 2.6177C19.352 2.41722 19.6799 2.41381 19.8912 2.60994C20.1205 2.82265 20.123 3.18461 19.8967 3.40048L15.3097 7.77646C14.9226 8.14579 14.8947 8.75443 15.2465 9.15755L16.3105 10.3767C17.0272 11.1979 16.9544 12.4418 16.1467 13.1737L15.3284 13.9153L16.6715 15.3973L17.4897 14.6557C19.1051 13.1918 19.2508 10.7041 17.8174 9.06162L17.3824 8.56324L21.2773 4.84759C22.3374 3.83619 22.3257 2.1404 21.2516 1.14381C20.2612 0.224952 18.7253 0.24092 17.7543 1.18017L17.6377 1.29292C17.5403 1.11595 17.4197 0.948242 17.2759 0.794191ZM2 17.6C2 16.195 3.18687 15 4.72128 15C5.75299 15 6.65937 15.5443 7.11914 16.3132L7.41022 16.8H12.1638C12.6707 16.8 13.0245 17.1891 13.0245 17.6C13.0245 18.0109 12.6707 18.4 12.1638 18.4H8.44257V20.4H12.1638C13.254 20.4 14.2271 19.794 14.7076 18.8848L21.2144 17.6647C21.4524 17.6201 21.6958 17.7091 21.8489 17.8968C22.1318 18.2435 21.996 18.7652 21.58 18.93L13.9948 21.9361C13.8883 21.9783 13.7747 22 13.6601 22H2V17.6ZM20.8458 15.699L14.9105 16.8119C14.5597 15.6334 13.4423 14.8 12.1638 14.8H8.49893C7.62226 13.6954 6.23291 13 4.72128 13C2.14528 13 0 15.0285 0 17.6V24H13.6601C14.027 24 14.3906 23.9306 14.7317 23.7954L22.3169 20.7893C23.9904 20.1261 24.5366 18.0274 23.3987 16.6325C22.7827 15.8775 21.8035 15.5194 20.8458 15.699Z" fill="#262626"/>
+</svg>

@navikt/ds-icons/svg/SignLanguageTwoHandsFilled.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.6641 5.80415L17.8422 2.51184C18.3901 1.94435 18.3975 1.04755 17.8592 0.47103C17.2817 -0.147543 16.3041 -0.158336 15.713 0.447334L10.6778 5.60681L10.6838 5.61275L10.5592 5.73844L10.3805 7.06235C11.7946 8.32246 12.5209 10.1515 12.3976 11.9956H11.3944C11.4081 11.8237 11.4131 11.6519 11.4093 11.4808C11.3789 10.0731 10.7615 8.71373 9.66169 7.76072C9.47276 7.597 9.36744 7.35937 9.3703 7.11283C9.37077 7.07911 9.37325 7.04523 9.37782 7.01135L9.70581 4.58006C9.86396 3.40852 8.95297 2.36629 7.7708 2.36629C7.3203 2.36629 6.9283 2.67454 6.82205 3.11233L6.03079 6.37284C6.01205 6.45005 6.00258 6.52922 6.00258 6.60867V14.166C7.00096 14.4358 7.88069 15.0135 8.50257 15.7969H10.38L10.3809 15.7938H11.4246L11.4237 15.7969H12.1694C13.3803 15.7969 14.4469 16.5442 14.8549 17.6241L14.9727 17.6054L18.0422 14.6519C19.7068 13.0502 19.6718 10.376 17.9657 8.81844L17.2628 8.17671L22.3435 2.88855C22.8886 2.32118 22.895 1.42691 22.3581 0.851822C21.7795 0.23219 20.7997 0.223126 20.2098 0.831949L15.0503 6.15674L14.6641 5.80415Z" fill="#262626"/>
+<path d="M12.1696 16.7973H7.98101C7.33725 15.7209 6.10132 14.9967 4.72321 14.9967C2.66694 14.9967 1 16.609 1 18.5979V23.9999H13.6667C13.9076 23.9999 14.1462 23.9543 14.3701 23.8656L21.9393 20.8664C22.9944 20.4483 23.3388 19.1251 22.6213 18.2457C22.2434 17.7825 21.6476 17.5554 21.0573 17.6494L15.101 18.5979C15.101 20.1656 13.8302 21.4365 12.2625 21.4365H8.44641V20.3986H12.1696C13.1978 20.3986 14.0312 19.5924 14.0312 18.5979C14.0312 17.6035 13.1978 16.7973 12.1696 16.7973Z" fill="#262626"/>
+</svg>

@navikt/ds-icons/svg/bag.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>

@navikt/ds-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.3.5",
+  "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.1",
+    "@navikt/ds-icons": "^0.3.3",
     "@popperjs/core": "^2.5.4",
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.3.1",

@navikt/ds-react/src/accordion-anchor-menu/AccordionAnchorMenu.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import { AccordionMenu as BaseAccordionMenu } from "../accordion-menu";
-import { Heading } from "../index";
+import { Title } from "../index";
 import { ActiveAnchorProvider } from "./ActiveAnchorStore";
 import cl from "classnames";
 
@@ -21,13 +21,9 @@ const AccordionAnchorMenu = forwardRef<
     {...rest}
   >
     {title && (
-      <Heading
-        level={2}
-        size="medium"
-        className="navds-accordion-anchor-menu__title"
-      >
+      <Title level={2} size="m" className="navds-accordion-anchor-menu__title">
         {title}
-      </Heading>
+      </Title>
     )}
     <ActiveAnchorProvider>
       <BaseAccordionMenu aria-label={title || "Meny"}>

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

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

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

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

@navikt/ds-react/src/accordion/Accordion.tsx

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

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

@@ -24,33 +24,35 @@ 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(
         className,
         "navds-alert",
         `navds-alert--${variant}`,
-        `navds-alert--${size}`
+        `navds-alert--${size}`,
+        "navds-body-long",
+        { "navds-body--s": size === "s" }
       )}
       {...rest}
     >

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,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>
+```

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

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

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

@@ -1,25 +1,11 @@
 import * as React from "react";
 import { ContentContainer } from "../index";
-import { Text } 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: {
@@ -41,7 +27,7 @@ export default {
 export const All = () => {
   return (
     <ContentContainer className={"navds-story-content-container"}>
-      <Text size="medium">-- Innhold --</Text>
+      <BodyLong size="m">-- Innhold --</BodyLong>
     </ContentContainer>
   );
 };

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

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

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

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

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

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

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

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

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

@@ -25,6 +25,7 @@ export {
   InternalHeaderUser,
   InternalHeaderUserProps,
 } from "./internal-header/index";
+export { Header, HeaderProps } from "./header/index";
 export {
   ProductPageLayout,
   ProductPagePanel,
@@ -34,12 +35,15 @@ 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, LinkPanelTitle } from "./link-panel/index";
+export { Panel, PanelProps } from "./panel/index";
+export { MicroCard, MicroCardProps } from "./card/index";
 export {
-  Heading,
-  HeadingProps,
-  Lead,
-  Paragraph,
-  Text,
-  TextProps,
+  Title,
+  Ingress,
+  BodyLong,
+  BodyShort,
+  Label,
+  Detail,
 } from "./typography/index";
 export { OverridableComponent } from "./util/index";

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

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

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

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

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

@@ -19,9 +19,15 @@ 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">{name}</span>
-      <span className="navds-header__ident">{ident}</span>
+    <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>
     </div>
   )
 );

@navikt/ds-react/src/layouts/product-page/ProductPageLayout.tsx

@@ -1,6 +1,6 @@
 import cl from "classnames";
 import React, { Children, forwardRef, HTMLAttributes, useEffect } from "react";
-import { ContentContainer, Heading } from "../../index";
+import { ContentContainer, Title } from "../../index";
 
 const cls = (className, columns) =>
   cl(
@@ -35,13 +35,13 @@ const ProductPageLayout = forwardRef<HTMLDivElement, ProductPageLayoutProps>(
           <ContentContainer>
             <div className={cls(className, columns)} {...rest}>
               <div className={cl("navds-layout__header-content")}>
-                <Heading
-                  size={"xxl"}
+                <Title
+                  size="2xl"
                   className={cl("navds-layout__header-title")}
                   level={1}
                 >
                   {title}
-                </Heading>
+                </Title>
               </div>
             </div>
           </ContentContainer>

@navikt/ds-react/src/layouts/product-page/ProductPagePanel.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from "react";
 import { forwardRef, ReactNode } from "react";
 import cl from "classnames";
-import { Heading, CopyToClipboard } from "../../";
+import { Title, CopyToClipboard } from "../../";
 import { Attachment } from "@navikt/ds-icons";
 
 export interface ProductPagePanelProps
@@ -50,9 +50,9 @@ const ProductPagePanel = forwardRef<HTMLDivElement, ProductPagePanelProps>(
           />
         </div>
         {icon && <div className={"navds-layout__panel-icon"}>{icon}</div>}
-        <Heading size={"xl"} className={"navds-layout__panel-title"} level={2}>
+        <Title size={"xl"} className={"navds-layout__panel-title"} level={2}>
           {title}
-        </Heading>
+        </Title>
 
         <CopyToClipboard
           className="navds-layout__panel-copy"

@navikt/ds-react/src/layouts/stories/components/sections/Main.tsx

@@ -1,12 +1,5 @@
 import * as React from "react";
-import {
-  Button,
-  Cell,
-  Grid,
-  Heading,
-  Link,
-  Paragraph,
-} from "../../../../index";
+import { Button, Cell, Grid, Title, Link, BodyLong } from "../../../../index";
 
 export const Main = ({ title = true }) => (
   <>
@@ -19,30 +12,30 @@ export const Main = ({ title = true }) => (
 export const MainOne = ({ title = true }) => (
   <div>
     {title && (
-      <Heading level={1} size={"xl"} id={"leo-quis"}>
+      <Title level={1} size={"xl"} id={"leo-quis"}>
         Leo quis
-      </Heading>
+      </Title>
     )}
-    <Paragraph>
+    <BodyLong>
       Sed ullamcorper quam eget lorem volutpat, quis cursus risus fermentum.
       Quisque varius ornare nulla, ut condimentum sapien dapibus non. Nullam
       eget interdum nibh
-    </Paragraph>
+    </BodyLong>
   </div>
 );
 
 export const MainTwo = ({ title = true }) => (
   <div>
     {title && (
-      <Heading level={1} size={"xl"} id={"proin-accumsan"}>
+      <Title level={1} size={"xl"} id={"proin-accumsan"}>
         Proin accumsan
-      </Heading>
+      </Title>
     )}
-    <Paragraph className={"section"}>
+    <BodyLong className={"section"}>
       Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
       doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
       inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
-    </Paragraph>
+    </BodyLong>
     <Grid className={"section"}>
       <Cell xs={6}>
         <Link href={"#"}>Ea voluptate</Link>
@@ -51,17 +44,17 @@ export const MainTwo = ({ title = true }) => (
         <Link href={"#"}>Quis autem</Link>
       </Cell>
     </Grid>
-    <Paragraph className={"section"}>
+    <BodyLong className={"section"}>
       Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
       consectetur, adipisci velit, sed quia non numquam eius modi tempora.
-    </Paragraph>
-    <Heading level={2} size={"large"} id={"nulla-pariatur"}>
+    </BodyLong>
+    <Title level={2} size={"l"} id={"nulla-pariatur"}>
       Nulla pariatur?
-    </Heading>
-    <Paragraph className={"section"}>
+    </Title>
+    <BodyLong className={"section"}>
       Etiam viverra neque sit amet libero dapibus tincidunt. Pellentesque quis
       imperdiet erat. Morbi sodales bibendum volutpat.
-    </Paragraph>
+    </BodyLong>
     <table className={"section tabell tabell--stripet"}>
       <thead>
         <tr>
@@ -92,18 +85,18 @@ export const MainTwo = ({ title = true }) => (
         </tr>
       </tbody>
     </table>
-    <Paragraph className={"section"}>
+    <BodyLong className={"section"}>
       Curabitur a purus pretium, condimentum magna ac, pellentesque diam. Nulla
       facilisi. Nullam consequat, dui sed bibendum faucibus, metus mauris
       commodo tortor.
-    </Paragraph>
-    <Heading level={2} size={"large"} id={"luctus-justo"}>
+    </BodyLong>
+    <Title level={2} size={"l"} id={"luctus-justo"}>
       Luctus justo
-    </Heading>
-    <Paragraph className={"section"}>
+    </Title>
+    <BodyLong className={"section"}>
       Nunc eget consectetur felis, id scelerisque sapien. Ut id feugiat nulla,
       ut cursus sem. In viverra felis vitae aliquet finibus.
-    </Paragraph>
+    </BodyLong>
     <Button>Søk ...</Button>
   </div>
 );
@@ -111,30 +104,30 @@ export const MainTwo = ({ title = true }) => (
 export const MainThree = ({ title = true }) => (
   <div>
     {title && (
-      <Heading level={1} size={"xl"} id={"maecenas-in-pretium"}>
+      <Title level={1} size={"xl"} id={"maecenas-in-pretium"}>
         Maecenas in pretium
-      </Heading>
+      </Title>
     )}
-    <Paragraph>
+    <BodyLong>
       Sed ullamcorper quam eget lorem volutpat, quis cursus risus fermentum.
       Quisque varius ornare nulla, ut condimentum sapien dapibus non. Nullam
       eget interdum nibh
-    </Paragraph>
-    <Paragraph>
+    </BodyLong>
+    <BodyLong>
       Cras tempor eros sed dapibus egestas. Curabitur bibendum quam quis lectus
       pretium lacinia. Nunc consequat ac augue quis laoreet. Donec porta, erat
       vitae blandit egestas, arcu metus pharetra nulla, et laoreet risus purus
       convallis turpis.
-    </Paragraph>
-    <Paragraph>
+    </BodyLong>
+    <BodyLong>
       Suspendisse potenti. Praesent at elit interdum, porttitor sem eget,
       blandit dolor. Nunc eget consectetur felis, id scelerisque sapien. Ut id
       feugiat nulla, ut cursus sem. In viverra felis vitae aliquet finibus.
-    </Paragraph>
-    <Paragraph>
+    </BodyLong>
+    <BodyLong>
       Vivamus id mi lectus. Duis ac augue magna. Aliquam ut euismod dui. Duis
       consectetur, magna a malesuada tempus, elit urna fermentum arcu, at
       porttitor magna sapien id enim.
-    </Paragraph>
+    </BodyLong>
   </div>
 );

@navikt/ds-react/src/layouts/stories/product-page-layout.stories.tsx

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

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

@@ -0,0 +1,65 @@
+import React, { forwardRef } from "react";
+import { OverridableComponent } from "../util";
+import { Panel } from "../index";
+import { Next } from "@navikt/ds-icons";
+import cl from "classnames";
+
+export type LinkPanelType = OverridableComponent<LinkPanelProps>;
+
+export interface LinkPanelProps {
+  props: {
+    children?: React.ReactNode;
+    className?: string;
+    noHeading?: boolean;
+    border?: boolean;
+  } & React.HTMLAttributes<HTMLAnchorElement>;
+  defaultComponent: "a";
+}
+
+const LinkPanel: LinkPanelType = forwardRef(
+  ({ children, component = "a", border = true, className, ...rest }, ref) => {
+    return (
+      <Panel
+        component={component}
+        border={border}
+        ref={ref}
+        className={cl("navds-link-panel", className)}
+        {...rest}
+      >
+        {typeof children === "string" ? (
+          <LinkPanelTitle>{children}</LinkPanelTitle>
+        ) : (
+          <span className="navds-link-panel__content">{children}</span>
+        )}
+        <Next
+          className="navds-link-panel__chevron"
+          aria-label="arrow-icon pointing right"
+        />
+      </Panel>
+    );
+  }
+);
+
+interface LinkPanelTitleProps {
+  props: {
+    children: React.ReactNode;
+  } & React.HTMLAttributes<HTMLSpanElement>;
+  defaultComponent: "span";
+}
+
+export const LinkPanelTitle: OverridableComponent<LinkPanelTitleProps> = forwardRef(
+  ({ className, component: Component = "span", ...rest }, ref) => (
+    <Component
+      ref={ref}
+      className={cl(
+        "navds-link-panel-title",
+        "navds-title",
+        "navds-title--m",
+        className
+      )}
+      {...rest}
+    />
+  )
+);
+
+export default LinkPanel;

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

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

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

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

@navikt/ds-react/src/modal/Modal.tsx

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

@navikt/ds-react/src/panel/Panel.tsx

@@ -0,0 +1,51 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+import { OverridableComponent } from "../util";
+
+export type PanelType = OverridableComponent<PanelProps>;
+
+export interface PanelProps {
+  props: {
+    /**
+     * Component content
+     */
+    children: React.ReactNode;
+    /**
+     * @ignore
+     */
+    className?: string;
+    /**
+     * Adds a border to the panel
+     * @default false
+     */
+    border?: boolean;
+  } & React.HTMLAttributes<HTMLElement>;
+  defaultComponent: "div";
+}
+
+const Panel: PanelType = forwardRef(
+  (
+    {
+      children,
+      className,
+      border = false,
+      component: Component = "div",
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <Component
+        ref={ref}
+        className={cl("navds-panel", className, {
+          "navds-panel--border": border,
+        })}
+        {...rest}
+      >
+        {children}
+      </Component>
+    );
+  }
+);
+
+export default Panel;

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

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

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

@@ -0,0 +1,38 @@
+import React from "react";
+import { Panel } from "../index";
+import { Meta } from "@storybook/react/types-6-0";
+export default {
+  title: "ds-react/panel",
+  component: Panel,
+} as Meta;
+
+export const All = () => {
+  return (
+    <div>
+      <h1>Panel</h1>
+      <Panel>
+        Eu quis exercitation voluptate ex. Aute irure esse occaecat minim
+        cupidatat velit minim duis sint culpa anim laboris. Consectetur nulla eu
+        commodo ea culpa velit commodo incididunt sunt ipsum. Amet anim
+        adipisicing minim ipsum do. Non laborum culpa reprehenderit est sint
+        officia quis excepteur. Fugiat eiusmod eiusmod commodo incididunt nisi
+        minim ex eu cupidatat quis ex. Lorem irure ea ea enim consectetur ea
+        aliqua cupidatat. Officia aute veniam aute exercitation ipsum aliqua
+        adipisicing. Est aliqua ad ullamco aute nostrud amet ea adipisicing
+        consequat id officia irure pariatur. Eu mollit amet culpa culpa velit.
+      </Panel>
+      <h2>With border</h2>
+      <Panel border>
+        Eu quis exercitation voluptate ex. Aute irure esse occaecat minim
+        cupidatat velit minim duis sint culpa anim laboris. Consectetur nulla eu
+        commodo ea culpa velit commodo incididunt sunt ipsum. Amet anim
+        adipisicing minim ipsum do. Non laborum culpa reprehenderit est sint
+        officia quis excepteur. Fugiat eiusmod eiusmod commodo incididunt nisi
+        minim ex eu cupidatat quis ex. Lorem irure ea ea enim consectetur ea
+        aliqua cupidatat. Officia aute veniam aute exercitation ipsum aliqua
+        adipisicing. Est aliqua ad ullamco aute nostrud amet ea adipisicing
+        consequat id officia irure pariatur. Eu mollit amet culpa culpa velit.
+      </Panel>
+    </div>
+  );
+};

@navikt/ds-react/src/tag/Tag.tsx

@@ -21,7 +21,13 @@ const Tag = forwardRef<HTMLSpanElement, TagProps>(
     return (
       <span
         ref={ref}
-        className={cl("navds-tag", className, `navds-tag--${variant}`)}
+        className={cl(
+          "navds-tag",
+          className,
+          "navds-detail",
+          "navds-detail--s",
+          `navds-tag--${variant}`
+        )}
         {...rest}
       >
         {children}

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

@@ -0,0 +1,44 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+import { OverridableComponent } from "../util";
+
+export interface BodyLongProps {
+  props: {
+    /**
+     * M: 18px, S: 16px
+     * @default "m"
+     */
+    size?: "m" | "s";
+    /**
+     * Component content
+     */
+    children: React.ReactNode;
+    /**
+     * Custom styling on element
+     */
+    className?: string;
+    /**
+     * Adds margins to typo
+     */
+    spacing?: boolean;
+  } & React.HTMLAttributes<HTMLParagraphElement>;
+  defaultComponent: "p";
+}
+
+const BodyLong: OverridableComponent<BodyLongProps> = forwardRef(
+  (
+    { className, size = "m", spacing, component: Component = "p", ...rest },
+    ref
+  ) => (
+    <Component
+      {...rest}
+      ref={ref}
+      className={cl(className, "navds-body-long", {
+        "navds-body--s": size === "s",
+        "navds-typo--spacing": !!spacing,
+      })}
+    />
+  )
+);
+
+export default BodyLong;

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

@@ -0,0 +1,44 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+import { OverridableComponent } from "../util/OverridableComponent";
+
+export interface BodyShortProps {
+  props: {
+    /**
+     * M: 18px, S: 16px
+     * @default "m"
+     */
+    size?: "m" | "s";
+    /**
+     * Component content
+     */
+    children: React.ReactNode;
+    /**
+     * Custom styling on element
+     */
+    className?: string;
+    /**
+     * Adds margins to typo
+     */
+    spacing?: boolean;
+  } & React.HTMLAttributes<HTMLParagraphElement>;
+  defaultComponent: "p";
+}
+
+const BodyShort: OverridableComponent<BodyShortProps> = forwardRef(
+  (
+    { className, size = "m", spacing, component: Component = "p", ...rest },
+    ref
+  ) => (
+    <Component
+      {...rest}
+      ref={ref}
+      className={cl(className, "navds-body-short", {
+        "navds-body--s": size === "s",
+        "navds-typo--spacing": !!spacing,
+      })}
+    />
+  )
+);
+
+export default BodyShort;

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

@@ -0,0 +1,44 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+import { OverridableComponent } from "../util";
+
+export interface DetailProps {
+  props: {
+    /**
+     * M: 18px, S: 16px
+     * @default "m"
+     */
+    size?: "m" | "s";
+    /**
+     * Component content
+     */
+    children: React.ReactNode;
+    /**
+     * Custom styling on element
+     */
+    className?: string;
+    /**
+     * Adds margins to typo
+     */
+    spacing?: boolean;
+  } & React.HTMLAttributes<HTMLParagraphElement>;
+  defaultComponent: "p";
+}
+
+const Detail: OverridableComponent<DetailProps> = forwardRef(
+  (
+    { className, size = "m", spacing, component: Component = "p", ...rest },
+    ref
+  ) => (
+    <Component
+      {...rest}
+      ref={ref}
+      className={cl(className, "navds-detail", {
+        "navds-detail--s": size === "s",
+        "navds-typo--spacing": !!spacing,
+      })}
+    />
+  )
+);
+
+export default Detail;

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

@@ -1,26 +0,0 @@
-import React, { forwardRef } from "react";
-import cl from "classnames";
-
-export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
-  level: 1 | 2 | 3 | 4 | 5 | 6;
-  size: "xxl" | "xl" | "large" | "medium" | "small";
-  children: React.ReactNode;
-}
-
-const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(
-  ({ level, size, className, children, ...rest }, ref) => {
-    let HeadingTag = `h${level}` as React.ElementType;
-
-    return (
-      <HeadingTag
-        {...rest}
-        ref={ref}
-        className={cl(className, "navds-heading", `navds-heading--${size}`)}
-      >
-        {children}
-      </HeadingTag>
-    );
-  }
-);
-
-export default Heading;

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

@@ -0,0 +1,35 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+import { OverridableComponent } from "../util";
+
+export interface IngressProps {
+  props: {
+    /**
+     * Component content
+     */
+    children: React.ReactNode;
+    /**
+     * Custom styling on element
+     */
+    className?: string;
+    /**
+     * Adds margins to typo
+     */
+    spacing?: boolean;
+  } & React.HTMLAttributes<HTMLParagraphElement>;
+  defaultComponent: "p";
+}
+
+const Ingress: OverridableComponent<IngressProps> = forwardRef(
+  ({ className, spacing, component: Component = "p", ...rest }, ref) => (
+    <Component
+      {...rest}
+      ref={ref}
+      className={cl(className, "navds-ingress", {
+        "navds-typo--spacing": !!spacing,
+      })}
+    />
+  )
+);
+
+export default Ingress;

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

@@ -0,0 +1,44 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+import { OverridableComponent } from "../util";
+
+export interface LabelProps {
+  props: {
+    /**
+     * M: 18px, S: 16px
+     * @default "m"
+     */
+    size?: "m" | "s";
+    /**
+     * Component content
+     */
+    children: React.ReactNode;
+    /**
+     * Custom styling on element
+     */
+    className?: string;
+    /**
+     * Adds margins to typo
+     */
+    spacing?: boolean;
+  } & React.HTMLAttributes<HTMLParagraphElement>;
+  defaultComponent: "p";
+}
+
+const Label: OverridableComponent<LabelProps> = forwardRef(
+  (
+    { className, size = "m", spacing, component: Component = "p", ...rest },
+    ref
+  ) => (
+    <Component
+      {...rest}
+      ref={ref}
+      className={cl(className, "navds-label", {
+        "navds-label--s": size === "s",
+        "navds-typo--spacing": !!spacing,
+      })}
+    />
+  )
+);
+
+export default Label;

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

@@ -1,11 +0,0 @@
-import React, { forwardRef } from "react";
-import cl from "classnames";
-
-const Lead = forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...rest }, ref) => (
-  <p {...rest} ref={ref} className={cl(className, "navds-article__lead")} />
-));
-
-export default Lead;

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

@@ -1,15 +0,0 @@
-import React, { forwardRef } from "react";
-import cl from "classnames";
-
-const Paragraph = forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...rest }, ref) => (
-  <p
-    {...rest}
-    ref={ref}
-    className={cl(className, "navds-article__paragraph")}
-  />
-));
-
-export default Paragraph;

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

@@ -1,21 +0,0 @@
-import React, { forwardRef } from "react";
-import cl from "classnames";
-
-export interface TextProps extends React.HTMLAttributes<HTMLSpanElement> {
-  size: "large" | "medium" | "small" | "xs";
-  children: React.ReactNode;
-}
-
-const Text = forwardRef<HTMLSpanElement, TextProps>(
-  ({ size, className, children, ...rest }, ref) => (
-    <span
-      {...rest}
-      ref={ref}
-      className={cl(className, "navds-text", `navds-text--${size}`)}
-    >
-      {children}
-    </span>
-  )
-);
-
-export default Text;

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

@@ -0,0 +1,49 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+import { OverridableComponent } from "../util";
+
+export interface TitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  props: {
+    /**
+     * Heading level
+     */
+    level: 1 | 2 | 3 | 4 | 5 | "1" | "2" | "3" | "4" | "5";
+    /**
+     * Sizes from largest "2xl" to smallest "s"
+     */
+    size: "2xl" | "xl" | "l" | "m" | "s";
+    /**
+     * Heading to render
+     */
+    children: React.ReactNode;
+    /**
+     * Custom styling on element
+     */
+    className?: string;
+    /**
+     * Adds margins to typo
+     */
+    spacing?: boolean;
+  } & React.HTMLAttributes<HTMLParagraphElement>;
+  defaultComponent: "h1";
+}
+
+const Title: OverridableComponent<TitleProps> = forwardRef(
+  ({ level, size, spacing, className, children, component, ...rest }, ref) => {
+    let HeadingTag = component ?? (`h${level}` as React.ElementType);
+
+    return (
+      <HeadingTag
+        {...rest}
+        ref={ref}
+        className={cl(className, "navds-title", `navds-title--${size}`, {
+          "navds-typo--spacing": !!spacing,
+        })}
+      >
+        {children}
+      </HeadingTag>
+    );
+  }
+);
+
+export default Title;

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

@@ -1,8 +1,6 @@
-export { default as Heading } from "./Heading";
-export * from "./Heading";
-export { default as Text } from "./Text";
-export * from "./Text";
-export { default as Paragraph } from "./Paragraph";
-export * from "./Paragraph";
-export { default as Lead } from "./Lead";
-export * from "./Lead";
+export { default as Title } from "./Title";
+export { default as Ingress } from "./Ingress";
+export { default as BodyLong } from "./BodyLong";
+export { default as BodyShort } from "./BodyShort";
+export { default as Detail } from "./Detail";
+export { default as Label } from "./Label";

@navikt/ds-react/src/typography/stories/index.css

@@ -0,0 +1,3 @@
+.typo-story > div:nth-child(even) {
+  background: var(--navds-color-gray-20);
+}

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

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

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

@@ -1,116 +1,128 @@
 import React from "react";
-import { Heading, Text, Paragraph, Lead } from "../index";
+import { Title, BodyShort, BodyLong, Detail, Ingress, Label } from "../index";
+import "./index.css";
 
 export default {
   title: "ds-react/typography",
-  component: Heading,
+  component: BodyLong,
 };
 
-export const heading = () => {
-  return (
-    <>
-      <Heading level={1} size="xxl">
-        xxl
-      </Heading>
-      <Heading level={2} size="xl">
-        xl
-      </Heading>
-      <Heading level={3} size="large">
-        large
-      </Heading>
-      <Heading level={4} size="medium">
-        medium
-      </Heading>
-      <Heading level={5} size="small">
-        small
-      </Heading>
-    </>
-  );
-};
+const lorem = () => (
+  <>
+    Veniam consequat cillum pariatur officia duis aute labore anim labore.
+    Pariatur ad duis do nulla.
+  </>
+);
 
-export const text = () => {
+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 (
-    <div style={{ display: "flex", flexDirection: "column" }}>
-      <Text size="large">large</Text>
-      <Text size="medium">medium</Text>
-      <Text size="small">small</Text>
-      <Text size="xs">xs</Text>
+    <div style={{ maxWidth: 600 }}>
+      <Title level={1} size="2xl" spacing>
+        Title lvl 1 2xl
+      </Title>
+      <BodyLong spacing>
+        BodyLong: Aliqua ad et nisi commodo sit excepteur in commodo proident
+        proident. Nostrud consectetur dolore eu nostrud aliqua. Adipisicing
+        labore aliqua qui velit amet ea amet do. Magna anim velit et incididunt.
+        Lorem ad pariatur pariatur quis magna cupidatat. Exercitation officia
+        occaecat occaecat id nulla fugiat laborum elit laboris non est ex
+        nostrud occaecat. Commodo laboris veniam cillum in aute.
+      </BodyLong>
+      <BodyLong spacing>
+        BodyLong: Cillum consequat velit est ea voluptate. Et elit irure magna
+        sit consequat mollit excepteur ad non excepteur velit exercitation aute.
+        Fugiat deserunt quis nulla cupidatat esse quis ex. Laborum eiusmod culpa
+        labore eu irure quis laborum. Irure veniam et nostrud do. Quis ut ea est
+        culpa tempor anim.
+      </BodyLong>
+      <BodyLong spacing>
+        BodyLong: Dolore commodo ad veniam commodo aute voluptate est officia
+        sunt proident irure consectetur excepteur.
+      </BodyLong>
+      <Title level={2} size="xl" spacing>
+        Title lvl 2 xl
+      </Title>
+      <Ingress spacing>
+        Ingress: Mollit incididunt incididunt officia amet est et non aliqua
+        officia nulla et aute aliqua culpa.
+      </Ingress>
+      <BodyLong spacing>
+        BodyLong: Commodo veniam enim laborum pariatur excepteur commodo do
+        cillum. Nisi elit sunt commodo id in adipisicing cupidatat dolore dolore
+        et tempor cupidatat. Cillum quis sunt in dolor occaecat.
+      </BodyLong>
+      <BodyLong spacing>
+        BodyLong: Irure dolore laborum amet occaecat ex laboris mollit
+        reprehenderit nisi laborum voluptate laborum. Ipsum eu sint laborum
+        adipisicing ut incididunt laborum laborum. Ipsum non amet laboris quis
+        Lorem est laborum qui pariatur ex eu. Eiusmod proident amet esse ex.
+      </BodyLong>
+      <BodyLong size="s" spacing>
+        BodyLong small: Irure dolore laborum amet occaecat ex laboris mollit
+        reprehenderit nisi laborum voluptate laborum. Ipsum eu sint laborum
+        adipisicing ut incididunt laborum laborum. Ipsum non amet laboris quis
+        Lorem est laborum qui pariatur ex eu. Eiusmod proident amet esse ex.
+      </BodyLong>
+      <BodyShort spacing>
+        BodyShort: Id consectetur velit sunt laboris consequat ullamco
+        incididunt.
+      </BodyShort>
+      <BodyShort size="s" spacing>
+        BodyShort small: Sunt amet officia sit excepteur sit pariatur sit
+        reprehenderit irure ipsum.
+      </BodyShort>
     </div>
   );
 };
-
-export const article = () => {
-  return (
-    <article>
-      <Heading level={1} size="xxl">
-        Uføretrygd
-      </Heading>
-      <Lead>
-        Uføretrygd kan være aktuelt for deg som har varig nedsatt inntektsevne
-        på grunn av sykdom eller skade.
-      </Lead>
-      <Paragraph>
-        Uføretrygden erstatter den delen av inntektsevnen du har tapt på grunn
-        av varig sykdom eller skade.
-      </Paragraph>
-      <Paragraph>
-        Om du har rett til 100 prosent uføretrygd eller gradert (delvis)
-        uføretrygd, er avhengig av inntektsevnen din. Har du mulighet til å
-        jobbe for eksempel 40 prosent, kan du ha rett til 60 prosent uføretrygd.{" "}
-      </Paragraph>
-      <p>
-        Anim duis aliqua ad culpa amet ad. Anim deserunt veniam laborum commodo
-        in excepteur reprehenderit. Sunt occaecat velit fugiat qui Lorem officia
-        reprehenderit elit cillum occaecat. Lorem laborum adipisicing non qui
-        consectetur do minim nostrud adipisicing qui. Sint et dolore commodo
-        cillum elit magna reprehenderit labore consequat reprehenderit magna
-        consequat qui. Ullamco eu sunt cupidatat laborum. Velit eu ex culpa
-        voluptate proident tempor deserunt. Do pariatur consequat incididunt ad
-        ut velit. Ea nisi eiusmod aliquip laboris nulla in ipsum amet sunt
-        magna. Laboris pariatur nisi in culpa adipisicing sit esse esse. Ullamco
-        dolore mollit minim dolor reprehenderit. Velit ipsum proident nostrud
-        laborum non. Sunt consequat aute quis minim reprehenderit ipsum sunt
-        ipsum.
-      </p>
-      <Heading level={2} size="xl">
-        Hvem kan få uføretrygd?
-      </Heading>
-      <Paragraph>
-        For å ha rett til å få uføretrygd må du som hovedregel oppfylle disse
-        vilkårene:
-      </Paragraph>
-      <ul>
-        <li>Du må være mellom 18 og 67 år.</li>
-        <li>
-          Du må ha vært medlem av folketrygden i de siste tre årene før du ble
-          syk.
-        </li>
-        <li>
-          Sykdom og/eller skade må være hovedårsaken til at inntektsevnen din er
-          nedsatt.
-        </li>
-        <li>
-          Hensiktsmessig behandling og arbeidsrettede tiltak må være
-          gjennomført.
-        </li>
-        <li>
-          Inntektsevnen din må være varig nedsatt med minst 50 prosent på grunn
-          av sykdom og/eller skade.
-        </li>
-      </ul>
-      <Paragraph>
-        Mottar du{" "}
-        <a href="https://www.nav.no/no/person/arbeid/arbeidsavklaringspenger/arbeidsavklaringspenger-aap">
-          arbeidsavklaringspenger
-        </a>{" "}
-        på søknadstidspunktet er det tilstrekkelig at inntektsevnen din er varig
-        nedsatt med minst 40 prosent. Skyldes uførheten en godkjent{" "}
-        <a href="https://www.nav.no/no/person/arbeid/yrkesskade-og-yrkessykdom">
-          yrkesskade eller yrkessykdom
-        </a>
-        , er det tilstrekkelig at inntektsevnen din er varig nedsatt med minst
-        30 prosent.
-      </Paragraph>
-    </article>
-  );
-};

@navikt/ds-tokens/build.js

@@ -0,0 +1,14 @@
+const StyleDictionary = require("style-dictionary");
+const kebabCase = require("./kebabCase");
+
+StyleDictionary.registerTransform({
+  name: "name/cti/kebab",
+  type: "name",
+  transformer: (prop, options) =>
+    kebabCase([options.prefix].concat(prop.path).join(" ")),
+});
+
+const StyleDictionaryExtended = StyleDictionary.extend(
+  __dirname + "/config.json"
+);
+StyleDictionaryExtended.buildAllPlatforms();

@navikt/ds-tokens/config.json

@@ -38,6 +38,10 @@
         {
           "destination": "tokens.js",
           "format": "javascript/es6"
+        },
+        {
+          "destination": "tokens-cjs.js",
+          "format": "javascript/module"
         }
       ]
     }

@navikt/ds-tokens/kebabCase.js

@@ -0,0 +1,4 @@
+const _ = require("lodash");
+
+module.exports = (string) =>
+  _.kebabCase(string).replace(/(^|-)(\d+)-(x[ls])/g, "$1$2$3");

@navikt/ds-tokens/kebabCase.test.js

@@ -0,0 +1,26 @@
+const kebabCase = require("./kebabCase");
+
+describe("kebabCase", () => {
+  [
+    "foo bar",
+    "Foo bar",
+    "foo Bar",
+    "Foo Bar",
+    "FOO BAR",
+    "fooBar",
+    "--foo-bar--",
+    "__foo_bar__",
+  ].forEach((string) =>
+    test(`${string} is converted to foo-bar`, () => {
+      expect(kebabCase(string)).toBe("foo-bar");
+    })
+  );
+
+  test(`spacing 3xl is converted to spacing-3xl`, () => {
+    expect(kebabCase("spacing 3xl")).toBe("spacing-3xl");
+  });
+
+  test(`3xs is converted to 3xs`, () => {
+    expect(kebabCase("3xs")).toBe("3xs");
+  });
+});

@navikt/ds-tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tokens",
-  "version": "0.1.3",
+  "version": "0.4.3",
   "private": false,
   "description": "Auto-generated design-tokens for NAV design-systems framework",
   "author": "NAV Designsystem team",
@@ -17,9 +17,10 @@
     "/src"
   ],
   "scripts": {
-    "build": "style-dictionary build",
+    "build": "node ./build.js",
     "watch": "nodemon --watch src/index.js --exec \"yarn build\"",
-    "token": "style-dictionary build"
+    "token": "style-dictionary build",
+    "test": "jest"
   },
   "repository": {
     "type": "git",
@@ -28,6 +29,8 @@
   },
   "devDependencies": {
     "color": "^3.1.3",
+    "jest": "^26.6.3",
+    "lodash": "^4.17.21",
     "nodemon": "^2.0.6",
     "style-dictionary": "^2.10.2"
   }

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

@@ -1,5 +1,23 @@
 const Color = require("color");
 
+const baseFontSize = 16;
+
+const getFontSize = (size) => `${size / baseFontSize}rem`;
+// https://github.com/hihayk/scale/blob/69b766bba2db046d3e8cb4026ae32a32c897f9ff/src/utils.js#L44
+const mixColors = (color, step, amount, mixColor) => {
+  const saturation = Math.round(Color(color).hsl().color[1]);
+  // Setting directly to hex returns different result...
+  return Color(
+    Color(color)
+      .saturate(((step + 1) / 5) * (saturation / 100))
+      .mix(Color(mixColor), ((amount / 100) * (step + 1)) / 5)
+      .string()
+  ).hex();
+};
+
+const lightColor = (color, step) => mixColors(color, step, 100, "white");
+const darkColor = (color, step) => mixColors(color, step, 85, "black");
+
 const baseColors = {
   blue: "#0067c5",
   deepblue: "#005B82",
@@ -7,17 +25,15 @@ const baseColors = {
   orange: "#FF9100",
   green: "#06893A",
   red: "#BA3A26",
+  purple: "#634689",
+  limegreen: "#a2ad00",
 };
+
 const white = "#ffffff";
-const darkgray = "#3e3832";
+const darkgray = "#262626";
+const lightgray = "#F1F1F1";
 
-const mix = (a, b, percentage) =>
-  Color(a)
-    .mix(Color(b), percentage / 100)
-    .hex();
-
-const darken = (color, percentage) => mix(color, darkgray, percentage);
-const lighten = (color, percentage) => mix(color, white, percentage);
+const gray = (n) => Color(lightgray).mix(Color(darkgray), n).hex();
 
 module.exports = {
   navds: {
@@ -25,26 +41,26 @@ module.exports = {
       white: { value: white },
       darkgray: { value: darkgray },
       gray: {
-        90: { value: "#262626" },
-        80: { value: "#4F4F4F" },
-        60: { value: "#6A6A6A" },
-        40: { value: "#A0A0A0" },
-        20: { value: "#C9C9C9" },
-        10: { value: "#F1F1F1" },
+        90: { value: gray(1) },
+        80: { value: gray(0.8) },
+        60: { value: gray(0.6667) },
+        40: { value: gray(0.4) },
+        20: { value: gray(0.196) },
+        10: { value: gray(0) },
       },
       ...Object.entries(baseColors).reduce(
         (colors, [name, color]) => ({
           ...colors,
           [name]: {
-            90: { value: darken(color, 80) },
-            80: { value: darken(color, 60) },
-            70: { value: darken(color, 40) },
-            60: { value: darken(color, 20) },
+            90: { value: darkColor(color, 3) },
+            80: { value: darkColor(color, 2) },
+            70: { value: darkColor(color, 1) },
+            60: { value: darkColor(color, 0) },
             50: { value: color },
-            40: { value: lighten(color, 20) },
-            30: { value: lighten(color, 40) },
-            20: { value: lighten(color, 60) },
-            10: { value: lighten(color, 80) },
+            40: { value: lightColor(color, 0) },
+            30: { value: lightColor(color, 1) },
+            20: { value: lightColor(color, 2) },
+            10: { value: lightColor(color, 3) },
           },
         }),
         {}
@@ -52,12 +68,12 @@ module.exports = {
       disabled: { value: "{navds.color.gray.40.value}" },
       action: {
         default: { value: "{navds.color.blue.50.value}" },
-        hover: { value: lighten(baseColors.blue, 5) },
+        hover: { value: "{navds.color.blue.60.value}" },
         active: { value: "{navds.color.deepblue.50.value}" },
       },
       danger: {
         default: { value: "{navds.color.red.50.value}" },
-        hover: { value: lighten(baseColors.red, 5) },
+        hover: { value: "{navds.color.red.60.value}" },
         active: { value: "{navds.color.red.70.value}" },
       },
       error: {
@@ -79,7 +95,7 @@ module.exports = {
       border: { value: "{navds.color.gray.40.value}" },
       background: { value: "{navds.color.white.value}" },
       text: {
-        primary: { value: "{navds.color.darkgray.value}" },
+        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}" },
@@ -89,24 +105,24 @@ module.exports = {
       tag: {
         error: {
           border: { value: "{navds.color.red.50.value}" },
-          background: { value: "{navds.color.red.20.value}" },
+          background: { value: "{navds.color.red.10.value}" },
         },
         warning: {
           border: { value: "{navds.color.orange.60.value}" },
-          background: { value: "{navds.color.orange.20.value}" },
+          background: { value: "{navds.color.orange.10.value}" },
         },
         info: {
           border: { value: "{navds.color.lightblue.70.value}" },
-          background: { value: "{navds.color.lightblue.20.value}" },
+          background: { value: "{navds.color.lightblue.10.value}" },
         },
         success: {
           border: { value: "{navds.color.green.50.value}" },
-          background: { value: "{navds.color.green.20.value}" },
+          background: { value: "{navds.color.green.10.value}" },
         },
       },
       modal: {
         overlay: {
-          value: "rgba(61, 56, 49, 0.7)",
+          value: "rgba(38, 38, 38, 0.7)",
         },
       },
     },
@@ -121,35 +137,29 @@ module.exports = {
     },
     font: {
       family: { value: '"Source Sans Pro", Arial, sans-serif' },
+      line: {
+        height: {
+          m: { value: 1.5 },
+          s: { value: 1.3 },
+        },
+      },
       size: {
-        heading: {
-          xxl: { value: "2.5rem" },
-          xl: { value: "2rem" },
-          large: { value: "1.5rem" },
-          medium: { value: "1.25rem" },
-          small: { value: "1.125rem" },
-        },
-        large: { value: "1.25rem" },
-        medium: { value: "1.125rem" },
-        small: { value: "1rem" },
-        xs: { value: "0.875rem" },
-        article: {
-          lead: { value: "1.25rem" },
-          paragraph: { value: "1.125rem" },
+        title: {
+          "2xl": { value: getFontSize(40) },
+          xl: { value: getFontSize(32) },
+          l: { value: getFontSize(28) },
+          m: { value: getFontSize(24) },
+          s: { value: getFontSize(20) },
         },
+        xl: { value: getFontSize(20) },
+        l: { value: getFontSize(18) },
+        m: { value: getFontSize(16) },
+        s: { value: getFontSize(14) },
       },
       weight: {
         bold: { value: "600" },
         regular: { value: "400" },
       },
-      line: {
-        height: {
-          large: { value: "1.625rem" },
-          medium: { value: "1.5rem" },
-          small: { value: "1.375rem" },
-          xs: { value: "1.25rem" },
-        },
-      },
     },
     shadow: {
       focus: { value: "0 0 0 3px {navds.color.blue.80.value}" },
@@ -163,36 +173,34 @@ 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: {
       background: {
-        white: { value: "#FFFFFF" },
-        gray: { value: "#F1F1F1" },
+        white: { value: white },
+        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: {
@@ -200,5 +208,14 @@ module.exports = {
         offset: { value: "0" },
       },
     },
+    spacing: Array(24)
+      .fill(0)
+      .reduce(
+        (spacing, _, index) => ({
+          ...spacing,
+          [index + 1]: { value: `${(index + 1) / 4}rem` },
+        }),
+        {}
+      ),
   },
 };

CHANGELOG.md

@@ -1,5 +1,153 @@
 # Endringslogg
 
+## 02. Juni 2021
+
+### Nytt typo-oppsett for ds-react, ds-css og ds-tokens
+
+[#1079](https://github.com/navikt/nav-frontend-moduler/pull/1079)
+
+[Typo med spacing](https://navikt.github.io/Designsystemet/?path=/story/ds-react-typography--typo-med-spacing)
+[Typo uten spacing](https://navikt.github.io/Designsystemet/?path=/story/ds-react-typography--typo-uten-spacing)
+[Bruks eksempel](https://navikt.github.io/Designsystemet/?path=/story/ds-react-typography--side-innhold-eksempel)
+
+Ds-react, ds-css og ds-tokens er alle minor-bumpet
+
+Nye komponenter for typografi:
+- Title: Heading
+- Ingress
+- BodyLong: Lengre tekster, tenk en vanlig paragraf
+- BodyShort: Mindre tekster, tenk teksten på en knapp eller label
+- Label
+- Detail: Detaljetekst på 14px 
+
+Ds-css og ds-tokens er endret for å tilrettelegge for disse. Diverse komponenter i ds-react bruker nå også typo-stilene for å sikre riktig typo.
+
+## 21. Mai 2021
+
+### Popover-position oppdateres nå onMount
+
+[#1104](https://github.com/navikt/nav-frontend-moduler/pull/1104)
+
+- Hvis popover mountes med `ankerEl` så vil posisjon oppdateres riktig nå.
+- OPS! Tilfeller ved bruk av useRef som `ankerEl` kan føre til feil i posisjonering da Popover mountes med `ankerEl == null`, og da oppdatering av ref ikke fører til props oppdatering siden det er en ref. Anbefales å ta i bruk state for `ankerEl`
+
+## 19. Mai 2021
+
+### Oppdatert fargepalett
+
+[#1092](https://github.com/navikt/nav-frontend-moduler/pull/1092)
+
+- Alle nav-frontend pakker som `nav-frontend-core` berører vil major bumpes, inkludert `na v-frontend-core`.
+- `@navikt/ds-tokens`, `@navikt/ds-css` og `@navikt/ds-react` vil minor bumpes
+
+- `orangeFocus` og alle variantene av denne fargen er fjernet fra `nav-frontend-core`
+- `navRod`sine lighten/darken varianter er fjernet fra `nav-frontend-core`. Bruk `redError` som erstattning.
+- `@navikt/ds-tokens` har nå `purple` og `limegreen` farger tilgjengelige
+
+### Prop for hvit bakgrunn på veileder sin snakkeboble
+
+[#1099](https://github.com/navikt/nav-frontend-moduler/pull/1099)
+
+- Kan nå bruke prop `hvitSnakkeboble` for å setteakgrunnen på snakkeboble til hvit.
+
+## 18. Mai 2021
+
+### Oppdatert bakgrunnsfarge på Tag/Etikett for å synke med figma
+
+[#1097](https://github.com/navikt/nav-frontend-moduler/pull/1097)
+[#1094](https://github.com/navikt/nav-frontend-moduler/pull/1094)
+
+- Bakgrunnene til de fire komponent-variasjonenen er nå endret til `Lighten80` istedenfor `Lighten60`
+
+### Oppdatert textareaRef prop for textarea-controlled
+
+[#1098](https://github.com/navikt/nav-frontend-moduler/pull/1098)
+
+- Legger på optional argument i textareaRef-propen på samme måte som i Textarea-componenten.
+
+### BekreftCheckboksPanel label har nå underline onHover
+
+[#1095](https://github.com/navikt/nav-frontend-moduler/pull/1095)
+
+- Fikser en uu-feil hvor forskjellen på default og hover stil ikke var stor nok.
+
+## 14. Mai 2021
+
+### @navikt/ds-tokens eksporteres nå også i CommonJs format
+
+## 13. Mai 2021
+
+### Typeguard for children i Tekstomrade-komponenten
+
+[#1089](https://github.com/navikt/nav-frontend-moduler/pull/1089)
+
+- Sjekker at children == string, hvis ikke return null
+
+## 04. Mai 2021
+
+### Forbedret scroll-behavior for sticky-panel
+
+[#1084](https://github.com/navikt/nav-frontend-moduler/pull/1084)
+
+- Oppførselen til menyen scrollet separat på mobil-skjermer (< 648px), noe som førte til en litt rar interaksjon. Menyen og innholdet under flyter nå naturlig uten noen overflow og max-height.
+
+## 30. April 2021
+
+### xxxl -> 3xl etc
+
+[#1086](https://github.com/navikt/nav-frontend-moduler/pull/1086)
+
+### AnchorMenu history-state fiks
+
+[#1085](https://github.com/navikt/nav-frontend-moduler/pull/1085)
+
+- Beholder state-objektet når history oppdateres ved scrolling med anchor-menu. Dette benyttes ved async navigering mellom sider i bl.a. next.js, og denne vil brekke dersom state'en overskrives.
+
+- Bruker replaceState istedenfor pushState slik at frem/tilbake-knapper i browser oppfører seg mer som forventet
+
+## 27. April 2021
+
+### Kan nå bruke className på `Popover`-komponent
+
+[#1082](https://github.com/navikt/nav-frontend-moduler/pull/1082)
+
+- Bruker kan nå bruke className som en prop på `<Popover />` uten at den overskriver komponentens styling
+
+### Fikser Checkbokspanel focus+feil markering
+
+[#1081](https://github.com/navikt/nav-frontend-moduler/pull/1081)
+
+- Fokusmarkering vises nå når man har focus + feil
+
+## 21. April 2021
+
+## Active stil for secondary/normal-knapp er endret for å skille seg fra hover
+
+[#1062](https://github.com/navikt/nav-frontend-moduler/pull/1062)
+
+## 19. April 2021
+
+### Modal-overlay klasse for @navikt/ds-css er nå `fixed
+
+[#1074](https://github.com/navikt/nav-frontend-moduler/pull/1074)
+
+- `absolute -> fixed`
+
+## 16. April 2021
+
+### Fokusmarkering forsvinner ikke nå onHover
+
+[#1072](https://github.com/navikt/nav-frontend-moduler/pull/1072)
+
+### Scroll er nå bare "smooth" onFocus
+
+[#1071](https://github.com/navikt/nav-frontend-moduler/pull/1071)
+
+Smooth-scroll bare satt i html:focus-within
+Slipper da at det er smooth-scroll når man gjør eks ctrl + f søk på siden.
+
+Takk for tips @winsvold !
+
 ## 08. April 2021
 
 ### Gråskala er endret i `nav-frontend-core`

README.md

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

docs/components/MDXComponents.tsx

@@ -1,5 +1,5 @@
 import { ErrorFilled, Settings, SuccessFilled } from "@navikt/ds-icons";
-import { Alert, Heading, Link, Paragraph } from "@navikt/ds-react";
+import { Alert, Title, Link, BodyLong } from "@navikt/ds-react";
 import Alertstripe from "nav-frontend-alertstriper";
 import Chevron from "nav-frontend-chevron";
 import Ekspanderbartpanel from "nav-frontend-ekspanderbartpanel";
@@ -94,11 +94,11 @@ import Proptable from "./props/Proptable";
 import TableOfContents from "./table-of-contents/TableOfContents";
 
 const components = {
-  h1: (props) => <Heading size="xxl" level={1} {...props} />,
-  h2: (props) => <Heading size="large" level={2} {...props} />,
-  h3: (props) => <Heading size="small" level={3} {...props} />,
-  h4: (props) => <Heading size="small" level={4} {...props} />,
-  p: (props) => <Paragraph size="medium" {...props} />,
+  h1: (props) => <Title size="2xl" level={1} spacing {...props} />,
+  h2: (props) => <Title size="l" level={2} spacing {...props} />,
+  h3: (props) => <Title size="s" level={3} spacing {...props} />,
+  h4: (props) => <Title size="s" level={4} spacing {...props} />,
+  p: (props) => <BodyLong size="m" spacing {...props} />,
   a: (props) => <Link {...props} />,
   code: (props) => <Inline {...props} />,
   SuccessIcon: () => (

docs/components/assets/svg.js

@@ -584,7 +584,7 @@ export const Edit = (props) => {
         fillRule="evenodd"
         clipRule="evenodd"
         d="M22.835 1.165a3.976 3.976 0 010 5.623L8.073 21.549.682 24 0 23.318l2.45-7.392L17.21 1.165a3.977 3.977 0 015.624 0zm-4.218 7.029l-2.811-2.812L4.188 17l-1.393 4.205 4.207-1.395L18.618 8.194zM21.43 2.57a1.989 1.989 0 00-2.703-.1l-.108.1-1.406 1.406 2.811 2.812 1.406-1.406a1.988 1.988 0 00.101-2.703l-.1-.109z"
-        fill="#3E3832"
+        fill="#262626"
         focusable="false"
       />
     </svg>

docs/components/layout/header/Header.tsx

@@ -30,7 +30,9 @@ const Header = ({
       <Link href="/">
         <button className={"header__link"}>
           <NavLogo />
-          <span className={"header__link-title"}>NAV Designsystem</span>
+          <span className="header__link-title navds-title navds-title--m">
+            NAV Designsystem
+          </span>
         </button>
       </Link>
     </header>

docs/components/layout/layout.css

@@ -67,9 +67,6 @@
 
 .header__link-title {
   color: white;
-  font-size: var(--navds-font-size-heading-large);
-  font-weight: var(--navds-font-weight-bold);
-  line-height: var(--navds-font-line-height-large);
 }
 
 .sidebar {

docs/components/table-of-contents/TableOfContents.tsx

@@ -1,6 +1,6 @@
 import { useContext } from "react";
 import { Next } from "@navikt/ds-icons";
-import { Heading } from "@navikt/ds-react";
+import { Title } from "@navikt/ds-react";
 import { PagePropsContext } from "../../pages/_app";
 import "./tableOfContents.css";
 
@@ -9,12 +9,12 @@ const TableOfContents = () => {
 
   return (
     <>
-      <Heading size="large" level={2}>
+      <Title size="l" spacing level={2}>
         Innhold
-      </Heading>
+      </Title>
       <ul className={"toc__ul"}>
         {tableOfContents?.map(({ heading, slug }) => (
-          <li key={slug} className={"toc__li"}>
+          <li key={slug} className={"toc__li navds-body-short"}>
             <Next
               aria-label="Pil peker på lenke"
               focusable="false"

docs/components/table-of-contents/tableOfContents.css

@@ -7,8 +7,6 @@
 .toc__li {
   list-style: none;
   margin: 0;
-  font-size: var(--navds-font-size-medium);
-  line-height: var(--navds-font-line-height-medium);
   color: var(--navds-color-blue-50);
   display: flex;
   align-items: center;