📝 Changeset versions

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,15 @@
 # @navikt/ds-codemod
 
+## 2.1.5
+
+## 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.5",
   "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.5",
+    "@navikt/ds-react": "^2.1.5",
     "clsx": "^1.1.1"
   },
   "devDependencies": {

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @navikt/ds-css
 
+## 2.1.5
+
+## 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.5",
   "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.5",
     "normalize.css": "^8.0.1",
     "postcss": "^8.4.0",
     "postcss-cli": "^9.0.0",

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,48 @@
 # @navikt/ds-react
 
+## 2.1.5
+
+### Patch Changes
+
+- Hotfix: ESM import fra date-fns feilet
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.1.5
+
+## 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.5",
   "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.5",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

@navikt/core/react/src/date/datepicker/datepicker.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/isBefore";
 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,15 @@
 # @navikt/ds-tailwind
 
+## 2.1.5
+
+## 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.5",
   "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.5",
     "@types/jest": "^29.0.0",
     "color": "4.2.3",
     "jest": "^29.0.0",

@navikt/core/tokens/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @navikt/ds-tokens
 
+## 2.1.5
+
+## 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.5",
   "description": "Design-tokens for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [

@navikt/icons/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @navikt/ds-icons
 
+## 2.1.5
+
+## 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.5",
   "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,15 @@
 # @navikt/ds-css-internal
 
+## 2.1.5
+
+## 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.5",
   "description": "CSS for NAV internal Designsystem-components",
   "author": "Aksel | NAV designsystem team",
   "keywords": [

@navikt/internal/react/CHANGELOG.md

@@ -1,5 +1,45 @@
 # @navikt/ds-react-internal
 
+## 2.1.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.1.5
+  - @navikt/ds-icons@2.1.5
+
+## 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.5",
   "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.5",
+    "@navikt/ds-react": "^2.1.5",
     "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.5",
+    "@navikt/ds-css": "^2.1.5",
+    "@navikt/ds-css-internal": "^2.1.5",
+    "@navikt/ds-icons": "^2.1.5",
+    "@navikt/ds-react": "^2.1.5",
+    "@navikt/ds-react-internal": "^2.1.5",
+    "@navikt/ds-tailwind": "^2.1.5",
+    "@navikt/ds-tokens": "^2.1.5"
   },
   "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/KomponentArtikkel.tsx

@@ -3,7 +3,6 @@ import { SanityBlockContent } from "@/sanity-block";
 import { ExternalLink } from "@navikt/ds-icons";
 import { BodyShort, Heading } from "@navikt/ds-react";
 import IntroSeksjon from "components/sanity-modules/IntroSeksjon";
-import { BetaWarning } from "components/website-modules/BetaWarning";
 import Head from "next/head";
 import { dateStr, Feedback, TableOfContents } from "../..";
 
@@ -126,7 +125,6 @@ const KomponentArtikkelTemplate = ({
         <TableOfContents changedState={data["content"]} hideToc={false} />
         <div className="content-box">
           <div className="mt-12">
-            {data?.status && data.status?.tag === "beta" && <BetaWarning />}
             <IntroSeksjon node={data.intro} />
             <SanityBlockContent blocks={data["content"]} />
           </div>

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";
@@ -62,6 +62,9 @@ const NavItem = ({
                     ? "neutral"
                     : "info"
                 }
+                className={cl({
+                  "border-violet-300 bg-violet-50": link.tag === "beta",
+                })}
               >
                 {link.tag === "new"
                   ? "ny"

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/icon-search/Filter.tsx

@@ -32,7 +32,8 @@ const Filter = ({
       >
         <Search
           variant="simple"
-          label="Søk i alle NAV-ikoner"
+          hideLabel={false}
+          label="Søk"
           value={value}
           onChange={(e) => {
             setValue(e);

aksel.nav.no/website/components/sanity-modules/icon-search/ModalContent.tsx

@@ -1,7 +1,7 @@
 import * as Icons from "@navikt/ds-icons";
 import meta from "@navikt/ds-icons/meta.json";
 import { BodyShort, Button, Detail, Heading } from "@navikt/ds-react";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { renderToString } from "react-dom/server";
 
 import {
@@ -11,6 +11,7 @@ import {
   Snippet,
 } from "@/components";
 import { SanityT } from "@/lib";
+import { SuggestionBlock } from "components/website-modules/SuggestionBlock";
 import { downloadSvg } from "./downloads";
 
 const ModalContent = ({ icon }: { icon: string }) => {
@@ -118,6 +119,11 @@ import ${icon} from "@navikt/ds-icons/svg/${icon}.svg";`,
           <Icon />
         </div>
       </div>
+      {isNew(doc?.created_at) ? (
+        <SuggestionBlock variant="ikon-ny" reference={`<${icon} />`} />
+      ) : (
+        <SuggestionBlock variant="ikon" reference={`<${icon} />`} />
+      )}
     </div>
   );
 };

aksel.nav.no/website/components/sanity-modules/icon-search/Search.tsx

@@ -1,6 +1,14 @@
-import { AmplitudeEvents, isNew, logAmplitudeEvent } from "@/components";
+import {
+  AmplitudeEvents,
+  FigmaIcon,
+  GithubIcon,
+  isNew,
+  logAmplitudeEvent,
+  YarnIcon,
+} from "@/components";
 import meta from "@navikt/ds-icons/meta.json";
-import { BodyLong, Heading, Link, Modal } from "@navikt/ds-react";
+import { BodyLong, BodyShort, Heading, Link, Modal } from "@navikt/ds-react";
+import { SuggestionBlock } from "components/website-modules/SuggestionBlock";
 import dynamic from "next/dynamic";
 import { useRouter } from "next/router";
 import React, { useCallback, useEffect, useState } from "react";
@@ -148,6 +156,8 @@ const IconSearch = () => {
 
   return (
     <div className="relative flex w-full max-w-full flex-col md:w-[1000px] md:max-w-[62vw]">
+      <Links />
+      <SuggestionBlock variant="ikoner" />
       <div className="flex w-full flex-wrap justify-between gap-x-8 gap-y-4">
         <Filter onFilterChange={handleFilterChange} />
       </div>
@@ -177,4 +187,62 @@ const IconSearch = () => {
     </div>
   );
 };
+
 export default IconSearch;
+
+function Links() {
+  return (
+    <BodyShort
+      as="span"
+      size="small"
+      className="text-text-subtle mb-6 flex flex-wrap gap-4"
+    >
+      <>
+        <a
+          target="_blank"
+          rel="noreferrer noopener"
+          href="https://github.com/navikt/Designsystemet/tree/master/%40navikt/icons"
+          className="hover:text-text-default focus:text-text-on-inverted focus:shadow-focus flex items-center gap-1 underline hover:no-underline focus:bg-blue-800 focus:no-underline focus:outline-none"
+          onClick={() =>
+            logAmplitudeEvent("link", {
+              kilde: "intro-lenker ikonside",
+              til: "github",
+            })
+          }
+        >
+          <GithubIcon /> Github
+        </a>
+        <a
+          target="_blank"
+          rel="noreferrer noopener"
+          href="https://yarnpkg.com/package/@navikt/ds-icons"
+          className="hover:text-text-default focus:text-text-on-inverted focus:shadow-focus flex items-center gap-1 underline hover:no-underline focus:bg-blue-800 focus:no-underline focus:outline-none"
+          onClick={() =>
+            logAmplitudeEvent("link", {
+              kilde: "intro-lenker ikonside",
+              til: "yarn",
+            })
+          }
+        >
+          <YarnIcon />
+          Yarn
+        </a>
+      </>
+
+      <a
+        target="_blank"
+        rel="noreferrer noopener"
+        href="https://www.figma.com/@nav_aksel"
+        className="hover:text-text-default focus:text-text-on-inverted focus:shadow-focus flex items-center gap-1 underline hover:no-underline focus:bg-blue-800 focus:no-underline focus:outline-none"
+        onClick={() =>
+          logAmplitudeEvent("link", {
+            kilde: "intro-lenker ikonside",
+            til: "figma",
+          })
+        }
+      >
+        <FigmaIcon /> Figma
+      </a>
+    </BodyShort>
+  );
+}

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/BetaWarning.tsx

@@ -1,21 +0,0 @@
-import { BodyLong, Heading } from "@navikt/ds-react";
-
-export const BetaWarning = () => {
-  return (
-    <div className="bg-surface-alt-1-subtle mb-7 rounded p-4">
-      <Heading level="2" size="small" spacing>
-        Beta
-      </Heading>
-      <BodyLong className="override-text-no-max mb-2">
-        Komponenten er under utvikling. Dette kan medføre breaking-changes i
-        patch/minor versjon av kodepakker. Teamet ditt må selv ta stilling til
-        om dere ønsker å bruke denne i produksjon.
-      </BodyLong>
-      <BodyLong className="override-text-no-max">
-        Har du innspill eller funnet en bug? Send oss en melding her eller på
-        slack! Beta-versjon er ment for rask iterering, så alle innspill
-        hjelper.
-      </BodyLong>
-    </div>
-  );
-};

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/StatusTag.tsx

@@ -10,7 +10,11 @@ export const StatusTag = ({
   switch (status) {
     case "beta":
       return (
-        <Tag variant="alt1" size="small">
+        <Tag
+          variant="alt1"
+          size="small"
+          className="border-violet-300 bg-violet-50"
+        >
           Beta
         </Tag>
       );

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

@@ -0,0 +1,185 @@
+import { LightBulb } from "@navikt/ds-icons";
+import { BodyLong, BodyShort, Heading } from "@navikt/ds-react";
+import cl from "classnames";
+
+const SuggestionBlockComponent = ({
+  variant,
+  reference = "",
+}: {
+  variant: "komponent-beta" | "komponent-ny";
+  reference?: string;
+}) => {
+  return (
+    <div
+      className={cl("mb-12 flex gap-3 rounded-lg px-6 py-4 ring-1 ring-inset", {
+        "bg-surface-info-subtle ring-border-subtle": variant === "komponent-ny",
+        "bg-violet-50 ring-violet-300": variant === "komponent-beta",
+      })}
+    >
+      <span className="shrink-0 text-2xl">{options[variant]?.icon}</span>
+      <div className="grid">
+        <Heading size="small" level="2">
+          {options[variant]?.heading}
+        </Heading>
+        <BodyLong className="mt-2">{options[variant]?.text}</BodyLong>
+        <a
+          href={options[variant].link + reference}
+          className="border-border-strong active:bg-surface-active hover:bg-surface-hover focus-visible:shadow-focus mt-4 w-fit rounded border-[2px] px-3 py-[6px] font-semibold focus:outline-none"
+        >
+          Send innspill
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export const SuggestionBlock = ({
+  variant,
+  reference = "",
+}: {
+  variant:
+    | "ikoner"
+    | "komponenter"
+    | "komponent"
+    | "komponent-ny"
+    | "komponent-beta"
+    | "ikon-ny"
+    | "ikon";
+  reference?: string;
+}) => {
+  if (variant === "komponent-ny" || variant === "komponent-beta") {
+    return <SuggestionBlockComponent variant={variant} reference={reference} />;
+  }
+
+  return (
+    <div
+      className={cl(
+        "ring-border-subtle flex justify-between rounded-lg px-6 py-4 ring-1",
+        {
+          "mb-0 mt-5": variant === "ikon" || variant === "ikon-ny",
+          "mb-12": variant !== "ikon" && variant !== "ikon-ny",
+          "bg-surface-info-subtle": variant === "ikon-ny",
+        }
+      )}
+    >
+      <BodyShort className="flex items-center gap-2">
+        <LightBulb aria-hidden className="shrink-0 text-2xl" />
+        {options[variant]?.text}
+      </BodyShort>
+      <a
+        href={options[variant]?.link + reference}
+        className="border-border-strong active:bg-surface-active hover:bg-surface-hover focus-visible:shadow-focus rounded border-[2px] px-3 py-[6px] font-semibold focus:outline-none"
+      >
+        Send forslag
+      </a>
+    </div>
+  );
+};
+
+const issueUrl =
+  "https://github.com/navikt/Designsystemet/issues/new?assignees=olejorgenbakken";
+
+const options: {
+  [key: string]: {
+    text: string;
+    link: string;
+    heading?: string;
+    icon?: React.ReactNode;
+  };
+} = {
+  ikoner: {
+    text: "Har du forslag til nye ikoner, eller endringer?",
+    link:
+      issueUrl +
+      "&labels=nytt+✨%2Cikoner+🖼%2Cforespørsel+🥰&template&template=new-icon.yaml&title=%5BNytt+ikon%5D%3A+",
+  },
+  komponenter: {
+    text: "Har du forslag til nye komponenter, eller endringer?",
+    link:
+      issueUrl +
+      "&labels=nytt+✨%2Cforespørsel+🥰%2Ckomponenter+🧩&template=new-component.yml&title=%5BNy+komponent%5D%3A+",
+  },
+  komponent: {
+    text: "Har du innspill til komponenten?",
+    link: `${issueUrl}&labels=forespørsel+🥰%2Ckomponenter+🧩&template=update-component.yml&title=%5BInnspill+til+komponent%5D%3A+`,
+  },
+  ikon: {
+    text: "Har du innspill til ikonet?",
+    link:
+      issueUrl +
+      "&labels=forespørsel+🥰&template=update-icon.yml&title=%5BInnspill+til+ikon%5D%3A+",
+  },
+  "ikon-ny": {
+    text: "Har du innspill til ikonet?",
+    link:
+      issueUrl +
+      "&labels=forespørsel+🥰%2Cnytt+✨&template=update-icon.yml&title=%5BInnspill+til+ikon%5D%3A+",
+  },
+  "komponent-ny": {
+    text: "Denne komponenten er ny eller oppdatert. Tar du den i bruk ønsker vi gjerne innspill til hvordan den fungerer i tjenesten din!",
+    link: `${issueUrl}&labels=forespørsel+🥰%2Ckomponenter+🧩%2Cnytt+✨&template=update-component.yml&title=%5BInnspill+til+komponent%5D%3A+`,
+    heading: "Ny",
+    icon: (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        focusable={false}
+        aria-hidden
+      >
+        <path
+          d="M6.93936 14.0081C7.08779 13.7367 7.47756 13.7367 7.62599 14.0081L8.61115 15.8094C8.64706 15.875 8.70104 15.929 8.7667 15.9649L10.568 16.9501C10.8394 17.0985 10.8394 17.4883 10.568 17.6367L8.7667 18.6219C8.70104 18.6578 8.64706 18.7118 8.61115 18.7774L7.62599 20.5787C7.47756 20.8501 7.08779 20.8501 6.93936 20.5787L5.9542 18.7774C5.91829 18.7118 5.86431 18.6578 5.79865 18.6219L3.99735 17.6367C3.72596 17.4883 3.72596 17.0985 3.99735 16.9501L5.79865 15.9649C5.86431 15.929 5.91829 15.875 5.9542 15.8094L6.93936 14.0081Z"
+          stroke="#262626"
+          strokeWidth="1.5"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M13.2871 3.42118C13.4355 3.14979 13.8253 3.14979 13.9737 3.42118L16.0502 7.21803C16.0862 7.28369 16.1401 7.33767 16.2058 7.37358L20.0026 9.45014C20.274 9.59857 20.274 9.98834 20.0026 10.1368L16.2058 12.2133C16.1401 12.2492 16.0862 12.3032 16.0502 12.3689L13.9737 16.1657C13.8253 16.4371 13.4355 16.4371 13.2871 16.1657L11.2105 12.3689C11.1746 12.3032 11.1206 12.2492 11.0549 12.2133L7.25809 10.1368C6.98671 9.98834 6.98671 9.59857 7.25809 9.45014L11.0549 7.37358C11.1206 7.33767 11.1746 7.28369 11.2105 7.21803L13.2871 3.42118Z"
+          stroke="#262626"
+          strokeWidth="1.5"
+          strokeLinejoin="round"
+        />
+      </svg>
+    ),
+  },
+  "komponent-beta": {
+    text: "Komponenten er under utvikling. Dette kan medføre bugs slik at teamet ditt må ta stilling til om dere ønsker å bruke denne i produksjon. Hvis komponenten er prefikset med UNSAFE kan det også medføre breaking-changes i patch/minor versjon av kodepakker og i Figma. Tar du den i bruk ønsker vi gjerne innspill til hvordan den fungerer i tjenesten din!",
+    link: `${issueUrl}&labels=forespørsel+🥰%2Ckomponenter+🧩%2Cbeta+🧪&template=update-component.yml&title=%5BInnspill+til+komponent%5D%3A+`,
+    heading: "Beta",
+    icon: (
+      <svg
+        width="25"
+        height="24"
+        viewBox="0 0 25 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        focusable={false}
+        aria-hidden
+      >
+        <path
+          d="M14.5471 3.99994H10.4528V9.48408L4.83594 17.1731C3.94768 18.3891 4.92474 19.9999 6.55053 19.9999H18.4495C20.0753 19.9999 21.0523 18.3891 20.1641 17.1731L14.5471 9.48408V3.99994Z"
+          stroke="#262626"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M9.5 4H15.5"
+          stroke="#262626"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M8.75 12L16.25 12"
+          stroke="#262626"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    ),
+  },
+};

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/[...slug].tsx

@@ -5,7 +5,6 @@ import { getClient } from "@/sanity-client";
 import { Detail } from "@navikt/ds-react";
 import { WithSidebar } from "components/layout/page-templates/WithSidebar";
 import IntroSeksjon from "components/sanity-modules/IntroSeksjon";
-import { BetaWarning } from "components/website-modules/BetaWarning";
 import { StatusTag } from "components/website-modules/StatusTag";
 import { PreviewSuspense } from "next-sanity/preview";
 import Head from "next/head";
@@ -74,7 +73,6 @@ const Page = ({
         pageProps={page}
         variant="page"
       >
-        {page?.status?.tag === "beta" && <BetaWarning />}
         <IntroSeksjon node={page?.intro} />
         <SanityBlockContent blocks={page["content"]} />
       </WithSidebar>

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/[...slug].tsx

@@ -13,8 +13,8 @@ import { BodyShort, Detail, Heading } from "@navikt/ds-react";
 import { WithSidebar } from "components/layout/page-templates/WithSidebar";
 import ComponentOverview from "components/sanity-modules/component-overview";
 import IntroSeksjon from "components/sanity-modules/IntroSeksjon";
-import { BetaWarning } from "components/website-modules/BetaWarning";
 import { StatusTag } from "components/website-modules/StatusTag";
+import { SuggestionBlock } from "components/website-modules/SuggestionBlock";
 import { PreviewSuspense } from "next-sanity/preview";
 import Head from "next/head";
 import { lazy } from "react";
@@ -90,6 +90,13 @@ const Page = ({
     ? page.publishedAt
     : page._updatedAt;
 
+  const tag =
+    page?.status?.tag === "beta"
+      ? "komponent-beta"
+      : page?.status?.tag === "new"
+      ? "komponent-ny"
+      : null;
+
   return (
     <>
       <Head>
@@ -227,8 +234,16 @@ const Page = ({
             </>
           )}
         </BodyShort>
-        {page?.status?.tag === "beta" && <BetaWarning />}
+        {tag && (
+          <SuggestionBlock variant={tag} reference={`<${page?.heading} />`} />
+        )}
         <IntroSeksjon node={page?.intro} />
+        {page?.status?.tag === "ready" && (
+          <SuggestionBlock
+            variant="komponent"
+            reference={`<${page?.heading} />`}
+          />
+        )}
         <SanityBlockContent blocks={page["content"]} />
       </WithSidebar>
     </>

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

@@ -1,14 +1,15 @@
-import { komponentLandingQuery, SidebarT, SanityT, urlFor } from "@/lib";
+import { komponentLandingQuery, SanityT, SidebarT, urlFor } from "@/lib";
 import { SanityBlockContent } from "@/sanity-block";
 import { getClient } from "@/sanity-client";
 import { Heading, Ingress } from "@navikt/ds-react";
+import cl from "clsx";
 import { WithSidebar } from "components/layout/page-templates/WithSidebar";
 import ComponentOverview from "components/sanity-modules/component-overview";
+import { SuggestionBlock } from "components/website-modules/SuggestionBlock";
 import { PreviewSuspense } from "next-sanity/preview";
 import Head from "next/head";
 import { lazy } from "react";
 import { komponentKategorier } from "../../sanity/config";
-import cl from "classnames";
 
 const Page = ({
   page,
@@ -57,6 +58,7 @@ const Page = ({
         intro={<Ingress className="text-text-on-action">{page?.intro}</Ingress>}
         pageProps={page}
       >
+        <SuggestionBlock variant="komponenter" />
         {komponentKategorier
           .filter(
             (kat) => links?.filter((x) => x.kategori === kat.value).length > 0

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`,

aksel.nav.no/website/tailwind.config.js

@@ -18,6 +18,21 @@ module.exports = {
       "2xl": "1440px",
     },
     extend: {
+      /* https://www.figma.com/file/KNxjfHdXUvlx1LVWpp3iJj/Aksel-UI-kit?node-id=1705%3A49825 */
+      colors: {
+        violet: {
+          50: "#F5EDFF",
+          100: "#E9DEF8",
+          200: "#D6C3EE",
+          300: "#BD9FE4",
+          400: "#A575E1",
+          500: "#9862DB",
+          600: "#7B42C2",
+          700: "#642BAB",
+          800: "#471487",
+          900: "#2C0162",
+        },
+      },
       fontFamily: {
         sans: ["Source Sans Pro", "Arial", "sans-serif"],
       },

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.5",
+    "@navikt/ds-react": "2.1.5",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },