@zohodesk/dot 1.0.0-beta.20 → 1.0.0-beta.203

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

@@ -1,13 +1,23 @@
+.varClass {
+  --borderColor: var(--zdt_subtablayout_border);
+}
 .tabHead,
 .shadowStyle {
   position: relative;
-  background: var(--dot_bg_white);
+  composes: varClass;
+}
+.tabHead, .shadowStyle {
+  background: var(--zdt_subtablayout_tabhead_bg);
 }
 
-.left {
+[dir=ltr] .left {
   margin-right: var(--zd_size15);
 }
 
+[dir=rtl] .left {
+  margin-left: var(--zd_size15);
+}
+
 .plusIconLine {
   position: relative;
   z-index: 2;
@@ -16,28 +26,46 @@
 .plusIconLine::before {
   position: absolute;
   content: '';
-  left: var(--zd_size20);
-  background: var(--zd_bg_smoke3);
   width: var(--zd_size1);
   height: var(--zd_size28);
   top: var(--zd_size38);
   z-index: -1;
+  background: var(--zdt_subtablayout_plusicon_bg);
+}
+
+[dir=ltr] .plusIconLine::before {
+  left: var(--zd_size20);
+}
+
+[dir=rtl] .plusIconLine::before {
+  right: var(--zd_size20);
 }
 
-.borderStyle {
-  border-bottom: 1px solid var(--zd_border_smoke5);
+.primary_borderStyle, .secondary_borderStyle {
+  border-bottom: 1px solid var(--zdt_subtablayout_primary_border);
+}
+.tertiary_borderStyle {
+  border-bottom: 1px solid var(--borderColor);
 }
 
 .shadowStyle::before {
-  box-shadow: 0 0 6px var(--zd_shadow_graytrans5);
-  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(--zdt_subtablayout_shadowstyle_box_shadow);
+  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 {
@@ -45,22 +73,74 @@
 }
 
 .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);
 }
 
-.primary {
-  padding: var(--zd_size27) var(--zd_size25) var(--zd_size26) var(--zd_size25);
+[dir=ltr] .primary, [dir=ltr] .primary_peek, [dir=ltr] .secondary, [dir=ltr] .secondary_peek, [dir=ltr] .primary_detailFooter, [dir=ltr] .primary_peekFooter, [dir=ltr] .secondary_detailFooter, [dir=ltr] .secondary_peekFooter {
+  padding-left: var(--zd_size25);
 }
 
-.secondary {
-  padding: var(--zd_size27) var(--zd_size115) var(--zd_size26) var(--zd_size25);
+[dir=rtl] .primary, [dir=rtl] .primary_peek, [dir=rtl] .secondary, [dir=rtl] .secondary_peek, [dir=rtl] .primary_detailFooter, [dir=rtl] .primary_peekFooter, [dir=rtl] .secondary_detailFooter, [dir=rtl] .secondary_peekFooter {
+  padding-right: var(--zd_size25);
+}
+[dir=ltr] .primary, [dir=ltr] .primary_peek {
+  padding-right: var(--zd_size25);
+}
+[dir=rtl] .primary, [dir=rtl] .primary_peek {
+  padding-left: var(--zd_size25);
+}
+[dir=ltr] .secondary, [dir=ltr] .secondary_peek {
+  padding-right: var(--zd_size115);
+}
+[dir=rtl] .secondary, [dir=rtl] .secondary_peek {
+  padding-left: var(--zd_size115);
+}
+[dir=ltr] .primary_detailFooter, [dir=ltr] .primary_peekFooter {
+  padding-right: var(--zd_size25);
+}
+[dir=rtl] .primary_detailFooter, [dir=rtl] .primary_peekFooter {
+  padding-left: var(--zd_size25);
+}
+[dir=ltr] .secondary_detailFooter, [dir=ltr] .secondary_peekFooter {
+  padding-right: var(--zd_size115);
+}
+[dir=rtl] .secondary_detailFooter, [dir=rtl] .secondary_peekFooter {
+  padding-left: 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);
 }
 .cursor {
   cursor: pointer;
 }
+.footer {
+  composes: varClass;
+  border-top: 1px solid var(--borderColor);
+}
+.medium {
+  height: var(--zd_size40);
+}
+.large {
+  height: var(--zd_size45);
+}
+.xlarge {
+  height: var(--zd_size50);
+}

package/es/layout/SubtabLayout/docs/SubtabLayout__default.docs.js

@@ -1,191 +1,67 @@
-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 { SubtabLayout, SubtabHeader, SubtabContent } from '../';
-
-var SubtabLayout__default = function (_React$Component) {
-  _inherits(SubtabLayout__default, _React$Component);
-
-  function SubtabLayout__default(props) {
-    _classCallCheck(this, SubtabLayout__default);
-
-    var _this = _possibleConstructorReturn(this, (SubtabLayout__default.__proto__ || _Object$getPrototypeOf(SubtabLayout__default)).call(this, props));
-
-    _this.state = { needBorder: true, needShadow: false };
-    _this.onScroll = _this.onScroll.bind(_this);
-    _this.interval = null;
-    return _this;
+import { SubtabLayout, SubtabHeader, SubtabContent, SubtabFooter } from '../';
+export default class SubtabLayout__default extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      needBorder: true,
+      needShadow: false
+    };
+    this.onScroll = this.onScroll.bind(this);
+    this.interval = null;
   }
 
-  _createClass(SubtabLayout__default, [{
-    key: 'onScroll',
-    value: function onScroll() {
-      var _this2 = this;
-
-      this.setState({ needBorder: true, needShadow: true });
-      this.interval = null;
-      var intern = setTimeout(function () {
-        clearInterval(_this2.interval);
-        _this2.setState({ needBorder: true, needShadow: false });
-      }, 500);
-      this.interval = intern;
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var boxStyle = {
-        padding: 'var(--zd_size21)'
-      };
-      var _state = this.state,
-          needShadow = _state.needShadow,
-          needBorder = _state.needBorder;
-
-
-      return React.createElement(
-        'div',
-        { style: { height: '100vh', width: '100%' } },
-        React.createElement(
-          SubtabLayout,
-          null,
-          React.createElement(SubtabHeader, { needShadow: needShadow, needBorder: needBorder }),
-          React.createElement(
-            SubtabContent,
-            null,
-            React.createElement(
-              'div',
-              {
-                onScroll: this.onScroll,
-                style: { height: '100%', width: '100%' }
-              },
-              React.createElement(
-                'div',
-                { style: boxStyle },
-                'box 1'
-              ),
-              React.createElement(
-                'div',
-                { style: boxStyle },
-                'box 1'
-              ),
-              React.createElement(
-                'div',
-                { style: boxStyle },
-                'box 2'
-              ),
-              React.createElement(
-                'div',
-                { style: boxStyle },
-                'box 3345'
-              ),
-              React.createElement(
-                'div',
-                { style: boxStyle },
-                'box 1'
-              ),
-              React.createElement(
-                'div',
-                { style: boxStyle },
-                'box 1'
-              ),
-              React.createElement(
-                'div',
-                { style: boxStyle },
-                'box 1'
-              ),
-              React.createElement(
-                'div',
-                { style: boxStyle },
-                'box 1'
-              ),
-              React.createElement(
-                'div',
-                { style: boxStyle },
-                'box 1'
-              ),
-              React.createElement(
-                'div',
-                { style: boxStyle },
-                'box 1'
-              ),
-              React.createElement(
-                'div',
-                { style: boxStyle },
-                'box 1'
-              ),
-              React.createElement(
-                'div',
-                { style: boxStyle },
-                'box 1'
-              ),
-              React.createElement(
-                'div',
-                { style: boxStyle },
-                'box 1'
-              ),
-              React.createElement(
-                'div',
-                { style: boxStyle },
-                'box 1'
-              ),
-              React.createElement(
-                'div',
-                { style: boxStyle },
-                'box 1'
-              ),
-              React.createElement(
-                'div',
-                { style: boxStyle },
-                'box 1'
-              ),
-              React.createElement(
-                'div',
-                { style: boxStyle },
-                'box 1'
-              ),
-              React.createElement(
-                'div',
-                { style: boxStyle },
-                'box 1'
-              ),
-              React.createElement(
-                'div',
-                { style: boxStyle },
-                'box 1'
-              ),
-              React.createElement(
-                'div',
-                { style: boxStyle },
-                'box 1'
-              ),
-              React.createElement(
-                'div',
-                { style: boxStyle },
-                'box 1'
-              ),
-              React.createElement(
-                'div',
-                { style: boxStyle },
-                'box 1'
-              )
-            )
-          )
-        )
-      );
-    }
-  }]);
-
-  return SubtabLayout__default;
-}(React.Component);
+  onScroll() {
+    this.setState({
+      needBorder: true,
+      needShadow: true
+    });
+    this.interval = null;
+    let intern = setTimeout(() => {
+      clearInterval(this.interval);
+      this.setState({
+        needBorder: true,
+        needShadow: false
+      });
+    }, 500);
+    this.interval = intern;
+  }
 
-export default SubtabLayout__default;
+  render() {
+    let boxStyle = {
+      padding: 'var(--zd_size21)'
+    };
+    let {
+      needShadow,
+      needBorder
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        height: '100vh',
+        width: '100%'
+      }
+    }, /*#__PURE__*/React.createElement(SubtabLayout, null, /*#__PURE__*/React.createElement(SubtabHeader, {
+      needShadow: needShadow,
+      needBorder: needBorder
+    }), /*#__PURE__*/React.createElement(SubtabContent, null, /*#__PURE__*/React.createElement("div", {
+      onScroll: this.onScroll,
+      style: {
+        height: '100%',
+        width: '100%'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: boxStyle
+    }, "box 1"), /*#__PURE__*/React.createElement("div", {
+      style: boxStyle
+    }, "box 1"), /*#__PURE__*/React.createElement("div", {
+      style: boxStyle
+    }, "box 2"))), /*#__PURE__*/React.createElement(SubtabFooter, null, "Footer")));
+  }
 
+}
 
 if (false) {
   SubtabLayout__default.docs = {
-    componentGroup: 'Template',
-    folderName: 'Style Guide'
+    componentGroup: 'Template'
   };
 }

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,88 +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;
-
-      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
-      });
-    }
-  }]);
-
-  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,
@@ -92,12 +87,16 @@ AvatarFlip.propTypes = {
   onClick: PropTypes.func,
   palette: PropTypes.oneOf(['primary', 'secondary', 'info', 'default']),
   size: PropTypes.string,
-  src: 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);
 }