@innovaccer/design-system 2.5.0-2 → 2.5.1

package/core/components/molecules/fileUploader/__stories__/index.story.tsx

@@ -2,34 +2,101 @@ import * as React from 'react';
 import { text, boolean } from '@storybook/addon-knobs';
 import { FileUploader, FileUploaderList, Link } from '@/index';
 import { FileUploaderComponent, FileUploaderListComponent } from './_common_/types';
+import { FileItem } from '../FileUploaderItem';
 
 export const all = () => {
-  const [fileNames, setFileNames] = React.useState<any>([]);
+  const [fileNames, setFileNames] = React.useState<FileItem[]>([]);
+  const [errorOccured, setErrorOccured] = React.useState(false);
 
   const title = text('title', 'Upload files');
-  const formatLabel = text('formatLabel', 'Accepted formats: PDF, jpg');
+  const formatLabel = text('formatLabel', 'Accepted formats: pdf, jpg, jpeg, png');
   const sizeLabel = text('sizeLabel', 'Maximum size: 25 MB');
   const multiple = boolean('multiple', true);
 
-  const onChangeHandler = (fileList: File[]) => {
-    const files = fileList.map((file) => {
-      return {
+  const randomBetween = (value: number) => Math.round(Math.random() * value);
+
+  const imitateUploading = (fileItem: FileItem) => {
+    const randomProgressChunks = [5, 8, 13];
+    const randomChunkIndex = randomBetween(randomProgressChunks.length - 1);
+    const progressChunk = randomProgressChunks[randomChunkIndex];
+    let baseProgress = fileItem.progress || 0;
+
+    const increment = () => {
+      baseProgress += progressChunk;
+      setProgressFileName(fileItem, baseProgress);
+
+      if (baseProgress < 100) {
+        setTimeout(() => increment(), 100);
+      }
+    };
+
+    increment();
+  };
+
+  const setProgressFileName = (fileName: FileItem, progress = 0) => {
+    setFileNames((previousFileNames) => {
+      const fileNameIndex = previousFileNames.findIndex((fn) => fn.file === fileName.file);
+
+      if (fileNameIndex === -1) {
+        return [...previousFileNames, fileName];
+      }
+
+      return previousFileNames.map((previousFileName, index) => {
+        if (fileNameIndex !== index) return previousFileName;
+
+        return {
+          ...previousFileName,
+          progress,
+          status: progress >= 100 ? 'completed' : 'uploading',
+        };
+      });
+    });
+  };
+
+  const uploadFiles = (fileList: File[]) => {
+    if (!errorOccured && (fileList.length > 1 || fileNames.length > 0)) {
+      const randomErrorIndex = randomBetween(fileList.length - 1);
+      setFileNames((previousFileNames) => [
+        ...previousFileNames,
+        { file: fileList[randomErrorIndex], status: 'error' },
+      ]);
+      setErrorOccured(true);
+
+      if (fileList.length <= 1) {
+        return;
+      }
+
+      fileList.splice(randomErrorIndex, 1);
+    }
+
+    fileList.forEach((file) => {
+      const fileItem: FileItem = {
         file,
-        status: 'completed',
+        status: 'uploading',
+        progress: 0,
       };
+
+      imitateUploading(fileItem);
     });
+  };
+
+  const retryUploadFile = (file: File) => {
+    uploadFiles([file]);
+  };
 
-    setFileNames(files);
+  const deleteUploadedFile = (file: File) => {
+    setFileNames((previousFileNames) => previousFileNames.filter((fileName) => fileName.file !== file));
   };
 
   return (
     <div>
       <FileUploader
-        onChange={onChangeHandler}
+        onChange={uploadFiles}
         multiple={multiple}
         title={title}
         formatLabel={formatLabel}
         sizeLabel={sizeLabel}
+        accept={['image/png', 'application/pdf', 'image/jpeg']}
         sampleFileLink={
           <Link
             href="http://www.adobe.com/content/dam/Adobe/en/accessibility/pdfs/accessing-pdf-sr.pdf"
@@ -40,32 +107,100 @@ export const all = () => {
           </Link>
         }
       />
-      <FileUploaderList fileList={fileNames} className="mt-4" />
+      <FileUploaderList onDelete={deleteUploadedFile} onRetry={retryUploadFile} fileList={fileNames} className="mt-4" />
     </div>
   );
 };
 
 const customCode = `() => {
   const [fileNames, setFileNames] = React.useState([]);
+  const [errorOccured, setErrorOccured] = React.useState(false);
 
-  const onChangeHandler = (fileList) => {
-    const files = fileList.map(file => {
-      return {
-        file,
-        status: 'completed',
+  const randomBetween = (value) => Math.round(Math.random() * value);
+
+  const imitateUploading = (fileItem) => {
+    const randomProgressChunks = [5, 8, 13];
+    const randomChunkIndex = randomBetween(randomProgressChunks.length - 1);
+    const progressChunk = randomProgressChunks[randomChunkIndex];
+    let baseProgress = fileItem.progress || 0;
+
+    const increment = () => {
+      baseProgress += progressChunk;
+      setProgressFileName(fileItem, baseProgress);
+
+      if (baseProgress < 100) {
+        setTimeout(() => increment(), 100);
+      }
+    };
+
+    increment();
+  };
+
+  const setProgressFileName = (fileName, progress = 0) => {
+    setFileNames((previousFileNames) => {
+      const fileNameIndex = previousFileNames.findIndex((fn) => fn.file === fileName.file);
+
+      if (fileNameIndex === -1) {
+        return [...previousFileNames, fileName];
+      }
+
+      return previousFileNames.map((previousFileName, index) => {
+        if (fileNameIndex !== index) return previousFileName;
+
+        return {
+          ...previousFileName,
+          status: progress >= 100 ? 'completed' : 'uploading',
+          progress,
+        };
+      });
+    });
+  };
+
+  const uploadFiles = (fileList) => {
+    if ((!errorOccured && (fileList.length > 1 || fileNames.length > 0))) {
+      const randomErrorIndex = randomBetween(fileList.length - 1);
+      setFileNames((previousFileNames) => [
+        ...previousFileNames,
+        { file: fileList[randomErrorIndex], status: 'error' },
+      ]);
+      setErrorOccured(true);
+
+      if (fileList.length <= 1) {
+        return;
       }
+
+      fileList.splice(randomErrorIndex, 1);
+    }
+
+    fileList.forEach((file) => {
+      const fileItem = {
+        file,
+        status: 'uploading',
+        progress: 0,
+      };
+
+      imitateUploading(fileItem);
     });
+  };
+
+  const retryUploadFile = (file) => {
+    uploadFiles([file]);
+  };
 
-    setFileNames(files);
+  const deleteUploadedFile = (file) => {
+    setFileNames((previousFileNames) => previousFileNames.filter(fileName => fileName.file !== file));
   };
 
   return (
     <div>
       <FileUploader
-        onChange={onChangeHandler}
-        multiple={true}
-        formatLabel='Accepted formats: PDF, jpg'
-        sampleFileLink={(
+        onChange={uploadFiles}
+        multiple
+        title="Upload files"
+        accept={['image/png', 'application/pdf', 'image/jpeg']}
+        formatLabel="Accepted formats: pdf, jpg, jpeg, png"
+        sizeLabel="Maximum size: 25 MB"
+        sampleFileLink={
           <Link
             href="http://www.adobe.com/content/dam/Adobe/en/accessibility/pdfs/accessing-pdf-sr.pdf"
             download="Test.pdf"
@@ -73,9 +208,9 @@ const customCode = `() => {
           >
             Download sample file
           </Link>
-        )}
+        }
       />
-      <FileUploaderList fileList={fileNames} className="mt-4" />
+      <FileUploaderList onDelete={deleteUploadedFile} onRetry={retryUploadFile} fileList={fileNames} className="mt-4" />
     </div>
   );
 }`;

package/core/components/molecules/fileUploader/__tests__/FileUploader.test.tsx

@@ -23,18 +23,14 @@ describe('FileUploader component', () => {
     sizeLabel: valueHelper(maxSizeLabel, { required: true }),
     uploadButtonLabel: valueHelper(uploadButtonLabel, { required: true }),
     formatLabel: valueHelper(formatLabel, { required: true }),
-    onChange: valueHelper(FunctionValue, { required: true })
+    onChange: valueHelper(FunctionValue, { required: true }),
   };
 
   const testFunc = (props: Record<string, any>): void => {
     const attr = filterUndefined(props) as Props;
 
     it(testMessageHelper(attr), () => {
-      const { asFragment } = render(
-        <FileUploader
-          {...attr}
-        />
-      );
+      const { asFragment } = render(<FileUploader {...attr} />);
       expect(asFragment()).toMatchSnapshot();
     });
   };
@@ -51,11 +47,7 @@ describe('FileUploader component prop:accept snapshot', () => {
     const attr = filterUndefined(props) as Props;
 
     it(testMessageHelper(attr), () => {
-      const { asFragment } = render(
-        <FileUploader
-          {...attr}
-        />
-      );
+      const { asFragment } = render(<FileUploader {...attr} />);
       expect(asFragment()).toMatchSnapshot();
     });
   };
@@ -72,11 +64,7 @@ describe('FileUploader component prop:multiple snapshot', () => {
     const attr = filterUndefined(props) as Props;
 
     it(testMessageHelper(attr), () => {
-      const { asFragment } = render(
-        <FileUploader
-          {...attr}
-        />
-      );
+      const { asFragment } = render(<FileUploader {...attr} />);
       expect(asFragment()).toMatchSnapshot();
     });
   };
@@ -93,11 +81,7 @@ describe('FileUploader component prop:disabled snapshot', () => {
     const attr = filterUndefined(props) as Props;
 
     it(testMessageHelper(attr), () => {
-      const { asFragment } = render(
-        <FileUploader
-          {...attr}
-        />
-      );
+      const { asFragment } = render(<FileUploader {...attr} />);
       expect(asFragment()).toMatchSnapshot();
     });
   };
@@ -107,55 +91,39 @@ describe('FileUploader component prop:disabled snapshot', () => {
 
 describe('FileUploader component prop:title', () => {
   it('renders title element', () => {
-    const { getAllByTestId } = render(
-      <FileUploader
-        title={title}
-      />
-    );
+    const { getAllByTestId } = render(<FileUploader title={title} />);
     expect(getAllByTestId('DesignSystem-Text')[0]).toBeInTheDocument();
     expect(getAllByTestId('DesignSystem-Text')[0].textContent).toMatch(title);
     expect(getAllByTestId('DesignSystem-Text')[0]).toHaveClass('Text--default Text--regular');
   });
 
   it('check for default title', () => {
-    const { getAllByTestId } = render(
-      <FileUploader />
-    );
+    const { getAllByTestId } = render(<FileUploader />);
     expect(getAllByTestId('DesignSystem-Text')[0]).toBeInTheDocument();
     expect(getAllByTestId('DesignSystem-Text')[0].textContent).toMatch('Upload files');
     expect(getAllByTestId('DesignSystem-Text')[0]).toHaveClass('Text--default Text--regular');
-  })
+  });
 });
 
 describe('FileUploader component prop:sizeLabel', () => {
   it('renders sizeLabel element', () => {
-    const { getAllByTestId } = render(
-      <FileUploader
-        sizeLabel={maxSizeLabel}
-      />
-    );
+    const { getAllByTestId } = render(<FileUploader sizeLabel={maxSizeLabel} />);
     expect(getAllByTestId('DesignSystem-Text')[1]).toBeInTheDocument();
     expect(getAllByTestId('DesignSystem-Text')[1].textContent).toMatch(maxSizeLabel);
     expect(getAllByTestId('DesignSystem-Text')[1]).toHaveClass('Text--subtle Text--small');
   });
 
   it('check for default sizeLabel', () => {
-    const { getAllByTestId } = render(
-      <FileUploader />
-    );
+    const { getAllByTestId } = render(<FileUploader />);
     expect(getAllByTestId('DesignSystem-Text')[1]).toBeInTheDocument();
     expect(getAllByTestId('DesignSystem-Text')[1].textContent).toMatch('Maximum size: 25 MB');
     expect(getAllByTestId('DesignSystem-Text')[1]).toHaveClass('Text--subtle Text--small');
-  })
+  });
 });
 
 describe('FileUploader component prop:formatLabel', () => {
   it('renders formatLabel element', () => {
-    const { getAllByTestId } = render(
-      <FileUploader
-        formatLabel={formatLabel}
-      />
-    );
+    const { getAllByTestId } = render(<FileUploader formatLabel={formatLabel} />);
     expect(getAllByTestId('DesignSystem-Text')[1]).toBeInTheDocument();
     expect(getAllByTestId('DesignSystem-Text')[1].textContent).toMatch(formatLabel);
     expect(getAllByTestId('DesignSystem-Text')[1]).toHaveClass('Text--subtle Text--small');
@@ -164,53 +132,34 @@ describe('FileUploader component prop:formatLabel', () => {
 
 describe('FileUploader component with overwrite class', () => {
   it('overwrite DesignSystem-FileUploader class', () => {
-    const { getByTestId } = render(
-      <FileUploader
-        className="customClass"
-      />
-    );
+    const { getByTestId } = render(<FileUploader className="customClass" />);
     expect(getByTestId('DesignSystem-FileUploader')).toHaveClass('customClass');
   });
 });
 
 describe('FileUploader component prop:uploadButtonLabel', () => {
   it('renders uploadButtonLabel element', () => {
-    const { getByTestId } = render(
-      <FileUploader
-        uploadButtonLabel={uploadButtonLabel}
-      />
-    );
+    const { getByTestId } = render(<FileUploader uploadButtonLabel={uploadButtonLabel} />);
     expect(getByTestId('DesignSystem-Button')).toBeInTheDocument();
     expect(getByTestId('DesignSystem-Button').textContent).toMatch(uploadButtonLabel);
   });
 
   it('checks for uploadButtonLabel element default values', () => {
-    const { getByTestId } = render(
-      <FileUploader />
-    );
+    const { getByTestId } = render(<FileUploader />);
     expect(getByTestId('DesignSystem-Button')).toBeInTheDocument();
     expect(getByTestId('DesignSystem-Button').textContent).toMatch('Upload files');
-
   });
 });
 
 describe('FileUploader component prop:onChange', () => {
   it('check for onChange callback when file input is changed', () => {
-    const { getByTestId } = render(
-      <FileUploader
-        onChange={FunctionValue}
-      />
-    );
+    const { getByTestId } = render(<FileUploader onChange={FunctionValue} />);
     fireEvent.change(getByTestId('DesignSystem-FileUploaderButton--Input'), { target: { files: expampleFile } });
     expect(FunctionValue).toHaveBeenCalled();
   });
 
   it('check for onChange callback when file input is not changed', () => {
-    const { getByTestId } = render(
-      <FileUploader
-        onChange={FunctionValue}
-      />
-    );
+    const { getByTestId } = render(<FileUploader onChange={FunctionValue} />);
     fireEvent.change(getByTestId('DesignSystem-FileUploaderButton--Input'));
     expect(FunctionValue).toHaveBeenCalled();
   });
@@ -218,20 +167,12 @@ describe('FileUploader component prop:onChange', () => {
 
 describe('FileUploader component prop:disabled', () => {
   it('check for fileUploaderButton if disabled is true', () => {
-    const { getByTestId } = render(
-      <FileUploader
-        disabled={true}
-      />
-    );
+    const { getByTestId } = render(<FileUploader disabled={true} />);
     expect(getByTestId('DesignSystem-Button')).toHaveAttribute('disabled');
   });
 
   it('check for fileUploaderButton if disabled is false', () => {
-    const { getByTestId } = render(
-      <FileUploader
-        disabled={false}
-      />
-    );
+    const { getByTestId } = render(<FileUploader disabled={false} />);
     expect(getByTestId('DesignSystem-Button')).not.toHaveAttribute('disabled');
     expect(getByTestId('DesignSystem-Button')).toHaveClass('Button--basic');
   });
@@ -241,7 +182,7 @@ describe('FileUploader component prop:sampleFileLink', () => {
   it('check for sampleFileLink element', () => {
     const { getByTestId } = render(
       <FileUploader
-        sampleFileLink={(
+        sampleFileLink={
           <Link
             href="http://www.adobe.com/content/dam/Adobe/en/accessibility/pdfs/accessing-pdf-sr.pdf"
             download="Test.pdf"
@@ -249,7 +190,7 @@ describe('FileUploader component prop:sampleFileLink', () => {
           >
             Download sample file
           </Link>
-        )}
+        }
       />
     );
     expect(getByTestId('DesignSystem-Link')).toBeInTheDocument();

package/core/components/molecules/fileUploader/__tests__/FileUploaderList.test.tsx

@@ -32,7 +32,7 @@ const fileList: Props['fileList'] = [
     status: 'error',
     errorMessage: 'Network failure',
     id: 3,
-  }
+  },
 ];
 
 const FunctionValue = jest.fn();
@@ -42,18 +42,14 @@ describe('FileUploaderList component', () => {
     fileList: valueHelper(fileList, { required: true }),
     onClick: valueHelper(FunctionValue, { required: true }),
     onDelete: valueHelper(FunctionValue, { required: true }),
-    onRetry: valueHelper(FunctionValue, { required: true })
+    onRetry: valueHelper(FunctionValue, { required: true }),
   };
 
   const testFunc = (props: Record<string, any>): void => {
     const attr = filterUndefined(props) as Props;
 
     it(testMessageHelper(attr), () => {
-      const { asFragment } = render(
-        <FileUploaderList
-          {...attr}
-        />
-      );
+      const { asFragment } = render(<FileUploaderList {...attr} />);
       expect(asFragment()).toMatchSnapshot();
     });
   };
@@ -63,20 +59,13 @@ describe('FileUploaderList component', () => {
 
 describe('FileUploaderList component prop:fileList', () => {
   it('renders component if fileList is empty', () => {
-    const { queryByTestId } = render(
-      <FileUploaderList />
-    );
+    const { queryByTestId } = render(<FileUploaderList />);
     expect(queryByTestId(/DesignSystem-FileUploader--List/i)).toBeNull();
   });
 
   it('renders component if fileList is not empty', () => {
     const { getByTestId, getAllByTestId } = render(
-      <FileUploaderList
-        fileList={fileList}
-        onDelete={FunctionValue}
-        onRetry={FunctionValue}
-        onClick={FunctionValue}
-      />
+      <FileUploaderList fileList={fileList} onDelete={FunctionValue} onRetry={FunctionValue} onClick={FunctionValue} />
     );
     expect(getByTestId('DesignSystem-FileUploader--List')).toBeInTheDocument();
     expect(getAllByTestId('DesignSystem-FileUploader--Item')).toHaveLength(fileList.length);
@@ -85,45 +74,25 @@ describe('FileUploaderList component prop:fileList', () => {
 
 describe('FileUploaderList component Event Handler', () => {
   it('check for onClick Event Handler', () => {
-    const { getAllByTestId } = render(
-      <FileUploaderList
-        fileList={fileList}
-        onClick={FunctionValue}
-      />
-    );
+    const { getAllByTestId } = render(<FileUploaderList fileList={fileList} onClick={FunctionValue} />);
     fireEvent.click(getAllByTestId('DesignSystem-FileUploader--Item')[0]);
     expect(FunctionValue).toHaveBeenCalled();
   });
 
   it('check for onDelete Event Handler', () => {
-    const { getAllByTestId } = render(
-      <FileUploaderList
-        fileList={fileList}
-        onDelete={FunctionValue}
-      />
-    );
+    const { getAllByTestId } = render(<FileUploaderList fileList={fileList} onDelete={FunctionValue} />);
     fireEvent.click(getAllByTestId('DesignSystem-FileUploader--CancelButton')[0]);
     expect(FunctionValue).toHaveBeenCalled();
   });
 
   it('check for onRetry Event Handler', () => {
-    const { getByTestId } = render(
-      <FileUploaderList
-        fileList={[fileList[2]]}
-        onRetry={FunctionValue}
-      />
-    );
+    const { getByTestId } = render(<FileUploaderList fileList={[fileList[2]]} onRetry={FunctionValue} />);
     fireEvent.click(getByTestId('DesignSystem-Button'));
     expect(FunctionValue).toHaveBeenCalled();
   });
 
   it('check for Error Caption', () => {
-    const { getByTestId } = render(
-      <FileUploaderList
-        fileList={[fileList[2]]}
-        onRetry={FunctionValue}
-      />
-    );
+    const { getByTestId } = render(<FileUploaderList fileList={[fileList[2]]} onRetry={FunctionValue} />);
     expect(getByTestId('DesignSystem-Caption')).toBeInTheDocument();
     expect(getByTestId('DesignSystem-Caption').textContent).toMatch('Network failure');
   });

package/core/components/molecules/fullscreenModal/FullscreenModal.tsx

@@ -122,50 +122,47 @@ class FullscreenModal extends React.Component<FullscreenModalProps, ModalState>
   }
 
   onOutsideClickHandler = (event: KeyboardEvent) => {
-
     OverlayManager.remove(this.modalRef.current);
 
     if (this.props.onClose) {
       this.props.onClose(event, 'EscapePress');
-
     } else {
       this.setState(
         {
-          animate: false
+          animate: false,
         },
         () => {
           window.setTimeout(() => {
             this.setState({
-              open: false
+              open: false,
             });
           }, 120);
         }
       );
     }
-  }
+  };
 
   onCloseHandler = (event: KeyboardEvent) => {
     const isTopOverlay = OverlayManager.isTopOverlay(this.modalRef.current);
-    closeOnEscapeKeypress(event, isTopOverlay, this.onOutsideClickHandler)
-  }
+    closeOnEscapeKeypress(event, isTopOverlay, this.onOutsideClickHandler);
+  };
 
   componentDidMount() {
     if (this.props.closeOnEscape) {
       if (this.state.open) {
         OverlayManager.add(this.modalRef.current);
       }
-      document.addEventListener('keydown', this.onCloseHandler)
+      document.addEventListener('keydown', this.onCloseHandler);
     }
   }
 
   componentWillUnmount() {
-    if (this.props.closeOnEscape) document.removeEventListener('keydown', this.onCloseHandler)
+    if (this.props.closeOnEscape) document.removeEventListener('keydown', this.onCloseHandler);
   }
 
   componentDidUpdate(prevProps: FullscreenModalProps) {
     if (prevProps.open !== this.props.open) {
       if (this.props.open) {
-
         const zIndex = getUpdatedZIndex({
           element: this.element,
           containerClassName: '.Overlay-container--open',
@@ -179,9 +176,7 @@ class FullscreenModal extends React.Component<FullscreenModalProps, ModalState>
         });
 
         if (this.props.closeOnEscape) OverlayManager.add(this.modalRef.current);
-
       } else {
-
         this.setState(
           {
             animate: false,
@@ -196,7 +191,6 @@ class FullscreenModal extends React.Component<FullscreenModalProps, ModalState>
         );
 
         if (this.props.closeOnEscape) OverlayManager.remove(this.modalRef.current);
-
       }
     }
   }

package/core/components/molecules/fullscreenModal/__stories__/Layering.story.tsx

@@ -23,7 +23,7 @@ export const layering = () => {
     setOpenSecondOverlay(!openSecondOverlay);
     action('on close triggered')();
     updateKnob('openSecondOverlay', !openSecondOverlay);
-  }
+  };
 
   const openModal = () => {
     setOpen(true);
@@ -100,7 +100,7 @@ export const layering = () => {
               children: 'Basic',
               appearance: 'basic',
               onClick: action('basic action'),
-            }
+            },
           ],
         }}
       >