@atlaskit/teams-public 0.35.0 → 0.36.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/teams-public
 
+## 0.36.1
+
+### Patch Changes
+
+- [#167764](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/167764)
+  [`92745994b66b4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/92745994b66b4) -
+  [ux] NO-ISSUE Update team container icons to medium size and make team links open in a new tab
+- Updated dependencies
+
+## 0.36.0
+
+### Minor Changes
+
+- [#165970](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/165970)
+  [`2f04674b589a3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2f04674b589a3) -
+  [ux] PTC-11538 Render team web link card in team profile card && fetch team web link icons
+
 ## 0.35.0
 
 ### Minor Changes

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

@@ -0,0 +1,16 @@
+
+._2rko1hkb{border-radius:var(--ds-border-radius-050,4px)}
+._2rkoop52{border-radius:var(--ds-border-radius-100,8px)}._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}
+._1bsb1tcg{width:24px}
+._1bsb1u1b{width:34px}
+._1e0c1txw{display:flex}
+._1qu2nqa1{outline-style:solid}
+._2hwxv77o{margin-right:var(--ds-space-025,2px)}
+._4cvr1h6o{align-items:center}
+._4t3i1tcg{height:24px}
+._4t3i1u1b{height:34px}
+._bfhkqbzx{background-color:var(--ds-surface-sunken,#f7f8f9)}
+._otyrv77o{margin-bottom:var(--ds-space-025,2px)}

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

@@ -0,0 +1,46 @@
+/* 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.ContainerIcon = void 0;
+require("./index.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
+var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
+var _link = _interopRequireDefault(require("@atlaskit/icon/core/link"));
+var _compiled = require("@atlaskit/primitives/compiled");
+var _loomAvatar = require("../loom-avatar");
+var styles = {
+  linkIconWrapperMedium: "_2rkoop52 _1bsb1u1b _4t3i1u1b _1e0c1txw _4cvr1h6o _1bah1h6o _12jimuej _1qu2nqa1 _bfhkqbzx",
+  linkIconWrapperSmall: "_2rko1hkb _1bsb1tcg _4t3i1tcg _1e0c1txw _4cvr1h6o _1bah1h6o _19pkv77o _2hwxv77o _otyrv77o _18u0v77o _12jimuej _1qu2nqa1 _bfhkqbzx"
+};
+var ContainerIcon = exports.ContainerIcon = function ContainerIcon(_ref) {
+  var containerType = _ref.containerType,
+    title = _ref.title,
+    containerIcon = _ref.containerIcon,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size;
+  if (containerType === 'LoomSpace') {
+    return /*#__PURE__*/_react.default.createElement(_loomAvatar.LoomSpaceAvatar, {
+      spaceName: title,
+      size: size === 'medium' ? 'large' : size
+    });
+  }
+  if (containerType === 'WebLink' && !containerIcon) {
+    return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      xcss: size === 'medium' ? styles.linkIconWrapperMedium : styles.linkIconWrapperSmall
+    }, /*#__PURE__*/_react.default.createElement(_link.default, {
+      label: "",
+      testId: "linked-container-WebLink-icon"
+    }));
+  }
+  return /*#__PURE__*/_react.default.createElement(_avatar.default, {
+    appearance: "square",
+    size: size,
+    src: containerIcon,
+    testId: "linked-container-".concat(containerType, "-icon")
+  });
+};

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

@@ -12,6 +12,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireDefault(require("react"));
 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 _compiled = require("@atlaskit/primitives/compiled");
 var _ConfluenceIcon = _interopRequireDefault(require("../assets/ConfluenceIcon.svg"));
@@ -128,14 +129,19 @@ var getJiraContainerProperties = function getJiraContainerProperties(_ref) {
       return baseProperties;
   }
 };
-var getWebLinkContainerEmptyStateProperties = function getWebLinkContainerEmptyStateProperties(_ref3) {
-  var isEmptyContainer = _ref3.isEmptyContainer;
+var getWebLinkContainerProperties = function getWebLinkContainerProperties(_ref3) {
+  var isEmptyContainer = _ref3.isEmptyContainer,
+    isDisplayedOnProfileCard = _ref3.isDisplayedOnProfileCard;
   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 : /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    icon: isEmptyContainer ? null : isDisplayedOnProfileCard ? /*#__PURE__*/_react.default.createElement(_linkExternal.default, {
+      label: "",
+      size: "small",
+      testId: "team-link-card-external-link-icon"
+    }) : /*#__PURE__*/_react.default.createElement(_compiled.Box, {
       xcss: styles.globeIconWrapper,
       testId: "team-link-card-globe-icon"
     }, /*#__PURE__*/_react.default.createElement(_globe.default, {
@@ -151,7 +157,8 @@ var getContainerProperties = exports.getContainerProperties = function getContai
     _ref4$iconSize = _ref4.iconSize,
     iconSize = _ref4$iconSize === void 0 ? 'small' : _ref4$iconSize,
     containerTypeProperties = _ref4.containerTypeProperties,
-    isEmptyContainer = _ref4.isEmptyContainer;
+    isEmptyContainer = _ref4.isEmptyContainer,
+    isDisplayedOnProfileCard = _ref4.isDisplayedOnProfileCard;
   switch (containerType) {
     case 'ConfluenceSpace':
       return {
@@ -163,7 +170,7 @@ var getContainerProperties = exports.getContainerProperties = function getContai
           alt: "",
           testId: "confluence-space-container-icon"
         })),
-        title: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.addLoomContainerTitle),
+        title: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.addConfluenceContainerTitle),
         containerTypeText: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.spaceContainerText)
       };
     case 'LoomSpace':
@@ -174,9 +181,9 @@ var getContainerProperties = exports.getContainerProperties = function getContai
         }, /*#__PURE__*/_react.default.createElement(_image.default, {
           src: _LoomIcon.default,
           alt: "",
-          testId: "confluence-space-container-icon"
+          testId: "loom-space-container-icon"
         })),
-        title: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.addConfluenceContainerTitle),
+        title: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.addLoomContainerTitle),
         containerTypeText: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.spaceContainerText)
       };
     case 'JiraProject':
@@ -185,8 +192,9 @@ var getContainerProperties = exports.getContainerProperties = function getContai
         iconSize: iconSize
       });
     case 'WebLink':
-      return getWebLinkContainerEmptyStateProperties({
-        isEmptyContainer: isEmptyContainer
+      return getWebLinkContainerProperties({
+        isEmptyContainer: isEmptyContainer,
+        isDisplayedOnProfileCard: isDisplayedOnProfileCard
       });
     default:
       return {

package/dist/cjs/common/utils/team-web-link-converters.js

@@ -11,17 +11,23 @@ var containerToNewWebLink = exports.containerToNewWebLink = function containerTo
     linkUri: container.link || ''
   };
 };
-var webLinkToContainer = exports.webLinkToContainer = function webLinkToContainer(link) {
+var webLinkToContainer = exports.webLinkToContainer = function webLinkToContainer(link, iconData) {
   return {
     id: link.linkId,
     type: 'WebLink',
     name: link.contentTitle,
-    icon: null,
+    icon: (iconData === null || iconData === void 0 ? void 0 : iconData.iconUrl) || null,
     link: link.linkUri
   };
 };
 var webLinksToContainers = exports.webLinksToContainers = function webLinksToContainers(links) {
-  return links.map(webLinkToContainer);
+  var linkIcons = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  return links.map(function (link) {
+    var iconData = linkIcons.find(function (icon) {
+      return icon.linkUrl === link.linkUri;
+    });
+    return webLinkToContainer(link, iconData);
+  });
 };
 var isNewTeamWebLink = exports.isNewTeamWebLink = function isNewTeamWebLink(input) {
   return 'contentTitle' in input && 'linkUri' in input && !('type' in input) && !('id' in input);

package/dist/cjs/controllers/hooks/use-team-links-and-containers/index.js

@@ -30,6 +30,7 @@ var useTeamLinksAndContainers = exports.useTeamLinksAndContainers = function use
     _useTeamWebLinks2 = (0, _slicedToArray2.default)(_useTeamWebLinks, 2),
     _useTeamWebLinks2$ = _useTeamWebLinks2[0],
     links = _useTeamWebLinks2$.links,
+    linkIcons = _useTeamWebLinks2$.linkIcons,
     webLinksLoading = _useTeamWebLinks2$.isLoading,
     webLinksError = _useTeamWebLinks2$.hasError,
     webLinksHasLoaded = _useTeamWebLinks2$.hasLoaded,
@@ -42,8 +43,8 @@ var useTeamLinksAndContainers = exports.useTeamLinksAndContainers = function use
     getTeamWebLinks(teamId);
   }, [getTeamWebLinks, teamId]);
   var webLinkContainers = (0, _react.useMemo)(function () {
-    return (0, _teamWebLinkConverters.webLinksToContainers)(links);
-  }, [links]);
+    return (0, _teamWebLinkConverters.webLinksToContainers)(links, linkIcons);
+  }, [links, linkIcons]);
   var allContainers = (0, _react.useMemo)(function () {
     return [].concat((0, _toConsumableArray2.default)(teamContainers), (0, _toConsumableArray2.default)(webLinkContainers));
   }, [teamContainers, webLinkContainers]);

package/dist/cjs/controllers/hooks/use-team-web-links/index.js

@@ -20,17 +20,20 @@ var _initialState = {
   hasError: false,
   shouldReload: false,
   errorType: null,
-  links: []
+  links: [],
+  linkIcons: [],
+  iconsLoading: false,
+  iconsError: false
 };
 var actions = exports.actions = {
   getTeamWebLinks: function getTeamWebLinks(teamId) {
     return /*#__PURE__*/function () {
       var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref) {
-        var getState, setState, _getState, links, currentTeamId, initialLinks, _yield$teamsClient$ge, entities;
+        var getState, setState, dispatch, _getState, links, currentTeamId, initialLinks, _yield$teamsClient$ge, entities;
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              getState = _ref.getState, setState = _ref.setState;
+              getState = _ref.getState, setState = _ref.setState, dispatch = _ref.dispatch;
               _getState = getState(), links = _getState.links, currentTeamId = _getState.teamId;
               initialLinks = teamId === currentTeamId ? links : [];
               setState({
@@ -60,17 +63,20 @@ var actions = exports.actions = {
                 shouldReload: false,
                 links: entities
               });
-              _context.next = 19;
+              if (entities.length > 0) {
+                dispatch(actions.getTeamWebLinkIcons(teamId));
+              }
+              _context.next = 20;
               break;
-            case 14:
-              _context.prev = 14;
+            case 15:
+              _context.prev = 15;
               _context.t0 = _context["catch"](4);
               if (!(getState().teamId !== teamId)) {
-                _context.next = 18;
+                _context.next = 19;
                 break;
               }
               return _context.abrupt("return");
-            case 18:
+            case 19:
               setState({
                 isLoading: false,
                 hasLoaded: true,
@@ -79,69 +85,115 @@ var actions = exports.actions = {
                 shouldReload: false,
                 links: []
               });
-            case 19:
+            case 20:
             case "end":
               return _context.stop();
           }
-        }, _callee, null, [[4, 14]]);
+        }, _callee, null, [[4, 15]]);
       }));
       return function (_x) {
         return _ref2.apply(this, arguments);
       };
     }();
   },
-  createTeamWebLink: function createTeamWebLink(teamId, newLink) {
+  getTeamWebLinkIcons: function getTeamWebLinkIcons(teamId) {
     return /*#__PURE__*/function () {
       var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(_ref3) {
-        var getState, setState, result, currentState;
+        var getState, setState, _getState2, links, currentIcons, linkUrls, uncachedUrls, newIconData;
         return _regenerator.default.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
               getState = _ref3.getState, setState = _ref3.setState;
-              _context2.next = 3;
-              return _teamsClient.teamsClient.createTeamLink(teamId, newLink);
-            case 3:
-              result = _context2.sent;
-              currentState = getState();
-              if (currentState.teamId === teamId) {
+              _getState2 = getState(), links = _getState2.links, currentIcons = _getState2.linkIcons;
+              if (!(links.length === 0)) {
+                _context2.next = 4;
+                break;
+              }
+              return _context2.abrupt("return");
+            case 4:
+              linkUrls = links.map(function (link) {
+                return link.linkUri;
+              });
+              uncachedUrls = linkUrls.filter(function (url) {
+                return !currentIcons.some(function (icon) {
+                  return icon.linkUrl === url;
+                });
+              });
+              if (!(uncachedUrls.length > 0)) {
+                _context2.next = 20;
+                break;
+              }
+              _context2.prev = 7;
+              setState({
+                iconsLoading: true,
+                iconsError: false
+              });
+              _context2.next = 11;
+              return _teamsClient.teamsClient.getTeamLinkIcons(uncachedUrls);
+            case 11:
+              newIconData = _context2.sent;
+              if (getState().teamId === teamId) {
                 setState({
-                  links: [].concat((0, _toConsumableArray2.default)(currentState.links), [result])
+                  linkIcons: [].concat((0, _toConsumableArray2.default)(currentIcons), (0, _toConsumableArray2.default)(newIconData || [])),
+                  iconsLoading: false,
+                  iconsError: false
                 });
               }
-              return _context2.abrupt("return", result);
-            case 7:
+              _context2.next = 18;
+              break;
+            case 15:
+              _context2.prev = 15;
+              _context2.t0 = _context2["catch"](7);
+              if (getState().teamId === teamId) {
+                setState({
+                  iconsLoading: false,
+                  iconsError: true
+                });
+              }
+            case 18:
+              _context2.next = 21;
+              break;
+            case 20:
+              setState({
+                iconsLoading: false,
+                iconsError: false
+              });
+            case 21:
             case "end":
               return _context2.stop();
           }
-        }, _callee2);
+        }, _callee2, null, [[7, 15]]);
       }));
       return function (_x2) {
         return _ref4.apply(this, arguments);
       };
     }();
   },
-  updateTeamWebLink: function updateTeamWebLink(teamId, linkId, newLink) {
+  createTeamWebLink: function createTeamWebLink(teamId, newLink) {
     return /*#__PURE__*/function () {
       var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(_ref5) {
-        var getState, setState, result, currentState;
+        var getState, setState, dispatch, result, currentState;
         return _regenerator.default.wrap(function _callee3$(_context3) {
           while (1) switch (_context3.prev = _context3.next) {
             case 0:
-              getState = _ref5.getState, setState = _ref5.setState;
+              getState = _ref5.getState, setState = _ref5.setState, dispatch = _ref5.dispatch;
               _context3.next = 3;
-              return _teamsClient.teamsClient.updateTeamLink(teamId, linkId, newLink);
+              return _teamsClient.teamsClient.createTeamLink(teamId, newLink);
             case 3:
               result = _context3.sent;
               currentState = getState();
-              if (currentState.teamId === teamId) {
-                setState({
-                  links: currentState.links.map(function (link) {
-                    return link.linkId === linkId ? result : link;
-                  })
-                });
+              if (!(currentState.teamId !== teamId)) {
+                _context3.next = 7;
+                break;
               }
               return _context3.abrupt("return", result);
             case 7:
+              setState({
+                links: [].concat((0, _toConsumableArray2.default)(currentState.links), [result])
+              });
+              dispatch(actions.getTeamWebLinkIcons(teamId));
+              return _context3.abrupt("return", result);
+            case 10:
             case "end":
               return _context3.stop();
           }
@@ -152,26 +204,45 @@ var actions = exports.actions = {
       };
     }();
   },
-  removeWebLink: function removeWebLink(teamId, linkId) {
+  updateTeamWebLink: function updateTeamWebLink(teamId, linkId, newLink) {
     return /*#__PURE__*/function () {
       var _ref8 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(_ref7) {
-        var getState, setState, currentState;
+        var getState, setState, dispatch, result, currentState, oldLink, urlChanged, updatedIcons;
         return _regenerator.default.wrap(function _callee4$(_context4) {
           while (1) switch (_context4.prev = _context4.next) {
             case 0:
-              getState = _ref7.getState, setState = _ref7.setState;
+              getState = _ref7.getState, setState = _ref7.setState, dispatch = _ref7.dispatch;
               _context4.next = 3;
-              return _teamsClient.teamsClient.deleteTeamLink(teamId, linkId);
+              return _teamsClient.teamsClient.updateTeamLink(teamId, linkId, newLink);
             case 3:
+              result = _context4.sent;
               currentState = getState();
-              if (currentState.teamId === teamId) {
+              if (!(currentState.teamId !== teamId)) {
+                _context4.next = 7;
+                break;
+              }
+              return _context4.abrupt("return", result);
+            case 7:
+              oldLink = currentState.links.find(function (link) {
+                return link.linkId === linkId;
+              });
+              urlChanged = oldLink && oldLink.linkUri !== result.linkUri;
+              setState({
+                links: currentState.links.map(function (link) {
+                  return link.linkId === linkId ? result : link;
+                })
+              });
+              if (urlChanged) {
+                updatedIcons = currentState.linkIcons.filter(function (icon) {
+                  return icon.linkUrl !== oldLink.linkUri;
+                });
                 setState({
-                  links: currentState.links.filter(function (link) {
-                    return link.linkId !== linkId;
-                  })
+                  linkIcons: updatedIcons
                 });
+                dispatch(actions.getTeamWebLinkIcons(teamId));
               }
-            case 5:
+              return _context4.abrupt("return", result);
+            case 12:
             case "end":
               return _context4.stop();
           }
@@ -182,9 +253,43 @@ var actions = exports.actions = {
       };
     }();
   },
+  removeWebLink: function removeWebLink(teamId, linkId) {
+    return /*#__PURE__*/function () {
+      var _ref0 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5(_ref9) {
+        var getState, setState, currentState;
+        return _regenerator.default.wrap(function _callee5$(_context5) {
+          while (1) switch (_context5.prev = _context5.next) {
+            case 0:
+              getState = _ref9.getState, setState = _ref9.setState;
+              currentState = getState();
+              if (!(currentState.teamId !== teamId)) {
+                _context5.next = 4;
+                break;
+              }
+              return _context5.abrupt("return");
+            case 4:
+              _context5.next = 6;
+              return _teamsClient.teamsClient.deleteTeamLink(teamId, linkId);
+            case 6:
+              setState({
+                links: currentState.links.filter(function (link) {
+                  return link.linkId !== linkId;
+                })
+              });
+            case 7:
+            case "end":
+              return _context5.stop();
+          }
+        }, _callee5);
+      }));
+      return function (_x5) {
+        return _ref0.apply(this, arguments);
+      };
+    }();
+  },
   initialState: function initialState(state) {
-    return function (_ref9) {
-      var setState = _ref9.setState;
+    return function (_ref1) {
+      var setState = _ref1.setState;
       setState(_objectSpread(_objectSpread({}, _initialState), state));
     };
   }

package/dist/cjs/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "ConfluenceIcon", {
     return _assets.ConfluenceIcon;
   }
 });
+Object.defineProperty(exports, "ContainerIcon", {
+  enumerable: true,
+  get: function get() {
+    return _containerIcon.ContainerIcon;
+  }
+});
 Object.defineProperty(exports, "JiraIcon", {
   enumerable: true,
   get: function get() {
@@ -76,6 +82,7 @@ Object.defineProperty(exports, "useTeamWebLinksActions", {
   }
 });
 var _teamContainers = require("./ui/team-containers");
+var _containerIcon = require("./common/ui/container-icon");
 var _useTeamContainers = require("./controllers/hooks/use-team-containers");
 var _useTeamWebLinks = require("./controllers/hooks/use-team-web-links");
 var _useTeamLinksAndContainers = require("./controllers/hooks/use-team-links-and-containers");

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

@@ -14,6 +14,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _new = require("@atlaskit/button/new");
 var _add = _interopRequireDefault(require("@atlaskit/icon/core/add"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _getContainerProperties = require("../../../common/utils/get-container-properties");
 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); }
@@ -48,6 +49,7 @@ var AddContainerCard = exports.AddContainerCard = function AddContainerCard(_ref
     onAddAContainerClick = _ref2.onAddAContainerClick;
   var _getContainerProperti = (0, _getContainerProperties.getContainerProperties)({
       containerType: containerType,
+      iconSize: (0, _platformFeatureFlags.fg)('enable_medium_size_icons_for_team_link_cards') ? 'medium' : undefined,
       isEmptyContainer: true
     }),
     description = _getContainerProperti.description,
@@ -73,7 +75,9 @@ var AddContainerCard = exports.AddContainerCard = function AddContainerCard(_ref
       onAddAContainerClick(e);
       e.stopPropagation();
     }
-  })), /*#__PURE__*/_react.default.createElement(_compiled.Stack, null, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+  })), /*#__PURE__*/_react.default.createElement(_compiled.Stack, (0, _platformFeatureFlags.fg)('enable_medium_size_icons_for_team_link_cards') ? {
+    space: "space.025"
+  } : {}, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
     maxLines: 1,
     weight: "medium",
     color: "color.text"

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

@@ -16,10 +16,9 @@ var _reactIntlNext = require("react-intl-next");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
 var _new = require("@atlaskit/button/new");
-var _featureGateJsClient = _interopRequireDefault(require("@atlaskit/feature-gate-js-client"));
 var _close = _interopRequireDefault(require("@atlaskit/icon/core/close"));
-var _link = _interopRequireDefault(require("@atlaskit/icon/core/link"));
-var _link2 = _interopRequireDefault(require("@atlaskit/link"));
+var _link = _interopRequireDefault(require("@atlaskit/link"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _loomAvatar = require("../../../common/ui/loom-avatar");
@@ -40,7 +39,6 @@ var styles = {
   crossIconWrapper: "_1e0c1txw _4cvr1h6o _1bahesu3 _18u01wug",
   linkIconWrapper: "_2rkoop52 _1bsb1u1b _4t3i1u1b _1e0c1txw _4cvr1h6o _1bah1h6o _12jimuej _1qu2nqa1 _bfhkqbzx"
 };
-var isSupportingAddWebLink = _featureGateJsClient.default.initializeCompleted() && _featureGateJsClient.default.getExperimentValue('team_and_container_web_link', 'isEnabled', false);
 var LinkedCardWrapper = function LinkedCardWrapper(_ref) {
   var children = _ref.children,
     href = _ref.href,
@@ -70,7 +68,7 @@ var LinkedCardWrapper = function LinkedCardWrapper(_ref) {
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     testId: "linked-container-card-inner"
-  }, /*#__PURE__*/_react.default.createElement(_link2.default, {
+  }, /*#__PURE__*/_react.default.createElement(_link.default, {
     href: href,
     appearance: "subtle",
     onClick: function onClick() {
@@ -95,13 +93,6 @@ var getContainerIcon = function getContainerIcon(containerType, title, container
       size: 'large'
     });
   }
-  if (isSupportingAddWebLink && containerType === 'WebLink') {
-    return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-      xcss: styles.linkIconWrapper
-    }, /*#__PURE__*/_react.default.createElement(_link.default, {
-      label: ""
-    }));
-  }
   return /*#__PURE__*/_react.default.createElement(_avatar.default, {
     appearance: "square",
     size: "medium",
@@ -121,7 +112,7 @@ var LinkedContainerCard = exports.LinkedContainerCard = function LinkedContainer
     createAnalyticsEvent = _useAnalyticsEvents2.createAnalyticsEvent;
   var _getContainerProperti = (0, _getContainerProperties.getContainerProperties)({
       containerType: containerType,
-      iconSize: 'small',
+      iconSize: (0, _platformFeatureFlags.fg)('enable_medium_size_icons_for_team_link_cards') ? 'medium' : 'small',
       containerTypeProperties: containerTypeProperties
     }),
     description = _getContainerProperti.description,
@@ -148,7 +139,9 @@ var LinkedContainerCard = exports.LinkedContainerCard = function LinkedContainer
   }, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
     space: "space.100",
     xcss: styles.card
-  }, getContainerIcon(containerType, title, containerIcon), /*#__PURE__*/_react.default.createElement(_compiled.Stack, null, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+  }, getContainerIcon(containerType, title, containerIcon), /*#__PURE__*/_react.default.createElement(_compiled.Stack, (0, _platformFeatureFlags.fg)('enable_medium_size_icons_for_team_link_cards') ? {
+    space: "space.025"
+  } : {}, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
     maxLines: 1,
     weight: "medium",
     color: "color.text"

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

@@ -5,10 +5,8 @@
 ._16jlkb7n{flex-grow:1}
 ._18u01wug{margin-left:auto}
 ._19bvutpp{padding-left:var(--ds-space-150,9pt)}
-._1bah1h6o{justify-content:center}
 ._1bahesu3{justify-content:flex-end}
 ._1bsb1osq{width:100%}
-._1bsb1u1b{width:34px}
 ._1bsbzwfg{width:2pc}
 ._1e0c1txw{display:flex}
 ._1o9zkb7n{flex-shrink:1}
@@ -16,9 +14,7 @@
 ._1tkezwfg{min-height:2pc}
 ._1ul9zwfg{min-width:2pc}
 ._4cvr1h6o{align-items:center}
-._4t3i1u1b{height:34px}
 ._4t3izwfg{height:2pc}
-._bfhkqbzx{background-color:var(--ds-surface-sunken,#f7f8f9)}
 ._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
 ._i0dlf1ug{flex-basis:0%}
 ._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}