@zohodesk/components 1.2.12 → 1.2.14

package/es/v1/Typography/css/cssJSLogic.js

@@ -6,19 +6,22 @@ export default function cssJSLogic(_ref) {
     style
   } = _ref;
   let {
-    $ui_isReset,
-    $ui_isDotted,
+    $flag_reset,
+    $flag_dotted,
     $ui_size,
     $ui_lineClamp,
     $ui_lineHeight,
     $ui_display,
-    $ui_variant,
+    $ui_weight,
     $ui_typeFace,
     $ui_textAlign,
     $ui_letterSpacing,
     $ui_transform,
     $ui_decoration,
-    $ui_className
+    $ui_className,
+    $ui_wordBreak,
+    $ui_wordWrap,
+    $ui_whiteSpace
   } = props;
 
   if ($ui_letterSpacing && $ui_letterSpacing.match(/\./g)) {
@@ -26,19 +29,22 @@ export default function cssJSLogic(_ref) {
   }
 
   let typographyClass = compileClassNames({
-    [style.reset]: $ui_isReset,
-    [style.dotted]: $ui_isDotted,
+    [style.reset]: $flag_reset,
+    [style.dotted]: $flag_dotted,
     [style[`size${$ui_size}`]]: !!$ui_size,
     [style[`lineclamp_${$ui_lineClamp}`]]: !!$ui_lineClamp,
     [style[`lineheight_${$ui_lineHeight}`]]: !!$ui_lineHeight,
     [style[`display_${$ui_display}`]]: !!$ui_display,
-    [style[`font_${$ui_variant}`]]: !!$ui_variant,
+    [style[`font_${$ui_weight}`]]: !!$ui_weight,
     [style[`fontStyles_${$ui_typeFace}`]]: !!$ui_typeFace,
     [style[`textalign_${$ui_textAlign}`]]: !!$ui_textAlign,
     [style[`letterspacing_${$ui_letterSpacing}`]]: !!$ui_letterSpacing,
     [style[`transform_${$ui_transform}`]]: !!$ui_transform,
     [style[`decoration_${$ui_decoration}`]]: !!$ui_decoration,
-    [$ui_className]: !!$ui_className
+    [$ui_className]: !!$ui_className,
+    [style[`wordBreak_${$ui_wordBreak}`]]: !!$ui_wordBreak,
+    [style[`wordWrap_${$ui_wordWrap}`]]: !!$ui_wordWrap,
+    [style[`whiteSpace_${$ui_whiteSpace}`]]: !!$ui_whiteSpace
   });
   return {
     typographyClass

package/es/v1/Typography/props/defaultProps.js

@@ -1,8 +1,8 @@
 export const defaultProps = {
   $ui_className: '',
   $ui_tagName: 'div',
-  $ui_isReset: false,
-  $ui_isDotted: false,
-  a11yAttributes: {},
-  tagAttributes: {}
+  $flag_reset: false,
+  $flag_dotted: false,
+  $tagAttributes_text: {},
+  $a11yAttributes_text: {}
 };

package/es/v1/Typography/props/propTypes.js

@@ -3,10 +3,10 @@ export const propTypes = {
   children: PropTypes.node,
   $ui_className: PropTypes.string,
   $ui_tagName: PropTypes.string,
-  $ui_isReset: PropTypes.bool,
-  $ui_isDotted: PropTypes.bool,
+  $flag_reset: PropTypes.bool,
+  $flag_dotted: PropTypes.bool,
   $ui_display: PropTypes.oneOf(['block', 'inlineBlock', 'inline', 'initial']),
-  $ui_variant: PropTypes.oneOf(['regular', 'light', 'semibold', 'bold']),
+  $ui_weight: PropTypes.oneOf(['regular', 'light', 'semibold', 'bold']),
   $ui_textAlign: PropTypes.oneOf(['left', 'right', 'center', 'justify']),
   $ui_transform: PropTypes.oneOf(['default', 'upper', 'lower', 'capital']),
   $ui_lineClamp: PropTypes.oneOf(['1', '2', '3', '4', '5']),
@@ -15,10 +15,13 @@ export const propTypes = {
   $ui_size: PropTypes.oneOf(['7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '24', '25', '26', '28', '29', '30', '32', '34', '35', '36', '40', '50', 'inherit']),
   $ui_lineHeight: PropTypes.oneOf(['0', '1', '8', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '24', '25', '26', '27', '28', '29', '30', '32', '33', '34', '35', '36', '38', '40', '41', '42', '45', '50', '52', '54', '55', '60', '70', '75', '120', 'inherit']),
   $ui_letterSpacing: PropTypes.oneOf(['0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.7', '0.8', '0.9', '1', '2', '4', 'inherit']),
+  $ui_wordBreak: PropTypes.oneOf(['breakAll', 'keepAll', 'breakWord']),
+  $ui_wordWrap: PropTypes.oneOf(['normal', 'break']),
+  $ui_whiteSpace: PropTypes.oneOf(['normal', 'noWrap', 'pre', 'preLine', 'preWrap']),
   $i18n_dataTitle: PropTypes.string,
   testId: PropTypes.string,
   customId: PropTypes.string,
   customStyle: PropTypes.object,
-  a11yAttributes: PropTypes.object,
-  tagAttributes: PropTypes.object
+  $a11yAttributes_text: PropTypes.object,
+  $tagAttributes_text: PropTypes.object
 };

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