@atlaskit/smart-card 19.0.0 → 19.0.3

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/smart-card
 
+## 19.0.3
+
+### Patch Changes
+
+- [`cae40e59c49`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cae40e59c49) - Show relative date for dates less then 7 days away (flexible ui)
+
+## 19.0.2
+
+### Patch Changes
+
+- [`f3026520fc6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f3026520fc6) - Fix long tti times for UFO smart-link-rendered experience
+
+## 19.0.1
+
+### Patch Changes
+
+- [`49f905e71e5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/49f905e71e5) - Flexible UI: Add API document and update prop types.
+
 ## 19.0.0
 
 ### Major Changes

package/dist/cjs/constants.js

@@ -132,9 +132,6 @@ exports.ElementName = 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";
@@ -143,11 +140,14 @@ exports.ElementName = 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 || (exports.ElementName = ElementName = {}));
 
 var ActionName;

package/dist/cjs/messages.js

@@ -33,10 +33,15 @@ var messages = (0, _reactIntlNext.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',
@@ -53,10 +58,15 @@ var messages = (0, _reactIntlNext.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/cjs/version.json

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

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

@@ -21,6 +21,8 @@ var _component = require("../component");
 
 var _LazyFallback = require("./LazyFallback");
 
+var _ufoExperiences = require("../../../state/analytics/ufoExperiences");
+
 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; }
@@ -39,7 +41,8 @@ function LazyIntersectionObserverCard(props) {
 
   var showActions = props.showActions,
       appearance = props.appearance,
-      url = props.url;
+      url = props.url,
+      id = props.id;
   var prefetch = (0, _state.usePrefetch)(url);
   var Component = appearance === 'inline' ? 'span' : 'div';
   var ComponentObserver = Component;
@@ -49,12 +52,13 @@ function LazyIntersectionObserverCard(props) {
     });
 
     if (isVisible) {
+      (0, _ufoExperiences.startUfoExperience)('smart-link-rendered', id);
       setIsIntersecting(true);
       observer.disconnect();
     } else {
       prefetch();
     }
-  }, [prefetch]);
+  }, [prefetch, id]);
   var onRef = (0, _react.useCallback)(function (element) {
     if (!element) {
       return;

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

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,7 +11,7 @@ exports.LazyLazilyRenderCard = LazyLazilyRenderCard;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _reactLazilyRender = _interopRequireDefault(require("react-lazily-render"));
 
@@ -17,11 +19,22 @@ var _component = require("../component");
 
 var _LazyFallback = require("./LazyFallback");
 
+var _ufoExperiences = require("../../../state/analytics/ufoExperiences");
+
+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; }
+
 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);
+  (0, _react.useState)(function () {
+    // Start of experience when intersectionObserver is not supported.
+    (0, _ufoExperiences.startUfoExperience)('smart-link-rendered', id);
+  });
   return /*#__PURE__*/_react.default.createElement(_reactLazilyRender.default, {
     offset: offset,
     component: appearance === 'inline' ? 'span' : 'div',

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

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

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

@@ -75,8 +75,8 @@ var ActionIcon = function ActionIcon(_ref) {
 
 var sizeToSpacing = (_sizeToSpacing = {}, (0, _defineProperty2.default)(_sizeToSpacing, _constants.SmartLinkSize.Small, 'none'), (0, _defineProperty2.default)(_sizeToSpacing, _constants.SmartLinkSize.Medium, 'compact'), (0, _defineProperty2.default)(_sizeToSpacing, _constants.SmartLinkSize.Large, 'compact'), (0, _defineProperty2.default)(_sizeToSpacing, _constants.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/cjs/view/FlexibleCard/components/blocks/action-group/index.js

@@ -39,6 +39,7 @@ var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTem
 /**
  * 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/cjs/view/FlexibleCard/components/blocks/block/index.js

@@ -23,8 +23,9 @@ var getBlockStyles = function getBlockStyles(direction, size) {
   return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  justify-content: flex-start;\n  [data-separator] + [data-separator]:before {\n    content: '\u2022';\n    margin-right: ", "rem;\n  }\n"])), (0, _utils.getBaseStyles)(direction, size), (0, _utils.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/cjs/view/FlexibleCard/components/blocks/element-group/index.js

@@ -36,6 +36,7 @@ var getElementGroupStyles = function getElementGroupStyles(direction, size, alig
 /**
  * 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/cjs/view/FlexibleCard/components/blocks/footer-block/index.js

@@ -24,6 +24,7 @@ var _actionGroup = _interopRequireDefault(require("../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/cjs/view/FlexibleCard/components/blocks/metadata-block/index.js

@@ -77,6 +77,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/cjs/view/FlexibleCard/components/blocks/preview-block/index.js

@@ -23,6 +23,7 @@ var _excluded = ["status", "testId"];
 
 /**
  * Represents a PreviewBlock, which typically contains media or other large format content.
+ * @public
  * @param {PreviewBlock} PreviewBlock
  * @see Block
  */

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

@@ -27,6 +27,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/cjs/view/FlexibleCard/components/blocks/title-block/index.js

@@ -66,10 +66,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

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

@@ -79,12 +79,21 @@ var renderChildren = function renderChildren(children, containerSize, containerT
   return _react.default.Children.map(children, function (child) {
     if ( /*#__PURE__*/_react.default.isValidElement(child) && (0, _flexible.isFlexibleUiBlock)(child)) {
       var blockSize = child.props.size;
+      var size = blockSize || containerSize;
+
+      if ((0, _flexible.isFlexibleUiTitleBlock)(child)) {
+        return /*#__PURE__*/_react.default.cloneElement(child, {
+          onClick: onClick,
+          retry: retry,
+          size: size,
+          status: status,
+          theme: containerTheme
+        });
+      }
+
       return /*#__PURE__*/_react.default.cloneElement(child, {
-        onClick: onClick,
-        retry: (0, _flexible.isFlexibleUiTitleBlock)(child) ? retry : undefined,
-        size: blockSize || containerSize,
-        status: status,
-        theme: containerTheme
+        size: size,
+        status: status
       });
     }
   });
@@ -118,7 +127,11 @@ var getLayeredLink = function 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/cjs/view/FlexibleCard/components/container/layered-link/index.js

@@ -16,6 +16,11 @@ var _core = require("@emotion/core");
 var _templateObject;
 
 var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  // Stretch the invisible link over the whole of the post.\n  // Hide the link\u2019s text.\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow-x: hidden;\n  text-indent: 100%;\n  white-space: nowrap;\n\n  // Needs a heightened specificity to trump other anchor.\n  // Stack it under all other links in the post text.\n  a&.layered-link {\n    position: absolute;\n    z-index: 0;\n  }\n\n  // When hovering over the layered link, any hidden action buttons inside\n  // the Container should become visible.\n  // As actions resides inside blocks and layered link is expected to be\n  // on the same level of blocks. That makes the blocks, e.g. TitleBlock,\n  // its sibling. Using general sibling combinator here to apply styling to\n  // all the siblings of layered link.\n  // The general sibling combinator (~) separates two selectors and matches all\n  // iterations of the second element, that are following the first element\n  // (though not necessarily immediately), and are children of the same parent\n  // element.\n  &:hover ~ * {\n    .actions-button-group {\n      opacity: 1;\n    }\n  }\n"])));
+/**
+ * An anchor component to cover the entire container creating a clickable area.
+ * @internal
+ * @see `clickableContainer`
+ */
 
 var LayeredLink = function LayeredLink(_ref) {
   var target = _ref.target,

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

@@ -35,8 +35,8 @@ var getStyles = function 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/cjs/view/FlexibleCard/components/elements/badge/index.js

@@ -65,8 +65,8 @@ var renderImageIcon = function 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/cjs/view/FlexibleCard/components/elements/date-time/index.js

@@ -29,12 +29,18 @@ var _templateObject;
 
 var styles = (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)(1));
 var typeToDescriptorMap = {
-  created: _messages.messages.created_on,
-  modified: _messages.messages.modified_on
+  created: {
+    relative: _messages.messages.created_on_relative,
+    absolute: _messages.messages.created_on_absolute
+  },
+  modified: {
+    relative: _messages.messages.modified_on_relative,
+    absolute: _messages.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
@@ -48,25 +54,41 @@ var DateTime = function DateTime(_ref) {
       testId = _ref$testId === void 0 ? 'smart-element-date-time' : _ref$testId;
 
   var _useIntl = (0, _reactIntlNext.useIntl)(),
-      formatRelativeTime = _useIntl.formatRelativeTime;
+      formatRelativeTime = _useIntl.formatRelativeTime,
+      formatDate = _useIntl.formatDate;
 
   if (!type || !date) {
     return null;
   }
 
-  var _selectUnit = (0, _intlUtils.selectUnit)(date, Date.now()),
-      value = _selectUnit.value,
-      unit = _selectUnit.unit;
+  var isLongerThenWeek = Math.abs(date.getTime() - Date.now()) > 1000 * 60 * 60 * 24 * 7;
+  var context;
+  var typeVariant;
+
+  if (isLongerThenWeek) {
+    typeVariant = 'absolute';
+    context = formatDate(date, {
+      month: 'long',
+      day: 'numeric',
+      year: 'numeric'
+    });
+  } else {
+    var _selectUnit = (0, _intlUtils.selectUnit)(date, Date.now()),
+        value = _selectUnit.value,
+        unit = _selectUnit.unit;
+
+    typeVariant = 'relative';
+    context = formatRelativeTime(value, unit, {
+      numeric: 'auto'
+    });
+  }
 
-  var context = formatRelativeTime(value, unit, {
-    numeric: 'auto'
-  });
   return (0, _core.jsx)("span", {
     css: [styles, overrideCss],
     "data-separator": true,
     "data-smart-element-date-time": true,
     "data-testid": testId
-  }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, typeToDescriptorMap[type], {
+  }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, typeToDescriptorMap[type][typeVariant], {
     values: {
       context: context
     }

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

@@ -77,8 +77,8 @@ var renderImageIcon = function 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/cjs/view/FlexibleCard/components/elements/index.js

@@ -14,12 +14,12 @@ var _constants = require("../../../../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
  */
 var AuthorGroup = (0, _utils.createElement)(_constants.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/cjs/view/FlexibleCard/components/elements/link/index.js

@@ -63,9 +63,9 @@ var getMaxLines = function 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/cjs/view/FlexibleCard/components/elements/lozenge/index.js

@@ -19,8 +19,8 @@ var _templateObject;
 
 var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  line-height: inherit;\n"])));
 /**
- * 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/cjs/view/FlexibleCard/components/elements/media/index.js

@@ -29,8 +29,8 @@ var _templateObject;
  */
 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
+ * A base element that displays a Media.
+ * @internal
  * @param {MediaProps} MediaProps - The props necessary for the Media element.
  * @see Preview
  */

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

@@ -23,8 +23,8 @@ 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
+ * A base element that displays some Text.
+ * @internal
  * @param {TextProps} TextProps - The props necessary for the Text element.
  * @see Title
  */

package/dist/es2019/constants.js

@@ -109,9 +109,6 @@ export let 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 let 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 let ActionName;

package/dist/es2019/messages.js

@@ -25,10 +25,15 @@ export const 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 const 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/es2019/version.json

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

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

@@ -2,7 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 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.
@@ -13,7 +14,8 @@ export function LazyIntersectionObserverCard(props) {
   const {
     showActions,
     appearance,
-    url
+    url,
+    id
   } = props;
   const prefetch = usePrefetch(url);
   const Component = appearance === 'inline' ? 'span' : 'div';
@@ -22,12 +24,13 @@ export function LazyIntersectionObserverCard(props) {
     const isVisible = entries.some(entry => entry.isIntersecting);
 
     if (isVisible) {
+      startUfoExperience('smart-link-rendered', id);
       setIsIntersecting(true);
       observer.disconnect();
     } else {
       prefetch();
     }
-  }, [prefetch]);
+  }, [prefetch, id]);
   const onRef = useCallback(element => {
     if (!element) {
       return;