@zohodesk/dot 1.0.0-temp-164 → 1.0.0-temp-166

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

@@ -0,0 +1,12 @@
+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'])
+};

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;

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

@@ -5,40 +5,28 @@ import { Icon } from '@zohodesk/icons';
 import { Box } from '@zohodesk/components/es/v1/Layout';
 import ExternalLink from '../../../ExternalLink/ExternalLink';
 import style from '../../../../setup/header/Link/HeaderLink.module.css';
-export default class Link extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let {
-      url,
-      text,
-      iconName,
-      iconClass,
-      iconSize
-    } = this.props;
-    return /*#__PURE__*/React.createElement(ExternalLink, {
-      className: style.container,
-      href: url
-    }, /*#__PURE__*/React.createElement(Box, {
-      className: style.icon
-    }, /*#__PURE__*/React.createElement(Icon, {
-      isBold: true,
-      name: iconName,
-      size: iconSize,
-      iconClass: iconClass ? iconClass : ''
-    })), /*#__PURE__*/React.createElement(Box, {
-      className: style.text,
-      flexible: true
-    }, text));
-  }
-
+export default function Link(props) {
+  let {
+    url,
+    text,
+    iconName,
+    iconClass,
+    iconSize
+  } = props;
+  return /*#__PURE__*/React.createElement(ExternalLink, {
+    className: style.container,
+    href: url
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: style.icon
+  }, /*#__PURE__*/React.createElement(Icon, {
+    isBold: true,
+    name: iconName,
+    size: iconSize,
+    iconClass: iconClass ? iconClass : ''
+  })), /*#__PURE__*/React.createElement(Box, {
+    className: style.text,
+    flexible: true
+  }, text));
 }
 Link.defaultProps = defaultProps;
-Link.propTypes = propTypes; // if (__DOCS__) {
-//   Link.docs = {
-//     componentGroup: 'Header',
-//     folderName: 'Setup'
-//   };
-// }
+Link.propTypes = propTypes;

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

@@ -1,81 +1,55 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { defaultProps } from '../../../../setup/header/Search/props/defaultProps';
 import { propTypes } from '../../../../setup/header/Search/props/propTypes';
 import { Icon } from '@zohodesk/icons';
 import TextBox from '@zohodesk/components/es/v1/TextBox/TextBox';
 import style from '../../../../setup/header/Search/Search.module.css';
-export default class Search extends React.Component {
-  constructor(props) {
-    super(props);
-    let {
-      value
-    } = this.props;
-    this.state = {
-      value: value || '',
-      isFocus: false
-    };
-    this.onFocus = this.onFocus.bind(this);
-    this.onBlur = this.onBlur.bind(this);
-  }
+export default function Search(props) {
+  let {
+    placeHolder,
+    maxLength,
+    value,
+    onChange,
+    onKeyPress,
+    onFocus,
+    onBlur,
+    customClass
+  } = props;
+  let [isFocus, setIsFocus] = useState(false);
+  let [resetValue] = useState(value || '');
 
-  onFocus(id, name, value) {
-    let {
-      onFocus
-    } = this.props;
-    this.setState({
-      isFocus: true
-    });
+  const handleFocus = (id, name, value) => {
+    setIsFocus(true);
     onFocus && onFocus(id, name, value);
-  }
+  };
 
-  onBlur(id, name, value) {
-    let {
-      onBlur
-    } = this.props;
-    this.state.value == '' && this.setState({
-      isFocus: false
-    });
-    onBlur && onBlur(id, name, value);
-  }
+  const handleBlur = (id, name, value) => {
+    if (resetValue == '') {
+      setIsFocus(false);
+    }
 
-  render() {
-    let {
-      placeHolder,
-      maxLength,
-      value,
-      onChange,
-      onKeyPress,
-      customClass
-    } = this.props;
-    let {
-      isFocus
-    } = this.state;
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isFocus ? style.active : ''} ${customClass}`
-    }, /*#__PURE__*/React.createElement(TextBox, {
-      placeHolder: placeHolder,
-      customClass: style.input,
-      maxLength: maxLength,
-      value: value,
-      onChange: onChange,
-      onKeyUp: onKeyPress,
-      onFocus: this.onFocus,
-      needAppearance: false,
-      onBlur: this.onBlur
-    }), value != '' && value ? /*#__PURE__*/React.createElement("span", {
-      className: style.icon,
-      onClick: this.onBlur
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-close",
-      size: "19"
-    })) : null);
-  }
+    onBlur && onBlur(id, name, value);
+  };
 
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${style.container} ${isFocus ? style.active : ''} ${customClass}`
+  }, /*#__PURE__*/React.createElement(TextBox, {
+    placeHolder: placeHolder,
+    customClass: style.input,
+    maxLength: maxLength,
+    value: value,
+    onChange: onChange,
+    onKeyUp: onKeyPress,
+    onFocus: handleFocus,
+    needAppearance: false,
+    onBlur: handleBlur
+  }), value != '' && value ? /*#__PURE__*/React.createElement("span", {
+    className: style.icon,
+    onClick: handleBlur
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-close",
+    size: "19"
+  })) : null);
 }
 Search.propTypes = propTypes;
-Search.defaultProps = defaultProps; // if (__DOCS__) {
-//   Search.docs = {
-//     componentGroup: 'Header',
-//     folderName: 'Setup'
-//   };
-// }
+Search.defaultProps = defaultProps;

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

@@ -3,44 +3,32 @@ import { defaultProps } from '../../../../setup/header/Views/props/defaultProps'
 import { propTypes } from '../../../../setup/header/Views/props/propTypes';
 import style from '../../../../setup/header/Views/Views.module.css';
 import { Icon } from '@zohodesk/icons';
-export default class Views extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let {
-      isGrid,
-      isList,
-      gridTitle,
-      listTitle,
-      onListClick,
-      onGridClick
-    } = this.props;
-    return /*#__PURE__*/React.createElement("span", {
-      className: style.container
-    }, /*#__PURE__*/React.createElement("span", {
-      className: `${style.icon} ${style.first} ${isList ? style.active : ''}`,
-      "data-title": !isList ? listTitle : null,
-      onClick: onListClick
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-list22",
-      size: "10"
-    })), /*#__PURE__*/React.createElement("span", {
-      className: `${style.icon} ${style.last}  ${isGrid ? style.active : ''}`,
-      "data-title": !isGrid ? gridTitle : null,
-      onClick: onGridClick
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-grid",
-      size: "11"
-    })));
-  }
-
+export default function Views(props) {
+  let {
+    isGrid,
+    isList,
+    gridTitle,
+    listTitle,
+    onListClick,
+    onGridClick
+  } = props;
+  return /*#__PURE__*/React.createElement("span", {
+    className: style.container
+  }, /*#__PURE__*/React.createElement("span", {
+    className: `${style.icon} ${style.first} ${isList ? style.active : ''}`,
+    "data-title": !isList ? listTitle : null,
+    onClick: onListClick
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-list22",
+    size: "10"
+  })), /*#__PURE__*/React.createElement("span", {
+    className: `${style.icon} ${style.last}  ${isGrid ? style.active : ''}`,
+    "data-title": !isGrid ? gridTitle : null,
+    onClick: onGridClick
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-grid",
+    size: "11"
+  })));
 }
 Views.propTypes = propTypes;
-Views.defaultProps = defaultProps; // if (__DOCS__) {
-//   Views.docs = {
-//     componentGroup: 'Header',
-//     folderName: 'Setup'
-//   };
-// }
+Views.defaultProps = defaultProps;

package/es/v1/setup/helptips/Description/Description.js

@@ -1,24 +1,12 @@
 import React from 'react';
 import { propTypes } from '../../../../setup/helptips/Description/props/propTypes';
 import style from '../../../../setup/helptips/Description/HelpTipsDescription.module.css';
-export default class Description extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let {
-      text
-    } = this.props;
-    return /*#__PURE__*/React.createElement("p", {
-      className: style.text
-    }, text);
-  }
-
+export default function Description(props) {
+  let {
+    text
+  } = props;
+  return /*#__PURE__*/React.createElement("p", {
+    className: style.text
+  }, text);
 }
-Description.propTypes = propTypes; // if (__DOCS__) {
-//   Description.docs = {
-//     componentGroup: 'HelpTips',
-//     folderName: 'Setup'
-//   };
-// }
+Description.propTypes = propTypes;

package/es/v1/setup/helptips/Link/Link.js

@@ -2,40 +2,28 @@ import React from 'react';
 import { propTypes } from '../../../../setup/helptips/Link/props/propTypes';
 import style from '../../../../setup/helptips/Link/HelpTipsLink.module.css';
 import ExternalLink from '../../../ExternalLink/ExternalLink';
-export default class Link extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let {
-      text,
-      url,
-      onClick,
-      isDangerous = false
-    } = this.props;
-
-    if (isDangerous) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: style.container,
-        onClick: onClick,
-        dangerouslySetInnerHTML: {
-          __html: text
-        }
-      });
-    }
+export default function Link(props) {
+  let {
+    text,
+    url,
+    onClick,
+    isDangerous = false
+  } = props;
 
-    return /*#__PURE__*/React.createElement(ExternalLink, {
-      href: url,
+  if (isDangerous) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.container,
       onClick: onClick,
-      className: style.text
-    }, text);
+      dangerouslySetInnerHTML: {
+        __html: text
+      }
+    });
   }
 
+  return /*#__PURE__*/React.createElement(ExternalLink, {
+    href: url,
+    onClick: onClick,
+    className: style.text
+  }, text);
 }
-Link.propTypes = propTypes; // if (__DOCS__) {
-//   Link.docs = {
-//     componentGroup: 'HelpTips',
-//     folderName: 'Setup'
-//   };
-// }
+Link.propTypes = propTypes;

package/es/v1/setup/helptips/ListGroup/ListGroup.js

@@ -1,39 +1,27 @@
 import React from 'react';
 import { propTypes } from '../../../../setup/helptips/ListGroup/props/propTypes';
 import style from '../../../../setup/helptips/ListGroup/ListGroup.module.css';
-export default class ListGroup extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let {
-      isOrder,
-      data
-    } = this.props;
-
-    if (isOrder) {
-      return /*#__PURE__*/React.createElement("ol", {
-        className: style.container,
-        type: "1"
-      }, data.map((text, index) => /*#__PURE__*/React.createElement("li", {
-        className: style.orderData,
-        key: index
-      }, text)));
-    }
+export default function ListGroup(props) {
+  let {
+    isOrder,
+    data
+  } = props;
 
-    return /*#__PURE__*/React.createElement("ul", {
-      className: style.container
+  if (isOrder) {
+    return /*#__PURE__*/React.createElement("ol", {
+      className: style.container,
+      type: "1"
     }, data.map((text, index) => /*#__PURE__*/React.createElement("li", {
-      className: style.unOrderData,
+      className: style.orderData,
       key: index
-    }, data)));
+    }, text)));
   }
 
+  return /*#__PURE__*/React.createElement("ul", {
+    className: style.container
+  }, data.map((text, index) => /*#__PURE__*/React.createElement("li", {
+    className: style.unOrderData,
+    key: index
+  }, text)));
 }
-ListGroup.propTypes = propTypes; // if (__DOCS__) {
-//   ListGroup.docs = {
-//     componentGroup: 'HelpTips',
-//     folderName: 'Setup'
-//   };
-// }
+ListGroup.propTypes = propTypes;

package/es/v1/setup/helptips/Title/Title.js

@@ -1,24 +1,12 @@
 import React from 'react';
 import { propTypes } from '../../../../setup/helptips/Title/props/propTypes';
 import style from '../../../../setup/helptips/Title/HelpTipsTitle.module.css';
-export default class Title extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let {
-      text
-    } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
-      className: style.title
-    }, text);
-  }
-
+export default function Title(props) {
+  let {
+    text
+  } = props;
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.title
+  }, text);
 }
-Title.propTypes = propTypes; // if (__DOCS__) {
-//   Title.docs = {
-//     componentGroup: 'HelpTips',
-//     folderName: 'Setup'
-//   };
-// }
+Title.propTypes = propTypes;

package/es/v1/svg/PlusIcon.js

@@ -18,7 +18,7 @@ export default function PlusIcon(props) {
     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\r 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\r 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\r c0-0.4,0.1-0.7,0.4-0.9C15.3,2.8,15.6,2.7,16,2.7z"
+    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;

package/es/v1/svg/SnippetIcon.js

@@ -15,12 +15,12 @@ export default function SnippetIcon(props) {
     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\r 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\r 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\r 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\r 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"
+    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\r 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\r 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\r C11.3,24.6,11.7,25.1,16.2,25.7z"
+    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;

package/es/version2/AlertClose/AlertClose.module.css

@@ -1,43 +1,43 @@
-.close {
-  width: var(--zd_size25) ;
-  height: var(--zd_size25) ;
-  color: var(--zdt_commonalert_close_icon);
-  border-radius: var(--zd_size4);
-  cursor: pointer;
-}
-
-.closeIcon {
-  display: block;
-}
-
-.light {
-  color: var(--zdt_commonalert_close_light_icon);
-}
-
-.close:hover {
-  background-color: var(--zdt_commonalert_close_hover_bg);
-}
-
-.light:hover {
-  background-color: var(--zdt_commonalert_light_hover_bg);
-}
-
-.success:hover {
-  background-color: var(--zdt_commonalert_success_hover_bg);
-}
-
-.info:hover {
-  background-color:var(--zdt_commonalert_info_hover_bg);
-}
-
-.warning:hover {
-  background-color: var(--zdt_commonalert_warning_hover_bg);
-}
-
-.danger:hover {
-  background-color: var(--zdt_commonalert_danger_hover_bg);
-}
-
-.error:hover {
-  background-color: var(--zdt_commonalert_error_hover_bg);
+.close {
+  width: var(--zd_size25) ;
+  height: var(--zd_size25) ;
+  color: var(--zdt_commonalert_close_icon);
+  border-radius: var(--zd_size4);
+  cursor: pointer;
+}
+
+.closeIcon {
+  display: block;
+}
+
+.light {
+  color: var(--zdt_commonalert_close_light_icon);
+}
+
+.close:hover {
+  background-color: var(--zdt_commonalert_close_hover_bg);
+}
+
+.light:hover {
+  background-color: var(--zdt_commonalert_light_hover_bg);
+}
+
+.success:hover {
+  background-color: var(--zdt_commonalert_success_hover_bg);
+}
+
+.info:hover {
+  background-color:var(--zdt_commonalert_info_hover_bg);
+}
+
+.warning:hover {
+  background-color: var(--zdt_commonalert_warning_hover_bg);
+}
+
+.danger:hover {
+  background-color: var(--zdt_commonalert_danger_hover_bg);
+}
+
+.error:hover {
+  background-color: var(--zdt_commonalert_error_hover_bg);
 }