@atlaskit/smart-card 16.3.0 → 17.2.0

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

package/dist/cjs/view/EmbedCard/views/ErroredView.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmbedCardErroredView = void 0;
+
+var _core = require("@emotion/core");
+
+var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+
+var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _Frame = require("../../BlockCard/components/Frame");
+
+var _reactIntlNext = require("react-intl-next");
+
+var _messages = require("@atlaskit/media-ui/messages");
+
+var _utils = require("../../BlockCard/utils");
+
+/** @jsx jsx */
+var EmbedCardErroredView = function EmbedCardErroredView(_ref) {
+  var onRetry = _ref.onRetry,
+      _ref$isSelected = _ref.isSelected,
+      isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'embed-card-errored-view' : _ref$testId,
+      inheritDimensions = _ref.inheritDimensions;
+  return (0, _core.jsx)(_Frame.Frame, {
+    inheritDimensions: inheritDimensions,
+    compact: true,
+    isSelected: isSelected,
+    testId: testId
+  }, (0, _core.jsx)(_error.default, {
+    size: "small",
+    primaryColor: _colors.R300,
+    label: "error-icon"
+  }), (0, _core.jsx)("span", {
+    css: {
+      fontSize: "".concat((0, _constants.fontSize)(), "px"),
+      marginLeft: (0, _utils.gs)(0.5),
+      marginRight: (0, _utils.gs)(0.5),
+      display: '-webkit-box',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      WebkitLineClamp: 1,
+      WebkitBoxOrient: 'vertical',
+      // Fallback options.
+      maxHeight: (0, _utils.gs)(3)
+    }
+  }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.could_not_load_link)), (0, _core.jsx)(_customThemeButton.default, {
+    testId: "err-view-retry",
+    appearance: "link",
+    spacing: "none",
+    onClick: onRetry
+  }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.try_again)));
+};
+
+exports.EmbedCardErroredView = EmbedCardErroredView;

package/dist/cjs/view/EmbedCard/views/ForbiddenView.js

@@ -0,0 +1,85 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmbedCardForbiddenView = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _UnresolvedView = require("./UnresolvedView");
+
+var _constants = require("../../BlockCard/utils/constants");
+
+var _ExpandedFrame = require("../components/ExpandedFrame");
+
+var _ImageIcon = require("../components/ImageIcon");
+
+var EmbedCardForbiddenView = function EmbedCardForbiddenView(_ref) {
+  var _action$promise;
+
+  var link = _ref.link,
+      context = _ref.context,
+      isSelected = _ref.isSelected,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'embed-card-forbidden-view' : _ref$testId,
+      onAuthorise = _ref.onAuthorise,
+      inheritDimensions = _ref.inheritDimensions,
+      onClick = _ref.onClick,
+      _ref$requestAccessCon = _ref.requestAccessContext,
+      requestAccessContext = _ref$requestAccessCon === void 0 ? {} : _ref$requestAccessCon;
+
+  var icon = context && context.icon && /*#__PURE__*/_react.default.createElement(_ImageIcon.ImageIcon, {
+    src: typeof context.icon === 'string' ? context.icon : undefined
+  });
+
+  var descriptiveMessageKey = requestAccessContext.descriptiveMessageKey,
+      callToActionMessageKey = requestAccessContext.callToActionMessageKey,
+      action = requestAccessContext.action;
+  var onEmbedCardClick = (_action$promise = action === null || action === void 0 ? void 0 : action.promise) !== null && _action$promise !== void 0 ? _action$promise : onAuthorise;
+  var showButton = true;
+  /**
+   * if there is a request access context, but no action to perform, do not show any button.
+   * By default, a "Try another account" button shows, but with request access context, we don't
+   * want to encourage users to try another account, if their request is already pending, etc.
+   */
+
+  if (!callToActionMessageKey && descriptiveMessageKey) {
+    showButton = false;
+  }
+
+  var descriptionKey = descriptiveMessageKey !== null && descriptiveMessageKey !== void 0 ? descriptiveMessageKey : 'invalid_permissions_description';
+  var buttonTextKey = callToActionMessageKey !== null && callToActionMessageKey !== void 0 ? callToActionMessageKey : 'try_another_account';
+  var buttonProps;
+
+  if (showButton) {
+    buttonProps = {
+      appearance: 'default',
+      text: buttonTextKey,
+      testId: (action === null || action === void 0 ? void 0 : action.id) || 'connect-other-account'
+    };
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_ExpandedFrame.ExpandedFrame, {
+    href: link,
+    icon: icon,
+    text: context && context.text,
+    isVisible: true,
+    isSelected: isSelected,
+    inheritDimensions: inheritDimensions,
+    onClick: onClick,
+    testId: testId
+  }, /*#__PURE__*/_react.default.createElement(_UnresolvedView.EmbedCardUnresolvedView, {
+    image: _constants.LockImage,
+    title: "invalid_permissions",
+    description: descriptionKey,
+    context: context && context.text,
+    button: buttonProps,
+    onClick: onEmbedCardClick,
+    testId: testId
+  }));
+};
+
+exports.EmbedCardForbiddenView = EmbedCardForbiddenView;

package/dist/cjs/view/EmbedCard/views/NotFoundView.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmbedCardNotFoundView = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _UnresolvedView = require("./UnresolvedView");
+
+var _constants = require("../../BlockCard/utils/constants");
+
+var _ExpandedFrame = require("../components/ExpandedFrame");
+
+var _ImageIcon = require("../components/ImageIcon");
+
+var EmbedCardNotFoundView = function EmbedCardNotFoundView(_ref) {
+  var link = _ref.link,
+      context = _ref.context,
+      isSelected = _ref.isSelected,
+      inheritDimensions = _ref.inheritDimensions,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'embed-card-not-found-view' : _ref$testId,
+      onClick = _ref.onClick;
+
+  var icon = context && context.icon && /*#__PURE__*/_react.default.createElement(_ImageIcon.ImageIcon, {
+    src: typeof context.icon === 'string' ? context.icon : undefined
+  });
+
+  return /*#__PURE__*/_react.default.createElement(_ExpandedFrame.ExpandedFrame, {
+    href: link,
+    icon: icon,
+    text: context && context.text,
+    isVisible: true,
+    isSelected: isSelected,
+    inheritDimensions: inheritDimensions,
+    onClick: onClick,
+    testId: testId
+  }, /*#__PURE__*/_react.default.createElement(_UnresolvedView.EmbedCardUnresolvedView, {
+    image: _constants.NotFoundImage,
+    title: "not_found_title",
+    description: "not_found_description",
+    context: context && context.text,
+    testId: testId
+  }));
+};
+
+exports.EmbedCardNotFoundView = EmbedCardNotFoundView;

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

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmbedCardResolvedView = void 0;
+
+var _core = require("@emotion/core");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _link = _interopRequireDefault(require("@atlaskit/icon/glyph/link"));
+
+var _ExpandedFrame = require("../components/ExpandedFrame");
+
+var _ImageIcon = require("../components/ImageIcon");
+
+var _Frame = require("../components/Frame");
+
+/** @jsx jsx */
+var EmbedCardResolvedView = /*#__PURE__*/_react.default.forwardRef(function (_ref, embedIframeRef) {
+  var link = _ref.link,
+      context = _ref.context,
+      onClick = _ref.onClick,
+      isSelected = _ref.isSelected,
+      isFrameVisible = _ref.isFrameVisible,
+      preview = _ref.preview,
+      title = _ref.title,
+      isTrusted = _ref.isTrusted,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'embed-card-resolved-view' : _ref$testId,
+      inheritDimensions = _ref.inheritDimensions;
+  var iconFromContext = context === null || context === void 0 ? void 0 : context.icon;
+  var src = typeof iconFromContext === 'string' ? iconFromContext : undefined;
+  var text = title || (context === null || context === void 0 ? void 0 : context.text);
+
+  var linkGlyph = _react.default.useMemo(function () {
+    return (0, _core.jsx)(_link.default, {
+      label: "icon",
+      size: "small",
+      testId: "embed-card-fallback-icon"
+    });
+  }, []);
+
+  var icon = _react.default.useMemo(function () {
+    if ( /*#__PURE__*/_react.default.isValidElement(iconFromContext)) {
+      return iconFromContext;
+    }
+
+    return (0, _core.jsx)(_ImageIcon.ImageIcon, {
+      src: src,
+      default: linkGlyph
+    });
+  }, [src, linkGlyph, iconFromContext]);
+
+  return (0, _core.jsx)(_ExpandedFrame.ExpandedFrame, {
+    isSelected: isSelected,
+    isFrameVisible: isFrameVisible,
+    href: link,
+    testId: testId,
+    icon: icon,
+    text: text,
+    onClick: onClick,
+    inheritDimensions: inheritDimensions
+  }, (0, _core.jsx)(_Frame.Frame, {
+    url: preview === null || preview === void 0 ? void 0 : preview.src,
+    isTrusted: isTrusted,
+    testId: testId,
+    ref: embedIframeRef
+  }));
+});
+
+exports.EmbedCardResolvedView = EmbedCardResolvedView;

package/dist/cjs/view/EmbedCard/views/UnauthorisedView.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmbedCardUnauthorisedView = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _UnresolvedView = require("./UnresolvedView");
+
+var _constants = require("../../BlockCard/utils/constants");
+
+var _ExpandedFrame = require("../components/ExpandedFrame");
+
+var _ImageIcon = require("../components/ImageIcon");
+
+var EmbedCardUnauthorisedView = function EmbedCardUnauthorisedView(_ref) {
+  var link = _ref.link,
+      context = _ref.context,
+      isSelected = _ref.isSelected,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'embed-card-unauthorized-view' : _ref$testId,
+      onAuthorise = _ref.onAuthorise,
+      inheritDimensions = _ref.inheritDimensions,
+      onClick = _ref.onClick;
+
+  var icon = context && context.icon && /*#__PURE__*/_react.default.createElement(_ImageIcon.ImageIcon, {
+    src: typeof context.icon === 'string' ? context.icon : undefined
+  });
+
+  return /*#__PURE__*/_react.default.createElement(_ExpandedFrame.ExpandedFrame, {
+    href: link,
+    icon: icon,
+    text: context && context.text,
+    isVisible: true,
+    isSelected: isSelected,
+    inheritDimensions: inheritDimensions,
+    onClick: onClick,
+    testId: testId
+  }, /*#__PURE__*/_react.default.createElement(_UnresolvedView.EmbedCardUnresolvedView, {
+    image: _constants.CelebrationImage,
+    title: "connect_link_account_card_name",
+    description: "connect_link_account_card_description",
+    context: context && context.text,
+    button: {
+      appearance: 'primary',
+      text: 'connect_link_account_card',
+      testId: 'connect-account'
+    },
+    onClick: onAuthorise,
+    testId: testId
+  }));
+};
+
+exports.EmbedCardUnauthorisedView = EmbedCardUnauthorisedView;