@popsure/dirty-swan 0.38.1 → 0.38.2

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

@@ -7,20 +7,20 @@ const mockOnFileSelect = jest.fn();
 const mockOnRemoveFile = jest.fn();
 const file = new File(['DummyFile'], 'dummy.png', { type: 'image/png' });
 
-const inputTestId = "ds-drop-input";
-const spinnerTestId = "ds-filecell-spinner";
-const progressbarTestId = "ds-filecell-progressbar";
+const inputTestId = 'ds-drop-input';
+const spinnerTestId = 'ds-filecell-spinner';
+const progressbarTestId = 'ds-filecell-progressbar';
 const uploadedFilesMock = {
-   id: "123",
-   name: "File name",
-   progress: 100,
-   type: "jpg",
+  id: '123',
+  name: 'File name',
+  progress: 100,
+  type: 'jpg',
 };
 
 const setup = ({
- uploadedFiles = [],
- uploading = false,
- ...rest
+  uploadedFiles = [],
+  uploading = false,
+  ...rest
 }: Partial<MultiDropzoneProps>) => {
   return render(
     <MultiDropzone
@@ -34,7 +34,7 @@ const setup = ({
 };
 
 describe('MultiDropzone component', () => {
-  it("should call onFileSelect on files change", async () => {
+  it('should call onFileSelect on files change', async () => {
     const { getByTestId, user } = setup({});
     const files = [file, file];
 
@@ -44,19 +44,22 @@ describe('MultiDropzone component', () => {
   });
 
   describe('Error states', () => {
-    it("should show max files error message", () => {
+    it('should show max files error message', () => {
       const screen = setup({
         maxFiles: 1,
-        uploadedFiles: [uploadedFilesMock, {
-          ...uploadedFilesMock,
-          id: "222"
-        }],
+        uploadedFiles: [
+          uploadedFilesMock,
+          {
+            ...uploadedFilesMock,
+            id: '222',
+          },
+        ],
       });
-  
-      expect(screen.getByText("Too many files.")).toBeVisible();
+
+      expect(screen.getByText('Too many files.')).toBeVisible();
     });
 
-    it("should show max file size error message", async () => {
+    it('should show max file size error message', async () => {
       const { getByTestId, getByText, user } = setup({ maxSize: 10 });
       const bigFile = file;
       Object.defineProperty(bigFile, 'size', { value: 1024 });
@@ -64,12 +67,12 @@ describe('MultiDropzone component', () => {
       await user.upload(getByTestId(inputTestId), [bigFile]);
 
       expect(
-        getByText("File is too large. It must be less than 10 Bytes.")
+        getByText('File is too large. It must be less than 10 Bytes.')
       ).toBeInTheDocument();
     });
 
-    it("should show wrong filetype error message", async () => {
-      const { getByTestId, getByText } = setup({ accept: "document" });
+    it('should show wrong filetype error message', async () => {
+      const { getByTestId, getByText } = setup({ accept: 'document' });
       const input = getByTestId(inputTestId);
 
       await act(async () => {
@@ -79,12 +82,14 @@ describe('MultiDropzone component', () => {
       });
 
       expect(
-        getByText("File type must be one of DOC, DOCX, PDF")
+        getByText('File type must be one of DOC, DOCX, PDF')
       ).toBeInTheDocument();
     });
 
-    it("should remove wrong filetype error message", async () => {
-      const { getByAltText, getByTestId, queryByText, user } = setup({ accept: "document" });
+    it('should remove wrong filetype error message', async () => {
+      const { getByAltText, getByTestId, queryByText, user } = setup({
+        accept: 'document',
+      });
       const input = getByTestId(inputTestId);
 
       await act(async () => {
@@ -93,135 +98,150 @@ describe('MultiDropzone component', () => {
         fireEvent.change(input, { target: { files: [file] } });
       });
 
-      await user.click(getByAltText("remove"));
+      await user.click(getByAltText('remove'));
 
-      expect(queryByText("File type must be one of DOC, DOCX, PDF")).not.toBeInTheDocument();
+      expect(
+        queryByText('File type must be one of DOC, DOCX, PDF')
+      ).not.toBeInTheDocument();
     });
   });
 
   describe('Copy text', () => {
-    it("should show uploader text", () => {
+    it('should show uploader text', () => {
       const screen = setup({});
 
-      expect(screen.getByText("Choose file or drag & drop")).toBeInTheDocument();
+      expect(
+        screen.getByText('Choose file or drag & drop')
+      ).toBeInTheDocument();
     });
 
-    it("should show uploader text translated", () => {
-      const instructionsText = "Drag drop file";
+    it('should show uploader text translated', () => {
+      const instructionsText = 'Drag drop file';
       const screen = setup({
-        textOverrides: { instructionsText }
+        textOverrides: { instructionsText },
       });
 
       expect(screen.getByText(instructionsText)).toBeInTheDocument();
     });
 
-    it("should show image accept file type label", () => {
-      const screen = setup({ accept: "image" });
+    it('should show image accept file type label', () => {
+      const screen = setup({ accept: 'image' });
 
       expect(
-        screen.getByText("Supports HEIC, BMP, JPEG, JPG, PNG")
+        screen.getByText('Supports HEIC, BMP, JPEG, JPG, PNG')
       ).toBeInTheDocument();
     });
 
-    it("should show document accept file type label", () => {
-      const screen = setup({ accept: "document" });
+    it('should show document accept file type label', () => {
+      const screen = setup({ accept: 'document' });
 
-      expect(
-        screen.getByText("Supports DOC, DOCX, PDF")
-      ).toBeInTheDocument();
+      expect(screen.getByText('Supports DOC, DOCX, PDF')).toBeInTheDocument();
     });
 
-    it("should custom document accept file type label", () => {
-      const screen = setup({ accept: {
-        "application/pdf": [".pdf"],
-        "image/jpg": [".jpg"],
-      } });
+    it('should custom document accept file type label', () => {
+      const screen = setup({
+        accept: {
+          'application/pdf': ['.pdf'],
+          'image/jpg': ['.jpg'],
+        },
+      });
 
-      expect(
-        screen.getByText("Supports PDF, JPG")
-      ).toBeInTheDocument();
+      expect(screen.getByText('Supports PDF, JPG')).toBeInTheDocument();
     });
 
-    it("should show disabled text if is uploading", () => {
+    it('should show disabled text if is uploading', () => {
       const screen = setup({ uploading: true });
 
       expect(
-        screen.getByText("Please wait while uploading file...")
+        screen.getByText('Please wait while uploading file...')
       ).toBeInTheDocument();
     });
+
+    it('should associate input with its label', () => {
+      const { getByLabelText } = setup({});
+      const input = getByLabelText('Choose file or drag & drop');
+
+      expect(input).toBeInTheDocument();
+    });
   });
 
   describe('Uploaded files', () => {
-    it("should show uploaded files", () => {
+    it('should show uploaded files', () => {
       const screen = setup({
         uploadedFiles: [uploadedFilesMock],
       });
 
-      expect(
-        screen.getByText(uploadedFilesMock.name)
-      ).toBeInTheDocument();
+      expect(screen.getByText(uploadedFilesMock.name)).toBeInTheDocument();
     });
 
-    it("should call onRemoveFile with uploaded file id", () => {
+    it('should call onRemoveFile with uploaded file id', () => {
       const screen = setup({
         uploadedFiles: [uploadedFilesMock],
       });
 
-      screen.getByAltText("remove").click();
+      screen.getByAltText('remove').click();
 
       expect(mockOnRemoveFile).toBeCalledWith(uploadedFilesMock.id);
     });
 
-    it("should show uploaded file with uploading label", () => {
+    it('should show uploaded file with uploading label', () => {
       const screen = setup({
         uploadedFiles: [{ ...uploadedFilesMock, progress: 50 }],
       });
 
-      expect(screen.getByText("Uploading...")).toBeInTheDocument();
+      expect(screen.getByText('Uploading...')).toBeInTheDocument();
     });
 
-    it("should show uploaded file with progress bar", () => {
+    it('should show uploaded file with progress bar', () => {
       const screen = setup({
-        uploadedFiles: [{
-          ...uploadedFilesMock,
-          progress: 50,
-        }],
+        uploadedFiles: [
+          {
+            ...uploadedFilesMock,
+            progress: 50,
+          },
+        ],
       });
 
       expect(screen.getByTestId(progressbarTestId)).toBeInTheDocument();
     });
 
-    it("should show uploaded file with no progress bar", () => {
+    it('should show uploaded file with no progress bar', () => {
       const screen = setup({
-        uploadedFiles: [{
-          ...uploadedFilesMock,
-          progress: 50,
-          showProgressBar: false
-        }],
+        uploadedFiles: [
+          {
+            ...uploadedFilesMock,
+            progress: 50,
+            showProgressBar: false,
+          },
+        ],
       });
 
       expect(screen.queryByTestId(progressbarTestId)).not.toBeInTheDocument();
     });
 
-    it("should show uploaded file with loading spinner", () => {
+    it('should show uploaded file with loading spinner', () => {
       const screen = setup({
-        uploadedFiles: [{
-          ...uploadedFilesMock,
-          progress: 50,
-          showLoadingSpinner: true
-        }],
+        uploadedFiles: [
+          {
+            ...uploadedFilesMock,
+            progress: 50,
+            showLoadingSpinner: true,
+          },
+        ],
       });
 
       expect(screen.getByTestId(spinnerTestId)).toBeInTheDocument();
     });
 
-    it("should show uploaded file with no loading spinner", () => {
+    it('should show uploaded file with no loading spinner', () => {
       const screen = setup({
-        uploadedFiles: [{
-          ...uploadedFilesMock,
-          progress: 50,
-          showLoadingSpinner: false
-        }],
+        uploadedFiles: [
+          {
+            ...uploadedFilesMock,
+            progress: 50,
+            showLoadingSpinner: false,
+          },
+        ],
       });
 
       expect(screen.queryByTestId(spinnerTestId)).not.toBeInTheDocument();

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

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useState, useRef } from 'react';
 import classnames from 'classnames';
 import { useDropzone, FileRejection } from 'react-dropzone';
 import AnimateHeight from 'react-animate-height';
@@ -6,20 +6,20 @@ import generateId from '../../util/generateId';
 import styles from './style.module.scss';
 import icons from './icons/index'; // TODO: inline all of the svgs
 import UploadFileCell from './UploadFileCell';
-import { 
-  formatAcceptFileList, 
-  getErrorMessage, 
-  getFormattedAcceptObject, 
-  getUploadStatus 
+import {
+  formatAcceptFileList,
+  getErrorMessage,
+  getFormattedAcceptObject,
+  getUploadStatus,
 } from './utils';
 
-import { 
-  AcceptType, 
-  ErrorMessage, 
+import {
+  AcceptType,
+  ErrorMessage,
   FileType,
-  TextOverrides, 
-  UploadedFile, 
-  UploadStatus 
+  TextOverrides,
+  UploadedFile,
+  UploadStatus,
 } from './types';
 
 import { formatBytes } from '../../util/formatBytes';
@@ -50,21 +50,23 @@ const MultiDropzone = ({
   const [errors, setErrors] = useState<ErrorMessage[]>([]);
   const formattedAccept = getFormattedAcceptObject(accept);
   const fileList = formatAcceptFileList(formattedAccept);
-  const maxSizePlaceholder = maxSize && maxSize > 0
-  ? `${textOverrides?.sizeUpToText || "up to"} ${formatBytes(maxSize)}`
-  : "";
-const placeholder = `${textOverrides?.supportsTextShort || "Supports"} ${fileList || "JPEG, PNG, PDF"} ${maxSizePlaceholder}`;
+  const maxSizePlaceholder =
+    maxSize && maxSize > 0
+      ? `${textOverrides?.sizeUpToText || 'up to'} ${formatBytes(maxSize)}`
+      : '';
+  const placeholder = `${textOverrides?.supportsTextShort || 'Supports'} ${
+    fileList || 'JPEG, PNG, PDF'
+  } ${maxSizePlaceholder}`;
   const isOverMaxFiles = maxFiles > 0 && uploadedFiles.length > maxFiles;
 
-  const removeError = (removeId: string) => (
-    setErrors(errors.filter(({ id }) => id !== removeId))
-  );
+  const removeError = (removeId: string) =>
+    setErrors(errors.filter(({ id }) => id !== removeId));
 
   const onDrop = useCallback(
     (acceptedFiles: File[], filesRejected: FileRejection[]) => {
       onFileSelect(acceptedFiles);
 
-      setErrors((previousErrors) => ([
+      setErrors((previousErrors) => [
         ...previousErrors,
         ...filesRejected.map(({ errors }) => ({
           id: generateId(),
@@ -73,13 +75,12 @@ const placeholder = `${textOverrides?.supportsTextShort || "Supports"} ${fileLis
             { fileList, maxSize },
             textOverrides
           ),
-        }))
-      ]));
+        })),
+      ]);
     },
     [fileList, maxSize, onFileSelect, textOverrides]
   );
 
-
   const { getRootProps, getInputProps } = useDropzone({
     accept: formattedAccept,
     disabled: uploading,
@@ -87,6 +88,8 @@ const placeholder = `${textOverrides?.supportsTextShort || "Supports"} ${fileLis
     onDrop,
   });
 
+  const uniqueId = useRef(generateId());
+
   return (
     <div className={styles.container}>
       <div
@@ -100,6 +103,7 @@ const placeholder = `${textOverrides?.supportsTextShort || "Supports"} ${fileLis
       >
         <input
           data-testid="ds-drop-input"
+          id={uniqueId.current}
           {...getInputProps()}
         />
         <img
@@ -107,31 +111,39 @@ const placeholder = `${textOverrides?.supportsTextShort || "Supports"} ${fileLis
           src={isCondensed ? icons.uploadSmallIcon : icons.uploadIcon}
           alt="purple cloud with an arrow"
         />
-        <div className={`p-h4 mt8 ${isCondensed ? styles.textInline : ''}`}>
+        <label
+          htmlFor={uniqueId.current}
+          className={`p-h4 mt8 d-block c-pointer ${
+            isCondensed ? styles.textInline : ''
+          }`}
+        >
           {uploading
             ? textOverrides?.currentlyUploadingText ||
               'Please wait while uploading file...'
             : textOverrides?.instructionsText || 'Choose file or drag & drop'}
-        </div>
+        </label>
         <div className="p-p--small tc-grey-500">
           {textOverrides?.supportsText || placeholder}
         </div>
       </div>
 
-      {errors.map(({ id, message }) => message && (
-        <UploadFileCell
-          uploadStatus="ERROR"
-          file={{
-            error: message,
-            id,
-            name: message,
-            progress: 0,
-          }}
-          key={id}
-          onRemoveFile={() => removeError(id)}
-          uploading={false}
-        />
-      ))}
+      {errors.map(
+        ({ id, message }) =>
+          message && (
+            <UploadFileCell
+              uploadStatus="ERROR"
+              file={{
+                error: message,
+                id,
+                name: message,
+                progress: 0,
+              }}
+              key={id}
+              onRemoveFile={() => removeError(id)}
+              uploading={false}
+            />
+          )
+      )}
 
       {uploadedFiles.length > 0 && (
         <div className="w100 mt16">
@@ -149,7 +161,7 @@ const placeholder = `${textOverrides?.supportsTextShort || "Supports"} ${fileLis
 
       <AnimateHeight duration={300} height={isOverMaxFiles ? 'auto' : 0}>
         <p className="tc-red-500 p-p--small">
-          {textOverrides?.tooManyFilesError || "Too many files."}
+          {textOverrides?.tooManyFilesError || 'Too many files.'}
         </p>
       </AnimateHeight>
     </div>

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

@@ -1,4 +1,4 @@
-@use "../../scss/public/grid" as *;
+@use '../../scss/public/grid' as *;
 
 .container {
   background-color: transparent;
@@ -33,5 +33,5 @@
 
 .dropzoneContainerDisabled {
   pointer-events: none;
-  opacity: 0.4
+  opacity: 0.4;
 }