Version Packages (#2381 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
🎨 Mindre Helptext variant (#2376 )
2026-10-13 01:02:02 +00:00 · 2023-10-17 16:30:38 +02:00 · 2023-10-17 16:23:14 +02:00 · 2023-10-17 16:05:22 +02:00 · 2023-10-17 15:11:41 +02:00 · 2023-10-17 14:55:53 +02:00
79 changed files with 952 additions and 1022 deletions
@@ -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
      },
    },
@@ -1,5 +1,7 @@
 # @navikt/aksel-icons

+## 5.7.3
+
 ## 5.7.2

 ## 5.7.1
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-icons",
-  "version": "5.7.2",
+  "version": "5.7.3",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/ikoner",
  "repository": {
@@ -1,5 +1,7 @@
 # @navikt/aksel-stylelint

+## 5.7.3
+
 ## 5.7.2

 ## 5.7.1
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-stylelint",
-  "version": "5.7.2",
+  "version": "5.7.3",
  "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.3",
+    "@navikt/ds-tokens": "^5.7.3",
    "@types/jest": "^29.0.0",
    "concurrently": "7.2.1",
    "copyfiles": "2.4.1",
@@ -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);
    });
  };
 };
@@ -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);
@@ -1,5 +1,12 @@
 # @navikt/aksel

+## 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
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel",
-  "version": "5.7.2",
+  "version": "5.7.3",
  "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.3",
    "axios": "1.3.6",
    "chalk": "4.1.0",
    "clipboardy": "^2.3.0",
@@ -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`;
    });
  });
@@ -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) {
@@ -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 = "";

@@ -1,5 +1,15 @@
 # @navikt/ds-css

+## 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
@@ -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 {
@@ -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 {
@@ -59,7 +59,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,
@@ -101,7 +101,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;
@@ -126,7 +126,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;
 }

@@ -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);
 }

 /**
@@ -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 {
@@ -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);
  }
 }

@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "5.7.2",
+  "version": "5.7.3",
  "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.3",
    "cssnano": "6.0.0",
    "fast-glob": "3.2.11",
    "lodash": "4.17.21",
@@ -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) {
@@ -37,7 +37,7 @@
 }

 .navds-tabs--small .navds-tabs__scroll-button {
-  padding: 0.375rem var(--a-spacing-4);
+  padding: var(--a-spacing-1-alt) var(--a-spacing-4);
  width: 2rem;
 }

@@ -93,7 +93,7 @@

 .navds-tabs__tab--small {
  min-height: 2rem;
-  padding: 0.375rem var(--a-spacing-4);
+  padding: var(--a-spacing-1-alt) var(--a-spacing-4);
 }

 .navds-tabs__tab-icon--top,
@@ -11,7 +11,7 @@

 .navds-tag--small {
  min-height: 1.5rem;
-  padding: 0 0.375rem;
+  padding: 0 var(--a-spacing-1-alt);
 }

 .navds-tag--xsmall {
@@ -1,5 +1,17 @@
 # @navikt/ds-react

+## 5.7.3
+
+### Patch Changes
+
+- Forms: Fikset bug der size='small' ikke oppdaterte typografi. ([#2372](https://github.com/navikt/aksel/pull/2372))
+
+- HelpText: Knapp er visuelt mindre. Klikkflate er fortsatt 24px ([#2376](https://github.com/navikt/aksel/pull/2376))
+
+- Updated dependencies [[`3d3e90760`](https://github.com/navikt/aksel/commit/3d3e9076088c5e72ed89fb97109b75dcf6e09d96)]:
+  - @navikt/ds-tokens@5.7.3
+  - @navikt/aksel-icons@5.7.3
+
 ## 5.7.2

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "5.7.2",
+  "version": "5.7.3",
  "description": "Aksel react-components for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -38,8 +38,8 @@
  },
  "dependencies": {
    "@floating-ui/react": "0.25.4",
-    "@navikt/aksel-icons": "^5.7.2",
-    "@navikt/ds-tokens": "^5.7.2",
+    "@navikt/aksel-icons": "^5.7.3",
+    "@navikt/ds-tokens": "^5.7.3",
    "@radix-ui/react-tabs": "1.0.0",
    "@radix-ui/react-toggle-group": "1.0.0",
    "clsx": "^1.2.1",
@@ -1,24 +1,12 @@
+import { Meta } from "@storybook/react";
 import React, { useState } from "react";
 import { Chips } from ".";

-export default {
+const meta: Meta<typeof Chips> = {
  title: "ds-react/Chips",
  component: Chips,
-  argTypes: {
-    type: {
-      control: {
-        type: "radio",
-        options: ["toggle", "removable"],
-      },
-    },
-    size: {
-      control: {
-        type: "radio",
-        options: ["medium", "small"],
-      },
-    },
-  },
 };
+export default meta;

 const options = ["Norsk", "Dansk", "Svensk", "Tysk", "Spansk"];

@@ -61,6 +49,16 @@ export const Default = (props) => {
    </Chips>
  );
 };
+Default.argTypes = {
+  type: {
+    control: { type: "radio" },
+    options: ["toggle", "removable"],
+  },
+  size: {
+    control: { type: "radio" },
+    options: ["medium", "small"],
+  },
+};

 export const Toggle = () => {
  const [selected, setSelected] = useState<number[]>([2, 4]);
@@ -97,17 +97,17 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
    const mode = rest.mode ?? ("single" as any);

    /**
-     * @param selected Date | Date[] | DateRange | undefined
+     * @param newSelected Date | Date[] | DateRange | undefined
     */
-    const handleSelect = (selected) => {
-      setSelectedDates(selected);
+    const handleSelect = (newSelected) => {
+      setSelectedDates(newSelected);

      if (rest.mode === "single") {
-        selected && (onClose?.() ?? setOpen(false));
+        newSelected && (onClose?.() ?? setOpen(false));
      } else if (rest.mode === "range") {
-        selected?.from && selected?.to && (onClose?.() ?? setOpen(false));
+        newSelected?.from && newSelected?.to && (onClose?.() ?? setOpen(false));
      }
-      rest?.onSelect?.(selected);
+      rest?.onSelect?.(newSelected);
    };

    return (
@@ -71,11 +71,11 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
    const mode = rest.mode ?? ("single" as any);

    /**
-     * @param selected Date | Date[] | DateRange | undefined
+     * @param newSelected Date | Date[] | DateRange | undefined
     */
-    const handleSelect = (selected) => {
-      setSelectedDates(selected);
-      onSelect?.(selected);
+    const handleSelect = (newSelected) => {
+      setSelectedDates(newSelected);
+      onSelect?.(newSelected);
    };

    return (
@@ -164,9 +164,10 @@ export const useDatepicker = (
  const [inputValue, setInputValue] = useState(defaultInputValue);

  const handleOpen = useCallback(
-    (open: boolean) => {
-      setOpen(open);
-      open && setMonth(selectedDay ?? defaultSelected ?? defaultMonth ?? today);
+    (newOpen: boolean) => {
+      setOpen(newOpen);
+      newOpen &&
+        setMonth(selectedDay ?? defaultSelected ?? defaultMonth ?? today);
    },
    [defaultMonth, defaultSelected, selectedDay, today]
  );
@@ -310,7 +311,7 @@ export const useDatepicker = (

  const datepickerProps = {
    month,
-    onMonthChange: (month) => setMonth(month),
+    onMonthChange: setMonth,
    onDayClick: handleDayClick,
    selected: selectedDay ?? new Date("Invalid date"),
    locale: _locale,
@@ -161,9 +161,10 @@ export const useMonthpicker = (
  const [inputValue, setInputValue] = useState(defaultInputValue);

  const handleOpen = useCallback(
-    (open: boolean) => {
-      setOpen(open);
-      open && setYear(selectedMonth ?? defaultSelected ?? defaultYear ?? today);
+    (newOpen: boolean) => {
+      setOpen(newOpen);
+      newOpen &&
+        setYear(selectedMonth ?? defaultSelected ?? defaultYear ?? today);
    },
    [defaultSelected, defaultYear, selectedMonth, today]
  );
@@ -1,5 +1,5 @@
 import differenceInCalendarDays from "date-fns/differenceInCalendarDays";
-import isBefore from "date-fns/isBefore";
+import checkIsBefore from "date-fns/isBefore";
 import isWeekend from "date-fns/isWeekend";
 import React, { useRef, useState } from "react";
 import { DateRange, isMatch } from "react-day-picker";
@@ -382,7 +382,7 @@ export const useRangeDatepicker = (
    const prevToRange =
      !selectedRange?.from && selectedRange?.to ? selectedRange?.to : range?.to;

-    const resetTo = isBefore(prevToRange, range?.from);
+    const resetTo = checkIsBefore(prevToRange, range?.from);

    range?.from
      ? setFromInputValue(
@@ -535,7 +535,7 @@ export const useRangeDatepicker = (

  const datepickerProps = {
    month,
-    onMonthChange: (month) => setMonth(month),
+    onMonthChange: setMonth,
    onSelect: handleSelect,
    selected: selectedRange,
    locale: _locale,
@@ -1,14 +1,14 @@
 import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
+import { isAfter, isBefore } from "date-fns";
 import setYear from "date-fns/setYear";
 import startOfMonth from "date-fns/startOfMonth";
 import startOfYear from "date-fns/startOfYear";
 import React from "react";
 import { useDayPicker } from "react-day-picker";
-import { useSharedMonthContext } from "../context";
-import { labelNextYear, labelPrevYear } from "../utils";
-import { isAfter, isBefore } from "date-fns";
 import { Button } from "../../button";
 import { Select } from "../../form/Select";
+import { useSharedMonthContext } from "../context";
+import { labelNextYear, labelPrevYear } from "../utils";

 export const MonthCaption = () => {
  const {
@@ -24,9 +24,9 @@ export const MonthCaption = () => {

  if (hasDropdown && fromDate && toDate) {
    const fromYear = fromDate.getFullYear();
-    const toYear = toDate.getFullYear();
-    for (let year = fromYear; year <= toYear; year++) {
-      years.push(setYear(startOfYear(new Date()), year));
+    const toDateYear = toDate.getFullYear();
+    for (let currYear = fromYear; currYear <= toDateYear; currYear++) {
+      years.push(setYear(startOfYear(new Date()), currYear));
    }

    if (!years.map((x) => x.getFullYear()).includes(year.getFullYear())) {
@@ -75,9 +75,9 @@ export const MonthCaption = () => {
          onChange={handleYearChange}
          className="navds-date__caption__year"
        >
-          {years.map((year) => (
-            <option key={year.getFullYear()} value={year.getFullYear()}>
-              {formatYearCaption(year, { locale })}
+          {years.map((yearOpt) => (
+            <option key={yearOpt.getFullYear()} value={yearOpt.getFullYear()}>
+              {formatYearCaption(yearOpt, { locale })}
            </option>
          ))}
        </Select>
@@ -1,13 +1,12 @@
 /* https://github.com/gpbl/react-day-picker/blob/main/src/components/Table/utils/getMonthWeeks.test.ts */
-import { nb, enGB } from "date-fns/locale";
+import { enGB, nb } from "date-fns/locale";

 import { getMonthWeeks } from "../get-month-weeks";

 describe('when using the "nB" locale', () => {
  const locale = nb;
  describe("when getting the weeks for January 2022", () => {
-    const date = new Date(2022, 0);
-    const weeks = getMonthWeeks(date, { locale });
+    const weeks = getMonthWeeks(new Date(2022, 0), { locale });
    test("the first week should be the last of the previous year", () => {
      const weekNumbers = weeks.map((week) => week.weekNumber);
      expect(weekNumbers[0]).toEqual(52);
@@ -29,8 +28,10 @@ describe('when using the "enGB" locale', () => {
  describe("when using fixed weeks", () => {
    const useFixedWeeks = true;
    describe("when getting the weeks for December 2022", () => {
-      const date = new Date(2022, 11);
-      const weeks = getMonthWeeks(date, { useFixedWeeks, locale });
+      const weeks = getMonthWeeks(new Date(2022, 11), {
+        useFixedWeeks,
+        locale,
+      });
      test("should return 48 - 1 week numbers", () => {
        const weekNumbers = weeks.map((week) => week.weekNumber);
        const expectedResult = [48, 49, 50, 51, 52, 1];
@@ -67,8 +68,10 @@ describe('when using the "nb" locale', () => {
  describe("when using fixed weeks", () => {
    const useFixedWeeks = true;
    describe("when getting the weeks for December 2022", () => {
-      const date = new Date(2022, 11);
-      const weeks = getMonthWeeks(date, { useFixedWeeks, locale });
+      const weeks = getMonthWeeks(new Date(2022, 11), {
+        useFixedWeeks,
+        locale,
+      });
      test("should return 48 - 1 week numbers", () => {
        const weekNumbers = weeks.map((week) => week.weekNumber);
        const expectedResult = [48, 49, 50, 51, 52, 1];
@@ -15,27 +15,27 @@ export const nextEnabled = (
  const currentIndex = currentMonth.getMonth();

  if (key === "Home") {
-    const nextEnabled = nextOnRow(
+    const nextDate = nextOnRow(
      currentIndex,
      months,
      yearState,
      disabled,
      "home"
    );
-    if (nextEnabled) {
-      return nextEnabled;
+    if (nextDate) {
+      return nextDate;
    }
  }
  if (key === "End") {
-    const nextEnabled = nextOnRow(
+    const nextDate = nextOnRow(
      currentIndex,
      months,
      yearState,
      disabled,
      "end"
    );
-    if (nextEnabled) {
-      return nextEnabled;
+    if (nextDate) {
+      return nextDate;
    }
  }
  if (key === "PageUp") {
@@ -136,7 +136,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
            className={cl(
              "navds-select__input",
              "navds-body-short",
-              `navds-body--${size ?? "medium"}`
+              `navds-body-short--${size ?? "medium"}`
            )}
            size={htmlSize}
          >
@@ -116,7 +116,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
          className={cl(
            "navds-text-field__input",
            "navds-body-short",
-            `navds-body-${size ?? "medium"}`
+            `navds-body-short--${size ?? "medium"}`
          )}
          size={htmlSize}
        />
@@ -162,7 +162,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
            className={cl(
              "navds-textarea__input",
              "navds-body-short",
-              `navds-body-${size ?? "medium"}`,
+              `navds-body-short--${size ?? "medium"}`,
              {
                "navds-textarea--counter": hasMaxLength,
              }
@@ -176,7 +176,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
          inputClassName,
          "navds-combobox__input",
          "navds-body-short",
-          `navds-body-${size}`
+          `navds-body-short--${size}`
        )}
      />
    );
@@ -8,8 +8,8 @@ import React, {
  useRef,
  useState,
 } from "react";
-import { useFormField, FormFieldType } from "../../useFormField";
 import { useClientLayoutEffect } from "../../../util";
+import { FormFieldType, useFormField } from "../../useFormField";

 interface InputContextType extends FormFieldType {
  clearInput: (event: React.PointerEvent | React.KeyboardEvent) => void;
@@ -63,10 +63,10 @@ export const InputContextProvider = ({ children, value: props }) => {

  const onChange = useCallback(
    (event: ChangeEvent<HTMLInputElement>) => {
-      const value = event.currentTarget.value;
-      externalValue ?? setInternalValue(value);
+      const newValue = event.currentTarget.value;
+      externalValue ?? setInternalValue(newValue);
      externalOnChange?.(event);
-      setSearchTerm(value);
+      setSearchTerm(newValue);
    },
    [externalValue, externalOnChange]
  );
@@ -7,8 +7,8 @@ import React, {
 } from "react";
 import usePrevious from "../../../util/usePrevious";
 import { useInputContext } from "../Input/inputContext";
-import { ComboboxProps } from "../types";
 import { useCustomOptionsContext } from "../customOptionsContext";
+import { ComboboxProps } from "../types";

 type SelectedOptionsContextType = {
  addSelectedOption: (option: string) => void;
@@ -71,8 +71,8 @@ export const SelectedOptionsProvider = ({
        allowNewValues && addCustomOption(option);
        !isMultiSelect && setSelectedOptions([]);
      } else if (isMultiSelect) {
-        setSelectedOptions((prevSelectedOptions) => [
-          ...prevSelectedOptions,
+        setSelectedOptions((oldSelectedOptions) => [
+          ...oldSelectedOptions,
          option,
        ]);
      } else {
@@ -97,8 +97,8 @@ export const SelectedOptionsProvider = ({
      if (isCustomOption) {
        removeCustomOption(option);
      } else {
-        setSelectedOptions((prevSelectedOptions) =>
-          prevSelectedOptions.filter(
+        setSelectedOptions((oldSelectedOptions) =>
+          oldSelectedOptions.filter(
            (selectedOption) => selectedOption !== option
          )
        );
@@ -212,7 +212,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
                `navds-search__input--${variant}`,
                "navds-text-field__input",
                "navds-body-short",
-                `navds-body-${size}`
+                `navds-body-short--${size}`
              )}
              {...(htmlSize ? { size: Number(htmlSize) } : {})}
            />
@@ -1,52 +1,36 @@
-import { Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { Textarea } from "../index";
-export default {
+
+const meta: Meta<typeof Textarea> = {
  title: "ds-react/Textarea",
  component: Textarea,
-  argTypes: {
-    size: {
-      control: {
-        type: "radio",
-        options: ["medium", "small"],
-      },
-    },
-    description: {
-      type: "string",
-    },
-    error: {
-      type: "string",
-    },
-    hideLabel: {
-      type: "boolean",
-    },
-    disabled: {
-      type: "boolean",
-    },
-    maxRows: {
-      type: "number",
-    },
-    minRows: {
-      type: "number",
-    },
-  },
-} as Meta;
+};
+export default meta;

-export const Default = {
+export const Default: StoryObj<typeof Textarea> = {
  render: (props) => {
-    return (
-      <Textarea
-        {...props}
-        maxLength={props?.maxLength ?? 100}
-        label="Ipsum enim quis culpa"
-      />
-    );
+    return <Textarea {...props} />;
  },

  args: {
    maxLength: 100,
+    label: "Ipsum enim quis culpa",
    resize: false,
  },
+
+  argTypes: {
+    size: {
+      control: { type: "radio" },
+      options: ["medium", "small"],
+    },
+    description: { type: "string" },
+    error: { type: "string" },
+    hideLabel: { type: "boolean" },
+    disabled: { type: "boolean" },
+    maxRows: { type: "number" },
+    minRows: { type: "number" },
+  },
 };

 export const Small = () => {
@@ -90,6 +90,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
          anchorEl={buttonRef.current}
          placement={placement}
          strategy={strategy}
+          offset={12}
        >
          <Popover.Content className="navds-body-short">
            {children}
@@ -30,7 +30,7 @@ export const HelpTextIcon = ({
        cx="12"
        cy="12"
        r="11"
-        strokeWidth="2"
+        strokeWidth="1.5"
        stroke="currentColor"
        fill={filled ? "currentColor" : "transparent"}
      />
@@ -4,6 +4,7 @@ export type SpacingScale =
  | "0"
  | "05"
  | "1"
+  | "1-alt"
  | "2"
  | "3"
  | "4"
@@ -1,10 +1,10 @@
+import { ChevronDownIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef, useState } from "react";
 import { useId } from "../util";
 import AnimateHeight from "../util/AnimateHeight";
 import DataCell from "./DataCell";
 import Row, { RowProps } from "./Row";
-import { ChevronDownIcon } from "@navikt/aksel-icons";

 export interface ExpandableRowProps extends Omit<RowProps, "content"> {
  /**
@@ -76,7 +76,7 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
    const expansionHandler = (e) => {
      onOpenChange?.(!isOpen);
      if (open === undefined) {
-        setInternalOpen((open) => !open);
+        setInternalOpen((oldOpen) => !oldOpen);
      }
      e.stopPropagation();
    };
@@ -1,8 +1,8 @@
 import React, { useState } from "react";
 import useSWR from "swr";
-import people from "./people.json";
-import { Table } from "../index";
 import { Loader, Pagination, SortState } from "../..";
+import { Table } from "../index";
+import peopleJson from "./people.json";

 export default {
  title: "ds-react/Table",
@@ -44,8 +44,8 @@ const updateData = async (url: string) => {
  );

  return {
-    count: people.length,
-    results: people
+    count: peopleJson.length,
+    results: peopleJson
      .slice()
      .sort((a, b) => {
        if (sort) {
@@ -19,15 +19,15 @@ export const Expandable = () => {
        </Table.Row>
      </Table.Header>
      <Table.Body>
-        {data.map((data) => (
+        {data.map((row) => (
          <Table.ExpandableRow
-            expansionDisabled={data.animal === "Sel"}
-            content={data.content}
-            key={data.name}
+            expansionDisabled={row.animal === "Sel"}
+            content={row.content}
+            key={row.name}
            togglePlacement="right"
          >
            {columns.map(({ key }) => (
-              <Table.DataCell key={key}>{data[key]}</Table.DataCell>
+              <Table.DataCell key={key}>{row[key]}</Table.DataCell>
            ))}
          </Table.ExpandableRow>
        ))}
@@ -49,22 +49,22 @@ export const ExpandableLarge = () => {
        </Table.Row>
      </Table.Header>
      <Table.Body>
-        {data.slice(0, 1).map((data) => (
-          <Table.ExpandableRow content={data.content} key={data.name}>
+        {data.slice(0, 1).map((row) => (
+          <Table.ExpandableRow content={row.content} key={row.name}>
            {columns.map(({ key }) => (
-              <Table.DataCell key={key}>{data[key]}</Table.DataCell>
+              <Table.DataCell key={key}>{row[key]}</Table.DataCell>
            ))}
          </Table.ExpandableRow>
        ))}
-        {data.slice(1, 2).map((data) => (
+        {data.slice(1, 2).map((row) => (
          <Table.ExpandableRow
-            content={data.content}
-            key={data.name}
+            content={row.content}
+            key={row.name}
            open={open}
-            onOpenChange={(open) => setOpen(open)}
+            onOpenChange={setOpen}
          >
            {columns.map(({ key }) => (
-              <Table.DataCell key={key}>{data[key]}</Table.DataCell>
+              <Table.DataCell key={key}>{row[key]}</Table.DataCell>
            ))}
          </Table.ExpandableRow>
        ))}
@@ -86,22 +86,22 @@ export const ExpandableSmall = () => {
        </Table.Row>
      </Table.Header>
      <Table.Body>
-        {data.slice(0, 1).map((data) => (
-          <Table.ExpandableRow content={data.content} key={data.name}>
+        {data.slice(0, 1).map((row) => (
+          <Table.ExpandableRow content={row.content} key={row.name}>
            {columns.map(({ key }) => (
-              <Table.DataCell key={key}>{data[key]}</Table.DataCell>
+              <Table.DataCell key={key}>{row[key]}</Table.DataCell>
            ))}
          </Table.ExpandableRow>
        ))}
-        {data.slice(1, 2).map((data) => (
+        {data.slice(1, 2).map((row) => (
          <Table.ExpandableRow
-            content={data.content}
-            key={data.name}
+            content={row.content}
+            key={row.name}
            open={open}
-            onOpenChange={(open) => setOpen(open)}
+            onOpenChange={setOpen}
          >
            {columns.map(({ key }) => (
-              <Table.DataCell key={key}>{data[key]}</Table.DataCell>
+              <Table.DataCell key={key}>{row[key]}</Table.DataCell>
            ))}
          </Table.ExpandableRow>
        ))}
@@ -247,16 +247,16 @@ export const ExpandableOpen = () => {
        </Table.Row>
      </Table.Header>
      <Table.Body>
-        {data.map((data) => (
+        {data.map((row) => (
          <Table.ExpandableRow
-            expansionDisabled={data.animal === "Sel"}
-            content={data.content}
-            key={data.name}
+            expansionDisabled={row.animal === "Sel"}
+            content={row.content}
+            key={row.name}
            togglePlacement="right"
            defaultOpen
          >
            {columns.map(({ key }) => (
-              <Table.DataCell key={key}>{data[key]}</Table.DataCell>
+              <Table.DataCell key={key}>{row[key]}</Table.DataCell>
            ))}
          </Table.ExpandableRow>
        ))}
@@ -161,10 +161,10 @@ const SelectionTable = ({ size = "medium" }: { size?: "small" | "medium" }) => {
    return [
      list,
      (value) =>
-        setList((list) =>
-          list.includes(value)
-            ? list.filter((id) => id !== value)
-            : [...list, value]
+        setList((oldList) =>
+          oldList.includes(value)
+            ? oldList.filter((id) => id !== value)
+            : [...oldList, value]
        ),
    ];
  };
@@ -39,10 +39,10 @@ export const TabList = forwardRef<HTMLDivElement, TabListProps>(
          const showStartScroll = scrollLeft > 1;
          const showEndScroll = scrollLeft < scrollWidth - clientWidth - 1;

-          setDisplayScroll((displayScroll) =>
-            showStartScroll === displayScroll.start &&
-            showEndScroll === displayScroll.end
-              ? displayScroll
+          setDisplayScroll((oldDisplayScroll) =>
+            showStartScroll === oldDisplayScroll.start &&
+            showEndScroll === oldDisplayScroll.end
+              ? oldDisplayScroll
              : { start: showStartScroll, end: showEndScroll }
          );
        }),
@@ -1,6 +1,8 @@
 import { endOfDay, isSameDay, startOfDay } from "date-fns";
 import React, { forwardRef, useMemo, useRef, useState } from "react";
 import { AxisLabels } from "./AxisLabels";
+import Pin, { PinType } from "./Pin";
+import TimelineRow, { TimelineRowType } from "./TimelineRow";
 import { RowContext } from "./hooks/useRowContext";
 import { TimelineContext } from "./hooks/useTimelineContext";
 import {
@@ -9,11 +11,9 @@ import {
  useTimelineRows,
 } from "./hooks/useTimelineRows";
 import Period, { PeriodType } from "./period";
-import Pin, { PinType } from "./Pin";
-import TimelineRow, { TimelineRowType } from "./TimelineRow";
 import { parseRows } from "./utils/timeline";
-import Zoom, { ZoomType } from "./zoom";
 import { AxisLabelTemplates } from "./utils/types.external";
+import Zoom, { ZoomType } from "./zoom";

 export interface TimelineProps extends React.HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode;
@@ -187,10 +187,10 @@ export const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
      }
    };

-    const addFocusable = (ref: HTMLButtonElement | null, id: number) => {
+    const addFocusable = (btnRef: HTMLButtonElement | null, id: number) => {
      let items = firstFocusabled.current;
      items = items.filter((x) => x.id !== id);
-      items.push({ ref, id });
+      items.push({ ref: btnRef, id });
      firstFocusabled.current = items;
    };

@@ -212,8 +212,8 @@ export const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
          <div className="navds-timeline">
            <AxisLabels templates={axisLabelTemplates} />

-            {pins.map((Pin, i) => (
-              <Pin key={`pin-${i}`} />
+            {pins.map((PinChild, i) => (
+              <PinChild key={`pin-${i}`} />
            ))}

            {processedRows.map((row, i) => {
@@ -238,7 +238,7 @@ export const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
              );
            })}
          </div>
-          {zoomComponent && zoomComponent}
+          {zoomComponent}
        </div>
      </TimelineContext.Provider>
    );
@@ -101,8 +101,7 @@ export const useTimelineRows = (
 ): InternalSimpleTimeline[] =>
  useMemo(
    () =>
-      rows.map((periods: InternalSimpleTimeline, i: number) => {
-        const rowIndex = i;
+      rows.map((periods: InternalSimpleTimeline, rowIndex: number) => {
        const timelinePeriods = periods.periods
          .sort((a: Period, b: Period) => a.start.valueOf() - b.start.valueOf())
          .map((period: Period & { restProps?: any; ref?: any }, i) => ({
@@ -2,8 +2,8 @@ export const omit = (obj: object, props: string[]) =>
  Object.entries(obj)
    .filter(([key]) => !props.includes(key))
    .reduce(
-      (obj, [key, value]) => ({
-        ...obj,
+      (prevObj, [key, value]) => ({
+        ...prevObj,
        [key]: value,
      }),
      {}
@@ -1,5 +1,7 @@
 # @navikt/ds-tailwind

+## 5.7.3
+
 ## 5.7.2

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

+## 5.7.3
+
+### Patch Changes
+
+- Ny spacing token på 0.375rem ([#2370](https://github.com/navikt/aksel/pull/2370))
+
 ## 5.7.2

 ## 5.7.1
@@ -508,6 +508,7 @@
    { "name": "--a-spacing-0", "value": "0" },
    { "name": "--a-spacing-05", "value": "0.125rem" },
    { "name": "--a-spacing-1", "value": "0.25rem" },
+    { "name": "--a-spacing-1-alt", "value": "0.375rem" },
    { "name": "--a-spacing-2", "value": "0.5rem" },
    { "name": "--a-spacing-3", "value": "0.75rem" },
    { "name": "--a-spacing-4", "value": "1rem" },
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "5.7.2",
+  "version": "5.7.3",
  "description": "Design-tokens for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -10,6 +10,9 @@
      "1": {
        "value": "0.25rem"
      },
+      "1-alt": {
+        "value": "0.375rem"
+      },
      "2": {
        "value": "0.5rem"
      },
@@ -1,7 +1,7 @@
-import React from "react";
-import { Meta } from "@storybook/react";
-import * as tokens from "../dist/tokens.js";
 import { Tooltip } from "@navikt/ds-react";
+import { Meta } from "@storybook/react";
+import React from "react";
+import * as tokens from "../dist/tokens.js";

 export default {
  title: "ds-tokens/Spacing",
@@ -14,24 +14,15 @@ export const Spacing = () => {
    {}
  );

-  const sortObject = Object.fromEntries(
-    Object.entries(allSpacing).sort((a, b) => {
-      if (a[0].endsWith("05"))
-        return 0.5 - Number(b[0].replace("ASpacing", ""));
-      if (b[0].endsWith("05"))
-        return Number(a[0].replace("ASpacing", "")) - 0.5;
-      return (
-        Number(a[0].replace("ASpacing", "")) -
-        Number(b[0].replace("ASpacing", ""))
-      );
-    })
+  const sorted = Object.entries(allSpacing).sort(
+    (a, b) => Number(a[1].replace("rem", "")) - Number(b[1].replace("rem", ""))
  );

  const fontSize = 16;

  return (
    <div className="colgap">
-      {Object.entries(sortObject).map(([key, val]) => (
+      {sorted.map(([key, val]) => (
        <div
          key={key}
          style={{
@@ -1,5 +1,25 @@
 # Changelog

+## 5.7.3
+
+### @navikt/ds-react
+
+- Forms: Fikset bug der size='small' ikke oppdaterte typografi. ([#2372](https://github.com/navikt/aksel/pull/2372))
+
+- HelpText: Knapp er visuelt mindre. Klikkflate er fortsatt 24px ([#2376](https://github.com/navikt/aksel/pull/2376))
+
+### @navikt/ds-css
+
+- 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))
+
+### @navikt/ds-tokens
+
+- Ny spacing token på 0.375rem ([#2370](https://github.com/navikt/aksel/pull/2370))
+
 ## 5.7.2

 ### @navikt/ds-react
@@ -15,11 +15,11 @@
    "website"
  ],
  "dependencies": {
-    "@navikt/aksel-icons": "^5.7.2",
-    "@navikt/ds-css": "^5.7.2",
-    "@navikt/ds-react": "^5.7.2",
-    "@navikt/ds-tailwind": "^5.7.2",
-    "@navikt/ds-tokens": "^5.7.2"
+    "@navikt/aksel-icons": "^5.7.3",
+    "@navikt/ds-css": "^5.7.3",
+    "@navikt/ds-react": "^5.7.3",
+    "@navikt/ds-tailwind": "^5.7.3",
+    "@navikt/ds-tokens": "^5.7.3"
  },
  "devDependencies": {
    "prettier-plugin-tailwindcss": "^0.2.3"
@@ -1,9 +1,9 @@
 import { GroupedHitsT, SearchHitT, searchOptions } from "@/types";
 import { Heading } from "@navikt/ds-react";
+import cl from "clsx";
 import { Tag } from "components/sanity-modules/frontpage-blocks/Tag";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { Hit } from "./Hit";
-import cl from "clsx";

 export function CollectionMapper({
  groups,
@@ -28,7 +28,8 @@ export function CollectionMapper({
          ) => {
            const prev = arr.slice(0, index);
            const total =
-              prev.reduce((prev, cur) => prev + cur[1].length, 0) + startIndex;
+              prev.reduce((prev2, cur) => prev2 + cur[1].length, 0) +
+              startIndex;

            return (
              <Collection
@@ -5,26 +5,30 @@ import { Grid } from "../Grid";
 import { sanitizeName } from "../utilities";

 export const ZindexView = ({ cat }: { cat: string }) => {
-  const zindex = docs[cat];
+  const zindex = docs[cat] as { name: string; value: number }[];

  return (
    <Grid>
-      {zindex.map((x, y) => {
+      {zindex.map((token, index) => {
        return (
-          <div key={x.name} id={x.name} className="flex w-fit items-center">
+          <div
+            key={token.name}
+            id={token.name}
+            className="flex w-fit items-center"
+          >
            <div
              style={{ boxShadow: `inset 0 2px 4px 0 rgba(0,0,0,0.06)` }}
              className="bg-surface-subtle mr-3 flex h-16 w-16 flex-col-reverse justify-between overflow-hidden rounded-lg text-4xl leading-none"
            >
-              {zindex.map((x, xi) => (
+              {zindex.map((token2, index2) => (
                <div
                  aria-hidden
-                  key={x.value}
+                  key={token2.value}
                  className={cl(
                    "h-3 w-16 group-hover:opacity-10 peer-focus-visible:opacity-10",
                    {
-                      "bg-surface-alt-3-strong": y === xi,
-                      "bg-surface-neutral-subtle": y !== xi,
+                      "bg-surface-alt-3-strong": index === index2,
+                      "bg-surface-neutral-subtle": index !== index2,
                    }
                  )}
                />
@@ -33,12 +37,12 @@ export const ZindexView = ({ cat }: { cat: string }) => {
            <dl className="grid h-full">
              <dt className="inline-flex items-center gap-2">
                <Copy
-                  text={sanitizeName(x.name.replace("z-index-", ""))}
-                  copyText={x.name}
+                  text={sanitizeName(token.name.replace("z-index-", ""))}
+                  copyText={token.name}
                />
              </dt>
              <dd className="text-text-subtle text-medium mt-auto">
-                {x.value}
+                {token.value}
              </dd>
            </dl>
          </div>
@@ -34,15 +34,13 @@ class ErrorBoundary extends React.Component<Props, State> {
  }
 }

-export function withErrorBoundary<Props>(
-  Component: React.ComponentType<Props>,
+export function withErrorBoundary<T>(
+  Component: React.ComponentType<T>,
  boundaryName: string
 ) {
-  return (props: Props): any => {
-    return (
-      <ErrorBoundary boundaryName={boundaryName}>
-        <Component {...props} />
-      </ErrorBoundary>
-    );
-  };
+  return (props: T) => (
+    <ErrorBoundary boundaryName={boundaryName}>
+      <Component {...props} />
+    </ErrorBoundary>
+  );
 }
@@ -1,6 +1,6 @@
 import { useClientLayoutEffect } from "@navikt/ds-react";
 import throttle from "lodash/throttle";
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";

 export const useToc = ({ changedState }: { changedState: any }) => {
  const [toc, setToc] = useState<
@@ -35,7 +35,7 @@ export const useToc = ({ changedState }: { changedState: any }) => {
            y.contains(x)
          )
      );
-      const toc: {
+      const newToc: {
        heading: string;
        id: string;
        lvl3: { heading: string; id: string }[];
@@ -43,17 +43,17 @@ export const useToc = ({ changedState }: { changedState: any }) => {
      for (const x in filtered) {
        if (!filtered[x]?.id) continue;
        filtered[x].tagName === "H2"
-          ? toc.push({
+          ? newToc.push({
              heading: filtered[x].textContent,
              id: decodeURI(filtered[x].id),
              lvl3: [],
            })
-          : toc[toc.length - 1].lvl3.push({
+          : newToc[newToc.length - 1].lvl3.push({
              heading: filtered[x].textContent,
              id: decodeURI(filtered[x].id),
            });
      }
-      setToc([...toc]);
+      setToc([...newToc]);
    }, 150);

    return () => clearTimeout(time);
@@ -77,8 +77,8 @@ export const useToc = ({ changedState }: { changedState: any }) => {
        }
        if (x?.lvl3) {
          for (const y of x.lvl3) {
-            const el = document.getElementById(y.id);
-            if (validPick(el)) {
+            const el2 = document.getElementById(y.id);
+            if (validPick(el2)) {
              activeSub = y.id;
            }
          }
@@ -30,12 +30,12 @@
  "dependencies": {
    "@amplitude/analytics-browser": "^2.2.3",
    "@portabletext/react": "^3.0.7",
-    "@sanity/client": "^6.4.6",
+    "@sanity/client": "^6.6.0",
    "@sanity/code-input": "4.1.1",
    "@sanity/color-input": "^3.1.0",
    "@sanity/image-url": "1.0.2",
    "@sanity/table": "1.0.1",
-    "@sanity/vision": "3.16.2",
+    "@sanity/vision": "3.18.0",
    "boring-avatars": "1.10.1",
    "clsx": "^1.2.1",
    "codesandbox": "^2.2.3",
@@ -44,15 +44,15 @@
    "lodash": "^4.17.21",
    "next": "^13.5.0",
    "next-logger": "^3.0.2",
-    "next-sanity": "^5.4.6",
+    "next-sanity": "^5.5.8",
    "pino": "^8.14.1",
    "prism-react-renderer": "^2.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-hotjar": "^6.1.0",
    "react-responsive-masonry": "^2.1.7",
-    "sanity": "3.16.2",
-    "sanity-plugin-asset-source-unsplash": "^1.1.0",
+    "sanity": "3.18.0",
+    "sanity-plugin-asset-source-unsplash": "^1.1.1",
    "sanity-plugin-media": "^2.2.2",
    "sharp": "0.32.5",
    "styled-components": "^6.0.0",
@@ -66,8 +66,8 @@
    "@next/bundle-analyzer": "^13.5.0",
    "@next/eslint-plugin-next": "^12.2.0",
    "@playwright/test": "1.35.1",
-    "@sanity/block-tools": "^3.16.2",
-    "@sanity/schema": "^3.16.2",
+    "@sanity/block-tools": "^3.18.0",
+    "@sanity/schema": "^3.18.0",
    "@testing-library/jest-dom": "^5.16.0",
    "@testing-library/react": "^13.3.0",
    "@types/jest": "^29.0.0",
@@ -23,8 +23,8 @@ const initialSelectedOptions = ["Norge"];

 export const Example = () => {
  const [value, setValue] = useState("");
-  const mockPersistUserAddedValues = (value, isSelected) => {
-    console.log("custom option", { value, isSelected });
+  const mockPersistUserAddedValues = (option, isSelected) => {
+    console.log("custom option", { option, isSelected });
  };

  const [selectedOptions, setSelectedOptions] = useState(
@@ -6,11 +6,7 @@ const Example = () => {
  const [val, setVal] = useState("20");

  return (
-    <RadioGroup
-      legend="Velg din aldersgruppe."
-      onChange={(val: any) => setVal(val)}
-      value={val}
-    >
+    <RadioGroup legend="Velg din aldersgruppe." onChange={setVal} value={val}>
      <Radio value="10">10-20 år</Radio>
      <Radio value="20">21-45 år</Radio>
      <Radio value="40">46-80 år</Radio>
@@ -20,20 +20,18 @@ const Example = () => {
    );
  };

-  let sortData = data;
+  const comparator = (a, b, orderBy) => {
+    if (b[orderBy] < a[orderBy] || b[orderBy] === undefined) {
+      return -1;
+    }
+    if (b[orderBy] > a[orderBy]) {
+      return 1;
+    }
+    return 0;
+  };

-  sortData = sortData.slice().sort((a, b) => {
+  const sortedData = data.slice().sort((a, b) => {
    if (sort) {
-      const comparator = (a, b, orderBy) => {
-        if (b[orderBy] < a[orderBy] || b[orderBy] === undefined) {
-          return -1;
-        }
-        if (b[orderBy] > a[orderBy]) {
-          return 1;
-        }
-        return 0;
-      };
-
      return sort.direction === "ascending"
        ? comparator(b, a, sort.orderBy)
        : comparator(a, b, sort.orderBy);
@@ -56,7 +54,7 @@ const Example = () => {
          </Table.Row>
        </Table.Header>
        <Table.Body>
-          {sortData.map(({ name, fnr, start }, i) => {
+          {sortedData.map(({ name, fnr, start }, i) => {
            return (
              <Table.Row key={i + fnr}>
                <Table.HeaderCell scope="row">{name}</Table.HeaderCell>
@@ -26,7 +26,7 @@ type PageProps = NextPageT<{
  articles: Array<ArticleT>;
 }>;

-export const query = (boundry = "") => {
+const getQuery = (boundry = "") => {
  return `{
    "articles": *[_type == "aksel_artikkel" && defined(publishedAt)] | order(publishedAt desc)${boundry} {
      _id,
@@ -50,7 +50,7 @@ export const getStaticProps: GetStaticProps = async ({
 }: {
  preview?: boolean;
 }): Promise<PageProps> => {
-  const { articles } = await getClient().fetch(query("[0..21]"));
+  const { articles } = await getClient().fetch(getQuery("[0..21]"));

  return {
    props: {
@@ -14,6 +14,7 @@ import Footer from "components/layout/footer/Footer";
 import { Header } from "components/layout/header/Header";
 import ComponentOverview from "components/sanity-modules/ComponentOverview";
 import { SEO } from "components/website-modules/seo/SEO";
+import { logger } from "logger";
 import { GetStaticProps } from "next/types";
 import { Suspense, lazy } from "react";
 import { grunnleggendeKategorier } from "../../sanity/config";
@@ -35,6 +36,11 @@ export const getStaticProps: GetStaticProps = async ({
    type: "ds_artikkel",
  });

+  logger.info(
+    { sidebar: !!sidebar, page: !!page, links: !!links },
+    "getStaticProps in /grunnleggende"
+  );
+
  return {
    props: {
      page,
@@ -135,14 +135,15 @@ const Forside = ({ page, tema, blocks }: PageProps["props"]) => {
  }, []);

  const validatedTema = tema
-    .filter((t) => {
-      return (
+    .filter(
+      (t) =>
        t?.title &&
        t?.slug &&
        t?.pictogram &&
-        t?.seksjoner.find((s) => !!s?.sider.find((s: any) => s?._ref))
-      );
-    })
+        t?.seksjoner.some((seksjon) =>
+          seksjon?.sider.some((side: any) => side?._ref)
+        )
+    )
    .sort((a, b) => a.title.localeCompare(b.title));

  return (
@@ -24,9 +24,10 @@ import { Header } from "components/layout/header/Header";
 import ComponentOverview from "components/sanity-modules/ComponentOverview";
 import { IntroCards } from "components/website-modules/IntroCards";
 import { SEO } from "components/website-modules/seo/SEO";
+import { logger } from "logger";
+import { GetStaticProps } from "next/types";
 import { Suspense, lazy } from "react";
 import { komponentKategorier } from "../../sanity/config";
-import { GetStaticProps } from "next/types";

 type PageProps = NextPageT<{
  page: AkselLandingPageDocT;
@@ -47,6 +48,11 @@ export const getStaticProps: GetStaticProps = async ({
    type: "komponent_artikkel",
  });

+  logger.info(
+    { sidebar: !!sidebar, page: !!page, links: !!links },
+    "getStaticProps in /komponenter"
+  );
+
  return {
    props: {
      page,
@@ -1,9 +1,9 @@
-import fs from "fs";
-import { JSDOM } from "jsdom";
 import { htmlToBlocks } from "@sanity/block-tools";
 import { Schema } from "@sanity/schema";
-import showdown from "showdown";
 import dotenv from "dotenv";
+import fs from "fs";
+import { JSDOM } from "jsdom";
+import showdown from "showdown";

 import { noCdnClient } from "../sanity/interface/client.server";

@@ -44,7 +44,7 @@ export async function main() {
    .fields.find((field) => field.name === "body").type;

  const blocks = htmlToBlocks(html, blockContentType, {
-    parseHtml: (html) => new JSDOM(html).window.document,
+    parseHtml: (htmlStr) => new JSDOM(htmlStr).window.document,
  });
  blocks.shift();

@@ -1,7 +1,7 @@
 import dotenv from "dotenv";

-import tokens from "@navikt/ds-tokens/docs.json";
 import core from "@navikt/ds-css/tokens.json";
+import tokens from "@navikt/ds-tokens/docs.json";
 import { noCdnClient } from "../sanity/interface/client.server";

 dotenv.config();
@@ -12,14 +12,14 @@ const allTokens: { title: string; kategori: string }[] = [
 ];

 export const updateTokens = async () => {
-  const token = process.env.SANITY_WRITE_KEY;
+  const writeKey = process.env.SANITY_WRITE_KEY;

  // this is our transactional client, it won't push anything until we say .commit() later
-  const transactionClient = noCdnClient(token).transaction();
+  const transactionClient = noCdnClient(writeKey).transaction();

  // first let's fetch the current state from sanity,
  // So that we can delete old/changed tokens
-  const remoteTokens = await noCdnClient(token).fetch(
+  const remoteTokens = await noCdnClient(writeKey).fetch(
    `*[_type == "token_kategori"]`
  );

@@ -44,7 +44,7 @@ Promise.all([
    ...esmvnext,
    ...cjsvnext,
    ...akselIconsSrc,
-  ].filter((path) => !path.includes("node_modules"));
+  ].filter((folder) => !folder.includes("node_modules"));

  folders.forEach((folder) => {
    console.log(`Deleting folder ${folder}`);
@@ -65,18 +65,18 @@ const processNode = (node: Root) => {
      const parent = ancestors.findLast(
        (ancestor) => ancestor.type === "paragraph"
      ) as Paragraph;
-      visit(parent, (node, index, parent) => {
+      visit(parent, (node2, index, parent2) => {
        if (
-          node.type === "link" ||
-          (node.type === "text" && node.value === " Thanks ")
+          node2.type === "link" ||
+          (node2.type === "text" && node2.value === " Thanks ")
        ) {
-          if (parent && index !== null) {
-            parent.children.splice(index, 1);
+          if (parent2 && index !== null) {
+            parent2.children.splice(index, 1);
            return [CONTINUE, index];
          }
        }
-        if (node.type === "text" && node.value.startsWith("! -")) {
-          node.value = node.value.replace(/! (- )+/, "");
+        if (node2.type === "text" && node2.value.startsWith("! -")) {
+          node2.value = node2.value.replace(/! (- )+/, "");
          return;
        }
      });
@@ -113,10 +113,10 @@ const parseMarkdownFiles = async (filePaths: string[]): Promise<Changelog> => {
        const indexWithinList = parent.children.findIndex((child: ListItem) => {
          return child.children.some((grandchild) => {
            let found = false;
-            visit(grandchild, (node) => {
+            visit(grandchild, (node2) => {
              if (
-                node.type === "text" &&
-                node.value.startsWith("Updated dependencies")
+                node2.type === "text" &&
+                node2.value.startsWith("Updated dependencies")
              ) {
                found = true;
                return EXIT;
@@ -229,6 +229,6 @@ const createMainChangelog = async (changelog: Changelog): Promise<string> => {
 const changelogFiles = getChangelogs("./@navikt");
 console.log("processing the following markdown files:", changelogFiles);
 const changelogJSON = await parseMarkdownFiles(changelogFiles);
-const changelog = await createMainChangelog(changelogJSON);
-writeFileSync("CHANGELOG.md", changelog);
+const changelogStr = await createMainChangelog(changelogJSON);
+writeFileSync("CHANGELOG.md", changelogStr);
 console.log("wrote to CHANGELOG.md");
Author	SHA1	Message	Date
github-actions[bot]andgithub-actions[bot]	6c29fa83dd	Version Packages (#2381 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-10-17 16:30:38 +02:00
Ken	a6b6733861	🎨 Mindre Helptext variant (#2376 ) * 🎨 Mindre Helptext variant * 🎨 small-variant er nå default helptext * 💄 Larger helptext circle stroke-width * Update .changeset/wild-rice-arrive.md	2023-10-17 16:23:14 +02:00
Halvor Haugan	3e54bd4f43	Ny eslint-regel no-shadow (#2377 )	2023-10-17 16:05:22 +02:00
Mathias S. MüllerandKen	ec205fbc5f	🐛 Fiks skrivefeil på size-klasse på form-komponenter (#2372 ) * Fiks skrivefeil på size-klasse på select-komponent * Fiks skrivefeil på size-klasse på form-komponenter * 📝 changeset --------- Co-authored-by: Ken <ken.aleksander@gmail.com>	2023-10-17 15:11:41 +02:00
Ken	d8a4097c82	💄 Endring av tekstfarge endrer også chevron nå (#2383 )	2023-10-17 14:55:53 +02:00
KenandHalvor Haugan	3a3a53f823	[Aksel.nav.no] Nextjs logging av getStaticProps (#2384 ) * 🎨 Caching in dev * 🎨 Logging getstaticprops * 🐛 Endret tilbake til gammel caching * Update aksel.nav.no/website/pages/komponenter/index.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> --------- Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>	2023-10-17 13:09:02 +02:00
Halvor Haugan	3d3e907608	Ny spacing token på 0.375rem (#2370 )	2023-10-17 09:13:39 +02:00
Ken	986d0e9740	[aksel.nav.no] ⬆️ Oppdatert sanity (#2379 ) * ⬆️ Oppdatert sanity * ⬆️ yarnlock	2023-10-16 18:58:28 +02:00
dependabot[bot]	50bb7d4ff8	⬆️ Bump @babel/traverse from 7.23.0 to 7.23.2 (#2380 ) Bumps [@babel/traverse](https://github.com/babel/babel/tree/HEAD/packages/babel-traverse) from 7.23.0 to 7.23.2. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.23.2/packages/babel-traverse) --- updated-dependencies: - dependency-name: "@babel/traverse" dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2023-10-16 18:51:53 +02:00