Add validots

packages/component-submit/src/components/Submit.js

@@ -8,6 +8,7 @@ import Suggestions from './Suggestions'
 import Notes from './Notes'
 import SupplementaryFiles from './SupplementaryFiles'
 import Confirm from './Confirm'
+import Validots from './Validots'
 
 const Submit = ({ journal, project, version, valid, pristine, submitting, handleSubmit, uploadFile }) => (
   <div className={classes.root}>
@@ -35,6 +36,13 @@ const Submit = ({ journal, project, version, valid, pristine, submitting, handle
     </form>
 
     <Confirm project={project} version={version}/>
+
+    <div className={classes.validots}>
+      <Validots
+        journal={journal}
+        valid={valid}
+        handleSubmit={handleSubmit}/>
+    </div>
   </div>
 )
 

packages/component-submit/src/components/Submit.local.css

@@ -7,3 +7,10 @@
   font-size: 150%;
   font-weight: bold;
 }
+
+.validots {
+  position: fixed;
+  top: 50px;
+  right: 10px;
+  bottom: 50px;
+}

packages/component-submit/src/components/Validot.js

+import React from 'react'
+import classnames from 'classnames'
+import classes from './Validot.local.css'
+
+// TODO: use the parent validots node instead of document
+// TODO: highlight the scrolled-to element
+const scrollIntoView = id => document.getElementById(id).scrollIntoView()
+
+const Validot = ({ input, meta }) => (
+  <svg
+    className={classnames(classes.root, {
+      [classes.valid]: meta.valid,
+      [classes.error]: meta.error,
+      [classes.warning]: meta.warning,
+    })}
+    onClick={() => scrollIntoView(input.name)}
+    viewBox="0 0 40 40">
+    <circle cx="20" cy="20" r="20"/>
+  </svg>
+)
+
+export default Validot

packages/component-submit/src/components/Validot.local.css

+.root {
+  display: block;
+  width: 25px;
+  height: 25px;
+  margin: 5px 10px;
+  cursor: pointer;
+  border: 3px solid transparent;
+  border-radius: 100%;
+}
+
+.root:hover {
+  border-color: black;
+}
+
+.valid {
+  fill: lightgreen;
+}
+
+.warning {
+  fill: orange;
+}
+
+.error {
+  fill: red;
+}

packages/component-submit/src/components/Validot.md

+A dot representing the validation state of a form field.
+
+```js
+<Validot meta={{ valid: false, error: 'There was an error' }}/>
+```
+
+```js
+<Validot meta={{ valid: true, warning: 'There was a warning' }}/>
+```
+
+```js
+<Validot meta={{ valid: true }}/>
+```

packages/component-submit/src/components/Validots.js

+import React from 'react'
+import { Field, FormSection } from 'redux-form'
+import Validot from './Validot'
+
+// TODO: build sections and fields from configuration
+
+const Validots = ({ journal, valid, handleSubmit }) => (
+  <div>
+    <FormSection name="metadata">
+      <Field name="title" component={Validot}/>
+      <Field name="abstract" component={Validot}/>
+      <Field name="authors" component={Validot}/>
+      <Field name="keywords" component={Validot}/>
+    </FormSection>
+
+    <FormSection name="declarations">
+      {journal.declarations.questions.map(question => (
+        <Field name={question.id} component={Validot}/>
+      ))}
+    </FormSection>
+
+    <FormSection name="suggestions">
+      <FormSection name="reviewers">
+        <Field name="suggested" component={Validot}/>
+        <Field name="opposed" component={Validot}/>
+      </FormSection>
+      <FormSection name="editors">
+        <Field name="suggested" component={Validot}/>
+        <Field name="opposed" component={Validot}/>
+      </FormSection>
+    </FormSection>
+
+    <FormSection name="notes">
+      <Field name="fundingAcknowledgement" component={Validot}/>
+      <Field name="specialInstructions" component={Validot}/>
+    </FormSection>
+
+    <FormSection name="files">
+      <Field name="supplementary" component={Validot}/>
+    </FormSection>
+
+    <button
+      onClick={handleSubmit}
+      disabled={!valid}>Submit</button>
+  </div>
+)
+
+export default Validots

packages/component-submit/src/components/Validots.md

+A chain of dots representing the validation state of form elements.
+
+```js
+const { reduxForm } = require('redux-form');
+
+const project = {
+  id: faker.random.uuid(),
+};
+
+const version = {
+  id: faker.random.uuid(),
+  metadata: {
+      title: faker.lorem.sentence(25),
+      abstract: faker.lorem.sentence(50),
+      articleType: 'original-research'
+  },
+  declarations: {
+    openData: 'yes'
+  }
+};
+
+const journal = {
+  articleTypes: [
+    {
+      value: 'original-research',
+      label: 'Original Research Report'
+    },
+    {
+      value: 'review',
+      label: 'Review'
+    },
+    {
+      value: 'opinion',
+      label: 'Opinion/Commentary'
+    },
+    {
+      value: 'registered-report',
+      label: 'Registered Report'
+    },
+  ],
+  articleSections: [
+    {
+      value: 'organizational-behavior',
+      label: 'Organizational Behavior'
+    },
+    {
+      value: 'methodology',
+      label: 'Methodology and Research Practice'
+    },
+  ],
+  declarations: {
+    questions: [
+      {
+        id: 'openData',
+        legend: 'Data is open'
+      },
+      {
+        id: 'previouslySubmitted',
+        legend: 'Previously submitted'
+      },
+      {
+        id: 'openPeerReview',
+        legend: 'Open peer review'
+      }
+    ]
+  },
+  suggestions: {
+    reviewers: {
+      opposed: [
+        { name: faker.name.findName() }
+      ]
+    }
+  }
+};
+
+const SubmitForm = reduxForm({ 
+  form: 'submit',
+  onSubmit: values => console.log(values),
+  onChange: values => console.log(values)
+})(Submit);
+
+const ValidotsForm = reduxForm({ 
+  form: 'submit',
+  onSubmit: values => console.log(values)
+})(Validots);
+
+<div style={{position:'relative'}}>
+   <div style={{paddingRight: 100}}>
+        <SubmitForm 
+          project={project}
+          version={version}
+          initialValues={version} 
+          journal={journal}/>
+    </div>
+    
+    <div style={{position: 'absolute', top: 10, right: 10, bottom: 10 }}>
+        <ValidotsForm 
+          journal={journal}/>
+      </div>
+</div>
+```