@zohodesk/dot 1.0.0-beta.20 → 1.0.0-beta.203

package/es/list/AvatarFlip/docs/AvatarFlip__default.docs.js

@@ -1,304 +1,96 @@
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
-import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
-import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
-import _inherits from 'babel-runtime/helpers/inherits';
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import AvatarFlip from '../AvatarFlip';
-
-var AvatarFlip__default = function (_Component) {
-  _inherits(AvatarFlip__default, _Component);
-
-  function AvatarFlip__default(props) {
-    _classCallCheck(this, AvatarFlip__default);
-
-    return _possibleConstructorReturn(this, (AvatarFlip__default.__proto__ || _Object$getPrototypeOf(AvatarFlip__default)).call(this, props));
+export default class AvatarFlip__default extends Component {
+  constructor(props) {
+    super(props);
   }
 
-  _createClass(AvatarFlip__default, [{
-    key: 'render',
-    value: function render() {
-      var channelList = ['EMAIL', 'FACEBOOK', 'FACEBOOK_DM', 'TWITTER', 'FORUMS', 'CHAT', 'OFFLINE_CHAT', 'ONLINE_CHAT', 'PHONE', 'WEB', 'CUSTOMERPORTAL', 'FEEDBACK'];
-      var header = {
-        display: 'flex',
-        borderBottom: '1px solid #e9ebec',
-        alignItems: 'center'
-      };
-      var column = {
-        flex: '1 300px',
-        paddingTop: '15px',
-        paddingBottom: '15px',
-        paddingLeft: '10px'
-      };
-      return React.createElement(
-        'div',
-        { style: { padding: '20px' } },
-        React.createElement(
-          'h2',
-          { style: { marginBottom: '10px' } },
-          'Task Module Icon'
-        ),
-        React.createElement(
-          'div',
-          { style: { display: 'flex' } },
-          React.createElement(
-            'div',
-            { style: { marginRight: '15px' } },
-            React.createElement(AvatarFlip, {
-              id: 'taskIcon',
-              noNeedFlip: false,
-              size: 'xmedium',
-              name: 'email',
-              icon: 'taskNone'
-            })
-          ),
-          React.createElement(
-            'div',
-            { style: { marginRight: '15px' } },
-            React.createElement(AvatarFlip, {
-              id: 'taskMeeting',
-              noNeedFlip: false,
-              size: 'xmedium',
-              name: 'email',
-              icon: 'taskMeeting'
-            })
-          ),
-          React.createElement(
-            'div',
-            { style: { marginRight: '15px' } },
-            React.createElement(AvatarFlip, {
-              id: 'taskCall',
-              noNeedFlip: false,
-              size: 'xmedium',
-              name: 'email',
-              icon: 'taskCall'
-            })
-          ),
-          React.createElement(
-            'div',
-            { style: { marginRight: '15px' } },
-            React.createElement(AvatarFlip, {
-              id: 'taskDemo',
-              noNeedFlip: false,
-              size: 'xmedium',
-              name: 'email',
-              icon: 'taskDemo'
-            })
-          )
-        ),
-        React.createElement(
-          'h2',
-          { style: { marginBottom: '10px', marginTop: '10px' } },
-          'Customers Module Icon'
-        ),
-        React.createElement(
-          'div',
-          { style: { display: 'flex' } },
-          React.createElement(
-            'div',
-            { style: { marginRight: '15px' } },
-            React.createElement(AvatarFlip, {
-              id: 'portalUser',
-              noNeedFlip: false,
-              size: 'xmedium',
-              name: 'Antro J',
-              isPortalUser: true
-            })
-          ),
-          React.createElement(
-            'div',
-            { style: { marginRight: '15px' } },
-            React.createElement(AvatarFlip, {
-              id: 'paidUser',
-              noNeedFlip: false,
-              size: 'xmedium',
-              name: 'Antro J',
-              isPaidUser: true
-            })
-          )
-        ),
-        React.createElement(
-          'h2',
-          { style: { marginBottom: '10px', marginTop: '10px' } },
-          'Ticket Channel Icons'
-        ),
-        React.createElement(
-          'div',
-          { style: { border: '1px solid #e9ebec' } },
-          React.createElement(
-            'div',
-            { style: header },
-            React.createElement(
-              'div',
-              { style: column },
-              React.createElement(
-                'b',
-                null,
-                'Channel'
-              )
-            ),
-            React.createElement(
-              'div',
-              { style: column },
-              React.createElement(
-                'b',
-                null,
-                'default'
-              )
-            ),
-            React.createElement(
-              'div',
-              { style: column },
-              React.createElement(
-                'b',
-                null,
-                'incoming'
-              )
-            ),
-            React.createElement(
-              'div',
-              { style: column },
-              React.createElement(
-                'b',
-                null,
-                'outgoing'
-              )
-            ),
-            React.createElement(
-              'div',
-              { style: column },
-              React.createElement(
-                'b',
-                null,
-                'draft'
-              )
-            ),
-            React.createElement(
-              'div',
-              { style: column },
-              React.createElement(
-                'b',
-                null,
-                'forward'
-              )
-            ),
-            React.createElement(
-              'div',
-              { style: column },
-              React.createElement(
-                'b',
-                null,
-                'forwardDraft'
-              )
-            ),
-            React.createElement(
-              'div',
-              { style: column },
-              React.createElement(
-                'b',
-                null,
-                'missed'
-              )
-            )
-          ),
-          channelList.map(function (data, index) {
-            return React.createElement(
-              'div',
-              { style: header, key: index },
-              React.createElement(
-                'div',
-                { style: column },
-                data.toLowerCase()
-              ),
-              React.createElement(
-                'div',
-                { style: column },
-                React.createElement(AvatarFlip, {
-                  channel: data.toLowerCase(),
-                  action: 'default',
-                  id: 'test' + index,
-                  size: 'xmedium',
-                  name: 'email'
-                })
-              ),
-              React.createElement(
-                'div',
-                { style: column },
-                React.createElement(AvatarFlip, {
-                  channel: data.toLowerCase(),
-                  action: 'incoming',
-                  id: 'test1' + index,
-                  size: 'xmedium',
-                  name: 'email'
-                })
-              ),
-              React.createElement(
-                'div',
-                { style: column },
-                React.createElement(AvatarFlip, {
-                  channel: data.toLowerCase(),
-                  action: 'outgoing',
-                  id: 'test2' + index,
-                  size: 'xmedium',
-                  name: 'email'
-                })
-              ),
-              React.createElement(
-                'div',
-                { style: column },
-                React.createElement(AvatarFlip, {
-                  channel: data.toLowerCase(),
-                  action: 'draft',
-                  id: 'test3' + index,
-                  size: 'xmedium',
-                  name: 'email'
-                })
-              ),
-              React.createElement(
-                'div',
-                { style: column },
-                React.createElement(AvatarFlip, {
-                  channel: data.toLowerCase(),
-                  action: 'forward',
-                  id: 'test4' + index,
-                  size: 'xmedium',
-                  name: 'email'
-                })
-              ),
-              React.createElement(
-                'div',
-                { style: column },
-                React.createElement(AvatarFlip, {
-                  channel: data.toLowerCase(),
-                  action: 'forwardDraft',
-                  id: 'test5' + index,
-                  size: 'xmedium',
-                  name: 'email'
-                })
-              ),
-              React.createElement(
-                'div',
-                { style: column },
-                React.createElement(AvatarFlip, {
-                  channel: data.toLowerCase(),
-                  action: 'missed',
-                  id: 'test6' + index,
-                  size: 'xmedium',
-                  name: 'email'
-                })
-              )
-            );
-          })
-        )
-      );
-    }
-  }]);
-
-  return AvatarFlip__default;
-}(Component);
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '20px'
+      }
+    }, /*#__PURE__*/React.createElement("h2", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, "Task Module Icon"), /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '15px'
+      }
+    }, /*#__PURE__*/React.createElement(AvatarFlip, {
+      id: "taskIcon",
+      noNeedFlip: false,
+      size: "xmedium",
+      name: "email",
+      icon: "ZD-taskNone"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '15px'
+      }
+    }, /*#__PURE__*/React.createElement(AvatarFlip, {
+      id: "taskMeeting",
+      noNeedFlip: false,
+      size: "xmedium",
+      name: "email",
+      icon: "ZD-taskMeeting"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '15px'
+      }
+    }, /*#__PURE__*/React.createElement(AvatarFlip, {
+      id: "taskCall",
+      noNeedFlip: false,
+      size: "xmedium",
+      name: "email",
+      icon: "ZD-taskCall"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '15px'
+      }
+    }, /*#__PURE__*/React.createElement(AvatarFlip, {
+      id: "taskDemo",
+      noNeedFlip: false,
+      size: "xmedium",
+      name: "email",
+      icon: "ZD-taskDemo"
+    }))), /*#__PURE__*/React.createElement("h2", {
+      style: {
+        marginBottom: '10px',
+        marginTop: '10px'
+      }
+    }, "Customers Module Icon"), /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '15px'
+      }
+    }, /*#__PURE__*/React.createElement(AvatarFlip, {
+      id: "portalUser",
+      noNeedFlip: false,
+      size: "xmedium",
+      name: "Antro J",
+      isPortalUser: true
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '15px'
+      }
+    }, /*#__PURE__*/React.createElement(AvatarFlip, {
+      id: "paidUser",
+      noNeedFlip: false,
+      size: "xmedium",
+      name: "Antro J",
+      isPaidUser: true
+    }))));
+  }
 
-export default AvatarFlip__default;
+}
 
 if (false) {
   AvatarFlip__default.docs = {

package/es/list/BluePrintStatus/BluePrintStatus.js

@@ -1,50 +1,32 @@
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
-import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
-import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
-import _inherits from 'babel-runtime/helpers/inherits';
 import React from 'react';
 import PropTypes from 'prop-types';
 import style from './BluePrintStatus.module.css';
 import Icon from '@zohodesk/icons/lib/Icon';
-
-var BluePrintStatus = function (_React$Component) {
-  _inherits(BluePrintStatus, _React$Component);
-
-  function BluePrintStatus(props) {
-    _classCallCheck(this, BluePrintStatus);
-
-    return _possibleConstructorReturn(this, (BluePrintStatus.__proto__ || _Object$getPrototypeOf(BluePrintStatus)).call(this, props));
+export default class BluePrintStatus extends React.Component {
+  constructor(props) {
+    super(props);
   }
 
-  _createClass(BluePrintStatus, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          isOverdue = _props.isOverdue,
-          title = _props.title;
-
-      return React.createElement(
-        'span',
-        {
-          className: style.container + ' ' + (isOverdue ? style.danger : style.default)
-        },
-        React.createElement(Icon, { name: 'ZD-blueprint', title: title, iconClass: style.iconStyle })
-      );
-    }
-  }]);
-
-  return BluePrintStatus;
-}(React.Component);
-
-export default BluePrintStatus;
+  render() {
+    let {
+      title
+    } = this.props;
+    return /*#__PURE__*/React.createElement("span", {
+      className: `${style.container}`
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-blueprint",
+      title: title,
+      iconClass: style.iconStyle
+    }));
+  }
 
+}
 BluePrintStatus.propTypes = {
-  isOverdue: PropTypes.bool,
   title: PropTypes.string
 };
+
 if (false) {
   BluePrintStatus.docs = {
-    componentGroup: ''
+    componentGroup: 'Atom'
   };
 }

package/es/list/BluePrintStatus/BluePrintStatus.module.css

@@ -1,13 +1,17 @@
 .container {
+  display: inherit;
+}[dir=ltr] .container {
   padding-right: var(--zd_size5);
+}[dir=rtl] .container {
+  padding-left: var(--zd_size5);
 }
-.danger {
+/* .danger {
   color: var(--dot_text_brightRed);
 }
 .default {
   color: var(--dot_text_shuttleGrey);
-}
+} */
 .iconStyle {
   display: block;
-  font-size: var(--zd_size10);
+  font-size: var(--zd_font_size10);
 }

package/es/list/BluePrintStatus/docs/BluePrintStatus__default.docs.js

@@ -1,33 +1,16 @@
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
-import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
-import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
-import _inherits from 'babel-runtime/helpers/inherits';
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import BluePrintStatus from '../BluePrintStatus';
-
-var BluePrintStatus__default = function (_React$Component) {
-  _inherits(BluePrintStatus__default, _React$Component);
-
-  function BluePrintStatus__default(props) {
-    _classCallCheck(this, BluePrintStatus__default);
-
-    return _possibleConstructorReturn(this, (BluePrintStatus__default.__proto__ || _Object$getPrototypeOf(BluePrintStatus__default)).call(this, props));
+export default class BluePrintStatus__default extends React.Component {
+  constructor(props) {
+    super(props);
   }
 
-  _createClass(BluePrintStatus__default, [{
-    key: 'render',
-    value: function render() {
-      return React.createElement(BluePrintStatus, null);
-    }
-  }]);
-
-  return BluePrintStatus__default;
-}(React.Component);
+  render() {
+    return /*#__PURE__*/React.createElement(BluePrintStatus, null);
+  }
 
-export default BluePrintStatus__default;
+}
 
 if (false) {
   BluePrintStatus__default.docs = {

package/es/list/Comment/Comment.js

@@ -1,78 +1,49 @@
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
-import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
-import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
-import _inherits from 'babel-runtime/helpers/inherits';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Icon from '@zohodesk/icons/lib/Icon';
-import { RestrictionValidator } from '@zohodesk/permissions';
-
 import { i18NProviderUtils } from '@zohodesk/i18n';
-
+import Button from '@zohodesk/components/lib/semantic/Button/Button';
 import style from './Comment.module.css';
-
-var Comment = function (_Component) {
-  _inherits(Comment, _Component);
-
-  function Comment(props) {
-    _classCallCheck(this, Comment);
-
-    return _possibleConstructorReturn(this, (Comment.__proto__ || _Object$getPrototypeOf(Comment)).call(this, props));
+export default class Comment extends Component {
+  constructor(props) {
+    super(props);
   }
 
-  _createClass(Comment, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          count = _props.count,
-          onClick = _props.onClick,
-          _props$features = _props.features,
-          features = _props$features === undefined ? [] : _props$features,
-          _props$module = _props.module,
-          module = _props$module === undefined ? 'tickets' : _props$module;
-
-      var i18N = i18NProviderUtils.getI18NValue;
-      var commentCount = parseInt(count);
-      var commentTitle = !commentCount ? i18N('tabs.request.comment') : commentCount > 1 ? i18N('support.comment.many.count', count) : i18N('support.comment.count.one');
-      return React.createElement(
-        RestrictionValidator,
-        {
-          features: features,
-          module: module,
-          action: 'show_comment'
-        },
-        React.createElement(
-          'div',
-          {
-            className: style.container,
-            onClick: onClick,
-            'data-id': 'commentLstContainer',
-            'data-title': commentTitle
-          },
-          React.createElement(Icon, { name: 'ZD-comments1', iconClass: style.commentIcon }),
-          count && React.createElement(
-            'span',
-            { className: style.count },
-            count
-          )
-        )
-      );
-    }
-  }]);
-
-  return Comment;
-}(Component);
-
-export default Comment;
+  render() {
+    let {
+      count,
+      onClick,
+      className
+    } = 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
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-TK-commentLine",
+      iconClass: style.commentIcon
+    }), count && /*#__PURE__*/React.createElement("span", {
+      className: style.count
+    }, count));
+  }
 
+}
+Comment.defaultProps = {
+  className: ''
+};
 Comment.propTypes = {
+  className: PropTypes.string,
   count: PropTypes.string,
   features: PropTypes.array,
   iconTitle: PropTypes.string,
   module: PropTypes.string,
   onClick: PropTypes.func
 };
+
 if (false) {
   Comment.docs = {
     folderName: 'List',

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

@@ -1,17 +1,29 @@
+.varClass {
+  --icon_color: var(--zdt_comment_iconText);
+}
 .container {
-  composes: inlineBlockMiddle from "../listCommon.module.css";
+  composes: varClass;
+  composes: inlineBlockMiddle from '../listCommon.module.css';
   position: relative;
-  color: var(--dot_text_shuttleGrey);
+  color: var(--icon_color);
   padding: 0 var(--zd_size2);
   cursor: pointer;
 }
+.container:hover {
+  --icon_color: var(--zdt_comment_hover_iconText);
+}
 .count {
   position: absolute;
-  top: 0;
-  font-size: var(--zd_size9);
+  top: var(--zd_size1);
+  font-size: var(--zd_font_size9);
   text-align: center;
+}
+[dir=ltr] .count {
   left: 100%;
 }
+[dir=rtl] .count {
+  right: 100%;
+}
 .commentIcon {
-  font-size: var(--zd_size10);
+  font-size: var(--zd_font_size13);
 }