Version Packages (#1738)

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

.github/workflows/aksel-dev.yml

@@ -22,9 +22,6 @@ jobs:
       - name: add tokens to .env
         run: |
           echo "SANITY_WRITE_KEY=${{ secrets.SANITY_FEEDBACK_WRITE_KEY }}" >> aksel.nav.no/website/.env
-          echo "ALGOLIA_ADMIN=${{ secrets.ALGOLIA_ADMIN }}" >> aksel.nav.no/website/.env
-          echo "ALGOLIA_ID=${{ secrets.ALGOLIA_ID}}" >> aksel.nav.no/website/.env
-          echo "TRELLO_TOKEN=${{ secrets.TRELLO_TOKEN }}" >> aksel.nav.no/website/.env
           echo "SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}" >> aksel.nav.no/website/.env
           echo "SANITY_PREVIEW_TOKEN=${{ secrets.SANITY_PREVIEW_TOKEN }}" >> aksel.nav.no/website/.env
           echo "SANITY_PRIVATE_NO_DRAFTS=${{ secrets.SANITY_PRIVATE_NO_DRAFTS }}" >> aksel.nav.no/website/.env

.github/workflows/aksel-prod.yml

@@ -21,9 +21,6 @@ jobs:
       - name: add tokens to .env
         run: |
           echo "SANITY_WRITE_KEY=${{ secrets.SANITY_FEEDBACK_WRITE_KEY }}" >> aksel.nav.no/website/.env
-          echo "ALGOLIA_ADMIN=${{ secrets.ALGOLIA_ADMIN }}" >> aksel.nav.no/website/.env
-          echo "ALGOLIA_ID=${{ secrets.ALGOLIA_ID}}" >> aksel.nav.no/website/.env
-          echo "TRELLO_TOKEN=${{ secrets.TRELLO_TOKEN }}" >> aksel.nav.no/website/.env
           echo "SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}" >> aksel.nav.no/website/.env
           echo "SANITY_PREVIEW_TOKEN=${{ secrets.SANITY_PREVIEW_TOKEN }}" >> aksel.nav.no/website/.env
           echo "SANITY_PRIVATE_NO_DRAFTS=${{ secrets.SANITY_PRIVATE_NO_DRAFTS }}" >> aksel.nav.no/website/.env

.github/workflows/backup-sanity.yml

@@ -22,18 +22,17 @@ jobs:
           key: ${{ runner.os }}-build-${{ github.sha }}
           restore-keys: |
             ${{ runner.os }}-build-
-
       - name: Install dependencies
-        run: cd aksel.nav.no/sanity && yarn
+        run: cd aksel.nav.no/website && yarn
 
       - name: Export dataset
-        run: cd aksel.nav.no/sanity && SANITY_TOKEN=${{secrets.SANITY_DATASET_EDITOR_TOKEN}} yarn backup
+        run: cd aksel.nav.no/website && SANITY_TOKEN=${{secrets.SANITY_DATASET_EDITOR_TOKEN}} yarn backup
       - name: Upload GCP bucket
         uses: "google-github-actions/auth@v0"
         with:
           credentials_json: "${{ secrets.gcp_credentials_prod }}"
       - uses: "google-github-actions/upload-cloud-storage@v0"
         with:
-          path: ./aksel.nav.no/sanity
+          path: ./aksel.nav.no/website
           destination: "aksel-website-prod/backups"
           glob: "backup-*.tar.gz"

.github/workflows/e2e.yml

@@ -21,9 +21,6 @@ jobs:
       - name: add tokens to .env
         run: |
           echo "SANITY_WRITE_KEY=${{ secrets.SANITY_FEEDBACK_WRITE_KEY }}" >> aksel.nav.no/website/.env
-          echo "ALGOLIA_ADMIN=${{ secrets.ALGOLIA_ADMIN }}" >> aksel.nav.no/website/.env
-          echo "ALGOLIA_ID=${{ secrets.ALGOLIA_ID}}" >> aksel.nav.no/website/.env
-          echo "TRELLO_TOKEN=${{ secrets.TRELLO_TOKEN }}" >> aksel.nav.no/website/.env
           echo "SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}" >> aksel.nav.no/website/.env
           echo "SANITY_PREVIEW_TOKEN=${{ secrets.SANITY_PREVIEW_TOKEN }}" >> aksel.nav.no/website/.env
           echo "SANITY_PRIVATE_NO_DRAFTS=${{ secrets.SANITY_PRIVATE_NO_DRAFTS }}" >> aksel.nav.no/website/.env

.github/workflows/searchindex.yml

@@ -1,25 +0,0 @@
-name: Indexing search
-on:
-  workflow_dispatch:
-  schedule:
-    # 01.00 & 12.00 every day
-    - cron: "00 01,12 * * *"
-
-jobs:
-  searchcrawl:
-    name: Search-indexing aksel.nav.no
-    runs-on: ubuntu-latest
-    env:
-      APPLICATION_ID: ${{ secrets.ALGOLIA_ID}}
-      API_KEY: ${{ secrets.ALGOLIA_ADMIN }}
-    steps:
-      - uses: actions/checkout@v2
-      - name: Read crawler.json
-        id: algolia_config
-        run: echo "::set-output name=config::$(cat ./aksel.nav.no/crawler.json | jq -r tostring)"
-      - name: Push indices to Algolia
-        uses: signcl/docsearch-scraper-action@master
-        env:
-          APPLICATION_ID: ${{ secrets.ALGOLIA_ID}}
-          API_KEY: ${{ secrets.ALGOLIA_ADMIN }}
-          CONFIG: ${{ steps.algolia_config.outputs.config }}

.gitignore

@@ -149,4 +149,5 @@ tmp.json
 playwright-report/
 /test-results/
 backup-*.tar.gz
-sitemap-urls.json
+sitemap-urls.json
+*.tar.gz

@navikt/codemod/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-codemod
 
+## 2.0.12
+
 ## 2.0.11
 
 ## 2.0.10

@navikt/codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-codemod",
-  "version": "2.0.11",
+  "version": "2.0.12",
   "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.0.11",
-    "@navikt/ds-react": "^2.0.11",
+    "@navikt/ds-icons": "^2.0.12",
+    "@navikt/ds-react": "^2.0.12",
     "clsx": "^1.1.1"
   },
   "devDependencies": {

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/ds-css
 
+## 2.0.12
+
+### Patch Changes
+
+- [#1737](https://github.com/navikt/Designsystemet/pull/1737) [`8a1ef5e7e`](https://github.com/navikt/Designsystemet/commit/8a1ef5e7e2c066cb80c13e14329e1585e2c427f8) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Fikset default visuell error-state for radio
+
 ## 2.0.11
 
 ## 2.0.10

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

@@ -143,27 +143,21 @@
 .navds-checkbox--error
   > .navds-checkbox__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
   + .navds-checkbox__label::before,
-.navds-radio--error
-  > .navds-radio__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
-  + .navds-radio__label::before {
+.navds-radio--error > .navds-radio__input:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
   box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
 }
 
 .navds-checkbox--error
   > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
   + .navds-checkbox__label::before,
-.navds-radio--error
-  > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
-  + .navds-radio__label::before {
+.navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
   box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
 }
 
 .navds-checkbox--error
   > .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
   + .navds-checkbox__label::before,
-.navds-radio--error
-  > .navds-radio__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
-  + .navds-radio__label::before {
+.navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
   background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
   box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
 }
@@ -171,9 +165,7 @@
 .navds-checkbox--error
   > .navds-checkbox__input:focus:hover:not(:disabled):not(:checked):not(:indeterminate)
   + .navds-checkbox__label::before,
-.navds-radio--error
-  > .navds-radio__input:focus:hover:not(:disabled):not(:checked):not(:indeterminate)
-  + .navds-radio__label::before {
+.navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
   background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
   box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
 }

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "2.0.11",
+  "version": "2.0.12",
   "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.0.11",
+    "@navikt/ds-tokens": "^2.0.12",
     "normalize.css": "^8.0.1",
     "postcss": "^8.4.0",
     "postcss-cli": "^9.0.0",

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @navikt/ds-react
 
+## 2.0.12
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.0.12
+
 ## 2.0.11
 
 ### Patch Changes

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "2.0.11",
+  "version": "2.0.12",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "@floating-ui/react-dom-interactions": "0.9.2",
-    "@navikt/ds-icons": "^2.0.11",
+    "@navikt/ds-icons": "^2.0.12",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

@navikt/core/react/src/date/utils/__tests__/check-dates.test.ts

@@ -36,7 +36,7 @@ describe("Returns if year is at start or end of range", () => {
     expect(hasNextYear(new Date(), years, 1)).toBeTruthy();
   });
   test("Should have previous year (true)", () => {
-    expect(hasNextYear(new Date("Aug 3 2023"), years, -1)).toBeTruthy();
+    expect(hasNextYear(new Date("Aug 3 2024"), years, -1)).toBeTruthy();
   });
   test("Should not have next year (false)", () => {
     expect(hasNextYear(new Date("Aug 3 2029"), years, 1)).toBeFalsy();

@navikt/core/react/src/form/radio/Radio.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef, InputHTMLAttributes } from "react";
 import cl from "clsx";
+import React, { forwardRef, InputHTMLAttributes } from "react";
 import { BodyShort, Detail, omit } from "../..";
 import { FormFieldProps } from "../useFormField";
 import { useRadio } from "./useRadio";

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

@@ -23,7 +23,7 @@ export const Default = (props) => {
       value={props.controlled ? state : undefined}
       onChange={props.controlled ? setState : undefined}
       hideLegend={props.hideLegend}
-      error={props.errorGroup ? "Errormelding" : undefined}
+      error={props.error ? "Errormelding" : undefined}
       size={props?.size}
     >
       <Radio value="radio1">{props.children || "Apple"}</Radio>
@@ -41,6 +41,7 @@ export const Default = (props) => {
 
 Default.args = {
   controlled: false,
+  error: false,
   size: "medium",
   legend: "Legend-tekst",
   radioDescription: false,

@navikt/core/tailwind/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-tailwind
 
+## 2.0.12
+
 ## 2.0.11
 
 ## 2.0.10

@navikt/core/tailwind/package.json

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

@navikt/core/tokens/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-tokens
 
+## 2.0.12
+
 ## 2.0.11
 
 ## 2.0.10

@navikt/core/tokens/package.json

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

@navikt/icons/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-icons
 
+## 2.0.12
+
 ## 2.0.11
 
 ### Patch Changes

@navikt/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-icons",
-  "version": "2.0.11",
+  "version": "2.0.12",
   "description": "Aksel icons for NAV",
   "author": "Aksel | NAV designsystem team",
   "repository": {

@navikt/internal/css/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-css-internal
 
+## 2.0.12
+
 ## 2.0.11
 
 ## 2.0.10

@navikt/internal/css/package.json

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

@navikt/internal/react/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @navikt/ds-react-internal
 
+## 2.0.12
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.0.12
+  - @navikt/ds-icons@2.0.12
+
 ## 2.0.11
 
 ### Patch Changes

@navikt/internal/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react-internal",
-  "version": "2.0.11",
+  "version": "2.0.12",
   "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.0.11",
-    "@navikt/ds-react": "^2.0.11",
+    "@navikt/ds-icons": "^2.0.12",
+    "@navikt/ds-react": "^2.0.12",
     "clsx": "^1.1.1",
     "copy-to-clipboard": "^3.3.1"
   },

aksel.nav.no/README.md

@@ -65,11 +65,6 @@ Blir brukt flere keys i .env under `./website`, men kun `SANITY_PRIVATE_NO_DRAFT
 
 - SANITY_WRITE_KEY:
   For å sende dokumenter til sanity, brukt til å oppdatere sandboxes/examples/farger. Trengs bare hvis kode skal synkes fra lokal branch
-- ALGOLIA_ADMIN:
-  For å oppdatere records i søkemotoren. Trengs bare hvis man oppdaterer søkeindexen lokalt.
-- ALGOLIA_ID:
-  Søkemotor index-id for å redigere riktig Index. Trengs bare for at søk skal fungere lokalt
-- TRELLO_TOKEN: Sender feedback til et egent trello-board. Ikke nødvendig lokalt hvis man ikke vil teste feedback-modulen.
 - SANITY_PREVIEW_TOKEN: Gir appen tilgang til å lese draft innhold fra sanity i "preview"-mode. Trengs for å teste preview-sider
 - SANITY_PRIVATE_NO_DRAFTS: Gir appen tilgang til å lese innhold fra Sanity da datasettet er privat
 
@@ -89,4 +84,4 @@ Kjøres backups hver 3 dag til GCP-bucket under `designsystem-prod`
 
 Spørsmål og kontakt kan rettes til team Aksel
 
-Aksel har også en egen slack-kanal #aksel
+Aksel har også en egen Slack-kanal #Aksel-designsystemet

aksel.nav.no/crawler.json

@@ -1,54 +0,0 @@
-{
-  "index_name": "aksel_docsearch",
-  "start_urls": [
-    "https://aksel.nav.no/",
-    {
-      "url": "https://aksel.nav.no/designsystem",
-      "tags": ["designsystem", "docs"]
-    },
-    {
-      "url": "https://aksel.nav.no/god-praksis/",
-      "tags": ["aksel"],
-      "selectors_key": "aksel"
-    },
-    {
-      "url": "https://aksel.nav.no/produktbloggen/",
-      "tags": ["aksel"],
-      "selectors_key": "aksel"
-    },
-    {
-      "url": "https://aksel.nav.no/prinsipper/",
-      "tags": ["aksel"],
-      "selectors_key": "aksel"
-    }
-  ],
-  "selectors": {
-    "default": {
-      "lvl0": {
-        "selector": "h1.algolia-index-lvl1",
-        "global": true
-      },
-      "lvl1": ".algolia-index-tabs--active",
-      "lvl2": "h2.algolia-index-lvl2",
-      "lvl3": "h3.algolia-index-lvl3",
-      "text": "p.algolia-index-body, p.algolia-index-ingress"
-    },
-    "aksel": {
-      "lvl0": {
-        "selector": "h1.algolia-index-lvl1",
-        "global": true
-      },
-      "lvl1": "h2.algolia-index-lvl2",
-      "lvl2": "h3.algolia-index-lvl3",
-      "text": "p.algolia-index-body, p.algolia-index-ingress"
-    }
-  },
-  "selectors_exclude": [".algolia-ignore-index"],
-  "stop_urls": [
-    "https://aksel.nav.no/preview",
-    "https://old-design-nav.vercel.app",
-    "https://aksel.nav.no/eksempler"
-  ],
-  "sitemap_urls": ["https://aksel.nav.no/api/sitemap"],
-  "js_render": true
-}

aksel.nav.no/package.json

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

aksel.nav.no/sanity/.gitignore

@@ -1,2 +1,2 @@
 .yarn/cache
-production.tar.gz
+*.tar.gz

aksel.nav.no/sanity/client/actions/set-private.tsx

@@ -62,8 +62,8 @@ export default function SetPrivateAction(props) {
               dele offentlig kan medføre eks omdømmetap og uønsket oppmerksomhet
               utenfra. Dobbelsjekk med temaansvarlig og andre som har skrevet
               artikkelen før du velger å åpne innholdet for alle. Er du usikker
-              er det bare å sende en melding på #aksel eller #aksel-redaktører
-              på slack.
+              er det bare å sende en melding på #Aksel-designsystemet eller
+              #aksel-redaktører på Slack.
             </BodyLong>
           ) : (
             <>

aksel.nav.no/sanity/components/profile/profile-page.tsx

@@ -75,8 +75,8 @@ const IntroPage = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
       >
         <ReadMore header="Har du ikke de rollene du trenger?">
           Send en melding til oss på{" "}
-          <Link href="https://nav-it.slack.com/archives/C0370ADS0HX">
-            #Aksel
+          <Link href="https://nav-it.slack.com/archives/C7NE7A8UF">
+            #Aksel-designsystemet
           </Link>{" "}
           slack så fikser vi det.
         </ReadMore>

aksel.nav.no/website/components/assets/AkselLogo.tsx

@@ -1,31 +0,0 @@
-import React from "react";
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-const AkselLogo = (props): JSX.Element => (
-  <svg
-    focusable="false"
-    aria-hidden="true"
-    viewBox="0 0 28 28"
-    width="28"
-    height="28"
-    fill="none"
-    {...props}
-  >
-    <path
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-      d="m3 9 5.268-5.268A2.5 2.5 0 0 1 10.036 3H22.5A2.5 2.5 0 0 1 25 5.5v12.465a2.5 2.5 0 0 1-.732 1.767L19 25"
-    ></path>
-    <path
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-      d="m3 9 5.232-5.232a2.5 2.5 0 0 1 3.536 0l12.464 12.464a2.5 2.5 0 0 1 0 3.536L19 25m-7-9-9 9"
-    ></path>
-  </svg>
-);
-
-export default AkselLogo;

aksel.nav.no/website/components/assets/FigmaIcon.tsx

@@ -1,116 +0,0 @@
-import React from "react";
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export const FigmaIcon = ({ ...props }): JSX.Element => (
-  <svg
-    {...props}
-    width="1em"
-    height="1em"
-    viewBox="0 0 18 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    focusable="false"
-    aria-label="Figma"
-    aria-hidden
-  >
-    <path
-      d="M15.5 4.99999C15.5 6.93299 13.9531 8.49999 12.0449 8.49999H8.5V1.5H12.0449C13.9531 1.5 15.5 3.067 15.5 4.99999Z"
-      fill="#FF7262"
-      stroke="#262626"
-    />
-    <path
-      d="M1.5 4.99999C1.5 6.93299 3.04691 8.49999 4.95513 8.49999H8.5V1.5H4.95513C3.04691 1.5 1.5 3.067 1.5 4.99999Z"
-      fill="#F24E1E"
-      stroke="#262626"
-    />
-    <path
-      d="M1.5 12C1.5 13.933 3.04691 15.5 4.95513 15.5H8.5V8.5H4.95513C3.04691 8.5 1.5 10.067 1.5 12Z"
-      fill="#A259FF"
-      stroke="#262626"
-    />
-    <path
-      d="M1.5 19C1.5 20.933 3.0692 22.5 4.97742 22.5C6.91042 22.5 8.5 20.9126 8.5 18.9545V15.5H4.95513C3.04691 15.5 1.5 17.067 1.5 19Z"
-      fill="#0ACF83"
-      stroke="#262626"
-    />
-    <path
-      d="M8.5 12C8.5 13.933 10.0469 15.5 11.9551 15.5H12.0449C13.9531 15.5 15.5 13.933 15.5 12C15.5 10.067 13.9531 8.5 12.0449 8.5H11.9551C10.0469 8.5 8.5 10.067 8.5 12Z"
-      fill="#1ABCFE"
-      stroke="#262626"
-    />
-  </svg>
-);
-
-export const FigmaIconNoSync = ({ ...props }): JSX.Element => (
-  <svg
-    {...props}
-    width="1.5rem"
-    height="1.5rem"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    focusable="false"
-    aria-label="Figma ikke i sync"
-  >
-    <path d="M1.5 22.5L22.5 1.5" stroke="#BA3A26" strokeWidth="2" />
-    <path
-      d="M18.5 4.99999C18.5 6.93299 16.9531 8.49999 15.0449 8.49999H11.5V1.5H15.0449C16.9531 1.5 18.5 3.067 18.5 4.99999Z"
-      stroke="#262626"
-    />
-    <path
-      d="M4.5 4.99999C4.5 6.93299 6.04691 8.49999 7.95513 8.49999H11.5V1.5H7.95513C6.04691 1.5 4.5 3.067 4.5 4.99999Z"
-      stroke="#262626"
-    />
-    <path
-      d="M4.5 12C4.5 13.933 6.04691 15.5 7.95513 15.5H11.5V8.5H7.95513C6.04691 8.5 4.5 10.067 4.5 12Z"
-      stroke="#262626"
-    />
-    <path
-      d="M4.5 19C4.5 20.933 6.0692 22.5 7.97742 22.5C9.91042 22.5 11.5 20.9126 11.5 18.9545V15.5H7.95513C6.04691 15.5 4.5 17.067 4.5 19Z"
-      stroke="#262626"
-    />
-    <path
-      d="M11.5 12C11.5 13.933 13.0469 15.5 14.9551 15.5H15.0449C16.9531 15.5 18.5 13.933 18.5 12C18.5 10.067 16.9531 8.5 15.0449 8.5H14.9551C13.0469 8.5 11.5 10.067 11.5 12Z"
-      stroke="#262626"
-    />
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M15 17.335H16.6664C15.8573 17.9444 15.3333 18.9147 15.3333 20.0081C15.3333 21.319 16.0865 22.453 17.1812 23.0001L17.4786 22.402C16.6014 21.9636 16 21.056 16 20.0081C16 19.0192 16.5357 18.1551 17.3333 17.6925V19.674H18V16.6667H15V17.335ZM22.6667 19.9921C22.6667 21.0855 22.1427 22.0558 21.3336 22.6651H23V23.3334L20 23.3334V20.3262H20.6667V22.3076C21.4643 21.8451 22 20.981 22 19.9921C22 18.9442 21.3986 18.0366 20.5214 17.5982L20.8188 17.0001C21.9135 17.5472 22.6667 18.6811 22.6667 19.9921Z"
-      fill="#262626"
-    />
-  </svg>
-);
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export const FigmaIconGrayScale = ({ ...props }): JSX.Element => (
-  <svg
-    width="18"
-    height="26"
-    viewBox="0 0 18 26"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-    aria-label="Figma ikon"
-    focusable="false"
-  >
-    <g clipPath="url(#clip0)">
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M0.459473 5.44999C0.459473 2.97008 2.46984 0.959717 4.94975 0.959717H8.06672H9.53756H12.6545C15.1344 0.959717 17.1448 2.97008 17.1448 5.44999C17.1448 7.02029 16.3387 8.40232 15.1178 9.2049C16.3387 10.0075 17.1448 11.3895 17.1448 12.9598C17.1448 15.4397 15.1344 17.4501 12.6545 17.4501H12.557C11.3944 17.4501 10.335 17.0082 9.53756 16.2833V17.4501V20.4207C9.53756 22.9336 7.47466 24.9597 4.97398 24.9597C2.50023 24.9597 0.459473 22.9555 0.459473 20.4694C0.459473 18.8992 1.26547 17.5172 2.48632 16.7146C1.26547 15.912 0.459473 14.53 0.459473 12.9598C0.459473 11.3895 1.26553 10.0075 2.48647 9.2049C1.26553 8.40232 0.459473 7.02029 0.459473 5.44999ZM8.06672 12.9598V9.94037H4.94975C3.28215 9.94037 1.93031 11.2922 1.93031 12.9598C1.93031 14.6214 3.2725 15.9696 4.93186 15.9792L4.94975 15.9792H8.06672V12.9598ZM9.53756 12.9598C9.53756 14.6274 10.8894 15.9792 12.557 15.9792H12.6545C14.3221 15.9792 15.674 14.6274 15.674 12.9598C15.674 11.2922 14.3221 9.94037 12.6545 9.94037H12.557C10.8894 9.94037 9.53756 11.2922 9.53756 12.9598ZM4.94975 17.4501L4.93195 17.45C3.27255 17.4596 1.93031 18.8078 1.93031 20.4694C1.93031 22.1309 3.30021 23.4889 4.97398 23.4889C6.67467 23.4889 8.06672 22.1091 8.06672 20.4207V17.4501H4.94975ZM4.94975 2.43055H8.06672V8.46943H4.94975C3.28215 8.46943 1.93031 7.11758 1.93031 5.44999C1.93031 3.7824 3.28215 2.43055 4.94975 2.43055ZM9.53756 8.46943V2.43055H12.6545C14.3221 2.43055 15.674 3.7824 15.674 5.44999C15.674 7.11758 14.3221 8.46943 12.6545 8.46943H9.53756Z"
-        fill="var(--a-text-subtle)"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0">
-        <rect
-          width="18"
-          height="25"
-          fill="white"
-          transform="translate(0 0.5)"
-        />
-      </clipPath>
-    </defs>
-  </svg>
-);

aksel.nav.no/website/components/assets/Icons.tsx

@@ -0,0 +1,73 @@
+export const ChangelogIcon = () => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    focusable={false}
+    aria-hidden
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M10.4688 2.26716C10.3077 1.83185 9.69206 1.83185 9.53098 2.26716L9.26942 2.97401C9.21878 3.11087 9.11087 3.21877 8.97401 3.26942L8.26716 3.53098C7.83185 3.69206 7.83185 4.30775 8.26716 4.46883L8.97401 4.73039C9.11087 4.78103 9.21878 4.88894 9.26942 5.0258L9.53098 5.73265C9.69206 6.16796 10.3077 6.16796 10.4688 5.73265L10.7304 5.0258C10.781 4.88894 10.8889 4.78103 11.0258 4.73039L11.7327 4.46883C12.168 4.30775 12.168 3.69206 11.7327 3.53098L11.0258 3.26942C10.8889 3.21877 10.781 3.11087 10.7304 2.97401L10.4688 2.26716ZM4.53098 5.26715C4.69206 4.83185 5.30775 4.83185 5.46883 5.26716L6.00048 6.70392C6.05112 6.84078 6.15903 6.94868 6.29589 6.99933L7.73265 7.53098C8.16796 7.69206 8.16796 8.30775 7.73265 8.46883L6.29589 9.00048C6.15903 9.05112 6.05112 9.15903 6.00048 9.29589L5.46883 10.7327C5.30775 11.168 4.69206 11.168 4.53098 10.7326L3.99933 9.29589C3.94868 9.15903 3.84078 9.05112 3.70392 9.00048L2.26716 8.46883C1.83185 8.30775 1.83185 7.69206 2.26716 7.53098L3.70392 6.99933C3.84078 6.94868 3.94868 6.84078 3.99933 6.70392L4.53098 5.26715ZM12.531 8.26716C12.6921 7.83185 13.3077 7.83185 13.4688 8.26716L14.5407 11.1637C14.5913 11.3006 14.6992 11.4085 14.8361 11.4591L17.7326 12.531C18.168 12.6921 18.168 13.3077 17.7326 13.4688L14.8361 14.5407C14.6992 14.5913 14.5913 14.6992 14.5407 14.8361L13.4688 17.7326C13.3078 18.168 12.6921 18.168 12.531 17.7326L11.4591 14.8361C11.4085 14.6992 11.3006 14.5913 11.1637 14.5407L8.26716 13.4688C7.83185 13.3077 7.83185 12.6921 8.26716 12.531L11.1637 11.4591C11.3006 11.4085 11.4085 11.3006 11.4591 11.1637L12.531 8.26716Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const FigmaIcon = () => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    focusable={false}
+    aria-hidden
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M3 4C3 1.80306 4.76151 0 6.96154 0H9H10H11H13.0385C15.2385 0 17 1.80306 17 4C17 5.19041 16.4828 6.26518 15.6589 7.00012C16.4828 7.73506 17 8.80982 17 10.0002C17 12.1972 15.2385 14.0002 13.0385 14.0002H12.9615C12.2462 14.0002 11.5772 13.8096 11 13.4768V14.0002V15.9608C11 18.1876 9.19358 19.9998 6.98065 19.9998C4.78895 19.9998 3 18.2051 3 15.9998C3 14.8095 3.51701 13.7349 4.34067 13C3.51701 12.2651 3 11.1905 3 10.0002C3 8.80983 3.51718 7.73506 4.34108 7.00012C3.51718 6.26518 3 5.19041 3 4ZM9 10.0002V8.00024H6.96154C5.89033 8.00024 5 8.88346 5 10.0002C5 11.1046 5.87059 11.9805 6.92578 11.9999L6.96154 11.9998H9V10.0002ZM11 10.0002C11 11.117 11.8903 12.0002 12.9615 12.0002H13.0385C14.1097 12.0002 15 11.117 15 10.0002C15 8.88346 14.1097 8.00024 13.0385 8.00024H12.9615C11.8903 8.00024 11 8.88346 11 10.0002ZM6.96154 14.0002L6.92578 14.0001C5.87059 14.0195 5 14.8954 5 15.9998C5 17.1081 5.90111 17.9998 6.98065 17.9998C8.08142 17.9998 9 17.0907 9 15.9608V14.0002H6.96154ZM6.96154 2H9V6H6.96154C5.89033 6 5 5.11678 5 4C5 2.88323 5.89033 2 6.96154 2ZM11 6V2H13.0385C14.1097 2 15 2.88323 15 4C15 5.11678 14.1097 6 13.0385 6H11Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const GithubIcon = () => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    focusable={false}
+    aria-hidden
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M9.9702 0C4.45694 0 0 4.4898 0 10.0443C0 14.4843 2.85571 18.2427 6.81735 19.5729C7.31265 19.6729 7.49408 19.3567 7.49408 19.0908C7.49408 18.858 7.47775 18.0598 7.47775 17.2282C4.70429 17.8269 4.12673 16.0308 4.12673 16.0308C3.68102 14.8667 3.02061 14.5675 3.02061 14.5675C2.11286 13.9522 3.08673 13.9522 3.08673 13.9522C4.09367 14.0188 4.62204 14.9833 4.62204 14.9833C5.51327 16.5131 6.94939 16.0808 7.52714 15.8147C7.60959 15.1661 7.87388 14.7171 8.15449 14.4678C5.94245 14.2349 3.6151 13.3702 3.6151 9.51204C3.6151 8.41449 4.01102 7.51653 4.63837 6.81816C4.53939 6.56878 4.19265 5.53755 4.73755 4.15735C4.73755 4.15735 5.57939 3.89122 7.47755 5.18837C8.29022 4.9685 9.12832 4.85666 9.9702 4.85571C10.812 4.85571 11.6702 4.97224 12.4627 5.18837C14.361 3.89122 15.2029 4.15735 15.2029 4.15735C15.7478 5.53755 15.4008 6.56878 15.3018 6.81816C15.9457 7.51653 16.3253 8.41449 16.3253 9.51204C16.3253 13.3702 13.998 14.2182 11.7694 14.4678C12.1327 14.7837 12.4461 15.3822 12.4461 16.3302C12.4461 17.6771 12.4298 18.7582 12.4298 19.0906C12.4298 19.3567 12.6114 19.6729 13.1065 19.5731C17.0682 18.2424 19.9239 14.4843 19.9239 10.0443C19.9402 4.4898 15.4669 0 9.9702 0Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const YarnIcon = () => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    focusable={false}
+    aria-hidden
+  >
+    <path
+      d="M19.0336 16.0116C18.0026 16.2564 17.4807 16.482 16.2049 17.3131C14.2075 18.6018 12.0297 19.201 12.0297 19.201C12.0297 19.201 11.8493 19.4716 11.3274 19.5941C10.4253 19.8131 7.02969 20 6.72041 20.0064C5.88923 20.0129 5.38021 19.7938 5.23845 19.4523C4.80675 18.4214 5.85701 17.9704 5.85701 17.9704C5.85701 17.9704 5.62505 17.8286 5.48974 17.6997C5.36732 17.5773 5.23845 17.3325 5.19979 17.4227C5.03871 17.8157 4.95495 18.7758 4.52325 19.2075C3.93046 19.8067 2.80933 19.6069 2.14567 19.259C1.41758 18.8724 2.19722 17.9639 2.19722 17.9639C2.19722 17.9639 1.80418 18.1959 1.48845 17.7191C1.20495 17.2809 0.940773 16.5335 1.01165 15.6121C1.10186 14.549 2.27454 13.5309 2.27454 13.5309C2.27454 13.5309 2.06835 11.9781 2.7449 10.3866C3.35701 8.93685 5.00649 7.77061 5.00649 7.77061C5.00649 7.77061 3.62119 6.24355 4.13665 4.85824C4.4717 3.95618 4.60701 3.96262 4.71655 3.92396C5.10314 3.77577 5.47686 3.61468 5.75392 3.31185C7.13923 1.817 8.90469 2.10051 8.90469 2.10051C8.90469 2.10051 9.72943 -0.431708 10.5026 0.0644255C10.741 0.219065 11.598 2.12628 11.598 2.12628C11.598 2.12628 12.5129 1.59149 12.616 1.79123C13.1702 2.86726 13.2346 4.92267 12.9897 6.17267C12.5774 8.23453 11.5464 9.34278 11.1341 10.0387C11.0374 10.1997 12.2423 10.7088 13.0026 12.8157C13.7049 14.7423 13.0799 16.3595 13.1895 16.5399C13.2088 16.5722 13.2153 16.585 13.2153 16.585C13.2153 16.585 14.0207 16.6495 15.6379 15.6508C16.5013 15.116 17.5258 14.5167 18.6921 14.5039C19.8196 14.4845 19.8776 15.8118 19.0336 16.0116Z"
+      fill="currentColor"
+    />
+  </svg>
+);

aksel.nav.no/website/components/assets/index.ts

@@ -1,5 +1,5 @@
-export * from "./FigmaIcon";
 export { default as NavLogoWhite } from "./NavLogoWhite";
 export { default as NAVLogoDark } from "./NavLogoDark";
 
 export * from "./Logo";
+export * from "./Icons";

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

@@ -36,9 +36,9 @@ const Footer = () => {
               <li>
                 <Link
                   className="text-text-on-inverted focus:shadow-focus focus:text-text-default focus:bg-blue-200 focus:shadow-blue-200"
-                  href="https://nav-it.slack.com/archives/C0370ADS0HX"
+                  href="https://nav-it.slack.com/archives/C7NE7A8UF"
                 >
-                  #Aksel på Slack
+                  #Aksel-designsystemet på Slack
                 </Link>
               </li>
               <li>

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

@@ -1,8 +1,12 @@
+import { FeedbackT } from "@/lib";
+import { IdContext } from "@/utils";
 import { Button, Heading, Label, Textarea } from "@navikt/ds-react";
 import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 
 const FooterForm = () => {
+  const idCtx = useContext(IdContext);
+
   const [contactForm, setContactForm] = useState({
     content: "",
     hasWritten: false,
@@ -27,12 +31,16 @@ const FooterForm = () => {
     if (fail) return;
     setContentError({ content: "" });
 
-    fetch("/api/generalFeedback", {
+    const body: FeedbackT = {
+      message: contactForm.content,
+      url: `${basePath}${asPath}`,
+      type: "footer",
+      docId: idCtx?.id,
+    };
+
+    fetch("/api/feedback", {
       method: "POST",
-      body: JSON.stringify({
-        message: contactForm.content,
-        url: `${basePath}${asPath}`,
-      }),
+      body: JSON.stringify(body),
     });
 
     setSent({ status: true });

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

@@ -125,7 +125,14 @@ export const WithSidebar = ({
                   </div>
                 </div>
                 {variant === "page" && pageProps.status?.bilde && (
-                  <div className="relative hidden aspect-square h-[12.5rem] lg:block xl:mr-40">
+                  <div
+                    className={cl(
+                      "relative hidden aspect-square h-[12.5rem] lg:block xl:mr-40",
+                      {
+                        "hue-rotate-[65deg]": pageProps?.status?.tag === "beta",
+                      }
+                    )}
+                  >
                     <Image
                       src={urlFor(pageProps.status?.bilde).auto("format").url()}
                       decoding="async"

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

@@ -63,7 +63,11 @@ const NavItem = ({
                     : "info"
                 }
               >
-                {link.tag}
+                {link.tag === "new"
+                  ? "ny"
+                  : link.tag === "deprecated"
+                  ? "Avviklet"
+                  : link.tag}
               </Tag>
             )}
           </span>
@@ -130,7 +134,17 @@ export const Sidebar = ({
           ...x,
           pages: links
             .filter((y) => y?.kategori === x.value)
-            .sort((a, b) => a?.heading.localeCompare(b?.heading)),
+            .sort((a, b) => {
+              if (a?.tag === "deprecated" && b?.tag === "deprecated") {
+                return 0;
+              } else if (a?.tag === "deprecated") {
+                return 1;
+              } else if (b.tag === "deprecated") {
+                return -1;
+              }
+
+              return a?.heading.localeCompare(b?.heading);
+            }),
         }))
         .filter((x) => !(!x.pages || x.pages.length === 0)),
     [links, kategori]

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

@@ -3,10 +3,11 @@ import { withErrorBoundary } from "@/error-boundary";
 import { SanityT } from "@/lib";
 import { BodyLong, Link, Chips } from "@navikt/ds-react";
 import cl from "classnames";
-import { useEffect, useId, useState } from "react";
+import { useEffect, useState } from "react";
 import { CodeSandbox } from "./CodeSandbox";
 
 const iframePadding = 192;
+const iframeId = "example-iframe";
 
 const ComponentExamples = ({
   node,
@@ -16,22 +17,21 @@ const ComponentExamples = ({
     filnavn?: SanityT.Schema.kode_eksempler_fil;
   };
 }): JSX.Element => {
-  const [iframeHeight, setIframeHeight] = useState(300);
   const [activeExample, setActiveExample] = useState(null);
-  const iframeId = useId();
+  const [frameState, setFrameState] = useState(300);
 
-  const handleExampleLoad = (id: string) => {
+  const handleExampleLoad = () => {
     let attempts = 0;
-
     const waitForExampleContentToRender = setInterval(() => {
-      const exampleIframe = document.getElementById(id) as HTMLIFrameElement;
+      const exampleIframe = document.getElementById(
+        iframeId
+      ) as HTMLIFrameElement;
       const exampleIframeDOM = exampleIframe?.contentDocument;
       const exampleWrapper = exampleIframeDOM?.getElementById("ds-example");
-
       if (exampleWrapper) {
         const newHeight = iframePadding + exampleWrapper.offsetHeight;
-        setIframeHeight(newHeight);
         clearInterval(waitForExampleContentToRender);
+        setFrameState(newHeight < 300 ? 300 : newHeight);
       }
 
       attempts++;
@@ -56,35 +56,6 @@ const ComponentExamples = ({
         .trim()
     ) ?? str;
 
-  const element = (exampleUrl: string, code: string, id: string) => (
-    <>
-      <div className="overflow-hidden rounded-t border border-b-0 border-gray-300 bg-gray-50">
-        <iframe
-          src={exampleUrl}
-          height={iframeHeight}
-          onLoad={() => handleExampleLoad(id)}
-          id={id}
-          aria-label="Komponent eksempler"
-          className="min-w-80 block w-full max-w-full resize-x overflow-auto bg-white shadow-[20px_0_20px_-20px_rgba(0,0,0,0.22)]"
-          title="Kode-eksempler"
-        />
-      </div>
-      <div className="xs:justify-end mb-2 flex justify-center gap-2 rounded-b border border-gray-300 px-2 py-1 text-base ">
-        <CodeSandbox code={code.trim()} />
-        <Link href={exampleUrl} className="text-gray-900" target="_blank">
-          Åpne i nytt vindu
-        </Link>
-      </div>
-
-      <Snippet
-        node={{
-          _type: "kode" as const,
-          code: { code: code.trim(), language: "jsx" },
-        }}
-      />
-    </>
-  );
-
   if (
     !node.dir?.filer ||
     node.dir.filer.length === 0 ||
@@ -94,14 +65,6 @@ const ComponentExamples = ({
     return null;
   }
 
-  if (node.standalone) {
-    return element(
-      `/eksempler/${node.filnavn.title.replace(".tsx", "")}`,
-      node.filnavn?.filer?.[0]?.innhold ?? "",
-      iframeId
-    );
-  }
-
   const active = activeExample ?? node?.dir?.filer?.[0]?.navn;
 
   return (
@@ -122,7 +85,7 @@ const ComponentExamples = ({
           })}
         </Chips>
       </div>
-      {node.dir.filer.map((fil, xi) => {
+      {node.dir.filer.map((fil) => {
         return (
           <div
             key={fil._key}
@@ -134,10 +97,46 @@ const ComponentExamples = ({
             {fil?.description && (
               <BodyLong className="mb-2">{fil.description}</BodyLong>
             )}
-            {element(
-              `/eksempler/${node.dir.title}/${fil.navn.replace(".tsx", "")}`,
-              fil.innhold,
-              iframeId + xi
+
+            {active === fil.navn && (
+              <>
+                <div className="overflow-hidden rounded-t border border-b-0 border-gray-300 bg-gray-50">
+                  <iframe
+                    src={`/eksempler/${node.dir.title}/${fil.navn.replace(
+                      ".tsx",
+                      ""
+                    )}`}
+                    height={frameState}
+                    onLoad={() => handleExampleLoad()}
+                    id={iframeId}
+                    aria-label="Komponent eksempler"
+                    className={cl(
+                      "min-w-80 block w-full max-w-full resize-x overflow-auto bg-white shadow-[20px_0_20px_-20px_rgba(0,0,0,0.22)]"
+                    )}
+                    title="Kode-eksempler"
+                  />
+                </div>
+                <div className="xs:justify-end mb-2 flex justify-center gap-2 rounded-b border border-gray-300 px-2 py-1 text-base ">
+                  <CodeSandbox code={fil.innhold.trim()} />
+                  <Link
+                    href={`/eksempler/${node.dir.title}/${fil.navn.replace(
+                      ".tsx",
+                      ""
+                    )}`}
+                    className="text-gray-900"
+                    target="_blank"
+                  >
+                    Åpne i nytt vindu
+                  </Link>
+                </div>
+
+                <Snippet
+                  node={{
+                    _type: "kode" as const,
+                    code: { code: fil.innhold.trim(), language: "jsx" },
+                  }}
+                />
+              </>
             )}
           </div>
         );

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

@@ -27,7 +27,16 @@ const ComponentOverview = ({
       }
       return true;
     })
-    .sort((a, b) => a?.heading?.localeCompare(b?.heading));
+    .sort((a, b) => {
+      if (a?.status?.tag === "deprecated" && b?.status?.tag === "deprecated") {
+        return 0;
+      } else if (a?.status?.tag === "deprecated") {
+        return 1;
+      } else if (b?.status?.tag === "deprecated") {
+        return -1;
+      }
+      return a?.heading?.localeCompare(b?.heading);
+    });
 
   return (
     <div className="mb-8">
@@ -37,7 +46,12 @@ const ComponentOverview = ({
             <div className="bg-surface-subtle focus-within:ring-border-focus ring-border-subtle hover:shadow-medium min-h-56 group relative rounded-2xl focus-within:ring-[3px] hover:ring-1">
               <div
                 className={cl(
-                  "flex max-h-44 items-center justify-center overflow-hidden rounded-t-2xl"
+                  "flex max-h-44 items-center justify-center overflow-hidden rounded-t-2xl",
+                  "filter",
+                  {
+                    "hue-rotate-[65deg]": x?.status?.tag === "beta",
+                    grayscale: x?.status?.tag === "deprecated",
+                  }
                 )}
               >
                 {x.status?.bilde ? (

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

@@ -162,7 +162,7 @@ const IconSearch = () => {
           href="https://nav-it.slack.com/archives/C7NE7A8UF"
           target="_blank"
         >
-          #designsystem slack.
+          #Aksel-designsystemet på Slack.
         </Link>
       </BodyLong>
       <Modal open={open} onClose={() => handleClose()}>

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

@@ -69,11 +69,10 @@ export const BloggAd = () => {
         </BodyLong>
         <BodyLong>
           Ta kontakt med{" "}
-          <NextLink
-            href="https://nav-it.slack.com/archives/C0370ADS0HX"
-            passHref
-          >
-            <Link className="font-semibold text-[#831843]">#Aksel</Link>
+          <NextLink href="https://nav-it.slack.com/archives/C7NE7A8UF" passHref>
+            <Link className="font-semibold text-[#831843]">
+              #Aksel-designsystemet
+            </Link>
           </NextLink>{" "}
           på Slack
         </BodyLong>

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

@@ -17,19 +17,19 @@ export const StatusTag = ({
     case "new":
       return (
         <Tag variant="info" size="small">
-          New
+          Ny
         </Tag>
       );
     case "ready":
       return showStable ? (
         <Tag variant="success" size="small">
-          Stable
+          Stabil
         </Tag>
       ) : null;
     case "deprecated":
       return (
         <Tag variant="neutral" size="small">
-          Deprecated
+          Avviklet
         </Tag>
       );
     default:

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

@@ -76,7 +76,7 @@ export const ToolCard = () => {
           </div>
           <div>
             <NextLink href={t.href} passHref>
-              <Link className="text-text-default mb-1 font-semibold no-underline hover:underline">
+              <Link className="text-text-default mb-1 font-semibold">
                 {t.title}
               </Link>
             </NextLink>

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

@@ -1,9 +1,15 @@
 import { BodyShort, Button, Heading, Label, Textarea } from "@navikt/ds-react";
 import cl from "classnames";
 import { useRouter } from "next/router";
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { HelpfulArticleEnum, HelpfulArticleT } from "@/lib";
-import { AmplitudeEvents, logAmplitudeEvent } from "../utils";
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { FeedbackT, HelpfulArticleEnum } from "@/lib";
+import { AmplitudeEvents, IdContext, logAmplitudeEvent } from "../utils";
 
 const Feedback = ({
   docId,
@@ -18,6 +24,7 @@ const Feedback = ({
   akselFeedback?: boolean;
   text?: string;
 }): JSX.Element => {
+  const idCtx = useContext(IdContext);
   const { asPath, basePath } = useRouter();
   const [textValue, setTextValue] = useState("");
   const [activeState, setActiveState] = useState<HelpfulArticleEnum | null>(
@@ -30,17 +37,22 @@ const Feedback = ({
   const [hasLoggedFeedback, setHasLoggedFeedback] = useState(false);
 
   const fetchFeedback = () => {
-    const msg: HelpfulArticleT = {
-      answer: activeState,
-      message: textValue,
-      url: `${basePath}${asPath}`,
-      docId: docId,
-      docType: docType,
+    const state = {
+      ja: "ja",
+      nei: "nei",
+      misc: "forslag",
     };
 
-    fetch("/api/helpfulArticleFeedback", {
+    const body: FeedbackT = {
+      message: textValue,
+      url: `${basePath}${asPath}`,
+      type: state[activeState],
+      docId: idCtx?.id,
+    };
+
+    fetch("/api/feedback", {
       method: "POST",
-      body: JSON.stringify(msg),
+      body: JSON.stringify(body),
     });
   };
 

aksel.nav.no/website/components/website-modules/utils/index.ts

@@ -7,7 +7,7 @@ export * from "./hooks";
 export * from "./contexts";
 
 export const dateStr = (date: string) =>
-  format(new Date(date), "d. MMM YYY", { locale: nbLocale });
+  format(new Date(date), "d. MMMM YYY", { locale: nbLocale });
 
 export const dateTimeStr = (date: string) =>
   format(new Date(date), "d-MM-YYY", { locale: nbLocale });

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

@@ -291,6 +291,11 @@ const sidebarQuery = `"sidebar": *[_type == $type && defined(kategori)] {
   "tag": status.tag,
 }`;
 
+/**
+ * "refs" må disables i preview da next-sanity sin
+ * preview-funksjonalitet fører til en infinite loop som låser applikasjonen.
+ * Dette er på grunn av av hele datasettet blir lastet inn i preview flere ganger som til slutt låser vinduet.
+ */
 export const komponentQuery = `{
   "page": *[_type == "komponent_artikkel" && slug.current == $slug] | order(_updatedAt desc)[0]
     {
@@ -313,12 +318,15 @@ export const komponentQuery = `{
         ${deRefs}
       },
   },
-  "refs": *[_type == "komponent_artikkel" && count(*[references(^._id)][slug.current == $slug]) > 0][0...3]{
-    _id,
-    heading,
-    "slug": slug,
-    status
-  },
+  "refs": select(
+    $preview == "true" => [],
+    $preview != "true" => *[_type == "komponent_artikkel" && count(*[references(^._id)][slug.current == $slug]) > 0][0...3]{
+      _id,
+      heading,
+      "slug": slug,
+      status
+    }
+  ),
   "seo": *[_type == "komponenter_landingsside"][0].seo.image,
   ${sidebarQuery}
 }`;

aksel.nav.no/website/lib/types/types.ts

@@ -17,16 +17,9 @@ export enum HelpfulArticleEnum {
   "MISC" = "misc",
 }
 
-export type HelpfulArticleT = {
-  answer: HelpfulArticleEnum;
-  message?: string;
+export type FeedbackT = {
+  message: string;
   url: string;
   docId: string;
-  docType: string;
-};
-
-export type DsFeddbackMsgT = {
-  message: string;
-  user?: string;
-  url: string;
+  type?: "ja" | "nei" | "forslag" | "footer";
 };

aksel.nav.no/website/package.json

@@ -10,15 +10,16 @@
     "build": "next build",
     "start": "next start",
     "e2e": "yarn build && yarn start-server-and-test start http://localhost:3000 playwright",
-    "e2e:full": "yarn build && npx ts-node ./e2e/genUrls.ts && FULL_TEST=true yarn start-server-and-test start http://localhost:3000 playwright",
-    "update:props": "npx ts-node --project tsconfig.tsnode.json ./lib/update-documents/update-props",
-    "update:tokens": "npx ts-node --project tsconfig.tsnode.json ./lib/update-documents/update-tokens",
-    "update:eksempler": "npx ts-node --project tsconfig.tsnode.json ./lib/examples/update-sanity",
+    "e2e:full": "yarn build && ts-node ./e2e/genUrls.ts && FULL_TEST=true yarn start-server-and-test start http://localhost:3000 playwright",
+    "update:props": "ts-node --project tsconfig.tsnode.json ./scripts/update-props",
+    "update:tokens": "ts-node --project tsconfig.tsnode.json ./scripts/update-tokens",
+    "update:eksempler": "ts-node --project tsconfig.tsnode.json ./scripts/examples/update-sanity",
     "update:sanity": "yarn update:tokens && yarn update:props && yarn update:eksempler",
     "analyze": "cross-env ANALYZE=true next build",
     "test": "jest",
     "playwright": "playwright test",
-    "test:watch": "jest --watch"
+    "test:watch": "jest --watch",
+    "backup": "ts-node scripts/backup.js"
   },
   "dependencies": {
     "@sanity/block-content-to-react": "^3.0.0",
@@ -86,6 +87,7 @@
     "postcss-loader": "7.0.0",
     "start-server-and-test": "^1.14.0",
     "ts-jest": "^29.0.0",
+    "ts-node": "10.9.0",
     "typescript": "^4.8.0"
   }
 }

aksel.nav.no/website/pages/api/feedback.ts

@@ -0,0 +1,73 @@
+import dotenv from "dotenv";
+import type { NextApiRequest, NextApiResponse } from "next";
+import { FeedbackT } from "@/lib";
+import { noCdnClient } from "../../lib/sanity/sanity.server";
+
+dotenv.config();
+
+const isDevelopment = process.env.NODE_ENV === "development";
+
+const randKey = () => {
+  let result = "";
+  const characters =
+    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  const charactersLength = 12;
+  for (let i = 0; i < charactersLength; i++) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength));
+  }
+  return result;
+};
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+): Promise<void> {
+  switch (req.method) {
+    case "POST":
+      try {
+        const token = process.env.SANITY_WRITE_KEY;
+
+        if (!token && isDevelopment) {
+          console.log("No token! api/feedback");
+          return;
+        }
+
+        // this is our transactional client, it won't push anything until we say .commit() later
+        const transactionClient = noCdnClient(token).transaction();
+        const data: FeedbackT = JSON.parse(req.body);
+
+        if (!data?.docId) {
+          console.log("No docId! api/feedback");
+          return;
+        }
+        const doc = {
+          _id: `feedback.${randKey()}`,
+          _type: "aksel_feedback",
+          feedback_type:
+            data.type === "footer" ? "footer" : "artikkel_feedback",
+          ...(data.type === "footer" ? {} : { artikkel_feedback: data.type }),
+          melding: data.message,
+          behandlet: false,
+          url: data.url,
+          doc_ref: {
+            _ref: data.docId,
+            _type: "reference",
+            _weak: true,
+          },
+        };
+
+        transactionClient.create(doc);
+
+        await transactionClient
+          .commit()
+          .then(() => console.log("Feedback-logged"))
+          .catch((e) => console.error(e.message));
+
+        return res.json({ status: "ok" });
+      } catch (err) {
+        console.error(err);
+        res.status(500).json({ msg: "Error, check console" });
+      }
+      break;
+  }
+}

aksel.nav.no/website/pages/api/generalFeedback.ts

@@ -1,44 +0,0 @@
-import type { NextApiRequest, NextApiResponse } from "next";
-import { DsFeddbackMsgT } from "@/lib";
-
-export default async function handler(
-  req: NextApiRequest,
-  res: NextApiResponse
-): Promise<void> {
-  switch (req.method) {
-    case "POST":
-      try {
-        const trelloKey = "c319bd921b9b1a9d8fb2d3c872c0134e";
-        const trelloToken = process.env.TRELLO_TOKEN;
-        const labels = "619e2f030ae5bb5e10c9572f";
-
-        const data: DsFeddbackMsgT = JSON.parse(req.body);
-
-        if (!trelloKey || !trelloToken) {
-          res.status(500).json({ msg: "Could not find needed tokens in .env" });
-          return;
-        }
-
-        const card = `&name=${data.message}&desc=**Bruker:** %0A **Side:** %0A ${data.url}`;
-        const url = `https://api.trello.com/1/cards?idList=619cc5721924df5816bcc45f&idLabels=${labels}&key=${trelloKey}&token=${trelloToken}${card}`;
-
-        const postRes = await fetch(url, {
-          method: "POST",
-          headers: {
-            Accept: "application/json",
-          },
-        });
-
-        if (!postRes.ok) {
-          throw new Error(
-            `request failed with status ${res.status}: ${await postRes.text()}`
-          );
-        }
-        return res.json({ status: "ok" });
-      } catch (err) {
-        console.error(err);
-        res.status(500).json({ msg: "Error, check console" });
-      }
-      break;
-  }
-}

aksel.nav.no/website/pages/api/helpfulArticleFeedback.ts

@@ -1,70 +0,0 @@
-import type { NextApiRequest, NextApiResponse } from "next";
-import { HelpfulArticleT, HelpfulArticleEnum } from "@/lib";
-
-export default async function handler(
-  req: NextApiRequest,
-  res: NextApiResponse
-): Promise<void> {
-  switch (req.method) {
-    case "POST":
-      try {
-        const trelloKey = "c319bd921b9b1a9d8fb2d3c872c0134e";
-        const trelloToken = process.env.TRELLO_TOKEN;
-
-        if (!trelloKey || !trelloToken) {
-          res.status(500).json({ msg: "Could not find needed tokens in .env" });
-          return;
-        }
-
-        const data: HelpfulArticleT = JSON.parse(req.body);
-        const sideUrl = "https://aksel.nav.no";
-
-        /* Var denne artikkelen til hjelp? */
-        const trelloList = "61d44fc3995604743a83f5cb";
-
-        let label = "";
-        switch (data.answer) {
-          case HelpfulArticleEnum.JA:
-            label = "61d44fd76c19645dd4d423ab";
-            break;
-          case HelpfulArticleEnum.DELVIS:
-            label = "61d44fe8180b832f7c89c3d4";
-            break;
-          case HelpfulArticleEnum.NEI:
-            label = "61d44fdeb5bfff71c69d619b";
-            break;
-          case HelpfulArticleEnum.MISC:
-            label = "61d44ff4f92e56297e937af8";
-            break;
-          default:
-            break;
-        }
-
-        const editUrl = `https://verktoykasse.sanity.studio/desk/__edit__${data.docId}%2Ctype%3D${data.docType}`;
-
-        const card = `&name=${data.message}&desc=**Side:** %0A
-        ${sideUrl + data.url} %0A
-        **[Rediger side](${editUrl})**`;
-
-        const url = `https://api.trello.com/1/cards?idList=${trelloList}&idLabels=${label}&key=${trelloKey}&token=${trelloToken}${card}`;
-
-        const postRes = await fetch(url, {
-          method: "POST",
-          headers: {
-            Accept: "application/json",
-          },
-        });
-
-        if (!postRes.ok) {
-          throw new Error(
-            `request failed with status ${res.status}: ${await postRes.text()}`
-          );
-        }
-        return res.json({ status: "ok" });
-      } catch (err) {
-        console.error(err);
-        res.status(500).json({ msg: "Error, check console" });
-      }
-      break;
-  }
-}

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

@@ -74,10 +74,10 @@ const Page = ({ tema: page }: PageProps): JSX.Element => {
         <main
           tabIndex={-1}
           id="hovedinnhold"
-          className="min-h-[80vh] focus:outline-none"
+          className="relative min-h-[80vh] overflow-hidden focus:outline-none"
         >
-          <div className="relative overflow-hidden pt-20 text-center">
-            <AkselCubeStatic className="text-deepblue-300 opacity-5 " />
+          <AkselCubeStatic className="text-deepblue-300 opacity-5 " />
+          <div className=" pt-20 text-center">
             <div className="dynamic-wrapper px-4 pb-6 text-center">
               <Image
                 src={urlFor(page.pictogram.url).auto("format").url()}

aksel.nav.no/website/pages/god-praksis/artikler/index.tsx

@@ -109,6 +109,7 @@ export const getStaticProps = async () => {
   return {
     props: {
       articles,
+      id: "godpraksis_landingsside_id1",
     },
     revalidate: 60,
   };

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

@@ -3,7 +3,13 @@ import { Footer } from "@/layout";
 import { akselForsideQuery, SanityT, urlFor } from "@/lib";
 import { getClient } from "@/sanity-client";
 import { BodyLong, Heading } from "@navikt/ds-react";
-import { ComponentIcon, DownloadIcon, TokenIcon } from "@sanity/icons";
+import {
+  ComponentIcon,
+  DownloadIcon,
+  PauseIcon,
+  PlayIcon,
+  TokenIcon,
+} from "@sanity/icons";
 import { Header } from "components/layout/header/Header";
 import ArtikkelCard from "components/sanity-modules/cards/ArtikkelCard";
 import GodPraksisCard from "components/sanity-modules/cards/GodPraksisCard";
@@ -15,7 +21,15 @@ import { PreviewSuspense } from "next-sanity/preview";
 import Head from "next/head";
 import Link from "next/link";
 import Snowfall from "react-snowfall";
-import { lazy } from "react";
+import { lazy, useEffect, useState } from "react";
+import cl from "classnames";
+
+function getPrefersReducedMotion() {
+  const QUERY = "(prefers-reduced-motion: no-preference)";
+  const mediaQueryList = window.matchMedia(QUERY);
+  const prefersReducedMotion = !mediaQueryList.matches;
+  return prefersReducedMotion;
+}
 
 const introcards = [
   {
@@ -62,9 +76,21 @@ const IntroCards = () => {
 
 const GetStarted = ({
   links,
+  togglePause,
 }: {
   links: { title: string; slug: string }[];
+  togglePause: (x: boolean) => void;
 }) => {
+  const [reducedMotion, setReducedMotion] = useState(false);
+  const [pause, setPause] = useState(false);
+
+  useEffect(() => {
+    setReducedMotion(getPrefersReducedMotion());
+    const data = localStorage.getItem("pause-animations");
+    setPause(JSON.parse(data) ?? false);
+    togglePause(JSON.parse(data) ?? false);
+  }, [togglePause]);
+
   return (
     <div className="bg-deepblue-700 text-text-on-action relative mx-auto w-full max-w-screen-lg -translate-y-1/2 rounded-2xl py-12 px-2">
       <Heading size="xlarge" level="2" className="text-center">
@@ -87,10 +113,33 @@ const GetStarted = ({
       <div aria-hidden>
         <Snowfall
           color="rgba(230, 241, 248, 0.3)"
-          speed={[0.2, 1.0]}
-          snowflakeCount={70}
+          speed={reducedMotion || pause ? [0, 0] : [0.1, 0.2]}
+          wind={reducedMotion || pause ? [0, 0] : [-0.2, 0.2]}
+          snowflakeCount={60}
         />
       </div>
+      {!reducedMotion && (
+        <button
+          className="focus-visible:ring-border-focus-on-inverted absolute top-2 right-2 grid h-11 w-11 place-items-center rounded text-2xl focus:outline-none focus-visible:ring-2"
+          onClick={() => {
+            setPause(!pause);
+            togglePause(!pause);
+            localStorage.setItem("pause-animations", JSON.stringify(!pause));
+          }}
+        >
+          {pause ? (
+            <>
+              <PlayIcon aria-hidden />
+              <span className="sr-only">Start animasjon</span>
+            </>
+          ) : (
+            <>
+              <PauseIcon aria-hidden />
+              <span className="sr-only">Stopp animasjon</span>
+            </>
+          )}
+        </button>
+      )}
     </div>
   );
 };
@@ -104,6 +153,8 @@ const Forside = ({
   resent,
   komigang,
 }: PageProps): JSX.Element => {
+  const [pause, setPause] = useState(false);
+
   return (
     <>
       <Head>
@@ -141,10 +192,15 @@ const Forside = ({
         />
       </Head>
 
-      <div className="header-animated-bg relative max-w-[100vw] overflow-hidden bg-[#DCCAF3]">
+      <div
+        className={cl(
+          "header-animated-bg relative max-w-[100vw] overflow-hidden bg-[#DCCAF3]",
+          { "animation-stop": pause }
+        )}
+      >
         <Header variant="transparent" />
 
-        <main tabIndex={-1} id="hovedinnhold" className=" focus:outline-none">
+        <main tabIndex={-1} id="hovedinnhold" className="focus:outline-none">
           <div className="z-20 pb-8">
             <div className="centered-layout xs:mt-36 xs:mb-18 xs:max-w-screen-xs relative mb-16 mt-20 grid max-w-xs place-items-center text-center">
               <Heading
@@ -161,7 +217,7 @@ const Forside = ({
           </div>
           <div className="bg-surface-subtle min-h-96 relative pb-72 md:pb-40">
             <div className="centered-layout grid max-w-screen-2xl">
-              <GetStarted links={komigang} />
+              <GetStarted links={komigang} togglePause={setPause} />
               {/* God praksis */}
               <div className="mx-auto">
                 <Heading

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

@@ -1,8 +1,15 @@
-import { dateStr } from "@/components";
+import {
+  ChangelogIcon,
+  dateStr,
+  FigmaIcon,
+  GithubIcon,
+  logAmplitudeEvent,
+  YarnIcon,
+} from "@/components";
 import { getDocumentsTmp, komponentQuery, urlFor } from "@/lib";
 import { SanityBlockContent } from "@/sanity-block";
 import { getClient } from "@/sanity-client";
-import { Detail, Heading } from "@navikt/ds-react";
+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";
@@ -13,6 +20,51 @@ import Head from "next/head";
 import { lazy } from "react";
 import NotFotfund from "../404";
 
+const kodepakker = {
+  "ds-react": {
+    title: "@navikt/ds-react",
+    git: "https://github.com/navikt/Designsystemet/tree/master/%40navikt/core/react",
+    changelog:
+      "https://github.com/navikt/Designsystemet/blob/master/%40navikt/core/react/CHANGELOG.md",
+  },
+  "ds-css": {
+    title: "@navikt/ds-css",
+    git: "https://github.com/navikt/Designsystemet/tree/master/%40navikt/core/css",
+    changelog:
+      "https://github.com/navikt/Designsystemet/blob/master/%40navikt/core/css/CHANGELOG.md",
+  },
+  "ds-react-internal": {
+    title: "@navikt/ds-react-internal",
+    git: "https://github.com/navikt/Designsystemet/tree/master/%40navikt/internal/react",
+    changelog:
+      "https://github.com/navikt/Designsystemet/blob/master/%40navikt/internal/react/CHANGELOG.md",
+  },
+  "ds-css-internal": {
+    title: "@navikt/ds-css-internal",
+    git: "https://github.com/navikt/Designsystemet/tree/master/%40navikt/internal/css",
+    changelog:
+      "https://github.com/navikt/Designsystemet/blob/master/%40navikt/internal/css/CHANGELOG.md",
+  },
+  "ds-icons": {
+    title: "@navikt/ds-reaciconst",
+    git: "https://github.com/navikt/Designsystemet/tree/master/%40navikt/icons",
+    changelog:
+      "https://github.com/navikt/Designsystemet/blob/master/%40navikt/icons/CHANGELOG.md",
+  },
+  "ds-tokens": {
+    title: "@navikt/ds-tokens",
+    git: "https://github.com/navikt/Designsystemet/tree/master/%40navikt/core/tokens",
+    changelog:
+      "https://github.com/navikt/Designsystemet/blob/master/%40navikt/core/tokens/CHANGELOG.md",
+  },
+  "ds-tailwind": {
+    title: "@navikt/ds-tailwind",
+    git: "https://github.com/navikt/Designsystemet/tree/master/%40navikt/core/tailwind",
+    changelog:
+      "https://github.com/navikt/Designsystemet/blob/master/%40navikt/core/tailwind/CHANGELOG.md",
+  },
+};
+
 const Page = ({
   page,
   sidebar,
@@ -30,6 +82,8 @@ const Page = ({
     return <NotFotfund />;
   }
 
+  const pack = page?.kodepakker?.length > 0 && kodepakker[page?.kodepakker[0]];
+
   const date = page?.updateInfo?.lastVerified
     ? page?.updateInfo?.lastVerified
     : page?.publishedAt
@@ -98,6 +152,81 @@ const Page = ({
           )
         }
       >
+        <BodyShort
+          as="span"
+          size="small"
+          className="text-text-subtle mb-6 flex flex-wrap gap-4"
+        >
+          {pack && (
+            <>
+              <a
+                target="_blank"
+                rel="noreferrer noopener"
+                href={pack.git}
+                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 komponenter",
+                    til: "github",
+                  })
+                }
+              >
+                <GithubIcon /> Github
+              </a>
+              <a
+                target="_blank"
+                rel="noreferrer noopener"
+                href={`https://yarnpkg.com/package/${pack.title}`}
+                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 komponenter",
+                    til: "yarn",
+                  })
+                }
+              >
+                <YarnIcon />
+                Yarn
+              </a>
+            </>
+          )}
+
+          {page.figma_link && (
+            <a
+              target="_blank"
+              rel="noreferrer noopener"
+              href={page.figma_link}
+              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 komponenter",
+                  til: "figma",
+                })
+              }
+            >
+              <FigmaIcon /> Figma
+            </a>
+          )}
+          {pack && (
+            <>
+              <a
+                target="_blank"
+                rel="noreferrer noopener"
+                href={pack.changelog}
+                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 komponenter",
+                    til: "endringslogg",
+                  })
+                }
+              >
+                <ChangelogIcon />
+                Endringslogg
+              </a>
+            </>
+          )}
+        </BodyShort>
         {page?.status?.tag === "beta" && <BetaWarning />}
         <IntroSeksjon node={page?.intro} />
         <SanityBlockContent blocks={page["content"]} />
@@ -118,6 +247,7 @@ const Wrapper = (props: any): JSX.Element => {
           params={{
             slug: `komponenter/${props.slug.slice(0, 2).join("/")}`,
             type: "komponent_artikkel",
+            preview: "true",
           }}
           props={props}
         />
@@ -156,6 +286,7 @@ export const getStaticProps = async ({
   const { page, sidebar, refs, seo } = await getClient().fetch(komponentQuery, {
     slug: `komponenter/${slug.slice(0, 2).join("/")}`,
     type: "komponent_artikkel",
+    preview: "false",
   });
 
   return {

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

@@ -131,7 +131,7 @@ const Page = ({
                 aria-hidden
                 priority
                 className="rounded-2xl"
-                alt="Illustrasjon"
+                alt=""
                 quality={100}
               />
             ) : (
@@ -143,7 +143,7 @@ const Page = ({
                 aria-hidden
                 priority
                 className="rounded-2xl"
-                alt="Illustrasjon"
+                alt=""
               />
             )}
           </div>
@@ -270,7 +270,7 @@ export const getServerSideProps: GetServerSideProps = async (
       morePosts,
       slug: context.params.slug as string,
       preview: context.preview ?? false,
-      id: blogg?._id,
+      id: blogg?._id ?? "",
     },
     notFound: !blogg && !context.preview,
   };

aksel.nav.no/website/sanity/config.ts

@@ -6,6 +6,23 @@ export const allArticleDocuments = [
   "aksel_prinsipp",
 ];
 
+export const previews = [
+  "aksel_artikkel",
+  "komponent_artikkel",
+  "ds_artikkel",
+  "aksel_blogg",
+  "aksel_prinsipp",
+  "aksel_standalone",
+];
+
+export const landingsider = [
+  { name: "godpraksis_landingsside", url: "god-praksis" },
+  { name: "blogg_landingsside", url: "produktbloggen" },
+  { name: "grunnleggende_landingsside", url: "grunnleggende" },
+  { name: "komponenter_landingsside", url: "komponenter" },
+  { name: "prinsipper_landingsside", url: "prinsipper" },
+];
+
 export const allArticleDocsRef = allArticleDocuments.map((x) => ({ type: x }));
 
 export const komponentKategorier = [

aksel.nav.no/website/sanity/custom-plugins/publication-flow/actions/defaultPublish.tsx

@@ -29,10 +29,11 @@ export const createWrappedDefaultPublish = (
       tone: "positive",
       onHandle: () => {
         setIsPublishing(true);
-        patch.execute(
-          [{ set: { publishedAt: new Date().toISOString() } }],
-          props.published
-        );
+        !props.published &&
+          patch.execute(
+            [{ set: { publishedAt: new Date().toISOString() } }],
+            props.published
+          );
         publish.execute();
 
         props.onComplete();

aksel.nav.no/website/sanity/custom-plugins/publication-flow/index.ts

@@ -67,11 +67,15 @@ export const publicationFlow = definePlugin<PublicationFlowOptions>(
   ({ hasQualityControl, hasPublishedAt }) => ({
     name: "publication-flow",
     document: {
-      actions: (prev, { schemaType }) => {
+      actions: (prev, { schemaType, currentUser }) => {
         if (hasQualityControl.some((e) => e === schemaType)) {
           return getCustomActions(prev);
         } else if (hasPublishedAt.some((e) => e === schemaType)) {
           return withCustomPublishAction(prev);
+        } else if (schemaType === "aksel_feedback") {
+          return currentUser.roles.find((x) => x.name === "developer")
+            ? prev
+            : [prev[0]];
         }
         return prev;
       },

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

@@ -0,0 +1,127 @@
+import { Accordion, Loader } from "@navikt/ds-react";
+import { Card } from "@sanity/ui";
+import {
+  getPublishedId,
+  IntentButton,
+  Preview,
+  useClient,
+  useSchema,
+} from "sanity";
+import useSWR from "swr";
+
+export function FeedbackView(props) {
+  const { documentId } = props;
+
+  const schema = useSchema();
+
+  const schemaType = schema.get("aksel_feedback");
+  console.log(schemaType);
+
+  const client = useClient({ apiVersion: "2021-06-07" });
+  const { data, error, isValidating } = useSWR(
+    `*[_type == "aksel_feedback" && references($id)]`,
+    (query) =>
+      client.fetch(query, {
+        id: documentId,
+      })
+  );
+
+  if (isValidating) {
+    return (
+      <div className="grid place-items-center px-6">
+        <div className="mx-auto mt-24">
+          <Loader size="xlarge" variant="neutral" />
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="grid place-items-center">
+        <div className="mx-auto mt-24 px-6">
+          En feil oppstod, prøv å laste side på nytt eller kontakt utvikler.
+        </div>
+      </div>
+    );
+  }
+
+  if (data.length === 0) {
+    return (
+      <div className="grid place-items-center">
+        <div className="mx-auto mt-24 px-6">
+          Siden har ingen tilbakemeldinger enda.
+        </div>
+      </div>
+    );
+  }
+
+  const done = data.filter((x) => x?.behandlet === true);
+  const notDone = data.filter((x) => x?.behandlet === false);
+
+  return (
+    <div className="grid place-items-center">
+      <div className="mx-auto mt-8 w-full px-6">
+        <div className="mt-7">
+          <ul>
+            {notDone.map((x) => (
+              <li key={x._id}>
+                <Card flex={1}>
+                  <IntentButton
+                    intent="edit"
+                    mode="bleed"
+                    padding={1}
+                    radius={2}
+                    params={{
+                      type: "aksel_feedback",
+                      id: getPublishedId(x._id),
+                    }}
+                    style={{ width: "100%" }}
+                  >
+                    <Preview schemaType={schemaType} value={x} key={x._id} />
+                  </IntentButton>
+                </Card>
+              </li>
+            ))}
+          </ul>
+        </div>
+        {done.length > 0 && (
+          <div className="mt-7">
+            <Accordion>
+              <Accordion.Item>
+                <Accordion.Header>{`Ferdig behandlet ${done.length}`}</Accordion.Header>
+                <Accordion.Content>
+                  <ul>
+                    {done.map((x) => (
+                      <li key={x._id}>
+                        <Card flex={1}>
+                          <IntentButton
+                            intent=""
+                            mode="bleed"
+                            padding={1}
+                            radius={2}
+                            params={{
+                              type: schemaType,
+                              id: getPublishedId(x._id),
+                            }}
+                            style={{ width: "100%" }}
+                          >
+                            <Preview
+                              schemaType={schemaType}
+                              value={x}
+                              key={x._id}
+                            />
+                          </IntentButton>
+                        </Card>
+                      </li>
+                    ))}
+                  </ul>
+                </Accordion.Content>
+              </Accordion.Item>
+            </Accordion>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,26 @@
+import { EyeClosedIcon, EyeOpenIcon } from "@sanity/icons";
+import { StructureBuilder } from "sanity/desk";
+
+export const FeedbackPanes = async (getClient, S: StructureBuilder) => {
+  const fb = await getClient({ apiVersion: "2021-06-07" }).fetch(
+    `{
+      "behandlet": count(*[_type == "aksel_feedback" && behandlet == true]),
+      "ubehandlet": count(*[_type == "aksel_feedback" && behandlet == false]),
+    }`
+  );
+
+  return [
+    S.listItem().title(`Ubehandlet (${fb.ubehandlet})`).icon(EyeOpenIcon).child(
+      S.documentList()
+        .title(`Ubehandlet`)
+        .filter(`_type == "aksel_feedback" && behandlet == false`)
+      /* .menuItems([...S.documentTypeList("aksel_artikkel").getMenuItems()]) */
+    ),
+    S.listItem().title(`Behandlet (${fb.behandlet})`).icon(EyeClosedIcon).child(
+      S.documentList()
+        .title(`Behandlet`)
+        .filter(`_type == "aksel_feedback" && behandlet == true`)
+      /* .menuItems([...S.documentTypeList("aksel_artikkel").getMenuItems()]) */
+    ),
+  ];
+};

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

@@ -3,6 +3,7 @@ import {
   AccessDeniedIcon,
   BookIcon,
   BulbOutlineIcon,
+  CommentIcon,
   JoystickIcon,
   OkHandIcon,
   TokenIcon,
@@ -13,11 +14,15 @@ import {
   bloggKategorier,
   grunnleggendeKategorier,
   komponentKategorier,
+  landingsider,
+  previews,
   prinsippKategorier,
 } from "../../config";
 
+import { FeedbackPanes } from "./feedback";
 import { GodPraksisPanes } from "./god-praksis";
 import { PanesWithCount } from "./with-count";
+import { FeedbackView } from "./FeedbackPreview";
 
 /* import { WebPreview, JsonView } from './previews' */
 const filtered = [
@@ -42,6 +47,7 @@ const filtered = [
   "aksel_artikkel",
   "skrivehjelp",
   "publication_flow",
+  "aksel_feedback",
 ];
 
 export const structure = async (
@@ -58,6 +64,9 @@ export const structure = async (
   const adminOrDev = currentUser.roles.find((x) =>
     ["developer", "administrator", "editor"].includes(x.name)
   );
+  const developer = currentUser.roles.find((x) =>
+    ["developer"].includes(x.name)
+  );
   /* const hasBloggerRole = currentUser.roles.find((x) => x.name === "blogger");
   const hasGrunnleggendeRole = currentUser.roles.find(
     (x: Role) => x.name === "grunnleggende"
@@ -201,6 +210,15 @@ export const structure = async (
                       .schemaType(`aksel_forside`)
                       .icon(Picture)
                       .id(`aksel_forside_dokument`),
+                    S.listItem()
+                      .title("Feedback")
+                      .icon(CommentIcon)
+                      .child(
+                        S.list()
+                          .title("Feedback")
+                          .items([...(await FeedbackPanes(getClient, S))])
+                      ),
+
                     S.listItem().title("Standalone-sider").child(
                       S.documentList()
                         .title("Sider")
@@ -264,29 +282,14 @@ export const structure = async (
         : []),
 
       S.divider(),
-      ...S.documentTypeListItems().filter(
-        (listItem) => !filtered.includes(listItem.getId())
-      ),
+      ...(developer
+        ? S.documentTypeListItems().filter(
+            (listItem) => !filtered.includes(listItem.getId())
+          )
+        : []),
     ]);
 };
 
-const previews = [
-  "aksel_artikkel",
-  "komponent_artikkel",
-  "ds_artikkel",
-  "aksel_blogg",
-  "aksel_prinsipp",
-  "aksel_standalone",
-];
-
-const landingsider = [
-  { name: "godpraksis_landingsside", url: "god-praksis" },
-  { name: "blogg_landingsside", url: "produktbloggen" },
-  { name: "grunnleggende_landingsside", url: "grunnleggende" },
-  { name: "komponenter_landingsside", url: "komponenter" },
-  { name: "prinsipper_landingsside", url: "prinsipper" },
-];
-
 export const resolveProductionUrl = (doc) => {
   const basePath = "https://aksel.nav.no";
   const devPath = "http://localhost:3000";
@@ -324,7 +327,7 @@ export const resolveProductionUrl = (doc) => {
   }
 };
 
-export const defaultDocumentNode = (S, { schemaType }) => {
+export const defaultDocumentNode = (S, { schemaType, getClient }) => {
   if (
     [...previews, "aksel_tema", ...landingsider.map((x) => x.name)].includes(
       schemaType
@@ -343,6 +346,10 @@ export const defaultDocumentNode = (S, { schemaType }) => {
           },
         })
         .title("Preview"),
+      S.view
+        .component(FeedbackView)
+        .icon(CommentIcon)
+        .title("Tilbakemeldinger"),
     ]);
   }
   return S.document().views([S.view.form()]);

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

@@ -70,7 +70,7 @@ const OutDatedList = ({ data }: { data: any[] }) => {
     () =>
       data.filter(
         (x) =>
-          !isAfter(x?.updateInfo?.lastVerified) &&
+          isAfter(x?.updateInfo?.lastVerified) &&
           ["ds_artikkel", "aksel_artikkel", "komponent_artikkel"].includes(
             x._type
           )
@@ -81,7 +81,7 @@ const OutDatedList = ({ data }: { data: any[] }) => {
   return (
     <Accordion.Item>
       <Accordion.Header>
-        Artikler til godkjenning ({list.length})
+        Artikler som må godkjennes ({list.length})
       </Accordion.Header>
       <Accordion.Content>
         <ul>
@@ -158,6 +158,56 @@ const DraftList = ({ data }: { data: any[] }) => {
   );
 };
 
+const FeedbackList = ({ data, title }: { data: any[]; title: string }) => {
+  const schema = useSchema();
+
+  const list = useMemo(
+    () =>
+      data.filter((x) =>
+        title.startsWith("Ferdig") ? x.behandlet : !x.behandlet
+      ),
+    [data, title]
+  );
+
+  if (list.length === 0) {
+    return null;
+  }
+
+  return (
+    <Accordion.Item>
+      <Accordion.Header>{`${title} (${list.length ?? 0})`}</Accordion.Header>
+      <Accordion.Content>
+        <ul>
+          {list.map((x) => (
+            <li key={x._id}>
+              <Card flex={1}>
+                <IntentButton
+                  intent="edit"
+                  mode="ghost"
+                  padding={1}
+                  radius={0}
+                  params={{
+                    type: "aksel_feedback",
+                    id: getPublishedId(x._id),
+                  }}
+                  style={{ width: "100%" }}
+                >
+                  <Preview
+                    layout="default"
+                    schemaType={schema.get("aksel_feedback")}
+                    value={x}
+                    key={x._id}
+                  />
+                </IntentButton>
+              </Card>
+            </li>
+          ))}
+        </ul>
+      </Accordion.Content>
+    </Accordion.Item>
+  );
+};
+
 export const EditorPage = () => {
   const user = useCurrentUser();
   const userId = useFormValue([`user_id`]) as { current?: string };
@@ -168,6 +218,15 @@ export const EditorPage = () => {
     (query) => client.fetch(query)
   );
 
+  const {
+    data: fbData,
+    error: fbError,
+    isValidating: fbValidating,
+  } = useSWR(
+    `*[_type == "aksel_feedback" && $id in doc_ref->contributors[]->user_id.current]{_id, behandlet}`,
+    (query) => client.fetch(query, { id: userId.current })
+  );
+
   if (error || !user) {
     return <div>Feilet lasting av bruker...</div>;
   }
@@ -197,11 +256,25 @@ export const EditorPage = () => {
         </dl>
         <p>
           Om det er noe du mangler tilgang til kan du sende melding på{" "}
-          <Link href="https://nav-it.slack.com/archives/C0370ADS0HX">
-            #Aksel
+          <Link href="https://nav-it.slack.com/archives/C7NE7A8UF">
+            #Aksel-designsystemet
           </Link>
         </p>
       </div>
+      {!fbError && !fbValidating && (
+        <div className="mt-7">
+          <Heading level="2" size="small" spacing>
+            Tilbakemeldinger på artikler du er forfatter i (
+            {fbData?.length ?? 0})
+          </Heading>
+          {fbData?.length > 0 && (
+            <Accordion>
+              <FeedbackList data={fbData} title="Ubehandlet" />
+              <FeedbackList data={fbData} title="Ferdig behandlet" />
+            </Accordion>
+          )}
+        </div>
+      )}
       <div className="mt-7">
         <Heading level="2" size="small" spacing>
           Innhold du jobber med

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

@@ -0,0 +1,98 @@
+import { CommentIcon } from "@sanity/icons";
+import { defineField, defineType } from "sanity";
+import { landingsider, previews } from "../../config";
+
+export const Feedback = defineType({
+  title: "Feedback",
+  name: "aksel_feedback",
+  type: "document",
+  __experimental_omnisearch_visibility: false,
+  fields: [
+    defineField({
+      title: "Type feedback",
+      name: "feedback_type",
+      readOnly: true,
+      type: "string",
+      options: {
+        layout: "radio",
+        list: [
+          { title: "Generell (footer)", value: "footer" },
+          { title: "Fant du det du lette etter?", value: "artikkel_feedback" },
+        ],
+      },
+    }),
+    defineField({
+      title: "Fant du det du lette etter?",
+      name: "artikkel_feedback",
+      readOnly: true,
+      hidden: ({ parent }) => parent.feedback_type !== "artikkel_feedback",
+      type: "string",
+      options: {
+        layout: "radio",
+        list: [
+          { title: "Ja", value: "ja" },
+          { title: "Nei", value: "nei" },
+          { title: "Forslag", value: "forslag" },
+        ],
+      },
+    }),
+    defineField({
+      title: "Melding",
+      name: "melding",
+      type: "text",
+      readOnly: true,
+    }),
+    defineField({
+      title: "Behandlet",
+      name: "behandlet",
+      type: "boolean",
+      initialValue: false,
+      /* readOnly: true, */
+    }),
+    defineField({
+      title: "URL",
+      name: "url",
+      type: "string",
+      readOnly: true,
+    }),
+    defineField({
+      title: "Dokument-ref",
+      name: "doc_ref",
+      type: "reference",
+      weak: true,
+      hidden: ({ value }) => !value,
+      to: [...previews, "aksel_tema", ...landingsider.map((x) => x.name)].map(
+        (x) => ({ type: x })
+      ),
+      readOnly: true,
+    }),
+    defineField({
+      title: "Notater",
+      description:
+        "Legg til noen notater hvis det var noen aksjonspunkter basert på tilbakemeldingen",
+      name: "notat",
+      type: "text",
+    }),
+  ],
+  preview: {
+    select: {
+      melding: "melding",
+      behandlet: "behandlet",
+      url: "url",
+      feedback_type: "feedback_type",
+      artikkel_feedback: "artikkel_feedback",
+    },
+    prepare(selection) {
+      const { melding, url, behandlet, feedback_type, artikkel_feedback } =
+        selection;
+
+      return {
+        title: melding ? melding : url ? url : "",
+        subtitle: `${behandlet ? "Ferdig behandlet" : "Ubehandlet"} | ${
+          feedback_type === "footer" ? "footer" : artikkel_feedback
+        }`,
+        media: CommentIcon,
+      };
+    },
+  },
+});

aksel.nav.no/website/sanity/schema/documents/index.ts

@@ -2,6 +2,7 @@ export * from "./blogg/artikkel";
 export * from "./blogg/landingsside";
 export * from "./editors";
 export * from "./forside";
+export * from "./feedback";
 export * from "./god-praksis/artikkel";
 export * from "./god-praksis/landingsside";
 export * from "./god-praksis/tema";

aksel.nav.no/website/sanity/schema/documents/presets/hidden-fields.ts

@@ -5,7 +5,8 @@ const publishedAt = defineField({
   name: "publishedAt",
   type: "datetime",
   group: "settings",
-  readOnly: true,
+  readOnly: ({ currentUser }) =>
+    !currentUser.roles.find((x) => x.name === "developer"),
   hidden: ({ currentUser }) =>
     !currentUser.roles.find((x) => x.name === "developer"),
 });

aksel.nav.no/website/sanity/schema/index.ts

@@ -11,6 +11,7 @@ export const schema: SchemaPluginOptions = {
     document.TestDoc,
     document.Skrivehjelp,
     document.Publiseringsflyt,
+    document.Feedback,
 
     /* Komponentsider */
     document.KodeEksempelDoc,

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

@@ -0,0 +1,46 @@
+import sanityClient from "@sanity/client";
+import exportDataset from "@sanity/export";
+import { config } from "../lib/sanity/config";
+const sanityToken = process.env.SANITY_TOKEN;
+
+if (!sanityToken) {
+  throw new Error("Could not find token from SANITY_TOKEN");
+}
+
+const client = sanityClient({
+  ...config,
+  dataset: "production",
+  token: sanityToken,
+});
+
+const main = async () => {
+  const time = Date.now();
+  await exportDataset({
+    // Instance of @sanity/client configured to correct project ID and dataset
+    client: client,
+
+    // Name of dataset to export
+    dataset: "production",
+
+    // Path to write tar.gz-archive file to, or `-` for stdout
+    outputPath: `backup-${time}.tar.gz`,
+
+    // Whether or not to export assets. Note that this operation is currently slightly lossy;
+    // metadata stored on the asset document itself (original filename, for instance) might be lost
+    // Default: `true`
+    assets: true,
+
+    // Exports documents only, without downloading or rewriting asset references
+    // Default: `false`
+    raw: false,
+
+    // Whether or not to export drafts
+    // Default: `true`
+    drafts: true,
+
+    // Run 12 concurrent asset downloads
+    assetConcurrency: 12,
+  });
+};
+
+main();

aksel.nav.no/website/scripts/examples/update-sanity.tsx

@@ -1,7 +1,7 @@
 import dotenv from "dotenv";
 import { readExampleFile, readExampleFiles } from ".";
-import { SanityT } from "..";
-import { noCdnClient } from "../sanity/sanity.server";
+import { SanityT } from "../../lib";
+import { noCdnClient } from "../../lib/sanity/sanity.server";
 import { getExampleFiles } from "./get-example-files";
 dotenv.config();
 

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

@@ -3,17 +3,17 @@
  */
 
 import dotenv from "dotenv";
-import { noCdnClient } from "../sanity/sanity.server";
+import { noCdnClient } from "../../lib/sanity/sanity.server";
 
 dotenv.config();
 const token = process.env.SANITY_WRITE_KEY;
 
 const randKey = () => {
   let result = "";
-  let characters =
+  const characters =
     "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-  let charactersLength = characters.length;
-  for (let i = 0; i < length; i++) {
+  const charactersLength = characters.length;
+  for (let i = 0; i < charactersLength; i++) {
     result += characters.charAt(Math.floor(Math.random() * charactersLength));
   }
   return result;

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

@@ -3,21 +3,21 @@
  */
 
 import dotenv from "dotenv";
-import { noCdnClient } from "../sanity/sanity.server";
+import { noCdnClient } from "../../lib/sanity/sanity.server";
 
 dotenv.config();
 const token = process.env.SANITY_WRITE_KEY;
 
-const randKey = () => {
+/* const randKey = () => {
   let result = "";
-  let characters =
+  const characters =
     "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-  let charactersLength = characters.length;
-  for (let i = 0; i < length; i++) {
+  const charactersLength = characters.length;
+  for (let i = 0; i < charactersLength; i++) {
     result += characters.charAt(Math.floor(Math.random() * charactersLength));
   }
   return result;
-};
+}; */
 
 const main = async () => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars

aksel.nav.no/website/scripts/update-props.tsx

@@ -1,9 +1,9 @@
 import dotenv from "dotenv";
-import { noCdnClient } from "../sanity/sanity.server";
+import { noCdnClient } from "../lib/sanity/sanity.server";
 import CoreDocs from "@navikt/ds-react/_docs.json";
 import InternalDocs from "@navikt/ds-react-internal/_docs.json";
 import NavnoDocs from "@navikt/ds-navno/_docs.json";
-import { SanityT } from "..";
+import { SanityT } from "../lib";
 
 dotenv.config();
 

aksel.nav.no/website/scripts/update-tokens.tsx

@@ -1,5 +1,5 @@
 import dotenv from "dotenv";
-import { noCdnClient } from "../sanity/sanity.server";
+import { noCdnClient } from "../lib/sanity/sanity.server";
 import tokens from "@navikt/ds-tokens/docs.json";
 import core from "@navikt/ds-css/tokens.json";
 import internal from "@navikt/ds-css-internal/tokens.json";

aksel.nav.no/website/styles/animations.css

@@ -32,3 +32,16 @@
     background-color: #dccaf3;
   }
 }
+
+.animation-stop,
+.animation-stop *,
+.animation-stop *::before,
+.animation-stop *::after {
+  animation-delay: -1ms !important;
+  animation-duration: 1ms !important;
+  animation-iteration-count: 1 !important;
+  background-attachment: initial !important;
+  scroll-behavior: auto !important;
+  transition-duration: 0s !important;
+  transition-delay: 0s !important;
+}

examples/shadow-dom/package.json

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

yarn.lock

@@ -3073,7 +3073,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/ds-codemod@^2.0.10, @navikt/ds-codemod@workspace:@navikt/codemod":
+"@navikt/ds-codemod@^2.0.11, @navikt/ds-codemod@workspace:@navikt/codemod":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-codemod@workspace:@navikt/codemod"
   dependencies:
@@ -3100,7 +3100,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-css-internal@^2.0.10, @navikt/ds-css-internal@workspace:@navikt/internal/css":
+"@navikt/ds-css-internal@^2.0.11, @navikt/ds-css-internal@workspace:@navikt/internal/css":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-css-internal@workspace:@navikt/internal/css"
   dependencies:
@@ -3111,11 +3111,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-css@2.0.10, @navikt/ds-css@^2.0.10, @navikt/ds-css@workspace:@navikt/core/css":
+"@navikt/ds-css@2.0.11, @navikt/ds-css@^2.0.11, @navikt/ds-css@workspace:@navikt/core/css":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-css@workspace:@navikt/core/css"
   dependencies:
-    "@navikt/ds-tokens": ^2.0.10
+    "@navikt/ds-tokens": ^2.0.11
     normalize.css: ^8.0.1
     postcss: ^8.4.0
     postcss-cli: ^9.0.0
@@ -3124,7 +3124,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-icons@^2.0.10, @navikt/ds-icons@workspace:@navikt/icons":
+"@navikt/ds-icons@^2.0.11, @navikt/ds-icons@workspace:@navikt/icons":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-icons@workspace:@navikt/icons"
   dependencies:
@@ -3160,8 +3160,8 @@ __metadata:
     "@babel/preset-env": 7.19.4
     "@babel/preset-react": 7.18.6
     "@babel/preset-typescript": 7.18.6
-    "@navikt/ds-icons": ^2.0.10
-    "@navikt/ds-react": ^2.0.10
+    "@navikt/ds-icons": ^2.0.11
+    "@navikt/ds-react": ^2.0.11
     "@rollup/plugin-babel": 6.0.2
     "@rollup/plugin-commonjs": 23.0.2
     "@rollup/plugin-node-resolve": ^15.0.1
@@ -3186,12 +3186,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-react-internal@^2.0.10, @navikt/ds-react-internal@workspace:@navikt/internal/react":
+"@navikt/ds-react-internal@^2.0.11, @navikt/ds-react-internal@workspace:@navikt/internal/react":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-react-internal@workspace:@navikt/internal/react"
   dependencies:
-    "@navikt/ds-icons": ^2.0.10
-    "@navikt/ds-react": ^2.0.10
+    "@navikt/ds-icons": ^2.0.11
+    "@navikt/ds-react": ^2.0.11
     clsx: ^1.1.1
     concurrently: 7.2.1
     copy-to-clipboard: ^3.3.1
@@ -3207,12 +3207,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-react@2.0.10, @navikt/ds-react@^2.0.10, @navikt/ds-react@workspace:@navikt/core/react":
+"@navikt/ds-react@2.0.11, @navikt/ds-react@^2.0.11, @navikt/ds-react@workspace:@navikt/core/react":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-react@workspace:@navikt/core/react"
   dependencies:
     "@floating-ui/react-dom-interactions": 0.9.2
-    "@navikt/ds-icons": ^2.0.10
+    "@navikt/ds-icons": ^2.0.11
     "@radix-ui/react-tabs": 1.0.0
     "@radix-ui/react-toggle-group": 1.0.0
     "@testing-library/dom": 8.13.0
@@ -3248,11 +3248,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tailwind@^2.0.10, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
+"@navikt/ds-tailwind@^2.0.11, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind"
   dependencies:
-    "@navikt/ds-tokens": ^2.0.10
+    "@navikt/ds-tokens": ^2.0.11
     "@types/jest": ^29.0.0
     color: 4.2.3
     jest: ^29.0.0
@@ -3263,7 +3263,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tokens@^2.0.10, @navikt/ds-tokens@workspace:@navikt/core/tokens":
+"@navikt/ds-tokens@^2.0.11, @navikt/ds-tokens@workspace:@navikt/core/tokens":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
   dependencies:
@@ -7741,14 +7741,14 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "aksel.nav.no@workspace:aksel.nav.no"
   dependencies:
-    "@navikt/ds-codemod": ^2.0.10
-    "@navikt/ds-css": ^2.0.10
-    "@navikt/ds-css-internal": ^2.0.10
-    "@navikt/ds-icons": ^2.0.10
-    "@navikt/ds-react": ^2.0.10
-    "@navikt/ds-react-internal": ^2.0.10
-    "@navikt/ds-tailwind": ^2.0.10
-    "@navikt/ds-tokens": ^2.0.10
+    "@navikt/ds-codemod": ^2.0.11
+    "@navikt/ds-css": ^2.0.11
+    "@navikt/ds-css-internal": ^2.0.11
+    "@navikt/ds-icons": ^2.0.11
+    "@navikt/ds-react": ^2.0.11
+    "@navikt/ds-react-internal": ^2.0.11
+    "@navikt/ds-tailwind": ^2.0.11
+    "@navikt/ds-tokens": ^2.0.11
     prettier-plugin-tailwindcss: ^0.1.13
   languageName: unknown
   linkType: soft
@@ -23819,8 +23819,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "shadow-dom@workspace:examples/shadow-dom"
   dependencies:
-    "@navikt/ds-css": 2.0.10
-    "@navikt/ds-react": 2.0.10
+    "@navikt/ds-css": 2.0.11
+    "@navikt/ds-react": 2.0.11
     "@types/react": ^18.0.0
     "@types/react-dom": ^18.0.0
     "@vitejs/plugin-react": ^2.1.0
@@ -27207,6 +27207,7 @@ __metadata:
     swr: ^1.1.2
     tailwindcss: ^3.2.0
     ts-jest: ^29.0.0
+    ts-node: 10.9.0
     typescript: ^4.8.0
   languageName: unknown
   linkType: soft