@zohodesk/components 1.0.0-test-252 → 1.1.0

package/es/Avatar/Avatar.js

@@ -1,22 +1,24 @@
 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';
 import { getInitial } from '../utils/getInitial';
 import AvatarSize from '../Provider/AvatarSize';
 import style from './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
+/*
+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",
-"info","default"] }]
+/*
+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'
+//   };
+// }

package/es/Avatar/Avatar.module.css

@@ -1,135 +1,176 @@
-.varClass {
-  /* avatar default variables */
-  --avatar_text_color: var(--zdt_avatar_default_text);
-  --avatar_font_size: var(--zd_font_size14);
-  --avatar_bg_color: var(--zdt_avatar_default_bg);
-  --avatar_border_radius: 50%;
-  --avatar_border_width: 0;
-  --avatar_border_style: solid;
-  --avatar_border_color: var(--zdt_avatar_default_border);
-  --avatar_border_hoverColor: var(--zdt_avatar_default_borderHover);
-  --avatar_boxshadow: var(--zdt_avatar_default_boxshadow);
-  --avatar_text_transform: uppercase;
-}
-.avatar {
-  composes: varClass;
-  position: relative;
-  composes: dInflex alignVertical alignHorizontal from '../common/common.module.css';
-  vertical-align: middle;
-  font-size: var(--avatar_font_size);
-  color: var(--avatar_text_color);
-  border-width: var(--avatar_border_width);
-  border-style: var(--avatar_border_style);
-}
-.border {
-  border-color: var(--avatar_border_color);
-}
-.borderOnHover:hover, .borderOnActive {
-  border-color: var(--avatar_border_hoverColor);
-}
-.avatar, .primary {
-  background-color: var(--avatar_bg_color);
-}
-.shadow {
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  top: 0;
-  pointer-events: none;
-  border-radius: var(--avatar_border_radius);
-}
-[dir=ltr] .shadow {
-  left: 0;
-}
-[dir=rtl] .shadow {
-  right: 0;
-}
-.shadow.black {
-  box-shadow: inset 0px 0px 5px var(--avatar_boxshadow);
-}
-.shadow.white {
-  box-shadow: inset 0px 0px 11px var(--avatar_boxshadow);
-}
-.avatar, .circle {
-  border-radius: var(--avatar_border_radius);
-}
-.border {
-  --avatar_border_width: 1px;
-}
-.image {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top:0;
-  z-index: 0;
-  border-radius: var(--avatar_border_radius);
-}
-[dir=ltr] .image {
-  left:0;
-}
-[dir=rtl] .image { 
-  right:0;
-}
-.animate{
-  composes:fadeIn modeForward from './../common/animation.module.css';
-}
-[dir=ltr] .animate{
-  animation-duration: var(--zd_transition2);
-}
-[dir=rtl] .animate{
-  animation-duration: var(--zd_transition2);
-}
-.square_small {
-  --avatar_border_radius: 4px;
-}
-.square_xsmall {
-  --avatar_border_radius: 6px;
-}
-.square_medium,
-.square_xmedium {
-  --avatar_border_radius: 8px;
-}
-.square_large,
-.square_xlarge {
-  --avatar_border_radius: 10px;
-}
-.none {
-  display: none;
-}
-.default {
-  --avatar_border_width: 0;
-}
-.secondary {
-  --avatar_bg_color: var(--zdt_avatar_secondary_bg);
-}
-.info {
-  --avatar_bg_color: var(--zdt_avatar_info_bg);
-}
-.initial {
-  text-transform: var(--avatar_text_transform);
-  display: inline-block;
-}
-.small {
-  --avatar_font_size: var(--zd_font_size9);
-}
-.xsmall {
-  --avatar_font_size: var(--zd_font_size12);
-}
-.medium {
-  --avatar_font_size: var(--zd_font_size14);
-}
-.xmedium {
-  --avatar_font_size: var(--zd_font_size14);
-}
-.large {
-  --avatar_font_size: var(--zd_font_size18);
-}
-.xlarge {
-  --avatar_font_size: var(--zd_font_size28);
-}
-.white {
-  --avatar_text_color: var(--zdt_avatar_white_text);
-  --avatar_border_color: var(--zdt_avatar_white_border);
-  --avatar_border_hoverColor: var(--zdt_avatar_white_borderHover);
-  --avatar_boxshadow: var(--zdt_avatar_white_boxshadow);
-}
+.varClass {
+  /* avatar default variables */
+  --avatar_text_color: var(--zdt_avatar_default_text);
+  --avatar_font_size: var(--zd_font_size14);
+  --avatar_bg_color: var(--zdt_avatar_default_bg);
+  --avatar_border_radius: 50%;
+  --avatar_border_width: 0;
+  --avatar_border_style: solid;
+  --avatar_border_color: var(--zdt_avatar_default_border);
+  --avatar_border_hoverColor: var(--zdt_avatar_default_borderHover);
+  --avatar_boxshadow: var(--zdt_avatar_default_boxshadow);
+  --avatar_text_transform: uppercase;
+}
+
+.avatar {
+  composes: varClass;
+  position: relative;
+  composes: dInflex alignVertical alignHorizontal from '../common/common.module.css';
+  vertical-align: middle;
+  font-size: var(--avatar_font_size);
+  color: var(--avatar_text_color);
+  border-width: var(--avatar_border_width);
+  border-style: var(--avatar_border_style);
+}
+
+.border {
+  border-color: var(--avatar_border_color);
+}
+
+.borderOnHover:hover, .borderOnActive {
+  border-color: var(--avatar_border_hoverColor);
+}
+
+.avatar, .primary {
+  background-color: var(--avatar_bg_color);
+}
+
+.shadow {
+  position: absolute;
+  height: 100% ;
+  width: 100% ;
+  top: 0 ;
+  pointer-events: none;
+  border-radius: var(--avatar_border_radius);
+}
+
+[dir=ltr] .shadow {
+  left: 0 ;
+}
+
+[dir=rtl] .shadow {
+  right: 0 ;
+}
+
+.shadow.black {
+  box-shadow: var(--zd_bs_avatar_black);
+}
+
+.shadow.white {
+  box-shadow: var(--zd_bs_avatar_white);
+}
+
+.avatar, .circle {
+  border-radius: var(--avatar_border_radius);
+}
+
+.border {
+  --avatar_border_width: 1px;
+}
+
+.image {
+  width: 100% ;
+  height: 100% ;
+  position: absolute;
+  top: 0 ;
+  z-index: 0;
+  border-radius: var(--avatar_border_radius);
+}
+
+[dir=ltr] .image {
+  left: 0 ;
+}
+
+[dir=rtl] .image {
+  right: 0 ;
+}
+
+.animate {
+  composes: fadeIn modeForward from './../common/animation.module.css';
+}
+
+[dir=ltr] .animate {
+  animation-duration: var(--zd_transition2);
+}
+
+[dir=rtl] .animate {
+  animation-duration: var(--zd_transition2);
+}
+
+.innerBorder {
+  border: 1px solid var(--zdt_avatarteam_innerCircle);
+}
+
+.square_small {
+  --avatar_border_radius: 4px;
+}
+
+.square_xsmall {
+  --avatar_border_radius: 6px;
+}
+
+.square_medium,
+.square_xmedium {
+  --avatar_border_radius: 8px;
+}
+
+.square_large,
+.square_xlarge {
+  --avatar_border_radius: 10px;
+}
+
+.none {
+  display: none;
+}
+
+.default {
+  --avatar_border_width: 0;
+}
+
+.secondary {
+  --avatar_bg_color: var(--zdt_avatar_secondary_bg);
+}
+
+.info {
+  --avatar_bg_color: var(--zdt_avatar_info_bg);
+}
+
+.initial {
+  text-transform: var(--avatar_text_transform);
+  display: inline-block;
+}
+
+.xxsmall {
+  --avatar_font_size: var(--zd_font_size8);
+}
+
+.small {
+  --avatar_font_size: var(--zd_font_size9);
+}
+
+.xsmall {
+  --avatar_font_size: var(--zd_font_size12);
+}
+
+.medium {
+  --avatar_font_size: var(--zd_font_size14);
+}
+
+.xmedium {
+  --avatar_font_size: var(--zd_font_size14);
+}
+
+.large {
+  --avatar_font_size: var(--zd_font_size18);
+}
+
+.xlarge {
+  --avatar_font_size: var(--zd_font_size28);
+}
+
+.white {
+  --avatar_text_color: var(--zdt_avatar_white_text);
+  --avatar_border_color: var(--zdt_avatar_white_border);
+  --avatar_border_hoverColor: var(--zdt_avatar_white_borderHover);
+  --avatar_boxshadow: var(--zdt_avatar_white_boxshadow);
+}