Version Packages (#1871)

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

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/aksel-icons
 
+## 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.2",
   "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/codemod/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/ds-codemod
 
+## 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.2",
   "description": "Aksel codemods for NAVs designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",

@navikt/community/navno/package.json

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

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @navikt/ds-css
 
+## 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.2",
   "description": "CSS for NAV Designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -20,7 +20,7 @@
     "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^2.7.8",
+    "@navikt/ds-tokens": "^2.8.2",
     "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,37 @@
 # @navikt/ds-react
 
+## 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.2",
   "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.2",
+    "@navikt/ds-icons": "^2.8.2",
     "@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/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/tailwind/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/ds-tailwind
 
+## 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.2",
   "description": "Tailwind config based on @navikt/ds-tokens",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -22,7 +22,7 @@
     "directory": "@navikt/core/tailwind"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^2.7.8",
+    "@navikt/ds-tokens": "^2.8.2",
     "@types/jest": "^29.0.0",
     "color": "4.2.3",
     "jest": "^29.0.0",

@navikt/core/tokens/CHANGELOG.md

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

@navikt/icons/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/ds-icons
 
+## 2.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.2",
   "description": "Aksel icons for NAV",
   "author": "Aksel | NAV designsystem team",
   "repository": {

@navikt/internal/css/CHANGELOG.md

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

@navikt/internal/react/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @navikt/ds-react-internal
 
+## 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.2",
   "description": "Aksel react components for internal UIs in NAV",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -35,8 +35,8 @@
     "watch": "tsc --watch -p tsconfig.esm.json"
   },
   "dependencies": {
-    "@navikt/ds-icons": "^2.7.8",
-    "@navikt/ds-react": "^2.7.8",
+    "@navikt/ds-icons": "^2.8.2",
+    "@navikt/ds-react": "^2.8.2",
     "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.2",
+    "@navikt/ds-codemod": "^2.8.2",
+    "@navikt/ds-css": "^2.8.2",
+    "@navikt/ds-css-internal": "^2.8.2",
+    "@navikt/ds-icons": "^2.8.2",
+    "@navikt/ds-react": "^2.8.2",
+    "@navikt/ds-react-internal": "^2.8.2",
+    "@navikt/ds-tailwind": "^2.8.2",
+    "@navikt/ds-tokens": "^2.8.2"
   },
   "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 />

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/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/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/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/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>
@@ -165,7 +185,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

@@ -90,6 +90,13 @@ const defaultBlock = `
       ${markDef}
     }
  },
+ _type == "expansioncard" =>{
+    ...,
+    body[]{
+      ...,
+      ${markDef}
+    }
+ },
  _type == "kode" =>{
     ...,
     "ref": ref->{...},

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",
@@ -53,7 +53,7 @@
     "react-dom": "^18.0.0",
     "react-modal": "3.15.1",
     "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/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/index.tsx

@@ -167,7 +167,7 @@ const Forside = ({ page, tema, bloggs, resent }: PageProps): JSX.Element => {
                     )}
                   </button>
                 )}
-                <div>
+                <div className="px-2 sm:px-6">
                   <Heading
                     level="2"
                     size="xlarge"

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/sanity/schema/documents/komponenter/artikkel.tsx

@@ -59,11 +59,18 @@ export const KomponentArtikkel = defineType({
           },
           validation: (Rule) => Rule.required(),
         },
-        {
+        defineField({
+          name: "unsafe",
+          title: "Unsafe",
+          description: "Er komponenten Beta + UNSAFE-prefikset?",
+          type: "boolean",
+          hidden: ({ parent }) => !(parent?.tag === "beta"),
+        }),
+        defineField({
           name: "bilde",
           title: "Thumbnail",
           type: "image",
-        },
+        }),
       ],
       options: {
         collapsible: true,

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

@@ -52,6 +52,7 @@ export const schema: SchemaPluginOptions = {
     object.Video,
     object.Accordion,
     object.Alert,
+    object.ExpansionCard,
     object.Tips,
     object.UnikSidemodul,
 

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

@@ -9,6 +9,7 @@ export * from "./shared/accordion";
 export * from "./shared/alert";
 export * from "./shared/bilde";
 export * from "./shared/dodont";
+export * from "./shared/expansion-card";
 export * from "./shared/kode";
 export * from "./shared/relatert-innhold";
 export * from "./shared/riktekst";

aksel.nav.no/website/sanity/schema/objects/shared/accordion.tsx

@@ -6,6 +6,8 @@ import { defineField, defineType } from "sanity";
 export const Accordion = defineType({
   name: "accordion",
   title: "Accordion",
+  description:
+    "Accordion brukes hvis man har flere seksjoner man ønsker å skjule. Bruke ExpansionCard om du bare skal vise en seksjon",
   type: "object",
   icon: StackCompactIcon,
   fields: [
@@ -37,7 +39,11 @@ export const Accordion = defineType({
         },
       ],
       validation: (Rule) =>
-        Rule.required().min(1).error("Accordion modul må ha minst 1 element"),
+        Rule.required()
+          .min(2)
+          .error(
+            "Accordion modul må ha minst 2 elementer. Bruk ExpansionCard om du bare trenger 1"
+          ),
     }),
   ],
   components: {

aksel.nav.no/website/sanity/schema/objects/shared/expansion-card.tsx

@@ -0,0 +1,60 @@
+import { ChevronDownIcon } from "@navikt/aksel-icons";
+import { defineField, defineType } from "sanity";
+
+export const ExpansionCard = defineType({
+  name: "expansioncard",
+  title: "ExpansionCard",
+  description:
+    "ExpansionCard brukes hvis man har en seksjon man ønsker å skjule. Bruke Accordion om du trenger flere seksjoner etter hverandre",
+  type: "object",
+  icon: ChevronDownIcon,
+  fields: [
+    defineField({
+      title: "Heading",
+      name: "heading",
+      type: "string",
+      validation: (Rule) =>
+        Rule.required().error("ExpansionCard må ha en heading"),
+    }),
+    defineField({
+      title: "Heading nivå",
+      name: "heading_level",
+      description: "ExpansionCard kan ikke brukes som h2",
+      type: "string",
+      validation: (Rule) => Rule.required(),
+      options: {
+        list: [
+          { value: "h3", title: "H3" },
+          { value: "h4", title: "H4" },
+        ],
+        layout: "radio",
+      },
+      initialValue: "h3",
+    }),
+    defineField({
+      title: "Description (valgfritt)",
+      name: "description",
+      type: "string",
+    }),
+    defineField({
+      title: "Innhold",
+      name: "body",
+      type: "riktekst_enkel",
+      validation: (Rule) =>
+        Rule.required().error("ExpansionCard må ha innhold"),
+    }),
+  ],
+  preview: {
+    select: {
+      body: "body",
+      heading: "heading",
+    },
+    prepare(selection) {
+      return {
+        title: selection?.heading,
+        subtitle: `ExpansionCard`,
+        media: ChevronDownIcon,
+      };
+    },
+  },
+});

aksel.nav.no/website/sanity/schema/objects/shared/riktekst.tsx

@@ -133,6 +133,7 @@ const Riktekst = (
     "do_dont",
     "alert",
     "accordion",
+    "expansioncard",
     "tabell_v2",
     "video",
   ];

examples/shadow-dom/package.json

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

package.json

@@ -7,7 +7,8 @@
     "postinstall": "husky install",
     "boot": "yarn workspaces foreach -v -pA --topological-dev --no-private run build",
     "clean": "node scripts/clean.js && yarn workspace @navikt/ds-codemod clean",
-    "storybook": "concurrently \"yarn watch:tw\" \"cross-env STORYBOOK_STORIES=all storybook dev -p 6006\"",
+    "storybook": "storybook dev -p 6006",
+    "storybook:aksel": "concurrently \"yarn watch:tw\" \"cross-env STORYBOOK_STORIES=all storybook dev -p 6006\"",
     "dev": "yarn workspace aksel.nav.no dev",
     "docgen": "yarn workspaces foreach -p run docgen",
     "chromatic": "npx chromatic --project-token x3xqdfgkujg --build-script-name build:storybook",
@@ -191,15 +192,15 @@
   "devDependencies": {
     "@changesets/changelog-github": "0.4.7",
     "@changesets/cli": "2.25.0",
-    "@storybook/addon-a11y": "7.0.0-beta.54",
-    "@storybook/addon-actions": "7.0.0-beta.54",
-    "@storybook/addon-essentials": "7.0.0-beta.54",
-    "@storybook/addon-storysource": "7.0.0-beta.54",
-    "@storybook/addons": "7.0.0-beta.54",
-    "@storybook/csf-tools": "7.0.0-beta.54",
-    "@storybook/react": "7.0.0-beta.54",
-    "@storybook/react-vite": "7.0.0-beta.54",
-    "@storybook/theming": "7.0.0-beta.54",
+    "@storybook/addon-a11y": "7.0.0-rc.5",
+    "@storybook/addon-actions": "7.0.0-rc.5",
+    "@storybook/addon-essentials": "7.0.0-rc.5",
+    "@storybook/addon-storysource": "7.0.0-rc.5",
+    "@storybook/addons": "7.0.0-rc.5",
+    "@storybook/csf-tools": "7.0.0-rc.5",
+    "@storybook/react": "7.0.0-rc.5",
+    "@storybook/react-vite": "7.0.0-rc.5",
+    "@storybook/theming": "7.0.0-rc.5",
     "@typescript-eslint/parser": "^5.41.0",
     "@whitespace/storybook-addon-html": "^5.0.3",
     "chromatic": "6.5.4",
@@ -220,7 +221,7 @@
     "react": "^18.0.0",
     "react-docgen-typescript": "2.2.2",
     "react-dom": "^18.0.0",
-    "storybook": "7.0.0-beta.54",
+    "storybook": "7.0.0-rc.5",
     "storybook-addon-next-router": "^4.0.2",
     "stylelint": "^14.8.5",
     "stylelint-config-prettier": "^9.0.3",