@atlaskit/profilecard 23.2.6 → 23.3.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/profilecard
 
+## 23.3.0
+
+### Minor Changes
+
+- [#123898](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/123898)
+  [`3ff6294e62c49`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3ff6294e62c49) -
+  Adding a new Team profile card for Team button
+
 ## 23.2.6
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -47,6 +47,9 @@
         {
             "path": "../../../team-central/give-kudos/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../design-system/heading/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../../design-system/icon/afm-cc/tsconfig.json"
         },

package/afm-jira/tsconfig.json

@@ -47,6 +47,9 @@
 		{
 			"path": "../../../team-central/give-kudos/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/heading/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/icon/afm-jira/tsconfig.json"
 		},

package/afm-post-office/tsconfig.json

@@ -47,6 +47,9 @@
 		{
 			"path": "../../../team-central/give-kudos/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/heading/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/icon/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', "23.2.6");
+  headers.append('atl-client-version', "23.3.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.2.6");
+  headers.append('atl-client-version', "23.3.0");
   return headers;
 };
 function getTeamFromAGG(_x, _x2, _x3) {

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TeamProfileCard", {
+  enumerable: true,
+  get: function get() {
+    return _main.TeamProfileCard;
+  }
+});
+var _main = require("./main");

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

@@ -0,0 +1,32 @@
+
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
+._2rkopd34{border-radius:var(--ds-border-radius-200,8px)}
+._v564nm7n{transition:box-shadow .25s ease-in-out}
+._189ee4h9{border-width:var(--ds-border-width,1px)}
+._1dqonqa1{border-style:solid}
+._1h6dmuej{border-color:var(--ds-border,#091e4224)}._15a5nqa1{border-top-style:solid}
+._18m915vq{overflow-y:hidden}
+._18u0utpp{margin-left:var(--ds-space-150,9pt)}
+._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
+._19pkxy5q{margin-top:var(--ds-space-400,2pc)}
+._1bsb1osq{width:100%}
+._1bsb1w8u{width:80%}
+._1bsb5x59{width:340px}
+._1bsbvbgk{width:4pc}
+._1e0c1txw{display:flex}
+._1i53muej{border-top-color:var(--ds-border,#091e4224)}
+._1reo15vq{overflow-x:hidden}
+._1ul95x59{min-width:340px}
+._2hwxutpp{margin-right:var(--ds-space-150,9pt)}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._4t3i1ul9{height:30px}
+._4t3i1wug{height:auto}
+._4t3ivbgk{height:4pc}
+._5ral1dfr{object-fit:cover}
+._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._c71l53f4{max-height:75pt}
+._kqswstnw{position:absolute}
+._otyrpxbi{margin-bottom:var(--ds-space-200,1pc)}
+._s7n4jp4b{vertical-align:top}
+._uwhke4h9{border-top-width:var(--ds-border-width,1px)}

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

@@ -0,0 +1,115 @@
+/* main.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TeamProfileCard = void 0;
+require("./main.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _avatarGroup = _interopRequireDefault(require("@atlaskit/avatar-group"));
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
+var _peopleTeamsUiPublic = require("@atlaskit/people-teams-ui-public");
+var _compiled = require("@atlaskit/primitives/compiled");
+var styles = {
+  wrapperStyles: "_2rkopd34 _v564nm7n _1reo15vq _18m915vq _189ee4h9 _1dqonqa1 _1h6dmuej _1e0c1txw _2lx21bp4 _1bsb5x59 _1ul95x59 _4t3i1wug",
+  containerStyles: "_otyrpxbi",
+  avatarImageContainerStyles: "_kqswstnw _18u0utpp",
+  avatarImageStyles: "_2rkoiti9 _kqswstnw _18u0utpp _4t3ivbgk _1bsbvbgk",
+  headerImageStyles: "_5ral1dfr _s7n4jp4b _c71l53f4 _1bsb1osq",
+  teamInformationStyles: "_18u0utpp _19pkxy5q _2hwxutpp",
+  viewProfileContainerStyles: "_4cvr1h6o _uwhke4h9 _15a5nqa1 _1i53muej",
+  viewProfileButtonStyles: "_2rkoiti9 _189ee4h9 _1dqonqa1 _1h6dmuej _bfhksm61 _1bsb1w8u _4t3i1ul9 _19pkpxbi"
+};
+var TeamCardWrapper = function TeamCardWrapper(_ref) {
+  var id = _ref.id,
+    children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.wrapperStyles,
+    testId: "team-card-".concat(id)
+  }, children);
+};
+var HeaderImage = function HeaderImage(_ref2) {
+  var srcUrl = _ref2.srcUrl;
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    as: "img",
+    src: srcUrl,
+    xcss: styles.headerImageStyles,
+    testId: "profile-header-image",
+    alt: "team-header-image"
+  });
+};
+var TeamAvatar = function TeamAvatar(_ref3) {
+  var avatarUrl = _ref3.avatarUrl;
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    as: "img",
+    src: avatarUrl,
+    xcss: styles.avatarImageStyles,
+    alt: "team-avatar-image"
+  });
+};
+var TeamProfileCard = exports.TeamProfileCard = function TeamProfileCard(_ref4) {
+  var teamId = _ref4.teamId,
+    displayName = _ref4.displayName,
+    description = _ref4.description,
+    avatarImageUrl = _ref4.avatarImageUrl,
+    headerImageUrl = _ref4.headerImageUrl,
+    memberAvatars = _ref4.memberAvatars,
+    memberCount = _ref4.memberCount,
+    isVerified = _ref4.isVerified,
+    teamProfileUrl = _ref4.teamProfileUrl;
+  return /*#__PURE__*/_react.default.createElement(TeamCardWrapper, {
+    id: teamId
+  }, /*#__PURE__*/_react.default.createElement(HeaderImage, {
+    srcUrl: headerImageUrl
+  }), /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
+    space: "space.150",
+    xcss: styles.containerStyles
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
+    spread: "space-between",
+    alignBlock: "center"
+  }, /*#__PURE__*/_react.default.createElement(TeamAvatar, {
+    avatarUrl: avatarImageUrl
+  })), /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
+    xcss: styles.teamInformationStyles,
+    space: "space.150"
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
+    space: "space.150"
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
+    alignBlock: "center"
+  }, /*#__PURE__*/_react.default.createElement(_heading.default, {
+    size: "small"
+  }, displayName), isVerified && /*#__PURE__*/_react.default.createElement(_peopleTeamsUiPublic.VerifiedTeamIcon, {
+    showTooltip: true
+  })), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+    color: "color.text.subtle"
+  }, /*#__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(_compiled.Inline, null, /*#__PURE__*/_react.default.createElement(_avatarGroup.default, {
+    appearance: "stack",
+    data: memberAvatars
+  })), /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
+    space: "space.050"
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+    color: "color.text.subtle",
+    maxLines: 3
+  }, description))), teamProfileUrl && /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
+    xcss: styles.viewProfileContainerStyles
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Pressable, {
+    onClick: function onClick() {
+      return window.open(teamProfileUrl, '_blank');
+    },
+    xcss: styles.viewProfileButtonStyles,
+    testId: "view-profile-button"
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, {
+    defaultMessage: "View profile",
+    id: "people-and-teams.team-profile-card.view-profile"
+  })))));
+};

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

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mockProfileData = void 0;
+var mockProfileData = exports.mockProfileData = {
+  teamId: '8ee37950-7de7-41ec-aee2-2c02c95949f4',
+  displayName: 'THE SUPER TEAM',
+  description: "Super team's super description - This is a very long line, adding more lines here to test the line limit of 3 that we enforce on the description of the team. In case the description very long, it should display an elipses at the end and hide that content that is overflowing",
+  avatarImageUrl: 'https://test-prod-issue-create.atlassian.net/wiki/download/attachments/35061761/SUP-default?version=1&modificationDate=1739217199215&cacheVersion=1&api=v2',
+  headerImageUrl: 'https://test-prod-issue-create.atlassian.net/rest/api/2/universal_avatar/view/type/project/avatar/10422?size=medium',
+  memberAvatars: [{
+    src: 'https://avatar-management--avatars.us-west-2.prod.public.atl-paas.net/70121:c17bdf1f-39db-4611-a700-2f8c1aff841e/cf4058fd-75f2-4824-8041-c8efa4cc0ea8/128',
+    name: 'Shrutha Kashyap',
+    key: '70121:c17bdf1f-39db-4611-a700-2f8c1aff841e'
+  }, {
+    src: 'https://secure.gravatar.com/avatar/189be88917ebf55b8c24642ca8bb3f38?d=https%3A%2F%2Favatar-management--avatars.us-west-2.prod.public.atl-paas.net%2Fdefault-avatar-3.png',
+    name: 'Confluence Analytics (System)',
+    key: '557058:cbc04d7b-be84-46eb-90e4-e567aa5332c6'
+  }],
+  memberCount: 2,
+  isVerified: true,
+  teamProfileUrl: 'https://test-prod-issue-create.atlassian.net/wiki/people/team/8ee37950-7de7-41ec-aee2-2c02c95949f4'
+};

package/dist/cjs/index.js

@@ -65,6 +65,12 @@ Object.defineProperty(exports, "TeamProfileCardTrigger", {
     return _TeamProfileCardTrigger.default;
   }
 });
+Object.defineProperty(exports, "TeamProfileCardWithContainer", {
+  enumerable: true,
+  get: function get() {
+    return _teamProfileCard.TeamProfileCard;
+  }
+});
 Object.defineProperty(exports, "TeamProfileClient", {
   enumerable: true,
   get: function get() {
@@ -94,6 +100,7 @@ var _ProfileCardClient = _interopRequireDefault(require("./client/ProfileCardCli
 var _TeamProfileCardClient = _interopRequireDefault(require("./client/TeamProfileCardClient"));
 var _UserProfileCardClient = _interopRequireWildcard(require("./client/UserProfileCardClient"));
 var _AgentProfileCard = _interopRequireDefault(require("./components/Agent/AgentProfileCard"));
+var _teamProfileCard = require("./components/team-profile-card");
 var _TeamProfileCardTrigger = _interopRequireDefault(require("./components/Team/TeamProfileCardTrigger"));
 var _ProfileCard = _interopRequireDefault(require("./components/User/ProfileCard"));
 var _ProfileCardResourced = _interopRequireDefault(require("./components/User/ProfileCardResourced"));

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

package/dist/es2019/components/team-profile-card/index.js

@@ -0,0 +1 @@
+export { TeamProfileCard } from './main';

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

@@ -0,0 +1,32 @@
+
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
+._2rkopd34{border-radius:var(--ds-border-radius-200,8px)}
+._v564nm7n{transition:box-shadow .25s ease-in-out}
+._189ee4h9{border-width:var(--ds-border-width,1px)}
+._1dqonqa1{border-style:solid}
+._1h6dmuej{border-color:var(--ds-border,#091e4224)}._15a5nqa1{border-top-style:solid}
+._18m915vq{overflow-y:hidden}
+._18u0utpp{margin-left:var(--ds-space-150,9pt)}
+._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
+._19pkxy5q{margin-top:var(--ds-space-400,2pc)}
+._1bsb1osq{width:100%}
+._1bsb1w8u{width:80%}
+._1bsb5x59{width:340px}
+._1bsbvbgk{width:4pc}
+._1e0c1txw{display:flex}
+._1i53muej{border-top-color:var(--ds-border,#091e4224)}
+._1reo15vq{overflow-x:hidden}
+._1ul95x59{min-width:340px}
+._2hwxutpp{margin-right:var(--ds-space-150,9pt)}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._4t3i1ul9{height:30px}
+._4t3i1wug{height:auto}
+._4t3ivbgk{height:4pc}
+._5ral1dfr{object-fit:cover}
+._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._c71l53f4{max-height:75pt}
+._kqswstnw{position:absolute}
+._otyrpxbi{margin-bottom:var(--ds-space-200,1pc)}
+._s7n4jp4b{vertical-align:top}
+._uwhke4h9{border-top-width:var(--ds-border-width,1px)}

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

@@ -0,0 +1,104 @@
+/* main.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./main.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import AvatarGroup from '@atlaskit/avatar-group';
+import Heading from '@atlaskit/heading';
+import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public';
+import { Box, Inline, Pressable, Stack, Text } from '@atlaskit/primitives/compiled';
+const styles = {
+  wrapperStyles: "_2rkopd34 _v564nm7n _1reo15vq _18m915vq _189ee4h9 _1dqonqa1 _1h6dmuej _1e0c1txw _2lx21bp4 _1bsb5x59 _1ul95x59 _4t3i1wug",
+  containerStyles: "_otyrpxbi",
+  avatarImageContainerStyles: "_kqswstnw _18u0utpp",
+  avatarImageStyles: "_2rkoiti9 _kqswstnw _18u0utpp _4t3ivbgk _1bsbvbgk",
+  headerImageStyles: "_5ral1dfr _s7n4jp4b _c71l53f4 _1bsb1osq",
+  teamInformationStyles: "_18u0utpp _19pkxy5q _2hwxutpp",
+  viewProfileContainerStyles: "_4cvr1h6o _uwhke4h9 _15a5nqa1 _1i53muej",
+  viewProfileButtonStyles: "_2rkoiti9 _189ee4h9 _1dqonqa1 _1h6dmuej _bfhksm61 _1bsb1w8u _4t3i1ul9 _19pkpxbi"
+};
+const TeamCardWrapper = ({
+  id,
+  children
+}) => /*#__PURE__*/React.createElement(Box, {
+  xcss: styles.wrapperStyles,
+  testId: `team-card-${id}`
+}, children);
+const HeaderImage = ({
+  srcUrl
+}) => /*#__PURE__*/React.createElement(Box, {
+  as: "img",
+  src: srcUrl,
+  xcss: styles.headerImageStyles,
+  testId: "profile-header-image",
+  alt: "team-header-image"
+});
+const TeamAvatar = ({
+  avatarUrl
+}) => /*#__PURE__*/React.createElement(Box, {
+  as: "img",
+  src: avatarUrl,
+  xcss: styles.avatarImageStyles,
+  alt: "team-avatar-image"
+});
+export const TeamProfileCard = ({
+  teamId,
+  displayName,
+  description,
+  avatarImageUrl,
+  headerImageUrl,
+  memberAvatars,
+  memberCount,
+  isVerified,
+  teamProfileUrl
+}) => {
+  return /*#__PURE__*/React.createElement(TeamCardWrapper, {
+    id: teamId
+  }, /*#__PURE__*/React.createElement(HeaderImage, {
+    srcUrl: headerImageUrl
+  }), /*#__PURE__*/React.createElement(Stack, {
+    space: "space.150",
+    xcss: styles.containerStyles
+  }, /*#__PURE__*/React.createElement(Inline, {
+    spread: "space-between",
+    alignBlock: "center"
+  }, /*#__PURE__*/React.createElement(TeamAvatar, {
+    avatarUrl: avatarImageUrl
+  })), /*#__PURE__*/React.createElement(Stack, {
+    xcss: styles.teamInformationStyles,
+    space: "space.150"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    space: "space.150"
+  }, /*#__PURE__*/React.createElement(Inline, {
+    alignBlock: "center"
+  }, /*#__PURE__*/React.createElement(Heading, {
+    size: "small"
+  }, displayName), isVerified && /*#__PURE__*/React.createElement(VerifiedTeamIcon, {
+    showTooltip: true
+  })), /*#__PURE__*/React.createElement(Text, {
+    color: "color.text.subtle"
+  }, /*#__PURE__*/React.createElement(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.createElement(Inline, null, /*#__PURE__*/React.createElement(AvatarGroup, {
+    appearance: "stack",
+    data: memberAvatars
+  })), /*#__PURE__*/React.createElement(Stack, {
+    space: "space.050"
+  }, /*#__PURE__*/React.createElement(Text, {
+    color: "color.text.subtle",
+    maxLines: 3
+  }, description))), teamProfileUrl && /*#__PURE__*/React.createElement(Stack, {
+    xcss: styles.viewProfileContainerStyles
+  }, /*#__PURE__*/React.createElement(Pressable, {
+    onClick: () => window.open(teamProfileUrl, '_blank'),
+    xcss: styles.viewProfileButtonStyles,
+    testId: "view-profile-button"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    defaultMessage: "View profile",
+    id: "people-and-teams.team-profile-card.view-profile"
+  })))));
+};

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

@@ -0,0 +1,19 @@
+export const mockProfileData = {
+  teamId: '8ee37950-7de7-41ec-aee2-2c02c95949f4',
+  displayName: 'THE SUPER TEAM',
+  description: "Super team's super description - This is a very long line, adding more lines here to test the line limit of 3 that we enforce on the description of the team. In case the description very long, it should display an elipses at the end and hide that content that is overflowing",
+  avatarImageUrl: 'https://test-prod-issue-create.atlassian.net/wiki/download/attachments/35061761/SUP-default?version=1&modificationDate=1739217199215&cacheVersion=1&api=v2',
+  headerImageUrl: 'https://test-prod-issue-create.atlassian.net/rest/api/2/universal_avatar/view/type/project/avatar/10422?size=medium',
+  memberAvatars: [{
+    src: 'https://avatar-management--avatars.us-west-2.prod.public.atl-paas.net/70121:c17bdf1f-39db-4611-a700-2f8c1aff841e/cf4058fd-75f2-4824-8041-c8efa4cc0ea8/128',
+    name: 'Shrutha Kashyap',
+    key: '70121:c17bdf1f-39db-4611-a700-2f8c1aff841e'
+  }, {
+    src: 'https://secure.gravatar.com/avatar/189be88917ebf55b8c24642ca8bb3f38?d=https%3A%2F%2Favatar-management--avatars.us-west-2.prod.public.atl-paas.net%2Fdefault-avatar-3.png',
+    name: 'Confluence Analytics (System)',
+    key: '557058:cbc04d7b-be84-46eb-90e4-e567aa5332c6'
+  }],
+  memberCount: 2,
+  isVerified: true,
+  teamProfileUrl: 'https://test-prod-issue-create.atlassian.net/wiki/people/team/8ee37950-7de7-41ec-aee2-2c02c95949f4'
+};

package/dist/es2019/index.js

@@ -6,6 +6,7 @@ import TeamProfileClient from './client/TeamProfileCardClient';
 // Note: when generating and updating Flow types in Jira, `UserProfileClient` and `UserProfileCardClient` are the same type
 import UserProfileClient, { modifyResponse } from './client/UserProfileCardClient';
 import AgentProfileCard from './components/Agent/AgentProfileCard';
+import { TeamProfileCard } from './components/team-profile-card';
 import TeamProfileCardTrigger from './components/Team/TeamProfileCardTrigger';
 import ProfileCard from './components/User/ProfileCard';
 import ProfileCardResourced from './components/User/ProfileCardResourced';
@@ -25,4 +26,5 @@ export { ProfileCardClient as ProfileClient, TeamProfileClient, UserProfileClien
 export { DELAY_MS_SHOW, DELAY_MS_HIDE };
 export { AgentProfileCardTrigger } from './components/Agent/AgentProfileCardTrigger';
 export { AgentProfileCardResourced } from './components/Agent/AgentProfileCardResourced';
+export { TeamProfileCard as TeamProfileCardWithContainer };
 export default ProfileCardResourced;

package/dist/es2019/util/analytics.js

@@ -32,7 +32,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/profilecard",
-    packageVersion: "23.2.6",
+    packageVersion: "23.3.0",
     ...attributes,
     firedAt: Math.round(getPageTime())
   }

package/dist/esm/client/getOrgIdForCloudIdFromAGG.js

@@ -4,7 +4,7 @@ import { AGGQuery } from './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.2.6");
+  headers.append('atl-client-version', "23.3.0");
   return headers;
 };
 export function getOrgIdForCloudIdFromAGG(_x, _x2) {

package/dist/esm/client/getTeamFromAGG.js

@@ -57,7 +57,7 @@ export var 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.2.6");
+  headers.append('atl-client-version', "23.3.0");
   return headers;
 };
 export function getTeamFromAGG(_x, _x2, _x3) {

package/dist/esm/components/team-profile-card/index.js

@@ -0,0 +1 @@
+export { TeamProfileCard } from './main';

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

@@ -0,0 +1,32 @@
+
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
+._2rkopd34{border-radius:var(--ds-border-radius-200,8px)}
+._v564nm7n{transition:box-shadow .25s ease-in-out}
+._189ee4h9{border-width:var(--ds-border-width,1px)}
+._1dqonqa1{border-style:solid}
+._1h6dmuej{border-color:var(--ds-border,#091e4224)}._15a5nqa1{border-top-style:solid}
+._18m915vq{overflow-y:hidden}
+._18u0utpp{margin-left:var(--ds-space-150,9pt)}
+._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
+._19pkxy5q{margin-top:var(--ds-space-400,2pc)}
+._1bsb1osq{width:100%}
+._1bsb1w8u{width:80%}
+._1bsb5x59{width:340px}
+._1bsbvbgk{width:4pc}
+._1e0c1txw{display:flex}
+._1i53muej{border-top-color:var(--ds-border,#091e4224)}
+._1reo15vq{overflow-x:hidden}
+._1ul95x59{min-width:340px}
+._2hwxutpp{margin-right:var(--ds-space-150,9pt)}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._4t3i1ul9{height:30px}
+._4t3i1wug{height:auto}
+._4t3ivbgk{height:4pc}
+._5ral1dfr{object-fit:cover}
+._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._c71l53f4{max-height:75pt}
+._kqswstnw{position:absolute}
+._otyrpxbi{margin-bottom:var(--ds-space-200,1pc)}
+._s7n4jp4b{vertical-align:top}
+._uwhke4h9{border-top-width:var(--ds-border-width,1px)}

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

@@ -0,0 +1,108 @@
+/* main.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./main.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import AvatarGroup from '@atlaskit/avatar-group';
+import Heading from '@atlaskit/heading';
+import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public';
+import { Box, Inline, Pressable, Stack, Text } from '@atlaskit/primitives/compiled';
+var styles = {
+  wrapperStyles: "_2rkopd34 _v564nm7n _1reo15vq _18m915vq _189ee4h9 _1dqonqa1 _1h6dmuej _1e0c1txw _2lx21bp4 _1bsb5x59 _1ul95x59 _4t3i1wug",
+  containerStyles: "_otyrpxbi",
+  avatarImageContainerStyles: "_kqswstnw _18u0utpp",
+  avatarImageStyles: "_2rkoiti9 _kqswstnw _18u0utpp _4t3ivbgk _1bsbvbgk",
+  headerImageStyles: "_5ral1dfr _s7n4jp4b _c71l53f4 _1bsb1osq",
+  teamInformationStyles: "_18u0utpp _19pkxy5q _2hwxutpp",
+  viewProfileContainerStyles: "_4cvr1h6o _uwhke4h9 _15a5nqa1 _1i53muej",
+  viewProfileButtonStyles: "_2rkoiti9 _189ee4h9 _1dqonqa1 _1h6dmuej _bfhksm61 _1bsb1w8u _4t3i1ul9 _19pkpxbi"
+};
+var TeamCardWrapper = function TeamCardWrapper(_ref) {
+  var id = _ref.id,
+    children = _ref.children;
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.wrapperStyles,
+    testId: "team-card-".concat(id)
+  }, children);
+};
+var HeaderImage = function HeaderImage(_ref2) {
+  var srcUrl = _ref2.srcUrl;
+  return /*#__PURE__*/React.createElement(Box, {
+    as: "img",
+    src: srcUrl,
+    xcss: styles.headerImageStyles,
+    testId: "profile-header-image",
+    alt: "team-header-image"
+  });
+};
+var TeamAvatar = function TeamAvatar(_ref3) {
+  var avatarUrl = _ref3.avatarUrl;
+  return /*#__PURE__*/React.createElement(Box, {
+    as: "img",
+    src: avatarUrl,
+    xcss: styles.avatarImageStyles,
+    alt: "team-avatar-image"
+  });
+};
+export var TeamProfileCard = function TeamProfileCard(_ref4) {
+  var teamId = _ref4.teamId,
+    displayName = _ref4.displayName,
+    description = _ref4.description,
+    avatarImageUrl = _ref4.avatarImageUrl,
+    headerImageUrl = _ref4.headerImageUrl,
+    memberAvatars = _ref4.memberAvatars,
+    memberCount = _ref4.memberCount,
+    isVerified = _ref4.isVerified,
+    teamProfileUrl = _ref4.teamProfileUrl;
+  return /*#__PURE__*/React.createElement(TeamCardWrapper, {
+    id: teamId
+  }, /*#__PURE__*/React.createElement(HeaderImage, {
+    srcUrl: headerImageUrl
+  }), /*#__PURE__*/React.createElement(Stack, {
+    space: "space.150",
+    xcss: styles.containerStyles
+  }, /*#__PURE__*/React.createElement(Inline, {
+    spread: "space-between",
+    alignBlock: "center"
+  }, /*#__PURE__*/React.createElement(TeamAvatar, {
+    avatarUrl: avatarImageUrl
+  })), /*#__PURE__*/React.createElement(Stack, {
+    xcss: styles.teamInformationStyles,
+    space: "space.150"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    space: "space.150"
+  }, /*#__PURE__*/React.createElement(Inline, {
+    alignBlock: "center"
+  }, /*#__PURE__*/React.createElement(Heading, {
+    size: "small"
+  }, displayName), isVerified && /*#__PURE__*/React.createElement(VerifiedTeamIcon, {
+    showTooltip: true
+  })), /*#__PURE__*/React.createElement(Text, {
+    color: "color.text.subtle"
+  }, /*#__PURE__*/React.createElement(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.createElement(Inline, null, /*#__PURE__*/React.createElement(AvatarGroup, {
+    appearance: "stack",
+    data: memberAvatars
+  })), /*#__PURE__*/React.createElement(Stack, {
+    space: "space.050"
+  }, /*#__PURE__*/React.createElement(Text, {
+    color: "color.text.subtle",
+    maxLines: 3
+  }, description))), teamProfileUrl && /*#__PURE__*/React.createElement(Stack, {
+    xcss: styles.viewProfileContainerStyles
+  }, /*#__PURE__*/React.createElement(Pressable, {
+    onClick: function onClick() {
+      return window.open(teamProfileUrl, '_blank');
+    },
+    xcss: styles.viewProfileButtonStyles,
+    testId: "view-profile-button"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    defaultMessage: "View profile",
+    id: "people-and-teams.team-profile-card.view-profile"
+  })))));
+};

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

@@ -0,0 +1,19 @@
+export var mockProfileData = {
+  teamId: '8ee37950-7de7-41ec-aee2-2c02c95949f4',
+  displayName: 'THE SUPER TEAM',
+  description: "Super team's super description - This is a very long line, adding more lines here to test the line limit of 3 that we enforce on the description of the team. In case the description very long, it should display an elipses at the end and hide that content that is overflowing",
+  avatarImageUrl: 'https://test-prod-issue-create.atlassian.net/wiki/download/attachments/35061761/SUP-default?version=1&modificationDate=1739217199215&cacheVersion=1&api=v2',
+  headerImageUrl: 'https://test-prod-issue-create.atlassian.net/rest/api/2/universal_avatar/view/type/project/avatar/10422?size=medium',
+  memberAvatars: [{
+    src: 'https://avatar-management--avatars.us-west-2.prod.public.atl-paas.net/70121:c17bdf1f-39db-4611-a700-2f8c1aff841e/cf4058fd-75f2-4824-8041-c8efa4cc0ea8/128',
+    name: 'Shrutha Kashyap',
+    key: '70121:c17bdf1f-39db-4611-a700-2f8c1aff841e'
+  }, {
+    src: 'https://secure.gravatar.com/avatar/189be88917ebf55b8c24642ca8bb3f38?d=https%3A%2F%2Favatar-management--avatars.us-west-2.prod.public.atl-paas.net%2Fdefault-avatar-3.png',
+    name: 'Confluence Analytics (System)',
+    key: '557058:cbc04d7b-be84-46eb-90e4-e567aa5332c6'
+  }],
+  memberCount: 2,
+  isVerified: true,
+  teamProfileUrl: 'https://test-prod-issue-create.atlassian.net/wiki/people/team/8ee37950-7de7-41ec-aee2-2c02c95949f4'
+};

package/dist/esm/index.js

@@ -6,6 +6,7 @@ import TeamProfileClient from './client/TeamProfileCardClient';
 // Note: when generating and updating Flow types in Jira, `UserProfileClient` and `UserProfileCardClient` are the same type
 import UserProfileClient, { modifyResponse } from './client/UserProfileCardClient';
 import AgentProfileCard from './components/Agent/AgentProfileCard';
+import { TeamProfileCard } from './components/team-profile-card';
 import TeamProfileCardTrigger from './components/Team/TeamProfileCardTrigger';
 import ProfileCard from './components/User/ProfileCard';
 import ProfileCardResourced from './components/User/ProfileCardResourced';
@@ -25,4 +26,5 @@ export { ProfileCardClient as ProfileClient, TeamProfileClient, UserProfileClien
 export { DELAY_MS_SHOW, DELAY_MS_HIDE };
 export { AgentProfileCardTrigger } from './components/Agent/AgentProfileCardTrigger';
 export { AgentProfileCardResourced } from './components/Agent/AgentProfileCardResourced';
+export { TeamProfileCard as TeamProfileCardWithContainer };
 export default ProfileCardResourced;

package/dist/esm/util/analytics.js

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

package/dist/types/components/team-profile-card/index.d.ts

@@ -0,0 +1 @@
+export { TeamProfileCard } from './main';

package/dist/types/components/team-profile-card/main.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { type AvatarProps } from '@atlaskit/avatar-group';
+interface TeamProfileCardProps {
+    teamId: string;
+    displayName: string;
+    description: string;
+    avatarImageUrl: string;
+    headerImageUrl: string;
+    memberAvatars: AvatarProps[];
+    memberCount: number;
+    isVerified?: boolean;
+    teamProfileUrl?: string;
+}
+export declare const TeamProfileCard: ({ teamId, displayName, description, avatarImageUrl, headerImageUrl, memberAvatars, memberCount, isVerified, teamProfileUrl, }: TeamProfileCardProps) => JSX.Element;
+export {};

package/dist/types/components/team-profile-card/mocks.d.ts

@@ -0,0 +1,15 @@
+export declare const mockProfileData: {
+    teamId: string;
+    displayName: string;
+    description: string;
+    avatarImageUrl: string;
+    headerImageUrl: string;
+    memberAvatars: {
+        src: string;
+        name: string;
+        key: string;
+    }[];
+    memberCount: number;
+    isVerified: boolean;
+    teamProfileUrl: string;
+};

package/dist/types/index.d.ts

@@ -2,6 +2,7 @@ import ProfileCardClient from './client/ProfileCardClient';
 import TeamProfileClient from './client/TeamProfileCardClient';
 import UserProfileClient, { modifyResponse } from './client/UserProfileCardClient';
 import AgentProfileCard from './components/Agent/AgentProfileCard';
+import { TeamProfileCard } from './components/team-profile-card';
 import TeamProfileCardTrigger from './components/Team/TeamProfileCardTrigger';
 import ProfileCard from './components/User/ProfileCard';
 import ProfileCardResourced from './components/User/ProfileCardResourced';
@@ -19,4 +20,5 @@ export { ProfileCardClient as ProfileClient, TeamProfileClient, UserProfileClien
 export { DELAY_MS_SHOW, DELAY_MS_HIDE };
 export { AgentProfileCardTrigger } from './components/Agent/AgentProfileCardTrigger';
 export { AgentProfileCardResourced } from './components/Agent/AgentProfileCardResourced';
+export { TeamProfileCard as TeamProfileCardWithContainer };
 export default ProfileCardResourced;

package/dist/types-ts4.5/components/team-profile-card/index.d.ts

@@ -0,0 +1 @@
+export { TeamProfileCard } from './main';

package/dist/types-ts4.5/components/team-profile-card/main.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { type AvatarProps } from '@atlaskit/avatar-group';
+interface TeamProfileCardProps {
+    teamId: string;
+    displayName: string;
+    description: string;
+    avatarImageUrl: string;
+    headerImageUrl: string;
+    memberAvatars: AvatarProps[];
+    memberCount: number;
+    isVerified?: boolean;
+    teamProfileUrl?: string;
+}
+export declare const TeamProfileCard: ({ teamId, displayName, description, avatarImageUrl, headerImageUrl, memberAvatars, memberCount, isVerified, teamProfileUrl, }: TeamProfileCardProps) => JSX.Element;
+export {};

package/dist/types-ts4.5/components/team-profile-card/mocks.d.ts

@@ -0,0 +1,15 @@
+export declare const mockProfileData: {
+    teamId: string;
+    displayName: string;
+    description: string;
+    avatarImageUrl: string;
+    headerImageUrl: string;
+    memberAvatars: {
+        src: string;
+        name: string;
+        key: string;
+    }[];
+    memberCount: number;
+    isVerified: boolean;
+    teamProfileUrl: string;
+};

package/dist/types-ts4.5/index.d.ts

@@ -2,6 +2,7 @@ import ProfileCardClient from './client/ProfileCardClient';
 import TeamProfileClient from './client/TeamProfileCardClient';
 import UserProfileClient, { modifyResponse } from './client/UserProfileCardClient';
 import AgentProfileCard from './components/Agent/AgentProfileCard';
+import { TeamProfileCard } from './components/team-profile-card';
 import TeamProfileCardTrigger from './components/Team/TeamProfileCardTrigger';
 import ProfileCard from './components/User/ProfileCard';
 import ProfileCardResourced from './components/User/ProfileCardResourced';
@@ -19,4 +20,5 @@ export { ProfileCardClient as ProfileClient, TeamProfileClient, UserProfileClien
 export { DELAY_MS_SHOW, DELAY_MS_HIDE };
 export { AgentProfileCardTrigger } from './components/Agent/AgentProfileCardTrigger';
 export { AgentProfileCardResourced } from './components/Agent/AgentProfileCardResourced';
+export { TeamProfileCard as TeamProfileCardWithContainer };
 export default ProfileCardResourced;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "23.2.6",
+	"version": "23.3.0",
 	"description": "A React component to display a card with user information.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -60,6 +60,7 @@
 		"@atlaskit/empty-state": "^9.0.0",
 		"@atlaskit/focus-ring": "^3.0.0",
 		"@atlaskit/give-kudos": "^4.0.0",
+		"@atlaskit/heading": "^5.1.0",
 		"@atlaskit/icon": "^25.0.0",
 		"@atlaskit/lozenge": "^12.2.0",
 		"@atlaskit/menu": "^3.1.0",