@atlaskit/smart-card 18.0.12 → 18.0.15

package/dist/es2019/view/FlexibleCard/components/elements/utils.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useContext } from 'react';
+import { css } from '@emotion/core';
 import { ElementName, IconType } from '../../../../constants';
 import Icon from './icon';
 import Link from './link';
@@ -68,8 +69,10 @@ const elementMappings = {
   [ElementName.Snippet]: {
     component: Text,
     props: {
-      color: tokens.snippet,
-      maxLines: SNIPPET_DEFAULT_MAX_LINES
+      maxLines: SNIPPET_DEFAULT_MAX_LINES,
+      overrideCss: css`
+        color: ${tokens.snippet};
+      `
     }
   },
   [ElementName.State]: {

package/dist/es2019/view/FlexibleCard/index.js

@@ -3,6 +3,12 @@ import React from 'react';
 import Container from './components/container';
 import { FlexibleUiContext } from '../../state/flexible-ui-context';
 import { getContextByStatus, getRetryOptions } from './utils';
+/**
+ * This represents a Flexible Card: a link represented by a card with metadata.
+ * This is the container in which all Flexible UI Blocks and Elements exist.
+ * Note: TitleBlock is mandatory for a Flexible Card to render.
+ * @see Container
+ */
 
 const FlexibleCard = ({
   cardState,

package/dist/es2019/view/HoverCard/index.js

@@ -10,34 +10,58 @@ import { SmartLinkSize, ActionName } from '../../constants';
 import { useSmartLinkActions } from '../../state/hooks-external/useSmartLinkActions';
 import { HoverCardContainer } from './styled';
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
-export const HoverCard = ({
+import { withAnalyticsEvents, withAnalyticsContext } from '@atlaskit/analytics-next';
+import { fireSmartLinkEvent } from '../../utils/analytics';
+import { useSmartCardState as useLinkState } from '../../state/store';
+import { useSmartLinkAnalytics } from '../../state/analytics';
+import { getExtensionKey, getDefinitionId } from '../../state/helpers';
+export const HoverCardComponent = ({
   children,
-  url
+  url,
+  createAnalyticsEvent
 }) => {
+  const analyticsHandler = useCallback(analyticsPayload => {
+    fireSmartLinkEvent(analyticsPayload, createAnalyticsEvent);
+  }, [createAnalyticsEvent]);
   const delay = 300;
   const [isOpen, setIsOpen] = React.useState(false);
   const fadeOutTimeoutId = useRef();
   const fadeInTimeoutId = useRef();
+  const cardOpenTime = useRef();
+  const linkState = useLinkState(url);
+  const analytics = useSmartLinkAnalytics(analyticsHandler);
+  const extensionKey = useMemo(() => getExtensionKey(linkState.details), [linkState]);
+  const definitionId = useMemo(() => getDefinitionId(linkState.details), [linkState]);
   const initHideCard = useCallback(() => {
     if (fadeInTimeoutId.current) {
       clearTimeout(fadeInTimeoutId.current);
     }
 
     fadeOutTimeoutId.current = setTimeout(() => {
+      //Check its previously open to avoid firing events when moving between the child and hover card components
+      if (isOpen === true && cardOpenTime.current) {
+        const hoverTime = Date.now() - cardOpenTime.current;
+        analytics.ui.hoverCardDismissedEvent('card', hoverTime, definitionId, extensionKey);
+      }
+
       setIsOpen(false);
     }, delay);
-  }, [delay]);
+  }, [delay, isOpen, definitionId, extensionKey, analytics]);
   const initShowCard = useCallback(() => {
     if (fadeOutTimeoutId.current) {
       clearTimeout(fadeOutTimeoutId.current);
     }
 
     fadeInTimeoutId.current = setTimeout(() => {
+      //Check if its previously closed to avoid firing events when moving between the child and hover card components
+      if (isOpen === false) {
+        cardOpenTime.current = Date.now();
+        analytics.ui.hoverCardViewedEvent('card', definitionId, extensionKey);
+      }
+
       setIsOpen(true);
     }, delay);
-  }, [delay]); //TODO: EDM-2905: Add analytics events
-
-  const analyticsHandler = useCallback(() => {}, []);
+  }, [delay, isOpen, definitionId, extensionKey, analytics]);
   const linkActions = useSmartLinkActions({
     url,
     appearance: 'block',
@@ -57,10 +81,13 @@ export const HoverCard = ({
         size: "medium"
       }),
       iconPosition: 'before',
-      onClick: () => window.open(url, '_blank'),
+      onClick: () => {
+        window.open(url, '_blank');
+        analytics.ui.hoverCardOpenLinkClickedEvent('card', definitionId, extensionKey);
+      },
       testId: 'hover-card-open-button'
     };
-  }, [url]);
+  }, [url, definitionId, extensionKey, analytics]);
 
   const cardComponent = () => jsx("div", {
     onMouseEnter: initShowCard,
@@ -84,11 +111,14 @@ export const HoverCard = ({
     testId: "hover-card",
     isOpen: isOpen,
     onClose: onClose,
-    placement: "bottom",
+    placement: "bottom-start",
     content: cardComponent,
     trigger: triggerProps => jsx("span", _extends({}, triggerProps, {
       onMouseEnter: initShowCard,
       onMouseLeave: initHideCard
     }), children)
   });
-};
+};
+export const HoverCard = withAnalyticsContext({
+  source: 'smartLinkPreviewHoverCard'
+})(withAnalyticsEvents()(HoverCardComponent));

package/dist/es2019/view/HoverCard/styled.js

@@ -1,7 +1,12 @@
 import { css } from '@emotion/core';
+import { loadingPlaceholderClassName } from '../../index';
 export const HoverCardContainer = css`
   background: none;
   border-width: 0;
-  max-width: 500px;
+  max-width: 350px;
   padding: 0;
+
+  .${loadingPlaceholderClassName} {
+    display: none;
+  }
 `;

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

@@ -1,4 +1,4 @@
-import { uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, uiRenderSuccessEvent, resolvedEvent as _resolvedEvent, unresolvedEvent as _unresolvedEvent, invokeSucceededEvent as _invokeSucceededEvent, invokeFailedEvent as _invokeFailedEvent, connectSucceededEvent as _connectSucceededEvent, connectFailedEvent as _connectFailedEvent, trackAppAccountConnected, screenAuthPopupEvent, instrumentEvent } from '../../utils/analytics';
+import { uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, uiRenderSuccessEvent, uiHoverCardViewedEvent, uiHoverCardDismissedEvent, uiHoverCardOpenLinkClickedEvent, resolvedEvent as _resolvedEvent, unresolvedEvent as _unresolvedEvent, invokeSucceededEvent as _invokeSucceededEvent, invokeFailedEvent as _invokeFailedEvent, connectSucceededEvent as _connectSucceededEvent, connectFailedEvent as _connectFailedEvent, trackAppAccountConnected, screenAuthPopupEvent, instrumentEvent } from '../../utils/analytics';
 import { useMemo } from 'react';
 import { failUfoExperience, startUfoExperience, succeedUfoExperience } from './ufoExperiences';
 export var useSmartLinkAnalytics = function useSmartLinkAnalytics(dispatchAnalytics) {
@@ -22,6 +22,9 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(dispatchAnalyt
         });
         dispatchAnalytics(uiActionClickedEvent(extensionKey, actionType, display));
       },
+      hoverCardOpenLinkClickedEvent: function hoverCardOpenLinkClickedEvent(previewDisplay, definitionId, extensionKey, previewInvokeMethod) {
+        dispatchAnalytics(uiHoverCardOpenLinkClickedEvent(previewDisplay, definitionId, extensionKey, previewInvokeMethod));
+      },
       closedAuthEvent: function closedAuthEvent(display, definitionId, extensionKey) {
         return dispatchAnalytics(uiClosedAuthEvent(display, definitionId, extensionKey));
       },
@@ -35,6 +38,12 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(dispatchAnalyt
           display: display
         });
         dispatchAnalytics(uiRenderSuccessEvent(display, definitionId, extensionKey));
+      },
+      hoverCardViewedEvent: function hoverCardViewedEvent(hoverDisplay, definitionId, extensionKey, previewInvokeMethod) {
+        return dispatchAnalytics(uiHoverCardViewedEvent(hoverDisplay, definitionId, extensionKey, previewInvokeMethod));
+      },
+      hoverCardDismissedEvent: function hoverCardDismissedEvent(hoverDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod) {
+        return dispatchAnalytics(uiHoverCardDismissedEvent(hoverDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod));
       }
     };
   }, [dispatchAnalytics]);

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

@@ -1,4 +1,9 @@
 import { useContext, createContext } from 'react';
+
+/**
+ * This provides the data that will be used by Smart Links Flexible UI to populate it's
+ * underlying elements.
+ */
 export var FlexibleUiContext = /*#__PURE__*/createContext(undefined);
 export var useFlexibleUiContext = function useFlexibleUiContext() {
   return useContext(FlexibleUiContext);

package/dist/esm/utils/analytics/analytics.js

@@ -252,4 +252,45 @@ export var uiRenderFailedEvent = function uiRenderFailedEvent(display, error, er
       display: display
     }
   };
+};
+export 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
+    })
+  };
+};
+export 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
+    })
+  };
+};
+export 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
+    })
+  };
 };

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

@@ -6,7 +6,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import { resolvedEvent, unresolvedEvent } from './analytics';
 import { getMeasure } from '../performance';
-export { ANALYTICS_CHANNEL, context, fireSmartLinkEvent, resolvedEvent, unresolvedEvent, invokeSucceededEvent, invokeFailedEvent, connectSucceededEvent, connectFailedEvent, trackAppAccountConnected, uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, screenAuthPopupEvent, uiRenderSuccessEvent, uiRenderFailedEvent } from './analytics';
+export { ANALYTICS_CHANNEL, context, fireSmartLinkEvent, resolvedEvent, unresolvedEvent, invokeSucceededEvent, invokeFailedEvent, connectSucceededEvent, connectFailedEvent, trackAppAccountConnected, uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, screenAuthPopupEvent, uiRenderSuccessEvent, uiRenderFailedEvent, uiHoverCardViewedEvent, uiHoverCardDismissedEvent, uiHoverCardOpenLinkClickedEvent } from './analytics';
 export var instrumentEvent = function instrumentEvent(id, status, definitionId, extensionKey, resourceType, error) {
   var measure = getMeasure(id, status) || {
     duration: undefined

package/dist/esm/version.json

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

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

@@ -25,7 +25,8 @@ export 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 = useSmartLink(id, url, dispatchAnalytics),
@@ -129,7 +130,8 @@ export function CardWithUrlContent(_ref) {
         isSelected: isSelected,
         onResolve: onResolve,
         testId: testId,
-        inlinePreloaderStyle: inlinePreloaderStyle
+        inlinePreloaderStyle: inlinePreloaderStyle,
+        showHoverPreview: showHoverPreview
       });
 
     case 'block':

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

@@ -45,7 +45,8 @@ export 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 = useCallback(function (analyticsPayload) {
     if (analyticsPayload && analyticsPayload.attributes) {
@@ -98,7 +99,8 @@ export function CardWithURLRenderer(props) {
     platform: platform,
     embedIframeRef: embedIframeRef,
     inlinePreloaderStyle: inlinePreloaderStyle,
-    ui: ui
+    ui: ui,
+    showHoverPreview: showHoverPreview
   };
   return /*#__PURE__*/React.createElement(ErrorBoundary, {
     FallbackComponent: ErrorFallback,

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

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _sizeToSpacing;
+var _templateObject, _templateObject2, _templateObject3, _sizeToSpacing;
 
 /** @jsx jsx */
 import React from 'react';
@@ -32,7 +32,18 @@ var getIconStyles = function getIconStyles(size) {
 };
 
 var getButtonStyle = function getButtonStyle(size, iconOnly) {
-  return size === SmartLinkSize.Small ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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 SmartLinkSize.Large:
+      return iconOnly ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n            button,\n            button:hover,\n            button:focus,\n            button:active {\n              padding: 0;\n              > span {\n                margin: 0;\n              }\n            }\n          "]))) : '';
+
+    case SmartLinkSize.Small:
+      return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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 SmartLinkSize.XLarge:
+    case SmartLinkSize.Medium:
+    default:
+      return '';
+  }
 };
 
 var ActionIcon = function ActionIcon(_ref) {
@@ -46,6 +57,14 @@ var ActionIcon = function ActionIcon(_ref) {
 };
 
 export var sizeToSpacing = (_sizeToSpacing = {}, _defineProperty(_sizeToSpacing, SmartLinkSize.Small, 'none'), _defineProperty(_sizeToSpacing, SmartLinkSize.Medium, 'compact'), _defineProperty(_sizeToSpacing, SmartLinkSize.Large, 'compact'), _defineProperty(_sizeToSpacing, 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
+ */
 
 var Action = function Action(_ref2) {
   var _ref2$appearance = _ref2.appearance,
@@ -60,7 +79,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;
@@ -89,7 +109,8 @@ var Action = function Action(_ref2) {
     return jsx(Tooltip, {
       content: tooltipMessage
     }, jsx("div", {
-      css: getButtonStyle(size, iconOnly)
+      css: [getButtonStyle(size, iconOnly), overrideCss],
+      "data-testid": "".concat(testId, "-button-wrapper")
     }, jsx(Button, {
       spacing: sizeToSpacing[size],
       appearance: appearance,

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

@@ -2,9 +2,25 @@ import { ActionName } from '../../../../constants';
 import { createUIAction } from './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
+ */
 
 export var DeleteAction = createUIAction(ActionName.DeleteAction);
+/**
+ * Creates a EditAction component. Accepts default ActionProps, but defaults
+ * the icon to an edit (pencil) icon.
+ * @see Action
+ */
+
 export var EditAction = createUIAction(ActionName.EditAction);
+/**
+ * Creates a CustomAction component. Accepts default ActionProps. Required to provide
+ * your own icon or text.
+ * @see Action
+ */
+
 export var CustomAction = createUIAction(ActionName.CustomAction);

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

@@ -15,6 +15,12 @@ import Button from '@atlaskit/button/standard-button';
 import MoreIcon from '@atlaskit/icon/glyph/more';
 import { sizeToSpacing } from '../../actions/action';
 var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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/esm/view/FlexibleCard/components/blocks/block/index.js

@@ -11,6 +11,13 @@ import { getBaseStyles, getGapSize, renderChildren } from '../utils';
 var getBlockStyles = function getBlockStyles(direction, size) {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  justify-content: flex-start;\n  [data-separator] + [data-separator]:before {\n    content: '\u2022';\n    margin-right: ", "rem;\n  }\n"])), getBaseStyles(direction, size), 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,
@@ -20,9 +27,9 @@ var Block = function Block(_ref) {
       size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'smart-block' : _ref$testId,
-      extraCss = _ref.extraCss;
+      overrideCss = _ref.overrideCss;
   return jsx("div", {
-    css: [getBlockStyles(direction, size), extraCss],
+    css: [getBlockStyles(direction, size), overrideCss],
     "data-smart-block": true,
     "data-testid": testId
   }, renderChildren(children, size));

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

@@ -22,12 +22,18 @@ var getAlignmentStyles = function getAlignmentStyles(align) {
 export var getElementGroupStyles = function getElementGroupStyles(direction, size, align, width) {
   return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  min-width: 10%;\n  ", "\n"])), getBaseStyles(direction, size), getAlignmentStyles(align), width === 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
+ */
 
 var ElementGroup = function ElementGroup(_ref) {
   var _ref$align = _ref.align,
       align = _ref$align === void 0 ? SmartLinkAlignment.Left : _ref$align,
       children = _ref.children,
-      css = _ref.css,
+      overrideCss = _ref.overrideCss,
       _ref$direction = _ref.direction,
       direction = _ref$direction === void 0 ? SmartLinkDirection.Horizontal : _ref$direction,
       _ref$size = _ref.size,
@@ -37,7 +43,7 @@ var ElementGroup = function ElementGroup(_ref) {
       _ref$width = _ref.width,
       width = _ref$width === void 0 ? SmartLinkWidth.FitToContent : _ref$width;
   return jsx("div", {
-    css: [getElementGroupStyles(direction, size, align, width), css],
+    css: [getElementGroupStyles(direction, size, align, width), overrideCss],
     "data-smart-element-group": true,
     "data-testid": testId
   }, renderChildren(children, size));

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

@@ -5,6 +5,12 @@ import Block from '../block';
 import ElementGroup from '../element-group';
 import { Provider } from '../../elements';
 import ActionGroup from '../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,

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

@@ -56,6 +56,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,
@@ -83,12 +90,12 @@ var MetadataBlock = function MetadataBlock(_ref) {
     testId: "".concat(testId, "-resolved-view")
   }), primaryElements && /*#__PURE__*/React.createElement(ElementGroup, {
     align: SmartLinkAlignment.Left,
-    css: elementGroupStyles,
+    overrideCss: elementGroupStyles,
     direction: SmartLinkDirection.Horizontal,
     width: SmartLinkWidth.Flexible
   }, primaryElements), secondaryElements && /*#__PURE__*/React.createElement(ElementGroup, {
     align: SmartLinkAlignment.Right,
-    css: elementGroupStyles,
+    overrideCss: elementGroupStyles,
     direction: SmartLinkDirection.Horizontal,
     width: SmartLinkWidth.Flexible
   }, secondaryElements));

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

@@ -5,6 +5,11 @@ import React from 'react';
 import { SmartLinkStatus } from '../../../../../constants';
 import Block from '../block';
 import { Preview } from '../../elements';
+/**
+ * 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,

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

@@ -9,6 +9,11 @@ import { getMaxLines } from '../../utils';
 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/esm/view/FlexibleCard/components/blocks/title-block/errored/index.js

@@ -1,5 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["actionGroup", "retry", "position", "testId", "title"];
 
 var _templateObject, _templateObject2;
 
@@ -7,42 +9,57 @@ var _templateObject, _templateObject2;
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { css, jsx } from '@emotion/core';
+import { LinkIcon } from '../../../elements';
+import Block from '../../block';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize } from '../../../../../../constants';
 import { getLinkLineHeight, getLinkSizeStyles, getTruncateStyles } from '../../../utils';
 import ElementGroup from '../../element-group';
 import { tokens } from '../../../../../../utils/token';
-import { BaseTitleBlockComponent } from '../utils';
 var actionStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  :hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n"])), tokens.errorMessageHover);
 
 var getMessageStyles = function getMessageStyles(size, hasAction) {
   var sizeStyles = getLinkSizeStyles(size);
   return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    flex: 1 1 auto;\n    justify-content: flex-end;\n    ", "\n    ", "\n    ", "\n    color: ", ";\n  "])), hasAction ? actionStyles : '', sizeStyles, getTruncateStyles(1, getLinkLineHeight(size)), tokens.errorMessage);
 };
+/**
+ * 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(props) {
-  var _props$size = props.size,
-      size = _props$size === void 0 ? SmartLinkSize.Medium : _props$size,
-      retry = props.retry,
-      testId = props.testId;
 
-  var _ref = retry || {},
-      retryDescriptor = _ref.descriptor,
-      onClick = _ref.onClick,
-      retryValues = _ref.values;
+var TitleBlockErroredView = function TitleBlockErroredView(_ref) {
+  var actionGroup = _ref.actionGroup,
+      retry = _ref.retry,
+      position = _ref.position,
+      testId = _ref.testId,
+      title = _ref.title,
+      blockProps = _objectWithoutProperties(_ref, _excluded);
 
+  var _ref2 = retry || {},
+      descriptor = _ref2.descriptor,
+      onClick = _ref2.onClick,
+      values = _ref2.values;
+
+  var _blockProps$size = blockProps.size,
+      size = _blockProps$size === void 0 ? SmartLinkSize.Medium : _blockProps$size;
   var hasAction = onClick !== undefined;
-  return jsx(BaseTitleBlockComponent, _extends({}, props, {
-    blockTestIdPostfix: "errored-view"
-  }), retryDescriptor && jsx(ElementGroup, {
+  return jsx(Block, _extends({}, blockProps, {
+    testId: "".concat(testId, "-errored-view")
+  }), jsx(LinkIcon, {
+    position: position
+  }), title, descriptor && jsx(ElementGroup, {
     direction: SmartLinkDirection.Horizontal,
     align: SmartLinkAlignment.Right
   }, jsx("span", {
     css: getMessageStyles(size, hasAction),
     onClick: onClick,
     "data-testid": "".concat(testId, "-errored-view-message")
-  }, jsx(FormattedMessage, _extends({}, retryDescriptor, {
-    values: retryValues
-  })))));
+  }, jsx(FormattedMessage, _extends({}, descriptor, {
+    values: values
+  })))), actionGroup);
 };
 
 export default TitleBlockErroredView;