@zohodesk/dot 1.7.12 → 1.7.14

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;
@@ -18,13 +20,16 @@ const useOnboardingSlider = _ref => {
     progressRef.current = 0;
     setCurrentSlide(currentSlide + 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

@@ -10,15 +10,26 @@ export const propTypes = {
   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/__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/VideoLookup/__tests__/VideoLookup.spec.js

@@ -1,6 +1,13 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+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/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/avatar/AvatarIcon/AvatarIcon.js

@@ -29,7 +29,7 @@ export default class AvatarIcon extends React.Component {
     } = customProps;
     let border = borderOnHover || onClick;
     return /*#__PURE__*/React.createElement(Container, {
-      className: `${style.container} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''} ${AvatarSize(size)} ${style[palette]} ${className}`,
+      className: `${style.container} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''} ${AvatarSize(size)} ${style[palette] ? style[palette] : ''} ${className}`,
       onClick: onClick,
       dataId: dataId,
       "data-title": title,
@@ -41,7 +41,7 @@ export default class AvatarIcon extends React.Component {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: name,
       size: iconSize,
-      iconClass: ` ${iconClass} ${style.iconColor} ${iconColor ? ` ${style[`icon_${iconColor}`]}` : ''} `,
+      iconClass: ` ${iconClass} ${style.avatar_align_center}  ${style.iconColor} ${iconColor ? ` ${style[`icon_${iconColor}`] ? style[`icon_${iconColor}`] : ''}` : ''} `,
       isBold: isIconBold
     }));
   }

package/es/avatar/AvatarIcon/AvatarIcon.module.css

@@ -56,3 +56,6 @@
   --icon_color: var(--zdt_avatarIcon_dark_icon);
 }
 
+.avatar_align_center {
+  composes: tcenter from '~@zohodesk/components/lib/common/common.module.css';
+}

package/es/avatar/AvatarIcon/__tests__/__snapshots__/AvatarIcon.spec.js.snap

@@ -10,7 +10,7 @@ exports[`AvatarIcon rendering the defult props 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-add-ag    iconColor  undefined   "
+      class="zd_font_icons basic icon-add-ag    avatar_align_center  iconColor     "
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/es/emptystate/CommonEmptyState/CommonEmptyState.module.css

@@ -54,12 +54,12 @@
 .desc{
   word-wrap: break-word;
 }
-[dir=ltr] .linkDesc, [dir=ltr] .desc {
-  margin-right: var(--zd_size4) ;
-}
-[dir=rtl] .linkDesc, [dir=rtl] .desc {
+[dir=ltr] .linkDesc+.link, [dir=ltr] .desc+.link {
   margin-left: var(--zd_size4) ;
 }
+[dir=rtl] .linkDesc+.link, [dir=rtl] .desc+.link {
+  margin-right: var(--zd_size4) ;
+}
 .small .desc {
   line-height: 1.584;
 }
@@ -68,7 +68,6 @@
 }
 .link {
   color: var(--linkColor);
-  display: inline-block;
   cursor: pointer;
 }
 .link:hover {

package/es/form/fields/TagsMultiSelect/TagsMultiSelect.module.css

@@ -114,3 +114,7 @@
 .newTagText {
   color: var(--zdt_tagsmultiselect_more_text);
 }
+
+.searchEmpty{
+  padding:0 var(--zd_size10) 
+}

package/es/list/ListStencils/__tests__/__snapshots__/ListStencils.spec.js.snap

@@ -15,7 +15,7 @@ exports[`ListStencils customId and testId 1`] = `
         class="avatar"
       >
         <div
-          class="container circle clarge primary "
+          class="container animate circle size_large primary "
         />
       </div>
       <div
@@ -28,14 +28,14 @@ exports[`ListStencils customId and testId 1`] = `
             class="primaryRow"
           >
             <div
-              class="container rectangular default primary "
+              class="container animate rect default primary "
             />
           </div>
           <div
             class="secondaryRow"
           >
             <div
-              class="container rectangular medium primary "
+              class="container animate rect medium primary "
             />
           </div>
         </div>
@@ -58,7 +58,7 @@ exports[`ListStencils rendering the defult props 1`] = `
         class="avatar"
       >
         <div
-          class="container circle clarge primary "
+          class="container animate circle size_large primary "
         />
       </div>
       <div
@@ -71,14 +71,14 @@ exports[`ListStencils rendering the defult props 1`] = `
             class="primaryRow"
           >
             <div
-              class="container rectangular default primary "
+              class="container animate rect default primary "
             />
           </div>
           <div
             class="secondaryRow"
           >
             <div
-              class="container rectangular medium primary "
+              class="container animate rect medium primary "
             />
           </div>
         </div>

package/es/lookup/header/Close/__tests__/__snapshots__/Close.spec.js.snap

@@ -12,7 +12,7 @@ exports[`AlphabeticList rendering the defult props 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/lookup/header/TicketHeader/__tests__/__snapshots__/TicketHeader.spec.js.snap

@@ -46,7 +46,7 @@ exports[`TicketHeader rendering the defult props 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/lib/ActionButton/__tests__/ActionButton.spec.js

@@ -6,10 +6,18 @@ var _react2 = require("@testing-library/react");
 
 require("@testing-library/jest-dom");
 
+var _IdProvider = require("@zohodesk/components/es/Provider/IdProvider");
+
 var _ActionButton = _interopRequireDefault(require("../ActionButton"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+beforeEach(function () {
+  (0, _IdProvider.setGlobalId)(0);
+});
+afterEach(function () {
+  (0, _react2.cleanup)();
+});
 describe('ActionButton', function () {
   var palettes = ['primaryFilled', 'primary'];
   var sizes = ['small', 'medium', 'large'];

package/lib/AttachmentViewer/__tests__/AttachmentViewer.spec.js

@@ -4,10 +4,18 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
+var _IdProvider = require("@zohodesk/components/es/Provider/IdProvider");
+
 var _AttachmentViewer = _interopRequireDefault(require("../AttachmentViewer"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+beforeEach(function () {
+  (0, _IdProvider.setGlobalId)(0);
+});
+afterEach(function () {
+  (0, _react2.cleanup)();
+});
 describe('AttachmentViewer', function () {
   test('rendering the defult props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AttachmentViewer["default"], {

package/lib/AttachmentViewer/__tests__/__snapshots__/AttachmentViewer.spec.js.snap

@@ -87,7 +87,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                     >
                       <i
                         aria-hidden="true"
-                        class="zd_font_icons basic icon-download    "
+                        class="zd_font_icons basic icon-download   icon_button_center  "
                         data-id="fontIcon"
                         data-selector-id="fontIcon"
                         data-test-id="fontIcon"
@@ -111,7 +111,7 @@ exports[`AttachmentViewer rendering the when isActive is true  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"
@@ -369,7 +369,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-hideTab  thumpIcon thumpIconActive  "
+            class="zd_font_icons basic icon-hideTab  thumpIcon thumpIconActive icon_button_center  "
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"

package/lib/DotProvider/__tests__/DotProvider.spec.js

@@ -6,6 +6,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
+var _IdProvider = require("@zohodesk/components/es/Provider/IdProvider");
+
 var _DotProvider = _interopRequireDefault(require("../DotProvider"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -16,7 +18,13 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try
 
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 
-// snapshot test cases
+beforeEach(function () {
+  (0, _IdProvider.setGlobalId)(0);
+});
+afterEach(function () {
+  (0, _react2.cleanup)();
+}); // snapshot test cases
+
 describe('DotProvider Snapshot', function () {
   var THEME_APPEARANCE = ['light', 'dark', 'pureDark'];
   var THEME_COLOR = ['blue', 'green', 'orange', 'red', 'yellow'];

package/lib/Drawer/__tests__/Drawer.spec.js

@@ -4,10 +4,18 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
+var _IdProvider = require("@zohodesk/components/es/Provider/IdProvider");
+
 var _Drawer = _interopRequireDefault(require("../Drawer"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+beforeEach(function () {
+  (0, _IdProvider.setGlobalId)(0);
+});
+afterEach(function () {
+  (0, _react2.cleanup)();
+});
 var sizes = ['small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge', 'xxlarge', 'default'];
 var palettes = ['dark', 'default', 'darkLight', 'plain'];
 var subDrawerSizes = ['xsmall', 'small', 'medium'];

package/lib/Drawer/__tests__/__snapshots__/Header.spec.js.snap

@@ -73,7 +73,7 @@ exports[`Header Component - Title Prop Combinations renders Header with title an
         >
           <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"
@@ -438,7 +438,7 @@ exports[`Header Component - Title Prop Combinations renders Header with title, c
         >
           <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"
@@ -539,7 +539,7 @@ exports[`Header Component - Title Prop Combinations renders Header with title, i
         >
           <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"
@@ -736,7 +736,7 @@ exports[`Header Component - Title Prop Combinations renders Header with title, i
         >
           <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/lib/FlipCard/__tests__/__snapshots__/FlipCard.spec.js.snap

@@ -161,7 +161,7 @@ exports[`FlipCard renders correctly with channel: chat and action: outgoing 1`]
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-chChatOut   iconStyle chat_outgoing   iconColor  undefined   blue"
+              class="zd_font_icons basic icon-chChatOut   iconStyle chat_outgoing   avatar_align_center  iconColor     blue"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -255,7 +255,7 @@ exports[`FlipCard renders correctly with channel: email and action: incoming 1`]
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-chMailIn   iconStyle email_incoming   iconColor  undefined   green"
+              class="zd_font_icons basic icon-chMailIn   iconStyle email_incoming   avatar_align_center  iconColor     green"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -525,7 +525,7 @@ exports[`FlipCard renders correctly with className, channel, and action 1`] = `
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-chMailIn   iconStyle email_incoming   iconColor  undefined   green"
+              class="zd_font_icons basic icon-chMailIn   iconStyle email_incoming   avatar_align_center  iconColor     green"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -1250,7 +1250,7 @@ exports[`FlipCard renders correctly with iconSize as a number and channel & acti
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-chMailIn   iconStyle email_incoming   iconColor  undefined   green"
+              class="zd_font_icons basic icon-chMailIn   iconStyle email_incoming   avatar_align_center  iconColor     green"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -1835,7 +1835,7 @@ exports[`FlipCard renders correctly with palette, channel, and action 1`] = `
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-chChatOut   iconStyle chat_outgoing   iconColor  undefined   blue"
+              class="zd_font_icons basic icon-chChatOut   iconStyle chat_outgoing   avatar_align_center  iconColor     blue"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -3824,7 +3824,7 @@ exports[`FlipCard renders with icon 1`] = `
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-ch-email    iconColor  undefined   "
+            class="zd_font_icons basic icon-ch-email    avatar_align_center  iconColor     "
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"