@atlaskit/smart-card 19.1.25 → 19.1.28

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/smart-card
 
+## 19.1.28
+
+### Patch Changes
+
+- [`455538b6a3f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/455538b6a3f) - use useFeatureFlag hook to get hover preview FF
+
+## 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

package/dist/cjs/version.json

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

package/dist/cjs/view/CardWithUrl/component.js

@@ -11,6 +11,8 @@ exports.CardWithUrlContent = CardWithUrlContent;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _linkProvider = require("@atlaskit/link-provider");
+
 var _utils = require("../../utils");
 
 var measure = _interopRequireWildcard(require("../../utils/performance"));
@@ -73,7 +75,13 @@ function CardWithUrlContent(_ref) {
   var services = (0, _helpers.getServices)(state.details);
   var isFlexibleUi = (0, _react.useMemo)(function () {
     return (0, _flexible.isFlexibleUiCard)(children);
-  }, [children]); // Setup UI handlers.
+  }, [children]);
+  var showHoverPreviewFlag = (0, _linkProvider.useFeatureFlag)('showHoverPreview');
+
+  if (showHoverPreview === undefined && showHoverPreviewFlag !== undefined) {
+    showHoverPreview = showHoverPreviewFlag;
+  } // Setup UI handlers.
+
 
   var handleClick = (0, _react.useCallback)(function (event) {
     var clickUrl = (0, _helpers.getClickUrl)(url, state.details);

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) {
@@ -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/version.json

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

package/dist/es2019/view/CardWithUrl/component.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useCallback, useMemo } from 'react';
+import { useFeatureFlag } from '@atlaskit/link-provider';
 import { isSpecialEvent } from '../../utils';
 import * as measure from '../../utils/performance';
 import { getDefinitionId, getServices, isFinalState, getClickUrl, getResourceType, getExtensionKey, getSubproduct, getProduct } from '../../state/helpers';
@@ -45,7 +46,13 @@ export function CardWithUrlContent({
   const product = getProduct(state.details);
   const subproduct = getSubproduct(state.details);
   const services = getServices(state.details);
-  let isFlexibleUi = useMemo(() => isFlexibleUiCard(children), [children]); // Setup UI handlers.
+  let isFlexibleUi = useMemo(() => isFlexibleUiCard(children), [children]);
+  const showHoverPreviewFlag = useFeatureFlag('showHoverPreview');
+
+  if (showHoverPreview === undefined && showHoverPreviewFlag !== undefined) {
+    showHoverPreview = showHoverPreviewFlag;
+  } // Setup UI handlers.
+
 
   const handleClick = useCallback(event => {
     const clickUrl = getClickUrl(url, state.details);

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) => ({
@@ -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/version.json

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

package/dist/esm/view/CardWithUrl/component.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useCallback, useMemo } from 'react';
+import { useFeatureFlag } from '@atlaskit/link-provider';
 import { isSpecialEvent } from '../../utils';
 import * as measure from '../../utils/performance';
 import { getDefinitionId, getServices, isFinalState, getClickUrl, getResourceType, getExtensionKey, getSubproduct, getProduct } from '../../state/helpers';
@@ -47,7 +48,13 @@ export function CardWithUrlContent(_ref) {
   var services = getServices(state.details);
   var isFlexibleUi = useMemo(function () {
     return isFlexibleUiCard(children);
-  }, [children]); // Setup UI handlers.
+  }, [children]);
+  var showHoverPreviewFlag = useFeatureFlag('showHoverPreview');
+
+  if (showHoverPreview === undefined && showHoverPreviewFlag !== undefined) {
+    showHoverPreview = showHoverPreviewFlag;
+  } // Setup UI handlers.
+
 
   var handleClick = useCallback(function (event) {
     var clickUrl = getClickUrl(url, state.details);

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) {
@@ -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
   }));
 };