@atlaskit/smart-card 19.1.28 → 19.1.31

package/dist/es2019/view/HoverCard/components/hover-card-content.js

@@ -9,6 +9,7 @@ import { isSpecialEvent } from '../../../utils';
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
 import { getExtensionKey } from '../../../state/helpers';
 import { titleBlockCss, metadataBlockCss, footerBlockCss } from '../styled';
+import { extractType } from '../../../extractors/common/primitives/extractType';
 const flexibleUiOptions = {
   hideElevation: true,
   size: SmartLinkSize.Medium,
@@ -59,13 +60,16 @@ const HoverCardContent = ({
     analytics.ui.cardClickedEvent(undefined, HOVER_CARD_ANALYTICS_DISPLAY, cardState.status, undefined, undefined, isModifierKeyPressed, undefined, undefined, undefined, 'titleGoToLink');
   }, [cardState.status, analytics.ui]);
   const titleActions = useMemo(() => [getOpenAction(url, analytics)], [url, analytics]);
-  const footerActions = useMemo(() => toFooterActions(cardActions), [cardActions]); //TODO: EDM-3224 deleted simulated and use real JsonLd
+  const footerActions = useMemo(() => toFooterActions(cardActions), [cardActions]);
+  const data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
+  const types = data ? extractType(data) : undefined; //TODO: EDM-3224 deleted simulated and use real JsonLd
 
   const {
     primary,
-    secondary
-  } = extractMetadata(getSimulatedMetadata(extensionKey));
-  const data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
+    secondary,
+    subtitle
+  } = extractMetadata(getSimulatedMetadata(extensionKey, types));
+  const titleMaxLines = subtitle && subtitle.length > 0 ? 1 : 2;
   const body = data && extractPreview(data) ? /*#__PURE__*/React.createElement(PreviewBlock, null) : /*#__PURE__*/React.createElement(SnippetBlock, null);
   return /*#__PURE__*/React.createElement(FlexibleCard, {
     cardState: cardState,
@@ -76,9 +80,11 @@ const HoverCardContent = ({
     url: url
   }, /*#__PURE__*/React.createElement(TitleBlock, {
     actions: titleActions,
+    maxLines: titleMaxLines,
     overrideCss: titleBlockCss,
     size: SmartLinkSize.Large,
-    position: SmartLinkPosition.Center
+    position: SmartLinkPosition.Center,
+    subtitle: subtitle
   }), /*#__PURE__*/React.createElement(MetadataBlock, {
     primary: primary,
     secondary: secondary,

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

@@ -89,7 +89,7 @@ export const HoverCardComponent = ({
       onMouseEnter: initShowCard,
       onMouseLeave: initHideCard
     }), children),
-    zIndex: 501 // Temporary fix for Confluence inline comment on editor mod has z-index of 500
+    zIndex: 511 // Temporary fix for Confluence inline comment on editor mod has z-index of 500, Jira issue view has z-index of 510
 
   });
 };

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

@@ -1,5 +1,12 @@
 import { css } from '@emotion/core';
 import { loadingPlaceholderClassName } from '../../index';
+const blockGap = '0.5rem';
+const elementGap = '0.5rem';
+const separatorCss = css`
+  [data-separator] + [data-separator]:before {
+    margin-right: ${elementGap};
+  }
+`;
 export const HoverCardContainer = css`
   background: none;
   border-width: 0;
@@ -12,25 +19,44 @@ export const HoverCardContainer = css`
   }
 `;
 export const titleBlockCss = css`
-  gap: 0.5rem;
+  gap: ${blockGap};
+
+  ${separatorCss}
+
+  // title and subtitle element group
+  [data-smart-element-group] {
+    // gap between title and subtitle
+    gap: 0.06rem;
+
+    /* subtitle element group */
+    > [data-smart-element-group] {
+      > span {
+        margin-right: ${elementGap};
+      }
+    }
+  }
 `;
 export const metadataBlockCss = css`
   gap: 0px;
 
   /* primary element group */
-  [data-smart-element-group]:first-of-type {
+  [data-smart-element-group]:nth-of-type(1) {
     flex-grow: 7;
+
+    // a separator between text-based element
+    ${separatorCss}
+
     /* horizontal spacing between elements in group */
     > span {
-      margin-right: 0.5rem;
+      margin-right: ${elementGap};
     }
   }
   /* secondary element group */
-  [data-smart-element-group]:last-of-type {
+  [data-smart-element-group]:nth-of-type(2) {
     flex-grow: 3;
     /* horizontal spacing between elements in group */
     > span {
-      margin-left: 0.5rem;
+      margin-left: ${elementGap};
     }
   }
 `;

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

@@ -1,12 +1,33 @@
 import { ElementName } from '../../constants';
 export const HOVER_CARD_ANALYTICS_DISPLAY = 'flexible';
-export const getSimulatedMetadata = (extensionKey = '') => {
+export const getSimulatedMetadata = (extensionKey = '', types = []) => {
   switch (extensionKey) {
+    case 'bitbucket-object-provider':
+    case 'native-bitbucket-object-provider':
+      if (types.includes('atlassian:SourceCodePullRequest')) {
+        return {
+          metadata: {
+            primary: [ElementName.AuthorGroup, ElementName.ModifiedOn, ElementName.SubscriberCount, ElementName.State],
+            secondary: [],
+            subtitle: [ElementName.SourceBranch, ElementName.TargetBranch]
+          }
+        };
+      }
+
+      return {
+        metadata: {
+          primary: [ElementName.ModifiedOn, ElementName.CreatedBy],
+          secondary: [],
+          subtitle: []
+        }
+      };
+
     case 'confluence-object-provider':
       return {
         metadata: {
           primary: [ElementName.AuthorGroup, ElementName.CreatedBy],
-          secondary: [ElementName.CommentCount, ElementName.ReactCount]
+          secondary: [ElementName.CommentCount, ElementName.ReactCount],
+          subtitle: []
         }
       };
 
@@ -14,7 +35,27 @@ export const getSimulatedMetadata = (extensionKey = '') => {
       return {
         metadata: {
           primary: [ElementName.AuthorGroup, ElementName.State, ElementName.Priority],
-          secondary: []
+          secondary: [],
+          subtitle: []
+        }
+      };
+
+    case 'watermelon-object-provider':
+      if (types.includes('atlassian:Project')) {
+        return {
+          metadata: {
+            primary: [ElementName.AuthorGroup, ElementName.ModifiedOn, ElementName.State, ElementName.DueOn],
+            secondary: [],
+            subtitle: []
+          }
+        };
+      }
+
+      return {
+        metadata: {
+          primary: [ElementName.AuthorGroup, ElementName.State, ElementName.DueOn],
+          secondary: [],
+          subtitle: []
         }
       };
 
@@ -22,7 +63,8 @@ export const getSimulatedMetadata = (extensionKey = '') => {
       return {
         metadata: {
           primary: [ElementName.ModifiedOn, ElementName.CreatedBy],
-          secondary: []
+          secondary: [],
+          subtitle: []
         }
       };
   }

package/dist/esm/constants.js

@@ -83,7 +83,7 @@ export var SmartLinkWidth;
  * When adding an element...
  * 1) Create base element if it doesn't already exist.
  *    Base element are inside src/view/FlexibleCard/components/elements.
- *    E.g. Badge,DateTime, Icon, Lozenge, etc.
+ *    E.g. Badge, DateTime, Icon, Lozenge, etc.
  * 2) Update FlexibleUiContext with the new prop for data representing
  *    the element, preferably with the same name as the element itself.
  *    (src/state/flexible-ui-context/types.ts)
@@ -111,6 +111,7 @@ export var ElementName;
   ElementName["CommentCount"] = "CommentCount";
   ElementName["CreatedBy"] = "CreatedBy";
   ElementName["CreatedOn"] = "CreatedOn";
+  ElementName["DueOn"] = "DueOn";
   ElementName["LinkIcon"] = "LinkIcon";
   ElementName["ModifiedBy"] = "ModifiedBy";
   ElementName["ModifiedOn"] = "ModifiedOn";
@@ -120,8 +121,10 @@ export var ElementName;
   ElementName["Provider"] = "Provider";
   ElementName["ReactCount"] = "ReactCount";
   ElementName["Snippet"] = "Snippet";
+  ElementName["SourceBranch"] = "SourceBranch";
   ElementName["State"] = "State";
   ElementName["SubscriberCount"] = "SubscriberCount";
+  ElementName["TargetBranch"] = "TargetBranch";
   ElementName["Title"] = "Title";
   ElementName["ViewCount"] = "ViewCount";
   ElementName["VoteCount"] = "VoteCount";

package/dist/esm/extractors/common/icon/extractIcon.js

@@ -4,6 +4,7 @@ import CommitIcon from '@atlaskit/icon-object/glyph/commit/16';
 import PullRequestIcon from '@atlaskit/icon-object/glyph/pull-request/16';
 import BranchIcon from '@atlaskit/icon-object/glyph/branch/16';
 import RepoIcon from '@atlaskit/icon-object/glyph/code/16';
+import TaskIcon from '@atlaskit/icon-object/glyph/task/16';
 import { extractorPriorityMap } from './priority';
 import { extractProvider } from '../context/extractProvider';
 import { extractTitle } from '../primitives/extractTitle';
@@ -46,6 +47,11 @@ var extractIconByType = function extractIconByType(type, opts) {
     case 'atlassian:UndefinedLink':
       return extractIconFromDocument(type, opts);
 
+    case 'atlassian:Goal':
+      return opts.icon || /*#__PURE__*/React.createElement(TaskIcon, {
+        label: opts.title || 'goal'
+      });
+
     case 'atlassian:Project':
       return opts.icon || /*#__PURE__*/React.createElement(ProjectIcon, {
         label: opts.title || 'project',

package/dist/esm/extractors/common/icon/priority.js

@@ -6,6 +6,7 @@ export var extractorPriorityMap = {
   'schema:BlogPosting': 10,
   'schema:SpreadsheetDigitalDocument': 10,
   'schema:PresentationDigitalDocument': 10,
+  'atlassian:Goal': 10,
   'atlassian:Task': 10,
   'atlassian:Project': 10,
   'atlassian:Template': 10,

package/dist/esm/extractors/common/lozenge/extractLozenge.js

@@ -22,12 +22,18 @@ export var extractLozenge = function extractLozenge(jsonLd) {
       var jsonLdDocument = jsonLd;
       var lozengeFromState = extractState(jsonLdDocument);
       return lozengeFromState;
-    } else if (type.includes('atlassian:Project')) {
+    } else if (type.includes('atlassian:Goal')) {
       var jsonLdProject = jsonLd;
 
       var _lozengeFromState = extractState(jsonLdProject);
 
       return _lozengeFromState;
+    } else if (type.includes('atlassian:Project')) {
+      var _jsonLdProject = jsonLd;
+
+      var _lozengeFromState2 = extractState(_jsonLdProject);
+
+      return _lozengeFromState2;
     } else if (type.includes('atlassian:UndefinedLink')) {
       return {
         text: 'UNDEFINED',

package/dist/esm/extractors/common/lozenge/extractState.js

@@ -16,14 +16,14 @@ export var extractState = function extractState(jsonLd) {
       if (state.name) {
         return {
           text: state.name,
-          appearance: 'default'
+          appearance: state.appearance || 'default'
         };
       }
     } else if (state['@type'] === 'Object') {
       if (state.name) {
         return {
           text: state.name,
-          appearance: 'default'
+          appearance: state.appearance || 'default'
         };
       }
     }

package/dist/esm/extractors/flexible/icon/extract-jsonld-data-icon.js

@@ -90,6 +90,12 @@ var extractJsonldDataIcon = function extractJsonldDataIcon(data) {
         label: taskLabel
       };
 
+    case 'atlassian:Goal':
+      return urlIcon || {
+        icon: IconType.Task,
+        label: label || 'Goal'
+      };
+
     case 'atlassian:Project':
       return urlIcon || {
         icon: IconType.Project,

package/dist/esm/extractors/flexible/index.js

@@ -1,7 +1,7 @@
 import { extractLink, extractSummary, extractTitle } from '../common/primitives';
 import { extractLozenge } from '../common/lozenge';
 import { extractLinkIcon } from './icon';
-import { extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount, extractViewCount, extractReactCount, extractVoteCount } from './utils';
+import { extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount, extractViewCount, extractReactCount, extractVoteCount, extractSourceBranch, extractTargetBranch, extractDueOn } from './utils';
 import { extractPersonCreatedBy } from '../common/person';
 import { extractPersonsUpdatedBy } from './collaboratorGroup';
 import { extractDateUpdated } from '../common/date/extractDateUpdated';
@@ -27,19 +27,22 @@ var extractFlexibleUiContext = function extractFlexibleUiContext(response, rende
     voteCount: extractVoteCount(data),
     createdBy: extractCreatedBy(data),
     createdOn: extractDateCreated(data),
+    dueOn: extractDueOn(data),
+    latestCommit: extractLatestCommit(data),
     linkIcon: extractLinkIcon(response, renderers),
     modifiedBy: extractModifiedBy(data),
     modifiedOn: extractDateUpdated(data),
     preview: extractPreview(data),
     priority: extractPriority(data),
+    provider: extractProviderIcon(data),
     programmingLanguage: extractProgrammingLanguage(data),
     snippet: extractSummary(data) || undefined,
     // Explicitly set here to remove an empty string
+    sourceBranch: extractSourceBranch(data),
     state: extractLozenge(data),
     subscriberCount: extractSubscriberCount(data),
+    targetBranch: extractTargetBranch(data),
     title: extractTitle(data) || url,
-    provider: extractProviderIcon(data),
-    latestCommit: extractLatestCommit(data),
     url: url
   };
 };

package/dist/esm/extractors/flexible/utils.js

@@ -1,5 +1,12 @@
+import _typeof from "@babel/runtime/helpers/typeof";
 import { extractPersonCreatedBy, extractPersonUpdatedBy } from '../common/person';
 
+var extractLinkName = function extractLinkName(link) {
+  if (link && _typeof(link) === 'object' && link['@type'] === 'Link') {
+    return link.name;
+  }
+};
+
 var extractValue = function extractValue(data, key) {
   return data === null || data === void 0 ? void 0 : data[key];
 };
@@ -7,6 +14,9 @@ var extractValue = function extractValue(data, key) {
 export var extractCommentCount = function extractCommentCount(data) {
   return extractValue(data, 'schema:commentCount');
 };
+export var extractDueOn = function extractDueOn(data) {
+  return extractValue(data, 'endTime');
+};
 export var extractViewCount = function extractViewCount(data) {
   return extractValue(data, 'atlassian:viewCount');
 };
@@ -33,6 +43,12 @@ export var extractModifiedBy = function extractModifiedBy(data) {
 export var extractProgrammingLanguage = function extractProgrammingLanguage(data) {
   return extractValue(data, 'schema:programmingLanguage');
 };
+export var extractSourceBranch = function extractSourceBranch(data) {
+  return extractLinkName(data['atlassian:mergeSource']);
+};
 export var extractSubscriberCount = function extractSubscriberCount(data) {
   return extractValue(data, 'atlassian:subscriberCount');
+};
+export var extractTargetBranch = function extractTargetBranch(data) {
+  return extractLinkName(data['atlassian:mergeDestination']);
 };

package/dist/esm/extractors/hover/extractMetadata.js

@@ -12,11 +12,12 @@ var elementNamesToItems = function elementNamesToItems(elementNames) {
 };
 
 export var extractMetadata = function extractMetadata(jsonLd) {
-  var _jsonLd$metadata, _metadata$primary, _metadata$secondary;
+  var _jsonLd$metadata, _metadata$primary, _metadata$secondary, _metadata$subtitle;
 
   var metadata = (_jsonLd$metadata = jsonLd.metadata) !== null && _jsonLd$metadata !== void 0 ? _jsonLd$metadata : [];
   return {
     primary: elementNamesToItems((_metadata$primary = metadata.primary) !== null && _metadata$primary !== void 0 ? _metadata$primary : []),
-    secondary: elementNamesToItems((_metadata$secondary = metadata.secondary) !== null && _metadata$secondary !== void 0 ? _metadata$secondary : [])
+    secondary: elementNamesToItems((_metadata$secondary = metadata.secondary) !== null && _metadata$secondary !== void 0 ? _metadata$secondary : []),
+    subtitle: elementNamesToItems((_metadata$subtitle = metadata.subtitle) !== null && _metadata$subtitle !== void 0 ? _metadata$subtitle : [])
   };
 };

package/dist/esm/state/actions/index.js

@@ -1,5 +1,5 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { useMemo, useCallback } from 'react';
 import { auth } from '@atlaskit/outbound-auth-flow-client';
 import { APIError } from '@atlaskit/linking-common';

package/dist/esm/state/hooks/usePrefetch.js

@@ -1,5 +1,5 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { useCallback } from 'react';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
 export function usePrefetch(url) {

package/dist/esm/utils/mocks.js

@@ -1,10 +1,10 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 

package/dist/esm/version.json

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

package/dist/esm/view/BlockCard/actions/DownloadAction.js

@@ -1,5 +1,5 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { downloadUrl } from '@atlaskit/media-common';

package/dist/esm/view/BlockCard/actions/PreviewAction.js

@@ -1,10 +1,10 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 var _excluded = ["popupMountPointId", "onClose"],
     _excluded2 = ["details"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 

package/dist/esm/view/BlockCard/actions/RetryAction.js

@@ -1,5 +1,5 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '../../../messages';

package/dist/esm/view/BlockCard/actions/ViewAction.js

@@ -1,5 +1,5 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '../../../messages';

package/dist/esm/view/FlexibleCard/components/blocks/block/index.js

@@ -5,11 +5,11 @@ var _templateObject;
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/core';
-import { SmartLinkDirection, SmartLinkSize } from '../../../../../constants';
+import { ElementName, SmartLinkDirection, SmartLinkSize } from '../../../../../constants';
 import { getBaseStyles, getGapSize, renderChildren } from '../utils';
 
 var getBlockStyles = function getBlockStyles(direction, size) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  justify-content: flex-start;\n  [data-separator] + [data-separator]:before {\n    content: '\u2022';\n    margin-right: ", "rem;\n  }\n"])), getBaseStyles(direction, size), getGapSize(size));
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  justify-content: flex-start;\n  [data-separator] + [data-separator]:before {\n    content: '\u2022';\n    margin-right: ", "rem;\n  }\n  // Pull request elements: source branch \u2192 target branch\n  [data-smart-element='", "']\n    + [data-smart-element='", "']:before {\n    content: '\u2192';\n  }\n  // Pull request elements: target branch \u2190 source branch\n  [data-smart-element='", "']\n    + [data-smart-element='", "']:before {\n    content: '\u2190';\n  }\n"])), getBaseStyles(direction, size), getGapSize(size), ElementName.SourceBranch, ElementName.TargetBranch, ElementName.TargetBranch, ElementName.SourceBranch);
 };
 /**
  * A block represents a collection of elements and actions that are arranged

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

@@ -20,7 +20,7 @@ import * as Actions from '../actions';
 import { isFlexibleUiElement } from '../../../../utils/flexible';
 import ActionGroup from './action-group';
 import ElementGroup from './element-group';
-export var ElementDisplaySchema = (_ElementDisplaySchema = {}, _defineProperty(_ElementDisplaySchema, ElementName.AuthorGroup, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CollaboratorGroup, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CommentCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ViewCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ReactCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.VoteCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CreatedBy, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CreatedOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.LinkIcon, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ModifiedBy, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ModifiedOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Preview, ['block']), _defineProperty(_ElementDisplaySchema, ElementName.Priority, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ProgrammingLanguage, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Snippet, ['block']), _defineProperty(_ElementDisplaySchema, ElementName.State, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.SubscriberCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Title, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Provider, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.LatestCommit, ['inline']), _ElementDisplaySchema);
+export var ElementDisplaySchema = (_ElementDisplaySchema = {}, _defineProperty(_ElementDisplaySchema, ElementName.AuthorGroup, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CollaboratorGroup, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CommentCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ViewCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ReactCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.VoteCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CreatedBy, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CreatedOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.DueOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.LatestCommit, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.LinkIcon, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ModifiedBy, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ModifiedOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Preview, ['block']), _defineProperty(_ElementDisplaySchema, ElementName.Priority, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ProgrammingLanguage, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Provider, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Snippet, ['block']), _defineProperty(_ElementDisplaySchema, ElementName.SourceBranch, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.State, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.SubscriberCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.TargetBranch, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Title, ['inline']), _ElementDisplaySchema);
 
 var getDirectionStyles = function getDirectionStyles(direction) {
   switch (direction) {

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

@@ -38,6 +38,7 @@ var AvatarGroup = function AvatarGroup(_ref) {
       items = _ref$items === void 0 ? [] : _ref$items,
       _ref$maxCount = _ref.maxCount,
       maxCount = _ref$maxCount === void 0 ? MAX_COUNT : _ref$maxCount,
+      name = _ref.name,
       overrideCss = _ref.overrideCss,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
@@ -51,6 +52,7 @@ var AvatarGroup = function AvatarGroup(_ref) {
   return jsx("span", {
     css: [getStyles(size), overrideCss],
     "data-fit-to-content": true,
+    "data-smart-element": name,
     "data-smart-element-avatar-group": true,
     "data-testid": testId
   }, jsx(AtlaskitAvatarGroup, {

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

@@ -65,6 +65,7 @@ var renderImageIcon = function renderImageIcon(url, testId) {
 var Badge = function Badge(_ref) {
   var icon = _ref.icon,
       label = _ref.label,
+      name = _ref.name,
       overrideCss = _ref.overrideCss,
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'smart-element-badge' : _ref$testId,
@@ -79,6 +80,7 @@ var Badge = function Badge(_ref) {
   return jsx("span", {
     css: [badgeStyles, overrideCss],
     "data-fit-to-content": true,
+    "data-smart-element": name,
     "data-smart-element-badge": true,
     "data-testid": testId
   }, jsx("span", {

package/dist/esm/view/FlexibleCard/components/elements/date-time/index.js

@@ -32,6 +32,7 @@ var typeToDescriptorMap = {
 
 var DateTime = function DateTime(_ref) {
   var date = _ref.date,
+      name = _ref.name,
       overrideCss = _ref.overrideCss,
       type = _ref.type,
       _ref$testId = _ref.testId,
@@ -71,6 +72,7 @@ var DateTime = function DateTime(_ref) {
   return jsx("span", {
     css: [styles, overrideCss],
     "data-separator": true,
+    "data-smart-element": name,
     "data-smart-element-date-time": true,
     "data-testid": testId
   }, text ? "".concat(text, " ").concat(context) : jsx(FormattedMessage, _extends({}, typeToDescriptorMap[type][typeVariant], {

package/dist/esm/view/FlexibleCard/components/elements/icon/index.js

@@ -68,6 +68,7 @@ var Icon = function Icon(_ref) {
   var icon = _ref.icon,
       _ref$label = _ref.label,
       label = _ref$label === void 0 ? 'Link' : _ref$label,
+      name = _ref.name,
       _ref$position = _ref.position,
       position = _ref$position === void 0 ? SmartLinkPosition.Top : _ref$position,
       overrideCss = _ref.overrideCss,
@@ -87,6 +88,7 @@ var Icon = function Icon(_ref) {
   return jsx("div", {
     css: [styles, renderStyles, overrideCss],
     "data-fit-to-content": true,
+    "data-smart-element": name,
     "data-smart-element-icon": true,
     "data-testid": testId
   }, element);

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

@@ -33,6 +33,12 @@ export var CreatedOn = createElement(ElementName.CreatedOn);
  */
 
 export var CreatedBy = createElement(ElementName.CreatedBy);
+/**
+ * Creates a DueOn Lozenge element using the data from dueOn in the Flexible UI Context.
+ * @see Lozenge
+ */
+
+export var DueOn = createElement(ElementName.DueOn);
 /**
  * Creates an element that contains Last Commit hash
  */
@@ -92,6 +98,12 @@ export var ReactCount = createElement(ElementName.ReactCount);
  */
 
 export var Snippet = createElement(ElementName.Snippet);
+/**
+ * Creates a SourceBranch Text element using the data from sourceBranch in the Flexible UI Context.
+ * @see Text
+ */
+
+export var SourceBranch = createElement(ElementName.SourceBranch);
 /**
  * Creates a State Lozenge element using the data from State in the Flexible UI Context.
  * @see Lozenge
@@ -104,6 +116,12 @@ export var State = createElement(ElementName.State);
  */
 
 export var SubscriberCount = createElement(ElementName.SubscriberCount);
+/**
+ * Creates a TargetBranch Text element using the data from targetBranch in the Flexible UI Context.
+ * @see Text
+ */
+
+export var TargetBranch = createElement(ElementName.TargetBranch);
 /**
  * Creates a Title Link element using the data from Title in the Flexible UI Context.
  * This represents the main link text within the Smart Link.

package/dist/esm/view/FlexibleCard/components/elements/link/index.js

@@ -62,6 +62,7 @@ var Link = function Link(_ref) {
   var hideTooltip = _ref.hideTooltip,
       _ref$maxLines = _ref.maxLines,
       maxLines = _ref$maxLines === void 0 ? DEFAULT_MAX_LINES : _ref$maxLines,
+      name = _ref.name,
       overrideCss = _ref.overrideCss,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
@@ -78,6 +79,7 @@ var Link = function Link(_ref) {
   }, [text]);
   var anchor = jsx("a", {
     css: [getAnchorStyles(size, theme, getMaxLines(maxLines), hasSpace), overrideCss],
+    "data-smart-element": name,
     "data-smart-element-link": true,
     "data-testid": testId,
     onClick: onClick,

package/dist/esm/view/FlexibleCard/components/elements/lozenge/index.js

@@ -17,6 +17,7 @@ var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["
 var Lozenge = function Lozenge(_ref) {
   var _ref$appearance = _ref.appearance,
       appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
+      name = _ref.name,
       overrideCss = _ref.overrideCss,
       text = _ref.text,
       _ref$testId = _ref.testId,
@@ -29,6 +30,7 @@ var Lozenge = function Lozenge(_ref) {
   return jsx("span", {
     css: [styles, overrideCss],
     "data-fit-to-content": true,
+    "data-smart-element": name,
     "data-smart-element-lozenge": true,
     "data-testid": testId
   }, jsx(AtlaskitLozenge, {