UploadField component for Pattern Library with visual changes

[chillu]

Acceptance Criteria

• As a frontend dev and UX designer, I can use the pattern library as a complete reference for visual and behaviour variations of UploadField
• The visual representation of the component is as specified in the designs

Design reference

https://projects.invisionapp.com/dsm/silver-stripe/silver-stripe/asset/components/5b5e6e3984472000117f3ee4

[clarkepaul]

This issue has been extended to cover some of the main differences between the UploadField designs and the component as it stands in the Pattern Library (it doesn't exist as yet). There are a number of other issues which touch on different aspects of these design changes already.

Refer to designs https://projects.invisionapp.com/dsm/silver-stripe/silver-stripe/asset/components/5b5e6e3984472000117f3ee4

Functionality differences opened as separate issues:

• You can't define a default location for files to be placed (design provided) Show target folder for uploads in UploadField #759 and Insert media file upload defaults to /Uploads folder, no way to change it in options silverstripe-cms#999
• Error messages are not readable Error message when adding large files are not readable #895 and currently do not match the existing designs.
• There should be a 'More options' icon with options 'View in Files', 'Open in new tab/window', 'Download' and 'Remove' as per Upload field additional actions and UI tidy up #1002

Design differences covered by this issue:

• Reorder insert links to suggest inserting from Files rather than uploading from your computer (includes text changes).
• Loading indicator doesn't match the designs and is in the wrong place
• View (eye) icon should be removed (the whole field should be clickable like a button). The whole component should also have the correct default, hover and focus states.
• Height of component is out by 10px (the drop zone and field after a file has been attached should be the same size – avoid the page jumping and provides a smooth transition).
• Border colours are not consistent with designs
• State badges should not have backgrounds behind them and are the wrong colours
• Stats are back to front should be e.g 186KB, PNG