Improved Breadcrumb component

src/components/Breadcrumb/index.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React from 'react'
+import React, { Fragment } from 'react'
 import styled from 'styled-components'
 
 import Box from 'components/base/Box'
@@ -8,7 +8,6 @@ import Box from 'components/base/Box'
 const BreadcrumbWrapper = styled(Box).attrs({
   horizontal: true,
   align: 'center',
-  flow: 20,
   relative: true,
 })``
 const BreadcrumbStep = styled(({ start, active, end, ...props }) => (
@@ -17,29 +16,34 @@ const BreadcrumbStep = styled(({ start, active, end, ...props }) => (
   color: p => (p.active ? 'blue' : 'mouse'),
   align: 'center',
   flow: 5,
-  grow: p => !p.start && !p.end,
-  ml: p => p.end && 20,
-  mr: p => p.start && 20,
+  relative: true,
+})`
+  transition: color ease-in-out 0.1s ${p => (p.active ? 0.4 : 0)}s;
+`
+
+const BreadcrumbSeparator = styled(Box).attrs({
+  grow: true,
   relative: true,
 })`
   &:before,
   &:after {
+    background: ${p => p.theme.colors.pearl};
     content: ' ';
-    display: ${p => (p.start ? 'none' : 'block')};
+    display: block;
     height: 2px;
+    left: -20px;
     position: absolute;
-    left: -120px;
-    background: ${p => p.theme.colors.pearl};
-    margin-top: 8px;
-    width: 200px;
+    right: -20px;
+    top: -13px;
   }
 
   &:after {
     background: ${p => p.theme.colors.blue};
-    width: ${p => (p.active ? 200 : 0)}px;
-    transition: width ease-in-out 0.4s;
+    right: ${p => (p.active ? '-20px' : 'calc(100% + 20px)')};
+    transition: right ease-in-out 0.4s;
   }
 `
+
 const BreadcrumbNumberWrapper = styled(Box).attrs({
   bg: 'white',
   px: 3,
@@ -58,27 +62,31 @@ const BreadcrumbNumber = styled(Box).attrs({
   font-size: 9px;
   height: 20px;
   width: 20px;
-  transition: all ease-in-out 0.1s;
+  transition: all ease-in-out 0.1s ${p => (p.active ? 0.4 : 0)}s;
 `
 
-const Breadcrumb = ({ items, currentStep }: Object) => (
+type Props = {
+  items: Array<Object>,
+  currentStep: number | string,
+}
+
+const Breadcrumb = ({ items, currentStep }: Props) => (
   <BreadcrumbWrapper>
     {items.map((item, i) => {
-      const active = i < currentStep
+      const active = i < parseInt(currentStep, 10)
       const start = i === 0
-      const end = i + 1 === items.length
       return (
-        <BreadcrumbStep
+        <Fragment
           key={i} // eslint-disable-line react/no-array-index-key
-          start={start}
-          end={end}
-          active={active}
         >
-          <BreadcrumbNumberWrapper>
-            <BreadcrumbNumber active={active}>{i + 1}</BreadcrumbNumber>
-          </BreadcrumbNumberWrapper>
-          <Box fontSize={0}>{item.label}</Box>
-        </BreadcrumbStep>
+          {!start && <BreadcrumbSeparator active={active} />}
+          <BreadcrumbStep active={active}>
+            <BreadcrumbNumberWrapper>
+              <BreadcrumbNumber active={active}>{i + 1}</BreadcrumbNumber>
+            </BreadcrumbNumberWrapper>
+            <Box fontSize={0}>{item.label}</Box>
+          </BreadcrumbStep>
+        </Fragment>
       )
     })}
   </BreadcrumbWrapper>