File picker component

package.json

@@ -48,14 +48,15 @@
     "@babel/polyfill": "^7.4.4",
     "@babel/preset-env": "^7.2.3",
     "@babel/preset-react": "^7.0.0",
+    "@testing-library/react": "^9.1.1",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^23.6.0",
     "babel-loader": "^8.0.5",
     "css-loader": "^2.1.0",
     "cypress": "^3.1.4",
-    "enzyme": "^3.8.0",
-    "enzyme-adapter-react-16": "^1.7.1",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.14.0",
     "eslint": "^4.3.0",
     "eslint-config-mavenlint-react": "^2.0.0",
     "eslint-plugin-cypress": "^2.2.0",
@@ -64,19 +65,20 @@
     "jest": "^23.6.0",
     "postcss-loader": "^3.0.0",
     "postcss-preset-env": "^6.5.0",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
     "react-ga": "^2.5.6",
-    "react-styleguidist": "^8.0.6",
+    "react-styleguidist": "9.0.4",
+    "react-test-renderer": "^16.9.0",
     "react-transition-group": "^2.5.3",
     "style-loader": "^0.23.1",
-    "svg-sprite-loader": "^3.8.0",
-    "svgo": "^1.3,0",
-    "svgo-loader": "^2.1.0",
     "stylelint": "^10.1.0",
     "stylelint-config-css-modules": "^1.4.0",
     "stylelint-config-standard": "^18.3.0",
     "stylelint-css-modules": "^0.9.0",
+    "svg-sprite-loader": "^3.8.0",
+    "svgo": "^1.3,0",
+    "svgo-loader": "^2.1.0",
     "url-loader": "^1.1.2",
     "wait-on": "^3.2.0",
     "webpack": "^4.28.3"

src/components/file-picker/file-picker.css

@@ -0,0 +1,94 @@
+@import "../../styles/colors.css";
+@import "../../styles/spacing.css";
+@import "../../styles/typography.css";
+
+.title,
+.label,
+.filename,
+.remove {
+  font-family: var(--mavenlink-type-font-family);
+}
+
+.dropzone {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  text-align: center;
+  background: var(--palette-neutral-x-light);
+  min-height: 100px;
+  vertical-align: middle;
+  border: 2px dashed var(--palette-grey-light);
+}
+
+.title,
+.label {
+  display: block;
+  margin: 0 0 var(--spacing-small);
+  color: var(--palette-grey-dark);
+  cursor: pointer;
+}
+
+.filename,
+.label {
+  font-size: var(--mavenlink-type-base-size);
+}
+
+.label {
+  flex: 1;
+  line-height: 100px;
+}
+
+.title {
+  font-size: var(--mavenlink-type-small-size);
+}
+
+.file {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  border: 0;
+  padding: 0;
+  clip: rect(0 0 0 0);
+  overflow: hidden;
+}
+
+.file:focus + .label {
+  outline: 1px dotted var(--palette-grey-dark);
+  outline: -webkit-focus-ring-color auto 5px;
+}
+
+.file-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.file-list-button {
+  display: flex;
+  flex-direction: row;
+  border-bottom: 1px solid var(--palette-grey-light);
+  line-height: var(--spacing-x-large);
+}
+
+.icon {
+  color: green;
+  flex: 0 0 50px;
+}
+
+.filename {
+  flex-grow: 1;
+  text-align: left;
+  color: var(--palette-grey-x-dark);
+}
+
+.remove {
+  flex: 0 0 50px;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  font-weight: bold;
+  color: var(--palette-grey-base);
+  text-align: center;
+  font-size: 18px;
+}

src/components/file-picker/file-picker.jsx

@@ -0,0 +1,105 @@
+import PropTypes from 'prop-types';
+import React, { useState, useRef } from 'react';
+import styles from './file-picker.css';
+
+// TODOs
+//
+// What file types will we support?
+// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers
+//
+// How do we want to handle disabling as file(s) is uploading?
+//
+// Do we want to allow overriding of: onFilesChanged and onRemoveFile
+// Or, do we want to have onBeforeFilesChanged, onAfterFilesChanged?
+//
+// v2 supports drag n drop?
+// https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications#Selecting_files_using_drag_and_drop
+//
+const FilePicker = (props) => {
+  const {
+    dropzoneClasses,
+    labelClasses,
+    fileClasses,
+    fileListClasses,
+    id,
+    title,
+    onBeforeFileRemoved,
+    ...rest
+  } = props;
+
+  const [files, setFiles] = useState([]);
+  // const [uploading, setUploading] = useState(false);
+  const inputFile = useRef(null);
+
+  const onFilesChanged = (e) => {
+    const selectedFiles = e.currentTarget.files;
+    // User may have clicked 'Cancel' on the native file dialog
+    if (selectedFiles.length) {
+      const currentFiles = [];
+      Array.from(selectedFiles).map(file => currentFiles.push(file));
+      setFiles(currentFiles);
+    }
+  };
+
+  const onRemoveFile = (e, file) => {
+    e.preventDefault();
+    if (props.onBeforeFileRemoved) {
+      props.onBeforeFileRemoved.call(this, file);
+    }
+    const currentFiles = files.filter(f => f.name !== file.name);
+    setFiles(currentFiles);
+  };
+
+  const getFilesList = () => {
+    if (files.length) {
+      return files.map((file) => {
+        return (
+          <section className={styles['file-list-button']} key={file.name}>
+            <span className={styles.icon}>ICON</span>
+            <span className={styles.filename}>{file.name}</span>
+            <button onClick={e => onRemoveFile(e, file)} className={styles.remove}>&times;</button>
+          </section>
+        );
+      });
+    }
+    return '';
+  };
+
+  return (
+    <React.Fragment>
+      <span className={styles.title}>{props.title}</span>
+      <section className={props.fileListClasses}>
+        {getFilesList()}
+      </section>
+      <section className={props.dropzoneClasses}>
+        <label htmlFor={props.id} className={props.labelClasses}>Upload Files
+          <input onChange={e => onFilesChanged(e)} type="file" id={props.id} className={props.fileClasses} ref={inputFile} {...rest} />
+        </label>
+      </section>
+    </React.Fragment>
+  );
+};
+
+FilePicker.propTypes = {
+  dropzoneClasses: PropTypes.string,
+  labelClasses: PropTypes.string,
+  fileClasses: PropTypes.string,
+  fileListClasses: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  multiple: PropTypes.string,
+  onBeforeFileRemoved: PropTypes.func,
+};
+
+FilePicker.defaultProps = {
+  dropzoneClasses: styles.dropzone,
+  labelClasses: styles.label,
+  fileClasses: styles.file,
+  fileListClasses: styles['file-list'],
+  id: undefined,
+  title: undefined,
+  multiple: undefined,
+  onBeforeFileRemoved: undefined,
+};
+
+export default FilePicker;

src/components/file-picker/file-picker.md

@@ -0,0 +1,10 @@
+Default usage
+
+```jsx
+<FilePicker id="le-picker-single" title="Attach Files" />
+```
+Multiple
+
+```jsx
+<FilePicker id="le-picker-multi" title="Attach Multiple Files" multiple='multiple' />
+```

src/components/file-picker/file-picker.test.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { render, fireEvent, cleanup } from '@testing-library/react';
+import renderer from 'react-test-renderer';
+import FilePicker from './file-picker';
+
+describe('FilePicker', () => {
+  describe('API', () => {
+    it('title', function () {
+      const expected = 'Attach Le Files';
+      const { getByText } = render(<FilePicker id="123" title={ expected } />);
+      expect(getByText(expected).textContent).toContain(expected);
+    });
+
+    it('multiple', function () {
+      const testRenderer = renderer.create(
+        <FilePicker multiple='multiple' id="123" title='yo' />
+      );
+      const testInstance = testRenderer.root;
+      expect(testInstance.findByType('input').props.multiple).toBe('multiple');
+    });
+  });
+});

src/components/file-picker/index.js

@@ -0,0 +1,3 @@
+import FilePicker from './file-picker';
+
+export default FilePicker;

src/styles/typography.css

@@ -8,9 +8,10 @@
   --mavenlink-type-font-weight: 400;
   --mavenlink-type-font-color: var(--palette-neutral-x-dark);
   --mavenlink-type-font-style: normal;
-  --mavenlink-type-base-size: 16px;
-  --mavenlink-type-button-font-size: 14px;
   --mavenlink-type-body-font-size: 12px;
+  --mavenlink-type-base-size: 14px;
+  --mavenlink-type-small-size: 12px;
+  --mavenlink-type-button-font-size: var(--mavenlink-type-base-size);
   --mavenlink-type-text-rendering: optimizeLegibility;
   --mavenlink-type-line-height: 1.5;
   --mavenlink-type-header-line-height: 1.2;