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

package/es/index.js

@@ -1,14 +1,8 @@
 export { default as React } from 'react';
 export { default as ReactDOM } from 'react-dom';
 export { renderToStaticMarkup } from 'react-dom/server';
-import '@zohodesk/components/lib/common/reset.module.css';
-import '@zohodesk/components/lib/common/basic.module.css';
-import '@zohodesk/variables/lib/internalColorVariables.module.css';
-import '@zohodesk/variables/lib/internalSizeVariables.module.css';
-import '@zohodesk/variables/lib/dotVariables.module.css';
-import '@zohodesk/variables/lib/colorVariables.module.css';
-import '@zohodesk/variables/lib/sizeVariables.module.css';
-import '@zohodesk/variables/lib/fontFamilyVariables.module.css';
+export { default as _provider } from './Provider';
 export * from './docs/generalDocs.js';
 export * from './docs/lookupDocs.js';
-export * from './docs/setupDocs.js';
+export * from './docs/setupDocs.js';
+export * from './docs/formDocs.js';

package/es/layout/SetupDetailLayout/SetupDetailLayout.js

@@ -1,244 +1,172 @@
-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 { Container, Box } from '@zohodesk/components/lib/Layout';
 import Icon from '@zohodesk/icons/lib/Icon';
 import style from './SetupDetailLayout.module.css';
-
-var SetupDetailLayout = function (_React$Component) {
-  _inherits(SetupDetailLayout, _React$Component);
-
-  function SetupDetailLayout(props) {
-    _classCallCheck(this, SetupDetailLayout);
-
-    var _this = _possibleConstructorReturn(this, (SetupDetailLayout.__proto__ || _Object$getPrototypeOf(SetupDetailLayout)).call(this, props));
-
-    _this.state = { isHelpInfoOpen: false };
-    _this.toggleHelpInfo = _this.toggleHelpInfo.bind(_this);
-    return _this;
+export default class SetupDetailLayout extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isHelpInfoOpen: false
+    };
+    this.toggleHelpInfo = this.toggleHelpInfo.bind(this);
   }
 
-  _createClass(SetupDetailLayout, [{
-    key: 'toggleHelpInfo',
-    value: function toggleHelpInfo() {
-      var isHelpInfoOpen = this.state.isHelpInfoOpen;
-
-      this.setState({ isHelpInfoOpen: !isHelpInfoOpen });
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _this2 = this;
-
-      var isHelpInfoOpen = this.state.isHelpInfoOpen;
-      var _props = this.props,
-          children = _props.children,
-          needHelpInfo = _props.needHelpInfo,
-          getHelpInfo = _props.getHelpInfo,
-          helpInfoTitle = _props.helpInfoTitle;
-
-      return React.createElement(
-        Container,
-        { isScrollAttribute: true },
-        React.Children.map(children, function (child) {
-          if (child && child.type == SetupHeader) {
-            return React.cloneElement(child, {
-              openHelpInfo: _this2.toggleHelpInfo,
-              needHelpInfo: needHelpInfo
-            });
-          }
-          return child;
-        }),
-        getHelpInfo ? React.createElement(
-          Box,
-          {
-            className: style.popup + ' ' + (isHelpInfoOpen ? style.open : style.close)
-          },
-          React.createElement(
-            Container,
-            null,
-            React.createElement(
-              Box,
-              null,
-              React.createElement(
-                Container,
-                {
-                  alignBox: 'row',
-                  align: 'vertical',
-                  className: style.infoHeader
-                },
-                React.createElement(
-                  Box,
-                  { className: style.infoIcon },
-                  React.createElement(Icon, { name: 'ZD-info31' })
-                ),
-                React.createElement(
-                  Box,
-                  { flexible: true, className: style.infoText },
-                  helpInfoTitle
-                ),
-                React.createElement(
-                  Box,
-                  null,
-                  React.createElement(
-                    'span',
-                    {
-                      onClick: this.toggleHelpInfo,
-                      className: style.infoClose
-                    },
-                    React.createElement(Icon, { name: 'ZD-close' })
-                  )
-                )
-              )
-            ),
-            React.createElement(
-              Box,
-              { flexible: true, scroll: 'vertical', className: style.infoFooter },
-              getHelpInfo()
-            )
-          )
-        ) : null
-      );
-    }
-  }]);
-
-  return SetupDetailLayout;
-}(React.Component);
+  toggleHelpInfo() {
+    let {
+      isHelpInfoOpen
+    } = this.state;
+    this.setState({
+      isHelpInfoOpen: !isHelpInfoOpen
+    });
+  }
 
-export default SetupDetailLayout;
+  render() {
+    let {
+      isHelpInfoOpen
+    } = this.state;
+    let {
+      children,
+      needHelpInfo,
+      getHelpInfo,
+      helpInfoTitle,
+      dataId
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Container, {
+      isScrollAttribute: true,
+      dataId: dataId
+    }, React.Children.map(children, child => {
+      if (child && child.type == SetupHeader) {
+        return /*#__PURE__*/React.cloneElement(child, {
+          openHelpInfo: this.toggleHelpInfo,
+          needHelpInfo: needHelpInfo
+        });
+      }
+
+      return child;
+    }), getHelpInfo ? /*#__PURE__*/React.createElement(Box, {
+      className: `${style.popup} ${isHelpInfoOpen ? style.open : style.close}`,
+      dataId: `${dataId}_infobox`
+    }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "vertical",
+      className: style.infoHeader
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: style.infoIcon
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-info31"
+    })), /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      className: style.infoText
+    }, helpInfoTitle), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("span", {
+      onClick: this.toggleHelpInfo,
+      className: style.infoClose,
+      "data-id": `${dataId}_close`
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-close"
+    }))))), /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      scroll: "vertical",
+      className: style.infoFooter
+    }, getHelpInfo()))) : null);
+  }
 
+}
 SetupDetailLayout.propTypes = {
   children: PropTypes.element,
+  dataId: PropTypes.string,
   getHelpInfo: PropTypes.func,
   helpInfoTitle: PropTypes.string,
   needHelpInfo: PropTypes.bool
 };
 SetupDetailLayout.defaultProps = {
   helpInfoTitle: 'Page Tips',
-  needHelpInfo: false
+  needHelpInfo: false,
+  dataId: 'SetupDetailLayout'
 };
+
 if (false) {
   SetupDetailLayout.docs = {
-    componentGroup: 'Template',
-    folderName: 'Style Guide'
+    componentGroup: 'Template'
   };
 }
 
-export var SetupHeader = function (_Component) {
-  _inherits(SetupHeader, _Component);
-
-  function SetupHeader(props) {
-    _classCallCheck(this, SetupHeader);
-
-    return _possibleConstructorReturn(this, (SetupHeader.__proto__ || _Object$getPrototypeOf(SetupHeader)).call(this, props));
+export class SetupHeader extends Component {
+  constructor(props) {
+    super(props);
   }
 
-  _createClass(SetupHeader, [{
-    key: 'render',
-    value: function render() {
-      var _props2 = this.props,
-          title = _props2.title,
-          needBack = _props2.needBack,
-          onBackClick = _props2.onBackClick,
-          openHelpInfo = _props2.openHelpInfo,
-          needHelpInfo = _props2.needHelpInfo,
-          needHelpInfoWrapper = _props2.needHelpInfoWrapper,
-          getLeftPlaceHolder = _props2.getLeftPlaceHolder,
-          getRightPlaceHolder = _props2.getRightPlaceHolder,
-          leftClassName = _props2.leftClassName,
-          rightClassName = _props2.rightClassName,
-          isCustomizedHeader = _props2.isCustomizedHeader,
-          headerCustomStyle = _props2.headerCustomStyle;
-
-      return React.createElement(
-        Box,
-        {
-          className: isCustomizedHeader === true ? headerCustomStyle : style.header
-        },
-        React.createElement(
-          Container,
-          { alignBox: 'row', align: 'vertical' },
-          React.createElement(
-            Box,
-            { className: style.back },
-            needBack ? React.createElement(
-              'span',
-              { className: style.backIcon, onClick: onBackClick },
-              React.createElement(Icon, { name: 'ZD-back' })
-            ) : null
-          ),
-          React.createElement(
-            Box,
-            {
-              flexible: !getLeftPlaceHolder && !getRightPlaceHolder ? true : false,
-              className: style.title
-            },
-            title
-          ),
-          getLeftPlaceHolder ? React.createElement(
-            Box,
-            {
-              flexible: true,
-              shrink: true,
-              adjust: getRightPlaceHolder ? true : false,
-              className: leftClassName
-            },
-            React.createElement(
-              Container,
-              { align: 'vertical', alignBox: 'row' },
-              getLeftPlaceHolder()
-            )
-          ) : null,
-          getRightPlaceHolder ? React.createElement(
-            Box,
-            {
-              flexible: true,
-              shrink: true,
-              adjust: getLeftPlaceHolder ? true : false,
-              className: rightClassName
-            },
-            React.createElement(
-              Container,
-              {
-                align: 'vertical',
-                alignBox: 'row',
-                className: style.rightPanel
-              },
-              getRightPlaceHolder()
-            )
-          ) : null,
-          needHelpInfo ? React.createElement(
-            Box,
-            null,
-            needHelpInfoWrapper ? React.createElement(
-              'span',
-              { className: style.helpInfoCont },
-              React.createElement(
-                'span',
-                { className: style.helpInfo, onClick: openHelpInfo },
-                React.createElement(Icon, { name: 'ZD-info31' })
-              )
-            ) : React.createElement(
-              'span',
-              {
-                className: style.helpInfo + ' ' + style.mr15,
-                onClick: openHelpInfo
-              },
-              React.createElement(Icon, { name: 'ZD-info31' })
-            )
-          ) : null
-        )
-      );
-    }
-  }]);
+  render() {
+    let {
+      title,
+      needBack,
+      onBackClick,
+      openHelpInfo,
+      needHelpInfo,
+      needHelpInfoWrapper,
+      getLeftPlaceHolder,
+      getRightPlaceHolder,
+      leftClassName,
+      rightClassName,
+      isCustomizedHeader,
+      headerCustomStyle,
+      dataId
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Box, {
+      className: isCustomizedHeader === true ? headerCustomStyle : style.header,
+      dataId: dataId
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "vertical"
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: style.back
+    }, needBack ? /*#__PURE__*/React.createElement("span", {
+      className: style.backIcon,
+      onClick: onBackClick,
+      "data-id": `${dataId}_back`
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-back"
+    })) : null), /*#__PURE__*/React.createElement(Box, {
+      flexible: !getLeftPlaceHolder && !getRightPlaceHolder ? true : false,
+      className: style.title,
+      dataId: `${dataId}_title`
+    }, title), getLeftPlaceHolder ? /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      shrink: true,
+      adjust: getRightPlaceHolder ? true : false,
+      className: leftClassName
+    }, /*#__PURE__*/React.createElement(Container, {
+      align: "vertical",
+      alignBox: "row"
+    }, getLeftPlaceHolder())) : null, getRightPlaceHolder ? /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      shrink: true,
+      adjust: getLeftPlaceHolder ? true : false,
+      className: rightClassName
+    }, /*#__PURE__*/React.createElement(Container, {
+      align: "vertical",
+      alignBox: "row",
+      className: style.rightPanel
+    }, getRightPlaceHolder())) : null, needHelpInfo ? /*#__PURE__*/React.createElement(Box, null, needHelpInfoWrapper ? /*#__PURE__*/React.createElement("span", {
+      className: style.helpInfoCont
+    }, /*#__PURE__*/React.createElement("span", {
+      className: style.helpInfo,
+      onClick: openHelpInfo,
+      "data-id": `${dataId}_info`
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-info31"
+    }))) : /*#__PURE__*/React.createElement("span", {
+      className: `${style.helpInfo} ${style.mr15}`,
+      onClick: openHelpInfo,
+      "data-id": `${dataId}_info`
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-info31"
+    }))) : null));
+  }
 
-  return SetupHeader;
-}(Component);
+}
 SetupHeader.propTypes = {
+  dataId: PropTypes.string,
   getLeftPlaceHolder: PropTypes.func,
   getRightPlaceHolder: PropTypes.func,
   headerCustomStyle: PropTypes.object,
@@ -255,74 +183,61 @@ SetupHeader.propTypes = {
 SetupHeader.defaultProps = {
   needBack: false,
   needHelpInfo: false,
-  needHelpInfoWrapper: false
+  needHelpInfoWrapper: false,
+  dataId: 'SetupHeader'
 };
-
-export var SetupContent = function (_Component2) {
-  _inherits(SetupContent, _Component2);
-
-  function SetupContent(props) {
-    _classCallCheck(this, SetupContent);
-
-    return _possibleConstructorReturn(this, (SetupContent.__proto__ || _Object$getPrototypeOf(SetupContent)).call(this, props));
+export class SetupContent extends Component {
+  constructor(props) {
+    super(props);
   }
 
-  _createClass(SetupContent, [{
-    key: 'render',
-    value: function render() {
-      var _props3 = this.props,
-          children = _props3.children,
-          needPadding = _props3.needPadding,
-          className = _props3.className;
-
-      return React.createElement(
-        Box,
-        {
-          flexible: true,
-          scroll: 'vertical',
-          className: (className ? className : '') + ' ' + style.content + ' ' + (needPadding ? style.padding : '') + ' ',
-          isScrollAttribute: true
-        },
-        children
-      );
-    }
-  }]);
+  render() {
+    let {
+      children,
+      needPadding,
+      className,
+      dataId
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      scroll: "vertical",
+      className: `${className ? className : ''} ${style.content} ${needPadding ? style.padding : ''} `,
+      isScrollAttribute: true,
+      dataId: dataId
+    }, children);
+  }
 
-  return SetupContent;
-}(Component);
+}
 SetupContent.propTypes = {
   children: PropTypes.element,
   className: PropTypes.bool,
+  dataId: PropTypes.string,
   needPadding: PropTypes.bool
 };
 SetupContent.defaultProps = {
-  needPadding: true
+  needPadding: true,
+  dataId: 'SetupContent'
 };
-
-export var SetupFooter = function (_Component3) {
-  _inherits(SetupFooter, _Component3);
-
-  function SetupFooter(props) {
-    _classCallCheck(this, SetupFooter);
-
-    return _possibleConstructorReturn(this, (SetupFooter.__proto__ || _Object$getPrototypeOf(SetupFooter)).call(this, props));
+export class SetupFooter extends Component {
+  constructor(props) {
+    super(props);
   }
 
-  _createClass(SetupFooter, [{
-    key: 'render',
-    value: function render() {
-      var children = this.props.children;
-
-      return React.createElement(
-        Box,
-        null,
-        children
-      );
-    }
-  }]);
+  render() {
+    let {
+      children,
+      dataId
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Box, {
+      dataId: dataId
+    }, children);
+  }
 
-  return SetupFooter;
-}(Component);
+}
 SetupFooter.propTypes = {
-  children: PropTypes.element
+  children: PropTypes.element,
+  dataId: PropTypes.string
+};
+SetupFooter.defaultProps = {
+  dataId: 'SetupFooter'
 };

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

@@ -1,7 +1,7 @@
 .header {
   height: var(--zd_size50);
   z-index: 2;
-  border-bottom: 1px solid var(--zd_border_smoke59);
+  border-bottom: 1px solid var(--zdt_setupdetail_header_border);
 }
 .back {
   width: var(--zd_size60);
@@ -9,9 +9,9 @@
 .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(--zd_text_dark4);
+  color: var(--zdt_setupdetail_backicon);
   line-height: var(--zd_size30);
   text-align: center;
   border-radius: 50%;
@@ -25,13 +25,13 @@
 }
 
 .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);
   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 {
@@ -60,10 +60,10 @@
   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(--zd_border_smoke29);
+  border: 1px solid var(--zdt_setupdetail_helpinfo);
   border-radius: 2px;
   text-align: center;
   cursor: pointer;
@@ -90,9 +90,9 @@
   top: 0;
   bottom: 0;
   width: var(--zd_size330);
-  transition: transform 0.3s;
-  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;
@@ -110,25 +110,25 @@
 }
 
 .infoHeader {
-  color: var(--zd_text_primary1);
+  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);
+  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;
 }
 
 .infoText {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-  font-size: var(--zd_size13);
+  font-size: var(--zd_font_size13);
 }
 
 [dir=ltr] .infoText {
@@ -142,8 +142,8 @@
 }
 
 .infoClose {
-  font-size: var(--zd_size28);
-  color: var(--zd_text_smoke20);
+  font-size: var(--zd_font_size28);
+  color: var(--zdt_setupdetail_infoclose);
   cursor: pointer;
 }