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

package/es/layout/SetupDetailLayout/SetupDetailLayout.module.css

@@ -1,7 +1,7 @@
 .header {
   height: var(--zd_size50);
-  border-bottom: 1px solid var(--zd_border_smoke59);
   z-index: 2;
+  border-bottom: 1px solid var(--zdt_setupdetail_header_border);
 }
 .back {
   width: var(--zd_size60);
@@ -9,27 +9,37 @@
 .backIcon {
   height: var(--zd_size30);
   width: var(--zd_size30);
-  font-size: var(--zd_size12);
+  font-size: var(--zd_font_size12);
   display: inline-block;
+  color: var(--zdt_setupdetail_backicon);
+  line-height: var(--zd_size30);
   text-align: center;
-  color: var(--zd_text_dark4);
-  margin-left: var(--zd_size19);
   border-radius: 50%;
-  line-height: var(--zd_size30);
   cursor: pointer;
 }
+[dir=ltr] .backIcon {
+  margin-left: var(--zd_size19);
+}
+[dir=rtl] .backIcon {
+  margin-right: var(--zd_size19);
+}
 
 .backIcon:hover {
-  background-color: var(--zd_bg_smoke64);
+  background-color: var(--zdt_setupdetail_hover_backicon_bg);
 }
 .title {
-  font-size: var(--zd_size16);
+  font-size: var(--zd_font_size16);
   line-height: var(--zd_size16);
-  padding-right: var(--zd_size12);
   font-family: var(--zd_semibold);
-  color: var(--zd_text_dark4);
+  color: var(--zdt_setupdetail_backicon);
   composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
 }
+[dir=ltr] .title {
+  padding-right: var(--zd_size12);
+}
+[dir=rtl] .title {
+  padding-left: var(--zd_size12);
+}
 
 .rightPanel {
   composes: justifyFend from '~@zohodesk/components/lib/common/common.module.css';
@@ -37,42 +47,60 @@
 .helpInfoCont {
   position: absolute;
   z-index: 10;
+}
+[dir=ltr] .helpInfoCont {
   right: 0;
   padding: var(--zd_size12) var(--zd_size15) 0 0;
 }
+[dir=rtl] .helpInfoCont {
+  left: 0;
+  padding: var(--zd_size12) 0 0 var(--zd_size15);
+}
 .helpInfo {
-  border: 1px solid var(--zd_border_smoke29);
-  border-radius: 2px;
   line-height: var(--zd_size26);
   height: var(--zd_size28);
   width: var(--zd_size28);
-  color: var(--zd_text_dark6);
-  font-size: var(--zd_size11);
+  color: var(--zdt_setupdetail_helpinfo_text);
+  font-size: var(--zd_font_size11);
+  display: inline-block;
+  border: 1px solid var(--zdt_setupdetail_helpinfo);
+  border-radius: 2px;
   text-align: center;
   cursor: pointer;
-  display: inline-block;
 }
-.mr15 {
+[dir=ltr] .mr15 {
   margin-right: var(--zd_size15);
 }
+[dir=rtl] .mr15 {
+  margin-left: var(--zd_size15);
+}
 
 .content {
   z-index: 1;
 }
-.padding {
+[dir=ltr] .padding {
   padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size60);
 }
+[dir=rtl] .padding {
+  padding: var(--zd_size10) var(--zd_size60) var(--zd_size10) var(--zd_size25);
+}
 .popup {
   z-index: 3;
   position: absolute;
   top: 0;
-  right: 0;
   bottom: 0;
   width: var(--zd_size330);
-  border: 1px solid var(--zd_border_smoke71);
-  background-color: var(--dot_bg_white);
+  transition: transform var(--zd_transition3);
+  border: 1px solid var(--zdt_setupdetail_popup_border);
+  background-color: var(--zdt_setupdetail_popup_bg);
+}
+[dir=ltr] .popup {
+  right: 0;
   transform: translateX(100%);
-  transition: transform 0.3s;
+}
+[dir=rtl] .popup {
+  left: 0;
+  transform: translateX(-100%);
 }
 .popup.open {
   transform: translateX(0);
@@ -82,32 +110,40 @@
 }
 
 .infoHeader {
+  color: var(--zdt_setupdetail_infoheader_text);
   padding: var(--zd_size10) var(--zd_size20) var(--zd_size11);
-  border-bottom: 1px solid var(--zd_border_smoke71);
-  background-color: var(--zd_bg_primarytrans11);
-  color: var(--zd_text_primary1);
+  border-bottom: 1px solid var(--zdt_setupdetail_popup_border);
+  background-color: var(--zdt_setupdetail_infoheader_bg);
 }
 
 .infoIcon {
   height: var(--zd_size26);
   width: var(--zd_size26);
-  font-size: var(--zd_size12);
+  font-size: var(--zd_font_size12);
+  line-height: var(--zd_size24);
   text-align: center;
-  border: 1px solid var(--zd_border_primary1);
+  border: 1px solid var(--zdt_setupdetail_infoicon_border);
   border-radius: 2px;
-  line-height: var(--zd_size24);
 }
 
 .infoText {
+  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+  font-size: var(--zd_font_size13);
+}
+
+[dir=ltr] .infoText {
   margin-left: var(--zd_size8);
   margin-right: var(--zd_size8);
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-  font-size: var(--zd_size13);
+}
+
+[dir=rtl] .infoText {
+  margin-right: var(--zd_size8);
+  margin-left: var(--zd_size8);
 }
 
 .infoClose {
-  font-size: var(--zd_size28);
-  color: var(--zd_text_smoke20);
+  font-size: var(--zd_font_size28);
+  color: var(--zdt_setupdetail_infoclose);
   cursor: pointer;
 }
 

package/es/layout/SetupDetailLayout/docs/SetupDetailLayout__default.docs.js

@@ -1,79 +1,29 @@
-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 { SetupDetailLayout, SetupHeader, SetupFooter, SetupContent } from '../';
 import FormAction from '../../../FormAction/FormAction';
-
-var SetupDetailLayout__default = function (_React$Component) {
-  _inherits(SetupDetailLayout__default, _React$Component);
-
-  function SetupDetailLayout__default(props) {
-    _classCallCheck(this, SetupDetailLayout__default);
-
-    return _possibleConstructorReturn(this, (SetupDetailLayout__default.__proto__ || _Object$getPrototypeOf(SetupDetailLayout__default)).call(this, props));
+export default class SetupDetailLayout__default extends React.Component {
+  constructor(props) {
+    super(props);
   }
 
-  _createClass(SetupDetailLayout__default, [{
-    key: 'render',
-    value: function render() {
-      return React.createElement(
-        SetupDetailLayout,
-        { getHelpInfo: function getHelpInfo() {}, needHelpInfo: true },
-        React.createElement(SetupHeader, {
-          title: 'Setup',
-          getLeftPlaceHolder: function getLeftPlaceHolder() {
-            return React.createElement(
-              'p',
-              null,
-              'setupLeft'
-            );
-          },
-          getRightPlaceHolder: function getRightPlaceHolder() {
-            return React.createElement(
-              'p',
-              null,
-              'setupRight'
-            );
-          }
-        }),
-        React.createElement(
-          SetupContent,
-          null,
-          React.createElement(
-            'span',
-            null,
-            'Content'
-          )
-        ),
-        React.createElement(
-          SetupFooter,
-          null,
-          React.createElement(
-            FormAction,
-            { size: 'large' },
-            React.createElement(
-              'p',
-              null,
-              'Footer'
-            )
-          )
-        )
-      );
-    }
-  }]);
-
-  return SetupDetailLayout__default;
-}(React.Component);
+  render() {
+    return /*#__PURE__*/React.createElement(SetupDetailLayout, {
+      getHelpInfo: () => {},
+      needHelpInfo: true
+    }, /*#__PURE__*/React.createElement(SetupHeader, {
+      title: "Setup",
+      getLeftPlaceHolder: () => /*#__PURE__*/React.createElement("p", null, "setupLeft"),
+      getRightPlaceHolder: () => /*#__PURE__*/React.createElement("p", null, "setupRight")
+    }), /*#__PURE__*/React.createElement(SetupContent, null, /*#__PURE__*/React.createElement("span", null, "Content")), /*#__PURE__*/React.createElement(SetupFooter, null, /*#__PURE__*/React.createElement(FormAction, {
+      size: "large"
+    }, /*#__PURE__*/React.createElement("p", null, "Footer"))));
+  }
 
-export default SetupDetailLayout__default;
+}
 
 if (false) {
   SetupDetailLayout__default.docs = {
-    componentGroup: 'Template',
-    folderName: 'Style Guide'
+    componentGroup: 'Template'
   };
 }

package/es/layout/SubtabLayout/SubtabLayout.js

@@ -1,112 +1,71 @@
-import _extends from 'babel-runtime/helpers/extends';
-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';
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import { Card, CardHeader, CardContent } from '@zohodesk/components/lib/Card';
 import PlusIcon from '../../PlusIcon/PlusIcon';
-//-----------style-----------//
 import style from './SubtabLayout.module.css';
-export var SubtabHeader = function (_React$Component) {
-  _inherits(SubtabHeader, _React$Component);
-
-  function SubtabHeader() {
-    _classCallCheck(this, SubtabHeader);
-
-    return _possibleConstructorReturn(this, (SubtabHeader.__proto__ || _Object$getPrototypeOf(SubtabHeader)).apply(this, arguments));
+export class SubtabHeader extends React.Component {
+  render() {
+    let {
+      onAdd,
+      getLeftPlaceHolder,
+      title,
+      label,
+      getRightPlaceHolder,
+      type,
+      leftClassName,
+      rightClassName,
+      className,
+      needBorder,
+      needShadow,
+      needPlusIconLine,
+      children,
+      dataId,
+      isPeekView
+    } = this.props;
+    return /*#__PURE__*/React.createElement(CardHeader, {
+      customClass: `${style.tabHead} ${needShadow ? style.shadowStyle : ''} ${needBorder ? `${style[type]}_borderStyle` : ''}`
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      className: ` ${className} ${isPeekView ? `${style[type]}_peek` : style[type]}`,
+      align: "vertical"
+    }, onAdd || children ? /*#__PURE__*/React.createElement(Box, {
+      className: `${style.left} ${needPlusIconLine ? style.plusIconLine : ''}`
+    }, onAdd ? /*#__PURE__*/React.createElement(PlusIcon, {
+      dataId: dataId,
+      onClick: onAdd
+    }) : children) : null, title ? /*#__PURE__*/React.createElement(Box, {
+      className: `${style.title} ${onAdd ? style.cursor : ''}`,
+      onClick: onAdd ? onAdd : null
+    }, title) : null, getLeftPlaceHolder && /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      shrink: true,
+      adjust: getRightPlaceHolder ? true : false,
+      className: leftClassName
+    }, label ? /*#__PURE__*/React.createElement("div", {
+      className: style.label
+    }, label) : null, getLeftPlaceHolder), getRightPlaceHolder && /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      shrink: true,
+      adjust: getLeftPlaceHolder ? true : false,
+      className: rightClassName
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "vertical",
+      className: style.aside
+    }, getRightPlaceHolder))));
   }
 
-  _createClass(SubtabHeader, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          onAdd = _props.onAdd,
-          getLeftPlaceHolder = _props.getLeftPlaceHolder,
-          title = _props.title,
-          label = _props.label,
-          getRightPlaceHolder = _props.getRightPlaceHolder,
-          type = _props.type,
-          leftClassName = _props.leftClassName,
-          rightClassName = _props.rightClassName,
-          needBorder = _props.needBorder,
-          needShadow = _props.needShadow,
-          needPlusIconLine = _props.needPlusIconLine,
-          children = _props.children,
-          dataId = _props.dataId;
-
-      return React.createElement(
-        CardHeader,
-        _extends({
-          className: style.tabHead + ' ' + (needShadow ? style.shadowStyle : '') + ' ' + (needBorder ? style.borderStyle : '')
-        }, this.props),
-        React.createElement(
-          Container,
-          { alignBox: 'row', className: '' + style[type], align: 'vertical' },
-          onAdd || children ? React.createElement(
-            Box,
-            {
-              className: style.left + ' ' + (needPlusIconLine ? style.plusIconLine : '')
-            },
-            onAdd ? React.createElement(PlusIcon, { dataId: dataId, onClick: onAdd }) : children
-          ) : null,
-          title ? React.createElement(
-            Box,
-            {
-              className: style.title + ' ' + (onAdd ? style.cursor : ''),
-              onClick: onAdd ? onAdd : null
-            },
-            title
-          ) : null,
-          getLeftPlaceHolder && React.createElement(
-            Box,
-            {
-              flexible: true,
-              shrink: true,
-              adjust: getRightPlaceHolder ? true : false,
-              className: '' + (leftClassName ? leftClassName : '')
-            },
-            label ? React.createElement(
-              'div',
-              { className: style.label },
-              label
-            ) : null,
-            getLeftPlaceHolder
-          ),
-          getRightPlaceHolder && React.createElement(
-            Box,
-            {
-              flexible: true,
-              shrink: true,
-              adjust: getLeftPlaceHolder ? true : false,
-              className: ' ' + (rightClassName ? rightClassName : '')
-            },
-            React.createElement(
-              Container,
-              {
-                alignBox: 'row',
-                align: 'vertical',
-                className: style.aside
-              },
-              getRightPlaceHolder
-            )
-          )
-        )
-      );
-    }
-  }]);
-
-  return SubtabHeader;
-}(React.Component);
-
+}
 SubtabHeader.propTypes = {
   children: PropTypes.element,
+  className: PropTypes.string,
   dataId: PropTypes.string,
   getLeftPlaceHolder: PropTypes.oneOf([PropTypes.func, PropTypes.object]),
   getRightPlaceHolder: PropTypes.func,
+  isPeekView: PropTypes.bool,
   label: PropTypes.string,
   leftClassName: PropTypes.string,
   needBorderShadow: PropTypes.bool,
@@ -114,55 +73,91 @@ SubtabHeader.propTypes = {
   onAdd: PropTypes.func,
   rightClassName: PropTypes.string,
   title: PropTypes.string,
-  type: PropTypes.oneOf(['primary', 'secondary'])
+  type: PropTypes.oneOf(['primary', 'secondary', 'tertiary'])
 };
-
 SubtabHeader.defaultProps = {
   type: 'primary',
   needBorder: true,
   needShadow: true,
   needPlusIconLine: true,
-  dataId: 'addreqNowbutton'
+  dataId: 'addreqNowbutton',
+  className: '',
+  leftClassName: '',
+  rightClassName: ''
 };
-
-export var SubtabContent = function (_React$Component2) {
-  _inherits(SubtabContent, _React$Component2);
-
-  function SubtabContent() {
-    _classCallCheck(this, SubtabContent);
-
-    return _possibleConstructorReturn(this, (SubtabContent.__proto__ || _Object$getPrototypeOf(SubtabContent)).apply(this, arguments));
+export class SubtabFooter extends React.Component {
+  render() {
+    let {
+      isPeekView,
+      getRightFooterPlaceHolder,
+      dataId,
+      children,
+      className,
+      leftClassName,
+      rightClassName,
+      size,
+      needPadding,
+      type
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "vertical",
+      className: ` ${style.footer}  ${needPadding ? isPeekView ? `${style[type]}_peekFooter` : `${style[type]}_detailFooter` : ''} ${style[size]} ${className}`,
+      dataId: dataId
+    }, children ? /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      shrink: true,
+      className: leftClassName
+    }, children) : null, getRightFooterPlaceHolder ? /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      shrink: true,
+      className: rightClassName
+    }, getRightFooterPlaceHolder) : null);
   }
 
-  _createClass(SubtabContent, [{
-    key: 'render',
-    value: function render() {
-      var _props2 = this.props,
-          children = _props2.children,
-          scroll = _props2.scroll,
-          className = _props2.className,
-          eleRef = _props2.eleRef,
-          dataId = _props2.dataId,
-          onScroll = _props2.onScroll;
-
-      return React.createElement(
-        CardContent,
-        {
-          scroll: scroll,
-          isScrollAttribute: true,
-          onScroll: onScroll,
-          className: className ? className : '',
-          eleRef: eleRef,
-          dataId: dataId
-        },
-        children
-      );
-    }
-  }]);
-
-  return SubtabContent;
-}(React.Component);
+}
+SubtabFooter.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  getRightFooterPlaceHolder: PropTypes.func,
+  isPeekView: PropTypes.bool,
+  leftClassName: PropTypes.string,
+  needPadding: PropTypes.bool,
+  rightClassName: PropTypes.string,
+  size: PropTypes.oneOf('medium', 'large', 'xlarge'),
+  type: PropTypes.oneOf(['primary', 'secondary', 'tertiary'])
+};
+SubtabFooter.defaultProps = {
+  className: '',
+  leftClassName: '',
+  rightClassName: '',
+  dataId: 'subtabFooter',
+  size: 'xlarge',
+  needPadding: true,
+  type: 'tertiary'
+};
+export class SubtabContent extends React.Component {
+  render() {
+    let {
+      children,
+      scroll,
+      className,
+      eleRef,
+      dataId,
+      onScroll
+    } = this.props;
+    return /*#__PURE__*/React.createElement(CardContent, {
+      scroll: scroll,
+      isScrollAttribute: true,
+      onScroll: onScroll,
+      customClass: className ? className : '',
+      eleRef: eleRef,
+      dataId: dataId
+    }, children);
+  }
 
+}
 SubtabContent.propTypes = {
   children: PropTypes.oneOf([PropTypes.element, PropTypes.array]),
   className: PropTypes.element,
@@ -170,58 +165,37 @@ SubtabContent.propTypes = {
   eleRef: PropTypes.func,
   scroll: PropTypes.oneOf(['vertical'])
 };
-
 SubtabContent.defaultProps = {
   scroll: 'vertical'
 };
-
-var SubtabLayout = function (_React$Component3) {
-  _inherits(SubtabLayout, _React$Component3);
-
-  function SubtabLayout() {
-    _classCallCheck(this, SubtabLayout);
-
-    return _possibleConstructorReturn(this, (SubtabLayout.__proto__ || _Object$getPrototypeOf(SubtabLayout)).apply(this, arguments));
+export default class SubtabLayout extends React.Component {
+  render() {
+    let {
+      children,
+      dataId
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Card, _extends({
+      isScrollAttribute: true,
+      dataId: dataId
+    }, this.props, {
+      childTypes: {
+        cardHeader: SubtabHeader,
+        cardContent: SubtabContent
+      }
+    }), children);
   }
 
-  _createClass(SubtabLayout, [{
-    key: 'render',
-    value: function render() {
-      var _props3 = this.props,
-          children = _props3.children,
-          dataId = _props3.dataId;
-
-      return React.createElement(
-        Card,
-        _extends({
-          isScrollAttribute: true,
-          dataId: dataId
-        }, this.props, {
-          childTypes: { cardHeader: SubtabHeader, cardContent: SubtabContent }
-        }),
-        children
-      );
-    }
-  }]);
-
-  return SubtabLayout;
-}(React.Component);
-
-export default SubtabLayout;
-
-
-if (false) {
-  SubtabLayout.docs = {
-    componentGroup: 'Template',
-    folderName: 'Style Guide'
-  };
 }
-
 SubtabLayout.defaultProps = {
   dataId: 'subTabLayout'
 };
-
 SubtabLayout.propTypes = {
   children: PropTypes.oneOf([PropTypes.element, PropTypes.array]),
   dataId: PropTypes.string
-};
+};
+
+if (false) {
+  SubtabLayout.docs = {
+    componentGroup: 'Template'
+  };
+}