@innovaccer/design-system 2.5.0-2 → 2.5.1

package/core/components/molecules/dropzone/__tests__/Dropzone.test.tsx

@@ -7,33 +7,29 @@ import DropzoneError from '../DropzoneError';
 import { fromEvent } from '../FileSelectorUtils';
 
 const formatLabel = 'Accepted formats: PDF, JPG';
-const sizeLabel = 'Maximum size: 30 MB'
+const sizeLabel = 'Maximum size: 30 MB';
 const BooleanValue = [true, false];
 const FunctionValue = jest.fn();
 
 const fileData = {
   dataTransfer: {
     files: [new File(['(⌐□_□)'], 'file1.png')],
-    types: ['Files']
+    types: ['Files'],
   },
-  size: 1024
-}
+  size: 1024,
+};
 
 const multipleFileData = {
   dataTransfer: {
     files: [new File(['(⌐□_□)'], 'file1.png'), new File(['(⌐□_□)'], 'file2.jpeg')],
-    types: ['Files']
+    types: ['Files'],
   },
-  size: 2048
-}
+  size: 2048,
+};
 
 const minSize = 50;
 const maxSize = 300;
-const types: Type[] = [
-  'standard',
-  'compressed',
-  'tight'
-];
+const types: Type[] = ['standard', 'compressed', 'tight'];
 
 describe('Dropzone component snapshot', () => {
   const mapper: Record<string, any> = {
@@ -47,11 +43,7 @@ describe('Dropzone component snapshot', () => {
     const attr = filterUndefined(props) as Props;
 
     it(testMessageHelper(attr), () => {
-      const { asFragment } = render(
-        <Dropzone
-          {...attr}
-        />
-      );
+      const { asFragment } = render(<Dropzone {...attr} />);
       expect(asFragment()).toMatchSnapshot();
     });
   };
@@ -72,11 +64,7 @@ describe('Dropzone component snapshot', () => {
     const attr = filterUndefined(props) as Props;
 
     it(testMessageHelper(attr), () => {
-      const { asFragment } = render(
-        <Dropzone
-          {...attr}
-        />
-      );
+      const { asFragment } = render(<Dropzone {...attr} />);
       expect(asFragment()).toMatchSnapshot();
     });
   };
@@ -86,24 +74,24 @@ describe('Dropzone component snapshot', () => {
 
 describe('Dropzone component', () => {
   it('renders prop:formatLabel', () => {
-    const { getAllByTestId } = render(<Dropzone formatLabel={formatLabel} />)
-    expect(getAllByTestId('DesignSystem-Text')[2]).toHaveTextContent(formatLabel)
+    const { getAllByTestId } = render(<Dropzone formatLabel={formatLabel} />);
+    expect(getAllByTestId('DesignSystem-Text')[2]).toHaveTextContent(formatLabel);
   });
 
   it('renders prop:sizeLabel', () => {
-    const { getAllByTestId } = render(<Dropzone sizeLabel={sizeLabel} />)
-    expect(getAllByTestId('DesignSystem-Text')[2]).toHaveTextContent(sizeLabel)
+    const { getAllByTestId } = render(<Dropzone sizeLabel={sizeLabel} />);
+    expect(getAllByTestId('DesignSystem-Text')[2]).toHaveTextContent(sizeLabel);
   });
 
   it('renders prop:sizeLabel & prop:formatLabel', () => {
-    const { getAllByTestId } = render(<Dropzone sizeLabel={sizeLabel} formatLabel={formatLabel} />)
-    expect(getAllByTestId('DesignSystem-Text')[2]).toHaveTextContent(formatLabel)
-    expect(getAllByTestId('DesignSystem-Text')[3]).toHaveTextContent(sizeLabel)
+    const { getAllByTestId } = render(<Dropzone sizeLabel={sizeLabel} formatLabel={formatLabel} />);
+    expect(getAllByTestId('DesignSystem-Text')[2]).toHaveTextContent(formatLabel);
+    expect(getAllByTestId('DesignSystem-Text')[3]).toHaveTextContent(sizeLabel);
   });
 
   it('check for prop:disabled', () => {
-    const { getByTestId } = render(<Dropzone disabled={true} />)
-    expect(getByTestId('DesignSystem-Dropzone')).toHaveClass('Dropzone--disabled')
+    const { getByTestId } = render(<Dropzone disabled={true} />);
+    expect(getByTestId('DesignSystem-Dropzone')).toHaveClass('Dropzone--disabled');
   });
 });
 
@@ -121,15 +109,11 @@ describe('Dropzone component prop:sampleFileLink', () => {
   it('check for sampleFileLink element', () => {
     const { getByTestId } = render(
       <Dropzone
-        sampleFileLink={(
-          <Link
-            href=""
-            download="Test.pdf"
-            target="_blank"
-          >
+        sampleFileLink={
+          <Link href="" download="Test.pdf" target="_blank">
             Download sample file
           </Link>
-        )}
+        }
       />
     );
     expect(getByTestId('DesignSystem-Link')).toBeInTheDocument();
@@ -137,80 +121,46 @@ describe('Dropzone component prop:sampleFileLink', () => {
 });
 
 describe('Dropzone component event handlers', () => {
-
   it('checks for onDragLeave event', () => {
-    const { getByTestId } = render(
-      <Dropzone
-        onDragLeave={FunctionValue}
-        accept="image/png"
-      />
-    );
+    const { getByTestId } = render(<Dropzone onDragLeave={FunctionValue} accept="image/png" />);
     fireEvent.dragLeave(getByTestId('DesignSystem-Dropzone'), fileData);
     expect(FunctionValue).toHaveBeenCalled();
   });
 
   it('checks for onDragEnter event', () => {
     const { getByTestId } = render(
-      <Dropzone
-        onDragLeave={FunctionValue}
-        accept="image/png"
-        maxSize={maxSize}
-        minSize={minSize}
-        multiple={false}
-      />
+      <Dropzone onDragLeave={FunctionValue} accept="image/png" maxSize={maxSize} minSize={minSize} multiple={false} />
     );
     fireEvent.dragEnter(getByTestId('DesignSystem-Dropzone'), fileData);
     expect(FunctionValue).toHaveBeenCalled();
   });
 
   it('checks for onDragOver event', () => {
-    const { getByTestId } = render(
-      <Dropzone
-        onDragOver={FunctionValue}
-        accept="image/png"
-      />
-    );
+    const { getByTestId } = render(<Dropzone onDragOver={FunctionValue} accept="image/png" />);
     fireEvent.dragOver(getByTestId('DesignSystem-Dropzone'), fileData);
     expect(FunctionValue).toHaveBeenCalled();
   });
 
   it('checks for onDrop event', () => {
-    const { getByTestId } = render(
-      <Dropzone
-        onDrop={FunctionValue}
-        accept="image/png"
-      />
-    );
+    const { getByTestId } = render(<Dropzone onDrop={FunctionValue} accept="image/png" />);
     fireEvent.drop(getByTestId('DesignSystem-Dropzone'), fileData);
     expect(FunctionValue).toHaveBeenCalled();
   });
 
   it('checks for onDropAccepted event', () => {
-    const { getByTestId } = render(
-      <Dropzone
-        onDropAccepted={FunctionValue}
-        accept="image/png"
-      />
-    );
+    const { getByTestId } = render(<Dropzone onDropAccepted={FunctionValue} accept="image/png" />);
     fireEvent.drop(getByTestId('DesignSystem-Dropzone'), fileData);
     expect(FunctionValue).toHaveBeenCalled();
   });
 
   it('checks for onDropRejected	event', () => {
-    const { getByTestId } = render(
-      <Dropzone
-        onDropRejected={FunctionValue}
-        accept="image/jpeg"
-      />);
+    const { getByTestId } = render(<Dropzone onDropRejected={FunctionValue} accept="image/jpeg" />);
     fireEvent.drop(getByTestId('DesignSystem-Dropzone'), fileData);
     expect(FunctionValue).toHaveBeenCalled();
   });
 
   it('check for browse file onOpenDialog option', () => {
-    const { getAllByTestId } = render(
-      <Dropzone
-        onDropAccepted={FunctionValue}
-      />);
+    const { getAllByTestId } = render(<Dropzone onDropAccepted={FunctionValue} />);
 
     fireEvent.click(getAllByTestId('DesignSystem-Text')[1]);
     fireEvent.focus(window);
@@ -219,40 +169,28 @@ describe('Dropzone component event handlers', () => {
 
   it('check for browse file onCloseDialog option', () => {
     const { getAllByTestId, getByTestId } = render(
-      <Dropzone
-        onFileDialogCancel={FunctionValue}
-        onDragEnter={FunctionValue}
-      />);
+      <Dropzone onFileDialogCancel={FunctionValue} onDragEnter={FunctionValue} />
+    );
 
     fireEvent.dragEnter(getByTestId('DesignSystem-Dropzone'), fileData);
     fireEvent.click(getAllByTestId('DesignSystem-Text')[1]);
     fireEvent.focus(window);
-    fireEvent.keyDown(window, { key: 'Escape', code: 'Escape' })
+    fireEvent.keyDown(window, { key: 'Escape', code: 'Escape' });
 
     expect(FunctionValue).toHaveBeenCalled();
   });
 });
 
 describe('dropzone component prop:multiple', () => {
-
   it('renders component when multiple=false', () => {
-    const { getByTestId } = render(
-      <Dropzone
-        onDropRejected={FunctionValue}
-        multiple={false}
-      />
-    );
+    const { getByTestId } = render(<Dropzone onDropRejected={FunctionValue} multiple={false} />);
 
     fireEvent.drop(getByTestId('DesignSystem-Dropzone'), multipleFileData);
     expect(FunctionValue).toHaveBeenCalled();
   });
 
   it('renders component when multiple=true', () => {
-    const { getByTestId } = render(
-      <Dropzone
-        onDrop={FunctionValue}
-        multiple={true}
-      />);
+    const { getByTestId } = render(<Dropzone onDrop={FunctionValue} multiple={true} />);
 
     fireEvent.drop(getByTestId('DesignSystem-Dropzone'), multipleFileData);
 
@@ -262,12 +200,7 @@ describe('dropzone component prop:multiple', () => {
 
 describe('dropzone component prop:accept', () => {
   it('checks when prop:accept is passed as an array', () => {
-    const { getByTestId } = render(
-      <Dropzone
-        onDrop={FunctionValue}
-        multiple={true}
-        accept={['image/png']}
-      />);
+    const { getByTestId } = render(<Dropzone onDrop={FunctionValue} multiple={true} accept={['image/png']} />);
 
     fireEvent.drop(getByTestId('DesignSystem-Dropzone'), multipleFileData);
 
@@ -284,7 +217,8 @@ describe('dropzone component prop:Size', () => {
         minSize={minSize}
         multiple={false}
         accept="image/jpeg"
-      />);
+      />
+    );
 
     fireEvent.drop(getByTestId('DesignSystem-Dropzone'), fileData);
     expect(FunctionValue).toHaveBeenCalled();
@@ -298,7 +232,8 @@ describe('dropzone component prop:Size', () => {
         minSize={minSize + 2000}
         multiple={false}
         accept="image/jpeg"
-      />);
+      />
+    );
 
     fireEvent.drop(getByTestId('DesignSystem-Dropzone'), fileData);
     expect(FunctionValue).toHaveBeenCalled();
@@ -307,13 +242,12 @@ describe('dropzone component prop:Size', () => {
 
 describe('DropzoneError Component', () => {
   it('check for error message', () => {
-    const { getByTestId } = render(<DropzoneError error="File Type Not Supported" type="standard" />)
-    expect(getByTestId('DesignSystem-Text')).toHaveTextContent('File Type Not Supported')
+    const { getByTestId } = render(<DropzoneError error="File Type Not Supported" type="standard" />);
+    expect(getByTestId('DesignSystem-Text')).toHaveTextContent('File Type Not Supported');
   });
 });
 
 describe('dropzone component prop:getFilesFromEvent', () => {
-
   it('checks for onDragEnter event', () => {
     const { getByTestId } = render(
       <Dropzone
@@ -323,7 +257,8 @@ describe('dropzone component prop:getFilesFromEvent', () => {
         getFilesFromEvent={fromEvent}
         minSize={minSize}
         maxSize={maxSize}
-      />);
+      />
+    );
 
     fireEvent.dragEnter(getByTestId('DesignSystem-Dropzone'), {});
     expect(FunctionValue).toHaveBeenCalled();
@@ -337,7 +272,8 @@ describe('dropzone component prop:getFilesFromEvent', () => {
         accept={['image/jpeg']}
         minSize={minSize}
         maxSize={maxSize}
-      />);
+      />
+    );
 
     fireEvent.dragEnter(getByTestId('DesignSystem-Dropzone'), fileData);
     expect(FunctionValue).toHaveBeenCalled();
@@ -353,9 +289,9 @@ describe('dropzone component prop:getFilesFromEvent', () => {
         minSize={minSize}
         maxSize={maxSize}
       />
-    )
+    );
     fireEvent.drop(getByTestId('DesignSystem-Dropzone'), fileData);
     expect(getByTestId('DesignSystem-Dropzone')).toBeInTheDocument();
     expect(FunctionValue).toHaveBeenCalled();
-  })
+  });
 });

package/core/components/molecules/dropzone/__tests__/Utilities.test.tsx

@@ -4,22 +4,22 @@ import { reducer, isIeOrEdge, isKindFile, isPropagationStopped } from '../utils'
 const fileData = {
   dataTransfer: {
     files: [new File(['(⌐□_□)'], 'file1.png')],
-    types: ['Files']
+    types: ['Files'],
   },
-  size: 1024
-}
+  size: 1024,
+};
 
 const options = {
   files: [fileData],
   accept: 'images/jpeg',
   minSize: 100,
   maxSize: 200,
-  multiple: false
-}
+  multiple: false,
+};
 
 const event = {
-  cancelBubble: false
-}
+  cancelBubble: false,
+};
 
 const Actions = ['focus', 'blur', 'closeDialog', 'default'];
 
@@ -28,24 +28,24 @@ test('dropzone component: check for fileError function', () => {
 });
 
 test('dropzone component: check for fileError function', () => {
-  options.files = [fileData, fileData]
+  options.files = [fileData, fileData];
   expect(getFileError(options));
 });
 
 describe('dropzone component: check for reducers', () => {
   Actions.forEach((actionItem) => {
-    const state = 'state'
-    const action = { type: actionItem }
-    expect(reducer(state, action))
+    const state = 'state';
+    const action = { type: actionItem };
+    expect(reducer(state, action));
   });
 });
 
 test('dropzone component: check for browser compatibility', () => {
-  expect(isIeOrEdge(window.navigator.userAgent))
+  expect(isIeOrEdge(window.navigator.userAgent));
 });
 
 test('dropzone component: checks isKindFile function', () => {
-  expect(isKindFile({ options }))
+  expect(isKindFile({ options }));
 });
 
 test('dropzone component: checks for isPropagationStopped function', () => {

package/core/components/molecules/editableChipInput/EditableChipInput.tsx

@@ -165,7 +165,9 @@ export const EditableChipInput = (props: EditableChipInputProps) => {
             icon="clear"
             className="mr-3"
             size="tiny"
-            onClick={() => { setDefaultComponent(value); }}
+            onClick={() => {
+              setDefaultComponent(value);
+            }}
           />
           <Button
             data-test="DesignSystem-EditableChipInput--SaveButton"

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

@@ -147,8 +147,8 @@ export const EditableInput = (props: EditableInputProps) => {
           </Text>
         </Popover>
       ) : (
-          inputComponent
-        );
+        inputComponent
+      );
     }
 
     return (
@@ -169,7 +169,9 @@ export const EditableInput = (props: EditableInputProps) => {
             icon="clear"
             className="mr-3"
             size="tiny"
-            onClick={() => { setDefaultComponent(value) }}
+            onClick={() => {
+              setDefaultComponent(value);
+            }}
             data-test="DesignSystem-EditableInput--Discard"
           />
           <Button

package/core/components/molecules/editableInput/__stories__/variants/Uncontrolled.story.tsx

@@ -5,7 +5,7 @@ import { EditableInput } from '@/index';
 export const uncontrolled = () => {
   return (
     <div style={{ width: 'var(--spacing-9)' }}>
-      <EditableInput placeholder="First Name"/>
+      <EditableInput placeholder="First Name" />
     </div>
   );
 };

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

@@ -157,9 +157,7 @@ describe('EditableInput component with action buttons and props: value and input
   it('save changes and editable input is uncontrolled', () => {
     const updatedValue = 'Design System';
 
-    const { getByTestId, queryByTestId } = render(
-      <EditableInput placeholder={StringValue} onChange={onChange} />
-    );
+    const { getByTestId, queryByTestId } = render(<EditableInput placeholder={StringValue} onChange={onChange} />);
 
     const editableWrapper = getByTestId(editableWrapperTestId);
     fireEvent.click(editableWrapper);

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
 import { EmptyState, Button } from '@/index';
-import { EmptyStateProps as Props, HeadingProps, TextProps } from '@/index.type';
+import { EmptyStateProps as Props, HeadingProps } from '@/index.type';
 import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper';
 
 const sizes: Props['size'][] = ['large', 'small'];
@@ -15,10 +15,6 @@ const HeadingSize: Record<Props['size'], HeadingProps['size']> = {
   small: 'm',
 };
 
-const textSize: Record<Props['size'], TextProps['size']> = {
-  large: 'large',
-  small: 'regular',
-};
 const title = 'Manage your outreach campaigns';
 const description = 'Campaigns let you reach out to patients with text messages, emails and voice calls';
 const imageSrc = 'noContent';
@@ -99,8 +95,8 @@ describe('EmptyState with prop: size', () => {
       expect(getByTestId('DesignSystem-EmptyState--Text')).toHaveClass(
         `EmptyState-description EmptyState-description--${size}`
       );
-      expect(getByTestId('DesignSystem-EmptyState--Heading')).toHaveStyle(`fontSize:${HeadingSize[size]}px`);
-      expect(getByTestId('DesignSystem-EmptyState--Text')).toHaveStyle(`fontSize: ${textSize[size]}px`);
+      expect(getByTestId('DesignSystem-EmptyState--Heading')).toHaveClass(`Heading--${HeadingSize[size]}`);
+      expect(getByTestId('DesignSystem-EmptyState--Text')).toHaveClass(`EmptyState-description--${size}`);
       expect(getByTestId('DesignSystem-EmptyState--Img')).toHaveAttribute('height', imageHeight[size]);
     });
   });

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

@@ -54,7 +54,12 @@ export const FileUploaderItem = (props: FileUploaderItemProps) => {
   );
 
   return (
-    <div {...baseProps} data-test="DesignSystem-FileUploader--Item" className={FileItemClass} onClick={() => onClick && onClick(file, id)}>
+    <div
+      {...baseProps}
+      data-test="DesignSystem-FileUploader--Item"
+      className={FileItemClass}
+      onClick={() => onClick && onClick(file, id)}
+    >
       <div className="FileUploaderItem-file">
         <Text className="FileUploaderItem-text" appearance={status === 'completed' ? 'default' : 'subtle'}>
           {name}
@@ -67,7 +72,13 @@ export const FileUploaderItem = (props: FileUploaderItemProps) => {
             progress={progress}
             onRetry={() => onRetry && onRetry(file, id)}
           />
-          <Button data-test="DesignSystem-FileUploader--CancelButton" appearance="transparent" size="regular" onClick={() => onDelete && onDelete(file, id)} icon="close" />
+          <Button
+            data-test="DesignSystem-FileUploader--CancelButton"
+            appearance="transparent"
+            size="regular"
+            onClick={() => onDelete && onDelete(file, id)}
+            icon="close"
+          />
         </div>
       </div>
       {status === 'error' && <Caption error={true}>{errorMessage}</Caption>}