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

package/es/list/SecondaryText/SecondaryText.module.css

@@ -1,9 +1,12 @@
 .paidUserIcon {
-  margin-right: var(--zd_size5);
   vertical-align: middle;
   bottom: var(--zd_size1);
   position: relative;
   font-size: var(--zd_font_size8);
+}[dir=ltr] .paidUserIcon {
+  margin-right: var(--zd_size5);
+}[dir=rtl] .paidUserIcon {
+  margin-left: var(--zd_size5);
 }
 .icon {
   display: block;
@@ -42,11 +45,13 @@ display: block
 .textStyle,
 .secondaryText,
 .phoneNumber {
-  cursor: pointer;
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
   max-width: 100%;
   display: block;
 }
+.textStyle, .secondaryText, .phoneNumber {
+  cursor: pointer;
+}
 .textStyle:hover,
 .ticketIdLink,
 .phoneNumber:hover,
@@ -101,9 +106,14 @@ display: block
 }
 .happinessImg {
   width: var(--zd_size10);
-  margin: 0 var(--zd_size4) 0 0;
   vertical-align: middle;
 }
+[dir=ltr] .happinessImg {
+  margin: 0 var(--zd_size4) 0 0;
+}
+[dir=rtl] .happinessImg {
+  margin: 0 0 0 var(--zd_size4);
+}
 
 /* colors */
 .gray {

package/es/list/SecondaryText/docs/ContactName__default.docs.js

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import ContactName from '../ContactName';
+export default class ContactName__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(ContactName, {
+      text: "Antro Contact",
+      isPaidUser: true
+    });
+  }
+
+}
+
+if (false) {
+  ContactName__default.docs = {
+    folderName: 'List',
+    componentGroup: 'ContactName'
+  };
+}

package/es/list/SecondryPanel/docs/SecondryPanelDocs.module.css

@@ -0,0 +1,37 @@
+.layoutWrapper {
+  width: 100%;
+  margin-bottom: 20px;
+  padding: 10px;
+}
+
+.minilayoutContainer {
+  flex-direction: column;
+}
+.container {
+  background: gray;
+}
+.itemId {
+  composes: flexshrink from '~@zohodesk/components/lib/common/common.module.css';
+}
+.itemInner {
+  composes: dflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
+  max-width: var(--zd_size240);
+  font-size: 13px;
+  padding: 5px;
+  background: #fafafa;
+}
+.itemText {
+  composes: flexgrow flexshrink flexbasis from '~@zohodesk/components/lib/common/common.module.css';
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.itemDot {
+  display: inline-block;
+  vertical-align: middle;
+  width: 3px;
+  height: 3px;
+  background-color: red;
+  border-radius: 50%;
+  margin: 0 10px;
+}

package/es/list/SecondryPanel/docs/SecondryPanel__default.docs.js

@@ -0,0 +1,81 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import SecondryPanel, { SecondryPanelUL, SecondryPanelLI } from '../SecondryPanel';
+import style from './SecondryPanelDocs.module.css';
+import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+export default class SecondryPanel__default extends Component {
+  constructor(props) {
+    super(props);
+    this.responsiveFunc = this.responsiveFunc.bind(this);
+  }
+
+  responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      uptoTablet: mediaQueryOR([{
+        maxWidth: 640
+      }])
+    };
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+      query: this.responsiveFunc
+    }, _ref2 => {
+      let {
+        uptoTablet
+      } = _ref2;
+      return /*#__PURE__*/React.createElement(SecondryPanel, {
+        className: style.layoutWrapper
+      }, /*#__PURE__*/React.createElement(SecondryPanelUL, {
+        className: `${uptoTablet ? style.minilayoutContainer : ''}`
+      }, /*#__PURE__*/React.createElement(SecondryPanelLI, null, /*#__PURE__*/React.createElement(SecondryPanelUL, {
+        className: style.container
+      }, /*#__PURE__*/React.createElement(SecondryPanelLI, {
+        className: `${style.itemId}`
+      }, /*#__PURE__*/React.createElement("span", {
+        className: style.itemInner
+      }, /*#__PURE__*/React.createElement("span", {
+        className: style.itemText
+      }, "#12303456789"), /*#__PURE__*/React.createElement("span", {
+        className: style.itemDot
+      }))), /*#__PURE__*/React.createElement(SecondryPanelLI, null, /*#__PURE__*/React.createElement("span", {
+        className: style.itemInner
+      }, /*#__PURE__*/React.createElement("span", {
+        className: style.itemText
+      }, "Nicole Hawkins"), /*#__PURE__*/React.createElement("span", {
+        className: style.itemDot
+      }))), /*#__PURE__*/React.createElement(SecondryPanelLI, null, /*#__PURE__*/React.createElement("span", {
+        className: style.itemInner
+      }, /*#__PURE__*/React.createElement("span", {
+        className: style.itemText
+      }, "Welcome to Diffchecker"), /*#__PURE__*/React.createElement("span", {
+        className: style.itemDot
+      }))))), /*#__PURE__*/React.createElement(SecondryPanelLI, null, /*#__PURE__*/React.createElement(SecondryPanelUL, {
+        className: style.container
+      }, /*#__PURE__*/React.createElement(SecondryPanelLI, null, /*#__PURE__*/React.createElement("span", {
+        className: style.itemInner
+      }, /*#__PURE__*/React.createElement("span", {
+        className: style.itemText
+      }, "28 Jun 2019"), /*#__PURE__*/React.createElement("span", {
+        className: style.itemDot
+      }))), /*#__PURE__*/React.createElement(SecondryPanelLI, null, /*#__PURE__*/React.createElement("span", {
+        className: style.itemInner
+      }, /*#__PURE__*/React.createElement("span", {
+        className: style.itemText
+      }, "28 May 2019 07:41 PM"), /*#__PURE__*/React.createElement("span", {
+        className: style.itemDot
+      })))))));
+    });
+  }
+
+}
+
+if (false) {
+  SecondryPanel__default.docs = {
+    folderName: 'List',
+    componentGroup: 'SecondaryLayout'
+  };
+}

package/es/list/SentimentStatus/SentimentStatus.module.css

@@ -1,7 +1,10 @@
 .container {
-  margin: 0 0 0 var(--zd_size5);
   vertical-align: middle;
   font-size: var(--zd_font_size10);
+}[dir=ltr] .container {
+  margin: 0 0 0 var(--zd_size5);
+}[dir=rtl] .container {
+  margin: 0 var(--zd_size5) 0 0;
 }
 
 .sentimentIcon {

package/es/list/SentimentStatus/docs/SentimentStatus__default.docs.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import SentimentStatus from '../SentimentStatus';
+export default class SentimentStatus__default extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(SentimentStatus, null);
+  }
+
+}
+
+if (false) {
+  SentimentStatus__default.docs = {
+    componentGroup: ''
+  };
+}

package/es/list/Subject/docs/Subject__default.docs.js

@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Subject from '../Subject';
+export default class Subject__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement("div", null, "Font Variant"), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(Subject, {
+      text: "MacBook Pro - A touch of genius"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(Subject, {
+      text: "MacBook Pro - A touch of genius",
+      fontWeight: "semibold"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(Subject, {
+      text: "MacBook Pro - A touch of genius",
+      fontWeight: "bold"
+    })));
+  }
+
+}
+
+if (false) {
+  Subject__default.docs = {
+    folderName: 'List',
+    componentGroup: 'Subject'
+  };
+}

package/es/list/TagNew/TagNew.module.css

@@ -1,26 +1,33 @@
 .tagStyle {
-  border-radius: var(--zd_size14);
-  background-color: var(--zdt_tagnew_default_bg);
-  box-shadow: 0 8px 30px 0 var(--zdt_tagnew_default_box_shadow);
   min-width: var(--zd_size70);
   height: var(--zd_size28);
   font-size: var(--zd_font_size13);
   color: var(--zdt_tagnew_default_text);
-  padding: 0 var(--zd_size15);
   composes: inlineFlex from '../listCommon.module.css';
   composes: alignHorizontal from '~@zohodesk/components/lib/common/common.module.css';
-  transform: scale(0);
   transition: all var(--zd_transition2) ease 0s;
   opacity: 0;
   visibility: hidden;
+  border-radius: var(--zd_size14);
+  background-color: var(--zdt_tagnew_default_bg);
+  box-shadow: 0 8px 30px 0 var(--zdt_tagnew_default_box_shadow);
+  padding: 0 var(--zd_size15);
+  transform: scale(0);
   cursor: pointer;
 }
 
 .bounceIn {
-  transform: scale(1);
-  animation: bounceIn 700ms;
   visibility: visible;
   opacity: 1;
+  transform: scale(1);
+}
+
+[dir=ltr] .bounceIn {
+  animation: bounceIn 700ms;
+}
+
+[dir=rtl] .bounceIn {
+  animation: bounceIn 700ms;
 }
 
 @keyframes bounceIn {

package/es/list/TagNew/docs/TagNew__default.docs.js

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import TagNew from '../TagNew';
+export default class TagNew__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(TagNew, {
+      text: "3 New",
+      animate: true
+    });
+  }
+
+}
+
+if (false) {
+  TagNew__default.docs = {
+    folderName: 'List',
+    componentGroup: 'TagNew'
+  };
+}

package/es/list/Thread/Thread.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Icon from '@zohodesk/icons/lib/Icon';
@@ -14,14 +16,15 @@ export default class Thread extends Component {
       className,
       iconTitle,
       dataId,
-      align
+      align,
+      customProps
     } = this.props;
     let count = threadCount === '0' ? '1' : threadCount;
-    return /*#__PURE__*/React.createElement(Button, {
+    return /*#__PURE__*/React.createElement(Button, _extends({
       customClass: `${style.container} ${style[`align_${align}`]} ${className}`,
       title: iconTitle,
       dataId: dataId
-    }, /*#__PURE__*/React.createElement(Icon, {
+    }, customProps), /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-TK-thread",
       size: "9"
     }), /*#__PURE__*/React.createElement("span", {
@@ -35,11 +38,13 @@ Thread.propTypes = {
   className: PropTypes.string,
   count: PropTypes.string,
   dataId: PropTypes.string,
-  iconTitle: PropTypes.string
+  iconTitle: PropTypes.string,
+  customProps: PropTypes.object
 };
 Thread.defaultProps = {
   align: 'left',
-  className: ''
+  className: '',
+  customProps: {}
 };
 
 if (false) {

package/es/list/Thread/Thread.module.css

@@ -16,9 +16,15 @@
 .align_left .count {
   position: absolute;
   line-height: normal;
+  top: var(--zd_size3);
+}
+[dir=ltr] .align_left .count {
   text-align: left;
   left: var(--zd_size8);
-  top: var(--zd_size3);
+}
+[dir=rtl] .align_left .count {
+  text-align: right;
+  right: var(--zd_size8);
 }
 .align_right {
   composes: dInflex alignFend from '~@zohodesk/components/lib/common/common.module.css';
@@ -26,6 +32,12 @@
 .align_right .count {
   position: relative;
   bottom: var(--zd_size2);
+}
+[dir=ltr] .align_right .count {
   right: var(--zd_size5);
   float: right;
+}
+[dir=rtl] .align_right .count {
+  left: var(--zd_size5);
+  float: left;
 }

package/es/list/Thread/docs/Thread__default.docs.js

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Thread from '../Thread';
+export default class Thread__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(Thread, {
+      count: "1"
+    });
+  }
+
+}
+
+if (false) {
+  Thread__default.docs = {
+    folderName: 'List',
+    componentGroup: 'Thread'
+  };
+}

package/es/list/UserTime/UserTime.module.css

@@ -31,9 +31,15 @@
 }
 .iconStyle {
   display: block;
+}
+[dir=ltr] .iconStyle {
   margin-right: var(--zd_size3);
   margin-left: var(--zd_size1);
 }
+[dir=rtl] .iconStyle {
+  margin-left: var(--zd_size3);
+  margin-right: var(--zd_size1);
+}
 /* colors */
 .iconColor {
   color: var(--icon_color)

package/es/list/UserTime/docs/UserTime__default.docs.js

@@ -0,0 +1,157 @@
+import React, { Component } from 'react';
+import UserTime from '../UserTime';
+export default class UserTime__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(UserTime, {
+      to: "2018-02-28T10:12:31.000Z",
+      icon: "closedTime",
+      format: _ref => {
+        let {
+          years,
+          days,
+          months,
+          hours
+        } = _ref;
+
+        if (years == 0 && days == 0 && months == 0) {
+          return 'hh:mm A';
+        } else if (years == 0 && days < 7 && months == 0) {
+          return 'ddd DD MMM';
+        } else if (years == 0 && months > 1) {
+          return 'DD MMM';
+        }
+
+        return 'DD MMM YYYY';
+      },
+      ago: "ago",
+      later: "late"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(UserTime, {
+      to: "2018-02-28T10:12:31.000Z",
+      icon: "overdue",
+      iconColor: "red",
+      format: _ref2 => {
+        let {
+          years,
+          days,
+          months,
+          hours
+        } = _ref2;
+
+        if (years == 0 && days == 0 && months == 0) {
+          return 'hh:mm A';
+        } else if (years == 0 && days < 7 && months == 0) {
+          return 'ddd DD MMM';
+        } else if (years == 0 && months > 1) {
+          return 'DD MMM';
+        }
+
+        return 'DD MMM YYYY';
+      },
+      ago: "ago",
+      later: "late"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(UserTime, {
+      to: "2018-02-28T10:12:31.000Z",
+      icon: "createdtime",
+      iconColor: "green",
+      format: _ref3 => {
+        let {
+          years,
+          days,
+          months,
+          hours
+        } = _ref3;
+
+        if (years == 0 && days == 0 && months == 0) {
+          return 'hh:mm A';
+        } else if (years == 0 && days < 7 && months == 0) {
+          return 'ddd DD MMM';
+        } else if (years == 0 && months > 1) {
+          return 'DD MMM';
+        }
+
+        return 'DD MMM YYYY';
+      },
+      ago: "ago",
+      later: "late"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(UserTime, {
+      to: "2018-02-28T10:12:31.000Z",
+      icon: "completedTask",
+      format: _ref4 => {
+        let {
+          years,
+          days,
+          months,
+          hours
+        } = _ref4;
+
+        if (years == 0 && days == 0 && months == 0) {
+          return 'hh:mm A';
+        } else if (years == 0 && days < 7 && months == 0) {
+          return 'ddd DD MMM';
+        } else if (years == 0 && months > 1) {
+          return 'DD MMM';
+        }
+
+        return 'DD MMM YYYY';
+      },
+      ago: "ago",
+      later: "late"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(UserTime, {
+      to: "2018-02-28T10:12:31.000Z",
+      icon: "dueTime",
+      iconColor: "orange",
+      format: _ref5 => {
+        let {
+          years,
+          days,
+          months,
+          hours
+        } = _ref5;
+
+        if (years == 0 && days == 0 && months == 0) {
+          return 'hh:mm A';
+        } else if (years == 0 && days < 7 && months == 0) {
+          return 'ddd DD MMM';
+        } else if (years == 0 && months > 1) {
+          return 'DD MMM';
+        }
+
+        return 'DD MMM YYYY';
+      },
+      ago: "ago",
+      later: "late"
+    })));
+  }
+
+}
+
+if (false) {
+  UserTime__default.docs = {
+    folderName: 'List',
+    componentGroup: 'UserTime'
+  };
+}

package/es/list/listCommon.module.css

@@ -5,9 +5,12 @@
 .inlineFlex {
   composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
 }
-.avatarMargin {
+[dir=ltr] .avatarMargin {
   margin-right: var(--zd_size25);
 }
+[dir=rtl] .avatarMargin {
+  margin-left: var(--zd_size25);
+}
 .subject {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
   font-size: var(--zd_font_size16);
@@ -18,8 +21,13 @@
 }
 .statusColumn {
   composes: inlineBlockMiddle;
+}
+[dir=ltr] .statusColumn {
   text-align: right;
 }
+[dir=rtl] .statusColumn {
+  text-align: left;
+}
 .classic .floatingIconContainer {
   display: none;
 }

package/es/list/status/StatusDropdown/StatusDropdown.module.css

@@ -11,16 +11,23 @@
 .title {
   padding-top: var(--zd_size6);
 }
-.default_arrow,
-.overlay_arrow {
+[dir=ltr] .default_arrow, [dir=ltr] .overlay_arrow {
   padding: 0 0 0 var(--zd_size5);
 }
+[dir=rtl] .default_arrow, [dir=rtl] .overlay_arrow {
+  padding: 0 var(--zd_size5) 0 0;
+}
 .overlay_arrow {
   position: absolute;
-  left: 100%;
   top: 50%;
   transform: translateY(-50%) perspective(1px);
 }
+[dir=ltr] .overlay_arrow {
+  left: 100%;
+}
+[dir=rtl] .overlay_arrow {
+  right: 100%;
+}
 .hoverIcon .arrow {
   opacity: 0;
   visibility: hidden;
@@ -47,12 +54,18 @@
 .cursor {
   cursor: pointer;
 }
-.dropBoxContainer {
+[dir=ltr] .dropBoxContainer {
   text-align: left;
 }
-.iconBox {
+[dir=rtl] .dropBoxContainer {
+  text-align: right;
+}
+[dir=ltr] .iconBox {
   margin-right: var(--zd_size4);
 }
+[dir=rtl] .iconBox {
+  margin-left: var(--zd_size4);
+}
 .iconBox > i {
   display: block;
 }
@@ -61,8 +74,8 @@
   margin: 0 auto;
 }
 .seperatedLine {
-  border-bottom: 1px solid var(--zdt_statusdropdown_line_border);
   height: var(--zd_size1);
+  border-bottom: 1px solid var(--zdt_statusdropdown_line_border);
   margin: var(--zd_size9) 0 var(--zd_size10);
 }
 .hiddenInput {