@zohodesk/dot 1.0.0-beta.22 → 1.0.0-beta.223

package/es/layout/SubtabLayout/SubtabLayout.module.css

@@ -1,18 +1,17 @@
+.varClass {
+  --borderColor: var(--zdt_subtablayout_border);
+}
 .tabHead,
 .shadowStyle {
   position: relative;
-}.tabHead, .shadowStyle {
-  background: var(--dot_bg_white);
+  composes: varClass;
+  background: var(--zdt_subtablayout_tabhead_bg);
 }
 
-[dir=ltr] .left {
+.left {
   margin-right: var(--zd_size15);
 }
 
-[dir=rtl] .left {
-  margin-left: var(--zd_size15);
-}
-
 .plusIconLine {
   position: relative;
   z-index: 2;
@@ -21,43 +20,32 @@
 .plusIconLine::before {
   position: absolute;
   content: '';
+  left: var(--zd_size20);
+  background: var(--zdt_subtablayout_plusicon_bg);
   width: var(--zd_size1);
   height: var(--zd_size28);
   top: var(--zd_size38);
   z-index: -1;
-  background: var(--zd_bg_smoke3);
-}
-
-[dir=ltr] .plusIconLine::before {
-  left: var(--zd_size20);
 }
 
-[dir=rtl] .plusIconLine::before {
-  right: var(--zd_size20);
+.primary_borderStyle,
+.secondary_borderStyle {
+  border-bottom: 1px solid var(--zdt_subtablayout_primary_border);
 }
-
-.borderStyle {
-  border-bottom: 1px solid var(--zd_border_smoke5);
+.tertiary_borderStyle {
+  border-bottom: 1px solid var(--borderColor);
 }
 
 .shadowStyle::before {
+  box-shadow: 0 0 6px var(--zdt_subtablayout_shadowstyle_box_shadow);
+  border-radius: 100px/10px;
   bottom: 0;
   content: '';
+  left: var(--zd_size50);
   position: absolute;
+  right: var(--zd_size50);
   top: var(--zd_size20);
   z-index: -1;
-  box-shadow: 0 0 6px var(--zd_shadow_graytrans5);
-  border-radius: 100px/10px;
-}
-
-[dir=ltr] .shadowStyle::before {
-  left: var(--zd_size50);
-  right: var(--zd_size50);
-}
-
-[dir=rtl] .shadowStyle::before {
-  right: var(--zd_size50);
-  left: var(--zd_size50);
 }
 
 .aside {
@@ -65,26 +53,68 @@
 }
 
 .title {
-  color: var(--zd_text_primary);
-  font-size: var(--zd_size15);
+  color: var(--zdt_subtablayout_title_text);
+  font-size: var(--zd_font_size15);
 }
 
 .label {
-  font-size: var(--zd_size12);
-  color: var(--zd_text_smoke18);
+  font-size: var(--zd_font_size12);
+  color: var(--zdt_subtablayout_label_text);
+}
+
+.primary,
+.primary_peek,
+.secondary,
+.secondary_peek,
+.primary_detailFooter,
+.primary_peekFooter,
+.secondary_detailFooter,
+.secondary_peekFooter {
+  padding-top: var(--zd_size27);
+  padding-bottom: var(--zd_size26);
+  padding-left: var(--zd_size25);
+}
+.primary,
+.primary_peek {
+  padding-right: var(--zd_size25);
+}
+.secondary,
+.secondary_peek {
+  padding-right: var(--zd_size115);
+}
+.primary_detailFooter,
+.primary_peekFooter {
+  padding-right: var(--zd_size25);
+}
+.secondary_detailFooter,
+.secondary_peekFooter {
+  padding-right: var(--zd_size115);
+}
+.tertiary,
+.tertiary_peek {
+  height: var(--zd_size50);
+}
+.tertiary,
+.tertiary_detailFooter {
+  padding: 0 var(--zd_size65);
+}
+.tertiary_peek,
+.tertiary_peekFooter {
+  padding: 0 var(--zd_size42);
 }
-
-.primary {
-  padding: var(--zd_size27) var(--zd_size25) var(--zd_size26) var(--zd_size25);
+.cursor {
+  cursor: pointer;
 }
-
-[dir=ltr] .secondary {
-  padding: var(--zd_size27) var(--zd_size115) var(--zd_size26) var(--zd_size25);
+.footer {
+  composes: varClass;
+  border-top: 1px solid var(--borderColor);
 }
-
-[dir=rtl] .secondary {
-  padding: var(--zd_size27) var(--zd_size25) var(--zd_size26) var(--zd_size115);
+.medium {
+  height: var(--zd_size40);
 }
-.cursor {
-  cursor: pointer;
+.large {
+  height: var(--zd_size45);
+}
+.xlarge {
+  height: var(--zd_size50);
 }

package/es/layout/SubtabLayout/index.js

@@ -1,3 +1,4 @@
 export { default as SubtabLayout } from './SubtabLayout';
 export { SubtabHeader } from './SubtabLayout';
-export { SubtabContent } from './SubtabLayout';
+export { SubtabContent } from './SubtabLayout';
+export { SubtabFooter } from './SubtabLayout';

package/es/list/AvatarFlip/AvatarFlip.js

@@ -1,90 +1,83 @@
-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 FlipCard from '../../FlipCard/FlipCard';
 import style from './AvatarFlip.module.css';
-
-var AvatarFlip = function (_Component) {
-  _inherits(AvatarFlip, _Component);
-
-  function AvatarFlip() {
-    _classCallCheck(this, AvatarFlip);
-
-    return _possibleConstructorReturn(this, (AvatarFlip.__proto__ || _Object$getPrototypeOf(AvatarFlip)).apply(this, arguments));
+export default class AvatarFlip extends Component {
+  render() {
+    let {
+      id,
+      action,
+      name,
+      isChecked,
+      onChange,
+      noNeedFlip,
+      size,
+      onClick,
+      isPaidUser,
+      isPortalUser,
+      channel,
+      src,
+      icon,
+      initial,
+      dataId,
+      className,
+      palette,
+      textPalette,
+      customTextClass,
+      frontClass,
+      needTitle,
+      tourId,
+      iconSize,
+      isFilledCheckbox,
+      channelTitle
+    } = this.props;
+    return /*#__PURE__*/React.createElement(FlipCard, {
+      id: id,
+      action: action,
+      name: name,
+      initial: initial,
+      isChecked: isChecked,
+      onChange: onChange,
+      noNeedFlip: noNeedFlip,
+      size: size,
+      onClick: onClick,
+      isPaidUser: isPaidUser,
+      isPortalUser: isPortalUser,
+      channel: channel,
+      src: src,
+      icon: icon,
+      iconSize: iconSize,
+      iconClass: `${style.iconStyle}`,
+      dataId: dataId,
+      ticListContainer: "tic-list-filp-cont",
+      ticList: "tic-list-filp",
+      className: className,
+      palette: palette,
+      textPalette: textPalette,
+      customTextClass: customTextClass,
+      frontClass: frontClass,
+      needTitle: needTitle,
+      tourId: tourId,
+      isFilledCheckbox: isFilledCheckbox,
+      channelTitle: channelTitle
+    });
   }
 
-  _createClass(AvatarFlip, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          id = _props.id,
-          action = _props.action,
-          name = _props.name,
-          isChecked = _props.isChecked,
-          onChange = _props.onChange,
-          noNeedFlip = _props.noNeedFlip,
-          size = _props.size,
-          onClick = _props.onClick,
-          isPaidUser = _props.isPaidUser,
-          isPortalUser = _props.isPortalUser,
-          channel = _props.channel,
-          src = _props.src,
-          icon = _props.icon,
-          initial = _props.initial,
-          dataId = _props.dataId,
-          className = _props.className,
-          palette = _props.palette,
-          frontClass = _props.frontClass,
-          needTitle = _props.needTitle,
-          tourId = _props.tourId;
-
-      return React.createElement(FlipCard, {
-        id: id,
-        action: action,
-        name: name,
-        initial: initial,
-        isChecked: isChecked,
-        onChange: onChange,
-        noNeedFlip: noNeedFlip,
-        size: size,
-        onClick: onClick,
-        isPaidUser: isPaidUser,
-        isPortalUser: isPortalUser,
-        channel: channel,
-        src: src,
-        icon: icon,
-        iconClass: '' + style.iconStyle,
-        dataId: dataId,
-        ticListContainer: 'tic-list-filp-cont',
-        ticList: 'tic-list-filp',
-        className: className,
-        palette: palette,
-        frontClass: frontClass,
-        needTitle: needTitle,
-        tourId: tourId
-      });
-    }
-  }]);
-
-  return AvatarFlip;
-}(Component);
-
-export default AvatarFlip;
-
+}
 AvatarFlip.propTypes = {
   action: PropTypes.string,
   channel: PropTypes.string,
+  channelTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   className: PropTypes.string,
+  customTextClass: PropTypes.string,
   dataId: PropTypes.string,
   frontClass: PropTypes.string,
   icon: PropTypes.string,
+  iconSize: PropTypes.string,
   id: PropTypes.string.isRequired,
   initial: PropTypes.string,
   isChecked: PropTypes.bool,
+  isFilledCheckbox: PropTypes.bool,
   isPaidUser: PropTypes.bool,
   isPortalUser: PropTypes.bool,
   name: PropTypes.string,
@@ -95,12 +88,15 @@ AvatarFlip.propTypes = {
   palette: PropTypes.oneOf(['primary', 'secondary', 'info', 'default']),
   size: PropTypes.string,
   src: PropTypes.string,
+  textPalette: PropTypes.oneOf(['white', 'black']),
   tourId: PropTypes.string
 };
 AvatarFlip.defaultProps = {
   size: 'xmedium',
-  noNeedFlip: false
+  noNeedFlip: false,
+  iconSize: '21'
 };
+
 if (false) {
   AvatarFlip.docs = {
     folderName: 'List',

package/es/list/AvatarFlip/AvatarFlip.module.css

@@ -1,15 +1,3 @@
-.taskNone {
-  font-size: var(--zd_size18);
-}
-.taskMeeting {
-  font-size: var(--zd_size19);
-}
-.taskCall {
-  font-size: var(--zd_size15);
-}
-.taskDemo {
-  font-size: var(--zd_size17);
-}
 .iconStyle {
-  color: var(--dot_text_black);
+  color: var(--zdt_avatarflip_default_text);
 }

package/es/list/BluePrintStatus/BluePrintStatus.js

@@ -1,50 +1,32 @@
-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 from 'react';
 import PropTypes from 'prop-types';
 import style from './BluePrintStatus.module.css';
 import Icon from '@zohodesk/icons/lib/Icon';
-
-var BluePrintStatus = function (_React$Component) {
-  _inherits(BluePrintStatus, _React$Component);
-
-  function BluePrintStatus(props) {
-    _classCallCheck(this, BluePrintStatus);
-
-    return _possibleConstructorReturn(this, (BluePrintStatus.__proto__ || _Object$getPrototypeOf(BluePrintStatus)).call(this, props));
+export default class BluePrintStatus extends React.Component {
+  constructor(props) {
+    super(props);
   }
 
-  _createClass(BluePrintStatus, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          isOverdue = _props.isOverdue,
-          title = _props.title;
-
-      return React.createElement(
-        'span',
-        {
-          className: style.container + ' ' + (isOverdue ? style.danger : style.default)
-        },
-        React.createElement(Icon, { name: 'ZD-blueprint', title: title, iconClass: style.iconStyle })
-      );
-    }
-  }]);
-
-  return BluePrintStatus;
-}(React.Component);
-
-export default BluePrintStatus;
+  render() {
+    let {
+      title
+    } = this.props;
+    return /*#__PURE__*/React.createElement("span", {
+      className: `${style.container}`
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-blueprint",
+      title: title,
+      iconClass: style.iconStyle
+    }));
+  }
 
+}
 BluePrintStatus.propTypes = {
-  isOverdue: PropTypes.bool,
   title: PropTypes.string
 };
+
 if (false) {
   BluePrintStatus.docs = {
-    componentGroup: ''
+    componentGroup: 'Atom'
   };
 }

package/es/list/BluePrintStatus/BluePrintStatus.module.css

@@ -1,15 +1,14 @@
-[dir=ltr] .container {
+.container {
   padding-right: var(--zd_size5);
-}[dir=rtl] .container {
-  padding-left: var(--zd_size5);
+  display: inherit;
 }
-.danger {
-  color: var(--dot_text_brightRed);
+/* .danger {
+  color: var(--dot_brightRed);
 }
 .default {
-  color: var(--dot_text_shuttleGrey);
-}
+  color: var(--dot_shuttleGrey);
+} */
 .iconStyle {
   display: block;
-  font-size: var(--zd_size10);
+  font-size: var(--zd_font_size10);
 }

package/es/list/Comment/Comment.js

@@ -1,78 +1,49 @@
-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 { RestrictionValidator } from '@zohodesk/permissions';
-
 import { i18NProviderUtils } from '@zohodesk/i18n';
-
+import Button from '@zohodesk/components/lib/semantic/Button/Button';
 import style from './Comment.module.css';
-
-var Comment = function (_Component) {
-  _inherits(Comment, _Component);
-
-  function Comment(props) {
-    _classCallCheck(this, Comment);
-
-    return _possibleConstructorReturn(this, (Comment.__proto__ || _Object$getPrototypeOf(Comment)).call(this, props));
+export default class Comment extends Component {
+  constructor(props) {
+    super(props);
   }
 
-  _createClass(Comment, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          count = _props.count,
-          onClick = _props.onClick,
-          _props$features = _props.features,
-          features = _props$features === undefined ? [] : _props$features,
-          _props$module = _props.module,
-          module = _props$module === undefined ? 'tickets' : _props$module;
-
-      var i18N = i18NProviderUtils.getI18NValue;
-      var commentCount = parseInt(count);
-      var commentTitle = !commentCount ? i18N('tabs.request.comment') : commentCount > 1 ? i18N('support.comment.many.count', count) : i18N('support.comment.count.one');
-      return React.createElement(
-        RestrictionValidator,
-        {
-          features: features,
-          module: module,
-          action: 'show_comment'
-        },
-        React.createElement(
-          'div',
-          {
-            className: style.container,
-            onClick: onClick,
-            'data-id': 'commentLstContainer',
-            'data-title': commentTitle
-          },
-          React.createElement(Icon, { name: 'ZD-comments1', iconClass: style.commentIcon }),
-          count && React.createElement(
-            'span',
-            { className: style.count },
-            count
-          )
-        )
-      );
-    }
-  }]);
-
-  return Comment;
-}(Component);
-
-export default Comment;
+  render() {
+    let {
+      count,
+      onClick,
+      className
+    } = this.props;
+    let i18N = i18NProviderUtils.getI18NValue;
+    let commentCount = parseInt(count);
+    let commentTitle = !commentCount ? i18N('tabs.request.comment') : commentCount > 1 ? i18N('support.comment.many', count) : i18N('support.comment.one');
+    return /*#__PURE__*/React.createElement(Button, {
+      customClass: `${style.container} ${className} `,
+      onClick: onClick,
+      dataId: "commentLstContainer",
+      title: commentTitle
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-TK-commentLine",
+      iconClass: style.commentIcon
+    }), count && /*#__PURE__*/React.createElement("span", {
+      className: style.count
+    }, count));
+  }
 
+}
+Comment.defaultProps = {
+  className: ''
+};
 Comment.propTypes = {
+  className: PropTypes.string,
   count: PropTypes.string,
   features: PropTypes.array,
   iconTitle: PropTypes.string,
   module: PropTypes.string,
   onClick: PropTypes.func
 };
+
 if (false) {
   Comment.docs = {
     folderName: 'List',

package/es/list/Comment/Comment.module.css

@@ -1,22 +1,24 @@
+.varClass {
+  --icon_color: var(--zdt_comment_iconText);
+}
 .container {
-  composes: inlineBlockMiddle from "../listCommon.module.css";
+  composes: varClass;
+  composes: inlineBlockMiddle from '../listCommon.module.css';
   position: relative;
-  color: var(--dot_text_shuttleGrey);
+  color: var(--icon_color);
   padding: 0 var(--zd_size2);
   cursor: pointer;
 }
+.container:hover {
+  --icon_color: var(--zdt_comment_hover_iconText);
+}
 .count {
   position: absolute;
-  top: 0;
-  font-size: var(--zd_size9);
+  top: var(--zd_size1);
+  font-size: var(--zd_font_size9);
   text-align: center;
-}
-[dir=ltr] .count {
   left: 100%;
 }
-[dir=rtl] .count {
-  right: 100%;
-}
 .commentIcon {
-  font-size: var(--zd_size10);
+  font-size: var(--zd_font_size13);
 }