fix(Flex.Container): show line divider even when heading is present (#…

…3198)

packages/dnb-design-system-portal/src/docs/uilib/layout/Examples.tsx

@@ -77,7 +77,7 @@ export const colors = [
 export const HorizontalFlexItemResponsiveSize = () => {
   return (
     <ComponentBox
-      scope={{ colors, TestElement, Field }}
+      scope={{ colors, TestElement }}
       hideCode
       data-visual-test="flex-item-size"
     >

packages/dnb-design-system-portal/src/docs/uilib/layout/flex/Examples.tsx

@@ -53,7 +53,7 @@ export const colors = [
 export const HorizontalFlexItemResponsiveSize = () => {
   return (
     <ComponentBox
-      scope={{ colors, TestElement, Field }}
+      scope={{ colors, TestElement }}
       data-visual-test="flex-item-size"
     >
       <Flex.Container>

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 (
     <ComponentBox
-      scope={{ TestElement, Field }}
+      scope={{ TestElement }}
       data-visual-test="flex-container-field"
     >
       <Flex.Container>
@@ -135,7 +139,7 @@ export const VerticalWithCard = () => {
 
 export const VerticalWithFieldString = () => {
   return (
-    <ComponentBox scope={{ TestElement, Field }}>
+    <ComponentBox scope={{ TestElement }}>
       <Card>
         <Flex.Container direction="vertical">
           <Field.String label="Label" value="Foo" />
@@ -146,14 +150,15 @@ export const VerticalWithFieldString = () => {
   )
 }
 
-export const VerticalSpaceDivider = () => {
+export const VerticalLineDivider = () => {
   return (
     <ComponentBox
-      scope={{ TestElement, Field }}
+      scope={{ TestElement }}
       data-visual-test="flex-container-divider"
     >
       <Card>
-        <Flex.Container direction="vertical" divider="space">
+        <Flex.Container direction="vertical" divider="line">
+          <Form.SubHeading>Heading</Form.SubHeading>
           <Field.String label="Label" value="Value" />
           <Field.String label="Label" value="Value" />
         </Flex.Container>

packages/dnb-design-system-portal/src/docs/uilib/layout/flex/container/demos.mdx

@@ -40,9 +40,9 @@ Will wrap on small screens.
 
 <Examples.VerticalWithCard />
 
-### Vertical space divider
+### Vertical line divider
 
-<Examples.VerticalSpaceDivider />
+<Examples.VerticalLineDivider />
 
 ### Vertical aligned Field.String
 

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 = () => {
     </Wrapper>
   )
 }
+
+export function CardWithHeading() {
+  return (
+    <Card stack divider="line">
+      <Form.SubHeading>Heading</Form.SubHeading>
+      <Field.PhoneNumber />
+      <Field.Email />
+    </Card>
+  )
+}

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

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(
+      <Flex.Container direction="vertical" divider="line">
+        <H1>Heading</H1>
+        <Flex.Item>Flex</Flex.Item>
+        <Flex.Item>Flex</Flex.Item>
+      </Flex.Container>
+    )
+
+    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(
       <Flex.Container>