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

package/lib/AppContainer/AppContainer.js

@@ -1,47 +1,80 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+
 var _react = _interopRequireDefault(require("react"));
+
 var _defaultProps = require("./props/defaultProps");
+
 var _propTypes = require("./props/propTypes");
+
 var _Layout = require("../Layout");
+
 var _Tooltip = _interopRequireDefault(require("../Tooltip/Tooltip"));
+
 require("../common/basic.module.css");
+
 require("@zohodesk/variables/assets/colorVariables.module.css");
+
 require("@zohodesk/variables/assets/dotVariables.module.css");
+
 require("@zohodesk/variables/assets/sizeVariables.module.css");
+
 require("@zohodesk/variables/assets/fontsizeVariables.module.css");
+
 require("@zohodesk/variables/lib/fontFamilyVariables.module.css");
+
 require("@zohodesk/variables/assets/transitionVariables.module.css");
+
 require("@zohodesk/variables/assets/no_transitionVariables.module.css");
+
 require("../common/a11y.module.css");
+
 require("../common/boxShadow.module.css");
+
 var _AppContainerModule = _interopRequireDefault(require("./AppContainer.module.css"));
+
 var _Config = require("../Provider/Config");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 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); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
 function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
 var AppContainer = /*#__PURE__*/function (_React$Component) {
   _inherits(AppContainer, _React$Component);
+
   var _super = _createSuper(AppContainer);
+
   function AppContainer(props) {
     var _this;
+
     _classCallCheck(this, AppContainer);
+
     _this = _super.call(this, props);
     _this.setTooltipRef = _this.setTooltipRef.bind(_assertThisInitialized(_this));
     _this.handleOver = _this.handleOver.bind(_assertThisInitialized(_this));
@@ -57,6 +90,7 @@ var AppContainer = /*#__PURE__*/function (_React$Component) {
     });
     return _this;
   }
+
   _createClass(AppContainer, [{
     key: "mouseOverDispatch",
     value: function mouseOverDispatch(e) {
@@ -75,9 +109,11 @@ var AppContainer = /*#__PURE__*/function (_React$Component) {
     key: "handleOver",
     value: function handleOver(e) {
       var _this2 = this;
+
       if (this.timer) {
         this.timer = clearTimeout(this.timer);
       }
+
       this.timer = setTimeout(function () {
         return _this2.mouseOverDispatch(e);
       }, this.tooltipDebounce);
@@ -97,7 +133,9 @@ var AppContainer = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      if (this.containerElement) {
+      var needTooltip = this.props.needTooltip;
+
+      if (this.containerElement && needTooltip) {
         this.containerElement.addEventListener('mouseover', this.handleOver, false);
         this.containerElement.addEventListener('mouseout', this.removeTimeout, false);
         this.tooltipRef.observeElement();
@@ -106,7 +144,9 @@ var AppContainer = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      if (this.containerElement) {
+      var needTooltip = this.props.needTooltip;
+
+      if (this.containerElement && needTooltip) {
         this.containerElement.removeEventListener('mouseover', this.handleOver, false);
         this.containerElement.addEventListener('mouseout', this.removeTimeout, false);
         this.tooltipRef.unObserveElement();
@@ -116,47 +156,47 @@ var AppContainer = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this$props = this.props,
-        className = _this$props.className,
-        children = _this$props.children,
-        tagName = _this$props.tagName,
-        dataId = _this$props.dataId,
-        dataSelectorId = _this$props.dataSelectorId,
-        tooltipClass = _this$props.tooltipClass,
-        tooltipParentClass = _this$props.tooltipParentClass,
-        customProps = _this$props.customProps;
+          className = _this$props.className,
+          children = _this$props.children,
+          tagName = _this$props.tagName,
+          dataId = _this$props.dataId,
+          dataSelectorId = _this$props.dataSelectorId,
+          tooltipClass = _this$props.tooltipClass,
+          tooltipParentClass = _this$props.tooltipParentClass,
+          needTooltip = _this$props.needTooltip,
+          customProps = _this$props.customProps;
       var _customProps$Containe = customProps.ContainerProps,
-        ContainerProps = _customProps$Containe === void 0 ? {} : _customProps$Containe,
-        _customProps$TooltipP = customProps.TooltipProps,
-        TooltipProps = _customProps$TooltipP === void 0 ? {} : _customProps$TooltipP,
-        _customProps$ExtraPro = customProps.ExtraProps,
-        ExtraProps = _customProps$ExtraPro === void 0 ? {} : _customProps$ExtraPro;
+          ContainerProps = _customProps$Containe === void 0 ? {} : _customProps$Containe,
+          _customProps$TooltipP = customProps.TooltipProps,
+          TooltipProps = _customProps$TooltipP === void 0 ? {} : _customProps$TooltipP,
+          _customProps$ExtraPro = customProps.ExtraProps,
+          ExtraProps = _customProps$ExtraPro === void 0 ? {} : _customProps$ExtraPro;
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
-        className: "".concat(_AppContainerModule["default"].container, " ").concat(className)
-        //onMouseOver={this.handleOver}
-        ,
+        className: "".concat(_AppContainerModule["default"].container, " ").concat(className),
         dataId: dataId,
         dataSelectorId: dataSelectorId,
         tagName: tagName,
         eleRef: this.getContainerRef
       }, ContainerProps, ExtraProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true
-      }, children)), /*#__PURE__*/_react["default"].createElement("div", _extends({}, ExtraProps, {
+      }, children)), needTooltip ? /*#__PURE__*/_react["default"].createElement("div", _extends({}, ExtraProps, {
         className: "".concat(_AppContainerModule["default"].container, " ").concat(_AppContainerModule["default"].tooltip, " ").concat(tooltipParentClass),
         "data-id": "".concat(dataId, "_tooltip"),
+        "data-test-id": "".concat(dataId, "_tooltip"),
         "data-selector-id": "".concat(dataSelectorId, "_tooltip")
       }), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], _extends({
         ref: this.setTooltipRef,
         customClass: tooltipClass
-      }, TooltipProps))));
+      }, TooltipProps))) : null);
     }
   }]);
+
   return AppContainer;
 }(_react["default"].Component);
+
 exports["default"] = AppContainer;
 AppContainer.propTypes = _propTypes.propTypes;
-AppContainer.defaultProps = _defaultProps.defaultProps;
-
-// if (__DOCS__) {
+AppContainer.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
 //   AppContainer.docs = {
 //     componentGroup: 'Template',
 //     folderName: 'Style Guide'

package/lib/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/lib/AppContainer/props/defaultProps.js

@@ -11,6 +11,7 @@ var defaultProps = {
   tooltipClass: '',
   tooltipParentClass: '',
   customProps: {},
-  dataSelectorId: 'appContainer'
+  dataSelectorId: 'appContainer',
+  needTooltip: true
 };
 exports.defaultProps = defaultProps;

package/lib/AppContainer/props/propTypes.js

@@ -4,8 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.propTypes = void 0;
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 var propTypes = {
   children: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].arrayOf(_propTypes["default"].element)]),
   dataId: _propTypes["default"].string,
@@ -13,6 +16,7 @@ var propTypes = {
   eleRef: _propTypes["default"].func,
   tagName: _propTypes["default"].string,
   className: _propTypes["default"].string,
+  needTooltip: _propTypes["default"].bool,
   tooltipClass: _propTypes["default"].string,
   tooltipParentClass: _propTypes["default"].string,
   customProps: _propTypes["default"].shape({

package/lib/Avatar/Avatar.js

@@ -1,42 +1,67 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+
 var _react = _interopRequireDefault(require("react"));
+
 var _defaultProps = require("./props/defaultProps");
+
 var _propTypes = require("./props/propTypes");
+
 var _getInitial = require("../utils/getInitial");
+
 var _AvatarSize = _interopRequireDefault(require("../Provider/AvatarSize"));
+
 var _AvatarModule = _interopRequireDefault(require("./Avatar.module.css"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 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); }
+
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
 function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
 /*
 1. need to change name into firstName lastName
 2. pattern support via context as well as props
 3. prop high priority to arrange firstName lastName
 4. team pass name as lastName and pass pattern via prop
 */
+
 /*
 eslint css-modules/no-unused-class: [2, { markAsUsed: ['circle', 'square',
 'small','medium','xmedium',"xsmall", "large", "xlarge", "primary", "secondary",
@@ -44,10 +69,14 @@ eslint css-modules/no-unused-class: [2, { markAsUsed: ['circle', 'square',
 */
 var Avatar = /*#__PURE__*/function (_React$Component) {
   _inherits(Avatar, _React$Component);
+
   var _super = _createSuper(Avatar);
+
   function Avatar(props) {
     var _this;
+
     _classCallCheck(this, Avatar);
+
     _this = _super.call(this, props);
     _this.state = {
       isLoaded: false
@@ -57,11 +86,13 @@ var Avatar = /*#__PURE__*/function (_React$Component) {
     _this.getInitialByFullName = _this.getInitialByFullName.bind(_assertThisInitialized(_this));
     return _this;
   }
+
   _createClass(Avatar, [{
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
       var src = this.props.src;
       var isLoaded = this.state.isLoaded;
+
       if (prevProps.src !== src) {
         this.setState({
           isLoaded: !isLoaded
@@ -72,21 +103,25 @@ var Avatar = /*#__PURE__*/function (_React$Component) {
     key: "putInvalidImageURLJSON",
     value: function putInvalidImageURLJSON() {
       var _this$props = this.props,
-        src = _this$props.src,
-        alternateSrc = _this$props.alternateSrc;
+          src = _this$props.src,
+          alternateSrc = _this$props.alternateSrc;
       var isLoaded = this.state.isLoaded;
+
       var _validImgArr = _toConsumableArray(Avatar.validImageURLs);
-      var _invalidImgArr = _toConsumableArray(Avatar.invalidImageURLs);
 
-      // if (alternateSrc) {
+      var _invalidImgArr = _toConsumableArray(Avatar.invalidImageURLs); // if (alternateSrc) {
       //   _validImgArr.push(alternateSrc);
       // }
 
+
       var validIndex = _validImgArr.indexOf(src);
+
       if (validIndex !== -1) {
         _validImgArr.splice(validIndex, 1);
       }
+
       _invalidImgArr.push(src);
+
       Avatar.invalidImageURLs = _invalidImgArr;
       Avatar.validImageURLs = _validImgArr;
       this.setState({
@@ -100,30 +135,33 @@ var Avatar = /*#__PURE__*/function (_React$Component) {
       var isLoaded = this.state.isLoaded;
       var validImgArr = Avatar.validImageURLs;
       var invalidImgArr = Avatar.invalidImageURLs;
+
       if (src && validImgArr.indexOf(src) === -1 && invalidImgArr.indexOf(src) === -1) {
         var _validImgArr = _toConsumableArray(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*/
+
   }, {
     key: "getInitialByFullName",
     value: function getInitialByFullName() {
       var fullName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
       fullName = (fullName || '').trim();
       var nameList = fullName.split(' ');
+
       if (nameList.length === 1) {
         return (0, _getInitial.getInitial)('', nameList[0]);
       }
-      return (0, _getInitial.getInitial)(nameList[0], nameList[1]);
-    }
 
-    // componentDidMount() {
+      return (0, _getInitial.getInitial)(nameList[0], nameList[1]);
+    } // componentDidMount() {
     //   const { src } = this.props;
     //   const validImgArr = Avatar.validImageURLs;
     //   if (validImgArr.indexOf(src) === -1) {
@@ -131,38 +169,39 @@ var Avatar = /*#__PURE__*/function (_React$Component) {
     //     _validImgArr.push(src);
     //   }
     // }
+
   }, {
     key: "render",
     value: function render() {
       var _this$props2 = this.props,
-        src = _this$props2.src,
-        name = _this$props2.name,
-        size = _this$props2.size,
-        palette = _this$props2.palette,
-        onClick = _this$props2.onClick,
-        title = _this$props2.title,
-        shape = _this$props2.shape,
-        needTitle = _this$props2.needTitle,
-        dataId = _this$props2.dataId,
-        initial = _this$props2.initial,
-        needBorder = _this$props2.needBorder,
-        borderOnActive = _this$props2.borderOnActive,
-        borderOnHover = _this$props2.borderOnHover,
-        textPalette = _this$props2.textPalette,
-        customClass = _this$props2.customClass,
-        alternateSrc = _this$props2.alternateSrc,
-        isAnimate = _this$props2.isAnimate,
-        dataSelectorId = _this$props2.dataSelectorId,
-        customProps = _this$props2.customProps,
-        needInnerBorder = _this$props2.needInnerBorder,
-        needDefaultBorder = _this$props2.needDefaultBorder;
+          src = _this$props2.src,
+          name = _this$props2.name,
+          size = _this$props2.size,
+          palette = _this$props2.palette,
+          onClick = _this$props2.onClick,
+          title = _this$props2.title,
+          shape = _this$props2.shape,
+          needTitle = _this$props2.needTitle,
+          dataId = _this$props2.dataId,
+          initial = _this$props2.initial,
+          needBorder = _this$props2.needBorder,
+          borderOnActive = _this$props2.borderOnActive,
+          borderOnHover = _this$props2.borderOnHover,
+          textPalette = _this$props2.textPalette,
+          customClass = _this$props2.customClass,
+          alternateSrc = _this$props2.alternateSrc,
+          isAnimate = _this$props2.isAnimate,
+          dataSelectorId = _this$props2.dataSelectorId,
+          customProps = _this$props2.customProps,
+          needInnerBorder = _this$props2.needInnerBorder,
+          needDefaultBorder = _this$props2.needDefaultBorder;
       var _customProps$AvatarPr = customProps.AvatarProps,
-        AvatarProps = _customProps$AvatarPr === void 0 ? {} : _customProps$AvatarPr;
+          AvatarProps = _customProps$AvatarPr === void 0 ? {} : _customProps$AvatarPr;
       var textStyle = textPalette ? _AvatarModule["default"][textPalette] : palette === 'secondary' ? _AvatarModule["default"].white : _AvatarModule["default"].black;
       var shapeStyle = shape === 'circle' ? 'circle' : "square_".concat(size);
       initial = initial || this.getInitialByFullName(name);
-      var isInvalidImageList = Avatar.invalidImageURLs.indexOf(src) !== -1;
-      //let isValidImageList = Avatar.validImageURLs.indexOf(src) !== -1;
+      var isInvalidImageList = Avatar.invalidImageURLs.indexOf(src) !== -1; //let isValidImageList = Avatar.validImageURLs.indexOf(src) !== -1;
+
       var showAvatar = src && !isInvalidImageList;
       var showInitial = !showAvatar || showAvatar && isInvalidImageList;
       var showAlternateAvatar = alternateSrc ? showInitial : false;
@@ -174,15 +213,18 @@ var Avatar = /*#__PURE__*/function (_React$Component) {
         className: "".concat(_AvatarModule["default"].avatar, " ").concat(_AvatarModule["default"][size], " ").concat((0, _AvatarSize["default"])(size), " ").concat(_AvatarModule["default"][shapeStyle], " ").concat(_AvatarModule["default"][palette], " ").concat(textStyle, " ").concat(borderStyle, " ").concat(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["default"].createElement("span", {
         className: "".concat(_AvatarModule["default"].initial),
         "data-id": "".concat(dataId, "_AvatarInitial"),
+        "data-test-id": "".concat(dataId, "_AvatarInitial"),
         "data-selector-id": "".concat(dataSelectorId, "_AvatarInitial")
       }, initial), (showAvatar || showAlternateAvatar) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("img", {
         className: "".concat(_AvatarModule["default"].image, " ").concat(isAnimate ? _AvatarModule["default"].animate : '', " ").concat(needInnerBorder ? _AvatarModule["default"].innerBorder : ''),
         "data-id": "".concat(dataId, "_AvatarImg"),
+        "data-test-id": "".concat(dataId, "_AvatarImg"),
         "data-selector-id": "".concat(dataSelectorId, "_AvatarImg"),
         name: name,
         onError: this.putInvalidImageURLJSON,
@@ -194,14 +236,15 @@ var Avatar = /*#__PURE__*/function (_React$Component) {
       })));
     }
   }]);
+
   return Avatar;
 }(_react["default"].Component);
+
 exports["default"] = Avatar;
 Avatar.defaultProps = _defaultProps.defaultProps;
 Avatar.propTypes = _propTypes.propTypes;
 Avatar.invalidImageURLs = [];
-Avatar.validImageURLs = [];
-// if (__DOCS__) {
+Avatar.validImageURLs = []; // if (__DOCS__) {
 //   Avatar.docs = {
 //     componentGroup: 'Avatar Group',
 //     folderName: 'Style Guide'

package/lib/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 {