@atlaskit/smart-card 16.3.0 → 17.2.0

package/dist/esm/utils/analytics/analytics.js

@@ -2,9 +2,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import { name as packageName, version as packageVersion } from '../../version.json';
 import { getMeasure } from '../performance';

package/dist/esm/utils/analytics/index.js

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import { resolvedEvent, unresolvedEvent } from './analytics';
 import { getMeasure } from '../performance';

package/dist/esm/utils/flexible.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import * as Blocks from '../view/FlexibleCard/components/blocks';
+import { TitleBlock } from '../view/FlexibleCard/components/blocks';
+import * as Elements from '../view/FlexibleCard/components/elements';
+export var isFlexibleUiCard = function isFlexibleUiCard(appearance, children) {
+  if ((appearance === 'inline' || appearance === 'block') && children && React.Children.toArray(children).some(function (child) {
+    return isFlexibleUiBlock(child);
+  })) {
+    return true;
+  }
+
+  return false;
+};
+export var isFlexibleUiBlock = function isFlexibleUiBlock(node) {
+  return /*#__PURE__*/React.isValidElement(node) && Object.values(Blocks).some(function (type) {
+    return type === node.type;
+  });
+};
+export var isFlexibleUiElement = function isFlexibleUiElement(node) {
+  return /*#__PURE__*/React.isValidElement(node) && Object.values(Elements).some(function (type) {
+    return type === node.type;
+  });
+};
+export var isFlexibleUiTitleBlock = function isFlexibleUiTitleBlock(node) {
+  return /*#__PURE__*/React.isValidElement(node) && node.type === TitleBlock;
+};

package/dist/esm/utils/index.js

@@ -214,4 +214,14 @@ var typeToIcon = {
   folder: ['Folder', function () {
     return import('@atlaskit/icon-file-type/glyph/folder/16');
   }]
+};
+export var getIframeSandboxAttribute = function getIframeSandboxAttribute(isTrusted) {
+  return isTrusted ? undefined : 'allow-downloads allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts';
+};
+export var handleOnClick = function handleOnClick(handler) {
+  return function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    handler();
+  };
 };

package/dist/esm/utils/token.js

@@ -0,0 +1,23 @@
+import { token } from '@atlaskit/tokens'; // Temporary safeguard while @atlaskit/tokens is being developed
+
+export var safeToken = function safeToken(path, fallback) {
+  try {
+    return token(path, fallback);
+  } catch (e) {
+    return fallback;
+  }
+};
+export var tokens = {
+  actionIcon: safeToken('color.icon', '#44546F'),
+  background: safeToken('elevation.surface', '#FFFFFF'),
+  badgeIcon: safeToken('color.icon.subtle', '#626F86'),
+  badgeText: safeToken('color.text.subtlest', '#626F86'),
+  blackLink: safeToken('color.text.subtle', '#44546F'),
+  blackLinkPressed: safeToken('color.text', '#172B4D'),
+  blueLink: safeToken('color.link', '#0C66E4'),
+  blueLinkPressed: safeToken('color.link.pressed', '#0055CC'),
+  elevation: safeToken('elevation.shadow.raised', '0px 1px 1px #091E4240, 0px 0px 1px #091E424F'),
+  errorMessage: safeToken('color.text.disabled', '#6B778C'),
+  errorMessageHover: safeToken('color.text.subtle', '#8993A4'),
+  text: safeToken('color.text.subtlest', '#626F86')
+};

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "16.3.0",
+	"version": "17.2.0",
 	"sideEffects": false
 }

package/dist/esm/view/BlockCard/actions/AuthorizeAction.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { messages } from '@atlaskit/media-ui/messages';
+export var AuthorizeAction = function AuthorizeAction(handler) {
+  return {
+    id: 'connect-account',
+    text: /*#__PURE__*/React.createElement(FormattedMessage, messages.connect_link_account_card),
+    promise: function promise() {
+      return new Promise(function (resolve) {
+        return resolve(handler());
+      });
+    },
+    buttonAppearance: 'default'
+  };
+};

package/dist/esm/view/BlockCard/actions/DownloadAction.js

@@ -0,0 +1,51 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { downloadUrl } from '@atlaskit/media-common';
+import { messages } from '@atlaskit/media-ui/messages';
+export function downloadFunction(_x) {
+  return _downloadFunction.apply(this, arguments);
+}
+
+function _downloadFunction() {
+  _downloadFunction = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref) {
+    var url;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            url = _ref.url;
+
+            if (url) {
+              _context.next = 3;
+              break;
+            }
+
+            return _context.abrupt("return");
+
+          case 3:
+            downloadUrl(url);
+
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _downloadFunction.apply(this, arguments);
+}
+
+export var DownloadAction = function DownloadAction(_ref2) {
+  var url = _ref2.url;
+  return {
+    id: 'download-content',
+    text: /*#__PURE__*/React.createElement(FormattedMessage, messages.download),
+    promise: function promise() {
+      return downloadFunction({
+        url: url
+      });
+    }
+  };
+};

package/dist/esm/view/BlockCard/actions/ForbiddenAction.js

@@ -0,0 +1,23 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { messages } from '@atlaskit/media-ui/messages';
+export var ForbiddenAction = function ForbiddenAction(handler) {
+  var id = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'connect-other-account';
+  var message = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : messages.try_another_account;
+  var context = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
+  return {
+    id: id,
+    text: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, message, {
+      values: {
+        context: context
+      }
+    })),
+    promise: function promise() {
+      return new Promise(function (resolve) {
+        return resolve(handler());
+      });
+    },
+    buttonAppearance: 'default'
+  };
+};

package/dist/esm/view/BlockCard/actions/PreviewAction.js

@@ -0,0 +1,105 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+var _excluded = ["popupMountPointId", "onClose"],
+    _excluded2 = ["details"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { IntlProvider, FormattedMessage } from 'react-intl-next';
+import { messages } from '@atlaskit/media-ui/messages';
+
+/*
+  Explanatory note:
+  Actions don't have access to the react tree of whatever is rendered them
+  (and this concept is fraught inside editor anyway) so we want to ensure
+  it is mounting to a new unique place. This function manages that, including
+  creating an element if it doesn't exist, as well as tidying up the react tree
+  (but not the element) upon closing the modal.
+
+  This may strike you as really uncomfortable as you read it, so I wanted to note
+  that a) this was discussed and agreed upon, and b) it's definitely odd, and if
+  you find an elegant solution around this, you should definitely feel free to
+  refactor it.
+*/
+export function previewFunction(_x) {
+  return _previewFunction.apply(this, arguments);
+}
+/*
+Most of these are optional as we are being fault-tolerant
+However src, details, icon, title, and providerName are STRONGLY encouraged
+*/
+
+function _previewFunction() {
+  _previewFunction = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref) {
+    var popupMountPointId, _onClose, rest, popupMountPoint, Modal;
+
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            popupMountPointId = _ref.popupMountPointId, _onClose = _ref.onClose, rest = _objectWithoutProperties(_ref, _excluded);
+            popupMountPoint = document.getElementById(popupMountPointId);
+
+            if (!popupMountPoint) {
+              popupMountPoint = document.createElement('div');
+              popupMountPoint.id = popupMountPointId;
+              popupMountPoint.setAttribute('data-testid', 'preview-modal');
+              document.body.appendChild(popupMountPoint);
+            }
+
+            _context.next = 5;
+            return import('../components/Modal');
+
+          case 5:
+            Modal = _context.sent;
+            ReactDOM.render( /*#__PURE__*/React.createElement(IntlProvider, {
+              locale: "en"
+            }, /*#__PURE__*/React.createElement(Modal.default, _extends({}, rest, {
+              onClose: function onClose() {
+                if (popupMountPoint) {
+                  _onClose();
+
+                  ReactDOM.unmountComponentAtNode(popupMountPoint);
+                }
+              }
+            }))), popupMountPoint);
+
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _previewFunction.apply(this, arguments);
+}
+
+export default (function (_ref2) {
+  var details = _ref2.details,
+      rest = _objectWithoutProperties(_ref2, _excluded2);
+
+  return {
+    id: 'preview-content',
+    text: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview),
+    promise: function promise() {
+      return previewFunction(_objectSpread({
+        popupMountPointId: 'twp-editor-preview-iframe',
+        providerName: 'Preview',
+        closeLabel: 'Close Preview',
+        showModal: true,
+        iframeName: 'twp-editor-preview-iframe',
+        onClose: function onClose() {},
+        metadata: {
+          items: details || []
+        }
+      }, rest));
+    }
+  };
+});

package/dist/esm/view/BlockCard/actions/RetryAction.js

@@ -0,0 +1,33 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { messages } from '@atlaskit/media-ui/messages';
+export var RetryAction = function RetryAction(handler) {
+  return {
+    id: 'try-again',
+    promise: function () {
+      var _promise = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                return _context.abrupt("return", handler());
+
+              case 1:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      function promise() {
+        return _promise.apply(this, arguments);
+      }
+
+      return promise;
+    }(),
+    text: /*#__PURE__*/React.createElement(FormattedMessage, messages.try_again)
+  };
+};

package/dist/esm/view/BlockCard/actions/ViewAction.js

@@ -0,0 +1,50 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { messages } from '@atlaskit/media-ui/messages';
+export function viewFunction(_x) {
+  return _viewFunction.apply(this, arguments);
+}
+
+function _viewFunction() {
+  _viewFunction = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref) {
+    var url;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            url = _ref.url;
+
+            if (url) {
+              _context.next = 3;
+              break;
+            }
+
+            return _context.abrupt("return");
+
+          case 3:
+            window.open(url, '_blank', 'noopener=yes');
+
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _viewFunction.apply(this, arguments);
+}
+
+export var ViewAction = function ViewAction(_ref2) {
+  var url = _ref2.url;
+  return {
+    id: 'view-content',
+    text: /*#__PURE__*/React.createElement(FormattedMessage, messages.view),
+    promise: function promise() {
+      return viewFunction({
+        url: url
+      });
+    }
+  };
+};

package/dist/esm/view/BlockCard/components/Action.js

@@ -0,0 +1,53 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { useState } from 'react';
+import Button from '@atlaskit/button/custom-theme-button';
+import { ActionIcon } from './ActionIcon';
+export var spinnerDelay = 1000;
+export var Action = function Action(_ref) {
+  var promise = _ref.promise,
+      text = _ref.text,
+      _ref$buttonAppearance = _ref.buttonAppearance,
+      buttonAppearance = _ref$buttonAppearance === void 0 ? 'default' : _ref$buttonAppearance,
+      id = _ref.id;
+
+  var _useState = useState('init'),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  return jsx(Button, {
+    spacing: "compact",
+    appearance: buttonAppearance,
+    isLoading: state === 'loading',
+    testId: "button-".concat(id),
+    onClick: function onClick(event) {
+      event.stopPropagation();
+      event.preventDefault();
+
+      if (state !== 'loading') {
+        setState('loading');
+        promise().then(function () {
+          setState('success');
+          setTimeout(function () {
+            return setState('init');
+          }, spinnerDelay);
+        }).catch(function () {
+          setState('failure');
+          setTimeout(function () {
+            return setState('init');
+          }, spinnerDelay);
+        });
+      }
+    }
+  }, jsx("div", {
+    css: {
+      transition: 'opacity 0.3s',
+      opacity: state !== 'init' ? 0 : 1
+    }
+  }, text), jsx(ActionIcon, {
+    state: state
+  }));
+};

package/dist/esm/view/BlockCard/components/ActionIcon.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import CheckIcon from '@atlaskit/icon/glyph/check';
+import CrossIcon from '@atlaskit/icon/glyph/cross';
+
+/*
+  These styles are taken fro the spinner style for button. There was not an
+  easy way to share tehm between the two components.
+*/
+export var spinnerStyles = {
+  display: 'flex',
+  position: 'absolute',
+  left: '50%',
+  top: '50%',
+  transform: 'translate(-50%, -50%)'
+};
+export var ActionIcon = function ActionIcon(_ref) {
+  var state = _ref.state;
+
+  switch (state) {
+    case 'init':
+    case 'loading':
+      return null;
+
+    case 'success':
+      return /*#__PURE__*/React.createElement("div", {
+        "data-testid": "check-icon",
+        style: spinnerStyles
+      }, /*#__PURE__*/React.createElement(CheckIcon, {
+        size: "small",
+        label: "check"
+      }));
+
+    case 'failure':
+      return /*#__PURE__*/React.createElement("div", {
+        "data-testid": "cross-icon",
+        style: spinnerStyles
+      }, /*#__PURE__*/React.createElement(CrossIcon, {
+        size: "small",
+        label: "check"
+      }));
+  }
+};

package/dist/esm/view/BlockCard/components/ActionList.js

@@ -0,0 +1,55 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { useState } from 'react';
+import Item from '@atlaskit/item';
+import DropList from '@atlaskit/droplist';
+import ButtonGroup from '@atlaskit/button/button-group';
+import Button from '@atlaskit/button/custom-theme-button';
+import { Action } from './Action';
+import { gs, mq } from '../utils';
+export var ActionList = function ActionList(_ref) {
+  var items = _ref.items;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setOpen = _useState2[1];
+
+  var actionsToShow = items.slice(0, 2);
+  var actionsToList = items.slice(2, items.length);
+  return jsx("div", {
+    css: mq({
+      display: 'flex',
+      marginTop: [gs(2), 0]
+    })
+  }, jsx(ButtonGroup, null, actionsToShow.map(function (action) {
+    return jsx(Action, _extends({
+      key: action.id
+    }, action));
+  })), actionsToList.length ? jsx("div", {
+    css: {
+      marginLeft: gs(0.5)
+    }
+  }, jsx(DropList, {
+    appearance: "default",
+    position: "right top",
+    isTriggerNotTabbable: true,
+    onOpenChange: function onOpenChange() {
+      return setOpen(true);
+    },
+    onClick: function onClick() {
+      return setOpen(!isOpen);
+    },
+    isOpen: isOpen,
+    trigger: jsx(Button, {
+      spacing: "compact"
+    }, "...")
+  }, actionsToList.map(function (actionToList) {
+    return jsx(Item, {
+      key: actionToList.id
+    }, actionToList.text);
+  }))) : null);
+};

package/dist/esm/view/BlockCard/components/Byline.js

@@ -0,0 +1,34 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { N300 } from '@atlaskit/theme/colors';
+import { gs, mq } from '../utils';
+export var Byline = function Byline(_ref) {
+  var text = _ref.text,
+      children = _ref.children,
+      testId = _ref.testId,
+      className = _ref.className;
+  return jsx("span", {
+    css: mq({
+      fontSize: gs(1.5),
+      lineHeight: gs(2.5),
+      color: "".concat(N300),
+      fontWeight: 'normal',
+      marginTop: gs(0.5),
+      // Spec: only allow two lines MAX to be shown.
+      display: '-webkit-box',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      WebkitLineClamp: 2,
+      WebkitBoxOrient: 'vertical',
+      wordBreak: 'break-word',
+      // Fallback options.
+      maxHeight: gs(5),
+      whiteSpace: 'pre-line',
+      // EDM-713: fixes copy-paste from renderer to editor for Firefox
+      // due to HTML its unwrapping behaviour on paste.
+      MozUserSelect: 'none'
+    }),
+    "data-testid": testId,
+    className: className
+  }, text || children);
+};

package/dist/esm/view/BlockCard/components/CollaboratorList.js

@@ -0,0 +1,39 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import AvatarGroup from '@atlaskit/avatar-group';
+import { mq } from '../utils';
+export var CollaboratorList = function CollaboratorList(_ref) {
+  var items = _ref.items,
+      _ref$handleAvatarClic = _ref.handleAvatarClick,
+      handleAvatarClick = _ref$handleAvatarClic === void 0 ? function () {} : _ref$handleAvatarClic,
+      _ref$handleMoreAvatar = _ref.handleMoreAvatarsClick,
+      handleMoreAvatarsClick = _ref$handleMoreAvatar === void 0 ? function () {} : _ref$handleMoreAvatar,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'collaborator-list' : _ref$testId;
+
+  if (items.length === 0) {
+    return null;
+  }
+
+  return jsx("span", {
+    css: mq({
+      display: ['none', 'inherit']
+    })
+  }, jsx(AvatarGroup, {
+    maxCount: 4,
+    appearance: "stack",
+    size: "small",
+    data: items,
+    onAvatarClick: function onAvatarClick(event) {
+      event.stopPropagation();
+      event.preventDefault();
+      handleAvatarClick(event);
+    },
+    onMoreClick: function onMoreClick(event) {
+      event.stopPropagation();
+      event.preventDefault();
+      handleMoreAvatarsClick(event);
+    },
+    testId: testId
+  }));
+};

package/dist/esm/view/BlockCard/components/Content.js

@@ -0,0 +1,20 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { gs, mq } from '../utils';
+export var blockCardContentClassName = 'block-card-content';
+export var Content = function Content(_ref) {
+  var children = _ref.children,
+      _ref$isCompact = _ref.isCompact,
+      isCompact = _ref$isCompact === void 0 ? false : _ref$isCompact;
+  return jsx("div", {
+    css: mq({
+      padding: isCompact ? gs(1) : gs(2),
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: isCompact ? 'unset' : ['unset', 'space-between'],
+      flexGrow: 1
+    }),
+    "data-trello-do-not-use-override": "block-card-content",
+    className: blockCardContentClassName
+  }, children);
+};

package/dist/esm/view/BlockCard/components/ContentFooter.js

@@ -0,0 +1,20 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { gs, mq } from '../utils';
+export var contentFooterClassName = 'smart-link-content-footer';
+export var ContentFooter = function ContentFooter(_ref) {
+  var children = _ref.children,
+      _ref$hasSpaceBetween = _ref.hasSpaceBetween,
+      hasSpaceBetween = _ref$hasSpaceBetween === void 0 ? false : _ref$hasSpaceBetween;
+  return jsx("div", {
+    css: mq({
+      display: 'flex',
+      flexDirection: ['column', 'row'],
+      flexGrow: [1, 'unset'],
+      justifyContent: [hasSpaceBetween ? 'space-between' : 'flex-end', 'space-between'],
+      alignItems: ['unset', 'center'],
+      marginTop: [gs(1), gs(1.5)]
+    }),
+    className: contentFooterClassName
+  }, children);
+};