@atlaskit/smart-card 26.37.2 → 26.38.1

package/dist/cjs/view/BlockCard/views/flexible/styled.js

@@ -4,18 +4,18 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.titleBlockCss = exports.metadataBlockCss = exports.forbiddenViewTitleStyle = exports.footerBlockCss = exports.flexibleBlockCardStyle = void 0;
+exports.titleBlockCss = exports.metadataBlockCss = exports.footerBlockCss = exports.flexibleBlockCardStyle = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _token = require("../../../../utils/token");
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 // in editor prosemirror adds padding-left so we need to overwrite it
-var metadataBlockCss = exports.metadataBlockCss = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* primary element group */\n  span[data-smart-element-avatar-group] {\n    > ul {\n      padding-left: 0px;\n    }\n  }\n  [data-smart-element-group] {\n    line-height: 1rem;\n  }\n"])));
+// renderer overwrites the margin-right so we need to add it here
+var metadataBlockCss = exports.metadataBlockCss = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* primary element group */\n  span[data-smart-element-avatar-group] {\n    > ul {\n      padding-left: 0px;\n      margin-right: 0.5rem;\n    }\n  }\n  [data-smart-element-group] {\n    line-height: 1rem;\n  }\n"])));
 var titleBlockCss = exports.titleBlockCss = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n"])), (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? "gap: 0.5em;" : "", (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "[data-smart-element=\"Title\"] {\n          font-weight: 600;\n        }" : "");
 var footerBlockCss = exports.footerBlockCss = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  height: 1.5rem;\n\n  .actions-button-group {\n    button,\n    button:hover,\n    button:focus,\n    button:active {\n      font-size: 0.875rem;\n    }\n  }\n"])));
 var flexibleBlockCardElevationStyle = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: ", ";\n"])), _token.tokens.elevation, "var(--ds-space-025, 2px)");
 var refreshedFlexibleBlockCardStyle = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  & > div {\n    border-radius: ", ";\n    border: 1px solid ", ";\n  }\n"])), "var(--ds-border-radius-200, 8px)", "var(--ds-border, ".concat(_colors.N40, ")"));
-var flexibleBlockCardStyle = exports.flexibleBlockCardStyle = (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? refreshedFlexibleBlockCardStyle : flexibleBlockCardElevationStyle;
-var forbiddenViewTitleStyle = exports.forbiddenViewTitleStyle = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n"])));
+var flexibleBlockCardStyle = exports.flexibleBlockCardStyle = (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? refreshedFlexibleBlockCardStyle : flexibleBlockCardElevationStyle;

package/dist/cjs/view/BlockCard/views/flexible/unresolved-view/index.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _blocks = require("../../../../FlexibleCard/components/blocks");
+var _react = _interopRequireDefault(require("react"));
+var _FlexibleCard = _interopRequireDefault(require("../../../../FlexibleCard"));
+var _utils = require("../utils");
+var UnresolvedView = function UnresolvedView(_ref) {
+  var actions = _ref.actions,
+    cardState = _ref.cardState,
+    children = _ref.children,
+    onAuthorize = _ref.onAuthorize,
+    onClick = _ref.onClick,
+    onError = _ref.onError,
+    _ref$showPreview = _ref.showPreview,
+    showPreview = _ref$showPreview === void 0 ? false : _ref$showPreview,
+    testId = _ref.testId,
+    title = _ref.title,
+    url = _ref.url;
+  return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, {
+    appearance: "block",
+    cardState: cardState,
+    onAuthorize: onAuthorize,
+    onClick: onClick,
+    onError: onError,
+    testId: testId,
+    ui: _utils.FlexibleCardUiOptions,
+    url: url
+  }, /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, (0, _extends2.default)({}, (0, _utils.getTitleBlockOptions)(), {
+    text: title
+  })), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, children), showPreview && /*#__PURE__*/_react.default.createElement(_blocks.PreviewBlock, _utils.PreviewBlockOptions), /*#__PURE__*/_react.default.createElement(_blocks.InternalFooterBlock, (0, _extends2.default)({}, (0, _utils.getFooterBlockOptions)(), {
+    actions: actions,
+    testId: "smart-block-card-footer"
+  })));
+};
+var _default = exports.default = UnresolvedView;

package/dist/cjs/view/BlockCard/views/flexible/utils/index.js

@@ -3,10 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getSimulatedMetadata = exports.getSimulatedBetterMetadata = void 0;
+exports.getTitleBlockOptions = exports.getSimulatedMetadata = exports.getSimulatedBetterMetadata = exports.getFooterBlockOptions = exports.PreviewBlockOptions = exports.FlexibleCardUiOptions = void 0;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../../../../constants");
 var _utils = require("../../../../../extractors/flexible/utils");
 var _helpers = require("../../../../../state/helpers");
+var _styled = require("../styled");
 var baseTopMetadata = [{
   name: _constants.ElementName.ModifiedOn
 }, {
@@ -140,4 +142,31 @@ var getSimulatedMetadata = exports.getSimulatedMetadata = function getSimulatedM
     titleMetadata: titleMetadata,
     topMetadata: topMetadata
   };
+};
+var FlexibleCardUiOptions = exports.FlexibleCardUiOptions = {
+  hideElevation: true
+};
+
+// Due to the use of getBooleanFF(), this has to be a function.
+// Make this a const object after ff cleanup.
+var getTitleBlockOptions = exports.getTitleBlockOptions = function getTitleBlockOptions() {
+  return {
+    anchorTarget: (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-block-card-clicks-opening-in-same-tab') ? '_self' : undefined,
+    position: _constants.SmartLinkPosition.Center,
+    overrideCss: _styled.titleBlockCss,
+    hideRetry: true,
+    size: (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? _constants.SmartLinkSize.Large : undefined
+  };
+};
+var PreviewBlockOptions = exports.PreviewBlockOptions = {
+  placement: _constants.MediaPlacement.Right,
+  ignoreContainerPadding: true
+};
+
+// Due to the use of getBooleanFF(), this has to be a function.
+// Make this a const object after ff cleanup.
+var getFooterBlockOptions = exports.getFooterBlockOptions = function getFooterBlockOptions() {
+  return {
+    overrideCss: (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? _styled.footerBlockCss : undefined
+  };
 };

package/dist/cjs/view/FlexibleCard/components/blocks/footer-block/index.js

@@ -1,34 +1,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _resolved = _interopRequireDefault(require("./resolved"));
 var _constants = require("../../../../../constants");
-var _block = _interopRequireDefault(require("../block"));
-var _elementGroup = _interopRequireDefault(require("../element-group"));
-var _elements = require("../../elements");
-var _actionGroup = _interopRequireDefault(require("../action-group"));
-var _utils = require("../utils");
-var _flexibleUiContext = require("../../../../../state/flexible-ui-context");
-var _templateObject;
-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 getActionGroupStyles = function getActionGroupStyles(size) {
-  if (size === _constants.SmartLinkSize.XLarge) {
-    // The biggest height of the action button exceeds the max line-height
-    // of the elements causing the action on the block with x-large size to
-    // get cut at the bottom.
-    return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n      max-height: 2rem;\n    "])));
-  }
-};
-
+var _excluded = ["status", "testId"];
 /**
  * Represents a FooterBlock, designed to contain elements and actions that should appear
  * at the bottom of a link card.
@@ -36,43 +18,16 @@ var getActionGroupStyles = function getActionGroupStyles(size) {
  * @param {FooterBlockProps} FooterBlockProps
  * @see Block
  */
-var FooterBlock = function FooterBlock(props) {
-  var status = props.status,
-    actions = props.actions,
-    _props$size = props.size,
-    size = _props$size === void 0 ? _constants.SmartLinkSize.Medium : _props$size,
-    _props$testId = props.testId,
-    testId = _props$testId === void 0 ? 'smart-footer-block' : _props$testId,
-    onActionMenuOpenChange = props.onActionMenuOpenChange;
-  var context = (0, _flexibleUiContext.useFlexibleUiContext)();
-  var hasActions = (0, _react.useMemo)(function () {
-    var _filterActionItems;
-    return ((_filterActionItems = (0, _utils.filterActionItems)(actions, context)) === null || _filterActionItems === void 0 ? void 0 : _filterActionItems.length) > 0;
-  }, [actions, context]);
-  var onDropdownOpenChange = (0, _react.useCallback)(function (isOpen) {
-    if (onActionMenuOpenChange) {
-      onActionMenuOpenChange({
-        isOpen: isOpen
-      });
-    }
-  }, [onActionMenuOpenChange]);
+var FooterBlock = function FooterBlock(_ref) {
+  var status = _ref.status,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'smart-footer-block' : _ref$testId,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   if (status !== _constants.SmartLinkStatus.Resolved) {
     return null;
   }
-  return /*#__PURE__*/_react.default.createElement(_block.default, (0, _extends2.default)({}, props, {
-    testId: "".concat(testId, "-resolved-view")
-  }), /*#__PURE__*/_react.default.createElement(_elements.Provider, {
-    testId: "".concat(testId, "-provider")
-  }), actions && hasActions ? /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
-    testId: "smart-element-group-actions",
-    align: _constants.SmartLinkAlignment.Right,
-    direction: _constants.SmartLinkDirection.Horizontal,
-    overrideCss: getActionGroupStyles(size),
-    width: _constants.SmartLinkWidth.Flexible
-  }, /*#__PURE__*/_react.default.createElement(_actionGroup.default, {
-    onDropdownOpenChange: onDropdownOpenChange,
-    items: actions,
-    appearance: "default"
-  })) : null);
+  return /*#__PURE__*/_react.default.createElement(_resolved.default, (0, _extends2.default)({}, props, {
+    testId: testId
+  }));
 };
 var _default = exports.default = FooterBlock;

package/dist/cjs/view/FlexibleCard/components/blocks/footer-block/resolved/index.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _react2 = _interopRequireWildcard(require("react"));
+var _constants = require("../../../../../../constants");
+var _flexibleUiContext = require("../../../../../../state/flexible-ui-context");
+var _elements = require("../../../elements");
+var _actionGroup = _interopRequireDefault(require("../../action-group"));
+var _block = _interopRequireDefault(require("../../block"));
+var _elementGroup = _interopRequireDefault(require("../../element-group"));
+var _utils = require("../../utils");
+var _templateObject;
+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 getActionGroupStyles = function getActionGroupStyles(size) {
+  if (size === _constants.SmartLinkSize.XLarge) {
+    // The biggest height of the action button exceeds the max line-height
+    // of the elements causing the action on the block with x-large size to
+    // get cut at the bottom.
+    return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n      max-height: 2rem;\n    "])));
+  }
+};
+var FooterBlockResolvedView = function FooterBlockResolvedView(props) {
+  var actions = props.actions,
+    testId = props.testId,
+    onActionMenuOpenChange = props.onActionMenuOpenChange,
+    _props$size = props.size,
+    size = _props$size === void 0 ? _constants.SmartLinkSize.Medium : _props$size;
+  var context = (0, _flexibleUiContext.useFlexibleUiContext)();
+  var hasActions = (0, _react2.useMemo)(function () {
+    var _filterActionItems;
+    return ((_filterActionItems = (0, _utils.filterActionItems)(actions, context)) === null || _filterActionItems === void 0 ? void 0 : _filterActionItems.length) > 0;
+  }, [actions, context]);
+  var onDropdownOpenChange = (0, _react2.useCallback)(function (isOpen) {
+    if (onActionMenuOpenChange) {
+      onActionMenuOpenChange({
+        isOpen: isOpen
+      });
+    }
+  }, [onActionMenuOpenChange]);
+  return /*#__PURE__*/_react2.default.createElement(_block.default, (0, _extends2.default)({}, props, {
+    testId: "".concat(testId, "-resolved-view")
+  }), /*#__PURE__*/_react2.default.createElement(_elements.Provider, {
+    testId: "".concat(testId, "-provider")
+  }), actions && hasActions ? /*#__PURE__*/_react2.default.createElement(_elementGroup.default, {
+    testId: "smart-element-group-actions",
+    align: _constants.SmartLinkAlignment.Right,
+    direction: _constants.SmartLinkDirection.Horizontal,
+    overrideCss: getActionGroupStyles(size),
+    width: _constants.SmartLinkWidth.Flexible
+  }, /*#__PURE__*/_react2.default.createElement(_actionGroup.default, {
+    onDropdownOpenChange: onDropdownOpenChange,
+    items: actions,
+    appearance: "default"
+  })) : null);
+};
+var _default = exports.default = FooterBlockResolvedView;

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

@@ -16,6 +16,12 @@ Object.defineProperty(exports, "FooterBlock", {
     return _footerBlock.default;
   }
 });
+Object.defineProperty(exports, "InternalFooterBlock", {
+  enumerable: true,
+  get: function get() {
+    return _resolved.default;
+  }
+});
 Object.defineProperty(exports, "MetadataBlock", {
   enumerable: true,
   get: function get() {
@@ -45,4 +51,5 @@ var _metadataBlock = _interopRequireDefault(require("./metadata-block"));
 var _previewBlock = _interopRequireDefault(require("./preview-block"));
 var _snippetBlock = _interopRequireDefault(require("./snippet-block"));
 var _titleBlock = _interopRequireDefault(require("./title-block"));
-var _block = _interopRequireDefault(require("./block"));
+var _block = _interopRequireDefault(require("./block"));
+var _resolved = _interopRequireDefault(require("./footer-block/resolved"));

package/dist/cjs/view/FlexibleCard/components/blocks/snippet-block/index.js

@@ -12,7 +12,7 @@ var _block = _interopRequireDefault(require("../block"));
 var _constants = require("../../../../../constants");
 var _elements = require("../../elements");
 var _utils = require("../../utils");
-var _excluded = ["maxLines", "status", "testId"];
+var _excluded = ["maxLines", "status", "testId", "text"];
 var DEFAULT_MAX_LINES = 3;
 var MAXIMUM_MAX_LINES = 3;
 var MINIMUM_MAX_LINES = 1;
@@ -30,6 +30,7 @@ var SnippetBlock = function SnippetBlock(_ref) {
     status = _ref$status === void 0 ? _constants.SmartLinkStatus.Fallback : _ref$status,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-block-snippet' : _ref$testId,
+    text = _ref.text,
     blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   if (status !== _constants.SmartLinkStatus.Resolved) {
     return null;
@@ -38,7 +39,8 @@ var SnippetBlock = function SnippetBlock(_ref) {
   return /*#__PURE__*/_react.default.createElement(_block.default, (0, _extends2.default)({}, blockProps, {
     testId: "".concat(testId, "-resolved-view")
   }), /*#__PURE__*/_react.default.createElement(_elements.Snippet, {
-    maxLines: snippetMaxLines
+    maxLines: snippetMaxLines,
+    text: text
   }));
 };
 var _default = exports.default = SnippetBlock;

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

@@ -30,7 +30,8 @@ var Text = function Text(_ref) {
     name = _ref.name,
     overrideCss = _ref.overrideCss,
     _ref$testId = _ref.testId,
-    testId = _ref$testId === void 0 ? 'smart-element-text' : _ref$testId;
+    testId = _ref$testId === void 0 ? 'smart-element-text' : _ref$testId,
+    text = _ref.text;
   if (!message && !content) {
     return null;
   }
@@ -40,6 +41,6 @@ var Text = function Text(_ref) {
     "data-smart-element": name,
     "data-smart-element-text": true,
     "data-testid": testId
-  }, (0, _utils.getFormattedMessage)(message) || content);
+  }, text ? text : (0, _utils.getFormattedMessage)(message) || content);
 };
 var _default = exports.default = Text;

package/dist/cjs/view/LinkUrl/index.js

@@ -18,7 +18,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId"],
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.37.2",
+  packageVersion: "26.38.1",
   componentName: 'linkUrl'
 };
 var Link = (0, _click.withLinkClickedEvent)('a');

package/dist/es2019/utils/analytics/analytics.js

@@ -4,7 +4,7 @@ export const ANALYTICS_CHANNEL = 'media';
 export const context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.37.2"
+  packageVersion: "26.38.1"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/es2019/view/BlockCard/actions/flexible/AuthorizeAction.js

@@ -12,6 +12,7 @@ import { messages } from '../../../../messages';
  * @param providerName a string which is inserted into the message of the button
  */
 export const AuthorizeAction = (onAuthorize, providerName) => ({
+  appearance: 'primary',
   name: ActionName.CustomAction,
   content: providerName ? /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_unauthorised_account_action, {
     values: {

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

@@ -23,8 +23,6 @@ import FlexibleErroredView from './views/flexible/FlexibleErroredView';
 import { jsx } from '@emotion/react';
 import { handleClickCommon } from './utils/handlers';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { titleBlockCss } from './views/flexible/styled';
-import { SmartLinkSize } from '../../constants';
 export { default as PreviewAction } from './actions/PreviewAction';
 export { ForbiddenAction, AuthorizeAction, BlockCardResolvedView, BlockCardResolvingView, BlockCardUnauthorisedView, BlockCardForbiddenView, BlockCardErroredView, BlockCardNotFoundView };
 export const BlockCard = ({
@@ -62,13 +60,6 @@ export const BlockCard = ({
     extensionKey
   };
   if (enableFlexibleBlockCard) {
-    const anchorTarget = getBooleanFF('platform.linking-platform.smart-card.enable-block-card-clicks-opening-in-same-tab') ? '_self' : undefined;
-    const titleBlockProps = {
-      overrideCss: titleBlockCss,
-      ...(getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
-        size: SmartLinkSize.Large
-      })
-    };
     const flexibleBlockCardProps = {
       id,
       cardState,
@@ -79,12 +70,7 @@ export const BlockCard = ({
       onResolve,
       renderers,
       showServerActions,
-      analytics,
-      extensionKey,
-      titleBlockProps: titleBlockProps,
-      ...(anchorTarget ? {
-        anchorTarget
-      } : {})
+      analytics
     };
     switch (status) {
       case 'pending':

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

@@ -1,14 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useMemo } from 'react';
-import FlexibleCard from '../../../FlexibleCard';
-import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
 import { messages } from '../../../../messages';
 import { R300 } from '@atlaskit/theme/colors';
 import WarningIcon from '@atlaskit/icon/glyph/warning';
-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';
+import UnresolvedView from './unresolved-view';
 import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
 
 /**
@@ -18,32 +15,14 @@ import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardSty
  * @see FlexibleCardProps
  */
 const FlexibleErroredView = ({
-  anchorTarget,
-  cardState,
-  onAuthorize,
-  onError,
-  url,
-  onClick,
   testId = 'smart-block-errored-view',
-  titleBlockProps
+  ...props
 }) => {
-  const status = cardState.status;
-  const actions = useMemo(() => onAuthorize ? [RetryAction(onAuthorize)] : [], [onAuthorize]);
-  return /*#__PURE__*/React.createElement(FlexibleCard, {
-    appearance: "block",
-    cardState: cardState,
-    onAuthorize: onAuthorize,
-    onClick: onClick,
-    onError: onError,
-    testId: testId,
-    ui: {
-      hideElevation: true
-    },
-    url: url
-  }, /*#__PURE__*/React.createElement(TitleBlock, _extends({
-    hideRetry: true,
-    anchorTarget: anchorTarget
-  }, titleBlockProps)), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(WarningIcon, {
+  const actions = useMemo(() => props.onAuthorize ? [RetryAction(props.onAuthorize)] : [], [props.onAuthorize]);
+  return /*#__PURE__*/React.createElement(UnresolvedView, _extends({}, props, {
+    actions: actions,
+    testId: testId
+  }), /*#__PURE__*/React.createElement(WarningIcon, {
     label: "errored-warning-icon",
     size: "small",
     primaryColor: `var(--ds-icon-warning, ${R300})`,
@@ -52,9 +31,6 @@ const FlexibleErroredView = ({
     message: {
       descriptor: messages.could_not_load_link
     }
-  })), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
-    actions: actions,
-    status: status
-  })));
+  }));
 };
 export default withFlexibleUIBlockCardStyle(FlexibleErroredView);

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

@@ -1,20 +1,17 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useMemo } from 'react';
-import FlexibleCard from '../../../FlexibleCard';
-import { CustomBlock, PreviewBlock, TitleBlock } from '../../../FlexibleCard/components/blocks';
+import { toMessage } from '../../../../utils/intl-utils';
 import { R300 } from '@atlaskit/theme/colors';
 import { messages } from '../../../../messages';
 import LockIcon from '@atlaskit/icon/glyph/lock';
-import BlockCardFooter from '../../components/flexible/footer';
 import { ForbiddenAction } from '../../actions/flexible/ForbiddenAction';
 import Text from '../../../FlexibleCard/components/elements/text';
-import { MediaPlacement, SmartLinkSize } from '../../../../constants';
 import { getForbiddenJsonLd } from '../../../../utils/jsonld';
 import { extractProvider } from '@atlaskit/link-extractors';
+import UnresolvedView from './unresolved-view';
 import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
 import { extractRequestAccessContextImproved } from '../../../../extractors/common/context/extractAccessContext';
-import { FormattedMessage } from 'react-intl-next';
-import { forbiddenViewTitleStyle } from './styled';
+import { useIntl } from 'react-intl-next';
 import extractHostname from '../../../../extractors/common/hostname/extractHostname';
 
 /**
@@ -25,17 +22,16 @@ import extractHostname from '../../../../extractors/common/hostname/extractHostn
  * @see FlexibleCardProps
  */
 const FlexibleForbiddenView = ({
-  anchorTarget,
-  cardState,
-  onAuthorize,
-  onClick,
-  onError,
   testId = 'smart-block-forbidden-view',
-  url,
-  titleBlockProps
+  ...props
 }) => {
   var _details$meta;
-  const status = cardState.status;
+  const intl = useIntl();
+  const {
+    cardState,
+    onAuthorize,
+    url
+  } = props;
   const details = cardState === null || cardState === void 0 ? void 0 : cardState.details;
   const cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : getForbiddenJsonLd().meta;
   const provider = extractProvider(details === null || details === void 0 ? void 0 : details.data);
@@ -54,11 +50,12 @@ const FlexibleForbiddenView = ({
       product: providerName
     });
   }, [cardMetadata, providerName, url]);
-  const descriptiveMessageKey = requestAccessContext && requestAccessContext.descriptiveMessageKey ? requestAccessContext.descriptiveMessageKey : 'invalid_permissions_description';
-  const {
-    titleMessageKey,
-    buttonDisabled
-  } = requestAccessContext !== null && requestAccessContext !== void 0 ? requestAccessContext : {};
+  const title = useMemo(() => {
+    const descriptor = toMessage(messages.invalid_permissions, requestAccessContext === null || requestAccessContext === void 0 ? void 0 : requestAccessContext.titleMessageKey);
+    return intl.formatMessage(descriptor, {
+      product: providerName
+    });
+  }, [intl, providerName, requestAccessContext === null || requestAccessContext === void 0 ? void 0 : requestAccessContext.titleMessageKey]);
   const actions = useMemo(() => {
     let actionFromAccessContext = [];
     const tryAnotherAccountAction = onAuthorize ? [ForbiddenAction(onAuthorize, 'try_another_account')] : [];
@@ -67,34 +64,16 @@ const FlexibleForbiddenView = ({
         action,
         callToActionMessageKey
       } = requestAccessContext;
-      actionFromAccessContext = action && callToActionMessageKey ? [ForbiddenAction(action.promise, callToActionMessageKey, messageContext, buttonDisabled)] : [];
+      actionFromAccessContext = action && callToActionMessageKey ? [ForbiddenAction(action.promise, callToActionMessageKey, messageContext, requestAccessContext === null || requestAccessContext === void 0 ? void 0 : requestAccessContext.buttonDisabled)] : [];
     }
     return [...tryAnotherAccountAction, ...actionFromAccessContext];
-  }, [onAuthorize, requestAccessContext, messageContext, buttonDisabled]);
-  return /*#__PURE__*/React.createElement(FlexibleCard, {
-    appearance: "block",
-    cardState: cardState,
-    onAuthorize: onAuthorize,
-    onClick: onClick,
-    onError: onError,
+  }, [onAuthorize, requestAccessContext, messageContext]);
+  return /*#__PURE__*/React.createElement(UnresolvedView, _extends({}, props, {
+    actions: actions,
+    showPreview: true,
     testId: testId,
-    ui: {
-      hideElevation: true,
-      size: SmartLinkSize.Medium
-    },
-    url: url
-  }, titleMessageKey ? /*#__PURE__*/React.createElement(CustomBlock, {
-    overrideCss: forbiddenViewTitleStyle,
-    testId: `${testId}-title`
-  }, /*#__PURE__*/React.createElement("a", {
-    target: anchorTarget,
-    href: url
-  }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages[titleMessageKey], {
-    values: messageContext
-  })))) : /*#__PURE__*/React.createElement(TitleBlock, _extends({
-    hideRetry: true,
-    anchorTarget: anchorTarget
-  }, titleBlockProps)), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(LockIcon, {
+    title: title
+  }), /*#__PURE__*/React.createElement(LockIcon, {
     label: "forbidden-lock-icon",
     size: "small",
     primaryColor: `var(--ds-icon-danger, ${R300})`,
@@ -102,15 +81,9 @@ const FlexibleForbiddenView = ({
   }), /*#__PURE__*/React.createElement(Text, {
     maxLines: 2,
     message: {
-      descriptor: messages[descriptiveMessageKey],
+      descriptor: toMessage(messages.invalid_permissions_description, requestAccessContext === null || requestAccessContext === void 0 ? void 0 : requestAccessContext.descriptiveMessageKey),
       values: messageContext
     }
-  })), /*#__PURE__*/React.createElement(PreviewBlock, {
-    placement: MediaPlacement.Right,
-    ignoreContainerPadding: true
-  }), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
-    actions: actions,
-    status: status
-  })));
+  }));
 };
 export default withFlexibleUIBlockCardStyle(FlexibleForbiddenView);