feat: add progress bar to submission form

Also organise the submission form files and routes.

app/app.js

@@ -9,7 +9,7 @@ import { configureStore, Root } from 'pubsweet-client'
 import theme from '@pubsweet/elife-theme'
 
 import Routes from './routes'
-import * as AuthorDetailsSchema from './components/submission/AuthorDetailsSchema'
+import * as AuthorDetailsSchema from './components/submission/AuthorDetails/AuthorDetailsSchema'
 
 theme.space = [
   0,

app/components/index.js

@@ -4,11 +4,3 @@ export {
 } from './global/AuthenticatedComponent'
 export { default as Dashboard } from './dashboard/Dashboard'
 export { default as LoginPage } from './login/LoginPage'
-export { default as AuthorDetailsPage } from './submission/AuthorDetailsPage'
-export { default as FileUploadsPage } from './submission/FileUploadsPage'
-export {
-  default as ManuscriptMetadataPage,
-} from './submission/ManuscriptMetadataPage'
-export {
-  default as ReviewerSuggestionsPage,
-} from './submission/ReviewerSuggestionsPage'

app/components/submission/AuthorDetails.js → app/components/submission/AuthorDetails/AuthorDetails.js

@@ -2,9 +2,10 @@ import React from 'react'
 import { Flex, Box } from 'grid-styled'
 
 import { Button, Heading, H1 } from '@pubsweet/ui'
-import ValidatedField from '../ui/atoms/ValidatedField'
+import ValidatedField from '../../ui/atoms/ValidatedField'
 
 import { emptyAssignee } from './AuthorDetailsSchema'
+import ProgressBar from '../ProgressBar'
 
 class AuthorDetails extends React.Component {
   constructor() {
@@ -28,6 +29,8 @@ class AuthorDetails extends React.Component {
 
     return (
       <form noValidate onSubmit={handleSubmit}>
+        <ProgressBar currentStep={0} />
+
         <H1>Are you handling this submission?</H1>
 
         <Flex>

app/components/submission/FileUploads.js → app/components/submission/FileUploads/FileUploads.js

 import React from 'react'
 import { Flex, Box } from 'grid-styled'
 import { H1 } from '@pubsweet/ui'
-import FileUpload from '../ui/atoms/FileUpload'
-import ButtonLink from '../ui/atoms/ButtonLink'
+import FileUpload from '../../ui/atoms/FileUpload'
+import ButtonLink from '../../ui/atoms/ButtonLink'
+import ProgressBar from '../ProgressBar'
 
 const FileUploads = () => (
   <React.Fragment>
+    <ProgressBar currentStep={1} />
+
     <H1>Upload your manuscript and cover letter</H1>
 
     <Flex flexDirection="column">

app/components/submission/ManuscriptMetadataPage.js → app/components/submission/ManuscriptMetadata/ManuscriptMetadataPage.js

 import React from 'react'
 import { H1 } from '@pubsweet/ui'
-import ButtonLink from '../ui/atoms/ButtonLink'
+import ButtonLink from '../../ui/atoms/ButtonLink'
+import ProgressBar from '../ProgressBar'
 
 export default () => (
   <React.Fragment>
+    <ProgressBar currentStep={2} />
+
     <H1>Help us get your work seen by the right people</H1>
 
     <ButtonLink primary to="/submit/suggestions">

app/components/submission/ProgressBar.js

+import React from 'react'
+import { Steps } from '@pubsweet/ui'
+import { Box } from 'grid-styled'
+import PropTypes from 'prop-types'
+
+const ProgressBar = ({ currentStep }) => (
+  <Box mx="auto" width={500}>
+    <Steps currentStep={currentStep}>
+      <Steps.Step />
+      <Steps.Step />
+      <Steps.Step />
+      <Steps.Step />
+    </Steps>
+  </Box>
+)
+
+ProgressBar.propTypes = {
+  currentStep: PropTypes.number.isRequired,
+}
+
+export default ProgressBar

app/components/submission/ReviewerSuggestions.js → app/components/submission/ReviewerSuggestions/ReviewerSuggestions.js

@@ -2,11 +2,14 @@ import React from 'react'
 import { Flex, Box } from 'grid-styled'
 import { Button, H1 } from '@pubsweet/ui'
 
-import ValidatedField from '../ui/atoms/ValidatedField'
-import ButtonLink from '../ui/atoms/ButtonLink'
+import ValidatedField from '../../ui/atoms/ValidatedField'
+import ButtonLink from '../../ui/atoms/ButtonLink'
+import ProgressBar from '../ProgressBar'
 
 const ReviewerSuggestions = ({ handleSubmit }) => (
   <form noValidate onSubmit={handleSubmit}>
+    <ProgressBar currentStep={3} />
+
     <H1>Who would you like to review your work?</H1>
 
     <ValidatedField label="Suggested editor(s)" name="suggestedEditors" />

app/components/submission/SubmissionPage.js

+import React from 'react'
+import { Route, Switch } from 'react-router-dom'
+import AuthorDetailsPage from './AuthorDetails/AuthorDetailsPage'
+import FileUploadsPage from './FileUploads/FileUploadsPage'
+import ManuscriptMetadataPage from './ManuscriptMetadata/ManuscriptMetadataPage'
+import ReviewerSuggestionsPage from './ReviewerSuggestions/ReviewerSuggestionsPage'
+
+const SubmissionPage = ({ match }) => (
+  <Switch>
+    <Route component={FileUploadsPage} path={`${match.path}/upload`} />
+    <Route component={ManuscriptMetadataPage} path={`${match.path}/metadata`} />
+    <Route
+      component={ReviewerSuggestionsPage}
+      path={`${match.path}/suggestions`}
+    />
+    <Route component={AuthorDetailsPage} />
+  </Switch>
+)
+
+export default SubmissionPage

app/routes.js

@@ -5,12 +5,9 @@ import {
   AppBar,
   AuthenticatedComponent,
   Dashboard,
-  AuthorDetailsPage,
-  FileUploadsPage,
   LoginPage,
-  ManuscriptMetadataPage,
-  ReviewerSuggestionsPage,
 } from './components'
+import SubmissionPage from './components/submission/SubmissionPage'
 
 const Routes = () => (
   <Switch>
@@ -18,19 +15,8 @@ const Routes = () => (
     <AuthenticatedComponent>
       <AppBar />
       <Switch>
-        <Route component={AuthorDetailsPage} exact path="/submit" />
-        <Route component={FileUploadsPage} exact path="/submit/upload" />
-        <Route
-          component={ManuscriptMetadataPage}
-          exact
-          path="/submit/metadata"
-        />
-        <Route
-          component={ReviewerSuggestionsPage}
-          exact
-          path="/submit/suggestions"
-        />
-        <Route component={Dashboard} path="/" />
+        <Route component={SubmissionPage} path="/submit" />
+        <Route component={Dashboard} />
       </Switch>
     </AuthenticatedComponent>
   </Switch>