@atlaskit/profilecard 24.20.3 → 24.20.5

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.
Files changed (34) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/__tests__/vr-tests/__snapshots__/agent-profilecard/agent-profile-card-example--default.png +0 -0
  3. package/__tests__/vr-tests/__snapshots__/user-profilecard/alternate-actions--default.png +0 -0
  4. package/__tests__/vr-tests/__snapshots__/user-profilecard/best-case-profile--default.png +0 -0
  5. package/__tests__/vr-tests/__snapshots__/user-profilecard/bot-case-profile--default.png +0 -0
  6. package/__tests__/vr-tests/__snapshots__/user-profilecard/error-state--default.png +0 -0
  7. package/__tests__/vr-tests/__snapshots__/user-profilecard/error-state-not-found--default.png +0 -0
  8. package/__tests__/vr-tests/__snapshots__/user-profilecard/worst-case-profile--default.png +0 -0
  9. package/afm-products/tsconfig.json +123 -0
  10. package/compass.yml +3 -0
  11. package/dist/cjs/components/common/ProfileCardTrigger.js +17 -21
  12. package/dist/cjs/components/team-profile-card/main.compiled.css +1 -15
  13. package/dist/cjs/components/team-profile-card/main.js +81 -185
  14. package/dist/cjs/components/team-profile-card/team-connections/main.compiled.css +1 -6
  15. package/dist/cjs/components/team-profile-card/team-connections/main.js +1 -65
  16. package/dist/es2019/components/common/ProfileCardTrigger.js +1 -4
  17. package/dist/es2019/components/team-profile-card/main.compiled.css +1 -15
  18. package/dist/es2019/components/team-profile-card/main.js +55 -157
  19. package/dist/es2019/components/team-profile-card/team-connections/main.compiled.css +1 -6
  20. package/dist/es2019/components/team-profile-card/team-connections/main.js +1 -69
  21. package/dist/esm/components/common/ProfileCardTrigger.js +17 -21
  22. package/dist/esm/components/team-profile-card/main.compiled.css +1 -15
  23. package/dist/esm/components/team-profile-card/main.js +69 -173
  24. package/dist/esm/components/team-profile-card/team-connections/main.compiled.css +1 -6
  25. package/dist/esm/components/team-profile-card/team-connections/main.js +1 -65
  26. package/dist/types/components/team-profile-card/team-connections/main.d.ts +0 -1
  27. package/dist/types-ts4.5/components/team-profile-card/team-connections/main.d.ts +0 -1
  28. package/package.json +16 -24
  29. package/afm-dev-agents/tsconfig.json +0 -123
  30. package/afm-passionfruit/tsconfig.json +0 -123
  31. package/afm-post-office/tsconfig.json +0 -123
  32. package/afm-rovo-extension/tsconfig.json +0 -123
  33. package/afm-townsquare/tsconfig.json +0 -123
  34. package/afm-volt/tsconfig.json +0 -117
@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.TeamConnections = exports.NewTeamConnections = void 0;
8
+ exports.TeamConnections = void 0;
9
9
  require("./main.compiled.css");
10
10
  var _runtime = require("@compiled/react/runtime");
11
11
  var _react = _interopRequireWildcard(require("react"));
@@ -18,8 +18,6 @@ var _teamsPublic = require("@atlaskit/teams-public");
18
18
  var _analytics = require("../../../util/analytics");
19
19
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
20
20
  var styles = {
21
- containerWrapperStyles: "_1e0c1txw _4cvr1h6o",
22
- containerIconStyles: "_2rko12b0 _4t3i1tcg _1bsb1tcg",
23
21
  containerTypeIconButtonStyles: "_18u01wug _4t3i7vkz _1bsb7vkz"
24
22
  };
25
23
  var TeamConnections = exports.TeamConnections = function TeamConnections(_ref) {
@@ -55,68 +53,6 @@ var TeamConnections = exports.TeamConnections = function TeamConnections(_ref) {
55
53
  });
56
54
  }
57
55
  }, [containerType, createAnalyticsEvent, fireEventNext]);
58
- return /*#__PURE__*/_react.default.createElement(_menu.LinkItem, {
59
- href: link,
60
- onClick: onClick,
61
- target: "_blank"
62
- }, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
63
- space: "space.100",
64
- xcss: styles.containerWrapperStyles
65
- }, /*#__PURE__*/_react.default.createElement(_teamsPublic.ContainerIcon, {
66
- containerType: containerType,
67
- title: title,
68
- containerIcon: containerIcon,
69
- size: "small"
70
- }), /*#__PURE__*/_react.default.createElement(_compiled.Stack, null, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
71
- maxLines: 1,
72
- color: "color.text"
73
- }, title), /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
74
- space: "space.050"
75
- }, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
76
- size: "small",
77
- color: "color.text.subtlest"
78
- }, description), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
79
- size: "small",
80
- color: "color.text.subtlest"
81
- }, containerTypeText))), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
82
- backgroundColor: 'color.background.neutral.subtle',
83
- xcss: styles.containerTypeIconButtonStyles,
84
- testId: "container-type-icon"
85
- }, icon)));
86
- };
87
- var NewTeamConnections = exports.NewTeamConnections = function NewTeamConnections(_ref2) {
88
- var containerType = _ref2.containerType,
89
- title = _ref2.title,
90
- containerIcon = _ref2.containerIcon,
91
- link = _ref2.link;
92
- var _getContainerProperti2 = (0, _teamsPublic.getContainerProperties)({
93
- containerType: containerType,
94
- iconSize: 'medium',
95
- isDisplayedOnProfileCard: true
96
- }),
97
- description = _getContainerProperti2.description,
98
- icon = _getContainerProperti2.icon,
99
- containerTypeText = _getContainerProperti2.containerTypeText;
100
- var _useAnalyticsEvents2 = (0, _analyticsNext.useAnalyticsEvents)(),
101
- createAnalyticsEvent = _useAnalyticsEvents2.createAnalyticsEvent;
102
- var _useAnalyticsEventsNe2 = (0, _teamsAppInternalAnalytics.useAnalyticsEvents)(),
103
- fireEventNext = _useAnalyticsEventsNe2.fireEvent;
104
- var onClick = (0, _react.useCallback)(function () {
105
- if ((0, _platformFeatureFlags.fg)('ptc-enable-profile-card-analytics-refactor')) {
106
- fireEventNext('ui.teamConnectionItem.clicked.teamProfileCard', {
107
- container: containerType
108
- });
109
- } else {
110
- (0, _analytics.fireEvent)(createAnalyticsEvent, {
111
- action: 'clicked',
112
- actionSubject: 'teamConnectionItem',
113
- actionSubjectId: 'teamProfileCard',
114
- attributes: {
115
- container: containerType
116
- }
117
- });
118
- }
119
- }, [containerType, createAnalyticsEvent, fireEventNext]);
120
56
  return /*#__PURE__*/_react.default.createElement(_menu.LinkItem, {
121
57
  href: link,
122
58
  onClick: onClick,
@@ -103,10 +103,7 @@ function ProfileCardTriggerInner({
103
103
  "data-testid": testId
104
104
  }));
105
105
  },
106
- content: () =>
107
- /*#__PURE__*/
108
- // eslint-disable-next-line @atlassian/a11y/no-static-element-interactions
109
- React.createElement("div", {
106
+ content: () => /*#__PURE__*/React.createElement("div", {
110
107
  onMouseEnter: onMouseEnter
111
108
  // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
112
109
  ,
@@ -1,45 +1,31 @@
1
1
  ._11c81vhk{font:var(--ds-font-heading-xxsmall,normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
- ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
3
2
  ._2rko1mok{border-radius:var(--ds-radius-large,8px)}
4
3
  ._v564nm7n{transition:box-shadow .25s ease-in-out}
5
- ._189ee4h9{border-width:var(--ds-border-width,1px)}
6
- ._1dqonqa1{border-style:solid}
7
- ._1h6dmuej{border-color:var(--ds-border,#091e4224)}
8
- ._15a5nqa1{border-top-style:solid}
9
4
  ._18m915vq{overflow-y:hidden}
10
5
  ._18m91wug{overflow-y:auto}
11
6
  ._18u01ejb{margin-left:var(--ds-space-300,24px)}
12
7
  ._18u01wug{margin-left:auto}
13
8
  ._18u0pxbi{margin-left:var(--ds-space-200,1pc)}
14
9
  ._18u0u2gc{margin-left:var(--ds-space-100,8px)}
15
- ._19bv1ejb{padding-left:var(--ds-space-300,24px)}
16
10
  ._19pk1b66{margin-top:var(--ds-space-050,4px)}
17
- ._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
18
11
  ._19pku2gc{margin-top:var(--ds-space-100,8px)}
19
12
  ._1bsb1gwv{width:360px}
20
13
  ._1bsb1osq{width:100%}
21
14
  ._1bsb7vkz{width:1pc}
22
15
  ._1e0c1txw{display:flex}
23
- ._1i53muej{border-top-color:var(--ds-border,#091e4224)}
24
16
  ._1reo15vq{overflow-x:hidden}
25
17
  ._1ul95x59{min-width:340px}
26
18
  ._2hwx1ejb{margin-right:var(--ds-space-300,24px)}
27
19
  ._2hwxpxbi{margin-right:var(--ds-space-200,1pc)}
28
20
  ._2hwxu2gc{margin-right:var(--ds-space-100,8px)}
29
21
  ._2lx21bp4{flex-direction:column}
30
- ._4cvr1h6o{align-items:center}
31
22
  ._4t3i12am{height:50px}
32
- ._4t3i1ul9{height:30px}
33
23
  ._4t3i1wug{height:auto}
34
- ._4t3i53f4{height:75pt}
35
24
  ._4t3i7vkz{height:1pc}
36
25
  ._5ral1dfr{object-fit:cover}
37
- ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
38
26
  ._c71lx2si{max-height:265px}
39
27
  ._kqswstnw{position:absolute}
40
28
  ._otyr12x7{margin-bottom:var(--ds-space-075,6px)}
41
29
  ._otyrpxbi{margin-bottom:var(--ds-space-200,1pc)}
42
30
  ._s7n4jp4b{vertical-align:top}
43
- ._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
44
- ._u5f31ejb{padding-right:var(--ds-space-300,24px)}
45
- ._uwhke4h9{border-top-width:var(--ds-border-width,1px)}
31
+ ._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
@@ -1,8 +1,9 @@
1
1
  /* main.tsx generated by @compiled/babel-plugin v0.38.1 */
2
2
  import _extends from "@babel/runtime/helpers/extends";
3
3
  import "./main.compiled.css";
4
+ import * as React from 'react';
4
5
  import { ax, ix } from "@compiled/react/runtime";
5
- import React, { useCallback, useMemo } from 'react';
6
+ import { useCallback, useMemo } from 'react';
6
7
  import { FormattedMessage } from 'react-intl-next';
7
8
  import { useAnalyticsEvents } from '@atlaskit/analytics-next';
8
9
  import AvatarGroup from '@atlaskit/avatar-group';
@@ -10,48 +11,27 @@ import Heading from '@atlaskit/heading';
10
11
  import LinkItem from '@atlaskit/menu/link-item';
11
12
  import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon';
12
13
  import { fg } from '@atlaskit/platform-feature-flags';
13
- import { Box, Flex, Inline, Pressable, Stack, Text } from '@atlaskit/primitives/compiled';
14
+ import { Box, Flex, Inline, Stack, Text } from '@atlaskit/primitives/compiled';
14
15
  import { useAnalyticsEvents as useAnalyticsEventsNext } from '@atlaskit/teams-app-internal-analytics';
15
16
  import TeamAvatar from '@atlaskit/teams-avatar';
16
17
  import { TeamContainers, useTeamContainers } from '@atlaskit/teams-public';
17
18
  import { fireEvent } from '../../util/analytics';
18
19
  import TeamAppTile from '../common/assets/TeamAppTile.svg';
19
20
  import { TeamActions } from './team-actions';
20
- import { NewTeamConnections, TeamConnections } from './team-connections/main';
21
+ import { TeamConnections } from './team-connections/main';
21
22
  import { TeamContainersSkeleton } from './team-containers-skeleton';
22
23
  const noop = () => {};
23
24
  const styles = {
24
25
  wrapperStyles: "_2rko1mok _v564nm7n _1reo15vq _18m915vq _1e0c1txw _2lx21bp4 _1bsb1gwv _1ul95x59 _4t3i1wug",
25
26
  containerStyles: "_otyrpxbi",
26
27
  avatarImageStyles: "_kqswstnw _18u01ejb",
27
- headerImageStyles: "_5ral1dfr _s7n4jp4b _4t3i53f4 _1bsb1osq",
28
- newHeaderImageStyles: "_5ral1dfr _s7n4jp4b _4t3i12am _1bsb1osq",
28
+ headerImageStyles: "_5ral1dfr _s7n4jp4b _4t3i12am _1bsb1osq",
29
29
  teamInformationStyles: "_18u01ejb _19pku2gc _2hwx1ejb",
30
- teamConnectionHeaderStyles: "_18u0u2gc _2hwxu2gc _c71lx2si _18m91wug",
31
- teamConnectionContainerStyles: "_18u0u2gc _2hwxu2gc",
32
30
  teamConnectionStyles: "_18u0u2gc _2hwxu2gc",
33
31
  teamConnectionItemsStyles: "_c71lx2si _18m91wug",
34
32
  connectionTitleStyles: "_11c81vhk _18u0pxbi _19pk1b66 _2hwxpxbi _otyr12x7 _syaz1gjq",
35
- teamAppTileStyles: "_18u01wug _4t3i7vkz _1bsb7vkz",
36
- viewProfileContainerStyles: "_4cvr1h6o _uwhke4h9 _15a5nqa1 _1i53muej _19bv1ejb _u5f31ejb",
37
- viewProfileButtonStyles: "_2rko12b0 _189ee4h9 _1dqonqa1 _1h6dmuej _bfhksm61 _syaz1gjq _1bsb1osq _4t3i1ul9 _19pkpxbi"
33
+ teamAppTileStyles: "_18u01wug _4t3i7vkz _1bsb7vkz"
38
34
  };
39
- const TeamCardWrapper = ({
40
- id,
41
- children
42
- }) => /*#__PURE__*/React.createElement(Box, {
43
- xcss: styles.wrapperStyles,
44
- testId: `team-card-${id}`
45
- }, children);
46
- const HeaderImage = ({
47
- srcUrl
48
- }) => /*#__PURE__*/React.createElement(Box, {
49
- as: "img",
50
- src: srcUrl,
51
- xcss: styles.headerImageStyles,
52
- testId: "profile-header-image",
53
- alt: "team-header-image"
54
- });
55
35
  export const TeamProfileCard = ({
56
36
  containerId,
57
37
  teamId,
@@ -79,9 +59,6 @@ export const TeamProfileCard = ({
79
59
  } = useAnalyticsEventsNext();
80
60
  // Ensure that the current container is not the only connection for this team before showing the "Where we work" section
81
61
  const hasOtherTeamConnections = useMemo(() => teamContainers.filter(tc => tc.id === containerId).length < teamContainers.length, [containerId, teamContainers]);
82
-
83
- // TODO: set isNewLayout to be true when clean up 'team-bi-directional-container-connection' experiment
84
- const isNewLayout = Boolean(props.isKudosEnabled || props.otherActions);
85
62
  const onClick = useCallback(() => {
86
63
  if (fg('ptc-enable-profile-card-analytics-refactor')) {
87
64
  fireEventNext('ui.button.clicked.viewTeamProfileButton', {});
@@ -95,117 +72,16 @@ export const TeamProfileCard = ({
95
72
  });
96
73
  }
97
74
  }
98
- if (!isNewLayout) {
99
- window.open(teamProfileUrl, '_blank');
100
- }
101
- }, [createAnalyticsEvent, teamProfileUrl, isNewLayout, fireEventNext]);
102
- if (isNewLayout) {
103
- return /*#__PURE__*/React.createElement(Box, {
104
- xcss: styles.wrapperStyles,
105
- testId: `team-card-${teamId}`
106
- }, /*#__PURE__*/React.createElement(Box, {
107
- as: "img",
108
- src: headerImageUrl,
109
- xcss: styles.newHeaderImageStyles,
110
- testId: "profile-header-image",
111
- alt: "team-header-image"
112
- }), /*#__PURE__*/React.createElement(Stack, {
113
- space: "space.200",
114
- xcss: styles.containerStyles
115
- }, /*#__PURE__*/React.createElement(Inline, {
116
- spread: "space-between",
117
- alignBlock: "center"
118
- }, /*#__PURE__*/React.createElement(Box, {
119
- xcss: styles.avatarImageStyles
120
- }, /*#__PURE__*/React.createElement(TeamAvatar, {
121
- size: "medium",
122
- src: avatarImageUrl
123
- }))), /*#__PURE__*/React.createElement(Stack, {
124
- xcss: styles.teamInformationStyles,
125
- space: "space.200"
126
- }, /*#__PURE__*/React.createElement(Flex, {
127
- justifyContent: "space-between"
128
- }, /*#__PURE__*/React.createElement(Stack, {
129
- space: "space.050"
130
- }, /*#__PURE__*/React.createElement(Inline, {
131
- alignBlock: "center"
132
- }, /*#__PURE__*/React.createElement(Heading, {
133
- size: "medium"
134
- }, displayName), isVerified && /*#__PURE__*/React.createElement(VerifiedTeamIcon, {
135
- showTooltip: true
136
- })), /*#__PURE__*/React.createElement(Text, {
137
- color: "color.text.subtlest"
138
- }, typeof memberCount === 'string' ? /*#__PURE__*/React.createElement(FormattedMessage, {
139
- defaultMessage: "Contributing team \u2022 {memberCount} members",
140
- values: {
141
- memberCount
142
- },
143
- id: "people-and-teams.team-profile-card.large-member-count"
144
- }) : /*#__PURE__*/React.createElement(FormattedMessage, {
145
- defaultMessage: "Contributing team \u2022 {count, plural, one {# member} other {# members}}",
146
- values: {
147
- count: memberCount
148
- },
149
- id: "people-and-teams.team-profile-card.member-count"
150
- }))), /*#__PURE__*/React.createElement(TeamActions, _extends({
151
- cloudId: cloudId,
152
- teamId: teamId
153
- }, props))), /*#__PURE__*/React.createElement(Inline, null, /*#__PURE__*/React.createElement(AvatarGroup, {
154
- appearance: "stack",
155
- data: memberAvatars
156
- })), description && /*#__PURE__*/React.createElement(Text, {
157
- color: "color.text",
158
- maxLines: 3
159
- }, description)), /*#__PURE__*/React.createElement(Box, {
160
- xcss: styles.teamConnectionStyles
161
- }, /*#__PURE__*/React.createElement(Box, {
162
- xcss: styles.connectionTitleStyles
163
- }, /*#__PURE__*/React.createElement(FormattedMessage, {
164
- defaultMessage: "Team links",
165
- id: "people-and-teams.team-profile-card.team-connections"
166
- })), /*#__PURE__*/React.createElement(Box, {
167
- xcss: styles.teamConnectionItemsStyles
168
- }, /*#__PURE__*/React.createElement(LinkItem, {
169
- href: teamProfileUrl,
170
- target: "_blank",
171
- onClick: onClick,
172
- description: /*#__PURE__*/React.createElement(FormattedMessage, {
173
- defaultMessage: "Team profile",
174
- id: "people-and-teams.team-profile-card.team-profile-description"
175
- }),
176
- iconBefore: /*#__PURE__*/React.createElement(TeamAvatar, {
177
- size: "small",
178
- src: avatarImageUrl
179
- }),
180
- iconAfter: /*#__PURE__*/React.createElement(Box, {
181
- as: "img",
182
- src: TeamAppTile,
183
- testId: "team-app-tile",
184
- alt: "team-app-tile",
185
- xcss: styles.teamAppTileStyles
186
- }),
187
- testId: "team-profile-card-profile-link-item"
188
- }, /*#__PURE__*/React.createElement(Text, {
189
- maxLines: 1,
190
- color: "color.text"
191
- }, displayName)), (loading || hasOtherTeamConnections) && /*#__PURE__*/React.createElement(TeamContainers, {
192
- teamId: teamId,
193
- onAddAContainerClick: noop,
194
- userId: userId,
195
- cloudId: cloudId,
196
- components: {
197
- ContainerCard: NewTeamConnections,
198
- TeamContainersSkeleton: TeamContainersSkeleton
199
- },
200
- filterContainerId: containerId,
201
- isDisplayedOnProfileCard: true,
202
- maxNumberOfContainersToShow: loading ? 0 : 9
203
- })))));
204
- }
205
- return /*#__PURE__*/React.createElement(TeamCardWrapper, {
206
- id: teamId
207
- }, /*#__PURE__*/React.createElement(HeaderImage, {
208
- srcUrl: headerImageUrl
75
+ }, [createAnalyticsEvent, fireEventNext]);
76
+ return /*#__PURE__*/React.createElement(Box, {
77
+ xcss: styles.wrapperStyles,
78
+ testId: `team-card-${teamId}`
79
+ }, /*#__PURE__*/React.createElement(Box, {
80
+ as: "img",
81
+ src: headerImageUrl,
82
+ xcss: styles.headerImageStyles,
83
+ testId: "profile-header-image",
84
+ alt: "team-header-image"
209
85
  }), /*#__PURE__*/React.createElement(Stack, {
210
86
  space: "space.200",
211
87
  xcss: styles.containerStyles
@@ -220,6 +96,8 @@ export const TeamProfileCard = ({
220
96
  }))), /*#__PURE__*/React.createElement(Stack, {
221
97
  xcss: styles.teamInformationStyles,
222
98
  space: "space.200"
99
+ }, /*#__PURE__*/React.createElement(Flex, {
100
+ justifyContent: "space-between"
223
101
  }, /*#__PURE__*/React.createElement(Stack, {
224
102
  space: "space.050"
225
103
  }, /*#__PURE__*/React.createElement(Inline, {
@@ -242,20 +120,48 @@ export const TeamProfileCard = ({
242
120
  count: memberCount
243
121
  },
244
122
  id: "people-and-teams.team-profile-card.member-count"
245
- }))), /*#__PURE__*/React.createElement(Inline, null, /*#__PURE__*/React.createElement(AvatarGroup, {
123
+ }))), /*#__PURE__*/React.createElement(TeamActions, _extends({
124
+ cloudId: cloudId,
125
+ teamId: teamId
126
+ }, props))), /*#__PURE__*/React.createElement(Inline, null, /*#__PURE__*/React.createElement(AvatarGroup, {
246
127
  appearance: "stack",
247
128
  data: memberAvatars
248
129
  })), description && /*#__PURE__*/React.createElement(Text, {
249
130
  color: "color.text",
250
131
  maxLines: 3
251
- }, description)), (loading || hasOtherTeamConnections) && /*#__PURE__*/React.createElement(Box, {
252
- xcss: hasOtherTeamConnections ? styles.teamConnectionHeaderStyles : styles.teamConnectionContainerStyles
253
- }, hasOtherTeamConnections && /*#__PURE__*/React.createElement(Box, {
132
+ }, description)), /*#__PURE__*/React.createElement(Box, {
133
+ xcss: styles.teamConnectionStyles
134
+ }, /*#__PURE__*/React.createElement(Box, {
254
135
  xcss: styles.connectionTitleStyles
255
136
  }, /*#__PURE__*/React.createElement(FormattedMessage, {
256
- defaultMessage: "Where we work",
257
- id: "people-and-teams.team-profile-card.team-connections-header"
258
- })), /*#__PURE__*/React.createElement(TeamContainers, {
137
+ defaultMessage: "Team links",
138
+ id: "people-and-teams.team-profile-card.team-connections"
139
+ })), /*#__PURE__*/React.createElement(Box, {
140
+ xcss: styles.teamConnectionItemsStyles
141
+ }, /*#__PURE__*/React.createElement(LinkItem, {
142
+ href: teamProfileUrl,
143
+ target: "_blank",
144
+ onClick: onClick,
145
+ description: /*#__PURE__*/React.createElement(FormattedMessage, {
146
+ defaultMessage: "Team profile",
147
+ id: "people-and-teams.team-profile-card.team-profile-description"
148
+ }),
149
+ iconBefore: /*#__PURE__*/React.createElement(TeamAvatar, {
150
+ size: "small",
151
+ src: avatarImageUrl
152
+ }),
153
+ iconAfter: /*#__PURE__*/React.createElement(Box, {
154
+ as: "img",
155
+ src: TeamAppTile,
156
+ testId: "team-app-tile",
157
+ alt: "team-app-tile",
158
+ xcss: styles.teamAppTileStyles
159
+ }),
160
+ testId: "team-profile-card-profile-link-item"
161
+ }, /*#__PURE__*/React.createElement(Text, {
162
+ maxLines: 1,
163
+ color: "color.text"
164
+ }, displayName)), (loading || hasOtherTeamConnections) && /*#__PURE__*/React.createElement(TeamContainers, {
259
165
  teamId: teamId,
260
166
  onAddAContainerClick: noop,
261
167
  userId: userId,
@@ -265,15 +171,7 @@ export const TeamProfileCard = ({
265
171
  TeamContainersSkeleton: TeamContainersSkeleton
266
172
  },
267
173
  filterContainerId: containerId,
268
- isDisplayedOnProfileCard: true
269
- })), teamProfileUrl && /*#__PURE__*/React.createElement(Stack, {
270
- xcss: styles.viewProfileContainerStyles
271
- }, /*#__PURE__*/React.createElement(Pressable, {
272
- onClick: onClick,
273
- xcss: styles.viewProfileButtonStyles,
274
- testId: "view-profile-button"
275
- }, /*#__PURE__*/React.createElement(FormattedMessage, {
276
- defaultMessage: "View profile",
277
- id: "people-and-teams.team-profile-card.view-profile"
174
+ isDisplayedOnProfileCard: true,
175
+ maxNumberOfContainersToShow: loading ? 0 : 9
278
176
  })))));
279
177
  };
@@ -1,8 +1,3 @@
1
-
2
- ._2rko12b0{border-radius:var(--ds-radius-small,4px)}._18u01wug{margin-left:auto}
3
- ._1bsb1tcg{width:24px}
1
+ ._18u01wug{margin-left:auto}
4
2
  ._1bsb7vkz{width:1pc}
5
- ._1e0c1txw{display:flex}
6
- ._4cvr1h6o{align-items:center}
7
- ._4t3i1tcg{height:24px}
8
3
  ._4t3i7vkz{height:1pc}
@@ -5,13 +5,11 @@ import React, { useCallback } from 'react';
5
5
  import { useAnalyticsEvents } from '@atlaskit/analytics-next';
6
6
  import { LinkItem } from '@atlaskit/menu';
7
7
  import { fg } from '@atlaskit/platform-feature-flags';
8
- import { Box, Inline, Stack, Text } from '@atlaskit/primitives/compiled';
8
+ import { Box, Inline, Text } from '@atlaskit/primitives/compiled';
9
9
  import { useAnalyticsEvents as useAnalyticsEventsNext } from '@atlaskit/teams-app-internal-analytics';
10
10
  import { ContainerIcon, getContainerProperties } from '@atlaskit/teams-public';
11
11
  import { fireEvent } from '../../../util/analytics';
12
12
  const styles = {
13
- containerWrapperStyles: "_1e0c1txw _4cvr1h6o",
14
- containerIconStyles: "_2rko12b0 _4t3i1tcg _1bsb1tcg",
15
13
  containerTypeIconButtonStyles: "_18u01wug _4t3i7vkz _1bsb7vkz"
16
14
  };
17
15
  export const TeamConnections = ({
@@ -19,72 +17,6 @@ export const TeamConnections = ({
19
17
  title,
20
18
  containerIcon,
21
19
  link
22
- }) => {
23
- const {
24
- description,
25
- icon,
26
- containerTypeText
27
- } = getContainerProperties({
28
- containerType,
29
- iconSize: 'medium',
30
- isDisplayedOnProfileCard: true
31
- });
32
- const {
33
- createAnalyticsEvent
34
- } = useAnalyticsEvents();
35
- const {
36
- fireEvent: fireEventNext
37
- } = useAnalyticsEventsNext();
38
- const onClick = useCallback(() => {
39
- if (fg('ptc-enable-profile-card-analytics-refactor')) {
40
- fireEventNext('ui.teamConnectionItem.clicked.teamProfileCard', {
41
- container: containerType
42
- });
43
- } else {
44
- fireEvent(createAnalyticsEvent, {
45
- action: 'clicked',
46
- actionSubject: 'teamConnectionItem',
47
- actionSubjectId: 'teamProfileCard',
48
- attributes: {
49
- container: containerType
50
- }
51
- });
52
- }
53
- }, [containerType, createAnalyticsEvent, fireEventNext]);
54
- return /*#__PURE__*/React.createElement(LinkItem, {
55
- href: link,
56
- onClick: onClick,
57
- target: "_blank"
58
- }, /*#__PURE__*/React.createElement(Inline, {
59
- space: "space.100",
60
- xcss: styles.containerWrapperStyles
61
- }, /*#__PURE__*/React.createElement(ContainerIcon, {
62
- containerType: containerType,
63
- title: title,
64
- containerIcon: containerIcon,
65
- size: "small"
66
- }), /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Text, {
67
- maxLines: 1,
68
- color: "color.text"
69
- }, title), /*#__PURE__*/React.createElement(Inline, {
70
- space: "space.050"
71
- }, /*#__PURE__*/React.createElement(Text, {
72
- size: "small",
73
- color: "color.text.subtlest"
74
- }, description), /*#__PURE__*/React.createElement(Text, {
75
- size: "small",
76
- color: "color.text.subtlest"
77
- }, containerTypeText))), /*#__PURE__*/React.createElement(Box, {
78
- backgroundColor: 'color.background.neutral.subtle',
79
- xcss: styles.containerTypeIconButtonStyles,
80
- testId: "container-type-icon"
81
- }, icon)));
82
- };
83
- export const NewTeamConnections = ({
84
- containerType,
85
- title,
86
- containerIcon,
87
- link
88
20
  }) => {
89
21
  const {
90
22
  description,
@@ -122,27 +122,23 @@ function ProfileCardTriggerInner(_ref, ref) {
122
122
  }));
123
123
  },
124
124
  content: function content() {
125
- return (
126
- /*#__PURE__*/
127
- // eslint-disable-next-line @atlassian/a11y/no-static-element-interactions
128
- React.createElement("div", {
129
- onMouseEnter: onMouseEnter
130
- // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
131
- ,
132
- onMouseLeave: hideProfilecard,
133
- onFocus: showProfilecard,
134
- "data-testid": "profile-card--trigger-content"
135
- }, isLoading ? /*#__PURE__*/React.createElement(ProfileCardWrapper, {
136
- testId: "profilecard.profilecardtrigger.loading"
137
- }, /*#__PURE__*/React.createElement(LoadingState, {
138
- fireAnalytics: fireAnalytics,
139
- fireAnalyticsNext: fireAnalyticsNext,
140
- profileType: profileCardType
141
- })) : renderProfileCard({
142
- profileData: profileData,
143
- error: error
144
- }))
145
- );
125
+ return /*#__PURE__*/React.createElement("div", {
126
+ onMouseEnter: onMouseEnter
127
+ // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
128
+ ,
129
+ onMouseLeave: hideProfilecard,
130
+ onFocus: showProfilecard,
131
+ "data-testid": "profile-card--trigger-content"
132
+ }, isLoading ? /*#__PURE__*/React.createElement(ProfileCardWrapper, {
133
+ testId: "profilecard.profilecardtrigger.loading"
134
+ }, /*#__PURE__*/React.createElement(LoadingState, {
135
+ fireAnalytics: fireAnalytics,
136
+ fireAnalyticsNext: fireAnalyticsNext,
137
+ profileType: profileCardType
138
+ })) : renderProfileCard({
139
+ profileData: profileData,
140
+ error: error
141
+ }));
146
142
  }
147
143
  }));
148
144
  }
@@ -1,45 +1,31 @@
1
1
  ._11c81vhk{font:var(--ds-font-heading-xxsmall,normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
- ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
3
2
  ._2rko1mok{border-radius:var(--ds-radius-large,8px)}
4
3
  ._v564nm7n{transition:box-shadow .25s ease-in-out}
5
- ._189ee4h9{border-width:var(--ds-border-width,1px)}
6
- ._1dqonqa1{border-style:solid}
7
- ._1h6dmuej{border-color:var(--ds-border,#091e4224)}
8
- ._15a5nqa1{border-top-style:solid}
9
4
  ._18m915vq{overflow-y:hidden}
10
5
  ._18m91wug{overflow-y:auto}
11
6
  ._18u01ejb{margin-left:var(--ds-space-300,24px)}
12
7
  ._18u01wug{margin-left:auto}
13
8
  ._18u0pxbi{margin-left:var(--ds-space-200,1pc)}
14
9
  ._18u0u2gc{margin-left:var(--ds-space-100,8px)}
15
- ._19bv1ejb{padding-left:var(--ds-space-300,24px)}
16
10
  ._19pk1b66{margin-top:var(--ds-space-050,4px)}
17
- ._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
18
11
  ._19pku2gc{margin-top:var(--ds-space-100,8px)}
19
12
  ._1bsb1gwv{width:360px}
20
13
  ._1bsb1osq{width:100%}
21
14
  ._1bsb7vkz{width:1pc}
22
15
  ._1e0c1txw{display:flex}
23
- ._1i53muej{border-top-color:var(--ds-border,#091e4224)}
24
16
  ._1reo15vq{overflow-x:hidden}
25
17
  ._1ul95x59{min-width:340px}
26
18
  ._2hwx1ejb{margin-right:var(--ds-space-300,24px)}
27
19
  ._2hwxpxbi{margin-right:var(--ds-space-200,1pc)}
28
20
  ._2hwxu2gc{margin-right:var(--ds-space-100,8px)}
29
21
  ._2lx21bp4{flex-direction:column}
30
- ._4cvr1h6o{align-items:center}
31
22
  ._4t3i12am{height:50px}
32
- ._4t3i1ul9{height:30px}
33
23
  ._4t3i1wug{height:auto}
34
- ._4t3i53f4{height:75pt}
35
24
  ._4t3i7vkz{height:1pc}
36
25
  ._5ral1dfr{object-fit:cover}
37
- ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
38
26
  ._c71lx2si{max-height:265px}
39
27
  ._kqswstnw{position:absolute}
40
28
  ._otyr12x7{margin-bottom:var(--ds-space-075,6px)}
41
29
  ._otyrpxbi{margin-bottom:var(--ds-space-200,1pc)}
42
30
  ._s7n4jp4b{vertical-align:top}
43
- ._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
44
- ._u5f31ejb{padding-right:var(--ds-space-300,24px)}
45
- ._uwhke4h9{border-top-width:var(--ds-border-width,1px)}
31
+ ._syaz1gjq{color:var(--ds-text-subtle,#44546f)}