@zohodesk/dot 1.0.0-beta.21 → 1.0.0-beta.210

package/es/list/TagNew/TagNew.js

@@ -1,55 +1,39 @@
-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 style from './TagNew.module.css';
-
-var TagNew = function (_Component) {
-  _inherits(TagNew, _Component);
-
-  function TagNew(props) {
-    _classCallCheck(this, TagNew);
-
-    return _possibleConstructorReturn(this, (TagNew.__proto__ || _Object$getPrototypeOf(TagNew)).call(this, props));
+export default class TagNew extends Component {
+  constructor(props) {
+    super(props);
   }
 
-  _createClass(TagNew, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          className = _props.className,
-          text = _props.text,
-          animate = _props.animate,
-          onClick = _props.onClick;
-
-      return React.createElement(
-        'div',
-        {
-          className: style.tagStyle + ' ' + (animate ? style.bounceIn : '') + ' ' + (className ? className : ''),
-          onClick: onClick
-        },
-        text
-      );
-    }
-  }]);
-
-  return TagNew;
-}(Component);
-
-export default TagNew;
+  render() {
+    let {
+      className,
+      text,
+      animate,
+      onClick,
+      dataId
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${style.tagStyle} ${animate ? style.bounceIn : ''} ${className ? className : ''}`,
+      onClick: onClick,
+      "data-id": dataId
+    }, text);
+  }
 
+}
 TagNew.propTypes = {
   animate: PropTypes.bool,
   className: PropTypes.string,
+  dataId: PropTypes.string,
   onClick: PropTypes.func,
   text: PropTypes.string
 };
 TagNew.defaultProps = {
-  animate: false
+  animate: false,
+  dataId: 'TagNew'
 };
+
 if (false) {
   TagNew.docs = {
     folderName: 'List',

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_size13);
-  color: var(--dot_text_white);
+  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';
-  transition: all 0.25s ease 0s;
+  transform: scale(0);
+  transition: all var(--zd_transition2) ease 0s;
   opacity: 0;
   visibility: hidden;
-  border-radius: var(--zd_size14);
-  background-color: var(--zd_bg_primary);
-  box-shadow: 0 8px 30px 0 rgba(10, 115, 235, 0.4);
-  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/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,31 @@
+.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;
-}
-[dir=ltr] .count {
+  text-align: left;
   left: var(--zd_size8);
+  top: var(--zd_size3);
 }
-[dir=rtl] .count {
-  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);
+  right: var(--zd_size5);
+  float: right;
+}

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,52 @@
+.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);
-}
-
-[dir=rtl] .iconStyle {
-  margin-left: var(--zd_size3);
+  margin-left: 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);
 }

package/es/list/listCommon.module.css

@@ -3,52 +3,30 @@
   vertical-align: middle;
 }
 .inlineFlex {
-  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
-  composes: alignVertical from '~@zohodesk/components/lib/common/common.module.css';
+  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_size16);
-}
-.secondaryText {
-  font-size: var(--zd_size12);
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-  max-width: 100%;
-  cursor: pointer;
-}
-.blueText {
-  composes: secondaryText;
-  color: var(--zd_text_primary);
-  composes: inlineBlockMiddle;
-}
-.linkText {
-  composes: secondaryText;
-  color: var(--dot_text_shuttleGrey);
-  display: block;
-}
-.linkText:hover {
-  color: var(--zd_text_primary);
+  font-size: var(--zd_font_size16);
 }
 .secondaryPanel {
-  min-height: var(--zd_size21);
   line-height: var(--zd_size18);
-  composes: dflex from '~@zohodesk/components/lib/common/common.module.css';
-  composes: alignVertical from '~@zohodesk/components/lib/common/common.module.css';
-  composes: flexwrap from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dflex alignVertical flexwrap from '~@zohodesk/components/lib/common/common.module.css';
+}
+.statusColumn {
+  composes: inlineBlockMiddle;
+  text-align: right;
 }
 .classic .floatingIconContainer {
   display: none;
 }
 .compact .floatingIconContainer,
 .superCompact .floatingIconContainer,
-.listContainer:hover .classic .floatingIconContainer {
+.listContainer:hover .classic .floatingIconContainer,
+.hoveredStyle .classic .floatingIconContainer {
   display: inline-flex;
   align-items: center;
 }
@@ -58,35 +36,17 @@
   visibility: hidden;
 }
 .floatingIcons {
-  font-size: var(--zd_size13);
+  font-size: var(--zd_font_size15);
 }
-.listContainer {
+.listContainer, .listLayoutContainer {
   position: relative;
-  transition: 0.5s all ease;
+  transition: var(--zd_transition3) all ease;
 }
 .listContainer:hover .compact .floatingIconContainer,
-.listContainer:hover .superCompact .floatingIconContainer {
+.listContainer:hover .superCompact .floatingIconContainer,
+.hoveredStyle .compact .floatingIconContainer,
+.hoveredStyle .superCompact .floatingIconContainer 
+ {
   opacity: 1;
   visibility: visible;
 }
-.assignPopup {
-  composes: inlineBlockMiddle;
-}
-.default {
-  color: var(--zd_text_smoke18);
-}
-.primary {
-  color: var(--zd_text_olive6);
-}
-.danger {
-  color: var(--zd_text_danger);
-}
-.statusColumn {
-  composes: inlineBlockMiddle;
-}
-[dir=ltr] .statusColumn {
-  text-align: right;
-}
-[dir=rtl] .statusColumn {
-  text-align: left;
-}