@atlaskit/smart-card 16.3.0 → 17.2.0

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

@@ -0,0 +1,45 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React, { useState } from 'react';
+import { getIframeSandboxAttribute } from '../../../utils';
+export var Frame = /*#__PURE__*/React.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 = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isIframeLoaded = _useState2[0],
+      setIframeLoaded = _useState2[1];
+
+  if (!url) {
+    return null;
+  }
+
+  return 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: getIframeSandboxAttribute(isTrusted)
+  });
+});

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import ImageLoader from 'react-render-image';
+import { Image } from './styled';
+export 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.createElement(ImageLoader, {
+    src: src,
+    loading: defaultIcon,
+    loaded: /*#__PURE__*/React.createElement(Image, {
+      className: "smart-link-icon",
+      src: src,
+      alt: alt,
+      size: size,
+      title: title
+    }),
+    errored: defaultIcon
+  });
+};

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

@@ -0,0 +1,116 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
+
+import styled from '@emotion/styled';
+import { size as csssize, borderRadius, size, ellipsis } from '@atlaskit/media-ui';
+import { fontFamily } from '@atlaskit/theme/constants';
+import * as colors from '@atlaskit/theme/colors';
+import { gs as gridSize } from '../../BlockCard/utils';
+export var className = 'media-card-frame';
+export var 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(borderRadius, "\n    }\n    ") : '';
+}
+
+var height = function height(_ref5) {
+  var inheritDimensions = _ref5.inheritDimensions;
+  return inheritDimensions ? 'height: 100%;' : "height: ".concat(gridSize(54));
+};
+
+var wrapperStyles = function wrapperStyles(props) {
+  return "\n  ".concat(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(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(gridSize(2), ");\n    height: calc(100% + ").concat(gridSize(1), ");\n    left: -").concat(gridSize(1), ";\n    ").concat(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 : '';
+}
+
+export var LinkWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", " &:hover {\n    text-decoration: none;\n  }\n"])), function (props) {
+  return wrapperStyles(props);
+});
+export var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n  margin-top: 10px;\n"])), function (props) {
+  return wrapperStyles(props);
+});
+export var embedHeaderHeight = 32;
+export var Header = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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);
+export var IconWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  ", " margin-right: 4px;\n"])), borderRadius, size(16), function (_ref7) {
+  var isPlaceholder = _ref7.isPlaceholder;
+
+  if (isPlaceholder) {
+    return "\n      background-color: ".concat(colors.N30, ";\n    ");
+  } else {
+    return '';
+  }
+});
+export var TextWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", " color: ", ";\n  font-size: 12px;\n  line-height: 16px;\n  ", ";\n"])), function (_ref8) {
+  var isPlaceholder = _ref8.isPlaceholder;
+
+  if (isPlaceholder) {
+    return "\n        ".concat(borderRadius, "\n        width: 125px;\n        height: 12px;\n        background-color: ").concat(colors.N30, ";\n      ");
+  } else {
+    return '';
+  }
+}, colors.N300, ellipsis('none'));
+// NB: `overflow` is kept as `hidden` since
+// the internal contents of the `iframe` should
+// manage scrolling behaviour.
+export var Content = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\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"])), borderRadius, cardShadow, gridSize(4), gridSize(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 '';
+  }
+});
+export var Image = styled.img(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\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 csssize(size);
+}, borderRadius);
+export var maxAvatarCount = 6;
+export var ContentWrapper = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  padding: 8px 12px 12px 12px;\n"])));
+export var Title = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\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);
+export var Byline = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin-top: 4px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  ", ";\n"])), colors.N300, 16 / 12, ellipsis('100%'));
+export var Description = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\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);
+export var ResolvedViewIconWrapper = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  margin-top: 4px;\n"])));
+export var Thumbnail = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  float: right;\n  margin: 4px 0 12px 12px;\n  background-color: ", ";\n  background-image: url(", ");\n  background-size: cover;\n"])), borderRadius, size(48), colors.N30, function (_ref11) {
+  var src = _ref11.src;
+  return src;
+});
+export var UsersWrapper = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  margin-top: 8px;\n"])));
+export var ActionsWrapper = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  margin-top: 8px;\n  text-align: right;\n\n  > * {\n    margin-top: 4px;\n  }\n\n  > * + * {\n    margin-left: 4px;\n  }\n"])));
+export var AlertWrapper = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\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);

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

@@ -1,13 +1,18 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { BlockCardResolvedView, BlockCardResolvingView, InlineCardResolvedView } from '@atlaskit/media-ui';
-import { EmbedCardResolvedView, EmbedCardUnauthorisedView, EmbedCardForbiddenView, EmbedCardNotFoundView, EmbedCardErroredView } from '@atlaskit/media-ui/embeds';
 import { extractEmbedProps } from '../../extractors/embed';
 import { getEmptyJsonLd, getUnauthorizedJsonLd } from '../../utils/jsonld';
 import { extractInlineProps } from '../../extractors/inline';
 import { extractBlockProps } from '../../extractors/block';
 import { getExtensionKey } from '../../state/helpers';
 import { extractRequestAccessContext } from '../../extractors/common/context';
+import { BlockCardResolvedView, BlockCardResolvingView } from '../BlockCard';
+import { InlineCardResolvedView } from '../InlineCard/ResolvedView';
+import { EmbedCardForbiddenView } from './views/ForbiddenView';
+import { EmbedCardNotFoundView } from './views/NotFoundView';
+import { EmbedCardResolvedView } from './views/ResolvedView';
+import { EmbedCardUnauthorisedView } from './views/UnauthorisedView';
+import { EmbedCardErroredView } from './views/ErroredView';
 export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef) {
   var _details$meta, _forbiddenViewProps$c;
 

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

@@ -0,0 +1,46 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import Button from '@atlaskit/button/custom-theme-button';
+import ErrorIcon from '@atlaskit/icon/glyph/error';
+import { fontSize } from '@atlaskit/theme/constants';
+import { R300 } from '@atlaskit/theme/colors';
+import { Frame } from '../../BlockCard/components/Frame';
+import { FormattedMessage } from 'react-intl-next';
+import { messages } from '@atlaskit/media-ui/messages';
+import { gs } from '../../BlockCard/utils';
+export 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 jsx(Frame, {
+    inheritDimensions: inheritDimensions,
+    compact: true,
+    isSelected: isSelected,
+    testId: testId
+  }, jsx(ErrorIcon, {
+    size: "small",
+    primaryColor: R300,
+    label: "error-icon"
+  }), jsx("span", {
+    css: {
+      fontSize: "".concat(fontSize(), "px"),
+      marginLeft: gs(0.5),
+      marginRight: gs(0.5),
+      display: '-webkit-box',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      WebkitLineClamp: 1,
+      WebkitBoxOrient: 'vertical',
+      // Fallback options.
+      maxHeight: gs(3)
+    }
+  }, jsx(FormattedMessage, messages.could_not_load_link)), jsx(Button, {
+    testId: "err-view-retry",
+    appearance: "link",
+    spacing: "none",
+    onClick: onRetry
+  }, jsx(FormattedMessage, messages.try_again)));
+};

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import { EmbedCardUnresolvedView } from './UnresolvedView';
+import { LockImage } from '../../BlockCard/utils/constants';
+import { ExpandedFrame } from '../components/ExpandedFrame';
+import { ImageIcon } from '../components/ImageIcon';
+export 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.createElement(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.createElement(ExpandedFrame, {
+    href: link,
+    icon: icon,
+    text: context && context.text,
+    isVisible: true,
+    isSelected: isSelected,
+    inheritDimensions: inheritDimensions,
+    onClick: onClick,
+    testId: testId
+  }, /*#__PURE__*/React.createElement(EmbedCardUnresolvedView, {
+    image: LockImage,
+    title: "invalid_permissions",
+    description: descriptionKey,
+    context: context && context.text,
+    button: buttonProps,
+    onClick: onEmbedCardClick,
+    testId: testId
+  }));
+};

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { EmbedCardUnresolvedView } from './UnresolvedView';
+import { NotFoundImage } from '../../BlockCard/utils/constants';
+import { ExpandedFrame } from '../components/ExpandedFrame';
+import { ImageIcon } from '../components/ImageIcon';
+export 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.createElement(ImageIcon, {
+    src: typeof context.icon === 'string' ? context.icon : undefined
+  });
+  return /*#__PURE__*/React.createElement(ExpandedFrame, {
+    href: link,
+    icon: icon,
+    text: context && context.text,
+    isVisible: true,
+    isSelected: isSelected,
+    inheritDimensions: inheritDimensions,
+    onClick: onClick,
+    testId: testId
+  }, /*#__PURE__*/React.createElement(EmbedCardUnresolvedView, {
+    image: NotFoundImage,
+    title: "not_found_title",
+    description: "not_found_description",
+    context: context && context.text,
+    testId: testId
+  }));
+};

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

@@ -0,0 +1,55 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React from 'react';
+import LinkGlyph from '@atlaskit/icon/glyph/link';
+import { ExpandedFrame } from '../components/ExpandedFrame';
+import { ImageIcon } from '../components/ImageIcon';
+import { Frame } from '../components/Frame';
+export var EmbedCardResolvedView = /*#__PURE__*/React.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.useMemo(function () {
+    return jsx(LinkGlyph, {
+      label: "icon",
+      size: "small",
+      testId: "embed-card-fallback-icon"
+    });
+  }, []);
+  var icon = React.useMemo(function () {
+    if ( /*#__PURE__*/React.isValidElement(iconFromContext)) {
+      return iconFromContext;
+    }
+
+    return jsx(ImageIcon, {
+      src: src,
+      default: linkGlyph
+    });
+  }, [src, linkGlyph, iconFromContext]);
+  return jsx(ExpandedFrame, {
+    isSelected: isSelected,
+    isFrameVisible: isFrameVisible,
+    href: link,
+    testId: testId,
+    icon: icon,
+    text: text,
+    onClick: onClick,
+    inheritDimensions: inheritDimensions
+  }, jsx(Frame, {
+    url: preview === null || preview === void 0 ? void 0 : preview.src,
+    isTrusted: isTrusted,
+    testId: testId,
+    ref: embedIframeRef
+  }));
+});

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { EmbedCardUnresolvedView } from './UnresolvedView';
+import { CelebrationImage } from '../../BlockCard/utils/constants';
+import { ExpandedFrame } from '../components/ExpandedFrame';
+import { ImageIcon } from '../components/ImageIcon';
+export 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.createElement(ImageIcon, {
+    src: typeof context.icon === 'string' ? context.icon : undefined
+  });
+  return /*#__PURE__*/React.createElement(ExpandedFrame, {
+    href: link,
+    icon: icon,
+    text: context && context.text,
+    isVisible: true,
+    isSelected: isSelected,
+    inheritDimensions: inheritDimensions,
+    onClick: onClick,
+    testId: testId
+  }, /*#__PURE__*/React.createElement(EmbedCardUnresolvedView, {
+    image: 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
+  }));
+};

package/dist/esm/view/EmbedCard/views/UnresolvedView.js

@@ -0,0 +1,66 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import Button from '@atlaskit/button/custom-theme-button';
+import { fontSize } from '@atlaskit/theme/constants';
+import { FormattedMessage } from 'react-intl-next';
+import { messages } from '@atlaskit/media-ui/messages';
+import { gs as gridSize } from '../../BlockCard/utils';
+export var EmbedCardUnresolvedView = function EmbedCardUnresolvedView(_ref) {
+  var image = _ref.image,
+      title = _ref.title,
+      description = _ref.description,
+      button = _ref.button,
+      context = _ref.context,
+      onClick = _ref.onClick,
+      testId = _ref.testId;
+  return jsx("div", {
+    css: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingTop: gridSize(4.5),
+      paddingBottom: gridSize(6)
+    },
+    "data-testid": "".concat(testId, "-unresolved-container")
+  }, jsx("img", {
+    src: image,
+    css: {
+      height: gridSize(14),
+      marginBottom: gridSize(4)
+    }
+  }), jsx("span", {
+    css: {
+      fontSize: gridSize(2.5),
+      marginBottom: gridSize(1.5),
+      width: gridSize(50),
+      textAlign: 'center'
+    }
+  }, jsx(FormattedMessage, _extends({}, messages[title], {
+    values: {
+      context: context
+    }
+  }))), jsx("span", {
+    css: {
+      fontSize: fontSize(),
+      marginBottom: gridSize(2.5),
+      textAlign: 'center',
+      width: gridSize(50),
+      lineHeight: gridSize(3)
+    }
+  }, jsx(FormattedMessage, _extends({}, messages[description], {
+    values: {
+      context: context
+    }
+  }))), button && jsx(Button, {
+    testId: "button-".concat(button.testId || testId),
+    appearance: button.appearance,
+    onClick: onClick
+  }, jsx(FormattedMessage, _extends({}, messages[button.text], {
+    values: {
+      context: context
+    }
+  }))));
+};

package/dist/esm/view/FlexibleCard/components/actions/delete-action/index.js

@@ -0,0 +1,64 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+/** @jsx jsx */
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { css, jsx } from '@emotion/core';
+import Button from '@atlaskit/button/custom-theme-button';
+import CrossIcon from '@atlaskit/icon/glyph/cross';
+import { SmartLinkSize } from '../../../../../constants';
+import Tooltip from '@atlaskit/tooltip';
+import { getIconSizeStyles } from '../../utils';
+import { messages } from '../../../../../messages';
+import { tokens } from '../../../../../utils/token';
+import { handleOnClick } from '../../../../../utils';
+
+var getWidth = function getWidth(size) {
+  switch (size) {
+    case SmartLinkSize.XLarge:
+    case SmartLinkSize.Large:
+      return '1.5rem';
+
+    case SmartLinkSize.Medium:
+    case SmartLinkSize.Small:
+    default:
+      return '1rem';
+  }
+};
+
+var getStyles = function getStyles(size) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  ", ";\n"])), tokens.actionIcon, getIconSizeStyles(getWidth(size)));
+};
+
+var DeleteAction = function DeleteAction(_ref) {
+  var _ref$appearance = _ref.appearance,
+      appearance = _ref$appearance === void 0 ? 'subtle' : _ref$appearance,
+      content = _ref.content,
+      onClick = _ref.onClick,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-action-delete-action' : _ref$testId;
+
+  if (!onClick) {
+    return null;
+  }
+
+  return jsx(Tooltip, {
+    content: jsx(FormattedMessage, messages.delete)
+  }, jsx(Button, {
+    spacing: "none",
+    appearance: appearance,
+    testId: testId,
+    onClick: handleOnClick(onClick)
+  }, content || jsx("span", {
+    css: getStyles(size),
+    "data-testid": "".concat(testId, "-icon")
+  }, jsx(CrossIcon, {
+    label: "Delete"
+  }))));
+};
+
+export default DeleteAction;

package/dist/esm/view/FlexibleCard/components/actions/index.js

@@ -0,0 +1,6 @@
+import { ActionName } from '../../../../constants';
+import { createAction } from './utils';
+// Attention: Keep the export name and action name the same.
+// This will help reducing the code for mapping action inside
+// createAction and renderActionItems
+export var DeleteAction = createAction(ActionName.DeleteAction);

package/dist/esm/view/FlexibleCard/components/actions/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/view/FlexibleCard/components/actions/utils.js

@@ -0,0 +1,48 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { ActionName } from '../../../../constants';
+import { FlexibleUiContext } from '../../../../state/flexible-ui-context';
+import React, { useContext } from 'react';
+import DeleteAction from './delete-action';
+
+var actionMappings = _defineProperty({}, ActionName.DeleteAction, {
+  component: DeleteAction
+});
+
+var getContextKey = function getContextKey(name) {
+  // Attempt to predict context prop name in advance to reduce the amount of
+  // code run during runtime
+  return name.length > 0 ? name.charAt(0).toLowerCase() + name.slice(1) : undefined;
+};
+
+var getActionData = function getActionData(actionName, contextKey, context) {
+  if (!context) {
+    return undefined;
+  }
+
+  var data = context[contextKey];
+
+  switch (actionName) {
+    case ActionName.DeleteAction:
+    default:
+      return data;
+  }
+};
+
+export var createAction = function createAction(name) {
+  var _ref = actionMappings[name] || {},
+      BaseAction = _ref.component,
+      props = _ref.props;
+
+  var contextKey = getContextKey(name);
+
+  if (!BaseAction) {
+    throw Error("Action ".concat(name, " does not exist."));
+  }
+
+  return function (overrides) {
+    var context = useContext(FlexibleUiContext);
+    var data = getActionData(name, contextKey, context);
+    return /*#__PURE__*/React.createElement(BaseAction, _extends({}, props, data, overrides));
+  };
+};