@atlaskit/smart-card 38.5.0 → 38.5.2

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

@@ -1,16 +1,53 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useContext } from 'react';
-import { FormattedDate } from 'react-intl-next';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { ElementName, IconType, SmartLinkInternalTheme } from '../../../../constants';
 import { messages } from '../../../../messages';
 import { FlexibleUiContext, useFlexibleUiContext } from '../../../../state/flexible-ui-context';
-import { isProfileType } from '../../../../utils';
 import AppliedToComponentsCount from './applied-to-components-count-element';
-import AtlaskitElementBadge from './atlaskit-badge-element';
-import { BaseAvatarGroupElement, BaseBadgeElement, BaseDateTimeElement, BaseLinkElement, BaseLozengeElement, BaseTextElement } from './common';
-import IconElement from './icon-element';
+import assignedToElement from './assigned-to-element';
+import assignedToGroupElement from './assigned-to-group-element';
+import attachmentCountElement from './attachment-count-element';
+import authorGroupElement from './author-group-element';
+import checklistProgressElement from './checklist-progress-element';
+import collaboratorGroupElement from './collaborator-group-element';
+import commentCountElement from './comment-count-element';
+import { BaseAtlaskitBadgeElement, BaseAvatarGroupElement, BaseBadgeElement, BaseDateTimeElement, BaseIconElement, BaseLinkElement, BaseLozengeElement, BaseTextElement, toAtlaskitBadgeProps, toAvatarGroupProps, toBadgeProps, toDateLozengeProps, toDateTimeProps, toFormattedTextProps, toLinkIconProps, toLinkProps, toTextProps } from './common';
+import createdByElement from './created-by-element';
+import createdOnElement from './created-on-element';
+import dueOnElement from './due-on-element';
+import latestCommitElement from './latest-commit-element';
+import linkIconElement from './link-icon-element';
+import locationElement from './location-element';
 import MediaElement from './media-element';
+import modifiedByElement from './modified-by-element';
+import modifiedOnElement from './modified-on-element';
+import ownedByElement from './owned-by-element';
+import ownedByGroupElement from './owned-by-group-element';
+import previewElement from './preview-element';
+import priorityElement from './priority-element';
+import programmingLanguageElement from './programming-language-element';
+import providerElement from './provider-element';
+import reactCountElement from './react-count-element';
+import readTimeElement from './read-time-element';
+import sentOnElement from './sent-on-element';
+import sourceBranchElement from './source-branch-element';
+import stateElement from './state-element';
+import storyPointsElement from './story-points-element';
+import subTasksProgressElement from './sub-tasks-progress-element';
+import subscriberCountElement from './subscriber-count-element';
+import targetBranchElement from './target-branch-element';
+import titleElement from './title-element';
+import viewCountElement from './view-count-element';
+import voteCountElement from './vote-count-element';
+
+/**
+ * @deprecated remove on FG clean up platform-linking-flexible-card-elements-refactor
+ */
+
+/**
+ * @deprecated remove on FG clean up platform-linking-flexible-card-elements-refactor
+ */
 const elementMappings = {
   [ElementName.AppliedToComponentsCount]: {
     component: AppliedToComponentsCount,
@@ -22,138 +59,171 @@ const elementMappings = {
     component: BaseBadgeElement,
     props: {
       icon: IconType.Attachment
-    }
+    },
+    newComponent: attachmentCountElement
   },
   [ElementName.AuthorGroup]: {
-    component: BaseAvatarGroupElement
+    component: BaseAvatarGroupElement,
+    newComponent: authorGroupElement
   },
   [ElementName.ChecklistProgress]: {
     component: BaseBadgeElement,
     props: {
       icon: IconType.CheckItem
-    }
+    },
+    newComponent: checklistProgressElement
   },
   [ElementName.CollaboratorGroup]: {
-    component: BaseAvatarGroupElement
+    component: BaseAvatarGroupElement,
+    newComponent: collaboratorGroupElement
   },
   [ElementName.CommentCount]: {
     component: BaseBadgeElement,
     props: {
       icon: IconType.Comment
-    }
+    },
+    newComponent: commentCountElement
   },
   [ElementName.ViewCount]: {
     component: BaseBadgeElement,
     props: {
       icon: IconType.View
-    }
+    },
+    newComponent: viewCountElement
   },
   [ElementName.ReactCount]: {
     component: BaseBadgeElement,
     props: {
       icon: IconType.React
-    }
+    },
+    newComponent: reactCountElement
   },
   [ElementName.VoteCount]: {
     component: BaseBadgeElement,
     props: {
       icon: IconType.Vote
-    }
+    },
+    newComponent: voteCountElement
   },
   [ElementName.CreatedBy]: {
-    component: BaseTextElement
+    component: BaseTextElement,
+    newComponent: createdByElement
   },
   [ElementName.OwnedBy]: {
-    component: BaseTextElement
+    component: BaseTextElement,
+    newComponent: ownedByElement
   },
   [ElementName.AssignedTo]: {
-    component: BaseTextElement
+    component: BaseTextElement,
+    newComponent: assignedToElement
   },
   [ElementName.AssignedToGroup]: {
-    component: BaseAvatarGroupElement
+    component: BaseAvatarGroupElement,
+    newComponent: assignedToGroupElement
   },
   [ElementName.OwnedByGroup]: {
-    component: BaseAvatarGroupElement
+    component: BaseAvatarGroupElement,
+    newComponent: ownedByGroupElement
   },
   [ElementName.CreatedOn]: {
-    component: BaseDateTimeElement
+    component: BaseDateTimeElement,
+    newComponent: createdOnElement
   },
   [ElementName.DueOn]: {
-    component: BaseLozengeElement
+    component: BaseLozengeElement,
+    newComponent: dueOnElement
   },
   [ElementName.LatestCommit]: {
     component: BaseBadgeElement,
     props: {
       icon: IconType.Commit
-    }
+    },
+    newComponent: latestCommitElement
   },
   [ElementName.LinkIcon]: {
-    component: IconElement
+    component: BaseIconElement,
+    newComponent: linkIconElement
   },
   [ElementName.ModifiedBy]: {
-    component: BaseTextElement
+    component: BaseTextElement,
+    newComponent: modifiedByElement
   },
   [ElementName.ModifiedOn]: {
-    component: BaseDateTimeElement
+    component: BaseDateTimeElement,
+    newComponent: modifiedOnElement
   },
   [ElementName.Preview]: {
-    component: MediaElement
+    component: MediaElement,
+    newComponent: previewElement
   },
   [ElementName.Priority]: {
-    component: BaseBadgeElement
+    component: BaseBadgeElement,
+    newComponent: priorityElement
   },
   [ElementName.ProgrammingLanguage]: {
     component: BaseBadgeElement,
     props: {
       icon: IconType.ProgrammingLanguage
-    }
+    },
+    newComponent: programmingLanguageElement
   },
   [ElementName.Provider]: {
-    component: BaseBadgeElement
+    component: BaseBadgeElement,
+    newComponent: providerElement
   },
   [ElementName.ReadTime]: {
-    component: BaseTextElement
+    component: BaseTextElement,
+    newComponent: readTimeElement
   },
   [ElementName.SentOn]: {
-    component: BaseDateTimeElement
+    component: BaseDateTimeElement,
+    newComponent: sentOnElement
   },
   [ElementName.SourceBranch]: {
-    component: BaseTextElement
+    component: BaseTextElement,
+    newComponent: sourceBranchElement
   },
   [ElementName.State]: {
-    component: BaseLozengeElement
+    component: BaseLozengeElement,
+    newComponent: stateElement
   },
   [ElementName.SubscriberCount]: {
     component: BaseBadgeElement,
     props: {
       icon: IconType.Subscriber
-    }
+    },
+    newComponent: subscriberCountElement
   },
   [ElementName.SubTasksProgress]: {
     component: BaseBadgeElement,
     props: {
       icon: IconType.SubTasksProgress
-    }
+    },
+    newComponent: subTasksProgressElement
   },
   [ElementName.StoryPoints]: {
-    component: AtlaskitElementBadge
+    component: BaseAtlaskitBadgeElement,
+    newComponent: storyPointsElement
   },
   [ElementName.TargetBranch]: {
-    component: BaseTextElement
+    component: BaseTextElement,
+    newComponent: targetBranchElement
   },
   [ElementName.Title]: {
-    component: BaseLinkElement
+    component: BaseLinkElement,
+    newComponent: titleElement
   },
   [ElementName.Location]: {
     component: BaseLinkElement,
     props: {
       theme: SmartLinkInternalTheme.Grey
-    }
+    },
+    newComponent: locationElement
   }
 };
 
 /**
- * @deprecated
+ * @deprecated remove on FG clean up platform-linking-flexible-card-elements-refactor
  */
 const getContextKey = name => {
   // Attempt to predict context prop name in advance to reduce the amount of
@@ -162,7 +232,7 @@ const getContextKey = name => {
 };
 
 /**
- * @deprecated
+ * @deprecated remove on FG clean up platform-linking-flexible-card-elements-refactor
  */
 const getData = (elementName, contextKey, context) => {
   if (!context) {
@@ -213,6 +283,9 @@ const getData = (elementName, contextKey, context) => {
     case ElementName.TargetBranch:
       return toTextProps(data);
     case ElementName.Title:
+      if (fg('platform-linking-flexible-card-context')) {
+        return context.linkTitle;
+      }
       return toLinkProps(context.title, context.url);
     case ElementName.LinkIcon:
       if (fg('platform-linking-visual-refresh-v2')) {
@@ -223,97 +296,19 @@ const getData = (elementName, contextKey, context) => {
       return typeof data === 'object' ? data : undefined;
   }
 };
-const toAvatarGroupProps = (items, showFallbackAvatar) => {
-  return items ? {
-    items
-  } : showFallbackAvatar ? {
-    items: []
-  } : undefined;
-};
-const toBadgeProps = label => {
-  return label ? {
-    label
-  } : undefined;
-};
-const toAtlaskitBadgeProps = value => {
-  return value ? {
-    value
-  } : undefined;
-};
-const toDateLozengeProps = dateString => {
-  if (dateString) {
-    const text = Date.parse(dateString) ? /*#__PURE__*/React.createElement(FormattedDate, {
-      value: new Date(dateString),
-      year: "numeric",
-      month: "short",
-      day: "numeric",
-      formatMatcher: "best fit"
-    }) : dateString;
-    return {
-      text
-    };
-  }
-};
-const toDateTimeProps = (type, dateString) => {
-  return dateString ? {
-    date: new Date(dateString),
-    type
-  } : undefined;
-};
-const toFormattedTextProps = (descriptor, context) => {
-  if (fg('platform-linking-additional-flexible-element-props')) {
-    return context ? {
-      message: {
-        descriptor,
-        values: {
-          context
-        }
-      },
-      content: context
-    } : undefined;
-  }
-  return context ? {
-    message: {
-      descriptor,
-      values: {
-        context
-      }
-    }
-  } : undefined;
-};
-const toLinkProps = (text, url) => {
-  return text ? {
-    text,
-    url
-  } : undefined;
-};
-const toTextProps = content => {
-  return content ? {
-    content
-  } : undefined;
-};
-const toLinkIconProps = (data, type) => {
-  const isDataLinkIcon = _data => {
-    return typeof _data === 'object' && _data !== null && ('icon' in _data || 'url' in _data);
-  };
-  if (!isDataLinkIcon(data)) {
-    return typeof data === 'object' ? data : undefined;
-  }
-  const isImageRound = isProfileType(type);
-  return {
-    ...data,
-    appearance: isImageRound ? 'round' : 'square'
-  };
-};
 
 /**
- * @deprecated
+ * @deprecated remove on FG platform-linking-flexible-card-elements-refactor clean up
  */
 export const createElement = name => {
   const {
     component: BaseElement,
-    props
+    props,
+    newComponent
   } = elementMappings[name] || {};
+  if (newComponent && fg('platform-linking-flexible-card-elements-refactor')) {
+    return newComponent;
+  }
   const contextKey = getContextKey(name);
   if (!BaseElement) {
     throw Error(`Element ${name} does not exist.`);

package/dist/es2019/view/FlexibleCard/components/elements/view-count-element/index.js

@@ -0,0 +1,16 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { ElementName, IconType } from '../../../../../constants';
+import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { BaseBadgeElement, toBadgeProps } from '../common';
+const ViewCountElement = props => {
+  var _context$viewCount;
+  const context = useFlexibleUiContext();
+  const data = context ? toBadgeProps((_context$viewCount = context.viewCount) === null || _context$viewCount === void 0 ? void 0 : _context$viewCount.toString()) : null;
+  return data ? /*#__PURE__*/React.createElement(BaseBadgeElement, _extends({
+    icon: IconType.View
+  }, data, props, {
+    name: ElementName.ViewCount
+  })) : null;
+};
+export default ViewCountElement;

package/dist/es2019/view/FlexibleCard/components/elements/vote-count-element/index.js

@@ -0,0 +1,16 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { ElementName, IconType } from '../../../../../constants';
+import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { BaseBadgeElement, toBadgeProps } from '../common';
+const VoteCountElement = props => {
+  var _context$voteCount;
+  const context = useFlexibleUiContext();
+  const data = context ? toBadgeProps((_context$voteCount = context.voteCount) === null || _context$voteCount === void 0 ? void 0 : _context$voteCount.toString()) : null;
+  return data ? /*#__PURE__*/React.createElement(BaseBadgeElement, _extends({
+    icon: IconType.Vote
+  }, data, props, {
+    name: ElementName.VoteCount
+  })) : null;
+};
+export default VoteCountElement;

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

@@ -50,13 +50,14 @@ const FlexibleCard = ({
     response: details,
     id,
     onAuthorize,
+    onClick,
     origin,
     renderers,
     resolve,
     actionOptions,
     status,
     url
-  }), [aiSummaryConfig, appearance, details, fireEvent, id, onAuthorize, origin, renderers, actionOptions, resolve, status, url]);
+  }), [aiSummaryConfig, appearance, fireEvent, details, id, onAuthorize, onClick, origin, renderers, resolve, actionOptions, status, url]);
   const flexibleCardContext = fg('platform-linking-flexible-card-context') ?
   // eslint-disable-next-line react-hooks/rules-of-hooks
   useMemo(() => ({
@@ -66,8 +67,10 @@ const FlexibleCard = ({
   }), [context, status, ui]) : undefined;
   const retry = fg('platform-linking-flexible-card-unresolved-action') ? undefined : getRetryOptions(url, status, details, onAuthorize);
   const {
-    title
+    linkTitle,
+    title: titleOld
   } = context || {};
+  const title = fg('platform-linking-flexible-card-context') ? linkTitle === null || linkTitle === void 0 ? void 0 : linkTitle.text : titleOld;
   useEffect(() => {
     switch (status) {
       case SmartLinkStatus.Resolved:

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

@@ -1,8 +1,9 @@
-import { extractProvider, extractSmartLinkProvider, isEntityPresent } from '@atlaskit/link-extractors';
+import { extractProvider, extractSmartLinkProvider } from '@atlaskit/link-extractors';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { InternalActionName, SmartLinkStatus } from '../../constants';
 import { extractRequestAccessContextImproved } from '../../extractors/common/context';
 import extractFlexibleUiContext from '../../extractors/flexible';
+import extractLinkTitle from '../../extractors/flexible/extract-link-title';
 import extractPreview, { extractSmartLinkPreviewImage } from '../../extractors/flexible/extract-preview';
 import { extractErrorIcon } from '../../extractors/flexible/icon';
 import extractProviderIcon, { extractSmartLinkProviderIcon } from '../../extractors/flexible/icon/extract-provider-icon';
@@ -11,6 +12,7 @@ import { handleOnClick } from '../../utils';
 import { getEmptyJsonLd, getForbiddenJsonLd } from '../../utils/jsonld';
 export const getContextByStatus = params => {
   const {
+    onClick,
     response,
     status,
     url
@@ -18,7 +20,10 @@ export const getContextByStatus = params => {
   switch (status) {
     case SmartLinkStatus.Pending:
     case SmartLinkStatus.Resolving:
-      return {
+      return fg('platform-linking-flexible-card-context') ? {
+        linkTitle: extractLinkTitle(status, url, response, onClick),
+        url
+      } : {
         title: url,
         url
       };
@@ -30,28 +35,16 @@ export const getContextByStatus = params => {
     case SmartLinkStatus.Errored:
     case SmartLinkStatus.Fallback:
     default:
-      const actions = fg('platform-linking-flexible-card-unresolved-action') ? {
-        [InternalActionName.UnresolvedAction]: getRetryOptions(url, status, response, params.onAuthorize)
-      } : undefined;
-      if (fg('smart_links_noun_support')) {
-        if (isEntityPresent(response)) {
-          return {
-            url,
-            title: url,
-            linkIcon: extractErrorIcon(response, status),
-            preview: extractSmartLinkPreviewImage(response),
-            provider: extractSmartLinkProviderIcon(response),
-            actions
-          };
-        }
-      }
       return {
         url,
-        title: url,
+        title: fg('platform-linking-flexible-card-context') ? undefined : url,
         linkIcon: extractErrorIcon(response, status),
-        preview: extractPreview(response === null || response === void 0 ? void 0 : response.data),
-        provider: extractProviderIcon(response === null || response === void 0 ? void 0 : response.data),
-        actions
+        linkTitle: fg('platform-linking-flexible-card-context') ? extractLinkTitle(status, url, response, onClick) : undefined,
+        preview: fg('smart_links_noun_support') ? extractSmartLinkPreviewImage(response) : extractPreview(response === null || response === void 0 ? void 0 : response.data),
+        provider: fg('smart_links_noun_support') ? extractSmartLinkProviderIcon(response) : extractProviderIcon(response === null || response === void 0 ? void 0 : response.data),
+        actions: fg('platform-linking-flexible-card-unresolved-action') ? {
+          [InternalActionName.UnresolvedAction]: getRetryOptions(url, status, response, params.onAuthorize)
+        } : undefined
       };
   }
 };

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

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useAnalyticsEvents as useAnalyticsEventsNext } from '@atlaskit/analytics-next';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useAnalyticsEvents } from '../../../common/analytics/generated/use-analytics-events';
 import { CardDisplay, SmartLinkPosition, SmartLinkSize } from '../../../constants';
 import { getDefinitionId, getExtensionKey, getServices } from '../../../state/helpers';
@@ -8,7 +9,7 @@ import { useSmartCardState } from '../../../state/store';
 import { isSpecialEvent } from '../../../utils';
 import { getIsAISummaryEnabled } from '../../../utils/ai-summary';
 import { fireLinkClickedEvent } from '../../../utils/analytics/click';
-import { flexibleUiOptions } from '../styled';
+import { flexibleUiOptions, flexibleUiOptionsOld } from '../styled';
 import { getMetadata } from '../utils';
 import ContentContainer from './ContentContainer';
 import HoverCardForbiddenView from './views/forbidden';
@@ -112,7 +113,7 @@ const HoverCardContent = ({
     origin: 'smartLinkPreviewHoverCard',
     renderers: renderers,
     actionOptions,
-    ui: flexibleUiOptions,
+    ui: fg('platform-linking-flexible-card-context') ? flexibleUiOptions : flexibleUiOptionsOld,
     url: url,
     children: null
   };

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

@@ -56,32 +56,39 @@ const HoverCardForbiddenView = ({
   const ButtonComponent = fg('platform-smart-card-remove-legacy-button') ? Button : ButtonOld;
   return /*#__PURE__*/React.createElement(FlexibleCard, _extends({}, flexibleCardProps, {
     testId: testId
-  }), /*#__PURE__*/React.createElement(PreviewBlock, {
+  }), /*#__PURE__*/React.createElement(PreviewBlock, _extends({
     ignoreContainerPadding: true,
-    testId: testId,
-    status: SmartLinkStatus.Forbidden,
+    testId: testId
+  }, fg('platform-linking-flexible-card-context') ? undefined : {
+    status: SmartLinkStatus.Forbidden
+  }, {
     className: ax([fg('platform-linking-visual-refresh-v1') ? "_13lipd34 _qrwqpd34 _otyru2gc" : "_13lipd34 _qrwqpd34 _otyrcxkx"])
-  }), /*#__PURE__*/React.createElement(CustomBlock, {
-    testId: `${testId}-title`,
-    status: SmartLinkStatus.Forbidden,
+  })), /*#__PURE__*/React.createElement(CustomBlock, _extends({
+    testId: `${testId}-title`
+  }, fg('platform-linking-flexible-card-context') ? undefined : {
+    status: SmartLinkStatus.Forbidden
+  }, {
     className: ax([fg('platform-linking-visual-refresh-v1') ? "_1bah1h6o _k48p1pd9 _19pku2gc" : "_1bah1h6o _k48p1pd9 _19pku2gc"])
-  }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages[titleMessageKey], {
+  }), /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages[titleMessageKey], {
     values: {
       product
     }
-  }))), /*#__PURE__*/React.createElement(CustomBlock, {
-    testId: `${testId}-content`,
-    status: SmartLinkStatus.Forbidden,
+  }))), /*#__PURE__*/React.createElement(CustomBlock, _extends({
+    testId: `${testId}-content`
+  }, fg('platform-linking-flexible-card-context') ? undefined : {
+    status: SmartLinkStatus.Forbidden
+  }, {
     className: ax([fg('platform-linking-visual-refresh-v1') ? "_11c8dcr7 _1e0c1nu9 _1bah1h6o _19pkze3t _y3gn1h6o" : "_11c8dcr7 _1e0c1nu9 _1bah1h6o _19pkze3t _y3gn1h6o"])
-  }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages[descriptiveMessageKey], {
+  }), /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages[descriptiveMessageKey], {
     values: {
       product,
       hostname
     }
-  }))), action && /*#__PURE__*/React.createElement(CustomBlock, {
-    status: SmartLinkStatus.Forbidden,
+  }))), action && /*#__PURE__*/React.createElement(CustomBlock, _extends({}, fg('platform-linking-flexible-card-context') ? undefined : {
+    status: SmartLinkStatus.Forbidden
+  }, {
     className: ax([fg('platform-linking-visual-refresh-v1') ? "_1bah1h6o _19pku2gc" : "_1bah1h6o _19pku2gc"])
-  }, /*#__PURE__*/React.createElement(ButtonComponent, {
+  }), /*#__PURE__*/React.createElement(ButtonComponent, {
     testId: `${testId}-button`,
     onClick: action === null || action === void 0 ? void 0 : action.promise,
     appearance: "primary",

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

@@ -67,33 +67,41 @@ const HoverCardResolvedView = ({
     fallbackElementHeight: snippetHeight.current,
     response: cardState.details
   });
-  const snippet = imagePreview ? null : /*#__PURE__*/React.createElement(SnippetBlock, {
-    status: SmartLinkStatus.Resolved,
+  const snippet = imagePreview ? null : /*#__PURE__*/React.createElement(SnippetBlock, _extends({}, fg('platform-linking-flexible-card-context') ? undefined : {
+    status: SmartLinkStatus.Resolved
+  }, {
     className: ax([fg('platform-linking-visual-refresh-v1') && "_ca0q1b66"])
-  });
+  }));
   const aiSummaryMinHeight = snippet ? snippetHeight.current : 0;
   return /*#__PURE__*/React.createElement(FlexibleCard, flexibleCardProps, imagePreview, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, titleBlockProps, {
-    metadataPosition: SmartLinkPosition.Top,
-    status: SmartLinkStatus.Resolved,
+    metadataPosition: SmartLinkPosition.Top
+  }, fg('platform-linking-flexible-card-context') ? undefined : {
+    status: SmartLinkStatus.Resolved
+  }, {
     className: ax([fg('platform-linking-visual-refresh-v1') ? "_zulpu2gc _quenze3t _oebj1txw _13mh1pd9" : "_zulpu2gc _quenui7n _oebj1txw _x7z0u2gc _1ljqu2gc _13mh1pd9"])
-  })), /*#__PURE__*/React.createElement(MetadataBlock, {
+  })), /*#__PURE__*/React.createElement(MetadataBlock, _extends({
     primary: primary,
     secondary: secondary,
     maxLines: 1,
-    size: SmartLinkSize.Medium,
-    status: SmartLinkStatus.Resolved,
+    size: SmartLinkSize.Medium
+  }, fg('platform-linking-flexible-card-context') ? undefined : {
+    status: SmartLinkStatus.Resolved
+  }, {
     className: ax([!fg('platform-linking-visual-refresh-v1') && "_zulpidpf _2aco1o8v _fmt31ohn _yklxcxkx _w3mucxkx _ia0l11wp _3tmpcxkx"])
-  }), isAISummaryEnabled ? /*#__PURE__*/React.createElement(AISummaryBlock, {
+  })), isAISummaryEnabled ? /*#__PURE__*/React.createElement(AISummaryBlock, _extends({
     aiSummaryMinHeight: aiSummaryMinHeight,
-    placeholder: snippet,
+    placeholder: snippet
+  }, fg('platform-linking-flexible-card-context') ? undefined : {
     status: SmartLinkStatus.Resolved
-  }) : snippet, /*#__PURE__*/React.createElement(SnippetBlock, {
+  })) : snippet, /*#__PURE__*/React.createElement(SnippetBlock, _extends({
     testId: "hidden-snippet",
     onRender: onSnippetRender,
-    blockRef: snippetBlockRef,
-    status: SmartLinkStatus.Resolved,
+    blockRef: snippetBlockRef
+  }, fg('platform-linking-flexible-card-context') ? undefined : {
+    status: SmartLinkStatus.Resolved
+  }, {
     className: ax(["_3um015vq _kqswstnw"])
-  }), /*#__PURE__*/React.createElement(ActionBlock, {
+  })), /*#__PURE__*/React.createElement(ActionBlock, {
     onClick: onActionClick,
     spaceInline: "space.100",
     className: ax([fg('platform-linking-visual-refresh-v1') && "_n3td1b66"])

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

@@ -6,7 +6,7 @@ import React from 'react';
 import { CustomBlock } from '../../../../FlexibleCard/components/blocks';
 import ActionGroup from '../../../../FlexibleCard/components/blocks/action-group';
 import { LoadingSkeleton } from '../../../../FlexibleCard/components/common/loading-skeleton';
-import IconElement from '../../../../FlexibleCard/components/elements/icon-element';
+import { BaseIconElement } from '../../../../FlexibleCard/components/elements/common';
 import { CARD_WIDTH_REM } from '../../../styled';
 const loadingViewContainer = null;
 const skeletonContainer = null;
@@ -34,7 +34,7 @@ const HoverCardLoadingView = ({
   }, /*#__PURE__*/React.createElement(CustomBlock, _extends({}, titleBlockProps, {
     testId: `${testId}-title-block`,
     className: ax(["_zulpcxkx _1bsb1osq"])
-  }), /*#__PURE__*/React.createElement(IconElement, {
+  }), /*#__PURE__*/React.createElement(BaseIconElement, {
     render: () => /*#__PURE__*/React.createElement(LoadingSkeleton, null),
     size: size
   }), /*#__PURE__*/React.createElement("span", {