@atlaskit/smart-card 26.23.2 → 26.25.0

package/dist/es2019/state/analytics/useSmartLinkAnalytics.js

@@ -235,11 +235,11 @@ export const useSmartLinkAnalytics = (url, _dispatchAnalytics, id, defaultLocati
      * @param extensionKey The extensionKey of the Smart Link resovler invoked.
      * @param actionType The type of the action that was clicked, e.g. PreviewAction
      * @param display Whether the card was an Inline, Block, Embed or Flexible UI.
-     * @param invokeType Whether the action invoked made a call to a server.
+     * @param invokeType @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-2681 Internal documentation for deprecation (no external access)}
      * @returns
      */
     actionClickedEvent: ({
-      id: experienceId,
+      id,
       actionType,
       display,
       invokeType,
@@ -251,14 +251,8 @@ export const useSmartLinkAnalytics = (url, _dispatchAnalytics, id, defaultLocati
       location
     }) => {
       const extensionKey = overrideExtensionKey !== null && overrideExtensionKey !== void 0 ? overrideExtensionKey : extractedExtensionKey;
-      startUfoExperience('smart-link-action-invocation', experienceId, {
-        actionType,
-        display,
-        extensionKey,
-        invokeType
-      });
       dispatchAnalytics(applyCommonAttributes(uiActionClickedEvent({
-        id: defaultId,
+        id: id !== null && id !== void 0 ? id : defaultId,
         actionType,
         display,
         extensionKey,
@@ -507,7 +501,7 @@ export const useSmartLinkAnalytics = (url, _dispatchAnalytics, id, defaultLocati
      * @param display Whether the card was an Inline, Block, Embed or Flexible UI.
      */
     invokeSucceededEvent: ({
-      id: experienceId,
+      id,
       actionType,
       display,
       extensionKey,
@@ -517,9 +511,8 @@ export const useSmartLinkAnalytics = (url, _dispatchAnalytics, id, defaultLocati
       destinationSubproduct,
       location
     }) => {
-      succeedUfoExperience('smart-link-action-invocation', experienceId);
       dispatchAnalytics(applyCommonAttributes(invokeSucceededEvent({
-        id: defaultId,
+        id: id !== null && id !== void 0 ? id : defaultId,
         actionType,
         display,
         extensionKey,
@@ -539,7 +532,7 @@ export const useSmartLinkAnalytics = (url, _dispatchAnalytics, id, defaultLocati
      * @param reason The reason the invocation failed.
      */
     invokeFailedEvent: ({
-      id: experienceId,
+      id,
       actionType,
       display,
       reason,
@@ -550,9 +543,8 @@ export const useSmartLinkAnalytics = (url, _dispatchAnalytics, id, defaultLocati
       destinationSubproduct,
       location
     }) => {
-      failUfoExperience('smart-link-action-invocation', experienceId);
       dispatchAnalytics(applyCommonAttributes(invokeFailedEvent({
-        id: defaultId,
+        id: id !== null && id !== void 0 ? id : defaultId,
         actionType,
         display,
         reason,

package/dist/es2019/state/hooks/use-invoke-client-action/index.js

@@ -1,6 +1,9 @@
 import { useCallback } from 'react';
 import uuid from 'uuid';
 import * as measure from '../../../utils/performance';
+import { failUfoExperience, startUfoExperience, succeedUfoExperience } from '../../analytics';
+const ACTION_EXPERIENCE_NAME = 'smart-link-action-invocation';
+
 /**
  * Invoke client action such as preview, download and open link
  */
@@ -18,31 +21,34 @@ const useInvokeClientAction = ({
   const markName = `${experienceId}-${actionType}`;
   measure.mark(markName, 'pending');
   try {
-    // Begin analytics instrumentation.
-    analytics === null || analytics === void 0 ? void 0 : analytics.ui.actionClickedEvent({
-      id: experienceId,
-      extensionKey,
+    // Begin UFO experience
+    startUfoExperience(ACTION_EXPERIENCE_NAME, experienceId, {
       actionType,
       display,
+      extensionKey,
       invokeType: 'client'
     });
 
+    // Begin analytics instrumentation.
+    analytics === null || analytics === void 0 ? void 0 : analytics.ui.actionClickedEvent({
+      actionType,
+      display
+    });
+
     // Invoke action
     const result = await actionFn();
     measure.mark(markName, 'resolved');
+    succeedUfoExperience(ACTION_EXPERIENCE_NAME, experienceId);
     analytics === null || analytics === void 0 ? void 0 : analytics.operational.invokeSucceededEvent({
-      id: experienceId,
-      extensionKey,
       actionType,
       display
     });
     return result;
   } catch (err) {
     measure.mark(markName, 'errored');
+    failUfoExperience(ACTION_EXPERIENCE_NAME, experienceId);
     const reason = typeof err === 'string' ? err : err === null || err === void 0 ? void 0 : err.message;
     analytics === null || analytics === void 0 ? void 0 : analytics.operational.invokeFailedEvent({
-      id: experienceId,
-      extensionKey,
       actionType,
       display,
       reason

package/dist/es2019/utils/analytics/analytics.js

@@ -3,7 +3,7 @@ export const ANALYTICS_CHANNEL = 'media';
 export const context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.23.2"
+  packageVersion: "26.25.0"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -30,6 +30,7 @@ const FlexibleErroredView = ({
   const status = cardState.status;
   const actions = useMemo(() => onAuthorize ? [RetryAction(onAuthorize)] : [], [onAuthorize]);
   return /*#__PURE__*/React.createElement(FlexibleCard, {
+    appearance: "block",
     cardState: cardState,
     onAuthorize: onAuthorize,
     onClick: onClick,

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

@@ -4,8 +4,7 @@ import FlexibleCard from '../../../FlexibleCard';
 import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
 import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock } from '../../../FlexibleCard/components/blocks';
 import { metadataBlockCss, footerBlockCss } from './styled';
-import { ActionName, CardDisplay, ElementName, MediaPlacement, SmartLinkPosition } from '../../../../constants';
-import uuid from 'uuid';
+import { ActionName, ElementName, MediaPlacement, SmartLinkPosition } from '../../../../constants';
 import { getSimulatedMetadata, getSimulatedBetterMetadata } from './utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
@@ -32,7 +31,6 @@ const FlexibleResolvedView = ({
   useEffect(() => {
     setIsPreviewBlockErrored(false);
   }, [url, cardState]);
-  const [analyticsId] = useState(() => id ? id : uuid());
   const {
     titleMetadata,
     topMetadata,
@@ -80,49 +78,13 @@ const FlexibleResolvedView = ({
   }, {
     actions: [{
       name: ActionName.PreviewAction,
-      hideIcon: true,
-      onClick: () => {
-        analytics.ui.actionClickedEvent({
-          id: analyticsId,
-          actionType: 'PreviewAction',
-          display: CardDisplay.Block
-        });
-        analytics.operational.invokeSucceededEvent({
-          id: analyticsId,
-          actionType: 'PreviewAction',
-          display: CardDisplay.Block
-        });
-      }
+      hideIcon: true
     }, {
       name: ActionName.ViewAction,
-      hideIcon: true,
-      onClick: () => {
-        analytics.ui.actionClickedEvent({
-          id: analyticsId,
-          actionType: 'ViewAction',
-          display: CardDisplay.Block
-        });
-        analytics.operational.invokeSucceededEvent({
-          id: analyticsId,
-          actionType: 'ViewAction',
-          display: CardDisplay.Block
-        });
-      }
+      hideIcon: true
     }, {
       name: ActionName.DownloadAction,
-      hideIcon: true,
-      onClick: () => {
-        analytics.ui.actionClickedEvent({
-          id: analyticsId,
-          actionType: 'DownloadAction',
-          display: CardDisplay.Block
-        });
-        analytics.operational.invokeSucceededEvent({
-          id: analyticsId,
-          actionType: 'DownloadAction',
-          display: CardDisplay.Block
-        });
-      }
+      hideIcon: true
     }]
   })));
 };

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

@@ -23,6 +23,15 @@ export const titleBlockCss = css`
 `;
 export const footerBlockCss = css`
   height: 1.5rem;
+
+  .actions-button-group {
+    button,
+    button:hover,
+    button:focus,
+    button:active {
+      font-size: 0.875rem;
+    }
+  }
 `;
 const flexibleBlockCardElevationStyle = css`
   border-radius: 1.5px;
@@ -31,7 +40,7 @@ const flexibleBlockCardElevationStyle = css`
 `;
 const refreshedFlexibleBlockCardStyle = css`
   & > div {
-    border-radius: ${"var(--ds-border-radius-300, 12px)"};
+    border-radius: ${"var(--ds-border-radius-200, 8px)"};
     border: 1px solid ${`var(--ds-border-input, ${N40})`};
   }
 `;

package/dist/es2019/view/EmbedCard/components/styled.js

@@ -11,10 +11,10 @@ export const borderRadius = `
 `;
 const BACKGROUND_COLOR_DARK = '#262B31';
 const wrapperBorderRadius = `
-  border-radius: ${"var(--ds-border-radius-400, 16px)"};
+  border-radius: ${"var(--ds-border-radius-200, 8px)"};
 `;
 const contentBorderRadius = `
-  border-radius: ${"var(--ds-border-radius-300, 12px)"};
+  border-radius: ${"var(--ds-border-radius-100, 4px)"};
 `;
 export const ellipsis = (maxWidth = '100%') => {
   const unit = typeof maxWidth === 'number' ? 'px' : '';

package/dist/es2019/view/FlexibleCard/components/actions/action/download-action/index.js

@@ -2,6 +2,9 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import Action from '../index';
 import { downloadUrl as download } from '../../../../../../utils';
+import { ActionName } from '../../../../../../constants';
+import useInvokeClientAction from '../../../../../../state/hooks/use-invoke-client-action';
+import { useFlexibleUiAnalyticsContext } from '../../../../../../state/flexible-ui-context';
 const DownloadAction = props => {
   const {
     appearance,
@@ -11,11 +14,22 @@ const DownloadAction = props => {
     testId,
     url
   } = props;
+  const analytics = useFlexibleUiAnalyticsContext();
+  const invoke = useInvokeClientAction({
+    analytics
+  });
   if (downloadUrl && url) {
     const action = {
       ...props,
       onClick: () => {
-        download(downloadUrl);
+        invoke({
+          actionType: ActionName.DownloadAction,
+          actionFn: async () => download(downloadUrl),
+          // These values have already been set in analytics context.
+          // We only pass these here for ufo experience.
+          display: analytics === null || analytics === void 0 ? void 0 : analytics.display,
+          extensionKey: analytics === null || analytics === void 0 ? void 0 : analytics.extensionKey
+        });
         if (onClick) {
           onClick();
         }

package/dist/es2019/view/FlexibleCard/components/actions/action/preview-action/index.js

@@ -2,10 +2,11 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import Action from '../index';
 import { useFlexibleUiAnalyticsContext } from '../../../../../../state/flexible-ui-context';
-import { useSmartLinkAnalytics } from '../../../../../../state';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '../../../../../../messages';
 import { openEmbedModalWithFlexibleUiIcon } from '../../../utils';
+import useInvokeClientAction from '../../../../../../state/hooks/use-invoke-client-action';
+import { ActionName } from '../../../../../../constants';
 const PreviewAction = props => {
   const {
     appearance,
@@ -20,22 +21,32 @@ const PreviewAction = props => {
     downloadUrl,
     isSupportTheming
   } = props;
-  const defaultAnalytics = useSmartLinkAnalytics(url, () => {});
-  const analytics = useFlexibleUiAnalyticsContext() || defaultAnalytics;
+  const analytics = useFlexibleUiAnalyticsContext();
+  const invoke = useInvokeClientAction({
+    analytics
+  });
   if (src && url) {
-    const embedModal = () => openEmbedModalWithFlexibleUiIcon({
+    const actionFn = async () => openEmbedModalWithFlexibleUiIcon({
+      download: downloadUrl,
       title,
       providerName,
-      downloadUrl,
       isSupportTheming,
       analytics,
       linkIcon,
-      src
+      src,
+      url
     });
     const action = {
       ...props,
       onClick: () => {
-        embedModal();
+        invoke({
+          actionType: ActionName.PreviewAction,
+          actionFn,
+          // These values have already been set in analytics context.
+          // We only pass these here for ufo experience.
+          display: analytics === null || analytics === void 0 ? void 0 : analytics.display,
+          extensionKey: analytics === null || analytics === void 0 ? void 0 : analytics.extensionKey
+        });
         if (onClick) {
           onClick();
         }

package/dist/es2019/view/FlexibleCard/components/actions/action/server-action/index.js

@@ -18,10 +18,10 @@ const ServerAction = ({
         setIsLoading(true);
         const request = createInvokeRequest(action);
         await invoke(request);
-        setIsLoading(false);
         if (action.reload && action.reload.url) {
           await reload(action.reload.url, true, undefined, action.reload.id);
         }
+        setIsLoading(false);
         if (onClick) {
           onClick();
         }

package/dist/es2019/view/FlexibleCard/components/actions/action/view-action/index.js

@@ -2,6 +2,9 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import Action from '../index';
 import { openUrl } from '../../../../../../utils';
+import { ActionName } from '../../../../../../constants';
+import { useFlexibleUiAnalyticsContext } from '../../../../../../state/flexible-ui-context';
+import useInvokeClientAction from '../../../../../../state/hooks/use-invoke-client-action';
 const ViewAction = props => {
   const {
     appearance,
@@ -11,11 +14,22 @@ const ViewAction = props => {
     viewUrl,
     url
   } = props;
+  const analytics = useFlexibleUiAnalyticsContext();
+  const invoke = useInvokeClientAction({
+    analytics
+  });
   if (viewUrl && url) {
     const action = {
       ...props,
       onClick: () => {
-        openUrl(viewUrl);
+        invoke({
+          actionType: ActionName.ViewAction,
+          actionFn: async () => openUrl(viewUrl),
+          // These values have already been set in analytics context.
+          // We only pass these here for ufo experience.
+          display: analytics === null || analytics === void 0 ? void 0 : analytics.display,
+          extensionKey: analytics === null || analytics === void 0 ? void 0 : analytics.extensionKey
+        });
         if (onClick) {
           onClick();
         }

package/dist/es2019/view/FlexibleCard/components/actions/follow-action/index.js

@@ -0,0 +1,31 @@
+import _extends from "@babel/runtime/helpers/extends";
+import InviteTeamIcon from '@atlaskit/icon/glyph/invite-team';
+import React, { useContext } from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { messages } from '../../../../../messages';
+import { FlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import ServerAction from '../action/server-action';
+import UnfollowIcon from './unfollow-icon';
+const FollowAction = props => {
+  const context = useContext(FlexibleUiContext);
+  if (!context || !context.followAction) {
+    return null;
+  }
+  const {
+    value,
+    ...data
+  } = context.followAction;
+  const message = value ? messages.follow : messages.unfollow;
+  const icon = value ? /*#__PURE__*/React.createElement(InviteTeamIcon, {
+    label: "Follow"
+  }) : /*#__PURE__*/React.createElement(UnfollowIcon, {
+    label: "Unfollow"
+  });
+  return /*#__PURE__*/React.createElement(ServerAction, _extends({
+    content: /*#__PURE__*/React.createElement(FormattedMessage, message),
+    icon: icon,
+    testId: "smart-action-follow-action",
+    tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, message)
+  }, data, props));
+};
+export default FollowAction;

package/dist/es2019/view/FlexibleCard/components/actions/follow-action/unfollow-icon/index.js

@@ -0,0 +1,28 @@
+import _extends from "@babel/runtime/helpers/extends";
+import Icon from '@atlaskit/icon';
+import React from 'react';
+const UnfollowGlyph = props => /*#__PURE__*/React.createElement("svg", {
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  "data-testid": props['data-testid'],
+  "aria-label": props['aria-label'],
+  className: props.className,
+  role: "presentation",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M14 4.66667H11.3333C10.9652 4.66667 10.6667 4.96514 10.6667 5.33333C10.6667 5.70152 10.9652 6 11.3333 6H14C14.3682 6 14.6667 5.70152 14.6667 5.33333C14.6667 4.96514 14.3682 4.66667 14 4.66667Z",
+  fill: "currentColor"
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M3.33334 9.33333C3.33334 8.59667 3.93468 8 4.67268 8H9.99401C10.734 8 11.3333 8.596 11.3333 9.33733V12.2973C11.3333 14.5673 3.33334 14.5673 3.33334 12.2973V9.33333Z",
+  fill: "currentColor"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M7.33334 7.33333C8.8061 7.33333 10 6.13943 10 4.66667C10 3.19391 8.8061 2 7.33334 2C5.86058 2 4.66668 3.19391 4.66668 4.66667C4.66668 6.13943 5.86058 7.33333 7.33334 7.33333Z",
+  fill: "currentColor"
+}));
+const UnfollowIcon = props => /*#__PURE__*/React.createElement(Icon, _extends({
+  glyph: UnfollowGlyph
+}, props));
+export default UnfollowIcon;

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

@@ -1,8 +1,11 @@
 import { ActionName } from '../../../../constants';
 import { createDataAction, createUIAction } from './utils';
+export { default as FollowAction } from './follow-action';
+
 // Attention: Keep the export name and action name the same.
 // This will help reducing the code for mapping action inside
 // createAction and renderActionItems
+
 /**
  * Creates a DeleteAction component. Accepts default ActionProps, but defaults
  * the icon to a cross icon.

package/dist/es2019/view/FlexibleCard/components/blocks/action-group/index.js

@@ -6,13 +6,14 @@ import { css, jsx } from '@emotion/react';
 import ButtonGroup from '@atlaskit/button/button-group';
 import Tooltip from '@atlaskit/tooltip';
 import DropdownMenu from '@atlaskit/dropdown-menu';
-import { ActionName, SmartLinkSize } from '../../../../../constants';
+import { SmartLinkSize } from '../../../../../constants';
 import Button from '@atlaskit/button/standard-button';
 import MoreIcon from '@atlaskit/icon/glyph/more';
 import { sizeToButtonSpacing } from '../../utils';
 import { messages } from '../../../../../messages';
 import { useFlexibleUiContext, useFlexibleUiOptionContext } from '../../../../../state/flexible-ui-context';
 import ActionGroupItem from './action-group-item';
+import { filterActionItems } from '../utils';
 const styles = css`
   display: inline-flex;
   line-height: 1rem;
@@ -37,22 +38,6 @@ const renderActionItems = (items = [], size = SmartLinkSize.Medium, appearance,
   asDropDownItems: asDropDownItems,
   onActionItemClick: onActionItemClick
 }));
-const filterActionItems = (items = [], context) => {
-  return items.filter(item => {
-    switch (item.name) {
-      // Action that require data from the data context to render.
-      case ActionName.DownloadAction:
-        return Boolean(context === null || context === void 0 ? void 0 : context.downloadAction);
-      case ActionName.PreviewAction:
-        return Boolean(context === null || context === void 0 ? void 0 : context.previewAction);
-      case ActionName.ViewAction:
-        return Boolean(context === null || context === void 0 ? void 0 : context.viewAction);
-      default:
-        // Named and custom actions that user defines.
-        return Boolean(ActionName[item.name]);
-    }
-  });
-};
 
 /**
  * Creates a group of Action components. Accepts an array of Actions, in addition to some styling

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

@@ -1,11 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useCallback } from 'react';
+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
@@ -32,6 +34,11 @@ const FooterBlock = props => {
     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({
@@ -46,7 +53,7 @@ const FooterBlock = props => {
     testId: `${testId}-resolved-view`
   }), /*#__PURE__*/React.createElement(Provider, {
     testId: `${testId}-provider`
-  }), actions && actions.length > 0 ? /*#__PURE__*/React.createElement(ElementGroup, {
+  }), actions && hasActions ? /*#__PURE__*/React.createElement(ElementGroup, {
     testId: "smart-element-group-actions",
     align: SmartLinkAlignment.Right,
     direction: SmartLinkDirection.Horizontal,

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { css } from '@emotion/react';
-import { ElementName, SmartLinkDirection, SmartLinkSize } from '../../../../constants';
+import { ActionName, ElementName, SmartLinkDirection, SmartLinkSize } from '../../../../constants';
 import * as Elements from '../elements';
 import { isFlexibleUiElement } from '../../../../utils/flexible';
 import ActionGroup from './action-group';
@@ -111,6 +111,24 @@ export const isJSXElementNull = children => {
   return Boolean(children.type() === null);
 };
 const isElementOrElementGroup = node => /*#__PURE__*/React.isValidElement(node) && (isFlexibleUiElement(node) || node.type === ElementGroup);
+export const filterActionItems = (items = [], context) => {
+  return items.filter(item => {
+    switch (item.name) {
+      // Action that require data from the data context to render.
+      case ActionName.DownloadAction:
+        return Boolean(context === null || context === void 0 ? void 0 : context.downloadAction);
+      case ActionName.FollowAction:
+        return Boolean(context === null || context === void 0 ? void 0 : context.followAction);
+      case ActionName.PreviewAction:
+        return Boolean(context === null || context === void 0 ? void 0 : context.previewAction);
+      case ActionName.ViewAction:
+        return Boolean(context === null || context === void 0 ? void 0 : context.viewAction);
+      default:
+        // Named and custom actions that user defines.
+        return Boolean(ActionName[item.name]);
+    }
+  });
+};
 export const renderChildren = (children, size) => React.Children.map(children, child => {
   if (isElementOrElementGroup(child) || isActionGroup(child)) {
     const node = child;

package/dist/es2019/view/FlexibleCard/components/utils.js

@@ -142,15 +142,8 @@ export const hasWhiteSpace = str => {
   return str.search(/\s/) >= 0;
 };
 export const openEmbedModalWithFlexibleUiIcon = ({
-  analytics,
-  downloadUrl,
   linkIcon,
-  onClose,
-  providerName,
-  src,
-  title,
-  url,
-  isSupportTheming
+  ...props
 }) => {
   const icon = {
     icon: /*#__PURE__*/React.createElement(Icon, _extends({}, linkIcon, {
@@ -159,18 +152,11 @@ export const openEmbedModalWithFlexibleUiIcon = ({
     isFlexibleUi: true
   };
   return openEmbedModal({
-    analytics,
-    download: downloadUrl,
+    ...props,
     icon,
     // Flex should not send origin as block card. It should be able to support
     // its internal parent components like hover card, block card and
     // itself as a standalone. To be investigated and fix in EDM-7520.
-    origin: 'smartLinkCard',
-    providerName,
-    onClose,
-    src,
-    title,
-    url,
-    isSupportTheming
+    origin: 'smartLinkCard'
   });
 };

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

@@ -13,6 +13,7 @@ import { getContextByStatus, getRetryOptions } from './utils';
  */
 const FlexibleCard = ({
   analytics,
+  appearance = 'flexible',
   cardState,
   children,
   id,
@@ -28,6 +29,7 @@ const FlexibleCard = ({
   ui,
   url
 }) => {
+  var _details$meta2;
   const {
     status: cardType,
     details
@@ -45,6 +47,14 @@ const FlexibleCard = ({
   const {
     title
   } = context || {};
+  const analyticsContext = useMemo(() => {
+    var _details$meta;
+    return analytics ? {
+      ...analytics,
+      display: appearance,
+      extensionKey: details === null || details === void 0 ? void 0 : (_details$meta = details.meta) === null || _details$meta === void 0 ? void 0 : _details$meta.key
+    } : undefined;
+  }, [analytics, appearance, details === null || details === void 0 ? void 0 : (_details$meta2 = details.meta) === null || _details$meta2 === void 0 ? void 0 : _details$meta2.key]);
   useEffect(() => {
     switch (status) {
       case SmartLinkStatus.Resolved:
@@ -70,7 +80,7 @@ const FlexibleCard = ({
     }
   }, [onError, onResolve, status, title, url]);
   return /*#__PURE__*/React.createElement(FlexibleUiAnalyticsContext.Provider, {
-    value: analytics
+    value: analyticsContext
   }, /*#__PURE__*/React.createElement(FlexibleUiOptionContext.Provider, {
     value: ui
   }, /*#__PURE__*/React.createElement(FlexibleUiContext.Provider, {

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

@@ -111,6 +111,7 @@ const HoverCardContent = ({
     subtitle: subtitle
   };
   const flexibleCardProps = {
+    appearance: CardDisplay.HoverCardPreview,
     cardState: cardState,
     onClick: onClick,
     onResolve: onResolve,