@zohodesk/components 1.2.3 → 1.2.5

package/coverage/Buttongroup/Buttongroup.js.html

@@ -205,7 +205,7 @@ Buttongroup.propTypes = propTypes;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-08-17T12:51:49.215Z
+                at 2023-08-28T16:48:16.868Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/Buttongroup/Buttongroup.module.css.html

@@ -283,7 +283,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-08-17T12:51:49.215Z
+                at 2023-08-28T16:48:16.868Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/Buttongroup/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-08-17T12:51:49.215Z
+                at 2023-08-28T16:48:16.868Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/Buttongroup/props/defaultProps.js.html

@@ -88,7 +88,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-08-17T12:51:49.215Z
+                at 2023-08-28T16:48:16.868Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/Buttongroup/props/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-08-17T12:51:49.215Z
+                at 2023-08-28T16:48:16.868Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/Buttongroup/props/propTypes.js.html

@@ -100,7 +100,7 @@ export const propTypes = {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-08-17T12:51:49.215Z
+                at 2023-08-28T16:48:16.868Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/index.html

@@ -176,7 +176,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-08-17T12:51:49.215Z
+                at 2023-08-28T16:48:16.868Z
             </div>
         <script src="prettify.js"></script>
         <script>

package/coverage/utils/dummyFunction.js.html

@@ -73,7 +73,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-08-17T12:51:49.215Z
+                at 2023-08-28T16:48:16.868Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/utils/index.html

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-08-17T12:51:49.215Z
+                at 2023-08-28T16:48:16.868Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/es/index.js

@@ -38,4 +38,5 @@ export { default as Tooltip } from './Tooltip/Tooltip';
 import * as _utils from './utils';
 export { _utils as utils };
 export * from './VelocityAnimation';
-export * from './semantic';
+export * from './semantic';
+export { default as Typography } from './v1/Typography/Typography';

package/es/v1/Accordion/Accordion.js

@@ -0,0 +1,65 @@
+import React, { useState, useEffect } from 'react';
+import { Accordion_defaultProps } from '../../Accordion/props/defaultProps';
+import { Accordion_propTypes } from '../../Accordion/props/propTypes';
+export default function Accordion(props) {
+  const {
+    className,
+    height,
+    unMount,
+    disableInternalState,
+    selectedItem: propSelectedItem,
+    a11y,
+    dataId,
+    dataSelectorId,
+    onSelect,
+    children
+  } = props;
+  const {
+    role,
+    ariaExpanded,
+    ariaHaspopup
+  } = a11y;
+  const [selectedItem, setSelectedItem] = useState(propSelectedItem);
+
+  function selectMenu(selectedItem) {
+    if (onSelect) {
+      onSelect(selectedItem);
+    }
+
+    !disableInternalState && setSelectedItem(selectedItem);
+  }
+
+  useEffect(() => {
+    if (!disableInternalState) {
+      setSelectedItem(propSelectedItem);
+    }
+  }, [propSelectedItem]);
+  let renderChildren = React.Children.map(children, child => {
+    if (child) {
+      return /*#__PURE__*/React.cloneElement(child, {
+        selectedItem: disableInternalState ? propSelectedItem : selectedItem,
+        selectMenu: selectMenu,
+        unMount: unMount
+      });
+    }
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: className ? className : '',
+    style: {
+      height
+    },
+    role: role,
+    "aria-expanded": ariaExpanded,
+    "aria-haspopup": ariaHaspopup,
+    "data-id": dataId,
+    "data-test-id": dataId,
+    "data-selector-id": dataSelectorId
+  }, renderChildren);
+}
+Accordion.propTypes = Accordion_propTypes;
+Accordion.defaultProps = Accordion_defaultProps; // if (__DOCS__) {
+//   Accordion.docs = {
+//     componentGroup: 'Animation',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/v1/Accordion/AccordionItem.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { AccordionItem_defaultProps } from '../../Accordion/props/defaultProps';
+import { AccordionItem_propTypes } from '../../Accordion/props/propTypes';
+import VelocityAnimation from '../VelocityAnimation/VelocityAnimation/VelocityAnimation';
+import VelocityAnimationGroup from '../VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
+export default function AccordionItem(props) {
+  let {
+    id,
+    selectMenu,
+    className,
+    children,
+    dataId,
+    dataSelectorId,
+    unMount,
+    unMountItem,
+    a11y,
+    innerClass,
+    equalityCheck,
+    selectedItem
+  } = props;
+  unMountItem = unMountItem !== undefined ? unMountItem : unMount;
+  let {
+    role
+  } = a11y;
+
+  function equalityChecking() {
+    return equalityCheck ? equalityCheck(id, selectedItem) : selectedItem == id;
+  }
+
+  function handleSelectMenu() {
+    selectMenu(id);
+  }
+
+  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", {
+    className: innerClass ? innerClass : '',
+    onClick: handleSelectMenu
+  }, children[0]), unMountItem ? /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
+    name: "slideDown",
+    isActive: equalityChecking()
+  }, children[1]) : /*#__PURE__*/React.createElement(VelocityAnimation, {
+    name: "slideDown",
+    isActive: equalityChecking()
+  }, children[1]));
+}
+AccordionItem.propTypes = AccordionItem_propTypes;
+AccordionItem.defaultProps = AccordionItem_defaultProps; // if (__DOCS__) {
+//   AccordionItem.docs = {
+//     componentGroup: 'Animation',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/v1/Accordion/index.js

@@ -0,0 +1,2 @@
+export { default as Accordion } from './Accordion';
+export { default as AccordionItem } from './AccordionItem';

package/es/v1/Animation/Animation.js

@@ -0,0 +1,127 @@
+import React from 'react';
+import { defaultProps } from '../../Animation/props/defaultProps';
+import { propTypes } from '../../Animation/props/propTypes';
+import { CSSTransition } from 'react-transition-group';
+import style from '../../common/transition.module.css';
+export default function Animation(props) {
+  let {
+    name,
+    enterDuration,
+    exitDuration,
+    children,
+    isActive,
+    unmountOnExit,
+    onEntered = () => {},
+    onExit = () => {},
+    delayClassName = null
+  } = props;
+  const animation = {
+    zoomIn: {
+      enter: style.zoomInEnter,
+      enterActive: style.zoomInEnterActive,
+      enterDone: style.zoomInEnterActive,
+      exit: style.zoomInLeave,
+      exitActive: style.zoomInLeaveActive,
+      exitDone: style.zoomInLeaveActive,
+      appear: style.zoomInEnter,
+      appearActive: style.zoomInEnterActive
+    },
+    scaleIn: {
+      enter: style.scaleInEnter,
+      enterActive: style.scaleInEnterActive,
+      enterDone: style.scaleInEnterActive,
+      exit: style.scaleInLeave,
+      exitActive: style.scaleInLeaveActive,
+      exitDone: style.scaleInLeaveActive,
+      appear: style.scaleInEnter,
+      appearActive: style.scaleInEnterActive
+    },
+    fadeIn: {
+      enter: style.fadeInEnter,
+      enterActive: style.fadeInEnterActive,
+      enterDone: style.fadeInEnterActive,
+      exit: style.fadeInLeave,
+      exitActive: style.fadeInLeaveActive,
+      exitDone: style.fadeInLeaveActive,
+      appear: style.fadeInEnter,
+      appearActive: style.fadeInEnterActive
+    },
+    slideLeft: {
+      enter: style.slideLeftEnter,
+      enterActive: style.slideLeftEnterActive,
+      enterDone: style.slideLeftEnterActive,
+      exit: style.slideLeftLeave,
+      exitActive: style.slideLeftLeaveActive,
+      exitDone: style.slideLeftLeaveActive,
+      appear: style.slideLeftEnter,
+      appearActive: style.slideLeftEnterActive
+    },
+    slideDown: {
+      enter: style.slideDownEnter,
+      enterActive: style.slideDownEnterActive,
+      enterDone: style.slideDownEnterActive,
+      exit: style.slideDownLeave,
+      exitActive: style.slideDownLeaveActive,
+      exitDone: style.slideDownLeaveActive,
+      appear: style.slideDownEnter,
+      appearActive: style.slideDownEnterActive
+    },
+    skewIn: {
+      enter: style.skewInEnter,
+      enterActive: style.skewInEnterActive,
+      enterDone: style.skewInEnterActive,
+      exit: style.skewInLeave,
+      exitActive: style.skewInLeaveActive,
+      exitDone: style.skewInLeaveActive,
+      appear: style.skewInEnter,
+      appearActive: style.skewInEnterActive
+    },
+    none: {
+      enter: style.noneEnter,
+      enterActive: style.noneEnterActive,
+      enterDone: style.noneEnterActive,
+      exit: style.noneLeave,
+      exitActive: style.noneLeaveActive,
+      exitDone: style.noneLeaveActive,
+      appear: style.noneEnter,
+      appearActive: style.noneEnterActive
+    },
+    default: {
+      enter: style.defaultEnter,
+      enterActive: style.defaultEnterActive,
+      enterDone: style.defaultEnterActive,
+      exit: style.defaultLeave,
+      exitActive: style.defaultLeaveActive,
+      exitDone: style.defaultLeaveActive,
+      appear: style.defaultEnter,
+      appearActive: style.defaultEnterActive
+    }
+  };
+  let newClassNames = delayClassName ? Object.assign({}, animation[name], {
+    exit: `${delayClassName} ${animation[name].exit}`
+  }) : animation[name];
+  return /*#__PURE__*/React.createElement(CSSTransition, {
+    classNames: newClassNames && newClassNames,
+    in: isActive,
+    appear: true,
+    enter: true,
+    exit: true,
+    mountOnEnter: false,
+    unmountOnExit: unmountOnExit,
+    timeout: {
+      enter: enterDuration,
+      exit: exitDuration
+    },
+    onEntered: onEntered,
+    onExit: onExit
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, children));
+}
+Animation.propTypes = propTypes;
+Animation.defaultProps = defaultProps; // if (__DOCS__) {
+//   Animation.docs = {
+//     componentGroup: 'Animation',
+//     folderName: 'Style Guide',
+//     external: true,
+//     description: ' '
+//   };
+// }

package/es/v1/AppContainer/AppContainer.js

@@ -0,0 +1,134 @@
+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 '../../AppContainer/props/defaultProps';
+import { propTypes } from '../../AppContainer/props/propTypes';
+import { Container, Box } from '../Layout';
+import Tooltip from '../Tooltip/Tooltip';
+import '../../common/basic.module.css';
+import '@zohodesk/variables/assets/colorVariables.module.css';
+import '@zohodesk/variables/assets/dotVariables.module.css';
+import '@zohodesk/variables/assets/sizeVariables.module.css';
+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/AppContainer.module.css';
+import { getLibraryConfig, setLibraryConfig } from '../../Provider/Config';
+export default class AppContainer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.setTooltipRef = this.setTooltipRef.bind(this);
+    this.handleOver = this.handleOver.bind(this);
+    this.mouseOverDispatch = this.mouseOverDispatch.bind(this);
+    this.removeTimeout = this.removeTimeout.bind(this);
+    this.getContainerRef = this.getContainerRef.bind(this);
+    this.timer = null;
+    this.tooltipDebounce = getLibraryConfig('tooltipDebounce');
+    setLibraryConfig({
+      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
+    } = this.props;
+    this.containerElement = ref;
+    eleRef && eleRef(ref);
+  }
+
+  setTooltipRef(ref) {
+    this.tooltipRef = ref;
+  }
+
+  componentDidMount() {
+    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() {
+    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 {
+      ContainerProps = {},
+      TooltipProps = {},
+      ExtraProps = {}
+    } = customProps;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, _extends({
+      className: `${style.container} ${className}`,
+      dataId: dataId,
+      dataSelectorId: dataSelectorId,
+      tagName: tagName,
+      eleRef: this.getContainerRef
+    }, ContainerProps, ExtraProps), /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, 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))) : null);
+  }
+
+}
+AppContainer.propTypes = propTypes;
+AppContainer.defaultProps = defaultProps; // if (__DOCS__) {
+//   AppContainer.docs = {
+//     componentGroup: 'Template',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/v1/Avatar/Avatar.js

@@ -0,0 +1,189 @@
+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 '../../Avatar/props/defaultProps';
+import { propTypes } from '../../Avatar/props/propTypes';
+import { getInitial } from '../../utils/getInitial';
+import AvatarSize from '../../Provider/AvatarSize';
+import style from '../../Avatar/Avatar.module.css';
+/*
+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
+*/
+
+export default class Avatar extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isLoaded: false
+    };
+    this.putInvalidImageURLJSON = this.putInvalidImageURLJSON.bind(this);
+    this.putValidImageURLJSON = this.putValidImageURLJSON.bind(this);
+    this.getInitialByFullName = this.getInitialByFullName.bind(this);
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    let {
+      src
+    } = this.props;
+    let {
+      isLoaded
+    } = this.state;
+
+    if (prevProps.src !== src) {
+      this.setState({
+        isLoaded: !isLoaded
+      });
+    }
+  }
+
+  putInvalidImageURLJSON() {
+    const {
+      src,
+      alternateSrc
+    } = this.props;
+    let {
+      isLoaded
+    } = this.state;
+    let _validImgArr = [...Avatar.validImageURLs];
+    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
+    } = this.props;
+    let {
+      isLoaded
+    } = 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() {
+  //   const { src } = this.props;
+  //   const validImgArr = Avatar.validImageURLs;
+  //   if (validImgArr.indexOf(src) === -1) {
+  //     let _validImgArr = [...validImgArr];
+  //     _validImgArr.push(src);
+  //   }
+  // }
+
+
+  render() {
+    let {
+      src,
+      name,
+      size,
+      palette,
+      onClick,
+      title,
+      shape,
+      needTitle,
+      dataId,
+      initial,
+      needBorder,
+      borderOnActive,
+      borderOnHover,
+      textPalette,
+      customClass,
+      alternateSrc,
+      isAnimate,
+      dataSelectorId,
+      customProps,
+      needInnerBorder,
+      needDefaultBorder
+    } = this.props;
+    let {
+      AvatarProps = {}
+    } = customProps;
+    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 showAvatar = src && !isInvalidImageList;
+    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,
+      "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,
+      onLoad: this.putValidImageURLJSON,
+      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 (__DOCS__) {
+//   Avatar.docs = {
+//     componentGroup: 'Avatar Group',
+//     folderName: 'Style Guide'
+//   };
+// }