@zohodesk/dot 1.7.8-temp-0 → 1.7.8

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

@@ -1,458 +0,0 @@
-.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;
-
-}
-
-[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);
-  --ribbon_padding:2px 10px 2px 10px 
-}
-[dir=ltr] .newRibbon {
-  left: calc( var(--zd_size6) * -1 )  
-}
-[dir=rtl] .newRibbon {
-  right: calc( var(--zd_size6) * -1 )  
-}
-
-.newRibbon::before {
-  content: '';
-  position: absolute;
-  top: 100% ;
-  bottom: 0 ;
-  width: var(--zd_size6) ;
-  border-style: solid;
-  border-color: var(--zdt_onboarding_ribbon_secondary_border) var(--dot_mirror) var(--dot_mirror);
-}
-
-[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;
-  border-color: var(--zdt_onboarding_ribbon_primary_border) transparent var(--zdt_onboarding_ribbon_primary_border);   
-}
-[dir=ltr] .newRibbon::after{
-  right: calc( var(--zd_size12) * -1 ) ;   
-}
-[dir=rtl] .newRibbon::after{
-  left: calc( var(--zd_size12) * -1 ) ;   
-}
-
-/* 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

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

package/es/Onboarding/hooks/useOnboardingSlider.js

@@ -1,55 +0,0 @@
-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

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

package/es/Onboarding/props/propTypes.js

@@ -1,47 +0,0 @@
-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 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,
-  videoFormats: PropTypes.array,
-  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.string,
-    description: PropTypes.string,
-    hasPrimaryButton: PropTypes.bool,
-    hasVideoPlayButton: PropTypes.bool,
-    hasSecondaryButton: PropTypes.bool,
-    primaryButtonText: PropTypes.string,
-    videoLookupSource: 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)
-  })
-};

package/es/VideoLookup/VideoLookup.js

@@ -1,82 +0,0 @@
-/**** 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,
-    videoFormats
-  } = 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
-  }, videoFormats.map(ext => /*#__PURE__*/React.createElement("source", {
-    key: ext,
-    src: link,
-    type: `video/${ext}`
-  })))));
-}
-VideoLookup.propTypes = propTypes;
-VideoLookup.defaultProps = defaultProps;