@atlaskit/smart-card 22.0.0 → 22.1.2

package/dist/cjs/utils/mocks.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.waitFor = exports.mocks = exports.mockContext = exports.fakeResponse = exports.fakeFactory = void 0;
+exports.waitFor = exports.mocks = exports.mockContext = exports.mockAnalytics = exports.fakeResponse = exports.fakeFactory = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
@@ -138,6 +138,18 @@ var mocks = {
     data: {
       status: 'CompletedStatus'
     }
+  },
+  analytics: {
+    status: 'resolved',
+    details: {
+      meta: {
+        definitionId: 'spaghetti-id',
+        key: 'spaghetti-key',
+        resourceType: 'spaghetti-resource',
+        subproduct: 'spaghetti-subproduct',
+        product: 'spaghetti-product'
+      }
+    }
   }
 };
 exports.mocks = mocks;
@@ -257,4 +269,18 @@ var waitFor = function waitFor() {
   });
 };
 
-exports.waitFor = waitFor;
+exports.waitFor = waitFor;
+var mockAnalytics = {
+  ui: {
+    buttonClickedEvent: function buttonClickedEvent() {},
+    modalClosedEvent: function modalClosedEvent() {},
+    renderSuccessEvent: function renderSuccessEvent() {},
+    renderFailedEvent: function renderFailedEvent() {}
+  },
+  operational: {},
+  track: {},
+  screen: {
+    modalViewedEvent: function modalViewedEvent() {}
+  }
+};
+exports.mockAnalytics = mockAnalytics;

package/dist/cjs/version.json

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

package/dist/cjs/view/BlockCard/actions/PreviewAction.js

@@ -90,9 +90,9 @@ function _previewFunction() {
             _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
               locale: "en"
             }, /*#__PURE__*/_react.default.createElement(Modal.default, (0, _extends2.default)({}, rest, {
-              onClose: function onClose() {
+              onClose: function onClose(context) {
                 if (popupMountPoint) {
-                  _onClose();
+                  _onClose(context);
 
                   _reactDom.default.unmountComponentAtNode(popupMountPoint);
                 }

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

@@ -75,8 +75,6 @@ var _context = require("../../extractors/common/context");
 
 var _LinkView = require("../LinkView");
 
-var _PreviewAction = _interopRequireDefault(require("./actions/PreviewAction"));
-
 var _AuthorizeAction = require("./actions/AuthorizeAction");
 
 var _ForbiddenAction = require("./actions/ForbiddenAction");
@@ -95,6 +93,8 @@ var _ErroredView = require("./views/ErroredView");
 
 var _linkProvider = require("@atlaskit/link-provider");
 
+var _PreviewAction = _interopRequireDefault(require("./actions/PreviewAction"));
+
 var BlockCard = function BlockCard(_ref) {
   var _details$meta, _forbiddenViewProps$c;
 
@@ -106,7 +106,6 @@ var BlockCard = function BlockCard(_ref) {
       handleAuthorize = _ref.handleAuthorize,
       handleErrorRetry = _ref.handleErrorRetry,
       handleFrameClick = _ref.handleFrameClick,
-      handleAnalytics = _ref.handleAnalytics,
       handleInvoke = _ref.handleInvoke,
       renderers = _ref.renderers,
       isSelected = _ref.isSelected,
@@ -114,7 +113,8 @@ var BlockCard = function BlockCard(_ref) {
       onError = _ref.onError,
       testId = _ref.testId,
       showActions = _ref.showActions,
-      platform = _ref.platform;
+      platform = _ref.platform,
+      analytics = _ref.analytics;
   // Actions do not have access to the react tree, so we need to obtain
   // feature flags here where we still can access SmartLinkContext context
   // and pass the flags down to the extractor. See PreviewAction.tsx for details.
@@ -125,8 +125,9 @@ var BlockCard = function BlockCard(_ref) {
   var data = details && details.data || (0, _jsonld.getEmptyJsonLd)();
   var meta = details && details.meta;
   var extractorOpts = {
+    analytics: analytics,
+    origin: 'smartLinkCard',
     featureFlags: featureFlags,
-    handleAnalytics: handleAnalytics,
     handleInvoke: handleInvoke,
     extensionKey: (0, _helpers.getExtensionKey)(details)
   };

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

@@ -209,7 +209,7 @@ function CardWithUrlContent(_ref) {
         handleErrorRetry: handleRetry,
         handleInvoke: handleInvoke,
         handleFrameClick: handleClickWrapper,
-        handleAnalytics: dispatchAnalytics,
+        analytics: analytics,
         isSelected: isSelected,
         onResolve: onResolve,
         onError: onError,
@@ -227,7 +227,7 @@ function CardWithUrlContent(_ref) {
         handleErrorRetry: handleRetry,
         handleFrameClick: handleClickWrapper,
         handleInvoke: handleInvoke,
-        handleAnalytics: dispatchAnalytics,
+        analytics: analytics,
         isSelected: isSelected,
         isFrameVisible: isFrameVisible,
         platform: platform,

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

@@ -47,7 +47,7 @@ var EmbedCard = /*#__PURE__*/_react.default.forwardRef(function (_ref, iframeRef
       handleAuthorize = _ref.handleAuthorize,
       handleErrorRetry = _ref.handleErrorRetry,
       handleFrameClick = _ref.handleFrameClick,
-      handleAnalytics = _ref.handleAnalytics,
+      analytics = _ref.analytics,
       handleInvoke = _ref.handleInvoke,
       showActions = _ref.showActions,
       isSelected = _ref.isSelected,
@@ -101,7 +101,8 @@ var EmbedCard = /*#__PURE__*/_react.default.forwardRef(function (_ref, iframeRef
         }
 
         var resolvedBlockViewProps = (0, _block.extractBlockProps)(data, meta, {
-          handleAnalytics: handleAnalytics,
+          analytics: analytics,
+          origin: 'smartLinkEmbed',
           handleInvoke: handleInvoke,
           extensionKey: (0, _helpers.getExtensionKey)(details)
         });

package/dist/cjs/view/EmbedModal/components/analytics/index.js

@@ -0,0 +1,100 @@
+"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;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _types = require("../../types");
+
+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 getResizeFrom = function getResizeFrom(size) {
+  return size === _types.EmbedModalSize.Small ? _types.EmbedModalSize.Large : _types.EmbedModalSize.Small;
+};
+
+var withAnalytics = function withAnalytics(Component) {
+  return function (props) {
+    var analytics = props.analytics,
+        onClose = props.onClose,
+        onOpen = props.onOpen,
+        onOpenFailed = props.onOpenFailed,
+        onResize = props.onResize,
+        origin = props.origin;
+    var handleOnOpen = (0, _react.useCallback)(function (context) {
+      analytics.screen.modalViewedEvent({
+        name: 'embedPreviewModal',
+        attributes: {
+          origin: origin,
+          size: context.size
+        }
+      });
+      analytics.ui.renderSuccessEvent({
+        status: 'resolved',
+        display: 'preview'
+      });
+
+      if (onOpen) {
+        onOpen(context);
+      }
+    }, [analytics.screen, analytics.ui, onOpen, origin]);
+    var handleOnOpenFailed = (0, _react.useCallback)(function (error, errorInfo) {
+      analytics.ui.renderFailedEvent({
+        display: 'preview',
+        error: error,
+        errorInfo: errorInfo
+      });
+
+      if (onOpenFailed) {
+        onOpenFailed(error, errorInfo);
+      }
+    }, [analytics.ui, onOpenFailed]);
+    var handleOnClose = (0, _react.useCallback)(function (context) {
+      analytics.ui.modalClosedEvent({
+        actionSubjectId: 'embedPreview',
+        attributes: {
+          origin: origin,
+          previewTime: context.duration,
+          size: context.size
+        }
+      });
+
+      if (onClose) {
+        onClose(context);
+      }
+    }, [analytics.ui, onClose, origin]);
+    var handleOnResize = (0, _react.useCallback)(function (context) {
+      analytics.ui.buttonClickedEvent({
+        actionSubjectId: 'embedPreviewResize',
+        attributes: {
+          newSize: context.size,
+          origin: origin,
+          previousSize: getResizeFrom(context.size)
+        }
+      });
+
+      if (onResize) {
+        onResize(context);
+      }
+    }, [analytics.ui, onResize, origin]);
+    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, props, {
+      onClose: handleOnClose,
+      onOpen: handleOnOpen,
+      onOpenFailed: handleOnOpenFailed,
+      onResize: handleOnResize
+    }));
+  };
+};
+
+var _default = withAnalytics;
+exports.default = _default;

package/dist/cjs/view/EmbedModal/components/analytics/types.js

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

package/dist/cjs/view/EmbedModal/components/size-experiment/index.js

@@ -13,27 +13,22 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Modal = _interopRequireDefault(require("../../../common/Modal"));
 
-var _constants = require("../../constants");
+var _types = require("../../types");
 
 var withSizeExperiment = function withSizeExperiment(Component) {
   return function (props) {
     var _props$featureFlags = props.featureFlags,
-        featureFlags = _props$featureFlags === void 0 ? {} : _props$featureFlags,
-        _props$closeLabel = props.closeLabel,
-        closeLabel = _props$closeLabel === void 0 ? 'Close Preview' : _props$closeLabel;
-    var embedModalSize = featureFlags.embedModalSize; // Experiment
+        featureFlags = _props$featureFlags === void 0 ? {} : _props$featureFlags;
+    var size = featureFlags.embedModalSize; // Experiment
 
-    if (embedModalSize === 'large' || embedModalSize === 'small') {
-      var size = embedModalSize === 'large' ? _constants.MAX_MODAL_SIZE : _constants.MIN_MODAL_SIZE;
+    if (size === _types.EmbedModalSize.Large || size === _types.EmbedModalSize.Small) {
       return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, props, {
         size: size
       }));
     } // Control
 
 
-    return /*#__PURE__*/_react.default.createElement(_Modal.default, (0, _extends2.default)({}, props, {
-      closeLabel: closeLabel
-    }));
+    return /*#__PURE__*/_react.default.createElement(_Modal.default, props);
   };
 };
 

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

@@ -21,14 +21,26 @@ var _constants = require("./constants");
 
 var _embedContent = _interopRequireDefault(require("./components/embed-content"));
 
+var _types = require("./types");
+
 var _errorBoundary = _interopRequireDefault(require("./components/error-boundary"));
 
 var _sizeExperiment = _interopRequireDefault(require("./components/size-experiment"));
 
+var _analytics = _interopRequireDefault(require("./components/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 toSize = function toSize(width) {
+  return width === _constants.MAX_MODAL_SIZE ? _types.EmbedModalSize.Large : _types.EmbedModalSize.Small;
+};
+
+var toWidth = function toWidth(size) {
+  return size === _types.EmbedModalSize.Large ? _constants.MAX_MODAL_SIZE : _constants.MIN_MODAL_SIZE;
+};
+
 var EmbedModal = function EmbedModal(_ref) {
   var downloadUrl = _ref.download,
       icon = _ref.icon,
@@ -38,49 +50,76 @@ var EmbedModal = function EmbedModal(_ref) {
       onClose = _ref.onClose,
       onDownloadActionClick = _ref.onDownloadActionClick,
       onOpen = _ref.onOpen,
+      onResize = _ref.onResize,
       onViewActionClick = _ref.onViewActionClick,
       providerName = _ref.providerName,
       showModal = _ref.showModal,
       _ref$size = _ref.size,
-      defaultSize = _ref$size === void 0 ? _constants.MIN_MODAL_SIZE : _ref$size,
+      size = _ref$size === void 0 ? _types.EmbedModalSize.Small : _ref$size,
       src = _ref.src,
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'smart-embed-preview-modal' : _ref$testId,
       title = _ref.title,
       url = _ref.url;
+  var defaultWidth = toWidth(size);
 
   var _useState = (0, _react.useState)(showModal),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       isOpen = _useState2[0],
       setIsOpen = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(defaultSize),
+  var _useState3 = (0, _react.useState)(defaultWidth),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      size = _useState4[0],
-      setSize = _useState4[1];
-
+      width = _useState4[0],
+      setWidth = _useState4[1];
+
+  var openAt = (0, _react.useRef)();
+  var handleOnOpenComplete = (0, _react.useCallback)(function () {
+    openAt.current = Date.now();
+
+    if (onOpen) {
+      onOpen({
+        size: size
+      });
+    }
+  }, [onOpen, size]);
   var handleOnClose = (0, _react.useCallback)(function () {
     return setIsOpen(false);
   }, []);
-  var handleOnSizeClick = (0, _react.useCallback)(function () {
-    var newSize = size === _constants.MIN_MODAL_SIZE ? _constants.MAX_MODAL_SIZE : _constants.MIN_MODAL_SIZE;
-    setSize(newSize);
-  }, [size]);
+  var handleOnCloseComplete = (0, _react.useCallback)(function () {
+    if (onClose) {
+      var duration = openAt.current ? Date.now() - openAt.current : undefined;
+      onClose({
+        duration: duration,
+        size: toSize(width)
+      });
+    }
+  }, [onClose, width]);
+  var handleOnResizeClick = (0, _react.useCallback)(function () {
+    var newWidth = width === _constants.MIN_MODAL_SIZE ? _constants.MAX_MODAL_SIZE : _constants.MIN_MODAL_SIZE;
+    setWidth(newWidth);
+
+    if (onResize) {
+      onResize({
+        size: toSize(newWidth)
+      });
+    }
+  }, [onResize, width]);
   return /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTransition, null, isOpen && /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
     height: "100%",
     onClose: handleOnClose,
-    onCloseComplete: onClose,
-    onOpenComplete: onOpen,
+    onCloseComplete: handleOnCloseComplete,
+    onOpenComplete: handleOnOpenComplete,
     testId: testId,
-    width: size
+    width: width
   }, /*#__PURE__*/_react.default.createElement(_linkInfo.default, {
     downloadUrl: downloadUrl,
     icon: icon,
     providerName: providerName,
     onViewButtonClick: onViewActionClick,
     onDownloadButtonClick: onDownloadActionClick,
-    onResizeButtonClick: handleOnSizeClick,
-    size: size,
+    onResizeButtonClick: handleOnResizeClick,
+    size: width,
     title: title,
     testId: testId,
     url: url
@@ -92,6 +131,6 @@ var EmbedModal = function EmbedModal(_ref) {
   }))));
 };
 
-var _default = (0, _sizeExperiment.default)((0, _errorBoundary.default)(EmbedModal));
+var _default = (0, _sizeExperiment.default)((0, _analytics.default)((0, _errorBoundary.default)(EmbedModal)));
 
 exports.default = _default;

package/dist/cjs/view/EmbedModal/types.js

@@ -2,4 +2,12 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
+});
+exports.EmbedModalSize = void 0;
+var EmbedModalSize;
+exports.EmbedModalSize = EmbedModalSize;
+
+(function (EmbedModalSize) {
+  EmbedModalSize["Large"] = "large";
+  EmbedModalSize["Small"] = "small";
+})(EmbedModalSize || (exports.EmbedModalSize = EmbedModalSize = {}));

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

@@ -125,7 +125,8 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
   var linkActions = (0, _useSmartLinkActions.useSmartLinkActions)({
     url: url,
     appearance: _utils.SMART_CARD_ANALYTICS_DISPLAY,
-    analyticsHandler: analyticsHandler
+    analyticsHandler: analyticsHandler,
+    origin: 'smartLinkPreviewHoverCard'
   });
   var onActionClick = (0, _react.useCallback)(function (actionId) {
     if (actionId === 'preview-content') {

package/dist/cjs/view/InlineCard/IconAndTitleLayout/styled.js

@@ -43,12 +43,12 @@ var IconTitleWrapper = _styled.default.span(_templateObject3 || (_templateObject
 
 exports.IconTitleWrapper = IconTitleWrapper;
 
-var LozengeWrapper = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  vertical-align: 1px;\n  & > span {\n    margin-left: 4px;\n    padding: 2px 0 2px 0;\n  }\n"]))); // TODO: Replace overrides with proper AtlasKit solution.
+var LozengeWrapper = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  vertical-align: 1px;\n  & > span {\n    margin-left: 4px;\n  }\n"]))); // TODO: Replace overrides with proper AtlasKit solution.
 
 
 exports.LozengeWrapper = LozengeWrapper;
 
-var LozengeBlockWrapper = _styled.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  & > span {\n    margin-left: 4px;\n    padding: 2px 0 2px 0;\n  }\n"])));
+var LozengeBlockWrapper = _styled.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  & > span {\n    margin-left: 4px;\n  }\n"])));
 
 exports.LozengeBlockWrapper = LozengeBlockWrapper;
 

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

@@ -29,6 +29,10 @@ var _ModalHeader = require("./ModalHeader");
 
 var _utils = require("../../utils");
 
+var _analytics = _interopRequireDefault(require("../EmbedModal/components/analytics"));
+
+var _types = require("../EmbedModal/types");
+
 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; }
@@ -78,7 +82,8 @@ var Modal = function Modal(_ref) {
       providerName = _ref.providerName,
       metadata = _ref.metadata,
       icon = _ref.icon,
-      closeLabel = _ref.closeLabel,
+      _ref$closeLabel = _ref.closeLabel,
+      closeLabel = _ref$closeLabel === void 0 ? 'Close Preview' : _ref$closeLabel,
       iframeName = _ref.iframeName,
       title = _ref.title,
       url = _ref.url,
@@ -94,16 +99,35 @@ var Modal = function Modal(_ref) {
       isOpen = _useState2[0],
       setIsOpen = _useState2[1];
 
+  var openAt = (0, _react.useRef)();
+  var handleOnOpenComplete = (0, _react.useCallback)(function () {
+    openAt.current = Date.now();
+
+    if (onOpen) {
+      onOpen({
+        size: _types.EmbedModalSize.Small
+      });
+    }
+  }, [onOpen]);
+  var handleOnCloseComplete = (0, _react.useCallback)(function () {
+    if (onClose) {
+      var duration = openAt.current ? Date.now() - openAt.current : undefined;
+      onClose({
+        duration: duration,
+        size: _types.EmbedModalSize.Small
+      });
+    }
+  }, [onClose]);
   var sandbox = (0, _utils.getIframeSandboxAttribute)(isTrusted);
   return /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTransition, null, isOpen && /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
     height: "100%",
     width: "large",
     testId: testId,
-    onOpenComplete: onOpen,
+    onOpenComplete: handleOnOpenComplete,
     onClose: function onClose() {
       setIsOpen(false);
     },
-    onCloseComplete: onClose
+    onCloseComplete: handleOnCloseComplete
   }, /*#__PURE__*/_react.default.createElement(_ModalHeader.Header, {
     providerName: providerName,
     icon: icon,
@@ -129,5 +153,6 @@ var Modal = function Modal(_ref) {
   }))));
 };
 
-var _default = ModalWithErrorBoundary;
+var _default = (0, _analytics.default)(ModalWithErrorBoundary);
+
 exports.default = _default;

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

@@ -98,7 +98,7 @@ var Header = function Header(_ref) {
     testId: "preview-view-action",
     iconAfter: (0, _core.jsx)(_shortcut.default, {
       size: "small",
-      label: "go to source"
+      label: ""
     }),
     onClick: onViewActionClick
   }, providerName ? (0, _core.jsx)(_react.Fragment, null, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.viewIn), " ", providerName) : (0, _core.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.viewOriginal)), (0, _core.jsx)(_customThemeButton.default, {
@@ -106,7 +106,8 @@ var Header = function Header(_ref) {
     iconBefore: (0, _core.jsx)(_close.default, {
       label: label
     }),
-    onClick: onClose
+    onClick: onClose,
+    testId: "preview-close-button"
   }))));
 };
 

package/dist/es2019/__tests_external__/index.js

@@ -0,0 +1,6 @@
+export { InlineCardPageObject } from './page-objects/InlineCard';
+export { BlockCardPageObject } from './page-objects/BlockCard';
+export { EmbedCardPageObject } from './page-objects/EmbedCard';
+export { inlineSmartLinkRendersTestCase } from './test-cases/inline';
+export { blockSmartLinkRendersTestCase } from './test-cases/card';
+export { embedSmartLinkRendersTestCase } from './test-cases/embed';

package/dist/es2019/__tests_external__/page-objects/BaseCard.js

@@ -0,0 +1,61 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { InProductTestPageObject } from '@atlaskit/in-product-testing';
+export class BaseCardPageObject extends InProductTestPageObject {
+  constructor(cy, appearance) {
+    super(cy);
+    this.cy = cy;
+    this.appearance = appearance;
+  }
+
+  _toSelector(appearance, status) {
+    const viewSelector = status.replace(/_/g, '-');
+    return this.toTestId(`${appearance}-card-${viewSelector}-view`);
+  }
+
+  expectCardReady(numOfCards = 1, status = 'resolved') {
+    const selector = this._toSelector(this.appearance, status);
+
+    return this.cy // NOTE: `timeout` used since Smart Links rely on a network response.
+    .get(selector, {
+      timeout: BaseCardPageObject.CARD_TIMEOUT
+    }).should('have.length', numOfCards).each(element => {
+      this.cy.wrap(element) // NOTE: `be.visible` is used to ensure the file is still visible
+      // whilst it is being uploaded.
+      .should('be.visible');
+    });
+  }
+
+  expectCardNotExists(status = 'resolved') {
+    const selector = this._toSelector(this.appearance, status);
+
+    return this.cy.get(selector).should('not.exist');
+  }
+
+  findCardNth(nth = 1, status = 'resolved') {
+    const selector = this._toSelector(this.appearance, status);
+
+    return this.cy // NOTE: `timeout` used since Smart Links rely on a network response.
+    .get(selector, {
+      timeout: BaseCardPageObject.CARD_TIMEOUT
+    }).should('have.length.at.least', nth).should('be.visible').eq(nth - 1);
+  }
+
+  assertHrefRendered(url) {
+    return this.cy.get(`a[href="${url}"]`, {
+      timeout: BaseCardPageObject.CARD_TIMEOUT
+    }).should('be.visible');
+  }
+
+  assertHrefNotRendered(url) {
+    return this.cy.get(`a[href="${url}"]`, {
+      timeout: BaseCardPageObject.CARD_TIMEOUT
+    }).should('not.exist');
+  }
+
+  click(status = 'resolved') {
+    return this.findCardNth(1, status).click();
+  }
+
+}
+
+_defineProperty(BaseCardPageObject, "CARD_TIMEOUT", 15000);

package/dist/es2019/__tests_external__/page-objects/BlockCard.js

@@ -0,0 +1,8 @@
+import { BaseCardPageObject } from './BaseCard';
+export class BlockCardPageObject extends BaseCardPageObject {
+  constructor(cy) {
+    super(cy, 'block');
+    this.cy = cy;
+  }
+
+}

package/dist/es2019/__tests_external__/page-objects/EmbedCard.js

@@ -0,0 +1,8 @@
+import { BaseCardPageObject } from './BaseCard';
+export class EmbedCardPageObject extends BaseCardPageObject {
+  constructor(cy) {
+    super(cy, 'embed');
+    this.cy = cy;
+  }
+
+}

package/dist/es2019/__tests_external__/page-objects/InlineCard.js

@@ -0,0 +1,8 @@
+import { BaseCardPageObject } from './BaseCard';
+export class InlineCardPageObject extends BaseCardPageObject {
+  constructor(cy) {
+    super(cy, 'inline');
+    this.cy = cy;
+  }
+
+}

package/dist/es2019/__tests_external__/test-cases/card.js

@@ -0,0 +1,14 @@
+import { InProductTestCase } from '@atlaskit/in-product-testing';
+import { BlockCardPageObject } from '../page-objects/BlockCard';
+export const blockSmartLinkRendersTestCase = ({
+  url,
+  status = 'resolved'
+}) => new InProductTestCase({
+  title: 'Block Smart Link is visible in the resolved state',
+  id: 'block-smart-link-resolved',
+  assertions: cy => {
+    const blockCard = new BlockCardPageObject(cy);
+    blockCard.assertHrefRendered(url);
+    blockCard.expectCardReady(1, status);
+  }
+});