From c6eb0b158c5fa2dff11c37d2b3571349e16c46ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oddbj=C3=B8rn=20=C3=98vernes?= <oove@equinor.com>
Date: Wed, 15 Nov 2023 15:35:03 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Breadcrumb:=20custom=20separator=20?=
 =?UTF-8?q?(#3142)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ added seperator prop

* halve spacing margin for icons

* fix typo seperator -> separator

* fix alignment

* make svg inline spacing -9px
---
 .../Breadcrumbs/Breadcrumbs.docs.mdx          |  6 +++
 .../Breadcrumbs/Breadcrumbs.stories.tsx       | 44 ++++++++++++++++++-
 .../components/Breadcrumbs/Breadcrumbs.tsx    | 16 +++++--
 .../__snapshots__/Breadcrumbs.test.tsx.snap   |  5 +++
 4 files changed, 67 insertions(+), 4 deletions(-)

diff --git a/packages/eds-core-react/src/components/Breadcrumbs/Breadcrumbs.docs.mdx b/packages/eds-core-react/src/components/Breadcrumbs/Breadcrumbs.docs.mdx
index 8ae8b16dae..69f5ab62f0 100644
--- a/packages/eds-core-react/src/components/Breadcrumbs/Breadcrumbs.docs.mdx
+++ b/packages/eds-core-react/src/components/Breadcrumbs/Breadcrumbs.docs.mdx
@@ -63,6 +63,12 @@ It might be a good idea to use `forceTooltip` on the `Breadcrumbs.Breadcrumb` wh
 
 <Canvas of={ComponentStories.Wrapped} />
 
+### Custom seperator
+
+Seperator can be a character or an `Icon`.
+
+<Canvas of={ComponentStories.CustomSeperator} />
+
 ### Third-party routing libraries
 
 Use the `as` prop on `Breadcrumbs.Breadcrumb` to utilize third party routers such as react-router with `Breadcrumbs`
diff --git a/packages/eds-core-react/src/components/Breadcrumbs/Breadcrumbs.stories.tsx b/packages/eds-core-react/src/components/Breadcrumbs/Breadcrumbs.stories.tsx
index e2a627a76c..d24d5f1200 100644
--- a/packages/eds-core-react/src/components/Breadcrumbs/Breadcrumbs.stories.tsx
+++ b/packages/eds-core-react/src/components/Breadcrumbs/Breadcrumbs.stories.tsx
@@ -1,4 +1,5 @@
-import { Breadcrumbs, BreadcrumbsProps, Checkbox } from '../..'
+import { Breadcrumbs, BreadcrumbsProps, Checkbox, Icon } from '../..'
+import { chevron_right } from '@equinor/eds-icons'
 import { useState, ChangeEvent } from 'react'
 import { action } from '@storybook/addon-actions'
 import { StoryFn, Meta } from '@storybook/react'
@@ -155,3 +156,44 @@ export const Wrapped: StoryFn<BreadcrumbsProps> = () => {
     </div>
   )
 }
+
+export const CustomSeperator: StoryFn<BreadcrumbsProps> = () => {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+      <Breadcrumbs separator={<Icon data={chevron_right}></Icon>}>
+        <Breadcrumbs.Breadcrumb href="#" onClick={handleClick}>
+          Label One
+        </Breadcrumbs.Breadcrumb>
+        <Breadcrumbs.Breadcrumb href="#" onClick={handleClick}>
+          Label Two
+        </Breadcrumbs.Breadcrumb>
+        <Breadcrumbs.Breadcrumb href="#" onClick={handleClick}>
+          A really rally long label
+        </Breadcrumbs.Breadcrumb>
+        <Breadcrumbs.Breadcrumb href="#" onClick={handleClick}>
+          Label Four
+        </Breadcrumbs.Breadcrumb>
+        <Breadcrumbs.Breadcrumb href="#" onClick={handleClick}>
+          Label Five
+        </Breadcrumbs.Breadcrumb>
+      </Breadcrumbs>
+      <Breadcrumbs separator="\">
+        <Breadcrumbs.Breadcrumb href="#" onClick={handleClick}>
+          Label One
+        </Breadcrumbs.Breadcrumb>
+        <Breadcrumbs.Breadcrumb href="#" onClick={handleClick}>
+          Label Two
+        </Breadcrumbs.Breadcrumb>
+        <Breadcrumbs.Breadcrumb href="#" onClick={handleClick}>
+          A really rally long label
+        </Breadcrumbs.Breadcrumb>
+        <Breadcrumbs.Breadcrumb href="#" onClick={handleClick}>
+          Label Four
+        </Breadcrumbs.Breadcrumb>
+        <Breadcrumbs.Breadcrumb href="#" onClick={handleClick}>
+          Label Five
+        </Breadcrumbs.Breadcrumb>
+      </Breadcrumbs>
+    </div>
+  )
+}
diff --git a/packages/eds-core-react/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/eds-core-react/src/components/Breadcrumbs/Breadcrumbs.tsx
index ae1168c81a..1191a330de 100644
--- a/packages/eds-core-react/src/components/Breadcrumbs/Breadcrumbs.tsx
+++ b/packages/eds-core-react/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -33,6 +33,11 @@ const Separator = styled(Typography)`
   ${spacingsTemplate(spacings)}
   display: block;
   line-height: 1;
+  display: flex;
+  & > svg {
+    /* Reduce spacing when Icon is used to account for the built in spacing of icons */
+    margin-inline: -9px;
+  }
 `
 
 const Collapsed = styled(Typography)`
@@ -52,6 +57,8 @@ export type BreadcrumbsProps = {
    * @default false
    */
   collapse?: boolean
+  /** Custom separator can be a character or an Icon */
+  separator?: ReactNode
   /** Will not wrap breadcrumbs when set to false, but will instead trunkate each breadcrumb when viewport narrows
    * @default true
    */
@@ -61,7 +68,10 @@ export type BreadcrumbsProps = {
 } & HTMLAttributes<HTMLElement>
 
 export const Breadcrumbs = forwardRef<HTMLElement, BreadcrumbsProps>(
-  function Breadcrumbs({ children, collapse, wrap = true, ...rest }, ref) {
+  function Breadcrumbs(
+    { children, collapse, wrap = true, separator = '/', ...rest },
+    ref,
+  ) {
     const props = {
       ...rest,
       ref,
@@ -102,7 +112,7 @@ export const Breadcrumbs = forwardRef<HTMLElement, BreadcrumbsProps>(
             </Collapsed>
           </ListItem>
           <li aria-hidden>
-            <Separator variant="body_short">/</Separator>
+            <Separator variant="body_short">{separator}</Separator>
           </li>
         </Fragment>,
         allCrumbs[allCrumbs.length - 1],
@@ -115,7 +125,7 @@ export const Breadcrumbs = forwardRef<HTMLElement, BreadcrumbsProps>(
         <ListItem>{child}</ListItem>
         {index !== ReactChildren.toArray(children).length - 1 && (
           <li aria-hidden>
-            <Separator variant="body_short">/</Separator>
+            <Separator variant="body_short">{separator}</Separator>
           </li>
         )}
       </Fragment>
diff --git a/packages/eds-core-react/src/components/Breadcrumbs/__snapshots__/Breadcrumbs.test.tsx.snap b/packages/eds-core-react/src/components/Breadcrumbs/__snapshots__/Breadcrumbs.test.tsx.snap
index 4ec57325c2..6c81254a1b 100644
--- a/packages/eds-core-react/src/components/Breadcrumbs/__snapshots__/Breadcrumbs.test.tsx.snap
+++ b/packages/eds-core-react/src/components/Breadcrumbs/__snapshots__/Breadcrumbs.test.tsx.snap
@@ -33,6 +33,11 @@ exports[`Breadcrumbs Matches snapshot 1`] = `
   padding-right: 16px;
   display: block;
   line-height: 1;
+  display: flex;
+}
+
+.c4>svg {
+  margin-inline: -9px;
 }
 
 .c3 {