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

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 ? Object.assign.bind() : 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'
+  };
+}

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

@@ -1,8 +1,13 @@
+.varClass {
+  --borderColor: var(--zdt_subtablayout_border);
+}
 .tabHead,
 .shadowStyle {
   position: relative;
-}.tabHead, .shadowStyle {
-  background: var(--dot_bg_white);
+  composes: varClass;
+}
+.tabHead, .shadowStyle {
+  background: var(--zdt_subtablayout_tabhead_bg);
 }
 
 [dir=ltr] .left {
@@ -25,7 +30,7 @@
   height: var(--zd_size28);
   top: var(--zd_size38);
   z-index: -1;
-  background: var(--zd_bg_smoke3);
+  background: var(--zdt_subtablayout_plusicon_bg);
 }
 
 [dir=ltr] .plusIconLine::before {
@@ -36,8 +41,11 @@
   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 {
@@ -46,7 +54,7 @@
   position: absolute;
   top: var(--zd_size20);
   z-index: -1;
-  box-shadow: 0 0 6px var(--zd_shadow_graytrans5);
+  box-shadow: 0 0 6px var(--zdt_subtablayout_shadowstyle_box_shadow);
   border-radius: 100px/10px;
 }
 
@@ -65,26 +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 {
-  padding: var(--zd_size27) var(--zd_size25) var(--zd_size26) var(--zd_size25);
+.primary, .primary_peek, .secondary, .secondary_peek, .primary_detailFooter, .primary_peekFooter, .secondary_detailFooter, .secondary_peekFooter {
+  padding-top: var(--zd_size27);
+  padding-bottom: var(--zd_size26);
 }
 
-[dir=ltr] .secondary {
-  padding: var(--zd_size27) var(--zd_size115) 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);
 }
 
-[dir=rtl] .secondary {
-  padding: var(--zd_size27) var(--zd_size25) var(--zd_size26) var(--zd_size115);
+[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);
+}