@zohodesk/dot 1.3.3 → 1.4.1

package/es/layout/SubtabLayout/SubtabLayout.module.css

@@ -48,6 +48,7 @@
 }
 
 .tertiary_borderStyle {
+  /* css:theme-validation:ignore */
   border-bottom: 1px solid var(--borderColor);
 }
 
@@ -149,6 +150,7 @@
 
 .footer {
   composes: varClass;
+  /* css:theme-validation:ignore */
   border-top: 1px solid var(--borderColor);
 }
 

package/es/list/Comment/Comment.js

@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import { Icon } from '@zohodesk/icons';
-import { i18NProviderUtils } from '@zohodesk/i18n';
 import Button from '@zohodesk/components/lib/semantic/Button/Button';
 import style from './Comment.module.css';
 export default class Comment extends Component {
@@ -14,18 +13,16 @@ export default class Comment extends Component {
     let {
       count,
       onClick,
-      className
+      className,
+      title
     } = this.props;
-    let i18N = i18NProviderUtils.getI18NValue;
-    let commentCount = parseInt(count);
-    let commentTitle = !commentCount ? i18N('tabs.request.comment') : commentCount > 1 ? i18N('support.comment.many', count) : i18N('support.comment.one');
     return /*#__PURE__*/React.createElement(Button, {
       customClass: `${style.container} ${className} `,
       onClick: onClick,
       dataId: "commentLstContainer",
-      title: commentTitle,
+      title: title,
       a11y: {
-        ariaLabel: commentTitle
+        ariaLabel: title
       }
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-TK-commentLine",

package/es/list/Comment/Comment.module.css

@@ -5,6 +5,7 @@
   composes: varClass;
   composes: inlineBlockMiddle from '../listCommon.module.css';
   position: relative;
+  /* css:theme-validation:ignore */
   color: var(--icon_color);
   padding: 0 var(--zd_size2) ;
   cursor: pointer;

package/es/list/Comment/props/defaultProps.js

@@ -1,3 +1,4 @@
 export const defaultProps = {
-  className: ''
+  className: '',
+  title: ''
 };

package/es/list/Comment/props/propTypes.js

@@ -2,5 +2,6 @@ import PropTypes from 'prop-types';
 export const propTypes = {
   className: PropTypes.string,
   count: PropTypes.string,
+  title: PropTypes.string,
   onClick: PropTypes.func
 };

package/es/list/Dot/Dot.module.css

@@ -4,6 +4,7 @@
 .dot {
   composes: varClass;
   font-size: var(--zd_font_size16) ;
+  /* css:theme-validation:ignore */
   color: var(--dotColor);
   transform: perspective(1px);
 }

package/es/list/ListLayout/ListLayout.module.css

@@ -35,10 +35,22 @@
   padding: var(--zd_size2) 0 ;
 }
 
+.compact .innerContainer,
+.classic .innerContainer,
+.superCompact .innerContainer {
+  /* css:theme-validation:ignore */
+}
+
 .compact .innerContainer, .classic .innerContainer, .superCompact .innerContainer {
   border-bottom: 1px dotted var(--listBorder);
 }
 
+.compact,
+.classic,
+.superCompact {
+  /* css:theme-validation:ignore */
+}
+
 [dir=ltr] .compact, [dir=ltr] .classic, [dir=ltr] .superCompact {
   border-left: var(--zd_size2) solid transparent;
 }

package/es/list/Subject/Subject.module.css

@@ -3,6 +3,7 @@
 }
 .subject {
   composes: varClass;
+  /* css:theme-validation:ignore */
   color: var(--subject_text);
   display: block;
 }

package/es/list/Thread/Thread.module.css

@@ -4,6 +4,7 @@
 .container {
   composes: varClass;
   position: relative;
+  /* css:theme-validation:ignore */
   color: var(--icon_color);
   cursor: pointer;
 }

package/es/list/index.js

@@ -13,5 +13,4 @@ export { default as StatusDropdown } from './status/StatusDropdown/StatusDropdow
 export { default as StatusListItem } from './status/StatusListItem/StatusListItem';
 export { default as Subject } from './Subject/Subject';
 export { default as TagNew } from './TagNew/TagNew';
-export { default as Thread } from './Thread/Thread';
-export { default as UserTime } from './UserTime/UserTime';
+export { default as Thread } from './Thread/Thread';

package/es/setup/header/Search/Search.module.css

@@ -35,6 +35,7 @@
   font-size: var(--zd_font_size13) ;
   width: 100% ;
   letter-spacing: 0.2px;
+  /* css:theme-validation:ignore */
   transition: all var(--zd_transition3) ease;
   color: var(--zdt_search_input_text);
   font-family: var(--zd_regular);

package/es/setup/table/TableRow/SetupTableRow.module.css

@@ -9,6 +9,7 @@
   margin-left: var(--zd_size40) ;
   margin-right: var(--zd_size40) ;
 }
+
 .container:hover {
-  background-color: var( --zdt_setuptablerow_hover_bg);
-}
+  background-color: var(--zdt_setuptablerow_hover_bg);
+}

package/es/v1/alert/AlertHeader/AlertHeader.js

@@ -64,10 +64,11 @@ export default function AlertHeader(props) {
     shrink: true,
     id: htmlId
   }, title), children && /*#__PURE__*/React.createElement(Box, {
+    shrink: true,
     adjust: true,
     flexible: true
   }, children))), onClose && /*#__PURE__*/React.createElement(Box, {
-    className: style.close
+    className: finalStyle.close
   }, /*#__PURE__*/React.createElement(AlertClose, {
     onClose: onClose,
     dataTitle: closeTitle,

package/es/v1/list/Comment/Comment.js

@@ -2,25 +2,22 @@ import React from 'react';
 import { defaultProps } from '../../../list/Comment/props/defaultProps';
 import { propTypes } from '../../../list/Comment/props/propTypes';
 import { Icon } from '@zohodesk/icons';
-import { i18NProviderUtils } from '@zohodesk/i18n';
 import Button from '@zohodesk/components/es/v1/semantic/Button/Button';
 import style from '../../../list/Comment/Comment.module.css';
 export default function Comment(props) {
   let {
     count,
     onClick,
-    className
+    className,
+    title
   } = props;
-  let i18N = i18NProviderUtils.getI18NValue;
-  let commentCount = parseInt(count);
-  let commentTitle = !commentCount ? i18N('tabs.request.comment') : commentCount > 1 ? i18N('support.comment.many', count) : i18N('support.comment.one');
   return /*#__PURE__*/React.createElement(Button, {
     customClass: `${style.container} ${className} `,
     onClick: onClick,
     dataId: "commentLstContainer",
-    title: commentTitle,
+    title: title,
     a11y: {
-      ariaLabel: commentTitle
+      ariaLabel: title
     }
   }, /*#__PURE__*/React.createElement(Icon, {
     name: "ZD-TK-commentLine",

package/es/v1/list/index.js

@@ -13,5 +13,4 @@ export { default as StatusDropdown } from './status/StatusDropdown/StatusDropdow
 export { default as StatusListItem } from './status/StatusListItem/StatusListItem';
 export { default as Subject } from './Subject/Subject';
 export { default as TagNew } from './TagNew/TagNew';
-export { default as Thread } from './Thread/Thread';
-export { default as UserTime } from './UserTime/UserTime';
+export { default as Thread } from './Thread/Thread';

package/es/v1/notification/DesktopNotification/DesktopNotification.js

@@ -1,14 +1,15 @@
 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); }
 
-import React, { useState } from 'react';
-import { defaultProps } from '../../../version2/notification/DesktopNotification/props/defaultProps';
-import { propTypes, DesktopNotificationUI_propTypes } from '../../../version2/notification/DesktopNotification/props/propTypes';
+import React from 'react';
+import defaultProps from './props/defaultProps';
+import { propTypes, DesktopNotificationUI_propTypes } from './props/propTypes';
 import { Container, Box } from '@zohodesk/components/es/v1/Layout';
 import { useZIndex } from '@zohodesk/components/es/v1/Provider/ZindexProvider';
 import AutoClose from '../../../actions/AutoClose';
 import Button from '@zohodesk/components/es/v1/Button/Button';
 import FormAction from '../../../FormAction/FormAction';
 import DesktopNotificationHeader from '../DesktopNotificationHeader/DesktopNotificationHeader';
+import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
 import style from '../../../version2/notification/DesktopNotification/DesktopNotification.module.css';
 let buttonPaletteObject = {
   success: {
@@ -58,9 +59,11 @@ export function DesktopNotificationUI(props) {
     size,
     onClose,
     needClose,
+    renderAlertIcon,
     customClass = {},
     i18nKeys = {},
-    customProps
+    customProps,
+    responsiveId
   } = props;
   let {
     closeTitle = 'Close'
@@ -89,67 +92,91 @@ export function DesktopNotificationUI(props) {
   let Zindex = isAnimate ? getNextIndex() : null;
   let uiVariantOne = title && (info || secondaryInfo);
   let uiVariantTwo = title && !(info || secondaryInfo) && !getSectionContainer;
+
+  function responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      uptoTablet: mediaQueryOR([{
+        maxWidth: 760
+      }])
+    };
+  }
+
   return /*#__PURE__*/React.createElement("div", {
     className: style.parentElement,
     style: needAutoZindex && isAnimate ? {
       zIndex: `${Zindex}`
     } : {},
     "data-selector-id": dataSelectorId
-  }, /*#__PURE__*/React.createElement(Container, _extends({
-    className: `${style.container} ${isAnimate ? animateClass : animateRemoveClass} ${style[`${size}`] ? style[`${size}`] : ''} ${isShrinkView ? style.globalNotify : ''} ${containerClass}`,
-    isCover: false,
-    dataId: dataId,
-    isInline: uiVariantTwo
-  }, ExtraProps), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(DesktopNotificationHeader, {
-    type: type,
-    title: title,
-    variant: titleVariant,
-    needIcon: needIcon,
-    onClose: onClose,
-    closeTitle: closeTitle,
-    dataId: `${dataId}_close`,
-    needClose: needClose
-  })), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Container, {
-    alignBox: "column"
-  }, uiVariantOne && /*#__PURE__*/React.createElement(Box, {
-    flexible: true
-  }, /*#__PURE__*/React.createElement("div", {
-    className: `${style.section} ${style.infoText}`
-  }, subTitle && /*#__PURE__*/React.createElement("div", {
-    className: `${style.subTitle} ${info || secondaryInfo ? style.subTitleMargin : ''}`
-  }, subTitle), info && /*#__PURE__*/React.createElement("div", null, info), secondaryInfo && /*#__PURE__*/React.createElement("div", {
-    className: `${info ? style.secondaryInfo : ''}`
-  }, secondaryInfo))), getSectionContainer && /*#__PURE__*/React.createElement(Box, {
-    flexible: true
-  }, getSectionContainer()), submitText || cancelText ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
-    className: style.footer
-  }, isMore ? /*#__PURE__*/React.createElement("div", {
-    className: `${style.message}`
-  }, message) : null, /*#__PURE__*/React.createElement(FormAction, {
-    size: "small",
-    paddingLeftSize: "xmedium"
-  }, submitText ? /*#__PURE__*/React.createElement("div", {
-    onClick: onClickSubmit,
-    "data-id": `${dataId}_submitButton`,
-    "data-test-id": `${dataId}_submitButton`
-  }, /*#__PURE__*/React.createElement(Container, {
-    align: "vertical",
-    alignBox: "row"
-  }, getSubmitContainer ? /*#__PURE__*/React.createElement(Box, {
-    flexible: true
-  }, getSubmitContainer()) : /*#__PURE__*/React.createElement(Box, {
-    flexible: true
-  }, /*#__PURE__*/React.createElement(Button, {
-    text: submitText,
-    palette: submitType ? submitType : buttonPalette
-  })))) : null, cancelText ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
-    text: cancelText,
-    palette: "secondary",
-    dataId: `${dataId}_cancelButton`,
-    onClick: onClickCancel
-  })) : null))) : null)), getBottomContainer ? /*#__PURE__*/React.createElement(Box, null, getBottomContainer()) : null));
+  }, /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+    query: responsiveFunc,
+    responsiveId: responsiveId
+  }, _ref2 => {
+    let {
+      uptoTablet
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(Container, _extends({
+      className: `${style.container} ${isAnimate ? animateClass : animateRemoveClass}
+             ${isShrinkView ? style.globalNotify : ''} ${containerClass}
+             ${uptoTablet ? style.tapWidth : style[`${size}`]}`,
+      isCover: false,
+      dataId: dataId,
+      isInline: uiVariantTwo
+    }, ExtraProps), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(DesktopNotificationHeader, {
+      type: type,
+      title: title,
+      variant: titleVariant,
+      needIcon: needIcon,
+      onClose: onClose,
+      closeTitle: closeTitle,
+      renderAlertIcon: renderAlertIcon,
+      dataId: `${dataId}_close`,
+      needClose: needClose
+    })), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "column"
+    }, uiVariantOne && /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `${style.section} ${style.infoText}`
+    }, subTitle && /*#__PURE__*/React.createElement("div", {
+      className: `${style.subTitle} ${info || secondaryInfo ? style.subTitleMargin : ''}`
+    }, subTitle), info && /*#__PURE__*/React.createElement("div", null, info), secondaryInfo && /*#__PURE__*/React.createElement("div", {
+      className: `${info ? style.secondaryInfo : ''}`
+    }, secondaryInfo))), getSectionContainer && /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, getSectionContainer()), submitText || cancelText ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
+      className: style.footer
+    }, isMore ? /*#__PURE__*/React.createElement("div", {
+      className: `${style.message}`
+    }, message) : null, /*#__PURE__*/React.createElement(FormAction, {
+      size: "small",
+      paddingLeftSize: "xmedium"
+    }, submitText ? /*#__PURE__*/React.createElement("div", {
+      onClick: onClickSubmit,
+      "data-id": `${dataId}_submitButton`,
+      "data-test-id": `${dataId}_submitButton`
+    }, /*#__PURE__*/React.createElement(Container, {
+      align: "vertical",
+      alignBox: "row"
+    }, getSubmitContainer ? /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, getSubmitContainer()) : /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: submitText,
+      palette: submitType ? submitType : buttonPalette
+    })))) : null, cancelText ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+      text: cancelText,
+      palette: "secondary",
+      dataId: `${dataId}_cancelButton`,
+      onClick: onClickCancel
+    })) : null))) : null)), getBottomContainer ? /*#__PURE__*/React.createElement(Box, null, getBottomContainer()) : null);
+  }));
 }
 DesktopNotificationUI.propTypes = DesktopNotificationUI_propTypes;
+DesktopNotificationUI.propTypes = defaultProps;
 export default function DesktopNotification(props) {
   return /*#__PURE__*/React.createElement(AutoClose, _extends({}, props, {
     Element: DesktopNotificationUI

package/es/v1/notification/DesktopNotification/props/defaultProps.js

@@ -0,0 +1,17 @@
+import { getDotLibraryConfig } from '../../../../Provider/Config';
+export default {
+  isMore: false,
+  isAnimate: true,
+  isClose: false,
+  autoClose: false,
+  hideTime: '3000',
+  dataId: 'toastMessage',
+  needAutoZindex: true,
+  needIcon: true,
+  titleVariant: 'primary',
+  isShrinkView: false,
+  needClose: true,
+  customProps: {},
+  dataSelectorId: 'desktopNotification',
+  responsiveId: getDotLibraryConfig('desktopNotificationResponsiveId')
+};

package/es/v1/notification/DesktopNotification/props/propTypes.js

@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  isClose: PropTypes.bool,
+  onPortalClose: PropTypes.func,
+  autoClose: PropTypes.bool,
+  hideTime: PropTypes.string,
+  Element: PropTypes.element,
+  responsiveId: PropTypes.string
+};
+export const DesktopNotificationUI_propTypes = {
+  type: PropTypes.oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification', 'alarm']),
+  cancelText: PropTypes.string,
+  submitText: PropTypes.string,
+  submitType: PropTypes.oneOf(['primary', 'danger', 'success']),
+  isMore: PropTypes.bool,
+  customClass: PropTypes.object,
+  dataId: PropTypes.string,
+  getBottomContainer: PropTypes.func,
+  getSectionContainer: PropTypes.func,
+  getSubmitContainer: PropTypes.func,
+  i18nKeys: PropTypes.object,
+  dataSelectorId: PropTypes.string,
+  info: PropTypes.string,
+  isAnimate: PropTypes.bool,
+  isShrinkView: PropTypes.bool,
+  message: PropTypes.string,
+  needAutoZindex: PropTypes.bool,
+  needClose: PropTypes.bool,
+  needIcon: PropTypes.bool,
+  onCancel: PropTypes.func,
+  onClose: PropTypes.func,
+  onSubmit: PropTypes.func,
+  secondaryInfo: PropTypes.string,
+  size: PropTypes.oneOf(['medium', 'large']),
+  subTitle: PropTypes.string,
+  titleVariant: PropTypes.oneOf(['primary', 'secondary']),
+  isClose: PropTypes.bool,
+  renderAlertIcon: PropTypes.func,
+  customProps: PropTypes.shape({
+    ExtraProps: PropTypes.object
+  }),
+  title: PropTypes.string
+};

package/es/v1/notification/DesktopNotificationHeader/DesktopNotificationHeader.js

@@ -1,9 +1,11 @@
-import React, { Component } from 'react';
-import { defaultProps } from '../../../version2/notification/DesktopNotificationHeader/props/defaultProps';
-import { propTypes } from '../../../version2/notification/DesktopNotificationHeader/props/propTypes';
+import React from 'react';
+import defaultProps from './props/defaultProps';
+import propTypes from './props/propTypes';
 import { Container, Box } from '@zohodesk/components/es/v1/Layout';
 import AlertClose from '../../alert/AlertClose/AlertClose';
 import AlertIcons from '../../alert/alertIcons/AlertIcons';
+import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+import Typography from '@zohodesk/components/es/v1/Typography/Typography';
 import style from '../../../version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css';
 export default function DesktopNotificationHeader(props) {
   let {
@@ -14,36 +16,71 @@ export default function DesktopNotificationHeader(props) {
     type = '',
     needIcon,
     title,
-    needClose
+    renderAlertIcon,
+    needClose,
+    responsiveId
   } = props;
+
+  function responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      uptoTablet: mediaQueryOR([{
+        maxWidth: 760
+      }])
+    };
+  }
+
   return /*#__PURE__*/React.createElement(Container, {
     align: "vertical",
     alignBox: "row",
     className: `${style.container} ${style[variant]} ${style[type]}`,
     isCover: false,
     wrap: "wrap"
-  }, needIcon ? /*#__PURE__*/React.createElement("div", {
-    className: style.iconContainer
-  }, /*#__PURE__*/React.createElement(AlertIcons, {
-    type: type
-  })) : null, /*#__PURE__*/React.createElement(Box, {
-    flexible: true
-  }, /*#__PURE__*/React.createElement(Container, {
-    alignBox: "row",
-    align: "center"
-  }, variant === 'primary' ? /*#__PURE__*/React.createElement(Box, {
-    className: style.title,
-    shrink: true
-  }, title) : /*#__PURE__*/React.createElement(Box, {
-    className: `${style.infoText}`
-  }, title))), needClose ? /*#__PURE__*/React.createElement(Box, {
-    className: style.close
-  }, /*#__PURE__*/React.createElement(AlertClose, {
-    onClose: onClose,
-    dataTitle: closeTitle,
-    dataId: dataId,
-    type: "light"
-  })) : null);
+  }, /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+    query: responsiveFunc,
+    responsiveId: responsiveId
+  }, _ref2 => {
+    let {
+      uptoTablet
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, needIcon ? /*#__PURE__*/React.createElement("div", {
+      className: style.iconContainer
+    }, renderAlertIcon ? renderAlertIcon() : /*#__PURE__*/React.createElement(AlertIcons, {
+      type: type
+    })) : null, /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "center"
+    }, variant === 'primary' ? /*#__PURE__*/React.createElement(Box, {
+      shrink: true
+    }, /*#__PURE__*/React.createElement(Typography, {
+      $i18n_dataTitle: title,
+      $ui_className: style.title,
+      $ui_tagName: "h1",
+      $ui_size: uptoTablet ? '16' : '18',
+      $ui_lineHeight: "20",
+      $ui_weight: "bold",
+      $flag_reset: true,
+      $ui_wordBreak: "breakWord"
+    }, title)) : /*#__PURE__*/React.createElement(Box, {
+      className: `${style.infoText}`
+    }, /*#__PURE__*/React.createElement(Typography, {
+      $i18n_dataTitle: title,
+      $ui_className: style.title,
+      $ui_size: "14",
+      $ui_wordBreak: "breakWord"
+    }, title)))), needClose ? /*#__PURE__*/React.createElement(Box, {
+      className: style.close
+    }, /*#__PURE__*/React.createElement(AlertClose, {
+      onClose: onClose,
+      dataTitle: closeTitle,
+      dataId: dataId,
+      type: "light"
+    })) : null);
+  }));
 }
 DesktopNotificationHeader.propTypes = propTypes;
 DesktopNotificationHeader.defaultProps = defaultProps; // if (__DOCS__) {

package/es/v1/notification/DesktopNotificationHeader/props/defaultProps.js

@@ -0,0 +1,7 @@
+import { getDotLibraryConfig } from '../../../../Provider/Config';
+export default {
+  needIcon: true,
+  variant: 'primary',
+  needClose: true,
+  responsiveId: getDotLibraryConfig('desktopNotificationResponsiveId')
+};

package/es/v1/notification/DesktopNotificationHeader/props/propTypes.js

@@ -0,0 +1,13 @@
+import PropTypes from 'prop-types';
+export default {
+  closeTitle: PropTypes.string,
+  dataId: PropTypes.string,
+  needClose: PropTypes.bool,
+  needIcon: PropTypes.bool,
+  onClose: PropTypes.func,
+  title: PropTypes.string,
+  renderAlertIcon: PropTypes.func,
+  type: PropTypes.oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification', 'alarm']),
+  variant: PropTypes.oneOf(['primary', 'secondary']),
+  responsiveId: PropTypes.string
+};

package/es/v1/setup/header/Button/Button.js

@@ -3,34 +3,22 @@ import { defaultProps } from '../../../../setup/header/Button/props/defaultProps
 import { propTypes } from '../../../../setup/header/Button/props/propTypes';
 import GenButton from '@zohodesk/components/es/v1/Button/Button';
 import style from '../../../../setup/header/Button/HeaderButton.module.css';
-export default class Button extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let {
-      palette,
-      text,
-      onClick,
-      id
-    } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
-      className: style.container
-    }, /*#__PURE__*/React.createElement(GenButton, {
-      id: id,
-      onClick: onClick,
-      palette: palette,
-      size: "medium",
-      text: text
-    }));
-  }
-
+export default function Button(props) {
+  let {
+    palette,
+    text,
+    onClick,
+    id
+  } = props;
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.container
+  }, /*#__PURE__*/React.createElement(GenButton, {
+    id: id,
+    onClick: onClick,
+    palette: palette,
+    size: "medium",
+    text: text
+  }));
 }
 Button.defaultProps = defaultProps;
-Button.propTypes = propTypes; // if (__DOCS__) {
-//   Button.docs = {
-//     componentGroup: 'Header',
-//     folderName: 'Setup'
-//   };
-// }
+Button.propTypes = propTypes;