@atlaskit/smart-card 23.3.0 → 23.4.0

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

@@ -0,0 +1,167 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.previewFunction = previewFunction;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = _interopRequireDefault(require("../index"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _reactIntlNext = require("react-intl-next");
+
+var _flexibleUiContext = require("../../../../../../state/flexible-ui-context");
+
+var _state = require("../../../../../../state");
+
+var _icon = _interopRequireDefault(require("../../../elements/icon"));
+
+var _excluded = ["popupMountPointId"];
+
+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; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var PreviewAction = function PreviewAction(props) {
+  var appearance = props.appearance,
+      asDropDownItem = props.asDropDownItem,
+      testId = props.testId,
+      _onClick = props.onClick,
+      linkIcon = props.linkIcon,
+      src = props.src,
+      url = props.url,
+      title = props.title,
+      providerName = props.providerName,
+      downloadUrl = props.downloadUrl;
+  var defaultAnalytics = (0, _state.useSmartLinkAnalytics)(url, function () {});
+  var analytics = (0, _flexibleUiContext.useFlexibleUiAnalyticsContext)() || defaultAnalytics;
+  var EmbedIcon = {
+    icon: /*#__PURE__*/_react.default.createElement(_icon.default, linkIcon),
+    isFlexibleUi: true
+  };
+
+  if (src && url) {
+    var embedModal = function embedModal() {
+      return previewFunction({
+        popupMountPointId: 'twp-editor-preview-iframe',
+        showModal: true,
+        iframeName: 'twp-editor-preview-iframe',
+        onClose: function onClose() {},
+        download: downloadUrl,
+        icon: EmbedIcon,
+        providerName: providerName || 'Preview',
+        src: src,
+        title: title,
+        url: url,
+        analytics: analytics,
+        origin: 'smartLinkCard'
+      });
+    };
+
+    var action = _objectSpread(_objectSpread({}, props), {}, {
+      onClick: function onClick() {
+        embedModal();
+
+        if (_onClick) {
+          _onClick();
+        }
+      }
+    });
+
+    return /*#__PURE__*/_react.default.createElement(_index.default, (0, _extends2.default)({}, action, {
+      appearance: appearance,
+      asDropDownItem: asDropDownItem,
+      testId: testId
+    }));
+  } else {
+    return null;
+  }
+};
+/*
+  Explanatory note:
+  Actions don't have access to the react tree of whatever is rendered them
+  (and this concept is fraught inside editor anyway) so we want to ensure
+  it is mounting to a new unique place. This function manages that, including
+  creating an element if it doesn't exist, as well as tidying up the react tree
+  (but not the element) upon closing the modal.
+
+  This may strike you as really uncomfortable as you read it, so I wanted to note
+  that a) this was discussed and agreed upon, and b) it's definitely odd, and if
+  you find an elegant solution around this, you should definitely feel free to
+  refactor it.
+*/
+
+
+function previewFunction(_x) {
+  return _previewFunction.apply(this, arguments);
+}
+
+function _previewFunction() {
+  _previewFunction = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref) {
+    var popupMountPointId, rest, popupMountPoint, Modal;
+    return _regenerator.default.wrap(function _callee$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            popupMountPointId = _ref.popupMountPointId, rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+            popupMountPoint = document.getElementById(popupMountPointId);
+
+            if (!popupMountPoint) {
+              popupMountPoint = document.createElement('div');
+              popupMountPoint.id = popupMountPointId;
+              popupMountPoint.setAttribute('data-testid', 'preview-modal');
+              document.body.appendChild(popupMountPoint);
+            }
+
+            _context2.next = 5;
+            return Promise.resolve().then(function () {
+              return _interopRequireWildcard(require('../../../../../EmbedModal'));
+            });
+
+          case 5:
+            Modal = _context2.sent;
+
+            _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
+              locale: "en"
+            }, /*#__PURE__*/_react.default.createElement(Modal.default, (0, _extends2.default)({}, rest, {
+              onClose: function onClose(_context) {
+                if (popupMountPoint) {
+                  _reactDom.default.unmountComponentAtNode(popupMountPoint);
+                }
+              }
+            }))), popupMountPoint);
+
+          case 7:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _previewFunction.apply(this, arguments);
+}
+
+var _default = PreviewAction;
+exports.default = _default;

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.viewFunction = viewFunction;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = _interopRequireDefault(require("../index"));
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var ViewAction = function ViewAction(props) {
+  var appearance = props.appearance,
+      asDropDownItem = props.asDropDownItem,
+      testId = props.testId,
+      _onClick = props.onClick,
+      viewUrl = props.viewUrl,
+      url = props.url;
+
+  if (viewUrl && url) {
+    var action = _objectSpread(_objectSpread({}, props), {}, {
+      onClick: function onClick() {
+        viewFunction({
+          url: viewUrl
+        });
+
+        if (_onClick) {
+          _onClick();
+        }
+      }
+    });
+
+    return /*#__PURE__*/_react.default.createElement(_index.default, (0, _extends2.default)({}, action, {
+      appearance: appearance,
+      asDropDownItem: asDropDownItem,
+      testId: testId
+    }));
+  } else {
+    return null;
+  }
+};
+
+function viewFunction(_x) {
+  return _viewFunction.apply(this, arguments);
+}
+
+function _viewFunction() {
+  _viewFunction = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref) {
+    var url;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            url = _ref.url;
+
+            if (url) {
+              _context.next = 3;
+              break;
+            }
+
+            return _context.abrupt("return");
+
+          case 3:
+            window.open(url, '_blank', 'noopener=yes');
+
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _viewFunction.apply(this, arguments);
+}
+
+var _default = ViewAction;
+exports.default = _default;

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EditAction = exports.DeleteAction = exports.CustomAction = void 0;
+exports.ViewAction = exports.PreviewAction = exports.EditAction = exports.DownloadAction = exports.DeleteAction = exports.CustomAction = void 0;
 
 var _constants = require("../../../../constants");
 
@@ -27,12 +27,36 @@ var DeleteAction = (0, _utils.createUIAction)(_constants.ActionName.DeleteAction
 
 exports.DeleteAction = DeleteAction;
 var EditAction = (0, _utils.createUIAction)(_constants.ActionName.EditAction);
+/**
+ * Creates a PreviewAction component. Accepts default PreviewActionProps, and defaults
+ * to the text 'Preview' inside the button.
+ * @see Action
+ */
+
+exports.EditAction = EditAction;
+var PreviewAction = (0, _utils.createDataAction)(_constants.ActionName.PreviewAction);
+/**
+ * Creates a ViewAction component. Accepts default ViewActionProps, and defaults
+ * to the text 'View' inside the button.
+ * @see Action
+ */
+
+exports.PreviewAction = PreviewAction;
+var ViewAction = (0, _utils.createDataAction)(_constants.ActionName.ViewAction);
+/**
+ * Creates a DownloadAction component. Accepts default DownloadActionProps, and defaults
+ * to the text 'Download' inside the button.
+ * @see Action
+ */
+
+exports.ViewAction = ViewAction;
+var DownloadAction = (0, _utils.createDataAction)(_constants.ActionName.DownloadAction);
 /**
  * Creates a CustomAction component. Accepts default ActionProps. Required to provide
  * your own icon or text.
  * @see Action
  */
 
-exports.EditAction = EditAction;
+exports.DownloadAction = DownloadAction;
 var CustomAction = (0, _utils.createUIAction)(_constants.ActionName.CustomAction);
 exports.CustomAction = CustomAction;

package/dist/cjs/view/FlexibleCard/components/actions/utils.js

@@ -29,6 +29,18 @@ var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
 
 var _edit = _interopRequireDefault(require("@atlaskit/icon/glyph/edit"));
 
+var _previewAction = _interopRequireDefault(require("./action/preview-action"));
+
+var _vidFullScreenOn = _interopRequireDefault(require("@atlaskit/icon/glyph/vid-full-screen-on"));
+
+var _viewAction = _interopRequireDefault(require("./action/view-action"));
+
+var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"));
+
+var _downloadAction = _interopRequireDefault(require("./action/download-action"));
+
+var _download = _interopRequireDefault(require("@atlaskit/icon/glyph/download"));
+
 var _actionMappings;
 
 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); }
@@ -62,6 +74,36 @@ var actionMappings = (_actionMappings = {}, (0, _defineProperty2.default)(_actio
     }),
     tooltipMessage: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.edit)
   }
+}), (0, _defineProperty2.default)(_actionMappings, _constants.ActionName.PreviewAction, {
+  component: _previewAction.default,
+  props: {
+    testId: 'smart-action-preview-action',
+    content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.preview),
+    icon: /*#__PURE__*/_react.default.createElement(_vidFullScreenOn.default, {
+      label: "Preview"
+    }),
+    tooltipMessage: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.preview)
+  }
+}), (0, _defineProperty2.default)(_actionMappings, _constants.ActionName.ViewAction, {
+  component: _viewAction.default,
+  props: {
+    testId: 'smart-action-view-action',
+    content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.view),
+    icon: /*#__PURE__*/_react.default.createElement(_shortcut.default, {
+      label: "View"
+    }),
+    tooltipMessage: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.view)
+  }
+}), (0, _defineProperty2.default)(_actionMappings, _constants.ActionName.DownloadAction, {
+  component: _downloadAction.default,
+  props: {
+    testId: 'smart-action-download-action',
+    content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.download),
+    icon: /*#__PURE__*/_react.default.createElement(_download.default, {
+      label: "Download"
+    }),
+    tooltipMessage: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.download)
+  }
 }), _actionMappings);
 
 var getContextKey = function getContextKey(name) {
@@ -78,8 +120,13 @@ var getActionData = function getActionData(actionName, contextKey, context) {
   var data = context[contextKey];
 
   switch (actionName) {
-    default:
+    case _constants.ActionName.PreviewAction:
+    case _constants.ActionName.ViewAction:
+    case _constants.ActionName.DownloadAction:
       return data;
+
+    default:
+      return undefined;
   }
 };
 
@@ -97,7 +144,9 @@ var createDataAction = function createDataAction(name) {
   return function (overrides) {
     var context = (0, _react.useContext)(_flexibleUiContext.FlexibleUiContext);
     var data = getActionData(name, contextKey, context);
-    return /*#__PURE__*/_react.default.createElement(BaseAction, (0, _extends2.default)({}, props, data, overrides));
+    return data ? /*#__PURE__*/_react.default.createElement(BaseAction, (0, _extends2.default)({}, props, data, overrides, {
+      url: context === null || context === void 0 ? void 0 : context.url
+    })) : null;
   };
 };
 

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

@@ -68,17 +68,7 @@ var ActionGroup = function ActionGroup(_ref) {
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
-
-  var _useMemo = (0, _react.useMemo)(function () {
-    var isMoreThenTwoItems = items.length > visibleButtonsNum;
-    var buttons = isMoreThenTwoItems ? items.slice(0, visibleButtonsNum - 1) : items;
-    var dropdownItems = isMoreThenTwoItems ? items.slice(visibleButtonsNum - 1) : [];
-    return [buttons, dropdownItems];
-  }, [items, visibleButtonsNum]),
-      _useMemo2 = (0, _slicedToArray2.default)(_useMemo, 2),
-      buttonActions = _useMemo2[0],
-      dropdownItemActions = _useMemo2[1]; // Stop AK dropdown menu to propagate event on click.
+      setIsOpen = _useState2[1]; // Stop AK dropdown menu to propagate event on click.
 
 
   var onClick = (0, _react.useCallback)(function (e) {
@@ -98,11 +88,27 @@ var ActionGroup = function ActionGroup(_ref) {
       });
     }
   }, [isOpen, onOpenChange]);
+  var renderableActions = items.filter(function (action) {
+    return (0, _utils.renderActionItems)([action]);
+  });
+
+  var _useMemo = (0, _react.useMemo)(function () {
+    var isMoreThenTwoItems = renderableActions && renderableActions.length > visibleButtonsNum;
+    var buttons = isMoreThenTwoItems ? renderableActions.slice(0, visibleButtonsNum - 1) : renderableActions;
+    var dropdownItems = isMoreThenTwoItems ? renderableActions.slice(visibleButtonsNum - 1) : [];
+    return [buttons, dropdownItems];
+  }, [renderableActions, visibleButtonsNum]),
+      _useMemo2 = (0, _slicedToArray2.default)(_useMemo, 2),
+      buttonActions = _useMemo2[0],
+      dropdownItemActions = _useMemo2[1];
+
+  var dropdownMenuElement = (0, _utils.renderActionItems)(dropdownItemActions, size, appearance, true, onActionClick);
+  var buttonGroupElement = (0, _utils.renderActionItems)(buttonActions, size, appearance, false, onActionClick);
   return (0, _react2.jsx)("div", {
     css: styles,
     className: "actions-button-group",
     onClick: onClick
-  }, (0, _react2.jsx)(_buttonGroup.default, null, (0, _utils.renderActionItems)(buttonActions, size, appearance, false, onActionClick), dropdownItemActions.length > 0 ? (0, _react2.jsx)(_dropdownMenu.default, {
+  }, (0, _react2.jsx)(_buttonGroup.default, null, buttonGroupElement, dropdownItemActions.length > 0 && dropdownMenuElement && dropdownMenuElement.length > 0 ? (0, _react2.jsx)(_dropdownMenu.default, {
     isOpen: isOpen,
     onOpenChange: onOpenChange,
     trigger: function trigger(_ref2) {
@@ -123,7 +129,7 @@ var ActionGroup = function ActionGroup(_ref) {
       })));
     },
     testId: "action-group-dropdown"
-  }, (0, _utils.renderActionItems)(dropdownItemActions, size, appearance, true, onActionClick)) : null));
+  }, dropdownMenuElement) : null));
 };
 
 var _default = ActionGroup;

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

@@ -99,7 +99,7 @@ var isElementDisplayValid = function isElementDisplayValid(name, display) {
   return (_ElementDisplaySchema2 = (_ElementDisplaySchema3 = ElementDisplaySchema[name]) === null || _ElementDisplaySchema3 === void 0 ? void 0 : _ElementDisplaySchema3.includes(display)) !== null && _ElementDisplaySchema2 !== void 0 ? _ElementDisplaySchema2 : false;
 };
 
-var isElementNull = function isElementNull(children) {
+var isJSXElementNull = function isJSXElementNull(children) {
   return Boolean(children.type() === null);
 };
 
@@ -137,7 +137,7 @@ var renderElementItems = function renderElementItems() {
         key: idx
       }, typedProps));
 
-      if (!isElementNull(element)) {
+      if (!isJSXElementNull(element)) {
         return [].concat((0, _toConsumableArray2.default)(acc), [element]);
       }
     }
@@ -187,13 +187,18 @@ var renderActionItems = function renderActionItems() {
         }
       };
 
-      return [].concat((0, _toConsumableArray2.default)(acc), [/*#__PURE__*/_react.default.createElement(Action, (0, _extends2.default)({
+      var action = /*#__PURE__*/_react.default.createElement(Action, (0, _extends2.default)({
+        url: '',
         asDropDownItem: asDropDownItems,
         size: size,
         key: idx,
         appearance: appearance,
         onClick: handleOnClick
-      }, actionProps))]);
+      }, actionProps));
+
+      if (!isJSXElementNull(action)) {
+        return [].concat((0, _toConsumableArray2.default)(acc), [action]);
+      }
     }
 
     return acc;

package/dist/cjs/view/FlexibleCard/components/elements/media/index.js

@@ -51,7 +51,7 @@ var Media = function Media(_ref) {
   return (0, _react2.jsx)("div", {
     css: [styles, overrideCss],
     "data-smart-element": name,
-    "data-smart-element-media": true,
+    "data-smart-element-media": type,
     "data-testid": testId
   }, (0, _react2.jsx)(_imageIcon.default, {
     testId: "".concat(testId, "-image"),

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

@@ -41,7 +41,8 @@ var FlexibleCard = function FlexibleCard(_ref) {
       ui = _ref.ui,
       url = _ref.url,
       onClick = _ref.onClick,
-      testId = _ref.testId;
+      testId = _ref.testId,
+      analytics = _ref.analytics;
   var cardType = cardState.status,
       details = cardState.details;
   var status = cardType;
@@ -78,7 +79,9 @@ var FlexibleCard = function FlexibleCard(_ref) {
         break;
     }
   }, [onError, onResolve, status, title, url]);
-  return /*#__PURE__*/_react.default.createElement(_flexibleUiContext.FlexibleUiContext.Provider, {
+  return /*#__PURE__*/_react.default.createElement(_flexibleUiContext.FlexibleUiAnalyticsContext.Provider, {
+    value: analytics
+  }, /*#__PURE__*/_react.default.createElement(_flexibleUiContext.FlexibleUiContext.Provider, {
     value: context
   }, /*#__PURE__*/_react.default.createElement(_container.default, (0, _extends2.default)({
     testId: testId
@@ -86,7 +89,7 @@ var FlexibleCard = function FlexibleCard(_ref) {
     onClick: onClick,
     retry: retry,
     status: status
-  }), children));
+  }), children)));
 };
 
 var _default = FlexibleCard;

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

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.blockCardIconImageClassName = exports.Icon = void 0;
 
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
 var _react = require("@emotion/react");
 
 var _react2 = _interopRequireDefault(require("react"));
@@ -17,16 +19,35 @@ var _link = _interopRequireDefault(require("@atlaskit/icon/glyph/link"));
 
 var _utils = require("./utils");
 
-/** @jsx jsx */
+var _templateObject, _templateObject2;
+
 var blockCardIconImageClassName = 'block-card-icon-image';
 exports.blockCardIconImageClassName = blockCardIconImageClassName;
 
+var getImageStyles = function getImageStyles(isFlexibleUi) {
+  if (isFlexibleUi) {
+    return;
+  }
+
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    height: ", ";\n    width: ", ";\n  "])), (0, _utils.gs)(2), (0, _utils.gs)(2));
+};
+
+var getSpanStyles = function getSpanStyles(isFlexibleUi) {
+  if (isFlexibleUi) {
+    return;
+  }
+
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    height: ", ";\n    width: ", ";\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  "])), (0, _utils.gs)(2.5), (0, _utils.gs)(2));
+};
+
 var Icon = function Icon(_ref) {
   var url = _ref.url,
       icon = _ref.icon,
       defaultIcon = _ref.defaultIcon,
       _ref$testId = _ref.testId,
-      testId = _ref$testId === void 0 ? 'block-card-icon' : _ref$testId;
+      testId = _ref$testId === void 0 ? 'block-card-icon' : _ref$testId,
+      _ref$isFlexibleUi = _ref.isFlexibleUi,
+      isFlexibleUi = _ref$isFlexibleUi === void 0 ? false : _ref$isFlexibleUi;
   var placeholder = defaultIcon || (0, _react.jsx)(_link.default, {
     label: "link",
     size: "small",
@@ -35,23 +56,14 @@ var Icon = function Icon(_ref) {
   var image = url && (0, _react.jsx)(_reactRenderImage.default, {
     src: url,
     loaded: (0, _react.jsx)("img", {
-      css: {
-        height: (0, _utils.gs)(2),
-        width: (0, _utils.gs)(2)
-      },
+      css: getImageStyles(isFlexibleUi),
       src: url,
       "data-testid": "".concat(testId, "-image")
     }),
     errored: placeholder
   });
   return (0, _react.jsx)("span", {
-    css: {
-      height: (0, _utils.gs)(2.5),
-      width: (0, _utils.gs)(2),
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center'
-    },
+    css: getSpanStyles(isFlexibleUi),
     "data-testid": testId,
     className: blockCardIconImageClassName
   }, icon || image || placeholder);

package/dist/es2019/constants.js

@@ -1,6 +1,8 @@
+export const CONTENT_URL_SECURITY_AND_PERMISSIONS = 'https://support.atlassian.com/confluence-cloud/docs/insert-links-and-anchors/#Smart-links';
 /**
  * The alignment of Flexible UI component.
  */
+
 export let SmartLinkAlignment;
 /**
  * The direction of Flexible UI components. It establish the main-axis
@@ -140,6 +142,9 @@ export let ActionName;
 (function (ActionName) {
   ActionName["DeleteAction"] = "DeleteAction";
   ActionName["EditAction"] = "EditAction";
+  ActionName["PreviewAction"] = "PreviewAction";
+  ActionName["ViewAction"] = "ViewAction";
+  ActionName["DownloadAction"] = "DownloadAction";
   ActionName["CustomAction"] = "CustomAction";
 })(ActionName || (ActionName = {}));
 

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

@@ -54,7 +54,7 @@ const getServerActionProps = (jsonLd, action, handler) => {
   };
 };
 
-const getActionsFromJsonLd = jsonLd => {
+export const getActionsFromJsonLd = jsonLd => {
   let actions = jsonLd && jsonLd['schema:potentialAction'];
 
   if (!actions) {
@@ -67,7 +67,6 @@ const getActionsFromJsonLd = jsonLd => {
 
   return actions;
 };
-
 export function extractActions(jsonLd, handler) {
   const actions = getActionsFromJsonLd(jsonLd);
   const clientActions = actions.filter(isClientAction);

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

@@ -0,0 +1,13 @@
+import { getActionsFromJsonLd } from '../../common/actions/extractActions';
+import { extractDownloadUrl } from '../../common/detail';
+export const extractDownloadAction = data => {
+  const downloadActionExists = getActionsFromJsonLd(data).find(action => action['@type'] === 'DownloadAction');
+
+  if (downloadActionExists) {
+    return {
+      downloadUrl: extractDownloadUrl(data)
+    };
+  }
+
+  return undefined;
+};