@atlaskit/smart-card 19.1.20 → 19.1.21

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/smart-card
 
+## 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/version.json

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

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/version.json

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

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

@@ -2,7 +2,8 @@
 import React from 'react';
 import { css, jsx } from '@emotion/core';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../../../constants';
-import { getBaseStyles, renderChildren } from '../utils';
+import { getBaseStyles, getGapSize, renderChildren } from '../utils';
+import { getMaxLineHeight, getTruncateStyles } from '../../utils';
 
 const getAlignmentStyles = align => {
   switch (align) {
@@ -21,11 +22,57 @@ const getAlignmentStyles = align => {
   }
 };
 
+const getGapStyles = (size, align) => {
+  const gap = getGapSize(size);
+
+  if (align === SmartLinkAlignment.Right) {
+    return css`
+      > span {
+        margin-left: ${gap}rem;
+        &:first-child {
+          margin-left: initial;
+        }
+      }
+    `;
+  }
+
+  return css`
+    > span {
+      margin-right: ${gap}rem;
+      &:last-child {
+        margin-right: initial;
+      }
+    }
+  `;
+};
+
+const getHorizontalDirectionStyles = (size, align) => {
+  const lineHeight = getMaxLineHeight(size);
+  return css`
+    display: block;
+    vertical-align: middle;
+    ${getTruncateStyles(1, lineHeight + 'rem')}
+
+    > span, > div {
+      vertical-align: middle;
+
+      &[data-smart-element-date-time],
+      &[data-smart-element-text] {
+        // Show all/wrapped/truncated
+        display: inline;
+      }
+    }
+
+    ${getGapStyles(size, align)}
+  `;
+};
+
 export const getElementGroupStyles = (direction, size, align, width) => css`
   ${getBaseStyles(direction, size)}
   ${getAlignmentStyles(align)}
   min-width: 10%;
   ${width === SmartLinkWidth.Flexible ? `flex: 1 3;` : ''}
+  ${direction === SmartLinkDirection.Horizontal ? getHorizontalDirectionStyles(size, align) : ''}
 `;
 /**
  * Creates a group of Action components. Accepts an array of Actions, in addition to some styling

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

@@ -1,10 +1,22 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { SmartLinkAlignment, SmartLinkDirection, SmartLinkStatus, SmartLinkWidth } from '../../../../../constants';
+import { css } from '@emotion/core';
+import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkStatus, SmartLinkWidth } from '../../../../../constants';
 import Block from '../block';
 import ElementGroup from '../element-group';
 import { Provider } from '../../elements';
 import ActionGroup from '../action-group';
+
+const getActionGroupStyles = size => {
+  if (size === 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 css`
+      max-height: 2rem;
+    `;
+  }
+};
 /**
  * Represents a FooterBlock, designed to contain elements and actions that should appear
  * at the bottom of a link card.
@@ -13,10 +25,12 @@ import ActionGroup from '../action-group';
  * @see Block
  */
 
+
 const FooterBlock = props => {
   const {
     status,
     actions,
+    size = SmartLinkSize.Medium,
     testId = 'smart-footer-block'
   } = props;
 
@@ -32,6 +46,7 @@ const FooterBlock = props => {
     testId: "smart-element-group-actions",
     align: SmartLinkAlignment.Right,
     direction: SmartLinkDirection.Horizontal,
+    overrideCss: getActionGroupStyles(size),
     width: SmartLinkWidth.Flexible
   }, /*#__PURE__*/React.createElement(ActionGroup, {
     items: actions,

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

@@ -2,9 +2,10 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { css } from '@emotion/core';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkStatus, SmartLinkWidth } from '../../../../../constants';
-import { getGapSize, renderElementItems } from '../utils';
+import { renderElementItems } from '../utils';
 import Block from '../block';
 import ElementGroup from '../element-group';
+import { getMaxLineHeight, getTruncateStyles } from '../../utils';
 const DEFAULT_MAX_LINES = 2;
 const MAXIMUM_MAX_LINES = 2;
 const MINIMUM_MAX_LINES = 1;
@@ -12,43 +13,15 @@ const MINIMUM_MAX_LINES = 1;
 const 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.
-  const lineHeight = getLineHeight(size);
-  const gap = getGapSize(size);
-  const gapHeight = gap * (maxLines - 1);
-  const height = lineHeight * maxLines + gapHeight;
+  // We need the height of the line to be equal on both left and right
+  // sides so they line up nicely.
+  const lineHeight = getMaxLineHeight(size);
   return css`
-    flex-wrap: wrap;
     line-height: ${lineHeight}rem;
-    max-height: ${height}rem;
-    > span,
-    > div {
-      min-height: ${lineHeight}rem;
-      max-height: ${lineHeight}rem;
-      line-height: ${lineHeight}rem;
-    }
+    ${getTruncateStyles(maxLines, lineHeight + 'rem')}
   `;
 };
 
-const getLineHeight = size => {
-  // The maximum height of all elements in specific size.
-  // These heights belongs to AvatarGroup.
-  switch (size) {
-    case SmartLinkSize.XLarge:
-    case SmartLinkSize.Large:
-      return 1.75;
-
-    case SmartLinkSize.Medium:
-    case SmartLinkSize.Small:
-    default:
-      return 1.5;
-  }
-};
-
 const getMaxLines = maxLines => {
   if (maxLines > MAXIMUM_MAX_LINES) {
     return DEFAULT_MAX_LINES;

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

@@ -64,6 +64,7 @@ export const getGapSize = size => {
   }
 };
 export const getBaseStyles = (direction, size) => css`
+  align-items: center;
   display: flex;
   gap: ${getGapSize(size)}rem;
   line-height: 1rem;

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

@@ -6,16 +6,21 @@ import { SmartLinkSize } from '../../../../../constants';
 const MAX_COUNT = 4;
 
 const getStyles = size => {
+  const styles = css`
+    display: inline-flex;
+  `;
+
   switch (size) {
     case SmartLinkSize.XLarge:
     case SmartLinkSize.Large:
       // Default AK small size
-      return;
+      return styles;
 
     case SmartLinkSize.Medium:
     case SmartLinkSize.Small:
     default:
       return css`
+        ${styles}
         li {
           span,
           svg {

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

@@ -9,15 +9,19 @@ import ImageIcon from '../../common/image-icon';
 import AtlaskitIcon from '../../common/atlaskit-icon';
 const badgeStyles = css`
   align-items: center;
-  display: flex;
+  display: inline-flex;
   min-width: fit-content;
 `;
 const iconStyles = css`
   color: ${tokens.badgeIcon};
+  line-height: 0;
+  vertical-align: middle;
   ${getIconSizeStyles('1rem')}
+  img,
   span,
   svg {
     line-height: 0;
+    vertical-align: middle;
   }
 `;
 const labelStyles = css`
@@ -25,6 +29,7 @@ const labelStyles = css`
   font-size: 0.75rem;
   line-height: 1rem;
   padding-left: 0.125rem;
+  vertical-align: middle;
 `;
 const messageMapper = {
   [IconType.PriorityBlocker]: messages.priority_blocker,
@@ -99,7 +104,7 @@ const Badge = ({
     return null;
   }
 
-  return jsx("div", {
+  return jsx("span", {
     css: [badgeStyles, overrideCss],
     "data-fit-to-content": true,
     "data-smart-element-badge": true,

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

@@ -3,6 +3,7 @@ import React from 'react';
 import { css, jsx } from '@emotion/core';
 import AtlaskitLozenge from '@atlaskit/lozenge';
 const styles = css`
+  display: inline-flex;
   line-height: inherit;
 `;
 /**

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

@@ -96,6 +96,20 @@ export const getLinkSizeStyles = size => {
       `;
   }
 };
+export const getMaxLineHeight = size => {
+  // The maximum line height based on all elements in specific size.
+  // These heights belongs to AvatarGroup.
+  switch (size) {
+    case SmartLinkSize.XLarge:
+    case SmartLinkSize.Large:
+      return 1.75;
+
+    case SmartLinkSize.Medium:
+    case SmartLinkSize.Small:
+    default:
+      return 1.5;
+  }
+};
 export const getMaxLines = (value, defaultValue, max, min) => {
   if (value > max) {
     return defaultValue;
@@ -115,7 +129,9 @@ export const getTruncateStyles = (maxLines, lineHeight = '1rem', wordBreak = 'br
     -webkit-line-clamp: ${maxLines};
     -webkit-box-orient: vertical;
     // Fallback options
-    max-height: calc(${maxLines} * ${lineHeight});
+    @supports not (-webkit-line-clamp: 1) {
+      max-height: calc(${maxLines} * ${lineHeight});
+    }
   `;
 export const hasWhiteSpace = str => {
   return str.search(/\s/) >= 0;

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

@@ -76,7 +76,8 @@ const HoverCardContent = ({
     actions: titleActions
   }), /*#__PURE__*/React.createElement(MetadataBlock, {
     primary: primary,
-    secondary: secondary
+    secondary: secondary,
+    size: SmartLinkSize.Small
   }), body, /*#__PURE__*/React.createElement(FooterBlock, {
     actions: footerActions
   }));

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

@@ -1,10 +1,11 @@
+import { ElementName } from '../../constants';
 export const HOVER_CARD_ANALYTICS_DISPLAY = 'flexible';
 export const getSimulatedMetadata = (extensionKey = '') => {
   switch (extensionKey) {
     case 'confluence-object-provider':
       return {
         metadata: {
-          primary: ['AuthorGroup', 'CreatedBy', 'CommentCount', 'ReactCount'],
+          primary: [ElementName.AuthorGroup, ElementName.CreatedBy, ElementName.CommentCount, ElementName.ReactCount],
           secondary: []
         }
       };
@@ -12,7 +13,7 @@ export const getSimulatedMetadata = (extensionKey = '') => {
     case 'jira-object-provider':
       return {
         metadata: {
-          primary: ['AuthorGroup', 'State', 'Priority'],
+          primary: [ElementName.AuthorGroup, ElementName.State, ElementName.Priority],
           secondary: []
         }
       };
@@ -20,7 +21,7 @@ export const getSimulatedMetadata = (extensionKey = '') => {
     default:
       return {
         metadata: {
-          primary: ['ModifiedOn'],
+          primary: [ElementName.ModifiedOn, ElementName.CreatedBy],
           secondary: []
         }
       };

package/dist/esm/version.json

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

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

@@ -1,12 +1,13 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/core';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../../../constants';
-import { getBaseStyles, renderChildren } from '../utils';
+import { getBaseStyles, getGapSize, renderChildren } from '../utils';
+import { getMaxLineHeight, getTruncateStyles } from '../../utils';
 
 var getAlignmentStyles = function getAlignmentStyles(align) {
   switch (align) {
@@ -19,8 +20,23 @@ var getAlignmentStyles = function getAlignmentStyles(align) {
   }
 };
 
+var getGapStyles = function getGapStyles(size, align) {
+  var gap = getGapSize(size);
+
+  if (align === SmartLinkAlignment.Right) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      > span {\n        margin-left: ", "rem;\n        &:first-child {\n          margin-left: initial;\n        }\n      }\n    "])), gap);
+  }
+
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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 = getMaxLineHeight(size);
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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  "])), getTruncateStyles(1, lineHeight + 'rem'), getGapStyles(size, align));
+};
+
 export var getElementGroupStyles = function getElementGroupStyles(direction, size, align, width) {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  min-width: 10%;\n  ", "\n"])), getBaseStyles(direction, size), getAlignmentStyles(align), width === SmartLinkWidth.Flexible ? "flex: 1 3;" : '');
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  min-width: 10%;\n  ", "\n  ", "\n"])), getBaseStyles(direction, size), getAlignmentStyles(align), width === SmartLinkWidth.Flexible ? "flex: 1 3;" : '', direction === SmartLinkDirection.Horizontal ? getHorizontalDirectionStyles(size, align) : '');
 };
 /**
  * Creates a group of Action components. Accepts an array of Actions, in addition to some styling

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

@@ -1,10 +1,24 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
 import React from 'react';
-import { SmartLinkAlignment, SmartLinkDirection, SmartLinkStatus, SmartLinkWidth } from '../../../../../constants';
+import { css } from '@emotion/core';
+import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkStatus, SmartLinkWidth } from '../../../../../constants';
 import Block from '../block';
 import ElementGroup from '../element-group';
 import { Provider } from '../../elements';
 import ActionGroup from '../action-group';
+
+var getActionGroupStyles = function getActionGroupStyles(size) {
+  if (size === 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 css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      max-height: 2rem;\n    "])));
+  }
+};
 /**
  * Represents a FooterBlock, designed to contain elements and actions that should appear
  * at the bottom of a link card.
@@ -13,9 +27,12 @@ import ActionGroup from '../action-group';
  * @see Block
  */
 
+
 var FooterBlock = function FooterBlock(props) {
   var status = props.status,
       actions = props.actions,
+      _props$size = props.size,
+      size = _props$size === void 0 ? SmartLinkSize.Medium : _props$size,
       _props$testId = props.testId,
       testId = _props$testId === void 0 ? 'smart-footer-block' : _props$testId;
 
@@ -31,6 +48,7 @@ var FooterBlock = function FooterBlock(props) {
     testId: "smart-element-group-actions",
     align: SmartLinkAlignment.Right,
     direction: SmartLinkDirection.Horizontal,
+    overrideCss: getActionGroupStyles(size),
     width: SmartLinkWidth.Flexible
   }, /*#__PURE__*/React.createElement(ActionGroup, {
     items: actions,

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

@@ -8,9 +8,10 @@ var _templateObject;
 import React from 'react';
 import { css } from '@emotion/core';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkStatus, SmartLinkWidth } from '../../../../../constants';
-import { getGapSize, renderElementItems } from '../utils';
+import { renderElementItems } from '../utils';
 import Block from '../block';
 import ElementGroup from '../element-group';
+import { getMaxLineHeight, getTruncateStyles } from '../../utils';
 var DEFAULT_MAX_LINES = 2;
 var MAXIMUM_MAX_LINES = 2;
 var MINIMUM_MAX_LINES = 1;
@@ -18,31 +19,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 = getGapSize(size);
-  var gapHeight = gap * (maxLines - 1);
-  var height = lineHeight * maxLines + gapHeight;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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 SmartLinkSize.XLarge:
-    case SmartLinkSize.Large:
-      return 1.75;
-
-    case SmartLinkSize.Medium:
-    case 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 = getMaxLineHeight(size);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    line-height: ", "rem;\n    ", "\n  "])), lineHeight, getTruncateStyles(maxLines, lineHeight + 'rem'));
 };
 
 var getMaxLines = function getMaxLines(maxLines) {

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

@@ -50,7 +50,7 @@ export var getGapSize = function getGapSize(size) {
   }
 };
 export var getBaseStyles = function getBaseStyles(direction, size) {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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 css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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));
 };
 
 var isActionGroup = function isActionGroup(node) {

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

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
 /** @jsx jsx */
 import React from 'react';
@@ -10,16 +10,18 @@ import { SmartLinkSize } from '../../../../../constants';
 var MAX_COUNT = 4;
 
 var getStyles = function getStyles(size) {
+  var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: inline-flex;\n  "])));
+
   switch (size) {
     case SmartLinkSize.XLarge:
     case SmartLinkSize.Large:
       // Default AK small size
-      return;
+      return styles;
 
     case SmartLinkSize.Medium:
     case SmartLinkSize.Small:
     default:
-      return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        li {\n          span,\n          svg {\n            max-height: 1.25rem;\n            max-width: 1.25rem;\n          }\n        }\n      "])));
+      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        ", "\n        li {\n          span,\n          svg {\n            max-height: 1.25rem;\n            max-width: 1.25rem;\n          }\n        }\n      "])), styles);
   }
 };
 /**

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

@@ -12,9 +12,9 @@ import { IconType } from '../../../../../constants';
 import { messages } from '../../../../../messages';
 import ImageIcon from '../../common/image-icon';
 import AtlaskitIcon from '../../common/atlaskit-icon';
-var badgeStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  min-width: fit-content;\n"])));
-var iconStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  ", "\n  span,\n  svg {\n    line-height: 0;\n  }\n"])), tokens.badgeIcon, getIconSizeStyles('1rem'));
-var labelStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  padding-left: 0.125rem;\n"])), tokens.badgeText);
+var badgeStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  display: inline-flex;\n  min-width: fit-content;\n"])));
+var iconStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])), tokens.badgeIcon, getIconSizeStyles('1rem'));
+var labelStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  padding-left: 0.125rem;\n  vertical-align: middle;\n"])), tokens.badgeText);
 var messageMapper = (_messageMapper = {}, _defineProperty(_messageMapper, IconType.PriorityBlocker, messages.priority_blocker), _defineProperty(_messageMapper, IconType.PriorityCritical, messages.priority_critical), _defineProperty(_messageMapper, IconType.PriorityHigh, messages.priority_high), _defineProperty(_messageMapper, IconType.PriorityHighest, messages.priority_highest), _defineProperty(_messageMapper, IconType.PriorityLow, messages.priority_low), _defineProperty(_messageMapper, IconType.PriorityLowest, messages.priority_lowest), _defineProperty(_messageMapper, IconType.PriorityMajor, messages.priority_major), _defineProperty(_messageMapper, IconType.PriorityMedium, messages.priority_medium), _defineProperty(_messageMapper, IconType.PriorityMinor, messages.priority_minor), _defineProperty(_messageMapper, IconType.PriorityTrivial, messages.priority_trivial), _defineProperty(_messageMapper, IconType.PriorityUndefined, messages.priority_undefined), _messageMapper);
 
 var getFormattedMessageFromIcon = function getFormattedMessageFromIcon(icon) {
@@ -76,7 +76,7 @@ var Badge = function Badge(_ref) {
     return null;
   }
 
-  return jsx("div", {
+  return jsx("span", {
     css: [badgeStyles, overrideCss],
     "data-fit-to-content": true,
     "data-smart-element-badge": true,

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

@@ -6,7 +6,7 @@ var _templateObject;
 import React from 'react';
 import { css, jsx } from '@emotion/core';
 import AtlaskitLozenge from '@atlaskit/lozenge';
-var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  line-height: inherit;\n"])));
+var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  line-height: inherit;\n"])));
 /**
  * A base element that displays a Lozenge.
  * @internal

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

@@ -67,6 +67,20 @@ export var getLinkSizeStyles = function getLinkSizeStyles(size) {
       return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        font-size: 0.75rem;\n        font-weight: 400;\n        letter-spacing: 0em;\n        line-height: ", ";\n      "])), getLinkLineHeight(size));
   }
 };
+export var getMaxLineHeight = function getMaxLineHeight(size) {
+  // The maximum line height based on all elements in specific size.
+  // These heights belongs to AvatarGroup.
+  switch (size) {
+    case SmartLinkSize.XLarge:
+    case SmartLinkSize.Large:
+      return 1.75;
+
+    case SmartLinkSize.Medium:
+    case SmartLinkSize.Small:
+    default:
+      return 1.5;
+  }
+};
 export var getMaxLines = function getMaxLines(value, defaultValue, max, min) {
   if (value > max) {
     return defaultValue;
@@ -81,7 +95,7 @@ export var getMaxLines = function getMaxLines(value, defaultValue, max, min) {
 export 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 css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\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 css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\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);
 };
 export var hasWhiteSpace = function hasWhiteSpace(str) {
   return str.search(/\s/) >= 0;

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

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

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

@@ -1,3 +1,4 @@
+import { ElementName } from '../../constants';
 export var HOVER_CARD_ANALYTICS_DISPLAY = 'flexible';
 export var getSimulatedMetadata = function getSimulatedMetadata() {
   var extensionKey = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
@@ -6,7 +7,7 @@ export var getSimulatedMetadata = function getSimulatedMetadata() {
     case 'confluence-object-provider':
       return {
         metadata: {
-          primary: ['AuthorGroup', 'CreatedBy', 'CommentCount', 'ReactCount'],
+          primary: [ElementName.AuthorGroup, ElementName.CreatedBy, ElementName.CommentCount, ElementName.ReactCount],
           secondary: []
         }
       };
@@ -14,7 +15,7 @@ export var getSimulatedMetadata = function getSimulatedMetadata() {
     case 'jira-object-provider':
       return {
         metadata: {
-          primary: ['AuthorGroup', 'State', 'Priority'],
+          primary: [ElementName.AuthorGroup, ElementName.State, ElementName.Priority],
           secondary: []
         }
       };
@@ -22,7 +23,7 @@ export var getSimulatedMetadata = function getSimulatedMetadata() {
     default:
       return {
         metadata: {
-          primary: ['ModifiedOn'],
+          primary: [ElementName.ModifiedOn, ElementName.CreatedBy],
           secondary: []
         }
       };

package/dist/types/view/FlexibleCard/components/utils.d.ts

@@ -7,6 +7,7 @@ export declare const getIconSizeStyles: (width: string) => SerializedStyles;
 export declare const getIconWidth: (size?: SmartLinkSize | undefined) => string;
 export declare const getLinkLineHeight: (size: SmartLinkSize) => string;
 export declare const getLinkSizeStyles: (size: SmartLinkSize) => SerializedStyles;
+export declare const getMaxLineHeight: (size: SmartLinkSize) => 1.5 | 1.75;
 export declare const getMaxLines: (value: number, defaultValue: number, max: number, min: number) => number;
 export declare const getTruncateStyles: (maxLines: number, lineHeight?: string, wordBreak?: 'break-word' | 'break-all') => SerializedStyles;
 export declare const hasWhiteSpace: (str: string) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "19.1.20",
+  "version": "19.1.21",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"