@atlaskit/smart-card 17.0.0 → 17.2.1

package/dist/cjs/view/BlockCard/views/ResolvedView.js

@@ -0,0 +1,144 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.blockCardResolvedViewClassName = exports.blockCardResolvedViewByClassName = exports.ResolvedView = void 0;
+
+var _core = require("@emotion/core");
+
+var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
+
+var _Frame = require("../components/Frame");
+
+var _Thumbnail = require("../components/Thumbnail");
+
+var _Provider = require("../components/Provider");
+
+var _Name = require("../components/Name");
+
+var _Byline = require("../components/Byline");
+
+var _ActionList = require("../components/ActionList");
+
+var _CollaboratorList = require("../components/CollaboratorList");
+
+var _Emoji = require("../components/Emoji");
+
+var _Icon = require("../components/Icon");
+
+var _Content = require("../components/Content");
+
+var _MetadataList = require("../components/MetadataList");
+
+var _styled = require("../../InlineCard/IconAndTitleLayout/styled");
+
+var _ContentHeader = require("../components/ContentHeader");
+
+var _ContentFooter = require("../components/ContentFooter");
+
+var _utils = require("../utils");
+
+var _handlers = require("../utils/handlers");
+
+/** @jsx jsx */
+var blockCardResolvedViewClassName = 'block-card-resolved-view';
+exports.blockCardResolvedViewClassName = blockCardResolvedViewClassName;
+var blockCardResolvedViewByClassName = 'block-card-resolved-view-by';
+exports.blockCardResolvedViewByClassName = blockCardResolvedViewByClassName;
+
+var ResolvedView = function ResolvedView(_ref) {
+  var _ref$icon = _ref.icon,
+      icon = _ref$icon === void 0 ? {} : _ref$icon,
+      _ref$actions = _ref.actions,
+      actions = _ref$actions === void 0 ? [] : _ref$actions,
+      thumbnail = _ref.thumbnail,
+      _ref$context = _ref.context,
+      context = _ref$context === void 0 ? {
+    text: ''
+  } : _ref$context,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '' : _ref$title,
+      titleTextColor = _ref.titleTextColor,
+      titlePrefix = _ref.titlePrefix,
+      _ref$isSelected = _ref.isSelected,
+      isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+      _ref$users = _ref.users,
+      users = _ref$users === void 0 ? [] : _ref$users,
+      _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$onClick = _ref.onClick,
+      onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
+      _ref$link = _ref.link,
+      link = _ref$link === void 0 ? '' : _ref$link,
+      _ref$byline = _ref.byline,
+      byline = _ref$byline === void 0 ? '' : _ref$byline,
+      lozenge = _ref.lozenge,
+      _ref$details = _ref.details,
+      details = _ref$details === void 0 ? [] : _ref$details,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'block-card-resolved-view' : _ref$testId,
+      _ref$showActions = _ref.showActions,
+      showActions = _ref$showActions === void 0 ? true : _ref$showActions;
+  var resolvedMetadata = details.length > 0 ? (0, _core.jsx)(_MetadataList.MetadataList, {
+    testId: testId ? "".concat(testId, "-meta") : undefined,
+    items: details
+  }) : undefined;
+  var resolvedByline = (0, _core.jsx)(_Byline.Byline, {
+    testId: testId ? "".concat(testId, "-by") : undefined,
+    className: blockCardResolvedViewByClassName
+  }, byline);
+
+  var handleClick = function handleClick(event) {
+    return (0, _handlers.handleClickCommon)(event, onClick);
+  };
+
+  var hasActions = showActions && actions.length > 0;
+  return (0, _core.jsx)(_Frame.Frame, {
+    isSelected: isSelected,
+    testId: testId,
+    className: blockCardResolvedViewClassName
+  }, (0, _core.jsx)(_Content.Content, null, (0, _core.jsx)("div", null, (0, _core.jsx)("div", {
+    css: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'flex-start'
+    }
+  }, (0, _core.jsx)(_ContentHeader.ContentHeader, {
+    onClick: handleClick,
+    link: link
+  }, titlePrefix ? (0, _core.jsx)(_Emoji.Emoji, {
+    emoji: titlePrefix
+  }) : (0, _core.jsx)(_Icon.Icon, icon), (0, _core.jsx)(_Name.Name, {
+    name: title,
+    textColor: titleTextColor
+  }), lozenge && (0, _core.jsx)(_styled.LozengeBlockWrapper, {
+    css: {
+      height: (0, _utils.gs)(2.5),
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  }, (0, _core.jsx)(_lozenge.default, lozenge, lozenge.text))), (0, _core.jsx)(_CollaboratorList.CollaboratorList, {
+    items: users,
+    handleAvatarClick: handleAvatarClick,
+    handleMoreAvatarsClick: handleMoreAvatarsClick,
+    testId: testId ? "".concat(testId, "-collaborator-list") : undefined
+  })), resolvedByline, resolvedMetadata), (0, _core.jsx)(_ContentFooter.ContentFooter, {
+    hasSpaceBetween: hasActions
+  }, (0, _core.jsx)(_Provider.Provider, {
+    name: context.text,
+    icon: context.icon
+  }), hasActions && (0, _core.jsx)(_ActionList.ActionList, {
+    items: actions
+  }))), thumbnail ? (0, _core.jsx)(_Thumbnail.Thumbnail, {
+    src: thumbnail,
+    testId: testId ? "".concat(testId, "-thumb") : undefined
+  }) : null);
+};
+
+exports.ResolvedView = ResolvedView;

package/dist/cjs/view/BlockCard/views/ResolvingView.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.blockCardResolvingViewClassName = exports.ResolvingView = void 0;
+
+var _core = require("@emotion/core");
+
+var _documentFilled = _interopRequireDefault(require("@atlaskit/icon/glyph/document-filled"));
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _Frame = require("../components/Frame");
+
+var _utils = require("../utils");
+
+var _reactIntlNext = require("react-intl-next");
+
+var _messages = require("@atlaskit/media-ui/messages");
+
+/** @jsx jsx */
+var blockCardResolvingViewClassName = 'block-card-resolving-view';
+exports.blockCardResolvingViewClassName = blockCardResolvingViewClassName;
+
+var ResolvingView = function ResolvingView(_ref) {
+  var _ref$isSelected = _ref.isSelected,
+      isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'block-card-resolving-view' : _ref$testId,
+      inheritDimensions = _ref.inheritDimensions;
+  return (0, _core.jsx)(_Frame.Frame, {
+    inheritDimensions: inheritDimensions,
+    compact: true,
+    isSelected: isSelected,
+    testId: testId,
+    className: blockCardResolvingViewClassName
+  }, (0, _core.jsx)(_documentFilled.default, {
+    size: "small",
+    primaryColor: _colors.N50,
+    label: "document-icon"
+  }), (0, _core.jsx)("span", {
+    css: {
+      fontSize: "".concat((0, _constants.fontSize)(), "px"),
+      color: _colors.N90,
+      marginLeft: (0, _utils.gs)(0.5)
+    }
+  }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.loading)));
+};
+
+exports.ResolvingView = ResolvingView;

package/dist/cjs/view/BlockCard/views/UnauthorizedView.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UnauthorizedView = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _core = require("@emotion/core");
+
+var _reactIntlNext = require("react-intl-next");
+
+var _Frame = require("../components/Frame");
+
+var _Provider = require("../components/Provider");
+
+var _Byline = require("../components/Byline");
+
+var _ActionList = require("../components/ActionList");
+
+var _Content = require("../components/Content");
+
+var _messages = require("@atlaskit/media-ui/messages");
+
+var _ContentHeader = require("../components/ContentHeader");
+
+var _ContentFooter = require("../components/ContentFooter");
+
+var _handlers = require("../utils/handlers");
+
+var _Link = require("../components/Link");
+
+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) { (0, _defineProperty2.default)(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; }
+
+var textBylineProps = _objectSpread({}, _messages.messages.connect_link_account_card_description);
+
+var UnauthorizedView = function UnauthorizedView(_ref) {
+  var _ref$context = _ref.context,
+      context = _ref$context === void 0 ? {
+    text: ''
+  } : _ref$context,
+      _ref$isSelected = _ref.isSelected,
+      isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+      _ref$actions = _ref.actions,
+      actions = _ref$actions === void 0 ? [] : _ref$actions,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'block-card-unauthorized-view' : _ref$testId,
+      _ref$showActions = _ref.showActions,
+      showActions = _ref$showActions === void 0 ? true : _ref$showActions,
+      _ref$link = _ref.link,
+      link = _ref$link === void 0 ? '' : _ref$link,
+      _ref$onClick = _ref.onClick,
+      onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick;
+
+  var handleClick = function handleClick(event) {
+    return (0, _handlers.handleClickCommon)(event, onClick);
+  };
+
+  return (0, _core.jsx)(_Frame.Frame, {
+    isSelected: isSelected,
+    testId: testId,
+    isFluidHeight: true
+  }, (0, _core.jsx)(_Content.Content, {
+    isCompact: true
+  }, (0, _core.jsx)("div", null, (0, _core.jsx)(_ContentHeader.ContentHeader, {
+    onClick: handleClick,
+    link: link
+  }, (0, _core.jsx)(_Link.Link, {
+    url: link,
+    testId: testId
+  })), (0, _core.jsx)(_Byline.Byline, {
+    testId: testId ? "".concat(testId, "-byline") : undefined,
+    text: (0, _core.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, textBylineProps, {
+      values: {
+        context: context.text
+      }
+    }))
+  })), (0, _core.jsx)(_ContentFooter.ContentFooter, null, (0, _core.jsx)(_Provider.Provider, {
+    name: context.text,
+    icon: context.icon
+  }), showActions && (0, _core.jsx)(_ActionList.ActionList, {
+    items: actions
+  }))));
+};
+
+exports.UnauthorizedView = UnauthorizedView;

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

@@ -21,14 +21,16 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _react = _interopRequireDefault(require("react"));
 
-var _mediaUi = require("@atlaskit/media-ui");
-
 var _jsonld = require("../../utils/jsonld");
 
 var _inline = require("../../extractors/inline");
 
 var _block = require("../../extractors/block");
 
+var _ResolvedView = require("../InlineCard/ResolvedView");
+
+var _BlockCard = require("../BlockCard");
+
 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); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -64,7 +66,7 @@ var CardWithDataContent = /*#__PURE__*/function (_React$Component) {
           });
         }
 
-        return /*#__PURE__*/_react.default.createElement(_mediaUi.InlineCardResolvedView, (0, _extends2.default)({}, props, {
+        return /*#__PURE__*/_react.default.createElement(_ResolvedView.InlineCardResolvedView, (0, _extends2.default)({}, props, {
           isSelected: isSelected,
           onClick: onClick,
           testId: testId
@@ -78,7 +80,7 @@ var CardWithDataContent = /*#__PURE__*/function (_React$Component) {
           });
         }
 
-        return /*#__PURE__*/_react.default.createElement(_mediaUi.BlockCardResolvedView, (0, _extends2.default)({}, _props, {
+        return /*#__PURE__*/_react.default.createElement(_BlockCard.BlockCardResolvedView, (0, _extends2.default)({}, _props, {
           isSelected: isSelected,
           onClick: onClick,
           showActions: showActions

package/dist/cjs/view/CardWithUrl/component-lazy/LazyFallback.js

@@ -9,7 +9,7 @@ exports.loadingPlaceholderClassName = exports.LoadingCardLink = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _mediaUi = require("@atlaskit/media-ui");
+var _LinkView = require("../../../view/LinkView");
 
 var loadingPlaceholderClassName = 'smart-link-loading-placeholder';
 exports.loadingPlaceholderClassName = loadingPlaceholderClassName;
@@ -17,7 +17,7 @@ exports.loadingPlaceholderClassName = loadingPlaceholderClassName;
 var LoadingCardLink = function LoadingCardLink(_ref) {
   var isSelected = _ref.isSelected,
       url = _ref.url;
-  return /*#__PURE__*/_react.default.createElement(_mediaUi.CardLinkView, {
+  return /*#__PURE__*/_react.default.createElement(_LinkView.CardLinkView, {
     key: 'lazy-render-key',
     testId: 'lazy-render-placeholder',
     "data-trello-do-not-use-override": "lazy-render-placeholder-trello",

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;