@atlaskit/smart-card 18.0.14 → 18.0.15

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/smart-card
 
+## 18.0.15
+
+### Patch Changes
+
+- [`c2a240de738`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c2a240de738) - Add inline documentation for Flexible UI
+- [`6976489a51a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6976489a51a) - Flexible UI: Enable css override for actions
+- [`7d4e18ffddb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7d4e18ffddb) - instrument analytics events for hover card
+- [`a123e96fc62`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a123e96fc62) - expose prop on smart card
+- [`5af3b7aba2a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5af3b7aba2a) - Flexible UI: Fix icon-only action padding
+- [`3e19e206713`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3e19e206713) - Flexible UI: Enable css override on elements
+- [`750cb867124`](https://bitbucket.org/atlassian/atlassian-frontend/commits/750cb867124) - Flexible UI: Enable css override on blocks
+
 ## 18.0.14
 
 ### Patch Changes

package/dist/cjs/state/analytics/useSmartLinkAnalytics.js

@@ -32,6 +32,9 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(dispatchAnalytics) {
         });
         dispatchAnalytics((0, _analytics.uiActionClickedEvent)(extensionKey, actionType, display));
       },
+      hoverCardOpenLinkClickedEvent: function hoverCardOpenLinkClickedEvent(previewDisplay, definitionId, extensionKey, previewInvokeMethod) {
+        dispatchAnalytics((0, _analytics.uiHoverCardOpenLinkClickedEvent)(previewDisplay, definitionId, extensionKey, previewInvokeMethod));
+      },
       closedAuthEvent: function closedAuthEvent(display, definitionId, extensionKey) {
         return dispatchAnalytics((0, _analytics.uiClosedAuthEvent)(display, definitionId, extensionKey));
       },
@@ -45,6 +48,12 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(dispatchAnalytics) {
           display: display
         });
         dispatchAnalytics((0, _analytics.uiRenderSuccessEvent)(display, definitionId, extensionKey));
+      },
+      hoverCardViewedEvent: function hoverCardViewedEvent(hoverDisplay, definitionId, extensionKey, previewInvokeMethod) {
+        return dispatchAnalytics((0, _analytics.uiHoverCardViewedEvent)(hoverDisplay, definitionId, extensionKey, previewInvokeMethod));
+      },
+      hoverCardDismissedEvent: function hoverCardDismissedEvent(hoverDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod) {
+        return dispatchAnalytics((0, _analytics.uiHoverCardDismissedEvent)(hoverDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod));
       }
     };
   }, [dispatchAnalytics]);

package/dist/cjs/state/flexible-ui-context/index.js

@@ -7,6 +7,10 @@ exports.useFlexibleUiContext = exports.FlexibleUiContext = void 0;
 
 var _react = require("react");
 
+/**
+ * This provides the data that will be used by Smart Links Flexible UI to populate it's
+ * underlying elements.
+ */
 var FlexibleUiContext = /*#__PURE__*/(0, _react.createContext)(undefined);
 exports.FlexibleUiContext = FlexibleUiContext;
 

package/dist/cjs/utils/analytics/analytics.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.unresolvedEvent = exports.uiRenderSuccessEvent = exports.uiRenderFailedEvent = exports.uiClosedAuthEvent = exports.uiCardClickedEvent = exports.uiAuthEvent = exports.uiAuthAlternateAccountEvent = exports.uiActionClickedEvent = exports.trackAppAccountConnected = exports.screenAuthPopupEvent = exports.resolvedEvent = exports.invokeSucceededEvent = exports.invokeFailedEvent = exports.fireSmartLinkEvent = exports.context = exports.connectSucceededEvent = exports.connectFailedEvent = exports.SmartLinkEvents = exports.ANALYTICS_CHANNEL = void 0;
+exports.unresolvedEvent = exports.uiRenderSuccessEvent = exports.uiRenderFailedEvent = exports.uiHoverCardViewedEvent = exports.uiHoverCardOpenLinkClickedEvent = exports.uiHoverCardDismissedEvent = exports.uiClosedAuthEvent = exports.uiCardClickedEvent = exports.uiAuthEvent = exports.uiAuthAlternateAccountEvent = exports.uiActionClickedEvent = exports.trackAppAccountConnected = exports.screenAuthPopupEvent = exports.resolvedEvent = exports.invokeSucceededEvent = exports.invokeFailedEvent = exports.fireSmartLinkEvent = exports.context = exports.connectSucceededEvent = exports.connectFailedEvent = exports.SmartLinkEvents = exports.ANALYTICS_CHANNEL = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -317,4 +317,54 @@ var uiRenderFailedEvent = function uiRenderFailedEvent(display, error, errorInfo
   };
 };
 
-exports.uiRenderFailedEvent = uiRenderFailedEvent;
+exports.uiRenderFailedEvent = uiRenderFailedEvent;
+
+var uiHoverCardViewedEvent = function uiHoverCardViewedEvent(hoverDisplay, definitionId, extensionKey, previewInvokeMethod) {
+  return {
+    action: 'viewed',
+    actionSubject: 'hoverCard',
+    eventType: 'ui',
+    attributes: _objectSpread(_objectSpread({}, context), {}, {
+      definitionId: definitionId || '',
+      extensionKey: extensionKey || '',
+      hoverDisplay: hoverDisplay,
+      previewInvokeMethod: previewInvokeMethod
+    })
+  };
+};
+
+exports.uiHoverCardViewedEvent = uiHoverCardViewedEvent;
+
+var uiHoverCardDismissedEvent = function uiHoverCardDismissedEvent(hoverDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod) {
+  return {
+    action: 'dismissed',
+    actionSubject: 'hoverCard',
+    eventType: 'ui',
+    attributes: _objectSpread(_objectSpread({}, context), {}, {
+      definitionId: definitionId || '',
+      extensionKey: extensionKey || '',
+      hoverTime: hoverTime,
+      hoverDisplay: hoverDisplay,
+      previewInvokeMethod: previewInvokeMethod
+    })
+  };
+};
+
+exports.uiHoverCardDismissedEvent = uiHoverCardDismissedEvent;
+
+var uiHoverCardOpenLinkClickedEvent = function uiHoverCardOpenLinkClickedEvent(previewDisplay, definitionId, extensionKey, previewInvokeMethod) {
+  return {
+    action: 'clicked',
+    actionSubject: 'button',
+    actionSubjectId: 'shortcutGoToLink',
+    eventType: 'ui',
+    attributes: _objectSpread(_objectSpread({}, context), {}, {
+      definitionId: definitionId || '',
+      extensionKey: extensionKey || '',
+      previewDisplay: previewDisplay,
+      previewInvokeMethod: previewInvokeMethod
+    })
+  };
+};
+
+exports.uiHoverCardOpenLinkClickedEvent = uiHoverCardOpenLinkClickedEvent;

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

@@ -96,6 +96,24 @@ Object.defineProperty(exports, "uiClosedAuthEvent", {
     return _analytics.uiClosedAuthEvent;
   }
 });
+Object.defineProperty(exports, "uiHoverCardDismissedEvent", {
+  enumerable: true,
+  get: function get() {
+    return _analytics.uiHoverCardDismissedEvent;
+  }
+});
+Object.defineProperty(exports, "uiHoverCardOpenLinkClickedEvent", {
+  enumerable: true,
+  get: function get() {
+    return _analytics.uiHoverCardOpenLinkClickedEvent;
+  }
+});
+Object.defineProperty(exports, "uiHoverCardViewedEvent", {
+  enumerable: true,
+  get: function get() {
+    return _analytics.uiHoverCardViewedEvent;
+  }
+});
 Object.defineProperty(exports, "uiRenderFailedEvent", {
   enumerable: true,
   get: function get() {

package/dist/cjs/version.json

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

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

@@ -51,7 +51,8 @@ function CardWithUrlContent(_ref) {
       embedIframeRef = _ref.embedIframeRef,
       inlinePreloaderStyle = _ref.inlinePreloaderStyle,
       ui = _ref.ui,
-      children = _ref.children;
+      children = _ref.children,
+      showHoverPreview = _ref.showHoverPreview;
 
   // Get state, actions for this card.
   var _useSmartLink = (0, _state.useSmartLink)(id, url, dispatchAnalytics),
@@ -155,7 +156,8 @@ function CardWithUrlContent(_ref) {
         isSelected: isSelected,
         onResolve: onResolve,
         testId: testId,
-        inlinePreloaderStyle: inlinePreloaderStyle
+        inlinePreloaderStyle: inlinePreloaderStyle,
+        showHoverPreview: showHoverPreview
       });
 
     case 'block':

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

@@ -69,7 +69,8 @@ function CardWithURLRenderer(props) {
       inlinePreloaderStyle = props.inlinePreloaderStyle,
       createAnalyticsEvent = props.createAnalyticsEvent,
       children = props.children,
-      ui = props.ui; // Wrapper around analytics.
+      ui = props.ui,
+      showHoverPreview = props.showHoverPreview; // Wrapper around analytics.
 
   var dispatchAnalytics = (0, _react.useCallback)(function (analyticsPayload) {
     if (analyticsPayload && analyticsPayload.attributes) {
@@ -122,7 +123,8 @@ function CardWithURLRenderer(props) {
     platform: platform,
     embedIframeRef: embedIframeRef,
     inlinePreloaderStyle: inlinePreloaderStyle,
-    ui: ui
+    ui: ui,
+    showHoverPreview: showHoverPreview
   };
   return /*#__PURE__*/_react.default.createElement(_reactErrorBoundary.ErrorBoundary, {
     FallbackComponent: ErrorFallback,

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

@@ -29,7 +29,7 @@ var _token = require("../../../../../utils/token");
 
 var _utils2 = require("../../../../../utils");
 
-var _templateObject, _templateObject2, _sizeToSpacing;
+var _templateObject, _templateObject2, _templateObject3, _sizeToSpacing;
 
 var getIconWidth = function getIconWidth(size) {
   switch (size) {
@@ -49,7 +49,18 @@ var getIconStyles = function getIconStyles(size) {
 };
 
 var getButtonStyle = function getButtonStyle(size, iconOnly) {
-  return size === _constants.SmartLinkSize.Small ? (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        font-size: 0.75rem;\n        font-weight: 500;\n        line-height: 1rem;\n        button,\n        button:hover,\n        button:focus,\n        button:active {\n          line-height: 1rem;\n          ", "\n        }\n      "])), iconOnly ? "\n            padding: 0.125rem;\n          " : "\n            padding-left: 0.25rem;\n            padding-right: 0.25rem;\n          ") : '';
+  switch (size) {
+    case _constants.SmartLinkSize.Large:
+      return iconOnly ? (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n            button,\n            button:hover,\n            button:focus,\n            button:active {\n              padding: 0;\n              > span {\n                margin: 0;\n              }\n            }\n          "]))) : '';
+
+    case _constants.SmartLinkSize.Small:
+      return (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n        font-size: 0.75rem;\n        font-weight: 500;\n        line-height: 1rem;\n        button,\n        button:hover,\n        button:focus,\n        button:active {\n          line-height: 1rem;\n          ", "\n        }\n      "])), iconOnly ? "\n            padding: 0.125rem;\n          " : "\n            padding-left: 0.25rem;\n            padding-right: 0.25rem;\n          ");
+
+    case _constants.SmartLinkSize.XLarge:
+    case _constants.SmartLinkSize.Medium:
+    default:
+      return '';
+  }
 };
 
 var ActionIcon = function ActionIcon(_ref) {
@@ -63,6 +74,15 @@ var ActionIcon = function ActionIcon(_ref) {
 };
 
 var sizeToSpacing = (_sizeToSpacing = {}, (0, _defineProperty2.default)(_sizeToSpacing, _constants.SmartLinkSize.Small, 'none'), (0, _defineProperty2.default)(_sizeToSpacing, _constants.SmartLinkSize.Medium, 'compact'), (0, _defineProperty2.default)(_sizeToSpacing, _constants.SmartLinkSize.Large, 'compact'), (0, _defineProperty2.default)(_sizeToSpacing, _constants.SmartLinkSize.XLarge, 'default'), _sizeToSpacing);
+/**
+ * An action that can be triggered with an on click.
+ * @public
+ * @param {ActionProps} ActionProps - The props necessary for the Action.
+ * @see DeleteAction
+ * @see EditAction
+ * @see CustomAction
+ */
+
 exports.sizeToSpacing = sizeToSpacing;
 
 var Action = function Action(_ref2) {
@@ -78,7 +98,8 @@ var Action = function Action(_ref2) {
       _ref2$iconPosition = _ref2.iconPosition,
       iconPosition = _ref2$iconPosition === void 0 ? 'before' : _ref2$iconPosition,
       tooltipMessage = _ref2.tooltipMessage,
-      asDropDownItem = _ref2.asDropDownItem;
+      asDropDownItem = _ref2.asDropDownItem,
+      overrideCss = _ref2.overrideCss;
 
   if (!onClick) {
     return null;
@@ -107,7 +128,8 @@ var Action = function Action(_ref2) {
     return (0, _core.jsx)(_tooltip.default, {
       content: tooltipMessage
     }, (0, _core.jsx)("div", {
-      css: getButtonStyle(size, iconOnly)
+      css: [getButtonStyle(size, iconOnly), overrideCss],
+      "data-testid": "".concat(testId, "-button-wrapper")
     }, (0, _core.jsx)(_customThemeButton.default, {
       spacing: sizeToSpacing[size],
       appearance: appearance,

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

@@ -12,11 +12,27 @@ 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
-// UIActions infer that you do not need to get any data from the context.
-// DataActions infer that the action depends on the data from the context.
+
+/**
+ * Creates a DeleteAction component. Accepts default ActionProps, but defaults
+ * the icon to a cross icon.
+ * @see Action
+ */
 var DeleteAction = (0, _utils.createUIAction)(_constants.ActionName.DeleteAction);
+/**
+ * Creates a EditAction component. Accepts default ActionProps, but defaults
+ * the icon to an edit (pencil) icon.
+ * @see Action
+ */
+
 exports.DeleteAction = DeleteAction;
 var EditAction = (0, _utils.createUIAction)(_constants.ActionName.EditAction);
+/**
+ * Creates a CustomAction component. Accepts default ActionProps. Required to provide
+ * your own icon or text.
+ * @see Action
+ */
+
 exports.EditAction = EditAction;
 var CustomAction = (0, _utils.createUIAction)(_constants.ActionName.CustomAction);
 exports.CustomAction = CustomAction;

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

@@ -34,6 +34,12 @@ var _excluded = ["triggerRef"];
 var _templateObject;
 
 var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  line-height: 1rem;\n"])));
+/**
+ * Creates a group of Action components. Accepts an array of Actions, in addition to some styling
+ * preferences.
+ * @param {ActionGroupProps} ActionGroupProps
+ * @see Action
+ */
 
 var ActionGroup = function ActionGroup(_ref) {
   var _ref$items = _ref.items,

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

@@ -22,6 +22,13 @@ var _templateObject;
 var getBlockStyles = function getBlockStyles(direction, size) {
   return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  justify-content: flex-start;\n  [data-separator] + [data-separator]:before {\n    content: '\u2022';\n    margin-right: ", "rem;\n  }\n"])), (0, _utils.getBaseStyles)(direction, size), (0, _utils.getGapSize)(size));
 };
+/**
+ * A block represents a collection of elements and actions that are arranged in a row.
+ * All elements and actions should be contained within a Block.
+ * @param {ActionGroupProps} ActionGroupProps
+ * @see Action
+ */
+
 
 var Block = function Block(_ref) {
   var children = _ref.children,
@@ -31,9 +38,9 @@ var Block = function Block(_ref) {
       size = _ref$size === void 0 ? _constants.SmartLinkSize.Medium : _ref$size,
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'smart-block' : _ref$testId,
-      extraCss = _ref.extraCss;
+      overrideCss = _ref.overrideCss;
   return (0, _core.jsx)("div", {
-    css: [getBlockStyles(direction, size), extraCss],
+    css: [getBlockStyles(direction, size), overrideCss],
     "data-smart-block": true,
     "data-testid": testId
   }, (0, _utils.renderChildren)(children, size));

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

@@ -33,6 +33,13 @@ var getAlignmentStyles = function getAlignmentStyles(align) {
 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;" : '');
 };
+/**
+ * Creates a group of Action components. Accepts an array of Actions, in addition to some styling
+ * preferences.
+ * @param {ActionGroupProps} ActionGroupProps
+ * @see Action
+ */
+
 
 exports.getElementGroupStyles = getElementGroupStyles;
 
@@ -40,7 +47,7 @@ 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,
+      overrideCss = _ref.overrideCss,
       _ref$direction = _ref.direction,
       direction = _ref$direction === void 0 ? _constants.SmartLinkDirection.Horizontal : _ref$direction,
       _ref$size = _ref.size,
@@ -50,7 +57,7 @@ var ElementGroup = function ElementGroup(_ref) {
       _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],
+    css: [getElementGroupStyles(direction, size, align, width), overrideCss],
     "data-smart-element-group": true,
     "data-testid": testId
   }, (0, _utils.renderChildren)(children, size));

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

@@ -21,6 +21,12 @@ var _elements = require("../../elements");
 
 var _actionGroup = _interopRequireDefault(require("../action-group"));
 
+/**
+ * Represents a FooterBlock, designed to contain elements and actions that should appear
+ * at the bottom of a link card.
+ * @param {FooterBlockProps} FooterBlockProps
+ * @see Block
+ */
 var FooterBlock = function FooterBlock(props) {
   var status = props.status,
       actions = props.actions,

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

@@ -74,6 +74,13 @@ var getMaxLines = function getMaxLines(maxLines) {
 
   return maxLines;
 };
+/**
+ * Represents a MetadataBlock, designed to contain groups of metadata in the form of elements.
+ * Accepts an array of elements to be shown either primary (left hand side) or secondary (right hand side).
+ * @param {MetadataBlockProps} MetadataBlockProps
+ * @see Block
+ */
+
 
 var MetadataBlock = function MetadataBlock(_ref) {
   var _ref$maxLines = _ref.maxLines,
@@ -101,12 +108,12 @@ var MetadataBlock = function MetadataBlock(_ref) {
     testId: "".concat(testId, "-resolved-view")
   }), primaryElements && /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
     align: _constants.SmartLinkAlignment.Left,
-    css: elementGroupStyles,
+    overrideCss: elementGroupStyles,
     direction: _constants.SmartLinkDirection.Horizontal,
     width: _constants.SmartLinkWidth.Flexible
   }, primaryElements), secondaryElements && /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
     align: _constants.SmartLinkAlignment.Right,
-    css: elementGroupStyles,
+    overrideCss: elementGroupStyles,
     direction: _constants.SmartLinkDirection.Horizontal,
     width: _constants.SmartLinkWidth.Flexible
   }, secondaryElements));

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

@@ -21,6 +21,11 @@ var _elements = require("../../elements");
 
 var _excluded = ["status", "testId"];
 
+/**
+ * Represents a PreviewBlock, which typically contains media or other large format content.
+ * @param {PreviewBlock} PreviewBlock
+ * @see Block
+ */
 var PreviewBlock = function PreviewBlock(_ref) {
   var _ref$status = _ref.status,
       status = _ref$status === void 0 ? _constants.SmartLinkStatus.Fallback : _ref$status,

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

@@ -25,6 +25,11 @@ var _excluded = ["maxLines", "status", "testId"];
 var DEFAULT_MAX_LINES = 3;
 var MAXIMUM_MAX_LINES = 3;
 var MINIMUM_MAX_LINES = 1;
+/**
+ * Represents a SnippetBlock, which is used to display longer form text content, like descriptions.
+ * @param {SnippetBlock} SnippetBlock
+ * @see Block
+ */
 
 var SnippetBlock = function SnippetBlock(_ref) {
   var _ref$maxLines = _ref.maxLines,

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

@@ -9,6 +9,8 @@ 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"));
@@ -17,6 +19,10 @@ 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");
@@ -25,7 +31,7 @@ var _elementGroup = _interopRequireDefault(require("../../element-group"));
 
 var _token = require("../../../../../../utils/token");
 
-var _utils2 = require("../utils");
+var _excluded = ["actionGroup", "retry", "position", "testId", "title"];
 
 var _templateObject, _templateObject2;
 
@@ -35,31 +41,45 @@ 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(props) {
-  var _props$size = props.size,
-      size = _props$size === void 0 ? _constants.SmartLinkSize.Medium : _props$size,
-      retry = props.retry,
-      testId = props.testId;
-
-  var _ref = retry || {},
-      retryDescriptor = _ref.descriptor,
-      onClick = _ref.onClick,
-      retryValues = _ref.values;
-
+/**
+ * Represents an Errored TitleBlock view.
+ * This will render when a Smart Link did not successfully resolve.
+ * This may be a result of a Smart Link not having the correct credentials,
+ * or the backend response was errored or malformed.
+ * @see TitleBlock
+ */
+
+
+var TitleBlockErroredView = function TitleBlockErroredView(_ref) {
+  var actionGroup = _ref.actionGroup,
+      retry = _ref.retry,
+      position = _ref.position,
+      testId = _ref.testId,
+      title = _ref.title,
+      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)(_utils2.BaseTitleBlockComponent, (0, _extends2.default)({}, props, {
-    blockTestIdPostfix: "errored-view"
-  }), retryDescriptor && (0, _core.jsx)(_elementGroup.default, {
+  return (0, _core.jsx)(_block.default, (0, _extends2.default)({}, blockProps, {
+    testId: "".concat(testId, "-errored-view")
+  }), (0, _core.jsx)(_elements.LinkIcon, {
+    position: position
+  }), title, 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)({}, retryDescriptor, {
-    values: retryValues
-  })))));
+  }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, descriptor, {
+    values: values
+  })))), actionGroup);
 };
 
 var _default = TitleBlockErroredView;