fix(Forms.Card): removes outline when used in Edit and ViewContainer …

…in Wizard

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 = () => {
     </ComponentBox>
   )
 }
+
+export const UsageInWizard = () => {
+  return (
+    <ComponentBox data-visual-test="forms-card-in-wizard">
+      <Form.Handler>
+        <Wizard.Container>
+          <Wizard.Step>
+            <Form.Card>
+              <Form.Section>
+                <Form.Section.ViewContainer
+                  title="In a Wizard"
+                  variant="basic"
+                >
+                  <Value.String defaultValue="Something" />
+                </Form.Section.ViewContainer>
+                <Form.Section.EditContainer variant="basic">
+                  <Field.String defaultValue="Something" />
+                </Form.Section.EditContainer>
+              </Form.Section>
+            </Form.Card>
+          </Wizard.Step>
+        </Wizard.Container>
+        <Form.SubmitButton text="Happy coding!" />
+      </Form.Handler>
+    </ComponentBox>
+  )
+}

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Card/demos.mdx

@@ -8,3 +8,7 @@ import * as Examples from './Examples'
 ## Demos
 
 <Examples.BasicUsage />
+
+<VisibleWhenVisualTest>
+  <Examples.UsageInWizard />
+</VisibleWhenVisualTest>

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'])(

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);
     }
   }