@atlaskit/profilecard 22.0.3 → 22.2.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/profilecard
 
+## 22.2.0
+
+### Minor Changes
+
+- [#113447](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113447)
+  [`6ef7d7cb5d379`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6ef7d7cb5d379) -
+  Compiled migration - team card
+
+## 22.1.0
+
+### Minor Changes
+
+- [#113227](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113227)
+  [`d8c1edd78e6d4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d8c1edd78e6d4) -
+  Compiled migration - user profile card
+
 ## 22.0.3
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -32,6 +32,9 @@
         {
             "path": "../../../design-system/button/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../design-system/css/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../../design-system/dropdown-menu/afm-cc/tsconfig.json"
         },

package/afm-jira/tsconfig.json

@@ -32,6 +32,9 @@
 		{
 			"path": "../../../design-system/button/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/css/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/dropdown-menu/afm-jira/tsconfig.json"
 		},

package/afm-post-office/tsconfig.json

@@ -32,6 +32,9 @@
 		{
 			"path": "../../../design-system/button/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/css/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/dropdown-menu/afm-post-office/tsconfig.json"
 		},

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', "22.0.3");
+  headers.append('atl-client-version', "22.2.0");
   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', "22.0.3");
+  headers.append('atl-client-version', "22.2.0");
   return headers;
 };
 function getTeamFromAGG(_x, _x2, _x3) {

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

@@ -37,7 +37,7 @@ var ErrorMessage = function ErrorMessage(props) {
     }, "Try again and we\u2019ll give it another shot"));
   };
   return /*#__PURE__*/_react.default.createElement(_Error.ErrorWrapper, {
-    "data-testid": "profilecard-error"
+    testId: "profilecard-error"
   }, /*#__PURE__*/_react.default.createElement(_crossCircle.default, {
     label: "icon error",
     size: "xlarge"

package/dist/cjs/components/Icon/IconLabel.js

@@ -16,6 +16,7 @@ var _clockRecent = _interopRequireDefault(require("@atlaskit/icon/core/migration
 var _email = _interopRequireDefault(require("@atlaskit/icon/core/migration/email"));
 var _location = _interopRequireDefault(require("@atlaskit/icon/core/migration/location"));
 var _officeBuilding = _interopRequireDefault(require("@atlaskit/icon/core/migration/office-building"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _Card = require("../../styled/Card");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
@@ -43,13 +44,11 @@ var IconLabel = exports.default = /*#__PURE__*/function (_React$PureComponent) {
       var displayIcon = IconElement ? /*#__PURE__*/_react.default.createElement(IconElement, {
         label: "".concat(this.props.icon),
         LEGACY_size: "small",
-        color: "currentColor"
+        color: (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? "var(--ds-text-subtlest, #626F86)" : 'currentColor'
       }) : null;
-      return /*#__PURE__*/_react.default.createElement(_Card.DetailsLabel, null, /*#__PURE__*/_react.default.createElement(_Card.DetailsLabelIcon, {
-        as: "dt"
-      }, displayIcon), /*#__PURE__*/_react.default.createElement(_Card.DetailsLabelText, {
-        as: "dd"
-      }, this.props.children));
+      return /*#__PURE__*/_react.default.createElement(_Card.DetailsLabel, {
+        extraTopSpace: this.props.extraTopSpace
+      }, /*#__PURE__*/_react.default.createElement(_Card.DetailsLabelIcon, null, displayIcon), /*#__PURE__*/_react.default.createElement(_Card.DetailsLabelText, null, this.props.children));
     }
   }]);
 }(_react.default.PureComponent);

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

@@ -26,7 +26,7 @@ var _default = exports.default = function _default(props) {
     });
   }, [analytics]);
   return /*#__PURE__*/_react.default.createElement(_TeamCard.TeamForbiddenErrorStateWrapper, {
-    "data-testid": "team-profilecard-forbidden-error-state"
+    testId: "team-profilecard-forbidden-error-state"
   }, /*#__PURE__*/_react.default.createElement(_emptyState.default, {
     header: intl.formatMessage(_messages.default.teamForbiddenErrorStateTitle),
     description: intl.formatMessage(_messages.default.teamForbiddenErrorStateDescription),

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

@@ -22,10 +22,10 @@ var _default = exports.default = function _default(props) {
     });
   }, [analytics]);
   return /*#__PURE__*/_react.default.createElement(_TeamCard.CardWrapper, {
-    "data-testid": "team-profilecard"
+    testId: "team-profilecard"
   }, /*#__PURE__*/_react.default.createElement(_TeamCard.CardHeader, {
     isLoading: true
   }), /*#__PURE__*/_react.default.createElement(_TeamCard.CardContent, null, /*#__PURE__*/_react.default.createElement(_TeamCard.LoadingWrapper, {
-    "data-testid": "team-profilecard-spinner"
+    testId: "team-profilecard-spinner"
   }, /*#__PURE__*/_react.default.createElement(_spinner.default, null))));
 };

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

@@ -21,7 +21,7 @@ var _menu = require("@atlaskit/menu");
 var _verifiedTeamIcon = require("@atlaskit/people-teams-ui-public/verified-team-icon");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
-var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _constants = require("@atlaskit/theme/constants");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _messages = _interopRequireDefault(require("../../messages"));
@@ -250,12 +250,13 @@ var TeamProfilecardContent = function TeamProfilecardContent(_ref5) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [analytics]);
   return /*#__PURE__*/_react.default.createElement(_TeamCard.CardWrapper, {
-    "data-testid": "team-profilecard"
+    testId: "team-profilecard"
   }, /*#__PURE__*/_react.default.createElement(_TeamCard.CardHeader, {
-    image: team.largeHeaderImageUrl || team.smallHeaderImageUrl
+    image: team.largeHeaderImageUrl || team.smallHeaderImageUrl,
+    label: team.displayName
   }), /*#__PURE__*/_react.default.createElement(_TeamCard.CardContent, null, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
     content: team.displayName
-  }, /*#__PURE__*/_react.default.createElement(_primitives.Inline, null, /*#__PURE__*/_react.default.createElement(_TeamCard.TeamName, null, team.displayName), team.isVerified && (0, _platformFeatureFlags.fg)('show_verified_team_icon_in_profile_card') && /*#__PURE__*/_react.default.createElement(_verifiedTeamIcon.VerifiedTeamIcon, null))), /*#__PURE__*/_react.default.createElement(TeamMembers, {
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Inline, null, /*#__PURE__*/_react.default.createElement(_TeamCard.TeamName, null, team.displayName), team.isVerified && (0, _platformFeatureFlags.fg)('show_verified_team_icon_in_profile_card') && /*#__PURE__*/_react.default.createElement(_verifiedTeamIcon.VerifiedTeamIcon, null))), /*#__PURE__*/_react.default.createElement(TeamMembers, {
     analytics: analytics,
     members: team.members,
     generateUserLink: generateUserLink,
@@ -290,8 +291,8 @@ var ErrorMessage = function ErrorMessage(_ref6) {
     }
   }, [analytics, clientFetchProfile]);
   return /*#__PURE__*/_react.default.createElement(_Error.ErrorWrapper, {
-    "data-testid": "team-profilecard-error"
-  }, /*#__PURE__*/_react.default.createElement(_Error2.ErrorIllustration, null), /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+    testId: "team-profilecard-error"
+  }, /*#__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, {
@@ -315,7 +316,7 @@ var TeamProfileCard = function TeamProfileCard(props) {
       });
     } else {
       return /*#__PURE__*/_react.default.createElement(_TeamCard.CardWrapper, {
-        "data-testid": "team-profilecard"
+        testId: "team-profilecard"
       }, /*#__PURE__*/_react.default.createElement(ErrorMessage, {
         analytics: analytics,
         clientFetchProfile: clientFetchProfile,

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

@@ -45,7 +45,7 @@ var OverflowProfileCardButtons = exports.OverflowProfileCardButtons = function O
     });
   }, [numActions, fireAnalyticsWithDuration]);
   return /*#__PURE__*/_react.default.createElement(_Card.OverflowActionButtonsWrapper, {
-    "data-testid": "profilecard-actions-overflow"
+    testId: "profilecard-actions-overflow"
   }, /*#__PURE__*/_react.default.createElement(_dropdownMenu.default, {
     onOpenChange: onOpenChange,
     placement: 'bottom-end',

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

@@ -57,9 +57,9 @@ var useKudos = function useKudos(cloudId, userId, teamCentralBaseUrl, openKudosD
 };
 var Wrapper = function Wrapper(props) {
   return /*#__PURE__*/_react.default.createElement(_Card.CardWrapper, {
-    "data-testid": "profilecard",
+    testId: "profilecard",
     role: "dialog",
-    "aria-labelledby": "profilecard-name-label"
+    labelledBy: "profilecard-name-label"
   }, props.children);
 };
 var ProfilecardInternal = exports.ProfilecardInternal = function ProfilecardInternal(props) {
@@ -162,7 +162,7 @@ var Actions = function Actions(_ref) {
   var regularActions = actions.slice(0, _OverflowProfileCardButtons.ACTION_OVERFLOW_THRESHOLD);
   var overflowActions = actions.length > _OverflowProfileCardButtons.ACTION_OVERFLOW_THRESHOLD ? actions.slice(_OverflowProfileCardButtons.ACTION_OVERFLOW_THRESHOLD) : undefined;
   return /*#__PURE__*/_react.default.createElement(_Card.ActionButtonGroup, {
-    "data-testid": "profilecard-actions"
+    testId: "profilecard-actions"
   }, regularActions.map(function (action, index) {
     var isKudos = action.id === GIVE_KUDOS_ACTION_ID;
     var button = /*#__PURE__*/_react.default.createElement(_focusRing.default, {
@@ -204,7 +204,7 @@ var LoadingView = function LoadingView(_ref2) {
     });
   }, [fireAnalyticsWithDuration]);
   return /*#__PURE__*/_react.default.createElement(_Card.SpinnerContainer, {
-    "data-testid": "profilecard-spinner-container"
+    testId: "profilecard-spinner-container"
   }, /*#__PURE__*/_react.default.createElement(_spinner.default, null));
 };
 var _default = exports.default = (0, _analyticsNext.withAnalyticsEvents)()(ProfilecardInternal);

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

@@ -90,7 +90,7 @@ var CustomLozenges = function CustomLozenges(_ref) {
 var BotProfileCardDetails = function BotProfileCardDetails(props) {
   var fullName = props.fullName,
     nickname = props.nickname;
-  return /*#__PURE__*/_react.default.createElement(_Card.DetailsGroup, null, renderName(nickname, fullName), /*#__PURE__*/_react.default.createElement(_Card.AppTitleLabel, null, "App"));
+  return /*#__PURE__*/_react.default.createElement(_Card.DetailsGroup, null, renderName(nickname, fullName), /*#__PURE__*/_react.default.createElement(_Card.AppTitleLabel, null, "APP"));
 };
 var DisabledProfileCardDetails = function DisabledProfileCardDetails(props) {
   var companyName = props.companyName,
@@ -130,7 +130,8 @@ var ProfileCardDetails = exports.ProfileCardDetails = function ProfileCardDetail
     as: "dl",
     xcss: detailedListWrapperStyles
   }, /*#__PURE__*/_react.default.createElement(_Icon.IconLabel, {
-    icon: "email"
+    icon: "email",
+    extraTopSpace: true
   }, props.email), /*#__PURE__*/_react.default.createElement(_Icon.IconLabel, {
     icon: "time"
   }, props.timestring), /*#__PURE__*/_react.default.createElement(_Icon.IconLabel, {

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

@@ -176,7 +176,7 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
         }));
       } else if (hasError) {
         return /*#__PURE__*/_react.default.createElement(_Card.CardWrapper, {
-          "data-testid": "profile-card-resourced-error-state"
+          testId: "profile-card-resourced-error-state"
         }, /*#__PURE__*/_react.default.createElement(_Error.ErrorMessage, {
           errorType: error,
           reload: this.clientFetchProfile,

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

@@ -410,7 +410,7 @@ function ProfilecardTriggerNext(_ref2) {
 var LoadingView = function LoadingView(_ref4) {
   var fireAnalytics = _ref4.fireAnalytics;
   return /*#__PURE__*/_react.default.createElement(_Card.CardWrapper, {
-    "data-testId": "profilecard.profilecardtrigger.loading"
+    testId: "profilecard.profilecardtrigger.loading"
   }, /*#__PURE__*/_react.default.createElement(_UserLoadingState.default, {
     fireAnalytics: fireAnalytics
   }));

package/dist/cjs/styled/Card.compiled.css

@@ -0,0 +1,78 @@
+._11c81vlj{font:var(--ds-font-body-small,normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._11c8qk37{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
+._zulp12x7{gap:var(--ds-space-075,6px)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}
+._12vemgnk{background-repeat:no-repeat}
+._154i1ejb{top:var(--ds-space-300,24px)}
+._154ixy5q{top:var(--ds-space-400,2pc)}
+._154ize3t{top:var(--ds-space-0,0)}
+._16jlkb7n{flex-grow:1}
+._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
+._18m915vq{overflow-y:hidden}
+._18u01epz{margin-left:var(--ds-space-1000,5pc)}
+._18u0u2gc{margin-left:var(--ds-space-100,8px)}
+._18u0utpp{margin-left:var(--ds-space-150,9pt)}
+._18u0ze3t{margin-left:var(--ds-space-0,0)}
+._19bv12x7{padding-left:var(--ds-space-075,6px)}
+._19bv1ejb{padding-left:var(--ds-space-300,24px)}
+._19bvxy5q{padding-left:var(--ds-space-400,2pc)}
+._19pk1b66{margin-top:var(--ds-space-050,4px)}
+._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
+._19pkutpp{margin-top:var(--ds-space-150,9pt)}
+._19pkxy5q{margin-top:var(--ds-space-400,2pc)}
+._19pkze3t{margin-top:var(--ds-space-0,0)}
+._1bah1h6o{justify-content:center}
+._1bah1y6m{justify-content:flex-start}
+._1bahesu3{justify-content:flex-end}
+._1bsb18pt{width:228px}
+._1bsb1gwv{width:360px}
+._1bsb1ns9{width:-moz-fit-content;width:fit-content}
+._1bsb1w81{width:150px}
+._1bsb7vkz{width:1pc}
+._1bsbzwfg{width:2pc}
+._1bto1l2s{text-overflow:ellipsis}
+._1e0c1o8l{display:inline-block}
+._1e0c1txw{display:flex}
+._1e0c1ule{display:block}
+._1e0cglyw{display:none}
+._1itk1419{background-image:linear-gradient(to bottom,var(--ds-background-brand-bold,#0c66e4) 0,var(--ds-background-brand-bold,#0c66e4) 100%)}
+._1itkkf3t{background-image:linear-gradient(to bottom,var(--ds-background-disabled,#091e4208) 0,var(--ds-background-disabled,#091e4208) 100%)}
+._1itkq1hn{background-image:radial-gradient(circle,var(--ds-background-information-pressed,#85b8ff) 0,var(--ds-background-discovery-pressed,#b8acf6) 25%,transparent 50%)}
+._1lrw14bs{background-size:100% 6pc}
+._1ltv1ejb{left:var(--ds-space-300,24px)}
+._1ltvze3t{left:var(--ds-space-0,0)}
+._1n261g80{flex-wrap:wrap}
+._1o9zidpf{flex-shrink:0}
+._1pby1mrw{z-index:-1}
+._1reo15vq{overflow-x:hidden}
+._1tkebv7e{min-height:136px}
+._1xi2ze3t{right:var(--ds-space-0,0)}
+._2hwxze3t{margin-right:var(--ds-space-0,0)}
+._2lx21bp4{flex-direction:column}
+._2lx2vrvc{flex-direction:row}
+._4cvr1h6o{align-items:center}
+._4t3i16xz{height:6pc}
+._4t3i1w81{height:150px}
+._4t3i7vkz{height:1pc}
+._4t3izwfg{height:2pc}
+._5sagi11n{animation-duration:3s}
+._94n5ze3t{bottom:var(--ds-space-0,0)}
+._ca0q1ejb{padding-top:var(--ds-space-300,24px)}
+._i0dl1wug{flex-basis:auto}
+._j7hq1q51{animation-name:k1ojqp0a}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._mkrz1rip{clip-path:inset(0 0 0 0 round 3px)}
+._n3td1ejb{padding-bottom:var(--ds-space-300,24px)}
+._o5721q9c{white-space:nowrap}
+._otyrze3t{margin-bottom:var(--ds-space-0,0)}
+._s7n4jp4b{vertical-align:top}
+._syaz131l{color:var(--ds-text-subtlest,#626f86)}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._tip8kb7n{animation-iteration-count:1}
+._u5f312x7{padding-right:var(--ds-space-075,6px)}
+._u5f31ejb{padding-right:var(--ds-space-300,24px)}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
+._y3gnusic{text-align:right}
+@keyframes k1ojqp0a{0%{transform:translate(-5pc,-50px)}to{transform:translate(90px,-70px)}}