@atlaskit/smart-card 23.4.8 → 23.5.1

package/dist/cjs/view/FlexibleCard/components/container/index.js

@@ -25,7 +25,9 @@ var _flexibleUiContext = require("../../../../state/flexible-ui-context");
 
 var _layeredLink = _interopRequireDefault(require("./layered-link"));
 
-var _templateObject, _templateObject2, _templateObject3;
+var _utils = require("../../../../state/flexible-ui-context/utils");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 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); }
 
@@ -69,8 +71,41 @@ var getPadding = function getPadding(size) {
 
 var clickableContainerStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  // Position any interactive elements at the top of the z-index stack.\n  a,\n  button,\n  .has-action {\n    position: relative;\n    z-index: 1;\n  }\n"])));
 
-var getContainerStyles = function getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer) {
-  return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: ", " 0;\n  flex-direction: column;\n  min-width: 0;\n  overflow-x: hidden;\n  position: relative;\n  ", "\n  ", "\n  ", "\n  ", "\n  &:hover ~ .actions-button-group {\n    opacity: 1;\n  }\n  a:focus,\n  .has-action:focus {\n    outline-offset: -2px;\n  }\n"])), getGap(size), hideBackground ? '' : "background-color: ".concat(_token.tokens.background, ";"), hidePadding ? '' : "padding: ".concat(getPadding(size), ";"), hideElevation ? '' : elevationStyles, clickableContainer ? clickableContainerStyles : '');
+var getContainerPaddingStyles = function getContainerPaddingStyles(size, hidePadding, childrenOptions) {
+  var padding = hidePadding ? '0rem' : getPadding(size);
+  var gap = getGap(size);
+  var previewOnLeft = childrenOptions.previewOnLeft,
+      previewOnRight = childrenOptions.previewOnRight;
+  return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    // Set variables for PreviewBlock to use.\n    --container-padding: ", ";\n    --container-gap-left: ", ";\n    --container-gap-right: ", ";\n    --preview-block-width: 30%;\n\n    padding: ", ";\n    ", "\n    ", "\n  "])), padding, previewOnLeft ? gap : padding, previewOnRight ? gap : padding, padding, previewOnLeft ? "padding-left: calc(var(--preview-block-width) + ".concat(gap, ");") : '', previewOnRight ? "padding-right: calc(var(--preview-block-width) + ".concat(gap, ");") : '');
+};
+
+var getChildrenOptions = function getChildrenOptions(children, context) {
+  var options = {};
+
+  if ((0, _utils.isFlexUiPreviewPresent)(context)) {
+    _react.default.Children.map(children, function (child) {
+      if ( /*#__PURE__*/_react.default.isValidElement(child)) {
+        if ((0, _flexible.isFlexibleUiPreviewBlock)(child)) {
+          var placement = child.props.placement;
+
+          if (placement === _constants.MediaPlacement.Left) {
+            options.previewOnLeft = true;
+          }
+
+          if (placement === _constants.MediaPlacement.Right) {
+            options.previewOnRight = true;
+          }
+        }
+      }
+    });
+  }
+
+  return options;
+};
+
+var getContainerStyles = function getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer, childrenOptions) {
+  var paddingCss = getContainerPaddingStyles(size, hidePadding, childrenOptions);
+  return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    gap: ", " 0;\n    flex-direction: column;\n    min-width: 0;\n    overflow-x: hidden;\n    position: relative;\n    ", "\n    ", "\n    ", "\n    ", "\n    &:hover ~ .actions-button-group {\n      opacity: 1;\n    }\n    a:focus,\n    .has-action:focus {\n      outline-offset: -2px;\n    }\n  "])), getGap(size), hideBackground ? '' : "background-color: ".concat(_token.tokens.background, ";"), paddingCss, hideElevation ? '' : elevationStyles, clickableContainer ? clickableContainerStyles : '');
 };
 
 exports.getContainerStyles = getContainerStyles;
@@ -157,8 +192,9 @@ var Container = function Container(_ref3) {
       _ref3$theme = _ref3.theme,
       theme = _ref3$theme === void 0 ? _constants.SmartLinkTheme.Link : _ref3$theme;
   var context = (0, _react.useContext)(_flexibleUiContext.FlexibleUiContext);
+  var childrenOptions = getChildrenOptions(children, context);
   return (0, _react2.jsx)("div", {
-    css: getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer),
+    css: getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer, childrenOptions),
     "data-smart-link-container": true,
     "data-testid": testId
   }, clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, renderChildren(children, size, theme, status, retry, onClick));

package/dist/cjs/view/FlexibleCard/components/elements/lozenge/index.js

@@ -15,9 +15,12 @@ var _react2 = require("@emotion/react");
 
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 
-var _templateObject;
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
+
+var _templateObject, _templateObject2;
 
 var styles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  line-height: inherit;\n"])));
+var actionStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  > span > span {\n    display: inline-flex;\n    align-items: center;\n    margin-right: -2px;\n  }\n\n  svg {\n    width: unset;\n    height: unset;\n    margin: -4px 0;\n  }\n"])));
 /**
  * A base element that displays a Lozenge.
  * @internal
@@ -29,6 +32,7 @@ var Lozenge = function Lozenge(_ref) {
   var _ref$appearance = _ref.appearance,
       appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
       name = _ref.name,
+      onClick = _ref.onClick,
       overrideCss = _ref.overrideCss,
       text = _ref.text,
       _ref$testId = _ref.testId,
@@ -39,15 +43,19 @@ var Lozenge = function Lozenge(_ref) {
   }
 
   return (0, _react2.jsx)("span", {
-    css: [styles, overrideCss],
+    css: [styles, onClick ? actionStyles : undefined, overrideCss],
     "data-fit-to-content": true,
     "data-smart-element": name,
     "data-smart-element-lozenge": true,
-    "data-testid": testId
+    "data-testid": testId,
+    onClick: onClick
   }, (0, _react2.jsx)(_lozenge.default, {
     appearance: appearance,
     testId: "".concat(testId, "-lozenge")
-  }, text));
+  }, text, onClick && (0, _react2.jsx)(_chevronDown.default, {
+    label: "action",
+    testId: "".concat(testId, "-action")
+  })));
 };
 
 var _default = Lozenge;

package/dist/cjs/view/FlexibleCard/components/elements/media/index.js

@@ -42,6 +42,7 @@ var Media = function Media(_ref) {
       testId = _ref$testId === void 0 ? 'smart-element-media' : _ref$testId,
       type = _ref.type,
       url = _ref.url,
+      onLoad = _ref.onLoad,
       onError = _ref.onError;
 
   if (!type || !url) {
@@ -57,6 +58,7 @@ var Media = function Media(_ref) {
     testId: "".concat(testId, "-image"),
     url: url,
     onError: onError,
+    onLoad: onLoad,
     defaultIcon: null
   }));
 };

package/dist/cjs/view/HoverCard/components/HoverCardContent.js

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.toFooterActions = exports.getOpenAction = exports.default = void 0;
 
+var _linkProvider = require("@atlaskit/link-provider");
+
 var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"));
 
 var _extractors = require("@atlaskit/linking-common/extractors");
@@ -17,7 +19,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _constants = require("../../../constants");
 
-var _extractMetadata2 = require("../../../extractors/hover/extractMetadata");
+var _extractMetadata = require("../../../extractors/hover/extractMetadata");
 
 var _actions = require("../../../state/actions");
 
@@ -97,6 +99,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
       onResolve = _ref.onResolve,
       renderers = _ref.renderers,
       url = _ref.url;
+  var showActionableElement = (0, _linkProvider.useFeatureFlag)('enableActionableElement');
   var actions = (0, _actions.useSmartCardActions)(id, url, analytics);
   (0, _react.useEffect)(function () {
     actions.loadMetadata();
@@ -129,12 +132,21 @@ var HoverCardContent = function HoverCardContent(_ref) {
     return toFooterActions(cardActions, onActionClick);
   }, [cardActions, onActionClick]);
   var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
-  var types = data ? (0, _extractors.extractType)(data) : undefined; //TODO: EDM-3224 deleted simulated and use real JsonLd
 
-  var _extractMetadata = (0, _extractMetadata2.extractMetadata)((0, _utils2.getSimulatedMetadata)(extensionKey, types)),
-      primary = _extractMetadata.primary,
-      secondary = _extractMetadata.secondary,
-      subtitle = _extractMetadata.subtitle;
+  var _useMemo = (0, _react.useMemo)(function () {
+    var types = data ? (0, _extractors.extractType)(data) : undefined; //TODO: EDM-3224 deleted simulated and use real JsonLd
+
+    var metadata = (0, _extractMetadata.extractMetadata)((0, _utils2.getSimulatedMetadata)(extensionKey, types));
+    var primary = showActionableElement ? (0, _utils2.toActionableMetadata)(onActionClick, extensionKey, types, cardActions, metadata.primary) : metadata.primary;
+    return {
+      primary: primary,
+      secondary: metadata.secondary,
+      subtitle: metadata.subtitle
+    };
+  }, [cardActions, data, extensionKey, onActionClick, showActionableElement]),
+      primary = _useMemo.primary,
+      secondary = _useMemo.secondary,
+      subtitle = _useMemo.subtitle;
 
   var titleMaxLines = subtitle && subtitle.length > 0 ? 1 : 2;
 

package/dist/cjs/view/HoverCard/utils.js

@@ -1,12 +1,20 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getSimulatedMetadata = exports.SMART_CARD_ANALYTICS_DISPLAY = void 0;
+exports.toActionableMetadata = exports.getSimulatedMetadata = exports.SMART_CARD_ANALYTICS_DISPLAY = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _constants = require("../../constants");
 
+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 SMART_CARD_ANALYTICS_DISPLAY = 'flexible';
 exports.SMART_CARD_ANALYTICS_DISPLAY = SMART_CARD_ANALYTICS_DISPLAY;
 
@@ -92,4 +100,35 @@ var getSimulatedMetadata = function getSimulatedMetadata() {
   }
 };
 
-exports.getSimulatedMetadata = getSimulatedMetadata;
+exports.getSimulatedMetadata = getSimulatedMetadata;
+
+var toActionableMetadata = function toActionableMetadata(onActionClick, extensionKey) {
+  var types = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  var cardActions = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
+  var elementItems = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
+
+  // Actionable State for Jira issue
+  if (extensionKey === 'jira-object-provider' && types !== null && types !== void 0 && types.includes('atlassian:Task')) {
+    var previewAction = cardActions.find(function (action) {
+      return action.id === 'preview-content';
+    });
+
+    if (previewAction) {
+      return elementItems.map(function (elementItem) {
+        return elementItem.name === _constants.ElementName.State ? _objectSpread(_objectSpread({}, elementItem), {}, {
+          onClick: function onClick() {
+            if (onActionClick) {
+              onActionClick(previewAction.id);
+            }
+
+            return previewAction.invoke();
+          }
+        }) : elementItem;
+      });
+    }
+  }
+
+  return elementItems;
+};
+
+exports.toActionableMetadata = toActionableMetadata;

package/dist/es2019/constants.js

@@ -221,4 +221,11 @@ export let MediaType;
 
 (function (MediaType) {
   MediaType["Image"] = "image";
-})(MediaType || (MediaType = {}));
+})(MediaType || (MediaType = {}));
+
+export let MediaPlacement;
+
+(function (MediaPlacement) {
+  MediaPlacement["Left"] = "left";
+  MediaPlacement["Right"] = "right";
+})(MediaPlacement || (MediaPlacement = {}));

package/dist/es2019/index.js

@@ -12,5 +12,5 @@ export { useSmartLinkEvents } from './view/SmartLinkEvents/useSmartLinkEvents';
 export { contentFooterClassName, metadataListClassName, blockCardResolvingViewClassName, blockCardResolvedViewClassName, blockCardForbiddenViewClassName, blockCardIconImageClassName, blockCardResolvedViewByClassName, blockCardForbiddenViewLinkClassName, blockCardContentClassName, blockCardContentHeaderClassName, blockCardContentHeaderNameClassName, blockCardNotFoundViewClassName, blockCardErroredViewClassName } from './classNames';
 export { loadingPlaceholderClassName } from './view/CardWithUrl/component-lazy/LazyFallback'; // Flexible UI
 
-export { ActionName, ElementName, SmartLinkDirection, SmartLinkPosition, SmartLinkSize, SmartLinkTheme } from './constants';
+export { ActionName, ElementName, MediaPlacement, SmartLinkDirection, SmartLinkPosition, SmartLinkSize, SmartLinkTheme } from './constants';
 export { MetadataBlock, PreviewBlock, SnippetBlock, TitleBlock, FooterBlock } from './view/FlexibleCard/components/blocks';

package/dist/es2019/state/flexible-ui-context/utils.js

@@ -0,0 +1,5 @@
+/**
+ * Returns true if preview data is available in the FlexibleUiDataContext
+ * @param context is the FlexibleUiDataContext
+ */
+export const isFlexUiPreviewPresent = context => Boolean(context && context.preview);

package/dist/es2019/utils/flexible.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import * as Blocks from '../view/FlexibleCard/components/blocks';
-import { TitleBlock } from '../view/FlexibleCard/components/blocks';
+import { PreviewBlock, TitleBlock } from '../view/FlexibleCard/components/blocks';
 import * as Elements from '../view/FlexibleCard/components/elements';
 export const isFlexibleUiCard = children => {
   if (children && React.Children.toArray(children).some(child => isFlexibleUiTitleBlock(child))) {
@@ -11,4 +11,5 @@ export const isFlexibleUiCard = children => {
 };
 export const isFlexibleUiBlock = node => /*#__PURE__*/React.isValidElement(node) && Object.values(Blocks).some(type => type === node.type);
 export const isFlexibleUiElement = node => /*#__PURE__*/React.isValidElement(node) && Object.values(Elements).some(type => type === node.type);
-export const isFlexibleUiTitleBlock = node => /*#__PURE__*/React.isValidElement(node) && node.type === TitleBlock;
+export const isFlexibleUiTitleBlock = node => /*#__PURE__*/React.isValidElement(node) && node.type === TitleBlock;
+export const isFlexibleUiPreviewBlock = node => /*#__PURE__*/React.isValidElement(node) && node.type === PreviewBlock;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "23.4.8",
+	"version": "23.5.1",
 	"sideEffects": false
 }

package/dist/es2019/view/BlockCard/components/flexible/footer/index.js

@@ -30,7 +30,7 @@ const providerStyles = css`
  * @param props are the data required for the block, such as actions to be displayed.
  */
 
-const Footer = props => {
+const BlockCardFooter = props => {
   const {
     actions,
     size = SmartLinkSize.Medium,
@@ -51,4 +51,4 @@ const Footer = props => {
   })) : null);
 };
 
-export default Footer;
+export default BlockCardFooter;

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+
+/** @jsx jsx */
 import { getExtensionKey } from '../../state/helpers';
 import { extractBlockProps } from '../../extractors/block';
 import { getEmptyJsonLd, getForbiddenJsonLd } from '../../utils/jsonld';
@@ -13,14 +14,23 @@ 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';
+import FlexibleResolvedView from './views/flexible/FlexibleResolvedView';
+import FlexibleUnauthorisedView from './views/flexible/FlexibleUnauthorisedView';
+import FlexibleNotFoundView from './views/flexible/FlexibleNotFoundView';
+import FlexibleErroredView from './views/flexible/FlexibleErroredView';
+import FlexibleForbiddenView from './views/flexible/FlexibleForbiddenView';
+import { tokens } from '../../utils/token';
+import { css, jsx } from '@emotion/react';
 export { default as PreviewAction } from './actions/PreviewAction';
 export { ForbiddenAction, AuthorizeAction, BlockCardResolvedView, BlockCardResolvingView, BlockCardUnauthorisedView, BlockCardForbiddenView, BlockCardErroredView, BlockCardNotFoundView };
+const flexibleBlockCardElevationStyle = css`
+  border-radius: 1.5px;
+  box-shadow: ${tokens.elevation};
+  margin: 2px;
+`;
 export const BlockCard = ({
   url,
-  cardState: {
-    status,
-    details
-  },
+  cardState,
   authFlow,
   handleAuthorize,
   handleErrorRetry,
@@ -33,10 +43,15 @@ export const BlockCard = ({
   testId,
   showActions,
   platform,
-  analytics
+  analytics,
+  enableFlexibleBlockCard
 }) => {
   var _details$meta, _forbiddenViewProps$c;
 
+  const {
+    status,
+    details
+  } = cardState;
   const data = details && details.data || getEmptyJsonLd();
   const meta = details && details.meta;
   const extractorOpts = {
@@ -46,10 +61,62 @@ export const BlockCard = ({
     extensionKey: getExtensionKey(details)
   };
 
+  if (enableFlexibleBlockCard) {
+    const ui = {
+      hideElevation: true
+    };
+    const flexibleProps = {
+      cardState,
+      url,
+      testId,
+      onError,
+      renderers,
+      ui
+    };
+
+    switch (status) {
+      case 'pending':
+      case 'resolving':
+      case 'resolved':
+        return jsx("div", {
+          css: flexibleBlockCardElevationStyle
+        }, jsx(FlexibleResolvedView, flexibleProps));
+
+      case 'unauthorized':
+        return jsx("div", {
+          css: flexibleBlockCardElevationStyle
+        }, jsx(FlexibleUnauthorisedView, _extends({}, flexibleProps, {
+          onAuthorize: handleAuthorize
+        })));
+
+      case 'forbidden':
+        return jsx("div", {
+          css: flexibleBlockCardElevationStyle
+        }, jsx(FlexibleForbiddenView, _extends({}, flexibleProps, {
+          onAuthorize: handleAuthorize
+        })));
+
+      case 'not_found':
+        return jsx("div", {
+          css: flexibleBlockCardElevationStyle
+        }, jsx(FlexibleNotFoundView, _extends({}, flexibleProps, {
+          onAuthorize: handleAuthorize
+        })));
+
+      case 'fallback':
+      case 'errored':
+        return jsx("div", {
+          css: flexibleBlockCardElevationStyle
+        }, jsx(FlexibleErroredView, _extends({}, flexibleProps, {
+          onAuthorize: handleAuthorize
+        })));
+    }
+  }
+
   switch (status) {
     case 'pending':
     case 'resolving':
-      return /*#__PURE__*/React.createElement(BlockCardResolvingView, {
+      return jsx(BlockCardResolvingView, {
         testId: testId,
         isSelected: isSelected
       });
@@ -64,7 +131,7 @@ export const BlockCard = ({
         });
       }
 
-      return /*#__PURE__*/React.createElement(BlockCardResolvedView, _extends({}, resolvedViewProps, {
+      return jsx(BlockCardResolvedView, _extends({}, resolvedViewProps, {
         isSelected: isSelected,
         testId: testId,
         showActions: showActions,
@@ -80,7 +147,7 @@ export const BlockCard = ({
       }
 
       const unauthorizedViewProps = extractBlockProps(data, meta, extractorOpts);
-      return /*#__PURE__*/React.createElement(BlockCardUnauthorisedView, _extends({}, unauthorizedViewProps, {
+      return jsx(BlockCardUnauthorisedView, _extends({}, unauthorizedViewProps, {
         isSelected: isSelected,
         testId: testId,
         showActions: showActions,
@@ -103,7 +170,7 @@ export const BlockCard = ({
         url,
         context: (_forbiddenViewProps$c = forbiddenViewProps.context) === null || _forbiddenViewProps$c === void 0 ? void 0 : _forbiddenViewProps$c.text
       });
-      return /*#__PURE__*/React.createElement(BlockCardForbiddenView, _extends({}, forbiddenViewProps, {
+      return jsx(BlockCardForbiddenView, _extends({}, forbiddenViewProps, {
         isSelected: isSelected,
         showActions: showActions,
         actions: handleAuthorize ? [ForbiddenAction(handleAuthorize)] : [],
@@ -120,7 +187,7 @@ export const BlockCard = ({
       }
 
       const notFoundViewProps = extractBlockProps(data, meta, extractorOpts);
-      return /*#__PURE__*/React.createElement(BlockCardNotFoundView, _extends({}, notFoundViewProps, {
+      return jsx(BlockCardNotFoundView, _extends({}, notFoundViewProps, {
         isSelected: isSelected,
         testId: testId,
         onClick: handleFrameClick
@@ -137,7 +204,7 @@ export const BlockCard = ({
       }
 
       if (authFlow && authFlow === 'disabled') {
-        return /*#__PURE__*/React.createElement(CardLinkView, {
+        return jsx(CardLinkView, {
           link: url,
           isSelected: isSelected,
           onClick: handleFrameClick,
@@ -145,7 +212,7 @@ export const BlockCard = ({
         });
       }
 
-      return /*#__PURE__*/React.createElement(BlockCardErroredView, {
+      return jsx(BlockCardErroredView, {
         link: url,
         isSelected: isSelected,
         onRetry: handleErrorRetry,

package/dist/es2019/view/BlockCard/views/flexible/FlexibleErroredView.js

@@ -5,7 +5,7 @@ import { messages } from '../../../../messages';
 import { token } from '@atlaskit/tokens';
 import { R300 } from '@atlaskit/theme/colors';
 import WarningIcon from '@atlaskit/icon/glyph/warning';
-import Footer from '../../components/flexible/footer';
+import BlockCardFooter from '../../components/flexible/footer';
 import { RetryAction } from '../../actions/flexible/RetryAction';
 import { CustomBlock } from '../../../FlexibleCard/components/blocks';
 import Text from '../../../FlexibleCard/components/elements/text';
@@ -46,7 +46,7 @@ const FlexibleErroredView = ({
     message: {
       descriptor: messages.could_not_load_link
     }
-  })), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(Footer, {
+  })), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
     actions: actions,
     status: status
   })));

package/dist/es2019/view/BlockCard/views/flexible/FlexibleForbiddenView.js

@@ -6,7 +6,7 @@ import { token } from '@atlaskit/tokens';
 import { R300 } from '@atlaskit/theme/colors';
 import { messages } from '../../../../messages';
 import LockIcon from '@atlaskit/icon/glyph/lock-filled';
-import Footer from '../../components/flexible/footer';
+import BlockCardFooter from '../../components/flexible/footer';
 import { ForbiddenAction } from '../../actions/flexible/ForbiddenAction';
 import Text from '../../../FlexibleCard/components/elements/text';
 
@@ -48,7 +48,7 @@ const FlexibleForbiddenView = ({
     message: {
       descriptor: messages.invalid_permissions_description
     }
-  })), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(Footer, {
+  })), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
     actions: actions,
     status: status
   })));

package/dist/es2019/view/BlockCard/views/flexible/FlexibleNotFoundView.js

@@ -5,7 +5,7 @@ import { messages } from '../../../../messages';
 import WarningIcon from '@atlaskit/icon/glyph/warning';
 import { token } from '@atlaskit/tokens';
 import { R300 } from '@atlaskit/theme/colors';
-import Footer from '../../components/flexible/footer';
+import BlockCardFooter from '../../components/flexible/footer';
 import Text from '../../../FlexibleCard/components/elements/text';
 import { CustomBlock } from '../../../FlexibleCard/components/blocks';
 
@@ -46,7 +46,7 @@ const FlexibleNotFoundView = ({
       descriptor: messages.not_found_description
     },
     testId: testId
-  })), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(Footer, {
+  })), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
     status: status
   })));
 };

package/dist/es2019/view/BlockCard/views/flexible/FlexibleResolvedView.js

@@ -0,0 +1,81 @@
+import React, { useEffect, useState } from 'react';
+import FlexibleCard from '../../../FlexibleCard';
+import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
+import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock } from '../../../FlexibleCard/components/blocks';
+import { ActionName, ElementName, MediaPlacement, SmartLinkPosition } from '../../../../constants';
+
+/**
+ * This view represents a Block card that has an 'Resolved' status.
+ * @see SmartLinkStatus
+ * @see FlexibleCardProps
+ */
+const FlexibleResolvedView = ({
+  cardState,
+  onClick,
+  onError,
+  testId = 'smart-block-resolved-view',
+  ui,
+  url
+}) => {
+  const [isPreviewBlockErrored, setIsPreviewBlockErrored] = useState(false);
+  useEffect(() => {
+    setIsPreviewBlockErrored(false);
+  }, [url, cardState]);
+  return /*#__PURE__*/React.createElement(FlexibleCard, {
+    appearance: "block",
+    cardState: cardState,
+    onClick: onClick,
+    onError: onError,
+    testId: testId,
+    ui: ui,
+    url: url
+  }, /*#__PURE__*/React.createElement(TitleBlock, {
+    position: SmartLinkPosition.Center,
+    metadata: [{
+      name: ElementName.AuthorGroup
+    }, {
+      name: ElementName.Priority
+    }, {
+      name: ElementName.State
+    }],
+    hideRetry: true
+  }), /*#__PURE__*/React.createElement(MetadataBlock, {
+    primary: [{
+      name: ElementName.ModifiedBy
+    }, {
+      name: ElementName.ModifiedOn
+    }],
+    secondary: [{
+      name: ElementName.AttachmentCount
+    }, {
+      name: ElementName.CommentCount
+    }, {
+      name: ElementName.ReactCount
+    }, {
+      name: ElementName.SubscriberCount
+    }, {
+      name: ElementName.ViewCount
+    }, {
+      name: ElementName.VoteCount
+    }, {
+      name: ElementName.DueOn
+    }],
+    maxLines: 1
+  }), /*#__PURE__*/React.createElement(MetadataBlock, null), /*#__PURE__*/React.createElement(SnippetBlock, null), !isPreviewBlockErrored ? /*#__PURE__*/React.createElement(PreviewBlock, {
+    placement: MediaPlacement.Right,
+    ignoreContainerPadding: true,
+    onError: () => {
+      setIsPreviewBlockErrored(true);
+    }
+  }) : null, /*#__PURE__*/React.createElement(FooterBlock, {
+    actions: [{
+      name: ActionName.PreviewAction
+    }, {
+      name: ActionName.ViewAction
+    }, {
+      name: ActionName.DownloadAction
+    }]
+  }));
+};
+
+export default FlexibleResolvedView;

package/dist/es2019/view/BlockCard/views/flexible/FlexibleUnauthorisedView.js

@@ -4,7 +4,7 @@ import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
 import { messages } from '../../../../messages';
 import Text from '../../../FlexibleCard/components/elements/text';
 import { AuthorizeAction } from '../../actions/flexible/AuthorizeAction';
-import Footer from '../../components/flexible/footer';
+import BlockCardFooter from '../../components/flexible/footer';
 import { CustomBlock } from '../../../FlexibleCard/components/blocks';
 
 /**
@@ -12,7 +12,7 @@ import { CustomBlock } from '../../../FlexibleCard/components/blocks';
  * It should have a "Connect" button that will allow a user to connect their account and view the block card.
  *
  * @see SmartLinkStatus
- * @see UnauthorisedViewProps
+ * @see FlexibleCardProps
  */
 const FlexibleUnauthorisedView = ({
   cardState,
@@ -44,7 +44,7 @@ const FlexibleUnauthorisedView = ({
         context: providerName
       }
     }
-  })), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(Footer, {
+  })), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
     actions: actions,
     status: status
   })));