@atlaskit/media-ui 16.6.0 → 18.0.0

package/CHANGELOG.md

@@ -1,5 +1,106 @@
 # @atlaskit/media-ui
 
+## 18.0.0
+
+### Major Changes
+
+- [`47f58da5946`](https://bitbucket.org/atlassian/atlassian-frontend/commits/47f58da5946) - ED-13322, ED-13324, ED-13326, ED-13323, ED-13204: Upgrade and support react-intl@^5.18.1 including breaking API changes, types and tests in atlassian-frontend packages
+
+  What changed: Upgraded our react-intl support from ^2.6.0 to ^5.18.1. This means editor packages now rely on consumers installing ^5.18.1, otherwise editor usage of react-intl will mismatch with actual installed react-intl APIs.
+  Why change was made: As part of a coordinated upgrade effort across AF packages, as react-intl v2 is quite dated.
+  How consumer should update their code: Ensure react-intl ^5.18.1 is installed in consuming applications.
+
+  Upgrade guide: To consume atlassian-frontend packages that use react-intl5 setup a second provider for the new version, using an npm alias
+
+  ```js
+  "react-intl": "^2.6.0",
+  "react-intl-next": "npm:react-intl@^5.18.1",
+  ```
+
+  ```js
+  import { IntlProvider } from 'react-intl';
+  import { IntlProvider as IntlNextProvider } from 'react-intl-next';
+
+  return (
+    <IntlProvider
+      key={locale}
+      data-test-language={locale}
+      locale={locale}
+      defaultLocale={DEFAULT_LOCALE}
+      messages={messages}
+    >
+      <IntlNextProvider
+        key={locale}
+        data-test-language={locale}
+        locale={locale}
+        defaultLocale={DEFAULT_LOCALE}
+        messages={messages}
+      >
+        {children}
+      </IntlNextProvider>
+    </IntlProvider>
+  );
+  ```
+
+## 17.2.0
+
+### Minor Changes
+
+- [`ca519a86b1d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ca519a86b1d) - Add new prop forceSyncDisplay in MediaImage to provide an option of always showing images.
+  Enable MediaCard to turn on forceSyncDisplay when server side rendering is enabled.
+- [`af29def3dac`](https://bitbucket.org/atlassian/atlassian-frontend/commits/af29def3dac) - expose missing smart-card classnames
+
+  ```
+  import {
+    blockCardResolvedViewByClassName,
+    blockCardForbiddenViewLinkClassName,
+    blockCardContentClassName,
+    blockCardContentHeaderClassName,
+    blockCardContentHeaderNameClassName,
+    blockCardNotFoundViewClassName,
+    blockCardErroredViewClassName,
+  } from '@atlaskit/smart-card'
+
+  css`
+    .${blockCardContentHeaderNameClassName} {
+      background-color: red;
+    }
+  `
+  ```
+
+### Patch Changes
+
+- [`09f27f70093`](https://bitbucket.org/atlassian/atlassian-frontend/commits/09f27f70093) - Grant "clipboard-write" permission so that the browsing contexts within the iframe will have Clipboard API available
+- [`f124adcb18f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f124adcb18f) - Adding .md, .lock, .yaml, .yml, .tsx, .jsx as known extension types
+- [`fe8e5ca9a92`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fe8e5ca9a92) - [ux] MediaInline package now correctly shows a border around it upon being selected
+- Updated dependencies
+
+## 17.1.0
+
+### Minor Changes
+
+- [`269ee940b87`](https://bitbucket.org/atlassian/atlassian-frontend/commits/269ee940b87) - redesign error UI on new media card experience
+
+### Patch Changes
+
+- Updated dependencies
+
+## 17.0.0
+
+### Major Changes
+
+- [`cf853e39278`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cf853e39278) - [ux] Updated and refreshed media inline component
+
+### Minor Changes
+
+- [`cf853e39278`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cf853e39278) - [ux] Skip forward and backward buttons are added to inline media player
+
+### Patch Changes
+
+- [`cf853e39278`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cf853e39278) - Adds support for lazy loading of MediaImage
+- [`cf853e39278`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cf853e39278) - Adding lazy loading as the default for the SSR media card
+- Updated dependencies
+
 ## 16.6.0
 
 ### Minor Changes

package/dist/cjs/BlockCard/actions/AuthorizeAction.js

@@ -9,14 +9,14 @@ exports.AuthorizeAction = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _messages = require("../../messages");
 
 var AuthorizeAction = function AuthorizeAction(handler) {
   return {
     id: 'connect-account',
-    text: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.messages.connect_link_account_card),
+    text: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.connect_link_account_card),
     promise: function promise() {
       return new Promise(function (resolve) {
         return resolve(handler());

package/dist/cjs/BlockCard/actions/DownloadAction.js

@@ -5,8 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.downloadFunction = downloadFunction;
 exports.DownloadAction = void 0;
+exports.downloadFunction = downloadFunction;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
@@ -14,7 +14,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _mediaCommon = require("@atlaskit/media-common");
 
@@ -57,7 +57,7 @@ var DownloadAction = function DownloadAction(_ref2) {
   var url = _ref2.url;
   return {
     id: 'download-content',
-    text: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.messages.download),
+    text: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.download),
     promise: function promise() {
       return downloadFunction({
         url: url

package/dist/cjs/BlockCard/actions/ForbiddenAction.js

@@ -11,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _messages = require("../../messages");
 
@@ -21,7 +21,7 @@ var ForbiddenAction = function ForbiddenAction(handler) {
   var context = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
   return {
     id: id,
-    text: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, (0, _extends2.default)({}, message, {
+    text: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, message, {
       values: {
         context: context
       }

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

@@ -7,8 +7,8 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.previewFunction = previewFunction;
 exports.default = void 0;
+exports.previewFunction = previewFunction;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
@@ -24,7 +24,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactDom = _interopRequireDefault(require("react-dom"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _messages = require("../../messages");
 
@@ -84,7 +84,7 @@ function _previewFunction() {
           case 5:
             Modal = _context.sent;
 
-            _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_reactIntl.IntlProvider, {
+            _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
               locale: "en"
             }, /*#__PURE__*/_react.default.createElement(Modal.default, (0, _extends2.default)({}, rest, {
               onClose: function onClose() {
@@ -111,7 +111,7 @@ var _default = function _default(_ref2) {
       rest = (0, _objectWithoutProperties2.default)(_ref2, ["details"]);
   return {
     id: 'preview-content',
-    text: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.messages.preview),
+    text: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.preview),
     promise: function promise() {
       return previewFunction(_objectSpread({
         popupMountPointId: 'twp-editor-preview-iframe',

package/dist/cjs/BlockCard/actions/RetryAction.js

@@ -13,7 +13,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _messages = require("../../messages");
 
@@ -42,7 +42,7 @@ var RetryAction = function RetryAction(handler) {
 
       return promise;
     }(),
-    text: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.messages.try_again)
+    text: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.try_again)
   };
 };
 

package/dist/cjs/BlockCard/actions/ViewAction.js

@@ -5,8 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.viewFunction = viewFunction;
 exports.ViewAction = void 0;
+exports.viewFunction = viewFunction;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
@@ -14,7 +14,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _messages = require("../../messages");
 
@@ -55,7 +55,7 @@ var ViewAction = function ViewAction(_ref2) {
   var url = _ref2.url;
   return {
     id: 'view-content',
-    text: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.messages.view),
+    text: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.view),
     promise: function promise() {
       return viewFunction({
         url: url

package/dist/cjs/BlockCard/components/Action.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Action = exports.spinnerDelay = void 0;
+exports.spinnerDelay = exports.Action = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 

package/dist/cjs/BlockCard/components/ActionIcon.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ActionIcon = exports.spinnerStyles = void 0;
+exports.spinnerStyles = exports.ActionIcon = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 

package/dist/cjs/BlockCard/components/Byline.js

@@ -15,7 +15,8 @@ var _utils = require("../utils");
 var Byline = function Byline(_ref) {
   var text = _ref.text,
       children = _ref.children,
-      testId = _ref.testId;
+      testId = _ref.testId,
+      className = _ref.className;
   return (0, _core.jsx)("span", {
     css: (0, _utils.mq)({
       fontSize: (0, _utils.gs)(1.5),
@@ -37,7 +38,8 @@ var Byline = function Byline(_ref) {
       // due to HTML its unwrapping behaviour on paste.
       MozUserSelect: 'none'
     }),
-    "data-testid": testId
+    "data-testid": testId,
+    className: className
   }, text || children);
 };
 

package/dist/cjs/BlockCard/components/Content.js

@@ -3,13 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Content = void 0;
+exports.blockCardContentClassName = exports.Content = void 0;
 
 var _core = require("@emotion/core");
 
 var _utils = require("../utils");
 
 /** @jsx jsx */
+var blockCardContentClassName = 'block-card-content';
+exports.blockCardContentClassName = blockCardContentClassName;
+
 var Content = function Content(_ref) {
   var children = _ref.children,
       _ref$isCompact = _ref.isCompact,
@@ -22,7 +25,8 @@ var Content = function Content(_ref) {
       justifyContent: isCompact ? 'unset' : ['unset', 'space-between'],
       flexGrow: 1
     }),
-    "data-trello-do-not-use-override": "block-card-content"
+    "data-trello-do-not-use-override": "block-card-content",
+    className: blockCardContentClassName
   }, children);
 };
 

package/dist/cjs/BlockCard/components/ContentFooter.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ContentFooter = exports.contentFooterClassName = void 0;
+exports.contentFooterClassName = exports.ContentFooter = void 0;
 
 var _core = require("@emotion/core");
 

package/dist/cjs/BlockCard/components/ContentHeader.js

@@ -3,11 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ContentHeader = void 0;
+exports.blockCardContentHeaderClassName = exports.ContentHeader = void 0;
 
 var _core = require("@emotion/core");
 
 /** @jsx jsx */
+var blockCardContentHeaderClassName = 'block-card-content-header';
+exports.blockCardContentHeaderClassName = blockCardContentHeaderClassName;
+
 var ContentHeader = function ContentHeader(_ref) {
   var onClick = _ref.onClick,
       link = _ref.link,
@@ -23,7 +26,8 @@ var ContentHeader = function ContentHeader(_ref) {
       // due to HTML its unwrapping behaviour on paste.
       MozUserSelect: 'none'
     },
-    "data-trello-do-not-use-override": "block-card-content-header"
+    "data-trello-do-not-use-override": "block-card-content-header",
+    className: blockCardContentHeaderClassName
   }, children);
 };
 

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CompactFrame = exports.ExpandedFrame = exports.Frame = void 0;
+exports.Frame = exports.ExpandedFrame = exports.CompactFrame = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 

package/dist/cjs/BlockCard/components/Icon.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Icon = exports.blockCardIconImageClassName = void 0;
+exports.blockCardIconImageClassName = exports.Icon = void 0;
 
 var _core = require("@emotion/core");
 
@@ -40,8 +40,7 @@ var Icon = function Icon(_ref) {
         width: (0, _utils.gs)(2)
       },
       src: url,
-      "data-testid": "".concat(testId, "-image"),
-      className: blockCardIconImageClassName
+      "data-testid": "".concat(testId, "-image")
     }),
     errored: placeholder
   });
@@ -53,7 +52,8 @@ var Icon = function Icon(_ref) {
       alignItems: 'center',
       justifyContent: 'center'
     },
-    "data-testid": testId
+    "data-testid": testId,
+    className: blockCardIconImageClassName
   }, icon || image || placeholder);
 };
 

package/dist/cjs/BlockCard/components/Link.js

@@ -13,9 +13,11 @@ var _colors = require("@atlaskit/theme/colors");
 var Link = function Link(_ref) {
   var url = _ref.url,
       _ref$testId = _ref.testId,
-      testId = _ref$testId === void 0 ? 'block-card' : _ref$testId;
+      testId = _ref$testId === void 0 ? 'block-card' : _ref$testId,
+      className = _ref.className;
   return (0, _core.jsx)("span", {
     "data-testid": "".concat(testId, "-link"),
+    className: className,
     css: {
       color: _colors.B400,
       wordBreak: 'break-all'

package/dist/cjs/BlockCard/components/MetadataList.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MetadataList = exports.metadataListClassName = void 0;
+exports.metadataListClassName = exports.MetadataList = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 

package/dist/cjs/BlockCard/components/ModalHeader.js

@@ -21,7 +21,7 @@ var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _utils = require("../utils");
 
@@ -89,7 +89,7 @@ var Header = function Header(_ref) {
     appearance: "primary",
     href: download,
     onClick: onDownloadActionClick
-  }, (0, _core.jsx)(_reactIntl.FormattedMessage, _messages.messages.download)), url && (0, _core.jsx)(_customThemeButton.default, {
+  }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.download)), url && (0, _core.jsx)(_customThemeButton.default, {
     href: url,
     target: "_blank",
     appearance: "link",
@@ -99,7 +99,7 @@ var Header = function Header(_ref) {
       label: "go to source"
     }),
     onClick: onViewActionClick
-  }, providerName ? (0, _core.jsx)(_react.Fragment, null, (0, _core.jsx)(_reactIntl.FormattedMessage, _messages.messages.viewIn), " ", providerName) : (0, _core.jsx)(_reactIntl.FormattedMessage, _messages.messages.viewOriginal)), (0, _core.jsx)(_customThemeButton.default, {
+  }, 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, {
     appearance: "subtle",
     iconBefore: (0, _core.jsx)(_close.default, {
       label: label

package/dist/cjs/BlockCard/components/Name.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Name = void 0;
+exports.blockCardContentHeaderNameClassName = exports.Name = void 0;
 
 var _core = require("@emotion/core");
 
@@ -12,6 +12,9 @@ var _constants = require("@atlaskit/theme/constants");
 var _utils = require("../utils");
 
 /** @jsx jsx */
+var blockCardContentHeaderNameClassName = 'block-card-content-header-name';
+exports.blockCardContentHeaderNameClassName = blockCardContentHeaderNameClassName;
+
 var Name = function Name(_ref) {
   var name = _ref.name,
       _ref$isLeftPadded = _ref.isLeftPadded,
@@ -36,7 +39,8 @@ var Name = function Name(_ref) {
       maxHeight: (0, _utils.gs)(6)
     },
     "data-testid": testId,
-    "data-trello-do-not-use-override": "block-card-content-header-name"
+    "data-trello-do-not-use-override": "block-card-content-header-name",
+    className: blockCardContentHeaderNameClassName
   }, name);
 };
 

package/dist/cjs/BlockCard/index.js

@@ -5,28 +5,22 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "PreviewAction", {
-  enumerable: true,
-  get: function get() {
-    return _PreviewAction.default;
-  }
-});
 Object.defineProperty(exports, "AuthorizeAction", {
   enumerable: true,
   get: function get() {
     return _AuthorizeAction.AuthorizeAction;
   }
 });
-Object.defineProperty(exports, "ForbiddenAction", {
+Object.defineProperty(exports, "BlockCardErroredView", {
   enumerable: true,
   get: function get() {
-    return _ForbiddenAction.ForbiddenAction;
+    return _ErroredView.ErroredView;
   }
 });
-Object.defineProperty(exports, "BlockCardResolvedView", {
+Object.defineProperty(exports, "BlockCardForbiddenView", {
   enumerable: true,
   get: function get() {
-    return _ResolvedView.ResolvedView;
+    return _ForbiddenView.ForbiddenView;
   }
 });
 Object.defineProperty(exports, "BlockCardNotFoundView", {
@@ -35,6 +29,12 @@ Object.defineProperty(exports, "BlockCardNotFoundView", {
     return _NotFoundView.NotFoundView;
   }
 });
+Object.defineProperty(exports, "BlockCardResolvedView", {
+  enumerable: true,
+  get: function get() {
+    return _ResolvedView.ResolvedView;
+  }
+});
 Object.defineProperty(exports, "BlockCardResolvingView", {
   enumerable: true,
   get: function get() {
@@ -47,16 +47,16 @@ Object.defineProperty(exports, "BlockCardUnauthorisedView", {
     return _UnauthorizedView.UnauthorizedView;
   }
 });
-Object.defineProperty(exports, "BlockCardForbiddenView", {
+Object.defineProperty(exports, "ForbiddenAction", {
   enumerable: true,
   get: function get() {
-    return _ForbiddenView.ForbiddenView;
+    return _ForbiddenAction.ForbiddenAction;
   }
 });
-Object.defineProperty(exports, "BlockCardErroredView", {
+Object.defineProperty(exports, "PreviewAction", {
   enumerable: true,
   get: function get() {
-    return _ErroredView.ErroredView;
+    return _PreviewAction.default;
   }
 });
 

package/dist/cjs/BlockCard/utils/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.NotFoundImage = exports.CelebrationImage = exports.LockImage = void 0;
+exports.NotFoundImage = exports.LockImage = exports.CelebrationImage = void 0;
 var CDN_BASE_URL = 'https://smart-links-cdn.us-east-1.prod.public.atl-paas.net';
 var LockImage = "".concat(CDN_BASE_URL, "/lock.svg");
 exports.LockImage = LockImage;

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.mq = exports.br = exports.gs = void 0;
+exports.mq = exports.gs = exports.br = void 0;
 
 var _constants = require("@atlaskit/theme/constants");
 

package/dist/cjs/BlockCard/views/ErroredView.js

@@ -5,13 +5,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ErroredView = void 0;
+exports.blockCardErroredViewClassName = exports.ErroredView = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _core = require("@emotion/core");
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _react = require("react");
 
@@ -47,6 +47,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 var textDescriptionProps = _objectSpread({}, _messages.messages.could_not_load_link);
 
+var blockCardErroredViewClassName = 'block-card-errored-view';
+exports.blockCardErroredViewClassName = blockCardErroredViewClassName;
+
 var ErroredView = function ErroredView(_ref) {
   var _ref$isSelected = _ref.isSelected,
       isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
@@ -70,6 +73,7 @@ var ErroredView = function ErroredView(_ref) {
   return (0, _core.jsx)(_Frame.Frame, {
     isSelected: isSelected,
     testId: testId,
+    className: blockCardErroredViewClassName,
     isFluidHeight: true,
     inheritDimensions: inheritDimensions
   }, (0, _core.jsx)(_Content.Content, {
@@ -87,7 +91,7 @@ var ErroredView = function ErroredView(_ref) {
       primaryColor: _colors.R300,
       testId: "".concat(testId, "-warning-icon")
     }),
-    text: (0, _core.jsx)(_reactIntl.FormattedMessage, textDescriptionProps)
+    text: (0, _core.jsx)(_reactIntlNext.FormattedMessage, textDescriptionProps)
   }))), (0, _core.jsx)(_ContentFooter.ContentFooter, null, (0, _core.jsx)(_ActionList.ActionList, {
     items: actions
   }))));

package/dist/cjs/BlockCard/views/ForbiddenView.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ForbiddenView = exports.blockCardForbiddenViewClassName = void 0;
+exports.blockCardForbiddenViewLinkClassName = exports.blockCardForbiddenViewClassName = exports.ForbiddenView = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -13,7 +13,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 
 var _core = require("@emotion/core");
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -44,6 +44,8 @@ var _UnresolvedText = require("../components/UnresolvedText");
 /** @jsx jsx */
 var blockCardForbiddenViewClassName = 'block-card-forbidden-view';
 exports.blockCardForbiddenViewClassName = blockCardForbiddenViewClassName;
+var blockCardForbiddenViewLinkClassName = 'block-card-forbidden-view-link';
+exports.blockCardForbiddenViewLinkClassName = blockCardForbiddenViewLinkClassName;
 
 var ForbiddenView = function ForbiddenView(_ref) {
   var _ref$context = _ref.context,
@@ -85,7 +87,8 @@ var ForbiddenView = function ForbiddenView(_ref) {
     link: link
   }, (0, _core.jsx)(_Link.Link, {
     url: link,
-    testId: testId
+    testId: testId,
+    className: blockCardForbiddenViewLinkClassName
   })), (0, _core.jsx)(_Byline.Byline, null, (0, _core.jsx)(_UnresolvedText.UnresolvedText, {
     icon: (0, _core.jsx)(_lockFilled.default, {
       label: "forbidden-lock-icon",
@@ -93,7 +96,7 @@ var ForbiddenView = function ForbiddenView(_ref) {
       primaryColor: _colors.R300,
       testId: "".concat(testId, "-lock-icon")
     }),
-    text: (0, _core.jsx)(_reactIntl.FormattedMessage, (0, _extends2.default)({}, _messages.messages[descriptiveMessageKey], {
+    text: (0, _core.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages[descriptiveMessageKey], {
       values: {
         context: context.text
       }