@atlaskit/smart-card 17.0.1 → 17.3.0

package/dist/cjs/view/CardWithUrl/component.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 var _typeof = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
@@ -23,6 +25,10 @@ var _InlineCard = require("../InlineCard");
 
 var _EmbedCard = require("../EmbedCard");
 
+var _flexible = require("../../utils/flexible");
+
+var _FlexibleCard = _interopRequireDefault(require("../FlexibleCard"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -41,7 +47,9 @@ function CardWithUrlContent(_ref) {
       showActions = _ref.showActions,
       inheritDimensions = _ref.inheritDimensions,
       embedIframeRef = _ref.embedIframeRef,
-      inlinePreloaderStyle = _ref.inlinePreloaderStyle;
+      inlinePreloaderStyle = _ref.inlinePreloaderStyle,
+      ui = _ref.ui,
+      children = _ref.children;
 
   // Get state, actions for this card.
   var _useSmartLink = (0, _state.useSmartLink)(id, url, dispatchAnalytics),
@@ -101,6 +109,16 @@ function CardWithUrlContent(_ref) {
     throw error;
   }
 
+  if ((0, _flexible.isFlexibleUiCard)(appearance, children)) {
+    return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, {
+      cardState: state,
+      onAuthorize: services.length && handleAuthorize || undefined,
+      renderers: renderers,
+      ui: ui,
+      url: url
+    }, children);
+  }
+
   switch (appearance) {
     case 'inline':
       return /*#__PURE__*/_react.default.createElement(_InlineCard.InlineCard, {

package/dist/cjs/view/CardWithUrl/loader.js

@@ -15,8 +15,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _uuid = _interopRequireDefault(require("uuid"));
 
-var _mediaUi = require("@atlaskit/media-ui");
-
 var _analytics = require("../../utils/analytics");
 
 var _performance = require("../../utils/performance");
@@ -25,6 +23,8 @@ var _reactErrorBoundary = require("react-error-boundary");
 
 var _ufoExperiences = require("../../state/analytics/ufoExperiences");
 
+var _LinkView = require("../LinkView");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || (0, _typeof2.default)(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -67,7 +67,9 @@ function CardWithURLRenderer(props) {
       platform = props.platform,
       embedIframeRef = props.embedIframeRef,
       inlinePreloaderStyle = props.inlinePreloaderStyle,
-      createAnalyticsEvent = props.createAnalyticsEvent; // Wrapper around analytics.
+      createAnalyticsEvent = props.createAnalyticsEvent,
+      children = props.children,
+      ui = props.ui; // Wrapper around analytics.
 
   var dispatchAnalytics = (0, _react.useCallback)(function (analyticsPayload) {
     if (analyticsPayload && analyticsPayload.attributes) {
@@ -108,7 +110,7 @@ function CardWithURLRenderer(props) {
     FallbackComponent: ErrorFallback,
     onError: logError
   }, /*#__PURE__*/_react.default.createElement(_react.Suspense, {
-    fallback: /*#__PURE__*/_react.default.createElement(_mediaUi.CardLinkView, {
+    fallback: /*#__PURE__*/_react.default.createElement(_LinkView.CardLinkView, {
       key: 'chunk-placeholder',
       link: url
     })
@@ -127,8 +129,9 @@ function CardWithURLRenderer(props) {
     inheritDimensions: inheritDimensions,
     platform: platform,
     embedIframeRef: embedIframeRef,
-    inlinePreloaderStyle: inlinePreloaderStyle
-  })));
+    inlinePreloaderStyle: inlinePreloaderStyle,
+    ui: ui
+  }, children)));
 }
 
 var ErrorFallback = function ErrorFallback() {

package/dist/cjs/view/EmbedCard/EmbedResizeMessageListener.js

@@ -23,7 +23,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
-var _embeds = require("@atlaskit/media-ui/embeds");
+var _styled = require("./components/styled");
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
@@ -63,7 +63,7 @@ var EmbedResizeMessageListener = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onEmbedHeightChange", function (data) {
       var onHeightUpdate = _this.props.onHeightUpdate;
-      var height = data.height + _embeds.embedHeaderHeight;
+      var height = data.height + _styled.embedHeaderHeight;
       onHeightUpdate(height);
     });
     return _this;

package/dist/cjs/view/EmbedCard/components/ExpandedFrame.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExpandedFrame = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styled = require("./styled");
+
+var _handlers = require("../../BlockCard/utils/handlers");
+
+var ExpandedFrame = function ExpandedFrame(_ref) {
+  var _ref$isPlaceholder = _ref.isPlaceholder,
+      isPlaceholder = _ref$isPlaceholder === void 0 ? false : _ref$isPlaceholder,
+      children = _ref.children,
+      onClick = _ref.onClick,
+      icon = _ref.icon,
+      text = _ref.text,
+      isSelected = _ref.isSelected,
+      isFrameVisible = _ref.isFrameVisible,
+      isVisible = _ref.isVisible,
+      href = _ref.href,
+      minWidth = _ref.minWidth,
+      maxWidth = _ref.maxWidth,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'expanded-frame' : _ref$testId,
+      inheritDimensions = _ref.inheritDimensions;
+
+  var isInteractive = function isInteractive() {
+    return !isPlaceholder && (Boolean(href) || Boolean(onClick));
+  };
+
+  var handleClick = function handleClick(event) {
+    return (0, _handlers.handleClickCommon)(event, onClick);
+  };
+
+  var renderHeader = function renderHeader() {
+    return /*#__PURE__*/_react.default.createElement(_styled.Header, {
+      className: "embed-header"
+    }, /*#__PURE__*/_react.default.createElement(_styled.IconWrapper, {
+      isPlaceholder: isPlaceholder
+    }, !isPlaceholder && icon), /*#__PURE__*/_react.default.createElement(_styled.TextWrapper, {
+      isPlaceholder: isPlaceholder
+    }, !isPlaceholder && /*#__PURE__*/_react.default.createElement("a", {
+      href: href,
+      onClick: handleClick
+    }, text)));
+  };
+
+  var renderContent = function renderContent() {
+    return /*#__PURE__*/_react.default.createElement(_styled.Content, {
+      isInteractive: isInteractive()
+    }, children);
+  };
+
+  if (!isPlaceholder && href) {
+    return /*#__PURE__*/_react.default.createElement(_styled.LinkWrapper, {
+      className: _styled.className,
+      isInteractive: isInteractive(),
+      isSelected: isSelected,
+      isFrameVisible: isFrameVisible,
+      minWidth: minWidth,
+      maxWidth: maxWidth,
+      isVisible: isVisible,
+      "data-testid": testId,
+      "data-trello-do-not-use-override": testId // Due to limitations of testing library, we can't assert ::after
+      ,
+      "data-is-selected": isSelected // Due to limitation of testing library, we can't match background colors #ebecf0 and rgb(235, 236, 240)
+      ,
+      "data-is-frame-visible": isFrameVisible,
+      inheritDimensions: inheritDimensions
+    }, renderHeader(), renderContent());
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_styled.Wrapper, {
+      className: _styled.className,
+      isInteractive: isInteractive(),
+      isSelected: isSelected,
+      minWidth: minWidth,
+      maxWidth: maxWidth,
+      isVisible: isVisible,
+      "data-testid": testId,
+      "data-trello-do-not-use-override": testId,
+      "data-is-selected": isSelected,
+      "data-is-visible": isVisible
+    }, renderHeader(), renderContent());
+  }
+};
+
+exports.ExpandedFrame = ExpandedFrame;

package/dist/cjs/view/EmbedCard/components/Frame.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Frame = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _core = require("@emotion/core");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _utils = require("../../../utils");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/** @jsx jsx */
+var Frame = /*#__PURE__*/_react.default.forwardRef(function (_ref, iframeRef) {
+  var url = _ref.url,
+      _ref$isTrusted = _ref.isTrusted,
+      isTrusted = _ref$isTrusted === void 0 ? false : _ref$isTrusted,
+      testId = _ref.testId;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isIframeLoaded = _useState2[0],
+      setIframeLoaded = _useState2[1];
+
+  if (!url) {
+    return null;
+  }
+
+  return (0, _core.jsx)("iframe", {
+    ref: iframeRef,
+    src: url,
+    "data-testid": "".concat(testId, "-frame"),
+    "data-iframe-loaded": isIframeLoaded,
+    css: {
+      border: 0,
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      position: 'relative',
+      overflow: 'hidden',
+      borderRadius: '3px'
+    },
+    allowFullScreen: true,
+    scrolling: "yes",
+    allow: "autoplay; encrypted-media; clipboard-write",
+    onLoad: function onLoad() {
+      return setIframeLoaded(true);
+    },
+    sandbox: (0, _utils.getIframeSandboxAttribute)(isTrusted)
+  });
+});
+
+exports.Frame = Frame;

package/dist/cjs/view/EmbedCard/components/ImageIcon.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageIcon = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactRenderImage = _interopRequireDefault(require("react-render-image"));
+
+var _styled = require("./styled");
+
+var ImageIcon = function ImageIcon(_ref) {
+  var _ref$alt = _ref.alt,
+      alt = _ref$alt === void 0 ? '' : _ref$alt,
+      src = _ref.src,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 16 : _ref$size,
+      title = _ref.title,
+      defaultIcon = _ref.default;
+
+  // TODO: do we need this?
+  if (!src) {
+    return defaultIcon || null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_reactRenderImage.default, {
+    src: src,
+    loading: defaultIcon,
+    loaded: /*#__PURE__*/_react.default.createElement(_styled.Image, {
+      className: "smart-link-icon",
+      src: src,
+      alt: alt,
+      size: size,
+      title: title
+    }),
+    errored: defaultIcon
+  });
+};
+
+exports.ImageIcon = ImageIcon;

package/dist/cjs/view/EmbedCard/components/styled.js

@@ -0,0 +1,187 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.maxAvatarCount = exports.embedHeaderHeight = exports.className = exports.cardShadow = exports.Wrapper = exports.UsersWrapper = exports.Title = exports.Thumbnail = exports.TextWrapper = exports.ResolvedViewIconWrapper = exports.LinkWrapper = exports.Image = exports.IconWrapper = exports.Header = exports.Description = exports.ContentWrapper = exports.Content = exports.Byline = exports.AlertWrapper = exports.ActionsWrapper = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _mediaUi = require("@atlaskit/media-ui");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
+
+var _utils = require("../../BlockCard/utils");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var className = 'media-card-frame';
+exports.className = className;
+var cardShadow = "";
+exports.cardShadow = cardShadow;
+
+function minWidth(_ref) {
+  var minWidth = _ref.minWidth;
+
+  if (minWidth) {
+    return "min-width: ".concat(minWidth, "px;");
+  } else {
+    return '';
+  }
+}
+
+function maxWidth(_ref2) {
+  var maxWidth = _ref2.maxWidth;
+
+  if (maxWidth) {
+    return "max-width: ".concat(maxWidth, "px; margin: 0 auto;");
+  } else {
+    return 'margin: 0 auto;';
+  }
+}
+
+function getinteractiveStyles(_ref3) {
+  var isInteractive = _ref3.isInteractive,
+      isFrameVisible = _ref3.isFrameVisible;
+  var visibleFrameStyles = isFrameVisible ? visibleStyles : '';
+  var interactiveFrameStyles = isInteractive ? "\n  &:hover {\n    ".concat(visibleStyles, "\n  }\n  &:active {\n    background-color: ").concat(colors.B50, ";\n  }\n") : '';
+  return "".concat(visibleFrameStyles).concat(interactiveFrameStyles);
+}
+
+function selected(_ref4) {
+  var isSelected = _ref4.isSelected;
+  return isSelected ? "\n    ".concat(visibleStyles, "\n    &::after {\n      cursor: pointer;\n      box-shadow: 0 0 0 3px ").concat(colors.B100, ";\n      content: '';\n      outline: none;\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      left: 0;\n      ").concat(_mediaUi.borderRadius, "\n    }\n    ") : '';
+}
+
+var height = function height(_ref5) {
+  var inheritDimensions = _ref5.inheritDimensions;
+  return inheritDimensions ? 'height: 100%;' : "height: ".concat((0, _utils.gs)(54));
+};
+
+var wrapperStyles = function wrapperStyles(props) {
+  return "\n  ".concat(_mediaUi.borderRadius, "\n  ").concat(minWidth(props), "\n  ").concat(maxWidth(props), "\n  ").concat(getinteractiveStyles(props), "\n  ").concat(visible(props), "\n  display: inline-flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  font-family: ").concat((0, _constants.fontFamily)(), ";\n  width: 100%;\n  user-select: none;\n  line-height: initial;\n  transition: background 0.3s;\n  position: relative;\n  ").concat(height(props), ";\n  ").concat(selected(props), "\n\n  &:after {\n    content: '';\n    background: transparent;\n    transition: background 0.3s, box-shadow 0.3s;\n    position: absolute;\n    width: calc(100% + ").concat((0, _utils.gs)(2), ");\n    height: calc(100% + ").concat((0, _utils.gs)(1), ");\n    left: -").concat((0, _utils.gs)(1), ";\n    ").concat(_mediaUi.borderRadius, "\n  }\n");
+};
+
+var visibleStyles = "\n  background-color: ".concat(colors.N30, ";\n\n  &:after {\n    background: ").concat(colors.N30, " !important;\n  }\n  .embed-header {\n    opacity: 1;\n  }");
+
+function visible(_ref6) {
+  var isVisible = _ref6.isVisible;
+  return isVisible ? visibleStyles : '';
+}
+
+var LinkWrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", " &:hover {\n    text-decoration: none;\n  }\n"])), function (props) {
+  return wrapperStyles(props);
+});
+
+exports.LinkWrapper = LinkWrapper;
+
+var Wrapper = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  margin-top: 10px;\n"])), function (props) {
+  return wrapperStyles(props);
+});
+
+exports.Wrapper = Wrapper;
+var embedHeaderHeight = 32;
+exports.embedHeaderHeight = embedHeaderHeight;
+
+var Header = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  height: ", "px;\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  color: ", ";\n  opacity: 0;\n  transition: 300ms opacity cubic-bezier(0.15, 1, 0.3, 1);\n"])), embedHeaderHeight, colors.N300);
+
+exports.Header = Header;
+
+var IconWrapper = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  ", " margin-right: 4px;\n"])), _mediaUi.borderRadius, (0, _mediaUi.size)(16), function (_ref7) {
+  var isPlaceholder = _ref7.isPlaceholder;
+
+  if (isPlaceholder) {
+    return "\n      background-color: ".concat(colors.N30, ";\n    ");
+  } else {
+    return '';
+  }
+});
+
+exports.IconWrapper = IconWrapper;
+
+var TextWrapper = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  ", " color: ", ";\n  font-size: 12px;\n  line-height: 16px;\n  ", ";\n"])), function (_ref8) {
+  var isPlaceholder = _ref8.isPlaceholder;
+
+  if (isPlaceholder) {
+    return "\n        ".concat(_mediaUi.borderRadius, "\n        width: 125px;\n        height: 12px;\n        background-color: ").concat(colors.N30, ";\n      ");
+  } else {
+    return '';
+  }
+}, colors.N300, (0, _mediaUi.ellipsis)('none'));
+
+exports.TextWrapper = TextWrapper;
+
+// NB: `overflow` is kept as `hidden` since
+// the internal contents of the `iframe` should
+// manage scrolling behaviour.
+var Content = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n\n  ", "\n  ", "\n  background-color: white;\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  top: ", ";\n  overflow: hidden;\n  height: calc(100% - ", ");\n  transition: box-shadow 0.3s;\n\n  > .calc-height > div > div {\n    left: unset !important;\n    width: unset !important;\n    height: unset !important;\n    position: initial !important;\n    padding-bottom: unset !important;\n  }\n  > .embed-preview > div {\n    margin: 0 auto;\n  }\n\n  ", ";\n"])), _mediaUi.borderRadius, cardShadow, (0, _utils.gs)(4), (0, _utils.gs)(4), function (_ref9) {
+  var isInteractive = _ref9.isInteractive;
+
+  if (isInteractive) {
+    return "\n          .".concat(className, ":hover & {\n            box-shadow: 0 4px 8px -2px rgba(23, 43, 77, 0.32),\n              0 0 1px rgba(23, 43, 77, 0.25);\n          }\n        ");
+  } else {
+    return '';
+  }
+});
+
+exports.Content = Content;
+
+var Image = _styled.default.img(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n\n  /* hide the alt text when the image cannot be found */\n  overflow: hidden;\n"])), function (_ref10) {
+  var size = _ref10.size;
+  return (0, _mediaUi.size)(size);
+}, _mediaUi.borderRadius);
+
+exports.Image = Image;
+var maxAvatarCount = 6;
+exports.maxAvatarCount = maxAvatarCount;
+
+var ContentWrapper = _styled.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  padding: 8px 12px 12px 12px;\n"])));
+
+exports.ContentWrapper = ContentWrapper;
+
+var Title = _styled.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 16px;\n  font-weight: 500;\n  line-height: ", ";\n  max-height: ", "px;\n  overflow: hidden;\n"])), colors.N900, 20 / 16, 20 * 4);
+
+exports.Title = Title;
+
+var Byline = _styled.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 4px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  ", ";\n"])), colors.N300, 16 / 12, (0, _mediaUi.ellipsis)('100%'));
+
+exports.Byline = Byline;
+
+var Description = _styled.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 7px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  max-height: ", "px;\n  overflow: hidden;\n"])), colors.N800, 18 / 12, 18 * 3);
+
+exports.Description = Description;
+
+var ResolvedViewIconWrapper = _styled.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 4px;\n"])));
+
+exports.ResolvedViewIconWrapper = ResolvedViewIconWrapper;
+
+var Thumbnail = _styled.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  float: right;\n  margin: 4px 0 12px 12px;\n  background-color: ", ";\n  background-image: url(", ");\n  background-size: cover;\n"])), _mediaUi.borderRadius, (0, _mediaUi.size)(48), colors.N30, function (_ref11) {
+  var src = _ref11.src;
+  return src;
+});
+
+exports.Thumbnail = Thumbnail;
+
+var UsersWrapper = _styled.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 8px;\n"])));
+
+exports.UsersWrapper = UsersWrapper;
+
+var ActionsWrapper = _styled.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 8px;\n  text-align: right;\n\n  > * {\n    margin-top: 4px;\n  }\n\n  > * + * {\n    margin-left: 4px;\n  }\n"])));
+
+exports.ActionsWrapper = ActionsWrapper;
+
+var AlertWrapper = _styled.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow: hidden;\n  pointer-events: none;\n  /* z-index has to be 1 higher than the number of avatars in the avatar stack */\n  z-index: ", ";\n"])), maxAvatarCount + 1);
+
+exports.AlertWrapper = AlertWrapper;

package/dist/cjs/view/EmbedCard/index.js

@@ -11,10 +11,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _react = _interopRequireDefault(require("react"));
 
-var _mediaUi = require("@atlaskit/media-ui");
-
-var _embeds = require("@atlaskit/media-ui/embeds");
-
 var _embed = require("../../extractors/embed");
 
 var _jsonld = require("../../utils/jsonld");
@@ -27,6 +23,20 @@ var _helpers = require("../../state/helpers");
 
 var _context = require("../../extractors/common/context");
 
+var _BlockCard = require("../BlockCard");
+
+var _ResolvedView = require("../InlineCard/ResolvedView");
+
+var _ForbiddenView = require("./views/ForbiddenView");
+
+var _NotFoundView = require("./views/NotFoundView");
+
+var _ResolvedView2 = require("./views/ResolvedView");
+
+var _UnauthorisedView = require("./views/UnauthorisedView");
+
+var _ErroredView = require("./views/ErroredView");
+
 var EmbedCard = /*#__PURE__*/_react.default.forwardRef(function (_ref, iframeRef) {
   var _details$meta, _forbiddenViewProps$c;
 
@@ -52,7 +62,7 @@ var EmbedCard = /*#__PURE__*/_react.default.forwardRef(function (_ref, iframeRef
   switch (status) {
     case 'pending':
     case 'resolving':
-      return /*#__PURE__*/_react.default.createElement(_mediaUi.BlockCardResolvingView, {
+      return /*#__PURE__*/_react.default.createElement(_BlockCard.BlockCardResolvingView, {
         testId: "embed-card-resolving-view",
         inheritDimensions: inheritDimensions,
         isSelected: isSelected
@@ -72,7 +82,7 @@ var EmbedCard = /*#__PURE__*/_react.default.forwardRef(function (_ref, iframeRef
       }
 
       if (resolvedViewProps.preview) {
-        return /*#__PURE__*/_react.default.createElement(_embeds.EmbedCardResolvedView, (0, _extends2.default)({}, resolvedViewProps, {
+        return /*#__PURE__*/_react.default.createElement(_ResolvedView2.EmbedCardResolvedView, (0, _extends2.default)({}, resolvedViewProps, {
           isSelected: isSelected,
           isFrameVisible: isFrameVisible,
           inheritDimensions: inheritDimensions,
@@ -82,7 +92,7 @@ var EmbedCard = /*#__PURE__*/_react.default.forwardRef(function (_ref, iframeRef
       } else {
         if (platform === 'mobile') {
           var resolvedInlineViewProps = (0, _inline.extractInlineProps)(data);
-          return /*#__PURE__*/_react.default.createElement(_mediaUi.InlineCardResolvedView, (0, _extends2.default)({}, resolvedInlineViewProps, {
+          return /*#__PURE__*/_react.default.createElement(_ResolvedView.InlineCardResolvedView, (0, _extends2.default)({}, resolvedInlineViewProps, {
             isSelected: isSelected,
             testId: testId,
             onClick: handleFrameClick
@@ -94,7 +104,7 @@ var EmbedCard = /*#__PURE__*/_react.default.forwardRef(function (_ref, iframeRef
           handleInvoke: handleInvoke,
           extensionKey: (0, _helpers.getExtensionKey)(details)
         });
-        return /*#__PURE__*/_react.default.createElement(_mediaUi.BlockCardResolvedView, (0, _extends2.default)({}, resolvedBlockViewProps, {
+        return /*#__PURE__*/_react.default.createElement(_BlockCard.BlockCardResolvedView, (0, _extends2.default)({}, resolvedBlockViewProps, {
           isSelected: isSelected,
           testId: testId,
           showActions: showActions,
@@ -104,7 +114,7 @@ var EmbedCard = /*#__PURE__*/_react.default.forwardRef(function (_ref, iframeRef
 
     case 'unauthorized':
       var unauthorisedViewProps = (0, _embed.extractEmbedProps)(data, meta, platform);
-      return /*#__PURE__*/_react.default.createElement(_embeds.EmbedCardUnauthorisedView, (0, _extends2.default)({}, unauthorisedViewProps, {
+      return /*#__PURE__*/_react.default.createElement(_UnauthorisedView.EmbedCardUnauthorisedView, (0, _extends2.default)({}, unauthorisedViewProps, {
         isSelected: isSelected,
         onAuthorise: handleAuthorize,
         inheritDimensions: inheritDimensions,
@@ -119,7 +129,7 @@ var EmbedCard = /*#__PURE__*/_react.default.forwardRef(function (_ref, iframeRef
         url: url,
         context: (_forbiddenViewProps$c = forbiddenViewProps.context) === null || _forbiddenViewProps$c === void 0 ? void 0 : _forbiddenViewProps$c.text
       });
-      return /*#__PURE__*/_react.default.createElement(_embeds.EmbedCardForbiddenView, (0, _extends2.default)({}, forbiddenViewProps, {
+      return /*#__PURE__*/_react.default.createElement(_ForbiddenView.EmbedCardForbiddenView, (0, _extends2.default)({}, forbiddenViewProps, {
         isSelected: isSelected,
         onAuthorise: handleAuthorize,
         inheritDimensions: inheritDimensions,
@@ -129,7 +139,7 @@ var EmbedCard = /*#__PURE__*/_react.default.forwardRef(function (_ref, iframeRef
 
     case 'not_found':
       var notFoundViewProps = (0, _embed.extractEmbedProps)(data, meta, platform);
-      return /*#__PURE__*/_react.default.createElement(_embeds.EmbedCardNotFoundView, (0, _extends2.default)({}, notFoundViewProps, {
+      return /*#__PURE__*/_react.default.createElement(_NotFoundView.EmbedCardNotFoundView, (0, _extends2.default)({}, notFoundViewProps, {
         isSelected: isSelected,
         inheritDimensions: inheritDimensions,
         onClick: handleFrameClick
@@ -137,7 +147,7 @@ var EmbedCard = /*#__PURE__*/_react.default.forwardRef(function (_ref, iframeRef
 
     case 'fallback':
     case 'errored':
-      return /*#__PURE__*/_react.default.createElement(_embeds.EmbedCardErroredView, {
+      return /*#__PURE__*/_react.default.createElement(_ErroredView.EmbedCardErroredView, {
         onRetry: handleErrorRetry,
         inheritDimensions: inheritDimensions,
         isSelected: isSelected