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

package/es/ChannelIcon/ChannelIcon.module.css

@@ -1,96 +1,105 @@
+.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);
+  background-color: var(--topIconBg);
+}
+[dir=ltr] .thread {
+  right: calc(var(--zd_size1) * -1);
+}
+[dir=rtl] .thread {
+  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 {
@@ -105,11 +114,12 @@
 }
 
 /* facebook */
-.facebook_incoming,
-.facebook_missed,
-.facebook_outgoing {
+[dir=ltr] .facebook_incoming, [dir=ltr] .facebook_missed, [dir=ltr] .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,
@@ -133,27 +143,40 @@
 .feedback_incoming,
 .feedback_missed,
 .feedback_out {
-  right: var(--zd_size1);
   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);
+}
 
 /* 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 {
+[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);
-  top: 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,
@@ -165,23 +188,30 @@
 .web_forwarddraft,
 .customerportal_forwarddraft,
 .feedback_forwarddraft {
-  left: 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);
+}
+[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);
+}
 
 /* facebook_dm */
-.facebook_dm_default,
-.facebook_dm_incoming,
-.facebook_dm_outgoing,
-.facebook_dm_missed {
+[dir=ltr] .facebook_dm_default, [dir=ltr] .facebook_dm_incoming, [dir=ltr] .facebook_dm_outgoing, [dir=ltr] .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);
 }

package/es/ChannelIcon/docs/ChannelIcon__default.docs.js

@@ -1,94 +1,54 @@
-import _Object$keys from 'babel-runtime/core-js/object/keys';
-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 ChannelIcon from '../ChannelIcon';
 import { getChannelMappingObj } from '../../utils/ChannelIconMapping';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
-
-var ChannelIcon__default = function (_Component) {
-  _inherits(ChannelIcon__default, _Component);
-
-  function ChannelIcon__default(props) {
-    _classCallCheck(this, ChannelIcon__default);
-
-    return _possibleConstructorReturn(this, (ChannelIcon__default.__proto__ || _Object$getPrototypeOf(ChannelIcon__default)).call(this, props));
+export default class ChannelIcon__default extends Component {
+  constructor(props) {
+    super(props);
   }
 
-  _createClass(ChannelIcon__default, [{
-    key: 'render',
-    value: function render() {
-      var boxStyle = {},
-          style = {
-        border: '1px solid #c3c1c1',
-        padding: '10px',
-        margin: '1px 10px',
-        textAlign: 'center'
-      },
-          titleStyle = {
-        'font-size': '13px',
-        'padding-bottom': '5px',
-        'border-bottom': '1px solid #c3c1c1',
-        margin: '10px 0 5px',
-        textAlign: 'center'
-      };
-      var channels = getChannelMappingObj();
-      return React.createElement(
-        Container,
-        null,
-        _Object$keys(channels).map(function (item, i) {
-          return React.createElement(
-            Box,
-            { key: i, scroll: 'none', style: { padding: '5px' } },
-            React.createElement(
-              'p',
-              { style: titleStyle },
-              item
-            ),
-            React.createElement(
-              Container,
-              {
-                alignBox: 'row',
-                align: 'vertical',
-                isCover: false,
-                wrap: 'wrap'
-              },
-              _Object$keys(channels[item]).map(function (channel, j) {
-                return React.createElement(
-                  Box,
-                  { flexible: true, style: style, key: j },
-                  React.createElement(
-                    'h6',
-                    null,
-                    channel
-                  ),
-                  React.createElement(
-                    'div',
-                    null,
-                    React.createElement(ChannelIcon, {
-                      name: item,
-                      action: channel,
-                      iconSize: '21',
-                      size: 'medium'
-                    })
-                  )
-                );
-              })
-            )
-          );
-        }),
-        React.createElement('br', null)
-      );
-    }
-  }]);
-
-  return ChannelIcon__default;
-}(Component);
+  render() {
+    let boxStyle = {},
+        style = {
+      border: '1px solid #c3c1c1',
+      padding: '10px',
+      margin: '1px 10px',
+      textAlign: 'center'
+    },
+        titleStyle = {
+      'font-size': '13px',
+      'padding-bottom': '5px',
+      'border-bottom': '1px solid #c3c1c1',
+      margin: '10px 0 5px',
+      textAlign: 'center'
+    };
+    let channels = getChannelMappingObj();
+    return /*#__PURE__*/React.createElement(Container, null, Object.keys(channels).map((item, i) => /*#__PURE__*/React.createElement(Box, {
+      key: i,
+      scroll: "none",
+      style: {
+        padding: '5px'
+      }
+    }, /*#__PURE__*/React.createElement("p", {
+      style: titleStyle
+    }, item), /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "vertical",
+      isCover: false,
+      wrap: "wrap"
+    }, Object.keys(channels[item]).map((channel, j) => /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      style: style,
+      key: j
+    }, /*#__PURE__*/React.createElement("h6", null, channel), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ChannelIcon, {
+      name: item,
+      action: channel,
+      iconSize: "21",
+      size: "medium"
+    }))))))), /*#__PURE__*/React.createElement("br", null));
+  }
 
-export default ChannelIcon__default;
+}
 
 if (false) {
   ChannelIcon__default.docs = {