@zohodesk/dot 1.0.0-beta.21 → 1.0.0-beta.210

package/es/Attachment/Attachment.module.css

@@ -0,0 +1,121 @@
+.attachment {
+  border: 1px solid var(--zdt_attachment_default_border);
+  border-radius: 2px;
+  position: relative;
+  overflow: hidden;
+}
+.attachmentHover {
+  cursor: pointer;
+}
+.palette_default {
+  background-color: var(--zdt_attachment_default_bg);
+}
+.palette_transparent {
+  background-color: var(--zdt_attachment_transparent_bg);
+}
+.attachmentHover:hover,
+.attachmentHover:hover .attachleft {
+  border-color: var(--zdt_attachment_default_hover_border);
+}
+.attachmentHover:hover .attachleft i {
+  color: var(--zdt_attachment_hover_text);
+}
+.attachment:hover .attachDownload {
+  display: block;
+}
+.attachmentHover:hover .attachSize {
+  color: var(--zdt_attachment_hover_text);
+}
+
+.medium {
+  width: var(--zd_size210);
+  height: var(--zd_size60);
+}
+.small {
+  width: var(--zd_size145);
+  height: var(--zd_size40);
+}
+.attachleft {
+  border-right: 1px solid var(--zdt_attachment_default_border);
+}
+.medium .attachleft {
+  width: var(--zd_size50);
+}
+.small .attachleft {
+  width: var(--zd_size40);
+}
+
+.medium .attachright {
+  padding: var(--zd_size5) var(--zd_size25) var(--zd_size5) var(--zd_size10);
+}
+.small .attachright {
+  padding: 0 var(--zd_size10) 0 var(--zd_size10);
+}
+
+.footer {
+  font-size: 0;
+  margin-top: var(--zd_size3);
+}
+.medium .atatchName {
+  font-size: var(--zd_font_size14);
+  line-height: var(--zd_size20);
+}
+.small .atatchName {
+  font-size: var(--zd_font_size12);
+  line-height: var(--zd_size15);
+}
+
+.attachSize {
+  color: var(--zdt_attachment_size_text);
+}
+.atatchName,
+.attachSize {
+  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+}
+
+.medium .attachSize {
+  font-size: var(--zd_font_size11);
+}
+.small .attachSize {
+  font-size: var(--zd_font_size10);
+}
+.attachDownload {
+  position: absolute;
+  top: calc(var(--zd_size1) * -1);
+  right: calc(var(--zd_size1) * -1);
+  background-color: var(--zdt_attachment_download_bg);
+  text-align: center;
+  display: none;
+}
+.medium .attachDownload {
+  height: var(--zd_size25);
+  width: var(--zd_size25);
+  line-height: var(--zd_size23);
+}
+.small .attachDownload {
+  height: var(--zd_size20);
+  width: var(--zd_size20);
+  line-height: var(--zd_size18);
+}
+.attachDownload:hover {
+  background-color: var(--zdt_attachment_download_hover_bg);
+}
+
+.attachIcon {
+  font-size: var(--zd_font_size20);
+}
+.downIcon {
+  font-size: var(--zd_font_size14);
+  color: var(--zdt_attachment_size_text);
+}
+.attachDownload:hover .downIcon {
+  color: var(--zdt_attachment_download_hover_text);
+}
+
+.dot {
+  background-color: var(--zdt_dot_text);
+  height: 2px;
+  width: 2px;
+  border-radius: 50%;
+  margin: 0 var(--zd_size6);
+}

package/es/ChannelIcon/ChannelIcon.js

@@ -1,8 +1,3 @@
-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';
@@ -10,107 +5,120 @@ 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;
+  render() {
+    let {
+      name,
+      action,
+      iconSize,
+      iconTitle,
+      size,
+      topicIcon,
+      topicIconTitle,
+      topicIconSize,
+      topicIconColor,
+      iconClass,
+      dataId,
+      className,
+      palette,
+      textPalette,
+      customTextClass,
+      iconColor,
+      needTopicBorder,
+      topicClass,
+      renderIconOnly,
+      iconName,
+      title
+    } = this.props;
+    let defaultChannelObj = name && !iconName && getChannelMappingObj()[name.toUpperCase()];
+    let customizedChannelName = null;
 
-      var defaultChannelObj = name && getChannelMappingObj()[name.toUpperCase()];
-      var customizedChannelName = null;
-      var iconName = 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 }) : size ? 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
-        }),
-        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] : ''
-          })
-        ) : null
-      );
+    if (!defaultChannelObj) {
+      customizedChannelName = name;
+    } else {
+      iconName = defaultChannelObj[action];
     }
-  }]);
 
-  return ChannelIcon;
-}(Component);
-
-export default ChannelIcon;
+    return /*#__PURE__*/React.createElement("span", {
+      className: style.container
+    }, 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
+  needTopicBorder: true,
+  renderIconOnly: false
 };
 ChannelIcon.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,
-  iconColor: PropTypes.string,
-  needTopicBorder: PropTypes.bool,
-  topicClass: PropTypes.string,
-  iconTitle: PropTypes.string
+  topicIconTitle: PropTypes.string
 };
+
 if (false) {
   ChannelIcon.docs = {
     componentGroup: 'Atom'

package/es/ChannelIcon/ChannelIcon.module.css

@@ -1,101 +1,100 @@
+.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);
+  right: calc(var(--zd_size1) * -1);
   height: var(--zd_size15);
   width: var(--zd_size15);
-  background-color: var(--dot_bg_white);
-}
-[dir=ltr] .thread {
-  right: calc(var(--zd_size1) * -1);
-}
-[dir=rtl] .thread {
-  left: calc(var(--zd_size1) * -1);
+  background-color: var(--topIconBg);
 }
 .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 {
@@ -110,12 +109,11 @@
 }
 
 /* facebook */
-[dir=ltr] .facebook_incoming, [dir=ltr] .facebook_missed, [dir=ltr] .facebook_outgoing {
+.facebook_incoming,
+.facebook_missed,
+.facebook_outgoing {
   right: var(--zd_size2);
 }
-[dir=rtl] .facebook_incoming, [dir=rtl] .facebook_missed, [dir=rtl] .facebook_outgoing {
-  left: var(--zd_size2);
-}
 
 /* chat */
 .chat_incoming,
@@ -139,13 +137,8 @@
 .feedback_incoming,
 .feedback_missed,
 .feedback_out {
-  top: var(--zd_size1);
-}
-[dir=ltr] .feedback_incoming, [dir=ltr] .feedback_missed, [dir=ltr] .feedback_out {
   right: var(--zd_size1);
-}
-[dir=rtl] .feedback_incoming, [dir=rtl] .feedback_missed, [dir=rtl] .feedback_out {
-  left: var(--zd_size1);
+  top: var(--zd_size1);
 }
 
 /* draft */
@@ -160,16 +153,26 @@
 .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);
 }
-[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);
+
+/* 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 +184,25 @@
 .web_forwarddraft,
 .customerportal_forwarddraft,
 .feedback_forwarddraft {
-  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);
-}
-[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);
+  bottom: 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 {
+.facebook_dm_default,
+.facebook_dm_incoming,
+.facebook_dm_outgoing,
+.facebook_dm_missed {
   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);
-}
 
 /*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);
 }