@atlaskit/smart-card 23.4.1 → 23.4.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/smart-card
 
+## 23.4.3
+
+### Patch Changes
+
+- [`85de18a2d79`](https://bitbucket.org/atlassian/atlassian-frontend/commits/85de18a2d79) - [ux] Enable text wrapping in contents of unresolved views and allow scrolling in when embed size is small.
+
+## 23.4.2
+
+### Patch Changes
+
+- [`306c81c6551`](https://bitbucket.org/atlassian/atlassian-frontend/commits/306c81c6551) - [ux] Added unresolved views for a Flexible Block card. At the moment these views are not exposed, but they will be used when a Block Card is replaced with Flexible UI.
+
 ## 23.4.1
 
 ### Patch Changes

package/dist/cjs/version.json

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

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

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AuthorizeAction = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactIntlNext = require("react-intl-next");
+
+var _constants = require("../../../../constants");
+
+var _messages = require("../../../../messages");
+
+/**
+ * Returns a CustomActionItem with a "Connect" default message
+ *
+ * @see CustomActionItem
+ * @param onAuthorize a function that will be called on the click of the button
+ */
+var AuthorizeAction = function AuthorizeAction(onAuthorize) {
+  return {
+    name: _constants.ActionName.CustomAction,
+    content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.connect_link_account_card),
+    onClick: onAuthorize
+  };
+};
+
+exports.AuthorizeAction = AuthorizeAction;

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

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ForbiddenAction = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactIntlNext = require("react-intl-next");
+
+var _constants = require("../../../../constants");
+
+var _messages = require("../../../../messages");
+
+/**
+ * Returns a CustomActionItem with a "Try Another Account" default message
+ *
+ * @see CustomActionItem
+ * @param onAuthorize a function that will be called on the click of the button
+ */
+var ForbiddenAction = function ForbiddenAction(onAuthorize) {
+  return {
+    name: _constants.ActionName.CustomAction,
+    content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.try_another_account),
+    onClick: onAuthorize
+  };
+};
+
+exports.ForbiddenAction = ForbiddenAction;

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

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RetryAction = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactIntlNext = require("react-intl-next");
+
+var _constants = require("../../../../constants");
+
+var _messages = require("../../../../messages");
+
+/**
+ * Returns a CustomActionItem with a "Retry" default message
+ *
+ * @see CustomActionItem
+ * @param onRetry a function that will be called on the click of the "Retry" button
+ */
+var RetryAction = function RetryAction(onRetry) {
+  return {
+    name: _constants.ActionName.CustomAction,
+    onClick: onRetry,
+    content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.try_again)
+  };
+};
+
+exports.RetryAction = RetryAction;

package/dist/cjs/view/BlockCard/components/flexible/footer/index.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@emotion/react");
+
+var _elements = require("../../../../FlexibleCard/components/elements");
+
+var _elementGroup = _interopRequireDefault(require("../../../../FlexibleCard/components/blocks/element-group"));
+
+var _constants = require("../../../../../constants");
+
+var _actionGroup = _interopRequireDefault(require("../../../../FlexibleCard/components/blocks/action-group"));
+
+var _templateObject, _templateObject2;
+
+var getActionGroupStyles = function getActionGroupStyles(size) {
+  if (size === _constants.SmartLinkSize.XLarge) {
+    // The biggest height of the action button exceeds the max line-height
+    // of the elements causing the action on the block with x-large size to
+    // get cut at the bottom.
+    return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n      max-height: 2rem;\n    "])));
+  }
+};
+
+var providerStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  span:first-child {\n    margin-right: 0.375rem;\n  }\n"])));
+/**
+ * This Components is a footer that is used in a Block Card with Flexible UI.
+ * It contains a provider icon if provider is present and an actions list if one is passed.
+ * To be shown as a part of Flexible UI, needs to be wrapped inside of a CustomBlock
+ *
+ * @see CustomBlock
+ * @param props are the data required for the block, such as actions to be displayed.
+ */
+
+var Footer = function Footer(props) {
+  var actions = props.actions,
+      _props$size = props.size,
+      size = _props$size === void 0 ? _constants.SmartLinkSize.Medium : _props$size,
+      _props$testId = props.testId,
+      testId = _props$testId === void 0 ? 'smart-block-card-footer' : _props$testId;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": testId
+  }, /*#__PURE__*/_react.default.createElement(_elements.Provider, {
+    testId: "".concat(testId, "-provider"),
+    overrideCss: providerStyles
+  }), actions && actions.length > 0 ? /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
+    testId: "smart-element-group-actions",
+    align: _constants.SmartLinkAlignment.Right,
+    direction: _constants.SmartLinkDirection.Horizontal,
+    overrideCss: getActionGroupStyles(size),
+    width: _constants.SmartLinkWidth.Flexible
+  }, /*#__PURE__*/_react.default.createElement(_actionGroup.default, {
+    items: actions,
+    appearance: "default"
+  })) : null);
+};
+
+var _default = Footer;
+exports.default = _default;

package/dist/cjs/view/BlockCard/views/flexible/FlexibleErroredView.js

@@ -0,0 +1,83 @@
+"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 _react = _interopRequireWildcard(require("react"));
+
+var _FlexibleCard = _interopRequireDefault(require("../../../FlexibleCard"));
+
+var _titleBlock = _interopRequireDefault(require("../../../FlexibleCard/components/blocks/title-block"));
+
+var _messages = require("../../../../messages");
+
+var _tokens = require("@atlaskit/tokens");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/warning"));
+
+var _footer = _interopRequireDefault(require("../../components/flexible/footer"));
+
+var _RetryAction = require("../../actions/flexible/RetryAction");
+
+var _blocks = require("../../../FlexibleCard/components/blocks");
+
+var _text = _interopRequireDefault(require("../../../FlexibleCard/components/elements/text"));
+
+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; }
+
+/**
+ * This view represents a Block Card with an 'Errored' status.
+ *
+ * @see SmartLinkStatus
+ * @see FlexibleCardProps
+ */
+var FlexibleErroredView = function FlexibleErroredView(_ref) {
+  var cardState = _ref.cardState,
+      onAuthorize = _ref.onAuthorize,
+      onError = _ref.onError,
+      ui = _ref.ui,
+      url = _ref.url,
+      onClick = _ref.onClick,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-block-errored-view' : _ref$testId;
+  var status = cardState.status;
+  var actions = (0, _react.useMemo)(function () {
+    return onAuthorize ? [(0, _RetryAction.RetryAction)(onAuthorize)] : [];
+  }, [onAuthorize]);
+  return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, {
+    cardState: cardState,
+    onAuthorize: onAuthorize,
+    onClick: onClick,
+    onError: onError,
+    testId: testId,
+    ui: ui,
+    url: url
+  }, /*#__PURE__*/_react.default.createElement(_titleBlock.default, {
+    hideRetry: true
+  }), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, /*#__PURE__*/_react.default.createElement(_warning.default, {
+    label: "errored-warning-icon",
+    size: "small",
+    primaryColor: (0, _tokens.token)('color.icon.warning', _colors.R300),
+    testId: "".concat(testId, "-warning-icon")
+  }), /*#__PURE__*/_react.default.createElement(_text.default, {
+    message: {
+      descriptor: _messages.messages.could_not_load_link
+    }
+  })), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, /*#__PURE__*/_react.default.createElement(_footer.default, {
+    actions: actions,
+    status: status
+  })));
+};
+
+var _default = FlexibleErroredView;
+exports.default = _default;

package/dist/cjs/view/BlockCard/views/flexible/FlexibleForbiddenView.js

@@ -0,0 +1,85 @@
+"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 _react = _interopRequireWildcard(require("react"));
+
+var _FlexibleCard = _interopRequireDefault(require("../../../FlexibleCard"));
+
+var _titleBlock = _interopRequireDefault(require("../../../FlexibleCard/components/blocks/title-block"));
+
+var _blocks = require("../../../FlexibleCard/components/blocks");
+
+var _tokens = require("@atlaskit/tokens");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _messages = require("../../../../messages");
+
+var _lockFilled = _interopRequireDefault(require("@atlaskit/icon/glyph/lock-filled"));
+
+var _footer = _interopRequireDefault(require("../../components/flexible/footer"));
+
+var _ForbiddenAction = require("../../actions/flexible/ForbiddenAction");
+
+var _text = _interopRequireDefault(require("../../../FlexibleCard/components/elements/text"));
+
+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; }
+
+/**
+ * This view represent a Block Card with the 'Forbidden' status.
+ * It should have a "Try another account" button that will allow a user to connect another account and view the block card.
+ *
+ * @see SmartLinkStatus
+ * @see FlexibleCardProps
+ */
+var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
+  var cardState = _ref.cardState,
+      onAuthorize = _ref.onAuthorize,
+      onClick = _ref.onClick,
+      onError = _ref.onError,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-block-forbidden-view' : _ref$testId,
+      ui = _ref.ui,
+      url = _ref.url;
+  var status = cardState.status;
+  var actions = (0, _react.useMemo)(function () {
+    return onAuthorize ? [(0, _ForbiddenAction.ForbiddenAction)(onAuthorize)] : [];
+  }, [onAuthorize]);
+  return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, {
+    appearance: "block",
+    cardState: cardState,
+    onAuthorize: onAuthorize,
+    onClick: onClick,
+    onError: onError,
+    testId: testId,
+    ui: ui,
+    url: url
+  }, /*#__PURE__*/_react.default.createElement(_titleBlock.default, {
+    hideRetry: true
+  }), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, /*#__PURE__*/_react.default.createElement(_lockFilled.default, {
+    label: "forbidden-lock-icon",
+    size: "small",
+    primaryColor: (0, _tokens.token)('color.icon.danger', _colors.R300),
+    testId: "".concat(testId, "-lock-icon")
+  }), /*#__PURE__*/_react.default.createElement(_text.default, {
+    message: {
+      descriptor: _messages.messages.invalid_permissions_description
+    }
+  })), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, /*#__PURE__*/_react.default.createElement(_footer.default, {
+    actions: actions,
+    status: status
+  })));
+};
+
+var _default = FlexibleForbiddenView;
+exports.default = _default;

package/dist/cjs/view/BlockCard/views/flexible/FlexibleNotFoundView.js

@@ -0,0 +1,73 @@
+"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 _FlexibleCard = _interopRequireDefault(require("../../../FlexibleCard"));
+
+var _titleBlock = _interopRequireDefault(require("../../../FlexibleCard/components/blocks/title-block"));
+
+var _messages = require("../../../../messages");
+
+var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/warning"));
+
+var _tokens = require("@atlaskit/tokens");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _footer = _interopRequireDefault(require("../../components/flexible/footer"));
+
+var _text = _interopRequireDefault(require("../../../FlexibleCard/components/elements/text"));
+
+var _blocks = require("../../../FlexibleCard/components/blocks");
+
+/**
+ * This view represents a Block Card with a 'Not_Found' status.
+ *
+ * @see SmartLinkStatus
+ * @see FlexibleCardProps
+ */
+var FlexibleNotFoundView = function FlexibleNotFoundView(_ref) {
+  var cardState = _ref.cardState,
+      onAuthorize = _ref.onAuthorize,
+      onError = _ref.onError,
+      ui = _ref.ui,
+      url = _ref.url,
+      onClick = _ref.onClick,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-block-not-found-view' : _ref$testId;
+  var status = cardState.status;
+  return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, {
+    appearance: "block",
+    cardState: cardState,
+    onAuthorize: onAuthorize,
+    onClick: onClick,
+    onError: onError,
+    testId: testId,
+    ui: ui,
+    url: url
+  }, /*#__PURE__*/_react.default.createElement(_titleBlock.default, {
+    hideRetry: true
+  }), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, /*#__PURE__*/_react.default.createElement(_warning.default, {
+    label: "not-found-warning-icon",
+    size: "small",
+    primaryColor: (0, _tokens.token)('color.icon.warning', _colors.R300),
+    testId: "".concat(testId, "-warning-icon")
+  }), /*#__PURE__*/_react.default.createElement(_text.default, {
+    message: {
+      descriptor: _messages.messages.not_found_description
+    },
+    testId: testId
+  })), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, /*#__PURE__*/_react.default.createElement(_footer.default, {
+    status: status
+  })));
+};
+
+var _default = FlexibleNotFoundView;
+exports.default = _default;

package/dist/cjs/view/BlockCard/views/flexible/FlexibleUnauthorisedView.js

@@ -0,0 +1,79 @@
+"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 _react = _interopRequireWildcard(require("react"));
+
+var _FlexibleCard = _interopRequireDefault(require("../../../FlexibleCard"));
+
+var _titleBlock = _interopRequireDefault(require("../../../FlexibleCard/components/blocks/title-block"));
+
+var _messages = require("../../../../messages");
+
+var _text = _interopRequireDefault(require("../../../FlexibleCard/components/elements/text"));
+
+var _AuthorizeAction = require("../../actions/flexible/AuthorizeAction");
+
+var _footer = _interopRequireDefault(require("../../components/flexible/footer"));
+
+var _blocks = require("../../../FlexibleCard/components/blocks");
+
+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; }
+
+/**
+ * This view represents a Block card that has an 'Unauthorized' status .
+ * It should have a "Connect" button that will allow a user to connect their account and view the block card.
+ *
+ * @see SmartLinkStatus
+ * @see UnauthorisedViewProps
+ */
+var FlexibleUnauthorisedView = function FlexibleUnauthorisedView(_ref) {
+  var cardState = _ref.cardState,
+      _ref$providerName = _ref.providerName,
+      providerName = _ref$providerName === void 0 ? '' : _ref$providerName,
+      onAuthorize = _ref.onAuthorize,
+      onClick = _ref.onClick,
+      onError = _ref.onError,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-block-unauthorized-view' : _ref$testId,
+      ui = _ref.ui,
+      url = _ref.url;
+  var status = cardState.status;
+  var actions = (0, _react.useMemo)(function () {
+    return onAuthorize ? [(0, _AuthorizeAction.AuthorizeAction)(onAuthorize)] : [];
+  }, [onAuthorize]);
+  return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, {
+    appearance: "block",
+    cardState: cardState,
+    onAuthorize: onAuthorize,
+    onClick: onClick,
+    onError: onError,
+    testId: testId,
+    ui: ui,
+    url: url
+  }, /*#__PURE__*/_react.default.createElement(_titleBlock.default, {
+    hideRetry: true
+  }), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, /*#__PURE__*/_react.default.createElement(_text.default, {
+    message: {
+      descriptor: _messages.messages.connect_link_account_card_description,
+      values: {
+        context: providerName
+      }
+    }
+  })), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, /*#__PURE__*/_react.default.createElement(_footer.default, {
+    actions: actions,
+    status: status
+  })));
+};
+
+var _default = FlexibleUnauthorisedView;
+exports.default = _default;

package/dist/cjs/view/BlockCard/views/flexible/types.js

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

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

@@ -28,7 +28,9 @@ var ExpandedFrame = function ExpandedFrame(_ref) {
       maxWidth = _ref.maxWidth,
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'expanded-frame' : _ref$testId,
-      inheritDimensions = _ref.inheritDimensions;
+      inheritDimensions = _ref.inheritDimensions,
+      _ref$allowScrollBar = _ref.allowScrollBar,
+      allowScrollBar = _ref$allowScrollBar === void 0 ? false : _ref$allowScrollBar;
 
   var isInteractive = function isInteractive() {
     return !isPlaceholder && (Boolean(href) || Boolean(onClick));
@@ -53,6 +55,8 @@ var ExpandedFrame = function ExpandedFrame(_ref) {
 
   var renderContent = function renderContent() {
     return /*#__PURE__*/_react.default.createElement(_styled.Content, {
+      "data-testid": "embed-content-wrapper",
+      allowScrollBar: allowScrollBar,
       isInteractive: isInteractive()
     }, children);
   };

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.raised', '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  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\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) {
@@ -152,12 +152,15 @@ var Content = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _t
   } else {
     return '';
   }
+}, function (_ref10) {
+  var allowScrollBar = _ref10.allowScrollBar;
+  return allowScrollBar ? 'overflow: auto;' : 'overflow: hidden;';
 });
 
 exports.Content = Content;
 
-var Image = _styled.default.img(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n\n  /* hide the alt text when the image cannot be found */\n  overflow: hidden;\n"])), function (_ref10) {
-  var size = _ref10.size;
+var Image = _styled.default.img(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n\n  /* hide the alt text when the image cannot be found */\n  overflow: hidden;\n"])), function (_ref11) {
+  var size = _ref11.size;
   return csssize(size);
 }, borderRadius);
 
@@ -185,8 +188,8 @@ var ResolvedViewIconWrapper = _styled.default.div(_templateObject12 || (_templat
 
 exports.ResolvedViewIconWrapper = ResolvedViewIconWrapper;
 
-var Thumbnail = _styled.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  float: right;\n  margin: 4px 0 12px 12px;\n  background-color: ", ";\n  background-image: url(", ");\n  background-size: cover;\n"])), borderRadius, csssize(48), (0, _tokens.token)('color.skeleton', colors.N30), function (_ref11) {
-  var src = _ref11.src;
+var Thumbnail = _styled.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  float: right;\n  margin: 4px 0 12px 12px;\n  background-color: ", ";\n  background-image: url(", ");\n  background-size: cover;\n"])), borderRadius, csssize(48), (0, _tokens.token)('color.skeleton', colors.N30), function (_ref12) {
+  var src = _ref12.src;
   return src;
 });
 

package/dist/cjs/view/EmbedCard/views/ForbiddenView.js

@@ -70,7 +70,8 @@ var EmbedCardForbiddenView = function EmbedCardForbiddenView(_ref) {
     isSelected: isSelected,
     inheritDimensions: inheritDimensions,
     onClick: onClick,
-    testId: testId
+    testId: testId,
+    allowScrollBar: true
   }, /*#__PURE__*/_react.default.createElement(_UnresolvedView.EmbedCardUnresolvedView, {
     image: _constants.LockImage,
     title: "invalid_permissions",

package/dist/cjs/view/EmbedCard/views/NotFoundView.js

@@ -38,7 +38,8 @@ var EmbedCardNotFoundView = function EmbedCardNotFoundView(_ref) {
     isSelected: isSelected,
     inheritDimensions: inheritDimensions,
     onClick: onClick,
-    testId: testId
+    testId: testId,
+    allowScrollBar: true
   }, /*#__PURE__*/_react.default.createElement(_UnresolvedView.EmbedCardUnresolvedView, {
     image: _constants.NotFoundImage,
     title: "not_found_title",

package/dist/cjs/view/EmbedCard/views/UnauthorisedView.js

@@ -49,7 +49,8 @@ var EmbedCardUnauthorisedView = function EmbedCardUnauthorisedView(_ref) {
     isSelected: isSelected,
     inheritDimensions: inheritDimensions,
     onClick: onClick,
-    testId: testId
+    testId: testId,
+    allowScrollBar: true
   }, /*#__PURE__*/_react.default.createElement(_UnresolvedView.EmbedCardUnresolvedView, {
     image: (_context$image = context === null || context === void 0 ? void 0 : context.image) !== null && _context$image !== void 0 ? _context$image : _constants.UnauthorisedImage,
     title: "connect_link_account_card_name",

package/dist/cjs/view/EmbedCard/views/UnresolvedView.js

@@ -52,7 +52,7 @@ var EmbedCardUnresolvedView = function EmbedCardUnresolvedView(_ref) {
     css: {
       fontSize: (0, _utils.gs)(2.5),
       marginBottom: (0, _utils.gs)(1.5),
-      width: (0, _utils.gs)(50),
+      maxWidth: (0, _utils.gs)(50),
       textAlign: 'center'
     },
     "data-testid": "".concat(testId, "-unresolved-title")
@@ -65,7 +65,7 @@ var EmbedCardUnresolvedView = function EmbedCardUnresolvedView(_ref) {
       fontSize: (0, _constants.fontSize)(),
       marginBottom: (0, _utils.gs)(2.5),
       textAlign: 'center',
-      width: (0, _utils.gs)(50),
+      maxWidth: (0, _utils.gs)(50),
       lineHeight: (0, _utils.gs)(3)
     },
     "data-testid": "".concat(testId, "-unresolved-description")

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

@@ -5,6 +5,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "CustomBlock", {
+  enumerable: true,
+  get: function get() {
+    return _block.default;
+  }
+});
 Object.defineProperty(exports, "FooterBlock", {
   enumerable: true,
   get: function get() {
@@ -44,4 +50,6 @@ var _previewBlock = _interopRequireDefault(require("./preview-block"));
 
 var _snippetBlock = _interopRequireDefault(require("./snippet-block"));
 
-var _titleBlock = _interopRequireDefault(require("./title-block"));
+var _titleBlock = _interopRequireDefault(require("./title-block"));
+
+var _block = _interopRequireDefault(require("./block"));