@atlaskit/teams-public 0.55.4 → 0.56.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/teams-public
 
+## 0.56.1
+
+### Patch Changes
+
+- [`d28c4180ae756`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d28c4180ae756) -
+  Internal changes to how border radius is applied.
+- Updated dependencies
+
+## 0.56.0
+
+### Minor Changes
+
+- [`46d89dbaa9dc2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/46d89dbaa9dc2) -
+  Implemented for the new team profile page. Crated AddContainerCard component that is exported from
+  teams-public package and being used in the new team profile page's Team Links section.
+
 ## 0.55.4
 
 ### Patch Changes

package/dist/cjs/common/ui/container-icon/index.compiled.css

@@ -1,6 +1,6 @@
 
-._2rkogqwt{border-radius:var(--ds-border-radius-050,2px)}
-._2rkopd34{border-radius:var(--ds-border-radius-200,8px)}._12jimuej{outline-color:var(--ds-border,#091e4224)}
+._2rko1mok{border-radius:var(--ds-radius-large,8px)}
+._2rkogqwt{border-radius:var(--ds-border-radius-050,2px)}._12jimuej{outline-color:var(--ds-border,#091e4224)}
 ._18u0v77o{margin-left:var(--ds-space-025,2px)}
 ._19pkv77o{margin-top:var(--ds-space-025,2px)}
 ._1bah1h6o{justify-content:center}

package/dist/cjs/common/ui/container-icon/index.js

@@ -14,9 +14,9 @@ var _link = _interopRequireDefault(require("@atlaskit/icon/core/link"));
 var _compiled = require("@atlaskit/primitives/compiled");
 var _loomAvatar = require("../loom-avatar");
 var styles = {
-  linkIconWrapperMedium: "_2rkopd34 _1bsb1u1b _4t3i1u1b _1e0c1txw _4cvr1h6o _1bah1h6o _12jimuej _1qu2nqa1 _bfhkqbzx",
+  linkIconWrapperMedium: "_2rko1mok _1bsb1u1b _4t3i1u1b _1e0c1txw _4cvr1h6o _1bah1h6o _12jimuej _1qu2nqa1 _bfhkqbzx",
   linkIconWrapperSmall: "_2rkogqwt _1bsb1tcg _4t3i1tcg _1e0c1txw _4cvr1h6o _1bah1h6o _19pkv77o _2hwxv77o _otyrv77o _18u0v77o _12jimuej _1qu2nqa1 _bfhkqbzx",
-  skeletonMedium: "_2rkopd34 _bfhkn82g _1bsb1u1b _4t3i1u1b",
+  skeletonMedium: "_2rko1mok _bfhkn82g _1bsb1u1b _4t3i1u1b",
   skeletonSmall: "_2rkogqwt _bfhkn82g _1bsb1tcg _4t3i1tcg"
 };
 var IconSkeleton = function IconSkeleton(_ref) {

package/dist/cjs/common/utils/get-container-properties.compiled.css

@@ -1,10 +1,14 @@
 
-._2rko1sit{border-radius:var(--ds-border-radius,3px)}._12jimuej{outline-color:var(--ds-border,#091e4224)}
+._2rko1sit{border-radius:var(--ds-border-radius,3px)}
+._2rkotv8t{border-radius:var(--ds-border-radius,6px)}._12jimuej{outline-color:var(--ds-border,#091e4224)}
 ._1bah1h6o{justify-content:center}
 ._1bsb1crf{width:9pt}
+._1bsb1tcg{width:24px}
 ._1bsb7vkz{width:1pc}
 ._1e0c1txw{display:flex}
 ._1qu2nqa1{outline-style:solid}
 ._4cvr1h6o{align-items:center}
 ._4t3i1crf{height:9pt}
-._4t3i7vkz{height:1pc}
+._4t3i1tcg{height:24px}
+._4t3i7vkz{height:1pc}
+._bfhkm7j4{background-color:var(--ds-background-neutral,#091e420f)}

package/dist/cjs/common/utils/get-container-properties.js

@@ -14,6 +14,7 @@ var _reactIntlNext = require("react-intl-next");
 var _globe = _interopRequireDefault(require("@atlaskit/icon/core/globe"));
 var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
 var _image = _interopRequireDefault(require("@atlaskit/image"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _ConfluenceIcon = _interopRequireDefault(require("../assets/ConfluenceIcon.svg"));
 var _JiraIcon = _interopRequireDefault(require("../assets/JiraIcon.svg"));
@@ -24,8 +25,10 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var styles = {
   iconWrapper: "_1bsb1crf _4t3i1crf",
+  avatarWrapper: "_1bsb1tcg _4t3i1tcg",
   mediumIconWrapper: "_1bsb7vkz _4t3i7vkz",
-  globeIconWrapper: "_2rko1sit _1bsb7vkz _4t3i7vkz _1e0c1txw _4cvr1h6o _1bah1h6o _12jimuej _1qu2nqa1"
+  globeIconWrapper: "_2rko1sit _1bsb7vkz _4t3i7vkz _1e0c1txw _4cvr1h6o _1bah1h6o _12jimuej _1qu2nqa1",
+  globeAvatarWrapper: "_2rkotv8t _1bsb1tcg _4t3i1tcg _1e0c1txw _4cvr1h6o _1bah1h6o _bfhkm7j4"
 };
 var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
   addConfluenceContainerTitle: {
@@ -33,6 +36,11 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Add space',
     description: 'Title of the card to add a Confluence space to a team'
   },
+  addConfluenceSpace: {
+    id: 'ptc-directory.team-profile-page.team-containers.add-confluence-space',
+    defaultMessage: 'Add Confluence Space',
+    description: 'Title of the card to add a Confluence space to a team'
+  },
   confluenceContainerDescription: {
     id: 'ptc-directory.team-profile-page.team-containers.add-confluence-space-description',
     defaultMessage: 'Confluence',
@@ -43,6 +51,11 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Add space',
     description: 'Title of the card to add a Loom space to a team'
   },
+  addLoomSpace: {
+    id: 'ptc-directory.team-profile-page.team-containers.add-loom-space',
+    defaultMessage: 'Add Loom Space',
+    description: 'Title of the card to add a Loom space to a team'
+  },
   confluenceLoomDescription: {
     id: 'ptc-directory.team-profile-page.team-containers.add-loom-space-description',
     defaultMessage: 'Loom',
@@ -53,6 +66,11 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Add project',
     description: 'Title of the card to add a Jira project to a team'
   },
+  addJiraProject: {
+    id: 'ptc-directory.team-profile-page.team-containers.add-jira-project',
+    defaultMessage: 'Add Jira Project',
+    description: 'Title of the card to add a Jira project to a team'
+  },
   jiraProjectDescription: {
     id: 'ptc-directory.team-profile-page.team-containers.add-jira-project-description',
     defaultMessage: 'Jira',
@@ -83,6 +101,11 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Add any web link',
     description: 'Description displayed on the empty card for adding a web link to a team'
   },
+  addWebLink: {
+    id: 'platform.teams.containers.add-web-link',
+    defaultMessage: 'Add Web Link',
+    description: 'Title of the card to add a web link to a team'
+  },
   webLinkContainerDescription: {
     id: 'platform.teams.containers.web-link-title-description',
     defaultMessage: 'Web link',
@@ -103,19 +126,26 @@ var getJiraContainerProperties = function getJiraContainerProperties(_ref) {
   var containerTypeProperties = _ref.containerTypeProperties,
     _ref$iconSize = _ref.iconSize,
     iconSize = _ref$iconSize === void 0 ? 'small' : _ref$iconSize;
+  var newTeamProfilePage = (0, _platformFeatureFlags.fg)('enable_new_team_profile');
   var _ref2 = containerTypeProperties || {},
     subType = _ref2.subType,
     name = _ref2.name;
   var baseProperties = {
     description: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.jiraProjectDescription),
-    icon: /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
+    icon: newTeamProfilePage ? /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
+      xcss: styles.avatarWrapper
+    }, /*#__PURE__*/_react.default.createElement(_image.default, {
+      src: getJiraIcon(subType),
+      alt: "",
+      testId: "jira-project-container-icon"
+    })) : /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
       xcss: iconSize === 'medium' ? styles.mediumIconWrapper : styles.iconWrapper
     }, /*#__PURE__*/_react.default.createElement(_image.default, {
       src: getJiraIcon(subType),
       alt: "",
       testId: "jira-project-container-icon"
     })),
-    title: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.addJiraProjectTitle),
+    title: newTeamProfilePage ? /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.addJiraProject) : /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.addJiraProjectTitle),
     containerTypeText: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.projectContainerText)
   };
   switch (subType) {
@@ -132,12 +162,19 @@ var getJiraContainerProperties = function getJiraContainerProperties(_ref) {
 var getWebLinkContainerProperties = function getWebLinkContainerProperties(_ref3) {
   var isEmptyContainer = _ref3.isEmptyContainer,
     isDisplayedOnProfileCard = _ref3.isDisplayedOnProfileCard;
+  var newTeamProfilePage = (0, _platformFeatureFlags.fg)('enable_new_team_profile');
   return {
     description: isEmptyContainer ? /*#__PURE__*/_react.default.createElement(_compiled.Text, {
       size: "medium",
       weight: "medium"
     }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.emptyWebLinkContainerDescription)) : /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.webLinkContainerDescription),
-    icon: isEmptyContainer ? null : isDisplayedOnProfileCard ? /*#__PURE__*/_react.default.createElement(_linkExternal.default, {
+    icon: isEmptyContainer ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      xcss: styles.globeAvatarWrapper,
+      testId: "team-link-card-globe-icon"
+    }, /*#__PURE__*/_react.default.createElement(_globe.default, {
+      label: "",
+      size: "medium"
+    })) : isDisplayedOnProfileCard ? /*#__PURE__*/_react.default.createElement(_linkExternal.default, {
       label: "",
       size: "small",
       testId: "team-link-card-external-link-icon"
@@ -148,7 +185,7 @@ var getWebLinkContainerProperties = function getWebLinkContainerProperties(_ref3
       label: "",
       size: "small"
     })),
-    title: null,
+    title: newTeamProfilePage ? /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.addWebLink) : null,
     containerTypeText: null
   };
 };
@@ -159,31 +196,44 @@ var getContainerProperties = exports.getContainerProperties = function getContai
     containerTypeProperties = _ref4.containerTypeProperties,
     isEmptyContainer = _ref4.isEmptyContainer,
     isDisplayedOnProfileCard = _ref4.isDisplayedOnProfileCard;
+  var newTeamProfilePage = (0, _platformFeatureFlags.fg)('enable_new_team_profile');
   switch (containerType) {
     case 'ConfluenceSpace':
       return {
         description: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.confluenceContainerDescription),
-        icon: /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
+        icon: newTeamProfilePage ? /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
+          xcss: styles.avatarWrapper
+        }, /*#__PURE__*/_react.default.createElement(_image.default, {
+          src: _ConfluenceIcon.default,
+          alt: "",
+          testId: "confluence-space-container-icon"
+        })) : /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
           xcss: iconSize === 'medium' ? styles.mediumIconWrapper : styles.iconWrapper
         }, /*#__PURE__*/_react.default.createElement(_image.default, {
           src: _ConfluenceIcon.default,
           alt: "",
           testId: "confluence-space-container-icon"
         })),
-        title: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.addConfluenceContainerTitle),
+        title: newTeamProfilePage ? /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.addConfluenceSpace) : /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.addConfluenceContainerTitle),
         containerTypeText: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.spaceContainerText)
       };
     case 'LoomSpace':
       return {
         description: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.loomSpaceDescription),
-        icon: /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
+        icon: newTeamProfilePage ? /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
+          xcss: styles.avatarWrapper
+        }, /*#__PURE__*/_react.default.createElement(_image.default, {
+          src: _LoomIcon.default,
+          alt: "",
+          testId: "loom-space-container-icon"
+        })) : /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
           xcss: iconSize === 'medium' ? styles.mediumIconWrapper : styles.iconWrapper
         }, /*#__PURE__*/_react.default.createElement(_image.default, {
           src: _LoomIcon.default,
           alt: "",
           testId: "loom-space-container-icon"
         })),
-        title: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.addLoomContainerTitle),
+        title: newTeamProfilePage ? /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.addLoomSpace) : /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.addLoomContainerTitle),
         containerTypeText: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.spaceContainerText)
       };
     case 'JiraProject':

package/dist/cjs/i18n/en.js

@@ -13,15 +13,19 @@ exports.default = void 0;
  */
 //
 var _default = exports.default = {
+  'platform.teams.containers.add-web-link': 'Add Web Link',
   'platform.teams.containers.empty-web-link-description': 'Add any web link',
   'platform.teams.containers.web-link-title-description': 'Web link',
   'ptc-directory.team-containers.disconnect-button.tooltip': 'Disconnect',
   'ptc-directory.team-containers.edit-link': 'Edit link',
   'ptc-directory.team-containers.remove-link': 'Remove',
+  'ptc-directory.team-profile-page.team-containers.add-confluence-space': 'Add Confluence Space',
   'ptc-directory.team-profile-page.team-containers.add-confluence-space-description': 'Confluence',
   'ptc-directory.team-profile-page.team-containers.add-confluence-space-title': 'Add space',
+  'ptc-directory.team-profile-page.team-containers.add-jira-project': 'Add Jira Project',
   'ptc-directory.team-profile-page.team-containers.add-jira-project-description': 'Jira',
   'ptc-directory.team-profile-page.team-containers.add-jira-project-title': 'Add project',
+  'ptc-directory.team-profile-page.team-containers.add-loom-space': 'Add Loom Space',
   'ptc-directory.team-profile-page.team-containers.add-loom-space-description': 'Loom',
   'ptc-directory.team-profile-page.team-containers.add-loom-space-title': 'Add space',
   'ptc-directory.team-profile-page.team-containers.create.add-confluence-space-description': 'Create a knowledge bank',

package/dist/cjs/i18n/en_GB.js

@@ -13,15 +13,19 @@ exports.default = void 0;
  */
 //English (United Kingdom)
 var _default = exports.default = {
+  'platform.teams.containers.add-web-link': 'Add Web Link',
   'platform.teams.containers.empty-web-link-description': 'Add any web link',
   'platform.teams.containers.web-link-title-description': 'Web link',
   'ptc-directory.team-containers.disconnect-button.tooltip': 'Disconnect',
   'ptc-directory.team-containers.edit-link': 'Edit link',
   'ptc-directory.team-containers.remove-link': 'Remove',
+  'ptc-directory.team-profile-page.team-containers.add-confluence-space': 'Add Confluence Space',
   'ptc-directory.team-profile-page.team-containers.add-confluence-space-description': 'Confluence',
   'ptc-directory.team-profile-page.team-containers.add-confluence-space-title': 'Add space',
+  'ptc-directory.team-profile-page.team-containers.add-jira-project': 'Add Jira Project',
   'ptc-directory.team-profile-page.team-containers.add-jira-project-description': 'Jira',
   'ptc-directory.team-profile-page.team-containers.add-jira-project-title': 'Add project',
+  'ptc-directory.team-profile-page.team-containers.add-loom-space': 'Add Loom Space',
   'ptc-directory.team-profile-page.team-containers.add-loom-space-description': 'Loom',
   'ptc-directory.team-profile-page.team-containers.add-loom-space-title': 'Add space',
   'ptc-directory.team-profile-page.team-containers.create.add-confluence-space-description': 'Create a knowledge bank',

package/dist/cjs/i18n/en_ZZ.js

@@ -13,15 +13,19 @@ exports.default = void 0;
  */
 //
 var _default = exports.default = {
+  'platform.teams.containers.add-web-link': '⁣⁢Add Web Link‌‍‌⁡؜⁠؜⁡⁣⁤',
   'platform.teams.containers.empty-web-link-description': '⁣⁢Add any web link⁡‌‌⁠‌؜؜‌‌؜⁣⁤',
   'platform.teams.containers.web-link-title-description': '⁣⁢Web link⁡‍‌⁡‍‍‍⁡⁡‌⁠‌⁠⁣⁤',
   'ptc-directory.team-containers.disconnect-button.tooltip': '⁣⁢Disconnect؜؜⁡‍‌⁡؜‌؜⁡؜⁣⁤',
   'ptc-directory.team-containers.edit-link': '⁣⁢Edit link؜؜⁠⁡⁡؜⁠⁡⁣⁤',
   'ptc-directory.team-containers.remove-link': '⁣⁢Remove‌⁡⁡‌‍؜⁠‍⁣⁤',
+  'ptc-directory.team-profile-page.team-containers.add-confluence-space': '⁣⁢Add Confluence Space‍⁡⁡⁡‌⁡‍‌؜؜⁡⁣⁤',
   'ptc-directory.team-profile-page.team-containers.add-confluence-space-description': '⁣⁢Confluence⁡‍⁡؜‌⁡‍؜⁣⁤',
   'ptc-directory.team-profile-page.team-containers.add-confluence-space-title': '⁣⁢Add space⁡⁠‍؜‍⁡⁡⁠‌⁣⁤',
+  'ptc-directory.team-profile-page.team-containers.add-jira-project': '⁣⁢Add Jira Project⁡⁡‌⁠⁠⁠‌⁡⁣⁤',
   'ptc-directory.team-profile-page.team-containers.add-jira-project-description': '⁣⁢Jira‌‌⁡⁠؜؜‍⁡؜‌‌؜⁡‌⁠⁣⁤',
   'ptc-directory.team-profile-page.team-containers.add-jira-project-title': '⁣⁢Add project؜‍‌⁠‌‍⁡⁡‍‌‍؜⁡؜⁡؜⁣⁤',
+  'ptc-directory.team-profile-page.team-containers.add-loom-space': '⁣⁢Add Loom Space⁡⁠⁡⁡‌؜⁠⁣⁤',
   'ptc-directory.team-profile-page.team-containers.add-loom-space-description': '⁣⁢Loom‍⁡⁡⁡‍‍‌‌⁠؜⁣⁤',
   'ptc-directory.team-profile-page.team-containers.add-loom-space-title': '⁣⁢Add space؜⁠‌‍‍⁡‍‍؜⁡؜⁣⁤',
   'ptc-directory.team-profile-page.team-containers.create.add-confluence-space-description': '⁣⁢Create a knowledge bank⁡؜‌⁡‍‌⁡؜؜‍⁣⁤',

package/dist/cjs/next/index.js

@@ -3,10 +3,24 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "AddContainerCard", {
+  enumerable: true,
+  get: function get() {
+    return _addContainerCard.AddContainerCard;
+  }
+});
 Object.defineProperty(exports, "TeamContainerSkeleton", {
   enumerable: true,
   get: function get() {
     return _teamContainerSkeleton.TeamContainerSkeleton;
   }
 });
-var _teamContainerSkeleton = require("./common/ui/team-container-skeleton");
+Object.defineProperty(exports, "TeamLinkCard", {
+  enumerable: true,
+  get: function get() {
+    return _teamLinkCard.TeamLinkCard;
+  }
+});
+var _teamContainerSkeleton = require("./common/ui/team-container-skeleton");
+var _addContainerCard = require("./ui/team-containers/add-container-card");
+var _teamLinkCard = require("./ui/team-containers/team-link-card");

package/dist/cjs/next/ui/team-containers/add-container-card/index.compiled.css

@@ -0,0 +1,12 @@
+
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
+._2rkoop52{border-radius:var(--ds-border-radius-100,8px)}._19bv12x7{padding-left:var(--ds-space-075,6px)}
+._1bsb1osq{width:100%}
+._4cvr1h6o{align-items:center}
+._bfhkhp5a{background-color:var(--ds-surface-raised,#fff)}
+._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
+._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
+._syaz131l{color:var(--ds-text-subtlest,#626f86)}
+._u5f312x7{padding-right:var(--ds-space-075,6px)}
+._d0altlke:hover{cursor:pointer}
+._irr3108i:hover{background-color:var(--ds-surface-hovered,#f1f2f4)}

package/dist/cjs/next/ui/team-containers/add-container-card/index.js

@@ -0,0 +1,55 @@
+/* index.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.AddContainerCard = void 0;
+require("./index.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
+var _compiled = require("@atlaskit/primitives/compiled");
+var _getContainerProperties = require("../../../../common/utils/get-container-properties");
+var _teamContainerSkeleton = require("../../../common/ui/team-container-skeleton");
+var styles = {
+  card: "_4cvr1h6o _1bsb1osq",
+  container: "_2rkoop52 _ca0qutpp _u5f312x7 _n3tdutpp _19bv12x7 _bfhkhp5a _d0altlke _irr3108i",
+  iconWrapper: "_2rkoiti9 _syaz131l"
+};
+var AddContainerCardWrapper = function AddContainerCardWrapper(_ref) {
+  var children = _ref.children,
+    onClick = _ref.onClick;
+  return /*#__PURE__*/_react.default.createElement(_compiled.Pressable, {
+    xcss: styles.container,
+    onClick: onClick
+  }, children);
+};
+var AddContainerCard = exports.AddContainerCard = function AddContainerCard(_ref2) {
+  var containerType = _ref2.containerType,
+    onAddAContainerClick = _ref2.onAddAContainerClick,
+    _ref2$isLoading = _ref2.isLoading,
+    isLoading = _ref2$isLoading === void 0 ? false : _ref2$isLoading;
+  var _getContainerProperti = (0, _getContainerProperties.getContainerProperties)({
+      containerType: containerType,
+      isEmptyContainer: true
+    }),
+    icon = _getContainerProperti.icon,
+    title = _getContainerProperti.title;
+  if (isLoading) {
+    return /*#__PURE__*/_react.default.createElement(_teamContainerSkeleton.TeamContainerSkeleton, {
+      numberOfContainers: 1
+    });
+  }
+  return /*#__PURE__*/_react.default.createElement(AddContainerCardWrapper, {
+    onClick: onAddAContainerClick
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
+    space: "space.100",
+    xcss: styles.card
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.iconWrapper
+  }, icon), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+    maxLines: 1,
+    color: "color.text.subtlest"
+  }, title)));
+};

package/dist/cjs/next/ui/team-containers/team-link-card/index.compiled.css

@@ -0,0 +1,27 @@
+
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
+._2rkoop52{border-radius:var(--ds-border-radius-100,8px)}
+._16jlkb7n{flex-grow:1}
+._18u01wug{margin-left:auto}
+._19bv12x7{padding-left:var(--ds-space-075,6px)}
+._1bahesu3{justify-content:flex-end}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1hmsglyw{text-decoration-line:none}
+._1o9zkb7n{flex-shrink:1}
+._4bfu1r31{text-decoration-color:currentColor}
+._4cvr1h6o{align-items:center}
+._ajmmnqa1{text-decoration-style:solid}
+._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._i0dlf1ug{flex-basis:0%}
+._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._u5f312x7{padding-right:var(--ds-space-075,6px)}._10531fxt:visited{color:var(--ds-text,#172b4d)}
+._1bg4v77o:focus{outline-offset:var(--ds-space-025,2px)}
+._1hvw1bk5:focus{outline-width:var(--ds-border-width-outline,2px)}
+._49pcnqa1:focus{outline-style:solid}
+._nt751p6i:focus{outline-color:var(--ds-border-focused,#388bff)}
+._1bnxglyw:hover{text-decoration-line:none}
+._30l31fxt:hover{color:var(--ds-text,#172b4d)}
+._9oik1r31:hover{text-decoration-color:currentColor}
+._jf4cnqa1:hover{text-decoration-style:solid}

package/dist/cjs/next/ui/team-containers/team-link-card/index.js

@@ -0,0 +1,175 @@
+/* index.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.TeamLinkCard = void 0;
+require("./index.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _compiled = require("@atlaskit/primitives/compiled");
+var _containerIcon = require("../../../../common/ui/container-icon");
+var _teamLinkCardActions = require("../../../../common/ui/team-link-card-actions");
+var _analytics = require("../../../../common/utils/analytics");
+var _getContainerProperties = require("../../../../common/utils/get-container-properties");
+var _getLinkDomain = require("../../../../common/utils/get-link-domain");
+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); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var styles = {
+  container: "_2rkoiti9 _ca0q1b66 _u5f312x7 _n3td1b66 _19bv12x7 _syaz1fxt",
+  card: "_4cvr1h6o _1bsb1osq",
+  anchor: "_4bfu1r31 _1hmsglyw _ajmmnqa1 _2rkoop52 _1bsb1osq _syaz1fxt _10531fxt _1hvw1bk5 _nt751p6i _49pcnqa1 _1bg4v77o _9oik1r31 _1bnxglyw _jf4cnqa1 _30l31fxt",
+  crossIconWrapper: "_1e0c1txw _4cvr1h6o _1bahesu3 _18u01wug",
+  showMoreIconWrapper: "_1e0c1txw _4cvr1h6o _1bahesu3 _18u01wug",
+  linkableContent: "_16jlkb7n _1o9zkb7n _i0dlf1ug"
+};
+var TeamLinkCard = exports.TeamLinkCard = function TeamLinkCard(_ref) {
+  var containerType = _ref.containerType,
+    title = _ref.title,
+    containerIcon = _ref.containerIcon,
+    link = _ref.link,
+    containerId = _ref.containerId,
+    containerTypeProperties = _ref.containerTypeProperties,
+    _onDisconnectButtonClick = _ref.onDisconnectButtonClick,
+    _onEditLinkClick = _ref.onEditLinkClick,
+    iconsLoading = _ref.iconsLoading,
+    iconHasLoaded = _ref.iconHasLoaded,
+    openInNewTab = _ref.openInNewTab,
+    isReadOnly = _ref.isReadOnly;
+  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var _getContainerProperti = (0, _getContainerProperties.getContainerProperties)({
+      containerType: containerType,
+      iconSize: 'medium',
+      containerTypeProperties: containerTypeProperties
+    }),
+    description = _getContainerProperti.description,
+    containerTypeText = _getContainerProperti.containerTypeText;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    hovered = _useState2[0],
+    setHovered = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    focused = _useState4[0],
+    setFocused = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    isDropdownOpen = _useState6[0],
+    setIsDropdownOpen = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    showKeyboardFocus = _useState8[0],
+    setShowKeyboardFocus = _useState8[1];
+  var _usePeopleAndTeamAnal = (0, _analytics.usePeopleAndTeamAnalytics)(),
+    fireUIEvent = _usePeopleAndTeamAnal.fireUIEvent;
+  var handleMouseEnter = function handleMouseEnter() {
+    setHovered(true);
+  };
+  var handleFocus = function handleFocus() {
+    setFocused(true);
+  };
+  var handleBlur = function handleBlur() {
+    setFocused(false);
+  };
+  var handleMouseLeave = function handleMouseLeave() {
+    setHovered(false);
+  };
+  var handleIconClick = function handleIconClick() {
+    setShowKeyboardFocus(false);
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.key === 'Enter' || e.key === ' ' || e.key === 'Tab' || e.key === 'Escape') {
+      setShowKeyboardFocus(true);
+    }
+  };
+  var handleLinkClick = function handleLinkClick(e) {
+    var baseAttributes = {
+      container: containerType,
+      containerId: containerId
+    };
+    var attributes = containerType === 'WebLink' && link ? {
+      containerSelected: _objectSpread(_objectSpread({}, baseAttributes), {}, {
+        linkDomain: (0, _getLinkDomain.getDomainFromLinkUri)(link)
+      })
+    } : {
+      containerSelected: baseAttributes
+    };
+    fireUIEvent(createAnalyticsEvent, {
+      action: _analytics.AnalyticsAction.CLICKED,
+      actionSubject: 'container',
+      actionSubjectId: 'teamContainer',
+      attributes: attributes
+    });
+    if (openInNewTab) {
+      e.preventDefault();
+      window.open(link || '#', '_blank', 'noopener, noreferrer');
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    backgroundColor: hovered ? 'elevation.surface.hovered' : 'elevation.surface.raised',
+    xcss: styles.container,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onKeyDown: handleKeyDown,
+    testId: "team-link-card-inner"
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
+    space: "space.100",
+    xcss: styles.card
+  }, /*#__PURE__*/_react.default.createElement(_containerIcon.ContainerIcon, {
+    containerType: containerType,
+    title: title,
+    containerIcon: containerIcon,
+    size: "small",
+    iconsLoading: iconsLoading,
+    iconHasLoaded: iconHasLoaded
+  }), /*#__PURE__*/_react.default.createElement(_compiled.Anchor, {
+    xcss: styles.anchor,
+    href: link || '#',
+    onClick: handleLinkClick,
+    testId: "team-link-card-linkable-content"
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
+    space: "space.025"
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+    maxLines: 1,
+    weight: "medium",
+    color: "color.text"
+  }, title), /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
+    gap: "space.050",
+    alignItems: "center"
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
+    space: "space.050"
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+    size: "small",
+    color: "color.text.subtle"
+  }, description), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+    size: "small",
+    color: "color.text.subtle"
+  }, containerTypeText))))), !isReadOnly && /*#__PURE__*/_react.default.createElement(_teamLinkCardActions.TeamLinkCardActions, {
+    containerType: containerType,
+    title: title,
+    containerId: containerId,
+    hovered: hovered,
+    focused: focused,
+    isDropdownOpen: isDropdownOpen,
+    showKeyboardFocus: showKeyboardFocus,
+    onDisconnectButtonClick: function onDisconnectButtonClick() {
+      handleIconClick();
+      _onDisconnectButtonClick();
+    },
+    onEditLinkClick: function onEditLinkClick() {
+      handleIconClick();
+      _onEditLinkClick === null || _onEditLinkClick === void 0 || _onEditLinkClick();
+    },
+    onDropdownOpenChange: setIsDropdownOpen
+  })));
+};

package/dist/cjs/ui/team-containers/add-container-card/index.js

@@ -105,29 +105,31 @@ var AddContainerCard = exports.AddContainerCard = function AddContainerCard(_ref
 var getAddContainerCards = exports.getAddContainerCards = function getAddContainerCards(_ref3) {
   var containers = _ref3.containers,
     _onAddAContainerClick = _ref3.onAddAContainerClick,
+    CustomAddContainerCard = _ref3.CustomAddContainerCard,
     showNewDesign = _ref3.showNewDesign;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, containers.Jira.canAdd && /*#__PURE__*/_react.default.createElement(AddContainerCard, {
+  var AddContainerCardComponent = CustomAddContainerCard !== null && CustomAddContainerCard !== void 0 ? CustomAddContainerCard : AddContainerCard;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, containers.Jira.canAdd && /*#__PURE__*/_react.default.createElement(AddContainerCardComponent, {
     onAddAContainerClick: function onAddAContainerClick(e) {
       return _onAddAContainerClick(e, 'Jira');
     },
     containerType: "JiraProject",
     isLoading: containers.Jira.isLoading,
     showNewDesign: showNewDesign
-  }), containers.Confluence.canAdd && /*#__PURE__*/_react.default.createElement(AddContainerCard, {
+  }), containers.Confluence.canAdd && /*#__PURE__*/_react.default.createElement(AddContainerCardComponent, {
     onAddAContainerClick: function onAddAContainerClick(e) {
       return _onAddAContainerClick(e, 'Confluence');
     },
     containerType: "ConfluenceSpace",
     isLoading: containers.Confluence.isLoading,
     showNewDesign: showNewDesign
-  }), containers.Loom.canAdd && (0, _platformFeatureFlags.fg)('loom_tab_in_container_linker_team_profile_page') && /*#__PURE__*/_react.default.createElement(AddContainerCard, {
+  }), containers.Loom.canAdd && (0, _platformFeatureFlags.fg)('loom_tab_in_container_linker_team_profile_page') && /*#__PURE__*/_react.default.createElement(AddContainerCardComponent, {
     onAddAContainerClick: function onAddAContainerClick(e) {
       return _onAddAContainerClick(e, 'Loom');
     },
     containerType: "LoomSpace",
     isLoading: containers.Loom.isLoading,
     showNewDesign: showNewDesign
-  }), containers.WebLink.canAdd && /*#__PURE__*/_react.default.createElement(AddContainerCard, {
+  }), containers.WebLink.canAdd && /*#__PURE__*/_react.default.createElement(AddContainerCardComponent, {
     onAddAContainerClick: function onAddAContainerClick(e) {
       return _onAddAContainerClick(e, 'WebLink');
     },