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

package/lib/Onboarding/Onboarding.js

@@ -25,6 +25,8 @@ var _Typography = _interopRequireDefault(require("@zohodesk/components/es/Typogr
 
 var _semanticButtonModule = _interopRequireDefault(require("@zohodesk/components/es/semantic/Button/semanticButton.module.css"));
 
+var _ZindexProvider = require("@zohodesk/components/es/Provider/ZindexProvider");
+
 var _VideoLookup = _interopRequireDefault(require("../VideoLookup/VideoLookup"));
 
 var _Link = _interopRequireDefault(require("../Link/Link"));
@@ -62,11 +64,22 @@ var Onboarding = function Onboarding(_ref) {
       hasExpandedButton = _ref.hasExpandedButton,
       onPrimaryButtonClick = _ref.onPrimaryButtonClick,
       onSecondaryButtonClick = _ref.onSecondaryButtonClick,
-      customProps = _ref.customProps;
+      customProps = _ref.customProps,
+      tagAttributes = _ref.tagAttributes,
+      a11yAttributes = _ref.a11yAttributes,
+      closeIconTooltip = _ref.closeIconTooltip,
+      dragBoundaryLimit = _ref.dragBoundaryLimit,
+      isDraggable = _ref.isDraggable,
+      position = _ref.position;
+  var getNextIndex = (0, _ZindexProvider.useZIndex)();
   var style = (0, _useMergeStyle["default"])(_OnboardingModule["default"], customStyle);
 
-  var _useOnboarding = (0, _useOnboarding2["default"])(),
+  var _useOnboarding = (0, _useOnboarding2["default"])({
+    dragBoundaryLimit: dragBoundaryLimit,
+    isDraggable: isDraggable && sliderData.length > 0
+  }),
       state = _useOnboarding.state,
+      dragRef = _useOnboarding.dragRef,
       openVideoLookup = _useOnboarding.openVideoLookup,
       closeVideoLookup = _useOnboarding.closeVideoLookup;
 
@@ -85,15 +98,18 @@ var Onboarding = function Onboarding(_ref) {
 
   var _useOnboardingSlider = (0, _useOnboardingSlider2["default"])({
     isAutoPlayAnimation: isAutoPlayAnimation,
-    sliderData: sliderData
+    sliderData: sliderData,
+    animationClass: style.mainContainerAnimation
   }),
       sliderIndex = _useOnboardingSlider.sliderIndex,
+      mainContainerEleRef = _useOnboardingSlider.mainContainerEleRef,
       isAnimationPaused = _useOnboardingSlider.isAnimationPaused,
       translateMovementVal = _useOnboardingSlider.translateMovementVal,
       handleMouseEnter = _useOnboardingSlider.handleMouseEnter,
       handleMouseLeave = _useOnboardingSlider.handleMouseLeave,
       handleSliderIndexChange = _useOnboardingSlider.handleSliderIndexChange,
-      handleSliderNext = _useOnboardingSlider.handleSliderNext;
+      handleSliderNext = _useOnboardingSlider.handleSliderNext,
+      handleAnimationEnd = _useOnboardingSlider.handleAnimationEnd;
 
   var renderMediaElement = function renderMediaElement(imageSource, videoSourceLink, videoSourceFormat) {
     return imageSource ? /*#__PURE__*/_react["default"].createElement(_Image["default"], {
@@ -192,11 +208,17 @@ var Onboarding = function Onboarding(_ref) {
     }, primaryButtonProps))));
   };
 
-  return /*#__PURE__*/_react["default"].createElement("div", {
+  return /*#__PURE__*/_react["default"].createElement("div", _extends({
+    "data-drag-container": isDraggable ? 'true' : 'false',
+    style: position !== 'static' || isDraggable ? {
+      zIndex: getNextIndex()
+    } : null,
+    ref: mainContainerEleRef,
     "data-id": "".concat(customId, "_container"),
     "data-test-id": "".concat(testId, "_container"),
-    className: "".concat(style.mainContainer, " ").concat(hasBouncAnimationOnMount ? style.mainContainerAnimation : "")
-  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(style.mainContainer, " ").concat(position !== 'static' ? style["positon_".concat(position)] : '', " ").concat(hasBouncAnimationOnMount ? style.mainContainerAnimation : ""),
+    onAnimationEnd: hasBouncAnimationOnMount ? handleAnimationEnd : null
+  }, tagAttributes, a11yAttributes), /*#__PURE__*/_react["default"].createElement("div", {
     className: style.mainWrapper,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
@@ -207,7 +229,9 @@ var Onboarding = function Onboarding(_ref) {
   }), /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(style.circleBlur, " ").concat(style.circleBlurTwo)
   })), Array.isArray(sliderData) && sliderData.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", {
-    className: style.carousel
+    className: style.carousel,
+    ref: isDraggable ? dragRef : null,
+    "data-drag-hook": isDraggable ? "true" : "false"
   }, /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
     $ui_displayMode: "flex",
     $tagAttributes_container: {
@@ -231,6 +255,11 @@ var Onboarding = function Onboarding(_ref) {
     var isEmbeddedvideoLookupSource = videoLookupSource && videoLookupSource.isEmbeddedLink ? videoLookupSource.isEmbeddedLink : null;
     var videoSourceLink = videoSource && videoSource.link ? videoSource.link : null;
     var videoSourceFormat = videoSource && videoSource.format ? videoSource.format : null;
+
+    var handleOpenVideoLookup = function handleOpenVideoLookup() {
+      return openVideoLookup(videoLookupSourceLink, isEmbeddedvideoLookupSource, videoLookupSourceFormat);
+    };
+
     return /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
       $ui_displayMode: "flex",
       $ui_direction: "column",
@@ -238,7 +267,7 @@ var Onboarding = function Onboarding(_ref) {
       $ui_className: style.carouselItem,
       key: tabName
     }, /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
-      $ui_className: style.header,
+      $ui_className: "".concat(style.header),
       $ui_displayMode: "flex",
       $ui_justifyContent: "center",
       $ui_alignItems: "center",
@@ -258,9 +287,7 @@ var Onboarding = function Onboarding(_ref) {
       customId: "".concat(customId, "_play_icon"),
       testId: "".concat(testId, "_play_icon"),
       $ui_className: "".concat(style.playIcon, " ").concat(style.animate, " ").concat(_semanticButtonModule["default"].buttonReset),
-      $event_onClick: function $event_onClick() {
-        return openVideoLookup(videoLookupSourceLink, isEmbeddedvideoLookupSource, videoLookupSourceFormat);
-      }
+      $event_onClick: videoLookupSourceLink ? handleOpenVideoLookup : null
     }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
       name: "ZD-GN-arrowFill",
       iconClass: style.playIconInner
@@ -282,8 +309,10 @@ var Onboarding = function Onboarding(_ref) {
       $ui_className: style.description
     }, descriptionProps), description)));
   }))) : null, renderFooter(sliderData, sliderIndex), hasCloseIcon ? /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
-    $flag_fullsize: true,
     $ui_tagName: "button",
+    $tagAttributes_container: {
+      'data-title': closeIconTooltip
+    },
     $ui_displayMode: "flex",
     customId: "".concat(customId, "_close_icon"),
     testId: "".concat(testId, "_close_icon"),

package/lib/Onboarding/__tests__/Onboarding.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 _Onboarding = _interopRequireDefault(require("../Onboarding"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+beforeEach(function () {
+  (0, _IdProvider.setGlobalId)(0);
+});
+afterEach(function () {
+  (0, _react2.cleanup)();
+});
 describe('Onboarding', function () {
   test('rendering the defult props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Onboarding["default"], null)),
@@ -444,4 +452,48 @@ describe('Onboarding', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering data with tagAttributes', function () {
+    var _render36 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Onboarding["default"], {
+      tagAttributes: {
+        'data-scroll': true
+      }
+    })),
+        asFragment = _render36.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering data with a11yAttributes', function () {
+    var _render37 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Onboarding["default"], {
+      a11yAttributes: {
+        'data-a11y-focus': true
+      }
+    })),
+        asFragment = _render37.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering data with closeIconTooltip', function () {
+    var _render38 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Onboarding["default"], {
+      closeIconTooltip: "escape"
+    })),
+        asFragment = _render38.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering data with position - absolute', function () {
+    var _render39 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Onboarding["default"], {
+      position: "absolute"
+    })),
+        asFragment = _render39.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering data without isDraggable', function () {
+    var _render40 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Onboarding["default"], {
+      isDraggable: false
+    })),
+        asFragment = _render40.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });