feat(header): header with breadcrumbs

Author: Francois Laubscher

src/colors.js

@@ -22,5 +22,8 @@ export default {
   disabled: '#a9a9bb',
   grey: '#d2d2e4',
   lightgrey: '#fafafa',
-  darkbg: '#f0f0f8'
+  darkbg: '#f0f0f8',
+
+  monteCarlo: '#87ccd4',
+  paradiso: '#398891'
 };

src/header-with-breadcrumbs/index.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { StyledHeader as Header, Step, Crumbs } from './style';
+
+const HeaderWithBreadcrumbs = ({ className, crumbs, activeIndex }) => {
+  console.log(activeIndex);
+  return (
+    <Header className={className}>
+      <Crumbs>
+        {crumbs.map((crumb, index) => (
+          <Step
+            key={crumb}
+            completed={index < activeIndex}
+            active={index === activeIndex}
+          >
+            {crumb}
+          </Step>
+        ))}
+      </Crumbs>
+    </Header>
+  );
+};
+
+HeaderWithBreadcrumbs.defaultProps = {
+  className: null,
+  activeIndex: 0
+};
+
+HeaderWithBreadcrumbs.propTypes = {
+  className: PropTypes.string,
+  crumbs: PropTypes.arrayOf(PropTypes.string).isRequired,
+  activeIndex: PropTypes.number
+};
+
+export default HeaderWithBreadcrumbs;

src/header-with-breadcrumbs/style.js

@@ -0,0 +1,55 @@
+import styled from 'styled-components';
+import Header from '../header';
+
+import Colors from '../colors';
+
+export const StyledHeader = styled(Header)`
+  padding: 0.5rem;
+`;
+
+const getStepBackground = (completed, active) => {
+  const background = (completed && Colors.monteCarlo) || Colors.darkerStorm;
+  return (active && Colors.ocean) || background;
+};
+
+const getStepColor = (completed, active) => {
+  const color = (completed && Colors.paradiso) || Colors.lighterStorm;
+  return (active && Colors.white) || color;
+};
+
+export const Crumbs = styled.div`
+  margin-left: 1rem;
+  display: flex;
+  align-items: center;
+  height: 25px;
+  width: 100%;
+  max-width: 860px;
+
+  @media (min-width: 768px) {
+    margin: 0 auto;
+  }
+`;
+
+export const Step = styled.div`
+  line-height: 25px;
+  font-size: 10px;
+  text-align: center;
+  background-color: ${({ completed, active }) =>
+    getStepBackground(completed, active)};
+  color: ${({ completed, active }) => getStepColor(completed, active)};
+  width: 100%;
+  margin-right: 1px;
+  font-weight: 600;
+  transition: background-color 0.2s ease-in;
+
+  :first-child {
+    border-top-left-radius: 15px;
+    border-bottom-left-radius: 15px;
+  }
+
+  :last-child {
+    margin-right: 0;
+    border-top-right-radius: 15px;
+    border-bottom-right-radius: 15px;
+  }
+`;

src/index.js

@@ -3,6 +3,7 @@ import Colors from './colors';
 import Input, { Currency as InputCurrency } from './input';
 import Dropdown from './dropdown';
 import Header from './header';
+import HeaderWithBreadcrumbs from './header-with-breadcrumbs';
 import Footer from './footer';
 import AutoComplete from './autocomplete';
 import Toast from './toast';
@@ -19,6 +20,7 @@ export {
   InputCurrency,
   Dropdown,
   Header,
+  HeaderWithBreadcrumbs,
   Footer,
   AutoComplete,
   Toast,

stories/header-with-breadcrumbs.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { number } from '@storybook/addon-knobs';
+import HeaderWithBreadcrumbs from '../src/header-with-breadcrumbs';
+
+const crumbs = ['Address', 'Time', 'Details'];
+
+storiesOf('HeaderWithBreadcrumbs', module).add('Default', () => {
+  return <HeaderWithBreadcrumbs crumbs={crumbs} />;
+});
+
+storiesOf('HeaderWithBreadcrumbs', module).add('WithActiveIndex', () => (
+  <HeaderWithBreadcrumbs crumbs={crumbs} activeIndex={number('activeIndex')} />
+));