Version Packages (#1774)

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

.github/ISSUE_TEMPLATE/new-component.yml

@@ -0,0 +1,24 @@
+name: Ny komponent
+description: Send et ønske om en eller flere nye komponenter
+title: "[Ny komponent]: "
+labels: ["nytt ✨", "forespørsel 🥰", "komponenter 🧩"]
+assignees:
+  - olejorgenbakken
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Takk for at du bidrar inn i Aksel!
+  - type: input
+    id: title
+    attributes:
+      label: Navn på komponent
+      description: Hva er navnet på komponenten du ønsker deg?
+      placeholder: eks. datepicker
+    validations:
+      required: true
+  - type: textarea
+    id: examples
+    attributes:
+      label: Eksempel på komponenten
+      description: Send en lenke til eksempler på komponenten

.github/ISSUE_TEMPLATE/new-icon.yaml

@@ -0,0 +1,24 @@
+name: Nytt ikon
+description: Send et ønske om et eller flere nye ikoner
+title: "[Nytt ikon]: "
+labels: ["nytt ✨", "ikoner 🖼", "forespørsel 🥰"]
+assignees:
+  - olejorgenbakken
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Takk for at du bidrar inn i Aksel!
+  - type: input
+    id: title
+    attributes:
+      label: Navn på ikonet
+      description: Hva er navnet på ikonet du ønsker deg?
+      placeholder: eks. send
+    validations:
+      required: true
+  - type: textarea
+    id: examples
+    attributes:
+      label: Eksempel på ikonet
+      description: Send en lenke til eksempler på ikonet

.github/ISSUE_TEMPLATE/update-component.yml

@@ -0,0 +1,16 @@
+name: Innspill til komponent
+description: Send inn innspill til komponent
+title: "[Innspill til komponent]: "
+labels: ["forespørsel 🥰", "komponenter 🧩", "nytt ✨", "beta 🧪"]
+assignees:
+  - olejorgenbakken
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Takk for at du bidrar inn i Aksel!
+  - type: textarea
+    id: feeback
+    attributes:
+      label: Tilbakemelding
+      description: Beskriv hvilke tilbakemeldinger du har til komponenten

.github/ISSUE_TEMPLATE/update-icon.yml

@@ -0,0 +1,16 @@
+name: Innspill til ikon
+description: Send inn innspill til ikon
+title: "[Innspill til ikon]: "
+labels: ["forespørsel 🥰", "nytt ✨"]
+assignees:
+  - olejorgenbakken
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Takk for at du bidrar inn i Aksel!
+  - type: textarea
+    id: feeback
+    attributes:
+      label: Tilbakemelding
+      description: Beskriv hvilke tilbakemeldinger du har til ikonet

.github/workflows/backup-sanity.yml

@@ -26,7 +26,7 @@ jobs:
         run: cd aksel.nav.no/website && yarn
 
       - name: Export dataset
-        run: cd aksel.nav.no/website && SANITY_TOKEN=${{secrets.SANITY_DATASET_EDITOR_TOKEN}} yarn backup
+        run: cd aksel.nav.no/website && SANITY_PREVIEW_TOKEN=${{secrets.SANITY_DATASET_EDITOR_TOKEN}} yarn backup
       - name: Upload GCP bucket
         uses: "google-github-actions/auth@v0"
         with:

@navikt/codemod/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @navikt/ds-codemod
 
+## 2.1.4
+
+## 2.1.3
+
+## 2.1.2
+
+## 2.1.1
+
 ## 2.1.0
 
 ## 2.0.18

@navikt/codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-codemod",
-  "version": "2.1.0",
+  "version": "2.1.4",
   "description": "Aksel codemods for NAVs designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",

@navikt/community/navno/package.json

@@ -39,8 +39,8 @@
     "build-pict": "svgr --silent --index-template index-template.js --out-dir src/pictograms pictograms"
   },
   "dependencies": {
-    "@navikt/ds-icons": "^2.1.0",
-    "@navikt/ds-react": "^2.1.0",
+    "@navikt/ds-icons": "^2.1.4",
+    "@navikt/ds-react": "^2.1.4",
     "clsx": "^1.1.1"
   },
   "devDependencies": {

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @navikt/ds-css
 
+## 2.1.4
+
+## 2.1.3
+
+## 2.1.2
+
+### Patch Changes
+
+- [`62f36da5e`](https://github.com/navikt/Designsystemet/commit/62f36da5e74fc7f53414d42b310c3b57597795bc) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Small textfield har nå 8px horisontal padding (4px før)
+
+## 2.1.1
+
 ## 2.1.0
 
 ## 2.0.18

@navikt/core/css/form/text-field.css

@@ -27,7 +27,7 @@
 }
 
 .navds-form-field--small .navds-text-field__input {
-  padding: 0 0.25rem;
+  padding: 0 0.5rem;
   min-height: 32px;
 }
 

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "2.1.0",
+  "version": "2.1.4",
   "description": "CSS for NAV Designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -20,7 +20,7 @@
     "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^2.1.0",
+    "@navikt/ds-tokens": "^2.1.4",
     "normalize.css": "^8.0.1",
     "postcss": "^8.4.0",
     "postcss-cli": "^9.0.0",

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @navikt/ds-react
 
+## 2.1.4
+
+### Patch Changes
+
+- [`87f194c1d`](https://github.com/navikt/Designsystemet/commit/87f194c1dc29b10a604de676b358d117e2dbf52f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset edgecase i useRangepicker der valg av startdato etter sluttdato ga feil output
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.1.4
+
+## 2.1.3
+
+### Patch Changes
+
+- [#1771](https://github.com/navikt/Designsystemet/pull/1771) [`494566e60`](https://github.com/navikt/Designsystemet/commit/494566e604e958363f75ebfa2adbc1669397636a) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Monthpicker håndterer nå visning av År riktig
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.1.3
+
+## 2.1.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.1.2
+
+## 2.1.1
+
+### Patch Changes
+
+- [#1759](https://github.com/navikt/Designsystemet/pull/1759) [`dcf5cfc06`](https://github.com/navikt/Designsystemet/commit/dcf5cfc06b751341559ef30085bd974820531e57) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset @types/react v18 feil introdusert i v2.0.6
+
+- Updated dependencies [[`dcf5cfc06`](https://github.com/navikt/Designsystemet/commit/dcf5cfc06b751341559ef30085bd974820531e57)]:
+  - @navikt/ds-icons@2.1.1
+
 ## 2.1.0
 
 ### Minor Changes

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "2.1.0",
+  "version": "2.1.4",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.17.0",
-    "@navikt/ds-icons": "^2.1.0",
+    "@navikt/ds-icons": "^2.1.4",
     "@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.stories.tsx

@@ -164,6 +164,7 @@ export const UseRangedDatepicker = () => {
     UNSAFE_useRangeDatepicker({
       fromDate: new Date("Aug 23 2019"),
       onRangeChange: console.log,
+      onValidate: console.log,
     });
 
   return (

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

@@ -191,6 +191,8 @@ export const useMonthpicker = (
     if (isValidDate(day)) {
       setYear(day);
       setInputValue(formatDateForInput(day, locale, "month", inputFormat));
+    } else {
+      setYear(defaultSelected ?? defaultYear ?? today);
     }
   };
 
@@ -211,12 +213,14 @@ export const useMonthpicker = (
     if (month) {
       setOpen(false);
       inputRef.current && inputRef.current.focus();
+      setYear(month);
     }
 
     if (!required && !month) {
       updateMonth(undefined);
       updateValidation({ isValidMonth: false, isEmpty: true });
       setInputValue("");
+      setYear(defaultYear ?? today);
       return;
     }
     updateMonth(month);

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

@@ -1,4 +1,5 @@
 import differenceInCalendarDays from "date-fns/differenceInCalendarDays";
+import { isBefore } from "date-fns/esm";
 import isWeekend from "date-fns/isWeekend";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { DateRange, isMatch } from "react-day-picker";
@@ -371,24 +372,26 @@ export const useRangeDatepicker = (
     if (range?.from && range?.to) {
       setOpen(false);
     }
-    const prevToRange =
+    let prevToRange =
       !selectedRange?.from && selectedRange?.to ? selectedRange?.to : range?.to;
 
+    const resetTo = isBefore(prevToRange, range?.from);
+
     range?.from
       ? setFromInputValue(
           formatDateForInput(range?.from, locale, "date", inputFormat)
         )
       : setFromInputValue("");
-    prevToRange
+    prevToRange && !resetTo
       ? setToInputValue(
           formatDateForInput(prevToRange, locale, "date", inputFormat)
         )
       : setToInputValue("");
     updateValidation(
       { isValidDate: !!range?.from, isEmpty: !range?.from },
-      { isValidDate: !!range?.to, isEmpty: !prevToRange }
+      { isValidDate: !!range?.to, isEmpty: !prevToRange || resetTo }
     );
-    updateRange({ from: range?.from, to: prevToRange });
+    updateRange({ from: range?.from, to: resetTo ? undefined : prevToRange });
   };
 
   const fromChange = (

@navikt/core/react/src/date/monthpicker/MonthPicker.tsx

@@ -134,7 +134,7 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
     );
 
     const handleSelect = (month?: Date) => {
-      setSelectedMonth(month);
+      !onMonthSelect && setSelectedMonth(month);
       onMonthSelect?.(month);
       month && (onClose?.() ?? setOpen(false));
     };
@@ -175,7 +175,7 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
             >
               <RootProvider
                 locale={getLocaleFromString(locale)}
-                selected={selected}
+                selected={selected ?? selectedMonth}
                 toDate={toDate}
                 fromDate={fromDate}
                 month={selected ?? selectedMonth}

@navikt/core/react/src/guide-panel/Illustration.tsx

@@ -6,11 +6,15 @@ interface SVGRProps {
   titleId?: string;
 }
 
-export const DefaultIllustration = ({
+export type DefaultIllustrationType = React.FunctionComponent<
+  SVGProps<SVGSVGElement> & SVGRProps
+>;
+
+export const DefaultIllustration: DefaultIllustrationType = ({
   title,
   titleId: _titleId,
   ...props
-}: SVGProps<SVGSVGElement> & SVGRProps) => {
+}) => {
   let titleId: string | undefined = useId();
   titleId = title ? (_titleId ? _titleId : "title-" + titleId) : undefined;
 

@navikt/core/react/src/loader/Loader.tsx

@@ -33,7 +33,12 @@ export interface LoaderProps extends SVGProps<SVGSVGElement> {
   variant?: "neutral" | "interaction" | "inverted";
 }
 
-export const Loader = forwardRef<SVGSVGElement, LoaderProps>(
+/* Workaround for @types/react v17/v18 feil */
+export type LoaderType = React.ForwardRefExoticComponent<
+  LoaderProps & React.RefAttributes<SVGSVGElement>
+>;
+
+export const Loader: LoaderType = forwardRef<SVGSVGElement, LoaderProps>(
   (
     {
       children,

@navikt/core/tailwind/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @navikt/ds-tailwind
 
+## 2.1.4
+
+## 2.1.3
+
+## 2.1.2
+
+## 2.1.1
+
 ## 2.1.0
 
 ## 2.0.18

@navikt/core/tailwind/package.json

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

@navikt/core/tokens/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @navikt/ds-tokens
 
+## 2.1.4
+
+## 2.1.3
+
+## 2.1.2
+
+## 2.1.1
+
 ## 2.1.0
 
 ### Patch Changes

@navikt/core/tokens/package.json

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

@navikt/icons/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @navikt/ds-icons
 
+## 2.1.4
+
+## 2.1.3
+
+## 2.1.2
+
+## 2.1.1
+
+### Patch Changes
+
+- [#1759](https://github.com/navikt/Designsystemet/pull/1759) [`dcf5cfc06`](https://github.com/navikt/Designsystemet/commit/dcf5cfc06b751341559ef30085bd974820531e57) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset @types/react v18 feil introdusert i v2.0.6
+
 ## 2.1.0
 
 ## 2.0.18

@navikt/icons/cleanTypes.js

@@ -0,0 +1,20 @@
+/**
+ * Fikser https://github.com/navikt/Designsystemet/issues/1758
+ */
+
+const fs = require("fs");
+
+const files = fs.readdirSync(`./esm`).filter((x) => x.endsWith(".d.ts"));
+
+files.forEach((file) => {
+  let data = fs.readFileSync(`./esm/${file}`).toString().split("\n");
+
+  data = data.map((x) => {
+    return x.includes("React.ForwardRefExoticComponent")
+      ? x.split(":")[0] +
+          `: React.ForwardRefExoticComponent<React.SVGProps<SVGSVGElement> & SVGRProps & React.RefAttributes<SVGSVGElement>>;`
+      : x;
+  });
+
+  fs.writeFileSync(`./esm/${file}`, data.join("\n"));
+});

@navikt/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-icons",
-  "version": "2.1.0",
+  "version": "2.1.4",
   "description": "Aksel icons for NAV",
   "author": "Aksel | NAV designsystem team",
   "repository": {
@@ -32,7 +32,7 @@
     "create-package-json-pointers-to-esm": "node ../../scripts/createPackageJsonsWithESMPointers.js",
     "create-icons": "svgr --silent --out-dir src svg",
     "clean": "rimraf src cjs esm",
-    "build": "copyfiles util/* src && yarn create-icons && concurrently \"tsc\" \"tsc -p tsconfig.esm.json\" && yarn create-package-json-pointers-to-esm",
+    "build": "copyfiles util/* src && yarn create-icons && concurrently \"tsc\" \"tsc -p tsconfig.esm.json\" && node cleanTypes.js && yarn create-package-json-pointers-to-esm",
     "update": "ts-node figma/index.ts dotenv/config",
     "test": "jest"
   },

@navikt/internal/css/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @navikt/ds-css-internal
 
+## 2.1.4
+
+## 2.1.3
+
+## 2.1.2
+
+## 2.1.1
+
 ## 2.1.0
 
 ### Minor Changes

@navikt/internal/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css-internal",
-  "version": "2.1.0",
+  "version": "2.1.4",
   "description": "CSS for NAV internal Designsystem-components",
   "author": "Aksel | NAV designsystem team",
   "keywords": [

@navikt/internal/react/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @navikt/ds-react-internal
 
+## 2.1.4
+
+### Patch Changes
+
+- Updated dependencies [[`87f194c1d`](https://github.com/navikt/Designsystemet/commit/87f194c1dc29b10a604de676b358d117e2dbf52f)]:
+  - @navikt/ds-react@2.1.4
+  - @navikt/ds-icons@2.1.4
+
+## 2.1.3
+
+### Patch Changes
+
+- Updated dependencies [[`494566e60`](https://github.com/navikt/Designsystemet/commit/494566e604e958363f75ebfa2adbc1669397636a)]:
+  - @navikt/ds-react@2.1.3
+  - @navikt/ds-icons@2.1.3
+
+## 2.1.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.1.2
+  - @navikt/ds-icons@2.1.2
+
+## 2.1.1
+
+### Patch Changes
+
+- Updated dependencies [[`dcf5cfc06`](https://github.com/navikt/Designsystemet/commit/dcf5cfc06b751341559ef30085bd974820531e57)]:
+  - @navikt/ds-react@2.1.1
+  - @navikt/ds-icons@2.1.1
+
 ## 2.1.0
 
 ### Minor Changes

@navikt/internal/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react-internal",
-  "version": "2.1.0",
+  "version": "2.1.4",
   "description": "Aksel react components for internal UIs in NAV",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -35,8 +35,8 @@
     "watch": "tsc --watch -p tsconfig.esm.json"
   },
   "dependencies": {
-    "@navikt/ds-icons": "^2.1.0",
-    "@navikt/ds-react": "^2.1.0",
+    "@navikt/ds-icons": "^2.1.4",
+    "@navikt/ds-react": "^2.1.4",
     "clsx": "^1.1.1",
     "copy-to-clipboard": "^3.3.1"
   },

README.md

@@ -39,7 +39,8 @@
 
 aksel.nav.no/
 ├── website        # NEXT.JS app (v12)
-└── sanity         # Sanity CMS-app (v2)
+├── website/sanity # Sanity CMS-app (v3)
+└── sanity         # Sanity CMS-app (deprecated v2)
 ```
 
 ## Commands
@@ -71,7 +72,7 @@ Vi tar gjerne i mot PR-er [CONTRIBUTING.md](https://github.com/navikt/Designsyst
 
 ## Codeowners
 
-Løsningen forvaltes av team Aksel/Designsystemet
+Løsningen forvaltes av team Aksel
 
 [Slack](https://nav-it.slack.com/archives/C7NE7A8UF)
 

aksel.nav.no/README.md

@@ -1,22 +1,17 @@
 CMS og nettside for [aksel.nav.no](https://aksel.nav.no/)
 
 ```sh
-├── /website    # NEXT.JS app (v12)
-└── /sanity     # Sanity CMS-app (v2)
+├── /website        # NEXT.JS app (v12)
+└── /website/sanity # Sanity CMS-app (v3)
 ```
 
 ### /website
 
 [Nextjs](https://nextjs.org/) applikasjon som henter data fra et [sanity-datasett](https://www.sanity.io/).
 
-Siden leverer to løsninger:
+### /website/sanity
 
-- Innhold på toppnivå i Aksel: artikler, prinsipper og blogger
-- Designsystem-dokumentasjon under https://aksel.nav.no/designsystem
-
-### /sanity
-
-Det publiserte studioet finner man på [aksel.nav.no/studio](https://aksel.nav.no/studio)(krever NAV SSO eller invite).
+Det publiserte studioet finner man på [aksel.nav.no/admin](https://aksel.nav.no/admin)(krever NAV SSO eller invite).
 
 `production`-datasettet er privat, så man må ha riktige tilganger for å kunne lese/jobbe med dataen der.
 
@@ -42,40 +37,15 @@ SANITY_PREVIEW_TOKEN
 SANITY_PRIVATE_NO_DRAFTS
 ```
 
-### Sanity (localhost:3333)
-
-> !! Må være developer i https://verktoykasse.sanity.studio, Ta kontakt med team Aksel om du trenger tilgang !!
-
-Husk at alle endringer i datasettet lokalt også gjøres i prod. Bytt derfor til `development`-dataset hvis man vil teste destruktive handlinger. Dette kan endres i `/sanity/schema.json`
-
-```
-yarn install
-yarn workspace aksel.nav.no sanity
-```
-
-**Deploy av ny sanity-oppdatering**
-
-```
-yarn workspace aksel.nav.no sanity:deploy
-```
-
 ### .env
 
 Blir brukt flere keys i .env under `./website`, men kun `SANITY_PRIVATE_NO_DRAFTS` trengs for å teste lokalt
 
 - SANITY_WRITE_KEY:
-  For å sende dokumenter til sanity, brukt til å oppdatere sandboxes/examples/farger. Trengs bare hvis kode skal synkes fra lokal branch
-- SANITY_PREVIEW_TOKEN: Gir appen tilgang til å lese draft innhold fra sanity i "preview"-mode. Trengs for å teste preview-sider
+  For å sende dokumenter til sanity, brukt til å oppdatere sandboxes/examples/farger. Trengs bare hvis kode skal synkes fra lokal branch/teste feedback-løsning
+- SANITY_PREVIEW_TOKEN: Gir appen tilgang til å lese draft innhold fra sanity i "preview"-mode. Trengs for å teste ikke publiserte-sider
 - SANITY_PRIVATE_NO_DRAFTS: Gir appen tilgang til å lese innhold fra Sanity da datasettet er privat
 
-### Søk
-
-Søk-index blir generert av [algolia-scraper](https://github.com/algolia/docsearch-scraper). Kjøres daglig i en github-action, men kan kjøres lokalt også med docker.
-
-```
-docker run -it --env-file=.env -e "CONFIG=$(cat crawler.json | jq -r tostring)" algolia/docsearch-scraper
-```
-
 ## Backups
 
 Kjøres backups hver 3 dag til GCP-bucket under `designsystem-prod`

aksel.nav.no/package.json

@@ -15,14 +15,14 @@
     "website"
   ],
   "dependencies": {
-    "@navikt/ds-codemod": "^2.1.0",
-    "@navikt/ds-css": "^2.1.0",
-    "@navikt/ds-css-internal": "^2.1.0",
-    "@navikt/ds-icons": "^2.1.0",
-    "@navikt/ds-react": "^2.1.0",
-    "@navikt/ds-react-internal": "^2.1.0",
-    "@navikt/ds-tailwind": "^2.1.0",
-    "@navikt/ds-tokens": "^2.1.0"
+    "@navikt/ds-codemod": "^2.1.4",
+    "@navikt/ds-css": "^2.1.4",
+    "@navikt/ds-css-internal": "^2.1.4",
+    "@navikt/ds-icons": "^2.1.4",
+    "@navikt/ds-react": "^2.1.4",
+    "@navikt/ds-react-internal": "^2.1.4",
+    "@navikt/ds-tailwind": "^2.1.4",
+    "@navikt/ds-tokens": "^2.1.4"
   },
   "devDependencies": {
     "prettier-plugin-tailwindcss": "^0.1.13"

aksel.nav.no/sanity/scripts/backup.js

@@ -1,10 +1,10 @@
 const exportDataset = require("@sanity/export");
 const sanityClient = require("@sanity/client");
-const sanityToken = process.env.SANITY_TOKEN;
+const sanityToken = process.env.SANITY_PREVIEW_TOKEN;
 const SanityConfig = require("../sanity.json");
 
 if (!sanityToken) {
-  throw new Error("Could not find token from SANITY_TOKEN");
+  throw new Error("Could not find token from SANITY_PREVIEW_TOKEN");
 }
 
 const client = sanityClient({

aksel.nav.no/website/components/SanityBlockContent.tsx

@@ -1,7 +1,7 @@
 import { ExternalLink } from "@navikt/ds-icons";
 import { BodyLong, Detail, Heading, Ingress, Link } from "@navikt/ds-react";
 import BlockContent from "@sanity/block-content-to-react";
-import cl from "classnames";
+import cl from "clsx";
 import InnholdsKort from "components/sanity-modules/cards/InnholdsKort";
 import NextLink from "next/link";
 import React, { createContext, useContext } from "react";
@@ -182,6 +182,9 @@ const serializers = {
       mark: any;
       children: any;
     }) => {
+      if (!href) {
+        return children;
+      }
       if (href && href.startsWith("mailto:")) {
         return (
           <NextLink href={href} passHref>

aksel.nav.no/website/components/layout/footer/FooterForm.tsx

@@ -56,13 +56,14 @@ const FooterForm = () => {
   return (
     <>
       <div className="flex w-full max-w-md flex-col gap-8" data-theme="dark">
-        {sent.status ? (
-          <div>
+        <div aria-live="polite">
+          {sent.status && (
             <Label spacing as="p">
               Meldingen er sendt til Aksel, takk for tilbakemeldingen!
             </Label>
-          </div>
-        ) : (
+          )}
+        </div>
+        {!sent.status && (
           <form onSubmit={(e) => handleSubmit(e)} className="w-full">
             <div className="mb-4 flex flex-col gap-4">
               <Heading level="2" size="small">

aksel.nav.no/website/components/layout/header/Hamburger.tsx

@@ -1,6 +1,6 @@
 import { Close, Hamburger as HamburgerIcon } from "@navikt/ds-icons";
 import { Button } from "@navikt/ds-react";
-import cl from "classnames";
+import cl from "clsx";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";

aksel.nav.no/website/components/layout/header/Header.tsx

@@ -1,7 +1,7 @@
 import Logo from "components/assets/Logo";
 import Link from "next/link";
 import { logNav } from "../..";
-import cl from "classnames";
+import cl from "clsx";
 import { useRouter } from "next/router";
 import { Hamburger } from "components/layout/header/Hamburger";
 
@@ -42,7 +42,7 @@ export const Header = ({
 }) => {
   return (
     <>
-      <a className="skiplink" href="#hovedinnhold" tabIndex={-1}>
+      <a className="skiplink" href="#hovedinnhold">
         Hopp til innhold
       </a>
       <header

aksel.nav.no/website/components/layout/page-templates/AkselArtikkel.tsx

@@ -1,7 +1,7 @@
 import { SanityT, urlFor } from "@/lib";
 import { SanityBlockContent } from "@/sanity-block";
 import { Next } from "@navikt/ds-icons";
-import { BodyShort, Heading, Ingress, Label } from "@navikt/ds-react";
+import { BodyShort, Detail, Heading, Ingress, Label } from "@navikt/ds-react";
 import ArtikkelCard from "components/sanity-modules/cards/ArtikkelCard";
 import Head from "next/head";
 import NextLink from "next/link";
@@ -55,7 +55,7 @@ const AkselArtikkelTemplate = ({
           </Heading>
           <div className="card-grid-3-1 mt-6 px-4">
             {data.relevante_artikler.map((x: any) =>
-              x && x?._id ? <ArtikkelCard {...x} key={x._id} /> : null
+              x && x?._id ? <ArtikkelCard level="3" {...x} key={x._id} /> : null
             )}
           </div>
         </div>
@@ -123,18 +123,22 @@ const AkselArtikkelTemplate = ({
               {data?.ingress}
             </Ingress>
           )}
-          <div className="mt-6 flex gap-3 text-base">
-            <BodyShort
-              size="small"
-              as="span"
-              className="text-text-subtle whitespace-nowrap"
-            >
+
+          <div className="mt-6 inline-flex flex-wrap items-center gap-2 text-base">
+            <Detail uppercase as="span">
               {dateStr(date)}
-            </BodyShort>
+            </Detail>
             {authors?.length > 0 && (
-              <BodyShort size="small" as="div" className="flex flex-wrap gap-1">
-                <address className="not-italic">{authors[0]}</address>
-              </BodyShort>
+              <>
+                <span className="bg-deepblue-700 h-2 w-2 rotate-45 rounded-[1px] opacity-25" />
+                <BodyShort
+                  size="small"
+                  as="div"
+                  className="flex flex-wrap gap-1"
+                >
+                  <address className="not-italic">{authors?.[0]}</address>
+                </BodyShort>
+              </>
             )}
           </div>
           {hasTema && (

aksel.nav.no/website/components/layout/page-templates/AkselPrinsipp.tsx

@@ -1,7 +1,7 @@
 import { SanityT, urlFor } from "@/lib";
 import { SanityBlockContent } from "@/sanity-block";
 import { BodyShort, Heading, Ingress, Label } from "@navikt/ds-react";
-import cl from "classnames";
+import cl from "clsx";
 import { Header } from "components/layout/header/Header";
 import Head from "next/head";
 import { Footer } from "..";

aksel.nav.no/website/components/layout/page-templates/WithSidebar.tsx

@@ -5,7 +5,7 @@ import { Header } from "components/layout/header/Header";
 import { Sidebar } from "components/layout/sidebar/Sidebar";
 import Feedback from "components/website-modules/feedback";
 import { ReactNode } from "react";
-import cl from "classnames";
+import cl from "clsx";
 import NextLink from "next/link";
 import { capitalize } from "@/utils";
 import Image from "next/image";

aksel.nav.no/website/components/layout/sidebar/Sidebar.tsx

@@ -2,7 +2,7 @@ import { SidebarT } from "@/lib";
 import { logNav } from "@/utils";
 import { Expand } from "@navikt/ds-icons";
 import { BodyShort, Detail, Tag } from "@navikt/ds-react";
-import cl from "classnames";
+import cl from "clsx";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useMemo, useState } from "react";

aksel.nav.no/website/components/sanity-modules/DoDont.tsx

@@ -3,7 +3,7 @@ import { withErrorBoundary } from "@/error-boundary";
 import { SanityT, urlFor } from "@/lib";
 import { ErrorFilled, SuccessFilled, WarningFilled } from "@navikt/ds-icons";
 import { BodyShort } from "@navikt/ds-react";
-import cl from "classnames";
+import cl from "clsx";
 import React from "react";
 
 const GetIcon = (s: string) => {

aksel.nav.no/website/components/sanity-modules/TokenTable.tsx

@@ -88,7 +88,7 @@ const TokenTable = ({ node }: { node: SanityT.Schema.token_kategori }) => {
                 </>
               ) : (
                 <>
-                  <CopyIcon aria-hidden />
+                  <CopyIcon aria-hidden role="img" />
                   <span className="sr-only">Kopier formarterte tokens</span>
                 </>
               )}

aksel.nav.no/website/components/sanity-modules/bilde/Bilde.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @next/next/no-img-element */
 import { BodyLong, Link } from "@navikt/ds-react";
-import cl from "classnames";
+import cl from "clsx";
 import React from "react";
 import { urlFor, SanityT } from "@/lib";
 import { withErrorBoundary } from "@/error-boundary";

aksel.nav.no/website/components/sanity-modules/cards/GodPraksisCard.tsx

@@ -1,6 +1,6 @@
 import { withErrorBoundary } from "@/error-boundary";
 import { BodyShort } from "@navikt/ds-react";
-import cl from "classnames";
+import cl from "clsx";
 import NextLink from "next/link";
 import Image from "next/image";
 import { logNav } from "@/utils";

aksel.nav.no/website/components/sanity-modules/cards/RelatertInnhold.tsx

@@ -1,5 +1,5 @@
 import { BodyShort, Heading } from "@navikt/ds-react";
-import cl from "classnames";
+import cl from "clsx";
 import NextLink from "next/link";
 import React from "react";
 import { logNav } from "@/components";

aksel.nav.no/website/components/sanity-modules/code-examples/Examples.tsx

@@ -2,7 +2,7 @@ import { capitalize, Snippet } from "@/components";
 import { withErrorBoundary } from "@/error-boundary";
 import { SanityT } from "@/lib";
 import { BodyLong, Link, Chips } from "@navikt/ds-react";
-import cl from "classnames";
+import cl from "clsx";
 import { useEffect, useState } from "react";
 import { CodeSandbox } from "./CodeSandbox";
 

aksel.nav.no/website/components/sanity-modules/code/CopyButton.tsx

@@ -1,8 +1,8 @@
-import { Copy, SuccessStroke } from "@navikt/ds-icons";
+import { SuccessStroke } from "@navikt/ds-icons";
 import { useRef, useState, useEffect } from "react";
 import copy from "copy-to-clipboard";
 import React from "react";
-import cl from "classnames";
+import cl from "clsx";
 import style from "./index.module.css";
 import { CopyIcon } from "@sanity/icons";
 
@@ -58,6 +58,7 @@ const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(
           <CopyIcon
             className="text-[2rem] opacity-90 group-hover:opacity-100"
             aria-label="Kopier kodesnutt"
+            role="img"
           />
         )}
       </button>

aksel.nav.no/website/components/sanity-modules/code/Snippet.tsx

@@ -1,6 +1,6 @@
 import { withErrorBoundary } from "@/error-boundary";
 import { SanityT } from "@/lib";
-import cl from "classnames";
+import cl from "clsx";
 import Highlight, { defaultProps } from "prism-react-renderer";
 import React from "react";
 import CopyButton from "./CopyButton";

aksel.nav.no/website/components/sanity-modules/component-overview/index.tsx

@@ -2,7 +2,7 @@
 import { SanityT, urlFor } from "@/lib";
 import { Heading } from "@navikt/ds-react";
 import Nextlink from "next/link";
-import cl from "classnames";
+import cl from "clsx";
 import Image from "next/image";
 import { StatusTag } from "components/website-modules/StatusTag";
 

aksel.nav.no/website/components/sanity-modules/props/PropTabell.tsx

@@ -37,15 +37,15 @@ const List = ({ prop, parent }: { prop: any; parent: string }) => {
         <span>{prop.type ? <>{Highlighter({ type: prop.type })}</> : ""}</span>
       </dt>
       {prop.description && (
-        <dl className="font-sans text-base">{prop.description}</dl>
+        <dd className="font-sans text-base">{prop.description}</dd>
       )}
       {prop.name === "ref" && prop.type.includes("Ref<") && (
-        <dl className="font-sans text-base">
+        <dd className="font-sans text-base">
           {`${parent} extends ${prop.type.slice(
             prop.type.indexOf("<") + 1,
             prop.type.lastIndexOf(">")
           )}`}
-        </dl>
+        </dd>
       )}
     </Detail>
   );

aksel.nav.no/website/components/sanity-modules/tastatur.tsx

@@ -1,6 +1,6 @@
 import { withErrorBoundary } from "@/error-boundary";
 import { SanityT } from "@/lib";
-import cl from "classnames";
+import cl from "clsx";
 import React from "react";
 
 const KBD = (props: React.HTMLAttributes<HTMLElement>) => (

aksel.nav.no/website/components/sanity-modules/tips/index.tsx

@@ -3,7 +3,7 @@ import { SanityT } from "@/lib";
 import { SanityBlockContent } from "@/sanity-block";
 import { Edit, LightBulb } from "@navikt/ds-icons";
 import { Detail, Link } from "@navikt/ds-react";
-import cl from "classnames";
+import cl from "clsx";
 import React from "react";
 import style from "./tips.module.css";
 

aksel.nav.no/website/components/sanity-modules/token-view/CopyToken.tsx

@@ -1,5 +1,5 @@
 import { Copy, SuccessStroke } from "@navikt/ds-icons";
-import cl from "classnames";
+import cl from "clsx";
 import copystring from "copy-to-clipboard";
 import { useEffect, useRef, useState } from "react";
 

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

@@ -1,6 +1,6 @@
 import { withErrorBoundary } from "@/error-boundary";
 import { BodyLong, ReadMore } from "@navikt/ds-react";
-import cl from "classnames";
+import cl from "clsx";
 import { useState } from "react";
 
 const Video = ({

aksel.nav.no/website/components/website-modules/AkselLink.tsx

@@ -1,7 +1,7 @@
 import { withErrorBoundary } from "@/error-boundary";
 import Link from "next/link";
 import React from "react";
-import cl from "classnames";
+import cl from "clsx";
 import { logNav } from "@/utils";
 
 const AkselLink = ({

aksel.nav.no/website/components/website-modules/BreadCrumbs.tsx

@@ -1,6 +1,6 @@
 import NextLink from "next/link";
 import { useRouter } from "next/router";
-import cl from "classnames";
+import cl from "clsx";
 
 export const BreadCrumbs = ({
   href,

aksel.nav.no/website/components/website-modules/H2.tsx

@@ -1,5 +1,5 @@
 import { Heading } from "@navikt/ds-react";
-import cl from "classnames";
+import cl from "clsx";
 import React from "react";
 
 export const LevelTwoHeading = ({

aksel.nav.no/website/components/website-modules/LatestBloggs.tsx

@@ -3,7 +3,7 @@ import NextLink from "next/link";
 import { dateStr } from "@/utils";
 import { BodyLong, BodyShort, Heading, Link } from "@navikt/ds-react";
 import { SanityT, urlFor } from "@/lib";
-import cl from "classnames";
+import cl from "clsx";
 import { getImage } from "components/website-modules/utils/get-image";
 import { SanityBlockContent } from "@/sanity-block";
 

aksel.nav.no/website/components/website-modules/TOC.tsx

@@ -1,6 +1,6 @@
 import { removeEmojies } from "@/utils";
 import { BodyShort, Heading, Link } from "@navikt/ds-react";
-import cl from "classnames";
+import cl from "clsx";
 import throttle from "lodash/throttle";
 import * as React from "react";
 import { useEffect, useState } from "react";

aksel.nav.no/website/components/website-modules/TOCv2.tsx

@@ -1,6 +1,6 @@
 import { removeEmojies } from "@/utils";
 import { BodyShort, Link } from "@navikt/ds-react";
-import cl from "classnames";
+import cl from "clsx";
 import throttle from "lodash/throttle";
 import * as React from "react";
 import { useEffect, useState } from "react";

aksel.nav.no/website/components/website-modules/TilToppen.tsx

@@ -5,10 +5,9 @@ export const ScrollTop = () => {
     <button
       onClick={() => {
         window.scrollTo(0, 0);
+        document.getElementById("hovedinnhold")?.focus?.();
       }}
       className="text-xlarge text-text-on-inverted focus-visible:shadow-focus-inverted group -mt-[10px] flex h-[48px] w-fit items-center justify-center gap-2 rounded p-2 font-semibold hover:underline focus:outline-none"
-      aria-hidden
-      id="scroll-top-button"
     >
       <svg
         fill="none"

aksel.nav.no/website/components/website-modules/cube/index.tsx

@@ -1,5 +1,5 @@
 import styles from "./cube.module.css";
-import cl from "classnames";
+import cl from "clsx";
 
 const Rect = ({ ...props }) => (
   <svg

aksel.nav.no/website/components/website-modules/examples/withDsExample.tsx

@@ -1,6 +1,6 @@
 import { ComponentType } from "react";
 import styles from "./examples.module.css";
-import cl from "classnames";
+import cl from "clsx";
 
 export const withDsExample = (
   Component: ComponentType,

aksel.nav.no/website/components/website-modules/feedback/index.tsx

@@ -1,14 +1,8 @@
-import { BodyShort, Button, Heading, Label, Textarea } from "@navikt/ds-react";
-import cl from "classnames";
-import { useRouter } from "next/router";
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
 import { FeedbackT, HelpfulArticleEnum } from "@/lib";
+import { Button, Heading, Label, Textarea } from "@navikt/ds-react";
+import cl from "clsx";
+import { useRouter } from "next/router";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { AmplitudeEvents, IdContext, logAmplitudeEvent } from "../utils";
 
 const Feedback = ({
@@ -99,7 +93,7 @@ const Feedback = ({
     setThanksFeedback(true);
     timeoutTimer.current = window.setTimeout(() => {
       setThanksFeedback(false);
-    }, 3000);
+    }, 6000);
 
     return () => {
       if (timeoutTimer.current) {
@@ -246,9 +240,13 @@ const Feedback = ({
             </Button>
           </form>
         )}
-        {thanksFeedback && (
-          <BodyShort size="small">Takk for tilbakemeldingen!</BodyShort>
-        )}
+        <div aria-live="polite">
+          {thanksFeedback && (
+            <Heading size="small" as="p" className="mt-8">
+              Takk for tilbakemeldingen!
+            </Heading>
+          )}
+        </div>
       </div>
     </div>
   );

aksel.nav.no/website/e2e/axe.e2e.ts

@@ -10,7 +10,6 @@ test.describe("Axe a11y", () => {
       const accessibilityScanResults = await new AxeBuilder({ page })
         .disableRules(["definition-list", "scrollable-region-focusable"])
         .exclude("iframe")
-        .exclude("#scroll-top-button")
         .analyze();
       expect(accessibilityScanResults.violations).toEqual([]);
     });
@@ -21,5 +20,4 @@ test.describe("Axe a11y", () => {
 Disabled rules:
 - definition-list: 'div' as a direct child of 'dl' should be valid. Ignoring failed test.
 - scrollable-region-focusable: Up for discussion. Should code-block be focusable fot easier access and allowing scroll with keyboard?
-- Excluded "Til toppen" button to avoid error around focusable items with aria-hidden
 */

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

@@ -221,6 +221,7 @@ export const akselForsideQuery = `*[_type == "aksel_forside"][0]{
     "oppsummering": intro,
     ...ref->{"refCount": count(*[_type == "aksel_artikkel" && !(_id in path("drafts.**")) && references(^._id)])},
   },
+  "temaCount": count(*[_type == "aksel_tema" && defined(seksjoner) && count(*[_type == "aksel_artikkel" && !(_id in path("drafts.**")) && references(^._id)]) > 0]),
   "resent": *[_type == "aksel_artikkel" && defined(publishedAt)] | order(publishedAt desc)[0...3]{
     _id,
     heading,

aksel.nav.no/website/package.json

@@ -23,19 +23,19 @@
   },
   "dependencies": {
     "@sanity/block-content-to-react": "^3.0.0",
-    "@sanity/client": "^3.3.0",
-    "@sanity/code-input": "3.0.1",
-    "@sanity/color-input": "^3.0.1",
-    "@sanity/icons": "2.1.0",
-    "@sanity/image-url": "1.0.1",
-    "@sanity/preview-kit": "^1.2.8",
+    "@sanity/client": "^4.0.1",
+    "@sanity/code-input": "4.0.0",
+    "@sanity/color-input": "^3.0.2",
+    "@sanity/icons": "2.2.2",
+    "@sanity/image-url": "1.0.2",
+    "@sanity/preview-kit": "^1.3.2",
     "@sanity/table": "1.0.1",
     "@sanity/ui": "^1.0.0",
-    "@sanity/vision": "3.0.6",
+    "@sanity/vision": "3.2.5",
     "@svgr/webpack": "^5.5.0",
     "amplitude-js": "^8.8.0",
     "boring-avatars": "1.7.0",
-    "classnames": "^2.3.1",
+    "clsx": "^1.2.1",
     "codesandbox": "^2.2.3",
     "color": "4.2.3",
     "copy-to-clipboard": "^3.3.1",
@@ -45,17 +45,17 @@
     "jwt-decode": "3.1.2",
     "lodash": "^4.17.21",
     "next": "^12.2.0",
-    "next-sanity": "^3.1.4",
+    "next-sanity": "^4.1.1",
     "prettier": "2.7.1",
     "prism-react-renderer": "^1.3.0",
     "prismjs": "^1.27.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-modal": "3.15.1",
-    "sanity": "3.0.6",
-    "sanity-plugin-asset-source-unsplash": "^1.0.0",
+    "sanity": "3.2.5",
+    "sanity-plugin-asset-source-unsplash": "^1.0.6",
     "sanity-plugin-iframe-pane": "^2.1.1",
-    "sanity-plugin-media": "^2.0.2",
+    "sanity-plugin-media": "^2.0.4",
     "sitemap": "^7.0.0",
     "styled-components": "^5.2",
     "swr": "^1.1.2",

aksel.nav.no/website/pages/admin/[[...index]].js

@@ -1,9 +1,21 @@
 import { NextStudio } from "next-sanity/studio";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { workspaceConfig } from "../../sanity/sanity.config";
 
 const StudioPage = () => {
-  const [scheme, setScheme] = useState("light");
+  const [scheme, setScheme] = useState("dark");
+  useEffect(() => {
+    const theme = localStorage.getItem("sanityStudio:ui:colorScheme");
+    if (theme) {
+      setScheme(theme);
+    } else {
+      /* Assume user using system-theme */
+      window?.matchMedia &&
+      window?.matchMedia("(prefers-color-scheme: dark)").matches
+        ? setScheme("dark")
+        : setScheme("light");
+    }
+  }, []);
 
   return (
     <div

aksel.nav.no/website/pages/god-praksis/[slug].tsx

@@ -4,7 +4,7 @@ import { akselTemaDocs, getAkselTema, SanityT, urlFor } from "@/lib";
 import { SanityBlockContent } from "@/sanity-block";
 import { getClient } from "@/sanity-client";
 import { Detail, Heading, Label } from "@navikt/ds-react";
-import cl from "classnames";
+import cl from "clsx";
 import { Header } from "components/layout/header/Header";
 import ArtikkelCard from "components/sanity-modules/cards/ArtikkelCard";
 import { AkselCubeStatic } from "components/website-modules/cube";
@@ -166,6 +166,7 @@ const Page = ({ tema: page }: PageProps): JSX.Element => {
                           (x: ArtiklerT) => (
                             <ArtikkelCard
                               {...x}
+                              level="3"
                               source={page?.slug?.current}
                               key={x._id}
                               variant="god-praksis"

aksel.nav.no/website/pages/grunnleggende/index.tsx

@@ -2,7 +2,7 @@ import { grunnleggendeLandingQuery, SidebarT, urlFor } from "@/lib";
 import { SanityBlockContent } from "@/sanity-block";
 import { getClient } from "@/sanity-client";
 import { Heading, Ingress } from "@navikt/ds-react";
-import cl from "classnames";
+import cl from "clsx";
 import { WithSidebar } from "components/layout/page-templates/WithSidebar";
 import ComponentOverview from "components/sanity-modules/component-overview";
 import { PreviewSuspense } from "next-sanity/preview";

aksel.nav.no/website/pages/index.tsx

@@ -21,7 +21,7 @@ import { PreviewSuspense } from "next-sanity/preview";
 import Head from "next/head";
 import Link from "next/link";
 import { lazy, useEffect, useState } from "react";
-import cl from "classnames";
+import cl from "clsx";
 
 function getPrefersReducedMotion() {
   const QUERY = "(prefers-reduced-motion: no-preference)";
@@ -59,7 +59,7 @@ const IntroCards = () => {
           <Link href={href} passHref>
             <a className="focus-visible:shadow-focus bg-surface-default hover:shadow-small hover:ring-border-subtle group z-10 rounded-lg p-4 hover:ring-1 focus:outline-none">
               <span className="xs:flex items-center gap-2">
-                <Icon aria-hidden className="shrink-0 text-2xl" />
+                <Icon aria-hidden className="shrink-0 text-2xl" role="img" />
                 <span className="text-xl font-semibold group-hover:underline">
                   {title}
                 </span>
@@ -120,12 +120,12 @@ const GetStarted = ({
         >
           {pause ? (
             <>
-              <PlayIcon aria-hidden />
+              <PlayIcon aria-hidden role="img" />
               <span className="sr-only">Start animasjon</span>
             </>
           ) : (
             <>
-              <PauseIcon aria-hidden />
+              <PauseIcon aria-hidden role="img" />
               <span className="sr-only">Stopp animasjon</span>
             </>
           )}
@@ -143,6 +143,7 @@ const Forside = ({
   bloggs,
   resent,
   komigang,
+  temaCount,
 }: PageProps): JSX.Element => {
   const [pause, setPause] = useState(false);
 
@@ -230,7 +231,9 @@ const Forside = ({
                 ))}
               </ul>
               <div className="mx-auto mt-8">
-                <AkselLink href="/god-praksis">Utforsk god praksis</AkselLink>
+                <AkselLink href="/god-praksis">
+                  {`Utforsk alle ${temaCount} god praksis tema`}
+                </AkselLink>
               </div>
               <div className="mt-20">
                 <Heading level="3" size="medium">
@@ -315,6 +318,7 @@ interface PageProps {
     title: string;
     slug: string;
   }[];
+  temaCount: number;
   slug: string;
   preview: boolean;
 }
@@ -332,6 +336,7 @@ export const getStaticProps = async ({
     tema = null,
     resent = null,
     komigang = null,
+    temaCount = 0,
   } = await client.fetch(akselForsideQuery);
 
   return {
@@ -341,6 +346,7 @@ export const getStaticProps = async ({
       page,
       resent,
       komigang,
+      temaCount,
       slug: "/",
       preview,
       id: page?._id ?? "",

aksel.nav.no/website/pages/komponenter/index.tsx

@@ -8,7 +8,7 @@ import { PreviewSuspense } from "next-sanity/preview";
 import Head from "next/head";
 import { lazy } from "react";
 import { komponentKategorier } from "../../sanity/config";
-import cl from "classnames";
+import cl from "clsx";
 
 const Page = ({
   page,

aksel.nav.no/website/sanity/custom-plugins/structure/god-praksis.ts

@@ -4,12 +4,13 @@ import { StructureBuilder } from "sanity/desk";
 /* documentStore is in Alpha, so avoid using for now */
 export const GodPraksisPanes = async (getClient, S: StructureBuilder) => {
   let tema = await getClient({ apiVersion: "2021-06-07" }).fetch(
-    `*[_type == "aksel_tema" && defined(seksjoner)]{title,seksjoner, _id}`
+    `*[_type == "aksel_tema"]{title,seksjoner, _id}`
   );
   tema = tema
     .map((x) => ({
       title: x.title,
-      sider: x.seksjoner.reduce((b, n) => [...b, ...(n?.sider ?? [])], []),
+      sider:
+        x.seksjoner?.reduce((b, n) => [...b, ...(n?.sider ?? [])], []) || [],
       _id: x._id,
     }))
     .filter(
@@ -34,15 +35,18 @@ export const GodPraksisPanes = async (getClient, S: StructureBuilder) => {
       S.listItem()
         .title(
           `${title} (${
-            ids.filter((x) => x?.tema && x?.tema?.find?.((y) => y._ref === _id))
-              .length ?? 0
+            ids.filter(
+              (x) =>
+                x?.tema &&
+                x?.tema?.find?.((y) => y._ref === _id.replace("drafts.", ""))
+            ).length ?? 0
           })`
         )
         .child(
           S.documentList()
             .title(`${title}`)
-            .filter(`_type == 'aksel_artikkel' && $tag in tema[]->title`)
-            .params({ tag: title })
+            .filter(`_type == 'aksel_artikkel' && $tag in tema[]._ref`)
+            .params({ tag: _id.replace("drafts.", "") })
           /* .menuItems([...S.documentTypeList("aksel_artikkel").getMenuItems()]) */
         )
     ),

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

@@ -81,15 +81,75 @@ export const structure = async (
     (x: Role) => x.name === "god-praksis-forfatter"
   ); */
 
+  const feedback = await getClient({ apiVersion: "2021-06-07" }).fetch(
+    `*[_type == "aksel_feedback" && $id in doc_ref->contributors[]->user_id.current]{_id, behandlet}`,
+    { id: currentUser?.id }
+  );
+
   return S.list()
     .title("Innholdstyper")
     .items([
       ...(editor
+        ? [S.documentListItem().schemaType(`editor`).id(editor._id)]
+        : []),
+      ...(feedback.length > 0
         ? [
-            S.documentListItem().schemaType(`editor`).id(editor._id),
+            S.listItem()
+              .title(
+                `Nye tilbakemeldinger (${
+                  feedback.filter(
+                    (x) => !x._id.includes("draft") && x.behandlet === false
+                  ).length
+                })`
+              )
+              .icon(CommentIcon)
+              .child(
+                S.list()
+                  .title("Tilbakemeldinger")
+                  .items([
+                    S.listItem()
+                      .title(
+                        `Nye tilbakemeldinger (${
+                          feedback.filter(
+                            (x) =>
+                              !x._id.includes("draft") && x.behandlet === false
+                          ).length
+                        })`
+                      )
+                      .child(
+                        S.documentList()
+                          .title(`Nye tilbakemeldinger`)
+                          .filter(
+                            `_type == 'aksel_feedback' && behandlet == false && _id in $ids`
+                          )
+                          .params({
+                            ids: feedback.map((x) => x?._id),
+                          })
+                      ),
+                    S.listItem()
+                      .title(
+                        `Ferdig behandlet (${
+                          feedback.filter(
+                            (x) =>
+                              !x._id.includes("draft") && x.behandlet === true
+                          ).length
+                        })`
+                      )
+                      .child(
+                        S.documentList()
+                          .title("Ferdig")
+                          .filter(
+                            `_type == 'aksel_feedback' && behandlet == true && _id in $ids`
+                          )
+                          .params({
+                            ids: feedback.map((x) => x?._id),
+                          })
+                      ),
+                  ])
+              ),
             S.divider(),
           ]
-        : []),
+        : [S.divider()]),
       S.listItem()
         .title("God Praksis")
         .icon(OkHandIcon)

aksel.nav.no/website/sanity/schema/custom-components/EditorPage.tsx

@@ -218,8 +218,6 @@ export const EditorPage = () => {
     (query) => client.fetch(query)
   );
 
-  console.log(data);
-
   const {
     data: fbData,
     error: fbError,

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

@@ -184,7 +184,11 @@ export const Editors = defineType({
         },
         slugify: (input) => input,
       },
-      readOnly: true,
+      initialValue: (_, { currentUser }) => {
+        return { current: currentUser.id };
+      },
+      readOnly: ({ currentUser }) =>
+        !currentUser.roles.find((x) => x.name === "developer"),
       hidden: ({ currentUser }) =>
         !currentUser.roles.find((x) => x.name === "developer"),
     }),

aksel.nav.no/website/sanity/schema/documents/presets/artikkel-preview.tsx

@@ -1,5 +1,5 @@
 import differenceInMonths from "date-fns/differenceInMonths";
-import differenceInDays from "date-fns/differenceInDays";
+/* import differenceInDays from "date-fns/differenceInDays"; */
 
 const isAfter = (date) => differenceInMonths(new Date(), new Date(date)) >= 6;
 
@@ -24,18 +24,12 @@ export const artikkelPreview = (_type: string) => {
           ].includes(type) &&
           updateInfo
         ) {
-          const diff = Math.abs(
+          /* const diff = Math.abs(
             differenceInDays(new Date(updateInfo), new Date())
-          );
+          ); */
           return {
             title: heading,
-            subtitle: `${
-              isAfter(updateInfo)
-                ? "UTDATERT"
-                : diff === 0
-                ? "I dag"
-                : `${diff} dager`
-            } | ${_type} ${
+            subtitle: `${isAfter(updateInfo) ? "UTDATERT |" : ""}  ${_type} ${
               tema ?? kategori
                 ? `${(tema ?? kategori) && "/ "}${tema ?? kategori ?? ``}`
                 : ""

aksel.nav.no/website/sanity/schema/documents/presets/seo.ts

@@ -39,7 +39,9 @@ export const SEOFields = {
           const { dimensions } = decodeAssetId(image.asset._ref);
           const aspectR = dimensions.width / dimensions.height;
           if (aspectR < 1.5 || aspectR > 2.4) {
-            return `Forventet aspect-ration rundt 1.91:1. Er nå: ${aspectR}:1.`;
+            return `Forventet aspect-ration rundt 1.91:1. Er nå: ${aspectR.toFixed(
+              2
+            )}:1. (${dimensions.width}px/${dimensions.height}px)`;
           }
           return true;
         }),

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

@@ -42,9 +42,9 @@ export const Accordion = defineType({
   ],
   components: {
     preview: (val: any) => {
-      return val.value?.list ? (
+      return val?.list ? (
         <div>
-          {val.value.list.map((x) => (
+          {val.list.map((x) => (
             <div
               key={x._key}
               className="border-b-border flex w-full justify-between border-b py-2 px-4 "
@@ -63,8 +63,8 @@ export const Accordion = defineType({
     select: {
       list: "list",
     },
-    prepare() {
-      return { title: "Accordion", media: StackCompactIcon };
+    prepare({ ...props }) {
+      return { title: "Accordion", media: StackCompactIcon, list: props?.list };
     },
   },
 });

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

@@ -8,9 +8,7 @@ export const styles = [
   {
     title: "Avsnitt",
     value: "normal",
-    blockEditor: {
-      render: (props) => <p className="text-lg">{props.children}</p>,
-    },
+    component: (props) => <p className="text-lg">{props.children}</p>,
   },
 ];
 
@@ -22,12 +20,12 @@ export const block = {
     {
       title: "Bullet-liste",
       value: "bullet",
-      blockEditor: { icon: () => <OlistIcon aria-label="Ul-liste" /> },
+      icon: () => <OlistIcon aria-label="Ul-liste" />,
     },
     {
       title: "Nummerert-liste",
       value: "number",
-      blockEditor: { icon: () => <OlistIcon aria-label="Ol-liste" /> },
+      icon: () => <OlistIcon aria-label="Ol-liste" />,
     },
   ],
   marks: {
@@ -35,29 +33,28 @@ export const block = {
       {
         title: "Strong",
         value: "strong",
-        blockEditor: { icon: () => <BoldIcon aria-label="Bold" /> },
+        icon: () => <BoldIcon aria-label="Bold" />,
       },
       {
         title: "Italic",
         value: "em",
-        blockEditor: { icon: () => <ItalicIcon aria-label="Italic" /> },
+        icon: () => <ItalicIcon aria-label="Italic" />,
       },
       {
         title: "Inline-Kode",
         value: "code",
-        blockEditor: { icon: () => <CodeIcon aria-label="Kode" /> },
+        icon: () => <CodeIcon aria-label="Kode" />,
       },
       {
         title: "KBD",
         value: "kbd",
-        blockEditor: {
-          icon: () => <div>KBD</div>,
-          render: (props) => (
-            <KBD padding={[1, 1, 2]} style={{ verticalAlign: "super" }}>
-              {props.children}
-            </KBD>
-          ),
-        },
+        icon: () => <div>KBD</div>,
+
+        component: (props) => (
+          <KBD padding={[1, 1, 2]} style={{ verticalAlign: "super" }}>
+            {props.children}
+          </KBD>
+        ),
       },
     ],
     annotations: [
@@ -65,9 +62,7 @@ export const block = {
         title: "Link til sanity-side",
         name: "internalLink",
         type: "object",
-        blockEditor: {
-          icon: () => <Link title="Lenke til sanity-side" />,
-        },
+        icon: () => <Link title="Lenke til sanity-side" />,
         options: {
           modal: {
             type: "dialog",
@@ -87,9 +82,7 @@ export const block = {
         title: "Lenke",
         name: "link",
         type: "object",
-        blockEditor: {
-          icon: () => <ExternalLink title="Lenke til ekstern-side" />,
-        },
+        icon: () => <ExternalLink title="Lenke til ekstern-side" />,
         fields: [
           {
             title: "URL",

aksel.nav.no/website/scripts/backup.js

@@ -1,10 +1,10 @@
 import sanityClient from "@sanity/client";
 import exportDataset from "@sanity/export";
 import { config } from "../lib/sanity/config";
-const sanityToken = process.env.SANITY_TOKEN;
+const sanityToken = process.env.SANITY_PREVIEW_TOKEN;
 
 if (!sanityToken) {
-  throw new Error("Could not find token from SANITY_TOKEN");
+  throw new Error("Could not find token from SANITY_PREVIEW_TOKEN");
 }
 
 const client = sanityClient({

aksel.nav.no/website/scripts/migrations/slug.ts

@@ -28,33 +28,11 @@ const main = async () => {
   );
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const newData = [];
 
   docs.forEach((data) => {
-    if (data?.slug_v2?.current) {
-      newData.push({
-        _id: data._id,
-        slug: data.slug_v2,
-      });
-      if (!data._id.includes("draft")) {
-        transactionClient.create({
-          _type: "redirect",
-          source: `/${data.slug.current}`,
-          destination: `/${data.slug_v2.current}`,
-          permanent: true,
-        });
-      }
-    } else {
-      console.log(data.heading);
-    }
+    transactionClient.patch(data._id, (p) => p.unset(["slug_v2"]));
   });
 
-  for (const data of newData) {
-    const id = data._id;
-    delete data._id;
-    transactionClient.patch(id, (p) => p.set({ ...data }));
-  }
-
   /* transactionClient.create({
     _type: "redirect",
     source: `/designsystem`,

examples/shadow-dom/package.json

@@ -10,8 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@navikt/ds-css": "2.1.0",
-    "@navikt/ds-react": "2.1.0",
+    "@navikt/ds-css": "2.1.4",
+    "@navikt/ds-react": "2.1.4",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },