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

package/assets/Appearance/pureDark/themes/yellow/yellow_CTA_PureDarkTheme.module.css

@@ -1,35 +1,35 @@
 [data-mode='pureDark'][data-theme='yellow'] {
 	/* CTA variables */
-	--zdt_cta_primary_text: hsla(37, 67%, calc(53% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
-	--zdt_cta_primary_hover_text: hsla(37, 66%, calc(65% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
-	--zdt_cta_primary_bg: hsla(37, 67%, calc(53% + var(--zd_pureDark_darker_low_lValue)), calc(1 + var(--zd_alpha_low)));
-	--zdt_cta_primary_hover_bg: hsla(39, 90%, calc(32% + var(--zd_pureDark_darker_low_lValue)), calc(1 + var(--zd_alpha_low)));
-	--zdt_cta_primary_border: hsla(37, 67%, calc(53% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
-	--zdt_cta_primary_hover_border: hsla(39, 90%, calc(32% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_primary_text: hsla(37, 66.94%, calc(52.55% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_primary_hover_text: hsla(37, 66.48%, calc(64.90% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_primary_bg: hsla(37, 66.94%, calc(52.55% + var(--zd_pureDark_darker_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_primary_hover_bg: hsla(39, 90.18%, calc(31.96% + var(--zd_pureDark_darker_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_primary_border: hsla(37, 66.94%, calc(52.55% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_primary_hover_border: hsla(39, 90.18%, calc(31.96% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
 	--zdt_cta_primary_box_shadow: rgba(232, 185, 35, 0.2);
 	--zdt_cta_primary_hover_box_shadow: rgba(181, 145, 0, 0.25);
-	--zdt_cta_primary_light_bg: hsla(35, 15%, calc(16% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
-	--zdt_cta_primary_light_hover_bg: hsla(37, 13%, calc(25% + var(--zd_pureDark_default_lValue)), calc(1 + var(--zd_alpha_high)));
-	--zdt_cta_primary_light_border: hsla(37, 13%, calc(25% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
-	--zdt_cta_secondary_bg: hsla(37, 67%, calc(53% + var(--zd_pureDark_default_lValue)), calc(1 + var(--zd_alpha_high)));
-	--zdt_cta_secondary_text: hsla(0, calc(0 * 1%), calc(100% + var(--zd_pureDark_lighter_high_lValue)), calc(1 + var(--zd_alpha_high)));
-	--zdt_cta_secondary_border: hsla(0, calc(0 * 1%), calc(100% + var(--zd_pureDark_default_inverse_medium_lValue)), calc( 0.15 + var(--zd_alpha_low)));
-	--zdt_cta_secondary_light_border: hsla(38, 30%, calc(21% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
-	--zdt_cta_alpha_text: hsla(37, 67%, calc(53% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
-	--zdt_cta_alpha_hover_text: hsla(39, 90%, calc(32% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
-	--zdt_cta_alpha_border: hsla(37, 67%, calc(53% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
-	--zdt_cta_alpha_hover_border: hsla(39, 90%, calc(32% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
-	--zdt_cta_alpha_bg: hsla(220, 3%, calc(21% + var(--zd_pureDark_default_lValue)), calc(1 + var(--zd_alpha_high)));
-	--zdt_cta_beta_border: hsla(37, 67%, calc(53% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
-	--zdt_cta_grey_10_bg: hsla(0, calc(0 * 1%), calc(15% + var(--zd_pureDark_darker_lowest_lValue)), calc(1 + var(--zd_alpha_high)));
-	--zdt_cta_grey_10_border: hsla(0, calc(0 * 1%), calc(15% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
-	--zdt_cta_grey_15_bg: hsla(0, 2%, calc(8% + var(--zd_pureDark_darker_lowest_lValue)), calc(1 + var(--zd_alpha_high)));
-	--zdt_cta_grey_15_border: hsla(0, 2%, calc(8% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
-	--zdt_cta_grey_20_bg: hsla(217, 23%, calc(11% + var(--zd_pureDark_darker_lowest_lValue)), calc(1 + var(--zd_alpha_high)));
-	--zdt_cta_grey_35_bg: hsla(0, calc(0 * 1%), calc(35% + var(--zd_pureDark_darker_lowest_lValue)), calc(1 + var(--zd_alpha_high)));
-	--zdt_cta_grey_35_text: hsla(0, calc(0 * 1%), calc(35% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
-	--zdt_cta_grey_35_border: hsla(0, calc(0 * 1%), calc(22% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
-	--zdt_cta_grey_40_bg: hsla(0, calc(0 * 1%), calc(35% + var(--zd_pureDark_darker_lowest_lValue)), calc(1 + var(--zd_alpha_high)));
-	--zdt_cta_grey_40_text: hsla(0, calc(0 * 1%), calc(35% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
-	--zdt_cta_grey_40_border: hsla(0, calc(0 * 1%), calc(35% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_primary_light_bg: hsla(35, 15.00%, calc(15.69% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_cta_primary_light_hover_bg: hsla(37, 12.70%, calc(24.71% + var(--zd_pureDark_default_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_cta_primary_light_border: hsla(37, 12.70%, calc(24.71% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_secondary_bg: hsla(37, 66.94%, calc(52.55% + var(--zd_pureDark_default_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_cta_secondary_text: hsla(0, 0.00%, calc(100.00% + var(--zd_pureDark_lighter_high_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_cta_secondary_border: hsla(0, 0.00%, calc(100.00% + var(--zd_pureDark_default_inverse_medium_lValue)), calc( 0.15 + var(--zd_alpha_low)));
+	--zdt_cta_secondary_light_border: hsla(38, 30.19%, calc(20.78% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_alpha_text: hsla(37, 66.94%, calc(52.55% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_alpha_hover_text: hsla(39, 90.18%, calc(31.96% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_alpha_border: hsla(37, 66.94%, calc(52.55% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_alpha_hover_border: hsla(39, 90.18%, calc(31.96% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_alpha_bg: hsla(220, 2.75%, calc(21.37% + var(--zd_pureDark_default_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_cta_beta_border: hsla(37, 66.94%, calc(52.55% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_grey_10_bg: hsla(0, 0.00%, calc(14.90% + var(--zd_pureDark_darker_lowest_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_cta_grey_10_border: hsla(0, 0.00%, calc(14.90% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_grey_15_bg: hsla(0, 2.33%, calc(8.43% + var(--zd_pureDark_darker_lowest_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_cta_grey_15_border: hsla(0, 2.33%, calc(8.43% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_grey_20_bg: hsla(217, 22.81%, calc(11.18% + var(--zd_pureDark_darker_lowest_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_cta_grey_35_bg: hsla(0, 0.00%, calc(34.51% + var(--zd_pureDark_darker_lowest_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_cta_grey_35_text: hsla(0, 0.00%, calc(34.51% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_cta_grey_35_border: hsla(0, 0.00%, calc(21.96% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_grey_40_bg: hsla(0, 0.00%, calc(34.51% + var(--zd_pureDark_darker_lowest_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_cta_grey_40_text: hsla(0, 0.00%, calc(34.51% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_cta_grey_40_border: hsla(0, 0.00%, calc(34.51% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
 }

package/es/Accordion/Accordion.js

@@ -9,18 +9,22 @@ export default class Accordion extends React.Component {
     };
     this.selectMenu = this.selectMenu.bind(this);
   }
+
   selectMenu(selectedItem) {
     let {
       onSelect,
       disableInternalState
     } = this.props;
+
     if (onSelect) {
       onSelect(selectedItem);
     }
+
     !disableInternalState && this.setState({
       selectedItem
     });
   }
+
   componentWillReceiveProps(nextProps) {
     if (this.props.selectedItem !== nextProps.selectedItem && !this.props.disableInternalState) {
       this.setState({
@@ -28,6 +32,7 @@ export default class Accordion extends React.Component {
       });
     }
   }
+
   render() {
     let {
       className,
@@ -65,14 +70,14 @@ export default class Accordion extends React.Component {
       "aria-expanded": ariaExpanded,
       "aria-haspopup": ariaHaspopup,
       "data-id": dataId,
+      "data-test-id": dataId,
       "data-selector-id": dataSelectorId
     }, children);
   }
+
 }
 Accordion.propTypes = Accordion_propTypes;
-Accordion.defaultProps = Accordion_defaultProps;
-
-// if (__DOCS__) {
+Accordion.defaultProps = Accordion_defaultProps; // if (__DOCS__) {
 //   Accordion.docs = {
 //     componentGroup: 'Animation',
 //     folderName: 'Style Guide'

package/es/Accordion/AccordionItem.js

@@ -8,6 +8,7 @@ export default class AccordionItem extends React.Component {
     super(props);
     this.equalityCheck = this.equalityCheck.bind(this);
   }
+
   equalityCheck() {
     let {
       equalityCheck,
@@ -16,6 +17,7 @@ export default class AccordionItem extends React.Component {
     } = this.props;
     return equalityCheck ? equalityCheck(id, selectedItem) : selectedItem == id;
   }
+
   render() {
     let {
       id,
@@ -36,6 +38,7 @@ export default class AccordionItem extends React.Component {
     return /*#__PURE__*/React.createElement("div", {
       className: className ? className : '',
       "data-id": dataId,
+      "data-test-id": dataId,
       role: role,
       "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement("div", {
@@ -49,10 +52,10 @@ export default class AccordionItem extends React.Component {
       isActive: this.equalityCheck()
     }, children[1]));
   }
+
 }
 AccordionItem.propTypes = AccordionItem_propTypes;
-AccordionItem.defaultProps = AccordionItem_defaultProps;
-// if (__DOCS__) {
+AccordionItem.defaultProps = AccordionItem_defaultProps; // if (__DOCS__) {
 //   AccordionItem.docs = {
 //     componentGroup: 'Animation',
 //     folderName: 'Style Guide'

package/es/Animation/Animation.js

@@ -7,6 +7,7 @@ export default class Animation extends React.Component {
   constructor(props) {
     super(props);
   }
+
   render() {
     let {
       name,
@@ -120,11 +121,10 @@ export default class Animation extends React.Component {
       onExit: onExit
     }, /*#__PURE__*/React.createElement(React.Fragment, null, children));
   }
+
 }
 Animation.propTypes = propTypes;
-Animation.defaultProps = defaultProps;
-
-// if (__DOCS__) {
+Animation.defaultProps = defaultProps; // if (__DOCS__) {
 //   Animation.docs = {
 //     componentGroup: 'Animation',
 //     folderName: 'Style Guide',

package/es/AppContainer/AppContainer.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 { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -30,22 +31,27 @@ export default class AppContainer extends React.Component {
       getTooltipContainer: () => this.containerElement
     });
   }
+
   mouseOverDispatch(e) {
     if (this.tooltipRef) {
       this.tooltipRef.handleOver(e, this.containerElement);
     }
   }
+
   removeTimeout() {
     if (this.timer) {
       this.timer = clearTimeout(this.timer);
     }
   }
+
   handleOver(e) {
     if (this.timer) {
       this.timer = clearTimeout(this.timer);
     }
+
     this.timer = setTimeout(() => this.mouseOverDispatch(e), this.tooltipDebounce);
   }
+
   getContainerRef(ref) {
     let {
       eleRef
@@ -53,23 +59,35 @@ export default class AppContainer extends React.Component {
     this.containerElement = ref;
     eleRef && eleRef(ref);
   }
+
   setTooltipRef(ref) {
     this.tooltipRef = ref;
   }
+
   componentDidMount() {
-    if (this.containerElement) {
+    let {
+      needTooltip
+    } = this.props;
+
+    if (this.containerElement && needTooltip) {
       this.containerElement.addEventListener('mouseover', this.handleOver, false);
       this.containerElement.addEventListener('mouseout', this.removeTimeout, false);
       this.tooltipRef.observeElement();
     }
   }
+
   componentWillUnmount() {
-    if (this.containerElement) {
+    let {
+      needTooltip
+    } = this.props;
+
+    if (this.containerElement && needTooltip) {
       this.containerElement.removeEventListener('mouseover', this.handleOver, false);
       this.containerElement.addEventListener('mouseout', this.removeTimeout, false);
       this.tooltipRef.unObserveElement();
     }
   }
+
   render() {
     let {
       className,
@@ -79,6 +97,7 @@ export default class AppContainer extends React.Component {
       dataSelectorId,
       tooltipClass,
       tooltipParentClass,
+      needTooltip,
       customProps
     } = this.props;
     let {
@@ -87,29 +106,27 @@ export default class AppContainer extends React.Component {
       ExtraProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, _extends({
-      className: `${style.container} ${className}`
-      //onMouseOver={this.handleOver}
-      ,
+      className: `${style.container} ${className}`,
       dataId: dataId,
       dataSelectorId: dataSelectorId,
       tagName: tagName,
       eleRef: this.getContainerRef
     }, ContainerProps, ExtraProps), /*#__PURE__*/React.createElement(Box, {
       flexible: true
-    }, children)), /*#__PURE__*/React.createElement("div", _extends({}, ExtraProps, {
+    }, children)), needTooltip ? /*#__PURE__*/React.createElement("div", _extends({}, ExtraProps, {
       className: `${style.container} ${style.tooltip} ${tooltipParentClass}`,
       "data-id": `${dataId}_tooltip`,
+      "data-test-id": `${dataId}_tooltip`,
       "data-selector-id": `${dataSelectorId}_tooltip`
     }), /*#__PURE__*/React.createElement(Tooltip, _extends({
       ref: this.setTooltipRef,
       customClass: tooltipClass
-    }, TooltipProps))));
+    }, TooltipProps))) : null);
   }
+
 }
 AppContainer.propTypes = propTypes;
-AppContainer.defaultProps = defaultProps;
-
-// if (__DOCS__) {
+AppContainer.defaultProps = defaultProps; // if (__DOCS__) {
 //   AppContainer.docs = {
 //     componentGroup: 'Template',
 //     folderName: 'Style Guide'

package/es/AppContainer/AppContainer.module.css

@@ -12,7 +12,7 @@
   font-family: var(--zd_regular);
 }
 .tooltip {
-  height: 0;
-  font-size: 0;
+  height: 0 ;
+  font-size: 0 ;
   /* contain:strict */
 }

package/es/AppContainer/props/defaultProps.js

@@ -5,5 +5,6 @@ export const defaultProps = {
   tooltipClass: '',
   tooltipParentClass: '',
   customProps: {},
-  dataSelectorId: 'appContainer'
+  dataSelectorId: 'appContainer',
+  needTooltip: true
 };

package/es/AppContainer/props/propTypes.js

@@ -6,6 +6,7 @@ export const propTypes = {
   eleRef: PropTypes.func,
   tagName: PropTypes.string,
   className: PropTypes.string,
+  needTooltip: PropTypes.bool,
   tooltipClass: PropTypes.string,
   tooltipParentClass: PropTypes.string,
   customProps: PropTypes.shape({

package/es/Avatar/Avatar.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 { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -17,6 +18,7 @@ eslint css-modules/no-unused-class: [2, { markAsUsed: ['circle', 'square',
 'small','medium','xmedium',"xsmall", "large", "xlarge", "primary", "secondary",
 "info","default"] }]
 */
+
 export default class Avatar extends React.Component {
   constructor(props) {
     super(props);
@@ -27,6 +29,7 @@ export default class Avatar extends React.Component {
     this.putValidImageURLJSON = this.putValidImageURLJSON.bind(this);
     this.getInitialByFullName = this.getInitialByFullName.bind(this);
   }
+
   componentDidUpdate(prevProps, prevState) {
     let {
       src
@@ -34,12 +37,14 @@ export default class Avatar extends React.Component {
     let {
       isLoaded
     } = this.state;
+
     if (prevProps.src !== src) {
       this.setState({
         isLoaded: !isLoaded
       });
     }
   }
+
   putInvalidImageURLJSON() {
     const {
       src,
@@ -49,23 +54,25 @@ export default class Avatar extends React.Component {
       isLoaded
     } = this.state;
     let _validImgArr = [...Avatar.validImageURLs];
-    let _invalidImgArr = [...Avatar.invalidImageURLs];
-
-    // if (alternateSrc) {
+    let _invalidImgArr = [...Avatar.invalidImageURLs]; // if (alternateSrc) {
     //   _validImgArr.push(alternateSrc);
     // }
 
     const validIndex = _validImgArr.indexOf(src);
+
     if (validIndex !== -1) {
       _validImgArr.splice(validIndex, 1);
     }
+
     _invalidImgArr.push(src);
+
     Avatar.invalidImageURLs = _invalidImgArr;
     Avatar.validImageURLs = _validImgArr;
     this.setState({
       isLoaded: !isLoaded
     });
   }
+
   putValidImageURLJSON() {
     const {
       src
@@ -75,28 +82,32 @@ export default class Avatar extends React.Component {
     } = this.state;
     const validImgArr = Avatar.validImageURLs;
     const invalidImgArr = Avatar.invalidImageURLs;
+
     if (src && validImgArr.indexOf(src) === -1 && invalidImgArr.indexOf(src) === -1) {
       let _validImgArr = [...validImgArr];
+
       _validImgArr.push(src);
+
       Avatar.validImageURLs = _validImgArr;
       this.setState({
         isLoaded: !isLoaded
       });
     }
   }
-
   /* this will cause error if user name already have some space need to move firstName lastName user preference pattern*/
+
+
   getInitialByFullName() {
     let fullName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
     fullName = (fullName || '').trim();
     let nameList = fullName.split(' ');
+
     if (nameList.length === 1) {
       return getInitial('', nameList[0]);
     }
-    return getInitial(nameList[0], nameList[1]);
-  }
 
-  // componentDidMount() {
+    return getInitial(nameList[0], nameList[1]);
+  } // componentDidMount() {
   //   const { src } = this.props;
   //   const validImgArr = Avatar.validImageURLs;
   //   if (validImgArr.indexOf(src) === -1) {
@@ -105,6 +116,7 @@ export default class Avatar extends React.Component {
   //   }
   // }
 
+
   render() {
     let {
       src,
@@ -135,8 +147,8 @@ export default class Avatar extends React.Component {
     let textStyle = textPalette ? style[textPalette] : palette === 'secondary' ? style.white : style.black;
     let shapeStyle = shape === 'circle' ? 'circle' : `square_${size}`;
     initial = initial || this.getInitialByFullName(name);
-    let isInvalidImageList = Avatar.invalidImageURLs.indexOf(src) !== -1;
-    //let isValidImageList = Avatar.validImageURLs.indexOf(src) !== -1;
+    let isInvalidImageList = Avatar.invalidImageURLs.indexOf(src) !== -1; //let isValidImageList = Avatar.validImageURLs.indexOf(src) !== -1;
+
     let showAvatar = src && !isInvalidImageList;
     let showInitial = !showAvatar || showAvatar && isInvalidImageList;
     const showAlternateAvatar = alternateSrc ? showInitial : false;
@@ -148,15 +160,18 @@ export default class Avatar extends React.Component {
       className: `${style.avatar} ${style[size]} ${AvatarSize(size)} ${style[shapeStyle]} ${style[palette]} ${textStyle} ${borderStyle} ${customClass ? customClass : ''}`,
       "data-title": needTitle ? title ? title : name : null,
       "data-id": dataId,
+      "data-test-id": dataId,
       onClick: onClick,
       "data-selector-id": dataSelectorId
     }, AvatarProps), showInitial && !showAlternateAvatar && /*#__PURE__*/React.createElement("span", {
       className: `${style.initial}`,
       "data-id": `${dataId}_AvatarInitial`,
+      "data-test-id": `${dataId}_AvatarInitial`,
       "data-selector-id": `${dataSelectorId}_AvatarInitial`
     }, initial), (showAvatar || showAlternateAvatar) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("img", {
       className: `${style.image} ${isAnimate ? style.animate : ''} ${needInnerBorder ? style.innerBorder : ''}`,
       "data-id": `${dataId}_AvatarImg`,
+      "data-test-id": `${dataId}_AvatarImg`,
       "data-selector-id": `${dataSelectorId}_AvatarImg`,
       name: name,
       onError: this.putInvalidImageURLJSON,
@@ -167,12 +182,12 @@ export default class Avatar extends React.Component {
       className: `${style.shadow} ${textStyle} `
     })));
   }
+
 }
 Avatar.defaultProps = defaultProps;
 Avatar.propTypes = propTypes;
 Avatar.invalidImageURLs = [];
-Avatar.validImageURLs = [];
-// if (__DOCS__) {
+Avatar.validImageURLs = []; // if (__DOCS__) {
 //   Avatar.docs = {
 //     componentGroup: 'Avatar Group',
 //     folderName: 'Style Guide'

package/es/Avatar/Avatar.module.css

@@ -1,7 +1,7 @@
 .varClass {
   /* avatar default variables */
   --avatar_text_color: var(--zdt_avatar_default_text);
-  --avatar_font_size: 14px;
+  --avatar_font_size: var(--zd_font_size14);
   --avatar_bg_color: var(--zdt_avatar_default_bg);
   --avatar_border_radius: 50%;
   --avatar_border_width: 0;
@@ -37,19 +37,19 @@
 
 .shadow {
   position: absolute;
-  height: 100%;
-  width: 100%;
-  top: 0;
+  height: 100% ;
+  width: 100% ;
+  top: 0 ;
   pointer-events: none;
   border-radius: var(--avatar_border_radius);
 }
 
 [dir=ltr] .shadow {
-  left: 0;
+  left: 0 ;
 }
 
 [dir=rtl] .shadow {
-  right: 0;
+  right: 0 ;
 }
 
 .shadow.black {
@@ -69,20 +69,20 @@
 }
 
 .image {
-  width: 100%;
-  height: 100%;
+  width: 100% ;
+  height: 100% ;
   position: absolute;
-  top: 0;
+  top: 0 ;
   z-index: 0;
   border-radius: var(--avatar_border_radius);
 }
 
 [dir=ltr] .image {
-  left: 0;
+  left: 0 ;
 }
 
 [dir=rtl] .image {
-  right: 0;
+  right: 0 ;
 }
 
 .animate {
@@ -141,31 +141,31 @@
 }
 
 .xxsmall {
-  --avatar_font_size: 8px;
+  --avatar_font_size: var(--zd_font_size8);
 }
 
 .small {
-  --avatar_font_size: 9px;
+  --avatar_font_size: var(--zd_font_size9);
 }
 
 .xsmall {
-  --avatar_font_size: 12px;
+  --avatar_font_size: var(--zd_font_size12);
 }
 
 .medium {
-  --avatar_font_size: 14px;
+  --avatar_font_size: var(--zd_font_size14);
 }
 
 .xmedium {
-  --avatar_font_size: 14px;
+  --avatar_font_size: var(--zd_font_size14);
 }
 
 .large {
-  --avatar_font_size: 18px;
+  --avatar_font_size: var(--zd_font_size18);
 }
 
 .xlarge {
-  --avatar_font_size: 28px;
+  --avatar_font_size: var(--zd_font_size28);
 }
 
 .white {

package/es/AvatarTeam/AvatarTeam.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 { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -49,6 +50,7 @@ export default class AvatarTeam extends React.Component {
     return /*#__PURE__*/React.createElement("span", _extends({
       className: `${style.container} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''} `,
       "data-id": dataId,
+      "data-test-id": dataId,
       "data-selector-id": dataSelectorId
     }, AvatarTeamProps), /*#__PURE__*/React.createElement(Avatar, _extends({
       name: name,
@@ -70,11 +72,10 @@ export default class AvatarTeam extends React.Component {
           ${style[`${size}team`]} ${customAvatarTeam}`
     }));
   }
+
 }
 AvatarTeam.defaultProps = defaultProps;
-AvatarTeam.propTypes = propTypes;
-
-// if (__DOCS__) {
+AvatarTeam.propTypes = propTypes; // if (__DOCS__) {
 //   AvatarTeam.docs = {
 //     componentGroup: 'Avatar Group',
 //     folderName: 'Style Guide',