@zohodesk/dot 1.0.0-beta.20 → 1.0.0-beta.203

package/src/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/formDocs.js';

package/src/layout/SetupDetailLayout/SetupDetailLayout.js

@@ -18,9 +18,15 @@ export default class SetupDetailLayout extends React.Component {
 
   render() {
     let { isHelpInfoOpen } = this.state;
-    let { children, needHelpInfo, getHelpInfo, helpInfoTitle } = this.props;
+    let {
+      children,
+      needHelpInfo,
+      getHelpInfo,
+      helpInfoTitle,
+      dataId
+    } = this.props;
     return (
-      <Container isScrollAttribute>
+      <Container isScrollAttribute dataId={dataId}>
         {React.Children.map(children, child => {
           if (child && child.type == SetupHeader) {
             return React.cloneElement(child, {
@@ -35,6 +41,7 @@ export default class SetupDetailLayout extends React.Component {
             className={`${style.popup} ${
               isHelpInfoOpen ? style.open : style.close
             }`}
+            dataId={`${dataId}_infobox`}
           >
             <Container>
               <Box>
@@ -44,7 +51,7 @@ export default class SetupDetailLayout extends React.Component {
                   className={style.infoHeader}
                 >
                   <Box className={style.infoIcon}>
-                    <Icon name='ZD-info31'  />
+                    <Icon name='ZD-info31' />
                   </Box>
                   <Box flexible className={style.infoText}>
                     {helpInfoTitle}
@@ -53,8 +60,9 @@ export default class SetupDetailLayout extends React.Component {
                     <span
                       onClick={this.toggleHelpInfo}
                       className={style.infoClose}
+                      data-id={`${dataId}_close`}
                     >
-                      <Icon name='ZD-close'  />
+                      <Icon name='ZD-close' />
                     </span>
                   </Box>
                 </Container>
@@ -71,18 +79,19 @@ export default class SetupDetailLayout extends React.Component {
 }
 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 (__DOCS__) {
   SetupDetailLayout.docs = {
-    componentGroup: 'Template',
-    folderName: 'Style Guide'
+    componentGroup: 'Template'
   };
 }
 
@@ -104,18 +113,24 @@ export class SetupHeader extends Component {
       leftClassName,
       rightClassName,
       isCustomizedHeader,
-      headerCustomStyle
+      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}>
+              <span
+                className={style.backIcon}
+                onClick={onBackClick}
+                data-id={`${dataId}_back`}
+              >
                 <Icon name='ZD-back' />
               </span>
             ) : null}
@@ -125,6 +140,7 @@ export class SetupHeader extends Component {
               !getLeftPlaceHolder && !getRightPlaceHolder ? true : false
             }
             className={style.title}
+            dataId={`${dataId}_title`}
           >
             {title}
           </Box>
@@ -160,7 +176,11 @@ export class SetupHeader extends Component {
             <Box>
               {needHelpInfoWrapper ? (
                 <span className={style.helpInfoCont}>
-                  <span className={style.helpInfo} onClick={openHelpInfo}>
+                  <span
+                    className={style.helpInfo}
+                    onClick={openHelpInfo}
+                    data-id={`${dataId}_info`}
+                  >
                     <Icon name='ZD-info31' />
                   </span>
                 </span>
@@ -168,6 +188,7 @@ export class SetupHeader extends Component {
                 <span
                   className={`${style.helpInfo} ${style.mr15}`}
                   onClick={openHelpInfo}
+                  data-id={`${dataId}_info`}
                 >
                   <Icon name='ZD-info31' />
                 </span>
@@ -180,6 +201,7 @@ export class SetupHeader extends Component {
   }
 }
 SetupHeader.propTypes = {
+  dataId: PropTypes.string,
   getLeftPlaceHolder: PropTypes.func,
   getRightPlaceHolder: PropTypes.func,
   headerCustomStyle: PropTypes.object,
@@ -196,7 +218,8 @@ SetupHeader.propTypes = {
 SetupHeader.defaultProps = {
   needBack: false,
   needHelpInfo: false,
-  needHelpInfoWrapper: false
+  needHelpInfoWrapper: false,
+  dataId: 'SetupHeader'
 };
 
 export class SetupContent extends Component {
@@ -205,7 +228,7 @@ export class SetupContent extends Component {
   }
 
   render() {
-    let { children, needPadding, className } = this.props;
+    let { children, needPadding, className, dataId } = this.props;
     return (
       <Box
         flexible
@@ -214,6 +237,7 @@ export class SetupContent extends Component {
           needPadding ? style.padding : ''
         } `}
         isScrollAttribute
+        dataId={dataId}
       >
         {children}
       </Box>
@@ -223,10 +247,12 @@ export class SetupContent extends Component {
 SetupContent.propTypes = {
   children: PropTypes.element,
   className: PropTypes.bool,
+  dataId: PropTypes.string,
   needPadding: PropTypes.bool
 };
 SetupContent.defaultProps = {
-  needPadding: true
+  needPadding: true,
+  dataId: 'SetupContent'
 };
 
 export class SetupFooter extends Component {
@@ -235,14 +261,14 @@ export class SetupFooter extends Component {
   }
 
   render() {
-    let { children } = this.props;
-    return (
-      <Box>
-        {children}
-      </Box>
-    );
+    let { children, dataId } = this.props;
+    return <Box dataId={dataId}>{children}</Box>;
   }
 }
 SetupFooter.propTypes = {
-  children: PropTypes.element
+  children: PropTypes.element,
+  dataId: PropTypes.string
+};
+SetupFooter.defaultProps = {
+  dataId: 'SetupFooter'
 };

package/src/layout/SetupDetailLayout/SetupDetailLayout.module.css

@@ -1,6 +1,6 @@
 .header {
   height: var(--zd_size50);
-  border-bottom: 1px solid var(--zd_border_smoke59);
+  border-bottom: 1px solid var(--zdt_setupdetail_header_border);
   z-index: 2;
 }
 .back {
@@ -9,10 +9,10 @@
 .backIcon {
   height: var(--zd_size30);
   width: var(--zd_size30);
-  font-size: var(--zd_size12);
+  font-size: var(--zd_font_size12);
   display: inline-block;
   text-align: center;
-  color: var(--zd_text_dark4);
+  color: var(--zdt_setupdetail_backicon);
   margin-left: var(--zd_size19);
   border-radius: 50%;
   line-height: var(--zd_size30);
@@ -20,14 +20,14 @@
 }
 
 .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);
   padding-right: var(--zd_size12);
   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';
 }
 
@@ -41,13 +41,13 @@
   padding: var(--zd_size12) var(--zd_size15) 0 0;
 }
 .helpInfo {
-  border: 1px solid var(--zd_border_smoke29);
+  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(--zd_text_dark6);
-  font-size: var(--zd_size11);
+  color: var(--zdt_setupdetail_helpinfo_text);
+  font-size: var(--zd_font_size11);
   text-align: center;
   cursor: pointer;
   display: inline-block;
@@ -69,10 +69,10 @@
   right: 0;
   bottom: 0;
   width: var(--zd_size330);
-  border: 1px solid var(--zd_border_smoke71);
-  background-color: var(--dot_bg_white);
+  border: 1px solid var(--zdt_setupdetail_popup_border);
+  background-color: var(--zdt_setupdetail_popup_bg);
   transform: translateX(100%);
-  transition: transform 0.3s;
+  transition: transform var(--zd_transition3);
 }
 .popup.open {
   transform: translateX(0);
@@ -83,17 +83,17 @@
 
 .infoHeader {
   padding: var(--zd_size10) var(--zd_size20) var(--zd_size11);
-  border-bottom: 1px solid var(--zd_border_smoke71);
-  background-color: var(--zd_bg_primarytrans11);
-  color: var(--zd_text_primary1);
+  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_size12);
+  font-size: var(--zd_font_size12);
   text-align: center;
-  border: 1px solid var(--zd_border_primary1);
+  border: 1px solid var(--zdt_setupdetail_infoicon_border);
   border-radius: 2px;
   line-height: var(--zd_size24);
 }
@@ -102,12 +102,12 @@
   margin-left: var(--zd_size8);
   margin-right: var(--zd_size8);
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-  font-size: var(--zd_size13);
+  font-size: var(--zd_font_size13);
 }
 
 .infoClose {
-  font-size: var(--zd_size28);
-  color: var(--zd_text_smoke20);
+  font-size: var(--zd_font_size28);
+  color: var(--zdt_setupdetail_infoclose);
   cursor: pointer;
 }
 

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

@@ -29,7 +29,6 @@ export default class SetupDetailLayout__default extends React.Component {
 }
 if (__DOCS__) {
   SetupDetailLayout__default.docs = {
-    componentGroup: 'Template',
-    folderName: 'Style Guide'
+    componentGroup: 'Template'
   };
 }

package/src/layout/SubtabLayout/SubtabLayout.js

@@ -3,7 +3,6 @@ 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 class SubtabHeader extends React.Component {
   render() {
@@ -16,20 +15,25 @@ export class SubtabHeader extends React.Component {
       type,
       leftClassName,
       rightClassName,
+      className,
       needBorder,
       needShadow,
       needPlusIconLine,
       children,
-      dataId
+      dataId,
+      isPeekView
     } = this.props;
     return (
       <CardHeader
-        className={`${style.tabHead} ${needShadow ? style.shadowStyle : ''} ${
-          needBorder ? style.borderStyle : ''
-        }`}
-        {...this.props}
+        customClass={`${style.tabHead} ${needShadow ? style.shadowStyle : ''} ${
+          needBorder ? `${style[type]}_borderStyle` : ''
+        }`} 
       >
-        <Container alignBox='row' className={`${style[type]}`} align='vertical'>
+        <Container
+          alignBox='row'
+          className={` ${className} ${isPeekView ? `${style[type]}_peek` : style[type]}`}
+          align='vertical'
+        >
           {onAdd || children ? (
             <Box
               className={`${style.left} ${
@@ -52,7 +56,7 @@ export class SubtabHeader extends React.Component {
               flexible
               shrink
               adjust={getRightPlaceHolder ? true : false}
-              className={`${leftClassName ? leftClassName : ''}`}
+              className={leftClassName}
             >
               {label ? <div className={style.label}>{label}</div> : null}
               {getLeftPlaceHolder}
@@ -63,7 +67,7 @@ export class SubtabHeader extends React.Component {
               flexible
               shrink
               adjust={getLeftPlaceHolder ? true : false}
-              className={` ${rightClassName ? rightClassName : ''}`}
+              className={rightClassName}
             >
               <Container
                 alignBox='row'
@@ -82,9 +86,11 @@ export class SubtabHeader extends 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,
@@ -92,7 +98,7 @@ SubtabHeader.propTypes = {
   onAdd: PropTypes.func,
   rightClassName: PropTypes.string,
   title: PropTypes.string,
-  type: PropTypes.oneOf(['primary', 'secondary'])
+  type: PropTypes.oneOf(['primary', 'secondary', 'tertiary'])
 };
 
 SubtabHeader.defaultProps = {
@@ -100,7 +106,72 @@ SubtabHeader.defaultProps = {
   needBorder: true,
   needShadow: true,
   needPlusIconLine: true,
-  dataId: 'addreqNowbutton'
+  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 {
@@ -111,7 +182,7 @@ export class SubtabContent extends React.Component {
         scroll={scroll}
         isScrollAttribute
         onScroll={onScroll}
-        className={className ? className : ''}
+        customClass={className ? className : ''}
         eleRef={eleRef}
         dataId={dataId}
       >
@@ -149,13 +220,6 @@ export default class SubtabLayout extends React.Component {
   }
 }
 
-if (__DOCS__) {
-  SubtabLayout.docs = {
-    componentGroup: 'Template',
-    folderName: 'Style Guide'
-  };
-}
-
 SubtabLayout.defaultProps = {
   dataId: 'subTabLayout'
 };
@@ -164,3 +228,8 @@ SubtabLayout.propTypes = {
   children: PropTypes.oneOf([PropTypes.element, PropTypes.array]),
   dataId: PropTypes.string
 };
+if (__DOCS__) {
+  SubtabLayout.docs = {
+    componentGroup: 'Template'
+  };
+}

package/src/layout/SubtabLayout/SubtabLayout.module.css

@@ -1,7 +1,11 @@
+.varClass {
+  --borderColor: var(--zdt_subtablayout_border);
+}
 .tabHead,
 .shadowStyle {
   position: relative;
-  background: var(--dot_bg_white);
+  composes: varClass;
+  background: var(--zdt_subtablayout_tabhead_bg);
 }
 
 .left {
@@ -17,19 +21,23 @@
   position: absolute;
   content: '';
   left: var(--zd_size20);
-  background: var(--zd_bg_smoke3);
+  background: var(--zdt_subtablayout_plusicon_bg);
   width: var(--zd_size1);
   height: var(--zd_size28);
   top: var(--zd_size38);
   z-index: -1;
 }
 
-.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 {
-  box-shadow: 0 0 6px var(--zd_shadow_graytrans5);
+  box-shadow: 0 0 6px var(--zdt_subtablayout_shadowstyle_box_shadow);
   border-radius: 100px/10px;
   bottom: 0;
   content: '';
@@ -45,22 +53,68 @@
 }
 
 .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);
+  padding-left: var(--zd_size25);
 }
-
-.secondary {
-  padding: var(--zd_size27) var(--zd_size115) var(--zd_size26) var(--zd_size25);
+.primary,
+.primary_peek {
+  padding-right: var(--zd_size25);
+}
+.secondary,
+.secondary_peek {
+  padding-right: var(--zd_size115);
+}
+.primary_detailFooter,
+.primary_peekFooter {
+  padding-right: var(--zd_size25);
+}
+.secondary_detailFooter,
+.secondary_peekFooter {
+  padding-right: 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);
+}

package/src/layout/SubtabLayout/docs/SubtabLayout__default.docs.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SubtabLayout, SubtabHeader, SubtabContent } from '../';
+import { SubtabLayout, SubtabHeader, SubtabContent, SubtabFooter } from '../';
 
 export default class SubtabLayout__default extends React.Component {
   constructor(props) {
@@ -37,27 +37,9 @@ export default class SubtabLayout__default extends React.Component {
               <div style={boxStyle}>box 1</div>
               <div style={boxStyle}>box 1</div>
               <div style={boxStyle}>box 2</div>
-              <div style={boxStyle}>box 3345</div>
-              <div style={boxStyle}>box 1</div>
-              <div style={boxStyle}>box 1</div>
-              <div style={boxStyle}>box 1</div>
-              <div style={boxStyle}>box 1</div>
-              <div style={boxStyle}>box 1</div>
-              <div style={boxStyle}>box 1</div>
-              <div style={boxStyle}>box 1</div>
-              <div style={boxStyle}>box 1</div>
-              <div style={boxStyle}>box 1</div>
-              <div style={boxStyle}>box 1</div>
-              <div style={boxStyle}>box 1</div>
-              <div style={boxStyle}>box 1</div>
-              <div style={boxStyle}>box 1</div>
-              <div style={boxStyle}>box 1</div>
-              <div style={boxStyle}>box 1</div>
-              <div style={boxStyle}>box 1</div>
-              <div style={boxStyle}>box 1</div>
-              <div style={boxStyle}>box 1</div>
             </div>
           </SubtabContent>
+          <SubtabFooter>Footer</SubtabFooter>
         </SubtabLayout>
       </div>
     );
@@ -66,7 +48,6 @@ export default class SubtabLayout__default extends React.Component {
 
 if (__DOCS__) {
   SubtabLayout__default.docs = {
-    componentGroup: 'Template',
-    folderName: 'Style Guide'
+    componentGroup: 'Template'
   };
 }

package/src/layout/SubtabLayout/index.js

@@ -1,3 +1,4 @@
 export { default as SubtabLayout } from './SubtabLayout';
 export { SubtabHeader } from './SubtabLayout';
 export { SubtabContent } from './SubtabLayout';
+export { SubtabFooter } from './SubtabLayout';