[V6] Major-release

.changeset/few-apples-divide.md

@@ -0,0 +1,6 @@
+---
+"@navikt/ds-react": major
+"@navikt/aksel": major
+---
+
+Chat: Fjernet deprecated props `backgroundColor` og `avatarBgColor`. Bruk prop `variant` som erstatning.

.changeset/happy-jeans-juggle.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": major
+---
+
+Search: Fjern 'type' fra SearchProps

.changeset/large-shrimps-brush.md

@@ -0,0 +1,8 @@
+---
+"@navikt/ds-tokens": major
+"@navikt/ds-react": major
+"@navikt/ds-css": major
+"@navikt/ds-tailwind": major
+---
+
+Tokens: La til nytt brekkpunkt `2xl` for `1440px`. Alle primitives er oppdatert for å reflektere oppdateringen. Brukere av Tailwind vil måtte sjekke at overskriving av `screen: "2xl"` ikke brekker app.

.changeset/late-beds-rhyme.md

@@ -0,0 +1,6 @@
+---
+"@navikt/aksel-icons": major
+"@navikt/ds-react": major
+---
+
+ESM: ds-react og aksel-icons støtter nå native ESM 🎉

.changeset/light-ads-report.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": major
+---
+
+OverridableComponent: Fikset feil som tillot vilkårlige props

.changeset/loud-boxes-drop.md

@@ -0,0 +1,6 @@
+---
+"@navikt/ds-react": major
+"@navikt/ds-css": major
+---
+
+Grid, ContentContainer: Komponenter er fjernet fra systemet. [Se migreringsguide](https://aksel.nav.no/grunnleggende/kode/migrering#dd2cfa9fb1d1).

.changeset/ninety-bulldogs-swim.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": major
+---
+
+Table: SortState.direction har nå `none` tilgjengelig: `"ascending" | "descending" | "none"`

.changeset/tall-turtles-flow.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-tokens": major
+---
+
+Tokens: Fjernet token `--a-z-index-modal` da den ikke lengre blir konsumert i systemet.

.changeset/ten-parents-drop.md

@@ -0,0 +1,6 @@
+---
+"@navikt/aksel-icons": minor
+"@navikt/ds-react": minor
+---
+
+SSR: ds-react og aksel-icons støtter nå `use-client` og kan brukes i nextjs app-router uten lokal re-eksportering.

.changeset/three-chefs-notice.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-css": major
+---
+
+CSS: Oppdatert bruk av action-farger i systemet. Dette påvirker komponentene: Button, CopyButton, Dropdown, Combobox, ConfirmationPanel, Radio, Checkbox, Search, Select, TextField, Textarea, Helptext, LinkPanel, Link, ReadMore, Stepper og Tabs. Endringen skal ikke brekke noe så lenge man ikke har overskrevet farger manuelt.

.changeset/three-chefs-notice2.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-css": major
+---
+
+Tokens: Nye tokens `--a-text-action-hover`,`--a-icon-action-hover` og `--a-border-action-hover`

.changeset/tiny-trainers-float.md

@@ -0,0 +1,7 @@
+---
+"@navikt/aksel-stylelint": major
+"@navikt/ds-react": major
+"@navikt/ds-css": major
+---
+
+Textarea: Fjernet div med klassen navds-textarea\_\_wrapper

.changeset/tricky-zoos-clap.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": major
+---
+
+Modal: Strengere prop-typer

@navikt/aksel-icons/config/template.js

@@ -25,6 +25,7 @@ const template = (variables, { tpl }) => {
   };
 
   return tpl`
+"use client";
 ${imports};
 
 ${variables.interfaces};

@navikt/aksel-icons/package.json

@@ -20,24 +20,28 @@
     "access": "public",
     "provenance": true
   },
-  "sideEffects": [
-    "*.svg"
-  ],
+  "sideEffects": false,
   "license": "MIT",
   "main": "./dist/react/cjs/index.js",
   "module": "./dist/react/esm/index.js",
   "typings": "./dist/react/esm/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/react/esm/index.d.ts",
-      "import": "./dist/react/esm/index.js",
-      "require": "./dist/react/cjs/index.js"
+      "import": {
+        "types": "./dist/react/esm/index.d.ts",
+        "default": "./dist/react/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/react/cjs/index.d.ts",
+        "default": "./dist/react/cjs/index.js"
+      }
     },
-    "./svg/*.svg": "./dist/svg/*.svg",
     "./metadata": {
       "types": "./dist/metadata.d.ts",
       "default": "./dist/metadata.js"
-    }
+    },
+    "./svg/*.svg": "./dist/svg/*.svg",
+    "./package.json": "./package.json"
   },
   "typesVersions": {
     "*": {
@@ -55,7 +59,8 @@
     "parse-svg": "node -e 'require(\"./config/parse-svg.js\").main()'",
     "copy": "copyfiles util/* src",
     "update-metadata": "node config/metadata.js",
-    "build": "yarn copy && yarn create-icons && concurrently \"tsc\" \"tsc -p tsconfig.esm.json\" && node config/cleanTypes.js && yarn update-metadata && yarn parse-svg",
+    "write-packagejson": "echo '{\"type\": \"module\"}' > dist/react/esm/package.json",
+    "build": "yarn copy && yarn create-icons && concurrently \"tsc\" \"tsc -p tsconfig.esm.json && tsc-alias -p tsconfig.esm.json && yarn write-packagejson\" && node config/cleanTypes.js && yarn update-metadata && yarn parse-svg",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest",
     "fetch-new:icons": "node config/figma/index.mjs",
     "zip:icons": "node config/zip.js"
@@ -75,6 +80,7 @@
     "lodash.startcase": "4.4.0",
     "react": "^18.0.0",
     "rehype-parse": "8.0.4",
+    "tsc-alias": "1.8.8",
     "typescript": "^5.1.6",
     "unified": "10.1.2"
   },

@navikt/aksel-icons/tsconfig.esm.json

@@ -3,7 +3,11 @@
   "compilerOptions": {
     "outDir": "./dist/react/esm",
     "module": "esnext",
-    "sourceMap": false,
+    "sourceMap": true,
     "declaration": true
+  },
+  "tsc-alias": {
+    "resolveFullPaths": true,
+    "verbose": false
   }
 }

@navikt/aksel-icons/tsconfig.json

@@ -3,7 +3,9 @@
   "compilerOptions": {
     "outDir": "./dist/react/cjs",
     "module": "commonjs",
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "declaration": true,
+    "sourceMap": true
   },
   "exclude": ["./util", "./__tests__", "**/*.stories.*"],
   "include": ["./src"]

@navikt/aksel-stylelint/src/deprecations.ts

@@ -50,4 +50,14 @@ export const deprecations: DeprecatedList = [
     message:
       "There is no 1:1 replacement for this, the size will depend on the 'poster' prop and the viewport width",
   },
+  {
+    classes: ["navds-grid", "navds-content-container"],
+    deprecatePrefix: true,
+    message:
+      "Components were replaced by `HGrid` and `Page.Block` in version 6",
+  },
+  {
+    classes: ["navds-textarea__wrapper"],
+    message: "Removed in v6.0.0",
+  },
 ];

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

@@ -87,6 +87,16 @@ export const migrations: {
       path: "v4.0.0/date/date",
     },
   ],
+  "v6.0.0": [
+    {
+      description:
+        "Removes `backgroundColor` and `avatarBgColor` properties from `Chat` and `Chat.Bubble`",
+      value: "v6-chat",
+      path: "v6.0.0/chat/chat",
+      warning:
+        "Remember to update use of `variant`-prop to match previous use of colors. If needed the component exposes css-variables for custom overrides",
+    },
+  ],
 };
 
 export function getMigrationPath(str: string) {

@navikt/aksel/src/codemod/transforms/v6.0.0/chat/chat.ts

@@ -0,0 +1,75 @@
+import { getLineTerminator } from "../../../utils/lineterminator";
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  let localName = "Chat";
+
+  const root = j(file.source);
+
+  /* Finds used name for Chat 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 === "Chat" && x.local.name !== x.imported.name) {
+          localName = x.local.name;
+        }
+      });
+    });
+
+  root
+    .find(j.JSXElement, {
+      openingElement: {
+        name: {
+          name: localName,
+        },
+      },
+    })
+    .forEach((path) => {
+      j(path)
+        .find(j.JSXAttribute, {
+          name: {
+            name: "backgroundColor",
+          },
+        })
+        .remove();
+      j(path)
+        .find(j.JSXAttribute, {
+          name: {
+            name: "avatarBgColor",
+          },
+        })
+        .remove();
+    });
+
+  root
+    .find(j.JSXElement, {
+      openingElement: {
+        name: {
+          type: "JSXMemberExpression",
+          object: {
+            name: localName,
+          },
+          property: {
+            name: "Bubble",
+          },
+        },
+      },
+    })
+    .forEach((path) => {
+      j(path)
+        .find(j.JSXAttribute, {
+          name: {
+            name: "backgroundColor",
+          },
+        })
+        .remove();
+    });
+
+  return root.toSource(getLineTerminator(file.source));
+}

@navikt/aksel/src/codemod/transforms/v6.0.0/chat/tests/chat.test.ts

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

@navikt/aksel/src/codemod/transforms/v6.0.0/chat/tests/idempotent.input.js

@@ -0,0 +1,17 @@
+import {
+  Chat,
+  Button,
+} from "@navikt/ds-react";
+
+export const Demo = () => (
+  <Chat avatar="ON" name="Ola Normann" timestamp="01.01.21 14:00">
+    <Chat.Bubble>
+      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+    </Chat.Bubble>
+    <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</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/v6.0.0/chat/tests/idempotent.output.js

@@ -0,0 +1,17 @@
+import {
+  Chat,
+  Button,
+} from "@navikt/ds-react";
+
+export const Demo = () => (
+  <Chat avatar="ON" name="Ola Normann" timestamp="01.01.21 14:00">
+    <Chat.Bubble>
+      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+    </Chat.Bubble>
+    <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</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/v6.0.0/chat/tests/import-alias.input.js

@@ -0,0 +1,17 @@
+import {
+  Chat as DsChat,
+  Button,
+} from "@navikt/ds-react";
+
+export const Demo = () => (
+  <DsChat avatar="ON" name="Ola Normann" backgroundColor="#321" timestamp="01.01.21 14:00" avatarBgColor="#123" >
+    <DsChat.Bubble>
+      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+    </DsChat.Bubble>
+    <DsChat.Bubble backgroundColor="#fff">Tempor fugiat amet eu sint in in ullamco.</DsChat.Bubble>
+    <DsChat.Bubble backgroundColor="#111">
+      Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+      labore nisi ut.
+    </DsChat.Bubble>
+  </DsChat>
+);

@navikt/aksel/src/codemod/transforms/v6.0.0/chat/tests/import-alias.output.js

@@ -0,0 +1,17 @@
+import {
+  Chat as DsChat,
+  Button,
+} from "@navikt/ds-react";
+
+export const Demo = () => (
+  <DsChat avatar="ON" name="Ola Normann" timestamp="01.01.21 14:00">
+    <DsChat.Bubble>
+      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+    </DsChat.Bubble>
+    <DsChat.Bubble>Tempor fugiat amet eu sint in in ullamco.</DsChat.Bubble>
+    <DsChat.Bubble>
+      Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+      labore nisi ut.
+    </DsChat.Bubble>
+  </DsChat>
+);

@navikt/aksel/src/codemod/transforms/v6.0.0/chat/tests/import.input.js

@@ -0,0 +1,17 @@
+import {
+  Chat,
+  Button,
+} from "@navikt/ds-react";
+
+export const Demo = () => (
+  <Chat avatar="ON" name="Ola Normann" backgroundColor="#321" timestamp="01.01.21 14:00" avatarBgColor="#123" >
+    <Chat.Bubble>
+      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+    </Chat.Bubble>
+    <Chat.Bubble backgroundColor="#fff">Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
+    <Chat.Bubble backgroundColor="#111">
+      Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+      labore nisi ut.
+    </Chat.Bubble>
+  </Chat>
+);