@atlaskit/smart-card 18.0.13 → 18.0.16

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

@@ -77,6 +77,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/cjs/view/FlexibleCard/components/elements/avatar-group/index.js

@@ -34,12 +34,21 @@ var getStyles = function getStyles(size) {
       return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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 ? _constants.SmartLinkSize.Medium : _ref$size,
       _ref$testId = _ref.testId,
@@ -50,7 +59,9 @@ var AvatarGroup = function AvatarGroup(_ref) {
   }
 
   return (0, _core.jsx)("span", {
-    css: getStyles(size)
+    css: [getStyles(size), overrideCss],
+    "data-smart-element-avatar-group": true,
+    "data-testid": testId
   }, (0, _core.jsx)(_avatarGroup.default, {
     maxCount: maxCount,
     appearance: "stack",

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

@@ -64,13 +64,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);
 
@@ -79,7 +94,7 @@ var Badge = function Badge(_ref) {
   }
 
   return (0, _core.jsx)("div", {
-    css: badgeStyles,
+    css: [badgeStyles, overrideCss],
     "data-fit-to-content": true,
     "data-smart-element-badge": true,
     "data-testid": testId

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

@@ -32,9 +32,17 @@ var typeToDescriptorMap = {
   created: _messages.messages.created_on,
   modified: _messages.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;
@@ -54,7 +62,7 @@ var DateTime = function DateTime(_ref) {
     numeric: 'auto'
   });
   return (0, _core.jsx)("span", {
-    css: styles,
+    css: [styles, overrideCss],
     "data-separator": true,
     "data-smart-element-date-time": true,
     "data-testid": testId

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

@@ -93,6 +93,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,
@@ -100,6 +107,7 @@ var Icon = function Icon(_ref) {
       label = _ref$label === void 0 ? 'Link' : _ref$label,
       _ref$position = _ref.position,
       position = _ref$position === void 0 ? _constants.SmartLinkPosition.Top : _ref$position,
+      overrideCss = _ref.overrideCss,
       render = _ref.render,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? _constants.SmartLinkSize.Medium : _ref$size,
@@ -114,7 +122,7 @@ var Icon = function Icon(_ref) {
   var styles = getIconStyles(size, position, width);
   var renderStyles = render ? getCustomRenderStyles(width) : undefined;
   return (0, _core.jsx)("div", {
-    css: [styles, renderStyles],
+    css: [styles, renderStyles, overrideCss],
     "data-fit-to-content": true,
     "data-smart-element-icon": true,
     "data-testid": testId

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

@@ -12,41 +12,137 @@ var _constants = require("../../../../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
+ */
 var AuthorGroup = (0, _utils.createElement)(_constants.ElementName.AuthorGroup);
+/**
+ * Creates an AvatarGroup element using the data from CollaboratorGroup in the Flexible UI Context.
+ * @see AvatarGroup
+ */
+
 exports.AuthorGroup = AuthorGroup;
 var CollaboratorGroup = (0, _utils.createElement)(_constants.ElementName.CollaboratorGroup);
+/**
+ * Creates a CommentCount Badge element using the data from CommentCount in the Flexible UI Context.
+ * @see Badge
+ */
+
 exports.CollaboratorGroup = CollaboratorGroup;
 var CommentCount = (0, _utils.createElement)(_constants.ElementName.CommentCount);
+/**
+ * Creates a ViewCount Badge element using the data from ViewCount in the Flexible UI Context.
+ * @see Badge
+ */
+
 exports.CommentCount = CommentCount;
 var ViewCount = (0, _utils.createElement)(_constants.ElementName.ViewCount);
+/**
+ * Creates a ReactCount Badge element using the data from ReactCount in the Flexible UI Context.
+ * @see Badge
+ */
+
 exports.ViewCount = ViewCount;
 var ReactCount = (0, _utils.createElement)(_constants.ElementName.ReactCount);
+/**
+ * Creates a VoteCount Badge element using the data from VoteCount in the Flexible UI Context.
+ * @see Badge
+ */
+
 exports.ReactCount = ReactCount;
 var VoteCount = (0, _utils.createElement)(_constants.ElementName.VoteCount);
+/**
+ * Creates a CreatedBy text element using the data from CreatedBy in the Flexible UI Context.
+ * @see Text
+ */
+
 exports.VoteCount = VoteCount;
 var CreatedBy = (0, _utils.createElement)(_constants.ElementName.CreatedBy);
+/**
+ * Creates a CreatedOn DateTime element using the data from CreatedOn in the Flexible UI Context.
+ * @see DateTime
+ */
+
 exports.CreatedBy = CreatedBy;
 var CreatedOn = (0, _utils.createElement)(_constants.ElementName.CreatedOn);
+/**
+ * Creates a LinkIcon Icon element using the data from LinkIcon in the Flexible UI Context.
+ * @see Icon
+ */
+
 exports.CreatedOn = CreatedOn;
 var LinkIcon = (0, _utils.createElement)(_constants.ElementName.LinkIcon);
+/**
+ * Creates a ModifiedBy Text element using the data from ModifiedBy in the Flexible UI Context.
+ * @see Text
+ */
+
 exports.LinkIcon = LinkIcon;
 var ModifiedBy = (0, _utils.createElement)(_constants.ElementName.ModifiedBy);
+/**
+ * Creates a ModifiedOn DateTime element using the data from ModifiedOn in the Flexible UI Context.
+ * @see DateTime
+ */
+
 exports.ModifiedBy = ModifiedBy;
 var ModifiedOn = (0, _utils.createElement)(_constants.ElementName.ModifiedOn);
+/**
+ * Creates a Preview element using the data from Preview in the Flexible UI Context.
+ * @see Preview
+ */
+
 exports.ModifiedOn = ModifiedOn;
 var Preview = (0, _utils.createElement)(_constants.ElementName.Preview);
+/**
+ * Creates a Priority Badge element using the data from Priority in the Flexible UI Context.
+ * @see Badge
+ */
+
 exports.Preview = Preview;
 var Priority = (0, _utils.createElement)(_constants.ElementName.Priority);
+/**
+ * Creates a ProgrammingLanguage Badge element using the data from ProgrammingLanguage in the Flexible UI Context.
+ * @see Badge
+ */
+
 exports.Priority = Priority;
 var ProgrammingLanguage = (0, _utils.createElement)(_constants.ElementName.ProgrammingLanguage);
+/**
+ * Creates a Snippet element using the data from Snippet in the Flexible UI Context.
+ * @see Text
+ */
+
 exports.ProgrammingLanguage = ProgrammingLanguage;
 var Snippet = (0, _utils.createElement)(_constants.ElementName.Snippet);
+/**
+ * Creates a State Lozenge element using the data from State in the Flexible UI Context.
+ * @see Lozenge
+ */
+
 exports.Snippet = Snippet;
 var State = (0, _utils.createElement)(_constants.ElementName.State);
+/**
+ * Creates a SubscriberCount Badge element using the data from SubscriberCount in the Flexible UI Context.
+ * @see Badge
+ */
+
 exports.State = State;
 var SubscriberCount = (0, _utils.createElement)(_constants.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
+ */
+
 exports.SubscriberCount = SubscriberCount;
 var Title = (0, _utils.createElement)(_constants.ElementName.Title);
+/**
+ * Creates a Provider Badge element using the data from Provider in the Flexible UI Context.
+ * @see Badge
+ */
+
 exports.Title = Title;
 var Provider = (0, _utils.createElement)(_constants.ElementName.Provider);
 exports.Provider = Provider;

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

@@ -30,6 +30,7 @@ var containerStyles = (0, _core.css)(_templateObject || (_templateObject = (0, _
 
 var getThemeStyles = function getThemeStyles(theme) {
   switch (theme) {
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     case _constants.SmartLinkTheme.Black:
       return (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        color: ", ";\n        :active {\n          color: ", ";\n        }\n        :hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n      "])), _token.tokens.blackLink, _token.tokens.blackLinkPressed, _token.tokens.blackLink);
 
@@ -55,10 +56,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 ? _constants.SmartLinkSize.Medium : _ref$size,
       _ref$testId = _ref.testId,
@@ -76,7 +85,7 @@ var Link = function Link(_ref) {
     testId: "".concat(testId, "-tooltip"),
     tag: "span"
   }, (0, _core.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/cjs/view/FlexibleCard/components/elements/lozenge/index.js

@@ -18,10 +18,17 @@ var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 var _templateObject;
 
 var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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;
@@ -31,12 +38,13 @@ var Lozenge = function Lozenge(_ref) {
   }
 
   return (0, _core.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
   }, (0, _core.jsx)(_lozenge.default, {
     appearance: appearance,
-    testId: testId
+    testId: "".concat(testId, "-lozenge")
   }, text));
 };
 

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

@@ -28,9 +28,16 @@ var _templateObject;
  * contents within the element's box.
  */
 var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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;
@@ -40,7 +47,7 @@ var Media = function Media(_ref) {
   }
 
   return (0, _core.jsx)("div", {
-    css: styles,
+    css: [styles, overrideCss],
     "data-smart-element-media": true,
     "data-testid": testId
   }, (0, _core.jsx)(_imageIcon.default, {

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

@@ -19,17 +19,23 @@ var _token = require("../../../../../utils/token");
 
 var _templateObject;
 
-var getStyles = function getStyles(maxLines, color) {
-  return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  ", "\n"])), color, (0, _utils.getTruncateStyles)(maxLines));
+var getStyles = function getStyles(maxLines) {
+  return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  ", "\n"])), _token.tokens.text, (0, _utils.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 ? _token.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;
 
@@ -38,7 +44,7 @@ var Text = function Text(_ref) {
   }
 
   return (0, _core.jsx)("span", {
-    css: getStyles(maxLines, color),
+    css: [getStyles(maxLines), overrideCss],
     "data-separator": true,
     "data-smart-element-text": true,
     "data-testid": testId

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

@@ -13,8 +13,12 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
 var _react = _interopRequireWildcard(require("react"));
 
+var _core = require("@emotion/core");
+
 var _constants = require("../../../../constants");
 
 var _icon = _interopRequireDefault(require("./icon"));
@@ -39,7 +43,7 @@ var _dateTime = _interopRequireDefault(require("./date-time"));
 
 var _token = require("../../../../utils/token");
 
-var _elementMappings;
+var _templateObject, _elementMappings;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -88,8 +92,8 @@ var elementMappings = (_elementMappings = {}, (0, _defineProperty2.default)(_ele
 }), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.Snippet, {
   component: _text.default,
   props: {
-    color: _token.tokens.snippet,
-    maxLines: SNIPPET_DEFAULT_MAX_LINES
+    maxLines: SNIPPET_DEFAULT_MAX_LINES,
+    overrideCss: (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        color: ", ";\n      "])), _token.tokens.snippet)
   }
 }), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.State, {
   component: _lozenge.default

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

@@ -17,6 +17,12 @@ var _flexibleUiContext = require("../../state/flexible-ui-context");
 
 var _utils = require("./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,
       children = _ref.children,

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

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.HoverCard = void 0;
+exports.HoverCardComponent = exports.HoverCard = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -31,14 +31,28 @@ var _styled = require("./styled");
 
 var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"));
 
+var _analyticsNext = require("@atlaskit/analytics-next");
+
+var _analytics = require("../../utils/analytics");
+
+var _store = require("../../state/store");
+
+var _analytics2 = require("../../state/analytics");
+
+var _helpers = require("../../state/helpers");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 /** @jsx jsx */
-var HoverCard = function HoverCard(_ref) {
+var HoverCardComponent = function HoverCardComponent(_ref) {
   var children = _ref.children,
-      url = _ref.url;
+      url = _ref.url,
+      createAnalyticsEvent = _ref.createAnalyticsEvent;
+  var analyticsHandler = (0, _react.useCallback)(function (analyticsPayload) {
+    (0, _analytics.fireSmartLinkEvent)(analyticsPayload, createAnalyticsEvent);
+  }, [createAnalyticsEvent]);
   var delay = 300;
 
   var _React$useState = _react.default.useState(false),
@@ -48,26 +62,45 @@ var HoverCard = function HoverCard(_ref) {
 
   var fadeOutTimeoutId = (0, _react.useRef)();
   var fadeInTimeoutId = (0, _react.useRef)();
+  var cardOpenTime = (0, _react.useRef)();
+  var linkState = (0, _store.useSmartCardState)(url);
+  var analytics = (0, _analytics2.useSmartLinkAnalytics)(analyticsHandler);
+  var extensionKey = (0, _react.useMemo)(function () {
+    return (0, _helpers.getExtensionKey)(linkState.details);
+  }, [linkState]);
+  var definitionId = (0, _react.useMemo)(function () {
+    return (0, _helpers.getDefinitionId)(linkState.details);
+  }, [linkState]);
   var initHideCard = (0, _react.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 = (0, _react.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 = (0, _react.useCallback)(function () {}, []);
+  }, [delay, isOpen, definitionId, extensionKey, analytics]);
   var linkActions = (0, _useSmartLinkActions.useSmartLinkActions)({
     url: url,
     appearance: 'block',
@@ -94,11 +127,12 @@ 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 (0, _core.jsx)("div", {
@@ -126,7 +160,7 @@ var HoverCard = function HoverCard(_ref) {
     testId: "hover-card",
     isOpen: isOpen,
     onClose: onClose,
-    placement: "bottom",
+    placement: "bottom-start",
     content: cardComponent,
     trigger: function trigger(triggerProps) {
       return (0, _core.jsx)("span", (0, _extends2.default)({}, triggerProps, {
@@ -137,4 +171,8 @@ var HoverCard = function HoverCard(_ref) {
   });
 };
 
+exports.HoverCardComponent = HoverCardComponent;
+var HoverCard = (0, _analyticsNext.withAnalyticsContext)({
+  source: 'smartLinkPreviewHoverCard'
+})((0, _analyticsNext.withAnalyticsEvents)()(HoverCardComponent));
 exports.HoverCard = HoverCard;

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

@@ -11,7 +11,9 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _core = require("@emotion/core");
 
+var _index = require("../../index");
+
 var _templateObject;
 
-var HoverCardContainer = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: none;\n  border-width: 0;\n  max-width: 500px;\n  padding: 0;\n"])));
+var HoverCardContainer = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: none;\n  border-width: 0;\n  max-width: 350px;\n  padding: 0;\n\n  .", " {\n    display: none;\n  }\n"])), _index.loadingPlaceholderClassName);
 exports.HoverCardContainer = HoverCardContainer;

package/dist/cjs/view/InlineCard/ErroredView/index.js

@@ -25,6 +25,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
 
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
@@ -110,7 +112,7 @@ var InlineCardErroredView = /*#__PURE__*/function (_React$Component) {
         icon: icon || /*#__PURE__*/_react.default.createElement(_Icon.AKIconWrapper, null, /*#__PURE__*/_react.default.createElement(_error.default, {
           label: "error",
           size: "small",
-          primaryColor: _colors.R300
+          primaryColor: (0, _tokens.token)('color.icon.danger', _colors.R300)
         })),
         title: this.renderMessage()
       }));

package/dist/cjs/view/InlineCard/ForbiddenView/index.js

@@ -27,6 +27,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _lockFilled = _interopRequireDefault(require("@atlaskit/icon/glyph/lock-filled"));
 
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
@@ -50,7 +52,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var FallbackForbiddenIcon = /*#__PURE__*/_react.default.createElement(_Icon.AKIconWrapper, null, /*#__PURE__*/_react.default.createElement(_lockFilled.default, {
   label: "error",
   size: "small",
-  primaryColor: _colors.R400
+  primaryColor: (0, _tokens.token)('color.icon.danger', _colors.R400)
 }));
 
 var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
@@ -138,7 +140,7 @@ var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/_react.default.createElement(_IconAndTitleLayout.IconAndTitleLayout, {
         icon: icon ? icon : FallbackForbiddenIcon,
         title: this.renderMessage(),
-        titleColor: _colors.N500
+        titleColor: (0, _tokens.token)('color.text.subtle', _colors.N500)
       }));
     }
   }]);