@atlaskit/smart-card 32.5.0 → 32.6.0

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

@@ -84,16 +84,25 @@ function Component(_ref) {
   // Setup UI handlers.
   var handleClickWrapper = (0, _react.useCallback)(function (event) {
     var isModifierKeyPressed = (0, _utils.isSpecialEvent)(event);
-    analytics.ui.cardClickedEvent({
-      id: id,
-      display: isFlexibleUi ? _constants.CardDisplay.Flexible : appearance,
-      status: state.status,
-      definitionId: definitionId,
-      extensionKey: extensionKey,
-      isModifierKeyPressed: isModifierKeyPressed,
-      destinationProduct: product,
-      destinationSubproduct: subproduct
-    });
+    if ((0, _platformFeatureFlags.fg)('platform_migrate-some-ui-events-smart-card')) {
+      fireEvent('ui.smartLink.clicked', {
+        id: id,
+        display: isFlexibleUi ? _constants.CardDisplay.Flexible : appearance,
+        definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
+        isModifierKeyPressed: isModifierKeyPressed
+      });
+    } else {
+      analytics.ui.cardClickedEvent({
+        id: id,
+        display: isFlexibleUi ? _constants.CardDisplay.Flexible : appearance,
+        status: state.status,
+        definitionId: definitionId,
+        extensionKey: extensionKey,
+        isModifierKeyPressed: isModifierKeyPressed,
+        destinationProduct: product,
+        destinationSubproduct: subproduct
+      });
+    }
     if (!onClick && !isFlexibleUi) {
       var clickUrl = (0, _helpers.getClickUrl)(url, state.details);
       // Ctrl+left click on mac typically doesn't trigger onClick
@@ -113,7 +122,7 @@ function Component(_ref) {
       }
       (0, _click.fireLinkClickedEvent)(createAnalyticsEvent)(event);
     }
-  }, [id, url, state.details, state.status, analytics.ui, appearance, definitionId, extensionKey, onClick, isFlexibleUi, product, subproduct, createAnalyticsEvent]);
+  }, [id, url, state.details, state.status, analytics.ui, appearance, definitionId, extensionKey, onClick, isFlexibleUi, product, subproduct, createAnalyticsEvent, fireEvent]);
   var handleAuthorize = (0, _react.useCallback)(function () {
     return actions.authorize(appearance);
   }, [actions, appearance]);
@@ -129,39 +138,27 @@ function Component(_ref) {
   (0, _react.useEffect)(function () {
     measure.mark(id, state.status);
     if (state.status !== 'pending' && state.status !== 'resolving') {
+      var _state$error;
       measure.create(id, state.status);
-      if ((0, _platformFeatureFlags.fg)('platform_smart-card-migrate-operational-analytics')) {
-        var _state$error;
-        if (state.status === 'resolved') {
-          var _measure$getMeasure$d, _measure$getMeasure;
-          fireEvent('operational.smartLink.resolved', {
-            definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
-            duration: (_measure$getMeasure$d = (_measure$getMeasure = measure.getMeasure(id, state.status)) === null || _measure$getMeasure === void 0 ? void 0 : _measure$getMeasure.duration) !== null && _measure$getMeasure$d !== void 0 ? _measure$getMeasure$d : null
-          });
-        } else if (((_state$error = state.error) === null || _state$error === void 0 ? void 0 : _state$error.type) !== 'ResolveUnsupportedError') {
-          fireEvent('operational.smartLink.unresolved', {
-            definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
-            reason: state.status,
-            error: state.error === undefined ? null : {
-              name: state.error.name,
-              kind: state.error.kind,
-              type: state.error.type
-            }
-          });
-        }
-      } else {
-        var _state$error2;
-        analytics.operational.instrument({
-          id: id,
-          status: state.status,
-          definitionId: definitionId,
-          extensionKey: extensionKey !== null && extensionKey !== void 0 ? extensionKey : (_state$error2 = state.error) === null || _state$error2 === void 0 ? void 0 : _state$error2.extensionKey,
-          resourceType: resourceType,
-          error: state.error
+      if (state.status === 'resolved') {
+        var _measure$getMeasure$d, _measure$getMeasure;
+        fireEvent('operational.smartLink.resolved', {
+          definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
+          duration: (_measure$getMeasure$d = (_measure$getMeasure = measure.getMeasure(id, state.status)) === null || _measure$getMeasure === void 0 ? void 0 : _measure$getMeasure.duration) !== null && _measure$getMeasure$d !== void 0 ? _measure$getMeasure$d : null
+        });
+      } else if (((_state$error = state.error) === null || _state$error === void 0 ? void 0 : _state$error.type) !== 'ResolveUnsupportedError') {
+        fireEvent('operational.smartLink.unresolved', {
+          definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
+          reason: state.status,
+          error: state.error === undefined ? null : {
+            name: state.error.name,
+            kind: state.error.kind,
+            type: state.error.type
+          }
         });
       }
     }
-  }, [id, appearance, state.status, state.error, definitionId, extensionKey, resourceType, analytics.operational, fireEvent]);
+  }, [id, appearance, state.status, state.error, definitionId, extensionKey, resourceType, fireEvent]);
 
   // NB: once the smart-card has rendered into an end state, we capture
   // this as a successful render. These can be one of:

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

@@ -12,7 +12,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactErrorBoundary = require("react-error-boundary");
 var _reactMagneticDi = require("react-magnetic-di");
 var _uuid = _interopRequireDefault(require("uuid"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useAnalyticsEvents2 = require("../../common/analytics/generated/use-analytics-events");
 var _analytics = require("../../state/analytics");
 var _utils = require("../../utils");
@@ -82,20 +81,12 @@ function CardWithURLRenderer(props) {
     // to the reliability of the smart-card front-end components.
     // Likewise, chunk loading errors are not caused by a failure of smart-card rendering.
     if (error.name === 'ChunkLoadError') {
-      if ((0, _platformFeatureFlags.fg)('platform_smart-card-migrate-operational-analytics')) {
-        fireEvent('operational.smartLink.chunkLoadFailed', {
-          display: appearance,
-          error: error,
-          errorInfo: errorInfo,
-          definitionId: null
-        });
-      } else {
-        analytics.operational.chunkloadFailedEvent({
-          display: appearance,
-          error: error,
-          errorInfo: errorInfo
-        });
-      }
+      fireEvent('operational.smartLink.chunkLoadFailed', {
+        display: appearance,
+        error: error,
+        errorInfo: errorInfo,
+        definitionId: null
+      });
     } else if (error.name !== 'APIError') {
       analytics.ui.renderFailedEvent({
         display: isFlexibleUi ? 'flexible' : appearance,
@@ -109,7 +100,7 @@ function CardWithURLRenderer(props) {
       url: url !== null && url !== void 0 ? url : '',
       err: error
     });
-  }, [analytics.operational, analytics.ui, appearance, id, onError, url, isFlexibleUi, fireEvent]);
+  }, [analytics.ui, appearance, id, onError, url, isFlexibleUi, fireEvent]);
   if (!url) {
     throw new Error('@atlaskit/smart-card: url property is missing.');
   }

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

@@ -8,14 +8,11 @@ exports.EmbedCard = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _block = require("../../extractors/block");
 var _extractAccessContext = require("../../extractors/common/context/extractAccessContext");
 var _embed = require("../../extractors/embed");
 var _inline = require("../../extractors/inline");
 var _helpers = require("../../state/helpers");
 var _jsonld = require("../../utils/jsonld");
-var _BlockCard = require("../BlockCard");
 var _FlexibleResolvedView = _interopRequireDefault(require("../BlockCard/views/flexible/FlexibleResolvedView"));
 var _ResolvedView = require("../InlineCard/ResolvedView");
 var _ErroredView = require("./views/ErroredView");
@@ -31,7 +28,6 @@ var EmbedCard = exports.EmbedCard = /*#__PURE__*/_react.default.forwardRef(funct
     handleErrorRetry = _ref.handleErrorRetry,
     handleFrameClick = _ref.handleFrameClick,
     analytics = _ref.analytics,
-    handleInvoke = _ref.handleInvoke,
     isSelected = _ref.isSelected,
     frameStyle = _ref.frameStyle,
     platform = _ref.platform,
@@ -55,23 +51,16 @@ var EmbedCard = exports.EmbedCard = /*#__PURE__*/_react.default.forwardRef(funct
   switch (status) {
     case 'pending':
     case 'resolving':
-      if ((0, _platformFeatureFlags.fg)('smart-card-remove-block-card-from-embed')) {
-        return /*#__PURE__*/_react.default.createElement(_FlexibleResolvedView.default, {
-          url: url,
-          cardState: cardState,
-          onClick: handleFrameClick,
-          onError: onError,
-          onResolve: onResolve,
-          renderers: renderers,
-          actionOptions: actionOptions,
-          analytics: analytics,
-          testId: testId
-        });
-      }
-      return /*#__PURE__*/_react.default.createElement(_BlockCard.BlockCardResolvingView, {
-        testId: "embed-card-resolving-view",
-        inheritDimensions: inheritDimensions,
-        isSelected: isSelected
+      return /*#__PURE__*/_react.default.createElement(_FlexibleResolvedView.default, {
+        url: url,
+        cardState: cardState,
+        onClick: handleFrameClick,
+        onError: onError,
+        onResolve: onResolve,
+        renderers: renderers,
+        actionOptions: actionOptions,
+        analytics: analytics,
+        testId: testId ? "".concat(testId, "-resolving-view") : 'embed-card-resolving-view'
       });
     case 'resolved':
       var resolvedViewProps = (0, _embed.extractEmbedProps)(data, meta, platform, iframeUrlType);
@@ -103,31 +92,17 @@ var EmbedCard = exports.EmbedCard = /*#__PURE__*/_react.default.forwardRef(funct
             onClick: handleFrameClick
           }));
         }
-        if ((0, _platformFeatureFlags.fg)('smart-card-remove-block-card-from-embed')) {
-          return /*#__PURE__*/_react.default.createElement(_FlexibleResolvedView.default, {
-            url: url,
-            cardState: cardState,
-            onClick: handleFrameClick,
-            onError: onError,
-            onResolve: onResolve,
-            renderers: renderers,
-            actionOptions: actionOptions,
-            analytics: analytics,
-            testId: testId
-          });
-        }
-        var resolvedBlockViewProps = (0, _block.extractBlockProps)(data, meta, {
+        return /*#__PURE__*/_react.default.createElement(_FlexibleResolvedView.default, {
+          url: url,
+          cardState: cardState,
+          onClick: handleFrameClick,
+          onError: onError,
+          onResolve: onResolve,
+          renderers: renderers,
+          actionOptions: actionOptions,
           analytics: analytics,
-          origin: 'smartLinkEmbed',
-          handleInvoke: handleInvoke,
-          extensionKey: extensionKey,
-          actionOptions: actionOptions
+          testId: testId
         });
-        return /*#__PURE__*/_react.default.createElement(_BlockCard.BlockCardResolvedView, (0, _extends2.default)({}, resolvedBlockViewProps, {
-          isSelected: isSelected,
-          testId: testId,
-          onClick: handleFrameClick
-        }));
       }
     case 'unauthorized':
       if (onError) {

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

@@ -12,6 +12,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useAnalyticsEvents2 = require("../../../../../../common/analytics/generated/use-analytics-events");
 var _flexibleUiContext = require("../../../../../../state/flexible-ui-context");
 var _useInvoke = _interopRequireDefault(require("../../../../../../state/hooks/use-invoke"));
@@ -48,9 +49,17 @@ var ServerAction = function ServerAction(_ref) {
           smartLinkActionType = (_action$action = action.action) === null || _action$action === void 0 ? void 0 : _action$action.actionType;
           _context.prev = 2;
           setIsLoading(true);
-          analytics === null || analytics === void 0 || analytics.ui.smartLinkServerActionClickedEvent({
-            smartLinkActionType: smartLinkActionType
-          });
+          if ((0, _platformFeatureFlags.fg)('platform_migrate-some-ui-events-smart-card')) {
+            if (smartLinkActionType === 'FollowEntityAction' || smartLinkActionType === 'UnfollowEntityAction') {
+              fireEvent('ui.button.clicked.smartLinkFollowButton', {});
+            } else {
+              fireEvent("ui.button.clicked.".concat(smartLinkActionType), {});
+            }
+          } else {
+            analytics === null || analytics === void 0 || analytics.ui.smartLinkServerActionClickedEvent({
+              smartLinkActionType: smartLinkActionType
+            });
+          }
           fireEvent('track.smartLinkQuickAction.started', {
             smartLinkActionType: smartLinkActionType
           });

package/dist/cjs/view/FlexibleCard/components/elements/lozenge/lozenge-action/index.js

@@ -12,6 +12,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _dropdownMenu = _interopRequireDefault(require("@atlaskit/dropdown-menu"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useAnalyticsEvents2 = require("../../../../../../common/analytics/generated/use-analytics-events");
 var _extractLozengeActionItems = _interopRequireDefault(require("../../../../../../extractors/action/extract-lozenge-action-items"));
 var _flexibleUiContext = require("../../../../../../state/flexible-ui-context");
@@ -102,7 +103,11 @@ var LozengeAction = function LozengeAction(_ref) {
               _context.next = 24;
               break;
             }
-            analytics === null || analytics === void 0 || analytics.ui.smartLinkLozengeActionClickedEvent();
+            if ((0, _platformFeatureFlags.fg)('platform_migrate-some-ui-events-smart-card')) {
+              fireEvent('ui.button.clicked.smartLinkStatusLozenge', {});
+            } else {
+              analytics === null || analytics === void 0 || analytics.ui.smartLinkLozengeActionClickedEvent();
+            }
             fireEvent('track.smartLinkQuickAction.started', {
               smartLinkActionType: _analytics.TrackQuickActionType.StatusUpdate
             });
@@ -165,7 +170,11 @@ var LozengeAction = function LozengeAction(_ref) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
             _context2.prev = 0;
-            analytics === null || analytics === void 0 || analytics.ui.smartLinkLozengeActionListItemClickedEvent();
+            if ((0, _platformFeatureFlags.fg)('platform_migrate-some-ui-events-smart-card')) {
+              fireEvent('ui.button.clicked.smartLinkStatusListItem', {});
+            } else {
+              analytics === null || analytics === void 0 || analytics.ui.smartLinkLozengeActionListItemClickedEvent();
+            }
             updateAction = action === null || action === void 0 ? void 0 : action.update;
             if (!(updateAction && id)) {
               _context2.next = 17;

package/dist/cjs/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-error/index.js

@@ -11,7 +11,9 @@ var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _dropdownMenu = require("@atlaskit/dropdown-menu");
 var _error = _interopRequireDefault(require("@atlaskit/icon/core/migration/error"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
+var _useAnalyticsEvents2 = require("../../../../../../../common/analytics/generated/use-analytics-events");
 var _messages = require("../../../../../../../messages");
 var _flexibleUiContext = require("../../../../../../../state/flexible-ui-context");
 var _useResolve = _interopRequireDefault(require("../../../../../../../state/hooks/use-resolve"));
@@ -30,6 +32,8 @@ var LozengeActionError = function LozengeActionError(_ref) {
     maxLineNumber = _ref$maxLineNumber === void 0 ? MAX_LINE_NUMBER : _ref$maxLineNumber,
     url = _ref.url,
     previewData = _ref.previewData;
+  var _useAnalyticsEvents = (0, _useAnalyticsEvents2.useAnalyticsEvents)(),
+    fireEvent = _useAnalyticsEvents.fireEvent;
   var reload = (0, _useResolve.default)();
   var analytics = (0, _flexibleUiContext.useFlexibleUiAnalyticsContext)();
   var isPreviewAvailable = previewData && previewData.src !== undefined;
@@ -40,13 +44,17 @@ var LozengeActionError = function LozengeActionError(_ref) {
   }, [reload, url]);
   var handlePreviewOpen = (0, _react.useCallback)(function () {
     if (isPreviewAvailable) {
-      analytics === null || analytics === void 0 || analytics.ui.smartLinkLozengeActionErrorOpenPreviewClickedEvent();
+      if ((0, _platformFeatureFlags.fg)('platform_migrate-some-ui-events-smart-card')) {
+        fireEvent('ui.button.clicked.smartLinkStatusOpenPreview', {});
+      } else {
+        analytics === null || analytics === void 0 || analytics.ui.smartLinkLozengeActionErrorOpenPreviewClickedEvent();
+      }
       return (0, _utils.openEmbedModalWithFlexibleUiIcon)(_objectSpread(_objectSpread({}, previewData), {}, {
         analytics: analytics,
         onClose: handlePreviewClose
       }));
     }
-  }, [analytics, handlePreviewClose, isPreviewAvailable, previewData]);
+  }, [analytics, handlePreviewClose, isPreviewAvailable, previewData, fireEvent]);
   var content = (0, _react.useMemo)(function () {
     return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("div", {
       css: _styled.contentStyles

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

@@ -10,6 +10,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _linkProvider = require("@atlaskit/link-provider");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _useAnalyticsEvents2 = require("../../../common/analytics/generated/use-analytics-events");
 var _constants = require("../../../constants");
 var _analytics2 = require("../../../state/analytics");
 var _helpers = require("../../../state/helpers");
@@ -47,8 +49,10 @@ var HoverCardContent = function HoverCardContent(_ref) {
     onMouseEnter = _ref.onMouseEnter,
     onMouseLeave = _ref.onMouseLeave,
     actionOptions = _ref.actionOptions;
-  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
-    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var _useAnalyticsEventsNe = (0, _analyticsNext.useAnalyticsEvents)(),
+    createAnalyticsEvent = _useAnalyticsEventsNe.createAnalyticsEvent;
+  var _useAnalyticsEvents = (0, _useAnalyticsEvents2.useAnalyticsEvents)(),
+    fireEvent = _useAnalyticsEvents.fireEvent;
   var defaultAnalytics = (0, _analytics2.useSmartLinkAnalytics)(url, id);
   var analytics = _analytics !== null && _analytics !== void 0 ? _analytics : defaultAnalytics;
   var extensionKey = (0, _react.useMemo)(function () {
@@ -56,12 +60,17 @@ var HoverCardContent = function HoverCardContent(_ref) {
   }, [cardState.details]);
   var linkState = (0, _store.useSmartCardState)(url);
   var linkStatus = (_linkState$status = linkState.status) !== null && _linkState$status !== void 0 ? _linkState$status : 'pending';
+  var definitionId = (0, _react.useMemo)(function () {
+    return (0, _helpers.getDefinitionId)(cardState.details);
+  }, [cardState.details]);
   var _useSmartLinkContext = (0, _linkProvider.useSmartLinkContext)(),
     isAdminHubAIEnabled = _useSmartLinkContext.isAdminHubAIEnabled;
   var isAISummaryEnabled = (0, _aiSummary.getIsAISummaryEnabled)(isAdminHubAIEnabled, cardState.details);
   var services = (0, _helpers.getServices)(linkState.details);
   var statusRef = (0, _react.useRef)(linkStatus);
   var analyticsRef = (0, _react.useRef)(analytics);
+  var fireEventRef = (0, _react.useRef)(fireEvent);
+  var definitionIdRef = (0, _react.useRef)(definitionId);
   (0, _react.useEffect)(function () {
     /**
      * Must access current analytics object value via ref because its not stable
@@ -73,37 +82,72 @@ var HoverCardContent = function HoverCardContent(_ref) {
     if (statusRef.current !== linkStatus) {
       statusRef.current = linkStatus;
     }
-  }, [analytics, linkStatus]);
+    if (fireEventRef.current !== fireEvent) {
+      fireEventRef.current = fireEvent;
+    }
+    if (definitionIdRef.current !== definitionId) {
+      definitionIdRef.current = definitionId;
+    }
+  }, [analytics, linkStatus, fireEvent, definitionId]);
   (0, _react.useEffect)(function () {
     var previewDisplay = 'card';
     var previewInvokeMethod = 'mouse_hover';
     var cardOpenTime = Date.now();
-    analyticsRef.current.ui.hoverCardViewedEvent({
-      previewDisplay: previewDisplay,
-      previewInvokeMethod: previewInvokeMethod,
-      status: statusRef.current
-    });
-    return function () {
-      var hoverTime = Date.now() - cardOpenTime;
-      analyticsRef.current.ui.hoverCardDismissedEvent({
+    var fireEventCurrent = fireEventRef.current;
+    if ((0, _platformFeatureFlags.fg)('platform_migrate-some-ui-events-smart-card')) {
+      var _definitionIdRef$curr;
+      fireEventCurrent('ui.hoverCard.viewed', {
+        previewDisplay: previewDisplay,
+        previewInvokeMethod: previewInvokeMethod,
+        definitionId: (_definitionIdRef$curr = definitionIdRef.current) !== null && _definitionIdRef$curr !== void 0 ? _definitionIdRef$curr : null
+      });
+    } else {
+      analyticsRef.current.ui.hoverCardViewedEvent({
         previewDisplay: previewDisplay,
         previewInvokeMethod: previewInvokeMethod,
-        hoverTime: hoverTime,
         status: statusRef.current
       });
+    }
+    return function () {
+      var hoverTime = Date.now() - cardOpenTime;
+      if ((0, _platformFeatureFlags.fg)('platform_migrate-some-ui-events-smart-card')) {
+        var _definitionIdRef$curr2;
+        fireEventCurrent('ui.hoverCard.dismissed', {
+          previewDisplay: previewDisplay,
+          previewInvokeMethod: previewInvokeMethod,
+          hoverTime: hoverTime,
+          definitionId: (_definitionIdRef$curr2 = definitionIdRef.current) !== null && _definitionIdRef$curr2 !== void 0 ? _definitionIdRef$curr2 : null
+        });
+      } else {
+        analyticsRef.current.ui.hoverCardDismissedEvent({
+          previewDisplay: previewDisplay,
+          previewInvokeMethod: previewInvokeMethod,
+          hoverTime: hoverTime,
+          status: statusRef.current
+        });
+      }
     };
   }, []);
   var onClick = (0, _react.useCallback)(function (event) {
     var isModifierKeyPressed = (0, _utils.isSpecialEvent)(event);
-    analytics.ui.cardClickedEvent({
-      id: id,
-      display: _constants.CardDisplay.HoverCardPreview,
-      status: cardState.status,
-      isModifierKeyPressed: isModifierKeyPressed,
-      actionSubjectId: 'titleGoToLink'
-    });
+    if ((0, _platformFeatureFlags.fg)('platform_migrate-some-ui-events-smart-card')) {
+      fireEvent('ui.smartLink.clicked.titleGoToLink', {
+        id: id,
+        display: _constants.CardDisplay.HoverCardPreview,
+        isModifierKeyPressed: isModifierKeyPressed,
+        definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null
+      });
+    } else {
+      analytics.ui.cardClickedEvent({
+        id: id,
+        display: _constants.CardDisplay.HoverCardPreview,
+        status: cardState.status,
+        isModifierKeyPressed: isModifierKeyPressed,
+        actionSubjectId: 'titleGoToLink'
+      });
+    }
     (0, _click.fireLinkClickedEvent)(createAnalyticsEvent)(event);
-  }, [createAnalyticsEvent, cardState.status, analytics.ui, id]);
+  }, [createAnalyticsEvent, cardState.status, analytics.ui, id, fireEvent, definitionId]);
   var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   var _getMetadata = (0, _utils2.getMetadata)(extensionKey, data),
     subtitle = _getMetadata.subtitle;

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

@@ -4,23 +4,27 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.LinkComponent = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
+var _reactMagneticDi = require("react-magnetic-di");
 var _analyticsNext = require("@atlaskit/analytics-next");
+var _link = _interopRequireDefault(require("@atlaskit/link"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _click = require("../../utils/analytics/click");
 var _LinkAnalyticsContext = require("../../utils/analytics/LinkAnalyticsContext");
 var _LinkWarningModal = _interopRequireDefault(require("./LinkWarningModal"));
 var _useLinkWarningModal2 = require("./LinkWarningModal/hooks/use-link-warning-modal");
-var _excluded = ["href", "children", "checkSafety", "onClick", "testId"],
+var _excluded = ["href", "children", "checkSafety", "onClick", "testId", "isLinkComponent"],
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "32.5.0",
+  packageVersion: "32.6.0",
   componentName: 'linkUrl'
 };
-var Link = (0, _click.withLinkClickedEvent)('a');
+var Anchor = (0, _click.withLinkClickedEvent)('a');
+var LinkComponent = exports.LinkComponent = (0, _click.withLinkClickedEvent)(_link.default);
 var LinkUrl = function LinkUrl(_ref) {
   var href = _ref.href,
     children = _ref.children,
@@ -29,17 +33,20 @@ var LinkUrl = function LinkUrl(_ref) {
     _onClick = _ref.onClick,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'link-with-safety' : _ref$testId,
+    _ref$isLinkComponent = _ref.isLinkComponent,
+    isLinkComponent = _ref$isLinkComponent === void 0 ? false : _ref$isLinkComponent,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useLinkWarningModal = (0, _useLinkWarningModal2.useLinkWarningModal)(),
     isLinkSafe = _useLinkWarningModal.isLinkSafe,
     showSafetyWarningModal = _useLinkWarningModal.showSafetyWarningModal,
     linkWarningModalProps = (0, _objectWithoutProperties2.default)(_useLinkWarningModal, _excluded2);
+  var Link = isLinkComponent && (0, _platformFeatureFlags.fg)('platform_editor_hyperlink_underline') ? LinkComponent : Anchor;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_LinkAnalyticsContext.LinkAnalyticsContext, {
     url: href,
     display: "url"
   }, /*#__PURE__*/_react.default.createElement(Link, (0, _extends2.default)({
     "data-testid": testId,
-    href: href,
+    href: href || '',
     onClick: function onClick(e) {
       if (!checkSafety) {
         _onClick && _onClick(e);

package/dist/cjs/view/common/Metadata.js

@@ -24,7 +24,7 @@ var imgStyles = (0, _react.css)({
   height: "var(--ds-space-100, 8px)"
 });
 var textStyles = (0, _react.css)({
-  fontSize: "var(--ds-space-150, 12px)",
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   color: "".concat("var(--ds-text-subtlest, ".concat(_colors.N300, ")")),
   marginRight: "var(--ds-space-050, 4px)",
   marginLeft: "var(--ds-space-025, 2px)"

package/dist/cjs/view/common/UnauthorisedViewContent.js

@@ -9,6 +9,8 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _useAnalyticsEvents2 = require("../../common/analytics/generated/use-analytics-events");
 var _constants = require("../../constants");
 var _messages = require("../../messages");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -23,9 +25,15 @@ var UnauthorisedViewContent = function UnauthorisedViewContent(_ref) {
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'unauthorised-view-content' : _ref$testId,
     analytics = _ref.analytics;
+  var _useAnalyticsEvents = (0, _useAnalyticsEvents2.useAnalyticsEvents)(),
+    fireEvent = _useAnalyticsEvents.fireEvent;
   var handleLearnMoreClick = (0, _react.useCallback)(function () {
-    analytics === null || analytics === void 0 || analytics.ui.learnMoreClickedEvent();
-  }, [analytics === null || analytics === void 0 ? void 0 : analytics.ui]);
+    if ((0, _platformFeatureFlags.fg)('platform_migrate-some-ui-events-smart-card')) {
+      fireEvent('ui.button.clicked.learnMore', {});
+    } else {
+      analytics === null || analytics === void 0 || analytics.ui.learnMoreClickedEvent();
+    }
+  }, [analytics === null || analytics === void 0 ? void 0 : analytics.ui, fireEvent]);
   var learnMoreMessage = isProductIntegrationSupported ? _messages.messages.learn_more_about_connecting_account : _messages.messages.learn_more_about_smart_links;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, providerName ? /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages.connect_unauthorised_account_description, {
     values: {