@atlaskit/smart-card 40.11.0 → 40.12.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/smart-card
 
+## 40.12.0
+
+### Minor Changes
+
+- [`4b9dfa0c0bf0d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4b9dfa0c0bf0d) -
+  [ux] Adds support for preview panel triggers to the hover card
+
 ## 40.11.0
 
 ### Minor Changes

package/dist/cjs/extractors/action/extract-invoke-preview-action.js

@@ -8,6 +8,7 @@ exports.extractInvokePreviewAction = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _linkExtractors = require("@atlaskit/link-extractors");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _index = require("../../index");
 var _helpers = require("../../state/helpers");
 var _canShowAction = require("../../utils/actions/can-show-action");
@@ -25,54 +26,80 @@ var extractInvokePreviewAction = exports.extractInvokePreviewAction = function e
     onClose = param.onClose,
     id = param.id,
     origin = param.origin,
-    response = param.response;
+    response = param.response,
+    isPreviewPanelAvailable = param.isPreviewPanelAvailable,
+    openPreviewPanel = param.openPreviewPanel;
+  var ari = (0, _linkExtractors.extractSmartLinkAri)(response);
+  var url = (0, _linkExtractors.extractSmartLinkUrl)(response);
+  var name = (0, _linkExtractors.extractSmartLinkTitle)(response);
+  var hasPreviewPanelParams = Boolean((0, _expValEquals.expValEquals)('platform_hover_card_preview_panel', 'cohort', 'test') && isPreviewPanelAvailable && openPreviewPanel && ari && url && name);
+  var hasPreviewPanel = hasPreviewPanelParams && isPreviewPanelAvailable({
+    ari: ari
+  });
+  var data = response.data;
+  var meta = response.meta;
   if (!(0, _canShowAction.canShowAction)(_index.CardAction.PreviewAction, actionOptions)) {
     return;
   }
-  var data = response.data;
-  var meta = response.meta;
   var src = (_extractPreviewData = (0, _linkExtractors.extractPreview)(data, 'web')) === null || _extractPreviewData === void 0 ? void 0 : _extractPreviewData.src;
   if (src) {
     var extensionKey = (0, _helpers.getExtensionKey)(response);
     return {
-      actionFn: function () {
-        var _actionFn = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-          var _extractSmartLinkProv, _extractSmartLinkEmbe;
-          return _regenerator.default.wrap(function _callee$(_context) {
-            while (1) switch (_context.prev = _context.next) {
-              case 0:
-                return _context.abrupt("return", (0, _utils.openEmbedModal)({
-                  fireEvent: fireEvent,
-                  extensionKey: extensionKey,
-                  id: id,
-                  invokeDownloadAction: (0, _extractInvokeDownloadAction.extractInvokeDownloadAction)(param),
-                  invokeViewAction: (0, _extractInvokeViewAction.extractInvokeViewAction)(param, true),
-                  isSupportTheming: (0, _extractIsSupportTheming.extractIsSupportTheming)(meta),
-                  isTrusted: (0, _extractIsTrusted.extractIsTrusted)(meta),
-                  linkIcon: (0, _icon.extractLinkIcon)(response),
-                  providerName: (_extractSmartLinkProv = (0, _linkExtractors.extractSmartLinkProvider)(response)) === null || _extractSmartLinkProv === void 0 ? void 0 : _extractSmartLinkProv.text,
-                  onClose: onClose,
-                  origin: origin,
-                  src: (_extractSmartLinkEmbe = (0, _linkExtractors.extractSmartLinkEmbed)(response)) === null || _extractSmartLinkEmbe === void 0 ? void 0 : _extractSmartLinkEmbe.src,
-                  title: (0, _linkExtractors.extractSmartLinkTitle)(response),
-                  url: (0, _linkExtractors.extractSmartLinkUrl)(response)
-                }));
-              case 1:
-              case "end":
-                return _context.stop();
-            }
-          }, _callee);
-        }));
-        function actionFn() {
-          return _actionFn.apply(this, arguments);
-        }
-        return actionFn;
-      }(),
-      actionSubjectId: 'invokePreviewScreen',
-      actionType: _index.ActionName.PreviewAction,
-      display: display,
-      extensionKey: extensionKey,
-      id: id
+      invokeAction: {
+        actionFn: function () {
+          var _actionFn = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+            var _extractSmartLinkProv, _extractSmartLinkEmbe;
+            return _regenerator.default.wrap(function _callee$(_context) {
+              while (1) switch (_context.prev = _context.next) {
+                case 0:
+                  if (!hasPreviewPanel) {
+                    _context.next = 4;
+                    break;
+                  }
+                  openPreviewPanel({
+                    ari: ari,
+                    url: url,
+                    name: name,
+                    iconUrl: undefined
+                  });
+                  _context.next = 6;
+                  break;
+                case 4:
+                  _context.next = 6;
+                  return (0, _utils.openEmbedModal)({
+                    fireEvent: fireEvent,
+                    extensionKey: extensionKey,
+                    id: id,
+                    invokeDownloadAction: (0, _extractInvokeDownloadAction.extractInvokeDownloadAction)(param),
+                    invokeViewAction: (0, _extractInvokeViewAction.extractInvokeViewAction)(param, true),
+                    isSupportTheming: (0, _extractIsSupportTheming.extractIsSupportTheming)(meta),
+                    isTrusted: (0, _extractIsTrusted.extractIsTrusted)(meta),
+                    linkIcon: (0, _icon.extractLinkIcon)(response),
+                    providerName: (_extractSmartLinkProv = (0, _linkExtractors.extractSmartLinkProvider)(response)) === null || _extractSmartLinkProv === void 0 ? void 0 : _extractSmartLinkProv.text,
+                    onClose: onClose,
+                    origin: origin,
+                    src: (_extractSmartLinkEmbe = (0, _linkExtractors.extractSmartLinkEmbed)(response)) === null || _extractSmartLinkEmbe === void 0 ? void 0 : _extractSmartLinkEmbe.src,
+                    title: (0, _linkExtractors.extractSmartLinkTitle)(response),
+                    url: url
+                  });
+                case 6:
+                case "end":
+                  return _context.stop();
+              }
+            }, _callee);
+          }));
+          function actionFn() {
+            return _actionFn.apply(this, arguments);
+          }
+          return actionFn;
+        }(),
+        actionSubjectId: 'invokePreviewScreen',
+        actionType: _index.ActionName.PreviewAction,
+        display: display,
+        extensionKey: extensionKey,
+        id: id
+      },
+      hasPreviewPanel: hasPreviewPanel
     };
   }
 };

package/dist/cjs/extractors/flexible/actions/extract-preview-action.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.extractPreviewClientAction = void 0;
 var _extractInvokePreviewAction = require("../../action/extract-invoke-preview-action");
 var extractPreviewClientAction = exports.extractPreviewClientAction = function extractPreviewClientAction(param) {
-  var invokeAction = (0, _extractInvokePreviewAction.extractInvokePreviewAction)(param);
-  return invokeAction ? {
-    invokeAction: invokeAction
-  } : undefined;
+  var result = (0, _extractInvokePreviewAction.extractInvokePreviewAction)(param);
+  return result ? result : undefined;
 };

package/dist/cjs/extractors/flexible/actions/index.js

@@ -22,7 +22,9 @@ var extractFlexibleCardActions = exports.extractFlexibleCardActions = function e
     id = _ref.id,
     origin = _ref.origin,
     response = _ref.response,
-    url = _ref.url;
+    url = _ref.url,
+    isPreviewPanelAvailable = _ref.isPreviewPanelAvailable,
+    openPreviewPanel = _ref.openPreviewPanel;
   var action = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _constants.ActionName.CopyLinkAction, (0, _extractCopyLinkAction.extractCopyLinkClientAction)({
     actionOptions: actionOptions,
     appearance: appearance,
@@ -39,7 +41,9 @@ var extractFlexibleCardActions = exports.extractFlexibleCardActions = function e
     fireEvent: fireEvent,
     id: id,
     origin: origin,
-    response: response
+    response: response,
+    isPreviewPanelAvailable: isPreviewPanelAvailable,
+    openPreviewPanel: openPreviewPanel
   })), _constants.ActionName.AutomationAction, (0, _extractAutomationAction.extractAutomationAction)(response)), _constants.InternalActionName.AISummaryAction, (0, _extractAiSummaryAction.extractAISummaryAction)(response, url, actionOptions, aiSummaryConfig)), _constants.InternalActionName.ViewRelatedLinksAction, (0, _extractViewRelatedLinksAction.extractViewRelatedLinksAction)(response));
   return Object.values(action).some(function (value) {
     return Boolean(value);

package/dist/cjs/extractors/flexible/extract-state.js

@@ -28,8 +28,8 @@ var toInvokeRequest = function toInvokeRequest(extensionKey, resourceIdentifiers
     details: details
   };
 };
-var extractAction = function extractAction(response, id, actionOptions, appearance, origin, fireEvent, resolve) {
-  var _action$dataRetrieval, _action$dataUpdateAct;
+var extractAction = function extractAction(response, id, actionOptions, appearance, origin, fireEvent, resolve, isPreviewPanelAvailable, openPreviewPanel) {
+  var _action$dataRetrieval, _extractInvokePreview, _action$dataUpdateAct;
   var extensionKey = (0, _helpers.getExtensionKey)(response);
   var data = response === null || response === void 0 ? void 0 : response.data;
   var actions = (0, _extractServerAction.default)(data);
@@ -44,7 +44,7 @@ var extractAction = function extractAction(response, id, actionOptions, appearan
   }
   var read = toInvokeRequest(extensionKey, action.resourceIdentifiers, (_action$dataRetrieval = action.dataRetrievalAction) === null || _action$dataRetrieval === void 0 ? void 0 : _action$dataRetrieval.name);
   var url = (0, _linkExtractors.extractLink)(data);
-  var invokePreviewAction = response ? (0, _extractInvokePreviewAction.extractInvokePreviewAction)({
+  var invokePreviewAction = response ? (_extractInvokePreview = (0, _extractInvokePreviewAction.extractInvokePreviewAction)({
     actionOptions: actionOptions,
     appearance: appearance,
     fireEvent: fireEvent,
@@ -53,8 +53,10 @@ var extractAction = function extractAction(response, id, actionOptions, appearan
       return url && resolve(url, true);
     } : undefined,
     origin: origin,
-    response: response
-  }) : undefined;
+    response: response,
+    isPreviewPanelAvailable: isPreviewPanelAvailable,
+    openPreviewPanel: openPreviewPanel
+  })) === null || _extractInvokePreview === void 0 ? void 0 : _extractInvokePreview.invokeAction : undefined;
   var details = {
     id: id,
     url: url,
@@ -66,7 +68,7 @@ var extractAction = function extractAction(response, id, actionOptions, appearan
     update: update
   } : undefined;
 };
-var extractState = function extractState(response, actionOptions, id, appearance, origin, fireEvent, resolve) {
+var extractState = function extractState(response, actionOptions, id, appearance, origin, fireEvent, resolve, isPreviewPanelAvailable, openPreviewPanel) {
   if (!response || !response.data) {
     return;
   }
@@ -77,7 +79,7 @@ var extractState = function extractState(response, actionOptions, id, appearance
   if (!(0, _canShowAction.canShowAction)(_types.CardAction.ChangeStatusAction, actionOptions)) {
     return lozenge;
   }
-  var action = extractAction(response, id, actionOptions, appearance, origin, fireEvent, resolve);
+  var action = extractAction(response, id, actionOptions, appearance, origin, fireEvent, resolve, isPreviewPanelAvailable, openPreviewPanel);
   return _objectSpread(_objectSpread({}, lozenge), {}, {
     action: action
   });

package/dist/cjs/extractors/flexible/index.js

@@ -20,7 +20,7 @@ var _icon = require("./icon");
 var _extractProviderIcon = require("./icon/extract-provider-icon");
 var _latestCommit = require("./latest-commit");
 var _utils = require("./utils");
-var _excluded = ["appearance", "fireEvent", "id", "onClick", "origin", "renderers", "resolve", "actionOptions", "response", "status", "aiSummaryConfig"];
+var _excluded = ["appearance", "fireEvent", "id", "onClick", "origin", "renderers", "resolve", "actionOptions", "response", "status", "aiSummaryConfig", "isPreviewPanelAvailable", "openPreviewPanel"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var extractFlexibleUiContext = function extractFlexibleUiContext() {
@@ -36,6 +36,8 @@ var extractFlexibleUiContext = function extractFlexibleUiContext() {
     response = _ref.response,
     status = _ref.status,
     aiSummaryConfig = _ref.aiSummaryConfig,
+    isPreviewPanelAvailable = _ref.isPreviewPanelAvailable,
+    openPreviewPanel = _ref.openPreviewPanel,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   if (!response) {
     return undefined;
@@ -52,7 +54,10 @@ var extractFlexibleUiContext = function extractFlexibleUiContext() {
       id: id,
       origin: origin,
       response: response,
-      url: props.url // Use the original URL in edge cases, such as short links for AI summary and copy link actions.
+      url: props.url,
+      // Use the original URL in edge cases, such as short links for AI summary and copy link actions.
+      isPreviewPanelAvailable: isPreviewPanelAvailable,
+      openPreviewPanel: openPreviewPanel
     }),
     appliedToComponentsCount: (0, _utils.extractAppliedToComponentsCount)(data),
     assignedToGroup: (0, _utils.extractPersonAssignedToAsArray)(data),
@@ -85,7 +90,7 @@ var extractFlexibleUiContext = function extractFlexibleUiContext() {
     snippet: (0, _extractSummary.extractSmartLinkSummary)(response) || undefined,
     // Explicitly set here to remove an empty string
     sourceBranch: (0, _utils.extractSourceBranch)(data),
-    state: (0, _extractState.default)(response, actionOptions, id, appearance, origin, fireEvent, resolve),
+    state: (0, _extractState.default)(response, actionOptions, id, appearance, origin, fireEvent, resolve, isPreviewPanelAvailable, openPreviewPanel),
     subscriberCount: (0, _utils.extractSubscriberCount)(data),
     subTasksProgress: (0, _utils.extractSubTasksProgress)(data),
     storyPoints: (0, _utils.extractStoryPoints)(data),

package/dist/cjs/messages.js

@@ -390,6 +390,16 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Open preview',
     description: 'Click to view a richer view of your content, without needing to navigate to it.'
   },
+  preview_modal: {
+    id: 'fabric.linking.preview_modal',
+    defaultMessage: 'Open preview modal',
+    description: 'Button used to view a modal view of your content without needing to navigate to it.'
+  },
+  preview_panel: {
+    id: 'fabric.linking.preview_panel',
+    defaultMessage: 'Open preview panel',
+    description: 'Button used to view a side panel view of your content without needing to navigate to it.'
+  },
   preview_close: {
     id: 'fabric.linking.preview_close',
     defaultMessage: 'Close preview',

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

@@ -8,6 +8,7 @@ exports.useSmartLinkActions = useSmartLinkActions;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _uuid = _interopRequireDefault(require("uuid"));
+var _linkProvider = require("@atlaskit/link-provider");
 var _useAnalyticsEvents2 = require("../../common/analytics/generated/use-analytics-events");
 var _extractInvokeDownloadAction = require("../../extractors/action/extract-invoke-download-action");
 var _extractInvokePreviewAction = require("../../extractors/action/extract-invoke-preview-action");
@@ -29,6 +30,9 @@ function useSmartLinkActions(_ref) {
   var linkState = (0, _store.useSmartCardState)(url);
   var _useAnalyticsEvents = (0, _useAnalyticsEvents2.useAnalyticsEvents)(),
     fireEvent = _useAnalyticsEvents.fireEvent;
+  var _useSmartLinkContext = (0, _linkProvider.useSmartLinkContext)(),
+    isPreviewPanelAvailable = _useSmartLinkContext.isPreviewPanelAvailable,
+    openPreviewPanel = _useSmartLinkContext.openPreviewPanel;
   var invokeClientAction = (0, _useInvokeClientAction.default)({
     fireEvent: fireEvent
   });
@@ -50,10 +54,12 @@ function useSmartLinkActions(_ref) {
     }
     var previewActionProps = (0, _extractInvokePreviewAction.extractInvokePreviewAction)(_objectSpread(_objectSpread({}, invokeParam), {}, {
       fireEvent: fireEvent,
-      origin: origin
+      origin: origin,
+      isPreviewPanelAvailable: isPreviewPanelAvailable,
+      openPreviewPanel: openPreviewPanel
     }));
     if (previewActionProps) {
-      actions.push((0, _toAction.toAction)(previewActionProps, invokeClientAction, _messages.messages.preview_improved, 'preview-content'));
+      actions.push((0, _toAction.toAction)(previewActionProps.invokeAction, invokeClientAction, _messages.messages.preview_improved, 'preview-content'));
     }
     return actions;
   }

package/dist/cjs/utils/analytics/analytics.js

@@ -11,7 +11,7 @@ var ANALYTICS_CHANNEL = exports.ANALYTICS_CHANNEL = 'media';
 var context = exports.context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "40.10.10"
+  packageVersion: "40.11.0"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -135,6 +135,7 @@ function Component(_ref) {
           clickOutcome: 'previewPanel'
         }
       });
+      return;
     } else if (!onClick && !isFlexibleUi) {
       var clickUrl = (0, _helpers.getClickUrl)(url, state.details);
 

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

@@ -11,6 +11,8 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _growDiagonalMediaServicesActualSize = _interopRequireDefault(require("@atlaskit/icon/core/migration/grow-diagonal--media-services-actual-size"));
+var _panelRight = _interopRequireDefault(require("@atlaskit/icon/core/panel-right"));
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _constants = require("../../../../../constants");
 var _messages = require("../../../../../messages");
 var _flexibleUiContext = require("../../../../../state/flexible-ui-context");
@@ -25,6 +27,7 @@ var PreviewAction = function PreviewAction(_ref) {
   var context = (0, _flexibleUiContext.useFlexibleUiContext)();
   var invoke = (0, _useInvokeClientAction.default)({});
   var data = context === null || context === void 0 || (_context$actions = context.actions) === null || _context$actions === void 0 ? void 0 : _context$actions[_constants.ActionName.PreviewAction];
+  var hasPreviewPanel = data === null || data === void 0 ? void 0 : data.hasPreviewPanel;
   var onClick = (0, _react.useCallback)(function () {
     if (data !== null && data !== void 0 && data.invokeAction) {
       invoke(data.invokeAction);
@@ -33,13 +36,35 @@ var PreviewAction = function PreviewAction(_ref) {
   }, [data, invoke, onClickCallback]);
   var isStackItem = props.as === 'stack-item';
   var tooltipMessage = isStackItem ? _messages.messages.preview_description : _messages.messages.preview_improved;
-  return data ? /*#__PURE__*/_react.default.createElement(_action.default, (0, _extends2.default)({
-    content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.preview_improved),
-    icon: /*#__PURE__*/_react.default.createElement(_growDiagonalMediaServicesActualSize.default, {
+  var actionIcon = (0, _react.useCallback)(function () {
+    // Only use panel icon if experiment is enabled and hasPreviewPanel is true
+    if ((0, _expValEquals.expValEquals)('platform_hover_card_preview_panel', 'cohort', 'test') && hasPreviewPanel) {
+      return /*#__PURE__*/_react.default.createElement(_panelRight.default, {
+        color: "currentColor",
+        spacing: "spacious",
+        label: "Open preview panel"
+      });
+    }
+    return /*#__PURE__*/_react.default.createElement(_growDiagonalMediaServicesActualSize.default, {
       color: "currentColor",
       spacing: "spacious",
       label: "Open preview"
-    }),
+    });
+  }, [hasPreviewPanel]);
+  var actionLabel = (0, _react.useCallback)(function () {
+    // Only use panel message if experiment is enabled and hasPreviewPanel is true
+    if ((0, _expValEquals.expValEquals)('platform_hover_card_preview_panel', 'cohort', 'test') && hasPreviewPanel) {
+      return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.preview_panel);
+    }
+    // Fall back to modal message if experiment is enabled, otherwise use original preview message
+    if ((0, _expValEquals.expValEquals)('platform_hover_card_preview_panel', 'cohort', 'test')) {
+      return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.preview_modal);
+    }
+    return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.preview_improved);
+  }, [hasPreviewPanel]);
+  return data ? /*#__PURE__*/_react.default.createElement(_action.default, (0, _extends2.default)({
+    content: actionLabel(),
+    icon: actionIcon(),
     onClick: onClick,
     testId: "smart-action-preview-action",
     tooltipMessage: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, tooltipMessage),

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

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
+var _linkProvider = require("@atlaskit/link-provider");
 var _useAnalyticsEvents2 = require("../../common/analytics/generated/use-analytics-events");
 var _constants = require("../../constants");
 var _flexibleUiContext = require("../../state/flexible-ui-context");
@@ -43,6 +44,9 @@ var FlexibleCard = function FlexibleCard(_ref) {
     url = _ref.url;
   var aiSummaryConfig = (0, _useAiSummaryConfig.useAISummaryConfig)();
   var resolve = (0, _useResolve.default)();
+  var _useSmartLinkContext = (0, _linkProvider.useSmartLinkContext)(),
+    isPreviewPanelAvailable = _useSmartLinkContext.isPreviewPanelAvailable,
+    openPreviewPanel = _useSmartLinkContext.openPreviewPanel;
   var _useAnalyticsEvents = (0, _useAnalyticsEvents2.useAnalyticsEvents)(),
     fireEvent = _useAnalyticsEvents.fireEvent;
   var cardType = cardState.status,
@@ -62,9 +66,11 @@ var FlexibleCard = function FlexibleCard(_ref) {
       resolve: resolve,
       actionOptions: actionOptions,
       status: status,
-      url: url
+      url: url,
+      isPreviewPanelAvailable: isPreviewPanelAvailable,
+      openPreviewPanel: openPreviewPanel
     });
-  }, [aiSummaryConfig, appearance, fireEvent, details, id, onAuthorize, onClick, origin, renderers, resolve, actionOptions, status, url]);
+  }, [aiSummaryConfig, appearance, fireEvent, details, id, onAuthorize, onClick, origin, renderers, resolve, actionOptions, status, url, isPreviewPanelAvailable, openPreviewPanel]);
   var flexibleCardContext = (0, _react.useMemo)(function () {
     return {
       data: context,

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

@@ -19,7 +19,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId", "isLink
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "40.10.10",
+  packageVersion: "40.11.0",
   componentName: 'linkUrl'
 };
 var Anchor = (0, _click.withLinkClickedEvent)('a');

package/dist/es2019/extractors/action/extract-invoke-preview-action.js

@@ -1,4 +1,5 @@
-import { extractPreview as extractPreviewData, extractSmartLinkEmbed, extractSmartLinkProvider, extractSmartLinkTitle, extractSmartLinkUrl } from '@atlaskit/link-extractors';
+import { extractPreview as extractPreviewData, extractSmartLinkAri, extractSmartLinkEmbed, extractSmartLinkProvider, extractSmartLinkTitle, extractSmartLinkUrl } from '@atlaskit/link-extractors';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { ActionName, CardAction } from '../../index';
 import { getExtensionKey } from '../../state/helpers';
 import { canShowAction } from '../../utils/actions/can-show-action';
@@ -17,41 +18,62 @@ export const extractInvokePreviewAction = param => {
     onClose,
     id,
     origin,
-    response
+    response,
+    isPreviewPanelAvailable,
+    openPreviewPanel
   } = param;
+  const ari = extractSmartLinkAri(response);
+  const url = extractSmartLinkUrl(response);
+  const name = extractSmartLinkTitle(response);
+  const hasPreviewPanelParams = Boolean(expValEquals('platform_hover_card_preview_panel', 'cohort', 'test') && isPreviewPanelAvailable && openPreviewPanel && ari && url && name);
+  const hasPreviewPanel = hasPreviewPanelParams && isPreviewPanelAvailable({
+    ari: ari
+  });
+  const data = response.data;
+  const meta = response.meta;
   if (!canShowAction(CardAction.PreviewAction, actionOptions)) {
     return;
   }
-  const data = response.data;
-  const meta = response.meta;
   const src = (_extractPreviewData = extractPreviewData(data, 'web')) === null || _extractPreviewData === void 0 ? void 0 : _extractPreviewData.src;
   if (src) {
     const extensionKey = getExtensionKey(response);
     return {
-      actionFn: async () => {
-        var _extractSmartLinkProv, _extractSmartLinkEmbe;
-        return openEmbedModal({
-          fireEvent,
-          extensionKey,
-          id,
-          invokeDownloadAction: extractInvokeDownloadAction(param),
-          invokeViewAction: extractInvokeViewAction(param, true),
-          isSupportTheming: extractIsSupportTheming(meta),
-          isTrusted: extractIsTrusted(meta),
-          linkIcon: extractLinkIcon(response),
-          providerName: (_extractSmartLinkProv = extractSmartLinkProvider(response)) === null || _extractSmartLinkProv === void 0 ? void 0 : _extractSmartLinkProv.text,
-          onClose,
-          origin,
-          src: (_extractSmartLinkEmbe = extractSmartLinkEmbed(response)) === null || _extractSmartLinkEmbe === void 0 ? void 0 : _extractSmartLinkEmbe.src,
-          title: extractSmartLinkTitle(response),
-          url: extractSmartLinkUrl(response)
-        });
+      invokeAction: {
+        actionFn: async () => {
+          if (hasPreviewPanel) {
+            openPreviewPanel({
+              ari: ari,
+              url: url,
+              name: name,
+              iconUrl: undefined
+            });
+          } else {
+            var _extractSmartLinkProv, _extractSmartLinkEmbe;
+            await openEmbedModal({
+              fireEvent,
+              extensionKey,
+              id,
+              invokeDownloadAction: extractInvokeDownloadAction(param),
+              invokeViewAction: extractInvokeViewAction(param, true),
+              isSupportTheming: extractIsSupportTheming(meta),
+              isTrusted: extractIsTrusted(meta),
+              linkIcon: extractLinkIcon(response),
+              providerName: (_extractSmartLinkProv = extractSmartLinkProvider(response)) === null || _extractSmartLinkProv === void 0 ? void 0 : _extractSmartLinkProv.text,
+              onClose,
+              origin,
+              src: (_extractSmartLinkEmbe = extractSmartLinkEmbed(response)) === null || _extractSmartLinkEmbe === void 0 ? void 0 : _extractSmartLinkEmbe.src,
+              title: extractSmartLinkTitle(response),
+              url
+            });
+          }
+        },
+        actionSubjectId: 'invokePreviewScreen',
+        actionType: ActionName.PreviewAction,
+        display,
+        extensionKey,
+        id
       },
-      actionSubjectId: 'invokePreviewScreen',
-      actionType: ActionName.PreviewAction,
-      display,
-      extensionKey,
-      id
+      hasPreviewPanel: hasPreviewPanel
     };
   }
 };

package/dist/es2019/extractors/flexible/actions/extract-preview-action.js

@@ -1,7 +1,5 @@
 import { extractInvokePreviewAction } from '../../action/extract-invoke-preview-action';
 export const extractPreviewClientAction = param => {
-  const invokeAction = extractInvokePreviewAction(param);
-  return invokeAction ? {
-    invokeAction
-  } : undefined;
+  const result = extractInvokePreviewAction(param);
+  return result ? result : undefined;
 };

package/dist/es2019/extractors/flexible/actions/index.js

@@ -14,7 +14,9 @@ export const extractFlexibleCardActions = ({
   id,
   origin,
   response,
-  url
+  url,
+  isPreviewPanelAvailable,
+  openPreviewPanel
 }) => {
   const action = {
     [ActionName.CopyLinkAction]: extractCopyLinkClientAction({
@@ -36,7 +38,9 @@ export const extractFlexibleCardActions = ({
       fireEvent,
       id,
       origin,
-      response
+      response,
+      isPreviewPanelAvailable,
+      openPreviewPanel
     }),
     [ActionName.AutomationAction]: extractAutomationAction(response),
     [InternalActionName.AISummaryAction]: extractAISummaryAction(response, url, actionOptions, aiSummaryConfig),

package/dist/es2019/extractors/flexible/extract-state.js

@@ -18,8 +18,8 @@ const toInvokeRequest = (extensionKey, resourceIdentifiers, actionType, details)
     details
   };
 };
-const extractAction = (response, id, actionOptions, appearance, origin, fireEvent, resolve) => {
-  var _action$dataRetrieval, _action$dataUpdateAct;
+const extractAction = (response, id, actionOptions, appearance, origin, fireEvent, resolve, isPreviewPanelAvailable, openPreviewPanel) => {
+  var _action$dataRetrieval, _extractInvokePreview, _action$dataUpdateAct;
   const extensionKey = getExtensionKey(response);
   const data = response === null || response === void 0 ? void 0 : response.data;
   const actions = extractServerAction(data);
@@ -32,15 +32,17 @@ const extractAction = (response, id, actionOptions, appearance, origin, fireEven
   }
   const read = toInvokeRequest(extensionKey, action.resourceIdentifiers, (_action$dataRetrieval = action.dataRetrievalAction) === null || _action$dataRetrieval === void 0 ? void 0 : _action$dataRetrieval.name);
   const url = extractLink(data);
-  const invokePreviewAction = response ? extractInvokePreviewAction({
+  const invokePreviewAction = response ? (_extractInvokePreview = extractInvokePreviewAction({
     actionOptions,
     appearance,
     fireEvent,
     id,
     onClose: resolve ? () => url && resolve(url, true) : undefined,
     origin,
-    response
-  }) : undefined;
+    response,
+    isPreviewPanelAvailable,
+    openPreviewPanel
+  })) === null || _extractInvokePreview === void 0 ? void 0 : _extractInvokePreview.invokeAction : undefined;
   const details = {
     id,
     url,
@@ -52,7 +54,7 @@ const extractAction = (response, id, actionOptions, appearance, origin, fireEven
     update
   } : undefined;
 };
-const extractState = (response, actionOptions, id, appearance, origin, fireEvent, resolve) => {
+const extractState = (response, actionOptions, id, appearance, origin, fireEvent, resolve, isPreviewPanelAvailable, openPreviewPanel) => {
   if (!response || !response.data) {
     return;
   }
@@ -63,7 +65,7 @@ const extractState = (response, actionOptions, id, appearance, origin, fireEvent
   if (!canShowAction(CardAction.ChangeStatusAction, actionOptions)) {
     return lozenge;
   }
-  const action = extractAction(response, id, actionOptions, appearance, origin, fireEvent, resolve);
+  const action = extractAction(response, id, actionOptions, appearance, origin, fireEvent, resolve, isPreviewPanelAvailable, openPreviewPanel);
   return {
     ...lozenge,
     action