@atlaskit/smart-card 19.1.20 → 19.1.23

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/smart-card
 
+## 19.1.23
+
+### Patch Changes
+
+- [`f538640e3a5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f538640e3a5) - fix: Previously the .reload() action would not propagate changes through to the smart-card state in some scenarios. This has been amended by making it an explicit Redux action.
+- Updated dependencies
+
+## 19.1.22
+
+### Patch Changes
+
+- [`c6978e3a40c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c6978e3a40c) - This update adds Destination product and subproduct (core, servicedesk, software, etc.) analytics now available in the Smart Link ui card clicked event. At the time of writing, only Jira links have this functionality.
+
+## 19.1.21
+
+### Patch Changes
+
+- [`b39f43e68c3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b39f43e68c3) - [ux] Hover Preview: Add CreatedBy to 3P link metadata
+
+  [ux] Flexible UI: Text based elements now wrap and truncate within metadata group.
+
 ## 19.1.20
 
 ### Patch Changes

package/dist/cjs/state/actions/index.js

@@ -92,6 +92,7 @@ var useSmartCardActions = function useSmartCardActions(id, url, analytics) {
     }
   }, [hasData, status, dispatch, details]);
   var handleResolvedLinkResponse = (0, _react.useCallback)(function (resourceUrl, response) {
+    var isReloading = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     var hostname = new URL(resourceUrl).hostname;
     var nextStatus = response ? (0, _helpers.getStatus)(response) : 'fatal'; // If we require authorization & do not have an authFlow available,
     // throw an error and render as a normal blue link.
@@ -108,9 +109,15 @@ var useSmartCardActions = function useSmartCardActions(id, url, analytics) {
     } // Dispatch Analytics and resolved card action - including unauthorized states.
 
 
-    dispatch((0, _linkingCommon.cardAction)(_linkingCommon.ACTION_RESOLVED, {
-      url: resourceUrl
-    }, response));
+    if (isReloading) {
+      dispatch((0, _linkingCommon.cardAction)(_linkingCommon.ACTION_RELOADING, {
+        url: resourceUrl
+      }, response));
+    } else {
+      dispatch((0, _linkingCommon.cardAction)(_linkingCommon.ACTION_RESOLVED, {
+        url: resourceUrl
+      }, response));
+    }
   }, [dispatch, handleResolvedLinkError, hasAuthFlowSupported]);
   var resolve = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
     var resourceUrl,
@@ -129,7 +136,7 @@ var useSmartCardActions = function useSmartCardActions(id, url, analytics) {
             }
 
             return _context.abrupt("return", connections.client.fetchData(resourceUrl).then(function (response) {
-              return handleResolvedLinkResponse(resourceUrl, response);
+              return handleResolvedLinkResponse(resourceUrl, response, isReloading);
             }).catch(function (error) {
               return handleResolvedLinkError(resourceUrl, error);
             }));

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

@@ -36,6 +36,8 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchAnalytic
   var extractedDefinitionId = (0, _helpers.getDefinitionId)(state.details);
   var extractedExtensionKey = (0, _helpers.getExtensionKey)(state.details);
   var extractedResourceType = (0, _helpers.getResourceType)(state.details);
+  var extractedSubproduct = (0, _helpers.getSubproduct)(state.details);
+  var extractedProduct = (0, _helpers.getProduct)(state.details);
   /** Contains all ui analytics events */
 
   var ui = (0, _react.useMemo)(function () {
@@ -72,6 +74,7 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchAnalytic
        * This fires an event that represents when a user clicks on a Smart Link.
        * @param id The unique ID for this Smart Link.
        * @param display Whether the card was an Inline, Block, Embed or Flexible UI.
+       * @param status What status the Smart Link is currently in (e.g. resolved, unresolved)
        * @param definitionId The definitionId of the Smart Link resolver invoked.
        * @param extensionKey The extensionKey of the Smart Link resovler invoked.
        * @param isModifierKeyPressed Whether a modifier key was pressed when clicking the Smart Link.
@@ -87,8 +90,9 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchAnalytic
         var extensionKey = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : extractedExtensionKey;
         var isModifierKeyPressed = arguments.length > 5 ? arguments[5] : undefined;
         var location = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : defaultLocation;
-        var destinationProduct = arguments.length > 7 ? arguments[7] : undefined;
-        return dispatchAnalytics((0, _analytics.uiCardClickedEvent)(id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct));
+        var destinationProduct = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : extractedProduct;
+        var destinationSubproduct = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : extractedSubproduct;
+        return dispatchAnalytics((0, _analytics.uiCardClickedEvent)(id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct, destinationSubproduct));
       },
 
       /**
@@ -198,7 +202,7 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchAnalytic
         return dispatchAnalytics((0, _analytics.uiHoverCardDismissedEvent)(id, previewDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod));
       }
     };
-  }, [defaultId, defaultLocation, extractedDefinitionId, extractedExtensionKey, dispatchAnalytics]);
+  }, [extractedDefinitionId, extractedExtensionKey, dispatchAnalytics, defaultId, defaultLocation, extractedProduct, extractedSubproduct]);
   /** Contains all operational analytics events */
 
   var operational = (0, _react.useMemo)(function () {

package/dist/cjs/state/helpers.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isVisible = exports.isFinalState = exports.isAccessible = exports.hasResolved = exports.getStatus = exports.getServices = exports.getResourceType = exports.getExtensionKey = exports.getDefinitionId = exports.getClickUrl = exports.getByDefinitionId = void 0;
+exports.isVisible = exports.isFinalState = exports.isAccessible = exports.hasResolved = exports.getSubproduct = exports.getStatus = exports.getServices = exports.getResourceType = exports.getProduct = exports.getExtensionKey = exports.getDefinitionId = exports.getClickUrl = exports.getByDefinitionId = void 0;
 
 var _extractVisitUrl = require("../extractors/common/primitives/extractVisitUrl");
 
@@ -32,23 +32,45 @@ var getClickUrl = function getClickUrl(url, jsonLd) {
 exports.getClickUrl = getClickUrl;
 
 var getDefinitionId = function getDefinitionId(details) {
-  return details && details.meta && details.meta.definitionId;
+  var _details$meta;
+
+  return details === null || details === void 0 ? void 0 : (_details$meta = details.meta) === null || _details$meta === void 0 ? void 0 : _details$meta.definitionId;
 };
 
 exports.getDefinitionId = getDefinitionId;
 
 var getExtensionKey = function getExtensionKey(details) {
-  return details && details.meta && details.meta.key;
+  var _details$meta2;
+
+  return details === null || details === void 0 ? void 0 : (_details$meta2 = details.meta) === null || _details$meta2 === void 0 ? void 0 : _details$meta2.key;
 };
 
 exports.getExtensionKey = getExtensionKey;
 
 var getResourceType = function getResourceType(details) {
-  return details && details.meta && details.meta.resourceType;
+  var _details$meta3;
+
+  return details === null || details === void 0 ? void 0 : (_details$meta3 = details.meta) === null || _details$meta3 === void 0 ? void 0 : _details$meta3.resourceType;
 };
 
 exports.getResourceType = getResourceType;
 
+var getProduct = function getProduct(details) {
+  var _details$meta4;
+
+  return details === null || details === void 0 ? void 0 : (_details$meta4 = details.meta) === null || _details$meta4 === void 0 ? void 0 : _details$meta4.product;
+};
+
+exports.getProduct = getProduct;
+
+var getSubproduct = function getSubproduct(details) {
+  var _details$meta5;
+
+  return details === null || details === void 0 ? void 0 : (_details$meta5 = details.meta) === null || _details$meta5 === void 0 ? void 0 : _details$meta5.subproduct;
+};
+
+exports.getSubproduct = getSubproduct;
+
 var getServices = function getServices(details) {
   return details && details.meta.auth || [];
 };

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

@@ -235,7 +235,7 @@ var uiAuthAlternateAccountEvent = function uiAuthAlternateAccountEvent(display,
 
 exports.uiAuthAlternateAccountEvent = uiAuthAlternateAccountEvent;
 
-var uiCardClickedEvent = function uiCardClickedEvent(id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct) {
+var uiCardClickedEvent = function uiCardClickedEvent(id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct, destinationSubproduct) {
   return {
     action: 'clicked',
     actionSubject: 'smartLink',
@@ -249,7 +249,8 @@ var uiCardClickedEvent = function uiCardClickedEvent(id, display, status, defini
       display: display,
       isModifierKeyPressed: isModifierKeyPressed,
       location: location,
-      destinationProduct: destinationProduct
+      destinationProduct: destinationProduct,
+      destinationSubproduct: destinationSubproduct
     })
   };
 };

package/dist/cjs/version.json

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

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

@@ -68,6 +68,8 @@ function CardWithUrlContent(_ref) {
   var definitionId = (0, _helpers.getDefinitionId)(state.details);
   var extensionKey = (0, _helpers.getExtensionKey)(state.details);
   var resourceType = (0, _helpers.getResourceType)(state.details);
+  var product = (0, _helpers.getProduct)(state.details);
+  var subproduct = (0, _helpers.getSubproduct)(state.details);
   var services = (0, _helpers.getServices)(state.details);
   var isFlexibleUi = (0, _react.useMemo)(function () {
     return (0, _flexible.isFlexibleUiCard)(children);
@@ -79,14 +81,14 @@ function CardWithUrlContent(_ref) {
   }, [state.details, url]);
   var handleClickWrapper = (0, _react.useCallback)(function (event) {
     var isModifierKeyPressed = (0, _utils.isSpecialEvent)(event);
-    analytics.ui.cardClickedEvent(id, isFlexibleUi ? 'flexible' : appearance, state.status, definitionId, extensionKey, isModifierKeyPressed);
+    analytics.ui.cardClickedEvent(id, isFlexibleUi ? 'flexible' : appearance, state.status, definitionId, extensionKey, isModifierKeyPressed, undefined, product, subproduct);
 
     if (onClick) {
       onClick(event);
     } else if (!isFlexibleUi) {
       handleClick(event);
     }
-  }, [id, state.status, analytics.ui, appearance, definitionId, extensionKey, onClick, handleClick, isFlexibleUi]);
+  }, [id, state.status, analytics.ui, appearance, definitionId, extensionKey, onClick, handleClick, isFlexibleUi, product, subproduct]);
   var handleAuthorize = (0, _react.useCallback)(function () {
     return actions.authorize(appearance);
   }, [actions, appearance]);

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

@@ -17,7 +17,9 @@ var _constants = require("../../../../../constants");
 
 var _utils = require("../utils");
 
-var _templateObject, _templateObject2, _templateObject3;
+var _utils2 = require("../../utils");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 var getAlignmentStyles = function getAlignmentStyles(align) {
   switch (align) {
@@ -30,8 +32,23 @@ var getAlignmentStyles = function getAlignmentStyles(align) {
   }
 };
 
+var getGapStyles = function getGapStyles(size, align) {
+  var gap = (0, _utils.getGapSize)(size);
+
+  if (align === _constants.SmartLinkAlignment.Right) {
+    return (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n      > span {\n        margin-left: ", "rem;\n        &:first-child {\n          margin-left: initial;\n        }\n      }\n    "])), gap);
+  }
+
+  return (0, _core.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    > span {\n      margin-right: ", "rem;\n      &:last-child {\n        margin-right: initial;\n      }\n    }\n  "])), gap);
+};
+
+var getHorizontalDirectionStyles = function getHorizontalDirectionStyles(size, align) {
+  var lineHeight = (0, _utils2.getMaxLineHeight)(size);
+  return (0, _core.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    display: block;\n    vertical-align: middle;\n    ", "\n\n    > span, > div {\n      vertical-align: middle;\n\n      &[data-smart-element-date-time],\n      &[data-smart-element-text] {\n        // Show all/wrapped/truncated\n        display: inline;\n      }\n    }\n\n    ", "\n  "])), (0, _utils2.getTruncateStyles)(1, lineHeight + 'rem'), getGapStyles(size, 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;" : '');
+  return (0, _core.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  min-width: 10%;\n  ", "\n  ", "\n"])), (0, _utils.getBaseStyles)(direction, size), getAlignmentStyles(align), width === _constants.SmartLinkWidth.Flexible ? "flex: 1 3;" : '', direction === _constants.SmartLinkDirection.Horizontal ? getHorizontalDirectionStyles(size, align) : '');
 };
 /**
  * Creates a group of Action components. Accepts an array of Actions, in addition to some styling

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

@@ -9,8 +9,12 @@ exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
 var _react = _interopRequireDefault(require("react"));
 
+var _core = require("@emotion/core");
+
 var _constants = require("../../../../../constants");
 
 var _block = _interopRequireDefault(require("../block"));
@@ -21,6 +25,16 @@ var _elements = require("../../elements");
 
 var _actionGroup = _interopRequireDefault(require("../action-group"));
 
+var _templateObject;
+
+var getActionGroupStyles = function getActionGroupStyles(size) {
+  if (size === _constants.SmartLinkSize.XLarge) {
+    // The biggest height of the action button exceeds the max line-height
+    // of the elements causing the action on the block with x-large size to
+    // get cut at the bottom.
+    return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n      max-height: 2rem;\n    "])));
+  }
+};
 /**
  * Represents a FooterBlock, designed to contain elements and actions that should appear
  * at the bottom of a link card.
@@ -28,9 +42,13 @@ var _actionGroup = _interopRequireDefault(require("../action-group"));
  * @param {FooterBlockProps} FooterBlockProps
  * @see Block
  */
+
+
 var FooterBlock = function FooterBlock(props) {
   var status = props.status,
       actions = props.actions,
+      _props$size = props.size,
+      size = _props$size === void 0 ? _constants.SmartLinkSize.Medium : _props$size,
       _props$testId = props.testId,
       testId = _props$testId === void 0 ? 'smart-footer-block' : _props$testId;
 
@@ -46,6 +64,7 @@ var FooterBlock = function FooterBlock(props) {
     testId: "smart-element-group-actions",
     align: _constants.SmartLinkAlignment.Right,
     direction: _constants.SmartLinkDirection.Horizontal,
+    overrideCss: getActionGroupStyles(size),
     width: _constants.SmartLinkWidth.Flexible
   }, /*#__PURE__*/_react.default.createElement(_actionGroup.default, {
     items: actions,

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

@@ -25,6 +25,8 @@ var _block = _interopRequireDefault(require("../block"));
 
 var _elementGroup = _interopRequireDefault(require("../element-group"));
 
+var _utils2 = require("../../utils");
+
 var _excluded = ["maxLines", "status", "testId", "primary", "secondary"];
 
 var _templateObject;
@@ -36,31 +38,10 @@ var MINIMUM_MAX_LINES = 1;
 var getElementGroupStyles = function getElementGroupStyles(size, maxLines) {
   // MetadataBlock allows metadata elements to be displayed in
   // multiple lines, with maximum of 2 lines.
-  // a) We need the height of the line to be equal on both left and right
-  //    sides so they line up nicely.
-  // b) There is no way to truncate non-text elements nicely. Here
-  //    it's fix max height of the element group so that anything that is
-  //    overflown will not be visible.
-  var lineHeight = getLineHeight(size);
-  var gap = (0, _utils.getGapSize)(size);
-  var gapHeight = gap * (maxLines - 1);
-  var height = lineHeight * maxLines + gapHeight;
-  return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    flex-wrap: wrap;\n    line-height: ", "rem;\n    max-height: ", "rem;\n    > span,\n    > div {\n      min-height: ", "rem;\n      max-height: ", "rem;\n      line-height: ", "rem;\n    }\n  "])), lineHeight, height, lineHeight, lineHeight, lineHeight);
-};
-
-var getLineHeight = function getLineHeight(size) {
-  // The maximum height of all elements in specific size.
-  // These heights belongs to AvatarGroup.
-  switch (size) {
-    case _constants.SmartLinkSize.XLarge:
-    case _constants.SmartLinkSize.Large:
-      return 1.75;
-
-    case _constants.SmartLinkSize.Medium:
-    case _constants.SmartLinkSize.Small:
-    default:
-      return 1.5;
-  }
+  // We need the height of the line to be equal on both left and right
+  // sides so they line up nicely.
+  var lineHeight = (0, _utils2.getMaxLineHeight)(size);
+  return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    line-height: ", "rem;\n    ", "\n  "])), lineHeight, (0, _utils2.getTruncateStyles)(maxLines, lineHeight + 'rem'));
 };
 
 var getMaxLines = function getMaxLines(maxLines) {

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

@@ -82,7 +82,7 @@ var getGapSize = function getGapSize(size) {
 exports.getGapSize = getGapSize;
 
 var getBaseStyles = function getBaseStyles(direction, size) {
-  return (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: ", "rem;\n  line-height: 1rem;\n  min-width: 0;\n  overflow: hidden;\n  ", ";\n  &:empty {\n    display: none;\n  }\n  & > * {\n    min-width: 0;\n  }\n  & > [data-fit-to-content] {\n    min-width: fit-content;\n  }\n"])), getGapSize(size), getDirectionStyles(direction));
+  return (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n  gap: ", "rem;\n  line-height: 1rem;\n  min-width: 0;\n  overflow: hidden;\n  ", ";\n  &:empty {\n    display: none;\n  }\n  & > * {\n    min-width: 0;\n  }\n  & > [data-fit-to-content] {\n    min-width: fit-content;\n  }\n"])), getGapSize(size), getDirectionStyles(direction));
 };
 
 exports.getBaseStyles = getBaseStyles;

package/dist/cjs/view/FlexibleCard/components/elements/avatar-group/index.js

@@ -17,21 +17,23 @@ var _avatarGroup = _interopRequireDefault(require("@atlaskit/avatar-group"));
 
 var _constants = require("../../../../../constants");
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
 var MAX_COUNT = 4;
 
 var getStyles = function getStyles(size) {
+  var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    display: inline-flex;\n  "])));
+
   switch (size) {
     case _constants.SmartLinkSize.XLarge:
     case _constants.SmartLinkSize.Large:
       // Default AK small size
-      return;
+      return styles;
 
     case _constants.SmartLinkSize.Medium:
     case _constants.SmartLinkSize.Small:
     default:
-      return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        li {\n          span,\n          svg {\n            max-height: 1.25rem;\n            max-width: 1.25rem;\n          }\n        }\n      "])));
+      return (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        ", "\n        li {\n          span,\n          svg {\n            max-height: 1.25rem;\n            max-width: 1.25rem;\n          }\n        }\n      "])), styles);
   }
 };
 /**

package/dist/cjs/view/FlexibleCard/components/elements/badge/index.js

@@ -29,9 +29,9 @@ var _atlaskitIcon = _interopRequireDefault(require("../../common/atlaskit-icon")
 
 var _templateObject, _templateObject2, _templateObject3, _messageMapper;
 
-var badgeStyles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n  min-width: fit-content;\n"])));
-var iconStyles = (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  ", "\n  span,\n  svg {\n    line-height: 0;\n  }\n"])), _token.tokens.badgeIcon, (0, _utils.getIconSizeStyles)('1rem'));
-var labelStyles = (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  padding-left: 0.125rem;\n"])), _token.tokens.badgeText);
+var badgeStyles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: inline-flex;\n  min-width: fit-content;\n"])));
+var iconStyles = (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  line-height: 0;\n  vertical-align: middle;\n  ", "\n  img,\n  span,\n  svg {\n    line-height: 0;\n    vertical-align: middle;\n  }\n"])), _token.tokens.badgeIcon, (0, _utils.getIconSizeStyles)('1rem'));
+var labelStyles = (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  padding-left: 0.125rem;\n  vertical-align: middle;\n"])), _token.tokens.badgeText);
 var messageMapper = (_messageMapper = {}, (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityBlocker, _messages.messages.priority_blocker), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityCritical, _messages.messages.priority_critical), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityHigh, _messages.messages.priority_high), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityHighest, _messages.messages.priority_highest), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityLow, _messages.messages.priority_low), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityLowest, _messages.messages.priority_lowest), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityMajor, _messages.messages.priority_major), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityMedium, _messages.messages.priority_medium), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityMinor, _messages.messages.priority_minor), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityTrivial, _messages.messages.priority_trivial), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityUndefined, _messages.messages.priority_undefined), _messageMapper);
 
 var getFormattedMessageFromIcon = function getFormattedMessageFromIcon(icon) {
@@ -93,7 +93,7 @@ var Badge = function Badge(_ref) {
     return null;
   }
 
-  return (0, _core.jsx)("div", {
+  return (0, _core.jsx)("span", {
     css: [badgeStyles, overrideCss],
     "data-fit-to-content": true,
     "data-smart-element-badge": true,

package/dist/cjs/view/FlexibleCard/components/elements/lozenge/index.js

@@ -17,7 +17,7 @@ var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 
 var _templateObject;
 
-var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  line-height: inherit;\n"])));
+var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  line-height: inherit;\n"])));
 /**
  * A base element that displays a Lozenge.
  * @internal

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.hasWhiteSpace = exports.getTruncateStyles = exports.getMaxLines = exports.getLinkSizeStyles = exports.getLinkLineHeight = exports.getIconWidth = exports.getIconSizeStyles = exports.getFormattedMessage = void 0;
+exports.hasWhiteSpace = exports.getTruncateStyles = exports.getMaxLines = exports.getMaxLineHeight = exports.getLinkSizeStyles = exports.getLinkLineHeight = exports.getIconWidth = exports.getIconSizeStyles = exports.getFormattedMessage = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -95,6 +95,23 @@ var getLinkSizeStyles = function getLinkSizeStyles(size) {
 
 exports.getLinkSizeStyles = getLinkSizeStyles;
 
+var getMaxLineHeight = function getMaxLineHeight(size) {
+  // The maximum line height based on all elements in specific size.
+  // These heights belongs to AvatarGroup.
+  switch (size) {
+    case _constants.SmartLinkSize.XLarge:
+    case _constants.SmartLinkSize.Large:
+      return 1.75;
+
+    case _constants.SmartLinkSize.Medium:
+    case _constants.SmartLinkSize.Small:
+    default:
+      return 1.5;
+  }
+};
+
+exports.getMaxLineHeight = getMaxLineHeight;
+
 var getMaxLines = function getMaxLines(value, defaultValue, max, min) {
   if (value > max) {
     return defaultValue;
@@ -112,7 +129,7 @@ exports.getMaxLines = getMaxLines;
 var getTruncateStyles = function getTruncateStyles(maxLines) {
   var lineHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '1rem';
   var wordBreak = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'break-word';
-  return (0, _core.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    display: -webkit-box;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: ", ";\n    -webkit-line-clamp: ", ";\n    -webkit-box-orient: vertical;\n    // Fallback options\n    max-height: calc(", " * ", ");\n  "])), wordBreak, maxLines, maxLines, lineHeight);
+  return (0, _core.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    display: -webkit-box;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: ", ";\n    -webkit-line-clamp: ", ";\n    -webkit-box-orient: vertical;\n    // Fallback options\n    @supports not (-webkit-line-clamp: 1) {\n      max-height: calc(", " * ", ");\n    }\n  "])), wordBreak, maxLines, maxLines, lineHeight);
 };
 
 exports.getTruncateStyles = getTruncateStyles;

package/dist/cjs/view/HoverCard/components/hover-card-content.js

@@ -115,7 +115,8 @@ var HoverCardContent = function HoverCardContent(_ref) {
     actions: titleActions
   }), /*#__PURE__*/_react.default.createElement(_blocks.MetadataBlock, {
     primary: primary,
-    secondary: secondary
+    secondary: secondary,
+    size: _constants.SmartLinkSize.Small
   }), body, /*#__PURE__*/_react.default.createElement(_blocks.FooterBlock, {
     actions: footerActions
   }));

package/dist/cjs/view/HoverCard/utils.js

@@ -4,6 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getSimulatedMetadata = exports.HOVER_CARD_ANALYTICS_DISPLAY = void 0;
+
+var _constants = require("../../constants");
+
 var HOVER_CARD_ANALYTICS_DISPLAY = 'flexible';
 exports.HOVER_CARD_ANALYTICS_DISPLAY = HOVER_CARD_ANALYTICS_DISPLAY;
 
@@ -14,7 +17,7 @@ var getSimulatedMetadata = function getSimulatedMetadata() {
     case 'confluence-object-provider':
       return {
         metadata: {
-          primary: ['AuthorGroup', 'CreatedBy', 'CommentCount', 'ReactCount'],
+          primary: [_constants.ElementName.AuthorGroup, _constants.ElementName.CreatedBy, _constants.ElementName.CommentCount, _constants.ElementName.ReactCount],
           secondary: []
         }
       };
@@ -22,7 +25,7 @@ var getSimulatedMetadata = function getSimulatedMetadata() {
     case 'jira-object-provider':
       return {
         metadata: {
-          primary: ['AuthorGroup', 'State', 'Priority'],
+          primary: [_constants.ElementName.AuthorGroup, _constants.ElementName.State, _constants.ElementName.Priority],
           secondary: []
         }
       };
@@ -30,7 +33,7 @@ var getSimulatedMetadata = function getSimulatedMetadata() {
     default:
       return {
         metadata: {
-          primary: ['ModifiedOn'],
+          primary: [_constants.ElementName.ModifiedOn, _constants.ElementName.CreatedBy],
           secondary: []
         }
       };

package/dist/es2019/state/actions/index.js

@@ -2,7 +2,7 @@ import { useMemo, useCallback } from 'react';
 import { auth } from '@atlaskit/outbound-auth-flow-client';
 import { APIError } from '@atlaskit/linking-common';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
-import { ACTION_PENDING, ACTION_RESOLVED, ACTION_ERROR, ACTION_ERROR_FALLBACK, cardAction } from '@atlaskit/linking-common';
+import { ACTION_PENDING, ACTION_RESOLVED, ACTION_ERROR, ACTION_ERROR_FALLBACK, ACTION_RELOADING, cardAction } from '@atlaskit/linking-common';
 import { getDefinitionId, getByDefinitionId, getServices, getStatus, getExtensionKey } from '../helpers';
 import { ERROR_MESSAGE_OAUTH, ERROR_MESSAGE_FATAL } from './constants';
 import * as measure from '../../utils/performance';
@@ -65,7 +65,7 @@ export const useSmartCardActions = (id, url, analytics) => {
       }
     }
   }, [hasData, status, dispatch, details]);
-  const handleResolvedLinkResponse = useCallback((resourceUrl, response) => {
+  const handleResolvedLinkResponse = useCallback((resourceUrl, response, isReloading = false) => {
     const hostname = new URL(resourceUrl).hostname;
     const nextStatus = response ? getStatus(response) : 'fatal'; // If we require authorization & do not have an authFlow available,
     // throw an error and render as a normal blue link.
@@ -82,16 +82,22 @@ export const useSmartCardActions = (id, url, analytics) => {
     } // Dispatch Analytics and resolved card action - including unauthorized states.
 
 
-    dispatch(cardAction(ACTION_RESOLVED, {
-      url: resourceUrl
-    }, response));
+    if (isReloading) {
+      dispatch(cardAction(ACTION_RELOADING, {
+        url: resourceUrl
+      }, response));
+    } else {
+      dispatch(cardAction(ACTION_RESOLVED, {
+        url: resourceUrl
+      }, response));
+    }
   }, [dispatch, handleResolvedLinkError, hasAuthFlowSupported]);
   const resolve = useCallback(async (resourceUrl = url, isReloading = false) => {
     // Request JSON-LD data for the card from ORS, iff it has extended
     // its cache lifespan OR there is no data for it currently. Once the data
     // has come back asynchronously, dispatch the resolved action for the card.
     if (isReloading || !hasData) {
-      return connections.client.fetchData(resourceUrl).then(response => handleResolvedLinkResponse(resourceUrl, response)).catch(error => handleResolvedLinkError(resourceUrl, error));
+      return connections.client.fetchData(resourceUrl).then(response => handleResolvedLinkResponse(resourceUrl, response, isReloading)).catch(error => handleResolvedLinkError(resourceUrl, error));
     } else {
       addMetadataToExperience('smart-link-rendered', id, {
         cached: true

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

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { getUrl } from '@atlaskit/linking-common';
 import { uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, uiRenderSuccessEvent, uiHoverCardViewedEvent, uiHoverCardDismissedEvent, uiHoverCardOpenLinkClickedEvent, invokeSucceededEvent, invokeFailedEvent, connectSucceededEvent, connectFailedEvent, trackAppAccountConnected, screenAuthPopupEvent, instrumentEvent } from '../../utils/analytics';
 import { failUfoExperience, startUfoExperience, succeedUfoExperience } from './ufoExperiences';
-import { getDefinitionId, getExtensionKey, getResourceType } from '../helpers';
+import { getDefinitionId, getExtensionKey, getResourceType, getSubproduct, getProduct } from '../helpers';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
 /**
  * This hook provides usage of Smart Link analytics outside of the Card component.
@@ -24,6 +24,8 @@ export const useSmartLinkAnalytics = (url, dispatchAnalytics, id, defaultLocatio
   const extractedDefinitionId = getDefinitionId(state.details);
   const extractedExtensionKey = getExtensionKey(state.details);
   const extractedResourceType = getResourceType(state.details);
+  const extractedSubproduct = getSubproduct(state.details);
+  const extractedProduct = getProduct(state.details);
   /** Contains all ui analytics events */
 
   const ui = useMemo(() => ({
@@ -51,6 +53,7 @@ export const useSmartLinkAnalytics = (url, dispatchAnalytics, id, defaultLocatio
      * This fires an event that represents when a user clicks on a Smart Link.
      * @param id The unique ID for this Smart Link.
      * @param display Whether the card was an Inline, Block, Embed or Flexible UI.
+     * @param status What status the Smart Link is currently in (e.g. resolved, unresolved)
      * @param definitionId The definitionId of the Smart Link resolver invoked.
      * @param extensionKey The extensionKey of the Smart Link resovler invoked.
      * @param isModifierKeyPressed Whether a modifier key was pressed when clicking the Smart Link.
@@ -58,7 +61,7 @@ export const useSmartLinkAnalytics = (url, dispatchAnalytics, id, defaultLocatio
      * @param destinationProduct The product the Smart Link is linked to.
      * @returns
      */
-    cardClickedEvent: (id = defaultId, display, status, definitionId = extractedDefinitionId, extensionKey = extractedExtensionKey, isModifierKeyPressed, location = defaultLocation, destinationProduct) => dispatchAnalytics(uiCardClickedEvent(id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct)),
+    cardClickedEvent: (id = defaultId, display, status, definitionId = extractedDefinitionId, extensionKey = extractedExtensionKey, isModifierKeyPressed, location = defaultLocation, destinationProduct = extractedProduct, destinationSubproduct = extractedSubproduct) => dispatchAnalytics(uiCardClickedEvent(id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct, destinationSubproduct)),
 
     /**
      * This fires an event that represents when a user clicks on a Smart Link action.
@@ -141,7 +144,7 @@ export const useSmartLinkAnalytics = (url, dispatchAnalytics, id, defaultLocatio
      * @returns
      */
     hoverCardDismissedEvent: (previewDisplay, hoverTime, previewInvokeMethod, id = defaultId, definitionId = extractedDefinitionId, extensionKey = extractedExtensionKey) => dispatchAnalytics(uiHoverCardDismissedEvent(id, previewDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod))
-  }), [defaultId, defaultLocation, extractedDefinitionId, extractedExtensionKey, dispatchAnalytics]);
+  }), [extractedDefinitionId, extractedExtensionKey, dispatchAnalytics, defaultId, defaultLocation, extractedProduct, extractedSubproduct]);
   /** Contains all operational analytics events */
 
   const operational = useMemo(() => ({