@atlaskit/smart-card 19.1.19 → 19.1.22

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/smart-card
 
+## 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
+
+- [`0b7abdcf058`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0b7abdcf058) - Flexible UI: Fix PreviewBlock not showing image loading skeleton
+
 ## 19.1.19
 
 ### Patch Changes

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.19",
+	"version": "19.1.22",
 	"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/elements/media/index.js

@@ -27,7 +27,7 @@ var _templateObject;
  * [object-position] Center alignment of the selected replaced element's
  * contents within the element's box.
  */
-var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  aspect-ratio: 16 / 9;\n  display: flex;\n  width: 100%;\n  height: fit-content; // Fix Safari height not respecting aspect-ratio\n\n  // fallback\n  @supports not (aspect-ratio: auto) {\n    padding-top: 56.25%; // 16:9 ratio (9 / 16 = 0.5625)\n    height: 0;\n    position: relative;\n    overflow: hidden;\n  }\n\n  > img {\n    min-height: 100%;\n    min-width: 100%;\n    max-height: 100%;\n    max-width: 100%;\n    object-fit: cover;\n    object-position: center center;\n\n    // fallback\n    @supports not (aspect-ratio: auto) {\n      position: absolute;\n      transform: translate(-50%, -50%);\n      left: 50%;\n      top: 50%;\n      width: auto;\n      height: auto;\n    }\n  }\n"])));
+var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  aspect-ratio: 16 / 9;\n  display: flex;\n  width: 100%;\n  height: fit-content; // Fix Safari height not respecting aspect-ratio\n\n  // fallback\n  @supports not (aspect-ratio: auto) {\n    padding-top: 56.25%; // 16:9 ratio (9 / 16 = 0.5625)\n    height: 0;\n    position: relative;\n    overflow: hidden;\n  }\n\n  > img,\n  > span {\n    min-height: 100%;\n    min-width: 100%;\n    max-height: 100%;\n    max-width: 100%;\n    object-fit: cover;\n    object-position: center center;\n\n    // fallback\n    @supports not (aspect-ratio: auto) {\n      position: absolute;\n      transform: translate(-50%, -50%);\n      left: 50%;\n      top: 50%;\n      width: auto;\n      height: auto;\n    }\n  }\n"])));
 /**
  * A base element that displays a Media.
  * @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/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(() => ({

package/dist/es2019/state/helpers.js

@@ -19,9 +19,31 @@ export const getClickUrl = (url, jsonLd) => {
 
   return url;
 };
-export const getDefinitionId = details => details && details.meta && details.meta.definitionId;
-export const getExtensionKey = details => details && details.meta && details.meta.key;
-export const getResourceType = details => details && details.meta && details.meta.resourceType;
+export const getDefinitionId = details => {
+  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;
+};
+export const getExtensionKey = details => {
+  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;
+};
+export const getResourceType = details => {
+  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;
+};
+export const 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;
+};
+export const 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;
+};
 export const getServices = details => details && details.meta.auth || [];
 export const hasResolved = details => details && isAccessible(details) && isVisible(details);
 export const isAccessible = ({

package/dist/es2019/utils/analytics/analytics.js

@@ -174,7 +174,7 @@ export const uiAuthAlternateAccountEvent = (display, definitionId, extensionKey)
     display
   }
 });
-export const uiCardClickedEvent = (id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct) => ({
+export const uiCardClickedEvent = (id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct, destinationSubproduct) => ({
   action: 'clicked',
   actionSubject: 'smartLink',
   actionSubjectId: 'titleGoToLink',
@@ -187,7 +187,8 @@ export const uiCardClickedEvent = (id, display, status, definitionId, extensionK
     display,
     isModifierKeyPressed,
     location,
-    destinationProduct
+    destinationProduct,
+    destinationSubproduct
   }
 });
 export const uiActionClickedEvent = (id, actionType, extensionKey, display) => ({

package/dist/es2019/version.json

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

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useCallback, useMemo } from 'react';
 import { isSpecialEvent } from '../../utils';
 import * as measure from '../../utils/performance';
-import { getDefinitionId, getServices, isFinalState, getClickUrl, getResourceType, getExtensionKey } from '../../state/helpers';
+import { getDefinitionId, getServices, isFinalState, getClickUrl, getResourceType, getExtensionKey, getSubproduct, getProduct } from '../../state/helpers';
 import { useSmartLink } from '../../state';
 import { BlockCard } from '../BlockCard';
 import { InlineCard } from '../InlineCard';
@@ -42,6 +42,8 @@ export function CardWithUrlContent({
   const definitionId = getDefinitionId(state.details);
   const extensionKey = getExtensionKey(state.details);
   const resourceType = getResourceType(state.details);
+  const product = getProduct(state.details);
+  const subproduct = getSubproduct(state.details);
   const services = getServices(state.details);
   let isFlexibleUi = useMemo(() => isFlexibleUiCard(children), [children]); // Setup UI handlers.
 
@@ -51,14 +53,14 @@ export function CardWithUrlContent({
   }, [state.details, url]);
   const handleClickWrapper = useCallback(event => {
     const isModifierKeyPressed = 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]);
   const handleAuthorize = useCallback(() => actions.authorize(appearance), [actions, appearance]);
   const handleRetry = useCallback(() => {
     actions.reload();