@zohodesk/dot 1.0.0-beta.212 → 1.0.0-beta.215

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

@@ -0,0 +1,126 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Icon from '@zohodesk/icons/lib/Icon';
+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';
+export default class ChannelIcon extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  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;
+
+    if (!defaultChannelObj) {
+      customizedChannelName = name;
+    } else {
+      iconName = defaultChannelObj[action];
+    }
+
+    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,
+  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
+};
+
+if (false) {
+  ChannelIcon.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/es/ChannelIcon/ChannelIcon.module.css

@@ -0,0 +1,208 @@
+.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: 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(--topIconBg);
+}
+.threadBorder {
+  border: 1px solid var(--topIconBorderColor);
+}
+.iconStyle {
+  position: relative;
+  color: var(--iconColor);
+}
+
+/* Channel Icon Style */
+/* path */
+.email_incoming span:first-child:before,
+.email_outgoing 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,
+.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,
+.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,
+.phone_forward span:first-child:before,
+.phone_forwarddraft span:first-child:before,
+.web_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,
+.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_incoming,
+.email_missed,
+.email_outgoing {
+  bottom: var(--zd_size2);
+}
+
+/* twitter */
+.twitter_incoming,
+.twitter_outgoing,
+.twitter_missed {
+  bottom: var(--zd_size1);
+}
+
+/* facebook */
+.facebook_incoming,
+.facebook_missed,
+.facebook_outgoing {
+  right: var(--zd_size2);
+}
+
+/* chat */
+.chat_incoming,
+.offline_chat_incoming,
+.online_chat_incoming,
+.chat_missed,
+.offline_chat_missed,
+.online_chat_missed,
+.chat_outgoing,
+.offline_chat_outgoing,
+.online_chat_outgoing {
+  bottom: var(--zd_size1);
+}
+
+/* forums */
+.forums_default {
+  top: var(--zd_size1);
+}
+
+/* feedback */
+.feedback_incoming,
+.feedback_missed,
+.feedback_out {
+  right: var(--zd_size1);
+  top: 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 {
+  left: 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 */
+.email_forwarddraft,
+.facebook_forwarddraft,
+.twitter_forwarddraft,
+.forums_forwarddraft,
+.chat_forwarddraft,
+.offline_chat_forwarddraft,
+.online_chat_forwarddraft,
+.phone_forwarddraft,
+.web_forwarddraft,
+.customerportal_forwarddraft,
+.feedback_forwarddraft {
+  left: var(--zd_size1);
+  bottom: var(--zd_size1);
+}
+
+/* facebook_dm */
+.facebook_dm_default,
+.facebook_dm_incoming,
+.facebook_dm_outgoing,
+.facebook_dm_missed {
+  right: var(--zd_size2);
+}
+
+/*Topic Icon colors*/
+.topic_olive {
+  --topIconColor: var(--zdt_channelIcon_topIcon_iconGreen);
+}
+.topic_yellow3 {
+  --topIconColor: var(--zdt_channelIcon_topIcon_iconYellow);
+}
+.topicIcon {
+  color: var(--topIconColor);
+}