@atlaskit/smart-card 18.0.21 → 19.0.1

package/dist/cjs/state/actions/index.js

@@ -17,18 +17,16 @@ var _react = require("react");
 
 var _outboundAuthFlowClient = require("@atlaskit/outbound-auth-flow-client");
 
-var _helpers = require("./helpers");
+var _linkingCommon = require("@atlaskit/linking-common");
 
-var _helpers2 = require("../helpers");
+var _linkProvider = require("@atlaskit/link-provider");
 
-var _constants = require("./constants");
+var _helpers = require("../helpers");
 
-var _context3 = require("../context");
+var _constants = require("./constants");
 
 var measure = _interopRequireWildcard(require("../../utils/performance"));
 
-var _errors = require("../../client/errors");
-
 var _jsonld = require("../../utils/jsonld");
 
 var _analytics = require("../analytics");
@@ -38,7 +36,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 
 var useSmartCardActions = function useSmartCardActions(id, url, analytics) {
-  var _useSmartLinkContext = (0, _context3.useSmartLinkContext)(),
+  var _useSmartLinkContext = (0, _linkProvider.useSmartLinkContext)(),
       store = _useSmartLinkContext.store,
       connections = _useSmartLinkContext.connections,
       config = _useSmartLinkContext.config;
@@ -60,7 +58,7 @@ var useSmartCardActions = function useSmartCardActions(id, url, analytics) {
       // If there's no previous data in the store for this URL, then bail
       // out and let the editor handle fallbacks (returns to a blue link).
       if (!hasData && status !== 'resolved') {
-        dispatch((0, _helpers.cardAction)(_constants.ACTION_ERROR, {
+        dispatch((0, _linkingCommon.cardAction)(_linkingCommon.ACTION_ERROR, {
           url: url
         }, details, error));
         throw error;
@@ -69,25 +67,25 @@ var useSmartCardActions = function useSmartCardActions(id, url, analytics) {
 
 
       if (hasData) {
-        dispatch((0, _helpers.cardAction)(_constants.ACTION_RESOLVED, {
+        dispatch((0, _linkingCommon.cardAction)(_linkingCommon.ACTION_RESOLVED, {
           url: url
         }, details));
       } // Handle AuthErrors (user did not have access to resource) -
       // Missing AAID in ASAP claims, or missing UserContext, or 403 from downstream
 
     } else if (error.kind === 'auth') {
-      dispatch((0, _helpers.cardAction)(_constants.ACTION_RESOLVED, {
+      dispatch((0, _linkingCommon.cardAction)(_linkingCommon.ACTION_RESOLVED, {
         url: url
       }, (0, _jsonld.getUnauthorizedJsonLd)()));
     } else {
       if (error.kind === 'fallback') {
         // Fallback to blue link with smart link formatting. Not part of reliability.
-        dispatch((0, _helpers.cardAction)(_constants.ACTION_ERROR_FALLBACK, {
+        dispatch((0, _linkingCommon.cardAction)(_linkingCommon.ACTION_ERROR_FALLBACK, {
           url: url
         }, undefined, error));
       } else {
         // Fallback to blue link with smart link formatting. Part of reliability.
-        dispatch((0, _helpers.cardAction)(_constants.ACTION_ERROR, {
+        dispatch((0, _linkingCommon.cardAction)(_linkingCommon.ACTION_ERROR, {
           url: url
         }, undefined, error));
       }
@@ -95,22 +93,22 @@ var useSmartCardActions = function useSmartCardActions(id, url, analytics) {
   }, [hasData, status, dispatch, details]);
   var handleResolvedLinkResponse = (0, _react.useCallback)(function (resourceUrl, response) {
     var hostname = new URL(resourceUrl).hostname;
-    var nextStatus = response ? (0, _helpers2.getStatus)(response) : 'fatal'; // If we require authorization & do not have an authFlow available,
+    var nextStatus = response ? (0, _helpers.getStatus)(response) : 'fatal'; // If we require authorization & do not have an authFlow available,
     // throw an error and render as a normal blue link.
 
     if ((nextStatus === 'unauthorized' || nextStatus === 'forbidden') && !hasAuthFlowSupported) {
-      handleResolvedLinkError(resourceUrl, new _errors.APIError('fallback', hostname, _constants.ERROR_MESSAGE_OAUTH));
+      handleResolvedLinkError(resourceUrl, new _linkingCommon.APIError('fallback', hostname, _constants.ERROR_MESSAGE_OAUTH));
       return;
     } // Handle any other errors
 
 
     if (nextStatus === 'fatal') {
-      handleResolvedLinkError(resourceUrl, new _errors.APIError('fatal', hostname, _constants.ERROR_MESSAGE_FATAL));
+      handleResolvedLinkError(resourceUrl, new _linkingCommon.APIError('fatal', hostname, _constants.ERROR_MESSAGE_FATAL));
       return;
     } // Dispatch Analytics and resolved card action - including unauthorized states.
 
 
-    dispatch((0, _helpers.cardAction)(_constants.ACTION_RESOLVED, {
+    dispatch((0, _linkingCommon.cardAction)(_linkingCommon.ACTION_RESOLVED, {
       url: resourceUrl
     }, response));
   }, [dispatch, handleResolvedLinkError, hasAuthFlowSupported]);
@@ -150,7 +148,7 @@ var useSmartCardActions = function useSmartCardActions(id, url, analytics) {
   })), [url, hasData, connections.client, handleResolvedLinkResponse, handleResolvedLinkError, id]);
   var register = (0, _react.useCallback)(function () {
     if (!details) {
-      dispatch((0, _helpers.cardAction)(_constants.ACTION_PENDING, {
+      dispatch((0, _linkingCommon.cardAction)(_linkingCommon.ACTION_PENDING, {
         url: url
       }));
     }
@@ -158,10 +156,10 @@ var useSmartCardActions = function useSmartCardActions(id, url, analytics) {
     return resolve();
   }, [url, resolve, details, dispatch]);
   var reload = (0, _react.useCallback)(function () {
-    var definitionId = (0, _helpers2.getDefinitionId)(details);
+    var definitionId = (0, _helpers.getDefinitionId)(details);
 
     if (definitionId) {
-      (0, _helpers2.getByDefinitionId)(definitionId, getState()).map(function (url) {
+      (0, _helpers.getByDefinitionId)(definitionId, getState()).map(function (url) {
         return resolve(url, true);
       });
     } else {
@@ -169,9 +167,9 @@ var useSmartCardActions = function useSmartCardActions(id, url, analytics) {
     }
   }, [url, details, getState, resolve]);
   var authorize = (0, _react.useCallback)(function (appearance) {
-    var definitionId = (0, _helpers2.getDefinitionId)(details);
-    var extensionKey = (0, _helpers2.getExtensionKey)(details);
-    var services = (0, _helpers2.getServices)(details); // When authentication is triggered, let GAS know!
+    var definitionId = (0, _helpers.getDefinitionId)(details);
+    var extensionKey = (0, _helpers.getExtensionKey)(details);
+    var services = (0, _helpers.getServices)(details); // When authentication is triggered, let GAS know!
 
     if (status === 'unauthorized') {
       analytics.ui.authEvent(appearance, definitionId, extensionKey);

package/dist/cjs/state/analytics/useSmartLinkAnalytics.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useSmartLinkAnalytics = void 0;
 
-var _analytics = require("../../utils/analytics");
-
 var _react = require("react");
 
+var _analytics = require("../../utils/analytics");
+
 var _ufoExperiences = require("./ufoExperiences");
 
 var useSmartLinkAnalytics = function useSmartLinkAnalytics(dispatchAnalytics) {

package/dist/cjs/state/config/index.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useSmartLinkConfig = void 0;
 
-var _context = require("../context");
+var _linkProvider = require("@atlaskit/link-provider");
 
 var useSmartLinkConfig = function useSmartLinkConfig() {
-  var context = (0, _context.useSmartLinkContext)();
+  var context = (0, _linkProvider.useSmartLinkContext)();
 
   if (context) {
     return context.config;

package/dist/cjs/state/helpers.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isVisible = exports.isFinalState = exports.isAccessible = exports.hasResolved = exports.getUrl = exports.getStatus = exports.getServices = exports.getResourceType = exports.getExtensionKey = exports.getDefinitionId = exports.getClickUrl = exports.getByDefinitionId = void 0;
+exports.isVisible = exports.isFinalState = exports.isAccessible = exports.hasResolved = exports.getStatus = exports.getServices = exports.getResourceType = exports.getExtensionKey = exports.getDefinitionId = exports.getClickUrl = exports.getByDefinitionId = void 0;
 
 var _extractVisitUrl = require("../extractors/common/primitives/extractVisitUrl");
 
@@ -17,14 +17,6 @@ var getByDefinitionId = function getByDefinitionId(definitionId, store) {
 
 exports.getByDefinitionId = getByDefinitionId;
 
-var getUrl = function getUrl(store, url) {
-  return store.getState()[url] || {
-    status: 'pending'
-  };
-};
-
-exports.getUrl = getUrl;
-
 var getClickUrl = function getClickUrl(url, jsonLd) {
   if (jsonLd && jsonLd.data) {
     var visitUrl = (0, _extractVisitUrl.extractVisitUrl)(jsonLd.data);

package/dist/cjs/state/hooks/usePrefetch.js

@@ -13,10 +13,10 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 
 var _react = require("react");
 
-var _context2 = require("../context");
+var _linkProvider = require("@atlaskit/link-provider");
 
 function usePrefetch(url) {
-  var _useSmartLinkContext = (0, _context2.useSmartLinkContext)(),
+  var _useSmartLinkContext = (0, _linkProvider.useSmartLinkContext)(),
       store = _useSmartLinkContext.store,
       prefetchStore = _useSmartLinkContext.prefetchStore,
       connections = _useSmartLinkContext.connections;

package/dist/cjs/state/index.js

@@ -6,13 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "SmartCardContext", {
   enumerable: true,
   get: function get() {
-    return _context.SmartCardContext;
+    return _linkProvider.SmartCardContext;
   }
 });
 Object.defineProperty(exports, "SmartCardProvider", {
   enumerable: true,
   get: function get() {
-    return _context.SmartCardProvider;
+    return _linkProvider.SmartCardProvider;
   }
 });
 Object.defineProperty(exports, "usePrefetch", {
@@ -30,10 +30,10 @@ Object.defineProperty(exports, "useSmartLink", {
 Object.defineProperty(exports, "useSmartLinkContext", {
   enumerable: true,
   get: function get() {
-    return _context.useSmartLinkContext;
+    return _linkProvider.useSmartLinkContext;
   }
 });
 
-var _context = require("./context");
+var _linkProvider = require("@atlaskit/link-provider");
 
 var _hooks = require("./hooks");

package/dist/cjs/state/renderers/index.js

@@ -7,10 +7,10 @@ exports.useSmartLinkRenderers = void 0;
 
 var _react = require("react");
 
-var _context = require("../context");
+var _linkProvider = require("@atlaskit/link-provider");
 
 var useSmartLinkRenderers = function useSmartLinkRenderers() {
-  var context = (0, _context.useSmartLinkContext)();
+  var context = (0, _linkProvider.useSmartLinkContext)();
   var renderers = context === null || context === void 0 ? void 0 : context.renderers;
   renderers = (0, _react.useMemo)(function () {
     return renderers;

package/dist/cjs/state/store/index.js

@@ -11,16 +11,16 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = require("react");
 
-var _context = require("../context");
+var _linkProvider = require("@atlaskit/link-provider");
 
-var _helpers = require("../helpers");
+var _linkingCommon = require("@atlaskit/linking-common");
 
 function useSmartCardState(url) {
-  var _useSmartLinkContext = (0, _context.useSmartLinkContext)(),
+  var _useSmartLinkContext = (0, _linkProvider.useSmartLinkContext)(),
       store = _useSmartLinkContext.store; // Initially, card state should be pending and 'empty'.
 
 
-  var _useState = (0, _react.useState)((0, _helpers.getUrl)(store, url)),
+  var _useState = (0, _react.useState)((0, _linkingCommon.getUrl)(store, url)),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       state = _useState2[0],
       setState = _useState2[1]; // Selector for initial and subsequent states.
@@ -28,7 +28,7 @@ function useSmartCardState(url) {
 
   (0, _react.useEffect)(function () {
     var unsubscribe = store.subscribe(function () {
-      setState((0, _helpers.getUrl)(store, url));
+      setState((0, _linkingCommon.getUrl)(store, url));
     });
     return function () {
       return unsubscribe();

package/dist/cjs/utils/mocks.js

@@ -21,7 +21,7 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _client = _interopRequireDefault(require("../client"));
+var _linkProvider = require("@atlaskit/link-provider");
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
@@ -245,7 +245,7 @@ var fakeFactory = function fakeFactory(implementation, implementationPost, imple
       }()
     }]);
     return CustomClient;
-  }(_client.default);
+  }(_linkProvider.CardClient);
 };
 
 exports.fakeFactory = fakeFactory;

package/dist/cjs/utils/test-utils.js

@@ -11,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _react = _interopRequireDefault(require("react"));
 
-var _client = _interopRequireDefault(require("../client"));
+var _linkProvider = require("@atlaskit/link-provider");
 
 var _state = require("../state");
 
@@ -30,7 +30,7 @@ exports.renderHook = renderHook;
 
 var renderSmartLinkHook = function renderSmartLinkHook(callback, providerProps) {
   return /*#__PURE__*/_react.default.createElement(_state.SmartCardProvider, (0, _extends2.default)({
-    client: new _client.default()
+    client: new _linkProvider.CardClient()
   }, providerProps), /*#__PURE__*/_react.default.createElement(Hook, {
     callback: callback
   }), ";");

package/dist/cjs/version.json

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

package/dist/cjs/view/FlexibleCard/components/actions/action/index.js

@@ -75,8 +75,8 @@ var ActionIcon = function ActionIcon(_ref) {
 
 var sizeToSpacing = (_sizeToSpacing = {}, (0, _defineProperty2.default)(_sizeToSpacing, _constants.SmartLinkSize.Small, 'none'), (0, _defineProperty2.default)(_sizeToSpacing, _constants.SmartLinkSize.Medium, 'compact'), (0, _defineProperty2.default)(_sizeToSpacing, _constants.SmartLinkSize.Large, 'compact'), (0, _defineProperty2.default)(_sizeToSpacing, _constants.SmartLinkSize.XLarge, 'default'), _sizeToSpacing);
 /**
- * An action that can be triggered with an on click.
- * @public
+ * A base action that can be triggered with an on click.
+ * @internal
  * @param {ActionProps} ActionProps - The props necessary for the Action.
  * @see DeleteAction
  * @see EditAction

package/dist/cjs/view/FlexibleCard/components/blocks/action-group/index.js

@@ -39,6 +39,7 @@ var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTem
 /**
  * Creates a group of Action components. Accepts an array of Actions, in addition to some styling
  * preferences.
+ * @internal
  * @param {ActionGroupProps} ActionGroupProps
  * @see Action
  */

package/dist/cjs/view/FlexibleCard/components/blocks/block/index.js

@@ -23,8 +23,9 @@ var getBlockStyles = function getBlockStyles(direction, size) {
   return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  justify-content: flex-start;\n  [data-separator] + [data-separator]:before {\n    content: '\u2022';\n    margin-right: ", "rem;\n  }\n"])), (0, _utils.getBaseStyles)(direction, size), (0, _utils.getGapSize)(size));
 };
 /**
- * A block represents a collection of elements and actions that are arranged in a row.
- * All elements and actions should be contained within a Block.
+ * A block represents a collection of elements and actions that are arranged
+ * in a row. All elements and actions should be contained within a Block.
+ * @internal
  * @param {ActionGroupProps} ActionGroupProps
  * @see Action
  */

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

@@ -36,6 +36,7 @@ var getElementGroupStyles = function getElementGroupStyles(direction, size, alig
 /**
  * Creates a group of Action components. Accepts an array of Actions, in addition to some styling
  * preferences.
+ * @internal
  * @param {ActionGroupProps} ActionGroupProps
  * @see Action
  */

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

@@ -24,6 +24,7 @@ var _actionGroup = _interopRequireDefault(require("../action-group"));
 /**
  * Represents a FooterBlock, designed to contain elements and actions that should appear
  * at the bottom of a link card.
+ * @public
  * @param {FooterBlockProps} FooterBlockProps
  * @see Block
  */

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

@@ -77,6 +77,7 @@ var getMaxLines = function getMaxLines(maxLines) {
 /**
  * Represents a MetadataBlock, designed to contain groups of metadata in the form of elements.
  * Accepts an array of elements to be shown either primary (left hand side) or secondary (right hand side).
+ * @public
  * @param {MetadataBlockProps} MetadataBlockProps
  * @see Block
  */

package/dist/cjs/view/FlexibleCard/components/blocks/preview-block/index.js

@@ -23,6 +23,7 @@ var _excluded = ["status", "testId"];
 
 /**
  * Represents a PreviewBlock, which typically contains media or other large format content.
+ * @public
  * @param {PreviewBlock} PreviewBlock
  * @see Block
  */

package/dist/cjs/view/FlexibleCard/components/blocks/snippet-block/index.js

@@ -27,6 +27,7 @@ var MAXIMUM_MAX_LINES = 3;
 var MINIMUM_MAX_LINES = 1;
 /**
  * Represents a SnippetBlock, which is used to display longer form text content, like descriptions.
+ * @public
  * @param {SnippetBlock} SnippetBlock
  * @see Block
  */

package/dist/cjs/view/FlexibleCard/components/blocks/title-block/index.js

@@ -66,10 +66,11 @@ var getTitleBlockViewComponent = function getTitleBlockViewComponent(status) {
   }
 };
 /**
- * Represents a TitleBlock, which is the foundation of all Flexible Smart Links.
+ * Represents a TitleBlock, which is the foundation of Flexible UI.
  * This contains an icon, the link, and any associated metadata and actions in one block.
  * The TitleBlock will also render differently given the state of the smart link.
  * This can be found in the corresponding Resolving, Resolved and Errored views.
+ * @public
  * @param {TitleBlockProps} TitleBlockProps
  * @see Block
  * @see TitleBlockResolvingView

package/dist/cjs/view/FlexibleCard/components/container/index.js

@@ -79,12 +79,21 @@ var renderChildren = function renderChildren(children, containerSize, containerT
   return _react.default.Children.map(children, function (child) {
     if ( /*#__PURE__*/_react.default.isValidElement(child) && (0, _flexible.isFlexibleUiBlock)(child)) {
       var blockSize = child.props.size;
+      var size = blockSize || containerSize;
+
+      if ((0, _flexible.isFlexibleUiTitleBlock)(child)) {
+        return /*#__PURE__*/_react.default.cloneElement(child, {
+          onClick: onClick,
+          retry: retry,
+          size: size,
+          status: status,
+          theme: containerTheme
+        });
+      }
+
       return /*#__PURE__*/_react.default.cloneElement(child, {
-        onClick: onClick,
-        retry: (0, _flexible.isFlexibleUiTitleBlock)(child) ? retry : undefined,
-        size: blockSize || containerSize,
-        status: status,
-        theme: containerTheme
+        size: size,
+        status: status
       });
     }
   });
@@ -118,7 +127,11 @@ var getLayeredLink = function getLayeredLink(testId, context, children) {
   });
 };
 /**
- * This represents the container in which all Flexible UI Smart Links are rendered.
+ * A container is a hidden component that build the Flexible Smart Link.
+ * All of the Flexible UI components are wrapped inside the container.
+ * It inherits the ui props from Card component and applies the custom styling
+ * accordingly.
+ * @internal
  * @see Block
  */
 

package/dist/cjs/view/FlexibleCard/components/container/layered-link/index.js

@@ -16,6 +16,11 @@ var _core = require("@emotion/core");
 var _templateObject;
 
 var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  // Stretch the invisible link over the whole of the post.\n  // Hide the link\u2019s text.\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow-x: hidden;\n  text-indent: 100%;\n  white-space: nowrap;\n\n  // Needs a heightened specificity to trump other anchor.\n  // Stack it under all other links in the post text.\n  a&.layered-link {\n    position: absolute;\n    z-index: 0;\n  }\n\n  // When hovering over the layered link, any hidden action buttons inside\n  // the Container should become visible.\n  // As actions resides inside blocks and layered link is expected to be\n  // on the same level of blocks. That makes the blocks, e.g. TitleBlock,\n  // its sibling. Using general sibling combinator here to apply styling to\n  // all the siblings of layered link.\n  // The general sibling combinator (~) separates two selectors and matches all\n  // iterations of the second element, that are following the first element\n  // (though not necessarily immediately), and are children of the same parent\n  // element.\n  &:hover ~ * {\n    .actions-button-group {\n      opacity: 1;\n    }\n  }\n"])));
+/**
+ * An anchor component to cover the entire container creating a clickable area.
+ * @internal
+ * @see `clickableContainer`
+ */
 
 var LayeredLink = function LayeredLink(_ref) {
   var target = _ref.target,

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

@@ -35,8 +35,8 @@ var getStyles = function getStyles(size) {
   }
 };
 /**
- * An element that displays a group of avatars.
- * @public
+ * A base element that displays a group of avatars.
+ * @internal
  * @param {AvatarGroupProps} AvatarGroupProps - The props necessary for the AvatarGroup.
  * @see AuthorGroup
  * @see CollaboratorGroup

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

@@ -65,8 +65,8 @@ var renderImageIcon = function renderImageIcon(url, testId) {
   }
 };
 /**
- * An element that displays some text with an associated icon.
- * @public
+ * A base element that displays some text with an associated icon.
+ * @internal
  * @param {BadgeProps} BadgeProps - The props necessary for the Badge.
  * @see CommentCount
  * @see ViewCount

package/dist/cjs/view/FlexibleCard/components/elements/date-time/index.js

@@ -33,8 +33,8 @@ var typeToDescriptorMap = {
   modified: _messages.messages.modified_on
 };
 /**
- * An element that displays an ISO Timestamp in text.
- * @public
+ * A base element that displays an ISO Timestamp in text.
+ * @internal
  * @param {DateTimeProps} DateTimeProps - The props necessary for the DateTime element.
  * @see CreatedOn
  * @see ModifiedOn

package/dist/cjs/view/FlexibleCard/components/elements/icon/index.js

@@ -77,8 +77,8 @@ var renderImageIcon = function renderImageIcon(defaultIcon, icon, url, testId) {
   }
 };
 /**
- * An element that displays an Icon or favicon.
- * @public
+ * A base element that displays an Icon or favicon.
+ * @internal
  * @param {IconProps} IconProps - The props necessary for the Icon element.
  * @see LinkIcon
  */

package/dist/cjs/view/FlexibleCard/components/elements/index.js

@@ -14,12 +14,12 @@ var _constants = require("../../../../constants");
 // createElement and renderElementItems
 
 /**
- * Creates an AvatarGroup element using the data from AuthorGroup in the Flexible UI Context.
+ * An AvatarGroup element using the data from AuthorGroup in the Flexible UI Context.
  * @see AvatarGroup
  */
 var AuthorGroup = (0, _utils.createElement)(_constants.ElementName.AuthorGroup);
 /**
- * Creates an AvatarGroup element using the data from CollaboratorGroup in the Flexible UI Context.
+ * An AvatarGroup element using the data from CollaboratorGroup in the Flexible UI Context.
  * @see AvatarGroup
  */
 

package/dist/cjs/view/FlexibleCard/components/elements/link/index.js

@@ -63,9 +63,9 @@ var getMaxLines = function getMaxLines(maxLines) {
   return maxLines;
 };
 /**
- * An element that represent.
- * @public
- * @param {LinkProps} LinkProps - The props necessary for the Icon element.
+ * A base element that represent an anchor.
+ * @internal
+ * @param {LinkProps} LinkProps - The props necessary for the Link element.
  * @see LinkIcon
  */
 

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

@@ -19,8 +19,8 @@ var _templateObject;
 
 var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  line-height: inherit;\n"])));
 /**
- * An element that displays a Lozenge.
- * @public
+ * A base element that displays a Lozenge.
+ * @internal
  * @param {LozengeProps} LozengeProps - The props necessary for the Lozenge element.
  * @see State
  */

package/dist/cjs/view/FlexibleCard/components/elements/media/index.js

@@ -29,8 +29,8 @@ var _templateObject;
  */
 var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  aspect-ratio: 16 / 9;\n  display: flex;\n  width: 100%;\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"])));
 /**
- * An element that displays a Media.
- * @public
+ * A base element that displays a Media.
+ * @internal
  * @param {MediaProps} MediaProps - The props necessary for the Media element.
  * @see Preview
  */

package/dist/cjs/view/FlexibleCard/components/elements/text/index.js

@@ -23,8 +23,8 @@ var getStyles = function getStyles(maxLines) {
   return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  ", "\n"])), _token.tokens.text, (0, _utils.getTruncateStyles)(maxLines));
 };
 /**
- * An element that displays some Text.
- * @public
+ * A base element that displays some Text.
+ * @internal
  * @param {TextProps} TextProps - The props necessary for the Text element.
  * @see Title
  */

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

@@ -41,6 +41,10 @@ var _analytics2 = require("../../state/analytics");
 
 var _helpers = require("../../state/helpers");
 
+var _extractMetadata = require("../../extractors/hover/extractMetadata");
+
+var _utils = require("./utils");
+
 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; }
@@ -134,7 +138,9 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
     };
   }, [url, definitionId, extensionKey, analytics]);
 
-  var cardComponent = function cardComponent() {
+  var CardComponent = function CardComponent() {
+    //TODO: EDM-3224 deleted simulated and use real JsonLd
+    var metadataElements = (0, _extractMetadata.extractMetadata)((0, _utils.getSimulatedMetadata)(extensionKey));
     return (0, _core.jsx)("div", {
       onMouseEnter: initShowCard,
       onMouseLeave: initHideCard,
@@ -148,6 +154,9 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
       }
     }, (0, _core.jsx)(_blocks.TitleBlock, {
       actions: [openAction]
+    }), (0, _core.jsx)(_blocks.MetadataBlock, {
+      primary: metadataElements.primary,
+      secondary: metadataElements.secondary
     }), (0, _core.jsx)(_blocks.SnippetBlock, null), (0, _core.jsx)(_blocks.FooterBlock, {
       actions: smartlinkActions
     })));
@@ -161,7 +170,7 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
     isOpen: isOpen,
     onClose: onClose,
     placement: "bottom-start",
-    content: cardComponent,
+    content: CardComponent,
     trigger: function trigger(triggerProps) {
       return (0, _core.jsx)("span", (0, _extends2.default)({}, triggerProps, {
         onMouseEnter: initShowCard,