@zohodesk/components 1.0.0-temp-164 → 1.0.0-temp-165

package/es/Buttongroup/Buttongroup.js

@@ -2,8 +2,9 @@ import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import style from './Buttongroup.module.css';
-/* eslint css-modules/no-unused-class: [2, { markAsUsed: ['footer','header',
+/* eslint css-modules/no-unused-class: [2, { markAsUsed: ['footer','header',
 'tab','alignleft','alignright','aligncenter' ] }] */
+
 export default class Buttongroup extends React.Component {
   render() {
     let {
@@ -24,16 +25,16 @@ export default class Buttongroup extends React.Component {
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.buttonGroup} ${style[type]} ${customClass ? customClass : ''}`,
       "data-id": dataId,
+      "data-test-id": dataId,
       "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement("div", {
       className: style[`align${buttonPosition}`]
     }, children));
   }
+
 }
 Buttongroup.defaultProps = defaultProps;
-Buttongroup.propTypes = propTypes;
-
-// if (__DOCS__) {
+Buttongroup.propTypes = propTypes; // if (__DOCS__) {
 //   Buttongroup.docs = {
 //     componentGroup: 'Molecule',
 //     folderName: 'Style Guide',

package/es/Buttongroup/Buttongroup.module.css

@@ -1,107 +1,106 @@
-.varClass {
-  /* button group default variables */
-  --buttongroup_bg_color: var(--zdt_buttongroup_default_bg);
-  --buttongroup_box_shadow: none;
-  --buttongroup_padding: 0;
-  --buttongroup_border_width: 0;
-  --buttongroup_border_style: solid;
-  --buttongroup_border_color: var(--zdt_buttongroup_default_border);
-}
-
-.buttonGroup {
-  composes: varClass;
-  composes: cboth from '../common/common.module.css';
-  background-color: var(--buttongroup_bg_color);
-  box-shadow: var(--buttongroup_box_shadow);
-  padding: var(--buttongroup_padding);
-  border-width: var(--buttongroup_border_width);
-  border-style: var(--buttongroup_border_style);
-  border-color: var(--buttongroup_border_color);
-}
-
-.footer {
-  --buttongroup_box_shadow: var(--zd_bs_buttongroup_footer);
-}
-
-[dir=ltr] .footer {
-  --buttongroup_padding: 20px 0 20px 60px
-    /*rtl: 20px 60px 20px 0*/
-  ;
-}
-
-[dir=rtl] .footer {
-  --buttongroup_padding: 20px 0 20px 60px  ;
-}
-
-.header {
-  --buttongroup_padding: 12px 20px;
-  --buttongroup_border_width: 0 0 1px 0;
-}
-
-[dir=ltr] .tab>div button:first-child {
-  border-radius: 5px 0 0 5px;
-}
-
-[dir=rtl] .tab>div button:first-child {
-  border-radius: 0 5px 5px 0;
-}
-
-[dir=ltr] .tab>div button:last-child {
-  border-radius: 0 5px 5px 0;
-}
-
-[dir=rtl] .tab>div button:last-child {
-  border-radius: 5px 0 0 5px;
-}
-
-.alignleft {
-  composes: fleft from '../common/common.module.css';
-}
-
-.alignright {
-  composes: fright from '../common/common.module.css';
-}
-
-.aligncenter {
-  composes: tcenter from '../common/common.module.css';
-}
-
-[dir=ltr] .alignleft>button:first-child {
-  margin-left: 0;
-}
-
-[dir=rtl] .alignleft>button:first-child {
-  margin-right: 0;
-}
-
-[dir=ltr] .alignleft>button {
-  margin-left: 15px;
-}
-
-[dir=rtl] .alignleft>button {
-  margin-right: 15px;
-}
-
-[dir=ltr] .alignright>button:last-child {
-  margin-right: 0;
-}
-
-[dir=rtl] .alignright>button:last-child {
-  margin-left: 0;
-}
-
-[dir=ltr] .alignright>button {
-  margin-right: 15px;
-}
-
-[dir=rtl] .alignright>button {
-  margin-left: 15px;
-}
-
-[dir=ltr] .aligncenter>button {
-  margin-right: 15px;
-}
-
-[dir=rtl] .aligncenter>button {
-  margin-left: 15px;
+.varClass {
+  /* button group default variables */
+  --buttongroup_bg_color: var(--zdt_buttongroup_default_bg);
+  --buttongroup_box_shadow: none;
+  --buttongroup_padding: 0;
+  --buttongroup_border_width: 0;
+  --buttongroup_border_style: solid;
+  --buttongroup_border_color: var(--zdt_buttongroup_default_border);
+}
+
+.buttonGroup {
+  composes: varClass;
+  composes: cboth from '../common/common.module.css';
+  background-color: var(--buttongroup_bg_color);
+  box-shadow: var(--buttongroup_box_shadow);
+  padding: var(--buttongroup_padding);
+  border-width: var(--buttongroup_border_width);
+  border-style: var(--buttongroup_border_style);
+  border-color: var(--buttongroup_border_color);
+}
+
+.footer {
+  --buttongroup_box_shadow: var(--zd_bs_buttongroup_footer);
+}
+
+[dir=ltr] .footer {
+  --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60
+)    ;
+}
+
+[dir=rtl] .footer {
+  --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60);
+}
+
+.header {
+  --buttongroup_padding: var(--zd_size12) var(--zd_size20);
+  --buttongroup_border_width: 0 0 1px 0;
+}
+
+[dir=ltr] .tab>div button:first-child {
+  border-radius: 5px 0 0 5px;
+}
+
+[dir=rtl] .tab>div button:first-child {
+  border-radius: 0 5px 5px 0;
+}
+
+[dir=ltr] .tab>div button:last-child {
+  border-radius: 0 5px 5px 0;
+}
+
+[dir=rtl] .tab>div button:last-child {
+  border-radius: 5px 0 0 5px;
+}
+
+.alignleft {
+  composes: fleft from '../common/common.module.css';
+}
+
+.alignright {
+  composes: fright from '../common/common.module.css';
+}
+
+.aligncenter {
+  composes: tcenter from '../common/common.module.css';
+}
+
+[dir=ltr] .alignleft>button:first-child {
+  margin-left: 0 ;
+}
+
+[dir=rtl] .alignleft>button:first-child {
+  margin-right: 0 ;
+}
+
+[dir=ltr] .alignleft>button {
+  margin-left: var(--zd_size15) ;
+}
+
+[dir=rtl] .alignleft>button {
+  margin-right: var(--zd_size15) ;
+}
+
+[dir=ltr] .alignright>button:last-child {
+  margin-right: 0 ;
+}
+
+[dir=rtl] .alignright>button:last-child {
+  margin-left: 0 ;
+}
+
+[dir=ltr] .alignright>button {
+  margin-right: var(--zd_size15) ;
+}
+
+[dir=rtl] .alignright>button {
+  margin-left: var(--zd_size15) ;
+}
+
+[dir=ltr] .aligncenter>button {
+  margin-right: var(--zd_size15) ;
+}
+
+[dir=rtl] .aligncenter>button {
+  margin-left: var(--zd_size15) ;
 }

package/es/Buttongroup/__test__/__snapshots__/Buttongroup.spec.js.snap

@@ -1,146 +1,146 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Button component should the button position is center 1`] = `
-<div
-  className="buttonGroup footer"
->
-  <div
-    className="aligncenter"
-  >
-    <button
-      className=" primaryfilled    medium bold  "
-      data-id="buttonComp"
-      disabled={false}
-      onClick={[Function]}
-      type="button"
-    >
-      Submit
-    </button>
-    <button
-      className=" secondary    medium bold  "
-      data-id="buttonComp"
-      disabled={false}
-      onClick={[Function]}
-      type="button"
-    >
-      Cancel
-    </button>
-  </div>
-</div>
-`;
-
-exports[`Button component should the button position is left 1`] = `
-<div
-  className="buttonGroup footer"
->
-  <div
-    className="alignleft"
-  >
-    <button
-      className=" primaryfilled    medium bold  "
-      data-id="buttonComp"
-      disabled={false}
-      onClick={[Function]}
-      type="button"
-    >
-      Submit
-    </button>
-    <button
-      className=" secondary    medium bold  "
-      data-id="buttonComp"
-      disabled={false}
-      onClick={[Function]}
-      type="button"
-    >
-      Cancel
-    </button>
-  </div>
-</div>
-`;
-
-exports[`Button component should the button position is right 1`] = `
-<div
-  className="buttonGroup footer"
->
-  <div
-    className="alignright"
-  >
-    <button
-      className=" primaryfilled    medium bold  "
-      data-id="buttonComp"
-      disabled={false}
-      onClick={[Function]}
-      type="button"
-    >
-      Submit
-    </button>
-    <button
-      className=" secondary    medium bold  "
-      data-id="buttonComp"
-      disabled={false}
-      onClick={[Function]}
-      type="button"
-    >
-      Cancel
-    </button>
-  </div>
-</div>
-`;
-
-exports[`Button component should the type is footer 1`] = `
-<div
-  className="buttonGroup footer"
->
-  <div
-    className="alignleft"
-  >
-    <button
-      className=" primaryfilled    medium bold  "
-      data-id="buttonComp"
-      disabled={false}
-      onClick={[Function]}
-      type="button"
-    >
-      Submit
-    </button>
-    <button
-      className=" secondary    medium bold  "
-      data-id="buttonComp"
-      disabled={false}
-      onClick={[Function]}
-      type="button"
-    >
-      Cancel
-    </button>
-  </div>
-</div>
-`;
-
-exports[`Button component should the type is header 1`] = `
-<div
-  className="buttonGroup header"
->
-  <div
-    className="alignleft"
-  >
-    <button
-      className=" primaryfilled    medium bold  "
-      data-id="buttonComp"
-      disabled={false}
-      onClick={[Function]}
-      type="button"
-    >
-      Submit
-    </button>
-    <button
-      className=" secondary    medium bold  "
-      data-id="buttonComp"
-      disabled={false}
-      onClick={[Function]}
-      type="button"
-    >
-      Cancel
-    </button>
-  </div>
-</div>
-`;
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button component should the button position is center 1`] = `
+<div
+  className="buttonGroup footer"
+>
+  <div
+    className="aligncenter"
+  >
+    <button
+      className=" primaryfilled    medium bold  "
+      data-id="buttonComp"
+      disabled={false}
+      onClick={[Function]}
+      type="button"
+    >
+      Submit
+    </button>
+    <button
+      className=" secondary    medium bold  "
+      data-id="buttonComp"
+      disabled={false}
+      onClick={[Function]}
+      type="button"
+    >
+      Cancel
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Button component should the button position is left 1`] = `
+<div
+  className="buttonGroup footer"
+>
+  <div
+    className="alignleft"
+  >
+    <button
+      className=" primaryfilled    medium bold  "
+      data-id="buttonComp"
+      disabled={false}
+      onClick={[Function]}
+      type="button"
+    >
+      Submit
+    </button>
+    <button
+      className=" secondary    medium bold  "
+      data-id="buttonComp"
+      disabled={false}
+      onClick={[Function]}
+      type="button"
+    >
+      Cancel
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Button component should the button position is right 1`] = `
+<div
+  className="buttonGroup footer"
+>
+  <div
+    className="alignright"
+  >
+    <button
+      className=" primaryfilled    medium bold  "
+      data-id="buttonComp"
+      disabled={false}
+      onClick={[Function]}
+      type="button"
+    >
+      Submit
+    </button>
+    <button
+      className=" secondary    medium bold  "
+      data-id="buttonComp"
+      disabled={false}
+      onClick={[Function]}
+      type="button"
+    >
+      Cancel
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Button component should the type is footer 1`] = `
+<div
+  className="buttonGroup footer"
+>
+  <div
+    className="alignleft"
+  >
+    <button
+      className=" primaryfilled    medium bold  "
+      data-id="buttonComp"
+      disabled={false}
+      onClick={[Function]}
+      type="button"
+    >
+      Submit
+    </button>
+    <button
+      className=" secondary    medium bold  "
+      data-id="buttonComp"
+      disabled={false}
+      onClick={[Function]}
+      type="button"
+    >
+      Cancel
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Button component should the type is header 1`] = `
+<div
+  className="buttonGroup header"
+>
+  <div
+    className="alignleft"
+  >
+    <button
+      className=" primaryfilled    medium bold  "
+      data-id="buttonComp"
+      disabled={false}
+      onClick={[Function]}
+      type="button"
+    >
+      Submit
+    </button>
+    <button
+      className=" secondary    medium bold  "
+      data-id="buttonComp"
+      disabled={false}
+      onClick={[Function]}
+      type="button"
+    >
+      Cancel
+    </button>
+  </div>
+</div>
+`;

package/es/Card/Card.js

@@ -4,30 +4,33 @@ import { Card_defaultProps, CardHeader_defaultProps, CardContent_defaultProps, C
 import { Container, Box } from '../Layout';
 import { getLibraryConfig } from '../Provider/Config';
 import style from './Card.module.css';
-
 /* eslint-disable react/forbid-component-props */
 
-/*
-isscroll header border change use ref
-scroll logic remove from here
-scroll logic move to virtualizer list
+/*
+isscroll header border change use ref
+scroll logic remove from here
+scroll logic move to virtualizer list
 */
 
 /* performance handling pending in card component moving to ref instead of setState */
+
 export class CardHeader extends Component {
   constructor(props) {
     super(props);
     this.getCardHeaderDom = this.getCardHeaderDom.bind(this);
     this.cardHeader = null;
   }
+
   getCardHeaderDom(ele) {
     this.cardHeader = ele;
   }
+
   setScrollClassName() {
     if (!this.cardHeader) {
       return null;
     }
   }
+
   render() {
     let {
       isScroll,
@@ -43,6 +46,7 @@ export class CardHeader extends Component {
       dataSelectorId: dataSelectorId
     }, children);
   }
+
 }
 CardHeader.propTypes = CardHeader_propTypes;
 CardHeader.defaultProps = CardHeader_defaultProps;
@@ -73,6 +77,7 @@ export class CardContent extends Component {
       dataSelectorId: dataSelectorId
     }, children);
   }
+
 }
 CardContent.propTypes = CardContent_propTypes;
 CardContent.defaultProps = CardContent_defaultProps;
@@ -91,8 +96,7 @@ export default class Card extends Component {
     this.to = from + 3 * limit;
     this.isFetching = false;
     this.lastScrollTop = 0;
-    this.onScroll = this.onScroll.bind(this);
-    //this.onSetScroll = debounce(this.setScroll.bind(this, true), 10, true);
+    this.onScroll = this.onScroll.bind(this); //this.onSetScroll = debounce(this.setScroll.bind(this, true), 10, true);
     //this.onClearScroll = debounce(this.setScroll.bind(this, false), 500);
   }
 
@@ -101,6 +105,7 @@ export default class Card extends Component {
       this.from = nextProps.from;
     }
   }
+
   onScroll(e) {
     let scrollContainerObj = e.currentTarget;
     let {
@@ -124,16 +129,20 @@ export default class Card extends Component {
       // isScrollShadow,
       isPercentageScroll
     } = this.props;
+
     if (scrollTop > this.lastScrollTop) {
       this.scrollDirection = 'down';
     } else {
       this.scrollDirection = 'up';
     }
+
     this.lastScrollTop = scrollTop;
+
     if (fetchData && !this.isFetching) {
       if (this.scrollDirection === 'down' && !noMoreData) {
         const scrollingPercentage = (scrollTop + offsetHeight) / (scrollHeight - scrollAt) * 100;
         const prefetch = isPercentageScroll ? scrollingPercentage >= getLibraryConfig('scrollFetchLimit') : scrollHeight - scrollAt <= scrollTop + offsetHeight;
+
         if (prefetch) {
           this.isFetching = true;
           fetchData(this.from + this.limit, this.limit + this.to, this.scrollDirection).then(() => {
@@ -155,19 +164,18 @@ export default class Card extends Component {
         }
       }
     }
+
     if (fetchData && !noNeedUpScroll) {
       if (this.from !== 0 && scrollTop === 0 && !noNeedUpScroll) {
         scrollContainerObj.scrollTop = scrollTop + offsetHeight / 3;
       } else if (scrollHeight === scrollTop + offsetHeight && !noMoreData) {
         scrollContainerObj.scrollTop = scrollTop - offsetHeight / 2;
       }
-    }
-    // if (isScrollShadow) {
+    } // if (isScrollShadow) {
     //   this.onSetScroll();
     // }
-  }
 
-  // setScroll(isScroll) {
+  } // setScroll(isScroll) {
   //   let { isScroll: stateIsScroll } = this.state;
   //   if (isScroll && !stateIsScroll) {
   //     this.setState({ isScroll: true }, () => {
@@ -178,6 +186,7 @@ export default class Card extends Component {
   //   }
   // }
 
+
   render() {
     let {
       onClick,
@@ -205,6 +214,7 @@ export default class Card extends Component {
       if (!child) {
         return child;
       }
+
       if (child.type === CardHeader || this.props.childTypes && child.type === this.props.childTypes.cardHeader) {
         return /*#__PURE__*/React.cloneElement(child, {
           isScroll
@@ -225,14 +235,14 @@ export default class Card extends Component {
           dataSelectorId: child.props.dataSelectorId
         }, child.props.children);
       }
+
       return child;
     }));
   }
+
 }
 Card.propTypes = Card_propTypes;
-Card.defaultProps = Card_defaultProps;
-
-// if (__DOCS__) {
+Card.defaultProps = Card_defaultProps; // if (__DOCS__) {
 //   Card.docs = {
 //     componentGroup: 'Template',
 //     folderName: 'Style Guide',
@@ -255,6 +265,7 @@ export class CardFooter extends Component {
       dataSelectorId: dataSelectorId
     }, children);
   }
+
 }
 CardFooter.propTypes = CardFooter_propTypes;
 CardFooter.defaultProps = CardFooter_defaultProps;