@atlaskit/smart-card 17.0.1 → 17.3.0

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

@@ -0,0 +1,27 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { Metadata } from './Metadata';
+import { gs } from '../utils';
+export var metadataListClassName = 'smart-link-metadata-list';
+export var MetadataList = function MetadataList(_ref) {
+  var items = _ref.items,
+      testId = _ref.testId;
+  return jsx("div", {
+    css: {
+      display: 'flex',
+      marginTop: gs(0.5),
+      alignItems: 'center',
+      '&:last-child': {
+        marginRight: '0px'
+      }
+    },
+    "data-testid": testId,
+    className: metadataListClassName
+  }, items.map(function (item) {
+    return jsx(Metadata, _extends({
+      key: item.text
+    }, item));
+  }));
+};

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

@@ -0,0 +1,125 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
+
+/* TODO: (from codemod)
+We have converted this file as best we could but you might still need
+to manually complete migrating this usage of ModalDialog.
+
+This file uses one or more of the following ModalDialog props: 'components', 'header',
+'footer', 'body'. These props have been removed as part of moving to
+a compositional API.
+
+The render props that used to be exposed by the custom component APIs are
+now accessible using the 'useModal' hook instead: 'testId', 'titleId', and 'onClose'.
+
+We are also no longer exposing 'appearance' as render prop, so this needs to be
+manually passed to your custom components.
+
+For a complete guide on customization using the new compositional API, refer to the docs at
+https://atlassian.design/components/modal-dialog/examples#customizing-modal-dialog. */
+import React, { useState } from 'react';
+import ModalDialog, { ModalTransition, ModalBody } from '@atlaskit/modal-dialog';
+import { Header } from './ModalHeader';
+import { getIframeSandboxAttribute } from '../../../utils';
+var iframeStyles = {
+  width: "100%",
+  height: 'calc(100vh - 248px)'
+};
+
+var ModalWithErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  _inherits(ModalWithErrorBoundary, _React$Component);
+
+  var _super = _createSuper(ModalWithErrorBoundary);
+
+  function ModalWithErrorBoundary() {
+    _classCallCheck(this, ModalWithErrorBoundary);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(ModalWithErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error, errorInfo) {
+      if (this.props.onOpenFailed) {
+        this.props.onOpenFailed(error, errorInfo);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement(Modal, this.props);
+    }
+  }]);
+
+  return ModalWithErrorBoundary;
+}(React.Component);
+
+var Modal = function Modal(_ref) {
+  var onClose = _ref.onClose,
+      onOpen = _ref.onOpen,
+      src = _ref.src,
+      testId = _ref.testId,
+      showModal = _ref.showModal,
+      providerName = _ref.providerName,
+      metadata = _ref.metadata,
+      icon = _ref.icon,
+      closeLabel = _ref.closeLabel,
+      iframeName = _ref.iframeName,
+      title = _ref.title,
+      url = _ref.url,
+      download = _ref.download,
+      byline = _ref.byline,
+      _ref$isTrusted = _ref.isTrusted,
+      isTrusted = _ref$isTrusted === void 0 ? false : _ref$isTrusted,
+      onViewActionClick = _ref.onViewActionClick,
+      onDownloadActionClick = _ref.onDownloadActionClick;
+
+  var _useState = useState(showModal),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var sandbox = getIframeSandboxAttribute(isTrusted);
+  return /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(ModalDialog, {
+    height: "100%",
+    width: "large",
+    testId: testId,
+    onOpenComplete: onOpen,
+    onClose: function onClose() {
+      setIsOpen(false);
+    },
+    onCloseComplete: onClose
+  }, /*#__PURE__*/React.createElement(Header, {
+    providerName: providerName,
+    icon: icon,
+    metadata: metadata,
+    url: url,
+    title: title,
+    label: closeLabel,
+    download: download,
+    byline: byline,
+    onViewActionClick: onViewActionClick,
+    onDownloadActionClick: onDownloadActionClick
+  }), /*#__PURE__*/React.createElement(ModalBody, null, src ? /*#__PURE__*/React.createElement("iframe", {
+    style: iframeStyles,
+    name: iframeName,
+    frameBorder: 0,
+    src: src,
+    sandbox: sandbox
+  }) : /*#__PURE__*/React.createElement("iframe", {
+    style: iframeStyles,
+    name: iframeName,
+    frameBorder: 0,
+    sandbox: sandbox
+  }))));
+};
+
+export default ModalWithErrorBoundary;

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

@@ -0,0 +1,87 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { Fragment as F } from 'react';
+import { useModal } from '@atlaskit/modal-dialog';
+import EditorCloseIcon from '@atlaskit/icon/glyph/editor/close';
+import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
+import Button from '@atlaskit/button/custom-theme-button';
+import { N100, N30A } from '@atlaskit/theme/colors';
+import { FormattedMessage } from 'react-intl-next';
+import { gs } from '../utils';
+import { Icon } from './Icon';
+import { MetadataList } from './MetadataList';
+import { Byline } from './Byline';
+import { messages } from '@atlaskit/media-ui/messages';
+export var Header = function Header(_ref) {
+  var title = _ref.title,
+      label = _ref.label,
+      _ref$metadata = _ref.metadata,
+      metadata = _ref$metadata === void 0 ? {
+    items: []
+  } : _ref$metadata,
+      icon = _ref.icon,
+      providerName = _ref.providerName,
+      url = _ref.url,
+      download = _ref.download,
+      byline = _ref.byline,
+      onViewActionClick = _ref.onViewActionClick,
+      onDownloadActionClick = _ref.onDownloadActionClick;
+
+  var _useModal = useModal(),
+      onClose = _useModal.onClose;
+
+  return jsx("div", {
+    style: {
+      paddingLeft: gs(3),
+      paddingRight: gs(3),
+      paddingBottom: gs(2),
+      paddingTop: gs(2)
+    }
+  }, jsx("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'baseline',
+      borderBottom: "1px solid ".concat(N30A)
+    }
+  }, jsx("div", {
+    css: {
+      flex: 1
+    }
+  }, jsx("div", {
+    css: {
+      display: 'flex'
+    }
+  }, icon && jsx(Icon, icon), jsx("div", {
+    css: {
+      paddingLeft: gs(2),
+      paddingBottom: gs(2)
+    }
+  }, jsx("h3", null, title), jsx("div", {
+    css: {
+      color: N100
+    }
+  }, metadata.items.length && jsx(MetadataList, {
+    items: metadata.items
+  }) || jsx(Byline, null, byline))))), jsx("div", null, download && jsx(Button, {
+    appearance: "primary",
+    href: download,
+    onClick: onDownloadActionClick
+  }, jsx(FormattedMessage, messages.download)), url && jsx(Button, {
+    href: url,
+    target: "_blank",
+    appearance: "link",
+    testId: "preview-view-action",
+    iconAfter: jsx(ShortcutIcon, {
+      size: "small",
+      label: "go to source"
+    }),
+    onClick: onViewActionClick
+  }, providerName ? jsx(F, null, jsx(FormattedMessage, messages.viewIn), " ", providerName) : jsx(FormattedMessage, messages.viewOriginal)), jsx(Button, {
+    appearance: "subtle",
+    iconBefore: jsx(EditorCloseIcon, {
+      label: label
+    }),
+    onClick: onClose
+  }))));
+};

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

@@ -0,0 +1,33 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { fontSize } from '@atlaskit/theme/constants';
+import { gs } from '../utils';
+export var blockCardContentHeaderNameClassName = 'block-card-content-header-name';
+export var Name = function Name(_ref) {
+  var name = _ref.name,
+      _ref$isLeftPadded = _ref.isLeftPadded,
+      isLeftPadded = _ref$isLeftPadded === void 0 ? true : _ref$isLeftPadded,
+      testId = _ref.testId,
+      textColor = _ref.textColor;
+  return jsx("span", {
+    css: {
+      fontSize: "".concat(fontSize(), "px"),
+      fontWeight: 500,
+      marginLeft: isLeftPadded ? gs(1) : '0',
+      lineHeight: gs(2.5),
+      // Spec: show max two lines.
+      display: '-webkit-box',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      wordBreak: 'break-word',
+      WebkitLineClamp: 2,
+      WebkitBoxOrient: 'vertical',
+      color: textColor ? textColor : 'inherit',
+      // Fallback options.
+      maxHeight: gs(6)
+    },
+    "data-testid": testId,
+    "data-trello-do-not-use-override": "block-card-content-header-name",
+    className: blockCardContentHeaderNameClassName
+  }, name);
+};

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

@@ -0,0 +1,37 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { N300 } from '@atlaskit/theme/colors';
+import { gs } from '../utils';
+export var Provider = function Provider(_ref) {
+  var name = _ref.name,
+      icon = _ref.icon;
+  var iconToRender = icon || null;
+
+  if (typeof icon === 'string') {
+    iconToRender = jsx("img", {
+      className: "smart-link-icon",
+      css: {
+        height: gs(1.5),
+        width: gs(1.5)
+      },
+      src: icon
+    });
+  }
+
+  return jsx("div", {
+    css: {
+      display: 'flex',
+      alignItems: 'center'
+    }
+  }, iconToRender, jsx("span", {
+    css: {
+      fontSize: gs(1.5),
+      color: N300,
+      margin: 0,
+      marginLeft: gs(0.5),
+      // EDM-713: fixes copy-paste from renderer to editor for Firefox
+      // due to HTML its unwrapping behaviour on paste.
+      MozUserSelect: 'none'
+    }
+  }, name));
+};

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

@@ -0,0 +1,53 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { gs, mq } from '../utils';
+export var Thumbnail = function Thumbnail(props) {
+  return props.color ? jsx(ThumbnailWithBackground, props) : jsx(ThumbnailDefault, props);
+};
+var sharedStyles = {
+  // The dimensions of the image are set in this manner
+  // in order for `flex` to respect this value.
+  minWidth: [gs(13), gs(20)],
+  maxWidth: [gs(13), gs(20)]
+};
+export var ThumbnailDefault = function ThumbnailDefault(_ref) {
+  var src = _ref.src,
+      testId = _ref.testId;
+  return jsx("div", {
+    css: mq(_objectSpread(_objectSpread({}, sharedStyles), {}, {
+      backgroundSize: 'cover',
+      backgroundRepeat: 'no-repeat',
+      backgroundPosition: '50% 50%',
+      backgroundImage: "url(".concat(src, ")")
+    })),
+    "data-testid": testId,
+    "data-trello-do-not-use-override": testId
+  });
+};
+export var ThumbnailWithBackground = function ThumbnailWithBackground(_ref2) {
+  var src = _ref2.src,
+      color = _ref2.color,
+      testId = _ref2.testId;
+  return jsx("div", {
+    css: mq(_objectSpread(_objectSpread({}, sharedStyles), {}, {
+      backgroundColor: color,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    })),
+    "data-testid": testId,
+    "data-trello-do-not-use-override": testId
+  }, jsx("img", {
+    src: src,
+    css: {
+      height: '90px',
+      width: '90px'
+    }
+  }));
+};

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

@@ -0,0 +1,12 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+export var UnresolvedText = function UnresolvedText(_ref) {
+  var icon = _ref.icon,
+      text = _ref.text;
+  return jsx("span", {
+    css: {
+      display: 'flex',
+      alignItems: 'center'
+    }
+  }, icon, text);
+};

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

@@ -1,10 +1,20 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { CardLinkView, BlockCardResolvingView, BlockCardErroredView, BlockCardUnauthorisedView, BlockCardForbiddenView, BlockCardResolvedView, BlockCardNotFoundView, AuthorizeAction, ForbiddenAction } from '@atlaskit/media-ui';
 import { getExtensionKey } from '../../state/helpers';
 import { extractBlockProps } from '../../extractors/block';
 import { getEmptyJsonLd, getUnauthorizedJsonLd } from '../../utils/jsonld';
 import { extractRequestAccessContext } from '../../extractors/common/context';
+import { CardLinkView } from '../LinkView';
+export { default as PreviewAction } from './actions/PreviewAction';
+import { AuthorizeAction } from './actions/AuthorizeAction';
+import { ForbiddenAction } from './actions/ForbiddenAction';
+import { ResolvedView as BlockCardResolvedView } from './views/ResolvedView';
+import { NotFoundView as BlockCardNotFoundView } from './views/NotFoundView';
+import { ResolvingView as BlockCardResolvingView } from './views/ResolvingView';
+import { UnauthorizedView as BlockCardUnauthorisedView } from './views/UnauthorizedView';
+import { ForbiddenView as BlockCardForbiddenView } from './views/ForbiddenView';
+import { ErroredView as BlockCardErroredView } from './views/ErroredView';
+export { ForbiddenAction, AuthorizeAction, BlockCardResolvedView, BlockCardResolvingView, BlockCardUnauthorisedView, BlockCardForbiddenView, BlockCardErroredView, BlockCardNotFoundView };
 export var BlockCard = function BlockCard(_ref) {
   var _details$meta, _forbiddenViewProps$c;
 

package/dist/esm/view/BlockCard/utils/constants.js

@@ -0,0 +1,4 @@
+var CDN_BASE_URL = 'https://smart-links-cdn.us-east-1.prod.public.atl-paas.net';
+export var LockImage = "".concat(CDN_BASE_URL, "/lock.svg");
+export var CelebrationImage = "".concat(CDN_BASE_URL, "/celebration.svg");
+export var NotFoundImage = "".concat(CDN_BASE_URL, "/not_found.svg");

package/dist/esm/view/BlockCard/utils/handlers.js

@@ -0,0 +1,7 @@
+export var handleClickCommon = function handleClickCommon(event, onClick) {
+  if (onClick) {
+    event.preventDefault();
+    event.stopPropagation();
+    onClick(event);
+  }
+};

package/dist/esm/view/BlockCard/utils/index.js

@@ -0,0 +1,14 @@
+import { gridSize, borderRadius } from '@atlaskit/theme/constants';
+import facepaint from 'facepaint';
+
+var gs = function gs(times) {
+  return "".concat(gridSize() * times, "px");
+};
+
+var br = function br() {
+  var times = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+  return "".concat(borderRadius() * times, "px");
+};
+
+var mq = facepaint(['@media(min-width: 576px)']);
+export { gs, br, mq };

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

@@ -0,0 +1,73 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { FormattedMessage } from 'react-intl-next';
+import { useMemo } from 'react';
+import { R300 } from '@atlaskit/theme/colors';
+import WarningIcon from '@atlaskit/icon/glyph/warning';
+import { Frame } from '../components/Frame';
+import { Byline } from '../components/Byline';
+import { ActionList } from '../components/ActionList';
+import { Content } from '../components/Content';
+import { messages } from '@atlaskit/media-ui/messages';
+import { ContentFooter } from '../components/ContentFooter';
+import { ContentHeader } from '../components/ContentHeader';
+import { handleClickCommon } from '../utils/handlers';
+import { Link } from '../components/Link';
+import { UnresolvedText } from '../components/UnresolvedText';
+import { RetryAction } from '../actions/RetryAction';
+
+var textDescriptionProps = _objectSpread({}, messages.could_not_load_link);
+
+export var blockCardErroredViewClassName = 'block-card-errored-view';
+export var ErroredView = function ErroredView(_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-errored-view' : _ref$testId,
+      _ref$link = _ref.link,
+      link = _ref$link === void 0 ? '' : _ref$link,
+      _ref$onClick = _ref.onClick,
+      onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
+      onRetry = _ref.onRetry,
+      _ref$inheritDimension = _ref.inheritDimensions,
+      inheritDimensions = _ref$inheritDimension === void 0 ? false : _ref$inheritDimension;
+
+  var handleClick = function handleClick(event) {
+    return handleClickCommon(event, onClick);
+  };
+
+  var actions = useMemo(function () {
+    return onRetry ? [RetryAction(onRetry)] : [];
+  }, [onRetry]);
+  return jsx(Frame, {
+    isSelected: isSelected,
+    testId: testId,
+    className: blockCardErroredViewClassName,
+    isFluidHeight: true,
+    inheritDimensions: inheritDimensions
+  }, jsx(Content, {
+    isCompact: true
+  }, jsx("div", null, jsx(ContentHeader, {
+    onClick: handleClick,
+    link: link
+  }, jsx(Link, {
+    url: link,
+    testId: testId
+  })), jsx(Byline, null, jsx(UnresolvedText, {
+    icon: jsx(WarningIcon, {
+      label: "errored-warning-icon",
+      size: "small",
+      primaryColor: R300,
+      testId: "".concat(testId, "-warning-icon")
+    }),
+    text: jsx(FormattedMessage, textDescriptionProps)
+  }))), jsx(ContentFooter, null, jsx(ActionList, {
+    items: actions
+  }))));
+};

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

@@ -0,0 +1,82 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { FormattedMessage } from 'react-intl-next';
+import { R300 } from '@atlaskit/theme/colors';
+import LockIcon from '@atlaskit/icon/glyph/lock-filled';
+import { Frame } from '../components/Frame';
+import { Provider } from '../components/Provider';
+import { Byline } from '../components/Byline';
+import { ActionList } from '../components/ActionList';
+import { Content } from '../components/Content';
+import { messages } from '@atlaskit/media-ui/messages';
+import { ContentFooter } from '../components/ContentFooter';
+import { ContentHeader } from '../components/ContentHeader';
+import { handleClickCommon } from '../utils/handlers';
+import { Link } from '../components/Link';
+import { UnresolvedText } from '../components/UnresolvedText';
+export var blockCardForbiddenViewClassName = 'block-card-forbidden-view';
+export var blockCardForbiddenViewLinkClassName = 'block-card-forbidden-view-link';
+export var ForbiddenView = function ForbiddenView(_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-forbidden-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,
+      _ref$requestAccessCon = _ref.requestAccessContext,
+      requestAccessContext = _ref$requestAccessCon === void 0 ? {} : _ref$requestAccessCon;
+
+  var handleClick = function handleClick(event) {
+    return handleClickCommon(event, onClick);
+  };
+
+  var action = requestAccessContext.action,
+      _requestAccessContext = requestAccessContext.descriptiveMessageKey,
+      descriptiveMessageKey = _requestAccessContext === void 0 ? 'invalid_permissions_description' : _requestAccessContext;
+  var items = action ? [].concat(_toConsumableArray(actions), [action]) : actions;
+  return jsx(Frame, {
+    isSelected: isSelected,
+    testId: testId,
+    className: blockCardForbiddenViewClassName,
+    isFluidHeight: true
+  }, jsx(Content, {
+    isCompact: true
+  }, jsx("div", null, jsx(ContentHeader, {
+    onClick: handleClick,
+    link: link
+  }, jsx(Link, {
+    url: link,
+    testId: testId,
+    className: blockCardForbiddenViewLinkClassName
+  })), jsx(Byline, null, jsx(UnresolvedText, {
+    icon: jsx(LockIcon, {
+      label: "forbidden-lock-icon",
+      size: "small",
+      primaryColor: R300,
+      testId: "".concat(testId, "-lock-icon")
+    }),
+    text: jsx(FormattedMessage, _extends({}, messages[descriptiveMessageKey], {
+      values: {
+        context: context.text
+      }
+    }))
+  }))), jsx(ContentFooter, null, jsx(Provider, {
+    name: context.text,
+    icon: context.icon
+  }), showActions && jsx(ActionList, {
+    items: items
+  }))));
+};

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

@@ -0,0 +1,70 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { R300 } from '@atlaskit/theme/colors';
+import WarningIcon from '@atlaskit/icon/glyph/warning';
+import { Frame } from '../components/Frame';
+import { Provider } from '../components/Provider';
+import { Byline } from '../components/Byline';
+import { Content } from '../components/Content';
+import { messages } from '@atlaskit/media-ui/messages';
+import { ContentFooter } from '../components/ContentFooter';
+import { ContentHeader } from '../components/ContentHeader';
+import { Link } from '../components/Link';
+import { UnresolvedText } from '../components/UnresolvedText';
+import { handleClickCommon } from '../utils/handlers';
+
+var textDescriptionProps = _objectSpread({}, messages.not_found_description);
+
+export var blockCardNotFoundViewClassName = 'block-card-not-found-view';
+export var NotFoundView = function NotFoundView(_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$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'block-card-not-found-view' : _ref$testId,
+      _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 handleClickCommon(event, onClick);
+  };
+
+  return jsx(Frame, {
+    isSelected: isSelected,
+    testId: testId,
+    className: blockCardNotFoundViewClassName,
+    isFluidHeight: true
+  }, jsx(Content, {
+    isCompact: true
+  }, jsx("div", null, jsx(ContentHeader, {
+    onClick: handleClick,
+    link: link
+  }, jsx(Link, {
+    url: link,
+    testId: testId
+  })), jsx(Byline, null, jsx(UnresolvedText, {
+    icon: jsx(WarningIcon, {
+      label: "not-found-warning-icon",
+      size: "small",
+      primaryColor: R300,
+      testId: "".concat(testId, "-warning-icon")
+    }),
+    text: jsx(FormattedMessage, textDescriptionProps)
+  }))), jsx(ContentFooter, null, jsx(Provider, {
+    name: context.text,
+    icon: context.icon
+  }))));
+};