@zohodesk/dot 1.0.0-temp-58 → 1.0.0-temp-61

package/src/index.js

@@ -1,8 +0,0 @@
-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

@@ -1,274 +0,0 @@
-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

@@ -1,116 +0,0 @@
-.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

@@ -1,34 +0,0 @@
-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

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

package/src/layout/SubtabLayout/SubtabLayout.js

@@ -1,235 +0,0 @@
-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'
-  };
-}