💄 Dynamisk typografi for Expansioncard, flere token-muligheter

.changeset/great-parrots-dress.md

@@ -0,0 +1,6 @@
+---
+"@navikt/ds-css": patch
+"@navikt/ds-react": patch
+---
+
+Oppdatert typografi for ExpansioCard

@navikt/aksel-icons/package.json

@@ -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/core/css/expansioncard.css

@@ -52,6 +52,7 @@
   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 {

@navikt/core/css/tokens.json

@@ -110,6 +110,7 @@
     "--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",

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

@@ -55,11 +55,13 @@ export interface ExpansionCardProps
 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>(
@@ -91,7 +93,7 @@ export const ExpansionCard = forwardRef<HTMLDivElement, ExpansionCardProps>(
 
     return (
       <ExpansionCardContext.Provider
-        value={{ open: open ?? _open, toggleOpen: handleOpen }}
+        value={{ open: open ?? _open, toggleOpen: handleOpen, size }}
       >
         <section
           {...rest}

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

@@ -32,6 +32,7 @@ const ExpansionCardContent: ExpansionCardContentType = forwardRef(
           "navds-expansioncard__content--closed": !panelContext.open,
         })}
         aria-hidden={!panelContext.open}
+        size={panelContext.size}
       >
         <div className="navds-expansioncard__content-inner">{children}</div>
       </BodyLong>

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

@@ -1,6 +1,7 @@
-import React, { forwardRef } from "react";
+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> {
@@ -12,11 +13,23 @@ export type ExpansionCardDescriptionType = React.ForwardRefExoticComponent<
 >;
 
 export const ExpansionCardDescription: ExpansionCardDescriptionType =
-  forwardRef(({ className, ...rest }, ref) => (
-    <BodyLong
-      {...rest}
-      as="p"
-      ref={ref}
-      className={cl("navds-link-panel__description", className)}
-    />
-  ));
+  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}
+      />
+    );
+  });