@atlaskit/smart-card 23.4.7 → 23.5.0

package/dist/es2019/view/FlexibleCard/components/common/image-icon/index.js

@@ -8,7 +8,8 @@ const ImageIcon = ({
   defaultIcon,
   testId,
   url,
-  onError
+  onError,
+  onLoad
 }) => jsx(ImageLoader, {
   src: url,
   loading: jsx(LoadingSkeleton, {
@@ -19,7 +20,8 @@ const ImageIcon = ({
     "data-testid": `${testId}-image`
   }),
   errored: defaultIcon,
-  onError: onError
+  onError: onError,
+  onLoad: onLoad
 });
 
 export default ImageIcon;

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

@@ -1,11 +1,12 @@
 /** @jsx jsx */
 import React, { useContext } from 'react';
 import { css, jsx } from '@emotion/react';
-import { SmartLinkSize, SmartLinkTheme } from '../../../../constants';
-import { isFlexibleUiBlock, isFlexibleUiTitleBlock } from '../../../../utils/flexible';
+import { MediaPlacement, SmartLinkSize, SmartLinkTheme } from '../../../../constants';
+import { isFlexibleUiBlock, isFlexibleUiPreviewBlock, isFlexibleUiTitleBlock } from '../../../../utils/flexible';
 import { tokens } from '../../../../utils/token';
 import { FlexibleUiContext } from '../../../../state/flexible-ui-context';
 import LayeredLink from './layered-link';
+import { isFlexUiPreviewPresent } from '../../../../state/flexible-ui-context/utils';
 const elevationStyles = css`
   border: 1px solid transparent;
   border-radius: 1.5px;
@@ -56,25 +57,75 @@ const clickableContainerStyles = css`
     z-index: 1;
   }
 `;
-export const getContainerStyles = (size, hideBackground, hideElevation, hidePadding, clickableContainer) => css`
-  display: flex;
-  gap: ${getGap(size)} 0;
-  flex-direction: column;
-  min-width: 0;
-  overflow-x: hidden;
-  position: relative;
-  ${hideBackground ? '' : `background-color: ${tokens.background};`}
-  ${hidePadding ? '' : `padding: ${getPadding(size)};`}
-  ${hideElevation ? '' : elevationStyles}
-  ${clickableContainer ? clickableContainerStyles : ''}
-  &:hover ~ .actions-button-group {
-    opacity: 1;
-  }
-  a:focus,
-  .has-action:focus {
-    outline-offset: -2px;
+
+const getContainerPaddingStyles = (size, hidePadding, childrenOptions) => {
+  const padding = hidePadding ? '0rem' : getPadding(size);
+  const gap = getGap(size);
+  const {
+    previewOnLeft,
+    previewOnRight
+  } = childrenOptions;
+  return css`
+    // Set variables for PreviewBlock to use.
+    --container-padding: ${padding};
+    --container-gap-left: ${previewOnLeft ? gap : padding};
+    --container-gap-right: ${previewOnRight ? gap : padding};
+    --preview-block-width: 30%;
+
+    padding: ${padding};
+    ${previewOnLeft ? `padding-left: calc(var(--preview-block-width) + ${gap});` : ''}
+    ${previewOnRight ? `padding-right: calc(var(--preview-block-width) + ${gap});` : ''}
+  `;
+};
+
+const getChildrenOptions = (children, context) => {
+  let options = {};
+
+  if (isFlexUiPreviewPresent(context)) {
+    React.Children.map(children, child => {
+      if ( /*#__PURE__*/React.isValidElement(child)) {
+        if (isFlexibleUiPreviewBlock(child)) {
+          const {
+            placement
+          } = child.props;
+
+          if (placement === MediaPlacement.Left) {
+            options.previewOnLeft = true;
+          }
+
+          if (placement === MediaPlacement.Right) {
+            options.previewOnRight = true;
+          }
+        }
+      }
+    });
   }
-`;
+
+  return options;
+};
+
+export const getContainerStyles = (size, hideBackground, hideElevation, hidePadding, clickableContainer, childrenOptions) => {
+  const paddingCss = getContainerPaddingStyles(size, hidePadding, childrenOptions);
+  return css`
+    display: flex;
+    gap: ${getGap(size)} 0;
+    flex-direction: column;
+    min-width: 0;
+    overflow-x: hidden;
+    position: relative;
+    ${hideBackground ? '' : `background-color: ${tokens.background};`}
+    ${paddingCss}
+    ${hideElevation ? '' : elevationStyles}
+    ${clickableContainer ? clickableContainerStyles : ''}
+    &:hover ~ .actions-button-group {
+      opacity: 1;
+    }
+    a:focus,
+    .has-action:focus {
+      outline-offset: -2px;
+    }
+  `;
+};
 
 const renderChildren = (children, containerSize, containerTheme, status, retry, onClick) => React.Children.map(children, child => {
   if ( /*#__PURE__*/React.isValidElement(child) && isFlexibleUiBlock(child)) {
@@ -149,8 +200,9 @@ const Container = ({
   theme = SmartLinkTheme.Link
 }) => {
   const context = useContext(FlexibleUiContext);
+  const childrenOptions = getChildrenOptions(children, context);
   return jsx("div", {
-    css: getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer),
+    css: getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer, childrenOptions),
     "data-smart-link-container": true,
     "data-testid": testId
   }, clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, renderChildren(children, size, theme, status, retry, onClick));

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

@@ -60,6 +60,7 @@ const Media = ({
   testId = 'smart-element-media',
   type,
   url,
+  onLoad,
   onError
 }) => {
   if (!type || !url) {
@@ -75,6 +76,7 @@ const Media = ({
     testId: `${testId}-image`,
     url: url,
     onError: onError,
+    onLoad: onLoad,
     defaultIcon: null
   }));
 };

package/dist/esm/constants.js

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

package/dist/esm/index.js

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

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

@@ -0,0 +1,7 @@
+/**
+ * Returns true if preview data is available in the FlexibleUiDataContext
+ * @param context is the FlexibleUiDataContext
+ */
+export var isFlexUiPreviewPresent = function isFlexUiPreviewPresent(context) {
+  return Boolean(context && context.preview);
+};

package/dist/esm/utils/flexible.js

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

package/dist/esm/version.json

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

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

@@ -28,7 +28,7 @@ var providerStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplate
  * @param props are the data required for the block, such as actions to be displayed.
  */
 
-var Footer = function Footer(props) {
+var BlockCardFooter = function BlockCardFooter(props) {
   var actions = props.actions,
       _props$size = props.size,
       size = _props$size === void 0 ? SmartLinkSize.Medium : _props$size,
@@ -49,4 +49,4 @@ var Footer = function Footer(props) {
   })) : null);
 };
 
-export default Footer;
+export default BlockCardFooter;

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

@@ -1,5 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+/** @jsx jsx */
 import { getExtensionKey } from '../../state/helpers';
 import { extractBlockProps } from '../../extractors/block';
 import { getEmptyJsonLd, getForbiddenJsonLd } from '../../utils/jsonld';
@@ -13,15 +17,21 @@ import { ResolvingView as BlockCardResolvingView } from './views/ResolvingView';
 import { UnauthorizedView as BlockCardUnauthorisedView } from './views/UnauthorizedView';
 import { ForbiddenView as BlockCardForbiddenView } from './views/ForbiddenView';
 import { ErroredView as BlockCardErroredView } from './views/ErroredView';
+import FlexibleResolvedView from './views/flexible/FlexibleResolvedView';
+import FlexibleUnauthorisedView from './views/flexible/FlexibleUnauthorisedView';
+import FlexibleNotFoundView from './views/flexible/FlexibleNotFoundView';
+import FlexibleErroredView from './views/flexible/FlexibleErroredView';
+import FlexibleForbiddenView from './views/flexible/FlexibleForbiddenView';
+import { tokens } from '../../utils/token';
+import { css, jsx } from '@emotion/react';
 export { default as PreviewAction } from './actions/PreviewAction';
 export { ForbiddenAction, AuthorizeAction, BlockCardResolvedView, BlockCardResolvingView, BlockCardUnauthorisedView, BlockCardForbiddenView, BlockCardErroredView, BlockCardNotFoundView };
+var flexibleBlockCardElevationStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: 2px;\n"])), tokens.elevation);
 export var BlockCard = function BlockCard(_ref) {
   var _details$meta, _forbiddenViewProps$c;
 
   var url = _ref.url,
-      _ref$cardState = _ref.cardState,
-      status = _ref$cardState.status,
-      details = _ref$cardState.details,
+      cardState = _ref.cardState,
       authFlow = _ref.authFlow,
       handleAuthorize = _ref.handleAuthorize,
       handleErrorRetry = _ref.handleErrorRetry,
@@ -34,7 +44,10 @@ export var BlockCard = function BlockCard(_ref) {
       testId = _ref.testId,
       showActions = _ref.showActions,
       platform = _ref.platform,
-      analytics = _ref.analytics;
+      analytics = _ref.analytics,
+      enableFlexibleBlockCard = _ref.enableFlexibleBlockCard;
+  var status = cardState.status,
+      details = cardState.details;
   var data = details && details.data || getEmptyJsonLd();
   var meta = details && details.meta;
   var extractorOpts = {
@@ -44,10 +57,62 @@ export var BlockCard = function BlockCard(_ref) {
     extensionKey: getExtensionKey(details)
   };
 
+  if (enableFlexibleBlockCard) {
+    var ui = {
+      hideElevation: true
+    };
+    var flexibleProps = {
+      cardState: cardState,
+      url: url,
+      testId: testId,
+      onError: onError,
+      renderers: renderers,
+      ui: ui
+    };
+
+    switch (status) {
+      case 'pending':
+      case 'resolving':
+      case 'resolved':
+        return jsx("div", {
+          css: flexibleBlockCardElevationStyle
+        }, jsx(FlexibleResolvedView, flexibleProps));
+
+      case 'unauthorized':
+        return jsx("div", {
+          css: flexibleBlockCardElevationStyle
+        }, jsx(FlexibleUnauthorisedView, _extends({}, flexibleProps, {
+          onAuthorize: handleAuthorize
+        })));
+
+      case 'forbidden':
+        return jsx("div", {
+          css: flexibleBlockCardElevationStyle
+        }, jsx(FlexibleForbiddenView, _extends({}, flexibleProps, {
+          onAuthorize: handleAuthorize
+        })));
+
+      case 'not_found':
+        return jsx("div", {
+          css: flexibleBlockCardElevationStyle
+        }, jsx(FlexibleNotFoundView, _extends({}, flexibleProps, {
+          onAuthorize: handleAuthorize
+        })));
+
+      case 'fallback':
+      case 'errored':
+        return jsx("div", {
+          css: flexibleBlockCardElevationStyle
+        }, jsx(FlexibleErroredView, _extends({}, flexibleProps, {
+          onAuthorize: handleAuthorize
+        })));
+    }
+  }
+
   switch (status) {
     case 'pending':
     case 'resolving':
-      return /*#__PURE__*/React.createElement(BlockCardResolvingView, {
+      return jsx(BlockCardResolvingView, {
         testId: testId,
         isSelected: isSelected
       });
@@ -62,7 +127,7 @@ export var BlockCard = function BlockCard(_ref) {
         });
       }
 
-      return /*#__PURE__*/React.createElement(BlockCardResolvedView, _extends({}, resolvedViewProps, {
+      return jsx(BlockCardResolvedView, _extends({}, resolvedViewProps, {
         isSelected: isSelected,
         testId: testId,
         showActions: showActions,
@@ -78,7 +143,7 @@ export var BlockCard = function BlockCard(_ref) {
       }
 
       var unauthorizedViewProps = extractBlockProps(data, meta, extractorOpts);
-      return /*#__PURE__*/React.createElement(BlockCardUnauthorisedView, _extends({}, unauthorizedViewProps, {
+      return jsx(BlockCardUnauthorisedView, _extends({}, unauthorizedViewProps, {
         isSelected: isSelected,
         testId: testId,
         showActions: showActions,
@@ -101,7 +166,7 @@ export var BlockCard = function BlockCard(_ref) {
         url: url,
         context: (_forbiddenViewProps$c = forbiddenViewProps.context) === null || _forbiddenViewProps$c === void 0 ? void 0 : _forbiddenViewProps$c.text
       });
-      return /*#__PURE__*/React.createElement(BlockCardForbiddenView, _extends({}, forbiddenViewProps, {
+      return jsx(BlockCardForbiddenView, _extends({}, forbiddenViewProps, {
         isSelected: isSelected,
         showActions: showActions,
         actions: handleAuthorize ? [ForbiddenAction(handleAuthorize)] : [],
@@ -118,7 +183,7 @@ export var BlockCard = function BlockCard(_ref) {
       }
 
       var notFoundViewProps = extractBlockProps(data, meta, extractorOpts);
-      return /*#__PURE__*/React.createElement(BlockCardNotFoundView, _extends({}, notFoundViewProps, {
+      return jsx(BlockCardNotFoundView, _extends({}, notFoundViewProps, {
         isSelected: isSelected,
         testId: testId,
         onClick: handleFrameClick
@@ -135,7 +200,7 @@ export var BlockCard = function BlockCard(_ref) {
       }
 
       if (authFlow && authFlow === 'disabled') {
-        return /*#__PURE__*/React.createElement(CardLinkView, {
+        return jsx(CardLinkView, {
           link: url,
           isSelected: isSelected,
           onClick: handleFrameClick,
@@ -143,7 +208,7 @@ export var BlockCard = function BlockCard(_ref) {
         });
       }
 
-      return /*#__PURE__*/React.createElement(BlockCardErroredView, {
+      return jsx(BlockCardErroredView, {
         link: url,
         isSelected: isSelected,
         onRetry: handleErrorRetry,

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

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

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

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

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

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

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

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

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

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

package/dist/esm/view/CardWithUrl/component.js

@@ -54,8 +54,9 @@ export function CardWithUrlContent(_ref) {
 
   if (showHoverPreview === undefined && showHoverPreviewFlag !== undefined) {
     showHoverPreview = Boolean(showHoverPreviewFlag);
-  } // Setup UI handlers.
+  }
 
+  var enableFlexibleBlockCardFlag = Boolean(useFeatureFlag('enableFlexibleBlockCard')); // Setup UI handlers.
 
   var handleClick = useCallback(function (event) {
     var clickUrl = getClickUrl(url, state.details);
@@ -188,7 +189,8 @@ export function CardWithUrlContent(_ref) {
         onError: onError,
         testId: testId,
         showActions: showActions,
-        platform: platform
+        platform: platform,
+        enableFlexibleBlockCard: enableFlexibleBlockCardFlag
       });
 
     case 'embed':

package/dist/esm/view/EmbedModal/components/link-info/index.js

@@ -38,7 +38,8 @@ var LinkInfo = function LinkInfo(_ref) {
           label: messages.download.defaultMessage
         }),
         onClick: onDownloadButtonClick,
-        testId: "".concat(testId, "-download")
+        testId: "".concat(testId, "-download"),
+        target: "_blank"
       });
     }
   }, [downloadUrl, onDownloadButtonClick, testId]);

package/dist/esm/view/FlexibleCard/components/blocks/preview-block/index.js

@@ -1,10 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["status", "testId", "onError"];
+var _excluded = ["status", "testId"];
+
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { SmartLinkStatus } from '../../../../../constants';
-import Block from '../block';
-import { Preview } from '../../elements';
+import PreviewBlockResolvedView from './resolved';
 /**
  * Represents a PreviewBlock, which typically contains media or other large format content.
  * @public
@@ -17,17 +19,14 @@ var PreviewBlock = function PreviewBlock(_ref) {
       status = _ref$status === void 0 ? SmartLinkStatus.Fallback : _ref$status,
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'smart-block-preview' : _ref$testId,
-      onError = _ref.onError,
       blockProps = _objectWithoutProperties(_ref, _excluded);
 
   if (status !== SmartLinkStatus.Resolved) {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
-    testId: "".concat(testId, "-resolved-view")
-  }), /*#__PURE__*/React.createElement(Preview, {
-    onError: onError
+  return jsx(PreviewBlockResolvedView, _extends({}, blockProps, {
+    testId: testId
   }));
 };