@atlaskit/smart-card 18.0.19 → 18.0.22

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/smart-card
 
+## 18.0.22
+
+### Patch Changes
+
+- [`8b9f08cbc1c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8b9f08cbc1c) - [ux] Default representation for Slack links was changed from 'block' to 'inline'
+- [`f4811ca8c6a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f4811ca8c6a) - add provider based metadata to hover previews
+
+## 18.0.21
+
+### Patch Changes
+
+- [`ffaf122189e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ffaf122189e) - Flexible UI: TitleBlock is now composory to display Flexible UI on Smart Links
+
+## 18.0.20
+
+### Patch Changes
+
+- [`451f99db28a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/451f99db28a) - Flexible UI: Improve link title truncate to support url string
+
 ## 18.0.19
 
 ### Patch Changes

package/dist/cjs/extractors/hover/extractMetadata.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.extractMetadata = void 0;
+
+var _constants = require("../../constants");
+
+var elementNamesToItems = function elementNamesToItems(elementNames) {
+  return elementNames.filter(function (element) {
+    return element in _constants.ElementName;
+  }).map(function (elementName) {
+    return {
+      name: elementName,
+      testId: "".concat(elementName.toLowerCase(), "-metadata-element")
+    };
+  });
+};
+
+var extractMetadata = function extractMetadata(jsonLd) {
+  var _jsonLd$metadata, _metadata$primary, _metadata$secondary;
+
+  var metadata = (_jsonLd$metadata = jsonLd.metadata) !== null && _jsonLd$metadata !== void 0 ? _jsonLd$metadata : [];
+  return {
+    primary: elementNamesToItems((_metadata$primary = metadata.primary) !== null && _metadata$primary !== void 0 ? _metadata$primary : []),
+    secondary: elementNamesToItems((_metadata$secondary = metadata.secondary) !== null && _metadata$secondary !== void 0 ? _metadata$secondary : [])
+  };
+};
+
+exports.extractMetadata = extractMetadata;

package/dist/cjs/providers/editor/transformer.js

@@ -23,10 +23,6 @@ var isJwmView = function isJwmView(url) {
   return url.match(/^https:\/\/.*?\/jira\/core\/projects\/[^\/]+?\/(timeline|calendar|list|board)\/?/);
 };
 
-var isSlackMessage = function isSlackMessage(url) {
-  return url.match(/^https:\/\/.+?\.slack\.com\/archives\/[CG][A-Z0-9]+\/p[0-9]+(\?.*)?$/);
-};
-
 var Transformer = /*#__PURE__*/function () {
   function Transformer() {
     (0, _classCallCheck2.default)(this, Transformer);
@@ -68,8 +64,6 @@ var Transformer = /*#__PURE__*/function () {
     value: function toAdf(url, appearance) {
       if (isJiraRoadMap(url) || isPolarisView(url) || isJwmView(url)) {
         return this.buildEmbedAdf(url);
-      } else if (isSlackMessage(url)) {
-        return this.buildBlockAdf(url);
       } else {
         switch (appearance) {
           case 'inline':

package/dist/cjs/utils/flexible.js

@@ -21,7 +21,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var isFlexibleUiCard = function isFlexibleUiCard(children) {
   if (children && _react.default.Children.toArray(children).some(function (child) {
-    return isFlexibleUiBlock(child);
+    return isFlexibleUiTitleBlock(child);
   })) {
     return true;
   }

package/dist/cjs/version.json

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

package/dist/cjs/view/FlexibleCard/components/elements/link/index.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.default = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _core = require("@emotion/core");
 
@@ -23,6 +25,10 @@ var _token = require("../../../../../utils/token");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
+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; }
+
 var DEFAULT_MAX_LINES = 2;
 var MAXIMUM_MAX_LINES = 2;
 var MINIMUM_MAX_LINES = 1;
@@ -40,9 +46,9 @@ var getThemeStyles = function getThemeStyles(theme) {
   }
 };
 
-var getAnchorStyles = function getAnchorStyles(size, theme, maxLines) {
+var getAnchorStyles = function getAnchorStyles(size, theme, maxLines, hasSpace) {
   var sizeStyles = (0, _utils.getLinkSizeStyles)(size);
-  return (0, _core.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    flex: 1 1 auto;\n    ", "\n    ", "\n    // Theme should be last to be spread because it contains override values\n    ", "\n  "])), sizeStyles, (0, _utils.getTruncateStyles)(maxLines, (0, _utils.getLinkLineHeight)(size)), getThemeStyles(theme));
+  return (0, _core.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    flex: 1 1 auto;\n    ", "\n    ", "\n    // Theme should be last to be spread because it contains override values\n    ", "\n  "])), sizeStyles, (0, _utils.getTruncateStyles)(maxLines, (0, _utils.getLinkLineHeight)(size), hasSpace ? 'break-word' : 'break-all'), getThemeStyles(theme));
 };
 
 var getMaxLines = function getMaxLines(maxLines) {
@@ -78,6 +84,9 @@ var Link = function Link(_ref) {
       url = _ref.url,
       onClick = _ref.onClick,
       target = _ref.target;
+  var hasSpace = (0, _react.useMemo)(function () {
+    return text ? (0, _utils.hasWhiteSpace)(text) : false;
+  }, [text]);
   return (0, _core.jsx)("span", {
     css: containerStyles
   }, (0, _core.jsx)(_tooltip.default, {
@@ -85,7 +94,7 @@ var Link = function Link(_ref) {
     testId: "".concat(testId, "-tooltip"),
     tag: "span"
   }, (0, _core.jsx)("a", {
-    css: [getAnchorStyles(size, theme, getMaxLines(maxLines)), overrideCss],
+    css: [getAnchorStyles(size, theme, getMaxLines(maxLines), hasSpace), overrideCss],
     "data-smart-element-link": true,
     "data-testid": testId,
     onClick: onClick,

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTruncateStyles = exports.getMaxLines = exports.getLinkSizeStyles = exports.getLinkLineHeight = exports.getIconWidth = exports.getIconSizeStyles = exports.getFormattedMessage = void 0;
+exports.hasWhiteSpace = exports.getTruncateStyles = exports.getMaxLines = exports.getLinkSizeStyles = exports.getLinkLineHeight = exports.getIconWidth = exports.getIconSizeStyles = exports.getFormattedMessage = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -111,7 +111,14 @@ exports.getMaxLines = getMaxLines;
 
 var getTruncateStyles = function getTruncateStyles(maxLines) {
   var lineHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '1rem';
-  return (0, _core.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    display: -webkit-box;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: break-word;\n    -webkit-line-clamp: ", ";\n    -webkit-box-orient: vertical;\n    // Fallback options\n    max-height: calc(", " * ", ");\n  "])), maxLines, maxLines, lineHeight);
+  var wordBreak = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'break-word';
+  return (0, _core.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    display: -webkit-box;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: ", ";\n    -webkit-line-clamp: ", ";\n    -webkit-box-orient: vertical;\n    // Fallback options\n    max-height: calc(", " * ", ");\n  "])), wordBreak, maxLines, maxLines, lineHeight);
 };
 
-exports.getTruncateStyles = getTruncateStyles;
+exports.getTruncateStyles = getTruncateStyles;
+
+var hasWhiteSpace = function hasWhiteSpace(str) {
+  return str.search(/\s/) >= 0;
+};
+
+exports.hasWhiteSpace = hasWhiteSpace;

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

@@ -41,6 +41,10 @@ var _analytics2 = require("../../state/analytics");
 
 var _helpers = require("../../state/helpers");
 
+var _extractMetadata = require("../../extractors/hover/extractMetadata");
+
+var _utils = require("./utils");
+
 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; }
@@ -134,7 +138,9 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
     };
   }, [url, definitionId, extensionKey, analytics]);
 
-  var cardComponent = function cardComponent() {
+  var CardComponent = function CardComponent() {
+    //TODO: EDM-3224 deleted simulated and use real JsonLd
+    var metadataElements = (0, _extractMetadata.extractMetadata)((0, _utils.getSimulatedMetadata)(extensionKey));
     return (0, _core.jsx)("div", {
       onMouseEnter: initShowCard,
       onMouseLeave: initHideCard,
@@ -148,6 +154,9 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
       }
     }, (0, _core.jsx)(_blocks.TitleBlock, {
       actions: [openAction]
+    }), (0, _core.jsx)(_blocks.MetadataBlock, {
+      primary: metadataElements.primary,
+      secondary: metadataElements.secondary
     }), (0, _core.jsx)(_blocks.SnippetBlock, null), (0, _core.jsx)(_blocks.FooterBlock, {
       actions: smartlinkActions
     })));
@@ -161,7 +170,7 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
     isOpen: isOpen,
     onClose: onClose,
     placement: "bottom-start",
-    content: cardComponent,
+    content: CardComponent,
     trigger: function trigger(triggerProps) {
       return (0, _core.jsx)("span", (0, _extends2.default)({}, triggerProps, {
         onMouseEnter: initShowCard,

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

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSimulatedMetadata = void 0;
+
+var getSimulatedMetadata = function getSimulatedMetadata(extensionKey) {
+  switch (extensionKey) {
+    case 'confluence-object-provider':
+      return {
+        metadata: {
+          primary: ['AuthorGroup', 'CreatedBy', 'CommentCount', 'ReactCount'],
+          secondary: []
+        }
+      };
+
+    case 'jira-object-provider':
+      return {
+        metadata: {
+          primary: ['AuthorGroup', 'State', 'Priority'],
+          secondary: []
+        }
+      };
+
+    default:
+      return {
+        metadata: {
+          primary: ['ModifiedOn'],
+          secondary: []
+        }
+      };
+  }
+};
+
+exports.getSimulatedMetadata = getSimulatedMetadata;

package/dist/es2019/extractors/hover/extractMetadata.js

@@ -0,0 +1,18 @@
+import { ElementName } from '../../constants';
+
+const elementNamesToItems = elementNames => {
+  return elementNames.filter(element => element in ElementName).map(elementName => ({
+    name: elementName,
+    testId: `${elementName.toLowerCase()}-metadata-element`
+  }));
+};
+
+export const extractMetadata = jsonLd => {
+  var _jsonLd$metadata, _metadata$primary, _metadata$secondary;
+
+  const metadata = (_jsonLd$metadata = jsonLd.metadata) !== null && _jsonLd$metadata !== void 0 ? _jsonLd$metadata : [];
+  return {
+    primary: elementNamesToItems((_metadata$primary = metadata.primary) !== null && _metadata$primary !== void 0 ? _metadata$primary : []),
+    secondary: elementNamesToItems((_metadata$secondary = metadata.secondary) !== null && _metadata$secondary !== void 0 ? _metadata$secondary : [])
+  };
+};

package/dist/es2019/providers/editor/transformer.js

@@ -4,8 +4,6 @@ const isPolarisView = url => url.match(/^https:\/\/.*?\/jira\/polaris\/projects\
 
 const isJwmView = url => url.match(/^https:\/\/.*?\/jira\/core\/projects\/[^\/]+?\/(timeline|calendar|list|board)\/?/);
 
-const isSlackMessage = url => url.match(/^https:\/\/.+?\.slack\.com\/archives\/[CG][A-Z0-9]+\/p[0-9]+(\?.*)?$/);
-
 export class Transformer {
   buildInlineAdf(url) {
     return {
@@ -38,8 +36,6 @@ export class Transformer {
   toAdf(url, appearance) {
     if (isJiraRoadMap(url) || isPolarisView(url) || isJwmView(url)) {
       return this.buildEmbedAdf(url);
-    } else if (isSlackMessage(url)) {
-      return this.buildBlockAdf(url);
     } else {
       switch (appearance) {
         case 'inline':

package/dist/es2019/utils/flexible.js

@@ -3,7 +3,7 @@ import * as Blocks from '../view/FlexibleCard/components/blocks';
 import { TitleBlock } from '../view/FlexibleCard/components/blocks';
 import * as Elements from '../view/FlexibleCard/components/elements';
 export const isFlexibleUiCard = children => {
-  if (children && React.Children.toArray(children).some(child => isFlexibleUiBlock(child))) {
+  if (children && React.Children.toArray(children).some(child => isFlexibleUiTitleBlock(child))) {
     return true;
   }
 

package/dist/es2019/version.json

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

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

@@ -1,9 +1,9 @@
 /** @jsx jsx */
-import React from 'react';
+import React, { useMemo } from 'react';
 import { css, jsx } from '@emotion/core';
 import Tooltip from '@atlaskit/tooltip';
 import { SmartLinkSize, SmartLinkTheme } from '../../../../../constants';
-import { getLinkLineHeight, getLinkSizeStyles, getTruncateStyles } from '../../utils';
+import { getLinkLineHeight, getLinkSizeStyles, getTruncateStyles, hasWhiteSpace } from '../../utils';
 import { tokens } from '../../../../../utils/token';
 const DEFAULT_MAX_LINES = 2;
 const MAXIMUM_MAX_LINES = 2;
@@ -42,12 +42,12 @@ const getThemeStyles = theme => {
   }
 };
 
-const getAnchorStyles = (size, theme, maxLines) => {
+const getAnchorStyles = (size, theme, maxLines, hasSpace) => {
   const sizeStyles = getLinkSizeStyles(size);
   return css`
     flex: 1 1 auto;
     ${sizeStyles}
-    ${getTruncateStyles(maxLines, getLinkLineHeight(size))}
+    ${getTruncateStyles(maxLines, getLinkLineHeight(size), hasSpace ? 'break-word' : 'break-all')}
     // Theme should be last to be spread because it contains override values
     ${getThemeStyles(theme)}
   `;
@@ -82,19 +82,22 @@ const Link = ({
   url,
   onClick,
   target
-}) => jsx("span", {
-  css: containerStyles
-}, jsx(Tooltip, {
-  content: text,
-  testId: `${testId}-tooltip`,
-  tag: "span"
-}, jsx("a", {
-  css: [getAnchorStyles(size, theme, getMaxLines(maxLines)), overrideCss],
-  "data-smart-element-link": true,
-  "data-testid": testId,
-  onClick: onClick,
-  href: url,
-  target: target || '_blank'
-}, text)));
+}) => {
+  const hasSpace = useMemo(() => text ? hasWhiteSpace(text) : false, [text]);
+  return jsx("span", {
+    css: containerStyles
+  }, jsx(Tooltip, {
+    content: text,
+    testId: `${testId}-tooltip`,
+    tag: "span"
+  }, jsx("a", {
+    css: [getAnchorStyles(size, theme, getMaxLines(maxLines), hasSpace), overrideCss],
+    "data-smart-element-link": true,
+    "data-testid": testId,
+    onClick: onClick,
+    href: url,
+    target: target || '_blank'
+  }, text)));
+};
 
 export default Link;

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

@@ -107,13 +107,16 @@ export const getMaxLines = (value, defaultValue, max, min) => {
 
   return value;
 };
-export const getTruncateStyles = (maxLines, lineHeight = '1rem') => css`
+export const getTruncateStyles = (maxLines, lineHeight = '1rem', wordBreak = 'break-word') => css`
     display: -webkit-box;
     overflow: hidden;
     text-overflow: ellipsis;
-    word-break: break-word;
+    word-break: ${wordBreak};
     -webkit-line-clamp: ${maxLines};
     -webkit-box-orient: vertical;
     // Fallback options
     max-height: calc(${maxLines} * ${lineHeight});
-  `;
+  `;
+export const hasWhiteSpace = str => {
+  return str.search(/\s/) >= 0;
+};

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

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import React, { useCallback, useRef, useMemo } from 'react';
-import { TitleBlock, SnippetBlock, FooterBlock } from '../FlexibleCard/components/blocks';
+import { TitleBlock, SnippetBlock, FooterBlock, MetadataBlock } from '../FlexibleCard/components/blocks';
 import { Card } from '../Card';
 import Popup from '@atlaskit/popup';
 import { SmartLinkSize, ActionName } from '../../constants';
@@ -15,6 +15,8 @@ import { fireSmartLinkEvent } from '../../utils/analytics';
 import { useSmartCardState as useLinkState } from '../../state/store';
 import { useSmartLinkAnalytics } from '../../state/analytics';
 import { getExtensionKey, getDefinitionId } from '../../state/helpers';
+import { extractMetadata } from '../../extractors/hover/extractMetadata';
+import { getSimulatedMetadata } from './utils';
 export const HoverCardComponent = ({
   children,
   url,
@@ -89,22 +91,29 @@ export const HoverCardComponent = ({
     };
   }, [url, definitionId, extensionKey, analytics]);
 
-  const cardComponent = () => jsx("div", {
-    onMouseEnter: initShowCard,
-    onMouseLeave: initHideCard,
-    css: HoverCardContainer
-  }, jsx(Card, {
-    appearance: "block",
-    url: url,
-    ui: {
-      hideElevation: true,
-      size: SmartLinkSize.Large
-    }
-  }, jsx(TitleBlock, {
-    actions: [openAction]
-  }), jsx(SnippetBlock, null), jsx(FooterBlock, {
-    actions: smartlinkActions
-  })));
+  const CardComponent = () => {
+    //TODO: EDM-3224 deleted simulated and use real JsonLd
+    const metadataElements = extractMetadata(getSimulatedMetadata(extensionKey));
+    return jsx("div", {
+      onMouseEnter: initShowCard,
+      onMouseLeave: initHideCard,
+      css: HoverCardContainer
+    }, jsx(Card, {
+      appearance: "block",
+      url: url,
+      ui: {
+        hideElevation: true,
+        size: SmartLinkSize.Large
+      }
+    }, jsx(TitleBlock, {
+      actions: [openAction]
+    }), jsx(MetadataBlock, {
+      primary: metadataElements.primary,
+      secondary: metadataElements.secondary
+    }), jsx(SnippetBlock, null), jsx(FooterBlock, {
+      actions: smartlinkActions
+    })));
+  };
 
   const onClose = useCallback(() => setIsOpen(false), []);
   return jsx(Popup, {
@@ -112,7 +121,7 @@ export const HoverCardComponent = ({
     isOpen: isOpen,
     onClose: onClose,
     placement: "bottom-start",
-    content: cardComponent,
+    content: CardComponent,
     trigger: triggerProps => jsx("span", _extends({}, triggerProps, {
       onMouseEnter: initShowCard,
       onMouseLeave: initHideCard

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

@@ -0,0 +1,27 @@
+export const getSimulatedMetadata = extensionKey => {
+  switch (extensionKey) {
+    case 'confluence-object-provider':
+      return {
+        metadata: {
+          primary: ['AuthorGroup', 'CreatedBy', 'CommentCount', 'ReactCount'],
+          secondary: []
+        }
+      };
+
+    case 'jira-object-provider':
+      return {
+        metadata: {
+          primary: ['AuthorGroup', 'State', 'Priority'],
+          secondary: []
+        }
+      };
+
+    default:
+      return {
+        metadata: {
+          primary: ['ModifiedOn'],
+          secondary: []
+        }
+      };
+  }
+};

package/dist/esm/extractors/hover/extractMetadata.js

@@ -0,0 +1,22 @@
+import { ElementName } from '../../constants';
+
+var elementNamesToItems = function elementNamesToItems(elementNames) {
+  return elementNames.filter(function (element) {
+    return element in ElementName;
+  }).map(function (elementName) {
+    return {
+      name: elementName,
+      testId: "".concat(elementName.toLowerCase(), "-metadata-element")
+    };
+  });
+};
+
+export var extractMetadata = function extractMetadata(jsonLd) {
+  var _jsonLd$metadata, _metadata$primary, _metadata$secondary;
+
+  var metadata = (_jsonLd$metadata = jsonLd.metadata) !== null && _jsonLd$metadata !== void 0 ? _jsonLd$metadata : [];
+  return {
+    primary: elementNamesToItems((_metadata$primary = metadata.primary) !== null && _metadata$primary !== void 0 ? _metadata$primary : []),
+    secondary: elementNamesToItems((_metadata$secondary = metadata.secondary) !== null && _metadata$secondary !== void 0 ? _metadata$secondary : [])
+  };
+};

package/dist/esm/providers/editor/transformer.js

@@ -13,10 +13,6 @@ var isJwmView = function isJwmView(url) {
   return url.match(/^https:\/\/.*?\/jira\/core\/projects\/[^\/]+?\/(timeline|calendar|list|board)\/?/);
 };
 
-var isSlackMessage = function isSlackMessage(url) {
-  return url.match(/^https:\/\/.+?\.slack\.com\/archives\/[CG][A-Z0-9]+\/p[0-9]+(\?.*)?$/);
-};
-
 export var Transformer = /*#__PURE__*/function () {
   function Transformer() {
     _classCallCheck(this, Transformer);
@@ -58,8 +54,6 @@ export var Transformer = /*#__PURE__*/function () {
     value: function toAdf(url, appearance) {
       if (isJiraRoadMap(url) || isPolarisView(url) || isJwmView(url)) {
         return this.buildEmbedAdf(url);
-      } else if (isSlackMessage(url)) {
-        return this.buildBlockAdf(url);
       } else {
         switch (appearance) {
           case 'inline':

package/dist/esm/utils/flexible.js

@@ -4,7 +4,7 @@ import { TitleBlock } from '../view/FlexibleCard/components/blocks';
 import * as Elements from '../view/FlexibleCard/components/elements';
 export var isFlexibleUiCard = function isFlexibleUiCard(children) {
   if (children && React.Children.toArray(children).some(function (child) {
-    return isFlexibleUiBlock(child);
+    return isFlexibleUiTitleBlock(child);
   })) {
     return true;
   }

package/dist/esm/version.json

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

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

@@ -3,11 +3,11 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 /** @jsx jsx */
-import React from 'react';
+import React, { useMemo } from 'react';
 import { css, jsx } from '@emotion/core';
 import Tooltip from '@atlaskit/tooltip';
 import { SmartLinkSize, SmartLinkTheme } from '../../../../../constants';
-import { getLinkLineHeight, getLinkSizeStyles, getTruncateStyles } from '../../utils';
+import { getLinkLineHeight, getLinkSizeStyles, getTruncateStyles, hasWhiteSpace } from '../../utils';
 import { tokens } from '../../../../../utils/token';
 var DEFAULT_MAX_LINES = 2;
 var MAXIMUM_MAX_LINES = 2;
@@ -26,9 +26,9 @@ var getThemeStyles = function getThemeStyles(theme) {
   }
 };
 
-var getAnchorStyles = function getAnchorStyles(size, theme, maxLines) {
+var getAnchorStyles = function getAnchorStyles(size, theme, maxLines, hasSpace) {
   var sizeStyles = getLinkSizeStyles(size);
-  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    flex: 1 1 auto;\n    ", "\n    ", "\n    // Theme should be last to be spread because it contains override values\n    ", "\n  "])), sizeStyles, getTruncateStyles(maxLines, getLinkLineHeight(size)), getThemeStyles(theme));
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    flex: 1 1 auto;\n    ", "\n    ", "\n    // Theme should be last to be spread because it contains override values\n    ", "\n  "])), sizeStyles, getTruncateStyles(maxLines, getLinkLineHeight(size), hasSpace ? 'break-word' : 'break-all'), getThemeStyles(theme));
 };
 
 var getMaxLines = function getMaxLines(maxLines) {
@@ -64,6 +64,9 @@ var Link = function Link(_ref) {
       url = _ref.url,
       onClick = _ref.onClick,
       target = _ref.target;
+  var hasSpace = useMemo(function () {
+    return text ? hasWhiteSpace(text) : false;
+  }, [text]);
   return jsx("span", {
     css: containerStyles
   }, jsx(Tooltip, {
@@ -71,7 +74,7 @@ var Link = function Link(_ref) {
     testId: "".concat(testId, "-tooltip"),
     tag: "span"
   }, jsx("a", {
-    css: [getAnchorStyles(size, theme, getMaxLines(maxLines)), overrideCss],
+    css: [getAnchorStyles(size, theme, getMaxLines(maxLines), hasSpace), overrideCss],
     "data-smart-element-link": true,
     "data-testid": testId,
     onClick: onClick,

package/dist/esm/view/FlexibleCard/components/utils.js

@@ -80,5 +80,9 @@ export var getMaxLines = function getMaxLines(value, defaultValue, max, min) {
 };
 export var getTruncateStyles = function getTruncateStyles(maxLines) {
   var lineHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '1rem';
-  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    display: -webkit-box;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: break-word;\n    -webkit-line-clamp: ", ";\n    -webkit-box-orient: vertical;\n    // Fallback options\n    max-height: calc(", " * ", ");\n  "])), maxLines, maxLines, lineHeight);
+  var wordBreak = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'break-word';
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    display: -webkit-box;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: ", ";\n    -webkit-line-clamp: ", ";\n    -webkit-box-orient: vertical;\n    // Fallback options\n    max-height: calc(", " * ", ");\n  "])), wordBreak, maxLines, maxLines, lineHeight);
+};
+export var hasWhiteSpace = function hasWhiteSpace(str) {
+  return str.search(/\s/) >= 0;
 };

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

@@ -4,7 +4,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import React, { useCallback, useRef, useMemo } from 'react';
-import { TitleBlock, SnippetBlock, FooterBlock } from '../FlexibleCard/components/blocks';
+import { TitleBlock, SnippetBlock, FooterBlock, MetadataBlock } from '../FlexibleCard/components/blocks';
 import { Card } from '../Card';
 import Popup from '@atlaskit/popup';
 import { SmartLinkSize, ActionName } from '../../constants';
@@ -16,6 +16,8 @@ import { fireSmartLinkEvent } from '../../utils/analytics';
 import { useSmartCardState as useLinkState } from '../../state/store';
 import { useSmartLinkAnalytics } from '../../state/analytics';
 import { getExtensionKey, getDefinitionId } from '../../state/helpers';
+import { extractMetadata } from '../../extractors/hover/extractMetadata';
+import { getSimulatedMetadata } from './utils';
 export var HoverCardComponent = function HoverCardComponent(_ref) {
   var children = _ref.children,
       url = _ref.url,
@@ -104,7 +106,9 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
     };
   }, [url, definitionId, extensionKey, analytics]);
 
-  var cardComponent = function cardComponent() {
+  var CardComponent = function CardComponent() {
+    //TODO: EDM-3224 deleted simulated and use real JsonLd
+    var metadataElements = extractMetadata(getSimulatedMetadata(extensionKey));
     return jsx("div", {
       onMouseEnter: initShowCard,
       onMouseLeave: initHideCard,
@@ -118,6 +122,9 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
       }
     }, jsx(TitleBlock, {
       actions: [openAction]
+    }), jsx(MetadataBlock, {
+      primary: metadataElements.primary,
+      secondary: metadataElements.secondary
     }), jsx(SnippetBlock, null), jsx(FooterBlock, {
       actions: smartlinkActions
     })));
@@ -131,7 +138,7 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
     isOpen: isOpen,
     onClose: onClose,
     placement: "bottom-start",
-    content: cardComponent,
+    content: CardComponent,
     trigger: function trigger(triggerProps) {
       return jsx("span", _extends({}, triggerProps, {
         onMouseEnter: initShowCard,

package/dist/esm/view/HoverCard/utils.js

@@ -0,0 +1,27 @@
+export var getSimulatedMetadata = function getSimulatedMetadata(extensionKey) {
+  switch (extensionKey) {
+    case 'confluence-object-provider':
+      return {
+        metadata: {
+          primary: ['AuthorGroup', 'CreatedBy', 'CommentCount', 'ReactCount'],
+          secondary: []
+        }
+      };
+
+    case 'jira-object-provider':
+      return {
+        metadata: {
+          primary: ['AuthorGroup', 'State', 'Priority'],
+          secondary: []
+        }
+      };
+
+    default:
+      return {
+        metadata: {
+          primary: ['ModifiedOn'],
+          secondary: []
+        }
+      };
+  }
+};

package/dist/types/extractors/hover/extractMetadata.d.ts

@@ -0,0 +1,3 @@
+import { MetadataOptions } from '../../view/HoverCard/types';
+import { JsonLd } from 'json-ld-types';
+export declare const extractMetadata: (jsonLd: JsonLd.Primitives.Property<any>) => MetadataOptions;

package/dist/types/view/FlexibleCard/components/utils.d.ts

@@ -8,4 +8,5 @@ export declare const getIconWidth: (size?: SmartLinkSize | undefined) => string;
 export declare const getLinkLineHeight: (size: SmartLinkSize) => string;
 export declare const getLinkSizeStyles: (size: SmartLinkSize) => SerializedStyles;
 export declare const getMaxLines: (value: number, defaultValue: number, max: number, min: number) => number;
-export declare const getTruncateStyles: (maxLines: number, lineHeight?: string) => SerializedStyles;
+export declare const getTruncateStyles: (maxLines: number, lineHeight?: string, wordBreak?: 'break-word' | 'break-all') => SerializedStyles;
+export declare const hasWhiteSpace: (str: string) => boolean;

package/dist/types/view/HoverCard/types.d.ts

@@ -1,6 +1,11 @@
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import { ElementItem } from '../FlexibleCard/components/blocks/types';
 export interface HoverCardProps extends WithAnalyticsEventsProps {
     url: string;
 }
 export declare type PreviewDisplay = 'card' | 'embed';
 export declare type PreviewInvokeMethod = 'keyboard' | 'mouse_hover' | 'mouse_click';
+export interface MetadataOptions {
+    primary: Array<ElementItem>;
+    secondary: Array<ElementItem>;
+}

package/dist/types/view/HoverCard/utils.d.ts

@@ -0,0 +1,2 @@
+import { JsonLd } from 'json-ld-types';
+export declare const getSimulatedMetadata: (extensionKey: string) => JsonLd.Primitives.Property<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "18.0.19",
+  "version": "18.0.22",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"