@zohodesk/dot 1.3.0-temp-158 → 1.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.cli/PropLessFiles.html +1 -1
- package/.cli/propValidation_report.html +1 -1
- package/README.md +3 -1
- package/coverage/ExternalLink/ExternalLink.js.html +1 -1
- package/coverage/ExternalLink/ExternalLink.module.css.html +1 -1
- package/coverage/ExternalLink/index.html +1 -1
- package/coverage/ExternalLink/props/defaultProps.js.html +1 -1
- package/coverage/ExternalLink/props/index.html +1 -1
- package/coverage/ExternalLink/props/propTypes.js.html +1 -1
- package/coverage/IconButton/IconButton.js.html +1 -1
- package/coverage/IconButton/IconButton.module.css.html +1 -1
- package/coverage/IconButton/index.html +1 -1
- package/coverage/IconButton/props/defaultProps.js.html +1 -1
- package/coverage/IconButton/props/index.html +1 -1
- package/coverage/IconButton/props/propTypes.js.html +1 -1
- package/coverage/Image/Image.js.html +1 -1
- package/coverage/Image/Image.module.css.html +1 -1
- package/coverage/Image/index.html +1 -1
- package/coverage/Image/props/defaultProps.js.html +1 -1
- package/coverage/Image/props/index.html +1 -1
- package/coverage/Image/props/propTypes.js.html +1 -1
- package/coverage/avatar/AvatarWithTeam/AvatarWithTeam.js.html +1 -1
- package/coverage/avatar/AvatarWithTeam/AvatarWithTeam.module.css.html +1 -1
- package/coverage/avatar/AvatarWithTeam/index.html +1 -1
- package/coverage/avatar/AvatarWithTeam/props/defaultProps.js.html +1 -1
- package/coverage/avatar/AvatarWithTeam/props/index.html +1 -1
- package/coverage/avatar/AvatarWithTeam/props/propTypes.js.html +1 -1
- package/coverage/coverage-final.json +16 -16
- package/coverage/coverage-summary.json +16 -16
- package/coverage/index.html +1 -1
- package/es/v1/ActionButton/ActionButton.js +2 -2
- package/es/v1/Message/Message.js +16 -42
- package/es/v1/PlusIcon/PlusIcon.js +25 -37
- package/es/v1/alert/AlertHeader/AlertHeader.js +5 -4
- package/es/v1/alert/AlertHeader/props/defaultProps.js +12 -0
- package/es/v1/alert/AlertHeader/props/propTypes.js +20 -0
- package/es/v1/alert/AlertLookup/AlertLookup.js +6 -4
- package/es/v1/alert/AlertLookup/props/defaultProps.js +13 -0
- package/es/v1/alert/AlertLookup/props/propTypes.js +36 -0
- package/es/v1/avatar/AvatarClose/AvatarClose.js +32 -43
- package/es/v1/avatar/AvatarCollision/AvatarCollision.js +41 -52
- package/es/v1/avatar/AvatarIcon/AvatarIcon.js +38 -43
- package/es/v1/avatar/AvatarStatus/AvatarStatus.js +52 -63
- package/es/v1/avatar/AvatarThread/AvatarThread.js +62 -69
- package/es/v1/avatar/AvatarUser/AvatarUser.js +93 -100
- package/es/v1/avatar/AvatarWithTeam/AvatarWithTeam.js +81 -88
- package/es/v1/list/SecondaryText/AccountName.js +61 -69
- package/es/v1/list/SecondaryText/ContactName.js +66 -74
- package/es/v1/list/SecondaryText/DepartmentText.js +15 -27
- package/es/v1/list/SecondaryText/Email.js +32 -40
- package/es/v1/list/SecondaryText/HappinessRating.js +17 -25
- package/es/v1/list/SecondaryText/PhoneNumber.js +36 -44
- package/es/v1/list/SecondaryText/PriorityText.js +16 -28
- package/es/v1/list/SecondaryText/SecondaryText.js +21 -33
- package/es/v1/list/SecondaryText/StatusText.js +17 -29
- package/es/v1/list/SecondaryText/TicketId.js +33 -45
- package/es/v1/list/SecondaryText/Website.js +22 -30
- package/es/v1/list/SecondryPanel/SecondryPanel.js +66 -83
- package/es/v1/list/SentimentStatus/SentimentStatus.js +18 -29
- package/es/v1/list/status/StatusDropdown/StatusDropdown.js +2 -2
- package/lib/v1/ActionButton/ActionButton.js +2 -2
- package/lib/v1/Message/Message.js +23 -80
- package/lib/v1/PlusIcon/PlusIcon.js +25 -71
- package/lib/v1/alert/AlertHeader/AlertHeader.js +5 -4
- package/lib/v1/alert/AlertHeader/props/defaultProps.js +19 -0
- package/lib/v1/alert/AlertHeader/props/propTypes.js +31 -0
- package/lib/v1/alert/AlertLookup/AlertLookup.js +6 -4
- package/lib/v1/alert/AlertLookup/props/defaultProps.js +20 -0
- package/lib/v1/alert/AlertLookup/props/propTypes.js +47 -0
- package/lib/v1/avatar/AvatarClose/AvatarClose.js +32 -77
- package/lib/v1/avatar/AvatarCollision/AvatarCollision.js +41 -86
- package/lib/v1/avatar/AvatarIcon/AvatarIcon.js +37 -80
- package/lib/v1/avatar/AvatarStatus/AvatarStatus.js +52 -97
- package/lib/v1/avatar/AvatarThread/AvatarThread.js +61 -106
- package/lib/v1/avatar/AvatarUser/AvatarUser.js +95 -140
- package/lib/v1/avatar/AvatarWithTeam/AvatarWithTeam.js +85 -130
- package/lib/v1/list/SecondaryText/AccountName.js +63 -113
- package/lib/v1/list/SecondaryText/ContactName.js +67 -117
- package/lib/v1/list/SecondaryText/DepartmentText.js +16 -66
- package/lib/v1/list/SecondaryText/Email.js +32 -82
- package/lib/v1/list/SecondaryText/HappinessRating.js +21 -68
- package/lib/v1/list/SecondaryText/PhoneNumber.js +36 -86
- package/lib/v1/list/SecondaryText/PriorityText.js +16 -66
- package/lib/v1/list/SecondaryText/SecondaryText.js +19 -69
- package/lib/v1/list/SecondaryText/StatusText.js +17 -67
- package/lib/v1/list/SecondaryText/TicketId.js +33 -83
- package/lib/v1/list/SecondaryText/Website.js +29 -72
- package/lib/v1/list/SecondryPanel/SecondryPanel.js +69 -168
- package/lib/v1/list/SentimentStatus/SentimentStatus.js +19 -64
- package/lib/v1/list/status/StatusDropdown/StatusDropdown.js +2 -2
- package/package.json +2 -2
- package/result.json +1 -1
|
@@ -5,68 +5,57 @@ import { defaultProps } from '../../../avatar/AvatarStatus/props/defaultProps';
|
|
|
5
5
|
import { propTypes } from '../../../avatar/AvatarStatus/props/propTypes';
|
|
6
6
|
import Avatar from '@zohodesk/components/es/v1/Avatar/Avatar';
|
|
7
7
|
import style from '../../../avatar/AvatarStatus/AvatarStatus.module.css';
|
|
8
|
-
export default
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
needBorder: needBorder
|
|
60
|
-
}, AvatarProps)), /*#__PURE__*/React.createElement("span", {
|
|
61
|
-
"data-title": statusTitle,
|
|
62
|
-
className: `${style.state} ${style[state]} ${style[size]} ${style[shape]}`
|
|
63
|
-
}));
|
|
64
|
-
}
|
|
65
|
-
|
|
8
|
+
export default function AvatarStatus(props) {
|
|
9
|
+
let {
|
|
10
|
+
src,
|
|
11
|
+
name,
|
|
12
|
+
size,
|
|
13
|
+
onClick,
|
|
14
|
+
title,
|
|
15
|
+
state,
|
|
16
|
+
dataId,
|
|
17
|
+
initial,
|
|
18
|
+
shape,
|
|
19
|
+
needTitle,
|
|
20
|
+
className,
|
|
21
|
+
needBorder,
|
|
22
|
+
palette,
|
|
23
|
+
textPalette,
|
|
24
|
+
customTextClass,
|
|
25
|
+
statusTitle,
|
|
26
|
+
customProps,
|
|
27
|
+
dataSelectorId,
|
|
28
|
+
needDefaultBorder
|
|
29
|
+
} = props;
|
|
30
|
+
let {
|
|
31
|
+
AvatarStatusProps = {},
|
|
32
|
+
AvatarProps = {}
|
|
33
|
+
} = customProps;
|
|
34
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
35
|
+
className: `${style.container} ${className} `
|
|
36
|
+
}, AvatarStatusProps, {
|
|
37
|
+
tabIndex: "0",
|
|
38
|
+
"aria-label": `${title}, ${name}, ${statusTitle}`,
|
|
39
|
+
"data-selector-id": dataSelectorId
|
|
40
|
+
}), /*#__PURE__*/React.createElement(Avatar, _extends({
|
|
41
|
+
src: src,
|
|
42
|
+
name: name,
|
|
43
|
+
palette: palette,
|
|
44
|
+
textPalette: textPalette,
|
|
45
|
+
customClass: customTextClass,
|
|
46
|
+
title: title,
|
|
47
|
+
onClick: onClick,
|
|
48
|
+
size: size,
|
|
49
|
+
dataId: dataId,
|
|
50
|
+
initial: initial,
|
|
51
|
+
shape: shape,
|
|
52
|
+
needTitle: needTitle,
|
|
53
|
+
needDefaultBorder: needDefaultBorder,
|
|
54
|
+
needBorder: needBorder
|
|
55
|
+
}, AvatarProps)), /*#__PURE__*/React.createElement("span", {
|
|
56
|
+
"data-title": statusTitle,
|
|
57
|
+
className: `${style.state} ${style[state]} ${style[size]} ${style[shape]}`
|
|
58
|
+
}));
|
|
66
59
|
}
|
|
67
60
|
AvatarStatus.defaultProps = defaultProps;
|
|
68
|
-
AvatarStatus.propTypes = propTypes;
|
|
69
|
-
// AvatarStatus.docs = {
|
|
70
|
-
// componentGroup: 'Avatar Group'
|
|
71
|
-
// };
|
|
72
|
-
// }
|
|
61
|
+
AvatarStatus.propTypes = propTypes;
|
|
@@ -6,74 +6,67 @@ import { propTypes } from '../../../avatar/AvatarThread/props/propTypes';
|
|
|
6
6
|
import Avatar from '@zohodesk/components/es/v1/Avatar/Avatar';
|
|
7
7
|
import { Icon } from '@zohodesk/icons';
|
|
8
8
|
import style from '../../../avatar/AvatarThread/AvatarThread.module.css';
|
|
9
|
-
export default
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
})), getCustomThread && getCustomThread()));
|
|
71
|
-
}
|
|
72
|
-
|
|
9
|
+
export default function AvatarThread(props) {
|
|
10
|
+
let {
|
|
11
|
+
src,
|
|
12
|
+
name,
|
|
13
|
+
size,
|
|
14
|
+
iconColor,
|
|
15
|
+
iconName,
|
|
16
|
+
iconSize,
|
|
17
|
+
borderPalette,
|
|
18
|
+
onClick,
|
|
19
|
+
title,
|
|
20
|
+
iconTitle,
|
|
21
|
+
onIconClick,
|
|
22
|
+
showOnHover,
|
|
23
|
+
dataId,
|
|
24
|
+
initial,
|
|
25
|
+
needBorder,
|
|
26
|
+
needBackground,
|
|
27
|
+
palette,
|
|
28
|
+
textPalette,
|
|
29
|
+
customTextClass,
|
|
30
|
+
needTitle,
|
|
31
|
+
customProps,
|
|
32
|
+
iconClass,
|
|
33
|
+
getCustomThread,
|
|
34
|
+
dataSelectorId
|
|
35
|
+
} = props;
|
|
36
|
+
let {
|
|
37
|
+
AvatarThreadProps = {},
|
|
38
|
+
AvatarProps = {}
|
|
39
|
+
} = customProps;
|
|
40
|
+
let hoverEffect = showOnHover ? style.hover : '';
|
|
41
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
42
|
+
className: `${style.container} ${onClick ? style.pointer : ''} ${hoverEffect}`,
|
|
43
|
+
"data-selector-id": dataSelectorId
|
|
44
|
+
}, AvatarThreadProps), /*#__PURE__*/React.createElement(Avatar, _extends({
|
|
45
|
+
initial: initial,
|
|
46
|
+
src: src,
|
|
47
|
+
name: name,
|
|
48
|
+
title: title,
|
|
49
|
+
size: size,
|
|
50
|
+
onClick: onClick,
|
|
51
|
+
dataId: dataId,
|
|
52
|
+
palette: palette,
|
|
53
|
+
textPalette: textPalette,
|
|
54
|
+
customClass: customTextClass,
|
|
55
|
+
needTitle: needTitle
|
|
56
|
+
}, AvatarProps)), (iconName || getCustomThread) && /*#__PURE__*/React.createElement("span", {
|
|
57
|
+
className: `${style.thread} ${onIconClick ? style.pointer : style.defaultCursor} ${needBackground ? style.threadBg : ''} ${style[`thread_${size}_pos`]} ${needBorder ? style[`border_${borderPalette}`] : ''}`,
|
|
58
|
+
"data-title": iconTitle,
|
|
59
|
+
"data-id": iconTitle === 'Remove Follower' && 'removeFollower',
|
|
60
|
+
"data-test-id": iconTitle === 'Remove Follower' && 'removeFollower',
|
|
61
|
+
onClick: onIconClick
|
|
62
|
+
}, iconName && /*#__PURE__*/React.createElement("span", {
|
|
63
|
+
className: style.icon
|
|
64
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
65
|
+
name: iconName,
|
|
66
|
+
size: iconSize,
|
|
67
|
+
iconClass: `${iconClass}
|
|
68
|
+
${style[`text_${iconColor}`] ? style[`text_${iconColor}`] : iconColor}`
|
|
69
|
+
})), getCustomThread && getCustomThread()));
|
|
73
70
|
}
|
|
74
71
|
AvatarThread.defaultProps = defaultProps;
|
|
75
|
-
AvatarThread.propTypes = propTypes;
|
|
76
|
-
// AvatarThread.docs = {
|
|
77
|
-
// componentGroup: 'Avatar Group'
|
|
78
|
-
// };
|
|
79
|
-
// }
|
|
72
|
+
AvatarThread.propTypes = propTypes;
|
|
@@ -12,105 +12,98 @@ import { Icon } from '@zohodesk/icons';
|
|
|
12
12
|
import style from '../../../avatar/AvatarUser/AvatarUser.module.css';
|
|
13
13
|
/**** Methods ****/
|
|
14
14
|
|
|
15
|
-
export default
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
})) : null);
|
|
108
|
-
}
|
|
109
|
-
|
|
15
|
+
export default function AvatarUser(props) {
|
|
16
|
+
let {
|
|
17
|
+
src,
|
|
18
|
+
alternateSrc,
|
|
19
|
+
name,
|
|
20
|
+
size,
|
|
21
|
+
onClick,
|
|
22
|
+
onDelete,
|
|
23
|
+
title,
|
|
24
|
+
isPaid,
|
|
25
|
+
isPortal,
|
|
26
|
+
isLocked,
|
|
27
|
+
dataId,
|
|
28
|
+
dataSelectorId,
|
|
29
|
+
needTitle,
|
|
30
|
+
needDelete,
|
|
31
|
+
initial,
|
|
32
|
+
palette,
|
|
33
|
+
textPalette,
|
|
34
|
+
customTextClass,
|
|
35
|
+
iconName,
|
|
36
|
+
iconSize,
|
|
37
|
+
iconClass,
|
|
38
|
+
iconColor,
|
|
39
|
+
i18nKeys,
|
|
40
|
+
customProps
|
|
41
|
+
} = props;
|
|
42
|
+
let {
|
|
43
|
+
AvatarUserProps = {},
|
|
44
|
+
AvatarIconProps = {},
|
|
45
|
+
AvatarProps = {}
|
|
46
|
+
} = customProps;
|
|
47
|
+
let {
|
|
48
|
+
paidTitle = 'Paid User',
|
|
49
|
+
portalTitle = 'End User',
|
|
50
|
+
lockTitle = 'Locked'
|
|
51
|
+
} = i18nKeys;
|
|
52
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
53
|
+
className: `${style.container} ${style[size]}`,
|
|
54
|
+
"data-id": dataId || name || iconName,
|
|
55
|
+
"data-test-id": dataId || name || iconName,
|
|
56
|
+
"data-selector-id": dataSelectorId
|
|
57
|
+
}, AvatarUserProps), iconName ? /*#__PURE__*/React.createElement(AvatarIcon, _extends({
|
|
58
|
+
name: iconName,
|
|
59
|
+
iconSize: iconSize,
|
|
60
|
+
size: size,
|
|
61
|
+
iconClass: iconClass,
|
|
62
|
+
dataId: iconName,
|
|
63
|
+
iconColor: iconColor,
|
|
64
|
+
title: title
|
|
65
|
+
}, AvatarIconProps)) : /*#__PURE__*/React.createElement(Avatar, _extends({
|
|
66
|
+
src: src,
|
|
67
|
+
name: name,
|
|
68
|
+
initial: initial,
|
|
69
|
+
title: title,
|
|
70
|
+
onClick: onClick,
|
|
71
|
+
size: size,
|
|
72
|
+
needTitle: needTitle,
|
|
73
|
+
palette: palette,
|
|
74
|
+
textPalette: textPalette,
|
|
75
|
+
customClass: customTextClass,
|
|
76
|
+
alternateSrc: alternateSrc
|
|
77
|
+
}, AvatarProps)), isPaid ? /*#__PURE__*/React.createElement("span", {
|
|
78
|
+
"data-title": paidTitle,
|
|
79
|
+
className: style.paid,
|
|
80
|
+
"data-id": "paidUser",
|
|
81
|
+
"data-test-id": "paidUser"
|
|
82
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
83
|
+
name: "ZD-paiduser"
|
|
84
|
+
})) : null, isPortal ? /*#__PURE__*/React.createElement("span", {
|
|
85
|
+
"data-title": portalTitle,
|
|
86
|
+
className: style.portal,
|
|
87
|
+
"data-id": "portalUser",
|
|
88
|
+
"data-test-id": "portalUser"
|
|
89
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
90
|
+
name: "ZD-globe1"
|
|
91
|
+
})) : null, isLocked ? /*#__PURE__*/React.createElement("span", {
|
|
92
|
+
"data-title": lockTitle,
|
|
93
|
+
className: style.lock,
|
|
94
|
+
"data-id": "locked",
|
|
95
|
+
"data-test-id": "locked"
|
|
96
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
97
|
+
name: "ZD-lock01"
|
|
98
|
+
})) : null, needDelete ? /*#__PURE__*/React.createElement("span", {
|
|
99
|
+
className: style.delete,
|
|
100
|
+
"data-id": "dltContactPhoto",
|
|
101
|
+
"data-test-id": "dltContactPhoto",
|
|
102
|
+
onClick: onDelete
|
|
103
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
104
|
+
name: "ZD-delete2",
|
|
105
|
+
size: "15"
|
|
106
|
+
})) : null);
|
|
110
107
|
}
|
|
111
108
|
AvatarUser.propTypes = propTypes;
|
|
112
|
-
AvatarUser.defaultProps = defaultProps;
|
|
113
|
-
// AvatarUser.docs = {
|
|
114
|
-
// componentGroup: 'Avatar Group'
|
|
115
|
-
// };
|
|
116
|
-
// }
|
|
109
|
+
AvatarUser.defaultProps = defaultProps;
|
|
@@ -6,93 +6,86 @@ import { propTypes } from '../../../avatar/AvatarWithTeam/props/propTypes';
|
|
|
6
6
|
import Avatar from '@zohodesk/components/es/v1/Avatar/Avatar';
|
|
7
7
|
import AvatarTeam from '@zohodesk/components/es/v1/AvatarTeam/AvatarTeam';
|
|
8
8
|
import style from '../../../avatar/AvatarWithTeam/AvatarWithTeam.module.css';
|
|
9
|
-
export default
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
}, AvatarTeam2Props))) : null);
|
|
90
|
-
}
|
|
91
|
-
|
|
9
|
+
export default function AvatarWithTeam(props) {
|
|
10
|
+
let {
|
|
11
|
+
name,
|
|
12
|
+
size,
|
|
13
|
+
src,
|
|
14
|
+
teamName,
|
|
15
|
+
isTeam,
|
|
16
|
+
needTitle = false,
|
|
17
|
+
initial,
|
|
18
|
+
title,
|
|
19
|
+
palette,
|
|
20
|
+
textPalette,
|
|
21
|
+
customTextClass,
|
|
22
|
+
teamClassName,
|
|
23
|
+
borderOnActive,
|
|
24
|
+
customProps,
|
|
25
|
+
dataSelectorId,
|
|
26
|
+
teamBorderActive
|
|
27
|
+
} = props;
|
|
28
|
+
let {
|
|
29
|
+
AvatarWithTeamProps = {},
|
|
30
|
+
Avatar1Props = {},
|
|
31
|
+
AvatarTeam1Props = {},
|
|
32
|
+
Avatar2Props = {},
|
|
33
|
+
AvatarTeam2Props = {}
|
|
34
|
+
} = customProps;
|
|
35
|
+
return /*#__PURE__*/React.createElement("span", _extends({
|
|
36
|
+
className: `${style.container} `,
|
|
37
|
+
"data-id": "avatarWithTeamId",
|
|
38
|
+
"data-test-id": "avatarWithTeamId",
|
|
39
|
+
"data-selector-id": dataSelectorId
|
|
40
|
+
}, AvatarWithTeamProps), isTeam && teamName ? /*#__PURE__*/React.createElement(Avatar, _extends({
|
|
41
|
+
name: name,
|
|
42
|
+
src: src,
|
|
43
|
+
size: size,
|
|
44
|
+
initial: initial,
|
|
45
|
+
needTitle: needTitle,
|
|
46
|
+
palette: palette,
|
|
47
|
+
textPalette: textPalette,
|
|
48
|
+
customClass: customTextClass,
|
|
49
|
+
borderOnActive: borderOnActive
|
|
50
|
+
}, Avatar1Props)) : isTeam ? /*#__PURE__*/React.createElement(AvatarTeam, _extends({
|
|
51
|
+
name: name,
|
|
52
|
+
src: src,
|
|
53
|
+
size: size,
|
|
54
|
+
needTitle: needTitle,
|
|
55
|
+
title: needTitle ? title : undefined,
|
|
56
|
+
palette: palette,
|
|
57
|
+
textPalette: textPalette,
|
|
58
|
+
customClass: {
|
|
59
|
+
customAvatar: customTextClass
|
|
60
|
+
},
|
|
61
|
+
borderOnActive: borderOnActive
|
|
62
|
+
}, AvatarTeam1Props)) : /*#__PURE__*/React.createElement(Avatar, _extends({
|
|
63
|
+
name: name,
|
|
64
|
+
src: src,
|
|
65
|
+
size: size,
|
|
66
|
+
initial: initial,
|
|
67
|
+
needTitle: needTitle,
|
|
68
|
+
palette: palette,
|
|
69
|
+
textPalette: textPalette,
|
|
70
|
+
customClass: customTextClass,
|
|
71
|
+
borderOnActive: borderOnActive
|
|
72
|
+
}, Avatar2Props)), teamName ? /*#__PURE__*/React.createElement("span", {
|
|
73
|
+
className: `${style.teamAvatar} ${teamClassName} `,
|
|
74
|
+
"data-id": "teamNameTestId",
|
|
75
|
+
"data-test-id": "teamNameTestId",
|
|
76
|
+
"data-title": needTitle ? title : undefined
|
|
77
|
+
}, /*#__PURE__*/React.createElement(AvatarTeam, _extends({
|
|
78
|
+
name: teamName,
|
|
79
|
+
size: "small",
|
|
80
|
+
palette: palette,
|
|
81
|
+
textPalette: textPalette,
|
|
82
|
+
isFilled: true,
|
|
83
|
+
needTitle: needTitle,
|
|
84
|
+
customClass: {
|
|
85
|
+
customAvatar: customTextClass
|
|
86
|
+
},
|
|
87
|
+
borderOnActive: teamBorderActive
|
|
88
|
+
}, AvatarTeam2Props))) : null);
|
|
92
89
|
}
|
|
93
90
|
AvatarWithTeam.defaultProps = defaultProps;
|
|
94
|
-
AvatarWithTeam.propTypes = propTypes;
|
|
95
|
-
// AvatarWithTeam.docs = {
|
|
96
|
-
// componentGroup: 'Avatar Group'
|
|
97
|
-
// };
|
|
98
|
-
// }
|
|
91
|
+
AvatarWithTeam.propTypes = propTypes;
|