@zohodesk/dot 1.7.8-temp-0 → 1.7.8

package/lib/Onboarding/Onboarding.js

@@ -1,313 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = require("./props/propTypes");
-
-var _defaultProps = require("./props/defaultProps");
-
-var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
-
-var _Flex = _interopRequireDefault(require("@zohodesk/layout/es/Flex/Flex"));
-
-var _Button = _interopRequireDefault(require("@zohodesk/components/lib/Button/Button"));
-
-var _Modal = _interopRequireDefault(require("@zohodesk/components/lib/Modal/Modal"));
-
-var _Ribbon = _interopRequireDefault(require("@zohodesk/components/es/Ribbon/Ribbon"));
-
-var _Typography = _interopRequireDefault(require("@zohodesk/components/es/Typography/Typography"));
-
-var _semanticButtonModule = _interopRequireDefault(require("@zohodesk/components/es/semantic/Button/semanticButton.module.css"));
-
-var _VideoLookup = _interopRequireDefault(require("../VideoLookup/VideoLookup"));
-
-var _Link = _interopRequireDefault(require("../Link/Link"));
-
-var _CarouselDots = _interopRequireDefault(require("./CarouselDots/CarouselDots"));
-
-var _Image = _interopRequireDefault(require("../Image/Image"));
-
-var _useOnboardingSlider2 = _interopRequireDefault(require("./hooks/useOnboardingSlider"));
-
-var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
-
-var _useOnboarding2 = _interopRequireDefault(require("./hooks/useOnboarding"));
-
-var _General = require("../utils/General");
-
-var _OnboardingModule = _interopRequireDefault(require("./css/Onboarding.module.css"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-var Onboarding = function Onboarding(_ref) {
-  var hasCloseIcon = _ref.hasCloseIcon,
-      onClose = _ref.onClose,
-      ribbonText = _ref.ribbonText,
-      hasRibbon = _ref.hasRibbon,
-      videoLookupCloseText = _ref.videoLookupCloseText,
-      customStyle = _ref.customStyle,
-      sliderData = _ref.sliderData,
-      isAutoPlayAnimation = _ref.isAutoPlayAnimation,
-      hasBouncAnimationOnMount = _ref.hasBouncAnimationOnMount,
-      customId = _ref.customId,
-      testId = _ref.testId,
-      videoFormats = _ref.videoFormats,
-      hasExpandedButton = _ref.hasExpandedButton,
-      onPrimaryButtonClick = _ref.onPrimaryButtonClick,
-      onSecondaryButtonClick = _ref.onSecondaryButtonClick,
-      customProps = _ref.customProps;
-  var style = (0, _useMergeStyle["default"])(_OnboardingModule["default"], customStyle);
-
-  var _useOnboarding = (0, _useOnboarding2["default"])(),
-      state = _useOnboarding.state,
-      openVideoLookup = _useOnboarding.openVideoLookup,
-      closeVideoLookup = _useOnboarding.closeVideoLookup;
-
-  var videoLookupLink = state.videoLookupLink,
-      isVideoLookupOpen = state.isVideoLookupOpen,
-      isEmbeddedLink = state.isEmbeddedLink;
-  var primaryButtonProps = customProps.primaryButtonProps,
-      secondaryButtonProps = customProps.secondaryButtonProps,
-      secondaryButtonLinkProps = customProps.secondaryButtonLinkProps,
-      ribbonProps = customProps.ribbonProps,
-      footerProps = customProps.footerProps,
-      headingProps = customProps.headingProps,
-      descriptionProps = customProps.descriptionProps;
-
-  var _useOnboardingSlider = (0, _useOnboardingSlider2["default"])({
-    isAutoPlayAnimation: isAutoPlayAnimation,
-    sliderData: sliderData
-  }),
-      sliderIndex = _useOnboardingSlider.sliderIndex,
-      isAnimationPaused = _useOnboardingSlider.isAnimationPaused,
-      translateMovementVal = _useOnboardingSlider.translateMovementVal,
-      handleMouseEnter = _useOnboardingSlider.handleMouseEnter,
-      handleMouseLeave = _useOnboardingSlider.handleMouseLeave,
-      handleSliderIndexChange = _useOnboardingSlider.handleSliderIndexChange,
-      handleSliderNext = _useOnboardingSlider.handleSliderNext;
-
-  var renderMediaElement = function renderMediaElement(imageSource, videoSource) {
-    return imageSource ? /*#__PURE__*/_react["default"].createElement(_Image["default"], {
-      src: imageSource,
-      className: "".concat(style.mediaElement, " ").concat(style.image)
-    }) : videoSource ? /*#__PURE__*/_react["default"].createElement("video", {
-      className: style.mediaElement,
-      autoPlay: true,
-      loop: true,
-      muted: true
-    }, videoFormats.map(function (ext) {
-      return /*#__PURE__*/_react["default"].createElement("source", {
-        key: ext,
-        src: videoSource,
-        type: "video/".concat(ext)
-      });
-    })) : null;
-  };
-
-  var renderFooter = function renderFooter(sliderData, currentSliderIndex) {
-    var currentSliderData = sliderData && sliderData[currentSliderIndex];
-
-    var _ref2 = currentSliderData || _General.DUMMY_OBJECT,
-        _ref2$hasPrimaryButto = _ref2.hasPrimaryButton,
-        hasPrimaryButton = _ref2$hasPrimaryButto === void 0 ? true : _ref2$hasPrimaryButto,
-        _ref2$hasSecondaryBut = _ref2.hasSecondaryButton,
-        hasSecondaryButton = _ref2$hasSecondaryBut === void 0 ? false : _ref2$hasSecondaryBut,
-        _ref2$hasSecondaryBut2 = _ref2.hasSecondaryButtonLink,
-        hasSecondaryButtonLink = _ref2$hasSecondaryBut2 === void 0 ? false : _ref2$hasSecondaryBut2,
-        _ref2$primaryButtonTe = _ref2.primaryButtonText,
-        primaryButtonText = _ref2$primaryButtonTe === void 0 ? 'Got it' : _ref2$primaryButtonTe,
-        secondaryButtonText = _ref2.secondaryButtonText,
-        secondaryButtonLink = _ref2.secondaryButtonLink,
-        tabName = _ref2.tabName;
-
-    var expandedClass = hasExpandedButton ? style.expandedButton : "";
-    var isFinalSlide = sliderData && sliderData.length - 1 === currentSliderIndex;
-
-    var handlePrimaryButtonClick = function handlePrimaryButtonClick() {
-      if (typeof onPrimaryButtonClick == 'function') {
-        onPrimaryButtonClick(tabName);
-      } else {
-        if (!isFinalSlide) {
-          handleSliderNext();
-        } else {
-          onClose && onClose();
-        }
-      }
-    };
-
-    var handleSecondaryButtonClick = function handleSecondaryButtonClick() {
-      if (typeof onSecondaryButtonClick == 'function') {
-        onSecondaryButtonClick(tabName);
-      }
-    };
-
-    return /*#__PURE__*/_react["default"].createElement(_Flex["default"], _extends({
-      $ui_displayMode: "flex",
-      $ui_direction: hasExpandedButton ? "column" : "row",
-      $ui_wrapMode: hasExpandedButton ? "wrap" : undefined,
-      $ui_alignItems: "center",
-      $ui_className: style.footer
-    }, footerProps), sliderData.length > 1 && /*#__PURE__*/_react["default"].createElement(_CarouselDots["default"], {
-      sliderDetails: sliderData,
-      currentSliderIndex: currentSliderIndex,
-      isAnimationPaused: isAnimationPaused,
-      onClick: handleSliderIndexChange
-    }), /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
-      $ui_displayMode: "flex",
-      $ui_justifyContent: "end",
-      $flag_flexible: true,
-      $ui_wrapMode: hasExpandedButton ? "wrap" : undefined,
-      $ui_className: style.btnWrapper
-    }, hasSecondaryButton && (hasSecondaryButtonLink ? /*#__PURE__*/_react["default"].createElement(_Link["default"], _extends({
-      href: secondaryButtonLink,
-      title: secondaryButtonText,
-      dataId: "".concat(customId, "_secondary_button_link"),
-      target: "_blank",
-      className: "".concat(style.secondaryButtton, " ").concat(style.secondaryButttonLink, " ").concat(style.footerButton, " ").concat(expandedClass)
-    }, secondaryButtonLinkProps), secondaryButtonText) : /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
-      dataId: "".concat(customId, "_secondary_button"),
-      title: secondaryButtonText,
-      text: secondaryButtonText,
-      onClick: handleSecondaryButtonClick,
-      customClass: {
-        customButton: " ".concat(style.secondaryButtton, " ").concat(style.footerButton, " ").concat(expandedClass)
-      }
-    }, secondaryButtonProps))), hasPrimaryButton && /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
-      dataId: "".concat(customId, "_primary_button"),
-      title: primaryButtonText,
-      text: primaryButtonText,
-      palette: "primaryFilled",
-      customClass: {
-        customButton: "".concat(style.primaryButton, " ").concat(style.footerButton, " ").concat(expandedClass)
-      },
-      onClick: handlePrimaryButtonClick
-    }, primaryButtonProps))));
-  };
-
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    "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: style.mainWrapper,
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: style.gradientLayer
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(style.circleBlur, " ").concat(style.circleBlurOne)
-  }), /*#__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
-  }, /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
-    $ui_displayMode: "flex",
-    $tagAttributes_container: {
-      style: {
-        '--local_translate_movement': "".concat(translateMovementVal, "%")
-      }
-    },
-    $ui_className: style.carouselInner
-  }, sliderData.map(function (item, index) {
-    var imageSource = item.imageSource,
-        videoSource = item.videoSource,
-        heading = item.heading,
-        description = item.description,
-        _item$hasVideoPlayBut = item.hasVideoPlayButton,
-        hasVideoPlayButton = _item$hasVideoPlayBut === void 0 ? false : _item$hasVideoPlayBut,
-        videoLookupSource = item.videoLookupSource,
-        _item$hasEmbeddedVide = item.hasEmbeddedVideoLookupSource,
-        hasEmbeddedVideoLookupSource = _item$hasEmbeddedVide === void 0 ? false : _item$hasEmbeddedVide,
-        tabName = item.tabName;
-    return /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
-      $ui_displayMode: "flex",
-      $ui_direction: "column",
-      $flag_shrink: false,
-      $ui_className: style.carouselItem,
-      key: tabName
-    }, /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
-      $ui_className: style.header,
-      $ui_displayMode: "flex",
-      $ui_justifyContent: "center",
-      $ui_alignItems: "center",
-      $flag_fullsize: true
-    }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: "".concat(style.innerHead, " ").concat(hasVideoPlayButton ? style.dvLayer : null)
-    }, renderMediaElement(imageSource, videoSource), hasVideoPlayButton && /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
-      $ui_displayMode: "flex",
-      $ui_justifyContent: "center",
-      $ui_alignItems: "center",
-      $ui_className: style.playIconWrapper
-    }, /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
-      $ui_displayMode: "flex",
-      $ui_justifyContent: "center",
-      $ui_alignItems: "center",
-      $ui_tagName: "button",
-      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(videoLookupSource, hasEmbeddedVideoLookupSource);
-      }
-    }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-      name: "ZD-GN-arrowFill",
-      iconClass: style.playIconInner
-    }))))), /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
-      $ui_scroll: "vertical",
-      $ui_className: style.content
-    }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], _extends({
-      $ui_size: "20",
-      $ui_lineClamp: "3",
-      $ui_weight: "bold",
-      $ui_className: style.heading,
-      $i18n_dataTitle: heading,
-      $ui_lineHeight: "1.4"
-    }, headingProps), heading), /*#__PURE__*/_react["default"].createElement(_Typography["default"], _extends({
-      $ui_size: "14",
-      $ui_lineHeight: "1.6",
-      $ui_lineClamp: "4",
-      $i18n_dataTitle: description,
-      $ui_className: style.description
-    }, descriptionProps), description)));
-  }))) : null, renderFooter(sliderData, sliderIndex), hasCloseIcon ? /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
-    $flag_fullsize: true,
-    $ui_tagName: "button",
-    $ui_displayMode: "flex",
-    customId: "".concat(customId, "_close_icon"),
-    testId: "".concat(testId, "_close_icon"),
-    $ui_justifyContent: "center",
-    $ui_alignItems: "center",
-    $ui_className: "".concat(style.closeIconContainer, " ").concat(_semanticButtonModule["default"].buttonReset),
-    $event_onClick: onClose
-  }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-    name: "ZD-inappClose",
-    iconClass: style.closeIcon
-  })) : null, hasRibbon ? /*#__PURE__*/_react["default"].createElement(_Ribbon["default"], _extends({
-    dataId: "".concat(customId, "_ribbon"),
-    palette: "primary",
-    size: "medium",
-    customClass: style.newRibbon,
-    type: "flag",
-    text: ribbonText
-  }, ribbonProps)) : null, isVideoLookupOpen ? /*#__PURE__*/_react["default"].createElement(_Modal["default"], null, /*#__PURE__*/_react["default"].createElement(_VideoLookup["default"], {
-    videoFormats: videoFormats,
-    onClose: closeVideoLookup,
-    isEmbeddedLink: isEmbeddedLink,
-    link: videoLookupLink,
-    isOpened: isVideoLookupOpen,
-    closeText: videoLookupCloseText
-  })) : null));
-};
-
-var _default = Onboarding;
-exports["default"] = _default;
-Onboarding.propTypes = _propTypes.propTypes;
-Onboarding.defaultProps = _defaultProps.defaultProps;