@synerise/ds-avatar 1.0.12 → 1.0.13

package/README.md

@@ -1,4 +1,3 @@
-
 ## General guidelines
 
 An avatar is an object used to represent a particular person in the application. The avatar is usually accompanied by the status (for example, **Active**, **Inactive**, **Blocked**) identifying the availability of any person in the application.
@@ -129,7 +128,7 @@ import Avatar from '@synerise/ds-avatar';
 ## API
 
 | Property           | Description                                                                                        | Type                                                                                                 | Default  |
-|--------------------|----------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------|----------|
+| ------------------ | -------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | -------- |
 | backgroundColor    | Background color of the avatar                                                                     | `green` / `grey` / `yellow` / `blue` / `pink`/ `mars`/ `orange`/ `fern`/ `cyan`/ `purple` / `violet` | `orange` |
 | backgroundColorHue | Background color hue of the avatar                                                                 | `900` / `800` / `700` / `600` / `500` / `400` / `300` / `200` / `100` / `050`                        | `400`    |
 | disabled           | Determines if avatar is disabled                                                                   | boolean                                                                                              | `false`  |
@@ -159,7 +158,7 @@ import { UserAvatar } from '@synerise/ds-avatar';
 ```
 
 | Property        | Description                                    | Type                                                                                                          | Default  |
-|-----------------|------------------------------------------------|---------------------------------------------------------------------------------------------------------------|----------|
+| --------------- | ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | -------- |
 | user            | User information                               | { firstName: string, lastName: string, email: string, avatar: string }                                        | -        |
 | backgroundColor | Background color of the avatar                 | `auto` / `green` / `grey` / `yellow` / `blue` / `pink`/ `mars`/ `orange`/ `fern`/ `cyan`/ `purple` / `violet` | `auto`   |
 | badgeStatus     | Badge status                                   | `active` / `error` / `warning`                                                                                | -        |
@@ -170,7 +169,7 @@ import { UserAvatar } from '@synerise/ds-avatar';
 
 ## ObjectAvatar
 
-A variant that renders full standard object avatar. 
+A variant that renders full standard object avatar.
 
 This component should be used for ex. in products, services, etc.
 
@@ -185,7 +184,7 @@ import { ObjectAvatar } from '@synerise/ds-avatar';
 ```
 
 |                 | Property                                       | Description                                                                                                   | Type     | Default |
-|-----------------|------------------------------------------------|---------------------------------------------------------------------------------------------------------------|----------|---------|
+| --------------- | ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | -------- | ------- |
 | object          | Object information                             | { name: string, description: string, status: string, avatar: string }                                         | -        |         |
 | color           | Background color of the avatar                 | `green` / `grey` / `yellow` / `blue` / `pink`/ `mars`/ `orange`/ `fern`/ `cyan`/ `purple` / `violet`          | `grey`   |         |
 | backgroundColor | Background color of the avatar                 | `auto` / `green` / `grey` / `yellow` / `blue` / `pink`/ `mars`/ `orange`/ `fern`/ `cyan`/ `purple` / `violet` | `auto`   |         |

package/dist/Avatar.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import '@synerise/ds-core/dist/js/style';
-import { AvatarProps } from './Avatar.types';
+import { type AvatarProps } from './Avatar.types';
 import './style/index.less';
 export declare const DEFAULT_SIZE = "medium";
 export declare const ICON_SIZES: {

package/dist/Avatar.js

@@ -3,11 +3,11 @@ var _excluded = ["backgroundColor", "backgroundColorHue", "children", "disabled"
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { cloneElement } from 'react';
-import Tooltip from '@synerise/ds-tooltip';
 import '@synerise/ds-core/dist/js/style';
-import { isIconComponent, getTooltipProps } from './utils';
+import Tooltip from '@synerise/ds-tooltip';
 import AntdAvatar from './Avatar.styles';
 import "./style/index.css";
+import { getTooltipProps, isIconComponent } from './utils';
 export var DEFAULT_SIZE = 'medium';
 export var ICON_SIZES = {
   small: 16,

package/dist/Avatar.styles.js

@@ -1,11 +1,11 @@
 var _excluded = ["backgroundColorHue", "backgroundColor", "onClick", "hasStatus", "hasTooltip"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import Avatar from 'antd/lib/avatar';
 import React from 'react';
 import styled, { css } from 'styled-components';
-import Avatar from 'antd/lib/avatar';
-import { macro } from '@synerise/ds-typography';
 import { IconBadgeIcon } from '@synerise/ds-badge/dist/IconBadge/IconBadge.styles';
+import { macro } from '@synerise/ds-typography';
 export var TooltipGroup = styled.div.withConfig({
   displayName: "Avatarstyles__TooltipGroup",
   componentId: "sc-xcn5o4-0"
@@ -36,11 +36,11 @@ var ICON_BADGE_POSITION = {
   squarelarge: '-11px',
   squareextraLarge: '-11px'
 };
-var FONT_SIZE = {
-  small: 'xsAvatar',
-  medium: 'small',
-  large: 'small',
-  extraLarge: 'xlAvatar'
+var MACRO_MAPPING = {
+  small: macro.xsAvatar,
+  medium: macro.small,
+  large: macro.small,
+  extraLarge: macro.xlAvatar
 };
 var applyIconBadgePosition = function applyIconBadgePosition(props) {
   var _props$shape = props.shape,
@@ -57,10 +57,8 @@ var applyBadgePosition = function applyBadgePosition(props) {
   return css(["top:", ";right:", ";"], BADGE_POSITION["" + shape + size] || '0', BADGE_POSITION["" + shape + size] || '0');
 };
 var applyFontSize = function applyFontSize(props) {
-  return css(["", ";"], macro[FONT_SIZE["" + props.size]]);
+  return css(["", ";"], MACRO_MAPPING["" + props.size]);
 };
-
-// eslint-disable-next-line react/jsx-props-no-spreading
 export default styled(function (_ref) {
   var backgroundColorHue = _ref.backgroundColorHue,
     backgroundColor = _ref.backgroundColor,

package/dist/Avatar.types.d.ts

@@ -1,7 +1,7 @@
-import type { ReactNode, MouseEvent as ReactMouseEvent } from 'react';
+import { type AvatarProps as AntAvatarProps } from 'antd/lib/avatar';
+import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 import type { BadgeStatus } from '@synerise/ds-badge';
-import { AvatarProps as AntAvatarProps } from 'antd/lib/avatar';
-import { TooltipProps } from '@synerise/ds-tooltip/dist/Tooltip.types';
+import { type TooltipProps } from '@synerise/ds-tooltip';
 export type Color = 'red' | 'green' | 'grey' | 'yellow' | 'blue' | 'pink' | 'mars' | 'orange' | 'fern' | 'cyan' | 'purple' | 'violet';
 export type ColorHue = '900' | '800' | '700' | '600' | '500' | '400' | '300' | '200' | '100' | '050';
 export type Size = 'small' | 'medium' | 'large' | 'extraLarge' | undefined;

package/dist/ObjectAvatar/ObjectAvatar.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ObjectAvatarProps } from '../Avatar.types';
+import { type ObjectAvatarProps } from '../Avatar.types';
 export declare const DEFAULT_COLOR_HUE = "600";
 export declare const DEFAULT_COLOR = "grey";
 declare const ObjectAvatar: ({ backgroundColor, badgeStatus, iconComponent, color, object, size, src, tooltip, text, children, disabled, style, ...restProps }: ObjectAvatarProps) => React.JSX.Element;

package/dist/ObjectAvatar/ObjectAvatar.js

@@ -2,12 +2,12 @@ var _excluded = ["backgroundColor", "badgeStatus", "iconComponent", "color", "ob
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React from 'react';
-import Icon, { MailM } from '@synerise/ds-icon';
-import { theme } from '@synerise/ds-core';
 import Badge from '@synerise/ds-badge';
+import { theme } from '@synerise/ds-core';
+import Icon, { MailM } from '@synerise/ds-icon';
 import Status from '@synerise/ds-status';
 import Avatar from '../Avatar';
-import { getObjectName, addIconColor, getColorByText } from '../utils';
+import { addIconColor, getColorByText, getObjectName } from '../utils';
 export var DEFAULT_COLOR_HUE = '600';
 export var DEFAULT_COLOR = 'grey';
 var ObjectAvatar = function ObjectAvatar(_ref) {

package/dist/UserAvatar/UserAvatar.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { UserAvatarProps } from '../Avatar.types';
+import { type UserAvatarProps } from '../Avatar.types';
 export declare const DEFAULT_COLOR = "grey";
 export declare const DEFAULT_COLOR_HUE = "500";
 declare const UserAvatar: React.FC<UserAvatarProps>;

package/dist/UserAvatar/UserAvatar.js

@@ -2,11 +2,11 @@ var _excluded = ["backgroundColor", "size", "text", "tooltip", "badgeStatus", "u
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React from 'react';
-import Icon, { UserM, UserS } from '@synerise/ds-icon';
-import { theme } from '@synerise/ds-core';
 import Badge from '@synerise/ds-badge';
+import { theme } from '@synerise/ds-core';
+import Icon, { UserM, UserS } from '@synerise/ds-icon';
 import Avatar from '../Avatar';
-import { getUserText, addIconColor, getColorByText } from '../utils';
+import { addIconColor, getColorByText, getUserText } from '../utils';
 export var DEFAULT_COLOR = 'grey';
 export var DEFAULT_COLOR_HUE = '500';
 var UserAvatar = function UserAvatar(_ref) {

package/dist/utils.d.ts

@@ -1,5 +1,5 @@
-import { ReactElement, ReactNode } from 'react';
-import { Color, ColorHue, UserAvatar, AvatarProps, TooltipObject } from './Avatar.types';
+import { type ReactElement, type ReactNode } from 'react';
+import { type AvatarProps, type Color, type ColorHue, type TooltipObject, type UserAvatar } from './Avatar.types';
 export declare function getUserText(user: UserAvatar, src?: string | null, text?: string | null): string | null;
 export declare function isIconComponent(component: ReactNode | undefined): boolean;
 export declare function getObjectName(name?: string | null, text?: string): string | null;

package/dist/utils.js

@@ -20,10 +20,18 @@ export function getUserText(user, src, text) {
     email = _user$email === void 0 ? '' : _user$email,
     _user$avatar = user.avatar,
     avatar = _user$avatar === void 0 ? '' : _user$avatar;
-  if (src || avatar) return null;
-  if (text) return text;
-  if (firstName || lastName) return "" + getFirstLetter(firstName) + getFirstLetter(lastName);
-  if (email) return getFirstLetter(email);
+  if (src || avatar) {
+    return null;
+  }
+  if (text) {
+    return text;
+  }
+  if (firstName || lastName) {
+    return "" + getFirstLetter(firstName) + getFirstLetter(lastName);
+  }
+  if (email) {
+    return getFirstLetter(email);
+  }
   return null;
 }
 export function isIconComponent(component) {
@@ -36,8 +44,12 @@ export function getObjectName(name, text) {
   if (text === void 0) {
     text = '';
   }
-  if (text) return text.toUpperCase();
-  if (name) return name.substr(0, 1).toUpperCase();
+  if (text) {
+    return text.toUpperCase();
+  }
+  if (name) {
+    return name.substr(0, 1).toUpperCase();
+  }
   return null;
 }
 export function addIconColor(iconComponent, color) {
@@ -52,7 +64,9 @@ export function addIconColor(iconComponent, color) {
 }
 export function getColorByText(text, backgroundColor) {
   var _ref;
-  if (backgroundColor && backgroundColor.indexOf('-') !== -1) return backgroundColor.split('-');
+  if (backgroundColor && backgroundColor.indexOf('-') !== -1) {
+    return backgroundColor.split('-');
+  }
   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';
@@ -65,12 +79,13 @@ export function getTooltipProps(tooltip) {
   }) : {};
   var tooltipType = ['title', 'description', 'status'].reduce(function (prev, next) {
     return tooltipProps[next] ? prev + 1 : prev;
-  }, 0) === 1 ? 'default' : 'avatar';
+  }, 0) === 1 ? 'default' : 'largeSimple';
   var finalTooltipProps = tooltipType === 'default' ? _extends({}, tooltipProps, {
     title: tooltipProps.title || tooltipProps.description || tooltipProps.status,
     type: 'default'
   }) : _extends({}, tooltipProps, {
-    type: 'avatar'
+    type: 'largeSimple'
   });
   return finalTooltipProps;
+  return tooltipProps;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-avatar",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "Avatar UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -34,12 +34,12 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-badge": "^1.0.12",
-    "@synerise/ds-icon": "^1.5.3",
-    "@synerise/ds-status": "^1.2.7",
-    "@synerise/ds-tooltip": "^1.1.11",
-    "@synerise/ds-typography": "^1.0.12",
-    "@synerise/ds-utils": "^1.3.0"
+    "@synerise/ds-badge": "^1.0.13",
+    "@synerise/ds-icon": "^1.5.4",
+    "@synerise/ds-status": "^1.2.8",
+    "@synerise/ds-tooltip": "^1.1.12",
+    "@synerise/ds-typography": "^1.0.13",
+    "@synerise/ds-utils": "^1.3.1"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
@@ -47,5 +47,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "11fe1d29b2ac23e70c3d5e6ce8ae20201a619a34"
+  "gitHead": "4512641033ba3581a3df208143c547fcfed45895"
 }