@atlaskit/smart-card 19.0.0 → 19.0.3

package/dist/es2019/view/CardWithUrl/component-lazy/LazyLazilyRenderCard.js

@@ -1,15 +1,21 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+import React, { useState } from 'react';
 import LazilyRender from 'react-lazily-render';
 import { CardWithUrlContent } from '../component';
 import { LoadingCardLink } from './LazyFallback';
+import { startUfoExperience } from '../../../state/analytics/ufoExperiences';
 export function LazyLazilyRenderCard(props) {
   const {
     appearance,
     container,
-    showActions
+    showActions,
+    id
   } = props;
   const offset = Math.ceil(window.innerHeight / 4);
+  useState(() => {
+    // Start of experience when intersectionObserver is not supported.
+    startUfoExperience('smart-link-rendered', id);
+  });
   return /*#__PURE__*/React.createElement(LazilyRender, {
     offset: offset,
     component: appearance === 'inline' ? 'span' : 'div',

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

@@ -9,12 +9,7 @@ const LazyCardWithUrlContent = /*#__PURE__*/lazy(() => import(
 /* webpackChunkName: "@atlaskit-internal_smartcard-urlcardcontent" */
 './component-lazy/index'));
 export function CardWithURLRenderer(props) {
-  const [id] = useState(() => uuid()); // Equivalent to ComponentWillMount
-
-  useState(() => {
-    // We want to start timing of render event only once and right at the start
-    startUfoExperience('smart-link-rendered', id);
-  });
+  const [id] = useState(() => uuid());
   useEffect(() => {
     // ComponentWillUnmount
     return () => {
@@ -68,7 +63,10 @@ export function CardWithURLRenderer(props) {
     else {
       const errorInfo = {
         componentStack
-      };
+      }; // Start and fail the smart-link-rendered experience. If it has already
+      // been started nothing happens.
+
+      startUfoExperience('smart-link-rendered', id);
       failUfoExperience('smart-link-rendered', id);
       failUfoExperience('smart-link-authenticated', id);
       dispatchAnalytics(uiRenderFailedEvent(appearance, error, errorInfo));

package/dist/es2019/view/FlexibleCard/components/actions/action/index.js

@@ -84,8 +84,8 @@ export const sizeToSpacing = {
   [SmartLinkSize.XLarge]: 'default'
 };
 /**
- * An action that can be triggered with an on click.
- * @public
+ * A base action that can be triggered with an on click.
+ * @internal
  * @param {ActionProps} ActionProps - The props necessary for the Action.
  * @see DeleteAction
  * @see EditAction

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

@@ -29,6 +29,7 @@ const styles = css`
 /**
  * Creates a group of Action components. Accepts an array of Actions, in addition to some styling
  * preferences.
+ * @internal
  * @param {ActionGroupProps} ActionGroupProps
  * @see Action
  */

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

@@ -13,8 +13,9 @@ const getBlockStyles = (direction, size) => css`
   }
 `;
 /**
- * A block represents a collection of elements and actions that are arranged in a row.
- * All elements and actions should be contained within a Block.
+ * A block represents a collection of elements and actions that are arranged
+ * in a row. All elements and actions should be contained within a Block.
+ * @internal
  * @param {ActionGroupProps} ActionGroupProps
  * @see Action
  */

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

@@ -30,6 +30,7 @@ export const getElementGroupStyles = (direction, size, align, width) => css`
 /**
  * Creates a group of Action components. Accepts an array of Actions, in addition to some styling
  * preferences.
+ * @internal
  * @param {ActionGroupProps} ActionGroupProps
  * @see Action
  */

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

@@ -8,6 +8,7 @@ import ActionGroup from '../action-group';
 /**
  * Represents a FooterBlock, designed to contain elements and actions that should appear
  * at the bottom of a link card.
+ * @public
  * @param {FooterBlockProps} FooterBlockProps
  * @see Block
  */

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

@@ -63,6 +63,7 @@ const getMaxLines = maxLines => {
 /**
  * Represents a MetadataBlock, designed to contain groups of metadata in the form of elements.
  * Accepts an array of elements to be shown either primary (left hand side) or secondary (right hand side).
+ * @public
  * @param {MetadataBlockProps} MetadataBlockProps
  * @see Block
  */

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

@@ -5,6 +5,7 @@ import Block from '../block';
 import { Preview } from '../../elements';
 /**
  * Represents a PreviewBlock, which typically contains media or other large format content.
+ * @public
  * @param {PreviewBlock} PreviewBlock
  * @see Block
  */

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

@@ -9,6 +9,7 @@ const MAXIMUM_MAX_LINES = 3;
 const MINIMUM_MAX_LINES = 1;
 /**
  * Represents a SnippetBlock, which is used to display longer form text content, like descriptions.
+ * @public
  * @param {SnippetBlock} SnippetBlock
  * @see Block
  */

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

@@ -42,10 +42,11 @@ const getTitleBlockViewComponent = status => {
   }
 };
 /**
- * Represents a TitleBlock, which is the foundation of all Flexible Smart Links.
+ * Represents a TitleBlock, which is the foundation of Flexible UI.
  * This contains an icon, the link, and any associated metadata and actions in one block.
  * The TitleBlock will also render differently given the state of the smart link.
  * This can be found in the corresponding Resolving, Resolved and Errored views.
+ * @public
  * @param {TitleBlockProps} TitleBlockProps
  * @see Block
  * @see TitleBlockResolvingView

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

@@ -81,12 +81,21 @@ const renderChildren = (children, containerSize, containerTheme, status, retry,
     const {
       size: blockSize
     } = child.props;
+    const size = blockSize || containerSize;
+
+    if (isFlexibleUiTitleBlock(child)) {
+      return /*#__PURE__*/React.cloneElement(child, {
+        onClick,
+        retry,
+        size,
+        status,
+        theme: containerTheme
+      });
+    }
+
     return /*#__PURE__*/React.cloneElement(child, {
-      onClick,
-      retry: isFlexibleUiTitleBlock(child) ? retry : undefined,
-      size: blockSize || containerSize,
-      status,
-      theme: containerTheme
+      size,
+      status
     });
   }
 });
@@ -116,7 +125,11 @@ const getLayeredLink = (testId, context, children) => {
   });
 };
 /**
- * This represents the container in which all Flexible UI Smart Links are rendered.
+ * A container is a hidden component that build the Flexible Smart Link.
+ * All of the Flexible UI components are wrapped inside the container.
+ * It inherits the ui props from Card component and applies the custom styling
+ * accordingly.
+ * @internal
  * @see Block
  */
 

package/dist/es2019/view/FlexibleCard/components/container/layered-link/index.js

@@ -35,6 +35,11 @@ const styles = css`
     }
   }
 `;
+/**
+ * An anchor component to cover the entire container creating a clickable area.
+ * @internal
+ * @see `clickableContainer`
+ */
 
 const LayeredLink = ({
   target,

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

@@ -27,8 +27,8 @@ const getStyles = size => {
   }
 };
 /**
- * An element that displays a group of avatars.
- * @public
+ * A base element that displays a group of avatars.
+ * @internal
  * @param {AvatarGroupProps} AvatarGroupProps - The props necessary for the AvatarGroup.
  * @see AuthorGroup
  * @see CollaboratorGroup

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

@@ -71,8 +71,8 @@ const renderImageIcon = (url, testId) => {
   }
 };
 /**
- * An element that displays some text with an associated icon.
- * @public
+ * A base element that displays some text with an associated icon.
+ * @internal
  * @param {BadgeProps} BadgeProps - The props necessary for the Badge.
  * @see CommentCount
  * @see ViewCount

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

@@ -15,12 +15,18 @@ const styles = css`
   ${getTruncateStyles(1)}
 `;
 const typeToDescriptorMap = {
-  created: messages.created_on,
-  modified: messages.modified_on
+  created: {
+    relative: messages.created_on_relative,
+    absolute: messages.created_on_absolute
+  },
+  modified: {
+    relative: messages.modified_on_relative,
+    absolute: messages.modified_on_absolute
+  }
 };
 /**
- * An element that displays an ISO Timestamp in text.
- * @public
+ * A base element that displays an ISO Timestamp in text.
+ * @internal
  * @param {DateTimeProps} DateTimeProps - The props necessary for the DateTime element.
  * @see CreatedOn
  * @see ModifiedOn
@@ -33,26 +39,42 @@ const DateTime = ({
   testId = 'smart-element-date-time'
 }) => {
   const {
-    formatRelativeTime
+    formatRelativeTime,
+    formatDate
   } = useIntl();
 
   if (!type || !date) {
     return null;
   }
 
-  const {
-    value,
-    unit
-  } = selectUnit(date, Date.now());
-  const context = formatRelativeTime(value, unit, {
-    numeric: 'auto'
-  });
+  const isLongerThenWeek = Math.abs(date.getTime() - Date.now()) > 1000 * 60 * 60 * 24 * 7;
+  let context;
+  let typeVariant;
+
+  if (isLongerThenWeek) {
+    typeVariant = 'absolute';
+    context = formatDate(date, {
+      month: 'long',
+      day: 'numeric',
+      year: 'numeric'
+    });
+  } else {
+    const {
+      value,
+      unit
+    } = selectUnit(date, Date.now());
+    typeVariant = 'relative';
+    context = formatRelativeTime(value, unit, {
+      numeric: 'auto'
+    });
+  }
+
   return jsx("span", {
     css: [styles, overrideCss],
     "data-separator": true,
     "data-smart-element-date-time": true,
     "data-testid": testId
-  }, jsx(FormattedMessage, _extends({}, typeToDescriptorMap[type], {
+  }, jsx(FormattedMessage, _extends({}, typeToDescriptorMap[type][typeVariant], {
     values: {
       context
     }

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

@@ -67,8 +67,8 @@ const renderImageIcon = (defaultIcon, icon, url, testId) => {
   }
 };
 /**
- * An element that displays an Icon or favicon.
- * @public
+ * A base element that displays an Icon or favicon.
+ * @internal
  * @param {IconProps} IconProps - The props necessary for the Icon element.
  * @see LinkIcon
  */

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

@@ -5,12 +5,12 @@ import { ElementName } from '../../../../constants';
 // createElement and renderElementItems
 
 /**
- * Creates an AvatarGroup element using the data from AuthorGroup in the Flexible UI Context.
+ * 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.
+ * An AvatarGroup element using the data from CollaboratorGroup in the Flexible UI Context.
  * @see AvatarGroup
  */
 

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

@@ -65,9 +65,9 @@ const getMaxLines = maxLines => {
   return maxLines;
 };
 /**
- * An element that represent.
- * @public
- * @param {LinkProps} LinkProps - The props necessary for the Icon element.
+ * A base element that represent an anchor.
+ * @internal
+ * @param {LinkProps} LinkProps - The props necessary for the Link element.
  * @see LinkIcon
  */
 

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

@@ -6,8 +6,8 @@ const styles = css`
   line-height: inherit;
 `;
 /**
- * An element that displays a Lozenge.
- * @public
+ * A base element that displays a Lozenge.
+ * @internal
  * @param {LozengeProps} LozengeProps - The props necessary for the Lozenge element.
  * @see State
  */

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

@@ -46,8 +46,8 @@ const styles = css`
   }
 `;
 /**
- * An element that displays a Media.
- * @public
+ * A base element that displays a Media.
+ * @internal
  * @param {MediaProps} MediaProps - The props necessary for the Media element.
  * @see Preview
  */

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

@@ -11,8 +11,8 @@ const getStyles = maxLines => css`
   ${getTruncateStyles(maxLines)}
 `;
 /**
- * An element that displays some Text.
- * @public
+ * A base element that displays some Text.
+ * @internal
  * @param {TextProps} TextProps - The props necessary for the Text element.
  * @see Title
  */

package/dist/esm/constants.js

@@ -109,9 +109,6 @@ export var ElementName;
   ElementName["AuthorGroup"] = "AuthorGroup";
   ElementName["CollaboratorGroup"] = "CollaboratorGroup";
   ElementName["CommentCount"] = "CommentCount";
-  ElementName["ViewCount"] = "ViewCount";
-  ElementName["ReactCount"] = "ReactCount";
-  ElementName["VoteCount"] = "VoteCount";
   ElementName["CreatedBy"] = "CreatedBy";
   ElementName["CreatedOn"] = "CreatedOn";
   ElementName["LinkIcon"] = "LinkIcon";
@@ -120,11 +117,14 @@ export var ElementName;
   ElementName["Preview"] = "Preview";
   ElementName["Priority"] = "Priority";
   ElementName["ProgrammingLanguage"] = "ProgrammingLanguage";
+  ElementName["Provider"] = "Provider";
+  ElementName["ReactCount"] = "ReactCount";
   ElementName["Snippet"] = "Snippet";
   ElementName["State"] = "State";
   ElementName["SubscriberCount"] = "SubscriberCount";
   ElementName["Title"] = "Title";
-  ElementName["Provider"] = "Provider";
+  ElementName["ViewCount"] = "ViewCount";
+  ElementName["VoteCount"] = "VoteCount";
 })(ElementName || (ElementName = {}));
 
 export var ActionName;

package/dist/esm/messages.js

@@ -25,10 +25,15 @@ export var messages = defineMessages({
     defaultMessage: 'Created by {context}',
     description: 'Indicates the person or entity that created the resource.'
   },
-  created_on: {
-    id: 'fabric.linking.create_on',
+  created_on_relative: {
+    id: 'fabric.linking.create_on_relative',
     defaultMessage: 'Created {context}',
-    description: 'Indicated when entity was created'
+    description: 'Indicated when entity was created (relative form)'
+  },
+  created_on_absolute: {
+    id: 'fabric.linking.create_on_absolute',
+    defaultMessage: 'Created on {context}',
+    description: 'Indicated when entity was created (absolute form)'
   },
   delete: {
     id: 'fabric.linking.delete',
@@ -45,10 +50,15 @@ export var messages = defineMessages({
     defaultMessage: 'Modified by {context}',
     description: 'Indicates the person or entity that modified the resource.'
   },
-  modified_on: {
-    id: 'fabric.linking.modified_on',
+  modified_on_relative: {
+    id: 'fabric.linking.modified_on_relative',
     defaultMessage: 'Updated {context}',
-    description: 'Indicated when entity was modified'
+    description: 'Indicated when entity was modified (relative form)'
+  },
+  modified_on_absolute: {
+    id: 'fabric.linking.modified_on_absolute',
+    defaultMessage: 'Updated on {context}',
+    description: 'Indicated when entity was modified (absolute form)'
   },
   priority_blocker: {
     id: 'fabric.linking.priority_blocker',

package/dist/esm/version.json

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

package/dist/esm/view/CardWithUrl/component-lazy/LazyIntersectionObserverCard.js

@@ -3,7 +3,8 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useCallback, useState } from 'react';
 import { usePrefetch } from '../../../state';
 import { CardWithUrlContent } from '../component';
-import { LoadingCardLink } from './LazyFallback'; // This property enables the intersection observer to be run once the
+import { LoadingCardLink } from './LazyFallback';
+import { startUfoExperience } from '../../../state/analytics/ufoExperiences'; // This property enables the intersection observer to be run once the
 // HTML element being observed is within `X` px of the target container it is
 // being compared to. Since the default container is the `document`, we set this
 // up to check once a Smart Link is within `X` px from the bottom of the viewport.
@@ -17,7 +18,8 @@ export function LazyIntersectionObserverCard(props) {
 
   var showActions = props.showActions,
       appearance = props.appearance,
-      url = props.url;
+      url = props.url,
+      id = props.id;
   var prefetch = usePrefetch(url);
   var Component = appearance === 'inline' ? 'span' : 'div';
   var ComponentObserver = Component;
@@ -27,12 +29,13 @@ export function LazyIntersectionObserverCard(props) {
     });
 
     if (isVisible) {
+      startUfoExperience('smart-link-rendered', id);
       setIsIntersecting(true);
       observer.disconnect();
     } else {
       prefetch();
     }
-  }, [prefetch]);
+  }, [prefetch, id]);
   var onRef = useCallback(function (element) {
     if (!element) {
       return;

package/dist/esm/view/CardWithUrl/component-lazy/LazyLazilyRenderCard.js

@@ -1,13 +1,19 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+import React, { useState } from 'react';
 import LazilyRender from 'react-lazily-render';
 import { CardWithUrlContent } from '../component';
 import { LoadingCardLink } from './LazyFallback';
+import { startUfoExperience } from '../../../state/analytics/ufoExperiences';
 export function LazyLazilyRenderCard(props) {
   var appearance = props.appearance,
       container = props.container,
-      showActions = props.showActions;
+      showActions = props.showActions,
+      id = props.id;
   var offset = Math.ceil(window.innerHeight / 4);
+  useState(function () {
+    // Start of experience when intersectionObserver is not supported.
+    startUfoExperience('smart-link-rendered', id);
+  });
   return /*#__PURE__*/React.createElement(LazilyRender, {
     offset: offset,
     component: appearance === 'inline' ? 'span' : 'div',

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

@@ -16,13 +16,8 @@ export function CardWithURLRenderer(props) {
     return uuid();
   }),
       _useState2 = _slicedToArray(_useState, 1),
-      id = _useState2[0]; // Equivalent to ComponentWillMount
+      id = _useState2[0];
 
-
-  useState(function () {
-    // We want to start timing of render event only once and right at the start
-    startUfoExperience('smart-link-rendered', id);
-  });
   useEffect(function () {
     // ComponentWillUnmount
     return function () {
@@ -72,7 +67,10 @@ export function CardWithURLRenderer(props) {
     else {
       var errorInfo = {
         componentStack: componentStack
-      };
+      }; // Start and fail the smart-link-rendered experience. If it has already
+      // been started nothing happens.
+
+      startUfoExperience('smart-link-rendered', id);
       failUfoExperience('smart-link-rendered', id);
       failUfoExperience('smart-link-authenticated', id);
       dispatchAnalytics(uiRenderFailedEvent(appearance, error, errorInfo));

package/dist/esm/view/FlexibleCard/components/actions/action/index.js

@@ -58,8 +58,8 @@ var ActionIcon = function ActionIcon(_ref) {
 
 export var sizeToSpacing = (_sizeToSpacing = {}, _defineProperty(_sizeToSpacing, SmartLinkSize.Small, 'none'), _defineProperty(_sizeToSpacing, SmartLinkSize.Medium, 'compact'), _defineProperty(_sizeToSpacing, SmartLinkSize.Large, 'compact'), _defineProperty(_sizeToSpacing, SmartLinkSize.XLarge, 'default'), _sizeToSpacing);
 /**
- * An action that can be triggered with an on click.
- * @public
+ * A base action that can be triggered with an on click.
+ * @internal
  * @param {ActionProps} ActionProps - The props necessary for the Action.
  * @see DeleteAction
  * @see EditAction

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

@@ -19,6 +19,7 @@ var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["
 /**
  * Creates a group of Action components. Accepts an array of Actions, in addition to some styling
  * preferences.
+ * @internal
  * @param {ActionGroupProps} ActionGroupProps
  * @see Action
  */

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

@@ -12,8 +12,9 @@ var getBlockStyles = function getBlockStyles(direction, size) {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  justify-content: flex-start;\n  [data-separator] + [data-separator]:before {\n    content: '\u2022';\n    margin-right: ", "rem;\n  }\n"])), getBaseStyles(direction, size), getGapSize(size));
 };
 /**
- * A block represents a collection of elements and actions that are arranged in a row.
- * All elements and actions should be contained within a Block.
+ * A block represents a collection of elements and actions that are arranged
+ * in a row. All elements and actions should be contained within a Block.
+ * @internal
  * @param {ActionGroupProps} ActionGroupProps
  * @see Action
  */

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

@@ -25,6 +25,7 @@ export var getElementGroupStyles = function getElementGroupStyles(direction, siz
 /**
  * Creates a group of Action components. Accepts an array of Actions, in addition to some styling
  * preferences.
+ * @internal
  * @param {ActionGroupProps} ActionGroupProps
  * @see Action
  */

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

@@ -8,6 +8,7 @@ import ActionGroup from '../action-group';
 /**
  * Represents a FooterBlock, designed to contain elements and actions that should appear
  * at the bottom of a link card.
+ * @public
  * @param {FooterBlockProps} FooterBlockProps
  * @see Block
  */

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

@@ -59,6 +59,7 @@ var getMaxLines = function getMaxLines(maxLines) {
 /**
  * Represents a MetadataBlock, designed to contain groups of metadata in the form of elements.
  * Accepts an array of elements to be shown either primary (left hand side) or secondary (right hand side).
+ * @public
  * @param {MetadataBlockProps} MetadataBlockProps
  * @see Block
  */

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

@@ -7,6 +7,7 @@ import Block from '../block';
 import { Preview } from '../../elements';
 /**
  * Represents a PreviewBlock, which typically contains media or other large format content.
+ * @public
  * @param {PreviewBlock} PreviewBlock
  * @see Block
  */

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

@@ -11,6 +11,7 @@ var MAXIMUM_MAX_LINES = 3;
 var MINIMUM_MAX_LINES = 1;
 /**
  * Represents a SnippetBlock, which is used to display longer form text content, like descriptions.
+ * @public
  * @param {SnippetBlock} SnippetBlock
  * @see Block
  */

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

@@ -40,10 +40,11 @@ var getTitleBlockViewComponent = function getTitleBlockViewComponent(status) {
   }
 };
 /**
- * Represents a TitleBlock, which is the foundation of all Flexible Smart Links.
+ * Represents a TitleBlock, which is the foundation of Flexible UI.
  * This contains an icon, the link, and any associated metadata and actions in one block.
  * The TitleBlock will also render differently given the state of the smart link.
  * This can be found in the corresponding Resolving, Resolved and Errored views.
+ * @public
  * @param {TitleBlockProps} TitleBlockProps
  * @see Block
  * @see TitleBlockResolvingView