@zohodesk/dot 1.0.0-beta.27 → 1.0.0-beta.271

package/es/ChannelIcon/ChannelIcon.js

@@ -1,129 +1,100 @@
-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 { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import { Icon } from '@zohodesk/icons';
 import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
 import AvatarIcon from '../avatar/AvatarIcon/AvatarIcon';
 import { getChannelMappingObj } from '../utils/ChannelIconMapping';
 import style from './ChannelIcon.module.css';
-
-var ChannelIcon = function (_Component) {
-  _inherits(ChannelIcon, _Component);
-
-  function ChannelIcon(props) {
-    _classCallCheck(this, ChannelIcon);
-
-    return _possibleConstructorReturn(this, (ChannelIcon.__proto__ || _Object$getPrototypeOf(ChannelIcon)).call(this, props));
+export default class ChannelIcon extends Component {
+  constructor(props) {
+    super(props);
   }
 
-  _createClass(ChannelIcon, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          name = _props.name,
-          action = _props.action,
-          iconSize = _props.iconSize,
-          iconTitle = _props.iconTitle,
-          size = _props.size,
-          topicIcon = _props.topicIcon,
-          topicIconTitle = _props.topicIconTitle,
-          topicIconSize = _props.topicIconSize,
-          topicIconColor = _props.topicIconColor,
-          iconClass = _props.iconClass,
-          dataId = _props.dataId,
-          className = _props.className,
-          palette = _props.palette,
-          iconColor = _props.iconColor,
-          needTopicBorder = _props.needTopicBorder,
-          topicClass = _props.topicClass,
-          renderIconOnly = _props.renderIconOnly,
-          iconName = _props.iconName;
+  render() {
+    let {
+      name,
+      action,
+      iconSize,
+      iconTitle,
+      size,
+      topicIcon,
+      topicIconTitle,
+      topicIconSize,
+      topicIconColor,
+      iconClass,
+      dataId,
+      className,
+      palette,
+      textPalette,
+      customTextClass,
+      iconColor,
+      needTopicBorder,
+      topicClass,
+      renderIconOnly,
+      iconName,
+      title,
+      dataSelectorId
+    } = this.props;
+    let defaultChannelObj = name && !iconName && getChannelMappingObj()[name.toUpperCase()];
+    let customizedChannelName = null;
 
-      var defaultChannelObj = name && !iconName && getChannelMappingObj()[name.toUpperCase()];
-      var customizedChannelName = null;
-      if (!defaultChannelObj) {
-        customizedChannelName = name;
-      } else {
-        iconName = defaultChannelObj[action];
-      }
-      return React.createElement(
-        'span',
-        { className: style.container },
-        customizedChannelName ? React.createElement(Avatar, {
-          name: customizedChannelName,
-          size: size,
-          palette: palette,
-          dataId: dataId
-        }) : !renderIconOnly ? iconName ? React.createElement(AvatarIcon, {
-          name: iconName,
-          iconSize: iconSize,
-          size: size,
-          iconClass: style.iconStyle + ' ' + (name && action ? style[name.toLowerCase() + '_' + action.toLowerCase()] : '') + ' ' + (iconClass ? iconClass : '') + ' ',
-          dataId: dataId,
-          className: className,
-          iconColor: iconColor,
-          iconTitle: iconTitle
-        }) : React.createElement(Avatar, { name: name, size: size, palette: palette }) : React.createElement(Icon, {
-          name: iconName,
-          size: iconSize,
-          iconClass: iconClass ? iconClass : '',
-          title: iconTitle,
-          dataId: dataId
-        }),
-        topicIcon ? React.createElement(
-          'span',
-          {
-            className: style.thread + ' ' + (needTopicBorder ? style.threadBorder : '') + ' ' + (topicClass ? topicClass : ''),
-            'data-title': topicIconTitle
-          },
-          React.createElement(Icon, {
-            name: topicIcon,
-            size: topicIconSize,
-            iconClass: style['topic_' + topicIconColor] ? style['topic_' + topicIconColor] : '',
-            dataId: dataId
-          })
-        ) : null
-      );
+    if (!defaultChannelObj) {
+      customizedChannelName = name;
+    } else {
+      iconName = defaultChannelObj[action];
     }
-  }]);
 
-  return ChannelIcon;
-}(Component);
-
-export default ChannelIcon;
+    return /*#__PURE__*/React.createElement("span", {
+      className: style.container,
+      "data-selector-id": dataSelectorId
+    }, customizedChannelName ? /*#__PURE__*/React.createElement(Avatar, {
+      name: customizedChannelName,
+      size: size,
+      palette: palette,
+      textPalette: textPalette,
+      customClass: customTextClass,
+      dataId: dataId,
+      needTitle: title,
+      title: title
+    }) : !renderIconOnly ? iconName ? /*#__PURE__*/React.createElement(AvatarIcon, {
+      name: iconName,
+      iconSize: iconSize,
+      size: size,
+      iconClass: `${style.iconStyle} ${name && action ? style[`${name.toLowerCase()}_${action.toLowerCase()}`] : ''} ${iconClass ? iconClass : ''} `,
+      dataId: dataId,
+      className: className,
+      iconColor: iconColor,
+      title: iconTitle
+    }) : /*#__PURE__*/React.createElement(Avatar, {
+      name: name,
+      size: size,
+      palette: palette,
+      textPalette: textPalette,
+      customClass: customTextClass,
+      needTitle: title,
+      title: title
+    }) : /*#__PURE__*/React.createElement(Icon, {
+      name: iconName,
+      size: iconSize,
+      iconClass: `${iconClass ? iconClass : ''} ${style.iconStyle} ${name && action ? style[`${name.toLowerCase()}_${action.toLowerCase()}`] : ''}`,
+      title: iconTitle,
+      dataId: dataId
+    }), topicIcon ? /*#__PURE__*/React.createElement("span", {
+      className: `${style.thread} ${needTopicBorder ? style.threadBorder : ''} ${topicClass ? topicClass : ''}`,
+      "data-title": topicIconTitle
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: topicIcon,
+      size: topicIconSize,
+      iconClass: style[`topic_${topicIconColor}`] ? `${style.topicIcon} ${style[`topic_${topicIconColor}`]}` : '',
+      dataId: dataId
+    })) : null);
+  }
 
-ChannelIcon.defaultProps = {
-  iconSize: '21',
-  name: 'phone',
-  needTopicBorder: true,
-  renderIconOnly: false
-};
-ChannelIcon.propTypes = {
-  action: PropTypes.string,
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  iconClass: PropTypes.string,
-  iconSize: PropTypes.string,
-  name: PropTypes.string,
-  palette: PropTypes.oneOf(['primary', 'secondary', 'info', 'default']),
-  size: PropTypes.string,
-  topicIcon: PropTypes.string,
-  topicIconColor: PropTypes.string,
-  topicIconSize: PropTypes.string,
-  topicIconTitle: PropTypes.string,
-  iconColor: PropTypes.string,
-  needTopicBorder: PropTypes.bool,
-  topicClass: PropTypes.string,
-  iconTitle: PropTypes.string,
-  renderIconOnly: PropTypes.bool,
-  iconName: PropTypes.string
-};
-if (false) {
-  ChannelIcon.docs = {
-    componentGroup: 'Atom'
-  };
-}
+}
+ChannelIcon.defaultProps = defaultProps;
+ChannelIcon.propTypes = propTypes; // if (__DOCS__) {
+//   ChannelIcon.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }

package/es/ChannelIcon/ChannelIcon.module.css

@@ -1,120 +1,124 @@
+.varClass {
+  --iconColor: var(--zdt_channelIcon_icon);
+  --topIconBg: var(--zdt_channelIcon_topIcon_bg);
+  --topIconColor: var(--zdt_channelIcon_topIcon_iconGreen);
+  --topIconBorderColor: var(--zdt_channelIcon_topIcon_border);
+}
 .container {
   position: relative;
   composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
   vertical-align: middle;
+  composes: varClass;
 }
 .thread {
-  composes: rounded from '~@zohodesk/components/lib/common/common.module.css';
-  composes: dflex from '~@zohodesk/components/lib/common/common.module.css';
-  composes: alignVertical from '~@zohodesk/components/lib/common/common.module.css';
-  composes: alignHorizontal from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dflex alignVertical alignHorizontal rounded from '~@zohodesk/components/lib/common/common.module.css';
   position: absolute;
-  top: calc(var(--zd_size4) * -1);
-  height: var(--zd_size15);
-  width: var(--zd_size15);
-  background-color: var(--dot_bg_white);
+  top: calc( var(--zd_size4) * -1 ) ;
+  height: var(--zd_size15) ;
+  width: var(--zd_size15) ;
+  background-color: var(--topIconBg);
 }
 [dir=ltr] .thread {
-  right: calc(var(--zd_size1) * -1);
+  right: calc( var(--zd_size1) * -1 ) ;
 }
 [dir=rtl] .thread {
-  left: calc(var(--zd_size1) * -1);
+  left: calc( var(--zd_size1) * -1 ) ;
 }
 .threadBorder {
-  border: 1px solid var(--zd_border_smoke18);
+  border: 1px solid var(--topIconBorderColor);
 }
 .iconStyle {
   position: relative;
-  color: var(--dot_text_black);
+  color: var(--iconColor);
 }
 
 /* Channel Icon Style */
 /* path */
 .email_incoming span:first-child:before,
 .email_outgoing span:first-child:before,
-.chat_outgoing span:first-child:before,
-.offline_chat_outgoing span:first-child:before,
-.online_chat_outgoing span:first-child:before,
-.email_forward span:first-child:before,
-.facebook_forward span:first-child:before,
-.twitter_forward span:first-child:before,
-.forums_forward span:first-child:before,
-.chat_forward span:first-child:before,
-.offline_chat_forward span:first-child:before,
-.online_chat_forward span:first-child:before,
-.phone_forward span:first-child:before,
-.web_forward span:first-child:before,
-.customerportal_forward span:first-child:before,
-.feedback_forward span:first-child:before,
-.email_forwardDraft span:first-child:before,
-.facebook_forwardDraft span:first-child:before,
-.twitter_forwardDraft span:first-child:before,
-.forums_forwardDraft span:first-child:before,
-.chat_forwardDraft span:first-child:before,
-.offline_chat_forwardDraft span:first-child:before,
-.online_chat_forwardDraft span:first-child:before,
-.phone_forwardDraft span:first-child:before,
-.web_forwardDraft span:first-child:before,
-.customerportal_forwardDraft span:first-child:before,
-.feedback_forwardDraft span:first-child:before,
 .email_missed span:first-child:before,
+.email_forward span:first-child:before,
+.email_forwarddraft span:first-child:before,
 .facebook_incoming span:first-child:before,
 .facebook_outgoing span:first-child:before,
 .facebook_missed span:first-child:before,
+.facebook_forward span:first-child:before,
+.facebook_forwarddraft span:first-child:before,
 .facebook_dm_default span:first-child:before,
 .facebook_dm_incoming span:first-child:before,
 .facebook_dm_outgoing span:first-child:before,
 .facebook_dm_draft span:first-child:before,
 .facebook_dm_forward span:first-child:before,
-.facebook_dm_forwardDraft span:first-child:before,
+.facebook_dm_forwarddraft span:first-child:before,
 .twitter_incoming span:first-child:before,
 .twitter_outgoing span:first-child:before,
 .twitter_missed span:first-child:before,
+.twitter_forward span:first-child:before,
+.twitter_forwarddraft span:first-child:before,
 .forums_incoming span:first-child:before,
 .forums_outgoing span:first-child:before,
 .forums_missed span:first-child:before,
+.forums_forward span:first-child:before,
+.forums_forwarddraft span:first-child:before,
 .chat_incoming span:first-child:before,
-.offline_chat_incoming span:first-child:before,
-.online_chat_incoming span:first-child:before,
+.chat_outgoing span:first-child:before,
 .chat_missed span:first-child:before,
+.chat_forward span:first-child:before,
+.chat_forwarddraft span:first-child:before,
+.offline_chat_incoming span:first-child:before,
+.offline_chat_outgoing span:first-child:before,
 .offline_chat_missed span:first-child:before,
+.offline_chat_forward span:first-child:before,
+.offline_chat_forwarddraft span:first-child:before,
+.online_chat_incoming span:first-child:before,
+.online_chat_outgoing span:first-child:before,
 .online_chat_missed span:first-child:before,
+.online_chat_forward span:first-child:before,
+.online_chat_forwarddraft span:first-child:before,
 .phone_incoming span:first-child:before,
 .phone_outgoing span:first-child:before,
 .phone_missed span:first-child:before,
-.feedback_default span:first-child:before,
-.feedback_incoming span:first-child:before,
+.phone_forward span:first-child:before,
+.phone_forwarddraft span:first-child:before,
 .web_incoming span:first-child:before,
-.customerportal_incoming span:first-child:before,
+.web_out span:first-child:before,
 .web_missed span:first-child:before,
+.web_forward span:first-child:before,
+.web_forwarddraft span:first-child:before,
+.customerportal_incoming span:first-child:before,
+.customerportal_out span:first-child:before,
 .customerportal_missed span:first-child:before,
-.feedback_missed span:first-child:before {
+.customerportal_forward span:first-child:before,
+.customerportal_forwarddraft span:first-child:before,
+.feedback_default span:first-child:before,
+.feedback_incoming span:first-child:before,
+.feedback_out span:first-child:before,
+.feedback_missed span:first-child:before,
+.feedback_forward span:first-child:before,
+.feedback_forwarddraft span:first-child:before {
   color: inherit;
 }
 
 /* Email */
-.email_default {
-  top: var(--zd_size1);
-}
 .email_incoming,
 .email_missed,
 .email_outgoing {
-  bottom: var(--zd_size2);
+  bottom: var(--zd_size2) ;
 }
 
 /* twitter */
 .twitter_incoming,
 .twitter_outgoing,
 .twitter_missed {
-  bottom: var(--zd_size1);
+  bottom: var(--zd_size1) ;
 }
 
 /* facebook */
 [dir=ltr] .facebook_incoming, [dir=ltr] .facebook_missed, [dir=ltr] .facebook_outgoing {
-  right: var(--zd_size2);
+  right: var(--zd_size2) ;
 }
 [dir=rtl] .facebook_incoming, [dir=rtl] .facebook_missed, [dir=rtl] .facebook_outgoing {
-  left: var(--zd_size2);
+  left: var(--zd_size2) ;
 }
 
 /* chat */
@@ -127,49 +131,52 @@
 .chat_outgoing,
 .offline_chat_outgoing,
 .online_chat_outgoing {
-  bottom: var(--zd_size1);
+  bottom: var(--zd_size1) ;
 }
 
 /* forums */
 .forums_default {
-  top: var(--zd_size1);
+  top: var(--zd_size1) ;
 }
 
 /* feedback */
 .feedback_incoming,
 .feedback_missed,
 .feedback_out {
-  top: var(--zd_size1);
+  top: var(--zd_size1) ;
 }
 [dir=ltr] .feedback_incoming, [dir=ltr] .feedback_missed, [dir=ltr] .feedback_out {
-  right: var(--zd_size1);
+  right: var(--zd_size1) ;
 }
 [dir=rtl] .feedback_incoming, [dir=rtl] .feedback_missed, [dir=rtl] .feedback_out {
-  left: var(--zd_size1);
+  left: var(--zd_size1) ;
 }
 
 /* draft */
-.email_draft,
-.facebook_draft,
-.twitter_draft,
-.forums_draft,
-.chat_draft,
-.offline_chat_draft,
-.online_chat_draft,
-.phone_draft,
-.web_draft,
-.customerportal_draft,
-.feedback_draft {
-  top: var(--zd_size1);
-}
 [dir=ltr] .email_draft, [dir=ltr] .facebook_draft, [dir=ltr] .twitter_draft, [dir=ltr] .forums_draft, [dir=ltr] .chat_draft, [dir=ltr] .offline_chat_draft, [dir=ltr] .online_chat_draft, [dir=ltr] .phone_draft, [dir=ltr] .web_draft, [dir=ltr] .customerportal_draft, [dir=ltr] .feedback_draft {
-  left: var(--zd_size1);
+  left: var(--zd_size1) ;
 }
 [dir=rtl] .email_draft, [dir=rtl] .facebook_draft, [dir=rtl] .twitter_draft, [dir=rtl] .forums_draft, [dir=rtl] .chat_draft, [dir=rtl] .offline_chat_draft, [dir=rtl] .online_chat_draft, [dir=rtl] .phone_draft, [dir=rtl] .web_draft, [dir=rtl] .customerportal_draft, [dir=rtl] .feedback_draft {
-  right: var(--zd_size1);
+  right: var(--zd_size1) ;
+}
+
+/* forward */
+.email_forward,
+.facebook_forward,
+.facebook_dm_forward,
+.twitter_forward,
+.forums_forward,
+.chat_forward,
+.offline_chat_forward,
+.online_chat_forward,
+.phone_forward,
+.web_forward,
+.customerportal_forward,
+.feedback_forward {
+  bottom: var(--zd_size1) ;
 }
 
-/* forwardDraft */
+/* forwarddraft */
 .email_forwarddraft,
 .facebook_forwarddraft,
 .twitter_forwarddraft,
@@ -181,28 +188,30 @@
 .web_forwarddraft,
 .customerportal_forwarddraft,
 .feedback_forwarddraft {
-  bottom: var(--zd_size1);
+  bottom: var(--zd_size1) ;
 }
 [dir=ltr] .email_forwarddraft, [dir=ltr] .facebook_forwarddraft, [dir=ltr] .twitter_forwarddraft, [dir=ltr] .forums_forwarddraft, [dir=ltr] .chat_forwarddraft, [dir=ltr] .offline_chat_forwarddraft, [dir=ltr] .online_chat_forwarddraft, [dir=ltr] .phone_forwarddraft, [dir=ltr] .web_forwarddraft, [dir=ltr] .customerportal_forwarddraft, [dir=ltr] .feedback_forwarddraft {
-  left: var(--zd_size1);
+  left: var(--zd_size1) ;
 }
 [dir=rtl] .email_forwarddraft, [dir=rtl] .facebook_forwarddraft, [dir=rtl] .twitter_forwarddraft, [dir=rtl] .forums_forwarddraft, [dir=rtl] .chat_forwarddraft, [dir=rtl] .offline_chat_forwarddraft, [dir=rtl] .online_chat_forwarddraft, [dir=rtl] .phone_forwarddraft, [dir=rtl] .web_forwarddraft, [dir=rtl] .customerportal_forwarddraft, [dir=rtl] .feedback_forwarddraft {
-  right: var(--zd_size1);
+  right: var(--zd_size1) ;
 }
 
 /* facebook_dm */
 [dir=ltr] .facebook_dm_default, [dir=ltr] .facebook_dm_incoming, [dir=ltr] .facebook_dm_outgoing, [dir=ltr] .facebook_dm_missed {
-  right: var(--zd_size2);
+  right: var(--zd_size2) ;
 }
 [dir=rtl] .facebook_dm_default, [dir=rtl] .facebook_dm_incoming, [dir=rtl] .facebook_dm_outgoing, [dir=rtl] .facebook_dm_missed {
-  left: var(--zd_size2);
+  left: var(--zd_size2) ;
 }
 
 /*Topic Icon colors*/
 .topic_olive {
-  color: var(--zd_text_olive);
+  --topIconColor: var(--zdt_channelIcon_topIcon_iconGreen);
 }
-
 .topic_yellow3 {
-  color: var(--zd_text_yellow3);
+  --topIconColor: var(--zdt_channelIcon_topIcon_iconYellow);
+}
+.topicIcon {
+  color: var(--topIconColor);
 }

package/es/ChannelIcon/props/defaultProps.js

@@ -0,0 +1,7 @@
+export const defaultProps = {
+  iconSize: '21',
+  name: 'phone',
+  needTopicBorder: true,
+  renderIconOnly: false,
+  dataSelectorId: 'channelIcon'
+};

package/es/ChannelIcon/props/propTypes.js

@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  action: PropTypes.string,
+  className: PropTypes.string,
+  customTextClass: PropTypes.string,
+  dataId: PropTypes.string,
+  iconClass: PropTypes.string,
+  iconColor: PropTypes.string,
+  iconName: PropTypes.string,
+  iconSize: PropTypes.string,
+  iconTitle: PropTypes.string,
+  name: PropTypes.string,
+  needTopicBorder: PropTypes.bool,
+  palette: PropTypes.oneOf(['primary', 'secondary', 'info', 'default']),
+  renderIconOnly: PropTypes.bool,
+  size: PropTypes.string,
+  textPalette: PropTypes.oneOf(['white', 'black']),
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  topicClass: PropTypes.string,
+  topicIcon: PropTypes.string,
+  topicIconColor: PropTypes.string,
+  topicIconSize: PropTypes.string,
+  topicIconTitle: PropTypes.string,
+  dataSelectorId: PropTypes.string
+};