FileUploader, FileCard components

[brandongregoryscott]

Overview

This PR introduces two new components for uploading and displaying files.

• FileCard
  • Styled Card component for displaying basic information about a file (name, description/size, placeholder icon or image src) and a button for removal
• FileUploader
  • Styled card with drag & drop functionality, or standard 'click-to-browse' via the native file browser. Includes size, type and count validation and callbacks for each 'event' (onChange, onAccepted and onRejected) that fire when files are dropped or selected

Additionally, there's some constants + utility functions that might be helpful for consumers that have been added. I increased the bundle size by ~13 KB to accommodate the additional lodash and humanize-plus functions that we're pulling in.

Tests and types are in a separate branch that will be in a follow-up PR. The documentation page will also be in a separate branch,

Screenshots (if applicable)

• FileUploader

  • The label is included in the component (rendered via the <FormField /> component)

    Hover state:

    

    Focus state:

    

    Invalid state:

    

• FileCard

  • The label is not included in the component, just for reference

Documentation

• [-] Updated Typescript types and/or component PropTypes
• [-] Added / modified component docs
• [x] Added / modified Storybook stories

[netlify[bot]]

✔️ Deploy Preview for evergreen-storybook ready!

🔨 Explore the source changes: c0310abb9b2d3cd9189f8503c85dd731a61dfed1

🔍 Inspect the deploy log: https://app.netlify.com/sites/evergreen-storybook/deploys/621e495dbc2e08000710aaa9

😎 Browse the preview: https://deploy-preview-1415--evergreen-storybook.netlify.app