@atlaskit/smart-card 26.16.1 → 26.17.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 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.17.0"
 };
 exports.context = context;
 var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {

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/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.17.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.17.0"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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/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.17.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.17.0"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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/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.17.0",
   componentName: 'linkUrl'
 };
 var Link = withLinkClickedEvent('a');

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/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.17.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