@atlaskit/smart-card 19.1.18 → 19.1.21

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @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
+
+- [`0b7abdcf058`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0b7abdcf058) - Flexible UI: Fix PreviewBlock not showing image loading skeleton
+
+## 19.1.19
+
+### Patch Changes
+
+- [`f7aedc6cf7d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f7aedc6cf7d) - [ux] A new element 'LatestCommit' was added in FlexibleUI for Smart Links. It displays the latest commit of a repository. Version of package 'json-ld-types' was upgraded to 2.4.2
+- Updated dependencies
+
 ## 19.1.18
 
 ### Patch Changes

package/dist/cjs/constants.js

@@ -100,7 +100,7 @@ var SmartLinkWidth;
 /**
  * Flexible UI element name - each reflecting the link data its represented.
  * When adding an element...
- * 1) Create base element if it doesn't already existed.
+ * 1) Create base element if it doesn't already exist.
  *    Base element are inside src/view/FlexibleCard/components/elements.
  *    E.g. Badge,DateTime, Icon, Lozenge, etc.
  * 2) Update FlexibleUiContext with the new prop for data representing
@@ -148,6 +148,7 @@ exports.ElementName = ElementName;
   ElementName["Title"] = "Title";
   ElementName["ViewCount"] = "ViewCount";
   ElementName["VoteCount"] = "VoteCount";
+  ElementName["LatestCommit"] = "LatestCommit";
 })(ElementName || (exports.ElementName = ElementName = {}));
 
 var ActionName;

package/dist/cjs/extractors/flexible/index.js

@@ -29,6 +29,8 @@ var _extractProviderIcon = _interopRequireDefault(require("./icon/extract-provid
 
 var _extractPreview = _interopRequireDefault(require("./extract-preview"));
 
+var _latestCommit = require("./latest-commit");
+
 var extractFlexibleUiContext = function extractFlexibleUiContext(response, renderers) {
   if (!response) {
     return undefined;
@@ -57,6 +59,7 @@ var extractFlexibleUiContext = function extractFlexibleUiContext(response, rende
     subscriberCount: (0, _utils.extractSubscriberCount)(data),
     title: (0, _primitives.extractTitle)(data) || url,
     provider: (0, _extractProviderIcon.default)(data),
+    latestCommit: (0, _latestCommit.extractLatestCommit)(data),
     url: url
   };
 };

package/dist/cjs/extractors/flexible/latest-commit/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.extractLatestCommit = void 0;
+
+var extractLatestCommit = function extractLatestCommit(jsonLd) {
+  var latestCommit = jsonLd['atlassian:latestCommit'];
+
+  if (typeof latestCommit === 'string') {
+    return latestCommit;
+  }
+
+  if (latestCommit) {
+    //todo: change the properties to latestCommit.hash when BE is ready
+    return latestCommit ? latestCommit.name : undefined;
+  }
+};
+
+exports.extractLatestCommit = extractLatestCommit;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "19.1.18",
+	"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

@@ -48,7 +48,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-var ElementDisplaySchema = (_ElementDisplaySchema = {}, (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.AuthorGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CollaboratorGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CommentCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ViewCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ReactCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.VoteCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CreatedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CreatedOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.LinkIcon, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ModifiedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ModifiedOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Preview, ['block']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Priority, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ProgrammingLanguage, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Snippet, ['block']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.State, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.SubscriberCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Title, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Provider, ['inline']), _ElementDisplaySchema);
+var ElementDisplaySchema = (_ElementDisplaySchema = {}, (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.AuthorGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CollaboratorGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CommentCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ViewCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ReactCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.VoteCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CreatedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CreatedOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.LinkIcon, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ModifiedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ModifiedOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Preview, ['block']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Priority, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ProgrammingLanguage, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Snippet, ['block']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.State, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.SubscriberCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Title, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Provider, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.LatestCommit, ['inline']), _ElementDisplaySchema);
 exports.ElementDisplaySchema = ElementDisplaySchema;
 
 var getDirectionStyles = function getDirectionStyles(direction) {
@@ -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/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VoteCount = exports.ViewCount = exports.Title = exports.SubscriberCount = exports.State = exports.Snippet = exports.ReactCount = exports.Provider = exports.ProgrammingLanguage = exports.Priority = exports.Preview = exports.ModifiedOn = exports.ModifiedBy = exports.LinkIcon = exports.CreatedOn = exports.CreatedBy = exports.CommentCount = exports.CollaboratorGroup = exports.AuthorGroup = void 0;
+exports.VoteCount = exports.ViewCount = exports.Title = exports.SubscriberCount = exports.State = exports.Snippet = exports.ReactCount = exports.Provider = exports.ProgrammingLanguage = exports.Priority = exports.Preview = exports.ModifiedOn = exports.ModifiedBy = exports.LinkIcon = exports.LatestCommit = exports.CreatedOn = exports.CreatedBy = exports.CommentCount = exports.CollaboratorGroup = exports.AuthorGroup = void 0;
 
 var _utils = require("./utils");
 
@@ -67,12 +67,18 @@ var CreatedBy = (0, _utils.createElement)(_constants.ElementName.CreatedBy);
 
 exports.CreatedBy = CreatedBy;
 var CreatedOn = (0, _utils.createElement)(_constants.ElementName.CreatedOn);
+/**
+ * Creates an element that contains Last Commit hash
+ */
+
+exports.CreatedOn = CreatedOn;
+var LatestCommit = (0, _utils.createElement)(_constants.ElementName.LatestCommit);
 /**
  * Creates a LinkIcon Icon element using the data from LinkIcon in the Flexible UI Context.
  * @see Icon
  */
 
-exports.CreatedOn = CreatedOn;
+exports.LatestCommit = LatestCommit;
 var LinkIcon = (0, _utils.createElement)(_constants.ElementName.LinkIcon);
 /**
  * Creates a ModifiedBy Text element using the data from ModifiedBy in the Flexible UI Context.

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/elements/utils.js

@@ -110,6 +110,11 @@ var elementMappings = (_elementMappings = {}, (0, _defineProperty2.default)(_ele
   component: _dateTime.default
 }), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.Provider, {
   component: _badge.default
+}), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.LatestCommit, {
+  component: _badge.default,
+  props: {
+    icon: _constants.IconType.Commit
+  }
 }), _elementMappings);
 
 var getContextKey = function getContextKey(name) {
@@ -136,6 +141,7 @@ var getData = function getData(elementName, contextKey, context) {
     case _constants.ElementName.VoteCount:
     case _constants.ElementName.ProgrammingLanguage:
     case _constants.ElementName.SubscriberCount:
+    case _constants.ElementName.LatestCommit:
       return toBadgeProps(data);
 
     case _constants.ElementName.CreatedBy:

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/constants.js

@@ -81,7 +81,7 @@ export let SmartLinkWidth;
 /**
  * Flexible UI element name - each reflecting the link data its represented.
  * When adding an element...
- * 1) Create base element if it doesn't already existed.
+ * 1) Create base element if it doesn't already exist.
  *    Base element are inside src/view/FlexibleCard/components/elements.
  *    E.g. Badge,DateTime, Icon, Lozenge, etc.
  * 2) Update FlexibleUiContext with the new prop for data representing
@@ -125,6 +125,7 @@ export let ElementName;
   ElementName["Title"] = "Title";
   ElementName["ViewCount"] = "ViewCount";
   ElementName["VoteCount"] = "VoteCount";
+  ElementName["LatestCommit"] = "LatestCommit";
 })(ElementName || (ElementName = {}));
 
 export let ActionName;

package/dist/es2019/extractors/flexible/index.js

@@ -9,6 +9,7 @@ import { extractDateCreated } from '../common/date/extractDateCreated';
 import extractPriority from './extract-priority';
 import extractProviderIcon from './icon/extract-provider-icon';
 import extractPreview from './extract-preview';
+import { extractLatestCommit } from './latest-commit';
 
 const extractFlexibleUiContext = (response, renderers) => {
   if (!response) {
@@ -38,6 +39,7 @@ const extractFlexibleUiContext = (response, renderers) => {
     subscriberCount: extractSubscriberCount(data),
     title: extractTitle(data) || url,
     provider: extractProviderIcon(data),
+    latestCommit: extractLatestCommit(data),
     url
   };
 };

package/dist/es2019/extractors/flexible/latest-commit/index.js

@@ -0,0 +1,12 @@
+export const extractLatestCommit = jsonLd => {
+  const latestCommit = jsonLd['atlassian:latestCommit'];
+
+  if (typeof latestCommit === 'string') {
+    return latestCommit;
+  }
+
+  if (latestCommit) {
+    //todo: change the properties to latestCommit.hash when BE is ready
+    return latestCommit ? latestCommit.name : undefined;
+  }
+};

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "19.1.18",
+	"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,