@atlaskit/profilecard 23.12.0 → 23.13.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/profilecard
 
+## 23.13.0
+
+### Minor Changes
+
+- [#153632](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/153632)
+  [`b3c90207ec3e4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b3c90207ec3e4) -
+  [ux] update the TeamProfileCardWithContainer layout
+
 ## 23.12.0
 
 ### Minor 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.12.0");
+  headers.append('atl-client-version', "23.13.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', "23.12.0");
+  headers.append('atl-client-version', "23.13.0");
   return headers;
 };
 function getTeamFromAGG(_x, _x2, _x3) {

package/dist/cjs/components/team-profile-card/main.compiled.css

@@ -9,13 +9,16 @@
 ._18m915vq{overflow-y:hidden}
 ._18m91wug{overflow-y:auto}
 ._18u01ejb{margin-left:var(--ds-space-300,24px)}
+._18u01wug{margin-left:auto}
 ._18u0pxbi{margin-left:var(--ds-space-200,1pc)}
 ._18u0u2gc{margin-left:var(--ds-space-100,8px)}
 ._19bv1ejb{padding-left:var(--ds-space-300,24px)}
+._19pk1b66{margin-top:var(--ds-space-050,4px)}
 ._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
 ._19pku2gc{margin-top:var(--ds-space-100,8px)}
 ._1bsb1gwv{width:360px}
 ._1bsb1osq{width:100%}
+._1bsb7vkz{width:1pc}
 ._1e0c1txw{display:flex}
 ._1i53muej{border-top-color:var(--ds-border,#091e4224)}
 ._1reo15vq{overflow-x:hidden}
@@ -25,9 +28,11 @@
 ._2hwxu2gc{margin-right:var(--ds-space-100,8px)}
 ._2lx21bp4{flex-direction:column}
 ._4cvr1h6o{align-items:center}
+._4t3i12am{height:50px}
 ._4t3i1ul9{height:30px}
 ._4t3i1wug{height:auto}
 ._4t3i53f4{height:75pt}
+._4t3i7vkz{height:1pc}
 ._5ral1dfr{object-fit:cover}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._c71lx2si{max-height:265px}

package/dist/cjs/components/team-profile-card/main.js

@@ -16,11 +16,13 @@ var _reactIntlNext = require("react-intl-next");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _avatarGroup = _interopRequireDefault(require("@atlaskit/avatar-group"));
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
+var _linkItem = _interopRequireDefault(require("@atlaskit/menu/link-item"));
 var _verifiedTeamIcon = require("@atlaskit/people-teams-ui-public/verified-team-icon");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _teamsAvatar = _interopRequireDefault(require("@atlaskit/teams-avatar"));
 var _teamsPublic = require("@atlaskit/teams-public");
 var _analytics = require("../../util/analytics");
+var _TeamAppTile = _interopRequireDefault(require("../common/assets/TeamAppTile.svg"));
 var _teamActions = require("./team-actions");
 var _main = require("./team-connections/main");
 var _teamContainersSkeleton = require("./team-containers-skeleton");
@@ -33,10 +35,14 @@ var styles = {
   containerStyles: "_otyrpxbi",
   avatarImageStyles: "_kqswstnw _18u01ejb",
   headerImageStyles: "_5ral1dfr _s7n4jp4b _4t3i53f4 _1bsb1osq",
+  newHeaderImageStyles: "_5ral1dfr _s7n4jp4b _4t3i12am _1bsb1osq",
   teamInformationStyles: "_18u01ejb _19pku2gc _2hwx1ejb",
   teamConnectionHeaderStyles: "_18u0u2gc _2hwxu2gc _c71lx2si _18m91wug",
-  teamConnectionContainerStyles: "_18u01ejb _2hwx1ejb",
-  connectionTitleStyles: "_11c81vhk _18u0pxbi _19pkpxbi _2hwxpxbi _otyr12x7 _syaz1gjq",
+  teamConnectionContainerStyles: "_18u0u2gc _2hwxu2gc",
+  teamConnectionStyles: "_18u0u2gc _2hwxu2gc",
+  teamConnectionItemsStyles: "_c71lx2si _18m91wug",
+  connectionTitleStyles: "_11c81vhk _18u0pxbi _19pk1b66 _2hwxpxbi _otyr12x7 _syaz1gjq",
+  teamAppTileStyles: "_18u01wug _4t3i7vkz _1bsb7vkz",
   viewProfileContainerStyles: "_4cvr1h6o _uwhke4h9 _15a5nqa1 _1i53muej _19bv1ejb _u5f31ejb",
   viewProfileButtonStyles: "_2rkoiti9 _189ee4h9 _1dqonqa1 _1h6dmuej _bfhksm61 _syaz1gjq _1bsb1osq _4t3i1ul9 _19pkpxbi"
 };
@@ -83,6 +89,9 @@ var TeamProfileCard = exports.TeamProfileCard = function TeamProfileCard(_ref3)
       return tc.id === containerId;
     }).length < teamContainers.length;
   }, [containerId, teamContainers]);
+
+  // TODO: set isNewLayout to be true when clean up 'team-bi-directional-container-connection' experiment
+  var isNewLayout = Boolean(props.isKudosEnabled || props.otherActions);
   var onClick = (0, _react.useCallback)(function () {
     if (createAnalyticsEvent) {
       (0, _analytics.fireEvent)(createAnalyticsEvent, {
@@ -92,8 +101,106 @@ var TeamProfileCard = exports.TeamProfileCard = function TeamProfileCard(_ref3)
         attributes: {}
       });
     }
-    window.open(teamProfileUrl, '_blank');
-  }, [createAnalyticsEvent, teamProfileUrl]);
+    if (!isNewLayout) {
+      window.open(teamProfileUrl, '_blank');
+    }
+  }, [createAnalyticsEvent, teamProfileUrl, isNewLayout]);
+  if (isNewLayout) {
+    return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      xcss: styles.wrapperStyles,
+      testId: "team-card-".concat(teamId)
+    }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      as: "img",
+      src: headerImageUrl,
+      xcss: styles.newHeaderImageStyles,
+      testId: "profile-header-image",
+      alt: "team-header-image"
+    }), /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
+      space: "space.200",
+      xcss: styles.containerStyles
+    }, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
+      spread: "space-between",
+      alignBlock: "center"
+    }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      xcss: styles.avatarImageStyles
+    }, /*#__PURE__*/_react.default.createElement(_teamsAvatar.default, {
+      size: "medium",
+      src: avatarImageUrl
+    }))), /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
+      xcss: styles.teamInformationStyles,
+      space: "space.200"
+    }, /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
+      justifyContent: "space-between"
+    }, /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
+      space: "space.050"
+    }, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
+      alignBlock: "center"
+    }, /*#__PURE__*/_react.default.createElement(_heading.default, {
+      size: "medium"
+    }, displayName), isVerified && /*#__PURE__*/_react.default.createElement(_verifiedTeamIcon.VerifiedTeamIcon, {
+      showTooltip: true
+    })), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+      color: "color.text.subtlest"
+    }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, {
+      defaultMessage: "Contributing team \u2022 {count, plural, one {# member} other {# members}}",
+      values: {
+        count: memberCount
+      },
+      id: "people-and-teams.team-profile-card.member-count"
+    }))), /*#__PURE__*/_react.default.createElement(_teamActions.TeamActions, (0, _extends2.default)({
+      cloudId: cloudId,
+      teamId: teamId
+    }, props))), /*#__PURE__*/_react.default.createElement(_compiled.Inline, null, /*#__PURE__*/_react.default.createElement(_avatarGroup.default, {
+      appearance: "stack",
+      data: memberAvatars
+    })), description && /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+      color: "color.text",
+      maxLines: 3
+    }, description)), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      xcss: styles.teamConnectionStyles
+    }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      xcss: styles.connectionTitleStyles
+    }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, {
+      defaultMessage: "Team links",
+      id: "people-and-teams.team-profile-card.team-connections"
+    })), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      xcss: styles.teamConnectionItemsStyles
+    }, /*#__PURE__*/_react.default.createElement(_linkItem.default, {
+      href: teamProfileUrl,
+      target: "_blank",
+      onClick: onClick,
+      description: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, {
+        defaultMessage: "Team profile",
+        id: "people-and-teams.team-profile-card.team-profile-description"
+      }),
+      iconBefore: /*#__PURE__*/_react.default.createElement(_teamsAvatar.default, {
+        size: "small",
+        src: avatarImageUrl
+      }),
+      iconAfter: /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+        as: "img",
+        src: _TeamAppTile.default,
+        testId: "team-app-tile",
+        alt: "team-app-tile",
+        xcss: styles.teamAppTileStyles
+      })
+    }, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+      maxLines: 1,
+      color: "color.text"
+    }, displayName)), (loading || hasOtherTeamConnections) && /*#__PURE__*/_react.default.createElement(_teamsPublic.TeamContainers, {
+      teamId: teamId,
+      onAddAContainerClick: noop,
+      userId: userId,
+      cloudId: cloudId,
+      components: {
+        ContainerCard: _main.NewTeamConnections,
+        TeamContainersSkeleton: _teamContainersSkeleton.TeamContainersSkeleton
+      },
+      filterContainerId: containerId,
+      isDisplayedOnProfileCard: true,
+      maxNumberOfContainersToShow: 3
+    })))));
+  }
   return /*#__PURE__*/_react.default.createElement(TeamCardWrapper, {
     id: teamId
   }, /*#__PURE__*/_react.default.createElement(HeaderImage, {
@@ -140,7 +247,7 @@ var TeamProfileCard = exports.TeamProfileCard = function TeamProfileCard(_ref3)
     xcss: styles.connectionTitleStyles
   }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, {
     defaultMessage: "Where we work",
-    id: "people-and-teams.team-profile-card.team-connections"
+    id: "people-and-teams.team-profile-card.team-connections-header"
   })), /*#__PURE__*/_react.default.createElement(_teamsPublic.TeamContainers, {
     teamId: teamId,
     onAddAContainerClick: noop,
@@ -152,12 +259,7 @@ var TeamProfileCard = exports.TeamProfileCard = function TeamProfileCard(_ref3)
     },
     filterContainerId: containerId,
     isDisplayedOnProfileCard: true
-  })), props.isKudosEnabled || props.otherActions ? /*#__PURE__*/_react.default.createElement(_teamActions.ButtonSection, (0, _extends2.default)({
-    teamProfileUrl: teamProfileUrl,
-    cloudId: cloudId,
-    teamId: teamId,
-    loading: loading
-  }, props)) : teamProfileUrl && /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
+  })), teamProfileUrl && /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
     xcss: styles.viewProfileContainerStyles
   }, /*#__PURE__*/_react.default.createElement(_compiled.Pressable, {
     onClick: onClick,

package/dist/cjs/components/team-profile-card/mocks.js

@@ -136,6 +136,28 @@ var mockTeamContainersQueries = exports.mockTeamContainersQueries = function moc
                     }
                   }
                 }
+              }, {
+                node: {
+                  from: {
+                    id: '1'
+                  },
+                  to: {
+                    id: '4',
+                    data: {
+                      __typename: 'ConfluenceSpace',
+                      id: '2',
+                      confluenceSpaceName: 'Confluence Space',
+                      type: 'confluence',
+                      createdDate: '2021-01-01',
+                      links: {
+                        webUi: 'https://example.com/confluence'
+                      },
+                      icon: {
+                        path: 'https://avatar-management--avatars.us-west-2.staging.public.atl-paas.net/712020:2981defd-17f1-440e-a377-8c7657b72a6f/4b5b0d55-614b-4e75-858f-9da3d0c7e3f8/128'
+                      }
+                    }
+                  }
+                }
               }]
             }
           }

package/dist/cjs/components/team-profile-card/team-actions/index.js

@@ -1,4 +1,3 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,62 +5,39 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ButtonSection = void 0;
-require("./index.compiled.css");
-var _runtime = require("@compiled/react/runtime");
+exports.TeamActions = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
-var _analyticsNext = require("@atlaskit/analytics-next");
-var _new = require("@atlaskit/button/new");
 var _giveKudos = require("@atlaskit/give-kudos");
 var _menu = require("@atlaskit/menu");
-var _primitives = require("@atlaskit/primitives");
 var _getTeamFromAGG = require("../../../client/getTeamFromAGG");
-var _analytics = require("../../../util/analytics");
 var _messages = require("./messages");
 var _moreActions = require("./more-actions");
-var _excluded = ["teamProfileUrl", "isKudosEnabled", "otherActions", "loading"];
+var _excluded = ["isKudosEnabled", "otherActions", "loading"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var GIVE_KUDOS_ACTION_ID = 'give-kudos';
-var styles = {
-  containerStyles: "_uwhke4h9 _15a5nqa1 _1i53muej _19bv1ejb _u5f31ejb _ca0qpxbi",
-  actionContainerStyles: "_16jlkb7n"
-};
-var ButtonSection = exports.ButtonSection = function ButtonSection(_ref) {
-  var teamProfileUrl = _ref.teamProfileUrl,
-    isKudosEnabled = _ref.isKudosEnabled,
+var TeamActions = exports.TeamActions = function TeamActions(_ref) {
+  var isKudosEnabled = _ref.isKudosEnabled,
     otherActions = _ref.otherActions,
     loading = _ref.loading,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
-    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isKudosOpen = _useState2[0],
     setIsKudosOpen = _useState2[1];
-  var onTeamProfileClick = (0, _react.useCallback)(function () {
-    if (createAnalyticsEvent) {
-      (0, _analytics.fireEvent)(createAnalyticsEvent, {
-        action: 'clicked',
-        actionSubject: 'button',
-        actionSubjectId: 'viewTeamProfileButton',
-        attributes: {}
-      });
-    }
-  }, [createAnalyticsEvent]);
   var onKudosClick = (0, _react.useCallback)(function () {
     setIsKudosOpen(true);
   }, []);
-  var extraActions = [];
+  var actions = [];
   var kudosProps = null;
   if (isKudosEnabled) {
-    extraActions.push({
+    actions.push({
       id: GIVE_KUDOS_ACTION_ID,
       item: /*#__PURE__*/_react.default.createElement(_menu.ButtonItem, {
         onClick: onKudosClick
@@ -70,23 +46,15 @@ var ButtonSection = exports.ButtonSection = function ButtonSection(_ref) {
     kudosProps = props;
   }
   if (otherActions) {
-    extraActions.push.apply(extraActions, (0, _toConsumableArray2.default)(otherActions));
+    actions.push.apply(actions, (0, _toConsumableArray2.default)(otherActions));
   }
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
-    xcss: styles.containerStyles
-  }, /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
-    space: "space.050"
-  }, teamProfileUrl && /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-    xcss: styles.actionContainerStyles
-  }, /*#__PURE__*/_react.default.createElement(_new.LinkButton, {
-    onClick: onTeamProfileClick,
-    href: teamProfileUrl,
-    target: "_blank",
-    shouldFitContainer: true
-  }, formatMessage(_messages.messages.viewProfile))), extraActions.length > 0 && /*#__PURE__*/_react.default.createElement(_moreActions.MoreActions, {
-    actions: extraActions,
+  if (actions.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_moreActions.MoreActions, {
+    actions: actions,
     loading: loading
-  }))), isKudosEnabled && kudosProps && /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+  }), isKudosEnabled && kudosProps && /*#__PURE__*/_react.default.createElement(_react.Suspense, {
     fallback: null
   }, /*#__PURE__*/_react.default.createElement(_giveKudos.GiveKudosLauncherLazy, {
     isOpen: isKudosOpen,

package/dist/cjs/components/team-profile-card/team-actions/messages.js

@@ -6,11 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.messages = void 0;
 var _reactIntlNext = require("react-intl-next");
 var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
-  viewProfile: {
-    id: 'team-profile-card.team-actions.view-profile',
-    defaultMessage: 'View profile',
-    description: 'View profile button text'
-  },
   giveKudos: {
     id: 'team-profile-card.team-actions.give-kudos',
     defaultMessage: 'Give kudos',

package/dist/cjs/components/team-profile-card/team-connections/main.js

@@ -1,15 +1,17 @@
 /* main.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TeamConnections = void 0;
+exports.TeamConnections = exports.NewTeamConnections = void 0;
 require("./main.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
 var _analyticsNext = require("@atlaskit/analytics-next");
+var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
 var _menu = require("@atlaskit/menu");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _teamsPublic = require("@atlaskit/teams-public");
@@ -70,4 +72,53 @@ var TeamConnections = exports.TeamConnections = function TeamConnections(_ref) {
     xcss: styles.containerTypeIconButtonStyles,
     testId: "container-type-icon"
   }, icon)));
+};
+var NewTeamConnections = exports.NewTeamConnections = function NewTeamConnections(_ref2) {
+  var containerType = _ref2.containerType,
+    title = _ref2.title,
+    containerIcon = _ref2.containerIcon,
+    link = _ref2.link;
+  var _getContainerProperti2 = (0, _teamsPublic.getContainerProperties)(containerType, 'medium'),
+    description = _getContainerProperti2.description,
+    icon = _getContainerProperti2.icon,
+    containerTypeText = _getContainerProperti2.containerTypeText;
+  var _useAnalyticsEvents2 = (0, _analyticsNext.useAnalyticsEvents)(),
+    createAnalyticsEvent = _useAnalyticsEvents2.createAnalyticsEvent;
+  var onClick = (0, _react.useCallback)(function () {
+    (0, _analytics.fireEvent)(createAnalyticsEvent, {
+      action: 'clicked',
+      actionSubject: 'teamConnectionItem',
+      actionSubjectId: 'teamProfileCard',
+      attributes: {
+        container: containerType
+      }
+    });
+  }, [containerType, createAnalyticsEvent]);
+  return /*#__PURE__*/_react.default.createElement(_menu.LinkItem, {
+    href: link,
+    onClick: onClick,
+    description: /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
+      space: "space.050"
+    }, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+      size: "small",
+      color: "color.text.subtlest"
+    }, description), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+      size: "small",
+      color: "color.text.subtlest"
+    }, containerTypeText)),
+    iconBefore: /*#__PURE__*/_react.default.createElement(_avatar.default, {
+      size: "small",
+      appearance: "square",
+      src: containerIcon,
+      testId: "linked-container-icon"
+    }),
+    iconAfter: /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      backgroundColor: 'color.background.neutral.subtle',
+      xcss: styles.containerTypeIconButtonStyles,
+      testId: "container-type-icon"
+    }, icon)
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+    maxLines: 1,
+    color: "color.text"
+  }, title));
 };

package/dist/cjs/components/team-profile-card/team-containers-skeleton/index.compiled.css

@@ -1,3 +1,5 @@
 
 ._2rko1q77{border-radius:var(--ds-border-radius-400,1pc)}
-._1rjc1b66{padding-block:var(--ds-space-050,4px)}._1bsbvbgk{width:4pc}
+._1rjc1b66{padding-block:var(--ds-space-050,4px)}._1bsbvbgk{width:4pc}
+._bozgpxbi{padding-inline-start:var(--ds-space-200,1pc)}
+._y4tipxbi{padding-inline-end:var(--ds-space-200,1pc)}

package/dist/cjs/components/team-profile-card/team-containers-skeleton/index.js

@@ -13,11 +13,14 @@ var _react = _interopRequireDefault(require("react"));
 var _compiled = require("@atlaskit/primitives/compiled");
 var _linkedContainerCardSkeleton = require("./linked-container-card-skeleton");
 var styles = {
-  showMoreButtonSkeleton: "_2rko1q77 _1rjc1b66 _1bsbvbgk"
+  showMoreButtonSkeleton: "_2rko1q77 _1rjc1b66 _1bsbvbgk",
+  containerSkeletonWrapper: "_bozgpxbi _y4tipxbi"
 };
 var TeamContainersSkeleton = exports.TeamContainersSkeleton = function TeamContainersSkeleton(_ref) {
   var numberOfContainers = _ref.numberOfContainers;
-  return /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.containerSkeletonWrapper
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
     space: "space.200",
     testId: "profile-card-team-containers-skeleton"
   }, /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
@@ -29,5 +32,5 @@ var TeamContainersSkeleton = exports.TeamContainersSkeleton = function TeamConta
   })), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     backgroundColor: "color.background.neutral",
     xcss: styles.showMoreButtonSkeleton
-  }));
+  })));
 };

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.12.0"
+      packageVersion: "23.13.0"
     }, 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.12.0");
+  headers.append('atl-client-version', "23.13.0");
   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.12.0");
+  headers.append('atl-client-version', "23.13.0");
   return headers;
 };
 export async function getTeamFromAGG(url, teamId, siteId) {

package/dist/es2019/components/team-profile-card/main.compiled.css

@@ -9,13 +9,16 @@
 ._18m915vq{overflow-y:hidden}
 ._18m91wug{overflow-y:auto}
 ._18u01ejb{margin-left:var(--ds-space-300,24px)}
+._18u01wug{margin-left:auto}
 ._18u0pxbi{margin-left:var(--ds-space-200,1pc)}
 ._18u0u2gc{margin-left:var(--ds-space-100,8px)}
 ._19bv1ejb{padding-left:var(--ds-space-300,24px)}
+._19pk1b66{margin-top:var(--ds-space-050,4px)}
 ._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
 ._19pku2gc{margin-top:var(--ds-space-100,8px)}
 ._1bsb1gwv{width:360px}
 ._1bsb1osq{width:100%}
+._1bsb7vkz{width:1pc}
 ._1e0c1txw{display:flex}
 ._1i53muej{border-top-color:var(--ds-border,#091e4224)}
 ._1reo15vq{overflow-x:hidden}
@@ -25,9 +28,11 @@
 ._2hwxu2gc{margin-right:var(--ds-space-100,8px)}
 ._2lx21bp4{flex-direction:column}
 ._4cvr1h6o{align-items:center}
+._4t3i12am{height:50px}
 ._4t3i1ul9{height:30px}
 ._4t3i1wug{height:auto}
 ._4t3i53f4{height:75pt}
+._4t3i7vkz{height:1pc}
 ._5ral1dfr{object-fit:cover}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._c71lx2si{max-height:265px}