@atlaskit/teams-public 0.5.2 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/teams-public
 
+## 0.7.0
+
+### Minor Changes
+
+- [#121085](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/121085)
+  [`56290b97f918e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/56290b97f918e) -
+  [ux] Allow consumer to override container card component
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.6.0
+
+### Minor Changes
+
+- [#118229](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/118229)
+  [`bc2dbf27cd24c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bc2dbf27cd24c) -
+  [ux] Update team container list on add new container
+
 ## 0.5.2
 
 ### Patch Changes

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

@@ -6,11 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useTeamContainersHook = exports.useTeamContainers = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = require("react");
 var _reactSweetState = require("react-sweet-state");
 var _services = require("../../../services");
+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 = {
   teamContainers: [],
   loading: true,
@@ -103,6 +107,38 @@ var actions = {
         return _ref4.apply(this, arguments);
       };
     }();
+  },
+  addTeamContainer: function addTeamContainer(teamContainer) {
+    return /*#__PURE__*/function () {
+      var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(_ref5) {
+        var setState, getState, _getState, teamContainers, containerExists;
+        return _regenerator.default.wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              setState = _ref5.setState, getState = _ref5.getState;
+              _getState = getState(), teamContainers = _getState.teamContainers;
+              containerExists = teamContainers.some(function (container) {
+                return container.id === teamContainer.id;
+              });
+              if (!containerExists) {
+                _context3.next = 5;
+                break;
+              }
+              return _context3.abrupt("return");
+            case 5:
+              setState({
+                teamContainers: [].concat((0, _toConsumableArray2.default)(teamContainers), [teamContainer])
+              });
+            case 6:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3);
+      }));
+      return function (_x3) {
+        return _ref6.apply(this, arguments);
+      };
+    }();
   }
 };
 var Store = (0, _reactSweetState.createStore)({
@@ -119,5 +155,7 @@ var useTeamContainers = exports.useTeamContainers = function useTeamContainers(t
   (0, _react.useEffect)(function () {
     actions.fetchTeamContainers(teamId);
   }, [teamId, actions]);
-  return state;
+  return _objectSpread(_objectSpread({}, state), {}, {
+    addTeamContainer: actions.addTeamContainer
+  });
 };

package/dist/cjs/index.js

@@ -9,4 +9,11 @@ Object.defineProperty(exports, "TeamContainers", {
     return _teamContainers.TeamContainers;
   }
 });
-var _teamContainers = require("./ui/team-containers");
+Object.defineProperty(exports, "useTeamContainers", {
+  enumerable: true,
+  get: function get() {
+    return _useTeamContainers.useTeamContainers;
+  }
+});
+var _teamContainers = require("./ui/team-containers");
+var _useTeamContainers = require("./controllers/hooks/use-team-containers");

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

@@ -2,7 +2,9 @@
 ._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}._12jimuej{outline-color:var(--ds-border,#091e4224)}
 ._12y3e4h9{outline-width:var(--ds-border-width,1px)}
 ._19bvutpp{padding-left:var(--ds-space-150,9pt)}
+._1bsb1osq{width:100%}
 ._1qu2gq9o{outline-style:dashed}
+._4cvr1h6o{align-items:center}
 ._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
 ._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
 ._syaz131l{color:var(--ds-text-subtlest,#626f86)}

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

@@ -13,16 +13,16 @@ 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/utility/add"));
-var _menu = require("@atlaskit/menu");
 var _compiled = require("@atlaskit/primitives/compiled");
 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); }
 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 styles = {
+  card: "_4cvr1h6o _1bsb1osq",
   container: "_2rkoiti9 _ca0qutpp _u5f3utpp _n3tdutpp _19bvutpp",
   iconWrapper: "_2rkoiti9 _12y3e4h9 _12jimuej _1qu2gq9o _syaz131l _4cvxmuej _ksodnqa1"
 };
-var CustomItemInner = function CustomItemInner(_ref) {
+var AddContainerCardWrapper = function AddContainerCardWrapper(_ref) {
   var children = _ref.children;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -48,22 +48,28 @@ var AddContainerCard = exports.AddContainerCard = function AddContainerCard(_ref
     description = _getContainerProperti.description,
     icon = _getContainerProperti.icon,
     title = _getContainerProperti.title;
-  return /*#__PURE__*/_react.default.createElement(_menu.CustomItem, {
-    iconBefore: /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-      xcss: styles.iconWrapper
-    }, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
-      label: "Add a container",
-      appearance: "subtle",
-      icon: _add.default,
-      spacing: "compact",
-      testId: "add-icon",
-      onClick: function onClick(e) {
-        return onAddAContainerClick(e);
-      }
-    })),
-    component: CustomItemInner,
-    description: /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
-      space: "space.050"
-    }, icon, description)
-  }, title);
+  return /*#__PURE__*/_react.default.createElement(AddContainerCardWrapper, null, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
+    space: "space.100",
+    xcss: styles.card
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.iconWrapper
+  }, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
+    label: "Add a container",
+    appearance: "subtle",
+    icon: _add.default,
+    spacing: "compact",
+    testId: "add-icon",
+    onClick: function onClick(e) {
+      return onAddAContainerClick(e);
+    }
+  })), /*#__PURE__*/_react.default.createElement(_compiled.Stack, null, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+    maxLines: 1,
+    weight: "medium",
+    color: "color.text"
+  }, title), /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
+    gap: "space.050"
+  }, icon, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+    size: "small",
+    color: "color.text.subtle"
+  }, description)))));
 };

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

@@ -2,10 +2,17 @@
 ._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
 ._1h6dz9xs{border-color:var(--ds-border-accent-gray,#758195)}._12jimuej{outline-color:var(--ds-border,#091e4224)}
 ._12y3e4h9{outline-width:var(--ds-border-width,1px)}
+._18u01wug{margin-left:auto}
 ._19bvutpp{padding-left:var(--ds-space-150,9pt)}
-._1bsb1tcg{width:24px}
+._1bahesu3{justify-content:flex-end}
+._1bsb1osq{width:100%}
+._1bsbzwfg{width:2pc}
+._1e0c1txw{display:flex}
 ._1qu2nqa1{outline-style:solid}
-._4t3i1tcg{height:24px}
+._1tkezwfg{min-height:2pc}
+._1ul9zwfg{min-width:2pc}
+._4cvr1h6o{align-items:center}
+._4t3izwfg{height:2pc}
 ._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
 ._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
 ._syaz1fxt{color:var(--ds-text,#172b4d)}

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

@@ -16,7 +16,6 @@ var _new = require("@atlaskit/button/new");
 var _cross = _interopRequireDefault(require("@atlaskit/icon/utility/cross"));
 var _image = _interopRequireDefault(require("@atlaskit/image"));
 var _link = _interopRequireDefault(require("@atlaskit/link"));
-var _menu = require("@atlaskit/menu");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _analytics = require("../../../common/utils/analytics");
 var _getContainerProperties = require("../../../common/utils/get-container-properties");
@@ -24,9 +23,11 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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 styles = {
   container: "_2rkoiti9 _1h6dz9xs _12y3e4h9 _12jimuej _1qu2nqa1 _ca0qutpp _u5f3utpp _n3tdutpp _19bvutpp _syaz1fxt",
-  iconWrapper: "_1bsb1tcg _4t3i1tcg"
+  card: "_4cvr1h6o _1bsb1osq",
+  iconWrapper: "_1bsbzwfg _4t3izwfg _1ul9zwfg _1tkezwfg",
+  crossIconWrapper: "_1e0c1txw _4cvr1h6o _1bahesu3 _18u01wug"
 };
-var CustomItemInner = function CustomItemInner(_ref) {
+var LinkedCardWrapper = function LinkedCardWrapper(_ref) {
   var children = _ref.children,
     href = _ref.href,
     handleMouseEnter = _ref.handleMouseEnter,
@@ -43,15 +44,15 @@ var CustomItemInner = function CustomItemInner(_ref) {
     handleMouseLeave();
     setHovered(false);
   };
-  return /*#__PURE__*/_react.default.createElement(_link.default, {
-    href: href,
-    appearance: "subtle"
-  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     backgroundColor: hovered ? 'color.background.input.hovered' : 'color.background.input',
     xcss: styles.container,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     testId: "linked-container-card-inner"
+  }, /*#__PURE__*/_react.default.createElement(_link.default, {
+    href: href,
+    appearance: "subtle"
   }, children));
 };
 var LinkedContainerCard = exports.LinkedContainerCard = function LinkedContainerCard(_ref2) {
@@ -69,39 +70,47 @@ var LinkedContainerCard = exports.LinkedContainerCard = function LinkedContainer
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     showCloseIcon = _useState4[0],
     setShowCloseIcon = _useState4[1];
-  return /*#__PURE__*/_react.default.createElement(_menu.CustomItem, {
-    iconBefore: /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-      xcss: styles.iconWrapper
-    }, /*#__PURE__*/_react.default.createElement(_image.default, {
-      src: containerIcon,
-      alt: "",
-      testId: "linked-container-icon"
-    })),
-    description: /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
-      space: "space.050"
-    }, icon, description),
-    iconAfter: showCloseIcon && /*#__PURE__*/_react.default.createElement(_compiled.Box, null, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
-      label: "disconnect the container ".concat(title),
-      appearance: "subtle",
-      icon: _cross.default,
-      spacing: "compact",
-      onClick: function onClick(e) {
-        e.preventDefault();
-        onDisconnectButtonClick();
-        (0, _analytics.fireUIEvent)(createAnalyticsEvent, {
-          action: _analytics.AnalyticsAction.CLICKED,
-          actionSubject: 'button',
-          actionSubjectId: 'containerUnlinkButton'
-        });
-      }
-    })),
-    href: link,
+  return /*#__PURE__*/_react.default.createElement(LinkedCardWrapper, {
+    href: link || '#',
     handleMouseEnter: function handleMouseEnter() {
       return setShowCloseIcon(true);
     },
     handleMouseLeave: function handleMouseLeave() {
       return setShowCloseIcon(false);
-    },
-    component: CustomItemInner
-  }, title);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
+    space: "space.100",
+    xcss: styles.card
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.iconWrapper
+  }, /*#__PURE__*/_react.default.createElement(_image.default, {
+    src: containerIcon,
+    alt: "",
+    testId: "linked-container-icon"
+  })), /*#__PURE__*/_react.default.createElement(_compiled.Stack, null, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+    maxLines: 1,
+    weight: "medium",
+    color: "color.text"
+  }, title), /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
+    gap: "space.050"
+  }, icon, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+    size: "small",
+    color: "color.text.subtle"
+  }, description))), showCloseIcon && /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.crossIconWrapper
+  }, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
+    label: "disconnect the container ".concat(title),
+    appearance: "subtle",
+    icon: _cross.default,
+    spacing: "compact",
+    onClick: function onClick(e) {
+      e.preventDefault();
+      onDisconnectButtonClick();
+      (0, _analytics.fireUIEvent)(createAnalyticsEvent, {
+        action: _analytics.AnalyticsAction.CLICKED,
+        actionSubject: 'button',
+        actionSubjectId: 'containerUnlinkButton'
+      });
+    }
+  }))));
 };

package/dist/cjs/ui/team-containers/main.js

@@ -29,7 +29,8 @@ var ICON_COLOR = exports.ICON_COLOR = "var(--ds-icon-subtle, ".concat(_colors.N9
 var MAX_NUMBER_OF_CONTAINERS_TO_SHOW = exports.MAX_NUMBER_OF_CONTAINERS_TO_SHOW = 4;
 var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
   var teamId = _ref.teamId,
-    onAddAContainerClick = _ref.onAddAContainerClick;
+    onAddAContainerClick = _ref.onAddAContainerClick,
+    components = _ref.components;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var _useTeamContainers = (0, _useTeamContainers2.useTeamContainers)(teamId),
@@ -86,6 +87,7 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
       actionSubject: 'unlinkContainerDialog'
     });
   }, [createAnalyticsEvent]);
+  var LinkedContainerCardComponent = (components === null || components === void 0 ? void 0 : components.ContainerCard) || _linkedContainerCard.LinkedContainerCard;
   var handleDisconnect = (0, _react.useCallback)( /*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(containerId) {
       return _regenerator.default.wrap(function _callee$(_context) {
@@ -124,16 +126,15 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
     space: "space.200"
   }, /*#__PURE__*/_react.default.createElement(_primitives.Grid, {
-    templateColumns: "1fr 1fr",
-    gap: "space.100",
-    autoFlow: "row"
+    templateColumns: "repeat(auto-fill, minmax(270px, 1fr))",
+    gap: "space.100"
   }, teamContainers.slice(0, MAX_NUMBER_OF_CONTAINERS_TO_SHOW).map(function (container) {
-    return /*#__PURE__*/_react.default.createElement(_linkedContainerCard.LinkedContainerCard, {
+    return /*#__PURE__*/_react.default.createElement(LinkedContainerCardComponent, {
       key: container.id,
       containerType: container.type,
       title: container.name,
-      containerIcon: container.icon,
-      link: container.link,
+      containerIcon: container.icon || undefined,
+      link: container.link || undefined,
       onDisconnectButtonClick: function onDisconnectButtonClick() {
         return handleOpenDisconnectDialog({
           containerId: container.id,
@@ -149,12 +150,12 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
     onAddAContainerClick: onAddAContainerClick,
     containerType: "ConfluenceSpace"
   }), showMore && teamContainers.slice(MAX_NUMBER_OF_CONTAINERS_TO_SHOW).map(function (container) {
-    return /*#__PURE__*/_react.default.createElement(_linkedContainerCard.LinkedContainerCard, {
+    return /*#__PURE__*/_react.default.createElement(LinkedContainerCardComponent, {
       key: container.id,
       containerType: container.type,
       title: container.name,
-      containerIcon: container.icon,
-      link: container.link,
+      containerIcon: container.icon || undefined,
+      link: container.link || undefined,
       onDisconnectButtonClick: function onDisconnectButtonClick() {
         return setIsDisconnectDialogOpen(true);
       }

package/dist/cjs/ui/team-containers/types.js

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

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

@@ -52,6 +52,21 @@ const actions = {
         unlinkError: err
       });
     }
+  },
+  addTeamContainer: teamContainer => async ({
+    setState,
+    getState
+  }) => {
+    const {
+      teamContainers
+    } = getState();
+    const containerExists = teamContainers.some(container => container.id === teamContainer.id);
+    if (containerExists) {
+      return;
+    }
+    setState({
+      teamContainers: [...teamContainers, teamContainer]
+    });
   }
 };
 const Store = createStore({
@@ -65,5 +80,8 @@ export const useTeamContainers = teamId => {
   useEffect(() => {
     actions.fetchTeamContainers(teamId);
   }, [teamId, actions]);
-  return state;
+  return {
+    ...state,
+    addTeamContainer: actions.addTeamContainer
+  };
 };

package/dist/es2019/index.js

@@ -1 +1,2 @@
-export { TeamContainers } from './ui/team-containers';
+export { TeamContainers } from './ui/team-containers';
+export { useTeamContainers } from './controllers/hooks/use-team-containers';

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

@@ -2,7 +2,9 @@
 ._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}._12jimuej{outline-color:var(--ds-border,#091e4224)}
 ._12y3e4h9{outline-width:var(--ds-border-width,1px)}
 ._19bvutpp{padding-left:var(--ds-space-150,9pt)}
+._1bsb1osq{width:100%}
 ._1qu2gq9o{outline-style:dashed}
+._4cvr1h6o{align-items:center}
 ._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
 ._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
 ._syaz131l{color:var(--ds-text-subtlest,#626f86)}

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

@@ -4,14 +4,14 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { useState } from 'react';
 import { IconButton } from '@atlaskit/button/new';
 import AddIcon from '@atlaskit/icon/utility/add';
-import { CustomItem } from '@atlaskit/menu';
-import { Box, Inline } from '@atlaskit/primitives/compiled';
+import { Box, Flex, Inline, Stack, Text } from '@atlaskit/primitives/compiled';
 import { getContainerProperties } from '../../../common/utils/get-container-properties';
 const styles = {
+  card: "_4cvr1h6o _1bsb1osq",
   container: "_2rkoiti9 _ca0qutpp _u5f3utpp _n3tdutpp _19bvutpp",
   iconWrapper: "_2rkoiti9 _12y3e4h9 _12jimuej _1qu2gq9o _syaz131l _4cvxmuej _ksodnqa1"
 };
-const CustomItemInner = ({
+const AddContainerCardWrapper = ({
   children
 }) => {
   const [hovered, setHovered] = useState(false);
@@ -33,20 +33,26 @@ export const AddContainerCard = ({
     icon,
     title
   } = getContainerProperties(containerType);
-  return /*#__PURE__*/React.createElement(CustomItem, {
-    iconBefore: /*#__PURE__*/React.createElement(Box, {
-      xcss: styles.iconWrapper
-    }, /*#__PURE__*/React.createElement(IconButton, {
-      label: "Add a container",
-      appearance: "subtle",
-      icon: AddIcon,
-      spacing: "compact",
-      testId: "add-icon",
-      onClick: e => onAddAContainerClick(e)
-    })),
-    component: CustomItemInner,
-    description: /*#__PURE__*/React.createElement(Inline, {
-      space: "space.050"
-    }, icon, description)
-  }, title);
+  return /*#__PURE__*/React.createElement(AddContainerCardWrapper, null, /*#__PURE__*/React.createElement(Inline, {
+    space: "space.100",
+    xcss: styles.card
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.iconWrapper
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    label: "Add a container",
+    appearance: "subtle",
+    icon: AddIcon,
+    spacing: "compact",
+    testId: "add-icon",
+    onClick: e => onAddAContainerClick(e)
+  })), /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Text, {
+    maxLines: 1,
+    weight: "medium",
+    color: "color.text"
+  }, title), /*#__PURE__*/React.createElement(Flex, {
+    gap: "space.050"
+  }, icon, /*#__PURE__*/React.createElement(Text, {
+    size: "small",
+    color: "color.text.subtle"
+  }, description)))));
 };

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

@@ -2,10 +2,17 @@
 ._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
 ._1h6dz9xs{border-color:var(--ds-border-accent-gray,#758195)}._12jimuej{outline-color:var(--ds-border,#091e4224)}
 ._12y3e4h9{outline-width:var(--ds-border-width,1px)}
+._18u01wug{margin-left:auto}
 ._19bvutpp{padding-left:var(--ds-space-150,9pt)}
-._1bsb1tcg{width:24px}
+._1bahesu3{justify-content:flex-end}
+._1bsb1osq{width:100%}
+._1bsbzwfg{width:2pc}
+._1e0c1txw{display:flex}
 ._1qu2nqa1{outline-style:solid}
-._4t3i1tcg{height:24px}
+._1tkezwfg{min-height:2pc}
+._1ul9zwfg{min-width:2pc}
+._4cvr1h6o{align-items:center}
+._4t3izwfg{height:2pc}
 ._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
 ._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
 ._syaz1fxt{color:var(--ds-text,#172b4d)}

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

@@ -7,15 +7,16 @@ import { IconButton } from '@atlaskit/button/new';
 import CrossIcon from '@atlaskit/icon/utility/cross';
 import Image from '@atlaskit/image';
 import Link from '@atlaskit/link';
-import { CustomItem } from '@atlaskit/menu';
-import { Box, Inline } from '@atlaskit/primitives/compiled';
+import { Box, Flex, Inline, Stack, Text } from '@atlaskit/primitives/compiled';
 import { AnalyticsAction, fireUIEvent } from '../../../common/utils/analytics';
 import { getContainerProperties } from '../../../common/utils/get-container-properties';
 const styles = {
   container: "_2rkoiti9 _1h6dz9xs _12y3e4h9 _12jimuej _1qu2nqa1 _ca0qutpp _u5f3utpp _n3tdutpp _19bvutpp _syaz1fxt",
-  iconWrapper: "_1bsb1tcg _4t3i1tcg"
+  card: "_4cvr1h6o _1bsb1osq",
+  iconWrapper: "_1bsbzwfg _4t3izwfg _1ul9zwfg _1tkezwfg",
+  crossIconWrapper: "_1e0c1txw _4cvr1h6o _1bahesu3 _18u01wug"
 };
-const CustomItemInner = ({
+const LinkedCardWrapper = ({
   children,
   href,
   handleMouseEnter,
@@ -30,15 +31,15 @@ const CustomItemInner = ({
     handleMouseLeave();
     setHovered(false);
   };
-  return /*#__PURE__*/React.createElement(Link, {
-    href: href,
-    appearance: "subtle"
-  }, /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/React.createElement(Box, {
     backgroundColor: hovered ? 'color.background.input.hovered' : 'color.background.input',
     xcss: styles.container,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     testId: "linked-container-card-inner"
+  }, /*#__PURE__*/React.createElement(Link, {
+    href: href,
+    appearance: "subtle"
   }, children));
 };
 export const LinkedContainerCard = ({
@@ -56,35 +57,43 @@ export const LinkedContainerCard = ({
     icon
   } = getContainerProperties(containerType);
   const [showCloseIcon, setShowCloseIcon] = useState(false);
-  return /*#__PURE__*/React.createElement(CustomItem, {
-    iconBefore: /*#__PURE__*/React.createElement(Box, {
-      xcss: styles.iconWrapper
-    }, /*#__PURE__*/React.createElement(Image, {
-      src: containerIcon,
-      alt: "",
-      testId: "linked-container-icon"
-    })),
-    description: /*#__PURE__*/React.createElement(Inline, {
-      space: "space.050"
-    }, icon, description),
-    iconAfter: showCloseIcon && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(IconButton, {
-      label: `disconnect the container ${title}`,
-      appearance: "subtle",
-      icon: CrossIcon,
-      spacing: "compact",
-      onClick: e => {
-        e.preventDefault();
-        onDisconnectButtonClick();
-        fireUIEvent(createAnalyticsEvent, {
-          action: AnalyticsAction.CLICKED,
-          actionSubject: 'button',
-          actionSubjectId: 'containerUnlinkButton'
-        });
-      }
-    })),
-    href: link,
+  return /*#__PURE__*/React.createElement(LinkedCardWrapper, {
+    href: link || '#',
     handleMouseEnter: () => setShowCloseIcon(true),
-    handleMouseLeave: () => setShowCloseIcon(false),
-    component: CustomItemInner
-  }, title);
+    handleMouseLeave: () => setShowCloseIcon(false)
+  }, /*#__PURE__*/React.createElement(Inline, {
+    space: "space.100",
+    xcss: styles.card
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.iconWrapper
+  }, /*#__PURE__*/React.createElement(Image, {
+    src: containerIcon,
+    alt: "",
+    testId: "linked-container-icon"
+  })), /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Text, {
+    maxLines: 1,
+    weight: "medium",
+    color: "color.text"
+  }, title), /*#__PURE__*/React.createElement(Flex, {
+    gap: "space.050"
+  }, icon, /*#__PURE__*/React.createElement(Text, {
+    size: "small",
+    color: "color.text.subtle"
+  }, description))), showCloseIcon && /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.crossIconWrapper
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    label: `disconnect the container ${title}`,
+    appearance: "subtle",
+    icon: CrossIcon,
+    spacing: "compact",
+    onClick: e => {
+      e.preventDefault();
+      onDisconnectButtonClick();
+      fireUIEvent(createAnalyticsEvent, {
+        action: AnalyticsAction.CLICKED,
+        actionSubject: 'button',
+        actionSubjectId: 'containerUnlinkButton'
+      });
+    }
+  }))));
 };