@atlaskit/profilecard 24.21.2 → 24.21.4

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/profilecard
 
+## 24.21.4
+
+### Patch Changes
+
+- [`33e177c779f4a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/33e177c779f4a) -
+  [ux] Added fixes for archive team, hide actions, alignment fix on kebab menu in Team header
+
+## 24.21.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 24.21.2
 
 ### Patch Changes

package/afm-jira/tsconfig.json

@@ -3,7 +3,7 @@
 	"compilerOptions": {
 		"declaration": true,
 		"target": "es5",
-		"outDir": "../../../../../tsDist/@atlaskit__profilecard/app",
+		"outDir": "../../../../../jira/tsDist/@atlaskit__profilecard/app",
 		"rootDir": "../",
 		"composite": true
 	},

package/dist/cjs/client/getTeamFromAGG.js

@@ -47,7 +47,7 @@ var convertTeam = exports.convertTeam = function convertTeam(result) {
 };
 
 // indented so it's
-var TEAM_FRAGMENT = "\n      id\n      displayName\n      description\n      smallHeaderImageUrl\n      largeHeaderImageUrl\n      smallAvatarImageUrl\n      largeAvatarImageUrl\n\t  isVerified\n      members {\n        nodes {\n          member {\n            accountId\n            name\n            picture\n          }\n        }\n      }\n";
+var TEAM_FRAGMENT = "\n      id\n      displayName\n      description\n      smallHeaderImageUrl\n      largeHeaderImageUrl\n      smallAvatarImageUrl\n      largeAvatarImageUrl\n\t  isVerified\n\t  state\n      members {\n        nodes {\n          member {\n            accountId\n            name\n            picture\n          }\n        }\n      }\n";
 
 // We alias the team node to always be team
 var GATEWAY_QUERY_V2 = exports.GATEWAY_QUERY_V2 = "query TeamCard($teamId: ID!, $siteId: String!) {\n  Team: team {\n    team: teamV2(id: $teamId, siteId: $siteId) @optIn(to: \"Team-v2\") {\n      ".concat(TEAM_FRAGMENT, "\n    }\n  }\n}");

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

@@ -15,7 +15,9 @@ var _reactIntlNext = require("react-intl-next");
 var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
 var _avatarGroup = _interopRequireDefault(require("@atlaskit/avatar-group"));
 var _new = _interopRequireWildcard(require("@atlaskit/button/new"));
+var _featureGateJsClient = _interopRequireDefault(require("@atlaskit/feature-gate-js-client"));
 var _showMoreHorizontalMore = _interopRequireDefault(require("@atlaskit/icon/core/migration/show-more-horizontal--more"));
+var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 var _menu = require("@atlaskit/menu");
 var _verifiedTeamIcon = require("@atlaskit/people-teams-ui-public/verified-team-icon");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -71,6 +73,7 @@ var TeamMembers = function TeamMembers(_ref) {
   var analytics = _ref.analytics,
     generateUserLink = _ref.generateUserLink,
     members = _ref.members,
+    isArchived = _ref.isArchived,
     onUserClick = _ref.onUserClick,
     includingYou = _ref.includingYou,
     analyticsNext = _ref.analyticsNext,
@@ -123,7 +126,10 @@ 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, {
+  }))), isArchived && /*#__PURE__*/_react.default.createElement(_TeamCard.ArchiveLozengeWrapper, null, /*#__PURE__*/_react.default.createElement(_lozenge.default, {
+    appearance: "default",
+    isBold: true
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.archivedLozenge))), members && members.length > 0 && /*#__PURE__*/_react.default.createElement(_TeamCard.AvatarSection, null, /*#__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);
@@ -302,12 +308,14 @@ var TeamProfilecardContent = function TeamProfilecardContent(_ref5) {
     viewProfileLink = _ref5.viewProfileLink,
     viewProfileOnClick = _ref5.viewProfileOnClick,
     isTriggeredByKeyboard = _ref5.isTriggeredByKeyboard;
+  var newTeamProfileEnabled = _featureGateJsClient.default.getExperimentValue('new_team_profile', 'isEnabled', false);
+  var isTeamArchived = team.state === 'DISBANDED' && (0, _platformFeatureFlags.fg)('legion-enable-archive-teams') && newTeamProfileEnabled;
   var allActions = [{
     label: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.teamViewProfile),
     link: viewProfileLink,
     callback: viewProfileOnClick,
     id: 'view-profile'
-  }].concat((0, _toConsumableArray2.default)(actions || []));
+  }].concat((0, _toConsumableArray2.default)(isTeamArchived ? [] : actions || []));
   var includingYou = team.members && team.members.some(function (member) {
     return member.id === viewingUserId;
   });
@@ -345,13 +353,15 @@ var TeamProfilecardContent = function TeamProfilecardContent(_ref5) {
     testId: "team-profilecard"
   }, /*#__PURE__*/_react.default.createElement(_TeamTrigger.CardHeader, {
     image: team.largeHeaderImageUrl || team.smallHeaderImageUrl,
-    label: team.displayName
+    label: team.displayName,
+    isDisabled: isTeamArchived
   }), /*#__PURE__*/_react.default.createElement(_TeamTrigger.CardContent, null, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
     content: team.displayName
   }, /*#__PURE__*/_react.default.createElement(_compiled.Inline, null, /*#__PURE__*/_react.default.createElement(_TeamCard.TeamName, null, team.displayName), team.isVerified && /*#__PURE__*/_react.default.createElement(_verifiedTeamIcon.VerifiedTeamIcon, null))), /*#__PURE__*/_react.default.createElement(TeamMembers, {
     analytics: analytics,
     analyticsNext: analyticsNext,
     members: team.members,
+    isArchived: isTeamArchived,
     generateUserLink: generateUserLink,
     includingYou: includingYou,
     onUserClick: onUserClick,

package/dist/cjs/messages.js

@@ -186,6 +186,11 @@ var messages = (0, _reactIntlNext.defineMessages)({
     id: 'pt.team.profile-card.members.more-icon-label',
     defaultMessage: '+{count} more {count, plural, one {members} other {members}}',
     description: 'Label for the "more members" indicator in the members section of the team profile card'
+  },
+  archivedLozenge: {
+    id: 'pt.team-profile-card.archived-lozenge',
+    defaultMessage: 'Archived',
+    description: 'Lozenge to indicate that a team is archived'
   }
 });
 var _default = exports.default = messages;

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

@@ -10,5 +10,6 @@
 ._4t3i1qr7{height:8pc}
 ._4t3i1wug{height:auto}
 ._5ral1dfr{object-fit:cover}
+._kdam7g3v{filter:grayscale(100%)}
 ._kqswh2mm{position:relative}
 ._qrwq12b0{border-top-right-radius:var(--ds-radius-small,4px)}

package/dist/cjs/styled/CoverImage.js

@@ -9,13 +9,15 @@ exports.CoverImage = void 0;
 require("./CoverImage.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
+var _css = require("@atlaskit/css");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
   container: "_1reo15vq _18m915vq _1bsb1osq _4t3i1qr7 _kqswh2mm _13li12b0 _qrwq12b0 _1e0c1txw _1bah1h6o _4cvr1h6o",
   image: "_1bsbnklw _4t3i1wug",
-  imageNext: "_4t3i1osq _5ral1dfr"
+  imageNext: "_4t3i1osq _5ral1dfr",
+  grayoutImage: "_kdam7g3v"
 };
 
 /**
@@ -24,7 +26,8 @@ var styles = {
 var CoverImage = exports.CoverImage = function CoverImage(_ref) {
   var src = _ref.src,
     _ref$alt = _ref.alt,
-    alt = _ref$alt === void 0 ? '' : _ref$alt;
+    alt = _ref$alt === void 0 ? '' : _ref$alt,
+    isDisabled = _ref.isDisabled;
   var containerRef = (0, _react.useRef)(null);
   var imgRef = (0, _react.useRef)(null);
   return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
@@ -36,6 +39,6 @@ var CoverImage = exports.CoverImage = function CoverImage(_ref) {
     ref: imgRef,
     src: src,
     alt: alt,
-    xcss: (0, _platformFeatureFlags.fg)('cover-header-image-team-profilecard') ? styles.imageNext : styles.image
+    xcss: (0, _css.cx)((0, _platformFeatureFlags.fg)('cover-header-image-team-profilecard') ? styles.imageNext : styles.image, isDisabled && styles.grayoutImage)
   }));
 };

package/dist/cjs/styled/TeamCard.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WrappedButton = exports.TeamName = exports.TeamForbiddenErrorStateWrapper = exports.MoreButton = exports.MemberCount = exports.DescriptionWrapper = exports.Description = exports.AvatarSection = exports.ActionButtons = exports.AccessLockSVGWrapper = void 0;
+exports.WrappedButton = exports.TeamName = exports.TeamForbiddenErrorStateWrapper = exports.MoreButton = exports.MemberCount = exports.DescriptionWrapper = exports.Description = exports.AvatarSection = exports.ArchiveLozengeWrapper = exports.ActionButtons = exports.AccessLockSVGWrapper = void 0;
 require("./TeamCard.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -25,7 +25,8 @@ var styles = {
   actionbuttons: "_1bsb1osq _1e0c1txw _1bah1yb4 _19pk1ejb _2hwx10v4 _otyridpf _18u0x0bf",
   wrappedbutton: "_i0dlidpf _16jlkb7n _18u0u2gc",
   morebutton: "_18u0u2gc",
-  accesslocksvgwrapper: "_otyr1ejb"
+  accesslocksvgwrapper: "_otyr1ejb",
+  archiveLozengeWrapper: "_19pk1b66"
 };
 var TeamForbiddenErrorStateWrapper = exports.TeamForbiddenErrorStateWrapper = function TeamForbiddenErrorStateWrapper(props) {
   return /*#__PURE__*/_react.default.createElement(_compiled.Box, (0, _extends2.default)({
@@ -85,4 +86,9 @@ var AccessLockSVGWrapper = exports.AccessLockSVGWrapper = function AccessLockSVG
   return /*#__PURE__*/_react.default.createElement(_compiled.Box, (0, _extends2.default)({
     xcss: (0, _css.cx)(styles.accesslocksvgwrapper)
   }, props));
+};
+var ArchiveLozengeWrapper = exports.ArchiveLozengeWrapper = function ArchiveLozengeWrapper(props) {
+  return /*#__PURE__*/_react.default.createElement(_compiled.Inline, (0, _extends2.default)({
+    xcss: (0, _css.cx)(styles.archiveLozengeWrapper)
+  }, props));
 };

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

@@ -9,6 +9,7 @@
 ._2lx21bp4{flex-direction:column}
 ._4t3i1qr7{height:8pc}
 ._ca0q1ejb{padding-top:var(--ds-space-300,24px)}
+._kdam7g3v{filter:grayscale(100%)}
 ._kqswh2mm{position:relative}
 ._n3td1ejb{padding-bottom:var(--ds-space-300,24px)}
 ._otyr1jfw{margin-bottom:var(--ds-space-500,40px)}

package/dist/cjs/styled/TeamTrigger.js

@@ -18,7 +18,8 @@ var styles = {
   cardwrapper: "_2rko12b0 _1bsbnklw _kqswh2mm",
   cardheader: "_4t3i1qr7 _1bsb1osq",
   cardcontent: "_1e0c1txw _2lx21bp4 _ca0q1ejb _u5f31ejb _n3td1ejb _19bv1ejb _1tke1l8a",
-  loadingwrapper: "_y3gn1h6o _19pk1jfw _otyr1jfw"
+  loadingwrapper: "_y3gn1h6o _19pk1jfw _otyr1jfw",
+  grayoutImage: "_kdam7g3v"
 };
 var CardTriggerWrapper = exports.CardTriggerWrapper = function CardTriggerWrapper() {
   return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
@@ -37,13 +38,15 @@ var CardWrapper = exports.CardWrapper = function CardWrapper(_ref) {
 var CardHeader = exports.CardHeader = function CardHeader(_ref2) {
   var image = _ref2.image,
     isLoading = _ref2.isLoading,
-    label = _ref2.label;
+    label = _ref2.label,
+    isDisabled = _ref2.isDisabled;
   return isLoading || !image ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    xcss: (0, _css.cx)(styles.cardheader),
+    xcss: (0, _css.cx)(styles.cardheader, isDisabled && styles.grayoutImage),
     backgroundColor: "color.background.neutral"
   }) : /*#__PURE__*/_react.default.createElement(_CoverImage.CoverImage, {
     alt: label || '',
-    src: image
+    src: image,
+    isDisabled: isDisabled
   });
 };
 var CardContent = exports.CardContent = function CardContent(props) {

package/dist/es2019/client/getTeamFromAGG.js

@@ -44,6 +44,7 @@ const TEAM_FRAGMENT = `
       smallAvatarImageUrl
       largeAvatarImageUrl
 	  isVerified
+	  state
       members {
         nodes {
           member {

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

@@ -4,7 +4,9 @@ import { FormattedMessage, useIntl } from 'react-intl-next';
 import Avatar from '@atlaskit/avatar';
 import AvatarGroup from '@atlaskit/avatar-group';
 import Button, { IconButton, LinkButton } from '@atlaskit/button/new';
+import FeatureGates from '@atlaskit/feature-gate-js-client';
 import MoreIcon from '@atlaskit/icon/core/migration/show-more-horizontal--more';
+import Lozenge from '@atlaskit/lozenge';
 import { LinkItem, MenuGroup } from '@atlaskit/menu';
 import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -15,7 +17,7 @@ import Tooltip from '@atlaskit/tooltip';
 import messages from '../../messages';
 import { AnimatedKudosButton, AnimationWrapper, KudosBlobAnimation } from '../../styled/Card';
 import { ErrorWrapper, TeamErrorText } from '../../styled/Error';
-import { ActionButtons, AvatarSection, Description, DescriptionWrapper, MemberCount, MoreButton, TeamName, WrappedButton } from '../../styled/TeamCard';
+import { ActionButtons, ArchiveLozengeWrapper, AvatarSection, Description, DescriptionWrapper, MemberCount, MoreButton, TeamName, WrappedButton } from '../../styled/TeamCard';
 import { CardContent, CardHeader, CardWrapper } from '../../styled/TeamTrigger';
 import { actionClicked, errorRetryClicked, moreActionsClicked, moreMembersClicked, PACKAGE_META_DATA, profileCardRendered, teamAvatarClicked } from '../../util/analytics';
 import { isBasicClick } from '../../util/click';
@@ -54,6 +56,7 @@ const TeamMembers = ({
   analytics,
   generateUserLink,
   members,
+  isArchived,
   onUserClick,
   includingYou,
   analyticsNext,
@@ -107,7 +110,10 @@ const TeamMembers = ({
     values: {
       count
     }
-  }))), members && members.length > 0 && /*#__PURE__*/React.createElement(AvatarSection, null, /*#__PURE__*/React.createElement(AvatarGroup, {
+  }))), isArchived && /*#__PURE__*/React.createElement(ArchiveLozengeWrapper, null, /*#__PURE__*/React.createElement(Lozenge, {
+    appearance: "default",
+    isBold: true
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.archivedLozenge))), members && members.length > 0 && /*#__PURE__*/React.createElement(AvatarSection, null, /*#__PURE__*/React.createElement(AvatarGroup, {
     appearance: "stack",
     data: members.map((member, index) => {
       const href = generateUserLink === null || generateUserLink === void 0 ? void 0 : generateUserLink(member.id);
@@ -266,12 +272,14 @@ const TeamProfilecardContent = ({
   viewProfileOnClick,
   isTriggeredByKeyboard
 }) => {
+  const newTeamProfileEnabled = FeatureGates.getExperimentValue('new_team_profile', 'isEnabled', false);
+  const isTeamArchived = team.state === 'DISBANDED' && fg('legion-enable-archive-teams') && newTeamProfileEnabled;
   const allActions = [{
     label: /*#__PURE__*/React.createElement(FormattedMessage, messages.teamViewProfile),
     link: viewProfileLink,
     callback: viewProfileOnClick,
     id: 'view-profile'
-  }, ...(actions || [])];
+  }, ...(isTeamArchived ? [] : actions || [])];
   const includingYou = team.members && team.members.some(member => member.id === viewingUserId);
   useEffect(() => {
     if (fg('ptc-enable-profile-card-analytics-refactor')) {
@@ -308,13 +316,15 @@ const TeamProfilecardContent = ({
     testId: "team-profilecard"
   }, /*#__PURE__*/React.createElement(CardHeader, {
     image: team.largeHeaderImageUrl || team.smallHeaderImageUrl,
-    label: team.displayName
+    label: team.displayName,
+    isDisabled: isTeamArchived
   }), /*#__PURE__*/React.createElement(CardContent, null, /*#__PURE__*/React.createElement(Tooltip, {
     content: team.displayName
   }, /*#__PURE__*/React.createElement(Inline, null, /*#__PURE__*/React.createElement(TeamName, null, team.displayName), team.isVerified && /*#__PURE__*/React.createElement(VerifiedTeamIcon, null))), /*#__PURE__*/React.createElement(TeamMembers, {
     analytics: analytics,
     analyticsNext: analyticsNext,
     members: team.members,
+    isArchived: isTeamArchived,
     generateUserLink: generateUserLink,
     includingYou: includingYou,
     onUserClick: onUserClick,

package/dist/es2019/messages.js

@@ -180,6 +180,11 @@ const messages = defineMessages({
     id: 'pt.team.profile-card.members.more-icon-label',
     defaultMessage: '+{count} more {count, plural, one {members} other {members}}',
     description: 'Label for the "more members" indicator in the members section of the team profile card'
+  },
+  archivedLozenge: {
+    id: 'pt.team-profile-card.archived-lozenge',
+    defaultMessage: 'Archived',
+    description: 'Lozenge to indicate that a team is archived'
   }
 });
 export default messages;

package/dist/es2019/styled/CoverImage.compiled.css

@@ -10,5 +10,6 @@
 ._4t3i1qr7{height:8pc}
 ._4t3i1wug{height:auto}
 ._5ral1dfr{object-fit:cover}
+._kdam7g3v{filter:grayscale(100%)}
 ._kqswh2mm{position:relative}
 ._qrwq12b0{border-top-right-radius:var(--ds-radius-small,4px)}

package/dist/es2019/styled/CoverImage.js

@@ -2,12 +2,14 @@
 import "./CoverImage.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useRef } from 'react';
+import { cx } from '@atlaskit/css';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 const styles = {
   container: "_1reo15vq _18m915vq _1bsb1osq _4t3i1qr7 _kqswh2mm _13li12b0 _qrwq12b0 _1e0c1txw _1bah1h6o _4cvr1h6o",
   image: "_1bsbnklw _4t3i1wug",
-  imageNext: "_4t3i1osq _5ral1dfr"
+  imageNext: "_4t3i1osq _5ral1dfr",
+  grayoutImage: "_kdam7g3v"
 };
 
 /**
@@ -15,7 +17,8 @@ const styles = {
  */
 export const CoverImage = ({
   src,
-  alt = ''
+  alt = '',
+  isDisabled
 }) => {
   const containerRef = useRef(null);
   const imgRef = useRef(null);
@@ -28,6 +31,6 @@ export const CoverImage = ({
     ref: imgRef,
     src: src,
     alt: alt,
-    xcss: fg('cover-header-image-team-profilecard') ? styles.imageNext : styles.image
+    xcss: cx(fg('cover-header-image-team-profilecard') ? styles.imageNext : styles.image, isDisabled && styles.grayoutImage)
   }));
 };

package/dist/es2019/styled/TeamCard.js

@@ -6,7 +6,7 @@ import React from 'react';
 import { cx } from '@atlaskit/css';
 import Heading from '@atlaskit/heading';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Box, Text } from '@atlaskit/primitives/compiled';
+import { Box, Inline, Text } from '@atlaskit/primitives/compiled';
 import { N200 } from '@atlaskit/theme/colors';
 const styles = {
   teamforbiddenerrorstatewrapper: "_1bsbnklw _kqswh2mm",
@@ -18,7 +18,8 @@ const styles = {
   actionbuttons: "_1bsb1osq _1e0c1txw _1bah1yb4 _19pk1ejb _2hwx10v4 _otyridpf _18u0x0bf",
   wrappedbutton: "_i0dlidpf _16jlkb7n _18u0u2gc",
   morebutton: "_18u0u2gc",
-  accesslocksvgwrapper: "_otyr1ejb"
+  accesslocksvgwrapper: "_otyr1ejb",
+  archiveLozengeWrapper: "_19pk1b66"
 };
 export const TeamForbiddenErrorStateWrapper = props => /*#__PURE__*/React.createElement(Box, _extends({
   xcss: cx(styles.teamforbiddenerrorstatewrapper)
@@ -58,4 +59,7 @@ export const MoreButton = props => /*#__PURE__*/React.createElement(Box, _extend
 }, props));
 export const AccessLockSVGWrapper = props => /*#__PURE__*/React.createElement(Box, _extends({
   xcss: cx(styles.accesslocksvgwrapper)
+}, props));
+export const ArchiveLozengeWrapper = props => /*#__PURE__*/React.createElement(Inline, _extends({
+  xcss: cx(styles.archiveLozengeWrapper)
 }, props));

package/dist/es2019/styled/TeamTrigger.compiled.css

@@ -9,6 +9,7 @@
 ._2lx21bp4{flex-direction:column}
 ._4t3i1qr7{height:8pc}
 ._ca0q1ejb{padding-top:var(--ds-space-300,24px)}
+._kdam7g3v{filter:grayscale(100%)}
 ._kqswh2mm{position:relative}
 ._n3td1ejb{padding-bottom:var(--ds-space-300,24px)}
 ._otyr1jfw{margin-bottom:var(--ds-space-500,40px)}

package/dist/es2019/styled/TeamTrigger.js

@@ -11,7 +11,8 @@ const styles = {
   cardwrapper: "_2rko12b0 _1bsbnklw _kqswh2mm",
   cardheader: "_4t3i1qr7 _1bsb1osq",
   cardcontent: "_1e0c1txw _2lx21bp4 _ca0q1ejb _u5f31ejb _n3td1ejb _19bv1ejb _1tke1l8a",
-  loadingwrapper: "_y3gn1h6o _19pk1jfw _otyr1jfw"
+  loadingwrapper: "_y3gn1h6o _19pk1jfw _otyr1jfw",
+  grayoutImage: "_kdam7g3v"
 };
 export const CardTriggerWrapper = () => /*#__PURE__*/React.createElement(Box, {
   xcss: cx(styles.cardtriggerwrapper)
@@ -27,13 +28,15 @@ export const CardWrapper = ({
 export const CardHeader = ({
   image,
   isLoading,
-  label
+  label,
+  isDisabled
 }) => isLoading || !image ? /*#__PURE__*/React.createElement(Box, {
-  xcss: cx(styles.cardheader),
+  xcss: cx(styles.cardheader, isDisabled && styles.grayoutImage),
   backgroundColor: "color.background.neutral"
 }) : /*#__PURE__*/React.createElement(CoverImage, {
   alt: label || '',
-  src: image
+  src: image,
+  isDisabled: isDisabled
 });
 export const CardContent = props => /*#__PURE__*/React.createElement(Box, _extends({
   xcss: cx(styles.cardcontent)

package/dist/esm/client/getTeamFromAGG.js

@@ -40,7 +40,7 @@ export var convertTeam = function convertTeam(result) {
 };
 
 // indented so it's
-var TEAM_FRAGMENT = "\n      id\n      displayName\n      description\n      smallHeaderImageUrl\n      largeHeaderImageUrl\n      smallAvatarImageUrl\n      largeAvatarImageUrl\n\t  isVerified\n      members {\n        nodes {\n          member {\n            accountId\n            name\n            picture\n          }\n        }\n      }\n";
+var TEAM_FRAGMENT = "\n      id\n      displayName\n      description\n      smallHeaderImageUrl\n      largeHeaderImageUrl\n      smallAvatarImageUrl\n      largeAvatarImageUrl\n\t  isVerified\n\t  state\n      members {\n        nodes {\n          member {\n            accountId\n            name\n            picture\n          }\n        }\n      }\n";
 
 // We alias the team node to always be team
 export var GATEWAY_QUERY_V2 = "query TeamCard($teamId: ID!, $siteId: String!) {\n  Team: team {\n    team: teamV2(id: $teamId, siteId: $siteId) @optIn(to: \"Team-v2\") {\n      ".concat(TEAM_FRAGMENT, "\n    }\n  }\n}");

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

@@ -9,7 +9,9 @@ import { FormattedMessage, useIntl } from 'react-intl-next';
 import Avatar from '@atlaskit/avatar';
 import AvatarGroup from '@atlaskit/avatar-group';
 import Button, { IconButton, LinkButton } from '@atlaskit/button/new';
+import FeatureGates from '@atlaskit/feature-gate-js-client';
 import MoreIcon from '@atlaskit/icon/core/migration/show-more-horizontal--more';
+import Lozenge from '@atlaskit/lozenge';
 import { LinkItem, MenuGroup } from '@atlaskit/menu';
 import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -20,7 +22,7 @@ import Tooltip from '@atlaskit/tooltip';
 import messages from '../../messages';
 import { AnimatedKudosButton, AnimationWrapper, KudosBlobAnimation } from '../../styled/Card';
 import { ErrorWrapper, TeamErrorText } from '../../styled/Error';
-import { ActionButtons, AvatarSection, Description, DescriptionWrapper, MemberCount, MoreButton, TeamName, WrappedButton } from '../../styled/TeamCard';
+import { ActionButtons, ArchiveLozengeWrapper, AvatarSection, Description, DescriptionWrapper, MemberCount, MoreButton, TeamName, WrappedButton } from '../../styled/TeamCard';
 import { CardContent, CardHeader, CardWrapper } from '../../styled/TeamTrigger';
 import { actionClicked, errorRetryClicked, moreActionsClicked, moreMembersClicked, PACKAGE_META_DATA, profileCardRendered, teamAvatarClicked } from '../../util/analytics';
 import { isBasicClick } from '../../util/click';
@@ -62,6 +64,7 @@ var TeamMembers = function TeamMembers(_ref) {
   var analytics = _ref.analytics,
     generateUserLink = _ref.generateUserLink,
     members = _ref.members,
+    isArchived = _ref.isArchived,
     onUserClick = _ref.onUserClick,
     includingYou = _ref.includingYou,
     analyticsNext = _ref.analyticsNext,
@@ -114,7 +117,10 @@ var TeamMembers = function TeamMembers(_ref) {
     values: {
       count: count
     }
-  }))), members && members.length > 0 && /*#__PURE__*/React.createElement(AvatarSection, null, /*#__PURE__*/React.createElement(AvatarGroup, {
+  }))), isArchived && /*#__PURE__*/React.createElement(ArchiveLozengeWrapper, null, /*#__PURE__*/React.createElement(Lozenge, {
+    appearance: "default",
+    isBold: true
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.archivedLozenge))), members && members.length > 0 && /*#__PURE__*/React.createElement(AvatarSection, null, /*#__PURE__*/React.createElement(AvatarGroup, {
     appearance: "stack",
     data: members.map(function (member, index) {
       var href = generateUserLink === null || generateUserLink === void 0 ? void 0 : generateUserLink(member.id);
@@ -293,12 +299,14 @@ var TeamProfilecardContent = function TeamProfilecardContent(_ref5) {
     viewProfileLink = _ref5.viewProfileLink,
     viewProfileOnClick = _ref5.viewProfileOnClick,
     isTriggeredByKeyboard = _ref5.isTriggeredByKeyboard;
+  var newTeamProfileEnabled = FeatureGates.getExperimentValue('new_team_profile', 'isEnabled', false);
+  var isTeamArchived = team.state === 'DISBANDED' && fg('legion-enable-archive-teams') && newTeamProfileEnabled;
   var allActions = [{
     label: /*#__PURE__*/React.createElement(FormattedMessage, messages.teamViewProfile),
     link: viewProfileLink,
     callback: viewProfileOnClick,
     id: 'view-profile'
-  }].concat(_toConsumableArray(actions || []));
+  }].concat(_toConsumableArray(isTeamArchived ? [] : actions || []));
   var includingYou = team.members && team.members.some(function (member) {
     return member.id === viewingUserId;
   });
@@ -336,13 +344,15 @@ var TeamProfilecardContent = function TeamProfilecardContent(_ref5) {
     testId: "team-profilecard"
   }, /*#__PURE__*/React.createElement(CardHeader, {
     image: team.largeHeaderImageUrl || team.smallHeaderImageUrl,
-    label: team.displayName
+    label: team.displayName,
+    isDisabled: isTeamArchived
   }), /*#__PURE__*/React.createElement(CardContent, null, /*#__PURE__*/React.createElement(Tooltip, {
     content: team.displayName
   }, /*#__PURE__*/React.createElement(Inline, null, /*#__PURE__*/React.createElement(TeamName, null, team.displayName), team.isVerified && /*#__PURE__*/React.createElement(VerifiedTeamIcon, null))), /*#__PURE__*/React.createElement(TeamMembers, {
     analytics: analytics,
     analyticsNext: analyticsNext,
     members: team.members,
+    isArchived: isTeamArchived,
     generateUserLink: generateUserLink,
     includingYou: includingYou,
     onUserClick: onUserClick,

package/dist/esm/messages.js

@@ -180,6 +180,11 @@ var messages = defineMessages({
     id: 'pt.team.profile-card.members.more-icon-label',
     defaultMessage: '+{count} more {count, plural, one {members} other {members}}',
     description: 'Label for the "more members" indicator in the members section of the team profile card'
+  },
+  archivedLozenge: {
+    id: 'pt.team-profile-card.archived-lozenge',
+    defaultMessage: 'Archived',
+    description: 'Lozenge to indicate that a team is archived'
   }
 });
 export default messages;

package/dist/esm/styled/CoverImage.compiled.css

@@ -10,5 +10,6 @@
 ._4t3i1qr7{height:8pc}
 ._4t3i1wug{height:auto}
 ._5ral1dfr{object-fit:cover}
+._kdam7g3v{filter:grayscale(100%)}
 ._kqswh2mm{position:relative}
 ._qrwq12b0{border-top-right-radius:var(--ds-radius-small,4px)}

package/dist/esm/styled/CoverImage.js

@@ -2,12 +2,14 @@
 import "./CoverImage.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useRef } from 'react';
+import { cx } from '@atlaskit/css';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 var styles = {
   container: "_1reo15vq _18m915vq _1bsb1osq _4t3i1qr7 _kqswh2mm _13li12b0 _qrwq12b0 _1e0c1txw _1bah1h6o _4cvr1h6o",
   image: "_1bsbnklw _4t3i1wug",
-  imageNext: "_4t3i1osq _5ral1dfr"
+  imageNext: "_4t3i1osq _5ral1dfr",
+  grayoutImage: "_kdam7g3v"
 };
 
 /**
@@ -16,7 +18,8 @@ var styles = {
 export var CoverImage = function CoverImage(_ref) {
   var src = _ref.src,
     _ref$alt = _ref.alt,
-    alt = _ref$alt === void 0 ? '' : _ref$alt;
+    alt = _ref$alt === void 0 ? '' : _ref$alt,
+    isDisabled = _ref.isDisabled;
   var containerRef = useRef(null);
   var imgRef = useRef(null);
   return /*#__PURE__*/React.createElement(Box, {
@@ -28,6 +31,6 @@ export var CoverImage = function CoverImage(_ref) {
     ref: imgRef,
     src: src,
     alt: alt,
-    xcss: fg('cover-header-image-team-profilecard') ? styles.imageNext : styles.image
+    xcss: cx(fg('cover-header-image-team-profilecard') ? styles.imageNext : styles.image, isDisabled && styles.grayoutImage)
   }));
 };

package/dist/esm/styled/TeamCard.js

@@ -6,7 +6,7 @@ import React from 'react';
 import { cx } from '@atlaskit/css';
 import Heading from '@atlaskit/heading';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Box, Text } from '@atlaskit/primitives/compiled';
+import { Box, Inline, Text } from '@atlaskit/primitives/compiled';
 import { N200 } from '@atlaskit/theme/colors';
 var styles = {
   teamforbiddenerrorstatewrapper: "_1bsbnklw _kqswh2mm",
@@ -18,7 +18,8 @@ var styles = {
   actionbuttons: "_1bsb1osq _1e0c1txw _1bah1yb4 _19pk1ejb _2hwx10v4 _otyridpf _18u0x0bf",
   wrappedbutton: "_i0dlidpf _16jlkb7n _18u0u2gc",
   morebutton: "_18u0u2gc",
-  accesslocksvgwrapper: "_otyr1ejb"
+  accesslocksvgwrapper: "_otyr1ejb",
+  archiveLozengeWrapper: "_19pk1b66"
 };
 export var TeamForbiddenErrorStateWrapper = function TeamForbiddenErrorStateWrapper(props) {
   return /*#__PURE__*/React.createElement(Box, _extends({
@@ -78,4 +79,9 @@ export var AccessLockSVGWrapper = function AccessLockSVGWrapper(props) {
   return /*#__PURE__*/React.createElement(Box, _extends({
     xcss: cx(styles.accesslocksvgwrapper)
   }, props));
+};
+export var ArchiveLozengeWrapper = function ArchiveLozengeWrapper(props) {
+  return /*#__PURE__*/React.createElement(Inline, _extends({
+    xcss: cx(styles.archiveLozengeWrapper)
+  }, props));
 };

package/dist/esm/styled/TeamTrigger.compiled.css

@@ -9,6 +9,7 @@
 ._2lx21bp4{flex-direction:column}
 ._4t3i1qr7{height:8pc}
 ._ca0q1ejb{padding-top:var(--ds-space-300,24px)}
+._kdam7g3v{filter:grayscale(100%)}
 ._kqswh2mm{position:relative}
 ._n3td1ejb{padding-bottom:var(--ds-space-300,24px)}
 ._otyr1jfw{margin-bottom:var(--ds-space-500,40px)}

package/dist/esm/styled/TeamTrigger.js

@@ -11,7 +11,8 @@ var styles = {
   cardwrapper: "_2rko12b0 _1bsbnklw _kqswh2mm",
   cardheader: "_4t3i1qr7 _1bsb1osq",
   cardcontent: "_1e0c1txw _2lx21bp4 _ca0q1ejb _u5f31ejb _n3td1ejb _19bv1ejb _1tke1l8a",
-  loadingwrapper: "_y3gn1h6o _19pk1jfw _otyr1jfw"
+  loadingwrapper: "_y3gn1h6o _19pk1jfw _otyr1jfw",
+  grayoutImage: "_kdam7g3v"
 };
 export var CardTriggerWrapper = function CardTriggerWrapper() {
   return /*#__PURE__*/React.createElement(Box, {
@@ -30,13 +31,15 @@ export var CardWrapper = function CardWrapper(_ref) {
 export var CardHeader = function CardHeader(_ref2) {
   var image = _ref2.image,
     isLoading = _ref2.isLoading,
-    label = _ref2.label;
+    label = _ref2.label,
+    isDisabled = _ref2.isDisabled;
   return isLoading || !image ? /*#__PURE__*/React.createElement(Box, {
-    xcss: cx(styles.cardheader),
+    xcss: cx(styles.cardheader, isDisabled && styles.grayoutImage),
     backgroundColor: "color.background.neutral"
   }) : /*#__PURE__*/React.createElement(CoverImage, {
     alt: label || '',
-    src: image
+    src: image,
+    isDisabled: isDisabled
   });
 };
 export var CardContent = function CardContent(props) {

package/dist/types/client/getTeamFromAGG.d.ts

@@ -21,7 +21,7 @@ export declare const extractIdFromAri: (ari: string) => string;
 export declare const idToAri: (teamId: string) => string;
 export declare const idToAriSafe: (teamIdOrTeamAri: string) => string;
 export declare const convertTeam: (result: AGGResult) => Team;
-export declare const GATEWAY_QUERY_V2 = "query TeamCard($teamId: ID!, $siteId: String!) {\n  Team: team {\n    team: teamV2(id: $teamId, siteId: $siteId) @optIn(to: \"Team-v2\") {\n      \n      id\n      displayName\n      description\n      smallHeaderImageUrl\n      largeHeaderImageUrl\n      smallAvatarImageUrl\n      largeAvatarImageUrl\n\t  isVerified\n      members {\n        nodes {\n          member {\n            accountId\n            name\n            picture\n          }\n        }\n      }\n\n    }\n  }\n}";
+export declare const GATEWAY_QUERY_V2 = "query TeamCard($teamId: ID!, $siteId: String!) {\n  Team: team {\n    team: teamV2(id: $teamId, siteId: $siteId) @optIn(to: \"Team-v2\") {\n      \n      id\n      displayName\n      description\n      smallHeaderImageUrl\n      largeHeaderImageUrl\n      smallAvatarImageUrl\n      largeAvatarImageUrl\n\t  isVerified\n\t  state\n      members {\n        nodes {\n          member {\n            accountId\n            name\n            picture\n          }\n        }\n      }\n\n    }\n  }\n}";
 type TeamQueryVariables = {
     teamId: string;
     siteId?: string;

package/dist/types/messages.d.ts

@@ -179,5 +179,10 @@ declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    archivedLozenge: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };
 export default messages;

package/dist/types/styled/CoverImage.d.ts

@@ -2,9 +2,10 @@ import React from 'react';
 interface CoverImageProps {
     src: string;
     alt?: string;
+    isDisabled?: boolean;
 }
 /**
  * This is instead of using background-image in CSS as design-system doesn't support that
  */
-export declare const CoverImage: ({ src, alt }: CoverImageProps) => React.JSX.Element;
+export declare const CoverImage: ({ src, alt, isDisabled }: CoverImageProps) => React.JSX.Element;
 export {};

package/dist/types/styled/TeamCard.d.ts

@@ -30,3 +30,6 @@ export declare const MoreButton: (props: {
 export declare const AccessLockSVGWrapper: (props: {
     children: React.ReactNode;
 }) => React.JSX.Element;
+export declare const ArchiveLozengeWrapper: (props: {
+    children: React.ReactNode;
+}) => React.JSX.Element;

package/dist/types/styled/TeamTrigger.d.ts

@@ -4,10 +4,11 @@ export declare const CardWrapper: ({ testId, children, }: {
     testId?: string;
     children: React.ReactNode;
 }) => React.JSX.Element;
-export declare const CardHeader: ({ image, isLoading, label, }: {
+export declare const CardHeader: ({ image, isLoading, label, isDisabled, }: {
     image?: string;
     isLoading?: boolean;
     label?: string;
+    isDisabled?: boolean;
 }) => React.JSX.Element;
 export declare const CardContent: (props: {
     children: React.ReactNode;

package/dist/types/types.d.ts

@@ -58,6 +58,7 @@ export interface Team {
         avatarUrl: string;
     }[];
     isVerified?: boolean;
+    state?: 'ACTIVE' | 'DISBANDED';
 }
 export interface RovoAgent {
     id: string;

package/dist/types-ts4.5/client/getTeamFromAGG.d.ts

@@ -21,7 +21,7 @@ export declare const extractIdFromAri: (ari: string) => string;
 export declare const idToAri: (teamId: string) => string;
 export declare const idToAriSafe: (teamIdOrTeamAri: string) => string;
 export declare const convertTeam: (result: AGGResult) => Team;
-export declare const GATEWAY_QUERY_V2 = "query TeamCard($teamId: ID!, $siteId: String!) {\n  Team: team {\n    team: teamV2(id: $teamId, siteId: $siteId) @optIn(to: \"Team-v2\") {\n      \n      id\n      displayName\n      description\n      smallHeaderImageUrl\n      largeHeaderImageUrl\n      smallAvatarImageUrl\n      largeAvatarImageUrl\n\t  isVerified\n      members {\n        nodes {\n          member {\n            accountId\n            name\n            picture\n          }\n        }\n      }\n\n    }\n  }\n}";
+export declare const GATEWAY_QUERY_V2 = "query TeamCard($teamId: ID!, $siteId: String!) {\n  Team: team {\n    team: teamV2(id: $teamId, siteId: $siteId) @optIn(to: \"Team-v2\") {\n      \n      id\n      displayName\n      description\n      smallHeaderImageUrl\n      largeHeaderImageUrl\n      smallAvatarImageUrl\n      largeAvatarImageUrl\n\t  isVerified\n\t  state\n      members {\n        nodes {\n          member {\n            accountId\n            name\n            picture\n          }\n        }\n      }\n\n    }\n  }\n}";
 type TeamQueryVariables = {
     teamId: string;
     siteId?: string;

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

@@ -179,5 +179,10 @@ declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    archivedLozenge: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };
 export default messages;

package/dist/types-ts4.5/styled/CoverImage.d.ts

@@ -2,9 +2,10 @@ import React from 'react';
 interface CoverImageProps {
     src: string;
     alt?: string;
+    isDisabled?: boolean;
 }
 /**
  * This is instead of using background-image in CSS as design-system doesn't support that
  */
-export declare const CoverImage: ({ src, alt }: CoverImageProps) => React.JSX.Element;
+export declare const CoverImage: ({ src, alt, isDisabled }: CoverImageProps) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/styled/TeamCard.d.ts

@@ -30,3 +30,6 @@ export declare const MoreButton: (props: {
 export declare const AccessLockSVGWrapper: (props: {
     children: React.ReactNode;
 }) => React.JSX.Element;
+export declare const ArchiveLozengeWrapper: (props: {
+    children: React.ReactNode;
+}) => React.JSX.Element;

package/dist/types-ts4.5/styled/TeamTrigger.d.ts

@@ -4,10 +4,11 @@ export declare const CardWrapper: ({ testId, children, }: {
     testId?: string;
     children: React.ReactNode;
 }) => React.JSX.Element;
-export declare const CardHeader: ({ image, isLoading, label, }: {
+export declare const CardHeader: ({ image, isLoading, label, isDisabled, }: {
     image?: string;
     isLoading?: boolean;
     label?: string;
+    isDisabled?: boolean;
 }) => React.JSX.Element;
 export declare const CardContent: (props: {
     children: React.ReactNode;

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

@@ -58,6 +58,7 @@ export interface Team {
         avatarUrl: string;
     }[];
     isVerified?: boolean;
+    state?: 'ACTIVE' | 'DISBANDED';
 }
 export interface RovoAgent {
     id: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "24.21.2",
+	"version": "24.21.4",
 	"description": "A React component to display a card with user information.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -56,22 +56,22 @@
 		"@atlaskit/logo": "^19.9.0",
 		"@atlaskit/lozenge": "^13.1.0",
 		"@atlaskit/menu": "^8.4.0",
-		"@atlaskit/modal-dialog": "^14.6.0",
-		"@atlaskit/people-teams-ui-public": "^3.6.0",
+		"@atlaskit/modal-dialog": "^14.7.0",
+		"@atlaskit/people-teams-ui-public": "^3.7.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.4.0",
 		"@atlaskit/popup": "^4.6.0",
 		"@atlaskit/primitives": "^16.1.0",
 		"@atlaskit/rovo-agent-components": "^3.11.0",
-		"@atlaskit/rovo-triggers": "^4.1.0",
+		"@atlaskit/rovo-triggers": "^4.3.0",
 		"@atlaskit/spinner": "^19.0.0",
 		"@atlaskit/teams-app-config": "^1.12.0",
-		"@atlaskit/teams-app-internal-analytics": "^1.19.0",
+		"@atlaskit/teams-app-internal-analytics": "^1.20.0",
 		"@atlaskit/teams-avatar": "^2.4.0",
-		"@atlaskit/teams-public": "^0.62.0",
+		"@atlaskit/teams-public": "^0.63.0",
 		"@atlaskit/theme": "^21.0.0",
 		"@atlaskit/tokens": "^8.0.0",
-		"@atlaskit/tooltip": "^20.8.0",
+		"@atlaskit/tooltip": "^20.10.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.6",
 		"date-fns": "^2.17.0",
@@ -162,6 +162,9 @@
 		},
 		"agent_studio_permissions_settings_m3_profiles": {
 			"type": "boolean"
+		},
+		"legion-enable-archive-teams": {
+			"type": "boolean"
 		}
 	},
 	"sideEffects": [