🐛 Sourcemap fungerte ikke i Aksel-icons

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

.github/ISSUE_TEMPLATE/new-component.yml

@@ -3,7 +3,7 @@ description: Send et ønske om en eller flere nye komponenter
 title: "[Ny komponent]: "
 labels: ["nytt ✨", "forespørsel 🥰", "komponenter 🧩"]
 assignees:
-  - olejorgenbakken
+  - KenAJoh
 body:
   - type: markdown
     attributes:

.github/ISSUE_TEMPLATE/new-icon.yaml

@@ -3,7 +3,7 @@ description: Send et ønske om et eller flere nye ikoner
 title: "[Nytt ikon]: "
 labels: ["nytt ✨", "ikoner 🖼", "forespørsel 🥰"]
 assignees:
-  - olejorgenbakken
+  - KenAJoh
 body:
   - type: markdown
     attributes:

.github/ISSUE_TEMPLATE/update-component.yml

@@ -3,7 +3,7 @@ description: Send inn innspill til komponent
 title: "[Innspill til komponent]: "
 labels: ["forespørsel 🥰", "komponenter 🧩", "nytt ✨", "beta 🧪"]
 assignees:
-  - olejorgenbakken
+  - KenAJoh
 body:
   - type: markdown
     attributes:

.github/ISSUE_TEMPLATE/update-icon.yml

@@ -3,7 +3,7 @@ description: Send inn innspill til ikon
 title: "[Tilbakemelding på ikon]: "
 labels: ["forespørsel 🥰", "ikoner 🖼️"]
 assignees:
-  - olejorgenbakken
+  - KenAJoh
 body:
   - type: markdown
     attributes:

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @navikt/aksel-icons
 
+## 2.8.4
+
+### Patch Changes
+
+- Fikset Sourcemap-bug i Aksel-icons
+
+## 2.8.3
+
+## 2.8.2
+
+## 2.8.1
+
+## 2.8.0
+
 ## 2.7.8
 
 ## 2.7.7

@navikt/aksel-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-icons",
-  "version": "2.7.8",
+  "version": "2.8.4",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/ikoner",
   "repository": {
@@ -53,9 +53,9 @@
     "create-icons": "svgr --silent --index-template config/index-template.js --out-dir src icons",
     "copy-util": "copyfiles util/* src",
     "copy-svg": "copyfiles -f icons/*.svg dist/svg/",
+    "copy": "yarn copy-util && yarn copy-svg",
     "update-metadata": "node config/metadata.js",
-    "build": "yarn copy-util && yarn copy-svg && yarn create-icons && concurrently \"tsc\" \"tsc -p tsconfig.esm.json\" && node config/cleanTypes.js && yarn update-metadata",
-    "build:old": "copyfiles util/* src && yarn create-icons && concurrently \"tsc\" \"tsc -p tsconfig.esm.json\" && node cleanTypes.js && yarn create-package-json-pointers-to-esm",
+    "build": "yarn copy && yarn create-icons && concurrently \"tsc\" \"tsc -p tsconfig.esm.json\" && node config/cleanTypes.js && yarn update-metadata",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest",
     "fetch-new:icons": "node config/figma/index.mjs",
     "zip:icons": "node config/zip.js"

@navikt/aksel-icons/tsconfig.esm.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "outDir": "./dist/react/esm",
     "module": "esnext",
-    "sourceMap": true,
+    "sourceMap": false,
     "declaration": true
   }
 }

@navikt/codemod/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @navikt/ds-codemod
 
+## 2.8.4
+
+## 2.8.3
+
+## 2.8.2
+
+## 2.8.1
+
+## 2.8.0
+
 ## 2.7.8
 
 ## 2.7.7

@navikt/codemod/package.json

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

@navikt/community/navno/package.json

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

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @navikt/ds-css
 
+## 2.8.4
+
+## 2.8.3
+
+## 2.8.2
+
+### Patch Changes
+
+- [#1870](https://github.com/navikt/aksel/pull/1870) [`9c495cf50`](https://github.com/navikt/aksel/commit/9c495cf5037a7453e51e273ab93e4232576f4958) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Oppdatert typografi for ExpansioCard
+
+## 2.8.1
+
+## 2.8.0
+
+### Minor Changes
+
+- [#1820](https://github.com/navikt/aksel/pull/1820) [`c6d51a019`](https://github.com/navikt/aksel/commit/c6d51a01902e4fd7916a422e17ed175f39acd458) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: Ny komponent! ExpansionCard. Oppfølger fra gammel Ekspanderbartpanel.
+
 ## 2.7.8
 
 ### Patch Changes

@navikt/core/css/expansioncard.css

@@ -0,0 +1,194 @@
+.navds-expansioncard {
+  --__ac-expansioncard-border-color: var(--ac-expansioncard-border-color, var(--a-border-default));
+  --__ac-expansioncard-border-radius: var(--ac-expansioncard-border-radius, var(--a-border-radius-large));
+  --__ac-expansioncard-border-width: 1px;
+
+  border-radius: var(--__ac-expansioncard-border-radius);
+  background-color: var(--ac-expansioncard-bg, var(--a-surface-default));
+  height: fit-content;
+}
+
+.navds-expansioncard--open {
+  --__ac-expansioncard-border-color: var(
+    --ac-expansioncard-border-open-color,
+    var(--ac-expansioncard-border-color, var(--a-border-default))
+  );
+}
+
+.navds-expansioncard:hover {
+  --__ac-expansioncard-border-color: var(--ac-expansioncard-border-hover-color, var(--a-border-strong));
+}
+
+:where(.navds-expansioncard.navds-expansioncard--open):hover {
+  --__ac-expansioncard-border-color: var(--ac-expansioncard-border-hover-color, var(--a-border-strong));
+}
+
+/*************************
+ * Header *
+ *************************/
+.navds-expansioncard__header {
+  width: 100%;
+  display: flex;
+  gap: var(--a-spacing-4);
+  padding: var(--a-spacing-4) var(--a-spacing-6);
+  border-radius: var(--__ac-expansioncard-border-radius);
+  background-color: var(--ac-expansioncard-header-bg, var(--a-surface-transparent));
+  position: relative;
+  border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
+  justify-content: space-between;
+}
+
+.navds-expansioncard--small > :where(.navds-expansioncard__header) {
+  padding: var(--a-spacing-3) var(--a-spacing-4);
+}
+
+.navds-expansioncard__header:hover {
+  background-color: var(--ac-expansioncard-header-bg-hover, var(--a-surface-hover));
+  box-shadow: 0 0 0 1px var(--__ac-expansioncard-border-color);
+}
+
+.navds-expansioncard--open > :where(.navds-expansioncard__header) {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
+  border-bottom: none;
+  background-color: var(--ac-expansioncard-header-open-bg, var(--a-surface-transparent));
+}
+
+.navds-expansioncard--open > :where(.navds-expansioncard__header):hover {
+  background-color: var(--ac-expansioncard-header-bg-hover, var(--a-surface-hover));
+  box-shadow: 1px 0 0 0 var(--__ac-expansioncard-border-color), -1px 0 0 0 var(--__ac-expansioncard-border-color),
+    0 -1px 0 0 var(--__ac-expansioncard-border-color);
+}
+
+/*************************
+ * Header/Typography *
+ *************************/
+
+.navds-expansioncard__title--small {
+  margin-top: 10px;
+}
+
+.navds-expansioncard__title--medium {
+  margin-top: var(--a-spacing-2);
+}
+
+.navds-expansioncard__title--large {
+  margin-top: var(--a-spacing-1);
+}
+
+.navds-expansioncard--small :where(.navds-expansioncard__title--small) {
+  margin-top: var(--a-spacing-05);
+}
+
+.navds-expansioncard--small :where(.navds-expansioncard__title--medium, .navds-expansioncard__title--large) {
+  margin-top: 0;
+}
+
+/*************************
+ * Header/Button *
+ *************************/
+.navds-expansioncard__header-button {
+  display: grid;
+  place-content: center;
+  cursor: pointer;
+  margin: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--ac-expansioncard-button-border-radius, var(--a-border-radius-medium));
+  min-height: 3rem;
+  min-width: 3rem;
+  font-size: 1.5rem;
+  align-self: flex-start;
+}
+
+.navds-expansioncard--small > :where(.navds-expansioncard__header) > :where(.navds-expansioncard__header-button) {
+  min-height: 2rem;
+  min-width: 2rem;
+}
+
+:where(.navds-expansioncard__header):hover > :where(.navds-expansioncard__header-button) {
+  background-color: var(--a-surface-hover);
+}
+
+.navds-expansioncard__header-chevron {
+  transition: transform 150ms ease-in-out;
+}
+
+.navds-expansioncard--open :where(.navds-expansioncard__header-chevron) {
+  transform: translateY(0) rotate(180deg);
+}
+
+.navds-expansioncard__header-button:hover > :where(.navds-expansioncard__header-chevron) {
+  transform: translateY(1px);
+}
+
+.navds-expansioncard__header-button:focus {
+  outline: none;
+}
+
+.navds-expansioncard__header-button:focus-visible {
+  box-shadow: var(--a-shadow-focus);
+}
+
+.navds-expansioncard--open :where(.navds-expansioncard__header-button):hover :where(.navds-expansioncard__header-chevron) {
+  transform: translateY(-1px) rotate(180deg);
+}
+
+.navds-expansioncard__header-button::after {
+  inset: 0;
+  z-index: 1;
+  position: absolute;
+  content: "";
+  height: 100%;
+  width: 100%;
+  cursor: pointer;
+}
+
+/*************************
+ * Content *
+ *************************/
+.navds-expansioncard__content {
+  border-end-end-radius: var(--__ac-expansioncard-border-radius);
+  border-end-start-radius: var(--__ac-expansioncard-border-radius);
+  padding: var(--a-spacing-3) var(--a-spacing-6) var(--a-spacing-6);
+  border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
+  border-top: none;
+}
+
+.navds-expansioncard--small > :where(.navds-expansioncard__content) {
+  padding: var(--a-spacing-3) var(--a-spacing-4) var(--a-spacing-4);
+}
+
+.navds-expansioncard__content--closed {
+  display: none;
+}
+
+:where(.navds-expansioncard__header):hover + .navds-expansioncard__content {
+  box-shadow: 1px 0 0 0 var(--__ac-expansioncard-border-color), -1px 0 0 0 var(--__ac-expansioncard-border-color),
+    0 1px 0 0 var(--__ac-expansioncard-border-color);
+}
+
+.navds-expansioncard__content-inner {
+  animation: fadeExpansionCard 250ms ease;
+}
+
+.navds-expansioncard--no-fade :where(.navds-expansioncard__content-inner) {
+  animation: none;
+}
+
+@keyframes fadeExpansionCard {
+  0% {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+
+  40% {
+    opacity: 0.7;
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

@navikt/core/css/index.css

@@ -8,6 +8,7 @@
 @import "content-container.css";
 @import "chat.css";
 @import "chips.css";
+@import "expansioncard.css";
 @import "guide-panel.css";
 @import "form/index.css";
 @import "help-text.css";

@navikt/core/css/package.json

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

@navikt/core/css/tokens.json

@@ -106,6 +106,17 @@
     "--ac-date-input-error-border": "--a-border-danger",
     "--ac-date-input-button-text": "--a-text-default"
   },
+  "expansioncard": {
+    "--ac-expansioncard-bg": "--a-surface-default",
+    "--ac-expansioncard-header-bg": "--a-surface-transparent",
+    "--ac-expansioncard-header-bg-hover": "--a-surface-hover",
+    "--ac-expansioncard-header-open-bg": "--a-surface-transparent",
+    "--ac-expansioncard-border-color": "--a-border-default",
+    "--ac-expansioncard-border-open-color": "--a-border-default",
+    "--ac-expansioncard-border-radius": "--a-border-radius-large",
+    "--ac-expansioncard-button-border-radius": "--a-border-radius-medium",
+    "--ac-expansioncard-border-hover-color": "--a-border-strong"
+  },
   "guidepanel": {
     "--ac-guide-panel-bg": "--a-surface-default",
     "--ac-guide-panel-border": "--a-border-action",

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,55 @@
 # @navikt/ds-react
 
+## 2.8.4
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@2.8.4
+  - @navikt/ds-icons@2.8.4
+
+## 2.8.3
+
+### Patch Changes
+
+- [#1875](https://github.com/navikt/aksel/pull/1875) [`f862aa9c2`](https://github.com/navikt/aksel/commit/f862aa9c2ec71ffdb295708dc6dad6b77af9519e) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Textarea har oppdatert counter-tekst + mulighet for lokalisering
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@2.8.3
+  - @navikt/ds-icons@2.8.3
+
+## 2.8.2
+
+### Patch Changes
+
+- [#1870](https://github.com/navikt/aksel/pull/1870) [`9c495cf50`](https://github.com/navikt/aksel/commit/9c495cf5037a7453e51e273ab93e4232576f4958) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Oppdatert typografi for ExpansioCard
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@2.8.2
+  - @navikt/ds-icons@2.8.2
+
+## 2.8.1
+
+### Patch Changes
+
+- [`1276b4d7e`](https://github.com/navikt/aksel/commit/1276b4d7efd831d20345292dbb21a11d100a0ddd) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Endret default title-size til medium for ExpansionCard
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@2.8.1
+  - @navikt/ds-icons@2.8.1
+
+## 2.8.0
+
+### Minor Changes
+
+- [#1820](https://github.com/navikt/aksel/pull/1820) [`c6d51a019`](https://github.com/navikt/aksel/commit/c6d51a01902e4fd7916a422e17ed175f39acd458) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: Ny komponent! ExpansionCard. Oppfølger fra gammel Ekspanderbartpanel.
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@2.8.0
+  - @navikt/ds-icons@2.8.0
+
 ## 2.7.8
 
 ### Patch Changes

@navikt/core/react/package.json

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

@navikt/core/react/src/expansion-card/ExpansionCard.tsx

@@ -0,0 +1,121 @@
+import cl from "clsx";
+import React, { createContext, forwardRef, useRef, useState } from "react";
+import ExpansionCardContent, {
+  ExpansionCardContentType,
+} from "./ExpansionCardContent";
+import {
+  ExpansionCardDescription,
+  ExpansionCardDescriptionType,
+} from "./ExpansionCardDescription";
+import ExpansionCardHeader, {
+  ExpansionCardHeaderType,
+} from "./ExpansionCardHeader";
+import {
+  ExpansionCardTitle,
+  ExpansionCardTitleType,
+} from "./ExpansionCardTitle";
+
+interface ExpansionCardComponent
+  extends React.ForwardRefExoticComponent<
+    ExpansionCardProps & React.RefAttributes<HTMLDivElement>
+  > {
+  Header: ExpansionCardHeaderType;
+  Title: ExpansionCardTitleType;
+  Description: ExpansionCardDescriptionType;
+  Content: ExpansionCardContentType;
+}
+
+export interface ExpansionCardProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  /**
+   * Callback for when Card is toggled open/closed
+   */
+  onToggle?: (open: boolean) => void;
+  /**
+   * Controlled open-state
+   * Using this removes automatic control of open-state
+   */
+  open?: boolean;
+  /**
+   * Defaults to open if not controlled
+   * @default false
+   */
+  defaultOpen?: boolean;
+  /**
+   * @default "medium"
+   */
+  size?: "medium" | "small";
+  /**
+   * Since ExpansionCard is a section-element, accessible name is required.
+   */
+  ["aria-label"]: string;
+}
+
+export type ExpansionCardContextProps = {
+  open: boolean;
+  toggleOpen: () => void;
+  size: "medium" | "small";
+};
+
+export const ExpansionCardContext = createContext<ExpansionCardContextProps>({
+  open: false,
+  toggleOpen: () => {},
+  size: "medium",
+});
+
+export const ExpansionCard = forwardRef<HTMLDivElement, ExpansionCardProps>(
+  (
+    {
+      className,
+      onToggle,
+      open,
+      defaultOpen = false,
+      size = "medium",
+      ...rest
+    },
+    ref
+  ) => {
+    const [_open, _setOpen] = useState(defaultOpen);
+
+    const shouldFade = useRef<boolean>(!(Boolean(open) || defaultOpen));
+
+    const handleOpen = () => {
+      if (open === undefined) {
+        const newOpen = !_open;
+        _setOpen(newOpen);
+        onToggle?.(newOpen);
+      } else {
+        onToggle?.(!open);
+      }
+      shouldFade.current = true;
+    };
+
+    return (
+      <ExpansionCardContext.Provider
+        value={{ open: open ?? _open, toggleOpen: handleOpen, size }}
+      >
+        <section
+          {...rest}
+          className={cl(
+            "navds-expansioncard",
+            className,
+            `navds-expansioncard--${size}`,
+            {
+              "navds-expansioncard--open": open ?? _open,
+              "navds-expansioncard--no-fade": !shouldFade.current,
+            }
+          )}
+          ref={ref}
+        />
+      </ExpansionCardContext.Provider>
+    );
+  }
+) as ExpansionCardComponent;
+
+ExpansionCard.Header = ExpansionCardHeader;
+ExpansionCard.Content = ExpansionCardContent;
+ExpansionCard.Title = ExpansionCardTitle;
+ExpansionCard.Description = ExpansionCardDescription;
+
+export default ExpansionCard;

@navikt/core/react/src/expansion-card/ExpansionCardContent.tsx

@@ -0,0 +1,43 @@
+import cl from "clsx";
+import React, { forwardRef, useContext } from "react";
+import { BodyLong } from "../typography/BodyLong";
+import { ExpansionCardContext } from "./ExpansionCard";
+
+export interface ExpansionCardContentProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export type ExpansionCardContentType = React.ForwardRefExoticComponent<
+  ExpansionCardContentProps & React.RefAttributes<HTMLDivElement>
+>;
+
+const ExpansionCardContent: ExpansionCardContentType = forwardRef(
+  ({ children, className, ...rest }, ref) => {
+    const panelContext = useContext(ExpansionCardContext);
+
+    if (panelContext === null) {
+      console.error(
+        "<ExpansionCard.Content> has to be used within an <ExpansionCard>"
+      );
+      return null;
+    }
+
+    return (
+      <BodyLong
+        {...rest}
+        ref={ref}
+        as="div"
+        className={cl("navds-expansioncard__content", {
+          "navds-expansioncard__content--closed": !panelContext.open,
+        })}
+        aria-hidden={!panelContext.open}
+        size={panelContext.size}
+      >
+        <div className="navds-expansioncard__content-inner">{children}</div>
+      </BodyLong>
+    );
+  }
+);
+
+export default ExpansionCardContent;

@navikt/core/react/src/expansion-card/ExpansionCardDescription.tsx

@@ -0,0 +1,35 @@
+import React, { forwardRef, useContext } from "react";
+import cl from "clsx";
+import { BodyLong } from "../typography/BodyLong";
+import { ExpansionCardContext } from "./ExpansionCard";
+
+interface ExpansionCardDescriptionProps
+  extends React.HTMLAttributes<HTMLParagraphElement> {
+  children: React.ReactNode;
+}
+
+export type ExpansionCardDescriptionType = React.ForwardRefExoticComponent<
+  ExpansionCardDescriptionProps & React.RefAttributes<HTMLParagraphElement>
+>;
+
+export const ExpansionCardDescription: ExpansionCardDescriptionType =
+  forwardRef(({ className, ...rest }, ref) => {
+    const panelContext = useContext(ExpansionCardContext);
+
+    if (panelContext === null) {
+      console.error(
+        "<ExpansionCard.Header> has to be used within an <ExpansionCard>"
+      );
+      return null;
+    }
+
+    return (
+      <BodyLong
+        {...rest}
+        as="p"
+        ref={ref}
+        className={cl("navds-link-panel__description", className)}
+        size={panelContext.size}
+      />
+    );
+  });

@navikt/core/react/src/expansion-card/ExpansionCardHeader.tsx

@@ -0,0 +1,50 @@
+import cl from "clsx";
+import React, { forwardRef, useContext } from "react";
+import { ExpansionCardContext } from "./ExpansionCard";
+import { ChevronDownIcon } from "@navikt/aksel-icons";
+
+export interface ExpansionCardHeaderProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export type ExpansionCardHeaderType = React.ForwardRefExoticComponent<
+  ExpansionCardHeaderProps & React.RefAttributes<HTMLDivElement>
+>;
+
+const ExpansionCardHeader: ExpansionCardHeaderType = forwardRef(
+  ({ children, className, ...rest }, ref) => {
+    const panelContext = useContext(ExpansionCardContext);
+
+    if (panelContext === null) {
+      console.error(
+        "<ExpansionCard.Header> has to be used within an <ExpansionCard>"
+      );
+      return null;
+    }
+
+    return (
+      <div
+        ref={ref}
+        {...rest}
+        className={cl("navds-expansioncard__header", className)}
+      >
+        <div className="navds-expansioncard__header-content">{children}</div>
+
+        <button
+          className="navds-expansioncard__header-button"
+          onClick={() => panelContext.toggleOpen()}
+          type="button"
+          aria-expanded={panelContext.open}
+        >
+          <ChevronDownIcon
+            className="navds-expansioncard__header-chevron"
+            title="Vis mer"
+          />
+        </button>
+      </div>
+    );
+  }
+);
+
+export default ExpansionCardHeader;

@navikt/core/react/src/expansion-card/ExpansionCardTitle.tsx

@@ -0,0 +1,34 @@
+import React, { forwardRef } from "react";
+import cl from "clsx";
+import { OverridableComponent } from "../util/OverridableComponent";
+
+interface ExpansionCardTitleProps
+  extends React.HTMLAttributes<HTMLHeadingElement> {
+  children: React.ReactNode;
+  /**
+   * Changes text-sizing
+   * @default medium
+   */
+  size?: "large" | "medium" | "small";
+}
+
+export type ExpansionCardTitleType = OverridableComponent<
+  ExpansionCardTitleProps,
+  HTMLHeadingElement
+>;
+
+export const ExpansionCardTitle: ExpansionCardTitleType = forwardRef(
+  ({ className, as: Component = "h3", size = "medium", ...rest }, ref) => (
+    <Component
+      {...rest}
+      ref={ref}
+      className={cl(
+        "navds-expansioncard__title",
+        `navds-expansioncard__title--${size}`,
+        "navds-heading",
+        `navds-heading--${size}`,
+        className
+      )}
+    />
+  )
+);

@navikt/core/react/src/expansion-card/expansion-card.stories.tsx

@@ -0,0 +1,269 @@
+import { PlantIcon } from "@navikt/aksel-icons";
+import React, { useState } from "react";
+import { ExpansionCard } from ".";
+import { BodyLong } from "../typography";
+import ExpansionCardContent from "./ExpansionCardContent";
+import ExpansionCardHeader from "./ExpansionCardHeader";
+
+export default {
+  title: "ds-react/ExpansionCard",
+  component: ExpansionCard,
+  subcomponents: [ExpansionCardHeader, ExpansionCardContent],
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          width: "600px",
+          minHeight: "100vh",
+          padding: "10rem 0",
+          display: "flex",
+          flexDirection: "column",
+          gap: "1rem",
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+const Content = () => (
+  <ExpansionCard.Content>
+    <BodyLong spacing>
+      På ditt faste arbeidssted vil du ha yrkesskadedekning også i hvilepauser,
+      lunsjpauser, trimaktiviteter og lignende i arbeidstiden.
+    </BodyLong>
+    <BodyLong spacing>
+      Som hovedregel er du som arbeidstaker ikke yrkesskadedekket på veien til
+      og fra arbeid eller første og siste oppdragssted. Du er heller ikke
+      yrkesskadedekket på fritiden eller under private gjøremål i arbeidstiden.
+    </BodyLong>
+    <BodyLong spacing>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga suscipit
+      voluptatum expedita earum id, aperiam deleniti molestiae eveniet
+      doloremque explicabo perspiciatis quasi repellendus! Est dolore a nemo
+      aspernatur obcaecati dicta.
+    </BodyLong>
+    <BodyLong spacing>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga suscipit
+      voluptatum expedita earum id, aperiam deleniti molestiae eveniet
+      doloremque explicabo perspiciatis quasi repellendus! Est dolore a nemo
+      aspernatur obcaecati dicta.
+    </BodyLong>
+    <BodyLong>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga suscipit
+      voluptatum expedita earum id, aperiam deleniti molestiae eveniet
+      doloremque explicabo perspiciatis quasi repellendus! Est dolore a nemo
+      aspernatur obcaecati dicta.
+    </BodyLong>
+  </ExpansionCard.Content>
+);
+
+export const Default = {
+  render: (props) => {
+    return (
+      <ExpansionCard
+        {...props}
+        open={props?.open || undefined}
+        size={props.size}
+        aria-label="default-demo"
+      >
+        <ExpansionCard.Header>
+          <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
+          {props.description && (
+            <ExpansionCard.Description>
+              For at yrkesskadedekningen skal gjelde, er det som hovedregel krav
+              til tid, sted og arbeidsoppgaver
+            </ExpansionCard.Description>
+          )}
+        </ExpansionCard.Header>
+        <Content />
+      </ExpansionCard>
+    );
+  },
+  args: {
+    open: false,
+    size: "medium",
+    description: false,
+    variant: "neutral",
+  },
+  argTypes: {
+    size: { control: "select", options: ["medium", "small"] },
+  },
+};
+
+export const Description = {
+  render: () => (
+    <ExpansionCard aria-label="bare description">
+      <ExpansionCard.Header>
+        <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
+        <ExpansionCard.Description>
+          For at yrkesskadedekningen skal gjelde, er det som hovedregel krav til
+          tid, sted og arbeidsoppgaver
+        </ExpansionCard.Description>
+      </ExpansionCard.Header>
+      <Content />
+    </ExpansionCard>
+  ),
+};
+
+export const Sizes = {
+  render: () => (
+    <>
+      <h2>Medium</h2>
+      <ExpansionCard aria-label="Demo med description">
+        <ExpansionCard.Header>
+          <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
+          <ExpansionCard.Description>
+            For at yrkesskadedekningen skal gjelde, er det som hovedregel krav
+            til tid, sted og arbeidsoppgaver
+          </ExpansionCard.Description>
+        </ExpansionCard.Header>
+        <Content />
+      </ExpansionCard>
+      <ExpansionCard aria-label="Demo">
+        <ExpansionCard.Header>
+          <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
+        </ExpansionCard.Header>
+        <Content />
+      </ExpansionCard>
+      <h2>Small</h2>
+      <ExpansionCard size="small" aria-label="small-demo">
+        <ExpansionCard.Header>
+          <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
+          <ExpansionCard.Description>
+            For at yrkesskadedekningen skal gjelde, er det som hovedregel krav
+            til tid, sted og arbeidsoppgaver
+          </ExpansionCard.Description>
+        </ExpansionCard.Header>
+        <Content />
+      </ExpansionCard>
+      <ExpansionCard
+        size="small"
+        aria-label="small-demo med avatar uten description"
+      >
+        <ExpansionCard.Header>
+          <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
+        </ExpansionCard.Header>
+        <Content />
+      </ExpansionCard>
+    </>
+  ),
+};
+
+export const HeadingSizing = {
+  render: () => (
+    <>
+      {(["large", "medium", "small"] as const).map((x) => (
+        <ExpansionCard aria-label={`demo-${x}`}>
+          <ExpansionCard.Header key={x}>
+            <ExpansionCard.Title size={x}>{x}</ExpansionCard.Title>
+            <ExpansionCard.Description>
+              For at yrkesskadedekningen skal gjelde, er det som hovedregel krav
+              til tid, sted og arbeidsoppgaver
+            </ExpansionCard.Description>
+          </ExpansionCard.Header>
+          <Content />
+        </ExpansionCard>
+      ))}
+    </>
+  ),
+};
+
+export const DefaultOpen = {
+  render: () => (
+    <ExpansionCard defaultOpen aria-label="defaultOpen demo">
+      <ExpansionCard.Header>
+        <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
+        <ExpansionCard.Description>
+          For at yrkesskadedekningen skal gjelde, er det som hovedregel krav til
+          tid, sted og arbeidsoppgaver
+        </ExpansionCard.Description>
+      </ExpansionCard.Header>
+      <Content />
+    </ExpansionCard>
+  ),
+};
+
+export const ControlledState = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [open, setOpen] = useState(false);
+    return (
+      <ExpansionCard
+        open={open}
+        onToggle={setOpen}
+        aria-label="Controlled-state demo"
+      >
+        <ExpansionCard.Header>
+          <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
+          <ExpansionCard.Description>
+            For at yrkesskadedekningen skal gjelde, er det som hovedregel krav
+            til tid, sted og arbeidsoppgaver
+          </ExpansionCard.Description>
+        </ExpansionCard.Header>
+        <Content />
+      </ExpansionCard>
+    );
+  },
+};
+
+export const Customization = {
+  render: () => (
+    <div className="subtle-card">
+      <ExpansionCard aria-label="custom-styling demo">
+        <ExpansionCard.Header>
+          <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
+          <ExpansionCard.Description>
+            For at yrkesskadedekningen skal gjelde, er det som hovedregel krav
+            til tid, sted og arbeidsoppgaver
+          </ExpansionCard.Description>
+        </ExpansionCard.Header>
+        <Content />
+      </ExpansionCard>
+
+      <style>{`
+        .subtle-card {
+          --ac-expansioncard-bg: var(--a-surface-subtle);
+          --ac-expansioncard-border-open-color: var(--a-border-alt-3);
+        }`}</style>
+    </div>
+  ),
+};
+
+export const Icon = {
+  render: () => (
+    <div>
+      <ExpansionCard aria-label="custom-styling demo">
+        <ExpansionCard.Header>
+          <div className="with-icon">
+            <div className="icon">
+              <PlantIcon aria-hidden />
+            </div>
+            <div>
+              <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
+              <ExpansionCard.Description>
+                For at yrkesskadedekningen skal gjelde, er det som hovedregel
+                krav til tid, sted og arbeidsoppgaver
+              </ExpansionCard.Description>
+            </div>
+          </div>
+        </ExpansionCard.Header>
+        <Content />
+      </ExpansionCard>
+
+      <style>{`
+        .with-icon {
+          display: flex;
+          align-items: center;
+          gap: 1rem;
+        }
+        .icon {
+          font-size: 3rem;
+          flex-shrink: 0;
+          display: grid;
+          place-content: center;
+        }`}</style>
+    </div>
+  ),
+};

@navikt/core/react/src/expansion-card/index.ts

@@ -0,0 +1,4 @@
+export {
+  type ExpansionCardProps,
+  default as ExpansionCard,
+} from "./ExpansionCard";

@navikt/core/react/src/form/Textarea.tsx

@@ -45,6 +45,15 @@ export interface TextareaProps
    * Enables resizing of field
    */
   resize?: boolean;
+  /**
+   * i18n-translations for counter-text
+   */
+  i18n?: {
+    /** @default Antall tegn igjen */
+    counterLeft?: string;
+    /** @default tegn for mye */
+    counterTooMuch?: string;
+  };
 }
 
 export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
@@ -65,6 +74,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
       maxLength,
       hideLabel = false,
       resize,
+      i18n,
       ...rest
     } = props;
 
@@ -166,6 +176,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
                 maxLength={maxLength}
                 currentLength={props.value?.length ?? controlledValue?.length}
                 size={size}
+                i18n={i18n}
               />
             </>
           )}
@@ -185,7 +196,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
   }
 );
 
-export const Counter = ({ maxLength, currentLength, size }) => {
+export const Counter = ({ maxLength, currentLength, size, i18n }) => {
   const difference = maxLength - currentLength;
 
   return (
@@ -197,8 +208,8 @@ export const Counter = ({ maxLength, currentLength, size }) => {
       size={size}
     >
       {difference < 0
-        ? `Antall tegn for mye ${Math.abs(difference)}`
-        : `Antall tegn igjen ${difference}`}
+        ? `${Math.abs(difference)} ${i18n?.counterLeft ?? "tegn for mye"}`
+        : `${difference} ${i18n?.counterTooMuch ?? "tegn igjen"}`}
     </BodyShort>
   );
 };

@navikt/core/react/src/index.ts

@@ -5,6 +5,7 @@ export * from "./chat";
 export * from "./chips";
 export * from "./date";
 export * from "./form";
+export * from "./expansion-card";
 export * from "./grid";
 export * from "./guide-panel";
 export * from "./help-text";

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

@@ -3,9 +3,6 @@ import cl from "clsx";
 
 export interface PopoverContentProps
   extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * Modal.Content content
-   */
   children: React.ReactNode;
 }
 

@navikt/core/tailwind/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @navikt/ds-tailwind
 
+## 2.8.4
+
+## 2.8.3
+
+## 2.8.2
+
+## 2.8.1
+
+## 2.8.0
+
 ## 2.7.8
 
 ## 2.7.7

@navikt/core/tailwind/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tailwind",
-  "version": "2.7.8",
+  "version": "2.8.4",
   "description": "Tailwind config based on @navikt/ds-tokens",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -22,7 +22,7 @@
     "directory": "@navikt/core/tailwind"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^2.7.8",
+    "@navikt/ds-tokens": "^2.8.4",
     "@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.8.4
+
+## 2.8.3
+
+## 2.8.2
+
+## 2.8.1
+
+## 2.8.0
+
 ## 2.7.8
 
 ## 2.7.7

@navikt/core/tokens/package.json

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

@navikt/icons/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @navikt/ds-icons
 
+## 2.8.4
+
+## 2.8.3
+
+## 2.8.2
+
+## 2.8.1
+
+## 2.8.0
+
 ## 2.7.8
 
 ## 2.7.7

@navikt/icons/package.json

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

@navikt/internal/css/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @navikt/ds-css-internal
 
+## 2.8.4
+
+## 2.8.3
+
+## 2.8.2
+
+## 2.8.1
+
+## 2.8.0
+
 ## 2.7.8
 
 ## 2.7.7

@navikt/internal/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css-internal",
-  "version": "2.7.8",
+  "version": "2.8.4",
   "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.8.4
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.8.4
+  - @navikt/ds-icons@2.8.4
+
+## 2.8.3
+
+### Patch Changes
+
+- Updated dependencies [[`f862aa9c2`](https://github.com/navikt/aksel/commit/f862aa9c2ec71ffdb295708dc6dad6b77af9519e)]:
+  - @navikt/ds-react@2.8.3
+  - @navikt/ds-icons@2.8.3
+
+## 2.8.2
+
+### Patch Changes
+
+- Updated dependencies [[`9c495cf50`](https://github.com/navikt/aksel/commit/9c495cf5037a7453e51e273ab93e4232576f4958)]:
+  - @navikt/ds-react@2.8.2
+  - @navikt/ds-icons@2.8.2
+
+## 2.8.1
+
+### Patch Changes
+
+- Updated dependencies [[`1276b4d7e`](https://github.com/navikt/aksel/commit/1276b4d7efd831d20345292dbb21a11d100a0ddd)]:
+  - @navikt/ds-react@2.8.1
+  - @navikt/ds-icons@2.8.1
+
+## 2.8.0
+
+### Patch Changes
+
+- Updated dependencies [[`c6d51a019`](https://github.com/navikt/aksel/commit/c6d51a01902e4fd7916a422e17ed175f39acd458)]:
+  - @navikt/ds-react@2.8.0
+  - @navikt/ds-icons@2.8.0
+
 ## 2.7.8
 
 ### Patch Changes

@navikt/internal/react/package.json

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

aksel.nav.no/package.json

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

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

@@ -3,6 +3,7 @@ import { BodyLong, Detail, Heading, Ingress, Link } from "@navikt/ds-react";
 import BlockContent from "@sanity/block-content-to-react";
 import cl from "clsx";
 import InnholdsKort from "components/sanity-modules/cards/InnholdsKort";
+import ExpansionCard from "components/sanity-modules/ExpansionCard";
 import NextLink from "next/link";
 import React, { createContext, useContext } from "react";
 import {
@@ -49,6 +50,7 @@ const serializers = {
     do_dont: ({ node }) => <DoDont node={node} />,
     bilde: ({ node }) => <Bilde node={node} />,
     alert: ({ node }) => <Alert node={node} />,
+    expansioncard: ({ node }) => <ExpansionCard node={node} />,
     kode: ({ node }) => <Kode node={node} />,
     tabell_v2: ({ node }) => <Tabell node={node} />,
     accordion: ({ node }) => <Accordion node={node} />,

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

@@ -13,7 +13,7 @@ const Footer = () => {
       data-theme="dark"
       className="toc-ignore text-text-on-inverted bg-deepblue-800 relative flex w-full justify-center"
     >
-      <div className="relative z-10 mx-auto grid w-full max-w-screen-2xl gap-12 px-4 pt-12 pb-16 md:px-6 xl:grid-cols-5 xl:gap-6">
+      <div className="relative z-10 mx-auto grid w-full max-w-screen-2xl gap-12 px-4 pt-12 pb-16 md:grid-cols-2 md:px-6 lg:grid-cols-4 xl:grid-cols-5 xl:gap-6">
         <LogoBlock />
         <Snarveier />
         <SideLenker />
@@ -52,6 +52,13 @@ function Snarveier() {
         <FooterLink href="/prinsipper/brukeropplevelse">
           Prinsipper for brukeropplevelse
         </FooterLink>
+        <FooterLink href="https://identitet.nav.no/">Identitet</FooterLink>
+        <FooterLink href="https://sikkerhet.nav.no/">
+          Security Playbook
+        </FooterLink>
+        <FooterLink href="https://etterlevelse.intern.nav.no/">
+          Etterlevelse
+        </FooterLink>
       </BodyShort>
     </div>
   );

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

@@ -55,7 +55,10 @@ const FooterForm = () => {
 
   return (
     <>
-      <div className="flex w-full max-w-md flex-col" data-theme="dark">
+      <div
+        className="flex w-full max-w-md flex-col lg:col-span-2 xl:col-span-1"
+        data-theme="dark"
+      >
         <div aria-live="polite">
           {sent.status && (
             <Label spacing as="p">

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

@@ -40,7 +40,7 @@ const ComponentOverview = ({
 
   return (
     <div className="mb-8">
-      <ul className="component-card-grid">
+      <ul className="grid grid-cols-[repeat(auto-fill,_minmax(min(17rem,_100%),_1fr))] gap-6">
         {sorted.map((x) => (
           <li key={x._id}>
             <div className="bg-surface-subtle focus-within:ring-border-focus ring-border-subtle hover:shadow-medium min-h-56 group relative rounded-2xl focus-within:ring-[3px] hover:ring-1">

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

@@ -0,0 +1,41 @@
+import { SanityBlockContent } from "@/sanity-block";
+import { ExpansionCard as DsExpansionCard } from "@navikt/ds-react";
+import { withErrorBoundary } from "@/error-boundary";
+
+const ExpansionCard = ({
+  node,
+}: {
+  node: {
+    heading: string;
+    heading_level: "h3" | "h4";
+    description?: string;
+    body: any[];
+  };
+}): JSX.Element => {
+  if (!node.heading || !node.body || !node.heading_level) {
+    return null;
+  }
+
+  return (
+    <DsExpansionCard className="mb-7 max-w-2xl" aria-label={node.heading}>
+      <DsExpansionCard.Header>
+        <DsExpansionCard.Title
+          as={node.heading_level}
+          size={node.heading_level === "h3" ? "medium" : "small"}
+        >
+          {node.heading}
+        </DsExpansionCard.Title>
+        {node?.description && (
+          <DsExpansionCard.Description>
+            {node.description}
+          </DsExpansionCard.Description>
+        )}
+      </DsExpansionCard.Header>
+      <DsExpansionCard.Content>
+        <SanityBlockContent blocks={node.body} noLastMargin />
+      </DsExpansionCard.Content>
+    </DsExpansionCard>
+  );
+};
+
+export default withErrorBoundary(ExpansionCard, "ExpansionCard");

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

@@ -1,5 +1,5 @@
 import { withErrorBoundary } from "@/error-boundary";
-import { SanityT } from "@/lib";
+import { AkselBloggDocT, ResolveContributorsT, ResolveSlugT } from "@/types";
 import { BodyLong, BodyShort, Heading, Link } from "@navikt/ds-react";
 import { getAuthors } from "components/website-modules/LatestBloggs";
 import NextLink from "next/link";
@@ -8,14 +8,7 @@ import { dateStr, logNav } from "../..";
 const BloggCard = ({
   blog,
 }: {
-  blog: Partial<
-    SanityT.Schema.aksel_blogg & {
-      slug: string;
-      contributors?: {
-        title?: string;
-      }[];
-    }
-  >;
+  blog: ResolveContributorsT<ResolveSlugT<AkselBloggDocT>>;
 }) => {
   return (
     <li

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

@@ -14,7 +14,7 @@ const GodPraksisCardSimple = ({ node }: { node: Partial<AkselTemaT> }) => {
   }
 
   return (
-    <li className="flex items-center gap-2 px-2 py-4  sm:gap-4 sm:px-6">
+    <li className="flex items-center gap-2 px-2 py-4 sm:gap-4 sm:px-6">
       <div className="relative h-8 w-8 shrink-0 sm:h-12 sm:w-12">
         <Image
           src={urlFor(node?.pictogram).auto("format").url()}

aksel.nav.no/website/components/sanity-modules/frontpage-blocks/Card.tsx

@@ -0,0 +1,136 @@
+import { abbrName, dateStr } from "@/utils";
+import { BodyShort, Detail, Heading } from "@navikt/ds-react";
+import { logNav } from "components/website-modules/utils/amplitude";
+import NextLink from "next/link";
+import NextImage from "next/legacy/image";
+import { Tag } from "./Tag";
+import cl from "clsx";
+import { urlFor } from "lib/sanity/santiy";
+import { getImage } from "components/website-modules/utils/get-image";
+
+export type ArticleT = {
+  _key: string;
+  _type: string;
+  _createdAt: string;
+  _updatedAt: string;
+  _id: string;
+  heading: string;
+  ingress?: string;
+  slug: { current: string };
+  seo?: {
+    meta?: string;
+    image?: any;
+  };
+  tema?: string[];
+  status?: { tag: string; bilde?: any };
+  publishedAt: string;
+  contributors?: { title: string }[];
+};
+
+export const Card = ({ article }: { article: ArticleT }) => {
+  const date = article.publishedAt ? article.publishedAt : article._updatedAt;
+
+  const showFooter = ["aksel_artikkel", "aksel_blogg"].includes(article._type);
+  const showImage = [
+    "ds_artikkel",
+    "komponent_artikkel",
+    "aksel_blogg",
+  ].includes(article._type);
+
+  return (
+    <div
+      className={cl(
+        "bg-surface-default group relative rounded-lg",
+        "focus-within:ring-border-focus ring-border-subtle-hover focus-within:ring-[3px]",
+        "shadow-[0_0_1px_rgb(0_0_0/0.3),0_1px_3px_rgb(0_0_0/0.15)]"
+      )}
+    >
+      {showImage && (
+        <div
+          className={cl(
+            "flex max-h-80 items-center justify-center overflow-hidden rounded-t-lg",
+            "bg-deepblue-200 filter",
+            {
+              "hue-rotate-[65deg]": article?.status?.tag === "beta",
+            }
+          )}
+        >
+          {article.status?.bilde ?? article.seo?.image ? (
+            article.status?.bilde ? (
+              <NextImage
+                src={urlFor(article.status?.bilde).auto("format").url()}
+                width="200"
+                height="200"
+                alt={article.heading + " thumbnail"}
+                aria-hidden
+              />
+            ) : (
+              <div className="relative h-[200px] w-full">
+                <NextImage
+                  src={urlFor(article.seo?.image).auto("format").url()}
+                  layout="fill"
+                  objectFit="cover"
+                  alt={article.heading + " thumbnail"}
+                  aria-hidden
+                  className="rounded-t-lg"
+                />
+              </div>
+            )
+          ) : (
+            <div className="relative h-[200px] w-full">
+              <NextImage
+                layout="fill"
+                objectFit="cover"
+                src={getImage(article?.heading ?? "", "thumbnail")}
+                alt={article.heading + " thumbnail"}
+                aria-hidden
+                className="rounded-t-lg"
+              />
+            </div>
+          )}
+        </div>
+      )}
+      <div className={cl("p-3 sm:p-5", showFooter && "pb-16 sm:pb-16")}>
+        <div className="flex flex-col-reverse">
+          <NextLink
+            href={`/${article.slug}`}
+            passHref
+            className="after:absolute after:inset-0 after:z-10 after:rounded-lg focus:outline-none"
+            onClick={(e) =>
+              logNav(
+                "forside-masonary",
+                window.location.pathname,
+                e.currentTarget.getAttribute("href")
+              )
+            }
+          >
+            <Heading level="3" size="small" className="group-hover:underline">
+              {article.heading}
+            </Heading>
+          </NextLink>
+          <Tag
+            type={article._type}
+            text={article.tema ? article.tema[0] : undefined}
+            size="small"
+            beta={article.status?.tag === "beta"}
+          />
+        </div>
+        {article.ingress ? (
+          <BodyShort className="mt-2">{article.ingress}</BodyShort>
+        ) : article.seo.meta ? (
+          <BodyShort className="mt-2">{article.seo.meta}</BodyShort>
+        ) : null}
+        {showFooter && (
+          <span className="text-text-subtle absolute bottom-5 flex gap-2">
+            {article?.contributors && (
+              <Detail as="span" className="font-semibold">
+                {abbrName(article?.contributors[0]?.title)}
+              </Detail>
+            )}
+            <Detail as="span">{dateStr(date)}</Detail>
+          </span>
+        )}
+      </div>
+    </div>
+  );
+};

aksel.nav.no/website/components/sanity-modules/frontpage-blocks/FrontpageBlocks.tsx

@@ -0,0 +1,23 @@
+import Latest, { LatestT } from "./Latest";
+import { withErrorBoundary } from "@/error-boundary";
+export type BlocksT = LatestT;
+
+export const FrontpageBlock = ({ blocks }: { blocks: BlocksT[] }) => {
+  if (!blocks || !blocks.length) {
+    return null;
+  }
+  return (
+    <div className="lg:px-18 px-2">
+      {blocks.map((x) => {
+        switch (x._type) {
+          case "nytt_fra_aksel":
+            return <Latest block={x} key={x._key} />;
+          default:
+            return null;
+        }
+      })}
+    </div>
+  );
+};
+
+export default withErrorBoundary(FrontpageBlock, "FrontpageBlock");

aksel.nav.no/website/components/sanity-modules/frontpage-blocks/Latest.tsx

@@ -0,0 +1,157 @@
+import { BodyLong, BodyShort, Heading, Link } from "@navikt/ds-react";
+import Masonry, { ResponsiveMasonry } from "react-responsive-masonry";
+import { withErrorBoundary } from "@/error-boundary";
+import Image from "next/legacy/image";
+import NextLink from "next/link";
+import { urlFor } from "lib/sanity/santiy";
+import { getImage } from "components/website-modules/utils/get-image";
+import { getAuthors } from "components/website-modules/LatestBloggs";
+import { dateStr } from "@/utils";
+import { Tag } from "./Tag";
+import { Card, ArticleT } from "./Card";
+import cl from "clsx";
+
+export type LatestT = {
+  _type: "nytt_fra_aksel";
+  _key: string;
+  highlights: ArticleT[];
+  curatedResent: {
+    artikler: ArticleT[];
+    bloggposts: ArticleT[];
+    komponenter: ArticleT[];
+  };
+};
+
+const Latest = ({ block }: { block: LatestT }) => {
+  const highlights = block.highlights?.length;
+
+  const articles = getList(block);
+
+  return (
+    <>
+      <Heading level="2" size="xlarge" className="text-deepblue-800 mb-10">
+        Siste fra Aksel
+      </Heading>
+
+      {highlights && <Highlights highlights={block.highlights} />}
+      <section aria-label="Nyeste artikler fra Aksel" className="mt-20">
+        <ResponsiveMasonry
+          columnsCountBreakPoints={{ 480: 1, 768: 2, 1024: 3 }}
+        >
+          <Masonry gutter="1.5rem">
+            {articles.map((x) => (
+              <Card key={x._id} article={x} />
+            ))}
+          </Masonry>
+        </ResponsiveMasonry>
+      </section>
+    </>
+  );
+};
+
+function Highlights({ highlights }: { highlights: ArticleT[] }) {
+  return (
+    <div
+      className={cl({ "grid gap-8 md:grid-cols-2": highlights?.length === 2 })}
+    >
+      {highlights.map((x, idx) => {
+        const showFooter = ["aksel_artikkel", "aksel_blogg"].includes(x._type);
+        const useStatusImage =
+          ["ds_artikkel", "komponent_artikkel"].includes(x._type) &&
+          x.status?.bilde;
+        return (
+          <section
+            aria-label={`Fremhevet artikkel: ${x?.heading}`}
+            key={idx}
+            className={cl({
+              "grid content-start gap-8 md:grid-cols-2":
+                highlights?.length === 1,
+              "grid content-start gap-6": highlights?.length === 2,
+            })}
+          >
+            <div className="relative block aspect-video">
+              {useStatusImage ? (
+                <Image
+                  src={urlFor(x.status.bilde).quality(100).auto("format").url()}
+                  quality={100}
+                  layout="fill"
+                  aria-hidden
+                  priority
+                  className={cl(
+                    "bg-deepblue-200 rounded-lg object-cover sm:object-contain",
+                    {
+                      "hue-rotate-[65deg]": x?.status?.tag === "beta",
+                    }
+                  )}
+                  decoding="sync"
+                />
+              ) : x?.seo?.image ? (
+                <Image
+                  src={urlFor(x.seo.image).quality(100).auto("format").url()}
+                  quality={100}
+                  layout="fill"
+                  objectFit="cover"
+                  aria-hidden
+                  priority
+                  className={cl("rounded-lg", {
+                    "hue-rotate-[65deg]": x?.status?.tag === "beta",
+                  })}
+                  decoding="sync"
+                />
+              ) : (
+                <Image
+                  src={getImage(x?.heading ?? "", "thumbnail")}
+                  layout="fill"
+                  objectFit="contain"
+                  aria-hidden
+                  priority
+                  className="rounded-lg"
+                  decoding="sync"
+                />
+              )}
+            </div>
+            <div>
+              <Tag
+                type={x._type}
+                text={x.tema ? x.tema[0] : undefined}
+                beta={x?.status?.tag === "beta"}
+              />
+              <NextLink href={`/${x.slug.current}`} passHref legacyBehavior>
+                <Link className="text-text-default mb-5 mt-2 no-underline hover:underline">
+                  <Heading size="large" level="3">
+                    {x?.heading}
+                  </Heading>
+                </Link>
+              </NextLink>
+              <BodyLong className="mb-4" size="small">
+                {x?.ingress ?? x.seo?.meta}
+              </BodyLong>
+              {showFooter && getAuthors(x as any).length > 0 && (
+                <BodyShort size="small" className="text-text-subtle flex gap-2">
+                  <span className="font-semibold">
+                    {getAuthors(x as any)[0]}
+                  </span>
+                  <span>{dateStr(x?.publishedAt ?? x._createdAt)}</span>
+                </BodyShort>
+              )}
+            </div>
+          </section>
+        );
+      })}
+    </div>
+  );
+}
+
+function getList(block: LatestT) {
+  return [
+    ...block.curatedResent.artikler,
+    ...block.curatedResent.bloggposts,
+    ...block.curatedResent.komponenter,
+  ].sort((a, b) => {
+    return (
+      new Date(b.publishedAt).getTime() - new Date(a.publishedAt).getTime()
+    );
+  });
+}
+
+export default withErrorBoundary(Latest, "Latest");

aksel.nav.no/website/components/sanity-modules/frontpage-blocks/Tag.tsx

@@ -0,0 +1,60 @@
+import { Heading, Label, Tag as DsTag } from "@navikt/ds-react";
+import cl from "clsx";
+
+export const Tag = ({
+  type,
+  text,
+  size = "medium",
+  beta = false,
+}: {
+  type: string;
+  text?: string;
+  size?: "medium" | "small";
+  beta?: boolean;
+}) => {
+  const Comp = ({ ...props }: any) =>
+    size === "medium" ? (
+      <Heading {...props} as="div" size="medium" />
+    ) : (
+      <Label
+        {...props}
+        as="div"
+        size="small"
+        className={cl(props?.className, "mb-2")}
+      />
+    );
+
+  switch (type) {
+    case "aksel_artikkel":
+      return (
+        <Comp className="text-teal-600">{text ? text : "God praksis"}</Comp>
+      );
+    case "aksel_blogg":
+      return <Comp className="text-pink-600">Blogg</Comp>;
+    case "komponent_artikkel":
+      return (
+        <Comp className="text-deepblue-600 flex items-center gap-3">
+          Komponent
+          {beta && (
+            <DsTag variant="alt1" size="small">
+              Beta
+            </DsTag>
+          )}
+        </Comp>
+      );
+    case "ds_artikkel":
+      return (
+        <Comp className="text-deepblue-600 flex items-center gap-3">
+          Grunnleggende
+          {beta && (
+            <DsTag variant="alt1" size="small">
+              Beta
+            </DsTag>
+          )}
+        </Comp>
+      );
+
+    default:
+      return null;
+  }
+};

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

@@ -23,7 +23,7 @@ export const Frame = ({
           {hasDescription && <th>Beskrivelse</th>}
         </tr>
       </thead>
-      <tbody className="component-token-grid">
+      <tbody className="component-token-grid grid grid-cols-[repeat(auto-fill,_minmax(min(20rem,_100%),_1fr))] gap-4">
         {tokens.map((c) => (
           <tr
             key={c.name}

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

@@ -57,7 +57,7 @@ const CubeSmall = () => (
 
 export const BloggAd = () => {
   return (
-    <div className="full-bleed my-20 flex h-72 items-center bg-[#FBCFE8] px-4 md:rounded-2xl md:px-6 lg:h-80 lg:pl-12">
+    <div className="relative left-1/2 right-1/2 -mx-[50vw] my-20 flex h-72 w-screen items-center bg-[#FBCFE8] px-4 md:left-auto md:right-auto md:mx-auto md:w-full md:max-w-[85%] md:rounded-2xl md:px-6 lg:h-80 lg:pl-12">
       <div className="z-10 max-w-sm text-[#831843]">
         <Heading level="2" size="xlarge" spacing>
           Skriv for bloggen

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

@@ -1,33 +1,24 @@
-import Image from "next/legacy/image";
-import NextLink from "next/link";
+import { urlFor } from "@/lib";
+import { SanityBlockContent } from "@/sanity-block";
+import { AkselBloggDocT, ResolveContributorsT, ResolveSlugT } from "@/types";
 import { dateStr } from "@/utils";
 import { BodyLong, BodyShort, Heading, Link } from "@navikt/ds-react";
-import { SanityT, urlFor } from "@/lib";
-import cl from "clsx";
 import { getImage } from "components/website-modules/utils/get-image";
-import { SanityBlockContent } from "@/sanity-block";
-import AkselLink from "components/website-modules/AkselLink";
+import Image from "next/legacy/image";
+import NextLink from "next/link";
 
-export type BloggPageT = Partial<
-  SanityT.Schema.aksel_blogg & {
-    slug: string;
-    contributors?: { title?: string }[];
-  }
->;
-
-export const getAuthors = (blog: BloggPageT) =>
-  (blog?.contributors as any)?.map((x) => x?.title) ?? [];
+export const getAuthors = (
+  blog: ResolveContributorsT<ResolveSlugT<AkselBloggDocT>>
+) => (blog?.contributors as any)?.map((x) => x?.title) ?? [];
 
 export const LatestBloggposts = ({
   bloggs,
   title,
-  variant = "blogg",
   level = "1",
   intro,
 }: {
-  bloggs: BloggPageT[];
+  bloggs: ResolveContributorsT<ResolveSlugT<AkselBloggDocT>>[];
   title: string;
-  variant?: "blogg" | "forside";
   level?: "1" | "2";
   intro?: any[];
 }) => {
@@ -36,18 +27,11 @@ export const LatestBloggposts = ({
   }
 
   return (
-    <div
-      className={cl({
-        "mt-20": variant === "blogg",
-      })}
-    >
+    <div className="mt-20">
       <Heading
         level={level}
         size="xlarge"
-        className={cl(
-          "text-deepblue-700 mx-auto w-full md:mx-0 md:max-w-none",
-          { "text-5xl": variant === "blogg" }
-        )}
+        className="text-deepblue-700 mx-auto w-full text-5xl md:mx-0 md:max-w-none"
       >
         {title}
       </Heading>
@@ -169,11 +153,6 @@ export const LatestBloggposts = ({
               </div>
             </div>
           ))}
-          {variant === "forside" && (
-            <AkselLink href="/produktbloggen" className="h-fit self-end">
-              Les flere blogginnlegg
-            </AkselLink>
-          )}
         </div>
       </div>
 
@@ -284,11 +263,6 @@ export const LatestBloggposts = ({
               </div>
             </div>
           ))}
-          {variant === "forside" && (
-            <AkselLink href="/produktbloggen" className="self-end">
-              Les flere blogginnlegg
-            </AkselLink>
-          )}
         </div>
       </div>
     </div>

aksel.nav.no/website/components/website-modules/examples/examples.module.css

@@ -6,3 +6,15 @@
   padding-left: 1rem;
   padding-right: 1rem;
 }
+
+.containerStatic {
+  display: flex;
+  justify-content: center;
+  height: 100%;
+  padding: 1.5rem 1rem;
+}
+
+.containerStatic > * {
+  max-width: 30rem;
+  width: 100%;
+}

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

@@ -4,15 +4,25 @@ import cl from "clsx";
 
 export const withDsExample = (
   Component: ComponentType,
-  variant?: "full" | "inverted"
+  /**
+   * Static: Used for dynamic-height examples like ExpansionCard
+   */
+  variant?: "full" | "inverted" | "static"
 ) => {
   const DsHOC = (props: any) => (
     <div
-      className={cl(styles.container, {
+      className={cl({
         "bg-gray-900": variant === "inverted",
+        [styles.containerStatic]: variant === "static",
+        [styles.container]: variant !== "static",
       })}
     >
-      <div id="ds-example" className={cl({ "w-full": variant === "full" })}>
+      <div
+        id="ds-example"
+        className={cl({
+          "w-full": variant === "full",
+        })}
+      >
         <Component {...props} />
       </div>
     </div>

aksel.nav.no/website/components/website-modules/icon-page/Page.tsx

@@ -105,7 +105,7 @@ export const IconPage = ({ name }: { name: string }) => {
           id="hovedinnhold"
           className="min-h-[80vh] focus:outline-none"
         >
-          <div className="centered-layout mb-40 grid max-w-screen-2xl pt-20">
+          <div className="mx-auto mb-40 grid w-full max-w-screen-2xl px-4 pt-20 sm:px-6">
             <div>
               <div>
                 <h1 className="text-deepblue-700 my-0 w-fit text-5xl font-bold">

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

@@ -6,9 +6,11 @@ import { ChangeLogIconOutline } from "components/assets";
 const SuggestionBlockComponent = ({
   variant,
   reference = "",
+  unsafe = false,
 }: {
   variant: "komponent-beta" | "komponent-ny";
   reference?: string;
+  unsafe?: boolean;
 }) => {
   return (
     <div
@@ -22,12 +24,18 @@ const SuggestionBlockComponent = ({
         <Heading size="small" level="2">
           {options[variant]?.heading}
         </Heading>
-        <BodyLong className="mt-2">{options[variant]?.text}</BodyLong>
+        <BodyLong className="mt-2">
+          {variant === "komponent-beta" && unsafe
+            ? options["komponent-beta-unsafe"].text
+            : options[variant]?.text}
+        </BodyLong>
         <Button
           variant="secondary-neutral"
           as="a"
           href={options[variant].link + reference}
           className="mt-4 w-fit"
+          target="_blank"
+          rel="noreferrer noopener"
         >
           Send innspill
         </Button>
@@ -56,6 +64,8 @@ const SuggestionBlockIcon = ({
           as="a"
           href={options[variant].link + reference}
           className="mt-4 w-fit"
+          target="_blank"
+          rel="noreferrer noopener"
         >
           Send innspill
         </Button>
@@ -67,6 +77,7 @@ const SuggestionBlockIcon = ({
 export const SuggestionBlock = ({
   variant,
   reference = "",
+  unsafe,
 }: {
   variant:
     | "ikoner"
@@ -78,9 +89,16 @@ export const SuggestionBlock = ({
     | "ikon-not-found"
     | "ikon";
   reference?: string;
+  unsafe?: boolean;
 }) => {
   if (variant === "komponent-ny" || variant === "komponent-beta") {
-    return <SuggestionBlockComponent variant={variant} reference={reference} />;
+    return (
+      <SuggestionBlockComponent
+        variant={variant}
+        unsafe={unsafe}
+        reference={reference}
+      />
+    );
   }
 
   if (variant === "ikon-ny" || variant === "ikon") {
@@ -106,6 +124,8 @@ export const SuggestionBlock = ({
         variant="secondary-neutral"
         as="a"
         href={options[variant]?.link + reference}
+        target="_blank"
+        rel="noreferrer noopener"
       >
         Send forslag
       </Button>
@@ -113,8 +133,7 @@ export const SuggestionBlock = ({
   );
 };
 
-const issueUrl =
-  "https://github.com/navikt/aksel/issues/new?assignees=olejorgenbakken";
+const issueUrl = "https://github.com/navikt/aksel/issues/new?assignees=KenAJoh";
 
 const options: {
   [key: string]: {
@@ -165,7 +184,45 @@ const options: {
     icon: <ChangeLogIconOutline />,
   },
   "komponent-beta": {
-    text: "Komponenten er under utvikling. Dette kan medføre bugs slik at teamet ditt må ta stilling til om dere ønsker å bruke denne i produksjon. Hvis komponenten er prefikset med UNSAFE kan det også medføre breaking-changes i patch/minor versjon av kodepakker og i Figma. Tar du den i bruk ønsker vi gjerne innspill til hvordan den fungerer i tjenesten din!",
+    text: "Komponenten er under utvikling, men klar for adopsjon. Vi er ønsker gjerne innspill på hvordan den fungerer og hvilken forbedringer vi kan gjøre.",
+    link: `${issueUrl}&labels=forespørsel+🥰%2Ckomponenter+🧩%2Cbeta+🧪&template=update-component.yml&title=%5BInnspill+til+komponent%5D%3A+`,
+    heading: "Beta",
+    icon: (
+      <svg
+        width="25"
+        height="24"
+        viewBox="0 0 25 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        focusable={false}
+        aria-hidden
+      >
+        <path
+          d="M14.5471 3.99994H10.4528V9.48408L4.83594 17.1731C3.94768 18.3891 4.92474 19.9999 6.55053 19.9999H18.4495C20.0753 19.9999 21.0523 18.3891 20.1641 17.1731L14.5471 9.48408V3.99994Z"
+          stroke="#262626"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M9.5 4H15.5"
+          stroke="#262626"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M8.75 12L16.25 12"
+          stroke="#262626"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    ),
+  },
+  "komponent-beta-unsafe": {
+    text: "Komponenten er under utvikling. Så lenge komponenten er prefikset med UNSAFE kan det også medføre breaking-changes i minor versjon av kodepakker og i Figma. Teamet ditt må ta selv ta stilling til om dere ønsker å bruke denne i produksjon.",
     link: `${issueUrl}&labels=forespørsel+🥰%2Ckomponenter+🧩%2Cbeta+🧪&template=update-component.yml&title=%5BInnspill+til+komponent%5D%3A+`,
     heading: "Beta",
     icon: (

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

@@ -113,6 +113,16 @@ const accordionBlock = `_type == "accordion"=>{
       ${defaultBlock}
     }
   }
+}
+`;
+
+const expansionCardBlock = `_type == "expansioncard"=>{
+  ...,
+  body[]{
+    ...,
+    ${markDef},
+    ${defaultBlock}
+  }
 }`;
 
 const spesialSeksjon = `_type == "spesial_seksjon" =>{
@@ -141,7 +151,7 @@ const propsSeksjon = `_type == "props_seksjon" =>{
 
 const tokenRef = `_type == "token_ref"=>@->`;
 
-const deRefs = `
+export const destructureBlocks = `
 ${alert},
 ${tips},
 ${tokenRef},
@@ -154,6 +164,7 @@ ${propsSeksjon},
 ${installSeksjon},
 ${spesialSeksjon},
 ${accordionBlock},
+${expansionCardBlock},
 ${defaultBlock},
 `;
 
@@ -164,7 +175,7 @@ export const akselTema = `*[_type == "godpraksis_landingsside"][0]{
     ...,
     intro[]{
       ...,
-      ${deRefs}
+      ${destructureBlocks}
     }
   },
   "temaer": *[_type == "aksel_tema" && defined(seksjoner[].sider[])]{
@@ -183,7 +194,7 @@ export const akselTema = `*[_type == "godpraksis_landingsside"][0]{
   }
 }`;
 
-const contributorsAll = `contributors[]->{
+export const contributorsAll = `contributors[]->{
   anonym == true => {"title":@.anon_navn.current},
   anonym != true => {"title":@.title}
 }`;
@@ -193,39 +204,61 @@ const contributorsSingle = `contributors[0]->{
   anonym != true => {"title":@.title}
 }`;
 
-export const akselBloggPosts = `*[_type == "blogg_landingsside"][0]{
-  "page": {..., intro[]{...,${deRefs}}},
-  "bloggposts": *[_type == "aksel_blogg"] | order(_createdAt desc){
-    seo,
-    heading,
-    ingress,
-    publishedAt,
-    _createdAt,
-    _id,
-    "slug": slug.current,
-    ${contributorsAll}
-  }
-}`;
-
 export const akselForsideQuery = `*[_type == "aksel_forside"][0]{
   "page": {
     ...,
   },
-  "bloggs": *[_type == "aksel_blogg"] | order(_createdAt desc)[0...4]{
-    ...,
-    "slug": slug.current,
-    ${contributorsAll}
-  },
   "tema": *[_type == "aksel_tema" && defined(seksjoner[].sider[])],
-  "resent": *[_type == "aksel_artikkel" && defined(publishedAt)] | order(publishedAt desc)[0...3]{
-    _id,
-    heading,
-    _createdAt,
-    _updatedAt,
-    publishedAt,
-    "slug": slug.current,
-    "tema": tema[]->title,
-    ingress,
+  blocks[]{
+    ...,
+    _type == "nytt_fra_aksel"=>{
+      highlights[]->{
+        ...,
+        "content": null,
+        ${contributorsAll},
+        "tema": tema[]->title,
+      },
+      "curatedResent": {
+        "bloggposts": *[_type == "aksel_blogg" && !(_id in ^.highlights[]._ref)] | order(_createdAt desc)[0...2]{
+          _type,
+          _id,
+          heading,
+          _createdAt,
+          _updatedAt,
+          publishedAt,
+          "slug": slug.current,
+          ingress,
+          seo,
+          ${contributorsAll}
+        },
+        "artikler": *[_type == "aksel_artikkel" && defined(publishedAt) && !(_id in ^.highlights[]._ref)] | order(publishedAt desc)[0...3]{
+          _type,
+          _id,
+          heading,
+          _createdAt,
+          _updatedAt,
+          publishedAt,
+          "slug": slug.current,
+          "tema": tema[]->title,
+          ingress,
+          seo,
+          ${contributorsAll}
+        },
+        "komponenter": *[_type in ["komponent_artikkel", "ds_artikkel"] && defined(publishedAt) && !(_id in ^.highlights[]._ref)] | order(publishedAt desc)[0...3]{
+          _type,
+          _id,
+          heading,
+          "slug": slug.current,
+          status,
+          kategori,
+          _createdAt,
+          _updatedAt,
+          publishedAt,
+          seo,
+          ${contributorsAll}
+        },
+      },
+    }
   }
 }`;
 
@@ -237,7 +270,7 @@ export const akselPrinsippBySlug = `{
     "content": select(
       $valid == "true" => content[]{
         ...,
-        ${deRefs}
+        ${destructureBlocks}
       },
       $valid != "true" => []
     ),
@@ -252,7 +285,7 @@ export const akselDocumentBySlug = `{
     "slug": slug.current,
     content[]{
       ...,
-      ${deRefs}
+      ${destructureBlocks}
     },
     tema[]->{title, slug, seo},
     ${contributorsAll},
@@ -302,12 +335,12 @@ export const komponentQuery = `{
         ...,
         body[]{
           ...,
-        ${deRefs}
+        ${destructureBlocks}
         }
       },
       content[]{
         ...,
-        ${deRefs}
+        ${destructureBlocks}
       },
   },
   "refs": select(
@@ -330,7 +363,7 @@ export const grunnleggendeQuery = `{
       "slug": slug.current,
       content[]{
         ...,
-        ${deRefs}
+        ${destructureBlocks}
       },
   },
   "seo": *[_type == "komponenter_landingsside"][0].seo.image,
@@ -345,7 +378,7 @@ export const akselTemaDocs = `{
       ...,
       beskrivelse[]{
         ...,
-        ${deRefs}
+        ${destructureBlocks}
       },
       sider[]->{
         _id,
@@ -367,31 +400,6 @@ export const akselTemaDocs = `{
   }
 }`;
 
-export const akselBloggBySlug = `{
-  "blogg": *[slug.current == $slug && _type == "aksel_blogg"] | order(_updatedAt desc)[0]
-  {
-    ...,
-    "slug": slug.current,
-    "content": select(
-      $valid == "true" => content[]{
-        ...,
-        ${deRefs}
-      },
-      $valid != "true" => []
-    ),
-    ${contributorsAll}
-  },
-  "morePosts": *[_type == "aksel_blogg" && slug.current != $slug] | order(publishedAt desc, _updatedAt desc)[0...3] {
-    "slug": slug.current,
-    heading,
-    _createdAt,
-    _id,
-    ingress,
-    ${contributorsAll},
-
-  }
-}`;
-
 const landingsSideQuery = (t) => {
   const kat =
     t === "komponenter"
@@ -402,7 +410,7 @@ const landingsSideQuery = (t) => {
 
   return `"page": *[_type == "${t}_landingsside"][0]{
     ...,
-    ${kat.map((x) => `intro_${x.value}[]{...,${deRefs}}`).join(",")}
+    ${kat.map((x) => `intro_${x.value}[]{...,${destructureBlocks}}`).join(",")}
   }`;
 };
 
@@ -414,18 +422,6 @@ export const grunnleggendeLandingQuery = `{${sidebarQuery}, ${landingsSideQuery(
   "grunnleggende"
 )}, "links": *[_type == "ds_artikkel" && defined(kategori)]{_id,heading,"slug": slug,status,kategori}}`;
 
-export const akselStandaloneBySlug = `{
-  "page": *[slug.current == $slug && _type == "aksel_standalone"] | order(_updatedAt desc)[0]
-  {
-    ...,
-    "slug": slug.current,
-    content[]{
-      ...,
-      ${deRefs}
-    }
-  }
-}`;
-
 export const akselArticleFields = `
     _id,
     heading,

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

@@ -0,0 +1,2 @@
+export * from "./schema-types";
+export * from "./next";

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

@@ -0,0 +1,10 @@
+export type NextPageT<T> = {
+  props: T & {
+    slug?: string;
+    preview: boolean;
+    id: string;
+    title: string;
+  };
+  notFound: boolean;
+  revalidate?: number;
+};

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

@@ -0,0 +1,47 @@
+import { bloggKategorier } from "../../sanity/config";
+
+export type ResolveSlugT<T> = Omit<T, "slug"> & {
+  slug: string;
+};
+
+export type ResolveContributorsT<T> = Omit<T, "contributors"> & {
+  contributors: { title: string }[];
+};
+
+type DocumentT<T> = {
+  _createdAt: string;
+  _updatedAt: string;
+  _id: string;
+  _rev?: string;
+  _type: T;
+};
+
+type ArticleT = {
+  publishedAt?: string;
+  heading: string;
+  slug: {
+    current: string;
+  };
+  contributors: {
+    _ref: string;
+  }[];
+  ingress: string;
+  content: any[];
+  seo?: {
+    meta?: string;
+    image?: any;
+  };
+};
+
+export interface AkselStandaloneDocT
+  extends DocumentT<"aksel_standalone">,
+    Omit<ArticleT, "ingress" | "contributors" | "seo"> {}
+
+export interface AkselBloggFrontpageT extends DocumentT<"blogg_landingsside"> {
+  intro: any[];
+  seo?: ArticleT["seo"];
+}
+
+export interface AkselBloggDocT extends DocumentT<"aksel_blogg">, ArticleT {
+  kategori: typeof bloggKategorier[number]["value"];
+}

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

@@ -1,11 +1,7 @@
 import { allArticleDocuments } from "../../sanity/config";
 
 export const options: {
-  [K in
-    | typeof allArticleDocuments[number]
-    | "icon"
-    | "aksel_standalone"
-    | "icon_page"]: {
+  [K in typeof allArticleDocuments[number] | "icon" | "icon_page"]: {
     display: string;
     index: number;
     hidden?: boolean;

aksel.nav.no/website/package.json

@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@sanity/block-content-to-react": "^3.0.0",
-    "@sanity/client": "^5.2.2",
+    "@sanity/client": "^5.3.0",
     "@sanity/code-input": "4.1.0",
     "@sanity/color-input": "^3.0.2",
     "@sanity/icons": "2.2.2",
@@ -35,7 +35,7 @@
     "@sanity/preview-kit": "^1.3.4",
     "@sanity/table": "1.0.1",
     "@sanity/ui": "^1.3.0",
-    "@sanity/vision": "3.6.0",
+    "@sanity/vision": "3.7.0",
     "@svgr/webpack": "^5.5.0",
     "amplitude-js": "^8.21.5",
     "boring-avatars": "1.7.0",
@@ -52,8 +52,9 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-modal": "3.15.1",
+    "react-responsive-masonry": "^2.1.7",
     "recharts": "^2.2.0",
-    "sanity": "3.6.0",
+    "sanity": "3.7.0",
     "sanity-plugin-asset-source-unsplash": "^1.0.6",
     "sanity-plugin-iframe-pane": "^2.2.0",
     "sanity-plugin-media": "^2.0.5",

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

@@ -11,22 +11,6 @@ import { useEffect } from "react";
 import { IdContext } from "../components/website-modules/utils/contexts/id-context";
 import "../styles/index.css";
 
-/*
-** Task Analytics placeholder **
-
-import Script from "next/script";
-{!router.asPath.startsWith("/eksempler") &&
-!router.asPath.startsWith("/admin") && (
-  <>
-    <Script src="https://in2.taskanalytics.com/tm.js"></Script>
-    <Script id="task-analytics" nonce="4e1aa203a32e">
-      {`window.TA = window.TA||function(){(TA.q=TA.q||[]).push(arguments);};
-  window.TA('start', '03346')`}
-    </Script>
-  </>
-)}
-*/
-
 initAmplitude();
 
 function App({

aksel.nav.no/website/pages/api/search/v1/index.ts

@@ -45,7 +45,7 @@ export default async function initialSearch(
       : req.query.doc;
     doc = queryDoc.split(",");
   } else {
-    doc = [...allArticleDocuments, "icon", "aksel_standalone", "icon_page"];
+    doc = [...allArticleDocuments, "icon", "icon_page"];
   }
 
   const query = Array.isArray(req.query.q)
@@ -182,10 +182,9 @@ function formatResults(res: FuseHits[], query: string): SearchHit[] {
 let data = null;
 
 async function searchSanity() {
-  const sanityQueryHttp = `*[_type in [${[
-    ...allArticleDocuments,
-    "aksel_standalone",
-  ].map((x) => `"${x}"`)}] ]{
+  const sanityQueryHttp = `*[_type in [${allArticleDocuments.map(
+    (x) => `"${x}"`
+  )}] ]{
     ${akselArticleFields}
     "intro": pt::text(intro.body),
     "content": content[]{...,

aksel.nav.no/website/pages/api/search/v1/initial.ts

@@ -1,62 +0,0 @@
-import { akselArticleFields } from "@/lib";
-import { getClient } from "@/sanity-client";
-import { NextApiRequest, NextApiResponse } from "next";
-import { allArticleDocuments } from "../../../../sanity/config";
-
-/*
-TODO: nyeste artikler basert på kategori (alle, god praksis, komponenter etc)
-*/
-export default async function initialSearch(
-  req: NextApiRequest,
-  res: NextApiResponse
-) {
-  if (req.method !== "GET") {
-    return res.status(405).json({ message: "Method not allowed" });
-  }
-
-  const query = `*[_type in $types && defined(publishedAt)] | order(publishedAt desc)[0...12] {
-    ${akselArticleFields}
-  }`;
-
-  let doc;
-  if (req.query?.doc) {
-    const queryDoc = Array.isArray(req.query.doc)
-      ? req.query.doc.join("")
-      : req.query.doc;
-    doc = queryDoc.split(",");
-  } else {
-    doc = allArticleDocuments;
-  }
-
-  const payload = [];
-
-  await getClient()
-    .fetch(query, { types: doc })
-    .then((data) => {
-      payload.push(...data);
-      return data;
-    })
-    .catch((err) => {
-      console.log("Error message: ", err.message);
-      return res.status(500).json({ message: "Failed to load data" });
-    });
-
-  return res.status(200).json(payload);
-}
-
-/*
-
-*[_type in [
-  "aksel_artikkel",
-  "komponent_artikkel",
-  "ds_artikkel",
-  "aksel_blogg",
-  "aksel_prinsipp",
-]] | score(
-  boost(heading match $term2, 7),
-  boost(heading match $term, 10),
-  boost(pt::text(content) match $term, 2),
-  boost(ingress match $term2, 2),
-  boost(pt::text(intro_komponent.body) match $term2, 3)
-) [0...10]{heading, _score}
-*/

aksel.nav.no/website/pages/eksempler/accordion/controlled-state.tsx

@@ -6,7 +6,10 @@ const Example = () => {
   const [open, setOpen] = useState(false);
   return (
     <div className="grid place-items-start gap-2">
-      <Accordion style={{ width: "100%", maxWidth: "65ch" }}>
+      <Button variant="secondary" onClick={() => setOpen(!open)}>
+        Toggle Accordion
+      </Button>
+      <Accordion>
         <Accordion.Item open={open}>
           <Accordion.Header>Til deg som er mellom 62 og 67 år</Accordion.Header>
           <Accordion.Content>
@@ -26,14 +29,11 @@ const Example = () => {
           </Accordion.Content>
         </Accordion.Item>
       </Accordion>
-      <Button variant="secondary" onClick={() => setOpen(!open)}>
-        Toggle Accordion
-      </Button>
     </div>
   );
 };
 
-export default withDsExample(Example);
+export default withDsExample(Example, "static");
 
 /* Storybook story */
 export const Demo = {

aksel.nav.no/website/pages/eksempler/accordion/default.tsx

@@ -3,7 +3,7 @@ import { withDsExample } from "components/website-modules/examples/withDsExample
 
 const Example = () => {
   return (
-    <Accordion style={{ width: "100%", maxWidth: "65ch" }}>
+    <Accordion>
       <Accordion.Item>
         <Accordion.Header>Til deg som er mellom 62 og 67 år</Accordion.Header>
         <Accordion.Content>
@@ -26,7 +26,7 @@ const Example = () => {
   );
 };
 
-export default withDsExample(Example);
+export default withDsExample(Example, "static");
 
 /* Storybook story */
 export const Demo = {

aksel.nav.no/website/pages/eksempler/expansioncard/custom.tsx

@@ -0,0 +1,95 @@
+import { ExternalLinkIcon } from "@navikt/aksel-icons";
+import { BodyLong, ExpansionCard, Label, Link } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <div className="subtle-card">
+      <ExpansionCard aria-label="Demo med custom-styling">
+        <ExpansionCard.Header>
+          <ExpansionCard.Title>Utbetaling av sykepenger</ExpansionCard.Title>
+          <ExpansionCard.Description>
+            For at yrkesskadedekningen skal gjelde, er det som hovedregel krav
+            til tid, sted og arbeidsoppgaver
+          </ExpansionCard.Description>
+        </ExpansionCard.Header>
+        <ExpansionCard.Content>
+          <Innhold />
+        </ExpansionCard.Content>
+      </ExpansionCard>
+
+      <style>{`
+        .subtle-card {
+          --ac-expansioncard-bg: var(--a-deepblue-50);
+          --ac-expansioncard-border-open-color: var(--a-border-alt-3);
+          --ac-expansioncard-border-hover-color: var(--a-border-alt-3);
+        }`}</style>
+    </div>
+  );
+};
+
+export default withDsExample(Example, "static");
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 4,
+  desc: "Tokens lar deg lett gjøre stilendringene du trenger uten å måtte overskrive css-klasser.",
+};
+
+const Innhold = () => (
+  <>
+    <Label as="p" spacing>
+      Beløpet går til arbeidsgiveren din
+    </Label>
+    <BodyLong spacing>
+      Vi har registrert at du får sykepenger fra Bedriften AS, som skal ha
+      pengene tilbake fra NAV. Selv om pengene går til arbeidsgiveren din, er vi
+      forpliktet til å vise deg informasjonen fordi det handler om deg.
+    </BodyLong>
+    <Label as="p" spacing>
+      Slik beregner vi sykepengene
+    </Label>
+    <dl className="border-border-subtle grid gap-1 border-b pb-6">
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt>Beregnet månedslønn</dt>
+        <dd>27 256 kr</dd>
+      </div>
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt>Omgregnet til årslønn</dt>
+        <dd>327 072 kr</dd>
+      </div>
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt className="font-semibold">Daglig sykepengebeløp</dt>
+        <dd>1 258 kr</dd>
+      </div>
+    </dl>
+    <dl className="pt-6">
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt>Utbetalinger totalt</dt>
+        <dd>5 dager</dd>
+      </div>
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt className="font-semibold">Sykepengebeløp</dt>
+        <dd>5 384 kr</dd>
+      </div>
+    </dl>
+    <BodyLong spacing className="mt-4">
+      * Fra dette beløpet blir det trukket skatt og eventuelt andre trekk før
+      utbetalingen.
+    </BodyLong>
+    <div className="grid w-fit gap-2">
+      <Link href="#">
+        Se tidligere utbetalinger{" "}
+        <ExternalLinkIcon aria-hidden fontSize="1.5rem" />
+      </Link>
+      <Link href="#">
+        Les mer om utregningen{" "}
+        <ExternalLinkIcon aria-hidden fontSize="1.5rem" />
+      </Link>
+    </div>
+  </>
+);

aksel.nav.no/website/pages/eksempler/expansioncard/default.tsx

@@ -0,0 +1,81 @@
+import { ExternalLinkIcon } from "@navikt/aksel-icons";
+import { BodyLong, ExpansionCard, Label, Link } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <ExpansionCard aria-label="default-demo">
+      <ExpansionCard.Header>
+        <ExpansionCard.Title>Utbetaling av sykepenger</ExpansionCard.Title>
+      </ExpansionCard.Header>
+      <ExpansionCard.Content>
+        <Innhold />
+      </ExpansionCard.Content>
+    </ExpansionCard>
+  );
+};
+
+export default withDsExample(Example, "static");
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 0,
+};
+
+const Innhold = () => (
+  <>
+    <Label as="p" spacing>
+      Beløpet går til arbeidsgiveren din
+    </Label>
+    <BodyLong spacing>
+      Vi har registrert at du får sykepenger fra Bedriften AS, som skal ha
+      pengene tilbake fra NAV. Selv om pengene går til arbeidsgiveren din, er vi
+      forpliktet til å vise deg informasjonen fordi det handler om deg.
+    </BodyLong>
+    <Label as="p" spacing>
+      Slik beregner vi sykepengene
+    </Label>
+    <dl className="border-border-subtle grid gap-1 border-b pb-6">
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt>Beregnet månedslønn</dt>
+        <dd>27 256 kr</dd>
+      </div>
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt>Omgregnet til årslønn</dt>
+        <dd>327 072 kr</dd>
+      </div>
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt className="font-semibold">Daglig sykepengebeløp</dt>
+        <dd>1 258 kr</dd>
+      </div>
+    </dl>
+    <dl className="pt-6">
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt>Utbetalinger totalt</dt>
+        <dd>5 dager</dd>
+      </div>
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt className="font-semibold">Sykepengebeløp</dt>
+        <dd>5 384 kr</dd>
+      </div>
+    </dl>
+    <BodyLong spacing className="mt-4">
+      * Fra dette beløpet blir det trukket skatt og eventuelt andre trekk før
+      utbetalingen.
+    </BodyLong>
+    <div className="grid w-fit gap-2">
+      <Link href="#">
+        Se tidligere utbetalinger{" "}
+        <ExternalLinkIcon aria-hidden fontSize="1.5rem" />
+      </Link>
+      <Link href="#">
+        Les mer om utregningen{" "}
+        <ExternalLinkIcon aria-hidden fontSize="1.5rem" />
+      </Link>
+    </div>
+  </>
+);

aksel.nav.no/website/pages/eksempler/expansioncard/description.tsx

@@ -0,0 +1,84 @@
+import { ExternalLinkIcon } from "@navikt/aksel-icons";
+import { BodyLong, ExpansionCard, Label, Link } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <ExpansionCard aria-label="Demo med description">
+      <ExpansionCard.Header>
+        <ExpansionCard.Title>Utbetaling av sykepenger</ExpansionCard.Title>
+        <ExpansionCard.Description>
+          Du er registerert som mottaker av sykepenger fra NAV
+        </ExpansionCard.Description>
+      </ExpansionCard.Header>
+      <ExpansionCard.Content>
+        <Innhold />
+      </ExpansionCard.Content>
+    </ExpansionCard>
+  );
+};
+
+export default withDsExample(Example, "static");
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 1,
+};
+
+const Innhold = () => (
+  <>
+    <Label as="p" spacing>
+      Beløpet går til arbeidsgiveren din
+    </Label>
+    <BodyLong spacing>
+      Vi har registrert at du får sykepenger fra Bedriften AS, som skal ha
+      pengene tilbake fra NAV. Selv om pengene går til arbeidsgiveren din, er vi
+      forpliktet til å vise deg informasjonen fordi det handler om deg.
+    </BodyLong>
+    <Label as="p" spacing>
+      Slik beregner vi sykepengene
+    </Label>
+    <dl className="border-border-subtle grid gap-1 border-b pb-6">
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt>Beregnet månedslønn</dt>
+        <dd>27 256 kr</dd>
+      </div>
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt>Omgregnet til årslønn</dt>
+        <dd>327 072 kr</dd>
+      </div>
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt className="font-semibold">Daglig sykepengebeløp</dt>
+        <dd>1 258 kr</dd>
+      </div>
+    </dl>
+    <dl className="pt-6">
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt>Utbetalinger totalt</dt>
+        <dd>5 dager</dd>
+      </div>
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt className="font-semibold">Sykepengebeløp</dt>
+        <dd>5 384 kr</dd>
+      </div>
+    </dl>
+    <BodyLong spacing className="mt-4">
+      * Fra dette beløpet blir det trukket skatt og eventuelt andre trekk før
+      utbetalingen.
+    </BodyLong>
+    <div className="grid w-fit gap-2">
+      <Link href="#">
+        Se tidligere utbetalinger{" "}
+        <ExternalLinkIcon aria-hidden fontSize="1.5rem" />
+      </Link>
+      <Link href="#">
+        Les mer om utregningen{" "}
+        <ExternalLinkIcon aria-hidden fontSize="1.5rem" />
+      </Link>
+    </div>
+  </>
+);

aksel.nav.no/website/pages/eksempler/expansioncard/heading-sizes.tsx

@@ -0,0 +1,105 @@
+import { ExternalLinkIcon } from "@navikt/aksel-icons";
+import { BodyLong, ExpansionCard, Label, Link } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <div className="grid gap-6">
+      <ExpansionCard aria-label="Heading-size large demo">
+        <ExpansionCard.Header>
+          <ExpansionCard.Title as="h2" size="large">
+            Utbetaling av sykepenger
+          </ExpansionCard.Title>
+        </ExpansionCard.Header>
+        <ExpansionCard.Content>
+          <Innhold />
+        </ExpansionCard.Content>
+      </ExpansionCard>
+      <ExpansionCard aria-label="Heading-size medium demo">
+        <ExpansionCard.Header>
+          <ExpansionCard.Title as="h3" size="medium">
+            Utbetaling av sykepenger
+          </ExpansionCard.Title>
+        </ExpansionCard.Header>
+        <ExpansionCard.Content>
+          <Innhold />
+        </ExpansionCard.Content>
+      </ExpansionCard>
+      <ExpansionCard aria-label="Heading-size small demo">
+        <ExpansionCard.Header>
+          <ExpansionCard.Title as="h4" size="small">
+            Utbetaling av sykepenger
+          </ExpansionCard.Title>
+        </ExpansionCard.Header>
+        <ExpansionCard.Content>
+          <Innhold />
+        </ExpansionCard.Content>
+      </ExpansionCard>
+    </div>
+  );
+};
+
+export default withDsExample(Example, "static");
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 3,
+};
+
+const Innhold = () => (
+  <>
+    <Label as="p" spacing>
+      Beløpet går til arbeidsgiveren din
+    </Label>
+    <BodyLong spacing>
+      Vi har registrert at du får sykepenger fra Bedriften AS, som skal ha
+      pengene tilbake fra NAV. Selv om pengene går til arbeidsgiveren din, er vi
+      forpliktet til å vise deg informasjonen fordi det handler om deg.
+    </BodyLong>
+    <Label as="p" spacing>
+      Slik beregner vi sykepengene
+    </Label>
+    <dl className="border-border-subtle grid gap-1 border-b pb-6">
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt>Beregnet månedslønn</dt>
+        <dd>27 256 kr</dd>
+      </div>
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt>Omgregnet til årslønn</dt>
+        <dd>327 072 kr</dd>
+      </div>
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt className="font-semibold">Daglig sykepengebeløp</dt>
+        <dd>1 258 kr</dd>
+      </div>
+    </dl>
+    <dl className="pt-6">
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt>Utbetalinger totalt</dt>
+        <dd>5 dager</dd>
+      </div>
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt className="font-semibold">Sykepengebeløp</dt>
+        <dd>5 384 kr</dd>
+      </div>
+    </dl>
+    <BodyLong spacing className="mt-4">
+      * Fra dette beløpet blir det trukket skatt og eventuelt andre trekk før
+      utbetalingen.
+    </BodyLong>
+    <div className="grid w-fit gap-2">
+      <Link href="#">
+        Se tidligere utbetalinger{" "}
+        <ExternalLinkIcon aria-hidden fontSize="1.5rem" />
+      </Link>
+      <Link href="#">
+        Les mer om utregningen{" "}
+        <ExternalLinkIcon aria-hidden fontSize="1.5rem" />
+      </Link>
+    </div>
+  </>
+);

aksel.nav.no/website/pages/eksempler/expansioncard/icon.tsx

@@ -0,0 +1,110 @@
+import { ExternalLinkIcon, PlantIcon } from "@navikt/aksel-icons";
+import { BodyLong, ExpansionCard, Label, Link } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <div className="subtle-card">
+      <ExpansionCard aria-label="Demo med custom-styling">
+        <ExpansionCard.Header>
+          <div className="with-icon">
+            <div className="icon">
+              <PlantIcon aria-hidden />
+            </div>
+            <div>
+              <ExpansionCard.Title>
+                Utbetaling av sykepenger
+              </ExpansionCard.Title>
+              <ExpansionCard.Description>
+                For at yrkesskadedekningen skal gjelde, er det som hovedregel
+                krav til tid, sted og arbeidsoppgaver
+              </ExpansionCard.Description>
+            </div>
+          </div>
+        </ExpansionCard.Header>
+        <ExpansionCard.Content>
+          <Innhold />
+        </ExpansionCard.Content>
+      </ExpansionCard>
+
+      <style>{`
+        .with-icon {
+          display: flex;
+          align-items: center;
+          gap: 1rem;
+        }
+        .icon {
+          font-size: 3rem;
+          flex-shrink: 0;
+          display: grid;
+          place-content: center;
+        }`}</style>
+    </div>
+  );
+};
+
+export default withDsExample(Example, "static");
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+  desc: "Man kan manuelt legge til ikoner eller illustrasjoner med egen styling.",
+};
+
+export const args = {
+  index: 5,
+};
+
+const Innhold = () => (
+  <>
+    <Label as="p" spacing>
+      Beløpet går til arbeidsgiveren din
+    </Label>
+    <BodyLong spacing>
+      Vi har registrert at du får sykepenger fra Bedriften AS, som skal ha
+      pengene tilbake fra NAV. Selv om pengene går til arbeidsgiveren din, er vi
+      forpliktet til å vise deg informasjonen fordi det handler om deg.
+    </BodyLong>
+    <Label as="p" spacing>
+      Slik beregner vi sykepengene
+    </Label>
+    <dl className="border-border-subtle grid gap-1 border-b pb-6">
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt>Beregnet månedslønn</dt>
+        <dd>27 256 kr</dd>
+      </div>
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt>Omgregnet til årslønn</dt>
+        <dd>327 072 kr</dd>
+      </div>
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt className="font-semibold">Daglig sykepengebeløp</dt>
+        <dd>1 258 kr</dd>
+      </div>
+    </dl>
+    <dl className="pt-6">
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt>Utbetalinger totalt</dt>
+        <dd>5 dager</dd>
+      </div>
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt className="font-semibold">Sykepengebeløp</dt>
+        <dd>5 384 kr</dd>
+      </div>
+    </dl>
+    <BodyLong spacing className="mt-4">
+      * Fra dette beløpet blir det trukket skatt og eventuelt andre trekk før
+      utbetalingen.
+    </BodyLong>
+    <div className="grid w-fit gap-2">
+      <Link href="#">
+        Se tidligere utbetalinger{" "}
+        <ExternalLinkIcon aria-hidden fontSize="1.5rem" />
+      </Link>
+      <Link href="#">
+        Les mer om utregningen{" "}
+        <ExternalLinkIcon aria-hidden fontSize="1.5rem" />
+      </Link>
+    </div>
+  </>
+);

aksel.nav.no/website/pages/eksempler/expansioncard/small.tsx

@@ -0,0 +1,94 @@
+import { ExternalLinkIcon } from "@navikt/aksel-icons";
+import { BodyLong, ExpansionCard, Label, Link } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <div className="grid gap-6">
+      <ExpansionCard size="small" aria-label="Small-variant">
+        <ExpansionCard.Header>
+          <ExpansionCard.Title>Utbetaling av sykepenger</ExpansionCard.Title>
+        </ExpansionCard.Header>
+        <ExpansionCard.Content>
+          <Innhold />
+        </ExpansionCard.Content>
+      </ExpansionCard>
+      <ExpansionCard size="small" aria-label="Small-variant med description">
+        <ExpansionCard.Header>
+          <ExpansionCard.Title>Utbetaling av sykepenger</ExpansionCard.Title>
+          <ExpansionCard.Description>
+            Du er registerert som mottaker av sykepenger fra NAV
+          </ExpansionCard.Description>
+        </ExpansionCard.Header>
+        <ExpansionCard.Content>
+          <Innhold />
+        </ExpansionCard.Content>
+      </ExpansionCard>
+    </div>
+  );
+};
+
+export default withDsExample(Example, "static");
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 2,
+};
+
+const Innhold = () => (
+  <>
+    <Label as="p" spacing>
+      Beløpet går til arbeidsgiveren din
+    </Label>
+    <BodyLong spacing>
+      Vi har registrert at du får sykepenger fra Bedriften AS, som skal ha
+      pengene tilbake fra NAV. Selv om pengene går til arbeidsgiveren din, er vi
+      forpliktet til å vise deg informasjonen fordi det handler om deg.
+    </BodyLong>
+    <Label as="p" spacing>
+      Slik beregner vi sykepengene
+    </Label>
+    <dl className="border-border-subtle grid gap-1 border-b pb-6">
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt>Beregnet månedslønn</dt>
+        <dd>27 256 kr</dd>
+      </div>
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt>Omgregnet til årslønn</dt>
+        <dd>327 072 kr</dd>
+      </div>
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt className="font-semibold">Daglig sykepengebeløp</dt>
+        <dd>1 258 kr</dd>
+      </div>
+    </dl>
+    <dl className="pt-6">
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt>Utbetalinger totalt</dt>
+        <dd>5 dager</dd>
+      </div>
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt className="font-semibold">Sykepengebeløp</dt>
+        <dd>5 384 kr</dd>
+      </div>
+    </dl>
+    <BodyLong spacing className="mt-4">
+      * Fra dette beløpet blir det trukket skatt og eventuelt andre trekk før
+      utbetalingen.
+    </BodyLong>
+    <div className="grid w-fit gap-2">
+      <Link href="#">
+        Se tidligere utbetalinger{" "}
+        <ExternalLinkIcon aria-hidden fontSize="1.5rem" />
+      </Link>
+      <Link href="#">
+        Les mer om utregningen{" "}
+        <ExternalLinkIcon aria-hidden fontSize="1.5rem" />
+      </Link>
+    </div>
+  </>
+);

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

@@ -57,7 +57,7 @@ const Artikler = ({ articles }: ArtiklerProps) => {
         >
           <div className="relative grid overflow-x-clip pb-40">
             <AkselCubeStatic className="text-deepblue-300 opacity-5 " />
-            <div className="dynamic-wrapper centered-layout">
+            <div className="dynamic-wrapper mx-auto w-full px-4 sm:px-6">
               <Heading
                 level="1"
                 size="xlarge"

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

@@ -8,7 +8,6 @@ import { Header } from "components/layout/header/Header";
 import ArtikkelCard from "components/sanity-modules/cards/ArtikkelCard";
 import GodPraksisCard from "components/sanity-modules/cards/GodPraksisCard";
 import { AkselCubeStatic } from "components/website-modules/cube";
-import { ToolCard } from "components/website-modules/ToolsCard";
 import { PreviewSuspense } from "next-sanity/preview";
 import Head from "next/head";
 import React, { lazy } from "react";
@@ -65,7 +64,7 @@ const Page = ({ temaer, page, resent }: PageProps): JSX.Element => {
           id="hovedinnhold"
           className=" min-h-[80vh]  focus:outline-none"
         >
-          <div className="centered-layout mb-40 grid max-w-screen-2xl pt-20">
+          <div className="mx-auto mb-40 grid w-full max-w-screen-2xl px-4 pt-20 sm:px-6">
             <Heading
               level="1"
               size="xlarge"
@@ -96,7 +95,7 @@ const Page = ({ temaer, page, resent }: PageProps): JSX.Element => {
                 size="medium"
                 className="text-deepblue-800 flex items-center gap-4"
               >
-                <Clock aria-hidden className="shrink-0" /> Nylige artikler
+                <Clock aria-hidden className="shrink-0" /> Nyeste artikler
               </Heading>
               <div className="card-grid-3-1 my-6">
                 {resent.map((art: any) => (
@@ -109,9 +108,6 @@ const Page = ({ temaer, page, resent }: PageProps): JSX.Element => {
                 ))}
               </div>
             </div>
-            <div className="mt-20">
-              <ToolCard />
-            </div>
           </div>
         </main>
         <Footer />

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

@@ -1,7 +1,9 @@
 /* eslint-disable @next/next/no-img-element */
 import { Footer } from "@/layout";
+
 import { akselForsideQuery, SanityT, urlFor } from "@/lib";
 import { getClient } from "@/sanity-client";
+import { AkselBloggDocT, ResolveContributorsT, ResolveSlugT } from "@/types";
 import {
   CompassIcon,
   ComponentIcon,
@@ -12,21 +14,20 @@ import {
 import { Heading, Ingress } from "@navikt/ds-react";
 import cl from "clsx";
 import { Header } from "components/layout/header/Header";
-import ArtikkelCard from "components/sanity-modules/cards/ArtikkelCard";
 import GodPraksisCardSimple from "components/sanity-modules/cards/GodPraksisCardSimple";
-import AkselLink from "components/website-modules/AkselLink";
 import { AkselCube } from "components/website-modules/cube";
 import { IntroCards } from "components/website-modules/IntroCards";
-import { LatestBloggposts } from "components/website-modules/LatestBloggs";
-import { ToolCard } from "components/website-modules/ToolsCard";
 import { PrefersReducedMotion } from "components/website-modules/utils/prefers-reduced-motion";
 import { PreviewSuspense } from "next-sanity/preview";
 import Head from "next/head";
 import { lazy, useEffect, useState } from "react";
+import FrontpageBlock, {
+  BlocksT,
+} from "components/sanity-modules/frontpage-blocks/FrontpageBlocks";
 
 const WithPreview = lazy(() => import("../components/WithPreview"));
 
-const Forside = ({ page, tema, bloggs, resent }: PageProps): JSX.Element => {
+const Forside = ({ page, tema, blocks }: PageProps): JSX.Element => {
   const [pause, setPause] = useState(false);
   const [reducedMotion, setReducedMotion] = useState(false);
 
@@ -103,7 +104,7 @@ const Forside = ({ page, tema, bloggs, resent }: PageProps): JSX.Element => {
 
         <main tabIndex={-1} id="hovedinnhold" className="focus:outline-none">
           <div className="z-20 pb-28">
-            <div className="centered-layout relative mb-12 mt-20 grid place-items-center text-center sm:mt-36 sm:max-w-[632px]">
+            <div className="relative mx-auto mb-12 mt-20 grid w-full place-items-center px-4 text-center sm:mt-36 sm:max-w-[632px] sm:px-6">
               <Heading
                 level="1"
                 size="xlarge"
@@ -135,12 +136,13 @@ const Forside = ({ page, tema, bloggs, resent }: PageProps): JSX.Element => {
                   href: "/ikoner",
                 },
               ]}
-              className="centered-layout mb-40 max-w-md grid-cols-1 sm:mb-36 md:max-w-screen-lg md:grid-cols-3"
+              className="mx-auto mb-40 w-full max-w-md grid-cols-1 px-4 sm:mb-36 sm:px-6 md:max-w-screen-lg md:grid-cols-3"
               variant="forside"
             />
           </div>
-          <div className="bg-surface-subtle min-h-96 relative pb-72 md:pb-40">
-            <div className="centered-layout grid max-w-screen-2xl">
+
+          <div className="bg-surface-subtle min-h-96 relative pb-20">
+            <div className="mx-auto grid w-full max-w-screen-2xl px-4 sm:px-6">
               {/* God praksis */}
               <div className="bg-surface-default ring-border-subtle mx-auto w-full -translate-y-48 rounded-2xl px-4 py-12 ring-1 sm:-translate-y-32 sm:px-12 sm:py-20">
                 {!reducedMotion && (
@@ -167,7 +169,7 @@ const Forside = ({ page, tema, bloggs, resent }: PageProps): JSX.Element => {
                     )}
                   </button>
                 )}
-                <div>
+                <div className="px-2 sm:px-6">
                   <Heading
                     level="2"
                     size="xlarge"
@@ -189,40 +191,11 @@ const Forside = ({ page, tema, bloggs, resent }: PageProps): JSX.Element => {
               </div>
 
               <div className="-mt-24 sm:-mt-12">
-                <Heading level="3" size="medium" className="text-deepblue-800">
-                  Siste fra God praksis
-                </Heading>
-                <div className="card-grid-3-1 my-6">
-                  {resent.map((art: any) => (
-                    <ArtikkelCard
-                      level="4"
-                      variant="tema"
-                      {...art}
-                      key={art._id}
-                    />
-                  ))}
-                </div>
-                <AkselLink href="/god-praksis/artikler">
-                  Utforsk alle artikler i God praksis
-                </AkselLink>
+                <FrontpageBlock blocks={blocks} />
               </div>
             </div>
           </div>
-          <div className="bg-surface-default relative pb-36">
-            <div className="centered-layout -translate-y-1/2">
-              <ToolCard />
-            </div>
-            <div className="centered-layout -mt-16 grid max-w-screen-2xl md:mt-8 ">
-              <LatestBloggposts
-                bloggs={bloggs}
-                title="Siste fra bloggen"
-                variant="forside"
-                level="2"
-              />
-            </div>
-          </div>
         </main>
-
         <Footer />
       </div>
     </>
@@ -243,12 +216,7 @@ const Page = (props: PageProps): JSX.Element => {
 
 interface PageProps {
   tema: SanityT.Schema.aksel_tema[];
-  bloggs: Partial<
-    SanityT.Schema.aksel_blogg & {
-      slug: string;
-      contributors?: { title?: string }[];
-    }
-  >[];
+  bloggs: ResolveContributorsT<ResolveSlugT<AkselBloggDocT>>[];
   page: {
     title: string;
     god_praksis_intro: string;
@@ -260,6 +228,7 @@ interface PageProps {
       tema: string[];
       contributors?: { title?: string }[];
     }[];
+  blocks?: BlocksT[];
   slug: string;
   preview: boolean;
 }
@@ -273,17 +242,15 @@ export const getStaticProps = async ({
 
   const {
     page = null,
-    bloggs = null,
     tema = null,
-    resent = null,
+    blocks = null,
   } = await client.fetch(akselForsideQuery);
 
   return {
     props: {
       tema,
-      bloggs,
       page,
-      resent,
+      blocks,
       slug: "/",
       preview,
       id: page?._id ?? "",

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

@@ -97,6 +97,8 @@ const Page = ({
       ? "komponent-ny"
       : null;
 
+  const unsafe = page?.status?.unsafe;
+
   return (
     <>
       <Head>
@@ -235,7 +237,11 @@ const Page = ({
           )}
         </BodyShort>
         {tag && (
-          <SuggestionBlock variant={tag} reference={`<${page?.heading} />`} />
+          <SuggestionBlock
+            variant={tag}
+            unsafe={unsafe}
+            reference={`<${page?.heading} />`}
+          />
         )}
         <IntroSeksjon node={page?.intro} />
         {page?.status?.tag === "ready" && (

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

@@ -1,6 +1,12 @@
-import { akselBloggBySlug, SanityT, urlFor } from "@/lib";
+import { contributorsAll, destructureBlocks, urlFor } from "@/lib";
 import { SanityBlockContent } from "@/sanity-block";
 import { getClient } from "@/sanity-client";
+import {
+  AkselBloggDocT,
+  NextPageT,
+  ResolveContributorsT,
+  ResolveSlugT,
+} from "@/types";
 import { abbrName, dateStr } from "@/utils";
 import { BodyShort, Detail, Heading, Ingress } from "@navikt/ds-react";
 import Footer from "components/layout/footer/Footer";
@@ -18,22 +24,53 @@ import { GetServerSideProps } from "next/types";
 import { lazy } from "react";
 import NotFotfund from "../404";
 
-const Page = ({
-  blogg,
-  morePosts,
-}: {
-  slug?: string;
-  blogg: SanityT.Schema.aksel_blogg;
-  morePosts: Partial<
-    SanityT.Schema.aksel_blogg & {
-      slug: string;
-      contributors?: {
-        title?: string;
-      }[];
-    }
-  >[];
-  preview: boolean;
-}): JSX.Element => {
+type PageProps = NextPageT<{
+  blogg: ResolveContributorsT<ResolveSlugT<AkselBloggDocT>>;
+  morePosts: ResolveContributorsT<ResolveSlugT<AkselBloggDocT>>[];
+}>;
+
+export const query = `{
+  "blogg": *[slug.current == $slug && _type == "aksel_blogg"] | order(_updatedAt desc)[0]
+  {
+    ...,
+    "slug": slug.current,
+    content[]{
+      ...,
+      ${destructureBlocks}
+    },
+    ${contributorsAll}
+  },
+  "morePosts": *[_type == "aksel_blogg" && slug.current != $slug] | order(publishedAt desc, _updatedAt desc)[0...3] {
+    "slug": slug.current,
+    heading,
+    _createdAt,
+    _id,
+    ingress,
+    ${contributorsAll},
+  }
+}`;
+
+export const getServerSideProps: GetServerSideProps = async (
+  context
+): Promise<PageProps> => {
+  const { blogg, morePosts } = await getClient().fetch(query, {
+    slug: `produktbloggen/${context.params.slug}`,
+  });
+
+  return {
+    props: {
+      blogg,
+      morePosts,
+      slug: context.params.slug as string,
+      preview: context.preview ?? false,
+      id: blogg?._id ?? "",
+      title: blogg?.heading ?? "",
+    },
+    notFound: !blogg && !context.preview,
+  };
+};
+
+const Page = ({ blogg, morePosts }: PageProps["props"]) => {
   if (!blogg) {
     return <NotFotfund />;
   }
@@ -95,7 +132,7 @@ const Page = ({
             <Heading
               level="1"
               size="xlarge"
-              className="hyphen text-deepblue-800 mt-1 break-words text-5xl leading-[1.2]"
+              className="text-deepblue-800 mt-1 break-words text-5xl leading-[1.2] [hyphens:_auto]"
             >
               {blogg.heading}
             </Heading>
@@ -224,9 +261,9 @@ const Wrapper = (props: any): JSX.Element => {
       <PreviewSuspense fallback={<Page {...props} />}>
         <WithPreview
           comp={Page}
-          query={akselBloggBySlug}
+          query={query}
           props={props}
-          params={{ slug: `produktbloggen/${props.slug}`, valid: "true" }}
+          params={{ slug: `produktbloggen/${props.slug}` }}
         />
       </PreviewSuspense>
     );
@@ -236,44 +273,3 @@ const Wrapper = (props: any): JSX.Element => {
 };
 
 export default Wrapper;
-
-interface StaticProps {
-  props: {
-    blogg: SanityT.Schema.aksel_blogg;
-    morePosts: Partial<
-      SanityT.Schema.aksel_blogg & {
-        slug: string;
-        contributors?: {
-          title?: string;
-        }[];
-      }
-    >[];
-    slug: string;
-    preview: boolean;
-    validUser?: boolean;
-    id?: string;
-    title: string;
-  };
-  notFound: boolean;
-}
-
-export const getServerSideProps: GetServerSideProps = async (
-  context
-): Promise<StaticProps | { notFound: true }> => {
-  const { blogg, morePosts } = await getClient().fetch(akselBloggBySlug, {
-    slug: `produktbloggen/${context.params.slug}`,
-    valid: "true",
-  });
-
-  return {
-    props: {
-      blogg,
-      morePosts,
-      slug: context.params.slug as string,
-      preview: context.preview ?? false,
-      id: blogg?._id ?? "",
-      title: blogg?.heading ?? "",
-    },
-    notFound: !blogg && !context.preview,
-  };
-};

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

@@ -1,6 +1,13 @@
 import { Footer } from "@/layout";
-import { akselBloggPosts, SanityT, urlFor } from "@/lib";
+import { contributorsAll, destructureBlocks, urlFor } from "@/lib";
 import { getClient } from "@/sanity-client";
+import {
+  AkselBloggDocT,
+  AkselBloggFrontpageT,
+  NextPageT,
+  ResolveContributorsT,
+  ResolveSlugT,
+} from "@/types";
 import { Heading } from "@navikt/ds-react";
 import { Header } from "components/layout/header/Header";
 import BloggCard from "components/sanity-modules/cards/BloggCard";
@@ -12,7 +19,46 @@ import Head from "next/head";
 import { lazy } from "react";
 import NotFotfund from "../404";
 
-const Page = (props: PageProps): JSX.Element => {
+type PageProps = NextPageT<{
+  page: AkselBloggFrontpageT;
+  bloggposts: ResolveContributorsT<ResolveSlugT<AkselBloggDocT>>[];
+}>;
+
+export const query = `*[_type == "blogg_landingsside"][0]{
+  "page": {..., intro[]{...,${destructureBlocks}}},
+  "bloggposts": *[_type == "aksel_blogg"] | order(_createdAt desc){
+    seo,
+    heading,
+    ingress,
+    publishedAt,
+    _createdAt,
+    _id,
+    "slug": slug.current,
+    ${contributorsAll}
+  }
+}`;
+
+export const getStaticProps = async ({
+  preview = false,
+}: {
+  preview?: boolean;
+}): Promise<PageProps> => {
+  const { bloggposts, page } = await getClient().fetch(query);
+
+  return {
+    props: {
+      page,
+      bloggposts,
+      preview,
+      title: "Forside Blogg",
+      id: page?._id ?? "",
+    },
+    notFound: !bloggposts && !preview,
+    revalidate: 60,
+  };
+};
+
+const Page = (props: PageProps["props"]): JSX.Element => {
   if (!props.bloggposts) {
     return <NotFotfund />;
   }
@@ -57,7 +103,7 @@ const Page = (props: PageProps): JSX.Element => {
           className="relative min-h-[80vh] overflow-hidden focus:outline-none"
         >
           <AkselCubeStatic className="text-[#FFE78A] opacity-10" />
-          <div className="centered-layout mb-40 grid max-w-screen-2xl">
+          <div className="mx-auto mb-40 grid w-full max-w-screen-2xl px-4 sm:px-6">
             <LatestBloggposts
               bloggs={props?.bloggposts}
               title="Blogg"
@@ -93,7 +139,7 @@ const Wrapper = (props: any): JSX.Element => {
   if (props?.preview) {
     return (
       <PreviewSuspense fallback={<Page {...props} />}>
-        <WithPreview comp={Page} query={akselBloggPosts} props={props} />
+        <WithPreview comp={Page} query={query} props={props} />
       </PreviewSuspense>
     );
   }
@@ -102,42 +148,3 @@ const Wrapper = (props: any): JSX.Element => {
 };
 
 export default Wrapper;
-
-export type AkselBloggPage = Partial<
-  SanityT.Schema.aksel_blogg & {
-    slug: string;
-    contributors?: { title?: string }[];
-  }
->;
-
-interface PageProps {
-  bloggposts: AkselBloggPage[];
-  page: any;
-  preview: boolean;
-  title: string;
-}
-
-interface StaticProps {
-  props: PageProps;
-  notFound: boolean;
-  revalidate: number;
-}
-
-export const getStaticProps = async ({
-  preview = false,
-}: {
-  preview?: boolean;
-}): Promise<StaticProps | { notFound: true }> => {
-  const { bloggposts, page } = await getClient().fetch(akselBloggPosts);
-
-  return {
-    props: {
-      page,
-      bloggposts,
-      preview,
-      title: "Forside Blogg",
-    },
-    notFound: !bloggposts && !preview,
-    revalidate: 60,
-  };
-};

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

@@ -1,5 +1,4 @@
 import { TableOfContents } from "@/components";
-import { akselStandaloneBySlug, SanityT } from "@/lib";
 import { SanityBlockContent } from "@/sanity-block";
 import { getClient } from "@/sanity-client";
 import { Heading } from "@navikt/ds-react";
@@ -9,15 +8,45 @@ import { PreviewSuspense } from "next-sanity/preview";
 import Head from "next/head";
 import { GetServerSideProps } from "next/types";
 import React, { lazy } from "react";
+import { AkselStandaloneDocT, NextPageT, ResolveSlugT } from "@/types";
 import NotFotfund from "../404";
+import { destructureBlocks } from "lib/sanity/queries";
 
-const Page = ({
-  page,
-}: {
-  slug?: string;
-  page: SanityT.Schema.aksel_standalone;
-  preview: boolean;
-}): JSX.Element => {
+type PageProps = NextPageT<{ page: ResolveSlugT<AkselStandaloneDocT> }>;
+
+export const query = `{
+  "page": *[slug.current == $slug && _type == "aksel_standalone"] | order(_updatedAt desc)[0]
+  {
+    ...,
+    "slug": slug.current,
+    content[]{
+      ...,
+      ${destructureBlocks}
+    }
+  }
+}`;
+
+export const getServerSideProps: GetServerSideProps = async (
+  context
+): Promise<PageProps> => {
+  const { page } = await getClient().fetch(query, {
+    slug: `side/${context.params.slug}`,
+  });
+
+  return {
+    props: {
+      page,
+      slug: context.params.slug as string,
+      preview: context.preview ?? false,
+      id: page?._id ?? "",
+      title: page?.heading ?? "",
+    },
+    notFound: !page && !context.preview,
+  };
+};
+
+/* Standalone-sider */
+const Page = ({ page }: PageProps["props"]) => {
   if (!page) {
     return <NotFotfund />;
   }
@@ -74,7 +103,7 @@ const Wrapper = (props: any): JSX.Element => {
       <PreviewSuspense fallback={<Page {...props} />}>
         <WithPreview
           comp={Page}
-          query={akselStandaloneBySlug}
+          query={query}
           props={props}
           params={{
             slug: `side/${props.slug}`,
@@ -88,34 +117,3 @@ const Wrapper = (props: any): JSX.Element => {
 };
 
 export default Wrapper;
-
-interface StaticProps {
-  props: {
-    page: SanityT.Schema.aksel_standalone;
-    slug: string;
-    preview: boolean;
-    validUser?: boolean;
-    id: string;
-    title: string;
-  };
-  notFound: boolean;
-}
-
-export const getServerSideProps: GetServerSideProps = async (
-  context
-): Promise<StaticProps | { notFound: true }> => {
-  const { page } = await getClient().fetch(akselStandaloneBySlug, {
-    slug: `side/${context.params.slug}`,
-  });
-
-  return {
-    props: {
-      page,
-      slug: context.params.slug as string,
-      preview: context.preview ?? false,
-      id: page?._id ?? "",
-      title: page?.heading ?? "",
-    },
-    notFound: !page && !context.preview,
-  };
-};

aksel.nav.no/website/public/images/navlogo.svg

@@ -1,61 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg
-  width="269px"
-  height="169px"
-  viewBox="0 0 269 169"
-  version="1.1"
-  xmlns="http://www.w3.org/2000/svg"
-  xmlns:xlink="http://www.w3.org/1999/xlink"
->
-  <title>NAV logo / rød</title>
-  <defs>
-    <polygon
-      id="path-1"
-      points="22.407 43.4168 22.407 0.6878 0.5635 0.6878 0.5635 43.4168 22.407 43.4168"
-    ></polygon>
-  </defs>
-  <g
-    id="Modul-forslag"
-    stroke="none"
-    stroke-width="1"
-    fill="none"
-    fill-rule="evenodd"
-  >
-    <g id="NAV-logo-/-rød">
-      <g id="Page-1-Copy">
-        <path
-          d="M125.3091,168.942 C78.6681,168.942 40.8491,131.125 40.8491,84.477 C40.8491,37.824 78.6681,0 125.3091,0 C171.9671,0 209.7901,37.824 209.7901,84.477 C209.7901,131.125 171.9671,168.942 125.3091,168.942 Z"
-          id="Fill-1"
-          fill="#C30000"
-        ></path>
-        <polygon
-          id="Fill-3"
-          fill="#C30000"
-          points="0 121.3588 17.265 78.6298 33.854 78.6298 16.611 121.3588"
-        ></polygon>
-        <polygon
-          id="Fill-5"
-          fill="#C30000"
-          points="213.044 121.3588 230.088 78.6298 239.132 78.6298 222.089 121.3588"
-        ></polygon>
-        <g id="Group-9" transform="translate(246.000000, 77.942000)">
-          <mask id="mask-2" fill="white">
-            <use xlink:href="#path-1"></use>
-          </mask>
-          <g id="Clip-8"></g>
-          <polygon
-            id="Fill-7"
-            fill="#C30000"
-            mask="url(#mask-2)"
-            points="0.5635 43.4168 17.6045 0.6878 22.4075 0.6878 5.3645 43.4168"
-          ></polygon>
-        </g>
-        <path
-          d="M197.3604,78.6298 L182.3444,78.6298 C182.3444,78.6298 181.3094,78.6298 180.9434,79.5438 L172.6334,104.9828 L164.3304,79.5438 C163.9644,78.6298 162.9234,78.6298 162.9234,78.6298 L134.0514,78.6298 C133.4264,78.6298 132.9024,79.1518 132.9024,79.7728 L132.9024,88.4118 C132.9024,81.5588 125.6104,78.6298 121.3404,78.6298 C111.7784,78.6298 105.3774,84.9278 103.3844,94.5028 C103.2764,88.1508 102.7484,85.8748 101.0374,83.5438 C100.2514,82.4018 99.1154,81.4418 97.8784,80.6478 C95.3314,79.1558 93.0444,78.6298 88.1294,78.6298 L82.3584,78.6298 C82.3584,78.6298 81.3154,78.6298 80.9474,79.5438 L75.6964,92.5568 L75.6964,79.7728 C75.6964,79.1518 75.1764,78.6298 74.5524,78.6298 L61.1984,78.6298 C61.1984,78.6298 60.1674,78.6298 59.7924,79.5438 L54.3334,93.0748 C54.3334,93.0748 53.7884,94.4278 55.0344,94.4278 L60.1674,94.4278 L60.1674,120.2118 C60.1674,120.8518 60.6714,121.3588 61.3144,121.3588 L74.5524,121.3588 C75.1764,121.3588 75.6964,120.8518 75.6964,120.2118 L75.6964,94.4278 L80.8564,94.4278 C83.8174,94.4278 84.4444,94.5088 85.5964,95.0458 C86.2904,95.3078 86.9154,95.8378 87.2564,96.4488 C87.9544,97.7628 88.1294,99.3408 88.1294,103.9938 L88.1294,120.2118 C88.1294,120.8518 88.6434,121.3588 89.2784,121.3588 L101.9664,121.3588 C101.9664,121.3588 103.4004,121.3588 103.9674,119.9428 L106.7794,112.9928 C110.5184,118.2298 116.6724,121.3588 124.3204,121.3588 L125.9914,121.3588 C125.9914,121.3588 127.4344,121.3588 128.0054,119.9428 L132.9024,107.8148 L132.9024,120.2118 C132.9024,120.8518 133.4264,121.3588 134.0514,121.3588 L147.0034,121.3588 C147.0034,121.3588 148.4324,121.3588 149.0064,119.9428 C149.0064,119.9428 154.1864,107.0818 154.2064,106.9848 L154.2144,106.9848 C154.4134,105.9148 153.0614,105.9148 153.0614,105.9148 L148.4384,105.9148 L148.4384,83.8468 L162.9834,119.9428 C163.5514,121.3588 164.9834,121.3588 164.9834,121.3588 L180.2844,121.3588 C180.2844,121.3588 181.7244,121.3588 182.2924,119.9428 L198.4174,80.0138 C198.9754,78.6298 197.3604,78.6298 197.3604,78.6298 L197.3604,78.6298 Z M132.9024,105.9148 L124.2024,105.9148 C120.7394,105.9148 117.9224,103.1108 117.9224,99.6438 C117.9224,96.1828 120.7394,93.3608 124.2024,93.3608 L126.6354,93.3608 C130.0894,93.3608 132.9024,96.1828 132.9024,99.6438 L132.9024,105.9148 Z"
-          id="Fill-10"
-          fill="#FEFEFE"
-        ></path>
-      </g>
-    </g>
-  </g>
-</svg>

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

@@ -4,6 +4,7 @@ export const allArticleDocuments = [
   "aksel_artikkel",
   "aksel_blogg",
   "aksel_prinsipp",
+  "aksel_standalone",
 ] as const;
 
 export const previews = [
@@ -33,7 +34,6 @@ export const komponentKategorier = [
 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" },
@@ -45,7 +45,7 @@ export const bloggKategorier = [
   { title: "Nytt fra teamene", value: "nytt-fra-teamene" },
   { title: "Da vi gjorde dette", value: "da-vi-gjorde-dette" },
   { title: "På reise", value: "pa-reise" },
-];
+] as const;
 
 export const prinsippKategorier = [
   { title: "Brukeropplevelse", value: "brukeropplevelse" },