@atlaskit/smart-card 23.3.1 → 23.4.1

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/InlineCard/UnauthorisedView/index.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.InlineCardUnauthorizedView = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -76,6 +78,7 @@ var InlineCardUnauthorizedView = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderMessage", function () {
       var _this$props = _this.props,
+          context = _this$props.context,
           onAuthorise = _this$props.onAuthorise,
           url = _this$props.url;
 
@@ -87,7 +90,11 @@ var InlineCardUnauthorizedView = /*#__PURE__*/function (_React$Component) {
         component: _styled.IconStyledButton,
         onClick: _this.handleConnectAccount,
         testId: "button-connect-account"
-      }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.connect_link_account)));
+      }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages.connect_link_account_card_name, {
+        values: {
+          context: context
+        }
+      }))));
     });
     return _this;
   }

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

@@ -122,6 +122,7 @@ var InlineCard = function InlineCard(_ref) {
       var provider = (0, _extractors.extractProvider)(cardDetails);
       return /*#__PURE__*/_react.default.createElement(_UnauthorisedView.InlineCardUnauthorizedView, {
         icon: provider && provider.icon,
+        context: provider && provider.text,
         url: url,
         isSelected: isSelected,
         onClick: handleFrameClick,

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

@@ -142,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;
+};

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

@@ -0,0 +1,23 @@
+import { extractDownloadUrl } from '../../common/detail';
+import { extractPreview as extractPreviewData } from '@atlaskit/linking-common';
+import { extractLink, extractProvider, extractTitle } from '@atlaskit/linking-common/extractors';
+import { extractLinkIcon } from '../icon';
+export const extractPreviewAction = response => {
+  var _extractPreviewData;
+
+  const data = response.data;
+  const src = (_extractPreviewData = extractPreviewData(data, 'web')) === null || _extractPreviewData === void 0 ? void 0 : _extractPreviewData.src;
+
+  if (src) {
+    var _extractProvider;
+
+    return {
+      downloadUrl: extractDownloadUrl(data),
+      providerName: (_extractProvider = extractProvider(data)) === null || _extractProvider === void 0 ? void 0 : _extractProvider.text,
+      src,
+      title: extractTitle(data),
+      linkIcon: extractLinkIcon(response),
+      url: extractLink(data)
+    };
+  }
+};

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

@@ -0,0 +1,13 @@
+import { extractLink } from '@atlaskit/linking-common/extractors';
+import { getActionsFromJsonLd } from '../../common/actions/extractActions';
+export const extractViewAction = data => {
+  const viewActionExists = getActionsFromJsonLd(data).find(action => action['@type'] === 'ViewAction');
+
+  if (viewActionExists) {
+    return {
+      viewUrl: extractLink(data)
+    };
+  }
+
+  return undefined;
+};

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

@@ -3,11 +3,14 @@ import { extractLozenge } from '../common/lozenge';
 import { extractLinkIcon } from './icon';
 import { extractAttachmentCount, extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount, extractViewCount, extractReactCount, extractVoteCount, extractSourceBranch, extractTargetBranch, extractDueOn } from './utils';
 import { extractPersonsUpdatedBy } from './collaboratorGroup';
-import { extractPersonCreatedBy, extractLink, extractTitle, extractDateUpdated, extractDateCreated } from '@atlaskit/linking-common/extractors';
+import { extractPersonCreatedBy, extractTitle, extractDateUpdated, extractDateCreated, extractLink } from '@atlaskit/linking-common/extractors';
 import extractPriority from './extract-priority';
 import extractProviderIcon from './icon/extract-provider-icon';
 import extractPreview from './extract-preview';
 import { extractLatestCommit } from './latest-commit';
+import { extractPreviewAction } from './actions/extract-preview-action';
+import { extractDownloadAction } from './actions/extract-download-action';
+import { extractViewAction } from './actions/extract-view-action';
 
 const extractFlexibleUiContext = (response, renderers) => {
   if (!response) {
@@ -27,6 +30,9 @@ const extractFlexibleUiContext = (response, renderers) => {
     createdBy: extractCreatedBy(data),
     createdOn: extractDateCreated(data),
     dueOn: extractDueOn(data),
+    previewAction: extractPreviewAction(response),
+    viewAction: extractViewAction(data),
+    downloadAction: extractDownloadAction(data),
     latestCommit: extractLatestCommit(data),
     linkIcon: extractLinkIcon(response, renderers),
     modifiedBy: extractModifiedBy(data),

package/dist/es2019/state/flexible-ui-context/index.js

@@ -5,4 +5,11 @@ import { useContext, createContext } from 'react';
  * underlying elements.
  */
 export const FlexibleUiContext = /*#__PURE__*/createContext(undefined);
-export const useFlexibleUiContext = () => useContext(FlexibleUiContext);
+export const useFlexibleUiContext = () => useContext(FlexibleUiContext);
+/**
+ * This provides the data that will be used by Smart Links Flexible UI to populate it's
+ * underlying elements.
+ */
+
+export const FlexibleUiAnalyticsContext = /*#__PURE__*/createContext(undefined);
+export const useFlexibleUiAnalyticsContext = () => useContext(FlexibleUiAnalyticsContext);

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "23.3.1",
+	"version": "23.4.1",
 	"sideEffects": false
 }

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

@@ -0,0 +1,66 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Action from '../index';
+
+const DownloadAction = props => {
+  const {
+    appearance,
+    asDropDownItem,
+    downloadUrl,
+    onClick,
+    testId,
+    url
+  } = props;
+
+  if (downloadUrl && url) {
+    const action = { ...props,
+      onClick: () => {
+        downloadFunction({
+          url: downloadUrl
+        });
+
+        if (onClick) {
+          onClick();
+        }
+      }
+    };
+    return /*#__PURE__*/React.createElement(Action, _extends({}, action, {
+      appearance: appearance,
+      asDropDownItem: asDropDownItem,
+      testId: testId
+    }));
+  } else {
+    return null;
+  }
+};
+
+async function downloadFunction({
+  url
+}) {
+  if (!url) {
+    return;
+  }
+
+  const isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
+  const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+  const iframeName = 'media-download-iframe';
+  const link = document.createElement('a');
+  let iframe = document.getElementById(iframeName);
+
+  if (!iframe) {
+    iframe = document.createElement('iframe');
+    iframe.style.display = 'none';
+    iframe.id = iframeName;
+    iframe.name = iframeName;
+    document.body.appendChild(iframe);
+  }
+
+  link.href = url;
+  link.download = url;
+  link.target = isIE11 || isSafari ? '_blank' : iframeName;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
+export default DownloadAction;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,104 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Action from '../index';
+import ReactDOM from 'react-dom';
+import { IntlProvider } from 'react-intl-next';
+import { useFlexibleUiAnalyticsContext } from '../../../../../../state/flexible-ui-context';
+import { useSmartLinkAnalytics } from '../../../../../../state';
+import Icon from '../../../elements/icon';
+
+const PreviewAction = props => {
+  const {
+    appearance,
+    asDropDownItem,
+    testId,
+    onClick,
+    linkIcon,
+    src,
+    url,
+    title,
+    providerName,
+    downloadUrl
+  } = props;
+  const defaultAnalytics = useSmartLinkAnalytics(url, () => {});
+  const analytics = useFlexibleUiAnalyticsContext() || defaultAnalytics;
+  const EmbedIcon = {
+    icon: /*#__PURE__*/React.createElement(Icon, linkIcon),
+    isFlexibleUi: true
+  };
+
+  if (src && url) {
+    const embedModal = () => previewFunction({
+      popupMountPointId: 'twp-editor-preview-iframe',
+      showModal: true,
+      iframeName: 'twp-editor-preview-iframe',
+      onClose: () => {},
+      download: downloadUrl,
+      icon: EmbedIcon,
+      providerName: providerName || 'Preview',
+      src,
+      title,
+      url,
+      analytics,
+      origin: 'smartLinkCard'
+    });
+
+    const action = { ...props,
+      onClick: () => {
+        embedModal();
+
+        if (onClick) {
+          onClick();
+        }
+      }
+    };
+    return /*#__PURE__*/React.createElement(Action, _extends({}, 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.
+*/
+
+
+export async function previewFunction({
+  popupMountPointId,
+  ...rest
+}) {
+  let popupMountPoint;
+  popupMountPoint = document.getElementById(popupMountPointId);
+
+  if (!popupMountPoint) {
+    popupMountPoint = document.createElement('div');
+    popupMountPoint.id = popupMountPointId;
+    popupMountPoint.setAttribute('data-testid', 'preview-modal');
+    document.body.appendChild(popupMountPoint);
+  }
+
+  let Modal = await import('../../../../../EmbedModal');
+  ReactDOM.render( /*#__PURE__*/React.createElement(IntlProvider, {
+    locale: "en"
+  }, /*#__PURE__*/React.createElement(Modal.default, _extends({}, rest, {
+    onClose: _context => {
+      if (popupMountPoint) {
+        ReactDOM.unmountComponentAtNode(popupMountPoint);
+      }
+    }
+  }))), popupMountPoint);
+}
+export default PreviewAction;

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

@@ -0,0 +1 @@
+export {};