@atlaskit/smart-card 19.1.24 → 19.1.27

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/smart-card
 
+## 19.1.27
+
+### Patch Changes
+
+- [`98d3f88e428`](https://bitbucket.org/atlassian/atlassian-frontend/commits/98d3f88e428) - This PR adds external element typings for Flexible UI metadata.
+  This means code completion will now be available when an element has a prop that can be overridden.
+  As of this PR, these are the `CreatedOn` and `ModifiedOn` elements, which now accept some `text` which will override the existing text.
+
+  This PR also exposes the overrideCss prop, allowing integrators to supply any CSS for their elements.
+
+## 19.1.26
+
+### Patch Changes
+
+- [`00c79cca5b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/00c79cca5b0) - hover card white space changes
+
+## 19.1.25
+
+### Patch Changes
+
+- [`de8de71a806`](https://bitbucket.org/atlassian/atlassian-frontend/commits/de8de71a806) - Hover Preview: Fix Hover Preview analytics event details get applied to other Smart Links analytics
+- [`ae023956743`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ae023956743) - Smart Links Analytics types are exported to allow their usage from outside of the package
+
 ## 19.1.24
 
 ### Patch Changes

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

@@ -92,7 +92,8 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchAnalytic
         var location = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : defaultLocation;
         var destinationProduct = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : extractedProduct;
         var destinationSubproduct = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : extractedSubproduct;
-        return dispatchAnalytics((0, _analytics.uiCardClickedEvent)(id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct, destinationSubproduct));
+        var actionSubjectId = arguments.length > 9 ? arguments[9] : undefined;
+        return dispatchAnalytics((0, _analytics.uiCardClickedEvent)(id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct, destinationSubproduct, actionSubjectId));
       },
 
       /**

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

@@ -235,11 +235,11 @@ var uiAuthAlternateAccountEvent = function uiAuthAlternateAccountEvent(display,
 
 exports.uiAuthAlternateAccountEvent = uiAuthAlternateAccountEvent;
 
-var uiCardClickedEvent = function uiCardClickedEvent(id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct, destinationSubproduct) {
+var uiCardClickedEvent = function uiCardClickedEvent(id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct, destinationSubproduct, actionSubjectId) {
   return {
     action: 'clicked',
     actionSubject: 'smartLink',
-    actionSubjectId: 'titleGoToLink',
+    actionSubjectId: actionSubjectId,
     eventType: 'ui',
     attributes: _objectSpread(_objectSpread({}, context), {}, {
       id: id,

package/dist/cjs/version.json

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

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

@@ -128,11 +128,12 @@ var renderElementItems = function renderElementItems() {
     var name = curr.name,
         props = (0, _objectWithoutProperties2.default)(curr, _excluded);
     var Element = Elements[name];
+    var typedProps = props;
 
     if (Element && isElementDisplayValid(name, display)) {
       var element = /*#__PURE__*/_react.default.createElement(Element, (0, _extends2.default)({
         key: idx
-      }, props));
+      }, typedProps));
 
       if (!isElementNull(element)) {
         return [].concat((0, _toConsumableArray2.default)(acc), [element]);

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

@@ -33,45 +33,24 @@ var CollaboratorGroup = (0, _utils.createElement)(_constants.ElementName.Collabo
 exports.CollaboratorGroup = CollaboratorGroup;
 var CommentCount = (0, _utils.createElement)(_constants.ElementName.CommentCount);
 /**
- * Creates a ViewCount Badge element using the data from ViewCount in the Flexible UI Context.
- * @see Badge
+ * Creates a CreatedOn DateTime element using the data from CreatedOn in the Flexible UI Context.
+ * @see DateTime
  */
 
 exports.CommentCount = CommentCount;
-var ViewCount = (0, _utils.createElement)(_constants.ElementName.ViewCount);
-/**
- * Creates a ReactCount Badge element using the data from ReactCount in the Flexible UI Context.
- * @see Badge
- */
-
-exports.ViewCount = ViewCount;
-var ReactCount = (0, _utils.createElement)(_constants.ElementName.ReactCount);
-/**
- * Creates a VoteCount Badge element using the data from VoteCount in the Flexible UI Context.
- * @see Badge
- */
-
-exports.ReactCount = ReactCount;
-var VoteCount = (0, _utils.createElement)(_constants.ElementName.VoteCount);
+var CreatedOn = (0, _utils.createElement)(_constants.ElementName.CreatedOn);
 /**
  * Creates a CreatedBy text element using the data from CreatedBy in the Flexible UI Context.
  * @see Text
  */
 
-exports.VoteCount = VoteCount;
+exports.CreatedOn = CreatedOn;
 var CreatedBy = (0, _utils.createElement)(_constants.ElementName.CreatedBy);
-/**
- * Creates a CreatedOn DateTime element using the data from CreatedOn in the Flexible UI Context.
- * @see DateTime
- */
-
-exports.CreatedBy = CreatedBy;
-var CreatedOn = (0, _utils.createElement)(_constants.ElementName.CreatedOn);
 /**
  * Creates an element that contains Last Commit hash
  */
 
-exports.CreatedOn = CreatedOn;
+exports.CreatedBy = CreatedBy;
 var LatestCommit = (0, _utils.createElement)(_constants.ElementName.LatestCommit);
 /**
  * Creates a LinkIcon Icon element using the data from LinkIcon in the Flexible UI Context.
@@ -115,12 +94,26 @@ var Priority = (0, _utils.createElement)(_constants.ElementName.Priority);
 
 exports.Priority = Priority;
 var ProgrammingLanguage = (0, _utils.createElement)(_constants.ElementName.ProgrammingLanguage);
+/**
+ * Creates a Provider Badge element using the data from Provider in the Flexible UI Context.
+ * @see Badge
+ */
+
+exports.ProgrammingLanguage = ProgrammingLanguage;
+var Provider = (0, _utils.createElement)(_constants.ElementName.Provider);
+/**
+ * Creates a ReactCount Badge element using the data from ReactCount in the Flexible UI Context.
+ * @see Badge
+ */
+
+exports.Provider = Provider;
+var ReactCount = (0, _utils.createElement)(_constants.ElementName.ReactCount);
 /**
  * Creates a Snippet element using the data from Snippet in the Flexible UI Context.
  * @see Text
  */
 
-exports.ProgrammingLanguage = ProgrammingLanguage;
+exports.ReactCount = ReactCount;
 var Snippet = (0, _utils.createElement)(_constants.ElementName.Snippet);
 /**
  * Creates a State Lozenge element using the data from State in the Flexible UI Context.
@@ -145,10 +138,17 @@ var SubscriberCount = (0, _utils.createElement)(_constants.ElementName.Subscribe
 exports.SubscriberCount = SubscriberCount;
 var Title = (0, _utils.createElement)(_constants.ElementName.Title);
 /**
- * Creates a Provider Badge element using the data from Provider in the Flexible UI Context.
+ * Creates a ViewCount Badge element using the data from ViewCount in the Flexible UI Context.
  * @see Badge
  */
 
 exports.Title = Title;
-var Provider = (0, _utils.createElement)(_constants.ElementName.Provider);
-exports.Provider = Provider;
+var ViewCount = (0, _utils.createElement)(_constants.ElementName.ViewCount);
+/**
+ * Creates a VoteCount Badge element using the data from VoteCount in the Flexible UI Context.
+ * @see Badge
+ */
+
+exports.ViewCount = ViewCount;
+var VoteCount = (0, _utils.createElement)(_constants.ElementName.VoteCount);
+exports.VoteCount = VoteCount;

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

@@ -29,15 +29,18 @@ var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"))
 
 var _helpers = require("../../../state/helpers");
 
+var _styled = require("../styled");
+
 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; }
 
 var flexibleUiOptions = {
   hideElevation: true,
-  size: _constants.SmartLinkSize.Large,
+  size: _constants.SmartLinkSize.Medium,
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  theme: _constants.SmartLinkTheme.Black
+  theme: _constants.SmartLinkTheme.Black,
+  hidePadding: true
 };
 
 var getOpenAction = function getOpenAction(url, analytics) {
@@ -89,7 +92,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
   }, [cardState.details]);
   var onClick = (0, _react.useCallback)(function (event) {
     var isModifierKeyPressed = (0, _utils2.isSpecialEvent)(event);
-    analytics.ui.cardClickedEvent(undefined, _utils.HOVER_CARD_ANALYTICS_DISPLAY, cardState.status, undefined, undefined, isModifierKeyPressed);
+    analytics.ui.cardClickedEvent(undefined, _utils.HOVER_CARD_ANALYTICS_DISPLAY, cardState.status, undefined, undefined, isModifierKeyPressed, undefined, undefined, undefined, 'titleGoToLink');
   }, [cardState.status, analytics.ui]);
   var titleActions = (0, _react.useMemo)(function () {
     return [getOpenAction(url, analytics)];
@@ -112,13 +115,20 @@ var HoverCardContent = function HoverCardContent(_ref) {
     ui: flexibleUiOptions,
     url: url
   }, /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, {
-    actions: titleActions
+    actions: titleActions,
+    overrideCss: _styled.titleBlockCss,
+    size: _constants.SmartLinkSize.Large,
+    position: _constants.SmartLinkPosition.Center
   }), /*#__PURE__*/_react.default.createElement(_blocks.MetadataBlock, {
     primary: primary,
     secondary: secondary,
-    size: _constants.SmartLinkSize.Small
+    size: _constants.SmartLinkSize.Large,
+    overrideCss: _styled.metadataBlockCss,
+    maxLines: 1
   }), body, /*#__PURE__*/_react.default.createElement(_blocks.FooterBlock, {
-    actions: footerActions
+    actions: footerActions,
+    size: _constants.SmartLinkSize.Large,
+    overrideCss: _styled.footerBlockCss
   }));
 };
 

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.HoverCardContainer = void 0;
+exports.titleBlockCss = exports.metadataBlockCss = exports.footerBlockCss = exports.HoverCardContainer = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -13,7 +13,13 @@ var _core = require("@emotion/core");
 
 var _index = require("../../index");
 
-var _templateObject;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-var HoverCardContainer = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: none;\n  border-width: 0;\n  max-width: 350px;\n  padding: 0;\n\n  .", " {\n    display: none;\n  }\n"])), _index.loadingPlaceholderClassName);
-exports.HoverCardContainer = HoverCardContainer;
+var HoverCardContainer = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: none;\n  border-width: 0;\n  box-sizing: border-box;\n  width: 24rem;\n  padding: 1rem;\n\n  .", " {\n    display: none;\n  }\n"])), _index.loadingPlaceholderClassName);
+exports.HoverCardContainer = HoverCardContainer;
+var titleBlockCss = (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  gap: 0.5rem;\n"])));
+exports.titleBlockCss = titleBlockCss;
+var metadataBlockCss = (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  gap: 0px;\n\n  /* primary element group */\n  [data-smart-element-group]:first-of-type {\n    flex-grow: 7;\n    /* horizontal spacing between elements in group */\n    > span {\n      margin-right: 0.5rem;\n    }\n  }\n  /* secondary element group */\n  [data-smart-element-group]:last-of-type {\n    flex-grow: 3;\n    /* horizontal spacing between elements in group */\n    > span {\n      margin-left: 0.5rem;\n    }\n  }\n"])));
+exports.metadataBlockCss = metadataBlockCss;
+var footerBlockCss = (0, _core.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  padding-top: 0.25rem;\n"])));
+exports.footerBlockCss = footerBlockCss;

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

@@ -17,8 +17,8 @@ var getSimulatedMetadata = function getSimulatedMetadata() {
     case 'confluence-object-provider':
       return {
         metadata: {
-          primary: [_constants.ElementName.AuthorGroup, _constants.ElementName.CreatedBy, _constants.ElementName.CommentCount, _constants.ElementName.ReactCount],
-          secondary: []
+          primary: [_constants.ElementName.AuthorGroup, _constants.ElementName.CreatedBy],
+          secondary: [_constants.ElementName.CommentCount, _constants.ElementName.ReactCount]
         }
       };
 

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

@@ -61,7 +61,7 @@ export const useSmartLinkAnalytics = (url, dispatchAnalytics, id, defaultLocatio
      * @param destinationProduct The product the Smart Link is linked to.
      * @returns
      */
-    cardClickedEvent: (id = defaultId, display, status, definitionId = extractedDefinitionId, extensionKey = extractedExtensionKey, isModifierKeyPressed, location = defaultLocation, destinationProduct = extractedProduct, destinationSubproduct = extractedSubproduct) => dispatchAnalytics(uiCardClickedEvent(id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct, destinationSubproduct)),
+    cardClickedEvent: (id = defaultId, display, status, definitionId = extractedDefinitionId, extensionKey = extractedExtensionKey, isModifierKeyPressed, location = defaultLocation, destinationProduct = extractedProduct, destinationSubproduct = extractedSubproduct, actionSubjectId) => dispatchAnalytics(uiCardClickedEvent(id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct, destinationSubproduct, actionSubjectId)),
 
     /**
      * This fires an event that represents when a user clicks on a Smart Link action.

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

@@ -174,10 +174,10 @@ export const uiAuthAlternateAccountEvent = (display, definitionId, extensionKey)
     display
   }
 });
-export const uiCardClickedEvent = (id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct, destinationSubproduct) => ({
+export const uiCardClickedEvent = (id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct, destinationSubproduct, actionSubjectId) => ({
   action: 'clicked',
   actionSubject: 'smartLink',
-  actionSubjectId: 'titleGoToLink',
+  actionSubjectId,
   eventType: 'ui',
   attributes: { ...context,
     id,

package/dist/es2019/version.json

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

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

@@ -116,11 +116,12 @@ export const renderElementItems = (items = [], display = 'inline') => {
       ...props
     } = curr;
     const Element = Elements[name];
+    const typedProps = props;
 
     if (Element && isElementDisplayValid(name, display)) {
       const element = /*#__PURE__*/React.createElement(Element, _extends({
         key: idx
-      }, props));
+      }, typedProps));
 
       if (!isElementNull(element)) {
         return [...acc, element];

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

@@ -22,35 +22,17 @@ export const CollaboratorGroup = createElement(ElementName.CollaboratorGroup);
 
 export const CommentCount = createElement(ElementName.CommentCount);
 /**
- * Creates a ViewCount Badge element using the data from ViewCount in the Flexible UI Context.
- * @see Badge
- */
-
-export const ViewCount = createElement(ElementName.ViewCount);
-/**
- * Creates a ReactCount Badge element using the data from ReactCount in the Flexible UI Context.
- * @see Badge
- */
-
-export const ReactCount = createElement(ElementName.ReactCount);
-/**
- * Creates a VoteCount Badge element using the data from VoteCount in the Flexible UI Context.
- * @see Badge
+ * Creates a CreatedOn DateTime element using the data from CreatedOn in the Flexible UI Context.
+ * @see DateTime
  */
 
-export const VoteCount = createElement(ElementName.VoteCount);
+export const CreatedOn = createElement(ElementName.CreatedOn);
 /**
  * Creates a CreatedBy text element using the data from CreatedBy in the Flexible UI Context.
  * @see Text
  */
 
 export const CreatedBy = createElement(ElementName.CreatedBy);
-/**
- * Creates a CreatedOn DateTime element using the data from CreatedOn in the Flexible UI Context.
- * @see DateTime
- */
-
-export const CreatedOn = createElement(ElementName.CreatedOn);
 /**
  * Creates an element that contains Last Commit hash
  */
@@ -92,6 +74,18 @@ export const Priority = createElement(ElementName.Priority);
  */
 
 export const ProgrammingLanguage = createElement(ElementName.ProgrammingLanguage);
+/**
+ * Creates a Provider Badge element using the data from Provider in the Flexible UI Context.
+ * @see Badge
+ */
+
+export const Provider = createElement(ElementName.Provider);
+/**
+ * Creates a ReactCount Badge element using the data from ReactCount in the Flexible UI Context.
+ * @see Badge
+ */
+
+export const ReactCount = createElement(ElementName.ReactCount);
 /**
  * Creates a Snippet element using the data from Snippet in the Flexible UI Context.
  * @see Text
@@ -118,8 +112,14 @@ export const SubscriberCount = createElement(ElementName.SubscriberCount);
 
 export const Title = createElement(ElementName.Title);
 /**
- * Creates a Provider Badge element using the data from Provider in the Flexible UI Context.
+ * Creates a ViewCount Badge element using the data from ViewCount in the Flexible UI Context.
+ * @see Badge
+ */
+
+export const ViewCount = createElement(ElementName.ViewCount);
+/**
+ * Creates a VoteCount Badge element using the data from VoteCount in the Flexible UI Context.
  * @see Badge
  */
 
-export const Provider = createElement(ElementName.Provider);
+export const VoteCount = createElement(ElementName.VoteCount);

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

@@ -2,17 +2,19 @@ import React, { useCallback, useEffect, useMemo } from 'react';
 import { extractMetadata } from '../../../extractors/hover/extractMetadata';
 import { getSimulatedMetadata, HOVER_CARD_ANALYTICS_DISPLAY } from '../utils';
 import extractPreview from '../../../extractors/flexible/extract-preview';
-import { ActionName, SmartLinkSize, SmartLinkTheme } from '../../../constants';
+import { ActionName, SmartLinkPosition, SmartLinkSize, SmartLinkTheme } from '../../../constants';
 import FlexibleCard from '../../FlexibleCard';
 import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock, TitleBlock } from '../../FlexibleCard/components/blocks';
 import { isSpecialEvent } from '../../../utils';
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
 import { getExtensionKey } from '../../../state/helpers';
+import { titleBlockCss, metadataBlockCss, footerBlockCss } from '../styled';
 const flexibleUiOptions = {
   hideElevation: true,
-  size: SmartLinkSize.Large,
+  size: SmartLinkSize.Medium,
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  theme: SmartLinkTheme.Black
+  theme: SmartLinkTheme.Black,
+  hidePadding: true
 };
 
 const getOpenAction = (url, analytics) => ({
@@ -54,7 +56,7 @@ const HoverCardContent = ({
   const extensionKey = useMemo(() => getExtensionKey(cardState.details), [cardState.details]);
   const onClick = useCallback(event => {
     const isModifierKeyPressed = isSpecialEvent(event);
-    analytics.ui.cardClickedEvent(undefined, HOVER_CARD_ANALYTICS_DISPLAY, cardState.status, undefined, undefined, isModifierKeyPressed);
+    analytics.ui.cardClickedEvent(undefined, HOVER_CARD_ANALYTICS_DISPLAY, cardState.status, undefined, undefined, isModifierKeyPressed, undefined, undefined, undefined, 'titleGoToLink');
   }, [cardState.status, analytics.ui]);
   const titleActions = useMemo(() => [getOpenAction(url, analytics)], [url, analytics]);
   const footerActions = useMemo(() => toFooterActions(cardActions), [cardActions]); //TODO: EDM-3224 deleted simulated and use real JsonLd
@@ -73,13 +75,20 @@ const HoverCardContent = ({
     ui: flexibleUiOptions,
     url: url
   }, /*#__PURE__*/React.createElement(TitleBlock, {
-    actions: titleActions
+    actions: titleActions,
+    overrideCss: titleBlockCss,
+    size: SmartLinkSize.Large,
+    position: SmartLinkPosition.Center
   }), /*#__PURE__*/React.createElement(MetadataBlock, {
     primary: primary,
     secondary: secondary,
-    size: SmartLinkSize.Small
+    size: SmartLinkSize.Large,
+    overrideCss: metadataBlockCss,
+    maxLines: 1
   }), body, /*#__PURE__*/React.createElement(FooterBlock, {
-    actions: footerActions
+    actions: footerActions,
+    size: SmartLinkSize.Large,
+    overrideCss: footerBlockCss
   }));
 };
 

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

@@ -3,10 +3,37 @@ import { loadingPlaceholderClassName } from '../../index';
 export const HoverCardContainer = css`
   background: none;
   border-width: 0;
-  max-width: 350px;
-  padding: 0;
+  box-sizing: border-box;
+  width: 24rem;
+  padding: 1rem;
 
   .${loadingPlaceholderClassName} {
     display: none;
   }
+`;
+export const titleBlockCss = css`
+  gap: 0.5rem;
+`;
+export const metadataBlockCss = css`
+  gap: 0px;
+
+  /* primary element group */
+  [data-smart-element-group]:first-of-type {
+    flex-grow: 7;
+    /* horizontal spacing between elements in group */
+    > span {
+      margin-right: 0.5rem;
+    }
+  }
+  /* secondary element group */
+  [data-smart-element-group]:last-of-type {
+    flex-grow: 3;
+    /* horizontal spacing between elements in group */
+    > span {
+      margin-left: 0.5rem;
+    }
+  }
+`;
+export const footerBlockCss = css`
+  padding-top: 0.25rem;
 `;

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

@@ -5,8 +5,8 @@ export const getSimulatedMetadata = (extensionKey = '') => {
     case 'confluence-object-provider':
       return {
         metadata: {
-          primary: [ElementName.AuthorGroup, ElementName.CreatedBy, ElementName.CommentCount, ElementName.ReactCount],
-          secondary: []
+          primary: [ElementName.AuthorGroup, ElementName.CreatedBy],
+          secondary: [ElementName.CommentCount, ElementName.ReactCount]
         }
       };
 

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

@@ -80,7 +80,8 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchA
         var location = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : defaultLocation;
         var destinationProduct = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : extractedProduct;
         var destinationSubproduct = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : extractedSubproduct;
-        return dispatchAnalytics(uiCardClickedEvent(id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct, destinationSubproduct));
+        var actionSubjectId = arguments.length > 9 ? arguments[9] : undefined;
+        return dispatchAnalytics(uiCardClickedEvent(id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct, destinationSubproduct, actionSubjectId));
       },
 
       /**

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

@@ -187,11 +187,11 @@ export var uiAuthAlternateAccountEvent = function uiAuthAlternateAccountEvent(di
     })
   };
 };
-export var uiCardClickedEvent = function uiCardClickedEvent(id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct, destinationSubproduct) {
+export var uiCardClickedEvent = function uiCardClickedEvent(id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct, destinationSubproduct, actionSubjectId) {
   return {
     action: 'clicked',
     actionSubject: 'smartLink',
-    actionSubjectId: 'titleGoToLink',
+    actionSubjectId: actionSubjectId,
     eventType: 'ui',
     attributes: _objectSpread(_objectSpread({}, context), {}, {
       id: id,

package/dist/esm/version.json

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

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

@@ -92,11 +92,12 @@ export var renderElementItems = function renderElementItems() {
         props = _objectWithoutProperties(curr, _excluded);
 
     var Element = Elements[name];
+    var typedProps = props;
 
     if (Element && isElementDisplayValid(name, display)) {
       var element = /*#__PURE__*/React.createElement(Element, _extends({
         key: idx
-      }, props));
+      }, typedProps));
 
       if (!isElementNull(element)) {
         return [].concat(_toConsumableArray(acc), [element]);

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

@@ -22,35 +22,17 @@ export var CollaboratorGroup = createElement(ElementName.CollaboratorGroup);
 
 export var CommentCount = createElement(ElementName.CommentCount);
 /**
- * Creates a ViewCount Badge element using the data from ViewCount in the Flexible UI Context.
- * @see Badge
- */
-
-export var ViewCount = createElement(ElementName.ViewCount);
-/**
- * Creates a ReactCount Badge element using the data from ReactCount in the Flexible UI Context.
- * @see Badge
- */
-
-export var ReactCount = createElement(ElementName.ReactCount);
-/**
- * Creates a VoteCount Badge element using the data from VoteCount in the Flexible UI Context.
- * @see Badge
+ * Creates a CreatedOn DateTime element using the data from CreatedOn in the Flexible UI Context.
+ * @see DateTime
  */
 
-export var VoteCount = createElement(ElementName.VoteCount);
+export var CreatedOn = createElement(ElementName.CreatedOn);
 /**
  * Creates a CreatedBy text element using the data from CreatedBy in the Flexible UI Context.
  * @see Text
  */
 
 export var CreatedBy = createElement(ElementName.CreatedBy);
-/**
- * Creates a CreatedOn DateTime element using the data from CreatedOn in the Flexible UI Context.
- * @see DateTime
- */
-
-export var CreatedOn = createElement(ElementName.CreatedOn);
 /**
  * Creates an element that contains Last Commit hash
  */
@@ -92,6 +74,18 @@ export var Priority = createElement(ElementName.Priority);
  */
 
 export var ProgrammingLanguage = createElement(ElementName.ProgrammingLanguage);
+/**
+ * Creates a Provider Badge element using the data from Provider in the Flexible UI Context.
+ * @see Badge
+ */
+
+export var Provider = createElement(ElementName.Provider);
+/**
+ * Creates a ReactCount Badge element using the data from ReactCount in the Flexible UI Context.
+ * @see Badge
+ */
+
+export var ReactCount = createElement(ElementName.ReactCount);
 /**
  * Creates a Snippet element using the data from Snippet in the Flexible UI Context.
  * @see Text
@@ -118,8 +112,14 @@ export var SubscriberCount = createElement(ElementName.SubscriberCount);
 
 export var Title = createElement(ElementName.Title);
 /**
- * Creates a Provider Badge element using the data from Provider in the Flexible UI Context.
+ * Creates a ViewCount Badge element using the data from ViewCount in the Flexible UI Context.
+ * @see Badge
+ */
+
+export var ViewCount = createElement(ElementName.ViewCount);
+/**
+ * Creates a VoteCount Badge element using the data from VoteCount in the Flexible UI Context.
  * @see Badge
  */
 
-export var Provider = createElement(ElementName.Provider);
+export var VoteCount = createElement(ElementName.VoteCount);

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

@@ -2,17 +2,19 @@ import React, { useCallback, useEffect, useMemo } from 'react';
 import { extractMetadata } from '../../../extractors/hover/extractMetadata';
 import { getSimulatedMetadata, HOVER_CARD_ANALYTICS_DISPLAY } from '../utils';
 import extractPreview from '../../../extractors/flexible/extract-preview';
-import { ActionName, SmartLinkSize, SmartLinkTheme } from '../../../constants';
+import { ActionName, SmartLinkPosition, SmartLinkSize, SmartLinkTheme } from '../../../constants';
 import FlexibleCard from '../../FlexibleCard';
 import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock, TitleBlock } from '../../FlexibleCard/components/blocks';
 import { isSpecialEvent } from '../../../utils';
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
 import { getExtensionKey } from '../../../state/helpers';
+import { titleBlockCss, metadataBlockCss, footerBlockCss } from '../styled';
 var flexibleUiOptions = {
   hideElevation: true,
-  size: SmartLinkSize.Large,
+  size: SmartLinkSize.Medium,
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  theme: SmartLinkTheme.Black
+  theme: SmartLinkTheme.Black,
+  hidePadding: true
 };
 
 var getOpenAction = function getOpenAction(url, analytics) {
@@ -64,7 +66,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
   }, [cardState.details]);
   var onClick = useCallback(function (event) {
     var isModifierKeyPressed = isSpecialEvent(event);
-    analytics.ui.cardClickedEvent(undefined, HOVER_CARD_ANALYTICS_DISPLAY, cardState.status, undefined, undefined, isModifierKeyPressed);
+    analytics.ui.cardClickedEvent(undefined, HOVER_CARD_ANALYTICS_DISPLAY, cardState.status, undefined, undefined, isModifierKeyPressed, undefined, undefined, undefined, 'titleGoToLink');
   }, [cardState.status, analytics.ui]);
   var titleActions = useMemo(function () {
     return [getOpenAction(url, analytics)];
@@ -87,13 +89,20 @@ var HoverCardContent = function HoverCardContent(_ref) {
     ui: flexibleUiOptions,
     url: url
   }, /*#__PURE__*/React.createElement(TitleBlock, {
-    actions: titleActions
+    actions: titleActions,
+    overrideCss: titleBlockCss,
+    size: SmartLinkSize.Large,
+    position: SmartLinkPosition.Center
   }), /*#__PURE__*/React.createElement(MetadataBlock, {
     primary: primary,
     secondary: secondary,
-    size: SmartLinkSize.Small
+    size: SmartLinkSize.Large,
+    overrideCss: metadataBlockCss,
+    maxLines: 1
   }), body, /*#__PURE__*/React.createElement(FooterBlock, {
-    actions: footerActions
+    actions: footerActions,
+    size: SmartLinkSize.Large,
+    overrideCss: footerBlockCss
   }));
 };
 

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

@@ -1,7 +1,10 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 import { css } from '@emotion/core';
 import { loadingPlaceholderClassName } from '../../index';
-export var HoverCardContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: none;\n  border-width: 0;\n  max-width: 350px;\n  padding: 0;\n\n  .", " {\n    display: none;\n  }\n"])), loadingPlaceholderClassName);
+export var HoverCardContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: none;\n  border-width: 0;\n  box-sizing: border-box;\n  width: 24rem;\n  padding: 1rem;\n\n  .", " {\n    display: none;\n  }\n"])), loadingPlaceholderClassName);
+export var titleBlockCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  gap: 0.5rem;\n"])));
+export var metadataBlockCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  gap: 0px;\n\n  /* primary element group */\n  [data-smart-element-group]:first-of-type {\n    flex-grow: 7;\n    /* horizontal spacing between elements in group */\n    > span {\n      margin-right: 0.5rem;\n    }\n  }\n  /* secondary element group */\n  [data-smart-element-group]:last-of-type {\n    flex-grow: 3;\n    /* horizontal spacing between elements in group */\n    > span {\n      margin-left: 0.5rem;\n    }\n  }\n"])));
+export var footerBlockCss = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding-top: 0.25rem;\n"])));

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

@@ -7,8 +7,8 @@ export var getSimulatedMetadata = function getSimulatedMetadata() {
     case 'confluence-object-provider':
       return {
         metadata: {
-          primary: [ElementName.AuthorGroup, ElementName.CreatedBy, ElementName.CommentCount, ElementName.ReactCount],
-          secondary: []
+          primary: [ElementName.AuthorGroup, ElementName.CreatedBy],
+          secondary: [ElementName.CommentCount, ElementName.ReactCount]
         }
       };
 

package/dist/types/index.d.ts

@@ -19,3 +19,4 @@ export { loadingPlaceholderClassName } from './view/CardWithUrl/component-lazy/L
 export { ActionName, ElementName, SmartLinkDirection, SmartLinkPosition, SmartLinkSize, SmartLinkTheme, } from './constants';
 export { MetadataBlock, PreviewBlock, SnippetBlock, TitleBlock, FooterBlock, } from './view/FlexibleCard/components/blocks';
 export type { ActionItem, ElementItem, } from './view/FlexibleCard/components/blocks/types';
+export type { AnalyticsAction, AnalyticsActionSubject, AnalyticsPayload, AnalyticsHandler, } from './utils/types';

package/dist/types/state/analytics/useSmartLinkAnalytics.d.ts

@@ -45,7 +45,7 @@ export declare const useSmartLinkAnalytics: (url: string, dispatchAnalytics: Ana
          * @param destinationProduct The product the Smart Link is linked to.
          * @returns
          */
-        cardClickedEvent: (id: string | undefined, display: CardInnerAppearance, status: CardType, definitionId?: string | undefined, extensionKey?: string | undefined, isModifierKeyPressed?: boolean | undefined, location?: string | undefined, destinationProduct?: DestinationProduct | string | undefined, destinationSubproduct?: DestinationSubproduct | string | undefined) => void;
+        cardClickedEvent: (id: string | undefined, display: CardInnerAppearance, status: CardType, definitionId?: string | undefined, extensionKey?: string | undefined, isModifierKeyPressed?: boolean | undefined, location?: string | undefined, destinationProduct?: DestinationProduct | string | undefined, destinationSubproduct?: DestinationSubproduct | string | undefined, actionSubjectId?: string | undefined) => void;
         /**
          * This fires an event that represents when a user clicks on a Smart Link action.
          * Note: This also starts the UFO smart-link-action-invocation experience.

package/dist/types/state/hooks/useSmartLink.d.ts

@@ -12,7 +12,7 @@ export declare function useSmartLink(id: string, url: string, dispatchAnalytics:
         ui: {
             authEvent: (display: import("../../view/Card/types").CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => void;
             authAlternateAccountEvent: (display: import("../../view/Card/types").CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => void;
-            cardClickedEvent: (id: string | undefined, display: import("../../view/Card/types").CardInnerAppearance, status: import("@atlaskit/linking-common/types").CardType, definitionId?: string | undefined, extensionKey?: string | undefined, isModifierKeyPressed?: boolean | undefined, location?: string | undefined, destinationProduct?: string | undefined, destinationSubproduct?: string | undefined) => void;
+            cardClickedEvent: (id: string | undefined, display: import("../../view/Card/types").CardInnerAppearance, status: import("@atlaskit/linking-common/types").CardType, definitionId?: string | undefined, extensionKey?: string | undefined, isModifierKeyPressed?: boolean | undefined, location?: string | undefined, destinationProduct?: string | undefined, destinationSubproduct?: string | undefined, actionSubjectId?: string | undefined) => void;
             actionClickedEvent: (id: string | undefined, extensionKey: string | undefined, actionType: string, display: import("../../view/Card/types").CardInnerAppearance, invokeType: import("../../model/invoke-opts").InvokeType) => void;
             hoverCardOpenLinkClickedEvent: (previewDisplay: import("../../view/HoverCard/types").PreviewDisplay, definitionId?: string | undefined, extensionKey?: string | undefined, previewInvokeMethod?: import("../../view/HoverCard/types").PreviewInvokeMethod | undefined) => void;
             closedAuthEvent: (display: import("../../view/Card/types").CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => void;

package/dist/types/utils/analytics/analytics.d.ts

@@ -23,7 +23,7 @@ export declare const connectFailedEvent: (definitionId?: string | undefined, ext
 export declare const trackAppAccountConnected: (definitionId?: string | undefined, extensionKey?: string | undefined) => AnalyticsPayload;
 export declare const uiAuthEvent: (display: CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => AnalyticsPayload;
 export declare const uiAuthAlternateAccountEvent: (display: CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => AnalyticsPayload;
-export declare const uiCardClickedEvent: (id: string, display: CardInnerAppearance, status: CardType, definitionId?: string | undefined, extensionKey?: string | undefined, isModifierKeyPressed?: boolean | undefined, location?: string | undefined, destinationProduct?: string | undefined, destinationSubproduct?: string | undefined) => AnalyticsPayload;
+export declare const uiCardClickedEvent: (id: string, display: CardInnerAppearance, status: CardType, definitionId?: string | undefined, extensionKey?: string | undefined, isModifierKeyPressed?: boolean | undefined, location?: string | undefined, destinationProduct?: string | undefined, destinationSubproduct?: string | undefined, actionSubjectId?: string | undefined) => AnalyticsPayload;
 export declare const uiActionClickedEvent: (id: string, actionType: string, extensionKey?: string | undefined, display?: CardInnerAppearance | undefined) => AnalyticsPayload;
 export declare const uiClosedAuthEvent: (display: CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => AnalyticsPayload;
 export declare const screenAuthPopupEvent: (definitionId?: string | undefined, extensionKey?: string | undefined) => AnalyticsPayload;

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

@@ -35,13 +35,11 @@ export declare type BlockProps = {
  */
 export declare type ElementItem = {
     /**
-     * The name of the metadata element, used by Flexible UI to determine which
-     * element to render.
+     * Any additional CSS properties to apply to the element.
      */
-    name: ElementName.AuthorGroup | ElementName.CollaboratorGroup | ElementName.CommentCount | ElementName.CreatedBy | ElementName.CreatedOn | ElementName.ModifiedBy | ElementName.ModifiedOn | ElementName.Priority | ElementName.ProgrammingLanguage | ElementName.Provider | ElementName.ReactCount | ElementName.State | ElementName.SubscriberCount | ElementName.ViewCount | ElementName.VoteCount | ElementName.LatestCommit;
+    overrideCss?: SerializedStyles;
     /**
-     * The size of the element to render.
-     * The elements that support sizing are AuthorGroup and CollaboratorGroup.
+     * The size of the element to display.
      */
     size?: SmartLinkSize;
     /**
@@ -50,7 +48,7 @@ export declare type ElementItem = {
      * serving as a hook for automated tests
      */
     testId?: string;
-};
+} & ElementItemProps;
 /**
  * Used to represent an Action when passing props into Flexible UI.
  */
@@ -102,3 +100,155 @@ export declare type CustomActionItem = BaseActionItem & {
     name: ActionName.CustomAction;
 } & ((Required<Pick<ActionProps, 'icon' | 'iconPosition'>> & Pick<ActionProps, 'content'>) | ((Required<Pick<ActionProps, 'content'>> & Pick<ActionProps, 'icon' | 'iconPosition'>) & Pick<ActionProps, 'tooltipMessage'>));
 export declare type ActionItem = NamedActionItem | CustomActionItem;
+/**
+ * A type that contains all the possible combinations of elements with their corresponding props.
+ */
+export declare type ElementItemProps = AuthorGroup | CollaboratorGroup | CommentCount | CreatedBy | CreatedOn | LatestCommit | LinkIcon | ModifiedBy | ModifiedOn | Preview | Priority | ProgrammingLanguage | Provider | ReactCount | Snippet | State | SubscriberCount | Title | ViewCount | VoteCount;
+/**
+ * Represents the props available for an AuthorGroup element.
+ * @see AuthorGroup
+ */
+export declare type AuthorGroup = {
+    name: ElementName.AuthorGroup;
+};
+/**
+ * Represents the props available for an CollaboratorGroup element.
+ * @see CollaboratorGroup
+ */
+export declare type CollaboratorGroup = {
+    name: ElementName.CollaboratorGroup;
+};
+/**
+ * Represents the props available for an CommentCount element.
+ * @see CommentCount
+ */
+export declare type CommentCount = {
+    name: ElementName.CommentCount;
+};
+/**
+ * Represents the props available for an CreatedBy element.
+ * @see CreatedBy
+ */
+export declare type CreatedBy = {
+    name: ElementName.CreatedBy;
+};
+/**
+ * Represents the props available for an CreatedOn element.
+ * @see CreatedOn
+ */
+export declare type CreatedOn = {
+    name: ElementName.CreatedOn;
+    /**
+     * A string which will be displayed before the specified element.
+     */
+    text?: string;
+};
+/**
+ * Represents the props available for an LastCommit element.
+ * @see BadgeProps
+ */
+export declare type LatestCommit = {
+    name: ElementName.LatestCommit;
+};
+/**
+ * Represents the props available for an LinkIcon element.
+ * @see LinkIcon
+ */
+export declare type LinkIcon = {
+    name: ElementName.LinkIcon;
+};
+/**
+ * Represents the props available for an ModifiedBy element.
+ * @see ModifiedBy
+ */
+export declare type ModifiedBy = {
+    name: ElementName.ModifiedBy;
+};
+/**
+ * Represents the props available for an ModifiedOn element.
+ * @see ModifiedOn
+ */
+export declare type ModifiedOn = {
+    name: ElementName.ModifiedOn;
+    /**
+     * A string which will be displayed before the specified element.
+     */
+    text?: string;
+};
+/**
+ * Represents the props available for an Preview element.
+ * @see Preview
+ */
+export declare type Preview = {
+    name: ElementName.Preview;
+};
+/**
+ * Represents the props available for an Priority element.
+ * @see Priority
+ */
+export declare type Priority = {
+    name: ElementName.Priority;
+};
+/**
+ * Represents the props available for an ProgrammingLanguage element.
+ * @see ProgrammingLanguage
+ */
+export declare type ProgrammingLanguage = {
+    name: ElementName.ProgrammingLanguage;
+};
+/**
+ * Represents the props available for an Provider element.
+ * @see Provider
+ */
+export declare type Provider = {
+    name: ElementName.Provider;
+};
+/**
+ * Represents the props available for an ReactCount element.
+ * @see ReactCount
+ */
+export declare type ReactCount = {
+    name: ElementName.ReactCount;
+};
+/**
+ * Represents the props available for an Snippet element.
+ * @see Snippet
+ */
+export declare type Snippet = {
+    name: ElementName.Snippet;
+};
+/**
+ * Represents the props available for an State element.
+ * @see State
+ */
+export declare type State = {
+    name: ElementName.State;
+};
+/**
+ * Represents the props available for an SubscriberCount element.
+ * @see SubscriberCount
+ */
+export declare type SubscriberCount = {
+    name: ElementName.SubscriberCount;
+};
+/**
+ * Represents the props available for an Title element.
+ * @see Title
+ */
+export declare type Title = {
+    name: ElementName.Title;
+};
+/**
+ * Represents the props available for an ViewCount element.
+ * @see ViewCount
+ */
+export declare type ViewCount = {
+    name: ElementName.ViewCount;
+};
+/**
+ * Represents the props available for an VoteCount element.
+ * @see VoteCount
+ */
+export declare type VoteCount = {
+    name: ElementName.VoteCount;
+};

package/dist/types/view/FlexibleCard/components/elements/index.d.ts

@@ -23,30 +23,15 @@ export declare const CollaboratorGroup: import("react").FC<AvatarGroupProps>;
  */
 export declare const CommentCount: import("react").FC<BadgeProps>;
 /**
- * Creates a ViewCount Badge element using the data from ViewCount in the Flexible UI Context.
- * @see Badge
- */
-export declare const ViewCount: import("react").FC<BadgeProps>;
-/**
- * Creates a ReactCount Badge element using the data from ReactCount in the Flexible UI Context.
- * @see Badge
- */
-export declare const ReactCount: import("react").FC<BadgeProps>;
-/**
- * Creates a VoteCount Badge element using the data from VoteCount in the Flexible UI Context.
- * @see Badge
+ * Creates a CreatedOn DateTime element using the data from CreatedOn in the Flexible UI Context.
+ * @see DateTime
  */
-export declare const VoteCount: import("react").FC<BadgeProps>;
+export declare const CreatedOn: import("react").FC<DateTimeProps>;
 /**
  * Creates a CreatedBy text element using the data from CreatedBy in the Flexible UI Context.
  * @see Text
  */
 export declare const CreatedBy: import("react").FC<TextProps>;
-/**
- * Creates a CreatedOn DateTime element using the data from CreatedOn in the Flexible UI Context.
- * @see DateTime
- */
-export declare const CreatedOn: import("react").FC<DateTimeProps>;
 /**
  * Creates an element that contains Last Commit hash
  */
@@ -81,6 +66,16 @@ export declare const Priority: import("react").FC<BadgeProps>;
  * @see Badge
  */
 export declare const ProgrammingLanguage: import("react").FC<BadgeProps>;
+/**
+ * Creates a Provider Badge element using the data from Provider in the Flexible UI Context.
+ * @see Badge
+ */
+export declare const Provider: import("react").FC<BadgeProps>;
+/**
+ * Creates a ReactCount Badge element using the data from ReactCount in the Flexible UI Context.
+ * @see Badge
+ */
+export declare const ReactCount: import("react").FC<BadgeProps>;
 /**
  * Creates a Snippet element using the data from Snippet in the Flexible UI Context.
  * @see Text
@@ -103,7 +98,12 @@ export declare const SubscriberCount: import("react").FC<BadgeProps>;
  */
 export declare const Title: import("react").FC<LinkProps>;
 /**
- * Creates a Provider Badge element using the data from Provider in the Flexible UI Context.
+ * Creates a ViewCount Badge element using the data from ViewCount in the Flexible UI Context.
  * @see Badge
  */
-export declare const Provider: import("react").FC<BadgeProps>;
+export declare const ViewCount: import("react").FC<BadgeProps>;
+/**
+ * Creates a VoteCount Badge element using the data from VoteCount in the Flexible UI Context.
+ * @see Badge
+ */
+export declare const VoteCount: import("react").FC<BadgeProps>;

package/dist/types/view/HoverCard/styled.d.ts

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

package/package.json

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