@atlaskit/smart-card 19.1.20 → 19.1.23

package/dist/es2019/state/helpers.js

@@ -19,9 +19,31 @@ export const getClickUrl = (url, jsonLd) => {
 
   return url;
 };
-export const getDefinitionId = details => details && details.meta && details.meta.definitionId;
-export const getExtensionKey = details => details && details.meta && details.meta.key;
-export const getResourceType = details => details && details.meta && details.meta.resourceType;
+export const getDefinitionId = details => {
+  var _details$meta;
+
+  return details === null || details === void 0 ? void 0 : (_details$meta = details.meta) === null || _details$meta === void 0 ? void 0 : _details$meta.definitionId;
+};
+export const getExtensionKey = details => {
+  var _details$meta2;
+
+  return details === null || details === void 0 ? void 0 : (_details$meta2 = details.meta) === null || _details$meta2 === void 0 ? void 0 : _details$meta2.key;
+};
+export const getResourceType = details => {
+  var _details$meta3;
+
+  return details === null || details === void 0 ? void 0 : (_details$meta3 = details.meta) === null || _details$meta3 === void 0 ? void 0 : _details$meta3.resourceType;
+};
+export const getProduct = details => {
+  var _details$meta4;
+
+  return details === null || details === void 0 ? void 0 : (_details$meta4 = details.meta) === null || _details$meta4 === void 0 ? void 0 : _details$meta4.product;
+};
+export const getSubproduct = details => {
+  var _details$meta5;
+
+  return details === null || details === void 0 ? void 0 : (_details$meta5 = details.meta) === null || _details$meta5 === void 0 ? void 0 : _details$meta5.subproduct;
+};
 export const getServices = details => details && details.meta.auth || [];
 export const hasResolved = details => details && isAccessible(details) && isVisible(details);
 export const isAccessible = ({

package/dist/es2019/utils/analytics/analytics.js

@@ -174,7 +174,7 @@ export const uiAuthAlternateAccountEvent = (display, definitionId, extensionKey)
     display
   }
 });
-export const uiCardClickedEvent = (id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct) => ({
+export const uiCardClickedEvent = (id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct, destinationSubproduct) => ({
   action: 'clicked',
   actionSubject: 'smartLink',
   actionSubjectId: 'titleGoToLink',
@@ -187,7 +187,8 @@ export const uiCardClickedEvent = (id, display, status, definitionId, extensionK
     display,
     isModifierKeyPressed,
     location,
-    destinationProduct
+    destinationProduct,
+    destinationSubproduct
   }
 });
 export const uiActionClickedEvent = (id, actionType, extensionKey, display) => ({

package/dist/es2019/version.json

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

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useCallback, useMemo } from 'react';
 import { isSpecialEvent } from '../../utils';
 import * as measure from '../../utils/performance';
-import { getDefinitionId, getServices, isFinalState, getClickUrl, getResourceType, getExtensionKey } from '../../state/helpers';
+import { getDefinitionId, getServices, isFinalState, getClickUrl, getResourceType, getExtensionKey, getSubproduct, getProduct } from '../../state/helpers';
 import { useSmartLink } from '../../state';
 import { BlockCard } from '../BlockCard';
 import { InlineCard } from '../InlineCard';
@@ -42,6 +42,8 @@ export function CardWithUrlContent({
   const definitionId = getDefinitionId(state.details);
   const extensionKey = getExtensionKey(state.details);
   const resourceType = getResourceType(state.details);
+  const product = getProduct(state.details);
+  const subproduct = getSubproduct(state.details);
   const services = getServices(state.details);
   let isFlexibleUi = useMemo(() => isFlexibleUiCard(children), [children]); // Setup UI handlers.
 
@@ -51,14 +53,14 @@ export function CardWithUrlContent({
   }, [state.details, url]);
   const handleClickWrapper = useCallback(event => {
     const isModifierKeyPressed = isSpecialEvent(event);
-    analytics.ui.cardClickedEvent(id, isFlexibleUi ? 'flexible' : appearance, state.status, definitionId, extensionKey, isModifierKeyPressed);
+    analytics.ui.cardClickedEvent(id, isFlexibleUi ? 'flexible' : appearance, state.status, definitionId, extensionKey, isModifierKeyPressed, undefined, product, subproduct);
 
     if (onClick) {
       onClick(event);
     } else if (!isFlexibleUi) {
       handleClick(event);
     }
-  }, [id, state.status, analytics.ui, appearance, definitionId, extensionKey, onClick, handleClick, isFlexibleUi]);
+  }, [id, state.status, analytics.ui, appearance, definitionId, extensionKey, onClick, handleClick, isFlexibleUi, product, subproduct]);
   const handleAuthorize = useCallback(() => actions.authorize(appearance), [actions, appearance]);
   const handleRetry = useCallback(() => {
     actions.reload();

package/dist/es2019/view/FlexibleCard/components/blocks/element-group/index.js

@@ -2,7 +2,8 @@
 import React from 'react';
 import { css, jsx } from '@emotion/core';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../../../constants';
-import { getBaseStyles, renderChildren } from '../utils';
+import { getBaseStyles, getGapSize, renderChildren } from '../utils';
+import { getMaxLineHeight, getTruncateStyles } from '../../utils';
 
 const getAlignmentStyles = align => {
   switch (align) {
@@ -21,11 +22,57 @@ const getAlignmentStyles = align => {
   }
 };
 
+const getGapStyles = (size, align) => {
+  const gap = getGapSize(size);
+
+  if (align === SmartLinkAlignment.Right) {
+    return css`
+      > span {
+        margin-left: ${gap}rem;
+        &:first-child {
+          margin-left: initial;
+        }
+      }
+    `;
+  }
+
+  return css`
+    > span {
+      margin-right: ${gap}rem;
+      &:last-child {
+        margin-right: initial;
+      }
+    }
+  `;
+};
+
+const getHorizontalDirectionStyles = (size, align) => {
+  const lineHeight = getMaxLineHeight(size);
+  return css`
+    display: block;
+    vertical-align: middle;
+    ${getTruncateStyles(1, lineHeight + 'rem')}
+
+    > span, > div {
+      vertical-align: middle;
+
+      &[data-smart-element-date-time],
+      &[data-smart-element-text] {
+        // Show all/wrapped/truncated
+        display: inline;
+      }
+    }
+
+    ${getGapStyles(size, align)}
+  `;
+};
+
 export const getElementGroupStyles = (direction, size, align, width) => css`
   ${getBaseStyles(direction, size)}
   ${getAlignmentStyles(align)}
   min-width: 10%;
   ${width === SmartLinkWidth.Flexible ? `flex: 1 3;` : ''}
+  ${direction === SmartLinkDirection.Horizontal ? getHorizontalDirectionStyles(size, align) : ''}
 `;
 /**
  * Creates a group of Action components. Accepts an array of Actions, in addition to some styling

package/dist/es2019/view/FlexibleCard/components/blocks/footer-block/index.js

@@ -1,10 +1,22 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { SmartLinkAlignment, SmartLinkDirection, SmartLinkStatus, SmartLinkWidth } from '../../../../../constants';
+import { css } from '@emotion/core';
+import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkStatus, SmartLinkWidth } from '../../../../../constants';
 import Block from '../block';
 import ElementGroup from '../element-group';
 import { Provider } from '../../elements';
 import ActionGroup from '../action-group';
+
+const getActionGroupStyles = size => {
+  if (size === SmartLinkSize.XLarge) {
+    // The biggest height of the action button exceeds the max line-height
+    // of the elements causing the action on the block with x-large size to
+    // get cut at the bottom.
+    return css`
+      max-height: 2rem;
+    `;
+  }
+};
 /**
  * Represents a FooterBlock, designed to contain elements and actions that should appear
  * at the bottom of a link card.
@@ -13,10 +25,12 @@ import ActionGroup from '../action-group';
  * @see Block
  */
 
+
 const FooterBlock = props => {
   const {
     status,
     actions,
+    size = SmartLinkSize.Medium,
     testId = 'smart-footer-block'
   } = props;
 
@@ -32,6 +46,7 @@ const FooterBlock = props => {
     testId: "smart-element-group-actions",
     align: SmartLinkAlignment.Right,
     direction: SmartLinkDirection.Horizontal,
+    overrideCss: getActionGroupStyles(size),
     width: SmartLinkWidth.Flexible
   }, /*#__PURE__*/React.createElement(ActionGroup, {
     items: actions,

package/dist/es2019/view/FlexibleCard/components/blocks/metadata-block/index.js

@@ -2,9 +2,10 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { css } from '@emotion/core';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkStatus, SmartLinkWidth } from '../../../../../constants';
-import { getGapSize, renderElementItems } from '../utils';
+import { renderElementItems } from '../utils';
 import Block from '../block';
 import ElementGroup from '../element-group';
+import { getMaxLineHeight, getTruncateStyles } from '../../utils';
 const DEFAULT_MAX_LINES = 2;
 const MAXIMUM_MAX_LINES = 2;
 const MINIMUM_MAX_LINES = 1;
@@ -12,43 +13,15 @@ const MINIMUM_MAX_LINES = 1;
 const getElementGroupStyles = (size, maxLines) => {
   // MetadataBlock allows metadata elements to be displayed in
   // multiple lines, with maximum of 2 lines.
-  // a) We need the height of the line to be equal on both left and right
-  //    sides so they line up nicely.
-  // b) There is no way to truncate non-text elements nicely. Here
-  //    it's fix max height of the element group so that anything that is
-  //    overflown will not be visible.
-  const lineHeight = getLineHeight(size);
-  const gap = getGapSize(size);
-  const gapHeight = gap * (maxLines - 1);
-  const height = lineHeight * maxLines + gapHeight;
+  // We need the height of the line to be equal on both left and right
+  // sides so they line up nicely.
+  const lineHeight = getMaxLineHeight(size);
   return css`
-    flex-wrap: wrap;
     line-height: ${lineHeight}rem;
-    max-height: ${height}rem;
-    > span,
-    > div {
-      min-height: ${lineHeight}rem;
-      max-height: ${lineHeight}rem;
-      line-height: ${lineHeight}rem;
-    }
+    ${getTruncateStyles(maxLines, lineHeight + 'rem')}
   `;
 };
 
-const getLineHeight = size => {
-  // The maximum height of all elements in specific size.
-  // These heights belongs to AvatarGroup.
-  switch (size) {
-    case SmartLinkSize.XLarge:
-    case SmartLinkSize.Large:
-      return 1.75;
-
-    case SmartLinkSize.Medium:
-    case SmartLinkSize.Small:
-    default:
-      return 1.5;
-  }
-};
-
 const getMaxLines = maxLines => {
   if (maxLines > MAXIMUM_MAX_LINES) {
     return DEFAULT_MAX_LINES;

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

@@ -64,6 +64,7 @@ export const getGapSize = size => {
   }
 };
 export const getBaseStyles = (direction, size) => css`
+  align-items: center;
   display: flex;
   gap: ${getGapSize(size)}rem;
   line-height: 1rem;

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

@@ -6,16 +6,21 @@ import { SmartLinkSize } from '../../../../../constants';
 const MAX_COUNT = 4;
 
 const getStyles = size => {
+  const styles = css`
+    display: inline-flex;
+  `;
+
   switch (size) {
     case SmartLinkSize.XLarge:
     case SmartLinkSize.Large:
       // Default AK small size
-      return;
+      return styles;
 
     case SmartLinkSize.Medium:
     case SmartLinkSize.Small:
     default:
       return css`
+        ${styles}
         li {
           span,
           svg {

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

@@ -9,15 +9,19 @@ import ImageIcon from '../../common/image-icon';
 import AtlaskitIcon from '../../common/atlaskit-icon';
 const badgeStyles = css`
   align-items: center;
-  display: flex;
+  display: inline-flex;
   min-width: fit-content;
 `;
 const iconStyles = css`
   color: ${tokens.badgeIcon};
+  line-height: 0;
+  vertical-align: middle;
   ${getIconSizeStyles('1rem')}
+  img,
   span,
   svg {
     line-height: 0;
+    vertical-align: middle;
   }
 `;
 const labelStyles = css`
@@ -25,6 +29,7 @@ const labelStyles = css`
   font-size: 0.75rem;
   line-height: 1rem;
   padding-left: 0.125rem;
+  vertical-align: middle;
 `;
 const messageMapper = {
   [IconType.PriorityBlocker]: messages.priority_blocker,
@@ -99,7 +104,7 @@ const Badge = ({
     return null;
   }
 
-  return jsx("div", {
+  return jsx("span", {
     css: [badgeStyles, overrideCss],
     "data-fit-to-content": true,
     "data-smart-element-badge": true,

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

@@ -3,6 +3,7 @@ import React from 'react';
 import { css, jsx } from '@emotion/core';
 import AtlaskitLozenge from '@atlaskit/lozenge';
 const styles = css`
+  display: inline-flex;
   line-height: inherit;
 `;
 /**

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

@@ -96,6 +96,20 @@ export const getLinkSizeStyles = size => {
       `;
   }
 };
+export const getMaxLineHeight = size => {
+  // The maximum line height based on all elements in specific size.
+  // These heights belongs to AvatarGroup.
+  switch (size) {
+    case SmartLinkSize.XLarge:
+    case SmartLinkSize.Large:
+      return 1.75;
+
+    case SmartLinkSize.Medium:
+    case SmartLinkSize.Small:
+    default:
+      return 1.5;
+  }
+};
 export const getMaxLines = (value, defaultValue, max, min) => {
   if (value > max) {
     return defaultValue;
@@ -115,7 +129,9 @@ export const getTruncateStyles = (maxLines, lineHeight = '1rem', wordBreak = 'br
     -webkit-line-clamp: ${maxLines};
     -webkit-box-orient: vertical;
     // Fallback options
-    max-height: calc(${maxLines} * ${lineHeight});
+    @supports not (-webkit-line-clamp: 1) {
+      max-height: calc(${maxLines} * ${lineHeight});
+    }
   `;
 export const hasWhiteSpace = str => {
   return str.search(/\s/) >= 0;

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

@@ -76,7 +76,8 @@ const HoverCardContent = ({
     actions: titleActions
   }), /*#__PURE__*/React.createElement(MetadataBlock, {
     primary: primary,
-    secondary: secondary
+    secondary: secondary,
+    size: SmartLinkSize.Small
   }), body, /*#__PURE__*/React.createElement(FooterBlock, {
     actions: footerActions
   }));

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

@@ -1,10 +1,11 @@
+import { ElementName } from '../../constants';
 export const HOVER_CARD_ANALYTICS_DISPLAY = 'flexible';
 export const getSimulatedMetadata = (extensionKey = '') => {
   switch (extensionKey) {
     case 'confluence-object-provider':
       return {
         metadata: {
-          primary: ['AuthorGroup', 'CreatedBy', 'CommentCount', 'ReactCount'],
+          primary: [ElementName.AuthorGroup, ElementName.CreatedBy, ElementName.CommentCount, ElementName.ReactCount],
           secondary: []
         }
       };
@@ -12,7 +13,7 @@ export const getSimulatedMetadata = (extensionKey = '') => {
     case 'jira-object-provider':
       return {
         metadata: {
-          primary: ['AuthorGroup', 'State', 'Priority'],
+          primary: [ElementName.AuthorGroup, ElementName.State, ElementName.Priority],
           secondary: []
         }
       };
@@ -20,7 +21,7 @@ export const getSimulatedMetadata = (extensionKey = '') => {
     default:
       return {
         metadata: {
-          primary: ['ModifiedOn'],
+          primary: [ElementName.ModifiedOn, ElementName.CreatedBy],
           secondary: []
         }
       };

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

@@ -4,7 +4,7 @@ import { useMemo, useCallback } from 'react';
 import { auth } from '@atlaskit/outbound-auth-flow-client';
 import { APIError } from '@atlaskit/linking-common';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
-import { ACTION_PENDING, ACTION_RESOLVED, ACTION_ERROR, ACTION_ERROR_FALLBACK, cardAction } from '@atlaskit/linking-common';
+import { ACTION_PENDING, ACTION_RESOLVED, ACTION_ERROR, ACTION_ERROR_FALLBACK, ACTION_RELOADING, cardAction } from '@atlaskit/linking-common';
 import { getDefinitionId, getByDefinitionId, getServices, getStatus, getExtensionKey } from '../helpers';
 import { ERROR_MESSAGE_OAUTH, ERROR_MESSAGE_FATAL } from './constants';
 import * as measure from '../../utils/performance';
@@ -67,6 +67,7 @@ export var useSmartCardActions = function useSmartCardActions(id, url, analytics
     }
   }, [hasData, status, dispatch, details]);
   var handleResolvedLinkResponse = useCallback(function (resourceUrl, response) {
+    var isReloading = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     var hostname = new URL(resourceUrl).hostname;
     var nextStatus = response ? getStatus(response) : 'fatal'; // If we require authorization & do not have an authFlow available,
     // throw an error and render as a normal blue link.
@@ -83,9 +84,15 @@ export var useSmartCardActions = function useSmartCardActions(id, url, analytics
     } // Dispatch Analytics and resolved card action - including unauthorized states.
 
 
-    dispatch(cardAction(ACTION_RESOLVED, {
-      url: resourceUrl
-    }, response));
+    if (isReloading) {
+      dispatch(cardAction(ACTION_RELOADING, {
+        url: resourceUrl
+      }, response));
+    } else {
+      dispatch(cardAction(ACTION_RESOLVED, {
+        url: resourceUrl
+      }, response));
+    }
   }, [dispatch, handleResolvedLinkError, hasAuthFlowSupported]);
   var resolve = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var resourceUrl,
@@ -104,7 +111,7 @@ export var useSmartCardActions = function useSmartCardActions(id, url, analytics
             }
 
             return _context.abrupt("return", connections.client.fetchData(resourceUrl).then(function (response) {
-              return handleResolvedLinkResponse(resourceUrl, response);
+              return handleResolvedLinkResponse(resourceUrl, response, isReloading);
             }).catch(function (error) {
               return handleResolvedLinkError(resourceUrl, error);
             }));

package/dist/esm/state/analytics/useSmartLinkAnalytics.js

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { getUrl } from '@atlaskit/linking-common';
 import { uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, uiRenderSuccessEvent, uiHoverCardViewedEvent, uiHoverCardDismissedEvent, uiHoverCardOpenLinkClickedEvent, invokeSucceededEvent as _invokeSucceededEvent, invokeFailedEvent as _invokeFailedEvent, connectSucceededEvent as _connectSucceededEvent, connectFailedEvent as _connectFailedEvent, trackAppAccountConnected, screenAuthPopupEvent, instrumentEvent } from '../../utils/analytics';
 import { failUfoExperience, startUfoExperience, succeedUfoExperience } from './ufoExperiences';
-import { getDefinitionId, getExtensionKey, getResourceType } from '../helpers';
+import { getDefinitionId, getExtensionKey, getResourceType, getSubproduct, getProduct } from '../helpers';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
 /**
  * This hook provides usage of Smart Link analytics outside of the Card component.
@@ -24,6 +24,8 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchA
   var extractedDefinitionId = getDefinitionId(state.details);
   var extractedExtensionKey = getExtensionKey(state.details);
   var extractedResourceType = getResourceType(state.details);
+  var extractedSubproduct = getSubproduct(state.details);
+  var extractedProduct = getProduct(state.details);
   /** Contains all ui analytics events */
 
   var ui = useMemo(function () {
@@ -60,6 +62,7 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchA
        * This fires an event that represents when a user clicks on a Smart Link.
        * @param id The unique ID for this Smart Link.
        * @param display Whether the card was an Inline, Block, Embed or Flexible UI.
+       * @param status What status the Smart Link is currently in (e.g. resolved, unresolved)
        * @param definitionId The definitionId of the Smart Link resolver invoked.
        * @param extensionKey The extensionKey of the Smart Link resovler invoked.
        * @param isModifierKeyPressed Whether a modifier key was pressed when clicking the Smart Link.
@@ -75,8 +78,9 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchA
         var extensionKey = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : extractedExtensionKey;
         var isModifierKeyPressed = arguments.length > 5 ? arguments[5] : undefined;
         var location = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : defaultLocation;
-        var destinationProduct = arguments.length > 7 ? arguments[7] : undefined;
-        return dispatchAnalytics(uiCardClickedEvent(id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct));
+        var destinationProduct = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : extractedProduct;
+        var destinationSubproduct = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : extractedSubproduct;
+        return dispatchAnalytics(uiCardClickedEvent(id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct, destinationSubproduct));
       },
 
       /**
@@ -186,7 +190,7 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchA
         return dispatchAnalytics(uiHoverCardDismissedEvent(id, previewDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod));
       }
     };
-  }, [defaultId, defaultLocation, extractedDefinitionId, extractedExtensionKey, dispatchAnalytics]);
+  }, [extractedDefinitionId, extractedExtensionKey, dispatchAnalytics, defaultId, defaultLocation, extractedProduct, extractedSubproduct]);
   /** Contains all operational analytics events */
 
   var operational = useMemo(function () {

package/dist/esm/state/helpers.js

@@ -18,13 +18,29 @@ export var getClickUrl = function getClickUrl(url, jsonLd) {
   return url;
 };
 export var getDefinitionId = function getDefinitionId(details) {
-  return details && details.meta && details.meta.definitionId;
+  var _details$meta;
+
+  return details === null || details === void 0 ? void 0 : (_details$meta = details.meta) === null || _details$meta === void 0 ? void 0 : _details$meta.definitionId;
 };
 export var getExtensionKey = function getExtensionKey(details) {
-  return details && details.meta && details.meta.key;
+  var _details$meta2;
+
+  return details === null || details === void 0 ? void 0 : (_details$meta2 = details.meta) === null || _details$meta2 === void 0 ? void 0 : _details$meta2.key;
 };
 export var getResourceType = function getResourceType(details) {
-  return details && details.meta && details.meta.resourceType;
+  var _details$meta3;
+
+  return details === null || details === void 0 ? void 0 : (_details$meta3 = details.meta) === null || _details$meta3 === void 0 ? void 0 : _details$meta3.resourceType;
+};
+export var getProduct = function getProduct(details) {
+  var _details$meta4;
+
+  return details === null || details === void 0 ? void 0 : (_details$meta4 = details.meta) === null || _details$meta4 === void 0 ? void 0 : _details$meta4.product;
+};
+export var getSubproduct = function getSubproduct(details) {
+  var _details$meta5;
+
+  return details === null || details === void 0 ? void 0 : (_details$meta5 = details.meta) === null || _details$meta5 === void 0 ? void 0 : _details$meta5.subproduct;
 };
 export var getServices = function getServices(details) {
   return details && details.meta.auth || [];

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

@@ -187,7 +187,7 @@ export var uiAuthAlternateAccountEvent = function uiAuthAlternateAccountEvent(di
     })
   };
 };
-export var uiCardClickedEvent = function uiCardClickedEvent(id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct) {
+export var uiCardClickedEvent = function uiCardClickedEvent(id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct, destinationSubproduct) {
   return {
     action: 'clicked',
     actionSubject: 'smartLink',
@@ -201,7 +201,8 @@ export var uiCardClickedEvent = function uiCardClickedEvent(id, display, status,
       display: display,
       isModifierKeyPressed: isModifierKeyPressed,
       location: location,
-      destinationProduct: destinationProduct
+      destinationProduct: destinationProduct,
+      destinationSubproduct: destinationSubproduct
     })
   };
 };

package/dist/esm/version.json

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

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useCallback, useMemo } from 'react';
 import { isSpecialEvent } from '../../utils';
 import * as measure from '../../utils/performance';
-import { getDefinitionId, getServices, isFinalState, getClickUrl, getResourceType, getExtensionKey } from '../../state/helpers';
+import { getDefinitionId, getServices, isFinalState, getClickUrl, getResourceType, getExtensionKey, getSubproduct, getProduct } from '../../state/helpers';
 import { useSmartLink } from '../../state';
 import { BlockCard } from '../BlockCard';
 import { InlineCard } from '../InlineCard';
@@ -42,6 +42,8 @@ export function CardWithUrlContent(_ref) {
   var definitionId = getDefinitionId(state.details);
   var extensionKey = getExtensionKey(state.details);
   var resourceType = getResourceType(state.details);
+  var product = getProduct(state.details);
+  var subproduct = getSubproduct(state.details);
   var services = getServices(state.details);
   var isFlexibleUi = useMemo(function () {
     return isFlexibleUiCard(children);
@@ -53,14 +55,14 @@ export function CardWithUrlContent(_ref) {
   }, [state.details, url]);
   var handleClickWrapper = useCallback(function (event) {
     var isModifierKeyPressed = isSpecialEvent(event);
-    analytics.ui.cardClickedEvent(id, isFlexibleUi ? 'flexible' : appearance, state.status, definitionId, extensionKey, isModifierKeyPressed);
+    analytics.ui.cardClickedEvent(id, isFlexibleUi ? 'flexible' : appearance, state.status, definitionId, extensionKey, isModifierKeyPressed, undefined, product, subproduct);
 
     if (onClick) {
       onClick(event);
     } else if (!isFlexibleUi) {
       handleClick(event);
     }
-  }, [id, state.status, analytics.ui, appearance, definitionId, extensionKey, onClick, handleClick, isFlexibleUi]);
+  }, [id, state.status, analytics.ui, appearance, definitionId, extensionKey, onClick, handleClick, isFlexibleUi, product, subproduct]);
   var handleAuthorize = useCallback(function () {
     return actions.authorize(appearance);
   }, [actions, appearance]);

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

@@ -1,12 +1,13 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/core';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../../../constants';
-import { getBaseStyles, renderChildren } from '../utils';
+import { getBaseStyles, getGapSize, renderChildren } from '../utils';
+import { getMaxLineHeight, getTruncateStyles } from '../../utils';
 
 var getAlignmentStyles = function getAlignmentStyles(align) {
   switch (align) {
@@ -19,8 +20,23 @@ var getAlignmentStyles = function getAlignmentStyles(align) {
   }
 };
 
+var getGapStyles = function getGapStyles(size, align) {
+  var gap = getGapSize(size);
+
+  if (align === SmartLinkAlignment.Right) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      > span {\n        margin-left: ", "rem;\n        &:first-child {\n          margin-left: initial;\n        }\n      }\n    "])), gap);
+  }
+
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    > span {\n      margin-right: ", "rem;\n      &:last-child {\n        margin-right: initial;\n      }\n    }\n  "])), gap);
+};
+
+var getHorizontalDirectionStyles = function getHorizontalDirectionStyles(size, align) {
+  var lineHeight = getMaxLineHeight(size);
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    display: block;\n    vertical-align: middle;\n    ", "\n\n    > span, > div {\n      vertical-align: middle;\n\n      &[data-smart-element-date-time],\n      &[data-smart-element-text] {\n        // Show all/wrapped/truncated\n        display: inline;\n      }\n    }\n\n    ", "\n  "])), getTruncateStyles(1, lineHeight + 'rem'), getGapStyles(size, align));
+};
+
 export var getElementGroupStyles = function getElementGroupStyles(direction, size, align, width) {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  min-width: 10%;\n  ", "\n"])), getBaseStyles(direction, size), getAlignmentStyles(align), width === SmartLinkWidth.Flexible ? "flex: 1 3;" : '');
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  min-width: 10%;\n  ", "\n  ", "\n"])), getBaseStyles(direction, size), getAlignmentStyles(align), width === SmartLinkWidth.Flexible ? "flex: 1 3;" : '', direction === SmartLinkDirection.Horizontal ? getHorizontalDirectionStyles(size, align) : '');
 };
 /**
  * Creates a group of Action components. Accepts an array of Actions, in addition to some styling