Version Packages (#1753)

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

@navikt/codemod/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @navikt/ds-codemod
 
+## 2.0.17
+
+## 2.0.16
+
+## 2.0.15
+
+## 2.0.14
+
+## 2.0.13
+
 ## 2.0.12
 
 ## 2.0.11

@navikt/codemod/package.json

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

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @navikt/ds-css
 
+## 2.0.17
+
+## 2.0.16
+
+## 2.0.15
+
+### Patch Changes
+
+- [#1748](https://github.com/navikt/Designsystemet/pull/1748) [`22dfd8e60`](https://github.com/navikt/Designsystemet/commit/22dfd8e60315c421749394d35e41f412a00a7593) Thanks [@KenAJoh](https://github.com/KenAJoh)! - toptextPosition prop i Chat for horisontal plassering av navn og dato.
+
+## 2.0.14
+
+## 2.0.13
+
 ## 2.0.12
 
 ### Patch Changes

@navikt/core/css/chat.css

@@ -77,6 +77,22 @@
   align-self: flex-end;
 }
 
+.navds-chat--top-text-left .navds-chat__top-text {
+  align-self: flex-start;
+}
+
+.navds-chat--top-text-right .navds-chat__top-text {
+  align-self: flex-end;
+}
+
+.navds-chat--left .navds-chat__top-text--right {
+  align-self: flex-end;
+}
+
+.navds-chat--right .navds-chat__top-text--left {
+  align-self: flex-start;
+}
+
 .navds-chat__name {
   font-weight: var(--a-font-weight-bold);
 }

@navikt/core/css/package.json

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

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,44 @@
 # @navikt/ds-react
 
+## 2.0.17
+
+### Patch Changes
+
+- Updated dependencies [[`27e3dfee0`](https://github.com/navikt/Designsystemet/commit/27e3dfee07e135893e9f62cd32f80ed83a3510de)]:
+  - @navikt/ds-icons@2.0.17
+
+## 2.0.16
+
+### Patch Changes
+
+- Updated dependencies [[`54f8b0795`](https://github.com/navikt/Designsystemet/commit/54f8b07956bbfb7de51f6682a5fc64903bfd1bdf)]:
+  - @navikt/ds-icons@2.0.16
+
+## 2.0.15
+
+### Patch Changes
+
+- [#1748](https://github.com/navikt/Designsystemet/pull/1748) [`22dfd8e60`](https://github.com/navikt/Designsystemet/commit/22dfd8e60315c421749394d35e41f412a00a7593) Thanks [@KenAJoh](https://github.com/KenAJoh)! - toptextPosition prop i Chat for horisontal plassering av navn og dato.
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.0.15
+
+## 2.0.14
+
+### Patch Changes
+
+- [`8e5c55443`](https://github.com/navikt/Designsystemet/commit/8e5c554431c98b1b658c5054c0b3cf08b8a65e52) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bumpet @floating-ui/react
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.0.14
+
+## 2.0.13
+
+### Patch Changes
+
+- Updated dependencies [[`a6c339123`](https://github.com/navikt/Designsystemet/commit/a6c3391237f13394063e4c004ac9efb1875fc944)]:
+  - @navikt/ds-icons@2.0.13
+
 ## 2.0.12
 
 ### Patch Changes

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "2.0.12",
+  "version": "2.0.17",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -36,8 +36,8 @@
     "test": "TZ=UTC jest"
   },
   "dependencies": {
-    "@floating-ui/react-dom-interactions": "0.9.2",
-    "@navikt/ds-icons": "^2.0.12",
+    "@floating-ui/react": "0.17.0",
+    "@navikt/ds-icons": "^2.0.17",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

@navikt/core/react/src/chat/Bubble.tsx

@@ -19,6 +19,10 @@ export interface BubbleProps extends HTMLAttributes<HTMLDivElement> {
    * Background color on bubble
    */
   backgroundColor?: string;
+  /**
+   * Overrides hoizontal position of toptext
+   */
+  toptextPosition?: "left" | "right";
 }
 
 export type BubbleType = React.ForwardRefExoticComponent<
@@ -26,7 +30,18 @@ export type BubbleType = React.ForwardRefExoticComponent<
 >;
 
 const Bubble: BubbleType = forwardRef(
-  ({ children, className, name, timestamp, backgroundColor, ...rest }, ref) => {
+  (
+    {
+      children,
+      className,
+      name,
+      timestamp,
+      backgroundColor,
+      toptextPosition,
+      ...rest
+    },
+    ref
+  ) => {
     return (
       <div
         ref={ref}
@@ -35,7 +50,12 @@ const Bubble: BubbleType = forwardRef(
         {...rest}
       >
         {(timestamp || name) && (
-          <div className="navds-chat__top-text">
+          <div
+            className={cl(
+              `navds-chat__top-text`,
+              toptextPosition && `navds-chat__top-text--${toptextPosition}`
+            )}
+          >
             {name && <Detail className="navds-chat__name">{name}</Detail>}
             {timestamp && (
               <Detail className="navds-chat__timestamp">{timestamp}</Detail>

@navikt/core/react/src/chat/Chat.tsx

@@ -33,6 +33,11 @@ export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
    * @default "left"
    */
   position?: "left" | "right";
+  /**
+   * Hoizontal position of toptext
+   * @default Same as chat
+   */
+  toptextPosition?: "left" | "right";
 }
 
 interface ChatComponent
@@ -53,6 +58,7 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
       position = "left",
       avatarBgColor,
       backgroundColor,
+      toptextPosition,
       ...rest
     },
     ref
@@ -60,7 +66,13 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
     return (
       <div
         ref={ref}
-        className={cl("navds-chat", className, `navds-chat--${position}`)}
+        className={cl(
+          "navds-chat",
+          className,
+          `navds-chat--${position} navds-chat--top-text-${
+            toptextPosition ?? position
+          }`
+        )}
         {...rest}
       >
         <BodyShort

@navikt/core/react/src/chat/chat.stories.tsx

@@ -116,6 +116,57 @@ export const Position = () => {
   );
 };
 
+export const ToptextPosition = () => {
+  return (
+    <div className="colgap">
+      <Chat
+        avatar="ON"
+        name="Ola Normann"
+        timestamp="01.01.21 14:00"
+        backgroundColor="rgba(255, 249, 240, 1)"
+        avatarBgColor="rgba(255, 236, 204, 1)"
+        toptextPosition="right"
+      >
+        <Chat.Bubble>
+          Adipisicing laborum est eu laborum est sit in commodo enim sint
+          laboris labore nisi ut.
+        </Chat.Bubble>
+      </Chat>
+      <Chat
+        avatar="KH"
+        name="Kari Høyli"
+        timestamp="01.01.21 14:32"
+        position="right"
+        backgroundColor="rgba(230, 240, 255, 1)"
+        avatarBgColor="rgba(204, 225, 255, 1)"
+        toptextPosition="left"
+      >
+        <Chat.Bubble>
+          Reprehenderit pariatur officia exercitation laboris.
+        </Chat.Bubble>
+        <Chat.Bubble>
+          Enim velit deserunt do quis. Eu fugiat magna esse dolore ad sunt sit
+          est dolore incididunt. Occaecat cupidatat magna.
+        </Chat.Bubble>
+      </Chat>
+      <Chat
+        avatar="ON"
+        name="Ola Normann"
+        timestamp="01.01.21 15:00"
+        backgroundColor="rgba(255, 249, 240, 1)"
+        avatarBgColor="rgba(255, 236, 204, 1)"
+      >
+        <Chat.Bubble toptextPosition="right">
+          Exercitation irure Lorem cupidatat culpa anim cillum esse ullamco qui
+          dolore laborum et Lorem. Labore sunt duis id Lorem voluptate commodo
+          ea esse. Dolore esse aliqua proident ea ad commodo ut dolore voluptate
+          labore sunt aute.
+        </Chat.Bubble>
+      </Chat>
+    </div>
+  );
+};
+
 export const Avatar = () => {
   return (
     <Chat avatar={<Illustration />} timestamp="01.01.21 14:00">

@navikt/core/react/src/popover/Popover.tsx

@@ -8,7 +8,7 @@ import {
   useDismiss,
   useFloating,
   useInteractions,
-} from "@floating-ui/react-dom-interactions";
+} from "@floating-ui/react";
 import cl from "clsx";
 import React, {
   forwardRef,

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

@@ -11,7 +11,7 @@ import {
   useFocus,
   useHover,
   useInteractions,
-} from "@floating-ui/react-dom-interactions";
+} from "@floating-ui/react";
 import cl from "clsx";
 import React, {
   cloneElement,

@navikt/core/tailwind/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @navikt/ds-tailwind
 
+## 2.0.17
+
+## 2.0.16
+
+## 2.0.15
+
+## 2.0.14
+
+## 2.0.13
+
 ## 2.0.12
 
 ## 2.0.11

@navikt/core/tailwind/package.json

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

@navikt/core/tokens/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @navikt/ds-tokens
 
+## 2.0.17
+
+## 2.0.16
+
+## 2.0.15
+
+## 2.0.14
+
+## 2.0.13
+
 ## 2.0.12
 
 ## 2.0.11

@navikt/core/tokens/package.json

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

@navikt/icons/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @navikt/ds-icons
 
+## 2.0.17
+
+### Patch Changes
+
+- [`27e3dfee0`](https://github.com/navikt/Designsystemet/commit/27e3dfee07e135893e9f62cd32f80ed83a3510de) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Translate og Paragraph ikon
+
+## 2.0.16
+
+### Patch Changes
+
+- [`54f8b0795`](https://github.com/navikt/Designsystemet/commit/54f8b07956bbfb7de51f6682a5fc64903bfd1bdf) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Oppdatert ikoner med feile farger
+
+## 2.0.15
+
+## 2.0.14
+
+## 2.0.13
+
+### Patch Changes
+
+- [`a6c339123`](https://github.com/navikt/Designsystemet/commit/a6c3391237f13394063e4c004ac9efb1875fc944) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Ikonjusteringer sirkleikoner
+
 ## 2.0.12
 
 ## 2.0.11

@navikt/icons/meta.json

@@ -867,13 +867,13 @@
     "name": "Eu",
     "description": "",
     "created_at": "2022-02-08T11:45:47.104Z",
-    "pageName": "Privacy and secutity"
+    "pageName": "Privacy and security"
   },
   {
     "name": "EuFilled",
     "description": "",
     "created_at": "2022-02-08T11:45:47.109Z",
-    "pageName": "Privacy and secutity"
+    "pageName": "Privacy and security"
   },
   {
     "name": "Expand",
@@ -1479,13 +1479,13 @@
     "name": "Law",
     "description": "",
     "created_at": "2020-07-01T10:37:42.819Z",
-    "pageName": "Privacy and secutity"
+    "pageName": "Privacy and security"
   },
   {
     "name": "LawFilled",
     "description": "",
     "created_at": "2021-01-11T13:37:55.330Z",
-    "pageName": "Privacy and secutity"
+    "pageName": "Privacy and security"
   },
   {
     "name": "Left",
@@ -1551,37 +1551,37 @@
     "name": "Locked",
     "description": "",
     "created_at": "2020-07-01T10:37:43.027Z",
-    "pageName": "Privacy and secutity"
+    "pageName": "Privacy and security"
   },
   {
     "name": "LockedFilled",
     "description": "",
     "created_at": "2021-01-11T13:37:55.325Z",
-    "pageName": "Privacy and secutity"
+    "pageName": "Privacy and security"
   },
   {
     "name": "Login",
     "description": "",
     "created_at": "2020-07-01T10:37:43.087Z",
-    "pageName": "Privacy and secutity"
+    "pageName": "Privacy and security"
   },
   {
     "name": "LoginFilled",
     "description": "",
     "created_at": "2021-01-11T13:37:55.531Z",
-    "pageName": "Privacy and secutity"
+    "pageName": "Privacy and security"
   },
   {
     "name": "Logout",
     "description": "",
     "created_at": "2020-07-01T10:37:42.931Z",
-    "pageName": "Privacy and secutity"
+    "pageName": "Privacy and security"
   },
   {
     "name": "LogoutFilled",
     "description": "",
     "created_at": "2021-01-11T13:37:55.609Z",
-    "pageName": "Privacy and secutity"
+    "pageName": "Privacy and security"
   },
   {
     "name": "Male",
@@ -1811,6 +1811,12 @@
     "created_at": "2021-12-15T15:16:55.869Z",
     "pageName": "People"
   },
+  {
+    "name": "Paragraph",
+    "description": "",
+    "created_at": "2023-01-17T13:24:22.989Z",
+    "pageName": "Privacy and security"
+  },
   {
     "name": "Parking",
     "description": "",
@@ -1827,13 +1833,13 @@
     "name": "Passport",
     "description": "",
     "created_at": "2020-07-01T10:37:43.078Z",
-    "pageName": "Privacy and secutity"
+    "pageName": "Privacy and security"
   },
   {
     "name": "PassportFilled",
     "description": "",
     "created_at": "2021-01-11T13:37:55.757Z",
-    "pageName": "Privacy and secutity"
+    "pageName": "Privacy and security"
   },
   {
     "name": "PensionBag",
@@ -2615,6 +2621,12 @@
     "created_at": "2021-01-28T14:00:38.585Z",
     "pageName": "Buildings"
   },
+  {
+    "name": "Translate",
+    "description": "",
+    "created_at": "2023-01-18T10:52:22.311Z",
+    "pageName": "Interface"
+  },
   {
     "name": "Truck",
     "description": "",
@@ -2643,13 +2655,13 @@
     "name": "Unlocked",
     "description": "",
     "created_at": "2020-07-01T10:37:42.823Z",
-    "pageName": "Privacy and secutity"
+    "pageName": "Privacy and security"
   },
   {
     "name": "UnlockedFilled",
     "description": "",
     "created_at": "2021-01-11T13:37:55.317Z",
-    "pageName": "Privacy and secutity"
+    "pageName": "Privacy and security"
   },
   {
     "name": "Up",

@navikt/icons/package.json

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

@navikt/icons/svg/AddCircle.svg

@@ -1,3 +1,5 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0ZM12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM13 6V11H18V13H13V18H11V13H6V11H11V6H13Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.75 2.5C6.64137 2.5 2.5 6.64137 2.5 11.75C2.5 16.8586 6.64137 21 11.75 21C16.8586 21 21 16.8586 21 11.75C21 6.64137 16.8586 2.5 11.75 2.5ZM1 11.75C1 5.81294 5.81294 1 11.75 1C17.6871 1 22.5 5.81294 22.5 11.75C22.5 17.6871 17.6871 22.5 11.75 22.5C5.81294 22.5 1 17.6871 1 11.75Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17 12.75H7V11.25H17V12.75Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.25 17L11.25 7L12.75 7L12.75 17H11.25Z" fill="#262626"/>
 </svg>

@navikt/icons/svg/AddCircleFilled.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0ZM13 6V11H18V13H13V18H11V13H6V11H11V6H13Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.75 1C5.81294 1 1 5.81294 1 11.75C1 17.6871 5.81294 22.5 11.75 22.5C17.6871 22.5 22.5 17.6871 22.5 11.75C22.5 5.81294 17.6871 1 11.75 1ZM11.25 12.75V17H12.75V12.75H17V11.25H12.75V7H11.25V11.25H7V12.75H11.25Z" fill="#262626"/>
 </svg>

@navikt/icons/svg/Divide.svg

@@ -1,3 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C2 6.81465 5.94668 2.5511 11 2.04938V12.4142L18.3288 19.743C16.6044 21.1544 14.4017 22 12 22C6.47715 22 2 17.5228 2 12ZM19.7488 21.163C17.6587 22.9321 14.9533 24 12 24C5.37258 24 0 18.6274 0 12C0 5.70934 4.84047 0.549225 11 0.0410738V0H12H13V0.0410738C19.1595 0.549225 24 5.70934 24 12C24 14.9533 22.9321 17.6587 21.163 19.7488L21.1924 19.7782L20.4853 20.4853L19.7782 21.1924L19.7488 21.163ZM19.743 18.3288C21.1543 16.6044 22 14.4017 22 12C22 6.81465 18.0533 2.5511 13 2.04938V11.5858L19.743 18.3288Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2.75C6.89137 2.75 2.75 6.89137 2.75 12C2.75 17.1086 6.89137 21.25 12 21.25C17.1086 21.25 21.25 17.1086 21.25 12C21.25 6.89137 17.1086 2.75 12 2.75ZM1.25 12C1.25 6.06294 6.06294 1.25 12 1.25C17.9371 1.25 22.75 6.06294 22.75 12C22.75 17.9371 17.9371 22.75 12 22.75C6.06294 22.75 1.25 17.9371 1.25 12Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.25 2.5H12.75V12.1729L19.5103 18.4504L18.4897 19.5496L11.25 12.8271V2.5Z" fill="#262626"/>
 </svg>

@navikt/icons/svg/DivideFilled.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11 12V0.0410767C4.84047 0.549228 0 5.70934 0 12C0 18.6274 5.37258 24 12 24C14.9922 24 17.7286 22.9048 19.8303 21.0935L11 12ZM24 12C24 12.9017 23.9005 13.7803 23.712 14.6252C23.297 16.4847 22.4505 18.1814 21.2831 19.6048L13 11V0.0410767C18.2766 0.476386 22.5852 4.32557 23.712 9.37485C23.9005 10.2198 24 11.0983 24 12Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.25 1.27576C5.66285 1.6608 1.25 6.31506 1.25 12C1.25 17.9371 6.06294 22.75 12 22.75C14.5711 22.75 16.9313 21.8474 18.7812 20.3418L11.25 12.8107V1.27576ZM19.8766 19.3159C21.6596 17.3972 22.75 14.8259 22.75 12C22.75 6.31506 18.3372 1.6608 12.75 1.27576V12.1893L19.8766 19.3159Z" fill="#262626"/>
 </svg>

@navikt/icons/svg/MinusCircle.svg

@@ -1,3 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0ZM12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM18 11H6V13H18V11Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.75 2.5C6.64137 2.5 2.5 6.64137 2.5 11.75C2.5 16.8586 6.64137 21 11.75 21C16.8586 21 21 16.8586 21 11.75C21 6.64137 16.8586 2.5 11.75 2.5ZM1 11.75C1 5.81294 5.81294 1 11.75 1C17.6871 1 22.5 5.81294 22.5 11.75C22.5 17.6871 17.6871 22.5 11.75 22.5C5.81294 22.5 1 17.6871 1 11.75Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17 12.75H7V11.25H17V12.75Z" fill="#262626"/>
 </svg>

@navikt/icons/svg/MinusCircleFilled.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24C18.6274 24 24 18.6274 24 12ZM18 11H6V13H18V11Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.75 1C5.81294 1 1 5.81294 1 11.75C1 17.6871 5.81294 22.5 11.75 22.5C17.6871 22.5 22.5 17.6871 22.5 11.75C22.5 5.81294 17.6871 1 11.75 1ZM7 12.75H17V11.25H7V12.75Z" fill="#262626"/>
 </svg>

@navikt/icons/svg/Paragraph.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C9.79085 2 7.99999 3.79086 7.99999 6C7.99999 6.66187 8.16311 7.29714 8.45828 7.85918C6.00646 9.12956 5.6173 13.1739 8.76271 14.4845L12.7692 16.1538C13.5145 16.4644 14 17.1926 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 9.99999 19.1046 9.99999 18H7.99999C7.99999 20.2091 9.79085 22 12 22C14.2091 22 16 20.2091 16 18C16 17.3381 15.8369 16.7029 15.5417 16.1408C17.9935 14.8704 18.3827 10.8261 15.2373 9.51554L11.2308 7.84615C10.4855 7.53561 9.99999 6.8074 9.99999 6C9.99999 4.89543 10.8954 4 12 4C13.1046 4 14 4.89543 14 6H16C16 3.79086 14.2091 2 12 2ZM13.9738 14.5208C15.6075 14.4232 16.1245 12.0519 14.4681 11.3617L10.4615 9.69231C10.311 9.62957 10.1657 9.55832 10.0262 9.47924C8.39252 9.57681 7.87544 11.9481 9.53194 12.6383L13.5385 14.3077C13.689 14.3704 13.8343 14.4417 13.9738 14.5208Z" fill="#262626"/>
+</svg>

@navikt/icons/svg/Translate.svg

@@ -0,0 +1,13 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.5 19.5L15.5 10.5L19.5 19.5" stroke="#262626" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13 17H18" stroke="#262626" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<mask id="mask0_6814_1365" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="4" width="15" height="17">
+<path d="M9.90083 18.7893L13.9008 9.78926C14.1817 9.15728 14.8084 8.75 15.5 8.75C16.1193 8.75 16.6865 9.07657 17.0001 9.59861V4H2.00005V21H10.5983C9.85068 20.5519 9.53784 19.606 9.90083 18.7893Z" fill="black"/>
+</mask>
+<g mask="url(#mask0_6814_1365)">
+<path d="M4 7.5H16" stroke="#262626" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10 7.5V5.5" stroke="#262626" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.5 7.5L13.4116 7.78744C12.2005 11.7232 9.30115 14.9162 5.5 16.5" stroke="#262626" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.5 7.5L6.58844 7.78744C7.79946 11.7232 10.6989 14.9162 14.5 16.5" stroke="#262626" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

@navikt/internal/css/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @navikt/ds-css-internal
 
+## 2.0.17
+
+## 2.0.16
+
+## 2.0.15
+
+## 2.0.14
+
+## 2.0.13
+
 ## 2.0.12
 
 ## 2.0.11

@navikt/internal/css/package.json

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

@navikt/internal/react/CHANGELOG.md

@@ -1,5 +1,45 @@
 # @navikt/ds-react-internal
 
+## 2.0.17
+
+### Patch Changes
+
+- Updated dependencies [[`27e3dfee0`](https://github.com/navikt/Designsystemet/commit/27e3dfee07e135893e9f62cd32f80ed83a3510de)]:
+  - @navikt/ds-icons@2.0.17
+  - @navikt/ds-react@2.0.17
+
+## 2.0.16
+
+### Patch Changes
+
+- Updated dependencies [[`54f8b0795`](https://github.com/navikt/Designsystemet/commit/54f8b07956bbfb7de51f6682a5fc64903bfd1bdf)]:
+  - @navikt/ds-icons@2.0.16
+  - @navikt/ds-react@2.0.16
+
+## 2.0.15
+
+### Patch Changes
+
+- Updated dependencies [[`22dfd8e60`](https://github.com/navikt/Designsystemet/commit/22dfd8e60315c421749394d35e41f412a00a7593)]:
+  - @navikt/ds-react@2.0.15
+  - @navikt/ds-icons@2.0.15
+
+## 2.0.14
+
+### Patch Changes
+
+- Updated dependencies [[`8e5c55443`](https://github.com/navikt/Designsystemet/commit/8e5c554431c98b1b658c5054c0b3cf08b8a65e52)]:
+  - @navikt/ds-react@2.0.14
+  - @navikt/ds-icons@2.0.14
+
+## 2.0.13
+
+### Patch Changes
+
+- Updated dependencies [[`a6c339123`](https://github.com/navikt/Designsystemet/commit/a6c3391237f13394063e4c004ac9efb1875fc944)]:
+  - @navikt/ds-icons@2.0.13
+  - @navikt/ds-react@2.0.13
+
 ## 2.0.12
 
 ### Patch Changes

@navikt/internal/react/package.json

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

aksel.nav.no/package.json

@@ -15,14 +15,14 @@
     "website"
   ],
   "dependencies": {
-    "@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"
+    "@navikt/ds-codemod": "^2.0.17",
+    "@navikt/ds-css": "^2.0.17",
+    "@navikt/ds-css-internal": "^2.0.17",
+    "@navikt/ds-icons": "^2.0.17",
+    "@navikt/ds-react": "^2.0.17",
+    "@navikt/ds-react-internal": "^2.0.17",
+    "@navikt/ds-tailwind": "^2.0.17",
+    "@navikt/ds-tokens": "^2.0.17"
   },
   "devDependencies": {
     "prettier-plugin-tailwindcss": "^0.1.13"

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

@@ -54,15 +54,18 @@ const AkselArtikkelTemplate = ({
               : `Relevante artikler`}
           </Heading>
           <div className="card-grid-3-1 mt-6 px-4">
-            {data.relevante_artikler.map((x: any) => (
-              <ArtikkelCard {...x} key={x._id} />
-            ))}
+            {data.relevante_artikler.map((x: any) =>
+              x && x?._id ? <ArtikkelCard {...x} key={x._id} /> : null
+            )}
           </div>
         </div>
       </div>
     </aside>
   );
 
+  const filteredTema =
+    hasTema && data?.tema?.filter((x: any) => x?.title && x?.slug);
+
   return (
     <>
       <Head>
@@ -136,7 +139,7 @@ const AkselArtikkelTemplate = ({
           </div>
           {hasTema && (
             <div className="mt-8 flex flex-wrap gap-2">
-              {data.tema.map(({ title, slug }: any) => (
+              {filteredTema.map(({ title, slug }: any) => (
                 <span key={title}>
                   <NextLink
                     key={title}

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

@@ -11,7 +11,12 @@ interface AkselTemaT extends SanityT.Schema.aksel_tema {
 }
 
 const GodPraksisCard = ({ node }: { node: AkselTemaT }) => {
-  if (!node?.pictogram || !node?.slug?.current || !node?.title) {
+  if (
+    !node?.pictogram ||
+    !node?.slug?.current ||
+    !node?.title ||
+    !node?.refCount
+  ) {
     return null;
   }
 
@@ -43,7 +48,7 @@ const GodPraksisCard = ({ node }: { node: AkselTemaT }) => {
       </NextLink>
       <BodyShort className={cl("mb-2 lg:mb-6")}>{node.oppsummering}</BodyShort>
       <BodyShort size="small" className="text-text-subtle">
-        {node.refCount} ARTIKLER
+        {node.refCount === 1 ? "1 ARTIKKEL" : `${node.refCount} ARTIKLER`}
       </BodyShort>
     </li>
   );

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

@@ -174,9 +174,6 @@ export function TableOfContentsv2({
                         "text-text-subtle": link.id !== activeId || activeSubId,
                       }
                     )}
-                    aria-expanded={
-                      link?.lvl3?.length > 0 && link?.id === activeId
-                    }
                   >
                     {link.heading}
                   </Link>

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

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

aksel.nav.no/website/components/website-modules/utils/amplitude.tsx

@@ -63,7 +63,10 @@ export const usePageView = (router: Router, pageProps: any) => {
       const data = {};
       try {
         if (pageProps?.page && pageProps.page?._type === "aksel_artikkel") {
-          data["tema"] = pageProps.page.tema.map((x) => x?.slug?.current);
+          const tema = pageProps.page.tema.map((x) => x?.slug?.current) ?? null;
+          if (tema && tema.length > 0) {
+            data["tema"] = tema;
+          }
         }
       } catch (error) {
         isDevelopment && console.error(error);

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

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

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

@@ -167,7 +167,7 @@ export const akselTema = `*[_type == "godpraksis_landingsside"][0]{
       ${deRefs}
     }
   },
-  "temaer": *[_type == "aksel_tema"]{
+  "temaer": *[_type == "aksel_tema" && defined(seksjoner[].sider[])]{
     ...,
     "refCount": count(*[_type == "aksel_artikkel" && !(_id in path("drafts.**")) && references(^._id)])
   },
@@ -233,8 +233,6 @@ export const akselForsideQuery = `*[_type == "aksel_forside"][0]{
   }
 }`;
 
-export const akselDocumentsByType = `*[_type in $types]{ _type, _id, 'slug': slug.current }`;
-
 export const akselPrinsippBySlug = `{
   "prinsipp": *[slug.current == $slug] | order(_updatedAt desc)[0]
   {
@@ -282,8 +280,6 @@ export const akselEditorById = `*[_id == $id][0]
   ${contributorsAll}
 }`;
 
-export const dsDocuments = `*[_type in ["komponent_artikkel", "ds_artikkel"]]{ ..., 'slug': slug.current }`;
-
 const sidebarQuery = `"sidebar": *[_type == $type && defined(kategori)] {
   heading,
   "slug": slug.current,
@@ -345,8 +341,6 @@ export const grunnleggendeQuery = `{
   ${sidebarQuery}
 }`;
 
-export const akselTemaNames = `*[_type == "aksel_tema" && count(*[references(^._id)]) > 0].slug`;
-
 export const akselTemaDocs = `{
   "tema": *[_type == "aksel_tema" && slug.current == $slug] | order(_updatedAt desc)[0]{
     ...,

aksel.nav.no/website/lib/sanity/santiy.ts

@@ -1,6 +1,4 @@
 import imageUrlBuilder from "@sanity/image-url";
-import { SanityT } from "..";
-import { akselDocumentsByType, akselTemaNames, dsDocuments } from "./queries";
 import { getClient, noCdnClient, sanityClient } from "./sanity.server";
 
 const imageBuilder = imageUrlBuilder(sanityClient);
@@ -10,23 +8,40 @@ export function urlFor(source: any) {
 }
 
 export const getAllPages = async (token?: string) => {
-  const komponenter = await getDocumentsTmp("komponent_artikkel", token);
-  const grunnleggende = await getDocumentsTmp("ds_artikkel", token);
-
-  const artikler = await getAkselDocuments("all", token);
-  const temaer = await getAkselTema(token);
-
-  return [
-    "",
-    "god-praksis",
-    "produktbloggen",
-    ...komponenter,
-    ...grunnleggende,
-    ...artikler,
-    ...temaer.map((x) => `god-praksis/${x}`),
-  ];
+  const pages = await sitemapPages(token);
+  return pages.map((x) => x.path);
 };
 
+export async function sitemapPages(
+  token?: string
+): Promise<{ path: string; lastmod: string }[]> {
+  const client = token ? noCdnClient(token) : getClient();
+  const artikler = await getDocuments("all");
+  const temaer = await getAkselTema();
+
+  const pages = await client.fetch(
+    `{
+      "frontpage": *[_type == "aksel_forside"][0]._updatedAt,
+      "godpraksis": *[_type == "godpraksis_landingsside"][0]._updatedAt,
+      "grunnleggende": *[_type == "grunnleggende_landingsside"][0]._updatedAt,
+      "komponenter": *[_type == "komponenter_landingsside"][0]._updatedAt,
+      "blogg": *[_type == "blogg_landingsside"][0]._updatedAt,
+    }`
+  );
+  return [
+    { path: "", lastmod: pages.frontpage._updatedAt },
+    { path: "god-praksis", lastmod: pages.godpraksis._updatedAt },
+    { path: "grunnleggende", lastmod: pages.grunnleggende._updatedAt },
+    { path: "komponenter", lastmod: pages.komponenter._updatedAt },
+    { path: "produktbloggen", lastmod: pages.blogg._updatedAt },
+    ...temaer.map((x) => ({
+      path: `god-praksis/${x.path}`,
+      lastmod: x.lastmod,
+    })),
+    ...artikler.map((x) => ({ ...x, path: x.slug })),
+  ];
+}
+
 export const getAkselDocuments = async (
   source:
     | "aksel_artikkel"
@@ -38,38 +53,60 @@ export const getAkselDocuments = async (
   token?: string
 ): Promise<string[]> => {
   if (!source) return [];
-  const client = token ? noCdnClient(token) : getClient();
-  const documents: any[] | null = await client.fetch(akselDocumentsByType, {
-    types:
-      source === "all"
-        ? [
-            "aksel_artikkel",
-            "aksel_blogg",
-            "aksel_prinsipp",
-            "aksel_standalone",
-          ]
-        : [source],
-  });
-  const paths = [];
+  const docs = await getDocuments(source, token);
 
-  const nonDrafts = documents.filter((x) => !x._id.startsWith("drafts."));
-
-  nonDrafts?.forEach((page) => {
-    page.slug && paths.push(page.slug);
-  });
-
-  return paths;
+  return docs.map((x) => x.slug);
 };
 
 export const getDocumentsTmp = async (
   source: "komponent_artikkel" | "ds_artikkel",
   token?: string
 ): Promise<string[]> => {
+  const docs = await getDocuments(source, token);
+
+  return docs.map((x) => x.slug);
+};
+
+export async function getAkselTema(
+  token?: string
+): Promise<{ path: string; lastmod: string }[]> {
+  const client = token ? noCdnClient(token) : getClient();
+  const tags: { slug: { current: string }; _updatedAt: string }[] =
+    await client.fetch(
+      `*[_type == "aksel_tema" && count(*[references(^._id)]) > 0]{slug,_updatedAt}`
+    );
+  return tags.map((x) => ({
+    path: x?.slug.current,
+    lastmod: x?._updatedAt,
+  }));
+}
+
+async function getDocuments(
+  source:
+    | "komponent_artikkel"
+    | "ds_artikkel"
+    | "aksel_artikkel"
+    | "aksel_blogg"
+    | "aksel_prinsipp"
+    | "aksel_standalone"
+    | "all",
+  token?: string
+): Promise<{ slug: string; lastmod: string }[]> {
   const client = token ? noCdnClient(token) : getClient();
   const documents: any[] | null = await client.fetch(
-    `*[_type in $types]{ _type, _id, 'slug': slug.current }`,
+    `*[_type in $types]{ _type, _id, 'slug': slug.current, _updatedAt }`,
     {
-      types: [source],
+      types:
+        source === "all"
+          ? [
+              "komponent_artikkel",
+              "ds_artikkel",
+              "aksel_artikkel",
+              "aksel_blogg",
+              "aksel_prinsipp",
+              "aksel_standalone",
+            ]
+          : [source],
     }
   );
   const paths = [];
@@ -77,14 +114,8 @@ export const getDocumentsTmp = async (
   documents
     .filter((x) => !x._id.startsWith("drafts."))
     ?.forEach((page) => {
-      page.slug && paths.push(page.slug);
+      page.slug && paths.push({ slug: page.slug, lastmod: page._updatedAt });
     });
 
   return paths;
-};
-
-export const getAkselTema = async (token?: string): Promise<string[]> => {
-  const client = token ? noCdnClient(token) : getClient();
-  const tags: { current: string }[] = await client.fetch(akselTemaNames);
-  return tags.map((x) => x?.current);
-};
+}

aksel.nav.no/website/package.json

@@ -52,7 +52,6 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-modal": "3.15.1",
-    "react-snowfall": "1.2.1",
     "sanity": "3.0.6",
     "sanity-plugin-asset-source-unsplash": "^1.0.0",
     "sanity-plugin-iframe-pane": "^2.1.1",

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

@@ -1,6 +1,6 @@
 import { NextApiRequest, NextApiResponse } from "next";
 import { SitemapStream, streamToPromise } from "sitemap";
-import { getAllPages } from "@/lib";
+import { sitemapPages } from "@/lib";
 
 /* https://linguinecode.com/post/add-robots-txt-file-sitemaps-nextjs */
 export default async (req: NextApiRequest, res: NextApiResponse) => {
@@ -9,14 +9,14 @@ export default async (req: NextApiRequest, res: NextApiResponse) => {
       hostname: `https://${req.headers.host}`,
     });
 
-    const pages = await getAllPages();
+    const pages = await sitemapPages();
 
     // Create each URL row
     pages.forEach((post) => {
       smStream.write({
-        url: `/${post}`,
-        changefreq: "weekly",
-        priority: 0.5,
+        url: `/${post.path}`,
+        changefreq: "monthly",
+        lastmod: post.lastmod,
       });
     });
 

aksel.nav.no/website/pages/eksempler/chat/toptextPosition.tsx

@@ -0,0 +1,32 @@
+import { Chat } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <div className="grid gap-10">
+      <Chat avatar="EVA" name="EVA" timestamp="01.01.21 14:00">
+        <Chat.Bubble>Hei! Mitt navn er Eva.</Chat.Bubble>
+        <Chat.Bubble>Hva kan jeg hjelpe deg med?</Chat.Bubble>
+      </Chat>
+      <Chat
+        avatar="NO"
+        name="Ola Normann"
+        timestamp="01.01.21 14:00"
+        position="right"
+        toptextPosition="left"
+      >
+        <Chat.Bubble>Hei Eva.</Chat.Bubble>
+        <Chat.Bubble>
+          Hvor sjekker jeg statusen på foreldrepengersøknaden min?
+        </Chat.Bubble>
+      </Chat>
+    </div>
+  );
+};
+
+export default withDsExample(Example);
+
+export const args = {
+  index: 3,
+  desc: "Noen ganger ønsker man mer fleksibilitet for plassering av navn + tid i chatboblen.",
+};

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

@@ -43,6 +43,8 @@ const Page = ({ tema: page }: PageProps): JSX.Element => {
 
   const hasAnsvarlig = !!page?.ansvarlig?.title;
 
+  const hasPages = !!page.seksjoner.find((x) => !!x.sider);
+
   return (
     <>
       <Head>
@@ -143,35 +145,45 @@ const Page = ({ tema: page }: PageProps): JSX.Element => {
           </div>
 
           <div className="relative px-4 pt-8 pb-24 md:pt-16 xl:pt-8 ">
-            <div className="dynamic-wrapper grid gap-20">
-              {page.seksjoner.map((seksjon) => (
-                <div key={seksjon._key}>
-                  <Heading level="2" size="medium">
-                    {seksjon.title}
-                  </Heading>
-                  {seksjon.beskrivelse && (
-                    <div className="max-w-prose">
-                      <SanityBlockContent
-                        blocks={seksjon.beskrivelse}
-                        noLastMargin
-                      />
+            {hasPages ? (
+              <div className="dynamic-wrapper grid gap-20">
+                {page.seksjoner.map((seksjon) =>
+                  seksjon?.sider ? (
+                    <div key={seksjon._key}>
+                      <Heading level="2" size="medium">
+                        {seksjon.title}
+                      </Heading>
+                      {seksjon.beskrivelse && (
+                        <div className="max-w-prose">
+                          <SanityBlockContent
+                            blocks={seksjon.beskrivelse}
+                            noLastMargin
+                          />
+                        </div>
+                      )}
+                      <div className="card-grid-3-1 mt-6">
+                        {(seksjon?.sider as unknown as ArtiklerT[])?.map(
+                          (x: ArtiklerT) => (
+                            <ArtikkelCard
+                              {...x}
+                              source={page?.slug?.current}
+                              key={x._id}
+                              variant="god-praksis"
+                            />
+                          )
+                        )}
+                      </div>
                     </div>
-                  )}
-                  <div className="card-grid-3-1 mt-6">
-                    {(seksjon.sider as unknown as ArtiklerT[]).map(
-                      (x: ArtiklerT) => (
-                        <ArtikkelCard
-                          {...x}
-                          source={page?.slug?.current}
-                          key={x._id}
-                          variant="god-praksis"
-                        />
-                      )
-                    )}
-                  </div>
-                </div>
-              ))}
-            </div>
+                  ) : null
+                )}
+              </div>
+            ) : (
+              <div className="dynamic-wrapper mb-20">
+                <Heading level="2" size="medium">
+                  Fant ingen artikler her enda...
+                </Heading>
+              </div>
+            )}
           </div>
         </main>
         <Footer />
@@ -206,9 +218,9 @@ export default Wrapper;
 export const getStaticPaths = async () => {
   return {
     paths: await getAkselTema().then((paths) =>
-      paths.map((slug) => ({
+      paths.map(({ path }) => ({
         params: {
-          slug,
+          slug: path,
         },
       }))
     ),

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

@@ -20,7 +20,6 @@ import { ToolCard } from "components/website-modules/ToolsCard";
 import { PreviewSuspense } from "next-sanity/preview";
 import Head from "next/head";
 import Link from "next/link";
-import Snowfall from "react-snowfall";
 import { lazy, useEffect, useState } from "react";
 import cl from "classnames";
 
@@ -110,14 +109,6 @@ const GetStarted = ({
           </li>
         ))}
       </ul>
-      <div aria-hidden>
-        <Snowfall
-          color="rgba(230, 241, 248, 0.3)"
-          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"
@@ -352,11 +343,10 @@ export const getStaticProps = async ({
       komigang,
       slug: "/",
       preview,
+      id: page?._id ?? "",
     },
     revalidate: 60,
   };
 };
 
 export default Page;
-
-<div>lorem</div>;

aksel.nav.no/website/public/robots.txt

@@ -1,8 +1,6 @@
 User-agent: *
 Allow: /*
 
-Sitemap: https://aksel.nav.no/api/sitemap
-
 # Next.JS Crawl Budget Performance Updates
 # Block files ending in .json, _buildManifest.js, _middlewareManifest.js, _ssgManifest.js, and any other JS files
 # The asterisks allows any file name
@@ -18,4 +16,7 @@ Disallow: /*_ssgManifest.js$
 
 Disallow: /*.js$
 
-Disallow: /eksempler/
+Disallow: /eksempler
+Disallow: /admin
+
+Sitemap: https://aksel.nav.no/api/sitemap

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

@@ -34,6 +34,9 @@ export const grunnleggendeKategorier = [
   { title: "Styling", value: "styling" },
   { title: "Guider", value: "guider" },
   { title: "Stæsj", value: "staesj" },
+  { title: "Design", value: "design" },
+  { title: "Kode", value: "kode" },
+  { title: "Nedlastbart", value: "nedlastbart" },
 ];
 
 export const monsterKategorier = [];

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

@@ -15,7 +15,6 @@ export function FeedbackView(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(
@@ -68,17 +67,23 @@ export function FeedbackView(props) {
               <li key={x._id}>
                 <Card flex={1}>
                   <IntentButton
+                    key={x._id}
                     intent="edit"
-                    mode="bleed"
+                    mode="ghost"
                     padding={1}
-                    radius={2}
+                    radius={0}
                     params={{
                       type: "aksel_feedback",
                       id: getPublishedId(x._id),
                     }}
                     style={{ width: "100%" }}
                   >
-                    <Preview schemaType={schemaType} value={x} key={x._id} />
+                    <Preview
+                      schemaType={schemaType}
+                      value={x}
+                      key={x._id}
+                      layout="default"
+                    />
                   </IntentButton>
                 </Card>
               </li>
@@ -96,12 +101,12 @@ export function FeedbackView(props) {
                       <li key={x._id}>
                         <Card flex={1}>
                           <IntentButton
-                            intent=""
+                            intent="edit"
                             mode="bleed"
                             padding={1}
                             radius={2}
                             params={{
-                              type: schemaType,
+                              type: "aksel_feedback",
                               id: getPublishedId(x._id),
                             }}
                             style={{ width: "100%" }}

aksel.nav.no/website/sanity/form.tsx

@@ -1,20 +0,0 @@
-import { InputWithCounter } from "./schema/custom-components";
-
-export const form = {
-  form: {
-    components: {
-      field: (props) => {
-        const name = props.schemaType?.name;
-
-        if (name === "string" && props.schemaType?.options?.maxLength) {
-          return <InputWithCounter {...props.inputProps} />;
-        }
-
-        if (name === "text" && props.schemaType?.options?.maxLength) {
-          return <InputWithCounter {...props.inputProps} size="large" />;
-        }
-        return props.renderDefault(props);
-      },
-    },
-  },
-};

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

@@ -1,156 +0,0 @@
-import { codeInput } from "@sanity/code-input";
-import { colorInput } from "@sanity/color-input";
-import { table } from "@sanity/table";
-import { visionTool } from "@sanity/vision";
-import { createAuthStore, defineConfig } from "sanity";
-import { unsplashImageAsset } from "sanity-plugin-asset-source-unsplash";
-import { media } from "sanity-plugin-media";
-import { deskTool } from "sanity/desk";
-import {
-  defaultDocumentNode,
-  publicationFlow,
-  structure,
-} from "./custom-plugins";
-import { form } from "./form";
-import { getTemplates } from "./util";
-
-import { DatabaseIcon, RemoveCircleIcon } from "@sanity/icons";
-import { allArticleDocuments } from "./config";
-import { schema } from "./schema";
-
-const projectId = "hnbe3yhs";
-
-const sharedConfig = {
-  projectId,
-  apiVersion: "2021-10-21",
-  schema: schema,
-  ...form,
-  document: {
-    newDocumentOptions: (prev, { currentUser }) => {
-      const adminOrDev = currentUser.roles.find((x) =>
-        ["developer", "administrator", "editor"].includes(x.name)
-      );
-      if (adminOrDev) {
-        return [...getTemplates(currentUser.roles), ...prev];
-      }
-      return getTemplates(currentUser.roles);
-    },
-  },
-  plugins: [
-    deskTool({
-      title: "Desk",
-      structure,
-      defaultDocumentNode,
-    }),
-    table(),
-    codeInput(),
-    media({
-      projectId,
-      dataset: "production",
-    }),
-    visionTool(),
-    unsplashImageAsset(),
-    publicationFlow({
-      hasQualityControl: [
-        "komponent_artikkel",
-        "ds_artikkel",
-        "aksel_artikkel",
-      ],
-      hasPublishedAt: allArticleDocuments,
-    }),
-    colorInput(),
-  ],
-};
-
-export const workspaceConfig = defineConfig([
-  {
-    name: "default",
-    title: "Prod",
-    icon: DatabaseIcon,
-    dataset: "production",
-    basePath: "/admin/prod",
-    ...sharedConfig,
-    auth: createAuthStore({
-      redirectOnSingle: false,
-      mode: "replace",
-      projectId,
-      dataset: "production",
-      providers: [
-        {
-          name: "saml",
-          title: "NAV SSO",
-          url: "https://api.sanity.io/v2021-10-01/auth/saml/login/f3270b37",
-          logo: "/images/navlogo.svg",
-        },
-        {
-          name: "github",
-          title: "GitHub",
-          url: "https://api.sanity.io/v1/auth/login/github",
-        },
-        {
-          name: "google",
-          title: "Google",
-          url: "https://api.sanity.io/v1/auth/login/google",
-        },
-      ],
-    }),
-  },
-  {
-    name: "dev",
-    title: "Dev (testing only)",
-    icon: RemoveCircleIcon,
-    dataset: "development",
-    basePath: "/admin/dev",
-    ...sharedConfig,
-    auth: createAuthStore({
-      redirectOnSingle: false,
-      mode: "replace",
-      projectId,
-      dataset: "development",
-      providers: [
-        {
-          name: "saml",
-          title: "NAV SSO",
-          url: "https://api.sanity.io/v2021-10-01/auth/saml/login/f3270b37",
-          logo: "/images/navlogo.svg",
-        },
-        {
-          name: "github",
-          title: "GitHub",
-          url: "https://api.sanity.io/v1/auth/login/github",
-        },
-        {
-          name: "google",
-          title: "Google",
-          url: "https://api.sanity.io/v1/auth/login/google",
-        },
-      ],
-    }),
-  },
-]);
-
-/* interface WorkspaceOptions {
-  name: string
-  title: string
-  projectId: string
-  dataset: string
-  plugins?: PluginOptions[]
-  schema?: SchemaPluginOptions
-  document?: DocumentPluginOptions
-  tools?: Tool[] | ComposableOption<Tool[], ConfigContext>
-  form?: SanityFormConfig
-  basePath?: string
-  subtitle?: string
-  logo?: React.ComponentType
-  icon?: React.ComponentType
-  navbar?: {
-    components?: {
-      ToolMenu: React.ComponentType<ToolMenuProps>
-    }
-  }
-  theme?: StudioTheme
-}
-
-
-
- */

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

@@ -0,0 +1,125 @@
+import { InputWithCounter } from "./schema/custom-components";
+import { codeInput } from "@sanity/code-input";
+import { colorInput } from "@sanity/color-input";
+import { table } from "@sanity/table";
+import { visionTool } from "@sanity/vision";
+import { createAuthStore, defineConfig } from "sanity";
+import { unsplashImageAsset } from "sanity-plugin-asset-source-unsplash";
+import { media } from "sanity-plugin-media";
+import { deskTool } from "sanity/desk";
+import {
+  defaultDocumentNode,
+  publicationFlow,
+  structure,
+} from "./custom-plugins";
+
+import { getTemplates } from "./util";
+
+import { DatabaseIcon, RemoveCircleIcon } from "@sanity/icons";
+import { allArticleDocuments } from "./config";
+import { schema } from "./schema";
+
+const projectId = "hnbe3yhs";
+
+export const workspaceConfig = defineConfig([
+  {
+    ...defaultConfig(),
+    title: "Aksel",
+    name: "default",
+    dataset: "production",
+    basePath: "/admin/prod",
+    icon: DatabaseIcon,
+    auth: authStore(),
+  },
+  {
+    ...defaultConfig(),
+    title: "Aksel Dev-miljø",
+    name: "dev",
+    dataset: "development",
+    basePath: "/admin/dev",
+    icon: RemoveCircleIcon,
+    auth: authStore(),
+  },
+]);
+
+function defaultConfig() {
+  return {
+    projectId,
+    apiVersion: "2021-10-21",
+    schema,
+    form: {
+      components: {
+        field: (props) => {
+          const name = props.schemaType?.name;
+
+          if (name === "string" && props.schemaType?.options?.maxLength) {
+            return <InputWithCounter {...props.inputProps} />;
+          }
+
+          if (name === "text" && props.schemaType?.options?.maxLength) {
+            return <InputWithCounter {...props.inputProps} size="large" />;
+          }
+          return props.renderDefault(props);
+        },
+      },
+    },
+    document: {
+      newDocumentOptions: (prev, { currentUser }) =>
+        currentUser.roles.find((x) =>
+          ["developer", "administrator", "editor"].includes(x.name)
+        )
+          ? [...getTemplates(currentUser.roles), ...prev]
+          : getTemplates(currentUser.roles),
+    },
+    plugins: [
+      deskTool({
+        title: "Editor",
+        structure,
+        defaultDocumentNode,
+      }),
+      publicationFlow({
+        hasQualityControl: [
+          "komponent_artikkel",
+          "ds_artikkel",
+          "aksel_artikkel",
+        ],
+        hasPublishedAt: allArticleDocuments,
+      }),
+
+      /* 3rd-party */
+      table(),
+      codeInput(),
+      media(),
+      visionTool(),
+      unsplashImageAsset(),
+      colorInput(),
+    ],
+  };
+}
+
+function authStore() {
+  return createAuthStore({
+    redirectOnSingle: false,
+    mode: "replace",
+    projectId,
+    dataset: "production",
+    providers: [
+      {
+        name: "saml",
+        title: "NAV SSO",
+        url: "https://api.sanity.io/v2021-10-01/auth/saml/login/f3270b37",
+        logo: "/images/navlogo.svg",
+      },
+      {
+        name: "github",
+        title: "GitHub",
+        url: "https://api.sanity.io/v1/auth/login/github",
+      },
+      {
+        name: "google",
+        title: "Google",
+        url: "https://api.sanity.io/v1/auth/login/google",
+      },
+    ],
+  });
+}

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

@@ -218,6 +218,8 @@ export const EditorPage = () => {
     (query) => client.fetch(query)
   );
 
+  console.log(data);
+
   const {
     data: fbData,
     error: fbError,
@@ -264,7 +266,7 @@ export const EditorPage = () => {
       {!fbError && !fbValidating && (
         <div className="mt-7">
           <Heading level="2" size="small" spacing>
-            Tilbakemeldinger på artikler du er forfatter i (
+            Tilbakemeldinger på artikler du er satt som forfatter (
             {fbData?.length ?? 0})
           </Heading>
           {fbData?.length > 0 && (
@@ -277,11 +279,8 @@ export const EditorPage = () => {
       )}
       <div className="mt-7">
         <Heading level="2" size="small" spacing>
-          Innhold du jobber med
+          Under arbeid / må re-valideres
         </Heading>
-        <BodyShort spacing>
-          Dette er alle artikler du jobber med eller må godkjenne asap.
-        </BodyShort>
         <Accordion>
           <DraftList data={data} />
           <OutDatedList data={data} />

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

@@ -1,7 +1,13 @@
-import { Stack, Heading, Card, Text } from "@sanity/ui";
+import { Card, Heading, Stack } from "@sanity/ui";
 import { useEffect, useState } from "react";
-import { IntentButton, Preview } from "sanity";
-import { getPublishedId, useClient, useSchema, useFormValue } from "sanity";
+import {
+  getPublishedId,
+  IntentButton,
+  Preview,
+  useClient,
+  useFormValue,
+  useSchema,
+} from "sanity";
 
 export function TemaView(props) {
   const client = useClient({ apiVersion: "2021-06-07" });
@@ -13,14 +19,14 @@ export function TemaView(props) {
   const type = schema.get("aksel_artikkel");
 
   useEffect(() => {
-    const query = `*[_type == "aksel_tema" && defined(seksjoner) && !(_id in path("drafts.**"))]{_id,title,seksjoner, "artikler":*[_type == "aksel_artikkel" && !(_id in path("drafts.**")) && ^._id in tema[]._ref]{_id}}`;
+    const query = `*[_type == "aksel_tema" && !(_id in path("drafts.**"))]{_id,title,seksjoner, "artikler":*[_type == "aksel_artikkel" && !(_id in path("drafts.**")) && ^._id in tema[]._ref]{_id}}`;
     client.fetch(query).then(setTema);
   }, [client]);
 
   const sider = tema
     .find((x) => x.title === title)
     ?.["seksjoner"]?.reduce(
-      (b, n) => [...b, ...(n?.sider.map((x) => x._ref) ?? [])],
+      (b, n) => [...b, ...(n?.sider?.map((x) => x._ref) ?? [])],
       []
     );
   const artikler = tema.find((x) => x.title === title)?.["artikler"];
@@ -36,12 +42,6 @@ export function TemaView(props) {
       <Heading size={1}>
         {`Artikler ikke i seksjoner (${notFound.length})`}
       </Heading>
-      {notFound.length ? (
-        <Text>
-          Disse artiklene vil man ikke kunne finne i navigasjonen før dette er
-          fikset.
-        </Text>
-      ) : null}
       {notFound.map((x) => (
         <Card flex={1}>
           <IntentButton

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

@@ -16,15 +16,12 @@ const navn = [
   "Blissbukk",
   "Borneoorangutang",
   "Damfrosk",
-  "Dvergsilkeape",
   "Dåhjort",
-  "Edderkoppape",
   "Elandantilope",
   "Elg",
   "Esel",
   "Oter",
   "Fjellrev",
-  "Flodsvin",
   "Fugler",
   "Gaupe",
   "Gepard",
@@ -46,7 +43,6 @@ const navn = [
   "Ringhalelemur",
   "Rødpanda",
   "Sau",
-  "Sjimpanse",
   "Sjiraff",
   "Stråleskilpadde",
   "Slanger",
@@ -57,7 +53,6 @@ const navn = [
   "Surikat",
   "Tiger",
   "Ulv",
-  "Fjordfe",
   "Ekorn",
   "Bever",
   "Lemen",
@@ -67,7 +62,6 @@ const navn = [
   "Småskogmus",
   "Steinkobbe",
   "Røyskatt",
-  "Moskusfe",
 ];
 
 const adjektiv = [

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

@@ -81,13 +81,20 @@ export const Feedback = defineType({
       url: "url",
       feedback_type: "feedback_type",
       artikkel_feedback: "artikkel_feedback",
+      title: "doc_ref.heading",
     },
     prepare(selection) {
-      const { melding, url, behandlet, feedback_type, artikkel_feedback } =
-        selection;
+      const {
+        melding,
+        url,
+        behandlet,
+        feedback_type,
+        artikkel_feedback,
+        title,
+      } = selection;
 
       return {
-        title: melding ? melding : url ? url : "",
+        title: melding ? melding : title ? title : url ? url : "",
         subtitle: `${behandlet ? "Ferdig behandlet" : "Ubehandlet"} | ${
           feedback_type === "footer" ? "footer" : artikkel_feedback
         }`,

examples/shadow-dom/package.json

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