🎨 defaultMonth/Year prop

🐛 Datepicker funket ikke i shadow-dom

📝 Changeset@

.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": ["nextjs-demo", "shadow-dom", "aksel.nav.no"],
+
+  "___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
 
@@ -125,4 +125,26 @@ _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
+test-urls.json
+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

.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 -> Horisontal `<Stepper />`

.storybook/layout.css

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

.storybook/main.js

@@ -11,12 +11,12 @@ module.exports = {
     };
     return config;
   },
+  staticDirs: ["./public"],
   devServer: {
     stats: "errors-only",
   },
   stories: () => [...getStories(), "./*.stories.mdx"],
   addons: [
-    "@storybook/addon-docs",
     "@storybook/addon-a11y",
     {
       name: "@storybook/addon-storysource",

.storybook/manager.js

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

.storybook/preview.js

@@ -7,10 +7,47 @@ export const parameters = {
   options: {
     storySort: {
       method: "",
-      order: ["ds-icons", "ds-react", ["Default"]],
+      order: ["Intro", "ds-icons", "ds-react", ["form"], ["Default"]],
       locales: "",
     },
   },
   viewMode: "docs",
   layout: "centered",
+  backgrounds: {
+    default: "Canvas",
+    values: [
+      {
+        name: "Canvas",
+        value: "#ffffff",
+      },
+      {
+        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/public/logo.svg

@@ -0,0 +1,20 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="44"
+  height="44"
+  fill="none"
+  viewBox="0 0 44 44"
+>
+  <path
+    fill="rgba(153, 196, 221, 1)"
+    fill-rule="evenodd"
+    d="M9.07 3.03A10.33 10.33 0 0 1 16.37 0h17.3C39.37 0 44 4.62 44 10.33v17.3c0 2.73-1.09 5.36-3.03 7.3l-6.04 6.04a10.33 10.33 0 0 1-7.3 3.03h-17.3C4.63 44 0 39.38 0 33.67v-17.3c0-2.73 1.09-5.36 3.03-7.3l6.04-6.04Z"
+    clip-rule="evenodd"
+  ></path>
+  <path
+    fill="rgba(0, 36, 58, 1)"
+    fill-rule="evenodd"
+    d="M12.96 6.92a4.82 4.82 0 0 1 3.42-1.42h17.29a4.83 4.83 0 0 1 4.83 4.83v17.29a4.8 4.8 0 0 1-1.42 3.42l-.37.37-6.65 6.65a1.5 1.5 0 1 1-2.12-2.12l6.64-6.64v-.01c.72-.72.72-1.87 0-2.59L17.3 9.42a1.83 1.83 0 0 0-2.6 0l-6.64 6.64a1.5 1.5 0 1 1-2.12-2.12l7.02-7.02Zm22.54 3.41v13.05L20.62 8.5h13.05c1 0 1.83.82 1.83 1.83ZM20.06 26.06a1.5 1.5 0 0 0-2.12-2.12l-11 11a1.5 1.5 0 1 0 2.12 2.12l11-11Z"
+    clip-rule="evenodd"
+  ></path>
+</svg>

.storybook/theme.js

@@ -1,6 +1,22 @@
 import { create } from "@storybook/theming";
+/* import logoUrl from "./public/logo.svg"; */
 
 export default create({
+  /* brandImage: process.env.NODE_ENV === "production" ? logoUrl : "/logo.svg", */
   base: "light",
-  brandTitle: "NAV Designsystem",
+  // Typography
+  fontBase: '"Source Sans Pro", sans-serif',
+  fontCode: "monospace",
+
+  // Text colors
+  textColor: "#262626",
+  textInverseColor: "rgba(255,255,255,0.9)",
+
+  colorSecondary: "rgba(0, 36, 58, 1)",
+  colorPrimary: "rgba(153, 196, 221, 1)",
+
+  barTextColor: "rgba(0, 91, 130, 1)",
+  barSelectedColor: "rgba(0, 36, 58, 1)",
+
+  brandTitle: "Aksel",
 });

.storybook/velkommen.stories.mdx

@@ -0,0 +1,39 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+
+<Meta title="Intro/Velkommen" />
+
+# Aksel, NAVs designsystem
+
+- [Dokumentasjon](https://aksel.nav.no/designsystem)
+- [Komponenter](https://aksel.nav.no/designsystem/side/oversikt-komponenter)
+
+## Kom i gang
+
+### Kjernepakke
+
+```bash
+yarn add @navikt/ds-react @navikt/ds-css
+```
+
+### 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>;
+```

.yarnrc.yml

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

@navikt/codemod/.gitignore

@@ -0,0 +1,9 @@
+*.d.ts
+*.js
+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,35 @@
+# @navikt/ds-codemod
+
+## 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,106 @@
+# NAV designsystem Codemods
+
+Collection of Codemods for easier migration between breaking changes.
+
+Highly 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)
+
+## Usage
+
+Codemod transformations runs code-transformations programmatically in your project. This helps when migrating lots of 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 (example `import * as DS from "@navikt/ds-react"` or `from "@navikt/ds-react/cjs"`) will not work as expected.
+
+```javascript
+npx @navikt/ds-codemod <transform> <path>
+```
+
+transform - name of transform, see available transforms below.
+path - files or directory to transform
+--dry Do a dry-run, no code will be edited
+--print Prints the changed output for comparison
+
+## Beta (0.19.x) -> v1.0.0
+
+`npx @navikt/ds-codemod v1.0.0/preset src`
+
+### preset
+
+Combines all avaliable codemods for migrating from beta -> v1.0.0. This transform should only be ran once.
+
+Includes these transforms
+
+- v1.0.0/tabs
+- v1.0.0/chat
+- v1.0.0/pagination
+
+### tabs
+
+`npx @navikt/ds-codemod v1.0.0/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.0.0/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.0.0/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)

@navikt/codemod/bin/cli.ts

@@ -0,0 +1,203 @@
+/**
+ * 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 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";
+
+export const jscodeshiftExecutable = require.resolve(".bin/jscodeshift");
+export const transformerDirectory = path.join(__dirname, "../", "transforms");
+
+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;
+    }
+  }
+
+  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/preset: Runs all codemods for beta to v1 migration",
+    value: "v1.0.0/preset",
+  },
+  {
+    name: "v1.0.0/pagination: Fixes breaking API-changes from <Pagination /> component",
+    value: "v1.0.0/pagination",
+  },
+  {
+    name: "v1.0.0/tabs: Fixes breaking API-changes from <Tabs /> component",
+    value: "v1.0.0/tabs",
+  },
+  {
+    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,
+      });
+    });
+}

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

@@ -0,0 +1,13 @@
+#!/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]
+
+require("./cli").run();

@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

@@ -0,0 +1,8 @@
+const customJestConfig = {
+  testMatch: ["**/__tests__/**/*.js", "**/tests/*.test.js"],
+  verbose: true,
+  rootDir: "./transforms",
+};
+
+// createJestConfig is exported in this way to ensure that next/jest can load the Next.js config which is async
+module.exports = customJestConfig;

@navikt/codemod/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@navikt/ds-codemod",
+  "version": "1.5.7",
+  "description": "NAV designsystem codemods",
+  "author": "NAV Designsystem team",
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "codemod",
+    "jscodeshift"
+  ],
+  "files": [
+    "transforms/**/*.js",
+    "bin/*.js",
+    "lib/**/*.js",
+    "lib/cra-to-next/gitignore"
+  ],
+  "scripts": {
+    "build": "yarn clean && tsc -p tsconfig.json",
+    "dev": "yarn clean && tsc --watch -p tsconfig.json",
+    "test": "yarn build && jest",
+    "test:watch": "jest --watch",
+    "clean": "node clean.mjs"
+  },
+  "bin": "./bin/ds-codemod.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/navikt/Designsystemet.git",
+    "directory": "@navikt/codemod"
+  },
+  "homepage": "https://github.com/navikt/Designsystemet/tree/master/@navikt/codemod",
+  "dependencies": {
+    "chalk": "4.1.0",
+    "cheerio": "1.0.0-rc.9",
+    "execa": "4.0.3",
+    "globby": "11.0.1",
+    "inquirer": "7.3.3",
+    "is-git-clean": "1.1.0",
+    "jest": "^29.0.0",
+    "jscodeshift": "0.13.1",
+    "jscodeshift-add-imports": "1.0.10",
+    "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",
+    "del": "7.0.0",
+    "typescript": "^4.8.0"
+  },
+  "sideEffects": false,
+  "engines": {
+    "node": ">=12.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

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

@@ -0,0 +1,18 @@
+import renameProps from "../../utils/rename-props";
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  const printOptions = options.printOptions;
+
+  return renameProps({
+    root,
+    componentName: options.component,
+    props: { [options.from]: options.to },
+  }).toSource(printOptions);
+}

@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/rename-prop/tests/rename.input.js

@@ -0,0 +1,8 @@
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return (
+    <SpeechBubble illustration={<Illustration />}>
+      <div />
+    </SpeechBubble>
+  );
+};

@navikt/codemod/transforms/rename-prop/tests/rename.output.js

@@ -0,0 +1,8 @@
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return (
+    <SpeechBubble avatar={<Illustration />}>
+      <div />
+    </SpeechBubble>
+  );
+};

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

@@ -0,0 +1,26 @@
+import { SpeechBubble, Button } from "@navikt/ds-react";
+
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return (
+    <SpeechBubble
+      illustration={<Illustration />}
+      topText="Ola Normann 01.01.21 14:00"
+      backgroundColor="red"
+      illustrationBgColor="blue"
+      {...testProps}
+    >
+      <SpeechBubble.Bubble {...testProps}>
+        Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+      </SpeechBubble.Bubble>
+      <SpeechBubble.Bubble>
+        Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
+        do.
+      </SpeechBubble.Bubble>
+      <SpeechBubble.Bubble>
+        Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+        labore nisi ut.
+      </SpeechBubble.Bubble>
+    </SpeechBubble>
+  );
+};

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

@@ -0,0 +1,26 @@
+import { Chat, Button } from "@navikt/ds-react";
+
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return (
+    <Chat
+      avatar={<Illustration />}
+      name="Ola Normann 01.01.21 14:00"
+      backgroundColor="red"
+      avatarBgColor="blue"
+      {...testProps}
+    >
+      <Chat.Bubble {...testProps}>
+        Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+      </Chat.Bubble>
+      <Chat.Bubble>
+        Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
+        do.
+      </Chat.Bubble>
+      <Chat.Bubble>
+        Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+        labore nisi ut.
+      </Chat.Bubble>
+    </Chat>
+  );
+};

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

@@ -0,0 +1,25 @@
+import { Chat, Button } from "@navikt/ds-react";
+
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return (
+    <Chat
+      avatar={<Illustration />}
+      name="Ola Normann 01.01.21 14:00"
+      backgroundColor="red"
+      avatarBgColor="blue"
+    >
+      <Chat.Bubble>
+        Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+      </Chat.Bubble>
+      <Chat.Bubble>
+        Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
+        do.
+      </Chat.Bubble>
+      <Chat.Bubble>
+        Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+        labore nisi ut.
+      </Chat.Bubble>
+    </Chat>
+  );
+};

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

@@ -0,0 +1,25 @@
+import { Chat, Button } from "@navikt/ds-react";
+
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return (
+    <Chat
+      avatar={<Illustration />}
+      name="Ola Normann 01.01.21 14:00"
+      backgroundColor="red"
+      avatarBgColor="blue"
+    >
+      <Chat.Bubble>
+        Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+      </Chat.Bubble>
+      <Chat.Bubble>
+        Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
+        do.
+      </Chat.Bubble>
+      <Chat.Bubble>
+        Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+        labore nisi ut.
+      </Chat.Bubble>
+    </Chat>
+  );
+};

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

@@ -0,0 +1,44 @@
+import { SpeechBubble, Button } from "@navikt/ds-react";
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return (
+    <div>
+      <SpeechBubble
+        illustration={<Illustration />}
+        topText="Ola Normann 01.01.21 14:00"
+        backgroundColor="red"
+        illustrationBgColor="blue"
+      >
+        <SpeechBubble.Bubble>
+          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+        </SpeechBubble.Bubble>
+        <SpeechBubble.Bubble>
+          Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
+          do.
+        </SpeechBubble.Bubble>
+        <SpeechBubble.Bubble>
+          Adipisicing laborum est eu laborum est sit in commodo enim sint
+          laboris labore nisi ut.
+        </SpeechBubble.Bubble>
+      </SpeechBubble>
+      <SpeechBubble
+        illustration={<Illustration />}
+        topText="Ola Normann 01.01.21 14:00"
+        backgroundColor="red"
+        illustrationBgColor="blue"
+      >
+        <SpeechBubble.Bubble>
+          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+        </SpeechBubble.Bubble>
+        <SpeechBubble.Bubble>
+          Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
+          do.
+        </SpeechBubble.Bubble>
+        <SpeechBubble.Bubble>
+          Adipisicing laborum est eu laborum est sit in commodo enim sint
+          laboris labore nisi ut.
+        </SpeechBubble.Bubble>
+      </SpeechBubble>
+    </div>
+  );
+};

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

@@ -0,0 +1,44 @@
+import { Chat, Button } from "@navikt/ds-react";
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return (
+    <div>
+      <Chat
+        avatar={<Illustration />}
+        name="Ola Normann 01.01.21 14:00"
+        backgroundColor="red"
+        avatarBgColor="blue"
+      >
+        <Chat.Bubble>
+          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+        </Chat.Bubble>
+        <Chat.Bubble>
+          Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
+          do.
+        </Chat.Bubble>
+        <Chat.Bubble>
+          Adipisicing laborum est eu laborum est sit in commodo enim sint
+          laboris labore nisi ut.
+        </Chat.Bubble>
+      </Chat>
+      <Chat
+        avatar={<Illustration />}
+        name="Ola Normann 01.01.21 14:00"
+        backgroundColor="red"
+        avatarBgColor="blue"
+      >
+        <Chat.Bubble>
+          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+        </Chat.Bubble>
+        <Chat.Bubble>
+          Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
+          do.
+        </Chat.Bubble>
+        <Chat.Bubble>
+          Adipisicing laborum est eu laborum est sit in commodo enim sint
+          laboris labore nisi ut.
+        </Chat.Bubble>
+      </Chat>
+    </div>
+  );
+};

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

@@ -0,0 +1,44 @@
+import { SpeechBubble as DsBubble, Button } from "@navikt/ds-react";
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return (
+    <div>
+      <DsBubble
+        illustration={<Illustration />}
+        topText="Ola Normann 01.01.21 14:00"
+        backgroundColor="red"
+        illustrationBgColor="blue"
+      >
+        <DsBubble.Bubble>
+          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+        </DsBubble.Bubble>
+        <DsBubble.Bubble>
+          Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
+          do.
+        </DsBubble.Bubble>
+        <DsBubble.Bubble>
+          Adipisicing laborum est eu laborum est sit in commodo enim sint
+          laboris labore nisi ut.
+        </DsBubble.Bubble>
+      </DsBubble>
+      <DsBubble
+        illustration={<Illustration />}
+        topText="Ola Normann 01.01.21 14:00"
+        backgroundColor="red"
+        illustrationBgColor="blue"
+      >
+        <DsBubble.Bubble>
+          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+        </DsBubble.Bubble>
+        <DsBubble.Bubble>
+          Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
+          do.
+        </DsBubble.Bubble>
+        <DsBubble.Bubble>
+          Adipisicing laborum est eu laborum est sit in commodo enim sint
+          laboris labore nisi ut.
+        </DsBubble.Bubble>
+      </DsBubble>
+    </div>
+  );
+};

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

@@ -0,0 +1,44 @@
+import { Chat as DsBubble, Button } from "@navikt/ds-react";
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return (
+    <div>
+      <DsBubble
+        avatar={<Illustration />}
+        name="Ola Normann 01.01.21 14:00"
+        backgroundColor="red"
+        avatarBgColor="blue"
+      >
+        <DsBubble.Bubble>
+          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+        </DsBubble.Bubble>
+        <DsBubble.Bubble>
+          Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
+          do.
+        </DsBubble.Bubble>
+        <DsBubble.Bubble>
+          Adipisicing laborum est eu laborum est sit in commodo enim sint
+          laboris labore nisi ut.
+        </DsBubble.Bubble>
+      </DsBubble>
+      <DsBubble
+        avatar={<Illustration />}
+        name="Ola Normann 01.01.21 14:00"
+        backgroundColor="red"
+        avatarBgColor="blue"
+      >
+        <DsBubble.Bubble>
+          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+        </DsBubble.Bubble>
+        <DsBubble.Bubble>
+          Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
+          do.
+        </DsBubble.Bubble>
+        <DsBubble.Bubble>
+          Adipisicing laborum est eu laborum est sit in commodo enim sint
+          laboris labore nisi ut.
+        </DsBubble.Bubble>
+      </DsBubble>
+    </div>
+  );
+};

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

@@ -0,0 +1,18 @@
+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 onPageChange={setPage} />
+      <Pagination size="small" onPageChange={setPage} />
+    </div>
+  );
+};

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

@@ -0,0 +1,18 @@
+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.input.js

@@ -0,0 +1,11 @@
+import { Pagination as DsPagination, Button } from "@navikt/ds-react";
+
+export const Demo = () => {
+  return (
+    <div>
+      <DsPagination onPageChange={setPage} />
+      <DsPagination size="medium" onPageChange={setPage} />
+      <DsPagination size="small" onPageChange={setPage} />
+    </div>
+  );
+};

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

@@ -0,0 +1,11 @@
+import { Pagination as DsPagination, Button } from "@navikt/ds-react";
+
+export const Demo = () => {
+  return (
+    <div>
+      <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.input.js

@@ -0,0 +1,11 @@
+import { Pagination, Button } from "@navikt/ds-react";
+
+export const Demo = () => {
+  return (
+    <div>
+      <Pagination onPageChange={setPage} />
+      <Pagination size="medium" onPageChange={setPage} />
+      <Pagination size="small" onPageChange={setPage} />
+    </div>
+  );
+};

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

@@ -0,0 +1,11 @@
+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" />
+      <Pagination size="xsmall" onPageChange={setPage} data-version="v1" />
+    </div>
+  );
+};

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

@@ -0,0 +1,25 @@
+import { Tabs } from "@navikt/ds-react";
+
+const TabComp = () => {
+  return (
+    /* prettier-ignore */
+    <div>
+      <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>
+        <Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
+      </Tabs>
+      <Tabs defaultValue="logg" onChange={(x) => console.log(x)}>
+        <Tabs.List>
+          <Tabs.Tab value="logg" label="logg" />
+          <Tabs.Tab value="logg2" label="logg2medlangtekst" />
+        </Tabs.List>
+        <Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
+        <Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
+      </Tabs>
+    </div>
+  );
+};

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

@@ -0,0 +1,30 @@
+import { Tabs } from "@navikt/ds-react";
+
+const TabComp = () => {
+  return (
+    /* prettier-ignore */
+    <div>
+      <Tabs
+        defaultValue="logg"
+        onChange={(x) => console.log(x)}
+        {...testProps}
+        loop={false}
+        iconPosition={props.left}>
+        <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>
+        <Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
+      </Tabs>
+      <Tabs defaultValue="logg" onChange={(x) => console.log(x)}>
+        <Tabs.List>
+          <Tabs.Tab value="logg" label="logg" />
+          <Tabs.Tab value="logg2" label="logg2medlangtekst" />
+        </Tabs.List>
+        <Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
+        <Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
+      </Tabs>
+    </div>
+  );
+};

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

@@ -0,0 +1,19 @@
+import { Tabs } from "@navikt/ds-react";
+
+const TabComp = () => {
+  return (
+    /* prettier-ignore */
+    <Tabs
+      defaultValue="logg"
+      onChange={(x) => console.log(x)}
+      loop
+      iconPosition="left">
+      <Tabs.List>
+        <Tabs.Tab value="logg" label="logg" />
+        <Tabs.Tab value="logg2" label="logg2medlangtekst" />
+      </Tabs.List>
+      <Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
+      <Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
+    </Tabs>
+  );
+};

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

@@ -0,0 +1,19 @@
+import { Tabs } from "@navikt/ds-react";
+
+const TabComp = () => {
+  return (
+    /* prettier-ignore */
+    <Tabs
+      defaultValue="logg"
+      onChange={(x) => console.log(x)}
+      loop
+      iconPosition="left">
+      <Tabs.List>
+        <Tabs.Tab value="logg" label="logg" />
+        <Tabs.Tab value="logg2" label="logg2medlangtekst" />
+      </Tabs.List>
+      <Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
+      <Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
+    </Tabs>
+  );
+};

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

@@ -0,0 +1,15 @@
+import { Tabs } from "@navikt/ds-react";
+
+const TabComp = () => {
+  return (
+    /* prettier-ignore */
+    <Tabs defaultValue="logg" onChange={(x) => console.log(x)}>
+      <Tabs.List loop>
+        <Tabs.Tab value="logg" iconPosition="left" label="logg" />
+        <Tabs.Tab value="logg2" iconPosition="top" label="logg2medlangtekst" />
+      </Tabs.List>
+      <Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
+      <Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
+    </Tabs>
+  );
+};

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

@@ -0,0 +1,19 @@
+import { Tabs } from "@navikt/ds-react";
+
+const TabComp = () => {
+  return (
+    /* prettier-ignore */
+    <Tabs
+      defaultValue="logg"
+      onChange={(x) => console.log(x)}
+      loop
+      iconPosition="left">
+      <Tabs.List>
+        <Tabs.Tab value="logg" label="logg" />
+        <Tabs.Tab value="logg2" label="logg2medlangtekst" />
+      </Tabs.List>
+      <Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
+      <Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
+    </Tabs>
+  );
+};

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

@@ -0,0 +1,10 @@
+export {};
+
+jest.autoMockOff();
+const defineTest = require("jscodeshift/dist/testUtils").defineTest;
+
+const tests = ["props", "complete", "idempotent", "renamed"];
+
+for (const test of tests) {
+  defineTest(__dirname, "chat", null, `chat/${test}`);
+}

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

@@ -0,0 +1,10 @@
+export {};
+
+jest.autoMockOff();
+const defineTest = require("jscodeshift/dist/testUtils").defineTest;
+
+const tests = ["size", "import", "idempotent"];
+
+for (const test of tests) {
+  defineTest(__dirname, "pagination", null, `pagination/${test}`);
+}

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

@@ -0,0 +1,10 @@
+export {};
+
+jest.autoMockOff();
+const defineTest = require("jscodeshift/dist/testUtils").defineTest;
+
+const tests = ["props", "idempotent", "complete"];
+
+for (const test of tests) {
+  defineTest(__dirname, "tabs", null, `tabs/${test}`);
+}

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

@@ -0,0 +1,68 @@
+import renameProps from "../../utils/rename-props";
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  let localName = "SpeechBubble";
+
+  const root = j(file.source);
+
+  /* Finds and replaces import from SpeechBubble -> Chat */
+  root
+    .find(j.ImportDeclaration)
+    .filter((path) => path.node.source.value === "@navikt/ds-react")
+    .forEach((imp) => {
+      imp.value.specifiers.forEach((x) => {
+        if (x.imported.name === "SpeechBubble") {
+          if (x.local.name !== x.imported.name) {
+            localName = x.local.name;
+            x.imported.name = "Chat";
+          } else {
+            x.imported.name = "Chat";
+            x.local.name = "Chat";
+          }
+        }
+      });
+    });
+
+  if (j(file.source).findJSXElements(localName)) {
+    renameProps({
+      root,
+      componentName: localName,
+      props: {
+        illustrationBgColor: "avatarBgColor",
+        illustration: "avatar",
+        topText: "name",
+      },
+    });
+
+    /* Find and replace name of all <SpeechBubble />*/
+    const compRoot = root.find(j.JSXElement, {
+      openingElement: { name: { name: localName } },
+    });
+
+    compRoot.forEach((x) => {
+      if (localName !== "SpeechBubble") return;
+      x.node.openingElement.name.name = "Chat";
+      x.node.closingElement.name.name = "Chat";
+    });
+
+    /* Need to handle dot-notations differently */
+    const child = root.find(j.JSXElement);
+
+    child.forEach((x) => {
+      if (
+        x.value.openingElement.name.type === "JSXMemberExpression" &&
+        x.value.openingElement.name.object.name === "SpeechBubble"
+      ) {
+        x.value.openingElement.name.object.name = "Chat";
+        x.value.closingElement.name.object.name = "Chat";
+      }
+    });
+  }
+
+  return root.toSource(options.printOptions);
+}

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

@@ -0,0 +1,83 @@
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  let localName = "Pagination";
+
+  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;
+    const variant = attributes.find(
+      (node) => node.type === "JSXAttribute" && node.name.name === "size"
+    );
+
+    if (!variant) {
+      attributes.unshift(
+        j.jsxAttribute(j.jsxIdentifier("size"), j.literal("small"))
+      );
+      addMigrationTag(node);
+    }
+  }
+
+  /* Finds locally used name for Pagination */
+  root
+    .find(j.ImportDeclaration)
+    .filter((path) => path.node.source.value === "@navikt/ds-react")
+    .forEach((imp) => {
+      imp.value.specifiers.forEach((x) => {
+        if (
+          x.imported.name === "Pagination" &&
+          x.local.name !== x.imported.name
+        ) {
+          localName = x.local.name;
+        }
+      });
+    });
+
+  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);
+    });
+  }
+
+  return root.toSource(options.printOptions);
+}

@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

@@ -0,0 +1,83 @@
+import renameProps from "../../utils/rename-props";
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  let localName = "Tabs";
+  let iconPositionProp = null;
+
+  const root = j(file.source);
+
+  /* Finds used name for Tabs component */
+  root
+    .find(j.ImportDeclaration)
+    .filter((path) => path.node.source.value === "@navikt/ds-react")
+    .forEach((imp) => {
+      imp.value.specifiers.forEach((x) => {
+        if (x.imported.name === "Tabs" && x.local.name !== x.imported.name) {
+          localName = x.local.name;
+        }
+      });
+    });
+
+  if (j(file.source).findJSXElements(localName)) {
+    renameProps({
+      root,
+      componentName: `${localName}.List`,
+      props: {
+        loop: "null",
+      },
+    });
+
+    root.findJSXElements(`${localName}`).forEach((parent) => {
+      parent.value.children.forEach((el) => {
+        const openingEl = el.openingElement;
+        if (openingEl?.name && openingEl.name.type === "JSXMemberExpression") {
+          if (
+            openingEl.name.object.name === localName &&
+            openingEl.name.property.name === "List"
+          ) {
+            /* Move loop-prop */
+            el.openingElement.attributes.forEach((x, index) => {
+              if (x.name?.name === "loop" && x.type === "JSXAttribute") {
+                parent.value.openingElement.attributes.push(x);
+                delete el.openingElement.attributes[index];
+              }
+            });
+
+            /* Find and move iconPosition-prop to <Tabs/> */
+            el.children.forEach((tab) => {
+              const tabEl = tab.openingElement;
+              if (tabEl?.name && tabEl.name.type === "JSXMemberExpression") {
+                if (
+                  tabEl.name.object.name === localName &&
+                  tabEl.name.property.name === "Tab"
+                ) {
+                  tabEl?.attributes.forEach((x, index) => {
+                    if (
+                      x.name?.name === "iconPosition" &&
+                      x.type === "JSXAttribute"
+                    ) {
+                      if (!iconPositionProp) {
+                        iconPositionProp = x;
+                      }
+                      delete tabEl.attributes[index];
+                    }
+                  });
+                }
+              }
+            });
+          }
+        }
+      });
+      iconPositionProp &&
+        parent.value.openingElement.attributes.push(iconPositionProp);
+      iconPositionProp = null;
+    });
+  }
+
+  return root.toSource(options.printOptions);
+}

@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);
+
+  --a-red-100: var(--a-green-100);
+  --a-blue-100: red;
+}

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

@@ -0,0 +1,16 @@
+const StyledDiv = styled`
+--a-red-100: var(--a-green-100);
+--a-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,34 @@
+// TODO: Hent utenfra
+export const tokens = [
+  ["--navds-global-color-red-100", "--a-red-100"],
+  ["--navds-global-color-green-100", "--a-green-100"],
+  ["--navds-global-color-blue-100", "--a-blue-100"],
+  ["--navds-global-color-blue-200", "--a-blue-200"],
+  ["--navds-global-color-blue-400", "--a-blue-400"],
+  ["--navds-global-color-green-100", "--a-green-100"],
+  ["--navds-global-color-green-500", "--a-green-500"],
+  ["--navds-semantic-color-link", "--a-text-action"],
+  ["--navds-global-color-gray-100", "--a-gray-100"],
+  ["--navds-global-color-gray-400", "--a-gray-400"],
+  ["--navds-global-color-gray-600", "--a-gray-600"],
+  [
+    "--navds-semantic-color-interaction-primary-hover-subtle",
+    "--a-surface-action-subtle",
+  ],
+  ["--navds-semantic-color-canvas-background-inverted", "--a-surface-inverted"],
+];
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  let src = file.source;
+
+  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 "../update-css-tokens/update-css-tokens";
+
+/**
+ * @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 "../update-css-tokens/update-css-tokens";
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file) {
+  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 "../update-css-tokens/update-css-tokens";
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file) {
+  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/transforms/v2.0.0/update-tailwind-tokens/tests/complete.input.css

@@ -0,0 +1,3 @@
+.test {
+  @apply bg-canvas-background-inverted text-interaction-primary-hover-subtle/20;
+}

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

@@ -0,0 +1,10 @@
+export const demo = () => (
+  <div
+    className={cl(
+      "bg-white text-text shadow-small ring-gray-900/10 hover:shadow-medium active:text-link",
+      className
+    )}
+  >
+    <div className="bg-canvas-background-inverted text-interaction-primary-hover-subtle"></div>
+  </div>
+);

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

@@ -0,0 +1,3 @@
+.test {
+  @apply bg-surface-inverted text-surface-action-subtle/20;
+}

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

@@ -0,0 +1,10 @@
+export const demo = () => (
+  <div
+    className={cl(
+      "bg-white text-text shadow-small ring-gray-900/10 hover:shadow-medium active:text-text-action",
+      className
+    )}
+  >
+    <div className="bg-surface-inverted text-surface-action-subtle"></div>
+  </div>
+);

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

@@ -0,0 +1,18 @@
+import { check } from "../../../../utils/check";
+
+const migration = "update-tailwind-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-tailwind-tokens/update-tailwind-tokens.ts

@@ -0,0 +1,34 @@
+import { tokens } from "../update-css-tokens/update-css-tokens";
+
+/* Cherry-picks object keys we want */
+const semanticTokens = () =>
+  tokens
+    .filter((val) => val[0].startsWith("--navds-semantic-color"))
+    .map((val) => {
+      return [
+        val[0].replace("--navds-semantic-color-", ""),
+        val[1].replace("--a-", ""),
+      ];
+    });
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  let src = file.source;
+  const colors = semanticTokens();
+  const duplicateText: string[][] = [];
+
+  colors.forEach(
+    (x) =>
+      x[0].startsWith("text-") && duplicateText.push(["text-" + x[0], x[1]])
+  );
+
+  [...duplicateText, ...colors].forEach((tok) => {
+    const rgx = new RegExp("(" + tok[0] + ")", "gm");
+    src = src.replace(rgx, tok[1]);
+  });
+
+  return src;
+}

@navikt/codemod/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "sourceMap": false,
+    "esModuleInterop": true,
+    "target": "es2015",
+    "downlevelIteration": true,
+    "preserveWatchOutput": true,
+    "declaration": false,
+    "types": ["@types/jscodeshift", "node", "jest"]
+  },
+  "include": ["**/*.ts"],
+  "exclude": ["node_modules", "dist", "jest.config.js"]
+}

@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/rename-props.ts

@@ -0,0 +1,12 @@
+export default function renameProps({ root, componentName, props }) {
+  return root.findJSXElements(componentName).forEach((path) => {
+    path.node.openingElement.attributes.forEach((node) => {
+      if (
+        node.type === "JSXAttribute" &&
+        Object.keys(props).includes(node.name.name)
+      ) {
+        node.name.name = props[node.name.name];
+      }
+    });
+  });
+}

@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/core/css/CHANGELOG.md

@@ -0,0 +1,65 @@
+# @navikt/ds-css
+
+## 1.5.7
+
+## 1.5.6
+
+## 1.5.5
+
+## 1.5.4
+
+### Patch Changes
+
+- [#1709](https://github.com/navikt/Designsystemet/pull/1709) [`77302a30b`](https://github.com/navikt/Designsystemet/commit/77302a30b8eef8dc00b2d2e9c904a3f57da81a11) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Oppdatert ikoner
+
+## 1.5.3
+
+### Patch Changes
+
+- Byttet om på alt-farge rekkefølge
+
+## 1.5.2
+
+### Patch Changes
+
+- :memo: Rename FilterChips to ToggleChips
+
+## 1.5.1
+
+### Patch Changes
+
+- Flex-wrap chips.css
+
+## 1.5.0
+
+### Minor Changes
+
+- [#1684](https://github.com/navikt/Designsystemet/pull/1684) [`e19bf67b3`](https://github.com/navikt/Designsystemet/commit/e19bf67b337dea39989c68b5e9c2591cf0d5b40f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Oppdaterte tag-varianter
+
+- [#1668](https://github.com/navikt/Designsystemet/pull/1668) [`97c5f60e9`](https://github.com/navikt/Designsystemet/commit/97c5f60e9111da7e08f55c8d0aa29581f0a9b1ca) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Chips komponent :sparkles:
+
+## 1.4.4
+
+## 1.4.3
+
+### Patch Changes
+
+- :sparkles: Validering og inputFormat i Date-komponenter
+
+## 1.4.2
+
+## 1.4.1
+
+### Patch Changes
+
+- [`3c08651df`](https://github.com/navikt/Designsystemet/commit/3c08651df28c3e19dd8c8a7a1d0032200bec473d) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Date-komponenter følger språkrådets dato-formatering for måneder.
+
+## 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