@zohodesk/dot 1.0.0-temp-62 → 1.0.0-temp-65

package/src/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/src/layout/SetupDetailLayout/SetupDetailLayout.js

@@ -0,0 +1,274 @@
+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 (
+      <Container isScrollAttribute dataId={dataId}>
+        {React.Children.map(children, child => {
+          if (child && child.type == SetupHeader) {
+            return React.cloneElement(child, {
+              openHelpInfo: this.toggleHelpInfo,
+              needHelpInfo: needHelpInfo
+            });
+          }
+          return child;
+        })}
+        {getHelpInfo ? (
+          <Box
+            className={`${style.popup} ${
+              isHelpInfoOpen ? style.open : style.close
+            }`}
+            dataId={`${dataId}_infobox`}
+          >
+            <Container>
+              <Box>
+                <Container
+                  alignBox='row'
+                  align='vertical'
+                  className={style.infoHeader}
+                >
+                  <Box className={style.infoIcon}>
+                    <Icon name='ZD-info31' />
+                  </Box>
+                  <Box flexible className={style.infoText}>
+                    {helpInfoTitle}
+                  </Box>
+                  <Box>
+                    <span
+                      onClick={this.toggleHelpInfo}
+                      className={style.infoClose}
+                      data-id={`${dataId}_close`}
+                    >
+                      <Icon name='ZD-close' />
+                    </span>
+                  </Box>
+                </Container>
+              </Box>
+              <Box flexible scroll='vertical' className={style.infoFooter}>
+                {getHelpInfo()}
+              </Box>
+            </Container>
+          </Box>
+        ) : null}
+      </Container>
+    );
+  }
+}
+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 (__DOCS__) {
+  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 (
+      <Box
+        className={
+          isCustomizedHeader === true ? headerCustomStyle : style.header
+        }
+        dataId={dataId}
+      >
+        <Container alignBox='row' align='vertical'>
+          <Box className={style.back}>
+            {needBack ? (
+              <span
+                className={style.backIcon}
+                onClick={onBackClick}
+                data-id={`${dataId}_back`}
+              >
+                <Icon name='ZD-back' />
+              </span>
+            ) : null}
+          </Box>
+          <Box
+            flexible={
+              !getLeftPlaceHolder && !getRightPlaceHolder ? true : false
+            }
+            className={style.title}
+            dataId={`${dataId}_title`}
+          >
+            {title}
+          </Box>
+          {getLeftPlaceHolder ? (
+            <Box
+              flexible
+              shrink
+              adjust={getRightPlaceHolder ? true : false}
+              className={leftClassName}
+            >
+              <Container align='vertical' alignBox='row'>
+                {getLeftPlaceHolder()}
+              </Container>
+            </Box>
+          ) : null}
+          {getRightPlaceHolder ? (
+            <Box
+              flexible
+              shrink
+              adjust={getLeftPlaceHolder ? true : false}
+              className={rightClassName}
+            >
+              <Container
+                align='vertical'
+                alignBox='row'
+                className={style.rightPanel}
+              >
+                {getRightPlaceHolder()}
+              </Container>
+            </Box>
+          ) : null}
+          {needHelpInfo ? (
+            <Box>
+              {needHelpInfoWrapper ? (
+                <span className={style.helpInfoCont}>
+                  <span
+                    className={style.helpInfo}
+                    onClick={openHelpInfo}
+                    data-id={`${dataId}_info`}
+                  >
+                    <Icon name='ZD-info31' />
+                  </span>
+                </span>
+              ) : (
+                <span
+                  className={`${style.helpInfo} ${style.mr15}`}
+                  onClick={openHelpInfo}
+                  data-id={`${dataId}_info`}
+                >
+                  <Icon name='ZD-info31' />
+                </span>
+              )}
+            </Box>
+          ) : null}
+        </Container>
+      </Box>
+    );
+  }
+}
+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 (
+      <Box
+        flexible
+        scroll='vertical'
+        className={`${className ? className : ''} ${style.content} ${
+          needPadding ? style.padding : ''
+        } `}
+        isScrollAttribute
+        dataId={dataId}
+      >
+        {children}
+      </Box>
+    );
+  }
+}
+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 <Box dataId={dataId}>{children}</Box>;
+  }
+}
+SetupFooter.propTypes = {
+  children: PropTypes.element,
+  dataId: PropTypes.string
+};
+SetupFooter.defaultProps = {
+  dataId: 'SetupFooter'
+};

package/src/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/src/layout/SetupDetailLayout/docs/SetupDetailLayout__default.docs.js

@@ -0,0 +1,34 @@
+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 (
+      <SetupDetailLayout getHelpInfo={() => {}} needHelpInfo>
+        <SetupHeader
+          title='Setup'
+          getLeftPlaceHolder={() => <p>setupLeft</p>}
+          getRightPlaceHolder={() => <p>setupRight</p>}
+        />
+        <SetupContent>
+          <span>Content</span>
+        </SetupContent>
+        <SetupFooter>
+          <FormAction size='large'>
+            <p>Footer</p>
+          </FormAction>
+        </SetupFooter>
+      </SetupDetailLayout>
+    );
+  }
+}
+if (__DOCS__) {
+  SetupDetailLayout__default.docs = {
+    componentGroup: 'Template'
+  };
+}

package/src/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/src/layout/SubtabLayout/SubtabLayout.js

@@ -0,0 +1,235 @@
+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 (
+      <CardHeader
+        customClass={`${style.tabHead} ${needShadow ? style.shadowStyle : ''} ${
+          needBorder ? `${style[type]}_borderStyle` : ''
+        }`} 
+      >
+        <Container
+          alignBox='row'
+          className={` ${className} ${isPeekView ? `${style[type]}_peek` : style[type]}`}
+          align='vertical'
+        >
+          {onAdd || children ? (
+            <Box
+              className={`${style.left} ${
+                needPlusIconLine ? style.plusIconLine : ''
+              }`}
+            >
+              {onAdd ? <PlusIcon dataId={dataId} onClick={onAdd} /> : children}
+            </Box>
+          ) : null}
+          {title ? (
+            <Box
+              className={`${style.title} ${onAdd ? style.cursor : ''}`}
+              onClick={onAdd ? onAdd : null}
+            >
+              {title}
+            </Box>
+          ) : null}
+          {getLeftPlaceHolder && (
+            <Box
+              flexible
+              shrink
+              adjust={getRightPlaceHolder ? true : false}
+              className={leftClassName}
+            >
+              {label ? <div className={style.label}>{label}</div> : null}
+              {getLeftPlaceHolder}
+            </Box>
+          )}
+          {getRightPlaceHolder && (
+            <Box
+              flexible
+              shrink
+              adjust={getLeftPlaceHolder ? true : false}
+              className={rightClassName}
+            >
+              <Container
+                alignBox='row'
+                align='vertical'
+                className={style.aside}
+              >
+                {getRightPlaceHolder}
+              </Container>
+            </Box>
+          )}
+        </Container>
+      </CardHeader>
+    );
+  }
+}
+
+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 (
+      <Container
+        alignBox='row'
+        align='vertical'
+        className={` ${style.footer}  ${
+          needPadding
+            ? isPeekView ? `${style[type]}_peekFooter` : `${style[type]}_detailFooter`
+            : ''
+        } ${style[size]} ${className}`}
+        dataId={dataId}
+      >
+        {children ? (
+          <Box flexible shrink className={leftClassName}>
+            {children}
+          </Box>
+        ) : null}
+        {getRightFooterPlaceHolder ? (
+          <Box flexible shrink className={rightClassName}>
+            {getRightFooterPlaceHolder}
+          </Box>
+        ) : null}
+      </Container>
+    );
+  }
+}
+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 (
+      <CardContent
+        scroll={scroll}
+        isScrollAttribute
+        onScroll={onScroll}
+        customClass={className ? className : ''}
+        eleRef={eleRef}
+        dataId={dataId}
+      >
+        {children}
+      </CardContent>
+    );
+  }
+}
+
+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 (
+      <Card
+        isScrollAttribute
+        dataId={dataId}
+        {...this.props}
+        childTypes={{ cardHeader: SubtabHeader, cardContent: SubtabContent }}
+      >
+        {children}
+      </Card>
+    );
+  }
+}
+
+SubtabLayout.defaultProps = {
+  dataId: 'subTabLayout'
+};
+
+SubtabLayout.propTypes = {
+  children: PropTypes.oneOf([PropTypes.element, PropTypes.array]),
+  dataId: PropTypes.string
+};
+if (__DOCS__) {
+  SubtabLayout.docs = {
+    componentGroup: 'Template'
+  };
+}