@atlaskit/smart-card 18.0.13 → 18.0.16

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;

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

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,9 +11,15 @@ exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _react = _interopRequireDefault(require("react"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _core = require("@emotion/core");
 
 var _constants = require("../../../../../constants");
 
@@ -21,26 +29,32 @@ var _errored = _interopRequireDefault(require("./errored"));
 
 var _resolving = _interopRequireDefault(require("./resolving"));
 
-var _excluded = ["status", "testId"];
+var _actionGroup = _interopRequireDefault(require("../action-group"));
 
-var TitleBlock = function TitleBlock(_ref) {
-  var _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-title' : _ref$testId,
-      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+var _elements = require("../../elements");
+
+var _excluded = ["actions", "anchorTarget", "maxLines", "onClick", "overrideCss", "status", "showActionOnHover", "testId", "text", "theme"];
+
+var _templateObject, _templateObject2;
+
+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 getActionStyles = function getActionStyles(showOnHover, isOpen) {
+  if (showOnHover && !isOpen) {
+    return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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 _constants.SmartLinkStatus.Pending:
     case _constants.SmartLinkStatus.Resolving:
-      return /*#__PURE__*/_react.default.createElement(_resolving.default, (0, _extends2.default)({}, props, {
-        testId: testId
-      }));
+      return _resolving.default;
 
     case _constants.SmartLinkStatus.Resolved:
-      return /*#__PURE__*/_react.default.createElement(_resolved.default, (0, _extends2.default)({}, props, {
-        testId: testId
-      }));
+      return _resolved.default;
 
     case _constants.SmartLinkStatus.Unauthorized:
     case _constants.SmartLinkStatus.Forbidden:
@@ -48,11 +62,72 @@ var TitleBlock = function TitleBlock(_ref) {
     case _constants.SmartLinkStatus.Errored:
     case _constants.SmartLinkStatus.Fallback:
     default:
-      return /*#__PURE__*/_react.default.createElement(_errored.default, (0, _extends2.default)({}, props, {
-        testId: testId
-      }));
+      return _errored.default;
   }
 };
+/**
+ * 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 ? _constants.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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      actionDropdownOpen = _useState2[0],
+      setActionDropdownOpen = _useState2[1];
+
+  var actionGroup = actions.length > 0 && /*#__PURE__*/_react.default.createElement(_actionGroup.default, {
+    items: actions,
+    visibleButtonsNum: showActionOnHover ? 1 : 2,
+    onDropdownOpenChange: function onDropdownOpenChange(isOpen) {
+      return setActionDropdownOpen(isOpen);
+    }
+  });
+
+  var actionStyles = getActionStyles(showActionOnHover, actionDropdownOpen);
+  var combinedCss = (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    ", " ", "\n  "])), actionStyles, overrideCss);
+  var overrideText = !!text ? {
+    text: text
+  } : {};
+
+  var title = /*#__PURE__*/_react.default.createElement(_elements.Title, (0, _extends2.default)({
+    maxLines: maxLines,
+    onClick: onClick,
+    target: anchorTarget,
+    theme: theme
+  }, overrideText));
+
+  var Component = getTitleBlockViewComponent(status);
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, props, {
+    actionGroup: actionGroup,
+    overrideCss: combinedCss,
+    testId: testId,
+    title: title
+  }));
+};
 
 var _default = TitleBlock;
 exports.default = _default;

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

@@ -9,17 +9,53 @@ exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = _interopRequireDefault(require("react"));
-
-var _core = require("@emotion/core");
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _utils = require("../utils");
+var _react = _interopRequireDefault(require("react"));
 
-/** @jsx jsx */
-var TitleBlockResolvedView = function TitleBlockResolvedView(props) {
-  return (0, _core.jsx)(_utils.BaseTitleBlockComponent, (0, _extends2.default)({}, props, {
-    blockTestIdPostfix: "resolved-view"
-  }));
+var _elements = require("../../../elements");
+
+var _block = _interopRequireDefault(require("../../block"));
+
+var _elementGroup = _interopRequireDefault(require("../../element-group"));
+
+var _constants = require("../../../../../../constants");
+
+var _utils = require("../../utils");
+
+var _excluded = ["actionGroup", "metadata", "position", "subtitle", "testId", "text", "title"];
+
+/**
+ * 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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var metadataElements = (0, _utils.renderElementItems)(metadata);
+  var subtitleElements = (0, _utils.renderElementItems)(subtitle);
+  return /*#__PURE__*/_react.default.createElement(_block.default, (0, _extends2.default)({}, blockProps, {
+    testId: "".concat(testId, "-resolved-view")
+  }), /*#__PURE__*/_react.default.createElement(_elements.LinkIcon, {
+    position: position
+  }), /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
+    direction: _constants.SmartLinkDirection.Vertical,
+    width: _constants.SmartLinkWidth.Flexible
+  }, title, subtitleElements && /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
+    direction: _constants.SmartLinkDirection.Horizontal
+  }, subtitleElements)), metadataElements && /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
+    direction: _constants.SmartLinkDirection.Horizontal,
+    align: _constants.SmartLinkAlignment.Right
+  }, metadataElements), actionGroup);
 };
 
 var _default = TitleBlockResolvedView;

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

@@ -9,17 +9,20 @@ exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _core = require("@emotion/core");
 
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 
+var _block = _interopRequireDefault(require("../../block"));
+
 var _constants = require("../../../../../../constants");
 
-var _utils = require("../utils");
+var _excluded = ["actionGroup", "testId", "title"];
 
-/** @jsx jsx */
 var getSpinnerSize = function getSpinnerSize(size) {
   // Spinner sizes should be equivalent or smaller than Icon size
   // to avoid the jumping.
@@ -38,19 +41,27 @@ var getSpinnerSize = function getSpinnerSize(size) {
       return 12;
   }
 };
+/**
+ * This represents a TitleBlock for a Smart Link that is currently waiting
+ * for a request to finish.
+ * This should render when a Smart Link has sent a request.
+ * @see TitleBlock
+ */
+
 
-var TitleBlockResolvingView = function TitleBlockResolvingView(props) {
-  var _props$size = props.size,
-      size = _props$size === void 0 ? _constants.SmartLinkSize.Medium : _props$size,
-      testId = props.testId;
-  var spinnerIcon = (0, _core.jsx)(_spinner.default, {
+var TitleBlockResolvingView = function TitleBlockResolvingView(_ref) {
+  var actionGroup = _ref.actionGroup,
+      testId = _ref.testId,
+      title = _ref.title,
+      blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _blockProps$size = blockProps.size,
+      size = _blockProps$size === void 0 ? _constants.SmartLinkSize.Medium : _blockProps$size;
+  return (0, _core.jsx)(_block.default, (0, _extends2.default)({}, blockProps, {
+    testId: "".concat(testId, "-resolving-view")
+  }), (0, _core.jsx)(_spinner.default, {
     size: getSpinnerSize(size),
     testId: "".concat(testId, "-resolving-spinner")
-  });
-  return (0, _core.jsx)(_utils.BaseTitleBlockComponent, (0, _extends2.default)({}, props, {
-    blockIcon: spinnerIcon,
-    blockTestIdPostfix: "resolving-view"
-  }));
+  }), title, actionGroup);
 };
 
 var _default = TitleBlockResolvingView;

package/dist/cjs/view/FlexibleCard/components/common/atlaskit-icon/index.js

@@ -19,6 +19,8 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("../../../../../constants");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _importIconMapper;
 
 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); }
@@ -314,10 +316,14 @@ var AtlaskitIcon = function AtlaskitIcon(_ref3) {
       return /*#__PURE__*/_react.default.createElement(ImportedIcon, {
         "data-testid": testId // Confluence and Jira imports don't have native testId prop
         ,
-        textColor: _colors.N700,
+        textColor: (0, _tokens.token)('color.text.subtle', _colors.N700)
+        /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+        ,
         iconColor: _colors.B200,
         iconGradientStart: _colors.B400,
         iconGradientStop: _colors.B200
+        /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+
       });
 
     case _constants.IconType.Error:
@@ -325,7 +331,7 @@ var AtlaskitIcon = function AtlaskitIcon(_ref3) {
       return /*#__PURE__*/_react.default.createElement(ImportedIcon, {
         label: label,
         testId: testId,
-        primaryColor: _colors.R400
+        primaryColor: (0, _tokens.token)('color.icon.danger', _colors.R400)
       });
 
     default:

package/dist/cjs/view/FlexibleCard/components/common/image-icon/index.js

@@ -15,10 +15,12 @@ var _core = require("@emotion/core");
 
 var _reactRenderImage = _interopRequireDefault(require("react-render-image"));
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject, _templateObject2;
 
 var placeholderShimmer = (0, _core.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  0% { background-position: -20px 0; }\n  100% { background-position: 20px 0; }\n"])));
-var shimmer = (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 2px;\n  user-select: none;\n\n  background: #f6f7f8;\n  background-image: linear-gradient(\n    to right,\n    #f6f7f8 0%,\n    #edeef1 20%,\n    #f6f7f8 40%,\n    #f6f7f8 100%\n  );\n  background-repeat: no-repeat;\n  background-size: 280% 100%;\n  display: inline-block;\n\n  animation-duration: 1s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: ", ";\n  animation-timing-function: linear;\n"])), placeholderShimmer);
+var shimmer = (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 2px;\n  user-select: none;\n  background: ", ";\n  // TODO: https://product-fabric.atlassian.net/browse/DSP-4236\n  background-image: linear-gradient(\n    to right,\n    ", " 0%,\n    ", " 20%,\n    ", " 40%,\n    ", "100%\n  );\n  background-repeat: no-repeat;\n  background-size: 280% 100%;\n  display: inline-block;\n\n  animation-duration: 1s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: ", ";\n  animation-timing-function: linear;\n"])), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton', '#edeef1'), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), placeholderShimmer);
 
 var ImageIcon = function ImageIcon(_ref) {
   var defaultIcon = _ref.defaultIcon,