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,15 @@
 # @navikt/aksel-icons
 
+## 5.17.5
+
+## 5.17.4
+
+## 5.17.3
+
+## 5.17.2
+
+## 5.17.1
+
 ## 5.17.0
 
 ## 5.16.0

@navikt/aksel-icons/package.json

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

@navikt/aksel-stylelint/CHANGELOG.md

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

@navikt/aksel-stylelint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-stylelint",
-  "version": "5.17.0",
+  "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.0",
-    "@navikt/ds-tokens": "^5.17.0",
+    "@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,40 @@
 # @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
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.17.1
+
 ## 5.17.0
 
 ### Patch Changes

@navikt/aksel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel",
-  "version": "5.17.0",
+  "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.0",
+    "@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,23 @@
 # @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
 
 ### Minor Changes

@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.0",
+  "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.0",
+    "@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,57 @@
 # @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
+
+- Eksponer variabelen "role" i Search-komponenten ([#2667](https://github.com/navikt/aksel/pull/2667))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.17.1
+  - @navikt/aksel-icons@5.17.1
+
 ## 5.17.0
 
 ### Minor Changes

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "5.17.0",
+  "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.0",
-    "@navikt/ds-tokens": "^5.17.0",
+    "@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/search/Search.tsx

@@ -66,6 +66,10 @@ export interface SearchProps
    * Exposes the HTML size attribute
    */
   htmlSize?: number | string;
+    /*
+   * Exposes role attribute
+   */
+  role?: string
 }
 
 interface SearchComponent
@@ -114,6 +118,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
       onChange,
       onSearchClick,
       htmlSize,
+      role,
       ...rest
     } = props;
 
@@ -205,7 +210,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
               value={value ?? internalValue}
               onChange={(e) => handleChange(e.target.value)}
               type="search"
-              role="searchbox"
+              role={role ?? 'searchbox'}
               className={cl(
                 className,
                 "navds-search__input",

@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,15 @@
 # @navikt/ds-tailwind
 
+## 5.17.5
+
+## 5.17.4
+
+## 5.17.3
+
+## 5.17.2
+
+## 5.17.1
+
 ## 5.17.0
 
 ## 5.16.0

@navikt/core/tailwind/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tailwind",
-  "version": "5.17.0",
+  "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.0",
+    "@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,15 @@
 # @navikt/ds-tokens
 
+## 5.17.5
+
+## 5.17.4
+
+## 5.17.3
+
+## 5.17.2
+
+## 5.17.1
+
 ## 5.17.0
 
 ## 5.16.0

@navikt/core/tokens/package.json

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

CHANGELOG.md

@@ -4,10 +4,26 @@
 
 ### @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
 
+- Bleed: `marginInline='full'` og `reflectivePadding` kan nå brukes sammen. ([#2695](https://github.com/navikt/aksel/pull/2695))
+
+* :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

aksel.nav.no/package.json

@@ -16,10 +16,10 @@
     "playroom"
   ],
   "dependencies": {
-    "@navikt/aksel-icons": "^5.17.0",
-    "@navikt/ds-css": "^5.17.0",
-    "@navikt/ds-react": "^5.17.0",
-    "@navikt/ds-tailwind": "^5.17.0",
-    "@navikt/ds-tokens": "^5.17.0"
+    "@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