@atlaskit/smart-card 26.23.2 → 26.25.0

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

@@ -66,7 +66,7 @@ export const getTransitionStyles = snippetHeight => css`
   height: ${snippetHeight}px;
 `;
 export const popupContainerStyles = css`
-  border-radius: ${"var(--ds-border-radius-300, 12px)"};
+  border-radius: ${"var(--ds-border-radius-200, 8px)"};
   background-color: ${themed({
   light: "var(--ds-surface-raised, white)",
   dark: "var(--ds-surface-raised, #262B31)"
@@ -78,8 +78,8 @@ export const popupContainerStyles = css`
 `;
 export const getPreviewBlockStyles = snippetHeight => css`
   height: ${snippetHeight}px;
-  ${getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? `  border-top-left-radius: ${"var(--ds-border-radius-300, 12px)"};
-         border-top-right-radius: ${"var(--ds-border-radius-300, 12px)"};
+  ${getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? `  border-top-left-radius: ${"var(--ds-border-radius-200, 8px)"};
+         border-top-right-radius: ${"var(--ds-border-radius-200, 8px)"};
          margin-bottom: ${blockGap};
         }` : ``}
 `;

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

@@ -8,7 +8,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.23.2",
+  packageVersion: "26.25.0",
   componentName: 'linkUrl'
 };
 const Link = withLinkClickedEvent('a');

package/dist/es2019/view/RedesignedInlineCard/Frame/styled.js

@@ -67,7 +67,7 @@ const baseWrapperStyle = props => `
   ${props.withoutBackground ? `padding-left: 0; margin-left:-2px;` : ''}
   display: inline;
   box-decoration-break: clone;
-  border-radius: ${"var(--ds-border-radius-100, 3px)"};
+  border-radius: ${"var(--ds-border-radius-100, 4px)"};
   color: ${themed({
   light: `var(--ds-link, ${B400})`,
   dark: "var(--ds-link, #4794FF)"

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

@@ -10,7 +10,7 @@ export const IconStyledButton = styled.span`
     text-align: initial;
     display: inline;
     vertical-align: baseline;
-    border-radius: ${"var(--ds-border-radius-100, 2px)"};
+    border-radius: ${"var(--ds-border-radius-100, 4px)"};
     border-top-left-radius: 0px;
     border-bottom-left-radius: 0px;
     padding: ${"var(--ds-space-025, 2px)"} ${"var(--ds-space-075, 6px)"};

package/dist/esm/constants.js

@@ -143,6 +143,7 @@ export var ElementName = /*#__PURE__*/function (ElementName) {
 export 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/esm/extractors/block/index.js

@@ -8,7 +8,7 @@ import { extractCommentCount, extractProgrammingLanguage, extractSubscriberCount
 import { extractLink, extractTitle, extractProvider, extractMembers, extractPersonAssignedTo, extractPersonCreatedBy, extractPersonUpdatedBy, extractImage } from '@atlaskit/link-extractors';
 import { extractByline } from '../common/byline/extractByline';
 import { extractTitlePrefix } from '../common/title-prefix/extractTitlePrefix';
-import { extractActions } from '../common/actions/extractActions';
+import { extractClientActions } from '../common/actions/extractActions';
 import { extractPreviewAction } from '../common/actions/extractPreviewAction';
 import { extractIsTrusted } from '../common/meta/extractIsTrusted';
 var extractBlockIcon = function extractBlockIcon(jsonLd) {
@@ -31,7 +31,7 @@ var extractBlockDetails = function extractBlockDetails(jsonLd) {
 export var extractBlockActions = function extractBlockActions(props, jsonLd, opts, platform, meta) {
   if (opts) {
     var handleInvoke = opts.handleInvoke;
-    var actions = extractActions(jsonLd, handleInvoke);
+    var actions = extractClientActions(jsonLd, handleInvoke);
     var previewAction = extractPreviewAction(_objectSpread(_objectSpread({}, opts), {}, {
       viewProps: props,
       jsonLd: jsonLd,

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

@@ -1,4 +1,3 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _defineProperty(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; }
@@ -37,27 +36,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);
-    }
-  };
-};
 export var getActionsFromJsonLd = function getActionsFromJsonLd(jsonLd) {
   var actions = jsonLd && jsonLd['schema:potentialAction'];
   if (!actions) {
@@ -68,17 +46,11 @@ export var getActionsFromJsonLd = function getActionsFromJsonLd(jsonLd) {
   }
   return actions;
 };
-export function extractActions(jsonLd, handler) {
+export 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(_toConsumableArray(clientActionImpls), _toConsumableArray(serverActionImpls));
+  return clientActionImpls;
 }

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

@@ -0,0 +1,45 @@
+import { extractLink } from '@atlaskit/link-extractors';
+import { SmartLinkActionType } from '@atlaskit/linking-types';
+import { getExtensionKey } from '../../../state/helpers';
+import extractServerAction from '../extract-server-action';
+var extractFollowAction = function extractFollowAction(response, showServerActions, id) {
+  var _action$dataUpdateAct;
+  if (!showServerActions) {
+    return;
+  }
+  var extensionKey = getExtensionKey(response);
+  var data = response === null || response === void 0 ? void 0 : response.data;
+  var actions = extractServerAction(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 === SmartLinkActionType.FollowEntityAction || actionName === SmartLinkActionType.UnfollowEntityAction;
+    }
+    return false;
+  });
+  if (!action || !action.resourceIdentifiers) {
+    return;
+  }
+  var url = 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 === SmartLinkActionType.FollowEntityAction
+  };
+};
+export default extractFollowAction;

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

@@ -1,4 +1,6 @@
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { extractSummary } from '../common/primitives';
+import extractFollowAction from './actions/extract-follow-action';
 import { extractLinkIcon } from './icon';
 import { extractAttachmentCount, extractChecklistProgress, extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount, extractViewCount, extractReactCount, extractVoteCount, extractSourceBranch, extractTargetBranch, extractDueOn, extractLocation, extractOwnedBy, extractAssignedTo, extractSubTasksProgress, extractStoryPoints, extractReadTime, extractSentOn, extractPersonAssignedToAsArray } from './utils';
 import { extractPersonsUpdatedBy } from './collaboratorGroup';
@@ -38,6 +40,7 @@ var extractFlexibleUiContext = function extractFlexibleUiContext() {
     assignedTo: extractAssignedTo(data),
     createdOn: extractDateCreated(data),
     dueOn: extractDueOn(data),
+    followAction: getBooleanFF('platform.linking-platform.smart-card.follow-button') ? extractFollowAction(response, showServerActions, id) : undefined,
     previewAction: extractPreviewAction(response),
     viewAction: extractViewAction(data),
     downloadAction: extractDownloadAction(data),

package/dist/esm/messages.js

@@ -140,6 +140,11 @@ export var messages = 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.',
@@ -425,6 +430,11 @@ export var messages = 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/esm/state/analytics/useSmartLinkAnalytics.js

@@ -247,11 +247,11 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatch
        * @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,
@@ -262,14 +262,8 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatch
           destinationSubproduct = _ref6.destinationSubproduct,
           location = _ref6.location;
         var extensionKey = overrideExtensionKey !== null && overrideExtensionKey !== void 0 ? overrideExtensionKey : extractedExtensionKey;
-        startUfoExperience('smart-link-action-invocation', experienceId, {
-          actionType: actionType,
-          display: display,
-          extensionKey: extensionKey,
-          invokeType: invokeType
-        });
         dispatchAnalytics(applyCommonAttributes(uiActionClickedEvent({
-          id: defaultId,
+          id: id !== null && id !== void 0 ? id : defaultId,
           actionType: actionType,
           display: display,
           extensionKey: extensionKey,
@@ -527,7 +521,7 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatch
        * @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,
@@ -536,9 +530,8 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatch
           destinationProduct = _ref13.destinationProduct,
           destinationSubproduct = _ref13.destinationSubproduct,
           location = _ref13.location;
-        succeedUfoExperience('smart-link-action-invocation', experienceId);
         dispatchAnalytics(applyCommonAttributes(_invokeSucceededEvent({
-          id: defaultId,
+          id: id !== null && id !== void 0 ? id : defaultId,
           actionType: actionType,
           display: display,
           extensionKey: extensionKey,
@@ -558,7 +551,7 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatch
        * @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,
@@ -568,9 +561,8 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatch
           destinationProduct = _ref14.destinationProduct,
           destinationSubproduct = _ref14.destinationSubproduct,
           location = _ref14.location;
-        failUfoExperience('smart-link-action-invocation', experienceId);
         dispatchAnalytics(applyCommonAttributes(_invokeFailedEvent({
-          id: defaultId,
+          id: id !== null && id !== void 0 ? id : defaultId,
           actionType: actionType,
           display: display,
           reason: reason,

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

@@ -3,6 +3,9 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { useCallback } from 'react';
 import uuid from 'uuid';
 import * as measure from '../../../utils/performance';
+import { failUfoExperience, startUfoExperience, succeedUfoExperience } from '../../analytics';
+var ACTION_EXPERIENCE_NAME = 'smart-link-action-invocation';
+
 /**
  * Invoke client action such as preview, download and open link
  */
@@ -19,45 +22,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
+            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');
+            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');
+            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/esm/utils/analytics/analytics.js

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

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

@@ -32,6 +32,7 @@ var FlexibleErroredView = function FlexibleErroredView(_ref) {
     return onAuthorize ? [RetryAction(onAuthorize)] : [];
   }, [onAuthorize]);
   return /*#__PURE__*/React.createElement(FlexibleCard, {
+    appearance: "block",
     cardState: cardState,
     onAuthorize: onAuthorize,
     onClick: onClick,

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

@@ -5,8 +5,7 @@ import FlexibleCard from '../../../FlexibleCard';
 import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
 import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock } from '../../../FlexibleCard/components/blocks';
 import { metadataBlockCss, footerBlockCss } from './styled';
-import { ActionName, CardDisplay, ElementName, MediaPlacement, SmartLinkPosition } from '../../../../constants';
-import uuid from 'uuid';
+import { ActionName, ElementName, MediaPlacement, SmartLinkPosition } from '../../../../constants';
 import { getSimulatedMetadata, getSimulatedBetterMetadata } from './utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
@@ -36,11 +35,6 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
   useEffect(function () {
     setIsPreviewBlockErrored(false);
   }, [url, cardState]);
-  var _useState3 = useState(function () {
-      return id ? id : uuid();
-    }),
-    _useState4 = _slicedToArray(_useState3, 1),
-    analyticsId = _useState4[0];
   var _ref2 = getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? getSimulatedBetterMetadata(cardState.details) : getSimulatedMetadata(cardState.details),
     titleMetadata = _ref2.titleMetadata,
     topMetadata = _ref2.topMetadata,
@@ -87,49 +81,13 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
   }, {
     actions: [{
       name: ActionName.PreviewAction,
-      hideIcon: true,
-      onClick: function onClick() {
-        analytics.ui.actionClickedEvent({
-          id: analyticsId,
-          actionType: 'PreviewAction',
-          display: CardDisplay.Block
-        });
-        analytics.operational.invokeSucceededEvent({
-          id: analyticsId,
-          actionType: 'PreviewAction',
-          display: CardDisplay.Block
-        });
-      }
+      hideIcon: true
     }, {
       name: ActionName.ViewAction,
-      hideIcon: true,
-      onClick: function onClick() {
-        analytics.ui.actionClickedEvent({
-          id: analyticsId,
-          actionType: 'ViewAction',
-          display: CardDisplay.Block
-        });
-        analytics.operational.invokeSucceededEvent({
-          id: analyticsId,
-          actionType: 'ViewAction',
-          display: CardDisplay.Block
-        });
-      }
+      hideIcon: true
     }, {
       name: ActionName.DownloadAction,
-      hideIcon: true,
-      onClick: function onClick() {
-        analytics.ui.actionClickedEvent({
-          id: analyticsId,
-          actionType: 'DownloadAction',
-          display: CardDisplay.Block
-        });
-        analytics.operational.invokeSucceededEvent({
-          id: analyticsId,
-          actionType: 'DownloadAction',
-          display: CardDisplay.Block
-        });
-      }
+      hideIcon: true
     }]
   })));
 };

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

@@ -8,7 +8,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 // in editor prosemirror adds padding-left so we need to overwrite it
 export var metadataBlockCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* primary element group */\n  span[data-smart-element-avatar-group] {\n    > ul {\n      padding-left: 0px;\n    }\n  }\n  [data-smart-element-group] {\n    line-height: 1rem;\n  }\n"])));
 export var titleBlockCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n"])), getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? "gap: 0.5em;" : "", getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "[data-smart-element=\"Title\"] {\n          font-weight: 600;\n        }" : "");
-export var footerBlockCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 1.5rem;\n"])));
+export var footerBlockCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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"])));
 var flexibleBlockCardElevationStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: ", ";\n"])), tokens.elevation, "var(--ds-space-025, 2px)");
-var refreshedFlexibleBlockCardStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  & > div {\n    border-radius: ", ";\n    border: 1px solid ", ";\n  }\n"])), "var(--ds-border-radius-300, 12px)", "var(--ds-border-input, ".concat(N40, ")"));
+var refreshedFlexibleBlockCardStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  & > div {\n    border-radius: ", ";\n    border: 1px solid ", ";\n  }\n"])), "var(--ds-border-radius-200, 8px)", "var(--ds-border-input, ".concat(N40, ")"));
 export var flexibleBlockCardStyle = getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? refreshedFlexibleBlockCardStyle : flexibleBlockCardElevationStyle;

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

@@ -10,8 +10,8 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export var className = 'media-card-frame';
 export var borderRadius = "\n  border-radius: ".concat(akBorderRadius(), "px;\n");
 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");
 export var ellipsis = function ellipsis() {
   var maxWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '100%';
   var unit = typeof maxWidth === 'number' ? 'px' : '';

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

@@ -1,10 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 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) { _defineProperty(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; }
 import React from 'react';
 import Action from '../index';
 import { downloadUrl as download } from '../../../../../../utils';
+import { ActionName } from '../../../../../../constants';
+import useInvokeClientAction from '../../../../../../state/hooks/use-invoke-client-action';
+import { useFlexibleUiAnalyticsContext } from '../../../../../../state/flexible-ui-context';
 var DownloadAction = function DownloadAction(props) {
   var appearance = props.appearance,
     asDropDownItem = props.asDropDownItem,
@@ -12,10 +17,37 @@ var DownloadAction = function DownloadAction(props) {
     _onClick = props.onClick,
     testId = props.testId,
     url = props.url;
+  var analytics = useFlexibleUiAnalyticsContext();
+  var invoke = useInvokeClientAction({
+    analytics: analytics
+  });
   if (downloadUrl && url) {
     var action = _objectSpread(_objectSpread({}, props), {}, {
       onClick: function onClick() {
-        download(downloadUrl);
+        invoke({
+          actionType: ActionName.DownloadAction,
+          actionFn: function () {
+            var _actionFn = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+              return _regeneratorRuntime.wrap(function _callee$(_context) {
+                while (1) switch (_context.prev = _context.next) {
+                  case 0:
+                    return _context.abrupt("return", download(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/esm/view/FlexibleCard/components/actions/action/preview-action/index.js

@@ -1,14 +1,17 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 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) { _defineProperty(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; }
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React from 'react';
 import Action from '../index';
 import { useFlexibleUiAnalyticsContext } from '../../../../../../state/flexible-ui-context';
-import { useSmartLinkAnalytics } from '../../../../../../state';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '../../../../../../messages';
 import { openEmbedModalWithFlexibleUiIcon } from '../../../utils';
+import useInvokeClientAction from '../../../../../../state/hooks/use-invoke-client-action';
+import { ActionName } from '../../../../../../constants';
 var PreviewAction = function PreviewAction(props) {
   var appearance = props.appearance,
     asDropDownItem = props.asDropDownItem,
@@ -21,23 +24,46 @@ var PreviewAction = function PreviewAction(props) {
     providerName = props.providerName,
     downloadUrl = props.downloadUrl,
     isSupportTheming = props.isSupportTheming;
-  var defaultAnalytics = useSmartLinkAnalytics(url, function () {});
-  var analytics = useFlexibleUiAnalyticsContext() || defaultAnalytics;
+  var analytics = useFlexibleUiAnalyticsContext();
+  var invoke = useInvokeClientAction({
+    analytics: analytics
+  });
   if (src && url) {
-    var embedModal = function embedModal() {
-      return openEmbedModalWithFlexibleUiIcon({
-        title: title,
-        providerName: providerName,
-        downloadUrl: downloadUrl,
-        isSupportTheming: isSupportTheming,
-        analytics: analytics,
-        linkIcon: linkIcon,
-        src: src
-      });
-    };
+    var actionFn = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              return _context.abrupt("return", 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: 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/esm/view/FlexibleCard/components/actions/action/server-action/index.js

@@ -34,14 +34,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();
           }