refactor: clean breadcrumb

p3ol · Dec 17, 2018 · 53fa779 · 53fa779
1 parent 7289727
commit 53fa779
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 8 deletions.
diff --git a/src/BreadCrumb.js b/src/BreadCrumb.js
@@ -1,17 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { injectStyles } from './utils';
+import { injectStyles, classNames } from './utils';
 import styles from './theme/components/BreadCrumb.styl';
 
 class BreadCrumb extends React.Component {
 
   static propTypes = {
     items: PropTypes.array,
+    theme: PropTypes.string,
+    animateItem: PropTypes.func,
   }
 
   static defaultProps = {
     items: [],
+    theme: 'default',
+    animateItem: item => item,
   }
 
   constructor(props) {
@@ -22,12 +26,20 @@ class BreadCrumb extends React.Component {
   }
 
   render() {
-    const { items } = this.props;
+    const { items, className, theme, animateItem, ...rest } = this.props;
 
     return (
-      <div className="junipero junipero-bread-crumb">
+      <div
+        { ...rest }
+        className={classNames(
+          'junipero',
+          'junipero-bread-crumb',
+          'theme-' + theme,
+          className,
+        )}
+      >
         {items.map((item, index) =>
-          <span key={index}>{item}</span>
+          animateItem(<span key={index}>{item}</span>, index)
         )}
       </div>
     );

diff --git a/src/theme/components/BreadCrumb.styl b/src/theme/components/BreadCrumb.styl
@@ -1,12 +1,9 @@
 @import "../utils/colors"
 
 .junipero.junipero-bread-crumb
-  display: inline
   cursor: default
 
   span
-    color: $color-shuttle-gray
-
     &:after
       content: ">"
       margin: 0 5px
@@ -16,7 +13,20 @@
 
     &:last-child
       font-weight: bold
-      color: $color-midnight
 
       &:after
         display: none
+
+  &.theme-none
+    span
+      color: $color-shuttle-gray
+
+      &:last-child
+        color: $color-midnight
+
+  &.theme-default
+    span
+      color: $color-midnight
+
+      &:last-child
+        color: $color-eastern-blue