@zohodesk/dot 1.0.0-test.239 → 1.1.0

package/es/AttachmentViewer/utils.js

@@ -1,25 +1,33 @@
 export class Zoom {
   constructor() {
     const matrix = [1, 0, 0, 1, 0, 0]; // current view transform
+
     this.m = matrix; // alias 
+
     this.scale = 1; // current scale
+
     this.pos = {
       x: 0,
       y: 0
     }; // current position of origin
+
     this.dirty = true;
   }
+
   applyTo(el) {
     const {
       dirty,
       m
     } = this;
+
     if (dirty) {
       this.update();
     }
+
     el.style.transform = `matrix(${m[0]},${m[1]},${m[2]},${m[3]},${m[4]},${m[5]})`;
     el.style.transformOrigin = '0 0';
   }
+
   update() {
     // m[4], m[5] - need to set transforms based on positions. Currently set to 0 to zoom based on center
     const {
@@ -33,34 +41,41 @@ export class Zoom {
     m[4] = pos.x;
     m[5] = pos.y;
   }
+
   pan(amount) {
     if (this.dirty) {
       this.update();
     }
+
     this.pos.x += amount.x;
     this.pos.y += amount.y;
     this.dirty = true;
   }
+
   scaleAt(at, amount) {
     // at in screen coords
     const {
       dirty,
       pos
     } = this;
+
     if (dirty) {
       this.update();
     }
+
     this.scale *= amount;
     this.pos.x = at.x - (at.x - pos.x) * amount;
     this.pos.y = at.y - (at.y - pos.y) * amount;
     this.dirty = true;
   }
+
 }
 ;
 export class ZoomEvent {
   constructor() {
     this.pos = [];
   }
+
   on(dir, ele, zoom, event) {
     if (dir === 'in') {
       const x = event.pageX - ele.width / 2;
@@ -85,6 +100,8 @@ export class ZoomEvent {
       }, 1 / 1.6);
       zoom.applyTo(ele);
     }
+
     event.preventDefault();
   }
+
 }

package/es/ChannelIcon/ChannelIcon.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
 import AvatarIcon from '../avatar/AvatarIcon/AvatarIcon';
 import { getChannelMappingObj } from '../utils/ChannelIconMapping';
@@ -10,6 +10,7 @@ export default class ChannelIcon extends Component {
   constructor(props) {
     super(props);
   }
+
   render() {
     let {
       name,
@@ -32,17 +33,21 @@ export default class ChannelIcon extends Component {
       topicClass,
       renderIconOnly,
       iconName,
-      title
+      title,
+      dataSelectorId
     } = 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
+      className: style.container,
+      "data-selector-id": dataSelectorId
     }, customizedChannelName ? /*#__PURE__*/React.createElement(Avatar, {
       name: customizedChannelName,
       size: size,
@@ -85,11 +90,11 @@ export default class ChannelIcon extends Component {
       dataId: dataId
     })) : null);
   }
+
 }
 ChannelIcon.defaultProps = defaultProps;
-ChannelIcon.propTypes = propTypes;
-if (false) {
-  ChannelIcon.docs = {
-    componentGroup: 'Atom'
-  };
-}
+ChannelIcon.propTypes = propTypes; // if (__DOCS__) {
+//   ChannelIcon.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }

package/es/ChannelIcon/ChannelIcon.module.css

@@ -1,217 +1,217 @@
-.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);
-  height: var(--zd_size15);
-  width: var(--zd_size15);
-  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(--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 */
-[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,
-.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 {
-  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 */
-[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 */
-.email_forwarddraft,
-.facebook_forwarddraft,
-.twitter_forwarddraft,
-.forums_forwarddraft,
-.chat_forwarddraft,
-.offline_chat_forwarddraft,
-.online_chat_forwarddraft,
-.phone_forwarddraft,
-.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);
-}
-
-/* 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);
-}
-[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 {
-  --topIconColor: var(--zdt_channelIcon_topIcon_iconGreen);
-}
-.topic_yellow3 {
-  --topIconColor: var(--zdt_channelIcon_topIcon_iconYellow);
-}
-.topicIcon {
-  color: var(--topIconColor);
-}
+.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 ) ;
+  height: var(--zd_size15) ;
+  width: var(--zd_size15) ;
+  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(--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 */
+[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,
+.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 {
+  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 */
+[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 */
+.email_forwarddraft,
+.facebook_forwarddraft,
+.twitter_forwarddraft,
+.forums_forwarddraft,
+.chat_forwarddraft,
+.offline_chat_forwarddraft,
+.online_chat_forwarddraft,
+.phone_forwarddraft,
+.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) ;
+}
+
+/* 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) ;
+}
+[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 {
+  --topIconColor: var(--zdt_channelIcon_topIcon_iconGreen);
+}
+.topic_yellow3 {
+  --topIconColor: var(--zdt_channelIcon_topIcon_iconYellow);
+}
+.topicIcon {
+  color: var(--topIconColor);
+}

package/es/ChannelIcon/props/defaultProps.js

@@ -2,5 +2,6 @@ export const defaultProps = {
   iconSize: '21',
   name: 'phone',
   needTopicBorder: true,
-  renderIconOnly: false
+  renderIconOnly: false,
+  dataSelectorId: 'channelIcon'
 };

package/es/ChannelIcon/props/propTypes.js

@@ -20,5 +20,6 @@ export const propTypes = {
   topicIcon: PropTypes.string,
   topicIconColor: PropTypes.string,
   topicIconSize: PropTypes.string,
-  topicIconTitle: PropTypes.string
+  topicIconTitle: PropTypes.string,
+  dataSelectorId: PropTypes.string
 };