From 699629ceeff3258d2277f1a83c9160c11e4e59b1 Mon Sep 17 00:00:00 2001
From: Tobias <tobias@tujo.no>
Date: Wed, 21 Sep 2022 15:39:30 +0200
Subject: [PATCH] feat(Breadcumb): align spacing and add small, medium and
 large

---
 .../uilib/components/breadcrumb/properties.md |   2 +-
 .../src/components/breadcrumb/Breadcrumb.tsx  |  19 +-
 .../breadcrumb/BreadcrumbMultiple.tsx         |   9 +-
 .../__snapshots__/Breadcrumb.test.tsx.snap    | 666 +++++++++++++++++-
 ...match-breadcrumb-collapse-1-99672.snap.png | Bin 2097 -> 2039 bytes
 ...readcrumb-collapse-opened-1-2b97c.snap.png | Bin 7622 -> 7577 bytes
 ...match-breadcrumb-multiple-1-b85aa.snap.png | Bin 7424 -> 7306 bytes
 ...mb-multiple-with-children-1-dbdd2.snap.png | Bin 4813 -> 4719 bytes
 .../breadcrumb/stories/Breadcrumb.stories.tsx |   6 +-
 .../breadcrumb/style/_breadcrumb.scss         |  17 +-
 .../breadcrumb/style/dnb-breadcrumb.scss      |   4 +
 11 files changed, 698 insertions(+), 25 deletions(-)

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/breadcrumb/properties.md b/packages/dnb-design-system-portal/src/docs/uilib/components/breadcrumb/properties.md
index dcb7d6c457c..2a5833752b7 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/breadcrumb/properties.md
+++ b/packages/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
index 7867bb43be3..cf35e74d2d8 100644
--- 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,6 +192,8 @@ const Breadcrumb = (localProps: BreadcrumbProps & ISpacingProps) => {
 
   validateDOMAttributes(allProps, props)
 
+  const innerSpacing = isTrue(spacing) ? 'small' : spacing
+
   return (
     <nav
       aria-label={convertJsxToString(navText)}
@@ -195,13 +201,16 @@ const Breadcrumb = (localProps: BreadcrumbProps & ISpacingProps) => {
         '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
index a94fc8677f9..4bb5f504935 100644
--- 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>
   )
 }
diff --git a/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap b/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap
index f7b8e3c1a9d..0d6534faa4b 100644
--- a/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap
@@ -21,6 +21,660 @@ exports[`Breadcrumb scss have to match snapshot 1`] = `
  * Document Reset
  *
  */
+/*
+* DNB Button
+*
+*/
+/*
+* DNB icon
+*
+*/
+/*
+* Icon component
+*
+*/
+.dnb-icon {
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 1rem;
+  line-height: 1rem;
+  color: inherit;
+  width: 1em;
+  height: 1em; }
+  .dnb-icon img,
+  .dnb-icon svg {
+    width: inherit;
+    height: inherit;
+    shape-rendering: geometricPrecision;
+    vertical-align: top; }
+  .dnb-icon svg[width='100%'] {
+    width: inherit; }
+  .dnb-icon svg[height='100%'] {
+    height: inherit; }
+  .dnb-icon--inherit-color svg:not([fill]),
+  .dnb-icon--inherit-color svg [fill] {
+    fill: currentColor; }
+  .dnb-icon--inherit-color svg [stroke] {
+    stroke: currentColor; }
+  .dnb-icon--small {
+    font-size: 0.75rem; }
+  .dnb-icon--default {
+    font-size: 1rem; }
+  .dnb-icon--medium {
+    font-size: 1.5rem; }
+  .dnb-icon--large {
+    font-size: 2rem; }
+  .dnb-icon--x-large {
+    font-size: 2.5rem; }
+  .dnb-icon--xx-large {
+    font-size: 3rem; }
+  .dnb-icon--custom-size {
+    width: auto;
+    height: auto; }
+  .dnb-icon--auto {
+    font-size: 1em; }
+  .dnb-icon--auto > .dnb-icon--wrapper {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center; }
+  h1 .dnb-icon,
+  h2 .dnb-icon,
+  h3 .dnb-icon,
+  h4 .dnb-icon,
+  h5 .dnb-icon,
+  h6 .dnb-icon {
+    vertical-align: middle; }
+  .dnb-icon.dnb-skeleton {
+    color: var(--skeleton-color) !important; }
+    .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after {
+      content: none !important; }
+  @media screen and (-ms-high-contrast: none) {
+    .dnb-icon {
+      flex: none; } }
+
+/*
+* DNB Tooltip
+*
+*/
+.dnb-tooltip {
+  font-family: var(--font-family-default);
+  font-weight: var(--font-weight-basis);
+  font-size: var(--font-size-small);
+  font-style: normal;
+  line-height: var(--line-height-basis);
+  color: var(--color-black-80, #333);
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  /**
+  * Ensure consistency and use the same as HTML reset -> html {...}
+  * between base and code package
+  */
+  -moz-tab-size: 4;
+  tab-size: 4;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  word-break: break-word;
+  /**
+  * 1. Remove repeating backgrounds in all browsers (opinionated).
+  * 2. Add border box sizing in all browsers (opinionated).
+  */
+  /**
+  * 1. Add text decoration inheritance in all browsers (opinionated).
+  * 2. Add vertical alignment inheritance in all browsers (opinionated).
+  */
+  margin: 0;
+  padding: 0; }
+  .dnb-tooltip *,
+  .dnb-tooltip ::before,
+  .dnb-tooltip ::after {
+    background-repeat: no-repeat;
+    /* 1 */
+    box-sizing: border-box;
+    /* 2 */ }
+  .dnb-tooltip ::before,
+  .dnb-tooltip ::after {
+    text-decoration: inherit;
+    /* 1 */
+    vertical-align: inherit;
+    /* 2 */ }
+
+/*
+* Tooltip component
+*
+*/
+.dnb-tooltip {
+  position: absolute;
+  z-index: 3100;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0 1rem;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1); }
+  .dnb-tooltip--large {
+    padding: 0.25rem 1rem; }
+  .dnb-tooltip--animate_position {
+    transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1); }
+  .dnb-tooltip--active {
+    visibility: visible;
+    /*
+      because of the first \\"show\\" we also use animation
+      also, use forwards because of the usage of visibility
+    */
+    animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; }
+  html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation {
+    animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards; }
+  .dnb-tooltip--hide {
+    visibility: visible;
+    animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; }
+  .dnb-tooltip--hide.dnb-tooltip--no-animation {
+    animation: hide-tooltip 1ms linear forwards; }
+  .dnb-tooltip--fixed {
+    position: fixed; }
+  html[data-visual-test] .dnb-tooltip--hide {
+    animation: hide-tooltip 1ms linear 1s forwards; }
+  .dnb-tooltip__portal {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0; }
+  .dnb-tooltip__content {
+    min-width: 2rem;
+    min-height: 1.5rem;
+    padding: 0; }
+  .dnb-tooltip__arrow {
+    position: absolute;
+    pointer-events: none;
+    margin: 0;
+    width: 1rem;
+    height: 0.5rem;
+    overflow: hidden; }
+    .dnb-tooltip__arrow::before {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 1rem;
+      height: 1rem;
+      transform: translateY(70%) rotate(45deg); }
+    .dnb-tooltip__arrow__position--bottom {
+      top: -0.5rem; }
+    .dnb-tooltip__arrow__position--top {
+      bottom: -0.5rem;
+      transform: rotate(180deg); }
+    .dnb-tooltip__arrow__position--left {
+      right: -0.75rem;
+      margin-right: 3px;
+      transform: rotate(90deg); }
+    .dnb-tooltip__arrow__position--right {
+      left: -0.75rem;
+      margin-left: 3px;
+      transform: rotate(270deg); }
+    .dnb-tooltip__arrow__arrow--left {
+      align-self: flex-start; }
+    .dnb-tooltip__arrow__arrow--right {
+      align-self: flex-end; }
+
+@keyframes show-tooltip {
+  from {
+    opacity: 0; }
+  to {
+    opacity: 1; } }
+
+@keyframes hide-tooltip {
+  from {
+    opacity: 1; }
+  to {
+    opacity: 0;
+    visibility: hidden; } }
+
+/*
+* DNB FormStatus
+*
+*/
+.dnb-form-status {
+  font-family: var(--font-family-default);
+  font-weight: var(--font-weight-basis);
+  font-size: var(--font-size-small);
+  font-style: normal;
+  line-height: var(--line-height-basis);
+  color: var(--color-black-80, #333);
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  /**
+  * Ensure consistency and use the same as HTML reset -> html {...}
+  * between base and code package
+  */
+  -moz-tab-size: 4;
+  tab-size: 4;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  word-break: break-word;
+  /**
+  * 1. Remove repeating backgrounds in all browsers (opinionated).
+  * 2. Add border box sizing in all browsers (opinionated).
+  */
+  /**
+  * 1. Add text decoration inheritance in all browsers (opinionated).
+  * 2. Add vertical alignment inheritance in all browsers (opinionated).
+  */
+  margin: 0;
+  padding: 0; }
+  .dnb-form-status *,
+  .dnb-form-status ::before,
+  .dnb-form-status ::after {
+    background-repeat: no-repeat;
+    /* 1 */
+    box-sizing: border-box;
+    /* 2 */ }
+  .dnb-form-status ::before,
+  .dnb-form-status ::after {
+    text-decoration: inherit;
+    /* 1 */
+    vertical-align: inherit;
+    /* 2 */ }
+
+/*
+ * FormStatus component
+ *
+ */
+:root {
+  --form-status-radius: 0.25rem; }
+
+.dnb-form-status {
+  display: flex;
+  opacity: 1;
+  transition: height 400ms cubic-bezier(0.42, 0, 0, 1), opacity 400ms cubic-bezier(0.42, 0, 0, 1), margin 400ms cubic-bezier(0.42, 0, 0, 1), padding 400ms cubic-bezier(0.42, 0, 0, 1); }
+  .dnb-form-status--hidden {
+    will-change: height, opacity, margin, padding;
+    width: 0;
+    height: 0;
+    opacity: 0; }
+  .dnb-form-status--is-animating {
+    overflow: hidden;
+    width: auto; }
+  .dnb-form-status--disappear, .dnb-form-status--hidden {
+    margin: 0 !important;
+    padding: 0 !important; }
+  .dnb-form-status__shell {
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    min-width: inherit;
+    border-radius: var(--form-status-radius); }
+  .dnb-form-status__text {
+    padding: 0.625rem 1rem;
+    cursor: text;
+    color: inherit;
+    line-height: var(--line-height-small);
+    font-size: var(--font-size-small);
+    white-space: normal; }
+    button .dnb-form-status__text {
+      cursor: inherit; }
+    .dnb-form-status__text .dnb-anchor {
+      font-size: inherit; }
+  .dnb-icon + .dnb-form-status__text {
+    padding-left: 0.5rem; }
+  .dnb-form-status__shell > .dnb-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; }
+  .dnb-form-status__size--large .dnb-form-status__text {
+    padding-top: 1.125rem;
+    padding-bottom: 1.125rem; }
+  .dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon {
+    margin-top: 0.6666666em;
+    margin-bottom: 0.6666666em; }
+  .dnb-form-status--stretch {
+    flex-grow: 1; }
+  .dnb-form-status--stretch .dnb-form-status__shell {
+    width: 100%; }
+  .dnb-form-status--stretch .dnb-form-status__text {
+    max-width: 47rem; }
+  .dnb-form-status[hidden] {
+    display: none; }
+  .dnb-form-status--no-animation,
+  html[data-visual-test] .dnb-form-status {
+    transition-duration: 1ms !important; }
+  @media screen and (-ms-high-contrast: none) {
+    .dnb-form-status__shell > .dnb-icon {
+      border-width: 1px; } }
+
+.dnb-button {
+  font-family: var(--font-family-default);
+  font-weight: var(--font-weight-basis);
+  font-size: var(--font-size-small);
+  font-style: normal;
+  line-height: var(--line-height-basis);
+  color: var(--color-black-80, #333);
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  /**
+  * Ensure consistency and use the same as HTML reset -> html {...}
+  * between base and code package
+  */
+  -moz-tab-size: 4;
+  tab-size: 4;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  word-break: break-word;
+  /**
+  * 1. Remove repeating backgrounds in all browsers (opinionated).
+  * 2. Add border box sizing in all browsers (opinionated).
+  */
+  /**
+  * 1. Add text decoration inheritance in all browsers (opinionated).
+  * 2. Add vertical alignment inheritance in all browsers (opinionated).
+  */
+  margin: 0;
+  padding: 0; }
+  .dnb-button *,
+  .dnb-button ::before,
+  .dnb-button ::after {
+    background-repeat: no-repeat;
+    /* 1 */
+    box-sizing: border-box;
+    /* 2 */ }
+  .dnb-button ::before,
+  .dnb-button ::after {
+    text-decoration: inherit;
+    /* 1 */
+    vertical-align: inherit;
+    /* 2 */ }
+
+/*
+* Button component
+*
+*/
+:root {
+  --button-font-size: var(--font-size-basis);
+  --button-font-size-small: var(--font-size-small);
+  --button-width: 2.5rem;
+  --button-height: 2.5rem;
+  --button-width--small: 1.5rem;
+  --button-height--small: 1.5rem;
+  --button-width--medium: 2rem;
+  --button-height--medium: 2rem;
+  --button-width--large: 3rem;
+  --button-height--large: 3rem;
+  --button-icon-size: 1rem;
+  --button-border-width: 0.0625rem;
+  --button-border-width--hover: 0.1875rem;
+  --button-border-radius: calc(var(--button-height) / 2);
+  --button-border-radius--small: calc(var(--button-height--small) / 2);
+  --button-border-radius--medium: calc(var(--button-height--medium) / 2);
+  --button-border-radius--large: calc(var(--button-height--large) / 2); }
+
+.dnb-button {
+  position: relative;
+  user-select: none;
+  -webkit-user-select: none;
+  cursor: pointer;
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--button-width);
+  height: auto;
+  padding: 0;
+  border: var(--button-border-width) solid transparent;
+  border-radius: var(--button-border-radius);
+  text-decoration: none;
+  font-size: var(--font-size-small);
+  /* stylelint-disable-next-line */ }
+  .dnb-button--wrap {
+    overflow-wrap: break-word;
+    white-space: normal; }
+  .dnb-button,
+  .dnb-core-style .dnb-button {
+    line-height: var(--button-height); }
+  .dnb-button__text {
+    margin: 0.5rem 0;
+    font-size: var(--button-font-size);
+    line-height: var(--line-height-basis);
+    color: inherit;
+    transform: translateY(-0.03125rem); }
+    .dnb-button__text [data-os='linux'] {
+      transform: translateY(-0.035rem); }
+  .dnb-button__alignment {
+    display: inline-block;
+    width: 0; }
+  .dnb-button__bounding {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    transform: scale(1.1, 1.4);
+    background-color: transparent;
+    border-radius: var(--button-border-radius); }
+  .dnb-button--has-text {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem; }
+  .dnb-button--size-small {
+    width: var(--button-width--small);
+    font-size: var(--button-font-size-small);
+    border-radius: var(--button-border-radius--small); }
+    .dnb-button--size-small,
+    .dnb-core-style .dnb-button--size-small {
+      line-height: var(--button-height--small); }
+  .dnb-button--size-small .dnb-button__text {
+    margin: 0; }
+  .dnb-button--has-text.dnb-button--size-small {
+    padding-left: 1rem;
+    padding-right: 1rem; }
+  .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small {
+    padding-left: 0.5rem; }
+  .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small {
+    padding-right: 0.5rem; }
+  .dnb-button--size-medium {
+    width: var(--button-width--medium);
+    border-radius: var(--button-border-radius--medium); }
+    .dnb-button--size-medium,
+    .dnb-core-style .dnb-button--size-medium {
+      line-height: var(--button-height--medium); }
+  .dnb-button--size-medium .dnb-button__text {
+    margin: 0; }
+  .dnb-button--has-text.dnb-button--size-medium {
+    padding-left: 1rem;
+    padding-right: 1rem; }
+  .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium {
+    padding-left: 0.5rem; }
+  .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium {
+    padding-right: 0.5rem; }
+  .dnb-button--size-large {
+    width: var(--button-width--large);
+    border-radius: var(--button-border-radius--large); }
+    .dnb-button--size-large,
+    .dnb-core-style .dnb-button--size-large {
+      line-height: var(--button-height--large); }
+  .dnb-button--has-text.dnb-button--size-large {
+    padding-left: 2rem;
+    padding-right: 2rem; }
+  .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large {
+    padding-left: 1rem; }
+  .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large {
+    padding-right: 1rem; }
+  .dnb-button--has-text {
+    width: auto; }
+  .dnb-button--has-text .dnb-button__icon {
+    margin: 0 calc(var(--button-icon-size) / 2); }
+  .dnb-button--has-text.dnb-button--icon-position-left {
+    padding-left: 0.5rem; }
+  .dnb-button--has-text.dnb-button--icon-position-right {
+    padding-right: 0.5rem; }
+  .dnb-button--has-text.dnb-button--has-icon .dnb-button__icon {
+    order: 2; }
+  .dnb-button--has-text.dnb-button--has-icon .dnb-button__text {
+    order: 1; }
+  .dnb-button:not(.dnb-button--has-text) .dnb-button__icon {
+    width: inherit; }
+  .dnb-button__icon.dnb-icon svg:not([width]):not([height]) {
+    width: var(--button-icon-size);
+    height: var(--button-icon-size); }
+  [href] > .dnb-button__icon.dnb-icon {
+    line-height: var(--button-font-size); }
+  .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon {
+    order: 1; }
+  .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *,
+  .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *,
+  .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text {
+    order: 2; }
+  .dnb-button--stretch {
+    width: 100%; }
+  .dnb-button--reset {
+    margin: 0;
+    padding: 0;
+    width: auto;
+    height: auto;
+    overflow: visible;
+    border: none;
+    border-radius: 0;
+    background-color: transparent;
+    appearance: none;
+    box-shadow: none;
+    color: inherit;
+    font: inherit;
+    text-align: inherit;
+    line-height: inherit; }
+    html:not([data-whatintent='touch']) .dnb-button--reset:hover[disabled] {
+      cursor: not-allowed; }
+    html:not([data-whatintent='touch']) .dnb-button--reset:hover:not([disabled]) {
+      box-shadow: none;
+      border: none; }
+    .dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active {
+      outline: none; }
+      html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active {
+        --border-color: var(--color-emerald-green);
+        box-shadow: 0 0 0 0.125rem var(--border-color);
+        border-color: transparent; }
+        @media screen and (-ms-high-contrast: none) {
+          html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active {
+            box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
+    html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus,
+    html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active {
+      box-shadow: none;
+      color: inherit;
+      border: none; }
+  .dnb-button[type='button'], .dnb-button[type='reset'], .dnb-button[type='submit'] {
+    appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none; }
+  .dnb-button[disabled] {
+    cursor: not-allowed;
+    outline: none; }
+  .dnb-form-row--vertical .dnb-form-row__content > .dnb-button {
+    align-self: flex-start; }
+  .dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text {
+    white-space: nowrap; }
+  .dnb-button + .dnb-form-status {
+    margin-top: 0.5rem; }
+  @media screen and (-ms-high-contrast: none) {
+    .dnb-button {
+      flex: none; }
+      .dnb-button__icon, .dnb-button__text {
+        transform: translateY(-0.0625rem); } }
+
+/* Firefox includes a hidden border which messes up button dimensions */
+button.dnb-button::-moz-focus-inner {
+  border: none; }
+
+/*
+* DNB Section
+*
+*/
+.dnb-section {
+  font-family: var(--font-family-default);
+  font-weight: var(--font-weight-basis);
+  font-size: var(--font-size-small);
+  font-style: normal;
+  line-height: var(--line-height-basis);
+  color: var(--color-black-80, #333);
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  /**
+  * Ensure consistency and use the same as HTML reset -> html {...}
+  * between base and code package
+  */
+  -moz-tab-size: 4;
+  tab-size: 4;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  word-break: break-word;
+  /**
+  * 1. Remove repeating backgrounds in all browsers (opinionated).
+  * 2. Add border box sizing in all browsers (opinionated).
+  */
+  /**
+  * 1. Add text decoration inheritance in all browsers (opinionated).
+  * 2. Add vertical alignment inheritance in all browsers (opinionated).
+  */
+  margin: 0;
+  padding: 0; }
+  .dnb-section *,
+  .dnb-section ::before,
+  .dnb-section ::after {
+    background-repeat: no-repeat;
+    /* 1 */
+    box-sizing: border-box;
+    /* 2 */ }
+  .dnb-section ::before,
+  .dnb-section ::after {
+    text-decoration: inherit;
+    /* 1 */
+    vertical-align: inherit;
+    /* 2 */ }
+
+/*
+ * Section component
+ *
+ */
+.dnb-section {
+  position: relative;
+  display: flow-root; }
+  .dnb-section::after {
+    content: '';
+    position: absolute;
+    z-index: -15;
+    left: -100vw;
+    top: 0;
+    width: 100vw;
+    height: 100%;
+    color: var(--color-mint-green-12);
+    background-color: currentColor;
+    box-shadow: 99vw 0 0 0 currentColor, 198vw 0 0 0 currentColor, 297vw 0 0 0 currentColor, 396vw 0 0 0 currentColor; }
+  .dnb-section .dnb-section::after {
+    z-index: -14; }
+  .dnb-section .dnb-section .dnb-section::after {
+    z-index: -13; }
+  .dnb-section .dnb-section .dnb-section .dnb-section::after {
+    z-index: -12; }
+  .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
+    z-index: -11; }
+  .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
+    z-index: -10; }
+  .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
+    z-index: -9; }
+  .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
+    z-index: -8; }
+  .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
+    z-index: -7; }
+  .dnb-section--spacing-x-small {
+    padding: var(--spacing-x-small) 0; }
+  .dnb-section--spacing-small {
+    padding: var(--spacing-small) 0; }
+  .dnb-section--spacing-medium {
+    padding: var(--spacing-medium) 0; }
+  .dnb-section--spacing, .dnb-section--spacing-large {
+    padding: var(--spacing-large) 0; }
+
 .dnb-breadcrumb {
   font-family: var(--font-family-default);
   font-weight: var(--font-weight-basis);
@@ -75,21 +729,20 @@ exports[`Breadcrumb scss have to match snapshot 1`] = `
   flex-direction: column; }
   .dnb-breadcrumb__bar.dnb-section {
     display: flex; }
-  .dnb-breadcrumb--spacing .dnb-breadcrumb__bar.dnb-section {
-    padding: var(--spacing-x-small) 0; }
   .dnb-breadcrumb__list {
     list-style: none;
     margin: 0;
     padding: 0;
-    display: flex;
     flex-wrap: wrap;
     flex-direction: row;
     align-items: center; }
+    .dnb-breadcrumb__list, .dnb-breadcrumb__list.dnb-section {
+      display: flex; }
   .dnb-breadcrumb__item__span {
     display: flex;
     align-items: center;
     line-height: normal;
-    padding: var(--spacing-x-small) 0; }
+    padding: 0.5rem 0; }
     .dnb-breadcrumb__item__span__icon {
       margin-left: calc(var(--button-icon-size) / 2);
       margin-right: 0.5rem; }
@@ -109,8 +762,7 @@ exports[`Breadcrumb scss have to match snapshot 1`] = `
   .dnb-breadcrumb__collapse .dnb-breadcrumb__list {
     flex-direction: column;
     align-items: flex-start;
-    padding: 0 var(--spacing-large); }
-  .dnb-breadcrumb--spacing .dnb-breadcrumb__collapse .dnb-breadcrumb__list {
-    padding: var(--spacing-x-small) var(--spacing-large); }
+    margin: 0.5rem 0;
+    margin-left: 1.5rem; }
 "
 `;
diff --git a/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb-screenshot-test-js-breadcrumb-screenshot-have-to-match-breadcrumb-collapse-1-99672.snap.png b/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb-screenshot-test-js-breadcrumb-screenshot-have-to-match-breadcrumb-collapse-1-99672.snap.png
index 77deb8b17bc65e31ffeb105ff096f183365b1d8b..4e5ed2f60163f9f06341f9a8f19e0684563bfe20 100644
GIT binary patch
delta 1707
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
BVR--m

delta 1715
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
JPDHLkV1g6?am4@t

diff --git a/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb-screenshot-test-js-breadcrumb-screenshot-have-to-match-breadcrumb-collapse-opened-1-2b97c.snap.png b/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb-screenshot-test-js-breadcrumb-screenshot-have-to-match-breadcrumb-collapse-opened-1-2b97c.snap.png
index cf5bfff9ea32f03b1c87dd649a17a20f3491198a..82050797f8458edf8e9a8e2a88eb14dd9ada08d7 100644
GIT binary patch
literal 7577
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
W3<6*8@#2qM0iR`*J{C(G`~MHYM-i_8

literal 7622
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

diff --git a/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb-screenshot-test-js-breadcrumb-screenshot-have-to-match-breadcrumb-multiple-1-b85aa.snap.png b/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb-screenshot-test-js-breadcrumb-screenshot-have-to-match-breadcrumb-multiple-1-b85aa.snap.png
index 2a40ff4f177ed356a3295e18f71b12255b6ef7d6..27872ca3369df183233a5fedeccdb3b2591cfb9c 100644
GIT binary patch
delta 53
zcmZp$>av_5&ga3w#=yYvXOGS=1_qhHjj9fen-?(hON)K{FS7o^)Ojc4X91-dJYD@<
J);T3K0RYGa5$ON`

delta 59
zcmeCOY_OUj&KJSK#=yYvKT9u>fkEc@MpXyKiSMm9r!w+OPkdl4_VNEh+Y4KBBpG)D
P6)||a`njxgN@xNAG?5e0

diff --git a/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb-screenshot-test-js-breadcrumb-screenshot-have-to-match-breadcrumb-multiple-with-children-1-dbdd2.snap.png b/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb-screenshot-test-js-breadcrumb-screenshot-have-to-match-breadcrumb-multiple-with-children-1-dbdd2.snap.png
index 54fd2ef1e9cfc01f984a383c09f74e5dad311979..87ad2842a22b0c036e31e41a85dce33ebf84835b 100644
GIT binary patch
delta 66
zcmX@B`d(#%xU>fc8v_Hw=Cg0}ffQqLkh>GZx^prw85o2#HyX(^Zf;=Y5ET1kzx7s@
V)UTCSCjk{Pc)I$ztaD0e0sy-N6}12W

delta 74
zcmaE_a#nSMxO4;u8v_Hw2I==-fD~hKkh>GZx^prw85o4xHyX(^PQD?izd4YRLvZqM
dL4C15_P49Dtjaz$uK+4$@O1TaS?83{1OR%q7_I;S

diff --git a/packages/dnb-eufemia/src/components/breadcrumb/stories/Breadcrumb.stories.tsx b/packages/dnb-eufemia/src/components/breadcrumb/stories/Breadcrumb.stories.tsx
index 37b2d32fd22..b8983ca05c0 100644
--- a/packages/dnb-eufemia/src/components/breadcrumb/stories/Breadcrumb.stories.tsx
+++ b/packages/dnb-eufemia/src/components/breadcrumb/stories/Breadcrumb.stories.tsx
@@ -96,7 +96,11 @@ export const BreadcrumbSandbox = () => {
         <Breadcrumb data={breadcrumbItems} styleType="sea-green" />
       </Box>
       <Box>
-        <Breadcrumb data={breadcrumbItems} spacing styleType="sea-green" />
+        <Breadcrumb
+          data={breadcrumbItems}
+          spacing="medium"
+          styleType="sea-green"
+        />
       </Box>
       <Box>
         <Breadcrumb data={breadcrumbItems} spacing styleType="fire-red" />
diff --git a/packages/dnb-eufemia/src/components/breadcrumb/style/_breadcrumb.scss b/packages/dnb-eufemia/src/components/breadcrumb/style/_breadcrumb.scss
index 595cd8108b4..07ac37045cc 100644
--- a/packages/dnb-eufemia/src/components/breadcrumb/style/_breadcrumb.scss
+++ b/packages/dnb-eufemia/src/components/breadcrumb/style/_breadcrumb.scss
@@ -12,16 +12,17 @@
   &__bar.dnb-section {
     display: flex;
   }
-  &--spacing &__bar.dnb-section {
-    padding: var(--spacing-x-small) 0;
-  }
 
   &__list {
     list-style: none;
     margin: 0;
     padding: 0;
 
-    display: flex;
+    &,
+    &.dnb-section {
+      display: flex;
+    }
+
     flex-wrap: wrap;
     flex-direction: row;
     align-items: center;
@@ -32,7 +33,7 @@
       display: flex;
       align-items: center;
       line-height: normal;
-      padding: var(--spacing-x-small) 0;
+      padding: 0.5rem 0;
 
       // To match the other tertiary buttons
       &__icon {
@@ -65,9 +66,7 @@
     flex-direction: column;
     align-items: flex-start;
 
-    padding: 0 var(--spacing-large);
-  }
-  &--spacing &__collapse &__list {
-    padding: var(--spacing-x-small) var(--spacing-large);
+    margin: 0.5rem 0;
+    margin-left: 1.5rem;
   }
 }
diff --git a/packages/dnb-eufemia/src/components/breadcrumb/style/dnb-breadcrumb.scss b/packages/dnb-eufemia/src/components/breadcrumb/style/dnb-breadcrumb.scss
index 9e03a8cfa91..b774f23b825 100644
--- a/packages/dnb-eufemia/src/components/breadcrumb/style/dnb-breadcrumb.scss
+++ b/packages/dnb-eufemia/src/components/breadcrumb/style/dnb-breadcrumb.scss
@@ -5,6 +5,10 @@
 
 @import '../../../style/components/imports.scss';
 
+// import dependencies
+@import '../../button/style/dnb-button.scss';
+@import '../../section/style/dnb-section.scss';
+
 .dnb-breadcrumb {
   @include componentReset();
 }