@zohodesk/components 1.1.1 → 1.2.0-temp-195

package/lib/Avatar/Avatar.module.css

@@ -1,176 +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: 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);
+.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);
 }

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();
+  });
+});