@atlaskit/smart-card 16.3.0 → 17.2.0

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

@@ -0,0 +1,83 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmbedCardUnresolvedView = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _core = require("@emotion/core");
+
+var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _reactIntlNext = require("react-intl-next");
+
+var _messages = require("@atlaskit/media-ui/messages");
+
+var _utils = require("../../BlockCard/utils");
+
+/** @jsx jsx */
+var EmbedCardUnresolvedView = function EmbedCardUnresolvedView(_ref) {
+  var image = _ref.image,
+      title = _ref.title,
+      description = _ref.description,
+      button = _ref.button,
+      context = _ref.context,
+      onClick = _ref.onClick,
+      testId = _ref.testId;
+  return (0, _core.jsx)("div", {
+    css: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingTop: (0, _utils.gs)(4.5),
+      paddingBottom: (0, _utils.gs)(6)
+    },
+    "data-testid": "".concat(testId, "-unresolved-container")
+  }, (0, _core.jsx)("img", {
+    src: image,
+    css: {
+      height: (0, _utils.gs)(14),
+      marginBottom: (0, _utils.gs)(4)
+    }
+  }), (0, _core.jsx)("span", {
+    css: {
+      fontSize: (0, _utils.gs)(2.5),
+      marginBottom: (0, _utils.gs)(1.5),
+      width: (0, _utils.gs)(50),
+      textAlign: 'center'
+    }
+  }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages[title], {
+    values: {
+      context: context
+    }
+  }))), (0, _core.jsx)("span", {
+    css: {
+      fontSize: (0, _constants.fontSize)(),
+      marginBottom: (0, _utils.gs)(2.5),
+      textAlign: 'center',
+      width: (0, _utils.gs)(50),
+      lineHeight: (0, _utils.gs)(3)
+    }
+  }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages[description], {
+    values: {
+      context: context
+    }
+  }))), button && (0, _core.jsx)(_customThemeButton.default, {
+    testId: "button-".concat(button.testId || testId),
+    appearance: button.appearance,
+    onClick: onClick
+  }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages[button.text], {
+    values: {
+      context: context
+    }
+  }))));
+};
+
+exports.EmbedCardUnresolvedView = EmbedCardUnresolvedView;

package/dist/cjs/view/FlexibleCard/components/actions/delete-action/index.js

@@ -0,0 +1,83 @@
+"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 _reactIntlNext = require("react-intl-next");
+
+var _core = require("@emotion/core");
+
+var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+
+var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
+
+var _constants = require("../../../../../constants");
+
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+
+var _utils = require("../../utils");
+
+var _messages = require("../../../../../messages");
+
+var _token = require("../../../../../utils/token");
+
+var _utils2 = require("../../../../../utils");
+
+var _templateObject;
+
+var getWidth = function getWidth(size) {
+  switch (size) {
+    case _constants.SmartLinkSize.XLarge:
+    case _constants.SmartLinkSize.Large:
+      return '1.5rem';
+
+    case _constants.SmartLinkSize.Medium:
+    case _constants.SmartLinkSize.Small:
+    default:
+      return '1rem';
+  }
+};
+
+var getStyles = function getStyles(size) {
+  return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  ", ";\n"])), _token.tokens.actionIcon, (0, _utils.getIconSizeStyles)(getWidth(size)));
+};
+
+var DeleteAction = function DeleteAction(_ref) {
+  var _ref$appearance = _ref.appearance,
+      appearance = _ref$appearance === void 0 ? 'subtle' : _ref$appearance,
+      content = _ref.content,
+      onClick = _ref.onClick,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? _constants.SmartLinkSize.Medium : _ref$size,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-action-delete-action' : _ref$testId;
+
+  if (!onClick) {
+    return null;
+  }
+
+  return (0, _core.jsx)(_tooltip.default, {
+    content: (0, _core.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.delete)
+  }, (0, _core.jsx)(_customThemeButton.default, {
+    spacing: "none",
+    appearance: appearance,
+    testId: testId,
+    onClick: (0, _utils2.handleOnClick)(onClick)
+  }, content || (0, _core.jsx)("span", {
+    css: getStyles(size),
+    "data-testid": "".concat(testId, "-icon")
+  }, (0, _core.jsx)(_cross.default, {
+    label: "Delete"
+  }))));
+};
+
+var _default = DeleteAction;
+exports.default = _default;

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DeleteAction = void 0;
+
+var _constants = require("../../../../constants");
+
+var _utils = require("./utils");
+
+// Attention: Keep the export name and action name the same.
+// This will help reducing the code for mapping action inside
+// createAction and renderActionItems
+var DeleteAction = (0, _utils.createAction)(_constants.ActionName.DeleteAction);
+exports.DeleteAction = DeleteAction;

package/dist/cjs/view/FlexibleCard/components/actions/types.js

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

package/dist/cjs/view/FlexibleCard/components/actions/utils.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createAction = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _constants = require("../../../../constants");
+
+var _flexibleUiContext = require("../../../../state/flexible-ui-context");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _deleteAction = _interopRequireDefault(require("./delete-action"));
+
+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 actionMappings = (0, _defineProperty2.default)({}, _constants.ActionName.DeleteAction, {
+  component: _deleteAction.default
+});
+
+var getContextKey = function getContextKey(name) {
+  // Attempt to predict context prop name in advance to reduce the amount of
+  // code run during runtime
+  return name.length > 0 ? name.charAt(0).toLowerCase() + name.slice(1) : undefined;
+};
+
+var getActionData = function getActionData(actionName, contextKey, context) {
+  if (!context) {
+    return undefined;
+  }
+
+  var data = context[contextKey];
+
+  switch (actionName) {
+    case _constants.ActionName.DeleteAction:
+    default:
+      return data;
+  }
+};
+
+var createAction = function createAction(name) {
+  var _ref = actionMappings[name] || {},
+      BaseAction = _ref.component,
+      props = _ref.props;
+
+  var contextKey = getContextKey(name);
+
+  if (!BaseAction) {
+    throw Error("Action ".concat(name, " does not exist."));
+  }
+
+  return function (overrides) {
+    var context = (0, _react.useContext)(_flexibleUiContext.FlexibleUiContext);
+    var data = getActionData(name, contextKey, context);
+    return /*#__PURE__*/_react.default.createElement(BaseAction, (0, _extends2.default)({}, props, data, overrides));
+  };
+};
+
+exports.createAction = createAction;

package/dist/cjs/view/FlexibleCard/components/blocks/action-group/index.js

@@ -0,0 +1,37 @@
+"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 _core = require("@emotion/core");
+
+var _buttonGroup = _interopRequireDefault(require("@atlaskit/button/button-group"));
+
+var _utils = require("../utils");
+
+var _constants = require("../../../../../constants");
+
+var _templateObject;
+
+var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  line-height: 0;\n"])));
+
+var ActionGroup = function ActionGroup(_ref) {
+  var _ref$items = _ref.items,
+      items = _ref$items === void 0 ? [] : _ref$items,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? _constants.SmartLinkSize.Medium : _ref$size;
+  // Currently we only have delete action available, this prevents others from adding more delete actions
+  var actionsToRender = items.slice(0, 1);
+  return (0, _core.jsx)("div", {
+    css: styles
+  }, (0, _core.jsx)(_buttonGroup.default, null, (0, _utils.renderActionItems)(actionsToRender, size)));
+};
+
+var _default = ActionGroup;
+exports.default = _default;

package/dist/cjs/view/FlexibleCard/components/blocks/action-group/types.js

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

package/dist/cjs/view/FlexibleCard/components/blocks/block/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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core = require("@emotion/core");
+
+var _constants = require("../../../../../constants");
+
+var _utils = require("../utils");
+
+var _templateObject;
+
+var getBlockStyles = function getBlockStyles(direction, size) {
+  return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  justify-content: flex-start;\n"])), (0, _utils.getBaseStyles)(direction, size));
+};
+
+var Block = function Block(_ref) {
+  var children = _ref.children,
+      _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? _constants.SmartLinkDirection.Horizontal : _ref$direction,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? _constants.SmartLinkSize.Medium : _ref$size,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-block' : _ref$testId;
+  return (0, _core.jsx)("div", {
+    css: getBlockStyles(direction, size),
+    "data-smart-block": true,
+    "data-testid": testId
+  }, (0, _utils.renderChildren)(children, size));
+};
+
+var _default = Block;
+exports.default = _default;

package/dist/cjs/view/FlexibleCard/components/blocks/element-group/index.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getElementGroupStyles = exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core = require("@emotion/core");
+
+var _constants = require("../../../../../constants");
+
+var _utils = require("../utils");
+
+var _templateObject, _templateObject2, _templateObject3;
+
+var getAlignmentStyles = function getAlignmentStyles(align) {
+  switch (align) {
+    case _constants.SmartLinkAlignment.Right:
+      return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        justify-content: flex-end;\n        text-align: right;\n      "])));
+
+    case _constants.SmartLinkAlignment.Left:
+    default:
+      return (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        justify-content: flex-start;\n        text-align: left;\n      "])));
+  }
+};
+
+var getElementGroupStyles = function getElementGroupStyles(direction, size, align, width) {
+  return (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  min-width: 10%;\n  ", "\n"])), (0, _utils.getBaseStyles)(direction, size), getAlignmentStyles(align), width === _constants.SmartLinkWidth.Flexible ? "flex: 1 3;" : '');
+};
+
+exports.getElementGroupStyles = getElementGroupStyles;
+
+var ElementGroup = function ElementGroup(_ref) {
+  var _ref$align = _ref.align,
+      align = _ref$align === void 0 ? _constants.SmartLinkAlignment.Left : _ref$align,
+      children = _ref.children,
+      css = _ref.css,
+      _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? _constants.SmartLinkDirection.Horizontal : _ref$direction,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? _constants.SmartLinkSize.Medium : _ref$size,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-element-group' : _ref$testId,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? _constants.SmartLinkWidth.FitToContent : _ref$width;
+  return (0, _core.jsx)("div", {
+    css: [getElementGroupStyles(direction, size, align, width), css],
+    "data-smart-element-group": true,
+    "data-testid": testId
+  }, (0, _utils.renderChildren)(children, size));
+};
+
+var _default = ElementGroup;
+exports.default = _default;

package/dist/cjs/view/FlexibleCard/components/blocks/element-group/types.js

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

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

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "MetadataBlock", {
+  enumerable: true,
+  get: function get() {
+    return _metadataBlock.default;
+  }
+});
+Object.defineProperty(exports, "TitleBlock", {
+  enumerable: true,
+  get: function get() {
+    return _titleBlock.default;
+  }
+});
+
+var _titleBlock = _interopRequireDefault(require("./title-block"));
+
+var _metadataBlock = _interopRequireDefault(require("./metadata-block"));

package/dist/cjs/view/FlexibleCard/components/blocks/metadata-block/index.js

@@ -0,0 +1,102 @@
+"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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core = require("@emotion/core");
+
+var _constants = require("../../../../../constants");
+
+var _utils = require("../utils");
+
+var _block = _interopRequireDefault(require("../block"));
+
+var _elementGroup = _interopRequireDefault(require("../element-group"));
+
+var _excluded = ["maxLines", "status", "testId", "primary", "secondary"];
+
+var _templateObject;
+
+var DEFAULT_MAX_LINES = 2;
+var MAXIMUM_MAX_LINES = 2;
+var MINIMUM_MAX_LINES = 1;
+
+var getElementGroupStyles = function getElementGroupStyles(size, maxLines) {
+  // MetadataBlock allows metadata elements to be displayed in
+  // multiple lines, with maximum of 2 lines.
+  // a) We need the height of the line to be equal on both left and right
+  //    sides so they line up nicely. 1.75 is the The maximum height of
+  //    all elements in specific size. This height belongs to AvatarGroup.
+  // b) There is no way to truncate non-text elements nicely. Here
+  //    it's fix max height of the element group so that anything that is
+  //    overflown will not be visible.
+  var lineHeight = 1.75;
+  var gap = (0, _utils.getGapSize)(size);
+  var gapHeight = gap * (maxLines - 1);
+  var height = lineHeight * maxLines + gapHeight;
+  return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    flex-wrap: wrap;\n    line-height: ", "rem;\n    max-height: ", "rem;\n    > span,\n    > div {\n      min-height: ", "rem;\n      max-height: ", "rem;\n      line-height: ", "rem;\n    }\n  "])), lineHeight, height, lineHeight, lineHeight, lineHeight);
+};
+
+var getMaxLines = function getMaxLines(maxLines) {
+  if (maxLines > MAXIMUM_MAX_LINES) {
+    return DEFAULT_MAX_LINES;
+  }
+
+  if (maxLines < MINIMUM_MAX_LINES) {
+    return MINIMUM_MAX_LINES;
+  }
+
+  return maxLines;
+};
+
+var MetadataBlock = function MetadataBlock(_ref) {
+  var _ref$maxLines = _ref.maxLines,
+      maxLines = _ref$maxLines === void 0 ? DEFAULT_MAX_LINES : _ref$maxLines,
+      _ref$status = _ref.status,
+      status = _ref$status === void 0 ? _constants.SmartLinkStatus.Fallback : _ref$status,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-block-metadata' : _ref$testId,
+      _ref$primary = _ref.primary,
+      primary = _ref$primary === void 0 ? [] : _ref$primary,
+      _ref$secondary = _ref.secondary,
+      secondary = _ref$secondary === void 0 ? [] : _ref$secondary,
+      blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  if (primary.length === 0 && secondary.length === 0 || status !== _constants.SmartLinkStatus.Resolved) {
+    return null;
+  }
+
+  var primaryElements = (0, _utils.renderElementItems)(primary);
+  var secondaryElements = (0, _utils.renderElementItems)(secondary);
+  var _blockProps$size = blockProps.size,
+      size = _blockProps$size === void 0 ? _constants.SmartLinkSize.Medium : _blockProps$size;
+  var elementGroupStyles = getElementGroupStyles(size, getMaxLines(maxLines));
+  return /*#__PURE__*/_react.default.createElement(_block.default, (0, _extends2.default)({}, blockProps, {
+    testId: "".concat(testId, "-resolved-view")
+  }), primaryElements && /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
+    align: _constants.SmartLinkAlignment.Left,
+    css: elementGroupStyles,
+    direction: _constants.SmartLinkDirection.Horizontal,
+    width: _constants.SmartLinkWidth.Flexible
+  }, primaryElements), secondaryElements && /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
+    align: _constants.SmartLinkAlignment.Right,
+    css: elementGroupStyles,
+    direction: _constants.SmartLinkDirection.Horizontal,
+    width: _constants.SmartLinkWidth.Flexible
+  }, secondaryElements));
+};
+
+var _default = MetadataBlock;
+exports.default = _default;

package/dist/cjs/view/FlexibleCard/components/blocks/metadata-block/types.js

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

package/dist/cjs/view/FlexibleCard/components/blocks/title-block/errored/index.js

@@ -0,0 +1,81 @@
+"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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactIntlNext = require("react-intl-next");
+
+var _core = require("@emotion/core");
+
+var _elements = require("../../../elements");
+
+var _block = _interopRequireDefault(require("../../block"));
+
+var _constants = require("../../../../../../constants");
+
+var _utils = require("../../../utils");
+
+var _elementGroup = _interopRequireDefault(require("../../element-group"));
+
+var _token = require("../../../../../../utils/token");
+
+var _excluded = ["maxLines", "retry", "position", "testId", "theme"];
+
+var _templateObject, _templateObject2;
+
+var actionStyles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  :hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n"])), _token.tokens.errorMessageHover);
+
+var getMessageStyles = function getMessageStyles(size, hasAction) {
+  var sizeStyles = (0, _utils.getLinkSizeStyles)(size);
+  return (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    flex: 1 1 auto;\n    justify-content: flex-end;\n    ", "\n    ", "\n    ", "\n    color: ", ";\n  "])), hasAction ? actionStyles : '', sizeStyles, (0, _utils.getTruncateStyles)(1, (0, _utils.getLinkLineHeight)(size)), _token.tokens.errorMessage);
+};
+
+var TitleBlockErroredView = function TitleBlockErroredView(_ref) {
+  var maxLines = _ref.maxLines,
+      retry = _ref.retry,
+      position = _ref.position,
+      testId = _ref.testId,
+      theme = _ref.theme,
+      blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _ref2 = retry || {},
+      descriptor = _ref2.descriptor,
+      onClick = _ref2.onClick,
+      values = _ref2.values;
+
+  var _blockProps$size = blockProps.size,
+      size = _blockProps$size === void 0 ? _constants.SmartLinkSize.Medium : _blockProps$size;
+  var hasAction = onClick !== undefined;
+  return (0, _core.jsx)(_block.default, (0, _extends2.default)({}, blockProps, {
+    testId: "".concat(testId, "-errored-view")
+  }), (0, _core.jsx)(_elements.LinkIcon, {
+    position: position
+  }), (0, _core.jsx)(_elements.Title, {
+    maxLines: maxLines,
+    theme: theme
+  }), descriptor && (0, _core.jsx)(_elementGroup.default, {
+    direction: _constants.SmartLinkDirection.Horizontal,
+    align: _constants.SmartLinkAlignment.Right
+  }, (0, _core.jsx)("span", {
+    css: getMessageStyles(size, hasAction),
+    onClick: onClick,
+    "data-testid": "".concat(testId, "-errored-view-message")
+  }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, descriptor, {
+    values: values
+  })))));
+};
+
+var _default = TitleBlockErroredView;
+exports.default = _default;