Lerna versionbump [ci skip]

- @navikt/ds-codemod@1.0.1
 - @navikt/ds-css@0.18.17

@navikt/codemod/.gitignore

@@ -0,0 +1,6 @@
+*.d.ts
+*.js
+bin/*.js
+*.js.map
+!transforms/**/__testfixtures__/**/*.js
+!jest.config.js

@navikt/codemod/bin/cli.ts

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

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

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

@navikt/codemod/jest.config.js

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

@navikt/codemod/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@navikt/ds-codemod",
+  "version": "1.0.1",
+  "private": true,
+  "description": "NAV designsystem codemods",
+  "author": "NAV Designsystem team",
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "codemod",
+    "jscodeshift"
+  ],
+  "files": [
+    "transforms/*.js",
+    "bin/*.js",
+    "lib/**/*.js",
+    "lib/cra-to-next/gitignore"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "dev": "tsc --watch -p tsconfig.json",
+    "test": "jest",
+    "test:watch": "jest --watch"
+  },
+  "bin": "./bin/ds-codemod.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/navikt/Designsystemet.git",
+    "directory": "@navikt/codemod"
+  },
+  "homepage": "https://github.com/navikt/Designsystemet/tree/master/@navikt/codemod",
+  "dependencies": {
+    "chalk": "4.1.0",
+    "cheerio": "1.0.0-rc.9",
+    "execa": "4.0.3",
+    "globby": "11.0.1",
+    "inquirer": "7.3.3",
+    "is-git-clean": "1.1.0",
+    "jest": "^27.5.0",
+    "jscodeshift": "0.13.1",
+    "jscodeshift-add-imports": "1.0.10",
+    "meow": "7.0.1"
+  },
+  "devDependencies": {
+    "@types/jscodeshift": "0.11.5",
+    "@types/react": "^18.0.0",
+    "typescript": "^4.7.2"
+  },
+  "sideEffects": false,
+  "engines": {
+    "node": ">=12.0.0"
+  }
+}

@navikt/codemod/transforms/__testfixtures__/rename-prop/rename.input.js

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

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

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

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

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

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

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

@navikt/codemod/transforms/utils/rename-props.ts

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

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

@@ -0,0 +1,25 @@
+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"
+    >
+      <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>
+  );
+};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,74 @@
+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";
+      }
+    });
+    file.path.includes("styled") &&
+      console.log(
+        root.find(j.JSXElement).forEach((x) => {
+          console.log(x.value.openingElement.name);
+        })
+      );
+  }
+
+  return root.toSource(options.printOptions);
+}

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

@@ -0,0 +1,86 @@
+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 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 === "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",
+        /* illustrationBgColor: "avatarBgColor",
+        illustration: "avatar",
+        topText: "name", */
+      },
+    });
+
+    root.findJSXElements(`${localName}`).forEach((parent) => {
+      parent.value.children.forEach((el) => {
+        const openingEl = el.openingElement;
+        if (openingEl?.name && openingEl.name.type === "JSXMemberExpression") {
+          if (
+            openingEl.name.object.name === localName &&
+            openingEl.name.property.name === "List"
+          ) {
+            /* Move loop-prop */
+            el.openingElement.attributes.forEach((x, index) => {
+              if (x.name?.name === "loop" && x.type === "JSXAttribute") {
+                parent.value.openingElement.attributes.push(x);
+                delete el.openingElement.attributes[index];
+              }
+            });
+
+            /* Find and move iconPosition-prop to <Tabs/> */
+            el.children.forEach((tab) => {
+              const tabEl = tab.openingElement;
+              if (tabEl?.name && tabEl.name.type === "JSXMemberExpression") {
+                if (
+                  tabEl.name.object.name === localName &&
+                  tabEl.name.property.name === "Tab"
+                ) {
+                  tabEl?.attributes.forEach((x, index) => {
+                    if (
+                      x.name?.name === "iconPosition" &&
+                      x.type === "JSXAttribute"
+                    ) {
+                      if (!iconPositionProp) {
+                        iconPositionProp = x;
+                      }
+                      delete tabEl.attributes[index];
+                    }
+                  });
+                }
+              }
+            });
+          }
+        }
+      });
+      iconPositionProp &&
+        parent.value.openingElement.attributes.push(iconPositionProp);
+      iconPositionProp = null;
+    });
+  }
+
+  return root.toSource(options.printOptions);
+}

@navikt/codemod/tsconfig.json

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

@navikt/core/css/accordion.css

@@ -1,7 +1,7 @@
 :root {
   --navds-accordion-color-text: var(--navds-semantic-color-text);
   --navds-accordion-color-background: var(
-    ---navds-semantic-color-component-background-light
+    --navds-semantic-color-component-background-light
   );
   --navds-accordion-color-text-hover: var(--navds-semantic-color-link);
   --navds-accordion-color-border: var(--navds-semantic-color-border-muted);

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

@@ -28,6 +28,7 @@
   flex-direction: column;
   gap: var(--navds-spacing-3);
   padding-left: var(--navds-spacing-6);
+  list-style: inherit;
 }
 
 .navds-error-summary__list > * {

@navikt/core/css/form/form.css

@@ -1,12 +1,11 @@
-.navds-form-field > :not(:first-child):not(:empty),
-.navds-form-field > input:not(:first-child) {
-  margin-top: var(--navds-spacing-2);
+.navds-form-field {
+  display: grid;
+  justify-items: start;
+  gap: var(--navds-spacing-2);
 }
 
-/* Applied when hideLabel is applied to form-element */
-.navds-form-field > .navds-sr-only + :not(:first-child):not(:empty),
-.navds-form-field > .navds-sr-only + input:not(:first-child) {
-  margin-top: 0;
+.navds-form-field__description {
+  margin-top: -4px;
 }
 
 .navds-form-field .navds-error-message,
@@ -19,3 +18,12 @@
 .navds-fieldset .navds-error-message::before {
   content: "•";
 }
+
+.navds-form-field--disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.navds-form-field__error:empty {
+  display: none;
+}

@navikt/core/css/form/select.css

@@ -70,13 +70,6 @@
   border-color: var(--navds-select-color-border-error);
 }
 
-/*
-  Disabled handling
- */
-.navds-select--disabled {
-  opacity: 0.3;
-}
-
 .navds-select__input:disabled {
   background-color: var(--navds-select-color-background);
   border-color: var(--navds-select-color-border);

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

@@ -45,6 +45,10 @@
   color: var(--navds-text-field-color-text);
 }
 
+.navds-text-field__input[size] {
+  width: auto;
+}
+
 .navds-text-field__input::placeholder {
   color: var(--navds-text-field-color-placeholder-text);
 }
@@ -54,10 +58,6 @@
   min-height: 32px;
 }
 
-.navds-form-field--small > .navds-text-field__description:not(:empty) {
-  margin-top: var(--navds-spacing-1);
-}
-
 .navds-text-field__input:hover {
   border-color: var(--navds-text-field-color-border-hover);
 }
@@ -87,7 +87,6 @@
   border-color: var(--navds-text-field-color-border);
   box-shadow: none;
   cursor: not-allowed;
-  opacity: 0.3;
 }
 
 .navds-text-field__input[readonly] {
@@ -97,11 +96,6 @@
   cursor: not-allowed;
 }
 
-.navds-text-field--disabled > .navds-text-field__label,
-.navds-text-field--disabled > .navds-text-field__description {
-  opacity: 0.3;
-}
-
 /**
   * Removes default search icon
   */

@navikt/core/css/form/textarea.css

@@ -38,6 +38,7 @@
   width: 100%;
   display: block;
   min-height: 48px;
+  color: var(--navds-text-field-color-text);
 }
 
 .navds-textarea--counter {
@@ -89,13 +90,6 @@
   border-color: var(--navds-textarea-color-border-error);
 }
 
-/*
-  Disabled handling
- */
-.navds-textarea--disabled {
-  opacity: 0.3;
-}
-
 .navds-textarea__input:disabled {
   background-color: var(--navds-textarea-color-background);
   border-color: var(--navds-textarea-color-border);

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

@@ -21,7 +21,7 @@
 }
 
 .navds-link-panel:hover {
-  box-shadow: var(--navds-shadow-card);
+  box-shadow: var(--navds-shadow-medium);
   border-color: var(--navds-link-panel-color-border-hover);
 }
 

@navikt/core/css/loader.css

@@ -1,16 +1,12 @@
 :root {
   --navds-loader-color-foreground: var(--navds-global-color-gray-400);
-  --navds-loader-color-background: var(
-    --navds-semantic-color-component-background-alternate
-  );
+  --navds-loader-color-background: rgb(0 0 0 / 0.05);
   --navds-loader-color-neutral-foreground: var(--navds-global-color-gray-400);
   --navds-loader-color-interaction-foreground: var(
-    --navds-semantic-color-interaction-primary
+    --navds-global-color-blue-500
   );
-  --navds-loader-color-inverted-foreground: var(
-    --navds-semantic-color-component-background-light
-  );
-  --navds-loader-color-inverted-background: var(--navds-global-color-gray-600);
+  --navds-loader-color-inverted-foreground: var(--navds-global-color-white);
+  --navds-loader-color-inverted-background: rgb(255 255 255 / 0.25);
   --navds-loader-color-transparent-background: transparent;
 }
 

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.18.12",
+  "version": "0.18.17",
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",
   "keywords": [
@@ -20,7 +20,7 @@
     "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^0.9.5",
+    "@navikt/ds-tokens": "^0.9.6",
     "normalize.css": "^8.0.1",
     "postcss": "^8.3.6",
     "postcss-cli": "^8.3.1",

@navikt/core/css/popover.css

@@ -8,7 +8,7 @@
 .navds-popover {
   z-index: var(--navds-z-index-popover);
   background-color: var(--navds-popover-color-background);
-  box-shadow: var(--navds-shadow-popover);
+  box-shadow: var(--navds-shadow-medium);
   border: 1px solid;
   border-color: var(--navds-popover-color-border);
   border-radius: var(--navds-border-radius-medium);

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

@@ -55,7 +55,7 @@
 
 .navds-speechbubble__bubble {
   padding: 1rem;
-  box-shadow: var(--navds-shadow-popover);
+  box-shadow: var(--navds-shadow-small);
   width: fit-content;
   max-width: 37.5rem;
   background-color: var(--navds-speechbubble-color-background);

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.19.12",
+  "version": "0.19.14",
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
   "license": "MIT",

@navikt/core/react/src/form/ConfirmationPanel.tsx

@@ -57,7 +57,12 @@ export const ConfirmationPanel = forwardRef<
           {label}
         </Checkbox>
       </div>
-      <div id={errorId} aria-relevant="additions removals" aria-live="polite">
+      <div
+        className="navds-form-field__error"
+        id={errorId}
+        aria-relevant="additions removals"
+        aria-live="polite"
+      >
         {showErrorMsg && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
       </div>
     </div>

@navikt/core/react/src/form/Select.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, SelectHTMLAttributes } from "react";
 import cl from "classnames";
 import { Expand } from "@navikt/ds-icons";
-import { BodyShort, Label, ErrorMessage, omit } from "..";
+import { BodyShort, Label, ErrorMessage, omit, Detail } from "..";
 import { FormFieldProps, useFormField } from "./useFormField";
 
 export interface SelectProps
@@ -53,8 +53,8 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
           "navds-form-field",
           `navds-form-field--${size}`,
           {
+            "navds-form-field--disabled": !!inputProps.disabled,
             "navds-select--error": hasError,
-            "navds-select--disabled": !!inputProps.disabled,
           }
         )}
       >
@@ -62,23 +62,38 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
           htmlFor={inputProps.id}
           size={size}
           as="label"
-          className={cl("navds-select__label", {
+          className={cl("navds-form-field__label", {
             "navds-sr-only": hideLabel,
           })}
         >
           {label}
         </Label>
         {!!description && (
-          <BodyShort
-            as="div"
-            className={cl("navds-select__description", {
-              "navds-sr-only": hideLabel,
-            })}
-            id={inputDescriptionId}
-            size={size}
-          >
-            {description}
-          </BodyShort>
+          <>
+            {size === "medium" ? (
+              <BodyShort
+                className={cl("navds-form-field__description", {
+                  "navds-sr-only": hideLabel,
+                })}
+                id={inputDescriptionId}
+                size="small"
+                as="div"
+              >
+                {description}
+              </BodyShort>
+            ) : (
+              <Detail
+                className={cl("navds-form-field__description", {
+                  "navds-sr-only": hideLabel,
+                })}
+                id={inputDescriptionId}
+                size="small"
+                as="div"
+              >
+                {description}
+              </Detail>
+            )}
+          </>
         )}
         <div className="navds-select__container">
           <select
@@ -96,7 +111,12 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
           </select>
           <Expand className="navds-select__chevron" aria-hidden />
         </div>
-        <div id={errorId} aria-relevant="additions removals" aria-live="polite">
+        <div
+          className="navds-form-field__error"
+          id={errorId}
+          aria-relevant="additions removals"
+          aria-live="polite"
+        >
           {showErrorMsg && (
             <ErrorMessage size={size}>{props.error}</ErrorMessage>
           )}

@navikt/core/react/src/form/TextField.tsx

@@ -63,6 +63,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           {
             "navds-text-field--error": hasError,
             "navds-text-field--disabled": !!inputProps.disabled,
+            "navds-form-field--disabled": !!inputProps.disabled,
           }
         )}
       >
@@ -70,7 +71,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           htmlFor={inputProps.id}
           size={size}
           as="label"
-          className={cl("navds-text-field__label", {
+          className={cl("navds-form-field__label", {
             "navds-sr-only": hideLabel,
           })}
         >
@@ -81,7 +82,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           <>
             {size === "medium" ? (
               <BodyShort
-                className={cl("navds-text-field__description", {
+                className={cl("navds-form-field__description", {
                   "navds-sr-only": hideLabel,
                 })}
                 id={inputDescriptionId}
@@ -92,7 +93,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
               </BodyShort>
             ) : (
               <Detail
-                className={cl("navds-text-field__description", {
+                className={cl("navds-form-field__description", {
                   "navds-sr-only": hideLabel,
                 })}
                 id={inputDescriptionId}
@@ -116,7 +117,12 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           )}
           size={htmlSize}
         />
-        <div id={errorId} aria-relevant="additions removals" aria-live="polite">
+        <div
+          className="navds-form-field__error"
+          id={errorId}
+          aria-relevant="additions removals"
+          aria-live="polite"
+        >
           {showErrorMsg && (
             <ErrorMessage size={size}>{props.error}</ErrorMessage>
           )}

@navikt/core/react/src/form/Textarea.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, useState } from "react";
 import cl from "classnames";
 import TextareaAutosize from "@material-ui/core/TextareaAutosize";
-import { BodyShort, Label, ErrorMessage, omit } from "..";
+import { BodyShort, Label, ErrorMessage, omit, Detail } from "..";
 import { FormFieldProps, useFormField } from "./useFormField";
 import { useId } from "..";
 
@@ -90,8 +90,8 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           "navds-form-field",
           `navds-form-field--${size}`,
           {
+            "navds-form-field--disabled": !!inputProps.disabled,
             "navds-textarea--error": hasError,
-            "navds-textarea--disabled": !!inputProps.disabled,
             "navds-textarea--resize": resize,
           }
         )}
@@ -100,23 +100,38 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           htmlFor={inputProps.id}
           size={size}
           as="label"
-          className={cl("navds-textarea__label", {
+          className={cl("navds-form-field__label", {
             "navds-sr-only": hideLabel,
           })}
         >
           {label}
         </Label>
         {!!description && (
-          <BodyShort
-            as="div"
-            className={cl("navds-textarea__description", {
-              "navds-sr-only": hideLabel,
-            })}
-            id={inputDescriptionId}
-            size={size}
-          >
-            {description}
-          </BodyShort>
+          <>
+            {size === "medium" ? (
+              <BodyShort
+                className={cl("navds-form-field__description", {
+                  "navds-sr-only": hideLabel,
+                })}
+                id={inputDescriptionId}
+                size="small"
+                as="div"
+              >
+                {description}
+              </BodyShort>
+            ) : (
+              <Detail
+                className={cl("navds-form-field__description", {
+                  "navds-sr-only": hideLabel,
+                })}
+                id={inputDescriptionId}
+                size="small"
+                as="div"
+              >
+                {description}
+              </Detail>
+            )}
+          </>
         )}
         <div className="navds-textarea__wrapper">
           <TextareaAutosize
@@ -144,8 +159,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           {hasMaxLength && (
             <>
               <span id={maxLengthId} className="navds-sr-only">
-                Tekstområde med plass til {maxLength} tegn., Textarea can have{" "}
-                {maxLength} signs.
+                Tekstområde med plass til {maxLength} tegn.
               </span>
               <Counter
                 maxLength={maxLength}
@@ -155,7 +169,12 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
             </>
           )}
         </div>
-        <div id={errorId} aria-relevant="additions removals" aria-live="polite">
+        <div
+          className="navds-form-field__error"
+          id={errorId}
+          aria-relevant="additions removals"
+          aria-live="polite"
+        >
           {showErrorMsg && (
             <ErrorMessage size={size}>{props.error}</ErrorMessage>
           )}

@navikt/core/react/src/form/search/Search.tsx

@@ -78,10 +78,11 @@ export const SearchContext = React.createContext<SearchContextProps | null>(
 
 export const Search = forwardRef<HTMLInputElement, SearchProps>(
   (props, ref) => {
-    const { inputProps, size = "medium", inputDescriptionId } = useSearch(
-      props,
-      "searchfield"
-    );
+    const {
+      inputProps,
+      size = "medium",
+      inputDescriptionId,
+    } = useSearch(props, "searchfield");
 
     const {
       className,
@@ -153,7 +154,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
           htmlFor={inputProps.id}
           size={size}
           as="label"
-          className={cl("navds-text-field__label", {
+          className={cl("navds-form-field__label", {
             "navds-sr-only": hideLabel,
           })}
         >
@@ -162,7 +163,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
         {!!description && (
           <BodyShort
             as="div"
-            className={cl("navds-text-field__description", {
+            className={cl("navds-form-field__description", {
               "navds-sr-only": hideLabel,
             })}
             id={inputDescriptionId}

@navikt/core/react/src/form/stories/fieldset.stories.tsx

@@ -61,8 +61,14 @@ export const Description = () => (
     legend="Mollit eiusmod"
     description="Esse cupidatat reprehenderit est culpa consectetur sit dolor esse."
   >
-    <TextField label="Textfield label" hideLabel />
-    <TextField label="Textfield label" hideLabel />
+    <TextField
+      label="Textfield label"
+      description="Amet quis cillum incididunt "
+    />
+    <TextField
+      label="Textfield label"
+      description="Enim et occaecat voluptate labore sit do exercitation laborum non "
+    />
   </Fieldset>
 );
 

@navikt/core/react/src/form/stories/textarea.stories.tsx

@@ -44,6 +44,7 @@ export const Default = (props) => {
 
 Default.args = {
   maxLength: 100,
+  resize: false,
 };
 
 export const Small = () => {

@navikt/core/tailwind/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tailwind",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "Auto-generated tailwind config based on @navikt/ds-tokens",
   "author": "NAV Designsystem team",
   "keywords": [
@@ -22,7 +22,7 @@
     "directory": "@navikt/core/tailwind"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^0.9.5",
+    "@navikt/ds-tokens": "^0.9.6",
     "@types/jest": "^27.0.1",
     "@types/node": "^17.0.35",
     "jest": "^27.2.0",

@navikt/core/tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tokens",
-  "version": "0.9.5",
+  "version": "0.9.6",
   "description": "Auto-generated design-tokens for NAV design-systems framework",
   "author": "NAV Designsystem team",
   "keywords": [

@navikt/core/tokens/src/shadow.json

@@ -21,12 +21,6 @@
       },
       "focus-inverted": {
         "value": "0 0 0 3px {navds.semantic.color.focus.inverted.value}"
-      },
-      "popover": {
-        "value": "0 2px 4px 0 {navds.global.color.gray.200.value}"
-      },
-      "card": {
-        "value": "0 1px 3px 0 rgba(38,38,38,0.2),0 2px 1px 0 rgba(38,38,38,0.12),0 1px 1px 0 rgba(38,38,38,0.14)"
       }
     }
   }

@navikt/internal/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react-internal",
-  "version": "0.14.12",
+  "version": "0.14.15",
   "description": "NAV internal designsystem react components",
   "author": "NAV Designsystem team",
   "license": "MIT",
@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@navikt/ds-icons": "^0.8.17",
-    "@navikt/ds-react": "^0.19.12",
+    "@navikt/ds-react": "^0.19.14",
     "@popperjs/core": "^2.10.1",
     "classnames": "^2.3.1",
     "copy-to-clipboard": "^3.3.1",

@navikt/internal/react/src/dropdown/Menu/index.tsx

@@ -14,6 +14,23 @@ interface MenuProps extends React.HTMLAttributes<HTMLDivElement> {
    * onClose callback
    */
   onClose?: () => void;
+  /**
+   * Default dialog-placement on open
+   * @default "bottom-end"
+   */
+  placement?:
+    | "top"
+    | "bottom"
+    | "right"
+    | "left"
+    | "top-start"
+    | "top-end"
+    | "bottom-start"
+    | "bottom-end"
+    | "right-start"
+    | "right-end"
+    | "left-start"
+    | "left-end";
 }
 
 export interface MenuType<Props = MenuProps>
@@ -25,7 +42,7 @@ export interface MenuType<Props = MenuProps>
 }
 
 export const Menu = forwardRef<HTMLDivElement, MenuProps>(
-  ({ className, onClose, ...rest }, ref) => {
+  ({ className, onClose, placement = "bottom-end", ...rest }, ref) => {
     const context = useContext(DropdownContext);
 
     if (!context) {
@@ -38,8 +55,8 @@ export const Menu = forwardRef<HTMLDivElement, MenuProps>(
     return (
       <Popover
         {...rest}
+        placement={placement}
         ref={ref}
-        placement="bottom-end"
         arrow={false}
         className={cl("navdsi-dropdown__menu", className)}
         offset={-4}

README.md

@@ -1,11 +1,11 @@
 <h1 align="center">
     <img src="https://avatars.githubusercontent.com/u/11848947?s=200&v=4" />
-    <br/>Aksel
+    <br/>Designsystemet
 </h1>
 
 <div align="center">
     <p>
-        Monorepo for Frontend-komponenter til Aksel.
+        Monorepo for Frontend-komponenter brukt i NAV.
     </p>
     <p>
       <a href="https://github.com/navikt/Designsystemet/pulls">

lerna.json

@@ -19,6 +19,7 @@
     "@navikt/core/tokens",
     "@navikt/core/tailwind",
     "@navikt/internal/css",
-    "@navikt/internal/react"
+    "@navikt/internal/react",
+    "@navikt/codemod"
   ]
 }

package.json

@@ -7,11 +7,12 @@
     "clean:lib": "node scripts/clean.js",
     "test": "yarn workspaces foreach -p run test",
     "postinstall": "husky install",
-    "boot": "yarn clean:lib && yarn workspaces foreach -pA --topological-dev --no-private run build",
+    "boot": "yarn clean:lib && yarn build:codemod && yarn workspaces foreach -pA --topological-dev --no-private run build",
     "docgen": "yarn workspaces foreach -p run docgen",
     "storybook": "start-storybook -p 6006",
     "build:storybook": "build-storybook",
     "chromatic": "npx chromatic --project-token x3xqdfgkujg --build-script-name build:storybook",
+    "build:codemod": "yarn workspace @navikt/ds-codemod build",
     "build:tokens": "yarn workspace @navikt/ds-tokens build",
     "update:icons": "yarn workspace @navikt/ds-icons update",
     "update:tokens": "yarn workspace @navikt/ds-tokens update",
@@ -22,6 +23,7 @@
   "workspaces": [
     "@navikt/core/*",
     "@navikt/internal/*",
+    "@navikt/codemod",
     "examples/*"
   ],
   "prettier": {},
@@ -43,7 +45,8 @@
       "public",
       "examples",
       "esm",
-      "cjs"
+      "cjs",
+      "**/codemod/**/*.js"
     ]
   },
   "stylelint": {

yarn.lock

@@ -78,6 +78,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/core@npm:^7.13.16":
+  version: 7.18.5
+  resolution: "@babel/core@npm:7.18.5"
+  dependencies:
+    "@ampproject/remapping": ^2.1.0
+    "@babel/code-frame": ^7.16.7
+    "@babel/generator": ^7.18.2
+    "@babel/helper-compilation-targets": ^7.18.2
+    "@babel/helper-module-transforms": ^7.18.0
+    "@babel/helpers": ^7.18.2
+    "@babel/parser": ^7.18.5
+    "@babel/template": ^7.16.7
+    "@babel/traverse": ^7.18.5
+    "@babel/types": ^7.18.4
+    convert-source-map: ^1.7.0
+    debug: ^4.1.0
+    gensync: ^1.0.0-beta.2
+    json5: ^2.2.1
+    semver: ^6.3.0
+  checksum: e20c3d69a07eb564408d611b827c2f5db56f05f1ca7cb3046f3823a1cf6b13c032f02d4b8ffe1e4593699e86e0f25ca1aee6228486c1ebea48d21aaeb28e6718
+  languageName: node
+  linkType: hard
+
 "@babel/eslint-parser@npm:^7.16.3":
   version: 7.18.2
   resolution: "@babel/eslint-parser@npm:7.18.2"
@@ -401,6 +424,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/parser@npm:^7.13.16, @babel/parser@npm:^7.18.5":
+  version: 7.18.5
+  resolution: "@babel/parser@npm:7.18.5"
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: 4976349d8681af215fd5771bd5b74568cc95a2e8bf2afcf354bf46f73f3d6f08d54705f354b1d0012f914dd02a524b7d37c5c1204ccaafccb9db3c37dba96a9b
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.17.12":
   version: 7.17.12
   resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.17.12"
@@ -438,7 +470,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-class-properties@npm:^7.12.1, @babel/plugin-proposal-class-properties@npm:^7.16.0, @babel/plugin-proposal-class-properties@npm:^7.17.12":
+"@babel/plugin-proposal-class-properties@npm:^7.12.1, @babel/plugin-proposal-class-properties@npm:^7.13.0, @babel/plugin-proposal-class-properties@npm:^7.16.0, @babel/plugin-proposal-class-properties@npm:^7.17.12":
   version: 7.17.12
   resolution: "@babel/plugin-proposal-class-properties@npm:7.17.12"
   dependencies:
@@ -539,7 +571,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-nullish-coalescing-operator@npm:^7.12.1, @babel/plugin-proposal-nullish-coalescing-operator@npm:^7.16.0, @babel/plugin-proposal-nullish-coalescing-operator@npm:^7.17.12":
+"@babel/plugin-proposal-nullish-coalescing-operator@npm:^7.12.1, @babel/plugin-proposal-nullish-coalescing-operator@npm:^7.13.8, @babel/plugin-proposal-nullish-coalescing-operator@npm:^7.16.0, @babel/plugin-proposal-nullish-coalescing-operator@npm:^7.17.12":
   version: 7.17.12
   resolution: "@babel/plugin-proposal-nullish-coalescing-operator@npm:7.17.12"
   dependencies:
@@ -603,7 +635,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-optional-chaining@npm:^7.12.7, @babel/plugin-proposal-optional-chaining@npm:^7.16.0, @babel/plugin-proposal-optional-chaining@npm:^7.17.12":
+"@babel/plugin-proposal-optional-chaining@npm:^7.12.7, @babel/plugin-proposal-optional-chaining@npm:^7.13.12, @babel/plugin-proposal-optional-chaining@npm:^7.16.0, @babel/plugin-proposal-optional-chaining@npm:^7.17.12":
   version: 7.17.12
   resolution: "@babel/plugin-proposal-optional-chaining@npm:7.17.12"
   dependencies:
@@ -1099,7 +1131,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-commonjs@npm:^7.18.2":
+"@babel/plugin-transform-modules-commonjs@npm:^7.13.8, @babel/plugin-transform-modules-commonjs@npm:^7.18.2":
   version: 7.18.2
   resolution: "@babel/plugin-transform-modules-commonjs@npm:7.18.2"
   dependencies:
@@ -1462,7 +1494,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-flow@npm:^7.12.1":
+"@babel/preset-flow@npm:^7.12.1, @babel/preset-flow@npm:^7.13.13":
   version: 7.17.12
   resolution: "@babel/preset-flow@npm:7.17.12"
   dependencies:
@@ -1506,7 +1538,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-typescript@npm:^7.12.7, @babel/preset-typescript@npm:^7.16.0":
+"@babel/preset-typescript@npm:^7.12.7, @babel/preset-typescript@npm:^7.13.0, @babel/preset-typescript@npm:^7.16.0":
   version: 7.17.12
   resolution: "@babel/preset-typescript@npm:7.17.12"
   dependencies:
@@ -1519,7 +1551,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/register@npm:^7.12.1":
+"@babel/register@npm:^7.12.1, @babel/register@npm:^7.13.16":
   version: 7.17.7
   resolution: "@babel/register@npm:7.17.7"
   dependencies:
@@ -1582,7 +1614,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.0.0, @babel/types@npm:^7.12.11, @babel/types@npm:^7.12.7, @babel/types@npm:^7.15.6, @babel/types@npm:^7.16.0, @babel/types@npm:^7.16.7, @babel/types@npm:^7.16.8, @babel/types@npm:^7.17.0, @babel/types@npm:^7.17.12, @babel/types@npm:^7.18.0, @babel/types@npm:^7.18.2, @babel/types@npm:^7.2.0, @babel/types@npm:^7.3.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.7.0, @babel/types@npm:^7.8.3":
+"@babel/traverse@npm:^7.18.5, @babel/traverse@npm:^7.4.5":
+  version: 7.18.5
+  resolution: "@babel/traverse@npm:7.18.5"
+  dependencies:
+    "@babel/code-frame": ^7.16.7
+    "@babel/generator": ^7.18.2
+    "@babel/helper-environment-visitor": ^7.18.2
+    "@babel/helper-function-name": ^7.17.9
+    "@babel/helper-hoist-variables": ^7.16.7
+    "@babel/helper-split-export-declaration": ^7.16.7
+    "@babel/parser": ^7.18.5
+    "@babel/types": ^7.18.4
+    debug: ^4.1.0
+    globals: ^11.1.0
+  checksum: cc0470c880e15a748ca3424665c65836dba450fd0331fb28f9d30aa42acd06387b6321996517ab1761213f781fe8d657e2c3ad67c34afcb766d50653b393810f
+  languageName: node
+  linkType: hard
+
+"@babel/types@npm:^7.0.0, @babel/types@npm:^7.12.11, @babel/types@npm:^7.12.7, @babel/types@npm:^7.15.6, @babel/types@npm:^7.16.0, @babel/types@npm:^7.16.7, @babel/types@npm:^7.16.8, @babel/types@npm:^7.17.0, @babel/types@npm:^7.17.12, @babel/types@npm:^7.18.0, @babel/types@npm:^7.18.2, @babel/types@npm:^7.18.4, @babel/types@npm:^7.2.0, @babel/types@npm:^7.3.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.7.0, @babel/types@npm:^7.8.3":
   version: 7.18.4
   resolution: "@babel/types@npm:7.18.4"
   dependencies:
@@ -3040,6 +3090,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@navikt/ds-codemod@workspace:@navikt/codemod":
+  version: 0.0.0-use.local
+  resolution: "@navikt/ds-codemod@workspace:@navikt/codemod"
+  dependencies:
+    "@types/jscodeshift": 0.11.5
+    "@types/react": ^18.0.0
+    chalk: 4.1.0
+    cheerio: 1.0.0-rc.9
+    execa: 4.0.3
+    globby: 11.0.1
+    inquirer: 7.3.3
+    is-git-clean: 1.1.0
+    jest: ^27.5.0
+    jscodeshift: 0.13.1
+    jscodeshift-add-imports: 1.0.10
+    meow: 7.0.1
+    typescript: ^4.7.2
+  bin:
+    ds-codemod: ./bin/ds-codemod.js
+  languageName: unknown
+  linkType: soft
+
 "@navikt/ds-css-internal@workspace:@navikt/internal/css":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-css-internal@workspace:@navikt/internal/css"
@@ -3055,7 +3127,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@navikt/ds-css@workspace:@navikt/core/css"
   dependencies:
-    "@navikt/ds-tokens": ^0.9.5
+    "@navikt/ds-tokens": ^0.9.6
     normalize.css: ^8.0.1
     postcss: ^8.3.6
     postcss-cli: ^8.3.1
@@ -3095,7 +3167,7 @@ __metadata:
   resolution: "@navikt/ds-react-internal@workspace:@navikt/internal/react"
   dependencies:
     "@navikt/ds-icons": ^0.8.17
-    "@navikt/ds-react": ^0.19.9
+    "@navikt/ds-react": ^0.19.14
     "@popperjs/core": ^2.10.1
     "@types/node": ^17.0.35
     classnames: ^2.3.1
@@ -3111,7 +3183,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-react@*, @navikt/ds-react@^0.19.9, @navikt/ds-react@workspace:@navikt/core/react":
+"@navikt/ds-react@*, @navikt/ds-react@^0.19.14, @navikt/ds-react@workspace:@navikt/core/react":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-react@workspace:@navikt/core/react"
   dependencies:
@@ -3159,7 +3231,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind"
   dependencies:
-    "@navikt/ds-tokens": ^0.9.5
+    "@navikt/ds-tokens": ^0.9.6
     "@types/jest": ^27.0.1
     "@types/node": ^17.0.35
     jest: ^27.2.0
@@ -3170,7 +3242,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tokens@^0.9.5, @navikt/ds-tokens@workspace:@navikt/core/tokens":
+"@navikt/ds-tokens@^0.9.6, @navikt/ds-tokens@workspace:@navikt/core/tokens":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
   dependencies:
@@ -5673,6 +5745,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/jscodeshift@npm:0.11.5":
+  version: 0.11.5
+  resolution: "@types/jscodeshift@npm:0.11.5"
+  dependencies:
+    ast-types: ^0.14.1
+    recast: ^0.20.3
+  checksum: 5929f729477792a2c745289399ac0e2c0c46d4970031fa188073154262c6b0fcb03cf926d70a9fbcdc4c299df0e7fa1f0d6548e6bd1bb03c8245918c5b1a60de
+  languageName: node
+  linkType: hard
+
 "@types/json-schema@npm:*, @types/json-schema@npm:^7.0.4, @types/json-schema@npm:^7.0.5, @types/json-schema@npm:^7.0.8, @types/json-schema@npm:^7.0.9":
   version: 7.0.11
   resolution: "@types/json-schema@npm:7.0.11"
@@ -7065,6 +7147,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"array-differ@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "array-differ@npm:1.0.0"
+  checksum: ac6060952c7cb0a534c06ea3c6c960432d605d905e9901afe386e841aadc6e102ed81e0e6abe5eb4b50dd43907fc6426f6012b5ca784ec7741a5b398690c0998
+  languageName: node
+  linkType: hard
+
 "array-differ@npm:^3.0.0":
   version: 3.0.0
   resolution: "array-differ@npm:3.0.0"
@@ -7106,7 +7195,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array-union@npm:^1.0.2":
+"array-union@npm:^1.0.1, array-union@npm:^1.0.2":
   version: 1.0.2
   resolution: "array-union@npm:1.0.2"
   dependencies:
@@ -7193,7 +7282,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"arrify@npm:^1.0.1":
+"arrify@npm:^1.0.0, arrify@npm:^1.0.1":
   version: 1.0.1
   resolution: "arrify@npm:1.0.1"
   checksum: 745075dd4a4624ff0225c331dacb99be501a515d39bcb7c84d24660314a6ec28e68131b137e6f7e16318170842ce97538cd298fc4cd6b2cc798e0b957f2747e7
@@ -7266,7 +7355,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ast-types@npm:^0.14.2":
+"ast-types@npm:0.14.2, ast-types@npm:^0.14.1, ast-types@npm:^0.14.2":
   version: 0.14.2
   resolution: "ast-types@npm:0.14.2"
   dependencies:
@@ -7384,6 +7473,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"babel-core@npm:^7.0.0-bridge.0":
+  version: 7.0.0-bridge.0
+  resolution: "babel-core@npm:7.0.0-bridge.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 2a1cb879019dffb08d17bec36e13c3a6d74c94773f41c1fd8b14de13f149cc34b705b0a1e07b42fcf35917b49d78db6ff0c5c3b00b202a5235013d517b5c6bbb
+  languageName: node
+  linkType: hard
+
 "babel-eslint@npm:^10.1.0":
   version: 10.1.0
   resolution: "babel-eslint@npm:10.1.0"
@@ -8281,14 +8379,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"camelcase@npm:^5.3.1":
+"camelcase@npm:^5.0.0, camelcase@npm:^5.3.1":
   version: 5.3.1
   resolution: "camelcase@npm:5.3.1"
   checksum: e6effce26b9404e3c0f301498184f243811c30dfe6d0b9051863bd8e4034d09c8c2923794f280d6827e5aa055f6c434115ff97864a16a963366fb35fd673024b
   languageName: node
   linkType: hard
 
-"camelcase@npm:^6.2.0":
+"camelcase@npm:^6.0.0, camelcase@npm:^6.2.0":
   version: 6.3.0
   resolution: "camelcase@npm:6.3.0"
   checksum: 8c96818a9076434998511251dcb2761a94817ea17dbdc37f47ac080bd088fc62c7369429a19e2178b993497132c8cbcf5cc1f44ba963e76782ba469c0474938d
@@ -8343,6 +8441,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chalk@npm:4.1.0":
+  version: 4.1.0
+  resolution: "chalk@npm:4.1.0"
+  dependencies:
+    ansi-styles: ^4.1.0
+    supports-color: ^7.1.0
+  checksum: 5561c7b4c063badee3e16d04bce50bd033e1be1bf4c6948639275683ffa7a1993c44639b43c22b1c505f0f813a24b1889037eb182546b48946f9fe7cdd0e7d13
+  languageName: node
+  linkType: hard
+
 "chalk@npm:4.1.1":
   version: 4.1.1
   resolution: "chalk@npm:4.1.1"
@@ -8446,6 +8554,34 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cheerio-select@npm:^1.4.0":
+  version: 1.6.0
+  resolution: "cheerio-select@npm:1.6.0"
+  dependencies:
+    css-select: ^4.3.0
+    css-what: ^6.0.1
+    domelementtype: ^2.2.0
+    domhandler: ^4.3.1
+    domutils: ^2.8.0
+  checksum: c64cccea5ba3af091cf876d07a8bbf81fbd616c821495d194b73829f026777a8edd17a0f760ddd5be4a213c4411c60b03d2b1f8da4a77a46c81ed596a9860b20
+  languageName: node
+  linkType: hard
+
+"cheerio@npm:1.0.0-rc.9":
+  version: 1.0.0-rc.9
+  resolution: "cheerio@npm:1.0.0-rc.9"
+  dependencies:
+    cheerio-select: ^1.4.0
+    dom-serializer: ^1.3.1
+    domhandler: ^4.2.0
+    htmlparser2: ^6.1.0
+    parse5: ^6.0.1
+    parse5-htmlparser2-tree-adapter: ^6.0.1
+    tslib: ^2.2.0
+  checksum: de3a5991e001a33bb478ab031c0ff5ab9fdc49044196c487e0527860030ece024d192e999bb771d3a357ecc8b3cd5995808a16909db953e8ff131f65e89be367
+  languageName: node
+  linkType: hard
+
 "chokidar@npm:^2.1.8":
   version: 2.1.8
   resolution: "chokidar@npm:2.1.8"
@@ -9383,6 +9519,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cross-spawn-async@npm:^2.1.1":
+  version: 2.2.5
+  resolution: "cross-spawn-async@npm:2.2.5"
+  dependencies:
+    lru-cache: ^4.0.0
+    which: ^1.2.8
+  checksum: 6d9059a68a643d9a7506c0d7ca518a803a4293d62cbd3763bdb18cac0dd7bfa9b07d6705361a23c486c7b790e4a2fbfc3d63b93e21de52ad862794b12c6f055f
+  languageName: node
+  linkType: hard
+
 "cross-spawn@npm:^6.0.0":
   version: 6.0.5
   resolution: "cross-spawn@npm:6.0.5"
@@ -9483,7 +9629,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-select@npm:^4.1.3":
+"css-select@npm:^4.1.3, css-select@npm:^4.3.0":
   version: 4.3.0
   resolution: "css-select@npm:4.3.0"
   dependencies:
@@ -10095,7 +10241,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dom-serializer@npm:^1.0.1":
+"dom-serializer@npm:^1.0.1, dom-serializer@npm:^1.3.1":
   version: 1.4.1
   resolution: "dom-serializer@npm:1.4.1"
   dependencies:
@@ -11036,7 +11182,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esprima@npm:^4.0.0, esprima@npm:^4.0.1":
+"esprima@npm:^4.0.0, esprima@npm:^4.0.1, esprima@npm:~4.0.0":
   version: 4.0.1
   resolution: "esprima@npm:4.0.1"
   bin:
@@ -11135,6 +11281,37 @@ __metadata:
   languageName: node
   linkType: hard
 
+"execa@npm:4.0.3":
+  version: 4.0.3
+  resolution: "execa@npm:4.0.3"
+  dependencies:
+    cross-spawn: ^7.0.0
+    get-stream: ^5.0.0
+    human-signals: ^1.1.1
+    is-stream: ^2.0.0
+    merge-stream: ^2.0.0
+    npm-run-path: ^4.0.0
+    onetime: ^5.1.0
+    signal-exit: ^3.0.2
+    strip-final-newline: ^2.0.0
+  checksum: e76102eeab4727bdad930c33df5fd8621fbd77930061e3a815307e132dc8eb1d103631917ea3ed7d2e5257b9c74c7dcf6980b5f7fbcd0d1cf6cbcb83a3bc226f
+  languageName: node
+  linkType: hard
+
+"execa@npm:^0.4.0":
+  version: 0.4.0
+  resolution: "execa@npm:0.4.0"
+  dependencies:
+    cross-spawn-async: ^2.1.1
+    is-stream: ^1.1.0
+    npm-run-path: ^1.0.0
+    object-assign: ^4.0.1
+    path-key: ^1.0.0
+    strip-eof: ^1.0.0
+  checksum: aa78c841cbb11b279127f2155e243f7fd766369f8a928ccab9aaa88687ee765e60f7de626ed4056c540ea6c4d7347819a4ae4426076a481edc47585dce989f8e
+  languageName: node
+  linkType: hard
+
 "execa@npm:^1.0.0":
   version: 1.0.0
   resolution: "execa@npm:1.0.0"
@@ -11354,7 +11531,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-glob@npm:3.2.11, fast-glob@npm:^3.2.11, fast-glob@npm:^3.2.7, fast-glob@npm:^3.2.9":
+"fast-glob@npm:3.2.11, fast-glob@npm:^3.1.1, fast-glob@npm:^3.2.11, fast-glob@npm:^3.2.7, fast-glob@npm:^3.2.9":
   version: 3.2.11
   resolution: "fast-glob@npm:3.2.11"
   dependencies:
@@ -11637,6 +11814,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"flow-parser@npm:0.*":
+  version: 0.180.0
+  resolution: "flow-parser@npm:0.180.0"
+  checksum: bc26d9d29e49f3401602bc76ece47ff839e339b555560d53e2d3553c84222702d587e0d6342effdb1cbd334bf06ab33b3a1c370e701229b800f8b9f9bf73e233
+  languageName: node
+  linkType: hard
+
 "flush-write-stream@npm:^1.0.0":
   version: 1.1.1
   resolution: "flush-write-stream@npm:1.1.1"
@@ -12340,6 +12524,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"globby@npm:11.0.1":
+  version: 11.0.1
+  resolution: "globby@npm:11.0.1"
+  dependencies:
+    array-union: ^2.1.0
+    dir-glob: ^3.0.1
+    fast-glob: ^3.1.1
+    ignore: ^5.1.4
+    merge2: ^1.3.0
+    slash: ^3.0.0
+  checksum: b0b26e580666ef8caf0b0facd585c1da46eb971207ee9f8c7b690c1372d77602dd072f047f26c3ae1c293807fdf8fb6890d9291d37bc6d2602b1f07386f983e5
+  languageName: node
+  linkType: hard
+
 "globby@npm:^11.0.0, globby@npm:^11.0.2, globby@npm:^11.0.4, globby@npm:^11.1.0":
   version: 11.1.0
   resolution: "globby@npm:11.1.0"
@@ -13201,7 +13399,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"inquirer@npm:^7.3.3":
+"inquirer@npm:7.3.3, inquirer@npm:^7.3.3":
   version: 7.3.3
   resolution: "inquirer@npm:7.3.3"
   dependencies:
@@ -13565,6 +13763,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-git-clean@npm:1.1.0":
+  version: 1.1.0
+  resolution: "is-git-clean@npm:1.1.0"
+  dependencies:
+    execa: ^0.4.0
+    is-obj: ^1.0.1
+    multimatch: ^2.1.0
+  checksum: aa89b03f97f02e9dbf5990ad002b33f75bdb83abd0626e60e76d03f62981ad2500b33e7b9eea9f2fdf861ae818ee40663d052902f4c7c0897067463d36072259
+  languageName: node
+  linkType: hard
+
 "is-glob@npm:^3.0.0, is-glob@npm:^3.1.0":
   version: 3.1.0
   resolution: "is-glob@npm:3.1.0"
@@ -13674,6 +13883,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-obj@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "is-obj@npm:1.0.1"
+  checksum: 3ccf0efdea12951e0b9c784e2b00e77e87b2f8bd30b42a498548a8afcc11b3287342a2030c308e473e93a7a19c9ea7854c99a8832a476591c727df2a9c79796c
+  languageName: node
+  linkType: hard
+
 "is-obj@npm:^2.0.0":
   version: 2.0.0
   resolution: "is-obj@npm:2.0.0"
@@ -14640,6 +14856,58 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jscodeshift-add-imports@npm:1.0.10":
+  version: 1.0.10
+  resolution: "jscodeshift-add-imports@npm:1.0.10"
+  dependencies:
+    "@babel/traverse": ^7.4.5
+    jscodeshift-find-imports: ^2.0.2
+  peerDependencies:
+    jscodeshift: ^0.7.0 || ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0
+  checksum: ecc64f24bea38864c56364236d9e78fe63930ee2c2a9e3ab9444fd62e013e80f1e21cbf854455aa1939be6bd58ce9054acc06bf9d4f327f99446c64503301de6
+  languageName: node
+  linkType: hard
+
+"jscodeshift-find-imports@npm:^2.0.2":
+  version: 2.0.4
+  resolution: "jscodeshift-find-imports@npm:2.0.4"
+  peerDependencies:
+    jscodeshift: ^0.7.0 || ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0
+  checksum: b57e6f6ca7c94a528d8dd6ea888765ccae03d4005026ea4423f2c8572c7abb1bff5fab96ad0f04c6cb80628ecd6944386b450dc8d231905d2cb17a34129d9b86
+  languageName: node
+  linkType: hard
+
+"jscodeshift@npm:0.13.1":
+  version: 0.13.1
+  resolution: "jscodeshift@npm:0.13.1"
+  dependencies:
+    "@babel/core": ^7.13.16
+    "@babel/parser": ^7.13.16
+    "@babel/plugin-proposal-class-properties": ^7.13.0
+    "@babel/plugin-proposal-nullish-coalescing-operator": ^7.13.8
+    "@babel/plugin-proposal-optional-chaining": ^7.13.12
+    "@babel/plugin-transform-modules-commonjs": ^7.13.8
+    "@babel/preset-flow": ^7.13.13
+    "@babel/preset-typescript": ^7.13.0
+    "@babel/register": ^7.13.16
+    babel-core: ^7.0.0-bridge.0
+    chalk: ^4.1.2
+    flow-parser: 0.*
+    graceful-fs: ^4.2.4
+    micromatch: ^3.1.10
+    neo-async: ^2.5.0
+    node-dir: ^0.1.17
+    recast: ^0.20.4
+    temp: ^0.8.4
+    write-file-atomic: ^2.3.0
+  peerDependencies:
+    "@babel/preset-env": ^7.1.6
+  bin:
+    jscodeshift: bin/jscodeshift.js
+  checksum: 1c35938de5fc29cafec80e2c37d5c3411f85cd5d40e0243b52f2da0c1ab4b659daddfd62de558eca5d562303616f7838097727b651f4ad8e32b1e96f169cdd76
+  languageName: node
+  linkType: hard
+
 "jsdom@npm:^16.6.0":
   version: 16.7.0
   resolution: "jsdom@npm:16.7.0"
@@ -15374,6 +15642,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lru-cache@npm:^4.0.0":
+  version: 4.1.5
+  resolution: "lru-cache@npm:4.1.5"
+  dependencies:
+    pseudomap: ^1.0.2
+    yallist: ^2.1.2
+  checksum: 4bb4b58a36cd7dc4dcec74cbe6a8f766a38b7426f1ff59d4cf7d82a2aa9b9565cd1cb98f6ff60ce5cd174524868d7bc9b7b1c294371851356066ca9ac4cf135a
+  languageName: node
+  linkType: hard
+
 "lru-cache@npm:^5.1.1":
   version: 5.1.1
   resolution: "lru-cache@npm:5.1.1"
@@ -15695,6 +15973,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"meow@npm:7.0.1":
+  version: 7.0.1
+  resolution: "meow@npm:7.0.1"
+  dependencies:
+    "@types/minimist": ^1.2.0
+    arrify: ^2.0.1
+    camelcase: ^6.0.0
+    camelcase-keys: ^6.2.2
+    decamelize-keys: ^1.1.0
+    hard-rejection: ^2.1.0
+    minimist-options: ^4.0.2
+    normalize-package-data: ^2.5.0
+    read-pkg-up: ^7.0.1
+    redent: ^3.0.0
+    trim-newlines: ^3.0.0
+    type-fest: ^0.13.1
+    yargs-parser: ^18.1.3
+  checksum: 7edd097f0e3d5b746a50a39777c9a833dbc1f9fcbec84a78b54dd409d308bb4d1d6bbbb2a81846c7aba2e9ef38963e5c2bfb52aef55653b0d12dfab7dcc904cb
+  languageName: node
+  linkType: hard
+
 "meow@npm:^3.1.0":
   version: 3.7.0
   resolution: "meow@npm:3.7.0"
@@ -15915,7 +16214,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimatch@npm:^3.0.2, minimatch@npm:^3.0.3, minimatch@npm:^3.0.4, minimatch@npm:^3.1.1, minimatch@npm:^3.1.2":
+"minimatch@npm:^3.0.0, minimatch@npm:^3.0.2, minimatch@npm:^3.0.3, minimatch@npm:^3.0.4, minimatch@npm:^3.1.1, minimatch@npm:^3.1.2":
   version: 3.1.2
   resolution: "minimatch@npm:3.1.2"
   dependencies:
@@ -15933,7 +16232,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimist-options@npm:4.1.0":
+"minimist-options@npm:4.1.0, minimist-options@npm:^4.0.2":
   version: 4.1.0
   resolution: "minimist-options@npm:4.1.0"
   dependencies:
@@ -16222,6 +16521,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"multimatch@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "multimatch@npm:2.1.0"
+  dependencies:
+    array-differ: ^1.0.0
+    array-union: ^1.0.1
+    arrify: ^1.0.0
+    minimatch: ^3.0.0
+  checksum: 19259848ec28e5b3ee150ef3ac4a7d3d4afd0c285556e58f349e393b6b4cb6d99abe14415aa2183f4e6309c42d4d3cf941da7ad1b088753024c41ad8b280b03b
+  languageName: node
+  linkType: hard
+
 "multimatch@npm:^4.0.0":
   version: 4.0.0
   resolution: "multimatch@npm:4.0.0"
@@ -16478,7 +16789,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"node-dir@npm:^0.1.10":
+"node-dir@npm:^0.1.10, node-dir@npm:^0.1.17":
   version: 0.1.17
   resolution: "node-dir@npm:0.1.17"
   dependencies:
@@ -16847,6 +17158,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"npm-run-path@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "npm-run-path@npm:1.0.0"
+  dependencies:
+    path-key: ^1.0.0
+  checksum: ffabf15b6e4cb6f511a49cb9c824db67cd13198938988d18362fb62e793650b10d5e87695016625d3bed06fb9ab6a3b359265d97910d8971c8fdca845d3aaadd
+  languageName: node
+  linkType: hard
+
 "npm-run-path@npm:^2.0.0":
   version: 2.0.2
   resolution: "npm-run-path@npm:2.0.2"
@@ -17566,7 +17886,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"parse5@npm:6.0.1, parse5@npm:^6.0.0":
+"parse5-htmlparser2-tree-adapter@npm:^6.0.1":
+  version: 6.0.1
+  resolution: "parse5-htmlparser2-tree-adapter@npm:6.0.1"
+  dependencies:
+    parse5: ^6.0.1
+  checksum: 1848378b355d027915645c13f13f982e60502d201f53bc2067a508bf2dba4aac08219fc781dcd160167f5f50f0c73f58d20fa4fb3d90ee46762c20234fa90a6d
+  languageName: node
+  linkType: hard
+
+"parse5@npm:6.0.1, parse5@npm:^6.0.0, parse5@npm:^6.0.1":
   version: 6.0.1
   resolution: "parse5@npm:6.0.1"
   checksum: 7d569a176c5460897f7c8f3377eff640d54132b9be51ae8a8fa4979af940830b2b0c296ce75e5bd8f4041520aadde13170dbdec44889975f906098ea0002f4bd
@@ -17658,6 +17987,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"path-key@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "path-key@npm:1.0.0"
+  checksum: 41c4aa248d3b2e4f98b98c753b3721da7a25060cdce1ac95944ae19c71b7d85702b790558763c0371bab46269f40aa8b5ec4a3353954d0c05c8231c41dae9cf0
+  languageName: node
+  linkType: hard
+
 "path-key@npm:^2.0.0, path-key@npm:^2.0.1":
   version: 2.0.1
   resolution: "path-key@npm:2.0.1"
@@ -18412,6 +18748,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pseudomap@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "pseudomap@npm:1.0.2"
+  checksum: 856c0aae0ff2ad60881168334448e898ad7a0e45fe7386d114b150084254c01e200c957cf378378025df4e052c7890c5bd933939b0e0d2ecfcc1dc2f0b2991f5
+  languageName: node
+  linkType: hard
+
 "psl@npm:^1.1.28, psl@npm:^1.1.33":
   version: 1.8.0
   resolution: "psl@npm:1.8.0"
@@ -19098,6 +19441,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"recast@npm:^0.20.3, recast@npm:^0.20.4":
+  version: 0.20.5
+  resolution: "recast@npm:0.20.5"
+  dependencies:
+    ast-types: 0.14.2
+    esprima: ~4.0.0
+    source-map: ~0.6.1
+    tslib: ^2.0.1
+  checksum: 14c35115cd9965950724cb2968f069a247fa79ce890643ab6dc3795c705b363f7b92a45238e9f765387c306763be9955f72047bb9d15b5d60b0a55f9e7912d5a
+  languageName: node
+  linkType: hard
+
 "rechoir@npm:^0.7.0":
   version: 0.7.1
   resolution: "rechoir@npm:0.7.1"
@@ -19578,6 +19933,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rimraf@npm:~2.6.2":
+  version: 2.6.3
+  resolution: "rimraf@npm:2.6.3"
+  dependencies:
+    glob: ^7.1.3
+  bin:
+    rimraf: ./bin.js
+  checksum: 3ea587b981a19016297edb96d1ffe48af7e6af69660e3b371dbfc73722a73a0b0e9be5c88089fbeeb866c389c1098e07f64929c7414290504b855f54f901ab10
+  languageName: node
+  linkType: hard
+
 "ripemd160@npm:^2.0.0, ripemd160@npm:^2.0.1":
   version: 2.0.2
   resolution: "ripemd160@npm:2.0.2"
@@ -21129,6 +21495,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"temp@npm:^0.8.4":
+  version: 0.8.4
+  resolution: "temp@npm:0.8.4"
+  dependencies:
+    rimraf: ~2.6.2
+  checksum: f35bed78565355dfdf95f730b7b489728bd6b7e35071bcc6497af7c827fb6c111fbe9063afc7b8cbc19522a072c278679f9a0ee81e684aa2c8617cc0f2e9c191
+  languageName: node
+  linkType: hard
+
 "terminal-link@npm:^2.0.0":
   version: 2.1.1
   resolution: "terminal-link@npm:2.1.1"
@@ -21649,7 +22024,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0":
+"tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.2.0":
   version: 2.4.0
   resolution: "tslib@npm:2.4.0"
   checksum: 8c4aa6a3c5a754bf76aefc38026134180c053b7bd2f81338cb5e5ebf96fefa0f417bff221592bf801077f5bf990562f6264fecbc42cd3309b33872cb6fc3b113
@@ -21715,6 +22090,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"type-fest@npm:^0.13.1":
+  version: 0.13.1
+  resolution: "type-fest@npm:0.13.1"
+  checksum: e6bf2e3c449f27d4ef5d56faf8b86feafbc3aec3025fc9a5fbe2db0a2587c44714521f9c30d8516a833c8c506d6263f5cc11267522b10c6ccdb6cc55b0a9d1c4
+  languageName: node
+  linkType: hard
+
 "type-fest@npm:^0.18.0":
   version: 0.18.1
   resolution: "type-fest@npm:0.18.1"
@@ -22792,7 +23174,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"which@npm:^1.2.9, which@npm:^1.3.1":
+"which@npm:^1.2.8, which@npm:^1.2.9, which@npm:^1.3.1":
   version: 1.3.1
   resolution: "which@npm:1.3.1"
   dependencies:
@@ -22889,7 +23271,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"write-file-atomic@npm:^2.4.2":
+"write-file-atomic@npm:^2.3.0, write-file-atomic@npm:^2.4.2":
   version: 2.4.3
   resolution: "write-file-atomic@npm:2.4.3"
   dependencies:
@@ -23047,6 +23429,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yallist@npm:^2.1.2":
+  version: 2.1.2
+  resolution: "yallist@npm:2.1.2"
+  checksum: 9ba99409209f485b6fcb970330908a6d41fa1c933f75e08250316cce19383179a6b70a7e0721b89672ebb6199cc377bf3e432f55100da6a7d6e11902b0a642cb
+  languageName: node
+  linkType: hard
+
 "yallist@npm:^3.0.0, yallist@npm:^3.0.2, yallist@npm:^3.1.1":
   version: 3.1.1
   resolution: "yallist@npm:3.1.1"
@@ -23082,6 +23471,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yargs-parser@npm:^18.1.3":
+  version: 18.1.3
+  resolution: "yargs-parser@npm:18.1.3"
+  dependencies:
+    camelcase: ^5.0.0
+    decamelize: ^1.2.0
+  checksum: 60e8c7d1b85814594d3719300ecad4e6ae3796748b0926137bfec1f3042581b8646d67e83c6fc80a692ef08b8390f21ddcacb9464476c39bbdf52e34961dd4d9
+  languageName: node
+  linkType: hard
+
 "yargs-parser@npm:^21.0.0":
   version: 21.0.1
   resolution: "yargs-parser@npm:21.0.1"