@atlaskit/teams-public 0.28.0 → 0.30.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/teams-public
 
+## 0.30.0
+
+### Minor Changes
+
+- [#158122](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/158122)
+  [`cacbe1d41fcc6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cacbe1d41fcc6) -
+  [ux] Add loom space avatar
+
+## 0.29.0
+
+### Minor Changes
+
+- [#156784](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/156784)
+  [`a614e25bb80c9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a614e25bb80c9) -
+  PTC-11532 Add useTeamWebLink in teams-public, allow get/delete/update team web links in
+  teams-public
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.28.0
 
 ### Minor Changes

package/dist/cjs/common/ui/loom-avatar/index.js

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

package/dist/cjs/common/ui/loom-avatar/main.compiled.css

@@ -0,0 +1,13 @@
+._11c8140y{font:var(--ds-font-heading-xsmall,normal 600 14px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._11c8lodh{font:var(--ds-font-heading-medium,normal 500 20px/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
+._189ee4h9{border-width:var(--ds-border-width,1px)}
+._1dqonqa1{border-style:solid}
+._1h6dmuej{border-color:var(--ds-border,#091e4224)}
+._1bah1h6o{justify-content:center}
+._1bsb1tcg{width:24px}
+._1bsbzwfg{width:2pc}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
+._4t3i1tcg{height:24px}
+._4t3izwfg{height:2pc}

package/dist/cjs/common/ui/loom-avatar/main.js

@@ -0,0 +1,33 @@
+/* main.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LoomSpaceAvatar = LoomSpaceAvatar;
+require("./main.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _utils = require("./utils");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var boxStyle = null;
+var smallBoxStyle = null;
+var largeBoxStyle = null;
+function LoomSpaceAvatar(_ref) {
+  var _ref$spaceName = _ref.spaceName,
+    spaceName = _ref$spaceName === void 0 ? '' : _ref$spaceName,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'small' : _ref$size;
+  var avatarText = (0, _utils.getAvatarText)(spaceName);
+  var containerColor = (0, _utils.pickContainerColor)(spaceName);
+  var textColor = (0, _utils.pickTextColor)(spaceName);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: containerColor,
+      color: textColor
+    },
+    className: (0, _runtime.ax)(["_2rkoiti9 _189ee4h9 _1dqonqa1 _1h6dmuej _1e0c1txw _4cvr1h6o _1bah1h6o", size === 'small' ? "_11c8140y _4t3i1tcg _1bsb1tcg" : "_11c8lodh _4t3izwfg _1bsbzwfg"])
+  }, avatarText);
+}

package/dist/cjs/common/ui/loom-avatar/utils.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pickTextColor = exports.pickContainerColor = exports.getAvatarText = void 0;
+var stringHash = require('string-hash');
+var SpaceColors = /*#__PURE__*/function (SpaceColors) {
+  SpaceColors["ORANGE_LIGHT"] = "#FFD5D2";
+  SpaceColors["BLUE_LIGHT"] = "#CFE1FD";
+  SpaceColors["YELLOW_LIGHT"] = "#FCE4A6";
+  SpaceColors["TEAL"] = "#BAF3DB";
+  return SpaceColors;
+}(SpaceColors || {});
+var AvatarTextColors = /*#__PURE__*/function (AvatarTextColors) {
+  AvatarTextColors["ORANGE_DARK"] = "#AE2E24";
+  AvatarTextColors["BLUE_DARK"] = "#123263";
+  AvatarTextColors["YELLOW_DARK"] = "#9E4C00";
+  AvatarTextColors["TEAL_DARK"] = "#164B35";
+  return AvatarTextColors;
+}(AvatarTextColors || {});
+var AVATAR_CONTAINER_COLORS = [SpaceColors.ORANGE_LIGHT, SpaceColors.BLUE_LIGHT, SpaceColors.YELLOW_LIGHT, SpaceColors.TEAL];
+var AVATAR_TEXT_COLORS = [AvatarTextColors.ORANGE_DARK, AvatarTextColors.BLUE_DARK, AvatarTextColors.YELLOW_DARK, AvatarTextColors.TEAL_DARK];
+var hash = function hash(str) {
+  var hash = stringHash(str);
+  hash = ~hash;
+  return Math.abs(Number(hash));
+};
+var getAvatarText = exports.getAvatarText = function getAvatarText(spaceName) {
+  return spaceName !== null && spaceName !== void 0 && spaceName.trim().length ? spaceName.trim()[0].toUpperCase() : '';
+};
+var pickContainerColor = exports.pickContainerColor = function pickContainerColor(spaceName) {
+  var avatarHash = hash(spaceName);
+  return AVATAR_CONTAINER_COLORS[avatarHash % AVATAR_CONTAINER_COLORS.length];
+};
+var pickTextColor = exports.pickTextColor = function pickTextColor(spaceName) {
+  var avatarHash = hash(spaceName);
+  return AVATAR_TEXT_COLORS[avatarHash % AVATAR_TEXT_COLORS.length];
+};

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

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.webLinksToContainers = exports.webLinkToContainer = exports.containerToNewWebLink = void 0;
+var containerToNewWebLink = exports.containerToNewWebLink = function containerToNewWebLink(container) {
+  return {
+    contentTitle: container.name,
+    description: '',
+    linkUri: container.link || ''
+  };
+};
+var webLinkToContainer = exports.webLinkToContainer = function webLinkToContainer(link) {
+  return {
+    id: link.linkId,
+    type: 'WebLink',
+    name: link.contentTitle,
+    icon: null,
+    link: link.linkUri
+  };
+};
+var webLinksToContainers = exports.webLinksToContainers = function webLinksToContainers(links) {
+  return links.map(webLinkToContainer);
+};

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

@@ -0,0 +1,162 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTeamWebLinksActions = exports.useTeamWebLinks = exports.actions = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _reactSweetState = require("react-sweet-state");
+var _teamsClient = require("@atlaskit/teams-client");
+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 _initialState = {
+  teamId: '',
+  isLoading: false,
+  hasLoaded: false,
+  hasError: false,
+  shouldReload: false,
+  errorType: null,
+  links: []
+};
+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;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              getState = _ref.getState, setState = _ref.setState;
+              _getState = getState(), links = _getState.links, currentTeamId = _getState.teamId;
+              initialLinks = teamId === currentTeamId ? links : [];
+              setState({
+                teamId: teamId,
+                isLoading: true,
+                hasLoaded: false,
+                hasError: false,
+                shouldReload: false,
+                links: initialLinks
+              });
+              _context.prev = 4;
+              _context.next = 7;
+              return _teamsClient.teamsClient.getTeamLinksByTeamId(teamId);
+            case 7:
+              _yield$teamsClient$ge = _context.sent;
+              entities = _yield$teamsClient$ge.entities;
+              if (!(getState().teamId !== teamId)) {
+                _context.next = 11;
+                break;
+              }
+              return _context.abrupt("return");
+            case 11:
+              setState({
+                isLoading: false,
+                hasLoaded: true,
+                hasError: false,
+                shouldReload: false,
+                links: entities
+              });
+              _context.next = 19;
+              break;
+            case 14:
+              _context.prev = 14;
+              _context.t0 = _context["catch"](4);
+              if (!(getState().teamId !== teamId)) {
+                _context.next = 18;
+                break;
+              }
+              return _context.abrupt("return");
+            case 18:
+              setState({
+                isLoading: false,
+                hasLoaded: true,
+                hasError: true,
+                errorType: _context.t0 instanceof Error ? _context.t0 : undefined,
+                shouldReload: false,
+                links: []
+              });
+            case 19:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[4, 14]]);
+      }));
+      return function (_x) {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+  },
+  createTeamWebLink: function createTeamWebLink(teamId, newLink) {
+    return /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+      return _regenerator.default.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.next = 2;
+            return _teamsClient.teamsClient.createTeamLink(teamId, newLink);
+          case 2:
+            return _context2.abrupt("return", _context2.sent);
+          case 3:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+  },
+  updateTeamWebLink: function updateTeamWebLink(teamId, linkId, newLink) {
+    return /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
+      return _regenerator.default.wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            _context3.next = 2;
+            return _teamsClient.teamsClient.updateTeamLink(teamId, linkId, newLink);
+          case 2:
+            return _context3.abrupt("return", _context3.sent);
+          case 3:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3);
+    }));
+  },
+  removeWebLink: function removeWebLink(teamId, linkId) {
+    return /*#__PURE__*/function () {
+      var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(_ref5) {
+        var dispatch;
+        return _regenerator.default.wrap(function _callee4$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
+            case 0:
+              dispatch = _ref5.dispatch;
+              _context4.next = 3;
+              return _teamsClient.teamsClient.deleteTeamLink(teamId, linkId);
+            case 3:
+              _context4.next = 5;
+              return dispatch(actions.getTeamWebLinks(teamId));
+            case 5:
+            case "end":
+              return _context4.stop();
+          }
+        }, _callee4);
+      }));
+      return function (_x2) {
+        return _ref6.apply(this, arguments);
+      };
+    }();
+  },
+  initialState: function initialState(state) {
+    return function (_ref7) {
+      var setState = _ref7.setState;
+      setState(_objectSpread(_objectSpread({}, _initialState), state));
+    };
+  }
+};
+var TeamWebLinksStore = (0, _reactSweetState.createStore)({
+  initialState: _initialState,
+  actions: actions
+});
+var useTeamWebLinks = exports.useTeamWebLinks = (0, _reactSweetState.createHook)(TeamWebLinksStore);
+var useTeamWebLinksActions = exports.useTeamWebLinksActions = (0, _reactSweetState.createHook)(TeamWebLinksStore, {
+  selector: null
+});

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/controllers/index.js

@@ -15,5 +15,18 @@ Object.defineProperty(exports, "useTeamContainers", {
     return _useTeamContainers.useTeamContainers;
   }
 });
+Object.defineProperty(exports, "useTeamWebLinks", {
+  enumerable: true,
+  get: function get() {
+    return _useTeamWebLinks.useTeamWebLinks;
+  }
+});
+Object.defineProperty(exports, "useTeamWebLinksActions", {
+  enumerable: true,
+  get: function get() {
+    return _useTeamWebLinks.useTeamWebLinksActions;
+  }
+});
 var _useTeamContainers = require("./hooks/use-team-containers");
+var _useTeamWebLinks = require("./hooks/use-team-web-links");
 var _utils = require("./product-permission/utils");

package/dist/cjs/index.js

@@ -57,8 +57,21 @@ Object.defineProperty(exports, "useTeamContainers", {
     return _useTeamContainers.useTeamContainers;
   }
 });
+Object.defineProperty(exports, "useTeamWebLinks", {
+  enumerable: true,
+  get: function get() {
+    return _useTeamWebLinks.useTeamWebLinks;
+  }
+});
+Object.defineProperty(exports, "useTeamWebLinksActions", {
+  enumerable: true,
+  get: function get() {
+    return _useTeamWebLinks.useTeamWebLinksActions;
+  }
+});
 var _teamContainers = require("./ui/team-containers");
 var _useTeamContainers = require("./controllers/hooks/use-team-containers");
+var _useTeamWebLinks = require("./controllers/hooks/use-team-web-links");
 var _useProductPermission = require("./controllers/hooks/use-product-permission");
 var _utils = require("./controllers/product-permission/utils");
 var _getContainerProperties = require("./common/utils/get-container-properties");

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

@@ -21,6 +21,7 @@ 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");
 var _analytics = require("../../../common/utils/analytics");
 var _getContainerProperties = require("../../../common/utils/get-container-properties");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -78,6 +79,20 @@ var LinkedCardWrapper = function LinkedCardWrapper(_ref) {
     }
   }, children));
 };
+var getContainerIcon = function getContainerIcon(containerType, title, containerIcon) {
+  if (containerType === 'LoomSpace') {
+    return /*#__PURE__*/_react.default.createElement(_loomAvatar.LoomSpaceAvatar, {
+      spaceName: title,
+      size: 'large'
+    });
+  }
+  return /*#__PURE__*/_react.default.createElement(_avatar.default, {
+    appearance: "square",
+    size: "medium",
+    src: containerIcon,
+    testId: "linked-container-icon"
+  });
+};
 var LinkedContainerCard = exports.LinkedContainerCard = function LinkedContainerCard(_ref2) {
   var containerType = _ref2.containerType,
     title = _ref2.title,
@@ -113,12 +128,7 @@ var LinkedContainerCard = exports.LinkedContainerCard = function LinkedContainer
   }, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
     space: "space.100",
     xcss: styles.card
-  }, /*#__PURE__*/_react.default.createElement(_avatar.default, {
-    appearance: "square",
-    size: "medium",
-    src: containerIcon,
-    testId: "linked-container-icon"
-  }), /*#__PURE__*/_react.default.createElement(_compiled.Stack, null, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+  }, getContainerIcon(containerType, title, containerIcon), /*#__PURE__*/_react.default.createElement(_compiled.Stack, null, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
     maxLines: 1,
     weight: "medium",
     color: "color.text"

package/dist/es2019/common/ui/loom-avatar/index.js

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

package/dist/es2019/common/ui/loom-avatar/main.compiled.css

@@ -0,0 +1,13 @@
+._11c8140y{font:var(--ds-font-heading-xsmall,normal 600 14px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._11c8lodh{font:var(--ds-font-heading-medium,normal 500 20px/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
+._189ee4h9{border-width:var(--ds-border-width,1px)}
+._1dqonqa1{border-style:solid}
+._1h6dmuej{border-color:var(--ds-border,#091e4224)}
+._1bah1h6o{justify-content:center}
+._1bsb1tcg{width:24px}
+._1bsbzwfg{width:2pc}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
+._4t3i1tcg{height:24px}
+._4t3izwfg{height:2pc}

package/dist/es2019/common/ui/loom-avatar/main.js

@@ -0,0 +1,23 @@
+/* main.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./main.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { getAvatarText, pickContainerColor, pickTextColor } from './utils';
+const boxStyle = null;
+const smallBoxStyle = null;
+const largeBoxStyle = null;
+export function LoomSpaceAvatar({
+  spaceName = '',
+  size = 'small'
+}) {
+  const avatarText = getAvatarText(spaceName);
+  const containerColor = pickContainerColor(spaceName);
+  const textColor = pickTextColor(spaceName);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: containerColor,
+      color: textColor
+    },
+    className: ax(["_2rkoiti9 _189ee4h9 _1dqonqa1 _1h6dmuej _1e0c1txw _4cvr1h6o _1bah1h6o", size === 'small' ? "_11c8140y _4t3i1tcg _1bsb1tcg" : "_11c8lodh _4t3izwfg _1bsbzwfg"])
+  }, avatarText);
+}

package/dist/es2019/common/ui/loom-avatar/utils.js

@@ -0,0 +1,33 @@
+const stringHash = require('string-hash');
+var SpaceColors = /*#__PURE__*/function (SpaceColors) {
+  SpaceColors["ORANGE_LIGHT"] = "#FFD5D2";
+  SpaceColors["BLUE_LIGHT"] = "#CFE1FD";
+  SpaceColors["YELLOW_LIGHT"] = "#FCE4A6";
+  SpaceColors["TEAL"] = "#BAF3DB";
+  return SpaceColors;
+}(SpaceColors || {});
+var AvatarTextColors = /*#__PURE__*/function (AvatarTextColors) {
+  AvatarTextColors["ORANGE_DARK"] = "#AE2E24";
+  AvatarTextColors["BLUE_DARK"] = "#123263";
+  AvatarTextColors["YELLOW_DARK"] = "#9E4C00";
+  AvatarTextColors["TEAL_DARK"] = "#164B35";
+  return AvatarTextColors;
+}(AvatarTextColors || {});
+const AVATAR_CONTAINER_COLORS = [SpaceColors.ORANGE_LIGHT, SpaceColors.BLUE_LIGHT, SpaceColors.YELLOW_LIGHT, SpaceColors.TEAL];
+const AVATAR_TEXT_COLORS = [AvatarTextColors.ORANGE_DARK, AvatarTextColors.BLUE_DARK, AvatarTextColors.YELLOW_DARK, AvatarTextColors.TEAL_DARK];
+const hash = str => {
+  let hash = stringHash(str);
+  hash = ~hash;
+  return Math.abs(Number(hash));
+};
+export const getAvatarText = spaceName => {
+  return spaceName !== null && spaceName !== void 0 && spaceName.trim().length ? spaceName.trim()[0].toUpperCase() : '';
+};
+export const pickContainerColor = spaceName => {
+  const avatarHash = hash(spaceName);
+  return AVATAR_CONTAINER_COLORS[avatarHash % AVATAR_CONTAINER_COLORS.length];
+};
+export const pickTextColor = spaceName => {
+  const avatarHash = hash(spaceName);
+  return AVATAR_TEXT_COLORS[avatarHash % AVATAR_TEXT_COLORS.length];
+};

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

@@ -0,0 +1,19 @@
+export const containerToNewWebLink = container => {
+  return {
+    contentTitle: container.name,
+    description: '',
+    linkUri: container.link || ''
+  };
+};
+export const webLinkToContainer = link => {
+  return {
+    id: link.linkId,
+    type: 'WebLink',
+    name: link.contentTitle,
+    icon: null,
+    link: link.linkUri
+  };
+};
+export const webLinksToContainers = links => {
+  return links.map(webLinkToContainer);
+};

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

@@ -0,0 +1,86 @@
+import { createHook, createStore } from 'react-sweet-state';
+import { teamsClient } from '@atlaskit/teams-client';
+const initialState = {
+  teamId: '',
+  isLoading: false,
+  hasLoaded: false,
+  hasError: false,
+  shouldReload: false,
+  errorType: null,
+  links: []
+};
+export const actions = {
+  getTeamWebLinks: teamId => async ({
+    getState,
+    setState
+  }) => {
+    const {
+      links,
+      teamId: currentTeamId
+    } = getState();
+    const initialLinks = teamId === currentTeamId ? links : [];
+    setState({
+      teamId,
+      isLoading: true,
+      hasLoaded: false,
+      hasError: false,
+      shouldReload: false,
+      links: initialLinks
+    });
+    try {
+      const {
+        entities
+      } = await teamsClient.getTeamLinksByTeamId(teamId);
+      if (getState().teamId !== teamId) {
+        return;
+      }
+      setState({
+        isLoading: false,
+        hasLoaded: true,
+        hasError: false,
+        shouldReload: false,
+        links: entities
+      });
+    } catch (e) {
+      if (getState().teamId !== teamId) {
+        return;
+      }
+      setState({
+        isLoading: false,
+        hasLoaded: true,
+        hasError: true,
+        errorType: e instanceof Error ? e : undefined,
+        shouldReload: false,
+        links: []
+      });
+    }
+  },
+  createTeamWebLink: (teamId, newLink) => async () => {
+    return await teamsClient.createTeamLink(teamId, newLink);
+  },
+  updateTeamWebLink: (teamId, linkId, newLink) => async () => {
+    return await teamsClient.updateTeamLink(teamId, linkId, newLink);
+  },
+  removeWebLink: (teamId, linkId) => async ({
+    dispatch
+  }) => {
+    await teamsClient.deleteTeamLink(teamId, linkId);
+    await dispatch(actions.getTeamWebLinks(teamId));
+  },
+  initialState: state => ({
+    setState
+  }) => {
+    setState({
+      ...initialState,
+      ...state
+    });
+  }
+};
+const TeamWebLinksStore = createStore({
+  initialState,
+  actions
+});
+export const useTeamWebLinks = createHook(TeamWebLinksStore);
+export const useTeamWebLinksActions = createHook(TeamWebLinksStore, {
+  selector: null
+});

package/dist/es2019/controllers/hooks/use-team-web-links/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/controllers/index.js

@@ -1,2 +1,3 @@
 export { useTeamContainers } from './hooks/use-team-containers';
+export { useTeamWebLinks, useTeamWebLinksActions } from './hooks/use-team-web-links';
 export { hasProductPermission } from './product-permission/utils';

package/dist/es2019/index.js

@@ -1,5 +1,6 @@
 export { TeamContainers } from './ui/team-containers';
 export { useTeamContainers, useConnectedTeams } from './controllers/hooks/use-team-containers';
+export { useTeamWebLinks, useTeamWebLinksActions } from './controllers/hooks/use-team-web-links';
 export { useProductPermissions } from './controllers/hooks/use-product-permission';
 export { hasProductPermission } from './controllers/product-permission/utils';
 export { getContainerProperties } from './common/utils/get-container-properties';

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

@@ -12,6 +12,7 @@ import Link from '@atlaskit/link';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Flex, Inline, Stack, Text } from '@atlaskit/primitives/compiled';
 import Tooltip from '@atlaskit/tooltip';
+import { LoomSpaceAvatar } from '../../../common/ui/loom-avatar';
 import { AnalyticsAction, usePeopleAndTeamAnalytics } from '../../../common/utils/analytics';
 import { getContainerProperties } from '../../../common/utils/get-container-properties';
 const styles = {
@@ -67,6 +68,20 @@ const LinkedCardWrapper = ({
     }
   }, children));
 };
+const getContainerIcon = (containerType, title, containerIcon) => {
+  if (containerType === 'LoomSpace') {
+    return /*#__PURE__*/React.createElement(LoomSpaceAvatar, {
+      spaceName: title,
+      size: 'large'
+    });
+  }
+  return /*#__PURE__*/React.createElement(Avatar, {
+    appearance: "square",
+    size: "medium",
+    src: containerIcon,
+    testId: "linked-container-icon"
+  });
+};
 export const LinkedContainerCard = ({
   containerType,
   title,
@@ -100,12 +115,7 @@ export const LinkedContainerCard = ({
   }, /*#__PURE__*/React.createElement(Inline, {
     space: "space.100",
     xcss: styles.card
-  }, /*#__PURE__*/React.createElement(Avatar, {
-    appearance: "square",
-    size: "medium",
-    src: containerIcon,
-    testId: "linked-container-icon"
-  }), /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Text, {
+  }, getContainerIcon(containerType, title, containerIcon), /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Text, {
     maxLines: 1,
     weight: "medium",
     color: "color.text"

package/dist/esm/common/ui/loom-avatar/index.js

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