@zohodesk/dot 1.7.9 → 1.7.10

package/es/Onboarding/Onboarding.js

@@ -205,6 +205,7 @@ const Onboarding = _ref => {
     const {
       imageSource,
       videoSource,
+      mediaElement,
       heading,
       description,
       hasVideoPlayButton = false,
@@ -229,8 +230,8 @@ const Onboarding = _ref => {
       $ui_alignItems: "center",
       $flag_fullsize: true
     }, /*#__PURE__*/React.createElement("div", {
-      className: `${style.innerHead} ${hasVideoPlayButton ? style.dvLayer : null}`
-    }, renderMediaElement(imageSource, videoSourceLink, videoSourceFormat), hasVideoPlayButton && /*#__PURE__*/React.createElement(Flex, {
+      className: `${style.innerHead} ${hasVideoPlayButton ? style.dvLayer : ''}`
+    }, mediaElement ? mediaElement : renderMediaElement(imageSource, videoSourceLink, videoSourceFormat), hasVideoPlayButton && /*#__PURE__*/React.createElement(Flex, {
       $ui_displayMode: "flex",
       $ui_justifyContent: "center",
       $ui_alignItems: "center",

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

@@ -425,4 +425,16 @@ describe('Onboarding', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering data with mediaElement', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Onboarding, {
+      sliderData: [{
+        tabName: "description",
+        description: "Discover innovative tools and solutions to streamline your processes and boost productivity on Slide 1.",
+        mediaElement: /*#__PURE__*/React.createElement("div", null, "Custom Element")
+      }]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

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

@@ -40,7 +40,7 @@ exports[`Onboarding rendering  data of customprops for Secondarybuttonprops  1`]
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -159,7 +159,7 @@ exports[`Onboarding rendering  data of customprops for descriptionProps  1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -344,7 +344,7 @@ exports[`Onboarding rendering  data of customprops for headingProps  1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -457,7 +457,7 @@ exports[`Onboarding rendering  data of customprops for primarybuttonprops  1`] =
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -645,7 +645,7 @@ exports[`Onboarding rendering  data of customprops for secondaryButtonLinkProps
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -900,7 +900,7 @@ exports[`Onboarding rendering  data of image without hasVideoPlayButton 1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               >
                 <img
                   class=" mediaElement image imgMaxFullSize "
@@ -1015,7 +1015,7 @@ exports[`Onboarding rendering  data of videoSource  1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               >
                 <video
                   autoplay=""
@@ -1136,7 +1136,7 @@ exports[`Onboarding rendering data of SecondaryButton as link 1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -1541,7 +1541,7 @@ exports[`Onboarding rendering data of primaryButtonText 1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -1651,7 +1651,7 @@ exports[`Onboarding rendering data of secondaryButtonText 1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -1771,7 +1771,7 @@ exports[`Onboarding rendering data of sliderData with heading and description 1`
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -1887,7 +1887,7 @@ exports[`Onboarding rendering data of sliderData with image  1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               >
                 <img
                   class=" mediaElement image imgMaxFullSize "
@@ -2002,7 +2002,7 @@ exports[`Onboarding rendering data of two sliderData 1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -2032,7 +2032,7 @@ exports[`Onboarding rendering data of two sliderData 1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -2233,7 +2233,7 @@ exports[`Onboarding rendering data with hasExpandedButton - hasSecondaryButton a
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -2352,7 +2352,7 @@ exports[`Onboarding rendering data with hasExpandedButton by hasSecondaryButton,
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -2430,6 +2430,123 @@ exports[`Onboarding rendering data with hasExpandedButton by hasSecondaryButton,
 </DocumentFragment>
 `;
 
+exports[`Onboarding rendering data with mediaElement 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 "
+              >
+                <div>
+                  Custom Element
+                </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"
+                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 without SecondaryButton as link 1`] = `
 <DocumentFragment>
   <div
@@ -2470,7 +2587,7 @@ exports[`Onboarding rendering data without SecondaryButton as link 1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -2793,7 +2910,7 @@ exports[`Onboarding rendering data without primaryButtonText 1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -2892,7 +3009,7 @@ exports[`Onboarding rendering data without secondaryButtonText 1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -3206,7 +3323,7 @@ exports[`Onboarding rendering with customId - hasSecondaryButtonLink  1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div

package/es/Onboarding/props/propTypes.js

@@ -26,6 +26,7 @@ export const propTypes = {
       link: PropTypes.string,
       videoFormat: PropTypes.string
     }),
+    mediaElement: PropTypes.node,
     description: PropTypes.string,
     hasPrimaryButton: PropTypes.bool,
     hasVideoPlayButton: PropTypes.bool,

package/lib/Onboarding/Onboarding.js

@@ -219,6 +219,7 @@ var Onboarding = function Onboarding(_ref) {
   }, sliderData.map(function (item, index) {
     var imageSource = item.imageSource,
         videoSource = item.videoSource,
+        mediaElement = item.mediaElement,
         heading = item.heading,
         description = item.description,
         _item$hasVideoPlayBut = item.hasVideoPlayButton,
@@ -243,8 +244,8 @@ var Onboarding = function Onboarding(_ref) {
       $ui_alignItems: "center",
       $flag_fullsize: true
     }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: "".concat(style.innerHead, " ").concat(hasVideoPlayButton ? style.dvLayer : null)
-    }, renderMediaElement(imageSource, videoSourceLink, videoSourceFormat), hasVideoPlayButton && /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
+      className: "".concat(style.innerHead, " ").concat(hasVideoPlayButton ? style.dvLayer : '')
+    }, mediaElement ? mediaElement : renderMediaElement(imageSource, videoSourceLink, videoSourceFormat), hasVideoPlayButton && /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
       $ui_displayMode: "flex",
       $ui_justifyContent: "center",
       $ui_alignItems: "center",

package/lib/Onboarding/__tests__/Onboarding.spec.js

@@ -432,4 +432,16 @@ describe('Onboarding', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering data with mediaElement', function () {
+    var _render35 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Onboarding["default"], {
+      sliderData: [{
+        tabName: "description",
+        description: "Discover innovative tools and solutions to streamline your processes and boost productivity on Slide 1.",
+        mediaElement: /*#__PURE__*/_react["default"].createElement("div", null, "Custom Element")
+      }]
+    })),
+        asFragment = _render35.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

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

@@ -40,7 +40,7 @@ exports[`Onboarding rendering  data of customprops for Secondarybuttonprops  1`]
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -159,7 +159,7 @@ exports[`Onboarding rendering  data of customprops for descriptionProps  1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -344,7 +344,7 @@ exports[`Onboarding rendering  data of customprops for headingProps  1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -457,7 +457,7 @@ exports[`Onboarding rendering  data of customprops for primarybuttonprops  1`] =
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -645,7 +645,7 @@ exports[`Onboarding rendering  data of customprops for secondaryButtonLinkProps
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -900,7 +900,7 @@ exports[`Onboarding rendering  data of image without hasVideoPlayButton 1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               >
                 <img
                   class=" mediaElement image imgMaxFullSize "
@@ -1015,7 +1015,7 @@ exports[`Onboarding rendering  data of videoSource  1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               >
                 <video
                   autoplay=""
@@ -1136,7 +1136,7 @@ exports[`Onboarding rendering data of SecondaryButton as link 1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -1541,7 +1541,7 @@ exports[`Onboarding rendering data of primaryButtonText 1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -1651,7 +1651,7 @@ exports[`Onboarding rendering data of secondaryButtonText 1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -1771,7 +1771,7 @@ exports[`Onboarding rendering data of sliderData with heading and description 1`
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -1887,7 +1887,7 @@ exports[`Onboarding rendering data of sliderData with image  1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               >
                 <img
                   class=" mediaElement image imgMaxFullSize "
@@ -2002,7 +2002,7 @@ exports[`Onboarding rendering data of two sliderData 1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -2032,7 +2032,7 @@ exports[`Onboarding rendering data of two sliderData 1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -2233,7 +2233,7 @@ exports[`Onboarding rendering data with hasExpandedButton - hasSecondaryButton a
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -2352,7 +2352,7 @@ exports[`Onboarding rendering data with hasExpandedButton by hasSecondaryButton,
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -2430,6 +2430,123 @@ exports[`Onboarding rendering data with hasExpandedButton by hasSecondaryButton,
 </DocumentFragment>
 `;
 
+exports[`Onboarding rendering data with mediaElement 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 "
+              >
+                <div>
+                  Custom Element
+                </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"
+                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 without SecondaryButton as link 1`] = `
 <DocumentFragment>
   <div
@@ -2470,7 +2587,7 @@ exports[`Onboarding rendering data without SecondaryButton as link 1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -2793,7 +2910,7 @@ exports[`Onboarding rendering data without primaryButtonText 1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -2892,7 +3009,7 @@ exports[`Onboarding rendering data without secondaryButtonText 1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -3206,7 +3323,7 @@ exports[`Onboarding rendering with customId - hasSecondaryButtonLink  1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div

package/lib/Onboarding/props/propTypes.js

@@ -42,6 +42,7 @@ var propTypes = {
       link: _propTypes["default"].string,
       videoFormat: _propTypes["default"].string
     }),
+    mediaElement: _propTypes["default"].node,
     description: _propTypes["default"].string,
     hasPrimaryButton: _propTypes["default"].bool,
     hasVideoPlayButton: _propTypes["default"].bool,