@zohodesk/components 1.0.0-test-252 → 1.1.0

package/es/Card/Card.js

@@ -1,48 +1,55 @@
 import React, { Component } from 'react';
 import { CardHeader_propTypes, CardContent_propTypes, Card_propTypes, CardFooter_propTypes } from './props/propTypes';
-import { Card_defaultProps, CardContent_defaultProps } from './props/defaultProps';
+import { Card_defaultProps, CardHeader_defaultProps, CardContent_defaultProps, CardFooter_defaultProps } from './props/defaultProps';
 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,
       children,
-      dataId = 'CardHeader',
-      customClass = ''
+      dataId,
+      dataSelectorId,
+      customClass
     } = this.props;
     return /*#__PURE__*/React.createElement(Box, {
       className: `${isScroll ? style.scroll : style.notScroll} ${customClass}`,
       eleRef: this.getCardHeaderDom,
-      dataId: dataId
+      dataId: dataId,
+      dataSelectorId: dataSelectorId
     }, children);
   }
+
 }
 CardHeader.propTypes = CardHeader_propTypes;
+CardHeader.defaultProps = CardHeader_defaultProps;
 export class CardContent extends Component {
   render() {
     let {
@@ -52,6 +59,7 @@ export class CardContent extends Component {
       scroll,
       isScrollAttribute,
       dataId,
+      dataSelectorId,
       shrink,
       customClass,
       preventParentScroll
@@ -65,9 +73,11 @@ export class CardContent extends Component {
       isScrollAttribute: isScrollAttribute,
       dataId: dataId,
       shrink: shrink,
-      className: customClass
+      className: customClass,
+      dataSelectorId: dataSelectorId
     }, children);
   }
+
 }
 CardContent.propTypes = CardContent_propTypes;
 CardContent.defaultProps = CardContent_defaultProps;
@@ -86,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);
   }
 
@@ -96,6 +105,7 @@ export default class Card extends Component {
       this.from = nextProps.from;
     }
   }
+
   onScroll(e) {
     let scrollContainerObj = e.currentTarget;
     let {
@@ -119,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(() => {
@@ -150,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 }, () => {
@@ -173,6 +186,7 @@ export default class Card extends Component {
   //   }
   // }
 
+
   render() {
     let {
       onClick,
@@ -200,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
@@ -216,34 +231,41 @@ export default class Card extends Component {
           isScrollAttribute: child.props.isScrollAttribute,
           dataId: child.props.dataId,
           shrink: child.props.shrink,
-          className: child.props.customClass
+          className: child.props.customClass,
+          dataSelectorId: child.props.dataSelectorId
         }, child.props.children);
       }
+
       return child;
     }));
   }
+
 }
 Card.propTypes = Card_propTypes;
-Card.defaultProps = Card_defaultProps;
-if (false) {
-  Card.docs = {
-    componentGroup: 'Template',
-    folderName: 'Style Guide',
-    external: true,
-    description: ' '
-  };
-}
+Card.defaultProps = Card_defaultProps; // if (__DOCS__) {
+//   Card.docs = {
+//     componentGroup: 'Template',
+//     folderName: 'Style Guide',
+//     external: true,
+//     description: ' '
+//   };
+// }
+
 export class CardFooter extends Component {
   render() {
     let {
       children,
-      dataId = 'CardFooter',
-      customClass = ''
+      dataId,
+      customClass,
+      dataSelectorId
     } = this.props;
     return /*#__PURE__*/React.createElement(Box, {
       className: `${customClass}`,
-      dataId: dataId
+      dataId: dataId,
+      dataSelectorId: dataSelectorId
     }, children);
   }
+
 }
-CardFooter.propTypes = CardFooter_propTypes;
+CardFooter.propTypes = CardFooter_propTypes;
+CardFooter.defaultProps = CardFooter_defaultProps;

package/es/Card/Card.module.css

@@ -1,20 +1,20 @@
-.notScroll {
-  position: relative;
-}
-.scroll {
-  /* background: var(--dot_white);
-  position: relative; */
-}
-/*
-.scroll::after {
-  box-shadow: 0 0 6px var(--zd_dark10);
-  border-radius: 100px / 10px;
-  content: '';
-  left: var(--zd_size50);
-  position: absolute;
-  right: var(--zd_size50);
-  display: block;
-  z-index: -1;
-  height: var(--zd_size1);
-  bottom: 0;
-} */
+.notScroll {
+  position: relative;
+}
+.scroll {
+  /* background: var(--dot_white);
+  position: relative; */
+}
+/*
+.scroll::after {
+  box-shadow: 0 0 6px var(--zd_dark10);
+  border-radius: 100px / 10px;
+  content: '';
+  left: var(--zd_size50);
+  position: absolute;
+  right: var(--zd_size50);
+  display: block;
+  z-index: -1;
+  height: var(--zd_size1);
+  bottom: 0;
+} */

package/es/Card/props/defaultProps.js

@@ -6,10 +6,20 @@ export const Card_defaultProps = {
   a11y: {},
   isPercentageScroll: false
 };
+export const CardHeader_defaultProps = {
+  dataId: 'CardHeader',
+  customClass: '',
+  dataSelectorId: 'cardHeader'
+};
 export const CardContent_defaultProps = {
   isScrollAttribute: false,
   scroll: 'vertical',
-  preventParentScroll: 'vertical',
   dataId: 'CardContent',
-  customClass: ''
+  customClass: '',
+  dataSelectorId: 'cardContent'
+};
+export const CardFooter_defaultProps = {
+  dataId: 'CardFooter',
+  customClass: '',
+  dataSelectorId: 'cardFooter'
 };

package/es/Card/props/propTypes.js

@@ -11,10 +11,10 @@ export const CardContent_propTypes = {
   eleRef: PropTypes.func,
   isScrollAttribute: PropTypes.bool,
   onScroll: PropTypes.func,
-  scroll: PropTypes.PropTypes.oneOf(['vertical', 'horizontal', 'both', 'none']),
+  scroll: PropTypes.oneOf(['vertical', 'horizontal', 'both', 'none']),
   shrink: PropTypes.bool,
   customClass: PropTypes.string,
-  preventParentScroll: PropTypes.PropTypes.oneOf(['vertical', 'horizontal', 'both'])
+  preventParentScroll: PropTypes.oneOf(['vertical', 'horizontal', 'both'])
 };
 export const Card_propTypes = {
   childTypes: PropTypes.object,

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,
@@ -41,7 +44,8 @@ export default class CheckBox extends React.Component {
       activeStyle,
       a11y,
       customClass,
-      customProps
+      customProps,
+      dataSelectorId
     } = this.props;
     let {
       CheckBoxProps = {},
@@ -78,7 +82,7 @@ export default class CheckBox extends React.Component {
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledby,
       "aria-hidden": ariaHidden,
-      "data-selector": id
+      "data-selector-id": dataSelectorId || id
     }, CheckBoxProps), /*#__PURE__*/React.createElement(Box, {
       className: `${style.boxContainer} ${style[size]} ${customCBoxSize} ${isFilled ? style.filled : ''}`
     }, /*#__PURE__*/React.createElement("input", {
@@ -145,12 +149,12 @@ export default class CheckBox extends React.Component {
       title: toolTip ? toolTip : text
     }, LabelProps))));
   }
+
 }
 CheckBox.defaultProps = defaultProps;
-CheckBox.propTypes = propTypes;
-if (false) {
-  CheckBox.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide'
-  };
-}
+CheckBox.propTypes = propTypes; // if (__DOCS__) {
+//   CheckBox.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/CheckBox/CheckBox.module.css

@@ -1,157 +1,157 @@
-.varClass {
-  /* checkbox default variables */
-  --checkbox_bg_color: var(--zdt_checkbox_default_bg);
-  --checkbox_cursor: auto;
-  --checkbox_stroke_width: var(--zd_size2);
-  --checkbox_stroke_color: var(--zdt_checkbox_default_stroke_border);
-
-  /* checkbox checked state default variables */
-  --checkbox_checked_stroke_color: var(--zdt_checkbox_primary_stroke_border);
-  --checkbox_checked_active_color: var(--zdt_checkbox_primary_stroke_border);
-}
-.container {
-  composes: varClass;
-  stroke: var(--checkbox_stroke_color);
-}
-.container, .pointer, .readonly {
-  cursor: var(--checkbox_cursor);
-}
-.pointer {
-  --checkbox_cursor: pointer;
-}
-.readonly {
-  --checkbox_cursor: default;
-}
-.cbBox {
-  fill: none;
-  stroke-width: var(--checkbox_stroke_width);
-  stroke-linecap: round;
-  stroke: inherit;
-}
-.tickPath {
-  composes: cbBox;
-  stroke-dasharray: 40;
-}
-.boxContainer {
-  composes: offSelection from '../common/common.module.css';
-  border-radius: 2px;
-  background-color: var(--checkbox_bg_color);
-}
-.filled {
-  --checkbox_bg_color: inherit;
-}
-.medium {
-  width: var(--zd_size16);
-  height: var(--zd_size16);
-}
-.small {
-  width: var(--zd_size13);
-  height: var(--zd_size13);
-}
-
-.checkbox {
-  position: relative;
-  font-size: 0;
-  display: block;
-}
-.tick {
-  position: absolute;
-  left: 0;
-}
-.mediumtick {
-  top: calc(var(--zd_size2) * -1);
-  height: var(--zd_size20);
-  width: var(--zd_size20);
-}
-.smalltick {
-  top: calc(var(--zd_size3) * -1);
-  height: var(--zd_size18);
-  width: var(--zd_size18);
-  left: calc(var(--zd_size1) * -1);
-}
-
-.checkedtickPath {
-  stroke-dashoffset: 40;
-}
-
-[dir=ltr] .checkedtickPath {
-  animation: tickAnimate var(--zd_transition3) ease forwards;
-}
-
-[dir=rtl] .checkedtickPath {
-  animation: tickAnimate var(--zd_transition3) ease forwards;
-}
-.linePath {
-  transform-origin: center;
-}
-[dir=ltr] .linePath {
-  animation: lineAnimate var(--zd_transition3) ease forwards;
-}
-[dir=rtl] .linePath {
-  animation: lineAnimate var(--zd_transition3) ease forwards;
-}
-[dir=ltr] .text {
-  margin-left: var(--zd_size6);
-}
-[dir=rtl] .text {
-  margin-right: var(--zd_size6);
-}
-
-.checkedprimary,
-.checkeddanger {
-  stroke: var(--checkbox_checked_stroke_color);
-}
-.primary:hover
-/* .primary:focus  */
-{
-  --checkbox_stroke_color: var(--zdt_checkbox_primary_stroke_border);
-}
-.checkedprimary {
-  --checkbox_checked_stroke_color: var(--zdt_checkbox_primary_stroke_border);
-}
-.danger:hover
-/* .danger:focus */
- {
-  --checkbox_stroke_color: var(--zdt_checkbox_danger_stroke_border);
-}
-.checkeddanger {
-  --checkbox_checked_stroke_color: var(--zdt_checkbox_danger_stroke_border);
-}
-
-.checkedprimaryLabel,
-.checkeddangerLabel {
-  color: var(--checkbox_checked_active_color);
-}
-.activeprimaryLabel:hover
-/* .activeprimaryLabel:focus  */
-{
-  --label_text_color: var(--zdt_checkbox_label_primary_text);
-}
-.checkedprimaryLabel {
-  --checkbox_checked_active_color: var(--zdt_checkbox_primary_stroke_border);
-}
-.activedangerLabel:hover
-/* .activedangerLabel:focus  */
-{
-  --label_text_color: var(--zdt_checkbox_label_danger_text);
-}
-.checkeddangerLabel {
-  --checkbox_checked_active_color: var(--zdt_checkbox_danger_stroke_border);
-}
-@keyframes tickAnimate {
-  0% {
-    stroke-dashoffset: 40;
-  }
-  100% {
-    stroke-dashoffset: 0;
-  }
-}
-
-@keyframes lineAnimate {
-  0% {
-    transform: scaleX(0);
-  }
-  100% {
-    transform: scaleX(1);
-  }
-}
+.varClass {
+  /* checkbox default variables */
+  --checkbox_bg_color: var(--zdt_checkbox_default_bg);
+  --checkbox_cursor: auto;
+  --checkbox_stroke_width: 2px;
+  --checkbox_stroke_color: var(--zdt_checkbox_default_stroke_border);
+
+  /* checkbox checked state default variables */
+  --checkbox_checked_stroke_color: var(--zdt_checkbox_primary_stroke_border);
+  --checkbox_checked_active_color: var(--zdt_checkbox_primary_stroke_border);
+}
+.container {
+  composes: varClass;
+  stroke: var(--checkbox_stroke_color);
+}
+.container, .pointer, .readonly {
+  cursor: var(--checkbox_cursor);
+}
+.pointer {
+  --checkbox_cursor: pointer;
+}
+.readonly {
+  --checkbox_cursor: default;
+}
+.cbBox {
+  fill: none;
+  stroke-width: var(--checkbox_stroke_width);
+  stroke-linecap: round;
+  stroke: inherit;
+}
+.tickPath {
+  composes: cbBox;
+  stroke-dasharray: 40;
+}
+.boxContainer {
+  composes: offSelection from '../common/common.module.css';
+  border-radius: 2px;
+  background-color: var(--checkbox_bg_color);
+}
+.filled {
+  --checkbox_bg_color: inherit;
+}
+.medium {
+  width: var(--zd_size16) ;
+  height: var(--zd_size16) ;
+}
+.small {
+  width: var(--zd_size13) ;
+  height: var(--zd_size13) ;
+}
+
+.checkbox {
+  position: relative;
+  font-size: 0 ;
+  display: block;
+}
+.tick {
+  position: absolute;
+  left: 0 ;
+}
+.mediumtick {
+  top: calc( var(--zd_size2) * -1 ) ;
+  height: var(--zd_size20) ;
+  width: var(--zd_size20) ;
+}
+.smalltick {
+  top: calc( var(--zd_size3) * -1 ) ;
+  height: var(--zd_size18) ;
+  width: var(--zd_size18) ;
+  left: calc( var(--zd_size1) * -1 ) ;
+}
+
+.checkedtickPath {
+  stroke-dashoffset: 40;
+}
+
+[dir=ltr] .checkedtickPath {
+  animation: tickAnimate var(--zd_transition3) ease forwards;
+}
+
+[dir=rtl] .checkedtickPath {
+  animation: tickAnimate var(--zd_transition3) ease forwards;
+}
+.linePath {
+  transform-origin: center;
+}
+[dir=ltr] .linePath {
+  animation: lineAnimate var(--zd_transition3) ease forwards;
+}
+[dir=rtl] .linePath {
+  animation: lineAnimate var(--zd_transition3) ease forwards;
+}
+[dir=ltr] .text {
+  margin-left: var(--zd_size6) ;
+}
+[dir=rtl] .text {
+  margin-right: var(--zd_size6) ;
+}
+
+.checkedprimary,
+.checkeddanger {
+  stroke: var(--checkbox_checked_stroke_color);
+}
+.primary:hover
+/* .primary:focus  */
+{
+  --checkbox_stroke_color: var(--zdt_checkbox_primary_stroke_border);
+}
+.checkedprimary {
+  --checkbox_checked_stroke_color: var(--zdt_checkbox_primary_stroke_border);
+}
+.danger:hover
+/* .danger:focus */
+ {
+  --checkbox_stroke_color: var(--zdt_checkbox_danger_stroke_border);
+}
+.checkeddanger {
+  --checkbox_checked_stroke_color: var(--zdt_checkbox_danger_stroke_border);
+}
+
+.checkedprimaryLabel,
+.checkeddangerLabel {
+  color: var(--checkbox_checked_active_color);
+}
+.activeprimaryLabel:hover
+/* .activeprimaryLabel:focus  */
+{
+  --label_text_color: var(--zdt_checkbox_label_primary_text);
+}
+.checkedprimaryLabel {
+  --checkbox_checked_active_color: var(--zdt_checkbox_primary_stroke_border);
+}
+.activedangerLabel:hover
+/* .activedangerLabel:focus  */
+{
+  --label_text_color: var(--zdt_checkbox_label_danger_text);
+}
+.checkeddangerLabel {
+  --checkbox_checked_active_color: var(--zdt_checkbox_danger_stroke_border);
+}
+@keyframes tickAnimate {
+  0% {
+    stroke-dashoffset: 40;
+  }
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes lineAnimate {
+  0% {
+    transform: scaleX(0);
+  }
+  100% {
+    transform: scaleX(1);
+  }
+}

package/es/CheckBox/props/propTypes.js

@@ -6,6 +6,7 @@ export const propTypes = {
   ariaLabelledby: PropTypes.string,
   checked: PropTypes.bool,
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   disabled: PropTypes.bool,
   disabledTitle: PropTypes.string,
   getRef: PropTypes.func,