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

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

@@ -81,7 +81,10 @@ describe('Onboarding', () => {
       sliderData: [{
         hasVideoPlayButton: true,
         imageSource: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3Mu0NdfXXqvCExZ9YG_j93CKuU4DIdcIlEQ&s",
-        videoLookupSource: "https://static.videezy.com/system/resources/previews/000/043/458/original/30_strings.mp4"
+        videoLookupSource: {
+          link: 'https://static.videezy.com/system/resources/previews/000/043/458/original/30_strings.mp4',
+          format: 'mp4'
+        }
       }]
     }));
     expect(asFragment()).toMatchSnapshot();
@@ -102,7 +105,10 @@ describe('Onboarding', () => {
       asFragment
     } = render( /*#__PURE__*/React.createElement(Onboarding, {
       sliderData: [{
-        videoSource: "https://www.w3schools.com/html/mov_bbb.mp4"
+        videoSource: {
+          link: 'https://www.w3schools.com/html/mov_bbb.mp4',
+          format: 'mp4'
+        }
       }]
     }));
     expect(asFragment()).toMatchSnapshot();
@@ -234,7 +240,10 @@ describe('Onboarding', () => {
         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."
       }]
@@ -279,8 +288,14 @@ describe('Onboarding', () => {
       videoFormats: ['webm', 'mp4', 'ogg'],
       sliderData: [{
         hasVideoPlayButton: true,
-        videoSource: "https://www.w3schools.com/html/mov_bbb.mp4",
-        videoLookupSource: "https://www.w3schools.com/html/mov_bbb.mp4"
+        videoSource: {
+          link: 'https://www.w3schools.com/html/mov_bbb.mp4',
+          format: 'mp4'
+        },
+        videoLookupSource: {
+          link: 'https://www.w3schools.com/html/mov_bbb.mp4',
+          format: 'mp4'
+        }
       }]
     }));
     expect(asFragment()).toMatchSnapshot();

package/es/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/es/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/es/Onboarding/hooks/useOnboarding.js

@@ -4,14 +4,16 @@ const useOnboarding = props => {
   const [state, setState] = useMergeState({
     videoLookupLink: '',
     isVideoLookupOpen: false,
-    isEmbeddedLink: false
+    isEmbeddedLink: false,
+    videoLookupFormat: ''
   });
 
-  const openVideoLookup = (videoLookupSource, hasEmbeddedVideoLookupSource) => {
+  const openVideoLookup = (videoLookupSourceLink, isEmbeddedvideoLookupSource, videoLookupSourceFormat) => {
     setState({
-      videoLookupLink: videoLookupSource,
+      videoLookupLink: videoLookupSourceLink,
       isVideoLookupOpen: true,
-      isEmbeddedLink: hasEmbeddedVideoLookupSource
+      isEmbeddedLink: isEmbeddedvideoLookupSource,
+      videoLookupFormat: videoLookupSourceFormat
     });
   };
 

package/es/Onboarding/props/defaultProps.js

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

package/es/Onboarding/props/propTypes.js

@@ -11,7 +11,6 @@ export const propTypes = {
   customId: PropTypes.string,
   ribbonText: PropTypes.string,
   hasCloseIcon: PropTypes.bool,
-  videoFormats: PropTypes.array,
   customStyle: PropTypes.object,
   hasExpandedButton: PropTypes.bool,
   isAutoPlayAnimation: PropTypes.bool,
@@ -22,13 +21,20 @@ export const propTypes = {
   sliderData: PropTypes.arrayOf(PropTypes.shape({
     heading: PropTypes.string,
     imageSource: PropTypes.string,
-    videoSource: PropTypes.string,
+    videoSource: PropTypes.shape({
+      link: PropTypes.string,
+      videoFormat: PropTypes.string
+    }),
     description: PropTypes.string,
     hasPrimaryButton: PropTypes.bool,
     hasVideoPlayButton: PropTypes.bool,
     hasSecondaryButton: PropTypes.bool,
     primaryButtonText: PropTypes.string,
-    videoLookupSource: PropTypes.string,
+    videoLookupSource: PropTypes.shape({
+      link: PropTypes.string,
+      isEmbeddedLink: PropTypes.bool,
+      videoFormat: PropTypes.string
+    }),
     tabName: PropTypes.string.isRequired,
     hasSecondaryButtonLink: PropTypes.bool,
     secondaryButttonLink: PropTypes.string,

package/es/VideoLookup/VideoLookup.js

@@ -22,7 +22,7 @@ export default function VideoLookup(props) {
     customStyle,
     testId,
     customId,
-    videoFormats
+    videoFormat
   } = props;
   const style = mergeStyle(defaultStyle, customStyle);
   const handleKeyPress = useCallback(e => {
@@ -72,11 +72,10 @@ export default function VideoLookup(props) {
     autoPlay: true,
     controls: true,
     className: style.videoPlayer
-  }, videoFormats.map(ext => /*#__PURE__*/React.createElement("source", {
-    key: ext,
+  }, /*#__PURE__*/React.createElement("source", {
     src: link,
-    type: `video/${ext}`
-  })))));
+    type: `video/${videoFormat}`
+  }))));
 }
 VideoLookup.propTypes = propTypes;
 VideoLookup.defaultProps = defaultProps;

package/es/VideoLookup/__tests__/VideoLookup.spec.js

@@ -73,11 +73,11 @@ describe('VideoLookup', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
-  test('rendering with videoFormats', () => {
+  test('rendering with videoFormat', () => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(VideoLookup, {
-      videoFormats: ['mp4', 'webm', 'ogg'],
+      videoFormat: "mp4",
       isOpened: true,
       link: "https://www.w3schools.com/html/mov_bbb.mp4"
     }));

package/es/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/es/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% ;
+  }
+}

package/es/VideoLookup/props/defaultProps.js

@@ -2,7 +2,7 @@ export const defaultProps = {
   isOpened: false,
   closeText: "esc",
   isEmbeddedLink: false,
-  videoFormats: ['mp4'],
+  videoFormat: 'mp4',
   customId: "videoLookup",
   testId: 'videoLookup'
 };

package/es/VideoLookup/props/propTypes.js

@@ -7,6 +7,6 @@ export const propTypes = {
   isEmbeddedLink: PropTypes.bool,
   testId: PropTypes.string,
   customId: PropTypes.string,
-  videoFormats: PropTypes.array,
+  videoFormat: PropTypes.string,
   customStyle: PropTypes.object
 };

package/es/alert/AlertHeader/__tests__/__snapshots__/AlertHeader.spec.js.snap

@@ -761,7 +761,7 @@ exports[`AlertHeader renders with onClose function and closeTitle 1`] = `
     >
       <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="alertHeader_close"
         data-ishtml="false"
         data-selector-id="iconButton"

package/es/form/fields/TextEditorField/__tests__/__snapshots__/TextEditorField.spec.js.snap

@@ -14,7 +14,7 @@ exports[`TextEditorField rendering the defult props 1`] = `
         data-selector-id="textEditorWrapper"
       >
         <textarea
-          class="textBox  container xsmall primary needBorder noresize     effect  borderColor_default"
+          class="textBox  container xsmall  defaultWidth primary needBorder noresize     effect  borderColor_default"
           data-id="TextareaComp"
           data-selector-id="textarea"
           data-test-id="TextareaComp"

package/es/form/fields/TextEditorWrapper/__tests__/__snapshots__/TextEditorWrapper.spec.js.snap

@@ -7,7 +7,7 @@ exports[`TextEditorWrapper rendering the defult props 1`] = `
     data-selector-id="textEditorWrapper"
   >
     <textarea
-      class="textBox  container small primary needBorder noresize  smallanimated   effect  borderColor_default"
+      class="textBox  container small  defaultWidth primary needBorder noresize  smallanimated   effect  borderColor_default"
       data-id="TextareaComp"
       data-selector-id="textarea"
       data-test-id="TextareaComp"

package/es/form/fields/TextareaField/__tests__/__snapshots__/TextareaField.spec.js.snap

@@ -10,7 +10,7 @@ exports[`TextareaField rendering the defult props 1`] = `
       class="fieldContainer "
     >
       <textarea
-        class="  container xsmall primary needBorder resizeY  xsmallanimated   effect  borderColor_default"
+        class="  container xsmall  defaultWidth primary needBorder resizeY  xsmallanimated   effect  borderColor_default"
         data-id="property(undefined)"
         data-selector-id="textarea"
         data-test-id="property(undefined)"

package/es/lookup/header/Close/__tests__/__snapshots__/Close.spec.js.snap

@@ -4,7 +4,7 @@ exports[`AlphabeticList 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="closeButton"
     data-ishtml="false"
     data-selector-id="iconButton"

package/es/lookup/header/TicketHeader/__tests__/__snapshots__/TicketHeader.spec.js.snap

@@ -38,7 +38,7 @@ exports[`TicketHeader rendering the defult props 1`] = `
     >
       <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="close"
         data-ishtml="false"
         data-selector-id="iconButton"

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

@@ -79,7 +79,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                   >
                     <div
                       aria-pressed="false"
-                      class="false wrapper menuIcon undefined effect default border borderHover  hoverEffect  inflex coldir both"
+                      class="large wrapper menuIcon undefined effect default border borderHover  hoverEffect  inflex coldir both"
                       data-id="iconContainer"
                       data-ishtml="false"
                       data-selector-id="iconButton"
@@ -103,7 +103,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                 >
                   <button
                     aria-pressed="false"
-                    class="buttonReset wrapper menuIcon undefined effect default border borderHover  hoverEffect  inflex coldir both"
+                    class="buttonReset large wrapper menuIcon undefined effect default border borderHover  hoverEffect  inflex coldir both"
                     data-id="iconContainer"
                     data-ishtml="false"
                     data-selector-id="iconButton"
@@ -361,7 +361,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
         </div>
         <button
           aria-pressed="false"
-          class="buttonReset wrapper button undefined effect default border borderHover  hoverEffect  inflex coldir both"
+          class="buttonReset large wrapper button undefined effect default border borderHover  hoverEffect  inflex coldir both"
           data-id="attachToggle"
           data-ishtml="false"
           data-selector-id="iconButton"

package/lib/IconButton/IconButton.js

@@ -122,6 +122,7 @@ var IconButton = /*#__PURE__*/function (_React$Component) {
       var _this$props4 = this.props,
           palette = _this$props4.palette,
           iconSize = _this$props4.iconSize,
+          size = _this$props4.size,
           iconName = _this$props4.iconName,
           className = _this$props4.className,
           iconClass = _this$props4.iconClass,
@@ -163,7 +164,7 @@ var IconButton = /*#__PURE__*/function (_React$Component) {
         tourId: tourId,
         align: "both",
         isCover: false,
-        className: "".concat(needButtonTag && _semanticButtonModule["default"].buttonReset, " ").concat(_IconButtonModule["default"].wrapper, " ").concat(className ? className : '', " ").concat(isActive ? _IconButtonModule["default"]["".concat(palette, "_active")] : _IconButtonModule["default"][palette]),
+        className: "".concat(needButtonTag ? _semanticButtonModule["default"].buttonReset : '', " ").concat(_IconButtonModule["default"][size], " ").concat(_IconButtonModule["default"].wrapper, " ").concat(className || '', " ").concat(isActive ? _IconButtonModule["default"]["".concat(palette, "_active")] : _IconButtonModule["default"][palette]),
         dataId: dataId,
         dataSelectorId: dataSelectorId,
         onClick: this.triggerClick,

package/lib/IconButton/IconButton.module.css

@@ -1,22 +1,49 @@
 .varClass {
   --iconColor: var(--zdt_iconButton_icon_black);
 }
+
 .wrapper {
-  height: var(--zd_size28) ;
-  width: var(--zd_size28) ;
   composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
   composes: varClass;
   color: var(--iconColor);
   cursor: pointer;
 }
+
+.xsmall {
+  width: var(--zd_size16) ;
+  height: var(--zd_size16) ;
+}
+
+.small {
+  width: var(--zd_size20) ;
+  height: var(--zd_size20) ;
+}
+
+.medium {
+  width: var(--zd_size24) ;
+  height: var(--zd_size24) ;
+}
+
+.large {
+  width: var(--zd_size28) ;
+  height: var(--zd_size28) ;
+}
+
+.xlarge {
+  width: var(--zd_size32) ;
+  height: var(--zd_size32) ;
+}
+
 .primary {
   --iconColor: var(--zdt_iconButton_icon_primary);
 }
+
 .primary:hover {
   --iconColor: var(--zdt_iconButton_icon_primaryHover);
 }
+
 .primary_active,
 .primaryFilled,
 .primaryFilled_active {
   --iconColor: var(--zdt_iconButton_icon_primaryActive);
-}
+}

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

@@ -33,25 +33,34 @@ describe('IconButton', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  var sizes = ['xsmall', 'small', 'medium', 'large', 'xlarge'];
+  test.each(sizes)('rendering the size of- %s', function (size) {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      size: size
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
   var hoverType = ['default', 'border', 'bg'];
   test.each(hoverType)('rendering the hovertypes- %s', function (hoverType) {
-    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
       hoverType: hoverType
     })),
-        asFragment = _render4.asFragment;
+        asFragment = _render5.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('rendering isNeedEffect is False', function () {
-    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
       isNeedEffect: false
     })),
-        asFragment = _render5.asFragment;
+        asFragment = _render6.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('rendering ally', function () {
-    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
       a11y: {
         ariaLabel: 'ariaLabel',
         ariaControls: 'ariaControls',
@@ -60,77 +69,77 @@ describe('IconButton', function () {
         ariaExpanded: true
       }
     })),
-        asFragment = _render6.asFragment;
+        asFragment = _render7.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('rendering ally', function () {
-    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
       a11y: {
         ariaHaspopup: false,
         ariaExpanded: false
       }
     })),
-        asFragment = _render7.asFragment;
+        asFragment = _render8.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('rendering needButtonTag', function () {
-    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
       needButtonTag: false
     })),
-        asFragment = _render8.asFragment;
+        asFragment = _render9.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('rendering tourId', function () {
-    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
       tourId: "tourId"
     })),
-        asFragment = _render9.asFragment;
+        asFragment = _render10.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('rendering in Icon', function () {
-    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
       iconName: "ZD-GN-infoStroke",
       isBold: true,
       iconSize: "13",
       iconClass: "iconClass"
     })),
-        asFragment = _render10.asFragment;
+        asFragment = _render11.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('rendering in dataIsHtml is True', function () {
-    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
       dataIsHtml: true
     })),
-        asFragment = _render11.asFragment;
+        asFragment = _render12.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('rendering in isDisabled is True', function () {
-    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
       isDisabled: true
     })),
-        asFragment = _render12.asFragment;
+        asFragment = _render13.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('rendering in ClassName', function () {
-    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
       className: "IconButtonClass"
     })),
-        asFragment = _render13.asFragment;
+        asFragment = _render14.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('rendering in title', function () {
-    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
       title: "IconTitle"
     })),
-        asFragment = _render14.asFragment;
+        asFragment = _render15.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
@@ -138,18 +147,18 @@ describe('IconButton', function () {
     // Create a mock function
     var mockEleRef = jest.fn();
 
-    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
       eleRef: mockEleRef
     })),
-        asFragment = _render15.asFragment;
+        asFragment = _render16.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('Checking the "Children"', function () {
-    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
       customClass: "customClassButtonGroup"
     }, /*#__PURE__*/_react["default"].createElement("span", null, "Element 1"), /*#__PURE__*/_react["default"].createElement("span", null, "Element 2"), /*#__PURE__*/_react["default"].createElement("span", null, "Element 3"))),
-        asFragment = _render16.asFragment;
+        asFragment = _render17.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });