@atlaskit/smart-card 26.13.1 → 26.14.1

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

@@ -1,10 +1,14 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React, { useEffect, useState } from 'react';
 import FlexibleCard from '../../../FlexibleCard';
 import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
 import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock } from '../../../FlexibleCard/components/blocks';
-import { ActionName, CardDisplay, ElementName, MediaPlacement, SmartLinkPosition } from '../../../../constants';
+import { metadataBlockCss, titleBlockCss } from './styled';
+import { ActionName, CardDisplay, ElementName, MediaPlacement, SmartLinkPosition, SmartLinkSize } from '../../../../constants';
 import uuid from 'uuid';
-import { extractOwnedBy } from '../../../../extractors/flexible/utils';
+import { getSimulatedMetadata, getSimulatedBetterMetadata } from './utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+
 /**
  * This view represents a Block card that has an 'Resolved' status.
  * @see SmartLinkStatus
@@ -23,36 +27,16 @@ const FlexibleResolvedView = ({
   url,
   analytics
 }) => {
-  var _cardState$details, _cardState$details2;
   const [isPreviewBlockErrored, setIsPreviewBlockErrored] = useState(false);
   useEffect(() => {
     setIsPreviewBlockErrored(false);
   }, [url, cardState]);
   const [analyticsId] = useState(() => id ? id : uuid());
-  const baseMetadata = [{
-    name: ElementName.ModifiedOn
-  }, {
-    name: ElementName.AttachmentCount
-  }, {
-    name: ElementName.CommentCount
-  }, {
-    name: ElementName.ReactCount
-  }, {
-    name: ElementName.SubscriberCount
-  }, {
-    name: ElementName.ViewCount
-  }, {
-    name: ElementName.VoteCount
-  }, {
-    name: ElementName.ChecklistProgress
-  }, {
-    name: ElementName.DueOn
-  }];
-  const metadata = cardState !== null && cardState !== void 0 && (_cardState$details = cardState.details) !== null && _cardState$details !== void 0 && _cardState$details.data && extractOwnedBy(cardState === null || cardState === void 0 ? void 0 : (_cardState$details2 = cardState.details) === null || _cardState$details2 === void 0 ? void 0 : _cardState$details2.data) ? [{
-    name: ElementName.OwnedBy
-  }, ...baseMetadata] : [{
-    name: ElementName.ModifiedBy
-  }, ...baseMetadata];
+  const {
+    titleMetadata,
+    topMetadata,
+    bottomMetadata
+  } = getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? getSimulatedBetterMetadata(cardState.details) : getSimulatedMetadata(cardState.details);
   return /*#__PURE__*/React.createElement(FlexibleCard, {
     analytics: analytics,
     appearance: "block",
@@ -64,25 +48,27 @@ const FlexibleResolvedView = ({
     testId: testId,
     ui: ui,
     url: url
-  }, /*#__PURE__*/React.createElement(TitleBlock, {
+  }, /*#__PURE__*/React.createElement(TitleBlock, _extends({
     position: SmartLinkPosition.Center,
-    metadata: [{
-      name: ElementName.AuthorGroup
-    }, {
-      name: ElementName.Priority
-    }, {
-      name: ElementName.State
-    }],
+    metadata: titleMetadata,
     hideRetry: true,
     subtitle: [{
       name: ElementName.Location
     }],
     metadataPosition: SmartLinkPosition.Top,
     anchorTarget: anchorTarget
-  }), /*#__PURE__*/React.createElement(MetadataBlock, {
-    primary: metadata,
+  }, getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
+    overrideCss: titleBlockCss,
+    size: SmartLinkSize.Large
+  })), /*#__PURE__*/React.createElement(MetadataBlock, _extends({
+    primary: topMetadata,
+    maxLines: 1
+  }, getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
+    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
-  }), /*#__PURE__*/React.createElement(SnippetBlock, null), !isPreviewBlockErrored ? /*#__PURE__*/React.createElement(PreviewBlock, {
+  }), !isPreviewBlockErrored ? /*#__PURE__*/React.createElement(PreviewBlock, {
     placement: MediaPlacement.Right,
     ignoreContainerPadding: true,
     onError: () => {

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

@@ -0,0 +1,14 @@
+import { css } from '@emotion/react';
+
+// in editor prosemirror adds padding-left so we need to overwrite it
+export const metadataBlockCss = css`
+  /* primary element group */
+  [data-smart-element-avatar-group] {
+    > ul {
+      padding-left: 0px;
+    }
+  }
+`;
+export const titleBlockCss = css`
+  gap: 0.5em;
+`;

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

@@ -0,0 +1,108 @@
+import { ElementName } from '../../../../constants';
+import { extractOwnedBy, extractAssignedTo } from '../../../../extractors/flexible/utils';
+import { getExtensionKey } from '../../../../state/helpers';
+const baseTopMetadata = [{
+  name: ElementName.ModifiedOn
+}, {
+  name: ElementName.AttachmentCount
+}, {
+  name: ElementName.SubscriberCount
+}, {
+  name: ElementName.VoteCount
+}, {
+  name: ElementName.DueOn
+}, {
+  name: ElementName.ReadTime
+}];
+const baseBottomMetaData = [{
+  name: ElementName.ReactCount
+}, {
+  name: ElementName.CommentCount
+}, {
+  name: ElementName.ViewCount
+}, {
+  name: ElementName.Priority
+}, {
+  name: ElementName.SubTasksProgress
+}, {
+  name: ElementName.ChecklistProgress
+}];
+export const getSimulatedBetterMetadata = cardDetails => {
+  var _getExtensionKey;
+  const extensionKey = (_getExtensionKey = getExtensionKey(cardDetails)) !== null && _getExtensionKey !== void 0 ? _getExtensionKey : '';
+  const data = cardDetails === null || cardDetails === void 0 ? void 0 : cardDetails.data;
+  const defaultTitleMetadata = [{
+    name: ElementName.State
+  }];
+  const defaultTopMetadata = [{
+    name: ElementName.AuthorGroup
+  }, {
+    name: ElementName.CreatedBy
+  }, ...baseTopMetadata];
+  const defaultBottomMetadata = baseBottomMetaData;
+  switch (extensionKey) {
+    case 'confluence-object-provider':
+      return {
+        titleMetadata: defaultTitleMetadata,
+        topMetadata: extractOwnedBy(data) ? [{
+          name: ElementName.OwnedByGroup
+        }, {
+          name: ElementName.OwnedBy
+        }, ...baseTopMetadata] : defaultTopMetadata,
+        bottomMetadata: defaultBottomMetadata
+      };
+    case 'jira-object-provider':
+      return {
+        titleMetadata: defaultTitleMetadata,
+        topMetadata: extractAssignedTo(data) ? [{
+          name: ElementName.AssignedToGroup
+        }, {
+          name: ElementName.AssignedTo
+        }, ...baseTopMetadata] : defaultTopMetadata,
+        bottomMetadata: defaultBottomMetadata
+      };
+    default:
+      return {
+        titleMetadata: defaultTitleMetadata,
+        topMetadata: defaultTopMetadata,
+        bottomMetadata: defaultBottomMetadata
+      };
+  }
+};
+export const getSimulatedMetadata = cardDetails => {
+  const baseMetadata = [{
+    name: ElementName.ModifiedOn
+  }, {
+    name: ElementName.AttachmentCount
+  }, {
+    name: ElementName.CommentCount
+  }, {
+    name: ElementName.ReactCount
+  }, {
+    name: ElementName.SubscriberCount
+  }, {
+    name: ElementName.ViewCount
+  }, {
+    name: ElementName.VoteCount
+  }, {
+    name: ElementName.ChecklistProgress
+  }, {
+    name: ElementName.DueOn
+  }];
+  const topMetadata = cardDetails !== null && cardDetails !== void 0 && cardDetails.data && extractOwnedBy(cardDetails === null || cardDetails === void 0 ? void 0 : cardDetails.data) ? [{
+    name: ElementName.OwnedBy
+  }, ...baseMetadata] : [{
+    name: ElementName.ModifiedBy
+  }, ...baseMetadata];
+  const titleMetadata = [{
+    name: ElementName.AuthorGroup
+  }, {
+    name: ElementName.Priority
+  }, {
+    name: ElementName.State
+  }];
+  return {
+    titleMetadata,
+    topMetadata
+  };
+};

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

@@ -2,41 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { IntlProvider } from 'react-intl-next';
-import Icon from '../FlexibleCard/components/elements/icon';
-import { SmartLinkSize } from '../../constants';
-export const openPreviewModal = ({
-  analytics,
-  downloadUrl: download,
-  isSupportTheming,
-  linkIcon,
-  onClose = () => {},
-  providerName,
-  src,
-  title,
-  url
-}) => {
-  const EmbedIcon = {
-    icon: /*#__PURE__*/React.createElement(Icon, _extends({}, linkIcon, {
-      size: SmartLinkSize.Large
-    })),
-    isFlexibleUi: true
-  };
-  return previewFunction({
-    popupMountPointId: 'twp-editor-preview-iframe',
-    showModal: true,
-    iframeName: 'twp-editor-preview-iframe',
-    onClose,
-    download,
-    icon: EmbedIcon,
-    providerName: providerName || 'Preview',
-    src,
-    title,
-    url,
-    analytics,
-    origin: 'smartLinkCard',
-    isSupportTheming
-  });
-};
+const IFRAME_NAME = 'twp-editor-preview-iframe';
+const POPUP_MOUNT_POINT_ID = 'twp-editor-preview-iframe';
 
 /*
   Explanatory note:
@@ -51,30 +18,31 @@ export const openPreviewModal = ({
   you find an elegant solution around this, you should definitely feel free to
   refactor it.
 */
-export async function previewFunction({
-  popupMountPointId,
-  onClose: onEmbedClose,
-  ...rest
-}) {
+export async function openEmbedModal({
+  onClose = () => {},
+  ...props
+} = {}) {
   let popupMountPoint;
-  popupMountPoint = document.getElementById(popupMountPointId);
+  popupMountPoint = document.getElementById(POPUP_MOUNT_POINT_ID);
   if (!popupMountPoint) {
     popupMountPoint = document.createElement('div');
-    popupMountPoint.id = popupMountPointId;
+    popupMountPoint.id = POPUP_MOUNT_POINT_ID;
     popupMountPoint.setAttribute('data-testid', 'preview-modal');
     document.body.appendChild(popupMountPoint);
   }
   let Modal = await import('./index');
   ReactDOM.render( /*#__PURE__*/React.createElement(IntlProvider, {
     locale: "en"
-  }, /*#__PURE__*/React.createElement(Modal.default, _extends({}, rest, {
+  }, /*#__PURE__*/React.createElement(Modal.default, _extends({}, props, {
+    iframeName: IFRAME_NAME,
     onClose: _context => {
       if (popupMountPoint) {
         ReactDOM.unmountComponentAtNode(popupMountPoint);
       }
-      if (onEmbedClose) {
-        onEmbedClose(_context);
+      if (onClose) {
+        onClose(_context);
       }
-    }
+    },
+    showModal: true
   }))), popupMountPoint);
 }

package/dist/es2019/view/FlexibleCard/components/actions/action/preview-action/index.js

@@ -3,10 +3,10 @@ import React from 'react';
 import Action from '../index';
 import { useFlexibleUiAnalyticsContext } from '../../../../../../state/flexible-ui-context';
 import { useSmartLinkAnalytics } from '../../../../../../state';
-import { openPreviewModal } from '../../../../../EmbedModal/utils';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '../../../../../../messages';
 import { useFeatureFlag } from '@atlaskit/link-provider';
+import { openEmbedModalWithFlexibleUiIcon } from '../../../utils';
 const PreviewAction = props => {
   const {
     appearance,
@@ -26,7 +26,7 @@ const PreviewAction = props => {
   const enableImprovedPreviewAction = Boolean(useFeatureFlag('enableImprovedPreviewAction'));
   const previewText = enableImprovedPreviewAction ? messages.preview_improved : messages.preview;
   if (src && url) {
-    const embedModal = () => openPreviewModal({
+    const embedModal = () => openEmbedModalWithFlexibleUiIcon({
       title,
       providerName,
       downloadUrl,

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

@@ -10,6 +10,8 @@ import ElementGroup from './element-group';
 // Determine whether the element can be display as inline/block.
 
 export const ElementDisplaySchema = {
+  [ElementName.AssignedTo]: ['inline'],
+  [ElementName.AssignedToGroup]: ['inline'],
   [ElementName.AttachmentCount]: ['inline'],
   [ElementName.AuthorGroup]: ['inline'],
   [ElementName.ChecklistProgress]: ['inline'],
@@ -24,15 +26,18 @@ export const ElementDisplaySchema = {
   [ElementName.ModifiedBy]: ['inline'],
   [ElementName.ModifiedOn]: ['inline'],
   [ElementName.OwnedBy]: ['inline'],
+  [ElementName.OwnedByGroup]: ['inline'],
   [ElementName.Preview]: ['block'],
   [ElementName.Priority]: ['inline'],
   [ElementName.ProgrammingLanguage]: ['inline'],
   [ElementName.Provider]: ['inline'],
   [ElementName.ReactCount]: ['inline'],
+  [ElementName.ReadTime]: ['inline'],
   [ElementName.Snippet]: ['block'],
   [ElementName.SourceBranch]: ['inline'],
   [ElementName.State]: ['inline'],
   [ElementName.SubscriberCount]: ['inline'],
+  [ElementName.SubTasksProgress]: ['inline'],
   [ElementName.TargetBranch]: ['inline'],
   [ElementName.Title]: ['inline'],
   [ElementName.ViewCount]: ['inline'],

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

@@ -3,6 +3,16 @@ import { ElementName } from '../../../../constants';
 // Attention: Keep the export name and element name the same.
 // This will help reducing the code for mapping elements inside
 // createElement and renderElementItems
+/**
+ * Creates a AssignedTo text element using the data from AssignedTo in the Flexible UI Context.
+ * @see Text
+ */
+export const AssignedTo = createElement(ElementName.AssignedTo);
+/**
+ * An AvatarGroup element using the data from AssignedToGroup in the Flexible UI Context.
+ * @see AvatarGroup
+ */
+export const AssignedToGroup = createElement(ElementName.AssignedToGroup);
 /**
  * Creates a AttachmentCount Badge element using the data from AttachmentCount in the Flexible UI Context.
  * @see Badge
@@ -73,6 +83,11 @@ export const ModifiedOn = createElement(ElementName.ModifiedOn);
  * @see Text
  */
 export const OwnedBy = createElement(ElementName.OwnedBy);
+/**
+ * An AvatarGroup element using the data from OwnedByGroup in the Flexible UI Context.
+ * @see AvatarGroup
+ */
+export const OwnedByGroup = createElement(ElementName.OwnedByGroup);
 /**
  * Creates a Preview element using the data from Preview in the Flexible UI Context.
  * @see Preview
@@ -98,6 +113,10 @@ export const Provider = createElement(ElementName.Provider);
  * @see Badge
  */
 export const ReactCount = createElement(ElementName.ReactCount);
+/**
+ * Creates a ReadTime Text element using the data from readTime in the Flexible UI Context
+ */
+export const ReadTime = createElement(ElementName.ReadTime);
 /**
  * Creates a Snippet element using the data from Snippet in the Flexible UI Context.
  * @see Text
@@ -118,6 +137,11 @@ export const State = createElement(ElementName.State);
  * @see Badge
  */
 export const SubscriberCount = createElement(ElementName.SubscriberCount);
+/**
+ * Create a SubTasks Badge element using the data from subTasks in the Flexible UI Context.
+ * @see Badge
+ */
+export const SubTasksProgress = createElement(ElementName.SubTasksProgress);
 /**
  * Creates a TargetBranch Text element using the data from targetBranch in the Flexible UI Context.
  * @see Text

package/dist/es2019/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-error/index.js

@@ -6,10 +6,9 @@ import { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
 import { R50, R500 } from '@atlaskit/theme/colors';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import { dropdownItemGroupStyles, contentStyles, linkStyles, textStyles } from './styled';
-import { getFormattedMessage } from '../../../../utils';
+import { getFormattedMessage, openEmbedModalWithFlexibleUiIcon } from '../../../../utils';
 import { messages } from '../../../../../../../messages';
 import { useFlexibleUiAnalyticsContext } from '../../../../../../../state/flexible-ui-context';
-import { openPreviewModal } from '../../../../../../EmbedModal/utils';
 import useResolve from '../../../../../../../state/hooks/use-resolve';
 const MAX_LINE_NUMBER = 8;
 const LozengeActionError = ({
@@ -30,7 +29,7 @@ const LozengeActionError = ({
   const handlePreviewOpen = useCallback(() => {
     if (isPreviewAvailable) {
       analytics === null || analytics === void 0 ? void 0 : analytics.ui.smartLinkLozengeActionErrorOpenPreviewClickedEvent();
-      return openPreviewModal({
+      return openEmbedModalWithFlexibleUiIcon({
         ...previewData,
         analytics,
         onClose: handlePreviewClose

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

@@ -64,6 +64,15 @@ const elementMappings = {
   [ElementName.OwnedBy]: {
     component: Text
   },
+  [ElementName.AssignedTo]: {
+    component: Text
+  },
+  [ElementName.AssignedToGroup]: {
+    component: AvatarGroup
+  },
+  [ElementName.OwnedByGroup]: {
+    component: AvatarGroup
+  },
   [ElementName.CreatedOn]: {
     component: DateTime
   },
@@ -100,6 +109,9 @@ const elementMappings = {
   [ElementName.Provider]: {
     component: Badge
   },
+  [ElementName.ReadTime]: {
+    component: Text
+  },
   [ElementName.Snippet]: {
     component: Text,
     props: {
@@ -121,6 +133,12 @@ const elementMappings = {
       icon: IconType.Subscriber
     }
   },
+  [ElementName.SubTasksProgress]: {
+    component: Badge,
+    props: {
+      icon: IconType.CheckItem
+    }
+  },
   [ElementName.TargetBranch]: {
     component: Text
   },
@@ -146,7 +164,9 @@ const getData = (elementName, contextKey, context) => {
   const data = context[contextKey];
   switch (elementName) {
     case ElementName.AuthorGroup:
+    case ElementName.AssignedToGroup:
     case ElementName.CollaboratorGroup:
+    case ElementName.OwnedByGroup:
       return toAvatarGroupProps(data);
     case ElementName.AttachmentCount:
     case ElementName.ChecklistProgress:
@@ -157,9 +177,12 @@ const getData = (elementName, contextKey, context) => {
     case ElementName.ProgrammingLanguage:
     case ElementName.SubscriberCount:
     case ElementName.LatestCommit:
+    case ElementName.SubTasksProgress:
       return toBadgeProps(data);
     case ElementName.CreatedBy:
       return toFormattedTextProps(messages.created_by, context.createdBy);
+    case ElementName.AssignedTo:
+      return toFormattedTextProps(messages.assigned_to, context.assignedTo);
     case ElementName.OwnedBy:
       return toFormattedTextProps(messages.owned_by, context.ownedBy);
     case ElementName.CreatedOn:
@@ -170,6 +193,8 @@ const getData = (elementName, contextKey, context) => {
       return toFormattedTextProps(messages.modified_by, context.modifiedBy);
     case ElementName.ModifiedOn:
       return toDateTimeProps('modified', context.modifiedOn);
+    case ElementName.ReadTime:
+      return toFormattedTextProps(messages.read_time, data);
     case ElementName.Snippet:
     case ElementName.SourceBranch:
     case ElementName.TargetBranch:

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

@@ -3,6 +3,8 @@ import React from 'react';
 import { css } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { SmartLinkSize } from '../../../constants';
+import Icon from './elements/icon';
+import { openEmbedModal } from '../../EmbedModal/utils';
 export const sizeToButtonSpacing = {
   [SmartLinkSize.Small]: 'none',
   [SmartLinkSize.Medium]: 'compact',
@@ -130,4 +132,37 @@ export const getTruncateStyles = (maxLines, lineHeight = '1rem', wordBreak = 'br
   `;
 export const hasWhiteSpace = str => {
   return str.search(/\s/) >= 0;
+};
+export const openEmbedModalWithFlexibleUiIcon = ({
+  analytics,
+  downloadUrl,
+  linkIcon,
+  onClose,
+  providerName,
+  src,
+  title,
+  url,
+  isSupportTheming
+}) => {
+  const icon = {
+    icon: /*#__PURE__*/React.createElement(Icon, _extends({}, linkIcon, {
+      size: SmartLinkSize.Large
+    })),
+    isFlexibleUi: true
+  };
+  return openEmbedModal({
+    analytics,
+    download: downloadUrl,
+    icon,
+    // Flex should not send origin as block card. It should be able to support
+    // its internal parent components like hover card, block card and
+    // itself as a standalone. To be investigated and fix in EDM-7520.
+    origin: 'smartLinkCard',
+    providerName,
+    onClose,
+    src,
+    title,
+    url,
+    isSupportTheming
+  });
 };

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

@@ -5,11 +5,12 @@ import { ActionName, CardDisplay, SmartLinkPosition, SmartLinkSize } from '../..
 import { FooterBlock, MetadataBlock, SnippetBlock, TitleBlock } from '../../../../FlexibleCard/components/blocks';
 import { footerBlockCss, hiddenSnippetStyles, metadataBlockCss } from './styled';
 import FlexibleCard from '../../../../FlexibleCard';
-import { getSimulatedMetadata } from '../../../utils';
+import { getSimulatedMetadata, getSimulatedBetterMetadata } from '../../../utils';
 import SnippetOrPreview from '../../SnippetOrPreview';
-import { extractMetadata } from '../../../../../extractors/hover/extractMetadata';
+import { extractMetadata, elementNamesToItems } from '../../../../../extractors/hover/extractMetadata';
 import { messages } from '../../../../../messages';
 import { FormattedMessage } from 'react-intl-next';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export const toFooterActions = (cardActions, onActionClick, enableImprovedPreviewAction) => {
   const appearance = enableImprovedPreviewAction ? {
     appearance: 'primary'
@@ -67,15 +68,23 @@ const HoverCardResolvedView = ({
   const footerActions = useMemo(() => toFooterActions(cardActions, onActionClick, Boolean(enableImprovedPreviewAction)), [cardActions, onActionClick, enableImprovedPreviewAction]);
   const data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   const {
-    primary,
-    secondary
+    topPrimary,
+    topSecondary,
+    bottomPrimary
   } = useMemo(() => {
-    //TODO: EDM-3224 deleted simulated and use real JsonLd
+    if (getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg')) {
+      const betterMetadata = getSimulatedBetterMetadata(extensionKey, data);
+      return {
+        topPrimary: elementNamesToItems(betterMetadata.topMetadataBlock.primary),
+        topSecondary: elementNamesToItems(betterMetadata.topMetadataBlock.secondary),
+        bottomPrimary: elementNamesToItems(betterMetadata.bottomMetadataBlock.primary)
+      };
+    }
     const metadata = extractMetadata(getSimulatedMetadata(extensionKey, data));
     return {
-      primary: metadata.primary,
-      secondary: metadata.secondary,
-      subtitle: metadata.subtitle
+      topPrimary: metadata.primary,
+      topSecondary: metadata.secondary,
+      bottomPrimary: []
     };
   }, [data, extensionKey]);
   const snippetHeight = React.useRef(0);
@@ -90,17 +99,24 @@ const HoverCardResolvedView = ({
   });
   return /*#__PURE__*/React.createElement(FlexibleCard, flexibleCardProps, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, titleBlockProps, {
     metadataPosition: SmartLinkPosition.Top
-  })), /*#__PURE__*/React.createElement(MetadataBlock, {
-    primary: primary,
-    secondary: secondary,
-    size: SmartLinkSize.Large,
+  })), /*#__PURE__*/React.createElement(MetadataBlock, _extends({
+    primary: topPrimary,
+    secondary: topSecondary,
     overrideCss: metadataBlockCss,
-    maxLines: 1
-  }), body, /*#__PURE__*/React.createElement(SnippetBlock, {
+    maxLines: 1,
+    size: SmartLinkSize.Large
+  }, getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
+    size: SmartLinkSize.Medium
+  })), body, /*#__PURE__*/React.createElement(SnippetBlock, {
     testId: 'hidden-snippet',
     onRender: onSnippetRender,
     blockRef: snippetBlockRef,
     overrideCss: hiddenSnippetStyles
+  }), getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && /*#__PURE__*/React.createElement(MetadataBlock, {
+    primary: bottomPrimary,
+    size: SmartLinkSize.Large,
+    overrideCss: metadataBlockCss,
+    maxLines: 1
   }), /*#__PURE__*/React.createElement(FooterBlock, {
     actions: footerActions,
     size: SmartLinkSize.Large,