@atlaskit/smart-card 18.0.13 → 18.0.16

package/dist/esm/view/EmbedCard/components/styled.js

@@ -6,6 +6,7 @@ import styled from '@emotion/styled';
 import { size as csssize, borderRadius, size, ellipsis } from '@atlaskit/media-ui';
 import { fontFamily } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { gs as gridSize } from '../../common/utils';
 export var className = 'media-card-frame';
 export var cardShadow = "";
@@ -34,13 +35,13 @@ function getinteractiveStyles(_ref3) {
   var isInteractive = _ref3.isInteractive,
       isFrameVisible = _ref3.isFrameVisible;
   var visibleFrameStyles = isFrameVisible ? visibleStyles : '';
-  var interactiveFrameStyles = isInteractive ? "\n  &:hover {\n    ".concat(visibleStyles, "\n  }\n  &:active {\n    background-color: ").concat(colors.B50, ";\n  }\n") : '';
+  var interactiveFrameStyles = isInteractive ? "\n  &:hover {\n    ".concat(visibleStyles, "\n  }\n  &:active {\n    background-color: ").concat(token('color.background.selected', colors.B50), ";\n  }\n") : '';
   return "".concat(visibleFrameStyles).concat(interactiveFrameStyles);
 }
 
 function selected(_ref4) {
   var isSelected = _ref4.isSelected;
-  return isSelected ? "\n    ".concat(visibleStyles, "\n    &::after {\n      cursor: pointer;\n      box-shadow: 0 0 0 3px ").concat(colors.B100, ";\n      content: '';\n      outline: none;\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      left: 0;\n      ").concat(borderRadius, "\n    }\n    ") : '';
+  return isSelected ? "\n    ".concat(visibleStyles, "\n    &::after {\n      cursor: pointer;\n      box-shadow: 0 0 0 3px ").concat(token('color.border.selected', colors.B100), ";\n      content: '';\n      outline: none;\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      left: 0;\n      ").concat(borderRadius, "\n    }\n    ") : '';
 }
 
 var height = function height(_ref5) {
@@ -52,7 +53,7 @@ var wrapperStyles = function wrapperStyles(props) {
   return "\n  ".concat(borderRadius, "\n  ").concat(minWidth(props), "\n  ").concat(maxWidth(props), "\n  ").concat(getinteractiveStyles(props), "\n  ").concat(visible(props), "\n  display: inline-flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  font-family: ").concat(fontFamily(), ";\n  width: 100%;\n  user-select: none;\n  line-height: initial;\n  transition: background 0.3s;\n  position: relative;\n  ").concat(height(props), ";\n  ").concat(selected(props), "\n\n  &:after {\n    content: '';\n    background: transparent;\n    transition: background 0.3s, box-shadow 0.3s;\n    position: absolute;\n    width: calc(100% + ").concat(gridSize(2), ");\n    height: calc(100% + ").concat(gridSize(1), ");\n    left: -").concat(gridSize(1), ";\n    ").concat(borderRadius, "\n  }\n");
 };
 
-var visibleStyles = "\n  background-color: ".concat(colors.N30, ";\n\n  &:after {\n    background: ").concat(colors.N30, " !important;\n  }\n  .embed-header {\n    opacity: 1;\n  }");
+var visibleStyles = "\n  background-color: ".concat(token('color.background.neutral.subtle', colors.N30), ";\n\n  &:after {\n    background: ").concat(token('color.background.neutral', colors.N30), " !important;\n  }\n  .embed-header {\n    opacity: 1;\n  }");
 
 function visible(_ref6) {
   var isVisible = _ref6.isVisible;
@@ -66,12 +67,12 @@ export var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedT
   return wrapperStyles(props);
 });
 export var embedHeaderHeight = 32;
-export var Header = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: ", "px;\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  color: ", ";\n  opacity: 0;\n  transition: 300ms opacity cubic-bezier(0.15, 1, 0.3, 1);\n"])), embedHeaderHeight, colors.N300);
+export var Header = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: ", "px;\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  color: ", ";\n  opacity: 0;\n  transition: 300ms opacity cubic-bezier(0.15, 1, 0.3, 1);\n"])), embedHeaderHeight, token('color.icon', colors.N300));
 export var IconWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  ", " margin-right: 4px;\n"])), borderRadius, size(16), function (_ref7) {
   var isPlaceholder = _ref7.isPlaceholder;
 
   if (isPlaceholder) {
-    return "\n      background-color: ".concat(colors.N30, ";\n    ");
+    return "\n      background-color: ".concat(token('color.skeleton', colors.N30), ";\n    ");
   } else {
     return '';
   }
@@ -80,19 +81,19 @@ export var TextWrapper = styled.div(_templateObject5 || (_templateObject5 = _tag
   var isPlaceholder = _ref8.isPlaceholder;
 
   if (isPlaceholder) {
-    return "\n        ".concat(borderRadius, "\n        width: 125px;\n        height: 12px;\n        background-color: ").concat(colors.N30, ";\n      ");
+    return "\n        ".concat(borderRadius, "\n        width: 125px;\n        height: 12px;\n        background-color: ").concat(token('color.skeleton', colors.N30), ";\n      ");
   } else {
     return '';
   }
-}, colors.N300, ellipsis('none'));
+}, token('color.text.subtlest', colors.N300), ellipsis('none'));
 // NB: `overflow` is kept as `hidden` since
 // the internal contents of the `iframe` should
 // manage scrolling behaviour.
-export var Content = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  background-color: white;\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, gridSize(4), gridSize(4), function (_ref9) {
+export var Content = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\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, token('elevation.surface', 'white'), gridSize(4), gridSize(4), function (_ref9) {
   var isInteractive = _ref9.isInteractive;
 
   if (isInteractive) {
-    return "\n          .".concat(className, ":hover & {\n            box-shadow: 0 4px 8px -2px rgba(23, 43, 77, 0.32),\n              0 0 1px rgba(23, 43, 77, 0.25);\n          }\n        ");
+    return "\n          .".concat(className, ":hover & {\n            box-shadow: ").concat(token('elevation.shadow.overlay', '0 4px 8px -2px rgba(23, 43, 77, 0.32), 0 0 1px rgba(23, 43, 77, 0.25)'), ";\n          }\n        ");
   } else {
     return '';
   }
@@ -103,11 +104,11 @@ export var Image = styled.img(_templateObject7 || (_templateObject7 = _taggedTem
 }, borderRadius);
 export var maxAvatarCount = 6;
 export var ContentWrapper = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  padding: 8px 12px 12px 12px;\n"])));
-export var Title = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 16px;\n  font-weight: 500;\n  line-height: ", ";\n  max-height: ", "px;\n  overflow: hidden;\n"])), colors.N900, 20 / 16, 20 * 4);
-export var Byline = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin-top: 4px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  ", ";\n"])), colors.N300, 16 / 12, ellipsis('100%'));
-export var Description = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  margin-top: 7px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  max-height: ", "px;\n  overflow: hidden;\n"])), colors.N800, 18 / 12, 18 * 3);
+export var Title = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 16px;\n  font-weight: 500;\n  line-height: ", ";\n  max-height: ", "px;\n  overflow: hidden;\n"])), token('color.text', colors.N900), 20 / 16, 20 * 4);
+export var Byline = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin-top: 4px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  ", ";\n"])), token('color.text.subtlest', colors.N300), 16 / 12, ellipsis('100%'));
+export var Description = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  margin-top: 7px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  max-height: ", "px;\n  overflow: hidden;\n"])), token('color.text', colors.N800), 18 / 12, 18 * 3);
 export var ResolvedViewIconWrapper = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  margin-top: 4px;\n"])));
-export var Thumbnail = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  float: right;\n  margin: 4px 0 12px 12px;\n  background-color: ", ";\n  background-image: url(", ");\n  background-size: cover;\n"])), borderRadius, size(48), colors.N30, function (_ref11) {
+export var Thumbnail = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  float: right;\n  margin: 4px 0 12px 12px;\n  background-color: ", ";\n  background-image: url(", ");\n  background-size: cover;\n"])), borderRadius, size(48), token('color.skeleton', colors.N30), function (_ref11) {
   var src = _ref11.src;
   return src;
 });

package/dist/esm/view/EmbedCard/views/ErroredView.js

@@ -4,6 +4,7 @@ import Button from '@atlaskit/button/custom-theme-button';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import { fontSize } from '@atlaskit/theme/constants';
 import { R300 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { Frame } from '../../BlockCard/components/Frame';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '@atlaskit/media-ui/messages';
@@ -22,7 +23,7 @@ export var EmbedCardErroredView = function EmbedCardErroredView(_ref) {
     testId: testId
   }, jsx(ErrorIcon, {
     size: "small",
-    primaryColor: R300,
+    primaryColor: token('color.icon.danger', R300),
     label: "error-icon"
   }), jsx("span", {
     css: {

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;

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

@@ -1,30 +1,34 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["status", "testId"];
-import React from 'react';
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["actions", "anchorTarget", "maxLines", "onClick", "overrideCss", "status", "showActionOnHover", "testId", "text", "theme"];
+
+var _templateObject, _templateObject2;
+
+import React, { useState } from 'react';
+import { css } from '@emotion/core';
 import { SmartLinkStatus } from '../../../../../constants';
 import TitleBlockResolvedView from './resolved';
 import TitleBlockErroredView from './errored';
 import TitleBlockResolvingView from './resolving';
+import ActionGroup from '../action-group';
+import { Title } from '../../elements';
 
-var TitleBlock = function TitleBlock(_ref) {
-  var _ref$status = _ref.status,
-      status = _ref$status === void 0 ? SmartLinkStatus.Fallback : _ref$status,
-      _ref$testId = _ref.testId,
-      testId = _ref$testId === void 0 ? 'smart-block-title' : _ref$testId,
-      props = _objectWithoutProperties(_ref, _excluded);
+var getActionStyles = function getActionStyles(showOnHover, isOpen) {
+  if (showOnHover && !isOpen) {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      .actions-button-group {\n        visibility: hidden;\n      }\n\n      &:hover {\n        .actions-button-group {\n          visibility: visible;\n        }\n      }\n    "])));
+  }
+};
 
+var getTitleBlockViewComponent = function getTitleBlockViewComponent(status) {
   switch (status) {
     case SmartLinkStatus.Pending:
     case SmartLinkStatus.Resolving:
-      return /*#__PURE__*/React.createElement(TitleBlockResolvingView, _extends({}, props, {
-        testId: testId
-      }));
+      return TitleBlockResolvingView;
 
     case SmartLinkStatus.Resolved:
-      return /*#__PURE__*/React.createElement(TitleBlockResolvedView, _extends({}, props, {
-        testId: testId
-      }));
+      return TitleBlockResolvedView;
 
     case SmartLinkStatus.Unauthorized:
     case SmartLinkStatus.Forbidden:
@@ -32,10 +36,68 @@ var TitleBlock = function TitleBlock(_ref) {
     case SmartLinkStatus.Errored:
     case SmartLinkStatus.Fallback:
     default:
-      return /*#__PURE__*/React.createElement(TitleBlockErroredView, _extends({}, props, {
-        testId: testId
-      }));
+      return TitleBlockErroredView;
   }
 };
+/**
+ * Represents a TitleBlock, which is the foundation of all Flexible Smart Links.
+ * This contains an icon, the link, and any associated metadata and actions in one block.
+ * The TitleBlock will also render differently given the state of the smart link.
+ * This can be found in the corresponding Resolving, Resolved and Errored views.
+ * @param {TitleBlockProps} TitleBlockProps
+ * @see Block
+ * @see TitleBlockResolvingView
+ * @see TitleBlockResolvedView
+ * @see TitleBlockErroredView
+ */
+
+
+var TitleBlock = function TitleBlock(_ref) {
+  var _ref$actions = _ref.actions,
+      actions = _ref$actions === void 0 ? [] : _ref$actions,
+      anchorTarget = _ref.anchorTarget,
+      maxLines = _ref.maxLines,
+      onClick = _ref.onClick,
+      overrideCss = _ref.overrideCss,
+      _ref$status = _ref.status,
+      status = _ref$status === void 0 ? SmartLinkStatus.Fallback : _ref$status,
+      showActionOnHover = _ref.showActionOnHover,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-block-title' : _ref$testId,
+      text = _ref.text,
+      theme = _ref.theme,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      actionDropdownOpen = _useState2[0],
+      setActionDropdownOpen = _useState2[1];
+
+  var actionGroup = actions.length > 0 && /*#__PURE__*/React.createElement(ActionGroup, {
+    items: actions,
+    visibleButtonsNum: showActionOnHover ? 1 : 2,
+    onDropdownOpenChange: function onDropdownOpenChange(isOpen) {
+      return setActionDropdownOpen(isOpen);
+    }
+  });
+  var actionStyles = getActionStyles(showActionOnHover, actionDropdownOpen);
+  var combinedCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    ", " ", "\n  "])), actionStyles, overrideCss);
+  var overrideText = !!text ? {
+    text: text
+  } : {};
+  var title = /*#__PURE__*/React.createElement(Title, _extends({
+    maxLines: maxLines,
+    onClick: onClick,
+    target: anchorTarget,
+    theme: theme
+  }, overrideText));
+  var Component = getTitleBlockViewComponent(status);
+  return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+    actionGroup: actionGroup,
+    overrideCss: combinedCss,
+    testId: testId,
+    title: title
+  }));
+};
 
 export default TitleBlock;

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

@@ -1,14 +1,45 @@
 import _extends from "@babel/runtime/helpers/extends";
-
-/** @jsx jsx */
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["actionGroup", "metadata", "position", "subtitle", "testId", "text", "title"];
 import React from 'react';
-import { jsx } from '@emotion/core';
-import { BaseTitleBlockComponent } from '../utils';
+import { LinkIcon } from '../../../elements';
+import Block from '../../block';
+import ElementGroup from '../../element-group';
+import { SmartLinkAlignment, SmartLinkDirection, SmartLinkWidth } from '../../../../../../constants';
+import { renderElementItems } from '../../utils';
+/**
+ * This renders a fully resolved TitleBlock.
+ * This should render when a Smart Link returns a valid response.
+ * @see TitleBlock
+ */
+
+var TitleBlockResolvedView = function TitleBlockResolvedView(_ref) {
+  var actionGroup = _ref.actionGroup,
+      _ref$metadata = _ref.metadata,
+      metadata = _ref$metadata === void 0 ? [] : _ref$metadata,
+      position = _ref.position,
+      _ref$subtitle = _ref.subtitle,
+      subtitle = _ref$subtitle === void 0 ? [] : _ref$subtitle,
+      testId = _ref.testId,
+      text = _ref.text,
+      title = _ref.title,
+      blockProps = _objectWithoutProperties(_ref, _excluded);
 
-var TitleBlockResolvedView = function TitleBlockResolvedView(props) {
-  return jsx(BaseTitleBlockComponent, _extends({}, props, {
-    blockTestIdPostfix: "resolved-view"
-  }));
+  var metadataElements = renderElementItems(metadata);
+  var subtitleElements = renderElementItems(subtitle);
+  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
+    testId: "".concat(testId, "-resolved-view")
+  }), /*#__PURE__*/React.createElement(LinkIcon, {
+    position: position
+  }), /*#__PURE__*/React.createElement(ElementGroup, {
+    direction: SmartLinkDirection.Vertical,
+    width: SmartLinkWidth.Flexible
+  }, title, subtitleElements && /*#__PURE__*/React.createElement(ElementGroup, {
+    direction: SmartLinkDirection.Horizontal
+  }, subtitleElements)), metadataElements && /*#__PURE__*/React.createElement(ElementGroup, {
+    direction: SmartLinkDirection.Horizontal,
+    align: SmartLinkAlignment.Right
+  }, metadataElements), actionGroup);
 };
 
 export default TitleBlockResolvedView;