@zohodesk/components 1.0.0-alpha-269 → 1.0.0-alpha-271

package/lib/Avatar/Avatar.js

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

package/lib/Avatar/Avatar.module.css

@@ -1,7 +1,7 @@
 .varClass {
   /* avatar default variables */
   --avatar_text_color: var(--zdt_avatar_default_text);
-  --avatar_font_size: var(--zd_font_size14);
+  --avatar_font_size: 14px;
   --avatar_bg_color: var(--zdt_avatar_default_bg);
   --avatar_border_radius: 50%;
   --avatar_border_width: 0;
@@ -37,19 +37,19 @@
 
 .shadow {
   position: absolute;
-  height: 100% ;
-  width: 100% ;
-  top: 0 ;
+  height: 100%;
+  width: 100%;
+  top: 0;
   pointer-events: none;
   border-radius: var(--avatar_border_radius);
 }
 
 [dir=ltr] .shadow {
-  left: 0 ;
+  left: 0;
 }
 
 [dir=rtl] .shadow {
-  right: 0 ;
+  right: 0;
 }
 
 .shadow.black {
@@ -69,20 +69,20 @@
 }
 
 .image {
-  width: 100% ;
-  height: 100% ;
+  width: 100%;
+  height: 100%;
   position: absolute;
-  top: 0 ;
+  top: 0;
   z-index: 0;
   border-radius: var(--avatar_border_radius);
 }
 
 [dir=ltr] .image {
-  left: 0 ;
+  left: 0;
 }
 
 [dir=rtl] .image {
-  right: 0 ;
+  right: 0;
 }
 
 .animate {
@@ -141,31 +141,31 @@
 }
 
 .xxsmall {
-  --avatar_font_size: var(--zd_font_size8);
+  --avatar_font_size: 8px;
 }
 
 .small {
-  --avatar_font_size: var(--zd_font_size9);
+  --avatar_font_size: 9px;
 }
 
 .xsmall {
-  --avatar_font_size: var(--zd_font_size12);
+  --avatar_font_size: 12px;
 }
 
 .medium {
-  --avatar_font_size: var(--zd_font_size14);
+  --avatar_font_size: 14px;
 }
 
 .xmedium {
-  --avatar_font_size: var(--zd_font_size14);
+  --avatar_font_size: 14px;
 }
 
 .large {
-  --avatar_font_size: var(--zd_font_size18);
+  --avatar_font_size: 18px;
 }
 
 .xlarge {
-  --avatar_font_size: var(--zd_font_size28);
+  --avatar_font_size: 28px;
 }
 
 .white {

package/lib/Avatar/__tests__/Avatar.spec.js

@@ -1,20 +1,15 @@
 "use strict";
 
 var _react = _interopRequireDefault(require("react"));
-
 var _Avatar = _interopRequireDefault(require("../Avatar"));
-
 var _reactTestRenderer = _interopRequireDefault(require("react-test-renderer"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 var avatarURL = 'avatar.jpg';
 describe('Avatar component', function () {
   it('should display initial', function () {
     var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
       name: "vimalesan a"
     }));
-
     var tree = ele.toJSON();
     expect(tree).toMatchSnapshot();
   });
@@ -23,185 +18,146 @@ describe('Avatar component', function () {
       name: "vimalesan a",
       src: avatarURL
     }));
-
     var tree = ele.toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('should display initial if invalid url', function () {
     _Avatar["default"].invalidImageURLs.push(avatarURL);
-
     var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
       name: "vimalesan a",
       src: avatarURL
     }));
-
     var tree = ele.toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('should display image valid url', function () {
     _Avatar["default"].invalidImageURLs.length = 0;
-
     _Avatar["default"].validImageURLs.push(avatarURL);
-
     var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
       name: "vimalesan a",
       src: avatarURL
     }));
-
     var tree = ele.toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('should the palette is default', function () {
     _Avatar["default"].invalidImageURLs.length = 0;
-
     _Avatar["default"].validImageURLs.push(avatarURL);
-
     var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
       name: "vimalesan a",
       src: avatarURL,
       palette: "default"
     }));
-
     var tree = ele.toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('should the palette is secondary', function () {
     _Avatar["default"].invalidImageURLs.length = 0;
-
     _Avatar["default"].validImageURLs.push(avatarURL);
-
     var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
       name: "vimalesan a",
       src: avatarURL,
       palette: "secondary"
     }));
-
     var tree = ele.toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('should the palette is info', function () {
     _Avatar["default"].invalidImageURLs.length = 0;
-
     _Avatar["default"].validImageURLs.push(avatarURL);
-
     var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
       name: "vimalesan a",
       src: avatarURL,
       palette: "info"
     }));
-
     var tree = ele.toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('should the shape is square', function () {
     _Avatar["default"].invalidImageURLs.length = 0;
-
     _Avatar["default"].validImageURLs.push(avatarURL);
-
     var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
       name: "vimalesan a",
       src: avatarURL,
       shape: "square"
     }));
-
     var tree = ele.toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('should the size is small', function () {
     _Avatar["default"].invalidImageURLs.length = 0;
-
     _Avatar["default"].validImageURLs.push(avatarURL);
-
     var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
       name: "vimalesan a",
       src: avatarURL,
       size: "square"
     }));
-
     var tree = ele.toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('should the size is xsmall', function () {
     _Avatar["default"].invalidImageURLs.length = 0;
-
     _Avatar["default"].validImageURLs.push(avatarURL);
-
     var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
       name: "vimalesan a",
       src: avatarURL,
       size: "xsmall"
     }));
-
     var tree = ele.toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('should the size is xmedium', function () {
     _Avatar["default"].invalidImageURLs.length = 0;
-
     _Avatar["default"].validImageURLs.push(avatarURL);
-
     var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
       name: "vimalesan a",
       src: avatarURL,
       size: "xmedium"
     }));
-
     var tree = ele.toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('should the size is large', function () {
     _Avatar["default"].invalidImageURLs.length = 0;
-
     _Avatar["default"].validImageURLs.push(avatarURL);
-
     var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
       name: "vimalesan a",
       src: avatarURL,
       size: "large"
     }));
-
     var tree = ele.toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('should the size is xlarge', function () {
     _Avatar["default"].invalidImageURLs.length = 0;
-
     _Avatar["default"].validImageURLs.push(avatarURL);
-
     var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
       name: "vimalesan a",
       src: avatarURL,
       size: "xlarge"
     }));
-
     var tree = ele.toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('should have title', function () {
     _Avatar["default"].invalidImageURLs.length = 0;
-
     _Avatar["default"].validImageURLs.push(avatarURL);
-
     var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
       name: "vimalesan a",
       src: avatarURL,
       title: "Sample Title"
     }));
-
     var tree = ele.toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('should no need title', function () {
     _Avatar["default"].invalidImageURLs.length = 0;
-
     _Avatar["default"].validImageURLs.push(avatarURL);
-
     var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
       name: "vimalesan a",
       src: avatarURL,
       needTitle: false
     }));
-
     var tree = ele.toJSON();
     expect(tree).toMatchSnapshot();
   });

package/lib/Avatar/props/propTypes.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.propTypes = void 0;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 var propTypes = {
   dataId: _propTypes["default"].string,
   dataSelectorId: _propTypes["default"].string,