Refactor progress into separate Steps component

packages/component-wizard/src/components/Wizard.js

 import React from 'react'
 import classnames from 'classnames'
+import { Steps } from 'pubsweet-components-faraday/src/components'
 
 import classes from './Wizard.local.scss'
 import WizardFormStep from './WizardFormStep'
-import Progress from './Progress'
-
-const { Step } = Progress
 
 export default ({
   journal: { wizard: { showProgress, steps } },
@@ -16,11 +14,11 @@ export default ({
 }) => (
   <div className={classnames(classes.container)}>
     {showProgress && (
-      <Progress currentStep={step}>
+      <Steps currentStep={step}>
         {getSteps().map((step, index) => (
-          <Step index={index} key={step} title={step} />
+          <Steps.Step key={step} title={step} />
         ))}
-      </Progress>
+      </Steps>
     )}
     <WizardFormStep {...steps[step]} nextStep={nextStep} prevStep={prevStep} />
   </div>

packages/component-wizard/src/components/index.js

-export { default as Wizard } from './Wizard'
-export { default as Progress } from './Progress'
-export { default as WizardPage } from './WizardPage'
-export { default as WizardStep } from './WizardStep'
-export { default as WizardFormStep } from './WizardFormStep'
-export { default as AutosaveIndicator } from './AutosaveIndicator'
+export { default as Wizard } from './WizardPage'

packages/component-wizard/src/components/Progress.js → packages/components-faraday/src/components/Steps/Steps.js

 import React from 'react'
 import PropTypes from 'prop-types'
-import { compose, withHandlers, withContext, getContext } from 'recompose'
+import { compose, withHandlers, setDisplayName } from 'recompose'
 
-import classes from './Progress.local.scss'
+import classes from './Steps.local.scss'
 
 const Separator = () => <div className={classes.separator} />
 
@@ -19,23 +19,30 @@ const Steps = ({ currentStep, children, renderSteps }) => (
 )
 
 const DecoratedSteps = compose(
+  setDisplayName('Steps'),
   withHandlers({
-    renderSteps: ({ children }) => () => {
-      const c = []
-      React.Children.forEach(children, (child, idx) => {
-        c.push(child)
-        if (idx !== React.Children.count(children) - 1) {
-          c.push(<Separator key={Math.random()} />)
-        }
-      })
-      return c
+    renderSteps: ({ children, renderSeparator, currentStep }) => () => {
+      const separator = renderSeparator || Separator
+      return React.Children.toArray(children).reduce(
+        (acc, el, index, arr) =>
+          index === arr.length - 1
+            ? [...acc, React.cloneElement(el, { index, currentStep })]
+            : [
+                ...acc,
+                React.cloneElement(el, { index, currentStep }),
+                React.createElement(separator, { key: `sep-${el.key}` }),
+              ],
+        [],
+      )
     },
   }),
-  withContext({ currentStep: PropTypes.number }, ({ currentStep }) => ({
-    currentStep,
-  })),
 )(Steps)
 
-DecoratedSteps.Step = getContext({ currentStep: PropTypes.number })(Step)
+DecoratedSteps.Step = Step
+
+DecoratedSteps.propTypes = {
+  currentStep: PropTypes.number.isRequired,
+  renderSeparator: PropTypes.func,
+}
 
 export default DecoratedSteps

packages/components-faraday/src/components/Steps/Steps.md

+# Steps
+
+`Steps` is a navigation bar that guides users through the steps of a task. Use it whenever there is a sequence of tasks or steps that need to be done.
+
+## Props
+
+|      Prop       |                            Description                            | Required | Default |      Type       |
+| :-------------: | :---------------------------------------------------------------: | :------: | :-----: | :-------------: |
+|   currentStep   |                  The current step of the wizard.                  |   true   |  null   |     number      |
+| renderSeparator | Separator component to be rendered between two adjacent children. |  false   |  null   | React component |
+
+## Examples
+
+1.Usage with the Step component.
+
+```js
+import { Steps } from 'pubsweet-components-faraday/src/components'
+const { Step } = Steps
+
+<Steps currentStep={1}>
+  <Step title="First step" />
+  <Step title="Second step" />
+  <Step title="Third step" />
+</Steps>
+```
+
+2.Usage with a custom step component
+
+```js
+const StepComponent = ({ index, currentStep, customProp }) => <div>
+  I am a custom component at step {index} / {currentStep} with a {customProp}.
+</div>
+
+<Steps currentStep={1}>
+  <StepComponent customProp="Hei" />
+  <StepComponent customProp="Ho" />
+  <StepComponent customProp="Let's go!" />
+</Steps>
+```
+
+Each child of the Steps component has access to the `currentStep` and also it's own `index`.
+
+3.Usage with a custom separator
+When the default separator is not what you want you can always pass a custom separator component. This custom separator will be placed between each two adjacent children.
+
+```js
+const Separator = () => (
+  <div style={{ backgroundColor: 'pink', flex: 1, height: 10 }}>
+    DIVIDER OF WORLDS
+  </div>
+)
+
+<Steps currentStep={1} renderSeparator={Separator}>
+  <StepComponent customProp="Hei" />
+  <StepComponent customProp="Ho" />
+  <StepComponent customProp="Let's go!" />
+</Steps>
+```

packages/components-faraday/src/components/index.js

+export { default as Steps } from './Steps/Steps'
 export { default as Files } from './Files/Files'
 export { default as AuthorList } from './AuthorList/AuthorList'
 export { default as SortableList } from './SortableList/SortableList'

packages/xpub-faraday/app/routes.js

@@ -12,7 +12,7 @@ import {
 
 // import DashboardPage from 'pubsweet-component-xpub-dashboard/src/components/DashboardPage'
 import DashboardPage from 'pubsweet-components-faraday/src/components/Dashboard'
-import WizardPage from 'pubsweet-component-wizard/src/components/WizardPage'
+import { Wizard } from 'pubsweet-component-wizard/src/components'
 import ManuscriptPage from 'pubsweet-component-xpub-manuscript/src/components/ManuscriptPage'
 import ConfirmationPage from 'pubsweet-components-faraday/src/components/UIComponents/ConfirmationPage'
 import NotFound from 'pubsweet-components-faraday/src/components/UIComponents/NotFound'
@@ -30,7 +30,7 @@ const Routes = () => (
       />
       <PrivateRoute component={LogoutPage} exact path="/logout" />
       <PrivateRoute
-        component={WizardPage}
+        component={Wizard}
         exact
         path="/projects/:project/versions/:version/submit"
       />

packages/xpub-faraday/config/default.js

@@ -24,7 +24,7 @@ module.exports = {
   'pubsweet-client': {
     API_ENDPOINT: '/api',
     'login-redirect': '/',
-    'redux-log': true,
+    'redux-log': false,
     theme: process.env.PUBSWEET_THEME,
   },
   'mail-transport': {