feat(Breadcumb): align spacing and add small, medium and large

dnbexperience · Sep 28, 2022 · 699629c · 699629c
1 parent 8e85bdb
commit 699629c
Show file tree

Hide file tree

Showing 11 changed files with 698 additions and 25 deletions.
diff --git a/...ges/dnb-design-system-portal/src/docs/uilib/components/breadcrumb/properties.md b/...ges/dnb-design-system-portal/src/docs/uilib/components/breadcrumb/properties.md
@@ -22,7 +22,7 @@ showTabs: true
 | `collapsedStyleType`                        | _(optional)_ Use one of the Section component style types (style_type). Defaults to `pistachio`.                                                                                                        |
 | `className`                                 | _(optional)_ Custom className for the component root.                                                                                                                                                   |
 | `isCollapsed`                               | _(optional)_ For variant `collapse`, override isCollapsed for the collapsed content by updating this value using the provided property `onClick`.                                                       |
-| `spacing`                                   | _(optional)_ Include spacing in breadcrumb and collapse content by setting `spacing={true}` prop. Defaults to `false`.                                                                                  |
+| `spacing`                                   | _(optional)_ Include spacing properties from [Section](/uilib/components/section/properties) in breadcrumb. If only `true` is given, the spacing will be `small`. Defaults to `false`.                  |
 | [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                                                                                                                   |
 
 ### `Breadcrumb.Item` properties

diff --git a/packages/dnb-eufemia/src/components/breadcrumb/Breadcrumb.tsx b/packages/dnb-eufemia/src/components/breadcrumb/Breadcrumb.tsx
@@ -4,7 +4,10 @@ import classnames from 'classnames'
 // Components
 import { createSkeletonClass } from '../skeleton/SkeletonHelper'
 import { createSpacingClasses } from '../space/SpacingHelper'
-import Section, { SectionStyleTypes } from '../section/Section'
+import Section, {
+  SectionSpacing,
+  SectionStyleTypes,
+} from '../section/Section'
 import Button from '../button/Button'
 
 // Shared
@@ -17,6 +20,7 @@ import { SkeletonShow } from '../skeleton/Skeleton'
 import BreadcrumbItem, { BreadcrumbItemProps } from './BreadcrumbItem'
 import {
   convertJsxToString,
+  isTrue,
   validateDOMAttributes,
   extendPropsWithContext,
 } from '../../shared/component-helper'
@@ -108,10 +112,10 @@ export interface BreadcrumbProps {
   collapsedStyleType?: SectionStyleTypes
 
   /**
-   * Spacing around the breadcrumb
+   * Include spacing properties from the Section component in breadcrumb. If only `true` is given, the spacing will be `small`.
    * Default: false
    */
-  spacing?: boolean
+  spacing?: SectionSpacing
 
   /**
    * Will disable the height animation
@@ -188,20 +192,25 @@ const Breadcrumb = (localProps: BreadcrumbProps & ISpacingProps) => {
 
   validateDOMAttributes(allProps, props)
 
+  const innerSpacing = isTrue(spacing) ? 'small' : spacing
+
   return (
     <nav
       aria-label={convertJsxToString(navText)}
       className={classnames(
         'dnb-breadcrumb',
         skeletonClasses,
         spacingClasses,
-        spacing && 'dnb-breadcrumb--spacing',
         className
       )}
       data-testid="breadcrumb-nav"
       {...props}
     >
-      <Section style_type={styleType} className="dnb-breadcrumb__bar">
+      <Section
+        className="dnb-breadcrumb__bar"
+        style_type={styleType || 'transparent'}
+        spacing={isSmallScreen ? innerSpacing : false}
+      >
         {currentVariant === 'collapse' && (
           <Button
             text={backToText}

diff --git a/packages/dnb-eufemia/src/components/breadcrumb/BreadcrumbMultiple.tsx b/packages/dnb-eufemia/src/components/breadcrumb/BreadcrumbMultiple.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import HeightAnimation from '../height-animation/HeightAnimation'
+import Section from '../section/Section'
 import BreadcrumbItem, { BreadcrumbItemProps } from './BreadcrumbItem'
 
 type BreadcrumbMultipleProps = {
@@ -22,7 +23,11 @@ export const BreadcrumbMultiple = ({
       data-testid="breadcrumb-collapse"
       className="dnb-breadcrumb__animation"
     >
-      <ol className="dnb-breadcrumb__list">
+      <Section
+        className="dnb-breadcrumb__list"
+        element="ol"
+        style_type="transparent"
+      >
         {data?.map((breadcrumbItem, i) => {
           const style = { '--delay': String(i) } as React.CSSProperties
           return (
@@ -40,7 +45,7 @@ export const BreadcrumbMultiple = ({
         })}
 
         {items}
-      </ol>
+      </Section>
     </HeightAnimation>
   )
 }