fix(Section): fix spacing + rewrite to TypeScript

dnbexperience · Sep 21, 2022 · 2249a80 · 2249a80
1 parent 6078cb4
commit 2249a80
Show file tree

Hide file tree

Showing 31 changed files with 1,282 additions and 1,389 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/section/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/section/Examples.js
@@ -11,7 +11,7 @@ export const SectionDemo = () => (
     {
       /* jsx */ `
 <Section>
-	<P>Visual DNB Section: <Anchor href="#">default</Anchor></P>
+	<P space={0}>Visual DNB Section: <Anchor href="#">default</Anchor></P>
 </Section>
 `
     }
@@ -22,7 +22,7 @@ export const SectionDemoSpacing = () => (
   <ComponentBox hideCode data-visual-test="section-spacing">
     {
       /* jsx */ `
-<Section spacing="large">
+<Section spacing>
   <P space={0}>Visual DNB Section: <Anchor href="#">default with spacing</Anchor></P>
 </Section>
 `
@@ -34,7 +34,7 @@ export const SectionDemoWhite = () => (
   <ComponentBox hideCode data-visual-test="section-white">
     {
       /* jsx */ `
-<Section spacing="true" style_type="white">
+<Section spacing="large" style_type="white">
   <P space={0}>Visual DNB Section: <Anchor href="#">white</Anchor></P>
 </Section>
 `
@@ -46,7 +46,7 @@ export const SectionDemoDivider = () => (
   <ComponentBox hideCode data-visual-test="section-divider">
     {
       /* jsx */ `
-<Section spacing="true" style_type="divider">
+<Section spacing="medium" style_type="divider">
   <P space={0}>Visual DNB Section: <Anchor href="#">divider</Anchor></P>
 </Section>
 `
@@ -58,7 +58,7 @@ export const SectionDemoMintGreen = () => (
   <ComponentBox hideCode data-visual-test="section-mint-green">
     {
       /* jsx */ `
-<Section spacing="true" style_type="mint-green">
+<Section spacing="small" style_type="mint-green">
   <P space={0}>Visual DNB Section: <Anchor href="#">mint-green</Anchor></P>
 </Section>
 `
@@ -70,7 +70,7 @@ export const SectionDemoSeaGreen = () => (
   <ComponentBox hideCode data-visual-test="section-sea-green">
     {
       /* jsx */ `
-<Section spacing="true" style_type="sea-green">
+<Section spacing="large" style_type="sea-green">
   <P space={0}>Visual DNB Section: <Anchor href="#">sea-green</Anchor></P>
 </Section>
 `
@@ -82,7 +82,7 @@ export const SectionDemoEmeraldGreen = () => (
   <ComponentBox hideCode data-visual-test="section-emerald-green">
     {
       /* jsx */ `
-<Section spacing="true" style_type="emerald-green">
+<Section spacing="medium" style_type="emerald-green">
   <P space={0}>Visual DNB Section: <Anchor href="#">emerald-green</Anchor></P>
 </Section>
 `
@@ -94,7 +94,7 @@ export const SectionDemoLavender = () => (
   <ComponentBox data-visual-test="section-lavender">
     {
       /* jsx */ `
-<Section spacing="true" style_type="lavender">
+<Section spacing="small" style_type="lavender">
   <P space={0}>Visual DNB Section: <Anchor href="#">lavender</Anchor></P>
 </Section>
 `
@@ -106,7 +106,7 @@ export const SectionDemoBlack3 = () => (
   <ComponentBox data-visual-test="section-black-3">
     {
       /* jsx */ `
-<Section spacing="true" style_type="black-3">
+<Section spacing style_type="black-3">
   <P space={0}>Visual DNB Section: <Anchor href="#">black-3</Anchor></P>
 </Section>
 `
@@ -118,7 +118,7 @@ export const SectionDemoSandYellow = () => (
   <ComponentBox data-visual-test="section-sand-yellow">
     {
       /* jsx */ `
-<Section spacing="true" style_type="sand-yellow">
+<Section spacing style_type="sand-yellow">
   <P space={0}>Visual DNB Section: <Anchor href="#">sand-yellow</Anchor></P>
 </Section>
 `
@@ -130,7 +130,7 @@ export const SectionDemoPistachio = () => (
   <ComponentBox data-visual-test="section-pistachio">
     {
       /* jsx */ `
-<Section spacing="true" style_type="pistachio">
+<Section spacing style_type="pistachio">
   <P space={0}>Visual DNB Section: <Anchor href="#">pistachio</Anchor></P>
 </Section>
 `
@@ -142,7 +142,7 @@ export const SectionDemoFireRed = () => (
   <ComponentBox data-visual-test="section-fire-red">
     {
       /* jsx */ `
-<Section spacing="true" style_type="fire-red">
+<Section spacing style_type="fire-red">
   <P space={0}>Visual DNB Section: <Anchor href="#">fire-red</Anchor></P>
 </Section>
 `
@@ -154,7 +154,7 @@ export const SectionDemoFireRed8 = () => (
   <ComponentBox data-visual-test="section-fire-red-8">
     {
       /* jsx */ `
-<Section spacing="true" style_type="fire-red-8">
+<Section spacing style_type="fire-red-8">
   <P space={0}>Visual DNB Section: <Anchor href="#">fire-red-8</Anchor></P>
 </Section>
 `

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/section/properties.md b/packages/dnb-design-system-portal/src/docs/uilib/components/section/properties.md
@@ -4,12 +4,13 @@ showTabs: true
 
 ## Properties
 
-| Properties                                  | Description                                                                                                                                                                                                                                                            |
-| ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `style_type`                                | _(optional)_ to define the style of the visual helper. Use and `Style ID` from below. Defaults to `mint-green-12`.                                                                                                                                                     |
-| `spacing`                                   | _(optional)_ will add the default spacing around the wrapped content. Use `spacing-large`, `spacing-medium` or `spacing-small`. Defaults to `false`. If `true`, then `spacing-default` is used. Se the [available sizes](/uilib/usage/layout/spacing#spacing-helpers). |
-| `element`                                   | _(optional)_ define what HTML element should be used. Defaults to `<section>`.                                                                                                                                                                                         |
-| [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                                                                                                                                                                                  |
+| Properties                                  | Description                                                                                                                                                                                                                          |
+| ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `style_type`                                | _(optional)_ to define the style of the visual helper. Use and `Style ID` from below. Defaults to `mint-green-12`.                                                                                                                   |
+| `spacing`                                   | _(optional)_ will add the default spacing around the wrapped content. Use `large`, `medium` or `small`. Defaults to `false`. If `true`, then `large` is used. Se the [available sizes](/uilib/usage/layout/spacing#spacing-helpers). |
+| `element`                                   | _(optional)_ define what HTML element should be used. Defaults to `<section>`.                                                                                                                                                       |
+| `inner_ref`                                 | _(optional)_ by providing a React Ref we can get the internally used element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`.                                                                       |
+| [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                                                                                                                                                |
 
 ## Styles
 

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/info.md b/packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/info.md
@@ -56,9 +56,9 @@ If you are able to provide the `data` to the Sidebar as well, it will use it dur
 
 The mode property is mandatory. It tells the component how it should behave.
 
-- [`strict`](/uilib/components/step-indicator#strict-mode)
-- [`loose`](/uilib/components/step-indicator#loose-mode)
-- [`static`](/uilib/components/step-indicator#static-mode)
+- [strict](/uilib/components/step-indicator#strict-mode)
+- [loose](/uilib/components/step-indicator#loose-mode)
+- [static](/uilib/components/step-indicator#static-mode)
 
 ### Strict mode
 

diff --git a/packages/dnb-eufemia/src/components/breadcrumb/Breadcrumb.tsx b/packages/dnb-eufemia/src/components/breadcrumb/Breadcrumb.tsx
@@ -4,7 +4,7 @@ import classnames from 'classnames'
 // Components
 import { createSkeletonClass } from '../skeleton/SkeletonHelper'
 import { createSpacingClasses } from '../space/SpacingHelper'
-import Section from '../section/Section'
+import Section, { SectionStyleTypes } from '../section/Section'
 import Button from '../button/Button'
 
 // Shared
@@ -99,13 +99,13 @@ export interface BreadcrumbProps {
    * Use one of the Section component style types (style_type)
    * Default: transparent
    */
-  styleType?: string
+  styleType?: SectionStyleTypes
 
   /**
    * Use one of the Section component style types (style_type)
    * Default: pistachio
    */
-  collapsedStyleType?: string
+  collapsedStyleType?: SectionStyleTypes
 
   /**
    * Spacing around the breadcrumb

diff --git a/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap b/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap
@@ -918,9 +918,7 @@ exports[`Dialog component snapshot should match component snapshot 1`] = `
                             className="dnb-dialog__navigation"
                           >
                             <Section
-                              class={null}
                               className="dnb-modal__header__bar dnb-dialog__navigation"
-                              element="section"
                               inner_ref={
                                 Object {
                                   "current": <section
@@ -974,7 +972,6 @@ exports[`Dialog component snapshot should match component snapshot 1`] = `
                                   </section>,
                                 }
                               }
-                              spacing={null}
                               style_type="white"
                             >
                               <section
@@ -1166,12 +1163,8 @@ exports[`Dialog component snapshot should match component snapshot 1`] = `
                             title_class="dnb-dialog__title"
                           >
                             <Section
-                              class={null}
                               className="dnb-dialog__header"
-                              element="section"
                               id="dnb-modal-dialog_id-title"
-                              inner_ref={null}
-                              spacing={null}
                               style_type="white"
                             >
                               <section

diff --git a/packages/dnb-eufemia/src/components/dialog/parts/DialogBody.tsx b/packages/dnb-eufemia/src/components/dialog/parts/DialogBody.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import ModalInner, { ModalInnerProps } from '../../modal/parts/ModalInner'
+import { SectionStyleTypes } from '../../Section'
 
 interface DialogBodyProps extends ModalInnerProps {
   /**
@@ -11,7 +12,7 @@ interface DialogBodyProps extends ModalInnerProps {
   /**
    * Color/Style of the dialog body
    */
-  styleType?: string
+  styleType?: SectionStyleTypes
 }
 
 export default function DialogBody({

diff --git a/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap b/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
@@ -935,9 +935,7 @@ exports[`Drawer component snapshot should match component snapshot 1`] = `
                           shadow_class="dnb-drawer__navigation--sticky"
                         >
                           <Section
-                            class={null}
                             className="dnb-modal__header__bar dnb-drawer__navigation"
-                            element="section"
                             inner_ref={
                               Object {
                                 "current": <section
@@ -991,7 +989,6 @@ exports[`Drawer component snapshot should match component snapshot 1`] = `
                                 </section>,
                               }
                             }
-                            spacing={null}
                             style_type="white"
                           >
                             <section
@@ -1182,12 +1179,8 @@ exports[`Drawer component snapshot should match component snapshot 1`] = `
                           title_class="dnb-drawer__title"
                         >
                           <Section
-                            class={null}
                             className="dnb-drawer__header"
-                            element="section"
                             id="dnb-modal-drawer_id-title"
-                            inner_ref={null}
-                            spacing={null}
                             style_type="white"
                           >
                             <section

diff --git a/packages/dnb-eufemia/src/components/drawer/parts/DrawerBody.tsx b/packages/dnb-eufemia/src/components/drawer/parts/DrawerBody.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import ModalInner, { ModalInnerProps } from '../../modal/parts/ModalInner'
+import { SectionStyleTypes } from '../../Section'
 
 interface DrawerBodyProps extends ModalInnerProps {
   /**
@@ -11,7 +12,7 @@ interface DrawerBodyProps extends ModalInnerProps {
   /**
    * Color/Style of the drawer body
    */
-  styleType?: string
+  styleType?: SectionStyleTypes
 }
 
 export default function DrawerBody({

diff --git a/packages/dnb-eufemia/src/components/form-row/FormRow.js b/packages/dnb-eufemia/src/components/form-row/FormRow.js
@@ -18,6 +18,7 @@ import AlignmentHelper from '../../shared/AlignmentHelper'
 
 import Context from '../../shared/Context'
 import FormLabel from '../form-label/FormLabel'
+import Section from '../section/Section'
 import {
   spacingPropTypes,
   createSpacingClasses,
@@ -216,12 +217,6 @@ export default class FormRow extends React.PureComponent {
           `dnb-form-row__indent--${isTrue(indent) ? 'default' : indent}`,
         centered && 'dnb-form-row--centered',
         isNested && 'dnb-form-row--nested',
-        section_style ? `dnb-section dnb-section--${section_style}` : null,
-        section_spacing
-          ? `dnb-section--spacing-${
-              isTrue(section_spacing) ? 'default' : section_spacing
-            }`
-          : null,
         createSpacingClasses(props),
         className,
         _className
@@ -261,7 +256,12 @@ export default class FormRow extends React.PureComponent {
     return (
       <Context.Provider value={providerContext}>
         <Fieldset useFieldset={useFieldset}>
-          <div {...params}>
+          <Section
+            style_type={section_style || 'transparent'}
+            spacing={section_spacing}
+            element="div"
+            {...params}
+          >
             <AlignmentHelper />
 
             {label && (
@@ -302,7 +302,7 @@ export default class FormRow extends React.PureComponent {
                 {children}
               </div>
             )}
-          </div>
+          </Section>
         </Fieldset>
       </Context.Provider>
     )

diff --git a/packages/dnb-eufemia/src/components/form-row/__tests__/FormRow.test.js b/packages/dnb-eufemia/src/components/form-row/__tests__/FormRow.test.js
@@ -34,14 +34,16 @@ describe('FormRow component', () => {
   it('should have vertical direction class', () => {
     const Comp = mount(<Component {...props} direction="vertical" />)
     expect(
-      Comp.find('.dnb-form-row').hasClass('dnb-form-row--vertical')
+      Comp.find('.dnb-form-row').last().hasClass('dnb-form-row--vertical')
     ).toBe(true)
   })
 
   it('should have correct indent class', () => {
     const Comp = mount(<Component {...props} indent="large" />)
     expect(
-      Comp.find('.dnb-form-row').hasClass('dnb-form-row__indent--large')
+      Comp.find('.dnb-form-row')
+        .last()
+        .hasClass('dnb-form-row__indent--large')
     ).toBe(true)
   })