@atlaskit/smart-card 26.23.2 → 26.25.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/smart-card
 
+## 26.25.0
+
+### Minor Changes
+
+- [`dc3345f4b47`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dc3345f4b47) - Refactor flexible card to use client action hook. (Minor due to the change to the deprecated hook.)
+
+### Patch Changes
+
+- [`2c8b781fd3a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2c8b781fd3a) - cleanup: remove server actions from actions extractor
+
+## 26.24.0
+
+### Minor Changes
+
+- [`cb6f1d7a319`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb6f1d7a319) - Add Follow/Unfollow action to flexible smart links (behind feature flag)
+
+### Patch Changes
+
+- [`93888ff40ba`](https://bitbucket.org/atlassian/atlassian-frontend/commits/93888ff40ba) - [ux] Style updates for refreshed smart cards behind a feature flag. If this update is successful it will be available in a later release.
+
 ## 26.23.2
 
 ### Patch Changes

package/dist/cjs/constants.js

@@ -151,6 +151,7 @@ exports.ElementName = ElementName;
 var ActionName = /*#__PURE__*/function (ActionName) {
   ActionName["DeleteAction"] = "DeleteAction";
   ActionName["EditAction"] = "EditAction";
+  ActionName["FollowAction"] = "FollowAction";
   ActionName["PreviewAction"] = "PreviewAction";
   ActionName["ViewAction"] = "ViewAction";
   ActionName["DownloadAction"] = "DownloadAction";

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

@@ -38,7 +38,7 @@ var extractBlockDetails = function extractBlockDetails(jsonLd) {
 var extractBlockActions = function extractBlockActions(props, jsonLd, opts, platform, meta) {
   if (opts) {
     var handleInvoke = opts.handleInvoke;
-    var actions = (0, _extractActions.extractActions)(jsonLd, handleInvoke);
+    var actions = (0, _extractActions.extractClientActions)(jsonLd, handleInvoke);
     var previewAction = (0, _extractPreviewAction.extractPreviewAction)(_objectSpread(_objectSpread({}, opts), {}, {
       viewProps: props,
       jsonLd: jsonLd,

package/dist/cjs/extractors/common/actions/extractActions.js

@@ -4,9 +4,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.extractActions = extractActions;
+exports.extractClientActions = extractClientActions;
 exports.getActionsFromJsonLd = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _ViewAction = require("../../../view/BlockCard/actions/ViewAction");
 var _DownloadAction = require("../../../view/BlockCard/actions/DownloadAction");
@@ -45,27 +44,6 @@ var getClientActionProps = function getClientActionProps(jsonLd, action, handler
     }
   });
 };
-var getServerActionProps = function getServerActionProps(jsonLd, action, handler) {
-  var id = action['@id'] || action['@type'];
-  var data = {
-    type: 'server',
-    key: action.identifier,
-    action: {
-      type: action['@type'],
-      payload: {
-        id: id,
-        context: jsonLd.context
-      }
-    }
-  };
-  return {
-    id: id,
-    text: action.name,
-    promise: function promise() {
-      return handler(data);
-    }
-  };
-};
 var getActionsFromJsonLd = function getActionsFromJsonLd(jsonLd) {
   var actions = jsonLd && jsonLd['schema:potentialAction'];
   if (!actions) {
@@ -77,17 +55,11 @@ var getActionsFromJsonLd = function getActionsFromJsonLd(jsonLd) {
   return actions;
 };
 exports.getActionsFromJsonLd = getActionsFromJsonLd;
-function extractActions(jsonLd, handler) {
+function extractClientActions(jsonLd, handler) {
   var actions = getActionsFromJsonLd(jsonLd);
   var clientActions = actions.filter(isClientAction);
-  var serverActions = actions.filter(function (action) {
-    return !isClientAction(action);
-  });
   var clientActionImpls = clientActions.map(function (action) {
     return getClientActionProps(jsonLd, action, handler);
   });
-  var serverActionImpls = serverActions.map(function (action) {
-    return getServerActionProps(jsonLd, action, handler);
-  });
-  return [].concat((0, _toConsumableArray2.default)(clientActionImpls), (0, _toConsumableArray2.default)(serverActionImpls));
+  return clientActionImpls;
 }

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

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _linkExtractors = require("@atlaskit/link-extractors");
+var _linkingTypes = require("@atlaskit/linking-types");
+var _helpers = require("../../../state/helpers");
+var _extractServerAction = _interopRequireDefault(require("../extract-server-action"));
+var extractFollowAction = function extractFollowAction(response, showServerActions, id) {
+  var _action$dataUpdateAct;
+  if (!showServerActions) {
+    return;
+  }
+  var extensionKey = (0, _helpers.getExtensionKey)(response);
+  var data = response === null || response === void 0 ? void 0 : response.data;
+  var actions = (0, _extractServerAction.default)(data);
+  if (!extensionKey || actions.length === 0) {
+    return;
+  }
+  var action = actions.find(function (item) {
+    if ((item === null || item === void 0 ? void 0 : item.name) === 'UpdateAction') {
+      var _dataUpdateAction;
+      var actionName = item === null || item === void 0 ? void 0 : (_dataUpdateAction = item.dataUpdateAction) === null || _dataUpdateAction === void 0 ? void 0 : _dataUpdateAction.name;
+      return actionName === _linkingTypes.SmartLinkActionType.FollowEntityAction || actionName === _linkingTypes.SmartLinkActionType.UnfollowEntityAction;
+    }
+    return false;
+  });
+  if (!action || !action.resourceIdentifiers) {
+    return;
+  }
+  var url = (0, _linkExtractors.extractLink)(data);
+  var reload = url ? {
+    id: id,
+    url: url
+  } : undefined;
+  var actionType = (_action$dataUpdateAct = action.dataUpdateAction) === null || _action$dataUpdateAct === void 0 ? void 0 : _action$dataUpdateAct.name;
+  return {
+    action: {
+      action: {
+        actionType: actionType,
+        resourceIdentifiers: action.resourceIdentifiers
+      },
+      providerKey: extensionKey,
+      reload: reload
+    },
+    value: actionType === _linkingTypes.SmartLinkActionType.FollowEntityAction
+  };
+};
+var _default = extractFollowAction;
+exports.default = _default;

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

@@ -5,7 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("../common/primitives");
+var _extractFollowAction = _interopRequireDefault(require("./actions/extract-follow-action"));
 var _icon = require("./icon");
 var _utils = require("./utils");
 var _collaboratorGroup = require("./collaboratorGroup");
@@ -45,6 +47,7 @@ var extractFlexibleUiContext = function extractFlexibleUiContext() {
     assignedTo: (0, _utils.extractAssignedTo)(data),
     createdOn: (0, _linkExtractors.extractDateCreated)(data),
     dueOn: (0, _utils.extractDueOn)(data),
+    followAction: (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.follow-button') ? (0, _extractFollowAction.default)(response, showServerActions, id) : undefined,
     previewAction: (0, _extractPreviewAction.extractPreviewAction)(response),
     viewAction: (0, _extractViewAction.extractViewAction)(data),
     downloadAction: (0, _extractDownloadAction.extractDownloadAction)(data),

package/dist/cjs/messages.js

@@ -146,6 +146,11 @@ var messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Edit',
     description: 'Allow a user to edit a link'
   },
+  follow: {
+    id: 'fabric.linking.follow',
+    defaultMessage: 'Follow',
+    description: 'Click to follow a project.'
+  },
   forbidden_description: {
     id: 'fabric.linking.forbidden_description',
     defaultMessage: 'You don’t have access to this preview. Contact the site admin if you need access.',
@@ -431,6 +436,11 @@ var messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Unassigned',
     description: 'Shown as a tooltip text for a default unassigned fallback avatar'
   },
+  unfollow: {
+    id: 'fabric.linking.unfollow',
+    defaultMessage: 'Unfollow',
+    description: 'Click to unfollow a project.'
+  },
   unlink_account: {
     id: 'fabric.linking.unlink_account',
     defaultMessage: 'Unlink Account',

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

@@ -254,11 +254,11 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatchAnalyti
        * @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: function actionClickedEvent(_ref6) {
-        var experienceId = _ref6.id,
+        var id = _ref6.id,
           actionType = _ref6.actionType,
           display = _ref6.display,
           invokeType = _ref6.invokeType,
@@ -269,14 +269,8 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatchAnalyti
           destinationSubproduct = _ref6.destinationSubproduct,
           location = _ref6.location;
         var extensionKey = overrideExtensionKey !== null && overrideExtensionKey !== void 0 ? overrideExtensionKey : extractedExtensionKey;
-        (0, _ufoExperiences.startUfoExperience)('smart-link-action-invocation', experienceId, {
-          actionType: actionType,
-          display: display,
-          extensionKey: extensionKey,
-          invokeType: invokeType
-        });
         dispatchAnalytics(applyCommonAttributes((0, _analytics.uiActionClickedEvent)({
-          id: defaultId,
+          id: id !== null && id !== void 0 ? id : defaultId,
           actionType: actionType,
           display: display,
           extensionKey: extensionKey,
@@ -534,7 +528,7 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatchAnalyti
        * @param display Whether the card was an Inline, Block, Embed or Flexible UI.
        */
       invokeSucceededEvent: function invokeSucceededEvent(_ref13) {
-        var experienceId = _ref13.id,
+        var id = _ref13.id,
           actionType = _ref13.actionType,
           display = _ref13.display,
           extensionKey = _ref13.extensionKey,
@@ -543,9 +537,8 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatchAnalyti
           destinationProduct = _ref13.destinationProduct,
           destinationSubproduct = _ref13.destinationSubproduct,
           location = _ref13.location;
-        (0, _ufoExperiences.succeedUfoExperience)('smart-link-action-invocation', experienceId);
         dispatchAnalytics(applyCommonAttributes((0, _analytics.invokeSucceededEvent)({
-          id: defaultId,
+          id: id !== null && id !== void 0 ? id : defaultId,
           actionType: actionType,
           display: display,
           extensionKey: extensionKey,
@@ -565,7 +558,7 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatchAnalyti
        * @param reason The reason the invocation failed.
        */
       invokeFailedEvent: function invokeFailedEvent(_ref14) {
-        var experienceId = _ref14.id,
+        var id = _ref14.id,
           actionType = _ref14.actionType,
           display = _ref14.display,
           reason = _ref14.reason,
@@ -575,9 +568,8 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatchAnalyti
           destinationProduct = _ref14.destinationProduct,
           destinationSubproduct = _ref14.destinationSubproduct,
           location = _ref14.location;
-        (0, _ufoExperiences.failUfoExperience)('smart-link-action-invocation', experienceId);
         dispatchAnalytics(applyCommonAttributes((0, _analytics.invokeFailedEvent)({
-          id: defaultId,
+          id: id !== null && id !== void 0 ? id : defaultId,
           actionType: actionType,
           display: display,
           reason: reason,

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

@@ -11,8 +11,11 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _react = require("react");
 var _uuid = _interopRequireDefault(require("uuid"));
 var measure = _interopRequireWildcard(require("../../../utils/performance"));
+var _analytics = require("../../analytics");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var ACTION_EXPERIENCE_NAME = 'smart-link-action-invocation';
+
 /**
  * Invoke client action such as preview, download and open link
  */
@@ -29,45 +32,48 @@ var useInvokeClientAction = function useInvokeClientAction(_ref) {
             markName = "".concat(experienceId, "-").concat(actionType);
             measure.mark(markName, 'pending');
             _context.prev = 4;
-            // Begin analytics instrumentation.
-            analytics === null || analytics === void 0 ? void 0 : analytics.ui.actionClickedEvent({
-              id: experienceId,
-              extensionKey: extensionKey,
+            // Begin UFO experience
+            (0, _analytics.startUfoExperience)(ACTION_EXPERIENCE_NAME, experienceId, {
               actionType: actionType,
               display: display,
+              extensionKey: extensionKey,
               invokeType: 'client'
             });
 
+            // Begin analytics instrumentation.
+            analytics === null || analytics === void 0 ? void 0 : analytics.ui.actionClickedEvent({
+              actionType: actionType,
+              display: display
+            });
+
             // Invoke action
-            _context.next = 8;
+            _context.next = 9;
             return actionFn();
-          case 8:
+          case 9:
             result = _context.sent;
             measure.mark(markName, 'resolved');
+            (0, _analytics.succeedUfoExperience)(ACTION_EXPERIENCE_NAME, experienceId);
             analytics === null || analytics === void 0 ? void 0 : analytics.operational.invokeSucceededEvent({
-              id: experienceId,
-              extensionKey: extensionKey,
               actionType: actionType,
               display: display
             });
             return _context.abrupt("return", result);
-          case 14:
-            _context.prev = 14;
+          case 16:
+            _context.prev = 16;
             _context.t0 = _context["catch"](4);
             measure.mark(markName, 'errored');
+            (0, _analytics.failUfoExperience)(ACTION_EXPERIENCE_NAME, experienceId);
             reason = typeof _context.t0 === 'string' ? _context.t0 : _context.t0 === null || _context.t0 === void 0 ? void 0 : _context.t0.message;
             analytics === null || analytics === void 0 ? void 0 : analytics.operational.invokeFailedEvent({
-              id: experienceId,
-              extensionKey: extensionKey,
               actionType: actionType,
               display: display,
               reason: reason
             });
-          case 19:
+          case 22:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[4, 14]]);
+      }, _callee, null, [[4, 16]]);
     }));
     return function (_x) {
       return _ref3.apply(this, arguments);

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

@@ -21,7 +21,7 @@ exports.ANALYTICS_CHANNEL = ANALYTICS_CHANNEL;
 var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.23.2"
+  packageVersion: "26.25.0"
 };
 exports.context = context;
 var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {

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

@@ -41,6 +41,7 @@ var FlexibleErroredView = function FlexibleErroredView(_ref) {
     return onAuthorize ? [(0, _RetryAction.RetryAction)(onAuthorize)] : [];
   }, [onAuthorize]);
   return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, {
+    appearance: "block",
     cardState: cardState,
     onAuthorize: onAuthorize,
     onClick: onClick,

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

@@ -14,7 +14,6 @@ var _titleBlock = _interopRequireDefault(require("../../../FlexibleCard/componen
 var _blocks = require("../../../FlexibleCard/components/blocks");
 var _styled = require("./styled");
 var _constants = require("../../../../constants");
-var _uuid = _interopRequireDefault(require("uuid"));
 var _utils = require("./utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _withFlexibleUIBlockCardStyle = require("./utils/withFlexibleUIBlockCardStyle");
@@ -45,11 +44,6 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
   (0, _react.useEffect)(function () {
     setIsPreviewBlockErrored(false);
   }, [url, cardState]);
-  var _useState3 = (0, _react.useState)(function () {
-      return id ? id : (0, _uuid.default)();
-    }),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 1),
-    analyticsId = _useState4[0];
   var _ref2 = (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? (0, _utils.getSimulatedBetterMetadata)(cardState.details) : (0, _utils.getSimulatedMetadata)(cardState.details),
     titleMetadata = _ref2.titleMetadata,
     topMetadata = _ref2.topMetadata,
@@ -96,49 +90,13 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
   }, {
     actions: [{
       name: _constants.ActionName.PreviewAction,
-      hideIcon: true,
-      onClick: function onClick() {
-        analytics.ui.actionClickedEvent({
-          id: analyticsId,
-          actionType: 'PreviewAction',
-          display: _constants.CardDisplay.Block
-        });
-        analytics.operational.invokeSucceededEvent({
-          id: analyticsId,
-          actionType: 'PreviewAction',
-          display: _constants.CardDisplay.Block
-        });
-      }
+      hideIcon: true
     }, {
       name: _constants.ActionName.ViewAction,
-      hideIcon: true,
-      onClick: function onClick() {
-        analytics.ui.actionClickedEvent({
-          id: analyticsId,
-          actionType: 'ViewAction',
-          display: _constants.CardDisplay.Block
-        });
-        analytics.operational.invokeSucceededEvent({
-          id: analyticsId,
-          actionType: 'ViewAction',
-          display: _constants.CardDisplay.Block
-        });
-      }
+      hideIcon: true
     }, {
       name: _constants.ActionName.DownloadAction,
-      hideIcon: true,
-      onClick: function onClick() {
-        analytics.ui.actionClickedEvent({
-          id: analyticsId,
-          actionType: 'DownloadAction',
-          display: _constants.CardDisplay.Block
-        });
-        analytics.operational.invokeSucceededEvent({
-          id: analyticsId,
-          actionType: 'DownloadAction',
-          display: _constants.CardDisplay.Block
-        });
-      }
+      hideIcon: true
     }]
   })));
 };

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

@@ -16,9 +16,9 @@ var metadataBlockCss = (0, _react.css)(_templateObject || (_templateObject = (0,
 exports.metadataBlockCss = metadataBlockCss;
 var titleBlockCss = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n"])), (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? "gap: 0.5em;" : "", (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "[data-smart-element=\"Title\"] {\n          font-weight: 600;\n        }" : "");
 exports.titleBlockCss = titleBlockCss;
-var footerBlockCss = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  height: 1.5rem;\n"])));
+var footerBlockCss = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  height: 1.5rem;\n\n  .actions-button-group {\n    button,\n    button:hover,\n    button:focus,\n    button:active {\n      font-size: 0.875rem;\n    }\n  }\n"])));
 exports.footerBlockCss = footerBlockCss;
 var flexibleBlockCardElevationStyle = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: ", ";\n"])), _token.tokens.elevation, "var(--ds-space-025, 2px)");
-var refreshedFlexibleBlockCardStyle = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  & > div {\n    border-radius: ", ";\n    border: 1px solid ", ";\n  }\n"])), "var(--ds-border-radius-300, 12px)", "var(--ds-border-input, ".concat(_colors.N40, ")"));
+var refreshedFlexibleBlockCardStyle = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  & > div {\n    border-radius: ", ";\n    border: 1px solid ", ";\n  }\n"])), "var(--ds-border-radius-200, 8px)", "var(--ds-border-input, ".concat(_colors.N40, ")"));
 var flexibleBlockCardStyle = (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? refreshedFlexibleBlockCardStyle : flexibleBlockCardElevationStyle;
 exports.flexibleBlockCardStyle = flexibleBlockCardStyle;

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

@@ -21,8 +21,8 @@ exports.className = className;
 var borderRadius = "\n  border-radius: ".concat((0, _constants.borderRadius)(), "px;\n");
 exports.borderRadius = borderRadius;
 var BACKGROUND_COLOR_DARK = '#262B31';
-var wrapperBorderRadius = "\n  border-radius: ".concat("var(--ds-border-radius-400, 16px)", ";\n");
-var contentBorderRadius = "\n  border-radius: ".concat("var(--ds-border-radius-300, 12px)", ";\n");
+var wrapperBorderRadius = "\n  border-radius: ".concat("var(--ds-border-radius-200, 8px)", ";\n");
+var contentBorderRadius = "\n  border-radius: ".concat("var(--ds-border-radius-100, 4px)", ";\n");
 var ellipsis = function ellipsis() {
   var maxWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '100%';
   var unit = typeof maxWidth === 'number' ? 'px' : '';

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

@@ -5,11 +5,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _index = _interopRequireDefault(require("../index"));
 var _utils = require("../../../../../../utils");
+var _constants = require("../../../../../../constants");
+var _useInvokeClientAction = _interopRequireDefault(require("../../../../../../state/hooks/use-invoke-client-action"));
+var _flexibleUiContext = require("../../../../../../state/flexible-ui-context");
 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 DownloadAction = function DownloadAction(props) {
@@ -19,10 +24,37 @@ var DownloadAction = function DownloadAction(props) {
     _onClick = props.onClick,
     testId = props.testId,
     url = props.url;
+  var analytics = (0, _flexibleUiContext.useFlexibleUiAnalyticsContext)();
+  var invoke = (0, _useInvokeClientAction.default)({
+    analytics: analytics
+  });
   if (downloadUrl && url) {
     var action = _objectSpread(_objectSpread({}, props), {}, {
       onClick: function onClick() {
-        (0, _utils.downloadUrl)(downloadUrl);
+        invoke({
+          actionType: _constants.ActionName.DownloadAction,
+          actionFn: function () {
+            var _actionFn = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+              return _regenerator.default.wrap(function _callee$(_context) {
+                while (1) switch (_context.prev = _context.next) {
+                  case 0:
+                    return _context.abrupt("return", (0, _utils.downloadUrl)(downloadUrl));
+                  case 1:
+                  case "end":
+                    return _context.stop();
+                }
+              }, _callee);
+            }));
+            function actionFn() {
+              return _actionFn.apply(this, arguments);
+            }
+            return 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/cjs/view/FlexibleCard/components/actions/action/preview-action/index.js

@@ -5,15 +5,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = _interopRequireDefault(require("react"));
 var _index = _interopRequireDefault(require("../index"));
 var _flexibleUiContext = require("../../../../../../state/flexible-ui-context");
-var _state = require("../../../../../../state");
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("../../../../../../messages");
 var _utils = require("../../../utils");
+var _useInvokeClientAction = _interopRequireDefault(require("../../../../../../state/hooks/use-invoke-client-action"));
+var _constants = require("../../../../../../constants");
 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 PreviewAction = function PreviewAction(props) {
@@ -28,23 +31,46 @@ var PreviewAction = function PreviewAction(props) {
     providerName = props.providerName,
     downloadUrl = props.downloadUrl,
     isSupportTheming = props.isSupportTheming;
-  var defaultAnalytics = (0, _state.useSmartLinkAnalytics)(url, function () {});
-  var analytics = (0, _flexibleUiContext.useFlexibleUiAnalyticsContext)() || defaultAnalytics;
+  var analytics = (0, _flexibleUiContext.useFlexibleUiAnalyticsContext)();
+  var invoke = (0, _useInvokeClientAction.default)({
+    analytics: analytics
+  });
   if (src && url) {
-    var embedModal = function embedModal() {
-      return (0, _utils.openEmbedModalWithFlexibleUiIcon)({
-        title: title,
-        providerName: providerName,
-        downloadUrl: downloadUrl,
-        isSupportTheming: isSupportTheming,
-        analytics: analytics,
-        linkIcon: linkIcon,
-        src: src
-      });
-    };
+    var actionFn = /*#__PURE__*/function () {
+      var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              return _context.abrupt("return", (0, _utils.openEmbedModalWithFlexibleUiIcon)({
+                download: downloadUrl,
+                title: title,
+                providerName: providerName,
+                isSupportTheming: isSupportTheming,
+                analytics: analytics,
+                linkIcon: linkIcon,
+                src: src,
+                url: url
+              }));
+            case 1:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function actionFn() {
+        return _ref.apply(this, arguments);
+      };
+    }();
     var action = _objectSpread(_objectSpread({}, props), {}, {
       onClick: function onClick() {
-        embedModal();
+        invoke({
+          actionType: _constants.ActionName.PreviewAction,
+          actionFn: 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/cjs/view/FlexibleCard/components/actions/action/server-action/index.js

@@ -44,14 +44,14 @@ var ServerAction = function ServerAction(_ref) {
           _context.next = 6;
           return invoke(request);
         case 6:
-          setIsLoading(false);
           if (!(action.reload && action.reload.url)) {
-            _context.next = 10;
+            _context.next = 9;
             break;
           }
-          _context.next = 10;
+          _context.next = 9;
           return reload(action.reload.url, true, undefined, action.reload.id);
-        case 10:
+        case 9:
+          setIsLoading(false);
           if (onClick) {
             onClick();
           }