feat(Card): add style for nested cards

dnbexperience · Nov 7, 2024 · a4d884e · a4d884e
1 parent 88443d2
commit a4d884e
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 0 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/card/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/card/Examples.tsx
@@ -32,6 +32,22 @@ export const Default = () => {
   )
 }
 
+export const NestedCards = () => {
+  return (
+    <ComponentBox data-visual-test="layout-card-nested">
+      <Card>
+        <P>First Card</P>
+        <Card top>
+          <P>Second Card</P>
+          <Card top>
+            <P>Third Card (for edge cases only)</P>
+          </Card>
+        </Card>
+      </Card>
+    </ComponentBox>
+  )
+}
+
 export const WithTable = () => {
   return (
     <ComponentBox data-visual-test="layout-card-table">

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/card/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/card/demos.mdx
@@ -10,6 +10,10 @@ import * as Examples from './Examples'
 
 <Examples.Default />
 
+### Nested Cards
+
+<Examples.NestedCards />
+
 ### Vertical fields
 
 <Examples.VerticalFields />

diff --git a/packages/dnb-eufemia/src/components/card/__tests__/Card.screenshot.test.ts b/packages/dnb-eufemia/src/components/card/__tests__/Card.screenshot.test.ts
@@ -57,6 +57,13 @@ describe.each(['ui', 'sbanken'])('Card for %s', (themeName) => {
     })
     expect(screenshot).toMatchImageSnapshot()
   })
+
+  it.only('have to match nested cards', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="layout-card-nested"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
 })
 
 describe.each(['ui', 'sbanken'])(
@@ -69,6 +76,7 @@ describe.each(['ui', 'sbanken'])(
       },
       url: '/uilib/components/card/demos',
     }
+
     it('have to match border', async () => {
       const screenshot = await makeScreenshot({
         ...params,

diff --git a/...ests__/__image_snapshots__/card-for-sbanken-have-to-match-nested-cards.snap.png b/...ests__/__image_snapshots__/card-for-sbanken-have-to-match-nested-cards.snap.png
diff --git a/...d/__tests__/__image_snapshots__/card-for-ui-have-to-match-nested-cards.snap.png b/...d/__tests__/__image_snapshots__/card-for-ui-have-to-match-nested-cards.snap.png
diff --git a/packages/dnb-eufemia/src/components/card/style/themes/dnb-card-theme-sbanken.scss b/packages/dnb-eufemia/src/components/card/style/themes/dnb-card-theme-sbanken.scss
@@ -2,4 +2,9 @@
   --card-outline-color: var(--border-color, var(--sb-color-gray-light));
   --card-outline-width: 0.0625rem;
   --card-background-color: var(--sb-color-white);
+
+  // Nested Cards
+  & .dnb-card {
+    --rounded-corner: 0.375rem;
+  }
 }
diff --git a/packages/dnb-eufemia/src/components/card/style/themes/dnb-card-theme-ui.scss b/packages/dnb-eufemia/src/components/card/style/themes/dnb-card-theme-ui.scss
@@ -2,4 +2,10 @@
   --card-outline-color: var(--border-color, var(--color-lavender));
   --card-outline-width: 0.25rem;
   --card-background-color: var(--color-white);
+
+  // Nested Cards
+  & .dnb-card {
+    --outline-width: 0.125rem;
+    --rounded-corner: 0.375rem;
+  }
 }