From 5628f1c4ddeae9e37fdc2cd35e1cb3b769210d62 Mon Sep 17 00:00:00 2001 From: Ken Date: Tue, 21 Mar 2023 11:12:54 +0100 Subject: [PATCH 1/3] :art: Kortet ned aksel-icons script-lengde --- @navikt/aksel-icons/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/@navikt/aksel-icons/package.json b/@navikt/aksel-icons/package.json index 78de801f90..370cad5282 100644 --- a/@navikt/aksel-icons/package.json +++ b/@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" From 8523483398347bc949808dbc089402a7a2a0e8e3 Mon Sep 17 00:00:00 2001 From: Ken Date: Tue, 21 Mar 2023 11:20:13 +0100 Subject: [PATCH 2/3] :lipstick: Dynamisk typografi for Expansioncard, flere token-muligheter --- @navikt/core/css/expansioncard.css | 1 + @navikt/core/css/tokens.json | 1 + .../src/expansion-card/ExpansionCard.tsx | 4 ++- .../expansion-card/ExpansionCardContent.tsx | 1 + .../ExpansionCardDescription.tsx | 31 +++++++++++++------ 5 files changed, 28 insertions(+), 10 deletions(-) diff --git a/@navikt/core/css/expansioncard.css b/@navikt/core/css/expansioncard.css index a5c81604d7..3adf91dfa4 100644 --- a/@navikt/core/css/expansioncard.css +++ b/@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 { diff --git a/@navikt/core/css/tokens.json b/@navikt/core/css/tokens.json index 226939d5ea..5436bd482b 100644 --- a/@navikt/core/css/tokens.json +++ b/@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", diff --git a/@navikt/core/react/src/expansion-card/ExpansionCard.tsx b/@navikt/core/react/src/expansion-card/ExpansionCard.tsx index 767847ed82..092f237358 100644 --- a/@navikt/core/react/src/expansion-card/ExpansionCard.tsx +++ b/@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({ open: false, toggleOpen: () => {}, + size: "medium", }); export const ExpansionCard = forwardRef( @@ -91,7 +93,7 @@ export const ExpansionCard = forwardRef( return (
{children}
diff --git a/@navikt/core/react/src/expansion-card/ExpansionCardDescription.tsx b/@navikt/core/react/src/expansion-card/ExpansionCardDescription.tsx index dc5a9aae90..d1e8331d75 100644 --- a/@navikt/core/react/src/expansion-card/ExpansionCardDescription.tsx +++ b/@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 { @@ -12,11 +13,23 @@ export type ExpansionCardDescriptionType = React.ForwardRefExoticComponent< >; export const ExpansionCardDescription: ExpansionCardDescriptionType = - forwardRef(({ className, ...rest }, ref) => ( - - )); + forwardRef(({ className, ...rest }, ref) => { + const panelContext = useContext(ExpansionCardContext); + + if (panelContext === null) { + console.error( + " has to be used within an " + ); + return null; + } + + return ( + + ); + }); From c32dceeeff61d4741946bf95bf89ecec3b0dd2e9 Mon Sep 17 00:00:00 2001 From: Ken Date: Tue, 21 Mar 2023 11:21:46 +0100 Subject: [PATCH 3/3] :memo: Changeset --- .changeset/great-parrots-dress.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/great-parrots-dress.md diff --git a/.changeset/great-parrots-dress.md b/.changeset/great-parrots-dress.md new file mode 100644 index 0000000000..7fa2b52840 --- /dev/null +++ b/.changeset/great-parrots-dress.md @@ -0,0 +1,6 @@ +--- +"@navikt/ds-css": patch +"@navikt/ds-react": patch +--- + +Oppdatert typografi for ExpansioCard