@atlaskit/smart-card 19.1.23 → 19.1.26

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/smart-card
 
+## 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
+
+- [`cd729a0a41b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cd729a0a41b) - [ux][ed-15030] Set the background color of smart cards properly in dark mode
+
 ## 19.1.23
 
 ### 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.23",
+	"version": "19.1.26",
 	"sideEffects": false
 }

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/cjs/view/InlineCard/Frame/styled.js

@@ -78,7 +78,7 @@ var Wrapper = _styled.default.a(_templateObject || (_templateObject = (0, _tagge
 }), function (props) {
   return props.withoutBackground ? '' : (0, _components.themed)({
     light: (0, _tokens.token)('elevation.surface.raised', 'white'),
-    dark: (0, _tokens.token)('elevation.surface.raised', 'BACKGROUND_COLOR_DARK')
+    dark: (0, _tokens.token)('elevation.surface.raised', BACKGROUND_COLOR_DARK)
   });
 }, function (props) {
   return props.withoutBackground ? '' : (0, _components.themed)({

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.23",
+	"version": "19.1.26",
 	"sideEffects": false
 }

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/es2019/view/InlineCard/Frame/styled.js

@@ -91,7 +91,7 @@ export const Wrapper = styled.a`
 })};
   background-color: ${props => props.withoutBackground ? '' : themed({
   light: token('elevation.surface.raised', 'white'),
-  dark: token('elevation.surface.raised', 'BACKGROUND_COLOR_DARK')
+  dark: token('elevation.surface.raised', BACKGROUND_COLOR_DARK)
 })};
   ${props => props.withoutBackground ? '' : themed({
   light: `box-shadow: ${token('elevation.shadow.raised', `0 1px 1px ${N50A}, 0 0 1px 1px ${N40A}`)};`,

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.23",
+	"version": "19.1.26",
 	"sideEffects": false
 }

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/esm/view/InlineCard/Frame/styled.js

@@ -63,7 +63,7 @@ export var Wrapper = styled.a(_templateObject || (_templateObject = _taggedTempl
 }), function (props) {
   return props.withoutBackground ? '' : themed({
     light: token('elevation.surface.raised', 'white'),
-    dark: token('elevation.surface.raised', 'BACKGROUND_COLOR_DARK')
+    dark: token('elevation.surface.raised', BACKGROUND_COLOR_DARK)
   });
 }, function (props) {
   return props.withoutBackground ? '' : themed({

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/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.23",
+  "version": "19.1.26",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -36,7 +36,7 @@
     "@atlaskit/linking-common": "^1.1.0",
     "@atlaskit/logo": "^13.7.0",
     "@atlaskit/lozenge": "^11.1.0",
-    "@atlaskit/media-common": "^2.14.0",
+    "@atlaskit/media-common": "^2.15.0",
     "@atlaskit/modal-dialog": "^12.2.0",
     "@atlaskit/outbound-auth-flow-client": "^3.3.0",
     "@atlaskit/popup": "^1.3.0",