@zohodesk/dot 1.0.0-temp-212 → 1.0.0-temp-200.8

package/es/Onboarding/css/Onboarding.module.css

@@ -2,6 +2,15 @@
   width: var(--zd_size360) ;
 }
 
+
+.positon_absolute{
+  position: absolute;
+}
+
+.positon_fixed{
+  position: fixed;
+}
+
 [dir=ltr] .mainContainerAnimation{
   transform-origin: 100% 100%;
   animation: scaleBounce var(--zd_transition4) cubic-bezier(0.5, 0.11, 0.15, 1.5) forwards;
@@ -41,6 +50,7 @@
   border-top-right-radius: inherit;
 }
 
+
 .mediaElement {
   width: 100% ;
   height: 100% ;
@@ -51,8 +61,10 @@
 }
 
 .image {
+  user-drag: none;
+  -webkit-user-drag: none;
   background-repeat: no-repeat;
-  background-size: cover;
+  background-size: cover; 
 }
 
 /* image filter layer */
@@ -450,7 +462,13 @@
 .carouselInner {
   transition: transform var(--zd_transition3) cubic-bezier(0.5, 0.11, 0.15, 1);
   width: 100% ;
-  transform: translate3d(var(--local_translate_movement), 0, 0)
+}
+[dir=ltr] .carouselInner {
+  transform: translateX(var(--local_translate_movement))
+  /*rtl:translateX(calc(var(--local_translate_movement) * -1))*/;
+}
+[dir=rtl] .carouselInner {
+  transform: translateX(calc(var(--local_translate_movement) * -1));
 }
 .carouselItem {
   width: 100% 

package/es/Onboarding/hooks/useOnboarding.js

@@ -1,6 +1,18 @@
+import { useRef } from 'react';
 import useMergeState from '@zohodesk/hooks/es/utils/useMergeState';
+import useDragger from "../../Hooks/Dragger/useDragger";
 
-const useOnboarding = props => {
+const useOnboarding = _ref => {
+  let {
+    dragBoundaryLimit,
+    isDraggable
+  } = _ref;
+  const dragRef = useRef(null);
+  useDragger({
+    isActive: isDraggable,
+    ChildRef: dragRef,
+    boundaryLimit: dragBoundaryLimit
+  });
   const [state, setState] = useMergeState({
     videoLookupLink: '',
     isVideoLookupOpen: false,
@@ -26,6 +38,7 @@ const useOnboarding = props => {
 
   return {
     state,
+    dragRef,
     openVideoLookup,
     closeVideoLookup
   };

package/es/Onboarding/hooks/useOnboardingSlider.js

@@ -4,11 +4,13 @@ const autoplayDelay = 50; // 5000ms divided by 100 for smoother animation
 const useOnboardingSlider = _ref => {
   let {
     isAutoPlayAnimation,
-    sliderData
+    sliderData,
+    animationClass
   } = _ref;
   const [currentSlide, setCurrentSlide] = useState(0);
   const [autoplay, setAutoplay] = useState(true);
   const progressRef = useRef(0);
+  const mainContainerEleRef = useRef(null);
   const totalSlidesArrayLen = sliderData.length;
   const handleSliderIndexChange = useCallback(index => {
     progressRef.current = 0;
@@ -16,15 +18,18 @@ const useOnboardingSlider = _ref => {
   }, []);
   const handleSliderNext = useCallback(() => {
     progressRef.current = 0;
-    setCurrentSlide(currentSlide + 1);
+    setCurrentSlide(prev => prev + 1);
     setAutoplay(false);
-  }, [currentSlide]);
+  }, []);
   const handleMouseEnter = useCallback(() => {
     setAutoplay(false);
   }, []);
   const handleMouseLeave = useCallback(() => {
     setAutoplay(true);
   }, []);
+  const handleAnimationEnd = useCallback(() => {
+    mainContainerEleRef.current && mainContainerEleRef.current.classList.remove(animationClass);
+  }, [animationClass]);
   useEffect(() => {
     let progressInterval;
 
@@ -45,10 +50,12 @@ const useOnboardingSlider = _ref => {
     sliderIndex: currentSlide,
     isAnimationPaused: !autoplay,
     translateMovementVal,
+    mainContainerEleRef,
     handleMouseEnter,
     handleMouseLeave,
     handleSliderIndexChange,
-    handleSliderNext
+    handleSliderNext,
+    handleAnimationEnd
   };
 };
 

package/es/Onboarding/props/defaultProps.js

@@ -1,6 +1,7 @@
 export const defaultProps = {
   ribbonText: "New",
   videoLookupCloseText: "Esc",
+  closeIconTooltip: "Close",
   isAutoPlayAnimation: true,
   customId: "onboarding",
   testId: 'onboarding',
@@ -9,5 +10,15 @@ export const defaultProps = {
   customProps: {},
   hasBouncAnimationOnMount: true,
   hasCloseIcon: true,
-  hasRibbon: true
+  hasRibbon: true,
+  tagAttributes: {},
+  a11yAttributes: {},
+  isDraggable: true,
+  position: "static",
+  dragBoundaryLimit: {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+  }
 };

package/es/Onboarding/props/propTypes.js

@@ -2,23 +2,34 @@ import PropTypes from 'prop-types';
 import FlexPropType from '@zohodesk/layout/es/Flex/props/propTypes';
 import { propTypes as RibbonPropType } from '@zohodesk/components/es/Ribbon/props/propTypes';
 import { propTypes as ButtonPropType } from '@zohodesk/components/es/Button/props/propTypes';
-import { propTypes as LinkPropType } from '../../Link/props/propTypes';
-import { propTypes as VideoLookupPropType } from '../../VideoLookup/props/propTypes';
+import { propTypes as LinkPropType } from "../../Link/props/propTypes";
+import { propTypes as VideoLookupPropType } from "../../VideoLookup/props/propTypes";
 import { propTypes as TypographyPropType } from '@zohodesk/components/es/Typography/props/propTypes';
 export const propTypes = {
   onClose: PropTypes.func,
   testId: PropTypes.string,
   hasRibbon: PropTypes.bool,
   customId: PropTypes.string,
+  position: PropTypes.string,
+  isDraggable: PropTypes.bool,
   ribbonText: PropTypes.string,
   hasCloseIcon: PropTypes.bool,
   customStyle: PropTypes.object,
+  tagAttributes: PropTypes.object,
+  a11yAttributes: PropTypes.object,
   hasExpandedButton: PropTypes.bool,
+  closeIconTooltip: PropTypes.string,
   isAutoPlayAnimation: PropTypes.bool,
   onPrimaryButtonClick: PropTypes.func,
   videoLookupCloseText: PropTypes.string,
   onSecondaryButtonClick: PropTypes.func,
   hasBouncAnimationOnMount: PropTypes.bool,
+  dragBoundaryLimit: PropTypes.shape({
+    top: PropTypes.number,
+    left: PropTypes.number,
+    right: PropTypes.number,
+    bottom: PropTypes.number
+  }),
   sliderData: PropTypes.arrayOf(PropTypes.shape({
     heading: PropTypes.string,
     imageSource: PropTypes.string,

package/es/PlusIcon/PlusIcon.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import style from './PlusIcon.module.css';
-import AvatarIcon from '../avatar/AvatarIcon/AvatarIcon';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import style from "./PlusIcon.module.css";
+import AvatarIcon from "../avatar/AvatarIcon/AvatarIcon";
 export default class PlusIcon extends React.Component {
   constructor(props) {
     super(props);

package/es/PlusIcon/__tests__/PlusIcon.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import PlusIcon from '../PlusIcon';
+import PlusIcon from "../PlusIcon";
 describe('PlusIcon', () => {
   const size = ['small', 'xsmall', 'xxsmall', 'medium', 'xmedium', 'xlarge'];
   test('renders with default props', () => {

package/es/PlusIcon/__tests__/__snapshots__/PlusIcon.spec.js.snap

@@ -15,7 +15,7 @@ exports[`PlusIcon renders with  size is  - medium 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -41,7 +41,7 @@ exports[`PlusIcon renders with  size is  - small 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -67,7 +67,7 @@ exports[`PlusIcon renders with  size is  - xlarge 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -93,7 +93,7 @@ exports[`PlusIcon renders with  size is  - xmedium 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -119,7 +119,7 @@ exports[`PlusIcon renders with  size is  - xsmall 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -145,7 +145,7 @@ exports[`PlusIcon renders with  size is  - xxsmall 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -171,7 +171,7 @@ exports[`PlusIcon renders with customClass prop 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -197,7 +197,7 @@ exports[`PlusIcon renders with dataId prop 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -223,7 +223,7 @@ exports[`PlusIcon renders with default props 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -249,7 +249,7 @@ exports[`PlusIcon renders with iconClass prop 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus   custom-icon-class icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus   custom-icon-class icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -275,7 +275,7 @@ exports[`PlusIcon renders with iconName prop 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -301,7 +301,7 @@ exports[`PlusIcon renders with iconSize prop 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -328,7 +328,7 @@ exports[`PlusIcon renders with title prop 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"

package/es/PlusIcon/props/propTypes.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { propTypes as AvatarIconProps } from '../../avatar/AvatarIcon/props/propTypes.js';
+import { propTypes as AvatarIconProps } from "../../avatar/AvatarIcon/props/propTypes.js";
 export const propTypes = {
   dataId: PropTypes.string,
   iconClass: PropTypes.string,

package/es/Separator/Separator.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import style from './Separator.module.css';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import style from "./Separator.module.css";
 export default class Separator extends React.Component {
   constructor(props) {
     super(props);

package/es/Separator/__tests__/Separator.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Separator from '../Separator';
+import Separator from "../Separator";
 describe('Separator', () => {
   const PALETTE = ['default', 'primary', 'secondary'];
   const TYPE = ['dot', 'slash', 'arrow', 'comma', 'none'];

package/es/TagWithIcon/TagWithIcon.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
 import { Container, Box } from '@zohodesk/components/es/Layout';
 import Icon from '@zohodesk/icons/es/Icon';
-import style from './TagWithIcon.module.css';
+import style from "./TagWithIcon.module.css";
 export default class TagWithIcon extends React.Component {
   render() {
     const {

package/es/TagWithIcon/__tests__/TagWithIcon.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import TagWithIcon from '../TagWithIcon';
+import TagWithIcon from "../TagWithIcon";
 describe('TagWithIcon', () => {
   test('rendering the defult props', () => {
     const {

package/es/ToastMessage/ToastMessage.js

@@ -1,16 +1,16 @@
 import React, { useState } from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes'; //components
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes"; //components
 
 import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
 import { Icon } from '@zohodesk/icons';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import { useZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
 import { useUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
-import AutoClose from '../actions/AutoClose';
+import AutoClose from "../actions/AutoClose";
 import a11yStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css'; //style
 
-import style from './ToastMessage.module.css';
+import style from "./ToastMessage.module.css";
 
 function ToastMessageUI(props) {
   let [messageState, setMessageState] = useState(props.messageState);

package/es/ToastMessage/__tests__/ToastMessage.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import ToastMessage from '../ToastMessage';
+import ToastMessage from "../ToastMessage";
 describe('ToastMessage', () => {
   test('rendering the defult props', () => {
     const {

package/es/Upload/Upload.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
 import { Icon } from '@zohodesk/icons';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
-import Image from '../Image/Image';
-import style from './Upload.module.css';
+import Image from "../Image/Image";
+import style from "./Upload.module.css";
 export default class Upload extends React.Component {
   render() {
     let {

package/es/Upload/__tests__/Upload.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Upload from '../Upload';
+import Upload from "../Upload";
 describe('Upload', () => {
   const mockOnRemove = jest.fn();
   const mockEleRef = jest.fn();

package/es/VideoLookup/VideoLookup.js

@@ -4,14 +4,14 @@ import Icon from '@zohodesk/icons/lib/Icon';
 import Button from '@zohodesk/components/es/Button/Button';
 import Typography from '@zohodesk/components/es/Typography/Typography';
 import { mergeStyle } from '@zohodesk/utils';
-import FreezeLayer from '../FreezeLayer/FreezeLayer';
+import FreezeLayer from "../FreezeLayer/FreezeLayer";
 /**propTypes**/
 
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
 /**** Styles ****/
 
-import defaultStyle from './css/VideoLookup.module.css';
+import defaultStyle from "./css/VideoLookup.module.css";
 export default function VideoLookup(props) {
   const {
     isOpened,

package/es/VideoLookup/__tests__/VideoLookup.spec.js

@@ -1,6 +1,13 @@
 import React from 'react';
-import { render } from '@testing-library/react';
-import VideoLookup from '../VideoLookup';
+import { render, cleanup } from '@testing-library/react';
+import { setGlobalId } from '@zohodesk/components/es/Provider/IdProvider';
+import VideoLookup from "../VideoLookup";
+beforeEach(() => {
+  setGlobalId(0);
+});
+afterEach(() => {
+  cleanup();
+});
 describe('VideoLookup', () => {
   test('rendering the defult props', () => {
     const {

package/es/actions/AutoClose.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
 export default function AutoClose(props) {
   let {
     Element,

package/es/alert/AlertHeader/AlertHeader.js

@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import Title from '../../lookup/header/Title/Title';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import Title from "../../lookup/header/Title/Title";
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import { Icon } from '@zohodesk/icons';
-import Close from '../../lookup/header/Close/Close';
-import style from './AlertHeader.module.css';
+import Close from "../../lookup/header/Close/Close";
+import style from "./AlertHeader.module.css";
 export default class AlertHeader extends Component {
   render() {
     let {

package/es/alert/AlertHeader/__tests__/AlertHeader.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import AlertHeader from '../AlertHeader';
+import AlertHeader from "../AlertHeader";
 describe('AlertHeader', () => {
   const mockOnClose = jest.fn();
   const iconTypes = ['delete', 'alert', 'remoteAssist', 'splitTicket', 'update'];

package/es/alert/AlertHeader/__tests__/__snapshots__/AlertHeader.spec.js.snap

@@ -770,7 +770,7 @@ exports[`AlertHeader renders with onClose function and closeTitle 1`] = `
       >
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-cross    "
+          class="zd_font_icons basic icon-cross   icon_button_center  "
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"

package/es/alert/AlertLookup/AlertLookup.js

@@ -1,17 +1,17 @@
 /**** Libraries ****/
 import React, { Component } from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
 /**** Components ****/
 
-import Lookup from '../../lookup/Lookup/Lookup';
-import AlertHeader from '../AlertHeader/AlertHeader';
+import Lookup from "../../lookup/Lookup/Lookup";
+import AlertHeader from "../AlertHeader/AlertHeader";
 import Button from '@zohodesk/components/lib/Button/Button';
-import Section from '../../lookup/Section/Section';
-import FormAction from '../../FormAction/FormAction';
+import Section from "../../lookup/Section/Section";
+import FormAction from "../../FormAction/FormAction";
 /**** CSS ****/
 
-import style from './AlertLookup.module.css';
+import style from "./AlertLookup.module.css";
 export default class AlertLookup extends Component {
   render() {
     let {

package/es/alert/AlertLookup/__tests__/AlertLookup.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import AlertLookup from '../AlertLookup';
+import AlertLookup from "../AlertLookup";
 describe('AlertLookup', () => {
   test('rendering the defult props', () => {
     const {

package/es/alert/index.js

@@ -1,2 +1,2 @@
-export { default as AlertHeader } from './AlertHeader/AlertHeader';
-export { default as AlertLookup } from './AlertLookup/AlertLookup';
+export { default as AlertHeader } from "./AlertHeader/AlertHeader";
+export { default as AlertLookup } from "./AlertLookup/AlertLookup";

package/es/avatar/AvatarClose/AvatarClose.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
 import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
 import { Icon } from '@zohodesk/icons';
-import style from './AvatarClose.module.css';
+import style from "./AvatarClose.module.css";
 export default class AvatarClose extends React.Component {
   constructor(props) {
     super(props);

package/es/avatar/AvatarClose/__tests__/AvatarClose.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import AvatarClose from '../AvatarClose';
+import AvatarClose from "../AvatarClose";
 describe('AvatarClose', () => {
   test('rendering the defult props', () => {
     const {

package/es/avatar/AvatarCollision/AvatarCollision.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
 import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
 import { Icon } from '@zohodesk/icons';
-import style from './AvatarCollision.module.css';
+import style from "./AvatarCollision.module.css";
 export default class AvatarCollision extends React.Component {
   constructor(props) {
     super(props);

package/es/avatar/AvatarCollision/__tests__/AvatarCollision.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import AvatarCollision from '../AvatarCollision';
+import AvatarCollision from "../AvatarCollision";
 describe('AvatarCollision', () => {
   test('rendering the defult props', () => {
     const {