Merge branch 'main' into form-border-bleed

.changeset/heavy-shoes-pay.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+Loader: Har nå riktig `ref`-type.

.eslintrc.js

@@ -39,6 +39,7 @@ module.exports = {
       files: ["**/*.ts?(x)"],
       extends: ["plugin:@typescript-eslint/recommended"],
       rules: {
+        "@typescript-eslint/no-shadow": ["error", { hoist: "all" }], // TODO: Consider { builtinGlobals: true }
         "@typescript-eslint/no-explicit-any": "off", // Temporary
       },
     },

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/aksel-icons
 
+## 5.7.4
+
+## 5.7.3
+
 ## 5.7.2
 
 ## 5.7.1

@navikt/aksel-icons/package.json

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

@navikt/aksel-stylelint/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/aksel-stylelint
 
+## 5.7.4
+
+## 5.7.3
+
 ## 5.7.2
 
 ## 5.7.1

@navikt/aksel-stylelint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-stylelint",
-  "version": "5.7.2",
+  "version": "5.7.4",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
   "repository": {
@@ -35,8 +35,8 @@
     "dev": "yarn watch:lint"
   },
   "devDependencies": {
-    "@navikt/ds-css": "^5.7.2",
-    "@navikt/ds-tokens": "^5.7.2",
+    "@navikt/ds-css": "^5.7.4",
+    "@navikt/ds-tokens": "^5.7.4",
     "@types/jest": "^29.0.0",
     "concurrently": "7.2.1",
     "copyfiles": "2.4.1",

@navikt/aksel-stylelint/src/rules/aksel-design-token-exists/index.ts

@@ -1,7 +1,7 @@
-import stylelint from "stylelint";
-import valueParser from "postcss-value-parser";
 import { readFileSync } from "node:fs";
 import { Node as PostCSSNode } from "postcss";
+import valueParser from "postcss-value-parser";
+import stylelint from "stylelint";
 
 import { isCustomProperty, tokenExists } from "../../utils";
 
@@ -34,7 +34,6 @@ export const messages = stylelint.utils.ruleMessages(ruleName, {
 });
 
 const checkDeclValue = (
-  controlledPrefixes: string[],
   value: string,
   postcssResult: stylelint.PostcssResult,
   rootNode: PostCSSNode
@@ -58,7 +57,6 @@ const checkDeclValue = (
 };
 
 const checkDeclProp = (
-  controlledPrefixes: string[],
   prop: string,
   postcssResult: stylelint.PostcssResult,
   rootNode: PostCSSNode
@@ -81,8 +79,8 @@ const checkDeclProp = (
 const ruleFunction: stylelint.Rule = () => {
   return (postcssRoot, postcssResult) => {
     postcssRoot.walkDecls((node) => {
-      checkDeclValue(controlledPrefixes, node.value, postcssResult, node);
-      checkDeclProp(controlledPrefixes, node.prop, postcssResult, node);
+      checkDeclValue(node.value, postcssResult, node);
+      checkDeclProp(node.prop, postcssResult, node);
     });
   };
 };

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

@@ -92,16 +92,6 @@ const tokenJsonFile = "./tokens.json";
 
 const allowedTokenNames = [];
 
-export const addTokens = (
-  tokenJSONFile: string,
-  allowedTokenNames: string[]
-) => {
-  const jsonFileBuffer = readFileSync(`${__dirname}/${tokenJSONFile}`);
-  const fileString = jsonFileBuffer.toString();
-  const flattened = flattenObject(JSON.parse(fileString));
-  flattened.forEach((token) => allowedTokenNames.push(token));
-};
-
 export const tokenExists = (
   controlledPrefixes: string[],
   inputToken: string
@@ -110,7 +100,6 @@ export const tokenExists = (
   if (!allowedTokenNames.length) {
     const cssFileBuffer = readFileSync(`${__dirname}/${tokenCSSFile}`);
     const cssFileString = cssFileBuffer.toString();
-
     valueParser(cssFileString).walk((node) => {
       if (
         node.type === "word" &&
@@ -121,7 +110,9 @@ export const tokenExists = (
       }
     });
 
-    addTokens(tokenJsonFile, allowedTokenNames);
+    const jsonFileBuffer = readFileSync(`${__dirname}/${tokenJsonFile}`);
+    const flattened = flattenObject(JSON.parse(jsonFileBuffer.toString()));
+    flattened.forEach((token) => allowedTokenNames.push(token));
   }
 
   return allowedTokenNames.includes(inputToken);

@navikt/aksel/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @navikt/aksel
 
+## 5.7.4
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.7.4
+
+## 5.7.3
+
+### Patch Changes
+
+- Updated dependencies [[`3d3e90760`](https://github.com/navikt/aksel/commit/3d3e9076088c5e72ed89fb97109b75dcf6e09d96), [`d8a4097c8`](https://github.com/navikt/aksel/commit/d8a4097c82ceee95bd216b36e1dc8eb99e75d7ee), [`a6b673386`](https://github.com/navikt/aksel/commit/a6b67338612b7944dc4e6b3d541244f521e94500)]:
+  - @navikt/ds-css@5.7.3
+
 ## 5.7.2
 
 ### Patch Changes

@navikt/aksel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel",
-  "version": "5.7.2",
+  "version": "5.7.4",
   "description": "Aksel command line interface. Handles css-imports, codemods and more",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -29,7 +29,7 @@
   },
   "homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
   "dependencies": {
-    "@navikt/ds-css": "5.7.2",
+    "@navikt/ds-css": "5.7.4",
     "axios": "1.3.6",
     "chalk": "4.1.0",
     "clipboardy": "^2.3.0",

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

@@ -111,9 +111,9 @@ export function getMigrationNames() {
 export function getMigrationString() {
   let str = "";
 
-  Object.entries(migrations).forEach(([version, migrations]) => {
+  Object.entries(migrations).forEach(([version, vMigrations]) => {
     str += `\n${chalk.underline(version)}\n`;
-    migrations.forEach((migration) => {
+    vMigrations.forEach((migration) => {
       str += `${chalk.blue(migration.value)}: ${migration.description}\n`;
     });
   });

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

@@ -13,10 +13,10 @@ export default function transformer(file, api) {
   function addMigrationTag(node) {
     const attributes = node.openingElement.attributes;
     const isMigrated = attributes.find(
-      (node) =>
-        node.type === "JSXAttribute" &&
-        node.name.name === "data-version" &&
-        node.value.value === "v1"
+      (attr) =>
+        attr.type === "JSXAttribute" &&
+        attr.name.name === "data-version" &&
+        attr.value.value === "v1"
     );
 
     if (!isMigrated) {
@@ -30,7 +30,7 @@ export default function transformer(file, api) {
   function addExplicitStandardProp(node) {
     const attributes = node.openingElement.attributes;
     const variant = attributes.find(
-      (node) => node.type === "JSXAttribute" && node.name.name === "size"
+      (attr) => attr.type === "JSXAttribute" && attr.name.name === "size"
     );
 
     if (!variant) {

@navikt/aksel/src/codemod/transforms/v2.0.0/update-js-tokens/update-js-tokens.ts

@@ -1,12 +1,12 @@
 import type { JSCodeshift } from "jscodeshift";
+import { tokens } from "../../../tokens-map.mjs";
 import {
   getImportSpecifier,
   getImportSpecifierName,
   renameImportSpecifier,
 } from "../../../utils/imports";
-import { translateToken } from "../../../utils/translate-token";
-import { tokens } from "../../../tokens-map.mjs";
 import { getLineTerminator } from "../../../utils/lineterminator";
+import { translateToken } from "../../../utils/translate-token";
 
 /**
  * @param {import('jscodeshift').FileInfo} file
@@ -29,9 +29,9 @@ export default function transformer(file: JSCodeshift, api) {
     return src;
   }
 
-  tokens.forEach((x) => {
-    const name = translateToken(x[0], "js");
-    const out = translateToken(x[1], "js");
+  tokens.forEach((token) => {
+    const name = translateToken(token[0], "js");
+    const out = translateToken(token[1], "js");
 
     let foundName: string = "";
 

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @navikt/ds-css
 
+## 5.7.4
+
+## 5.7.3
+
+### Patch Changes
+
+- Ny spacing token på 0.375rem ([#2370](https://github.com/navikt/aksel/pull/2370))
+
+- Select: Tokenstøtte for å endre chevronfarge sammen med tekst ([#2383](https://github.com/navikt/aksel/pull/2383))
+
+- HelpText: Knapp er visuelt mindre. Klikkflate er fortsatt 24px ([#2376](https://github.com/navikt/aksel/pull/2376))
+
 ## 5.7.2
 
 ## 5.7.1

@navikt/core/css/chips.css

@@ -160,11 +160,11 @@
 }
 
 .navds-chips--icon-left {
-  padding-left: 0.375rem;
+  padding-left: var(--a-spacing-1-alt);
 }
 
 .navds-chips--icon-right {
-  padding-right: 0.375rem;
+  padding-right: var(--a-spacing-1-alt);
 }
 
 .navds-chips--small .navds-chips--icon-right {

@navikt/core/css/copybutton.css

@@ -175,7 +175,7 @@
 }
 
 .navds-copybutton--small > .navds-copybutton__content {
-  gap: 0.375rem;
+  gap: var(--a-spacing-1-alt);
 }
 
 .navds-copybutton--xsmall > .navds-copybutton__content {

@navikt/core/css/form/radio-checkbox.css

@@ -61,7 +61,7 @@
 
 .navds-checkbox--small > .navds-checkbox__label,
 .navds-radio--small > .navds-radio__label {
-  padding: 0.375rem 0;
+  padding: var(--a-spacing-1-alt) 0;
 }
 
 .navds-checkbox--small > .navds-checkbox__label::before,
@@ -104,7 +104,7 @@
   content: "";
   position: absolute;
   top: 50%;
-  transform: translate(0.375rem, -50%);
+  transform: translate(var(--a-spacing-1-alt), -50%);
   background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
   width: 0.75rem;
   height: 0.25rem;
@@ -129,7 +129,7 @@
   color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
   position: absolute;
   height: 1.5rem;
-  transform: translate(0.375rem);
+  transform: translate(var(--a-spacing-1-alt));
   pointer-events: none;
 }
 

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

@@ -43,6 +43,7 @@
   right: var(--a-spacing-2);
   pointer-events: none;
   align-self: center;
+  color: var(--ac-select-text, var(--a-text-default));
 }
 
 .navds-form-field--small .navds-select__input {
@@ -51,7 +52,7 @@
 }
 
 .navds-form-field--small .navds-select__chevron {
-  right: 0.375rem;
+  right: var(--a-spacing-1-alt);
 }
 
 /**

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

@@ -62,7 +62,7 @@
 }
 
 .navds-form-field--small .navds-textarea__input {
-  padding: 0.375rem;
+  padding: var(--a-spacing-1-alt);
 }
 
 .navds-form-field--small .navds-textarea--counter.navds-textarea__input {

@navikt/core/css/help-text.css

@@ -1,6 +1,5 @@
 .navds-help-text__button {
   margin: 0;
-  padding: 0;
   border: 0;
   cursor: pointer;
   background-color: transparent;
@@ -9,17 +8,19 @@
   justify-content: center;
   align-items: center;
   color: var(--ac-help-text-button-color, var(--a-surface-action));
-  font-size: 1.5rem;
+  font-size: 1.25rem;
+  padding: calc(var(--a-spacing-1) / 2);
 }
 
 .navds-help-text__button:focus-visible {
-  box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
+  outline: none;
+  box-shadow: 0 0 0 1px var(--a-border-focus), inset 0 0 0 1px var(--a-border-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-help-text__button:focus {
     outline: none;
-    box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
+    box-shadow: 0 0 0 1px var(--a-border-focus), inset 0 0 0 1px var(--a-border-focus);
   }
 }
 

@navikt/core/css/package.json

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

@navikt/core/css/pagination.css

@@ -52,8 +52,7 @@
 }
 
 .navds-pagination--small .navds-pagination__prev-next:where(.navds-pagination--prev-next--with-text) {
-  padding-left: 0.375rem;
-  padding-right: 0.375rem;
+  padding-inline: var(--a-spacing-1-alt);
 }
 
 .navds-pagination--xsmall .navds-pagination__prev-next:where(.navds-pagination--prev-next--with-text) {