@zohodesk/dot 1.7.12 → 1.7.14

package/es/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"

package/es/Hooks/Dragger/useDragger.js

@@ -86,6 +86,8 @@ export default function useDragger(_ref) {
     style.top = `${top}px`;
     style.left = `${left}px`;
     style.width = `${width}px`;
+    style.bottom = 'initial';
+    style.right = 'initial';
     style.position = 'fixed';
     offset.current.x = draggableEle.current.offsetLeft - e.clientX;
     offset.current.y = draggableEle.current.offsetTop - e.clientY;

package/es/IconButton/IconButton.js

@@ -136,7 +136,7 @@ export default class IconButton extends React.Component {
       isBold: isBold,
       size: iconSize,
       name: iconName,
-      iconClass: iconClass
+      iconClass: `${iconClass} ${style.icon_button_center}`
     }) : null, children ? children : null));
   }
 

package/es/IconButton/IconButton.module.css

@@ -46,4 +46,7 @@
 .primaryFilled,
 .primaryFilled_active {
   --iconColor: var(--zdt_iconButton_icon_primaryActive);
+}
+.icon_button_center {
+  composes: tcenter from '~@zohodesk/components/lib/common/common.module.css';
 }

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

@@ -94,7 +94,7 @@ exports[`IconButton rendering in Icon 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-infoStroke fbold iconClass  "
+      class="zd_font_icons basic icon-infoStroke fbold iconClass icon_button_center  "
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/es/Onboarding/CarouselDots/CarouselDot/css/CarouselDot.module.css

@@ -52,11 +52,11 @@
   }
   [dir=ltr] .bulletActive::after {
     left:-100% ;
-    animation:  progressLoading-ltr 5s linear infinite;
+    animation: progressLoading 5s linear infinite;
   }
   [dir=rtl] .bulletActive::after {
     right:-100% ;
-    animation:  progressLoading-rtl 5s linear infinite;
+    animation: progressLoading 5s linear infinite;
   }
   [dir=ltr] .animationPaused::after {
     animation-play-state: paused;
@@ -64,20 +64,11 @@
   [dir=rtl] .animationPaused::after {
     animation-play-state: paused;
   }
-  @keyframes progressLoading-ltr {
+  @keyframes progressLoading {
     0% {
-      left: -100% ;
+      inset-inline-start: -100%;
     }
     100% {
-      left: 0% ;
+      inset-inline-start: 0%;
     }
   }
-  @keyframes progressLoading-rtl {
-    0% {
-      left: -100% ;
-    }
-    100% {
-      left: 0% ;
-    }
-  }
-  

package/es/Onboarding/Onboarding.js

@@ -12,6 +12,7 @@ import Modal from '@zohodesk/components/lib/Modal/Modal';
 import Ribbon from '@zohodesk/components/es/Ribbon/Ribbon';
 import Typography from '@zohodesk/components/es/Typography/Typography';
 import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
+import { useZIndex } from '@zohodesk/components/es/Provider/ZindexProvider';
 /** local **/
 
 import VideoLookup from "../VideoLookup/VideoLookup";
@@ -46,14 +47,25 @@ const Onboarding = _ref => {
     hasExpandedButton,
     onPrimaryButtonClick,
     onSecondaryButtonClick,
-    customProps
+    customProps,
+    tagAttributes,
+    a11yAttributes,
+    closeIconTooltip,
+    dragBoundaryLimit,
+    isDraggable,
+    position
   } = _ref;
+  const getNextIndex = useZIndex();
   const style = useMergeStyle(defaultStyle, customStyle);
   const {
     state,
+    dragRef,
     openVideoLookup,
     closeVideoLookup
-  } = useOnboarding();
+  } = useOnboarding({
+    dragBoundaryLimit,
+    isDraggable: isDraggable && sliderData.length > 0
+  });
   const {
     videoLookupLink,
     isVideoLookupOpen,
@@ -72,15 +84,18 @@ const Onboarding = _ref => {
   } = customProps;
   const {
     sliderIndex,
+    mainContainerEleRef,
     isAnimationPaused,
     translateMovementVal,
     handleMouseEnter,
     handleMouseLeave,
     handleSliderIndexChange,
-    handleSliderNext
+    handleSliderNext,
+    handleAnimationEnd
   } = useOnboardingSlider({
     isAutoPlayAnimation: isAutoPlayAnimation,
-    sliderData: sliderData
+    sliderData: sliderData,
+    animationClass: style.mainContainerAnimation
   });
 
   const renderMediaElement = (imageSource, videoSourceLink, videoSourceFormat) => imageSource ? /*#__PURE__*/React.createElement(Image, {
@@ -178,9 +193,17 @@ const Onboarding = _ref => {
   };
 
   return /*#__PURE__*/React.createElement("div", {
+    "data-drag-container": isDraggable ? 'true' : 'false',
+    style: position !== 'static' || isDraggable ? {
+      zIndex: getNextIndex()
+    } : null,
+    ref: mainContainerEleRef,
     "data-id": `${customId}_container`,
     "data-test-id": `${testId}_container`,
-    className: `${style.mainContainer} ${hasBouncAnimationOnMount ? style.mainContainerAnimation : ""}`
+    className: `${style.mainContainer} ${position !== 'static' ? style[`positon_${position}`] : ''} ${hasBouncAnimationOnMount ? style.mainContainerAnimation : ""}`,
+    onAnimationEnd: hasBouncAnimationOnMount ? handleAnimationEnd : null,
+    ...tagAttributes,
+    ...a11yAttributes
   }, /*#__PURE__*/React.createElement("div", {
     className: style.mainWrapper,
     onMouseEnter: handleMouseEnter,
@@ -192,7 +215,9 @@ const Onboarding = _ref => {
   }), /*#__PURE__*/React.createElement("div", {
     className: `${style.circleBlur} ${style.circleBlurTwo}`
   })), Array.isArray(sliderData) && sliderData.length > 0 ? /*#__PURE__*/React.createElement("div", {
-    className: style.carousel
+    className: style.carousel,
+    ref: isDraggable ? dragRef : null,
+    "data-drag-hook": isDraggable ? "true" : "false"
   }, /*#__PURE__*/React.createElement(Flex, {
     $ui_displayMode: "flex",
     $tagAttributes_container: {
@@ -217,6 +242,9 @@ const Onboarding = _ref => {
     const isEmbeddedvideoLookupSource = videoLookupSource && videoLookupSource.isEmbeddedLink ? videoLookupSource.isEmbeddedLink : null;
     const videoSourceLink = videoSource && videoSource.link ? videoSource.link : null;
     const videoSourceFormat = videoSource && videoSource.format ? videoSource.format : null;
+
+    const handleOpenVideoLookup = () => openVideoLookup(videoLookupSourceLink, isEmbeddedvideoLookupSource, videoLookupSourceFormat);
+
     return /*#__PURE__*/React.createElement(Flex, {
       $ui_displayMode: "flex",
       $ui_direction: "column",
@@ -224,7 +252,7 @@ const Onboarding = _ref => {
       $ui_className: style.carouselItem,
       key: tabName
     }, /*#__PURE__*/React.createElement(Flex, {
-      $ui_className: style.header,
+      $ui_className: `${style.header}`,
       $ui_displayMode: "flex",
       $ui_justifyContent: "center",
       $ui_alignItems: "center",
@@ -244,7 +272,7 @@ const Onboarding = _ref => {
       customId: `${customId}_play_icon`,
       testId: `${testId}_play_icon`,
       $ui_className: `${style.playIcon} ${style.animate} ${btnStyle.buttonReset}`,
-      $event_onClick: () => openVideoLookup(videoLookupSourceLink, isEmbeddedvideoLookupSource, videoLookupSourceFormat)
+      $event_onClick: videoLookupSourceLink ? handleOpenVideoLookup : null
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-GN-arrowFill",
       iconClass: style.playIconInner
@@ -268,8 +296,10 @@ const Onboarding = _ref => {
       ...descriptionProps
     }, description)));
   }))) : null, renderFooter(sliderData, sliderIndex), hasCloseIcon ? /*#__PURE__*/React.createElement(Flex, {
-    $flag_fullsize: true,
     $ui_tagName: "button",
+    $tagAttributes_container: {
+      'data-title': closeIconTooltip
+    },
     $ui_displayMode: "flex",
     customId: `${customId}_close_icon`,
     testId: `${testId}_close_icon`,

package/es/Onboarding/__tests__/Onboarding.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 Onboarding from "../Onboarding";
+beforeEach(() => {
+  setGlobalId(0);
+});
+afterEach(() => {
+  cleanup();
+});
 describe('Onboarding', () => {
   test('rendering the defult props', () => {
     const {
@@ -437,4 +444,48 @@ describe('Onboarding', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering data with tagAttributes', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Onboarding, {
+      tagAttributes: {
+        'data-scroll': true
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering data with a11yAttributes', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Onboarding, {
+      a11yAttributes: {
+        'data-a11y-focus': true
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering data with closeIconTooltip', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Onboarding, {
+      closeIconTooltip: "escape"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering data with position - absolute', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Onboarding, {
+      position: "absolute"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering data without isDraggable', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Onboarding, {
+      isDraggable: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });