diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Card/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Card/Examples.tsx index cdef9b83088..dc3cd285546 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Card/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Card/Examples.tsx @@ -1,6 +1,11 @@ import ComponentBox from '../../../../../../shared/tags/ComponentBox' import { Flex, P } from '@dnb/eufemia/src' -import { Form, Field } from '@dnb/eufemia/src/extensions/forms' +import { + Form, + Field, + Wizard, + Value, +} from '@dnb/eufemia/src/extensions/forms' export const BasicUsage = () => { return ( @@ -19,3 +24,30 @@ export const BasicUsage = () => { ) } + +export const UsageInWizard = () => { + return ( + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Card/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Card/demos.mdx index c02baef433b..7d9f516c67e 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Card/demos.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Card/demos.mdx @@ -8,3 +8,7 @@ import * as Examples from './Examples' ## Demos + + + + diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Card/__tests__/Card.screenshot.test.ts b/packages/dnb-eufemia/src/extensions/forms/Form/Card/__tests__/Card.screenshot.test.ts index 56716295014..3032a2d46bb 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Form/Card/__tests__/Card.screenshot.test.ts +++ b/packages/dnb-eufemia/src/extensions/forms/Form/Card/__tests__/Card.screenshot.test.ts @@ -18,6 +18,14 @@ describe('Form.Card', () => { }) expect(screenshot).toMatchImageSnapshot() }) + + it('have to match outset when used in wizard', async () => { + const screenshot = await makeScreenshot({ + url, + selector: '[data-visual-test="forms-card-in-wizard"]', + }) + expect(screenshot).toMatchImageSnapshot() + }) }) describe.each(['ui', 'sbanken'])( diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Card/__tests__/__image_snapshots__/formcard-have-to-match-outset-when-used-in-wizard.snap.png b/packages/dnb-eufemia/src/extensions/forms/Form/Card/__tests__/__image_snapshots__/formcard-have-to-match-outset-when-used-in-wizard.snap.png new file mode 100644 index 00000000000..a90ae042c9b Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Form/Card/__tests__/__image_snapshots__/formcard-have-to-match-outset-when-used-in-wizard.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Wizard/style/themes/dnb-wizard-layout-theme-ui.scss b/packages/dnb-eufemia/src/extensions/forms/Wizard/style/themes/dnb-wizard-layout-theme-ui.scss index abdabed701d..d5670f0e2df 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Wizard/style/themes/dnb-wizard-layout-theme-ui.scss +++ b/packages/dnb-eufemia/src/extensions/forms/Wizard/style/themes/dnb-wizard-layout-theme-ui.scss @@ -1,6 +1,7 @@ .dnb-forms-wizard-layout { &__contents { .dnb-card { + // something with this adds outline --card-outline-color: var(--color-pistachio); } }