@zohodesk/dot 1.0.0-temp.213 → 1.0.0-temp.777

package/es/index.js

@@ -0,0 +1,8 @@
+export { default as React } from 'react';
+export { default as ReactDOM } from 'react-dom';
+export { renderToStaticMarkup } from 'react-dom/server';
+export { default as _provider } from './Provider';
+export * from './docs/generalDocs.js';
+export * from './docs/lookupDocs.js';
+export * from './docs/setupDocs.js';
+export * from './docs/formDocs.js';

package/es/layout/SetupDetailLayout/SetupDetailLayout.js

@@ -0,0 +1,243 @@
+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';
+export default class SetupDetailLayout extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isHelpInfoOpen: false
+    };
+    this.toggleHelpInfo = this.toggleHelpInfo.bind(this);
+  }
+
+  toggleHelpInfo() {
+    let {
+      isHelpInfoOpen
+    } = this.state;
+    this.setState({
+      isHelpInfoOpen: !isHelpInfoOpen
+    });
+  }
+
+  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,
+  dataId: 'SetupDetailLayout'
+};
+
+if (false) {
+  SetupDetailLayout.docs = {
+    componentGroup: 'Template'
+  };
+}
+
+export class SetupHeader extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  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));
+  }
+
+}
+SetupHeader.propTypes = {
+  dataId: PropTypes.string,
+  getLeftPlaceHolder: PropTypes.func,
+  getRightPlaceHolder: PropTypes.func,
+  headerCustomStyle: PropTypes.object,
+  isCustomizedHeader: PropTypes.bool,
+  leftClassName: PropTypes.string,
+  needBack: PropTypes.bool,
+  needHelpInfo: PropTypes.bool,
+  needHelpInfoWrapper: PropTypes.bool,
+  onBackClick: PropTypes.func,
+  openHelpInfo: PropTypes.func,
+  rightClassName: PropTypes.string,
+  title: PropTypes.string
+};
+SetupHeader.defaultProps = {
+  needBack: false,
+  needHelpInfo: false,
+  needHelpInfoWrapper: false,
+  dataId: 'SetupHeader'
+};
+export class SetupContent extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  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);
+  }
+
+}
+SetupContent.propTypes = {
+  children: PropTypes.element,
+  className: PropTypes.bool,
+  dataId: PropTypes.string,
+  needPadding: PropTypes.bool
+};
+SetupContent.defaultProps = {
+  needPadding: true,
+  dataId: 'SetupContent'
+};
+export class SetupFooter extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let {
+      children,
+      dataId
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Box, {
+      dataId: dataId
+    }, children);
+  }
+
+}
+SetupFooter.propTypes = {
+  children: PropTypes.element,
+  dataId: PropTypes.string
+};
+SetupFooter.defaultProps = {
+  dataId: 'SetupFooter'
+};

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

@@ -0,0 +1,116 @@
+.header {
+  height: var(--zd_size50);
+  border-bottom: 1px solid var(--zdt_setupdetail_header_border);
+  z-index: 2;
+}
+.back {
+  width: var(--zd_size60);
+}
+.backIcon {
+  height: var(--zd_size30);
+  width: var(--zd_size30);
+  font-size: var(--zd_font_size12);
+  display: inline-block;
+  text-align: center;
+  color: var(--zdt_setupdetail_backicon);
+  margin-left: var(--zd_size19);
+  border-radius: 50%;
+  line-height: var(--zd_size30);
+  cursor: pointer;
+}
+
+.backIcon:hover {
+  background-color: var(--zdt_setupdetail_hover_backicon_bg);
+}
+.title {
+  font-size: var(--zd_font_size16);
+  line-height: var(--zd_size16);
+  padding-right: var(--zd_size12);
+  font-family: var(--zd_semibold);
+  color: var(--zdt_setupdetail_backicon);
+  composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
+}
+
+.rightPanel {
+  composes: justifyFend from '~@zohodesk/components/lib/common/common.module.css';
+}
+.helpInfoCont {
+  position: absolute;
+  z-index: 10;
+  right: 0;
+  padding: var(--zd_size12) var(--zd_size15) 0 0;
+}
+.helpInfo {
+  border: 1px solid var(--zdt_setupdetail_helpinfo);
+  border-radius: 2px;
+  line-height: var(--zd_size26);
+  height: var(--zd_size28);
+  width: var(--zd_size28);
+  color: var(--zdt_setupdetail_helpinfo_text);
+  font-size: var(--zd_font_size11);
+  text-align: center;
+  cursor: pointer;
+  display: inline-block;
+}
+.mr15 {
+  margin-right: var(--zd_size15);
+}
+
+.content {
+  z-index: 1;
+}
+.padding {
+  padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size60);
+}
+.popup {
+  z-index: 3;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: var(--zd_size330);
+  border: 1px solid var(--zdt_setupdetail_popup_border);
+  background-color: var(--zdt_setupdetail_popup_bg);
+  transform: translateX(100%);
+  transition: transform var(--zd_transition3);
+}
+.popup.open {
+  transform: translateX(0);
+}
+.close {
+  composes: disableFocus from '~@zohodesk/components/lib/common/common.module.css';
+}
+
+.infoHeader {
+  padding: var(--zd_size10) var(--zd_size20) var(--zd_size11);
+  border-bottom: 1px solid var(--zdt_setupdetail_popup_border);
+  background-color: var(--zdt_setupdetail_infoheader_bg);
+  color: var(--zdt_setupdetail_infoheader_text);
+}
+
+.infoIcon {
+  height: var(--zd_size26);
+  width: var(--zd_size26);
+  font-size: var(--zd_font_size12);
+  text-align: center;
+  border: 1px solid var(--zdt_setupdetail_infoicon_border);
+  border-radius: 2px;
+  line-height: var(--zd_size24);
+}
+
+.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_font_size13);
+}
+
+.infoClose {
+  font-size: var(--zd_font_size28);
+  color: var(--zdt_setupdetail_infoclose);
+  cursor: pointer;
+}
+
+.infoFooter {
+  padding: var(--zd_size10) var(--zd_size20);
+}

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { SetupDetailLayout, SetupHeader, SetupFooter, SetupContent } from '../';
+import FormAction from '../../../FormAction/FormAction';
+export default class SetupDetailLayout__default extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  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"))));
+  }
+
+}
+
+if (false) {
+  SetupDetailLayout__default.docs = {
+    componentGroup: 'Template'
+  };
+}

package/es/layout/SetupDetailLayout/index.js

@@ -0,0 +1,4 @@
+export { default as SetupDetailLayout } from './SetupDetailLayout';
+export { SetupHeader } from './SetupDetailLayout';
+export { SetupFooter } from './SetupDetailLayout';
+export { SetupContent } from './SetupDetailLayout';

package/es/layout/SubtabLayout/SubtabLayout.js

@@ -0,0 +1,201 @@
+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';
+import style from './SubtabLayout.module.css';
+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))));
+  }
+
+}
+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,
+  needPlusIconLine: PropTypes.bool,
+  onAdd: PropTypes.func,
+  rightClassName: PropTypes.string,
+  title: PropTypes.string,
+  type: PropTypes.oneOf(['primary', 'secondary', 'tertiary'])
+};
+SubtabHeader.defaultProps = {
+  type: 'primary',
+  needBorder: true,
+  needShadow: true,
+  needPlusIconLine: true,
+  dataId: 'addreqNowbutton',
+  className: '',
+  leftClassName: '',
+  rightClassName: ''
+};
+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);
+  }
+
+}
+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,
+  dataId: PropTypes.string,
+  eleRef: PropTypes.func,
+  scroll: PropTypes.oneOf(['vertical'])
+};
+SubtabContent.defaultProps = {
+  scroll: 'vertical'
+};
+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);
+  }
+
+}
+SubtabLayout.defaultProps = {
+  dataId: 'subTabLayout'
+};
+SubtabLayout.propTypes = {
+  children: PropTypes.oneOf([PropTypes.element, PropTypes.array]),
+  dataId: PropTypes.string
+};
+
+if (false) {
+  SubtabLayout.docs = {
+    componentGroup: 'Template'
+  };
+}