@atlaskit/smart-card 19.1.19 → 19.1.22

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

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
 /** @jsx jsx */
 import React from 'react';
@@ -10,16 +10,18 @@ import { SmartLinkSize } from '../../../../../constants';
 var MAX_COUNT = 4;
 
 var getStyles = function getStyles(size) {
+  var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: inline-flex;\n  "])));
+
   switch (size) {
     case SmartLinkSize.XLarge:
     case SmartLinkSize.Large:
       // Default AK small size
-      return;
+      return styles;
 
     case SmartLinkSize.Medium:
     case SmartLinkSize.Small:
     default:
-      return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        li {\n          span,\n          svg {\n            max-height: 1.25rem;\n            max-width: 1.25rem;\n          }\n        }\n      "])));
+      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        ", "\n        li {\n          span,\n          svg {\n            max-height: 1.25rem;\n            max-width: 1.25rem;\n          }\n        }\n      "])), styles);
   }
 };
 /**

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

@@ -12,9 +12,9 @@ import { IconType } from '../../../../../constants';
 import { messages } from '../../../../../messages';
 import ImageIcon from '../../common/image-icon';
 import AtlaskitIcon from '../../common/atlaskit-icon';
-var badgeStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  min-width: fit-content;\n"])));
-var iconStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  ", "\n  span,\n  svg {\n    line-height: 0;\n  }\n"])), tokens.badgeIcon, getIconSizeStyles('1rem'));
-var labelStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  padding-left: 0.125rem;\n"])), tokens.badgeText);
+var badgeStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  display: inline-flex;\n  min-width: fit-content;\n"])));
+var iconStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  line-height: 0;\n  vertical-align: middle;\n  ", "\n  img,\n  span,\n  svg {\n    line-height: 0;\n    vertical-align: middle;\n  }\n"])), tokens.badgeIcon, getIconSizeStyles('1rem'));
+var labelStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  padding-left: 0.125rem;\n  vertical-align: middle;\n"])), tokens.badgeText);
 var messageMapper = (_messageMapper = {}, _defineProperty(_messageMapper, IconType.PriorityBlocker, messages.priority_blocker), _defineProperty(_messageMapper, IconType.PriorityCritical, messages.priority_critical), _defineProperty(_messageMapper, IconType.PriorityHigh, messages.priority_high), _defineProperty(_messageMapper, IconType.PriorityHighest, messages.priority_highest), _defineProperty(_messageMapper, IconType.PriorityLow, messages.priority_low), _defineProperty(_messageMapper, IconType.PriorityLowest, messages.priority_lowest), _defineProperty(_messageMapper, IconType.PriorityMajor, messages.priority_major), _defineProperty(_messageMapper, IconType.PriorityMedium, messages.priority_medium), _defineProperty(_messageMapper, IconType.PriorityMinor, messages.priority_minor), _defineProperty(_messageMapper, IconType.PriorityTrivial, messages.priority_trivial), _defineProperty(_messageMapper, IconType.PriorityUndefined, messages.priority_undefined), _messageMapper);
 
 var getFormattedMessageFromIcon = function getFormattedMessageFromIcon(icon) {
@@ -76,7 +76,7 @@ var Badge = function Badge(_ref) {
     return null;
   }
 
-  return jsx("div", {
+  return jsx("span", {
     css: [badgeStyles, overrideCss],
     "data-fit-to-content": true,
     "data-smart-element-badge": true,

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

@@ -6,7 +6,7 @@ var _templateObject;
 import React from 'react';
 import { css, jsx } from '@emotion/core';
 import AtlaskitLozenge from '@atlaskit/lozenge';
-var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  line-height: inherit;\n"])));
+var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  line-height: inherit;\n"])));
 /**
  * A base element that displays a Lozenge.
  * @internal

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

@@ -17,7 +17,7 @@ import ImageIcon from '../../common/image-icon';
  * [object-position] Center alignment of the selected replaced element's
  * contents within the element's box.
  */
-var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  aspect-ratio: 16 / 9;\n  display: flex;\n  width: 100%;\n  height: fit-content; // Fix Safari height not respecting aspect-ratio\n\n  // fallback\n  @supports not (aspect-ratio: auto) {\n    padding-top: 56.25%; // 16:9 ratio (9 / 16 = 0.5625)\n    height: 0;\n    position: relative;\n    overflow: hidden;\n  }\n\n  > img {\n    min-height: 100%;\n    min-width: 100%;\n    max-height: 100%;\n    max-width: 100%;\n    object-fit: cover;\n    object-position: center center;\n\n    // fallback\n    @supports not (aspect-ratio: auto) {\n      position: absolute;\n      transform: translate(-50%, -50%);\n      left: 50%;\n      top: 50%;\n      width: auto;\n      height: auto;\n    }\n  }\n"])));
+var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  aspect-ratio: 16 / 9;\n  display: flex;\n  width: 100%;\n  height: fit-content; // Fix Safari height not respecting aspect-ratio\n\n  // fallback\n  @supports not (aspect-ratio: auto) {\n    padding-top: 56.25%; // 16:9 ratio (9 / 16 = 0.5625)\n    height: 0;\n    position: relative;\n    overflow: hidden;\n  }\n\n  > img,\n  > span {\n    min-height: 100%;\n    min-width: 100%;\n    max-height: 100%;\n    max-width: 100%;\n    object-fit: cover;\n    object-position: center center;\n\n    // fallback\n    @supports not (aspect-ratio: auto) {\n      position: absolute;\n      transform: translate(-50%, -50%);\n      left: 50%;\n      top: 50%;\n      width: auto;\n      height: auto;\n    }\n  }\n"])));
 /**
  * A base element that displays a Media.
  * @internal

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

@@ -67,6 +67,20 @@ export var getLinkSizeStyles = function getLinkSizeStyles(size) {
       return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        font-size: 0.75rem;\n        font-weight: 400;\n        letter-spacing: 0em;\n        line-height: ", ";\n      "])), getLinkLineHeight(size));
   }
 };
+export var getMaxLineHeight = function 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 var getMaxLines = function getMaxLines(value, defaultValue, max, min) {
   if (value > max) {
     return defaultValue;
@@ -81,7 +95,7 @@ export var getMaxLines = function getMaxLines(value, defaultValue, max, min) {
 export var getTruncateStyles = function getTruncateStyles(maxLines) {
   var lineHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '1rem';
   var wordBreak = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'break-word';
-  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    display: -webkit-box;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: ", ";\n    -webkit-line-clamp: ", ";\n    -webkit-box-orient: vertical;\n    // Fallback options\n    max-height: calc(", " * ", ");\n  "])), wordBreak, maxLines, maxLines, lineHeight);
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    display: -webkit-box;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: ", ";\n    -webkit-line-clamp: ", ";\n    -webkit-box-orient: vertical;\n    // Fallback options\n    @supports not (-webkit-line-clamp: 1) {\n      max-height: calc(", " * ", ");\n    }\n  "])), wordBreak, maxLines, maxLines, lineHeight);
 };
 export var hasWhiteSpace = function hasWhiteSpace(str) {
   return str.search(/\s/) >= 0;

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

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

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

@@ -1,3 +1,4 @@
+import { ElementName } from '../../constants';
 export var HOVER_CARD_ANALYTICS_DISPLAY = 'flexible';
 export var getSimulatedMetadata = function getSimulatedMetadata() {
   var extensionKey = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
@@ -6,7 +7,7 @@ export var getSimulatedMetadata = function getSimulatedMetadata() {
     case 'confluence-object-provider':
       return {
         metadata: {
-          primary: ['AuthorGroup', 'CreatedBy', 'CommentCount', 'ReactCount'],
+          primary: [ElementName.AuthorGroup, ElementName.CreatedBy, ElementName.CommentCount, ElementName.ReactCount],
           secondary: []
         }
       };
@@ -14,7 +15,7 @@ export var getSimulatedMetadata = function getSimulatedMetadata() {
     case 'jira-object-provider':
       return {
         metadata: {
-          primary: ['AuthorGroup', 'State', 'Priority'],
+          primary: [ElementName.AuthorGroup, ElementName.State, ElementName.Priority],
           secondary: []
         }
       };
@@ -22,7 +23,7 @@ export var getSimulatedMetadata = function getSimulatedMetadata() {
     default:
       return {
         metadata: {
-          primary: ['ModifiedOn'],
+          primary: [ElementName.ModifiedOn, ElementName.CreatedBy],
           secondary: []
         }
       };

package/dist/types/state/analytics/useSmartLinkAnalytics.d.ts

@@ -3,6 +3,7 @@ import { AnalyticsHandler } from '../../utils/types';
 import { CardInnerAppearance } from '../../view/Card/types';
 import { PreviewDisplay, PreviewInvokeMethod } from '../../view/HoverCard/types';
 import { InvokeType } from '../../model/invoke-opts';
+import { DestinationProduct, DestinationSubproduct } from '../../utils/analytics/types';
 /**
  * This hook provides usage of Smart Link analytics outside of the Card component.
  * Can be provided to Card via the analyticsEvents prop to change the analytics events.
@@ -36,6 +37,7 @@ export declare const useSmartLinkAnalytics: (url: string, dispatchAnalytics: Ana
          * 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.
@@ -43,7 +45,7 @@ export declare const useSmartLinkAnalytics: (url: string, dispatchAnalytics: Ana
          * @param destinationProduct The product the Smart Link is linked to.
          * @returns
          */
-        cardClickedEvent: (id: string | undefined, display: CardInnerAppearance, status: CardType, definitionId?: string | undefined, extensionKey?: string | undefined, isModifierKeyPressed?: boolean | undefined, location?: string | undefined, destinationProduct?: string | undefined) => void;
+        cardClickedEvent: (id: string | undefined, display: CardInnerAppearance, status: CardType, definitionId?: string | undefined, extensionKey?: string | undefined, isModifierKeyPressed?: boolean | undefined, location?: string | undefined, destinationProduct?: DestinationProduct | string | undefined, destinationSubproduct?: DestinationSubproduct | string | undefined) => void;
         /**
          * This fires an event that represents when a user clicks on a Smart Link action.
          * Note: This also starts the UFO smart-link-action-invocation experience.

package/dist/types/state/helpers.d.ts

@@ -1,10 +1,13 @@
 import { JsonLd } from 'json-ld-types';
 import { CardType, CardStore } from '@atlaskit/linking-common';
+import { DestinationProduct, DestinationSubproduct } from '../utils/analytics/types';
 export declare const getByDefinitionId: (definitionId: string | undefined, store: CardStore) => string[];
 export declare const getClickUrl: (url: string, jsonLd?: JsonLd.Response<JsonLd.Data.BaseData> | undefined) => string;
 export declare const getDefinitionId: (details?: JsonLd.Response<JsonLd.Data.BaseData> | undefined) => string | undefined;
 export declare const getExtensionKey: (details?: JsonLd.Response<JsonLd.Data.BaseData> | undefined) => string | undefined;
 export declare const getResourceType: (details?: JsonLd.Response<JsonLd.Data.BaseData> | undefined) => string | undefined;
+export declare const getProduct: (details?: JsonLd.Response<JsonLd.Data.BaseData> | undefined) => DestinationProduct | string | undefined;
+export declare const getSubproduct: (details?: JsonLd.Response<JsonLd.Data.BaseData> | undefined) => DestinationSubproduct | string | undefined;
 export declare const getServices: (details?: JsonLd.Response<JsonLd.Data.BaseData> | undefined) => JsonLd.Primitives.AuthService[];
 export declare const hasResolved: (details?: JsonLd.Response<JsonLd.Data.BaseData> | undefined) => boolean | undefined;
 export declare const isAccessible: ({ meta: { access } }: JsonLd.Response) => boolean;

package/dist/types/state/hooks/useSmartLink.d.ts

@@ -12,7 +12,7 @@ export declare function useSmartLink(id: string, url: string, dispatchAnalytics:
         ui: {
             authEvent: (display: import("../../view/Card/types").CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => void;
             authAlternateAccountEvent: (display: import("../../view/Card/types").CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => void;
-            cardClickedEvent: (id: string | undefined, display: import("../../view/Card/types").CardInnerAppearance, status: import("@atlaskit/linking-common/types").CardType, definitionId?: string | undefined, extensionKey?: string | undefined, isModifierKeyPressed?: boolean | undefined, location?: string | undefined, destinationProduct?: string | undefined) => void;
+            cardClickedEvent: (id: string | undefined, display: import("../../view/Card/types").CardInnerAppearance, status: import("@atlaskit/linking-common/types").CardType, definitionId?: string | undefined, extensionKey?: string | undefined, isModifierKeyPressed?: boolean | undefined, location?: string | undefined, destinationProduct?: string | undefined, destinationSubproduct?: string | undefined) => void;
             actionClickedEvent: (id: string | undefined, extensionKey: string | undefined, actionType: string, display: import("../../view/Card/types").CardInnerAppearance, invokeType: import("../../model/invoke-opts").InvokeType) => void;
             hoverCardOpenLinkClickedEvent: (previewDisplay: import("../../view/HoverCard/types").PreviewDisplay, definitionId?: string | undefined, extensionKey?: string | undefined, previewInvokeMethod?: import("../../view/HoverCard/types").PreviewInvokeMethod | undefined) => void;
             closedAuthEvent: (display: import("../../view/Card/types").CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => void;

package/dist/types/utils/analytics/analytics.d.ts

@@ -23,7 +23,7 @@ export declare const connectFailedEvent: (definitionId?: string | undefined, ext
 export declare const trackAppAccountConnected: (definitionId?: string | undefined, extensionKey?: string | undefined) => AnalyticsPayload;
 export declare const uiAuthEvent: (display: CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => AnalyticsPayload;
 export declare const uiAuthAlternateAccountEvent: (display: CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => AnalyticsPayload;
-export declare const uiCardClickedEvent: (id: string, display: CardInnerAppearance, status: CardType, definitionId?: string | undefined, extensionKey?: string | undefined, isModifierKeyPressed?: boolean | undefined, location?: string | undefined, destinationProduct?: string | undefined) => AnalyticsPayload;
+export declare const uiCardClickedEvent: (id: string, display: CardInnerAppearance, status: CardType, definitionId?: string | undefined, extensionKey?: string | undefined, isModifierKeyPressed?: boolean | undefined, location?: string | undefined, destinationProduct?: string | undefined, destinationSubproduct?: string | undefined) => AnalyticsPayload;
 export declare const uiActionClickedEvent: (id: string, actionType: string, extensionKey?: string | undefined, display?: CardInnerAppearance | undefined) => AnalyticsPayload;
 export declare const uiClosedAuthEvent: (display: CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => AnalyticsPayload;
 export declare const screenAuthPopupEvent: (definitionId?: string | undefined, extensionKey?: string | undefined) => AnalyticsPayload;

package/dist/types/utils/analytics/types.d.ts

@@ -1 +1,2 @@
 export declare type DestinationProduct = 'jira' | 'confluence' | 'bitbucket' | 'trello';
+export declare type DestinationSubproduct = 'core' | 'software' | 'servicedesk';

package/dist/types/view/FlexibleCard/components/utils.d.ts

@@ -7,6 +7,7 @@ export declare const getIconSizeStyles: (width: string) => SerializedStyles;
 export declare const getIconWidth: (size?: SmartLinkSize | undefined) => string;
 export declare const getLinkLineHeight: (size: SmartLinkSize) => string;
 export declare const getLinkSizeStyles: (size: SmartLinkSize) => SerializedStyles;
+export declare const getMaxLineHeight: (size: SmartLinkSize) => 1.5 | 1.75;
 export declare const getMaxLines: (value: number, defaultValue: number, max: number, min: number) => number;
 export declare const getTruncateStyles: (maxLines: number, lineHeight?: string, wordBreak?: 'break-word' | 'break-all') => SerializedStyles;
 export declare const hasWhiteSpace: (str: string) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "19.1.19",
+  "version": "19.1.22",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"