@zohodesk/dot 1.7.8-temp-0 → 1.7.9-temp-0

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

@@ -4,7 +4,7 @@ exports[`IconButton Checking the "Children" 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -27,7 +27,7 @@ exports[`IconButton eleRef prop is a function 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -45,7 +45,7 @@ exports[`IconButton rendering ally 1`] = `
     aria-label="ariaLabel"
     aria-labelledby="ariaLabelledby"
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -60,7 +60,7 @@ exports[`IconButton rendering ally 2`] = `
     aria-expanded="false"
     aria-haspopup="false"
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -73,7 +73,7 @@ exports[`IconButton rendering in ClassName 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper IconButtonClass undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper IconButtonClass undefined effect default border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -86,7 +86,7 @@ exports[`IconButton rendering in Icon 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -108,7 +108,7 @@ exports[`IconButton rendering in dataIsHtml is True 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="true"
     data-selector-id="iconButton"
@@ -121,7 +121,7 @@ exports[`IconButton rendering in isDisabled is True 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border defaultHover   disabled inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border defaultHover   disabled inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -135,7 +135,7 @@ exports[`IconButton rendering in title 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -149,7 +149,7 @@ exports[`IconButton rendering isNeedEffect is False 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  undefined  inflex coldir both"
+    class="buttonReset large wrapper  undefined  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -162,7 +162,7 @@ exports[`IconButton rendering needButtonTag 1`] = `
 <DocumentFragment>
   <div
     aria-pressed="false"
-    class="false wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -175,7 +175,7 @@ exports[`IconButton rendering the defult props 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -188,7 +188,7 @@ exports[`IconButton rendering the hovertypes- bg 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border bgHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border bgHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -201,7 +201,7 @@ exports[`IconButton rendering the hovertypes- border 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border borderHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border borderHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -214,7 +214,7 @@ exports[`IconButton rendering the hovertypes- default 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -227,7 +227,7 @@ exports[`IconButton rendering the isActive true with palette of- default 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border defaultHover active hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border defaultHover active hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -240,7 +240,7 @@ exports[`IconButton rendering the isActive true with palette of- primary 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  primary_active effect primary border defaultHover active hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  primary_active effect primary border defaultHover active hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -253,7 +253,7 @@ exports[`IconButton rendering the isActive true with palette of- primaryFilled 1
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  primaryFilled_active effect primaryFilled border defaultHover active hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  primaryFilled_active effect primaryFilled border defaultHover active hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -266,7 +266,7 @@ exports[`IconButton rendering the palette of- default 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -279,7 +279,7 @@ exports[`IconButton rendering the palette of- primary 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  primary effect primary border defaultHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  primary effect primary border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -292,7 +292,72 @@ exports[`IconButton rendering the palette of- primaryFilled 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  primaryFilled effect primaryFilled border defaultHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  primaryFilled effect primaryFilled border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the size of- large 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the size of- medium 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset medium wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the size of- small 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset small wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the size of- xlarge 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset xlarge wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the size of- xsmall 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset xsmall wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -305,7 +370,7 @@ exports[`IconButton rendering tourId 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"

package/lib/IconButton/props/defaultProps.js

@@ -7,6 +7,7 @@ exports.defaultProps = void 0;
 var defaultProps = {
   palette: 'default',
   iconSize: '13',
+  size: 'large',
   className: '',
   iconClass: '',
   dataId: 'iconContainer',

package/lib/IconButton/props/propTypes.js

@@ -23,6 +23,7 @@ var propTypes = (_propTypes = {
   iconClass: _propTypes2["default"].string,
   iconName: _propTypes2["default"].string,
   iconSize: _propTypes2["default"].string,
+  size: _propTypes2["default"].oneOf(['xsmall', 'small', 'medium', 'large', 'xlarge']),
   isActive: _propTypes2["default"].bool,
   isBold: _propTypes2["default"].bool,
   isDisabled: _propTypes2["default"].bool,

package/lib/Onboarding/Onboarding.js

@@ -59,7 +59,6 @@ var Onboarding = function Onboarding(_ref) {
       hasBouncAnimationOnMount = _ref.hasBouncAnimationOnMount,
       customId = _ref.customId,
       testId = _ref.testId,
-      videoFormats = _ref.videoFormats,
       hasExpandedButton = _ref.hasExpandedButton,
       onPrimaryButtonClick = _ref.onPrimaryButtonClick,
       onSecondaryButtonClick = _ref.onSecondaryButtonClick,
@@ -73,7 +72,8 @@ var Onboarding = function Onboarding(_ref) {
 
   var videoLookupLink = state.videoLookupLink,
       isVideoLookupOpen = state.isVideoLookupOpen,
-      isEmbeddedLink = state.isEmbeddedLink;
+      isEmbeddedLink = state.isEmbeddedLink,
+      videoLookupFormat = state.videoLookupFormat;
   var primaryButtonProps = customProps.primaryButtonProps,
       secondaryButtonProps = customProps.secondaryButtonProps,
       secondaryButtonLinkProps = customProps.secondaryButtonLinkProps,
@@ -94,21 +94,18 @@ var Onboarding = function Onboarding(_ref) {
       handleSliderIndexChange = _useOnboardingSlider.handleSliderIndexChange,
       handleSliderNext = _useOnboardingSlider.handleSliderNext;
 
-  var renderMediaElement = function renderMediaElement(imageSource, videoSource) {
+  var renderMediaElement = function renderMediaElement(imageSource, videoSourceLink, videoSourceFormat) {
     return imageSource ? /*#__PURE__*/_react["default"].createElement(_Image["default"], {
       src: imageSource,
       className: "".concat(style.mediaElement, " ").concat(style.image)
-    }) : videoSource ? /*#__PURE__*/_react["default"].createElement("video", {
+    }) : videoSourceLink ? /*#__PURE__*/_react["default"].createElement("video", {
       className: style.mediaElement,
       autoPlay: true,
       loop: true,
       muted: true
-    }, videoFormats.map(function (ext) {
-      return /*#__PURE__*/_react["default"].createElement("source", {
-        key: ext,
-        src: videoSource,
-        type: "video/".concat(ext)
-      });
+    }, /*#__PURE__*/_react["default"].createElement("source", {
+      src: videoSourceLink,
+      type: "video/".concat(videoSourceFormat)
     })) : null;
   };
 
@@ -224,9 +221,12 @@ var Onboarding = function Onboarding(_ref) {
         _item$hasVideoPlayBut = item.hasVideoPlayButton,
         hasVideoPlayButton = _item$hasVideoPlayBut === void 0 ? false : _item$hasVideoPlayBut,
         videoLookupSource = item.videoLookupSource,
-        _item$hasEmbeddedVide = item.hasEmbeddedVideoLookupSource,
-        hasEmbeddedVideoLookupSource = _item$hasEmbeddedVide === void 0 ? false : _item$hasEmbeddedVide,
         tabName = item.tabName;
+    var videoLookupSourceLink = videoLookupSource && videoLookupSource.link ? videoLookupSource.link : null;
+    var videoLookupSourceFormat = videoLookupSource && videoLookupSource.format ? videoLookupSource.format : null;
+    var isEmbeddedvideoLookupSource = videoLookupSource && videoLookupSource.isEmbeddedLink ? videoLookupSource.isEmbeddedLink : null;
+    var videoSourceLink = videoSource && videoSource.link ? videoSource.link : null;
+    var videoSourceFormat = videoSource && videoSource.format ? videoSource.format : null;
     return /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
       $ui_displayMode: "flex",
       $ui_direction: "column",
@@ -241,7 +241,7 @@ var Onboarding = function Onboarding(_ref) {
       $flag_fullsize: true
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "".concat(style.innerHead, " ").concat(hasVideoPlayButton ? style.dvLayer : null)
-    }, renderMediaElement(imageSource, videoSource), hasVideoPlayButton && /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
+    }, renderMediaElement(imageSource, videoSourceLink, videoSourceFormat), hasVideoPlayButton && /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
       $ui_displayMode: "flex",
       $ui_justifyContent: "center",
       $ui_alignItems: "center",
@@ -255,7 +255,7 @@ var Onboarding = function Onboarding(_ref) {
       testId: "".concat(testId, "_play_icon"),
       $ui_className: "".concat(style.playIcon, " ").concat(style.animate, " ").concat(_semanticButtonModule["default"].buttonReset),
       $event_onClick: function $event_onClick() {
-        return openVideoLookup(videoLookupSource, hasEmbeddedVideoLookupSource);
+        return openVideoLookup(videoLookupSourceLink, isEmbeddedvideoLookupSource, videoLookupSourceFormat);
       }
     }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
       name: "ZD-GN-arrowFill",
@@ -298,7 +298,7 @@ var Onboarding = function Onboarding(_ref) {
     type: "flag",
     text: ribbonText
   }, ribbonProps)) : null, isVideoLookupOpen ? /*#__PURE__*/_react["default"].createElement(_Modal["default"], null, /*#__PURE__*/_react["default"].createElement(_VideoLookup["default"], {
-    videoFormats: videoFormats,
+    videoFormat: videoLookupFormat,
     onClose: closeVideoLookup,
     isEmbeddedLink: isEmbeddedLink,
     link: videoLookupLink,

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

@@ -86,7 +86,10 @@ describe('Onboarding', function () {
       sliderData: [{
         hasVideoPlayButton: true,
         imageSource: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3Mu0NdfXXqvCExZ9YG_j93CKuU4DIdcIlEQ&s",
-        videoLookupSource: "https://static.videezy.com/system/resources/previews/000/043/458/original/30_strings.mp4"
+        videoLookupSource: {
+          link: 'https://static.videezy.com/system/resources/previews/000/043/458/original/30_strings.mp4',
+          format: 'mp4'
+        }
       }]
     })),
         asFragment = _render9.asFragment;
@@ -107,7 +110,10 @@ describe('Onboarding', function () {
   test('rendering  data of videoSource ', function () {
     var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Onboarding["default"], {
       sliderData: [{
-        videoSource: "https://www.w3schools.com/html/mov_bbb.mp4"
+        videoSource: {
+          link: 'https://www.w3schools.com/html/mov_bbb.mp4',
+          format: 'mp4'
+        }
       }]
     })),
         asFragment = _render11.asFragment;
@@ -239,7 +245,10 @@ describe('Onboarding', function () {
         hasPrimaryButton: true,
         hasSecondaryButton: true,
         hasVideoPlayButton: true,
-        videoSource: "https://www.w3schools.com/html/mov_bbb.mp4",
+        videoSource: {
+          link: 'https://www.w3schools.com/html/mov_bbb.mp4',
+          format: 'mp4'
+        },
         heading: "Video source",
         description: "Onboarding with Video Source – Embeds a video to provide dynamic and allows users to continue watching a video while exploring the interface."
       }]
@@ -284,8 +293,14 @@ describe('Onboarding', function () {
       videoFormats: ['webm', 'mp4', 'ogg'],
       sliderData: [{
         hasVideoPlayButton: true,
-        videoSource: "https://www.w3schools.com/html/mov_bbb.mp4",
-        videoLookupSource: "https://www.w3schools.com/html/mov_bbb.mp4"
+        videoSource: {
+          link: 'https://www.w3schools.com/html/mov_bbb.mp4',
+          format: 'mp4'
+        },
+        videoLookupSource: {
+          link: 'https://www.w3schools.com/html/mov_bbb.mp4',
+          format: 'mp4'
+        }
       }]
     })),
         asFragment = _render25.asFragment;

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

@@ -1264,18 +1264,10 @@ exports[`Onboarding rendering data of Video with videoFormats 1`] = `
                   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"

package/lib/Onboarding/css/Onboarding.module.css

@@ -224,17 +224,15 @@
   width: var(--zd_size32) ;
   top: calc( var(--zd_size14) * -1 ) ;
   border-radius: 8px;
-
+  cursor: pointer;
 }
 
 [dir=ltr] .closeIconContainer {
   right: calc( var(--zd_size14) * -1 ) ;
-
 }
 
 [dir=rtl] .closeIconContainer {
   left: calc( var(--zd_size14) * -1 ) ;
-
 }
 
 .closeIconContainer::before {
@@ -306,7 +304,7 @@
   bottom: 0 ;
   width: var(--zd_size6) ;
   border-style: solid;
-  border-color: var(--zdt_onboarding_ribbon_secondary_border) var(--dot_mirror) var(--dot_mirror);
+  border-color: var(--zdt_onboarding_ribbon_secondary_border) transparent transparent;
 }
 
 [dir=ltr] .newRibbon::before {
@@ -322,13 +320,15 @@
   top: 0 ;
   bottom:0 ;
   border-width: 12px;
-  border-color: var(--zdt_onboarding_ribbon_primary_border) transparent var(--zdt_onboarding_ribbon_primary_border);   
 }
 [dir=ltr] .newRibbon::after{
-  right: calc( var(--zd_size12) * -1 ) ;   
+  right: calc( var(--zd_size12) * -1 ) ;
+  border-color: var(--zdt_onboarding_ribbon_primary_border) transparent var(--zdt_onboarding_ribbon_primary_border)
+  /*rtl:var(--zdt_onboarding_ribbon_primary_border) transparent var(--zdt_onboarding_ribbon_primary_border) */;
 }
 [dir=rtl] .newRibbon::after{
-  left: calc( var(--zd_size12) * -1 ) ;   
+  left: calc( var(--zd_size12) * -1 ) ;
+  border-color: var(--zdt_onboarding_ribbon_primary_border) transparent var(--zdt_onboarding_ribbon_primary_border);
 }
 
 /* for gradient border */

package/lib/Onboarding/hooks/useOnboarding.js

@@ -25,17 +25,19 @@ var useOnboarding = function useOnboarding(props) {
   var _useMergeState = (0, _useMergeState3["default"])({
     videoLookupLink: '',
     isVideoLookupOpen: false,
-    isEmbeddedLink: false
+    isEmbeddedLink: false,
+    videoLookupFormat: ''
   }),
       _useMergeState2 = _slicedToArray(_useMergeState, 2),
       state = _useMergeState2[0],
       setState = _useMergeState2[1];
 
-  var openVideoLookup = function openVideoLookup(videoLookupSource, hasEmbeddedVideoLookupSource) {
+  var openVideoLookup = function openVideoLookup(videoLookupSourceLink, isEmbeddedvideoLookupSource, videoLookupSourceFormat) {
     setState({
-      videoLookupLink: videoLookupSource,
+      videoLookupLink: videoLookupSourceLink,
       isVideoLookupOpen: true,
-      isEmbeddedLink: hasEmbeddedVideoLookupSource
+      isEmbeddedLink: isEmbeddedvideoLookupSource,
+      videoLookupFormat: videoLookupSourceFormat
     });
   };
 

package/lib/Onboarding/props/defaultProps.js

@@ -10,7 +10,6 @@ var defaultProps = {
   isAutoPlayAnimation: true,
   customId: "onboarding",
   testId: 'onboarding',
-  videoFormats: ['mp4'],
   sliderData: [],
   hasExpandedButton: false,
   customProps: {},

package/lib/Onboarding/props/propTypes.js

@@ -26,7 +26,6 @@ var propTypes = {
   customId: _propTypes["default"].string,
   ribbonText: _propTypes["default"].string,
   hasCloseIcon: _propTypes["default"].bool,
-  videoFormats: _propTypes["default"].array,
   customStyle: _propTypes["default"].object,
   hasExpandedButton: _propTypes["default"].bool,
   isAutoPlayAnimation: _propTypes["default"].bool,
@@ -37,13 +36,20 @@ var propTypes = {
   sliderData: _propTypes["default"].arrayOf(_propTypes["default"].shape({
     heading: _propTypes["default"].string,
     imageSource: _propTypes["default"].string,
-    videoSource: _propTypes["default"].string,
+    videoSource: _propTypes["default"].shape({
+      link: _propTypes["default"].string,
+      videoFormat: _propTypes["default"].string
+    }),
     description: _propTypes["default"].string,
     hasPrimaryButton: _propTypes["default"].bool,
     hasVideoPlayButton: _propTypes["default"].bool,
     hasSecondaryButton: _propTypes["default"].bool,
     primaryButtonText: _propTypes["default"].string,
-    videoLookupSource: _propTypes["default"].string,
+    videoLookupSource: _propTypes["default"].shape({
+      link: _propTypes["default"].string,
+      isEmbeddedLink: _propTypes["default"].bool,
+      videoFormat: _propTypes["default"].string
+    }),
     tabName: _propTypes["default"].string.isRequired,
     hasSecondaryButtonLink: _propTypes["default"].bool,
     secondaryButttonLink: _propTypes["default"].string,

package/lib/VideoLookup/VideoLookup.js

@@ -45,7 +45,7 @@ function VideoLookup(props) {
       customStyle = props.customStyle,
       testId = props.testId,
       customId = props.customId,
-      videoFormats = props.videoFormats;
+      videoFormat = props.videoFormat;
   var style = (0, _utils.mergeStyle)(_VideoLookupModule["default"], customStyle);
   var handleKeyPress = (0, _react.useCallback)(function (e) {
     if (e.keyCode == '27') {
@@ -94,12 +94,9 @@ function VideoLookup(props) {
     autoPlay: true,
     controls: true,
     className: style.videoPlayer
-  }, videoFormats.map(function (ext) {
-    return /*#__PURE__*/_react["default"].createElement("source", {
-      key: ext,
-      src: link,
-      type: "video/".concat(ext)
-    });
+  }, /*#__PURE__*/_react["default"].createElement("source", {
+    src: link,
+    type: "video/".concat(videoFormat)
   }))));
 }
 

package/lib/VideoLookup/__tests__/VideoLookup.spec.js

@@ -80,9 +80,9 @@ describe('VideoLookup', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('rendering with videoFormats', function () {
+  test('rendering with videoFormat', function () {
     var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_VideoLookup["default"], {
-      videoFormats: ['mp4', 'webm', 'ogg'],
+      videoFormat: "mp4",
       isOpened: true,
       link: "https://www.w3schools.com/html/mov_bbb.mp4"
     })),

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

@@ -378,7 +378,7 @@ exports[`VideoLookup rendering with prop isOpened 1`] = `
 </DocumentFragment>
 `;
 
-exports[`VideoLookup rendering with videoFormats 1`] = `
+exports[`VideoLookup rendering with videoFormat 1`] = `
 <DocumentFragment>
   <div
     class="container index5 dark"
@@ -426,14 +426,6 @@ exports[`VideoLookup rendering with videoFormats 1`] = `
             src="https://www.w3schools.com/html/mov_bbb.mp4"
             type="video/mp4"
           />
-          <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/ogg"
-          />
         </video>
       </div>
     </div>

package/lib/VideoLookup/css/VideoLookup.module.css

@@ -21,12 +21,12 @@
   --button_text_color: var(--zdt_videolookup_close_hover);
 }
 
-@media screen and (max-width: 1162px) {
+/* @media screen and (max-width: 1162px) {
   .videoContainer {
-    height: var(--zd_size470) ;
-    width: var(--zd_size836) ;
+    height: 470px;
+    width: 836px;
   }
-}
+} */
 
 .videoIframe,
 .videoPlayer {
@@ -37,3 +37,31 @@
 .videoIframe, .videoPlayer {
   border: none;
 }
+
+@media screen and (max-width: 1162px) {
+  .videoContainer {
+    height: var(--zd_size470) ;
+    width: var(--zd_size836) ;
+  }
+}
+
+@media screen and (max-width: 992px) {
+  .videoContainer {
+    height: var(--zd_size400) ;
+    width: var(--zd_size700) ;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .videoContainer {
+    height: var(--zd_size320) ;
+    width: 100% ;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .videoContainer {
+    height: var(--zd_size240) ;
+    width: 100% ;
+  }
+}