@zohodesk/components 1.0.0-test-252 → 1.0.0

package/assets/Contrast/darkContrastLightness.module.css

@@ -0,0 +1,39 @@
+[data-mode='dark']:global:not(.zd-contrast) {
+   --zd_dark_default_lValue: calc(0 * 1%);
+   --zd_dark_default_low_lValue: calc(0 * 1%);
+   --zd_dark_default_inverse_lValue: calc(0 * 1%);
+   --zd_dark_default_inverse_low_lValue: calc(0 * 1%);
+   --zd_dark_default_inverse_lower_lValue: calc(0 * 1%);
+   --zd_dark_default_inverse_medium_lValue: calc(0 * 1%);
+   --zd_dark_darker_lValue: calc(0 * 1%);
+   --zd_dark_darker_low_lValue: calc(0 * 1%);
+   --zd_dark_darker_lower_lValue: calc(0 * 1%);
+   --zd_dark_darker_lowest_lValue: calc(0 * 1%);
+   --zd_dark_lighter_lValue: calc(0 * 1%);
+   --zd_dark_lighter_low_lValue: calc(0 * 1%);
+   --zd_dark_lighter_lower_lValue: calc(0 * 1%);
+   --zd_dark_lighter_medium_lValue: calc(0 * 1%);
+   --zd_dark_lighter_high_lValue: calc(0 * 1%);
+   --zd_alpha_high: 0;
+   --zd_alpha_low: 0;
+}
+
+[data-mode='dark']:global(.zd-contrast) {
+   --zd_dark_default_lValue: calc(var(--zd_contrastLevel) * -1%);
+   --zd_dark_default_low_lValue: calc(var(--zd_contrastLevel) * -1%);
+   --zd_dark_default_inverse_lValue: calc(var(--zd_contrastLevel) * 1%);
+   --zd_dark_default_inverse_low_lValue: calc(var(--zd_contrastLevel) * 0.25%);
+   --zd_dark_default_inverse_lower_lValue: calc(var(--zd_contrastLevel) * 0.10%);
+   --zd_dark_default_inverse_medium_lValue: calc(var(--zd_contrastLevel) * 1.5%);
+   --zd_dark_darker_lValue: calc(var(--zd_contrastLevel) * -1%);
+   --zd_dark_darker_low_lValue: calc(var(--zd_contrastLevel) * -0.50%);
+   --zd_dark_darker_lower_lValue: calc(var(--zd_contrastLevel) * -1%);
+   --zd_dark_darker_lowest_lValue: calc(var(--zd_contrastLevel) * -1%);
+   --zd_dark_lighter_lValue: calc(var(--zd_contrastLevel) * 1%);
+   --zd_dark_lighter_low_lValue: calc(var(--zd_contrastLevel) * 0.50%);
+   --zd_dark_lighter_lower_lValue: calc(var(--zd_contrastLevel) * 0.25%);
+   --zd_dark_lighter_medium_lValue: calc(var(--zd_contrastLevel) * 1.5%);
+   --zd_dark_lighter_high_lValue: calc(var(--zd_contrastLevel) * 1%);
+   --zd_alpha_high: 1;
+   --zd_alpha_low: calc(var(--zd_contrastLevel) * 0.02);
+}

package/assets/Contrast/defaultContrastLightness.module.css

@@ -0,0 +1,39 @@
+[data-mode='default']:global:not(.zd-contrast) {
+   --zd_default_default_lValue: calc(0 * 1%);
+   --zd_default_default_low_lValue: calc(0 * 1%);
+   --zd_default_default_inverse_lValue: calc(0 * 1%);
+   --zd_default_default_inverse_low_lValue: calc(0 * 1%);
+   --zd_default_default_inverse_lower_lValue: calc(0 * 1%);
+   --zd_default_default_inverse_medium_lValue: calc(0 * 1%);
+   --zd_default_darker_lValue: calc(0 * 1%);
+   --zd_default_darker_low_lValue: calc(0 * 1%);
+   --zd_default_darker_lower_lValue: calc(0 * 1%);
+   --zd_default_darker_lowest_lValue: calc(0 * 1%);
+   --zd_default_lighter_lValue: calc(0 * 1%);
+   --zd_default_lighter_low_lValue: calc(0 * 1%);
+   --zd_default_lighter_lower_lValue: calc(0 * 1%);
+   --zd_default_lighter_medium_lValue: calc(0 * 1%);
+   --zd_default_lighter_high_lValue: calc(0 * 1%);
+   --zd_alpha_high: 0;
+   --zd_alpha_low: 0;
+}
+
+[data-mode='default']:global(.zd-contrast) {
+   --zd_default_default_lValue: calc(var(--zd_contrastLevel) * 1%);
+   --zd_default_default_low_lValue: calc(var(--zd_contrastLevel) * 1%);
+   --zd_default_default_inverse_lValue: calc(var(--zd_contrastLevel) * -1%);
+   --zd_default_default_inverse_low_lValue: calc(var(--zd_contrastLevel) * -0.25%);
+   --zd_default_default_inverse_lower_lValue: calc(var(--zd_contrastLevel) * -0.10%);
+   --zd_default_default_inverse_medium_lValue: calc(var(--zd_contrastLevel) * -1.5%);
+   --zd_default_darker_lValue: calc(var(--zd_contrastLevel) * -1%);
+   --zd_default_darker_low_lValue: calc(var(--zd_contrastLevel) * -0.50%);
+   --zd_default_darker_lower_lValue: calc(var(--zd_contrastLevel) * -0.25%);
+   --zd_default_darker_lowest_lValue: calc(var(--zd_contrastLevel) * var(--zd_lightmode_grey_bg));
+   --zd_default_lighter_lValue: calc(var(--zd_contrastLevel) * 1%);
+   --zd_default_lighter_low_lValue: calc(var(--zd_contrastLevel) * 0.50%);
+   --zd_default_lighter_lower_lValue: calc(var(--zd_contrastLevel) * 0.25%);
+   --zd_default_lighter_medium_lValue: calc(var(--zd_contrastLevel) * 1.5%);
+   --zd_default_lighter_high_lValue: calc(var(--zd_contrastLevel) * 20%);
+   --zd_alpha_high: 1;
+   --zd_alpha_low: calc(var(--zd_contrastLevel) * 0.02);
+}

package/assets/Contrast/pureDarkContrastLightness.module.css

@@ -0,0 +1,39 @@
+[data-mode='pureDark']:global:not(.zd-contrast) {
+   --zd_pureDark_default_lValue: calc(0 * 1%);
+   --zd_pureDark_default_low_lValue: calc(0 * 1%);
+   --zd_pureDark_default_inverse_lValue: calc(0 * 1%);
+   --zd_pureDark_default_inverse_low_lValue: calc(0 * 1%);
+   --zd_pureDark_default_inverse_lower_lValue: calc(0 * 1%);
+   --zd_pureDark_default_inverse_medium_lValue: calc(0 * 1%);
+   --zd_pureDark_darker_lValue: calc(0 * 1%);
+   --zd_pureDark_darker_low_lValue: calc(0 * 1%);
+   --zd_pureDark_darker_lower_lValue: calc(0 * 1%);
+   --zd_pureDark_darker_lowest_lValue: calc(0 * 1%);
+   --zd_pureDark_lighter_lValue: calc(0 * 1%);
+   --zd_pureDark_lighter_low_lValue: calc(0 * 1%);
+   --zd_pureDark_lighter_lower_lValue: calc(0 * 1%);
+   --zd_pureDark_lighter_medium_lValue: calc(0 * 1%);
+   --zd_pureDark_lighter_high_lValue: calc(0 * 1%);
+   --zd_alpha_high: 0;
+   --zd_alpha_low: 0;
+}
+
+[data-mode='pureDark']:global(.zd-contrast) {
+   --zd_pureDark_default_lValue: calc(var(--zd_contrastLevel) * -1%);
+   --zd_pureDark_default_low_lValue: calc(var(--zd_contrastLevel) * -1%);
+   --zd_pureDark_default_inverse_lValue: calc(var(--zd_contrastLevel) * 1%);
+   --zd_pureDark_default_inverse_low_lValue: calc(var(--zd_contrastLevel) * 0.25%);
+   --zd_pureDark_default_inverse_lower_lValue: calc(var(--zd_contrastLevel) * 0.10%);
+   --zd_pureDark_default_inverse_medium_lValue: calc(var(--zd_contrastLevel) * 1.5%);
+   --zd_pureDark_darker_lValue: calc(var(--zd_contrastLevel) * -1%);
+   --zd_pureDark_darker_low_lValue: calc(var(--zd_contrastLevel) * -0.50%);
+   --zd_pureDark_darker_lower_lValue: calc(var(--zd_contrastLevel) * -1%);
+   --zd_pureDark_darker_lowest_lValue: calc(var(--zd_contrastLevel) * -1%);
+   --zd_pureDark_lighter_lValue: calc(var(--zd_contrastLevel) * 1%);
+   --zd_pureDark_lighter_low_lValue: calc(var(--zd_contrastLevel) * 0.50%);
+   --zd_pureDark_lighter_lower_lValue: calc(var(--zd_contrastLevel) * 0.25%);
+   --zd_pureDark_lighter_medium_lValue: calc(var(--zd_contrastLevel) * 1.5%);
+   --zd_pureDark_lighter_high_lValue: calc(var(--zd_contrastLevel) * 1%);
+   --zd_alpha_high: 1;
+   --zd_alpha_low: calc(var(--zd_contrastLevel) * 0.02);
+}

package/css_error.log

@@ -0,0 +1 @@
+Component Package error log:

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,
@@ -35,7 +40,9 @@ export default class Accordion extends React.Component {
       unMount,
       disableInternalState,
       selectedItem: propSelectedItem,
-      a11y
+      a11y,
+      dataId,
+      dataSelectorId
     } = this.props;
     let {
       selectedItem
@@ -61,15 +68,18 @@ export default class Accordion extends React.Component {
       },
       role: role,
       "aria-expanded": ariaExpanded,
-      "aria-haspopup": ariaHaspopup
+      "aria-haspopup": ariaHaspopup,
+      "data-id": dataId,
+      "data-test-id": dataId,
+      "data-selector-id": dataSelectorId
     }, children);
   }
+
 }
 Accordion.propTypes = Accordion_propTypes;
-Accordion.defaultProps = Accordion_defaultProps;
-if (false) {
-  Accordion.docs = {
-    componentGroup: 'Animation',
-    folderName: 'Style Guide'
-  };
-}
+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,
@@ -23,6 +25,7 @@ export default class AccordionItem extends React.Component {
       className,
       children,
       dataId,
+      dataSelectorId,
       unMount,
       unMountItem,
       a11y,
@@ -35,7 +38,9 @@ export default class AccordionItem extends React.Component {
     return /*#__PURE__*/React.createElement("div", {
       className: className ? className : '',
       "data-id": dataId,
-      role: role
+      "data-test-id": dataId,
+      role: role,
+      "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement("div", {
       className: innerClass ? innerClass : '',
       onClick: selectMenu.bind(this, id)
@@ -47,12 +52,12 @@ export default class AccordionItem extends React.Component {
       isActive: this.equalityCheck()
     }, children[1]));
   }
+
 }
 AccordionItem.propTypes = AccordionItem_propTypes;
-AccordionItem.defaultProps = AccordionItem_defaultProps;
-if (false) {
-  AccordionItem.docs = {
-    componentGroup: 'Animation',
-    folderName: 'Style Guide'
-  };
-}
+AccordionItem.defaultProps = AccordionItem_defaultProps; // if (__DOCS__) {
+//   AccordionItem.docs = {
+//     componentGroup: 'Animation',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/Accordion/props/defaultProps.js

@@ -1,8 +1,12 @@
 export const Accordion_defaultProps = {
   unMount: true,
   disableInternalState: false,
-  a11y: {}
+  a11y: {},
+  dataId: 'Accordion',
+  dataSelectorId: 'accordion'
 };
 export const AccordionItem_defaultProps = {
-  a11y: {}
+  a11y: {},
+  dataId: 'AccordionItem',
+  dataSelectorId: 'accordionItem'
 };

package/es/Accordion/props/propTypes.js

@@ -2,6 +2,8 @@ import PropTypes from 'prop-types';
 export const Accordion_propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   disableInternalState: PropTypes.bool,
   height: PropTypes.string,
   onSelect: PropTypes.func,
@@ -17,6 +19,7 @@ export const AccordionItem_propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   equalityCheck: PropTypes.func,
   id: PropTypes.string,
   selectMenu: PropTypes.func,

package/es/Animation/Animation.js

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

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';
@@ -12,6 +13,8 @@ import '@zohodesk/variables/assets/fontsizeVariables.module.css';
 import '@zohodesk/variables/lib/fontFamilyVariables.module.css';
 import '@zohodesk/variables/assets/transitionVariables.module.css';
 import '@zohodesk/variables/assets/no_transitionVariables.module.css';
+import '../common/a11y.module.css';
+import '../common/boxShadow.module.css';
 import style from './AppContainer.module.css';
 import { getLibraryConfig, setLibraryConfig } from '../Provider/Config';
 export default class AppContainer extends React.Component {
@@ -28,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
@@ -51,31 +59,45 @@ 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,
       children,
       tagName,
       dataId,
+      dataSelectorId,
       tooltipClass,
       tooltipParentClass,
+      needTooltip,
       customProps
     } = this.props;
     let {
@@ -84,28 +106,29 @@ 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-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 (false) {
-  AppContainer.docs = {
-    componentGroup: 'Template',
-    folderName: 'Style Guide'
-  };
-}
+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

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

package/es/AppContainer/props/propTypes.js

@@ -2,9 +2,11 @@ import PropTypes from 'prop-types';
 export const propTypes = {
   children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   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,
@@ -124,7 +136,10 @@ export default class Avatar extends React.Component {
       customClass,
       alternateSrc,
       isAnimate,
-      customProps
+      dataSelectorId,
+      customProps,
+      needInnerBorder,
+      needDefaultBorder
     } = this.props;
     let {
       AvatarProps = {}
@@ -132,41 +147,49 @@ 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 border = borderOnHover || onClick;
-    let borderStyle = (!src || src && isInvalidImageList || !isValidImageList) && needBorder ? `${style.border} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''} ` : '';
+    let isInvalidImageList = Avatar.invalidImageURLs.indexOf(src) !== -1; //let isValidImageList = Avatar.validImageURLs.indexOf(src) !== -1;
+
     let showAvatar = src && !isInvalidImageList;
-    let showInitial = !showAvatar || showAvatar && !isValidImageList;
+    let showInitial = !showAvatar || showAvatar && isInvalidImageList;
     const showAlternateAvatar = alternateSrc ? showInitial : false;
+    let border = borderOnHover || onClick;
+    let showDefaultBorder = src && !isInvalidImageList && needDefaultBorder;
+    let borderStyle = (showDefaultBorder || !src || !showAvatar || showInitial) && needBorder ? `${style.border} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''} ` : '';
     borderStyle = showAlternateAvatar ? '' : borderStyle;
     return /*#__PURE__*/React.createElement("div", _extends({
       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,
-      onClick: onClick
+      "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-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 : ''}`,
+      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,
       onLoad: this.putValidImageURLJSON,
-      src: showAlternateAvatar ? alternateSrc : src
-    }), !isValidImageList && !showAlternateAvatar ? null : /*#__PURE__*/React.createElement("span", {
+      src: showAlternateAvatar ? alternateSrc : src,
+      alt: name
+    }), showDefaultBorder ? null : /*#__PURE__*/React.createElement("span", {
       className: `${style.shadow} ${textStyle} `
     })));
   }
+
 }
 Avatar.defaultProps = defaultProps;
 Avatar.propTypes = propTypes;
 Avatar.invalidImageURLs = [];
-Avatar.validImageURLs = [];
-if (false) {
-  Avatar.docs = {
-    componentGroup: 'Avatar Group',
-    folderName: 'Style Guide'
-  };
-}
+Avatar.validImageURLs = []; // if (__DOCS__) {
+//   Avatar.docs = {
+//     componentGroup: 'Avatar Group',
+//     folderName: 'Style Guide'
+//   };
+// }