refactor(manuscript-files): extract one file section into a separate component

packages/component-faraday-ui/src/manuscriptDetails/ManuscriptFileList.js

 import React, { Fragment } from 'react'
-import { Text, FileItem, Item, Row } from 'pubsweet-component-faraday-ui'
+import { ManuscriptFileSection } from 'pubsweet-component-faraday-ui'
 
 import { withFilePreview, withFileDownload } from '../helpers'
 
@@ -10,84 +10,27 @@ const ManuscriptFileList = ({
   ...rest
 }) => (
   <Fragment>
-    {!!manuscripts.length && (
-      <Fragment>
-        <Text labelLine mb={1} mt={1}>
-          MAIN MANUSCRIPT
-        </Text>
-        <Row justify="flex-start" mb={1}>
-          {manuscripts.map(file => (
-            <Item
-              alignItems="flex-start"
-              flex={0}
-              key={file.id}
-              mr={1}
-              vertical
-            >
-              <FileItem
-                item={file}
-                onDownload={downloadFile}
-                onPreview={previewFile}
-                {...rest}
-                mb={1}
-              />
-            </Item>
-          ))}
-        </Row>
-      </Fragment>
-    )}
-    {!!supplementary.length && (
-      <Fragment>
-        <Text labelLine mb={1} mt={2}>
-          SUPPLEMENTARY FILES
-        </Text>
-        <Row justify="flex-start" mb={1}>
-          {supplementary.map(file => (
-            <Item
-              alignItems="flex-start"
-              flex={0}
-              key={file.id}
-              mr={1}
-              vertical
-            >
-              <FileItem
-                item={file}
-                onDownload={downloadFile}
-                onPreview={previewFile}
-                {...rest}
-                mb={1}
-              />
-            </Item>
-          ))}
-        </Row>
-      </Fragment>
-    )}
-    {!!coverLetter.length && (
-      <Fragment>
-        <Text labelLine mb={1} mt={2}>
-          COVER LETTER
-        </Text>
-        <Row justify="flex-start" mb={1}>
-          {coverLetter.map(file => (
-            <Item
-              alignItems="flex-start"
-              flex={0}
-              key={file.id}
-              mr={1}
-              vertical
-            >
-              <FileItem
-                item={file}
-                onDownload={downloadFile}
-                onPreview={previewFile}
-                {...rest}
-                mb={1}
-              />
-            </Item>
-          ))}
-        </Row>
-      </Fragment>
-    )}
+    <ManuscriptFileSection
+      label="MAIN MANUSCRIPT"
+      list={manuscripts}
+      onDownload={downloadFile}
+      onPreview={previewFile}
+      {...rest}
+    />
+    <ManuscriptFileSection
+      label="SUPPLEMENTARY FILES"
+      list={supplementary}
+      onDownload={downloadFile}
+      onPreview={previewFile}
+      {...rest}
+    />
+    <ManuscriptFileSection
+      label="COVER LETTER"
+      list={coverLetter}
+      onDownload={downloadFile}
+      onPreview={previewFile}
+      {...rest}
+    />
   </Fragment>
 )
 

packages/component-faraday-ui/src/manuscriptDetails/ManuscriptFileSection.js

+import React, { Fragment } from 'react'
+import { Text, FileItem, Item, Row } from 'pubsweet-component-faraday-ui'
+
+const ManuscriptFileSection = ({ list = [], label = '', ...rest }) => (
+  <Fragment>
+    {!!list.length && (
+      <Fragment>
+        <Text labelLine mb={1} mt={1}>
+          {label}
+        </Text>
+        <Row justify="flex-start" mb={1}>
+          {list.map(file => (
+            <Item
+              alignItems="flex-start"
+              flex={0}
+              key={file.id}
+              mr={1}
+              vertical
+            >
+              <FileItem item={file} {...rest} mb={1} />
+            </Item>
+          ))}
+        </Row>
+      </Fragment>
+    )}
+  </Fragment>
+)
+
+export default ManuscriptFileSection

packages/component-faraday-ui/src/manuscriptDetails/ManuscriptFileSection.md

+Manuscript file section that appears in ManuscriptFilesList
+
+```js
+const files = {
+  supplementary: [
+    {
+      id:
+        '8dca903a-05b9-45ab-89b9-9cb99a9a29c6/02db6c5e-2938-45ac-a5ee-67ae63919bb2',
+      name: 'Supplementary File 1.jpg',
+      size: 59621,
+      originalName: 'Supplementary File 1.jpg',
+    },
+    {
+      id:
+        '8dca903a-05b9-45ab-89b9-9cb99a9a29c6/5e69e3d9-7f9d-4e8d-b649-6e6a45658d75',
+      name: 'Supplementary File 2.docx',
+      size: 476862,
+      originalName: 'Supplementary File 2.docx',
+    },
+  ]
+}
+;<ManuscriptFileSection
+  list={files.supplementary}
+  label="Supplementary files"
+  onDownload={() => alert('downloading')}
+  onPreview={() => alert('No preview')}
+/>
+```

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

@@ -3,4 +3,5 @@ export { default as ManuscriptVersion } from './ManuscriptVersion'
 export { default as ManuscriptHeader } from './ManuscriptHeader'
 export { default as ManuscriptMetadata } from './ManuscriptMetadata'
 export { default as ManuscriptFileList } from './ManuscriptFileList'
+export { default as ManuscriptFileSection } from './ManuscriptFileSection'
 export { default as ManuscriptAssignHE } from './ManuscriptAssignHE'