fix(Breadcrumb): variant multiple no longer same as default (#3345)

* Added variant `responsive` as default
* Variant `multiple` now stays expanded on all screen sizes
* Update documentation to make it more clear what the different variants
do

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

@@ -16,8 +16,8 @@ export const BreadcrumbSingle = () => (
   </ComponentBox>
 )
 
-export const BreadcrumbMultipleData = () => (
-  <ComponentBox data-visual-test="breadcrumb-multiple">
+export const BreadcrumbDefault = () => (
+  <ComponentBox data-visual-test="breadcrumb-default">
     {() => {
       // You can also import pages from a store and only do a remapping
       const pages = [
@@ -44,8 +44,8 @@ export const BreadcrumbMultipleData = () => (
   </ComponentBox>
 )
 
-export const BreadcrumbMultiple = () => (
-  <ComponentBox data-visual-test="breadcrumb-multiple-children">
+export const BreadcrumbChildren = () => (
+  <ComponentBox data-visual-test="breadcrumb-children">
     <Breadcrumb spacing>
       <Breadcrumb.Item
         onClick={() => {
@@ -70,7 +70,7 @@ export const BreadcrumbMultiple = () => (
   </ComponentBox>
 )
 
-export const BreadcrumbVariants = () => (
+export const BreadcrumbCollapse = () => (
   <ComponentBox data-visual-test="breadcrumb-collapse">
     {() => {
       const pages = [
@@ -88,16 +88,13 @@ export const BreadcrumbVariants = () => (
         },
       ]
 
-      return (
-        // Try changing variant here
-        <Breadcrumb variant="collapse" data={pages} spacing />
-      )
+      return <Breadcrumb variant="collapse" data={pages} spacing />
     }}
   </ComponentBox>
 )
 
-export const BreadcrumbCollapseOpen = () => (
-  <ComponentBox data-visual-test="breadcrumb-collapse-open">
+export const BreadcrumbMultiple = () => (
+  <ComponentBox data-visual-test="breadcrumb-multiple">
     {() => {
       const pages = [
         {
@@ -112,16 +109,13 @@ export const BreadcrumbCollapseOpen = () => (
           text: 'Components',
           href: '/uilib/components',
         },
+        {
+          text: 'Breadcrumbs',
+          href: '/uilib/components/breadcrumbs',
+        },
       ]
 
-      return (
-        <Breadcrumb
-          variant="collapse"
-          data={pages}
-          isCollapsed={false}
-          spacing
-        />
-      )
+      return <Breadcrumb variant="multiple" data={pages} spacing />
     }}
   </ComponentBox>
 )

packages/dnb-design-system-portal/src/docs/uilib/components/breadcrumb/demos.mdx

@@ -3,46 +3,45 @@ showTabs: true
 ---
 
 import {
+  BreadcrumbDefault,
+  BreadcrumbChildren,
   BreadcrumbSingle,
+  BreadcrumbCollapse,
   BreadcrumbMultiple,
-  BreadcrumbMultipleData,
-  BreadcrumbVariants,
-  BreadcrumbCollapseOpen,
 } from 'Docs/uilib/components/breadcrumb/Examples'
 
 ## Demos
 
-### Multiple Breadcrumb (recommended)
+### Breadcrumb
 
-To ensure the correct use of the Breadcrumb, we recommend passing down pages as a variable to `data`. If you have other specific cases, check out how to customize with [children in Multiple Breadcrumb](/uilib/components/breadcrumb/#multiple-breadcrumb-with-children).
+To ensure the correct use of the Breadcrumb, we recommend passing down pages as a variable to `data`. If you have other specific cases, check out how to customize with [children in Breadcrumb](/uilib/components/breadcrumb/#pages-as-child-components).
 
-<BreadcrumbMultipleData />
-
-Some extra functionality is provided to this variant:
+<BreadcrumbDefault />
 
 - The first item, `Home`, gets assigned a home icon and an appropriate text label based on the current locale.
 - The last item in pages will be static text, corresponding to the current page.
-- Another variant, `collapse`, appears for small screens.
+- Breadcumb will collapse on small screens
 
-### Single Breadcrumb
+### Pages as child components
 
-When you only want a single button for `back`, this variant is recommended and default when neither `data` nor `children` is present.
+For customizing the Breadcrumb to fit your needs, you can add each page as a child component.
 
-<BreadcrumbSingle />
+<BreadcrumbChildren />
+
+### Single Breadcrumb
 
-### Multiple Breadcrumb with children
+When you only want a single button for `back`.
 
-For customizing the Breadcrumb to fit your needs, this variant can be utilized.
+<BreadcrumbSingle />
 
-<BreadcrumbMultiple />
+This can also be forced using the `variant="single"` prop.
 
-### Setting property 'variant'
+### Always be collapsed (`variant="collapse"`)
 
-Property variant is by default set based on the combination of children and data properties, and also screen size.
-If you want to override this property, pass in the prop `variant` to be either `single`, `multiple`, or `collapse`.
+Expands when user clicks
 
-<BreadcrumbVariants />
+<BreadcrumbCollapse />
 
-### Setting property 'variant' and overriding 'isCollapsed'
+### Never collapse (`variant="multiple"`)
 
-<BreadcrumbCollapseOpen />
+<BreadcrumbMultiple />

packages/dnb-design-system-portal/src/docs/uilib/components/breadcrumb/properties.mdx

@@ -11,7 +11,7 @@ showTabs: true
 | `data`                                  | _(optional)_ List of pages to render as breadcrumbitems. Each object in data can include all properties from [BreadcrumbItem props](/uilib/components/breadcrumb/properties#breadcrumbitem-properties). |
 | `children`                              | _(optional)_ Content of the component. Can be used instead of property `data`, by adding Breadcrumbitem children `<Breadcrumb.Item {...props} />`.                                                      |
 | `skeleton`                              | _(optional)_ Applies loading skeleton.                                                                                                                                                                  |
-| `variant`                               | _(optional)_ Override the variant of the component. Options: `single` \| `multiple` \| `collapse`.                                                                                                      |
+| `variant`                               | _(optional)_ Defaults to 'responsive' or 'single' depending on content. Options: `responsive` \| `single` \| `multiple` \| `collapse` .                                                                 |
 | `onClick`                               | _(optional)_ Handle click event on "Back" for variant `single` and "Back to..." for variant `collapse`.                                                                                                 |
 | `href`                                  | _(optional)_ For variant `single`, set `href` for button click. Can be used instead of property `onClick`.                                                                                              |
 | `navText`                               | _(optional)_ Every `<nav>` on a page needs an unique aria-label text.                                                                                                                                   |

packages/dnb-eufemia/src/components/breadcrumb/Breadcrumb.tsx

@@ -55,9 +55,9 @@ export type BreadcrumbProps = {
 
   /**
    * The variant of the component.
-   * Default: When children and data is not defined, it defaults to "single". If they are defined, the variant depends on the viewport.
+   * Default: When children and data is not defined, it defaults to "single". "responsive" if they are defined.
    */
-  variant?: 'single' | 'multiple' | 'collapse'
+  variant?: 'responsive' | 'single' | 'multiple' | 'collapse'
 
   /**
    * Handle the click event on 'single'/'collapse'
@@ -180,7 +180,7 @@ const Breadcrumb = (localProps: BreadcrumbProps & SpacingProps) => {
   let currentVariant = variant
   if (!variant) {
     if (items || data) {
-      currentVariant = 'multiple'
+      currentVariant = 'responsive'
     } else {
       currentVariant = 'single'
     }
@@ -229,20 +229,22 @@ const Breadcrumb = (localProps: BreadcrumbProps & SpacingProps) => {
           />
         ) : (
           <>
-            <Button
-              className="dnb-breadcrumb__toggle"
-              text={backToText}
-              variant="tertiary"
-              icon="chevron_left"
-              icon_position="left"
-              onClick={
-                onClick ||
-                (() => {
-                  setCollapse(!isCollapsed)
-                })
-              }
-              aria-expanded={!isCollapsed}
-            />
+            {currentVariant !== 'multiple' && (
+              <Button
+                className="dnb-breadcrumb__toggle"
+                text={backToText}
+                variant="tertiary"
+                icon="chevron_left"
+                icon_position="left"
+                onClick={
+                  onClick ||
+                  (() => {
+                    setCollapse(!isCollapsed)
+                  })
+                }
+                aria-expanded={!isCollapsed}
+              />
+            )}
 
             {currentVariant !== 'collapse' && (
               <BreadcrumbMultiple
@@ -256,17 +258,20 @@ const Breadcrumb = (localProps: BreadcrumbProps & SpacingProps) => {
         )}
       </Section>
 
-      <Section
-        variant={collapsedStyleType}
-        className="dnb-breadcrumb__collapse"
-      >
-        <BreadcrumbMultiple
-          data={data}
-          items={items}
-          isCollapsed={isCollapsed}
-          noAnimation={noAnimation}
-        />
-      </Section>
+      {(currentVariant === 'collapse' ||
+        currentVariant === 'responsive') && (
+        <Section
+          variant={collapsedStyleType}
+          className="dnb-breadcrumb__collapse"
+        >
+          <BreadcrumbMultiple
+            data={data}
+            items={items}
+            isCollapsed={isCollapsed}
+            noAnimation={noAnimation}
+          />
+        </Section>
+      )}
     </nav>
   )
 }

packages/dnb-eufemia/src/components/breadcrumb/__tests__/Breadcrumb.screenshot.test.ts

@@ -21,17 +21,16 @@ describe.each(['ui', 'sbanken'])('Breadcrumb for %s', (themeName) => {
     expect(screenshot).toMatchImageSnapshot()
   })
 
-  it('have to match Breadcrumb multiple', async () => {
+  it('have to match Breadcrumb default', async () => {
     const screenshot = await makeScreenshot({
-      selector: '[data-visual-test="breadcrumb-multiple"] .dnb-breadcrumb',
+      selector: '[data-visual-test="breadcrumb-default"] .dnb-breadcrumb',
     })
     expect(screenshot).toMatchImageSnapshot()
   })
 
-  it('have to match Breadcrumb multiple with children', async () => {
+  it('have to match Breadcrumb with custom children', async () => {
     const screenshot = await makeScreenshot({
-      selector:
-        '[data-visual-test="breadcrumb-multiple-children"] .dnb-breadcrumb',
+      selector: '[data-visual-test="breadcrumb-children"] .dnb-breadcrumb',
     })
     expect(screenshot).toMatchImageSnapshot()
   })
@@ -45,21 +44,80 @@ describe.each(['ui', 'sbanken'])('Breadcrumb for %s', (themeName) => {
 
   it('have to match Breadcrumb collapse opened', async () => {
     const screenshot = await makeScreenshot({
-      selector:
-        '[data-visual-test="breadcrumb-collapse-open"] .dnb-breadcrumb',
+      selector: '[data-visual-test="breadcrumb-collapse"] .dnb-breadcrumb',
+      simulateSelector:
+        '[data-visual-test="breadcrumb-collapse"] .dnb-breadcrumb__toggle',
+      recalculateHeightAfterSimulate: true,
+      simulate: 'click',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
+  it('have to match Breadcrumb hover state', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="breadcrumb-default"] .dnb-breadcrumb',
+      screenshotSelector:
+        '[data-visual-test="breadcrumb-default"] .dnb-breadcrumb .dnb-breadcrumb__bar',
+      simulateSelector:
+        '[data-visual-test="breadcrumb-default"] .dnb-breadcrumb__list .dnb-breadcrumb__item:nth-of-type(2) a',
+      simulate: 'hover',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
+  it('have to match Breadcrumb active state', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="breadcrumb-default"] .dnb-breadcrumb',
+      screenshotSelector:
+        '[data-visual-test="breadcrumb-default"] .dnb-breadcrumb .dnb-breadcrumb__bar',
+      simulateSelector:
+        '[data-visual-test="breadcrumb-default"] .dnb-breadcrumb__list .dnb-breadcrumb__item:nth-of-type(2) a',
+      simulate: 'active',
     })
     expect(screenshot).toMatchImageSnapshot()
   })
 
   it('have to match Breadcrumb focus state', async () => {
     const screenshot = await makeScreenshot({
-      selector: '[data-visual-test="breadcrumb-multiple"] .dnb-breadcrumb',
+      selector: '[data-visual-test="breadcrumb-default"] .dnb-breadcrumb',
       screenshotSelector:
-        '[data-visual-test="breadcrumb-multiple"] .dnb-breadcrumb .dnb-breadcrumb__bar',
+        '[data-visual-test="breadcrumb-default"] .dnb-breadcrumb .dnb-breadcrumb__bar',
       simulateSelector:
-        '[data-visual-test="breadcrumb-multiple"] .dnb-breadcrumb__list .dnb-breadcrumb__item:nth-of-type(2) a',
+        '[data-visual-test="breadcrumb-default"] .dnb-breadcrumb__list .dnb-breadcrumb__item:nth-of-type(2) a',
       simulate: 'focus',
     })
     expect(screenshot).toMatchImageSnapshot()
   })
+
+  it('have to match Breadcrumb multiple', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="breadcrumb-multiple"] .dnb-breadcrumb',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
+  describe('on small screen', () => {
+    setupPageScreenshot({
+      url: '/uilib/components/breadcrumb/demos',
+      pageViewport: {
+        width: 700,
+      },
+    })
+
+    it('have to match Breadcrumb default', async () => {
+      const screenshot = await makeScreenshot({
+        selector:
+          '[data-visual-test="breadcrumb-default"] .dnb-breadcrumb',
+      })
+      expect(screenshot).toMatchImageSnapshot()
+    })
+
+    it('have to match Breadcrumb multiple', async () => {
+      const screenshot = await makeScreenshot({
+        selector:
+          '[data-visual-test="breadcrumb-multiple"] .dnb-breadcrumb',
+      })
+      expect(screenshot).toMatchImageSnapshot()
+    })
+  })
 })

packages/dnb-eufemia/src/components/breadcrumb/__tests__/Breadcrumb.test.tsx

@@ -269,7 +269,7 @@ describe('Breadcrumb', () => {
     expect(attributes).toEqual(['aria-label', 'class'])
     expect(Array.from(element.classList)).toEqual([
       'dnb-breadcrumb',
-      'dnb-breadcrumb--variant-multiple',
+      'dnb-breadcrumb--variant-responsive',
       'dnb-space__top--large',
     ])
   })

packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap

@@ -729,6 +729,8 @@ button.dnb-button::-moz-focus-inner {
   padding: 0;
   display: flex;
   flex-direction: column;
+  /* stylelint-disable no-descending-specificity, no-duplicate-selectors */
+  /* stylelint-enable */
 }
 .dnb-breadcrumb__bar.dnb-section {
   display: flex;
@@ -763,13 +765,16 @@ button.dnb-button::-moz-focus-inner {
 .dnb-breadcrumb__multiple.dnb-height-animation--parallax .dnb-breadcrumb__item {
   transform: translateX(0);
 }
+html[data-visual-test] .dnb-breadcrumb__multiple .dnb-breadcrumb__item {
+  transition: none;
+}
 @media screen and (max-width: 60em) {
-  .dnb-breadcrumb__bar .dnb-breadcrumb__multiple {
+  .dnb-breadcrumb--variant-responsive .dnb-breadcrumb__bar .dnb-breadcrumb__multiple {
     display: none;
   }
 }
 @media screen and (min-width: 60em) {
-  .dnb-breadcrumb--variant-multiple .dnb-breadcrumb__toggle {
+  .dnb-breadcrumb--variant-responsive .dnb-breadcrumb__toggle {
     display: none;
   }
 }