feat(ui): convert Files to a styled component

packages/ui/src/molecules/Files.js

 import React from 'react'
-import classes from './Files.local.scss'
+import styled from 'styled-components'
 import Upload from './Upload'
 
+const Root = styled.div``
+const Uploader = styled.div``
+
+const FileList = styled.div`
+  display: flex;
+  flex-direction: column;
+  font-size: 0.9em;
+  font-style: italic;
+  line-height: 1.5;
+`
+
+const AttachButton = styled.button.attrs({
+  type: 'button',
+})`
+  background: transparent;
+  border: 1px dashed grey;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: inherit;
+  margin-bottom: 2em;
+  padding: 10px;
+`
+
+/* Not used for now
+.button {
+  background: transparent;
+  border: 1px dashed grey;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: inherit;
+  margin-bottom: 2em;
+  padding: 10px;
+}
+
+.button:hover {
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+}
+*/
+
 class Files extends React.Component {
   constructor(props) {
     super(props)
@@ -49,27 +89,23 @@ class Files extends React.Component {
     const { values, uploads } = this.state
 
     return (
-      <div className={classes.root}>
-        <div className={classes.upload}>
-          <button
-            className={classes.attach}
-            onClick={() => this.fileInput.click()}
-            type="button"
-          >
+      <Root>
+        <Uploader>
+          <AttachButton onClick={() => this.fileInput.click()}>
             {buttonText}
-          </button>
+          </AttachButton>
 
           <input
-            className={classes.input}
             multiple
             name={name}
             onChange={this.handleChange}
             ref={input => (this.fileInput = input)}
+            style={{ display: 'none' }}
             type="file"
           />
-        </div>
+        </Uploader>
 
-        <div className={classes.files}>
+        <FileList>
           {uploads &&
             uploads.map(upload => (
               <Upload
@@ -82,8 +118,8 @@ class Files extends React.Component {
             ))}
 
           {values && values.map(uploadedFile)}
-        </div>
-      </div>
+        </FileList>
+      </Root>
     )
   }
 }

packages/ui/src/molecules/Files.local.scss

-.input {
-  display: none;
-}
-
-.button {
-  background: transparent;
-  border: 1px dashed grey;
-  cursor: pointer;
-  font-family: inherit;
-  font-size: inherit;
-  margin-bottom: 2em;
-  padding: 10px;
-}
-
-.button:hover {
-  border-color: var(--color-primary);
-  color: var(--color-primary);
-}
-
-.files {
-  display: flex;
-  flex-direction: column;
-  font-size: 0.9em;
-  font-style: italic;
-  line-height: 1.5;
-}
-
-.attach {
-  background: transparent;
-  border: 1px dashed grey;
-  cursor: pointer;
-  font-family: inherit;
-  font-size: inherit;
-  margin-bottom: 2em;
-  padding: 10px;
-}

packages/ui/test/Files.test.js

+import React from 'react'
+import renderer from 'react-test-renderer'
+import 'jest-styled-components'
+
+import Files from '../src/molecules/Files'
+
+const value = [
+  {
+    name: 'IMG_4346.JPG',
+    type: 'JPG',
+    size: 4346,
+  },
+]
+
+describe('Files', () => {
+  it('renders correctly', () => {
+    const tree = renderer.create(
+      <Files
+        buttonText="↑ Choose a file to upload"
+        uploadedFile={value => <div key={value.name}>{value.name}</div>}
+        uploadFile={file => new XMLHttpRequest()}
+        uploadingFile={({ file, progress, error }) => (
+          <div style={{ color: 'gray' }}>{file.name}</div>
+        )}
+        value={value}
+      />,
+    )
+    expect(tree).toMatchSnapshot()
+  })
+})

packages/ui/test/__snapshots__/Files.test.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Files renders correctly 1`] = `
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  font-size: 0.9em;
+  font-style: italic;
+  line-height: 1.5;
+}
+
+.c0 {
+  background: transparent;
+  border: 1px dashed grey;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: inherit;
+  margin-bottom: 2em;
+  padding: 10px;
+}
+
+<div
+  className=""
+>
+  <div
+    className=""
+  >
+    <button
+      className="c0"
+      onClick={[Function]}
+      type="button"
+    >
+      ↑ Choose a file to upload
+    </button>
+    <input
+      multiple={true}
+      name={undefined}
+      onChange={[Function]}
+      style={
+        Object {
+          "display": "none",
+        }
+      }
+      type="file"
+    />
+  </div>
+  <div
+    className="c1"
+  >
+    <div>
+      IMG_4346.JPG
+    </div>
+  </div>
+</div>
+`;