🐛 Fikset click-event for datepicker/monthpicker

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.changeset/README.md

@@ -0,0 +1,39 @@
+# Changesets
+
+For versjonering bruker vi løsningen [Changesets](https://github.com/changesets/changesets) for [versjonering](https://semver.org/) og publisering av pakker.
+
+## Howto
+
+- For å lage en ny versjons-entry: `yarn changeset`
+- Velg pakkene som skal versjoneres med `arrowkeys` + `Space`
+
+`🦋 Which packages would you like to include?`
+
+Trykk `Space` for å velge pakkene som skal versjoneres, for så trykke `Enter` for å gå videre.
+
+`🦋 Which packages should have a major bump?`
+
+Trykk `Enter` for å gå videre _*eller*_ velg pakkene som skal marjor-bumpes med `arrowkeys` + `Space`
+
+`🦋 Which packages should have a minor bump?`
+
+Trykk `Enter` for å gå videre _*eller*_ velg pakkene som skal marjor-bumpes med `arrowkeys` + `Space`
+
+Hvis du ikke velger major eller minor, så blir pakkene få en patch-bump
+
+- Commit og push.
+
+## Fixed versjonering
+
+Alle base-pakkene våre har `fixed versjonering`. Dette tilsier at en bump på en av disse vil bumpe alle til samme versjon
+
+```sh
+  "@navikt/ds-react",
+  "@navikt/ds-css",
+  "@navikt/ds-icons",
+  "@navikt/ds-tokens",
+  "@navikt/ds-tailwind",
+  "@navikt/ds-css-internal",
+  "@navikt/ds-react-internal",
+  "@navikt/ds-codemod"
+```

.changeset/config.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@2.2.0/schema.json",
+  "changelog": [
+    "@changesets/changelog-github",
+    { "repo": "navikt/Designsystemet" }
+  ],
+  "commit": false,
+  "fixed": [
+    [
+      "@navikt/ds-react",
+      "@navikt/ds-css",
+      "@navikt/ds-icons",
+      "@navikt/ds-tokens",
+      "@navikt/ds-tailwind",
+      "@navikt/ds-css-internal",
+      "@navikt/ds-react-internal",
+      "@navikt/ds-codemod"
+    ]
+  ],
+  "linked": [],
+  "access": "public",
+  "baseBranch": "master",
+  "updateInternalDependencies": "patch",
+  "ignore": ["shadow-dom", "aksel.nav.no", "@navikt/ds-navno"],
+
+  "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
+    "updateInternalDependents": "always"
+  }
+}

.github/ISSUE_TEMPLATE/bug-report.md

@@ -3,25 +3,12 @@ name: Bug Report
 about: Meld inn bugs eller feil
 title: "[BUG]"
 labels: "bug \U0001F41B"
-assignees: ''
-
+assignees: ""
 ---
 
-## Hvilken av tjenestene våre gjelder det?
+## Hva er feilen/problemet?
 
 <!--
-  Sett en x i type pakke det gjelder:
-- [x] type
--->
-
-- [ ] `Komponenter`
-- [ ] `Stiler`
-- [ ] `Ikoner`
-- [ ] `Annet`
-
-## Beskriv feilen/problemet
-
-<!-- 
 > Beskriv hva slags problem(er) som oppstår
 
 > Hva forventet du skulle oppstå?
@@ -31,7 +18,7 @@ assignees: ''
 
 (skriv her.)
 
-## Steg for å reprodusere problemet
+## Steg for å reprodusere problemet (valgfri)
 
 <!--
 1. Steg en
@@ -41,11 +28,11 @@ assignees: ''
 
 (skriv her.)
 
-## Eksempel/Tilleggsinformasjon
+## Eksempel/Tilleggsinformasjon (valgfri)
 
 <!--
 Screenshots eller kodesnippets
-Legg gjerne ved ekstrainfo som nettleser, desktop/mobil etc
+Legg gjerne ved ekstrainfo som nettleser eller desktop/mobil hvis det er relevant.
 -->
 
 ```

.github/ISSUE_TEMPLATE/feature-request.md

@@ -1,24 +1,23 @@
 ---
 name: Feature Request
-about: Foreslå noe nytt for designsystemet
+about: Foreslå noe nytt!
 title: "[NEW]"
 labels: new ✨
-assignees: ''
-
+assignees: ""
 ---
 
-## Beskriv forespørselen
+## Hva?
 
 (skriv her.)
 
-## Hvilken funksjon vil dette har for bruker?
+## Hva løser dette?
 
 (skriv her.)
 
-## Eksempler/Tilleggsinformasjon 
+## Eksempler/Info
 
 <!--
-Del gjerne eksempel av lignende løsninger som er i bruk idag, URL/Screenshots etc. 
+Del gjerne eksempel av lignende løsninger som er i bruk idag, URL/Screenshots etc.
 Link gjerne til relaterte issues her også.
 -->
 

.github/workflows/aksel-dev.yml

@@ -0,0 +1,71 @@
+name: Deploy aksel.dev.nav.no
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - next
+
+env:
+  IMAGE: ghcr.io/navikt/designsystemet
+
+jobs:
+  build_and_deploy:
+    name: Build and deploy to dev-gcp
+    runs-on: ubuntu-20.04
+    steps:
+      - uses: actions/setup-node@v1
+        with:
+          node-version: "14"
+      - uses: actions/checkout@v2
+        with:
+          ref: "next"
+      - name: add tokens to .env
+        run: |
+          echo "SANITY_WRITE_KEY=${{ secrets.SANITY_FEEDBACK_WRITE_KEY }}" >> aksel.nav.no/website/.env
+          echo "ALGOLIA_ADMIN=${{ secrets.ALGOLIA_ADMIN }}" >> aksel.nav.no/website/.env
+          echo "ALGOLIA_ID=${{ secrets.ALGOLIA_ID}}" >> aksel.nav.no/website/.env
+          echo "TRELLO_TOKEN=${{ secrets.TRELLO_TOKEN }}" >> aksel.nav.no/website/.env
+          echo "SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}" >> aksel.nav.no/website/.env
+          echo "SANITY_PREVIEW_TOKEN=${{ secrets.SANITY_PREVIEW_TOKEN }}" >> aksel.nav.no/website/.env
+          echo "SANITY_PRIVATE_NO_DRAFTS=${{ secrets.SANITY_PRIVATE_NO_DRAFTS }}" >> aksel.nav.no/website/.env
+
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-dev-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-dev-
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Build application
+        run: |
+          yarn boot
+          yarn docgen
+          yarn workspace aksel.nav.no build:next
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@ab80d026d4753220c4243394c07c7d80f9638d06 # Use commit-sha1 instead of tag for security concerns
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Get complete tag
+        run: echo "TAG=DEV-$( date +%s )" >> $GITHUB_ENV
+      - name: Create docker image tags
+        run: echo "DOCKER_TAG=${{ env.IMAGE }}:${{ env.TAG }}" >> $GITHUB_ENV
+      - name: Build docker image
+        run: docker build -t ${{ env.DOCKER_TAG }} . -f aksel.nav.no/Dockerfile
+      - name: Push docker image
+        run: |
+          docker push ${{ env.DOCKER_TAG }}
+
+      - name: Deploy to dev-gcp
+        uses: nais/deploy/actions/deploy@master
+        env:
+          APIKEY: ${{ secrets.NAIS_DEPLOY_APIKEY }}
+          RESOURCE: aksel.nav.no/nais-dev.yaml
+          CLUSTER: dev-gcp
+          IMAGE: ${{ env.DOCKER_TAG }}

.github/workflows/aksel-prod.yml

@@ -0,0 +1,81 @@
+name: Deploy aksel.nav.no
+on:
+  push:
+    branches:
+      - master
+    paths:
+      - "aksel.nav.no/**"
+
+env:
+  IMAGE: ghcr.io/navikt/designsystemet
+
+jobs:
+  build_and_deploy:
+    name: Build and deploy to prod-gcp
+    runs-on: ubuntu-20.04
+    steps:
+      - uses: actions/setup-node@v1
+        with:
+          node-version: "14"
+      - uses: actions/checkout@v2
+      - name: add tokens to .env
+        run: |
+          echo "SANITY_WRITE_KEY=${{ secrets.SANITY_FEEDBACK_WRITE_KEY }}" >> aksel.nav.no/website/.env
+          echo "ALGOLIA_ADMIN=${{ secrets.ALGOLIA_ADMIN }}" >> aksel.nav.no/website/.env
+          echo "ALGOLIA_ID=${{ secrets.ALGOLIA_ID}}" >> aksel.nav.no/website/.env
+          echo "TRELLO_TOKEN=${{ secrets.TRELLO_TOKEN }}" >> aksel.nav.no/website/.env
+          echo "SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}" >> aksel.nav.no/website/.env
+          echo "SANITY_PREVIEW_TOKEN=${{ secrets.SANITY_PREVIEW_TOKEN }}" >> aksel.nav.no/website/.env
+          echo "SANITY_PRIVATE_NO_DRAFTS=${{ secrets.SANITY_PRIVATE_NO_DRAFTS }}" >> aksel.nav.no/website/.env
+
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-prod-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-prod-
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: build packages
+        run: |
+          yarn boot
+          yarn docgen
+
+      - name: Tests
+        run: yarn workspace aksel.nav.no test
+
+      - name: E2E
+        run: NEXT_PUBLIC_TEST=true yarn workspace website e2e
+
+      - name: Update sanity sync
+        run: yarn workspace aksel.nav.no sanity:update
+
+      - name: Build application
+        run: yarn workspace aksel.nav.no build:next
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@ab80d026d4753220c4243394c07c7d80f9638d06 # Use commit-sha1 instead of tag for security concerns
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Get complete tag
+        run: echo "TAG=$( date +%s )" >> $GITHUB_ENV
+      - name: Create docker image tags
+        run: echo "DOCKER_TAG=${{ env.IMAGE }}:${{ env.TAG }}" >> $GITHUB_ENV
+      - name: Build docker image
+        run: docker build -t ${{ env.DOCKER_TAG }} . -f aksel.nav.no/Dockerfile
+      - name: Push docker image
+        run: |
+          docker push ${{ env.DOCKER_TAG }}
+
+      - name: Deploy to prod-gcp
+        uses: nais/deploy/actions/deploy@master
+        env:
+          APIKEY: ${{ secrets.NAIS_DEPLOY_APIKEY }}
+          RESOURCE: aksel.nav.no/nais-prod.yaml
+          CLUSTER: prod-gcp
+          IMAGE: ${{ env.DOCKER_TAG }}

.github/workflows/aksel-redeploy.yml

@@ -0,0 +1,41 @@
+name: Redeploy image to for aksel.nav.no
+on:
+  workflow_dispatch:
+    inputs:
+      tag:
+        description: "Docker image tag"
+        required: true
+        default: ""
+      dry:
+        description: "Dry-run"
+        required: true
+        default: "false"
+
+env:
+  IMAGE: ghcr.io/navikt/designsystemet
+
+jobs:
+  redeploy:
+    name: Redeploy image
+    runs-on: ubuntu-20.04
+    steps:
+      - uses: actions/setup-node@v1
+        with:
+          node-version: "14"
+      - uses: actions/checkout@v2
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@ab80d026d4753220c4243394c07c7d80f9638d06 # Use commit-sha1 instead of tag for security concerns
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Create docker image tag
+        run: echo "DOCKER_TAG=${{ env.IMAGE }}:${{ github.event.inputs.tag }}" >> $GITHUB_ENV
+      - name: Deploy to prod-gcp
+        uses: nais/deploy/actions/deploy@master
+        env:
+          APIKEY: ${{ secrets.NAIS_DEPLOY_APIKEY }}
+          RESOURCE: aksel.nav.no/nais-prod.yaml
+          CLUSTER: prod-gcp
+          IMAGE: ${{ env.DOCKER_TAG }}
+          DRY_RUN: ${{ github.event.inputs.dry }}

.github/workflows/backup-sanity.yml

@@ -0,0 +1,39 @@
+name: Backup sanity dateset to gcp
+on:
+  workflow_dispatch:
+  schedule:
+    # 12.00 every 3 days
+    - cron: "0 0 */3 * *"
+jobs:
+  execute:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0 # Required to retrieve git history
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14
+
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-build-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-build-
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Export dataset
+        run: SANITY_TOKEN=${{secrets.SANITY_DATASET_EDITOR_TOKEN}} yarn workspace aksel.nav.no sanity:backup
+      - name: Upload GCP bucket
+        uses: "google-github-actions/auth@v0"
+        with:
+          credentials_json: "${{ secrets.gcp_credentials_prod }}"
+      - uses: "google-github-actions/upload-cloud-storage@v0"
+        with:
+          path: ./aksel.nav.no/sanity
+          destination: "aksel-website-prod/backups"
+          glob: "**/backup-*.tar.gz"

.github/workflows/build-publish.yml

@@ -1,99 +0,0 @@
-# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
-# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
-
-name: Build -> Test -> Publish
-
-on:
-  push:
-    branches: [master]
-  pull_request:
-    branches: [master]
-  workflow_dispatch:
-
-jobs:
-  test-build:
-    if: "!contains(github.event.head_commit.message, '[ci skip]')"
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-        with:
-          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
-        if: steps.node-cache.outputs.cache-hit != 'true'
-        run: yarn install
-      - name: postinstall
-        if: steps.node-cache.outputs.cache-hit == 'true'
-        run: yarn postinstall
-      - name: Boot
-        run: yarn boot
-      - name: Eslint and Stylelint
-        run: yarn lint
-      - name: Test
-        run: yarn test
-
-  publish-npm:
-    needs: test-build
-    runs-on: ubuntu-latest
-    env:
-      NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTOMATION }}
-    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:
-          fetch-depth: "0"
-          token: ${{secrets.GIT_REPO}}
-      - uses: actions/setup-node@v2
-        with:
-          registry-url: https://registry.npmjs.org
-          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
-        if: steps.node-cache.outputs.cache-hit != 'true'
-        run: yarn install --frozen-lockfile
-      - name: Boot
-        run: yarn boot
-      - name: Generate docs
-        run: yarn docgen
-      - 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}}
-
-      - 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: Publish to NPM registry
-        run: yarn lerna publish --no-verify-access from-package --yes
-
-      - 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: |
-          yarn lerna publish --registry https://npm.pkg.github.com from-package --yes

.github/workflows/chromatic.yml

@@ -1,46 +1,58 @@
-name: Chromatic
+name: Visual Regression Tests
 
 on:
   push:
-    branches: [master]
+    branches:
+      - "master"
+    paths:
+      - "@navikt/**"
   pull_request:
-    branches: [master]
+    branches: [master, next]
+    paths:
+      - "@navikt/**"
 
 jobs:
-  chromatic-pr:
-    if: "!contains(github.event.head_commit.message, '[ci skip]') && github.event_name != 'push'"
+  visual_regression_test:
+    name: "visual regression test (chromatic)"
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           fetch-depth: 0
-      - uses: actions/setup-node@v1
+
+      - uses: actions/setup-node@v3
         with:
-          node-version: 14
-      - name: Node-modules cache
-        uses: actions/cache@v2
-        id: node-cache
+          node-version: 16.13.0
+          cache: yarn
+
+      - name: Restore cache
+        uses: actions/cache@v3
         with:
           path: "**/node_modules"
-          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
-      - name: install
-        if: steps.node-cache.outputs.cache-hit != 'true'
-        run: yarn install
-      - name: postinstall
-        if: steps.node-cache.outputs.cache-hit == 'true'
-        run: yarn postinstall
-      - name: Boot
+          key: ${{ runner.os }}-visual-regression-test-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-visual-regression-test-
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Build packages
         run: yarn boot
-      - name: run chromatic
+
+      - name: Chromatic
         uses: chromaui/action@v1
         id: chromatic_tests
         continue-on-error: true
         with:
+          autoAcceptChanges: "master"
           token: ${{ secrets.GITHUB_TOKEN }}
           projectToken: x3xqdfgkujg
           exitZeroOnChanges: false
+        env:
+          STORYBOOK_GITHUB_SHA: ${{ github.sha }}
 
       - name: replace storybook url
+        if: "!contains(github.event.head_commit.message, '[ci skip]') && github.event_name != 'push'"
         uses: frabert/replace-string-action@v2.0
         id: storybook_url
         with:
@@ -49,12 +61,14 @@ jobs:
           replace-with: ""
 
       - name: Get commit sha
+        if: "!contains(github.event.head_commit.message, '[ci skip]') && github.event_name != 'push'"
         id: vars
         shell: bash
         run: |
           echo "::set-output name=sha_short::$(git rev-parse --short HEAD)"
 
       - name: Find Comment
+        if: "!contains(github.event.head_commit.message, '[ci skip]') && github.event_name != 'push'"
         uses: peter-evans/find-comment@v1
         id: fc
         with:
@@ -63,7 +77,7 @@ jobs:
           body-includes: Chromatic build-output
 
       - name: Create or update comment
-        if: steps.chromatic_tests.outcome == 'success'
+        if: steps.chromatic_tests.outcome == 'success' && !contains(github.event.head_commit.message, '[ci skip]') && github.event_name != 'push'
         uses: peter-evans/create-or-update-comment@v1
         with:
           comment-id: ${{ steps.fc.outputs.comment-id }}
@@ -73,13 +87,13 @@ jobs:
 
             - :clipboard: [Review](${{steps.chromatic_tests.outputs.url}})
             - :tada: [Storybook preview](${{steps.storybook_url.outputs.replaced}})
-            - :white_check_mark: SUCCESS :white_check_mark:
+            - :white_check_mark: No changes detected :white_check_mark:
 
             commit: `${{ steps.vars.outputs.sha_short }}`
           edit-mode: replace
 
       - name: Create or update failed comment
-        if: steps.chromatic_tests.outcome != 'success'
+        if: steps.chromatic_tests.outcome != 'success' && !contains(github.event.head_commit.message, '[ci skip]') && github.event_name != 'push'
         uses: peter-evans/create-or-update-comment@v1
         with:
           comment-id: ${{ steps.fc.outputs.comment-id }}
@@ -89,38 +103,7 @@ jobs:
 
             - :clipboard: [Review](${{steps.chromatic_tests.outputs.url}})
             - :tada: [Storybook preview](${{steps.storybook_url.outputs.replaced}})
-            - :no_entry_sign: FAILED :no_entry_sign:, review endringer.
+            - :no_entry_sign: Changes detected :no_entry_sign:, review endringer.
 
             commit: `${{ steps.vars.outputs.sha_short }}`
           edit-mode: replace
-
-  chromatic-push:
-    if: "!contains(github.event.head_commit.message, '[ci skip]') && github.event_name == 'push'"
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-        with:
-          fetch-depth: 0
-      - 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
-        if: steps.node-cache.outputs.cache-hit != 'true'
-        run: yarn install
-      - name: postinstall
-        if: steps.node-cache.outputs.cache-hit == 'true'
-        run: yarn postinstall
-      - name: Boot
-        run: yarn boot
-      - name: run chromatic
-        uses: chromaui/action@v1
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          projectToken: x3xqdfgkujg
-          autoAcceptChanges: true

.github/workflows/ci.yml

@@ -0,0 +1,44 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - master
+      - next
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  build:
+    name: "Validate build"
+    if: "!contains(github.event.head_commit.message, '[ci skip]')"
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16.13.0
+          cache: yarn
+
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-test-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-test
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Boot (build packages)
+        run: yarn boot
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Test
+        run: yarn test

.github/workflows/codeql.yml

@@ -0,0 +1,71 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  push:
+    branches: [master, next]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [master]
+  schedule:
+    - cron: "41 8 * * 6"
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: ["javascript"]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
+        # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v2
+        with:
+          languages: ${{ matrix.language }}
+          # If you wish to specify custom queries, you can do so here or in a config file.
+          # By default, queries listed here will override any specified in a config file.
+          # Prefix the list here with "+" to use these queries and those in the config file.
+
+          # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+          # queries: security-extended,security-and-quality
+
+      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+      # If this step fails, then you should remove it and run the build manually (see below)
+      - name: Autobuild
+        uses: github/codeql-action/autobuild@v2
+
+      # ℹ️ Command-line programs to run using the OS shell.
+      # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+
+      #   If the Autobuild fails above, remove it and uncomment the following three lines.
+      #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
+
+      # - run: |
+      #   echo "Run, Build Application using script"
+      #   ./location_of_script_within_repo/buildscript.sh
+
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v2

.github/workflows/e2e.yml

@@ -0,0 +1,56 @@
+name: E2E / Playwright Tests
+on:
+  push:
+    branches: [master, next]
+    paths:
+      - "aksel.nav.no/**"
+  pull_request:
+    branches: [master, next]
+    paths:
+      - "aksel.nav.no/**"
+
+jobs:
+  playwright:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: add tokens to .env
+        run: |
+          echo "SANITY_WRITE_KEY=${{ secrets.SANITY_FEEDBACK_WRITE_KEY }}" >> aksel.nav.no/website/.env
+          echo "ALGOLIA_ADMIN=${{ secrets.ALGOLIA_ADMIN }}" >> aksel.nav.no/website/.env
+          echo "ALGOLIA_ID=${{ secrets.ALGOLIA_ID}}" >> aksel.nav.no/website/.env
+          echo "TRELLO_TOKEN=${{ secrets.TRELLO_TOKEN }}" >> aksel.nav.no/website/.env
+          echo "SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}" >> aksel.nav.no/website/.env
+          echo "SANITY_PREVIEW_TOKEN=${{ secrets.SANITY_PREVIEW_TOKEN }}" >> aksel.nav.no/website/.env
+          echo "SANITY_PRIVATE_NO_DRAFTS=${{ secrets.SANITY_PRIVATE_NO_DRAFTS }}" >> aksel.nav.no/website/.env
+
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-e2e-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-e2e-
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: build packages
+        run: |
+          yarn boot
+          yarn docgen
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: yarn workspace website e2e
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: aksel.nav.no/website/playwright-report/
+          retention-days: 10

.github/workflows/push-to-cdn.yaml

@@ -0,0 +1,31 @@
+name: "push-to-cdn"
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - "master"
+    paths:
+      - "fonts/**"
+
+jobs:
+  upload:
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: "read"
+      id-token: "write"
+
+    steps:
+      - uses: "actions/checkout@v3"
+
+      - id: upload
+        uses: nais/frontend-plattform-cdn-upload-action@main
+        with:
+          cdn-environment: cdn.nav.no
+          cdn-team-name: aksel
+          source: ./fonts
+          destination: "" # uploads folder to team root
+
+      - run: echo uploaded file ${{ steps.upload.outputs.uploaded }}
+        shell: bash

.github/workflows/release.yml

@@ -0,0 +1,67 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - master
+  workflow_dispatch:
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  build:
+    name: "Release packages"
+    if: "!contains(github.event.head_commit.message, '[ci skip]')"
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16.13.0
+          cache: yarn
+
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-prod-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-prod
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Create release Pull Request or publish to NPM
+        id: changesets
+        uses: changesets/action@v1
+        with:
+          version: yarn version
+          publish: yarn release
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_AUTOMATION }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTOMATION }}
+
+      - name: Creating .npmrc
+        run: |
+          cat << EOF > "$HOME/.npmrc"
+            @navikt:registry=https://npm.pkg.github.com
+            //npm.pkg.github.com/:_authToken=$NPM_TOKEN
+          EOF
+        env:
+          NPM_TOKEN: ${{ secrets.GIT_REPO }}
+
+      - name: Publish to GPR
+        if: steps.changesets.outputs.published == 'true'
+        id: changesets-gpr
+        uses: changesets/action@v1
+        with:
+          publish: yarn changeset publish
+          createGithubReleases: false
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_AUTOMATION }}
+          GITHUB_TOKEN: ${{ secrets.GIT_REPO }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTOMATION }}

.github/workflows/searchindex.yml

@@ -0,0 +1,25 @@
+name: Indexing search
+on:
+  workflow_dispatch:
+  schedule:
+    # 01.00 & 12.00 every day
+    - cron: "00 01,12 * * *"
+
+jobs:
+  searchcrawl:
+    name: Search-indexing aksel.nav.no
+    runs-on: ubuntu-latest
+    env:
+      APPLICATION_ID: ${{ secrets.ALGOLIA_ID}}
+      API_KEY: ${{ secrets.ALGOLIA_ADMIN }}
+    steps:
+      - uses: actions/checkout@v2
+      - name: Read crawler.json
+        id: algolia_config
+        run: echo "::set-output name=config::$(cat ./aksel.nav.no/crawler.json | jq -r tostring)"
+      - name: Push indices to Algolia
+        uses: signcl/docsearch-scraper-action@master
+        env:
+          APPLICATION_ID: ${{ secrets.ALGOLIA_ID}}
+          API_KEY: ${{ secrets.ALGOLIA_ADMIN }}
+          CONFIG: ${{ steps.algolia_config.outputs.config }}

.github/workflows/update-icons.yml

@@ -1,20 +1,20 @@
 name: Update Icons
 
 on:
-#  schedule:
- #   - cron: 0 0 * * *
+  #  schedule:
+  #   - cron: 0 0 * * *
   workflow_dispatch:
 
 jobs:
   update:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           node-version: 14
       - name: Node-modules cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         id: node-cache
         with:
           path: "**/node_modules"
@@ -26,7 +26,7 @@ jobs:
         if: steps.node-cache.outputs.cache-hit == 'true'
         run: yarn postinstall
       - name: Update Icons
-        run: yarn update:icons
+        run: yarn workspace @navikt/ds-icons update
         env:
           FIGMA_TOKEN: ${{ secrets.FIGMA_IKONER_API }}
       - name: Create Pull Request
@@ -39,4 +39,4 @@ jobs:
           author: ${{ github.actor }} <${{ github.actor }}@users.noreply.github.com>
           signoff: false
           delete-branch: true
-          title: "[FIX] Ikonsynk Figma"
+          title: "Ikonsynk Figma"

.github/workflows/update-tokens.yml

@@ -7,12 +7,12 @@ jobs:
   update:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           node-version: 14
       - name: Node-modules cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         id: node-cache
         with:
           path: "**/node_modules"
@@ -24,7 +24,7 @@ jobs:
         if: steps.node-cache.outputs.cache-hit == 'true'
         run: yarn postinstall
       - name: Update tokens
-        run: yarn update:tokens
+        run: yarn workspace @navikt/ds-tokens update
         env:
           FIGMA_TOKEN: ${{ secrets.FIGMA_IKONER_API }}
       - name: Create Pull Request
@@ -33,7 +33,7 @@ jobs:
           token: ${{ secrets.GITHUB_TOKEN }}
           branch: figma-tokens-sync
           delete-branch: true
-          title: "[FEATURE] Tokens sync Figma"
+          title: "Tokens sync Figma"
           commit-message: "Tokens synket fra figma"
           committer: GitHub <noreply@github.com>
           signoff: false

.gitignore

@@ -107,8 +107,8 @@ utilities/**/css
 
 */static/*.zip
 */static/png
-@navikt/core/icons/NAV-ikonpakke-png.zip
-@navikt/core/icons/NAV-ikonpakke-svg.zip
+@navikt/icons/NAV-ikonpakke-png.zip
+@navikt/icons/NAV-ikonpakke-svg.zip
 */**/NAV-ikonpakke-png.zip
 */**/NAV-ikonpakke-svg.zip
 
@@ -116,6 +116,7 @@ react-docgen.json
 react-docgen-docs.json
 cjs
 esm
+@navikt/community/navno/css
 .vercel
 _docs.json
 
@@ -125,4 +126,25 @@ _docs.json
 !.yarn/plugins
 !.yarn/releases
 !.yarn/sdks
-!.yarn/versions
+!.yarn/versions
+*/icons/src
+*/icons/png
+*/core/icons
+/storybook-static
+
+# Aksel.nav.no
+.next
+!*/website/lib/
+!*/website/public/
+!aksel.nav.no/**/*.d.ts
+!*/sanity/lib/
+!*/sanity/static/
+out
+videos
+sanity/scripts/renameField.js
+tmp.json
+/test-results/
+/playwright-report/
+/playwright/.cache/
+playwright-report/
+/test-results/

.husky/_/husky.sh

@@ -1,10 +1,12 @@
-#!/bin/sh
+#!/usr/bin/env sh
 if [ -z "$husky_skip_init" ]; then
   debug () {
-    [ "$HUSKY_DEBUG" = "1" ] && echo "husky (debug) - $1"
+    if [ "$HUSKY_DEBUG" = "1" ]; then
+      echo "husky (debug) - $1"
+    fi
   }
 
-  readonly hook_name="$(basename "$0")"
+  readonly hook_name="$(basename -- "$0")"
   debug "starting $hook_name..."
 
   if [ "$HUSKY" = "0" ]; then
@@ -17,14 +19,18 @@ if [ -z "$husky_skip_init" ]; then
     . ~/.huskyrc
   fi
 
-  export readonly husky_skip_init=1
+  readonly husky_skip_init=1
+  export husky_skip_init
   sh -e "$0" "$@"
   exitCode="$?"
 
   if [ $exitCode != 0 ]; then
     echo "husky - $hook_name hook exited with code $exitCode (error)"
-    exit $exitCode
   fi
 
-  exit 0
+  if [ $exitCode = 127 ]; then
+    echo "husky - command not found in PATH=$PATH"
+  fi
+
+  exit $exitCode
 fi

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname $0)/_/husky.sh"
 
-yarn pretty-quick --staged
+yarn pretty-quick --staged && yarn lint-staged

.husky/pre-push

@@ -1,4 +0,0 @@
-#!/bin/sh
-. "$(dirname $0)/_/husky.sh"
-
-yarn lint

.prettierignore

@@ -0,0 +1,2 @@
+**/nais-dev.yaml
+**/nais-prod.yaml

.storybook/deprecated.stories.mdx

@@ -1,12 +0,0 @@
-import { Meta, Canvas } from "@storybook/addon-docs";
-
-<Meta title="ds-react(deprecated)/intro" />
-
-# Utdaterte pakker
-
-På sikt vil komponentene under bli flyttet ut av ds-react eller erstattes av andre komponenter
-
-- PageHeader -> @navikt/ds-react-navno
-- MicroCard -> @navikt/ds-react-navno
-
-- StepIndicator -> Horizontal `<Stepper />`

.storybook/layout.css

@@ -15,3 +15,7 @@
 .rowgap[data-theme="dark"] {
   background-color: #262626;
 }
+
+.rowgap-wrap {
+  flex-wrap: wrap;
+}

.storybook/main.js

@@ -17,10 +17,8 @@ module.exports = {
   },
   stories: () => [...getStories(), "./*.stories.mdx"],
   addons: [
-    "@storybook/addon-docs",
     "@storybook/addon-a11y",
     "@whitespace/storybook-addon-html",
-    "storybook-addon-css-user-preferences",
     {
       name: "@storybook/addon-storysource",
       options: {

.storybook/manager.js

@@ -1,12 +1,12 @@
 import { addons } from "@storybook/addons";
 import NavTheme from "./theme.js";
-import logoUrl from "./public/logo.svg";
+/* import logoUrl from "./public/logo.svg"; */
 
 addons.setConfig({
   theme: NavTheme,
 });
 
-const link = document.createElement("link");
+/* const link = document.createElement("link");
 link.setAttribute("rel", "shortcut icon");
 link.setAttribute("href", logoUrl);
-document.head.appendChild(link);
+document.head.appendChild(link); */

.storybook/preview.js

@@ -7,7 +7,7 @@ export const parameters = {
   options: {
     storySort: {
       method: "",
-      order: ["Intro", "ds-icons", "ds-react", ["Default"]],
+      order: ["Intro", "ds-icons", "ds-react", ["form"], ["Default"]],
       locales: "",
     },
   },
@@ -21,13 +21,33 @@ export const parameters = {
         value: "#ffffff",
       },
       {
-        name: "Alternate",
-        value: "#f7f7f7",
-      },
-      {
-        name: "Inverted",
-        value: "#292929",
+        name: "Darkmode",
+        value: "#262626",
       },
     ],
   },
 };
+
+export const globalTypes = {
+  theme: {
+    name: "Theme",
+    description: "Global theme for components",
+    defaultValue: "light",
+    toolbar: {
+      icon: "circlehollow",
+      items: [
+        { value: "light", icon: "circlehollow", title: "light" },
+        { value: "dark", icon: "circle", title: "dark" },
+      ],
+      showName: true,
+    },
+  },
+};
+
+export const withTheme = (StoryFn, context) => (
+  <div data-theme={context.parameters.theme || context.globals.theme} lang="no">
+    <StoryFn />
+  </div>
+);
+
+export const decorators = [withTheme];

.storybook/theme.js

@@ -9,7 +9,7 @@ export default create({
   fontCode: "monospace",
 
   // Text colors
-  textColor: "#292929",
+  textColor: "#262626",
   textInverseColor: "rgba(255,255,255,0.9)",
 
   colorSecondary: "rgba(0, 36, 58, 1)",
@@ -18,5 +18,5 @@ export default create({
   barTextColor: "rgba(0, 91, 130, 1)",
   barSelectedColor: "rgba(0, 36, 58, 1)",
 
-  brandTitle: "NAV Designsystem",
+  brandTitle: "Aksel",
 });

.storybook/velkommen.stories.mdx

@@ -2,7 +2,7 @@ import { Meta, Canvas } from "@storybook/addon-docs";
 
 <Meta title="Intro/Velkommen" />
 
-# NAV designsystem-komponenter
+# Aksel, NAVs designsystem
 
 - [Dokumentasjon](https://aksel.nav.no/designsystem)
 - [Komponenter](https://aksel.nav.no/designsystem/side/oversikt-komponenter)
@@ -12,27 +12,28 @@ import { Meta, Canvas } from "@storybook/addon-docs";
 ### Kjernepakke
 
 ```bash
-yarn add @navikt/ds-react @navikt/ds-css @navikt/ds-icons
+yarn add @navikt/ds-react @navikt/ds-css
 ```
 
-### Pakke for interne-flater
+### Interne-flater
 
 ```bash
 yarn add @navikt/ds-react-internal @navikt/ds-css-internal
 ```
 
+### Ikonpakke
+
+```bash
+yarn add @navikt/ds-icons
+```
+
 ### Bruk
 
 ```jsx
 import { Heading } from "@navikt/ds-react";
+import "@navikt/ds-css";
 
 <Heading level="1" size="xlarge">
   Sidetitel
 </Heading>;
 ```
-
-## Bidra
-
-Hjelp oss med å forbedre designsystemet med feedback eller kode-hjelp
-
-- [Kode](https://github.com/navikt/Designsystemet/tree/master/%40navikt)

.storybook/webpack.config.js

@@ -6,6 +6,7 @@ module.exports = (baseConfig) => {
     use: ["style-loader", "css-loader"],
     include: [
       path.resolve(__dirname, "../node_modules/@navikt/core/css/index.css"),
+      path.resolve(__dirname, "../node_modules/@navikt/internal/css/index.css"),
     ],
   });
   baseConfig.config.resolve.alias = {

.yarnrc.yml

@@ -1,3 +1,5 @@
+enableImmutableInstalls: false
+
 nodeLinker: node-modules
 
 plugins:

@navikt/codemod/.gitignore

@@ -3,4 +3,7 @@
 bin/*.js
 *.js.map
 !transforms/**/__testfixtures__/**/*.js
+!transforms/**/tests/**/*.output.js
+!transforms/**/tests/**/*.input.js
+transforms/**/tests/**/*.test.js
 !jest.config.js

@navikt/codemod/CHANGELOG.md

@@ -0,0 +1,51 @@
+# @navikt/ds-codemod
+
+## 2.0.2
+
+## 2.0.1
+
+## 2.0.0
+
+### Major Changes
+
+- [`6b96e4833`](https://github.com/navikt/Designsystemet/commit/6b96e48330c2e013a1acee85cefccd9ccc1aece4) Thanks [@KenAJoh](https://github.com/KenAJoh)! - v2: Tokens update and font-loading
+
+## 1.5.10
+
+## 1.5.9
+
+## 1.5.8
+
+## 1.5.7
+
+## 1.5.6
+
+## 1.5.5
+
+## 1.5.4
+
+## 1.5.3
+
+## 1.5.2
+
+## 1.5.1
+
+## 1.5.0
+
+## 1.4.4
+
+## 1.4.3
+
+## 1.4.2
+
+## 1.4.1
+
+## 1.4.0
+
+## 1.3.39
+
+### Patch Changes
+
+- [`40f0b3340`](https://github.com/navikt/Designsystemet/commit/40f0b3340d01bf85fecc04f2f3a8e8b2acf996f1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bump for latest-tag
+
+## 1.3.38

@navikt/codemod/README.md

@@ -0,0 +1,170 @@
+# Aksel Codemods
+
+Collection of Codemods for easier migration between breaking changes in NAVs designsystem-packages.
+
+## Usage
+
+Codemod runs code-transformations programmatically in your project. This helps when migrating breaking changes without spending hours doing it manually.
+
+NOTE: This codemod only supports fairly "default" usage of components. Components used with dynamic imports, styled-components, non-default imports (ex `import * as DS from "@navikt/ds-react"` or `from "@navikt/ds-react/cjs"`) can lead to bugs when using codemod.
+
+```javascript
+npx @navikt/ds-codemod <migration> <path>
+```
+
+migraton - name of migraton, see available migraton below.
+
+path - files or directory to transform
+
+```sh
+--dry Do a dry-run, no code will be edited
+--print Prints the changed output for comparison
+--force Runs even if there are uncommited changes (use with caution)
+```
+
+## V1 -> V2
+
+V2.0.0 updated the token-prefix of all tokens + names of all semantic-colors. The migrations below helps when migrating from the formats css, scss, less and js.
+
+### css-tokens (--navds format)
+
+`npx @navikt/ds-codemod v2/css src`
+
+When having redefined a token, you will need to manually find and replace these instances after the codemod-run. A global search for `--v2-migration__` will show all found instances where you had redefined a token.
+
+```diff
+.example{
+- color: var(--navds-global-color-gray-900);
++ color: var(--a-gray-900);
+
+- --navds-semantic-color-text: red;
++ --v2-migration__navds-semantic-color-text: red;
+}
+```
+
+### sass/scss-tokens ($navds format)
+
+`npx @navikt/ds-codemod v2/sass src`
+
+```diff
+.example{
+- color: $navds-global-color-gray-900;
++ color: $a-gray-900;
+}
+```
+
+### less-tokens (@navds format)
+
+`npx @navikt/ds-codemod v2/less src`
+
+```diff
+.example{
+- color: @navds-global-color-gray-900;
++ color: @a-gray-900;
+}
+```
+
+### js-tokens
+
+`npx @navikt/ds-codemod v2/js src`
+
+```diff
+
+- import { NavdsGlobalColorGray900 } from "@navikt/ds-tokens";
++ import { AGray900 } from "@navikt/ds-tokens";
+
+const styled = styled.p`
+- color: ${NavdsGlobalColorGray900};
++ color: ${AGray900};
+`
+```
+
+## Beta (0.19.x) -> v1
+
+`npx @navikt/ds-codemod v1/preset src`
+
+### preset
+
+Combines all avaliable codemods for migrating from beta -> v1. This transform should only be ran once.
+
+Includes these transforms
+
+- v1/tabs
+- v1/chat
+- v1/pagination
+
+### tabs
+
+`npx @navikt/ds-codemod v1/tabs src`
+
+```diff
+<Tabs
+  defaultValue="logg"
+  onChange={(x) => console.log(x)}
+-  loop
++  iconPosition="left"
+>
+  <Tabs.List
+-    loop
+  >
+    <Tabs.Tab
+      value="logg"
+      label="logg"
+-     iconPosition="left"
+    />
+  </Tabs.List>
+  <Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
+</Tabs>
+```
+
+### chat
+
+`npx @navikt/ds-codemodmod v1/chat src`
+
+```diff
+-<SpeechBubble
++<Chat
+-  illustration={<Illustration />}
+-  topText="Ola Normann 01.01.21 14:00"
+-  illustrationBgColor="blue"
++  avatar={<Illustration />}
++  name="Ola Normann 01.01.21 14:00"
++  avatarBgColor="blue"
+  backgroundColor="red"
+>
+- <SpeechBubble.Bubble>
++ <Chat.Bubble>
+    Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+- </SpeechBubble.Bubble>
++ </Chat.Bubble>
+-</SpeechBubble>
++</Chat>
+```
+
+### pagination
+
+`npx @navikt/ds-codemod v1/pagination src`
+
+This codemod should only be ran once, since the size-scale will keep decreasing for each subsequent iteration.
+
+```diff
+-<Pagiation />
++<Pagiation size="small"/>
+
+-<Pagiation size="medium"/>
++<Pagiation size="small"/>
+
+-<Pagiation size="small"/>
++<Pagiation size="xsmall"/>
+```
+
+## License
+
+[MIT](https://github.com/navikt/Designsystemet/blob/master/LICENCE)
+
+#
+
+Inspired by both MUI and NEXT
+
+- [NEXT](https://nextjs.org/docs/advanced-features/codemods)
+- [MUI](https://github.com/mui/material-ui/tree/master/packages/mui-codemod)

@navikt/codemod/bin/cli.ts

@@ -1,191 +1,36 @@
-/**
- * Copyright 2015-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-// Based on https://github.com/reactjs/react-codemod/blob/dd8671c9a470a2c342b221ec903c574cf31e9f57/bin/cli.js
-// @next/codemod optional-name-of-transform optional/path/to/src [...options]
+import meow, { AnyFlags } from "meow";
 
-import globby from "globby";
-import inquirer from "inquirer";
-import meow from "meow";
-import path from "path";
-import execa from "execa";
-import chalk from "chalk";
-import isGitClean from "is-git-clean";
+import { migrate } from "./migrate";
+import { cliConfig } from "./config";
 
-export const jscodeshiftExecutable = require.resolve(".bin/jscodeshift");
-export const transformerDirectory = path.join(__dirname, "../", "transforms");
+const help = `
+Usage
+  $ npx @navikt/ds-codemod ${cliConfig.args
+    .map((arg) => `<${arg.name}>`)
+    .join(" ")}
+  ${cliConfig.args.map((arg) => `${arg.name}\t${arg.description}`).join("\n  ")}
+Options
+  ${Object.entries(cliConfig.flags)
+    .map(([name, val]: [string, any]) => `--${name}\t${val.description}`)
+    .join("\n  ")}
+`;
 
-export function checkGitStatus(force) {
-  let clean = false;
-  let errorMessage = "Unable to determine if git directory is clean";
-  try {
-    clean = isGitClean.sync(process.cwd());
-    errorMessage = "Git directory is not clean";
-  } catch (err) {
-    if (err && err.stderr && err.stderr.indexOf("Not a git repository") >= 0) {
-      clean = true;
-    }
-  }
+const { input, flags } = meow({
+  description: cliConfig.description,
+  flags: Object.fromEntries(
+    Object.entries(cliConfig.flags).map(
+      ([name, flag]: [string, any]): [string, AnyFlags] => [
+        name,
+        {
+          alias: flag.alias,
+          type: flag.type,
+        },
+      ]
+    )
+  ),
+  help,
+});
 
-  if (!clean) {
-    if (force) {
-      console.log(`WARNING: ${errorMessage}. Forcibly continuing.`);
-    } else {
-      console.log("Thank you for using @@navikt/ds-codemod");
-      console.log(
-        chalk.yellow(
-          "\nBut before we continue, please stash or commit your git changes."
-        )
-      );
-      console.log(
-        "\nYou may use the --force flag to override this safety check."
-      );
-      process.exit(1);
-    }
-  }
-}
-
-export function runTransform({ files, flags, transformer }) {
-  const transformerPath = path.join(transformerDirectory, `${transformer}.js`);
-
-  let args = [];
-
-  const { dry, print, runInBand } = flags;
-
-  if (dry) {
-    args.push("--dry");
-  }
-  if (print) {
-    args.push("--print");
-  }
-  if (runInBand) {
-    args.push("--run-in-band");
-  }
-
-  args.push("--verbose=2");
-
-  args.push("--ignore-pattern=**/node_modules/**");
-
-  args.push("--extensions=tsx,ts,jsx,js");
-  args.push("--parser=tsx");
-
-  args = args.concat(["--transform", transformerPath]);
-
-  if (flags.jscodeshift) {
-    args = args.concat(flags.jscodeshift);
-  }
-
-  args = args.concat(files);
-
-  console.log(`Executing command: jscodeshift ${args.join(" ")}`);
-
-  const result = execa.sync(jscodeshiftExecutable, args, {
-    stdio: "inherit",
-    stripFinalNewline: false,
-  });
-
-  if (result.failed) {
-    throw new Error(`jscodeshift exited with code ${result.exitCode}`);
-  }
-}
-
-const TRANSFORMER_INQUIRER_CHOICES = [
-  {
-    name: "v1.0.0/chat: Fixes breaking API-changes from <SpeechBubble /> (now <Chat/>) component",
-    value: "v1.0.0/chat",
-  },
-];
-
-function expandFilePathsIfNeeded(filesBeforeExpansion) {
-  const shouldExpandFiles = filesBeforeExpansion.some((file) =>
-    file.includes("*")
-  );
-  return shouldExpandFiles
-    ? globby.sync(filesBeforeExpansion)
-    : filesBeforeExpansion;
-}
-
-export function run() {
-  const cli = meow({
-    description: "Codemods for updating @navikt/ds-* packages",
-    help: `
-    Usage
-      $ npx @navikt/codemod <transform> <path> <...options>
-        transform    One of the choices from <link-here>
-        path         Files or directory to transform. Can be a glob like pages/**.js
-    Options
-      --force            Bypass Git safety checks and forcibly run codemods
-      --dry              Dry run (no changes are made to files)
-      --print            Print transformed files to your terminal
-      --jscodeshift  (Advanced) Pass options directly to jscodeshift
-    `,
-    flags: {
-      boolean: ["force", "dry", "print", "help"],
-      string: ["_"],
-      alias: {
-        h: "help",
-      },
-    },
-  } as meow.Options<meow.AnyFlags>);
-
-  if (!cli.flags.dry) {
-    checkGitStatus(cli.flags.force);
-  }
-
-  if (
-    cli.input[0] &&
-    !TRANSFORMER_INQUIRER_CHOICES.find((x) => x.value === cli.input[0])
-  ) {
-    console.error("Invalid transform choice, pick one of:");
-    console.error(
-      TRANSFORMER_INQUIRER_CHOICES.map((x) => "- " + x.value).join("\n")
-    );
-    process.exit(1);
-  }
-
-  inquirer
-    .prompt([
-      {
-        type: "input",
-        name: "files",
-        message: "On which files or directory should the codemods be applied?",
-        when: !cli.input[1],
-        default: ".",
-        // validate: () =>
-        filter: (files) => files.trim(),
-      },
-      {
-        type: "list",
-        name: "transformer",
-        message: "Which transform would you like to apply?",
-        when: !cli.input[0],
-        pageSize: TRANSFORMER_INQUIRER_CHOICES.length,
-        choices: TRANSFORMER_INQUIRER_CHOICES,
-      },
-    ])
-    .then((answers) => {
-      const { files, transformer } = answers;
-
-      const filesBeforeExpansion = cli.input[1] || files;
-      const filesExpanded = expandFilePathsIfNeeded([filesBeforeExpansion]);
-
-      const selectedTransformer = cli.input[0] || transformer;
-
-      if (!filesExpanded.length) {
-        console.log(
-          `No files found matching ${filesBeforeExpansion.join(" ")}`
-        );
-        return null;
-      }
-
-      return runTransform({
-        files: filesExpanded,
-        flags: cli.flags,
-        transformer: selectedTransformer,
-      });
-    });
+export async function run() {
+  await migrate(input[0], input[1], flags);
 }

@navikt/codemod/bin/config.ts

@@ -0,0 +1,37 @@
+const createCLIConfig = (config: any) => config;
+
+export const cliConfig = createCLIConfig({
+  description: "Migrations for NAV designsystem solutions",
+  args: [
+    {
+      name: "migration",
+      description:
+        "One of the choices from https://github.com/navikt/Designsystemet/blob/master/%40navikt/codemod/README.md",
+    },
+    {
+      name: "path",
+      description:
+        "Files or directory to transform. Can be a glob like src/**.css",
+    },
+  ],
+  flags: {
+    dry: {
+      alias: "d",
+      description: "Dry run, no changes will be made to files",
+      type: "boolean",
+    },
+    print: {
+      alias: "p",
+      description: "Print transformed files",
+      type: "boolean",
+    },
+    force: {
+      alias: "f",
+      description: "Forcibly run migrations without checking git-changes",
+      type: "boolean",
+    },
+  },
+});
+
+export const DS_MIGRATION_COMMENT =
+  "ds-codemod: Unable to migrate the following expression. Please upgrade manually.";

@navikt/codemod/bin/ds-codemod.ts

@@ -1,13 +1,5 @@
 #!/usr/bin/env node
 
-/**
- * Copyright 2015-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-// Based on https://github.com/reactjs/react-codemod/blob/dd8671c9a470a2c342b221ec903c574cf31e9f57/bin/react-codemod.js
-// next-codemod optional-name-of-transform optional/path/to/src [...options]
+const { run } = require("./cli");
 
-require("./cli").run();
+run();

@navikt/codemod/bin/migrate.ts

@@ -0,0 +1,140 @@
+import fs from "fs";
+import path from "path";
+
+import * as jscodeshift from "jscodeshift/src/Runner";
+import chalk from "chalk";
+import isGitClean from "is-git-clean";
+import globby from "globby";
+
+export interface MigrateOptions {
+  dry?: boolean;
+  print?: boolean;
+  force?: boolean;
+}
+
+const migrationsMap = [
+  {
+    name: "v1/preset: Runs all codemods for beta to v1 migration",
+    value: "v1/preset",
+    path: "v1.0.0/preset",
+  },
+  {
+    name: "v1/pagination: Fixes breaking API-changes from <Pagination /> component",
+    value: "v1/pagination",
+    path: "v1.0.0/pagination",
+  },
+  {
+    name: "v1/tabs: Fixes breaking API-changes from <Tabs /> component",
+    value: "v1/tabs",
+    path: "v1.0.0/tabs",
+  },
+  {
+    name: "v1/chat: Fixes breaking API-changes from <SpeechBubble /> (now <Chat/>) component",
+    value: "v1/chat",
+    path: "v1.0.0/chat",
+  },
+  {
+    name: "v2/css: Fixes css-variables",
+    value: "v2/css",
+    path: "v2.0.0/update-css-tokens/update-css-tokens",
+  },
+  {
+    name: "v2/js: Fixes js-variables",
+    value: "v2/js",
+    path: "v2.0.0/update-js-tokens/update-js-tokens",
+  },
+  {
+    name: "v2/sass: Fixes sass-variables",
+    value: "v2/sass",
+    path: "v2.0.0/update-sass-tokens/update-sass-tokens",
+  },
+  {
+    name: "v2/less: Fixes less-variables",
+    value: "v2/less",
+    path: "v2.0.0/update-less-tokens/update-less-tokens",
+  },
+];
+
+export async function migrate(
+  migration: string,
+  files: string,
+  options: MigrateOptions = {}
+) {
+  const foundMigration = migrationsMap.find((x) => x.value === migration);
+  const migrationFile = path.join(
+    __dirname,
+    `../transforms/${foundMigration.path}.js`
+  );
+
+  try {
+    if (!fs.existsSync(migrationFile)) {
+      throw new Error(`No migration found for ${migration}`);
+    }
+
+    if (!files) throw new Error(`No path provided for migration`);
+
+    if (!options.dry) {
+      checkGitStatus(options.force);
+    }
+
+    const filepaths = globby.sync(files, { cwd: process.cwd() });
+
+    if (filepaths.length === 0) {
+      throw new Error(`No files found for ${files}`);
+    }
+
+    // eslint-disable-next-line no-console
+    console.log(chalk.green("Running migration:"), migration);
+
+    await jscodeshift.run(migrationFile, filepaths, {
+      babel: true,
+      ignorePattern: [
+        "**/node_modules/**",
+        "**/.next/**",
+        "**/build/**",
+        "**/dist/**",
+      ],
+      extensions: "tsx,ts,jsx,js",
+      parser: "tsx",
+      verbose: 2,
+      runInBand: true,
+      silent: false,
+      stdin: false,
+      ...options,
+    });
+  } catch (error) {
+    console.error(error);
+    process.exit(1);
+  }
+}
+
+export function checkGitStatus(force?: boolean) {
+  let clean = false;
+  let errorMessage = "Unable to determine if git directory is clean";
+  try {
+    clean = isGitClean.sync(process.cwd());
+    errorMessage = "Git directory is not clean";
+  } catch (err: any) {
+    if (err && err.stderr && err.stderr.indexOf("Not a git repository") >= 0) {
+      clean = true;
+    }
+  }
+
+  if (!clean) {
+    /* eslint-disable no-console */
+    if (force) {
+      console.log(`WARNING: ${errorMessage}. Forcibly continuing.`);
+    } else {
+      console.log("Thank you for using @navikt/ds-codemod!");
+      console.log(
+        chalk.yellow(
+          "\nBut before we continue, please stash or commit your git changes."
+        )
+      );
+      console.log(
+        "\nYou may use the --force flag to override this safety check."
+      );
+      process.exit(1);
+    }
+  }
+}

@navikt/codemod/clean.mjs

@@ -0,0 +1,10 @@
+import { deleteSync } from "del";
+
+deleteSync([
+  "utils/**/*.js",
+  "bin/**/*.js",
+  "transforms/**/*.js",
+  "!transforms/**/__testfixtures__",
+  "!transforms/**/tests/*.input.*",
+  "!transforms/**/tests/*.output.*",
+]);

@navikt/codemod/jest.config.js

@@ -1,5 +1,5 @@
 const customJestConfig = {
-  testMatch: ["**/__tests__/**/*.js"],
+  testMatch: ["**/__tests__/**/*.js", "**/tests/*.test.js"],
   verbose: true,
   rootDir: "./transforms",
 };

@navikt/codemod/package.json

@@ -1,9 +1,8 @@
 {
   "name": "@navikt/ds-codemod",
-  "version": "1.0.2",
-  "private": true,
-  "description": "NAV designsystem codemods",
-  "author": "NAV Designsystem team",
+  "version": "2.0.2",
+  "description": "Aksel codemods for NAVs designsystem",
+  "author": "Aksel | NAV designsystem team",
   "license": "MIT",
   "keywords": [
     "react",
@@ -11,16 +10,20 @@
     "jscodeshift"
   ],
   "files": [
-    "transforms/*.js",
+    "transforms/**/*.js",
+    "utils/**/*.js",
     "bin/*.js",
     "lib/**/*.js",
-    "lib/cra-to-next/gitignore"
+    "lib/cra-to-next/gitignore",
+    "tokens-map.mjs"
   ],
   "scripts": {
-    "build": "tsc -p tsconfig.json",
-    "dev": "tsc --watch -p tsconfig.json",
-    "test": "jest",
-    "test:watch": "jest --watch"
+    "build": "yarn clean && tsc -p tsconfig.json",
+    "dev": "yarn clean && tsc --watch -p tsconfig.json",
+    "start": "./bin/cli.js",
+    "test": "yarn build && jest",
+    "test:watch": "jest --watch",
+    "clean": "node clean.mjs"
   },
   "bin": "./bin/ds-codemod.js",
   "repository": {
@@ -36,18 +39,26 @@
     "globby": "11.0.1",
     "inquirer": "7.3.3",
     "is-git-clean": "1.1.0",
-    "jest": "^27.5.0",
+    "jest": "^29.0.0",
     "jscodeshift": "0.13.1",
     "jscodeshift-add-imports": "1.0.10",
-    "meow": "7.0.1"
+    "lodash": "4.17.21",
+    "meow": "7.0.1",
+    "prettier": "2.7.1"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.0.0",
+    "@types/jest": "^29.0.0",
     "@types/jscodeshift": "0.11.5",
     "@types/react": "^18.0.0",
-    "typescript": "^4.7.2"
+    "del": "7.0.0",
+    "typescript": "^4.8.0"
   },
   "sideEffects": false,
   "engines": {
     "node": ">=12.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

@navikt/codemod/tokens-map.mjs

@@ -0,0 +1,368 @@
+/* prettier-ignore */
+const tokens = [
+  ["--navds-semantic-color-text-inverted", "--a-text-on-inverted"],
+  ["--navds-semantic-color-text-muted", "--a-text-subtle"],
+  ["--navds-semantic-color-text", "--a-text-default"],
+  ["--navds-semantic-color-feedback-danger-text", "--a-text-danger"],
+  ["--navds-semantic-color-link-visited", "--a-text-visited"],
+  ["--navds-semantic-color-link", "--a-text-action"],
+  ["--navds-spacing-32", "--a-spacing-32"],
+  ["--navds-spacing-24", "--a-spacing-24"],
+  ["--navds-spacing-20", "--a-spacing-20"],
+  ["--navds-spacing-18", "--a-spacing-18"],
+  ["--navds-spacing-16", "--a-spacing-16"],
+  ["--navds-spacing-14", "--a-spacing-14"],
+  ["--navds-spacing-12", "--a-spacing-12"],
+  ["--navds-spacing-11", "--a-spacing-11"],
+  ["--navds-spacing-10", "--a-spacing-10"],
+  ["--navds-spacing-9", "--a-spacing-9"],
+  ["--navds-spacing-8", "--a-spacing-8"],
+  ["--navds-spacing-7", "--a-spacing-7"],
+  ["--navds-spacing-6", "--a-spacing-6"],
+  ["--navds-spacing-5", "--a-spacing-5"],
+  ["--navds-spacing-4", "--a-spacing-4"],
+  ["--navds-spacing-3", "--a-spacing-3"],
+  ["--navds-spacing-2", "--a-spacing-2"],
+  ["--navds-spacing-1", "--a-spacing-1"],
+  ["--navds-global-color-purple-900", "--a-purple-900"],
+  ["--navds-global-color-purple-800", "--a-purple-800"],
+  ["--navds-global-color-purple-700", "--a-purple-700"],
+  ["--navds-global-color-purple-600", "--a-purple-600"],
+  ["--navds-global-color-purple-500", "--a-purple-500"],
+  ["--navds-global-color-purple-400", "--a-purple-400"],
+  ["--navds-global-color-purple-300", "--a-purple-300"],
+  ["--navds-global-color-purple-200", "--a-purple-200"],
+  ["--navds-global-color-purple-100", "--a-purple-100"],
+  ["--navds-global-color-purple-50", "--a-purple-50"],
+  ["--navds-global-color-orange-900", "--a-orange-900"],
+  ["--navds-global-color-orange-800", "--a-orange-800"],
+  ["--navds-global-color-orange-700", "--a-orange-700"],
+  ["--navds-global-color-orange-600", "--a-orange-600"],
+  ["--navds-global-color-orange-500", "--a-orange-500"],
+  ["--navds-global-color-orange-400", "--a-orange-400"],
+  ["--navds-global-color-orange-300", "--a-orange-300"],
+  ["--navds-global-color-orange-200", "--a-orange-200"],
+  ["--navds-global-color-orange-100", "--a-orange-100"],
+  ["--navds-global-color-orange-50", "--a-orange-50"],
+  ["--navds-global-color-limegreen-900", "--a-limegreen-900"],
+  ["--navds-global-color-limegreen-800", "--a-limegreen-800"],
+  ["--navds-global-color-limegreen-700", "--a-limegreen-700"],
+  ["--navds-global-color-limegreen-600", "--a-limegreen-600"],
+  ["--navds-global-color-limegreen-500", "--a-limegreen-500"],
+  ["--navds-global-color-limegreen-400", "--a-limegreen-400"],
+  ["--navds-global-color-limegreen-300", "--a-limegreen-300"],
+  ["--navds-global-color-limegreen-200", "--a-limegreen-200"],
+  ["--navds-global-color-limegreen-100", "--a-limegreen-100"],
+  ["--navds-global-color-limegreen-50", "--a-limegreen-50"],
+  ["--navds-global-color-lightblue-900", "--a-lightblue-900"],
+  ["--navds-global-color-lightblue-800", "--a-lightblue-800"],
+  ["--navds-global-color-lightblue-700", "--a-lightblue-700"],
+  ["--navds-global-color-lightblue-600", "--a-lightblue-600"],
+  ["--navds-global-color-lightblue-500", "--a-lightblue-500"],
+  ["--navds-global-color-lightblue-400", "--a-lightblue-400"],
+  ["--navds-global-color-lightblue-300", "--a-lightblue-300"],
+  ["--navds-global-color-lightblue-200", "--a-lightblue-200"],
+  ["--navds-global-color-lightblue-100", "--a-lightblue-100"],
+  ["--navds-global-color-lightblue-50", "--a-lightblue-50"],
+  ["--navds-global-color-green-900", "--a-green-900"],
+  ["--navds-global-color-green-800", "--a-green-800"],
+  ["--navds-global-color-green-700", "--a-green-700"],
+  ["--navds-global-color-green-600", "--a-green-600"],
+  ["--navds-global-color-green-500", "--a-green-500"],
+  ["--navds-global-color-green-400", "--a-green-400"],
+  ["--navds-global-color-green-300", "--a-green-300"],
+  ["--navds-global-color-green-200", "--a-green-200"],
+  ["--navds-global-color-green-100", "--a-green-100"],
+  ["--navds-global-color-green-50", "--a-green-50"],
+  ["--navds-global-color-deepblue-900", "--a-deepblue-900"],
+  ["--navds-global-color-deepblue-800", "--a-deepblue-800"],
+  ["--navds-global-color-deepblue-700", "--a-deepblue-700"],
+  ["--navds-global-color-deepblue-600", "--a-deepblue-600"],
+  ["--navds-global-color-deepblue-500", "--a-deepblue-500"],
+  ["--navds-global-color-deepblue-400", "--a-deepblue-400"],
+  ["--navds-global-color-deepblue-300", "--a-deepblue-300"],
+  ["--navds-global-color-deepblue-200", "--a-deepblue-200"],
+  ["--navds-global-color-deepblue-100", "--a-deepblue-100"],
+  ["--navds-global-color-deepblue-50", "--a-deepblue-50"],
+  ["--navds-global-color-red-900", "--a-red-900"],
+  ["--navds-global-color-red-800", "--a-red-800"],
+  ["--navds-global-color-red-700", "--a-red-700"],
+  ["--navds-global-color-red-600", "--a-red-600"],
+  ["--navds-global-color-red-500", "--a-red-500"],
+  ["--navds-global-color-red-400", "--a-red-400"],
+  ["--navds-global-color-red-300", "--a-red-300"],
+  ["--navds-global-color-red-200", "--a-red-200"],
+  ["--navds-global-color-red-100", "--a-red-100"],
+  ["--navds-global-color-red-50", "--a-red-50"],
+  ["--navds-global-color-blue-900", "--a-blue-900"],
+  ["--navds-global-color-blue-800", "--a-blue-800"],
+  ["--navds-global-color-blue-700", "--a-blue-700"],
+  ["--navds-global-color-blue-600", "--a-blue-600"],
+  ["--navds-global-color-blue-500", "--a-blue-500"],
+  ["--navds-global-color-blue-400", "--a-blue-400"],
+  ["--navds-global-color-blue-300", "--a-blue-300"],
+  ["--navds-global-color-blue-200", "--a-blue-200"],
+  ["--navds-global-color-blue-100", "--a-blue-100"],
+  ["--navds-global-color-blue-50", "--a-blue-50"],
+  ["--navds-global-color-gray-900", "--a-gray-900"],
+  ["--navds-global-color-gray-800", "--a-gray-800"],
+  ["--navds-global-color-gray-700", "--a-gray-700"],
+  ["--navds-global-color-gray-600", "--a-gray-600"],
+  ["--navds-global-color-gray-500", "--a-gray-500"],
+  ["--navds-global-color-gray-400", "--a-gray-400"],
+  ["--navds-global-color-gray-300", "--a-gray-300"],
+  ["--navds-global-color-gray-200", "--a-gray-200"],
+  ["--navds-global-color-gray-100", "--a-gray-100"],
+  ["--navds-global-color-gray-50", "--a-gray-50"],
+  ["--navds-global-color-nav-red", "--a-nav-red"],
+  ["--navds-global-color-white", "--a-white"],
+  ["--navds-global-color-transparent", "--a-transparent"],
+  ["--navds-border-radius-full", "--a-border-radius-full"],
+  ["--navds-border-radius-xlarge", "--a-border-radius-xlarge"],
+  ["--navds-border-radius-large", "--a-border-radius-large"],
+  ["--navds-border-radius-medium", "--a-border-radius-medium"],
+  ["--navds-border-radius-small", "--a-border-radius-small"],
+  ["--navds-z-index-tooltip", "--a-z-index-tooltip"],
+  ["--navds-z-index-focus", "--a-z-index-focus"],
+  ["--navds-z-index-popover", "--a-z-index-popover"],
+  ["--navds-z-index-modal", "--a-z-index-modal"],
+  ["--navds-font-weight-regular", "--a-font-weight-regular"],
+  ["--navds-font-weight-bold", "--a-font-weight-bold"],
+  ["--navds-font-size-small", "--a-font-size-small"],
+  ["--navds-font-size-medium", "--a-font-size-medium"],
+  ["--navds-font-size-large", "--a-font-size-large"],
+  ["--navds-font-size-xlarge", "--a-font-size-xlarge"],
+  ["--navds-font-size-heading-xsmall", "--a-font-size-heading-xsmall"],
+  ["--navds-font-size-heading-small", "--a-font-size-heading-small"],
+  ["--navds-font-size-heading-medium", "--a-font-size-heading-medium"],
+  ["--navds-font-size-heading-large", "--a-font-size-heading-large"],
+  ["--navds-font-size-heading-xlarge", "--a-font-size-heading-xlarge"],
+  ["--navds-font-size-heading-2xlarge", "--a-font-size-heading-2xlarge"],
+  ["--navds-font-line-height-medium", "--a-font-line-height-medium"],
+  ["--navds-font-line-height-large", "--a-font-line-height-large"],
+  ["--navds-font-line-height-xlarge", "--a-font-line-height-xlarge"],
+  ["--navds-font-line-height-heading-xsmall","--a-font-line-height-heading-xsmall"],
+  ["--navds-font-line-height-heading-small","--a-font-line-height-heading-small"],
+  ["--navds-font-line-height-heading-medium","--a-font-line-height-heading-medium"],
+  ["--navds-font-line-height-heading-large","--a-font-line-height-heading-large"],
+  ["--navds-font-line-height-heading-xlarge","--a-font-line-height-heading-xlarge"],
+  ["--navds-font-line-height-heading-2xlarge","--a-font-line-height-heading-2xlarge"],
+  ["--navds-font-family", "--a-font-family"],
+
+  ["--navds-semantic-color-feedback-info-icon", "--a-icon-info"],
+  ["--navds-semantic-color-feedback-warning-icon", "--a-icon-warning"],
+  ["--navds-semantic-color-feedback-danger-icon", "--a-icon-danger"],
+  ["--navds-semantic-color-feedback-success-icon", "--a-icon-success"],
+
+  ["--navds-semantic-color-feedback-info-background", "--a-surface-info-subtle"],
+  ["--navds-semantic-color-feedback-warning-background", "--a-surface-warning-subtle"],
+  ["--navds-semantic-color-interaction-danger-selected", "--a-surface-danger-active"],
+  ["--navds-semantic-color-interaction-danger-hover", "--a-surface-danger-hover"],
+  ["--navds-semantic-color-interaction-danger", "--a-surface-danger"],
+  ["--navds-semantic-color-feedback-danger-background", "--a-surface-danger-subtle"],
+  ["--navds-semantic-color-feedback-success-background", "--a-surface-success-subtle"],
+  ["--navds-semantic-color-interaction-primary-hover-subtle","--a-surface-action-subtle-hover"],
+  ["--navds-semantic-color-interaction-primary-selected","--a-surface-action-selected"],
+  ["--navds-semantic-color-interaction-primary-hover","--a-surface-action-hover"],
+  ["--navds-semantic-color-interaction-primary", "--a-surface-action"],
+  ["--navds-semantic-color-canvas-background-inverted", "--a-surface-inverted"],
+  ["--navds-semantic-color-component-background-inverted", "--a-surface-inverted"],
+  ["--navds-semantic-color-component-background-alternate", "--a-surface-subtle"],
+  ["--navds-semantic-color-component-background-light", "--a-surface-default"],
+  ["--navds-semantic-color-canvas-background-light", "--a-bg-default"],
+  ["--navds-semantic-color-canvas-background", "--a-bg-subtle"],
+  ["--navds-semantic-color-border-inverted", "--a-border-on-inverted"],
+  ["--navds-semantic-color-border-muted", "--a-border-default"],
+  ["--navds-semantic-color-border", "--a-border-strong"],
+  ["--navds-semantic-color-focus-inverted", "--a-border-focus-on-inverted"],
+  ["--navds-semantic-color-focus", "--a-border-focus"],
+  ["--navds-semantic-color-feedback-info-border", "--a-border-info"],
+  ["--navds-semantic-color-feedback-warning-border", "--a-border-warning"],
+  ["--navds-semantic-color-feedback-danger-border", "--a-border-danger"],
+  ["--navds-semantic-color-feedback-success-border", "--a-border-success"],
+  ["--navds-semantic-color-divider", "--a-border-divider"],
+  ["--navds-shadow-focus-inverted", "--a-shadow-focus-inverted"],
+  ["--navds-shadow-focus", "--a-shadow-focus"],
+  ["--navds-shadow-xsmall", "--a-shadow-xsmall"],
+  ["--navds-shadow-small", "--a-shadow-small"],
+  ["--navds-shadow-medium", "--a-shadow-medium"],
+  ["--navds-shadow-large", "--a-shadow-large"],
+  ["--navds-shadow-xlarge", "--a-shadow-xlarge"],
+
+  /* Components */
+["--navds-modal-color-overlay", "--a-surface-backdrop"],
+["--navds-accordion-color-border", "--a-border-strong"],
+["--navds-accordion-color-text-hover", "--a-surface-action"],
+["--navds-accordion-color-border-hover", "--a-surface-action"],
+["--navds-accordion-color-background-open", "--a-surface-action-subtle"],
+["--navds-alert-color-error-border", "--a-border-danger"],
+["--navds-alert-color-error-background", "--a-surface-danger-subtle"],
+["--navds-alert-color-warning-border", "--a-border-warning"],
+["--navds-alert-color-warning-background", "--a-surface-warning-subtle"],
+["--navds-alert-color-info-border", "--a-border-info"],
+["--navds-alert-color-info-background", "--a-surface-info-subtle"],
+["--navds-alert-color-success-border", "--a-border-success"],
+["--navds-alert-color-success-background", "--a-surface-success-subtle"],
+["--navds-alert-color-border", "--a-border-default"],
+["--navds-chat-color-avatar-background", "--a-bg-subtle"],
+["--navds-chat-color-background", "--a-bg-subtle"],
+["--navds-chat-color-avatar", "--a-text-default"],
+["--navds-guide-panel-color-illustration-background", "--a-surface-action-subtle"],
+["--navds-guide-panel-color-background", "--a-surface-default"],
+["--navds-guide-panel-color-border", "--a-border-action"],
+["--navds-error-summary-color-background", "--a-surface-default"],
+["--navds-error-summary-color-border", "--a-border-danger"],
+["--navds-confirmation-panel-color-background-checked", "--a-surface-success-subtle"],
+["--navds-confirmation-panel-color-background-error", "--a-surface-danger-subtle"],
+["--navds-confirmation-panel-color-border-checked", "--a-border-success"],
+["--navds-confirmation-panel-color-border-error", "--a-border-danger"],
+["--navds-confirmation-panel-color-background", "--a-surface-warning-subtle"],
+["--navds-confirmation-panel-color-border", "--a-border-warning"],
+["--navds-radio-checkbox-color-background-hover", "--a-surface-action-subtle"],
+["--navds-radio-checkbox-color-background-checked", "--a-surface-action"],
+["--navds-radio-checkbox-color-shadow-hover", "--a-surface-action"],
+["--navds-radio-checkbox-color-shadow-checked", "--a-surface-action"],
+["--navds-radio-checkbox-color-shadow-error", "--a-surface-danger"],
+["--navds-radio-checkbox-color-label-hover", "--a-surface-action"],
+["--navds-radio-checkbox-color-background", "--a-surface-default"],
+["--navds-radio-checkbox-color-text", "--a-text-default"],
+["--navds-radio-checkbox-color-shadow", "--a-border-strong"],
+["--navds-select-color-border-hover", "--a-surface-action"],
+["--navds-select-color-border-error", "--a-surface-danger"],
+["--navds-select-color-shadow-error", "--a-surface-danger"],
+["--navds-select-color-border-disabled","--a-gray-400"],
+["--navds-select-color-background-disabled", "--a-surface-subtle"],
+["--navds-switch-color-label-hover", "--a-surface-action"],
+["--navds-select-color-background", "--a-surface-default"],
+["--navds-select-color-border", "--a-border-strong"],
+["--navds-switch-color-label", "--a-text-default"],
+["--navds-switch-color-track-background-hover-checked", "--a-icon-success"],
+["--navds-switch-color-track-shadow-inner-focus", "--a-surface-default"],
+["--navds-switch-color-track-background-checked", "--a-border-success"],
+["--navds-switch-color-track-background-hover", "--a-surface-neutral-hover"],
+["--navds-switch-color-track-background", "--a-surface-neutral"],
+["--navds-switch-color-thumb-icon-checked", "--a-border-success"],
+["--navds-switch-color-thumb-loader-checked", "--a-border-success"],
+["--navds-switch-color-thumb-icon", "--a-icon-subtle"],
+["--navds-switch-color-thumb", "--a-surface-default"],
+["--navds-textarea-color-counter-text-error", "--a-surface-danger"],
+["--navds-textarea-color-border-hover", "--a-surface-action"],
+["--navds-textarea-color-border-error", "--a-surface-danger"],
+["--navds-textarea-color-shadow-error", "--a-surface-danger"],
+["--navds-textarea-color-counter-text", "--a-text-subtle"],
+["--navds-textarea-color-text-disabled", "--a-text-default"],
+["--navds-textarea-color-border-disabled", "--a-gray-400"],
+["--navds-textarea-color-background-disabled", "--a-surface-subtle"],
+["--navds-textarea-color-background", "--a-surface-default"],
+["--navds-textarea-color-border", "--a-border-strong"],
+["--navds-help-text-color-popover-background", "--a-surface-info-subtle"],
+["--navds-help-text-color-background-hover", "--a-surface-action"],
+["--navds-help-text-color-background-focus", "--a-surface-action"],
+["--navds-help-text-color-shadow-hover", "--a-surface-action"],
+["--navds-help-text-color-hover", "--a-surface-default"],
+["--navds-help-text-color-focus", "--a-surface-default"],
+["--navds-help-text-color", "--a-surface-action"],
+["--navds-link-color-text-focus", "--a-text-on-action"],
+["--navds-link-color-text-active", "--a-text-on-action"],
+["--navds-link-color-text", "--a-text-action"],
+["--navds-link-color-icon", "--a-icon-action"],
+["--navds-link-color-icon-focus", "--a-icon-on-action"],
+["--navds-link-color-background-focus", "--a-border-focus"],
+["--navds-link-color-background-active", "--a-border-focus"],
+["--navds-link-color-on-info-background", "--a-text-default"],
+["--navds-link-color-on-error-background", "--a-text-default"],
+["--navds-loader-color-neutral-foreground", "--a-border-default"],
+["--navds-loader-color-interaction-foreground", "--a-surface-action"],
+["--navds-loader-color-inverted-foreground", "--a-surface-default"],
+["--navds-loader-color-transparent-background", "--a-surface-transparent"],
+["--navds-loader-color-foreground", "--a-border-default"],
+["--navds-loader-color-background", "--a-surface-active"],
+["--navds-modal-color-background", "--a-surface-default"],
+["--navds-pagination-color-text-selected", "--a-text-on-action"],
+["--navds-pagination-color-background-selected", "--a-surface-action-selected"],
+["--navds-popover-color-background", "--a-surface-default"],
+["--navds-popover-color-border", "--a-border-default"],
+["--navds-tag-color-info-background", "--a-surface-info-subtle"],
+["--navds-tag-color-info-border", "--a-border-info"],
+["--navds-tag-color-warning-background", "--a-surface-warning-subtle"],
+["--navds-tag-color-warning-border", "--a-border-warning"],
+["--navds-tag-color-success-background", "--a-surface-success-subtle"],
+["--navds-tag-color-success-border", "--a-border-success"],
+["--navds-tag-color-error-background", "--a-surface-danger-subtle"],
+["--navds-tag-color-error-border", "--a-border-danger"],
+["--navds-tag-color-border", "--a-border-default"],
+["--navds-tag-color-background", "--a-surface-subtle"],
+["--navds-toggle-group-color-background-hover", "--a-surface-action-subtle"],
+["--navds-toggle-group-color-text-hover", "--a-surface-action"],
+["--navds-toggle-group-color-background-pressed", "--a-surface-action-selected"],
+["--navds-toggle-group-color-text-pressed", "--a-text-on-action"],
+["--navds-toggle-group-color-background", "--a-surface-default"],
+["--navds-toggle-group-color-text", "--a-text-default"],
+["--navds-toggle-group-color-border", "--a-border-divider"],
+["--navds-panel-color-background", "--a-surface-default"],
+["--navds-panel-color-border", "--a-border-default"],
+["--navds-link-panel-color-border-hover", "--a-surface-action"],
+["--navds-link-panel-color-title-hover", "--a-text-action"],
+["--navds-link-panel-color-text", "--a-text-default"],
+["--navds-table-row-color-background-selected-hover", "--a-surface-action-subtle-hover"],
+["--navds-table-row-color-background-hover", "--a-bg-subtle"],
+["--navds-table-row-color-background-selected", "--a-surface-action-subtle"],
+["--navds-table-row-color-background-zebra", "--a-surface-subtle"],
+["--navds-table-cell-color-border-hover", "--a-border-strong"],
+["--navds-table-cell-color-border", "--a-border-default"],
+
+["--navds-button-color-primary-background-hover", "--a-surface-action-hover"],
+["--navds-button-color-primary-background-active", "--a-surface-action-active"],
+["--navds-button-color-primary-border-focus", "--a-surface-default"],
+["--navds-button-color-primary-text", "--a-text-on-action"],
+["--navds-button-color-primary-background", "--a-surface-action"],
+["--navds-button-color-secondary-border-focus-active-hover", "--a-surface-default"],
+["--navds-button-color-secondary-text-hover", "--a-text-action"],
+["--navds-button-color-secondary-text-active", "--a-text-on-action"],
+["--navds-button-color-secondary-background-hover", "--a-surface-action-subtle-hover"],
+["--navds-button-color-secondary-background-active", "--a-surface-action-active"],
+["--navds-button-color-secondary-border", "--a-border-action"],
+["--navds-button-color-secondary-text", "--a-text-action"],
+["--navds-button-color-secondary-background", "--a-surface-default"],
+["--navds-button-color-tertiary-background-hover", "--a-surface-action-subtle-hover"],
+["--navds-button-color-tertiary-border-focus", "--a-border-action"],
+["--navds-button-color-tertiary-border-active", "--a-surface-default"],
+["--navds-button-color-tertiary-background-active", "--a-surface-action-active"],
+["--navds-button-color-tertiary-text-active", "--a-text-on-action"],
+["--navds-button-color-tertiary-text", "--a-text-action"],
+["--navds-button-color-danger-background-hover", "--a-surface-danger-hover"],
+["--navds-button-color-danger-background-active", "--a-surface-danger-active"],
+["--navds-button-color-danger-border-focus", "--a-surface-default"],
+["--navds-button-color-danger-background", "--a-surface-danger"],
+["--navds-button-color-danger-text", "--a-text-on-danger"],
+["--navds-error-message-color-text", "--a-text-danger"],
+["--navds-search-color-border-hover", "--a-border-action"],
+["--navds-search-color-clear-hover", "--a-text-action"],
+["--navds-search-color-border-error", "--a-border-danger"],
+["--navds-search-color-text", "--a-text-default"],
+["--navds-search-color-border", "--a-border-default"],
+["--navds-text-field-color-border-hover", "--a-border-action"],
+["--navds-text-field-color-border-error", "--a-border-danger"],
+["--navds-text-field-color-shadow-error", "--a-border-danger"],
+["--navds-text-field-color-border-disabled", "--a-gray-400"],
+["--navds-text-field-color-background-disabled", "--a-surface-subtle"],
+["--navds-text-field-color-placeholder-text", "--a-text-subtle"],
+["--navds-text-field-color-text-disabled", "--a-text-default"],
+["--navds-text-field-color-text", "--a-text-default"],
+["--navds-text-field-color-background", "--a-surface-default"],
+["--navds-text-field-color-border", "--a-border-default"],
+
+["--navds-dropdown-menu-color", "--a-text-default"],
+["--navdsi-dropdown-item-color-text", "--a-text-action"],
+["--navdsi-dropdown-item-color-background-hover", "--a-surface-action-subtle-hover"],
+["--navdsi-dropdown-item-color-background-active", "--a-surface-action-active"],
+["--navds-dropdown-item-color-focus", "--a-border-focus"],
+["--navdsi-header-color-text", "--a-text-on-inverted"],
+["--navdsi-header-color-background", "--a-surface-inverted"],
+["--navdsi-header-color-border", "--a-gray-600"],
+["--navdsi-header-color-hover", "--a-surface-inverted-hover"],
+["--navdsi-header-color-active", "--a-surface-inverted-active"],
+["--navds-button-icon-adjustment", "--ac-button-icon-margin"]
+]
+
+module.exports = { tokens };

@navikt/codemod/transforms/__tests__/rename-prop.ts

@@ -1,24 +0,0 @@
-export {};
-
-jest.autoMockOff();
-const defineTest = require("jscodeshift/dist/testUtils").defineTest;
-
-const tests = [
-  {
-    fixture: "rename",
-    options: {
-      component: "SpeechBubble",
-      from: "illustration",
-      to: "avatar",
-    },
-  },
-];
-
-for (const test of tests) {
-  defineTest(
-    __dirname,
-    "rename-prop",
-    test.options,
-    `rename-prop/${test.fixture}`
-  );
-}

@navikt/codemod/transforms/rename-prop/rename-prop.ts

@@ -1,4 +1,4 @@
-import renameProps from "./utils/rename-props";
+import renameProps from "../../utils/rename-props";
 
 /**
  * @param {import('jscodeshift').FileInfo} file

@navikt/codemod/transforms/rename-prop/tests/rename-prop.test.ts

@@ -0,0 +1,17 @@
+import { check } from "../../../utils/check";
+
+const migration = "rename-prop";
+const fixtures = ["rename"];
+
+for (const fixture of fixtures) {
+  check(__dirname, {
+    fixture,
+    migration,
+    extension: "js",
+    options: {
+      component: "SpeechBubble",
+      from: "illustration",
+      to: "avatar",
+    },
+  });
+}

@navikt/codemod/transforms/v1.0.0/__testfixtures__/chat/complete.input.js

@@ -8,8 +8,9 @@ export const Page = () => {
       topText="Ola Normann 01.01.21 14:00"
       backgroundColor="red"
       illustrationBgColor="blue"
+      {...testProps}
     >
-      <SpeechBubble.Bubble>
+      <SpeechBubble.Bubble {...testProps}>
         Aute minim nisi sunt mollit duis sunt nulla minim non proident.
       </SpeechBubble.Bubble>
       <SpeechBubble.Bubble>

@navikt/codemod/transforms/v1.0.0/__testfixtures__/chat/complete.output.js

@@ -8,8 +8,9 @@ export const Page = () => {
       name="Ola Normann 01.01.21 14:00"
       backgroundColor="red"
       avatarBgColor="blue"
+      {...testProps}
     >
-      <Chat.Bubble>
+      <Chat.Bubble {...testProps}>
         Aute minim nisi sunt mollit duis sunt nulla minim non proident.
       </Chat.Bubble>
       <Chat.Bubble>

@navikt/codemod/transforms/v1.0.0/__testfixtures__/pagination/idempotent.input.js

@@ -3,9 +3,16 @@ import { Pagination, Button } from "@navikt/ds-react";
 export const Demo = () => {
   return (
     <div>
-      <Pagination size="small" onPageChange={setPage} data-version="v1" />
+      <Pagination
+        size="small"
+        onPageChange={setPage}
+        data-version="v1"
+        {...testProps}
+      />
       <Pagination size="small" onPageChange={setPage} data-version="v1" />
       <Pagination size="xsmall" onPageChange={setPage} data-version="v1" />
+      <Pagination onPageChange={setPage} />
+      <Pagination size="small" onPageChange={setPage} />
     </div>
   );
 };

@navikt/codemod/transforms/v1.0.0/__testfixtures__/pagination/idempotent.output.js

@@ -3,7 +3,14 @@ import { Pagination, Button } from "@navikt/ds-react";
 export const Demo = () => {
   return (
     <div>
+      <Pagination
+        size="small"
+        onPageChange={setPage}
+        data-version="v1"
+        {...testProps}
+      />
       <Pagination size="small" onPageChange={setPage} data-version="v1" />
+      <Pagination size="xsmall" onPageChange={setPage} data-version="v1" />
       <Pagination size="small" onPageChange={setPage} data-version="v1" />
       <Pagination size="xsmall" onPageChange={setPage} data-version="v1" />
     </div>

@navikt/codemod/transforms/v1.0.0/__testfixtures__/pagination/import.output.js

@@ -3,9 +3,9 @@ import { Pagination as DsPagination, Button } from "@navikt/ds-react";
 export const Demo = () => {
   return (
     <div>
-      <DsPagination size="small" onPageChange={setPage} />
-      <DsPagination size="small" onPageChange={setPage} />
-      <DsPagination size="xsmall" onPageChange={setPage} />
+      <DsPagination size="small" onPageChange={setPage} data-version="v1" />
+      <DsPagination size="small" onPageChange={setPage} data-version="v1" />
+      <DsPagination size="xsmall" onPageChange={setPage} data-version="v1" />
     </div>
   );
 };

@navikt/codemod/transforms/v1.0.0/__testfixtures__/pagination/size.output.js

@@ -3,9 +3,9 @@ import { Pagination, Button } from "@navikt/ds-react";
 export const Demo = () => {
   return (
     <div>
-      <Pagination size="small" onPageChange={setPage} />
-      <Pagination size="small" onPageChange={setPage} />
-      <Pagination size="xsmall" onPageChange={setPage} />
+      <Pagination size="small" onPageChange={setPage} data-version="v1" />
+      <Pagination size="small" onPageChange={setPage} data-version="v1" />
+      <Pagination size="xsmall" onPageChange={setPage} data-version="v1" />
     </div>
   );
 };

@navikt/codemod/transforms/v1.0.0/__testfixtures__/tabs/complete.input.js

@@ -4,9 +4,9 @@ const TabComp = () => {
   return (
     /* prettier-ignore */
     <div>
-      <Tabs defaultValue="logg" onChange={(x) => console.log(x)}>
-        <Tabs.List loop={false}>
-          <Tabs.Tab value="logg" iconPosition={props.left} label="logg" />
+      <Tabs defaultValue="logg" onChange={(x) => console.log(x)} {...testProps}>
+        <Tabs.List loop={false} {...testProps}>
+          <Tabs.Tab value="logg" iconPosition={props.left} label="logg" {...testProps}/>
           <Tabs.Tab value="logg2" iconPosition="top" label="logg2medlangtekst" />
         </Tabs.List>
         <Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>

@navikt/codemod/transforms/v1.0.0/__testfixtures__/tabs/complete.output.js

@@ -7,10 +7,11 @@ const TabComp = () => {
       <Tabs
         defaultValue="logg"
         onChange={(x) => console.log(x)}
+        {...testProps}
         loop={false}
         iconPosition={props.left}>
-        <Tabs.List>
-          <Tabs.Tab value="logg" label="logg" />
+        <Tabs.List {...testProps}>
+          <Tabs.Tab value="logg" label="logg" {...testProps} />
           <Tabs.Tab value="logg2" label="logg2medlangtekst" />
         </Tabs.List>
         <Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>

@navikt/codemod/transforms/v1.0.0/chat.ts

@@ -1,4 +1,4 @@
-import renameProps from "../utils/rename-props";
+import renameProps from "../../utils/rename-props";
 
 /**
  * @param {import('jscodeshift').FileInfo} file
@@ -28,7 +28,7 @@ export default function transformer(file, api, options) {
       });
     });
 
-  if (!!j(file.source).findJSXElements(localName)) {
+  if (j(file.source).findJSXElements(localName)) {
     renameProps({
       root,
       componentName: localName,

@navikt/codemod/transforms/v1.0.0/pagination.ts

@@ -8,6 +8,22 @@ export default function transformer(file, api, options) {
 
   const root = j(file.source);
 
+  function addMigrationTag(node) {
+    const attributes = node.openingElement.attributes;
+    const isMigrated = attributes.find(
+      (node) =>
+        node.type === "JSXAttribute" &&
+        node.name.name === "data-version" &&
+        node.value.value === "v1"
+    );
+
+    if (!isMigrated) {
+      attributes.push(
+        j.jsxAttribute(j.jsxIdentifier("data-version"), j.literal("v1"))
+      );
+    }
+  }
+
   /* https://github.com/mui/material-ui/blob/master/packages/mui-codemod/src/v5.0.0/variant-prop.js */
   function addExplicitStandardProp(node) {
     const attributes = node.openingElement.attributes;
@@ -19,6 +35,7 @@ export default function transformer(file, api, options) {
       attributes.unshift(
         j.jsxAttribute(j.jsxIdentifier("size"), j.literal("small"))
       );
+      addMigrationTag(node);
     }
   }
 
@@ -37,19 +54,25 @@ export default function transformer(file, api, options) {
       });
     });
 
-  if (!!j(file.source).findJSXElements(localName)) {
+  if (j(file.source).findJSXElements(localName)) {
     root.findJSXElements(`${localName}`).forEach((parent) => {
       const skip = !!parent.value.openingElement?.attributes.find(
         (x) => x.name.name === "data-version" && x.value.value === "v1"
       );
+
       parent.value.openingElement?.attributes.forEach((x, index) => {
+        let didUpdate = false;
         if (x.name?.name === "size" && x.type === "JSXAttribute" && !skip) {
           /* addExplicitStandardProp */
           if (x.value.value === "medium") {
             x.value = j.literal("small");
+            didUpdate = true;
           } else if (x.value.value === "small") {
             x.value = j.literal("xsmall");
+            didUpdate = true;
           }
+
+          didUpdate && addMigrationTag(parent.value);
         }
       });
       addExplicitStandardProp(parent.value);

@navikt/codemod/transforms/v1.0.0/preset.ts

@@ -0,0 +1,15 @@
+import transformTabs from "./tabs";
+import transformChat from "./chat";
+import transformPagination from "./pagination";
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  file.source = transformTabs(file, api, options);
+  file.source = transformChat(file, api, options);
+  file.source = transformPagination(file, api, options);
+
+  return file.source;
+}

@navikt/codemod/transforms/v1.0.0/tabs.ts

@@ -1,4 +1,4 @@
-import renameProps from "../utils/rename-props";
+import renameProps from "../../utils/rename-props";
 
 /**
  * @param {import('jscodeshift').FileInfo} file
@@ -23,7 +23,7 @@ export default function transformer(file, api, options) {
       });
     });
 
-  if (!!j(file.source).findJSXElements(localName)) {
+  if (j(file.source).findJSXElements(localName)) {
     renameProps({
       root,
       componentName: `${localName}.List`,

@navikt/codemod/transforms/v2.0.0/update-css-tokens/tests/complete.input.css

@@ -0,0 +1,7 @@
+.test {
+  color: var(--navds-global-color-blue-100);
+  color: var(--navds-global-color-red-100);
+
+  --navds-global-color-red-100: var(--navds-global-color-green-100);
+  --navds-global-color-blue-100: red;
+}

@navikt/codemod/transforms/v2.0.0/update-css-tokens/tests/complete.input.js

@@ -0,0 +1,16 @@
+const StyledDiv = styled`
+--navds-global-color-red-100: var(--navds-global-color-green-100);
+--navds-global-color-blue-100: red;
+
+.test{
+  color: var(--navds-global-color-blue-100);
+}
+`;
+
+<style>
+  {`
+  .test{
+    color: var(--navds-global-color-blue-100);
+  }
+  `}
+</style>;

@navikt/codemod/transforms/v2.0.0/update-css-tokens/tests/complete.output.css

@@ -0,0 +1,7 @@
+.test {
+  color: var(--a-blue-100);
+  color: var(--a-red-100);
+
+  --v2-migration__navds-global-color-red-100: var(--a-green-100);
+  --v2-migration__navds-global-color-blue-100: red;
+}

@navikt/codemod/transforms/v2.0.0/update-css-tokens/tests/complete.output.js

@@ -0,0 +1,16 @@
+const StyledDiv = styled`
+--v2-migration__navds-global-color-red-100: var(--a-green-100);
+--v2-migration__navds-global-color-blue-100: red;
+
+.test{
+  color: var(--a-blue-100);
+}
+`;
+
+<style>
+  {`
+  .test{
+    color: var(--a-blue-100);
+  }
+  `}
+</style>;

@navikt/codemod/transforms/v2.0.0/update-css-tokens/tests/update-css-tokens.test.ts

@@ -0,0 +1,18 @@
+import { check } from "../../../../utils/check";
+
+const migration = "update-css-tokens";
+const fixtures = ["complete"];
+
+for (const fixture of fixtures) {
+  check(__dirname, {
+    fixture,
+    migration,
+    extension: "js",
+  });
+
+  check(__dirname, {
+    fixture,
+    migration,
+    extension: "css",
+  });
+}

@navikt/codemod/transforms/v2.0.0/update-css-tokens/update-css-tokens.ts

@@ -0,0 +1,22 @@
+import { tokens } from "../../../tokens-map.mjs";
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api) {
+  let src = file.source;
+
+  tokens.forEach((tok) => {
+    // eslint-disable-next-line no-useless-concat
+    const rgx = new RegExp("(" + `${tok[0]}:` + ")", "gm");
+    src = src.replace(rgx, `--v2-migration${tok[0].replace("--", "__")}:`);
+  });
+
+  tokens.forEach((tok) => {
+    const rgx = new RegExp("(" + tok[0] + ")", "gm");
+    src = src.replace(rgx, tok[1]);
+  });
+
+  return src;
+}

@navikt/codemod/transforms/v2.0.0/update-js-tokens/tests/complete.input.js

@@ -0,0 +1,88 @@
+import styled from "styled-components";
+import {
+  NavdsGlobalColorBlue400 as abc132,
+  NavdsGlobalColorGray100,
+  NavdsGlobalColorGray400,
+  NavdsSemanticColorLink,
+} from "@navikt/ds-tokens/dist/tokens";
+import { BodyShort } from "@navikt/ds-react";
+
+const StyledNavLink = styled(NavLink)`
+  border-bottom: 5px solid white;
+  color: inherit;
+  text-align: center;
+  text-decoration: none;
+  width: 100%;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  padding-left: 5px;
+  padding-right: 5px;
+  :hover {
+    border-bottom: 5px solid ${abc132};
+    p {
+      color: ${NavdsSemanticColorLink};
+    }
+  }
+  &.active {
+    background-color: ${NavdsGlobalColorGray100};
+    border-bottom: 5px solid ${NavdsSemanticColorLink};
+
+    .typo-normal {
+      font-weight: bold;
+    }
+  }
+`;
+
+const StyledLenketekst = styled(BodyShort)`
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+`;
+
+const StyledTekst = styled(BodyShort)`
+  border-bottom: 5px solid white;
+  color: ${NavdsGlobalColorGray400};
+  text-align: center;
+  text-decoration: none;
+  width: 100%;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  padding-left: 5px;
+  padding-right: 5px;
+`;
+
+const Fane = ({ side, behandlingId, index, deaktivert }) => {
+  const { gåTilUrl } = useApp();
+  const fanenavn = side.navn;
+  return (
+    <>
+      {deaktivert && (
+        <StyledTekst size={"small"}>
+          {index + 1}. {fanenavn}
+        </StyledTekst>
+      )}
+      {!deaktivert && (
+        <StyledNavLink
+          key={side.navn}
+          to={`/behandling/${behandlingId}/${side.href}`}
+          onClick={(e) => {
+            e.preventDefault();
+            gåTilUrl(`/behandling/${behandlingId}/${side.href}`);
+          }}
+        >
+          <StyledLenketekst size={"small"}>
+            {index + 1}. {fanenavn}
+          </StyledLenketekst>
+        </StyledNavLink>
+      )}
+    </>
+  );
+};
+
+export default Fane;

@navikt/codemod/transforms/v2.0.0/update-js-tokens/tests/complete.output.js

@@ -0,0 +1,88 @@
+import styled from "styled-components";
+import {
+  ABlue400,
+  AGray100,
+  AGray400,
+  ATextAction,
+} from "@navikt/ds-tokens/dist/tokens";
+import { BodyShort } from "@navikt/ds-react";
+
+const StyledNavLink = styled(NavLink)`
+  border-bottom: 5px solid white;
+  color: inherit;
+  text-align: center;
+  text-decoration: none;
+  width: 100%;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  padding-left: 5px;
+  padding-right: 5px;
+  :hover {
+    border-bottom: 5px solid ${ABlue400};
+    p {
+      color: ${ATextAction};
+    }
+  }
+  &.active {
+    background-color: ${AGray100};
+    border-bottom: 5px solid ${ATextAction};
+
+    .typo-normal {
+      font-weight: bold;
+    }
+  }
+`;
+
+const StyledLenketekst = styled(BodyShort)`
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+`;
+
+const StyledTekst = styled(BodyShort)`
+  border-bottom: 5px solid white;
+  color: ${AGray400};
+  text-align: center;
+  text-decoration: none;
+  width: 100%;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  padding-left: 5px;
+  padding-right: 5px;
+`;
+
+const Fane = ({ side, behandlingId, index, deaktivert }) => {
+  const { gåTilUrl } = useApp();
+  const fanenavn = side.navn;
+  return (
+    <>
+      {deaktivert && (
+        <StyledTekst size={"small"}>
+          {index + 1}. {fanenavn}
+        </StyledTekst>
+      )}
+      {!deaktivert && (
+        <StyledNavLink
+          key={side.navn}
+          to={`/behandling/${behandlingId}/${side.href}`}
+          onClick={(e) => {
+            e.preventDefault();
+            gåTilUrl(`/behandling/${behandlingId}/${side.href}`);
+          }}
+        >
+          <StyledLenketekst size={"small"}>
+            {index + 1}. {fanenavn}
+          </StyledLenketekst>
+        </StyledNavLink>
+      )}
+    </>
+  );
+};
+
+export default Fane;

@navikt/codemod/transforms/v2.0.0/update-js-tokens/tests/update-js-tokens.test.ts

@@ -0,0 +1,12 @@
+import { check } from "../../../../utils/check";
+
+const migration = "update-js-tokens";
+const fixtures = ["complete"];
+
+for (const fixture of fixtures) {
+  check(__dirname, {
+    fixture,
+    migration,
+    extension: "js",
+  });
+}

@navikt/codemod/transforms/v2.0.0/update-js-tokens/update-js-tokens.ts

@@ -0,0 +1,67 @@
+import type { JSCodeshift } from "jscodeshift";
+import {
+  getImportSpecifier,
+  getImportSpecifierName,
+  renameImportSpecifier,
+} from "../../../utils/imports";
+import { translateToken } from "../../../utils/translate-token";
+import { tokens } from "../../../tokens-map.mjs";
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file: JSCodeshift, api) {
+  let src = file.source;
+
+  const j = api.jscodeshift as JSCodeshift;
+
+  let root = j(file.source);
+
+  const jsImport = root.find(j.ImportDeclaration).filter((x) => {
+    return ["@navikt/ds-tokens/dist/tokens"].includes(
+      x.node.source.value as string
+    );
+  });
+
+  if (!jsImport) {
+    return src;
+  }
+
+  tokens.forEach((x) => {
+    const name = translateToken(x[0], "js");
+    const out = translateToken(x[1], "js");
+
+    let foundName: string = "";
+
+    getImportSpecifier(j, root, name, "@navikt/ds-tokens/dist/tokens").forEach(
+      (x) => (foundName = x.node.imported.name)
+    );
+
+    if (name === foundName) {
+      const localName =
+        getImportSpecifierName(
+          j,
+          root,
+          name,
+          "@navikt/ds-tokens/dist/tokens"
+        ) || name;
+
+      renameImportSpecifier(
+        j,
+        root,
+        name,
+        out,
+        "@navikt/ds-tokens/dist/tokens"
+      );
+
+      let code = root.toSource();
+
+      const rgx = new RegExp("(" + localName + ")", "gm");
+      code = code.replace(rgx, out);
+      root = j(code);
+    }
+  });
+
+  return root.toSource();
+}

@navikt/codemod/transforms/v2.0.0/update-less-tokens/tests/complete.input.less

@@ -0,0 +1,26 @@
+.filtersMenu {
+  box-shadow: @navds-global-color-blue-200 inset 0 0 0 8px;
+  border-radius: 0.2em;
+  background-color: white;
+}
+
+.filterExplanationHighlight {
+  background-color: @navds-global-color-green-100;
+  border: 1px solid @navds-global-color-green-500;
+  transition: all 0.4s linear;
+}
+
+.lenkepanelNavno {
+  border: 1px solid @navds-semantic-color-link;
+
+  .navds-link-panel__content {
+    display: flex;
+  }
+
+  .navds-link-panel__title,
+  .navds-link-panel__chevron {
+    color: @navds-semantic-color-link;
+  }
+
+  background-color: @navds-global-color-gray-600;
+}

@navikt/codemod/transforms/v2.0.0/update-less-tokens/tests/complete.output.less

@@ -0,0 +1,26 @@
+.filtersMenu {
+  box-shadow: @a-blue-200 inset 0 0 0 8px;
+  border-radius: 0.2em;
+  background-color: white;
+}
+
+.filterExplanationHighlight {
+  background-color: @a-green-100;
+  border: 1px solid @a-green-500;
+  transition: all 0.4s linear;
+}
+
+.lenkepanelNavno {
+  border: 1px solid @a-text-action;
+
+  .navds-link-panel__content {
+    display: flex;
+  }
+
+  .navds-link-panel__title,
+  .navds-link-panel__chevron {
+    color: @a-text-action;
+  }
+
+  background-color: @a-gray-600;
+}

@navikt/codemod/transforms/v2.0.0/update-less-tokens/tests/update-less-tokens.test.ts

@@ -0,0 +1,12 @@
+import { check } from "../../../../utils/check";
+
+const migration = "update-less-tokens";
+const fixtures = ["complete"];
+
+for (const fixture of fixtures) {
+  check(__dirname, {
+    fixture,
+    migration,
+    extension: "less",
+  });
+}

@navikt/codemod/transforms/v2.0.0/update-less-tokens/update-less-tokens.ts

@@ -0,0 +1,19 @@
+import { translateToken } from "../../../utils/translate-token";
+import { tokens } from "../../../tokens-map.mjs";
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api) {
+  let src = file.source;
+
+  tokens.forEach((tok) => {
+    const lessToken = translateToken(tok[0], "less");
+
+    const rgx = new RegExp("(\\" + lessToken + ")", "gm");
+    src = src.replace(rgx, translateToken(tok[1], "less"));
+  });
+
+  return src;
+}

@navikt/codemod/transforms/v2.0.0/update-sass-tokens/tests/complete.input.scss

@@ -0,0 +1,30 @@
+.filtersMenu {
+  box-shadow: common.$navds-global-color-blue-200 inset 0 0 0 8px;
+  border-radius: 0.2em;
+  background-color: white;
+}
+
+.filterExplanationHighlight {
+  background-color: common.$navds-global-color-green-100;
+  border: 1px solid common.$navds-global-color-green-500;
+  transition: all 0.4s linear;
+}
+
+.lenkepanelNavno {
+  &:global(.navds-link-panel) {
+    border: 1px solid common.$navds-semantic-color-link;
+  }
+
+  :global {
+    .navds-link-panel__content {
+      display: flex;
+    }
+
+    .navds-link-panel__title,
+    .navds-link-panel__chevron {
+      color: common.$navds-semantic-color-link;
+    }
+  }
+
+  background-color: common.$navds-global-color-gray-600;
+}

@navikt/codemod/transforms/v2.0.0/update-sass-tokens/tests/complete.output.scss

@@ -0,0 +1,30 @@
+.filtersMenu {
+  box-shadow: common.$a-blue-200 inset 0 0 0 8px;
+  border-radius: 0.2em;
+  background-color: white;
+}
+
+.filterExplanationHighlight {
+  background-color: common.$a-green-100;
+  border: 1px solid common.$a-green-500;
+  transition: all 0.4s linear;
+}
+
+.lenkepanelNavno {
+  &:global(.navds-link-panel) {
+    border: 1px solid common.$a-text-action;
+  }
+
+  :global {
+    .navds-link-panel__content {
+      display: flex;
+    }
+
+    .navds-link-panel__title,
+    .navds-link-panel__chevron {
+      color: common.$a-text-action;
+    }
+  }
+
+  background-color: common.$a-gray-600;
+}

@navikt/codemod/transforms/v2.0.0/update-sass-tokens/tests/update-sass-tokens.test.ts

@@ -0,0 +1,12 @@
+import { check } from "../../../../utils/check";
+
+const migration = "update-sass-tokens";
+const fixtures = ["complete"];
+
+for (const fixture of fixtures) {
+  check(__dirname, {
+    fixture,
+    migration,
+    extension: "scss",
+  });
+}

@navikt/codemod/transforms/v2.0.0/update-sass-tokens/update-sass-tokens.ts

@@ -0,0 +1,19 @@
+import { translateToken } from "../../../utils/translate-token";
+import { tokens } from "../../../tokens-map.mjs";
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api) {
+  let src = file.source;
+
+  tokens.forEach((tok) => {
+    const scssToken = translateToken(tok[0], "scss");
+
+    const rgx = new RegExp("(\\" + scssToken + ")", "gm");
+    src = src.replace(rgx, translateToken(tok[1], "scss"));
+  });
+
+  return src;
+}

@navikt/codemod/utils/check.ts

@@ -0,0 +1,47 @@
+import fs from "node:fs";
+import path from "node:path";
+
+import prettier from "prettier";
+
+const applyTransform = require("jscodeshift/dist/testUtils").applyTransform;
+
+interface TestT {
+  fixture: string;
+  migration: string;
+  extension?: "js" | "scss" | "less" | "css";
+  options?: { [option: string]: any };
+}
+
+export function check(
+  dirName: string,
+  { fixture, migration, extension = "js", options = {} }: TestT
+) {
+  describe(migration, () => {
+    it(fixture, async () => {
+      const fixtureDir = path.join(dirName);
+      const inputPath = path.join(fixtureDir, `${fixture}.input.${extension}`);
+      const parser = extension;
+      const source = fs.readFileSync(inputPath, "utf8");
+      const expected = fs.readFileSync(
+        path.join(fixtureDir, `${fixture}.output.${extension}`),
+        "utf8"
+      );
+      // Assumes transform is one level up from tests directory
+      const module = await import(path.join(dirName, "..", migration));
+      const output = applyTransform({ ...module, parser: "tsx" }, options, {
+        source,
+      });
+
+      // Format output and expected with prettier for white spaces and line breaks consistency
+      expect(
+        prettier.format(output, {
+          parser: parser === "js" ? "typescript" : parser,
+        })
+      ).toBe(
+        prettier.format(expected, {
+          parser: parser === "js" ? "typescript" : parser,
+        })
+      );
+    });
+  });
+}

@navikt/codemod/utils/imports.ts

@@ -0,0 +1,37 @@
+import core, { Collection } from "jscodeshift";
+
+export function getImportSpecifier(
+  j: core.JSCodeshift,
+  source: Collection<any>,
+  specifier: string,
+  sourcePath: string
+) {
+  return source
+    .find(j.ImportDeclaration)
+    .filter((path) => path.node.source.value === sourcePath)
+    .find(j.ImportSpecifier)
+    .filter((path) => path.value.imported.name === specifier);
+}
+
+export function renameImportSpecifier(
+  j: core.JSCodeshift,
+  source: Collection<any>,
+  specifier: string,
+  newSpecifier: string,
+  sourcePath: string
+) {
+  getImportSpecifier(j, source, specifier, sourcePath).replaceWith(
+    j.importSpecifier(j.identifier(newSpecifier))
+  );
+}
+
+export function getImportSpecifierName(
+  j: core.JSCodeshift,
+  source: Collection<any>,
+  specifier: string,
+  sourcePath: string
+) {
+  const specifiers = getImportSpecifier(j, source, specifier, sourcePath);
+
+  return specifiers.length > 0 ? specifiers.nodes()[0]!.local!.name : null;
+}

@navikt/codemod/utils/tests/translate-token.test.ts

@@ -0,0 +1,36 @@
+import { translateToken } from "../translate-token";
+
+export {};
+
+jest.autoMockOff();
+
+const tokens = [
+  {
+    name: "--navds-global-color-red-100",
+    scss: "$navds-global-color-red-100",
+    less: "@navds-global-color-red-100",
+    js: "NavdsGlobalColorRed100",
+  },
+  {
+    name: "--a-blue-100",
+    scss: "$a-blue-100",
+    less: "@a-blue-100",
+    js: "ABlue100",
+  },
+];
+
+describe("Translating tokens to correct format", () => {
+  test("To scss", () => {
+    tokens.forEach((x) =>
+      expect(translateToken(x.name, "scss")).toEqual(x.scss)
+    );
+  });
+  test("To less", () => {
+    tokens.forEach((x) =>
+      expect(translateToken(x.name, "less")).toEqual(x.less)
+    );
+  });
+  test("To js", () => {
+    tokens.forEach((x) => expect(translateToken(x.name, "js")).toEqual(x.js));
+  });
+});

@navikt/codemod/utils/translate-token.ts

@@ -0,0 +1,15 @@
+import _ from "lodash";
+
+export const translateToken = (token: string, type: "scss" | "less" | "js") => {
+  switch (type) {
+    case "scss":
+      return token.replace("--", "$");
+    case "less":
+      return token.replace("--", "@");
+    case "js":
+      return _.startCase(token).split(" ").join("");
+
+    default:
+      return token;
+  }
+};

@navikt/community/navno/.svgrrc.js

@@ -0,0 +1,16 @@
+const template = require("./template");
+
+module.exports = {
+  typescript: true,
+  ref: true,
+  icon: false,
+  titleProp: false,
+  svgProps: {
+    focusable: false,
+    role: "img",
+  },
+  /* replaceAttrValues: {
+    "#262626": "currentColor",
+  }, */
+  template,
+};

@navikt/community/navno/README.md

@@ -0,0 +1,38 @@
+# NAV React-components for nav.no
+
+## Installation
+
+Install `@navikt/ds-navno` with yarn
+
+```bash
+  yarn add @navikt/ds-navno
+```
+
+Install `@navikt/ds-navno` with npm
+
+```bash
+  npm install @navikt/ds-navno
+```
+
+## Usage
+
+Remember to also import @navikt/ds-navno/css to apply styling!
+
+```javascript
+import "@navikt/ds-navno/css";
+import { PageHeader } from "@navikt/ds-navno";
+
+function App() {
+  return <PageHeader />;
+}
+```
+
+## Learn more
+
+- [Designsystem documentation](https://aksel.nav.no/designsystem)
+- [Component-docs](https://aksel.nav.no/designsystem/side/oversikt-komponenter)
+- [Storybook](https://master--5f801fb2aea7820022de2936.chromatic.com/)
+
+## License
+
+[MIT](https://github.com/navikt/Designsystemet/blob/master/LICENCE)

@navikt/community/navno/babel.config.js

@@ -0,0 +1,20 @@
+/**
+ * @type {import('@babel/core').TransformOptions}
+ */
+module.exports = {
+  presets: [
+    [
+      "@babel/preset-env",
+      {
+        modules: "auto",
+        useBuiltIns: "entry",
+        corejs: 3,
+        debug: false,
+        bugfixes: true,
+      },
+    ],
+    ["@babel/preset-typescript", {}],
+    ["@babel/preset-react", { development: false, useBuiltIns: true }],
+  ],
+  babelrcRoots: ["."],
+};

@navikt/community/navno/index-template.js

@@ -0,0 +1,12 @@
+const path = require("path");
+
+function defaultIndexTemplate(filePaths) {
+  const exportEntries = filePaths.map((filePath) => {
+    const basename = path.basename(filePath, path.extname(filePath));
+    const exportName = /^\d/.test(basename) ? `Svg${basename}` : basename;
+    return `export { default as Pictogram${exportName} } from './${basename}'`;
+  });
+  return exportEntries.join("\n");
+}
+
+module.exports = defaultIndexTemplate;

@navikt/community/navno/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@navikt/ds-navno",
+  "version": "0.0.1",
+  "private": true,
+  "description": "nav.no + ds components",
+  "author": "Aksel | NAV designsystem team",
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "typescript",
+    "javascript"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/navikt/Designsystemet.git"
+  },
+  "sideEffects": false,
+  "main": "./cjs/index.js",
+  "module": "./esm/index.js",
+  "typings": "./esm/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "/css",
+    "/cjs",
+    "/esm",
+    "/src",
+    "_docs.json",
+    "!**/*.tsbuildinfo"
+  ],
+  "scripts": {
+    "docgen": "yarn ts-node ../../../scripts/docgen.ts",
+    "create-package-json-pointers-to-esm": "node ../../../scripts/createPackageJsonsWithESMPointers.js",
+    "clean": "rimraf cjs esm css",
+    "build": "yarn build-pict && concurrently \"tsc -b\" \"rollup -c\" && yarn css && yarn create-package-json-pointers-to-esm",
+    "css": "copyfiles -f esm/index.css css/ && rimraf esm/*.css cjs/*.css",
+    "test-ignore": "TZ=UTC jest",
+    "build-pict": "svgr --silent --index-template index-template.js --out-dir src/pictograms pictograms"
+  },
+  "dependencies": {
+    "@navikt/ds-icons": "^2.0.2",
+    "@navikt/ds-react": "^2.0.2",
+    "clsx": "^1.1.1"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "7.19.4",
+    "@babel/preset-react": "7.18.6",
+    "@babel/preset-typescript": "7.18.6",
+    "@rollup/plugin-babel": "6.0.2",
+    "@rollup/plugin-commonjs": "23.0.2",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@svgr/cli": "6.2.1",
+    "@types/node": "^17.0.35",
+    "concurrently": "7.2.1",
+    "copyfiles": "2.4.1",
+    "postcss-combine-duplicated-selectors": "10.0.3",
+    "postcss-import": "14.1.0",
+    "rimraf": "^3.0.2",
+    "rollup": "3.2.3",
+    "rollup-plugin-node-externals": "5.0.1",
+    "rollup-plugin-postcss": "4.0.2",
+    "ts-node": "10.9.0",
+    "typescript": "^4.8.0"
+  },
+  "peerDependencies": {
+    "@types/react": "^17.0.30 || ^18.0.0",
+    "react": "^17.0.0 || ^18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  }
+}

@navikt/community/navno/pictograms/utbetalingsdatoer-small.svg

@@ -0,0 +1,71 @@
+<svg
+  width="64"
+  height="64"
+  viewBox="0 0 64 64"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M31.3332 41.791C31.3332 35.3802 37.5554 24.1613 40.6665 24.1613C43.7777 24.1613 49.9999 35.3802 49.9999 41.791C49.9999 48.2017 45.8212 53.0098 40.6665 53.0098C35.5119 53.0098 31.3332 48.8721 31.3332 41.791Z"
+    fill="#FFECCC"
+  />
+  <path
+    d="M39.825 25.4844C40.2522 25.9492 40.9751 25.9796 41.4398 25.5525C41.9046 25.1254 41.935 24.4024 41.5079 23.9377L39.825 25.4844ZM30.4271 17.5238L23.3331 17.5238L23.3331 19.8095L30.4271 19.8095L30.4271 17.5238ZM6.19028 34.6666L6.19028 64L8.476 64L8.476 34.6666L6.19028 34.6666ZM37.439 22.8885L39.825 25.4844L41.5079 23.9377L39.1219 21.3417L37.439 22.8885ZM23.3331 17.5238C13.8654 17.5238 6.19028 25.1989 6.19028 34.6666L8.476 34.6666C8.47599 26.4612 15.1278 19.8095 23.3331 19.8095L23.3331 17.5238ZM30.4271 19.8095C33.0923 19.8095 35.6355 20.9262 37.439 22.8885L39.1219 21.3417C36.8855 18.9085 33.7319 17.5238 30.4271 17.5238L30.4271 19.8095Z"
+    fill="#FFECCC"
+  />
+  <path
+    d="M13.8571 42.744C13.8571 44.042 13.1875 45.9912 12.2658 47.6744C11.8135 48.5002 11.3322 49.2031 10.8996 49.6838C10.6824 49.9251 10.4999 50.0852 10.3619 50.178C10.331 50.1987 10.3057 50.2139 10.2857 50.2249C10.2658 50.2139 10.2404 50.1987 10.2095 50.178C10.0715 50.0852 9.88904 49.9251 9.67187 49.6838C9.23923 49.2031 8.75791 48.5002 8.30567 47.6744C7.38392 45.9912 6.71429 44.042 6.71429 42.744C6.71429 40.0533 8.45327 38.3334 10.2857 38.3334C11.273 38.3334 12.1413 38.718 12.7725 39.4244C13.4078 40.1352 13.8571 41.2363 13.8571 42.744Z"
+    stroke="#262626"
+    stroke-width="2"
+  />
+  <path
+    d="M18.6667 47.6085C17.3979 47.6085 15.4832 48.2838 13.8244 49.2188C13.0115 49.6769 12.3196 50.1645 11.8462 50.603C11.6088 50.823 11.4505 51.0084 11.3582 51.1497C11.3312 51.1911 11.3135 51.2231 11.302 51.2462C11.3135 51.2693 11.3312 51.3012 11.3582 51.3426C11.4505 51.4839 11.6088 51.6694 11.8462 51.8894C12.3196 52.3278 13.0115 52.8155 13.8244 53.2736C15.4832 54.2085 17.3979 54.8839 18.6667 54.8839C21.2846 54.8839 23 53.1402 23 51.2462C23 50.2306 22.6149 49.3431 21.9188 48.7029C21.2203 48.0605 20.1423 47.6085 18.6667 47.6085Z"
+    stroke="#262626"
+    stroke-width="2"
+  />
+  <path
+    d="M11.9764 50.0867V50.0867C8.85957 51.4986 6.85728 54.6037 6.85728 58.0254L6.85728 60.5216"
+    stroke="#262626"
+    stroke-width="2"
+  />
+  <path
+    d="M3.87373e-05 64.0002V64.0002C3.08423 58.7853 10.6301 58.7853 13.7143 64.0002V64.0002"
+    stroke="#262626"
+    stroke-width="2"
+  />
+  <path
+    d="M52.6224 26.9825V26.9825C57.4166 26.9258 61.3335 30.7966 61.3335 35.5912L61.3335 64.667"
+    stroke="#262626"
+    stroke-width="2"
+  />
+  <path
+    d="M54.0742 15.5883C52.2506 15.5883 49.5767 16.527 47.2991 17.7872C46.1764 18.4083 45.2094 19.0755 44.5387 19.6854C44.2024 19.9911 43.9655 20.2602 43.8195 20.4797C43.6933 20.6694 43.6714 20.7672 43.6676 20.7852C43.6714 20.8032 43.6933 20.9011 43.8195 21.0908C43.9655 21.3103 44.2024 21.5793 44.5387 21.8851C45.2094 22.495 46.1764 23.1621 47.2991 23.7833C49.5767 25.0435 52.2506 25.9821 54.0742 25.9821C57.811 25.9821 60.3335 23.5243 60.3335 20.7852C60.3335 19.3455 59.7756 18.0698 58.7519 17.1456C57.7245 16.2179 56.1626 15.5883 54.0742 15.5883Z"
+    stroke="#262626"
+    stroke-width="2"
+  />
+  <path
+    d="M31.2594 25.9823C33.0831 25.9823 35.757 25.0436 38.0346 23.7834C39.1573 23.1622 40.1243 22.4951 40.795 21.8852C41.1312 21.5795 41.3682 21.3104 41.5141 21.0909C41.6403 20.9012 41.6622 20.8034 41.666 20.7854C41.6622 20.7674 41.6403 20.6695 41.5141 20.4798C41.3682 20.2603 41.1312 19.9913 40.795 19.6855C40.1243 19.0756 39.1573 18.4085 38.0346 17.7873C35.757 16.5271 33.0831 15.5884 31.2594 15.5884C27.5226 15.5884 25.0002 18.0463 25.0002 20.7854C25.0002 22.2251 25.558 23.5007 26.5817 24.425C27.6092 25.3526 29.1711 25.9823 31.2594 25.9823Z"
+    stroke="#262626"
+    stroke-width="2"
+  />
+  <path
+    d="M43.8491 8.75968C42.9384 10.3306 42.4176 13.1046 42.3746 15.699C42.3535 16.9776 42.45 18.145 42.645 19.0283C42.7427 19.4711 42.8582 19.8101 42.9762 20.046C43.0806 20.2547 43.1564 20.322 43.1689 20.3329C43.1847 20.3382 43.281 20.37 43.5147 20.3557C43.7789 20.3395 44.1314 20.2696 44.5653 20.1325C45.4309 19.859 46.4942 19.3586 47.5955 18.701C49.83 17.3667 51.9818 15.5306 52.8924 13.9597C54.7572 10.743 53.887 7.33688 51.4989 5.96367C50.2443 5.24233 48.8543 5.08606 47.5388 5.50687C46.2191 5.92903 44.8921 6.9604 43.8491 8.75968Z"
+    stroke="#262626"
+    stroke-width="2"
+  />
+  <path
+    d="M52.892 28.4375C51.9813 26.8665 49.8296 25.0304 47.5951 23.6961C46.4938 23.0385 45.4304 22.5381 44.5648 22.2646C44.1309 22.1275 43.7784 22.0576 43.5143 22.0415C43.2806 22.0272 43.1842 22.0589 43.1685 22.0642C43.156 22.0751 43.0802 22.1424 42.9758 22.3511C42.8578 22.587 42.7423 22.926 42.6446 23.3688C42.4496 24.2521 42.353 25.4195 42.3742 26.6981C42.4172 29.2925 42.938 32.0665 43.8486 33.6374C45.7134 36.8541 49.1102 37.8066 51.4984 36.4334C52.7529 35.7121 53.5838 34.5913 53.8757 33.2463C54.1684 31.8969 53.9351 30.2367 52.892 28.4375Z"
+    stroke="#262626"
+    stroke-width="2"
+  />
+  <path
+    d="M32.4416 28.4375C33.3523 26.8665 35.504 25.0304 37.7385 23.6961C38.8398 23.0385 39.9032 22.5381 40.7688 22.2646C41.2027 22.1275 41.5552 22.0576 41.8194 22.0415C42.053 22.0272 42.1494 22.0589 42.1651 22.0642C42.1776 22.0751 42.2534 22.1424 42.3578 22.3511C42.4758 22.587 42.5913 22.926 42.689 23.3688C42.884 24.2521 42.9806 25.4195 42.9594 26.6981C42.9164 29.2925 42.3957 32.0665 41.485 33.6374C39.6203 36.8541 36.2234 37.8066 33.8352 36.4334C32.5807 35.7121 31.7498 34.5913 31.458 33.2463C31.1652 31.8969 31.3985 30.2367 32.4416 28.4375Z"
+    stroke="#262626"
+    stroke-width="2"
+  />
+  <path
+    d="M32.4416 13.9599C33.3523 15.5308 35.504 17.3669 37.7385 18.7012C38.8398 19.3588 39.9032 19.8592 40.7688 20.1327C41.2027 20.2698 41.5552 20.3397 41.8194 20.3558C42.053 20.3702 42.1494 20.3384 42.1651 20.3331C42.1776 20.3222 42.2534 20.2549 42.3578 20.0462C42.4758 19.8103 42.5913 19.4713 42.689 19.0285C42.884 18.1452 42.9806 16.9778 42.9594 15.6992C42.9164 13.1048 42.3957 10.3308 41.485 8.75988C39.6203 5.54323 36.2234 4.59067 33.8352 5.96387C32.5807 6.68522 31.7498 7.80597 31.458 9.15102C31.1652 10.5004 31.3985 12.1606 32.4416 13.9599Z"
+    stroke="#262626"
+    stroke-width="2"
+  />
+</svg>

@navikt/community/navno/pictograms/utbetalingsdatoer.svg

@@ -0,0 +1,71 @@
+<svg
+  width="96"
+  height="96"
+  viewBox="0 0 96 96"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M47 62.6869C47 53.0707 56.3333 36.2424 61 36.2424C65.6667 36.2424 75 53.0707 75 62.6869C75 72.303 68.732 79.5151 61 79.5151C53.268 79.5151 47 73.3086 47 62.6869Z"
+    fill="#FFECCC"
+  />
+  <path
+    d="M60.2638 37.7434C60.6375 38.15 61.2701 38.1767 61.6768 37.8029C62.0834 37.4292 62.11 36.7966 61.7363 36.39L60.2638 37.7434ZM45.641 27L35.0001 27L35.0001 29L45.641 29L45.641 27ZM10.0001 52L10.0001 96L12.0001 96L12.0001 52L10.0001 52ZM56.6848 33.8494L60.2638 37.7434L61.7363 36.39L58.1573 32.496L56.6848 33.8494ZM35.0001 27C21.1929 27 10.0001 38.1929 10.0001 52L12.0001 52C12.0001 39.2974 22.2975 29 35.0001 29L35.0001 27ZM45.641 29C49.8386 29 53.8442 30.7589 56.6848 33.8494L58.1573 32.496C54.938 28.9934 50.3983 27 45.641 27L45.641 29Z"
+    fill="#FFECCC"
+  />
+  <path
+    d="M20.7856 64.116C20.7856 66.063 19.7812 68.9867 18.3986 71.5115C17.7202 72.7503 16.9982 73.8046 16.3493 74.5257C16.0235 74.8876 15.7498 75.1278 15.5428 75.2669C15.4964 75.2981 15.4584 75.3208 15.4285 75.3372C15.3986 75.3208 15.3606 75.2981 15.3142 75.2669C15.1072 75.1278 14.8335 74.8876 14.5077 74.5257C13.8588 73.8046 13.1368 72.7503 12.4585 71.5115C11.0758 68.9867 10.0714 66.063 10.0714 64.116C10.0714 60.0798 12.6798 57.5 15.4285 57.5C16.9095 57.5 18.2119 58.0769 19.1587 59.1365C20.1116 60.2028 20.7856 61.8545 20.7856 64.116Z"
+    stroke="#262626"
+    stroke-width="3"
+  />
+  <path
+    d="M28 71.4127C26.0969 71.4127 23.2248 72.4257 20.7365 73.8281C19.5173 74.5153 18.4794 75.2467 17.7694 75.9045C17.4131 76.2344 17.1757 76.5126 17.0373 76.7246C16.9968 76.7866 16.9702 76.8346 16.953 76.8692C16.9702 76.9039 16.9968 76.9519 17.0373 77.0139C17.1757 77.2259 17.4131 77.5041 17.7694 77.834C18.4794 78.4917 19.5173 79.2232 20.7365 79.9104C23.2248 81.3128 26.0969 82.3258 28 82.3258C31.9269 82.3258 34.5 79.7102 34.5 76.8692C34.5 75.346 33.9224 74.0146 32.8781 73.0543C31.8304 72.0907 30.2134 71.4127 28 71.4127Z"
+    stroke="#262626"
+    stroke-width="3"
+  />
+  <path
+    d="M17.9645 75.1302V75.1302C13.2893 77.248 10.2858 81.9057 10.2858 87.0383L10.2858 90.7825"
+    stroke="#262626"
+    stroke-width="3"
+  />
+  <path
+    d="M2.61579e-05 96V96C4.62632 88.1777 15.9451 88.1777 20.5714 96V96"
+    stroke="#262626"
+    stroke-width="3"
+  />
+  <path
+    d="M78.9333 40.4731V40.4731C86.1247 40.3881 92 46.1943 92 53.3862L92 97"
+    stroke="#262626"
+    stroke-width="3"
+  />
+  <path
+    d="M81.1111 23.3827C78.3756 23.3827 74.3647 24.7907 70.9484 26.681C69.2643 27.6128 67.8138 28.6135 66.8077 29.5283C66.3034 29.987 65.948 30.3905 65.729 30.7197C65.5397 31.0044 65.5068 31.1511 65.5012 31.1781C65.5068 31.2051 65.5397 31.3519 65.729 31.6365C65.948 31.9657 66.3034 32.3692 66.8077 32.8279C67.8138 33.7428 69.2643 34.7434 70.9484 35.6752C74.3647 37.5655 78.3756 38.9735 81.1111 38.9735C86.7163 38.9735 90.4999 35.2867 90.4999 31.1781C90.4999 29.0185 89.6632 27.105 88.1276 25.7186C86.5865 24.3272 84.2436 23.3827 81.1111 23.3827Z"
+    stroke="#262626"
+    stroke-width="3"
+  />
+  <path
+    d="M46.8889 38.9736C49.6243 38.9736 53.6352 37.5656 57.0516 35.6754C58.7356 34.7436 60.1861 33.7429 61.1922 32.828C61.6966 32.3694 62.052 31.9658 62.2709 31.6366C62.4602 31.352 62.4931 31.2052 62.4988 31.1782C62.4931 31.1513 62.4602 31.0045 62.2709 30.7199C62.052 30.3907 61.6966 29.9871 61.1922 29.5285C60.1861 28.6136 58.7356 27.6129 57.0516 26.6811C53.6352 24.7909 49.6243 23.3829 46.8889 23.3829C41.2837 23.3829 37.5 27.0697 37.5 31.1782C37.5 33.3379 38.3368 35.2513 39.8723 36.6377C41.4135 38.0292 43.7563 38.9736 46.8889 38.9736Z"
+    stroke="#262626"
+    stroke-width="3"
+  />
+  <path
+    d="M65.7733 13.1394C64.4073 15.4957 63.6262 19.6567 63.5617 23.5483C63.5299 25.4663 63.6748 27.2173 63.9672 28.5423C64.1138 29.2065 64.2871 29.715 64.4641 30.0689C64.6207 30.382 64.7343 30.4828 64.7531 30.4992C64.7767 30.5072 64.9212 30.5548 65.2717 30.5333C65.668 30.509 66.1968 30.4042 66.8476 30.1986C68.146 29.7883 69.7411 29.0377 71.393 28.0513C74.7447 26.0499 77.9724 23.2957 79.3384 20.9393C82.1355 16.1143 80.8303 11.0052 77.248 8.94534C75.3662 7.86333 73.2812 7.62893 71.308 8.26014C69.3284 8.89337 67.3379 10.4404 65.7733 13.1394Z"
+    stroke="#262626"
+    stroke-width="3"
+  />
+  <path
+    d="M79.3378 42.6561C77.9718 40.2997 74.7441 37.5455 71.3924 35.544C69.7405 34.5577 68.1454 33.8071 66.847 33.3968C66.1962 33.1912 65.6674 33.0863 65.2712 33.0621C64.9206 33.0406 64.7761 33.0882 64.7525 33.0962C64.7337 33.1126 64.6201 33.2134 64.4635 33.5265C64.2865 33.8804 64.1132 34.3889 63.9666 35.0531C63.6742 36.378 63.5293 38.1291 63.5611 40.047C63.6256 43.9387 64.4067 48.0996 65.7727 50.456C68.5698 55.281 73.6651 56.7098 77.2474 54.65C79.1292 53.568 80.3755 51.8869 80.8133 49.8693C81.2524 47.8453 80.9024 45.355 79.3378 42.6561Z"
+    stroke="#262626"
+    stroke-width="3"
+  />
+  <path
+    d="M48.6621 42.6561C50.0281 40.2997 53.2558 37.5455 56.6076 35.544C58.2594 34.5577 59.8545 33.8071 61.1529 33.3968C61.8038 33.1912 62.3325 33.0863 62.7288 33.0621C63.0793 33.0406 63.2238 33.0882 63.2475 33.0962C63.2662 33.1126 63.3798 33.2134 63.5364 33.5265C63.7135 33.8804 63.8867 34.3889 64.0333 35.0531C64.3258 36.378 64.4706 38.1291 64.4388 40.047C64.3744 43.9387 63.5932 48.0996 62.2272 50.456C59.4301 55.281 54.3348 56.7098 50.7525 54.65C48.8708 53.568 47.6244 51.8869 47.1867 49.8693C46.7475 47.8453 47.0976 45.355 48.6621 42.6561Z"
+    stroke="#262626"
+    stroke-width="3"
+  />
+  <path
+    d="M48.6621 20.9399C50.0281 23.2962 53.2558 26.0505 56.6076 28.0519C58.2594 29.0383 59.8545 29.7888 61.1529 30.1991C61.8038 30.4048 62.3325 30.5096 62.7288 30.5338C63.0793 30.5553 63.2238 30.5077 63.2475 30.4998C63.2662 30.4834 63.3798 30.3825 63.5364 30.0694C63.7135 29.7155 63.8867 29.2071 64.0333 28.5429C64.3258 27.2179 64.4706 25.4668 64.4388 23.5489C64.3744 19.6573 63.5932 15.4963 62.2272 13.1399C59.4301 8.31492 54.3348 6.88607 50.7525 8.94589C48.8708 10.0279 47.6244 11.709 47.1867 13.7266C46.7475 15.7506 47.0976 18.2409 48.6621 20.9399Z"
+    stroke="#262626"
+    stroke-width="3"
+  />
+</svg>

@navikt/community/navno/rollup.config.mjs

@@ -0,0 +1,65 @@
+import { babel } from "@rollup/plugin-babel";
+import commonjs from "@rollup/plugin-commonjs";
+import { nodeResolve } from "@rollup/plugin-node-resolve";
+import glob from "glob";
+import * as path from "path";
+import postcssDuplicate from "postcss-combine-duplicated-selectors";
+import postcssImport from "postcss-import";
+import { externals } from "rollup-plugin-node-externals";
+import postcss from "rollup-plugin-postcss";
+
+import { readFileSync } from "fs";
+
+const pkg = JSON.parse(
+  readFileSync(new URL("./package.json", import.meta.url).pathname)
+);
+const extensions = [".js", ".jsx", ".ts", ".tsx"];
+const targets = [
+  "last 3 chrome versions",
+  "last 3 firefox versions",
+  "last 3 opera versions",
+  "last 3 edge versions",
+  "last 3 safari versions",
+  "last 3 chromeandroid versions",
+  "last 1 firefoxandroid versions",
+  "ios >= 13.4",
+  "node 12.20",
+];
+
+export default {
+  input: glob.sync("src/**/index.ts"),
+
+  plugins: [
+    externals({ deps: true, devDeps: true, packagePath: "./package.json" }),
+    nodeResolve({ extensions }),
+    postcss({
+      extract: "index.css",
+      plugins: [postcssImport(), postcssDuplicate()],
+    }),
+    commonjs(),
+    babel({
+      rootMode: "upward",
+      extensions,
+      exclude: "node_modules/**",
+      babelHelpers: "bundled",
+      envName: "production",
+      targets,
+    }),
+  ],
+  output: [
+    {
+      format: "cjs",
+      dir: path.dirname(pkg.main),
+      preserveModules: true,
+      entryFileNames: "[name].js",
+      exports: "named",
+    },
+    {
+      format: "esm",
+      dir: path.dirname(pkg.module),
+      preserveModules: true,
+      sourcemap: true,
+      entryFileNames: "[name].js",
+    },
+  ],
+};

@navikt/community/navno/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./page-header";
+export * from "./pictograms";

@navikt/community/navno/src/page-header/PageHeader.tsx

@@ -0,0 +1,17 @@
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import "./page-header.css";
+
+export interface PageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export const PageHeader = forwardRef<HTMLDivElement, PageHeaderProps>(
+  ({ children, className, ...rest }, ref) => (
+    <div {...rest} ref={ref} className={cl(className, "navno-page-header")}>
+      {children}
+    </div>
+  )
+);
+
+export default PageHeader;

@navikt/community/navno/src/page-header/index.ts

@@ -1,2 +1 @@
 export { default as PageHeader } from "./PageHeader";
-export { PageHeaderProps } from "./PageHeader";

@navikt/community/navno/src/page-header/page-header.css

@@ -0,0 +1,3 @@
+.navno-page-header {
+  color: red;
+}

@navikt/community/navno/src/page-header/page-header.stories.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { PageHeader } from ".";
+
+export default {
+  title: "ds-navno/PageHeader",
+  component: PageHeader,
+  argTypes: {
+    variant: {
+      defaultValue: "var1",
+      control: {
+        type: "radio",
+        options: ["var1", "var1"],
+      },
+    },
+  },
+};
+
+export const Default = (props) => <PageHeader>{props.children}</PageHeader>;
+
+Default.args = {
+  children: "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
+};

@navikt/community/navno/src/pictograms/Utbetalingsdatoer.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { SVGProps, Ref, forwardRef } from "react";
+const SvgUtbetalingsdatoer = forwardRef(
+  (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => {
+    return (
+      <svg
+        width={96}
+        height={96}
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        focusable={false}
+        role="img"
+        ref={ref}
+        {...props}
+      >
+        <path
+          d="M47 62.687c0-9.616 9.333-26.445 14-26.445s14 16.829 14 26.445-6.268 16.828-14 16.828-14-6.206-14-16.828Z"
+          fill="#FFECCC"
+        />
+        <path
+          d="M60.264 37.743a1 1 0 0 0 1.472-1.353l-1.472 1.353ZM45.64 27h-10.64v2h10.64v-2Zm-35.64 25v44h2V52h-2Zm46.684-18.15 3.579 3.893 1.472-1.353-3.579-3.894-1.472 1.353ZM35 27c-13.807 0-25 11.193-25 25h2c0-12.703 10.297-23 23-23v-2Zm10.641 2a15 15 0 0 1 11.044 4.85l1.472-1.354A17 17 0 0 0 45.641 27v2Z"
+          fill="#FFECCC"
+        />
+        <path
+          d="M20.786 64.116c0 1.947-1.005 4.87-2.387 7.395-.679 1.24-1.4 2.294-2.05 3.015-.326.362-.6.602-.806.74a1.493 1.493 0 0 1-.114.071 1.493 1.493 0 0 1-.115-.07c-.207-.14-.48-.38-.806-.741-.65-.721-1.371-1.776-2.05-3.014-1.382-2.525-2.387-5.449-2.387-7.396 0-4.036 2.609-6.616 5.357-6.616 1.482 0 2.784.577 3.73 1.636.954 1.067 1.628 2.718 1.628 4.98ZM28 71.413c-1.903 0-4.775 1.013-7.264 2.415-1.219.687-2.257 1.419-2.967 2.076-.356.33-.593.609-.732.82a1.44 1.44 0 0 0-.084.145c.017.035.044.083.084.145.139.212.376.49.732.82.71.658 1.748 1.39 2.968 2.076 2.488 1.403 5.36 2.416 7.263 2.416 3.927 0 6.5-2.616 6.5-5.457 0-1.523-.578-2.854-1.622-3.815-1.048-.963-2.665-1.641-4.878-1.641Z"
+          stroke="#262626"
+          strokeWidth={3}
+        />
+        <path
+          d="M17.965 75.13a13.073 13.073 0 0 0-7.68 11.908v3.745"
+          stroke="#262626"
+          strokeWidth={3}
+        />
+        <path
+          d="M0 96c4.626-7.822 15.945-7.822 20.571 0M78.933 40.473C86.125 40.388 92 46.194 92 53.386V97M81.111 23.383c-2.735 0-6.746 1.408-10.163 3.298-1.684.932-3.134 1.932-4.14 2.847-.505.459-.86.863-1.079 1.192-.19.284-.222.431-.228.458.006.027.039.174.228.459.219.329.574.732 1.079 1.19 1.006.916 2.456 1.916 4.14 2.848 3.417 1.89 7.428 3.299 10.163 3.299 5.605 0 9.389-3.687 9.389-7.796 0-2.16-.837-4.073-2.372-5.46-1.541-1.39-3.884-2.335-7.017-2.335ZM46.889 38.974c2.735 0 6.746-1.408 10.163-3.299 1.684-.931 3.134-1.932 4.14-2.847.505-.459.86-.862 1.079-1.191.19-.285.222-.432.228-.459-.006-.027-.039-.174-.228-.458-.219-.33-.574-.733-1.079-1.191-1.006-.915-2.456-1.916-4.14-2.848-3.417-1.89-7.428-3.298-10.163-3.298-5.605 0-9.389 3.687-9.389 7.795 0 2.16.837 4.073 2.372 5.46 1.541 1.391 3.884 2.336 7.017 2.336Z"
+          stroke="#262626"
+          strokeWidth={3}
+        />
+        <path
+          d="M65.773 13.14c-1.366 2.356-2.147 6.517-2.211 10.408-.032 1.918.113 3.67.405 4.994.147.664.32 1.173.497 1.527.157.313.27.414.29.43.023.008.167.056.518.034.396-.024.925-.129 1.576-.334 1.298-.41 2.893-1.161 4.545-2.148 3.352-2.001 6.58-4.755 7.945-7.112 2.797-4.825 1.492-9.934-2.09-11.994-1.882-1.082-3.967-1.316-5.94-.685-1.98.633-3.97 2.18-5.535 4.88ZM79.338 42.656c-1.366-2.356-4.594-5.11-7.946-7.112-1.651-.986-3.247-1.737-4.545-2.147-.65-.206-1.18-.31-1.576-.335-.35-.021-.495.026-.519.034-.018.017-.132.117-.288.43-.177.354-.35.863-.497 1.527-.293 1.325-.438 3.076-.406 4.994.065 3.892.846 8.053 2.212 10.409 2.797 4.825 7.892 6.254 11.474 4.194 1.882-1.082 3.129-2.763 3.566-4.78.44-2.025.09-4.515-1.475-7.214Z"
+          stroke="#262626"
+          strokeWidth={3}
+        />
+        <path
+          d="M48.662 42.656c1.366-2.356 4.594-5.11 7.946-7.112 1.651-.986 3.247-1.737 4.545-2.147.65-.206 1.18-.31 1.576-.335.35-.021.495.026.519.034.018.017.132.117.288.43.178.354.35.863.497 1.527.293 1.325.438 3.076.406 4.994-.065 3.892-.846 8.053-2.212 10.409-2.797 4.825-7.892 6.254-11.474 4.194-1.882-1.082-3.129-2.763-3.566-4.78-.44-2.025-.09-4.515 1.475-7.214ZM48.662 20.94c1.366 2.356 4.594 5.11 7.946 7.112 1.651.986 3.247 1.737 4.545 2.147.65.206 1.18.31 1.576.335.35.021.495-.026.519-.034.018-.017.132-.117.288-.43.178-.355.35-.863.497-1.527.293-1.325.438-3.076.406-4.994-.065-3.892-.846-8.053-2.212-10.41-2.797-4.824-7.892-6.253-11.474-4.193-1.882 1.082-3.129 2.763-3.566 4.78-.44 2.025-.09 4.515 1.475 7.214Z"
+          stroke="#262626"
+          strokeWidth={3}
+        />
+      </svg>
+    );
+  }
+);
+export default SvgUtbetalingsdatoer;

@navikt/community/navno/src/pictograms/UtbetalingsdatoerSmall.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { SVGProps, Ref, forwardRef } from "react";
+const SvgUtbetalingsdatoerSmall = forwardRef(
+  (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => {
+    return (
+      <svg
+        width={64}
+        height={64}
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        focusable={false}
+        role="img"
+        ref={ref}
+        {...props}
+      >
+        <path
+          d="M31.333 41.791c0-6.41 6.222-17.63 9.334-17.63 3.11 0 9.333 11.22 9.333 17.63 0 6.41-4.179 11.219-9.334 11.219-5.154 0-9.333-4.138-9.333-11.219Z"
+          fill="#FFECCC"
+        />
+        <path
+          d="M39.825 25.484a1.143 1.143 0 1 0 1.683-1.546l-1.683 1.546Zm-9.398-7.96h-7.094v2.285h7.094v-2.285ZM6.19 34.667V64h2.286V34.667H6.19ZM37.44 22.888l2.386 2.596 1.683-1.546-2.386-2.596-1.683 1.547Zm-14.106-5.364c-9.468 0-17.143 7.675-17.143 17.143h2.286c0-8.206 6.652-14.858 14.857-14.858v-2.285Zm7.094 2.285a9.523 9.523 0 0 1 7.012 3.08l1.683-1.547a11.81 11.81 0 0 0-8.695-3.818v2.285Z"
+          fill="#FFECCC"
+        />
+        <path
+          d="M13.857 42.744c0 1.298-.67 3.247-1.591 4.93-.453.826-.934 1.53-1.366 2.01-.218.241-.4.401-.538.494-.031.02-.056.036-.076.047a1.054 1.054 0 0 1-.076-.047 3.115 3.115 0 0 1-.538-.494c-.433-.48-.914-1.184-1.366-2.01-.922-1.683-1.592-3.632-1.592-4.93 0-2.69 1.74-4.41 3.572-4.41.987 0 1.855.384 2.487 1.09.635.711 1.084 1.812 1.084 3.32ZM18.667 47.608c-1.27 0-3.184.676-4.843 1.61-.813.459-1.504.946-1.978 1.385-.237.22-.396.405-.488.547a.97.97 0 0 0-.056.096.97.97 0 0 0 .056.097c.092.14.25.326.488.546.474.439 1.165.926 1.978 1.385 1.66.934 3.574 1.61 4.843 1.61 2.618 0 4.333-1.744 4.333-3.638 0-1.015-.385-1.903-1.081-2.543-.699-.643-1.777-1.095-3.252-1.095Z"
+          stroke="#262626"
+          strokeWidth={2}
+        />
+        <path
+          d="M11.976 50.087a8.715 8.715 0 0 0-5.119 7.938v2.497"
+          stroke="#262626"
+          strokeWidth={2}
+        />
+        <path
+          d="M0 64c3.084-5.215 10.63-5.215 13.714 0M52.622 26.983a8.61 8.61 0 0 1 8.712 8.608v29.076M54.074 15.588c-1.823 0-4.497.939-6.775 2.2-1.123.62-2.09 1.288-2.76 1.897-.337.306-.574.575-.72.795-.126.19-.148.287-.151.305.003.018.025.116.151.306.146.22.383.488.72.794.67.61 1.637 1.277 2.76 1.898 2.278 1.26 4.952 2.2 6.775 2.2 3.737 0 6.26-2.459 6.26-5.198 0-1.44-.558-2.715-1.582-3.64-1.028-.927-2.59-1.557-4.678-1.557ZM31.26 25.982c1.823 0 4.497-.938 6.775-2.199 1.122-.62 2.09-1.288 2.76-1.898.336-.306.573-.575.72-.794.125-.19.147-.288.151-.306-.004-.018-.026-.116-.152-.305-.146-.22-.383-.489-.719-.794-.67-.61-1.638-1.277-2.76-1.899-2.278-1.26-4.952-2.199-6.776-2.199-3.736 0-6.259 2.458-6.259 5.197 0 1.44.558 2.716 1.582 3.64 1.027.928 2.59 1.557 4.677 1.557Z"
+          stroke="#262626"
+          strokeWidth={2}
+        />
+        <path
+          d="M43.85 8.76c-.912 1.57-1.432 4.345-1.475 6.939-.022 1.279.075 2.446.27 3.33.098.442.213.781.331 1.017.105.209.18.276.193.287.016.005.112.037.346.023.264-.017.616-.086 1.05-.224.866-.273 1.93-.773 3.03-1.431 2.235-1.334 4.387-3.17 5.297-4.741 1.865-3.217.995-6.623-1.393-7.996-1.255-.722-2.645-.878-3.96-.457-1.32.422-2.647 1.453-3.69 3.253ZM52.892 28.438c-.91-1.572-3.062-3.408-5.297-4.742-1.101-.658-2.165-1.158-3.03-1.431-.434-.137-.787-.207-1.05-.224-.234-.014-.33.018-.346.023-.013.011-.089.078-.193.287-.118.236-.234.575-.331 1.018-.195.883-.292 2.05-.27 3.33.042 2.593.563 5.367 1.474 6.938 1.864 3.217 5.261 4.17 7.65 2.796 1.254-.72 2.085-1.842 2.377-3.187.292-1.35.06-3.01-.984-4.809Z"
+          stroke="#262626"
+          strokeWidth={2}
+        />
+        <path
+          d="M32.442 28.438c.91-1.572 3.062-3.408 5.297-4.742 1.1-.658 2.164-1.158 3.03-1.431.434-.137.786-.207 1.05-.224.234-.014.33.018.346.023.013.011.088.078.193.287.118.236.233.575.331 1.018.195.883.292 2.05.27 3.33-.043 2.593-.563 5.367-1.474 6.938-1.865 3.217-5.262 4.17-7.65 2.796-1.254-.72-2.085-1.842-2.377-3.187-.293-1.35-.06-3.01.984-4.809ZM32.442 13.96c.91 1.57 3.062 3.407 5.297 4.741 1.1.658 2.164 1.158 3.03 1.432.434.137.786.207 1.05.223.234.014.33-.018.346-.023.013-.01.088-.078.193-.287.118-.236.233-.575.331-1.017.195-.884.292-2.051.27-3.33-.043-2.594-.563-5.368-1.474-6.94-1.865-3.216-5.262-4.168-7.65-2.795-1.254.721-2.085 1.842-2.377 3.187-.293 1.35-.06 3.01.984 4.809Z"
+          stroke="#262626"
+          strokeWidth={2}
+        />
+      </svg>
+    );
+  }
+);
+export default SvgUtbetalingsdatoerSmall;

@navikt/community/navno/src/pictograms/index.ts

@@ -0,0 +1,2 @@
+export { default as PictogramUtbetalingsdatoerSmall } from "./UtbetalingsdatoerSmall";
+export { default as PictogramUtbetalingsdatoer } from "./Utbetalingsdatoer";

@navikt/community/navno/template.js

@@ -0,0 +1,13 @@
+const template = (variables, { tpl }) => {
+  return tpl`
+${variables.imports};
+${variables.interfaces};
+
+const ${variables.componentName} = forwardRef((${variables.props}) => {
+  return ${variables.jsx};
+});
+export default ${variables.componentName}
+`;
+};
+
+module.exports = template;