@atlaskit/smart-card 26.38.0 → 26.38.1

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

@@ -1,13 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 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,42 +14,19 @@ import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardSty
  * @see FlexibleCardProps
  */
 const FlexibleNotFoundView = ({
-  anchorTarget,
-  cardState,
-  onAuthorize,
-  onError,
-  url,
-  onClick,
   testId = 'smart-block-not-found-view',
-  titleBlockProps
-}) => {
-  const 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, {
-    label: "not-found-warning-icon",
-    size: "small",
-    primaryColor: `var(--ds-icon-warning, ${R300})`,
-    testId: `${testId}-warning-icon`
-  }), /*#__PURE__*/React.createElement(Text, {
-    message: {
-      descriptor: messages.not_found_description
-    },
-    testId: `${testId}-message`
-  })), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
-    status: status
-  })));
-};
+  ...props
+}) => /*#__PURE__*/React.createElement(UnresolvedView, _extends({}, props, {
+  testId: testId
+}), /*#__PURE__*/React.createElement(WarningIcon, {
+  label: "not-found-warning-icon",
+  size: "small",
+  primaryColor: `var(--ds-icon-warning, ${R300})`,
+  testId: `${testId}-warning-icon`
+}), /*#__PURE__*/React.createElement(Text, {
+  message: {
+    descriptor: messages.not_found_description
+  },
+  testId: `${testId}-message`
+}));
 export default withFlexibleUIBlockCardStyle(FlexibleNotFoundView);

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

@@ -2,9 +2,9 @@ import _extends from "@babel/runtime/helpers/extends";
 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';
 /**
@@ -18,11 +18,9 @@ const FlexibleResolvedView = ({
   onError,
   onResolve,
   showServerActions,
-  anchorTarget,
   testId = 'smart-block-resolved-view',
   url,
-  analytics,
-  titleBlockProps
+  analytics
 }) => {
   const [isPreviewBlockErrored, setIsPreviewBlockErrored] = useState(false);
   useEffect(() => {
@@ -55,20 +53,15 @@ const FlexibleResolvedView = ({
     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') && {
@@ -77,15 +70,11 @@ const FlexibleResolvedView = ({
     primary: bottomMetadata,
     maxLines: 1,
     overrideCss: metadataBlockCss
-  }), !isPreviewBlockErrored ? /*#__PURE__*/React.createElement(PreviewBlock, {
-    placement: MediaPlacement.Right,
-    ignoreContainerPadding: true,
+  }), !isPreviewBlockErrored ? /*#__PURE__*/React.createElement(PreviewBlock, _extends({}, PreviewBlockOptions, {
     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/es2019/view/BlockCard/views/flexible/FlexibleUnauthorisedView.js

@@ -1,19 +1,17 @@
 import _extends from "@babel/runtime/helpers/extends";
-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';
 const contentStyles = css`
-  color: ${tokens.text};
+  color: ${"var(--ds-text-subtlest, #626F86)"};
   margin-top: 0.5rem;
   font-size: 0.75rem;
 `;
@@ -26,59 +24,42 @@ const contentStyles = css`
  * @see FlexibleCardProps
  */
 const FlexibleUnauthorisedView = ({
-  anchorTarget,
-  analytics,
-  cardState,
-  extensionKey = '',
-  onAuthorize,
-  onClick,
-  onError,
   testId = 'smart-block-unauthorized-view',
-  url,
-  titleBlockProps
+  ...props
 }) => {
-  var _cardState$details, _extractProvider;
+  var _getExtensionKey, _cardState$details, _extractProvider;
+  const {
+    analytics,
+    cardState,
+    onAuthorize
+  } = props;
+  const extensionKey = (_getExtensionKey = getExtensionKey(cardState === null || cardState === void 0 ? void 0 : cardState.details)) !== null && _getExtensionKey !== void 0 ? _getExtensionKey : '';
   const data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   const providerName = (_extractProvider = extractProvider(data)) === null || _extractProvider === void 0 ? void 0 : _extractProvider.text;
   const handleAuthorize = useCallback(() => {
     if (onAuthorize) {
-      analytics.track.appAccountAuthStarted({
+      analytics === null || analytics === void 0 ? void 0 : analytics.track.appAccountAuthStarted({
         extensionKey
       });
       onAuthorize();
     }
-  }, [onAuthorize, extensionKey, analytics.track]);
-  const content = useMemo(() => onAuthorize ? /*#__PURE__*/React.createElement(UnauthorisedViewContent, {
+  }, [onAuthorize, extensionKey, analytics === null || analytics === void 0 ? void 0 : analytics.track]);
+  const content = useMemo(() => 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
     }
   })), [analytics, onAuthorize, providerName, testId]);
   const actions = useMemo(() => 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: `${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": `${testId}-content`
+  }, content));
 };
 export default withFlexibleUIBlockCardStyle(FlexibleUnauthorisedView);

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

@@ -4,11 +4,13 @@ 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
+// renderer overwrites the margin-right so we need to add it here
 export const metadataBlockCss = css`
   /* primary element group */
   span[data-smart-element-avatar-group] {
     > ul {
       padding-left: 0px;
+      margin-right: 0.5rem;
     }
   }
   [data-smart-element-group] {
@@ -44,7 +46,4 @@ const refreshedFlexibleBlockCardStyle = css`
     border: 1px solid ${`var(--ds-border, ${N40})`};
   }
 `;
-export const flexibleBlockCardStyle = getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? refreshedFlexibleBlockCardStyle : flexibleBlockCardElevationStyle;
-export const forbiddenViewTitleStyle = css`
-  font-weight: 600;
-`;
+export const flexibleBlockCardStyle = getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? refreshedFlexibleBlockCardStyle : flexibleBlockCardElevationStyle;

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

@@ -0,0 +1,33 @@
+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';
+const UnresolvedView = ({
+  actions,
+  cardState,
+  children,
+  onAuthorize,
+  onClick,
+  onError,
+  showPreview = false,
+  testId,
+  title,
+  url
+}) => /*#__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;

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

@@ -1,6 +1,8 @@
-import { ElementName } from '../../../../../constants';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { ElementName, MediaPlacement, SmartLinkPosition, SmartLinkSize } from '../../../../../constants';
 import { extractOwnedBy } from '../../../../../extractors/flexible/utils';
 import { getExtensionKey } from '../../../../../state/helpers';
+import { footerBlockCss, titleBlockCss } from '../styled';
 const baseTopMetadata = [{
   name: ElementName.ModifiedOn
 }, {
@@ -134,4 +136,27 @@ export const getSimulatedMetadata = cardDetails => {
     titleMetadata,
     topMetadata
   };
-};
+};
+export const FlexibleCardUiOptions = {
+  hideElevation: true
+};
+
+// Due to the use of getBooleanFF(), this has to be a function.
+// Make this a const object after ff cleanup.
+export const getTitleBlockOptions = () => ({
+  anchorTarget: getBooleanFF('platform.linking-platform.smart-card.enable-block-card-clicks-opening-in-same-tab') ? '_self' : undefined,
+  position: SmartLinkPosition.Center,
+  overrideCss: titleBlockCss,
+  hideRetry: true,
+  size: getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? SmartLinkSize.Large : undefined
+});
+export const PreviewBlockOptions = {
+  placement: MediaPlacement.Right,
+  ignoreContainerPadding: true
+};
+
+// Due to the use of getBooleanFF(), this has to be a function.
+// Make this a const object after ff cleanup.
+export const getFooterBlockOptions = () => ({
+  overrideCss: getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? footerBlockCss : undefined
+});

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

@@ -1,23 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useCallback, useMemo } from 'react';
-import { css } from '@emotion/react';
-import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkStatus, SmartLinkWidth } from '../../../../../constants';
-import Block from '../block';
-import ElementGroup from '../element-group';
-import { Provider } from '../../elements';
-import ActionGroup from '../action-group';
-import { filterActionItems } from '../utils';
-import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
-const getActionGroupStyles = size => {
-  if (size === 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 css`
-      max-height: 2rem;
-    `;
-  }
-};
+import React from 'react';
+import FooterBlockResolvedView from './resolved';
+import { SmartLinkStatus } from '../../../../../constants';
 
 /**
  * Represents a FooterBlock, designed to contain elements and actions that should appear
@@ -26,43 +10,16 @@ const getActionGroupStyles = size => {
  * @param {FooterBlockProps} FooterBlockProps
  * @see Block
  */
-const FooterBlock = props => {
-  const {
-    status,
-    actions,
-    size = SmartLinkSize.Medium,
-    testId = 'smart-footer-block',
-    onActionMenuOpenChange
-  } = props;
-  const context = useFlexibleUiContext();
-  const hasActions = useMemo(() => {
-    var _filterActionItems;
-    return ((_filterActionItems = filterActionItems(actions, context)) === null || _filterActionItems === void 0 ? void 0 : _filterActionItems.length) > 0;
-  }, [actions, context]);
-  const onDropdownOpenChange = useCallback(isOpen => {
-    if (onActionMenuOpenChange) {
-      onActionMenuOpenChange({
-        isOpen
-      });
-    }
-  }, [onActionMenuOpenChange]);
+const FooterBlock = ({
+  status,
+  testId = 'smart-footer-block',
+  ...props
+}) => {
   if (status !== SmartLinkStatus.Resolved) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(Block, _extends({}, props, {
-    testId: `${testId}-resolved-view`
-  }), /*#__PURE__*/React.createElement(Provider, {
-    testId: `${testId}-provider`
-  }), actions && hasActions ? /*#__PURE__*/React.createElement(ElementGroup, {
-    testId: "smart-element-group-actions",
-    align: SmartLinkAlignment.Right,
-    direction: SmartLinkDirection.Horizontal,
-    overrideCss: getActionGroupStyles(size),
-    width: SmartLinkWidth.Flexible
-  }, /*#__PURE__*/React.createElement(ActionGroup, {
-    onDropdownOpenChange: onDropdownOpenChange,
-    items: actions,
-    appearance: "default"
-  })) : null);
+  return /*#__PURE__*/React.createElement(FooterBlockResolvedView, _extends({}, props, {
+    testId: testId
+  }));
 };
 export default FooterBlock;

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

@@ -0,0 +1,56 @@
+import _extends from "@babel/runtime/helpers/extends";
+import { css } from '@emotion/react';
+import React, { useCallback, useMemo } from 'react';
+import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../../../../constants';
+import { useFlexibleUiContext } from '../../../../../../state/flexible-ui-context';
+import { Provider } from '../../../elements';
+import ActionGroup from '../../action-group';
+import Block from '../../block';
+import ElementGroup from '../../element-group';
+import { filterActionItems } from '../../utils';
+const getActionGroupStyles = size => {
+  if (size === 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 css`
+      max-height: 2rem;
+    `;
+  }
+};
+const FooterBlockResolvedView = props => {
+  const {
+    actions,
+    testId,
+    onActionMenuOpenChange,
+    size = SmartLinkSize.Medium
+  } = props;
+  const context = useFlexibleUiContext();
+  const hasActions = useMemo(() => {
+    var _filterActionItems;
+    return ((_filterActionItems = filterActionItems(actions, context)) === null || _filterActionItems === void 0 ? void 0 : _filterActionItems.length) > 0;
+  }, [actions, context]);
+  const onDropdownOpenChange = useCallback(isOpen => {
+    if (onActionMenuOpenChange) {
+      onActionMenuOpenChange({
+        isOpen
+      });
+    }
+  }, [onActionMenuOpenChange]);
+  return /*#__PURE__*/React.createElement(Block, _extends({}, props, {
+    testId: `${testId}-resolved-view`
+  }), /*#__PURE__*/React.createElement(Provider, {
+    testId: `${testId}-provider`
+  }), actions && hasActions ? /*#__PURE__*/React.createElement(ElementGroup, {
+    testId: "smart-element-group-actions",
+    align: SmartLinkAlignment.Right,
+    direction: SmartLinkDirection.Horizontal,
+    overrideCss: getActionGroupStyles(size),
+    width: SmartLinkWidth.Flexible
+  }, /*#__PURE__*/React.createElement(ActionGroup, {
+    onDropdownOpenChange: onDropdownOpenChange,
+    items: actions,
+    appearance: "default"
+  })) : null);
+};
+export default FooterBlockResolvedView;

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

@@ -3,4 +3,7 @@ export { default as MetadataBlock } from './metadata-block';
 export { default as PreviewBlock } from './preview-block';
 export { default as SnippetBlock } from './snippet-block';
 export { default as TitleBlock } from './title-block';
-export { default as CustomBlock } from './block';
+export { default as CustomBlock } from './block';
+
+// Internal components to be used within @atlaskit/smart-card only.
+export { default as InternalFooterBlock } from './footer-block/resolved';

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

@@ -8,7 +8,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.38.0",
+  packageVersion: "26.38.1",
   componentName: 'linkUrl'
 };
 const Link = withLinkClickedEvent('a');

package/dist/esm/utils/analytics/analytics.js

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

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

@@ -13,6 +13,7 @@ import { messages } from '../../../../messages';
  */
 export var AuthorizeAction = function AuthorizeAction(onAuthorize, providerName) {
   return {
+    appearance: 'primary',
     name: ActionName.CustomAction,
     content: providerName ? /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_unauthorised_account_action, {
       values: {

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);