feat(SubmitRevision): Styleguide for DetailsAndAuthors and ManuscriptFiles

packages/component-faraday-ui/src/submissionRevision/DetailsAndAuthors.js

@@ -14,6 +14,7 @@ import {
 import { Menu, TextField, ValidatedField } from '@pubsweet/ui'
 import { th } from '@pubsweet/ui-toolkit'
 import styled from 'styled-components'
+import { ContextualBox } from '../'
 
 const Empty = () => <div />
 
@@ -30,62 +31,65 @@ const DetailsAndAuthors = ({
   manuscriptTypes,
   getTooltipContent,
   isAuthorsFetching,
-  setAuthorEditIndex,
+  onAuthorEdit,
+  fragment,
   ...rest
 }) => (
-  <Root>
-    <Row mb={3}>
-      <Item data-test-id="submission-title" flex={3} mr={1} vertical>
-        <Label required>MANUSCRIPT TITLE</Label>
-        <ValidatedField
-          component={TextField}
-          name="metadata.title"
-          validate={[required]}
-        />
-      </Item>
-      <ItemOverrideAlert data-test-id="submission-type" vertical>
-        <Label required>MANUSCRIPT TYPE</Label>
-        <ValidatedField
-          component={input => (
-            <Menu
-              options={manuscriptTypes}
-              {...input}
-              placeholder="Please select"
-            />
-          )}
-          name="metadata.type"
-          validate={[required]}
-        />
-      </ItemOverrideAlert>
-    </Row>
+  <ContextualBox label="Details and Authors" transparent>
+    <Root>
+      <Row mb={3}>
+        <Item data-test-id="submission-title" flex={3} mr={1} vertical>
+          <Label required>MANUSCRIPT TITLE</Label>
+          <ValidatedField
+            component={TextField}
+            name="metadata.title"
+            validate={[required]}
+          />
+        </Item>
+        <ItemOverrideAlert data-test-id="submission-type" vertical>
+          <Label required>MANUSCRIPT TYPE</Label>
+          <ValidatedField
+            component={input => (
+              <Menu
+                options={manuscriptTypes}
+                {...input}
+                placeholder="Please select"
+              />
+            )}
+            name="metadata.type"
+            validate={[required]}
+          />
+        </ItemOverrideAlert>
+      </Row>
 
-    <RowOverrideAlert mb={2}>
-      <Item data-test-id="submission-abstract" vertical>
-        <Label required>ABSTRACT</Label>
-        <ValidatedField
-          component={Textarea}
-          minHeight={15}
-          name="metadata.abstract"
-          validate={[required]}
-        />
-      </Item>
-    </RowOverrideAlert>
+      <RowOverrideAlert mb={2}>
+        <Item data-test-id="submission-abstract" vertical>
+          <Label required>ABSTRACT</Label>
+          <ValidatedField
+            component={Textarea}
+            minHeight={15}
+            name="metadata.abstract"
+            validate={[required]}
+          />
+        </Item>
+      </RowOverrideAlert>
 
-    <Field component={Empty} name="authors" />
-    <WizardAuthors
-      addAuthor={addAuthor}
-      authors={get(version, 'authors', [])}
-      changeForm={changeForm}
-      deleteAuthor={deleteAuthor}
-      error={authorsError}
-      isAuthorEdit={isAuthorEdit}
-      isAuthorsFetching={isAuthorsFetching}
-      journal={journal}
-      onAuthorEdit={setAuthorEditIndex}
-      project={project}
-      version={version}
-    />
-  </Root>
+      <Field component={Empty} name="authors" />
+      <WizardAuthors
+        addAuthor={addAuthor}
+        authors={get(fragment, 'authors', [])}
+        changeForm={changeForm}
+        deleteAuthor={deleteAuthor}
+        error={authorsError}
+        isAuthorEdit={isAuthorEdit}
+        isAuthorsFetching={isAuthorsFetching}
+        journal={journal}
+        onAuthorEdit={onAuthorEdit}
+        project={project}
+        version={version}
+      />
+    </Root>
+  </ContextualBox>
 )
 
 const Root = styled.div`

packages/component-faraday-ui/src/submissionRevision/DetailsAndAuthors.md

 ```js
-const { compose, withProps } = require('recompose')
+const { compose, withProps, withHandlers } = require('recompose')
 const { connect } = require('react-redux')
-const { reduxForm, getFormValues } = require('redux-form')
+const { reduxForm, getFormValues, change } = require('redux-form')
 
 const Wrapper = compose(
+  withHandlers({
+    onAuthorEdit: props => () => console.log('Edit author')
+  }),
   withProps({
     manuscriptTypes: [
     {
@@ -149,12 +152,15 @@ const Wrapper = compose(
   }),
   connect(state => ({
     formValues: getFormValues('styleguide')(state),
-  })),
+  }),
+  {
+    changeForm: change
+  }),
   reduxForm({
     form: 'styleguide',
   }),
-)(({ formValues }) => (
-  <DetailsAndAuthors />
+)(( props ) => (
+  <DetailsAndAuthors {...props}/>
 ))
 ;<Wrapper />
 ```

packages/component-faraday-ui/src/submissionRevision/ManuscriptFiles.js

+import React from 'react'
+import { get } from 'lodash'
+import { Field } from 'redux-form'
+import styled from 'styled-components'
+import { Icon } from '@pubsweet/ui'
+import { Row, Text, WizardFiles } from 'pubsweet-component-faraday-ui'
+import { th } from '@pubsweet/ui-toolkit'
+import { ContextualBox } from '../'
+
+const Empty = () => <div />
+
+const ManuscriptFiles = ({
+  token,
+  version,
+  project,
+  changeForm,
+  deleteFile,
+  uploadFile,
+  filesError,
+  getSignedUrl,
+}) => (
+  <ContextualBox label="Manuscript Files" transparent>
+    <Root>
+      <Row justify="flex-start" mb={2}>
+        <Text secondary>
+          Drag & drop files in the specific section or click{' '}
+          <CustomIcon secondary size={2}>
+            plus
+          </CustomIcon>{' '}
+          to upload. Use the{' '}
+          <CustomIcon secondary size={2}>
+            menu
+          </CustomIcon>{' '}
+          icon to reorder or move files to a different type.
+        </Text>
+      </Row>
+      <Field component={Empty} name="files" />
+      <WizardFiles
+        changeForm={changeForm}
+        deleteFile={deleteFile}
+        files={get(version, 'files', {})}
+        getSignedUrl={getSignedUrl}
+        project={project}
+        token={token}
+        uploadFile={uploadFile}
+        version={version}
+      />
+      {filesError && (
+        <Row justify="flex-start" mt={1}>
+          <Text error>{filesError}</Text>
+        </Row>
+      )}
+    </Root>
+  </ContextualBox>
+)
+
+export default ManuscriptFiles
+
+// #region styled-components
+const Root = styled.div`
+  border-left: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
+  padding-left: calc(${th('gridUnit')} * 1);
+`
+
+const CustomIcon = styled(Icon)`
+  vertical-align: sub;
+`
+// #endregion

packages/component-faraday-ui/src/submissionRevision/ManuscriptFiles.md

+```js
+const { compose, withHandlers } = require('recompose')
+const { connect } = require('react-redux')
+const { reduxForm, getFormValues } = require('redux-form')
+
+const Wrapper = compose(
+  withHandlers({
+    uploadFile: props => file => Promise.resolve(file),
+    deleteFile: props => file => console.log('Deleted', file),
+  }),
+  connect(state => ({
+    formValues: getFormValues('styleguide')(state),
+  })),
+  reduxForm({
+    form: 'styleguide',
+  }),
+)(( props ) => (
+  <ManuscriptFiles {...props} />
+))
+;<Wrapper />
+```
\ No newline at end of file

packages/component-faraday-ui/src/submissionRevision/index.js

 export { default as ResponseToReviewer } from './ResponseToReviewer'
+export { default as ManuscriptFiles } from './ManuscripFiles'
 export { default as DetailsAndAuthors } from './DetailsAndAuthors'