From 310ba1146ad646d883d0d75467f60566c9464096 Mon Sep 17 00:00:00 2001
From: Alf Eaton <eaton.alf@gmail.com>
Date: Fri, 1 Sep 2017 09:43:59 +0100
Subject: [PATCH] Improve validots styleguide
---
.../src/components/Submit.local.css | 3 +-
.../component-submit/src/components/Submit.md | 12 ++-
.../src/components/Validots.js | 3 +-
.../src/components/Validots.md | 101 ------------------
4 files changed, 9 insertions(+), 110 deletions(-)
delete mode 100644 packages/component-submit/src/components/Validots.md
diff --git a/packages/component-submit/src/components/Submit.local.css b/packages/component-submit/src/components/Submit.local.css
index 6a75697e6..a200558eb 100644
--- a/packages/component-submit/src/components/Submit.local.css
+++ b/packages/component-submit/src/components/Submit.local.css
@@ -9,8 +9,7 @@
}
.validots {
- position: fixed;
+ position: absolute;
top: 50px;
right: 10px;
- bottom: 50px;
}
diff --git a/packages/component-submit/src/components/Submit.md b/packages/component-submit/src/components/Submit.md
index 46506c12d..d2683c3cd 100644
--- a/packages/component-submit/src/components/Submit.md
+++ b/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>
```
diff --git a/packages/component-submit/src/components/Validots.js b/packages/component-submit/src/components/Validots.js
index 446c8e87f..c7f6502b1 100644
--- a/packages/component-submit/src/components/Validots.js
+++ b/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 => (
diff --git a/packages/component-submit/src/components/Validots.md b/packages/component-submit/src/components/Validots.md
deleted file mode 100644
index a357fd444..000000000
--- a/packages/component-submit/src/components/Validots.md
+++ /dev/null
@@ -1,101 +0,0 @@
-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>
-```
--
GitLab