@atlaskit/smart-card 23.4.8 → 23.5.0

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

@@ -25,7 +25,9 @@ var _flexibleUiContext = require("../../../../state/flexible-ui-context");
 
 var _layeredLink = _interopRequireDefault(require("./layered-link"));
 
-var _templateObject, _templateObject2, _templateObject3;
+var _utils = require("../../../../state/flexible-ui-context/utils");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 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); }
 
@@ -69,8 +71,41 @@ var getPadding = function getPadding(size) {
 
 var clickableContainerStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  // Position any interactive elements at the top of the z-index stack.\n  a,\n  button,\n  .has-action {\n    position: relative;\n    z-index: 1;\n  }\n"])));
 
-var getContainerStyles = function getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer) {
-  return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: ", " 0;\n  flex-direction: column;\n  min-width: 0;\n  overflow-x: hidden;\n  position: relative;\n  ", "\n  ", "\n  ", "\n  ", "\n  &:hover ~ .actions-button-group {\n    opacity: 1;\n  }\n  a:focus,\n  .has-action:focus {\n    outline-offset: -2px;\n  }\n"])), getGap(size), hideBackground ? '' : "background-color: ".concat(_token.tokens.background, ";"), hidePadding ? '' : "padding: ".concat(getPadding(size), ";"), hideElevation ? '' : elevationStyles, clickableContainer ? clickableContainerStyles : '');
+var getContainerPaddingStyles = function getContainerPaddingStyles(size, hidePadding, childrenOptions) {
+  var padding = hidePadding ? '0rem' : getPadding(size);
+  var gap = getGap(size);
+  var previewOnLeft = childrenOptions.previewOnLeft,
+      previewOnRight = childrenOptions.previewOnRight;
+  return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    // Set variables for PreviewBlock to use.\n    --container-padding: ", ";\n    --container-gap-left: ", ";\n    --container-gap-right: ", ";\n    --preview-block-width: 30%;\n\n    padding: ", ";\n    ", "\n    ", "\n  "])), padding, previewOnLeft ? gap : padding, previewOnRight ? gap : padding, padding, previewOnLeft ? "padding-left: calc(var(--preview-block-width) + ".concat(gap, ");") : '', previewOnRight ? "padding-right: calc(var(--preview-block-width) + ".concat(gap, ");") : '');
+};
+
+var getChildrenOptions = function getChildrenOptions(children, context) {
+  var options = {};
+
+  if ((0, _utils.isFlexUiPreviewPresent)(context)) {
+    _react.default.Children.map(children, function (child) {
+      if ( /*#__PURE__*/_react.default.isValidElement(child)) {
+        if ((0, _flexible.isFlexibleUiPreviewBlock)(child)) {
+          var placement = child.props.placement;
+
+          if (placement === _constants.MediaPlacement.Left) {
+            options.previewOnLeft = true;
+          }
+
+          if (placement === _constants.MediaPlacement.Right) {
+            options.previewOnRight = true;
+          }
+        }
+      }
+    });
+  }
+
+  return options;
+};
+
+var getContainerStyles = function getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer, childrenOptions) {
+  var paddingCss = getContainerPaddingStyles(size, hidePadding, childrenOptions);
+  return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    gap: ", " 0;\n    flex-direction: column;\n    min-width: 0;\n    overflow-x: hidden;\n    position: relative;\n    ", "\n    ", "\n    ", "\n    ", "\n    &:hover ~ .actions-button-group {\n      opacity: 1;\n    }\n    a:focus,\n    .has-action:focus {\n      outline-offset: -2px;\n    }\n  "])), getGap(size), hideBackground ? '' : "background-color: ".concat(_token.tokens.background, ";"), paddingCss, hideElevation ? '' : elevationStyles, clickableContainer ? clickableContainerStyles : '');
 };
 
 exports.getContainerStyles = getContainerStyles;
@@ -157,8 +192,9 @@ var Container = function Container(_ref3) {
       _ref3$theme = _ref3.theme,
       theme = _ref3$theme === void 0 ? _constants.SmartLinkTheme.Link : _ref3$theme;
   var context = (0, _react.useContext)(_flexibleUiContext.FlexibleUiContext);
+  var childrenOptions = getChildrenOptions(children, context);
   return (0, _react2.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/cjs/view/FlexibleCard/components/elements/media/index.js

@@ -42,6 +42,7 @@ var Media = function Media(_ref) {
       testId = _ref$testId === void 0 ? 'smart-element-media' : _ref$testId,
       type = _ref.type,
       url = _ref.url,
+      onLoad = _ref.onLoad,
       onError = _ref.onError;
 
   if (!type || !url) {
@@ -57,6 +58,7 @@ var Media = function Media(_ref) {
     testId: "".concat(testId, "-image"),
     url: url,
     onError: onError,
+    onLoad: onLoad,
     defaultIcon: null
   }));
 };

package/dist/es2019/constants.js

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

package/dist/es2019/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/es2019/state/flexible-ui-context/utils.js

@@ -0,0 +1,5 @@
+/**
+ * Returns true if preview data is available in the FlexibleUiDataContext
+ * @param context is the FlexibleUiDataContext
+ */
+export const isFlexUiPreviewPresent = context => Boolean(context && context.preview);

package/dist/es2019/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 const isFlexibleUiCard = children => {
   if (children && React.Children.toArray(children).some(child => isFlexibleUiTitleBlock(child))) {
@@ -11,4 +11,5 @@ export const isFlexibleUiCard = children => {
 };
 export const isFlexibleUiBlock = node => /*#__PURE__*/React.isValidElement(node) && Object.values(Blocks).some(type => type === node.type);
 export const isFlexibleUiElement = node => /*#__PURE__*/React.isValidElement(node) && Object.values(Elements).some(type => type === node.type);
-export const isFlexibleUiTitleBlock = node => /*#__PURE__*/React.isValidElement(node) && node.type === TitleBlock;
+export const isFlexibleUiTitleBlock = node => /*#__PURE__*/React.isValidElement(node) && node.type === TitleBlock;
+export const isFlexibleUiPreviewBlock = node => /*#__PURE__*/React.isValidElement(node) && node.type === PreviewBlock;

package/dist/es2019/version.json

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

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

@@ -30,7 +30,7 @@ const providerStyles = css`
  * @param props are the data required for the block, such as actions to be displayed.
  */
 
-const Footer = props => {
+const BlockCardFooter = props => {
   const {
     actions,
     size = SmartLinkSize.Medium,
@@ -51,4 +51,4 @@ const Footer = props => {
   })) : null);
 };
 
-export default Footer;
+export default BlockCardFooter;

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+
+/** @jsx jsx */
 import { getExtensionKey } from '../../state/helpers';
 import { extractBlockProps } from '../../extractors/block';
 import { getEmptyJsonLd, getForbiddenJsonLd } from '../../utils/jsonld';
@@ -13,14 +14,23 @@ 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 };
+const flexibleBlockCardElevationStyle = css`
+  border-radius: 1.5px;
+  box-shadow: ${tokens.elevation};
+  margin: 2px;
+`;
 export const BlockCard = ({
   url,
-  cardState: {
-    status,
-    details
-  },
+  cardState,
   authFlow,
   handleAuthorize,
   handleErrorRetry,
@@ -33,10 +43,15 @@ export const BlockCard = ({
   testId,
   showActions,
   platform,
-  analytics
+  analytics,
+  enableFlexibleBlockCard
 }) => {
   var _details$meta, _forbiddenViewProps$c;
 
+  const {
+    status,
+    details
+  } = cardState;
   const data = details && details.data || getEmptyJsonLd();
   const meta = details && details.meta;
   const extractorOpts = {
@@ -46,10 +61,62 @@ export const BlockCard = ({
     extensionKey: getExtensionKey(details)
   };
 
+  if (enableFlexibleBlockCard) {
+    const ui = {
+      hideElevation: true
+    };
+    const flexibleProps = {
+      cardState,
+      url,
+      testId,
+      onError,
+      renderers,
+      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
       });
@@ -64,7 +131,7 @@ export const BlockCard = ({
         });
       }
 
-      return /*#__PURE__*/React.createElement(BlockCardResolvedView, _extends({}, resolvedViewProps, {
+      return jsx(BlockCardResolvedView, _extends({}, resolvedViewProps, {
         isSelected: isSelected,
         testId: testId,
         showActions: showActions,
@@ -80,7 +147,7 @@ export const BlockCard = ({
       }
 
       const unauthorizedViewProps = extractBlockProps(data, meta, extractorOpts);
-      return /*#__PURE__*/React.createElement(BlockCardUnauthorisedView, _extends({}, unauthorizedViewProps, {
+      return jsx(BlockCardUnauthorisedView, _extends({}, unauthorizedViewProps, {
         isSelected: isSelected,
         testId: testId,
         showActions: showActions,
@@ -103,7 +170,7 @@ export const BlockCard = ({
         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)] : [],
@@ -120,7 +187,7 @@ export const BlockCard = ({
       }
 
       const notFoundViewProps = extractBlockProps(data, meta, extractorOpts);
-      return /*#__PURE__*/React.createElement(BlockCardNotFoundView, _extends({}, notFoundViewProps, {
+      return jsx(BlockCardNotFoundView, _extends({}, notFoundViewProps, {
         isSelected: isSelected,
         testId: testId,
         onClick: handleFrameClick
@@ -137,7 +204,7 @@ export const BlockCard = ({
       }
 
       if (authFlow && authFlow === 'disabled') {
-        return /*#__PURE__*/React.createElement(CardLinkView, {
+        return jsx(CardLinkView, {
           link: url,
           isSelected: isSelected,
           onClick: handleFrameClick,
@@ -145,7 +212,7 @@ export const BlockCard = ({
         });
       }
 
-      return /*#__PURE__*/React.createElement(BlockCardErroredView, {
+      return jsx(BlockCardErroredView, {
         link: url,
         isSelected: isSelected,
         onRetry: handleErrorRetry,

package/dist/es2019/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';
@@ -46,7 +46,7 @@ const FlexibleErroredView = ({
     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/es2019/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';
 
@@ -48,7 +48,7 @@ const FlexibleForbiddenView = ({
     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/es2019/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 @@ const FlexibleNotFoundView = ({
       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/es2019/view/BlockCard/views/flexible/FlexibleResolvedView.js

@@ -0,0 +1,81 @@
+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
+ */
+const FlexibleResolvedView = ({
+  cardState,
+  onClick,
+  onError,
+  testId = 'smart-block-resolved-view',
+  ui,
+  url
+}) => {
+  const [isPreviewBlockErrored, setIsPreviewBlockErrored] = useState(false);
+  useEffect(() => {
+    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: () => {
+      setIsPreviewBlockErrored(true);
+    }
+  }) : null, /*#__PURE__*/React.createElement(FooterBlock, {
+    actions: [{
+      name: ActionName.PreviewAction
+    }, {
+      name: ActionName.ViewAction
+    }, {
+      name: ActionName.DownloadAction
+    }]
+  }));
+};
+
+export default FlexibleResolvedView;

package/dist/es2019/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
  */
 const FlexibleUnauthorisedView = ({
   cardState,
@@ -44,7 +44,7 @@ const FlexibleUnauthorisedView = ({
         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/es2019/view/CardWithUrl/component.js

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

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

@@ -1,8 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
+
+/** @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
@@ -13,17 +15,14 @@ import { Preview } from '../../elements';
 const PreviewBlock = ({
   status = SmartLinkStatus.Fallback,
   testId = 'smart-block-preview',
-  onError,
   ...blockProps
 }) => {
   if (status !== SmartLinkStatus.Resolved) {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
-    testId: `${testId}-resolved-view`
-  }), /*#__PURE__*/React.createElement(Preview, {
-    onError: onError
+  return jsx(PreviewBlockResolvedView, _extends({}, blockProps, {
+    testId: testId
   }));
 };
 

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

@@ -0,0 +1,103 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import React, { useCallback, useEffect, useState } from 'react';
+import { css, jsx } from '@emotion/react';
+import { MediaPlacement } from '../../../../../../constants';
+import Block from '../../block';
+import { Preview } from '../../../elements';
+/**
+ * Due to its placement on the left/right and ignoreContainerPadding prop
+ * rely on its parent container styling, css variables are declared in
+ * <Container /> to preset the base values for the preview block styling.
+ *
+ * `--container-padding` is the padding of the Container. This value is based
+ *   on size and hidePadding.
+ * `--container-gap-left` and `--container-gap-right` are the gap or padding of
+ *   the Container depending on whether the container has other preview blocks
+ *   with left/right positioning.
+ * `--preview-block-width` is the size of the preview image in relation to
+ *   the Container width when the placement is left/right.
+ * @param placement
+ * @param ignoreContainerPadding
+ */
+
+const getPreviewBlockStyles = (placement, ignoreContainerPadding) => {
+  if (placement === MediaPlacement.Left || placement === MediaPlacement.Right) {
+    const containerPadding = ignoreContainerPadding ? '0rem' : 'var(--container-padding)';
+    return css`
+      position: absolute;
+      top: ${containerPadding};
+      bottom: ${containerPadding};
+      width: calc(var(--preview-block-width) - ${containerPadding});
+
+      ${placement === MediaPlacement.Left ? `left: ${containerPadding};` : ''}
+      ${placement === MediaPlacement.Right ? `right: ${containerPadding};` : ''}
+
+      [data-smart-element-media='image'] {
+        aspect-ratio: unset;
+        padding-top: unset;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    `;
+  }
+
+  if (ignoreContainerPadding) {
+    return css`
+      margin-left: calc(var(--container-gap-left) * -1);
+      margin-right: calc(var(--container-gap-right) * -1);
+      &:first-of-type {
+        margin-top: calc(var(--container-padding) * -1);
+      }
+      &:last-of-type {
+        margin-bottom: calc(var(--container-padding) * -1);
+      }
+    `;
+  }
+};
+/**
+ * Represents a resolved PreviewBlock, which typically contains media or other large format content.
+ * @public
+ * @param {PreviewBlock} PreviewBlock
+ * @see Block
+ */
+
+
+const PreviewBlockResolvedView = ({
+  ignoreContainerPadding = false,
+  onError,
+  overrideCss,
+  placement,
+  testId,
+  ...blockProps
+}) => {
+  const [styles, setStyles] = useState(overrideCss);
+  const updateStyles = useCallback(() => {
+    setStyles(css`
+      ${getPreviewBlockStyles(placement, ignoreContainerPadding)}
+      ${overrideCss}
+    `);
+  }, [ignoreContainerPadding, overrideCss, placement]);
+  useEffect(() => {
+    updateStyles();
+  }, [ignoreContainerPadding, overrideCss, placement, updateStyles]);
+  const handleOnLoad = useCallback(() => {
+    updateStyles();
+  }, [updateStyles]);
+  const handleOnError = useCallback(() => {
+    if (onError) {
+      onError();
+    }
+  }, [onError]);
+  return jsx(Block, _extends({}, blockProps, {
+    overrideCss: styles,
+    testId: `${testId}-resolved-view`
+  }), jsx(Preview, {
+    onError: handleOnError,
+    onLoad: handleOnLoad
+  }));
+};
+
+export default PreviewBlockResolvedView;

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;