feat(styleguide): steps override

packages/component-faraday-ui/src/Steps.js

+import React from 'react'
+import { Steps } from '@pubsweet/ui'
+
+export default () => (
+  <Steps currentStep={1}>
+    <Steps.Step key="step-1" title="Previous" />
+    <Steps.Step key="step-2" title="Current step" />
+    <Steps.Step key="step-3" title="Next step" />
+  </Steps>
+)

packages/component-faraday-ui/src/Steps.md

+Submission steps.
+
+```js
+<Steps />
+```
\ No newline at end of file

packages/hindawi-theme/src/elements/Steps.js

+/* eslint-disable no-nested-ternary */
+
+import { css } from 'styled-components'
+import { th } from '@pubsweet/ui-toolkit'
+
+const checkIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24">
+  <path fill="#fff" d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/>
+</svg>`
+
+export default {
+  Step: css`
+    height: 20px;
+    width: 20px;
+    box-sizing: border-box;
+    border: ${props =>
+      props.isPast
+        ? 'none'
+        : props.isCurrent ? '6px solid #dbdbdb' : '2px solid #dbdbdb'};
+    background-color: ${props =>
+      !props.isCurrent && !props.isPast
+        ? th('colorBackground')
+        : 'transparent'};
+    z-index: 10;
+  `,
+  Separator: css`
+    background-color: ${props =>
+      props.isPast ? th('colorPrimary') : th('colorBorder')};
+    margin: 0 -2px;
+    z-index: 1;
+  `,
+  Bullet: css`
+    background-color: ${th('colorPrimary')};
+    width: 8px;
+    height: 8px;
+  `,
+  Success: css`
+    background: url('data:image/svg+xml;utf8,${encodeURIComponent(
+      checkIcon,
+    )}') center no-repeat, ${th('colorPrimary')};
+  `,
+  StepTitle: css`
+    color: ${props =>
+      props.isCurrent ? th('steps.currentStepColor') : th('colorText')};
+    font-family: ${props =>
+      props.isCurrent ? th('fontHeading') : th('fontReading')};
+    font-size: ${th('fontSizeBase')};
+    line-height: ${th('lineHeightBase')};
+  `,
+}

packages/hindawi-theme/src/elements/index.js

 import Icon from './Icon'
 import Menu from './Menu'
+import Steps from './Steps'
 import Button from './Button'
 import Heading from './Heading'
 import Checkbox from './Checkbox'
@@ -10,6 +11,7 @@ import ValidatedTextField from './ValidatedTextField'
 export {
   Icon,
   Menu,
+  Steps,
   Button,
   Heading,
   Checkbox,

packages/hindawi-theme/src/index.js

@@ -5,6 +5,7 @@ import './fonts/index.css'
 import {
   Icon,
   Menu,
+  Steps,
   Button,
   Heading,
   Checkbox,
@@ -104,6 +105,10 @@ const hindawiTheme = {
     hoverShadow: '0 1px 2px 1px #939393',
   },
 
+  steps: {
+    currentStepColor: '#003049',
+  },
+
   /* Text variables */
   // fonts
   fontInterface: "'Myriad Pro Bold'",
@@ -157,6 +162,7 @@ const hindawiTheme = {
       {
         Icon,
         Menu,
+        Steps,
         Button,
         Checkbox,
         Accordion,