@zohodesk/dot 1.7.11 → 1.7.13

package/es/FreezeLayer/props/propTypes.js

@@ -14,6 +14,9 @@ export const propTypes = {
   palette: PropTypes.oneOf(['dark', 'default', 'darkLight', 'plain', 'snow']),
   runOnMount: PropTypes.bool,
   customStyle: PropTypes.object,
-  zIndex: PropTypes.oneOf(['3', '5', '7', '10'])
+  zIndex: PropTypes.oneOf(['3', '5', '7', '10']),
+  onAnimateEnter: PropTypes.func,
+  postAnimateStyles: PropTypes.object,
+  onAnimateExit: PropTypes.func
 };
 export default propTypes;

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/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();
+  });
 });