@zohodesk/dot 1.0.0-beta.18 → 1.0.0-beta.180

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

@@ -1,32 +1,19 @@
-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 PropTypes from 'prop-types';
 import TagNew from '../TagNew';
-
-var TagNew__default = function (_Component) {
-  _inherits(TagNew__default, _Component);
-
-  function TagNew__default(props) {
-    _classCallCheck(this, TagNew__default);
-
-    return _possibleConstructorReturn(this, (TagNew__default.__proto__ || _Object$getPrototypeOf(TagNew__default)).call(this, props));
+export default class TagNew__default extends Component {
+  constructor(props) {
+    super(props);
   }
 
-  _createClass(TagNew__default, [{
-    key: 'render',
-    value: function render() {
-      return React.createElement(TagNew, { text: '3 New', animate: true });
-    }
-  }]);
-
-  return TagNew__default;
-}(Component);
+  render() {
+    return /*#__PURE__*/React.createElement(TagNew, {
+      text: "3 New",
+      animate: true
+    });
+  }
 
-export default TagNew__default;
+}
 
 if (false) {
   TagNew__default.docs = {

package/es/list/Thread/Thread.js

@@ -1,60 +1,47 @@
-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 PropTypes from 'prop-types';
 import Icon from '@zohodesk/icons/lib/Icon';
+import Button from '@zohodesk/components/lib/semantic/Button/Button';
 import style from './Thread.module.css';
-
-var Thread = function (_Component) {
-  _inherits(Thread, _Component);
-
-  function Thread(props) {
-    _classCallCheck(this, Thread);
-
-    return _possibleConstructorReturn(this, (Thread.__proto__ || _Object$getPrototypeOf(Thread)).call(this, props));
+export default class Thread extends Component {
+  constructor(props) {
+    super(props);
   }
 
-  _createClass(Thread, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          threadCount = _props.count,
-          className = _props.className,
-          iconTitle = _props.iconTitle,
-          dataId = _props.dataId;
-
-      var count = threadCount === '0' ? '1' : threadCount;
-      return React.createElement(
-        'span',
-        {
-          className: style.container + ' ' + (className ? className : ''),
-          'data-title': iconTitle,
-          'data-id': dataId
-        },
-        React.createElement(Icon, { name: 'ZD-reqcount2', iconClass: style.iconSize }),
-        React.createElement(
-          'span',
-          { className: style.count },
-          count
-        )
-      );
-    }
-  }]);
-
-  return Thread;
-}(Component);
-
-export default Thread;
+  render() {
+    let {
+      count: threadCount,
+      className,
+      iconTitle,
+      dataId,
+      align
+    } = this.props;
+    let count = threadCount === '0' ? '1' : threadCount;
+    return /*#__PURE__*/React.createElement(Button, {
+      customClass: `${style.container} ${style[`align_${align}`]} ${className}`,
+      title: iconTitle,
+      dataId: dataId
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-TK-thread",
+      size: "9"
+    }), /*#__PURE__*/React.createElement("span", {
+      className: style.count
+    }, count));
+  }
 
+}
 Thread.propTypes = {
+  align: PropTypes.oneOf(['left', 'right']),
   className: PropTypes.string,
   count: PropTypes.string,
   dataId: PropTypes.string,
   iconTitle: PropTypes.string
 };
+Thread.defaultProps = {
+  align: 'left',
+  className: ''
+};
+
 if (false) {
   Thread.docs = {
     folderName: 'List',

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

@@ -1,20 +1,43 @@
+.varClass {
+  --icon_color: var(--zdt_thread_iconText);
+}
 .container {
+  composes: varClass;
   position: relative;
-  color: var(--dot_text_shuttleGrey);
+  color: var(--icon_color);
   cursor: pointer;
 }
+.container:hover {
+  --icon_color: var(--zdt_thread_hover_iconText);
+}
 .count {
-  top: var(--zd_size3);
-  font-size: var(--zd_size9);
+  font-size: var(--zd_font_size9);
+}
+.align_left .count {
   position: absolute;
   line-height: normal;
+  top: var(--zd_size3);
 }
-[dir=ltr] .count {
+[dir=ltr] .align_left .count {
+  text-align: left;
   left: var(--zd_size8);
 }
-[dir=rtl] .count {
+[dir=rtl] .align_left .count {
+  text-align: right;
   right: var(--zd_size8);
 }
-.iconSize {
-  font-size: var(--zd_size8);
+.align_right {
+  composes: dInflex alignFend from '~@zohodesk/components/lib/common/common.module.css';
+}
+.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

@@ -1,32 +1,18 @@
-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 PropTypes from 'prop-types';
 import Thread from '../Thread';
-
-var Thread__default = function (_Component) {
-  _inherits(Thread__default, _Component);
-
-  function Thread__default(props) {
-    _classCallCheck(this, Thread__default);
-
-    return _possibleConstructorReturn(this, (Thread__default.__proto__ || _Object$getPrototypeOf(Thread__default)).call(this, props));
+export default class Thread__default extends Component {
+  constructor(props) {
+    super(props);
   }
 
-  _createClass(Thread__default, [{
-    key: 'render',
-    value: function render() {
-      return React.createElement(Thread, { count: '1' });
-    }
-  }]);
-
-  return Thread__default;
-}(Component);
+  render() {
+    return /*#__PURE__*/React.createElement(Thread, {
+      count: "1"
+    });
+  }
 
-export default Thread__default;
+}
 
 if (false) {
   Thread__default.docs = {

package/es/list/UserTime/UserTime.js

@@ -1,109 +1,92 @@
-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 PropTypes from 'prop-types';
 import Icon from '@zohodesk/icons/lib/Icon';
 import { Box } from '@zohodesk/components/lib/Layout';
 import { UserTimeDiffFormat } from '@zohodesk/i18n';
-
 import style from './UserTime.module.css';
-
-var UserTime = function (_Component) {
-  _inherits(UserTime, _Component);
-
-  function UserTime(props) {
-    _classCallCheck(this, UserTime);
-
-    return _possibleConstructorReturn(this, (UserTime.__proto__ || _Object$getPrototypeOf(UserTime)).call(this, props));
+export default class UserTime extends Component {
+  constructor(props) {
+    super(props);
   }
 
-  _createClass(UserTime, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          icon = _props.icon,
-          iconColor = _props.iconColor,
-          to = _props.to,
-          today = _props.today,
-          yesterday = _props.yesterday,
-          tomorrow = _props.tomorrow,
-          others = _props.others,
-          ago = _props.ago,
-          later = _props.later,
-          format = _props.format,
-          title = _props.title,
-          textClass = _props.textClass,
-          iconClass = _props.iconClass,
-          containerClass = _props.containerClass,
-          dataId = _props.dataId;
-
-      return React.createElement(
-        'div',
-        {
-          className: style.container + ' ' + (containerClass ? containerClass : ''),
-          'data-title': title,
-          'data-id': dataId
-        },
-        icon && React.createElement(
-          Box,
-          { className: '' + style[iconColor] },
-          icon === 'closedTime' ? React.createElement(Icon, {
-            iconClass: style.iconStyle + ' ' + style.closedTime + ' ' + style.f8 + ' ' + (iconClass ? iconClass : ''),
-            name: 'ZD-closedtime1'
-          }) : icon === 'overdue' ? React.createElement(Icon, {
-            name: 'ZD-overdue',
-            iconClass: style.iconStyle + ' ' + style.f8 + ' ' + (iconClass ? iconClass : '')
-          }) : icon === 'createdTime' ? React.createElement(Icon, {
-            name: 'ZD-createdtime2',
-            iconClass: style.iconStyle + ' ' + style.f8 + ' ' + (iconClass ? iconClass : '')
-          }) : icon === 'completedTask' ? React.createElement(Icon, {
-            iconClass: style.iconStyle + ' ' + style.f8 + ' ' + style.completedTask + ' ' + (iconClass ? iconClass : ''),
-            name: 'ZD-completedTask1'
-          }) : React.createElement(Icon, {
-            name: 'ZD-dueTime',
-            iconClass: style.iconStyle + ' ' + style.f8 + ' ' + (iconClass ? iconClass : '')
-          })
-        ),
-        React.createElement(
-          Box,
-          { flexible: true },
-          React.createElement(UserTimeDiffFormat, {
-            ago: ago,
-            className: style.textStyle + ' ' + (textClass ? textClass : ''),
-            format: format,
-            later: later,
-            to: to
-          })
-        )
-      );
-    }
-  }]);
-
-  return UserTime;
-}(Component);
-
-export default UserTime;
+  render() {
+    let {
+      type,
+      page,
+      isNeedTime,
+      icon,
+      iconColor,
+      to,
+      ago,
+      later,
+      format,
+      title,
+      textClass,
+      iconClass,
+      containerClass,
+      dataId,
+      isOverdue
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${style.container} ${containerClass ? containerClass : ''}`,
+      "data-title": title,
+      "data-id": dataId
+    }, icon && /*#__PURE__*/React.createElement(Box, {
+      className: `${style.iconColor} ${style[iconColor] ? style[iconColor] : ''}`
+    }, icon === 'closedTime' ? /*#__PURE__*/React.createElement(Icon, {
+      iconClass: `${style.iconStyle} ${style.closedTime} ${style.f8} ${iconClass ? iconClass : ''}`,
+      name: "ZD-closedtime1"
+    }) : icon === 'overdue' ? /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-TK-sandClock",
+      iconClass: `${style.iconStyle} ${style.f10} ${iconClass ? iconClass : ''}`
+    }) : icon === 'createdTime' ? /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-createdtime2",
+      iconClass: `${style.iconStyle} ${style.f8} ${iconClass ? iconClass : ''}`
+    }) : icon === 'completedTask' ? /*#__PURE__*/React.createElement(Icon, {
+      iconClass: `${style.iconStyle} ${style.f8} ${style.completedTask} ${iconClass ? iconClass : ''}`,
+      name: "ZD-completedTask1"
+    }) : icon === 'onholdTime' ? /*#__PURE__*/React.createElement(Icon, {
+      iconClass: `${style.iconStyle} ${style.f10} ${iconClass ? iconClass : ''}`,
+      name: "ZD-onHold"
+    }) : icon === 'responseDueDate' ? /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-responsiveIconFinal",
+      iconClass: `${style.iconStyle} ${style.f8} ${iconClass ? iconClass : ''}`
+    }) : /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-dueTime",
+      iconClass: `${style.iconStyle} ${style.f8} ${iconClass ? iconClass : ''}`
+    })), /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement(UserTimeDiffFormat, {
+      type: type,
+      page: page,
+      isNeedTime: isNeedTime,
+      ago: ago,
+      className: `${style.textStyle} ${textClass ? textClass : ''}`,
+      format: format,
+      later: later,
+      to: to,
+      isOverdue: isOverdue
+    })));
+  }
 
+}
 UserTime.propTypes = {
   ago: PropTypes.string,
   containerClass: PropTypes.string,
-  dataId: PropTypes.dtring,
+  dataId: PropTypes.string,
   format: PropTypes.func,
   icon: PropTypes.oneOf(['closedTime', 'overdue', 'createdTime', 'completedTask', 'dueTime']),
   iconClass: PropTypes.string,
   iconColor: PropTypes.oneOf(['red', 'green', 'orange', 'gray']),
   later: PropTypes.string,
-  others: PropTypes.func,
   textClass: PropTypes.string,
   title: PropTypes.string,
-  to: PropTypes.string,
-  today: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.func]),
-  tomorrow: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.func]),
-  yesterday: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.func])
+  to: PropTypes.string
 };
+UserTime.defaultProps = {
+  dataId: 'userTime'
+};
+
 if (false) {
   UserTime.docs = {
     folderName: 'List',

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

@@ -1,49 +1,58 @@
+.varClass {
+  --text_color: var(--zdt_usertime_timeText);
+  --icon_color: var(--zdt_usertime_icon_gray);
+}
 .container {
-  composes: inlineFlex from '../listCommon.module.css';
-  composes: alignVertical from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dInflex alignBaseline from '~@zohodesk/components/lib/common/common.module.css';
   max-width: 100%;
+  composes: varClass;
 }
 .f8 {
-  font-size: var(--zd_size8);
+  font-size: var(--zd_font_size8);
 }
 .f9 {
-  font-size: var(--zd_size9);
+  font-size: var(--zd_font_size9);
+}
+.f10 {
+  font-size: var(--zd_font_size10);
 }
 .closedTime span:last-child:before,
 .completedTask span:first-child:before {
   color: inherit;
 }
 .closedTime span:first-child:before {
-  color: var(--zd_text_olive10);
+  color: var(--zdt_usertime_icon_green);
 }
 .textStyle {
-  font-size: var(--zd_size11);
-  color: var(--dot_text_shuttleGrey);
+  font-size: var(--zd_font_size12);
+  color: var(--text_color);
   display: block;
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
-
 .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)
+}
 .red {
-  color: var(--dot_text_brightRed);
+  --icon_color: var(--zdt_usertime_icon_red);
 }
 .green {
-  color: var(--dot_text_strongGreen);
+  --icon_color: var(--zdt_usertime_icon_green);
 }
 .orange {
-  color: var(--dot_text_vividOrange);
+  --icon_color: var(--zdt_usertime_icon_orange);
 }
 .gray {
-  color: var(--dot_text_shuttleGrey);
+  --icon_color: var(--zdt_usertime_icon_gray);
 }