added dropzone component

[robsel118]

#139

I have tried to make a basic dropzone. If I could access the Zeplin mock-up, I could see to change it a bit. When dropping a valid file, the handleDrop callback function is called with the file.

All the children are rendered in a centered column.

Please let me know of any issues and improvements.

Example

    <DropZone
      handleDrop={file => {
        console.log(file);
      }}
      validTypes={[
        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
        'text/x-vcard'
      ]}
    >
      <h1>DropZone</h1>
      <h1>Drop your file here</h1>
      <input type="file" />
    </DropZone>

[EpokK]

Hi @robsel118

Thanks a lot for your pull request. Your code looks good but we would like to improve it a bit:

• modernize the component by using React hook.
• add more listener than just handleDrop.
• rename listeners handleDrop => onDrop.
• use classnames helper.
• use colors from design-system project.

[robsel118]

Hello @EpokK , sorry for the delay.
I made the changes according your feedback. Please let me know if it is okay.

  <Dropzone
      onDrop={file => console.log(file)}
      onDragEnter={isFileValid => {
        if (isFileValid) {
          console.log('success');
        } else {
          console.log('failure');
        }
      }}
      onDragExit={() => console.log('file was not dropped')}
      validTypes={[
        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
        'text/x-vcard'
      ]}
    >
      <div>DROP ZONE</div>
    </Dropzone>