Lerna versionbump [ci skip]

- @navikt/ds-react@0.9.1

.github/workflows/build-publish.yml

@@ -8,9 +8,10 @@ on:
     branches: [master]
   pull_request:
     branches: [master]
+  workflow_dispatch:
 
 jobs:
-  build:
+  test-build:
     if: "!contains(github.event.head_commit.message, '[ci skip]')"
     runs-on: ubuntu-latest
     steps:
@@ -26,14 +27,18 @@ jobs:
         with:
           path: "**/node_modules"
           key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
-      - name: Install deps
+      - name: install
         if: steps.node-cache.outputs.cache-hit != 'true'
-        run: yarn install --frozen-lockfile
-      - name: Gulp-build
+        run: yarn install
+      - name: Boot
         run: yarn boot
       - name: Eslint and Stylelint
         run: yarn lint
-      - name: Test gatsby-build
+      - 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 (design.nav.no)
         run: yarn build:gatsby
       - name: Test chromatic
         uses: chromaui/action@v1
@@ -43,9 +48,9 @@ jobs:
           exitZeroOnChanges: true
 
   publish-npm:
-    needs: build
+    needs: test-build
     runs-on: ubuntu-latest
-    if: github.event_name == 'push'
+    if: github.event_name == 'push' && contains(github.event.head_commit.message, '[fix]') || contains(github.event.head_commit.message, '[feature]') || contains(github.event.head_commit.message, '[breaking]')
     steps:
       - uses: actions/checkout@v2
         with:
@@ -61,23 +66,53 @@ jobs:
         with:
           path: "**/node_modules"
           key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
-      - name: Install deps
+      - name: install
         if: steps.node-cache.outputs.cache-hit != 'true'
         run: yarn install --frozen-lockfile
-      - name: Gulp-build
+      - name: Boot
         run: yarn boot
-      - run: git config --global user.email "github-actions[bot]@users.noreply.github.com"
-      - run: git config --global user.name "github-actions[bot]"
-      - run: git remote set-url origin https://github-actions[bot]:$NAV_DS_TOKEN@github.com/$GITHUB_REPOSITORY.git
+      - name: Setup github connection for auth
+        run: |
+          git config --global user.email "github-actions[bot]@users.noreply.github.com"
+          git config --global user.name "github-actions[bot]"
+          git remote set-url origin https://github-actions[bot]:$NAV_DS_TOKEN@github.com/$GITHUB_REPOSITORY.git
         env:
           NAV_DS_TOKEN: ${{secrets.GIT_REPO}}
-      - run: yarn lerna version patch --include-merged-tags --yes
-      - run: yarn lerna publish from-package --yes
+
+      - name: Update changed packages with PATCH
+        if: "contains(github.event.head_commit.message, '[fix]')"
+        run: yarn lerna version patch --include-merged-tags --yes
+      - name: Update changed packages with MINOR
+        if: "contains(github.event.head_commit.message, '[feature]')"
+        run: yarn lerna version minor --include-merged-tags --yes
+      - name: Update changed packages with MAJOR
+        if: "contains(github.event.head_commit.message, '[breaking]')"
+        run: yarn lerna version major --include-merged-tags --yes
+
+      - name: Create a .npmrc file for NPM
+        run: |
+          echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> .npmrc
+          npm whoami
         env:
-          NODE_AUTH_TOKEN: ${{secrets.NPM_AUTOMATION}}
+          NPM_TOKEN: ${{secrets.NPM_AUTOMATION}}
+      - name: Publish to NPM registry
+        run: |
+          yarn lerna publish from-package --yes
+          rm .npmrc
+      - name: Create a .npmrc file for the github package repository
+        uses: FerLuisxd/create-npmrc@3
+        with:
+          org_name: navikt
+        env:
+          AUTH_TOKEN: ${{secrets.GIT_REPO}}
+      - name: Publish to Github registry
+        run: |
+          rm lerna.json && cp utilities/lerna.json lerna.json
+          git add . && git commit -m "tmp"
+          yarn lerna publish --registry https://npm.pkg.github.com from-package --yes
 
   publish-pages:
-    needs: publish-npm
+    needs: test-build
     runs-on: ubuntu-latest
     if: github.event_name == 'push'
     steps:
@@ -96,9 +131,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
@@ -113,7 +152,7 @@ jobs:
         env:
           NAV_DS_TOKEN: ${{secrets.GIT_REPO}}
 
-      - name: Deploy storybook
+      - name: Deploy storybook to designsystem-repo
         uses: peaceiris/actions-gh-pages@v3
         with:
           personal_token: ${{secrets.GIT_REPO}}

.github/workflows/publish_storybook.yml

@@ -0,0 +1,39 @@
+# This workflow will run will build the component library and the storybook, then publish it to https://navikt.github.io/Designsystemet
+
+name: Publish Storybook
+
+on:
+ workflow_dispatch
+
+jobs:
+  publish-storybook:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: "0"
+          token: ${{secrets.GIT_REPO}}
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14
+      - name: Node-modules cache
+        uses: actions/cache@v2
+        id: node-cache
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+      - name: Install deps
+        if: steps.node-cache.outputs.cache-hit != 'true'
+        run: yarn install --frozen-lockfile
+      - name: Gulp-build
+        run: yarn boot
+      - name: Building Storybook
+        run: yarn build-storybook
+      - name: Deploy storybook
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          personal_token: ${{secrets.GIT_REPO}}
+          external_repository: navikt/designsystemet
+          publish_dir: ./storybook-static
+          user_name: "github-actions[bot]"
+          user_email: "github-actions[bot]@users.noreply.github.com"

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

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

.gitignore

@@ -41,6 +41,7 @@ typings/
 
 # Optional npm cache directory
 .npm
+.npmrc
 
 # Optional eslint cache
 .eslintcache

.specifyrc.json

@@ -0,0 +1,46 @@
+{
+  "repository": "@nav/designsystem",
+  "head": "specify-sync",
+  "base": "specify-token-parsing",
+  "rules": [
+    {
+      "name": "Color sync",
+      "path": "@navikt/ds-tokens/src/colors.js",
+      "filter": {
+        "types": ["color"]
+      },
+      "parsers": [
+        {
+          "name": "to-theme-ui",
+          "options": {
+            "formatConfig": {
+              "module": "commonjs"
+            },
+            "formatTokens": {
+              "colorFormat": {
+                "format": "rgb"
+              }
+            }
+          }
+        }
+      ]
+    },
+    {
+      "name": "Spacing sync",
+      "path": "@navikt/ds-tokens/src/spacing.js",
+      "filter": {
+        "types": ["measurement"]
+      },
+      "parsers": [
+        {
+          "name": "to-theme-ui",
+          "options": {
+            "formatConfig": {
+              "module": "commonjs"
+            }
+          }
+        }
+      ]
+    }
+  ]
+}

.storybook/main.js

@@ -10,7 +10,6 @@ module.exports = {
     "../@navikt/**/*.stories.@(js|jsx|ts|tsx|mdx)",
   ],
   addons: [
-    "@storybook/addon-links",
     "@storybook/addon-docs",
     {
       name: "@storybook/addon-storysource",
@@ -27,6 +26,5 @@ module.exports = {
         controls: { hideNoControlsWarning: true },
       },
     },
-    "@whitespace/storybook-addon-html",
   ],
 };

.storybook/preview-body.html

@@ -1,6 +0,0 @@
-<div id="decorator-wrapper">
-  <div id="decorator-header" style="display: none"></div>
-  <div id="root"></div>
-  <div id="docs-root"></div>
-  <div id="decorator-footer" style="display: none"></div>
-</div>

.storybook/preview-head.html

@@ -1,18 +0,0 @@
-<!-- prettier-ignore -->
-<div data-src='https://www.nav.no/dekoratoren/env?availableLanguages=[{"locale":"nb","url":"http://localhost:8088/dekoratoren/","handleInApp":true},{"locale":"en","url":"http://localhost:8088/dekoratoren/en/","handleInApp":true}]&breadcrumbs=[{"url":"https://www.nav.no/person/dittnav","title":"ditt%20nav"},%20{"url":"https://www.nav.no/person/kontakt-oss/nb/","title":"kontakt%20oss"}]' id="decorator-env"></div>
-<link href="https://www.nav.no/dekoratoren/css/client.css" rel="stylesheet" />
-<script async src="https://www.nav.no/dekoratoren/client.js"></script>
-<style>
-  html,
-  body,
-  #decorator-wrapper {
-    min-height: 100vh;
-  }
-  #decorator-wrapper {
-    display: flex;
-    flex-direction: column;
-  }
-  #decorator-footer {
-    margin-top: auto;
-  }
-</style>

.storybook/stories/introduction.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/addon-docs/blocks";
+import { Meta } from "@storybook/addon-docs";
 
 <Meta title="ds-react/Kom i gang" />
 
@@ -11,7 +11,7 @@ yarn add @navikt/ds-react @navikt/ds-css
 ```
 
 Siden stilene ikke importeres direkte i komponentene, så må man selv importere ds-css.
-Dette gjøres for å la komponetene brukes i Nextjs prosjekter.
+For å legge til all stylingen som trengs må man da bare importere `ds-css`.
 
 ```bash
 import "@navikt/ds-css"
@@ -19,15 +19,4 @@ import "@navikt/ds-css"
 
 Dette vil også legge css-variabler på :root. For å få dette til å fungere med IE11, kan denne pakken tas i bruk: https://jhildenbiddle.github.io/css-vars-ponyfill/#/
 
-## Testing
-
-For å støtte testing med eks Jest som ikke tillater ESM moduler, så kan denne configen legges til
-
-```bash
-"moduleNameMapper": {
-  "@navikt/ds-react(.*)": "@navikt/ds-react/cjs$1",
-  "@navikt/ds-icons(.*)": "@navikt/ds-icons/cjs$1"
-}
-```
-
-Dette vil remappe komponentene (og ikonpakken) til å bruke CommonJs versjonen for testing
+Note: Disse komponentene kan ikke garanteres at fungerer som forventet i IE11 da vi har valgt og ikke unngå styling-valg basert på IE11 støtte eller ikke.

.storybook/stories/migration.stories.mdx

@@ -0,0 +1,229 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="ds-react/Migration" />
+
+# Migrering til ds-react, ds-css v0.8.0
+
+Denne guiden vil være til hjelp for de som allerede har begynt å ta i bruk de nye pakkene våre tidligere enn v0.8.0.
+For de som ikke har begynt å ta i bruk pakkene kan man se bort fra denne.
+
+Fra versjon v0.7 til v0.8 er det komment flere store endringer både i ds-react og ds-css. For å lettere
+oppdatere til v0.8 har vi da laget en liten guide som forklarer de største endringene.
+
+## Styling
+
+De fleste komponenter har fått diverse justering på styling. Anbefales da å ta en rask sjekk om alt fortsatt stemmer
+etter oppdateringen.
+
+## Sizing
+
+Alle komponenter som tidligere var implementert med `size`-prop har fått oppdatert
+props fra "xs", "s", "m", "l", "xl", "2xl" -> "xsmall", "small", "medium", "large", "xlarge", "2xlarge".
+
+Dette betyr også at css-stylingen er eks endret fra `.navds-body-short--s` -> `.navds-body-short--small`
+
+## Overridable component
+
+Komponenter som tidligere implementerte ovveridable component med bruk av `component`-prop bruker nå `as`.
+Implementasjonen av OverridableComponent er WIP så kan hende typene ender opp med å krangle i enkelte tilfeller. Om så ta gjerne kontakt med oss
+slik at vi får sett på det tilfellet!
+
+```jsx
+/* Før */
+<BodyShort component="span" />
+
+/* Etter */
+<BodyShort as="span" />
+```
+
+## Navneendringer
+
+### Buttons
+
+- `Primary` -> `Secondary` (Normal)
+- `Action` -> `Primary` (Hoved)
+- `Secondary` -> `Tertiary` (Flat)
+
+For alle som har brukt `<Button />` så må man fikse slik at riktige knapper blir brukt der de skal!
+
+## Nytt
+
+- GuidePanel (veilederpanel)
+- HelpText (Hjeleptext)
+
+### Typography
+
+Vi har valgt å endre fra `<Title/>` -> `<Heading/>` i typografien vår da dette ga mer mening i bruk.
+APIet til komponenten er ikke endret borsett fra "Sizing" endringene nevt lengre opp, så skal bare være en rask search/replace.
+
+For de som har brukt css-en direkte, eks `navds-title` så må man endre til `navds-heading`
+
+Endret `Header` -> `PageHeader`, samme som er nevnt ang endringen over gjelder her også: sjekk css hvis brukt direkte.
+
+## Fjernet komponenter
+
+Fjernet da den var utdaterte/må ses mer på
+
+- ProductPageLayout
+
+## Typography
+
+Linjehøyder for alle typo-komponentene er oppdatert til å matche figma.
+
+Lagt til en Heading lvl 6 og size="xsmall"
+
+## AccordionMenu
+
+Implementert med dot-notation
+
+- Trenger bare importere AccordionMenu
+- AccordionMenuCollapsable -> AccordionMenu.Collapsable
+- AccordionMenuItem -> AccordionMenu.Item
+
+## Accordion
+
+Implementert med dot-notation
+
+- Trenger bare importere Accordion nå
+
+Fragmenterte komponenten:
+
+- Accordion -> Accordion.Item
+- Header -> Accordion.Header
+- children -> Accordion.Content
+
+La til prop: `defaultOpen` på `Accordion.Item`
+
+```jsx
+/* Før */
+<Accordion heading="tittel" open={open} onClick={(open) => setOpen(!open)}>
+  Eu magna fugiat officia
+</Accordion>
+<Accordion heading="tittel2" open={open2} onClick={(open2) => setOpen(!open2)}>
+  Eu magna fugiat officia
+</Accordion>
+
+/* Etter */
+<Accordion>
+  <Accordion.Item open={open}>
+    <Accordion.Header onClick={(open) => setOpen(!open)}>
+      Accordion header text
+    </Accordion.Header>
+    <Accordion.Content>
+      Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam officia
+      laboris voluptate officia pariatur.Lorem est ex anim velit
+    </Accordion.Content>
+  </Accordion.Item>
+  <Accordion.Item open={open2}>
+    <Accordion.Header onClick={(open2) => setOpen(!open2)}>
+      Accordion header text
+    </Accordion.Header>
+    <Accordion.Content>
+      Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam officia
+      laboris voluptate officia pariatur.Lorem est ex anim velit
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion>
+```
+
+## Alert
+
+- La til `fullWidth`-prop for alert uten border-radius og width 100%
+- La til `inline`-prop for alert med transparent border/background og 0 padding.
+
+## Button
+
+Oppdatert med Overridablecomponent.
+
+Håndtering av sentrering, margins er oppdatert. Trenger ikke wrappe tekst med `span` når man skal bruke ikoner lengre.
+
+Hvis man skal manuelt justere på alignment av innhold, eks bruke `flex-direction: column` må man sette
+det på css-klassen `.navds-button__inner` da children er wrappet i den.
+
+## CopyToClipboard
+
+Ekstender nå ButtonProps, slik at man eks kan ta i bruk `size`-proppen
+
+`text`-prop -> `copyText`
+`label`-prop -> `popoverText`
+
+Fjernet `icon`-prop, la til `popoverPlacement`
+
+## Modal
+
+Implementert med dot-notasjon
+
+Innholds-padding er flyttet fra Modal -> Modal.Content
+
+```
+/* Før */
+<Modal>Modal innhold</Modal>
+
+/* Etter */
+<Modal><Modal.Content>Modal innhold</Modal.Content></Modal>
+```
+
+## LinkPanel
+
+Implementert med dot-notasjon
+
+```jsx
+/* Før */
+<LinkPanel href="#">Consectetur eu duis aliqua eu irure fugiat fugiat eu.</LinkPanel>
+
+/* Etter */
+<LinkPanel href="#">
+  <LinkPanel.Title>
+    Consectetur eu duis aliqua eu irure fugiat fugiat eu.
+  </LinkPanel.Title>
+</LinkPanel>
+```
+
+Kan nå legge til en beskrivelse med `Linkpanel.Description`
+
+```jsx
+<LinkPanel href="#">
+  <LinkPanel.Title>
+    Consectetur eu duis aliqua eu irure fugiat fugiat eu.
+  </LinkPanel.Title>
+  <LinkPanel.Description>Aliqua id aliquip Lorem esse</LinkPanel.Description>
+</LinkPanel>
+```
+
+## Popover
+
+Implementert med dot-notasjon
+
+Får nå padding rundt innhold med Popover.Content
+
+```jsx
+
+/* Før */
+
+<Popover>Popover innhold</Popover>
+
+/* Etter */
+
+<Popover>
+  <Popover.Content>Modal innhold</Popover.Content>
+</Popover>
+```
+
+## Header -> PageHeader
+
+Props må fikses for de som har brukt denne komponenten, i tilleg til å endre navn.
+
+- `variant`-prop -> `align`
+- `theme`-prop -> `variant`
+
+## MicroCard
+
+- Oppdatert med OverridableComponent
+
+## SpeechBubble
+
+Implementert med Dot-notasjon
+
+- `<Bubble/>` -> `<SpeechBubble.Bubble/>`
+
+Bubble er fortsatt eksportert så vil ikke brekke noe for de som har begynt å ta denne i bruk.

.storybook/stories/roadmap.stories.mdx

@@ -0,0 +1,51 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="ds-react/Roadmap" />
+
+# Plan videre
+
+Arbeidet med det nye pakke-oppsettet har nå foregått en stund og skulle egentlig vært
+lengre på vei en det er nå. Men arbeidet har på ingen måte stoppet opp! Vi jobber kontinuerlig med
+å finne bedre løsninger for å kunne bygge systemet opp fra bunnen av. Dette innegår da
+ny dokumentasjons-side bygd med Sanity, nye byggeblokker helt fra token-nivå og bedre sizing for eksterne/interne sider. Dette vil da forhåpentligvis la oss
+bygge mer robuste og fleksible løsninger for fremtiden.
+
+(Rekkefølgen representer ikke faktisk tidsline eller prioritet)
+
+## Tokens
+
+Vi bygger opp `@navikt/ds-tokens` pakken som inneholder alle design-tokensene til designsystemet fra bunnen av.
+Dette vil gjøre styling og overriding av komponenter enklere da man kan bruke css-variabler.
+
+## Intern / Ekstern sizing
+
+Komponenter tilpasses og standariseres bedre for skillet mellom interne/eksterne flater.
+Løsning er ikke fast bestemt, men eksempel på dette er `size="small" -> 32px, size="medium"-> 48px`.
+Dette vil da eksempelvis kunne være en standard som er gjennomgående for de fleste komponentene.
+
+## Ny dokumentasjon-side
+
+Vi bygger en ny side for å dokumentere systemet, og mer rundt utvikling/design i nav med "Verktøykassen"
+
+## Migrere komponenter/styling fra nav-frontend-\* -> `@navikt/ds-css / @navikt/ds-react`
+
+Dette arbeidet kommer sakte men sikkert på plass, men tar litt tid da mye må på plass først, da eksempelvis sizing og tokens.
+Noen komponenter vil ha oppdatert funksjonalitet, noen bare stilendringer, mens noen kan nesten brukes 1-1 fra nav-frontend-.
+
+Note: Noen pakker vil ikke flyttes over fra nav-frontend og `deprecates` i praksis da. De pakkene som ikka tas over vil ikke bli deprecated på `npm`, slik at man kan fortsette å ta dem i bruk uten en sint terminal hver gang man kjører `yarn install`.
+
+## Theming
+
+Etterhvert når vi har nye react, css og token pakke på plass har vi et ønske om å kunne se på theming for
+eks darkmode.
+
+## Vue, svelte, web-components etc...
+
+Dette er noe vi ikke har på planene for tiden, men etterhvert som ting faller på plass så vil dette være
+noe vi kunne ta en titt på hvis vi ser at det trengs.
+
+## Versjonering
+
+To av de nye pakkene under `@navikt`, da `ds-css` og `ds-react` er nå versjonert under to store pakker med alle komponentene. I fremtiden vil vi se på å
+ha både samversjonering (alle pakker under en eks ds-react versjon) og induvduell verjsonering da eks ds-react/button har en egen versjon
+slik at man kan ha mer finkontroll over komponentbruk på siden sin.

@navikt/README.md

@@ -0,0 +1,3 @@
+# Designsystem v2
+
+Storybook: https://navikt.github.io/Designsystemet/

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

@@ -1,8 +0,0 @@
-.navds-accordion-anchor-menu {
-  padding: 1rem 0;
-}
-
-.navds-accordion-anchor-menu__title {
-  margin-left: 1rem;
-  margin-right: 1rem;
-}

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

@@ -1,3 +1,11 @@
+:root {
+  --navds-accordion-menu-color-text: var(--navds-color-text-link);
+  --navds-accordion-menu-color-text-focus: var(--navds-color-darkgray);
+  --navds-accordion-menu-color-background-hover: var(--navds-color-blue-10);
+  --navds-accordion-menu-color-text-active: var(--navds-color-text);
+  --navds-accordion-menu-outline-focus: var(--navds-text-focus);
+}
+
 .navds-accordion-menu__list {
   list-style: none;
   margin: 0;
@@ -18,29 +26,22 @@
   justify-content: space-between;
   align-items: center;
   font-weight: var(--navds-font-weight-bold);
-  color: var(--navds-color-text-link);
+  color: var(--navds-accordion-menu-color-text);
   text-decoration: underline;
 }
 
-.navds-accordion-menu-collapsable .navds-accordion-menu__list,
-.navds-accordion-menu-collapsable
-  .navds-accordion-menu-collapsable
-  .navds-accordion-menu-collapsable__button {
-  font-weight: var(--navds-font-weight-regular);
-}
-
 .navds-accordion-menu-item,
 .navds-accordion-menu-collapsable__button {
   display: flex;
-  padding: 0.75rem 1rem;
-  line-height: 1.5rem; /* TODO: fix typography. */
+  padding: var(--navds-spacing-3) var(--navds-spacing-4);
+  text-decoration: none;
 }
 
 .navds-accordion-menu-collapsable__expand-icon {
   font-size: 1.5rem;
-  color: var(--navds-color-text-link);
+  color: var(--navds-accordion-menu-color);
   flex-shrink: 0;
-  margin-left: 0.5rem;
+  margin-left: var(--navds-spacing-2);
 }
 
 .navds-accordion-menu-collapsable--open
@@ -53,7 +54,7 @@
 .navds-accordion-menu-collapsable
   .navds-accordion-menu-collapsable
   .navds-accordion-menu-collapsable__button {
-  padding-left: 2rem;
+  padding-left: var(--navds-spacing-8);
 }
 
 .navds-accordion-menu-collapsable
@@ -63,7 +64,7 @@
   .navds-accordion-menu-collapsable
   .navds-accordion-menu-collapsable
   .navds-accordion-menu-collapsable__button {
-  padding-left: 3rem;
+  padding-left: var(--navds-spacing-12);
 }
 
 .navds-accordion-menu-collapsable
@@ -75,23 +76,28 @@
   .navds-accordion-menu-collapsable
   .navds-accordion-menu-collapsable
   .navds-accordion-menu-collapsable__button {
-  padding-left: 4rem;
+  padding-left: var(--navds-spacing-16);
 }
 
 .navds-accordion-menu-item:focus,
 .navds-accordion-menu-collapsable__button:focus {
-  outline: 3px solid var(--navds-text-focus);
+  outline: 3px solid var(--navds-accordion-menu-outline-focus);
   outline-offset: -3px;
+  color: var(--navds-accordion-menu-color-text-focus);
+}
+
+.navds-accordion-menu-collapsable__button:focus
+  > .navds-accordion-menu-collapsable__expand-icon {
+  color: var(--navds-accordion-menu-color-focus);
 }
 
 .navds-accordion-menu-item:hover,
 .navds-accordion-menu-collapsable__button:hover {
-  background-color: var(--navds-color-gray-20);
+  background-color: var(--navds-accordion-menu-color-background-hover);
 }
 
 .navds-accordion-menu-item--active {
   box-shadow: inset 0.5rem 0 var(--navds-color-text-link);
-  color: var(--navds-color-text);
+  color: var(--navds-accordion-menu-color-text-active);
   text-decoration: none;
-  font-weight: var(--navds-font-weight-bold);
 }

@navikt/ds-css/accordion.css

@@ -1,77 +1,70 @@
-.ReactCollapse--collapse {
-  transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1);
+:root {
+  --navds-accordion-color-text: var(--navds-color-darkgray);
+  --navds-accordion-color-background: var(--navds-color-background);
+  --navds-accordion-color-text-hover: var(--navds-color-blue-50);
+  --navds-accordion-color-border-hover: var(--navds-color-blue-50);
+  --navds-accordion-color-border-focus: var(--navds-color-background);
+}
+
+.navds-accordion .ReactCollapse--collapse {
+  transition: height 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .navds-accordion {
-  position: relative;
-  background: var(--navds-color-background);
-  border: var(--navds-border-default);
-  border-radius: 4px;
+  background: var(--navds-accordion-color-background);
 }
 
-.navds-accordion:hover {
-  box-shadow: var(--navds-color-hover);
-  border: var(--navds-panel-hover);
-  color: black;
-}
-
-.navds-accordion:focus,
-.navds-accordion__button:focus {
-  box-shadow: var(--navds-shadow-focus);
+.navds-accordion__header:focus {
   outline: none;
+  box-shadow: var(--navds-shadow-focus);
+  border-color: var(--navds-accordion-color-border-focus);
 }
 
-.navds-accordion__chevron {
-  width: 1.25em;
-  height: 1.25em;
-  transform: rotateZ(0deg);
+.navds-accordion__header:hover {
+  color: var(--navds-accordion-color-text-hover);
+  border-color: var(--navds-accordion-color-border-hover);
+  text-decoration: underline;
+}
+
+.navds-accordion__expand-icon {
+  width: 1.5rem;
+  height: 1.5rem;
   flex-shrink: 0;
-  margin-left: 1rem;
 }
 
-.navds-accordion__chevron--up {
-  transform: rotateZ(-180deg);
+.navds-accordion__expand-icon--flip {
+  transform: rotateZ(180deg);
 }
 
-.navds-accordion__chevron--down {
-  transform: rotateZ(0deg);
-}
-
-.navds-accordion__button {
-  padding: 1rem;
-  border-radius: 4px;
+.navds-accordion__header {
+  padding: var(--navds-spacing-4) var(--navds-spacing-3);
   background: transparent;
-  border: 0;
   text-align: left;
+  border: none;
   width: 100%;
-  margin-bottom: 0;
+  margin: 0;
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   align-items: center;
-}
-
-.navds-accordion__button .navds-accordion__heading {
-  font-size: var(--navds-font-size-large);
-  font-weight: var(--navds-font-weight-bold);
-  line-height: var(--navds-font-line-height-large);
-}
-
-.navds-accordion__button:hover .navds-accordion__heading {
-  text-decoration: underline;
-  color: var(--navds-color-text-link);
+  border-bottom: 2px solid #a0a0a0;
+  gap: var(--navds-spacing-4);
 }
 
 .navds-accordion__content {
-  padding: 0.5rem 1rem 1rem;
+  color: var(--navds-accordion-color-text);
+  padding: var(--navds-spacing-5) var(--navds-spacing-3) var(--navds-spacing-10);
 }
 
-.navds-accordion--open .navds-accordion__content {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+.navds-accordion__expand-icon--filled {
+  display: none;
 }
 
-.navds-accordion--open > .navds-accordion__button {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
+.navds-accordion__header:hover
+  > .navds-accordion__expand-icon.navds-accordion__expand-icon--filled {
+  display: inherit;
+}
+
+.navds-accordion__header:hover > .navds-accordion__expand-icon {
+  display: none;
 }

@navikt/ds-css/alert.css

@@ -1,74 +1,119 @@
+:root {
+  --navds-alert-color-border: var(--navds-color-gray-40);
+  --navds-alert-color-error-border: var(--navds-color-error-border);
+  --navds-alert-color-error-background: var(--navds-color-error-background);
+  --navds-alert-color-warning-border: var(--navds-color-warning-border);
+  --navds-alert-color-warning-background: var(--navds-color-warning-background);
+  --navds-alert-color-info-border: var(--navds-color-info-border);
+  --navds-alert-color-info-background: var(--navds-color-info-background);
+  --navds-alert-color-success-border: var(--navds-color-success-border);
+  --navds-alert-color-success-background: var(--navds-color-success-background);
+  --navds-alert-color-error-icon: var(--navds-color-red-60);
+  --navds-alert-color-error-icon-background: var(--navds-color-white);
+  --navds-alert-color-warning-icon: var(--navds-color-orange-40);
+  --navds-alert-color-warning-icon-background: var(--navds-color-darkgray);
+  --navds-alert-color-info-icon: var(--navds-color-lightblue-70);
+  --navds-alert-color-info-icon-background: var(--navds-color-white);
+  --navds-alert-color-success-icon: var(--navds-color-green-70);
+  --navds-alert-color-success-icon-background: var(--navds-color-white);
+}
+
 .navds-alert {
   border-radius: 4px;
-  border: var(--navds-border-default);
+  border: 1px solid;
+  border-color: var(--navds-alert-color-border);
+  padding: calc(var(--navds-spacing-4) + 1px) calc(var(--navds-spacing-4) + 1px);
+  display: flex;
+  gap: var(--navds-spacing-3);
+  align-items: center;
+}
 
-  /* Padding calculated based on 16px font for 64px tall alert */
-  padding: 1.1875em 1em;
-  display: grid;
-  grid-auto-flow: column;
-  column-gap: 0.75rem;
-  justify-content: start;
-  font-size: var(--navds-font-size-small);
-  line-height: var(--navds-font-line-height-small);
+.navds-alert__wrapper {
+  max-width: 43.5rem;
 }
 
 .navds-alert--small {
-  border-radius: 0;
-  padding: 0.5em 1em;
+  padding: calc(var(--navds-spacing-1) - 1px) var(--navds-spacing-4);
 }
 
-.navds-alert > svg {
+.navds-alert--full-width {
+  border-radius: 0;
+}
+
+.navds-alert > .navds-alert__icon {
+  flex-shrink: 0;
   font-size: 1.5rem;
+  align-self: flex-start;
+  height: var(--navds-font-line-height-xl);
+}
+
+.navds-alert--small > .navds-alert__icon {
+  font-size: 1.25rem;
+  height: var(--navds-font-line-height-l);
+}
+
+.navds-alert--error {
+  border-color: var(--navds-alert-color-error-border);
+  background-color: var(--navds-alert-color-error-background);
+}
+
+.navds-alert--error > .navds-alert__icon {
+  color: var(--navds-alert-color-error-icon);
   background: radial-gradient(
     circle,
-    var(--navds-color-background) 50%,
+    var(--navds-alert-color-error-icon-background) 50%,
     0,
     transparent
   );
 }
 
-.navds-alert > span {
-  margin-top: 1px;
-}
-
-.navds-alert--error {
-  border-color: var(--navds-color-error-border);
-  background-color: var(--navds-color-error-background);
-}
-
-.navds-alert--error > svg {
-  color: var(--navds-color-red-60);
-}
-
 .navds-alert--warning {
-  border-color: var(--navds-color-warning-border);
-  background-color: var(--navds-color-warning-background);
+  border-color: var(--navds-alert-color-warning-border);
+  background-color: var(--navds-alert-color-warning-background);
 }
 
-.navds-alert--warning > svg {
-  color: var(--navds-color-orange-40);
+.navds-alert--warning > .navds-alert__icon {
+  color: var(--navds-alert-color-warning-icon);
   background: radial-gradient(
     circle,
-    var(--navds-color-darkgray) 50%,
+    var(--navds-alert-color-warning-icon-background) 50%,
     0,
     transparent
   );
 }
 
 .navds-alert--info {
-  border-color: var(--navds-color-info-border);
-  background-color: var(--navds-color-info-background);
+  border-color: var(--navds-alert-color-info-border);
+  background-color: var(--navds-alert-color-info-background);
 }
 
-.navds-alert--info > svg {
-  color: var(--navds-color-lightblue-70);
+.navds-alert--info > .navds-alert__icon {
+  color: var(--navds-alert-color-info-icon);
+  background: radial-gradient(
+    circle,
+    var(--navds-alert-color-info-icon-background) 50%,
+    0,
+    transparent
+  );
 }
 
 .navds-alert--success {
-  border-color: var(--navds-color-success-border);
-  background-color: var(--navds-color-success-background);
+  border-color: var(--navds-alert-color-success-border);
+  background-color: var(--navds-alert-color-success-background);
 }
 
-.navds-alert--success > svg {
-  color: var(--navds-color-green-70);
+.navds-alert--success > .navds-alert__icon {
+  color: var(--navds-alert-color-success-icon);
+  background: radial-gradient(
+    circle,
+    var(--navds-alert-color-success-icon-background) 50%,
+    0,
+    transparent
+  );
+}
+
+.navds-alert--inline {
+  background-color: transparent;
+  border-color: transparent;
+  padding: 0;
 }

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

@@ -5,7 +5,19 @@
 @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"; */
+
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
 
 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/baseline/utility.css

@@ -9,7 +9,8 @@
  *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
  */
 
-.sr-only {
+.sr-only,
+.navds-sr-only {
   border: 0;
   clip: rect(0, 0, 0, 0);
   height: 1px;
@@ -32,7 +33,9 @@
  */
 
 .sr-only.focusable:active,
-.sr-only.focusable:focus {
+.sr-only.focusable:focus,
+.navds-sr-only.focusable:active,
+.navds-sr-only.focusable:focus {
   clip: auto;
   height: auto;
   margin: 0;

@navikt/ds-css/button.css

@@ -1,26 +1,72 @@
+:root {
+  /* Primary */
+  --navds-button-color-primary-text: var(--navds-color-white);
+  --navds-button-color-primary-border-focus: var(--navds-color-white);
+  --navds-button-color-primary-background: var(--navds-color-action-default);
+  --navds-button-color-primary-background-hover: var(
+    --navds-color-action-hover
+  );
+  --navds-button-color-primary-background-active: var(
+    --navds-color-action-active
+  );
+
+  /* Secondary */
+  --navds-button-color-secondary-text: var(--navds-color-action-default);
+  --navds-button-color-secondary-text-hover: var(--navds-color-text-inverse);
+  --navds-button-color-secondary-text-active: var(--navds-color-text-inverse);
+  --navds-button-color-secondary-border: var(--navds-color-action-default);
+  --navds-button-color-secondary-border-focus-active-hover: var(
+    --navds-color-white
+  );
+  --navds-button-color-secondary-background: var(--navds-color-background);
+  --navds-button-color-secondary-background-hover: var(
+    --navds-color-action-hover
+  );
+  --navds-button-color-secondary-background-active: var(
+    --navds-color-action-active
+  );
+
+  /* Tertiary */
+  --navds-button-color-tertiary-text: var(--navds-color-action-default);
+  --navds-button-color-tertiary-text-active: var(--navds-color-text-inverse);
+  --navds-button-color-tertiary-border-hover: var(--navds-color-action-default);
+  --navds-button-color-tertiary-border-focus: var(--navds-color-action-default);
+  --navds-button-color-tertiary-border-active: var(--navds-color-white);
+  --navds-button-color-tertiary-background-active: var(
+    --navds-color-action-active
+  );
+
+  /* Danger */
+  --navds-button-color-danger-text: var(--navds-color-white);
+  --navds-button-color-danger-background: var(--navds-color-danger-default);
+  --navds-button-color-danger-background-hover: var(--navds-color-danger-hover);
+  --navds-button-color-danger-background-active: var(
+    --navds-color-danger-active
+  );
+  --navds-button-color-danger-border-focus: var(--navds-color-white);
+
+  /* Disabled */
+  --navds-button-color-text-disabled: var(--navds-color-text-inverse);
+  --navds-button-color-background-disabled: var(--navds-color-disabled);
+}
+
 .navds-button {
-  display: inline-block;
+  display: inline-flex;
   cursor: pointer;
-  background-color: var(--navds-color-background);
-  color: var(--navds-color-action-default);
-  font: inherit;
   margin: 0;
   text-align: center;
   text-decoration: none;
-  font-size: var(--navds-font-size-small);
-  line-height: var(--navds-font-line-height-small);
-  border-color: var(--navds-color-action-default);
+  border: none;
+  background: none;
   border-radius: 2px;
-  border-style: solid;
-  border-width: 2px;
-
-  /* Padding calculated based on 16px font for 40px tall button */
-  padding: calc(0.5625em - 2px) calc(2em - 2px);
+  min-width: 48px;
+  padding: var(--navds-spacing-3);
 }
 
-.navds-button.navds-button--small {
-  /* Padding calculated based on 16px font for 32px tall button */
-  padding: calc(0.3125em - 2px) calc(1.11em - 2px);
+.navds-button--small {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+  min-width: 32px;
 }
 
 .navds-button:focus {
@@ -28,256 +74,135 @@
   box-shadow: var(--navds-shadow-focus);
 }
 
-/**************************
- * .navds-button--primary *
- **************************/
-
-.navds-button--primary:hover,
-.navds-button--primary:active {
-  color: var(--navds-color-text-inverse);
-  background-color: var(--navds-color-action-hover);
-  border-width: 0;
-
-  /* Padding calculated based on 16px font for 40px tall button */
-  padding: 0.5625em 2em;
+.navds-button__inner {
+  margin: auto;
+  display: flex;
+  align-items: center;
+  gap: var(--navds-spacing-2);
 }
 
-.navds-button--primary:hover.navds-button--small,
-.navds-button--primary:active.navds-button--small {
-  /* Padding calculated based on 16px font for 32px tall button */
-  padding: 0.3125em 1.11em;
+.navds-button svg {
+  font-size: 1.5rem;
 }
 
-.navds-button--primary:active {
-  background-color: var(--navds-color-action-active);
-}
-
-/****************************
- * .navds-button--secondary *
- ****************************/
-
-.navds-button--secondary {
-  border-color: transparent;
-  background-color: transparent;
-}
-
-.navds-button--secondary:hover,
-.navds-button--secondary:focus {
-  border-color: var(--navds-color-action-default);
-}
-
-.navds-button--secondary:active {
-  color: var(--navds-color-text-inverse);
-  border-color: var(--navds-color-action-active);
-  background-color: var(--navds-color-action-active);
+.navds-button--small svg {
+  font-size: 1.25rem;
 }
 
 /*************************
- * .navds-button--action *
- * .navds-button--danger *
+ * .navds-button--primary *
  *************************/
 
-.navds-button--action {
-  background-color: var(--navds-color-action-default);
-  border-color: var(--navds-color-action-default);
+.navds-button--primary {
+  background-color: var(--navds-button-color-primary-background);
+  color: var(--navds-button-color-primary-text);
 }
 
-.navds-button--danger {
-  background-color: var(--navds-color-danger-default);
-  border-color: var(--navds-color-danger-default);
+.navds-button--primary:hover {
+  background-color: var(--navds-button-color-primary-background-hover);
 }
 
-.navds-button--action,
-.navds-button--danger {
-  /* Padding calculated based on 16px font for 40px tall button */
-  padding: 0.5625em 2em;
-  border-width: 0;
-  transform: translateY(calc(-1 * 2px));
-  position: relative;
-  color: var(--navds-color-text-inverse);
+.navds-button--primary:active {
+  background-color: var(--navds-button-color-primary-background-active);
 }
 
-.navds-button--action.navds-button--small,
-.navds-button--danger.navds-button--small {
-  /* Padding calculated based on 16px font for 32px tall button */
-  padding: 0.3125em 1.11em;
-}
-
-.navds-button--action:not(:focus),
-.navds-button--danger:not(:focus) {
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 2px 0 rgba(0, 0, 0, 0.25);
-}
-
-.navds-button--action:hover {
-  background-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);
-}
-
-.navds-button--action:active {
-  background-color: var(--navds-color-action-active);
-}
-
-.navds-button--danger:active {
-  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--danger:focus {
-  color: var(--navds-color-danger-default);
-  background-color: var(--navds-color-background);
-}
-
-.navds-button--danger:focus,
-.navds-button--action:focus {
-  /* Padding calculated based on 16px font for 40px tall button */
-  padding: calc(0.5625em - 2px) calc(2em - 2px);
-  transform: translateY(calc(-1 * 2px));
-  position: relative;
-  border-width: 2px;
-}
-
-.navds-button--action:focus.navds-button--small,
-.navds-button--danger:focus.navds-button--small {
-  /* Padding calculated based on 16px font for 32px tall button */
-  padding: calc(0.3125em - 2px) calc(1.11em - 2px);
-}
-
-.navds-button--action:hover:focus {
-  background-color: var(--navds-color-action-hover);
-}
-
-.navds-button--danger:hover:focus {
-  background-color: var(--navds-color-danger-hover);
-}
-
-.navds-button--action:hover:focus,
-.navds-button--danger:hover:focus {
-  /* Padding calculated based on 16px font for 40px tall button */
-  padding: 0.5625em 2em;
-  border-width: 0;
-  color: var(--navds-color-text-inverse);
-}
-
-.navds-button--action:hover:focus.navds-button--small,
-.navds-button--danger:hover:focus.navds-button--small {
-  /* Padding calculated based on 16px font for 32px tall button */
-  padding: 0.3125em 1.11em;
-}
-
-.navds-button--action:active:focus {
-  color: var(--navds-color-action-active);
-  border-color: var(--navds-color-action-active);
-}
-
-.navds-button--danger:active:focus {
-  color: var(--navds-color-danger-active);
-  border-color: var(--navds-color-danger-active);
-}
-
-.navds-button--action:active:focus,
-.navds-button--danger:active:focus {
-  /* Padding calculated based on 16px font for 40px tall button */
-  padding: calc(0.5625em - 2px) calc(2em - 2px);
-  transform: translateY(0);
-  position: relative;
-  border-width: 2px;
-  background-color: var(--navds-color-background);
-}
-
-.navds-button--action:active:focus.navds-button--small,
-.navds-button--danger:active:focus.navds-button--small {
-  /* Padding calculated based on 16px font for 32px tall button */
-  padding: calc(0.3125em - 2px) calc(1.11em - 2px);
-}
-
-.navds-button--action:hover:focus:active {
-  color: var(--navds-color-text-inverse);
-  background-color: var(--navds-color-action-active);
-}
-
-.navds-button--danger:hover:focus:active {
-  color: var(--navds-color-text-inverse);
-  background-color: var(--navds-color-danger-active);
+.navds-button--primary:focus {
+  box-shadow: inset 0 0 0 1px var(--navds-button-color-primary-border-focus),
+    var(--navds-shadow-focus);
 }
 
 /**************************
- * ::before *
+ * .navds-button--secondary *
  **************************/
 
-.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--secondary {
+  color: var(--navds-button-color-secondary-text);
+  background-color: var(--navds-button-color-secondary-background);
+  box-shadow: inset 0 0 0 2px var(--navds-button-color-secondary-border);
 }
 
-.navds-button--action:hover::before,
-.navds-button--danger:hover::before {
-  bottom: calc(-1 * 3px);
-  height: 3px;
+.navds-button--secondary:hover {
+  color: var(--navds-button-color-secondary-text-hover);
+  background-color: var(--navds-button-color-secondary-background-hover);
+  box-shadow: none;
 }
 
-.navds-button--action:focus::before,
-.navds-button--danger:focus::before {
-  bottom: calc(-1 * 2px);
-  height: 2px;
+.navds-button--secondary:focus {
+  box-shadow: inset 0 0 0 2px var(--navds-button-color-secondary-border),
+    var(--navds-shadow-focus);
 }
 
-.navds-button--action:active::before,
-.navds-button--danger:active::before {
-  bottom: 0;
-  height: 0;
+.navds-button--secondary:active {
+  color: var(--navds-button-color-secondary-text-active);
+  background-color: var(--navds-button-color-secondary-background-active);
+  box-shadow: none;
+}
+
+.navds-button--secondary:focus:hover,
+.navds-button--secondary:focus:active {
+  box-shadow: inset 0 0 0 1px
+      var(--navds-button-color-secondary-border-focus-active-hover),
+    var(--navds-shadow-focus);
+}
+
+/****************************
+ * .navds-button--tertiary *
+ ****************************/
+
+.navds-button--tertiary {
+  color: var(--navds-button-color-tertiary-text);
+}
+
+.navds-button--tertiary:hover {
+  box-shadow: inset 0 0 0 2px var(--navds-button-color-tertiary-border-hover);
+}
+
+.navds-button--tertiary:focus {
+  box-shadow: inset 0 0 0 2px var(--navds-button-color-tertiary-border-focus),
+    var(--navds-shadow-focus);
+}
+
+.navds-button--tertiary:active {
+  color: var(--navds-button-color-tertiary-text-active);
+  background-color: var(--navds-button-color-tertiary-background-active);
+  box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active);
+}
+
+.navds-button--tertiary:active:focus {
+  box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active),
+    var(--navds-shadow-focus);
+}
+
+/*************************
+ * .navds-button--danger *
+ *************************/
+
+.navds-button--danger {
+  background-color: var(--navds-button-color-danger-background);
+  color: var(--navds-button-color-danger-text);
+}
+
+.navds-button--danger:hover {
+  background-color: var(--navds-button-color-danger-background-hover);
+}
+
+.navds-button--danger:active {
+  background-color: var(--navds-button-color-danger-background-active);
+}
+
+.navds-button--danger:focus {
+  box-shadow: inset 0 0 0 1px var(--navds-button-color-danger-border-focus),
+    var(--navds-shadow-focus);
 }
 
 /**************************
  * .navds-button:disabled *
  **************************/
 
-.navds-button:disabled:disabled {
-  /* Padding calculated based on 16px font for 40px tall button */
-  padding: 0.5625em 2em;
-  background-color: var(--navds-color-disabled);
-  color: var(--navds-color-text-inverse);
+.navds-button:disabled {
+  color: var(--navds-button-color-text-disabled);
+  background-color: var(--navds-button-color-background-disabled);
   cursor: not-allowed;
-  border-width: 0;
   box-shadow: none;
   transform: none;
 }
-
-.navds-button:disabled:disabled.navds-button--small {
-  /* Padding calculated based on 16px font for 32px tall button */
-  padding: 0.3125em 1.11em;
-}

@navikt/ds-css/card.css

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

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

@@ -1,10 +1,3 @@
-.navds-copy-to-clipboard {
-  display: inline-flex;
-  align-items: center;
-  column-gap: 0.5em;
-  padding: 0.25em;
-}
-
 .navds-copy-to-clipboard__popover {
-  padding: 0.25rem;
+  padding: var(--navds-spacing-1);
 }

@navikt/ds-css/form/checkbox-group.css

@@ -0,0 +1,13 @@
+.navds-checkbox-group--small > .navds-checkboxes {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.navds-fieldset.navds-checkbox-group--medium > .navds-checkboxes {
+  margin-top: 0;
+}
+
+.navds-fieldset.navds-checkbox-group--medium > .navds-fieldset__error {
+  margin-top: 0;
+}

@navikt/ds-css/form/checkbox.css

@@ -0,0 +1,146 @@
+:root {
+  --navds-checkbox-color-background: var(--navds-color-white);
+  --navds-checkbox-color-border: var(--navds-color-gray-60);
+  --navds-checkbox-color-label-hover: var(--navds-color-blue-50);
+  --navds-checkbox-color-border-hover: var(--navds-color-blue-50);
+  --navds-checkbox-color-background-hover: var(--navds-color-blue-10);
+  --navds-checkbox-color-description: var(--navds-color-gray-80);
+  --navds-checkbox-color-border-checked: var(--navds-color-blue-50);
+  --navds-checkbox-color-background-checked: var(--navds-color-blue-50);
+  --navds-checkbox-color-shadow-error: var(--navds-color-red-50);
+  --navds-checkbox-color-border-error: var(--navds-color-red-50);
+
+  /* Disabled */
+  --navds-checkbox-color-label-disabled: var(--navds-color-gray-40);
+  --navds-checkbox-color-border-disabled: var(--navds-color-gray-60);
+  --navds-checkbox-color-background-disabled: var(--navds-color-gray-10);
+  --navds-checkbox-color-border-checked-disabled: var(--navds-color-gray-40);
+  --navds-checkbox-color-background-checked-disabled: var(
+    --navds-color-gray-40
+  );
+}
+
+.navds-checkbox {
+  position: relative;
+  padding: var(--navds-spacing-3) 0;
+}
+
+.navds-checkbox__input {
+  cursor: pointer;
+  position: absolute;
+  z-index: 1;
+  width: 48px;
+  height: 48px;
+  left: -12px;
+  margin: 0;
+  opacity: 0;
+  top: 0;
+}
+
+.navds-checkbox__label {
+  display: flex;
+  width: fit-content;
+  gap: 12px;
+  cursor: pointer;
+}
+
+.navds-checkbox__description {
+  padding-left: calc(48px - 12px);
+  color: var(--navds-checkbox-color-description);
+}
+
+.navds-checkbox--with-description {
+  padding-bottom: 0;
+}
+
+.navds-checkbox .navds-error-message {
+  margin-top: var(--navds-spacing-3);
+}
+
+.navds-checkbox--with-description .navds-error-message {
+  margin-top: 0;
+}
+
+.navds-checkbox--with-error-message {
+  padding-bottom: var(--navds-spacing-2);
+}
+
+.navds-checkbox__label::before {
+  content: "";
+  background-color: var(--navds-checkbox-color-background);
+  border: 1px solid var(--navds-checkbox-color-border);
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+.navds-checkbox--small {
+  padding: var(--navds-spacing-1) 0;
+}
+
+.navds-checkbox--small > .navds-checkbox__input {
+  width: 24px;
+  height: 24px;
+  top: 2px;
+  left: 0;
+}
+
+.navds-checkbox--small > .navds-checkbox__label::before {
+  margin-top: -2px;
+  margin-bottom: -2px;
+}
+
+.navds-checkbox__input:hover + .navds-checkbox__label {
+  color: var(--navds-checkbox-color-label-hover);
+}
+
+.navds-checkbox__input:hover + .navds-checkbox__label::before {
+  border-color: var(--navds-checkbox-color-border-hover);
+  background-color: var(--navds-checkbox-color-background-hover);
+}
+
+.navds-checkbox__input:focus + .navds-checkbox__label::before {
+  box-shadow: var(--navds-shadow-focus);
+}
+
+.navds-checkbox__input:checked + .navds-checkbox__label::before {
+  background-image: var(--navds-checkmark-image-white);
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: 75%;
+  border: 2px solid var(--navds-checkbox-color-border-checked);
+  background-color: var(--navds-checkbox-color-background-checked);
+}
+
+.navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
+  background-color: white;
+  background-image: var(--navds-checkmark-image-blue);
+}
+
+.navds-checkbox--error
+  > .navds-checkbox__input:not(:hover):not(:focus):not(:disabled):not(:checked)
+  + .navds-checkbox__label::before {
+  box-shadow: 0 0 0 1px var(--navds-checkbox-color-shadow-error);
+  border-color: var(--navds-checkbox-color-border-error);
+}
+
+.navds-checkbox--small .navds-error-message {
+  margin-top: 4px;
+}
+
+.navds-checkbox__input:disabled,
+.navds-checkbox__input:disabled + .navds-checkbox__label {
+  color: var(--navds-checkbox-color-label-disabled);
+  cursor: not-allowed;
+}
+
+.navds-checkbox__input:disabled + .navds-checkbox__label::before {
+  background-color: var(--navds-checkbox-color-background-disabled);
+  border-color: var(--navds-checkbox-color-border-disabled);
+}
+
+.navds-checkbox__input:disabled:checked + .navds-checkbox__label::before {
+  background-color: var(--navds-checkbox-color-background-checked-disabled);
+  border-color: var(--navds-checkbox-color-border-checked-disabled);
+}

@navikt/ds-css/form/confirmation-panel.css

@@ -0,0 +1,98 @@
+:root {
+  --navds-confirmation-panel-color-background: var(
+    --navds-color-warning-background
+  );
+  --navds-confirmation-panel-color-background-checked: var(
+    --navds-color-success-background
+  );
+  --navds-confirmation-panel-color-border-checked: var(
+    --navds-color-success-background
+  );
+  --navds-confirmation-panel-color-background-error: var(
+    --navds-color-error-background
+  );
+  --navds-confirmation-panel-color-checkbox-background-checked-hover: var(
+    --navds-color-green-70
+  );
+  --navds-confirmation-panel-color-checkbox-border-checked-hover: var(
+    --navds-color-green-70
+  );
+  --navds-confirmation-panel-color-checkbox-background-checked: var(
+    --navds-color-green-50
+  );
+  --navds-confirmation-panel-color-checkbox-border-checked: var(
+    --navds-color-green-50
+  );
+  --navds-confirmation-panel-color-checkbox-label-checked: var(
+    --navds-color-darkgray
+  );
+}
+
+.navds-confirmation-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--navds-spacing-4);
+  padding: var(--navds-spacing-4);
+  border-radius: 4px;
+  background-color: var(--navds-confirmation-panel-color-background);
+  transition: background-color linear 100ms;
+}
+
+.navds-confirmation-panel__content {
+  max-width: 80ch;
+}
+
+.navds-confirmation-panel--small {
+  padding: var(--navds-spacing-3);
+  gap: var(--navds-spacing-2);
+}
+
+.navds-confirmation-panel--checked {
+  background-color: var(--navds-confirmation-panel-color-background-checked);
+  border-color: var(--navds-confirmation-panel-color-border-checked);
+}
+
+.navds-confirmation-panel--error {
+  background-color: var(--navds-confirmation-panel-color-background-error);
+  border: 1px solid transparent;
+}
+
+.navds-confirmation-panel
+  .navds-checkbox__input:hover
+  + .navds-checkbox__label {
+  text-decoration: underline;
+}
+
+.navds-confirmation-panel--checked
+  .navds-checkbox__input:hover
+  + .navds-checkbox__label {
+  color: var(--navds-confirmation-panel-color-checkbox-label-checked);
+}
+
+.navds-confirmation-panel--checked
+  .navds-checkbox__input
+  + .navds-checkbox__label::before {
+  transition: none;
+  background-color: var(
+    --navds-confirmation-panel-color-checkbox-background-checked
+  );
+  border-color: var(--navds-confirmation-panel-color-checkbox-border-checked);
+  background-image: var(--navds-checkmark-image-white);
+}
+
+.navds-confirmation-panel--checked
+  .navds-checkbox__input:hover
+  + .navds-checkbox__label::before {
+  background-color: var(
+    --navds-confirmation-panel-color-checkbox-background-checked-hover
+  );
+  border-color: var(
+    --navds-confirmation-panel-color-checkbox-border-checked-hover
+  );
+}
+
+.navds-confirmation-panel--checked
+  .navds-checkbox__input:focus:hover
+  + .navds-checkbox__label::before {
+  background-image: var(--navds-checkmark-image-white);
+}

@navikt/ds-css/form/error-message.css

@@ -0,0 +1,8 @@
+:root {
+  --navds-error-message-color-text: var(--navds-color-text-error);
+}
+
+.navds-error-message {
+  display: block;
+  color: var(--navds-error-message-color-text);
+}

@navikt/ds-css/form/error-summary.css

@@ -0,0 +1,30 @@
+:root {
+  --navds-error-summary-color-background: var(--navds-color-white);
+  --navds-error-summary-color-border: var(--navds-color-error-border);
+}
+
+.navds-error-summary {
+  background-color: var(--navds-error-summary-color-background);
+  padding: var(--navds-spacing-4);
+  border: 4px solid var(--navds-error-summary-color-border);
+}
+
+.navds-error-summary--small {
+  padding: var(--navds-spacing-2);
+}
+
+.navds-error-summary:focus {
+  box-shadow: var(--navds-shadow-focus);
+  outline: none;
+}
+
+.navds-error-summary__list {
+  margin: 1rem 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.navds-error-summary--small > .navds-error-summary__list {
+  margin: 0.5rem 0;
+}

@navikt/ds-css/form/fieldset.css

@@ -0,0 +1,19 @@
+.navds-fieldset {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-width: 0;
+}
+
+.navds-fieldset > :not(:first-child):not(:empty) {
+  margin-top: 8px;
+}
+
+.navds-fieldset--small > :not(:first-child):not(:empty) {
+  margin-top: 4px;
+}
+
+/* Applied when hideLegend is applied to fieldset */
+.navds-fieldset > .sr-only + :not(:first-child):not(:empty) {
+  margin-top: 0;
+}

@navikt/ds-css/form/form.css

@@ -0,0 +1,15 @@
+.navds-form-field > :not(:first-child):not(:empty),
+.navds-form-field > input:not(:first-child) {
+  margin-top: 8px;
+}
+
+.navds-form-field--small > :not(:first-child):not(:empty),
+.navds-form-field--small > input:not(:first-child) {
+  margin-top: 4px;
+}
+
+/* Applied when hideLabel is applied to form-element */
+.navds-form-field > .sr-only + :not(:first-child):not(:empty),
+.navds-form-field > .sr-only + input:not(:first-child) {
+  margin-top: 0;
+}

@navikt/ds-css/form/index.css

@@ -0,0 +1,16 @@
+/*
+  Order matters; rearrange with care
+*/
+@import "fieldset.css";
+@import "form.css";
+@import "error-summary.css";
+@import "checkbox.css";
+@import "checkbox-group.css";
+@import "confirmation-panel.css";
+@import "error-message.css";
+@import "radio.css";
+@import "radio-group.css";
+@import "select.css";
+@import "text-field.css";
+@import "textarea.css";
+@import "search-field.css";

@navikt/ds-css/form/radio-group.css

@@ -0,0 +1,13 @@
+.navds-radio-group--small > .navds-radio-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.navds-fieldset.navds-radio-group--medium > .navds-radio-buttons {
+  margin-top: 0;
+}
+
+.navds-fieldset.navds-radio-group--medium > .navds-fieldset__error {
+  margin-top: 0;
+}

@navikt/ds-css/form/radio.css

@@ -0,0 +1,151 @@
+:root {
+  --navds-radio-color-description: var(--navds-color-gray-80);
+  --navds-radio-color-background: var(--navds-color-white);
+  --navds-radio-color-border: var(--navds-color-gray-60);
+  --navds-radio-color-label-hover: var(--navds-color-blue-50);
+  --navds-radio-color-border-hover: var(--navds-color-blue-50);
+  --navds-radio-color-background-hover: var(--navds-color-blue-10);
+  --navds-radio-color-border-checked: var(--navds-color-blue-50);
+  --navds-radio-color-shadow-checked: var(--navds-color-blue-50);
+  --navds-radio-color-shadow-checked-focus: var(--navds-color-blue-80);
+  --navds-radio-color-shadow-background-checked-focus: var(--navds-color-white);
+  --navds-radio-color-shadow-dot-checked-focus: var(--navds-color-blue-50);
+  --navds-radio-color-shadow-error: var(--navds-color-red-50);
+  --navds-radio-color-border-error: var(--navds-color-red-50);
+
+  /* Disabled */
+  --navds-radio-color-background-disabled: var(--navds-color-gray-10);
+  --navds-radio-color-border-disabled: var(--navds-color-gray-60);
+  --navds-radio-color-label-disabled: var(--navds-color-gray-40);
+  --navds-radio-color-background-disabled-checked: var(--navds-color-gray-40);
+  --navds-radio-color-border-disabled-checked: var(--navds-color-gray-40);
+  --navds-radio-color-shadow-disabled-checked: var(--navds-color-gray-40);
+}
+
+.navds-radio {
+  position: relative;
+  padding: var(--navds-spacing-3) 0;
+}
+
+.navds-radio--with-description .navds-error-message {
+  margin-top: 0;
+}
+
+.navds-radio .navds-error-message {
+  margin-top: var(--navds-spacing-3);
+}
+
+.navds-radio__input {
+  cursor: pointer;
+  position: absolute;
+  z-index: 1;
+  width: 48px;
+  height: 48px;
+  left: -12px;
+  margin: 0;
+  opacity: 0;
+  top: 0;
+}
+
+.navds-radio__label {
+  display: flex;
+  width: fit-content;
+  gap: 12px;
+  min-width: 48px;
+  cursor: pointer;
+}
+
+.navds-radio__description {
+  padding-left: calc(48px - 12px);
+  color: var(--navds-radio-color-description);
+}
+
+.navds-radio--with-description {
+  padding-bottom: 0;
+}
+
+.navds-radio--with-error-message {
+  padding-bottom: var(--navds-spacing-2);
+}
+
+.navds-radio__label::before {
+  content: "";
+  background-color: var(--navds-radio-color-background);
+  border: 1px solid var(--navds-radio-color-border);
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 4px;
+  flex-shrink: 0;
+  border-radius: 50%;
+}
+
+.navds-radio--small {
+  padding: var(--navds-spacing-1) 0;
+}
+
+.navds-radio--small > .navds-radio__input {
+  width: 24px;
+  height: 24px;
+  top: 2px;
+  left: 0;
+}
+
+.navds-radio--small > .navds-radio__label::before {
+  margin-top: -2px;
+  margin-bottom: -2px;
+}
+
+.navds-radio__input:hover + .navds-radio__label {
+  color: var(--navds-radio-color-label-hover);
+}
+
+.navds-radio__input:hover + .navds-radio__label::before {
+  border-color: var(--navds-radio-color-border-hover);
+  background-color: var(--navds-radio-color-background-hover);
+}
+
+.navds-radio__input:focus + .navds-radio__label::before {
+  box-shadow: var(--navds-shadow-focus);
+}
+
+.navds-radio__input:checked + .navds-radio__label::before {
+  border: 2px solid var(--navds-radio-color-border-checked);
+  box-shadow: 0 0 0 3px #fff inset,
+    0 0 0 2rem var(--navds-radio-color-shadow-checked) inset;
+}
+
+.navds-radio__input:checked:focus + .navds-radio__label::before {
+  transition: box-shadow 200ms cubic-bezier(0.465, 0.183, 0.153, 0.946);
+  box-shadow: 0 0 0 3px var(--navds-radio-color-shadow-checked-focus),
+    0 0 0 3px var(--navds-radio-color-shadow-background-checked-focus) inset,
+    0 0 0 2rem var(--navds-radio-color-shadow-dot-checked-focus) inset;
+}
+
+.navds-radio--error
+  > .navds-radio__input:not(:hover):not(:focus):not(:disabled):not(:checked)
+  + .navds-radio__label::before {
+  box-shadow: 0 0 0 1px var(--navds-radio-color-shadow-error);
+  border-color: var(--navds-radio-color-border-error);
+}
+
+.navds-radio--small .navds-error-message {
+  margin-top: 4px;
+}
+
+.navds-radio__input:disabled,
+.navds-radio__input:disabled + .navds-radio__label {
+  color: var(--navds-radio-color-label-disabled);
+  cursor: not-allowed;
+}
+
+.navds-radio__input:disabled + .navds-radio__label::before {
+  background-color: var(--navds-radio-color-background-disabled);
+  border-color: var(--navds-radio-color-border-disabled);
+}
+
+.navds-radio__input:disabled:checked + .navds-radio__label::before {
+  background-color: var(--navds-radio-color-background-disabled-checked);
+  border-color: var(--navds-radio-color-border-disabled-checked);
+  box-shadow: 0 0 0 3px #fff inset,
+    0 0 0 2rem var(--navds-radio-color-shadow-disabled-checked) inset;
+}

@navikt/ds-css/form/search-field.css

@@ -0,0 +1,45 @@
+:root {
+  --navds-search-field-color-shadow-error: var(--navds-color-red-50);
+  --navds-search-field-color-border-error: var(--navds-color-red-50);
+  --navds-search-field-color-clearbutton-border: var(--navds-color-gray-60);
+}
+
+.navds-search-field__input-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.navds-form-field--small .navds-search-field__input {
+  padding: 0.15rem;
+  min-height: 32px;
+}
+
+.navds-search-field__input-wrapper > *:not(:first-child):not(:last-child) {
+  border-radius: 0;
+}
+
+.navds-search-field__input-wrapper > :first-child {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.navds-search-field__input-wrapper > :last-child {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.navds-search-field__input-wrapper :focus {
+  z-index: var(--navds-z-index-focus);
+}
+
+.navds-search-field__button,
+.navds-search-field__clear-button {
+  flex-shrink: 0;
+}
+
+.navds-search-field--error
+  .navds-search-field__input:not(:hover):not(:focus):not(:disabled) {
+  box-shadow: 0 0 0 1px var(--navds-search-field-color-shadow-error) inset;
+  border-color: var(--navds-search-field-color-border-error);
+}

@navikt/ds-css/form/select.css

@@ -0,0 +1,70 @@
+:root {
+  --navds-select-color-background: var(--navds-color-white);
+  --navds-select-color-border: var(--navds-color-gray-60);
+  --navds-select-color-border-hover: var(--navds-color-blue-50);
+  --navds-select-color-border-error: var(--navds-color-red-50);
+  --navds-select-color-shadow-error: var(--navds-color-red-50);
+  --navds-select-color-border-disabled: var(--navds-color-gray-40);
+  --navds-select-color-background-disabled: var(--navds-color-gray-10);
+  --navds-select-color-text-disabled: var(--navds-color-darkgray);
+}
+
+.navds-select__input {
+  appearance: none;
+  padding: 0.5rem;
+  background-color: var(--navds-select-color-background);
+  border-radius: 4px;
+  border: 1px solid var(--navds-select-color-border);
+  width: 100%;
+  box-sizing: border-box;
+  min-height: 48px;
+  display: inline-block;
+  position: relative;
+  padding-right: 2.5rem;
+}
+
+.navds-select__input:hover {
+  border-color: var(--navds-select-color-border-hover);
+}
+
+.navds-select__input:focus {
+  outline: none;
+  box-shadow: var(--navds-shadow-focus);
+}
+
+.navds-select__container {
+  position: relative;
+  display: flex;
+  width: 100%;
+  align-items: center;
+}
+
+.navds-select__chevron {
+  position: absolute;
+  font-size: 1rem;
+  right: 0.5rem;
+  pointer-events: none;
+}
+
+.navds-form-field--small .navds-select__input {
+  min-height: 32px;
+  padding: 0.25rem;
+}
+
+/**
+  Error handling
+*/
+.navds-select--error > * select:not(:hover):not(:focus):not(:disabled) {
+  box-shadow: 0 0 0 1px var(--navds-select-color-shadow-error);
+  border-color: var(--navds-select-color-border-error);
+}
+
+/* Disabled handling */
+.navds-select__input:disabled,
+.navds-select__input[read-only] {
+  background-color: var(--navds-select-color-background-disabled);
+  border-color: var(--navds-select-color-border-disabled);
+  box-shadow: none;
+  color: var(--navds-select-color-text-disabled);
+  cursor: not-allowed;
+}

@navikt/ds-css/form/text-field.css

@@ -0,0 +1,63 @@
+:root {
+  --navds-text-field-color-background: var(--navds-color-white);
+  --navds-text-field-color-border: var(--navds-color-gray-60);
+  --navds-text-field-color-border-hover: var(--navds-color-blue-50);
+  --navds-text-field-color-border-error: var(--navds-color-red-50);
+  --navds-text-field-color-shadow-error: var(--navds-color-red-50);
+  --navds-text-field-color-border-disabled: var(--navds-color-gray-40);
+  --navds-text-field-color-background-disabled: var(--navds-color-gray-10);
+  --navds-text-field-color-text-disabled: var(--navds-color-darkgray);
+}
+
+.navds-text-field__input {
+  appearance: none;
+  padding: 0.5rem;
+  background-color: var(--navds-text-field-color-background);
+  border-radius: 4px;
+  border: 1px solid var(--navds-text-field-color-border);
+  min-height: 48px;
+  width: 100%;
+}
+
+.navds-form-field--small > .navds-text-field__input {
+  padding: 0.15rem;
+  min-height: 32px;
+}
+
+.navds-text-field__input:hover {
+  border-color: var(--navds-text-field-color-border-hover);
+}
+
+.navds-text-field__input:focus {
+  outline: none;
+  box-shadow: var(--navds-shadow-focus);
+}
+
+/**
+  Error handling
+*/
+.navds-text-field--error
+  > .navds-text-field__input:not(:hover):not(:focus):not(:disabled) {
+  box-shadow: 0 0 0 1px var(--navds-text-field-color-shadow-error);
+  border-color: var(--navds-text-field-color-border-error);
+}
+
+/* Disabled handling */
+.navds-text-field__input:disabled,
+.navds-text-field__input[readonly] {
+  background-color: var(--navds-text-field-color-background-disabled);
+  border-color: var(--navds-text-field-color-border-disabled);
+  box-shadow: none;
+  color: var(--navds-text-field-color-text-disabled);
+  cursor: not-allowed;
+}
+
+/**
+  * Removes default search icon
+  */
+.navds-text-field__input[type="search"]::-webkit-search-decoration,
+.navds-text-field__input[type="search"]::-webkit-search-cancel-button,
+.navds-text-field__input[type="search"]::-webkit-search-results-button,
+.navds-text-field__input[type="search"]::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+}

@navikt/ds-css/form/textarea.css

@@ -0,0 +1,88 @@
+:root {
+  --navds-textarea-color-background: var(--navds-color-white);
+  --navds-textarea-color-border: var(--navds-color-gray-60);
+  --navds-textarea-color-border-hover: var(--navds-color-blue-50);
+  --navds-textarea-color-border-error: var(--navds-color-red-50);
+  --navds-textarea-color-shadow-error: var(--navds-color-red-50);
+  --navds-textarea-color-counter-text: var(--navds-color-gray-40);
+  --navds-textarea-color-counter-text-error: var(--navds-color-red-50);
+  --navds-textarea-color-text-disabled: var(--navds-color-darkgray);
+  --navds-textarea-color-border-disabled: var(--navds-color-gray-40);
+  --navds-textarea-color-background-disabled: var(--navds-color-gray-10);
+}
+
+.navds-textarea__wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.navds-textarea__input {
+  appearance: none;
+  padding: var(--navds-spacing-2);
+  background-color: var(--navds-textarea-color-background);
+  border-radius: 4px;
+  border: 1px solid var(--navds-textarea-color-border);
+  resize: none;
+  width: 100%;
+  transition: height 0.1s ease-out;
+  display: block;
+  min-height: 48px;
+}
+
+.navds-textarea--counter {
+  padding-bottom: var(--navds-spacing-8);
+}
+
+.navds-textarea__input:hover {
+  border-color: var(--navds-textarea-color-border-hover);
+}
+
+.navds-textarea__input:focus {
+  outline: none;
+  box-shadow: var(--navds-shadow-focus);
+}
+
+.navds-form-field--small .navds-textarea__input {
+  padding: var(--navds-spacing-1);
+  min-height: 32px;
+}
+
+.navds-form-field--small .navds-textarea--counter.navds-textarea__input {
+  padding-bottom: var(--navds-spacing-7);
+}
+
+.navds-textarea__counter {
+  pointer-events: none;
+  color: var(--navds-textarea-color-counter-text);
+  font-style: italic;
+  position: absolute;
+  text-align: right;
+  left: var(--navds-spacing-3);
+  right: var(--navds-spacing-3);
+  bottom: var(--navds-spacing-2);
+}
+
+.navds-textarea__counter--error {
+  color: var(--navds-textarea-color-counter-text-error);
+}
+
+/**
+  Error handling
+*/
+.navds-textarea--error
+  .navds-textarea__input:not(:hover):not(:focus):not(:disabled) {
+  box-shadow: 0 0 0 1px var(--navds-textarea-color-shadow-error);
+  border-color: var(--navds-textarea-color-border-error);
+}
+
+/*
+  Disabled handling
+ */
+.navds-textarea__input:disabled,
+.navds-textarea__input[readonly] {
+  background-color: var(--navds-textarea-color-background-disabled);
+  border-color: var(--navds-textarea-color-border-disabled);
+  box-shadow: none;
+  color: var(--navds-textarea-color-text-disabled);
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,76 @@
+:root {
+  --navds-guide-panel-color-background: var(--navds-color-background);
+  --navds-guide-panel-color-border: var(--navds-color-blue-40);
+  --navds-guide-panel-color-illustration-background: var(--navds-color-blue-20);
+}
+
+/**
+ * GuidePanel component
+ */
+.navds-guide-panel {
+  position: relative;
+  padding-left: 2.5rem;
+}
+
+.navds-guide-panel__content {
+  background-color: var(--navds-guide-panel-color-background);
+  border-radius: 4px;
+  border: 2px solid var(--navds-guide-panel-color-border);
+  min-height: 7.25rem;
+  padding: 1.5rem;
+  padding-left: 3.5rem;
+}
+
+.navds-guide-panel--poster {
+  padding-left: 0;
+  padding-top: 3.125rem;
+}
+
+.navds-guide-panel--poster .navds-guide-panel__content {
+  padding: 2rem;
+  padding-top: 4.25rem;
+}
+
+.navds-guide-panel .navds-guide {
+  position: absolute;
+  top: 1rem;
+  transform: translateX(-50%);
+}
+
+.navds-guide-panel--poster .navds-guide {
+  left: 50%;
+  top: 0;
+}
+
+/**
+ * Guide component
+ */
+.navds-guide {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Guide illustration frame */
+.navds-guide__illustration {
+  background: var(--navds-guide-panel-color-illustration-background);
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.navds-guide__illustration svg,
+.navds-guide__illustration img {
+  height: 100%;
+  width: 100%;
+}
+
+/* Illustration sizes */
+.navds-guide__illustration--small {
+  height: 5rem;
+  width: 5rem;
+}
+
+.navds-guide__illustration--medium {
+  height: 6.25rem;
+  width: 6.25rem;
+}

@navikt/ds-css/help-text.css

@@ -0,0 +1,54 @@
+:root {
+  --navds-help-text-color-button-background: transparent;
+  --navds-help-text-color-icon: var(--navds-color-blue-50);
+  --navds-help-text-color-icon-hover: var(--navds-color-white);
+  --navds-help-text-color-icon-background-hover: var(--navds-color-blue-50);
+  --navds-help-text-color-icon-shadow-hover: var(--navds-color-blue-50);
+  --navds-help-text-color-icon-focus: var(--navds-color-white);
+  --navds-help-text-color-icon-background-focus: var(--navds-color-blue-50);
+  --navds-help-text-color-icon-shadow-focus: var(--navds-color-blue-80);
+  --navds-help-text-color-popover-background: var(--navds-color-lightblue-10);
+}
+
+.navds-help-text__button {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  cursor: pointer;
+  background-color: var(--navds-help-text-color-button-background);
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.navds-help-text__button:focus {
+  outline: none;
+}
+
+.navds-help-text__icon {
+  border-radius: 50%;
+  font-size: 1.5rem;
+  color: var(--navds-help-text-color-icon);
+}
+
+.navds-help-text__button:hover > .navds-help-text__icon {
+  color: var(--navds-help-text-color-icon-hover);
+  background: var(--navds-help-text-color-icon-background-hover);
+  box-shadow: 0 0 0 2px var(--navds-help-text-color-icon-shadow-hover);
+}
+
+.navds-help-text__button:focus > .navds-help-text__icon {
+  outline: none;
+  color: var(--navds-help-text-color-icon-focus);
+  background: var(--navds-help-text-color-icon-background-focus);
+  box-shadow: 0 0 0 3px var(--navds-help-text-color-icon-shadow-focus);
+}
+
+.navds-help-text__popover > .navds-popover__arrow::before {
+  background-color: var(--navds-help-text-color-popover-background);
+}
+
+.navds-help-text__popover.navds-popover {
+  background-color: var(--navds-help-text-color-popover-background);
+}

@navikt/ds-css/index.css

@@ -1,16 +1,26 @@
 @import "baseline/baseline.css";
+@import "typography.css";
+@import "grid.css";
+
 @import "accordion.css";
-@import "accordion-anchor-menu.css";
 @import "accordion-menu.css";
 @import "alert.css";
 @import "button.css";
 @import "content-container.css";
 @import "copy-to-clipboard.css";
-@import "grid.css";
 @import "internal-header.css";
-@import "layouts.css";
+@import "guide-panel.css";
+@import "form/index.css";
+@import "help-text.css";
 @import "link.css";
+@import "loader.css";
 @import "modal.css";
 @import "popover.css";
 @import "tag.css";
-@import "typography.css";
+@import "panel.css";
+@import "link-panel.css";
+@import "speech-bubble.css";
+
+/* Navno spesific packages */
+@import "page-header.css";
+@import "card.css";

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

@@ -1,72 +1,66 @@
+:root {
+  --navds-internal-header-color-background: var(--navds-color-darkgray);
+  --navds-internal-header-color-border: var(--navds-color-gray-40);
+  --navds-internal-header-color-text: var(--navds-color-text-inverse);
+}
+
 /**************************
  * .navds-header *
  **************************/
 
-.navds-header {
+.navds-interal-header {
   display: flex;
   align-items: center;
-  background: var(--navds-color-darkgray);
-  color: white;
+  background: var(--navds-internal-header-color-background);
+  color: var(--navds-internal-header-color-text);
   max-width: 100vw;
   min-height: 50px;
 }
 
-.navds-header__column {
+.navds-interal-header__column {
   display: flex;
   align-items: center;
 }
 
 /**************************
-  * .navds-header__title *
+  * .navds-interal-header__title *
   **************************/
 
-.navds-header__title {
-  padding: 0 1.5rem 0 1.5rem;
-  border-right: 1px solid var(--navds-color-gray-40);
+.navds-interal-header__title {
+  padding: 0 var(--navds-spacing-6);
+  border-right: 1px solid var(--navds-internal-header-color-border);
   display: flex;
   align-self: stretch;
   align-items: center;
   text-decoration: none;
   margin: 0;
-  color: var(--navds-color-text-inverse);
-  font-size: var(--navds-font-size-medium);
-  font-weight: var(--navds-font-weight-bold);
-  line-height: var(--navds-font-line-height-medium);
+  color: var(--navds-internal-header-color-text);
 }
 
-.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 {
-  color: var(--navds-color-text-inverse);
-  padding: 0 1.5rem 0 1.5rem;
+.navds-interal-header__user {
+  color: var(--navds-internal-header-color-text);
+  padding: 0 var(--navds-spacing-6);
   margin-left: auto;
-  border-left: 1px solid var(--navds-color-gray-40);
+  border-left: 1px solid var(--navds-internal-header-color-border);
   display: flex;
   align-self: stretch;
   align-items: center;
 }
 
-.navds-header__name {
-  margin-right: 1rem;
-  font-size: var(--navds-font-size-small);
-  font-weight: var(--navds-font-weight-bold);
-  line-height: var(--navds-font-line-height-small);
-}
-
-.navds-header__ident {
-  font-size: var(--navds-font-size-xs);
-  font-weight: var(--navds-font-weight-bold);
-  line-height: var(--navds-font-line-height-xs);
+.navds-interal-header__name.navds-body-short {
+  margin-right: var(--navds-spacing-4);
 }

@navikt/ds-css/layouts.css

@@ -1,357 +0,0 @@
-/*****************
- * .navds-layout *
- *****************/
-
-.navds-layout__container {
-  display: grid;
-  grid-gap: var(--navds-grid-gutter-small);
-  grid-template-columns: repeat(12, minmax(0, 1fr));
-  margin-right: auto;
-  margin-left: auto;
-}
-
-.navds-layout__container--1-columns,
-.navds-layout__container--2-columns {
-  max-width: 60rem;
-}
-
-.navds-layout__container--3-columns {
-  max-width: 79.5rem;
-}
-
-.navds-layout__section--white > * {
-  background: white;
-}
-
-.navds-layout__section--padding > * {
-  padding: var(--navds-layout-padding-small);
-}
-
-.navds-layout__section > *:not(:last-child) {
-  margin-bottom: var(--navds-layout-padding-small);
-}
-
-.navds-layout__section--left,
-.navds-layout__section--main,
-.navds-layout__section--right {
-  grid-column: span 12;
-}
-
-@media (min-width: 448px) {
-  .navds-layout__container {
-    grid-gap: var(--navds-grid-gutter-medium-and-larger);
-  }
-
-  .navds-layout__section > *:not(:last-child) {
-    margin-bottom: var(--navds-grid-gutter-medium-and-larger);
-  }
-
-  .navds-layout__section--padding.navds-layout__section--left > *,
-  .navds-layout__section--padding.navds-layout__section--main > *,
-  .navds-layout__section--padding.navds-layout__section--right > * {
-    padding: var(--navds-layout-padding-medium-and-larger);
-  }
-}
-
-@media (min-width: 648px) {
-  /* prettier-ignore */
-  .navds-layout__container--2-columns > .navds-layout__section--left.navds-layout__section--sticky {
-    /* TEMP Solution until dekratøren has updated */
-    --navds-sidebar-sticky-offset: var(--decorator-sticky-offset);
-
-    top: calc(
-      var(--navds-grid-gutter-small) + var(--navds-sidebar-sticky-offset)
-    );
-    position: sticky;
-    max-height: calc(
-      100vh - var(--navds-grid-gutter-small) * 2 -
-        var(--navds-sidebar-sticky-offset)
-    );
-    overflow-y: auto;
-  }
-
-  .navds-layout__container {
-    grid-gap: var(--navds-grid-gutter-medium-and-larger);
-  }
-
-  .navds-layout__section--padding.navds-layout__section--right > * {
-    padding: var(--navds-layout-padding-small);
-  }
-
-  /* prettier-ignore */
-  .navds-layout__container--2-columns > .navds-layout__section--padding.navds-layout__section--left > * {
-    padding: var(--navds-layout-padding-small);
-  }
-
-  .navds-layout__container--1-columns > .navds-layout__section--main {
-    grid-column: span 10;
-  }
-
-  .navds-layout__container--2-columns > .navds-layout__section--left,
-  .navds-layout__container--2-columns > .navds-layout__section--right {
-    grid-row: 1;
-    grid-column: span 4;
-  }
-
-  .navds-layout__container--2-columns > .navds-layout__section--main {
-    grid-row: 1;
-    grid-column: span 8;
-  }
-
-  .navds-layout__container--3-columns > .navds-layout__section--left {
-    grid-row: 1;
-    grid-column: span 8;
-  }
-
-  .navds-layout__container--3-columns > .navds-layout__section--main {
-    grid-row: 2;
-    grid-column: span 8;
-  }
-
-  .navds-layout__container--3-columns > .navds-layout__section--right {
-    grid-column: span 4;
-    grid-row: 1 / span 2;
-  }
-}
-
-@media (min-width: 960px) {
-  /* prettier-ignore */
-  .navds-layout__container--3-columns > .navds-layout__section--left.navds-layout__section--sticky {
-    /* TEMP Solution until dekratøren has updated */
-    --navds-sidebar-sticky-offset: var(--decorator-sticky-offset);
-
-    top: calc(
-      var(--navds-grid-gutter-small) + var(--navds-sidebar-sticky-offset)
-    );
-    position: sticky;
-    max-height: calc(
-      100vh - var(--navds-grid-gutter-small) * 2 -
-        var(--navds-sidebar-sticky-offset)
-    );
-    overflow-y: auto;
-  }
-
-  .navds-layout__section--padding.navds-layout__section--left > * {
-    padding: var(--navds-layout-padding-small);
-  }
-
-  .navds-layout__container--1-columns > .navds-layout__section--main {
-    grid-column: span 8;
-  }
-
-  .navds-layout__container--3-columns > .navds-layout__section--left {
-    grid-row: 1;
-    grid-column: span 3;
-  }
-
-  .navds-layout__container--3-columns > .navds-layout__section--main {
-    grid-row: 1;
-    grid-column: span 6;
-  }
-
-  .navds-layout__container--3-columns > .navds-layout__section--right {
-    grid-row: 1;
-    grid-column: span 3;
-  }
-}
-
-/*************************
- * .navds-layout__header *
- ************************/
-
-.navds-layout__header {
-  background: var(--navds-layout-background-white);
-}
-
-.navds-layout__header-content {
-  grid-column: span 12;
-}
-
-.navds-layout__header-title {
-  margin: 0.25rem 0.85rem;
-}
-
-@media (min-width: 448px) {
-  .navds-layout__header-title {
-    margin: 0.25rem 0;
-  }
-}
-
-/*************************
- * .navds-layout__body *
- ************************/
-
-.navds-layout__body {
-  background: var(--navds-layout-background-gray);
-  scroll-margin-block: 2rem;
-}
-
-.navds-layout__body--white {
-  background: var(--navds-layout-background-white);
-}
-
-@media (min-width: 648px) {
-  .navds-layout__body--2-columns.navds-layout__body--padding {
-    padding-top: 3rem;
-  }
-}
-
-@media (min-width: 960px) {
-  .navds-layout__body--3-columns.navds-layout__body--padding {
-    padding-top: 3rem;
-  }
-}
-
-/*************************
- * .navds-layout__panel *
- ************************/
-
-.navds-layout__panel {
-  width: 100%;
-  max-width: 100%;
-  position: relative;
-  display: inline-block;
-  padding: var(--navds-layout-padding-small);
-  background: white;
-  padding-top: 2.5rem;
-}
-
-.navds-layout__panel--icon-margin {
-  margin-top: 2rem;
-}
-
-.navds-layout__panel:not(:last-child) {
-  margin-bottom: var(--navds-grid-gutter-small);
-}
-
-.navds-layout__panel--highlight {
-  box-shadow: rgb(102, 164, 220) 0 0 0 0.15rem;
-}
-
-.navds-layout__panel-content {
-  margin-top: 1.25rem;
-}
-
-.navds-layout__panel-icon {
-  position: absolute;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  top: -2rem;
-  left: 0;
-}
-
-.navds-layout__panel-icon svg,
-.navds-layout__panel-icon img {
-  background: #c7dbed;
-  border-radius: 2rem;
-  padding: 1rem;
-  height: 4rem;
-  width: 4rem;
-}
-
-.navds-layout__panel-title {
-  margin: 0.5rem 0;
-}
-
-.navds-layout__panel-copy {
-  display: flex;
-  align-items: center;
-  font-weight: 600;
-  font-size: 14px;
-}
-
-.navds-layout__panel-copy + .navds-copy-to-clipboard__popover {
-  background-color: var(--navds-color-gray-90);
-  color: var(--navds-color-white);
-  font-size: 14px;
-}
-
-.navds-layout__panel-popover-content {
-  margin: 0.5rem;
-}
-
-.navds-layout__panel-copy-anchor:hover {
-  text-decoration: underline;
-}
-
-.navds-layout__panel-anchor {
-  position: relative;
-  top: -2.5rem;
-}
-
-.navds-layout__panel-anchor--child {
-  position: absolute;
-}
-
-.navds-layout__panel-anchor--child--icon {
-  position: absolute;
-  margin-top: -2rem;
-}
-
-@media (min-width: 448px) {
-  .navds-layout__panel {
-    padding: var(--navds-layout-padding-medium-and-larger);
-  }
-
-  .navds-layout__panel:not(:last-child) {
-    margin-bottom: var(--navds-grid-gutter-medium-and-larger);
-  }
-}
-
-@media (min-width: 448px) and (max-width: 959px) {
-  .navds-layout__section .navds-accordion-anchor-menu__title {
-    margin-left: 2.5rem;
-    margin-right: 2.5rem;
-  }
-  .navds-layout__section .navds-accordion-menu-item,
-  .navds-layout__section
-    .navds-accordion-menu-collapsable
-    .navds-accordion-menu-collapsable__button {
-    padding-left: 2.5rem;
-    padding-right: 2.5rem;
-  }
-
-  .navds-layout__section
-    .navds-accordion-menu-collapsable
-    .navds-accordion-menu-item,
-  .navds-layout__section
-    .navds-accordion-menu-collapsable
-    .navds-accordion-menu-collapsable
-    .navds-accordion-menu-collapsable__button {
-    padding-left: 3.5rem;
-    padding-right: 3.5rem;
-  }
-
-  .navds-layout__section
-    .navds-accordion-menu-collapsable
-    .navds-accordion-menu-collapsable
-    .navds-accordion-menu-item,
-  .navds-layout__section
-    .navds-accordion-menu-collapsable
-    .navds-accordion-menu-collapsable
-    .navds-accordion-menu-collapsable
-    .navds-accordion-menu-collapsable__button {
-    padding-left: 4.5rem;
-    padding-right: 4.5rem;
-  }
-}
-
-@media (min-width: 648px) {
-  /* prettier-ignore */
-  .navds-layout__container--2-columns .navds-layout__panel--icon-margin:first-child {
-    margin-top: 0;
-  }
-}
-
-@media (min-width: 960px) {
-  /* prettier-ignore */
-  .navds-layout__container--3-columns .navds-layout__panel--icon-margin:first-child {
-    margin-top: 0;
-  }
-
-  .navds-layout__panel--icon-margin:not(:first-child) {
-    margin-top: 2rem;
-  }
-}

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

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

@navikt/ds-css/link.css

@@ -1,10 +1,30 @@
+:root {
+  --navds-link-color-text: var(--navds-color-text-link);
+  --navds-link-color-text-focus: var(--navds-color-text-inverse);
+  --navds-link-color-text-active: var(--navds-color-text-inverse);
+  --navds-link-color-background-focus: var(--navds-text-focus);
+  --navds-link-color-background-active: var(--navds-text-focus);
+  --navds-link-color-icon: var(--navds-color-text-link);
+  --navds-link-color-icon-focus: var(--navds-color-text-inverse);
+  --navds-link-color-on-info-background: var(--navds-color-text-primary);
+  --navds-link-color-on-error-background: var(--navds-color-text-primary);
+}
+
 .navds-link {
-  color: var(--navds-color-text-link);
+  color: var(--navds-link-color-text);
   text-decoration: underline;
-  display: inline-grid;
-  grid-auto-flow: column;
+  display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
+  gap: var(--navds-spacing-1);
+}
+
+.navds-alert--info .navds-link {
+  color: var(--navds-link-color-on-info-background);
+}
+
+.navds-alert--error .navds-link,
+.navds-confirmation-panel--error .navds-link {
+  color: var(--navds-link-color-on-error-background);
 }
 
 .navds-link:hover {
@@ -13,24 +33,24 @@
 
 .navds-link:focus {
   outline: none;
-  color: var(--navds-color-text-inverse);
+  color: var(--navds-link-color-text-focus);
   text-decoration: none;
-  background-color: var(--navds-text-focus);
+  background-color: var(--navds-link-color-background-focus);
   box-shadow: var(--navds-text-shadow);
 }
 
 .navds-link:active {
   outline: none;
-  color: var(--navds-color-text-inverse);
+  color: var(--navds-link-color-text-active);
   text-decoration: none;
-  background-color: var(--navds-text-focus);
+  background-color: var(--navds-link-color-background-active);
   box-shadow: var(--navds-text-shadow);
 }
 
 .navds-link svg {
-  color: var(--navds-color-text-link);
+  color: var(--navds-link-color-icon);
 }
 
 .navds-link:focus svg {
-  color: var(--navds-color-text-inverse);
+  color: var(--navds-link-color-icon-focus);
 }

@navikt/ds-css/loader.css

@@ -0,0 +1,117 @@
+:root {
+  --navds-loader-color-foreground: var(--navds-color-gray-40);
+  --navds-loader-color-background: var(--navds-color-gray-10);
+  --navds-loader-color-neutral-foreground: var(--navds-color-gray-40);
+  --navds-loader-color-interaction-foreground: var(--navds-color-blue-50);
+  --navds-loader-color-inverted-foreground: var(--navds-color-white);
+  --navds-loader-color-inverted-background: rgba(255, 255, 255, 0.3);
+  --navds-loader-color-transparent-background: transparent;
+  --navds-loader-color-on-button-background: rgba(255, 255, 255, 0.3);
+  --navds-loader-color-on-button-foreground: currentColor;
+}
+
+.navds-loader {
+  width: 1.5rem;
+  display: inline-block;
+  position: relative;
+  animation: loader-rotate 1.4s linear infinite;
+}
+
+.navds-loader__foreground {
+  animation: loader-dasharray 1.4s ease-in-out infinite;
+  stroke-dasharray: 80px, 200px;
+  stroke-dashoffset: 0;
+  stroke: var(--navds-loader-color-foreground);
+}
+
+.navds-loader__background {
+  stroke: var(--navds-loader-color-background);
+}
+
+.navds-loader--neutral .navds-loader__foreground {
+  stroke: var(--navds-loader-color-neutral-foreground);
+}
+
+.navds-loader--interaction .navds-loader__foreground {
+  stroke: var(--navds-loader-color-interaction-foreground);
+}
+
+.navds-loader--inverted .navds-loader__foreground {
+  stroke: var(--navds-loader-color-inverted-foreground);
+}
+
+.navds-loader--inverted .navds-loader__background {
+  stroke: var(--navds-loader-color-inverted-background);
+}
+
+.navds-loader--transparent .navds-loader__background {
+  stroke: var(--navds-loader-color-transparent-background);
+}
+
+.navds-loader--2xlarge {
+  width: 4rem;
+}
+
+.navds-loader--xlarge {
+  width: 2.5rem;
+}
+
+.navds-loader--large {
+  width: 2rem;
+}
+
+.navds-loader--medium {
+  width: 1.5rem;
+}
+
+.navds-loader--small {
+  width: 1.25rem;
+}
+
+.navds-loader--xsmall {
+  width: 1rem;
+}
+
+/*
+ * Button spesific styling
+ */
+
+.navds-button .navds-loader .navds-loader__foreground {
+  stroke: var(--navds-loader-color-on-button-foreground);
+}
+
+.navds-button:hover .navds-loader .navds-loader__background {
+  stroke: var(--navds-loader-color-on-button-background);
+}
+
+.navds-button:active .navds-loader .navds-loader__background {
+  stroke: var(--navds-loader-color-on-button-background);
+}
+
+.navds-button--primary .navds-loader .navds-loader__background,
+.navds-button--danger .navds-loader .navds-loader__background {
+  stroke: var(--navds-loader-color-on-button-background);
+}
+
+@keyframes loader-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes loader-dasharray {
+  0% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -15px;
+  }
+
+  100% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -120px;
+  }
+}

@navikt/ds-css/modal.css

@@ -1,18 +1,23 @@
+:root {
+  --navds-modal-color-background: var(--navds-color-background);
+  --navds-modal-color-overlay: var(--navds-color-modal-overlay);
+}
+
 .ReactModal__Body--open {
   overflow: hidden;
 }
 
 .navds-modal {
-  background-color: var(--navds-color-background);
+  background-color: var(--navds-modal-color-background);
+  border-radius: 4px;
   display: block;
   position: relative;
-  padding: 1rem;
-  border-radius: 4px;
   overflow: auto;
   max-height: 100%;
-  z-index: var(--navds-z-index-modal-content);
-  top: 50%;
-  transform: translateY(-50%);
+}
+
+.navds-modal__content {
+  padding: var(--navds-spacing-4);
 }
 
 .navds-modal:focus,
@@ -23,13 +28,16 @@
 
 .navds-modal__overlay {
   position: fixed;
-  z-index: var(--navds-z-index-modal-overlay);
+  z-index: var(--navds-z-index-modal);
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
-  background-color: var(--navds-color-modal-overlay);
-  padding: 1rem;
+  background-color: var(--navds-modal-color-overlay);
+  padding: var(--navds-spacing-4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .navds-modal__button--shake {
@@ -44,10 +52,11 @@
 }
 
 .navds-modal__button {
-  position: fixed;
-  top: 1rem;
-  right: 1rem;
+  position: absolute;
+  top: var(--navds-spacing-4);
+  right: var(--navds-spacing-4);
   display: flex;
+  padding: var(--navds-spacing-2);
 }
 
 .navds-modal__button svg {

@navikt/ds-css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.4.1",
+  "version": "0.8.3",
   "private": false,
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",
@@ -18,13 +18,13 @@
   "main": "./dist/index.css",
   "scripts": {
     "build": "postcss --use postcss-import -o dist/index.css index.css",
-    "watch-css": "postcss -w --use postcss-import -o dist/index.css index.css"
+    "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^0.2.1",
+    "@navikt/ds-tokens": "^0.5.1",
     "normalize.css": "^8.0.1",
-    "postcss": "^8.2.7",
+    "postcss": "^8.3.6",
     "postcss-cli": "^8.3.1",
-    "postcss-import": "^14.0.0"
+    "postcss-import": "^14.0.2"
   }
 }

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

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

@navikt/ds-css/panel.css

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

@navikt/ds-css/popover.css

@@ -1,9 +1,20 @@
+:root {
+  --navds-popover-color-background: var(--navds-color-background);
+  --navds-popover-color-border: var(--navds-color-gray-40);
+  --navds-popover-color-shadow: var(--navds-color-gray-20);
+}
+
 .navds-popover {
-  z-index: var(--navds-z-index-popover-default);
-  background-color: var(--navds-color-background);
-  box-shadow: 0 0.05rem 0.25rem 0.125rem rgba(0, 0, 0, 0.08);
-  border: var(--navds-border-default);
-  border-radius: 2px;
+  z-index: var(--navds-z-index-popover);
+  background-color: var(--navds-popover-color-background);
+  box-shadow: 0 2px 4px 0 var(--navds-popover-color-shadow);
+  border: 1px solid;
+  border-color: var(--navds-popover-color-border);
+  border-radius: 4px;
+}
+
+.navds-popover__content {
+  padding: var(--navds-spacing-4);
 }
 
 .navds-popover--hidden {
@@ -16,22 +27,20 @@
 }
 
 .navds-popover__arrow {
-  z-index: var(--navds-z-index-popover-arrow);
+  z-index: -1;
 }
 
 .navds-popover__arrow::before {
-  content: "";
   display: block;
+  content: "";
+  transform: rotate(45deg);
+  background-color: var(--navds-popover-color-background);
+  border: 1px solid;
+  border-color: var(--navds-popover-color-border);
   width: 1rem;
   height: 1rem;
-  transform: rotate(45deg);
-  background-color: var(--navds-color-background);
-  border: var(--navds-border-default);
-}
-
-.navds-popover__arrow::before .navds-popover--small {
-  width: 0.67rem;
-  height: 0.67rem;
+  top: 0;
+  left: 0;
 }
 
 .navds-popover[data-popper-placement^="top"] > .navds-popover__arrow {

@navikt/ds-css/speech-bubble.css

@@ -0,0 +1,82 @@
+:root {
+  --navds-speechbubble-color-background: var(--navds-color-gray-10);
+  --navds-speechbubble-color-shadow: var(--navds-color-gray-20);
+  --navds-speechbubble-color-illustration: var(--navds-color-darkgray);
+  --navds-speechbubble-color-illustration-background: var(
+    --navds-color-gray-20
+  );
+  --navds-speechbubble-color-detail-text: var(--navds-color-gray-60);
+}
+
+.navds-speechbubble {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--navds-spacing-4);
+}
+
+.navds-speechbubble--right {
+  flex-direction: row-reverse;
+}
+
+.navds-speechbubble__bubble-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--navds-spacing-3);
+}
+
+.navds-speechbubble--right .navds-speechbubble__bubble-list {
+  align-items: flex-end;
+}
+
+.navds-speechbubble__illustration {
+  align-items: center;
+  background: var(--navds-speechbubble-color-illustration-background);
+  color: var(--navds-speechbubble-color-illustration);
+  border-radius: 50%;
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  overflow: hidden;
+  height: 3rem;
+  width: 3rem;
+}
+
+.navds-speechbubble__illustration svg {
+  align-self: center;
+  height: 100%;
+  width: 100%;
+}
+
+.navds-speechbubble__bubble {
+  padding: 1rem;
+  box-shadow: 0 2px 4px 0 var(--navds-speechbubble-color-shadow);
+  width: fit-content;
+  max-width: 37.5rem;
+  background-color: var(--navds-speechbubble-color-background);
+  border-radius: 12px;
+  border-bottom-left-radius: 2px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--navds-spacing-2);
+}
+
+.navds-speechbubble__bubble:focus {
+  box-shadow: var(--navds-shadow-focus);
+  outline: none;
+}
+
+.navds-speechbubble--right .navds-speechbubble__bubble {
+  border-radius: 12px;
+  border-bottom-right-radius: 2px;
+}
+
+.navds-speechbubble__top-text {
+  color: var(--navds-speechbubble-color-detail-text);
+}
+
+.navds-speechbubble--right .navds-speechbubble__top-text {
+  align-self: flex-end;
+}

@navikt/ds-css/tag.css

@@ -1,32 +1,54 @@
-.navds-tag {
-  border-radius: 4px;
-  border: var(--navds-border-default);
-  background-color: var(--navds-color-tag-info-background);
-  border-color: var(--navds-color-tag-info-border);
-  font-size: var(--navds-font-size-xs);
-  line-height: var(--navds-font-line-height-xs);
-  display: inline-block;
+:root {
+  --navds-tag-color-border: var(--navds-color-gray-40);
+  --navds-tag-color-background: var(--navds-color-gray-10);
+  --navds-tag-color-info-background: var(--navds-color-tag-info-background);
+  --navds-tag-color-info-border: var(--navds-color-tag-info-border);
+  --navds-tag-color-warning-background: var(
+    --navds-color-tag-warning-background
+  );
+  --navds-tag-color-warning-border: var(--navds-color-tag-warning-border);
+  --navds-tag-color-success-background: var(
+    --navds-color-tag-success-background
+  );
+  --navds-tag-color-success-border: var(--navds-color-tag-success-border);
+  --navds-tag-color-error-background: var(--navds-color-tag-error-background);
+  --navds-tag-color-error-border: var(--navds-color-tag-error-border);
+}
 
-  /* Padding calculated based on 16px font for 24px tall tag */
-  padding: 0.0625rem 0.5rem;
+.navds-tag {
+  border: 1px solid;
+  border-color: var(--navds-tag-color-border);
+  border-radius: 4px;
+  background-color: var(--navds-tag-color-background);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.125rem var(--navds-spacing-3);
+  min-height: 32px;
+}
+
+.navds-tag--small {
+  min-height: 24px;
+  padding-right: var(--navds-spacing-1);
+  padding-left: var(--navds-spacing-1);
 }
 
 .navds-tag--error {
-  background-color: var(--navds-color-tag-error-background);
-  border-color: var(--navds-color-tag-error-border);
+  background-color: var(--navds-tag-color-error-background);
+  border-color: var(--navds-tag-color-error-border);
 }
 
 .navds-tag--success {
-  background-color: var(--navds-color-tag-success-background);
-  border-color: var(--navds-color-tag-success-border);
+  background-color: var(--navds-tag-color-success-background);
+  border-color: var(--navds-tag-color-success-border);
 }
 
 .navds-tag--warning {
-  background-color: var(--navds-color-tag-warning-background);
-  border-color: var(--navds-color-tag-warning-border);
+  background-color: var(--navds-tag-color-warning-background);
+  border-color: var(--navds-tag-color-warning-border);
 }
 
 .navds-tag--info {
-  background-color: var(--navds-color-tag-info-background);
-  border-color: var(--navds-color-tag-info-border);
+  background-color: var(--navds-tag-color-info-background);
+  border-color: var(--navds-tag-color-info-border);
 }

@navikt/ds-css/typography.css

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

@navikt/ds-icons/config/package.json

@@ -1,6 +0,0 @@
-{
-  "type": "commonjs",
-  "main": "index.js",
-  "typings": "../esm/index.d.ts",
-  "sideEffects": false
-}

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

@@ -11,7 +11,7 @@
     "name": "AddCircle",
     "description": "",
     "created_at": "2020-07-01T10:37:42.784Z",
-    "updated_at": "2021-04-09T13:32:16.308Z",
+    "updated_at": "2021-08-12T11:15:52.168Z",
     "pageName": "Interface",
     "visible": true
   },
@@ -31,6 +31,22 @@
     "pageName": "Interface",
     "visible": true
   },
+  {
+    "name": "AddPerson",
+    "description": "",
+    "created_at": "2021-06-15T15:06:55.651Z",
+    "updated_at": "2021-08-13T06:33:04.695Z",
+    "pageName": "People",
+    "visible": true
+  },
+  {
+    "name": "AddPersonFilled",
+    "description": "",
+    "created_at": "2021-06-15T15:06:55.654Z",
+    "updated_at": "2021-08-13T06:33:04.683Z",
+    "pageName": "People",
+    "visible": true
+  },
   {
     "name": "Applicant",
     "description": "",
@@ -91,7 +107,7 @@
     "name": "Back",
     "description": "",
     "created_at": "2020-07-01T10:37:42.840Z",
-    "updated_at": "2021-04-09T13:32:23.607Z",
+    "updated_at": "2021-08-12T14:51:21.441Z",
     "pageName": "Chevron",
     "visible": true
   },
@@ -107,7 +123,7 @@
     "name": "Bag",
     "description": "",
     "created_at": "2020-07-01T10:37:42.673Z",
-    "updated_at": "2021-04-09T13:32:23.625Z",
+    "updated_at": "2021-08-13T09:47:23.613Z",
     "pageName": "Jobs",
     "visible": true
   },
@@ -115,7 +131,7 @@
     "name": "BagFilled",
     "description": "",
     "created_at": "2021-01-11T13:37:55.239Z",
-    "updated_at": "2021-04-09T13:32:16.648Z",
+    "updated_at": "2021-06-14T07:21:59.051Z",
     "pageName": "Jobs",
     "visible": true
   },
@@ -187,7 +203,7 @@
     "name": "Bookmark",
     "description": "",
     "created_at": "2020-07-01T10:37:42.877Z",
-    "updated_at": "2021-04-09T13:32:23.611Z",
+    "updated_at": "2021-08-12T12:32:34.047Z",
     "pageName": "File",
     "visible": true
   },
@@ -235,7 +251,7 @@
     "name": "Calculator",
     "description": "",
     "created_at": "2020-07-01T10:37:42.917Z",
-    "updated_at": "2021-04-09T13:32:16.330Z",
+    "updated_at": "2021-08-12T12:31:15.652Z",
     "pageName": "Money",
     "visible": true
   },
@@ -347,7 +363,7 @@
     "name": "Caseworker",
     "description": "",
     "created_at": "2021-04-28T14:10:50.983Z",
-    "updated_at": "2021-04-30T07:23:11.918Z",
+    "updated_at": "2021-06-14T07:21:59.040Z",
     "pageName": "People",
     "visible": true
   },
@@ -355,7 +371,7 @@
     "name": "CaseworkerFilled",
     "description": "",
     "created_at": "2021-04-28T14:11:08.212Z",
-    "updated_at": "2021-04-29T18:47:14.999Z",
+    "updated_at": "2021-06-14T07:21:59.036Z",
     "pageName": "People",
     "visible": true
   },
@@ -379,7 +395,7 @@
     "name": "Clock",
     "description": "",
     "created_at": "2020-07-01T10:37:42.647Z",
-    "updated_at": "2021-04-09T13:32:23.334Z",
+    "updated_at": "2021-08-13T07:30:12.128Z",
     "pageName": "Time",
     "visible": true
   },
@@ -395,7 +411,7 @@
     "name": "Close",
     "description": "",
     "created_at": "2020-07-01T10:37:42.827Z",
-    "updated_at": "2021-04-09T13:32:16.911Z",
+    "updated_at": "2021-08-12T13:19:34.922Z",
     "pageName": "Interface",
     "visible": true
   },
@@ -403,7 +419,7 @@
     "name": "CloseFilled",
     "description": "",
     "created_at": "2021-01-11T13:37:55.364Z",
-    "updated_at": "2021-04-09T13:32:16.624Z",
+    "updated_at": "2021-08-12T10:54:40.891Z",
     "pageName": "Interface",
     "visible": true
   },
@@ -411,7 +427,7 @@
     "name": "CoApplicant",
     "description": "",
     "created_at": "2021-04-30T10:55:32.823Z",
-    "updated_at": "2021-04-30T10:55:32.823Z",
+    "updated_at": "2021-08-13T09:47:48.809Z",
     "pageName": "People",
     "visible": true
   },
@@ -491,7 +507,7 @@
     "name": "Copy",
     "description": "",
     "created_at": "2020-07-01T10:37:42.619Z",
-    "updated_at": "2021-05-05T12:44:31.388Z",
+    "updated_at": "2021-08-12T12:36:11.164Z",
     "pageName": "File",
     "visible": true
   },
@@ -551,6 +567,14 @@
     "pageName": "File",
     "visible": true
   },
+  {
+    "name": "Decision",
+    "description": "",
+    "created_at": "2021-08-13T06:33:04.661Z",
+    "updated_at": "2021-08-13T06:33:04.661Z",
+    "pageName": "People",
+    "visible": true
+  },
   {
     "name": "DecisionCheck",
     "description": "",
@@ -575,6 +599,14 @@
     "pageName": "People",
     "visible": true
   },
+  {
+    "name": "DecisionFilled",
+    "description": "",
+    "created_at": "2021-08-13T06:33:04.665Z",
+    "updated_at": "2021-08-13T06:33:04.665Z",
+    "pageName": "People",
+    "visible": true
+  },
   {
     "name": "Delete",
     "description": "",
@@ -603,7 +635,7 @@
     "name": "DialogDots",
     "description": "",
     "created_at": "2020-07-01T10:37:43.133Z",
-    "updated_at": "2021-04-09T13:32:23.486Z",
+    "updated_at": "2021-08-12T11:19:13.127Z",
     "pageName": "Communication",
     "visible": true
   },
@@ -655,6 +687,22 @@
     "pageName": "Communication",
     "visible": true
   },
+  {
+    "name": "DirectionSign",
+    "description": "",
+    "created_at": "2021-06-14T07:21:59.013Z",
+    "updated_at": "2021-06-14T07:21:59.013Z",
+    "pageName": "Jobs",
+    "visible": true
+  },
+  {
+    "name": "DirectionSignFilled",
+    "description": "",
+    "created_at": "2021-06-14T07:21:59.009Z",
+    "updated_at": "2021-06-14T07:21:59.009Z",
+    "pageName": "Jobs",
+    "visible": true
+  },
   {
     "name": "Disability",
     "description": "",
@@ -843,7 +891,7 @@
     "name": "EmployerFilled",
     "description": "",
     "created_at": "2021-01-22T13:40:32.293Z",
-    "updated_at": "2021-04-22T08:46:31.424Z",
+    "updated_at": "2021-08-13T06:33:04.692Z",
     "pageName": "People",
     "visible": true
   },
@@ -899,7 +947,7 @@
     "name": "Eye",
     "description": "",
     "created_at": "2020-07-01T10:37:42.895Z",
-    "updated_at": "2021-04-09T13:32:23.514Z",
+    "updated_at": "2021-08-12T09:55:24.102Z",
     "pageName": "Privacy",
     "visible": true
   },
@@ -907,7 +955,7 @@
     "name": "EyeFilled",
     "description": "",
     "created_at": "2021-01-11T13:37:55.321Z",
-    "updated_at": "2021-04-09T13:32:16.996Z",
+    "updated_at": "2021-08-12T09:55:25.386Z",
     "pageName": "Privacy",
     "visible": true
   },
@@ -915,7 +963,7 @@
     "name": "EyeScreened",
     "description": "",
     "created_at": "2020-07-01T10:37:42.956Z",
-    "updated_at": "2021-04-09T13:32:23.351Z",
+    "updated_at": "2021-08-12T09:56:29.536Z",
     "pageName": "Privacy",
     "visible": true
   },
@@ -923,7 +971,7 @@
     "name": "EyeScreenedFilled",
     "description": "",
     "created_at": "2021-01-11T13:37:55.578Z",
-    "updated_at": "2021-04-09T13:32:23.419Z",
+    "updated_at": "2021-08-12T09:55:47.137Z",
     "pageName": "Privacy",
     "visible": true
   },
@@ -1075,7 +1123,7 @@
     "name": "Findout",
     "description": "",
     "created_at": "2021-05-05T13:04:25.502Z",
-    "updated_at": "2021-05-05T13:04:25.502Z",
+    "updated_at": "2021-08-12T12:32:46.082Z",
     "pageName": "File",
     "visible": true
   },
@@ -1107,7 +1155,7 @@
     "name": "Folder",
     "description": "",
     "created_at": "2020-07-01T10:37:42.682Z",
-    "updated_at": "2021-04-09T13:32:23.439Z",
+    "updated_at": "2021-08-13T07:30:12.108Z",
     "pageName": "File",
     "visible": true
   },
@@ -1235,7 +1283,7 @@
     "name": "HandBandage",
     "description": "",
     "created_at": "2020-07-01T10:37:42.711Z",
-    "updated_at": "2021-04-09T13:32:16.442Z",
+    "updated_at": "2021-08-13T09:48:45.392Z",
     "pageName": "Health",
     "visible": true
   },
@@ -1347,7 +1395,7 @@
     "name": "Helmet",
     "description": "",
     "created_at": "2020-07-01T10:37:42.793Z",
-    "updated_at": "2021-04-09T13:32:23.412Z",
+    "updated_at": "2021-08-13T09:49:01.868Z",
     "pageName": "Jobs",
     "visible": true
   },
@@ -1459,7 +1507,7 @@
     "name": "Information",
     "description": "",
     "created_at": "2020-07-01T10:37:43.005Z",
-    "updated_at": "2021-04-09T13:32:16.578Z",
+    "updated_at": "2021-08-12T12:35:33.631Z",
     "pageName": "Status",
     "visible": true
   },
@@ -1467,7 +1515,7 @@
     "name": "InformationFilled",
     "description": "",
     "created_at": "2021-01-11T13:37:55.736Z",
-    "updated_at": "2021-04-09T13:32:16.132Z",
+    "updated_at": "2021-08-12T11:36:44.756Z",
     "pageName": "Status",
     "visible": true
   },
@@ -1499,7 +1547,7 @@
     "name": "LawFilled",
     "description": "",
     "created_at": "2021-01-11T13:37:55.330Z",
-    "updated_at": "2021-04-09T13:32:16.725Z",
+    "updated_at": "2021-08-13T09:50:59.913Z",
     "pageName": "Privacy",
     "visible": true
   },
@@ -1507,7 +1555,7 @@
     "name": "Left",
     "description": "",
     "created_at": "2020-07-01T10:37:42.797Z",
-    "updated_at": "2021-04-09T13:32:23.354Z",
+    "updated_at": "2021-08-13T06:33:04.688Z",
     "pageName": "Arrow",
     "visible": true
   },
@@ -1587,7 +1635,7 @@
     "name": "Locked",
     "description": "",
     "created_at": "2020-07-01T10:37:43.027Z",
-    "updated_at": "2021-04-09T13:32:23.385Z",
+    "updated_at": "2021-08-12T09:56:54.295Z",
     "pageName": "Privacy",
     "visible": true
   },
@@ -1683,7 +1731,7 @@
     "name": "MinusCircleFilled",
     "description": "",
     "created_at": "2021-01-11T13:37:55.721Z",
-    "updated_at": "2021-04-09T13:32:16.246Z",
+    "updated_at": "2021-08-12T10:26:25.789Z",
     "pageName": "Interface",
     "visible": true
   },
@@ -1699,7 +1747,7 @@
     "name": "Mobile",
     "description": "",
     "created_at": "2020-07-01T10:37:43.010Z",
-    "updated_at": "2021-04-09T13:32:16.508Z",
+    "updated_at": "2021-08-12T11:19:05.339Z",
     "pageName": "Device",
     "visible": true
   },
@@ -1715,7 +1763,7 @@
     "name": "Money",
     "description": "",
     "created_at": "2020-07-01T10:37:42.741Z",
-    "updated_at": "2021-04-09T13:32:23.388Z",
+    "updated_at": "2021-08-12T12:31:01.092Z",
     "pageName": "Money",
     "visible": true
   },
@@ -1859,7 +1907,7 @@
     "name": "Office1",
     "description": "",
     "created_at": "2020-07-01T10:37:42.720Z",
-    "updated_at": "2021-04-09T13:32:23.456Z",
+    "updated_at": "2021-08-12T12:56:17.625Z",
     "pageName": "Building",
     "visible": true
   },
@@ -1955,7 +2003,7 @@
     "name": "People",
     "description": "",
     "created_at": "2020-07-01T10:37:42.850Z",
-    "updated_at": "2021-04-09T13:32:23.661Z",
+    "updated_at": "2021-08-12T11:17:04.979Z",
     "pageName": "People",
     "visible": true
   },
@@ -2083,7 +2131,7 @@
     "name": "Profile",
     "description": "",
     "created_at": "2021-04-26T09:24:38.029Z",
-    "updated_at": "2021-04-30T10:55:32.846Z",
+    "updated_at": "2021-08-12T12:32:56.285Z",
     "pageName": "File",
     "visible": true
   },
@@ -2115,7 +2163,7 @@
     "name": "Receipt",
     "description": "",
     "created_at": "2020-07-01T10:37:42.904Z",
-    "updated_at": "2021-04-09T13:32:23.649Z",
+    "updated_at": "2021-08-12T12:29:47.091Z",
     "pageName": "Money",
     "visible": true
   },
@@ -2195,7 +2243,7 @@
     "name": "Right",
     "description": "",
     "created_at": "2020-07-01T10:37:42.642Z",
-    "updated_at": "2021-04-09T13:32:23.409Z",
+    "updated_at": "2021-08-12T07:14:26.093Z",
     "pageName": "Arrow",
     "visible": true
   },
@@ -2227,7 +2275,7 @@
     "name": "Sandglass",
     "description": "",
     "created_at": "2020-07-01T10:37:43.117Z",
-    "updated_at": "2021-04-09T13:32:23.313Z",
+    "updated_at": "2021-08-12T08:18:12.598Z",
     "pageName": "Time",
     "visible": true
   },
@@ -2291,7 +2339,7 @@
     "name": "Search",
     "description": "",
     "created_at": "2020-07-01T10:37:42.983Z",
-    "updated_at": "2021-04-09T13:32:16.382Z",
+    "updated_at": "2021-08-12T12:37:22.919Z",
     "pageName": "Interface",
     "visible": true
   },
@@ -2355,7 +2403,7 @@
     "name": "Send",
     "description": "",
     "created_at": "2020-07-01T10:37:43.101Z",
-    "updated_at": "2021-04-09T13:32:23.596Z",
+    "updated_at": "2021-08-13T07:30:12.151Z",
     "pageName": "Communication",
     "visible": true
   },
@@ -2371,7 +2419,7 @@
     "name": "Service",
     "description": "",
     "created_at": "2020-07-01T10:37:42.707Z",
-    "updated_at": "2021-04-09T13:32:23.429Z",
+    "updated_at": "2021-08-12T11:15:52.145Z",
     "pageName": "People",
     "visible": true
   },
@@ -2643,7 +2691,7 @@
     "name": "SuccessStroke",
     "description": "",
     "created_at": "2021-04-15T07:12:49.753Z",
-    "updated_at": "2021-04-15T07:12:49.753Z",
+    "updated_at": "2021-08-12T11:30:36.177Z",
     "pageName": "Status",
     "visible": true
   },
@@ -2723,7 +2771,7 @@
     "name": "ThermometerStroke",
     "description": "",
     "created_at": "2021-04-07T12:13:28.179Z",
-    "updated_at": "2021-04-09T13:32:16.814Z",
+    "updated_at": "2021-08-12T12:34:12.825Z",
     "pageName": "Health",
     "visible": true
   },
@@ -2779,7 +2827,7 @@
     "name": "Unlocked",
     "description": "",
     "created_at": "2020-07-01T10:37:42.823Z",
-    "updated_at": "2021-04-09T13:32:16.901Z",
+    "updated_at": "2021-08-12T09:56:56.564Z",
     "pageName": "Privacy",
     "visible": true
   },
@@ -2811,7 +2859,7 @@
     "name": "Upload",
     "description": "",
     "created_at": "2020-07-01T10:37:43.046Z",
-    "updated_at": "2021-04-09T13:32:23.685Z",
+    "updated_at": "2021-08-13T07:41:40.719Z",
     "pageName": "Attachment",
     "visible": true
   },

@navikt/ds-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-icons",
-  "version": "0.3.2",
+  "version": "0.5.3",
   "private": false,
   "description": "NAVs egne ikoner i SVG og React format",
   "repository": {
@@ -14,11 +14,10 @@
   ],
   "license": "MIT",
   "author": "NAV",
-  "main": "esm/index.js",
-  "module": "esm/index.js",
-  "typings": "esm/index.d.ts",
   "sideEffects": false,
-  "type": "module",
+  "main": "./cjs/index.js",
+  "module": "./esm/index.js",
+  "typings": "./esm/index.d.ts",
   "files": [
     "/cjs",
     "/esm",
@@ -26,25 +25,26 @@
     "/svg"
   ],
   "scripts": {
-    "cjs-package": "copyfiles -f config/package.json cjs",
-    "dl-icons": "FILE_KEY=UmEVH3pZ71uJPsSz9ilP3Y node --experimental-modules --es-module-specifier-resolution=node -r dotenv/config figma-api/index.js dotenv_config_path=figma-api/.env",
+    "create-package-json-pointers-to-esm": "node ../../utilities/scripts/createPackageJsonsWithESMPointers.js",
+    "dl-icons": "FILE_KEY=UmEVH3pZ71uJPsSz9ilP3Y node --experimental-modules --es-module-specifier-resolution=node -r dotenv/config figma-api/index.mjs dotenv_config_path=figma-api/.env",
     "create-icons": "svgr --silent --typescript --ref --icon --title-prop --replace-attr-values \"#262626=currentColor\" -d src svg",
-    "convert-icons": "node figma-api/pngConverter.js",
-    "clean": "rm -rf src && rm -rf esm && rm -rf cjs && rm -rf png && rm -rf NAV-ikonpakke-png.zip && rm -rf NAV-ikonpakke-svg.zip",
-    "build": "npm run clean && npm run create-icons && tsc && tsc -p tsconfig-esm.json && yarn cjs-package && npm run convert-icons && node figma-api/zipIcons.js"
+    "convert-icons": "node figma-api/pngConverter.mjs",
+    "clean": "rimraf src png NAV-ikonpakke-png.zip NAV-ikonpakke-svg.zip",
+    "zip-icons": "node figma-api/zipIcons.mjs",
+    "build": "yarn clean && yarn create-icons && tsc && tsc -p tsconfig-esm.json && yarn create-package-json-pointers-to-esm && yarn run convert-icons && yarn zip-icons"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0"
   },
   "devDependencies": {
-    "@svgr/cli": "^5.4.0",
+    "@svgr/cli": "^5.5.0",
     "copyfiles": "^2.4.1",
-    "dotenv": "^8.2.0",
+    "dotenv": "^10.0.0",
     "lodash.kebabcase": "^4.1.1",
     "lodash.startcase": "4.4.0",
     "react": "^16.8.0 || ^17.0.0",
     "rimraf": "3.0.2",
-    "sharp": "0.27.1",
+    "sharp": "0.29.1",
     "zip-dir": "^2.0.0"
   }
 }

@navikt/ds-icons/stories/icons.stories.mdx

@@ -1,10 +1,10 @@
-import { Meta } from "@storybook/addon-docs/blocks";
+import { Meta } from "@storybook/addon-docs";
 
 <Meta title="ds-icons/Kom i gang" />
 
 # Ta i bruk ikonpakken `@navikt/ds-icons`
 
-Alle ikoner kan bli funnet her https://design.nav.no/resources/icons
+Alle ikoner kan bli funnet her https://design.nav.no/designsystem/resources/icons
 
 ## Oppsett
 
@@ -12,7 +12,7 @@ Alle ikoner kan bli funnet her https://design.nav.no/resources/icons
 yarn add @navikt/ds-icons
 ```
 
-```bash
+```jsx
 Import { Expand } from `@navikt/ds-icons`;
 
 <Expand
@@ -22,15 +22,4 @@ Import { Expand } from `@navikt/ds-icons`;
 />
 ```
 
-## Testing
-
-For å støtte testing med eks Jest som ikke tillater ESM moduler, så kan denne configen legges til
-
-```bash
-"moduleNameMapper": {
-  "@navikt/ds-react(.*)": "@navikt/ds-react/cjs$1",
-  "@navikt/ds-icons(.*)": "@navikt/ds-icons/cjs$1"
-}
-```
-
-Dette vil remappe Ikonpakken (og komponentpakken) til å bruke CommonJs versjonen for testing
+Note: Det kan være tilfeller der oppsettet ditt ikke har støtte for SVG, og det må da legges til manuelt i eks en webpack config basert på hva som blir brukt.

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

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 24V14H20V24H18Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 18L24 18L24 20L14 20L14 18Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 5C15 6.65685 13.6569 8 12 8C10.3431 8 9 6.65685 9 5C9 3.34315 10.3431 2 12 2C13.6569 2 15 3.34315 15 5ZM17 5C17 7.76142 14.7614 10 12 10C9.23858 10 7 7.76142 7 5C7 2.23858 9.23858 0 12 0C14.7614 0 17 2.23858 17 5ZM15.2322 14.185L16.8296 12.9329C15.5735 11.7353 13.8726 11 12 11C8.13401 11 5 14.134 5 18H7C7 15.2386 9.23858 13 12 13C13.2323 13 14.3606 13.4458 15.2322 14.185Z" fill="#262626"/>
+</svg>

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

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 10C14.7614 10 17 7.76142 17 5C17 2.23858 14.7614 0 12 0C9.23858 0 7 2.23858 7 5C7 7.76142 9.23858 10 12 10ZM12 16H16L16 12.2547C14.8662 11.4638 13.4873 11 12 11C8.13401 11 5 14.134 5 18H12V16ZM18 18H14V20H18V24H20V20H24V18H20V14H18V18Z" fill="#262626"/>
+</svg>

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

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14 4H10C9.44772 4 9 4.44772 9 5V6H15V5C15 4.44772 14.5523 4 14 4ZM7 5V6H1C0.447715 6 0 6.44772 0 7V12C0 12.5523 0.447716 13 1 13H11V12C11 11.4477 11.4477 11 12 11C12.5523 11 13 11.4477 13 12V13H23C23.5523 13 24 12.5523 24 12V7C24 6.44772 23.5523 6 23 6H17V5C17 3.34315 15.6569 2 14 2H10C8.34315 2 7 3.34315 7 5ZM11 15V16C11 16.5523 11.4477 17 12 17C12.5523 17 13 16.5523 13 16V15H23V20C23 21.1046 22.1046 22 21 22H3C1.89543 22 1 21.1046 1 20V15H11Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 3H10C9.44772 3 9 3.44772 9 4V5H15V4C15 3.44772 14.5523 3 14 3ZM7 4V5H1C0.447715 5 0 5.44772 0 6V12C0 12.5523 0.447716 13 1 13H11V12C11 11.4477 11.4477 11 12 11C12.5523 11 13 11.4477 13 12V13H23C23.5523 13 24 12.5523 24 12V6C24 5.44772 23.5523 5 23 5H17V4C17 2.34315 15.6569 1 14 1H10C8.34315 1 7 2.34315 7 4ZM11 15V16C11 16.5523 11.4477 17 12 17C12.5523 17 13 16.5523 13 16V15H23V21C23 22.1046 22.1046 23 21 23H3C1.89543 23 1 22.1046 1 21V15H11Z" fill="#262626"/>
 </svg>

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

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 8C13.6569 8 15 6.65685 15 5C15 3.34315 13.6569 2 12 2C10.3431 2 9 3.34315 9 5C9 6.65685 10.3431 8 12 8ZM12 10C14.7614 10 17 7.76142 17 5C17 2.23858 14.7614 0 12 0C9.23858 0 7 2.23858 7 5C7 7.76142 9.23858 10 12 10ZM17.0997 13.2048C15.823 11.8476 14.0105 11 12 11C8.13401 11 5 14.134 5 18H7C7 15.2386 9.23858 13 12 13C13.4582 13 14.7706 13.6242 15.6845 14.62L17.0997 13.2048ZM21.689 16.8125L17.2773 21.2243L15.4587 21.5413L15.7757 19.7227L20.1875 15.311C20.6021 14.8963 21.2744 14.8963 21.689 15.311C22.1037 15.7256 22.1037 16.3979 21.689 16.8125ZM23.1032 18.2267L18.2441 23.0859L13 24L13.9141 18.7559L18.7733 13.8968C19.969 12.7011 21.9076 12.7011 23.1032 13.8968C24.2989 15.0924 24.2989 17.031 23.1032 18.2267Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.75 8.5C13.5449 8.5 15 7.04493 15 5.25C15 3.45507 13.5449 2 11.75 2C9.95504 2 8.49996 3.45507 8.49996 5.25C8.49996 7.04493 9.95504 8.5 11.75 8.5ZM11.75 10.5C14.6495 10.5 17 8.1495 17 5.25C17 2.35051 14.6495 0 11.75 0C8.85047 0 6.49996 2.35051 6.49996 5.25C6.49996 8.1495 8.85047 10.5 11.75 10.5ZM17.0996 13.9384C15.752 12.5057 13.8388 11.6111 11.7166 11.6111C7.63588 11.6111 4.32776 14.9192 4.32776 19H6.43887C6.43887 16.0852 8.80181 13.7222 11.7166 13.7222C13.2558 13.7222 14.6411 14.3811 15.6059 15.4322L17.0996 13.9384ZM20.8991 17.4659L16.8884 21.4766L15.2352 21.7648L15.5234 20.1116L19.534 16.1009C19.911 15.7239 20.5221 15.7239 20.8991 16.1009C21.276 16.4778 21.276 17.089 20.8991 17.4659ZM22.1847 18.7516L17.7673 23.169L13 24L13.831 19.2327L18.2484 14.8152C19.3354 13.7283 21.0977 13.7283 22.1847 14.8152C23.2717 15.9022 23.2717 17.6646 22.1847 18.7516Z" fill="#262626"/>
 </svg>

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

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17 4.99999C17 7.7614 14.7614 9.99998 12 9.99998C9.23855 9.99998 6.99998 7.7614 6.99998 4.99999C6.99998 2.23857 9.23855 0 12 0C14.7614 0 17 2.23857 17 4.99999ZM12 11C8.13399 11 4.99999 14.134 4.99999 18H14.6289L18.0873 14.5415C16.883 12.4263 14.6081 11 12 11ZM23.2663 15.7337C22.288 14.7554 20.7019 14.7554 19.7236 15.7337L15.4573 20L15 23.9999L19 23.5426L23.2663 19.2764C24.2446 18.2981 24.2446 16.712 23.2663 15.7337Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17 5.25C17 8.1495 14.6495 10.5 11.75 10.5C8.85047 10.5 6.49996 8.1495 6.49996 5.25C6.49996 2.35051 8.85047 0 11.75 0C14.6495 0 17 2.35051 17 5.25ZM11.6618 11.6111C7.58101 11.6111 4.27289 14.9192 4.27289 19H14.4367L18.0873 15.3494C16.8161 13.1167 14.4148 11.6111 11.6618 11.6111ZM22.3478 16.6522C21.4782 15.7826 20.0683 15.7826 19.1987 16.6522L15.4065 20.4444L15 24L18.5555 23.5935L22.3478 19.8013C23.2174 18.9317 23.2174 17.5218 22.3478 16.6522Z" fill="#262626"/>
 </svg>

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

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.9565 8C12.6134 8 13.9565 6.65685 13.9565 5C13.9565 3.34315 12.6134 2 10.9565 2C9.29969 2 7.95654 3.34315 7.95654 5C7.95654 6.65685 9.29969 8 10.9565 8ZM10.9565 10C13.718 10 15.9565 7.76142 15.9565 5C15.9565 2.23858 13.718 0 10.9565 0C8.19512 0 5.95654 2.23858 5.95654 5C5.95654 7.76142 8.19512 10 10.9565 10Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.0569 11.5858C19.2758 10.8047 18.0095 10.8047 17.2285 11.5858L15.8143 13C15.0332 13.781 15.0332 15.0474 15.8143 15.8284L16.6856 16.6997L12.1071 21.2782L11.4 21.9853L12.8142 23.3995L13.5213 22.6924L18.0998 18.114L19.0496 19.0637C19.8306 19.8448 21.0969 19.8448 21.878 19.0637L23.2922 17.6495C24.0733 16.8685 24.0733 15.6021 23.2922 14.8211L20.0569 11.5858ZM18.6427 13L21.878 16.2353L20.4638 17.6495L17.2285 14.4142L18.6427 13Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.1594 11.7521C13.2095 11.2709 12.1352 11 11 11C7.13401 11 4 14.134 4 18H6C6 15.2386 8.23858 13 11 13C11.5609 13 12.0993 13.092 12.6014 13.2617L14.1594 11.7521Z" fill="#262626"/>
+</svg>

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

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 5C16 7.76142 13.7614 10 11 10C8.23858 10 6 7.76142 6 5C6 2.23858 8.23858 0 11 0C13.7614 0 16 2.23858 16 5ZM4 18C4 14.134 7.13401 11 11 11C12.3956 11 13.6959 11.4084 14.7877 12.1123L8.7108 18H4Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.2782 12.2854C18.8876 11.9049 18.2545 11.9049 17.8639 12.2854L15.3891 14.6973C14.9985 15.0778 14.9985 15.6949 15.3891 16.0754L16.8033 17.4536L11.5 22.6218L12.9142 24L18.2175 18.8318L19.8085 20.3823C20.199 20.7628 20.8322 20.7628 21.2227 20.3823L23.6976 17.9704C24.0881 17.5899 24.0881 16.9728 23.6976 16.5923L19.2782 12.2854Z" fill="#262626"/>
+</svg>

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

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 1V4H19.4648C19.7992 4 20.1114 4.1671 20.2969 4.4453L24 10L20.2969 15.5547C20.1114 15.8329 19.7992 16 19.4648 16H13V24H11V16H0.934253C0.534905 16 0.296708 15.5549 0.518226 15.2227L3.99999 10L0.518226 4.77735C0.296708 4.44507 0.534904 4 0.934252 4H11V1C11 0.447715 11.4477 0 12 0C12.5523 0 13 0.447715 13 1ZM3.73703 6L6.40369 10L3.73703 14H18.9296L21.5963 10L18.9296 6H3.73703Z" fill="#262626"/>
+</svg>

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

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 1V3H11V1C11 0.447715 11.4477 0 12 0C12.5523 0 13 0.447715 13 1ZM0.518226 4.77735C0.296708 4.44507 0.534904 4 0.934252 4H19.4648C19.7992 4 20.1114 4.1671 20.2969 4.4453L24 10L20.2969 15.5547C20.1114 15.8329 19.7992 16 19.4648 16H0.934253C0.534905 16 0.296708 15.5549 0.518226 15.2227L3.99999 10L0.518226 4.77735ZM11 17V24H13V17H11Z" fill="#262626"/>
+</svg>

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

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10 2H14V3H13H11H10V2ZM8 3.58152V2C8 0.89543 8.89543 0 10 0H14C15.1046 0 16 0.895431 16 2V3.58152C18.9318 4.76829 21 7.64262 21 11V20C21 22.2091 19.2091 24 17 24H7C4.79086 24 3 22.2091 3 20V11C3 7.64262 5.06817 4.76829 8 3.58152ZM2 22V20V15V13C0.895431 13 0 13.8954 0 15V20C0 21.1046 0.895431 22 2 22ZM22 20V22C23.1046 22 24 21.1046 24 20V15C24 13.8954 23.1046 13 22 13V15V20ZM9 8C8.44772 8 8 8.44772 8 9C8 9.55228 8.44772 10 9 10H15C15.5523 10 16 9.55228 16 9C16 8.44772 15.5523 8 15 8H9ZM9 15H15V18H9V15ZM7 15C7 13.8954 7.89543 13 9 13H15C16.1046 13 17 13.8954 17 15V18C17 19.1046 16.1046 20 15 20H9C7.89543 20 7 19.1046 7 18V15Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 2H14V3H13H11H10V2ZM8 3.58152V2C8 0.89543 8.89543 0 10 0H14C15.1046 0 16 0.895431 16 2V3.58152C18.9318 4.76829 21 7.64262 21 11V13H22C23.1046 13 24 13.8954 24 15V20C24 21.1046 23.1046 22 22 22H20.4649C19.7733 23.1956 18.4806 24 17 24H7C5.51944 24 4.22675 23.1956 3.53513 22H2C0.89543 22 0 21.1046 0 20V15C0 13.8954 0.895431 13 2 13H3V11C3 7.64262 5.06817 4.76829 8 3.58152ZM19 20V13V11C19 7.68629 16.3137 5 13 5H11C7.68629 5 5 7.68629 5 11V13V20C5 21.1046 5.89543 22 7 22H17C18.1046 22 19 21.1046 19 20ZM21 15V20H22V15H21ZM2 15H3V20H2L2 15ZM15 15H9V18H15V15ZM9 13C7.89543 13 7 13.8954 7 15V18C7 19.1046 7.89543 20 9 20H15C16.1046 20 17 19.1046 17 18V15C17 13.8954 16.1046 13 15 13H9ZM9 8C8.44772 8 8 8.44772 8 9C8 9.55228 8.44772 10 9 10H15C15.5523 10 16 9.55228 16 9C16 8.44772 15.5523 8 15 8H9Z" fill="#262626"/>
 </svg>

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

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14 4H10C9.44772 4 9 4.44772 9 5V6H15V5C15 4.44772 14.5523 4 14 4ZM7 5V6H1C0.447715 6 0 6.44772 0 7V13C0 13.7403 0.402199 14.3866 1 14.7324V20C1 21.1046 1.89543 22 3 22H21C22.1046 22 23 21.1046 23 20V14.7324C23.5978 14.3866 24 13.7403 24 13V7C24 6.44772 23.5523 6 23 6H17V5C17 3.34315 15.6569 2 14 2H10C8.34315 2 7 3.34315 7 5ZM7 8H17H22V13H13V12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12V13H2L2 8H7ZM11 15H3L3 20H21V15H13V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V15Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 3H10C9.44772 3 9 3.44772 9 4V5H15V4C15 3.44772 14.5523 3 14 3ZM7 4V5H1C0.447715 5 0 5.44772 0 6V13C0 13.7403 0.402199 14.3866 1 14.7324V21C1 22.1046 1.89543 23 3 23H21C22.1046 23 23 22.1046 23 21V14.7324C23.5978 14.3866 24 13.7403 24 13V6C24 5.44772 23.5523 5 23 5H17V4C17 2.34315 15.6569 1 14 1H10C8.34315 1 7 2.34315 7 4ZM7 7H17H22V13H13V12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12V13H2L2 7H7ZM11 15H3L3 21H21V15H13V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V15Z" fill="#262626"/>
 </svg>

@navikt/ds-react/config/package.json

@@ -1,6 +0,0 @@
-{
-  "type": "commonjs",
-  "main": "index.js",
-  "typings": "../esm/index.d.ts",
-  "sideEffects": false
-}

@navikt/ds-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.4.2",
+  "version": "0.9.1",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -14,11 +14,10 @@
     "type": "git",
     "url": "git+https://github.com/navikt/nav-frontend-moduler/tree/master/%40navikt/ds-react"
   },
-  "main": "esm/index.js",
-  "module": "esm/index.js",
-  "typings": "esm/index.d.ts",
   "sideEffects": false,
-  "type": "module",
+  "main": "./cjs/index.js",
+  "module": "./esm/index.js",
+  "typings": "./esm/index.d.ts",
   "publishConfig": {
     "access": "public"
   },
@@ -28,25 +27,30 @@
     "/src"
   ],
   "scripts": {
-    "cjs-package": "copyfiles -f config/package.json cjs",
-    "clean": "rm -rf cjs esm",
-    "build": "yarn run clean && tsc && tsc -p tsconfig-esm.json && yarn cjs-package",
+    "create-package-json-pointers-to-esm": "node ../../utilities/scripts/createPackageJsonsWithESMPointers.js",
+    "clean": "rimraf cjs esm",
+    "build": "yarn run clean && tsc && tsc -p tsconfig-esm.json && yarn create-package-json-pointers-to-esm",
     "watch": "tsc --watch -p tsconfig-esm.json"
   },
   "dependencies": {
-    "@navikt/ds-icons": "^0.3.2",
-    "@popperjs/core": "^2.5.4",
+    "@material-ui/core": "^4.12.3",
+    "@navikt/ds-icons": "^0.5.3",
+    "@popperjs/core": "^2.10.1",
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.3.1",
     "react-collapse": "^5.1.0",
     "react-merge-refs": "^1.1.0",
-    "react-modal": "3.12.1",
-    "react-popper": "^2.2.4",
+    "react-modal": "3.14.3",
+    "react-popper": "^2.2.5",
     "uuid": "^8.3.2"
   },
   "devDependencies": {
+    "@types/react-router-dom": "^5.1.9",
+    "@types/styled-components": "^5.1.14",
     "copyfiles": "^2.4.1",
-    "react-router-dom": "^5.2.0"
+    "react-router-dom": "^5.3.0",
+    "rimraf": "3.0.2",
+    "styled-components": "^5.3.1"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0"

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

@@ -1,40 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from "react";
-import { AccordionMenu as BaseAccordionMenu } from "../accordion-menu";
-import { Heading } from "../index";
-import { ActiveAnchorProvider } from "./ActiveAnchorStore";
-import cl from "classnames";
-
-export interface AccordionAnchorMenuProps
-  extends HTMLAttributes<HTMLDivElement> {
-  title?: string;
-  children: React.ReactNode;
-  className?: string;
-}
-
-const AccordionAnchorMenu = forwardRef<
-  HTMLDivElement,
-  AccordionAnchorMenuProps
->(({ children, title, className, ...rest }, ref) => (
-  <div
-    className={cl("navds-accordion-anchor-menu", className)}
-    ref={ref}
-    {...rest}
-  >
-    {title && (
-      <Heading
-        level={2}
-        size="medium"
-        className="navds-accordion-anchor-menu__title"
-      >
-        {title}
-      </Heading>
-    )}
-    <ActiveAnchorProvider>
-      <BaseAccordionMenu aria-label={title || "Meny"}>
-        {children}
-      </BaseAccordionMenu>
-    </ActiveAnchorProvider>
-  </div>
-));
-
-export default AccordionAnchorMenu;

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

@@ -1 +0,0 @@
-export { AccordionMenuCollapsable as AccordionAnchorMenuCollapsable } from "../accordion-menu";

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

@@ -1,39 +0,0 @@
-import React, { forwardRef, useEffect } from "react";
-import { AccordionMenuItem, AccordionMenuItemType } from "../accordion-menu";
-import { useStore } from "./ActiveAnchorStore";
-
-const AccordionAnchorMenuItem: AccordionMenuItemType = forwardRef(
-  (props, ref) => {
-    const isAnchorActive = useIsAnchorActive(
-      props.href && props.href.split("#")[1]
-    );
-
-    return (
-      <AccordionMenuItem
-        {...props}
-        ref={ref}
-        active={props.active || isAnchorActive}
-      />
-    );
-  }
-);
-
-const useIsAnchorActive = (anchor: string | undefined) => {
-  const { activeAnchor, registerAnchor, unregisterAnchor } = useStore();
-
-  useEffect(() => {
-    if (anchor) {
-      const target = document.getElementById(anchor);
-      if (target) {
-        registerAnchor(anchor);
-        return () => {
-          unregisterAnchor(anchor);
-        };
-      }
-    }
-  }, [anchor, registerAnchor, unregisterAnchor]);
-
-  return (anchor && activeAnchor === anchor) || false;
-};
-
-export default AccordionAnchorMenuItem;

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

@@ -1,73 +0,0 @@
-import React, {
-  createContext,
-  useCallback,
-  useContext,
-  useState,
-  useEffect,
-} from "react";
-
-export interface ActiveAnchorStore {
-  activeAnchor?: string;
-  registerAnchor: (anchor: string) => void;
-  unregisterAnchor: (anchor: string) => void;
-}
-
-export const ActiveAnchorContext = createContext({} as ActiveAnchorStore);
-export const ActiveAnchorProvider = ({
-  children,
-}: {
-  children: React.ReactNode;
-}) => {
-  const [anchors, setAnchors] = useState<string[]>([]);
-  const [activeAnchor, setActiveAnchor] = useState<string>();
-
-  useEffect(() => {
-    const scrollListener = () => {
-      const offset = 100;
-      const lastPassedAnchor = anchors
-        .map((anchor) => document.getElementById(anchor) as HTMLElement)
-        .map((element: HTMLElement) => ({
-          id: element.id,
-          top: element.getBoundingClientRect().top - offset,
-          scrolledToBottom:
-            window.innerHeight + window.pageYOffset >=
-            document.body.offsetHeight,
-        }))
-        .filter((element) => element.scrolledToBottom || element.top <= 0)
-        .sort((a, b) => (a.top < b.top ? -1 : 1))
-        .map((anchor) => anchor.id)
-        .pop();
-
-      // Set active anchor and related url hash
-      if (lastPassedAnchor && activeAnchor !== lastPassedAnchor) {
-        const { href, hash } = window.location;
-        const urlWithoutHash = href.replace(hash, "");
-        const urlWithAnchor = `${urlWithoutHash}#${lastPassedAnchor}`;
-        const title = document.title;
-        window.history.replaceState(window.history.state, title, urlWithAnchor);
-        setActiveAnchor(lastPassedAnchor);
-      }
-    };
-    window.addEventListener("scroll", scrollListener);
-    return () => {
-      window.removeEventListener("scroll", scrollListener);
-    };
-  }, [anchors, activeAnchor]);
-
-  return (
-    <ActiveAnchorContext.Provider
-      value={{
-        activeAnchor,
-        registerAnchor: useCallback((anchor) => {
-          setAnchors((anchors) => [...anchors, anchor]);
-        }, []),
-        unregisterAnchor: useCallback((anchor) => {
-          setAnchors((anchors) => anchors.filter((a) => a !== anchor));
-        }, []),
-      }}
-    >
-      {children}
-    </ActiveAnchorContext.Provider>
-  );
-};
-export const useStore = () => useContext(ActiveAnchorContext);

@navikt/ds-react/src/accordion-anchor-menu/index.ts

@@ -1,3 +0,0 @@
-export { default as AccordionAnchorMenu } from "./AccordionAnchorMenu";
-export { AccordionAnchorMenuCollapsable } from "./AccordionAnchorMenuCollapsable";
-export { default as AccordionAnchorMenuItem } from "./AccordionAnchorMenuItem";

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

@@ -1,139 +0,0 @@
-import * as React from "react";
-import {
-  AccordionAnchorMenu as Menu,
-  AccordionAnchorMenuCollapsable as Collapsable,
-  AccordionAnchorMenuItem as Item,
-} from "../index";
-import { useEffect } from "react";
-import {
-  ProductPageLayout as Layout,
-  ProductPageSection as Section,
-  ProductPagePanel as Panel,
-} from "../../index";
-import { Right } from "../../layouts/stories/components/sections/Right";
-import { LightBulb, Telephone } from "@navikt/ds-icons";
-import { MainOne } from "../../layouts/stories/components/sections/Main";
-import { MainTwo } from "../../layouts/stories/components/sections/Main";
-import { MainThree } from "../../layouts/stories/components/sections/Main";
-import { Link, HashRouter as Router } from "react-router-dom";
-
-export default {
-  title: "ds-react/accordion-anchor-menu",
-  component: { Menu },
-  decorators: [
-    (Story) => {
-      useEffect(() => {
-        document.getElementById("decorator-header").style.display = "block";
-        document.getElementById("decorator-footer").style.display = "block";
-        return () => {
-          document.getElementById("decorator-header").style.display = "none";
-          document.getElementById("decorator-footer").style.display = "none";
-        };
-      }, []);
-      return <Story />;
-    },
-  ],
-  parameters: {
-    layout: "fullscreen",
-  },
-};
-
-export const All = () => (
-  <Layout title={"Nunc et lorem"}>
-    <Section left sticky withPadding={false}>
-      <Menu title={"Minima"}>
-        <Item href={"#leo-quis"}>Leo quis</Item>
-        <Collapsable title={"Proin accumsan"}>
-          <Item href={"#nulla-pariatur"}>Nulla pariatur</Item>
-          <Item href={"#luctus-justo"}>Luctus justo</Item>
-        </Collapsable>
-        <Item href={"#maecenas-in-pretium"}>Maecenas in pretium</Item>
-      </Menu>
-    </Section>
-    <Section whiteBackground={false} withPadding={false}>
-      <Panel
-        title={"Leo quis"}
-        anchor={"leo-quis"}
-        highlight={true}
-        icon={<LightBulb />}
-      >
-        <MainOne title={false} />
-      </Panel>
-      <Panel title={"Proin accumsan"} anchor={"proin-accumsan"}>
-        <MainTwo title={false} />
-      </Panel>
-      <Panel
-        title={"Maecenas in pretium"}
-        anchor={"maecenas-in-pretium"}
-        icon={<Telephone />}
-      >
-        <MainThree title={false} />
-      </Panel>
-    </Section>
-    <Section right sticky>
-      <Right />
-    </Section>
-  </Layout>
-);
-
-export const ReactRouter = () => (
-  <Layout title={"Nunc et lorem"}>
-    <Section left sticky withPadding={false}>
-      <Menu>
-        <Item component={Link} to="/link1">
-          Leo quis
-        </Item>
-        <Collapsable title={"Proin accumsan"}>
-          <Item component={Link} to="/link2">
-            Nulla pariatur
-          </Item>
-          <Item component={Link} to="/link3">
-            Luctus justo
-          </Item>
-        </Collapsable>
-        <Collapsable title={"Sint cupidatat"}>
-          <Item component={Link} to="/link4">
-            Nulla pariatur
-          </Item>
-          <Item component={Link} to="/link5">
-            Luctus justo
-          </Item>
-        </Collapsable>
-        <Item component={Link} to="/link6">
-          Maecenas in pretium
-        </Item>
-      </Menu>
-    </Section>
-    <Section whiteBackground={false} withPadding={false}>
-      <Panel
-        title={"Leo quis"}
-        anchor={"leo-quis"}
-        highlight={true}
-        icon={<LightBulb />}
-      >
-        <MainOne title={false} />
-      </Panel>
-      <Panel title={"Proin accumsan"} anchor={"proin-accumsan"}>
-        <MainTwo title={false} />
-      </Panel>
-      <Panel
-        title={"Maecenas in pretium"}
-        anchor={"maecenas-in-pretium"}
-        icon={<Telephone />}
-      >
-        <MainThree title={false} />
-      </Panel>
-    </Section>
-    <Section right sticky>
-      <Right />
-    </Section>
-  </Layout>
-);
-
-ReactRouter.decorators = [
-  (Story) => (
-    <Router>
-      <Story />
-    </Router>
-  ),
-];

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

@@ -1,10 +1,21 @@
-import React, { forwardRef, HTMLAttributes } from "react";
+import React, { forwardRef } from "react";
 import cl from "classnames";
 import MenuItems from "./MenuItems";
+import Collapsable, {
+  AccordionMenuCollapsableType,
+} from "./AccordionMenuCollapsable";
+import Item, { AccordionMenuItemType } from "./AccordionMenuItem";
 
-export interface AccordionMenuProps extends HTMLAttributes<HTMLElement> {
+export interface AccordionMenuProps extends React.HTMLAttributes<HTMLElement> {
   children: React.ReactNode;
-  className?: string;
+}
+
+interface AccordionMenuComponent
+  extends React.ForwardRefExoticComponent<
+    AccordionMenuProps & React.RefAttributes<HTMLElement>
+  > {
+  Collapsable: AccordionMenuCollapsableType;
+  Item: AccordionMenuItemType;
 }
 
 const AccordionMenu = forwardRef<HTMLElement, AccordionMenuProps>(
@@ -20,6 +31,9 @@ const AccordionMenu = forwardRef<HTMLElement, AccordionMenuProps>(
       </nav>
     );
   }
-);
+) as AccordionMenuComponent;
+
+AccordionMenu.Collapsable = Collapsable;
+AccordionMenu.Item = Item;
 
 export default AccordionMenu;

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

@@ -8,37 +8,40 @@ export interface AccordionMenuCollapsableProps
   title: string;
   defaultOpen?: boolean;
   children: React.ReactNode;
-  className?: string;
 }
 
-const AccordionMenuCollapsable = forwardRef<
-  HTMLDivElement,
-  AccordionMenuCollapsableProps
->(({ children, defaultOpen = false, title, className, ...rest }, ref) => {
-  const [isOpen, setIsOpen] = useState(defaultOpen);
+export type AccordionMenuCollapsableType = React.ForwardRefExoticComponent<
+  AccordionMenuCollapsableProps & React.RefAttributes<HTMLDivElement>
+>;
 
-  return (
-    <div
-      ref={ref}
-      className={cl("navds-accordion-menu-collapsable", className, {
-        "navds-accordion-menu-collapsable--open": isOpen,
-      })}
-      {...rest}
-    >
-      <button
-        onClick={() => setIsOpen(!isOpen)}
-        className="navds-accordion-menu-collapsable__button"
+const Collapsable: AccordionMenuCollapsableType = forwardRef(
+  ({ children, defaultOpen = false, title, className, ...rest }, ref) => {
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+
+    return (
+      <div
+        ref={ref}
+        className={cl("navds-accordion-menu-collapsable", className, {
+          "navds-accordion-menu-collapsable--open": isOpen,
+        })}
+        {...rest}
       >
-        {title}
-        <Expand
-          role="img"
-          aria-label={isOpen ? "Pil peker opp" : "Pil peker ned"}
-          className="navds-accordion-menu-collapsable__expand-icon"
-        />
-      </button>
-      {isOpen && <MenuItems>{children}</MenuItems>}
-    </div>
-  );
-});
+        <button
+          onClick={() => setIsOpen(!isOpen)}
+          className="navds-accordion-menu-collapsable__button"
+        >
+          {title}
+          <Expand
+            role="img"
+            focusable="false"
+            aria-label={isOpen ? "Pil peker opp" : "Pil peker ned"}
+            className="navds-accordion-menu-collapsable__expand-icon"
+          />
+        </button>
+        {isOpen && <MenuItems>{children}</MenuItems>}
+      </div>
+    );
+  }
+);
 
-export default AccordionMenuCollapsable;
+export default Collapsable;

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

@@ -1,26 +1,25 @@
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../util";
+import { OverridableComponent } from "..";
 import cl from "classnames";
 
-export type AccordionMenuItemType = OverridableComponent<AccordionMenuItemProps>;
-
-export interface AccordionMenuItemProps {
-  props: {
-    children: React.ReactNode;
-    active?: boolean;
-  } & React.HTMLAttributes<HTMLAnchorElement>;
-  defaultComponent: "a";
+export interface AccordionMenuItemProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  children: React.ReactNode;
+  /**
+   * Sets active styling if true
+   * @default false
+   */
+  active?: boolean;
 }
 
-const AccordionMenuItem: AccordionMenuItemType = forwardRef(
+export type AccordionMenuItemType = OverridableComponent<
+  AccordionMenuItemProps,
+  HTMLAnchorElement
+>;
+
+const Item: AccordionMenuItemType = forwardRef(
   (
-    {
-      children,
-      component: Component = "a",
-      active = false,
-      className,
-      ...rest
-    },
+    { children, as: Component = "a", active = false, className, ...rest },
     ref
   ) => {
     return (
@@ -37,4 +36,4 @@ const AccordionMenuItem: AccordionMenuItemType = forwardRef(
   }
 );
 
-export default AccordionMenuItem;
+export default Item;

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

@@ -1,8 +1,5 @@
 import React from "react";
 
-/**
- * @ignore
- */
 const MenuItems = ({ children }: { children: React.ReactNode }) => (
   <ul className="navds-accordion-menu__list">
     {React.Children.toArray(children).map((child, i) => (

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

@@ -1,6 +1,3 @@
-export { default as AccordionMenu } from "./AccordionMenu";
-export { default as AccordionMenuCollapsable } from "./AccordionMenuCollapsable";
-export {
-  default as AccordionMenuItem,
-  AccordionMenuItemType,
-} from "./AccordionMenuItem";
+export { default as AccordionMenu, AccordionMenuProps } from "./AccordionMenu";
+export { AccordionMenuCollapsableProps } from "./AccordionMenuCollapsable";
+export { AccordionMenuItemProps } from "./AccordionMenuItem";

@navikt/ds-react/src/accordion-menu/stories/accordion-menu.stories.mdx

@@ -0,0 +1,66 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+import { AccordionMenu } from "../../index";
+
+<Meta title="ds-react/accordion-menu/intro" />
+
+# Hvordan ta i bruk Accordion-menu
+
+```jsx
+<AccordionMenu>
+  <AccordionMenu.item href="#leo">Leo</AccordionMenu.item>
+  <AccordionMenu.Collapsable title="Proin">
+    <AccordionMenu.item href="#nulla" active>
+      Nulla
+    </AccordionMenu.item>
+    <AccordionMenu.item href="#luctus">Luctus</AccordionMenu.item>
+  </AccordionMenu.Collapsable>
+  <AccordionMenu.Collapsable title="Accumsan">
+    <AccordionMenu.item href="#justo" aria-current="page">
+      Justo
+    </AccordionMenu.item>
+    <AccordionMenu.Collapsable title="Proin">
+      <AccordionMenu.item href="#nulla">Nulla</AccordionMenu.item>
+      <AccordionMenu.item href="#luctus">Luctus</AccordionMenu.item>
+    </AccordionMenu.Collapsable>
+  </AccordionMenu.Collapsable>
+</AccordionMenu>
+```
+
+<Canvas>
+  <AccordionMenu>
+    <AccordionMenu.Item href="#leo">Leo</AccordionMenu.Item>
+    <AccordionMenu.Collapsable title="Proin">
+      <AccordionMenu.Item href="#nulla" active>
+        Nulla
+      </AccordionMenu.Item>
+      <AccordionMenu.Item href="#luctus">Luctus</AccordionMenu.Item>
+    </AccordionMenu.Collapsable>
+    <AccordionMenu.Collapsable title="Accumsan">
+      <AccordionMenu.Item href="#justo" aria-current="page">
+        Justo
+      </AccordionMenu.Item>
+      <AccordionMenu.Collapsable title="Proin">
+        <AccordionMenu.Item href="#nulla">Nulla</AccordionMenu.Item>
+        <AccordionMenu.Item href="#luctus">Luctus</AccordionMenu.Item>
+      </AccordionMenu.Collapsable>
+    </AccordionMenu.Collapsable>
+  </AccordionMenu>
+</Canvas>
+
+Accordion-menu støtter opp til maks to-nivårer av `AccordionMenu.Collapsable` akkurat nå.
+
+`AccordionMenu.Item` er implementert med `OverridableComponent`, noe som
+gjør at man kan ta i bruk eks react-router slik:
+
+```jsx
+<AccordionMenu.item
+  as={NavLink}
+  activeClassName="navds-accordion-menu-item--active"
+  to="/1"
+>
+  Lenketekst
+</AccordionMenu.item>
+```
+
+Her er `NavLink` fra `react-router-dom` brukt, og man får da
+samtidig bruke alle propsene til denne komponenten som da er `activeClassName` her.

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

@@ -1,29 +1,10 @@
 import * as React from "react";
-import {
-  AccordionMenu,
-  AccordionMenuItem as Item,
-  AccordionMenuCollapsable as Collapsable,
-} from "../index";
+import { AccordionMenu } from "../index";
 import { NavLink, HashRouter as Router } from "react-router-dom";
 
 export default {
   title: "ds-react/accordion-menu",
   component: { AccordionMenu },
-  parameters: {
-    backgrounds: {
-      default: "light",
-      values: [
-        {
-          name: "light",
-          value: "#F1F1F1",
-        },
-        {
-          name: "white",
-          value: "#fff",
-        },
-      ],
-    },
-  },
 };
 
 export const All = () => (
@@ -34,113 +15,113 @@ export const All = () => (
     }}
   >
     <AccordionMenu>
-      <Item href="#leo">Leo</Item>
-      <Collapsable title="Proin">
-        <Item href="#nulla" active>
+      <AccordionMenu.Item href="#leo">Leo</AccordionMenu.Item>
+      <AccordionMenu.Collapsable title="Proin">
+        <AccordionMenu.Item href="#nulla" active>
           Nulla
-        </Item>
-        <Item href="#luctus">Luctus</Item>
-      </Collapsable>
-      <Collapsable title="Accumsan">
-        <Item href="#justo" ariaCurrent="page">
+        </AccordionMenu.Item>
+        <AccordionMenu.Item href="#luctus">Luctus</AccordionMenu.Item>
+      </AccordionMenu.Collapsable>
+      <AccordionMenu.Collapsable title="Accumsan">
+        <AccordionMenu.Item href="#justo" aria-current="page">
           Justo
-        </Item>
-        <Item href="#pariatur" active ariaCurrent="page">
+        </AccordionMenu.Item>
+        <AccordionMenu.Item href="#pariatur" active aria-current="page">
           Pariatur
-        </Item>
-        <Collapsable title="Proin">
-          <Item href="#nulla" active>
+        </AccordionMenu.Item>
+        <AccordionMenu.Collapsable title="Proin">
+          <AccordionMenu.Item href="#nulla" active>
             Nulla
-          </Item>
-          <Item href="#luctus">Luctus</Item>
-        </Collapsable>
-      </Collapsable>
-      <Item href="#justo" active>
+          </AccordionMenu.Item>
+          <AccordionMenu.Item href="#luctus">Luctus</AccordionMenu.Item>
+        </AccordionMenu.Collapsable>
+      </AccordionMenu.Collapsable>
+      <AccordionMenu.Item href="#justo" active>
         Justo
-      </Item>
-      <Item href="#pariatur">Pariatur</Item>
+      </AccordionMenu.Item>
+      <AccordionMenu.Item href="#pariatur">Pariatur</AccordionMenu.Item>
     </AccordionMenu>
   </div>
 );
 
 export const ReactRouter = () => (
   <AccordionMenu>
-    <Collapsable title="Nivå 1 – 3 rems høy">
-      <Item
-        component={NavLink}
+    <AccordionMenu.Collapsable title="Nivå 1 – 3 rems høy">
+      <AccordionMenu.Item
+        as={NavLink}
         activeClassName="navds-accordion-menu-item--active"
         to="/1"
       >
         Nivå 2 innrykk 2 rems
-      </Item>
-      <Item
-        component={NavLink}
+      </AccordionMenu.Item>
+      <AccordionMenu.Item
+        as={NavLink}
         activeClassName="navds-accordion-menu-item--active"
         to="/2"
       >
         Subtitle 3
-      </Item>
-    </Collapsable>
-    <Collapsable title="Skjema og søknad">
-      <Collapsable title="Satser">
-        <Item
-          component={NavLink}
+      </AccordionMenu.Item>
+    </AccordionMenu.Collapsable>
+    <AccordionMenu.Collapsable title="Skjema og søknad">
+      <AccordionMenu.Collapsable title="Satser">
+        <AccordionMenu.Item
+          as={NavLink}
           activeClassName="navds-accordion-menu-item--active"
           to="/3"
         >
           Nivå 3 – 3 rems innrykk Har du rett til dagpenger når du mottar annen
           økonomisk støtte fra NAV?
-        </Item>
-      </Collapsable>
-      <Item
-        component={NavLink}
+        </AccordionMenu.Item>
+      </AccordionMenu.Collapsable>
+      <AccordionMenu.Item
+        as={NavLink}
         activeClassName="navds-accordion-menu-item--active"
         to="/4"
       >
         Subtitle 2
-      </Item>
-      <Item
-        component={NavLink}
+      </AccordionMenu.Item>
+      <AccordionMenu.Item
+        as={NavLink}
         activeClassName="navds-accordion-menu-item--active"
         to="/5"
       >
         Subtitle 3
-      </Item>
-    </Collapsable>
-    <Collapsable title="Sakbehandlingstider">
-      <Collapsable title="Subtitle 4 Lang tittel på andre nivå lorem ipsum">
-        <Item
-          component={NavLink}
+      </AccordionMenu.Item>
+    </AccordionMenu.Collapsable>
+    <AccordionMenu.Collapsable title="Sakbehandlingstider">
+      <AccordionMenu.Collapsable title="Subtitle 4 Lang tittel på andre nivå lorem ipsum">
+        <AccordionMenu.Item
+          as={NavLink}
           activeClassName="navds-accordion-menu-item--active"
           to="/6"
         >
           Subtitle 5
-        </Item>
-      </Collapsable>
-    </Collapsable>
-    <Item
-      component={NavLink}
+        </AccordionMenu.Item>
+      </AccordionMenu.Collapsable>
+    </AccordionMenu.Collapsable>
+    <AccordionMenu.Item
+      as={NavLink}
       activeClassName="navds-accordion-menu-item--active"
       to="/7"
     >
       Internasjonalt
-    </Item>
-    <Collapsable title="Meld fra om endringer lang tittel på første nivå">
-      <Item
-        component={NavLink}
+    </AccordionMenu.Item>
+    <AccordionMenu.Collapsable title="Meld fra om endringer lang tittel på første nivå">
+      <AccordionMenu.Item
+        as={NavLink}
         activeClassName="navds-accordion-menu-item--active"
         to="/8"
       >
         Subtitle 6
-      </Item>
-    </Collapsable>
-    <Item
-      component={NavLink}
+      </AccordionMenu.Item>
+    </AccordionMenu.Collapsable>
+    <AccordionMenu.Item
+      as={NavLink}
       activeClassName="navds-accordion-menu-item--active"
       to="/9"
     >
       Nivå 1
-    </Item>
+    </AccordionMenu.Item>
   </AccordionMenu>
 );
 

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

@@ -1,103 +1,33 @@
-import React, { forwardRef, useEffect, useRef, useState } from "react";
 import cl from "classnames";
-import { UnmountClosed, Collapse } from "react-collapse";
-import { Expand } from "@navikt/ds-icons";
-import { v4 as uuidv4 } from "uuid";
+import React, { forwardRef } from "react";
+import AccordionItem, { AccordionItemType } from "./AccordionItem";
+import AccordionContent, { AccordionContentType } from "./AccordionContent";
+import AccordionHeader, { AccordionHeaderType } from "./AccordionHeader";
 
-export interface AccordionProps
-  extends React.HTMLAttributes<HTMLButtonElement> {
+interface AccordionComponent
+  extends React.ForwardRefExoticComponent<
+    AccordionProps & React.RefAttributes<HTMLDivElement>
+  > {
+  Item: AccordionItemType;
+  Header: AccordionHeaderType;
+  Content: AccordionContentType;
+}
+
+export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
-   * Component content
+   * Content inside accordion
    */
   children: React.ReactNode;
-  /**
-   * @ignore
-   */
-  className?: string;
-  /**
-   * Content on interactive surface of component
-   */
-  heading: React.ReactNode;
-  /**
-   * Opens component if 'true', closes if 'false'
-   * Using this props removes automatic control of open-state
-   * @default false
-   */
-  open?: boolean;
-  /**
-   * Callback for when user interacts with component
-   *
-   * @param {object} event
-   */
-  onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-  /**
-   * Removes content-element from dom when closed
-   * @default false
-   */
-  renderContentWhenClosed?: boolean;
 }
 
 const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
-  (
-    {
-      children,
-      heading,
-      open = false,
-      className,
-      renderContentWhenClosed = false,
-      onClick,
-      ...rest
-    },
-    ref
-  ) => {
-    const contentId = useRef(uuidv4());
-    const buttonId = useRef(uuidv4());
-    const [internalOpen, setInternalOpen] = useState<boolean>(open);
+  ({ className, ...rest }, ref) => (
+    <div {...rest} className={cl("navds-accordion", className)} ref={ref} />
+  )
+) as AccordionComponent;
 
-    useEffect(() => {
-      setInternalOpen(open);
-    }, [open]);
-
-    const CollapseComponent = renderContentWhenClosed
-      ? Collapse
-      : UnmountClosed;
-
-    return (
-      <div
-        ref={ref}
-        className={cl("navds-accordion", className, {
-          "navds-accordion--open": internalOpen,
-          "navds-accordion--closed": !internalOpen,
-        })}
-      >
-        <button
-          id={buttonId.current}
-          className="navds-accordion__button"
-          aria-expanded={open}
-          aria-controls={contentId.current}
-          onClick={onClick ? onClick : () => setInternalOpen((open) => !open)}
-          {...rest}
-        >
-          <span className="navds-accordion__heading">{heading}</span>
-          <Expand
-            className={cl(
-              "navds-accordion__chevron",
-              `navds-accordion__chevron--${internalOpen ? "up" : "down"}`
-            )}
-          />
-        </button>
-        <div
-          id={contentId.current}
-          role="region"
-          aria-labelledby={buttonId.current}
-        >
-          <CollapseComponent isOpened={internalOpen}>
-            <div className="navds-accordion__content">{children}</div>
-          </CollapseComponent>
-        </div>
-      </div>
-    );
-  }
-);
+Accordion.Header = AccordionHeader;
+Accordion.Content = AccordionContent;
+Accordion.Item = AccordionItem;
 
 export default Accordion;

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

@@ -0,0 +1,59 @@
+import cl from "classnames";
+import React, { forwardRef, useContext } from "react";
+import { Collapse, UnmountClosed } from "react-collapse";
+import { useClientLayoutEffect, useId } from "../util";
+import { AccordionItemContext } from "./AccordionItem";
+
+export interface AccordionContentProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Accordion panel content
+   */
+  children: React.ReactNode;
+}
+
+export type AccordionContentType = React.ForwardRefExoticComponent<
+  AccordionContentProps & React.RefAttributes<HTMLDivElement>
+>;
+
+const AccordionContent: AccordionContentType = forwardRef(
+  ({ children, className, id, ...rest }, ref) => {
+    const context = useContext(AccordionItemContext);
+
+    const newId = useId(id);
+    const setContentId = context && context.setContentId;
+
+    useClientLayoutEffect(() => {
+      setContentId && setContentId(id ? newId : `accordionContent-${newId}`);
+    }, [setContentId, newId]);
+
+    if (context === null) {
+      console.error(
+        "<Accordion.Content> has to be used within an <Accordion.Item>"
+      );
+      return null;
+    }
+
+    const CollapseComponent = context.renderContentWhenClosed
+      ? Collapse
+      : UnmountClosed;
+
+    return (
+      <div
+        ref={ref}
+        id={context.contentId}
+        role="region"
+        aria-labelledby={context.buttonId}
+        {...rest}
+      >
+        <CollapseComponent isOpened={context.open}>
+          <div className={cl("navds-accordion__content", className)}>
+            {children}
+          </div>
+        </CollapseComponent>
+      </div>
+    );
+  }
+);
+
+export default AccordionContent;

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

@@ -0,0 +1,84 @@
+import { Expand, ExpandFilled } from "@navikt/ds-icons";
+import cl from "classnames";
+import React, { forwardRef, useContext } from "react";
+import { AccordionItemContext } from "./AccordionItem";
+import { useClientLayoutEffect, useId } from "..";
+
+export interface AccordionHeaderProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * Button content
+   */
+  children: React.ReactNode;
+}
+
+export type AccordionHeaderType = React.ForwardRefExoticComponent<
+  AccordionHeaderProps & React.RefAttributes<HTMLButtonElement>
+>;
+
+const AccordionHeader: AccordionHeaderType = forwardRef(
+  ({ children, className, id, onClick, ...rest }, ref) => {
+    const context = useContext(AccordionItemContext);
+    const newId = useId(id);
+
+    const setButtonId = context && context.setButtonId;
+
+    useClientLayoutEffect(() => {
+      setButtonId && setButtonId(id ? newId : `accordionContent-${newId}`);
+    }, [setButtonId, newId]);
+
+    if (context === null) {
+      console.error(
+        "<Accordion.Header> has to be used within an <Accordion.Item>"
+      );
+      return null;
+    }
+
+    const handleClick = (
+      e: React.MouseEvent<HTMLButtonElement, MouseEvent>
+    ) => {
+      context.toggleOpen();
+      onClick && onClick(e);
+    };
+
+    return (
+      <button
+        ref={ref}
+        id={context.buttonId}
+        className={cl(
+          "navds-accordion__header",
+          className,
+          "navds-heading",
+          "navds-heading--small"
+        )}
+        onClick={handleClick}
+        aria-controls={context.contentId}
+        {...rest}
+      >
+        {children}
+        <Expand
+          focusable="false"
+          role="img"
+          aria-label={context.open ? "Lukk panel ikon" : "Åpne panel ikon"}
+          className={cl("navds-accordion__expand-icon", {
+            "navds-accordion__expand-icon--flip": context.open,
+          })}
+        />
+        <ExpandFilled
+          focusable="false"
+          role="img"
+          aria-label={context.open ? "Lukk panel ikon" : "Åpne panel ikon"}
+          className={cl(
+            "navds-accordion__expand-icon",
+            "navds-accordion__expand-icon--filled",
+            {
+              "navds-accordion__expand-icon--flip": context.open,
+            }
+          )}
+        />
+      </button>
+    );
+  }
+);
+
+export default AccordionHeader;

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

@@ -0,0 +1,93 @@
+import cl from "classnames";
+import React, { createContext, forwardRef, useState } from "react";
+
+export interface AccordionItemProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Content inside accordion item
+   */
+  children: React.ReactNode;
+  /**
+   * Opens component if 'true', closes if 'false'
+   * Using this props removes automatic control of open-state
+   */
+  open?: boolean;
+  /**
+   * Defaults the accordion to opened state
+   * @default false
+   */
+  defaultOpen?: boolean;
+  /**
+   * Removes content-element from dom when closed
+   * @default false
+   */
+  renderContentWhenClosed?: boolean;
+}
+
+export type AccordionItemType = React.ForwardRefExoticComponent<
+  AccordionItemProps & React.RefAttributes<HTMLDivElement>
+>;
+
+export interface AccordionItemContextProps {
+  open: boolean;
+  toggleOpen: () => void;
+  setButtonId: (id: string) => void;
+  setContentId: (id: string) => void;
+  buttonId: string;
+  contentId: string;
+  renderContentWhenClosed: boolean;
+}
+
+export const AccordionItemContext = createContext<AccordionItemContextProps | null>(
+  null
+);
+
+const AccordionItem: AccordionItemType = forwardRef(
+  (
+    {
+      children,
+      className,
+      open,
+      defaultOpen = false,
+      renderContentWhenClosed = false,
+      onClick,
+      id,
+      ...rest
+    },
+    ref
+  ) => {
+    const [internalOpen, setInternalOpen] = useState<boolean>(defaultOpen);
+    const [buttonId, setButtonId] = useState("");
+    const [contentId, setContentId] = useState("");
+
+    return (
+      <div
+        className={cl("navds-accordion__item", className, {
+          "navds-accordion__item--open": open ?? internalOpen,
+        })}
+        ref={ref}
+        {...rest}
+      >
+        <AccordionItemContext.Provider
+          value={{
+            open: open ?? internalOpen,
+            toggleOpen: () => {
+              if (open === undefined) {
+                setInternalOpen((iOpen) => !iOpen);
+              }
+            },
+            renderContentWhenClosed,
+            setButtonId,
+            buttonId,
+            setContentId,
+            contentId,
+          }}
+        >
+          {children}
+        </AccordionItemContext.Provider>
+      </div>
+    );
+  }
+);
+
+export default AccordionItem;

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

@@ -0,0 +1,72 @@
+import { Meta, Canvas, Props } from "@storybook/addon-docs";
+import { Accordion } from "../../index";
+
+<Meta title="ds-react/accordion/intro" />
+
+# Hvordan ta i bruk Accordion
+
+```jsx
+<Accordion>
+  <Accordion.Item>
+    <Accordion.Header>Accordion header text</Accordion.Header>
+    <Accordion.Content>
+      Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam officia
+      laboris voluptate officia pariatur.Lorem est ex anim velit occaecat nisi
+      qui nostrud sit.
+    </Accordion.Content>
+  </Accordion.Item>
+  <Accordion.Item>
+    <Accordion.Header>Aliquip amet irure consectetur occaecat</Accordion.Header>
+    <Accordion.Content>
+      Cupidatat aliqua eu ea et anim excepteur. Labore aliquip dolore laborum
+      consequat. Reprehenderit ad velit quis eiusmod ex sint aliquip do deserunt
+      amet exercitation velit Lorem.
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion>
+```
+
+<Canvas>
+  <Accordion>
+    <Accordion.Item>
+      <Accordion.Header>Accordion header text</Accordion.Header>
+      <Accordion.Content>
+        Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
+        officia laboris voluptate officia pariatur.Lorem est ex anim velit
+        occaecat nisi qui nostrud sit.
+      </Accordion.Content>
+    </Accordion.Item>
+    <Accordion.Item>
+      <Accordion.Header>
+        Aliquip amet irure consectetur occaecat
+      </Accordion.Header>
+      <Accordion.Content>
+        Cupidatat aliqua eu ea et anim excepteur. Labore aliquip dolore laborum
+        consequat. Reprehenderit ad velit quis eiusmod ex sint aliquip do
+        deserunt amet exercitation velit Lorem.
+      </Accordion.Content>
+    </Accordion.Item>
+  </Accordion>
+</Canvas>
+
+## Controlled state
+
+Accordion-komponeten styrer selv open-state, men om man ønsker kan man selv overskrive denne med
+`open`-prop + `onClick`-prop slik det er gjort på eksemplet.
+
+```jsx
+<Accordion>
+  <Accordion.Item open={open}>
+    <Accordion.Header onClick={(open) => setOpen(!open)}>
+      Accordion header text
+    </Accordion.Header>
+    <Accordion.Content>
+      Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam officia
+      laboris voluptate officia pariatur.Lorem est ex anim velit
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion>
+```
+
+`renderContentWhenClosed`-prop på `Accordion.Item` bestemmer om innholdet (children) skal beholdes i dom-strukturen mens
+Accordion er lukket. Defaulter til `false`.

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

@@ -1,9 +1,17 @@
 import React, { useState } from "react";
+import AccordionContent from "../AccordionContent";
+import AccordionHeader from "../AccordionHeader";
+import AccordionItem from "../AccordionItem";
 import { Accordion } from "../index";
 
 export default {
   title: "ds-react/accordion",
   component: Accordion,
+  subcomponents: {
+    AccordionItem,
+    AccordionContent,
+    AccordionHeader,
+  },
 };
 
 export const All = () => {
@@ -11,49 +19,74 @@ export const All = () => {
 
   return (
     <>
-      <h1>Accordion</h1>
-      <Accordion heading="tittel" open={open} onClick={(e) => setOpen(!open)}>
-        Eu magna fugiat officia sit ullamco reprehenderit reprehenderit officia.
-        Culpa fugiat irure deserunt irure enim adipisicing qui id. Pariatur
-        commodo dolore consequat nulla cupidatat commodo nisi sunt. Ad proident
-        occaecat cillum eu Lorem proident sunt anim officia voluptate. Veniam
-        ullamco magna elit amet mollit exercitation magna quis ad occaecat in
-        elit. Labore ad id pariatur consequat consectetur ullamco culpa dolor
-        dolor. Sunt irure eiusmod velit duis excepteur veniam consectetur eu
-        occaecat reprehenderit qui anim dolore. Ea voluptate dolore proident
-        esse aliqua amet magna pariatur incididunt ea excepteur. Aliquip magna
-        ut ipsum veniam eu laborum id commodo.
-      </Accordion>
-      <h1>Open</h1>
-      <Accordion heading="tittel" open={true} onClick={(e) => null}>
-        Eu magna fugiat officia sit ullamco reprehenderit reprehenderit officia.
-        Culpa fugiat irure deserunt irure enim adipisicing qui id. Pariatur
-        commodo dolore consequat nulla cupidatat commodo nisi sunt. Ad proident
-        occaecat cillum eu Lorem proident sunt anim officia voluptate. Veniam
-        ullamco magna elit amet mollit exercitation magna quis ad occaecat in
-        elit. Labore ad id pariatur consequat consectetur ullamco culpa dolor
-        dolor. Sunt irure eiusmod velit duis excepteur veniam consectetur eu
-        occaecat reprehenderit qui anim dolore. Ea voluptate dolore proident
-        esse aliqua amet magna pariatur incididunt ea excepteur. Aliquip magna
-        ut ipsum veniam eu laborum id commodo.
-      </Accordion>
-      <h1>Long heading</h1>
-      <Accordion
-        heading="Consequat incididunt aliquip aliquip fugiat anim cupidatat eu do ipsum pariatur."
-        open={open}
-        onClick={(e) => setOpen(!open)}
-      >
-        Eu magna fugiat officia sit ullamco reprehenderit reprehenderit officia.
-        Culpa fugiat irure deserunt irure enim adipisicing qui id. Pariatur
-        commodo dolore consequat nulla cupidatat commodo nisi sunt. Ad proident
-        occaecat cillum eu Lorem proident sunt anim officia voluptate. Veniam
-        ullamco magna elit amet mollit exercitation magna quis ad occaecat in
-        elit. Labore ad id pariatur consequat consectetur ullamco culpa dolor
-        dolor. Sunt irure eiusmod velit duis excepteur veniam consectetur eu
-        occaecat reprehenderit qui anim dolore. Ea voluptate dolore proident
-        esse aliqua amet magna pariatur incididunt ea excepteur. Aliquip magna
-        ut ipsum veniam eu laborum id commodo.
-      </Accordion>
+      <div>
+        <h1>Accordion</h1>
+        <h2>Controlled</h2>
+        <Accordion>
+          <Accordion.Item open={open}>
+            <Accordion.Header onClick={() => setOpen(!open)}>
+              Accordion header text
+            </Accordion.Header>
+            <Accordion.Content>
+              Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
+              officia laboris voluptate officia pariatur.Lorem est ex anim velit
+              occaecat nisi qui nostrud sit consectetur consectetur officia
+              nostrud ullamco. Est ex duis proident nostrud elit qui laborum
+              anim minim eu eiusmod. Veniam in nostrud sunt tempor velit
+              incididunt sint ex dolor qui velit id eu. Deserunt magna sunt
+              velit in. Est exercitation id cillum qui do. Minim adipisicing
+              nostrud commodo proident occaecat aliquip nulla anim proident
+              reprehenderit. Magna ipsum officia veniam cupidatat duis veniam
+              dolore reprehenderit mollit velit.Ut consequat commodo minim
+              occaecat id pariatur. Nisi enim tempor laborum commodo. Tempor sit
+              quis nostrud eu cupidatat sunt commodo reprehenderit irure
+              deserunt eiusmod ipsum. Exercitation quis commodo cillum eiusmod
+              eiusmod. Do laborum qui proident commodo adipisicing eiusmod id.
+            </Accordion.Content>
+          </Accordion.Item>
+        </Accordion>
+        <h2>Un-controlled</h2>
+        <Accordion>
+          <Accordion.Item>
+            <Accordion.Header>Accordion header text</Accordion.Header>
+            <Accordion.Content>
+              Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
+              officia laboris voluptate officia pariatur.Lorem est ex anim velit
+              occaecat nisi qui nostrud sit consectetur consectetur officia
+              nostrud ullamco. Est ex duis proident nostrud elit qui laborum
+              anim minim eu eiusmod. Veniam in nostrud sunt tempor velit
+              incididunt sint ex dolor qui velit id eu. Deserunt magna sunt
+              velit in. Est exercitation id cillum qui do. Minim adipisicing
+              nostrud commodo proident occaecat aliquip nulla anim proident
+              reprehenderit. Magna ipsum officia veniam cupidatat duis veniam
+              dolore reprehenderit mollit velit.Ut consequat commodo minim
+              occaecat id pariatur. Nisi enim tempor laborum commodo. Tempor sit
+              quis nostrud eu cupidatat sunt commodo reprehenderit irure
+              deserunt eiusmod ipsum. Exercitation quis commodo cillum eiusmod
+              eiusmod. Do laborum qui proident commodo adipisicing eiusmod id.
+            </Accordion.Content>
+          </Accordion.Item>
+          <Accordion.Item>
+            <Accordion.Header>Accordion header text</Accordion.Header>
+            <Accordion.Content>
+              Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
+              officia laboris voluptate officia pariatur.Lorem est ex anim velit
+              occaecat nisi qui nostrud sit consectetur consectetur officia
+              nostrud ullamco. Est ex duis proident nostrud elit qui laborum
+              anim minim eu eiusmod. Veniam in nostrud sunt tempor velit
+              incididunt sint ex dolor qui velit id eu. Deserunt magna sunt
+              velit in. Est exercitation id cillum qui do. Minim adipisicing
+              nostrud commodo proident occaecat aliquip nulla anim proident
+              reprehenderit. Magna ipsum officia veniam cupidatat duis veniam
+              dolore reprehenderit mollit velit.Ut consequat commodo minim
+              occaecat id pariatur. Nisi enim tempor laborum commodo. Tempor sit
+              quis nostrud eu cupidatat sunt commodo reprehenderit irure
+              deserunt eiusmod ipsum. Exercitation quis commodo cillum eiusmod
+              eiusmod. Do laborum qui proident commodo adipisicing eiusmod id.
+            </Accordion.Content>
+          </Accordion.Item>
+        </Accordion>
+      </div>
     </>
   );
 };

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

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import React, { createContext, forwardRef } from "react";
 import cl from "classnames";
 import {
   ErrorFilled,
@@ -6,58 +6,103 @@ import {
   InformationFilled,
   SuccessFilled,
 } from "@navikt/ds-icons";
+import AlertContent, { AlertContentType } from "./AlertContent";
+import AlertTitle, { AlertTitleType } from "./AlertTitle";
+import { BodyLong } from "..";
 
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Alert content
+   */
+  children: React.ReactNode;
   /**
    * Decides what design the alert will have
    */
   variant: "error" | "warning" | "info" | "success";
   /**
-   * Component content
-   */
-  children: React.ReactNode;
-  /**
-   * @ignore
-   */
-  className?: string;
-  /**
-   * Reduces padding on component
+   * Changes padding and font-sizes
    * @default "medium"
    */
   size?: "medium" | "small";
+  /**
+   * Toggles full-width Alert
+   * @default false
+   */
+  fullWidth?: boolean;
+  /**
+   * Removes background from Alert
+   */
+  inline?: boolean;
 }
 
-const Icon = ({ variant }) => {
+const Icon = ({ variant, ...props }) => {
   switch (variant) {
     case "error":
-      return <ErrorFilled />;
+      return <ErrorFilled {...props} />;
     case "warning":
-      return <WarningFilled />;
+      return <WarningFilled {...props} />;
     case "info":
-      return <InformationFilled />;
+      return <InformationFilled {...props} />;
     case "success":
-      return <SuccessFilled />;
+      return <SuccessFilled {...props} />;
     default:
       return null;
   }
 };
 
+export interface AlertContextProps {
+  size: "medium" | "small";
+}
+
+export const AlertContext = createContext<AlertContextProps | null>(null);
+interface AlertComponent
+  extends React.ForwardRefExoticComponent<
+    AlertProps & React.RefAttributes<HTMLDivElement>
+  > {
+  Title: AlertTitleType;
+  Content: AlertContentType;
+}
+
 const Alert = forwardRef<HTMLDivElement, AlertProps>(
-  ({ variant, children, className, size = "medium", ...rest }, ref) => (
+  (
+    {
+      children,
+      className,
+      variant,
+      size = "medium",
+      fullWidth = false,
+      inline = false,
+      ...rest
+    },
+    ref
+  ) => (
     <div
+      {...rest}
       ref={ref}
       className={cl(
         className,
         "navds-alert",
         `navds-alert--${variant}`,
-        `navds-alert--${size}`
+        `navds-alert--${size}`,
+        { "navds-alert--full-width": fullWidth, "navds-alert--inline": inline }
       )}
-      {...rest}
     >
-      <Icon variant={variant} />
-      <span>{children}</span>
+      <Icon
+        aria-label={`${variant}-ikon`}
+        focusable="false"
+        role="img"
+        variant={variant}
+        alt={`${variant}-ikon`}
+        className="navds-alert__icon"
+      />
+      <BodyLong as="div" size={size} className="navds-alert__wrapper">
+        {children}
+      </BodyLong>
     </div>
   )
-);
+) as AlertComponent;
+
+Alert.Title = AlertTitle;
+Alert.Content = AlertContent;
 
 export default Alert;

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

@@ -0,0 +1,41 @@
+import React, { forwardRef, useContext } from "react";
+import cl from "classnames";
+import { BodyLong } from "..";
+import { AlertContext } from ".";
+
+export interface AlertContentProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Alert content
+   */
+  children: React.ReactNode;
+}
+
+export type AlertContentType = React.ForwardRefExoticComponent<
+  AlertContentProps & React.RefAttributes<HTMLDivElement>
+>;
+
+const AlertContent: AlertContentType = forwardRef(
+  ({ children, className, ...rest }, ref) => {
+    const context = useContext(AlertContext);
+
+    if (context === null) {
+      console.warn("AlertContent has to be wrapped in <Alert />");
+      return null;
+    }
+
+    return (
+      <BodyLong
+        {...rest}
+        as="div"
+        className={cl(className, "navds-alert__content")}
+        ref={ref}
+        size={context.size ?? "medium"}
+      >
+        {children}
+      </BodyLong>
+    );
+  }
+);
+
+export default AlertContent;

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

@@ -0,0 +1,41 @@
+import React, { forwardRef, useContext } from "react";
+import cl from "classnames";
+import { AlertContext, Heading } from "..";
+
+export interface AlertTitleProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Alert content
+   */
+  children: React.ReactNode;
+}
+
+export type AlertTitleType = React.ForwardRefExoticComponent<
+  AlertTitleProps & React.RefAttributes<HTMLDivElement>
+>;
+
+const AlertTitle: AlertTitleType = forwardRef(
+  ({ children, className, ...rest }, ref) => {
+    const context = useContext(AlertContext);
+
+    if (context === null) {
+      console.warn("AlertTitle has to be wrapped in <Alert />");
+      return null;
+    }
+
+    const size = context.size === "medium" ? "small" : "xsmall";
+
+    return (
+      <Heading
+        {...rest}
+        ref={ref}
+        className={cl(className, "navds-alert__title")}
+        as="div"
+        size={size}
+      >
+        {children}
+      </Heading>
+    );
+  }
+);
+
+export default AlertTitle;

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

@@ -0,0 +1,96 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+import { Alert, Heading, BodyLong } from "../../index";
+
+<Meta title="ds-react/alert/intro" />
+
+# Hvordan ta i bruk Alert
+
+```jsx
+<Alert variant="info">
+  Id elit esse enim reprehenderit.Tempor tempor ex exercitation id aute
+  eu.Laborum nulla nisi irure voluptate mollit fugiat.Est quis culpa nostrud et
+  reprehenderit ea sint.Eu veniam labore enim labore qui eiusmod Lorem amet ad
+  esse.
+</Alert>
+```
+
+<Canvas>
+  <Alert variant="info">
+    Id elit esse enim reprehenderit.Tempor tempor ex exercitation id aute
+    eu.Laborum nulla nisi irure voluptate mollit fugiat.Est quis culpa nostrud
+    et reprehenderit ea sint.Eu veniam labore enim labore qui eiusmod Lorem amet
+    ad esse.
+  </Alert>
+</Canvas>
+
+## Varianter
+
+`variants`-prop kan brukes for å endre utseende mellom
+`info`, `success`, `warning` og `error`.
+
+<Canvas>
+  <Alert variant="info">Id elit esse enim reprehenderit.</Alert>
+  <Alert variant="success">Id elit esse enim reprehenderit.</Alert>
+  <Alert variant="warning">Id elit esse enim reprehenderit.</Alert>
+  <Alert variant="error">Id elit esse enim reprehenderit.</Alert>
+</Canvas>
+
+## Sizing
+
+Alert har to størrelser: Default 64px height og small 32px height default.
+
+<Canvas>
+  <Alert size="small" variant="info">
+    Id elit esse enim reprehenderit.
+  </Alert>
+  <Alert size="small" variant="success">
+    Id elit esse enim reprehenderit.
+  </Alert>
+  <Alert size="small" variant="warning">
+    Id elit esse enim reprehenderit.
+  </Alert>
+  <Alert size="small" variant="error">
+    Id elit esse enim reprehenderit.
+  </Alert>
+</Canvas>
+
+## fullWidth
+
+<Canvas>
+  <div style={{ margin: 32, display: "grid", gap: 16 }}>
+    <Alert fullWidth variant="info">
+      Id elit esse enim reprehenderit.
+    </Alert>
+    <Alert fullWidth size="small" variant="info">
+      Id elit esse enim reprehenderit.
+    </Alert>
+  </div>
+</Canvas>
+
+## Med heading
+
+```jsx
+<Alert variant="info">
+  <Heading spacing size="small" level="2">
+    Aliquip duis est in commodo pariatur
+  </Heading>
+  <BodyLong>
+    Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui laboris
+    ex. Labore ex occaecat proident qui qui fugiat magna. Fugiat sint commodo
+    consequat eu aute.
+  </BodyLong>
+</Alert>
+```
+
+<Canvas>
+  <Alert variant="info">
+    <Heading spacing size="small" level="3">
+      Aliquip duis est in commodo pariatur
+    </Heading>
+    <BodyLong>
+      Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui laboris
+      ex. Labore ex occaecat proident qui qui fugiat magna. Fugiat sint commodo
+      consequat eu aute.
+    </BodyLong>
+  </Alert>
+</Canvas>

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

@@ -1,5 +1,6 @@
 import React from "react";
-import { Alert } from "../index";
+import { Alert } from "..";
+import { BodyLong, Heading } from "../..";
 
 export default {
   title: "ds-react/alert",
@@ -17,16 +18,104 @@ export const All = () => {
   return (
     <>
       <h1>Alert</h1>
-      {variants.map((variant) => (
+      {variants.map((variant, i) => (
         <Alert key={variant} variant={variant}>
-          {Array(8).fill(`${variant} content`).join(" ")}
+          {new Array(i + 1).fill(
+            "Id elit esse enim reprehenderit enim nisi veniam nostrud."
+          )}
         </Alert>
       ))}
       <h2>Small</h2>
       <div>
-        {variants.map((variant) => (
+        {variants.map((variant, i) => (
           <Alert key={variant} variant={variant} size="small">
-            {Array(8).fill(`${variant} content`).join(" ")}
+            {new Array(i + 1).fill(
+              "Id elit esse enim reprehenderit enim nisi veniam nostrud."
+            )}
+          </Alert>
+        ))}
+      </div>
+      <h2>Alert fullWidth</h2>
+      {variants.map((variant, i) => (
+        <Alert fullWidth key={variant} variant={variant}>
+          {new Array(i + 1).fill(
+            "Id elit esse enim reprehenderit enim nisi veniam nostrud."
+          )}
+        </Alert>
+      ))}
+      <h2>Small</h2>
+      <div>
+        {variants.map((variant, i) => (
+          <Alert fullWidth key={variant} variant={variant} size="small">
+            {new Array(i + 1).fill(
+              "Id elit esse enim reprehenderit enim nisi veniam nostrud."
+            )}
+          </Alert>
+        ))}
+      </div>
+      <h2>Inline</h2>
+      <div>
+        {variants.map((variant, i) => (
+          <Alert inline key={variant} variant={variant}>
+            {new Array(i + 1).fill(
+              "Id elit esse enim reprehenderit enim nisi veniam nostrud."
+            )}
+          </Alert>
+        ))}
+      </div>
+      <h2>Inline small</h2>
+      <div>
+        {variants.map((variant, i) => (
+          <Alert inline key={variant} variant={variant} size="small">
+            {new Array(i + 1).fill(
+              "Id elit esse enim reprehenderit enim nisi veniam nostrud."
+            )}
+          </Alert>
+        ))}
+      </div>
+      <h2>Med Heading</h2>
+      <div>
+        {variants.map((variant, i) => (
+          <Alert key={variant} variant={variant}>
+            <Heading spacing size="small" level="3">
+              Aliquip duis est in commodo pariatur
+            </Heading>
+            <BodyLong spacing>
+              Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
+              laboris ex. Labore ex occaecat proident qui qui fugiat magna.
+              Fugiat sint commodo consequat eu aute.
+            </BodyLong>
+            <Heading level="4" size="xsmall" spacing>
+              Ullamco eiusmod Lorem eiusmod eu.
+            </Heading>
+            <BodyLong>
+              Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
+              laboris ex. Labore ex occaecat proident qui qui fugiat magna.
+              Fugiat sint commodo consequat eu aute.
+            </BodyLong>
+          </Alert>
+        ))}
+      </div>
+      <h2>Med Heading small</h2>
+      <div>
+        {variants.map((variant, i) => (
+          <Alert key={variant} variant={variant} size="small">
+            <Heading spacing size="small" level="3">
+              Aliquip duis est in commodo pariatur
+            </Heading>
+            <BodyLong spacing>
+              Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
+              laboris ex. Labore ex occaecat proident qui qui fugiat magna.
+              Fugiat sint commodo consequat eu aute.
+            </BodyLong>
+            <Heading level="4" size="xsmall" spacing>
+              Ullamco eiusmod Lorem eiusmod eu.
+            </Heading>
+            <BodyLong>
+              Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
+              laboris ex. Labore ex occaecat proident qui qui fugiat magna.
+              Fugiat sint commodo consequat eu aute.
+            </BodyLong>
           </Alert>
         ))}
       </div>

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

@@ -1,35 +1,45 @@
 import React, { forwardRef } from "react";
 import cl from "classnames";
+import { BodyShort, OverridableComponent } from "../";
 
-export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /**
    * Component content
    */
   children: React.ReactNode;
   /**
-   * @ignore
-   */
-  className?: string;
-  /**
-   * Decides component design and interactions
+   * Changes design and interactions
    * @default "primary"
    */
-  variant?: "primary" | "secondary" | "action" | "danger";
+  variant?: "primary" | "secondary" | "tertiary" | "danger";
   /**
-   * Reduces internal padding for component
+   * Changes padding, height and font-size
    * @default "medium"
    */
   size?: "medium" | "small";
   /**
    * Prevent the user from interacting with the button: it cannot be pressed or focused.
+   * @note Avoid using if possible for accessibility purposes
    * @default false
    */
   disabled?: boolean;
 }
 
-const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ variant = "primary", className, size = "medium", ...rest }, ref) => (
-    <button
+const Button: OverridableComponent<ButtonProps, HTMLButtonElement> = forwardRef(
+  (
+    {
+      as: Component = "button",
+      variant = "primary",
+      className,
+      children,
+      size = "medium",
+      ...rest
+    },
+    ref
+  ) => (
+    <Component
+      {...rest}
       ref={ref}
       className={cl(
         className,
@@ -37,8 +47,11 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         `navds-button--${variant}`,
         `navds-button--${size}`
       )}
-      {...rest}
-    />
+    >
+      <BodyShort as="span" className="navds-button__inner" size={size}>
+        {children}
+      </BodyShort>
+    </Component>
   )
 );
 

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

@@ -0,0 +1,70 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+import { Button, Loader } from "../../index";
+import { Success } from "@navikt/ds-icons";
+
+<Meta title="ds-react/button/intro" />
+
+# Hvordan ta i bruk Button
+
+```jsx
+<Button>Button</Button>
+```
+
+<Canvas>
+  <Button>Button</Button>
+</Canvas>
+
+## Varianter
+
+`variants`-prop kan brukes for å endre utseende mellom
+`primary`, `secondary`, `tertiary` og `danger`
+
+<Canvas>
+  <Button variant="primary">Primary</Button>
+  <Button variant="secondary">Secondary</Button>
+  <Button variant="tertiary">Tertiary</Button>
+  <Button variant="danger">Danger</Button>
+</Canvas>
+
+## Sizing
+
+Button har to størrelser: Default 48px min-height og small 32px min-height
+
+<Canvas>
+  <Button size="small" variant="primary">
+    Primary
+  </Button>
+  <Button size="small" variant="secondary">
+    Secondary
+  </Button>
+  <Button size="small" variant="tertiary">
+    Tertiary
+  </Button>
+  <Button size="small" variant="danger">
+    Danger
+  </Button>
+</Canvas>
+
+## Med ikon eller `<Loader />`
+
+Hvis man setter ikoner (svg) eller `<Loader />` rett på button vil størrelsen
+bli justert automatisk og sentrert.
+
+<Canvas>
+  <Button>
+    <Loader /> Laster... <Loader />
+  </Button>
+  <Button size="small">
+    <Loader />
+    Laster...
+    <Loader />
+  </Button>
+  <Button>
+    <Success /> Laster... <Success />
+  </Button>
+  <Button size="small">
+    <Success />
+    Laster...
+    <Success />
+  </Button>
+</Canvas>

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

@@ -1,5 +1,6 @@
 import React from "react";
 import { Button } from "../index";
+import { Success } from "@navikt/ds-icons";
 
 export default {
   title: "ds-react/button",
@@ -9,33 +10,40 @@ export default {
 const Section = ({ children }) => (
   <div
     style={{
-      display: "grid",
+      display: "flex",
       gap: 16,
       gridAutoFlow: "column",
       justifyContent: "start",
       padding: 24,
-      background: "lightgray",
+      paddingLeft: 0,
     }}
   >
     {children}
   </div>
 );
 
-const variants: Array<"primary" | "secondary" | "action" | "danger"> = [
+const variants: Array<"primary" | "secondary" | "tertiary" | "danger"> = [
   "primary",
   "secondary",
-  "action",
+  "tertiary",
   "danger",
 ];
 
+const varSwitch = {
+  primary: "Primary",
+  secondary: "Secondary",
+  tertiary: "Tertiary",
+  danger: "Danger",
+};
+
 export const All = () => {
   return (
-    <>
+    <div style={{ paddingLeft: "1rem" }}>
       <h1>Button</h1>
       <Section>
         {variants.map((variant) => (
           <Button key={variant} variant={variant}>
-            {variant}
+            {varSwitch[variant]}
           </Button>
         ))}
       </Section>
@@ -43,30 +51,58 @@ export const All = () => {
       <Section>
         {variants.map((variant) => (
           <Button key={variant} variant={variant} disabled>
-            {variant}
+            {varSwitch[variant]}
           </Button>
         ))}
       </Section>
       <h2>As link</h2>
       <Section>
         {variants.map((variant) => (
-          <a
-            key={variant}
-            className={`navds-button navds-button--${variant}`}
-            href="the-link"
-          >
-            {variant}
-          </a>
+          <Button as="a" key={variant} variant={variant} href="the-link">
+            {varSwitch[variant]}
+          </Button>
         ))}
       </Section>
       <h2>Small</h2>
       <Section>
         {variants.map((variant) => (
           <Button key={variant} variant={variant} size="small">
-            {variant}
+            {varSwitch[variant]}
           </Button>
         ))}
       </Section>
-    </>
+      <h2>Button w/icon</h2>
+      <Section>
+        {variants.map((variant) => (
+          <Button key={variant} variant={variant}>
+            {variant} <Success />
+          </Button>
+        ))}
+      </Section>
+      <Section>
+        {variants.map((variant) => (
+          <Button key={variant} variant={variant}>
+            <span className="sr-only">Success ikon</span>
+            <Success />
+          </Button>
+        ))}
+      </Section>
+      <h2>Small w/icon</h2>
+      <Section>
+        {variants.map((variant) => (
+          <Button key={variant} variant={variant} size="small">
+            <Success /> {variant}
+          </Button>
+        ))}
+      </Section>
+      <Section>
+        {variants.map((variant) => (
+          <Button key={variant} variant={variant} size="small">
+            <span className="sr-only">Success ikon</span>
+            <Success />
+          </Button>
+        ))}
+      </Section>
+    </div>
   );
 };