Refactor Breadcrumb component

src/components/Breadcrumb/Step.js

@@ -0,0 +1,81 @@
+// @flow
+
+import React, { Fragment } from 'react'
+import styled from 'styled-components'
+
+import Box from 'components/base/Box'
+
+const Wrapper = styled(Box).attrs({
+  align: 'center',
+  justify: 'center',
+  color: p => (p.isActive ? 'blue' : 'mouse'),
+})`
+  width: 40px;
+  flex-shrink: 0;
+  text-align: center;
+  font-size: 9px;
+`
+
+const Number = styled(Box).attrs({
+  align: 'center',
+  justify: 'center',
+  color: p => (p.isActive ? 'white' : 'mouse'),
+  bg: p => (p.isActive ? 'blue' : 'pearl'),
+})`
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  font-size: 9px;
+  box-shadow: ${p => `0 0 0 ${p.isActive ? 4 : 0}px ${p.theme.colors.cream}`};
+  transition: all ease-in-out 0.1s ${p => (p.isActive ? 0.4 : 0)}s;
+`
+
+const Bar = styled.div`
+  height: 2px;
+  background: ${p => p.theme.colors.pearl};
+  flex-grow: 1;
+  position: relative;
+
+  &:after {
+    background: ${p => p.theme.colors.pearl};
+    content: '';
+    display: block;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    position: absolute;
+    background: ${p => p.theme.colors.blue};
+    transition: transform ease-in-out 0.4s;
+    transform-origin: center left;
+    transform: scaleX(${p => (p.isActive ? 1 : 0)});
+  }
+`
+
+const Label = styled(Box)`
+  position: absolute;
+  margin-top: 30px;
+  transition: color ease-in-out 0.1s ${p => (p.isActive ? 0.4 : 0)}s;
+`
+
+type Props = {
+  number: number,
+  isActive: boolean,
+  isFirst: boolean,
+  children: any,
+}
+
+function Step(props: Props) {
+  const { number, isActive, isFirst, children } = props
+  return (
+    <Fragment>
+      {!isFirst && <Bar isActive={isActive} />}
+      <Wrapper isActive={isActive}>
+        <Number isActive={isActive}>{number}</Number>
+        <Label isActive={isActive}>{children}</Label>
+      </Wrapper>
+    </Fragment>
+  )
+}
+
+export default Step

src/components/Breadcrumb/index.js

@@ -1,99 +1,36 @@
 // @flow
 
-import React, { PureComponent, Fragment } from 'react'
+/* eslint-disable react/no-array-index-key */
+
+import React, { PureComponent } from 'react'
 import styled from 'styled-components'
 
 import Box from 'components/base/Box'
-
-const BreadcrumbWrapper = styled(Box).attrs({
-  horizontal: true,
-  alignItems: 'center',
-  relative: true,
-})``
-
-const BreadcrumbStep = styled(({ start, active, end, ...props }) => (
-  <Box start={start} end={end} active={active} {...props} />
-)).attrs({
-  color: p => (p.active ? 'blue' : 'mouse'),
-  alignItems: 'center',
-  flow: 5,
-  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: block;
-    height: 2px;
-    left: -20px;
-    position: absolute;
-    right: -20px;
-    top: -13px;
-  }
-
-  &:after {
-    background: ${p => p.theme.colors.blue};
-    right: ${p => (p.active ? '-20px' : 'calc(100% + 20px)')};
-    transition: right ease-in-out 0.4s;
-  }
-`
-
-const BreadcrumbNumberWrapper = styled(Box).attrs({
-  bg: 'white',
-  px: 3,
-  relative: true,
-})`
-  z-index: 1;
-`
-const BreadcrumbNumber = styled(Box).attrs({
-  color: p => (p.active ? 'white' : 'mouse'),
-  bg: p => (p.active ? 'blue' : 'pearl'),
-  alignItems: 'center',
-  justifyContent: 'center',
-})`
-  border-radius: 50%;
-  box-shadow: ${p => `0 0 0 ${p.active ? 4 : 0}px ${p.theme.colors.cream}`};
-  font-size: 9px;
-  height: 20px;
-  width: 20px;
-  transition: all ease-in-out 0.1s ${p => (p.active ? 0.4 : 0)}s;
-`
+import Step from './Step'
 
 type Props = {
   items: Array<Object>,
   currentStep: number | string,
 }
 
+const Wrapper = styled(Box).attrs({
+  horizontal: true,
+  align: 'center',
+})`
+  margin-bottom: 25px;
+`
+
 class Breadcrumb extends PureComponent<Props> {
   render() {
     const { items, currentStep } = this.props
     return (
-      <BreadcrumbWrapper>
-        {items.map((item, i) => {
-          const active = i < parseInt(currentStep, 10)
-          const start = i === 0
-          return (
-            <Fragment
-              key={i} // eslint-disable-line react/no-array-index-key
-            >
-              {!start && <BreadcrumbSeparator active={active} />}
-              <BreadcrumbStep active={active}>
-                <BreadcrumbNumberWrapper>
-                  <BreadcrumbNumber active={active}>{i + 1}</BreadcrumbNumber>
-                </BreadcrumbNumberWrapper>
-                <Box fontSize={3}>{item.label}</Box>
-              </BreadcrumbStep>
-            </Fragment>
-          )
-        })}
-      </BreadcrumbWrapper>
+      <Wrapper>
+        {items.map((item, i) => (
+          <Step key={i} isActive={i < parseInt(currentStep, 10)} isFirst={i === 0} number={i + 1}>
+            {item.label}
+          </Step>
+        ))}
+      </Wrapper>
     )
   }
 }