Lerna versionbump [ci skip]

- @navikt/ds-css@0.6.5
 - @navikt/ds-react@0.6.5

.github/workflows/build-publish.yml

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

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

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

.specifyrc.json

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

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

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

@navikt/ds-css/accordion.css

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

@navikt/ds-css/alert.css

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

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

@@ -5,7 +5,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

@@ -12,12 +12,12 @@
   border-width: 2px;
 
   /* Padding calculated based on 18px font for 44px tall button */
-  padding: calc(0.625rem - 2px) calc(var(--navds-spacing-8) - 2px);
+  padding: 0.65625rem var(--navds-spacing-3);
 }
 
-.navds-button--small {
+.navds-button--s {
   /* Padding calculated based on 16px font for 32px tall button */
-  padding: calc(0.3125rem - 2px) calc(var(--navds-spacing-4) - 2px);
+  padding: 0.25rem calc(var(--navds-spacing-4) - 2px);
 }
 
 .navds-button:focus {
@@ -33,16 +33,16 @@
 .navds-button--primary:active {
   color: var(--navds-color-text-inverse);
   background-color: var(--navds-color-action-hover);
-  border-width: 0;
+  border-color: transparent;
 
   /* Padding calculated based on 18px font for 44px tall button */
-  padding: 0.625rem var(--navds-spacing-8);
+  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.3125rem var(--navds-spacing-4);
+  padding: 0.25rem calc(var(--navds-spacing-4) - 2px);
 }
 
 .navds-button--primary:active {
@@ -86,42 +86,18 @@
 
 .navds-button--action,
 .navds-button--danger {
-  /* Padding calculated based on 18px font for 44px tall button */
-  padding: 0.625rem var(--navds-spacing-8);
-  border-width: 0;
-  transform: translateY(calc(-1 * 2px));
-  position: relative;
-  color: var(--navds-color-text-inverse);
-}
-
-.navds-button--action.navds-button--small,
-.navds-button--danger.navds-button--small {
-  /* Padding calculated based on 16px font for 32px tall button */
-  padding: 0.3125rem var(--navds-spacing-4);
-}
-
-.navds-button--action:not(:focus),
-.navds-button--danger:not(:focus) {
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 2px 0 rgba(0, 0, 0, 0.25);
+  color: white;
+  border-width: 1px;
 }
 
 .navds-button--action:hover {
   background-color: var(--navds-color-action-hover);
+  border-color: var(--navds-color-action-hover);
 }
 
 .navds-button--danger:hover {
   background-color: var(--navds-color-danger-hover);
-}
-
-.navds-button--danger:hover,
-.navds-button--action:hover {
-  transform: translateY(calc(-1 * 3px));
-  position: relative;
-}
-
-.navds-button--action:hover:not(:focus),
-.navds-button--danger:hover:not(:focus) {
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 3px 0 rgba(0, 0, 0, 0.25);
+  border-color: var(--navds-color-danger-hover);
 }
 
 .navds-button--action:active {
@@ -132,131 +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 18px font for 44px tall button */
-  padding: calc(0.625rem - 2px) calc(var(--navds-spacing-8) - 2px);
-  transform: translateY(calc(-1 * 2px));
-  position: relative;
-  border-width: 2px;
-}
-
-.navds-button--action:focus.navds-button--small,
-.navds-button--danger:focus.navds-button--small {
-  /* Padding calculated based on 16px font for 32px tall button */
-  padding: calc(0.3125rem - 2px) calc(var(--navds-spacing-4) - 2px);
-}
-
-.navds-button--action:hover:focus {
-  background-color: var(--navds-color-action-hover);
-}
-
-.navds-button--danger:hover:focus {
-  background-color: var(--navds-color-danger-hover);
-}
-
-.navds-button--action:hover:focus,
-.navds-button--danger:hover:focus {
-  /* Padding calculated based on 18px font for 44px tall button */
-  padding: 0.625rem var(--navds-spacing-8);
-  border-width: 0;
-  color: var(--navds-color-text-inverse);
-}
-
-.navds-button--action:hover:focus.navds-button--small,
-.navds-button--danger:hover:focus.navds-button--small {
-  /* Padding calculated based on 16px font for 32px tall button */
-  padding: 0.3125rem var(--navds-spacing-4);
-}
-
-.navds-button--action:active:focus {
-  color: var(--navds-color-action-active);
-  border-color: var(--navds-color-action-active);
-}
-
-.navds-button--danger:active:focus {
-  color: var(--navds-color-danger-active);
-  border-color: var(--navds-color-danger-active);
-}
-
-.navds-button--action:active:focus,
-.navds-button--danger:active:focus {
-  /* Padding calculated based on 18px font for 44px tall button */
-  padding: calc(0.625rem - 2px) calc(var(--navds-spacing-8) - 2px);
-  transform: translateY(0);
-  position: relative;
-  border-width: 2px;
-  background-color: var(--navds-color-background);
-}
-
-.navds-button--action:active:focus.navds-button--small,
-.navds-button--danger:active:focus.navds-button--small {
-  /* Padding calculated based on 16px font for 32px tall button */
-  padding: calc(0.3125rem - 2px) calc(var(--navds-spacing-4) - 2px);
-}
-
-.navds-button--action:hover:focus:active {
-  color: var(--navds-color-text-inverse);
-  background-color: var(--navds-color-action-active);
-}
-
-.navds-button--danger:hover:focus:active {
-  color: var(--navds-color-text-inverse);
-  background-color: var(--navds-color-danger-active);
-}
-
-/**************************
- * ::before *
- **************************/
-
-.navds-button--action::before,
-.navds-button--danger::before {
-  bottom: calc(-1 * 2px);
-  height: 2px;
-  content: "";
-  display: block;
-  position: absolute;
-  left: 0;
-  right: 0;
-}
-
-.navds-button--action:hover::before,
-.navds-button--danger:hover::before {
-  bottom: calc(-1 * 3px);
-  height: 3px;
-}
-
-.navds-button--action:focus::before,
-.navds-button--danger:focus::before {
-  bottom: calc(-1 * 2px);
-  height: 2px;
-}
-
-.navds-button--action:active::before,
-.navds-button--danger:active::before {
-  bottom: 0;
-  height: 0;
+  border-color: white;
 }
 
 /**************************
@@ -274,7 +128,7 @@
   transform: none;
 }
 
-.navds-button:disabled:disabled.navds-button--small {
+.navds-button:disabled:disabled.navds-button--s {
   /* Padding calculated based on 16px font for 32px tall button */
   padding: 0.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/header.css

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

@navikt/ds-css/index.css

@@ -8,8 +8,10 @@
 @import "accordion-menu.css";
 @import "alert.css";
 @import "button.css";
+@import "card.css";
 @import "content-container.css";
 @import "copy-to-clipboard.css";
+@import "header.css";
 @import "internal-header.css";
 @import "link.css";
 @import "modal.css";

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

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

@navikt/ds-css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.5.3",
+  "version": "0.6.5",
   "private": false,
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",
@@ -21,7 +21,7 @@
     "watch-css": "postcss -w --use postcss-import -o dist/index.css index.css"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^0.3.2",
+    "@navikt/ds-tokens": "^0.4.3",
     "normalize.css": "^8.0.1",
     "postcss": "^8.2.7",
     "postcss-cli": "^8.3.1",

@navikt/ds-css/typography.css

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

@navikt/ds-react/package.json

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

@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,17 +70,17 @@ const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
 
     return (
       <div
-        ref={ref}
         className={cl("navds-accordion", className, {
           "navds-accordion--open": internalOpen,
           "navds-accordion--closed": !internalOpen,
         })}
       >
         <button
-          id={buttonId.current}
+          ref={ref}
+          id={buttonId}
           className="navds-accordion__button"
           aria-expanded={open}
-          aria-controls={contentId.current}
+          aria-controls={contentId}
           onClick={onClick ? onClick : () => setInternalOpen((open) => !open)}
           {...rest}
         >
@@ -82,17 +88,24 @@ const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
             {heading}
           </span>
           <Expand
+            focusable="false"
+            role="img"
             className={cl(
               "navds-accordion__chevron",
               `navds-accordion__chevron--${internalOpen ? "up" : "down"}`
             )}
           />
+          <ExpandFilled
+            focusable="false"
+            role="img"
+            className={cl(
+              "navds-accordion__chevron",
+              "navds-accordion__chevron--filled",
+              `navds-accordion__chevron--${internalOpen ? "up" : "down"}`
+            )}
+          />
         </button>
-        <div
-          id={contentId.current}
-          role="region"
-          aria-labelledby={buttonId.current}
-        >
+        <div id={contentId} role="region" aria-labelledby={buttonId}>
           <CollapseComponent isOpened={internalOpen}>
             <div className="navds-accordion__content">{children}</div>
           </CollapseComponent>

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

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

@navikt/ds-react/src/alert/stories/alert.stories.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,7 +28,7 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
 }
 
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ variant = "primary", className, size = "medium", ...rest }, ref) => (
+  ({ variant = "primary", className, size = "m", ...rest }, ref) => (
     <button
       ref={ref}
       className={cl(
@@ -36,7 +36,8 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         "navds-button",
         `navds-button--${variant}`,
         `navds-button--${size}`,
-        "navds-body-short"
+        "navds-body-short",
+        { "navds-body--s": size === "s" }
       )}
       {...rest}
     />

@navikt/ds-react/src/button/stories/button.stories.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/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,
@@ -36,6 +37,7 @@ 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 {
   Title,
   Ingress,

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

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

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

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

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

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

@navikt/ds-react/src/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/typography/Title.tsx

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

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

@@ -0,0 +1,39 @@
+import { Meta } from "@storybook/addon-docs/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

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

@navikt/ds-tokens/package.json

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

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

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

README.md

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

docs/examples/resources/icons/IconPage.tsx

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

package.json

@@ -38,7 +38,8 @@
     "@navikt/ds-css/*",
     "@navikt/ds-react",
     "@navikt/ds-icons",
-    "@navikt/ds-tokens"
+    "@navikt/ds-tokens",
+    "utilities/build/from-git-fix"
   ],
   "prettier": {},
   "eslintConfig": {

packages/nav-frontend-ikonknapper/package.json

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

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

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

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

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

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

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

packages/nav-frontend-knapper/package.json

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

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

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

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

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

packages/nav-frontend-toggle/package.json

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

website/gatsby-config.js

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

website/gatsby-node.js

@@ -1,4 +1,7 @@
+const path = require(`path`);
+const redirects = require("./redirects");
 let packages = {};
+const dsUrl = "/designsystem";
 
 const getDependencyEdgesFromPackages = () =>
   Object.keys(packages)
@@ -76,10 +79,13 @@ exports.onCreatePage = ({ page, actions }) => {
     deletePage(page);
   };
   if (compOverview !== null) {
-    makePage(`/components/${compOverview[2].toLowerCase()}`, compOverview[2]);
+    makePage(
+      `${dsUrl}/components/${compOverview[2].toLowerCase()}`,
+      compOverview[2]
+    );
 
     makePage(
-      `/components/${compOverview[2].toLowerCase()}/overview`,
+      `${dsUrl}/components/${compOverview[2].toLowerCase()}/overview`,
       "Oversikt",
       0
     );
@@ -91,7 +97,7 @@ exports.onCreatePage = ({ page, actions }) => {
     scan(`nav-frontend-${source}`);
 
     createPage({
-      path: `/components/${compOverview[2].toLowerCase()}/technical`,
+      path: `${dsUrl}/components/${compOverview[2].toLowerCase()}/technical`,
       context: {
         frontmatter: { title: "Teknisk", rank: 1 },
         source: page.path,
@@ -112,7 +118,7 @@ exports.onCreatePage = ({ page, actions }) => {
   }
   if (compAcce !== null) {
     makePage(
-      `/components/${compAcce[2].toLowerCase()}/accessibility`,
+      `${dsUrl}/components/${compAcce[2].toLowerCase()}/accessibility`,
       "Tilgjengelighet",
       2
     );
@@ -120,9 +126,75 @@ exports.onCreatePage = ({ page, actions }) => {
 
   if (compIngress !== null) {
     makePage(
-      `/components/${compIngress[2].toLowerCase()}/ingress`,
+      `${dsUrl}/components/${compIngress[2].toLowerCase()}/ingress`,
       "Ingress",
       3
     );
   }
 };
+
+exports.createPages = async ({ graphql, actions, reporter }) => {
+  const { createPage, createRedirect } = actions;
+
+  redirects.forEach((path) => {
+    createRedirect({
+      fromPath: `${path}`,
+      toPath: `/designsystem${path}`,
+      isPermanent: true,
+    });
+  });
+
+  const result = await graphql(`
+    {
+      allGithubFile(filter: { relativeDirectory: { nin: "." } }) {
+        edges {
+          node {
+            base
+            path
+            relativeDirectory
+            childMdx {
+              tableOfContents(maxDepth: 3)
+              excerpt
+            }
+            childMarkdownRemark {
+              htmlAst
+              frontmatter {
+                title
+              }
+            }
+          }
+        }
+      }
+    }
+  `);
+  result.data.allGithubFile.edges
+    .filter(({ node }) => node.path.endsWith(".md"))
+    .forEach(({ node }) => {
+      const parsedPath = `/${node.path.replace(".md", "").replace(" ", "-")}`
+        .toLowerCase()
+        .replace("readme", "");
+      console.log(parsedPath);
+
+      createPage({
+        path: parsedPath,
+        component: path.resolve(
+          `./src/components/layout/templates/verktoykasseArticle.jsx`
+        ),
+        context: {
+          parentDir: node.relativeDirectory,
+          htmlAst: node.childMarkdownRemark.htmlAst,
+          frontmatter: {
+            ...node.childMarkdownRemark.frontmatter,
+            ingress: node.childMdx?.excerpt || null,
+          },
+          toc: node.childMdx?.tableOfContents || null,
+        },
+      });
+    });
+};
+
+exports.onPostBuild = ({ store, reporter }) => {
+  const { redirects } = store.getState();
+  reporter.info("Finished building site, here are all the redirects: ");
+  console.log(redirects);
+};

website/package.json

@@ -28,7 +28,7 @@
     "gatsby-remark-autolink-headers": "^2.3.15",
     "gatsby-remark-prismjs": "^3.5.16",
     "gatsby-source-filesystem": "^2.3.31",
-    "gatsby-transformer-remark": "^2.8.38",
+    "gatsby-transformer-remark": "^2.8.28",
     "gatsby-transformer-sharp": "^2.5.16",
     "mdx-utils": "^0.2.0",
     "object-path-immutable": "^4.1.0",
@@ -45,7 +45,17 @@
     "rehype-toc": "^3.0.2",
     "@navikt/ds-css": "*",
     "@navikt/ds-react": "*",
-    "canvg": "^3.0.7"
+    "canvg": "^3.0.7",
+    "@mosch/gatsby-source-github": "^0.4.1",
+    "dotenv": "^10.0.0",
+    "rehype-react": "^6.2.0",
+    "lodash.startcase": "4.4.0",
+    "gatsby-plugin-client-side-redirect": "^1.1.0",
+    "file-type": "^7.2.0",
+    "mime-types": "^2.1.17",
+    "minimatch": "^3.0.4",
+    "octokat": "^0.9.2",
+    "from-git-fix": "0.5.0"
   },
   "devDependencies": {
     "prettier": "2.2.1"

website/redirects.js

@@ -0,0 +1,162 @@
+const redirects = [
+  "/components/alertstripe/overview",
+  "/components/chevron/overview",
+  "/components/ekspanderbartpanel/overview",
+  "/components/etikett/overview",
+  "/components/hjelpetekst/overview",
+  "/components/ikonknapper/overview",
+  "/components/knapp/overview",
+  "/components/lenkepanel/overview",
+  "/components/lenke/overview",
+  "/components/lesmerpanel/overview",
+  "/components/lukknapp/overview",
+  "/components/modal/overview",
+  "/components/panel/overview",
+  "/components/popover/overview",
+  "/components/snakkeboble/overview",
+  "/components/stegindikator/overview",
+  "/components/spinner/overview",
+  "/components/tabell/overview",
+  "/components/tabs/overview",
+  "/components/tekstomrade/overview",
+  "/components/togglegruppe/overview",
+  "/components/toggleknapp/overview",
+  "/components/typografi/overview",
+  "/components/bekreftcheckbokspanel/overview",
+  "/components/veileder/overview",
+  "/components/veilederpanel/overview",
+  "/components/checkbox/overview",
+  "/components/checkbokspanelgruppe/overview",
+  "/components/feiloppsummering/overview",
+  "/components/fnrinput/overview",
+  "/components/input/overview",
+  "/components/radio/overview",
+  "/components/radiopanelgruppe/overview",
+  "/components/skjemagruppe/overview",
+  "/components/select/overview",
+  "/components/textarea/overview",
+  "/accessibility/overview/",
+  "/patterns/form-validation/",
+  "/resources/identity/",
+  "/resources/new-project/",
+  "/resources/colors/palette/",
+  "/resources/icons/iconsearch/",
+  "/resources/illustrations/resources/",
+  "/resources/language/principles/",
+  "/components/alertstripe/technical",
+  "/components/chevron/technical",
+  "/components/ekspanderbartpanel/technical",
+  "/components/etikett/technical",
+  "/components/hjelpetekst/technical",
+  "/components/ikonknapper/technical",
+  "/components/knapp/technical",
+  "/components/lenkepanel/technical",
+  "/components/lenke/technical",
+  "/components/lesmerpanel/technical",
+  "/components/lukknapp/technical",
+  "/components/modal/technical",
+  "/components/panel/technical",
+  "/components/popover/technical",
+  "/components/snakkeboble/technical",
+  "/components/stegindikator/technical",
+  "/components/spinner/technical",
+  "/components/tabell/technical",
+  "/components/tabs/technical",
+  "/components/tekstomrade/technical",
+  "/components/togglegruppe/technical",
+  "/components/toggleknapp/technical",
+  "/components/typografi/technical",
+  "/components/bekreftcheckbokspanel/technical",
+  "/components/veileder/technical",
+  "/components/veilederpanel/technical",
+  "/components/checkbox/technical",
+  "/components/checkbokspanelgruppe/technical",
+  "/components/feiloppsummering/technical",
+  "/components/fnrinput/technical",
+  "/components/input/technical",
+  "/components/radio/technical",
+  "/components/radiopanelgruppe/technical",
+  "/components/skjemagruppe/technical",
+  "/components/select/technical",
+  "/components/textarea/technical",
+  "/components/",
+  "/resources/colors/",
+  "/resources/colors/accessibility/",
+  "/resources/icons/install/",
+  "/resources/illustrations/guidelines/",
+  "/resources/language/guidelines/",
+  "/components/alertstripe/accessibility",
+  "/components/chevron/accessibility",
+  "/components/etikett/accessibility",
+  "/components/hjelpetekst/accessibility",
+  "/components/knapp/accessibility",
+  "/components/lenke/accessibility",
+  "/components/lukknapp/accessibility",
+  "/components/modal/accessibility",
+  "/components/popover/accessibility",
+  "/components/snakkeboble/accessibility",
+  "/components/spinner/accessibility",
+  "/components/tabell/accessibility",
+  "/components/tabs/accessibility",
+  "/components/veileder/accessibility",
+  "/components/bekreftcheckbokspanel/accessibility",
+  "/components/input/accessibility",
+  "/components/fnrinput/accessibility",
+  "/components/textarea/accessibility",
+  "/patterns/",
+  "/accessibility/alt-text/",
+  "/accessibility/placeholders/",
+  "/resources/illustrations/",
+  "/resources/colors/technical/",
+  "/resources/icons/guidelines/",
+  "/resources/language/checklist/",
+  "/resources/",
+  "/resources/icons/",
+  "/resources/language/units/",
+  "/accessibility/",
+  "/accessibility/disabled/",
+  "/resources/language/",
+  "/accessibility/tools/",
+  "/resources/subdomains/",
+  "/resources/internal-ux-principles/",
+  "/resources/typography/",
+  "/components/alertstripe",
+  "/components/chevron",
+  "/components/ekspanderbartpanel",
+  "/components/etikett",
+  "/components/hjelpetekst",
+  "/components/ikonknapper",
+  "/components/knapp",
+  "/components/lenkepanel",
+  "/components/lenke",
+  "/components/lesmerpanel",
+  "/components/lukknapp",
+  "/components/modal",
+  "/components/panel",
+  "/components/popover",
+  "/components/snakkeboble",
+  "/components/stegindikator",
+  "/components/spinner",
+  "/components/tabell",
+  "/components/tabs",
+  "/components/tekstomrade",
+  "/components/togglegruppe",
+  "/components/toggleknapp",
+  "/components/typografi",
+  "/components/bekreftcheckbokspanel",
+  "/components/veileder",
+  "/components/veilederpanel",
+  "/components/checkbox",
+  "/components/checkbokspanelgruppe",
+  "/components/feiloppsummering",
+  "/components/fnrinput",
+  "/components/input",
+  "/components/radio",
+  "/components/radiopanelgruppe",
+  "/components/skjemagruppe",
+  "/components/select",
+  "/components/textarea",
+  "/components/other/",
+];
+
+module.exports = redirects;

website/src/components/assets/images/svg.js

@@ -46,6 +46,35 @@ export const CrossIcon = (props) => {
   );
 };
 
+export const NAVLogoDark = ({ className }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`navLogo ${className}`}
+    width="90"
+    height="57"
+    viewBox="0 0 269 169"
+    focusable="false"
+    aria-label="Nav logo mørk versjon"
+    role="img"
+  >
+    <defs>
+      <path d="M22.407 43.417V.687H.564v42.73h21.843z" />
+    </defs>
+    <g fill="none" fillRule="evenodd">
+      <path
+        fill="#262626"
+        d="M125.31 168.942c-46.642 0-84.46-37.817-84.46-84.465C40.85 37.824 78.667 0 125.31 0c46.657 0 84.48 37.824 84.48 84.477 0 46.648-37.823 84.465-84.48 84.465zM0 121.359l17.265-42.73h16.589l-17.243 42.73zM213.044 121.359l17.044-42.73h9.044l-17.043 42.73z"
+      />
+      <g transform="translate(246 77.942)">
+        <path fill="#262626" d="M.564 43.417L17.604.687h4.803L5.364 43.418z" />
+      </g>
+      <path
+        fill="#FEFEFE"
+        d="M197.36 78.63h-15.016s-1.035 0-1.4.914l-8.31 25.439-8.304-25.44c-.366-.913-1.407-.913-1.407-.913h-28.872c-.625 0-1.149.522-1.149 1.143v8.639c0-6.853-7.292-9.782-11.562-9.782-9.562 0-15.963 6.298-17.956 15.873-.108-6.352-.636-8.628-2.347-10.96-.786-1.141-1.922-2.101-3.159-2.895-2.547-1.492-4.834-2.018-9.749-2.018h-5.77s-1.044 0-1.412.914l-5.25 13.013V79.773c0-.621-.52-1.143-1.145-1.143H61.198s-1.03 0-1.406.914l-5.459 13.53s-.545 1.354.701 1.354h5.133v25.784c0 .64.504 1.147 1.147 1.147h13.238c.624 0 1.144-.507 1.144-1.147V94.428h5.16c2.961 0 3.588.08 4.74.618.694.262 1.32.792 1.66 1.403.698 1.314.873 2.892.873 7.545v16.218c0 .64.514 1.147 1.15 1.147h12.687s1.434 0 2.001-1.416l2.812-6.95c3.74 5.237 9.893 8.366 17.541 8.366h1.671s1.443 0 2.014-1.416l4.897-12.128v12.397c0 .64.524 1.147 1.15 1.147h12.951s1.43 0 2.003-1.416c0 0 5.18-12.861 5.2-12.958h.008c.2-1.07-1.153-1.07-1.153-1.07h-4.623V83.847l14.545 36.096c.568 1.416 2 1.416 2 1.416h15.301s1.44 0 2.008-1.416l16.125-39.93c.558-1.383-1.057-1.383-1.057-1.383zm-64.458 27.285h-8.7c-3.463 0-6.28-2.804-6.28-6.271 0-3.461 2.817-6.283 6.28-6.283h2.433c3.454 0 6.267 2.822 6.267 6.283v6.27z"
+      />
+    </g>
+  </svg>
+);
 export const NAVLogo = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"

website/src/components/card/Card.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Link } from "gatsby";
+
+import "./card.less";
+
+const Card = ({ content, title, link, icon }) => {
+  const internalLink = link.startsWith("/");
+  return internalLink ? (
+    <Link className="card" to={link}>
+      <div className="card__icon">{icon}</div>
+      <div className="card__title">{title}</div>
+      <div className="card__content">{content}</div>
+    </Link>
+  ) : (
+    <a className="card" href={link}>
+      <div className="card__icon">{icon}</div>
+      <div className="card__title">{title}</div>
+      <div className="card__content">{content}</div>
+    </a>
+  );
+};
+
+export default Card;

website/src/components/card/card.less

@@ -0,0 +1,87 @@
+.card {
+  height: 22rem;
+  width: 18rem;
+  text-decoration: none;
+  color: var(--navds-color-darkgray);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 4rem 2rem 2rem 2rem;
+  border-radius: 8px;
+  border: 2px solid var(--navds-color-gray-20);
+  background-color: white;
+  position: relative;
+
+  &:hover {
+    box-shadow: 0 16px 18px -13px rgba(0, 0, 0, 0.1),
+      0 17px 36px -14px rgba(0, 0, 0, 0.17);
+  }
+
+  &:focus {
+    border-color: var(--navds-color-text-focus);
+    outline: none;
+  }
+}
+
+.card__grid {
+  column-gap: 1rem;
+  row-gap: 1rem;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  padding: 0;
+}
+
+.card__icon {
+  width: 4.5rem;
+  height: 4.5rem;
+  border-radius: 10rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 3rem;
+  flex-shrink: 0;
+  background: linear-gradient(
+    -52deg,
+    rgba(153, 195, 255, 1) 0%,
+    rgba(153, 195, 255, 1) 50%,
+    rgba(204, 225, 255, 1) 50%,
+    rgba(204, 225, 255, 1) 100%
+  );
+
+  svg {
+    font-size: 1.5rem;
+  }
+  .icon-facilitet--align {
+    margin-top: 0.25rem;
+    margin-left: 0.25rem;
+  }
+}
+
+.card__title {
+  margin-bottom: 1rem;
+  font-size: 1.5rem;
+  line-height: 1.75rem;
+  font-weight: 600;
+}
+
+.card:hover .card__title,
+.card:focus .card__title {
+  text-decoration: underline;
+}
+
+.card__content {
+  text-align: center;
+}
+
+@media screen and (max-width: 1350px) {
+  .card__grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media screen and (max-width: 700px) {
+  .card__grid {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}

website/src/components/get-started/GetStartedPage.js

@@ -14,7 +14,7 @@ const GetStartedPage = ({ ...props }) => (
           {props.children}
         </Link>
       )}
-      href="/components"
+      href="/designsystem/components"
       border
     >
       <div>
@@ -28,7 +28,7 @@ const GetStartedPage = ({ ...props }) => (
           {props.children}
         </Link>
       )}
-      href="/resources/icons"
+      href="/designsystem/resources/icons"
       border
     >
       <div>
@@ -42,7 +42,7 @@ const GetStartedPage = ({ ...props }) => (
           {props.children}
         </Link>
       )}
-      href="/resources/new-project"
+      href="/designsystem/resources/new-project"
       border
     >
       <div>

website/src/components/icons/IconPage.tsx

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

website/src/components/layout/Mdxprovider.js

@@ -6,29 +6,34 @@ import {
   Innholdstittel,
   Systemtittel,
   Undertittel,
+  Ingress,
 } from "nav-frontend-typografi";
 import Lenke from "nav-frontend-lenker";
+import Alertstripe from "nav-frontend-alertstriper";
 
 import { FileIcon, Cog } from "../assets/images/svg";
 import Example from "../example/Example";
 
-const MdxWrapper = (props) => (
-  <MDXProvider
-    components={{
-      h1: Innholdstittel,
-      h2: Systemtittel,
-      h3: (props) => <Undertittel {...props} tag="h3" />,
-      a: Lenke,
-      code: (props) => <Codeblock {...props} />,
-      inlineCode: (props) => <InlineCode {...props} />,
-      Undertittel,
-      InlineCode,
-      FileIcon,
-      Cog,
-      Example,
-    }}
-    {...props}
-  />
-);
+export const comps = {
+  h1: Innholdstittel,
+  h2: Systemtittel,
+  h3: (props) => <Undertittel {...props} tag="h3" />,
+  h4: (props) => <Undertittel {...props} tag="h4" />,
+  Ingress: Ingress,
+  ingress: Ingress,
+  a: Lenke,
+  code: (props) => <Codeblock {...props} />,
+  inlineCode: (props) => <InlineCode {...props} />,
+  Alertstripe: (props) => <Alertstripe {...props} />,
+  alertstripe: (props) => <Alertstripe {...props} />,
+  Undertittel,
+  undertittel: (props) => <Undertittel {...props} />,
+  InlineCode,
+  FileIcon,
+  Cog,
+  Example,
+};
+
+const MdxWrapper = (props) => <MDXProvider components={comps} {...props} />;
 
 export default MdxWrapper;

website/src/components/layout/OldLayout.tsx

@@ -9,6 +9,7 @@ import LayoutPicker from "./layoutPicker";
 import MdxWrapper from "./Mdxprovider";
 import { globalHistory } from "@reach/router";
 import "./layout.less";
+import startCase from "lodash.startcase";
 
 const Layout = (props) => {
   useEffect(() => {
@@ -19,11 +20,16 @@ const Layout = (props) => {
     });
   }, []);
 
+  let source = startCase(props.path.split("/")[1]);
+  source = source === "Designsystem" ? "Designsystemet" : source;
+
   return (
     <>
       <Helmet
         title={props.pageContext?.frontmatter?.title}
-        titleTemplate="%s - NAV Designsystem"
+        titleTemplate={`%s - ${
+          source === "" ? "" : source + " -"
+        }  NAV Verktøykassen`}
       >
         <html lang="no" />
         {props.pageContext?.frontmatter?.ingress && (
@@ -33,18 +39,22 @@ const Layout = (props) => {
           />
         )}
       </Helmet>
+      <a href="#hovedinnhold" tab-index={-1} id="skip-link">
+        Hopp til innhold
+      </a>
       <div className="mainWrapper">
-        <Header location={props.location} />
-        <Breadcrumb location={props.location} />
+        <Header location={props.location} title={source} />
+        {props.path.startsWith("/designsystem") && (
+          <Breadcrumb location={props.location} />
+        )}
         <div className="contentWrapper">
-          {!(
-            ["/", "/404.html"].includes(props.pageResources?.page?.path) ||
-            props.location.pathname === "/404.html"
-          ) && <Sidebar className="leftNavigation" location={props.location} />}
+          {props?.pageResources?.page?.path !== "/404.html" && (
+            <Sidebar className="leftNavigation" location={props.location} />
+          )}
           <main
             id="hovedinnhold"
             className={cl("mainContent", {
-              "dsportal--fullwidth": props.path === "/",
+              forside: props.location.pathname === "/",
             })}
           >
             <LayoutPicker {...props}>

website/src/components/layout/forside/Forside.jsx

@@ -0,0 +1,69 @@
+import React from "react";
+import { Ingress, Sidetittel } from "nav-frontend-typografi";
+import Card from "../../card/Card";
+import { Star, Facilitet, HandsHeart, Like } from "@navikt/ds-icons";
+import { NAVLogoDark } from "../../assets/images/svg";
+import "./styles.less";
+/* import Lenke from "nav-frontend-lenker"; */
+
+const Forside = ({ ...props }) => (
+  <div className="forside__wrapper">
+    <div className="forside__intro">
+      <div className="forside__logo-wrapper">
+        <NAVLogoDark className="forside__logo" />
+        {/* <span className="forside__logo-links">
+          <Lenke href="#">Noe info</Lenke>
+          <Lenke href="#">Noe annet</Lenke>
+        </span>
+       */}
+      </div>
+      <Sidetittel>Verktøykassen</Sidetittel>
+      <Ingress>
+        En samling ressurser fra ulike fagdisipliner, som sammen hjelper oss med
+        å skape bedre, universelt tilgjengelige og sammenhengende produkter i
+        NAV.
+      </Ingress>
+    </div>
+
+    <nav className="card__wrapper" aria-label="Hovedmeny">
+      <ol className="card__grid">
+        <li>
+          <Card
+            content="Brand og visuell profil basert på vår visjon og våre verdier."
+            title="Brand"
+            link="https://identitet.nav.no/"
+            icon={<Star focusable="false" />}
+          />
+        </li>
+        <li>
+          <Card
+            content="Gjør det enklere å lage produkter i NAV."
+            title="Designsystem"
+            link="/designsystem"
+            icon={
+              <Facilitet focusable="false" className="icon-facilitet--align" />
+            }
+          />
+        </li>
+        <li>
+          <Card
+            content="Tjenester til brukerne må fungere for alle."
+            title="Universell utforming"
+            link="https://navikt.github.io/uu/"
+            icon={<HandsHeart focusable="false" />}
+          />
+        </li>
+        <li>
+          <Card
+            content="Vi gjør innholdsarbeidet åpent og tidlig tilgjengelig."
+            title="God praksis"
+            link="/god-praksis"
+            icon={<Like focusable="false" />}
+          />
+        </li>
+      </ol>
+    </nav>
+  </div>
+);
+
+export default Forside;

website/src/components/layout/forside/styles.less

@@ -0,0 +1,53 @@
+.forside__wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  width: 100%;
+}
+
+.forside__intro {
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  max-width: 650px;
+  text-align: center;
+}
+
+.forside__logo {
+  justify-self: center;
+}
+
+.forside__logo-wrapper {
+  display: flex;
+  align-items: center;
+  margin-bottom: 3rem;
+}
+
+.forside__intro > .typo-ingress {
+  margin-top: 1rem;
+}
+
+.forside__logo-links {
+  position: absolute;
+  right: 3.5rem;
+}
+
+.forside__logo-links > * {
+  color: var(--navds-color-text-primary);
+  text-decoration: none;
+  margin-right: 2.5rem;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.card__grid {
+  list-style: none;
+  margin: 0;
+}
+
+.card__wrapper {
+  margin: 4rem auto 0 auto;
+}

website/src/components/layout/header/header.jsx

@@ -4,13 +4,14 @@ import { Link } from "gatsby";
 import { useMediaQuery } from "react-responsive";
 
 import { NAVLogo } from "../../assets/images/svg";
-import { Systemtittel } from "nav-frontend-typografi";
+import { Systemtittel, Normaltekst } from "nav-frontend-typografi";
 import MainNav from "./main-nav/MainNav";
 import MobileNav from "./mobile-nav/MobileNav";
 import MobileNavToggle from "./mobile-nav-toggle/MobileNavToggle";
+import { Back } from "@navikt/ds-icons";
 import "./header.less";
 
-const Header = ({ location }) => {
+const Header = ({ location, title }) => {
   const [mobile, setMobile] = useState(false);
   const [mobileNavOpen, setMobileNavOpen] = useState(false);
   const toggleBtn = useRef();
@@ -19,6 +20,10 @@ const Header = ({ location }) => {
     query: "(max-width: 1094px)",
   });
 
+  if (location.pathname === "/") {
+    return null;
+  }
+
   const checkViewport = () => {
     if (small && !mobile) {
       setMobile(true);
@@ -37,18 +42,37 @@ const Header = ({ location }) => {
   const ariaHidden = mobile ? { "aria-hidden": !!mobileNavOpen } : undefined;
   const headlineTag = !!location.pathname.match(/\/.*?\/\S/) ? "h2" : "h1";
 
+  let headerTitle = title === "Designsystemet" ? "Designsystemet" : title;
+  headerTitle = title === "" ? "Verktøykassen" : headerTitle;
+
+  const headerlink =
+    title === "Designsystemet" ? "designsystem" : title.toLowerCase();
+
+  const dsMenu = [
+    { link: "/designsystem/resources", title: "Ressurser" },
+    { link: "/designsystem/components/alertstripe", title: "Komponenter" },
+    { link: "/designsystem/patterns", title: "Mønster" },
+    { link: "/designsystem/accessibility", title: "Tilgjengelighet" },
+  ];
+
   checkViewport();
   return (
     <React.Fragment>
       <header className="header">
-        <a href="#hovedinnhold" id="skip-link">
-          Hopp til innhold
-        </a>
         <div className="header__content">
-          <Link to="/" className="header__logo">
+          <Link to="/" className="header__home">
+            <Back />
+            <Normaltekst className="header__home_title" tag={"span"}>
+              Hjem
+            </Normaltekst>
+          </Link>
+          <Link
+            to={`/${headerlink.replace(" ", "-")}`}
+            className="header__logo"
+          >
             <NAVLogo />
             <Systemtittel className="header__title" tag={headlineTag}>
-              Designsystemet
+              {headerTitle}
             </Systemtittel>
           </Link>
           <MobileNavToggle
@@ -59,10 +83,15 @@ const Header = ({ location }) => {
             {...ariaHidden}
           />
           <div style={{ flexGrow: 1 }} />
-          <MainNav />
+          {title === "Designsystemet" && <MainNav menu={dsMenu} />}
         </div>
       </header>
-      <MobileNav open={mobileNavOpen} toggle={toggleMobileNav} />
+      <MobileNav
+        open={mobileNavOpen}
+        toggle={toggleMobileNav}
+        location={location}
+        menu={dsMenu}
+      />
     </React.Fragment>
   );
 };

website/src/components/layout/header/header.less

@@ -9,7 +9,7 @@
 
   &__content {
     top: 4px;
-    padding: 0.5rem 2rem 0.5rem 2rem;
+    padding: 0.5rem 2rem 0.5rem 1rem;
     display: flex;
     flex-wrap: wrap;
     width: 100%;
@@ -93,18 +93,34 @@
   }
 }
 
-#skip-link {
-  padding: 1rem;
-  border: 2px solid @navBla;
-  background: white;
+.header__home {
+  display: inline-flex;
+  width: fit-content;
+  color: @navMorkGra;
+  align-items: center;
+  margin-right: 1rem;
+  text-decoration: none;
+  padding: 0 1rem;
 
-  &:not(:focus) {
-    .sr-only();
+  &:hover {
+    text-decoration: underline;
+
+    svg {
+      transform: translateX(-0.25rem);
+    }
+  }
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px #00347d;
   }
 
-  &:focus {
-    position: absolute;
-    top: 0;
-    z-index: 1;
+  svg {
+    height: 1.5rem;
+    width: 1.5rem;
   }
 }
+
+.header__home_title {
+  font-size: 1.25rem;
+  margin-left: 0.5rem;
+}

website/src/components/layout/header/main-nav/MainNav.jsx

@@ -1,40 +1,32 @@
 import React from "react";
 import { Link } from "gatsby";
-import { GithubLogo } from "../../../assets/images/svg";
-import { useMainMenu } from "../../../../useSiteStructure";
 import { guid } from "nav-frontend-js-utils";
 
 import "./styles.less";
 
-const MainNav = () => {
-  const menu = useMainMenu();
+const MainNav = ({ menu }) => {
   return (
-    <nav className="mainNav" aria-label="Hovedmeny">
-      <div className="mainNav__wrapper">
-        <ul>
-          {menu.map(({ link, title }, index) => (
-            <li key={guid()}>
-              <Link
-                partiallyActive={link ? true : false}
-                activeClassName="active"
-                to={link ? link : "/"}
-              >
-                {title}
-              </Link>
-            </li>
-          ))}
-          <li>
-            <a
-              href="https://github.com/navikt/nav-frontend-moduler"
-              className="github"
-              aria-label="Github lenke"
-            >
-              <GithubLogo />
-            </a>
-          </li>
-        </ul>
-      </div>
-    </nav>
+    <>
+      {menu ? (
+        <nav className="mainNav" aria-label="Hovedmeny">
+          <div className="mainNav__wrapper">
+            <ul>
+              {menu.map(({ link, title }) => (
+                <li key={guid()}>
+                  <Link
+                    partiallyActive={true}
+                    activeClassName="active"
+                    to={link}
+                  >
+                    {title}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </nav>
+      ) : null}
+    </>
   );
 };
 

website/src/components/layout/header/mobile-nav/MobileNav.jsx

@@ -18,7 +18,7 @@ const cls = (props, hidden) =>
     "mobile-nav--hidden": hidden,
   });
 
-const MobileNav = ({ ...props }) => {
+const MobileNav = ({ menu, location, ...props }) => {
   const [hidden, setHidden] = useState(true);
   const lukkBtn = useRef();
   const bg = useRef();
@@ -49,7 +49,10 @@ const MobileNav = ({ ...props }) => {
     }
   };
 
-  const menu = useMainMenu();
+  const isDs = location.pathname.indexOf("/designsystem") !== -1;
+  const newMenu = useMainMenu(location);
+  // TODO: Reimplement mobile menu
+  const pickedMenu = isDs ? menu : newMenu;
 
   return (
     <div
@@ -75,13 +78,13 @@ const MobileNav = ({ ...props }) => {
           <span className="sr-only">Lukk meny</span>
         </Xknapp>
         <ul className="nav-list">
-          {menu.map((route) => {
+          {pickedMenu.map((route) => {
             return (
               <li key={route.link}>
                 <Link
                   tabIndex={hidden ? -1 : 0}
                   activeClassName="active"
-                  to={route.link ? route.link : "/"}
+                  to={route.link ? route.link.replace("/alertstripe", "") : "/"}
                 >
                   {route.title}
                 </Link>
@@ -89,14 +92,25 @@ const MobileNav = ({ ...props }) => {
             );
           })}
           <li>
-            <a
-              tabIndex={hidden ? -1 : 0}
-              href="https://github.com/navikt/nav-frontend-moduler"
-              className="github"
-            >
-              <GithubLogo />
-              Github
-            </a>
+            {isDs ? (
+              <a
+                tabIndex={hidden ? -1 : 0}
+                href="https://github.com/navikt/nav-frontend-moduler"
+                className="github"
+              >
+                <GithubLogo />
+                Github
+              </a>
+            ) : (
+              <a
+                tabIndex={hidden ? -1 : 0}
+                href="https://github.com/navikt/verktoykasse-innhold"
+                className="github"
+              >
+                <GithubLogo />
+                Rediger innhold (krever innlogging)
+              </a>
+            )}
           </li>
         </ul>
       </nav>

website/src/components/layout/layout.less

@@ -15,6 +15,11 @@ body {
   flex-direction: column;
 }
 
+.contentWrapper .mainContent.forside {
+  background-color: #f7f7f7;
+  min-height: 100vh;
+}
+
 .contentWrapper {
   display: flex;
   flex: 1;
@@ -817,3 +822,30 @@ p,
 .gitLink {
   margin-top: 4rem;
 }
+
+#skip-link {
+  padding: 1rem;
+  border: 2px solid @navBla;
+  background: white;
+
+  &:not(:focus) {
+    .sr-only();
+  }
+
+  &:focus {
+    position: absolute;
+    top: 0;
+    z-index: 9999;
+  }
+}
+
+.article img {
+  display: block;
+  max-width: 100%;
+  padding: 0.25rem;
+  border: 2px solid transparent;
+}
+
+.article a:focus img {
+  border: 2px solid #00347d;
+}

website/src/components/layout/sidebar/Sidebar.tsx

@@ -12,6 +12,7 @@ import { LenkepanelBase } from "nav-frontend-lenkepanel";
 import { Input } from "nav-frontend-skjema";
 import { EtikettFokus, EtikettInfo } from "nav-frontend-etiketter";
 import { useNavigationPage, usePageMenu } from "../../../useSiteStructure";
+import StartCase from "lodash.startcase";
 import "./styles.less";
 
 const isBeta = (path: string) => {
@@ -26,12 +27,19 @@ const isStyle = (path: string) => {
   return style[1].includes("style");
 };
 
-const cls = (link: string, location) =>
-  classnames({
+const cls = (link: string, location) => {
+  if (!location.pathname.startsWith("/designsystem")) {
+    return classnames({
+      active:
+        link.replace(/\//g, "-") === location.pathname.replace(/\//g, "-"),
+    });
+  }
+  return classnames({
     active: link
       .split("/")
       .every((s, i) => location.pathname.split("/")[i] === s),
   });
+};
 
 const Sidebar = ({ location, className = "" }) => {
   const page = useNavigationPage(location);
@@ -53,6 +61,19 @@ const Sidebar = ({ location, className = "" }) => {
     (item) => item.title.toLowerCase().indexOf(inputText.toLowerCase()) !== -1
   );
 
+  const pageTitle = page?.isVerktoykasse
+    ? StartCase(page.slug.split("/")[0])
+    : page?.title
+    ? page?.title
+    : "Missing title";
+
+  if (
+    ["/", "/404.html", "/designsystem/", "/designsystem"].includes(
+      location.pathname
+    )
+  ) {
+    return null;
+  }
   return (
     <motion.div
       initial={{ y: -30, opacity: 0 }}
@@ -62,18 +83,20 @@ const Sidebar = ({ location, className = "" }) => {
       className={className}
     >
       <nav aria-labelledby="left-navigation-title">
-        <Input
-          className="leftNavigation__input"
-          label="Filter"
-          value={inputText}
-          onChange={(e) => setInputText(e.target.value)}
-          autoComplete="on"
-        />
+        {location.pathname.startsWith("/designsystem") && (
+          <Input
+            className="leftNavigation__input"
+            label="Filter"
+            value={inputText}
+            onChange={(e) => setInputText(e.target.value)}
+            autoComplete="on"
+          />
+        )}
         <Systemtittel
           id="left-navigation-title"
           className="leftNavigation__title"
         >
-          {page?.title}
+          {pageTitle}
         </Systemtittel>
 
         <ul className="nav-list">
@@ -115,7 +138,7 @@ const Sidebar = ({ location, className = "" }) => {
             </li>
           )}
         </ul>
-        {location.pathname.indexOf("/components") === 0 && (
+        {location.pathname.indexOf("/designsystem/components") === 0 && (
           <div className="contribute-promo">
             <Undertittel>Noe du savner?</Undertittel>
             <LenkepanelBase

website/src/components/layout/templates/verktoykasseArticle.jsx

@@ -0,0 +1,125 @@
+import React from "react";
+import rehypeReact from "rehype-react";
+import { comps } from "../Mdxprovider";
+import { GithubLogo } from "../../assets/images/svg";
+import {
+  Innholdstittel,
+  Systemtittel,
+  Undertittel,
+  Normaltekst,
+} from "nav-frontend-typografi";
+import Lenke from "nav-frontend-lenker";
+let headlines = [];
+
+const Img = ({ src, ...rest }) => {
+  //https://raw.githubusercontent.com/navikt/verktoykasse-innhold/mainhttps://user-images.githubusercontent.com/82579704/122454676-ef88a880-cfab-11eb-9f8c-6d3afb45fdd1.png
+  const isDirectPath =
+    src.indexOf("user-images.githubusercontent.com/") !== -1 ||
+    src.indexOf("raw.githubusercontent.com/navikt/verktoykasse-innhold") !== -1;
+
+  const localPath = src.replace(
+    "https://github.com/navikt/verktoykasse-innhold/blob/main",
+    ""
+  );
+  const fixedPath = `https://raw.githubusercontent.com/navikt/verktoykasse-innhold/main${localPath}`;
+
+  // eslint-disable-next-line jsx-a11y/alt-text
+  return (
+    <span>
+      <img src={isDirectPath ? src : fixedPath} {...rest} />
+    </span>
+  );
+};
+
+// TODO: Refactor..
+const getToc = (toc) => {
+  if (toc.length === 0 || !toc[0].items || toc[0].items.length === 0) {
+    return null;
+  }
+
+  return (
+    <nav className="table-of-contents">
+      <ol className="toc-level toc-level-1">
+        {toc[0].items.map((item) => {
+          return (
+            <li key={item.url} className="toc-item toc-item-h2">
+              <Lenke href={item.url} className="toc-link toc-link-h2">
+                {item.title}
+              </Lenke>
+              {item.items && item.items.length !== 0 && (
+                <ol className="toc-level toc-level-2">
+                  {item.items.map((lvl3) => {
+                    return (
+                      <li key={item.url} className="toc-item toc-item-h3">
+                        <Lenke href={lvl3.url} className="toc-link toc-link-h3">
+                          {lvl3.title}
+                        </Lenke>
+                      </li>
+                    );
+                  })}
+                </ol>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+};
+
+const registerHeadline = (props, comp) => {
+  const text = props.children.toString();
+  let id = text
+    .toLowerCase()
+    .replace(/ /g, "-")
+    .replace(/[^a-zæøåA-ZÆØÅ0-9 -]/g, "");
+
+  if (headlines.includes(id)) {
+    headlines.push(id);
+    id = `${id}-${headlines.filter((hid) => hid === id).length - 1}`;
+  } else {
+    headlines.push(id);
+  }
+
+  const Comp = comp;
+  return <Comp id={id} {...props} />;
+};
+
+const renderAst = new rehypeReact({
+  createElement: React.createElement,
+  components: {
+    ...comps,
+    img: (props) => <Img {...props} />,
+    h1: (props) => registerHeadline(props, Innholdstittel),
+    h2: (props) => registerHeadline(props, Systemtittel),
+    h3: (props) =>
+      registerHeadline(props, (props) => <Undertittel tag="h3" {...props} />),
+    h4: (props) =>
+      registerHeadline(props, (props) => <Undertittel tag="h4" {...props} />),
+  },
+}).Compiler;
+
+const Article = ({ path, pageContext }) => {
+  headlines = [];
+
+  const editPath = path.endsWith("/") ? path + "readme" : path;
+  const editUrl = `https://www.github.com/navikt/verktoykasse-innhold/edit/dev${editPath}.md`;
+
+  return (
+    <>
+      <div>
+        <article className="section article" id="main-content">
+          {pageContext.toc?.items && getToc(pageContext.toc.items)}
+          {renderAst(pageContext.htmlAst)}
+        </article>
+        <Normaltekst className="gitLink">
+          <Lenke href={editUrl}>
+            <GithubLogo /> Rediger siden på Github (krever innlogging)
+          </Lenke>
+        </Normaltekst>
+      </div>
+    </>
+  );
+};
+
+export default Article;

website/src/pages/components/other.mdx

@@ -1,7 +0,0 @@
----
-title: + Andre komponenter
----
-
-import OtherComponentsPage from "../../components/other/OtherComponentsPage";
-
-<OtherComponentsPage />

website/src/pages/designsystem/accessibility.mdx

@@ -3,6 +3,6 @@ title: Tilgjengelighet
 rank: 4
 ---
 
-import NavPage from "../components/nav-page/NavPage";
+import NavPage from "../../components/nav-page/NavPage";
 
 <NavPage {...props} />

website/src/pages/designsystem/accessibility/alt-text.mdx

@@ -8,12 +8,12 @@ import { Ingress, Undertittel } from "nav-frontend-typografi";
 import Alertstripe from "nav-frontend-alertstriper";
 import Lenkepanel from "nav-frontend-lenkepanel";
 import Snakkeboble from "nav-frontend-snakkeboble";
-import { NAVLogo, W3CLogo } from "../../components/assets/images/svg";
+import { NAVLogo, W3CLogo } from "../../../components/assets/images/svg";
 import Panel from "nav-frontend-paneler";
-import AltDecisionTree from "../../components/assets/images/alt-decision-tree.png";
-import Example from "../../components/example/Example";
-import { DoDont, Do, Dont } from "../../components/do-dont/DoDont";
-import Code from "../../components/code/Code";
+import AltDecisionTree from "../../../components/assets/images/alt-decision-tree.png";
+import Example from "../../../components/example/Example";
+import { DoDont, Do, Dont } from "../../../components/do-dont/DoDont";
+import Code from "../../../components/code/Code";
 
 # Alternative tekster (alt-tekster)
 

website/src/pages/designsystem/accessibility/disabled.mdx

@@ -12,7 +12,7 @@ import {
   Feiloppsummering,
 } from "nav-frontend-skjema";
 import Lenkepanel from "nav-frontend-lenkepanel";
-import { DoDont, Do, Dont } from "../../components/do-dont/DoDont";
+import { DoDont, Do, Dont } from "../../../components/do-dont/DoDont";
 import Hjelpetekst from "nav-frontend-hjelpetekst";
 import { Knapp } from "nav-frontend-knapper";
 

website/src/pages/designsystem/accessibility/placeholders.mdx

@@ -7,9 +7,9 @@ rank: 2
 import { Ingress } from "nav-frontend-typografi";
 import { Input } from "nav-frontend-skjema";
 import Lenkepanel from "nav-frontend-lenkepanel";
-import { DoDont, Do, Dont } from "../../components/do-dont/DoDont";
-import PlaceholderPassword from "../../components/assets/videos/placeholder-password.mp4";
-import PlaceholderContrast from "../../components/assets/images/placeholder-contrast.png";
+import { DoDont, Do, Dont } from "../../../components/do-dont/DoDont";
+import PlaceholderPassword from "../../../components/assets/videos/placeholder-password.mp4";
+import PlaceholderContrast from "../../../components/assets/images/placeholder-contrast.png";
 import Hjelpetekst from "nav-frontend-hjelpetekst";
 
 # Bruk av placeholder-attributtet

website/src/pages/designsystem/components.mdx

@@ -3,6 +3,6 @@ title: Komponenter
 rank: 1
 ---
 
-import NavPage from "../components/nav-page/NavPage";
+import NavPage from "../../components/nav-page/NavPage";
 
 <NavPage {...props} />

website/src/pages/designsystem/components/other.mdx

@@ -0,0 +1,7 @@
+---
+title: + Andre komponenter
+---
+
+import OtherComponentsPage from "../../../components/other/OtherComponentsPage";
+
+<OtherComponentsPage />

website/src/pages/designsystem/index.mdx

@@ -0,0 +1,8 @@
+---
+title: Designsystem
+rank: 1
+---
+
+import GetStartedPage from "../../components/get-started/GetStartedPage";
+
+<GetStartedPage />

website/src/pages/designsystem/patterns.mdx

@@ -3,6 +3,6 @@ title: Mønster
 rank: 2
 ---
 
-import NavPage from "../components/nav-page/NavPage";
+import NavPage from "../../components/nav-page/NavPage";
 
 <NavPage {...props} />

website/src/pages/designsystem/patterns/form-validation.mdx

@@ -5,8 +5,8 @@ rank: 0
 
 import { Ingress } from "nav-frontend-typografi";
 import Alertstripe from "nav-frontend-alertstriper";
-import Example from "../../components/example/Example";
-import FormValidationExample from "../../components/example-solutions/FormValidationExample";
+import Example from "../../../components/example/Example";
+import FormValidationExample from "../../../components/example-solutions/FormValidationExample";
 
 # Skjemavalidering
 

website/src/pages/designsystem/resources.mdx

@@ -3,6 +3,6 @@ title: Ressurser
 rank: 3
 ---
 
-import NavPage from "../components/nav-page/NavPage";
+import NavPage from "../../components/nav-page/NavPage";
 
 <NavPage {...props} />

website/src/pages/designsystem/resources/colors/accessibility.mdx

@@ -11,7 +11,7 @@ import {
   TypoIcon,
   ButtonIcon,
   VeilederIcon,
-} from "../../../components/assets/images/svg";
+} from "../../../../components/assets/images/svg";
 
 ## Generell bruk av farge
 

website/src/pages/designsystem/resources/colors/palette.mdx

@@ -0,0 +1,8 @@
+---
+title: Fargepalett
+rank: 0
+---
+
+import Palette from "../../../../examples/Palette";
+
+<Palette />

website/src/pages/designsystem/resources/colors/technical.mdx

@@ -3,8 +3,8 @@ title: Teknisk
 rank: 2
 ---
 
-import { Bash, copyImport } from "../../../components/code/Code";
-import "../../../components/code/styles.less";
+import { Bash, copyImport } from "../../../../components/code/Code";
+import "../../../../components/code/styles.less";
 
 ## Installering
 

website/src/pages/designsystem/resources/icons/guidelines.mdx

@@ -3,7 +3,7 @@ title: Retningslinjer
 rank: 2
 ---
 
-import IkonStates from "../../../components/assets/images/ikon-states.png";
+import IkonStates from "../../../../components/assets/images/ikon-states.png";
 
 ## Universell utforming
 

website/src/pages/designsystem/resources/icons/iconsearch.mdx

@@ -0,0 +1,8 @@
+---
+title: Ikonsøk
+rank: 0
+---
+
+import IconPage from "../../../../components/icons/IconPage.tsx";
+
+<IconPage />

website/src/pages/designsystem/resources/icons/install.mdx

@@ -0,0 +1,8 @@
+---
+title: Installering
+rank: 1
+---
+
+import IconInstall from "../../../../components/icons/IconInstall.tsx";
+
+<IconInstall />