Add file attachments to review + decision forms

Refactor Files molecule to allow subclassing as Attachments and Supplementary.

src/atoms/Attachment.js

+import React from 'react'
+import Icon from './Icon'
+import classes from './Attachment.local.scss'
+
+const Attachment = ({ value }) => (
+  <a
+    key={value.url}
+    download={value.name}
+    href={value.url}
+    className={classes.attachment}>
+    <span className={classes.icon}>
+      <Icon color="cornflowerblue">paperclip</Icon>
+    </span>
+    <span className={classes.filename}>
+      {value.name}
+    </span>
+  </a>
+)
+
+export default Attachment

src/atoms/Attachment.local.scss

+.attachment {
+  display: flex;
+  align-items: center;
+  color: inherit;
+  text-decoration: none;
+}
+
+.icon {
+  margin-right: 10px;
+  display: inline-flex;
+}
+
+.filename {
+  font-family: var(--font-mono);
+}

src/atoms/Attachment.md

+A file attached to a note.
+
+```js
+const value = {
+    name: faker.system.commonFileName(),
+    url: faker.internet.url()
+};
+
+<Attachment value={value}/>
+```

src/atoms/File.js

@@ -3,7 +3,7 @@ import classes from './File.local.scss'
 
 const extension = ({ name }) => name.replace(/^.+\./, '')
 
-const File = ({ value, file, error, progress }) => (
+const File = ({ value }) => (
   <div className={classes.root}>
     <div className={classes.icon}>
       <div className={classes.extension}>

src/index.js

 /* atom */
+export { default as Attachment } from './atoms/Attachment'
 export { default as Button } from './atoms/Button'
 export { default as Checkbox } from './atoms/Checkbox'
 export { default as Icon } from './atoms/Icon'
@@ -10,7 +11,9 @@ export { default as ValidatedField } from './atoms/ValidatedField'
 
 /* molecules */
 export { default as AppBar } from './molecules/AppBar'
+export { default as Attachments } from './molecules/Attachments'
 export { default as CheckboxGroup } from './molecules/CheckboxGroup'
 export { default as Files } from './molecules/Files'
+export { default as Supplementary } from './molecules/Supplementary'
 export { default as RadioGroup } from './molecules/RadioGroup'
 export { default as YesOrNo } from './molecules/YesOrNo'

src/molecules/Attachments.js

+import React from 'react'
+import Files from './Files'
+import Attachment from '../atoms/Attachment'
+import classes from './Attachments.local.scss'
+import Icon from '../atoms/Icon'
+
+// TODO: show upload progress
+
+class Attachments extends React.Component {
+  render () {
+    return (
+      <Files
+        {...this.props}
+        buttonText="Attach file"
+        uploadingFile={({ file, progress, error }) => (
+          <div className={classes.uploading}>
+            <span className={classes.icon}>
+              <Icon color="cornflowerblue">paperclip</Icon>
+            </span>
+            <span className={classes.filename}>
+              {error ? error : 'Uploading…'}
+            </span>
+          </div>
+        )}
+        uploadedFile={value => (
+          <Attachment
+            key={value.url}
+            value={value}/>
+        )}
+      />
+    )
+  }
+}
+
+export default Attachments

src/molecules/Attachments.local.scss

+.uploading {
+  display: flex;
+  align-items: center;
+}
+
+.icon {
+  color: gray;
+  margin-right: 10px;
+}
+
+.filename {
+  color: gray;
+}

src/molecules/Attachments.md

+A list of files attached to a note, and a button to attach a new file.
+
+```js
+const value = [
+  {
+    name: faker.system.commonFileName(),
+    url: faker.internet.url()
+  },
+  {
+    name: faker.system.commonFileName(),
+    url: faker.internet.url()
+  }
+];
+
+<Attachments 
+  value={value}
+  uploadFile={file => new XMLHttpRequest()}/>
+```

src/molecules/Files.js

 import React from 'react'
 import classes from './Files.local.scss'
 import Upload from './Upload'
-import File from '../atoms/File'
 
 class Files extends React.Component {
   constructor (props) {
@@ -46,7 +45,7 @@ class Files extends React.Component {
   }
 
   render () {
-    const { name } = this.props
+    const { name, buttonText, uploadingFile, uploadedFile } = this.props
     const { values, uploads } = this.state
 
     return (
@@ -56,7 +55,7 @@ class Files extends React.Component {
             type="button"
             className={classes.button}
             onClick={() => this.fileInput.click()}>
-            ▲ Upload files
+            {buttonText}
           </button>
 
           <input
@@ -74,14 +73,12 @@ class Files extends React.Component {
               key={upload.file.name}
               file={upload.file}
               request={upload.request}
-              handleUploadedFile={this.handleUploadedFile}/>
+              handleUploadedFile={this.handleUploadedFile}
+              render={uploadingFile}
+            />
           ))}
 
-          {values && values.map(value => (
-            <File
-              key={value.name}
-              value={value}/>
-          ))}
+          {values && values.map(uploadedFile)}
         </div>
       </div>
     )

src/molecules/Files.md

@@ -15,5 +15,8 @@ const value = [
 
 <Files
   value={value}
+  buttonText="Choose a file to upload"
+  uploadingFile={({ file, progress, error }) => <div style={{color:'gray'}}>{file.name}</div>}
+  uploadedFile={value => <div>{value.name}</div>}
   uploadFile={file => new XMLHttpRequest()}/>
 ```

src/molecules/Supplementary.js

+import React from 'react'
+import Files from './Files'
+import UploadingFile from '../atoms/UploadingFile'
+import File from '../atoms/File'
+
+class Supplementary extends React.Component {
+  render () {
+    return (
+      <Files
+        {...this.props}
+        buttonText="▲ Upload files"
+        uploadingFile={({ file, progress, error }) => (
+          <UploadingFile
+            key={file.name}
+            file={file}
+            progress={progress}
+            error={error}/>
+        )}
+        uploadedFile={value => (
+          <File
+            key={value.url}
+            value={value}/>
+        )}/>
+    )
+  }
+}
+
+export default Supplementary

src/molecules/Supplementary.md

+A list of supplementary files, and a button to upload a new file.
+
+```js
+const value = [
+  {
+    name: faker.system.commonFileName(),
+    url: faker.internet.url()
+  },
+  {
+    name: faker.system.commonFileName(),
+    url: faker.internet.url()
+  }
+];
+
+<Supplementary 
+  value={value}
+  uploadFile={file => new XMLHttpRequest()}/>
+```

src/molecules/Upload.js

 import React from 'react'
-import UploadingFile from '../atoms/UploadingFile'
 
 // TODO: retry on error
 // TODO: make this a HOC for <UploadingFile>?
@@ -58,15 +57,10 @@ class Upload extends React.Component {
   }
 
   render () {
-    const { file } = this.props
+    const { file, render } = this.props
     const { progress, error } = this.state
 
-    return (
-      <UploadingFile
-        file={file}
-        progress={progress}
-        error={error}/>
-    )
+    return render({ file, progress, error })
   }
 }