feat(Breadcrumb): Added new component!

- Make storybook find tsx stories, remove prettier config for tsx
- Added variant single and multiple
- Added portal site for breadcrumb
- Added variant collapse and handle translations
- Updated sandbox with breadcrumb
- Write tests and add screenshot tests
- Updated documentation for Breadcrumb
fix: breadcrumb onClick default did not render


More cleanup and fixes

CHANGELOG.md

@@ -1,6 +1,10 @@
+## November, 05. 2021
+
+- New component [Breadcrumb](/uilib/components/breadcrumb).
+
 ## October, 08. 2021
 
-- Default shadow (`defaultDropShadow()` and `.dnb-drop-shadow`) was changed to `0 8px 16px rgba(51, 51, 51, 0.08)` 
+- Default shadow (`defaultDropShadow()` and `.dnb-drop-shadow`) was changed to `0 8px 16px rgba(51, 51, 51, 0.08)`
 
 ## August, 17. 2021
 

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

@@ -0,0 +1,15 @@
+---
+title: 'Breadcrumb'
+description: 'The Breadcrumb component is a bar for navigation showing current web path'
+status: 'new'
+order: 2
+showTabs: true
+hideTabs:
+  - title: Events
+---
+
+import BreadcrumbInfo from 'Pages/uilib/components/breadcrumb/info'
+import BreadcrumbDemos from 'Pages/uilib/components/breadcrumb/demos'
+
+<BreadcrumbInfo />
+<BreadcrumbDemos />

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

@@ -0,0 +1,121 @@
+/**
+ * UI lib Component Example
+ *
+ */
+
+import React from 'react'
+import ComponentBox from 'Src/shared/tags/ComponentBox'
+
+export const BreadcrumbSingle = () => (
+  <ComponentBox data-visual-test="breadcrumb-single">
+    {() => /* jsx */ `
+<Breadcrumb
+  onClick={() => {
+      console.log('Going back!')
+    }}
+/>
+`}
+  </ComponentBox>
+)
+
+export const BreadcrumbMultipleData = () => (
+  <ComponentBox noFragments={false} data-visual-test="breadcrumb-multiple">
+    {() => /* jsx */ `
+() => {
+  // You can also import pages from a store and only do a remapping
+  const pages = [
+    {
+      text: "",
+      href: "/",
+    },
+    {
+      text: "UI Library",
+      href: "/uilib",
+    },
+    {
+      text: "Components",
+      href: "/uilib/components",
+    },
+    {
+      text: "Breadcrumbs",
+      href: "/uilib/components/breadcrumbs"
+    }
+  ];
+  
+  return (
+    <Breadcrumb data={pages} />
+  )
+}
+`}
+  </ComponentBox>
+)
+
+export const BreadcrumbMultiple = () => (
+  <ComponentBox data-visual-test="breadcrumb-multiple-children">
+    {() => /* jsx */ `
+<Breadcrumb>
+  <Breadcrumb.Item onClick={() => {console.log("go home!")}} variant="home" />
+  <Breadcrumb.Item text="Page item" onClick={() => {console.log("go to page 1")}} />
+  <Breadcrumb.Item text="Page item" onClick={() => {console.log("go to page 2")}} variant="current" />
+</Breadcrumb>
+`}
+  </ComponentBox>
+)
+
+export const BreadcrumbVariants = () => (
+  <ComponentBox noFragments={false} data-visual-test="breadcrumb-collapse">
+    {() => /* jsx */ `
+() => {
+  const pages = [
+    {
+      text: "",
+      href: "/",
+    },
+    {
+      text: "UI Library",
+      href: "/uilib",
+    },
+    {
+      text: "Components",
+      href: "/uilib/components",
+    }
+  ];
+  
+  return (
+    // Try changing variant here
+    <Breadcrumb variant="collapse" data={pages} />
+  )
+}
+`}
+  </ComponentBox>
+)
+
+export const BreadcrumbCollapseOpen = () => (
+  <ComponentBox
+    noFragments={false}
+    data-visual-test="breadcrumb-collapse-open"
+  >
+    {() => /* jsx */ `
+() => {
+  const pages = [
+    {
+      text: "",
+      href: "/",
+    },
+    {
+      text: "UI Library",
+      href: "/uilib",
+    },
+    {
+      text: "Components",
+      href: "/uilib/components",
+    }
+  ];
+  
+  return (
+    <Breadcrumb variant="collapse" data={pages} isCollapsed={false} />
+  )
+}
+`}
+  </ComponentBox>
+)

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

@@ -0,0 +1,48 @@
+---
+showTabs: true
+---
+
+import {
+BreadcrumbSingle,
+BreadcrumbMultiple,
+BreadcrumbMultipleData,
+BreadcrumbVariants,
+BreadcrumbCollapseOpen
+} from 'Pages/uilib/components/breadcrumb/Examples'
+
+## Demos
+
+### Multiple Breadcrumb (recommended)
+
+To ensure 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).
+
+<BreadcrumbMultipleData />
+
+Some extra functionality is provided to this variant:
+
+- 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.
+
+### Single Breadcrumb
+
+When you only want a single button for `back`, this variant is recommended and default when neither `data` or `children` is present.
+
+<BreadcrumbSingle />
+
+### Multiple Breadcrumb with children
+
+For customizing the Breadcrumb to fit your needs, this variant can be utilized.
+
+<BreadcrumbMultiple />
+
+### Setting property 'variant'
+
+Property variant is 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`.
+
+<BreadcrumbVariants />
+
+### Setting property 'variant' and overriding 'isCollapsed'
+
+<BreadcrumbCollapseOpen />

packages/dnb-design-system-portal/src/docs/uilib/components/breadcrumb/events.md

@@ -0,0 +1,3 @@
+---
+showTabs: false
+---

packages/dnb-design-system-portal/src/docs/uilib/components/breadcrumb/info.md

@@ -0,0 +1,7 @@
+---
+showTabs: true
+---
+
+## Description
+
+The Breadcrumb is a component for navigation and for showing the current website path or tree.

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

@@ -0,0 +1,32 @@
+---
+showTabs: true
+---
+
+## Properties
+
+### `Breadcrumb` properties
+
+| Properties                                  | Description                                                                                                                                                                                             |
+| ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `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`                                                                                                       |
+| `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`.                                                                                              |
+| `goBackText`                                | _(optional)_ Override with a custom 'Back' text for variant `single` (Not recommended)                                                                                                                  |
+| `homeText`                                  | _(optional)_ Override with a custom 'Home' text (Not recommended)                                                                                                                                       |
+| `backToText`                                | _(optional)_ Override with a custom 'Back to...' text (Not recommended)                                                                                                                                 |
+| `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`.                                                       |
+| [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                                                                                                                   |
+
+### `Breadcrumb.Item` properties
+
+| Properties          | Description                                                                                        |
+| ------------------- | -------------------------------------------------------------------------------------------------- |
+| `text`              | _(optional)_ Text displaying inside Breadcrumb item                                                |
+| `variant`           | _(optional)_ The component variant. Options: `home` \| `previous` \| `current`                     |
+| `icon`              | _(optional)_ Override icon displaying on the left side (Not recommended). Default: `chevron_left`. |
+| `href` or `onClick` | _(optional)_ Set what happens when the user clicks on the item.                                    |
+| `skeleton`          | _(optional)_ Applies loading skeleton.                                                             |

packages/dnb-eufemia-sandbox/.storybook/main.js

@@ -1,11 +1,11 @@
 module.exports = {
   stories: [
     '../stories/styles.js',
-    '../stories/components/*.js',
-    '../stories/elements/*.js',
-    '../stories/extensions/*.js',
-    '../stories/helpers/*.js',
-    '../stories/helpers/*.tsx',
+    '../stories/components/*.{js,tsx}',
+    '../stories/elements/*.{js,tsx}',
+    '../stories/extensions/*.{js,tsx}',
+    '../stories/helpers/*.{js,tsx}',
+    '../stories/helpers/*.{js,tsx}',
   ],
   addons: ['@storybook/preset-ie11', '@storybook/preset-scss'],
 }

packages/dnb-eufemia-sandbox/stories/components/Breadcrumb.tsx

@@ -0,0 +1,113 @@
+/**
+ * @dnb/eufemia Component Story
+ *
+ */
+
+import React, { useState } from 'react'
+// import { Wrapper, Box } from '../helpers'
+// import styled from '@emotion/styled'
+
+import {
+  Breadcrumb,
+  Skeleton,
+  ToggleButton,
+  Button,
+} from '@dnb/eufemia/src/components'
+import { Provider } from '@dnb/eufemia/src/shared'
+import {
+  BreadcrumbItem,
+  BreadcrumbItemProps,
+} from '@dnb/eufemia/src/components/breadcrumb/Breadcrumb'
+import { Box, Wrapper } from '../helpers'
+// import BreadcrumbItem from '@dnb/eufemia/src/components/breadcrumb/BreadcrumbItem'
+
+export default {
+  title: 'Eufemia/Components/Breadcrumb',
+}
+
+const breadcrumbItems: BreadcrumbItemProps[] = [
+  {
+    href: '/',
+  },
+  {
+    text: 'Components',
+    href: '/',
+  },
+  {
+    text: 'Breadcrumbs',
+    href: '/',
+  },
+  {
+    text: 'Items',
+    href: '/',
+  },
+  {
+    text: 'Button',
+    href: '/',
+  },
+]
+
+export const Multiple = () => {
+  const [showHome, makeHomeVisible] = React.useState(false)
+  return (
+    <Provider>
+      {/* <ToggleButton
+        on_change={() => {
+          makeHomeVisible((s) => !s)
+        }}
+      >
+        Toggle Home
+      </ToggleButton>
+      <br /> */}
+      <Skeleton>
+        <Breadcrumb data={breadcrumbItems} />
+      </Skeleton>
+    </Provider>
+  )
+}
+
+export const Single = () => {
+  return (
+    <Provider locale="en-GB">
+      <Skeleton>
+        <Breadcrumb
+          variant="single"
+          onClick={() => {
+            console.log('Going back!')
+          }}
+        />
+      </Skeleton>
+    </Provider>
+  )
+}
+
+export const BreadcrumbSandbox = () => {
+  return (
+    <Wrapper>
+      <Box>
+        <Single />
+      </Box>
+      <Box>
+        <Multiple />
+      </Box>
+    </Wrapper>
+  )
+}
+
+export const CustomCollapsedBreadcrumb = () => {
+  const [collapsed, setCollapsed] = useState(true)
+  return (
+    <Provider>
+      <Breadcrumb
+        data={breadcrumbItems}
+        isCollapsed={collapsed}
+        onClick={() => {
+          console.log('Collapsing')
+          // ... doing other stuff
+          setCollapsed(!collapsed)
+        }}
+        variant="collapse"
+      />
+    </Provider>
+  )
+}