@atlaskit/smart-card 26.37.2 → 26.38.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/smart-card
 
+## 26.38.1
+
+### Patch Changes
+
+- [#42082](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42082) [`abc9cf5b768`](https://bitbucket.org/atlassian/atlassian-frontend/commits/abc9cf5b768) - [ux] Fix block card unresolved view inconsitent styling.
+- [#42120](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42120) [`d35229c10fb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d35229c10fb) - Update style for avatar-group in block card as it gets overwritten by renderer.
+
+## 26.38.0
+
+### Minor Changes
+
+- [#42098](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42098) [`0c93d2f2e70`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0c93d2f2e70) - [ux] Add text prop to override content in SnippetBlock
+
 ## 26.37.2
 
 ### Patch Changes

package/dist/cjs/utils/analytics/analytics.js

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

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

@@ -19,6 +19,7 @@ var _messages = require("../../../../messages");
  */
 var AuthorizeAction = exports.AuthorizeAction = function AuthorizeAction(onAuthorize, providerName) {
   return {
+    appearance: 'primary',
     name: _constants.ActionName.CustomAction,
     content: providerName ? /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages.connect_unauthorised_account_action, {
       values: {

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

@@ -60,7 +60,6 @@ Object.defineProperty(exports, "PreviewAction", {
   }
 });
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _helpers = require("../../state/helpers");
 var _block = require("../../extractors/block");
 var _jsonld = require("../../utils/jsonld");
@@ -83,11 +82,9 @@ var _FlexibleErroredView = _interopRequireDefault(require("./views/flexible/Flex
 var _react = require("@emotion/react");
 var _handlers = require("./utils/handlers");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _styled = require("./views/flexible/styled");
-var _constants = require("../../constants");
 var _PreviewAction = _interopRequireDefault(require("./actions/PreviewAction"));
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
+/** @jsx jsx */
+
 var BlockCard = exports.BlockCard = function BlockCard(_ref) {
   var _details$meta, _forbiddenViewProps$c;
   var id = _ref.id,
@@ -120,13 +117,7 @@ var BlockCard = exports.BlockCard = function BlockCard(_ref) {
     extensionKey: extensionKey
   };
   if (enableFlexibleBlockCard) {
-    var anchorTarget = (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-block-card-clicks-opening-in-same-tab') ? '_self' : undefined;
-    var titleBlockProps = _objectSpread({
-      overrideCss: _styled.titleBlockCss
-    }, (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
-      size: _constants.SmartLinkSize.Large
-    });
-    var flexibleBlockCardProps = _objectSpread({
+    var flexibleBlockCardProps = {
       id: id,
       cardState: cardState,
       url: url,
@@ -138,12 +129,8 @@ var BlockCard = exports.BlockCard = function BlockCard(_ref) {
       onResolve: onResolve,
       renderers: renderers,
       showServerActions: showServerActions,
-      analytics: analytics,
-      extensionKey: extensionKey,
-      titleBlockProps: titleBlockProps
-    }, anchorTarget ? {
-      anchorTarget: anchorTarget
-    } : {});
+      analytics: analytics
+    };
     switch (status) {
       case 'pending':
       case 'resolving':

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

@@ -7,17 +7,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _FlexibleCard = _interopRequireDefault(require("../../../FlexibleCard"));
-var _titleBlock = _interopRequireDefault(require("../../../FlexibleCard/components/blocks/title-block"));
 var _messages = require("../../../../messages");
 var _colors = require("@atlaskit/theme/colors");
 var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/warning"));
-var _footer = _interopRequireDefault(require("../../components/flexible/footer"));
 var _RetryAction = require("../../actions/flexible/RetryAction");
-var _blocks = require("../../../FlexibleCard/components/blocks");
 var _text = _interopRequireDefault(require("../../../FlexibleCard/components/elements/text"));
+var _unresolvedView = _interopRequireDefault(require("./unresolved-view"));
 var _withFlexibleUIBlockCardStyle = require("./utils/withFlexibleUIBlockCardStyle");
+var _excluded = ["testId"];
 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; }
 /**
@@ -27,34 +26,16 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * @see FlexibleCardProps
  */
 var FlexibleErroredView = function FlexibleErroredView(_ref) {
-  var anchorTarget = _ref.anchorTarget,
-    cardState = _ref.cardState,
-    onAuthorize = _ref.onAuthorize,
-    onError = _ref.onError,
-    url = _ref.url,
-    onClick = _ref.onClick,
-    _ref$testId = _ref.testId,
+  var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-block-errored-view' : _ref$testId,
-    titleBlockProps = _ref.titleBlockProps;
-  var status = cardState.status;
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var actions = (0, _react.useMemo)(function () {
-    return onAuthorize ? [(0, _RetryAction.RetryAction)(onAuthorize)] : [];
-  }, [onAuthorize]);
-  return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, {
-    appearance: "block",
-    cardState: cardState,
-    onAuthorize: onAuthorize,
-    onClick: onClick,
-    onError: onError,
-    testId: testId,
-    ui: {
-      hideElevation: true
-    },
-    url: url
-  }, /*#__PURE__*/_react.default.createElement(_titleBlock.default, (0, _extends2.default)({
-    hideRetry: true,
-    anchorTarget: anchorTarget
-  }, titleBlockProps)), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, /*#__PURE__*/_react.default.createElement(_warning.default, {
+    return props.onAuthorize ? [(0, _RetryAction.RetryAction)(props.onAuthorize)] : [];
+  }, [props.onAuthorize]);
+  return /*#__PURE__*/_react.default.createElement(_unresolvedView.default, (0, _extends2.default)({}, props, {
+    actions: actions,
+    testId: testId
+  }), /*#__PURE__*/_react.default.createElement(_warning.default, {
     label: "errored-warning-icon",
     size: "small",
     primaryColor: "var(--ds-icon-warning, ".concat(_colors.R300, ")"),
@@ -63,9 +44,6 @@ var FlexibleErroredView = function FlexibleErroredView(_ref) {
     message: {
       descriptor: _messages.messages.could_not_load_link
     }
-  })), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, /*#__PURE__*/_react.default.createElement(_footer.default, {
-    actions: actions,
-    status: status
-  })));
+  }));
 };
 var _default = exports.default = (0, _withFlexibleUIBlockCardStyle.withFlexibleUIBlockCardStyle)(FlexibleErroredView);

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

@@ -8,23 +8,22 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _FlexibleCard = _interopRequireDefault(require("../../../FlexibleCard"));
-var _blocks = require("../../../FlexibleCard/components/blocks");
+var _intlUtils = require("../../../../utils/intl-utils");
 var _colors = require("@atlaskit/theme/colors");
 var _messages = require("../../../../messages");
 var _lock = _interopRequireDefault(require("@atlaskit/icon/glyph/lock"));
-var _footer = _interopRequireDefault(require("../../components/flexible/footer"));
 var _ForbiddenAction = require("../../actions/flexible/ForbiddenAction");
 var _text = _interopRequireDefault(require("../../../FlexibleCard/components/elements/text"));
-var _constants = require("../../../../constants");
 var _jsonld = require("../../../../utils/jsonld");
 var _linkExtractors = require("@atlaskit/link-extractors");
+var _unresolvedView = _interopRequireDefault(require("./unresolved-view"));
 var _withFlexibleUIBlockCardStyle = require("./utils/withFlexibleUIBlockCardStyle");
 var _extractAccessContext = require("../../../../extractors/common/context/extractAccessContext");
 var _reactIntlNext = require("react-intl-next");
-var _styled = require("./styled");
 var _extractHostname = _interopRequireDefault(require("../../../../extractors/common/hostname/extractHostname"));
+var _excluded = ["testId"];
 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; }
 /**
@@ -36,16 +35,13 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  */
 var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
   var _details$meta;
-  var anchorTarget = _ref.anchorTarget,
-    cardState = _ref.cardState,
-    onAuthorize = _ref.onAuthorize,
-    onClick = _ref.onClick,
-    onError = _ref.onError,
-    _ref$testId = _ref.testId,
+  var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-block-forbidden-view' : _ref$testId,
-    url = _ref.url,
-    titleBlockProps = _ref.titleBlockProps;
-  var status = cardState.status;
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var intl = (0, _reactIntlNext.useIntl)();
+  var cardState = props.cardState,
+    onAuthorize = props.onAuthorize,
+    url = props.url;
   var details = cardState === null || cardState === void 0 ? void 0 : cardState.details;
   var cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : (0, _jsonld.getForbiddenJsonLd)().meta;
   var provider = (0, _linkExtractors.extractProvider)(details === null || details === void 0 ? void 0 : details.data);
@@ -64,44 +60,28 @@ var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
       product: providerName
     });
   }, [cardMetadata, providerName, url]);
-  var descriptiveMessageKey = requestAccessContext && requestAccessContext.descriptiveMessageKey ? requestAccessContext.descriptiveMessageKey : 'invalid_permissions_description';
-  var _ref2 = requestAccessContext !== null && requestAccessContext !== void 0 ? requestAccessContext : {},
-    titleMessageKey = _ref2.titleMessageKey,
-    buttonDisabled = _ref2.buttonDisabled;
+  var title = (0, _react.useMemo)(function () {
+    var descriptor = (0, _intlUtils.toMessage)(_messages.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]);
   var actions = (0, _react.useMemo)(function () {
     var actionFromAccessContext = [];
     var tryAnotherAccountAction = onAuthorize ? [(0, _ForbiddenAction.ForbiddenAction)(onAuthorize, 'try_another_account')] : [];
     if (requestAccessContext) {
       var action = requestAccessContext.action,
         callToActionMessageKey = requestAccessContext.callToActionMessageKey;
-      actionFromAccessContext = action && callToActionMessageKey ? [(0, _ForbiddenAction.ForbiddenAction)(action.promise, callToActionMessageKey, messageContext, buttonDisabled)] : [];
+      actionFromAccessContext = action && callToActionMessageKey ? [(0, _ForbiddenAction.ForbiddenAction)(action.promise, callToActionMessageKey, messageContext, requestAccessContext === null || requestAccessContext === void 0 ? void 0 : requestAccessContext.buttonDisabled)] : [];
     }
     return [].concat(tryAnotherAccountAction, (0, _toConsumableArray2.default)(actionFromAccessContext));
-  }, [onAuthorize, requestAccessContext, messageContext, buttonDisabled]);
-  return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, {
-    appearance: "block",
-    cardState: cardState,
-    onAuthorize: onAuthorize,
-    onClick: onClick,
-    onError: onError,
+  }, [onAuthorize, requestAccessContext, messageContext]);
+  return /*#__PURE__*/_react.default.createElement(_unresolvedView.default, (0, _extends2.default)({}, props, {
+    actions: actions,
+    showPreview: true,
     testId: testId,
-    ui: {
-      hideElevation: true,
-      size: _constants.SmartLinkSize.Medium
-    },
-    url: url
-  }, titleMessageKey ? /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, {
-    overrideCss: _styled.forbiddenViewTitleStyle,
-    testId: "".concat(testId, "-title")
-  }, /*#__PURE__*/_react.default.createElement("a", {
-    target: anchorTarget,
-    href: url
-  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages[titleMessageKey], {
-    values: messageContext
-  })))) : /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, (0, _extends2.default)({
-    hideRetry: true,
-    anchorTarget: anchorTarget
-  }, titleBlockProps)), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, /*#__PURE__*/_react.default.createElement(_lock.default, {
+    title: title
+  }), /*#__PURE__*/_react.default.createElement(_lock.default, {
     label: "forbidden-lock-icon",
     size: "small",
     primaryColor: "var(--ds-icon-danger, ".concat(_colors.R300, ")"),
@@ -109,15 +89,9 @@ var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
   }), /*#__PURE__*/_react.default.createElement(_text.default, {
     maxLines: 2,
     message: {
-      descriptor: _messages.messages[descriptiveMessageKey],
+      descriptor: (0, _intlUtils.toMessage)(_messages.messages.invalid_permissions_description, requestAccessContext === null || requestAccessContext === void 0 ? void 0 : requestAccessContext.descriptiveMessageKey),
       values: messageContext
     }
-  })), /*#__PURE__*/_react.default.createElement(_blocks.PreviewBlock, {
-    placement: _constants.MediaPlacement.Right,
-    ignoreContainerPadding: true
-  }), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, /*#__PURE__*/_react.default.createElement(_footer.default, {
-    actions: actions,
-    status: status
-  })));
+  }));
 };
 var _default = exports.default = (0, _withFlexibleUIBlockCardStyle.withFlexibleUIBlockCardStyle)(FlexibleForbiddenView);

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

@@ -8,20 +8,19 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _FlexibleCard = _interopRequireDefault(require("../../../FlexibleCard"));
-var _titleBlock = _interopRequireDefault(require("../../../FlexibleCard/components/blocks/title-block"));
-var _blocks = require("../../../FlexibleCard/components/blocks");
 var _colors = require("@atlaskit/theme/colors");
 var _messages = require("../../../../messages");
 var _lockFilled = _interopRequireDefault(require("@atlaskit/icon/glyph/lock-filled"));
-var _footer = _interopRequireDefault(require("../../components/flexible/footer"));
 var _ForbiddenAction = require("../../actions/flexible/ForbiddenAction");
 var _text = _interopRequireDefault(require("../../../FlexibleCard/components/elements/text"));
 var _jsonld = require("../../../../utils/jsonld");
 var _linkExtractors = require("@atlaskit/link-extractors");
 var _context = require("../../../../extractors/common/context");
+var _unresolvedView = _interopRequireDefault(require("./unresolved-view"));
 var _withFlexibleUIBlockCardStyle = require("./utils/withFlexibleUIBlockCardStyle");
+var _excluded = ["testId"];
 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; }
 /**
@@ -31,16 +30,12 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  */
 var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
   var _details$meta;
-  var anchorTarget = _ref.anchorTarget,
-    cardState = _ref.cardState,
-    onAuthorize = _ref.onAuthorize,
-    onClick = _ref.onClick,
-    onError = _ref.onError,
-    _ref$testId = _ref.testId,
+  var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-block-forbidden-view' : _ref$testId,
-    url = _ref.url,
-    titleBlockProps = _ref.titleBlockProps;
-  var status = cardState.status;
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var cardState = props.cardState,
+    onAuthorize = props.onAuthorize,
+    url = props.url;
   var details = cardState === null || cardState === void 0 ? void 0 : cardState.details;
   var cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : (0, _jsonld.getForbiddenJsonLd)().meta;
   var provider = (0, _linkExtractors.extractProvider)(details === null || details === void 0 ? void 0 : details.data);
@@ -63,21 +58,10 @@ var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
     }
     return [].concat(tryAnotherAccountAction, (0, _toConsumableArray2.default)(actionFromAccessContext));
   }, [onAuthorize, requestAccessContext, providerName]);
-  return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, {
-    appearance: "block",
-    cardState: cardState,
-    onAuthorize: onAuthorize,
-    onClick: onClick,
-    onError: onError,
-    testId: testId,
-    ui: {
-      hideElevation: true
-    },
-    url: url
-  }, /*#__PURE__*/_react.default.createElement(_titleBlock.default, (0, _extends2.default)({
-    hideRetry: true,
-    anchorTarget: anchorTarget
-  }, titleBlockProps)), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, /*#__PURE__*/_react.default.createElement(_lockFilled.default, {
+  return /*#__PURE__*/_react.default.createElement(_unresolvedView.default, (0, _extends2.default)({}, props, {
+    actions: actions,
+    testId: testId
+  }), /*#__PURE__*/_react.default.createElement(_lockFilled.default, {
     label: "forbidden-lock-icon",
     size: "small",
     primaryColor: "var(--ds-icon-danger, ".concat(_colors.R300, ")"),
@@ -89,10 +73,7 @@ var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
         context: providerName
       }
     }
-  })), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, /*#__PURE__*/_react.default.createElement(_footer.default, {
-    actions: actions,
-    status: status
-  })));
+  }));
 };
 
 /**

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

@@ -6,16 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
-var _FlexibleCard = _interopRequireDefault(require("../../../FlexibleCard"));
-var _titleBlock = _interopRequireDefault(require("../../../FlexibleCard/components/blocks/title-block"));
 var _messages = require("../../../../messages");
 var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/warning"));
 var _colors = require("@atlaskit/theme/colors");
-var _footer = _interopRequireDefault(require("../../components/flexible/footer"));
 var _text = _interopRequireDefault(require("../../../FlexibleCard/components/elements/text"));
-var _blocks = require("../../../FlexibleCard/components/blocks");
+var _unresolvedView = _interopRequireDefault(require("./unresolved-view"));
 var _withFlexibleUIBlockCardStyle = require("./utils/withFlexibleUIBlockCardStyle");
+var _excluded = ["testId"];
 /**
  * This view represents a Block Card with a 'Not_Found' status.
  *
@@ -23,31 +22,12 @@ var _withFlexibleUIBlockCardStyle = require("./utils/withFlexibleUIBlockCardStyl
  * @see FlexibleCardProps
  */
 var FlexibleNotFoundView = function FlexibleNotFoundView(_ref) {
-  var anchorTarget = _ref.anchorTarget,
-    cardState = _ref.cardState,
-    onAuthorize = _ref.onAuthorize,
-    onError = _ref.onError,
-    url = _ref.url,
-    onClick = _ref.onClick,
-    _ref$testId = _ref.testId,
+  var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-block-not-found-view' : _ref$testId,
-    titleBlockProps = _ref.titleBlockProps;
-  var status = cardState.status;
-  return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, {
-    appearance: "block",
-    cardState: cardState,
-    onAuthorize: onAuthorize,
-    onClick: onClick,
-    onError: onError,
-    testId: testId,
-    ui: {
-      hideElevation: true
-    },
-    url: url
-  }, /*#__PURE__*/_react.default.createElement(_titleBlock.default, (0, _extends2.default)({
-    hideRetry: true,
-    anchorTarget: anchorTarget
-  }, titleBlockProps)), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, /*#__PURE__*/_react.default.createElement(_warning.default, {
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_unresolvedView.default, (0, _extends2.default)({}, props, {
+    testId: testId
+  }), /*#__PURE__*/_react.default.createElement(_warning.default, {
     label: "not-found-warning-icon",
     size: "small",
     primaryColor: "var(--ds-icon-warning, ".concat(_colors.R300, ")"),
@@ -57,8 +37,6 @@ var FlexibleNotFoundView = function FlexibleNotFoundView(_ref) {
       descriptor: _messages.messages.not_found_description
     },
     testId: "".concat(testId, "-message")
-  })), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, /*#__PURE__*/_react.default.createElement(_footer.default, {
-    status: status
-  })));
+  }));
 };
 var _default = exports.default = (0, _withFlexibleUIBlockCardStyle.withFlexibleUIBlockCardStyle)(FlexibleNotFoundView);

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

@@ -29,12 +29,10 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
     onError = _ref.onError,
     onResolve = _ref.onResolve,
     showServerActions = _ref.showServerActions,
-    anchorTarget = _ref.anchorTarget,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-block-resolved-view' : _ref$testId,
     url = _ref.url,
-    analytics = _ref.analytics,
-    titleBlockProps = _ref.titleBlockProps;
+    analytics = _ref.analytics;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isPreviewBlockErrored = _useState2[0],
@@ -70,20 +68,15 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
     onResolve: onResolve,
     showServerActions: showServerActions,
     testId: testId,
-    ui: {
-      hideElevation: true
-    },
+    ui: _utils.FlexibleCardUiOptions,
     url: url
-  }, /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, (0, _extends2.default)({
-    position: _constants.SmartLinkPosition.Center,
+  }, /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, (0, _extends2.default)({}, (0, _utils.getTitleBlockOptions)(), {
     metadata: titleMetadata,
-    hideRetry: true,
     subtitle: [{
       name: _constants.ElementName.Location
     }],
-    metadataPosition: _constants.SmartLinkPosition.Top,
-    anchorTarget: anchorTarget
-  }, titleBlockProps)), /*#__PURE__*/_react.default.createElement(_blocks.MetadataBlock, (0, _extends2.default)({
+    metadataPosition: _constants.SmartLinkPosition.Top
+  })), /*#__PURE__*/_react.default.createElement(_blocks.MetadataBlock, (0, _extends2.default)({
     primary: topMetadata,
     maxLines: 1
   }, (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
@@ -92,15 +85,11 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
     primary: bottomMetadata,
     maxLines: 1,
     overrideCss: _styled.metadataBlockCss
-  }), !isPreviewBlockErrored ? /*#__PURE__*/_react.default.createElement(_blocks.PreviewBlock, {
-    placement: _constants.MediaPlacement.Right,
-    ignoreContainerPadding: true,
+  }), !isPreviewBlockErrored ? /*#__PURE__*/_react.default.createElement(_blocks.PreviewBlock, (0, _extends2.default)({}, _utils.PreviewBlockOptions, {
     onError: function onError() {
       setIsPreviewBlockErrored(true);
     }
-  }) : null, /*#__PURE__*/_react.default.createElement(_blocks.FooterBlock, (0, _extends2.default)({}, (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
-    overrideCss: _styled.footerBlockCss
-  }, {
+  })) : null, /*#__PURE__*/_react.default.createElement(_blocks.FooterBlock, (0, _extends2.default)({}, (0, _utils.getFooterBlockOptions)(), {
     actions: footerActions
   })));
 };

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

@@ -1,30 +1,27 @@
 "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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("@emotion/react");
+var _react2 = require("react");
 var _reactIntlNext = require("react-intl-next");
-var _FlexibleCard = _interopRequireDefault(require("../../../FlexibleCard"));
+var _helpers = require("../../../../state/helpers");
 var _AuthorizeAction = require("../../actions/flexible/AuthorizeAction");
-var _footer = _interopRequireDefault(require("../../components/flexible/footer"));
-var _blocks = require("../../../FlexibleCard/components/blocks");
-var _constants = require("../../../../constants");
 var _linkExtractors = require("@atlaskit/link-extractors");
 var _UnauthorisedViewContent = _interopRequireDefault(require("../../../common/UnauthorisedViewContent"));
-var _react2 = require("@emotion/react");
-var _token = require("../../../../utils/token");
 var _messages = require("../../../../messages");
+var _unresolvedView = _interopRequireDefault(require("./unresolved-view"));
 var _withFlexibleUIBlockCardStyle = require("./utils/withFlexibleUIBlockCardStyle");
+var _excluded = ["testId"];
 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 contentStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  margin-top: 0.5rem;\n  font-size: 0.75rem;\n"])), _token.tokens.text);
+/** @jsx jsx */
+var contentStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  margin-top: 0.5rem;\n  font-size: 0.75rem;\n"])), "var(--ds-text-subtlest, #626F86)");
 
 /**
  * This view represents a Block card that has an 'Unauthorized' status .
@@ -34,64 +31,44 @@ var contentStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _
  * @see FlexibleCardProps
  */
 var FlexibleUnauthorisedView = function FlexibleUnauthorisedView(_ref) {
-  var _cardState$details, _extractProvider;
-  var anchorTarget = _ref.anchorTarget,
-    analytics = _ref.analytics,
-    cardState = _ref.cardState,
-    _ref$extensionKey = _ref.extensionKey,
-    extensionKey = _ref$extensionKey === void 0 ? '' : _ref$extensionKey,
-    onAuthorize = _ref.onAuthorize,
-    onClick = _ref.onClick,
-    onError = _ref.onError,
-    _ref$testId = _ref.testId,
+  var _getExtensionKey, _cardState$details, _extractProvider;
+  var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-block-unauthorized-view' : _ref$testId,
-    url = _ref.url,
-    titleBlockProps = _ref.titleBlockProps;
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var analytics = props.analytics,
+    cardState = props.cardState,
+    onAuthorize = props.onAuthorize;
+  var extensionKey = (_getExtensionKey = (0, _helpers.getExtensionKey)(cardState === null || cardState === void 0 ? void 0 : cardState.details)) !== null && _getExtensionKey !== void 0 ? _getExtensionKey : '';
   var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   var providerName = (_extractProvider = (0, _linkExtractors.extractProvider)(data)) === null || _extractProvider === void 0 ? void 0 : _extractProvider.text;
-  var handleAuthorize = (0, _react.useCallback)(function () {
+  var handleAuthorize = (0, _react2.useCallback)(function () {
     if (onAuthorize) {
-      analytics.track.appAccountAuthStarted({
+      analytics === null || analytics === void 0 || analytics.track.appAccountAuthStarted({
         extensionKey: extensionKey
       });
       onAuthorize();
     }
-  }, [onAuthorize, extensionKey, analytics.track]);
-  var content = (0, _react.useMemo)(function () {
-    return onAuthorize ? /*#__PURE__*/_react.default.createElement(_UnauthorisedViewContent.default, {
+  }, [onAuthorize, extensionKey, analytics === null || analytics === void 0 ? void 0 : analytics.track]);
+  var content = (0, _react2.useMemo)(function () {
+    return onAuthorize ? (0, _react.jsx)(_UnauthorisedViewContent.default, {
       providerName: providerName,
       analytics: analytics,
       testId: testId
-    }) : /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages[providerName ? 'unauthorised_account_description' : 'unauthorised_account_description_no_provider'], {
+    }) : (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages[providerName ? 'unauthorised_account_description' : 'unauthorised_account_description_no_provider'], {
       values: {
         context: providerName
       }
     }));
   }, [analytics, onAuthorize, providerName, testId]);
-  var actions = (0, _react.useMemo)(function () {
+  var actions = (0, _react2.useMemo)(function () {
     return onAuthorize ? [(0, _AuthorizeAction.AuthorizeAction)(handleAuthorize, providerName)] : [];
   }, [handleAuthorize, onAuthorize, providerName]);
-  return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, {
-    appearance: "block",
-    cardState: cardState,
-    onAuthorize: onAuthorize,
-    onClick: onClick,
-    onError: onError,
-    testId: testId,
-    ui: {
-      hideElevation: true
-    },
-    url: url
-  }, /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, (0, _extends2.default)({
-    hideRetry: true,
-    anchorTarget: anchorTarget
-  }, titleBlockProps)), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, {
-    overrideCss: contentStyles,
-    testId: "".concat(testId, "-content")
-  }, /*#__PURE__*/_react.default.createElement("div", null, content)), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, /*#__PURE__*/_react.default.createElement(_footer.default, {
+  return (0, _react.jsx)(_unresolvedView.default, (0, _extends2.default)({}, props, {
     actions: actions,
-    status: _constants.SmartLinkStatus.Unauthorized,
-    actionGroupAppearance: "primary"
-  })));
+    testId: testId
+  }), (0, _react.jsx)("div", {
+    css: contentStyles,
+    "data-testid": "".concat(testId, "-content")
+  }, content));
 };
 var _default = exports.default = (0, _withFlexibleUIBlockCardStyle.withFlexibleUIBlockCardStyle)(FlexibleUnauthorisedView);