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 index fbfdfda5dd3..f6805a5f3c5 100644 --- 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 ( + + +

First Card

+ +

Second Card

+ +

Third Card (for edge cases only)

+
+
+
+
+ ) +} + export const WithTable = () => { return ( 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 index 30f61b91b7e..3c88104ef8b 100644 --- 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 @@ -26,6 +26,12 @@ For [form components](uilib/extensions/forms/), you should use `stack={true}` to +### Nested Cards + +Nested cards have `responsive={false}` by default and will not behave responsive. + + + ### Without padding diff --git a/packages/dnb-eufemia/src/components/card/Card.tsx b/packages/dnb-eufemia/src/components/card/Card.tsx index 3c7f9d3a284..c4698e7cb35 100644 --- a/packages/dnb-eufemia/src/components/card/Card.tsx +++ b/packages/dnb-eufemia/src/components/card/Card.tsx @@ -1,15 +1,16 @@ -import React from 'react' +import React, { useContext } from 'react' import classnames from 'classnames' import Flex from '../flex/Flex' import { SectionParams, SectionProps } from '../section/Section' import { combineLabelledBy } from '../../shared/component-helper' +import CardContext from './CardContext' +import Space from '../Space' import useId from '../../shared/helpers/useId' import type { BasicProps as FlexContainerProps } from '../flex/Container' import type { BasicProps as FlexItemProps } from '../flex/Item' import type { SpaceTypeMedia } from '../../shared/types' import type { SpaceProps } from '../Space' -import Space from '../Space' export type Props = { /** @@ -33,6 +34,8 @@ export type Props = { Omit, 'ref' | 'wrap' | 'size' | 'title'> function Card(props: Props) { + const nestedContext = useContext(CardContext) + const { className, stack, @@ -44,7 +47,7 @@ function Card(props: Props) { align, divider = 'space', rowGap, - responsive = true, + responsive = !nestedContext?.isNested, filled, title, children, @@ -91,22 +94,24 @@ function Card(props: Props) { return ( - - {title && ( - - {title} - - )} - {children} - + + + {title && ( + + {title} + + )} + {children} + + ) } diff --git a/packages/dnb-eufemia/src/components/card/CardContext.ts b/packages/dnb-eufemia/src/components/card/CardContext.ts new file mode 100644 index 00000000000..abf799306be --- /dev/null +++ b/packages/dnb-eufemia/src/components/card/CardContext.ts @@ -0,0 +1,11 @@ +import React from 'react' + +export interface CardContextState { + isNested?: boolean +} + +const CardContext = React.createContext( + undefined +) + +export default CardContext 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 index 05a0ee7a60f..b0cce62c30c 100644 --- 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('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, @@ -103,5 +111,12 @@ describe.each(['ui', 'sbanken'])( }) expect(screenshot).toMatchImageSnapshot() }) + + it('have to match nested cards', async () => { + const screenshot = await makeScreenshot({ + selector: '[data-visual-test="layout-card-nested"]', + }) + expect(screenshot).toMatchImageSnapshot() + }) } ) diff --git a/packages/dnb-eufemia/src/components/card/__tests__/__image_snapshots__/card-for-sbanken-have-to-match-nested-cards.snap.png b/packages/dnb-eufemia/src/components/card/__tests__/__image_snapshots__/card-for-sbanken-have-to-match-nested-cards.snap.png new file mode 100644 index 00000000000..0f77d85f602 Binary files /dev/null and b/packages/dnb-eufemia/src/components/card/__tests__/__image_snapshots__/card-for-sbanken-have-to-match-nested-cards.snap.png differ diff --git a/packages/dnb-eufemia/src/components/card/__tests__/__image_snapshots__/card-for-ui-have-to-match-nested-cards.snap.png b/packages/dnb-eufemia/src/components/card/__tests__/__image_snapshots__/card-for-ui-have-to-match-nested-cards.snap.png new file mode 100644 index 00000000000..af9ae44d246 Binary files /dev/null and b/packages/dnb-eufemia/src/components/card/__tests__/__image_snapshots__/card-for-ui-have-to-match-nested-cards.snap.png differ diff --git a/packages/dnb-eufemia/src/components/card/__tests__/__image_snapshots__/card-small-screen-for-sbanken-have-to-match-nested-cards.snap.png b/packages/dnb-eufemia/src/components/card/__tests__/__image_snapshots__/card-small-screen-for-sbanken-have-to-match-nested-cards.snap.png new file mode 100644 index 00000000000..3a8b701ce44 Binary files /dev/null and b/packages/dnb-eufemia/src/components/card/__tests__/__image_snapshots__/card-small-screen-for-sbanken-have-to-match-nested-cards.snap.png differ diff --git a/packages/dnb-eufemia/src/components/card/__tests__/__image_snapshots__/card-small-screen-for-ui-have-to-match-nested-cards.snap.png b/packages/dnb-eufemia/src/components/card/__tests__/__image_snapshots__/card-small-screen-for-ui-have-to-match-nested-cards.snap.png new file mode 100644 index 00000000000..f4f4c8179fc Binary files /dev/null and b/packages/dnb-eufemia/src/components/card/__tests__/__image_snapshots__/card-small-screen-for-ui-have-to-match-nested-cards.snap.png differ 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 index eab76bb3e18..13b4362e48f 100644 --- 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 index e9f94381029..5d4c87b4a03 100644 --- 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; + } } diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/__image_snapshots__/formsection-have-to-match-basic-edit-container.snap.png b/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/__image_snapshots__/formsection-have-to-match-basic-edit-container.snap.png index 3465c63a025..e3303eba973 100644 Binary files a/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/__image_snapshots__/formsection-have-to-match-basic-edit-container.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/__image_snapshots__/formsection-have-to-match-basic-edit-container.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/__image_snapshots__/formsection-have-to-match-basic-view-container.snap.png b/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/__image_snapshots__/formsection-have-to-match-basic-view-container.snap.png index 51a4b1e3833..455d0fdc206 100644 Binary files a/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/__image_snapshots__/formsection-have-to-match-basic-view-container.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/__image_snapshots__/formsection-have-to-match-basic-view-container.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/__image_snapshots__/formsection-have-to-match-edit-container.snap.png b/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/__image_snapshots__/formsection-have-to-match-edit-container.snap.png index bade12b9b06..479da9d9f6d 100644 Binary files a/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/__image_snapshots__/formsection-have-to-match-edit-container.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/__image_snapshots__/formsection-have-to-match-edit-container.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/__image_snapshots__/formsection-have-to-match-view-container.snap.png b/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/__image_snapshots__/formsection-have-to-match-view-container.snap.png index 28fc8ece4c3..5c9019758e5 100644 Binary files a/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/__image_snapshots__/formsection-have-to-match-view-container.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/__image_snapshots__/formsection-have-to-match-view-container.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Section/containers/SectionContainer.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/Section/containers/SectionContainer.tsx index b86126d1e4e..b2c52927db5 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Form/Section/containers/SectionContainer.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Form/Section/containers/SectionContainer.tsx @@ -6,7 +6,7 @@ import React, { useRef, } from 'react' import classnames from 'classnames' -import { Flex, HeightAnimation } from '../../../../../components' +import { Card, HeightAnimation } from '../../../../../components' import SectionContainerContext, { SectionContainerContextState, } from './SectionContainerContext' @@ -123,16 +123,17 @@ function SectionContainer(props: Props & FlexContainerProps) { duration={450} keepInDOM // Ensure fields get mounted so they will sync with the data context > - {children} - + ) } diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Section/style/dnb-form-section.scss b/packages/dnb-eufemia/src/extensions/forms/Form/Section/style/dnb-form-section.scss index 44b49d14596..a129448c786 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Form/Section/style/dnb-form-section.scss +++ b/packages/dnb-eufemia/src/extensions/forms/Form/Section/style/dnb-form-section.scss @@ -11,36 +11,23 @@ flex-direction: column; } + &--variant-basic { + --border-color: transparent; + } + &__inner { flex: 1; outline: none; // for JavaSCript focus margin-bottom: var(--space); - padding: var(--padding, 1rem); - - .dnb-forms-section-block--variant-basic &, - &:not([class*='dnb-flex-container--spacing']) { - --padding: 0; + &:has(.dnb-flex-container--spacing-small) { + --space: var(--spacing-small); } - - &[class*='dnb-flex-container--spacing'] { - &.dnb-flex-container--spacing { - &-small { - --space: var(--spacing-small); - } - &-medium { - --space: var(--spacing-medium); - } - &-large { - --space: var(--spacing-large); - } - } - - border-radius: 0.375rem; - - .dnb-forms-section-block--variant-outline & { - box-shadow: inset 0 0 0 2px var(--block-outline-color); - } + &:has(.dnb-flex-container--spacing-medium) { + --space: var(--spacing-medium); + } + &:has(.dnb-flex-container--spacing-large) { + --space: var(--spacing-large); } transition: diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/ArrayItemArea.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/ArrayItemArea.tsx index 8a1ddce7f15..35c9453fca1 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/ArrayItemArea.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/ArrayItemArea.tsx @@ -1,6 +1,6 @@ import React, { useCallback, useContext, useReducer, useRef } from 'react' import classnames from 'classnames' -import { Flex, HeightAnimation } from '../../../../components' +import { Card, HeightAnimation } from '../../../../components' import IterateItemContext, { IterateItemContextState, } from '../IterateItemContext' @@ -182,14 +182,15 @@ function ArrayItemArea(props: Props & FlexContainerProps) { duration={450} keepInDOM // Ensure fields get mounted so they will sync with the data context > - {children} - + ) diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-animated-container.snap.png b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-animated-container.snap.png index 0b927d81b34..8e018dfbd98 100644 Binary files a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-animated-container.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-animated-container.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-edit-container.snap.png b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-edit-container.snap.png index 51b80b43052..12be989c553 100644 Binary files a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-edit-container.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-edit-container.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-view-container.snap.png b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-view-container.snap.png index d854dd7ee4b..b7240a9c74f 100644 Binary files a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-view-container.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-view-container.snap.png differ