@zohodesk/dot 1.0.0-beta.23 → 1.0.0-beta.230

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);
 }

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

@@ -1,168 +1,153 @@
-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 UserTime from '../UserTime';
-import { I18NProvider } from '@zohodesk/i18n';
+export default class UserTime__default extends Component {
+  constructor(props) {
+    super(props);
+  }
 
-var UserTime__default = function (_Component) {
-  _inherits(UserTime__default, _Component);
+  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;
 
-  function UserTime__default(props) {
-    _classCallCheck(this, UserTime__default);
+        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 _possibleConstructorReturn(this, (UserTime__default.__proto__ || _Object$getPrototypeOf(UserTime__default)).call(this, props));
-  }
+        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;
 
-  _createClass(UserTime__default, [{
-    key: 'render',
-    value: function render() {
-      return React.createElement(
-        I18NProvider,
-        { timeZone: 'Asia/Calcutta' },
-        React.createElement(
-          'div',
-          null,
-          React.createElement(
-            'div',
-            { style: { margin: '10px' } },
-            React.createElement(UserTime, {
-              to: '2018-02-28T10:12:31.000Z',
-              icon: 'closedTime',
-              format: function format(_ref) {
-                var years = _ref.years,
-                    days = _ref.days,
-                    months = _ref.months,
-                    hours = _ref.hours;
+        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';
+        }
 
-                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'
-            })
-          ),
-          React.createElement(
-            'div',
-            { style: { margin: '10px' } },
-            React.createElement(UserTime, {
-              to: '2018-02-28T10:12:31.000Z',
-              icon: 'overdue',
-              iconColor: 'red',
-              format: function format(_ref2) {
-                var years = _ref2.years,
-                    days = _ref2.days,
-                    months = _ref2.months,
-                    hours = _ref2.hours;
+        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'
-            })
-          ),
-          React.createElement(
-            'div',
-            { style: { margin: '10px' } },
-            React.createElement(UserTime, {
-              to: '2018-02-28T10:12:31.000Z',
-              icon: 'createdtime',
-              iconColor: 'green',
-              format: function format(_ref3) {
-                var years = _ref3.years,
-                    days = _ref3.days,
-                    months = _ref3.months,
-                    hours = _ref3.hours;
+        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';
+        }
 
-                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'
-            })
-          ),
-          React.createElement(
-            'div',
-            { style: { margin: '10px' } },
-            React.createElement(UserTime, {
-              to: '2018-02-28T10:12:31.000Z',
-              icon: 'completedTask',
-              format: function format(_ref4) {
-                var years = _ref4.years,
-                    days = _ref4.days,
-                    months = _ref4.months,
-                    hours = _ref4.hours;
+        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'
-            })
-          ),
-          React.createElement(
-            'div',
-            { style: { margin: '10px' } },
-            React.createElement(UserTime, {
-              to: '2018-02-28T10:12:31.000Z',
-              icon: 'dueTime',
-              iconColor: 'orange',
-              format: function format(_ref5) {
-                var years = _ref5.years,
-                    days = _ref5.days,
-                    months = _ref5.months,
-                    hours = _ref5.hours;
+        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';
+        }
 
-                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'
-            })
-          )
-        )
-      );
-    }
-  }]);
+        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;
 
-  return UserTime__default;
-}(Component);
+        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"
+    })));
+  }
 
-export default UserTime__default;
+}
 
 if (false) {
   UserTime__default.docs = {

package/es/list/listCommon.module.css

@@ -3,8 +3,7 @@
   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 {
   margin-right: var(--zd_size25);
@@ -12,43 +11,30 @@
 [dir=rtl] .avatarMargin {
   margin-left: var(--zd_size25);
 }
-
 .subject {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-  font-size: var(--zd_size16);
+  font-size: var(--zd_font_size16);
 }
-.secondaryText {
-  font-size: var(--zd_size12);
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-  max-width: 100%;
-  cursor: pointer;
+.secondaryPanel {
+  line-height: var(--zd_size18);
+  composes: dflex alignVertical flexwrap from '~@zohodesk/components/lib/common/common.module.css';
 }
-.blueText {
-  composes: secondaryText;
-  color: var(--zd_text_primary);
+.statusColumn {
   composes: inlineBlockMiddle;
 }
-.linkText {
-  composes: secondaryText;
-  color: var(--dot_text_shuttleGrey);
-  display: block;
-}
-.linkText:hover {
-  color: var(--zd_text_primary);
+[dir=ltr] .statusColumn {
+  text-align: right;
 }
-.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';
+[dir=rtl] .statusColumn {
+  text-align: left;
 }
 .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 +44,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;
-}