diff --git a/app/app.js b/app/app.js
index 1dc096db124dd8af4f102e706c1f9a9d5005e21e..90a0a198f442d4641c11d92d2776c3e649ca27fc 100644
--- a/app/app.js
+++ b/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,
diff --git a/app/components/index.js b/app/components/index.js
index 7f08b3e36d64ba12ea18775bae8c6259f182b3ec..e83465d8da9dbb0f6cde8531f5b94acb2743e257 100644
--- a/app/components/index.js
+++ b/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'
diff --git a/app/components/submission/AuthorDetails.js b/app/components/submission/AuthorDetails/AuthorDetails.js
similarity index 94%
rename from app/components/submission/AuthorDetails.js
rename to app/components/submission/AuthorDetails/AuthorDetails.js
index efa02b9982408e4557c33620210d5cc031ddc9c0..7fb868126bb5b2d9ab31840e95a30c9eb4f898a9 100644
--- a/app/components/submission/AuthorDetails.js
+++ b/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>
diff --git a/app/components/submission/AuthorDetails.md b/app/components/submission/AuthorDetails/AuthorDetails.md
similarity index 100%
rename from app/components/submission/AuthorDetails.md
rename to app/components/submission/AuthorDetails/AuthorDetails.md
diff --git a/app/components/submission/AuthorDetailsPage.js b/app/components/submission/AuthorDetails/AuthorDetailsPage.js
similarity index 100%
rename from app/components/submission/AuthorDetailsPage.js
rename to app/components/submission/AuthorDetails/AuthorDetailsPage.js
diff --git a/app/components/submission/AuthorDetailsSchema.js b/app/components/submission/AuthorDetails/AuthorDetailsSchema.js
similarity index 100%
rename from app/components/submission/AuthorDetailsSchema.js
rename to app/components/submission/AuthorDetails/AuthorDetailsSchema.js
diff --git a/app/components/submission/FileUploads.js b/app/components/submission/FileUploads/FileUploads.js
similarity index 81%
rename from app/components/submission/FileUploads.js
rename to app/components/submission/FileUploads/FileUploads.js
index a303f9b059ffb24a91f9bca851d41c075e908ea2..d678ee223f0a635574d081cb622d3f76917793fd 100644
--- a/app/components/submission/FileUploads.js
+++ b/app/components/submission/FileUploads/FileUploads.js
@@ -1,11 +1,14 @@
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">
diff --git a/app/components/submission/FileUploads.md b/app/components/submission/FileUploads/FileUploads.md
similarity index 100%
rename from app/components/submission/FileUploads.md
rename to app/components/submission/FileUploads/FileUploads.md
diff --git a/app/components/submission/FileUploadsPage.js b/app/components/submission/FileUploads/FileUploadsPage.js
similarity index 100%
rename from app/components/submission/FileUploadsPage.js
rename to app/components/submission/FileUploads/FileUploadsPage.js
diff --git a/app/components/submission/ManuscriptMetadataPage.js b/app/components/submission/ManuscriptMetadata/ManuscriptMetadataPage.js
similarity index 71%
rename from app/components/submission/ManuscriptMetadataPage.js
rename to app/components/submission/ManuscriptMetadata/ManuscriptMetadataPage.js
index e13ed46457029beed4fcac8c3c29648f6979a18d..233c78db107c95a70c37665b0c3d4db20020f723 100644
--- a/app/components/submission/ManuscriptMetadataPage.js
+++ b/app/components/submission/ManuscriptMetadata/ManuscriptMetadataPage.js
@@ -1,9 +1,12 @@
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">
diff --git a/app/components/submission/ProgressBar.js b/app/components/submission/ProgressBar.js
new file mode 100644
index 0000000000000000000000000000000000000000..afec1ef8bbbe4ef4fae588f76eefab044b3dcb21
--- /dev/null
+++ b/app/components/submission/ProgressBar.js
@@ -0,0 +1,21 @@
+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
diff --git a/app/components/submission/ReviewerSuggestions.js b/app/components/submission/ReviewerSuggestions/ReviewerSuggestions.js
similarity index 87%
rename from app/components/submission/ReviewerSuggestions.js
rename to app/components/submission/ReviewerSuggestions/ReviewerSuggestions.js
index 7d128c4c5c254571e2b396a8dd51e33086483dd8..e2e9cfaff4b8b9e409506c7a5ef6101ea74630ee 100644
--- a/app/components/submission/ReviewerSuggestions.js
+++ b/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" />
diff --git a/app/components/submission/ReviewerSuggestions.md b/app/components/submission/ReviewerSuggestions/ReviewerSuggestions.md
similarity index 100%
rename from app/components/submission/ReviewerSuggestions.md
rename to app/components/submission/ReviewerSuggestions/ReviewerSuggestions.md
diff --git a/app/components/submission/ReviewerSuggestionsPage.js b/app/components/submission/ReviewerSuggestions/ReviewerSuggestionsPage.js
similarity index 100%
rename from app/components/submission/ReviewerSuggestionsPage.js
rename to app/components/submission/ReviewerSuggestions/ReviewerSuggestionsPage.js
diff --git a/app/components/submission/ReviewerSuggestionsSchema.js b/app/components/submission/ReviewerSuggestions/ReviewerSuggestionsSchema.js
similarity index 100%
rename from app/components/submission/ReviewerSuggestionsSchema.js
rename to app/components/submission/ReviewerSuggestions/ReviewerSuggestionsSchema.js
diff --git a/app/components/submission/SubmissionPage.js b/app/components/submission/SubmissionPage.js
new file mode 100644
index 0000000000000000000000000000000000000000..f84b2bcc193f44711f89fb6b879cc7e2b74862b9
--- /dev/null
+++ b/app/components/submission/SubmissionPage.js
@@ -0,0 +1,20 @@
+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
diff --git a/app/routes.js b/app/routes.js
index ae0c3fab4bca8d9d5430cd29bbffc1303491c7a8..0218bd928532cfc6a9f17890baa0d0f0fbf8f63b 100644
--- a/app/routes.js
+++ b/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>