@zohodesk/components 1.2.13 → 1.2.14

package/es/Tag/Tag.module.css

@@ -22,9 +22,8 @@
   --tag_icon_bg_color: var(--zdt_tag_icon_bg);
 }[dir=ltr] .varClass {
   --tag_closeicon_border_radius: 0 12px 12px 0 /*rtl: 12px 0 0 12px*/;
-  --tag_closeicon_padding: 0 var(--zd_size7) 0 var(--zd_size6
-)    ;
-  --tag_icon_margin: 0 0 0 var(--zd_size5) ;
+  --tag_closeicon_padding: 0 var(--zd_size7) 0 var(--zd_size6);
+  --tag_icon_margin: 0 0 0 var(--zd_size5);
 }[dir=rtl] .varClass {
   --tag_closeicon_border_radius: 12px 0 0 12px;
   --tag_closeicon_padding: 0 var(--zd_size6) 0 var(--zd_size7);

package/es/common/common.module.css

@@ -516,10 +516,10 @@
 
 .fitContWidth {
   width: fit-content ;
-  width: undefined ;
+  width: -moz-fit-content ;
 }
 
 .fitContHeight {
   height: fit-content ;
-  height: undefined ;
+  height: -moz-fit-content ;
 }

package/es/v1/ListItem/ListItemWithAvatar.js

@@ -1,7 +1,7 @@
 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); }
 
 /**** Libraries ****/
-import React from 'react';
+import React, { memo } from 'react';
 import { Box } from '../Layout';
 import ListContainer from './ListContainer';
 import { ListItemWithAvatarDefaultProps } from '../../ListItem/props/defaultProps';
@@ -135,11 +135,10 @@ const ListItemWithAvatar = props => {
   })) : null);
 };
 
-export default ListItemWithAvatar;
 ListItemWithAvatar.defaultProps = ListItemWithAvatarDefaultProps;
-ListItemWithAvatar.propTypes = ListItemWithAvatar_Props; // if (__DOCS__) {
-//   ListItemWithAvatar.docs = {
-//     componentGroup: 'Molecule',
-//     folderName: 'Style Guide'
-//   };
-// }
+ListItemWithAvatar.propTypes = ListItemWithAvatar_Props;
+const MemoizedListItemWithAvatar = /*#__PURE__*/memo(ListItemWithAvatar);
+MemoizedListItemWithAvatar.propTypes = ListItemWithAvatar_Props;
+MemoizedListItemWithAvatar.defaultProps = ListItemWithAvatarDefaultProps;
+MemoizedListItemWithAvatar.displayName = 'ListItemWithAvatar';
+export default MemoizedListItemWithAvatar;

package/es/v1/Tag/Tag.js

@@ -129,6 +129,10 @@ function Tag(props) {
   }))));
 }
 
-export default /*#__PURE__*/memo(Tag);
 Tag.defaultProps = defaultProps;
-Tag.propTypes = propTypes;
+Tag.propTypes = propTypes;
+const MemoizedTag = /*#__PURE__*/memo(Tag);
+MemoizedTag.propTypes = propTypes;
+MemoizedTag.defaultProps = defaultProps;
+MemoizedTag.displayName = 'Tag';
+export default MemoizedTag;

package/es/v1/TextBox/TextBox.js

@@ -1,10 +1,11 @@
 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, { useRef, useCallback } from 'react';
+import React, { memo, useRef, useCallback } from 'react';
 import { defaultProps } from '../../TextBox/props/defaultProps';
 import { propTypes } from '../../TextBox/props/propTypes';
 import style from '../../TextBox/TextBox.module.css';
-export default function TextBox(props) {
+
+function TextBox(props) {
   let {
     type,
     name,
@@ -143,12 +144,11 @@ export default function TextBox(props) {
     onMouseDown: onMouseDown
   }, options.current, customProps));
 }
+
 TextBox.defaultProps = defaultProps;
-TextBox.propTypes = propTypes; // if (__DOCS__) {
-//   Textbox.docs = {
-//     componentGroup: 'Form Elements',
-//     folderName: 'Style Guide',
-//     external: true,
-//     description: ' '
-//   };
-// }
+TextBox.propTypes = propTypes;
+const MemoizedTextBox = /*#__PURE__*/memo(TextBox);
+MemoizedTextBox.propTypes = propTypes;
+MemoizedTextBox.defaultProps = defaultProps;
+MemoizedTextBox.displayName = 'TextBox';
+export default MemoizedTextBox;

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

@@ -0,0 +1,188 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Avatar = _interopRequireDefault(require("../Avatar.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('Avatar', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Avatar["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  var palette = ['primary', 'secondary', 'info', 'default'];
+  test.each(palette)('rendering the palette of- %s', function (palette) {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
+      palette: palette
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  var shape = ['circle', 'square'];
+  test.each(shape)('rendering the shape of- %s', function (shape) {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
+      shape: shape
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  var size = ['xxsmall', 'small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge'];
+  test.each(size)('rendering the size of- %s', function (size) {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
+      size: size
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  var textPalette = ['white', 'black'];
+  test.each(textPalette)('rendering the size of- %s', function (textPalette) {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
+      textPalette: textPalette
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering src', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
+      src: "https://www.w3schools.com/images/w3schools_green.jpg",
+      name: "AvatarName"
+    })),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering Name in 2 Word', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
+      name: "Gowtham Kathirvel"
+    })),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering title', function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
+      title: "AvatarNameTitile"
+    })),
+        asFragment = _render8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering needTitle', function () {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
+      needTitle: true,
+      title: "AvatarNameTitile"
+    })),
+        asFragment = _render9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering initial', function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
+      initial: "AvatarTeam"
+    })),
+        asFragment = _render10.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering NeedBorder false', function () {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
+      needBorder: false
+    })),
+        asFragment = _render11.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering BorderOnActive true', function () {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
+      borderOnActive: true
+    })),
+        asFragment = _render12.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering borderOnHover true', function () {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
+      borderOnHover: true
+    })),
+        asFragment = _render13.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering customClass true', function () {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
+      customClass: "customClassAvatar"
+    })),
+        asFragment = _render14.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering alternateSrc', function () {
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
+      src: "https://www.w3schools.com/images/w3schools_green.jpg",
+      showAlternateAvatar: true,
+      alternateSrc: "https://www.w3schools.com/css/img_5terre.jpg"
+    })),
+        asFragment = _render15.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering showAlternateAvatar is enabled border get disabled', function () {
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
+      showAlternateAvatar: true,
+      alternateSrc: "https://www.w3schools.com/css/img_5terre.jpg"
+    })),
+        asFragment = _render16.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering isAnimate is false', function () {
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
+      src: "https://www.w3schools.com/images/w3schools_green.jpg",
+      isAnimate: false
+    })),
+        asFragment = _render17.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering needInnerBorder is true', function () {
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
+      src: "https://www.w3schools.com/images/w3schools_green.jpg",
+      isAnimate: false,
+      needInnerBorder: true
+    })),
+        asFragment = _render18.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering showDefaultBorder is true', function () {
+    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
+      src: "https://www.w3schools.com/images/w3schools_green.jpg",
+      isInvalidImageList: false,
+      needDefaultBorder: true
+    })),
+        asFragment = _render19.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the Custom props', function () {
+    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
+      customProps: {
+        AvatarProps: {
+          'data-avatar': true
+        }
+      }
+    })),
+        asFragment = _render20.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});