@atlaskit/smart-card 18.0.13 → 18.0.16

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

@@ -2,7 +2,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
+
 const importIconMapper = {
   [IconType.Archive]: () => import(
   /* webpackChunkName: "glyphArchive" */
@@ -228,10 +229,14 @@ const AtlaskitIcon = ({
       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:
@@ -239,7 +244,7 @@ const AtlaskitIcon = ({
       return /*#__PURE__*/React.createElement(ImportedIcon, {
         label: label,
         testId: testId,
-        primaryColor: R400
+        primaryColor: token('color.icon.danger', R400)
       });
 
     default:

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

@@ -2,6 +2,7 @@
 import React from 'react';
 import { css, jsx, keyframes } from '@emotion/core';
 import ImageLoader from 'react-render-image';
+import { token } from '@atlaskit/tokens';
 const placeholderShimmer = keyframes`
   0% { background-position: -20px 0; }
   100% { background-position: 20px 0; }
@@ -9,14 +10,14 @@ const placeholderShimmer = keyframes`
 const shimmer = css`
   border-radius: 2px;
   user-select: none;
-
-  background: #f6f7f8;
+  background: ${token('color.skeleton.subtle', '#f6f7f8')};
+  // TODO: https://product-fabric.atlassian.net/browse/DSP-4236
   background-image: linear-gradient(
     to right,
-    #f6f7f8 0%,
-    #edeef1 20%,
-    #f6f7f8 40%,
-    #f6f7f8 100%
+    ${token('color.skeleton.subtle', '#f6f7f8')} 0%,
+    ${token('color.skeleton', '#edeef1')} 20%,
+    ${token('color.skeleton.subtle', '#f6f7f8')} 40%,
+    ${token('color.skeleton.subtle', '#f6f7f8')}100%
   );
   background-repeat: no-repeat;
   background-size: 280% 100%;

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

@@ -70,6 +70,11 @@ const renderChildren = (children, containerSize, containerTheme, status, retry,
     });
   }
 });
+/**
+ * This represents the container in which all Flexible UI Smart Links are rendered.
+ * @see Block
+ */
+
 
 const Container = ({
   children,

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

@@ -26,10 +26,19 @@ const getStyles = size => {
       `;
   }
 };
+/**
+ * An element that displays a group of avatars.
+ * @public
+ * @param {AvatarGroupProps} AvatarGroupProps - The props necessary for the AvatarGroup.
+ * @see AuthorGroup
+ * @see CollaboratorGroup
+ */
+
 
 const AvatarGroup = ({
   items = [],
   maxCount = MAX_COUNT,
+  overrideCss,
   size = SmartLinkSize.Medium,
   testId = 'smart-element-avatar-group'
 }) => {
@@ -38,7 +47,9 @@ const AvatarGroup = ({
   }
 
   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/es2019/view/FlexibleCard/components/elements/badge/index.js

@@ -70,12 +70,27 @@ const 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
+ */
+
 
 const Badge = ({
   icon,
-  url,
   label,
-  testId = 'smart-element-badge'
+  overrideCss,
+  testId = 'smart-element-badge',
+  url
 }) => {
   const formattedMessageOrLabel = getFormattedMessageFromIcon(icon) || label;
   const badgeIcon = renderAtlaskitIcon(icon, testId) || renderImageIcon(url, testId);
@@ -85,7 +100,7 @@ const Badge = ({
   }
 
   return jsx("div", {
-    css: badgeStyles,
+    css: [badgeStyles, overrideCss],
     "data-fit-to-content": true,
     "data-smart-element-badge": true,
     "data-testid": testId

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

@@ -18,9 +18,17 @@ const 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
+ */
 
 const DateTime = ({
   date,
+  overrideCss,
   type,
   testId = 'smart-element-date-time'
 }) => {
@@ -40,7 +48,7 @@ const DateTime = ({
     numeric: 'auto'
   });
   return jsx("span", {
-    css: styles,
+    css: [styles, overrideCss],
     "data-separator": true,
     "data-smart-element-date-time": true,
     "data-testid": testId

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

@@ -83,11 +83,19 @@ const 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
+ */
+
 
 const Icon = ({
   icon,
   label = 'Link',
   position = SmartLinkPosition.Top,
+  overrideCss,
   render,
   size = SmartLinkSize.Medium,
   testId = 'smart-element-icon',
@@ -101,7 +109,7 @@ const Icon = ({
   const styles = getIconStyles(size, position, width);
   const 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/es2019/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 const AuthorGroup = createElement(ElementName.AuthorGroup);
+/**
+ * Creates an AvatarGroup element using the data from CollaboratorGroup in the Flexible UI Context.
+ * @see AvatarGroup
+ */
+
 export const CollaboratorGroup = createElement(ElementName.CollaboratorGroup);
+/**
+ * Creates a CommentCount Badge element using the data from CommentCount in the Flexible UI Context.
+ * @see Badge
+ */
+
 export const CommentCount = createElement(ElementName.CommentCount);
+/**
+ * Creates a ViewCount Badge element using the data from ViewCount in the Flexible UI Context.
+ * @see Badge
+ */
+
 export const ViewCount = createElement(ElementName.ViewCount);
+/**
+ * Creates a ReactCount Badge element using the data from ReactCount in the Flexible UI Context.
+ * @see Badge
+ */
+
 export const ReactCount = createElement(ElementName.ReactCount);
+/**
+ * Creates a VoteCount Badge element using the data from VoteCount in the Flexible UI Context.
+ * @see Badge
+ */
+
 export const VoteCount = createElement(ElementName.VoteCount);
+/**
+ * Creates a CreatedBy text element using the data from CreatedBy in the Flexible UI Context.
+ * @see Text
+ */
+
 export const CreatedBy = createElement(ElementName.CreatedBy);
+/**
+ * Creates a CreatedOn DateTime element using the data from CreatedOn in the Flexible UI Context.
+ * @see DateTime
+ */
+
 export const CreatedOn = createElement(ElementName.CreatedOn);
+/**
+ * Creates a LinkIcon Icon element using the data from LinkIcon in the Flexible UI Context.
+ * @see Icon
+ */
+
 export const LinkIcon = createElement(ElementName.LinkIcon);
+/**
+ * Creates a ModifiedBy Text element using the data from ModifiedBy in the Flexible UI Context.
+ * @see Text
+ */
+
 export const ModifiedBy = createElement(ElementName.ModifiedBy);
+/**
+ * Creates a ModifiedOn DateTime element using the data from ModifiedOn in the Flexible UI Context.
+ * @see DateTime
+ */
+
 export const ModifiedOn = createElement(ElementName.ModifiedOn);
+/**
+ * Creates a Preview element using the data from Preview in the Flexible UI Context.
+ * @see Preview
+ */
+
 export const Preview = createElement(ElementName.Preview);
+/**
+ * Creates a Priority Badge element using the data from Priority in the Flexible UI Context.
+ * @see Badge
+ */
+
 export const Priority = createElement(ElementName.Priority);
+/**
+ * Creates a ProgrammingLanguage Badge element using the data from ProgrammingLanguage in the Flexible UI Context.
+ * @see Badge
+ */
+
 export const ProgrammingLanguage = createElement(ElementName.ProgrammingLanguage);
+/**
+ * Creates a Snippet element using the data from Snippet in the Flexible UI Context.
+ * @see Text
+ */
+
 export const Snippet = createElement(ElementName.Snippet);
+/**
+ * Creates a State Lozenge element using the data from State in the Flexible UI Context.
+ * @see Lozenge
+ */
+
 export const State = createElement(ElementName.State);
+/**
+ * Creates a SubscriberCount Badge element using the data from SubscriberCount in the Flexible UI Context.
+ * @see Badge
+ */
+
 export const 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 const Title = createElement(ElementName.Title);
+/**
+ * Creates a Provider Badge element using the data from Provider in the Flexible UI Context.
+ * @see Badge
+ */
+
 export const Provider = createElement(ElementName.Provider);

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

@@ -14,6 +14,7 @@ const containerStyles = css`
 
 const getThemeStyles = theme => {
   switch (theme) {
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     case SmartLinkTheme.Black:
       return css`
         color: ${tokens.blackLink};
@@ -63,9 +64,17 @@ const getMaxLines = maxLines => {
 
   return maxLines;
 };
+/**
+ * An element that represent.
+ * @public
+ * @param {LinkProps} LinkProps - The props necessary for the Icon element.
+ * @see LinkIcon
+ */
+
 
 const Link = ({
   maxLines = DEFAULT_MAX_LINES,
+  overrideCss,
   size = SmartLinkSize.Medium,
   testId = 'smart-element-link',
   text,
@@ -80,7 +89,7 @@ const Link = ({
   testId: `${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/es2019/view/FlexibleCard/components/elements/lozenge/index.js

@@ -5,9 +5,16 @@ import AtlaskitLozenge from '@atlaskit/lozenge';
 const styles = css`
   line-height: inherit;
 `;
+/**
+ * An element that displays a Lozenge.
+ * @public
+ * @param {LozengeProps} LozengeProps - The props necessary for the Lozenge element.
+ * @see State
+ */
 
 const Lozenge = ({
   appearance = 'default',
+  overrideCss,
   text,
   testId = 'smart-element-lozenge'
 }) => {
@@ -16,12 +23,13 @@ const Lozenge = ({
   }
 
   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: `${testId}-lozenge`
   }, text));
 };
 

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

@@ -45,8 +45,15 @@ const styles = css`
     }
   }
 `;
+/**
+ * An element that displays a Media.
+ * @public
+ * @param {MediaProps} MediaProps - The props necessary for the Media element.
+ * @see Preview
+ */
 
 const Media = ({
+  overrideCss,
   testId = 'smart-element-media',
   type,
   url
@@ -56,7 +63,7 @@ const Media = ({
   }
 
   return jsx("div", {
-    css: styles,
+    css: [styles, overrideCss],
     "data-smart-element-media": true,
     "data-testid": testId
   }, jsx(ImageIcon, {

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

@@ -4,18 +4,25 @@ import { css, jsx } from '@emotion/core';
 import { getFormattedMessage, getTruncateStyles } from '../../utils';
 import { tokens } from '../../../../../utils/token';
 
-const getStyles = (maxLines, color) => css`
-  color: ${color};
+const getStyles = maxLines => css`
+  color: ${tokens.text};
   font-size: 0.75rem;
   line-height: 1rem;
   ${getTruncateStyles(maxLines)}
 `;
+/**
+ * An element that displays some Text.
+ * @public
+ * @param {TextProps} TextProps - The props necessary for the Text element.
+ * @see Title
+ */
+
 
 const Text = ({
-  color = tokens.text,
   content,
   maxLines = 1,
   message,
+  overrideCss,
   testId = 'smart-element-text'
 }) => {
   if (!message && !content) {
@@ -23,7 +30,7 @@ const Text = ({
   }
 
   return jsx("span", {
-    css: getStyles(maxLines, color),
+    css: [getStyles(maxLines), overrideCss],
     "data-separator": true,
     "data-smart-element-text": true,
     "data-testid": testId

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useContext } from 'react';
+import { css } from '@emotion/core';
 import { ElementName, IconType } from '../../../../constants';
 import Icon from './icon';
 import Link from './link';
@@ -68,8 +69,10 @@ const elementMappings = {
   [ElementName.Snippet]: {
     component: Text,
     props: {
-      color: tokens.snippet,
-      maxLines: SNIPPET_DEFAULT_MAX_LINES
+      maxLines: SNIPPET_DEFAULT_MAX_LINES,
+      overrideCss: css`
+        color: ${tokens.snippet};
+      `
     }
   },
   [ElementName.State]: {

package/dist/es2019/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
+ */
 
 const FlexibleCard = ({
   cardState,

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

@@ -10,34 +10,58 @@ import { SmartLinkSize, ActionName } from '../../constants';
 import { useSmartLinkActions } from '../../state/hooks-external/useSmartLinkActions';
 import { HoverCardContainer } from './styled';
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
-export const HoverCard = ({
+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 const HoverCardComponent = ({
   children,
-  url
+  url,
+  createAnalyticsEvent
 }) => {
+  const analyticsHandler = useCallback(analyticsPayload => {
+    fireSmartLinkEvent(analyticsPayload, createAnalyticsEvent);
+  }, [createAnalyticsEvent]);
   const delay = 300;
   const [isOpen, setIsOpen] = React.useState(false);
   const fadeOutTimeoutId = useRef();
   const fadeInTimeoutId = useRef();
+  const cardOpenTime = useRef();
+  const linkState = useLinkState(url);
+  const analytics = useSmartLinkAnalytics(analyticsHandler);
+  const extensionKey = useMemo(() => getExtensionKey(linkState.details), [linkState]);
+  const definitionId = useMemo(() => getDefinitionId(linkState.details), [linkState]);
   const initHideCard = useCallback(() => {
     if (fadeInTimeoutId.current) {
       clearTimeout(fadeInTimeoutId.current);
     }
 
     fadeOutTimeoutId.current = setTimeout(() => {
+      //Check its previously open to avoid firing events when moving between the child and hover card components
+      if (isOpen === true && cardOpenTime.current) {
+        const hoverTime = Date.now() - cardOpenTime.current;
+        analytics.ui.hoverCardDismissedEvent('card', hoverTime, definitionId, extensionKey);
+      }
+
       setIsOpen(false);
     }, delay);
-  }, [delay]);
+  }, [delay, isOpen, definitionId, extensionKey, analytics]);
   const initShowCard = useCallback(() => {
     if (fadeOutTimeoutId.current) {
       clearTimeout(fadeOutTimeoutId.current);
     }
 
     fadeInTimeoutId.current = setTimeout(() => {
+      //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
-
-  const analyticsHandler = useCallback(() => {}, []);
+  }, [delay, isOpen, definitionId, extensionKey, analytics]);
   const linkActions = useSmartLinkActions({
     url,
     appearance: 'block',
@@ -57,10 +81,13 @@ export const HoverCard = ({
         size: "medium"
       }),
       iconPosition: 'before',
-      onClick: () => window.open(url, '_blank'),
+      onClick: () => {
+        window.open(url, '_blank');
+        analytics.ui.hoverCardOpenLinkClickedEvent('card', definitionId, extensionKey);
+      },
       testId: 'hover-card-open-button'
     };
-  }, [url]);
+  }, [url, definitionId, extensionKey, analytics]);
 
   const cardComponent = () => jsx("div", {
     onMouseEnter: initShowCard,
@@ -84,11 +111,14 @@ export const HoverCard = ({
     testId: "hover-card",
     isOpen: isOpen,
     onClose: onClose,
-    placement: "bottom",
+    placement: "bottom-start",
     content: cardComponent,
     trigger: triggerProps => jsx("span", _extends({}, triggerProps, {
       onMouseEnter: initShowCard,
       onMouseLeave: initHideCard
     }), children)
   });
-};
+};
+export const HoverCard = withAnalyticsContext({
+  source: 'smartLinkPreviewHoverCard'
+})(withAnalyticsEvents()(HoverCardComponent));

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

@@ -1,7 +1,12 @@
 import { css } from '@emotion/core';
+import { loadingPlaceholderClassName } from '../../index';
 export const HoverCardContainer = css`
   background: none;
   border-width: 0;
-  max-width: 500px;
+  max-width: 350px;
   padding: 0;
+
+  .${loadingPlaceholderClassName} {
+    display: none;
+  }
 `;

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

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { R300 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import Button from '@atlaskit/button/custom-theme-button';
 import { Frame } from '../Frame';
@@ -61,7 +62,7 @@ export class InlineCardErroredView extends React.Component {
       icon: icon || /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(ErrorIcon, {
         label: "error",
         size: "small",
-        primaryColor: R300
+        primaryColor: token('color.icon.danger', R300)
       })),
       title: this.renderMessage()
     }));

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

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { R400, N500 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import LockIcon from '@atlaskit/icon/glyph/lock-filled';
 import Button from '@atlaskit/button/custom-theme-button';
 import { Frame } from '../Frame';
@@ -13,7 +14,7 @@ import { IconStyledButton, LowercaseAppearance, LinkAppearance } from '../styled
 const FallbackForbiddenIcon = /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LockIcon, {
   label: "error",
   size: "small",
-  primaryColor: R400
+  primaryColor: token('color.icon.danger', R400)
 }));
 export class InlineCardForbiddenView extends React.Component {
   constructor(...args) {
@@ -91,7 +92,7 @@ export class InlineCardForbiddenView extends React.Component {
     }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
       icon: icon ? icon : FallbackForbiddenIcon,
       title: this.renderMessage(),
-      titleColor: N500
+      titleColor: token('color.text.subtle', N500)
     }));
   }