@zohodesk/dot 1.0.0-temp-187.10 → 1.0.0-temp-208.1

package/es/Onboarding/css/Onboarding.module.css

@@ -0,0 +1,460 @@
+.mainContainer {
+  width: var(--zd_size360) ;
+}
+
+[dir=ltr] .mainContainerAnimation{
+  transform-origin: 100% 100%;
+  animation: scaleBounce var(--zd_transition4) cubic-bezier(0.5, 0.11, 0.15, 1.5) forwards;
+}
+
+[dir=rtl] .mainContainerAnimation{
+  transform-origin: 0% 100%;
+  animation: scaleBounce var(--zd_transition4) cubic-bezier(0.5, 0.11, 0.15, 1.5) forwards;
+}
+
+@keyframes scaleBounce {
+  0% {
+    transform: scale(0.4);
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+.header {
+  position: relative;
+  height: var(--zd_size200) ;
+  padding: var(--zd_size10) ;
+  background-color: var(--zdt_onboarding_header_bg);
+}
+
+[dir=ltr] .header {
+  border-top-left-radius: inherit;
+}
+
+[dir=rtl] .header {
+  border-top-right-radius: inherit;
+}
+
+.mediaElement {
+  width: 100% ;
+  height: 100% ;
+  object-fit: cover;
+  min-height: var(--zd_size182) ;
+  border-radius: 10px;
+  border: 1px solid var(--zdt_onboarding_header_border);
+}
+
+.image {
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+/* image filter layer */
+.dvLayer {
+  position: relative;
+}
+
+.innerHead{
+  width: 100% ;
+  height: 100% ;
+}
+
+
+.dvLayer::after {
+  content: "";
+  position: absolute;
+  top: calc( var(--zd_size1) * -1 ) ;
+  bottom: calc( var(--zd_size1) * -1 ) ;
+  opacity: 0.2;
+  background-color: var(--zdt_onboarding_primary_bg);
+  border-radius: 11px;
+}
+
+
+[dir=ltr] .dvLayer::after {
+  left: calc( var(--zd_size1) * -1 ) ;
+  right: calc( var(--zd_size1) * -1 ) ;
+}
+
+
+[dir=rtl] .dvLayer::after {
+  right: calc( var(--zd_size1) * -1 ) ;
+  left: calc( var(--zd_size1) * -1 ) ;
+}
+
+
+
+.playIcon {
+  width: var(--zd_size44) ;
+  height: var(--zd_size44) ;
+  z-index: 1;
+  color: var(--zdt_onboarding_play_icon_text);
+  border-radius: 50%;
+  background-color: var(--zdt_onboarding_play_icon_bg);
+  cursor: pointer;
+  border: 2px solid var(--zdt_onboarding_play_icon_border);
+}
+
+
+
+[dir=ltr] .playIcon {
+  padding-left: var(--zd_size3) ;
+}
+
+
+
+[dir=rtl] .playIcon {
+  padding-right: var(--zd_size3) ;
+}
+.playIconInner{
+    /*  Variable:Ignore  */
+  font-size: 60px;
+}
+
+/* play icon animation  */
+.playIconWrapper {
+  position: absolute;
+  top: 0 ;
+  bottom: 0 ;
+  composes: navigate transZ from '~@zohodesk/components/lib/common/animation.module.css';
+}
+[dir=ltr] .playIconWrapper {
+  left: 0 ;
+  right: 0 ;
+}
+[dir=rtl] .playIconWrapper {
+  right: 0 ;
+  left: 0 ;
+}
+.playIconWrapper::before {
+  bottom: 0 ;
+  content: '';
+  position: absolute;
+  top: 0 ;
+  width: var(--zd_size12) ;
+  height: var(--zd_size12) ;
+  /* css:validation:ignore */
+  margin: auto ;
+  box-shadow: 0 0 0 2px var(--zdt_onboarding_collision_unread_shadow);
+  border-radius: 100px;
+}
+[dir=ltr] .playIconWrapper::before {
+  left: 0 ;
+  right: 0 ;
+  animation-duration: var(--zd_transition10);
+}
+[dir=rtl] .playIconWrapper::before {
+  right: 0 ;
+  left: 0 ;
+  animation-duration: var(--zd_transition10);
+}
+
+
+
+.content {
+  padding: var(--zd_size6) var(--zd_size30) ;
+  margin: var(--zd_size16) 0 ;
+}
+
+.heading{
+  /*  */
+}
+
+.description {
+  color: var(--zdt_onboarding_description_text); 
+  margin-top: var(--zd_size8) ;
+}
+
+.footer {
+  gap: var(--zd_size10) ;
+  padding: 0 var(--zd_size30) var(--zd_size30) ;
+  margin-top: var(--zd_size7) ;
+}
+
+.btnWrapper{
+  gap: var(--zd_size10) ;
+  width: 100% ;
+}
+
+.footerButton {
+  min-width: var(--zd_size70) ;
+  font-size: var(--zd_font_size14) ;
+  padding: var(--zd_size12) ;
+}
+
+.secondaryButttonLink {
+  letter-spacing:  0.2px;
+  text-transform: capitalize;
+  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+  border-radius: 4px;
+  cursor: pointer;
+  text-align:center;
+}
+.secondaryButtton{
+  color: var(--zdt_onboarding_learnmore_text);
+  background-color: var(--zdt_onboarding_learnmore_bg);
+  border:1px solid var(--zdt_onboarding_learnmore_border);
+}
+
+.secondaryButtton:hover {
+  color: var(--zdt_onboarding_learnmore_hover_text);
+  border-color: var(--zdt_onboarding_learnmore_hover_border);
+}
+
+.primaryButton {
+  --button_box_shadow: var(--zd_bs_onboarding_primary_button);
+}
+
+/* close icon */
+.closeIcon{
+  z-index: 1;
+  /*  Variable:Ignore  */
+  font-size: 9px; 
+}
+
+.closeIconContainer {
+  position: absolute;
+  height: var(--zd_size32) ;
+  width: var(--zd_size32) ;
+  top: calc( var(--zd_size14) * -1 ) ;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+[dir=ltr] .closeIconContainer {
+  right: calc( var(--zd_size14) * -1 ) ;
+}
+
+[dir=rtl] .closeIconContainer {
+  left: calc( var(--zd_size14) * -1 ) ;
+}
+
+.closeIconContainer::before {
+  content: "";
+  position: absolute;
+  top: calc( var(--zd_size1) * -1 ) ;
+  bottom: calc( var(--zd_size1) * -1 ) ;
+  border-radius: inherit;
+}
+
+[dir=ltr] .closeIconContainer::before {
+  left: calc( var(--zd_size1) * -1 ) ;
+  right: calc( var(--zd_size1) * -1 ) ;
+  background:linear-gradient(0deg, var(--zdt_onboarding_primary_gradient_border), var(--zdt_onboarding_primary_gradient_border)), linear-gradient(141.66deg, var(--zdt_cta_primary_bg) -2.06%, var(--zdt_onboarding_secondary_gradient_border) 17.27%, var(--zdt_onboarding_gradient_border) 37.54%);
+}
+
+[dir=rtl] .closeIconContainer::before {
+  right: calc( var(--zd_size1) * -1 ) ;
+  left: calc( var(--zd_size1) * -1 ) ;
+  background:linear-gradient(0deg, var(--zdt_onboarding_primary_gradient_border), var(--zdt_onboarding_primary_gradient_border)), linear-gradient(-141.66deg, var(--zdt_cta_primary_bg) -2.06%, var(--zdt_onboarding_secondary_gradient_border) 17.27%, var(--zdt_onboarding_gradient_border) 37.54%);
+}
+
+.closeIconContainer::after {
+  content: "";
+  position: absolute;
+  top: 0 ;
+  bottom: 0 ;
+  color: var(--zdt_onboarding_close_icon_text);
+  border-radius: inherit; 
+  background-color: var(--zdt_onboarding_close_icon_bg);
+  box-shadow: var(--zd_bs_onboarding_close_icon);
+}
+
+[dir=ltr] .closeIconContainer::after {
+  left: 0 ;
+  right: 0 ;
+}
+
+[dir=rtl] .closeIconContainer::after {
+  right: 0 ;
+  left: 0 ;
+}
+
+.closeIconContainer:hover::after {
+  background-color: var(--zdt_onboarding_close_icon_hover_bg);
+}
+
+/* ribbon txt */
+.newRibbon {
+  position: absolute;
+  top: var(--zd_size20) ;
+  text-transform: capitalize;
+  overflow: visible;
+  --ribbon_bg_color: var(--zdt_onboarding_ribbon_bg);
+  --ribbon_text_color:var(--zdt_onboarding_ribbon_text);
+}
+[dir=ltr] .newRibbon {
+  left: calc( var(--zd_size6) * -1 ) ;
+  --ribbon_padding:2px 10px 2px 10px 
+    /*rtl:2px 10px 2px 10px */;
+}
+[dir=rtl] .newRibbon {
+  right: calc( var(--zd_size6) * -1 ) ;
+  --ribbon_padding:2px 10px 2px 10px;
+}
+
+.newRibbon::before {
+  content: '';
+  position: absolute;
+  top: 100% ;
+  bottom: 0 ;
+  width: var(--zd_size6) ;
+  border-style: solid;
+  border-color: var(--zdt_onboarding_ribbon_secondary_border) transparent transparent;
+}
+
+[dir=ltr] .newRibbon::before {
+  left: 0 ;
+  border-width: 6px 0px 0px 6px;
+}
+
+[dir=rtl] .newRibbon::before {
+  right: 0 ;
+  border-width: 6px 6px 0px 0px;
+}
+.newRibbon::after{
+  top: 0 ;
+  bottom:0 ;
+  border-width: 12px;
+}
+[dir=ltr] .newRibbon::after{
+  right: calc( var(--zd_size12) * -1 ) ;
+  border-color: var(--zdt_onboarding_ribbon_primary_border) transparent var(--zdt_onboarding_ribbon_primary_border)
+  /*rtl:var(--zdt_onboarding_ribbon_primary_border) transparent var(--zdt_onboarding_ribbon_primary_border) */;
+}
+[dir=rtl] .newRibbon::after{
+  left: calc( var(--zd_size12) * -1 ) ;
+  border-color: var(--zdt_onboarding_ribbon_primary_border) transparent var(--zdt_onboarding_ribbon_primary_border);
+}
+
+/* for gradient border */
+.mainWrapper {
+  width: 100% ;
+  position: relative;
+  border-radius: 20px;
+  box-shadow: var(--zd_bs_onboarding_gradient);
+}
+[dir=ltr] .mainWrapper {
+  background: linear-gradient(214deg, var(--zdt_onboarding_light_gradient_bg) 46.39%, var(--zdt_onboarding_gradient_bg) 95.25%);
+}
+[dir=rtl] .mainWrapper {
+  background: linear-gradient(-214deg, var(--zdt_onboarding_light_gradient_bg) 46.39%, var(--zdt_onboarding_gradient_bg) 95.25%);
+}
+
+.mainWrapper::before {
+  z-index: -1;
+}
+
+[dir=ltr] .mainWrapper::before {
+  background:linear-gradient(0deg, var(--zdt_onboarding_primary_gradient_border), var(--zdt_onboarding_primary_gradient_border)), linear-gradient(141.66deg, var(--zdt_cta_primary_bg) -2.06%, var(--zdt_onboarding_secondary_gradient_border) 17.27%, var(--zdt_onboarding_gradient_border) 37.54%);
+}
+
+[dir=rtl] .mainWrapper::before {
+  background:linear-gradient(0deg, var(--zdt_onboarding_primary_gradient_border), var(--zdt_onboarding_primary_gradient_border)), linear-gradient(-141.66deg, var(--zdt_cta_primary_bg) -2.06%, var(--zdt_onboarding_secondary_gradient_border) 17.27%, var(--zdt_onboarding_gradient_border) 37.54%);
+}
+
+.mainWrapper::before {
+  content: "";
+  position: absolute;
+  top: 0 ;
+  bottom: 0 ;
+  margin: calc( var(--zd_size1) * -1 ) ;
+  border-radius: 20px;
+}
+
+[dir=ltr] .mainWrapper::before {
+  left: 0 ;
+  right: 0 ;
+}
+
+[dir=rtl] .mainWrapper::before {
+  right: 0 ;
+  left: 0 ;
+}
+
+/* for backgrouns graident */
+.gradientLayer {
+  overflow: hidden;
+  /* z-index: 2;  */
+  position: absolute;
+  top: 0 ;
+  bottom: 0 ;
+  pointer-events: none;
+  border-radius: 20px;
+  border-radius: 20px;
+}
+[dir=ltr] .gradientLayer {
+  left: 0 ;
+  right: 0 ;
+}
+[dir=rtl] .gradientLayer {
+  right: 0 ;
+  left: 0 ;
+}
+
+.circleBlur {
+  width: var(--zd_size267) ;
+  height: var(--zd_size227) ;
+  opacity: 0.3;
+  filter: blur(64px);
+  position: absolute;
+  border-radius: 267px;
+  background-color: var(--zdt_onboarding_primary_bg);
+}
+
+.circleBlurOne {
+  top: calc( var(--zd_size30) * -1 ) ;
+}
+
+[dir=ltr] .circleBlurOne {
+  transform: rotate(-33.877deg);
+  left: var(--zd_size98) ;
+}
+
+[dir=rtl] .circleBlurOne {
+  transform: rotate(33.877deg);
+  right: var(--zd_size98) ;
+}
+
+.circleBlurTwo {
+  top: 0 ;
+}
+
+[dir=ltr] .circleBlurTwo {
+  transform: rotate(-33.877deg);
+  right: var(--zd_size315) ;
+}
+
+[dir=rtl] .circleBlurTwo {
+  transform: rotate(33.877deg);
+  left: var(--zd_size315) ;
+}
+
+.expandedButton  {
+  width: 100% ;
+}
+
+/* carousel */
+.carousel {
+  overflow: hidden;
+  width: 100% ;
+  position: relative;
+  border-radius: 20px 20px 0 0;
+}
+.carouselInner {
+  transition: transform var(--zd_transition3) cubic-bezier(0.5, 0.11, 0.15, 1);
+  width: 100% ;
+  transform: translate3d(var(--local_translate_movement), 0, 0)
+}
+.carouselItem {
+  width: 100% 
+}
+
+
+

package/es/Onboarding/hooks/useOnboarding.js

@@ -0,0 +1,34 @@
+import useMergeState from '@zohodesk/hooks/es/utils/useMergeState';
+
+const useOnboarding = props => {
+  const [state, setState] = useMergeState({
+    videoLookupLink: '',
+    isVideoLookupOpen: false,
+    isEmbeddedLink: false,
+    videoLookupFormat: ''
+  });
+
+  const openVideoLookup = (videoLookupSourceLink, isEmbeddedvideoLookupSource, videoLookupSourceFormat) => {
+    setState({
+      videoLookupLink: videoLookupSourceLink,
+      isVideoLookupOpen: true,
+      isEmbeddedLink: isEmbeddedvideoLookupSource,
+      videoLookupFormat: videoLookupSourceFormat
+    });
+  };
+
+  const closeVideoLookup = () => {
+    setState({
+      videoLookupLink: '',
+      isVideoLookupOpen: false
+    });
+  };
+
+  return {
+    state,
+    openVideoLookup,
+    closeVideoLookup
+  };
+};
+
+export default useOnboarding;

package/es/Onboarding/hooks/useOnboardingSlider.js

@@ -0,0 +1,55 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+const autoplayDelay = 50; // 5000ms divided by 100 for smoother animation
+
+const useOnboardingSlider = _ref => {
+  let {
+    isAutoPlayAnimation,
+    sliderData
+  } = _ref;
+  const [currentSlide, setCurrentSlide] = useState(0);
+  const [autoplay, setAutoplay] = useState(true);
+  const progressRef = useRef(0);
+  const totalSlidesArrayLen = sliderData.length;
+  const handleSliderIndexChange = useCallback(index => {
+    progressRef.current = 0;
+    setCurrentSlide(index);
+  }, []);
+  const handleSliderNext = useCallback(() => {
+    progressRef.current = 0;
+    setCurrentSlide(currentSlide + 1);
+    setAutoplay(false);
+  }, [currentSlide]);
+  const handleMouseEnter = useCallback(() => {
+    setAutoplay(false);
+  }, []);
+  const handleMouseLeave = useCallback(() => {
+    setAutoplay(true);
+  }, []);
+  useEffect(() => {
+    let progressInterval;
+
+    if (autoplay && isAutoPlayAnimation && totalSlidesArrayLen > 1) {
+      progressInterval = setInterval(() => {
+        progressRef.current = progressRef.current < 100 ? progressRef.current + 1 : 0;
+
+        if (progressRef.current === 0) {
+          setCurrentSlide((currentSlide + 1) % totalSlidesArrayLen);
+        }
+      }, autoplayDelay);
+    }
+
+    return () => clearInterval(progressInterval);
+  }, [autoplay, currentSlide, isAutoPlayAnimation]);
+  const translateMovementVal = -currentSlide * 100;
+  return {
+    sliderIndex: currentSlide,
+    isAnimationPaused: !autoplay,
+    translateMovementVal,
+    handleMouseEnter,
+    handleMouseLeave,
+    handleSliderIndexChange,
+    handleSliderNext
+  };
+};
+
+export default useOnboardingSlider;

package/es/Onboarding/props/defaultProps.js

@@ -0,0 +1,13 @@
+export const defaultProps = {
+  ribbonText: "New",
+  videoLookupCloseText: "Esc",
+  isAutoPlayAnimation: true,
+  customId: "onboarding",
+  testId: 'onboarding',
+  sliderData: [],
+  hasExpandedButton: false,
+  customProps: {},
+  hasBouncAnimationOnMount: true,
+  hasCloseIcon: true,
+  hasRibbon: true
+};

package/es/Onboarding/props/propTypes.js

@@ -0,0 +1,55 @@
+import PropTypes from 'prop-types';
+import FlexPropType from '@zohodesk/layout/es/Flex/props/propTypes';
+import { propTypes as RibbonPropType } from '@zohodesk/components/es/Ribbon/props/propTypes';
+import { propTypes as ButtonPropType } from '@zohodesk/components/es/Button/props/propTypes';
+import { propTypes as LinkPropType } from "../../Link/props/propTypes";
+import { propTypes as VideoLookupPropType } from "../../VideoLookup/props/propTypes";
+import { propTypes as TypographyPropType } from '@zohodesk/components/es/Typography/props/propTypes';
+export const propTypes = {
+  onClose: PropTypes.func,
+  testId: PropTypes.string,
+  hasRibbon: PropTypes.bool,
+  customId: PropTypes.string,
+  ribbonText: PropTypes.string,
+  hasCloseIcon: PropTypes.bool,
+  customStyle: PropTypes.object,
+  hasExpandedButton: PropTypes.bool,
+  isAutoPlayAnimation: PropTypes.bool,
+  onPrimaryButtonClick: PropTypes.func,
+  videoLookupCloseText: PropTypes.string,
+  onSecondaryButtonClick: PropTypes.func,
+  hasBouncAnimationOnMount: PropTypes.bool,
+  sliderData: PropTypes.arrayOf(PropTypes.shape({
+    heading: PropTypes.string,
+    imageSource: PropTypes.string,
+    videoSource: PropTypes.shape({
+      link: PropTypes.string,
+      videoFormat: PropTypes.string
+    }),
+    description: PropTypes.string,
+    hasPrimaryButton: PropTypes.bool,
+    hasVideoPlayButton: PropTypes.bool,
+    hasSecondaryButton: PropTypes.bool,
+    primaryButtonText: PropTypes.string,
+    videoLookupSource: PropTypes.shape({
+      link: PropTypes.string,
+      isEmbeddedLink: PropTypes.bool,
+      videoFormat: PropTypes.string
+    }),
+    tabName: PropTypes.string.isRequired,
+    hasSecondaryButtonLink: PropTypes.bool,
+    secondaryButttonLink: PropTypes.string,
+    secondaryButttonText: PropTypes.string,
+    hasEmbeddedVideoLookupSource: PropTypes.bool
+  })),
+  customProps: PropTypes.shape({
+    footerProps: PropTypes.exact(FlexPropType),
+    ribbonProps: PropTypes.exact(RibbonPropType),
+    headingProps: PropTypes.exact(TypographyPropType),
+    primaryButtonProps: PropTypes.exact(ButtonPropType),
+    secondaryButtonProps: PropTypes.exact(ButtonPropType),
+    descriptionProps: PropTypes.exact(TypographyPropType),
+    secondaryButtonLinkProps: PropTypes.exact(LinkPropType),
+    videoLookupProps: PropTypes.exact(VideoLookupPropType)
+  })
+};

package/es/VideoLookup/VideoLookup.js

@@ -0,0 +1,81 @@
+/**** Libraries ****/
+import React, { useCallback, useEffect } from 'react';
+import Icon from '@zohodesk/icons/lib/Icon';
+import Button from '@zohodesk/components/es/Button/Button';
+import Typography from '@zohodesk/components/es/Typography/Typography';
+import { mergeStyle } from '@zohodesk/utils';
+import FreezeLayer from "../FreezeLayer/FreezeLayer";
+/**propTypes**/
+
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+/**** Styles ****/
+
+import defaultStyle from "./css/VideoLookup.module.css";
+export default function VideoLookup(props) {
+  const {
+    isOpened,
+    link,
+    onClose,
+    closeText,
+    isEmbeddedLink,
+    customStyle,
+    testId,
+    customId,
+    videoFormat
+  } = props;
+  const style = mergeStyle(defaultStyle, customStyle);
+  const handleKeyPress = useCallback(e => {
+    if (e.keyCode == '27') {
+      onClose(e);
+    } else {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  }, [onClose]);
+  useEffect(() => {
+    document.addEventListener('keyup', handleKeyPress);
+    return () => {
+      document.removeEventListener('keyup', handleKeyPress);
+    };
+  }, [handleKeyPress]);
+  return /*#__PURE__*/React.createElement(FreezeLayer, {
+    align: "both",
+    animationName: "fade",
+    isActive: isOpened,
+    palette: "dark"
+  }, /*#__PURE__*/React.createElement(Button, {
+    customClass: {
+      customButton: style.close
+    },
+    dataId: `${customId}_close_icon`,
+    palette: "plainSecondary",
+    size: "medium",
+    rounded: true,
+    onClick: onClose
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-close2",
+    size: "9"
+  }), /*#__PURE__*/React.createElement(Typography, {
+    $ui_size: "14",
+    $flag_dotted: true
+  }, closeText)), /*#__PURE__*/React.createElement("div", {
+    className: style.videoContainer,
+    "data-id": `${customId}_container`,
+    "data-test-id": `${testId}_container`
+  }, isEmbeddedLink ? /*#__PURE__*/React.createElement("iframe", {
+    src: link,
+    allowFullScreen: true,
+    allow: "autoplay",
+    className: style.videoIframe
+  }) : /*#__PURE__*/React.createElement("video", {
+    autoPlay: true,
+    controls: true,
+    className: style.videoPlayer
+  }, /*#__PURE__*/React.createElement("source", {
+    src: link,
+    type: `video/${videoFormat}`
+  }))));
+}
+VideoLookup.propTypes = propTypes;
+VideoLookup.defaultProps = defaultProps;