@atlaskit/smart-card 38.5.0 → 38.5.1

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

@@ -0,0 +1,13 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { ElementName } from '../../../../../constants';
+import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { BaseLinkElement, toLinkProps } from '../common';
+const TitleElement = props => {
+  const context = useFlexibleUiContext();
+  const data = context ? toLinkProps(context.title, context.url) : null;
+  return data ? /*#__PURE__*/React.createElement(BaseLinkElement, _extends({}, data, props, {
+    name: ElementName.Title
+  })) : null;
+};
+export default TitleElement;

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) {
@@ -223,97 +293,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/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", {

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

@@ -10,7 +10,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "38.5.0",
+  packageVersion: "38.5.1",
   componentName: 'linkUrl'
 };
 const Anchor = withLinkClickedEvent('a');

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

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

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

@@ -7,7 +7,7 @@ import { useThemeObserver } from '@atlaskit/tokens';
 import { SmartLinkSize } from '../../constants';
 import useInvokeClientAction from '../../state/hooks/use-invoke-client-action';
 import { getPreviewUrlWithTheme } from '../../utils';
-import IconElement from '../FlexibleCard/components/elements/icon-element';
+import { BaseIconElement } from '../FlexibleCard/components/elements/common';
 import withAnalytics from './components/analytics';
 import EmbedContent from './components/embed-content';
 import withErrorBoundary from './components/error-boundary';
@@ -104,7 +104,7 @@ var EmbedModal = function EmbedModal(_ref) {
     label: title
   } : {}), /*#__PURE__*/React.createElement(LinkInfo, {
     icon: linkIcon && {
-      icon: /*#__PURE__*/React.createElement(IconElement, _extends({}, linkIcon, {
+      icon: /*#__PURE__*/React.createElement(BaseIconElement, _extends({}, linkIcon, {
         size: SmartLinkSize.Large
       })),
       isFlexibleUi: true

package/dist/esm/view/FlexibleCard/components/elements/applied-to-components-count-element/index.js

@@ -1,19 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useContext } from 'react';
+import React from 'react';
 import { useIntl } from 'react-intl-next';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { IconType } from '../../../../../constants';
 import { messages } from '../../../../../messages';
-import { FlexibleUiContext, useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
 import { BaseBadgeElement } from '../common';
 var AppliedToComponentsCountElement = function AppliedToComponentsCountElement(props) {
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
-  var context = fg('platform-linking-flexible-card-context') ?
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  useFlexibleUiContext() :
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  useContext(FlexibleUiContext);
+  var context = useFlexibleUiContext();
   if (
   // Check for null and undefined, render if it's 0.
   (context === null || context === void 0 ? void 0 : context.appliedToComponentsCount) === null || (context === null || context === void 0 ? void 0 : context.appliedToComponentsCount) === undefined) {

package/dist/esm/view/FlexibleCard/components/elements/assigned-to-element/index.js

@@ -0,0 +1,14 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { ElementName } from '../../../../../constants';
+import { messages } from '../../../../../messages';
+import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { BaseTextElement, toFormattedTextProps } from '../common';
+var AssignedToElement = function AssignedToElement(props) {
+  var context = useFlexibleUiContext();
+  var data = context ? toFormattedTextProps(messages.assigned_to, context.assignedTo) : null;
+  return data ? /*#__PURE__*/React.createElement(BaseTextElement, _extends({}, data, props, {
+    name: ElementName.AssignedTo
+  })) : null;
+};
+export default AssignedToElement;

package/dist/esm/view/FlexibleCard/components/elements/assigned-to-group-element/index.js

@@ -0,0 +1,13 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { ElementName } from '../../../../../constants';
+import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { BaseAvatarGroupElement, toAvatarGroupProps } from '../common';
+var AssignedToGroupElement = function AssignedToGroupElement(props) {
+  var context = useFlexibleUiContext();
+  var data = context ? toAvatarGroupProps(context.assignedToGroup, true) : null;
+  return data ? /*#__PURE__*/React.createElement(BaseAvatarGroupElement, _extends({}, data, props, {
+    name: ElementName.AssignedToGroup
+  })) : null;
+};
+export default AssignedToGroupElement;

package/dist/esm/view/FlexibleCard/components/elements/attachment-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';
+var AttachmentCountElement = function AttachmentCountElement(props) {
+  var _context$attachmentCo;
+  var context = useFlexibleUiContext();
+  var data = context ? toBadgeProps((_context$attachmentCo = context.attachmentCount) === null || _context$attachmentCo === void 0 ? void 0 : _context$attachmentCo.toString()) : null;
+  return data ? /*#__PURE__*/React.createElement(BaseBadgeElement, _extends({
+    icon: IconType.Attachment
+  }, data, props, {
+    name: ElementName.AttachmentCount
+  })) : null;
+};
+export default AttachmentCountElement;

package/dist/esm/view/FlexibleCard/components/elements/author-group-element/index.js

@@ -0,0 +1,13 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { ElementName } from '../../../../../constants';
+import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { BaseAvatarGroupElement, toAvatarGroupProps } from '../common';
+var AuthorGroupElement = function AuthorGroupElement(props) {
+  var context = useFlexibleUiContext();
+  var data = context ? toAvatarGroupProps(context.authorGroup, false) : null;
+  return data ? /*#__PURE__*/React.createElement(BaseAvatarGroupElement, _extends({}, data, props, {
+    name: ElementName.AuthorGroup
+  })) : null;
+};
+export default AuthorGroupElement;

package/dist/esm/view/FlexibleCard/components/elements/checklist-progress-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';
+var ChecklistProgressElement = function ChecklistProgressElement(props) {
+  var _context$checklistPro;
+  var context = useFlexibleUiContext();
+  var data = context ? toBadgeProps((_context$checklistPro = context.checklistProgress) === null || _context$checklistPro === void 0 ? void 0 : _context$checklistPro.toString()) : null;
+  return data ? /*#__PURE__*/React.createElement(BaseBadgeElement, _extends({
+    icon: IconType.CheckItem
+  }, data, props, {
+    name: ElementName.ChecklistProgress
+  })) : null;
+};
+export default ChecklistProgressElement;

package/dist/esm/view/FlexibleCard/components/elements/collaborator-group-element/index.js

@@ -0,0 +1,13 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { ElementName } from '../../../../../constants';
+import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { BaseAvatarGroupElement, toAvatarGroupProps } from '../common';
+var CollaboratorGroupElement = function CollaboratorGroupElement(props) {
+  var context = useFlexibleUiContext();
+  var data = context ? toAvatarGroupProps(context.collaboratorGroup, false) : undefined;
+  return data ? /*#__PURE__*/React.createElement(BaseAvatarGroupElement, _extends({}, data, props, {
+    name: ElementName.CollaboratorGroup
+  })) : null;
+};
+export default CollaboratorGroupElement;

package/dist/esm/view/FlexibleCard/components/elements/comment-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';
+var CommentCountElement = function CommentCountElement(props) {
+  var _context$commentCount;
+  var context = useFlexibleUiContext();
+  var data = context ? toBadgeProps((_context$commentCount = context.commentCount) === null || _context$commentCount === void 0 ? void 0 : _context$commentCount.toString()) : null;
+  return data ? /*#__PURE__*/React.createElement(BaseBadgeElement, _extends({
+    icon: IconType.Comment
+  }, data, props, {
+    name: ElementName.CommentCount
+  })) : null;
+};
+export default CommentCountElement;

package/dist/esm/view/FlexibleCard/components/elements/{atlaskit-badge-element → common/base-atlaskit-badge-element}/index.js

@@ -15,7 +15,7 @@ var badgeStyles = null;
  * @see StoryPoints
  * */
 
-var AtlaskitElementBadge = function AtlaskitElementBadge(_ref) {
+var BaseAtlaskitElementBadge = function BaseAtlaskitElementBadge(_ref) {
   var value = _ref.value,
     name = _ref.name,
     className = _ref.className,
@@ -33,4 +33,9 @@ var AtlaskitElementBadge = function AtlaskitElementBadge(_ref) {
     className: ax([!fg('platform-linking-visual-refresh-v1') && "_4cvr1h6o _1e0c116y", fg('platform-linking-visual-refresh-v1') && "_4cvr1h6o _1e0c116y _1ul91ns9", className])
   }), /*#__PURE__*/React.createElement(AKBadge, null, value));
 };
-export default AtlaskitElementBadge;
+export default BaseAtlaskitElementBadge;
+export var toAtlaskitBadgeProps = function toAtlaskitBadgeProps(value) {
+  return value ? {
+    value: value
+  } : undefined;
+};

package/dist/esm/view/FlexibleCard/components/elements/common/base-avatar-group-element/index.js

@@ -95,4 +95,11 @@ var BaseAvatarGroup = function BaseAvatarGroup(_ref) {
     testId: testId
   }));
 };
-export default BaseAvatarGroup;
+export default BaseAvatarGroup;
+export var toAvatarGroupProps = function toAvatarGroupProps(items, showFallbackAvatar) {
+  return items ? {
+    items: items
+  } : showFallbackAvatar ? {
+    items: []
+  } : undefined;
+};