Version Packages (#2703)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.github/workflows/chromatic.yml

@@ -59,7 +59,9 @@ jobs:
           exitZeroOnChanges: false
           buildScriptName: "build:storybook"
           onlyChanged: true
+          untraced: "**/package.json|yarn.lock|**/*.md"
           externals: \@navikt/core/css/**/*.css
+          traceChanged: true
         env:
           STORYBOOK_GITHUB_SHA: ${{ github.sha }}
 

.github/workflows/update-article-views.yml

@@ -1,17 +1,16 @@
-name: Update article views
+name: Redeploy Naisjob (update-article-views)
 on:
   workflow_dispatch:
 jobs:
   execute:
     runs-on: ubuntu-latest
-    permissions: # TODO: remove once merged
+    permissions:
       packages: "write"
       contents: "read"
       id-token: "write"
     steps:
       - uses: actions/checkout@v3
         with:
-          ref: gp-popular-articles # TODO: remove once merged
           fetch-depth: 1
       - uses: denoland/setup-deno@v1
         with:
@@ -31,7 +30,7 @@ jobs:
         with:
           team: designsystem
           push_image: true
-          dockerfile: scripts/article-views/Dockerfile
+          dockerfile: scripts/article-views/Dockerfile.update-article-views
           project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }}
           identity_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }}
       - name: start naisjob prod-gcp

.prettierignore

@@ -1,5 +1,5 @@
-**/nais-dev.yaml
-**/nais-prod.yaml
+**/nais*.yaml
+**/nais*.yml
 **/codemod/**/tests/**/*.js
 node_modules
 .next

.vscode/extensions.json

@@ -0,0 +1,13 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "denoland.vscode-deno",
+    "esbenp.prettier-vscode",
+    "github.vscode-github-actions",
+    "ms-playwright.playwright",
+    "sanity-io.vscode-sanity",
+    "stylelint.vscode-stylelint",
+    "vunguyentuan.vscode-css-variables",
+    "bradlc.vscode-tailwindcss"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,15 @@
+{
+  "cssVariables.lookupFiles": ["@navikt/core/css/dist/index.css"],
+  "eslint.problems.shortenToSingleLine": true,
+  "deno.enablePaths": ["scripts/article-views", "scripts/changelog"],
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "deno.lint": true,
+  "files.watcherExclude": {
+    "**/.yarn/**": true,
+    "**/dist": true,
+    "**/esm": true,
+    "**/cjs": true
+  },
+  "playwright.reuseBrowser": true,
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @navikt/aksel-icons
 
+## 5.17.5
+
+## 5.17.4
+
+## 5.17.3
+
+## 5.17.2
+
 ## 5.17.1
 
 ## 5.17.0

@navikt/aksel-icons/package.json

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

@navikt/aksel-stylelint/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @navikt/aksel-stylelint
 
+## 5.17.5
+
+## 5.17.4
+
+## 5.17.3
+
+## 5.17.2
+
 ## 5.17.1
 
 ## 5.17.0

@navikt/aksel-stylelint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-stylelint",
-  "version": "5.17.1",
+  "version": "5.17.5",
   "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.17.1",
-    "@navikt/ds-tokens": "^5.17.1",
+    "@navikt/ds-css": "^5.17.5",
+    "@navikt/ds-tokens": "^5.17.5",
     "@types/jest": "^29.0.0",
     "concurrently": "7.2.1",
     "copyfiles": "2.4.1",

@navikt/aksel/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @navikt/aksel
 
+## 5.17.5
+
+### Patch Changes
+
+- Updated dependencies [[`dcca2a956`](https://github.com/navikt/aksel/commit/dcca2a95600152cb84c3b79ba5bb3894ac63e881)]:
+  - @navikt/ds-css@5.17.5
+
+## 5.17.4
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.17.4
+
+## 5.17.3
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.17.3
+
+## 5.17.2
+
+### Patch Changes
+
+- Updated dependencies [[`fdfdebfa9`](https://github.com/navikt/aksel/commit/fdfdebfa99e594099bcea7b5addde9cdabc727a7)]:
+  - @navikt/ds-css@5.17.2
+
 ## 5.17.1
 
 ### Patch Changes

@navikt/aksel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel",
-  "version": "5.17.1",
+  "version": "5.17.5",
   "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.17.1",
+    "@navikt/ds-css": "5.17.5",
     "axios": "1.6.0",
     "chalk": "4.1.0",
     "clipboardy": "^2.3.0",

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @navikt/ds-css
 
+## 5.17.5
+
+### Patch Changes
+
+- ExpansionCard: Padding-top for Content er justert opp 8px (medium) og 4px (small) ([#2699](https://github.com/navikt/aksel/pull/2699))
+
+## 5.17.4
+
+## 5.17.3
+
+## 5.17.2
+
+### Patch Changes
+
+- Checkbox: I noen edgecaser ved bruk av shadow-dom ble ikke checkmark sentert i Checkbox ([#2682](https://github.com/navikt/aksel/pull/2682))
+
 ## 5.17.1
 
 ## 5.17.0

@navikt/core/css/expansioncard.css

@@ -177,7 +177,7 @@
  * Content *
  *************************/
 .navds-expansioncard__content {
-  --__ac-expansioncard-padding-block: var(--a-spacing-3);
+  --__ac-expansioncard-padding-block: var(--a-spacing-5);
 
   border-end-end-radius: var(--__ac-expansioncard-border-radius);
   border-end-start-radius: var(--__ac-expansioncard-border-radius);
@@ -187,6 +187,10 @@
   border-top: none;
 }
 
+.navds-expansioncard--small .navds-expansioncard__content {
+  --__ac-expansioncard-padding-block: var(--a-spacing-4);
+}
+
 .navds-expansioncard__content--closed {
   display: none;
 }

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

@@ -143,6 +143,10 @@
   height: 1.5rem;
   transform: translate(var(--a-spacing-1-alt));
   pointer-events: none;
+
+/* Fixed edcase where when using in shadow-dom, svg will not center */
+  display: flex;
+  align-items: center;
 }
 
 .navds-checkbox--small .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "5.17.1",
+  "version": "5.17.5",
   "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.17.1",
+    "@navikt/ds-tokens": "^5.17.5",
     "cssnano": "6.0.0",
     "fast-glob": "3.2.11",
     "lodash": "4.17.21",

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @navikt/ds-react
 
+## 5.17.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.17.5
+  - @navikt/aksel-icons@5.17.5
+
+## 5.17.4
+
+### Patch Changes
+
+- Bleed: `marginInline='full'` og `reflectivePadding` kan nå brukes sammen. ([#2695](https://github.com/navikt/aksel/pull/2695))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.17.4
+  - @navikt/aksel-icons@5.17.4
+
+## 5.17.3
+
+### Patch Changes
+
+- :bug: Textarea: maxLength virker nå selv om man sender inn onChange uten å sende inn value ([#2690](https://github.com/navikt/aksel/pull/2690))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.17.3
+  - @navikt/aksel-icons@5.17.3
+
+## 5.17.2
+
+### Patch Changes
+
+- :bug: Textarea: Sett riktig høyde når brukt i Modal + StrictMode ([#2679](https://github.com/navikt/aksel/pull/2679))
+
+- DatePicker: Knapper fikk ikke riktig aria-label ([#2678](https://github.com/navikt/aksel/pull/2678))
+
+- Textarea: debounce ResizeObserver for å unngå feilmelding ([#2685](https://github.com/navikt/aksel/pull/2685))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.17.2
+  - @navikt/aksel-icons@5.17.2
+
 ## 5.17.1
 
 ### Patch Changes

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "5.17.1",
+  "version": "5.17.5",
   "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.17.1",
-    "@navikt/ds-tokens": "^5.17.1",
+    "@navikt/aksel-icons": "^5.17.5",
+    "@navikt/ds-tokens": "^5.17.5",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

@navikt/core/react/src/date/datepicker/DatePicker.tsx

@@ -11,7 +11,6 @@ import { DateWrapper } from "../parts/DateWrapper";
 import { getLocaleFromString, labels } from "../utils";
 import DatePickerStandalone from "./DatePickerStandalone";
 import Caption from "./parts/Caption";
-import DayButton from "./parts/DayButton";
 import DropdownCaption from "./parts/DropdownCaption";
 import { HeadRow } from "./parts/HeadRow";
 import Row from "./parts/Row";
@@ -124,7 +123,6 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
           HeadRow,
           WeekNumber,
           Row,
-          Day: DayButton,
         }}
         className={cl("navds-date", className)}
         classNames={{

@navikt/core/react/src/date/datepicker/DatePickerStandalone.tsx

@@ -5,7 +5,6 @@ import { DateRange, DayPicker, isMatch } from "react-day-picker";
 import { omit } from "../../util";
 import { getLocaleFromString, labels } from "../utils";
 import Caption from "./parts/Caption";
-import DayButton from "./parts/DayButton";
 import DropdownCaption from "./parts/DropdownCaption";
 import { HeadRow } from "./parts/HeadRow";
 import Row from "./parts/Row";
@@ -94,7 +93,6 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
             HeadRow,
             WeekNumber,
             Row,
-            Day: DayButton,
           }}
           className="navds-date"
           classNames={{ vhidden: "navds-sr-only" }}

@navikt/core/react/src/date/datepicker/datepicker.stories.tsx

@@ -27,13 +27,13 @@ export const Default: StoryObj<DefaultStoryProps> = {
     const [open, setOpen] = useState(false);
 
     const rangeCtx = useRangeDatepicker({
-      fromDate: new Date("Aug 23 2020"),
-      toDate: new Date("Aug 23 2023"),
+      fromDate: new Date("Aug 23 2023"),
+      toDate: new Date("Aug 23 2029"),
     });
 
     const singleCtx = useDatepicker({
       fromDate: new Date("Aug 23 2020"),
-      toDate: new Date("Aug 23 2023"),
+      toDate: new Date("Aug 23 2029"),
     });
 
     const newProps = {
@@ -42,7 +42,7 @@ export const Default: StoryObj<DefaultStoryProps> = {
             open,
             onClose: () => setOpen(false),
             fromDate: new Date("Aug 23 2020"),
-            toDate: new Date("Aug 23 2023"),
+            toDate: new Date("Aug 23 2029"),
           }
         : {}),
     };

@navikt/core/react/src/date/datepicker/parts/Row.tsx

@@ -1,7 +1,8 @@
 import { getUnixTime } from "date-fns";
 import React from "react";
-import { Day, useDayPicker } from "react-day-picker";
+import { useDayPicker } from "react-day-picker";
 import { Hide } from "../../../layout/responsive";
+import DayButton from "./DayButton";
 import WeekNumber from "./WeekNumber";
 
 /**
@@ -37,7 +38,7 @@ function Row(props: RowProps): JSX.Element {
           style={styles.cell}
           key={getUnixTime(date)}
         >
-          <Day displayMonth={props.displayMonth} date={date} />
+          <DayButton displayMonth={props.displayMonth} date={date} />
         </td>
       ))}
     </tr>

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

@@ -3,6 +3,7 @@ import React, { forwardRef, useState } from "react";
 import { BodyShort, ErrorMessage, Label } from "../typography";
 import { omit } from "../util";
 import TextareaAutosize from "../util/TextareaAutoSize";
+import { composeEventHandlers } from "../util/composeEventHandlers";
 import { useId } from "../util/hooks";
 import { ReadOnlyIcon } from "./ReadOnlyIcon";
 import Counter from "./TextareaCounter";
@@ -102,7 +103,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
     const maxLengthId = useId();
     const hasMaxLength = maxLength !== undefined && maxLength > 0;
 
-    const [controlledValue, setControlledValue] = useState<string>(
+    const [uncontrolledValue, setUncontrolledValue] = useState(
       props?.defaultValue ?? "",
     );
 
@@ -161,11 +162,12 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           <TextareaAutosize
             {...omit(rest, ["error", "errorId", "size"])}
             {...inputProps}
-            onChange={(e) =>
-              props.onChange
-                ? props.onChange(e)
-                : setControlledValue(e.target.value)
-            }
+            onChange={composeEventHandlers(
+              props.onChange,
+              props.value === undefined
+                ? (e) => setUncontrolledValue(e.target.value)
+                : undefined,
+            )}
             minRows={getMinRows()}
             autoScrollbar={UNSAFE_autoScrollbar}
             ref={ref}
@@ -184,7 +186,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
               </span>
               <Counter
                 maxLength={maxLength}
-                currentLength={props.value?.length ?? controlledValue?.length}
+                currentLength={props.value?.length ?? uncontrolledValue.length}
                 size={size}
                 i18n={i18n}
               />

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

@@ -1,6 +1,8 @@
 import { Meta, StoryFn, StoryObj } from "@storybook/react";
+import { expect, userEvent, within } from "@storybook/test";
 import React, { useState } from "react";
 import { Button } from "../../button";
+import { Modal } from "../../modal";
 import { Textarea } from "../index";
 
 const meta: Meta<typeof Textarea> = {
@@ -124,6 +126,24 @@ export const Resize: StoryFn = () => {
   return <Textarea resize label="Ipsum enim quis culpa" />;
 };
 
+export const OnChange: StoryFn = () => {
+  return (
+    <Textarea
+      label="Ipsum enim quis culpa"
+      onChange={console.log}
+      maxLength={50}
+    />
+  );
+};
+OnChange.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const input = canvas.getByLabelText("Ipsum enim quis culpa");
+  userEvent.click(input);
+  await userEvent.type(input, "Aute fugiat ut culpa");
+  const text = canvas.getByText("30 tegn igjen");
+  expect(text).toBeVisible();
+};
+
 export const Controlled: StoryFn = () => {
   const [value, setValue] = useState("");
   return (
@@ -186,3 +206,20 @@ AutoScrollbar.argTypes = {
   maxRows: { type: "number" },
   minRows: { type: "number" },
 };
+
+export const ModalStrictMode: StoryFn<typeof Textarea> = () => {
+  // Story added after fixing an issue where TextareaAutoSize would reach max re-renders
+  // and set the height to 2px when used in StrictMode in a Modal that is initially open.
+  return (
+    <React.StrictMode>
+      <Modal open>
+        <Modal.Body>
+          <Textarea label="Har du noen tilbakemeldinger?" />
+        </Modal.Body>
+      </Modal>
+    </React.StrictMode>
+  );
+};
+ModalStrictMode.parameters = {
+  chromatic: { disable: true }, // Not reproducable in Chromatic
+};

@navikt/core/react/src/layout/bleed/Bleed.stories.tsx

@@ -272,6 +272,19 @@ export const Full = {
             </Bleed>
           </Box>
         </Box>
+        <Box
+          className="maxWidth"
+          background="surface-alt-1-subtle"
+          padding="10"
+        >
+          <Box background="surface-alt-2-subtle" padding="10">
+            <Bleed marginInline="full" reflectivePadding asChild>
+              <Box background="surface-success-subtle">
+                <BodyLong>full + reflectivePadding</BodyLong>
+              </Box>
+            </Bleed>
+          </Box>
+        </Box>
       </VStack>
     </>
   ),

@navikt/core/react/src/layout/utilities/css.ts

@@ -44,6 +44,9 @@ const translateTokenStringToCSS = (
       if (componentProp === "margin-inline" && x === "full") {
         const width = 100 / arr.length;
         return `calc((100vw - ${width}%)/-2)`;
+      } else if (componentProp === "padding-inline" && x === "full") {
+        const width = 100 / arr.length;
+        return `calc((100vw - ${width}%)/2)`;
       }
 
       let output = `var(--a-${tokenSubgroup}-${x})`;

@navikt/core/react/src/util/TextareaAutoSize.tsx

@@ -10,7 +10,7 @@ type State = {
   overflow?: boolean | undefined;
 };
 
-const updateState = (
+const checkState = (
   prevState: State,
   newState: State,
   renders: React.MutableRefObject<number>,
@@ -25,20 +25,12 @@ const updateState = (
       prevState.overflow !== overflow)
   ) {
     renders.current += 1;
-    return {
-      overflow,
-      outerHeightStyle,
-    };
+    return newState;
   }
-  if (process.env.NODE_ENV !== "production") {
-    if (renders.current === 20) {
-      console.error(
-        [
-          "Textarea: Too many re-renders. The layout is unstable.",
-          "TextareaAutosize limits the number of renders to prevent an infinite loop.",
-        ].join("\n"),
-      );
-    }
+  if (process.env.NODE_ENV !== "production" && renders.current === 20) {
+    console.error(
+      "Textarea: Too many re-renders. The layout is unstable. TextareaAutosize limits the number of renders to prevent an infinite loop.",
+    );
   }
   return prevState;
 };
@@ -92,9 +84,7 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
   ) => {
     const { current: isControlled } = useRef(value != null);
     const inputRef = useRef<HTMLTextAreaElement>(null);
-
     const handleRef = useMergeRefs(inputRef, ref);
-
     const shadowRef = useRef<HTMLTextAreaElement>(null);
     const renders = useRef(0);
     const [state, setState] = useState<State>({ outerHeightStyle: 0 });
@@ -153,35 +143,31 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
       return { outerHeightStyle, overflow };
     }, [maxRows, minRows, other.placeholder]);
 
-    const syncHeight = React.useCallback(() => {
+    const syncHeight = () => {
       const newState = getUpdatedState();
-
       if (isEmpty(newState)) {
         return;
       }
-
-      setState((prevState) => updateState(prevState, newState, renders));
-    }, [getUpdatedState]);
+      setState((prevState) => checkState(prevState, newState, renders));
+    };
 
     useClientLayoutEffect(() => {
       const syncHeightWithFlushSync = () => {
         const newState = getUpdatedState();
-
         if (isEmpty(newState)) {
           return;
         }
 
         // In React 18, state updates in a ResizeObserver's callback are happening after
         // the paint, this leads to an infinite rendering.
-        //
-        // Using flushSync ensures that the states is updated before the next pain.
+        // Using flushSync ensures that the state is updated before the next paint.
         // Related issue - https://github.com/facebook/react/issues/24331
         ReactDOM.flushSync(() => {
-          setState((prevState) => updateState(prevState, newState, renders));
+          setState((prevState) => checkState(prevState, newState, renders));
         });
       };
 
-      const handleResize = () => {
+      const handleResize = debounce(() => {
         renders.current = 0;
 
         if (inputRef.current?.style.height || inputRef.current?.style.width) {
@@ -193,13 +179,12 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
         }
 
         syncHeightWithFlushSync();
-      };
+      });
 
-      const debounceHandleResize = debounce(handleResize);
       const input = inputRef.current!;
       const containerWindow = ownerWindow(input);
 
-      containerWindow.addEventListener("resize", debounceHandleResize);
+      containerWindow.addEventListener("resize", handleResize);
 
       let resizeObserver: ResizeObserver;
       if (typeof ResizeObserver !== "undefined") {
@@ -208,8 +193,8 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
       }
 
       return () => {
-        debounceHandleResize.clear();
-        containerWindow.removeEventListener("resize", debounceHandleResize);
+        handleResize.clear();
+        containerWindow.removeEventListener("resize", handleResize);
         if (resizeObserver) {
           resizeObserver.disconnect();
         }

@navikt/core/tailwind/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @navikt/ds-tailwind
 
+## 5.17.5
+
+## 5.17.4
+
+## 5.17.3
+
+## 5.17.2
+
 ## 5.17.1
 
 ## 5.17.0

@navikt/core/tailwind/package.json

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

@navikt/core/tokens/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @navikt/ds-tokens
 
+## 5.17.5
+
+## 5.17.4
+
+## 5.17.3
+
+## 5.17.2
+
 ## 5.17.1
 
 ## 5.17.0

@navikt/core/tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tokens",
-  "version": "5.17.1",
+  "version": "5.17.5",
   "description": "Design-tokens for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [

CHANGELOG.md

@@ -4,42 +4,56 @@
 
 ### @navikt/ds-css
 
+- ExpansionCard: Padding-top for Content er justert opp 8px (medium) og 4px (small) ([#2699](https://github.com/navikt/aksel/pull/2699))
+
+* Checkbox: I noen edgecaser ved bruk av shadow-dom ble ikke checkmark sentert i Checkbox ([#2682](https://github.com/navikt/aksel/pull/2682))
+
 - Høykontrast: Komponenter støtter nå standard høykontrast-modus på Windows ([#2680](https://github.com/navikt/aksel/pull/2680))
 
 ### @navikt/ds-react
 
-- Eksponer variabelen "role" i Search-komponenten ([#2667](https://github.com/navikt/aksel/pull/2667))
+- Bleed: `marginInline='full'` og `reflectivePadding` kan nå brukes sammen. ([#2695](https://github.com/navikt/aksel/pull/2695))
 
-* Høykontrast: Komponenter støtter nå standard høykontrast-modus på Windows ([#2680](https://github.com/navikt/aksel/pull/2680))
+* :bug: Textarea: maxLength virker nå selv om man sender inn onChange uten å sende inn value ([#2690](https://github.com/navikt/aksel/pull/2690))
+
+- :bug: Textarea: Sett riktig høyde når brukt i Modal + StrictMode ([#2679](https://github.com/navikt/aksel/pull/2679))
+
+- DatePicker: Knapper fikk ikke riktig aria-label ([#2678](https://github.com/navikt/aksel/pull/2678))
+
+- Textarea: debounce ResizeObserver for å unngå feilmelding ([#2685](https://github.com/navikt/aksel/pull/2685))
+
+* Eksponer variabelen "role" i Search-komponenten ([#2667](https://github.com/navikt/aksel/pull/2667))
+
+- Høykontrast: Komponenter støtter nå standard høykontrast-modus på Windows ([#2680](https://github.com/navikt/aksel/pull/2680))
 
 ## 5.16
 
-### @navikt/aksel-icons
-
-- Ikoner: Nytt ikon `LocationPin` ✨ ([#2672](https://github.com/navikt/aksel/pull/2672))
-
-### @navikt/ds-tailwind
-
-- Tailwind: La til ny `maxWidth` for text ([#2652](https://github.com/navikt/aksel/pull/2652))
-
 ### @navikt/ds-css
 
 - :sparkles: Combobox: Mulighet for å begrense hvor mange valg bruker kan ta ([#2260](https://github.com/navikt/aksel/pull/2260))
 
+### @navikt/ds-tailwind
+
+- Tailwind: La til ny `maxWidth` for text ([#2652](https://github.com/navikt/aksel/pull/2652))
+
 ### @navikt/ds-react
 
 - :sparkles: Combobox: Mulighet for å begrense hvor mange valg bruker kan ta ([#2260](https://github.com/navikt/aksel/pull/2260))
 
-## 5.15
-
 ### @navikt/aksel-icons
 
-- Ikoner: Synket ikoner med Figma. Lagt til nytt ikon `FigureChild` ([#2629](https://github.com/navikt/aksel/pull/2629))
+- Ikoner: Nytt ikon `LocationPin` ✨ ([#2672](https://github.com/navikt/aksel/pull/2672))
+
+## 5.15
 
 ### @navikt/ds-react
 
 - HelpText: HelpText-state ble ikke riktig oppdatert ved klikk ([#2643](https://github.com/navikt/aksel/pull/2643))
 
+### @navikt/aksel-icons
+
+- Ikoner: Synket ikoner med Figma. Lagt til nytt ikon `FigureChild` ([#2629](https://github.com/navikt/aksel/pull/2629))
+
 ## 5.14
 
 ### @navikt/ds-css
@@ -62,10 +76,6 @@
 
 ## 5.13
 
-### @navikt/ds-tokens
-
-- Tokens: Ny token `--a-text-width-max: 576px` ([#2572](https://github.com/navikt/aksel/pull/2572))
-
 ### @navikt/ds-css
 
 - Page: Lagt til ny bakgrunnsfarge `surface-subtle` og ny maksbredde på Page.Block `text` ([#2572](https://github.com/navikt/aksel/pull/2572))
@@ -78,12 +88,12 @@
 
 * Page: Lagt til ny bakgrunnsfarge `surface-subtle` og ny maksbredde på Page.Block `text` ([#2572](https://github.com/navikt/aksel/pull/2572))
 
+### @navikt/ds-tokens
+
+- Tokens: Ny token `--a-text-width-max: 576px` ([#2572](https://github.com/navikt/aksel/pull/2572))
+
 ## 5.12
 
-### @navikt/aksel-icons
-
-- Ikoner: Oppdatert ikonpakke med diverse bugdfixes og oppdateringer av stroke ([#2538](https://github.com/navikt/aksel/pull/2538))
-
 ### @navikt/aksel-stylelint
 
 - Stylelint: Støtter nå stylelint v16 ([#2591](https://github.com/navikt/aksel/pull/2591))
@@ -104,11 +114,11 @@
 
 * Datepicker: Lukk-knapp i modal har nå type button for å unngå form-submition ([#2568](https://github.com/navikt/aksel/pull/2568))
 
-## 5.11
-
 ### @navikt/aksel-icons
 
-- Ikoner: Nytt ikon `PushPin` ([#2503](https://github.com/navikt/aksel/pull/2503))
+- Ikoner: Oppdatert ikonpakke med diverse bugdfixes og oppdateringer av stroke ([#2538](https://github.com/navikt/aksel/pull/2538))
+
+## 5.11
 
 ### @navikt/ds-css
 
@@ -150,12 +160,12 @@
 
 - :wheelchair: Textarea: Forsinkelse ved live-opplesning av gjenstående tegn ([#2502](https://github.com/navikt/aksel/pull/2502))
 
+### @navikt/aksel-icons
+
+- Ikoner: Nytt ikon `PushPin` ([#2503](https://github.com/navikt/aksel/pull/2503))
+
 ## 5.10
 
-### @navikt/ds-tailwind
-
-- typescript types for tailwind preset ([#2486](https://github.com/navikt/aksel/pull/2486))
-
 ### @navikt/ds-css
 
 - :bug: Textarea: Teller flyttet ut av tekstfeltet for å unngå overlapp og misforståelser ([#2483](https://github.com/navikt/aksel/pull/2483))
@@ -164,6 +174,10 @@
 
 - Primitives: Ny komponent `Page` og `Page.Block` ([#2456](https://github.com/navikt/aksel/pull/2456))
 
+### @navikt/ds-tailwind
+
+- typescript types for tailwind preset ([#2486](https://github.com/navikt/aksel/pull/2486))
+
 ### @navikt/ds-react
 
 - Gjør lukknapp i Alert til type button ([#2497](https://github.com/navikt/aksel/pull/2497))
@@ -226,14 +240,6 @@
 
 ## 5.7
 
-### @navikt/aksel-icons
-
-- Ikoner: Nye ikoner `ChevronLeftFirstCircle` og `ChevronRightLastCircle` ([#2365](https://github.com/navikt/aksel/pull/2365))
-
-### @navikt/ds-tokens
-
-- Ny spacing token på 0.375rem ([#2370](https://github.com/navikt/aksel/pull/2370))
-
 ### @navikt/ds-css
 
 - :lipstick: Chips.Toggle: Ikon i uvalgt tilstand ([#2395](https://github.com/navikt/aksel/pull/2395))
@@ -270,19 +276,15 @@
 
 - :lipstick: CopyButton: Justert padding, gap og animasjon ([#2355](https://github.com/navikt/aksel/pull/2355))
 
-## 5.6
+### @navikt/ds-tokens
+
+- Ny spacing token på 0.375rem ([#2370](https://github.com/navikt/aksel/pull/2370))
 
 ### @navikt/aksel-icons
 
-- Ikoner: SVG export setter nå `height="1em"`, `width="1em"` og `fill="currentColor"`. ([#2300](https://github.com/navikt/aksel/pull/2300))
+- Ikoner: Nye ikoner `ChevronLeftFirstCircle` og `ChevronRightLastCircle` ([#2365](https://github.com/navikt/aksel/pull/2365))
 
-- Ikoner: Nye ikoner `book` og `books` ([#2313](https://github.com/navikt/aksel/pull/2313))
-
-* Ikoner: Nye ikoner `ClipboardCheckmark` og `ClipboardLink` ([#2307](https://github.com/navikt/aksel/pull/2307))
-
-### @navikt/ds-tokens
-
-- Tokens: Tilbyr nå token literals for typer, tidligere string literals ([#2342](https://github.com/navikt/aksel/pull/2342))
+## 5.6
 
 ### @navikt/ds-css
 
@@ -330,11 +332,19 @@
 
 - Remove tabIndex="-1" on Popover to fix VoiceOver navigation issue inside Popover ([#2303](https://github.com/navikt/aksel/pull/2303))
 
-## 5.5
-
 ### @navikt/ds-tokens
 
-- Box: Ny primitive, erstatter dagens `Panel` ([#2195](https://github.com/navikt/aksel/pull/2195))
+- Tokens: Tilbyr nå token literals for typer, tidligere string literals ([#2342](https://github.com/navikt/aksel/pull/2342))
+
+### @navikt/aksel-icons
+
+- Ikoner: SVG export setter nå `height="1em"`, `width="1em"` og `fill="currentColor"`. ([#2300](https://github.com/navikt/aksel/pull/2300))
+
+- Ikoner: Nye ikoner `book` og `books` ([#2313](https://github.com/navikt/aksel/pull/2313))
+
+* Ikoner: Nye ikoner `ClipboardCheckmark` og `ClipboardLink` ([#2307](https://github.com/navikt/aksel/pull/2307))
+
+## 5.5
 
 ### @navikt/ds-css
 
@@ -348,11 +358,11 @@
 
 * Skeleton: Width fungerer nå med inline-variant av Skeleton ([#2273](https://github.com/navikt/aksel/pull/2273))
 
-## 5.4
-
 ### @navikt/ds-tokens
 
-- Tokens: `data-theme="light"` vil nå tilbakestille theming ([#2238](https://github.com/navikt/aksel/pull/2238))
+- Box: Ny primitive, erstatter dagens `Panel` ([#2195](https://github.com/navikt/aksel/pull/2195))
+
+## 5.4
 
 ### @navikt/ds-css
 
@@ -368,12 +378,12 @@
 
 - Search: Kjører nå bare preventDefault ved Escape når `input` inneholder tekst ([#2245](https://github.com/navikt/aksel/pull/2245))
 
+### @navikt/ds-tokens
+
+- Tokens: `data-theme="light"` vil nå tilbakestille theming ([#2238](https://github.com/navikt/aksel/pull/2238))
+
 ## 5.3
 
-### @navikt/aksel-icons
-
-- :bug: SVG import map er nå riktig path ([#2250](https://github.com/navikt/aksel/pull/2250))
-
 ### @navikt/ds-css
 
 - Alert: 12px -> 8px gap mellom tekst og ikon ved `size="small"` ([#2240](https://github.com/navikt/aksel/pull/2240))
@@ -410,11 +420,11 @@
 
 * :wheelchair: Textarea: Skjermleser-spesifikk tekst leses opp sammenhengende ([#2216](https://github.com/navikt/aksel/pull/2216))
 
-## 5.2
-
 ### @navikt/aksel-icons
 
-- Ikoner: Oppdatert ikonpakke ([#2197](https://github.com/navikt/aksel/pull/2197))
+- :bug: SVG import map er nå riktig path ([#2250](https://github.com/navikt/aksel/pull/2250))
+
+## 5.2
 
 ### @navikt/ds-css
 
@@ -432,6 +442,10 @@
 
 - Hovering over combobox dropdown will move selection/focus in the list, so we don't end up with a split focus, and reversely when moving focus while hovering ([#2193](https://github.com/navikt/aksel/pull/2193))
 
+### @navikt/aksel-icons
+
+- Ikoner: Oppdatert ikonpakke ([#2197](https://github.com/navikt/aksel/pull/2197))
+
 ## 5.1
 
 ### @navikt/ds-css
@@ -450,16 +464,6 @@
 
 ## 5.0
 
-### @navikt/ds-tokens
-
-- ConfirmationPanel: Fikset opplesing av feilmelding ([#2199](https://github.com/navikt/aksel/pull/2199))
-
-- Tokens: `--a-icon-alt-3` er nå i synk med figma ([#2199](https://github.com/navikt/aksel/pull/2199))
-
-* Gray: Gråfarger er nå mindre varme ([#2092](https://github.com/navikt/aksel/pull/2092))
-
-* Action: Selected-varianter av action er nå 'blue' ('deepblue' før) ([#2092](https://github.com/navikt/aksel/pull/2092))
-
 ### @navikt/ds-css
 
 - ConfirmationPanel: Fikset opplesing av feilmelding ([#2199](https://github.com/navikt/aksel/pull/2199))
@@ -493,6 +497,16 @@
 
 * Table: Har lagt til ny size: 'large'. ([#2178](https://github.com/navikt/aksel/pull/2178))
 
+### @navikt/ds-tokens
+
+- ConfirmationPanel: Fikset opplesing av feilmelding ([#2199](https://github.com/navikt/aksel/pull/2199))
+
+- Tokens: `--a-icon-alt-3` er nå i synk med figma ([#2199](https://github.com/navikt/aksel/pull/2199))
+
+* Gray: Gråfarger er nå mindre varme ([#2092](https://github.com/navikt/aksel/pull/2092))
+
+* Action: Selected-varianter av action er nå 'blue' ('deepblue' før) ([#2092](https://github.com/navikt/aksel/pull/2092))
+
 ## 4.12
 
 ### @navikt/ds-css
@@ -641,9 +655,11 @@
 
 ## 4.4
 
-### @navikt/ds-tokens
+### @navikt/ds-css
 
-- Shadow-tokens er oppdatert til mer tydeligere varianter ([PR](https://github.com/navikt/aksel/pull/2041))
+- :lipstick: Chat: fjernet border, satt avatar svg til 24x24px, byttet om "subtle" og "neutral" ([#2077](https://github.com/navikt/aksel/pull/2077))
+
+* Shadow-tokens er oppdatert: Datepicker har nå ikke border, Modal bruker shadow-xlarge, LinkCard bruker shadow-xsmall ([PR](https://github.com/navikt/aksel/pull/2041))
 
 ### @navikt/ds-tailwind
 
@@ -651,18 +667,16 @@
 
 - Oppdatert text-subtle og icon-subtle tokens til 700-skala (tidligere 600). ([PR](https://github.com/navikt/aksel/pull/2036))
 
-### @navikt/ds-css
-
-- :lipstick: Chat: fjernet border, satt avatar svg til 24x24px, byttet om "subtle" og "neutral" ([#2077](https://github.com/navikt/aksel/pull/2077))
-
-* Shadow-tokens er oppdatert: Datepicker har nå ikke border, Modal bruker shadow-xlarge, LinkCard bruker shadow-xsmall ([PR](https://github.com/navikt/aksel/pull/2041))
-
 ### @navikt/ds-react
 
 - Textarea: Fikset i18n for counter ([`718b3204d`](https://github.com/navikt/aksel/commit/718b3204d8714c4fc515dcad484424214bdc0c77))
 
 * Fikset klassenavn brukt for popover i Datepicker og Monthpicker ([PR](https://github.com/navikt/aksel/pull/2041))
 
+### @navikt/ds-tokens
+
+- Shadow-tokens er oppdatert til mer tydeligere varianter ([PR](https://github.com/navikt/aksel/pull/2041))
+
 ## 4.3
 
 ### @navikt/ds-css
@@ -687,24 +701,10 @@
 
 ## 4.1
 
-### @navikt/aksel-icons
-
-- Nye ikoner `ChevronRightLast` og `ChevronLeftLast` ([PR](https://github.com/navikt/aksel/pull/2054))
-
 ### @navikt/aksel-stylelint
 
 - Deprecated klassenavn `navds-chips--icon-left` ([PR](https://github.com/navikt/aksel/pull/2035))
 
-### @navikt/ds-tokens
-
-- :tada: Fargetokens for datavisualisering. ([PR](https://github.com/navikt/aksel/pull/2032))
-
-- Oppdatert text-subtle og icon-subtle tokens til 700-skala (tidligere 600). ([PR](https://github.com/navikt/aksel/pull/2036))
-
-### @navikt/ds-tailwind
-
-- :tada: Fargetokens for datavisualisering. ([PR](https://github.com/navikt/aksel/pull/2032))
-
 ### @navikt/ds-css
 
 - Readmore: setter nå eksplisitt color for å ikke arve text-subtle fra parent. ([PR](https://github.com/navikt/aksel/pull/2049))
@@ -715,6 +715,10 @@
 
 - Alle description-felter på fieldsets har nå `text-subtle` som farge. ([PR](https://github.com/navikt/aksel/pull/2036))
 
+### @navikt/ds-tailwind
+
+- :tada: Fargetokens for datavisualisering. ([PR](https://github.com/navikt/aksel/pull/2032))
+
 ### @navikt/ds-react
 
 - Fikset JSDom-problemer ved testing av Timeline
@@ -739,8 +743,24 @@
 
 - Accordion: La til `indent`-prop ([PR](https://github.com/navikt/aksel/pull/2027))
 
+### @navikt/ds-tokens
+
+- :tada: Fargetokens for datavisualisering. ([PR](https://github.com/navikt/aksel/pull/2032))
+
+- Oppdatert text-subtle og icon-subtle tokens til 700-skala (tidligere 600). ([PR](https://github.com/navikt/aksel/pull/2036))
+
+### @navikt/aksel-icons
+
+- Nye ikoner `ChevronRightLast` og `ChevronLeftLast` ([PR](https://github.com/navikt/aksel/pull/2054))
+
 ## 4.0
 
+### @navikt/aksel
+
+- Codemod for migrering av Datepicker/Monthpicker ut av Beta. `npx @navikt/aksel codemod v4-date` ([PR](https://github.com/navikt/aksel/pull/2026))
+
+- Codemods for migrering fra `@navikt/ds-react-internal` til `@navikt/ds-react` [Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h3b8538e1981d) ([PR](https://github.com/navikt/aksel/pull/2026))
+
 ### @navikt/ds-css
 
 - All styling fra `@navikt/ds-css-internal` er flyttet til `@navikt/ds-css`. ([PR](https://github.com/navikt/aksel/pull/2026))
@@ -757,12 +777,6 @@
 
 - Komponenter i `@navikt/ds-react-internal` er flyttet over til `@navikt/ds-react`. [Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h3b8538e1981d) ([PR](https://github.com/navikt/aksel/pull/2026))
 
-### @navikt/aksel
-
-- Codemod for migrering av Datepicker/Monthpicker ut av Beta. `npx @navikt/aksel codemod v4-date` ([PR](https://github.com/navikt/aksel/pull/2026))
-
-- Codemods for migrering fra `@navikt/ds-react-internal` til `@navikt/ds-react` [Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h3b8538e1981d) ([PR](https://github.com/navikt/aksel/pull/2026))
-
 ## 3.4
 
 ### @navikt/aksel-stylelint
@@ -791,10 +805,6 @@
 
 ## 3.2
 
-### @navikt/aksel-icons
-
-- Nye ikoner `FileParagraph` og `FilePlus` ([PR](https://github.com/navikt/aksel/pull/1998))
-
 ### @navikt/ds-css
 
 - Datepicker: Fikset small-variant av datepicker-input. ([PR](https://github.com/navikt/aksel/pull/1993))
@@ -813,6 +823,10 @@
 
 * Ny komponent CopyButton! Erstatter `CopyToClipboard` som nå er tagget som deprecated ([PR](https://github.com/navikt/aksel/pull/1982))
 
+### @navikt/aksel-icons
+
+- Nye ikoner `FileParagraph` og `FilePlus` ([PR](https://github.com/navikt/aksel/pull/1998))
+
 ## 3.1
 
 ### @navikt/ds-css
@@ -845,6 +859,18 @@
 
 ## 2.9
 
+### @navikt/aksel
+
+- :truck: Flyttet Codemods fra `@navikt/ds-codemods` -> `@navikt/aksel`. `@navikt/ds-codemods` regnes nå som deprecated ([PR](https://github.com/navikt/aksel/pull/1952))
+
+### @navikt/ds-css
+
+- CSS nå tilgjengelig som separate filer: Kan lastest fra CDN, minified-versjoner tilgjengelig ([PR](https://github.com/navikt/aksel/pull/1941))
+
+### @navikt/ds-react
+
+- ExpansionCard: Støtter nå `aria-labelledby` i tillegg til `aria-label` ([PR](https://github.com/navikt/aksel/pull/1944))
+
 ### @navikt/aksel-icons
 
 - Oppdatert Statusikoner til å være tydeligere og mer konsistente. ([PR](https://github.com/navikt/aksel/pull/1959))
@@ -855,32 +881,8 @@
 
 * Nye ikoner `BulletList` og `NumberList` ([PR](https://github.com/navikt/aksel/pull/1950))
 
-### @navikt/ds-css
-
-- CSS nå tilgjengelig som separate filer: Kan lastest fra CDN, minified-versjoner tilgjengelig ([PR](https://github.com/navikt/aksel/pull/1941))
-
-### @navikt/ds-react
-
-- ExpansionCard: Støtter nå `aria-labelledby` i tillegg til `aria-label` ([PR](https://github.com/navikt/aksel/pull/1944))
-
-### @navikt/aksel
-
-- :truck: Flyttet Codemods fra `@navikt/ds-codemods` -> `@navikt/aksel`. `@navikt/ds-codemods` regnes nå som deprecated ([PR](https://github.com/navikt/aksel/pull/1952))
-
 ## 2.8
 
-### @navikt/aksel-icons
-
-- :tada: Nye ikoner `HandKnot` og `HandKnotFilled` ([PR](https://github.com/navikt/aksel/pull/1928))
-
-* Oppdatert `InformationSquare`-ikon ([PR](https://github.com/navikt/aksel/pull/1921))
-
-- Oppdatert `VideoSlack`, `Questionmark` og `Information`-ikoner ([PR](https://github.com/navikt/aksel/pull/1909))
-
-* Nye ikoner `VideoSlash` og `VideoSlashFill`
-
-- Fikset Sourcemap-bug
-
 ### @navikt/ds-css
 
 - Button: Padding/border-radius tokens ([PR](https://github.com/navikt/aksel/pull/1905))
@@ -915,8 +917,26 @@
 
 * Ny komponent ExpansionCard! ([PR](https://github.com/navikt/aksel/pull/1820))
 
+### @navikt/aksel-icons
+
+- :tada: Nye ikoner `HandKnot` og `HandKnotFilled` ([PR](https://github.com/navikt/aksel/pull/1928))
+
+* Oppdatert `InformationSquare`-ikon ([PR](https://github.com/navikt/aksel/pull/1921))
+
+- Oppdatert `VideoSlack`, `Questionmark` og `Information`-ikoner ([PR](https://github.com/navikt/aksel/pull/1909))
+
+* Nye ikoner `VideoSlash` og `VideoSlashFill`
+
+- Fikset Sourcemap-bug
+
 ## 2.7
 
+### @navikt/ds-css
+
+- Tabs: La til focus-markering for Tabs.Panel ([PR](https://github.com/navikt/aksel/pull/1863))
+
+* ToggleGroup: Fikset token-bug
+
 ### @navikt/aksel-icons
 
 - Nye ikoner `CaretUpDownFilledDown`, `CaretUpDownFilledUp`, `CloudDown`, `CloudDownFill`, `CloudUp`, `CloudUpFill`, `HddDown`, `HddDownFill`, `HddUp`, `HddUpFill`, `Inbox`, `InboxDown`, `InboxDownFill`, `InboxFill`, `InboxUp`, `InboxUpFill`, `ShoppingBasket`, `ShoppingBasketFill`
@@ -925,12 +945,6 @@
 
 - Ny ikonpakke med for core icons 3! `@navikt/aksel-icons` ([PR](https://github.com/navikt/aksel/pull/1847))
 
-### @navikt/ds-css
-
-- Tabs: La til focus-markering for Tabs.Panel ([PR](https://github.com/navikt/aksel/pull/1863))
-
-* ToggleGroup: Fikset token-bug
-
 ## 2.6
 
 ### @navikt/ds-react
@@ -941,10 +955,6 @@
 
 ## 2.5
 
-### @navikt/ds-tokens
-
-- Breakpoint-tokens lagt til ([PR](https://github.com/navikt/aksel/pull/1832))
-
 ### @navikt/ds-tailwind
 
 - Breakpoint-tokens er lagt til. Overskriver native tailwind-breakpoints ([PR](https://github.com/navikt/aksel/pull/1832))
@@ -953,6 +963,10 @@
 
 - List: Refaktorert nestede lister
 
+### @navikt/ds-tokens
+
+- Breakpoint-tokens lagt til ([PR](https://github.com/navikt/aksel/pull/1832))
+
 ## 2.4
 
 ### @navikt/ds-css
@@ -981,12 +995,6 @@
 
 ## 2.2
 
-### @navikt/ds-tokens
-
-- Justeringer av semantiske fargetokens, statusfarger nå mer tydelig ([PR](https://github.com/navikt/aksel/pull/1787))
-
-- Oppdatert neutral-tokens ([PR](https://github.com/navikt/aksel/pull/1789))
-
 ### @navikt/ds-css
 
 - ToggleGroup: `Neutral`-variant. ([PR](https://github.com/navikt/aksel/pull/1789))
@@ -999,11 +1007,13 @@
 
 - Button: `neutral`-variant ([PR](https://github.com/navikt/aksel/pull/1789))
 
-## 2.1
-
 ### @navikt/ds-tokens
 
-- Fikset feil danger-hover token ([PR](https://github.com/navikt/aksel/pull/1665))
+- Justeringer av semantiske fargetokens, statusfarger nå mer tydelig ([PR](https://github.com/navikt/aksel/pull/1787))
+
+- Oppdatert neutral-tokens ([PR](https://github.com/navikt/aksel/pull/1789))
+
+## 2.1
 
 ### @navikt/ds-css
 
@@ -1025,15 +1035,11 @@
 
 - Datepicker/Monthpicker: år med 2 siffer i input fungerer nå
 
-## 2.0
-
 ### @navikt/ds-tokens
 
-- Alle token er oppdatert til nytt format. ([Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112))
+- Fikset feil danger-hover token ([PR](https://github.com/navikt/aksel/pull/1665))
 
-### @navikt/ds-tailwind
-
-- Alle token er oppdatert til nytt format. ([Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112))
+## 2.0
 
 ### @navikt/ds-css
 
@@ -1047,6 +1053,10 @@
 
 * Tokens: Alle komponenter bruker nå semantiske tokens for som standard, med innebygd støtte for komponent-spesifikke tokens.
 
+### @navikt/ds-tailwind
+
+- Alle token er oppdatert til nytt format. ([Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112))
+
 ### @navikt/ds-react
 
 - Datepicker: Bedre typer for `ref`
@@ -1065,6 +1075,10 @@
 
 * Fonter blir bruk i all typografi blir nå lastet fra CDN
 
+### @navikt/ds-tokens
+
+- Alle token er oppdatert til nytt format. ([Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112))
+
 ## 1.5
 
 ### @navikt/ds-css

aksel.nav.no/package.json

@@ -16,10 +16,10 @@
     "playroom"
   ],
   "dependencies": {
-    "@navikt/aksel-icons": "^5.17.1",
-    "@navikt/ds-css": "^5.17.1",
-    "@navikt/ds-react": "^5.17.1",
-    "@navikt/ds-tailwind": "^5.17.1",
-    "@navikt/ds-tokens": "^5.17.1"
+    "@navikt/aksel-icons": "^5.17.5",
+    "@navikt/ds-css": "^5.17.5",
+    "@navikt/ds-react": "^5.17.5",
+    "@navikt/ds-tailwind": "^5.17.5",
+    "@navikt/ds-tokens": "^5.17.5"
   }
 }

aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Global.tsx

@@ -19,15 +19,14 @@ export const GlobalView = ({ cat }: { cat: string }) => {
             >
               <div className="component-checkered-bg z-[-1] h-16 w-16" />
             </div>
-            <dl className="grid h-full">
-              <dt className="inline-flex items-center gap-2">
-                <CopyButton
-                  text={sanitizeName(x.name)}
-                  copyText={x.name}
-                  size="small"
-                  iconPosition="right"
-                />
+            <dl>
+              <dt className="inline-flex items-start gap-1 text-medium">
+                <span className="flex min-h-8 items-center">
+                  {sanitizeName(x.name)}
+                </span>
+                <CopyButton copyText={x.name} size="small" />
               </dt>
+
               <dd className="mt-auto text-medium text-text-subtle">
                 {getColorString(x.value)}
               </dd>

aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Semantic.tsx

@@ -29,14 +29,12 @@ export const SemanticView = ({ cat }: { cat: string }) => {
               >
                 Aa
               </div>
-              <dl className="grid h-full">
-                <dt className="inline-flex items-center gap-2">
-                  <CopyButton
-                    copyText={x.name}
-                    text={sanitizeName(x.name.replace("text-", ""))}
-                    size="small"
-                    iconPosition="right"
-                  />
+              <dl>
+                <dt className="inline-flex items-start gap-1 text-medium">
+                  <span className="flex min-h-8 items-center">
+                    {sanitizeName(x.name.replace("text-", ""))}
+                  </span>
+                  <CopyButton copyText={x.name} size="small" />
                 </dt>
                 <dd className="mt-auto text-medium text-text-subtle">
                   {ref ? (
@@ -80,14 +78,12 @@ export const SemanticView = ({ cat }: { cat: string }) => {
                   }}
                 />
               </div>
-              <dl className="grid h-full">
-                <dt className="inline-flex items-center gap-2">
-                  <CopyButton
-                    text={sanitizeName(x.name.replace("icon-", ""))}
-                    copyText={x.name}
-                    size="small"
-                    iconPosition="right"
-                  />
+              <dl>
+                <dt className="inline-flex items-start gap-1 text-medium">
+                  <span className="flex min-h-8 items-center">
+                    {sanitizeName(x.name.replace("icon-", ""))}
+                  </span>
+                  <CopyButton copyText={x.name} size="small" />
                 </dt>
                 <dd className="mt-auto text-medium text-text-subtle">
                   {ref ? (
@@ -123,14 +119,12 @@ export const SemanticView = ({ cat }: { cat: string }) => {
                 }}
                 className="mr-3 grid h-16 w-16 place-content-center rounded-lg text-4xl leading-none"
               />
-              <dl className="grid h-full">
-                <dt className="inline-flex items-center gap-2">
-                  <CopyButton
-                    text={sanitizeName(x.name.replace("border-", ""))}
-                    copyText={x.name}
-                    size="small"
-                    iconPosition="right"
-                  />
+              <dl>
+                <dt className="inline-flex items-start gap-1 text-medium">
+                  <span className="flex min-h-8 items-center">
+                    {sanitizeName(x.name.replace("border-", ""))}
+                  </span>
+                  <CopyButton copyText={x.name} size="small" />
                 </dt>
                 <dd className="mt-auto text-medium text-text-subtle">
                   {ref ? (
@@ -195,14 +189,12 @@ export const SemanticView = ({ cat }: { cat: string }) => {
                   }}
                 />
               </div>
-              <dl className="grid h-full">
-                <dt className="inline-flex items-center gap-2">
-                  <CopyButton
-                    text={sanitizeName(x.name.replace("surface-", ""))}
-                    copyText={x.name}
-                    size="small"
-                    iconPosition="right"
-                  />
+              <dl>
+                <dt className="inline-flex items-start gap-1 text-medium">
+                  <span className="flex min-h-8 items-center">
+                    {sanitizeName(x.name.replace("surface-", ""))}
+                  </span>
+                  <CopyButton copyText={x.name} size="small" />
                 </dt>
                 <dd className="mt-auto text-medium text-text-subtle">
                   {ref ? (
@@ -249,14 +241,12 @@ export const SemanticView = ({ cat }: { cat: string }) => {
                   style={{ backgroundColor: `var(${x.name})` }}
                 />
               </div>
-              <dl className="grid h-full">
-                <dt className="inline-flex items-center gap-2">
-                  <CopyButton
-                    text={sanitizeName(x.name.replace("surface-", ""))}
-                    copyText={x.name}
-                    size="small"
-                    iconPosition="right"
-                  />
+              <dl>
+                <dt className="inline-flex items-start gap-1 text-medium">
+                  <span className="flex min-h-8 items-center">
+                    {sanitizeName(x.name.replace("surface-", ""))}
+                  </span>
+                  <CopyButton copyText={x.name} size="small" />
                 </dt>
                 <dd className="mt-auto text-medium text-text-subtle">
                   {ref ? (
@@ -294,14 +284,12 @@ export const SemanticView = ({ cat }: { cat: string }) => {
             >
               <div className="component-checkered-bg z-[-1] h-16 w-16" />
             </div>
-            <dl className="grid h-full">
-              <dt className="inline-flex items-center gap-2">
-                <CopyButton
-                  text={sanitizeName(x.name.replace("surface-", ""))}
-                  copyText={x.name}
-                  size="small"
-                  iconPosition="right"
-                />
+            <dl>
+              <dt className="inline-flex items-start gap-1 text-medium">
+                <span className="flex min-h-8 items-center">
+                  {sanitizeName(x.name.replace("surface-", ""))}
+                </span>
+                <CopyButton copyText={x.name} size="small" />
               </dt>
               <dd className="mt-auto text-medium text-text-subtle">
                 {ref ? (

aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Shadow.tsx

@@ -17,14 +17,12 @@ export const ShadowView = ({ cat }: { cat: string }) => {
               }}
               className="mr-3 grid h-16 w-16 place-content-center rounded-lg text-4xl leading-none"
             />
-            <dl className="grid h-full">
-              <dt className="inline-flex items-center gap-2">
-                <CopyButton
-                  text={sanitizeName(x.name.replace("shadow-", ""))}
-                  copyText={x.name}
-                  size="small"
-                  iconPosition="right"
-                />
+            <dl>
+              <dt className="inline-flex items-start gap-1 text-medium">
+                <span className="flex min-h-8 items-center">
+                  {sanitizeName(x.name.replace("shadow-", ""))}
+                </span>
+                <CopyButton copyText={x.name} size="small" />
               </dt>
               <dd className="mt-auto text-medium text-text-subtle">
                 {x.value}

aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Shapes.tsx

@@ -15,15 +15,14 @@ export const ShapesView = ({ cat }: { cat: string }) => {
               style={{ borderRadius: x.value }}
               className="mr-3 grid h-16 w-16 place-content-center rounded-lg bg-surface-alt-3-strong text-4xl leading-none"
             />
-            <dl className="grid h-full">
-              <dt className="inline-flex items-center gap-2">
-                <CopyButton
-                  text={sanitizeName(x.name.replace("border-radius-", ""))}
-                  copyText={x.name}
-                  size="small"
-                  iconPosition="right"
-                />
+            <dl>
+              <dt className="inline-flex items-start gap-1 text-medium">
+                <span className="flex min-h-8 items-center">
+                  {sanitizeName(x.name.replace("border-radius-", ""))}
+                </span>
+                <CopyButton copyText={x.name} size="small" />
               </dt>
+
               <dd className="mt-auto text-medium text-text-subtle">
                 {x.value}
               </dd>

aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Zindex.tsx

@@ -34,14 +34,12 @@ export const ZindexView = ({ cat }: { cat: string }) => {
                 />
               ))}
             </div>
-            <dl className="grid h-full">
-              <dt className="inline-flex items-center gap-2">
-                <CopyButton
-                  text={sanitizeName(token.name.replace("z-index-", ""))}
-                  copyText={token.name}
-                  size="small"
-                  iconPosition="right"
-                />
+            <dl>
+              <dt className="inline-flex items-start gap-1 text-medium">
+                <span className="flex min-h-8 items-center">
+                  {sanitizeName(token.name.replace("z-index-", ""))}
+                </span>
+                <CopyButton copyText={token.name} size="small" />
               </dt>
               <dd className="mt-auto text-medium text-text-subtle">
                 {token.value}

aksel.nav.no/website/components/sanity-modules/token-view/parts/utilities.ts

@@ -20,5 +20,13 @@ export const getGlobalReference = (
     .filter(([key]) => key.startsWith("global-"))
     .reduce((acc, [, value]) => [...acc, ...value], []);
 
-  return globalRefs.find(({ value }) => semanticValue === value) ?? null;
+  return (
+    globalRefs.find(
+      ({ value, name }) => semanticValue === value && notBlacklistedName(name),
+    ) ?? null
+  );
 };
+
+function notBlacklistedName(name: string) {
+  return !["--a-nav-red"].includes(name);
+}

aksel.nav.no/website/components/sanity-modules/video/Video.stories.tsx

@@ -17,11 +17,14 @@ const args = {
     _key: getKey(),
     alt: "Alt-tekst for video",
     caption: "caption-tekst",
-    transkripsjon: "Transkripsjonstekst",
+    transkripsjon:
+      "Transkripsjonstekst avsnitt 1 linje 1\nLinje 2\n\nTranskripsjonstekst avsnitt 2",
     webm: {
       url: `https://cdn.sanity.io/files/${SANITY_PROJECT_ID}/production/274a2ceb69b056e1a7048ad1a5a2f8deff53a2f4.webm`,
       extension: "WEBM",
     },
+    track:
+      "data:@file/octet-stream;base64,V0VCVlRUCgowMDowMS4wMDAgLS0+IDAwOjAyLjAwMApIZWkhCgowMDowMy4wMDAgLS0+IDAwOjA0LjUwMApEZXR0ZSBlciBldCBla3NlbXBlbAoKMDA6MDQuNTAwIC0tPiAwMDowNS43MDAKcMOlIHVuZGVydGVrc3Rlci4=",
   },
 };
 

aksel.nav.no/website/components/sanity-modules/video/Video.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useId, useState } from "react";
 import { BodyLong, ReadMore } from "@navikt/ds-react";
 import ErrorBoundary from "@/error-boundary";
 import { VideoT } from "@/types";
@@ -9,6 +9,7 @@ type VideoProps = {
 
 const Video = ({ node }: VideoProps) => {
   const [open, setOpen] = useState(false);
+  const transcriptId = useId();
 
   if (!node || (!node.webm && !node.fallback) || !node.alt) {
     return null;
@@ -24,11 +25,9 @@ const Video = ({ node }: VideoProps) => {
         playsInline
         controls
         loop
-        aria-describedby={
-          node.transkripsjon ? node.alt + "transkript" : undefined
-        }
-        aria-label="Trykk space for å starte/pause video"
+        aria-describedby={node.transkripsjon ? transcriptId : undefined}
         poster="/images/og/video-poster.png"
+        crossOrigin="anonymous" // Needed for the <track>
       >
         <source src={node.webm.url} type={`video/${node.webm.extension}`} />
         {node.fallback && (
@@ -37,19 +36,27 @@ const Video = ({ node }: VideoProps) => {
             type={`video/${node.fallback.extension}`}
           />
         )}
+        {node.track && <track kind="captions" srcLang="no" src={node.track} />}
       </video>
       {node?.caption && (
-        <BodyLong as="figcaption" className="px-7">
+        <BodyLong as="figcaption" className="px-4">
           {node.caption}
         </BodyLong>
       )}
       {node?.transkripsjon && (
         <ReadMore
-          header="transkripsjon"
+          className="px-4"
+          header="Transkripsjon"
           open={open}
           onClick={() => setOpen((x) => !x)}
         >
-          <span id={node.alt + "transkript"}>{node.transkripsjon}</span>
+          <div id={transcriptId} className="whitespace-break-spaces">
+            {node.transkripsjon.split("\n\n").map((paragraph, i, array) => (
+              <BodyLong key={i} spacing={i < array.length - 1}>
+                {paragraph}
+              </BodyLong>
+            ))}
+          </div>
         </ReadMore>
       )}
     </figure>

aksel.nav.no/website/components/types/sanity-schema.ts

@@ -359,6 +359,7 @@ export type VideoT = ArrayObjectT<{
   alt: string;
   webm: { extension: string; url: string } | null;
   fallback?: { extension: string; url: string } | null;
+  track?: string;
   transkripsjon?: string;
   caption?: string;
 }>;

aksel.nav.no/website/pages/eksempler/readmore/default.tsx

@@ -13,7 +13,7 @@ const Example = () => {
 };
 
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
-export default withDsExample(Example);
+export default withDsExample(Example, { variant: "static" });
 
 /* Storybook story */
 export const Demo = {

aksel.nav.no/website/pages/eksempler/readmore/form.tsx

@@ -0,0 +1,34 @@
+import { Radio, RadioGroup, ReadMore } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <form>
+      <RadioGroup
+        legend="Kan du ta alle typer arbeid?"
+        description="Hvis du har helsemessige begrensninger og ikke kan ta alle typer arbeid, vil vi ta hensyn til dette."
+      >
+        <Radio value={true}>Ja</Radio>
+        <Radio value={false}>Nei</Radio>
+      </RadioGroup>
+      <ReadMore header="Dette regnes som helsemessige begrensninger">
+        Med helsemessige begrensninger mener vi funksjonshemming, sykdom,
+        allergier som hindrer deg i arbeidet eller andre årsaker som må tas
+        hensyn til når du skal finne nytt arbeid. Du må oppgi hva som gjelder
+        for deg, og dokumentere de helsemessige årsakene du viser til.
+      </ReadMore>
+    </form>
+  );
+};
+
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
+export default withDsExample(Example, { variant: "static" });
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 2,
+};

aksel.nav.no/website/pages/eksempler/readmore/small.tsx

@@ -13,7 +13,7 @@ const Example = () => {
 };
 
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
-export default withDsExample(Example);
+export default withDsExample(Example, { variant: "static" });
 
 /* Storybook story */
 export const Demo = {
@@ -21,5 +21,5 @@ export const Demo = {
 };
 
 export const args = {
-  index: 0,
+  index: 1,
 };

aksel.nav.no/website/pages/gp/[slug].tsx

@@ -60,6 +60,8 @@ export const getStaticProps: GetStaticProps = async ({
       slug,
     });
 
+  const chipsData = groupByTema(chipsDataAll)[slug];
+
   return {
     props: {
       tema,
@@ -71,7 +73,7 @@ export const getStaticProps: GetStaticProps = async ({
       title: "",
       chipsData: groupByTema(chipsDataAll)[slug],
     },
-    notFound: !tema || !heroNav.some((nav) => nav.slug === slug),
+    notFound: !tema || !heroNav.some((nav) => nav.slug === slug) || !chipsData,
     revalidate: 60,
   };
 };

aksel.nav.no/website/sanity/interface/queries.js

@@ -79,7 +79,8 @@ const defaultBlock = `
     "fallback": {
       "url": fallback.asset->url,
       "extension": fallback.asset->extension
-    }
+    },
+    "track": track.asset->url
  },
  _type == "alert" =>{
     ...,

aksel.nav.no/website/sanity/plugins/structure/index.tsx

@@ -10,6 +10,7 @@ import {
   PencilBoardIcon,
   RectangleSectionsIcon,
   TokenIcon,
+  EyeIcon,
 } from "@navikt/aksel-icons";
 import {
   SANITY_API_VERSION,
@@ -298,10 +299,11 @@ export const structure: StructureResolver = async (
                       .icon(FileTextIcon)
                       .id(`publication_flow`),
                     S.listItem()
-                      .title("Artikkel Visninger")
+                      .title("Artikkelvisninger")
+                      .icon(EyeIcon)
                       .child(
                         S.documentList()
-                          .title("Artikkel Visninger")
+                          .title("Artikkelvisninger")
                           .filter(`_type == 'article_views'`)
                           .apiVersion(SANITY_API_VERSION)
                           .menuItems([

aksel.nav.no/website/sanity/schema/documents/articleViews.tsx

@@ -2,7 +2,7 @@ import { defineField, defineType } from "sanity";
 import { LineGraphIcon } from "@navikt/aksel-icons";
 
 export const ArticleViews = defineType({
-  title: "Artikkel Visninger",
+  title: "Artikkelvisninger",
   name: "article_views",
   type: "document",
   readOnly: ({ currentUser }) =>
@@ -20,9 +20,9 @@ export const ArticleViews = defineType({
   },
   orderings: [
     {
-      title: "Views total",
-      name: "views",
-      by: [{ field: "views", direction: "desc" }],
+      title: "Views day",
+      name: "views_day",
+      by: [{ field: "views_day", direction: "desc" }],
     },
     {
       title: "Views week",
@@ -43,28 +43,29 @@ export const ArticleViews = defineType({
   fields: [
     defineField({
       type: "number",
-      name: "views",
-      description: "total lifetime views",
+      name: "views_day",
+      title: "Visninger i de siste 24 timer",
     }),
     defineField({
       type: "number",
       name: "views_week",
-      description: "views in the last week",
+      title: "Visninger siste 7 dager",
     }),
     defineField({
       type: "number",
       name: "views_month",
-      description: "views in the last month",
+      title: "Visninger siste 30 dager",
     }),
     defineField({
       type: "number",
       name: "views_year",
-      description: "views in the last year",
+      title: "Visninger siste 365 dager",
     }),
     defineField({
       title: "articleRef",
       name: "article_ref",
       type: "reference",
+      weak: true,
       to: { type: "aksel_artikkel" },
     }),
     defineField({

aksel.nav.no/website/sanity/schema/objects/shared/video.tsx

@@ -1,5 +1,27 @@
-import { defineField, defineType } from "sanity";
+import { createClient, groq } from "next-sanity";
+import { FileValue, defineField, defineType } from "sanity";
 import { VideoplayerIcon } from "@navikt/aksel-icons";
+import { clientConfig } from "@/sanity/config";
+
+const sanityClient = createClient({
+  ...clientConfig,
+  withCredentials: true,
+});
+
+const query = groq`*[_id == $id][0]{size}`;
+
+const validateFileSize = (maxSizeInMb: number) => (file: FileValue) => {
+  if (!file) {
+    return true;
+  }
+  return sanityClient
+    .fetch(query, { id: file.asset._ref })
+    .then((res) =>
+      res.size > 1024 * 1024 * maxSizeInMb
+        ? `Maks filstørrelse er ${maxSizeInMb} MB`
+        : true,
+    );
+};
 
 export const Video = defineType({
   name: "video",
@@ -9,33 +31,44 @@ export const Video = defineType({
   fields: [
     defineField({
       name: "webm",
-      title: "Video i WebM format",
-      description:
-        "Vi anbefaler å bruke Webm formatet. Formatet minsker fil-størrelse + perseverer kvalitet bedre",
+      title: "Video i WebM-format",
+      description: `Vi bruker WebM fordi det har bedre komprimering enn f.eks. MP4.
+        For å konvertere kan du f.eks. bruke Handbrake (https://handbrake.fr/).
+        OBS: Ikke legg inn store/lange videoer! Da er det bedre å lenke til en ekstern kilde.`,
       type: "file",
       options: {
         accept: "video/webm",
       },
-      validation: (Rule) => Rule.required(),
+      validation: (Rule) => Rule.required().custom(validateFileSize(30)),
     }),
     defineField({
       name: "fallback",
-      title: "Video i Mp4 format (fallback)",
+      title: "Video i MP4-format (fallback)",
+      description: "For eldre nettlesere som ikke støtter WebM",
       type: "file",
       options: {
         accept: "video/mp4",
       },
+      validation: (Rule) => Rule.custom(validateFileSize(60)),
+    }),
+    defineField({
+      name: "track",
+      title: "Undertekster (VTT)",
+      type: "file",
+      options: {
+        accept: ".vtt",
+      },
     }),
     defineField({
       name: "alt",
-      title: "Alt tekst for skjermlesere",
+      title: "Alt-tekst for skjermlesere",
       type: "string",
       validation: (Rule) => Rule.required(),
     }),
     defineField({
       name: "caption",
       title: "Videotekst",
-      description: "Kort beskrivelse som vises rett under videon",
+      description: "Kort beskrivelse som vises rett under videoen",
       type: "string",
     }),
     defineField({

package.json

@@ -11,7 +11,8 @@
     "storybook:aksel": "yarn concurrently \"yarn watch:tw\" \"yarn storybook dev -c aksel.nav.no/website/.storybook -p 6007\"",
     "dev": "yarn workspace aksel.nav.no dev",
     "docgen": "yarn workspaces foreach -p run docgen",
-    "changelog": "deno run --allow-read --allow-write --no-config scripts/deno/createMainChangelog.ts",
+    "changelog": "deno run --allow-read --allow-write --no-config scripts/changelog/createMainChangelog.ts",
+    "updateArticleViews": "deno run --allow-net --allow-env --allow-read --no-config scripts/article-views/update-article-views/main.ts",
     "chromatic": "npx chromatic --only-changed --project-token x3xqdfgkujg --build-script-name build:storybook",
     "build:storybook": "storybook build",
     "test": "yarn workspaces foreach -p run test",

scripts/article-views/Dockerfile.update-article-views

@@ -0,0 +1,16 @@
+FROM denoland/deno:1.40.2
+
+WORKDIR /app
+RUN chown -R deno:deno /app
+USER deno
+
+COPY scripts/article-views/deps.ts scripts/article-views/deps.ts
+RUN deno cache scripts/article-views/deps.ts
+
+# this COPY should copy over .env created in github action
+# only copies over what exists in the docker context 
+# check out the accompanying .dockerignore
+COPY . .
+RUN deno cache scripts/article-views/update-article-views/main.ts
+
+CMD ["run", "--allow-net", "--allow-env", "--allow-read", "scripts/article-views/update-article-views/main.ts"]

scripts/article-views/Dockerfile.update-article-views.dockerignore

@@ -0,0 +1,3 @@
+*
+!aksel.nav.no/website/sanity/config.ts
+!scripts/article-views/*

scripts/article-views/delete-article-views/main.ts

@@ -0,0 +1,45 @@
+import * as path from "https://deno.land/std@0.102.0/path/mod.ts";
+import { load } from "https://deno.land/std@0.212.0/dotenv/mod.ts";
+import { createClient } from "npm:next-sanity";
+import { clientConfig } from "../../../aksel.nav.no/website/sanity/config.ts";
+import { queryArticleViews } from "../queries.ts";
+
+/*
+  this part is a bit silly: script "plumbing" essentially. ModuleDir is the root of this
+  current file, it's used so relative paths from this file into the rest of the repo will
+  work as expected regardless of where it is called from (disregarding CWD of caller)
+  it's a WEB-first API, so we get files in URL format, these must be converted to a path
+
+  Currently the script is located `scripts/deno/`, so we go up ../../ to get to the project root
+*/
+const env_file = `${path.dirname(path.fromFileUrl(Deno.mainModule))}/../.env`;
+await load({
+  envPath: `${env_file}`,
+  export: true,
+});
+
+const token = Deno.env.get("SANITY_WRITE_KEY");
+if (!token) {
+  throw new Error("Missing SANITY_WRITE_KEY");
+}
+
+const noCdnClient = createClient({
+  ...clientConfig,
+  maxRetries: 5,
+  token,
+});
+
+const transactionClient = noCdnClient.transaction();
+
+const document_ids = [];
+
+const articleViewDocs = await noCdnClient.fetch(queryArticleViews);
+for (const articleViewDoc of articleViewDocs) {
+  document_ids.push(articleViewDoc._id);
+}
+
+document_ids.forEach(async (doc) => {
+  await transactionClient.delete(doc);
+});
+const res_commit = await transactionClient.commit({ dryRun: false });
+console.log({ res_commit });

scripts/article-views/deps.ts

@@ -0,0 +1,3 @@
+export * as path from "https://deno.land/std@0.102.0/path/mod.ts";
+export { load } from "https://deno.land/std@0.212.0/dotenv/mod.ts";
+export { createClient } from "npm:@sanity/client";

scripts/article-views/nais-update-views-job.yml

@@ -0,0 +1,23 @@
+apiVersion: nais.io/v1
+kind: Naisjob
+metadata:
+  name: update-views-job
+  namespace: designsystem
+  labels:
+    team: designsystem
+spec:
+  image: {{ image }}
+  schedule: "0 * * * *"
+  command: 
+    - deno
+    - run
+    - --allow-net
+    - --allow-env
+    - --allow-read
+    - scripts/article-views/update-article-views/main.ts
+  restartPolicy: Never
+  accessPolicy:
+    outbound:
+      external:
+        - host: hnbe3yhs.api.sanity.io
+        - host: reops-proxy.intern.nav.no

scripts/article-views/queries.ts

@@ -0,0 +1,12 @@
+export const queryArticleURLs = `
+*[_type == "aksel_artikkel" && !(_id in path("drafts.**"))] {
+  _id,
+  "slug": slug.current
+}
+`;
+
+export const queryArticleViews = `
+*[_type == "article_views"] {
+  _id,
+}
+`;

scripts/article-views/update-article-views/main.ts

@@ -0,0 +1,137 @@
+import { clientConfig } from "../../../aksel.nav.no/website/sanity/config.ts";
+import { createClient, load, path } from "../deps.ts";
+import { queryArticleURLs, queryArticleViews } from "../queries.ts";
+import { amplitudeFetchJSON, hashString, sum_last_n } from "./utils.ts";
+
+/*
+  this part is a bit silly: script "plumbing" essentially. ModuleDir is the root of this
+  current file, it's used so relative paths from this file into the rest of the repo will
+  work as expected regardless of where it is called from (disregarding CWD of caller)
+  it's a WEB-first API, so we get files in URL format, these must be converted to a path
+
+  Currently the script is located `scripts/deno/`, so we go up ../../ to get to the project root
+*/
+const env_file = `${path.dirname(path.fromFileUrl(Deno.mainModule))}/../.env`;
+await load({
+  envPath: `${env_file}`,
+  export: true,
+});
+
+type ViewData = {
+  views_day: number;
+  views_week: number;
+  views_month: number;
+  views_year: number;
+};
+
+const view_datas = new Map<string, Partial<ViewData>>();
+
+const views_config = {
+  views_day: {
+    chart_id: "e-f5vcqiqk",
+    sum_last_n: 24, // 24 hours in a day
+  },
+  views_week: {
+    chart_id: "e-69mzf301",
+    sum_last_n: 7, // 7 days in a week
+  },
+  views_month: {
+    chart_id: "e-wwh3n9l1",
+    sum_last_n: 30, // 30 days in a month
+  },
+  views_year: {
+    chart_id: "e-rzw8jk6j",
+    sum_last_n: 4, // 4 quarters in a year
+  },
+};
+
+for (const [view, config] of Object.entries(views_config)) {
+  const chartResult = await amplitudeFetchJSON(config.chart_id);
+  for (const [idx, view_entry] of chartResult.data.series.entries()) {
+    const url = chartResult.data.seriesLabels[idx][1];
+    const viewsN = sum_last_n(view_entry, config.sum_last_n);
+
+    const existing_data = view_datas.get(url) ?? {};
+    view_datas.set(url, {
+      ...existing_data,
+      [view]: viewsN,
+    });
+  }
+}
+
+// strip and aggregate all fragments (.../some/url#1234...) from the URL,
+// we count all the fragment views as views towards the URL without the fragment
+const merged_fragments_view_datas = new Map<string, ViewData>();
+for (const view_data of view_datas) {
+  let url = view_data[0];
+  if (view_data[0].includes("#")) {
+    url = view_data[0].split("#")[0];
+  }
+  const existing_data = merged_fragments_view_datas.get(url);
+  merged_fragments_view_datas.set(url, {
+    views_day: (existing_data?.views_day ?? 0) + (view_data[1]?.views_day ?? 0),
+    views_week:
+      (existing_data?.views_week ?? 0) + (view_data[1].views_week ?? 0),
+    views_month:
+      (existing_data?.views_month ?? 0) + (view_data[1].views_month ?? 0),
+    views_year:
+      (existing_data?.views_year ?? 0) + (view_data[1].views_year ?? 0),
+  });
+}
+
+const token = Deno.env.get("SANITY_WRITE_KEY");
+if (!token) {
+  throw new Error("Missing SANITY_WRITE_KEY");
+}
+
+const noCdnClient = createClient({
+  ...clientConfig,
+  maxRetries: 5,
+  token,
+});
+
+const transactionClient = noCdnClient.transaction();
+
+const document_ids = [];
+
+// delete all the article views (old data)
+const articleViewDocs = await noCdnClient.fetch(queryArticleViews);
+for (const articleViewDoc of articleViewDocs) {
+  document_ids.push(articleViewDoc._id);
+}
+document_ids.forEach(async (doc) => {
+  await transactionClient.delete(doc);
+});
+
+const documents = [];
+
+// re-build the article views
+const articles = await noCdnClient.fetch(queryArticleURLs);
+for (const article of articles) {
+  const url = `https://aksel.nav.no/${article.slug}`;
+
+  const data = merged_fragments_view_datas.get(url);
+
+  if (data) {
+    documents.push({
+      _id: `${hashString(url)}`,
+      _type: "article_views",
+      article_ref: {
+        _ref: article._id,
+        _type: "reference",
+        _weak: true,
+      },
+      url,
+      views_day: data?.views_day,
+      views_week: data?.views_week,
+      views_month: data?.views_month,
+      views_year: data?.views_year,
+    });
+  }
+}
+
+documents.forEach(async (doc) => {
+  await transactionClient.createOrReplace(doc);
+});
+const res_commit = await transactionClient.commit({ dryRun: false });
+console.log({ res_commit });

scripts/article-views/update-article-views/utils.ts

@@ -0,0 +1,25 @@
+export const hashString = (str: string) => {
+  let output = 1;
+  for (let i = 0; i < str.length; i++) {
+    output *= str[i].charCodeAt(0);
+    output %= Number.MAX_SAFE_INTEGER;
+  }
+
+  return output;
+};
+
+export const amplitudeFetchJSON = async (chart_id: string) => {
+  const url = `https://reops-proxy.intern.nav.no/amplitude/100002016/api/3/chart/${chart_id}/query`;
+  console.log({ url });
+  return await fetch(url)
+    .then((res) => res.json())
+    .catch((e) => {
+      throw new Error(e);
+    });
+};
+
+export const sum_last_n = (view_entry: { value: number }[], last_n: number) => {
+  return view_entry
+    .slice(-last_n) // the query holds more than 24 hours of data, but we only want the last 24
+    .reduce((a: number, b: { value: number }) => a + b.value, 0);
+};

yarn.lock

@@ -3449,7 +3449,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/aksel-icons@^5.15.1, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
+"@navikt/aksel-icons@^5.17.4, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
   version: 0.0.0-use.local
   resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons"
   dependencies:
@@ -3476,8 +3476,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@navikt/aksel-stylelint@workspace:@navikt/aksel-stylelint"
   dependencies:
-    "@navikt/ds-css": ^5.15.1
-    "@navikt/ds-tokens": ^5.15.1
+    "@navikt/ds-css": ^5.17.4
+    "@navikt/ds-tokens": ^5.17.4
     "@types/jest": ^29.0.0
     concurrently: 7.2.1
     copyfiles: 2.4.1
@@ -3495,7 +3495,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@navikt/aksel@workspace:@navikt/aksel"
   dependencies:
-    "@navikt/ds-css": 5.15.1
+    "@navikt/ds-css": 5.17.4
     "@types/inquirer": ^9.0.3
     "@types/jest": ^29.0.0
     axios: 1.6.0
@@ -3519,11 +3519,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-css@*, @navikt/ds-css@5.15.1, @navikt/ds-css@^5.15.1, @navikt/ds-css@^5.9.2, @navikt/ds-css@workspace:@navikt/core/css":
+"@navikt/ds-css@*, @navikt/ds-css@5.17.4, @navikt/ds-css@^5.17.4, @navikt/ds-css@^5.9.2, @navikt/ds-css@workspace:@navikt/core/css":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-css@workspace:@navikt/core/css"
   dependencies:
-    "@navikt/ds-tokens": ^5.15.1
+    "@navikt/ds-tokens": ^5.17.4
     cssnano: 6.0.0
     fast-glob: 3.2.11
     lodash: 4.17.21
@@ -3536,13 +3536,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-react@*, @navikt/ds-react@^5.15.1, @navikt/ds-react@^5.9.2, @navikt/ds-react@workspace:@navikt/core/react":
+"@navikt/ds-react@*, @navikt/ds-react@^5.17.4, @navikt/ds-react@^5.9.2, @navikt/ds-react@workspace:@navikt/core/react":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-react@workspace:@navikt/core/react"
   dependencies:
     "@floating-ui/react": 0.25.4
-    "@navikt/aksel-icons": ^5.15.1
-    "@navikt/ds-tokens": ^5.15.1
+    "@navikt/aksel-icons": ^5.17.4
+    "@navikt/ds-tokens": ^5.17.4
     "@radix-ui/react-tabs": 1.0.0
     "@radix-ui/react-toggle-group": 1.0.0
     "@testing-library/dom": 8.13.0
@@ -3576,11 +3576,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tailwind@^5.15.1, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
+"@navikt/ds-tailwind@^5.17.4, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind"
   dependencies:
-    "@navikt/ds-tokens": ^5.15.1
+    "@navikt/ds-tokens": ^5.17.4
     "@types/jest": ^29.0.0
     color: 4.2.3
     jest: ^29.0.0
@@ -3592,7 +3592,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tokens@^5.15.1, @navikt/ds-tokens@workspace:@navikt/core/tokens":
+"@navikt/ds-tokens@^5.17.4, @navikt/ds-tokens@workspace:@navikt/core/tokens":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
   dependencies:
@@ -8842,11 +8842,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "aksel.nav.no@workspace:aksel.nav.no"
   dependencies:
-    "@navikt/aksel-icons": ^5.15.1
-    "@navikt/ds-css": ^5.15.1
-    "@navikt/ds-react": ^5.15.1
-    "@navikt/ds-tailwind": ^5.15.1
-    "@navikt/ds-tokens": ^5.15.1
+    "@navikt/aksel-icons": ^5.17.4
+    "@navikt/ds-css": ^5.17.4
+    "@navikt/ds-react": ^5.17.4
+    "@navikt/ds-tailwind": ^5.17.4
+    "@navikt/ds-tokens": ^5.17.4
   languageName: unknown
   linkType: soft