Version Packages (#1846)

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

.github/workflows/aksel-dev.yml

@@ -40,6 +40,10 @@ jobs:
   build_and_deploy:
     name: Build and deploy to dev-gcp
     runs-on: ubuntu-20.04
+    permissions:
+      packages: "write"
+      contents: "read"
+      id-token: "write"
     steps:
       - uses: actions/setup-node@v3
         with:
@@ -51,6 +55,7 @@ jobs:
           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
+          echo "USE_CDN_ASSETS=true" >> aksel.nav.no/website/.env
 
       - name: Restore cache
         uses: actions/cache@v3
@@ -68,6 +73,13 @@ jobs:
           yarn boot
           yarn workspace aksel.nav.no build:next
 
+      - name: Upload static files to NAV CDN
+        uses: navikt/frontend/actions/cdn-upload/v1@main
+        with:
+          cdn-team-name: aksel
+          source: ./aksel.nav.no/website/.next/static
+          destination: "/website/_next"
+
       - name: Login to GitHub Container Registry
         uses: docker/login-action@f4ef78c080cd8ba55a85445d5b36e214a81df20a # Use commit-sha1 instead of tag for security concerns
         with:

.github/workflows/aksel-prod.yml

@@ -72,6 +72,10 @@ jobs:
   build_and_deploy:
     name: Build and deploy to prod-gcp
     runs-on: ubuntu-latest
+    permissions:
+      packages: "write"
+      contents: "read"
+      id-token: "write"
     steps:
       - uses: actions/setup-node@v3
         with:
@@ -83,6 +87,7 @@ jobs:
           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
+          echo "USE_CDN_ASSETS=true" >> aksel.nav.no/website/.env
 
       - name: Restore cache
         uses: actions/cache@v3
@@ -104,6 +109,13 @@ jobs:
       - name: Build application
         run: yarn workspace aksel.nav.no build:next
 
+      - name: Upload static files to NAV CDN
+        uses: navikt/frontend/actions/cdn-upload/v1@main
+        with:
+          cdn-team-name: aksel
+          source: ./aksel.nav.no/website/.next/static
+          destination: "/website/_next"
+
       - name: Login to GitHub Container Registry
         uses: docker/login-action@f4ef78c080cd8ba55a85445d5b36e214a81df20a # Use commit-sha1 instead of tag for security concerns
         with:

.github/workflows/codeql.yml

@@ -1,71 +0,0 @@
-# For most projects, this workflow file will not need changing; you simply need
-# to commit it to your repository.
-#
-# You may wish to alter this file to override the set of languages analyzed,
-# or to provide custom queries or build logic.
-#
-# ******** NOTE ********
-# We have attempted to detect the languages in your repository. Please check
-# the `language` matrix defined below to confirm you have the correct set of
-# supported CodeQL languages.
-#
-name: "CodeQL"
-
-on:
-  push:
-    branches: [main, next]
-  pull_request:
-    # The branches below must be a subset of the branches above
-    branches: [main]
-  schedule:
-    - cron: "41 8 * * 6"
-
-jobs:
-  analyze:
-    name: Analyze
-    runs-on: ubuntu-latest
-    permissions:
-      actions: read
-      contents: read
-      security-events: write
-
-    strategy:
-      fail-fast: false
-      matrix:
-        language: ["javascript"]
-        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
-        # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v3
-
-      # Initializes the CodeQL tools for scanning.
-      - name: Initialize CodeQL
-        uses: github/codeql-action/init@v2
-        with:
-          languages: ${{ matrix.language }}
-          # If you wish to specify custom queries, you can do so here or in a config file.
-          # By default, queries listed here will override any specified in a config file.
-          # Prefix the list here with "+" to use these queries and those in the config file.
-
-          # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
-          # queries: security-extended,security-and-quality
-
-      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-      # If this step fails, then you should remove it and run the build manually (see below)
-      - name: Autobuild
-        uses: github/codeql-action/autobuild@v2
-
-      # ℹ️ Command-line programs to run using the OS shell.
-      # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
-
-      #   If the Autobuild fails above, remove it and uncomment the following three lines.
-      #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
-
-      # - run: |
-      #   echo "Run, Build Application using script"
-      #   ./location_of_script_within_repo/buildscript.sh
-
-      - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v2

@navikt/codemod/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/ds-codemod
 
+## 2.6.2
+
+## 2.6.1
+
+## 2.6.0
+
 ## 2.5.1
 
 ## 2.5.0

@navikt/codemod/package.json

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

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/ds-css
 
+## 2.6.2
+
+## 2.6.1
+
+## 2.6.0
+
 ## 2.5.1
 
 ## 2.5.0

@navikt/core/css/package.json

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

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @navikt/ds-react
 
+## 2.6.2
+
+### Patch Changes
+
+- [`59d32e52c`](https://github.com/navikt/aksel/commit/59d32e52c437759e66aa50d200b4264a6ba53069) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset React18 problem med TextareaAutosize
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.6.2
+
+## 2.6.1
+
+### Patch Changes
+
+- [`1c5e06438`](https://github.com/navikt/aksel/commit/1c5e06438ce9ff8225d5b2b2bf1f94348dfefe9c) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Ny onSearchClick-prop i Search for lettere submit-handling
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.6.1
+
+## 2.6.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.6.0
+
 ## 2.5.1
 
 ### Patch Changes

@navikt/core/react/package.json

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

@navikt/core/react/src/form/search/Search.tsx

@@ -48,6 +48,10 @@ export interface SearchProps
    * Callback for click on clear-button or Escape keydown
    */
   onClear?: (e: SearchClearEvent) => void;
+  /**
+   * Callback for Search-button submit
+   */
+  onSearchClick?: (value: string) => void;
   /**
    * aria-label on clear button
    * @default "Tøm"
@@ -76,6 +80,7 @@ export interface SearchContextProps {
   disabled?: boolean;
   size: "medium" | "small";
   variant: "primary" | "secondary" | "simple";
+  handleClick: () => void;
 }
 
 export const SearchContext = React.createContext<SearchContextProps | null>(
@@ -106,6 +111,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
       variant = "primary",
       defaultValue,
       onChange,
+      onSearchClick,
       ...rest
     } = props;
 
@@ -146,6 +152,10 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
       wrapperRef
     );
 
+    const handleClick = () => {
+      onSearchClick?.(`${value ?? internalValue}`);
+    };
+
     return (
       <div
         ref={setWrapperRef}
@@ -221,6 +231,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
               size,
               disabled: inputProps.disabled,
               variant,
+              handleClick,
             }}
           >
             {children ? children : variant !== "simple" && <SearchButton />}

@navikt/core/react/src/form/search/SearchButton.tsx

@@ -17,7 +17,7 @@ export type SearchButtonType = React.ForwardRefExoticComponent<
 >;
 
 const SearchButton: SearchButtonType = forwardRef(
-  ({ className, children, disabled, ...rest }, ref) => {
+  ({ className, children, disabled, onClick, ...rest }, ref) => {
     const context = useContext(SearchContext);
 
     if (context === null) {
@@ -25,7 +25,7 @@ const SearchButton: SearchButtonType = forwardRef(
       return null;
     }
 
-    const { size, variant } = context;
+    const { size, variant, handleClick } = context;
 
     return (
       <Button
@@ -36,6 +36,10 @@ const SearchButton: SearchButtonType = forwardRef(
         variant={variant === "secondary" ? "secondary" : "primary"}
         className={cl("navds-search__button-search", className)}
         disabled={context?.disabled ?? disabled}
+        onClick={(e) => {
+          handleClick();
+          onClick?.(e);
+        }}
         icon={
           <Search
             {...(children ? { "aria-hidden": true } : { title: "Søk" })}

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

@@ -46,6 +46,7 @@ export const Default = {
           variant={props.variant}
           hideLabel={props.hideLabel}
           error={props.error}
+          onSearchClick={console.log}
         />
       </div>
     );

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

@@ -1,12 +1,6 @@
 /* https://github.com/mui/material-ui/blob/master/packages/mui-base/src/TextareaAutosize/TextareaAutosize.js */
-import React, {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import React, { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import ReactDOM from "react-dom";
 import { debounce, mergeRefs, useClientLayoutEffect } from "..";
 
 /**
@@ -50,7 +44,7 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
     const renders = useRef(0);
     const [state, setState] = useState<any>({});
 
-    const syncHeight = useCallback(() => {
+    const getUpdatedState = React.useCallback(() => {
       if (!inputRef.current || !shadowRef.current) return;
       const input = inputRef.current;
       const containerWindow = ownerWindow(input);
@@ -102,50 +96,85 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
         outerHeight + (boxSizing === "border-box" ? padding + border : 0);
       const overflow = Math.abs(outerHeight - innerHeight) <= 1;
 
-      setState((prevState) => {
-        // Need a large enough difference to update the height.
-        // This prevents infinite rendering loop.
-        if (
-          renders.current < 20 &&
-          ((outerHeightStyle > 0 &&
-            Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) >
-              1) ||
-            prevState.overflow !== overflow)
-        ) {
-          renders.current += 1;
-          return {
-            overflow,
-            outerHeightStyle,
-          };
-        }
-
-        if (process.env.NODE_ENV !== "production") {
-          if (renders.current === 20) {
-            console.error(
-              [
-                "Textarea: Too many re-renders. The layout is unstable.",
-                "TextareaAutosize limits the number of renders to prevent an infinite loop.",
-              ].join("\n")
-            );
-          }
-        }
-
-        return prevState;
-      });
+      return { outerHeightStyle, overflow };
     }, [maxRows, minRows, other?.placeholder]);
 
-    useEffect(() => {
+    const syncHeight = React.useCallback(() => {
+      const newState = getUpdatedState();
+
+      if (isEmpty(newState)) {
+        return;
+      }
+
+      setState((prevState) => {
+        return updateState(prevState, newState);
+      });
+    }, [getUpdatedState]);
+
+    const updateState = (prevState, newState) => {
+      const { outerHeightStyle, overflow } = newState;
+      // Need a large enough difference to update the height.
+      // This prevents infinite rendering loop.
+      if (
+        renders.current < 20 &&
+        ((outerHeightStyle > 0 &&
+          Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1) ||
+          prevState.overflow !== overflow)
+      ) {
+        renders.current += 1;
+        return {
+          overflow,
+          outerHeightStyle,
+        };
+      }
+      if (process.env.NODE_ENV !== "production") {
+        if (renders.current === 20) {
+          console.error(
+            [
+              "Textarea: Too many re-renders. The layout is unstable.",
+              "TextareaAutosize limits the number of renders to prevent an infinite loop.",
+            ].join("\n")
+          );
+        }
+      }
+      return prevState;
+    };
+
+    const withFlushSync = () => {
+      const newState = getUpdatedState();
+
+      if (isEmpty(newState)) {
+        return;
+      }
+
+      // In React 18, state updates in a ResizeObserver's callback are happening after the paint which causes flickering
+      // when doing some visual updates in it. Using flushSync ensures that the dom will be painted after the states updates happen
+      // Related issue - https://github.com/facebook/react/issues/24331
+      ReactDOM.flushSync(() => {
+        setState((prevState) => {
+          return updateState(prevState, newState);
+        });
+      });
+    };
+
+    React.useEffect(() => {
       const handleResize = debounce(() => {
         renders.current = 0;
-        syncHeight();
+
+        if (inputRef.current) {
+          withFlushSync();
+        }
       });
-      const containerWindow = ownerWindow(inputRef.current);
+      let resizeObserver: ResizeObserver;
+
+      const input = inputRef.current!;
+      const containerWindow = ownerWindow(input);
+
       containerWindow.addEventListener("resize", handleResize);
-      let resizeObserver;
 
       if (typeof ResizeObserver !== "undefined") {
         resizeObserver = new ResizeObserver(handleResize);
-        resizeObserver.observe(inputRef.current);
+        resizeObserver.observe(input);
       }
 
       return () => {
@@ -155,7 +184,7 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
           resizeObserver.disconnect();
         }
       };
-    }, [syncHeight]);
+    });
 
     useClientLayoutEffect(() => {
       syncHeight();
@@ -221,4 +250,13 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
   }
 );
 
+function isEmpty(obj: any) {
+  return (
+    obj === undefined ||
+    obj === null ||
+    Object.keys(obj).length === 0 ||
+    (obj?.outerHeightStyle === 0 && !obj?.overflow)
+  );
+}
+
 export default TextareaAutosize;

@navikt/core/tailwind/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/ds-tailwind
 
+## 2.6.2
+
+## 2.6.1
+
+## 2.6.0
+
 ## 2.5.1
 
 ## 2.5.0

@navikt/core/tailwind/package.json

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

@navikt/core/tokens/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/ds-tokens
 
+## 2.6.2
+
+## 2.6.1
+
+## 2.6.0
+
 ## 2.5.1
 
 ## 2.5.0

@navikt/core/tokens/package.json

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

@navikt/icons/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/ds-icons
 
+## 2.6.2
+
+## 2.6.1
+
+## 2.6.0
+
 ## 2.5.1
 
 ## 2.5.0

@navikt/icons/package.json

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

@navikt/internal/css/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/ds-css-internal
 
+## 2.6.2
+
+## 2.6.1
+
+## 2.6.0
+
 ## 2.5.1
 
 ## 2.5.0

@navikt/internal/css/package.json

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

@navikt/internal/react/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @navikt/ds-react-internal
 
+## 2.6.2
+
+### Patch Changes
+
+- Updated dependencies [[`59d32e52c`](https://github.com/navikt/aksel/commit/59d32e52c437759e66aa50d200b4264a6ba53069)]:
+  - @navikt/ds-react@2.6.2
+  - @navikt/ds-icons@2.6.2
+
+## 2.6.1
+
+### Patch Changes
+
+- [`e8b5b44f2`](https://github.com/navikt/aksel/commit/e8b5b44f28fbce79e2b17afb14c0978c2708f9ab) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Sender med onClick-event i onSelectPeriod
+
+- Updated dependencies [[`1c5e06438`](https://github.com/navikt/aksel/commit/1c5e06438ce9ff8225d5b2b2bf1f94348dfefe9c)]:
+  - @navikt/ds-react@2.6.1
+  - @navikt/ds-icons@2.6.1
+
+## 2.6.0
+
+### Minor Changes
+
+- [#1835](https://github.com/navikt/aksel/pull/1835) [`b575816e7`](https://github.com/navikt/aksel/commit/b575816e736d440f224e1e70abf851262a976981) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Controlled og defaultOpen-states for Dropdown
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.6.0
+  - @navikt/ds-icons@2.6.0
+
 ## 2.5.1
 
 ### Patch Changes

@navikt/internal/react/package.json

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

@navikt/internal/react/src/dropdown/Dropdown.tsx

@@ -5,7 +5,7 @@ import Menu, { MenuType } from "./Menu";
 export interface DropdownProps {
   children: React.ReactNode;
   /**
-   * Handler that is called when an item is selected.
+   * Handler called when an item is selected.
    */
   onSelect?: (element: React.MouseEvent) => void;
   /**
@@ -13,6 +13,14 @@ export interface DropdownProps {
    * @default true
    */
   closeOnSelect?: boolean;
+  /**
+   * @default false
+   */
+  defaultOpen?: boolean;
+  /**
+   * Controlled state of the dropdown. When set, you will need to handle onClose and onSelect manually.
+   */
+  open?: boolean;
 }
 
 export interface DropdownType extends React.FC<DropdownProps> {
@@ -22,7 +30,7 @@ export interface DropdownType extends React.FC<DropdownProps> {
 
 export interface DropdownContextType {
   readonly isOpen: boolean;
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  handleToggle: (v: boolean) => void;
   readonly anchorEl: Element | null;
   setAnchorEl: React.Dispatch<React.SetStateAction<Element | null>>;
   onSelect: (element: React.MouseEvent) => void;
@@ -30,20 +38,34 @@ export interface DropdownContextType {
 
 export const DropdownContext = createContext<DropdownContextType | null>(null);
 
-export const Dropdown = (({ children, onSelect, closeOnSelect = true }) => {
-  const [isOpen, setIsOpen] = useState<boolean>(false);
+export const Dropdown = (({
+  children,
+  onSelect,
+  closeOnSelect = true,
+  defaultOpen = false,
+  open,
+}) => {
+  const [isOpen, setIsOpen] = useState<boolean>(defaultOpen);
   const [anchorEl, setAnchorEl] = useState<Element | null>(null);
 
+  const handleToggle = (v: boolean) => {
+    if (open === undefined) {
+      setIsOpen(v);
+    }
+  };
+
   return (
     <DropdownContext.Provider
       value={{
-        isOpen,
-        setIsOpen,
+        isOpen: open ?? isOpen,
+        handleToggle,
         anchorEl,
         setAnchorEl,
         onSelect: (event) => {
           onSelect?.(event);
-          closeOnSelect && setIsOpen(false);
+          if (closeOnSelect) {
+            open === undefined && setIsOpen(false);
+          }
         },
       }}
     >

@navikt/internal/react/src/dropdown/Menu/GroupedList/Item.tsx

@@ -1,6 +1,6 @@
-import React, { forwardRef, useContext } from "react";
-import cl from "clsx";
 import { OverridableComponent } from "@navikt/ds-react";
+import cl from "clsx";
+import React, { forwardRef, useContext } from "react";
 import { DropdownContext } from "../../Dropdown";
 
 export interface GroupedItemProps
@@ -19,6 +19,7 @@ export type GroupedItemType = OverridableComponent<
 export const GroupedItem: GroupedItemType = forwardRef(
   ({ as: Component = "button", className, ...rest }, ref) => {
     const context = useContext(DropdownContext);
+
     return (
       <dd className="navdsi-dropdown__list-item">
         <Component

@navikt/internal/react/src/dropdown/Menu/List/Item.tsx

@@ -18,6 +18,7 @@ export type ListItemType = OverridableComponent<
 export const ListItem: ListItemType = forwardRef(
   ({ as: Component = "button", className, ...rest }, ref) => {
     const context = useContext(DropdownContext);
+
     return (
       <li className="navdsi-dropdown__list-item">
         <Component

@navikt/internal/react/src/dropdown/Menu/index.tsx

@@ -1,10 +1,10 @@
-import React, { forwardRef, useContext } from "react";
-import cl from "clsx";
 import { Popover } from "@navikt/ds-react";
-import List, { ListType } from "./List";
-import GroupedList, { GroupedListType } from "./GroupedList";
-import Divider, { DividerType } from "./Divider";
+import cl from "clsx";
+import React, { forwardRef, useContext } from "react";
 import { DropdownContext } from "../Dropdown";
+import Divider, { DividerType } from "./Divider";
+import GroupedList, { GroupedListType } from "./GroupedList";
+import List, { ListType } from "./List";
 
 interface MenuProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
@@ -57,7 +57,7 @@ export const Menu = forwardRef<HTMLDivElement, MenuProps>(
       return null;
     }
 
-    const { isOpen, anchorEl, setIsOpen } = context;
+    const { isOpen, anchorEl, handleToggle } = context;
 
     return (
       <Popover
@@ -70,7 +70,7 @@ export const Menu = forwardRef<HTMLDivElement, MenuProps>(
         anchorEl={anchorEl}
         open={isOpen}
         onClose={() => {
-          setIsOpen(false);
+          handleToggle(false);
           onClose && onClose();
         }}
       />

@navikt/internal/react/src/dropdown/Toggle.tsx

@@ -23,15 +23,23 @@ export const Toggle: ToggleType = forwardRef(
       return null;
     }
 
-    const { setAnchorEl, setIsOpen, isOpen } = context;
+    const { setAnchorEl, handleToggle, isOpen } = context;
 
     return (
       <button
         {...rest}
-        ref={ref}
+        ref={(el) => {
+          setAnchorEl(el);
+
+          if (typeof ref === "function") {
+            ref(el);
+          } else if (ref != null) {
+            ref.current = el;
+          }
+        }}
         onClick={(e) => {
           setAnchorEl(e.currentTarget);
-          setIsOpen((isOpen) => !isOpen);
+          handleToggle(!isOpen);
           onClick && onClick(e);
         }}
         aria-expanded={isOpen}

@navikt/internal/react/src/dropdown/dropdown.stories.tsx

@@ -1,6 +1,7 @@
-import React from "react";
+import React, { useState } from "react";
 import { Dropdown } from "..";
 import { Meta } from "@storybook/react";
+import { Button } from "@navikt/ds-react";
 
 export default {
   title: "ds-react-internal/Dropdown",
@@ -34,3 +35,57 @@ export const Default = () => {
     </Dropdown>
   );
 };
+
+export const DefaultOpen = {
+  render: () => (
+    <Dropdown onSelect={(event) => console.log(event)} defaultOpen>
+      <Button as={Dropdown.Toggle}>Toggle</Button>
+      <Dropdown.Menu
+        strategy="fixed"
+        onClose={() => console.log("ONCLOSE default")}
+      >
+        <Dropdown.Menu.GroupedList>
+          <Dropdown.Menu.GroupedList.Heading>
+            Systemer og oppslagsverk
+          </Dropdown.Menu.GroupedList.Heading>
+          <Dropdown.Menu.GroupedList.Item
+            onClick={() => console.log("GroupedList.Item-click")}
+          >
+            Gosys
+          </Dropdown.Menu.GroupedList.Item>
+        </Dropdown.Menu.GroupedList>
+      </Dropdown.Menu>
+    </Dropdown>
+  ),
+  args: { chromatic: { delay: 300 } },
+};
+
+export const ControlledOpen = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [openState, setOpenState] = useState(true);
+    return (
+      <Dropdown onSelect={(event) => console.log(event)} open={openState}>
+        <Button as={Dropdown.Toggle} onClick={() => setOpenState(!openState)}>
+          Toggle
+        </Button>
+        <Dropdown.Menu
+          strategy="fixed"
+          onClose={() => console.log("ONCLOSE CONTROLLED")}
+        >
+          <Dropdown.Menu.GroupedList>
+            <Dropdown.Menu.GroupedList.Heading>
+              Systemer og oppslagsverk
+            </Dropdown.Menu.GroupedList.Heading>
+            <Dropdown.Menu.GroupedList.Item
+              onClick={() => console.log("GroupedList.Item-click")}
+            >
+              Gosys
+            </Dropdown.Menu.GroupedList.Item>
+          </Dropdown.Menu.GroupedList>
+        </Dropdown.Menu>
+      </Dropdown>
+    );
+  },
+  args: { chromatic: { delay: 300 } },
+};

@navikt/internal/react/src/timeline/period/ClickablePeriod.tsx

@@ -8,7 +8,7 @@ import { ariaLabel, getConditionalClasses } from "../utils/period";
 import { PeriodProps } from "./index";
 
 interface TimelineClickablePeriodProps extends PeriodProps {
-  onSelectPeriod?: () => void;
+  onSelectPeriod?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   isActive?: boolean;
   periodRef: React.ForwardedRef<HTMLButtonElement>;
 }
@@ -49,9 +49,9 @@ const ClickablePeriod = React.memo(
             firstFocus && addFocusable(r, index);
             mergedRef(r);
           }}
-          onClick={() => {
+          onClick={(e) => {
             children && setSelected((x) => !x);
-            onSelectPeriod?.();
+            onSelectPeriod?.(e);
           }}
           aria-label={ariaLabel(start, end, status, statusLabel)}
           className={cl(

@navikt/internal/react/src/timeline/period/index.tsx

@@ -32,7 +32,7 @@ export interface TimelinePeriodProps
   /**
    * Callback when selecting a period.
    */
-  onSelectPeriod?: () => void;
+  onSelectPeriod?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   /**
    * Content displayed in Popover on click.
    */

README.md

@@ -35,8 +35,7 @@
 └── codemod         # @navikt/ds-codemod, migrerings-scripts
 
 aksel.nav.no/
-├── website        # NEXT.JS app (v12)
-└── website/sanity # Sanity CMS-app (v3)
+└── website        # NEXT.JS app (v12) website/sanity # Sanity CMS-app (v3)
 ```
 
 ## Commands

aksel.nav.no/package.json

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

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

@@ -97,3 +97,54 @@ export const YarnIcon = () => (
     />
   </svg>
 );
+
+export const StorybookIcon = ({ ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    width="18.2"
+    height="22.4"
+    version="1.1"
+    viewBox="0 0 52 64"
+    focusable={false}
+    aria-hidden
+    {...props}
+  >
+    <defs>
+      <path
+        id="path-1"
+        d="M1.94279175,57.1309472 L0.0022554267,5.95476663 C-0.0618328758,4.26461814 1.24754196,2.83223697 2.95307926,2.72673418 L46.9330824,0.00617628491 C48.6691159,-0.10121296 50.1644074,1.2046298 50.2729096,2.92285771 C50.2769973,2.98759391 50.2790429,3.05244063 50.2790429,3.11730315 L50.2790429,58.8828028 C50.2790429,60.6043831 48.8689636,62 47.1295431,62 C47.0824212,62 47.0353056,61.9989534 46.9882313,61.9968606 L4.94876437,60.1280997 C3.31149338,60.0553189 2.00425692,58.751918 1.94279175,57.1309472 Z"
+      />
+    </defs>
+    <g
+      id="icon-storybook-monochrome"
+      fill="none"
+      fillRule="evenodd"
+      stroke="none"
+      strokeWidth="1"
+    >
+      <g id="storybook-icon" transform="translate(1.000000, 1.000000)">
+        <path
+          id="Combined-Shape"
+          fill="var(--a-gray-600)"
+          fillRule="nonzero"
+          d="M50.2729096,2.92285771 C50.2769973,2.98759391 50.2790429,3.05244063 50.2790429,3.11730315 L50.2790429,58.8828028 C50.2790429,60.6043831 48.8689636,62 47.1295431,62 C47.0824212,62 47.0353056,61.9989534 46.9882313,61.9968606 L4.94876437,60.1280997 C3.31149338,60.0553189 2.00425692,58.751918 1.94279175,57.1309472 L0.0022554267,5.95476663 C-0.0618328758,4.26461814 1.24754196,2.83223697 2.95307926,2.72673418 L37.427,0.594 L37.1272753,7.62078766 C37.1238721,7.70179664 37.1419373,7.78178731 37.179031,7.85305525 L37.2223772,7.92113026 C37.3791917,8.12573637 37.6738999,8.16578288 37.880626,8.0105767 L37.880626,8.0105767 L40.6382617,5.94019678 L42.9673936,7.75618537 C43.0546693,7.82423279 43.1634862,7.85946584 43.2745216,7.85562813 C43.5338374,7.84666553 43.7367132,7.6313391 43.7276576,7.37468316 L43.7276576,7.37468316 L43.467,0.22 L46.9330824,0.00617628491 C48.6691159,-0.10121296 50.1644074,1.2046298 50.2729096,2.92285771 Z"
+        />
+        <path
+          id="S"
+          fill="#fff"
+          fillRule="nonzero"
+          d="M29.4029796,23.368648 C29.4029796,24.58142 37.6567008,24.00017 38.7646901,23.1482813 C38.7646901,14.8895929 34.2873503,10.5497821 26.0885852,10.5497821 C17.88982,10.5497821 13.2961856,14.9571143 13.2961856,21.5681161 C13.2961856,33.0822778 28.9959487,33.3026444 28.9959487,39.5830962 C28.9959487,41.3460299 28.1237396,42.3927719 26.2048797,42.3927719 C23.7045471,42.3927719 22.7160434,41.1289316 22.832338,36.8317805 C22.832338,35.8995698 13.2961856,35.6089448 13.0054493,36.8317805 C12.2651161,47.2453073 18.8201763,50.248968 26.3211742,50.248968 C33.5895831,50.248968 39.2880157,46.4144645 39.2880157,39.4729126 C39.2880157,27.132376 23.3556634,27.4629261 23.3556634,21.3477494 C23.3556634,18.8686237 25.2163761,18.5380737 26.3211742,18.5380737 C27.4841196,18.5380737 29.5774214,18.7409467 29.4029796,23.368648 Z"
+          mask="url(#mask-2)"
+        />
+        <path
+          id="bookmark"
+          fill="#fff"
+          fillRule="nonzero"
+          d="M37.1272753,7.62078766 L37.4276823,0.591583333 L43.4674595,0.218291667 L43.7276576,7.37468316 C43.7367132,7.6313391 43.5338374,7.84666553 43.2745216,7.85562813 C43.1634862,7.85946584 43.0546693,7.82423279 42.9673936,7.75618537 L40.6382617,5.94019678 L37.880626,8.0105767 C37.6738999,8.16578288 37.3791917,8.12573637 37.2223772,7.92113026 C37.1563661,7.83500129 37.1227378,7.72879963 37.1272753,7.62078766 Z"
+          mask="url(#mask-2)"
+        />
+      </g>
+    </g>
+  </svg>
+);

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

@@ -100,13 +100,21 @@ const TokenTable = ({ node }: { node: SanityT.Schema.token_kategori }) => {
               Komponent-tokens gir deg muligheten til å sette opp theming eller
               justere styling uten å måtte overskrive css-klasser. Les gjennom{" "}
               <NextLink
-                href="https://aksel.nav.no/grunnleggende/styling/design-tokens#hec62d38bc813"
+                href="/grunnleggende/styling/design-tokens#hec62d38bc813"
                 passHref
                 legacyBehavior
               >
                 <Link>guiden vår</Link>
               </NextLink>{" "}
-              for mer info.
+              eller utforsk alle{" "}
+              <NextLink
+                href="/grunnleggende/styling/design-tokens"
+                passHref
+                legacyBehavior
+              >
+                <Link>design tokens</Link>
+              </NextLink>
+              .
             </BodyLong>
           </div>
         )}

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

@@ -19,6 +19,7 @@ const ComponentExamples = ({
 }): JSX.Element => {
   const [activeExample, setActiveExample] = useState(null);
   const [frameState, setFrameState] = useState(300);
+  const [unloaded, setUnloaded] = useState(true);
 
   const handleExampleLoad = () => {
     let attempts = 0;
@@ -32,6 +33,7 @@ const ComponentExamples = ({
         const newHeight = iframePadding + exampleWrapper.offsetHeight;
         clearInterval(waitForExampleContentToRender);
         setFrameState(newHeight < 300 ? 300 : newHeight);
+        setUnloaded(false);
       }
 
       attempts++;
@@ -77,7 +79,10 @@ const ComponentExamples = ({
                 key={fil._key}
                 value={fil.navn}
                 selected={active === fil.navn}
-                onClick={() => setActiveExample(fil.navn)}
+                onClick={() => {
+                  setActiveExample(fil.navn);
+                  setUnloaded(true);
+                }}
               >
                 {fixName(fil.navn)}
               </Chips.Toggle>
@@ -100,7 +105,15 @@ const ComponentExamples = ({
 
             {active === fil.navn && (
               <>
-                <div className="overflow-hidden rounded-t border border-b-0 border-gray-300 bg-gray-50">
+                <div
+                  className={cl(
+                    "overflow-hidden rounded-t border border-b-0 border-gray-300 ",
+                    {
+                      "relative animate-pulse": unloaded,
+                      "bg-gray-50": !unloaded,
+                    }
+                  )}
+                >
                   <iframe
                     src={`/eksempler/${node.dir.title}/${fil.navn.replace(
                       ".tsx",
@@ -111,10 +124,19 @@ const ComponentExamples = ({
                     id={iframeId}
                     aria-label={`${node?.dir?.title} ${fil.navn} eksempel`}
                     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)]"
+                      "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)]",
+                      { invisible: unloaded }
                     )}
                     title="Kode-eksempler"
                   />
+                  {unloaded && (
+                    <div className="absolute inset-0 mx-auto flex flex-col items-center justify-center gap-2">
+                      <div className="grid w-3/5 gap-2">
+                        <div className="bg-surface-neutral-subtle h-6 w-2/3 rounded-xl" />
+                        <div className="bg-surface-neutral-subtle h-16 w-full rounded-xl" />
+                      </div>
+                    </div>
+                  )}
                 </div>
                 <div className="mb-2 flex justify-center gap-2 rounded-b border border-gray-300 px-2 py-1 text-base sm:justify-end ">
                   <CodeSandbox code={fil.innhold.trim()} />

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

@@ -5,10 +5,12 @@ export const Frame = ({
   tokens,
   styles,
   element: Element,
+  showHex,
 }: {
   tokens: { name: string; value: string; description?: string }[];
   styles?: string;
   element?: ({ token, name }: { token: string; name?: string }) => JSX.Element;
+  showHex?: boolean;
 }) => {
   const hasDescription = !!tokens.find((x) => x?.description);
   return (
@@ -45,7 +47,7 @@ export const Frame = ({
               {c.value}
             </td>
             <Detail as="td" className="mt-1">
-              {c.description}
+              {showHex ? getHex(c.value) : c.description}
             </Detail>
           </tr>
         ))}
@@ -53,3 +55,23 @@ export const Frame = ({
     </table>
   );
 };
+
+function getHex(value: string) {
+  return RGBAToHexA(value.replace(", 1)", ""));
+}
+
+/* https://stackoverflow.com/a/73401564 */
+function RGBAToHexA(rgba, forceRemoveAlpha = false) {
+  return (
+    "#" +
+    rgba
+      .replace(/^rgba?\(|\s+|\)$/g, "") // Get's rgba / rgb string values
+      .split(",") // splits them at ","
+      .filter((string, index) => !forceRemoveAlpha || index !== 3)
+      .map((string) => parseFloat(string)) // Converts them to numbers
+      .map((number, index) => (index === 3 ? Math.round(number * 255) : number)) // Converts alpha to 255 number
+      .map((number) => number.toString(16)) // Converts numbers to hex
+      .map((string) => (string.length === 1 ? "0" + string : string)) // Adds 0 when length of one number is 1
+      .join("")
+  ); // Puts the array to togehter to a string
+}

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

@@ -5,5 +5,5 @@ import { Frame } from "../Frame";
 export const GlobalView = ({ cat }: { cat: string }) => {
   const colors = docs[cat];
 
-  return <Frame tokens={colors} styles="background" />;
+  return <Frame tokens={colors} styles="background" showHex />;
 };

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

@@ -1,6 +1,6 @@
 import { PeopleInCircle } from "@navikt/ds-icons";
 import docs from "@navikt/ds-tokens/docs.json";
-import color from "color";
+import color from "tinycolor2";
 import { Frame } from "../Frame";
 
 export const SemanticView = ({ cat }: { cat: string }) => {
@@ -11,9 +11,10 @@ export const SemanticView = ({ cat }: { cat: string }) => {
       <Frame
         tokens={colors}
         styles="color"
+        showHex
         element={({ token }: { token: string }) => {
           const c = color(token);
-          const isLigth = c.luminosity() > 0.9;
+          const isLigth = c.getLuminance() > 0.9;
 
           return (
             <div
@@ -38,9 +39,10 @@ export const SemanticView = ({ cat }: { cat: string }) => {
       <Frame
         tokens={colors}
         styles="color"
+        showHex
         element={({ token }: { token: string }) => {
           const c = color(token);
-          const isLigth = c.luminosity() > 0.9;
+          const isLigth = c.getLuminance() > 0.9;
 
           return (
             <div
@@ -66,9 +68,10 @@ export const SemanticView = ({ cat }: { cat: string }) => {
       <Frame
         tokens={colors}
         styles="color"
+        showHex
         element={({ token }: { token: string }) => {
           const c = color(token);
-          const isLigth = c.luminosity() > 0.9;
+          const isLigth = c.getLuminance() > 0.7;
 
           return (
             <div
@@ -92,5 +95,5 @@ export const SemanticView = ({ cat }: { cat: string }) => {
       />
     );
   }
-  return <Frame tokens={colors} styles="background" />;
+  return <Frame tokens={colors} styles="background" showHex />;
 };

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

@@ -5,16 +5,18 @@ const withBundleAnalyzer = require("@next/bundle-analyzer")({
   enabled: process.env.ANALYZE === "true",
 });
 
+const cdnUrl = "https://cdn.nav.no";
+
 const ContentSecurityPolicy = `
-  default-src 'self' 'unsafe-inline';
-  font-src 'self' https://cdn.nav.no data:;
-  img-src 'self' cdn.sanity.io https://avatars.githubusercontent.com data:;
-  script-src 'self' https://in2.taskanalytics.com/tm.js 'nonce-4e1aa203a32e' 'unsafe-eval';
-  style-src 'self' 'unsafe-inline';
+  default-src 'self' 'unsafe-inline' ${cdnUrl};
+  font-src 'self' ${cdnUrl} data:;
+  img-src 'self' cdn.sanity.io https://avatars.githubusercontent.com data: ${cdnUrl};
+  script-src 'self' ${cdnUrl} https://in2.taskanalytics.com/tm.js 'nonce-4e1aa203a32e' 'unsafe-eval';
+  style-src 'self' ${cdnUrl} 'unsafe-inline';
   report-uri https://sentry.gc.nav.no/api/113/envelope/?sentry_key=d35bd60e413c489ca0f2fd389b4e6e5e&sentry_version=7;
-  connect-src 'self' https://raw.githubusercontent.com/navikt/ wss://hnbe3yhs.api.sanity.io cdn.sanity.io *.api.sanity.io https://amplitude.nav.no https://sentry.gc.nav.no https://in2.taskanalytics.com/03346;
+  connect-src 'self' ${cdnUrl} https://raw.githubusercontent.com/navikt/ wss://hnbe3yhs.api.sanity.io cdn.sanity.io *.api.sanity.io https://amplitude.nav.no https://sentry.gc.nav.no https://in2.taskanalytics.com/03346;
   frame-ancestors localhost:3333 'self' localhost:3000 https://verktoykasse.sanity.studio/;
-  media-src 'self' cdn.sanity.io;
+  media-src 'self' ${cdnUrl} cdn.sanity.io;
   frame-src 'self' https://web.microsoftstream.com localhost:3000 https://aksel.dev.nav.no/;
 `;
 
@@ -49,6 +51,8 @@ const securityHeaders = [
   },
 ];
 
+const useCdn = process.env.USE_CDN_ASSETS === "true";
+
 const config = () =>
   withBundleAnalyzer({
     transpilePackages: ["@navikt/ds-tokens"],
@@ -63,6 +67,7 @@ const config = () =>
     publicRuntimeConfig: {
       NEXT_PUBLIC_TEST: process.env.NEXT_PUBLIC_TEST,
     },
+    assetPrefix: useCdn ? "https://cdn.nav.no/aksel/website" : undefined,
     async headers() {
       return [
         {

aksel.nav.no/website/package.json

@@ -39,16 +39,13 @@
     "boring-avatars": "1.7.0",
     "clsx": "^1.2.1",
     "codesandbox": "^2.2.3",
-    "color": "4.2.3",
     "copy-to-clipboard": "^3.3.1",
     "date-fns": "2.29.3",
     "fuse.js": "^6.6.2",
     "jose": "4.10.0",
-    "jwt-decode": "3.1.2",
     "lodash": "^4.17.21",
     "next": "^13.2.1",
     "next-sanity": "^4.1.5",
-    "prettier": "2.7.1",
     "prism-react-renderer": "^1.3.0",
     "prismjs": "^1.27.0",
     "react": "^18.0.0",
@@ -62,7 +59,8 @@
     "sitemap": "^7.0.0",
     "styled-components": "^5.2",
     "swr": "^1.1.2",
-    "tailwindcss": "^3.2.0"
+    "tailwindcss": "^3.2.0",
+    "tinycolor2": "^1.6.0"
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.5.2",

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

@@ -240,7 +240,7 @@ const Forside = ({
 
         <main tabIndex={-1} id="hovedinnhold" className="focus:outline-none">
           <div className="z-20 pb-8">
-            <div className="centered-layout sm:mb-18 sm:max-w-screen-xs relative mb-16 mt-20 grid max-w-xs place-items-center text-center sm:mt-36">
+            <div className="centered-layout sm:mb-18 relative mb-16 mt-20 grid max-w-xs place-items-center text-center sm:mt-36 sm:max-w-[648px]">
               <Heading
                 level="1"
                 size="xlarge"

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

@@ -9,6 +9,7 @@ import {
   YarnIcon,
   FigmaIcon,
   ChangelogIcon,
+  StorybookIcon,
 } from "components/assets";
 import { WithSidebar } from "components/layout/page-templates/WithSidebar";
 import ComponentOverview from "components/sanity-modules/component-overview";
@@ -84,6 +85,20 @@ function Links() {
       >
         <FigmaIcon /> Figma
       </a>
+      <a
+        target="_blank"
+        rel="noreferrer noopener"
+        href="/storybook"
+        className="hover:text-text-default focus:text-text-on-inverted focus:shadow-focus group flex items-center gap-1 underline hover:no-underline focus:bg-blue-800 focus:no-underline focus:outline-none"
+        onClick={() =>
+          logAmplitudeEvent("link", {
+            kilde: "intro-lenker ikonside",
+            til: "storybook",
+          })
+        }
+      >
+        <StorybookIcon className="mr-1 group-focus:invert" /> Storybook
+      </a>
     </BodyShort>
   );
 }

aksel.nav.no/website/public/images/list-dot.svg

@@ -1,16 +0,0 @@
-<svg
-  width="11"
-  height="10"
-  viewBox="0 0 11 10"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <rect
-    y="5"
-    width="8"
-    height="8"
-    rx="2"
-    transform="rotate(-45 0 5)"
-    fill="#005B82"
-  />
-</svg>

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

@@ -39,7 +39,7 @@ p.override-text-no-max {
 }
 
 .aksel-artikkel .aksel-list-ul li::before {
-  content: url("/images/list-dot.svg");
+  content: url("data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSIxMSIKICBoZWlnaHQ9IjEwIgogIHZpZXdCb3g9IjAgMCAxMSAxMCIKICBmaWxsPSJub25lIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKPgogIDxyZWN0CiAgICB5PSI1IgogICAgd2lkdGg9IjgiCiAgICBoZWlnaHQ9IjgiCiAgICByeD0iMiIKICAgIHRyYW5zZm9ybT0icm90YXRlKC00NSAwIDUpIgogICAgZmlsbD0iIzAwNUI4MiIKICAvPgo8L3N2Zz4K");
   position: absolute;
   left: 0;
 }

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

@@ -9,6 +9,9 @@ module.exports = {
   ],
   theme: {
     extend: {
+      screen: {
+        "2xl": "1440px",
+      },
       colors: {
         pink: {
           50: "#fdf2f8",

examples/shadow-dom/package.json

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

yarn.lock

@@ -3351,7 +3351,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/ds-codemod@^2.5.0, @navikt/ds-codemod@workspace:@navikt/codemod":
+"@navikt/ds-codemod@^2.6.0, @navikt/ds-codemod@workspace:@navikt/codemod":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-codemod@workspace:@navikt/codemod"
   dependencies:
@@ -3378,7 +3378,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-css-internal@^2.5.0, @navikt/ds-css-internal@workspace:@navikt/internal/css":
+"@navikt/ds-css-internal@^2.6.0, @navikt/ds-css-internal@workspace:@navikt/internal/css":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-css-internal@workspace:@navikt/internal/css"
   dependencies:
@@ -3389,11 +3389,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-css@2.5.0, @navikt/ds-css@^2.5.0, @navikt/ds-css@workspace:@navikt/core/css":
+"@navikt/ds-css@2.6.0, @navikt/ds-css@^2.6.0, @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.5.0
+    "@navikt/ds-tokens": ^2.6.0
     normalize.css: ^8.0.1
     postcss: ^8.4.0
     postcss-cli: ^9.0.0
@@ -3402,7 +3402,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-icons@^2.5.0, @navikt/ds-icons@workspace:@navikt/icons":
+"@navikt/ds-icons@^2.6.0, @navikt/ds-icons@workspace:@navikt/icons":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-icons@workspace:@navikt/icons"
   dependencies:
@@ -3438,8 +3438,8 @@ __metadata:
     "@babel/preset-env": 7.19.4
     "@babel/preset-react": 7.18.6
     "@babel/preset-typescript": 7.18.6
-    "@navikt/ds-icons": ^2.5.0
-    "@navikt/ds-react": ^2.5.0
+    "@navikt/ds-icons": ^2.6.0
+    "@navikt/ds-react": ^2.6.0
     "@rollup/plugin-babel": 6.0.2
     "@rollup/plugin-commonjs": 23.0.2
     "@rollup/plugin-node-resolve": ^15.0.1
@@ -3464,12 +3464,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-react-internal@^2.5.0, @navikt/ds-react-internal@workspace:@navikt/internal/react":
+"@navikt/ds-react-internal@^2.6.0, @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.5.0
-    "@navikt/ds-react": ^2.5.0
+    "@navikt/ds-icons": ^2.6.0
+    "@navikt/ds-react": ^2.6.0
     clsx: ^1.1.1
     concurrently: 7.2.1
     copy-to-clipboard: ^3.3.1
@@ -3485,12 +3485,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-react@2.5.0, @navikt/ds-react@^2.5.0, @navikt/ds-react@workspace:@navikt/core/react":
+"@navikt/ds-react@2.6.0, @navikt/ds-react@^2.6.0, @navikt/ds-react@workspace:@navikt/core/react":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-react@workspace:@navikt/core/react"
   dependencies:
     "@floating-ui/react": 0.17.0
-    "@navikt/ds-icons": ^2.5.0
+    "@navikt/ds-icons": ^2.6.0
     "@radix-ui/react-tabs": 1.0.0
     "@radix-ui/react-toggle-group": 1.0.0
     "@testing-library/dom": 8.13.0
@@ -3526,11 +3526,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tailwind@^2.5.0, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
+"@navikt/ds-tailwind@^2.6.0, @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.5.0
+    "@navikt/ds-tokens": ^2.6.0
     "@types/jest": ^29.0.0
     color: 4.2.3
     jest: ^29.0.0
@@ -3541,7 +3541,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tokens@^2.5.0, @navikt/ds-tokens@workspace:@navikt/core/tokens":
+"@navikt/ds-tokens@^2.6.0, @navikt/ds-tokens@workspace:@navikt/core/tokens":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
   dependencies:
@@ -7390,14 +7390,14 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "aksel.nav.no@workspace:aksel.nav.no"
   dependencies:
-    "@navikt/ds-codemod": ^2.5.0
-    "@navikt/ds-css": ^2.5.0
-    "@navikt/ds-css-internal": ^2.5.0
-    "@navikt/ds-icons": ^2.5.0
-    "@navikt/ds-react": ^2.5.0
-    "@navikt/ds-react-internal": ^2.5.0
-    "@navikt/ds-tailwind": ^2.5.0
-    "@navikt/ds-tokens": ^2.5.0
+    "@navikt/ds-codemod": ^2.6.0
+    "@navikt/ds-css": ^2.6.0
+    "@navikt/ds-css-internal": ^2.6.0
+    "@navikt/ds-icons": ^2.6.0
+    "@navikt/ds-react": ^2.6.0
+    "@navikt/ds-react-internal": ^2.6.0
+    "@navikt/ds-tailwind": ^2.6.0
+    "@navikt/ds-tokens": ^2.6.0
     prettier-plugin-tailwindcss: ^0.2.3
   languageName: unknown
   linkType: soft
@@ -16225,13 +16225,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jwt-decode@npm:3.1.2":
-  version: 3.1.2
-  resolution: "jwt-decode@npm:3.1.2"
-  checksum: 20a4b072d44ce3479f42d0d2c8d3dabeb353081ba4982e40b83a779f2459a70be26441be6c160bfc8c3c6eadf9f6380a036fbb06ac5406b5674e35d8c4205eeb
-  languageName: node
-  linkType: hard
-
 "keyv@npm:3.0.0":
   version: 3.0.0
   resolution: "keyv@npm:3.0.0"
@@ -21749,8 +21742,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "shadow-dom@workspace:examples/shadow-dom"
   dependencies:
-    "@navikt/ds-css": 2.5.0
-    "@navikt/ds-react": 2.5.0
+    "@navikt/ds-css": 2.6.0
+    "@navikt/ds-react": 2.6.0
     "@types/react": ^18.0.0
     "@types/react-dom": ^18.0.0
     "@vitejs/plugin-react": ^2.1.0
@@ -23294,7 +23287,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tinycolor2@npm:^1.4.1":
+"tinycolor2@npm:^1.4.1, tinycolor2@npm:^1.6.0":
   version: 1.6.0
   resolution: "tinycolor2@npm:1.6.0"
   checksum: 6df4d07fceeedc0a878d7bac47e2cd47c1ceeb1078340a9eb8a295bc0651e17c750f73d47b3028d829f30b85c15e0572c0fd4142083e4c21a30a597e47f47230
@@ -24545,7 +24538,6 @@ __metadata:
     boring-avatars: 1.7.0
     clsx: ^1.2.1
     codesandbox: ^2.2.3
-    color: 4.2.3
     copy-to-clipboard: ^3.3.1
     cross-env: ^7.0.0
     date-fns: 2.29.3
@@ -24555,14 +24547,12 @@ __metadata:
     jest-environment-jsdom: ^29.0.0
     jose: 4.10.0
     json5: 2.2.1
-    jwt-decode: 3.1.2
     lodash: ^4.17.21
     next: ^13.2.1
     next-sanity: ^4.1.5
     postcss: ^8.4.0
     postcss-import: ^14.1.0
     postcss-loader: 7.0.0
-    prettier: 2.7.1
     prism-react-renderer: ^1.3.0
     prismjs: ^1.27.0
     react: ^18.0.0
@@ -24578,6 +24568,7 @@ __metadata:
     styled-components: ^5.2
     swr: ^1.1.2
     tailwindcss: ^3.2.0
+    tinycolor2: ^1.6.0
     ts-jest: ^29.0.0
     ts-node: 10.9.0
     typescript: ^4.8.0