@atlaskit/profilecard 23.3.1 → 23.4.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/profilecard
 
+## 23.4.1
+
+### Patch Changes
+
+- [#128871](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/128871)
+  [`a4f35151d2de5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a4f35151d2de5) -
+  Fix a11y issue on team profile card toggletip
+
+## 23.4.0
+
+### Minor Changes
+
+- [#123622](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/123622)
+  [`8cb3a7a1f96a9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8cb3a7a1f96a9) -
+  [ux] Migrated old buttons to use @atlaskit/button/new; Migrated some icons
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 23.3.1
 
 ### Patch Changes

package/dist/cjs/client/getOrgIdForCloudIdFromAGG.js

@@ -11,7 +11,7 @@ var _graphqlUtils = require("./graphqlUtils");
 var ORG_ID_FROM_CLOUD_ID_QUERY = "query OrgIdFromCloudId($cloudId: ID!) {\n\ttenantContexts(cloudIds: [$cloudId]) {\n\t\torgId\n\t}\n}";
 var addHeaders = function addHeaders(headers) {
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "23.3.1");
+  headers.append('atl-client-version', "23.4.1");
   return headers;
 };
 function getOrgIdForCloudIdFromAGG(_x, _x2) {

package/dist/cjs/client/getTeamFromAGG.js

@@ -66,7 +66,7 @@ var addHeaders = exports.addHeaders = function addHeaders(headers) {
   headers.append('X-ExperimentalApi', 'teams-beta');
   headers.append('X-ExperimentalApi', 'team-members-beta');
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "23.3.1");
+  headers.append('atl-client-version', "23.4.1");
   return headers;
 };
 function getTeamFromAGG(_x, _x2, _x3) {

package/dist/cjs/components/Error/ErrorMessage.js

@@ -7,9 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
-var _icon = require("@atlaskit/icon");
-var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/core/migration/cross-circle"));
+var _button = _interopRequireDefault(require("@atlaskit/button"));
+var _new = _interopRequireDefault(require("@atlaskit/button/new"));
+var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/core/cross-circle"));
 var _crossCircle2 = _interopRequireDefault(require("@atlaskit/icon/glyph/cross-circle"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
@@ -41,20 +41,15 @@ var ErrorMessage = function ErrorMessage(props) {
   };
   return /*#__PURE__*/_react.default.createElement(_Error.ErrorWrapper, {
     testId: "profilecard-error"
-  }, (0, _platformFeatureFlags.fg)('ptc-migrate-legacy-icons-profilecard') ? /*#__PURE__*/_react.default.createElement(_icon.IconTile, {
-    icon: _crossCircle.default,
+  }, /*#__PURE__*/_react.default.createElement(_crossCircle.default, {
     label: "icon error",
-    size: "48",
-    appearance: 'gray'
-  }) :
-  /*#__PURE__*/
-  // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
-  _react.default.createElement(_crossCircle2.default, {
-    label: "icon error",
-    size: "xlarge"
-  }), errorContent(), reload && /*#__PURE__*/_react.default.createElement(_standardButton.default, {
+    LEGACY_fallbackIcon: _crossCircle2.default,
+    LEGACY_size: "xlarge"
+  }), errorContent(), reload && ((0, _platformFeatureFlags.fg)('ptc_migrate_buttons') ? /*#__PURE__*/_react.default.createElement(_new.default, {
+    onClick: reload
+  }, "Try again") : /*#__PURE__*/_react.default.createElement(_button.default, {
     appearance: "link",
     onClick: reload
-  }, "Try again"));
+  }, "Try again")));
 };
 var _default = exports.default = ErrorMessage;

package/dist/cjs/components/Team/TeamProfileCard.js

@@ -12,8 +12,10 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
+var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
 var _avatarGroup = _interopRequireDefault(require("@atlaskit/avatar-group"));
 var _loadingButton = _interopRequireDefault(require("@atlaskit/button/loading-button"));
+var _new = _interopRequireWildcard(require("@atlaskit/button/new"));
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
 var _showMoreHorizontalMore = _interopRequireDefault(require("@atlaskit/icon/core/migration/show-more-horizontal--more"));
@@ -60,7 +62,8 @@ var TeamMembers = function TeamMembers(_ref) {
     generateUserLink = _ref.generateUserLink,
     members = _ref.members,
     onUserClick = _ref.onUserClick,
-    includingYou = _ref.includingYou;
+    includingYou = _ref.includingYou,
+    isTriggeredByKeyboard = _ref.isTriggeredByKeyboard;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var count = members ? members.length : 0;
@@ -69,6 +72,14 @@ var TeamMembers = function TeamMembers(_ref) {
   // Use a ref to track whether this is currently open, so we can fire events
   // iff the more section is being opened (not closed).
   var isMoreMembersOpen = (0, _react.useRef)(false);
+  var avatarRef = (0, _react.useRef)(null);
+  var ref = function ref(element) {
+    if (isTriggeredByKeyboard) {
+      var _avatarRef$current;
+      avatarRef.current = element;
+      (_avatarRef$current = avatarRef.current) === null || _avatarRef$current === void 0 || _avatarRef$current.focus();
+    }
+  };
   var onMoreClick = (0, _react.useCallback)(function () {
     var isOpen = isMoreMembersOpen.current;
     if (!isOpen) {
@@ -92,7 +103,34 @@ var TeamMembers = function TeamMembers(_ref) {
     values: {
       count: count
     }
-  }))), members && members.length > 0 && /*#__PURE__*/_react.default.createElement(_TeamCard.AvatarSection, null, /*#__PURE__*/_react.default.createElement(_avatarGroup.default, {
+  }))), members && members.length > 0 && /*#__PURE__*/_react.default.createElement(_TeamCard.AvatarSection, null, (0, _platformFeatureFlags.fg)('enable_team_profilecard_toggletip_a11y_fix') ? /*#__PURE__*/_react.default.createElement(_avatarGroup.default, {
+    appearance: "stack",
+    data: members.map(function (member, index) {
+      var href = generateUserLink === null || generateUserLink === void 0 ? void 0 : generateUserLink(member.id);
+      var onClick = onMemberClick(onUserClick, member.id, analytics, index, !!generateUserLink);
+      return {
+        key: member.id,
+        name: member.fullName,
+        src: member.avatarUrl,
+        href: href,
+        onClick: onClick
+      };
+    }),
+    maxCount: avatarGroupMaxCount,
+    showMoreButtonProps: showMoreButtonProps,
+    testId: "profilecard-avatar-group",
+    overrides: {
+      Avatar: {
+        render: function render(Component, props, index) {
+          return index === 0 ? /*#__PURE__*/_react.default.createElement(_avatar.default, (0, _extends2.default)({
+            ref: ref
+          }, props, {
+            testId: "first-member"
+          })) : /*#__PURE__*/_react.default.createElement(Component, props);
+        }
+      }
+    }
+  }) : /*#__PURE__*/_react.default.createElement(_avatarGroup.default, {
     appearance: "stack",
     data: members.map(function (member, index) {
       var href = generateUserLink === null || generateUserLink === void 0 ? void 0 : generateUserLink(member.id);
@@ -137,7 +175,12 @@ var ActionButton = function ActionButton(_ref2) {
   var isGiveKudosActionButton = action.id === GIVE_KUDOS_ACTION_ID;
   var actionButton = /*#__PURE__*/_react.default.createElement(_focusRing.default, {
     isInset: true
-  }, /*#__PURE__*/_react.default.createElement(_standardButton.default, {
+  }, (0, _platformFeatureFlags.fg)('ptc_migrate_buttons') ? /*#__PURE__*/_react.default.createElement(_new.LinkButton, {
+    key: action.id || index,
+    onClick: onActionClick(action, analytics, index),
+    href: action.link || '',
+    shouldFitContainer: true
+  }, action.label, isGiveKudosActionButton && /*#__PURE__*/_react.default.createElement(_Card.AnimationWrapper, null, /*#__PURE__*/_react.default.createElement(_Card.KudosBlobAnimation, null))) : /*#__PURE__*/_react.default.createElement(_standardButton.default, {
     key: action.id || index,
     onClick: onActionClick(action, analytics, index),
     href: action.link,
@@ -187,7 +230,16 @@ var ExtraActions = function ExtraActions(_ref3) {
       }));
     },
     trigger: function trigger(triggerProps) {
-      return /*#__PURE__*/_react.default.createElement(_standardButton.default, (0, _extends2.default)({
+      return (0, _platformFeatureFlags.fg)('ptc_migrate_buttons') ? /*#__PURE__*/_react.default.createElement(_new.IconButton, (0, _extends2.default)({
+        testId: "more-actions-button"
+      }, triggerProps, {
+        isSelected: isOpen,
+        onClick: function onClick() {
+          return onMoreClick(!isOpen);
+        },
+        icon: _showMoreHorizontalMore.default,
+        label: "actions"
+      })) : /*#__PURE__*/_react.default.createElement(_standardButton.default, (0, _extends2.default)({
         testId: "more-actions-button"
       }, triggerProps, {
         isSelected: isOpen,
@@ -233,7 +285,8 @@ var TeamProfilecardContent = function TeamProfilecardContent(_ref5) {
     generateUserLink = _ref5.generateUserLink,
     onUserClick = _ref5.onUserClick,
     viewProfileLink = _ref5.viewProfileLink,
-    viewProfileOnClick = _ref5.viewProfileOnClick;
+    viewProfileOnClick = _ref5.viewProfileOnClick,
+    isTriggeredByKeyboard = _ref5.isTriggeredByKeyboard;
   var allActions = [{
     label: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.teamViewProfile),
     link: viewProfileLink,
@@ -269,7 +322,8 @@ var TeamProfilecardContent = function TeamProfilecardContent(_ref5) {
     members: team.members,
     generateUserLink: generateUserLink,
     includingYou: includingYou,
-    onUserClick: onUserClick
+    onUserClick: onUserClick,
+    isTriggeredByKeyboard: isTriggeredByKeyboard
   }), team.description.trim() && /*#__PURE__*/_react.default.createElement(_TeamCard.DescriptionWrapper, null, /*#__PURE__*/_react.default.createElement(_TeamCard.Description, null, team.description)), /*#__PURE__*/_react.default.createElement(ButtonSection, {
     actions: allActions,
     analytics: analytics
@@ -303,7 +357,12 @@ var ErrorMessage = function ErrorMessage(_ref6) {
   }, /*#__PURE__*/_react.default.createElement(_Error2.ErrorIllustration, null), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
     as: "p",
     weight: "semibold"
-  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.teamErrorTitle)), /*#__PURE__*/_react.default.createElement(_Error.TeamErrorText, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.teamErrorText)), clientFetchProfile && /*#__PURE__*/_react.default.createElement(_TeamCard.ActionButtons, null, /*#__PURE__*/_react.default.createElement(_TeamCard.WrappedButton, null, /*#__PURE__*/_react.default.createElement(_loadingButton.default, {
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.teamErrorTitle)), /*#__PURE__*/_react.default.createElement(_Error.TeamErrorText, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.teamErrorText)), clientFetchProfile && /*#__PURE__*/_react.default.createElement(_TeamCard.ActionButtons, null, /*#__PURE__*/_react.default.createElement(_TeamCard.WrappedButton, null, (0, _platformFeatureFlags.fg)('ptc_migrate_buttons') ? /*#__PURE__*/_react.default.createElement(_new.default, {
+    testId: "client-fetch-profile-button",
+    shouldFitContainer: true,
+    onClick: retry,
+    isLoading: isLoading
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.teamErrorButton)) : /*#__PURE__*/_react.default.createElement(_loadingButton.default, {
     testId: "client-fetch-profile-button",
     shouldFitContainer: true,
     onClick: retry,

package/dist/cjs/components/Team/TeamProfileCardTrigger.js

@@ -20,6 +20,7 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _giveKudos = require("@atlaskit/give-kudos");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
+var _primitives = require("@atlaskit/primitives");
 var _constants = require("@atlaskit/theme/constants");
 var _filterActions2 = _interopRequireDefault(require("../../internal/filterActions"));
 var _messages = _interopRequireDefault(require("../../messages"));
@@ -123,8 +124,23 @@ var TeamProfileCardTriggerInternal = exports.TeamProfileCardTriggerInternal = /*
         _this.hideProfilecard(_config.DELAY_MS_HIDE);
       }
     });
+    (0, _defineProperty2.default)(_this, "onKeyPress", function (event) {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        _this.setState({
+          isTriggeredByKeyboard: true
+        });
+        _this.showProfilecard(0);
+        if (!_this.state.visible) {
+          _this.fireAnalytics((0, _analytics.cardTriggered)('team', 'click'));
+        }
+      }
+    });
     (0, _defineProperty2.default)(_this, "onClose", function () {
       _this.hideProfilecard();
+      _this.setState({
+        isTriggeredByKeyboard: false
+      });
     });
     (0, _defineProperty2.default)(_this, "openKudosDrawer", function () {
       _this.hideProfilecard(_config.DELAY_MS_HIDE);
@@ -165,7 +181,8 @@ var TeamProfileCardTriggerInternal = exports.TeamProfileCardTriggerInternal = /*
       data: null,
       shouldShowGiveKudos: false,
       teamCentralBaseUrl: undefined,
-      kudosDrawerOpen: false
+      kudosDrawerOpen: false,
+      isTriggeredByKeyboard: false
     });
     (0, _defineProperty2.default)(_this, "clientFetchProfile", function () {
       var _this$props = _this.props,
@@ -235,7 +252,8 @@ var TeamProfileCardTriggerInternal = exports.TeamProfileCardTriggerInternal = /*
       }, /*#__PURE__*/_react.default.createElement(_lazyTeamProfileCard.TeamProfileCardLazy, (0, _extends2.default)({}, newProps, {
         isLoading: isLoading,
         hasError: hasError,
-        errorType: error
+        errorType: error,
+        isTriggeredByKeyboard: _this.state.isTriggeredByKeyboard
       }))));
     });
     (0, _defineProperty2.default)(_this, "renderKudosLauncher", function () {
@@ -257,10 +275,18 @@ var TeamProfileCardTriggerInternal = exports.TeamProfileCardTriggerInternal = /*
     (0, _defineProperty2.default)(_this, "renderTrigger", function (triggerProps) {
       var _this$props3 = _this.props,
         children = _this$props3.children,
+        intl = _this$props3.intl,
         triggerLinkType = _this$props3.triggerLinkType,
         viewProfileLink = _this$props3.viewProfileLink;
       if (triggerLinkType === 'none') {
-        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, _this.renderKudosLauncher(), /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
+        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, _this.renderKudosLauncher(), (0, _platformFeatureFlags.fg)('enable_team_profilecard_toggletip_a11y_fix') ? /*#__PURE__*/_react.default.createElement(_primitives.Box, (0, _extends2.default)({
+          as: "span",
+          role: "button",
+          testId: "team-profilecard-trigger-wrapper",
+          tabIndex: 0,
+          "aria-label": intl.formatMessage(_messages.default.teamProfileCardAriaLabel),
+          onKeyUp: _this.onKeyPress
+        }, triggerProps, _this.triggerListeners), children) : /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
           "data-testid": "team-profilecard-trigger-wrapper"
         }, triggerProps, _this.triggerListeners), children));
       }
@@ -393,4 +419,4 @@ var TeamProfileCardTriggerInternal = exports.TeamProfileCardTriggerInternal = /*
   triggerLinkType: 'link',
   shouldRenderToParent: true
 });
-var _default = exports.default = (0, _analyticsNext.withAnalyticsEvents)()(TeamProfileCardTriggerInternal);
+var _default = exports.default = (0, _analyticsNext.withAnalyticsEvents)()((0, _reactIntlNext.injectIntl)(TeamProfileCardTriggerInternal));

package/dist/cjs/components/User/OverflowProfileCardButtons.js

@@ -12,8 +12,10 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+var _new = require("@atlaskit/button/new");
 var _dropdownMenu = _interopRequireWildcard(require("@atlaskit/dropdown-menu"));
 var _showMoreHorizontalMore = _interopRequireDefault(require("@atlaskit/icon/core/migration/show-more-horizontal--more"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _messages = _interopRequireDefault(require("../../messages"));
 var _Card = require("../../styled/Card");
 var _analytics = require("../../util/analytics");
@@ -54,7 +56,13 @@ var OverflowProfileCardButtons = exports.OverflowProfileCardButtons = function O
         isSelected = _ref2.isSelected,
         testId = _ref2.testId,
         providedProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
-      return /*#__PURE__*/_react.default.createElement(_customThemeButton.default, (0, _extends2.default)({
+      return (0, _platformFeatureFlags.fg)('ptc_migrate_buttons') ? /*#__PURE__*/_react.default.createElement(_new.IconButton, (0, _extends2.default)({
+        type: "button"
+      }, providedProps, {
+        ref: triggerRef,
+        label: intl.formatMessage(_messages.default.profileCardMoreIconLabel),
+        icon: _showMoreHorizontalMore.default
+      })) : /*#__PURE__*/_react.default.createElement(_customThemeButton.default, (0, _extends2.default)({
         type: "button"
       }, providedProps, {
         ref: triggerRef,

package/dist/cjs/components/User/ProfileCard.js

@@ -14,7 +14,9 @@ var _reactIntlNext = require("react-intl-next");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
 var _button = _interopRequireDefault(require("@atlaskit/button"));
+var _new = require("@atlaskit/button/new");
 var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _colors = require("@atlaskit/theme/colors");
 var _messages = _interopRequireDefault(require("../../messages"));
@@ -168,7 +170,7 @@ var Actions = function Actions(_ref) {
     var button = /*#__PURE__*/_react.default.createElement(_focusRing.default, {
       isInset: true,
       key: "profile-card-action-focus-ring_".concat(action.id || index)
-    }, /*#__PURE__*/_react.default.createElement(_button.default, {
+    }, (0, _platformFeatureFlags.fg)('ptc_migrate_buttons') ? /*#__PURE__*/_react.default.createElement(_new.LinkButton, {
       appearance: "default",
       key: action.id || index,
       onClick: function onClick(event) {
@@ -177,6 +179,17 @@ var Actions = function Actions(_ref) {
         }
         return onActionClick(action, args, event, index);
       },
+      href: action.link || '',
+      autoFocus: index === 0 && isTriggeredUsingKeyboard
+    }, action.label, isKudos && /*#__PURE__*/_react.default.createElement(_Card.AnimationWrapper, null, /*#__PURE__*/_react.default.createElement(_Card.KudosBlobAnimation, null))) : /*#__PURE__*/_react.default.createElement(_button.default, {
+      appearance: "default",
+      key: action.id || index,
+      onClick: function onClick(event) {
+        for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+          args[_key2 - 1] = arguments[_key2];
+        }
+        return onActionClick(action, args, event, index);
+      },
       href: action.link,
       autoFocus: index === 0 && isTriggeredUsingKeyboard
     }, action.label, isKudos && /*#__PURE__*/_react.default.createElement(_Card.AnimationWrapper, null, /*#__PURE__*/_react.default.createElement(_Card.KudosBlobAnimation, null))));

package/dist/cjs/components/User/ReportingLinesDetails.compiled.css

@@ -0,0 +1,6 @@
+._19bvze3t{padding-left:var(--ds-space-0,0)}
+._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._ca0qze3t{padding-top:var(--ds-space-0,0)}
+._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._u5f3ze3t{padding-right:var(--ds-space-0,0)}
+._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}

package/dist/cjs/components/User/ReportingLinesDetails.js

@@ -1,3 +1,4 @@
+/* ReportingLinesDetails.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./ReportingLinesDetails.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
@@ -12,6 +15,7 @@ var _avatarGroup = _interopRequireDefault(require("@atlaskit/avatar-group"));
 var _button = _interopRequireDefault(require("@atlaskit/button"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _messages = _interopRequireDefault(require("../../messages"));
 var _ReportingLines = require("../../styled/ReportingLines");
 var _analytics = require("../../util/analytics");
@@ -27,9 +31,12 @@ var reportingLinesHeadingDefaultStyles = (0, _primitives.xcss)({
 var reportingLinesHeadingStyles = (0, _primitives.xcss)({
   marginBottom: '0'
 });
+var styles = {
+  reportingLinesButton: "_ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _bfhksm61 _irr3166n"
+};
 var avatarGroupMaxCount = 5;
 var ReportingLinesDetails = function ReportingLinesDetails(props) {
-  var _manager$pii, _manager$pii2;
+  var _manager$pii, _manager$pii2, _manager$pii3, _manager$pii4;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var fireAnalyticsWithDuration = props.fireAnalyticsWithDuration,
@@ -54,6 +61,20 @@ var ReportingLinesDetails = function ReportingLinesDetails(props) {
       onReportingLinesClick(user);
     } : undefined;
   };
+  var onReportingLinksClick = function onReportingLinksClick(user, userType, href) {
+    if (href) {
+      window.location.href = href;
+    }
+    if (onReportingLinesClick) {
+      onReportingLinesClick(user);
+    }
+    fireAnalyticsWithDuration(function (duration) {
+      return (0, _analytics.reportingLinesClicked)({
+        duration: duration,
+        userType: userType
+      });
+    });
+  };
   var showMoreButtonProps = (0, _platformFeatureFlags.fg)('platform_profilecard-enable_reporting_lines_label') ? {
     'aria-label': formatMessage(_messages.default.profileCardMoreReportingLinesLabel, {
       count: reports.length - avatarGroupMaxCount + 1
@@ -61,7 +82,16 @@ var ReportingLinesDetails = function ReportingLinesDetails(props) {
   } : undefined;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, manager && /*#__PURE__*/_react.default.createElement(_ReportingLines.ReportingLinesSection, null, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
     xcss: [reportingLinesHeadingDefaultStyles, reportingLinesHeadingStyles]
-  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.managerSectionHeading)), /*#__PURE__*/_react.default.createElement(_ReportingLines.OffsetWrapper, null, /*#__PURE__*/_react.default.createElement(_button.default, {
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.managerSectionHeading)), /*#__PURE__*/_react.default.createElement(_ReportingLines.OffsetWrapper, null, (0, _platformFeatureFlags.fg)('ptc_migrate_buttons') ? /*#__PURE__*/_react.default.createElement(_compiled.Pressable, {
+    onClick: function onClick() {
+      return onReportingLinksClick(manager, 'manager', getProfileHref(manager.accountIdentifier, reportingLinesProfileUrl));
+    },
+    isDisabled: !onReportingLinesClick,
+    xcss: styles.reportingLinesButton
+  }, /*#__PURE__*/_react.default.createElement(_ReportingLines.ManagerSection, null, /*#__PURE__*/_react.default.createElement(_avatar.default, {
+    size: "xsmall",
+    src: (_manager$pii = manager.pii) === null || _manager$pii === void 0 ? void 0 : _manager$pii.picture
+  }), /*#__PURE__*/_react.default.createElement(_ReportingLines.ManagerName, null, (_manager$pii2 = manager.pii) === null || _manager$pii2 === void 0 ? void 0 : _manager$pii2.name))) : /*#__PURE__*/_react.default.createElement(_button.default, {
     appearance: "subtle",
     spacing: "none",
     href: getProfileHref(manager.accountIdentifier, reportingLinesProfileUrl),
@@ -69,8 +99,8 @@ var ReportingLinesDetails = function ReportingLinesDetails(props) {
     isDisabled: !onReportingLinesClick
   }, /*#__PURE__*/_react.default.createElement(_ReportingLines.ManagerSection, null, /*#__PURE__*/_react.default.createElement(_avatar.default, {
     size: "xsmall",
-    src: (_manager$pii = manager.pii) === null || _manager$pii === void 0 ? void 0 : _manager$pii.picture
-  }), /*#__PURE__*/_react.default.createElement(_ReportingLines.ManagerName, null, (_manager$pii2 = manager.pii) === null || _manager$pii2 === void 0 ? void 0 : _manager$pii2.name))))), hasReports && /*#__PURE__*/_react.default.createElement(_ReportingLines.ReportingLinesSection, null, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    src: (_manager$pii3 = manager.pii) === null || _manager$pii3 === void 0 ? void 0 : _manager$pii3.picture
+  }), /*#__PURE__*/_react.default.createElement(_ReportingLines.ManagerName, null, (_manager$pii4 = manager.pii) === null || _manager$pii4 === void 0 ? void 0 : _manager$pii4.name))))), hasReports && /*#__PURE__*/_react.default.createElement(_ReportingLines.ReportingLinesSection, null, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
     xcss: reportingLinesHeadingDefaultStyles
   }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.directReportsSectionHeading)), /*#__PURE__*/_react.default.createElement(_avatarGroup.default, {
     appearance: "stack",

package/dist/cjs/messages.js

@@ -156,6 +156,11 @@ var messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Direct reports',
     description: "Title for a section on the profile card that show the user's direct reports"
   },
+  teamProfileCardAriaLabel: {
+    id: 'pt.team-profile-card.aria-label',
+    defaultMessage: 'More information about this team',
+    description: 'Aria label for the team profile card'
+  },
   giveKudosButton: {
     id: 'pt.profile-card.give-kudos',
     defaultMessage: 'Give kudos',

package/dist/cjs/util/analytics.js

@@ -45,7 +45,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread(_objectSpread({
       packageName: "@atlaskit/profilecard",
-      packageVersion: "23.3.1"
+      packageVersion: "23.4.1"
     }, attributes), {}, {
       firedAt: Math.round((0, _performance.getPageTime)())
     })

package/dist/es2019/client/getOrgIdForCloudIdFromAGG.js

@@ -6,7 +6,7 @@ const ORG_ID_FROM_CLOUD_ID_QUERY = `query OrgIdFromCloudId($cloudId: ID!) {
 }`;
 const addHeaders = headers => {
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "23.3.1");
+  headers.append('atl-client-version', "23.4.1");
   return headers;
 };
 export async function getOrgIdForCloudIdFromAGG(url, cloudId) {

package/dist/es2019/client/getTeamFromAGG.js

@@ -75,7 +75,7 @@ export const addHeaders = headers => {
   headers.append('X-ExperimentalApi', 'teams-beta');
   headers.append('X-ExperimentalApi', 'team-members-beta');
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "23.3.1");
+  headers.append('atl-client-version', "23.4.1");
   return headers;
 };
 export async function getTeamFromAGG(url, teamId, siteId) {

package/dist/es2019/components/Error/ErrorMessage.js

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
-import Button from '@atlaskit/button/standard-button';
-import { IconTile } from '@atlaskit/icon';
-import CrossCircleIcon from '@atlaskit/icon/core/migration/cross-circle';
+import ButtonLegacy from '@atlaskit/button';
+import Button from '@atlaskit/button/new';
+import CrossCircleIcon from '@atlaskit/icon/core/cross-circle';
 import IconError from '@atlaskit/icon/glyph/cross-circle';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Text } from '@atlaskit/primitives';
@@ -33,20 +33,15 @@ const ErrorMessage = props => {
   };
   return /*#__PURE__*/React.createElement(ErrorWrapper, {
     testId: "profilecard-error"
-  }, fg('ptc-migrate-legacy-icons-profilecard') ? /*#__PURE__*/React.createElement(IconTile, {
-    icon: CrossCircleIcon,
+  }, /*#__PURE__*/React.createElement(CrossCircleIcon, {
     label: "icon error",
-    size: "48",
-    appearance: 'gray'
-  }) :
-  /*#__PURE__*/
-  // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
-  React.createElement(IconError, {
-    label: "icon error",
-    size: "xlarge"
-  }), errorContent(), reload && /*#__PURE__*/React.createElement(Button, {
+    LEGACY_fallbackIcon: IconError,
+    LEGACY_size: "xlarge"
+  }), errorContent(), reload && (fg('ptc_migrate_buttons') ? /*#__PURE__*/React.createElement(Button, {
+    onClick: reload
+  }, "Try again") : /*#__PURE__*/React.createElement(ButtonLegacy, {
     appearance: "link",
     onClick: reload
-  }, "Try again"));
+  }, "Try again")));
 };
 export default ErrorMessage;