@atlaskit/smart-card 26.37.2 → 26.38.1

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

@@ -1,7 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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) { _defineProperty(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 */
 
 import { getExtensionKey } from '../../state/helpers';
@@ -26,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 var BlockCard = function BlockCard(_ref) {
@@ -62,13 +57,7 @@ export var BlockCard = function BlockCard(_ref) {
     extensionKey: extensionKey
   };
   if (enableFlexibleBlockCard) {
-    var anchorTarget = getBooleanFF('platform.linking-platform.smart-card.enable-block-card-clicks-opening-in-same-tab') ? '_self' : undefined;
-    var titleBlockProps = _objectSpread({
-      overrideCss: titleBlockCss
-    }, getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
-      size: SmartLinkSize.Large
-    });
-    var flexibleBlockCardProps = _objectSpread({
+    var flexibleBlockCardProps = {
       id: id,
       cardState: cardState,
       url: url,
@@ -80,12 +69,8 @@ export var 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/esm/view/BlockCard/views/flexible/FlexibleErroredView.js

@@ -1,14 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["testId"];
 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,34 +17,16 @@ import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardSty
  * @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 = _objectWithoutProperties(_ref, _excluded);
   var actions = useMemo(function () {
-    return 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, {
+    return 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, ".concat(R300, ")"),
@@ -54,9 +35,6 @@ var FlexibleErroredView = function FlexibleErroredView(_ref) {
     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/esm/view/BlockCard/views/flexible/FlexibleForbiddenView.js

@@ -1,21 +1,20 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["testId"];
 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';
 
 /**
@@ -27,16 +26,13 @@ import extractHostname from '../../../../extractors/common/hostname/extractHostn
  */
 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 = _objectWithoutProperties(_ref, _excluded);
+  var intl = 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 : getForbiddenJsonLd().meta;
   var provider = extractProvider(details === null || details === void 0 ? void 0 : details.data);
@@ -55,44 +51,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 = useMemo(function () {
+    var 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]);
   var actions = useMemo(function () {
     var actionFromAccessContext = [];
     var tryAnotherAccountAction = onAuthorize ? [ForbiddenAction(onAuthorize, 'try_another_account')] : [];
     if (requestAccessContext) {
       var action = requestAccessContext.action,
         callToActionMessageKey = requestAccessContext.callToActionMessageKey;
-      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 [].concat(tryAnotherAccountAction, _toConsumableArray(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: "".concat(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, ".concat(R300, ")"),
@@ -100,15 +80,9 @@ var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
   }), /*#__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);

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

@@ -1,18 +1,17 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["testId"];
 import React, { useMemo } from 'react';
-import FlexibleCard from '../../../FlexibleCard';
-import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
-import { CustomBlock } from '../../../FlexibleCard/components/blocks';
 import { R300 } from '@atlaskit/theme/colors';
 import { messages } from '../../../../messages';
 import LockIcon from '@atlaskit/icon/glyph/lock-filled';
-import BlockCardFooter from '../../components/flexible/footer';
 import { ForbiddenAction } from '../../actions/flexible/ForbiddenAction';
 import Text from '../../../FlexibleCard/components/elements/text';
 import { getForbiddenJsonLd } from '../../../../utils/jsonld';
 import { extractProvider } from '@atlaskit/link-extractors';
 import { extractRequestAccessContext } from '../../../../extractors/common/context';
+import UnresolvedView from './unresolved-view';
 import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
 
 /**
@@ -22,16 +21,12 @@ import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardSty
  */
 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 = _objectWithoutProperties(_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 : getForbiddenJsonLd().meta;
   var provider = extractProvider(details === null || details === void 0 ? void 0 : details.data);
@@ -54,21 +49,10 @@ var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
     }
     return [].concat(tryAnotherAccountAction, _toConsumableArray(actionFromAccessContext));
   }, [onAuthorize, requestAccessContext, providerName]);
-  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(LockIcon, {
+  return /*#__PURE__*/React.createElement(UnresolvedView, _extends({}, props, {
+    actions: actions,
+    testId: testId
+  }), /*#__PURE__*/React.createElement(LockIcon, {
     label: "forbidden-lock-icon",
     size: "small",
     primaryColor: "var(--ds-icon-danger, ".concat(R300, ")"),
@@ -80,10 +64,7 @@ var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
         context: providerName
       }
     }
-  })), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
-    actions: actions,
-    status: status
-  })));
+  }));
 };
 
 /**

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

@@ -1,13 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["testId"];
 import React from 'react';
-import FlexibleCard from '../../../FlexibleCard';
-import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
 import { messages } from '../../../../messages';
 import WarningIcon from '@atlaskit/icon/glyph/warning';
 import { R300 } from '@atlaskit/theme/colors';
-import BlockCardFooter from '../../components/flexible/footer';
 import Text from '../../../FlexibleCard/components/elements/text';
-import { CustomBlock } from '../../../FlexibleCard/components/blocks';
+import UnresolvedView from './unresolved-view';
 import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
 
 /**
@@ -17,31 +16,12 @@ import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardSty
  * @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.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, {
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(UnresolvedView, _extends({}, props, {
+    testId: testId
+  }), /*#__PURE__*/React.createElement(WarningIcon, {
     label: "not-found-warning-icon",
     size: "small",
     primaryColor: "var(--ds-icon-warning, ".concat(R300, ")"),
@@ -51,8 +31,6 @@ var FlexibleNotFoundView = function FlexibleNotFoundView(_ref) {
       descriptor: messages.not_found_description
     },
     testId: "".concat(testId, "-message")
-  })), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
-    status: status
-  })));
+  }));
 };
 export default withFlexibleUIBlockCardStyle(FlexibleNotFoundView);

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

@@ -3,9 +3,9 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useEffect, useMemo, useState } from 'react';
 import FlexibleCard from '../../../FlexibleCard';
 import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock, TitleBlock } from '../../../FlexibleCard/components/blocks';
-import { metadataBlockCss, footerBlockCss } from './styled';
-import { ActionName, ElementName, MediaPlacement, SmartLinkPosition } from '../../../../constants';
-import { getSimulatedMetadata, getSimulatedBetterMetadata } from './utils';
+import { metadataBlockCss } from './styled';
+import { ActionName, ElementName, SmartLinkPosition } from '../../../../constants';
+import { getSimulatedMetadata, getSimulatedBetterMetadata, getTitleBlockOptions, getFooterBlockOptions, PreviewBlockOptions, FlexibleCardUiOptions } from './utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
 /**
@@ -19,12 +19,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 = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isPreviewBlockErrored = _useState2[0],
@@ -60,20 +58,15 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
     onResolve: onResolve,
     showServerActions: showServerActions,
     testId: testId,
-    ui: {
-      hideElevation: true
-    },
+    ui: FlexibleCardUiOptions,
     url: url
-  }, /*#__PURE__*/React.createElement(TitleBlock, _extends({
-    position: SmartLinkPosition.Center,
+  }, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, getTitleBlockOptions(), {
     metadata: titleMetadata,
-    hideRetry: true,
     subtitle: [{
       name: ElementName.Location
     }],
-    metadataPosition: SmartLinkPosition.Top,
-    anchorTarget: anchorTarget
-  }, titleBlockProps)), /*#__PURE__*/React.createElement(MetadataBlock, _extends({
+    metadataPosition: SmartLinkPosition.Top
+  })), /*#__PURE__*/React.createElement(MetadataBlock, _extends({
     primary: topMetadata,
     maxLines: 1
   }, getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
@@ -82,15 +75,11 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
     primary: bottomMetadata,
     maxLines: 1,
     overrideCss: metadataBlockCss
-  }), !isPreviewBlockErrored ? /*#__PURE__*/React.createElement(PreviewBlock, {
-    placement: MediaPlacement.Right,
-    ignoreContainerPadding: true,
+  }), !isPreviewBlockErrored ? /*#__PURE__*/React.createElement(PreviewBlock, _extends({}, PreviewBlockOptions, {
     onError: function onError() {
       setIsPreviewBlockErrored(true);
     }
-  }) : null, /*#__PURE__*/React.createElement(FooterBlock, _extends({}, getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
-    overrideCss: footerBlockCss
-  }, {
+  })) : null, /*#__PURE__*/React.createElement(FooterBlock, _extends({}, getFooterBlockOptions(), {
     actions: footerActions
   })));
 };

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

@@ -1,20 +1,20 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["testId"];
 var _templateObject;
-import React, { useCallback, useMemo } from 'react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import { useCallback, useMemo } from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import FlexibleCard from '../../../FlexibleCard';
+import { getExtensionKey } from '../../../../state/helpers';
 import { AuthorizeAction } from '../../actions/flexible/AuthorizeAction';
-import BlockCardFooter from '../../components/flexible/footer';
-import { CustomBlock, TitleBlock } from '../../../FlexibleCard/components/blocks';
-import { SmartLinkStatus } from '../../../../constants';
 import { extractProvider } from '@atlaskit/link-extractors';
 import UnauthorisedViewContent from '../../../common/UnauthorisedViewContent';
-import { css } from '@emotion/react';
-import { tokens } from '../../../../utils/token';
 import { messages } from '../../../../messages';
+import UnresolvedView from './unresolved-view';
 import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
-var contentStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  margin-top: 0.5rem;\n  font-size: 0.75rem;\n"])), tokens.text);
+var contentStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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 .
@@ -24,35 +24,30 @@ var contentStyles = css(_templateObject || (_templateObject = _taggedTemplateLit
  * @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 = _objectWithoutProperties(_ref, _excluded);
+  var analytics = props.analytics,
+    cardState = props.cardState,
+    onAuthorize = props.onAuthorize;
+  var extensionKey = (_getExtensionKey = 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 = extractProvider(data)) === null || _extractProvider === void 0 ? void 0 : _extractProvider.text;
   var handleAuthorize = useCallback(function () {
     if (onAuthorize) {
-      analytics.track.appAccountAuthStarted({
+      analytics === null || analytics === void 0 || analytics.track.appAccountAuthStarted({
         extensionKey: extensionKey
       });
       onAuthorize();
     }
-  }, [onAuthorize, extensionKey, analytics.track]);
+  }, [onAuthorize, extensionKey, analytics === null || analytics === void 0 ? void 0 : analytics.track]);
   var content = useMemo(function () {
-    return onAuthorize ? /*#__PURE__*/React.createElement(UnauthorisedViewContent, {
+    return onAuthorize ? jsx(UnauthorisedViewContent, {
       providerName: providerName,
       analytics: analytics,
       testId: testId
-    }) : /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages[providerName ? 'unauthorised_account_description' : 'unauthorised_account_description_no_provider'], {
+    }) : jsx(FormattedMessage, _extends({}, messages[providerName ? 'unauthorised_account_description' : 'unauthorised_account_description_no_provider'], {
       values: {
         context: providerName
       }
@@ -61,27 +56,12 @@ var FlexibleUnauthorisedView = function FlexibleUnauthorisedView(_ref) {
   var actions = useMemo(function () {
     return onAuthorize ? [AuthorizeAction(handleAuthorize, providerName)] : [];
   }, [handleAuthorize, onAuthorize, providerName]);
-  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, {
-    overrideCss: contentStyles,
-    testId: "".concat(testId, "-content")
-  }, /*#__PURE__*/React.createElement("div", null, content)), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
+  return jsx(UnresolvedView, _extends({}, props, {
     actions: actions,
-    status: SmartLinkStatus.Unauthorized,
-    actionGroupAppearance: "primary"
-  })));
+    testId: testId
+  }), jsx("div", {
+    css: contentStyles,
+    "data-testid": "".concat(testId, "-content")
+  }, content));
 };
 export default withFlexibleUIBlockCardStyle(FlexibleUnauthorisedView);

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

@@ -1,15 +1,15 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 import { tokens } from '../../../../utils/token';
 import { css } from '@emotion/react';
 import { N40 } from '@atlaskit/theme/colors';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 // in editor prosemirror adds padding-left so we need to overwrite it
-export var metadataBlockCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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
+export var metadataBlockCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])));
 export var titleBlockCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n"])), getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? "gap: 0.5em;" : "", getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "[data-smart-element=\"Title\"] {\n          font-weight: 600;\n        }" : "");
 export var footerBlockCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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 = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: ", ";\n"])), tokens.elevation, "var(--ds-space-025, 2px)");
 var refreshedFlexibleBlockCardStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  & > div {\n    border-radius: ", ";\n    border: 1px solid ", ";\n  }\n"])), "var(--ds-border-radius-200, 8px)", "var(--ds-border, ".concat(N40, ")"));
-export var flexibleBlockCardStyle = getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? refreshedFlexibleBlockCardStyle : flexibleBlockCardElevationStyle;
-export var forbiddenViewTitleStyle = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  font-weight: 600;\n"])));
+export var flexibleBlockCardStyle = getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? refreshedFlexibleBlockCardStyle : flexibleBlockCardElevationStyle;

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

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime/helpers/extends";
+import { CustomBlock, PreviewBlock, TitleBlock } from '../../../../FlexibleCard/components/blocks';
+import React from 'react';
+import FlexibleCard from '../../../../FlexibleCard';
+import { InternalFooterBlock } from '../../../../FlexibleCard/components/blocks';
+import { FlexibleCardUiOptions, getFooterBlockOptions, PreviewBlockOptions, getTitleBlockOptions } from '../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.createElement(FlexibleCard, {
+    appearance: "block",
+    cardState: cardState,
+    onAuthorize: onAuthorize,
+    onClick: onClick,
+    onError: onError,
+    testId: testId,
+    ui: FlexibleCardUiOptions,
+    url: url
+  }, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, getTitleBlockOptions(), {
+    text: title
+  })), /*#__PURE__*/React.createElement(CustomBlock, null, children), showPreview && /*#__PURE__*/React.createElement(PreviewBlock, PreviewBlockOptions), /*#__PURE__*/React.createElement(InternalFooterBlock, _extends({}, getFooterBlockOptions(), {
+    actions: actions,
+    testId: "smart-block-card-footer"
+  })));
+};
+export default UnresolvedView;