@zohodesk/components 1.0.0-alpha-258 → 1.0.0-alpha-259

package/README.md

@@ -32,9 +32,20 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.0.0-alpha-259
+
+- **Avatar**
+
+  `needInnerBorder` and `needDefaultBorder` prop has been added.
+
+  `xxsmall` option added for `size` prop.
+
+- **AvatarTeam** - `needInnerBorder`, `needBorder` and `needDefaultBorder` props has been added.
+
 # 1.0.0-alpha-258
 
-- **CheckBox** - dataSlector prop changed to dataSelectorId
+- **CheckBox** - dataSlector prop changed to dataSelectorId.
+
 - dataSelectorId prop added for all components
 
 # 1.0.0-alpha-257

package/assets/Appearance/dark/mode/darkMode.module.css

@@ -30,6 +30,7 @@
 	--zdt_avatarteam_secondary_bg: var(--dot_ebonyclay);
 	--zdt_avatarteam_nofill_border: var(--zdt_cta_grey_40_border);
 	--zdt_avatarteam_nofill_hover_border: var(--dot_oslogrey);
+	--zdt_avatarteam_innerCircle: var(--dot_ebonyclay);
 	
 	/* button */
 	--zdt_button_default_text: var(--zdt_cta_alpha_text);

package/assets/Appearance/default/mode/defaultMode.module.css

@@ -30,6 +30,7 @@
 	--zdt_avatarteam_secondary_bg: var(--dot_white);
 	--zdt_avatarteam_nofill_border: var(--zdt_cta_grey_40_border);
 	--zdt_avatarteam_nofill_hover_border: var(--dot_slateGrey);
+	--zdt_avatarteam_innerCircle: var(--dot_white);
 	
 	/* button */
 	--zdt_button_default_text: var(--zdt_cta_alpha_text);

package/assets/Appearance/pureDark/mode/pureDarkMode.module.css

@@ -30,6 +30,7 @@
 	--zdt_avatarteam_secondary_bg: #212121;
 	--zdt_avatarteam_nofill_border: var(--zdt_cta_grey_40_border);
 	--zdt_avatarteam_nofill_hover_border: var(--dot_oslogrey);
+	--zdt_avatarteam_innerCircle: #212121;
 	
 	/* button */
 	--zdt_button_default_text: var(--zdt_cta_alpha_text);

package/es/Avatar/Avatar.js

@@ -125,7 +125,9 @@ export default class Avatar extends React.Component {
       alternateSrc,
       isAnimate,
       dataSelectorId,
-      customProps
+      customProps,
+      needInnerBorder,
+      needDefaultBorder
     } = this.props;
     let {
       AvatarProps = {}
@@ -134,12 +136,13 @@ export default class Avatar extends React.Component {
     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 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 borderStyle = (!src || !showAvatar || showInitial) && needBorder ? `${style.border} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''} ` : '';
+    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 : ''}`,
@@ -152,7 +155,7 @@ export default class Avatar extends React.Component {
       "data-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-selector-id": `${dataSelectorId}_AvatarImg`,
       name: name,
@@ -160,7 +163,7 @@ export default class Avatar extends React.Component {
       onLoad: this.putValidImageURLJSON,
       src: showAlternateAvatar ? alternateSrc : src,
       alt: name
-    }), !isValidImageList && !showAlternateAvatar ? null : /*#__PURE__*/React.createElement("span", {
+    }), showDefaultBorder ? null : /*#__PURE__*/React.createElement("span", {
       className: `${style.shadow} ${textStyle} `
     })));
   }

package/es/Avatar/Avatar.module.css

@@ -79,6 +79,9 @@
 [dir=rtl] .animate{
   animation-duration: var(--zd_transition2);
 }
+.innerBorder{
+  border: 1px solid var(--zdt_avatarteam_innerCircle);
+}
 .square_small {
   --avatar_border_radius: 4px;
 }
@@ -109,6 +112,9 @@
   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);
 }

package/es/Avatar/props/defaultProps.js

@@ -11,5 +11,7 @@ export const defaultProps = {
   borderOnHover: false,
   customProps: {},
   isAnimate: true,
-  dataSelectorId: 'avatar'
+  dataSelectorId: 'avatar',
+  needInnerBorder: false,
+  needDefaultBorder: false
 };

package/es/Avatar/props/propTypes.js

@@ -9,7 +9,7 @@ export const propTypes = {
   onClick: PropTypes.func,
   palette: PropTypes.oneOf(['primary', 'secondary', 'info', 'default']),
   shape: PropTypes.oneOf(['circle', 'square']),
-  size: PropTypes.oneOf(['small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge']),
+  size: PropTypes.oneOf(['xxsmall', 'small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge']),
   src: PropTypes.string,
   textPalette: PropTypes.oneOf(['white', 'black']),
   title: PropTypes.string,
@@ -20,5 +20,7 @@ export const propTypes = {
   customProps: PropTypes.shape({
     AvatarProps: PropTypes.object
   }),
-  isAnimate: PropTypes.bool
+  isAnimate: PropTypes.bool,
+  needInnerBorder: PropTypes.bool,
+  needDefaultBorder: PropTypes.bool
 };

package/es/AvatarTeam/AvatarTeam.js

@@ -32,7 +32,10 @@ export default class AvatarTeam extends React.Component {
       borderOnActive,
       borderOnHover,
       dataSelectorId,
-      customProps
+      customProps,
+      needInnerBorder,
+      needBorder,
+      needDefaultBorder
     } = this.props;
     let {
       AvatarTeamProps = {},
@@ -58,7 +61,10 @@ export default class AvatarTeam extends React.Component {
       needTitle: needTitle,
       customClass: customAvatar,
       borderOnActive: borderOnActive,
-      borderOnHover: border
+      borderOnHover: border,
+      needInnerBorder: needInnerBorder,
+      needBorder: needBorder,
+      needDefaultBorder: needDefaultBorder
     }, AvatarProps)), /*#__PURE__*/React.createElement("span", {
       className: `${style.team} ${isFilled ? `${style[`${palette}Filled`]}` : style.nofill} 
           ${style[`${size}team`]} ${customAvatarTeam}`

package/es/AvatarTeam/AvatarTeam.module.css

@@ -3,6 +3,9 @@
   --avatarteam_border_width: var(--zd_size1);
   --avatarteam_border_style: solid;
   --avatarteam_border_color: var(--zdt_avatarteam_default_border);
+  --avatarteam_outline_width: var(--zd_size1);
+  --avatarteam_outline_style: solid;
+  --avatarteam_outline_color: var(--zdt_avatarteam_innerCircle);
   --avatarteam_bg_color: var(--zdt_avatarteam_default_bg);
   --avatarteam_width: var(--zd_size5);
   --avatarteam_height: var(--zd_size5);
@@ -16,6 +19,7 @@
   position: relative;
   display: inline-block;
   font-size: 0;
+  vertical-align: middle;
 }
 .team {
   composes: varClass;
@@ -23,6 +27,9 @@
   top: var(--avatarteam_top_top);
   width: var(--avatarteam_width);
   height: var(--avatarteam_height);
+  outline-width: var(--avatarteam_outline_width);
+  outline-style: var(--avatarteam_outline_style);
+  outline-color: var(--avatarteam_outline_color);
   border-width: var(--avatarteam_border_width);
   border-style: var(--avatarteam_border_style);
   border-color: var(--avatarteam_border_color);
@@ -38,11 +45,11 @@
   right: 50%;
 }
 .nofill {
-  --avatarteam_border_color: var(--zdt_avatarteam_nofill_border);
+  --avatarteam_border_color: var(--zdt_avatarteam_nofill_hover_border);
 }
 .primaryFilled,
 .infoFilled {
-  --avatarteam_bg_color: var(--zdt_avatarteam_primary_bg);
+  --avatarteam_bg_color: var(--zdt_avatarteam_primary_hover_bg);
 }
 .secondaryFilled {
   --avatarteam_bg_color: var(--zdt_avatarteam_secondary_bg);
@@ -64,6 +71,9 @@
   height: inherit;
   width: inherit;
   top: var(--avatarteam_bottom_top);
+  outline-width: var(--avatarteam_outline_width);
+  outline-style: var(--avatarteam_outline_style);
+  outline-color: var( --avatarteam_outline_color);
 }
 .team:after, .team:before {
   border: inherit;
@@ -80,7 +90,8 @@
   left: var(--avatarteam_bottom_right);
 }
 .smallteam,
-.xsmallteam {
+.xsmallteam,
+.xxsmallteam {
   --avatarteam_height: var(--zd_size3);
   --avatarteam_width: var(--zd_size3);
 }
@@ -94,6 +105,22 @@
   --avatarteam_height: var(--zd_size7);
   --avatarteam_width: var(--zd_size7);
 }
+
+.xxsmallteam {
+  --avatarteam_top_top: 0px;
+}
+.xxsmallteam::after,
+.xxsmallteam:before {
+  --avatarteam_bottom_top: var(--zd_size13);
+}
+.xxsmallteam:after {
+  --avatarteam_bottom_left: calc(var(--zd_size8) * -1);
+}
+.xxsmallteam:before {
+  --avatarteam_bottom_right: calc(var(--zd_size8) * -1);
+}
+
+
 .smallteam::after,
 .smallteam:before {
   --avatarteam_bottom_top: var(--zd_size17);

package/es/AvatarTeam/props/defaultProps.js

@@ -10,5 +10,8 @@ export const defaultProps = {
   customClass: {},
   borderOnActive: false,
   borderOnHover: false,
-  customProps: {}
+  customProps: {},
+  needInnerBorder: true,
+  needBorder: true,
+  needDefaultBorder: true
 };

package/es/AvatarTeam/props/propTypes.js

@@ -7,9 +7,10 @@ export const propTypes = {
   needTitle: PropTypes.bool,
   onClick: PropTypes.func,
   palette: PropTypes.oneOf(['primary', 'secondary', 'info']),
-  size: PropTypes.oneOf(['small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge']),
+  size: PropTypes.oneOf(['xxsmall', 'small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge']),
   src: PropTypes.string,
   textPalette: PropTypes.oneOf(['white', 'black']),
+  needBorder: PropTypes.bool,
   title: PropTypes.string,
   customClass: PropTypes.shape({
     customAvatar: PropTypes.string,
@@ -17,6 +18,8 @@ export const propTypes = {
   }),
   borderOnActive: PropTypes.bool,
   borderOnHover: PropTypes.bool,
+  needInnerBorder: PropTypes.bool,
+  needDefaultBorder: PropTypes.bool,
   customProps: PropTypes.shape({
     AvatarTeamProps: PropTypes.object,
     AvatarProps: PropTypes.object

package/es/Provider/AvatarSize.js

@@ -2,6 +2,7 @@ import style from '../common/avatarsizes.module.css';
 let styleList = {
   small: style.small,
   xsmall: style.xsmall,
+  xxsmall: style.xxsmall,
   medium: style.medium,
   xmedium: style.xmedium,
   large: style.large,

package/es/common/avatarsizes.module.css

@@ -9,7 +9,8 @@
 .medium,
 .xmedium,
 .large,
-.xlarge {
+.xlarge,
+.xxsmall {
   composes: varClass;
   width: var(--avatar_width);
   height: var(--avatar_height);
@@ -18,7 +19,10 @@
   --avatar_height: var(--zd_size22);
   --avatar_width: var(--zd_size22);
 }
-
+.xxsmall {
+  --avatar_height: var(--zd_size18);
+  --avatar_width: var(--zd_size18);
+}
 .xsmall {
   --avatar_height: var(--zd_size30);
   --avatar_width: var(--zd_size30);

package/lib/Accordion/Accordion.js

@@ -10,10 +10,8 @@ var _defaultProps = require("./props/defaultProps");
 var _propTypes = require("./props/propTypes");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 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); }; }

package/lib/Accordion/AccordionItem.js

@@ -12,10 +12,8 @@ var _VelocityAnimation = _interopRequireDefault(require("../VelocityAnimation/Ve
 var _VelocityAnimationGroup = _interopRequireDefault(require("../VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 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); }; }

package/lib/Animation/Animation.js

@@ -12,10 +12,8 @@ var _reactTransitionGroup = require("react-transition-group");
 var _transitionModule = _interopRequireDefault(require("../common/transition.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 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); }; }

package/lib/AppContainer/AppContainer.js

@@ -24,10 +24,8 @@ 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); }; }

package/lib/Avatar/Avatar.js

@@ -18,12 +18,10 @@ function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread n
 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); }; }
@@ -153,19 +151,22 @@ var Avatar = /*#__PURE__*/function (_React$Component) {
         alternateSrc = _this$props2.alternateSrc,
         isAnimate = _this$props2.isAnimate,
         dataSelectorId = _this$props2.dataSelectorId,
-        customProps = _this$props2.customProps;
+        customProps = _this$props2.customProps,
+        needInnerBorder = _this$props2.needInnerBorder,
+        needDefaultBorder = _this$props2.needDefaultBorder;
       var _customProps$AvatarPr = customProps.AvatarProps,
         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;
-      var isValidImageList = Avatar.validImageURLs.indexOf(src) !== -1;
+      //let isValidImageList = Avatar.validImageURLs.indexOf(src) !== -1;
       var showAvatar = src && !isInvalidImageList;
       var showInitial = !showAvatar || showAvatar && isInvalidImageList;
       var showAlternateAvatar = alternateSrc ? showInitial : false;
       var border = borderOnHover || onClick;
-      var borderStyle = (!src || !showAvatar || showInitial) && needBorder ? "".concat(_AvatarModule["default"].border, " ").concat(borderOnActive ? _AvatarModule["default"].borderOnActive : border ? _AvatarModule["default"].borderOnHover : '', " ") : '';
+      var showDefaultBorder = src && !isInvalidImageList && needDefaultBorder;
+      var borderStyle = (showDefaultBorder || !src || !showAvatar || showInitial) && needBorder ? "".concat(_AvatarModule["default"].border, " ").concat(borderOnActive ? _AvatarModule["default"].borderOnActive : border ? _AvatarModule["default"].borderOnHover : '', " ") : '';
       borderStyle = showAlternateAvatar ? '' : borderStyle;
       return /*#__PURE__*/_react["default"].createElement("div", _extends({
         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 : ''),
@@ -178,7 +179,7 @@ var Avatar = /*#__PURE__*/function (_React$Component) {
         "data-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 : ''),
+        className: "".concat(_AvatarModule["default"].image, " ").concat(isAnimate ? _AvatarModule["default"].animate : '', " ").concat(needInnerBorder ? _AvatarModule["default"].innerBorder : ''),
         "data-id": "".concat(dataId, "_AvatarImg"),
         "data-selector-id": "".concat(dataSelectorId, "_AvatarImg"),
         name: name,
@@ -186,7 +187,7 @@ var Avatar = /*#__PURE__*/function (_React$Component) {
         onLoad: this.putValidImageURLJSON,
         src: showAlternateAvatar ? alternateSrc : src,
         alt: name
-      }), !isValidImageList && !showAlternateAvatar ? null : /*#__PURE__*/_react["default"].createElement("span", {
+      }), showDefaultBorder ? null : /*#__PURE__*/_react["default"].createElement("span", {
         className: "".concat(_AvatarModule["default"].shadow, " ").concat(textStyle, " ")
       })));
     }

package/lib/Avatar/Avatar.module.css

@@ -79,6 +79,9 @@
 [dir=rtl] .animate{
   animation-duration: var(--zd_transition2);
 }
+.innerBorder{
+  border: 1px solid var(--zdt_avatarteam_innerCircle);
+}
 .square_small {
   --avatar_border_radius: 4px;
 }
@@ -109,6 +112,9 @@
   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);
 }

package/lib/Avatar/props/defaultProps.js

@@ -17,6 +17,8 @@ var defaultProps = {
   borderOnHover: false,
   customProps: {},
   isAnimate: true,
-  dataSelectorId: 'avatar'
+  dataSelectorId: 'avatar',
+  needInnerBorder: false,
+  needDefaultBorder: false
 };
 exports.defaultProps = defaultProps;

package/lib/Avatar/props/propTypes.js

@@ -16,7 +16,7 @@ var propTypes = {
   onClick: _propTypes["default"].func,
   palette: _propTypes["default"].oneOf(['primary', 'secondary', 'info', 'default']),
   shape: _propTypes["default"].oneOf(['circle', 'square']),
-  size: _propTypes["default"].oneOf(['small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge']),
+  size: _propTypes["default"].oneOf(['xxsmall', 'small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge']),
   src: _propTypes["default"].string,
   textPalette: _propTypes["default"].oneOf(['white', 'black']),
   title: _propTypes["default"].string,
@@ -27,6 +27,8 @@ var propTypes = {
   customProps: _propTypes["default"].shape({
     AvatarProps: _propTypes["default"].object
   }),
-  isAnimate: _propTypes["default"].bool
+  isAnimate: _propTypes["default"].bool,
+  needInnerBorder: _propTypes["default"].bool,
+  needDefaultBorder: _propTypes["default"].bool
 };
 exports.propTypes = propTypes;

package/lib/AvatarTeam/AvatarTeam.js

@@ -13,10 +13,8 @@ var _AvatarTeamModule = _interopRequireDefault(require("./AvatarTeam.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 _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); }; }
@@ -58,7 +56,10 @@ var AvatarTeam = /*#__PURE__*/function (_React$Component) {
         borderOnActive = _this$props.borderOnActive,
         borderOnHover = _this$props.borderOnHover,
         dataSelectorId = _this$props.dataSelectorId,
-        customProps = _this$props.customProps;
+        customProps = _this$props.customProps,
+        needInnerBorder = _this$props.needInnerBorder,
+        needBorder = _this$props.needBorder,
+        needDefaultBorder = _this$props.needDefaultBorder;
       var _customProps$AvatarTe = customProps.AvatarTeamProps,
         AvatarTeamProps = _customProps$AvatarTe === void 0 ? {} : _customProps$AvatarTe,
         _customProps$AvatarPr = customProps.AvatarProps,
@@ -83,7 +84,10 @@ var AvatarTeam = /*#__PURE__*/function (_React$Component) {
         needTitle: needTitle,
         customClass: customAvatar,
         borderOnActive: borderOnActive,
-        borderOnHover: border
+        borderOnHover: border,
+        needInnerBorder: needInnerBorder,
+        needBorder: needBorder,
+        needDefaultBorder: needDefaultBorder
       }, AvatarProps)), /*#__PURE__*/_react["default"].createElement("span", {
         className: "".concat(_AvatarTeamModule["default"].team, " ").concat(isFilled ? "".concat(_AvatarTeamModule["default"]["".concat(palette, "Filled")]) : _AvatarTeamModule["default"].nofill, " \n          ").concat(_AvatarTeamModule["default"]["".concat(size, "team")], " ").concat(customAvatarTeam)
       }));

package/lib/AvatarTeam/AvatarTeam.module.css

@@ -3,6 +3,9 @@
   --avatarteam_border_width: var(--zd_size1);
   --avatarteam_border_style: solid;
   --avatarteam_border_color: var(--zdt_avatarteam_default_border);
+  --avatarteam_outline_width: var(--zd_size1);
+  --avatarteam_outline_style: solid;
+  --avatarteam_outline_color: var(--zdt_avatarteam_innerCircle);
   --avatarteam_bg_color: var(--zdt_avatarteam_default_bg);
   --avatarteam_width: var(--zd_size5);
   --avatarteam_height: var(--zd_size5);
@@ -16,6 +19,7 @@
   position: relative;
   display: inline-block;
   font-size: 0;
+  vertical-align: middle;
 }
 .team {
   composes: varClass;
@@ -23,6 +27,9 @@
   top: var(--avatarteam_top_top);
   width: var(--avatarteam_width);
   height: var(--avatarteam_height);
+  outline-width: var(--avatarteam_outline_width);
+  outline-style: var(--avatarteam_outline_style);
+  outline-color: var(--avatarteam_outline_color);
   border-width: var(--avatarteam_border_width);
   border-style: var(--avatarteam_border_style);
   border-color: var(--avatarteam_border_color);
@@ -38,11 +45,11 @@
   right: 50%;
 }
 .nofill {
-  --avatarteam_border_color: var(--zdt_avatarteam_nofill_border);
+  --avatarteam_border_color: var(--zdt_avatarteam_nofill_hover_border);
 }
 .primaryFilled,
 .infoFilled {
-  --avatarteam_bg_color: var(--zdt_avatarteam_primary_bg);
+  --avatarteam_bg_color: var(--zdt_avatarteam_primary_hover_bg);
 }
 .secondaryFilled {
   --avatarteam_bg_color: var(--zdt_avatarteam_secondary_bg);
@@ -64,6 +71,9 @@
   height: inherit;
   width: inherit;
   top: var(--avatarteam_bottom_top);
+  outline-width: var(--avatarteam_outline_width);
+  outline-style: var(--avatarteam_outline_style);
+  outline-color: var( --avatarteam_outline_color);
 }
 .team:after, .team:before {
   border: inherit;
@@ -80,7 +90,8 @@
   left: var(--avatarteam_bottom_right);
 }
 .smallteam,
-.xsmallteam {
+.xsmallteam,
+.xxsmallteam {
   --avatarteam_height: var(--zd_size3);
   --avatarteam_width: var(--zd_size3);
 }
@@ -94,6 +105,22 @@
   --avatarteam_height: var(--zd_size7);
   --avatarteam_width: var(--zd_size7);
 }
+
+.xxsmallteam {
+  --avatarteam_top_top: 0px;
+}
+.xxsmallteam::after,
+.xxsmallteam:before {
+  --avatarteam_bottom_top: var(--zd_size13);
+}
+.xxsmallteam:after {
+  --avatarteam_bottom_left: calc(var(--zd_size8) * -1);
+}
+.xxsmallteam:before {
+  --avatarteam_bottom_right: calc(var(--zd_size8) * -1);
+}
+
+
 .smallteam::after,
 .smallteam:before {
   --avatarteam_bottom_top: var(--zd_size17);

package/lib/AvatarTeam/props/defaultProps.js

@@ -16,6 +16,9 @@ var defaultProps = {
   customClass: {},
   borderOnActive: false,
   borderOnHover: false,
-  customProps: {}
+  customProps: {},
+  needInnerBorder: true,
+  needBorder: true,
+  needDefaultBorder: true
 };
 exports.defaultProps = defaultProps;