Version Packages (#1955)

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

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/aksel-icons
 
+## 2.9.5
+
+## 2.9.4
+
 ## 2.9.3
 
 ### Patch Changes

@navikt/aksel-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-icons",
-  "version": "2.9.3",
+  "version": "2.9.5",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/ikoner",
   "repository": {

@navikt/aksel/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @navikt/aksel
 
+## 2.9.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@2.9.5
+
+## 2.9.4
+
+### Patch Changes
+
+- [#1952](https://github.com/navikt/aksel/pull/1952) [`27b2b4a11`](https://github.com/navikt/aksel/commit/27b2b4a11caf5ca05c96c686c453653d8a900e5f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :truck: Flyttet Codemods from `@navikt/ds-codemods` -> `@navikt/aksel`.
+
+  - `@navikt/ds-codemods` vil bli deprecated ettehvert.
+
+- Updated dependencies []:
+  - @navikt/ds-css@2.9.4
+
 ## 2.9.3
 
 ### Patch Changes

@navikt/aksel/README.md

@@ -1,6 +1,6 @@
 # Aksel command line interface
 
-CLI tool for managing CSS-imports and more when consuming Aksel-packages.
+CLI tool for managing CSS-imports and Codemods when consuming Aksel-packages.
 
 [Documentation](https://aksel.nav.no/preview/grunnleggende/kode/kommandolinje)
 
@@ -10,6 +10,162 @@ npx @navikt/aksel
 
 commands:
 css-imports: Generate css-imports for all components from Aksel
+codemod: Codemods for version-migrations related to Aksel
+```
+
+## Codemods
+
+Codemods are code-transformations that patches breaking changes in your project. This helps when migrating without spending time doing it manually.
+
+```bash
+To get started:
+npx @navikt/aksel codemod --help
+```
+
+### v1 -> v2
+
+[Documentation](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112)
+
+v2-css: Patches changed css-variables
+v2-js: Patches changed js-variables
+v2-sass: Patches changed sass-variables
+v2-less: Patches changed less-variables
+
+#### css-tokens (--navds format)
+
+`npx @navikt/aksel codemod v2-css src`
+
+When having redefined a token, you will need to manually find and replace these instances after the codemod-run. A global search for `--v2-migration__` will show all found instances where you had redefined a token.
+
+```diff
+.example{
+- color: var(--navds-global-color-gray-900);
++ color: var(--a-gray-900);
+
+- --navds-semantic-color-text: red;
++ --v2-migration__navds-semantic-color-text: red;
+}
+```
+
+#### sass/scss-tokens ($navds format)
+
+`npx @navikt/aksel codemod v2-sass src`
+
+```diff
+.example{
+- color: $navds-global-color-gray-900;
++ color: $a-gray-900;
+}
+```
+
+#### less-tokens (@navds format)
+
+`npx @navikt/aksel codemod v2-less src`
+
+```diff
+.example{
+- color: @navds-global-color-gray-900;
++ color: @a-gray-900;
+}
+```
+
+#### js-tokens
+
+`npx @navikt/aksel codemod v2-js src`
+
+```diff
+
+- import { NavdsGlobalColorGray900 } from "@navikt/ds-tokens";
++ import { AGray900 } from "@navikt/ds-tokens";
+
+const styled = styled.p`
+- color: ${NavdsGlobalColorGray900};
++ color: ${AGray900};
+`
+```
+
+### beta -> v1
+
+[Documentation](https://aksel.nav.no/grunnleggende/kode/migrering#h50d54a5af8c1)
+
+v1-preset: Runs all codemods for beta -> v1
+v1-pagination: Fixes breaking API-changes for <Pagination /> component
+v1-tabs: Fixes breaking API-changes for <Tabs /> component
+v1-chat: Fixes breaking API-changes for <SpeechBubble /> (now <Chat/>) component
+
+#### preset
+
+Combines all avaliable codemods for migrating from beta -> v1. This transform should only be ran once.
+
+Includes these transforms
+
+- v1-tabs
+- v1-chat
+- v1-pagination
+
+#### tabs
+
+`npx @navikt/aksel codemod v1-tabs src`
+
+```diff
+<Tabs
+  defaultValue="logg"
+  onChange={(x) => console.log(x)}
+-  loop
++  iconPosition="left"
+>
+  <Tabs.List
+-    loop
+  >
+    <Tabs.Tab
+      value="logg"
+      label="logg"
+-     iconPosition="left"
+    />
+  </Tabs.List>
+  <Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
+</Tabs>
+```
+
+#### chat
+
+`npx @navikt/aksel codemod v1-chat src`
+
+```diff
+-<SpeechBubble
++<Chat
+-  illustration={<Illustration />}
+-  topText="Ola Normann 01.01.21 14:00"
+-  illustrationBgColor="blue"
++  avatar={<Illustration />}
++  name="Ola Normann 01.01.21 14:00"
++  avatarBgColor="blue"
+  backgroundColor="red"
+>
+- <SpeechBubble.Bubble>
++ <Chat.Bubble>
+    Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+- </SpeechBubble.Bubble>
++ </Chat.Bubble>
+-</SpeechBubble>
++</Chat>
+```
+
+#### pagination
+
+`npx @navikt/aksel codemod v1-pagination src`
+
+This codemod can 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

@navikt/aksel/jest.config.js

@@ -0,0 +1,8 @@
+const config = {
+  transform: { "^.+\\.js?$": "ts-jest", "^.+\\.ts?$": "ts-jest" },
+  testMatch: ["**/tests/*.test.ts"],
+  verbose: true,
+  rootDir: ".",
+};
+
+module.exports = config;

@navikt/aksel/package.json

@@ -1,23 +1,25 @@
 {
   "name": "@navikt/aksel",
-  "version": "2.9.3",
-  "description": "Aksel command line interface. Handles css-imports, codemods (planned) and more",
+  "version": "2.9.5",
+  "description": "Aksel command line interface. Handles css-imports, codemods and more",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
   "keywords": [
-    "react",
-    "command-line",
+    "Commandline",
     "CLI",
-    "css",
-    "CDN"
+    "CDN",
+    "Codemods"
   ],
   "files": [
-    "dist"
+    "dist",
+    "!dist/**/tests"
   ],
   "scripts": {
     "clean": "rimraf dist",
     "build": "yarn clean && tsc -p tsconfig.json",
-    "dev": "tsc --watch -p tsconfig.json"
+    "dev": "tsc --watch -p tsconfig.json",
+    "test": "yarn build && jest",
+    "test:watch": "jest --watch"
   },
   "bin": "./dist/index.js",
   "repository": {
@@ -25,22 +27,28 @@
     "url": "git+https://github.com/navikt/aksel.git",
     "directory": "@navikt/aksel"
   },
-  "type": "module",
   "homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
   "dependencies": {
-    "@navikt/ds-css": "2.9.3",
+    "@navikt/ds-css": "2.9.5",
     "axios": "1.3.6",
     "chalk": "4.1.0",
-    "clipboardy": "^3.0.0",
+    "clipboardy": "^2.3.0",
+    "commander": "10.0.1",
     "enquirer": "^2.3.6",
     "fast-glob": "3.2.11",
     "figlet": "1.6.0",
+    "is-git-clean": "1.1.0",
+    "jscodeshift": "0.13.1",
+    "jscodeshift-add-imports": "1.0.10",
     "lodash": "4.17.21",
     "react-scanner": "^1.1.0"
   },
   "devDependencies": {
     "@types/inquirer": "^9.0.3",
+    "@types/jest": "^29.0.0",
+    "jest": "^29.0.0",
     "rimraf": "3.0.2",
+    "ts-jest": "^29.0.0",
     "typescript": "^4.8.0"
   },
   "sideEffects": false,

@navikt/aksel/src/codemod/index.ts

@@ -0,0 +1,46 @@
+import { Command } from "commander";
+import figlet from "figlet";
+import chalk from "chalk";
+import { getMigrationString } from "./migrations.js";
+import { validateGit, validateMigration } from "./validation.js";
+import { runCodeshift } from "./run-codeshift.js";
+
+const program = new Command();
+
+export function codemodCommand() {
+  program.name(`${chalk.blueBright(`npx @navikt/aksel`)}`);
+
+  program
+    .command("codemod")
+    .addHelpText("beforeAll", figlet.textSync("Codemods"))
+    .addHelpText(
+      "afterAll",
+      chalk.gray(`\nAvailable migrations:\n${getMigrationString()}`)
+    )
+    .description("Migrations for Aksel components and more")
+    .argument("<migration>", "Migration name")
+
+    .option("-e, --ext [extension]", "default: js,ts,jsx,tsx,css,scss,less")
+    .option(
+      "-g, --glob [glob]",
+      "Globbing pattern, overrides --ext! Run with 'noglob' if using zsh-terminal. "
+    )
+    .option("-d, --dry-run", "Dry run, no changes will be made")
+    .option("-p, --print", "Print transformed files")
+    .option(
+      "-f, --force",
+      "Forcibly run migrations without checking git-changes"
+    )
+    .addHelpText(
+      "after",
+      `\nExample:
+  $ npx @navikt/aksel --dry-run v2-css`
+    )
+    .action((str, options) => {
+      validateMigration(str, program);
+      validateGit(options, program);
+      runCodeshift(str, options, program);
+    });
+
+  program.parse();
+}

@navikt/aksel/src/codemod/migrations.ts

@@ -0,0 +1,77 @@
+import chalk from "chalk";
+
+export const migrations: {
+  [key: string]: { description: string; value: string; path: string }[];
+} = {
+  "1.0.0": [
+    {
+      description: "Runs all codemods for beta -> v1 migration",
+      value: "v1-preset",
+      path: "v1.0.0/preset/preset",
+    },
+    {
+      description: "Fixes breaking API-changes for <Pagination /> component",
+      value: "v1-pagination",
+      path: "v1.0.0/pagination/pagination",
+    },
+    {
+      description: "Fixes breaking API-changes for <Tabs /> component",
+      value: "v1-tabs",
+      path: "v1.0.0/tabs/tabs",
+    },
+    {
+      description:
+        "Fixes breaking API-changes for <SpeechBubble /> (now <Chat/>) component",
+      value: "v1-chat",
+      path: "v1.0.0/chat/chat",
+    },
+  ],
+  "2.0.0": [
+    {
+      description: "Patches changed css-variables",
+      value: "v2-css",
+      path: "v2.0.0/update-css-tokens/update-css-tokens",
+    },
+    {
+      description: "Patches changed js-variables",
+      value: "v2-js",
+      path: "v2.0.0/update-js-tokens/update-js-tokens",
+    },
+    {
+      description: "Patches changed sass-variables",
+      value: "v2-sass",
+      path: "v2.0.0/update-sass-tokens/update-sass-tokens",
+    },
+    {
+      description: "Patches changed less-variables",
+      value: "v2-less",
+      path: "v2.0.0/update-less-tokens/update-less-tokens",
+    },
+  ],
+};
+
+export function getMigrationPath(str: string) {
+  return Object.values(migrations)
+    .reduce((acc, val) => [...val, ...acc], [])
+    .find((x) => x.value === str)?.path;
+}
+
+export function getMigrationNames() {
+  return Object.values(migrations).reduce(
+    (acc, val) => [...val.map((x) => x.value), ...acc],
+    [] as string[]
+  );
+}
+
+export function getMigrationString() {
+  let str = "";
+
+  Object.entries(migrations).forEach(([version, migrations]) => {
+    str += `\n${chalk.underline(version)}\n`;
+    migrations.forEach((migration) => {
+      str += `${chalk.blue(migration.value)}: ${migration.description}\n`;
+    });
+  });
+
+  return str;
+}

@navikt/aksel/src/codemod/run-codeshift.ts

@@ -0,0 +1,64 @@
+import { Command } from "commander";
+import fg from "fast-glob";
+import * as jscodeshift from "jscodeshift/src/Runner";
+import path from "path";
+import { getMigrationPath } from "./migrations";
+import chalk from "chalk";
+
+const ignoreNodeModules = [
+  "**/node_modules/**",
+  "**/dist/**",
+  "**/build/**",
+  "**/lib/**",
+  "**/.next/**",
+];
+
+export async function runCodeshift(
+  input: string,
+  options: any,
+  program: Command
+) {
+  const codemodPath = path.join(
+    __dirname,
+    `./transforms/${getMigrationPath(input)}.js`
+  );
+
+  const filepaths = fg.sync([options.glob ?? getDefaultGlob(options?.ext)], {
+    cwd: process.cwd(),
+    ignore: ignoreNodeModules,
+  });
+
+  console.log("\nRunning migration:", chalk.green("input"));
+
+  options?.glob && console.log(`Using glob: ${chalk.green(options.glob)}\n`);
+
+  try {
+    await jscodeshift.run(codemodPath, filepaths, {
+      babel: true,
+      ignorePattern: ignoreNodeModules,
+      extensions: "tsx,ts,jsx,js",
+      parser: "tsx",
+      verbose: 2,
+      runInBand: true,
+      silent: false,
+      stdin: false,
+      dry: options?.dryRun,
+      force: options?.force,
+      print: options?.print,
+    });
+  } catch (error) {
+    program.error(chalk.red("Error:", error.message));
+  }
+}
+
+function getDefaultGlob(ext: string): string {
+  const defaultExt = "js,ts,jsx,tsx,css,scss,less";
+  return `**/*.{${cleanExtensions(ext ?? defaultExt).join(",")}}`;
+}
+
+function cleanExtensions(ext: string): string[] {
+  return ext
+    .split(",")
+    .map((e) => e.trim())
+    .map((e) => e.replace(".", ""));
+}

@navikt/aksel/src/codemod/tests/migrations.test.ts

@@ -0,0 +1,19 @@
+import { getMigrationNames, getMigrationPath } from "../migrations";
+import path from "path";
+import fs from "fs";
+
+describe("migrations", () => {
+  const values = getMigrationNames();
+  const paths = values.map((x) => getMigrationPath(x));
+
+  paths.forEach((x) => {
+    const checkPath = path.join(
+      process.cwd(),
+      "dist/codemod",
+      `transforms/${x}.js`
+    );
+    test(`Check transform-path: ${checkPath}`, () => {
+      expect(fs.existsSync(checkPath)).toBeTruthy();
+    });
+  });
+});

@navikt/aksel/src/codemod/tokens-map.mjs

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

@navikt/aksel/src/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/aksel/src/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/aksel/src/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/aksel/src/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/aksel/src/codemod/transforms/v1.0.0/chat/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/aksel/src/codemod/transforms/v1.0.0/chat/tests/chat.test.ts

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

@navikt/aksel/src/codemod/transforms/v1.0.0/chat/tests/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/aksel/src/codemod/transforms/v1.0.0/chat/tests/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/aksel/src/codemod/transforms/v1.0.0/chat/tests/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/aksel/src/codemod/transforms/v1.0.0/chat/tests/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/aksel/src/codemod/transforms/v1.0.0/chat/tests/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/aksel/src/codemod/transforms/v1.0.0/chat/tests/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/aksel/src/codemod/transforms/v1.0.0/chat/tests/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/aksel/src/codemod/transforms/v1.0.0/chat/tests/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/aksel/src/codemod/transforms/v1.0.0/pagination/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/aksel/src/codemod/transforms/v1.0.0/pagination/tests/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/aksel/src/codemod/transforms/v1.0.0/pagination/tests/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/aksel/src/codemod/transforms/v1.0.0/pagination/tests/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/aksel/src/codemod/transforms/v1.0.0/pagination/tests/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/aksel/src/codemod/transforms/v1.0.0/pagination/tests/pagination.test.ts

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

@navikt/aksel/src/codemod/transforms/v1.0.0/pagination/tests/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/aksel/src/codemod/transforms/v1.0.0/pagination/tests/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/aksel/src/codemod/transforms/v1.0.0/preset/preset.ts

@@ -0,0 +1,15 @@
+import transformTabs from "../tabs/tabs";
+import transformChat from "../chat/chat";
+import transformPagination from "../pagination/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/aksel/src/codemod/transforms/v1.0.0/tabs/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/aksel/src/codemod/transforms/v1.0.0/tabs/tests/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/aksel/src/codemod/transforms/v1.0.0/tabs/tests/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/aksel/src/codemod/transforms/v1.0.0/tabs/tests/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/aksel/src/codemod/transforms/v1.0.0/tabs/tests/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/aksel/src/codemod/transforms/v1.0.0/tabs/tests/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/aksel/src/codemod/transforms/v1.0.0/tabs/tests/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/aksel/src/codemod/transforms/v1.0.0/tabs/tests/tabs.test.ts

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

@navikt/aksel/src/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/aksel/src/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/aksel/src/codemod/transforms/v2.0.0/update-css-tokens/tests/complete.output.css

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

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

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

@navikt/aksel/src/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/aksel/src/codemod/transforms/v2.0.0/update-css-tokens/update-css-tokens.ts

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

@navikt/aksel/src/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/aksel/src/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/aksel/src/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/aksel/src/codemod/transforms/v2.0.0/update-js-tokens/update-js-tokens.ts

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

@navikt/aksel/src/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/aksel/src/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/aksel/src/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/aksel/src/codemod/transforms/v2.0.0/update-less-tokens/update-less-tokens.ts

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

@navikt/aksel/src/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/aksel/src/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/aksel/src/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/aksel/src/codemod/transforms/v2.0.0/update-sass-tokens/update-sass-tokens.ts

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

@navikt/aksel/src/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/aksel/src/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/aksel/src/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/aksel/src/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/aksel/src/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/aksel/src/codemod/validation.ts

@@ -0,0 +1,58 @@
+import chalk from "chalk";
+import { Command } from "commander";
+import isGitClean from "is-git-clean";
+import {
+  getMigrationString,
+  getMigrationNames,
+  getMigrationPath,
+} from "./migrations.js";
+
+export function validateMigration(str: string, program: Command) {
+  if (!getMigrationNames().includes(str)) {
+    program.error(
+      chalk.red(
+        `Migration <${str}> not found!\n${chalk.gray(
+          `\nAvailable migrations:\n${getMigrationString()}`
+        )}`
+      )
+    );
+  }
+  const path = getMigrationPath(str);
+  if (!path) {
+    program.error(
+      chalk.red(
+        `Code for migration <${str}> not found!\n${chalk.gray(
+          `\nContact creator (Aksel) to get it fixed!\n`
+        )}`
+      )
+    );
+  }
+}
+
+export function validateGit(options: any, program: Command) {
+  if (options.dryRun) {
+    return;
+  }
+  if (options.force) {
+    console.log(chalk.yellow("Forcing migration without git check"));
+    return;
+  }
+
+  let clean = false;
+
+  try {
+    clean = isGitClean.sync(process.cwd());
+  } catch (err: any) {
+    if (err && err.stderr && err.stderr.indexOf("Not a git repository") >= 0) {
+      clean = true;
+    }
+  }
+
+  if (!clean) {
+    program.error(
+      `${chalk.yellow(
+        "\nBefore we continue, please stash or commit your git changes."
+      )}${"\nYou can use the --force flag to override this safety check."}`
+    );
+  }
+}

@navikt/aksel/src/css-imports/generate-output.ts

@@ -7,8 +7,8 @@ import {
   componentDir,
   rootDir,
   globalDir,
-} from "@navikt/ds-css/config/_mappings.js";
-import { inquiry } from "./inquiry.js";
+} from "@navikt/ds-css/config/_mappings";
+import { inquiry } from "./inquiry";
 import clipboard from "clipboardy";
 import lodash from "lodash";
 import chalk from "chalk";

@navikt/aksel/src/css-imports/get-version.ts

@@ -7,7 +7,7 @@ export async function getAllVersions() {
     );
     return Object.keys(npmPackageData.data["versions"]);
   } catch (e) {
-    console.log(e);
+    console.error(e);
     return [];
   }
 }

@navikt/aksel/src/css-imports/index.ts

@@ -1,17 +1,13 @@
-import { StyleMappings } from "@navikt/ds-css/config/_mappings.js";
-import { generateImportOutput } from "./generate-output.js";
-import { AnswersT, ComponentPrefix } from "./config.js";
+import { StyleMappings } from "@navikt/ds-css/config/_mappings";
+import { generateImportOutput } from "./generate-output";
+import { AnswersT, ComponentPrefix } from "./config";
 
-import { inquiry } from "./inquiry.js";
+import { inquiry } from "./inquiry";
 import { exec } from "child_process";
-import { fileURLToPath } from "url";
-import { dirname } from "path";
-import { getAllVersions } from "./get-version.js";
-import chalk from "chalk";
-import { getDirectories } from "./get-directories.js";
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
+import chalk from "chalk";
+import { getDirectories } from "./get-directories";
+import { getAllVersions } from "./get-version";
 
 export async function cssImportsCommand() {
   let answers: AnswersT = {

@navikt/aksel/src/css-imports/inquiry.ts

@@ -1,5 +1,5 @@
 import Enquirer from "enquirer";
-import { AnswersT } from "./config.js";
+import { AnswersT } from "./config";
 import chalk from "chalk";
 
 export async function inquiry(answers: AnswersT, questions: any[]) {

@navikt/aksel/src/help.ts

@@ -14,5 +14,11 @@ export function helpCommand() {
    ✔︎ Helps with CSS imports for all Aksel components
    ✔︎ Supports Static and CDN-imports
    ✔︎ Handles cascading, tailwind and @layer rules
+
+   - ${chalk.cyan(
+     `npx @navikt/aksel ${chalk.green("codemod")} ${chalk.gray("<migration>")}`
+   )}
+   ✔︎ Code-transformations for breaking changes when updating Aksel
+   ✔︎ Run with ${chalk.cyan(`${chalk.green("--help")}`)} to get started!
 `);
 }

@navikt/aksel/src/index.ts

@@ -1,7 +1,9 @@
 #!/usr/bin/env node
 import chalk from "chalk";
-import { helpCommand } from "./help.js";
-import { cssImportsCommand } from "./css-imports/index.js";
+import { helpCommand } from "./help";
+import { cssImportsCommand } from "./css-imports/index";
+import { codemodCommand } from "./codemod/index";
+import fs from "fs";
 
 run();
 
@@ -12,6 +14,15 @@ async function run() {
   } else if (process.argv[2] === "css-imports") {
     await cssImportsCommand();
     return;
+  } else if (process.argv[2] === "codemod") {
+    codemodCommand();
+    return;
+  } else if (process.argv[2] === "-v" || process.argv[2] === "--version") {
+    const pkg = JSON.parse(
+      fs.readFileSync("./package.json").toString()
+    ).version;
+    console.log(pkg);
+    return;
   } else {
     console.log(
       chalk.red(

@navikt/aksel/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "module": "Node16",
+    "module": "CommonJS",
     "sourceMap": false,
     "esModuleInterop": true,
     "target": "es2015",
@@ -8,9 +8,10 @@
     "declaration": false,
     "types": ["node", "jest"],
     "outDir": "dist",
-    "rootDir": "./",
-    "resolveJsonModule": true
+    "rootDir": "./src",
+    "resolveJsonModule": true,
+    "allowJs": true
   },
-  "include": ["**/*.ts"],
-  "exclude": ["node_modules", "dist", "jest.config.js", "__tests__"]
+  "include": ["src/**/*.ts"],
+  "exclude": ["node_modules", "dist", "jest.config.js", "**/tests/**"]
 }

@navikt/codemod/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @navikt/ds-codemod
 
+## 2.9.5
+
+## 2.9.4
+
+### Patch Changes
+
+- [#1952](https://github.com/navikt/aksel/pull/1952) [`27b2b4a11`](https://github.com/navikt/aksel/commit/27b2b4a11caf5ca05c96c686c453653d8a900e5f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :truck: Flyttet Codemods from `@navikt/ds-codemods` -> `@navikt/aksel`.
+
+  - `@navikt/ds-codemods` vil bli deprecated ettehvert.
+
 ## 2.9.3
 
 ## 2.9.2

@navikt/codemod/README.md

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

@navikt/codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-codemod",
-  "version": "2.9.3",
+  "version": "2.9.5",
   "description": "Aksel codemods for NAVs designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",

@navikt/community/navno/package.json

@@ -40,8 +40,8 @@
     "build-pict": "svgr --silent --index-template index-template.js --out-dir src/pictograms pictograms"
   },
   "dependencies": {
-    "@navikt/ds-icons": "^2.9.3",
-    "@navikt/ds-react": "^2.9.3",
+    "@navikt/ds-icons": "^2.9.5",
+    "@navikt/ds-react": "^2.9.5",
     "clsx": "^1.1.1"
   },
   "devDependencies": {

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/ds-css
 
+## 2.9.5
+
+## 2.9.4
+
 ## 2.9.3
 
 ## 2.9.2

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "2.9.3",
+  "version": "2.9.5",
   "description": "CSS for NAV Designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -27,7 +27,7 @@
     "css:get-version": "node config/get-version.js"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^2.9.3",
+    "@navikt/ds-tokens": "^2.9.5",
     "cssnano": "6.0.0",
     "fast-glob": "3.2.11",
     "lodash": "4.17.21",

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @navikt/ds-react
 
+## 2.9.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@2.9.5
+  - @navikt/ds-icons@2.9.5
+
+## 2.9.4
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@2.9.4
+  - @navikt/ds-icons@2.9.4
+
 ## 2.9.3
 
 ### Patch Changes

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "2.9.3",
+  "version": "2.9.5",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -38,8 +38,8 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.17.0",
-    "@navikt/aksel-icons": "^2.9.3",
-    "@navikt/ds-icons": "^2.9.3",
+    "@navikt/aksel-icons": "^2.9.5",
+    "@navikt/ds-icons": "^2.9.5",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

@navikt/core/tailwind/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/ds-tailwind
 
+## 2.9.5
+
+## 2.9.4
+
 ## 2.9.3
 
 ## 2.9.2

@navikt/core/tailwind/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tailwind",
-  "version": "2.9.3",
+  "version": "2.9.5",
   "description": "Tailwind config based on @navikt/ds-tokens",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -22,7 +22,7 @@
     "directory": "@navikt/core/tailwind"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^2.9.3",
+    "@navikt/ds-tokens": "^2.9.5",
     "@types/jest": "^29.0.0",
     "color": "4.2.3",
     "jest": "^29.0.0",

@navikt/core/tokens/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/ds-tokens
 
+## 2.9.5
+
+## 2.9.4
+
 ## 2.9.3
 
 ## 2.9.2

@navikt/core/tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tokens",
-  "version": "2.9.3",
+  "version": "2.9.5",
   "description": "Design-tokens for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [

@navikt/icons/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/ds-icons
 
+## 2.9.5
+
+## 2.9.4
+
 ## 2.9.3
 
 ## 2.9.2

@navikt/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-icons",
-  "version": "2.9.3",
+  "version": "2.9.5",
   "description": "Aksel icons for NAV",
   "author": "Aksel | NAV designsystem team",
   "repository": {

@navikt/internal/css/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/ds-css-internal
 
+## 2.9.5
+
+## 2.9.4
+
 ## 2.9.3
 
 ## 2.9.2

@navikt/internal/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css-internal",
-  "version": "2.9.3",
+  "version": "2.9.5",
   "description": "CSS for NAV internal Designsystem-components",
   "author": "Aksel | NAV designsystem team",
   "keywords": [

@navikt/internal/react/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @navikt/ds-react-internal
 
+## 2.9.5
+
+### Patch Changes
+
+- [#1953](https://github.com/navikt/aksel/pull/1953) [`7019898c0`](https://github.com/navikt/aksel/commit/7019898c0948cf18e788800c5b2d1d547958cde9) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Timeline håndterte ikke startDate/endDate-endringer riktig
+
+  - All bruk av `<button>` i Timeline har nå `type="button"`
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.9.5
+  - @navikt/ds-icons@2.9.5
+
+## 2.9.4
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.9.4
+  - @navikt/ds-icons@2.9.4
+
 ## 2.9.3
 
 ### Patch Changes

@navikt/internal/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react-internal",
-  "version": "2.9.3",
+  "version": "2.9.5",
   "description": "Aksel react components for internal UIs in NAV",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -36,8 +36,8 @@
     "watch": "tsc --watch -p tsconfig.esm.json"
   },
   "dependencies": {
-    "@navikt/ds-icons": "^2.9.3",
-    "@navikt/ds-react": "^2.9.3",
+    "@navikt/ds-icons": "^2.9.5",
+    "@navikt/ds-react": "^2.9.5",
     "clsx": "^1.1.1",
     "copy-to-clipboard": "^3.3.1"
   },

@navikt/internal/react/src/timeline/Pin.tsx

@@ -44,6 +44,7 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
             onClick={() => setOpen(!open)}
             aria-label={`pin:${format(date, "dd.MM.yyyy")}`}
             aria-expanded={open}
+            type="button"
           />
         </div>
         {children && (

@navikt/internal/react/src/timeline/Timeline.tsx

@@ -19,11 +19,13 @@ export interface TimelineProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Decides startingpoint in timeline.
    * Defaults to earliest date among the timeline periods.
+   * @note Using this disables use of ZoomButtons. You will need to control zooming yourself.
    */
   startDate?: Date;
   /**
    * Decides end-date for timeline.
    * Defaults to the latest date among the timeline periods.
+   * @note Using this disables use of ZoomButtons. You will need to control zooming yourself.
    */
   endDate?: Date;
   /**
@@ -97,12 +99,20 @@ export const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
     const initialEndDate = endOfDay(useLatestDate({ endDate, rows }));
     const processedRows = useTimelineRows(
       rowsRaw,
-      start,
-      endInclusive,
+      startDate ?? start,
+      endDate ?? endInclusive,
       direction
     );
 
     const handleZoomChange = (zoomStart: Date) => {
+      if (startDate || endDate) {
+        if (process.env.NODE_ENV !== "production") {
+          console.warn(
+            "Zooming is not supported when startDate or endDate is set"
+          );
+        }
+        return;
+      }
       if (direction === "left") {
         if (isSameDay(zoomStart, start)) {
           setStart(initialStartDate);
@@ -153,8 +163,8 @@ export const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
     return (
       <TimelineContext.Provider
         value={{
-          startDate: start,
-          endDate: endInclusive,
+          startDate: startDate ?? start,
+          endDate: endDate ?? endInclusive,
           direction: direction,
           setStart: (d) => handleZoomChange(d),
           setEndInclusive: (d) => setEndInclusive(d),

@navikt/internal/react/src/timeline/period/ClickablePeriod.tsx

@@ -45,6 +45,7 @@ const ClickablePeriod = React.memo(
       <>
         <button
           {...restProps}
+          type="button"
           ref={(r) => {
             firstFocus && addFocusable(r, index);
             mergedRef(r);

@navikt/internal/react/src/timeline/zoom/ZoomButton.tsx

@@ -56,6 +56,7 @@ export const ZoomButton: ZoomButtonType = forwardRef(
     return (
       <Detail as="li">
         <button
+          type="button"
           aria-label={
             !currentZoom
               ? `Zoom tidslinjen ${format(

aksel.nav.no/package.json

@@ -15,15 +15,15 @@
     "website"
   ],
   "dependencies": {
-    "@navikt/aksel-icons": "^2.9.3",
-    "@navikt/ds-codemod": "^2.9.3",
-    "@navikt/ds-css": "^2.9.3",
-    "@navikt/ds-css-internal": "^2.9.3",
-    "@navikt/ds-icons": "^2.9.3",
-    "@navikt/ds-react": "^2.9.3",
-    "@navikt/ds-react-internal": "^2.9.3",
-    "@navikt/ds-tailwind": "^2.9.3",
-    "@navikt/ds-tokens": "^2.9.3"
+    "@navikt/aksel-icons": "^2.9.5",
+    "@navikt/ds-codemod": "^2.9.5",
+    "@navikt/ds-css": "^2.9.5",
+    "@navikt/ds-css-internal": "^2.9.5",
+    "@navikt/ds-icons": "^2.9.5",
+    "@navikt/ds-react": "^2.9.5",
+    "@navikt/ds-react-internal": "^2.9.5",
+    "@navikt/ds-tailwind": "^2.9.5",
+    "@navikt/ds-tokens": "^2.9.5"
   },
   "devDependencies": {
     "prettier-plugin-tailwindcss": "^0.2.3"

aksel.nav.no/website/pages/god-praksis/[slug].tsx

@@ -18,7 +18,7 @@ import { contributorsSingle, destructureBlocks } from "@/sanity/queries";
 
 type PageProps = NextPageT<{
   tema: Omit<AkselTemaT, "ansvarlig"> & {
-    ansvarlig: { title: string; roller: string[] };
+    ansvarlig?: { title: string; roller: string[] };
   };
 }>;
 
@@ -169,7 +169,7 @@ const Page = ({ tema: page }: PageProps["props"]) => {
                   )}
                   aria-hidden={!hasAnsvarlig}
                 >
-                  <Detail as="div" size="small" className="mb-2" uppercase>
+                  <Detail as="div" className="mb-2" uppercase>
                     Ansvarlig for tema
                   </Detail>
                   <div className="grid">