@zohodesk/dot 1.0.0-temp-62 → 1.0.0-temp-65

package/es/Appearance/default/themes/blue/blueDefaultDotTheme.module.css

@@ -1,10 +1,10 @@
-[data-mode='default'][data-theme='blue'], :global(.blueDefaultTheme) [data-desk-theme="blue"] {
-	/* freezelayer */
-	--zdt_freezelayer_darklight_bg: rgba(44, 51, 77, 0.94);
-	
-	/* common empty state */
-	--zdt_commonEmptyState_dark_title: var(--dot_white);
-	--zdt_commonEmptyState_dark_description: var(--dot_white);
-	--zdt_commonEmptyState_dark_link: #6cbbfc;
-	--zdt_commonEmptyState_dark_link_hover: #2469ff;
+[data-mode='default'][data-theme='blue'] {
+    /* freezelayer */
+    --zdt_freezelayer_darklight_bg: rgba(44, 51, 77, 0.94);
+
+    /* common empty state */
+    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_link: #6cbbfc;
+    --zdt_commonEmptyState_dark_link_hover: #2469ff;
 }

package/es/Appearance/default/themes/green/greenDefaultDotTheme.module.css

@@ -1,10 +1,10 @@
 [data-mode='default'][data-theme='green'] {
-	/* freezelayer */
-	--zdt_freezelayer_darklight_bg: rgba(15, 34, 38, 0.94);
-	
-	/* common empty state */
-	--zdt_commonEmptyState_dark_title: var(--dot_white);
-	--zdt_commonEmptyState_dark_description: var(--dot_white);
-	--zdt_commonEmptyState_dark_link: #4ac064;
-	--zdt_commonEmptyState_dark_link_hover: #0e7526;
+    /* freezelayer */
+    --zdt_freezelayer_darklight_bg: rgba(15, 34, 38, 0.94);
+
+    /* common empty state */
+    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_link: #4ac064;
+    --zdt_commonEmptyState_dark_link_hover: #0e7526;
 }

package/es/Appearance/default/themes/orange/orangeDefaultDotTheme.module.css

@@ -1,10 +1,10 @@
 [data-mode='default'][data-theme='orange'] {
-	/* freezelayer */
-	--zdt_freezelayer_darklight_bg: rgba(36, 30, 19, 0.94);
-	
-	/* common empty state */
-	--zdt_commonEmptyState_dark_title: var(--dot_white);
-	--zdt_commonEmptyState_dark_description: var(--dot_white);
-	--zdt_commonEmptyState_dark_link: #e57717;
-	--zdt_commonEmptyState_dark_link_hover: #b25900;
+    /* freezelayer */
+    --zdt_freezelayer_darklight_bg: rgba(36, 30, 19, 0.94);
+
+    /* common empty state */
+    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_link: #e57717;
+    --zdt_commonEmptyState_dark_link_hover: #b25900;
 }

package/es/Appearance/default/themes/red/redDefaultDotTheme.module.css

@@ -1,10 +1,10 @@
 [data-mode='default'][data-theme='red'] {
-	/* freezelayer */
-	--zdt_freezelayer_darklight_bg: rgba(34, 15, 27, 0.94);
-	
-	/* common empty state */
-	--zdt_commonEmptyState_dark_title: var(--dot_white);
-	--zdt_commonEmptyState_dark_description: var(--dot_white);
-	--zdt_commonEmptyState_dark_link: #ff6363;
-	--zdt_commonEmptyState_dark_link_hover: #ab1a18;
+    /* freezelayer */
+    --zdt_freezelayer_darklight_bg: rgba(34, 15, 27, 0.94);
+    
+    /* common empty state */
+    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_link: #ff6363;
+    --zdt_commonEmptyState_dark_link_hover: #ab1a18;
 }

package/es/Appearance/default/themes/yellow/yellowDefaultDotTheme.module.css

@@ -1,10 +1,10 @@
 [data-mode='default'][data-theme='yellow'] {
-	/* freezelayer */
-	--zdt_freezelayer_darklight_bg: rgba(34, 36, 18, 0.94);
-	
-	/* common empty state */
-	--zdt_commonEmptyState_dark_title: var(--dot_white);
-	--zdt_commonEmptyState_dark_description: var(--dot_white);
-	--zdt_commonEmptyState_dark_link: #e8b923;
-	--zdt_commonEmptyState_dark_link_hover: #b59100;
+    /* freezelayer */
+    --zdt_freezelayer_darklight_bg: rgba(34, 36, 18, 0.94);
+
+    /* common empty state */
+    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_link: #e8b923;
+    --zdt_commonEmptyState_dark_link_hover: #b59100;
 }

package/es/Attachment/Attachment.module.css

@@ -1,8 +1,8 @@
 .attachment {
-  border: 1px solid var(--zdt_attachment_default_border);
-  border-radius: 2px;
   position: relative;
   overflow: hidden;
+  border: 1px solid var(--zdt_attachment_default_border);
+  border-radius: 2px;
 }
 .attachmentHover {
   cursor: pointer;
@@ -13,8 +13,7 @@
 .palette_transparent {
   background-color: var(--zdt_attachment_transparent_bg);
 }
-.attachmentHover:hover,
-.attachmentHover:hover .attachleft {
+.attachmentHover:hover, .attachmentHover:hover .attachleft {
   border-color: var(--zdt_attachment_default_hover_border);
 }
 .attachmentHover:hover .attachleft i {
@@ -35,9 +34,12 @@
   width: var(--zd_size145);
   height: var(--zd_size40);
 }
-.attachleft {
+[dir=ltr] .attachleft {
   border-right: 1px solid var(--zdt_attachment_default_border);
 }
+[dir=rtl] .attachleft {
+  border-left: 1px solid var(--zdt_attachment_default_border);
+}
 .medium .attachleft {
   width: var(--zd_size50);
 }
@@ -45,9 +47,13 @@
   width: var(--zd_size40);
 }
 
-.medium .attachright {
+[dir=ltr] .medium .attachright {
   padding: var(--zd_size5) var(--zd_size25) var(--zd_size5) var(--zd_size10);
 }
+
+[dir=rtl] .medium .attachright {
+  padding: var(--zd_size5) var(--zd_size10) var(--zd_size5) var(--zd_size25);
+}
 .small .attachright {
   padding: 0 var(--zd_size10) 0 var(--zd_size10);
 }
@@ -82,10 +88,15 @@
 .attachDownload {
   position: absolute;
   top: calc(var(--zd_size1) * -1);
-  right: calc(var(--zd_size1) * -1);
+  display: none;
   background-color: var(--zdt_attachment_download_bg);
   text-align: center;
-  display: none;
+}
+[dir=ltr] .attachDownload {
+  right: calc(var(--zd_size1) * -1);
+}
+[dir=rtl] .attachDownload {
+  left: calc(var(--zd_size1) * -1);
 }
 .medium .attachDownload {
   height: var(--zd_size25);
@@ -113,9 +124,9 @@
 }
 
 .dot {
-  background-color: var(--zdt_dot_text);
   height: 2px;
   width: 2px;
+  background-color: var(--zdt_dot_text);
   border-radius: 50%;
   margin: 0 var(--zd_size6);
 }

package/es/Attachment/docs/Attachment__default.docs.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Attachment from '../Attachment';
+export default class Attachment__default extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Attachment, {
+      fileName: "20993016_1413168518775205_8593331352042442533_n.jpg",
+      fileSize: "31.5 KB",
+      downloadLink: "https://d1ydxa2xvtn0b5.cloudfront.net/app/images/smartapplogo.c9bf244c1c797161b30a.png",
+      tooltip: "Attachment",
+      iconName: "ZD-filePicture",
+      fileInfo: "2 days ago"
+    }), /*#__PURE__*/React.createElement(Attachment, {
+      fileName: "20993016_1413168518775205_8593331352042442533_n.jpg",
+      fileSize: "31.5 KB",
+      downloadLink: "https://d1ydxa2xvtn0b5.cloudfront.net/app/images/smartapplogo.c9bf244c1c797161b30a.png",
+      tooltip: "Attachment",
+      iconName: "ZD-filePicture"
+    }), /*#__PURE__*/React.createElement(Attachment, {
+      fileName: "20993016_1413168518775205_8593331352042442533_n.jpg",
+      downloadLink: "https://d1ydxa2xvtn0b5.cloudfront.net/app/images/smartapplogo.c9bf244c1c797161b30a.png",
+      tooltip: "Attachment",
+      iconName: "ZD-filePicture"
+    }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Attachment, {
+      fileName: "20993016_1413168518775205_8593331352042442533_n.jpg",
+      fileSize: "31.5 KB",
+      downloadLink: "https://d1ydxa2xvtn0b5.cloudfront.net/app/images/smartapplogo.c9bf244c1c797161b30a.png",
+      tooltip: "Attachment",
+      iconName: "ZD-filePicture",
+      size: "small",
+      fileInfo: "15 days ago"
+    }), /*#__PURE__*/React.createElement(Attachment, {
+      fileName: "20993016_1413168518775205_8593331352042442533_n.jpg",
+      fileSize: "31.5 KB",
+      downloadLink: "https://d1ydxa2xvtn0b5.cloudfront.net/app/images/smartapplogo.c9bf244c1c797161b30a.png",
+      tooltip: "Attachment",
+      iconName: "ZD-filePicture",
+      size: "small"
+    }), /*#__PURE__*/React.createElement(Attachment, {
+      fileName: "20993016_1413168518775205_8593331352042442533_n.jpg",
+      downloadLink: "https://d1ydxa2xvtn0b5.cloudfront.net/app/images/smartapplogo.c9bf244c1c797161b30a.png",
+      tooltip: "Attachment",
+      iconName: "ZD-filePicture",
+      size: "small"
+    }));
+  }
+
+}
+
+if (false) {
+  Attachment__default.docs = {
+    componentGroup: 'Attachment'
+  };
+}

package/es/ChannelIcon/ChannelIcon.module.css

@@ -14,11 +14,16 @@
   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);
 }
+[dir=ltr] .thread {
+  right: calc(var(--zd_size1) * -1);
+}
+[dir=rtl] .thread {
+  left: calc(var(--zd_size1) * -1);
+}
 .threadBorder {
   border: 1px solid var(--topIconBorderColor);
 }
@@ -109,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,
@@ -137,24 +143,22 @@
 .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);
 }
+[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,
@@ -184,17 +188,22 @@
 .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 {

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

@@ -0,0 +1,57 @@
+import React, { Component } from 'react';
+import ChannelIcon from '../ChannelIcon';
+import { getChannelMappingObj } from '../../utils/ChannelIconMapping';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+export default class ChannelIcon__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  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));
+  }
+
+}
+
+if (false) {
+  ChannelIcon__default.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/es/Drawer/Drawer.module.css

@@ -1,15 +1,20 @@
 .container {
+  transition: width var(--zd_transition3);
   box-shadow: 0 6px 12px var(--zdt_drawer_default_box_shadow);
   background-color: var(--zdt_drawer_default_bg);
-  transition: width var(--zd_transition3);
 }
 .isOverlay {
-  right: 0;
   top: 0;
   bottom: 0;
   position: absolute;
   pointer-events: none;
 }
+[dir=ltr] .isOverlay {
+  right: 0;
+}
+[dir=rtl] .isOverlay {
+  left: 0;
+}
 .columns {
   pointer-events: initial;
 }
@@ -21,17 +26,28 @@
   box-shadow: 0 6px 12px var(--zdt_drawer_default_box_shadow);
 }
 .secondMobDrawer {
-  right: 0;
   position: absolute;
   top: 0;
   z-index: 1;
 }
+[dir=ltr] .secondMobDrawer {
+  right: 0;
+}
+[dir=rtl] .secondMobDrawer {
+  left: 0;
+}
 .mobModal {
   position: absolute;
   top: 0;
-  right: 0;
   bottom: 0;
+}
+[dir=ltr] .mobModal {
+  right: 0;
+  left: 0;
+}
+[dir=rtl] .mobModal {
   left: 0;
+  right: 0;
 }
 .xsmall {
   width: var(--zd_size360);
@@ -72,32 +88,64 @@
   color: var( --zdt_drawer_title_text);
   font: var(--zd_font_size16) var(--zd_semibold);
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+}
+[dir=ltr] .title {
   padding: 0 var(--zd_size10) 0 0;
 }
-.smallHeaderPadding {
+[dir=rtl] .title {
+  padding: 0 0 0 var(--zd_size10);
+}
+[dir=ltr] .smallHeaderPadding {
   padding-right: var(--zd_size11);
   padding-left: var(--zd_size30);
 }
-.smallContentPadding {
+[dir=rtl] .smallHeaderPadding {
+  padding-left: var(--zd_size11);
+  padding-right: var(--zd_size30);
+}
+[dir=ltr] .smallContentPadding {
   padding-left: var(--zd_size30);
   padding-right: var(--zd_size30);
 }
-.mediumHeaderPadding {
+[dir=rtl] .smallContentPadding {
+  padding-right: var(--zd_size30);
+  padding-left: var(--zd_size30);
+}
+[dir=ltr] .mediumHeaderPadding {
   padding-right: var(--zd_size15);
   padding-left: var(--zd_size30);
 }
-.mediumContentPadding {
+[dir=rtl] .mediumHeaderPadding {
+  padding-left: var(--zd_size15);
+  padding-right: var(--zd_size30);
+}
+[dir=ltr] .mediumContentPadding {
   padding-left: var(--zd_size30);
   padding-right: var(--zd_size30);
 }
-.largeHeaderPadding {
+[dir=rtl] .mediumContentPadding {
+  padding-right: var(--zd_size30);
+  padding-left: var(--zd_size30);
+}
+[dir=ltr] .largeHeaderPadding {
   padding-right: var(--zd_size15);
   padding-left: var(--zd_size50);
 }
-.largeContentPadding {
+[dir=rtl] .largeHeaderPadding {
+  padding-left: var(--zd_size15);
+  padding-right: var(--zd_size50);
+}
+[dir=ltr] .largeContentPadding {
   padding-left: var(--zd_size50);
   padding-right: var(--zd_size50);
 }
-.iconWrapper {
+[dir=rtl] .largeContentPadding {
+  padding-right: var(--zd_size50);
+  padding-left: var(--zd_size50);
+}
+[dir=ltr] .iconWrapper {
   margin-right: var(--zd_size10);
 }
+[dir=rtl] .iconWrapper {
+  margin-left: var(--zd_size10);
+}

package/es/Drawer/docs/Drawer__default.docs.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import Drawer, { Header, Content, Footer } from '../Drawer';
+import Button from '@zohodesk/components/lib/Button/Button';
+import style from '../Drawer.module.css';
+export default class Drawer__default extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isActive: true,
+      size: 'xsmall'
+    };
+    this.onClose = this.onClose.bind(this);
+    this.getFooter = this.getFooter.bind();
+  }
+
+  onClose() {
+    this.setState({
+      isActive: false
+    });
+  }
+
+  changeSize(drawersize) {
+    this.setState({
+      size: drawersize
+    });
+  }
+
+  getFooter() {
+    return /*#__PURE__*/React.createElement("p", null, "getChildren");
+  }
+
+  render() {
+    let {
+      isActive,
+      size
+    } = this.state;
+    return /*#__PURE__*/React.createElement(Drawer, {
+      isActive: isActive,
+      needFreeze: false,
+      paddingSize: "small",
+      size: size
+    }, /*#__PURE__*/React.createElement(Header, {
+      title: "Add Component",
+      onClose: this.onClose,
+      iconName: "ZD-zdDuetimeQueueNew",
+      iconSize: "15",
+      align: "column",
+      getChildren: this.getFooter
+    }, /*#__PURE__*/React.createElement("span", null, "children")), /*#__PURE__*/React.createElement(Content, {
+      className: style.headerTest
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "small",
+      onClick: this.changeSize.bind(this, 'small')
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "xsmall",
+      onClick: this.changeSize.bind(this, 'xsmall')
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "medium",
+      onClick: this.changeSize.bind(this, 'medium')
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "xmedium",
+      onClick: this.changeSize.bind(this, 'xmedium')
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "large",
+      onClick: this.changeSize.bind(this, 'large')
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "xlarge",
+      onClick: this.changeSize.bind(this, 'xlarge')
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "xxlarge",
+      onClick: this.changeSize.bind(this, 'xxlarge')
+    })), /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.createElement(Button, {
+      text: "Save",
+      palette: "primaryFilled"
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "Cancel",
+      palette: "secondary"
+    })));
+  }
+
+}
+
+if (false) {
+  Drawer__default.docs = {
+    componentGroup: 'Template'
+  };
+}