From 105d43b0d511e516675e66877fb31c94bf583f91 Mon Sep 17 00:00:00 2001
From: Mikhail Golbakh <golbah@yandex.ru>
Date: Fri, 6 Dec 2024 17:37:31 +0100
Subject: [PATCH] feat(User): add html titles for elements (#1982)

---
 src/components/User/User.tsx     | 26 ++++++++++++++++----------
 src/components/User/constants.ts |  7 ++++++-
 src/components/User/index.ts     |  1 +
 3 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/components/User/User.tsx b/src/components/User/User.tsx
index 27494bc830..ac093ec999 100644
--- a/src/components/User/User.tsx
+++ b/src/components/User/User.tsx
@@ -3,18 +3,13 @@ import React from 'react';
 import {Avatar} from '../Avatar';
 import {block} from '../utils/cn';
 
-import {COMPACT_SIZES, DEFAULT_SIZE} from './constants';
+import {COMPACT_SIZES, DEFAULT_SIZE, UserQa} from './constants';
 import type {UserProps} from './types';
 
 import './User.scss';
 
 const b = block('user');
 
-export const UserQa = {
-    NAME: 'user-name',
-    DESCRIPTION: 'user-description',
-};
-
 export const User = React.forwardRef<HTMLDivElement, UserProps>(
     (
         {
@@ -30,7 +25,10 @@ export const User = React.forwardRef<HTMLDivElement, UserProps>(
         },
         ref,
     ) => {
-        const showDescription = Boolean(description && !COMPACT_SIZES.includes(size));
+        const showDescription = Boolean(description && !COMPACT_SIZES.has(size));
+
+        const nameTitle = typeof name === 'string' ? name : undefined;
+        const descriptionTitle = typeof description === 'string' ? description : undefined;
 
         return (
             <div
@@ -43,18 +41,26 @@ export const User = React.forwardRef<HTMLDivElement, UserProps>(
             >
                 {avatar ? (
                     <div className={b('avatar')}>
-                        {React.isValidElement(avatar) ? avatar : <Avatar {...avatar} size={size} />}
+                        {React.isValidElement(avatar) ? (
+                            avatar
+                        ) : (
+                            <Avatar {...avatar} size={size} title={avatar.title || nameTitle} />
+                        )}
                     </div>
                 ) : null}
                 {name || showDescription ? (
                     <div className={b('info')}>
                         {name ? (
-                            <span className={b('name')} data-qa={UserQa.NAME}>
+                            <span className={b('name')} title={nameTitle} data-qa={UserQa.NAME}>
                                 {name}
                             </span>
                         ) : null}
                         {showDescription ? (
-                            <span className={b('description')} data-qa={UserQa.DESCRIPTION}>
+                            <span
+                                className={b('description')}
+                                title={descriptionTitle}
+                                data-qa={UserQa.DESCRIPTION}
+                            >
                                 {description}
                             </span>
                         ) : null}
diff --git a/src/components/User/constants.ts b/src/components/User/constants.ts
index 91ec59451f..becc6aa2ca 100644
--- a/src/components/User/constants.ts
+++ b/src/components/User/constants.ts
@@ -1,4 +1,9 @@
 import type {UserSize} from './types';
 
-export const COMPACT_SIZES: UserSize[] = ['xs', '2xs'];
+export const COMPACT_SIZES: Set<UserSize> = new Set(['xs', '2xs']);
 export const DEFAULT_SIZE: UserSize = 'm';
+
+export const UserQa = {
+    NAME: 'user-name',
+    DESCRIPTION: 'user-description',
+};
diff --git a/src/components/User/index.ts b/src/components/User/index.ts
index b2563fe154..c4efa01a1b 100644
--- a/src/components/User/index.ts
+++ b/src/components/User/index.ts
@@ -1,2 +1,3 @@
 export type {UserSize, UserProps} from './types';
+export {UserQa} from './constants';
 export {User} from './User';