@zohodesk/components 1.0.0-alpha-271 → 1.0.0-alpha-273

package/es/Button/css/Button.module.css

@@ -3,13 +3,13 @@
   /*  Variable:Ignore  */
   --button_letter_spacing: 0.2px;
   --button_cursor: pointer;
-  --button_font_size: 13px;
+  --button_font_size: var(--zd_font_size13);
   --button_text_color: var(--zdt_button_default_text);
   --button_font_family: var(--zd_regular);
   --button_text_transform: capitalize;
   --button_bg_color: var(--zdt_button_default_bg);
   --button_border_radius: 4px;
-  --button_min_width: 90px;
+  --button_min_width: var(--zd_size90);
   --button_height: auto;
   --button_border_width: 0;
   --button_border_style: solid;
@@ -72,38 +72,38 @@
 }
 
 .small {
-  --button_padding: 4px 7px;
-  --button_min_width: 50px;
-  --button_font_size: 10px;
+  --button_padding: var(--zd_size4) var(--zd_size7);
+  --button_min_width: var(--zd_size50);
+  --button_font_size: var(--zd_font_size10);
 }
 
 .medium {
-  --button_padding: 6px 15px;
+  --button_padding: var(--zd_size6) var(--zd_size15);
 }
 
 .large {
-  --button_padding: 9px 14px;
-  --button_min_width: 80px;
-  --button_font_size: 12px;
+  --button_padding: var(--zd_size9) var(--zd_size14);
+  --button_min_width: var(--zd_size80);
+  --button_font_size: var(--zd_font_size12);
 }
 
 .xlarge {
-  --button_padding: 12px 25px;
-  --button_min_width: 90px;
-  --button_font_size: 13px;
+  --button_padding: var(--zd_size12) var(--zd_size25);
+  --button_min_width: var(--zd_size90);
+  --button_font_size: var(--zd_font_size13);
 }
 
 .mediumBtn {
-  --button_height: 42px;
-  --button_min_width: 42px;
-  --button_font_size: 10px;
+  --button_height: var(--zd_size42);
+  --button_min_width: var(--zd_size42);
+  --button_font_size: var(--zd_font_size10);
   text-align: center;
 }
 
 .smallBtn {
-  --button_height: 22px;
-  --button_min_width: 22px;
-  --button_font_size: 13px;
+  --button_height: var(--zd_size22);
+  --button_min_width: var(--zd_size22);
+  --button_font_size: var(--zd_font_size13);
   text-align: center;
 }
 
@@ -132,7 +132,7 @@
 
 .plainprimary {
   --button_text_color: var(--zdt_button_default_text);
-  --button_padding: 5px;
+  --button_padding: var(--zd_size5);
   --button_min_width: initial;
   --button_bg_color: var(--zdt_button_default_bg);
 }
@@ -142,7 +142,7 @@
 
 .plainsecondary {
   --button_text_color: var(--zdt_button_secondary_text);
-  --button_padding: 5px;
+  --button_padding: var(--zd_size5);
   --button_min_width: initial;
   --button_bg_color: var(--zdt_button_default_bg);
 }
@@ -233,46 +233,46 @@
 
 .overlay {
   position: absolute;
-  top: 0;
-  bottom: 0;
+  top: 0 ;
+  bottom: 0 ;
   background: inherit;
   border-radius: inherit;
 }
 
 [dir=ltr] .overlay {
-  left: 0;
-  right: 0;
+  left: 0 ;
+  right: 0 ;
 }
 
 [dir=rtl] .overlay {
-  right: 0;
-  left: 0;
+  right: 0 ;
+  left: 0 ;
 }
 
 .loading {
   position: absolute;
-  top: 50%;
-  width: 20px;
-  height: 20px;
+  top: 50% ;
+  width: var(--zd_size20) ;
+  height: var(--zd_size20) ;
 }
 
 [dir=ltr] .loading {
-  left: 50%;
+  left: 50% ;
   transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
 }
 
 [dir=rtl] .loading {
-  right: 50%;
+  right: 50% ;
   transform: translate(50%, -50%);
   -moz-transform: translate(50%, -50%);
   -webkit-transform: translate(50%, -50%);
 }
 
 .loadingelement {
-  height: inherit;
-  width: inherit;
+  height: inherit ;
+  width: inherit ;
   position: relative;
   display: inline-block;
   border-radius: 50%;
@@ -304,23 +304,23 @@
 
 .smallloading,
 .mediumloading {
-  height: 10px;
-  width: 10px;
+  height: var(--zd_size10) ;
+  width: var(--zd_size10) ;
 }
 
 .loadingelement:after {
-  top: 1px;
-  bottom: 1px;
+  top: var(--zd_size1) ;
+  bottom: var(--zd_size1) ;
 }
 
 [dir=ltr] .loadingelement:after {
-  left: 1px;
-  right: 1px;
+  left: var(--zd_size1) ;
+  right: var(--zd_size1) ;
 }
 
 [dir=rtl] .loadingelement:after {
-  right: 1px;
-  left: 1px;
+  right: var(--zd_size1) ;
+  left: var(--zd_size1) ;
 }
 
 .loadingelement {
@@ -347,21 +347,21 @@
 }
 
 .loadingelement:before {
-  top: -1px;
-  bottom: -1px;
+  top: calc( var(--zd_size1) * -1 ) ;
+  bottom: calc( var(--zd_size1) * -1 ) ;
   background: var(--zdt_button_loading_linear_gradient);
   background-repeat: no-repeat;
   background-size: 50% 50%;
 }
 
 [dir=ltr] .loadingelement:before {
-  left: -1px;
-  right: -1px;
+  left: calc( var(--zd_size1) * -1 ) ;
+  right: calc( var(--zd_size1) * -1 ) ;
 }
 
 [dir=rtl] .loadingelement:before {
-  right: -1px;
-  left: -1px;
+  right: calc( var(--zd_size1) * -1 ) ;
+  left: calc( var(--zd_size1) * -1 ) ;
 }
 
 .primaryelement:before {
@@ -449,8 +449,8 @@
 }
 .success {
   position: absolute;
-  top: 50%;
-  left: 50%;
+  top: 50% ;
+  left: 50% ;
   transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
@@ -458,10 +458,10 @@
 }
 
 .successelement {
-  height: 15px;
+  height: var(--zd_size15) ;
   position: relative;
-  top: -2px;
-  width: 6px;
+  top: calc( var(--zd_size2) * -1 ) ;
+  width: var(--zd_size6) ;
   transform: scaleX(-1) rotate(135deg);
   -moz-transform: scaleX(-1) rotate(135deg);
   -webkit-transform: scaleX(-1) rotate(135deg);
@@ -474,52 +474,52 @@
 
 @keyframes tick {
   0% {
-    height: 0;
-    width: 0;
+    height: 0 ;
+    width: 0 ;
   }
 
   50% {
-    height: 0;
-    width: 6px;
+    height: 0 ;
+    width: var(--zd_size6) ;
   }
 
   100% {
-    height: 15px;
-    width: 6px;
+    height: var(--zd_size15) ;
+    width: var(--zd_size6) ;
   }
 }
 
 @-moz-keyframes tick {
   0% {
-    height: 0;
-    width: 0;
+    height: 0 ;
+    width: 0 ;
   }
 
   50% {
-    height: 0;
-    width: 6px;
+    height: 0 ;
+    width: var(--zd_size6) ;
   }
 
   100% {
-    height: 15px;
-    width: 6px;
+    height: var(--zd_size15) ;
+    width: var(--zd_size6) ;
   }
 }
 
 @-webkit-keyframes tick {
   0% {
-    height: 0;
-    width: 0;
+    height: 0 ;
+    width: 0 ;
   }
 
   50% {
-    height: 0;
-    width: 6px;
+    height: 0 ;
+    width: var(--zd_size6) ;
   }
 
   100% {
-    height: 15px;
-    width: 6px;
+    height: var(--zd_size15) ;
+    width: var(--zd_size6) ;
   }
 }
 

package/es/Buttongroup/Buttongroup.js

@@ -4,6 +4,7 @@ import { propTypes } from './props/propTypes';
 import style from './Buttongroup.module.css';
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['footer','header',
 'tab','alignleft','alignright','aligncenter' ] }] */
+
 export default class Buttongroup extends React.Component {
   render() {
     let {
@@ -29,11 +30,10 @@ export default class Buttongroup extends React.Component {
       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

@@ -24,17 +24,16 @@
 }
 
 [dir=ltr] .footer {
-  --buttongroup_padding: 20px 0 20px 60px
-    /*rtl: 20px 60px 20px 0*/
-  ;
+  --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60
+)    ;
 }
 
 [dir=rtl] .footer {
-  --buttongroup_padding: 20px 0 20px 60px  ;
+  --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60);
 }
 
 .header {
-  --buttongroup_padding: 12px 20px;
+  --buttongroup_padding: var(--zd_size12) var(--zd_size20);
   --buttongroup_border_width: 0 0 1px 0;
 }
 
@@ -67,41 +66,41 @@
 }
 
 [dir=ltr] .alignleft>button:first-child {
-  margin-left: 0;
+  margin-left: 0 ;
 }
 
 [dir=rtl] .alignleft>button:first-child {
-  margin-right: 0;
+  margin-right: 0 ;
 }
 
 [dir=ltr] .alignleft>button {
-  margin-left: 15px;
+  margin-left: var(--zd_size15) ;
 }
 
 [dir=rtl] .alignleft>button {
-  margin-right: 15px;
+  margin-right: var(--zd_size15) ;
 }
 
 [dir=ltr] .alignright>button:last-child {
-  margin-right: 0;
+  margin-right: 0 ;
 }
 
 [dir=rtl] .alignright>button:last-child {
-  margin-left: 0;
+  margin-left: 0 ;
 }
 
 [dir=ltr] .alignright>button {
-  margin-right: 15px;
+  margin-right: var(--zd_size15) ;
 }
 
 [dir=rtl] .alignright>button {
-  margin-left: 15px;
+  margin-left: var(--zd_size15) ;
 }
 
 [dir=ltr] .aligncenter>button {
-  margin-right: 15px;
+  margin-right: var(--zd_size15) ;
 }
 
 [dir=rtl] .aligncenter>button {
-  margin-left: 15px;
+  margin-left: var(--zd_size15) ;
 }

package/es/Card/Card.js

@@ -4,7 +4,6 @@ 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 */
 
 /*
@@ -14,20 +13,24 @@ 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;

package/es/CheckBox/CheckBox.js

@@ -1,4 +1,5 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 './props/propTypes';
 import { defaultProps } from './props/defaultProps';
@@ -11,6 +12,7 @@ export default class CheckBox extends React.Component {
     super(props);
     this.onChange = this.onChange.bind(this);
   }
+
   onChange(e) {
     let {
       onChange,
@@ -18,6 +20,7 @@ export default class CheckBox extends React.Component {
     } = this.props;
     onChange && onChange(!checked, e);
   }
+
   render() {
     let {
       id,
@@ -146,11 +149,10 @@ export default class CheckBox extends React.Component {
       title: toolTip ? toolTip : text
     }, LabelProps))));
   }
+
 }
 CheckBox.defaultProps = defaultProps;
-CheckBox.propTypes = propTypes;
-
-// if (__DOCS__) {
+CheckBox.propTypes = propTypes; // if (__DOCS__) {
 //   CheckBox.docs = {
 //     componentGroup: 'Form Elements',
 //     folderName: 'Style Guide'

package/es/CheckBox/CheckBox.module.css

@@ -41,33 +41,33 @@
   --checkbox_bg_color: inherit;
 }
 .medium {
-  width: 16px;
-  height: 16px;
+  width: var(--zd_size16) ;
+  height: var(--zd_size16) ;
 }
 .small {
-  width: 13px;
-  height: 13px;
+  width: var(--zd_size13) ;
+  height: var(--zd_size13) ;
 }
 
 .checkbox {
   position: relative;
-  font-size: 0;
+  font-size: 0 ;
   display: block;
 }
 .tick {
   position: absolute;
-  left: 0;
+  left: 0 ;
 }
 .mediumtick {
-  top: -2px;
-  height: 20px;
-  width: 20px;
+  top: calc( var(--zd_size2) * -1 ) ;
+  height: var(--zd_size20) ;
+  width: var(--zd_size20) ;
 }
 .smalltick {
-  top: -3px;
-  height: 18px;
-  width: 18px;
-  left: -1px;
+  top: calc( var(--zd_size3) * -1 ) ;
+  height: var(--zd_size18) ;
+  width: var(--zd_size18) ;
+  left: calc( var(--zd_size1) * -1 ) ;
 }
 
 .checkedtickPath {
@@ -91,10 +91,10 @@
   animation: lineAnimate var(--zd_transition3) ease forwards;
 }
 [dir=ltr] .text {
-  margin-left: 6px;
+  margin-left: var(--zd_size6) ;
 }
 [dir=rtl] .text {
-  margin-right: 6px;
+  margin-right: var(--zd_size6) ;
 }
 
 .checkedprimary,