Version Packages (#2708)

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/release.yml

@@ -2,6 +2,9 @@ name: Release
 
 on:
   push:
+    paths:
+      - ".changeset/**"
+      - "@navikt/**"
     branches:
       - main
   workflow_dispatch:

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

@@ -4,14 +4,13 @@ on:
 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:

.prettierignore

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

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/aksel-icons
 
+## 5.18.0
+
+## 5.17.5
+
 ## 5.17.4
 
 ## 5.17.3

@navikt/aksel-icons/package.json

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

@navikt/aksel-stylelint/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/aksel-stylelint
 
+## 5.18.0
+
+## 5.17.5
+
 ## 5.17.4
 
 ## 5.17.3

@navikt/aksel-stylelint/package.json

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

@navikt/aksel/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @navikt/aksel
 
+## 5.18.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.18.0
+
+## 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

@navikt/aksel/package.json

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

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @navikt/ds-css
 
+## 5.18.0
+
+## 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

@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/package.json

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

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @navikt/ds-react
 
+## 5.18.0
+
+### Minor Changes
+
+- Portal: Ny komponent `Portal` som lar deg enkelt bruke `createPortal`, også på serversiden ([#2697](https://github.com/navikt/aksel/pull/2697))
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.18.0
+  - @navikt/aksel-icons@5.18.0
+
+## 5.17.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.17.5
+  - @navikt/aksel-icons@5.17.5
+
 ## 5.17.4
 
 ### Patch Changes

@navikt/core/react/package.json

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

@navikt/core/react/src/date/hooks/useDatepicker.tsx

@@ -53,7 +53,7 @@ export interface UseDatepickerOptions
    * Allows input of with 'yy' year format.
    * @default true
    * @Note Decision between 20th and 21st century is based on before(todays year - 80) ? 21st : 20th.
-   * In 2023 this equals to 1943 - 2042
+   * In 2024 this equals to 1944 - 2043
    */
   allowTwoDigitYear?: boolean;
   /**

@navikt/core/react/src/date/hooks/useMonthPicker.tsx

@@ -39,7 +39,7 @@ export interface UseMonthPickerOptions
    * Allows input of with 'yy' year format.
    * @default true
    * @Note Decision between 20th and 21st century is based on before(todays year - 80) ? 21st : 20th.
-   * In 2023 this equals to 1943 - 2042
+   * In 2024 this equals to 1944 - 2043
    */
   allowTwoDigitYear?: boolean;
   /**

@navikt/core/react/src/date/parts/DateInput.tsx

@@ -15,7 +15,7 @@ export interface DateInputProps
    */
   label: React.ReactNode;
   /**
-   * Shows label and description for screenreaders-only
+   * Shows label and description for screen readers only
    * @default false
    */
   hideLabel?: boolean;

@navikt/core/react/src/index.ts

@@ -10,6 +10,7 @@ export * from "./expansion-card";
 export * from "./form";
 export * from "./grid";
 export * from "./guide-panel";
+export * from "./overlays";
 export * from "./help-text";
 export * from "./internal-header";
 export * from "./link";

@navikt/core/react/src/overlays/index.ts

@@ -0,0 +1,2 @@
+export { Portal } from "./portal/Portal";
+export type { PortalProps } from "./portal/Portal";

@navikt/core/react/src/overlays/portal/Portal.stories.tsx

@@ -0,0 +1,99 @@
+import React from "react";
+import { Box } from "../../layout/box";
+import { Provider } from "../../provider";
+import { Portal } from "./Portal";
+
+export default {
+  title: "Utilities/Portal",
+  parameters: {
+    chromatic: { disable: true },
+  },
+};
+
+export const Default = () => {
+  return (
+    <Box background="surface-neutral-subtle" border>
+      <h1>In regular DOM tree</h1>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus
+        necessitatibus quis esse nesciunt est velit voluptatibus. Distinctio eum
+        commodi tempora unde. Nulla vel tempora incidunt? Voluptatem molestias
+        impedit commodi. Tenetur!
+      </p>
+      <Portal>
+        <h1>Inside Portal to different DOM tree</h1>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus
+          necessitatibus quis esse nesciunt est velit voluptatibus. Distinctio
+          eum commodi tempora unde. Nulla vel tempora incidunt? Voluptatem
+          molestias impedit commodi. Tenetur!
+        </p>
+      </Portal>
+    </Box>
+  );
+};
+
+export const CustomPortalRoot = () => {
+  const [portalContainer, setPortalContainer] =
+    React.useState<HTMLDivElement | null>(null);
+
+  return (
+    <Box background="surface-neutral-subtle">
+      <Box background="surface-alt-1-subtle">
+        <h1>Tree A</h1>
+        <Portal rootElement={portalContainer}>
+          <p>This is mounted to Tree B, while created inside Tree A</p>
+        </Portal>
+      </Box>
+      <Box background="surface-alt-3-subtle" ref={setPortalContainer}>
+        <h1>Tree B</h1>
+      </Box>
+    </Box>
+  );
+};
+
+export const CustomPortalRootFromProvider = () => {
+  const [portalContainer, setPortalContainer] =
+    React.useState<HTMLDivElement>();
+
+  return (
+    <Provider rootElement={portalContainer}>
+      <Box background="surface-neutral-subtle">
+        <Box background="surface-alt-1-subtle">
+          <h1>Tree A</h1>
+          <Portal>
+            <p>This is mounted to Tree B, while created inside Tree A</p>
+          </Portal>
+        </Box>
+        <Box background="surface-alt-3-subtle" ref={setPortalContainer}>
+          <h1>Tree B</h1>
+        </Box>
+      </Box>
+    </Provider>
+  );
+};
+
+export const AsChild = () => {
+  return (
+    <Box background="surface-neutral-subtle" border>
+      <h1>In regular DOM tree</h1>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus
+        necessitatibus quis esse nesciunt est velit voluptatibus. Distinctio eum
+        commodi tempora unde. Nulla vel tempora incidunt? Voluptatem molestias
+        impedit commodi. Tenetur!
+      </p>
+      <Portal asChild>
+        <div data-this-is-the-child>
+          <h1>Inside Portal to different DOM tree</h1>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus
+            necessitatibus quis esse nesciunt est velit voluptatibus. Distinctio
+            eum commodi tempora unde. Nulla vel tempora incidunt? Voluptatem
+            molestias impedit commodi. Tenetur!
+          </p>
+        </div>
+      </Portal>
+    </Box>
+  );
+};

@navikt/core/react/src/overlays/portal/Portal.tsx

@@ -0,0 +1,32 @@
+import React, { HTMLAttributes, forwardRef } from "react";
+import ReactDOM from "react-dom";
+import { useProvider } from "../../provider";
+import { Slot } from "../../util/Slot";
+import { AsChildProps } from "../../util/types";
+
+interface PortalBaseProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * An optional container where the portaled content should be appended.
+   */
+  rootElement?: HTMLElement | null;
+}
+
+export type PortalProps = PortalBaseProps & AsChildProps;
+
+export const Portal = forwardRef<HTMLDivElement, PortalProps>(
+  ({ rootElement, asChild, ...rest }, ref) => {
+    const contextRoot = useProvider()?.rootElement;
+    const root = rootElement ?? contextRoot ?? globalThis?.document?.body;
+
+    const Component = asChild ? Slot : "div";
+
+    return root
+      ? ReactDOM.createPortal(
+          <Component ref={ref} data-aksel-portal="" {...rest} />,
+          root,
+        )
+      : null;
+  },
+);
+
+export default Portal;

@navikt/core/react/src/tooltip/Tooltip.tsx

@@ -1,5 +1,4 @@
 import {
-  FloatingPortal,
   autoUpdate,
   arrow as flArrow,
   flip,
@@ -21,7 +20,7 @@ import React, {
   useRef,
 } from "react";
 import { ModalContext } from "../modal/ModalContext";
-import { useProvider } from "../provider";
+import Portal from "../overlays/portal/Portal";
 import { Detail } from "../typography";
 import { useId } from "../util/hooks";
 import { useControllableState } from "../util/hooks/useControllableState";
@@ -123,10 +122,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
 
     const arrowRef = useRef<HTMLDivElement | null>(null);
     const modalContext = useContext(ModalContext);
-    const providerRootElement = useProvider()?.rootElement;
-    const rootElement = modalContext
-      ? modalContext.ref.current
-      : providerRootElement;
+    const rootElement = modalContext ? modalContext.ref.current : undefined;
 
     const {
       x,
@@ -199,7 +195,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
               : children?.props["aria-describedby"],
           }),
         )}
-        <FloatingPortal root={rootElement}>
+        <Portal rootElement={rootElement}>
           {_open && (
             <div
               {...getFloatingProps({
@@ -253,7 +249,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
               )}
             </div>
           )}
-        </FloatingPortal>
+        </Portal>
       </>
     );
   },

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

@@ -20,10 +20,12 @@ export const Slot = React.forwardRef<HTMLElement, SlotProps>(
     }
 
     if (React.Children.count(children) > 1) {
-      console.error(
+      const error = new Error(
         "Aksel: Components using 'asChild' expects to recieve a single React element child.",
       );
-      return React.Children.only(null);
+      error.name = "SlotError";
+      Error.captureStackTrace?.(error, Slot);
+      throw error;
     }
 
     return null;

@navikt/core/react/src/util/types/AsChildProps.ts

@@ -0,0 +1,37 @@
+export type AsChildProps =
+  | {
+      children: React.ReactElement | false | null;
+      /**
+       * Renders the component and its child as a single element,
+       * merging the props of the component with the props of the child.
+       *
+       * @example
+       * ```tsx
+       * <Component asChild data-prop>
+       *   <ChildComponent data-child />
+       * </Component>
+       *
+       * // Renders
+       * <MergedComponent data-prop data-child />
+       * ```
+       */
+      asChild: true;
+    }
+  | {
+      children: React.ReactNode;
+      /**
+       * Renders the component and its child as a single element,
+       * merging the props of the component with the props of the child.
+       *
+       * @example
+       * ```tsx
+       * <Component asChild data-prop>
+       *   <ChildComponent data-child />
+       * </Component>
+       *
+       * // Renders
+       * <MergedComponent data-prop data-child />
+       * ```
+       */
+      asChild?: false;
+    };

@navikt/core/react/src/util/types/index.ts

@@ -1 +1,2 @@
 export type { OverridableComponent } from "./OverridableComponent";
+export type { AsChildProps } from "./AsChildProps";

@navikt/core/tailwind/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/ds-tailwind
 
+## 5.18.0
+
+## 5.17.5
+
 ## 5.17.4
 
 ## 5.17.3

@navikt/core/tailwind/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tailwind",
-  "version": "5.17.4",
+  "version": "5.18.0",
   "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.4",
+    "@navikt/ds-tokens": "^5.18.0",
     "@types/jest": "^29.0.0",
     "color": "4.2.3",
     "jest": "^29.0.0",

@navikt/core/tokens/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/ds-tokens
 
+## 5.18.0
+
+## 5.17.5
+
 ## 5.17.4
 
 ## 5.17.3

@navikt/core/tokens/package.json

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

CHANGELOG.md

@@ -1,12 +1,20 @@
 # Changelog
 
+## 5.18
+
+### @navikt/ds-react
+
+- Portal: Ny komponent `Portal` som lar deg enkelt bruke `createPortal`, også på serversiden ([#2697](https://github.com/navikt/aksel/pull/2697))
+
 ## 5.17
 
 ### @navikt/ds-css
 
-- Checkbox: I noen edgecaser ved bruk av shadow-dom ble ikke checkmark sentert i Checkbox ([#2682](https://github.com/navikt/aksel/pull/2682))
+- ExpansionCard: Padding-top for Content er justert opp 8px (medium) og 4px (small) ([#2699](https://github.com/navikt/aksel/pull/2699))
 
-* Høykontrast: Komponenter støtter nå standard høykontrast-modus på Windows ([#2680](https://github.com/navikt/aksel/pull/2680))
+* 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
 
@@ -78,6 +86,10 @@
 
 - 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))
+
 ### @navikt/ds-react
 
 - Accordion.Item, Dropdown, ReadMore og Tooltip: Har en ny prop `onOpenChange?: (open: boolean) => void;` som forteller nå-state når `open`-state endrer seg. Dette vil være nyttig hvis man ikke bruker controlled-state, men fortsatt ønsker å vite om komponenten er `open` eller ikke (f.eks logging). ([#2585](https://github.com/navikt/aksel/pull/2585))
@@ -86,10 +98,6 @@
 
 * 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-stylelint
@@ -254,6 +262,10 @@
 
 - :lipstick: CopyButton: Justert padding, gap og animasjon ([#2355](https://github.com/navikt/aksel/pull/2355))
 
+### @navikt/ds-tokens
+
+- Ny spacing token på 0.375rem ([#2370](https://github.com/navikt/aksel/pull/2370))
+
 ### @navikt/ds-react
 
 - :lipstick: Chips.Toggle: Ikon i uvalgt tilstand ([#2395](https://github.com/navikt/aksel/pull/2395))
@@ -274,10 +286,6 @@
 
 - :lipstick: CopyButton: Justert padding, gap og animasjon ([#2355](https://github.com/navikt/aksel/pull/2355))
 
-### @navikt/ds-tokens
-
-- Ny spacing token på 0.375rem ([#2370](https://github.com/navikt/aksel/pull/2370))
-
 ### @navikt/aksel-icons
 
 - Ikoner: Nye ikoner `ChevronLeftFirstCircle` og `ChevronRightLastCircle` ([#2365](https://github.com/navikt/aksel/pull/2365))
@@ -304,6 +312,10 @@
 
 - MonthPicker: Tilpasset padding og sizing på mobil. ([#2311](https://github.com/navikt/aksel/pull/2311))
 
+### @navikt/ds-tokens
+
+- Tokens: Tilbyr nå token literals for typer, tidligere string literals ([#2342](https://github.com/navikt/aksel/pull/2342))
+
 ### @navikt/ds-react
 
 - Datepicker: Popover legger seg nå ikke ovenfor input ([#2349](https://github.com/navikt/aksel/pull/2349))
@@ -330,10 +342,6 @@
 
 - Remove tabIndex="-1" on Popover to fix VoiceOver navigation issue inside Popover ([#2303](https://github.com/navikt/aksel/pull/2303))
 
-### @navikt/ds-tokens
-
-- 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))
@@ -350,16 +358,16 @@
 
 * Skeleton: Width fungerer nå med inline-variant av Skeleton ([#2273](https://github.com/navikt/aksel/pull/2273))
 
+### @navikt/ds-tokens
+
+- Box: Ny primitive, erstatter dagens `Panel` ([#2195](https://github.com/navikt/aksel/pull/2195))
+
 ### @navikt/ds-react
 
 - Box: Ny primitive, erstatter dagens `Panel` ([#2195](https://github.com/navikt/aksel/pull/2195))
 
 * Skeleton: Width fungerer nå med inline-variant av Skeleton ([#2273](https://github.com/navikt/aksel/pull/2273))
 
-### @navikt/ds-tokens
-
-- Box: Ny primitive, erstatter dagens `Panel` ([#2195](https://github.com/navikt/aksel/pull/2195))
-
 ## 5.4
 
 ### @navikt/ds-css
@@ -368,6 +376,10 @@
 
 * ErrorSummary: Har nå 8px border-radius ([#2256](https://github.com/navikt/aksel/pull/2256))
 
+### @navikt/ds-tokens
+
+- Tokens: `data-theme="light"` vil nå tilbakestille theming ([#2238](https://github.com/navikt/aksel/pull/2238))
+
 ### @navikt/ds-react
 
 - MonthPicker: Fikset kalkulering av fromDate/toDate ([#2269](https://github.com/navikt/aksel/pull/2269))
@@ -376,10 +388,6 @@
 
 - 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/ds-css
@@ -479,6 +487,16 @@
 
 * Table: Alle størrelser har justert padding. Small-size table bruker nå også standard typografi-størrelse (18px). ([#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))
+
 ### @navikt/ds-react
 
 - ConfirmationPanel: Fikset opplesing av feilmelding ([#2199](https://github.com/navikt/aksel/pull/2199))
@@ -495,16 +513,6 @@
 
 * 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
@@ -659,6 +667,10 @@
 
 * 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-tokens
+
+- Shadow-tokens er oppdatert til mer tydeligere varianter ([PR](https://github.com/navikt/aksel/pull/2041))
+
 ### @navikt/ds-tailwind
 
 - Shadow-tokens er oppdatert ([PR](https://github.com/navikt/aksel/pull/2041))
@@ -671,10 +683,6 @@
 
 * 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
@@ -713,6 +721,12 @@
 
 - Alle description-felter på fieldsets har nå `text-subtle` som farge. ([PR](https://github.com/navikt/aksel/pull/2036))
 
+### @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))
@@ -741,24 +755,12 @@
 
 - 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))
@@ -775,6 +777,12 @@
 
 - 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
@@ -857,10 +865,6 @@
 
 ## 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))
@@ -869,6 +873,10 @@
 
 - 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))
+
 ### @navikt/aksel-icons
 
 - Oppdatert Statusikoner til å være tydeligere og mer konsistente. ([PR](https://github.com/navikt/aksel/pull/1959))
@@ -953,6 +961,10 @@
 
 ## 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))
@@ -961,10 +973,6 @@
 
 - List: Refaktorert nestede lister
 
-### @navikt/ds-tokens
-
-- Breakpoint-tokens lagt til ([PR](https://github.com/navikt/aksel/pull/1832))
-
 ## 2.4
 
 ### @navikt/ds-css
@@ -999,24 +1007,28 @@
 
 - Button: `Neutral`-variant.
 
-### @navikt/ds-react
-
-- ToggleGroup: `neutral`-variant ([PR](https://github.com/navikt/aksel/pull/1789))
-
-- Button: `neutral`-variant ([PR](https://github.com/navikt/aksel/pull/1789))
-
 ### @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-react
+
+- ToggleGroup: `neutral`-variant ([PR](https://github.com/navikt/aksel/pull/1789))
+
+- Button: `neutral`-variant ([PR](https://github.com/navikt/aksel/pull/1789))
+
 ## 2.1
 
 ### @navikt/ds-css
 
 - TextField: `small`-variant har nå 8px horisontal padding (før 4px)
 
+### @navikt/ds-tokens
+
+- Fikset feil danger-hover token ([PR](https://github.com/navikt/aksel/pull/1665))
+
 ### @navikt/ds-react
 
 - Datepicker: Fikset rekkefølge på `onValidate` og `onRangeChange` i useRangepicker-hook
@@ -1033,10 +1045,6 @@
 
 - Datepicker/Monthpicker: år med 2 siffer i input fungerer nå
 
-### @navikt/ds-tokens
-
-- Fikset feil danger-hover token ([PR](https://github.com/navikt/aksel/pull/1665))
-
 ## 2.0
 
 ### @navikt/ds-css
@@ -1051,6 +1059,10 @@
 
 * Tokens: Alle komponenter bruker nå semantiske tokens for som standard, med innebygd støtte for komponent-spesifikke tokens.
 
+### @navikt/ds-tokens
+
+- Alle token er oppdatert til nytt format. ([Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112))
+
 ### @navikt/ds-tailwind
 
 - Alle token er oppdatert til nytt format. ([Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112))
@@ -1073,10 +1085,6 @@
 
 * 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.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"
+    "@navikt/aksel-icons": "^5.18.0",
+    "@navikt/ds-css": "^5.18.0",
+    "@navikt/ds-react": "^5.18.0",
+    "@navikt/ds-tailwind": "^5.18.0",
+    "@navikt/ds-tokens": "^5.18.0"
   }
 }

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/datepicker/input-range.tsx

@@ -44,5 +44,5 @@ export const Demo = {
 
 export const args = {
   index: 7,
-  desc: "Før du belger å bruke range, vurder om to enkelte datepickere for start/slutt-dato ville vært bedre. Range fungerer bedre for korte perioder innenfor en måned.",
+  desc: "Før du velger å bruke range, vurder om to separate datepickere i single mode er bedre. Range fungerer best for korte perioder innenfor en måned.",
 };

aksel.nav.no/website/pages/eksempler/datepicker/two-digit-year.tsx

@@ -32,5 +32,5 @@ export const Demo = {
 
 export const args = {
   index: 10,
-  desc: "Prop allowTwoDigitYear legger til støtte for 'yy'-format. Tilgjengelig year-range vil være fra 1943-2042 (2023).",
+  desc: "Prop 'allowTwoDigitYear' legger til støtte for 'yy'-format. Tilgjengelig year-range vil være 80 år bakover og 19 år framover. I 2024 tilsvarer det 1944-2043.",
 };

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

scripts/docgen.ts

@@ -7,20 +7,12 @@ const options: docgen.ParserOptions = {
   shouldRemoveUndefinedFromOptional: true,
 
   propFilter: (prop) => {
-    if (prop.name === "className") return true;
-    if (prop.declarations !== undefined && prop.declarations.length > 0) {
-      const hasPropAdditionalDescription = prop.declarations.some(
-        (declaration) => {
-          return (
-            !declaration.fileName.includes("node_modules") ||
-            declaration.name === "RefAttributes"
-          );
-        },
-      );
-
-      return hasPropAdditionalDescription;
+    if (prop.name === "className" || prop.parent?.name === "RefAttributes") {
+      return true;
+    }
+    if (prop.parent?.fileName.includes("/node_modules/@types/react/")) {
+      return false;
     }
-
     return true;
   },
 };
@@ -36,7 +28,7 @@ const genDocs = () => {
         !x.toLowerCase().includes("pictogram"),
     );
 
-  const res: any[] = [];
+  const res: docgen.ComponentDoc[][] = [];
   const fails: string[] = [];
 
   files.forEach((file) => {
@@ -50,17 +42,11 @@ const genDocs = () => {
 
   console.log({ Documented: res.length, fails });
 
-  const cleaned = res.flat().reduce(
-    (old, cur) => [
-      ...old,
-      {
-        filePath: cur.filePath,
-        displayName: cur.displayName,
-        props: cur.props,
-      },
-    ],
-    [],
-  );
+  const cleaned = res.flat().map((file) => ({
+    filePath: file.filePath,
+    displayName: file.displayName,
+    props: file.props,
+  }));
 
   writeFileSync(`_docs.json`, JSON.stringify(cleaned, null, 2));
 };

yarn.lock

@@ -3449,7 +3449,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/aksel-icons@^5.17.2, @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.17.2
-    "@navikt/ds-tokens": ^5.17.2
+    "@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.17.2
+    "@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.17.2, @navikt/ds-css@^5.17.2, @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.17.2
+    "@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.17.2, @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.17.2
-    "@navikt/ds-tokens": ^5.17.2
+    "@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.17.2, @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.17.2
+    "@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.17.2, @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.17.2
-    "@navikt/ds-css": ^5.17.2
-    "@navikt/ds-react": ^5.17.2
-    "@navikt/ds-tailwind": ^5.17.2
-    "@navikt/ds-tokens": ^5.17.2
+    "@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