@innovaccer/design-system 2.5.0-4 → 2.6.0

package/core/components/molecules/editableInput/EditableInput.tsx

@@ -98,14 +98,19 @@ export const EditableInput = (props: EditableInputProps) => {
 
   const onChangeHandler = (eventType: string) => {
     switch (eventType) {
-      case 'edit':
+      case 'edit': {
         inputRef.current?.focus();
         setEditing(true);
-      case 'hover':
         setShowComponent(true);
-        return;
-      case 'default':
+        break;
+      }
+      case 'hover': {
+        setShowComponent(true);
+        break;
+      }
+      case 'default': {
         setShowComponent(false);
+      }
     }
   };
 
@@ -114,6 +119,8 @@ export const EditableInput = (props: EditableInputProps) => {
       defaultValue={inputValue}
       placeholder={placeholder}
       className={InputClass}
+      // TODO(a11y)
+      // eslint-disable-next-line jsx-a11y/no-autofocus
       autoFocus={editing}
       size={size}
       onChange={onInputChangeHandler}
@@ -159,6 +166,8 @@ export const EditableInput = (props: EditableInputProps) => {
   };
 
   return (
+    // TODO(a11y)
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     <div data-test="DesignSystem-EditableInput" {...baseProps} className={EditableInputClass} onKeyDown={onKeyDown}>
       <Editable onChange={onChangeHandler} editing={editing}>
         {renderChildren()}

package/core/components/molecules/emptyState/EmptyState.tsx

@@ -75,7 +75,11 @@ export const EmptyState = (props: EmptyStateProps) => {
   return (
     <div data-test="DesignSystem-EmptyState" {...baseProps} className={WrapperClass}>
       {image && <div style={{ height: imageHeight[size] }}>{image}</div>}
-      {imageSrc && !image && <img src={imageSrc} height={imageHeight[size]} data-test="DesignSystem-EmptyState--Img" />}
+      {imageSrc && !image && (
+        //TODO(a11y)
+        //eslint-disable-next-line
+        <img src={imageSrc} height={imageHeight[size]} data-test="DesignSystem-EmptyState--Img" />
+      )}
       <Heading data-test="DesignSystem-EmptyState--Heading" size={HeadingSize[size]} className={HeadingClass}>
         {title}
       </Heading>

package/core/components/molecules/fileList/FileListItem.tsx

@@ -80,6 +80,8 @@ export const FileListItem = (props: FileListItemProps) => {
   };
 
   return (
+    // TODO(a11y)
+    //  eslint-disable-next-line
     <div {...baseProps} className={FileItemClass} onClick={onClickHandler} data-test="DesignSystem-FileListItem">
       <div className="FileItem-file">
         <div className="FileItem-fileContent">

package/core/components/molecules/fileUploader/FileUploaderItem.tsx

@@ -54,6 +54,8 @@ export const FileUploaderItem = (props: FileUploaderItemProps) => {
   );
 
   return (
+    // TODO(a11y)
+    //  eslint-disable-next-line
     <div
       {...baseProps}
       data-test="DesignSystem-FileUploader--Item"

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/inputMask/InputMask.tsx

@@ -235,7 +235,7 @@ export const InputMask = React.forwardRef<HTMLInputElement, InputMaskProps>((pro
     if (deferId.current) window.cancelAnimationFrame(deferId.current);
   };
 
-  const onClearHandler = (e: React.MouseEvent<HTMLElement>) => {
+  const onClearHandler = (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => {
     // setValue('');
     // window.requestAnimationFrame(() => ref.current!.blur());
     setValue(getPlaceholderValue());

package/core/components/molecules/inputMask/__tests__/__snapshots__/InputMask.test.tsx.snap

@@ -12,6 +12,7 @@ exports[`Input Mask component
       <div
         class="Input Input--regular"
         data-test="DesignSystem-InputWrapper"
+        role="presentation"
         style="min-width: 256px;"
       >
         <input

package/core/components/molecules/pagination/__tests__/__snapshots__/Pagination.test.tsx.snap

@@ -140,6 +140,7 @@ exports[`Pagination component
       <div
         class="MetricInput MetricInput--regular Pagination-MetricInput"
         data-test="DesignSystem-MetricInputWrapper"
+        role="presentation"
       >
         <input
           class="MetricInput-input MetricInput-input--regular"
@@ -150,19 +151,22 @@ exports[`Pagination component
         />
         <div
           class="MetricInput-arrowIcons"
-          tabindex="0"
         >
           <i
             class="material-icons material-icons-round Icon MetricInput-arrowIcon MetricInput-arrowIcon--regular MetricInput-arrowIcon--up"
             data-test="DesignSystem-MetricInput--upIcon"
+            role="button"
             style="font-size: 12px; width: 12px;"
+            tabindex="0"
           >
             keyboard_arrow_up_round
           </i>
           <i
             class="material-icons material-icons-round Icon MetricInput-arrowIcon MetricInput-arrowIcon--regular MetricInput-arrowIcon--down"
             data-test="DesignSystem-MetricInput--downIcon"
+            role="button"
             style="font-size: 12px; width: 12px;"
+            tabindex="0"
           >
             keyboard_arrow_down_round
           </i>

package/core/components/molecules/stepper/Step.tsx

@@ -30,6 +30,8 @@ export const Step = (props: StepProps) => {
   const appearance = active ? 'link' : disabled ? 'disabled' : 'default';
 
   return (
+    // TODO(a11y)
+    // eslint-disable-next-line
     <div data-test="DesignSystem-Step" className={StepClass} onClick={onClickHandle}>
       <Icon
         data-test="DesignSystem-Step--Icon"

package/core/components/molecules/tabs/Tabs.tsx

@@ -189,6 +189,8 @@ export const Tabs = (props: TabsProps) => {
     });
 
     return (
+      // TODO(a11y)
+      //  eslint-disable-next-line
       <div
         ref={(element) => element && !disabled && tabRefs.push(element)}
         data-test="DesignSystem-Tabs--Tab"

package/core/components/molecules/tabs/TabsWrapper.tsx

@@ -52,6 +52,8 @@ export const TabsWrapper = (props: TabsWrapperProps) => {
     });
 
     return (
+      // TODO(a11y)
+      //  eslint-disable-next-line
       <div
         data-test="DesignSystem-Tabs--Header"
         key={index}

package/core/components/molecules/tabs/__stories__/CustomLabels.story.tsx

@@ -54,7 +54,7 @@ const customCode = `() => {
 
   const onTabChangeHandler = (tabIndex) => {
     setActiveIndex(tabIndex);
-    console.log(\`\tab-change: \${tabIndex}\`)();
+    console.log(\`tab-change: \${tabIndex}\`)();
   };
 
   return (

package/core/components/molecules/verificationCodeInput/VerificationCodeInput.tsx

@@ -156,7 +156,7 @@ const VerificationCodeInput = (props: VerificationCodeInputProps) => {
     const prev = refs[prevIndex];
     const nextRef = refs[nextIndex];
     switch (e.key) {
-      case KEY_CODE.backspace:
+      case KEY_CODE.backspace: {
         e.preventDefault();
         const vals = [...values];
         if (values[index]) {
@@ -168,26 +168,30 @@ const VerificationCodeInput = (props: VerificationCodeInputProps) => {
           setValues(vals);
         }
         break;
-      case KEY_CODE.left:
+      }
+      case KEY_CODE.left: {
         e.preventDefault();
         if (prev && prev.current) {
           prev.current.focus({ preventScroll: true });
         }
         break;
-      case KEY_CODE.right:
+      }
+      case KEY_CODE.right: {
         e.preventDefault();
         if (nextRef && nextRef.current) {
           nextRef.current.focus({ preventScroll: true });
         }
         break;
+      }
       case KEY_CODE.up:
       case KEY_CODE.down:
       case KEY_CODE.e:
-      case KEY_CODE.E:
+      case KEY_CODE.E: {
         if (type === 'number') {
           e.preventDefault();
         }
         break;
+      }
       default:
         break;
     }

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { VerificationCodeInput, Label } from '@/index';
-import { select, text, boolean, number } from '@storybook/addon-knobs';
+import { select, text, boolean } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 
 // CSF format story
@@ -38,6 +38,8 @@ export const all = () => {
         placeholder={placeholder}
         error={error}
         pattern={pattern}
+        // TODO(a11y)
+        //  eslint-disable-next-line
         autoFocus={autoFocus}
       />
     </>

package/core/components/molecules/verificationCodeInput/__tests__/__snapshots__/VerificationCodeInput.test.tsx.snap

@@ -12,6 +12,7 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input"
         data-test="DesignSystem-InputWrapper"
+        role="presentation"
         style="min-width: 40px;"
       >
         <input