@atlaskit/smart-card 21.1.0 → 21.1.3

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/smart-card
 
+## 21.1.3
+
+### Patch Changes
+
+- [`d0b3a262e03`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d0b3a262e03) - [ux] Embed Preview: Update the new embed preview modal UX
+
+  - Make title smaller
+  - Reduce gap between element
+  - Hide resize button on smaller screen
+
+## 21.1.2
+
+### Patch Changes
+
+- [`a024e3c77ec`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a024e3c77ec) - Embed Preview: Add embed preview modal (WIP)
+
+## 21.1.1
+
+### Patch Changes
+
+- [`e6a3654a137`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e6a3654a137) - Fix bug where smart cards used `elevation.surface` instead of `elevation.surface.raised` design tokens for card backgrounds.
+
 ## 21.1.0
 
 ### Minor Changes

package/dist/cjs/messages.js

@@ -173,6 +173,21 @@ var messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Preview',
     description: 'Click to view a richer view of your content, without needing to navigate to it.'
   },
+  preview_close: {
+    id: 'fabric.linking.preview_close',
+    defaultMessage: 'Close preview',
+    description: 'Click to close embed preview modal.'
+  },
+  preview_max_size: {
+    id: 'fabric.linking.preview_max_size',
+    defaultMessage: 'View full screen',
+    description: 'Click to increase embed preview modal size to a maximum viewing size.'
+  },
+  preview_min_size: {
+    id: 'fabric.linking.preview_min_size',
+    defaultMessage: 'Close full screen',
+    description: 'Click to decrease embed preview modal size to a minimum viewing size.'
+  },
   priority_blocker: {
     id: 'fabric.linking.priority_blocker',
     defaultMessage: 'Blocker',

package/dist/cjs/utils/token.js

@@ -9,7 +9,7 @@ var _tokens = require("@atlaskit/tokens");
 
 var tokens = {
   actionIcon: (0, _tokens.token)('color.icon', '#44546F'),
-  background: (0, _tokens.token)('elevation.surface', '#FFFFFF'),
+  background: (0, _tokens.token)('elevation.surface.raised', '#FFFFFF'),
   badgeIcon: (0, _tokens.token)('color.icon.subtle', '#626F86'),
   badgeText: (0, _tokens.token)('color.text.subtlest', '#626F86'),
   blackLink: (0, _tokens.token)('color.text.subtle', '#44546F'),

package/dist/cjs/version.json

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

package/dist/cjs/view/BlockCard/components/Frame.js

@@ -37,7 +37,7 @@ var sharedFrameStyles = {
   maxWidth: (0, _utils.gs)(95),
   width: '100%',
   display: 'flex',
-  backgroundColor: (0, _tokens.token)('elevation.surface', 'white')
+  backgroundColor: (0, _tokens.token)('elevation.surface.raised', 'white')
 };
 
 var ExpandedFrame = function ExpandedFrame(_ref) {

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

@@ -144,7 +144,7 @@ exports.TextWrapper = TextWrapper;
 // NB: `overflow` is kept as `hidden` since
 // the internal contents of the `iframe` should
 // manage scrolling behaviour.
-var Content = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  background-color: ", ";\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  top: ", ";\n  overflow: hidden;\n  height: calc(100% - ", ");\n  transition: box-shadow 0.3s;\n\n  > .calc-height > div > div {\n    left: unset !important;\n    width: unset !important;\n    height: unset !important;\n    position: initial !important;\n    padding-bottom: unset !important;\n  }\n  > .embed-preview > div {\n    margin: 0 auto;\n  }\n\n  ", ";\n"])), borderRadius, cardShadow, (0, _tokens.token)('elevation.surface', 'white'), (0, _utils.gs)(4), (0, _utils.gs)(4), function (_ref9) {
+var Content = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  background-color: ", ";\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  top: ", ";\n  overflow: hidden;\n  height: calc(100% - ", ");\n  transition: box-shadow 0.3s;\n\n  > .calc-height > div > div {\n    left: unset !important;\n    width: unset !important;\n    height: unset !important;\n    position: initial !important;\n    padding-bottom: unset !important;\n  }\n  > .embed-preview > div {\n    margin: 0 auto;\n  }\n\n  ", ";\n"])), borderRadius, cardShadow, (0, _tokens.token)('elevation.surface.raised', 'white'), (0, _utils.gs)(4), (0, _utils.gs)(4), function (_ref9) {
   var isInteractive = _ref9.isInteractive;
 
   if (isInteractive) {

package/dist/cjs/view/EmbedModal/components/embed-content/index.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _core = require("@emotion/core");
+
+var _utils = require("../../../../utils");
+
+var _templateObject;
+
+var iframeCss = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: calc(100vh - 208px);\n"])));
+
+var EmbedContent = function EmbedContent(_ref) {
+  var isTrusted = _ref.isTrusted,
+      name = _ref.name,
+      src = _ref.src,
+      testId = _ref.testId;
+  var sandbox = (0, _utils.getIframeSandboxAttribute)(isTrusted);
+  var props = {
+    css: iframeCss,
+    frameBorder: 0,
+    name: name,
+    sandbox: sandbox,
+    src: src,
+    'data-testid': "".concat(testId, "-embed")
+  };
+  return src ? (0, _core.jsx)("iframe", (0, _extends2.default)({
+    src: src
+  }, props)) : (0, _core.jsx)("iframe", props);
+};
+
+var _default = EmbedContent;
+exports.default = _default;

package/dist/cjs/view/EmbedModal/components/embed-content/types.js

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

package/dist/cjs/view/EmbedModal/components/error-boundary/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactErrorBoundary = require("react-error-boundary");
+
+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 FallbackComponent = function FallbackComponent() {
+  return /*#__PURE__*/_react.default.createElement("span", null);
+};
+
+var withErrorBoundary = function withErrorBoundary(Component) {
+  return function (props) {
+    var onOpenFailed = props.onOpenFailed;
+    var onError = (0, _react.useCallback)(function (error, errorInfo) {
+      if (onOpenFailed) {
+        onOpenFailed(error, errorInfo);
+      }
+    }, [onOpenFailed]);
+    return /*#__PURE__*/_react.default.createElement(_reactErrorBoundary.ErrorBoundary, {
+      FallbackComponent: FallbackComponent,
+      onError: onError
+    }, /*#__PURE__*/_react.default.createElement(Component, props));
+  };
+};
+
+var _default = withErrorBoundary;
+exports.default = _default;

package/dist/cjs/view/EmbedModal/components/link-info/index.js

@@ -0,0 +1,129 @@
+"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 _core = require("@emotion/core");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactIntlNext = require("react-intl-next");
+
+var _modalDialog = require("@atlaskit/modal-dialog");
+
+var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
+
+var _download = _interopRequireDefault(require("@atlaskit/icon/glyph/download"));
+
+var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"));
+
+var _vidFullScreenOn = _interopRequireDefault(require("@atlaskit/icon/glyph/vid-full-screen-on"));
+
+var _vidFullScreenOff = _interopRequireDefault(require("@atlaskit/icon/glyph/vid-full-screen-off"));
+
+var _Icon = require("../../../common/Icon");
+
+var _messages = require("../../../../messages");
+
+var _constants = require("../../constants");
+
+var _linkInfoButton = _interopRequireDefault(require("./link-info-button"));
+
+var _styled = require("./styled");
+
+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; }
+
+/** @jsx jsx */
+var LinkInfo = function LinkInfo(_ref) {
+  var downloadUrl = _ref.downloadUrl,
+      icon = _ref.icon,
+      providerName = _ref.providerName,
+      onDownloadButtonClick = _ref.onDownloadButtonClick,
+      onResizeButtonClick = _ref.onResizeButtonClick,
+      onViewButtonClick = _ref.onViewButtonClick,
+      size = _ref.size,
+      testId = _ref.testId,
+      title = _ref.title,
+      url = _ref.url;
+
+  var _useModal = (0, _modalDialog.useModal)(),
+      onClose = _useModal.onClose;
+
+  var downloadButton = (0, _react.useMemo)(function () {
+    if (downloadUrl) {
+      return (0, _core.jsx)(_linkInfoButton.default, {
+        content: (0, _core.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.download),
+        href: downloadUrl,
+        icon: (0, _core.jsx)(_download.default, {
+          label: _messages.messages.download.defaultMessage
+        }),
+        onClick: onDownloadButtonClick,
+        testId: "".concat(testId, "-download")
+      });
+    }
+  }, [downloadUrl, onDownloadButtonClick, testId]);
+  var urlButton = (0, _react.useMemo)(function () {
+    if (url) {
+      var content = providerName ? (0, _core.jsx)(_react.default.Fragment, null, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.viewIn), " ", providerName) : (0, _core.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.viewOriginal);
+      return (0, _core.jsx)(_linkInfoButton.default, {
+        content: content,
+        href: url,
+        icon: (0, _core.jsx)(_shortcut.default, {
+          label: _messages.messages.viewOriginal.defaultMessage
+        }),
+        onClick: onViewButtonClick,
+        target: "_blank",
+        testId: "".concat(testId, "-url")
+      });
+    }
+  }, [onViewButtonClick, providerName, testId, url]);
+  var sizeButton = (0, _react.useMemo)(function () {
+    var isFullScreen = size === _constants.MAX_MODAL_SIZE;
+    var message = isFullScreen ? _messages.messages.preview_min_size : _messages.messages.preview_max_size;
+    var icon = isFullScreen ? (0, _core.jsx)(_vidFullScreenOff.default, {
+      label: message.defaultMessage
+    }) : (0, _core.jsx)(_vidFullScreenOn.default, {
+      label: message.defaultMessage
+    });
+    return (0, _core.jsx)("span", {
+      className: "smart-link-resize-button"
+    }, (0, _core.jsx)(_linkInfoButton.default, {
+      content: (0, _core.jsx)(_reactIntlNext.FormattedMessage, message),
+      icon: icon,
+      onClick: onResizeButtonClick,
+      testId: "".concat(testId, "-resize")
+    }));
+  }, [onResizeButtonClick, size, testId]);
+  return (0, _core.jsx)("div", {
+    css: _styled.containerStyles
+  }, icon && (0, _core.jsx)("div", {
+    css: _styled.iconCss,
+    "data-testid": "".concat(testId, "-icon")
+  }, (0, _core.jsx)(_Icon.Icon, icon)), (0, _core.jsx)("div", {
+    css: _styled.titleCss
+  }, (0, _core.jsx)("h3", {
+    "data-testid": "".concat(testId, "-title")
+  }, title), (0, _core.jsx)("span", {
+    tabIndex: 0
+  })), (0, _core.jsx)("div", {
+    css: _styled.actionCss
+  }, downloadButton, urlButton, sizeButton, (0, _core.jsx)(_linkInfoButton.default, {
+    content: (0, _core.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.preview_close),
+    icon: (0, _core.jsx)(_cross.default, {
+      label: _messages.messages.preview_close.defaultMessage
+    }),
+    onClick: onClose,
+    testId: "".concat(testId, "-close")
+  })));
+};
+
+var _default = LinkInfo;
+exports.default = _default;

package/dist/cjs/view/EmbedModal/components/link-info/link-info-button/index.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+
+var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+
+var LinkInfoButton = function LinkInfoButton(_ref) {
+  var content = _ref.content,
+      href = _ref.href,
+      icon = _ref.icon,
+      onClick = _ref.onClick,
+      target = _ref.target,
+      testId = _ref.testId;
+  return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    content: content,
+    hideTooltipOnClick: true,
+    position: "top",
+    tag: "span",
+    testId: "".concat(testId, "-tooltip")
+  }, /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+    appearance: "subtle",
+    href: href,
+    iconBefore: icon,
+    onClick: onClick,
+    spacing: "none",
+    target: target,
+    testId: "".concat(testId, "-button")
+  }));
+};
+
+var _default = LinkInfoButton;
+exports.default = _default;

package/dist/cjs/view/EmbedModal/components/link-info/link-info-button/types.js

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

package/dist/cjs/view/EmbedModal/components/link-info/styled.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.titleCss = exports.iconCss = exports.containerStyles = exports.actionCss = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _core = require("@emotion/core");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+var containerStyles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n  gap: 8px;\n  justify-content: space-between;\n  // AK ModalBody has 2px padding top and bottom.\n  // Using 14px here to create 16px gap between\n  // link info and iframe\n  padding: 24px 24px 14px 24px;\n"])));
+exports.containerStyles = containerStyles;
+var iconSize = '24px';
+var iconCss = (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  img,\n  span,\n  svg {\n    height: ", ";\n    min-height: ", ";\n    max-height: ", ";\n    width: ", ";\n    min-width: ", ";\n    max-width: ", ";\n  }\n"])), iconSize, iconSize, iconSize, iconSize, iconSize, iconSize);
+exports.iconCss = iconCss;
+var height = '20px';
+var titleCss = (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 1 auto;\n\n  h3 {\n    flex: 1 1 auto;\n    font-size: 16px;\n    font-weight: 400;\n    line-height: ", ";\n\n    display: -webkit-box;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: break-word;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    // Fallback options\n    @supports not (-webkit-line-clamp: 1) {\n      max-height: ", ";\n    }\n  }\n"])), height, height);
+exports.titleCss = titleCss;
+var actionCss = (0, _core.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 0 0 auto;\n  gap: 4px;\n  line-height: ", ";\n  span {\n    line-height: ", ";\n  }\n\n  @media only screen and (max-width: 980px) {\n    // Hide resize button if the screen is smaller than the min width\n    // or too small to have enough impact to matter.\n    .smart-link-resize-button {\n      display: none;\n    }\n  }\n"])), height, height);
+exports.actionCss = actionCss;

package/dist/cjs/view/EmbedModal/components/link-info/types.js

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

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

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MIN_MODAL_SIZE = exports.MAX_MODAL_SIZE = void 0;
+var MAX_MODAL_SIZE = '100%';
+exports.MAX_MODAL_SIZE = MAX_MODAL_SIZE;
+var MIN_MODAL_SIZE = 'large';
+exports.MIN_MODAL_SIZE = MIN_MODAL_SIZE;

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

@@ -0,0 +1,93 @@
+"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
+
+var _linkInfo = _interopRequireDefault(require("./components/link-info"));
+
+var _constants = require("./constants");
+
+var _embedContent = _interopRequireDefault(require("./components/embed-content"));
+
+var _errorBoundary = _interopRequireDefault(require("./components/error-boundary"));
+
+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 EmbedModal = function EmbedModal(_ref) {
+  var downloadUrl = _ref.download,
+      icon = _ref.icon,
+      iframeName = _ref.iframeName,
+      _ref$isTrusted = _ref.isTrusted,
+      isTrusted = _ref$isTrusted === void 0 ? false : _ref$isTrusted,
+      onClose = _ref.onClose,
+      onDownloadActionClick = _ref.onDownloadActionClick,
+      onOpen = _ref.onOpen,
+      onViewActionClick = _ref.onViewActionClick,
+      providerName = _ref.providerName,
+      showModal = _ref.showModal,
+      src = _ref.src,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-links-preview-modal' : _ref$testId,
+      title = _ref.title,
+      url = _ref.url;
+
+  var _useState = (0, _react.useState)(showModal),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(_constants.MIN_MODAL_SIZE),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      size = _useState4[0],
+      setSize = _useState4[1];
+
+  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]);
+  return /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTransition, null, isOpen && /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
+    height: "100%",
+    onClose: handleOnClose,
+    onCloseComplete: onClose,
+    onOpenComplete: onOpen,
+    testId: testId,
+    width: size
+  }, /*#__PURE__*/_react.default.createElement(_linkInfo.default, {
+    downloadUrl: downloadUrl,
+    icon: icon,
+    providerName: providerName,
+    onViewButtonClick: onViewActionClick,
+    onDownloadButtonClick: onDownloadActionClick,
+    onResizeButtonClick: handleOnSizeClick,
+    size: size,
+    title: title,
+    testId: testId,
+    url: url
+  }), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, /*#__PURE__*/_react.default.createElement(_embedContent.default, {
+    isTrusted: isTrusted,
+    name: iframeName,
+    src: src,
+    testId: testId
+  }))));
+};
+
+var _default = (0, _errorBoundary.default)(EmbedModal);
+
+exports.default = _default;

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

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

package/dist/es2019/messages.js

@@ -165,6 +165,21 @@ export const messages = defineMessages({
     defaultMessage: 'Preview',
     description: 'Click to view a richer view of your content, without needing to navigate to it.'
   },
+  preview_close: {
+    id: 'fabric.linking.preview_close',
+    defaultMessage: 'Close preview',
+    description: 'Click to close embed preview modal.'
+  },
+  preview_max_size: {
+    id: 'fabric.linking.preview_max_size',
+    defaultMessage: 'View full screen',
+    description: 'Click to increase embed preview modal size to a maximum viewing size.'
+  },
+  preview_min_size: {
+    id: 'fabric.linking.preview_min_size',
+    defaultMessage: 'Close full screen',
+    description: 'Click to decrease embed preview modal size to a minimum viewing size.'
+  },
   priority_blocker: {
     id: 'fabric.linking.priority_blocker',
     defaultMessage: 'Blocker',

package/dist/es2019/utils/token.js

@@ -1,7 +1,7 @@
 import { token } from '@atlaskit/tokens';
 export const tokens = {
   actionIcon: token('color.icon', '#44546F'),
-  background: token('elevation.surface', '#FFFFFF'),
+  background: token('elevation.surface.raised', '#FFFFFF'),
   badgeIcon: token('color.icon.subtle', '#626F86'),
   badgeText: token('color.text.subtlest', '#626F86'),
   blackLink: token('color.text.subtle', '#44546F'),

package/dist/es2019/version.json

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

package/dist/es2019/view/BlockCard/components/Frame.js

@@ -13,7 +13,7 @@ const sharedFrameStyles = {
   maxWidth: gs(95),
   width: '100%',
   display: 'flex',
-  backgroundColor: token('elevation.surface', 'white')
+  backgroundColor: token('elevation.surface.raised', 'white')
 };
 export const ExpandedFrame = ({
   children,

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

@@ -191,7 +191,7 @@ export const TextWrapper = styled.div`
 export const Content = styled.div`
   ${borderRadius}
   ${cardShadow}
-  background-color: ${token('elevation.surface', 'white')};
+  background-color: ${token('elevation.surface.raised', 'white')};
   position: absolute;
   z-index: 1;
   width: 100%;

package/dist/es2019/view/EmbedModal/components/embed-content/index.js

@@ -0,0 +1,31 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { getIframeSandboxAttribute } from '../../../../utils';
+const iframeCss = css`
+  width: 100%;
+  height: calc(100vh - 208px);
+`;
+
+const EmbedContent = ({
+  isTrusted,
+  name,
+  src,
+  testId
+}) => {
+  const sandbox = getIframeSandboxAttribute(isTrusted);
+  const props = {
+    css: iframeCss,
+    frameBorder: 0,
+    name,
+    sandbox,
+    src,
+    'data-testid': `${testId}-embed`
+  };
+  return src ? jsx("iframe", _extends({
+    src: src
+  }, props)) : jsx("iframe", props);
+};
+
+export default EmbedContent;

package/dist/es2019/view/EmbedModal/components/embed-content/types.js

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

package/dist/es2019/view/EmbedModal/components/error-boundary/index.js

@@ -0,0 +1,21 @@
+import React, { useCallback } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+
+const FallbackComponent = () => /*#__PURE__*/React.createElement("span", null);
+
+const withErrorBoundary = Component => props => {
+  const {
+    onOpenFailed
+  } = props;
+  const onError = useCallback((error, errorInfo) => {
+    if (onOpenFailed) {
+      onOpenFailed(error, errorInfo);
+    }
+  }, [onOpenFailed]);
+  return /*#__PURE__*/React.createElement(ErrorBoundary, {
+    FallbackComponent: FallbackComponent,
+    onError: onError
+  }, /*#__PURE__*/React.createElement(Component, props));
+};
+
+export default withErrorBoundary;