@zohodesk/dot 1.3.0 → 1.3.2

package/es/v1/list/status/StatusListItem/StatusListItem.js

@@ -1,9 +1,9 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 /**** Libraries ****/
-import React from 'react';
-import { defaultProps } from './../../../../list/status/StatusListItem/props/defaultProps';
-import { propTypes } from './../../../../list/status/StatusListItem/props/propTypes';
+import React, { useRef } from 'react';
+import { defaultProps } from '../../../../list/status/StatusListItem/props/defaultProps';
+import { propTypes } from '../../../../list/status/StatusListItem/props/propTypes';
 import { Container, Box } from '@zohodesk/components/es/v1/Layout';
 /**** Components ****/
 
@@ -11,112 +11,87 @@ import { Icon } from '@zohodesk/icons';
 import CssProvider from '@zohodesk/components/es/v1/Provider/CssProvider';
 /**** CSS ****/
 
-import style from './../../../../list/status/StatusListItem/StatusListItem.module.css';
-export default class StatusListItem extends React.Component {
-  constructor(props) {
-    super(props);
-    this.handleClick = this.handleClick.bind(this);
-    this.getRef = this.getRef.bind(this);
-    this.handleMouseEnter = this.handleMouseEnter.bind(this);
+import style from '../../../../list/status/StatusListItem/StatusListItem.module.css';
+export default function StatusListItem(props) {
+  let {
+    size,
+    active,
+    highlight,
+    value,
+    autoHover,
+    palette,
+    title,
+    disableTitle,
+    needTick,
+    isLink,
+    href,
+    target,
+    needBorder,
+    isDisabled,
+    bulletColor,
+    a11y,
+    needMultiLineText,
+    index,
+    getRef,
+    id,
+    onClick,
+    onMouseEnter
+  } = props;
+  let options = {};
+  let {
+    role,
+    ariaSelected,
+    ariaHidden = true
+  } = a11y;
+
+  if (isLink) {
+    options.href = href;
+    options.target = `_${target}`;
   }
 
-  getRef(ele) {
-    this.ele = ele;
-    let {
-      index,
-      getRef,
-      id
-    } = this.props;
-    getRef && getRef(ele, index, id);
+  const element = useRef(null);
+
+  function getReference(ele) {
+    element.current = ele;
+    getRef && getRef(element.current, index, id);
   }
 
-  handleClick(e) {
-    let {
-      onClick,
-      id,
-      value,
-      index
-    } = this.props;
+  function handleClick(e) {
     onClick && onClick(id, value, index, e);
   }
 
-  handleMouseEnter(e) {
-    let {
-      onMouseEnter,
-      id,
-      value,
-      index
-    } = this.props;
+  function handleMouseEnter(e) {
     onMouseEnter && onMouseEnter(id, value, index, e);
   }
 
-  render() {
-    let {
-      size,
-      active,
-      highlight,
-      value,
-      autoHover,
-      palette,
-      title,
-      disableTitle,
-      needTick,
-      isLink,
-      href,
-      target,
-      needBorder,
-      isDisabled,
-      bulletColor,
-      a11y,
-      needMultiLineText
-    } = this.props;
-    let options = {};
-    let {
-      role,
-      ariaSelected,
-      ariaHidden = true
-    } = a11y;
-
-    if (isLink) {
-      options.href = href;
-      options.target = `_${target}`;
-    }
-
-    return /*#__PURE__*/React.createElement(Container, _extends({
-      role: role,
-      "aria-selected": ariaSelected,
-      isCover: false,
-      align: "baseline",
-      alignBox: "row",
-      className: `${style.list} ${style[size]} ${style[palette]} ${active ? style.active : highlight && !isDisabled ? style.hover : ''} ${autoHover && !isDisabled ? style.effect : ''} ${needTick ? style.withTick : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? style.withBorder : ''}`,
-      dataId: String(value).replace("'", '_'),
-      onClick: !isDisabled && this.handleClick,
-      onMouseEnter: this.handleMouseEnter,
-      eleRef: this.getRef,
-      tagName: isLink ? 'a' : 'li',
-      "data-title": isDisabled ? disableTitle : null,
-      tabindex: isDisabled ? '-1' : '0'
-    }, options), /*#__PURE__*/React.createElement(Box, {
-      className: `${style.statusType} ${style[bulletColor]}`
-    }), /*#__PURE__*/React.createElement(Box, {
-      "data-title": isDisabled ? null : title,
-      flexible: true,
-      shrink: true,
-      className: needMultiLineText ? style.multiLineValue : style.value
-    }, value), needTick && active ? /*#__PURE__*/React.createElement("div", {
-      className: style.tickIcon,
-      "aria-hidden": ariaHidden
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-ticknew",
-      size: "8"
-    })) : null);
-  }
-
+  return /*#__PURE__*/React.createElement(Container, _extends({
+    role: role,
+    "aria-selected": ariaSelected,
+    isCover: false,
+    align: "baseline",
+    alignBox: "row",
+    className: `${style.list} ${style[size]} ${style[palette]} ${active ? style.active : highlight && !isDisabled ? style.hover : ''} ${autoHover && !isDisabled ? style.effect : ''} ${needTick ? style.withTick : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? style.withBorder : ''}`,
+    dataId: String(value).replace("'", '_'),
+    onClick: !isDisabled && handleClick,
+    onMouseEnter: handleMouseEnter,
+    eleRef: getReference,
+    tagName: isLink ? 'a' : 'li',
+    "data-title": isDisabled ? disableTitle : null,
+    tabindex: isDisabled ? '-1' : '0'
+  }, options), /*#__PURE__*/React.createElement(Box, {
+    className: `${style.statusType} ${style[bulletColor]}`
+  }), /*#__PURE__*/React.createElement(Box, {
+    "data-title": isDisabled ? null : title,
+    flexible: true,
+    shrink: true,
+    className: needMultiLineText ? style.multiLineValue : style.value
+  }, value), needTick && active ? /*#__PURE__*/React.createElement("div", {
+    className: style.tickIcon,
+    "aria-hidden": ariaHidden
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-ticknew",
+    size: "8"
+  })) : null);
 }
 StatusListItem.defaultProps = defaultProps;
-StatusListItem.propTypes = propTypes; // if (__DOCS__) {
-//   StatusListItem.docs = {
-//     componentGroup: 'StatusListItem',
-//     folderName: 'List'
-//   };
-// }
+StatusListItem.propTypes = propTypes;

package/es/v1/lookup/EmptyPage/EmptyPage.js

@@ -1,5 +1,5 @@
 /*** Libraries ***/
-import React, { Component } from 'react';
+import React from 'react';
 import { defaultProps } from '../../../lookup/EmptyPage/props/defaultProps';
 import { propTypes } from '../../../lookup/EmptyPage/props/propTypes';
 import EmptySearch from '@zohodesk/svg/lib/emptystate/version3/EmptySearch';
@@ -9,13 +9,13 @@ import EmptyProducts from '@zohodesk/svg/lib/emptystate/version3/EmptyProducts';
 /*** CSS ***/
 
 import style from '../../../lookup/EmptyPage/LookupEmptyPage.module.css';
-export default class EmptyPage extends Component {
-  constructor(props) {
-    super(props);
-    this.renderEmptyState = this.renderEmptyState.bind();
-  }
+export default function EmptyPage(props) {
+  let {
+    type,
+    title
+  } = props;
 
-  renderEmptyState(type) {
+  function renderEmptyState(type) {
     switch (type) {
       case 'search':
         return /*#__PURE__*/React.createElement(EmptySearch, {
@@ -42,24 +42,13 @@ export default class EmptyPage extends Component {
     }
   }
 
-  render() {
-    let {
-      type,
-      title
-    } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
-      className: style.container,
-      "data-id": `empty_${type}`,
-      "data-test-id": `empty_${type}`
-    }, this.renderEmptyState(type), /*#__PURE__*/React.createElement("div", {
-      className: style.contentDiv
-    }, title));
-  }
-
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.container,
+    "data-id": `empty_${type}`,
+    "data-test-id": `empty_${type}`
+  }, renderEmptyState(type), /*#__PURE__*/React.createElement("div", {
+    className: style.contentDiv
+  }, title));
 }
 EmptyPage.propTypes = propTypes;
-EmptyPage.defaultProps = defaultProps; // if (__DOCS__) {
-//   EmptyPage.docs = {
-//     componentGroup: 'Lookup'
-//   };
-// }
+EmptyPage.defaultProps = defaultProps;

package/es/v1/lookup/Section/Section.js

@@ -1,25 +1,19 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { propTypes } from '../../../lookup/Section/props/propTypes';
 import { Container, Box } from '@zohodesk/components/es/v1/Layout';
 import style from '../../../lookup/Section/LookupSection.module.css';
-export default class Section extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let {
-      alignBox,
-      className
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Container, {
-      "data-drag-container": "true",
-      alignBox: alignBox,
-      className: `${style.section} ${className ? className : ''}`
-    }, /*#__PURE__*/React.createElement(Box, {
-      flexible: true
-    }, this.props.children));
-  }
-
+export default function Section(props) {
+  let {
+    alignBox,
+    className,
+    children
+  } = props;
+  return /*#__PURE__*/React.createElement(Container, {
+    "data-drag-container": "true",
+    alignBox: alignBox,
+    className: `${style.section} ${className ? className : ''}`
+  }, /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, children));
 }
 Section.propTypes = propTypes;

package/es/v1/svg/PlusIcon.js

@@ -1,32 +1,25 @@
 import React from 'react';
 import { PlusIcon_defaultProps } from '../../svg/props/defaultProps';
 import { PlusIcon_propTypes } from '../../svg/props/propTypes';
-import SVG from '@zohodesk/svg/lib/SVG/SVG';
-export default class PlusIcon extends React.Component {
-  render() {
-    let {
-      isRender,
-      isSymbol,
-      className
-    } = this.props;
-    return /*#__PURE__*/React.createElement(SVG, {
-      viewBox: "0 0 32 32",
-      name: "PlusIcon",
-      isRender: isRender,
-      isSymbol: isSymbol,
-      className: className
-    }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
-      style: {
-        fill: '#767d89'
-      },
-      d: "M16,2.7c0.4,0,0.7,0.1,0.9,0.4s0.4,0.6,0.4,0.9v10.7H28c0.4,0,0.7,0.1,0.9,0.4c0.3,0.3,0.4,0.6,0.4,0.9 c0,0.4-0.1,0.7-0.4,0.9c-0.3,0.3-0.6,0.4-0.9,0.4H17.3V28c0,0.4-0.1,0.7-0.4,0.9c-0.3,0.3-0.6,0.4-0.9,0.4c-0.4,0-0.7-0.1-0.9-0.4 c-0.3-0.3-0.4-0.6-0.4-0.9V17.3H4c-0.4,0-0.7-0.1-0.9-0.4S2.7,16.4,2.7,16s0.1-0.7,0.4-0.9c0.3-0.3,0.6-0.4,0.9-0.4h10.7V4 c0-0.4,0.1-0.7,0.4-0.9C15.3,2.8,15.6,2.7,16,2.7z"
-    })));
-  }
-
+import SVG from '@zohodesk/svg/lib/v1/SVG/SVG';
+export default function PlusIcon(props) {
+  let {
+    isRender,
+    isSymbol,
+    className
+  } = props;
+  return /*#__PURE__*/React.createElement(SVG, {
+    viewBox: "0 0 32 32",
+    name: "PlusIcon",
+    isRender: isRender,
+    isSymbol: isSymbol,
+    className: className
+  }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+    style: {
+      fill: '#767d89'
+    },
+    d: "M16,2.7c0.4,0,0.7,0.1,0.9,0.4s0.4,0.6,0.4,0.9v10.7H28c0.4,0,0.7,0.1,0.9,0.4c0.3,0.3,0.4,0.6,0.4,0.9 c0,0.4-0.1,0.7-0.4,0.9c-0.3,0.3-0.6,0.4-0.9,0.4H17.3V28c0,0.4-0.1,0.7-0.4,0.9c-0.3,0.3-0.6,0.4-0.9,0.4c-0.4,0-0.7-0.1-0.9-0.4 c-0.3-0.3-0.4-0.6-0.4-0.9V17.3H4c-0.4,0-0.7-0.1-0.9-0.4S2.7,16.4,2.7,16s0.1-0.7,0.4-0.9c0.3-0.3,0.6-0.4,0.9-0.4h10.7V4 c0-0.4,0.1-0.7,0.4-0.9C15.3,2.8,15.6,2.7,16,2.7z"
+  })));
 }
 PlusIcon.propTypes = PlusIcon_propTypes;
-PlusIcon.defaultProps = PlusIcon_defaultProps; // if (__DOCS__) {
-//   PlusIcon.docs = {
-//     componentGroup: 'SVG'
-//   };
-// }
+PlusIcon.defaultProps = PlusIcon_defaultProps;

package/es/v1/svg/SnippetIcon.js

@@ -1,34 +1,27 @@
 import React from 'react';
 import { SnippetIcon_defaultProps } from '../../svg/props/defaultProps';
 import { SnippetIcon_propTypes } from '../../svg/props/propTypes';
-import SVG from '@zohodesk/svg/lib/SVG/SVG';
-export default class SnippetIcon extends React.Component {
-  render() {
-    let {
-      isRender,
-      isSymbol,
-      className
-    } = this.props;
-    return /*#__PURE__*/React.createElement(SVG, {
-      viewBox: "0 0 31 32",
-      name: "SnippetIcon",
-      isRender: isRender,
-      isSymbol: isSymbol,
-      className: className
-    }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
-      d: "M14.4,8.2L15.6,9L16,8.4l-1-0.7l2.5-3.7L11.5,0L8.9,3.8L7.9,3L7.6,3.6l1.2,0.8c-2.3,3-5.9,0.8-6,0.7L2.3,4.9L0,23.8 l16.6-9.3l-0.4-0.3C15.9,13.9,12.6,11.5,14.4,8.2L14.4,8.2z M1.5,22l5.2-7.7c0.3,0.1,0.6,0.2,0.9,0.2c1.2,0,2.1-0.9,2.2-2.1 c0-1.2-0.9-2.1-2.1-2.2c-1.2,0-2.1,0.9-2.2,2.1c0,0.6,0.2,1.2,0.7,1.6L1,21.6L2.8,6c1.2,0.6,4.4,1.7,6.5-1.1l4.5,3 c-1.8,3,0.4,5.6,1.4,6.5L1.5,22L1.5,22z M6.7,13.6c-0.7-0.4-0.8-1.3-0.4-2s1.3-0.8,2-0.4c0.7,0.4,0.8,1.3,0.4,2 c-0.2,0.3-0.5,0.5-0.9,0.6C7.5,13.9,7.1,13.8,6.7,13.6L6.7,13.6z"
-    }), /*#__PURE__*/React.createElement("path", {
-      style: {
-        fill: '#03A3FE'
-      },
-      d: "M30.9,25c-4.9,0.7-5.4,1.2-5.9,6.7c-0.6-5.4-1.1-6-6.1-6.5c4.9-0.7,5.4-1.2,5.9-6.7 C25.4,23.9,25.9,24.5,30.9,25z M30.3,8.2c-4.5,0.6-4.9,1.1-5.5,6.3c-0.5-5.3-0.9-5.8-5.4-6.4c4.5-0.6,4.9-1.1,5.5-6.3 C25.4,7.1,25.8,7.6,30.3,8.2z M16.2,25.7c-4.5,0.6-4.9,1.1-5.5,6.3c-0.5-5.3-0.9-5.8-5.4-6.4c4.5-0.6,4.9-1.1,5.5-6.3 C11.3,24.6,11.7,25.1,16.2,25.7z"
-    })));
-  }
-
+import SVG from '@zohodesk/svg/lib/v1/SVG/SVG';
+export default function SnippetIcon(props) {
+  let {
+    isRender,
+    isSymbol,
+    className
+  } = props;
+  return /*#__PURE__*/React.createElement(SVG, {
+    viewBox: "0 0 31 32",
+    name: "SnippetIcon",
+    isRender: isRender,
+    isSymbol: isSymbol,
+    className: className
+  }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+    d: "M14.4,8.2L15.6,9L16,8.4l-1-0.7l2.5-3.7L11.5,0L8.9,3.8L7.9,3L7.6,3.6l1.2,0.8c-2.3,3-5.9,0.8-6,0.7L2.3,4.9L0,23.8 l16.6-9.3l-0.4-0.3C15.9,13.9,12.6,11.5,14.4,8.2L14.4,8.2z M1.5,22l5.2-7.7c0.3,0.1,0.6,0.2,0.9,0.2c1.2,0,2.1-0.9,2.2-2.1 c0-1.2-0.9-2.1-2.1-2.2c-1.2,0-2.1,0.9-2.2,2.1c0,0.6,0.2,1.2,0.7,1.6L1,21.6L2.8,6c1.2,0.6,4.4,1.7,6.5-1.1l4.5,3 c-1.8,3,0.4,5.6,1.4,6.5L1.5,22L1.5,22z M6.7,13.6c-0.7-0.4-0.8-1.3-0.4-2s1.3-0.8,2-0.4c0.7,0.4,0.8,1.3,0.4,2 c-0.2,0.3-0.5,0.5-0.9,0.6C7.5,13.9,7.1,13.8,6.7,13.6L6.7,13.6z"
+  }), /*#__PURE__*/React.createElement("path", {
+    style: {
+      fill: '#03A3FE'
+    },
+    d: "M30.9,25c-4.9,0.7-5.4,1.2-5.9,6.7c-0.6-5.4-1.1-6-6.1-6.5c4.9-0.7,5.4-1.2,5.9-6.7 C25.4,23.9,25.9,24.5,30.9,25z M30.3,8.2c-4.5,0.6-4.9,1.1-5.5,6.3c-0.5-5.3-0.9-5.8-5.4-6.4c4.5-0.6,4.9-1.1,5.5-6.3 C25.4,7.1,25.8,7.6,30.3,8.2z M16.2,25.7c-4.5,0.6-4.9,1.1-5.5,6.3c-0.5-5.3-0.9-5.8-5.4-6.4c4.5-0.6,4.9-1.1,5.5-6.3 C11.3,24.6,11.7,25.1,16.2,25.7z"
+  })));
 }
 SnippetIcon.propTypes = SnippetIcon_propTypes;
-SnippetIcon.defaultProps = SnippetIcon_defaultProps; // if (__DOCS__) {
-//   SnippetIcon.docs = {
-//     componentGroup: 'SVG'
-//   };
-// }
+SnippetIcon.defaultProps = SnippetIcon_defaultProps;

package/es/v1/svg/TemplateIcon.js

@@ -1,35 +1,28 @@
 import React from 'react';
 import { TemplateIcon_defaultProps } from '../../svg/props/defaultProps';
 import { TemplateIcon_propTypes } from '../../svg/props/propTypes';
-import SVG from '@zohodesk/svg/lib/SVG/SVG';
-export default class TemplateIcon extends React.Component {
-  render() {
-    let {
-      isRender,
-      isSymbol,
-      className
-    } = this.props;
-    return /*#__PURE__*/React.createElement(SVG, {
-      viewBox: "0 0 40 40",
-      name: "TemplateIcon",
-      isRender: isRender,
-      isSymbol: isSymbol,
-      className: className
-    }, /*#__PURE__*/React.createElement("path", {
-      d: "M33.09,3H6.91A3.91,3.91,0,0,0,3,6.91V33.09A3.91,3.91,0,0,0,6.91,37H33.09A3.91,3.91,0,0,0,37,33.09V6.91A3.92,3.92,0,0,0,33.09,3ZM6.91,5H33.09A1.92,1.92,0,0,1,35,6.91v4.62H5V6.91A1.92,1.92,0,0,1,6.91,5ZM33.09,35H6.91A1.92,1.92,0,0,1,5,33.09V13.53H35V33.09A1.92,1.92,0,0,1,33.09,35Z"
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M9.33,9.33A1.07,1.07,0,1,0,8.27,8.27,1.06,1.06,0,0,0,9.33,9.33Z"
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M13.6,9.33a1.07,1.07,0,1,0-1.07-1.06A1.06,1.06,0,0,0,13.6,9.33Z"
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M24.87,23H21V19.13a1,1,0,1,0-2,0V23H15.13a1,1,0,0,0,0,2H19v3.86a1,1,0,0,0,2,0V25h3.87a1,1,0,1,0,0-2Z"
-    }));
-  }
-
+import SVG from '@zohodesk/svg/lib/v1/SVG/SVG';
+export default function TemplateIcon(props) {
+  let {
+    isRender,
+    isSymbol,
+    className
+  } = props;
+  return /*#__PURE__*/React.createElement(SVG, {
+    viewBox: "0 0 40 40",
+    name: "TemplateIcon",
+    isRender: isRender,
+    isSymbol: isSymbol,
+    className: className
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M33.09,3H6.91A3.91,3.91,0,0,0,3,6.91V33.09A3.91,3.91,0,0,0,6.91,37H33.09A3.91,3.91,0,0,0,37,33.09V6.91A3.92,3.92,0,0,0,33.09,3ZM6.91,5H33.09A1.92,1.92,0,0,1,35,6.91v4.62H5V6.91A1.92,1.92,0,0,1,6.91,5ZM33.09,35H6.91A1.92,1.92,0,0,1,5,33.09V13.53H35V33.09A1.92,1.92,0,0,1,33.09,35Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M9.33,9.33A1.07,1.07,0,1,0,8.27,8.27,1.06,1.06,0,0,0,9.33,9.33Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M13.6,9.33a1.07,1.07,0,1,0-1.07-1.06A1.06,1.06,0,0,0,13.6,9.33Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M24.87,23H21V19.13a1,1,0,1,0-2,0V23H15.13a1,1,0,0,0,0,2H19v3.86a1,1,0,0,0,2,0V25h3.87a1,1,0,1,0,0-2Z"
+  }));
 }
 TemplateIcon.propTypes = TemplateIcon_propTypes;
-TemplateIcon.defaultProps = TemplateIcon_defaultProps; // if (__DOCS__) {
-//   TemplateIcon.docs = {
-//     componentGroup: 'SVG'
-//   };
-// }
+TemplateIcon.defaultProps = TemplateIcon_defaultProps;

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

@@ -0,0 +1,156 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _IconButton = _interopRequireDefault(require("../IconButton.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('IconButton', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  var palette = ['primary', 'primaryFilled', 'default'];
+  test.each(palette)('rendering the palette of- %s', function (palette) {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      palette: palette
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(palette)('rendering the isActive true with palette of- %s', function (palette) {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      isActive: true,
+      palette: palette
+    })),
+        asFragment = _render3.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"], {
+      hoverType: hoverType
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering isNeedEffect is False', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      isNeedEffect: false
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering ally', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      a11y: {
+        ariaLabel: 'ariaLabel',
+        ariaControls: 'ariaControls',
+        ariaLabelledby: 'ariaLabelledby',
+        ariaHaspopup: true,
+        ariaExpanded: true
+      }
+    })),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering ally', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      a11y: {
+        ariaHaspopup: false,
+        ariaExpanded: false
+      }
+    })),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering needButtonTag', function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      needButtonTag: false
+    })),
+        asFragment = _render8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering tourId', function () {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      tourId: "tourId"
+    })),
+        asFragment = _render9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering in Icon', function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      iconName: "ZD-GN-infoStroke",
+      isBold: true,
+      iconSize: "13",
+      iconClass: "iconClass"
+    })),
+        asFragment = _render10.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering in dataIsHtml is True', function () {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      dataIsHtml: true
+    })),
+        asFragment = _render11.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering in isDisabled is True', function () {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      isDisabled: true
+    })),
+        asFragment = _render12.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering in ClassName', function () {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      className: "IconButtonClass"
+    })),
+        asFragment = _render13.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering in title', function () {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      title: "IconTitle"
+    })),
+        asFragment = _render14.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('eleRef prop is a function', function () {
+    // Create a mock function
+    var mockEleRef = jest.fn();
+
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      eleRef: mockEleRef
+    })),
+        asFragment = _render15.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Checking the "Children"', function () {
+    var _render16 = (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;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});