From d0f1c1a3db6a017d5185f06485b63166cfbcc0c0 Mon Sep 17 00:00:00 2001 From: Halvor Haugan Date: Wed, 30 Aug 2023 15:45:52 +0200 Subject: [PATCH 1/6] :lipstick: GuidePanel: justert design --- .changeset/late-teachers-try.md | 6 + @navikt/core/css/guide-panel.css | 133 +++++++++++------- @navikt/core/css/tokens.json | 4 +- @navikt/core/react/react-css.d.ts | 9 ++ @navikt/core/react/src/guide-panel/Guide.tsx | 34 ----- .../core/react/src/guide-panel/GuidePanel.tsx | 25 ++-- .../src/guide-panel/guidepanel.stories.tsx | 47 +++++-- @navikt/core/react/src/guide-panel/index.ts | 1 - @navikt/core/react/src/layout/stack/Stack.tsx | 4 +- @navikt/core/react/src/react-css.d.ts | 9 ++ 10 files changed, 160 insertions(+), 112 deletions(-) create mode 100644 .changeset/late-teachers-try.md create mode 100644 @navikt/core/react/react-css.d.ts delete mode 100644 @navikt/core/react/src/guide-panel/Guide.tsx create mode 100644 @navikt/core/react/src/react-css.d.ts diff --git a/.changeset/late-teachers-try.md b/.changeset/late-teachers-try.md new file mode 100644 index 00000000000..8c024a7b3c7 --- /dev/null +++ b/.changeset/late-teachers-try.md @@ -0,0 +1,6 @@ +--- +"@navikt/ds-react": patch +"@navikt/ds-css": patch +--- + +:lipstick: GuidePanel: justert design diff --git a/@navikt/core/css/guide-panel.css b/@navikt/core/css/guide-panel.css index b38913279fe..ea160d229b2 100644 --- a/@navikt/core/css/guide-panel.css +++ b/@navikt/core/css/guide-panel.css @@ -1,72 +1,105 @@ -/** - * GuidePanel component - */ .navds-guide-panel { position: relative; - padding-left: var(--a-spacing-10); + padding-top: 2rem; } -.navds-guide-panel__content { - background-color: var(--ac-guide-panel-bg, var(--a-surface-default)); - border-radius: var(--a-border-radius-medium); - border: 2px solid var(--ac-guide-panel-border, var(--a-border-action)); - min-height: 7.25rem; - padding: var(--a-spacing-6); - padding-left: var(--a-spacing-14); +.navds-guide-panel__guide { + background: var(--ac-guide-panel-illustration-bg, var(--a-surface-info-subtle)); + border: 2px solid var(--ac-guide-panel-border, var(--a-border-info)); + border-radius: var(--a-border-radius-full); + overflow: hidden; + position: absolute; + width: 4rem; + height: 4rem; + left: 50%; + transform: translate(-50%, -50%); } -.navds-guide-panel--poster { - padding-left: 0; - padding-top: var(--a-spacing-12); +.navds-guide-panel__guide svg, +.navds-guide-panel__guide img { + height: 100%; + width: 100%; } -.navds-guide-panel--poster .navds-guide-panel__content { - padding: var(--a-spacing-8); - padding-top: var(--a-spacing-16); +.navds-guide-panel__content { + background-color: var(--ac-guide-panel-bg, var(--a-surface-default)); + border: 2px solid var(--ac-guide-panel-border, var(--a-border-info)); + border-radius: var(--a-border-radius-large); + padding: var(--a-spacing-4); + padding-top: var(--a-spacing-12); } -.navds-guide-panel .navds-guide { - position: absolute; - top: var(--a-spacing-4); - transform: translateX(-50%); - border: 2px solid var(--ac-guide-panel-border, var(--a-border-action)); -} +@media (min-width: 480px) { + .navds-guide-panel { + padding-top: 3.125rem; + } -.navds-guide-panel--poster .navds-guide { - left: 50%; - top: 0; + .navds-guide-panel__guide { + width: 6.25rem; + height: 6.25rem; + } + + .navds-guide-panel__content { + padding: var(--a-spacing-8); + padding-top: 4.25rem; + } } -/** - * Guide component - */ -.navds-guide { - display: flex; - align-items: center; - justify-content: center; - border-radius: var(--a-border-radius-full); +/* poster=false */ + +.navds-guide-panel--poster-false { + padding-top: 0; + padding-left: 2rem; } -/* Guide illustration frame */ -.navds-guide__illustration { - background: var(--ac-guide-panel-illustration-bg, var(--a-surface-action-subtle)); - border-radius: var(--a-border-radius-full); - overflow: hidden; +.navds-guide-panel--poster-false .navds-guide-panel__guide { + left: 0; + top: var(--a-spacing-5); + transform: none; } -.navds-guide__illustration svg, -.navds-guide__illustration img { - height: 100%; - width: 100%; +.navds-guide-panel--poster-false .navds-guide-panel__content { + padding: var(--a-spacing-4); + padding-left: var(--a-spacing-10); + min-height: calc(4rem + var(--a-spacing-5) + var(--a-spacing-5)); } -/* Illustration sizes */ -.navds-guide__illustration--small { - height: 5rem; - width: 5rem; +@media (min-width: 480px) { + .navds-guide-panel--poster-false { + padding-left: 2.5rem; + } + + .navds-guide-panel--poster-false .navds-guide-panel__guide { + width: 5rem; + height: 5rem; + } + + .navds-guide-panel--poster-false .navds-guide-panel__content { + padding: var(--a-spacing-6); + padding-left: var(--a-spacing-14); + min-height: calc(5rem + var(--a-spacing-5) + var(--a-spacing-5)); + } } -.navds-guide__illustration--medium { - height: 6rem; - width: 6rem; +/* poster=undefined (on desktop) */ + +@media (min-width: 480px) { + .navds-guide-panel--poster-undefined { + padding-top: 0; + padding-left: 2.5rem; + } + + .navds-guide-panel--poster-undefined .navds-guide-panel__guide { + width: 5rem; + height: 5rem; + left: 0; + top: var(--a-spacing-5); + transform: none; + } + + .navds-guide-panel--poster-undefined .navds-guide-panel__content { + padding: var(--a-spacing-6); + padding-left: var(--a-spacing-14); + min-height: calc(5rem + var(--a-spacing-5) + var(--a-spacing-5)); + } } diff --git a/@navikt/core/css/tokens.json b/@navikt/core/css/tokens.json index c46a8c5eed1..dee157e6655 100644 --- a/@navikt/core/css/tokens.json +++ b/@navikt/core/css/tokens.json @@ -156,8 +156,8 @@ }, "guidepanel": { "--ac-guide-panel-bg": "--a-surface-default", - "--ac-guide-panel-border": "--a-border-action", - "--ac-guide-panel-illustration-bg": "--a-surface-action-subtle" + "--ac-guide-panel-border": "--a-border-info", + "--ac-guide-panel-illustration-bg": "--a-surface-info-subtle" }, "helptext": { "--ac-help-text-button-color": "--a-surface-action", diff --git a/@navikt/core/react/react-css.d.ts b/@navikt/core/react/react-css.d.ts new file mode 100644 index 00000000000..ebb9007a391 --- /dev/null +++ b/@navikt/core/react/react-css.d.ts @@ -0,0 +1,9 @@ +// eslint-disable-next-line react/no-typos +import "react"; + +declare module "react" { + interface CSSProperties { + [key: `--ac-${string}`]: string | undefined; + [key: `--__ac-${string}`]: string | undefined; + } +} diff --git a/@navikt/core/react/src/guide-panel/Guide.tsx b/@navikt/core/react/src/guide-panel/Guide.tsx deleted file mode 100644 index 4f8f9e8ca3a..00000000000 --- a/@navikt/core/react/src/guide-panel/Guide.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React, { forwardRef, HTMLAttributes } from "react"; -import cl from "clsx"; -import { DefaultIllustration } from "./Illustration"; -export interface GuideProps - extends Omit, "children"> { - /** - * Custom svg/img element - */ - illustration?: React.ReactNode; - /** - * Predefined size properties for illustration - * @default "medium" - */ - size?: "small" | "medium"; -} - -const Guide = forwardRef( - ({ className, illustration, size = "medium", color, ...rest }, ref) => { - return ( -
-
- {illustration ?? } -
-
- ); - } -); - -export default Guide; diff --git a/@navikt/core/react/src/guide-panel/GuidePanel.tsx b/@navikt/core/react/src/guide-panel/GuidePanel.tsx index bfbe4dd2a61..6f970245c5b 100644 --- a/@navikt/core/react/src/guide-panel/GuidePanel.tsx +++ b/@navikt/core/react/src/guide-panel/GuidePanel.tsx @@ -1,6 +1,6 @@ import React, { forwardRef, HTMLAttributes } from "react"; -import Guide from "./Guide"; import cl from "clsx"; +import { DefaultIllustration } from "./Illustration"; export interface GuidePanelProps extends HTMLAttributes { /** @@ -12,14 +12,14 @@ export interface GuidePanelProps extends HTMLAttributes { */ illustration?: React.ReactNode; /** - * Poster positions guide-illustation above content - * @default false, renders illustation left of content + * Render illustation above content + * @default true on mobile (<480px) */ poster?: boolean; } /** - * A component that displays a guide panel. + * A component for guiding users on the website * * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/guidepanel) * @see 🏷️ {@link GuidePanelProps} @@ -34,18 +34,19 @@ export interface GuidePanelProps extends HTMLAttributes { * ``` */ export const GuidePanel = forwardRef( - ( - { children, className, illustration, poster = false, color, ...rest }, - ref - ) => ( + ({ children, className, illustration, poster, ...rest }, ref) => (
- +
+ {illustration ?? } +
{children}
) diff --git a/@navikt/core/react/src/guide-panel/guidepanel.stories.tsx b/@navikt/core/react/src/guide-panel/guidepanel.stories.tsx index da4dc396768..59e3e9dc549 100644 --- a/@navikt/core/react/src/guide-panel/guidepanel.stories.tsx +++ b/@navikt/core/react/src/guide-panel/guidepanel.stories.tsx @@ -1,10 +1,12 @@ import React from "react"; -import { BodyLong, GuidePanel } from "../index"; +import { BodyLong, GuidePanel, VStack } from "../index"; import { Meta } from "@storybook/react"; +import { InformationIcon } from "@navikt/aksel-icons"; + export default { title: "ds-react/GuidePanel", component: GuidePanel, -} as Meta; +} satisfies Meta; const panelText = `Sit sint eu dolore reprehenderit exercitation labore aute anim sit adipisicing proident. Tempor ipsum ea cupidatat qui esse do veniam @@ -13,17 +15,15 @@ enim id.`; export const Default = { render: (props) => { - const newProps = props?.colorOverride + const style: React.CSSProperties = props?.colorOverride ? { - style: { - ["--ac-guide-panel-illustration-bg" as any]: "var(--a-purple-200)", - ["--ac-guide-panel-border" as any]: "var(--a-purple-400)", - }, + "--ac-guide-panel-illustration-bg": "var(--a-purple-200)", + "--ac-guide-panel-border": "var(--a-purple-400)", } : {}; return ( - + {panelText} ); @@ -35,13 +35,34 @@ export const Default = { }, }; -export const Poster = () => {panelText}; +export const PosterVariants = { + render: () => ( + + + If you exclude the poster prop, you will get the poster + variant on mobile (<480px) and the non-poster variant otherwise. + + + Use the poster prop to get the poster variant on all + viewports. + + + Set poster=false to get the non-poster variant on all + viewports. + + + ), + + parameters: { + chromatic: { viewports: [479, 800] }, + }, +}; export const ColorOverride = () => ( {panelText} @@ -63,3 +84,7 @@ export const Content = () => ( ); + +export const CustomIllustration = () => ( + }>{panelText} +); diff --git a/@navikt/core/react/src/guide-panel/index.ts b/@navikt/core/react/src/guide-panel/index.ts index d1a95adeadd..68cf850fb7c 100644 --- a/@navikt/core/react/src/guide-panel/index.ts +++ b/@navikt/core/react/src/guide-panel/index.ts @@ -1,3 +1,2 @@ export { default as GuidePanel, type GuidePanelProps } from "./GuidePanel"; -export { type GuideProps } from "./Guide"; export { DefaultIllustration as GuideDefaultIllustration } from "./Illustration"; diff --git a/@navikt/core/react/src/layout/stack/Stack.tsx b/@navikt/core/react/src/layout/stack/Stack.tsx index c614e32af1d..db12743d59f 100644 --- a/@navikt/core/react/src/layout/stack/Stack.tsx +++ b/@navikt/core/react/src/layout/stack/Stack.tsx @@ -52,14 +52,14 @@ export const Stack: OverridableComponent = }, ref ) => { - const style = { + const style: React.CSSProperties = { ..._style, "--__ac-stack-direction": direction, "--__ac-stack-align": align, "--__ac-stack-justify": justify, "--__ac-stack-wrap": wrap ? "wrap" : "nowrap", ...getResponsiveProps(`stack`, "gap", "spacing", gap), - } as React.CSSProperties; + }; return ( Date: Wed, 30 Aug 2023 16:25:49 +0200 Subject: [PATCH 2/6] deprecated css-classes --- @navikt/aksel-stylelint/src/deprecations.ts | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/@navikt/aksel-stylelint/src/deprecations.ts b/@navikt/aksel-stylelint/src/deprecations.ts index 5177b197838..111906e4821 100644 --- a/@navikt/aksel-stylelint/src/deprecations.ts +++ b/@navikt/aksel-stylelint/src/deprecations.ts @@ -38,4 +38,17 @@ export const deprecations: DeprecatedList = [ classes: ["navds-modal__content"], message: "Renamed to `.navds-modal__body` in v5.0.0", }, + { + classes: ["navds-guide-panel--poster"], + message: "Use `.navds-guide-panel--poster-true` instead", + }, + { + classes: [ + "navds-guide", + "navds-guide__illustration", + "navds-guide__illustration--small", + "navds-guide__illustration--medium", + ], + message: "Use `.navds-guide-panel__guide` instead", + }, ]; From e8e6f7ee9b24e12598308216fdf053857dc22b39 Mon Sep 17 00:00:00 2001 From: Halvor Haugan Date: Wed, 30 Aug 2023 16:40:00 +0200 Subject: [PATCH 3/6] eks desc --- aksel.nav.no/website/pages/eksempler/guidepanel/default.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/aksel.nav.no/website/pages/eksempler/guidepanel/default.tsx b/aksel.nav.no/website/pages/eksempler/guidepanel/default.tsx index 40440c7b0ce..d4095c07687 100644 --- a/aksel.nav.no/website/pages/eksempler/guidepanel/default.tsx +++ b/aksel.nav.no/website/pages/eksempler/guidepanel/default.tsx @@ -20,4 +20,5 @@ export const Demo = { export const args = { index: 0, + desc: "Hvis 'poster'-propen ikke er satt, brukes poster-varianten automatisk på mobil (<480px).", }; From bed689dd5d645d5809a4172995b92cfc5d1dbbbf Mon Sep 17 00:00:00 2001 From: Halvor Haugan Date: Thu, 31 Aug 2023 12:48:50 +0200 Subject: [PATCH 4/6] ny illustrasjon, justering av d.ts-fil --- @navikt/core/react/react-css.d.ts | 10 +-- .../react/src/guide-panel/Illustration.tsx | 70 ++++++------------- 2 files changed, 24 insertions(+), 56 deletions(-) diff --git a/@navikt/core/react/react-css.d.ts b/@navikt/core/react/react-css.d.ts index ebb9007a391..6610c7cb0b4 100644 --- a/@navikt/core/react/react-css.d.ts +++ b/@navikt/core/react/react-css.d.ts @@ -1,9 +1 @@ -// eslint-disable-next-line react/no-typos -import "react"; - -declare module "react" { - interface CSSProperties { - [key: `--ac-${string}`]: string | undefined; - [key: `--__ac-${string}`]: string | undefined; - } -} +/// diff --git a/@navikt/core/react/src/guide-panel/Illustration.tsx b/@navikt/core/react/src/guide-panel/Illustration.tsx index 889d96df729..53dabae6b8d 100644 --- a/@navikt/core/react/src/guide-panel/Illustration.tsx +++ b/@navikt/core/react/src/guide-panel/Illustration.tsx @@ -20,9 +20,9 @@ export const DefaultIllustration: DefaultIllustrationType = ({ return ( - - - - ); }; From a451f725c38339ad345ae3fbd6b21aad53f4752a Mon Sep 17 00:00:00 2001 From: Halvor Haugan Date: Thu, 31 Aug 2023 13:36:46 +0200 Subject: [PATCH 5/6] mer bakoverkompatible klasser, justere farger, refaktorere css --- @navikt/aksel-stylelint/src/deprecations.ts | 9 ++- @navikt/core/css/guide-panel.css | 67 ++++++++----------- @navikt/core/css/tokens.json | 4 +- .../core/react/src/guide-panel/GuidePanel.tsx | 12 ++-- 4 files changed, 41 insertions(+), 51 deletions(-) diff --git a/@navikt/aksel-stylelint/src/deprecations.ts b/@navikt/aksel-stylelint/src/deprecations.ts index 111906e4821..76ebdf5fab0 100644 --- a/@navikt/aksel-stylelint/src/deprecations.ts +++ b/@navikt/aksel-stylelint/src/deprecations.ts @@ -39,16 +39,15 @@ export const deprecations: DeprecatedList = [ message: "Renamed to `.navds-modal__body` in v5.0.0", }, { - classes: ["navds-guide-panel--poster"], - message: "Use `.navds-guide-panel--poster-true` instead", + classes: ["navds-guide__illustration"], + message: "Use `.navds-guide` instead", }, { classes: [ - "navds-guide", - "navds-guide__illustration", "navds-guide__illustration--small", "navds-guide__illustration--medium", ], - message: "Use `.navds-guide-panel__guide` instead", + message: + "There is no 1:1 replacement for this, the size will depend on the 'poster' prop and the viewport width", }, ]; diff --git a/@navikt/core/css/guide-panel.css b/@navikt/core/css/guide-panel.css index ea160d229b2..27b8b965c33 100644 --- a/@navikt/core/css/guide-panel.css +++ b/@navikt/core/css/guide-panel.css @@ -1,29 +1,31 @@ .navds-guide-panel { + --__ac-guide-panel-guide-size: 4rem; + position: relative; - padding-top: 2rem; + padding-top: calc(var(--__ac-guide-panel-guide-size) / 2); } -.navds-guide-panel__guide { - background: var(--ac-guide-panel-illustration-bg, var(--a-surface-info-subtle)); - border: 2px solid var(--ac-guide-panel-border, var(--a-border-info)); +.navds-guide { + background: var(--ac-guide-panel-illustration-bg, var(--a-surface-alt-3-subtle)); + border: 2px solid var(--ac-guide-panel-border, var(--a-border-alt-3)); border-radius: var(--a-border-radius-full); overflow: hidden; position: absolute; - width: 4rem; - height: 4rem; + width: var(--__ac-guide-panel-guide-size); + height: var(--__ac-guide-panel-guide-size); left: 50%; transform: translate(-50%, -50%); } -.navds-guide-panel__guide svg, -.navds-guide-panel__guide img { +.navds-guide svg, +.navds-guide img { height: 100%; width: 100%; } .navds-guide-panel__content { background-color: var(--ac-guide-panel-bg, var(--a-surface-default)); - border: 2px solid var(--ac-guide-panel-border, var(--a-border-info)); + border: 2px solid var(--ac-guide-panel-border, var(--a-border-alt-3)); border-radius: var(--a-border-radius-large); padding: var(--a-spacing-4); padding-top: var(--a-spacing-12); @@ -31,12 +33,7 @@ @media (min-width: 480px) { .navds-guide-panel { - padding-top: 3.125rem; - } - - .navds-guide-panel__guide { - width: 6.25rem; - height: 6.25rem; + --__ac-guide-panel-guide-size: 6.25rem; } .navds-guide-panel__content { @@ -45,61 +42,55 @@ } } -/* poster=false */ +/* not-poster */ -.navds-guide-panel--poster-false { +.navds-guide-panel--not-poster { padding-top: 0; - padding-left: 2rem; + padding-left: calc(var(--__ac-guide-panel-guide-size) / 2); } -.navds-guide-panel--poster-false .navds-guide-panel__guide { +.navds-guide-panel--not-poster .navds-guide { left: 0; top: var(--a-spacing-5); transform: none; } -.navds-guide-panel--poster-false .navds-guide-panel__content { +.navds-guide-panel--not-poster .navds-guide-panel__content { padding: var(--a-spacing-4); padding-left: var(--a-spacing-10); - min-height: calc(4rem + var(--a-spacing-5) + var(--a-spacing-5)); + min-height: calc(var(--__ac-guide-panel-guide-size) + var(--a-spacing-5) + var(--a-spacing-5)); } @media (min-width: 480px) { - .navds-guide-panel--poster-false { - padding-left: 2.5rem; + .navds-guide-panel--not-poster { + --__ac-guide-panel-guide-size: 5rem; } - .navds-guide-panel--poster-false .navds-guide-panel__guide { - width: 5rem; - height: 5rem; - } - - .navds-guide-panel--poster-false .navds-guide-panel__content { + .navds-guide-panel--not-poster .navds-guide-panel__content { padding: var(--a-spacing-6); padding-left: var(--a-spacing-14); - min-height: calc(5rem + var(--a-spacing-5) + var(--a-spacing-5)); } } -/* poster=undefined (on desktop) */ +/* responsive-poster (on desktop) */ @media (min-width: 480px) { - .navds-guide-panel--poster-undefined { + .navds-guide-panel--responsive-poster { + --__ac-guide-panel-guide-size: 5rem; + padding-top: 0; - padding-left: 2.5rem; + padding-left: calc(var(--__ac-guide-panel-guide-size) / 2); } - .navds-guide-panel--poster-undefined .navds-guide-panel__guide { - width: 5rem; - height: 5rem; + .navds-guide-panel--responsive-poster .navds-guide { left: 0; top: var(--a-spacing-5); transform: none; } - .navds-guide-panel--poster-undefined .navds-guide-panel__content { + .navds-guide-panel--responsive-poster .navds-guide-panel__content { padding: var(--a-spacing-6); padding-left: var(--a-spacing-14); - min-height: calc(5rem + var(--a-spacing-5) + var(--a-spacing-5)); + min-height: calc(var(--__ac-guide-panel-guide-size) + var(--a-spacing-5) + var(--a-spacing-5)); } } diff --git a/@navikt/core/css/tokens.json b/@navikt/core/css/tokens.json index dee157e6655..27a87393516 100644 --- a/@navikt/core/css/tokens.json +++ b/@navikt/core/css/tokens.json @@ -156,8 +156,8 @@ }, "guidepanel": { "--ac-guide-panel-bg": "--a-surface-default", - "--ac-guide-panel-border": "--a-border-info", - "--ac-guide-panel-illustration-bg": "--a-surface-info-subtle" + "--ac-guide-panel-border": "--a-border-alt-3", + "--ac-guide-panel-illustration-bg": "--a-surface-alt-3-subtle" }, "helptext": { "--ac-help-text-button-color": "--a-surface-action", diff --git a/@navikt/core/react/src/guide-panel/GuidePanel.tsx b/@navikt/core/react/src/guide-panel/GuidePanel.tsx index 6f970245c5b..4c4b1fd600b 100644 --- a/@navikt/core/react/src/guide-panel/GuidePanel.tsx +++ b/@navikt/core/react/src/guide-panel/GuidePanel.tsx @@ -38,13 +38,13 @@ export const GuidePanel = forwardRef(
-
+
{illustration ?? }
{children}
From 8d28f6a8d9d48797e06dbd25671a12d9591af8fc Mon Sep 17 00:00:00 2001 From: Halvor Haugan Date: Thu, 31 Aug 2023 15:20:19 +0200 Subject: [PATCH 6/6] revert module augmentation --- @navikt/core/react/react-css.d.ts | 1 - .../core/react/src/guide-panel/guidepanel.stories.tsx | 8 ++++---- @navikt/core/react/src/layout/stack/Stack.tsx | 4 ++-- @navikt/core/react/src/react-css.d.ts | 9 --------- 4 files changed, 6 insertions(+), 16 deletions(-) delete mode 100644 @navikt/core/react/react-css.d.ts delete mode 100644 @navikt/core/react/src/react-css.d.ts diff --git a/@navikt/core/react/react-css.d.ts b/@navikt/core/react/react-css.d.ts deleted file mode 100644 index 6610c7cb0b4..00000000000 --- a/@navikt/core/react/react-css.d.ts +++ /dev/null @@ -1 +0,0 @@ -/// diff --git a/@navikt/core/react/src/guide-panel/guidepanel.stories.tsx b/@navikt/core/react/src/guide-panel/guidepanel.stories.tsx index 59e3e9dc549..35ada576edc 100644 --- a/@navikt/core/react/src/guide-panel/guidepanel.stories.tsx +++ b/@navikt/core/react/src/guide-panel/guidepanel.stories.tsx @@ -14,12 +14,12 @@ cupidatat. Excepteur irure reprehenderit esse tempor nisi duis qui ea enim id.`; export const Default = { - render: (props) => { - const style: React.CSSProperties = props?.colorOverride - ? { + render: (props: { poster: boolean; colorOverride: boolean }) => { + const style = props.colorOverride + ? ({ "--ac-guide-panel-illustration-bg": "var(--a-purple-200)", "--ac-guide-panel-border": "var(--a-purple-400)", - } + } as React.CSSProperties) : {}; return ( diff --git a/@navikt/core/react/src/layout/stack/Stack.tsx b/@navikt/core/react/src/layout/stack/Stack.tsx index db12743d59f..c614e32af1d 100644 --- a/@navikt/core/react/src/layout/stack/Stack.tsx +++ b/@navikt/core/react/src/layout/stack/Stack.tsx @@ -52,14 +52,14 @@ export const Stack: OverridableComponent = }, ref ) => { - const style: React.CSSProperties = { + const style = { ..._style, "--__ac-stack-direction": direction, "--__ac-stack-align": align, "--__ac-stack-justify": justify, "--__ac-stack-wrap": wrap ? "wrap" : "nowrap", ...getResponsiveProps(`stack`, "gap", "spacing", gap), - }; + } as React.CSSProperties; return (