[V6] Major-release (#2623)

* [V6] Deprecated Grid og ContentContainer (#2622)

* 🔥 Fjernet grid css

* 🔥 Fjernet grid tsx

* 🔥 Fjernet content-container fra systemet

* 🐛 la til deprecatePrefix-tag for stylelint

* 📝 Changeset

* Textarea: Fjern wrapper (#2635)

* [V6] Chat-props deprecation (#2631)

* 🎨 Satt opp codemod boilerplate for chat deprecation

* 🐛 v5 -> v6 i codemod

* 🧪 Tester for alias-import av chat

* 🧪 idempotent codemod-test

* 🔥 Fjernet deprecated props fra Chat

* 📝 Changeset

* 📝 Bedre advarsel i chat-codemod

* 📝 v6-migration update

* 🧪 Tester vanlig import av Chat

* 📝 Oppdatert tekster i codemod

* 🔥 Fjernet return fra removeProps

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

* [V6] 1440px breakpoint (#2632)

* ✨ La til nytt brekkpunkt 1440px

* 🎉 Bleed støtter 2xl breakpoint

* 🎉 Bleed box 2xl breakpoint

* 🎉 hgrid 2xl breakpoint

* 🎉 resterende primitives støtter 1440px

* 📝 tailwind migreringsdocs

* 🔥 Fjernet navno-mal fra chromatic snapshot

* 📝 Changeset

* 🐛 2xl hgrid css brakk

* 📝 Oppdatert changset med tailwind-ref

* Update @navikt/core/react/src/layout/bleed/Bleed.tsx

* Update @navikt/core/react/src/layout/bleed/Bleed.tsx

* 📝 Mer konsekvent story for breakpoints i box

* 🐛 JSDOC for Bleed matcher nå syntax

* [V6] Fjernet z-index-modal token  (#2637)

* 🔥 Fjernet zindex-modal token

* 📝 Oppdatert docs

* 📝 Changeset

* [V6] ErrorSummary magic (#2642)

* ♻️ Flyttet li-tag fra ErrorSummary-parent til child

* 🏷️ Bedre typer

* 🔒 Heading er nå required i ErrorSummary

* 🎨 Egen prop for ErrorSummary fokus

* 📝 Changeset

* 🎨 Bedre fokushåndtering i ErrorSummary

* ♻️ focusTarget -> focusTargetRef

* 📝 Fikset jsdoc

* 📝 Migreringstekst

* 📝 changeset

* 📝 Migration-text

* 📝 JSDoc-staving

* 📝 Oppdatert migreringsguide for z-index + tailwind

* 🐛 Fikset bruk av z-modal i tailwind

* 🔥 Fjernet openOnFocus-prop fra date

* [V6] Modal: strengere prop-typer (#2718)

* 🎨 SortState i Table har nå none tilgjengelig (#2726)

* [V6] Oppdatert bruk av action-farger (#2717)

* 💄 Button secondary hover

* 💄 Radio/Checkbox action-farger

* :WIP: combobox action-farger

* 🐛 Tilpasset hover-farge på checkbox i confirmationpanel

* 💄 copybutton hover-text action

* 💄 dropdown, helptext hover-text

* 💄 link og linkpanel actionsfarger

* 💄 Search action-farger

* 💄 select action-farger

* 💄 Stepper action

* 💄 Textarea action

* 💄 Textarea og textfield colors

* 🐛 Riktig hover-bakgrunn på combobox selected option

* 📝 Changeset

* 📝 changeset tokens

* 📝 Dokumentert nye tokens

* [V6] Native ESM-støtte 🎉  (#2677)

* 🎨 Fungerende cjs/esm bundle med use-client

* 🎨 Oppdatert dir-output i for esm

* ⬆️ Bump date-fns og react-day-picker

* 🎨 oppdatert date-fns imports

* 🐛 Endret bruk av reat-day-picker i monthpicker

* 🐛 Fikset rendring av button i Datepicker-row

* ♻️ Bruker date-fns imports ssom støtter v2 og v3

* ⬆️ Synced date-fns versions

* ✨ Astro testmiljø

* 📝 Changeset

* 🎨 Skriver packagejson med type for esm

* 🔥 Fjernet .yarn/* fra astro

* 🎨 La til .yarn i gitignore for astro

* ⏪ Bruker riktig ds-react versjon

* ⬆️ Lik tsconfig som ds-react i aksel-icons

* 🐛 La tilbake provernance

* 🐛 Undo Day/Row fix fra main

* 🔥 Fjernet mulighet til å laste date-fns v2

* 🔥 Fjernet fs-extra dependency

* 🐛 Fikset feil versjon på core/react

* [V6] React-pakker støtter nå native SSR ved å bruke `use-client` 🎉  (#2707)

* 🎉 use-client blir lagt til på export av ds-react og aksel-icons

* 🎉 La til nextjs med appdir for testing

* ⚡ Tom yarn.lock med i git

* 📝 changeset

* 📝 Oppdatert migration-guide

* Update @navikt/aksel-icons/config/index-template.js

* 🐛 Async-lasting av date-fns er nå v3 esm compliant

v3 av date-fns støtter ikke default export/import, noe som brakk async-lasting da vi brukte .default

* Search: Ekskluder 'type' fra SearchProps (#2736)

* 🎉 Ny token icon-action-hover

* 🔥 Fjernet v6-endringer for ErrorSummary. Endringer vil bli gjort i en senere major-versjon

* OverridableComponent: Fikset feil som tillot vilkårlige props (#2739)

* 🔥 Fjernet migration.md

---------

Co-authored-by: Halvor Haugan <[email protected]>

.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>
+);