From a3ccaa8648751aa979355f88c9716cbe484b9758 Mon Sep 17 00:00:00 2001
From: Fredrik Hatletvedt <fhatletvedt@gmail.com>
Date: Thu, 5 Aug 2021 13:02:13 +0200
Subject: [PATCH] fixed breadcrumb not adding space between non-links

---
 src/components/breadcrumb/index.js  | 26 ++++++++++++--------------
 src/components/breadcrumb/style.css | 13 +++++++------
 2 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/src/components/breadcrumb/index.js b/src/components/breadcrumb/index.js
index 1d6e093ef..2cedabb1e 100644
--- a/src/components/breadcrumb/index.js
+++ b/src/components/breadcrumb/index.js
@@ -1,3 +1,4 @@
+import { List } from '@equinor/eds-core-react';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { NavLink } from 'react-router-dom';
@@ -5,28 +6,25 @@ import { NavLink } from 'react-router-dom';
 import './style.css';
 
 const BreadcrumbLink = (link) => {
-  if (link.to) {
-    return (
-      <>
-        <NavLink className="breadcrumb__link" to={link.to}>
-          {link.label}
-        </NavLink>
-        <span className="breadcrumb__link-space">/</span>
-      </>
-    );
-  }
-
-  return <span className="breadcrumb__text">{link.label}</span>;
+  return link.to ? (
+    <NavLink className="breadcrumb__link" to={link.to}>
+      {link.label}
+    </NavLink>
+  ) : (
+    <span className="breadcrumb__text">{link.label}</span>
+  );
 };
 
 export const Breadcrumb = ({ links }) => {
   const linksRender = links.map((link, idx) => (
-    <li key={link.to || idx}>{BreadcrumbLink(link)}</li>
+    <List.Item className="breadcrumb__item" key={link.to || idx}>
+      {BreadcrumbLink(link)}
+    </List.Item>
   ));
 
   return (
     <nav className="breadcrumb" role="navigation" aria-label="Page hierarchy">
-      <ul>{linksRender}</ul>
+      <List>{linksRender}</List>
     </nav>
   );
 };
diff --git a/src/components/breadcrumb/style.css b/src/components/breadcrumb/style.css
index 602407e8c..201240a53 100644
--- a/src/components/breadcrumb/style.css
+++ b/src/components/breadcrumb/style.css
@@ -6,6 +6,13 @@
   display: inline-block;
 }
 
+:not(:last-child).breadcrumb__item::after {
+  content: "/";
+  color: var(--eds_text__static_icons__tertiary, rgba(111,111,111,1));
+  padding-left: var(--eds_spacing_medium);
+  padding-right: var(--eds_spacing_medium);
+}
+
 .breadcrumb__text {
   color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
 }
@@ -13,9 +20,3 @@
 .breadcrumb__link {
   color: var(--eds_interactive_primary__resting);
 }
-
-.breadcrumb__link-space {
-  color: var(--eds_text__static_icons__tertiary, rgba(111,111,111,1));
-  padding-left: var(--eds_spacing_medium);
-  padding-right: var(--eds_spacing_medium);
-}