@synerise/ds-avatar 0.13.37 → 0.14.3

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.14.3](https://github.com/synerise/synerise-design/compare/@synerise/ds-avatar@0.14.2...@synerise/ds-avatar@0.14.3) (2021-11-22)
+
+**Note:** Version bump only for package @synerise/ds-avatar
+
+
+
+
+
+## [0.14.2](https://github.com/synerise/synerise-design/compare/@synerise/ds-avatar@0.14.1...@synerise/ds-avatar@0.14.2) (2021-11-16)
+
+**Note:** Version bump only for package @synerise/ds-avatar
+
+
+
+
+
+## [0.14.1](https://github.com/synerise/synerise-design/compare/@synerise/ds-avatar@0.13.37...@synerise/ds-avatar@0.14.1) (2021-11-09)
+
+**Note:** Version bump only for package @synerise/ds-avatar
+
+
+
+
+
+# [0.14.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-avatar@0.13.37...@synerise/ds-avatar@0.14.0) (2021-11-09)
+
+**Note:** Version bump only for package @synerise/ds-avatar
+
+
+
+
+
 ## [0.13.37](https://github.com/synerise/synerise-design/compare/@synerise/ds-avatar@0.13.36...@synerise/ds-avatar@0.13.37) (2021-11-05)
 
 **Note:** Version bump only for package @synerise/ds-avatar

package/README.md

@@ -95,8 +95,7 @@ We can present avatars as a single entity or in a group.
 ### Avatar icons
 
 ```
-import Icon from "@synerise/ds-icon";
-import { FileM} from "@synerise/ds-icon/dist/icons";
+import Icon, { FileM } from "@synerise/ds-icon";
 <div style={{ 'display': 'flex', 'justifyContent': 'space-between' }}>
     <Avatar tooltip={{name: 'Jan Janowski', email: 'jj@test.pl'}} shape="square" size="medium" backgroundColor="blue" backgroundColorHue="600">JJ</Avatar>
     <Avatar tooltip={{name: 'Jan Janowski', email: 'jj@test.pl'}} shape="cirlce" size="medium" backgroundColor="blue" backgroundColorHue="600">JJ</Avatar>
@@ -194,4 +193,4 @@ import { ObjectAvatar } from '@synerise/ds-avatar';
 | disabled        | Determines if avatar is disabled               | boolean                                                                                                       | `false`  |         |
 | iconComponent   | Replace default user icon                      | React.ReactNode                                                                                               | -        |         |
 | size            | Size of the avatar                             | `small` / `medium` / `large` / `extraLarge`                                                                   | `medium` |         |
-| tooltip         | Change default tooltip text displayed on hover | { title: string, description: string, status: string } / `false`                                              | -        |         |
+| tooltip         | Change default tooltip text displayed on hover | { title: string, description: string, status: string } / `false`                                              | -        |         |

package/dist/Avatar.js

@@ -1,3 +1,6 @@
+var _excluded = ["backgroundColor", "backgroundColorHue", "children", "disabled", "hasStatus", "iconComponent", "iconScale", "tooltip", "size"],
+    _excluded2 = ["type"];
+
 function _extends() { _extends = Object.assign || 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -6,8 +9,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 import * as React from 'react';
@@ -42,16 +43,16 @@ var Avatar = function Avatar(_ref) {
       tooltip = _ref$tooltip === void 0 ? {} : _ref$tooltip,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? DEFAULT_SIZE : _ref$size,
-      antdProps = _objectWithoutProperties(_ref, ["backgroundColor", "backgroundColorHue", "children", "disabled", "hasStatus", "iconComponent", "iconScale", "tooltip", "size"]);
+      antdProps = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var sizes = _objectSpread({}, ICON_SIZES);
 
   var iconElement = iconComponent; // Enforce icon to be scaled
 
-  if (isIconComponent((_iconElement = iconElement) === null || _iconElement === void 0 ? void 0 : _iconElement.type) && iconScale) {
+  if (isIconComponent((_iconElement = iconElement) == null ? void 0 : _iconElement.type) && iconScale) {
     var _iconElement$props$co, _iconElement$props$co2, _iconElement$props$co3;
 
-    if ((_iconElement$props$co = iconElement.props.component) === null || _iconElement$props$co === void 0 ? void 0 : (_iconElement$props$co2 = _iconElement$props$co.type) === null || _iconElement$props$co2 === void 0 ? void 0 : (_iconElement$props$co3 = _iconElement$props$co2.name) === null || _iconElement$props$co3 === void 0 ? void 0 : _iconElement$props$co3.match(/S$/)) {
+    if ((_iconElement$props$co = iconElement.props.component) != null && (_iconElement$props$co2 = _iconElement$props$co.type) != null && (_iconElement$props$co3 = _iconElement$props$co2.name) != null && _iconElement$props$co3.match(/S$/)) {
       sizes.small = 24;
     }
 
@@ -63,16 +64,16 @@ var Avatar = function Avatar(_ref) {
 
   var _getTooltipProps = getTooltipProps(tooltip),
       type = _getTooltipProps.type,
-      tooltipProps = _objectWithoutProperties(_getTooltipProps, ["type"]);
+      tooltipProps = _objectWithoutPropertiesLoose(_getTooltipProps, _excluded2);
 
   var hasTooltip = Object.keys(tooltipProps).length && !!Object.values(tooltipProps).reduce(function (prev, next) {
     return next || prev;
   });
-  return React.createElement(Tooltip, _extends({
+  return /*#__PURE__*/React.createElement(Tooltip, _extends({
     type: type,
     mouseLeaveDelay: 0,
     mouseEnterDelay: 0
-  }, tooltipProps), React.createElement(AntdAvatar, _extends({
+  }, tooltipProps), /*#__PURE__*/React.createElement(AntdAvatar, _extends({
     className: "ds-avatar",
     hasStatus: hasStatus,
     hasTooltip: hasTooltip,

package/dist/Avatar.spec.js

@@ -11,7 +11,7 @@ var IMG_SRC = 'https://hsto.org/web/77c/061/c05/77c061c0550f4acd98380bf554eb8886
 describe('Avatar', function () {
   it('should render with text', function () {
     // ARRANGE
-    var _renderWithProvider = renderWithProvider(React.createElement(Avatar, {
+    var _renderWithProvider = renderWithProvider( /*#__PURE__*/React.createElement(Avatar, {
       backgroundColor: FERN,
       size: DEF_SIZE,
       shape: CIRCLE_SHAPE
@@ -23,9 +23,9 @@ describe('Avatar', function () {
   });
   it('should render with custom icon', function () {
     // ARRANGE
-    var _renderWithProvider2 = renderWithProvider(React.createElement(Avatar, {
+    var _renderWithProvider2 = renderWithProvider( /*#__PURE__*/React.createElement(Avatar, {
       backgroundColor: FERN,
-      iconComponent: React.createElement("div", null, React.createElement("svg", null, "i"))
+      iconComponent: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("svg", null, "i"))
     })),
         container = _renderWithProvider2.container;
 
@@ -35,7 +35,7 @@ describe('Avatar', function () {
   });
   it('should render with image', function () {
     // ARRANGE
-    var _renderWithProvider3 = renderWithProvider(React.createElement(Avatar, {
+    var _renderWithProvider3 = renderWithProvider( /*#__PURE__*/React.createElement(Avatar, {
       src: IMG_SRC
     })),
         container = _renderWithProvider3.container;
@@ -43,13 +43,13 @@ describe('Avatar', function () {
     var img = container.querySelector('img'); // ASSERT
 
     expect(container).toContainElement(img);
-    expect(img).toHaveAttribute('src', expect.stringContaining("".concat(IMG_SRC)));
+    expect(img).toHaveAttribute('src', expect.stringContaining("" + IMG_SRC));
   });
   it('should render with badge dot', function () {
     // ARRANGE
-    var _renderWithProvider4 = renderWithProvider(React.createElement(Badge, {
+    var _renderWithProvider4 = renderWithProvider( /*#__PURE__*/React.createElement(Badge, {
       status: "inactive"
-    }, React.createElement(Avatar, {
+    }, /*#__PURE__*/React.createElement(Avatar, {
       hasStatus: true,
       src: IMG_SRC,
       size: "small"
@@ -66,7 +66,7 @@ describe('Avatar', function () {
   });
   it('should render with proper styles', function () {
     // ARRANGE
-    var _renderWithProvider5 = renderWithProvider(React.createElement(Avatar, {
+    var _renderWithProvider5 = renderWithProvider( /*#__PURE__*/React.createElement(Avatar, {
       backgroundColor: RED,
       shape: SQUARE_SHAPE,
       size: "small"
@@ -80,7 +80,7 @@ describe('Avatar', function () {
   });
   it('should render with inline styles bg color', function () {
     // ARRANGE
-    var _renderWithProvider6 = renderWithProvider(React.createElement(Avatar, {
+    var _renderWithProvider6 = renderWithProvider( /*#__PURE__*/React.createElement(Avatar, {
       backgroundColor: RED,
       shape: SQUARE_SHAPE,
       style: {
@@ -95,7 +95,7 @@ describe('Avatar', function () {
   });
   it('should render with disabled styles', function () {
     // ARRANGE
-    var _renderWithProvider7 = renderWithProvider(React.createElement(Avatar, {
+    var _renderWithProvider7 = renderWithProvider( /*#__PURE__*/React.createElement(Avatar, {
       disabled: true
     })),
         container = _renderWithProvider7.container;
@@ -106,7 +106,7 @@ describe('Avatar', function () {
   });
   it('should contain `ds-avatar` className', function () {
     // ARRANGE
-    var _renderWithProvider8 = renderWithProvider(React.createElement(Avatar, null, "AA")),
+    var _renderWithProvider8 = renderWithProvider( /*#__PURE__*/React.createElement(Avatar, null, "AA")),
         container = _renderWithProvider8.container; // ASSERT
 
 

package/dist/Avatar.styles.js

@@ -1,6 +1,6 @@
-function _extends() { _extends = Object.assign || 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); }
+var _excluded = ["backgroundColorHue", "backgroundColor", "onClick", "hasStatus", "hasTooltip"];
 
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _extends() { _extends = Object.assign || 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 _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
@@ -14,7 +14,7 @@ export var TooltipGroup = styled.div.withConfig({
 })(["margin:13px 8px;font-size:11px;line-height:1.45;text-align:center;p{margin:0;font-weight:normal;&:first-child{font-weight:500;}}"]);
 
 var applyBgColors = function applyBgColors(props) {
-  return css(["background:", ";"], props.theme.palette["".concat(props.backgroundColor, "-").concat(props.backgroundColorHue ? props.backgroundColorHue : '400')]);
+  return css(["background:", ";"], props.theme.palette[props.backgroundColor + "-" + (props.backgroundColorHue ? props.backgroundColorHue : '400')]);
 };
 
 var applyDisabledStyles = function applyDisabledStyles(props) {
@@ -39,11 +39,11 @@ var FONT_SIZE = {
 };
 
 var applyBadgePosition = function applyBadgePosition(props) {
-  return css(["top:", ";right:", ";"], BADGE_POSITION["".concat(props.shape).concat(props.size)] || '0', BADGE_POSITION["".concat(props.shape).concat(props.size)] || '0');
+  return css(["top:", ";right:", ";"], BADGE_POSITION["" + props.shape + props.size] || '0', BADGE_POSITION["" + props.shape + props.size] || '0');
 };
 
 var applyFontSize = function applyFontSize(props) {
-  return css(["", ";"], macro[FONT_SIZE["".concat(props.size)]]);
+  return css(["", ";"], macro[FONT_SIZE["" + props.size]]);
 }; // eslint-disable-next-line react/jsx-props-no-spreading
 
 
@@ -53,9 +53,9 @@ export default styled(function (_ref) {
       onClick = _ref.onClick,
       hasStatus = _ref.hasStatus,
       hasTooltip = _ref.hasTooltip,
-      rest = _objectWithoutProperties(_ref, ["backgroundColorHue", "backgroundColor", "onClick", "hasStatus", "hasTooltip"]);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-  return React.createElement(Avatar, _extends({
+  return /*#__PURE__*/React.createElement(Avatar, _extends({
     onClick: onClick
   }, rest));
 }).withConfig({

package/dist/Avatar.types.js

@@ -0,0 +1 @@
+export {};

package/dist/ObjectAvatar/ObjectAvatar.js

@@ -1,25 +1,12 @@
-function _extends() { _extends = Object.assign || 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+var _excluded = ["backgroundColor", "badgeStatus", "iconComponent", "color", "object", "size", "src", "tooltip", "text", "children", "disabled", "style"];
 
-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 _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _extends() { _extends = Object.assign || 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 _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 import * as React from 'react';
-import { MailM } from '@synerise/ds-icon/dist/icons';
+import Icon, { MailM } from '@synerise/ds-icon';
 import theme from '@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme';
-import Icon from '@synerise/ds-icon';
 import Badge from '@synerise/ds-badge';
 import Status from '@synerise/ds-status';
 import Avatar from '../Avatar';
@@ -42,7 +29,7 @@ var ObjectAvatar = function ObjectAvatar(_ref) {
       children = _ref.children,
       disabled = _ref.disabled,
       style = _ref.style,
-      restProps = _objectWithoutProperties(_ref, ["backgroundColor", "badgeStatus", "iconComponent", "color", "object", "size", "src", "tooltip", "text", "children", "disabled", "style"]);
+      restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var _ref2 = object || {},
       objectName = _ref2.name,
@@ -53,7 +40,7 @@ var ObjectAvatar = function ObjectAvatar(_ref) {
   var defaultTooltip = {
     title: objectName || '',
     description: objectDescription || '',
-    status: objectStatus ? React.createElement(Status, {
+    status: objectStatus ? /*#__PURE__*/React.createElement(Status, {
       label: objectStatus,
       type: "disabled"
     }) : ''
@@ -61,18 +48,17 @@ var ObjectAvatar = function ObjectAvatar(_ref) {
   var avatarText = getObjectName(objectName, text);
 
   var _getColorByText = getColorByText(avatarText, backgroundColor),
-      _getColorByText2 = _slicedToArray(_getColorByText, 2),
-      avatarBackgroundColor = _getColorByText2[0],
-      avatarBackgroundHue = _getColorByText2[1];
+      avatarBackgroundColor = _getColorByText[0],
+      avatarBackgroundHue = _getColorByText[1];
 
-  var iconColor = theme.palette["".concat(color || DEFAULT_COLOR, "-").concat(DEFAULT_COLOR_HUE)];
+  var iconColor = theme.palette[(color || DEFAULT_COLOR) + "-" + DEFAULT_COLOR_HUE];
   var avatarTooltip = tooltip === undefined && (defaultTooltip.title || defaultTooltip.description) ? defaultTooltip : tooltip;
   var iconElement = addIconColor(iconComponent, iconColor);
-  var icon = !avatarText ? iconElement || React.createElement(Icon, {
-    component: React.createElement(MailM, null),
+  var icon = !avatarText ? iconElement || /*#__PURE__*/React.createElement(Icon, {
+    component: /*#__PURE__*/React.createElement(MailM, null),
     color: iconColor
   }) : null;
-  var avatarRender = React.createElement(Avatar, _extends({
+  var avatarRender = /*#__PURE__*/React.createElement(Avatar, _extends({
     iconComponent: icon,
     shape: "square",
     backgroundColor: avatarBackgroundColor,
@@ -84,9 +70,9 @@ var ObjectAvatar = function ObjectAvatar(_ref) {
     disabled: disabled,
     style: badgeStatus ? {} : style
   }, restProps), children || avatarText);
-  return badgeStatus ? React.createElement("span", {
+  return badgeStatus ? /*#__PURE__*/React.createElement("span", {
     style: style
-  }, React.createElement(Badge, {
+  }, /*#__PURE__*/React.createElement(Badge, {
     status: badgeStatus
   }, avatarRender)) : avatarRender;
 };

package/dist/ObjectAvatar/ObjectAvatar.spec.js

@@ -13,20 +13,26 @@ var testObjectImage = {
   avatar: 'https://image.com/image.jpg'
 };
 describe('ObjectAvatar', function () {
-  test('should match snapshot', function () {
-    var objectAvatar = renderWithProvider(React.createElement(ObjectAvatar, null));
-    expect(objectAvatar).toMatchSnapshot();
+  test('should render', function () {
+    var _renderWithProvider = renderWithProvider( /*#__PURE__*/React.createElement(ObjectAvatar, null)),
+        container = _renderWithProvider.container,
+        debug = _renderWithProvider.debug;
+
+    debug();
+    expect(container.getElementsByClassName('mail-m').length).toBe(1);
   });
-  test('should match snapshot with object data', function () {
-    var objectAvatar = renderWithProvider(React.createElement(ObjectAvatar, {
+  test('should render with object data', function () {
+    var objectAvatar = renderWithProvider( /*#__PURE__*/React.createElement(ObjectAvatar, {
       object: testObject
     }));
-    expect(objectAvatar).toMatchSnapshot();
+    var firstLetters = objectAvatar.getByText(testObject.name.charAt(0));
+    expect(firstLetters).toBeTruthy();
   });
-  test('should match snapshot with object data and avatar', function () {
-    var objectAvatar = renderWithProvider(React.createElement(ObjectAvatar, {
+  test('should render with object data and avatar', function () {
+    var objectAvatar = renderWithProvider( /*#__PURE__*/React.createElement(ObjectAvatar, {
       object: testObjectImage
     }));
-    expect(objectAvatar).toMatchSnapshot();
+    var img = objectAvatar.getByRole('img');
+    expect(img).toHaveAttribute('src', testObjectImage.avatar);
   });
 });

package/dist/UserAvatar/UserAvatar.js

@@ -1,25 +1,12 @@
-function _extends() { _extends = Object.assign || 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+var _excluded = ["backgroundColor", "size", "text", "tooltip", "badgeStatus", "user", "src", "iconComponent", "children", "disabled", "style"];
 
-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 _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _extends() { _extends = Object.assign || 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 _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 import * as React from 'react';
-import { UserM, UserS } from '@synerise/ds-icon/dist/icons';
+import Icon, { UserM, UserS } from '@synerise/ds-icon';
 import theme from '@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme';
-import Icon from '@synerise/ds-icon';
 import Badge from '@synerise/ds-badge';
 import Avatar from '../Avatar';
 import { getUserText, addIconColor, getColorByText } from '../utils';
@@ -39,7 +26,7 @@ var UserAvatar = function UserAvatar(_ref) {
       children = _ref.children,
       disabled = _ref.disabled,
       style = _ref.style,
-      restProps = _objectWithoutProperties(_ref, ["backgroundColor", "size", "text", "tooltip", "badgeStatus", "user", "src", "iconComponent", "children", "disabled", "style"]);
+      restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var _ref2 = user || {},
       _ref2$firstName = _ref2.firstName,
@@ -52,23 +39,22 @@ var UserAvatar = function UserAvatar(_ref) {
 
   var avatarText = getUserText(user, src, text);
   var defaultTooltip = {
-    title: "".concat(firstName || '', " ").concat(lastName || '').trim(),
+    title: ((firstName || '') + " " + (lastName || '')).trim(),
     description: email || ''
   };
   var avatarTooltip = (tooltip === undefined || tooltip === true) && (defaultTooltip.title || defaultTooltip.description) ? defaultTooltip : tooltip;
-  var iconColor = theme.palette["".concat(DEFAULT_COLOR, "-").concat(DEFAULT_COLOR_HUE)];
+  var iconColor = theme.palette[DEFAULT_COLOR + "-" + DEFAULT_COLOR_HUE];
   var iconElement = addIconColor(iconComponent, iconColor);
-  var icon = !avatarText ? iconElement || React.createElement(Icon, {
-    component: size === 'small' ? React.createElement(UserS, null) : React.createElement(UserM, null),
+  var icon = !avatarText ? iconElement || /*#__PURE__*/React.createElement(Icon, {
+    component: size === 'small' ? /*#__PURE__*/React.createElement(UserS, null) : /*#__PURE__*/React.createElement(UserM, null),
     color: theme.palette['grey-500']
   }) : null;
 
   var _getColorByText = getColorByText(avatarText, backgroundColor),
-      _getColorByText2 = _slicedToArray(_getColorByText, 2),
-      avatarBackgroundColor = _getColorByText2[0],
-      avatarBackgroundHue = _getColorByText2[1];
+      avatarBackgroundColor = _getColorByText[0],
+      avatarBackgroundHue = _getColorByText[1];
 
-  var avatarRender = React.createElement(Avatar, _extends({
+  var avatarRender = /*#__PURE__*/React.createElement(Avatar, _extends({
     iconComponent: icon,
     shape: "circle",
     hasStatus: disabled === true ? false : !!badgeStatus,
@@ -80,9 +66,9 @@ var UserAvatar = function UserAvatar(_ref) {
     disabled: disabled,
     style: badgeStatus ? {} : style
   }, restProps), children || avatarText);
-  return badgeStatus ? React.createElement("span", {
+  return badgeStatus ? /*#__PURE__*/React.createElement("span", {
     style: style
-  }, React.createElement(Badge, {
+  }, /*#__PURE__*/React.createElement(Badge, {
     status: badgeStatus
   }, avatarRender)) : avatarRender;
 };

package/dist/UserAvatar/UserAvatar.spec.js

@@ -13,20 +13,24 @@ var testUserImage = {
   avatar: 'http://image.com/image.jpg'
 };
 describe('UserAvatar', function () {
-  test('should match snapshot', function () {
-    var userAvatar = renderWithProvider(React.createElement(UserAvatar, null));
-    expect(userAvatar).toMatchSnapshot();
+  test('should render', function () {
+    var _renderWithProvider = renderWithProvider( /*#__PURE__*/React.createElement(UserAvatar, null)),
+        container = _renderWithProvider.container;
+
+    expect(container.getElementsByClassName('user-m').length).toBe(1);
   });
-  test('should match snapshot with user data', function () {
-    var userAvatar = renderWithProvider(React.createElement(UserAvatar, {
+  test('should render with user data', function () {
+    var userAvatar = renderWithProvider( /*#__PURE__*/React.createElement(UserAvatar, {
       user: testUser
     }));
-    expect(userAvatar).toMatchSnapshot();
+    var nameFirstLetters = userAvatar.getByText(testUser.firstName.charAt(0) + testUser.lastName.charAt(0));
+    expect(nameFirstLetters).toBeTruthy();
   });
-  test('should match snapshot with user data and avatar', function () {
-    var userAvatar = renderWithProvider(React.createElement(UserAvatar, {
+  test('should render with user data and avatar', function () {
+    var userAvatar = renderWithProvider( /*#__PURE__*/React.createElement(UserAvatar, {
       user: testUserImage
     }));
-    expect(userAvatar).toMatchSnapshot();
+    var img = userAvatar.getByRole('img');
+    expect(img).toHaveAttribute('src', testUserImage.avatar);
   });
 });

package/dist/utils.js

@@ -4,8 +4,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 import * as React from 'react';
 import Icon from '@synerise/ds-icon';
 import selectColorByLetter from '@synerise/ds-utils/dist/selectColorByLetter/selectColorByLetter';
@@ -14,9 +12,15 @@ function getFirstLetter(from) {
   return (from || '').substr(0, 1).toUpperCase();
 }
 
-export function getUserText(user) {
-  var src = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  var text = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+export function getUserText(user, src, text) {
+  if (src === void 0) {
+    src = '';
+  }
+
+  if (text === void 0) {
+    text = '';
+  }
+
   var _user$firstName = user.firstName,
       firstName = _user$firstName === void 0 ? '' : _user$firstName,
       _user$lastName = user.lastName,
@@ -27,16 +31,22 @@ export function getUserText(user) {
       avatar = _user$avatar === void 0 ? '' : _user$avatar;
   if (src || avatar) return null;
   if (text) return text;
-  if (firstName || lastName) return "".concat(getFirstLetter(firstName)).concat(getFirstLetter(lastName));
+  if (firstName || lastName) return "" + getFirstLetter(firstName) + getFirstLetter(lastName);
   if (email) return getFirstLetter(email);
   return null;
 }
 export function isIconComponent(component) {
   return component ? component.name === Icon.name : false;
 }
-export function getObjectName() {
-  var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  var text = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+export function getObjectName(name, text) {
+  if (name === void 0) {
+    name = '';
+  }
+
+  if (text === void 0) {
+    text = '';
+  }
+
   if (text) return text.toUpperCase();
   if (name) return name.substr(0, 1).toUpperCase();
   return null;
@@ -46,7 +56,7 @@ export function addIconColor(iconComponent, color) {
 
   var iconElement = iconComponent;
 
-  if (isIconComponent((_iconElement = iconElement) === null || _iconElement === void 0 ? void 0 : _iconElement.type) && !((_iconElement2 = iconElement) === null || _iconElement2 === void 0 ? void 0 : (_iconElement2$props = _iconElement2.props) === null || _iconElement2$props === void 0 ? void 0 : _iconElement2$props.color)) {
+  if (isIconComponent((_iconElement = iconElement) == null ? void 0 : _iconElement.type) && !((_iconElement2 = iconElement) != null && (_iconElement2$props = _iconElement2.props) != null && _iconElement2$props.color)) {
     iconElement = React.cloneElement(iconElement, {
       color: color
     });
@@ -57,13 +67,13 @@ export function addIconColor(iconComponent, color) {
 export function getColorByText(text, backgroundColor) {
   var _ref;
 
-  var autoColor = ((_ref = typeof text === 'string' ? selectColorByLetter(text.slice(0, 1), true) : {}) === null || _ref === void 0 ? void 0 : _ref.color) || 'grey';
+  var autoColor = ((_ref = typeof text === 'string' ? selectColorByLetter(text.slice(0, 1), true) : {}) == null ? void 0 : _ref.color) || 'grey';
   var color = text && backgroundColor && backgroundColor !== 'auto' ? backgroundColor : autoColor;
   var hue = text ? '500' : '100';
   return [color, hue];
 }
 export function getTooltipProps(tooltip) {
-  var tooltipProps = _typeof(tooltip) === 'object' ? _objectSpread({}, tooltip, {
+  var tooltipProps = typeof tooltip === 'object' ? _objectSpread({}, tooltip, {
     title: tooltip.title || tooltip.name,
     description: tooltip.description || tooltip.email
   }) : {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-avatar",
-  "version": "0.13.37",
+  "version": "0.14.3",
   "description": "Avatar UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -32,10 +32,10 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-badge": "^0.4.81",
-    "@synerise/ds-icon": "^0.45.2",
-    "@synerise/ds-status": "^0.4.1",
-    "@synerise/ds-tooltip": "^0.10.56"
+    "@synerise/ds-badge": "^0.5.3",
+    "@synerise/ds-icon": "^0.46.2",
+    "@synerise/ds-status": "^0.5.3",
+    "@synerise/ds-tooltip": "^0.11.2"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
@@ -45,5 +45,5 @@
   "devDependencies": {
     "@synerise/ds-utils": "^0.19.0"
   },
-  "gitHead": "bf865b6d1967c42effb68dc794f34dd18ddebe27"
+  "gitHead": "2468359677783819939fb9f1ef5acc36667ecd1a"
 }