From 43256dc21ea981ed2a5f447671aea9f75a3b4717 Mon Sep 17 00:00:00 2001
From: Nicko Winner-Arroyo <nicko.winner-arroyo@rackspace.com>
Date: Fri, 16 Oct 2020 20:03:13 -0400
Subject: [PATCH 1/4] Breadcrumb

---
 src/Breadcrumb/index.js   | 26 ++++++++++++++++++++++++++
 src/Breadcrumb/stories.js | 21 +++++++++++++++++++++
 2 files changed, 47 insertions(+)
 create mode 100644 src/Breadcrumb/index.js
 create mode 100644 src/Breadcrumb/stories.js

diff --git a/src/Breadcrumb/index.js b/src/Breadcrumb/index.js
new file mode 100644
index 0000000..4e1c854
--- /dev/null
+++ b/src/Breadcrumb/index.js
@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const Breadcrumb = ({ children, icon = 'angle-right', ...rest }) => {
+  // Automatically add delimiter
+  const kids =
+    children.length > 0
+      ? children.map((child, index) => [
+          child,
+          index + 1 < children.length && <hx-icon class="delimiter" type={icon}></hx-icon>,
+        ])
+      : children;
+
+  return (
+    <nav className="hxBreadcrumb" {...rest}>
+      {kids}
+    </nav>
+  );
+};
+
+Breadcrumb.propTypes = {
+  icon: PropTypes.string,
+  children: PropTypes.func,
+};
+
+export default Breadcrumb;
diff --git a/src/Breadcrumb/stories.js b/src/Breadcrumb/stories.js
new file mode 100644
index 0000000..d4b4c04
--- /dev/null
+++ b/src/Breadcrumb/stories.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import Breadcrumb from './index';
+
+storiesOf('Crumb', module)
+  .add('Multiple Crumbs', () => {
+    return (
+      <Breadcrumb>
+        <a href="#">Home</a>
+        <a href="#">Library</a>
+        <a href="#">Current</a>
+      </Breadcrumb>
+    );
+  })
+  .add('Single Crumb', () => {
+    return (
+      <Breadcrumb>
+        <a href="#">Home</a>
+      </Breadcrumb>
+    );
+  });

From f39d09c67d86fe9109ef51d271bc9efe3837500c Mon Sep 17 00:00:00 2001
From: Nicko Winner-Arroyo <nicko.winner-arroyo@rackspace.com>
Date: Fri, 16 Oct 2020 20:21:50 -0400
Subject: [PATCH 2/4] Breadcrumb

---
 src/index.mjs | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/index.mjs b/src/index.mjs
index 33e8fac..f2d97f2 100644
--- a/src/index.mjs
+++ b/src/index.mjs
@@ -1,6 +1,7 @@
 /* Export helix-react definition */
 import Alert from './Alert';
 import Button from './Button';
+import Breadcrumb from './Breadcrumb';
 import Checkbox from './Checkbox';
 import ChoiceTile from './ChoiceTile';
 import Disclosure from './Disclosure';
@@ -24,6 +25,7 @@ import Tooltip from './Tooltip';
 export {
   Alert,
   Button,
+  Breadcrumb,
   Checkbox,
   ChoiceTile,
   Disclosure,

From 054b0f6edca67935291e9d7d2f949f83a0eb41b6 Mon Sep 17 00:00:00 2001
From: Nicko Winner-Arroyo <nicko.winner-arroyo@rackspace.com>
Date: Mon, 19 Oct 2020 09:28:09 -0400
Subject: [PATCH 3/4] let users opt out of the automatically added delimiter

---
 src/Breadcrumb/index.js   | 4 ++--
 src/Breadcrumb/stories.js | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/Breadcrumb/index.js b/src/Breadcrumb/index.js
index 4e1c854..ad3f817 100644
--- a/src/Breadcrumb/index.js
+++ b/src/Breadcrumb/index.js
@@ -1,13 +1,13 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const Breadcrumb = ({ children, icon = 'angle-right', ...rest }) => {
+const Breadcrumb = ({ children, icon = 'angle-right', addDelimiter = true, ...rest }) => {
   // Automatically add delimiter
   const kids =
     children.length > 0
       ? children.map((child, index) => [
           child,
-          index + 1 < children.length && <hx-icon class="delimiter" type={icon}></hx-icon>,
+        addDelimiter && (index + 1) < children.length && <hx-icon class="delimiter" type={icon}></hx-icon>,
         ])
       : children;
 
diff --git a/src/Breadcrumb/stories.js b/src/Breadcrumb/stories.js
index d4b4c04..56dfd0f 100644
--- a/src/Breadcrumb/stories.js
+++ b/src/Breadcrumb/stories.js
@@ -2,8 +2,8 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import Breadcrumb from './index';
 
-storiesOf('Crumb', module)
-  .add('Multiple Crumbs', () => {
+storiesOf('Breadcrumb', module)
+  .add('Multiple Breadcrumbs', () => {
     return (
       <Breadcrumb>
         <a href="#">Home</a>
@@ -12,7 +12,7 @@ storiesOf('Crumb', module)
       </Breadcrumb>
     );
   })
-  .add('Single Crumb', () => {
+  .add('Single Breadcrumb', () => {
     return (
       <Breadcrumb>
         <a href="#">Home</a>

From 094b974282b0afab2dbdd70ca367693952c07198 Mon Sep 17 00:00:00 2001
From: Nicko Winner-Arroyo <nicko.winner-arroyo@rackspace.com>
Date: Mon, 19 Oct 2020 09:29:11 -0400
Subject: [PATCH 4/4] make it pretty

---
 src/Breadcrumb/index.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/Breadcrumb/index.js b/src/Breadcrumb/index.js
index ad3f817..aab8349 100644
--- a/src/Breadcrumb/index.js
+++ b/src/Breadcrumb/index.js
@@ -7,7 +7,9 @@ const Breadcrumb = ({ children, icon = 'angle-right', addDelimiter = true, ...re
     children.length > 0
       ? children.map((child, index) => [
           child,
-        addDelimiter && (index + 1) < children.length && <hx-icon class="delimiter" type={icon}></hx-icon>,
+          addDelimiter && index + 1 < children.length && (
+            <hx-icon class="delimiter" type={icon}></hx-icon>
+          ),
         ])
       : children;