@innovaccer/design-system 2.3.0 → 2.4.0-0

package/core/components/atoms/dropdown/option/index.tsx

@@ -132,6 +132,7 @@ const Option = (props: OptionProps) => {
   if (props.optionRenderer) {
     return (
       <div
+        data-test="DesignSystem-DropdownOption--Custom"
         className={customOptionClass}
         data-disabled={disabled}
         onMouseEnter={onUpdateActiveOption}
@@ -153,7 +154,11 @@ const Option = (props: OptionProps) => {
     const iconAppearance = selected ? 'white' : 'disabled';
 
     if (typeof subInfo === 'string') {
-      return <Text appearance={labelAppearance}>{subInfo}</Text>;
+      return (
+        <Text data-test="DesignSystem-DropdownOption--WITH_META--Meta" appearance={labelAppearance}>
+          {subInfo}
+        </Text>
+      );
     }
 
     const { list = [], seperator } = subInfo;
@@ -164,6 +169,7 @@ const Option = (props: OptionProps) => {
         iconAppearance={iconAppearance}
         labelAppearance={labelAppearance}
         seperatorAppearance={iconAppearance}
+        data-test="DesignSystem-DropdownOption--WITH_META--MetaList"
       />
     );
   };

package/core/components/molecules/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap

@@ -116,6 +116,7 @@ exports[`Dialog component
     class="Backdrop Backdrop--open Backdrop-animation--open"
     data-layer="true"
     data-test="DesignSystem-Backdrop"
+    style="z-index: 1000;"
   />
 </body>
 `;
@@ -236,6 +237,7 @@ exports[`Dialog component
     class="Backdrop Backdrop--open Backdrop-animation--open"
     data-layer="true"
     data-test="DesignSystem-Backdrop"
+    style="z-index: 1000;"
   />
 </body>
 `;
@@ -356,6 +358,7 @@ exports[`Dialog component
     class="Backdrop Backdrop--open Backdrop-animation--open"
     data-layer="true"
     data-test="DesignSystem-Backdrop"
+    style="z-index: 1000;"
   />
 </body>
 `;
@@ -476,6 +479,7 @@ exports[`Dialog component
     class="Backdrop Backdrop--open Backdrop-animation--open"
     data-layer="true"
     data-test="DesignSystem-Backdrop"
+    style="z-index: 1000;"
   />
 </body>
 `;
@@ -596,6 +600,7 @@ exports[`Dialog component
     class="Backdrop Backdrop--open Backdrop-animation--open"
     data-layer="true"
     data-test="DesignSystem-Backdrop"
+    style="z-index: 1000;"
   />
 </body>
 `;
@@ -716,6 +721,7 @@ exports[`Dialog component
     class="Backdrop Backdrop--open Backdrop-animation--open"
     data-layer="true"
     data-test="DesignSystem-Backdrop"
+    style="z-index: 1000;"
   />
 </body>
 `;
@@ -836,6 +842,7 @@ exports[`Dialog component
     class="Backdrop Backdrop--open Backdrop-animation--open"
     data-layer="true"
     data-test="DesignSystem-Backdrop"
+    style="z-index: 1000;"
   />
 </body>
 `;
@@ -956,6 +963,7 @@ exports[`Dialog component
     class="Backdrop Backdrop--open Backdrop-animation--open"
     data-layer="true"
     data-test="DesignSystem-Backdrop"
+    style="z-index: 1000;"
   />
 </body>
 `;
@@ -1076,6 +1084,7 @@ exports[`Dialog component
     class="Backdrop Backdrop--open Backdrop-animation--open"
     data-layer="true"
     data-test="DesignSystem-Backdrop"
+    style="z-index: 1000;"
   />
 </body>
 `;
@@ -1196,6 +1205,7 @@ exports[`Dialog component
     class="Backdrop Backdrop--open Backdrop-animation--open"
     data-layer="true"
     data-test="DesignSystem-Backdrop"
+    style="z-index: 1000;"
   />
 </body>
 `;
@@ -1316,6 +1326,7 @@ exports[`Dialog component
     class="Backdrop Backdrop--open Backdrop-animation--open"
     data-layer="true"
     data-test="DesignSystem-Backdrop"
+    style="z-index: 1000;"
   />
 </body>
 `;
@@ -1436,6 +1447,7 @@ exports[`Dialog component
     class="Backdrop Backdrop--open Backdrop-animation--open"
     data-layer="true"
     data-test="DesignSystem-Backdrop"
+    style="z-index: 1000;"
   />
 </body>
 `;
@@ -1556,6 +1568,7 @@ exports[`Dialog component
     class="Backdrop Backdrop--open Backdrop-animation--open"
     data-layer="true"
     data-test="DesignSystem-Backdrop"
+    style="z-index: 1000;"
   />
 </body>
 `;

package/core/components/molecules/emptyState/__stories__/variants/noContentAvailable.story.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { EmptyState, Button } from '@/index';
+import { text } from '@storybook/addon-knobs';
+import noContent from '../assets/noContent.png';
+
+export const noContentAvailable = () => {
+  const title = text('title', 'Manage your outreach campaigns');
+  const description = text(
+    'description',
+    'Campaigns let you reach out to patients with text messages, emails and voice calls'
+  );
+  return (
+    <div className="h-100 pb-5" style={{ backgroundColor: 'var(--secondary-lightest)' }}>
+      <EmptyState title={title} description={description} imageSrc={noContent} size="large">
+        <Button size="large" appearance="primary">
+          Reload page
+        </Button>
+      </EmptyState>
+    </div>
+  );
+};
+
+export default {
+  title: 'Components/EmptyState/Variants/No Content Available',
+  component: EmptyState,
+};

package/core/components/molecules/emptyState/__stories__/variants/{smallSizeWithButton.story.tsx → noSearchResults.story.tsx}

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { EmptyState, Button, Card } from '@/index';
 import noSearch from '../assets/noSearch.png';
 
-export const smallSizeWithButton = () => {
+export const noSearchResults = () => {
   return (
     <Card className="py-5">
       <EmptyState
@@ -18,6 +18,6 @@ export const smallSizeWithButton = () => {
 };
 
 export default {
-  title: 'Components/EmptyState/Variants/Small Size With Button',
+  title: 'Components/EmptyState/Variants/No Search Results',
   component: EmptyState,
 };

package/core/components/molecules/emptyState/__stories__/variants/{largeSize.story.tsx → pageNotLoaded.story.tsx}

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { EmptyState, Button } from '@/index';
-import noContent from '../assets/noContent.png';
+import noContent from '../assets/pageNotLoaded.png';
 
-export const largeSize = () => (
+export const pageNotLoaded = () => (
   <div className="h-100 pb-5" style={{ backgroundColor: 'var(--secondary-lightest)' }}>
     <EmptyState
       title="There's a problem loading this page."
@@ -18,6 +18,6 @@ export const largeSize = () => (
 );
 
 export default {
-  title: 'Components/EmptyState/Variants/Large Size',
+  title: 'Components/EmptyState/Variants/Page Not Loaded',
   component: EmptyState,
 };

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

@@ -45,9 +45,17 @@ export const FileIcon = (props: FileIconProps) => {
   }, [status]);
 
   if (status === 'uploading') {
-    return <ProgressRing size="small" value={progress || 0} className={uploadingIconClass} />;
+    return (
+      <ProgressRing
+        size="small"
+        value={progress || 0}
+        className={uploadingIconClass}
+        data-test="DesignSystem-FileListItem--ProgressRing"
+      />
+    );
   }
-  return <Icon name={IconMapping[fileType]} className={iconClass} />;
+
+  return <Icon name={IconMapping[fileType]} className={iconClass} data-test="DesignSystem-FileListItem--Icon" />;
 };
 
 FileIcon.displayName = 'FileIcon';

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

@@ -80,16 +80,20 @@ export const FileListItem = (props: FileListItemProps) => {
   };
 
   return (
-    <div {...baseProps} className={FileItemClass} onClick={onClickHandler}>
+    <div {...baseProps} className={FileItemClass} onClick={onClickHandler} data-test="DesignSystem-FileListItem">
       <div className="FileItem-file">
         <div className="FileItem-fileContent">
           <FileIcon file={file} status={status} progress={progress} />
-          <Text className="FileItem-text" appearance={status === 'completed' ? 'default' : 'subtle'}>
+          <Text
+            data-test="DesignSystem-FileListItem--Name"
+            className="FileItem-text"
+            appearance={status === 'completed' ? 'default' : 'subtle'}
+          >
             {name}
           </Text>
         </div>
         <div className="FileItem-actions">
-          <Text className="FileItem-size" appearance={'subtle'}>
+          <Text className="FileItem-size" appearance={'subtle'} data-test="DesignSystem-FileListItem--Size">
             {fileSize || file.size}
           </Text>
           {!!actions && actions}

package/core/components/molecules/fileList/__stories__/__common__/fileListExample.tsx

@@ -18,6 +18,7 @@ export const fileList: FileListProps['fileList'] = [
       type: 'video',
     } as any),
     status: 'completed',
+    fileSize: '4 MB',
     id: 2,
   },
   {

package/core/components/molecules/fileList/__tests__/FileList.test.tsx

@@ -0,0 +1,115 @@
+import * as React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper';
+import { fileList } from '../__stories__/__common__/fileListExample';
+import { FileList, Button } from '@/index';
+import { FileListProps as Props } from '@/index.type';
+
+const FunctionValue = jest.fn();
+
+describe('FileList component', () => {
+  const mapper: Record<string, any> = {
+    fileList: valueHelper(fileList, { required: true }),
+    onClick: valueHelper(FunctionValue, { required: true }),
+    actionRenderer: valueHelper(FunctionValue, { required: true }),
+  };
+
+  const testFunc = (props: Record<string, any>): void => {
+    const attr = filterUndefined(props) as Props;
+
+    it(testMessageHelper(attr), () => {
+      const { asFragment } = render(<FileList {...attr} />);
+      expect(asFragment()).toMatchSnapshot();
+    });
+  };
+
+  testHelper(mapper, testFunc);
+});
+
+describe('FileList component', () => {
+  it('does not render if file list is empty', () => {
+    const { queryByTestId } = render(<FileList fileList={[]} />);
+    expect(queryByTestId('DesignSystem-FileListItem')).not.toBeInTheDocument();
+  });
+
+  it('renders list of files', () => {
+    const { getAllByTestId } = render(<FileList fileList={fileList} />);
+    expect(getAllByTestId('DesignSystem-FileListItem')).toHaveLength(fileList.length);
+  });
+
+  it('renders name of file', () => {
+    const { getAllByTestId } = render(<FileList fileList={fileList} />);
+    expect(getAllByTestId('DesignSystem-FileListItem--Name')[0].textContent).toMatch(fileList[0].file.name);
+  });
+
+  it('renders size of file', () => {
+    const { getAllByTestId } = render(<FileList fileList={fileList} />);
+    expect(getAllByTestId('DesignSystem-FileListItem--Size')[0].textContent).toMatch(`${fileList[0].file.size}`);
+    expect(getAllByTestId('DesignSystem-FileListItem--Size')[1].textContent).toMatch(`${fileList[1].fileSize}`);
+  });
+
+  it('renders file with status: completed', () => {
+    const { getAllByTestId } = render(<FileList fileList={fileList} />);
+    expect(getAllByTestId('DesignSystem-FileListItem--Icon')[0]).toHaveClass('FileIcon--animate');
+  });
+
+  it('renders file with status: uploading', () => {
+    const { getByTestId } = render(<FileList fileList={[fileList[0]]} />);
+    expect(getByTestId('DesignSystem-FileListItem--ProgressRing')).toBeInTheDocument();
+  });
+
+  it('renders file with status: error', () => {
+    const { getByTestId } = render(<FileList fileList={[fileList[2]]} />);
+    expect(getByTestId('DesignSystem-Caption').textContent).toMatch(`${fileList[2].errorMessage}`);
+    expect(getByTestId('DesignSystem-FileListItem--Name')).toHaveClass('Text--subtle');
+    expect(getByTestId('DesignSystem-FileListItem--Icon')).not.toHaveClass('FileIcon--animate');
+  });
+});
+
+describe('FileList component with prop: onClick', () => {
+  it('onClick callback is called', () => {
+    const { getAllByTestId } = render(<FileList fileList={fileList} onClick={FunctionValue} />);
+
+    const fileItem = getAllByTestId('DesignSystem-FileListItem')[0];
+    fireEvent.click(fileItem);
+    expect(FunctionValue).toHaveBeenCalled();
+  });
+});
+
+describe('FileList component with different file icons', () => {
+  it('renders video file icon', () => {
+    const { getByTestId } = render(<FileList fileList={[fileList[1]]} />);
+    expect(getByTestId('DesignSystem-FileListItem--Icon').textContent).toMatch('movie');
+  });
+
+  it('renders document file icon', () => {
+    const { getByTestId } = render(<FileList fileList={[fileList[3]]} />);
+    expect(getByTestId('DesignSystem-FileListItem--Icon').textContent).toMatch('insert_drive_file');
+  });
+
+  it('renders other file icon', () => {
+    const { getByTestId } = render(<FileList fileList={[fileList[4]]} />);
+    expect(getByTestId('DesignSystem-FileListItem--Icon').textContent).toMatch('text_snippet');
+  });
+});
+
+describe('FileList component with prop: actionRenderer', () => {
+  it('onClick callback is called', () => {
+    const { getAllByTestId } = render(
+      <FileList
+        fileList={fileList}
+        actionRenderer={() => (
+          <Button
+            appearance="transparent"
+            icon="close"
+            size="regular"
+            data-test="DesignSystem-FileList--Button"
+            className="cursor-pointer"
+          />
+        )}
+      />
+    );
+
+    expect(getAllByTestId('DesignSystem-FileList--Button')).toHaveLength(fileList.length);
+  });
+});

package/core/components/molecules/fileList/__tests__/__snapshots__/FileList.test.tsx.snap

@@ -0,0 +1,232 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FileList component 
+  fileList: [{"file":{"name":"Audio File.mp3","size":"3 MB","type":"audio"},"status":"uploading","progress":45,"id":1},{"file":{"name":"Video File.mp4","size":"3 MB","type":"video"},"status":"completed","fileSize":"4 MB","id":2},{"file":{"name":"Image File.jpeg","size":"3 MB","type":"image"},"status":"error","errorMessage":"Network failure","id":3},{"file":{"name":"Document File.pdf","size":"3 MB","type":"application"},"status":"completed","id":4},{"file":{"name":"Other File","size":"3 MB","type":"others"},"status":"completed"}], onClick: "[Function]", actionRenderer: "[Function]"
+ 1`] = `
+<DocumentFragment>
+  <div
+    class="Card Card--shadow-none"
+  >
+    <div
+      class="FileItem"
+      data-test="DesignSystem-FileListItem"
+    >
+      <div
+        class="FileItem-file"
+      >
+        <div
+          class="FileItem-fileContent"
+        >
+          <svg
+            class="Ring Ring--small FileIcon FileIcon--uploading"
+            data-test="DesignSystem-FileListItem--ProgressRing"
+            viewBox="0 0 50 50"
+          >
+            <circle
+              class="Ring-background"
+              cx="25"
+              cy="25"
+              fill="none"
+              r="20"
+              stroke-dasharray="125.66370614359172 125.66370614359172"
+              stroke-width="8"
+            />
+            <circle
+              class="Ring-indicator"
+              cx="25"
+              cy="25"
+              data-test="DesignSystem-ProgressRing--Circle"
+              fill="none"
+              r="20"
+              stroke-dasharray="125.66370614359172 125.66370614359172"
+              stroke-dashoffset="69.11503837897544"
+              stroke-width="8"
+            />
+          </svg>
+          <span
+            class="Text Text--subtle Text--regular FileItem-text"
+            data-test="DesignSystem-FileListItem--Name"
+          >
+            Audio File.mp3
+          </span>
+        </div>
+        <div
+          class="FileItem-actions"
+        >
+          <span
+            class="Text Text--subtle Text--regular FileItem-size"
+            data-test="DesignSystem-FileListItem--Size"
+          >
+            3 MB
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="FileItem"
+      data-test="DesignSystem-FileListItem"
+    >
+      <div
+        class="FileItem-file"
+      >
+        <div
+          class="FileItem-fileContent"
+        >
+          <i
+            class="material-icons material-icons-round Icon FileIcon FileIcon--animate FileIcon--video"
+            data-test="DesignSystem-FileListItem--Icon"
+            style="font-size: 16px; width: 16px;"
+          >
+            movie_round
+          </i>
+          <span
+            class="Text Text--default Text--regular FileItem-text"
+            data-test="DesignSystem-FileListItem--Name"
+          >
+            Video File.mp4
+          </span>
+        </div>
+        <div
+          class="FileItem-actions"
+        >
+          <span
+            class="Text Text--subtle Text--regular FileItem-size"
+            data-test="DesignSystem-FileListItem--Size"
+          >
+            4 MB
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="FileItem"
+      data-test="DesignSystem-FileListItem"
+    >
+      <div
+        class="FileItem-file"
+      >
+        <div
+          class="FileItem-fileContent"
+        >
+          <i
+            class="material-icons material-icons-round Icon FileIcon FileIcon--image"
+            data-test="DesignSystem-FileListItem--Icon"
+            style="font-size: 16px; width: 16px;"
+          >
+            image_round
+          </i>
+          <span
+            class="Text Text--subtle Text--regular FileItem-text"
+            data-test="DesignSystem-FileListItem--Name"
+          >
+            Image File.jpeg
+          </span>
+        </div>
+        <div
+          class="FileItem-actions"
+        >
+          <span
+            class="Text Text--subtle Text--regular FileItem-size"
+            data-test="DesignSystem-FileListItem--Size"
+          >
+            3 MB
+          </span>
+        </div>
+      </div>
+      <div
+        class="Caption FileItem-error"
+        data-test="DesignSystem-Caption"
+      >
+        <div
+          class="Caption-icon"
+        >
+          <i
+            class="material-icons material-icons-round Icon Icon--alert"
+            style="font-size: 14px; width: 14px;"
+          >
+            error_round
+          </i>
+        </div>
+        <span
+          class="Text Text--destructive Text--medium Text--small"
+          data-test="DesignSystem-Text"
+        >
+          Network failure
+        </span>
+      </div>
+    </div>
+    <div
+      class="FileItem"
+      data-test="DesignSystem-FileListItem"
+    >
+      <div
+        class="FileItem-file"
+      >
+        <div
+          class="FileItem-fileContent"
+        >
+          <i
+            class="material-icons material-icons-round Icon FileIcon FileIcon--animate FileIcon--application"
+            data-test="DesignSystem-FileListItem--Icon"
+            style="font-size: 16px; width: 16px;"
+          >
+            insert_drive_file_round
+          </i>
+          <span
+            class="Text Text--default Text--regular FileItem-text"
+            data-test="DesignSystem-FileListItem--Name"
+          >
+            Document File.pdf
+          </span>
+        </div>
+        <div
+          class="FileItem-actions"
+        >
+          <span
+            class="Text Text--subtle Text--regular FileItem-size"
+            data-test="DesignSystem-FileListItem--Size"
+          >
+            3 MB
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="FileItem"
+      data-test="DesignSystem-FileListItem"
+    >
+      <div
+        class="FileItem-file"
+      >
+        <div
+          class="FileItem-fileContent"
+        >
+          <i
+            class="material-icons material-icons-round Icon FileIcon FileIcon--animate FileIcon--others"
+            data-test="DesignSystem-FileListItem--Icon"
+            style="font-size: 16px; width: 16px;"
+          >
+            text_snippet_round
+          </i>
+          <span
+            class="Text Text--default Text--regular FileItem-text"
+            data-test="DesignSystem-FileListItem--Name"
+          >
+            Other File
+          </span>
+        </div>
+        <div
+          class="FileItem-actions"
+        >
+          <span
+            class="Text Text--subtle Text--regular FileItem-size"
+            data-test="DesignSystem-FileListItem--Size"
+          >
+            3 MB
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/core/components/molecules/inputMask/InputMask.tsx

@@ -214,10 +214,7 @@ export const InputMask = React.forwardRef<HTMLInputElement, InputMaskProps>((pro
     const newValue = maskedVal.slice(0, mask.length).join('');
     window.requestAnimationFrame(() => setCursorPosition(cursorPosition));
 
-    if (
-      Utils.validators.isValid(validators, newValue)
-      && newValue !== value
-    ) {
+    if (Utils.validators.isValid(validators, newValue) && newValue !== value) {
       setValue(newValue);
       if (onChange) onChange(e, newValue);
     }
@@ -265,7 +262,7 @@ export const InputMask = React.forwardRef<HTMLInputElement, InputMaskProps>((pro
   );
 
   return (
-    <div className={classes}>
+    <div className={classes} data-test="DesignSystem-InputMask--Wrapper">
       <Input
         {...rest}
         value={value}