@atlaskit/smart-card 26.15.9 → 26.15.11

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/smart-card
 
+## 26.15.11
+
+### Patch Changes
+
+- [`3d5b709c646`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3d5b709c646) - Update css styles for metadata block elements in Block & Hover Card
+
+## 26.15.10
+
+### Patch Changes
+
+- [`9eed222eff6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9eed222eff6) - noFadeDelay internal hover card prop added.
+
 ## 26.15.9
 
 ### Patch Changes

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

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

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

@@ -83,7 +83,8 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
     overrideCss: _styled.metadataBlockCss
   })), /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, null), (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && /*#__PURE__*/_react.default.createElement(_blocks.MetadataBlock, {
     primary: bottomMetadata,
-    maxLines: 1
+    maxLines: 1,
+    overrideCss: _styled.metadataBlockCss
   }), !isPreviewBlockErrored ? /*#__PURE__*/_react.default.createElement(_blocks.PreviewBlock, {
     placement: _constants.MediaPlacement.Right,
     ignoreContainerPadding: true,

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

@@ -12,7 +12,7 @@ var _colors = require("@atlaskit/theme/colors");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 // in editor prosemirror adds padding-left so we need to overwrite it
-var metadataBlockCss = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* primary element group */\n  span[data-smart-element-avatar-group] {\n    > ul {\n      padding-left: 0px;\n    }\n  }\n"])));
+var metadataBlockCss = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* primary element group */\n  span[data-smart-element-avatar-group] {\n    > ul {\n      padding-left: 0px;\n    }\n  }\n  [data-smart-element-group] {\n    line-height: 1rem;\n  }\n"])));
 exports.metadataBlockCss = metadataBlockCss;
 var titleBlockCss = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n"])), (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? "gap: 0.5em;" : "", (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "[data-smart-element=\"Title\"] {\n          font-weight: 600;\n        }" : "");
 exports.titleBlockCss = titleBlockCss;

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

@@ -5,10 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _badge = _interopRequireDefault(require("@atlaskit/badge"));
 var _react2 = require("@emotion/react");
+var _templateObject;
 /** @jsx jsx */
+var badgeStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: inline-flex;\n"])));
 
 /**
  * A base element that displays a visual indicator for a numeric value
@@ -26,7 +29,7 @@ var AtlaskitBadge = function AtlaskitBadge(_ref) {
     return null;
   }
   return (0, _react2.jsx)("span", {
-    css: overrideCss,
+    css: [badgeStyles, overrideCss],
     "data-fit-to-content": true,
     "data-smart-element": name,
     "data-smart-element-atlaskit-badge": true,

package/dist/cjs/view/HoverCard/components/HoverCardComponent.js

@@ -48,7 +48,9 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
     _ref$allowEventPropag = _ref.allowEventPropagation,
     allowEventPropagation = _ref$allowEventPropag === void 0 ? false : _ref$allowEventPropag,
     _ref$zIndex = _ref.zIndex,
-    zIndex = _ref$zIndex === void 0 ? _styled.HOVER_CARD_Z_INDEX : _ref$zIndex;
+    zIndex = _ref$zIndex === void 0 ? _styled.HOVER_CARD_Z_INDEX : _ref$zIndex,
+    _ref$noFadeDelay = _ref.noFadeDelay,
+    noFadeDelay = _ref$noFadeDelay === void 0 ? false : _ref$noFadeDelay;
   var _React$useState = _react2.default.useState(false),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     isOpen = _React$useState2[0],
@@ -98,10 +100,14 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
       // we want to clear out the reference to signify that there's no in-progress resolve event
       resolveTimeOutId.current = undefined;
     }
-    fadeOutTimeoutId.current = setTimeout(function () {
-      return hideCard();
-    }, FADE_OUT_DELAY);
-  }, [hideCard]);
+    if (noFadeDelay) {
+      hideCard();
+    } else {
+      fadeOutTimeoutId.current = setTimeout(function () {
+        return hideCard();
+      }, FADE_OUT_DELAY);
+    }
+  }, [hideCard, noFadeDelay]);
 
   // clearing out the timeouts in order to avoid memory leaks
   // in case the component unmounts before they execute
@@ -152,11 +158,15 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
     setMousePosition(event);
     if (!isOpen && !fadeInTimeoutId.current) {
       // setting a timeout to show a Hover Card after delay runs out
-      fadeInTimeoutId.current = setTimeout(function () {
+      if (noFadeDelay) {
         setIsOpen(true);
-      }, FADE_IN_DELAY);
+      } else {
+        fadeInTimeoutId.current = setTimeout(function () {
+          setIsOpen(true);
+        }, FADE_IN_DELAY);
+      }
     }
-  }, [initResolve, isOpen, setMousePosition]);
+  }, [initResolve, isOpen, setMousePosition, noFadeDelay]);
   var linkActions = (0, _useSmartLinkActions.useSmartLinkActions)({
     url: url,
     appearance: _constants.CardDisplay.HoverCardPreview,

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

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

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

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

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

@@ -93,7 +93,7 @@ var getSimulatedBetterMetadata = function getSimulatedBetterMetadata() {
   var types = data ? (0, _linkExtractors.extractType)(data) : undefined;
   var defaultMetadata = {
     topMetadataBlock: {
-      primary: [_constants.ElementName.CreatedBy, _constants.ElementName.ModifiedOn],
+      primary: [_constants.ElementName.AuthorGroup, _constants.ElementName.ModifiedOn],
       secondary: [],
       subtitle: []
     },

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

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

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

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

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

@@ -67,7 +67,8 @@ const FlexibleResolvedView = ({
     overrideCss: metadataBlockCss
   })), /*#__PURE__*/React.createElement(SnippetBlock, null), getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && /*#__PURE__*/React.createElement(MetadataBlock, {
     primary: bottomMetadata,
-    maxLines: 1
+    maxLines: 1,
+    overrideCss: metadataBlockCss
   }), !isPreviewBlockErrored ? /*#__PURE__*/React.createElement(PreviewBlock, {
     placement: MediaPlacement.Right,
     ignoreContainerPadding: true,

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

@@ -11,6 +11,9 @@ export const metadataBlockCss = css`
       padding-left: 0px;
     }
   }
+  [data-smart-element-group] {
+    line-height: 1rem;
+  }
 `;
 export const titleBlockCss = css`
   ${getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? `gap: 0.5em;` : ``}

package/dist/es2019/view/FlexibleCard/components/elements/atlaskit-badge/index.js

@@ -1,7 +1,12 @@
 /** @jsx jsx */
 import React from 'react';
 import AKBadge from '@atlaskit/badge';
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
+const badgeStyles = css`
+  align-items: center;
+  display: inline-flex;
+`;
+
 /**
  * A base element that displays a visual indicator for a numeric value
  * @internal
@@ -18,7 +23,7 @@ const AtlaskitBadge = ({
     return null;
   }
   return jsx("span", {
-    css: overrideCss,
+    css: [badgeStyles, overrideCss],
     "data-fit-to-content": true,
     "data-smart-element": name,
     "data-smart-element-atlaskit-badge": true,

package/dist/es2019/view/HoverCard/components/HoverCardComponent.js

@@ -29,7 +29,8 @@ export const HoverCardComponent = ({
   hidePreviewButton = false,
   showServerActions = false,
   allowEventPropagation = false,
-  zIndex = HOVER_CARD_Z_INDEX
+  zIndex = HOVER_CARD_Z_INDEX,
+  noFadeDelay = false
 }) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const fadeOutTimeoutId = useRef();
@@ -79,8 +80,12 @@ export const HoverCardComponent = ({
       // we want to clear out the reference to signify that there's no in-progress resolve event
       resolveTimeOutId.current = undefined;
     }
-    fadeOutTimeoutId.current = setTimeout(() => hideCard(), FADE_OUT_DELAY);
-  }, [hideCard]);
+    if (noFadeDelay) {
+      hideCard();
+    } else {
+      fadeOutTimeoutId.current = setTimeout(() => hideCard(), FADE_OUT_DELAY);
+    }
+  }, [hideCard, noFadeDelay]);
 
   // clearing out the timeouts in order to avoid memory leaks
   // in case the component unmounts before they execute
@@ -131,11 +136,15 @@ export const HoverCardComponent = ({
     setMousePosition(event);
     if (!isOpen && !fadeInTimeoutId.current) {
       // setting a timeout to show a Hover Card after delay runs out
-      fadeInTimeoutId.current = setTimeout(() => {
+      if (noFadeDelay) {
         setIsOpen(true);
-      }, FADE_IN_DELAY);
+      } else {
+        fadeInTimeoutId.current = setTimeout(() => {
+          setIsOpen(true);
+        }, FADE_IN_DELAY);
+      }
     }
-  }, [initResolve, isOpen, setMousePosition]);
+  }, [initResolve, isOpen, setMousePosition, noFadeDelay]);
   const linkActions = useSmartLinkActions({
     url,
     appearance: CardDisplay.HoverCardPreview,

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

@@ -1,9 +1,9 @@
 import { css } from '@emotion/react';
 import { separatorCss } from '../../../styled';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 const elementGap = '0.5rem';
 export const metadataBlockCss = css`
   gap: 0px;
-
   /* primary element group */
   [data-smart-element-group]:nth-of-type(1) {
     flex-grow: 7;
@@ -24,9 +24,12 @@ export const metadataBlockCss = css`
       margin-left: ${elementGap};
     }
   }
+  ${getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? `[data-smart-element-group] {
+       line-height: 1rem;
+    }` : ``}
 `;
 export const footerBlockCss = css`
-  padding-top: 0.25rem;
+  ${!getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? `padding-top: 0.25rem;` : ``}
 `;
 export const hiddenSnippetStyles = css`
   visibility: hidden;

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

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

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

@@ -78,7 +78,7 @@ export const getSimulatedBetterMetadata = (extensionKey = '', data) => {
   const types = data ? extractType(data) : undefined;
   const defaultMetadata = {
     topMetadataBlock: {
-      primary: [ElementName.CreatedBy, ElementName.ModifiedOn],
+      primary: [ElementName.AuthorGroup, ElementName.ModifiedOn],
       secondary: [],
       subtitle: []
     },

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

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

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

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

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

@@ -74,7 +74,8 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
     overrideCss: metadataBlockCss
   })), /*#__PURE__*/React.createElement(SnippetBlock, null), getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && /*#__PURE__*/React.createElement(MetadataBlock, {
     primary: bottomMetadata,
-    maxLines: 1
+    maxLines: 1,
+    overrideCss: metadataBlockCss
   }), !isPreviewBlockErrored ? /*#__PURE__*/React.createElement(PreviewBlock, {
     placement: MediaPlacement.Right,
     ignoreContainerPadding: true,

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

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

package/dist/esm/view/FlexibleCard/components/elements/atlaskit-badge/index.js

@@ -1,7 +1,11 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
 /** @jsx jsx */
 import React from 'react';
 import AKBadge from '@atlaskit/badge';
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
+var badgeStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  display: inline-flex;\n"])));
+
 /**
  * A base element that displays a visual indicator for a numeric value
  * @internal
@@ -18,7 +22,7 @@ var AtlaskitBadge = function AtlaskitBadge(_ref) {
     return null;
   }
   return jsx("span", {
-    css: overrideCss,
+    css: [badgeStyles, overrideCss],
     "data-fit-to-content": true,
     "data-smart-element": name,
     "data-smart-element-atlaskit-badge": true,

package/dist/esm/view/HoverCard/components/HoverCardComponent.js

@@ -37,7 +37,9 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
     _ref$allowEventPropag = _ref.allowEventPropagation,
     allowEventPropagation = _ref$allowEventPropag === void 0 ? false : _ref$allowEventPropag,
     _ref$zIndex = _ref.zIndex,
-    zIndex = _ref$zIndex === void 0 ? HOVER_CARD_Z_INDEX : _ref$zIndex;
+    zIndex = _ref$zIndex === void 0 ? HOVER_CARD_Z_INDEX : _ref$zIndex,
+    _ref$noFadeDelay = _ref.noFadeDelay,
+    noFadeDelay = _ref$noFadeDelay === void 0 ? false : _ref$noFadeDelay;
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isOpen = _React$useState2[0],
@@ -87,10 +89,14 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
       // we want to clear out the reference to signify that there's no in-progress resolve event
       resolveTimeOutId.current = undefined;
     }
-    fadeOutTimeoutId.current = setTimeout(function () {
-      return hideCard();
-    }, FADE_OUT_DELAY);
-  }, [hideCard]);
+    if (noFadeDelay) {
+      hideCard();
+    } else {
+      fadeOutTimeoutId.current = setTimeout(function () {
+        return hideCard();
+      }, FADE_OUT_DELAY);
+    }
+  }, [hideCard, noFadeDelay]);
 
   // clearing out the timeouts in order to avoid memory leaks
   // in case the component unmounts before they execute
@@ -141,11 +147,15 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
     setMousePosition(event);
     if (!isOpen && !fadeInTimeoutId.current) {
       // setting a timeout to show a Hover Card after delay runs out
-      fadeInTimeoutId.current = setTimeout(function () {
+      if (noFadeDelay) {
         setIsOpen(true);
-      }, FADE_IN_DELAY);
+      } else {
+        fadeInTimeoutId.current = setTimeout(function () {
+          setIsOpen(true);
+        }, FADE_IN_DELAY);
+      }
     }
-  }, [initResolve, isOpen, setMousePosition]);
+  }, [initResolve, isOpen, setMousePosition, noFadeDelay]);
   var linkActions = useSmartLinkActions({
     url: url,
     appearance: CardDisplay.HoverCardPreview,

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

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

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

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

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

@@ -85,7 +85,7 @@ export var getSimulatedBetterMetadata = function getSimulatedBetterMetadata() {
   var types = data ? extractType(data) : undefined;
   var defaultMetadata = {
     topMetadataBlock: {
-      primary: [ElementName.CreatedBy, ElementName.ModifiedOn],
+      primary: [ElementName.AuthorGroup, ElementName.ModifiedOn],
       secondary: [],
       subtitle: []
     },

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

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

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

@@ -61,6 +61,10 @@ export interface HoverCardInternalProps {
      * @see EDM-7187 for further details
      */
     allowEventPropagation?: boolean;
+    /**
+     * Suspend hover card UI delays (fade-in, fade-out) for VR testing purposes.
+     */
+    noFadeDelay?: boolean;
 }
 export interface HoverCardComponentProps extends HoverCardProps, HoverCardInternalProps {
     analyticsHandler?: AnalyticsHandler;

package/dist/types-ts4.5/view/HoverCard/types.d.ts

@@ -61,6 +61,10 @@ export interface HoverCardInternalProps {
      * @see EDM-7187 for further details
      */
     allowEventPropagation?: boolean;
+    /**
+     * Suspend hover card UI delays (fade-in, fade-out) for VR testing purposes.
+     */
+    noFadeDelay?: boolean;
 }
 export interface HoverCardComponentProps extends HoverCardProps, HoverCardInternalProps {
     analyticsHandler?: AnalyticsHandler;

package/package.json

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