Improve validots styleguide

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

@@ -9,8 +9,7 @@
 }
 
 .validots {
-  position: fixed;
+  position: absolute;
   top: 50px;
   right: 10px;
-  bottom: 50px;
 }

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

@@ -78,9 +78,11 @@ const SubmitForm = reduxForm({
   onChange: values => console.log(values)
 })(Submit);
 
-<SubmitForm 
-  project={project}
-  version={version}
-  initialValues={version} 
-  journal={journal}/>
+<div style={{position:'relative', paddingRight: 100}}>
+    <SubmitForm 
+      project={project}
+      version={version}
+      initialValues={version} 
+      journal={journal}/>
+</div>
 ```

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

@@ -4,11 +4,10 @@ import { map } from 'lodash'
 import Validot from './Validot'
 import { connect } from 'react-redux'
 
-// TODO: build sections and fields from configuration
 // TODO: is the order of map(form.registeredFields) guaranteed to be the same?
 // TODO: use journal config instead of form.registeredFields once using it to build the form
 
-const Validots = ({ form, journal, valid, handleSubmit }) => (
+export const Validots = ({ form, journal, valid, handleSubmit }) => (
   <div>
     {form.registeredFields && (
       map(form.registeredFields, field => (

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>
-```