superdesk-ui-framework 3.1.13 → 3.1.15

package/react/components/avatar/avatar-placeholder.js

@@ -50,7 +50,7 @@ var AvatarPlaceholder = /** @class */ (function (_super) {
     }
     AvatarPlaceholder.prototype.render = function () {
         var _a = this.props, size = _a.size, tooltip = _a.tooltip, icon = _a.icon, kind = _a.kind, onClick = _a.onClick;
-        return (React.createElement(avatar_wrapper_1.AvatarWrapper, { size: size, isEmpty: false, icon: icon }, (function () {
+        return (React.createElement(avatar_wrapper_1.AvatarWrapper, { size: size, icon: icon }, (function () {
             if (kind === 'plus-button') {
                 return (React.createElement(avatar_action_add_1.AvatarContentAdd, { tooltipText: tooltip !== null && tooltip !== void 0 ? tooltip : undefined, onClick: onClick }));
             }

package/react/components/avatar/avatar-wrapper.d.ts

@@ -11,11 +11,14 @@ interface IPropsAvatarWrapper {
     };
     children: React.ReactNode;
     'data-test-id'?: string;
-    isEmpty?: boolean;
+    noAvatarPlaceholderColor?: 'subtle' | 'strong';
     icon?: {
         name: string;
         color?: string;
     };
+    statusDot?: {
+        color?: string;
+    };
 }
 /**
  * @deprecated use AvatarV2

package/react/components/avatar/avatar-wrapper.js

@@ -56,6 +56,7 @@ var AvatarWrapper = /** @class */ (function (_super) {
     AvatarWrapper.prototype.render = function () {
         var _a, _b, _c;
         var icon = this.props.icon;
+        var statusDot = this.props.statusDot;
         return (React.createElement("span", { className: (0, classnames_1.default)('sd-avatar', {
                 'sd-avatar--x-small': this.props.size === 'x-small',
                 'sd-avatar--small': this.props.size === 'small',
@@ -65,14 +66,15 @@ var AvatarWrapper = /** @class */ (function (_super) {
                 'sd-avatar--xx-large': this.props.size === 'xx-large',
                 'sd-avatar--indicator-status--online': ((_a = this.props.statusIndicator) === null || _a === void 0 ? void 0 : _a.status) === 'online',
                 'sd-avatar--indicator-status--offline': ((_b = this.props.statusIndicator) === null || _b === void 0 ? void 0 : _b.status) === 'offline',
-                'sd-avatar--empty-light': this.props.isEmpty,
+                'sd-avatar--empty-light': this.props.noAvatarPlaceholderColor === 'subtle',
             }), "data-test-id": this.props['data-test-id'], title: this.props.statusIndicator != null ? this.props.statusIndicator.tooltipText : "" },
             this.props.children,
             ((_c = this.props.administratorIndicator) === null || _c === void 0 ? void 0 : _c.enabled) === true
                 ? (React.createElement("i", { className: "icon-settings sd-avatar--indicator-admin", title: this.props.administratorIndicator.tooltipText }))
                 : null,
             icon != null && (React.createElement("span", { className: "sd-avatar__icon" },
-                React.createElement(Icon_1.Icon, { name: icon.name, color: icon.color })))));
+                React.createElement(Icon_1.Icon, { name: icon.name, color: icon.color }))),
+            statusDot != null && (React.createElement("span", { style: { backgroundColor: statusDot.color }, className: "sd-avatar__coverage-state" }))));
     };
     return AvatarWrapper;
 }(React.PureComponent));

package/react/components/avatar/avatar.d.ts

@@ -11,6 +11,10 @@ export interface IPropsAvatar {
         name: string;
         color?: string;
     };
+    statusDot?: {
+        color?: string;
+    };
+    noAvatarPlaceholderColor?: 'subtle' | 'strong';
     /**
      * displayName is shown as tooltip by default
      * use this if you need to add additional information (it will be added on a new line)

package/react/components/avatar/avatar.js

@@ -49,10 +49,10 @@ var Avatar = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     Avatar.prototype.render = function () {
-        var _a = this.props, imageUrl = _a.imageUrl, initials = _a.initials, size = _a.size, statusIndicator = _a.statusIndicator, administratorIndicator = _a.administratorIndicator, icon = _a.icon, displayName = _a.displayName, customContent = _a.customContent;
+        var _a = this.props, imageUrl = _a.imageUrl, initials = _a.initials, size = _a.size, statusIndicator = _a.statusIndicator, administratorIndicator = _a.administratorIndicator, icon = _a.icon, noAvatarPlaceholderColor = _a.noAvatarPlaceholderColor, displayName = _a.displayName, customContent = _a.customContent, statusDot = _a.statusDot;
         var tooltipCombined = [displayName, this.props.tooltip]
             .filter(function (str) { return (str !== null && str !== void 0 ? str : '').trim().length > 0; }).join('\n');
-        return (React.createElement(avatar_wrapper_1.AvatarWrapper, { size: size, statusIndicator: statusIndicator ? { status: statusIndicator, tooltipText: '' } : undefined, administratorIndicator: administratorIndicator ? { enabled: true, tooltipText: '' } : undefined, icon: icon, isEmpty: false }, (function () {
+        return (React.createElement(avatar_wrapper_1.AvatarWrapper, { size: size, statusIndicator: statusIndicator ? { status: statusIndicator, tooltipText: '' } : undefined, administratorIndicator: administratorIndicator ? { enabled: true, tooltipText: '' } : undefined, icon: icon, statusDot: statusDot, noAvatarPlaceholderColor: noAvatarPlaceholderColor }, (function () {
             if (customContent != null) {
                 return customContent;
             }