@popsure/dirty-swan 0.27.5 → 0.27.6

package/dist/lib/components/multiDropzone/index.d.ts

@@ -14,6 +14,7 @@ interface Props {
     uploadedFiles: UploadedFile[];
     uploading: boolean;
     onRemoveFile: (id: string) => void;
+    isCondensed?: boolean;
 }
-declare const _default: ({ uploadedFiles, onFileSelect, uploading, onRemoveFile, }: Props) => JSX.Element;
+declare const _default: ({ uploadedFiles, onFileSelect, uploading, onRemoveFile, isCondensed, }: Props) => JSX.Element;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popsure/dirty-swan",
-  "version": "0.27.5",
+  "version": "0.27.6",
   "author": "Vincent Audoire <vincent@getpopsure.com>",
   "license": "MIT",
   "private": false,

package/src/lib/components/multiDropzone/icons/upload.svg

@@ -1,5 +1,5 @@
-<svg width="74" height="65" viewBox="0 0 74 65" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M26.7331 51.0225H16.9671C12.207 51.0225 2 46.6745 2 35.4347C2 23.341 12.207 19.2864 17.3221 19.2864C18.0198 13.4585 21.8677 2.64515 36.0438 1.896C49.6806 1.896 55.7671 14.2015 54.7655 23.3697C60.0996 23.0395 72 25.4458 72 37.4209C72 47.6065 61.3317 51.4782 55.9975 51.0225H47.5947" stroke="#8E8CEE" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
-<path d="M36.9999 62.9938V29.5552" stroke="#8E8CEE" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
-<path d="M28.6452 37.91L37 29.5552L45.3548 37.91" stroke="#8E8CEE" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
+<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.589 52.324H16.6368C12.2734 52.324 2.91699 48.3383 2.91699 38.0351C2.91699 26.9493 12.2734 23.2325 16.9623 23.2325C17.6018 17.8902 21.1291 7.97805 34.1238 7.29132C46.6242 7.29132 52.2035 18.5714 51.2854 26.9756C56.175 26.6729 67.0837 28.8787 67.0837 39.8558C67.0837 49.1926 57.3044 52.7417 52.4147 52.324H44.7121" stroke="#8E8CEE" stroke-width="3.08333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M35 63.2981V32.646" stroke="#8E8CEE" stroke-width="3.08333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M27.3428 40.3045L35.0013 32.646L42.6599 40.3045" stroke="#8E8CEE" stroke-width="3.08333" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/src/lib/components/multiDropzone/index.stories.mdx

@@ -69,6 +69,27 @@ MultiDropzone component allows upload of multiple documents / files.
   />
 </Preview>
 
+### Condensed view
+
+<Preview>
+  <MultiDropzone
+    uploadedFiles={[
+      {
+        id: '123',
+        type: 'pdf',
+        progress: '100',
+        name: 'test_file_name.pdf',
+        token: 'abc',
+        previewUrl: 'http://getpopsure.com/test_file_name.pdf',
+      },
+    ]}
+    onFileSelect={() => {}}
+    uploading={false}
+    onRemoveFile={() => {}}
+    isCondensed
+  />
+</Preview>
+
 ### Error state
 
 <Preview>

package/src/lib/components/multiDropzone/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { useDropzone } from 'react-dropzone';
 import classnames from 'classnames';
 
@@ -44,6 +44,7 @@ interface Props {
   uploadedFiles: UploadedFile[];
   uploading: boolean;
   onRemoveFile: (id: string) => void;
+  isCondensed?: boolean;
 }
 
 export default ({
@@ -51,6 +52,7 @@ export default ({
   onFileSelect,
   uploading,
   onRemoveFile,
+  isCondensed = false,
 }: Props) => {
   const onDrop = useCallback(
     (acceptedFiles) => {
@@ -62,16 +64,23 @@ export default ({
   const { getRootProps, getInputProps } = useDropzone({ onDrop });
 
   return (
-    <div className={`w100 ${styles.container}`}>
+    <div className={styles.container}>
       <div
-        className={classnames(`w100 ta-center ${styles['upload-container']}`, {
-          [styles['upload-container-disabled']]: uploading,
-        })}
+        className={classnames(
+          `w100 ta-center br8 c-pointer ${styles.dropzoneContainer}`,
+          {
+            [styles['dropzoneContainerDisabled']]: uploading,
+          }
+        )}
         {...getRootProps()}
       >
         <input {...getInputProps()} />
-        <img src={icons.uploadIcon} alt="" />
-        <div className="p-h4 mt8">
+        <img
+          className={isCondensed ? styles.img : ''}
+          src={icons.uploadIcon}
+          alt="purple cloud with an arrow"
+        />
+        <div className={`p-h4 mt8 ${isCondensed ? styles.textInline : ''}`}>
           {uploading
             ? 'Please wait while uploading file...'
             : 'Choose file or drag & drop'}
@@ -79,7 +88,7 @@ export default ({
         <div className="p-p--small tc-grey-500">Supports JPEG, PNG, PDF</div>
       </div>
       {uploadedFiles.length > 0 && (
-        <div className={`w100 mt16`}>
+        <div className="w100 mt16">
           {uploadedFiles.map((file) => {
             const uploadStatus = getUploadStatus(file.progress, file.error);
             return (

package/src/lib/components/multiDropzone/style.module.scss

@@ -1,32 +1,37 @@
 @use "../../scss/public/grid" as *;
 
 .container {
-  background-color: white;
-  padding: 24px;
-  box-shadow: 0px 2px 3px rgba(38, 38, 46, 0.04);
-  border-radius: 8px;
-
-  @include p-size-mobile {
-    padding: 16px;
-  }
+  background-color: transparent;
 }
 
-.upload-container {
+.dropzoneContainer {
   border: 1px dashed var(--ds-primary-500);
   padding: 32px 0;
-  cursor: pointer;
-  border-radius: 8px;
+  background-color: white;
+
+  transition: all 0.6s ease-in-out;
+}
+
+.img {
+  vertical-align: middle;
+  margin-right: 8px;
+  height: 18px;
+}
+
+.textInline {
+  display: inline-flex;
 }
 
-.upload-container:focus {
+.dropzoneContainer:focus {
   outline: none;
 }
 
-.upload-container:hover {
+.dropzoneContainer:hover {
   background-color: var(--ds-primary-100);
   transition: 0.5s ease;
 }
 
-.upload-container-disabled {
+.dropzoneContainerDisabled {
   pointer-events: none;
+  opacity: 0.4
 }