@zohodesk/dot 1.0.0-beta.244 → 1.0.0-beta.245

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

@@ -0,0 +1,16 @@
+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,41 @@
+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,33 +1,26 @@
 .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 {
-  visibility: visible;
-  opacity: 1;
   transform: scale(1);
-}
-
-[dir=ltr] .bounceIn {
-  animation: bounceIn 700ms;
-}
-
-[dir=rtl] .bounceIn {
   animation: bounceIn 700ms;
+  visibility: visible;
+  opacity: 1;
 }
 
 @keyframes bounceIn {

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

@@ -0,0 +1,20 @@
+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.module.css

@@ -16,15 +16,9 @@
 .align_left .count {
   position: absolute;
   line-height: normal;
-  top: var(--zd_size3);
-}
-[dir=ltr] .align_left .count {
   text-align: left;
   left: var(--zd_size8);
-}
-[dir=rtl] .align_left .count {
-  text-align: right;
-  right: var(--zd_size8);
+  top: var(--zd_size3);
 }
 .align_right {
   composes: dInflex alignFend from '~@zohodesk/components/lib/common/common.module.css';
@@ -32,12 +26,6 @@
 .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,19 @@
+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,15 +31,9 @@
 }
 .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,144 @@
+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,12 +5,9 @@
 .inlineFlex {
   composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
 }
-[dir=ltr] .avatarMargin {
+.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);
@@ -21,13 +18,8 @@
 }
 .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

@@ -14,23 +14,16 @@
 .title {
   padding-top: var(--zd_size6);
 }
-[dir=ltr] .default_arrow, [dir=ltr] .overlay_arrow {
+.default_arrow,
+.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;
@@ -57,18 +50,12 @@
 .cursor {
   cursor: pointer;
 }
-[dir=ltr] .dropBoxContainer {
+.dropBoxContainer {
   text-align: left;
 }
-[dir=rtl] .dropBoxContainer {
-  text-align: right;
-}
-[dir=ltr] .iconBox {
+.iconBox {
   margin-right: var(--zd_size4);
 }
-[dir=rtl] .iconBox {
-  margin-left: var(--zd_size4);
-}
 .iconBox > i {
   display: block;
 }
@@ -77,8 +64,8 @@
   margin: 0 auto;
 }
 .seperatedLine {
-  height: var(--zd_size1);
   border-bottom: 1px solid var(--zdt_statusdropdown_line_border);
+  height: var(--zd_size1);
   margin: var(--zd_size9) 0 var(--zd_size10);
 }
 .hiddenInput {

package/es/list/status/StatusDropdown/docs/StatusDropdown__default.docs.js

@@ -0,0 +1,125 @@
+import React from 'react';
+import StatusDropdown from '../StatusDropdown';
+import { StatusText } from '../../../SecondaryText';
+export default class StatusDropdown__default extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: 'Open',
+      options: [{
+        statusType: 'Open',
+        name: 'Opensdd',
+        key: 'Opensdd',
+        statusColor: 'black'
+      }, {
+        statusType: 'Open',
+        name: 'Escalated',
+        key: 'Escalated',
+        statusColor: 'black'
+      }, {
+        statusType: 'Closed',
+        name: 'Closed',
+        key: 'Closed',
+        statusColor: 'green'
+      }, {
+        statusType: 'On Hold',
+        name: 'On Hold Status',
+        key: 'On Hold Status',
+        statusColor: 'orange'
+      }, {
+        statusType: 'Open',
+        name: 'Open',
+        key: 'Open',
+        statusColor: 'black'
+      }, {
+        statusType: 'On Hold',
+        name: 'Pending Developer Implement',
+        key: 'Pending Developer Implement',
+        statusColor: 'orange'
+      }, {
+        statusType: 'Open',
+        name: 'Inprogress',
+        key: 'Inprogress',
+        statusColor: 'black'
+      }]
+    };
+    this.onSelect = this.onSelect.bind(this);
+    this.getNextOptions = this.getNextOptions.bind(this);
+  }
+  onSelect(element, e) {
+    this.setState({
+      value: element
+    });
+  }
+  getNextOptions() {
+    this.setState({
+      options: [{
+        statusType: 'Open',
+        name: 'Opensdd',
+        key: 'Opensdd',
+        statusColor: 'black'
+      }, {
+        statusType: 'Open',
+        name: 'Escalated',
+        key: 'Escalated',
+        statusColor: 'black'
+      }, {
+        statusType: 'Closed',
+        name: 'Closed',
+        key: 'Closed',
+        statusColor: 'green'
+      }, {
+        statusType: 'On Hold',
+        name: 'On Hold Status',
+        key: 'On Hold Status',
+        statusColor: 'orange'
+      }, {
+        statusType: 'Open',
+        name: 'Open',
+        key: 'Open',
+        statusColor: 'black'
+      }, {
+        statusType: 'On Hold',
+        name: 'Pending Developer Implement',
+        key: 'Pending Developer Implement',
+        statusColor: 'orange'
+      }, {
+        statusType: 'Open',
+        name: 'Inprogress',
+        key: 'Inprogress',
+        statusColor: 'black'
+      }]
+    });
+  }
+  render() {
+    let {
+      options
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '30px',
+        display: 'inline-flex',
+        maxWidth: '200px'
+      }
+    }, /*#__PURE__*/React.createElement(StatusDropdown, {
+      value: this.state.value,
+      dataTitle: this.state.value,
+      keyName: "name",
+      onClick: this.onSelect,
+      isSearch: true,
+      title: "Status",
+      options: options,
+      isNextOptions: true,
+      getNextOptions: this.getNextOptions,
+      arrowIconPosition: "overlay",
+      isEditable: true,
+      statusColor: "statusColor",
+      placeHolderText: "Search Status"
+    }, /*#__PURE__*/React.createElement(StatusText, {
+      text: this.state.value
+    })));
+  }
+}
+StatusDropdown__default.docs = {
+  componentGroup: 'Molecule'
+};

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

@@ -2,56 +2,46 @@
   color: var(--zdt_statuslistitem_list_text);
   font-size: var(--zd_font_size13);
   position: relative;
-  list-style: none;
   cursor: pointer;
+  list-style: none;
 }
-[dir=ltr] .withBorder {
+.withBorder {
   border-left: 1px solid var(--zdt_statuslistitem_default_border);
 }
-[dir=rtl] .withBorder {
-  border-right: 1px solid var(--zdt_statuslistitem_default_border);
-}
-[dir=ltr] .small {
+.small {
   padding: var(--zd_size9) var(--zd_size3) var(--zd_size9) var(--zd_size5);
 }
-[dir=rtl] .small {
-  padding: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size3);
-}
 .medium {
   padding: var(--zd_size9) var(--zd_size20);
 }
 .large {
-  height: var(--zd_size48);
-}
-[dir=ltr] .large {
   padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25);
-}
-[dir=rtl] .large {
-  padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
+  height: var(--zd_size48);
 }
 
 .value {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
 
-[dir=ltr] .withBorder.active {
+.withBorder.active {
   border-left-color: var(--zdt_statuslistitem_default_active_border);
 }
 
-[dir=rtl] .withBorder.active {
-  border-right-color: var(--zdt_statuslistitem_default_active_border);
-}
-
-.default.hover, .default.effect:hover {
+.default.hover,
+.default.effect:hover {
   background-color: var(--zdt_statuslistitem_default_effect_bg);
 }
-.primary.hover, .primary.effect:hover, .selected {
+.primary.hover,
+.primary.effect:hover,
+.selected {
   background-color: var(--zdt_statuslistitem_primary_efffect_bg);
 }
-.secondary.hover, .secondary.effect:hover {
+.secondary.hover,
+.secondary.effect:hover {
   background-color: var(--zdt_statuslistitem_secondary_effect_bg);
 }
-.list.active.default, .list.active.primary {
+.list.active.default,
+.list.active.primary {
   background-color: var(--zdt_statuslistitem_primary_efffect_bg);
 }
 .list.active.secondary {
@@ -65,34 +55,21 @@
 .tickIcon {
   color: var(--zdt_statuslistitem_tickicon);
   position: absolute;
-}
-[dir=ltr] .tickIcon {
   right: var(--zd_size20);
 }
-[dir=rtl] .tickIcon {
-  left: var(--zd_size20);
-}
 .tickIcon > i {
   display: block;
 }
-[dir=ltr] .active.withTick {
+.active.withTick {
   padding-right: var(--zd_size39);
 }
-[dir=rtl] .active.withTick {
-  padding-left: var(--zd_size39);
-}
 /* Status Type */
 .statusType {
   width: var(--zd_size8);
   height: var(--zd_size8);
   border-radius: 50%;
-}
-[dir=ltr] .statusType {
   margin-right: var(--zd_size13);
 }
-[dir=rtl] .statusType {
-  margin-left: var(--zd_size13);
-}
 .black {
   background-color: var(--zdt_statuslistitem_black_bg);
 }

package/es/list/status/StatusListItem/docs/StatusListItem__default.docs.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import StatusListItem from '../StatusListItem';
+import { StatusText } from '../../../SecondaryText';
+export default class StatusListItem__default extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '30px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(StatusListItem, {
+      value: "On Hold",
+      bulletColor: "orange"
+    }), /*#__PURE__*/React.createElement(StatusListItem, {
+      value: "Open",
+      bulletColor: "black"
+    }), /*#__PURE__*/React.createElement(StatusListItem, {
+      value: "Closed",
+      bulletColor: "green"
+    }));
+  }
+}
+StatusListItem__default.docs = {
+  componentGroup: 'StatusListItem',
+  folderName: 'List'
+};

package/es/lookup/EmptyPage/docs/EmptyPage__account.docs.js

@@ -0,0 +1,18 @@
+/*** Libraries ***/
+import React, { Component } from 'react';
+
+/*** Components ***/
+import EmptyPage from '../EmptyPage';
+export default class EmptyPage__account extends Component {
+  render() {
+    return /*#__PURE__*/React.createElement(EmptyPage, {
+      type: "account",
+      title: "No Accounts Found"
+    });
+  }
+}
+if (false) {
+  EmptyPage__account.docs = {
+    componentGroup: 'Lookup'
+  };
+}