@atlaskit/smart-card 26.16.1 → 26.18.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/smart-card
 
+## 26.18.0
+
+### Minor Changes
+
+- [`e7e73b61721`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e7e73b61721) - [ux] We are testing an improved dispaly for Slack hover & block cards behind a feature flag. If this update is successful it will be available in a later release.
+
+## 26.17.0
+
+### Minor Changes
+
+- [`efc2669bc13`](https://bitbucket.org/atlassian/atlassian-frontend/commits/efc2669bc13) - We are testing adding a prefix to the Avatar name tooltip in the Hover Card behind the "platform.linking-platform.smart-card.enable-better-metadata_iojwg" feature flag. You can turn it on by passing new showNamePrefix prop to the Flexible UI elements such us AssignedToGroup, OwnedByGroup and AuthorGroup. If this fix is successful it will be available in a later release.
+
 ## 26.16.1
 
 ### Patch Changes

package/dist/cjs/extractors/hover/extractMetadata.js

@@ -1,18 +1,26 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.extractMetadata = exports.elementNamesToItems = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _constants = require("../../constants");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+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 AvatarGroupsWithNamePrefix = [_constants.ElementName.AssignedToGroup, _constants.ElementName.OwnedByGroup, _constants.ElementName.AuthorGroup];
 var elementNamesToItems = function elementNamesToItems(elementNames) {
   return elementNames.filter(function (element) {
     return element in _constants.ElementName;
   }).map(function (elementName) {
-    return {
+    return _objectSpread({
       name: elementName,
       testId: "".concat(elementName.toLowerCase(), "-metadata-element")
-    };
+    }, (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && AvatarGroupsWithNamePrefix.includes(elementName) && {
+      showNamePrefix: true
+    });
   });
 };
 exports.elementNamesToItems = elementNamesToItems;

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

@@ -21,7 +21,7 @@ exports.ANALYTICS_CHANNEL = ANALYTICS_CHANNEL;
 var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.16.1"
+  packageVersion: "26.18.0"
 };
 exports.context = context;
 var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {

package/dist/cjs/view/BlockCard/views/flexible/FlexibleResolvedView.js

@@ -91,7 +91,9 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
     onError: function onError() {
       setIsPreviewBlockErrored(true);
     }
-  }) : null, /*#__PURE__*/_react.default.createElement(_blocks.FooterBlock, {
+  }) : null, /*#__PURE__*/_react.default.createElement(_blocks.FooterBlock, (0, _extends2.default)({}, (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
+    overrideCss: _styled.footerBlockCss
+  }, {
     actions: [{
       name: _constants.ActionName.PreviewAction,
       hideIcon: true,
@@ -138,7 +140,7 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
         });
       }
     }]
-  }));
+  })));
 };
 var _default = (0, _withFlexibleUIBlockCardStyle.withFlexibleUIBlockCardStyle)(FlexibleResolvedView);
 exports.default = _default;

package/dist/cjs/view/BlockCard/views/flexible/styled.js

@@ -4,19 +4,21 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.titleBlockCss = exports.metadataBlockCss = exports.flexibleBlockCardStyle = void 0;
+exports.titleBlockCss = exports.metadataBlockCss = exports.footerBlockCss = exports.flexibleBlockCardStyle = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _token = require("../../../../utils/token");
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 // in editor prosemirror adds padding-left so we need to overwrite it
 var metadataBlockCss = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* primary element group */\n  span[data-smart-element-avatar-group] {\n    > ul {\n      padding-left: 0px;\n    }\n  }\n  [data-smart-element-group] {\n    line-height: 1rem;\n  }\n"])));
 exports.metadataBlockCss = metadataBlockCss;
 var titleBlockCss = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n"])), (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? "gap: 0.5em;" : "", (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "[data-smart-element=\"Title\"] {\n          font-weight: 600;\n        }" : "");
 exports.titleBlockCss = titleBlockCss;
-var flexibleBlockCardElevationStyle = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: ", ";\n"])), _token.tokens.elevation, "var(--ds-space-025, 2px)");
-var refreshedFlexibleBlockCardStyle = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  & > div {\n    border-radius: ", ";\n    border: 1px solid ", ";\n  }\n"])), "var(--ds-border-radius-300, 12px)", "var(--ds-border-input, ".concat(_colors.N40, ")"));
+var footerBlockCss = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  height: 1.5rem;\n"])));
+exports.footerBlockCss = footerBlockCss;
+var flexibleBlockCardElevationStyle = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: ", ";\n"])), _token.tokens.elevation, "var(--ds-space-025, 2px)");
+var refreshedFlexibleBlockCardStyle = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  & > div {\n    border-radius: ", ";\n    border: 1px solid ", ";\n  }\n"])), "var(--ds-border-radius-300, 12px)", "var(--ds-border-input, ".concat(_colors.N40, ")"));
 var flexibleBlockCardStyle = (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? refreshedFlexibleBlockCardStyle : flexibleBlockCardElevationStyle;
 exports.flexibleBlockCardStyle = flexibleBlockCardStyle;

package/dist/cjs/view/BlockCard/views/flexible/utils/index.js

@@ -81,6 +81,20 @@ var getSimulatedBetterMetadata = function getSimulatedBetterMetadata(cardDetails
           name: _constants.ElementName.SubTasksProgress
         }]
       };
+    case 'slack-object-provider':
+      return {
+        titleMetadata: defaultTitleMetadata,
+        topMetadata: [{
+          name: _constants.ElementName.AuthorGroup
+        }, {
+          name: _constants.ElementName.SentOn
+        }],
+        bottomMetadata: [{
+          name: _constants.ElementName.ReactCount
+        }, {
+          name: _constants.ElementName.CommentCount
+        }]
+      };
     default:
       return {
         titleMetadata: defaultTitleMetadata,

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

@@ -1,17 +1,26 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _avatarGroup = _interopRequireDefault(require("@atlaskit/avatar-group"));
 var _constants = require("../../../../../constants");
+var _messages = require("../../../../../messages");
+var _reactIntlNext = require("react-intl-next");
+var _utils = require("../../utils");
 var _templateObject, _templateObject2;
 /** @jsx jsx */
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+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 MAX_COUNT = 4;
 var getStyles = function getStyles(size) {
   var styles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    display: inline-flex;\n    ul,\n    ul {\n      margin-right: 0.5rem;\n      margin-top: 0;\n    }\n  "])));
@@ -26,6 +35,18 @@ var getStyles = function getStyles(size) {
       return (0, _react2.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);
   }
 };
+var getPersonNameWithPrefix = function getPersonNameWithPrefix(elementName, personName, intl) {
+  switch (elementName) {
+    case _constants.ElementName.AssignedToGroup:
+      return (0, _utils.getFormattedMessageAsString)(intl, _messages.messages.assigned_to, personName);
+    case _constants.ElementName.OwnedByGroup:
+      return (0, _utils.getFormattedMessageAsString)(intl, _messages.messages.owned_by, personName);
+    case _constants.ElementName.AuthorGroup:
+      return (0, _utils.getFormattedMessageAsString)(intl, _messages.messages.created_by, personName);
+    default:
+      return personName;
+  }
+};
 
 /**
  * A base element that displays a group of avatars.
@@ -44,8 +65,21 @@ var AvatarGroup = function AvatarGroup(_ref) {
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? _constants.SmartLinkSize.Medium : _ref$size,
     _ref$testId = _ref.testId,
-    testId = _ref$testId === void 0 ? 'smart-element-avatar-group' : _ref$testId;
-  if (!items.length) {
+    testId = _ref$testId === void 0 ? 'smart-element-avatar-group' : _ref$testId,
+    _ref$showNamePrefix = _ref.showNamePrefix,
+    showNamePrefix = _ref$showNamePrefix === void 0 ? false : _ref$showNamePrefix;
+  var intl = (0, _reactIntlNext.useIntl)();
+  var data = (0, _react.useMemo)(function () {
+    if (name && showNamePrefix) {
+      return items.map(function (person) {
+        return _objectSpread(_objectSpread({}, person), {}, {
+          name: getPersonNameWithPrefix(name, person.name, intl) || person.name
+        });
+      });
+    }
+    return items;
+  }, [name, items, showNamePrefix, intl]);
+  if (!data.length) {
     return null;
   }
   return (0, _react2.jsx)("span", {
@@ -58,7 +92,7 @@ var AvatarGroup = function AvatarGroup(_ref) {
     maxCount: maxCount,
     appearance: "stack",
     size: "small",
-    data: items,
+    data: data,
     testId: testId
   }));
 };

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sizeToButtonSpacing = exports.openEmbedModalWithFlexibleUiIcon = exports.hasWhiteSpace = exports.getTruncateStyles = exports.getMaxLines = exports.getMaxLineHeight = exports.getLinkSizeStyles = exports.getLinkLineHeight = exports.getIconWidth = exports.getIconSizeStyles = exports.getFormattedMessage = void 0;
+exports.sizeToButtonSpacing = exports.openEmbedModalWithFlexibleUiIcon = exports.hasWhiteSpace = exports.getTruncateStyles = exports.getMaxLines = exports.getMaxLineHeight = exports.getLinkSizeStyles = exports.getLinkLineHeight = exports.getIconWidth = exports.getIconSizeStyles = exports.getFormattedMessageAsString = exports.getFormattedMessage = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -27,6 +27,13 @@ var getFormattedMessage = function getFormattedMessage(message) {
   }
 };
 exports.getFormattedMessage = getFormattedMessage;
+var getFormattedMessageAsString = function getFormattedMessageAsString(intl, message, context) {
+  var formatMessage = intl.formatMessage;
+  return message ? formatMessage(message, {
+    context: context
+  }) : null;
+};
+exports.getFormattedMessageAsString = getFormattedMessageAsString;
 var getIconDimensionStyles = function getIconDimensionStyles(value) {
   return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: ", ";\n  min-height: ", ";\n  max-height: ", ";\n  width: ", ";\n  min-width: ", ";\n  max-width: ", ";\n"])), value, value, value, value, value, value);
 };

package/dist/cjs/view/HoverCard/components/views/resolved/styled.js

@@ -13,7 +13,7 @@ var _templateObject, _templateObject2, _templateObject3;
 var elementGap = '0.5rem';
 var metadataBlockCss = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  gap: 0px;\n  /* primary element group */\n  [data-smart-element-group]:nth-of-type(1) {\n    flex-grow: 7;\n\n    // a separator between text-based element\n    ", "\n\n    /* horizontal spacing between elements in group */\n    > span {\n      margin-right: ", ";\n    }\n  }\n  /* secondary element group */\n  [data-smart-element-group]:nth-of-type(2) {\n    flex-grow: 3;\n    /* horizontal spacing between elements in group */\n    > span {\n      margin-left: ", ";\n    }\n  }\n  ", "\n"])), _styled.separatorCss, elementGap, elementGap, (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? "[data-smart-element-group] {\n       line-height: 1rem;\n    }" : "");
 exports.metadataBlockCss = metadataBlockCss;
-var footerBlockCss = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), !(0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? "padding-top: 0.25rem;" : "");
+var footerBlockCss = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), !(0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? "padding-top: 0.25rem;" : "height: 1.5rem;");
 exports.footerBlockCss = footerBlockCss;
 var hiddenSnippetStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  visibility: hidden;\n  position: absolute;\n"])));
 exports.hiddenSnippetStyles = hiddenSnippetStyles;

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

@@ -37,7 +37,7 @@ var CARD_GAP_PX = 10;
 exports.CARD_GAP_PX = CARD_GAP_PX;
 var blockGap = '0.5rem';
 var elementGap = '0.5rem';
-var separatorCss = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  [data-separator] + [data-separator]:before {\n    margin-right: ", ";\n  }\n  ", "\n"])), elementGap, (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? " [data-smart-element-avatar-group] + [data-separator]:before {\n      content: '\u2022';\n      margin-right: ".concat(elementGap, ";\n    }") : "");
+var separatorCss = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  [data-separator] + [data-separator]:before {\n    margin-right: ", ";\n  }\n"])), elementGap);
 exports.separatorCss = separatorCss;
 var HoverCardContainer = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: none;\n  border-width: 0;\n  box-sizing: border-box;\n  width: ", "rem;\n  ", "\n\n  .", " {\n    display: none;\n  }\n"])), CARD_WIDTH_REM, !(0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? "padding: 1rem;" : "", _index.loadingPlaceholderClassName);
 exports.HoverCardContainer = HoverCardContainer;

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

@@ -169,6 +169,19 @@ var getSimulatedBetterMetadata = function getSimulatedBetterMetadata() {
           subtitle: []
         }
       });
+    case 'slack-object-provider':
+      return {
+        topMetadataBlock: {
+          primary: [_constants.ElementName.AuthorGroup, _constants.ElementName.SentOn],
+          secondary: [],
+          subtitle: []
+        },
+        bottomMetadataBlock: {
+          primary: [_constants.ElementName.ReactCount, _constants.ElementName.CommentCount],
+          secondary: [],
+          subtitle: []
+        }
+      };
     case 'google-object-provider':
     case 'figma-object-provider':
       return _objectSpread(_objectSpread({}, defaultMetadata), {}, {

package/dist/cjs/view/LinkUrl/index.js

@@ -18,7 +18,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId"],
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.16.1",
+  packageVersion: "26.18.0",
   componentName: 'linkUrl'
 };
 var Link = (0, _click.withLinkClickedEvent)('a');

package/dist/es2019/extractors/hover/extractMetadata.js

@@ -1,8 +1,13 @@
 import { ElementName } from '../../constants';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+const AvatarGroupsWithNamePrefix = [ElementName.AssignedToGroup, ElementName.OwnedByGroup, ElementName.AuthorGroup];
 export const elementNamesToItems = elementNames => {
   return elementNames.filter(element => element in ElementName).map(elementName => ({
     name: elementName,
-    testId: `${elementName.toLowerCase()}-metadata-element`
+    testId: `${elementName.toLowerCase()}-metadata-element`,
+    ...(getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && AvatarGroupsWithNamePrefix.includes(elementName) && {
+      showNamePrefix: true
+    })
   }));
 };
 export const extractMetadata = jsonLd => {

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

@@ -3,7 +3,7 @@ export const ANALYTICS_CHANNEL = 'media';
 export const context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.16.1"
+  packageVersion: "26.18.0"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/es2019/view/BlockCard/views/flexible/FlexibleResolvedView.js

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import FlexibleCard from '../../../FlexibleCard';
 import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
 import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock } from '../../../FlexibleCard/components/blocks';
-import { metadataBlockCss } from './styled';
+import { metadataBlockCss, footerBlockCss } from './styled';
 import { ActionName, CardDisplay, ElementName, MediaPlacement, SmartLinkPosition } from '../../../../constants';
 import uuid from 'uuid';
 import { getSimulatedMetadata, getSimulatedBetterMetadata } from './utils';
@@ -75,7 +75,9 @@ const FlexibleResolvedView = ({
     onError: () => {
       setIsPreviewBlockErrored(true);
     }
-  }) : null, /*#__PURE__*/React.createElement(FooterBlock, {
+  }) : null, /*#__PURE__*/React.createElement(FooterBlock, _extends({}, getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
+    overrideCss: footerBlockCss
+  }, {
     actions: [{
       name: ActionName.PreviewAction,
       hideIcon: true,
@@ -122,6 +124,6 @@ const FlexibleResolvedView = ({
         });
       }
     }]
-  }));
+  })));
 };
 export default withFlexibleUIBlockCardStyle(FlexibleResolvedView);

package/dist/es2019/view/BlockCard/views/flexible/styled.js

@@ -21,6 +21,9 @@ export const titleBlockCss = css`
           font-weight: 600;
         }` : ``}
 `;
+export const footerBlockCss = css`
+  height: 1.5rem;
+`;
 const flexibleBlockCardElevationStyle = css`
   border-radius: 1.5px;
   box-shadow: ${tokens.elevation};

package/dist/es2019/view/BlockCard/views/flexible/utils/index.js

@@ -75,6 +75,20 @@ export const getSimulatedBetterMetadata = cardDetails => {
           name: ElementName.SubTasksProgress
         }]
       };
+    case 'slack-object-provider':
+      return {
+        titleMetadata: defaultTitleMetadata,
+        topMetadata: [{
+          name: ElementName.AuthorGroup
+        }, {
+          name: ElementName.SentOn
+        }],
+        bottomMetadata: [{
+          name: ElementName.ReactCount
+        }, {
+          name: ElementName.CommentCount
+        }]
+      };
     default:
       return {
         titleMetadata: defaultTitleMetadata,

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

@@ -1,8 +1,12 @@
 /** @jsx jsx */
-import React from 'react';
+import React, { useMemo } from 'react';
 import { css, jsx } from '@emotion/react';
 import AtlaskitAvatarGroup from '@atlaskit/avatar-group';
 import { SmartLinkSize } from '../../../../../constants';
+import { messages } from '../../../../../messages';
+import { useIntl } from 'react-intl-next';
+import { ElementName } from '../../../../../constants';
+import { getFormattedMessageAsString } from '../../utils';
 const MAX_COUNT = 4;
 const getStyles = size => {
   const styles = css`
@@ -33,6 +37,18 @@ const getStyles = size => {
       `;
   }
 };
+const getPersonNameWithPrefix = (elementName, personName, intl) => {
+  switch (elementName) {
+    case ElementName.AssignedToGroup:
+      return getFormattedMessageAsString(intl, messages.assigned_to, personName);
+    case ElementName.OwnedByGroup:
+      return getFormattedMessageAsString(intl, messages.owned_by, personName);
+    case ElementName.AuthorGroup:
+      return getFormattedMessageAsString(intl, messages.created_by, personName);
+    default:
+      return personName;
+  }
+};
 
 /**
  * A base element that displays a group of avatars.
@@ -47,9 +63,22 @@ const AvatarGroup = ({
   name,
   overrideCss,
   size = SmartLinkSize.Medium,
-  testId = 'smart-element-avatar-group'
+  testId = 'smart-element-avatar-group',
+  showNamePrefix = false
 }) => {
-  if (!items.length) {
+  const intl = useIntl();
+  const data = useMemo(() => {
+    if (name && showNamePrefix) {
+      return items.map(person => {
+        return {
+          ...person,
+          name: getPersonNameWithPrefix(name, person.name, intl) || person.name
+        };
+      });
+    }
+    return items;
+  }, [name, items, showNamePrefix, intl]);
+  if (!data.length) {
     return null;
   }
   return jsx("span", {
@@ -62,7 +91,7 @@ const AvatarGroup = ({
     maxCount: maxCount,
     appearance: "stack",
     size: "small",
-    data: items,
+    data: data,
     testId: testId
   }));
 };

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

@@ -22,6 +22,14 @@ export const getFormattedMessage = message => {
     }));
   }
 };
+export const getFormattedMessageAsString = (intl, message, context) => {
+  const {
+    formatMessage
+  } = intl;
+  return message ? formatMessage(message, {
+    context
+  }) : null;
+};
 const getIconDimensionStyles = value => css`
   height: ${value};
   min-height: ${value};

package/dist/es2019/view/HoverCard/components/views/resolved/styled.js

@@ -29,7 +29,7 @@ export const metadataBlockCss = css`
     }` : ``}
 `;
 export const footerBlockCss = css`
-  ${!getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? `padding-top: 0.25rem;` : ``}
+  ${!getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? `padding-top: 0.25rem;` : `height: 1.5rem;`}
 `;
 export const hiddenSnippetStyles = css`
   visibility: hidden;

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

@@ -27,10 +27,6 @@ export const separatorCss = css`
   [data-separator] + [data-separator]:before {
     margin-right: ${elementGap};
   }
-  ${getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? ` [data-smart-element-avatar-group] + [data-separator]:before {
-      content: '•';
-      margin-right: ${elementGap};
-    }` : ``}
 `;
 export const HoverCardContainer = css`
   background: none;

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

@@ -160,6 +160,19 @@ export const getSimulatedBetterMetadata = (extensionKey = '', data) => {
           subtitle: []
         }
       };
+    case 'slack-object-provider':
+      return {
+        topMetadataBlock: {
+          primary: [ElementName.AuthorGroup, ElementName.SentOn],
+          secondary: [],
+          subtitle: []
+        },
+        bottomMetadataBlock: {
+          primary: [ElementName.ReactCount, ElementName.CommentCount],
+          secondary: [],
+          subtitle: []
+        }
+      };
     case 'google-object-provider':
     case 'figma-object-provider':
       return {

package/dist/es2019/view/LinkUrl/index.js

@@ -8,7 +8,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.16.1",
+  packageVersion: "26.18.0",
   componentName: 'linkUrl'
 };
 const Link = withLinkClickedEvent('a');

package/dist/esm/extractors/hover/extractMetadata.js

@@ -1,12 +1,19 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+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) { _defineProperty(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; }
 import { ElementName } from '../../constants';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+var AvatarGroupsWithNamePrefix = [ElementName.AssignedToGroup, ElementName.OwnedByGroup, ElementName.AuthorGroup];
 export var elementNamesToItems = function elementNamesToItems(elementNames) {
   return elementNames.filter(function (element) {
     return element in ElementName;
   }).map(function (elementName) {
-    return {
+    return _objectSpread({
       name: elementName,
       testId: "".concat(elementName.toLowerCase(), "-metadata-element")
-    };
+    }, getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && AvatarGroupsWithNamePrefix.includes(elementName) && {
+      showNamePrefix: true
+    });
   });
 };
 export var extractMetadata = function extractMetadata(jsonLd) {

package/dist/esm/utils/analytics/analytics.js

@@ -13,7 +13,7 @@ export var ANALYTICS_CHANNEL = 'media';
 export var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.16.1"
+  packageVersion: "26.18.0"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/esm/view/BlockCard/views/flexible/FlexibleResolvedView.js

@@ -4,7 +4,7 @@ import React, { useEffect, useState } from 'react';
 import FlexibleCard from '../../../FlexibleCard';
 import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
 import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock } from '../../../FlexibleCard/components/blocks';
-import { metadataBlockCss } from './styled';
+import { metadataBlockCss, footerBlockCss } from './styled';
 import { ActionName, CardDisplay, ElementName, MediaPlacement, SmartLinkPosition } from '../../../../constants';
 import uuid from 'uuid';
 import { getSimulatedMetadata, getSimulatedBetterMetadata } from './utils';
@@ -82,7 +82,9 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
     onError: function onError() {
       setIsPreviewBlockErrored(true);
     }
-  }) : null, /*#__PURE__*/React.createElement(FooterBlock, {
+  }) : null, /*#__PURE__*/React.createElement(FooterBlock, _extends({}, getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
+    overrideCss: footerBlockCss
+  }, {
     actions: [{
       name: ActionName.PreviewAction,
       hideIcon: true,
@@ -129,6 +131,6 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
         });
       }
     }]
-  }));
+  })));
 };
 export default withFlexibleUIBlockCardStyle(FlexibleResolvedView);

package/dist/esm/view/BlockCard/views/flexible/styled.js

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 import { tokens } from '../../../../utils/token';
 import { css } from '@emotion/react';
 import { N40 } from '@atlaskit/theme/colors';
@@ -8,6 +8,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 // in editor prosemirror adds padding-left so we need to overwrite it
 export var metadataBlockCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* primary element group */\n  span[data-smart-element-avatar-group] {\n    > ul {\n      padding-left: 0px;\n    }\n  }\n  [data-smart-element-group] {\n    line-height: 1rem;\n  }\n"])));
 export var titleBlockCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n"])), getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? "gap: 0.5em;" : "", getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "[data-smart-element=\"Title\"] {\n          font-weight: 600;\n        }" : "");
-var flexibleBlockCardElevationStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: ", ";\n"])), tokens.elevation, "var(--ds-space-025, 2px)");
-var refreshedFlexibleBlockCardStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  & > div {\n    border-radius: ", ";\n    border: 1px solid ", ";\n  }\n"])), "var(--ds-border-radius-300, 12px)", "var(--ds-border-input, ".concat(N40, ")"));
+export var footerBlockCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 1.5rem;\n"])));
+var flexibleBlockCardElevationStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: ", ";\n"])), tokens.elevation, "var(--ds-space-025, 2px)");
+var refreshedFlexibleBlockCardStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  & > div {\n    border-radius: ", ";\n    border: 1px solid ", ";\n  }\n"])), "var(--ds-border-radius-300, 12px)", "var(--ds-border-input, ".concat(N40, ")"));
 export var flexibleBlockCardStyle = getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? refreshedFlexibleBlockCardStyle : flexibleBlockCardElevationStyle;

package/dist/esm/view/BlockCard/views/flexible/utils/index.js

@@ -75,6 +75,20 @@ export var getSimulatedBetterMetadata = function getSimulatedBetterMetadata(card
           name: ElementName.SubTasksProgress
         }]
       };
+    case 'slack-object-provider':
+      return {
+        titleMetadata: defaultTitleMetadata,
+        topMetadata: [{
+          name: ElementName.AuthorGroup
+        }, {
+          name: ElementName.SentOn
+        }],
+        bottomMetadata: [{
+          name: ElementName.ReactCount
+        }, {
+          name: ElementName.CommentCount
+        }]
+      };
     default:
       return {
         titleMetadata: defaultTitleMetadata,

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

@@ -1,10 +1,17 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+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) { _defineProperty(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; }
 /** @jsx jsx */
-import React from 'react';
+import React, { useMemo } from 'react';
 import { css, jsx } from '@emotion/react';
 import AtlaskitAvatarGroup from '@atlaskit/avatar-group';
 import { SmartLinkSize } from '../../../../../constants';
+import { messages } from '../../../../../messages';
+import { useIntl } from 'react-intl-next';
+import { ElementName } from '../../../../../constants';
+import { getFormattedMessageAsString } from '../../utils';
 var MAX_COUNT = 4;
 var getStyles = function getStyles(size) {
   var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: inline-flex;\n    ul,\n    ul {\n      margin-right: 0.5rem;\n      margin-top: 0;\n    }\n  "])));
@@ -19,6 +26,18 @@ var getStyles = function getStyles(size) {
       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);
   }
 };
+var getPersonNameWithPrefix = function getPersonNameWithPrefix(elementName, personName, intl) {
+  switch (elementName) {
+    case ElementName.AssignedToGroup:
+      return getFormattedMessageAsString(intl, messages.assigned_to, personName);
+    case ElementName.OwnedByGroup:
+      return getFormattedMessageAsString(intl, messages.owned_by, personName);
+    case ElementName.AuthorGroup:
+      return getFormattedMessageAsString(intl, messages.created_by, personName);
+    default:
+      return personName;
+  }
+};
 
 /**
  * A base element that displays a group of avatars.
@@ -37,8 +56,21 @@ var AvatarGroup = function AvatarGroup(_ref) {
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
     _ref$testId = _ref.testId,
-    testId = _ref$testId === void 0 ? 'smart-element-avatar-group' : _ref$testId;
-  if (!items.length) {
+    testId = _ref$testId === void 0 ? 'smart-element-avatar-group' : _ref$testId,
+    _ref$showNamePrefix = _ref.showNamePrefix,
+    showNamePrefix = _ref$showNamePrefix === void 0 ? false : _ref$showNamePrefix;
+  var intl = useIntl();
+  var data = useMemo(function () {
+    if (name && showNamePrefix) {
+      return items.map(function (person) {
+        return _objectSpread(_objectSpread({}, person), {}, {
+          name: getPersonNameWithPrefix(name, person.name, intl) || person.name
+        });
+      });
+    }
+    return items;
+  }, [name, items, showNamePrefix, intl]);
+  if (!data.length) {
     return null;
   }
   return jsx("span", {
@@ -51,7 +83,7 @@ var AvatarGroup = function AvatarGroup(_ref) {
     maxCount: maxCount,
     appearance: "stack",
     size: "small",
-    data: items,
+    data: data,
     testId: testId
   }));
 };

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

@@ -18,6 +18,12 @@ export var getFormattedMessage = function getFormattedMessage(message) {
     }));
   }
 };
+export var getFormattedMessageAsString = function getFormattedMessageAsString(intl, message, context) {
+  var formatMessage = intl.formatMessage;
+  return message ? formatMessage(message, {
+    context: context
+  }) : null;
+};
 var getIconDimensionStyles = function getIconDimensionStyles(value) {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: ", ";\n  min-height: ", ";\n  max-height: ", ";\n  width: ", ";\n  min-width: ", ";\n  max-width: ", ";\n"])), value, value, value, value, value, value);
 };

package/dist/esm/view/HoverCard/components/views/resolved/styled.js

@@ -5,5 +5,5 @@ import { separatorCss } from '../../../styled';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 var elementGap = '0.5rem';
 export var metadataBlockCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  gap: 0px;\n  /* primary element group */\n  [data-smart-element-group]:nth-of-type(1) {\n    flex-grow: 7;\n\n    // a separator between text-based element\n    ", "\n\n    /* horizontal spacing between elements in group */\n    > span {\n      margin-right: ", ";\n    }\n  }\n  /* secondary element group */\n  [data-smart-element-group]:nth-of-type(2) {\n    flex-grow: 3;\n    /* horizontal spacing between elements in group */\n    > span {\n      margin-left: ", ";\n    }\n  }\n  ", "\n"])), separatorCss, elementGap, elementGap, getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? "[data-smart-element-group] {\n       line-height: 1rem;\n    }" : "");
-export var footerBlockCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n"])), !getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? "padding-top: 0.25rem;" : "");
+export var footerBlockCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n"])), !getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? "padding-top: 0.25rem;" : "height: 1.5rem;");
 export var hiddenSnippetStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  visibility: hidden;\n  position: absolute;\n"])));

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

@@ -27,7 +27,7 @@ export var CARD_WIDTH_REM = 24;
 export var CARD_GAP_PX = 10;
 var blockGap = '0.5rem';
 var elementGap = '0.5rem';
-export var separatorCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  [data-separator] + [data-separator]:before {\n    margin-right: ", ";\n  }\n  ", "\n"])), elementGap, getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? " [data-smart-element-avatar-group] + [data-separator]:before {\n      content: '\u2022';\n      margin-right: ".concat(elementGap, ";\n    }") : "");
+export var separatorCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  [data-separator] + [data-separator]:before {\n    margin-right: ", ";\n  }\n"])), elementGap);
 export var HoverCardContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: none;\n  border-width: 0;\n  box-sizing: border-box;\n  width: ", "rem;\n  ", "\n\n  .", " {\n    display: none;\n  }\n"])), CARD_WIDTH_REM, !getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? "padding: 1rem;" : "", loadingPlaceholderClassName);
 export var titleBlockCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  gap: ", ";\n\n  ", "\n\n  // title and subtitle element group\n  [data-smart-element-group] {\n    // gap between title and subtitle\n    gap: 0.06rem;\n    display: flex;\n    /* subtitle element group */\n    > [data-smart-element-group] {\n      > span {\n        margin-right: ", ";\n      }\n    }\n  }\n\n  ", "\n"])), blockGap, separatorCss, elementGap, getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "[data-smart-element=\"Title\"] {\n          font-weight: 600;\n        }" : "");
 export var getTransitionStyles = function getTransitionStyles(snippetHeight) {

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

@@ -161,6 +161,19 @@ export var getSimulatedBetterMetadata = function getSimulatedBetterMetadata() {
           subtitle: []
         }
       });
+    case 'slack-object-provider':
+      return {
+        topMetadataBlock: {
+          primary: [ElementName.AuthorGroup, ElementName.SentOn],
+          secondary: [],
+          subtitle: []
+        },
+        bottomMetadataBlock: {
+          primary: [ElementName.ReactCount, ElementName.CommentCount],
+          secondary: [],
+          subtitle: []
+        }
+      };
     case 'google-object-provider':
     case 'figma-object-provider':
       return _objectSpread(_objectSpread({}, defaultMetadata), {}, {

package/dist/esm/view/LinkUrl/index.js

@@ -11,7 +11,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.16.1",
+  packageVersion: "26.18.0",
   componentName: 'linkUrl'
 };
 var Link = withLinkClickedEvent('a');

package/dist/types/view/BlockCard/views/flexible/styled.d.ts

@@ -1,3 +1,4 @@
 export declare const metadataBlockCss: import("@emotion/react").SerializedStyles;
 export declare const titleBlockCss: import("@emotion/react").SerializedStyles;
+export declare const footerBlockCss: import("@emotion/react").SerializedStyles;
 export declare const flexibleBlockCardStyle: import("@emotion/react").SerializedStyles;

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

@@ -182,6 +182,10 @@ export type AttachmentCount = {
  */
 export type AuthorGroup = {
     name: ElementName.AuthorGroup;
+    /**
+     * Shows a name prefix Created by in the Avatar tooltip.
+     */
+    showNamePrefix?: boolean;
 };
 /**
  * Represents the props available for an OwnedByGroup element.
@@ -189,6 +193,10 @@ export type AuthorGroup = {
  */
 export type OwnedByGroup = {
     name: ElementName.OwnedByGroup;
+    /**
+     * Shows a name prefix Owned by in the Avatar tooltip.
+     */
+    showNamePrefix?: boolean;
 };
 /**
  * Represents the props available for an AssignedToGroup element.
@@ -196,6 +204,10 @@ export type OwnedByGroup = {
  */
 export type AssignedToGroup = {
     name: ElementName.AssignedToGroup;
+    /**
+     * Shows a name prefix Assigned To in the Avatar tooltip.
+     */
+    showNamePrefix?: boolean;
 };
 /**
  * Represents the props available for an ChecklistProgress element.

package/dist/types/view/FlexibleCard/components/elements/avatar-group/types.d.ts

@@ -18,4 +18,8 @@ export type AvatarGroupProps = ElementProps & {
      * The maximum number of Avatars to show in the AvatarGroup
      */
     maxCount?: number;
+    /**
+     * Shows a name prefix in the Avatar tooltip (Created by, Assigned To, Owned by)
+     */
+    showNamePrefix?: boolean;
 };

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

@@ -5,8 +5,10 @@ import { SmartLinkSize } from '../../../constants';
 import { MessageProps } from './types';
 import { AnalyticsFacade } from '../../../state/analytics';
 import { PreviewActionData } from '../../../state/flexible-ui-context/types';
+import { IntlShape, MessageDescriptor } from 'react-intl-next';
 export declare const sizeToButtonSpacing: Record<SmartLinkSize, Spacing>;
 export declare const getFormattedMessage: (message?: MessageProps) => JSX.Element | undefined;
+export declare const getFormattedMessageAsString: (intl: IntlShape, message: MessageDescriptor, context?: string) => string | null;
 export declare const getIconSizeStyles: (width: string) => SerializedStyles;
 export declare const getIconWidth: (size?: SmartLinkSize) => string;
 export declare const getLinkLineHeight: (size: SmartLinkSize) => string;

package/dist/types-ts4.5/view/BlockCard/views/flexible/styled.d.ts

@@ -1,3 +1,4 @@
 export declare const metadataBlockCss: import("@emotion/react").SerializedStyles;
 export declare const titleBlockCss: import("@emotion/react").SerializedStyles;
+export declare const footerBlockCss: import("@emotion/react").SerializedStyles;
 export declare const flexibleBlockCardStyle: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/view/FlexibleCard/components/blocks/types.d.ts

@@ -182,6 +182,10 @@ export type AttachmentCount = {
  */
 export type AuthorGroup = {
     name: ElementName.AuthorGroup;
+    /**
+     * Shows a name prefix Created by in the Avatar tooltip.
+     */
+    showNamePrefix?: boolean;
 };
 /**
  * Represents the props available for an OwnedByGroup element.
@@ -189,6 +193,10 @@ export type AuthorGroup = {
  */
 export type OwnedByGroup = {
     name: ElementName.OwnedByGroup;
+    /**
+     * Shows a name prefix Owned by in the Avatar tooltip.
+     */
+    showNamePrefix?: boolean;
 };
 /**
  * Represents the props available for an AssignedToGroup element.
@@ -196,6 +204,10 @@ export type OwnedByGroup = {
  */
 export type AssignedToGroup = {
     name: ElementName.AssignedToGroup;
+    /**
+     * Shows a name prefix Assigned To in the Avatar tooltip.
+     */
+    showNamePrefix?: boolean;
 };
 /**
  * Represents the props available for an ChecklistProgress element.

package/dist/types-ts4.5/view/FlexibleCard/components/elements/avatar-group/types.d.ts

@@ -18,4 +18,8 @@ export type AvatarGroupProps = ElementProps & {
      * The maximum number of Avatars to show in the AvatarGroup
      */
     maxCount?: number;
+    /**
+     * Shows a name prefix in the Avatar tooltip (Created by, Assigned To, Owned by)
+     */
+    showNamePrefix?: boolean;
 };

package/dist/types-ts4.5/view/FlexibleCard/components/utils.d.ts

@@ -5,8 +5,10 @@ import { SmartLinkSize } from '../../../constants';
 import { MessageProps } from './types';
 import { AnalyticsFacade } from '../../../state/analytics';
 import { PreviewActionData } from '../../../state/flexible-ui-context/types';
+import { IntlShape, MessageDescriptor } from 'react-intl-next';
 export declare const sizeToButtonSpacing: Record<SmartLinkSize, Spacing>;
 export declare const getFormattedMessage: (message?: MessageProps) => JSX.Element | undefined;
+export declare const getFormattedMessageAsString: (intl: IntlShape, message: MessageDescriptor, context?: string) => string | null;
 export declare const getIconSizeStyles: (width: string) => SerializedStyles;
 export declare const getIconWidth: (size?: SmartLinkSize) => string;
 export declare const getLinkLineHeight: (size: SmartLinkSize) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "26.16.1",
+  "version": "26.18.0",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -48,7 +48,7 @@
     "@atlaskit/popup": "^1.9.0",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.16.0",
+    "@atlaskit/tokens": "^1.17.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@atlaskit/ufo": "^0.2.0",
     "@babel/runtime": "^7.0.0",

package/report.api.md

@@ -156,6 +156,7 @@ type AssignedTo = {
 // @public
 type AssignedToGroup = {
   name: ElementName.AssignedToGroup;
+  showNamePrefix?: boolean;
 };
 
 // @public
@@ -166,6 +167,7 @@ type AttachmentCount = {
 // @public
 type AuthorGroup = {
   name: ElementName.AuthorGroup;
+  showNamePrefix?: boolean;
 };
 
 // @public
@@ -738,6 +740,7 @@ type OwnedBy = {
 // @public
 type OwnedByGroup = {
   name: ElementName.OwnedByGroup;
+  showNamePrefix?: boolean;
 };
 
 // @public

package/tmp/api-report-tmp.d.ts

@@ -109,6 +109,7 @@ type AssignedTo = {
 // @public
 type AssignedToGroup = {
     name: ElementName.AssignedToGroup;
+    showNamePrefix?: boolean;
 };
 
 // @public
@@ -119,6 +120,7 @@ type AttachmentCount = {
 // @public
 type AuthorGroup = {
     name: ElementName.AuthorGroup;
+    showNamePrefix?: boolean;
 };
 
 // @public
@@ -590,6 +592,7 @@ type OwnedBy = {
 // @public
 type OwnedByGroup = {
     name: ElementName.OwnedByGroup;
+    showNamePrefix?: boolean;
 };
 
 // @public