@jetbrains/ring-ui 5.0.98 → 5.0.100

package/components/user-card/card.d.ts

@@ -24,6 +24,7 @@ export interface UserCardProps extends HTMLAttributes<HTMLDivElement> {
     user: UserCardUser;
     wording: UserCardWording;
     info?: ReactElement | readonly ReactElement[] | string;
+    avatarInfo?: ReactElement | readonly ReactElement[] | string;
     'data-test'?: string | null | undefined;
 }
 export default class UserCard extends PureComponent<UserCardProps> {

package/components/user-card/card.js

@@ -50,32 +50,37 @@ export default class UserCard extends PureComponent {
         clipboard.copyText(user.email || '', wording.copiedToClipboard, wording.copingToClipboardError);
     };
     render() {
-        const { children, info, className, user, wording, ...restProps } = this.props;
+        const { children, info, className, user, wording, avatarInfo, ...restProps } = this.props;
         const classes = classNames(className, {});
         const userActiveStatusClasses = classNames(styles.userActiveStatus, user.online ? styles.online : '');
         return (<div className={classes} {...restProps}>
         <div className={styles.userInformationContainer}>
-          <Avatar size={AvatarSize.Size56} url={user.avatarUrl}/>
+          <div className={styles.userAvatar}>
+            <Avatar size={AvatarSize.Size56} url={user.avatarUrl}/>
+            {!!avatarInfo && avatarInfo}
+          </div>
           <div className={styles.userInformation}>
-            <div className={styles.userNameLine}>
-              {user.href && (<Link href={user.href} className={styles.userName}>
-                  {user.name}
-                </Link>)}
-              {!user.href && <span className={styles.userName}>{user.name}</span>}
-              {typeof user.online === 'boolean' &&
+            <div className={styles.userInformationGeneral}>
+              <div className={styles.userNameLine}>
+                {user.href && (<Link href={user.href} className={styles.userName}>
+                    {user.name}
+                  </Link>)}
+                {!user.href && <span className={styles.userName}>{user.name}</span>}
+                {typeof user.online === 'boolean' &&
                 (<span className={userActiveStatusClasses} title={user.online ? wording.online : wording.offline}/>)}
-              {!!info && <span className={styles.userNameInfo}>{info}</span>}
-              {user.banned &&
+                {!!info && <span className={styles.userNameInfo}>{info}</span>}
+                {user.banned &&
                 (<span className={classNames(badgeStyles.badge, badgeStyles.invalid)} title={user.banReason}>{wording.banned}</span>)}
+              </div>
+              <div className={styles.userLogin}>{user.login}</div>
+              {user.email && (<span className={styles.userEmailWrapper}>
+                  <Link pseudo onClick={this.copyEmail} className={styles.userEmail}>
+                    {user.email}
+                  </Link>
+                  {user.unverifiedEmail && (<span className={styles.unverifiedLabel}>{wording.unverified}</span>)}
+                  <Icon title={wording.copyToClipboard} className={styles.userCopyIcon} onClick={this.copyEmail} glyph={copyIcon} size={IconSize.Size14} suppressSizeWarning/>
+                </span>)}
             </div>
-            <div className={styles.userLogin}>{user.login}</div>
-            {user.email && (<span className={styles.userEmailWrapper}>
-                <Link pseudo onClick={this.copyEmail} className={styles.userEmail}>
-                  {user.email}
-                </Link>
-                {user.unverifiedEmail && (<span className={styles.unverifiedLabel}>{wording.unverified}</span>)}
-                <Icon title={wording.copyToClipboard} className={styles.userCopyIcon} onClick={this.copyEmail} glyph={copyIcon} size={IconSize.Size14} suppressSizeWarning/>
-              </span>)}
             {children}
           </div>
         </div>

package/components/user-card/tooltip.d.ts

@@ -6,7 +6,7 @@ export interface UserCardTooltipProps extends Omit<UserCardAttrs, 'user'> {
     user?: UserCardUser | null | undefined;
     children: ReactElement | readonly ReactElement[] | string;
     dropdownProps: Partial<DropdownAttrs>;
-    renderUserCard: (props: UserCardTooltipProps) => ReactNode;
+    renderUserCard: (props: UserCardAttrs) => ReactNode;
     renderNoUser: () => ReactNode;
 }
 export default class UserCardTooltip extends Component<UserCardTooltipProps> {
@@ -19,7 +19,7 @@ export default class UserCardTooltip extends Component<UserCardTooltipProps> {
         renderNoUser: PropTypes.Requireable<(...args: any[]) => any>;
     };
     static defaultProps: {
-        renderUserCard: (props: UserCardTooltipProps) => JSX.Element | null | undefined;
+        renderUserCard: (props: UserCardAttrs) => JSX.Element;
         renderNoUser: () => string;
         dropdownProps: {
             hoverShowTimeOut: number;

package/components/user-card/tooltip.js

@@ -17,8 +17,8 @@ export default class UserCardTooltip extends Component {
     };
     static defaultProps = {
         renderUserCard: (props) => {
-            const { className, children, renderUserCard, renderNoUser, dropdownProps, user, ...restProps } = props;
-            return user && (<UserCard user={user} {...restProps} className={classNames(styles.userCardSpaced, className)}/>);
+            const { user, ...restProps } = props;
+            return user && (<UserCard user={user} {...restProps}/>);
         },
         renderNoUser: () => '',
         dropdownProps: {
@@ -27,10 +27,16 @@ export default class UserCardTooltip extends Component {
         }
     };
     render() {
-        const { children, user, renderUserCard, renderNoUser, dropdownProps } = this.props;
+        const { children, renderUserCard, renderNoUser, dropdownProps, user, ...restProps } = this.props;
         return (<Dropdown anchor={children} hoverMode clickMode={false} {...dropdownProps}>
         <Popup attached={false}>
-          {user ? renderUserCard(this.props) : renderNoUser()}
+          {user
+                ? renderUserCard({
+                    ...restProps,
+                    user,
+                    className: classNames(styles.userCardSpaced, this.props.className)
+                })
+                : renderNoUser()}
         </Popup>
       </Dropdown>);
     }

package/components/user-card/user-card.css

@@ -8,7 +8,13 @@
 
 .userInformationContainer {
   display: flex;
-  align-items: start;
+  align-items: flex-start;
+}
+
+.userAvatar {
+  position: relative;
+
+  display: flex;
 }
 
 .userInformation {
@@ -22,6 +28,10 @@
   line-height: 18px;
 }
 
+.userInformationGeneral {
+  height: 56px;
+}
+
 .userNameLine {
   height: var(--ring-line-height-lowest);
 

package/dist/_helpers/card.js

@@ -10,7 +10,7 @@ import { m as modules_6c9187df } from './badge.js';
 import Icon from '../icon/icon.js';
 import { Size as Size$1 } from '../icon/icon__constants.js';
 
-var modules_a4196c17 = {"unit":"8px","light":"light_rui_6e59","userCardSpaced":"userCardSpaced_rui_6e59","userInformationContainer":"userInformationContainer_rui_6e59","userInformation":"userInformation_rui_6e59","userNameLine":"userNameLine_rui_6e59","userName":"userName_rui_6e59","userLogin":"userLogin_rui_6e59","userEmail":"userEmail_rui_6e59","userCopyIcon":"userCopyIcon_rui_6e59","userEmailWrapper":"userEmailWrapper_rui_6e59","unverifiedLabel":"unverifiedLabel_rui_6e59","userNameInfo":"userNameInfo_rui_6e59","userActiveStatus":"userActiveStatus_rui_6e59","online":"online_rui_6e59"};
+var modules_a4196c17 = {"unit":"8px","light":"light_rui_6e59","userCardSpaced":"userCardSpaced_rui_6e59","userInformationContainer":"userInformationContainer_rui_6e59","userAvatar":"userAvatar_rui_6e59","userInformation":"userInformation_rui_6e59","userInformationGeneral":"userInformationGeneral_rui_6e59","userNameLine":"userNameLine_rui_6e59","userName":"userName_rui_6e59","userLogin":"userLogin_rui_6e59","userEmail":"userEmail_rui_6e59","userCopyIcon":"userCopyIcon_rui_6e59","userEmailWrapper":"userEmailWrapper_rui_6e59","unverifiedLabel":"unverifiedLabel_rui_6e59","userNameInfo":"userNameInfo_rui_6e59","userActiveStatus":"userActiveStatus_rui_6e59","online":"online_rui_6e59"};
 
 class UserCard extends PureComponent {
   constructor() {
@@ -30,6 +30,7 @@ class UserCard extends PureComponent {
       className,
       user,
       wording,
+      avatarInfo,
       ...restProps
     } = this.props;
     const classes = classNames(className, {});
@@ -38,11 +39,15 @@ class UserCard extends PureComponent {
       className: classes
     }, restProps), /*#__PURE__*/React.createElement("div", {
       className: modules_a4196c17.userInformationContainer
+    }, /*#__PURE__*/React.createElement("div", {
+      className: modules_a4196c17.userAvatar
     }, /*#__PURE__*/React.createElement(Avatar, {
       size: Size.Size56,
       url: user.avatarUrl
-    }), /*#__PURE__*/React.createElement("div", {
+    }), !!avatarInfo && avatarInfo), /*#__PURE__*/React.createElement("div", {
       className: modules_a4196c17.userInformation
+    }, /*#__PURE__*/React.createElement("div", {
+      className: modules_a4196c17.userInformationGeneral
     }, /*#__PURE__*/React.createElement("div", {
       className: modules_a4196c17.userNameLine
     }, user.href && /*#__PURE__*/React.createElement(Link, {
@@ -75,7 +80,7 @@ class UserCard extends PureComponent {
       glyph: copyIcon,
       size: Size$1.Size14,
       suppressSizeWarning: true
-    })), children)));
+    }))), children)));
   }
 }
 _defineProperty(UserCard, "propTypes", {