@atlaskit/smart-card 16.2.0 → 17.0.1

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

@@ -0,0 +1,175 @@
+import React from 'react';
+import Loadable from 'react-loadable';
+import { B200, B400, N700 } from '@atlaskit/theme/colors';
+import { IconType } from '../../../../../../constants';
+// prettier-ignore
+const importIconMapper = {
+  [IconType.Archive]: () => import(
+  /* webpackChunkName: "glyphArchive" */
+  '@atlaskit/icon-file-type/glyph/archive/16'),
+  [IconType.Audio]: () => import(
+  /* webpackChunkName: "glyphAudio" */
+  '@atlaskit/icon-file-type/glyph/audio/16'),
+  [IconType.Blog]: () => import(
+  /* webpackChunkName: "glyphBlog" */
+  '@atlaskit/icon-object/glyph/blog/16'),
+  [IconType.Code]: () => import(
+  /* webpackChunkName: "glyphCode" */
+  '@atlaskit/icon-file-type/glyph/source-code/16'),
+  [IconType.Document]: () => import(
+  /* webpackChunkName: "glyphDocument" */
+  '@atlaskit/icon-file-type/glyph/document/16'),
+  [IconType.Executable]: () => import(
+  /* webpackChunkName: "glyphExecutable" */
+  '@atlaskit/icon-file-type/glyph/executable/16'),
+  [IconType.File]: () => import(
+  /* webpackChunkName: "glyphFile" */
+  '@atlaskit/icon-file-type/glyph/generic/16'),
+  [IconType.Folder]: () => import(
+  /* webpackChunkName: "glyphFolder" */
+  '@atlaskit/icon-file-type/glyph/folder/16'),
+  [IconType.Generic]: () => import(
+  /* webpackChunkName: "glyphGeneric" */
+  '@atlaskit/icon-file-type/glyph/generic/16'),
+  [IconType.GIF]: () => import(
+  /* webpackChunkName: "glyphGIF" */
+  '@atlaskit/icon-file-type/glyph/gif/16'),
+  [IconType.GoogleDocs]: () => import(
+  /* webpackChunkName: "glyphGoogleDocs" */
+  '@atlaskit/icon-file-type/glyph/google-doc/16'),
+  [IconType.GoogleForms]: () => import(
+  /* webpackChunkName: "glyphGoogleForms" */
+  '@atlaskit/icon-file-type/glyph/google-form/16'),
+  [IconType.GoogleSheets]: () => import(
+  /* webpackChunkName: "glyphGoogleSheets" */
+  '@atlaskit/icon-file-type/glyph/google-sheet/16'),
+  [IconType.GoogleSlides]: () => import(
+  /* webpackChunkName: "glyphGoogleSlides" */
+  '@atlaskit/icon-file-type/glyph/google-slide/16'),
+  [IconType.Image]: () => import(
+  /* webpackChunkName: "glyphImage" */
+  '@atlaskit/icon-file-type/glyph/image/16'),
+  [IconType.MSExcel]: () => import(
+  /* webpackChunkName: "glyphMSExcel" */
+  '@atlaskit/icon-file-type/glyph/excel-spreadsheet/16'),
+  [IconType.MSPowerpoint]: () => import(
+  /* webpackChunkName: "glyphMSPowerpoint" */
+  '@atlaskit/icon-file-type/glyph/powerpoint-presentation/16'),
+  [IconType.MSWord]: () => import(
+  /* webpackChunkName: "glyphMSWord" */
+  '@atlaskit/icon-file-type/glyph/word-document/16'),
+  [IconType.PDF]: () => import(
+  /* webpackChunkName: "glyphPDF" */
+  '@atlaskit/icon-file-type/glyph/pdf-document/16'),
+  [IconType.Presentation]: () => import(
+  /* webpackChunkName: "glyphPresentation" */
+  '@atlaskit/icon-file-type/glyph/presentation/16'),
+  [IconType.Sketch]: () => import(
+  /* webpackChunkName: "glyphSketch" */
+  '@atlaskit/icon-file-type/glyph/sketch/16'),
+  [IconType.Spreadsheet]: () => import(
+  /* webpackChunkName: "glyphSpreadsheet" */
+  '@atlaskit/icon-file-type/glyph/spreadsheet/16'),
+  [IconType.Template]: () => import(
+  /* webpackChunkName: "glyphTemplate" */
+  '@atlaskit/icon/glyph/document-filled'),
+  [IconType.Video]: () => import(
+  /* webpackChunkName: "glyphVideo" */
+  '@atlaskit/icon-file-type/glyph/video/16'),
+  // Bitbucket icons
+  [IconType.Branch]: () => import(
+  /* webpackChunkName: "glyphBranch" */
+  '@atlaskit/icon-object/glyph/branch/16'),
+  [IconType.Commit]: () => import(
+  /* webpackChunkName: "glyphCommit" */
+  '@atlaskit/icon-object/glyph/commit/16'),
+  [IconType.Project]: () => import(
+  /* webpackChunkName: "glyphProject" */
+  '@atlaskit/icon/glyph/people-group'),
+  [IconType.PullRequest]: () => import(
+  /* webpackChunkName: "glyphPullRequest" */
+  '@atlaskit/icon-object/glyph/pull-request/16'),
+  [IconType.Repo]: () => import(
+  /* webpackChunkName: "glyphRepo" */
+  '@atlaskit/icon-object/glyph/code/16'),
+  // Jira icons
+  [IconType.Bug]: () => import(
+  /* webpackChunkName: "glyphBug" */
+  '@atlaskit/icon-object/glyph/bug/16'),
+  [IconType.Change]: () => import(
+  /* webpackChunkName: "glyphChange" */
+  '@atlaskit/icon-object/glyph/changes/16'),
+  [IconType.Epic]: () => import(
+  /* webpackChunkName: "glyphEpic" */
+  '@atlaskit/icon-object/glyph/epic/16'),
+  [IconType.Incident]: () => import(
+  /* webpackChunkName: "glyphIncident" */
+  '@atlaskit/icon-object/glyph/incident/16'),
+  [IconType.Problem]: () => import(
+  /* webpackChunkName: "glyphProblem" */
+  '@atlaskit/icon-object/glyph/problem/16'),
+  [IconType.ServiceRequest]: () => import(
+  /* webpackChunkName: "glyphServiceRequest" */
+  '@atlaskit/icon-object/glyph/issue/16'),
+  [IconType.Story]: () => import(
+  /* webpackChunkName: "glyphStory" */
+  '@atlaskit/icon-object/glyph/story/16'),
+  [IconType.SubTask]: () => import(
+  /* webpackChunkName: "glyphSubTask" */
+  '@atlaskit/icon-object/glyph/subtask/16'),
+  [IconType.Task]: () => import(
+  /* webpackChunkName: "glyphTask" */
+  '@atlaskit/icon-object/glyph/task/16'),
+  // Provider icons
+  [IconType.Confluence]: () => import(
+  /* webpackChunkName: "glyphConfluence" */
+  '@atlaskit/logo/confluence-icon').then(({
+    ConfluenceIcon
+  }) => ({
+    default: ConfluenceIcon
+  })),
+  [IconType.Jira]: () => import(
+  /* webpackChunkName: "glyphJira" */
+  '@atlaskit/logo/jira-icon').then(({
+    JiraIcon
+  }) => ({
+    default: JiraIcon
+  }))
+};
+
+const getIconImportFn = icon => importIconMapper[icon];
+
+const importIcon = importFn => {
+  return Loadable({
+    loader: () => importFn().then(module => module.default),
+    loading: () => null
+  }); // Because we're using dynamic loading here, TS will not be able to infer the type.
+};
+
+const AtlaskitIcon = ({
+  icon,
+  label,
+  testId
+}) => {
+  const importFn = getIconImportFn(icon);
+
+  if (!importFn) {
+    return null;
+  }
+
+  const ImportedIcon = importIcon(importFn); // Logo component has a different prop set from other icon components
+  // and yet to support the token system.
+
+  const importedIcon = icon === IconType.Confluence || icon === IconType.Jira ? /*#__PURE__*/React.createElement(ImportedIcon, {
+    textColor: N700,
+    iconColor: B200,
+    iconGradientStart: B400,
+    iconGradientStop: B200
+  }) : /*#__PURE__*/React.createElement(ImportedIcon, {
+    label: label,
+    testId: testId
+  });
+  return importedIcon;
+};
+
+export default AtlaskitIcon;

package/dist/es2019/view/FlexibleCard/components/elements/icon/atlaskit-icon/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,19 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/core';
+import ImageLoader from 'react-render-image';
+
+const ImageIcon = ({
+  defaultIcon,
+  testId,
+  url
+}) => jsx(ImageLoader, {
+  src: url,
+  loaded: jsx("img", {
+    src: url,
+    "data-testid": `${testId}-image`
+  }),
+  errored: defaultIcon
+});
+
+export default ImageIcon;

package/dist/es2019/view/FlexibleCard/components/elements/icon/image-icon/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,112 @@
+/** @jsx jsx */
+import React, { useMemo } from 'react';
+import LinkIcon from '@atlaskit/icon/glyph/link';
+import { css, jsx } from '@emotion/core';
+import { SmartLinkSize } from '../../../../../constants';
+import AtlaskitIcon from './atlaskit-icon';
+import ImageIcon from './image-icon';
+
+const getDimensionStyles = value => ({
+  maxHeight: value,
+  maxWidth: value,
+  minHeight: value,
+  minWidth: value,
+  height: value,
+  width: value
+});
+
+const getSizeStyles = size => {
+  switch (size) {
+    case SmartLinkSize.XLarge:
+      return getDimensionStyles('1.75rem');
+
+    case SmartLinkSize.Large:
+      return getDimensionStyles('1.5rem');
+
+    case SmartLinkSize.Medium:
+      return getDimensionStyles('1rem');
+
+    case SmartLinkSize.Small:
+    default:
+      return getDimensionStyles('.75rem');
+  }
+};
+
+const getMargin = size => {
+  switch (size) {
+    case SmartLinkSize.XLarge:
+      return '0.12em 0 0 0';
+
+    case SmartLinkSize.Large:
+      return '0';
+
+    case SmartLinkSize.Medium:
+      return '0';
+
+    case SmartLinkSize.Small:
+    default:
+      return '-.05em 0 0 0';
+  }
+};
+
+const getIconStyles = size => {
+  const styles = getSizeStyles(size);
+  return css({
+    flex: '0 0 auto',
+    alignSelf: 'flex-start',
+    margin: getMargin(size),
+    ...styles,
+    '[class$="-Icon"],[class$="-Wrapper"]': { ...styles,
+      '> svg': { ...styles,
+        padding: 0
+      }
+    },
+    '& > img': styles
+  });
+};
+
+const renderAtlaskitIcon = (icon, label, testId) => {
+  if (icon) {
+    return jsx(AtlaskitIcon, {
+      icon: icon,
+      label: label,
+      testId: `${testId}-icon`
+    });
+  }
+};
+
+const renderDefaultIcon = (label, testId) => jsx(LinkIcon, {
+  label: label,
+  testId: `${testId}-default`
+});
+
+const renderImageIcon = (defaultIcon, icon, url, testId) => {
+  if (url) {
+    return jsx(ImageIcon, {
+      defaultIcon: defaultIcon,
+      testId: testId,
+      url: url
+    });
+  }
+};
+
+const Icon = ({
+  icon,
+  label = 'Link',
+  size = SmartLinkSize.Medium,
+  testId = 'smart-element-icon',
+  url
+}) => {
+  const element = useMemo(() => {
+    const defaultIcon = renderDefaultIcon(label, testId);
+    return renderImageIcon(defaultIcon, icon, url, testId) || renderAtlaskitIcon(icon, label, testId) || defaultIcon;
+  }, [icon, label, testId, url]);
+  const styles = getIconStyles(size);
+  return jsx("div", {
+    css: styles,
+    "data-smart-element-icon": true,
+    "data-testid": testId
+  }, element);
+};
+
+export default Icon;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,118 @@
+/** @jsx jsx */
+import React from 'react';
+import { B400, N800, N900, B500 } from '@atlaskit/theme/colors';
+import { h200, h400, h600, h800 } from '@atlaskit/theme/typography';
+import { token } from '@atlaskit/tokens';
+import { css, jsx } from '@emotion/core';
+import { SmartLinkSize, SmartLinkTheme } from '../../../../../constants';
+const DEFAULT_MAX_LINES = 2;
+const MAXIMUM_MAX_LINES = 2;
+const MINIMUM_MAX_LINES = 1;
+
+const getSizeStyles = size => {
+  const overrides = {
+    marginTop: 'unset'
+  };
+
+  switch (size) {
+    case SmartLinkSize.XLarge:
+      return { ...h800(),
+        ...overrides
+      };
+
+    case SmartLinkSize.Large:
+      return { ...h600(),
+        ...overrides
+      };
+
+    case SmartLinkSize.Medium:
+      return { ...h400(),
+        ...overrides
+      };
+
+    case SmartLinkSize.Small:
+    default:
+      return { ...h200(),
+        ...overrides
+      };
+  }
+};
+
+const getThemeStyles = theme => {
+  switch (theme) {
+    case SmartLinkTheme.Black:
+      return {
+        color: token('color.text.subtle', N800),
+        fontWeight: 500,
+        ':active': {
+          color: token('color.text', N900)
+        },
+        ':hover': {
+          color: token('color.text.subtle', N800),
+          textDecoration: 'underline'
+        }
+      };
+
+    case SmartLinkTheme.Link:
+    default:
+      return {
+        color: token('color.link', B400),
+        ':active': {
+          color: token('color.link.pressed', B500)
+        },
+        ':hover': {
+          color: token('color.link', B400),
+          textDecoration: 'underline'
+        }
+      };
+  }
+};
+
+const getTruncateStyles = (maxLines, lineHeight = 16) => ({
+  display: '-webkit-box',
+  flex: '1 1 auto',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  wordBreak: 'break-word',
+  WebkitLineClamp: maxLines,
+  WebkitBoxOrient: 'vertical',
+  // Fallback options.
+  maxHeight: `${(maxLines * lineHeight).toFixed(3)}em`
+});
+
+const getStyles = (size, theme, maxLines) => {
+  const sizeStyles = getSizeStyles(size);
+  return css({ ...sizeStyles,
+    ...getTruncateStyles(maxLines, sizeStyles === null || sizeStyles === void 0 ? void 0 : sizeStyles.lineHeight),
+    // Theme should be last to be spread because it contains override values
+    ...getThemeStyles(theme)
+  });
+};
+
+const getMaxLines = maxLines => {
+  if (maxLines > MAXIMUM_MAX_LINES) {
+    return DEFAULT_MAX_LINES;
+  }
+
+  if (maxLines < MINIMUM_MAX_LINES) {
+    return MINIMUM_MAX_LINES;
+  }
+
+  return maxLines;
+};
+
+const Link = ({
+  maxLines = DEFAULT_MAX_LINES,
+  size = SmartLinkSize.Medium,
+  testId = 'smart-element-link',
+  text,
+  theme = SmartLinkTheme.Link,
+  url
+}) => jsx("a", {
+  css: getStyles(size, theme, getMaxLines(maxLines)),
+  href: url,
+  "data-smart-element-link": true,
+  "data-testid": testId
+}, text);
+
+export default Link;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

package/dist/esm/client/api.js

@@ -1,15 +1,16 @@
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _createClass from "@babel/runtime/helpers/createClass";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _wrapNativeSuper from "@babel/runtime/helpers/wrapNativeSuper";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -27,7 +28,7 @@ export var NetworkError = /*#__PURE__*/function (_Error) {
     return _super.call(this, error);
   }
 
-  return NetworkError;
+  return _createClass(NetworkError);
 }( /*#__PURE__*/_wrapNativeSuper(Error));
 export function request(_x, _x2, _x3, _x4) {
   return _request.apply(this, arguments);

package/dist/esm/client/errors.js

@@ -1,3 +1,4 @@
+import _createClass from "@babel/runtime/helpers/createClass";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
@@ -35,5 +36,5 @@ export var APIError = /*#__PURE__*/function (_Error) {
     return _this;
   }
 
-  return APIError;
+  return _createClass(APIError);
 }( /*#__PURE__*/_wrapNativeSuper(Error));

package/dist/esm/constants.js

@@ -0,0 +1,67 @@
+export var SmartLinkDirection;
+
+(function (SmartLinkDirection) {
+  SmartLinkDirection["Horizontal"] = "Horizontal";
+  SmartLinkDirection["Vertical"] = "Vertical";
+})(SmartLinkDirection || (SmartLinkDirection = {}));
+
+export var SmartLinkSize;
+
+(function (SmartLinkSize) {
+  SmartLinkSize["XLarge"] = "xlarge";
+  SmartLinkSize["Large"] = "large";
+  SmartLinkSize["Medium"] = "medium";
+  SmartLinkSize["Small"] = "small";
+})(SmartLinkSize || (SmartLinkSize = {}));
+
+export var SmartLinkTheme;
+
+(function (SmartLinkTheme) {
+  SmartLinkTheme["Black"] = "Black";
+  SmartLinkTheme["Link"] = "Link";
+})(SmartLinkTheme || (SmartLinkTheme = {}));
+
+export var IconType;
+
+(function (IconType) {
+  IconType["Archive"] = "FileType:Archive";
+  IconType["Audio"] = "FileType:Audio";
+  IconType["Blog"] = "FileType:Blog";
+  IconType["Code"] = "FileType:Code";
+  IconType["Document"] = "FileType:Document";
+  IconType["Executable"] = "FileType:Executable";
+  IconType["File"] = "FileType:File";
+  IconType["Folder"] = "FileType:Folder";
+  IconType["Generic"] = "FileType:Generic";
+  IconType["GIF"] = "FileType:GIF";
+  IconType["GoogleDocs"] = "FileType:GoogleDocs";
+  IconType["GoogleForms"] = "FileType:GoogleForms";
+  IconType["GoogleSheets"] = "FileType:GoogleSheets";
+  IconType["GoogleSlides"] = "FileType:GoogleSlides";
+  IconType["Image"] = "FileType.Image";
+  IconType["MSExcel"] = "FileType:Excel";
+  IconType["MSPowerpoint"] = "FileType:Powerpoint";
+  IconType["MSWord"] = "FileType:WordDocument";
+  IconType["PDF"] = "FileType:PDF";
+  IconType["Presentation"] = "FileType:Presentation";
+  IconType["Sketch"] = "FileType:Sketch";
+  IconType["Spreadsheet"] = "FileType:Spreadsheet";
+  IconType["Template"] = "FileType:Template";
+  IconType["Video"] = "FileType:Video";
+  IconType["Branch"] = "BitBucket:Branch";
+  IconType["Commit"] = "BitBucket:Commit";
+  IconType["Project"] = "BitBucket:Project";
+  IconType["PullRequest"] = "BitBucket:PullRequest";
+  IconType["Repo"] = "BitBucket:Repo";
+  IconType["Bug"] = "Jira:Bug";
+  IconType["Change"] = "Jira:Change";
+  IconType["Epic"] = "Jira:Epic";
+  IconType["Incident"] = "Jira:Incident";
+  IconType["Problem"] = "Jira:Problem";
+  IconType["ServiceRequest"] = "Jira:ServiceRequest";
+  IconType["Story"] = "Jira:Story";
+  IconType["SubTask"] = "Jira:SubTask";
+  IconType["Task"] = "Jira:Task";
+  IconType["Confluence"] = "Provider:Confluence";
+  IconType["Jira"] = "Provider:Jira";
+})(IconType || (IconType = {}));

package/dist/esm/extractors/block/index.js

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import { extractLink, extractTitle, extractTitleTextColor, extractSummary } from '../common/primitives';
 import { extractLozenge } from '../common/lozenge';
@@ -44,10 +44,10 @@ export var extractBlockActions = function extractBlockActions(props, jsonLd, opt
   if (opts) {
     var handleInvoke = opts.handleInvoke,
         handleAnalytics = opts.handleAnalytics,
-        definitionId = opts.definitionId,
+        extensionKey = opts.extensionKey,
         testId = opts.testId;
     var actions = extractActions(jsonLd, handleInvoke);
-    var previewAction = extractPreviewAction(definitionId, props, jsonLd, handleInvoke, handleAnalytics, testId, platform); // The previewAction should always be the last action
+    var previewAction = extractPreviewAction(extensionKey, props, jsonLd, handleInvoke, handleAnalytics, testId, platform); // The previewAction should always be the last action
 
     if (previewAction) {
       actions.push(previewAction);

package/dist/esm/extractors/common/actions/extractActions.js

@@ -1,9 +1,9 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import { DownloadAction, ViewAction } from '@atlaskit/media-ui';
 

package/dist/esm/extractors/common/actions/extractPreviewAction.js

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import { PreviewAction } from '@atlaskit/media-ui';
 import { uiRenderSuccessEvent, uiRenderFailedEvent } from '../../../utils/analytics';
@@ -53,7 +53,7 @@ var getInvokeOpts = function getInvokeOpts(key, action, source) {
 };
 
 export var extractPreviewAction = function extractPreviewAction() {
-  var definitionId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'empty-object-provider';
+  var extensionKey = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'empty-object-provider';
   var viewProps = arguments.length > 1 ? arguments[1] : undefined;
   var jsonLd = arguments.length > 2 ? arguments[2] : undefined;
   var handleInvoke = arguments.length > 3 ? arguments[3] : undefined;
@@ -69,7 +69,7 @@ export var extractPreviewAction = function extractPreviewAction() {
 
   if (metadataFromJsonLd.src) {
     // Build action using instrumentation hooks.
-    var key = definitionId;
+    var key = extensionKey;
     var previewAction = PreviewAction(_objectSpread(_objectSpread({}, metadata), {}, {
       testId: testId,
       onOpen: function onOpen() {

package/dist/esm/extractors/common/byline/extractByline.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { FormattedRelative } from 'react-intl';
+import { FormattedRelativeTime } from 'react-intl-next';
+import { selectUnit } from '@formatjs/intl-utils';
 import { extractPersonUpdatedBy } from '../person/extractPersonUpdatedBy';
 import { extractPersonCreatedBy } from '../person/extractPersonCreatedBy';
 import { extractDateCreated } from '../date/extractDateCreated';
@@ -9,15 +10,25 @@ export var extractByline = function extractByline(jsonLd) {
   var createdAt = extractDateCreated(jsonLd);
 
   if (updatedAt) {
+    var _selectUnit = selectUnit(new Date(updatedAt).getTime()),
+        value = _selectUnit.value,
+        unit = _selectUnit.unit;
+
     var updatedBy = extractPersonUpdatedBy(jsonLd);
-    return /*#__PURE__*/React.createElement("span", null, "Updated ", updatedBy && "by ".concat(updatedBy.name), ' ', /*#__PURE__*/React.createElement(FormattedRelative, {
-      value: updatedAt
+    return /*#__PURE__*/React.createElement("span", null, "Updated ", updatedBy && "by ".concat(updatedBy.name), ' ', /*#__PURE__*/React.createElement(FormattedRelativeTime, {
+      value: value,
+      unit: unit
     }));
   } else if (createdAt) {
+    var _selectUnit2 = selectUnit(new Date(createdAt).getTime()),
+        _value = _selectUnit2.value,
+        _unit = _selectUnit2.unit;
+
     var createdBy = extractPersonCreatedBy(jsonLd);
     var createdByPerson = extractFirstPerson(createdBy);
-    return /*#__PURE__*/React.createElement("span", null, "Created ", createdByPerson && "by ".concat(createdByPerson.name), ' ', /*#__PURE__*/React.createElement(FormattedRelative, {
-      value: createdAt
+    return /*#__PURE__*/React.createElement("span", null, "Created ", createdByPerson && "by ".concat(createdByPerson.name), ' ', /*#__PURE__*/React.createElement(FormattedRelativeTime, {
+      value: _value,
+      unit: _unit
     }));
   }
 };