fixed breadcrumb not adding space between non-links

equinor · Aug 5, 2021 · a3ccaa8 · a3ccaa8
1 parent fb2f90a
commit a3ccaa8
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 20 deletions.
diff --git a/src/components/breadcrumb/index.js b/src/components/breadcrumb/index.js
@@ -1,32 +1,30 @@
+import { List } from '@equinor/eds-core-react';
 import PropTypes from 'prop-types';
 import React from 'react';
 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
@@ -6,16 +6,17 @@
   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));
 }
 
 .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);
-}