diff --git a/packages/dnb-design-system-portal/src/docs/uilib/layout/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/layout/Examples.tsx index 81da14e5b57..6b972e78098 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/layout/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/layout/Examples.tsx @@ -77,7 +77,7 @@ export const colors = [ export const HorizontalFlexItemResponsiveSize = () => { return ( diff --git a/packages/dnb-design-system-portal/src/docs/uilib/layout/flex/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/layout/flex/Examples.tsx index 6a15a119c7f..5a4ff16fff3 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/layout/flex/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/layout/flex/Examples.tsx @@ -53,7 +53,7 @@ export const colors = [ export const HorizontalFlexItemResponsiveSize = () => { return ( diff --git a/packages/dnb-design-system-portal/src/docs/uilib/layout/flex/container/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/layout/flex/container/Examples.tsx index 542290bc348..a7e8ae6d621 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/layout/flex/container/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/layout/flex/container/Examples.tsx @@ -1,6 +1,10 @@ import ComponentBox from '../../../../../shared/tags/ComponentBox' import { Card, Flex } from '@dnb/eufemia/src' -import { TestElement, Field } from '@dnb/eufemia/src/extensions/forms' +import { + TestElement, + Field, + Form, +} from '@dnb/eufemia/src/extensions/forms' export const Default = () => { return ( @@ -26,7 +30,7 @@ export const Default = () => { export const HorizontalWithFieldString = () => { return ( @@ -135,7 +139,7 @@ export const VerticalWithCard = () => { export const VerticalWithFieldString = () => { return ( - + @@ -146,14 +150,15 @@ export const VerticalWithFieldString = () => { ) } -export const VerticalSpaceDivider = () => { +export const VerticalLineDivider = () => { return ( - + + Heading diff --git a/packages/dnb-design-system-portal/src/docs/uilib/layout/flex/container/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/layout/flex/container/demos.mdx index 5b23568b6c7..dc660651479 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/layout/flex/container/demos.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/layout/flex/container/demos.mdx @@ -40,9 +40,9 @@ Will wrap on small screens. -### Vertical space divider +### Vertical line divider - + ### Vertical aligned Field.String diff --git a/packages/dnb-eufemia/src/components/card/stories/Card.stories.tsx b/packages/dnb-eufemia/src/components/card/stories/Card.stories.tsx index 587679441e0..a31332ba75f 100644 --- a/packages/dnb-eufemia/src/components/card/stories/Card.stories.tsx +++ b/packages/dnb-eufemia/src/components/card/stories/Card.stories.tsx @@ -5,7 +5,7 @@ import React from 'react' -import { Field } from '../../../extensions/forms' +import { Field, Form } from '../../../extensions/forms' import { Card, Flex } from '../../' import { Wrapper, Box } from 'storybook-utils/helpers' @@ -149,3 +149,13 @@ export const CardSandbox = () => { ) } + +export function CardWithHeading() { + return ( + + Heading + + + + ) +} diff --git a/packages/dnb-eufemia/src/components/flex/Container.tsx b/packages/dnb-eufemia/src/components/flex/Container.tsx index e8916eb502d..55e4193bffc 100644 --- a/packages/dnb-eufemia/src/components/flex/Container.tsx +++ b/packages/dnb-eufemia/src/components/flex/Container.tsx @@ -128,12 +128,13 @@ function FlexContainer(props: Props) { const endSpacing = 0 let startSpacing = null + const isHeading = hasHeading && isHeadingElement(previousChild) if ( divider === 'line' && // No line above first element !isFirst && - // No line above/below headings - !hasHeading + // No line above heading + !isHeading ) { const spaceAboveLine = getSpaceValue(end, previousChild) ?? spacing startSpacing = (getSpaceValue(start, child) ?? spacing) as SpaceType diff --git a/packages/dnb-eufemia/src/components/flex/__tests__/Container.test.tsx b/packages/dnb-eufemia/src/components/flex/__tests__/Container.test.tsx index c3925e5a273..241f1d24fcf 100644 --- a/packages/dnb-eufemia/src/components/flex/__tests__/Container.test.tsx +++ b/packages/dnb-eufemia/src/components/flex/__tests__/Container.test.tsx @@ -5,6 +5,7 @@ import { setMedia, matchMedia } from 'mock-match-media' import Flex from '../Flex' import { createSpacingClasses } from '../../space/SpacingUtils' import { SpaceProps } from '../../Space' +import H1 from '../../../elements/H1' describe('Flex.Container', () => { it('should forward HTML attributes', () => { @@ -196,7 +197,6 @@ describe('Flex.Container', () => { expect(children[0].className).toContain('dnb-flex-item') expect(children[1].tagName).toContain('DIV') - expect(children[1].className).toContain('dnb-space') expect(children[1].className).toContain('dnb-space__top--small') expect(children[2].tagName).toContain('HR') @@ -209,7 +209,6 @@ describe('Flex.Container', () => { expect(children[3].className).toContain('dnb-flex-item') expect(children[4].tagName).toContain('DIV') - expect(children[4].className).toContain('dnb-space') expect(children[4].className).toContain('dnb-space__top--small') expect(children[5].tagName).toContain('HR') @@ -222,6 +221,41 @@ describe('Flex.Container', () => { expect(children[6].className).toContain('dnb-flex-item') }) + it('should not add line divider below heading', () => { + render( + +

Heading

+ Flex + Flex +
+ ) + + const element = document.querySelector('.dnb-flex-container') + const children = element.children + + expect(children.length).toBe(5) + expect(element.className).toContain('dnb-flex-container--divider-line') + + expect(children[0].tagName).toContain('H1') + expect(children[0].className).toContain('dnb-space__top--zero') + expect(children[0].className).toContain('dnb-space__bottom--zero') + + expect(children[1].tagName).toContain('DIV') + expect(children[1].className).toContain('dnb-space__top--small') + + expect(children[2].tagName).toContain('DIV') + expect(children[2].className).toContain('dnb-space__top--small') + + expect(children[3].tagName).toContain('HR') + expect(children[3].className).toContain( + 'dnb-space__left--zero dnb-space__bottom--zero dnb-space__right--zero dnb-space__top--zero dnb-hr' + ) + + expect(children[4].className).toContain('dnb-space__top--small') + expect(children[4].className).toContain('dnb-space__bottom--zero') + expect(children[4].className).toContain('dnb-flex-item') + }) + it('should set spacing between children', () => { const { rerender } = render( diff --git a/packages/dnb-eufemia/src/components/flex/__tests__/__image_snapshots__/flexcontainer-have-to-match-divider.snap.png b/packages/dnb-eufemia/src/components/flex/__tests__/__image_snapshots__/flexcontainer-have-to-match-divider.snap.png index 1bc146d3b50..4b4d9c548aa 100644 Binary files a/packages/dnb-eufemia/src/components/flex/__tests__/__image_snapshots__/flexcontainer-have-to-match-divider.snap.png and b/packages/dnb-eufemia/src/components/flex/__tests__/__image_snapshots__/flexcontainer-have-to-match-divider.snap.png differ