@zohodesk/dot 1.0.0-temp-187.11 → 1.0.0-temp-209

package/lib/Onboarding/CarouselDots/CarouselDots.js

@@ -0,0 +1,66 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _layout = require("@zohodesk/layout");
+
+var _propTypes = require("./props/propTypes");
+
+var _defaultProps = require("./props/defaultProps");
+
+var _CarouselDot = _interopRequireDefault(require("./CarouselDot/CarouselDot"));
+
+var _CarouselDotsModule = _interopRequireDefault(require("./css/CarouselDots.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var CarouselDots = function CarouselDots(_ref) {
+  var sliderDetails = _ref.sliderDetails,
+      currentSliderIndex = _ref.currentSliderIndex,
+      isAnimationPaused = _ref.isAnimationPaused,
+      onClick = _ref.onClick,
+      onMouseEnter = _ref.onMouseEnter,
+      onMouseLeave = _ref.onMouseLeave,
+      testId = _ref.testId,
+      customId = _ref.customId;
+  return /*#__PURE__*/_react["default"].createElement(_layout.Flex, {
+    $ui_displayMode: "flex",
+    $ui_alignItems: "center",
+    $ui_className: _CarouselDotsModule["default"].btnCnt,
+    $ui_justifyContent: "center",
+    $tagAttributes_container: {
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave
+    },
+    customId: customId,
+    testId: testId
+  }, sliderDetails.map(function (data, index) {
+    return /*#__PURE__*/_react["default"].createElement(_CarouselDot["default"], {
+      key: data.tabName,
+      isActive: index === currentSliderIndex,
+      isAnimationPaused: isAnimationPaused,
+      onClick: onClick,
+      index: index,
+      customId: customId + '_' + index,
+      testId: testId + '_' + index
+    });
+  }));
+};
+
+CarouselDots.propTypes = _propTypes.propTypes;
+CarouselDots.defaultProps = _defaultProps.defaultProps;
+
+var _default = /*#__PURE__*/(0, _react.memo)(CarouselDots);
+
+exports["default"] = _default;

package/lib/Onboarding/CarouselDots/__tests__/CarouselDots.spec.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _CarouselDots = _interopRequireDefault(require("../CarouselDots"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('CarouselDots', function () {
+  var sliderData = [{
+    imageSource: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3Mu0NdfXXqvCExZ9YG_j93CKuU4DIdcIlEQ&s",
+    tabName: 'commentPin',
+    heading: "Onboarding with carousel Slide 1",
+    description: "Discover innovative tools and solutions to streamline your processes and boost productivity on Slide 1."
+  }, {
+    imageSource: "https://crm-masters.com/wp-content/uploads/2023/05/cover-images-1200-%C3%97-630px-39-1-1200x675.jpg",
+    tabName: 'visibility',
+    heading: "Slide 2",
+    description: "Immerse yourself in a visually stunning experience on Slide 2, where innovative ideas and compelling visuals spark curiosity and inspiration."
+  }];
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CarouselDots["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering of slider data', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CarouselDots["default"], {
+      sliderDetails: sliderData
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering prop of currentSliderIndex', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CarouselDots["default"], {
+      sliderDetails: sliderData,
+      currentSliderIndex: 1
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering prop of isAnimationPaused', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CarouselDots["default"], {
+      sliderDetails: sliderData,
+      isAnimationPaused: true
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with customId', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CarouselDots["default"], {
+      customId: "radar"
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with testId', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CarouselDots["default"], {
+      testId: "radar_test"
+    })),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/Onboarding/CarouselDots/__tests__/__snapshots__/CarouselDots.spec.js.snap

@@ -0,0 +1,94 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CarouselDots rendering of slider data 1`] = `
+<DocumentFragment>
+  <div
+    class="flex row alignItems_center justifyContent_center btnCnt"
+    data-id="carouselDots"
+    data-test-id="carouselDots"
+  >
+    <div
+      class="bullet  bulletActive"
+      data-id="carouselDots_0"
+      data-test-id="carouselDots_0"
+    />
+    <div
+      class="bullet  bulletNormal"
+      data-id="carouselDots_1"
+      data-test-id="carouselDots_1"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CarouselDots rendering prop of currentSliderIndex 1`] = `
+<DocumentFragment>
+  <div
+    class="flex row alignItems_center justifyContent_center btnCnt"
+    data-id="carouselDots"
+    data-test-id="carouselDots"
+  >
+    <div
+      class="bullet  bulletNormal"
+      data-id="carouselDots_0"
+      data-test-id="carouselDots_0"
+    />
+    <div
+      class="bullet  bulletActive"
+      data-id="carouselDots_1"
+      data-test-id="carouselDots_1"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CarouselDots rendering prop of isAnimationPaused 1`] = `
+<DocumentFragment>
+  <div
+    class="flex row alignItems_center justifyContent_center btnCnt"
+    data-id="carouselDots"
+    data-test-id="carouselDots"
+  >
+    <div
+      class="bullet animationPaused bulletActive"
+      data-id="carouselDots_0"
+      data-test-id="carouselDots_0"
+    />
+    <div
+      class="bullet animationPaused bulletNormal"
+      data-id="carouselDots_1"
+      data-test-id="carouselDots_1"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CarouselDots rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="flex row alignItems_center justifyContent_center btnCnt"
+    data-id="carouselDots"
+    data-test-id="carouselDots"
+  />
+</DocumentFragment>
+`;
+
+exports[`CarouselDots rendering with customId 1`] = `
+<DocumentFragment>
+  <div
+    class="flex row alignItems_center justifyContent_center btnCnt"
+    data-id="radar"
+    data-test-id="carouselDots"
+  />
+</DocumentFragment>
+`;
+
+exports[`CarouselDots rendering with testId 1`] = `
+<DocumentFragment>
+  <div
+    class="flex row alignItems_center justifyContent_center btnCnt"
+    data-id="carouselDots"
+    data-test-id="radar_test"
+  />
+</DocumentFragment>
+`;

package/lib/Onboarding/CarouselDots/css/CarouselDots.module.css

@@ -0,0 +1,6 @@
+
+/* carousel style */
+.btnCnt {
+    gap: var(--zd_size7) ;
+    height: var(--zd_size23) ;
+}

package/lib/Onboarding/CarouselDots/props/defaultProps.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = void 0;
+var defaultProps = {
+  sliderDetails: [],
+  currentSliderIndex: 0,
+  isAnimationPaused: false,
+  customId: "carouselDots",
+  testId: 'carouselDots'
+};
+exports.defaultProps = defaultProps;

package/lib/Onboarding/CarouselDots/props/propTypes.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var propTypes = {
+  sliderDetails: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    tabName: _propTypes["default"].string.isRequired
+  })).isRequired,
+  currentSliderIndex: _propTypes["default"].string,
+  isAnimationPaused: _propTypes["default"].bool,
+  onClick: _propTypes["default"].func,
+  onMouseEnter: _propTypes["default"].func,
+  onMouseLeave: _propTypes["default"].func,
+  testId: _propTypes["default"].string,
+  customId: _propTypes["default"].string
+};
+exports.propTypes = propTypes;

package/lib/Onboarding/Onboarding.js

@@ -0,0 +1,316 @@
+"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,
+      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,
+      videoLookupFormat = state.videoLookupFormat;
+  var primaryButtonProps = customProps.primaryButtonProps,
+      secondaryButtonProps = customProps.secondaryButtonProps,
+      secondaryButtonLinkProps = customProps.secondaryButtonLinkProps,
+      ribbonProps = customProps.ribbonProps,
+      footerProps = customProps.footerProps,
+      headingProps = customProps.headingProps,
+      descriptionProps = customProps.descriptionProps,
+      videoLookupProps = customProps.videoLookupProps;
+
+  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, videoSourceLink, videoSourceFormat) {
+    return imageSource ? /*#__PURE__*/_react["default"].createElement(_Image["default"], {
+      src: imageSource,
+      className: "".concat(style.mediaElement, " ").concat(style.image)
+    }) : videoSourceLink ? /*#__PURE__*/_react["default"].createElement("video", {
+      className: style.mediaElement,
+      autoPlay: true,
+      loop: true,
+      muted: true
+    }, /*#__PURE__*/_react["default"].createElement("source", {
+      src: videoSourceLink,
+      type: "video/".concat(videoSourceFormat)
+    })) : 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,
+      customId: "".concat(customId, "_carousel_dots"),
+      testId: "".concat(testId, "_carousel_dots")
+    }), /*#__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,
+        tabName = item.tabName;
+    var videoLookupSourceLink = videoLookupSource && videoLookupSource.link ? videoLookupSource.link : null;
+    var videoLookupSourceFormat = videoLookupSource && videoLookupSource.format ? videoLookupSource.format : null;
+    var isEmbeddedvideoLookupSource = videoLookupSource && videoLookupSource.isEmbeddedLink ? videoLookupSource.isEmbeddedLink : null;
+    var videoSourceLink = videoSource && videoSource.link ? videoSource.link : null;
+    var videoSourceFormat = videoSource && videoSource.format ? videoSource.format : null;
+    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, videoSourceLink, videoSourceFormat), 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(videoLookupSourceLink, isEmbeddedvideoLookupSource, videoLookupSourceFormat);
+      }
+    }, /*#__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"], _extends({
+    videoFormat: videoLookupFormat,
+    onClose: closeVideoLookup,
+    isEmbeddedLink: isEmbeddedLink,
+    link: videoLookupLink,
+    isOpened: isVideoLookupOpen,
+    closeText: videoLookupCloseText
+  }, videoLookupProps))) : null));
+};
+
+var _default = Onboarding;
+exports["default"] = _default;
+Onboarding.propTypes = _propTypes.propTypes;
+Onboarding.defaultProps = _defaultProps.defaultProps;