@atlaskit/smart-card 18.0.13 → 18.0.16

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

@@ -1,11 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["actionGroup", "testId", "title"];
 
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/core';
 import Spinner from '@atlaskit/spinner';
+import Block from '../../block';
 import { SmartLinkSize } from '../../../../../../constants';
-import { BaseTitleBlockComponent } from '../utils';
 
 var getSpinnerSize = function getSpinnerSize(size) {
   // Spinner sizes should be equivalent or smaller than Icon size
@@ -25,19 +27,28 @@ var getSpinnerSize = function getSpinnerSize(size) {
       return 12;
   }
 };
+/**
+ * This represents a TitleBlock for a Smart Link that is currently waiting
+ * for a request to finish.
+ * This should render when a Smart Link has sent a request.
+ * @see TitleBlock
+ */
 
-var TitleBlockResolvingView = function TitleBlockResolvingView(props) {
-  var _props$size = props.size,
-      size = _props$size === void 0 ? SmartLinkSize.Medium : _props$size,
-      testId = props.testId;
-  var spinnerIcon = jsx(Spinner, {
+
+var TitleBlockResolvingView = function TitleBlockResolvingView(_ref) {
+  var actionGroup = _ref.actionGroup,
+      testId = _ref.testId,
+      title = _ref.title,
+      blockProps = _objectWithoutProperties(_ref, _excluded);
+
+  var _blockProps$size = blockProps.size,
+      size = _blockProps$size === void 0 ? SmartLinkSize.Medium : _blockProps$size;
+  return jsx(Block, _extends({}, blockProps, {
+    testId: "".concat(testId, "-resolving-view")
+  }), jsx(Spinner, {
     size: getSpinnerSize(size),
     testId: "".concat(testId, "-resolving-spinner")
-  });
-  return jsx(BaseTitleBlockComponent, _extends({}, props, {
-    blockIcon: spinnerIcon,
-    blockTestIdPostfix: "resolving-view"
-  }));
+  }), title, actionGroup);
 };
 
 export default TitleBlockResolvingView;

package/dist/esm/view/FlexibleCard/components/common/atlaskit-icon/index.js

@@ -6,7 +6,8 @@ import React from 'react';
 import Loadable from 'react-loadable';
 import { B200, B400, N700, R400 } from '@atlaskit/theme/colors';
 import { IconType } from '../../../../../constants';
-// prettier-ignore
+import { token } from '@atlaskit/tokens'; // prettier-ignore
+
 var importIconMapper = (_importIconMapper = {}, _defineProperty(_importIconMapper, IconType.Archive, function () {
   return import(
   /* webpackChunkName: "glyphArchive" */
@@ -295,10 +296,14 @@ var AtlaskitIcon = function AtlaskitIcon(_ref3) {
       return /*#__PURE__*/React.createElement(ImportedIcon, {
         "data-testid": testId // Confluence and Jira imports don't have native testId prop
         ,
-        textColor: N700,
+        textColor: token('color.text.subtle', N700)
+        /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+        ,
         iconColor: B200,
         iconGradientStart: B400,
         iconGradientStop: B200
+        /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+
       });
 
     case IconType.Error:
@@ -306,7 +311,7 @@ var AtlaskitIcon = function AtlaskitIcon(_ref3) {
       return /*#__PURE__*/React.createElement(ImportedIcon, {
         label: label,
         testId: testId,
-        primaryColor: R400
+        primaryColor: token('color.icon.danger', R400)
       });
 
     default:

package/dist/esm/view/FlexibleCard/components/common/image-icon/index.js

@@ -6,8 +6,9 @@ var _templateObject, _templateObject2;
 import React from 'react';
 import { css, jsx, keyframes } from '@emotion/core';
 import ImageLoader from 'react-render-image';
+import { token } from '@atlaskit/tokens';
 var placeholderShimmer = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% { background-position: -20px 0; }\n  100% { background-position: 20px 0; }\n"])));
-var shimmer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-radius: 2px;\n  user-select: none;\n\n  background: #f6f7f8;\n  background-image: linear-gradient(\n    to right,\n    #f6f7f8 0%,\n    #edeef1 20%,\n    #f6f7f8 40%,\n    #f6f7f8 100%\n  );\n  background-repeat: no-repeat;\n  background-size: 280% 100%;\n  display: inline-block;\n\n  animation-duration: 1s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: ", ";\n  animation-timing-function: linear;\n"])), placeholderShimmer);
+var shimmer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-radius: 2px;\n  user-select: none;\n  background: ", ";\n  // TODO: https://product-fabric.atlassian.net/browse/DSP-4236\n  background-image: linear-gradient(\n    to right,\n    ", " 0%,\n    ", " 20%,\n    ", " 40%,\n    ", "100%\n  );\n  background-repeat: no-repeat;\n  background-size: 280% 100%;\n  display: inline-block;\n\n  animation-duration: 1s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: ", ";\n  animation-timing-function: linear;\n"])), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton', '#edeef1'), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton.subtle', '#f6f7f8'), placeholderShimmer);
 
 var ImageIcon = function ImageIcon(_ref) {
   var defaultIcon = _ref.defaultIcon,

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

@@ -62,6 +62,11 @@ var renderChildren = function renderChildren(children, containerSize, containerT
     }
   });
 };
+/**
+ * This represents the container in which all Flexible UI Smart Links are rendered.
+ * @see Block
+ */
+
 
 var Container = function Container(_ref) {
   var children = _ref.children,

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

@@ -22,12 +22,21 @@ var getStyles = function getStyles(size) {
       return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        li {\n          span,\n          svg {\n            max-height: 1.25rem;\n            max-width: 1.25rem;\n          }\n        }\n      "])));
   }
 };
+/**
+ * An element that displays a group of avatars.
+ * @public
+ * @param {AvatarGroupProps} AvatarGroupProps - The props necessary for the AvatarGroup.
+ * @see AuthorGroup
+ * @see CollaboratorGroup
+ */
+
 
 var AvatarGroup = function AvatarGroup(_ref) {
   var _ref$items = _ref.items,
       items = _ref$items === void 0 ? [] : _ref$items,
       _ref$maxCount = _ref.maxCount,
       maxCount = _ref$maxCount === void 0 ? MAX_COUNT : _ref$maxCount,
+      overrideCss = _ref.overrideCss,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
       _ref$testId = _ref.testId,
@@ -38,7 +47,9 @@ var AvatarGroup = function AvatarGroup(_ref) {
   }
 
   return jsx("span", {
-    css: getStyles(size)
+    css: [getStyles(size), overrideCss],
+    "data-smart-element-avatar-group": true,
+    "data-testid": testId
   }, jsx(AtlaskitAvatarGroup, {
     maxCount: maxCount,
     appearance: "stack",

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

@@ -47,13 +47,28 @@ var renderImageIcon = function renderImageIcon(url, testId) {
     });
   }
 };
+/**
+ * An element that displays some text with an associated icon.
+ * @public
+ * @param {BadgeProps} BadgeProps - The props necessary for the Badge.
+ * @see CommentCount
+ * @see ViewCount
+ * @see ReactCount
+ * @see VoteCount
+ * @see SubscriberCount
+ * @see Priority
+ * @see ProgrammingLanguage
+ * @see Provider
+ */
+
 
 var Badge = function Badge(_ref) {
   var icon = _ref.icon,
-      url = _ref.url,
       label = _ref.label,
+      overrideCss = _ref.overrideCss,
       _ref$testId = _ref.testId,
-      testId = _ref$testId === void 0 ? 'smart-element-badge' : _ref$testId;
+      testId = _ref$testId === void 0 ? 'smart-element-badge' : _ref$testId,
+      url = _ref.url;
   var formattedMessageOrLabel = getFormattedMessageFromIcon(icon) || label;
   var badgeIcon = renderAtlaskitIcon(icon, testId) || renderImageIcon(url, testId);
 
@@ -62,7 +77,7 @@ var Badge = function Badge(_ref) {
   }
 
   return jsx("div", {
-    css: badgeStyles,
+    css: [badgeStyles, overrideCss],
     "data-fit-to-content": true,
     "data-smart-element-badge": true,
     "data-testid": testId

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

@@ -16,9 +16,17 @@ var typeToDescriptorMap = {
   created: messages.created_on,
   modified: messages.modified_on
 };
+/**
+ * An element that displays an ISO Timestamp in text.
+ * @public
+ * @param {DateTimeProps} DateTimeProps - The props necessary for the DateTime element.
+ * @see CreatedOn
+ * @see ModifiedOn
+ */
 
 var DateTime = function DateTime(_ref) {
   var date = _ref.date,
+      overrideCss = _ref.overrideCss,
       type = _ref.type,
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'smart-element-date-time' : _ref$testId;
@@ -38,7 +46,7 @@ var DateTime = function DateTime(_ref) {
     numeric: 'auto'
   });
   return jsx("span", {
-    css: styles,
+    css: [styles, overrideCss],
     "data-separator": true,
     "data-smart-element-date-time": true,
     "data-testid": testId

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

@@ -73,6 +73,13 @@ var renderImageIcon = function renderImageIcon(defaultIcon, icon, url, testId) {
     });
   }
 };
+/**
+ * An element that displays an Icon or favicon.
+ * @public
+ * @param {IconProps} IconProps - The props necessary for the Icon element.
+ * @see LinkIcon
+ */
+
 
 var Icon = function Icon(_ref) {
   var icon = _ref.icon,
@@ -80,6 +87,7 @@ var Icon = function Icon(_ref) {
       label = _ref$label === void 0 ? 'Link' : _ref$label,
       _ref$position = _ref.position,
       position = _ref$position === void 0 ? SmartLinkPosition.Top : _ref$position,
+      overrideCss = _ref.overrideCss,
       render = _ref.render,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
@@ -94,7 +102,7 @@ var Icon = function Icon(_ref) {
   var styles = getIconStyles(size, position, width);
   var renderStyles = render ? getCustomRenderStyles(width) : undefined;
   return jsx("div", {
-    css: [styles, renderStyles],
+    css: [styles, renderStyles, overrideCss],
     "data-fit-to-content": true,
     "data-smart-element-icon": true,
     "data-testid": testId

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

@@ -3,22 +3,118 @@ import { ElementName } from '../../../../constants';
 // Attention: Keep the export name and element name the same.
 // This will help reducing the code for mapping elements inside
 // createElement and renderElementItems
+
+/**
+ * Creates an AvatarGroup element using the data from AuthorGroup in the Flexible UI Context.
+ * @see AvatarGroup
+ */
 export var AuthorGroup = createElement(ElementName.AuthorGroup);
+/**
+ * Creates an AvatarGroup element using the data from CollaboratorGroup in the Flexible UI Context.
+ * @see AvatarGroup
+ */
+
 export var CollaboratorGroup = createElement(ElementName.CollaboratorGroup);
+/**
+ * Creates a CommentCount Badge element using the data from CommentCount in the Flexible UI Context.
+ * @see Badge
+ */
+
 export var CommentCount = createElement(ElementName.CommentCount);
+/**
+ * Creates a ViewCount Badge element using the data from ViewCount in the Flexible UI Context.
+ * @see Badge
+ */
+
 export var ViewCount = createElement(ElementName.ViewCount);
+/**
+ * Creates a ReactCount Badge element using the data from ReactCount in the Flexible UI Context.
+ * @see Badge
+ */
+
 export var ReactCount = createElement(ElementName.ReactCount);
+/**
+ * Creates a VoteCount Badge element using the data from VoteCount in the Flexible UI Context.
+ * @see Badge
+ */
+
 export var VoteCount = createElement(ElementName.VoteCount);
+/**
+ * Creates a CreatedBy text element using the data from CreatedBy in the Flexible UI Context.
+ * @see Text
+ */
+
 export var CreatedBy = createElement(ElementName.CreatedBy);
+/**
+ * Creates a CreatedOn DateTime element using the data from CreatedOn in the Flexible UI Context.
+ * @see DateTime
+ */
+
 export var CreatedOn = createElement(ElementName.CreatedOn);
+/**
+ * Creates a LinkIcon Icon element using the data from LinkIcon in the Flexible UI Context.
+ * @see Icon
+ */
+
 export var LinkIcon = createElement(ElementName.LinkIcon);
+/**
+ * Creates a ModifiedBy Text element using the data from ModifiedBy in the Flexible UI Context.
+ * @see Text
+ */
+
 export var ModifiedBy = createElement(ElementName.ModifiedBy);
+/**
+ * Creates a ModifiedOn DateTime element using the data from ModifiedOn in the Flexible UI Context.
+ * @see DateTime
+ */
+
 export var ModifiedOn = createElement(ElementName.ModifiedOn);
+/**
+ * Creates a Preview element using the data from Preview in the Flexible UI Context.
+ * @see Preview
+ */
+
 export var Preview = createElement(ElementName.Preview);
+/**
+ * Creates a Priority Badge element using the data from Priority in the Flexible UI Context.
+ * @see Badge
+ */
+
 export var Priority = createElement(ElementName.Priority);
+/**
+ * Creates a ProgrammingLanguage Badge element using the data from ProgrammingLanguage in the Flexible UI Context.
+ * @see Badge
+ */
+
 export var ProgrammingLanguage = createElement(ElementName.ProgrammingLanguage);
+/**
+ * Creates a Snippet element using the data from Snippet in the Flexible UI Context.
+ * @see Text
+ */
+
 export var Snippet = createElement(ElementName.Snippet);
+/**
+ * Creates a State Lozenge element using the data from State in the Flexible UI Context.
+ * @see Lozenge
+ */
+
 export var State = createElement(ElementName.State);
+/**
+ * Creates a SubscriberCount Badge element using the data from SubscriberCount in the Flexible UI Context.
+ * @see Badge
+ */
+
 export var SubscriberCount = createElement(ElementName.SubscriberCount);
+/**
+ * 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.
+ * @see Link
+ */
+
 export var Title = createElement(ElementName.Title);
+/**
+ * Creates a Provider Badge element using the data from Provider in the Flexible UI Context.
+ * @see Badge
+ */
+
 export var Provider = createElement(ElementName.Provider);

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

@@ -16,6 +16,7 @@ var containerStyles = css(_templateObject || (_templateObject = _taggedTemplateL
 
 var getThemeStyles = function getThemeStyles(theme) {
   switch (theme) {
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     case SmartLinkTheme.Black:
       return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        color: ", ";\n        :active {\n          color: ", ";\n        }\n        :hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n      "])), tokens.blackLink, tokens.blackLinkPressed, tokens.blackLink);
 
@@ -41,10 +42,18 @@ var getMaxLines = function getMaxLines(maxLines) {
 
   return maxLines;
 };
+/**
+ * An element that represent.
+ * @public
+ * @param {LinkProps} LinkProps - The props necessary for the Icon element.
+ * @see LinkIcon
+ */
+
 
 var Link = function Link(_ref) {
   var _ref$maxLines = _ref.maxLines,
       maxLines = _ref$maxLines === void 0 ? DEFAULT_MAX_LINES : _ref$maxLines,
+      overrideCss = _ref.overrideCss,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
       _ref$testId = _ref.testId,
@@ -62,7 +71,7 @@ var Link = function Link(_ref) {
     testId: "".concat(testId, "-tooltip"),
     tag: "span"
   }, jsx("a", {
-    css: getAnchorStyles(size, theme, getMaxLines(maxLines)),
+    css: [getAnchorStyles(size, theme, getMaxLines(maxLines)), overrideCss],
     "data-smart-element-link": true,
     "data-testid": testId,
     onClick: onClick,

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

@@ -7,10 +7,17 @@ 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"])));
+/**
+ * An element that displays a Lozenge.
+ * @public
+ * @param {LozengeProps} LozengeProps - The props necessary for the Lozenge element.
+ * @see State
+ */
 
 var Lozenge = function Lozenge(_ref) {
   var _ref$appearance = _ref.appearance,
       appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
+      overrideCss = _ref.overrideCss,
       text = _ref.text,
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'smart-element-lozenge' : _ref$testId;
@@ -20,12 +27,13 @@ var Lozenge = function Lozenge(_ref) {
   }
 
   return jsx("span", {
-    css: styles,
+    css: [styles, overrideCss],
     "data-fit-to-content": true,
-    "data-smart-element-lozenge": true
+    "data-smart-element-lozenge": true,
+    "data-testid": testId
   }, jsx(AtlaskitLozenge, {
     appearance: appearance,
-    testId: testId
+    testId: "".concat(testId, "-lozenge")
   }, text));
 };
 

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

@@ -18,9 +18,16 @@ import ImageIcon from '../../common/image-icon';
  * contents within the element's box.
  */
 var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  aspect-ratio: 16 / 9;\n  display: flex;\n  width: 100%;\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"])));
+/**
+ * An element that displays a Media.
+ * @public
+ * @param {MediaProps} MediaProps - The props necessary for the Media element.
+ * @see Preview
+ */
 
 var Media = function Media(_ref) {
-  var _ref$testId = _ref.testId,
+  var overrideCss = _ref.overrideCss,
+      _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'smart-element-media' : _ref$testId,
       type = _ref.type,
       url = _ref.url;
@@ -30,7 +37,7 @@ var Media = function Media(_ref) {
   }
 
   return jsx("div", {
-    css: styles,
+    css: [styles, overrideCss],
     "data-smart-element-media": true,
     "data-testid": testId
   }, jsx(ImageIcon, {

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

@@ -8,17 +8,23 @@ import { css, jsx } from '@emotion/core';
 import { getFormattedMessage, getTruncateStyles } from '../../utils';
 import { tokens } from '../../../../../utils/token';
 
-var getStyles = function getStyles(maxLines, color) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  ", "\n"])), color, getTruncateStyles(maxLines));
+var getStyles = function getStyles(maxLines) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  ", "\n"])), tokens.text, getTruncateStyles(maxLines));
 };
+/**
+ * An element that displays some Text.
+ * @public
+ * @param {TextProps} TextProps - The props necessary for the Text element.
+ * @see Title
+ */
+
 
 var Text = function Text(_ref) {
-  var _ref$color = _ref.color,
-      color = _ref$color === void 0 ? tokens.text : _ref$color,
-      content = _ref.content,
+  var content = _ref.content,
       _ref$maxLines = _ref.maxLines,
       maxLines = _ref$maxLines === void 0 ? 1 : _ref$maxLines,
       message = _ref.message,
+      overrideCss = _ref.overrideCss,
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'smart-element-text' : _ref$testId;
 
@@ -27,7 +33,7 @@ var Text = function Text(_ref) {
   }
 
   return jsx("span", {
-    css: getStyles(maxLines, color),
+    css: [getStyles(maxLines), overrideCss],
     "data-separator": true,
     "data-smart-element-text": true,
     "data-testid": testId

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

@@ -1,9 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _elementMappings;
+var _templateObject, _elementMappings;
 
 import React, { useContext } from 'react';
+import { css } from '@emotion/core';
 import { ElementName, IconType } from '../../../../constants';
 import Icon from './icon';
 import Link from './link';
@@ -59,8 +61,8 @@ var elementMappings = (_elementMappings = {}, _defineProperty(_elementMappings,
 }), _defineProperty(_elementMappings, ElementName.Snippet, {
   component: Text,
   props: {
-    color: tokens.snippet,
-    maxLines: SNIPPET_DEFAULT_MAX_LINES
+    maxLines: SNIPPET_DEFAULT_MAX_LINES,
+    overrideCss: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        color: ", ";\n      "])), tokens.snippet)
   }
 }), _defineProperty(_elementMappings, ElementName.State, {
   component: Lozenge

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

@@ -3,6 +3,12 @@ import React from 'react';
 import Container from './components/container';
 import { FlexibleUiContext } from '../../state/flexible-ui-context';
 import { getContextByStatus, getRetryOptions } from './utils';
+/**
+ * This represents a Flexible Card: a link represented by a card with metadata.
+ * This is the container in which all Flexible UI Blocks and Elements exist.
+ * Note: TitleBlock is mandatory for a Flexible Card to render.
+ * @see Container
+ */
 
 var FlexibleCard = function FlexibleCard(_ref) {
   var cardState = _ref.cardState,

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

@@ -11,9 +11,18 @@ import { SmartLinkSize, ActionName } from '../../constants';
 import { useSmartLinkActions } from '../../state/hooks-external/useSmartLinkActions';
 import { HoverCardContainer } from './styled';
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
-export var HoverCard = function HoverCard(_ref) {
+import { withAnalyticsEvents, withAnalyticsContext } from '@atlaskit/analytics-next';
+import { fireSmartLinkEvent } from '../../utils/analytics';
+import { useSmartCardState as useLinkState } from '../../state/store';
+import { useSmartLinkAnalytics } from '../../state/analytics';
+import { getExtensionKey, getDefinitionId } from '../../state/helpers';
+export var HoverCardComponent = function HoverCardComponent(_ref) {
   var children = _ref.children,
-      url = _ref.url;
+      url = _ref.url,
+      createAnalyticsEvent = _ref.createAnalyticsEvent;
+  var analyticsHandler = useCallback(function (analyticsPayload) {
+    fireSmartLinkEvent(analyticsPayload, createAnalyticsEvent);
+  }, [createAnalyticsEvent]);
   var delay = 300;
 
   var _React$useState = React.useState(false),
@@ -23,26 +32,45 @@ export var HoverCard = function HoverCard(_ref) {
 
   var fadeOutTimeoutId = useRef();
   var fadeInTimeoutId = useRef();
+  var cardOpenTime = useRef();
+  var linkState = useLinkState(url);
+  var analytics = useSmartLinkAnalytics(analyticsHandler);
+  var extensionKey = useMemo(function () {
+    return getExtensionKey(linkState.details);
+  }, [linkState]);
+  var definitionId = useMemo(function () {
+    return getDefinitionId(linkState.details);
+  }, [linkState]);
   var initHideCard = useCallback(function () {
     if (fadeInTimeoutId.current) {
       clearTimeout(fadeInTimeoutId.current);
     }
 
     fadeOutTimeoutId.current = setTimeout(function () {
+      //Check its previously open to avoid firing events when moving between the child and hover card components
+      if (isOpen === true && cardOpenTime.current) {
+        var hoverTime = Date.now() - cardOpenTime.current;
+        analytics.ui.hoverCardDismissedEvent('card', hoverTime, definitionId, extensionKey);
+      }
+
       setIsOpen(false);
     }, delay);
-  }, [delay]);
+  }, [delay, isOpen, definitionId, extensionKey, analytics]);
   var initShowCard = useCallback(function () {
     if (fadeOutTimeoutId.current) {
       clearTimeout(fadeOutTimeoutId.current);
     }
 
     fadeInTimeoutId.current = setTimeout(function () {
+      //Check if its previously closed to avoid firing events when moving between the child and hover card components
+      if (isOpen === false) {
+        cardOpenTime.current = Date.now();
+        analytics.ui.hoverCardViewedEvent('card', definitionId, extensionKey);
+      }
+
       setIsOpen(true);
     }, delay);
-  }, [delay]); //TODO: EDM-2905: Add analytics events
-
-  var analyticsHandler = useCallback(function () {}, []);
+  }, [delay, isOpen, definitionId, extensionKey, analytics]);
   var linkActions = useSmartLinkActions({
     url: url,
     appearance: 'block',
@@ -69,11 +97,12 @@ export var HoverCard = function HoverCard(_ref) {
       }),
       iconPosition: 'before',
       onClick: function onClick() {
-        return window.open(url, '_blank');
+        window.open(url, '_blank');
+        analytics.ui.hoverCardOpenLinkClickedEvent('card', definitionId, extensionKey);
       },
       testId: 'hover-card-open-button'
     };
-  }, [url]);
+  }, [url, definitionId, extensionKey, analytics]);
 
   var cardComponent = function cardComponent() {
     return jsx("div", {
@@ -101,7 +130,7 @@ export var HoverCard = function HoverCard(_ref) {
     testId: "hover-card",
     isOpen: isOpen,
     onClose: onClose,
-    placement: "bottom",
+    placement: "bottom-start",
     content: cardComponent,
     trigger: function trigger(triggerProps) {
       return jsx("span", _extends({}, triggerProps, {
@@ -110,4 +139,7 @@ export var HoverCard = function HoverCard(_ref) {
       }), children);
     }
   });
-};
+};
+export var HoverCard = withAnalyticsContext({
+  source: 'smartLinkPreviewHoverCard'
+})(withAnalyticsEvents()(HoverCardComponent));

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

@@ -3,4 +3,5 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 
 import { css } from '@emotion/core';
-export var HoverCardContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: none;\n  border-width: 0;\n  max-width: 500px;\n  padding: 0;\n"])));
+import { loadingPlaceholderClassName } from '../../index';
+export var HoverCardContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: none;\n  border-width: 0;\n  max-width: 350px;\n  padding: 0;\n\n  .", " {\n    display: none;\n  }\n"])), loadingPlaceholderClassName);