@zohodesk/dot 1.7.7 → 1.7.8-temp-0

package/es/Onboarding/Onboarding.js

@@ -0,0 +1,296 @@
+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,
+    videoFormats,
+    hasExpandedButton,
+    onPrimaryButtonClick,
+    onSecondaryButtonClick,
+    customProps
+  } = _ref;
+  const style = useMergeStyle(defaultStyle, customStyle);
+  const {
+    state,
+    openVideoLookup,
+    closeVideoLookup
+  } = useOnboarding();
+  const {
+    videoLookupLink,
+    isVideoLookupOpen,
+    isEmbeddedLink
+  } = state;
+  const {
+    primaryButtonProps,
+    secondaryButtonProps,
+    secondaryButtonLinkProps,
+    ribbonProps,
+    footerProps,
+    headingProps,
+    descriptionProps
+  } = customProps;
+  const {
+    sliderIndex,
+    isAnimationPaused,
+    translateMovementVal,
+    handleMouseEnter,
+    handleMouseLeave,
+    handleSliderIndexChange,
+    handleSliderNext
+  } = useOnboardingSlider({
+    isAutoPlayAnimation: isAutoPlayAnimation,
+    sliderData: sliderData
+  });
+
+  const renderMediaElement = (imageSource, videoSource) => imageSource ? /*#__PURE__*/React.createElement(Image, {
+    src: imageSource,
+    className: `${style.mediaElement} ${style.image}`
+  }) : videoSource ? /*#__PURE__*/React.createElement("video", {
+    className: style.mediaElement,
+    autoPlay: true,
+    loop: true,
+    muted: true
+  }, videoFormats.map(ext => /*#__PURE__*/React.createElement("source", {
+    key: ext,
+    src: videoSource,
+    type: `video/${ext}`
+  }))) : 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
+    }), /*#__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,
+      hasEmbeddedVideoLookupSource = false,
+      tabName
+    } = item;
+    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, videoSource), 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(videoLookupSource, hasEmbeddedVideoLookupSource)
+    }, /*#__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, {
+    videoFormats: videoFormats,
+    onClose: closeVideoLookup,
+    isEmbeddedLink: isEmbeddedLink,
+    link: videoLookupLink,
+    isOpened: isVideoLookupOpen,
+    closeText: videoLookupCloseText
+  })) : null));
+};
+
+export default Onboarding;
+Onboarding.propTypes = propTypes;
+Onboarding.defaultProps = defaultProps;

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

@@ -0,0 +1,413 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Onboarding from "../Onboarding";
+describe('Onboarding', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Onboarding, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering data of hasCloseIcon', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Onboarding, {
+      hasCloseIcon: true,
+      onClose: () => {}
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering data without hasCloseIcon', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Onboarding, {
+      hasCloseIcon: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering prop of ribbonText', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Onboarding, {
+      hasRibbon: true,
+      ribbonText: "closed"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the prop of hasRibbon is false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Onboarding, {
+      hasRibbon: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering data with customStyle', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Onboarding, {
+      customStyle: {
+        mainContainer: "customMainContainer"
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering data of sliderData with heading and description', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Onboarding, {
+      sliderData: [{
+        tabName: "slide1",
+        heading: "Onboarding Heading",
+        description: "Onboarding Description"
+      }]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering data of sliderData with image ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Onboarding, {
+      sliderData: [{
+        imageSource: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3Mu0NdfXXqvCExZ9YG_j93CKuU4DIdcIlEQ&s"
+      }]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering  data of image with hasVideoPlayButton ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Onboarding, {
+      sliderData: [{
+        hasVideoPlayButton: true,
+        imageSource: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3Mu0NdfXXqvCExZ9YG_j93CKuU4DIdcIlEQ&s",
+        videoLookupSource: "https://static.videezy.com/system/resources/previews/000/043/458/original/30_strings.mp4"
+      }]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering  data of image without hasVideoPlayButton', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Onboarding, {
+      sliderData: [{
+        hasVideoPlayButton: false,
+        imageSource: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3Mu0NdfXXqvCExZ9YG_j93CKuU4DIdcIlEQ&s"
+      }]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering  data of videoSource ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Onboarding, {
+      sliderData: [{
+        videoSource: "https://www.w3schools.com/html/mov_bbb.mp4"
+      }]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering data of primaryButtonText', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Onboarding, {
+      sliderData: [{
+        hasPrimaryButton: true,
+        primaryButtonText: "Got it"
+      }]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering data without primaryButtonText', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Onboarding, {
+      sliderData: [{
+        hasPrimaryButton: false
+      }]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering data of secondaryButtonText', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Onboarding, {
+      sliderData: [{
+        hasSecondaryButton: true,
+        secondaryButtonText: "read more"
+      }]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering data without secondaryButtonText', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Onboarding, {
+      sliderData: [{
+        hasSecondaryButton: false
+      }]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering data of SecondaryButton as link', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Onboarding, {
+      sliderData: [{
+        hasSecondaryButton: true,
+        hasSecondaryButtonLink: true,
+        secondaryButtonText: "read more",
+        secondaryButtonLink: "https://gc.zoho.com/org/746519053/widgets/4398000000528001"
+      }]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering data without SecondaryButton as link', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Onboarding, {
+      sliderData: [{
+        hasSecondaryButton: true,
+        hasSecondaryButtonLink: false,
+        secondaryButtonText: "read more"
+      }]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering  data of customprops for primarybuttonprops ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Onboarding, {
+      sliderData: [{
+        tabName: "visibility",
+        hasPrimaryButton: true
+      }],
+      customProps: {
+        primaryButtonProps: {
+          text: "New primaryButton text "
+        }
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering data of two sliderData', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Onboarding, {
+      sliderData: [{
+        tabName: 'slide 1',
+        heading: "Onboarding with carousel Slide 1"
+      }, {
+        tabName: 'slide 2',
+        heading: "Onboarding with carousel Slide 2"
+      }]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering data of hasBouncAnimationOnMount', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Onboarding, {
+      hasBouncAnimationOnMount: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering data without hasBouncAnimationOnMount', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Onboarding, {
+      hasBouncAnimationOnMount: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with customId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Onboarding, {
+      customId: "radar_onboarding",
+      ribbonText: "new",
+      hasCloseIcon: true,
+      sliderData: [{
+        tabName: "video",
+        primaryButtonText: "Got It",
+        secondaryButttonText: "learn more",
+        hasPrimaryButton: true,
+        hasSecondaryButton: true,
+        hasVideoPlayButton: true,
+        videoSource: "https://www.w3schools.com/html/mov_bbb.mp4",
+        heading: "Video source",
+        description: "Onboarding with Video Source – Embeds a video to provide dynamic and allows users to continue watching a video while exploring the interface."
+      }]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with customId - hasSecondaryButtonLink ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Onboarding, {
+      customId: "radar_onboarding",
+      ribbonText: "new",
+      hasCloseIcon: true,
+      sliderData: [{
+        tabName: "visibility",
+        secondaryButtonText: "learn more",
+        hasSecondaryButtonLink: true,
+        secondaryButtonLink: "https://gc.zoho.com/org/746519053/widgets/4398000000528001",
+        hasSecondaryButton: true
+      }]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with testId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Onboarding, {
+      testId: "radar_onboarding",
+      ribbonText: "new",
+      hasCloseIcon: true,
+      sliderData: [{
+        tabName: "video",
+        hasVideoPlayButton: true
+      }]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering data of Video with videoFormats', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Onboarding, {
+      videoFormats: ['webm', 'mp4', 'ogg'],
+      sliderData: [{
+        hasVideoPlayButton: true,
+        videoSource: "https://www.w3schools.com/html/mov_bbb.mp4",
+        videoLookupSource: "https://www.w3schools.com/html/mov_bbb.mp4"
+      }]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering data with hasExpandedButton by hasSecondaryButton, hasSecondaryButtonLink as true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Onboarding, {
+      hasExpandedButton: true,
+      sliderData: [{
+        hasSecondaryButton: true,
+        hasSecondaryButtonLink: true,
+        secondaryButtonLink: "https://gc.zoho.com/org/746519053/widgets/4398000000528001"
+      }]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering data with hasExpandedButton - hasSecondaryButton as true, hasSecondaryButtonLink as false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Onboarding, {
+      hasExpandedButton: true,
+      sliderData: [{
+        hasSecondaryButton: true,
+        hasSecondaryButtonLink: false
+      }]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering data without hasExpandedButton', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Onboarding, {
+      hasExpandedButton: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering  data of customprops for Secondarybuttonprops ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Onboarding, {
+      sliderData: [{
+        tabName: "visibility",
+        hasSecondaryButton: true
+      }],
+      customProps: {
+        secondaryButtonProps: {
+          text: "New secondaryButton text"
+        }
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering  data of customprops for secondaryButtonLinkProps ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Onboarding, {
+      sliderData: [{
+        tabName: "visibility",
+        secondaryButtonText: "learn more",
+        hasSecondaryButtonLink: true,
+        secondaryButtonLink: "https://gc.zoho.com/org/746519053/widgets/4398000000528001",
+        hasSecondaryButton: true
+      }],
+      customProps: {
+        secondaryButtonLinkProps: {
+          target: '_self'
+        }
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering  data of customprops for ribbonProps ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Onboarding, {
+      hasRibbon: true,
+      customProps: {
+        ribbonProps: {
+          type: "sticker"
+        }
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering  data of customprops for footerProps ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Onboarding, {
+      customProps: {
+        footerProps: {
+          $ui_displayMode: 'inline'
+        }
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering  data of customprops for headingProps ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Onboarding, {
+      sliderData: [{
+        tabName: "heading",
+        heading: "Slide 6"
+      }],
+      customProps: {
+        headingProps: {
+          $ui_size: '12'
+        }
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering  data of customprops for descriptionProps ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Onboarding, {
+      sliderData: [{
+        tabName: "description",
+        description: "Discover innovative tools and solutions to streamline your processes and boost productivity on Slide 1."
+      }],
+      customProps: {
+        descriptionProps: {
+          $ui_size: '10'
+        }
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});