feat(ui-toolkit): initial Progressbar implementation

packages/ui-toolkit/src/icons/index.js

@@ -2,3 +2,4 @@ export { default as CloseIcon } from './close';
 export { default as PlusIcon } from './plus';
 export { default as MinusIcon } from './minus';
 export { default as ArrowIcon } from './arrow';
+export { default as TickIcon } from './tick';

packages/ui-toolkit/src/icons/svg/icon_tick.svg

@@ -4,8 +4,8 @@
     <title>tick</title>
     <desc>Created with Sketch.</desc>
     <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
-        <g id="creating-deployment-group:-editing-manifest" transform="translate(-399.000000, -206.000000)" fill="#494949">
+        <g id="creating-deployment-group:-editing-manifest" transform="translate(-399.000000, -206.000000)">
             <g id="steps" transform="translate(183.000000, 186.000000)">
                 <g id="step" transform="translate(168.000000, 0.000000)">
                     <g id="icon:-in-progress" transform="translate(40.000000, 12.000000)">

packages/ui-toolkit/src/icons/tick.js

@@ -0,0 +1,7 @@
+import Baseline from '../baseline';
+// eslint-disable-next-line no-unused-vars
+import React from 'react';
+
+import TickIcon from './svg/icon_tick.svg';
+
+export default Baseline(TickIcon);

packages/ui-toolkit/src/index.js

@@ -15,10 +15,16 @@ export { default as Topology } from './topology';
 export { default as Modal } from './modal';
 export { default as CloseButton } from './close-button';
 export { default as IconButton } from './icon-button';
-
 export { Tooltip, TooltipButton, TooltipDivider } from './tooltip';
 export { Dropdown } from './dropdown';
 
+export {
+  Progressbar,
+  ProgressbarButton,
+  ProgressbarItem,
+  Indicator
+} from './progress-bar';
+
 export {
   borderRadius,
   bottomShaddow,

packages/ui-toolkit/src/progress-bar/button.js

@@ -0,0 +1,131 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import unitcalc from 'unitcalc';
+import theme from '../theme';
+import Button from '../button';
+import remcalc from 'remcalc';
+import Baseline from '../baseline';
+import Indicator from './indicator';
+import is, { isNot, isOr } from 'styled-is';
+
+const StyledButton = styled(Button)`
+  padding: ${unitcalc(2)} ${unitcalc(3)} ${unitcalc(2)} ${unitcalc(2)};
+  background-color: ${theme.white};
+  color: ${theme.secondary};
+  text-align: left;
+  border: none;
+  box-shadow: none;
+  line-height: 1.6;
+  cursor: default;
+
+  &:focus {
+    background-color: ${theme.white};
+    border: none;
+    color: ${theme.secondary};
+  }
+
+  &:hover {
+    background-color: ${theme.white};
+    border: none;
+    color: ${theme.secondary};
+  }
+
+  &:active,
+  &:active:hover,
+  &:active:focus {
+    background-color: ${theme.white};
+    border: none;
+    color: ${theme.secondary};
+  }
+`;
+
+const StyledContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  z-index: ${props => props.zIndex};
+
+  padding-left: ${remcalc(40)};
+  border-top: ${remcalc(1)} solid ${props => props.theme.grey};
+  border-bottom: ${remcalc(1)} solid ${props => props.theme.grey};
+
+  ${isOr('active', 'completed')`
+    border-top: ${remcalc(1)} solid ${props => props.theme.green};
+    border-bottom: ${remcalc(1)} solid ${props => props.theme.green};
+  `}
+
+  ${is('first')`
+    border-left: ${remcalc(1)} solid ${props => props.theme.green};
+    padding-left: ${remcalc(13)};
+  `}
+
+  ${isNot('first', 'completed', 'active')`
+    border-right: ${remcalc(1)} solid ${props => props.theme.grey};
+  `}
+
+  ${isOr('active', 'completed')`
+    border-right: ${remcalc(1)} solid ${props => props.theme.green};
+  `}
+
+  ${isNot('last')`
+    border-right: none;
+  `}
+`;
+
+const StyledArrow = styled.span`
+  position: absolute;
+  top: 0;
+  right: -${remcalc(27)};
+  border: solid ${props => props.theme.grey};
+  border-width: 0 ${remcalc(1)} ${remcalc(1)} 0;
+  padding: ${remcalc(17.1)};
+  transform: rotate(-45deg);
+  margin: ${remcalc(6.4)} ${remcalc(10)} ${remcalc(6.4)} ${remcalc(10)};
+
+  ${is('last')`
+    display: none;
+  `};
+
+  ${isOr('completed', 'active')`
+    border-color: ${props => props.theme.green};
+  `};
+`;
+
+const ProgressbarButton = ({
+  children,
+  first,
+  completed,
+  active,
+  last,
+  ...rest
+}) => {
+  const state = {
+    first,
+    completed,
+    active,
+    last
+  };
+
+  return (
+    <StyledContainer {...state} {...rest}>
+      <Indicator {...state} />
+      <StyledButton {...state}>
+        {children}
+      </StyledButton>
+      <StyledArrow {...state} />
+    </StyledContainer>
+  );
+};
+
+ProgressbarButton.propTypes = {
+  zIndex: PropTypes.string,
+  active: PropTypes.bool,
+  completed: PropTypes.bool,
+  first: PropTypes.bool,
+  last: PropTypes.bool,
+  onClick: PropTypes.func
+};
+
+export default Baseline(ProgressbarButton);

packages/ui-toolkit/src/progress-bar/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+import theme from '../theme';
+import Baseline from '../baseline';
+
+const StyledList = styled.ul`
+  display: table;
+  list-style-type: none;
+  background-color: ${theme.white};
+  padding: 0;
+`;
+
+/**
+ * @example ./usage.md
+ */
+export default ({ children, ...rest }) =>
+  <StyledList {...rest}>
+    {children}
+  </StyledList>;
+
+export { default as ProgressbarItem } from './item';
+export { default as ProgressbarButton } from './button';
+export { default as Indicator } from './indicator';

packages/ui-toolkit/src/progress-bar/indicator.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import styled from 'styled-components';
+import remcalc from 'remcalc';
+import Baseline from '../baseline';
+import { TickIcon } from '../icons';
+import is, { isNot, isOr } from 'styled-is';
+
+const Tick = styled(TickIcon)`
+  fill: none;
+
+  ${is('active')`
+    fill: ${props => props.theme.secondary};
+  `}
+
+  ${is('completed')`
+    fill: ${props => props.theme.white};
+  `}
+`;
+
+const StyledIndicator = styled.span`
+  display: inline-block;
+  border-radius: 50%;
+  width: ${remcalc(18)};
+  height: ${remcalc(18)};
+  background: inherit;
+  border: ${remcalc(1)} solid ${props => props.theme.grey};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  ${isOr('completed', 'active')`
+    border: ${remcalc(1)} solid ${props => props.theme.green};
+  `}
+
+  ${is('completed')`
+    background: ${props => props.theme.green};
+  `}
+`;
+
+const Indicator = ({ first, completed, active, last, ...rest }) => {
+  const state = {
+    first,
+    completed,
+    active,
+    last
+  };
+
+  return (
+    <StyledIndicator {...state} {...props}>
+      <Tick {...state} />
+    </StyledIndicator>
+  );
+};
+
+export default Baseline(Indicator);

packages/ui-toolkit/src/progress-bar/item.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import styled from 'styled-components';
+import Baseline from '../baseline';
+
+const StyledItem = styled.li`
+  float: left;
+`;
+
+const ProgressbarItem = ({ children, ...props }) =>
+  <StyledItem {...props}>
+    {children}
+  </StyledItem>;
+
+export default Baseline(ProgressbarItem);

packages/ui-toolkit/src/progress-bar/usage.md

@@ -0,0 +1,23 @@
+```
+const Progressbar = require('./index').default;
+const ProgressbarButton = require('./button').default;
+const ProgressbarItem = require('./item').default;
+
+<Progressbar>
+  <ProgressbarItem>
+    <ProgressbarButton zIndex="10" completed first onClick={() => console.log("name")}>
+      Name the group
+    </ProgressbarButton>
+  </ProgressbarItem>
+  <ProgressbarItem>
+    <ProgressbarButton zIndex="9" active onClick={() => console.log("define")}> 
+      Define services
+    </ProgressbarButton>
+  </ProgressbarItem>
+  <ProgressbarItem>
+    <ProgressbarButton zIndex="8" last onClick={() => console.log("review")}>
+      Review and deploy
+    </ProgressbarButton>
+  </ProgressbarItem>
+</Progressbar>
+```

packages/ui-toolkit/styleguide.config.js

@@ -20,7 +20,7 @@ module.exports = {
         return Object.assign(rule, {
           options: {
             babelrc: true,
-            cacheDirectory: true
+            cacheDirectory: false
           }
         });
       })
@@ -60,6 +60,7 @@ module.exports = {
         'src/form/number-input.js',
         'src/form/checkbox.js',
         'src/dropdown/index.js',
+        'src/progress-bar/index.js',
         'src/form/radio.js',
         'src/form/select.js',
         'src/form/toggle.js',