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

package/es/Onboarding/CarouselDots/CarouselDots.js

@@ -0,0 +1,43 @@
+import React, { memo } from 'react';
+import { Flex } from '@zohodesk/layout';
+import { propTypes } from "./props/propTypes";
+import { defaultProps } from "./props/defaultProps";
+import CarouselDot from "./CarouselDot/CarouselDot";
+import style from "./css/CarouselDots.module.css";
+
+const CarouselDots = _ref => {
+  let {
+    sliderDetails,
+    currentSliderIndex,
+    isAnimationPaused,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    testId,
+    customId
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Flex, {
+    $ui_displayMode: "flex",
+    $ui_alignItems: "center",
+    $ui_className: style.btnCnt,
+    $ui_justifyContent: "center",
+    $tagAttributes_container: {
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave
+    },
+    customId: customId,
+    testId: testId
+  }, sliderDetails.map((data, index) => /*#__PURE__*/React.createElement(CarouselDot, {
+    key: data.tabName,
+    isActive: index === currentSliderIndex,
+    isAnimationPaused: isAnimationPaused,
+    onClick: onClick,
+    index: index,
+    customId: customId + '_' + index,
+    testId: testId + '_' + index
+  })));
+};
+
+CarouselDots.propTypes = propTypes;
+CarouselDots.defaultProps = defaultProps;
+export default /*#__PURE__*/memo(CarouselDots);

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import CarouselDots from "../CarouselDots";
+describe('CarouselDots', () => {
+  const 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', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CarouselDots, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering of slider data', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CarouselDots, {
+      sliderDetails: sliderData
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering prop of currentSliderIndex', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CarouselDots, {
+      sliderDetails: sliderData,
+      currentSliderIndex: 1
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering prop of isAnimationPaused', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CarouselDots, {
+      sliderDetails: sliderData,
+      isAnimationPaused: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with customId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CarouselDots, {
+      customId: "radar"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with testId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CarouselDots, {
+      testId: "radar_test"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/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/es/Onboarding/CarouselDots/css/CarouselDots.module.css

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

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

@@ -0,0 +1,7 @@
+export const defaultProps = {
+  sliderDetails: [],
+  currentSliderIndex: 0,
+  isAnimationPaused: false,
+  customId: "carouselDots",
+  testId: 'carouselDots'
+};

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

@@ -0,0 +1,13 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  sliderDetails: PropTypes.arrayOf(PropTypes.shape({
+    tabName: PropTypes.string.isRequired
+  })).isRequired,
+  currentSliderIndex: PropTypes.string,
+  isAnimationPaused: PropTypes.bool,
+  onClick: PropTypes.func,
+  onMouseEnter: PropTypes.func,
+  onMouseLeave: PropTypes.func,
+  testId: PropTypes.string,
+  customId: PropTypes.string
+};

package/es/Onboarding/Onboarding.js

@@ -0,0 +1,303 @@
+import React from 'react';
+/**propTypes**/
+
+import { propTypes } from "./props/propTypes";
+import { defaultProps } from "./props/defaultProps";
+/**components**/
+
+import Icon from '@zohodesk/icons/lib/Icon';
+import Flex from '@zohodesk/layout/es/Flex/Flex';
+import Button from '@zohodesk/components/lib/Button/Button';
+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';
+/** local **/
+
+import VideoLookup from "../VideoLookup/VideoLookup";
+import Link from "../Link/Link";
+import CarouselDots from "./CarouselDots/CarouselDots";
+import Image from "../Image/Image";
+/** hooks **/
+
+import useOnboardingSlider from "./hooks/useOnboardingSlider";
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import useOnboarding from "./hooks/useOnboarding";
+/** Constant **/
+
+import { DUMMY_OBJECT } from "../utils/General";
+/** style **/
+
+import defaultStyle from "./css/Onboarding.module.css";
+
+const Onboarding = _ref => {
+  let {
+    hasCloseIcon,
+    onClose,
+    ribbonText,
+    hasRibbon,
+    videoLookupCloseText,
+    customStyle,
+    sliderData,
+    isAutoPlayAnimation,
+    hasBouncAnimationOnMount,
+    customId,
+    testId,
+    hasExpandedButton,
+    onPrimaryButtonClick,
+    onSecondaryButtonClick,
+    customProps
+  } = _ref;
+  const style = useMergeStyle(defaultStyle, customStyle);
+  const {
+    state,
+    openVideoLookup,
+    closeVideoLookup
+  } = useOnboarding();
+  const {
+    videoLookupLink,
+    isVideoLookupOpen,
+    isEmbeddedLink,
+    videoLookupFormat
+  } = state;
+  const {
+    primaryButtonProps,
+    secondaryButtonProps,
+    secondaryButtonLinkProps,
+    ribbonProps,
+    footerProps,
+    headingProps,
+    descriptionProps,
+    videoLookupProps
+  } = customProps;
+  const {
+    sliderIndex,
+    isAnimationPaused,
+    translateMovementVal,
+    handleMouseEnter,
+    handleMouseLeave,
+    handleSliderIndexChange,
+    handleSliderNext
+  } = useOnboardingSlider({
+    isAutoPlayAnimation: isAutoPlayAnimation,
+    sliderData: sliderData
+  });
+
+  const renderMediaElement = (imageSource, videoSourceLink, videoSourceFormat) => imageSource ? /*#__PURE__*/React.createElement(Image, {
+    src: imageSource,
+    className: `${style.mediaElement} ${style.image}`
+  }) : videoSourceLink ? /*#__PURE__*/React.createElement("video", {
+    className: style.mediaElement,
+    autoPlay: true,
+    loop: true,
+    muted: true
+  }, /*#__PURE__*/React.createElement("source", {
+    src: videoSourceLink,
+    type: `video/${videoSourceFormat}`
+  })) : null;
+
+  const renderFooter = (sliderData, currentSliderIndex) => {
+    const currentSliderData = sliderData && sliderData[currentSliderIndex];
+    const {
+      hasPrimaryButton = true,
+      hasSecondaryButton = false,
+      hasSecondaryButtonLink = false,
+      primaryButtonText = 'Got it',
+      secondaryButtonText,
+      secondaryButtonLink,
+      tabName
+    } = currentSliderData || DUMMY_OBJECT;
+    const expandedClass = hasExpandedButton ? style.expandedButton : "";
+    const isFinalSlide = sliderData && sliderData.length - 1 === currentSliderIndex;
+
+    const handlePrimaryButtonClick = () => {
+      if (typeof onPrimaryButtonClick == 'function') {
+        onPrimaryButtonClick(tabName);
+      } else {
+        if (!isFinalSlide) {
+          handleSliderNext();
+        } else {
+          onClose && onClose();
+        }
+      }
+    };
+
+    const handleSecondaryButtonClick = () => {
+      if (typeof onSecondaryButtonClick == 'function') {
+        onSecondaryButtonClick(tabName);
+      }
+    };
+
+    return /*#__PURE__*/React.createElement(Flex, {
+      $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.createElement(CarouselDots, {
+      sliderDetails: sliderData,
+      currentSliderIndex: currentSliderIndex,
+      isAnimationPaused: isAnimationPaused,
+      onClick: handleSliderIndexChange,
+      customId: `${customId}_carousel_dots`,
+      testId: `${testId}_carousel_dots`
+    }), /*#__PURE__*/React.createElement(Flex, {
+      $ui_displayMode: "flex",
+      $ui_justifyContent: "end",
+      $flag_flexible: true,
+      $ui_wrapMode: hasExpandedButton ? "wrap" : undefined,
+      $ui_className: style.btnWrapper
+    }, hasSecondaryButton && (hasSecondaryButtonLink ? /*#__PURE__*/React.createElement(Link, {
+      href: secondaryButtonLink,
+      title: secondaryButtonText,
+      dataId: `${customId}_secondary_button_link`,
+      target: "_blank",
+      className: `${style.secondaryButtton} ${style.secondaryButttonLink} ${style.footerButton} ${expandedClass}`,
+      ...secondaryButtonLinkProps
+    }, secondaryButtonText) : /*#__PURE__*/React.createElement(Button, {
+      dataId: `${customId}_secondary_button`,
+      title: secondaryButtonText,
+      text: secondaryButtonText,
+      onClick: handleSecondaryButtonClick,
+      customClass: {
+        customButton: ` ${style.secondaryButtton} ${style.footerButton} ${expandedClass}`
+      },
+      ...secondaryButtonProps
+    })), hasPrimaryButton && /*#__PURE__*/React.createElement(Button, {
+      dataId: `${customId}_primary_button`,
+      title: primaryButtonText,
+      text: primaryButtonText,
+      palette: "primaryFilled",
+      customClass: {
+        customButton: `${style.primaryButton} ${style.footerButton} ${expandedClass}`
+      },
+      onClick: handlePrimaryButtonClick,
+      ...primaryButtonProps
+    })));
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    "data-id": `${customId}_container`,
+    "data-test-id": `${testId}_container`,
+    className: `${style.mainContainer} ${hasBouncAnimationOnMount ? style.mainContainerAnimation : ""}`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.mainWrapper,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.gradientLayer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${style.circleBlur} ${style.circleBlurOne}`
+  }), /*#__PURE__*/React.createElement("div", {
+    className: `${style.circleBlur} ${style.circleBlurTwo}`
+  })), Array.isArray(sliderData) && sliderData.length > 0 ? /*#__PURE__*/React.createElement("div", {
+    className: style.carousel
+  }, /*#__PURE__*/React.createElement(Flex, {
+    $ui_displayMode: "flex",
+    $tagAttributes_container: {
+      style: {
+        '--local_translate_movement': `${translateMovementVal}%`
+      }
+    },
+    $ui_className: style.carouselInner
+  }, sliderData.map((item, index) => {
+    const {
+      imageSource,
+      videoSource,
+      heading,
+      description,
+      hasVideoPlayButton = false,
+      videoLookupSource,
+      tabName
+    } = item;
+    const videoLookupSourceLink = videoLookupSource && videoLookupSource.link ? videoLookupSource.link : null;
+    const videoLookupSourceFormat = videoLookupSource && videoLookupSource.format ? videoLookupSource.format : null;
+    const isEmbeddedvideoLookupSource = videoLookupSource && videoLookupSource.isEmbeddedLink ? videoLookupSource.isEmbeddedLink : null;
+    const videoSourceLink = videoSource && videoSource.link ? videoSource.link : null;
+    const videoSourceFormat = videoSource && videoSource.format ? videoSource.format : null;
+    return /*#__PURE__*/React.createElement(Flex, {
+      $ui_displayMode: "flex",
+      $ui_direction: "column",
+      $flag_shrink: false,
+      $ui_className: style.carouselItem,
+      key: tabName
+    }, /*#__PURE__*/React.createElement(Flex, {
+      $ui_className: style.header,
+      $ui_displayMode: "flex",
+      $ui_justifyContent: "center",
+      $ui_alignItems: "center",
+      $flag_fullsize: true
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `${style.innerHead} ${hasVideoPlayButton ? style.dvLayer : null}`
+    }, renderMediaElement(imageSource, videoSourceLink, videoSourceFormat), hasVideoPlayButton && /*#__PURE__*/React.createElement(Flex, {
+      $ui_displayMode: "flex",
+      $ui_justifyContent: "center",
+      $ui_alignItems: "center",
+      $ui_className: style.playIconWrapper
+    }, /*#__PURE__*/React.createElement(Flex, {
+      $ui_displayMode: "flex",
+      $ui_justifyContent: "center",
+      $ui_alignItems: "center",
+      $ui_tagName: "button",
+      customId: `${customId}_play_icon`,
+      testId: `${testId}_play_icon`,
+      $ui_className: `${style.playIcon} ${style.animate} ${btnStyle.buttonReset}`,
+      $event_onClick: () => openVideoLookup(videoLookupSourceLink, isEmbeddedvideoLookupSource, videoLookupSourceFormat)
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-GN-arrowFill",
+      iconClass: style.playIconInner
+    }))))), /*#__PURE__*/React.createElement(Flex, {
+      $ui_scroll: "vertical",
+      $ui_className: style.content
+    }, /*#__PURE__*/React.createElement(Typography, {
+      $ui_size: "20",
+      $ui_lineClamp: "3",
+      $ui_weight: "bold",
+      $ui_className: style.heading,
+      $i18n_dataTitle: heading,
+      $ui_lineHeight: "1.4",
+      ...headingProps
+    }, heading), /*#__PURE__*/React.createElement(Typography, {
+      $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.createElement(Flex, {
+    $flag_fullsize: true,
+    $ui_tagName: "button",
+    $ui_displayMode: "flex",
+    customId: `${customId}_close_icon`,
+    testId: `${testId}_close_icon`,
+    $ui_justifyContent: "center",
+    $ui_alignItems: "center",
+    $ui_className: `${style.closeIconContainer} ${btnStyle.buttonReset}`,
+    $event_onClick: onClose
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-inappClose",
+    iconClass: style.closeIcon
+  })) : null, hasRibbon ? /*#__PURE__*/React.createElement(Ribbon, {
+    dataId: `${customId}_ribbon`,
+    palette: "primary",
+    size: "medium",
+    customClass: style.newRibbon,
+    type: "flag",
+    text: ribbonText,
+    ...ribbonProps
+  }) : null, isVideoLookupOpen ? /*#__PURE__*/React.createElement(Modal, null, /*#__PURE__*/React.createElement(VideoLookup, {
+    videoFormat: videoLookupFormat,
+    onClose: closeVideoLookup,
+    isEmbeddedLink: isEmbeddedLink,
+    link: videoLookupLink,
+    isOpened: isVideoLookupOpen,
+    closeText: videoLookupCloseText,
+    ...videoLookupProps
+  })) : null));
+};
+
+export default Onboarding;
+Onboarding.propTypes = propTypes;
+Onboarding.defaultProps = defaultProps;