@zohodesk/dot 1.7.7 → 1.7.8-temp-0

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

@@ -0,0 +1,3581 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Onboarding rendering  data of customprops for Secondarybuttonprops  1`] = `
+<DocumentFragment>
+  <div
+    class="mainContainer mainContainerAnimation"
+    data-id="onboarding_container"
+    data-test-id="onboarding_container"
+  >
+    <div
+      class="mainWrapper"
+    >
+      <div
+        class="gradientLayer"
+      >
+        <div
+          class="circleBlur circleBlurOne"
+        />
+        <div
+          class="circleBlur circleBlurTwo"
+        />
+      </div>
+      <div
+        class="carousel"
+      >
+        <div
+          class="flex row carouselInner"
+          data-id="flex"
+          data-test-id="flex"
+          style="--local_translate_movement: 0%;"
+        >
+          <div
+            class="flex column noShrink carouselItem"
+            data-id="flex"
+            data-test-id="flex"
+          >
+            <div
+              class="flex row alignItems_center justifyContent_center fullSize header"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="innerHead null"
+              />
+            </div>
+            <div
+              class="scroll_vertical content"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
+              />
+              <div
+                class="size14 lineclamp_4 lineheight_1_6 description"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="flex row alignItems_center footer"
+        data-id="flex"
+        data-test-id="flex"
+      >
+        <div
+          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
+          data-id="flex"
+          data-test-id="flex"
+        >
+          <button
+            class=" secondaryButtton footerButton  bold primary medium"
+            data-id="onboarding_secondary_button"
+            data-selector-id="button"
+            data-test-id="onboarding_secondary_button"
+            type="button"
+          >
+            New secondaryButton text
+          </button>
+          <button
+            class="primaryButton footerButton  bold primaryfilled medium"
+            data-id="onboarding_primary_button"
+            data-selector-id="button"
+            data-test-id="onboarding_primary_button"
+            data-title="Got it"
+            type="button"
+          >
+            Got it
+          </button>
+        </div>
+      </div>
+      <button
+        class="flex row alignItems_center justifyContent_center fullSize closeIconContainer buttonReset"
+        data-id="onboarding_close_icon"
+        data-test-id="onboarding_close_icon"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-inapp-close  closeIcon  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+        />
+      </button>
+      <span
+        class="basic newRibbon palette_primary  medium flag"
+        data-id="onboarding_ribbon"
+        data-selector-id="ribbon"
+        data-test-id="onboarding_ribbon"
+      >
+        <span
+          class="childText"
+        >
+          New
+        </span>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Onboarding rendering  data of customprops for descriptionProps  1`] = `
+<DocumentFragment>
+  <div
+    class="mainContainer mainContainerAnimation"
+    data-id="onboarding_container"
+    data-test-id="onboarding_container"
+  >
+    <div
+      class="mainWrapper"
+    >
+      <div
+        class="gradientLayer"
+      >
+        <div
+          class="circleBlur circleBlurOne"
+        />
+        <div
+          class="circleBlur circleBlurTwo"
+        />
+      </div>
+      <div
+        class="carousel"
+      >
+        <div
+          class="flex row carouselInner"
+          data-id="flex"
+          data-test-id="flex"
+          style="--local_translate_movement: 0%;"
+        >
+          <div
+            class="flex column noShrink carouselItem"
+            data-id="flex"
+            data-test-id="flex"
+          >
+            <div
+              class="flex row alignItems_center justifyContent_center fullSize header"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="innerHead null"
+              />
+            </div>
+            <div
+              class="scroll_vertical content"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
+              />
+              <div
+                class="size10 lineclamp_4 lineheight_1_6 description"
+                data-title="Discover innovative tools and solutions to streamline your processes and boost productivity on Slide 1."
+              >
+                Discover innovative tools and solutions to streamline your processes and boost productivity on Slide 1.
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="flex row alignItems_center footer"
+        data-id="flex"
+        data-test-id="flex"
+      >
+        <div
+          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
+          data-id="flex"
+          data-test-id="flex"
+        >
+          <button
+            class="primaryButton footerButton  bold primaryfilled medium"
+            data-id="onboarding_primary_button"
+            data-selector-id="button"
+            data-test-id="onboarding_primary_button"
+            data-title="Got it"
+            type="button"
+          >
+            Got it
+          </button>
+        </div>
+      </div>
+      <button
+        class="flex row alignItems_center justifyContent_center fullSize closeIconContainer buttonReset"
+        data-id="onboarding_close_icon"
+        data-test-id="onboarding_close_icon"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-inapp-close  closeIcon  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+        />
+      </button>
+      <span
+        class="basic newRibbon palette_primary  medium flag"
+        data-id="onboarding_ribbon"
+        data-selector-id="ribbon"
+        data-test-id="onboarding_ribbon"
+      >
+        <span
+          class="childText"
+        >
+          New
+        </span>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Onboarding rendering  data of customprops for footerProps  1`] = `
+<DocumentFragment>
+  <div
+    class="mainContainer mainContainerAnimation"
+    data-id="onboarding_container"
+    data-test-id="onboarding_container"
+  >
+    <div
+      class="mainWrapper"
+    >
+      <div
+        class="gradientLayer"
+      >
+        <div
+          class="circleBlur circleBlurOne"
+        />
+        <div
+          class="circleBlur circleBlurTwo"
+        />
+      </div>
+      <div
+        class="inlineFlex row alignItems_center footer"
+        data-id="flex"
+        data-test-id="flex"
+      >
+        <div
+          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
+          data-id="flex"
+          data-test-id="flex"
+        >
+          <button
+            class="primaryButton footerButton  bold primaryfilled medium"
+            data-id="onboarding_primary_button"
+            data-selector-id="button"
+            data-test-id="onboarding_primary_button"
+            data-title="Got it"
+            type="button"
+          >
+            Got it
+          </button>
+        </div>
+      </div>
+      <button
+        class="flex row alignItems_center justifyContent_center fullSize closeIconContainer buttonReset"
+        data-id="onboarding_close_icon"
+        data-test-id="onboarding_close_icon"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-inapp-close  closeIcon  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+        />
+      </button>
+      <span
+        class="basic newRibbon palette_primary  medium flag"
+        data-id="onboarding_ribbon"
+        data-selector-id="ribbon"
+        data-test-id="onboarding_ribbon"
+      >
+        <span
+          class="childText"
+        >
+          New
+        </span>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Onboarding rendering  data of customprops for headingProps  1`] = `
+<DocumentFragment>
+  <div
+    class="mainContainer mainContainerAnimation"
+    data-id="onboarding_container"
+    data-test-id="onboarding_container"
+  >
+    <div
+      class="mainWrapper"
+    >
+      <div
+        class="gradientLayer"
+      >
+        <div
+          class="circleBlur circleBlurOne"
+        />
+        <div
+          class="circleBlur circleBlurTwo"
+        />
+      </div>
+      <div
+        class="carousel"
+      >
+        <div
+          class="flex row carouselInner"
+          data-id="flex"
+          data-test-id="flex"
+          style="--local_translate_movement: 0%;"
+        >
+          <div
+            class="flex column noShrink carouselItem"
+            data-id="flex"
+            data-test-id="flex"
+          >
+            <div
+              class="flex row alignItems_center justifyContent_center fullSize header"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="innerHead null"
+              />
+            </div>
+            <div
+              class="scroll_vertical content"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="size12 lineclamp_3 lineheight_1_4 font_bold heading"
+                data-title="Slide 6"
+              >
+                Slide 6
+              </div>
+              <div
+                class="size14 lineclamp_4 lineheight_1_6 description"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="flex row alignItems_center footer"
+        data-id="flex"
+        data-test-id="flex"
+      >
+        <div
+          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
+          data-id="flex"
+          data-test-id="flex"
+        >
+          <button
+            class="primaryButton footerButton  bold primaryfilled medium"
+            data-id="onboarding_primary_button"
+            data-selector-id="button"
+            data-test-id="onboarding_primary_button"
+            data-title="Got it"
+            type="button"
+          >
+            Got it
+          </button>
+        </div>
+      </div>
+      <button
+        class="flex row alignItems_center justifyContent_center fullSize closeIconContainer buttonReset"
+        data-id="onboarding_close_icon"
+        data-test-id="onboarding_close_icon"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-inapp-close  closeIcon  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+        />
+      </button>
+      <span
+        class="basic newRibbon palette_primary  medium flag"
+        data-id="onboarding_ribbon"
+        data-selector-id="ribbon"
+        data-test-id="onboarding_ribbon"
+      >
+        <span
+          class="childText"
+        >
+          New
+        </span>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Onboarding rendering  data of customprops for primarybuttonprops  1`] = `
+<DocumentFragment>
+  <div
+    class="mainContainer mainContainerAnimation"
+    data-id="onboarding_container"
+    data-test-id="onboarding_container"
+  >
+    <div
+      class="mainWrapper"
+    >
+      <div
+        class="gradientLayer"
+      >
+        <div
+          class="circleBlur circleBlurOne"
+        />
+        <div
+          class="circleBlur circleBlurTwo"
+        />
+      </div>
+      <div
+        class="carousel"
+      >
+        <div
+          class="flex row carouselInner"
+          data-id="flex"
+          data-test-id="flex"
+          style="--local_translate_movement: 0%;"
+        >
+          <div
+            class="flex column noShrink carouselItem"
+            data-id="flex"
+            data-test-id="flex"
+          >
+            <div
+              class="flex row alignItems_center justifyContent_center fullSize header"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="innerHead null"
+              />
+            </div>
+            <div
+              class="scroll_vertical content"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
+              />
+              <div
+                class="size14 lineclamp_4 lineheight_1_6 description"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="flex row alignItems_center footer"
+        data-id="flex"
+        data-test-id="flex"
+      >
+        <div
+          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
+          data-id="flex"
+          data-test-id="flex"
+        >
+          <button
+            class="primaryButton footerButton  bold primaryfilled medium"
+            data-id="onboarding_primary_button"
+            data-selector-id="button"
+            data-test-id="onboarding_primary_button"
+            data-title="Got it"
+            type="button"
+          >
+            New primaryButton text 
+          </button>
+        </div>
+      </div>
+      <button
+        class="flex row alignItems_center justifyContent_center fullSize closeIconContainer buttonReset"
+        data-id="onboarding_close_icon"
+        data-test-id="onboarding_close_icon"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-inapp-close  closeIcon  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+        />
+      </button>
+      <span
+        class="basic newRibbon palette_primary  medium flag"
+        data-id="onboarding_ribbon"
+        data-selector-id="ribbon"
+        data-test-id="onboarding_ribbon"
+      >
+        <span
+          class="childText"
+        >
+          New
+        </span>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Onboarding rendering  data of customprops for ribbonProps  1`] = `
+<DocumentFragment>
+  <div
+    class="mainContainer mainContainerAnimation"
+    data-id="onboarding_container"
+    data-test-id="onboarding_container"
+  >
+    <div
+      class="mainWrapper"
+    >
+      <div
+        class="gradientLayer"
+      >
+        <div
+          class="circleBlur circleBlurOne"
+        />
+        <div
+          class="circleBlur circleBlurTwo"
+        />
+      </div>
+      <div
+        class="flex row alignItems_center footer"
+        data-id="flex"
+        data-test-id="flex"
+      >
+        <div
+          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
+          data-id="flex"
+          data-test-id="flex"
+        >
+          <button
+            class="primaryButton footerButton  bold primaryfilled medium"
+            data-id="onboarding_primary_button"
+            data-selector-id="button"
+            data-test-id="onboarding_primary_button"
+            data-title="Got it"
+            type="button"
+          >
+            Got it
+          </button>
+        </div>
+      </div>
+      <button
+        class="flex row alignItems_center justifyContent_center fullSize closeIconContainer buttonReset"
+        data-id="onboarding_close_icon"
+        data-test-id="onboarding_close_icon"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-inapp-close  closeIcon  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+        />
+      </button>
+      <span
+        class="basic newRibbon palette_primary  medium sticker"
+        data-id="onboarding_ribbon"
+        data-selector-id="ribbon"
+        data-test-id="onboarding_ribbon"
+      >
+        <span
+          class="after"
+        />
+        <span
+          class="childText"
+        >
+          New
+        </span>
+        <span
+          class="before"
+        />
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Onboarding rendering  data of customprops for secondaryButtonLinkProps  1`] = `
+<DocumentFragment>
+  <div
+    class="mainContainer mainContainerAnimation"
+    data-id="onboarding_container"
+    data-test-id="onboarding_container"
+  >
+    <div
+      class="mainWrapper"
+    >
+      <div
+        class="gradientLayer"
+      >
+        <div
+          class="circleBlur circleBlurOne"
+        />
+        <div
+          class="circleBlur circleBlurTwo"
+        />
+      </div>
+      <div
+        class="carousel"
+      >
+        <div
+          class="flex row carouselInner"
+          data-id="flex"
+          data-test-id="flex"
+          style="--local_translate_movement: 0%;"
+        >
+          <div
+            class="flex column noShrink carouselItem"
+            data-id="flex"
+            data-test-id="flex"
+          >
+            <div
+              class="flex row alignItems_center justifyContent_center fullSize header"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="innerHead null"
+              />
+            </div>
+            <div
+              class="scroll_vertical content"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
+              />
+              <div
+                class="size14 lineclamp_4 lineheight_1_6 description"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="flex row alignItems_center footer"
+        data-id="flex"
+        data-test-id="flex"
+      >
+        <div
+          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
+          data-id="flex"
+          data-test-id="flex"
+        >
+          <a
+            class="container  secondaryButtton secondaryButttonLink footerButton "
+            data-id="onboarding_secondary_button_link"
+            data-test-id="onboarding_secondary_button_link"
+            data-title="learn more"
+            href="https://gc.zoho.com/org/746519053/widgets/4398000000528001"
+            rel="noopener noreferrer"
+            target="_self"
+          >
+            learn more
+          </a>
+          <button
+            class="primaryButton footerButton  bold primaryfilled medium"
+            data-id="onboarding_primary_button"
+            data-selector-id="button"
+            data-test-id="onboarding_primary_button"
+            data-title="Got it"
+            type="button"
+          >
+            Got it
+          </button>
+        </div>
+      </div>
+      <button
+        class="flex row alignItems_center justifyContent_center fullSize closeIconContainer buttonReset"
+        data-id="onboarding_close_icon"
+        data-test-id="onboarding_close_icon"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-inapp-close  closeIcon  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+        />
+      </button>
+      <span
+        class="basic newRibbon palette_primary  medium flag"
+        data-id="onboarding_ribbon"
+        data-selector-id="ribbon"
+        data-test-id="onboarding_ribbon"
+      >
+        <span
+          class="childText"
+        >
+          New
+        </span>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Onboarding rendering  data of image with hasVideoPlayButton  1`] = `
+<DocumentFragment>
+  <div
+    class="mainContainer mainContainerAnimation"
+    data-id="onboarding_container"
+    data-test-id="onboarding_container"
+  >
+    <div
+      class="mainWrapper"
+    >
+      <div
+        class="gradientLayer"
+      >
+        <div
+          class="circleBlur circleBlurOne"
+        />
+        <div
+          class="circleBlur circleBlurTwo"
+        />
+      </div>
+      <div
+        class="carousel"
+      >
+        <div
+          class="flex row carouselInner"
+          data-id="flex"
+          data-test-id="flex"
+          style="--local_translate_movement: 0%;"
+        >
+          <div
+            class="flex column noShrink carouselItem"
+            data-id="flex"
+            data-test-id="flex"
+          >
+            <div
+              class="flex row alignItems_center justifyContent_center fullSize header"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="innerHead dvLayer"
+              >
+                <img
+                  class=" mediaElement image imgMaxFullSize "
+                  src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3Mu0NdfXXqvCExZ9YG_j93CKuU4DIdcIlEQ&s"
+                />
+                <div
+                  class="flex row alignItems_center justifyContent_center playIconWrapper"
+                  data-id="flex"
+                  data-test-id="flex"
+                >
+                  <button
+                    class="flex row alignItems_center justifyContent_center playIcon undefined buttonReset"
+                    data-id="onboarding_play_icon"
+                    data-test-id="onboarding_play_icon"
+                  >
+                    <i
+                      aria-hidden="true"
+                      class="zd_font_icons basic icon-arrowFill  playIconInner  "
+                      data-id="fontIcon"
+                      data-selector-id="fontIcon"
+                      data-test-id="fontIcon"
+                    />
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div
+              class="scroll_vertical content"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
+              />
+              <div
+                class="size14 lineclamp_4 lineheight_1_6 description"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="flex row alignItems_center footer"
+        data-id="flex"
+        data-test-id="flex"
+      >
+        <div
+          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
+          data-id="flex"
+          data-test-id="flex"
+        >
+          <button
+            class="primaryButton footerButton  bold primaryfilled medium"
+            data-id="onboarding_primary_button"
+            data-selector-id="button"
+            data-test-id="onboarding_primary_button"
+            data-title="Got it"
+            type="button"
+          >
+            Got it
+          </button>
+        </div>
+      </div>
+      <button
+        class="flex row alignItems_center justifyContent_center fullSize closeIconContainer buttonReset"
+        data-id="onboarding_close_icon"
+        data-test-id="onboarding_close_icon"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-inapp-close  closeIcon  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+        />
+      </button>
+      <span
+        class="basic newRibbon palette_primary  medium flag"
+        data-id="onboarding_ribbon"
+        data-selector-id="ribbon"
+        data-test-id="onboarding_ribbon"
+      >
+        <span
+          class="childText"
+        >
+          New
+        </span>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Onboarding rendering  data of image without hasVideoPlayButton 1`] = `
+<DocumentFragment>
+  <div
+    class="mainContainer mainContainerAnimation"
+    data-id="onboarding_container"
+    data-test-id="onboarding_container"
+  >
+    <div
+      class="mainWrapper"
+    >
+      <div
+        class="gradientLayer"
+      >
+        <div
+          class="circleBlur circleBlurOne"
+        />
+        <div
+          class="circleBlur circleBlurTwo"
+        />
+      </div>
+      <div
+        class="carousel"
+      >
+        <div
+          class="flex row carouselInner"
+          data-id="flex"
+          data-test-id="flex"
+          style="--local_translate_movement: 0%;"
+        >
+          <div
+            class="flex column noShrink carouselItem"
+            data-id="flex"
+            data-test-id="flex"
+          >
+            <div
+              class="flex row alignItems_center justifyContent_center fullSize header"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="innerHead null"
+              >
+                <img
+                  class=" mediaElement image imgMaxFullSize "
+                  src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3Mu0NdfXXqvCExZ9YG_j93CKuU4DIdcIlEQ&s"
+                />
+              </div>
+            </div>
+            <div
+              class="scroll_vertical content"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
+              />
+              <div
+                class="size14 lineclamp_4 lineheight_1_6 description"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="flex row alignItems_center footer"
+        data-id="flex"
+        data-test-id="flex"
+      >
+        <div
+          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
+          data-id="flex"
+          data-test-id="flex"
+        >
+          <button
+            class="primaryButton footerButton  bold primaryfilled medium"
+            data-id="onboarding_primary_button"
+            data-selector-id="button"
+            data-test-id="onboarding_primary_button"
+            data-title="Got it"
+            type="button"
+          >
+            Got it
+          </button>
+        </div>
+      </div>
+      <button
+        class="flex row alignItems_center justifyContent_center fullSize closeIconContainer buttonReset"
+        data-id="onboarding_close_icon"
+        data-test-id="onboarding_close_icon"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-inapp-close  closeIcon  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+        />
+      </button>
+      <span
+        class="basic newRibbon palette_primary  medium flag"
+        data-id="onboarding_ribbon"
+        data-selector-id="ribbon"
+        data-test-id="onboarding_ribbon"
+      >
+        <span
+          class="childText"
+        >
+          New
+        </span>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Onboarding rendering  data of videoSource  1`] = `
+<DocumentFragment>
+  <div
+    class="mainContainer mainContainerAnimation"
+    data-id="onboarding_container"
+    data-test-id="onboarding_container"
+  >
+    <div
+      class="mainWrapper"
+    >
+      <div
+        class="gradientLayer"
+      >
+        <div
+          class="circleBlur circleBlurOne"
+        />
+        <div
+          class="circleBlur circleBlurTwo"
+        />
+      </div>
+      <div
+        class="carousel"
+      >
+        <div
+          class="flex row carouselInner"
+          data-id="flex"
+          data-test-id="flex"
+          style="--local_translate_movement: 0%;"
+        >
+          <div
+            class="flex column noShrink carouselItem"
+            data-id="flex"
+            data-test-id="flex"
+          >
+            <div
+              class="flex row alignItems_center justifyContent_center fullSize header"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="innerHead null"
+              >
+                <video
+                  autoplay=""
+                  class="mediaElement"
+                  loop=""
+                >
+                  <source
+                    src="https://www.w3schools.com/html/mov_bbb.mp4"
+                    type="video/mp4"
+                  />
+                </video>
+              </div>
+            </div>
+            <div
+              class="scroll_vertical content"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
+              />
+              <div
+                class="size14 lineclamp_4 lineheight_1_6 description"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="flex row alignItems_center footer"
+        data-id="flex"
+        data-test-id="flex"
+      >
+        <div
+          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
+          data-id="flex"
+          data-test-id="flex"
+        >
+          <button
+            class="primaryButton footerButton  bold primaryfilled medium"
+            data-id="onboarding_primary_button"
+            data-selector-id="button"
+            data-test-id="onboarding_primary_button"
+            data-title="Got it"
+            type="button"
+          >
+            Got it
+          </button>
+        </div>
+      </div>
+      <button
+        class="flex row alignItems_center justifyContent_center fullSize closeIconContainer buttonReset"
+        data-id="onboarding_close_icon"
+        data-test-id="onboarding_close_icon"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-inapp-close  closeIcon  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+        />
+      </button>
+      <span
+        class="basic newRibbon palette_primary  medium flag"
+        data-id="onboarding_ribbon"
+        data-selector-id="ribbon"
+        data-test-id="onboarding_ribbon"
+      >
+        <span
+          class="childText"
+        >
+          New
+        </span>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Onboarding rendering data of SecondaryButton as link 1`] = `
+<DocumentFragment>
+  <div
+    class="mainContainer mainContainerAnimation"
+    data-id="onboarding_container"
+    data-test-id="onboarding_container"
+  >
+    <div
+      class="mainWrapper"
+    >
+      <div
+        class="gradientLayer"
+      >
+        <div
+          class="circleBlur circleBlurOne"
+        />
+        <div
+          class="circleBlur circleBlurTwo"
+        />
+      </div>
+      <div
+        class="carousel"
+      >
+        <div
+          class="flex row carouselInner"
+          data-id="flex"
+          data-test-id="flex"
+          style="--local_translate_movement: 0%;"
+        >
+          <div
+            class="flex column noShrink carouselItem"
+            data-id="flex"
+            data-test-id="flex"
+          >
+            <div
+              class="flex row alignItems_center justifyContent_center fullSize header"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="innerHead null"
+              />
+            </div>
+            <div
+              class="scroll_vertical content"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
+              />
+              <div
+                class="size14 lineclamp_4 lineheight_1_6 description"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="flex row alignItems_center footer"
+        data-id="flex"
+        data-test-id="flex"
+      >
+        <div
+          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
+          data-id="flex"
+          data-test-id="flex"
+        >
+          <a
+            class="container  secondaryButtton secondaryButttonLink footerButton "
+            data-id="onboarding_secondary_button_link"
+            data-test-id="onboarding_secondary_button_link"
+            data-title="read more"
+            href="https://gc.zoho.com/org/746519053/widgets/4398000000528001"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            read more
+          </a>
+          <button
+            class="primaryButton footerButton  bold primaryfilled medium"
+            data-id="onboarding_primary_button"
+            data-selector-id="button"
+            data-test-id="onboarding_primary_button"
+            data-title="Got it"
+            type="button"
+          >
+            Got it
+          </button>
+        </div>
+      </div>
+      <button
+        class="flex row alignItems_center justifyContent_center fullSize closeIconContainer buttonReset"
+        data-id="onboarding_close_icon"
+        data-test-id="onboarding_close_icon"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-inapp-close  closeIcon  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+        />
+      </button>
+      <span
+        class="basic newRibbon palette_primary  medium flag"
+        data-id="onboarding_ribbon"
+        data-selector-id="ribbon"
+        data-test-id="onboarding_ribbon"
+      >
+        <span
+          class="childText"
+        >
+          New
+        </span>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Onboarding rendering data of Video with videoFormats 1`] = `
+<DocumentFragment>
+  <div
+    class="mainContainer mainContainerAnimation"
+    data-id="onboarding_container"
+    data-test-id="onboarding_container"
+  >
+    <div
+      class="mainWrapper"
+    >
+      <div
+        class="gradientLayer"
+      >
+        <div
+          class="circleBlur circleBlurOne"
+        />
+        <div
+          class="circleBlur circleBlurTwo"
+        />
+      </div>
+      <div
+        class="carousel"
+      >
+        <div
+          class="flex row carouselInner"
+          data-id="flex"
+          data-test-id="flex"
+          style="--local_translate_movement: 0%;"
+        >
+          <div
+            class="flex column noShrink carouselItem"
+            data-id="flex"
+            data-test-id="flex"
+          >
+            <div
+              class="flex row alignItems_center justifyContent_center fullSize header"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="innerHead dvLayer"
+              >
+                <video
+                  autoplay=""
+                  class="mediaElement"
+                  loop=""
+                >
+                  <source
+                    src="https://www.w3schools.com/html/mov_bbb.mp4"
+                    type="video/webm"
+                  />
+                  <source
+                    src="https://www.w3schools.com/html/mov_bbb.mp4"
+                    type="video/mp4"
+                  />
+                  <source
+                    src="https://www.w3schools.com/html/mov_bbb.mp4"
+                    type="video/ogg"
+                  />
+                </video>
+                <div
+                  class="flex row alignItems_center justifyContent_center playIconWrapper"
+                  data-id="flex"
+                  data-test-id="flex"
+                >
+                  <button
+                    class="flex row alignItems_center justifyContent_center playIcon undefined buttonReset"
+                    data-id="onboarding_play_icon"
+                    data-test-id="onboarding_play_icon"
+                  >
+                    <i
+                      aria-hidden="true"
+                      class="zd_font_icons basic icon-arrowFill  playIconInner  "
+                      data-id="fontIcon"
+                      data-selector-id="fontIcon"
+                      data-test-id="fontIcon"
+                    />
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div
+              class="scroll_vertical content"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
+              />
+              <div
+                class="size14 lineclamp_4 lineheight_1_6 description"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="flex row alignItems_center footer"
+        data-id="flex"
+        data-test-id="flex"
+      >
+        <div
+          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
+          data-id="flex"
+          data-test-id="flex"
+        >
+          <button
+            class="primaryButton footerButton  bold primaryfilled medium"
+            data-id="onboarding_primary_button"
+            data-selector-id="button"
+            data-test-id="onboarding_primary_button"
+            data-title="Got it"
+            type="button"
+          >
+            Got it
+          </button>
+        </div>
+      </div>
+      <button
+        class="flex row alignItems_center justifyContent_center fullSize closeIconContainer buttonReset"
+        data-id="onboarding_close_icon"
+        data-test-id="onboarding_close_icon"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-inapp-close  closeIcon  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+        />
+      </button>
+      <span
+        class="basic newRibbon palette_primary  medium flag"
+        data-id="onboarding_ribbon"
+        data-selector-id="ribbon"
+        data-test-id="onboarding_ribbon"
+      >
+        <span
+          class="childText"
+        >
+          New
+        </span>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Onboarding rendering data of hasBouncAnimationOnMount 1`] = `
+<DocumentFragment>
+  <div
+    class="mainContainer mainContainerAnimation"
+    data-id="onboarding_container"
+    data-test-id="onboarding_container"
+  >
+    <div
+      class="mainWrapper"
+    >
+      <div
+        class="gradientLayer"
+      >
+        <div
+          class="circleBlur circleBlurOne"
+        />
+        <div
+          class="circleBlur circleBlurTwo"
+        />
+      </div>
+      <div
+        class="flex row alignItems_center footer"
+        data-id="flex"
+        data-test-id="flex"
+      >
+        <div
+          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
+          data-id="flex"
+          data-test-id="flex"
+        >
+          <button
+            class="primaryButton footerButton  bold primaryfilled medium"
+            data-id="onboarding_primary_button"
+            data-selector-id="button"
+            data-test-id="onboarding_primary_button"
+            data-title="Got it"
+            type="button"
+          >
+            Got it
+          </button>
+        </div>
+      </div>
+      <button
+        class="flex row alignItems_center justifyContent_center fullSize closeIconContainer buttonReset"
+        data-id="onboarding_close_icon"
+        data-test-id="onboarding_close_icon"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-inapp-close  closeIcon  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+        />
+      </button>
+      <span
+        class="basic newRibbon palette_primary  medium flag"
+        data-id="onboarding_ribbon"
+        data-selector-id="ribbon"
+        data-test-id="onboarding_ribbon"
+      >
+        <span
+          class="childText"
+        >
+          New
+        </span>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Onboarding rendering data of hasCloseIcon 1`] = `
+<DocumentFragment>
+  <div
+    class="mainContainer mainContainerAnimation"
+    data-id="onboarding_container"
+    data-test-id="onboarding_container"
+  >
+    <div
+      class="mainWrapper"
+    >
+      <div
+        class="gradientLayer"
+      >
+        <div
+          class="circleBlur circleBlurOne"
+        />
+        <div
+          class="circleBlur circleBlurTwo"
+        />
+      </div>
+      <div
+        class="flex row alignItems_center footer"
+        data-id="flex"
+        data-test-id="flex"
+      >
+        <div
+          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
+          data-id="flex"
+          data-test-id="flex"
+        >
+          <button
+            class="primaryButton footerButton  bold primaryfilled medium"
+            data-id="onboarding_primary_button"
+            data-selector-id="button"
+            data-test-id="onboarding_primary_button"
+            data-title="Got it"
+            type="button"
+          >
+            Got it
+          </button>
+        </div>
+      </div>
+      <button
+        class="flex row alignItems_center justifyContent_center fullSize closeIconContainer buttonReset"
+        data-id="onboarding_close_icon"
+        data-test-id="onboarding_close_icon"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-inapp-close  closeIcon  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+        />
+      </button>
+      <span
+        class="basic newRibbon palette_primary  medium flag"
+        data-id="onboarding_ribbon"
+        data-selector-id="ribbon"
+        data-test-id="onboarding_ribbon"
+      >
+        <span
+          class="childText"
+        >
+          New
+        </span>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Onboarding rendering data of primaryButtonText 1`] = `
+<DocumentFragment>
+  <div
+    class="mainContainer mainContainerAnimation"
+    data-id="onboarding_container"
+    data-test-id="onboarding_container"
+  >
+    <div
+      class="mainWrapper"
+    >
+      <div
+        class="gradientLayer"
+      >
+        <div
+          class="circleBlur circleBlurOne"
+        />
+        <div
+          class="circleBlur circleBlurTwo"
+        />
+      </div>
+      <div
+        class="carousel"
+      >
+        <div
+          class="flex row carouselInner"
+          data-id="flex"
+          data-test-id="flex"
+          style="--local_translate_movement: 0%;"
+        >
+          <div
+            class="flex column noShrink carouselItem"
+            data-id="flex"
+            data-test-id="flex"
+          >
+            <div
+              class="flex row alignItems_center justifyContent_center fullSize header"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="innerHead null"
+              />
+            </div>
+            <div
+              class="scroll_vertical content"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
+              />
+              <div
+                class="size14 lineclamp_4 lineheight_1_6 description"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="flex row alignItems_center footer"
+        data-id="flex"
+        data-test-id="flex"
+      >
+        <div
+          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
+          data-id="flex"
+          data-test-id="flex"
+        >
+          <button
+            class="primaryButton footerButton  bold primaryfilled medium"
+            data-id="onboarding_primary_button"
+            data-selector-id="button"
+            data-test-id="onboarding_primary_button"
+            data-title="Got it"
+            type="button"
+          >
+            Got it
+          </button>
+        </div>
+      </div>
+      <button
+        class="flex row alignItems_center justifyContent_center fullSize closeIconContainer buttonReset"
+        data-id="onboarding_close_icon"
+        data-test-id="onboarding_close_icon"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-inapp-close  closeIcon  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+        />
+      </button>
+      <span
+        class="basic newRibbon palette_primary  medium flag"
+        data-id="onboarding_ribbon"
+        data-selector-id="ribbon"
+        data-test-id="onboarding_ribbon"
+      >
+        <span
+          class="childText"
+        >
+          New
+        </span>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Onboarding rendering data of secondaryButtonText 1`] = `
+<DocumentFragment>
+  <div
+    class="mainContainer mainContainerAnimation"
+    data-id="onboarding_container"
+    data-test-id="onboarding_container"
+  >
+    <div
+      class="mainWrapper"
+    >
+      <div
+        class="gradientLayer"
+      >
+        <div
+          class="circleBlur circleBlurOne"
+        />
+        <div
+          class="circleBlur circleBlurTwo"
+        />
+      </div>
+      <div
+        class="carousel"
+      >
+        <div
+          class="flex row carouselInner"
+          data-id="flex"
+          data-test-id="flex"
+          style="--local_translate_movement: 0%;"
+        >
+          <div
+            class="flex column noShrink carouselItem"
+            data-id="flex"
+            data-test-id="flex"
+          >
+            <div
+              class="flex row alignItems_center justifyContent_center fullSize header"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="innerHead null"
+              />
+            </div>
+            <div
+              class="scroll_vertical content"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
+              />
+              <div
+                class="size14 lineclamp_4 lineheight_1_6 description"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="flex row alignItems_center footer"
+        data-id="flex"
+        data-test-id="flex"
+      >
+        <div
+          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
+          data-id="flex"
+          data-test-id="flex"
+        >
+          <button
+            class=" secondaryButtton footerButton  bold primary medium"
+            data-id="onboarding_secondary_button"
+            data-selector-id="button"
+            data-test-id="onboarding_secondary_button"
+            data-title="read more"
+            type="button"
+          >
+            read more
+          </button>
+          <button
+            class="primaryButton footerButton  bold primaryfilled medium"
+            data-id="onboarding_primary_button"
+            data-selector-id="button"
+            data-test-id="onboarding_primary_button"
+            data-title="Got it"
+            type="button"
+          >
+            Got it
+          </button>
+        </div>
+      </div>
+      <button
+        class="flex row alignItems_center justifyContent_center fullSize closeIconContainer buttonReset"
+        data-id="onboarding_close_icon"
+        data-test-id="onboarding_close_icon"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-inapp-close  closeIcon  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+        />
+      </button>
+      <span
+        class="basic newRibbon palette_primary  medium flag"
+        data-id="onboarding_ribbon"
+        data-selector-id="ribbon"
+        data-test-id="onboarding_ribbon"
+      >
+        <span
+          class="childText"
+        >
+          New
+        </span>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Onboarding rendering data of sliderData with heading and description 1`] = `
+<DocumentFragment>
+  <div
+    class="mainContainer mainContainerAnimation"
+    data-id="onboarding_container"
+    data-test-id="onboarding_container"
+  >
+    <div
+      class="mainWrapper"
+    >
+      <div
+        class="gradientLayer"
+      >
+        <div
+          class="circleBlur circleBlurOne"
+        />
+        <div
+          class="circleBlur circleBlurTwo"
+        />
+      </div>
+      <div
+        class="carousel"
+      >
+        <div
+          class="flex row carouselInner"
+          data-id="flex"
+          data-test-id="flex"
+          style="--local_translate_movement: 0%;"
+        >
+          <div
+            class="flex column noShrink carouselItem"
+            data-id="flex"
+            data-test-id="flex"
+          >
+            <div
+              class="flex row alignItems_center justifyContent_center fullSize header"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="innerHead null"
+              />
+            </div>
+            <div
+              class="scroll_vertical content"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
+                data-title="Onboarding Heading"
+              >
+                Onboarding Heading
+              </div>
+              <div
+                class="size14 lineclamp_4 lineheight_1_6 description"
+                data-title="Onboarding Description"
+              >
+                Onboarding Description
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="flex row alignItems_center footer"
+        data-id="flex"
+        data-test-id="flex"
+      >
+        <div
+          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
+          data-id="flex"
+          data-test-id="flex"
+        >
+          <button
+            class="primaryButton footerButton  bold primaryfilled medium"
+            data-id="onboarding_primary_button"
+            data-selector-id="button"
+            data-test-id="onboarding_primary_button"
+            data-title="Got it"
+            type="button"
+          >
+            Got it
+          </button>
+        </div>
+      </div>
+      <button
+        class="flex row alignItems_center justifyContent_center fullSize closeIconContainer buttonReset"
+        data-id="onboarding_close_icon"
+        data-test-id="onboarding_close_icon"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-inapp-close  closeIcon  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+        />
+      </button>
+      <span
+        class="basic newRibbon palette_primary  medium flag"
+        data-id="onboarding_ribbon"
+        data-selector-id="ribbon"
+        data-test-id="onboarding_ribbon"
+      >
+        <span
+          class="childText"
+        >
+          New
+        </span>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Onboarding rendering data of sliderData with image  1`] = `
+<DocumentFragment>
+  <div
+    class="mainContainer mainContainerAnimation"
+    data-id="onboarding_container"
+    data-test-id="onboarding_container"
+  >
+    <div
+      class="mainWrapper"
+    >
+      <div
+        class="gradientLayer"
+      >
+        <div
+          class="circleBlur circleBlurOne"
+        />
+        <div
+          class="circleBlur circleBlurTwo"
+        />
+      </div>
+      <div
+        class="carousel"
+      >
+        <div
+          class="flex row carouselInner"
+          data-id="flex"
+          data-test-id="flex"
+          style="--local_translate_movement: 0%;"
+        >
+          <div
+            class="flex column noShrink carouselItem"
+            data-id="flex"
+            data-test-id="flex"
+          >
+            <div
+              class="flex row alignItems_center justifyContent_center fullSize header"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="innerHead null"
+              >
+                <img
+                  class=" mediaElement image imgMaxFullSize "
+                  src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3Mu0NdfXXqvCExZ9YG_j93CKuU4DIdcIlEQ&s"
+                />
+              </div>
+            </div>
+            <div
+              class="scroll_vertical content"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
+              />
+              <div
+                class="size14 lineclamp_4 lineheight_1_6 description"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="flex row alignItems_center footer"
+        data-id="flex"
+        data-test-id="flex"
+      >
+        <div
+          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
+          data-id="flex"
+          data-test-id="flex"
+        >
+          <button
+            class="primaryButton footerButton  bold primaryfilled medium"
+            data-id="onboarding_primary_button"
+            data-selector-id="button"
+            data-test-id="onboarding_primary_button"
+            data-title="Got it"
+            type="button"
+          >
+            Got it
+          </button>
+        </div>
+      </div>
+      <button
+        class="flex row alignItems_center justifyContent_center fullSize closeIconContainer buttonReset"
+        data-id="onboarding_close_icon"
+        data-test-id="onboarding_close_icon"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-inapp-close  closeIcon  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+        />
+      </button>
+      <span
+        class="basic newRibbon palette_primary  medium flag"
+        data-id="onboarding_ribbon"
+        data-selector-id="ribbon"
+        data-test-id="onboarding_ribbon"
+      >
+        <span
+          class="childText"
+        >
+          New
+        </span>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Onboarding rendering data of two sliderData 1`] = `
+<DocumentFragment>
+  <div
+    class="mainContainer mainContainerAnimation"
+    data-id="onboarding_container"
+    data-test-id="onboarding_container"
+  >
+    <div
+      class="mainWrapper"
+    >
+      <div
+        class="gradientLayer"
+      >
+        <div
+          class="circleBlur circleBlurOne"
+        />
+        <div
+          class="circleBlur circleBlurTwo"
+        />
+      </div>
+      <div
+        class="carousel"
+      >
+        <div
+          class="flex row carouselInner"
+          data-id="flex"
+          data-test-id="flex"
+          style="--local_translate_movement: 0%;"
+        >
+          <div
+            class="flex column noShrink carouselItem"
+            data-id="flex"
+            data-test-id="flex"
+          >
+            <div
+              class="flex row alignItems_center justifyContent_center fullSize header"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="innerHead null"
+              />
+            </div>
+            <div
+              class="scroll_vertical content"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
+                data-title="Onboarding with carousel Slide 1"
+              >
+                Onboarding with carousel Slide 1
+              </div>
+              <div
+                class="size14 lineclamp_4 lineheight_1_6 description"
+              />
+            </div>
+          </div>
+          <div
+            class="flex column noShrink carouselItem"
+            data-id="flex"
+            data-test-id="flex"
+          >
+            <div
+              class="flex row alignItems_center justifyContent_center fullSize header"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="innerHead null"
+              />
+            </div>
+            <div
+              class="scroll_vertical content"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
+                data-title="Onboarding with carousel Slide 2"
+              >
+                Onboarding with carousel Slide 2
+              </div>
+              <div
+                class="size14 lineclamp_4 lineheight_1_6 description"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="flex row alignItems_center footer"
+        data-id="flex"
+        data-test-id="flex"
+      >
+        <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>
+        <div
+          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
+          data-id="flex"
+          data-test-id="flex"
+        >
+          <button
+            class="primaryButton footerButton  bold primaryfilled medium"
+            data-id="onboarding_primary_button"
+            data-selector-id="button"
+            data-test-id="onboarding_primary_button"
+            data-title="Got it"
+            type="button"
+          >
+            Got it
+          </button>
+        </div>
+      </div>
+      <button
+        class="flex row alignItems_center justifyContent_center fullSize closeIconContainer buttonReset"
+        data-id="onboarding_close_icon"
+        data-test-id="onboarding_close_icon"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-inapp-close  closeIcon  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+        />
+      </button>
+      <span
+        class="basic newRibbon palette_primary  medium flag"
+        data-id="onboarding_ribbon"
+        data-selector-id="ribbon"
+        data-test-id="onboarding_ribbon"
+      >
+        <span
+          class="childText"
+        >
+          New
+        </span>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Onboarding rendering data with customStyle 1`] = `
+<DocumentFragment>
+  <div
+    class="mainContainer customMainContainer mainContainerAnimation"
+    data-id="onboarding_container"
+    data-test-id="onboarding_container"
+  >
+    <div
+      class="mainWrapper"
+    >
+      <div
+        class="gradientLayer"
+      >
+        <div
+          class="circleBlur circleBlurOne"
+        />
+        <div
+          class="circleBlur circleBlurTwo"
+        />
+      </div>
+      <div
+        class="flex row alignItems_center footer"
+        data-id="flex"
+        data-test-id="flex"
+      >
+        <div
+          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
+          data-id="flex"
+          data-test-id="flex"
+        >
+          <button
+            class="primaryButton footerButton  bold primaryfilled medium"
+            data-id="onboarding_primary_button"
+            data-selector-id="button"
+            data-test-id="onboarding_primary_button"
+            data-title="Got it"
+            type="button"
+          >
+            Got it
+          </button>
+        </div>
+      </div>
+      <button
+        class="flex row alignItems_center justifyContent_center fullSize closeIconContainer buttonReset"
+        data-id="onboarding_close_icon"
+        data-test-id="onboarding_close_icon"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-inapp-close  closeIcon  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+        />
+      </button>
+      <span
+        class="basic newRibbon palette_primary  medium flag"
+        data-id="onboarding_ribbon"
+        data-selector-id="ribbon"
+        data-test-id="onboarding_ribbon"
+      >
+        <span
+          class="childText"
+        >
+          New
+        </span>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Onboarding rendering data with hasExpandedButton - hasSecondaryButton as true, hasSecondaryButtonLink as false 1`] = `
+<DocumentFragment>
+  <div
+    class="mainContainer mainContainerAnimation"
+    data-id="onboarding_container"
+    data-test-id="onboarding_container"
+  >
+    <div
+      class="mainWrapper"
+    >
+      <div
+        class="gradientLayer"
+      >
+        <div
+          class="circleBlur circleBlurOne"
+        />
+        <div
+          class="circleBlur circleBlurTwo"
+        />
+      </div>
+      <div
+        class="carousel"
+      >
+        <div
+          class="flex row carouselInner"
+          data-id="flex"
+          data-test-id="flex"
+          style="--local_translate_movement: 0%;"
+        >
+          <div
+            class="flex column noShrink carouselItem"
+            data-id="flex"
+            data-test-id="flex"
+          >
+            <div
+              class="flex row alignItems_center justifyContent_center fullSize header"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="innerHead null"
+              />
+            </div>
+            <div
+              class="scroll_vertical content"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
+              />
+              <div
+                class="size14 lineclamp_4 lineheight_1_6 description"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="flex column alignItems_center wrap footer"
+        data-id="flex"
+        data-test-id="flex"
+      >
+        <div
+          class="flex row justifyContent_end wrap flexible basis_zero shrink btnWrapper"
+          data-id="flex"
+          data-test-id="flex"
+        >
+          <button
+            class=" secondaryButtton footerButton expandedButton bold primary medium"
+            data-id="onboarding_secondary_button"
+            data-selector-id="button"
+            data-test-id="onboarding_secondary_button"
+            type="button"
+          >
+            Button
+          </button>
+          <button
+            class="primaryButton footerButton expandedButton bold primaryfilled medium"
+            data-id="onboarding_primary_button"
+            data-selector-id="button"
+            data-test-id="onboarding_primary_button"
+            data-title="Got it"
+            type="button"
+          >
+            Got it
+          </button>
+        </div>
+      </div>
+      <button
+        class="flex row alignItems_center justifyContent_center fullSize closeIconContainer buttonReset"
+        data-id="onboarding_close_icon"
+        data-test-id="onboarding_close_icon"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-inapp-close  closeIcon  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+        />
+      </button>
+      <span
+        class="basic newRibbon palette_primary  medium flag"
+        data-id="onboarding_ribbon"
+        data-selector-id="ribbon"
+        data-test-id="onboarding_ribbon"
+      >
+        <span
+          class="childText"
+        >
+          New
+        </span>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Onboarding rendering data with hasExpandedButton by hasSecondaryButton, hasSecondaryButtonLink as true 1`] = `
+<DocumentFragment>
+  <div
+    class="mainContainer mainContainerAnimation"
+    data-id="onboarding_container"
+    data-test-id="onboarding_container"
+  >
+    <div
+      class="mainWrapper"
+    >
+      <div
+        class="gradientLayer"
+      >
+        <div
+          class="circleBlur circleBlurOne"
+        />
+        <div
+          class="circleBlur circleBlurTwo"
+        />
+      </div>
+      <div
+        class="carousel"
+      >
+        <div
+          class="flex row carouselInner"
+          data-id="flex"
+          data-test-id="flex"
+          style="--local_translate_movement: 0%;"
+        >
+          <div
+            class="flex column noShrink carouselItem"
+            data-id="flex"
+            data-test-id="flex"
+          >
+            <div
+              class="flex row alignItems_center justifyContent_center fullSize header"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="innerHead null"
+              />
+            </div>
+            <div
+              class="scroll_vertical content"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
+              />
+              <div
+                class="size14 lineclamp_4 lineheight_1_6 description"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="flex column alignItems_center wrap footer"
+        data-id="flex"
+        data-test-id="flex"
+      >
+        <div
+          class="flex row justifyContent_end wrap flexible basis_zero shrink btnWrapper"
+          data-id="flex"
+          data-test-id="flex"
+        >
+          <a
+            class="container  secondaryButtton secondaryButttonLink footerButton expandedButton"
+            data-id="onboarding_secondary_button_link"
+            data-test-id="onboarding_secondary_button_link"
+            href="https://gc.zoho.com/org/746519053/widgets/4398000000528001"
+            rel="noopener noreferrer"
+            target="_blank"
+          />
+          <button
+            class="primaryButton footerButton expandedButton bold primaryfilled medium"
+            data-id="onboarding_primary_button"
+            data-selector-id="button"
+            data-test-id="onboarding_primary_button"
+            data-title="Got it"
+            type="button"
+          >
+            Got it
+          </button>
+        </div>
+      </div>
+      <button
+        class="flex row alignItems_center justifyContent_center fullSize closeIconContainer buttonReset"
+        data-id="onboarding_close_icon"
+        data-test-id="onboarding_close_icon"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-inapp-close  closeIcon  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+        />
+      </button>
+      <span
+        class="basic newRibbon palette_primary  medium flag"
+        data-id="onboarding_ribbon"
+        data-selector-id="ribbon"
+        data-test-id="onboarding_ribbon"
+      >
+        <span
+          class="childText"
+        >
+          New
+        </span>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Onboarding rendering data without SecondaryButton as link 1`] = `
+<DocumentFragment>
+  <div
+    class="mainContainer mainContainerAnimation"
+    data-id="onboarding_container"
+    data-test-id="onboarding_container"
+  >
+    <div
+      class="mainWrapper"
+    >
+      <div
+        class="gradientLayer"
+      >
+        <div
+          class="circleBlur circleBlurOne"
+        />
+        <div
+          class="circleBlur circleBlurTwo"
+        />
+      </div>
+      <div
+        class="carousel"
+      >
+        <div
+          class="flex row carouselInner"
+          data-id="flex"
+          data-test-id="flex"
+          style="--local_translate_movement: 0%;"
+        >
+          <div
+            class="flex column noShrink carouselItem"
+            data-id="flex"
+            data-test-id="flex"
+          >
+            <div
+              class="flex row alignItems_center justifyContent_center fullSize header"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="innerHead null"
+              />
+            </div>
+            <div
+              class="scroll_vertical content"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
+              />
+              <div
+                class="size14 lineclamp_4 lineheight_1_6 description"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="flex row alignItems_center footer"
+        data-id="flex"
+        data-test-id="flex"
+      >
+        <div
+          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
+          data-id="flex"
+          data-test-id="flex"
+        >
+          <button
+            class=" secondaryButtton footerButton  bold primary medium"
+            data-id="onboarding_secondary_button"
+            data-selector-id="button"
+            data-test-id="onboarding_secondary_button"
+            data-title="read more"
+            type="button"
+          >
+            read more
+          </button>
+          <button
+            class="primaryButton footerButton  bold primaryfilled medium"
+            data-id="onboarding_primary_button"
+            data-selector-id="button"
+            data-test-id="onboarding_primary_button"
+            data-title="Got it"
+            type="button"
+          >
+            Got it
+          </button>
+        </div>
+      </div>
+      <button
+        class="flex row alignItems_center justifyContent_center fullSize closeIconContainer buttonReset"
+        data-id="onboarding_close_icon"
+        data-test-id="onboarding_close_icon"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-inapp-close  closeIcon  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+        />
+      </button>
+      <span
+        class="basic newRibbon palette_primary  medium flag"
+        data-id="onboarding_ribbon"
+        data-selector-id="ribbon"
+        data-test-id="onboarding_ribbon"
+      >
+        <span
+          class="childText"
+        >
+          New
+        </span>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Onboarding rendering data without hasBouncAnimationOnMount 1`] = `
+<DocumentFragment>
+  <div
+    class="mainContainer "
+    data-id="onboarding_container"
+    data-test-id="onboarding_container"
+  >
+    <div
+      class="mainWrapper"
+    >
+      <div
+        class="gradientLayer"
+      >
+        <div
+          class="circleBlur circleBlurOne"
+        />
+        <div
+          class="circleBlur circleBlurTwo"
+        />
+      </div>
+      <div
+        class="flex row alignItems_center footer"
+        data-id="flex"
+        data-test-id="flex"
+      >
+        <div
+          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
+          data-id="flex"
+          data-test-id="flex"
+        >
+          <button
+            class="primaryButton footerButton  bold primaryfilled medium"
+            data-id="onboarding_primary_button"
+            data-selector-id="button"
+            data-test-id="onboarding_primary_button"
+            data-title="Got it"
+            type="button"
+          >
+            Got it
+          </button>
+        </div>
+      </div>
+      <button
+        class="flex row alignItems_center justifyContent_center fullSize closeIconContainer buttonReset"
+        data-id="onboarding_close_icon"
+        data-test-id="onboarding_close_icon"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-inapp-close  closeIcon  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+        />
+      </button>
+      <span
+        class="basic newRibbon palette_primary  medium flag"
+        data-id="onboarding_ribbon"
+        data-selector-id="ribbon"
+        data-test-id="onboarding_ribbon"
+      >
+        <span
+          class="childText"
+        >
+          New
+        </span>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Onboarding rendering data without hasCloseIcon 1`] = `
+<DocumentFragment>
+  <div
+    class="mainContainer mainContainerAnimation"
+    data-id="onboarding_container"
+    data-test-id="onboarding_container"
+  >
+    <div
+      class="mainWrapper"
+    >
+      <div
+        class="gradientLayer"
+      >
+        <div
+          class="circleBlur circleBlurOne"
+        />
+        <div
+          class="circleBlur circleBlurTwo"
+        />
+      </div>
+      <div
+        class="flex row alignItems_center footer"
+        data-id="flex"
+        data-test-id="flex"
+      >
+        <div
+          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
+          data-id="flex"
+          data-test-id="flex"
+        >
+          <button
+            class="primaryButton footerButton  bold primaryfilled medium"
+            data-id="onboarding_primary_button"
+            data-selector-id="button"
+            data-test-id="onboarding_primary_button"
+            data-title="Got it"
+            type="button"
+          >
+            Got it
+          </button>
+        </div>
+      </div>
+      <span
+        class="basic newRibbon palette_primary  medium flag"
+        data-id="onboarding_ribbon"
+        data-selector-id="ribbon"
+        data-test-id="onboarding_ribbon"
+      >
+        <span
+          class="childText"
+        >
+          New
+        </span>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Onboarding rendering data without hasExpandedButton 1`] = `
+<DocumentFragment>
+  <div
+    class="mainContainer mainContainerAnimation"
+    data-id="onboarding_container"
+    data-test-id="onboarding_container"
+  >
+    <div
+      class="mainWrapper"
+    >
+      <div
+        class="gradientLayer"
+      >
+        <div
+          class="circleBlur circleBlurOne"
+        />
+        <div
+          class="circleBlur circleBlurTwo"
+        />
+      </div>
+      <div
+        class="flex row alignItems_center footer"
+        data-id="flex"
+        data-test-id="flex"
+      >
+        <div
+          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
+          data-id="flex"
+          data-test-id="flex"
+        >
+          <button
+            class="primaryButton footerButton  bold primaryfilled medium"
+            data-id="onboarding_primary_button"
+            data-selector-id="button"
+            data-test-id="onboarding_primary_button"
+            data-title="Got it"
+            type="button"
+          >
+            Got it
+          </button>
+        </div>
+      </div>
+      <button
+        class="flex row alignItems_center justifyContent_center fullSize closeIconContainer buttonReset"
+        data-id="onboarding_close_icon"
+        data-test-id="onboarding_close_icon"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-inapp-close  closeIcon  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+        />
+      </button>
+      <span
+        class="basic newRibbon palette_primary  medium flag"
+        data-id="onboarding_ribbon"
+        data-selector-id="ribbon"
+        data-test-id="onboarding_ribbon"
+      >
+        <span
+          class="childText"
+        >
+          New
+        </span>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Onboarding rendering data without primaryButtonText 1`] = `
+<DocumentFragment>
+  <div
+    class="mainContainer mainContainerAnimation"
+    data-id="onboarding_container"
+    data-test-id="onboarding_container"
+  >
+    <div
+      class="mainWrapper"
+    >
+      <div
+        class="gradientLayer"
+      >
+        <div
+          class="circleBlur circleBlurOne"
+        />
+        <div
+          class="circleBlur circleBlurTwo"
+        />
+      </div>
+      <div
+        class="carousel"
+      >
+        <div
+          class="flex row carouselInner"
+          data-id="flex"
+          data-test-id="flex"
+          style="--local_translate_movement: 0%;"
+        >
+          <div
+            class="flex column noShrink carouselItem"
+            data-id="flex"
+            data-test-id="flex"
+          >
+            <div
+              class="flex row alignItems_center justifyContent_center fullSize header"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="innerHead null"
+              />
+            </div>
+            <div
+              class="scroll_vertical content"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
+              />
+              <div
+                class="size14 lineclamp_4 lineheight_1_6 description"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="flex row alignItems_center footer"
+        data-id="flex"
+        data-test-id="flex"
+      >
+        <div
+          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
+          data-id="flex"
+          data-test-id="flex"
+        />
+      </div>
+      <button
+        class="flex row alignItems_center justifyContent_center fullSize closeIconContainer buttonReset"
+        data-id="onboarding_close_icon"
+        data-test-id="onboarding_close_icon"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-inapp-close  closeIcon  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+        />
+      </button>
+      <span
+        class="basic newRibbon palette_primary  medium flag"
+        data-id="onboarding_ribbon"
+        data-selector-id="ribbon"
+        data-test-id="onboarding_ribbon"
+      >
+        <span
+          class="childText"
+        >
+          New
+        </span>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Onboarding rendering data without secondaryButtonText 1`] = `
+<DocumentFragment>
+  <div
+    class="mainContainer mainContainerAnimation"
+    data-id="onboarding_container"
+    data-test-id="onboarding_container"
+  >
+    <div
+      class="mainWrapper"
+    >
+      <div
+        class="gradientLayer"
+      >
+        <div
+          class="circleBlur circleBlurOne"
+        />
+        <div
+          class="circleBlur circleBlurTwo"
+        />
+      </div>
+      <div
+        class="carousel"
+      >
+        <div
+          class="flex row carouselInner"
+          data-id="flex"
+          data-test-id="flex"
+          style="--local_translate_movement: 0%;"
+        >
+          <div
+            class="flex column noShrink carouselItem"
+            data-id="flex"
+            data-test-id="flex"
+          >
+            <div
+              class="flex row alignItems_center justifyContent_center fullSize header"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="innerHead null"
+              />
+            </div>
+            <div
+              class="scroll_vertical content"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
+              />
+              <div
+                class="size14 lineclamp_4 lineheight_1_6 description"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="flex row alignItems_center footer"
+        data-id="flex"
+        data-test-id="flex"
+      >
+        <div
+          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
+          data-id="flex"
+          data-test-id="flex"
+        >
+          <button
+            class="primaryButton footerButton  bold primaryfilled medium"
+            data-id="onboarding_primary_button"
+            data-selector-id="button"
+            data-test-id="onboarding_primary_button"
+            data-title="Got it"
+            type="button"
+          >
+            Got it
+          </button>
+        </div>
+      </div>
+      <button
+        class="flex row alignItems_center justifyContent_center fullSize closeIconContainer buttonReset"
+        data-id="onboarding_close_icon"
+        data-test-id="onboarding_close_icon"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-inapp-close  closeIcon  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+        />
+      </button>
+      <span
+        class="basic newRibbon palette_primary  medium flag"
+        data-id="onboarding_ribbon"
+        data-selector-id="ribbon"
+        data-test-id="onboarding_ribbon"
+      >
+        <span
+          class="childText"
+        >
+          New
+        </span>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Onboarding rendering prop of ribbonText 1`] = `
+<DocumentFragment>
+  <div
+    class="mainContainer mainContainerAnimation"
+    data-id="onboarding_container"
+    data-test-id="onboarding_container"
+  >
+    <div
+      class="mainWrapper"
+    >
+      <div
+        class="gradientLayer"
+      >
+        <div
+          class="circleBlur circleBlurOne"
+        />
+        <div
+          class="circleBlur circleBlurTwo"
+        />
+      </div>
+      <div
+        class="flex row alignItems_center footer"
+        data-id="flex"
+        data-test-id="flex"
+      >
+        <div
+          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
+          data-id="flex"
+          data-test-id="flex"
+        >
+          <button
+            class="primaryButton footerButton  bold primaryfilled medium"
+            data-id="onboarding_primary_button"
+            data-selector-id="button"
+            data-test-id="onboarding_primary_button"
+            data-title="Got it"
+            type="button"
+          >
+            Got it
+          </button>
+        </div>
+      </div>
+      <button
+        class="flex row alignItems_center justifyContent_center fullSize closeIconContainer buttonReset"
+        data-id="onboarding_close_icon"
+        data-test-id="onboarding_close_icon"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-inapp-close  closeIcon  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+        />
+      </button>
+      <span
+        class="basic newRibbon palette_primary  medium flag"
+        data-id="onboarding_ribbon"
+        data-selector-id="ribbon"
+        data-test-id="onboarding_ribbon"
+      >
+        <span
+          class="childText"
+        >
+          closed
+        </span>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Onboarding rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="mainContainer mainContainerAnimation"
+    data-id="onboarding_container"
+    data-test-id="onboarding_container"
+  >
+    <div
+      class="mainWrapper"
+    >
+      <div
+        class="gradientLayer"
+      >
+        <div
+          class="circleBlur circleBlurOne"
+        />
+        <div
+          class="circleBlur circleBlurTwo"
+        />
+      </div>
+      <div
+        class="flex row alignItems_center footer"
+        data-id="flex"
+        data-test-id="flex"
+      >
+        <div
+          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
+          data-id="flex"
+          data-test-id="flex"
+        >
+          <button
+            class="primaryButton footerButton  bold primaryfilled medium"
+            data-id="onboarding_primary_button"
+            data-selector-id="button"
+            data-test-id="onboarding_primary_button"
+            data-title="Got it"
+            type="button"
+          >
+            Got it
+          </button>
+        </div>
+      </div>
+      <button
+        class="flex row alignItems_center justifyContent_center fullSize closeIconContainer buttonReset"
+        data-id="onboarding_close_icon"
+        data-test-id="onboarding_close_icon"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-inapp-close  closeIcon  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+        />
+      </button>
+      <span
+        class="basic newRibbon palette_primary  medium flag"
+        data-id="onboarding_ribbon"
+        data-selector-id="ribbon"
+        data-test-id="onboarding_ribbon"
+      >
+        <span
+          class="childText"
+        >
+          New
+        </span>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Onboarding rendering the prop of hasRibbon is false 1`] = `
+<DocumentFragment>
+  <div
+    class="mainContainer mainContainerAnimation"
+    data-id="onboarding_container"
+    data-test-id="onboarding_container"
+  >
+    <div
+      class="mainWrapper"
+    >
+      <div
+        class="gradientLayer"
+      >
+        <div
+          class="circleBlur circleBlurOne"
+        />
+        <div
+          class="circleBlur circleBlurTwo"
+        />
+      </div>
+      <div
+        class="flex row alignItems_center footer"
+        data-id="flex"
+        data-test-id="flex"
+      >
+        <div
+          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
+          data-id="flex"
+          data-test-id="flex"
+        >
+          <button
+            class="primaryButton footerButton  bold primaryfilled medium"
+            data-id="onboarding_primary_button"
+            data-selector-id="button"
+            data-test-id="onboarding_primary_button"
+            data-title="Got it"
+            type="button"
+          >
+            Got it
+          </button>
+        </div>
+      </div>
+      <button
+        class="flex row alignItems_center justifyContent_center fullSize closeIconContainer buttonReset"
+        data-id="onboarding_close_icon"
+        data-test-id="onboarding_close_icon"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-inapp-close  closeIcon  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+        />
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Onboarding rendering with customId - hasSecondaryButtonLink  1`] = `
+<DocumentFragment>
+  <div
+    class="mainContainer mainContainerAnimation"
+    data-id="radar_onboarding_container"
+    data-test-id="onboarding_container"
+  >
+    <div
+      class="mainWrapper"
+    >
+      <div
+        class="gradientLayer"
+      >
+        <div
+          class="circleBlur circleBlurOne"
+        />
+        <div
+          class="circleBlur circleBlurTwo"
+        />
+      </div>
+      <div
+        class="carousel"
+      >
+        <div
+          class="flex row carouselInner"
+          data-id="flex"
+          data-test-id="flex"
+          style="--local_translate_movement: 0%;"
+        >
+          <div
+            class="flex column noShrink carouselItem"
+            data-id="flex"
+            data-test-id="flex"
+          >
+            <div
+              class="flex row alignItems_center justifyContent_center fullSize header"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="innerHead null"
+              />
+            </div>
+            <div
+              class="scroll_vertical content"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
+              />
+              <div
+                class="size14 lineclamp_4 lineheight_1_6 description"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="flex row alignItems_center footer"
+        data-id="flex"
+        data-test-id="flex"
+      >
+        <div
+          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
+          data-id="flex"
+          data-test-id="flex"
+        >
+          <a
+            class="container  secondaryButtton secondaryButttonLink footerButton "
+            data-id="radar_onboarding_secondary_button_link"
+            data-test-id="radar_onboarding_secondary_button_link"
+            data-title="learn more"
+            href="https://gc.zoho.com/org/746519053/widgets/4398000000528001"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            learn more
+          </a>
+          <button
+            class="primaryButton footerButton  bold primaryfilled medium"
+            data-id="radar_onboarding_primary_button"
+            data-selector-id="button"
+            data-test-id="radar_onboarding_primary_button"
+            data-title="Got it"
+            type="button"
+          >
+            Got it
+          </button>
+        </div>
+      </div>
+      <button
+        class="flex row alignItems_center justifyContent_center fullSize closeIconContainer buttonReset"
+        data-id="radar_onboarding_close_icon"
+        data-test-id="onboarding_close_icon"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-inapp-close  closeIcon  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+        />
+      </button>
+      <span
+        class="basic newRibbon palette_primary  medium flag"
+        data-id="radar_onboarding_ribbon"
+        data-selector-id="ribbon"
+        data-test-id="radar_onboarding_ribbon"
+      >
+        <span
+          class="childText"
+        >
+          new
+        </span>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Onboarding rendering with customId 1`] = `
+<DocumentFragment>
+  <div
+    class="mainContainer mainContainerAnimation"
+    data-id="radar_onboarding_container"
+    data-test-id="onboarding_container"
+  >
+    <div
+      class="mainWrapper"
+    >
+      <div
+        class="gradientLayer"
+      >
+        <div
+          class="circleBlur circleBlurOne"
+        />
+        <div
+          class="circleBlur circleBlurTwo"
+        />
+      </div>
+      <div
+        class="carousel"
+      >
+        <div
+          class="flex row carouselInner"
+          data-id="flex"
+          data-test-id="flex"
+          style="--local_translate_movement: 0%;"
+        >
+          <div
+            class="flex column noShrink carouselItem"
+            data-id="flex"
+            data-test-id="flex"
+          >
+            <div
+              class="flex row alignItems_center justifyContent_center fullSize header"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="innerHead dvLayer"
+              >
+                <video
+                  autoplay=""
+                  class="mediaElement"
+                  loop=""
+                >
+                  <source
+                    src="https://www.w3schools.com/html/mov_bbb.mp4"
+                    type="video/mp4"
+                  />
+                </video>
+                <div
+                  class="flex row alignItems_center justifyContent_center playIconWrapper"
+                  data-id="flex"
+                  data-test-id="flex"
+                >
+                  <button
+                    class="flex row alignItems_center justifyContent_center playIcon undefined buttonReset"
+                    data-id="radar_onboarding_play_icon"
+                    data-test-id="onboarding_play_icon"
+                  >
+                    <i
+                      aria-hidden="true"
+                      class="zd_font_icons basic icon-arrowFill  playIconInner  "
+                      data-id="fontIcon"
+                      data-selector-id="fontIcon"
+                      data-test-id="fontIcon"
+                    />
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div
+              class="scroll_vertical content"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
+                data-title="Video source"
+              >
+                Video source
+              </div>
+              <div
+                class="size14 lineclamp_4 lineheight_1_6 description"
+                data-title="Onboarding with Video Source – Embeds a video to provide dynamic and allows users to continue watching a video while exploring the interface."
+              >
+                Onboarding with Video Source – Embeds a video to provide dynamic and allows users to continue watching a video while exploring the interface.
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="flex row alignItems_center footer"
+        data-id="flex"
+        data-test-id="flex"
+      >
+        <div
+          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
+          data-id="flex"
+          data-test-id="flex"
+        >
+          <button
+            class=" secondaryButtton footerButton  bold primary medium"
+            data-id="radar_onboarding_secondary_button"
+            data-selector-id="button"
+            data-test-id="radar_onboarding_secondary_button"
+            type="button"
+          >
+            Button
+          </button>
+          <button
+            class="primaryButton footerButton  bold primaryfilled medium"
+            data-id="radar_onboarding_primary_button"
+            data-selector-id="button"
+            data-test-id="radar_onboarding_primary_button"
+            data-title="Got It"
+            type="button"
+          >
+            Got It
+          </button>
+        </div>
+      </div>
+      <button
+        class="flex row alignItems_center justifyContent_center fullSize closeIconContainer buttonReset"
+        data-id="radar_onboarding_close_icon"
+        data-test-id="onboarding_close_icon"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-inapp-close  closeIcon  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+        />
+      </button>
+      <span
+        class="basic newRibbon palette_primary  medium flag"
+        data-id="radar_onboarding_ribbon"
+        data-selector-id="ribbon"
+        data-test-id="radar_onboarding_ribbon"
+      >
+        <span
+          class="childText"
+        >
+          new
+        </span>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Onboarding rendering with testId 1`] = `
+<DocumentFragment>
+  <div
+    class="mainContainer mainContainerAnimation"
+    data-id="onboarding_container"
+    data-test-id="radar_onboarding_container"
+  >
+    <div
+      class="mainWrapper"
+    >
+      <div
+        class="gradientLayer"
+      >
+        <div
+          class="circleBlur circleBlurOne"
+        />
+        <div
+          class="circleBlur circleBlurTwo"
+        />
+      </div>
+      <div
+        class="carousel"
+      >
+        <div
+          class="flex row carouselInner"
+          data-id="flex"
+          data-test-id="flex"
+          style="--local_translate_movement: 0%;"
+        >
+          <div
+            class="flex column noShrink carouselItem"
+            data-id="flex"
+            data-test-id="flex"
+          >
+            <div
+              class="flex row alignItems_center justifyContent_center fullSize header"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="innerHead dvLayer"
+              >
+                <div
+                  class="flex row alignItems_center justifyContent_center playIconWrapper"
+                  data-id="flex"
+                  data-test-id="flex"
+                >
+                  <button
+                    class="flex row alignItems_center justifyContent_center playIcon undefined buttonReset"
+                    data-id="onboarding_play_icon"
+                    data-test-id="radar_onboarding_play_icon"
+                  >
+                    <i
+                      aria-hidden="true"
+                      class="zd_font_icons basic icon-arrowFill  playIconInner  "
+                      data-id="fontIcon"
+                      data-selector-id="fontIcon"
+                      data-test-id="fontIcon"
+                    />
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div
+              class="scroll_vertical content"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
+              />
+              <div
+                class="size14 lineclamp_4 lineheight_1_6 description"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="flex row alignItems_center footer"
+        data-id="flex"
+        data-test-id="flex"
+      >
+        <div
+          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
+          data-id="flex"
+          data-test-id="flex"
+        >
+          <button
+            class="primaryButton footerButton  bold primaryfilled medium"
+            data-id="onboarding_primary_button"
+            data-selector-id="button"
+            data-test-id="onboarding_primary_button"
+            data-title="Got it"
+            type="button"
+          >
+            Got it
+          </button>
+        </div>
+      </div>
+      <button
+        class="flex row alignItems_center justifyContent_center fullSize closeIconContainer buttonReset"
+        data-id="onboarding_close_icon"
+        data-test-id="radar_onboarding_close_icon"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-inapp-close  closeIcon  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+        />
+      </button>
+      <span
+        class="basic newRibbon palette_primary  medium flag"
+        data-id="onboarding_ribbon"
+        data-selector-id="ribbon"
+        data-test-id="onboarding_ribbon"
+      >
+        <span
+          class="childText"
+        >
+          new
+        </span>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;