@atlaskit/smart-card 21.1.3 → 21.3.0

package/dist/es2019/state/hooks-external/useSmartLinkActions.js

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
 import uuid from 'uuid';
+import { useFeatureFlag } from '@atlaskit/link-provider';
 import { extractBlockProps as extractCardProps } from '../../extractors/block';
 import { useSmartCardActions as useLinkActions } from '../actions';
 import { useSmartLinkAnalytics as useLinkAnalytics } from '../analytics';
@@ -15,13 +16,21 @@ export function useSmartLinkActions({
   const [actions, setActions] = useState([]);
   const linkState = useLinkState(url);
   const linkAnalytics = useLinkAnalytics(url, analyticsHandler, id);
-  const linkActions = useLinkActions(id, url, linkAnalytics);
+  const linkActions = useLinkActions(id, url, linkAnalytics); // Actions do not have access to the react tree, so we need to obtain
+  // feature flags here where we still can access SmartLinkContext context
+  // and pass the flags down to the extractor. See PreviewAction.tsx for details.
+
+  const embedModalSize = useFeatureFlag('embedModalSize');
   useEffect(() => {
     if (!linkState.details) {
       return;
     }
 
+    const featureFlags = {
+      embedModalSize
+    };
     const cardProperties = extractCardProps(linkState.details.data, linkState.details.meta, {
+      featureFlags,
       handleInvoke: opts => linkActions.invoke(opts, appearance),
       handleAnalytics: analyticsHandler,
       extensionKey: getExtensionKey(linkState.details),
@@ -38,6 +47,6 @@ export function useSmartLinkActions({
       invoke: action.promise
     }));
     setActions(cardActions);
-  }, [linkState, linkActions, analyticsHandler, appearance, platform]);
+  }, [linkState, linkActions, analyticsHandler, appearance, platform, embedModalSize]);
   return actions;
 }

package/dist/es2019/version.json

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

package/dist/es2019/view/BlockCard/actions/PreviewAction.js

@@ -32,7 +32,7 @@ export async function previewFunction({
     document.body.appendChild(popupMountPoint);
   }
 
-  let Modal = await import('../../common/Modal');
+  let Modal = await import('../../EmbedModal');
   ReactDOM.render( /*#__PURE__*/React.createElement(IntlProvider, {
     locale: "en"
   }, /*#__PURE__*/React.createElement(Modal.default, _extends({}, rest, {

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

@@ -14,6 +14,7 @@ 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 { useFeatureFlag } from '@atlaskit/link-provider';
 export { ForbiddenAction, AuthorizeAction, BlockCardResolvedView, BlockCardResolvingView, BlockCardUnauthorisedView, BlockCardForbiddenView, BlockCardErroredView, BlockCardNotFoundView };
 export const BlockCard = ({
   url,
@@ -37,9 +38,17 @@ export const BlockCard = ({
 }) => {
   var _details$meta, _forbiddenViewProps$c;
 
+  // Actions do not have access to the react tree, so we need to obtain
+  // feature flags here where we still can access SmartLinkContext context
+  // and pass the flags down to the extractor. See PreviewAction.tsx for details.
+  const embedModalSize = useFeatureFlag('embedModalSize');
+  const featureFlags = {
+    embedModalSize
+  };
   const data = details && details.data || getEmptyJsonLd();
   const meta = details && details.meta;
   const extractorOpts = {
+    featureFlags,
     handleAnalytics,
     handleInvoke,
     extensionKey: getExtensionKey(details)

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

@@ -51,7 +51,7 @@ export function CardWithUrlContent({
   const showHoverPreviewFlag = useFeatureFlag('showHoverPreview');
 
   if (showHoverPreview === undefined && showHoverPreviewFlag !== undefined) {
-    showHoverPreview = showHoverPreviewFlag;
+    showHoverPreview = Boolean(showHoverPreviewFlag);
   } // Setup UI handlers.
 
 

package/dist/es2019/view/EmbedModal/components/size-experiment/index.js

@@ -0,0 +1,28 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Modal from '../../../common/Modal';
+import { MAX_MODAL_SIZE, MIN_MODAL_SIZE } from '../../constants';
+
+const withSizeExperiment = Component => props => {
+  const {
+    featureFlags = {},
+    closeLabel = 'Close Preview'
+  } = props;
+  const {
+    embedModalSize
+  } = featureFlags; // Experiment
+
+  if (embedModalSize === 'large' || embedModalSize === 'small') {
+    const size = embedModalSize === 'large' ? MAX_MODAL_SIZE : MIN_MODAL_SIZE;
+    return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+      size: size
+    }));
+  } // Control
+
+
+  return /*#__PURE__*/React.createElement(Modal, _extends({}, props, {
+    closeLabel: closeLabel
+  }));
+};
+
+export default withSizeExperiment;

package/dist/es2019/view/EmbedModal/components/size-experiment/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -4,6 +4,7 @@ import LinkInfo from './components/link-info';
 import { MAX_MODAL_SIZE, MIN_MODAL_SIZE } from './constants';
 import EmbedContent from './components/embed-content';
 import withErrorBoundary from './components/error-boundary';
+import withSizeExperiment from './components/size-experiment';
 
 const EmbedModal = ({
   download: downloadUrl,
@@ -16,13 +17,14 @@ const EmbedModal = ({
   onViewActionClick,
   providerName,
   showModal,
+  size: defaultSize = MIN_MODAL_SIZE,
   src,
-  testId = 'smart-links-preview-modal',
+  testId = 'smart-embed-preview-modal',
   title,
   url
 }) => {
   const [isOpen, setIsOpen] = useState(showModal);
-  const [size, setSize] = useState(MIN_MODAL_SIZE);
+  const [size, setSize] = useState(defaultSize);
   const handleOnClose = useCallback(() => setIsOpen(false), []);
   const handleOnSizeClick = useCallback(() => {
     const newSize = size === MIN_MODAL_SIZE ? MAX_MODAL_SIZE : MIN_MODAL_SIZE;
@@ -54,4 +56,4 @@ const EmbedModal = ({
   }))));
 };
 
-export default withErrorBoundary(EmbedModal);
+export default withSizeExperiment(withErrorBoundary(EmbedModal));

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import React from 'react';
+import React, { useEffect } from 'react';
 import { css, jsx } from '@emotion/core';
 import { ElementName, SmartLinkDirection, SmartLinkSize } from '../../../../../constants';
 import { getBaseStyles, getGapSize, highlightRemoveStyles, renderChildren } from '../utils';
@@ -37,11 +37,21 @@ const Block = ({
   direction = SmartLinkDirection.Horizontal,
   size = SmartLinkSize.Medium,
   testId = 'smart-block',
-  overrideCss
-}) => jsx("div", {
-  css: [getBlockStyles(direction, size), overrideCss],
-  "data-smart-block": true,
-  "data-testid": testId
-}, renderChildren(children, size));
+  overrideCss,
+  blockRef,
+  onRender,
+  onTransitionEnd
+}) => {
+  useEffect(() => {
+    onRender && onRender();
+  }, [onRender]);
+  return jsx("div", {
+    css: [getBlockStyles(direction, size), overrideCss],
+    "data-smart-block": true,
+    "data-testid": testId,
+    onTransitionEnd: onTransitionEnd,
+    ref: blockRef
+  }, renderChildren(children, size));
+};
 
 export default Block;

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

@@ -13,6 +13,7 @@ import { Preview } from '../../elements';
 const PreviewBlock = ({
   status = SmartLinkStatus.Fallback,
   testId = 'smart-block-preview',
+  onError,
   ...blockProps
 }) => {
   if (status !== SmartLinkStatus.Resolved) {
@@ -21,7 +22,9 @@ const PreviewBlock = ({
 
   return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
     testId: `${testId}-resolved-view`
-  }), /*#__PURE__*/React.createElement(Preview, null));
+  }), /*#__PURE__*/React.createElement(Preview, {
+    onError: onError
+  }));
 };
 
 export default PreviewBlock;

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

@@ -1,6 +1,8 @@
 import React from 'react';
 import Loadable from 'react-loadable';
 import { B200, B400, N700, R400 } from '@atlaskit/theme/colors';
+import DocumentIcon from '@atlaskit/icon-file-type/glyph/document/16';
+import BlogIcon from '@atlaskit/icon-object/glyph/blog/16';
 import { IconType } from '../../../../../constants';
 import { token } from '@atlaskit/tokens'; // prettier-ignore
 
@@ -11,15 +13,9 @@ const importIconMapper = {
   [IconType.Audio]: () => import(
   /* webpackChunkName: "glyphAudio" */
   '@atlaskit/icon-file-type/glyph/audio/16'),
-  [IconType.Blog]: () => import(
-  /* webpackChunkName: "glyphBlog" */
-  '@atlaskit/icon-object/glyph/blog/16'),
   [IconType.Code]: () => import(
   /* webpackChunkName: "glyphCode" */
   '@atlaskit/icon-file-type/glyph/source-code/16'),
-  [IconType.Document]: () => import(
-  /* webpackChunkName: "glyphDocument" */
-  '@atlaskit/icon-file-type/glyph/document/16'),
   [IconType.Executable]: () => import(
   /* webpackChunkName: "glyphExecutable" */
   '@atlaskit/icon-file-type/glyph/executable/16'),
@@ -214,6 +210,21 @@ const AtlaskitIcon = ({
   label,
   testId
 }) => {
+  // Check for synchonously loaded icons first for SSR purposes
+  switch (icon) {
+    case IconType.Document:
+      return /*#__PURE__*/React.createElement(DocumentIcon, {
+        label: label || 'document',
+        testId: testId
+      });
+
+    case IconType.Blog:
+      return /*#__PURE__*/React.createElement(BlogIcon, {
+        label: label || 'blog',
+        testId: testId
+      });
+  }
+
   const importFn = getIconImportFn(icon);
 
   if (!importFn) {

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

@@ -7,7 +7,8 @@ import LoadingSkeleton from '../loading-skeleton';
 const ImageIcon = ({
   defaultIcon,
   testId,
-  url
+  url,
+  onError
 }) => jsx(ImageLoader, {
   src: url,
   loading: jsx(LoadingSkeleton, {
@@ -17,7 +18,8 @@ const ImageIcon = ({
     src: url,
     "data-testid": `${testId}-image`
   }),
-  errored: defaultIcon
+  errored: defaultIcon,
+  onError: onError
 });
 
 export default ImageIcon;

package/dist/es2019/view/FlexibleCard/components/common/loading-skeleton/index.js

@@ -8,10 +8,9 @@ const LoadingSkeleton = ({
   width,
   height
 }) => {
-  const animationWidth = width ? `${width}rem` : '20px';
   const animationNameStyles = keyframes`
-    0% { background-position: -${animationWidth}  0; }
-    100% { background-position: ${animationWidth} 0; }
+    0% { background-position: 50%  0; }
+    100% { background-position: -50% 0; }
   `;
   const styles = css`
     width: ${width}rem;

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

@@ -59,7 +59,8 @@ const Media = ({
   overrideCss,
   testId = 'smart-element-media',
   type,
-  url
+  url,
+  onError
 }) => {
   if (!type || !url) {
     return null;
@@ -72,7 +73,9 @@ const Media = ({
     "data-testid": testId
   }, jsx(ImageIcon, {
     testId: `${testId}-image`,
-    url: url
+    url: url,
+    onError: onError,
+    defaultIcon: null
   }));
 };
 

package/dist/es2019/view/HoverCard/components/HoverCardContent.js

@@ -1,17 +1,17 @@
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
 import { extractType } from '@atlaskit/linking-common/extractors';
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { ActionName, SmartLinkPosition, SmartLinkSize } from '../../../constants';
-import extractPreview from '../../../extractors/flexible/extract-preview';
 import { extractMetadata } from '../../../extractors/hover/extractMetadata';
 import { useSmartCardActions } from '../../../state/actions';
 import { getExtensionKey } from '../../../state/helpers';
 import { isSpecialEvent } from '../../../utils';
 import FlexibleCard from '../../FlexibleCard';
-import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock, TitleBlock } from '../../FlexibleCard/components/blocks';
-import { flexibleUiOptions, footerBlockCss, metadataBlockCss, titleBlockCss } from '../styled';
+import { FooterBlock, MetadataBlock, SnippetBlock, TitleBlock } from '../../FlexibleCard/components/blocks';
+import { flexibleUiOptions, footerBlockCss, metadataBlockCss, titleBlockCss, hiddenSnippetStyles } from '../styled';
 import { getSimulatedMetadata, SMART_CARD_ANALYTICS_DISPLAY } from '../utils';
 import HoverCardLoadingView from './HoverCardLoadingView';
+import SnippetOrPreview from './SnippetOrPreview';
 export const getOpenAction = (url, analytics, onActionClick) => ({
   name: ActionName.CustomAction,
   icon: /*#__PURE__*/React.createElement(ShortcutIcon, {
@@ -79,7 +79,17 @@ const HoverCardContent = ({
     subtitle
   } = extractMetadata(getSimulatedMetadata(extensionKey, types));
   const titleMaxLines = subtitle && subtitle.length > 0 ? 1 : 2;
-  const body = data && extractPreview(data) ? /*#__PURE__*/React.createElement(PreviewBlock, null) : /*#__PURE__*/React.createElement(SnippetBlock, null);
+  const snippetHeight = React.useRef(0);
+  const snippetBlockRef = useRef(null);
+  const onSnippetRender = useCallback(() => {
+    var _snippetBlockRef$curr, _snippetBlockRef$curr2;
+
+    snippetHeight.current = (_snippetBlockRef$curr = (_snippetBlockRef$curr2 = snippetBlockRef.current) === null || _snippetBlockRef$curr2 === void 0 ? void 0 : _snippetBlockRef$curr2.getBoundingClientRect().height) !== null && _snippetBlockRef$curr !== void 0 ? _snippetBlockRef$curr : 0;
+  }, []);
+  const body = SnippetOrPreview({
+    data: data,
+    snippetHeight: snippetHeight.current
+  });
   const titleBlockProps = {
     actions: titleActions,
     maxLines: titleMaxLines,
@@ -112,7 +122,12 @@ const HoverCardContent = ({
     size: SmartLinkSize.Large,
     overrideCss: metadataBlockCss,
     maxLines: 1
-  }), body, /*#__PURE__*/React.createElement(FooterBlock, {
+  }), body, /*#__PURE__*/React.createElement(SnippetBlock, {
+    testId: 'hidden-snippet',
+    onRender: onSnippetRender,
+    blockRef: snippetBlockRef,
+    overrideCss: hiddenSnippetStyles
+  }), /*#__PURE__*/React.createElement(FooterBlock, {
     actions: footerActions,
     size: SmartLinkSize.Large,
     overrideCss: footerBlockCss

package/dist/es2019/view/HoverCard/components/SnippetOrPreview.js

@@ -0,0 +1,42 @@
+import React, { useCallback, useState, useRef } from 'react';
+import { css } from '@emotion/core';
+import extractPreview from '../../../extractors/flexible/extract-preview';
+import { PreviewBlock, SnippetBlock } from '../../FlexibleCard/components/blocks';
+import { getTransitionStyles } from '../styled';
+
+const SnippetOrPreview = ({
+  data,
+  snippetHeight
+}) => {
+  const transitionStarted = useRef(false);
+  const previewBlockRef = useRef(null);
+  const [showSnippet, setShowSnippet] = useState(false);
+  const [previewCss, setPreviewCss] = useState(); // Set Preview to a fixed height to enable transitions
+
+  const onPreviewRender = useCallback(() => {
+    var _previewBlockRef$curr;
+
+    previewBlockRef.current && setPreviewCss(css`
+        height: ${(_previewBlockRef$curr = previewBlockRef.current) === null || _previewBlockRef$curr === void 0 ? void 0 : _previewBlockRef$curr.getBoundingClientRect().height}px;
+      `);
+  }, []); // On error set Preview to Snippet height with transition
+
+  const onPreviewError = useCallback(() => {
+    if (transitionStarted.current === false) {
+      setPreviewCss(getTransitionStyles(snippetHeight));
+      transitionStarted.current = true;
+    }
+  }, [snippetHeight]);
+  const onPreviewTransitionEnd = useCallback(() => {
+    setShowSnippet(true);
+  }, []);
+  return !showSnippet && data && extractPreview(data) ? /*#__PURE__*/React.createElement(PreviewBlock, {
+    onError: onPreviewError,
+    overrideCss: previewCss,
+    onTransitionEnd: onPreviewTransitionEnd,
+    blockRef: previewBlockRef,
+    onRender: onPreviewRender
+  }) : /*#__PURE__*/React.createElement(SnippetBlock, null);
+};
+
+export default SnippetOrPreview;

package/dist/es2019/view/HoverCard/styled.js

@@ -83,4 +83,12 @@ export const skeletonContainer = css`
   flex-direction: column;
   gap: 0.625rem;
   align-items: center;
+`;
+export const hiddenSnippetStyles = css`
+  visibility: hidden;
+  position: absolute;
+`;
+export const getTransitionStyles = snippetHeight => css`
+  transition: height 300ms ease-in-out;
+  height: ${snippetHeight}px;
 `;

package/dist/esm/extractors/block/index.js

@@ -37,13 +37,14 @@ var extractBlockDetails = function extractBlockDetails(jsonLd) {
 
 export var extractBlockActions = function extractBlockActions(props, jsonLd, opts, platform) {
   if (opts) {
-    var handleInvoke = opts.handleInvoke,
+    var featureFlags = opts.featureFlags,
+        handleInvoke = opts.handleInvoke,
         handleAnalytics = opts.handleAnalytics,
         extensionKey = opts.extensionKey,
         source = opts.source,
         testId = opts.testId;
     var actions = extractActions(jsonLd, handleInvoke);
-    var previewAction = extractPreviewAction(extensionKey, props, jsonLd, handleInvoke, handleAnalytics, testId, platform, source); // The previewAction should always be the last action
+    var previewAction = extractPreviewAction(extensionKey, props, jsonLd, handleInvoke, handleAnalytics, testId, platform, source, featureFlags); // The previewAction should always be the last action
 
     if (previewAction) {
       actions.push(previewAction);

package/dist/esm/extractors/common/actions/extractPreviewAction.js

@@ -60,6 +60,7 @@ export var extractPreviewAction = function extractPreviewAction() {
   var testId = arguments.length > 5 ? arguments[5] : undefined;
   var platform = arguments.length > 6 ? arguments[6] : undefined;
   var source = arguments.length > 7 ? arguments[7] : undefined;
+  var featureFlags = arguments.length > 8 ? arguments[8] : undefined;
   // Extract metadata from view props & raw JSON-LD.
   var metadataFromJsonLd = getMetadataFromJsonLd(jsonLd, platform);
   var metadataFromViewProps = getMetadataFromResolvedProps(viewProps);
@@ -71,6 +72,7 @@ export var extractPreviewAction = function extractPreviewAction() {
     // Build action using instrumentation hooks.
     var key = extensionKey;
     var previewAction = PreviewAction(_objectSpread(_objectSpread({}, metadata), {}, {
+      featureFlags: featureFlags,
       testId: testId,
       onOpen: function onOpen() {
         handleAnalytics(uiRenderSuccessEvent('preview', 'resolved', key));

package/dist/esm/state/hooks-external/useSmartLinkActions.js

@@ -1,6 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useEffect, useMemo, useState } from 'react';
 import uuid from 'uuid';
+import { useFeatureFlag } from '@atlaskit/link-provider';
 import { extractBlockProps as extractCardProps } from '../../extractors/block';
 import { useSmartCardActions as useLinkActions } from '../actions';
 import { useSmartLinkAnalytics as useLinkAnalytics } from '../analytics';
@@ -23,13 +24,21 @@ export function useSmartLinkActions(_ref) {
 
   var linkState = useLinkState(url);
   var linkAnalytics = useLinkAnalytics(url, analyticsHandler, id);
-  var linkActions = useLinkActions(id, url, linkAnalytics);
+  var linkActions = useLinkActions(id, url, linkAnalytics); // Actions do not have access to the react tree, so we need to obtain
+  // feature flags here where we still can access SmartLinkContext context
+  // and pass the flags down to the extractor. See PreviewAction.tsx for details.
+
+  var embedModalSize = useFeatureFlag('embedModalSize');
   useEffect(function () {
     if (!linkState.details) {
       return;
     }
 
+    var featureFlags = {
+      embedModalSize: embedModalSize
+    };
     var cardProperties = extractCardProps(linkState.details.data, linkState.details.meta, {
+      featureFlags: featureFlags,
       handleInvoke: function handleInvoke(opts) {
         return linkActions.invoke(opts, appearance);
       },
@@ -50,6 +59,6 @@ export function useSmartLinkActions(_ref) {
       };
     });
     setActions(cardActions);
-  }, [linkState, linkActions, analyticsHandler, appearance, platform]);
+  }, [linkState, linkActions, analyticsHandler, appearance, platform, embedModalSize]);
   return actions;
 }

package/dist/esm/version.json

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

package/dist/esm/view/BlockCard/actions/PreviewAction.js

@@ -55,7 +55,7 @@ function _previewFunction() {
             }
 
             _context.next = 5;
-            return import('../../common/Modal');
+            return import('../../EmbedModal');
 
           case 5:
             Modal = _context.sent;

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

@@ -14,6 +14,7 @@ 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 { useFeatureFlag } from '@atlaskit/link-provider';
 export { ForbiddenAction, AuthorizeAction, BlockCardResolvedView, BlockCardResolvingView, BlockCardUnauthorisedView, BlockCardForbiddenView, BlockCardErroredView, BlockCardNotFoundView };
 export var BlockCard = function BlockCard(_ref) {
   var _details$meta, _forbiddenViewProps$c;
@@ -35,9 +36,17 @@ export var BlockCard = function BlockCard(_ref) {
       testId = _ref.testId,
       showActions = _ref.showActions,
       platform = _ref.platform;
+  // Actions do not have access to the react tree, so we need to obtain
+  // feature flags here where we still can access SmartLinkContext context
+  // and pass the flags down to the extractor. See PreviewAction.tsx for details.
+  var embedModalSize = useFeatureFlag('embedModalSize');
+  var featureFlags = {
+    embedModalSize: embedModalSize
+  };
   var data = details && details.data || getEmptyJsonLd();
   var meta = details && details.meta;
   var extractorOpts = {
+    featureFlags: featureFlags,
     handleAnalytics: handleAnalytics,
     handleInvoke: handleInvoke,
     extensionKey: getExtensionKey(details)

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

@@ -53,7 +53,7 @@ export function CardWithUrlContent(_ref) {
   var showHoverPreviewFlag = useFeatureFlag('showHoverPreview');
 
   if (showHoverPreview === undefined && showHoverPreviewFlag !== undefined) {
-    showHoverPreview = showHoverPreviewFlag;
+    showHoverPreview = Boolean(showHoverPreviewFlag);
   } // Setup UI handlers.
 
 

package/dist/esm/view/EmbedModal/components/size-experiment/index.js

@@ -0,0 +1,28 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Modal from '../../../common/Modal';
+import { MAX_MODAL_SIZE, MIN_MODAL_SIZE } from '../../constants';
+
+var withSizeExperiment = function withSizeExperiment(Component) {
+  return function (props) {
+    var _props$featureFlags = props.featureFlags,
+        featureFlags = _props$featureFlags === void 0 ? {} : _props$featureFlags,
+        _props$closeLabel = props.closeLabel,
+        closeLabel = _props$closeLabel === void 0 ? 'Close Preview' : _props$closeLabel;
+    var embedModalSize = featureFlags.embedModalSize; // Experiment
+
+    if (embedModalSize === 'large' || embedModalSize === 'small') {
+      var size = embedModalSize === 'large' ? MAX_MODAL_SIZE : MIN_MODAL_SIZE;
+      return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+        size: size
+      }));
+    } // Control
+
+
+    return /*#__PURE__*/React.createElement(Modal, _extends({}, props, {
+      closeLabel: closeLabel
+    }));
+  };
+};
+
+export default withSizeExperiment;

package/dist/esm/view/EmbedModal/components/size-experiment/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -5,6 +5,7 @@ import LinkInfo from './components/link-info';
 import { MAX_MODAL_SIZE, MIN_MODAL_SIZE } from './constants';
 import EmbedContent from './components/embed-content';
 import withErrorBoundary from './components/error-boundary';
+import withSizeExperiment from './components/size-experiment';
 
 var EmbedModal = function EmbedModal(_ref) {
   var downloadUrl = _ref.download,
@@ -18,9 +19,11 @@ var EmbedModal = function EmbedModal(_ref) {
       onViewActionClick = _ref.onViewActionClick,
       providerName = _ref.providerName,
       showModal = _ref.showModal,
+      _ref$size = _ref.size,
+      defaultSize = _ref$size === void 0 ? MIN_MODAL_SIZE : _ref$size,
       src = _ref.src,
       _ref$testId = _ref.testId,
-      testId = _ref$testId === void 0 ? 'smart-links-preview-modal' : _ref$testId,
+      testId = _ref$testId === void 0 ? 'smart-embed-preview-modal' : _ref$testId,
       title = _ref.title,
       url = _ref.url;
 
@@ -29,7 +32,7 @@ var EmbedModal = function EmbedModal(_ref) {
       isOpen = _useState2[0],
       setIsOpen = _useState2[1];
 
-  var _useState3 = useState(MIN_MODAL_SIZE),
+  var _useState3 = useState(defaultSize),
       _useState4 = _slicedToArray(_useState3, 2),
       size = _useState4[0],
       setSize = _useState4[1];
@@ -67,4 +70,4 @@ var EmbedModal = function EmbedModal(_ref) {
   }))));
 };
 
-export default withErrorBoundary(EmbedModal);
+export default withSizeExperiment(withErrorBoundary(EmbedModal));

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

@@ -3,7 +3,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 
 /** @jsx jsx */
-import React from 'react';
+import React, { useEffect } from 'react';
 import { css, jsx } from '@emotion/core';
 import { ElementName, SmartLinkDirection, SmartLinkSize } from '../../../../../constants';
 import { getBaseStyles, getGapSize, highlightRemoveStyles, renderChildren } from '../utils';
@@ -28,11 +28,19 @@ var Block = function Block(_ref) {
       size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'smart-block' : _ref$testId,
-      overrideCss = _ref.overrideCss;
+      overrideCss = _ref.overrideCss,
+      blockRef = _ref.blockRef,
+      onRender = _ref.onRender,
+      onTransitionEnd = _ref.onTransitionEnd;
+  useEffect(function () {
+    onRender && onRender();
+  }, [onRender]);
   return jsx("div", {
     css: [getBlockStyles(direction, size), overrideCss],
     "data-smart-block": true,
-    "data-testid": testId
+    "data-testid": testId,
+    onTransitionEnd: onTransitionEnd,
+    ref: blockRef
   }, renderChildren(children, size));
 };