@atlaskit/smart-card 19.1.16 → 19.1.17

package/dist/esm/i18n/zh_TW.js

@@ -6,152 +6,66 @@
  */
 //Chinese (Traditional)
 export default {
-  'fabric.linking.cannot_connect': '無法連結，請再試一次',
-  'fabric.linking.cannot_find_link': '找不到連結',
-  'fabric.linking.join_to_view': '加入 {context} 以查看此議題',
-  'fabric.linking.create_on': '建立時間：{context}',
-  'fabric.linking.created_by': '建立者：{context}',
-  'fabric.linking.delete': '刪除',
-  'fabric.linking.edit': '編輯',
-  'fabric.linking.forbidden_access': '您的存取遭拒',
-  'fabric.linking.restricted_link': '連結受到限制，請嘗試其他帳戶',
-  'fabric.linking.modified_on': '更新時間：{context}',
-  'fabric.linking.pending_request': '您的存取要求擱置中',
-  'fabric.linking.priority_blocker': '封鎖程式',
-  'fabric.linking.priority_critical': '重要',
-  'fabric.linking.priority_high': '高',
-  'fabric.linking.priority_highest': '最高',
-  'fabric.linking.priority_low': '低',
-  'fabric.linking.priority_lowest': '最低',
-  'fabric.linking.priority_major': '主要',
-  'fabric.linking.priority_medium': '中',
-  'fabric.linking.priority_minor': '次要',
-  'fabric.linking.priority_trivial': '不太重要',
-  'fabric.linking.priority_undefined': '未定義',
-  'fabric.linking.request_access_to_view': '要求存取 {context} 以檢視此議題',
-  'fabric.linking.request_denied': '您的存取要求遭拒',
-  'fabric.linking.updated_by': '修改者：{context}',
-  'fabric.linking.accounts': '帳戶',
   'fabric.linking.actions': '動作',
   'fabric.linking.add_account': '新增帳戶',
-  'fabric.linking.annotate': '加上註解',
-  'fabric.linking.annotate.confirmation.close.anyway': '仍要關閉',
-  'fabric.linking.annotate.confirmation.content': '您有一些未儲存的變更，確定要離開嗎？',
-  'fabric.linking.annotate.confirmation.heading': '未儲存的變更',
-  'fabric.linking.annotate.tool.arrow': '箭頭',
-  'fabric.linking.annotate.tool.blur': '模糊',
-  'fabric.linking.annotate.tool.brush': '筆刷',
-  'fabric.linking.annotate.tool.color': '顏色',
-  'fabric.linking.annotate.tool.line.thickness': '線條粗細',
-  'fabric.linking.annotate.tool.shape': '形狀',
-  'fabric.linking.annotate.tool.text': '文字',
-  'fabric.linking.archive': '封存',
-  'fabric.linking.audio': '音訊',
   'fabric.linking.cancel': '取消',
-  'fabric.linking.cant_preview_file_type': '我們無法預覽此檔案類型。',
-  'fabric.linking.cant_retrieve_files': '唉呦！我們無法擷取任何檔案',
-  'fabric.linking.cant_retrieve_gifs': '唉呦！我們無法擷取任何 GIF',
-  'fabric.linking.change_view': '變更檢視畫面',
-  'fabric.linking.check_your_network': '請檢查您的網路連線',
+  'fabric.linking.cannot_connect': '無法連結，請再試一次',
+  'fabric.linking.cannot_find_link': '找不到連結',
   'fabric.linking.click_to_join': '加入 {context}',
   'fabric.linking.click_to_join_description': '您已獲得核准，因此可以立即加入 {context}。',
   'fabric.linking.close': '關閉',
-  'fabric.linking.close_and_reopen': '請試著關閉此檔案，然後再重新開啟。',
   'fabric.linking.connect_account_description': '我們會開啟新的頁面來協助您連結 {name} 帳戶',
   'fabric.linking.connect_link_account': '連線以預覽',
   'fabric.linking.connect_link_account_card_view': '連結',
   'fabric.linking.connect_link_account_card_view_description': '若要顯示此連結的預覽，請連接您的 {context} 帳戶。',
   'fabric.linking.connect_link_account_card_view_name': '連結 {context} 帳戶',
   'fabric.linking.connect_to': '連結至 {name}',
-  'fabric.linking.could_not_load_editor': '唉呦！我們無法載入編輯器',
-  'fabric.linking.could_not_save_image': '唉呦！我們無法儲存影像',
-  'fabric.linking.couldnt_generate_encrypted_entry_preview': '我們無法預覽加密或以密碼保護的檔案。',
-  'fabric.linking.couldnt_generate_preview': '我們無法為此檔案產生預覽。',
-  'fabric.linking.couldnt_load_file': '我們無法載入檔案。',
   'fabric.linking.couldnt_load_link': '基於不明原因，我們無法載入此連結。',
-  'fabric.linking.creating_preview': '正在建立預覽...',
-  'fabric.linking.default_avatars': '預設顯示圖片',
-  'fabric.linking.disable_fullscreen': '停用全螢幕',
-  'fabric.linking.display_thumbnail': '顯示縮圖',
-  'fabric.linking.document': '文件',
+  'fabric.linking.create_on_absolute': '於 {context} 建立',
+  'fabric.linking.create_on_relative': '建立時間：{context}',
+  'fabric.linking.created_by': '建立者：{context}',
+  'fabric.linking.delete': '刪除',
   'fabric.linking.download': '下載',
-  'fabric.linking.drag_and_drop_images_here': '將影像拖曳至此',
-  'fabric.linking.drag_and_drop_your_files': '將檔案拖曳至任何位置或',
-  'fabric.linking.drag_and_drop_your_files_and_folders': '將檔案和資料夾拖曳至任何位置或',
-  'fabric.linking.drop_your_files': '置放要上傳的檔案',
-  'fabric.linking.drop_your_files_here': '將檔案置放在此',
-  'fabric.linking.email': '電子郵件',
-  'fabric.linking.enable_fullscreen': '啟用全螢幕',
-  'fabric.linking.error_429': '錯誤 429',
-  'fabric.linking.error_generating_preview': '產生預覽時發生錯誤',
-  'fabric.linking.error_hint_critical': '如果問題持續發生，請聯絡支援人員。',
-  'fabric.linking.error_hint_retry': '請再試一次。',
-  'fabric.linking.error_loading_file': '載入檔案時發生錯誤',
-  'fabric.linking.failed_to_load': '無法載入',
-  'fabric.linking.failed_to_upload': '無法上傳',
+  'fabric.linking.edit': '編輯',
+  'fabric.linking.forbidden_access': '您的存取遭拒',
   'fabric.linking.forbidden_description': '您沒有此預覽的存取權。如果您需要存取權，請連絡網站管理員。',
-  'fabric.linking.give_feedback': '提供意見反應',
-  'fabric.linking.image': '影像',
-  'fabric.linking.image_format_invalid_error': '無法載入影像，格式無效。',
-  'fabric.linking.image_size_too_large_error': '影像太大，不得大於 {MAX_SIZE_MB}Mb',
-  'fabric.linking.image_url_invalid_error': '無法載入影像，URL 無效。',
-  'fabric.linking.insert_files': '{0, plural, other {插入 {0} 個檔案}}',
   'fabric.linking.invalid_permissions': '限制連結',
   'fabric.linking.invalid_permissions_description': '您需要請求存取或嘗試不同的帳戶，來檢視此預覽。',
-  'fabric.linking.item_not_found_in_list': '在清單上找不到所選的項目。',
-  'fabric.linking.learn_more': '深入了解',
-  'fabric.linking.load_more_gifs': '載入更多 GIF',
+  'fabric.linking.join_to_view': '加入 {context} 以查看此議題',
   'fabric.linking.loading': '正在載入...',
-  'fabric.linking.loading_file': '正在載入檔案...',
-  'fabric.linking.might_be_a_hiccup': '可能只是出了點小問題。',
-  'fabric.linking.no_gifs_found': '嗨！您找我嗎？',
-  'fabric.linking.no_gifs_found_suggestion': '我們找不到符合「{query}」的項目',
-  'fabric.linking.no_pdf_artifacts': '找不到符合此檔案的 PDF 成品。',
+  'fabric.linking.modified_on_absolute': '更新於 {context}',
+  'fabric.linking.modified_on_relative': '更新時間：{context}',
+  'fabric.linking.more_actions': '更多動作',
   'fabric.linking.not_found_description': '我們找不到此連結。請檢查 URL，然後試著編輯或再次貼上。',
   'fabric.linking.not_found_title': '糟糕，我們找不到此連結！',
-  'fabric.linking.or': '或',
-  'fabric.linking.pause': '暫停',
-  'fabric.linking.play': '播放',
-  'fabric.linking.playback_default_speed': '預設',
-  'fabric.linking.playback_speed': '播放速度',
+  'fabric.linking.pending_request': '您的存取要求擱置中',
   'fabric.linking.preview': '預覽',
-  'fabric.linking.preview_currently_unavailable': '目前無法預覽',
-  'fabric.linking.preview_unavailable': '無法建立預覽',
-  'fabric.linking.recent_uploads': '最近上傳的項目',
-  'fabric.linking.remove_image': '移除影像',
+  'fabric.linking.priority_blocker': '受阻',
+  'fabric.linking.priority_critical': '嚴重',
+  'fabric.linking.priority_high': '高',
+  'fabric.linking.priority_highest': '最高',
+  'fabric.linking.priority_low': '低',
+  'fabric.linking.priority_lowest': '最低',
+  'fabric.linking.priority_major': '主要',
+  'fabric.linking.priority_medium': '中',
+  'fabric.linking.priority_minor': '次要',
+  'fabric.linking.priority_trivial': '不太重要',
+  'fabric.linking.priority_undefined': '未定義',
   'fabric.linking.request_access': '要求存取權',
   'fabric.linking.request_access_description': '要求 {context} 的存取權以檢視此預覽。',
   'fabric.linking.request_access_pending': '存取擱置',
   'fabric.linking.request_access_pending_description': '您的存取要求擱置中。',
+  'fabric.linking.request_access_to_view': '要求存取 {context} 以檢視此議題',
+  'fabric.linking.request_denied': '您的存取要求遭拒',
   'fabric.linking.request_denied_description': '您的存取要求遭到拒絕。如果您仍需要存取權，請連絡網站管理員。',
+  'fabric.linking.restricted_link': '連結受到限制，請嘗試其他帳戶',
   'fabric.linking.retry': '重試',
   'fabric.linking.save': '儲存',
-  'fabric.linking.search': '搜尋',
-  'fabric.linking.search_all_gifs': '搜尋所有 GIF！',
-  'fabric.linking.share_files_instantly': '我們會立即分享',
-  'fabric.linking.skip_backward': '倒退 10 秒',
-  'fabric.linking.skip_forward': '快轉 10 秒',
-  'fabric.linking.something_went_wrong': '發生錯誤。',
   'fabric.linking.srclink': '使用以下檢視：',
   'fabric.linking.srclinkunknown': '檢視原始狀態',
-  'fabric.linking.text': '文字',
   'fabric.linking.try_again': '再試一次',
   'fabric.linking.try_another_account': '使用其他帳戶嘗試',
-  'fabric.linking.try_downloading_file': '嘗試下載檔案來進行檢視。',
-  'fabric.linking.unable_to_annotate_image': '您無法對此影像加上註解',
-  'fabric.linking.unknown': '未知',
   'fabric.linking.unlink_account': '取消帳戶的連結',
-  'fabric.linking.upload': '上傳',
-  'fabric.linking.upload_an_avatar': '上傳圖片',
-  'fabric.linking.upload_file': '上傳檔案',
-  'fabric.linking.upload_file_from': '從 {name} 上傳檔案',
-  'fabric.linking.upload_image': '上傳影像',
-  'fabric.linking.upload_photo': '上傳相片',
-  'fabric.linking.video': '影片',
-  'fabric.linking.view': '檢視',
-  'fabric.linking.viewer_rateLimited': '載入您的檔案時發生問題。',
-  'fabric.linking.webgl_warning_description': '您的瀏覽器不支援 WebGL。使用啟用 WebGL 的瀏覽器來為影像加上註解。',
-  'fabric.linking.zip_entry_load_failed': '我們無法載入該 zip 檔案項目來進行預覽',
-  'fabric.linking.zoom_in': '縮小',
-  'fabric.linking.zoom_out': '放大'
+  'fabric.linking.updated_by': '修改者：{context}',
+  'fabric.linking.view': '檢視'
 };

package/dist/esm/state/analytics/useSmartLinkAnalytics.js

@@ -101,7 +101,7 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchA
           extensionKey: extensionKey,
           invokeType: invokeType
         });
-        dispatchAnalytics(uiActionClickedEvent(actionType, extensionKey, display));
+        dispatchAnalytics(uiActionClickedEvent(id, actionType, extensionKey, display));
       },
 
       /**
@@ -116,7 +116,7 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchA
         var definitionId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : extractedDefinitionId;
         var extensionKey = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : extractedExtensionKey;
         var previewInvokeMethod = arguments.length > 3 ? arguments[3] : undefined;
-        dispatchAnalytics(uiHoverCardOpenLinkClickedEvent(previewDisplay, definitionId, extensionKey, previewInvokeMethod));
+        dispatchAnalytics(uiHoverCardOpenLinkClickedEvent(defaultId, previewDisplay, definitionId, extensionKey, previewInvokeMethod));
       },
 
       /**
@@ -163,11 +163,11 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchA
        * @param previewInvokeMethod How the preview was triggered.
        * @returns
        */
-      hoverCardViewedEvent: function hoverCardViewedEvent(previewDisplay) {
-        var definitionId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : extractedDefinitionId;
-        var extensionKey = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : extractedExtensionKey;
-        var previewInvokeMethod = arguments.length > 3 ? arguments[3] : undefined;
-        return dispatchAnalytics(uiHoverCardViewedEvent(previewDisplay, definitionId, extensionKey, previewInvokeMethod));
+      hoverCardViewedEvent: function hoverCardViewedEvent(previewDisplay, previewInvokeMethod) {
+        var id = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultId;
+        var definitionId = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : extractedDefinitionId;
+        var extensionKey = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : extractedExtensionKey;
+        return dispatchAnalytics(uiHoverCardViewedEvent(id, previewDisplay, definitionId, extensionKey, previewInvokeMethod));
       },
 
       /**
@@ -179,11 +179,11 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchA
        * @param previewInvokeMethod How the preview was triggered.
        * @returns
        */
-      hoverCardDismissedEvent: function hoverCardDismissedEvent(previewDisplay, hoverTime) {
-        var definitionId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : extractedDefinitionId;
-        var extensionKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : extractedExtensionKey;
-        var previewInvokeMethod = arguments.length > 4 ? arguments[4] : undefined;
-        return dispatchAnalytics(uiHoverCardDismissedEvent(previewDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod));
+      hoverCardDismissedEvent: function hoverCardDismissedEvent(previewDisplay, hoverTime, previewInvokeMethod) {
+        var id = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : defaultId;
+        var definitionId = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : extractedDefinitionId;
+        var extensionKey = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : extractedExtensionKey;
+        return dispatchAnalytics(uiHoverCardDismissedEvent(id, previewDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod));
       }
     };
   }, [defaultId, defaultLocation, extractedDefinitionId, extractedExtensionKey, dispatchAnalytics]);

package/dist/esm/state/hooks-external/useSmartLinkActions.js

@@ -34,7 +34,8 @@ export function useSmartLinkActions(_ref) {
         return linkActions.invoke(opts, appearance);
       },
       handleAnalytics: analyticsHandler,
-      extensionKey: getExtensionKey(linkState.details)
+      extensionKey: getExtensionKey(linkState.details),
+      source: appearance
     }, undefined, platform);
 
     if (!cardProperties.actions || cardProperties.actions.length === 0) {

package/dist/esm/utils/analytics/analytics.js

@@ -205,13 +205,14 @@ export var uiCardClickedEvent = function uiCardClickedEvent(id, display, status,
     })
   };
 };
-export var uiActionClickedEvent = function uiActionClickedEvent(actionType, extensionKey, display) {
+export var uiActionClickedEvent = function uiActionClickedEvent(id, actionType, extensionKey, display) {
   return {
     action: 'clicked',
     actionSubject: 'button',
     actionSubjectId: uiActionSubjectIds[actionType],
     eventType: 'ui',
     attributes: _objectSpread(_objectSpread({}, context), {}, {
+      id: id,
       display: display,
       extensionKey: extensionKey || '',
       actionType: actionType
@@ -265,12 +266,13 @@ export var uiRenderFailedEvent = function uiRenderFailedEvent(display, error, er
     }
   };
 };
-export var uiHoverCardViewedEvent = function uiHoverCardViewedEvent(previewDisplay, definitionId, extensionKey, previewInvokeMethod) {
+export var uiHoverCardViewedEvent = function uiHoverCardViewedEvent(id, previewDisplay, definitionId, extensionKey, previewInvokeMethod) {
   return {
     action: 'viewed',
     actionSubject: 'hoverCard',
     eventType: 'ui',
     attributes: _objectSpread(_objectSpread({}, context), {}, {
+      id: id,
       definitionId: definitionId || '',
       extensionKey: extensionKey || '',
       previewDisplay: previewDisplay,
@@ -278,12 +280,13 @@ export var uiHoverCardViewedEvent = function uiHoverCardViewedEvent(previewDispl
     })
   };
 };
-export var uiHoverCardDismissedEvent = function uiHoverCardDismissedEvent(previewDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod) {
+export var uiHoverCardDismissedEvent = function uiHoverCardDismissedEvent(id, previewDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod) {
   return {
     action: 'dismissed',
     actionSubject: 'hoverCard',
     eventType: 'ui',
     attributes: _objectSpread(_objectSpread({}, context), {}, {
+      id: id,
       definitionId: definitionId || '',
       extensionKey: extensionKey || '',
       hoverTime: hoverTime,
@@ -292,13 +295,14 @@ export var uiHoverCardDismissedEvent = function uiHoverCardDismissedEvent(previe
     })
   };
 };
-export var uiHoverCardOpenLinkClickedEvent = function uiHoverCardOpenLinkClickedEvent(previewDisplay, definitionId, extensionKey, previewInvokeMethod) {
+export var uiHoverCardOpenLinkClickedEvent = function uiHoverCardOpenLinkClickedEvent(id, previewDisplay, definitionId, extensionKey, previewInvokeMethod) {
   return {
     action: 'clicked',
     actionSubject: 'button',
     actionSubjectId: 'shortcutGoToLink',
     eventType: 'ui',
     attributes: _objectSpread(_objectSpread({}, context), {}, {
+      id: id,
       definitionId: definitionId || '',
       extensionKey: extensionKey || '',
       previewDisplay: previewDisplay,

package/dist/esm/version.json

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

package/dist/esm/view/HoverCard/components/hover-card-content.js

@@ -0,0 +1,99 @@
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { extractMetadata } from '../../../extractors/hover/extractMetadata';
+import { getSimulatedMetadata, HOVER_CARD_ANALYTICS_DISPLAY } from '../utils';
+import extractPreview from '../../../extractors/flexible/extract-preview';
+import { ActionName, SmartLinkSize, SmartLinkTheme } from '../../../constants';
+import FlexibleCard from '../../FlexibleCard';
+import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock, TitleBlock } from '../../FlexibleCard/components/blocks';
+import { isSpecialEvent } from '../../../utils';
+import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
+import { getExtensionKey } from '../../../state/helpers';
+var flexibleUiOptions = {
+  hideElevation: true,
+  size: SmartLinkSize.Large,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  theme: SmartLinkTheme.Black
+};
+
+var getOpenAction = function getOpenAction(url, analytics) {
+  return {
+    name: ActionName.CustomAction,
+    icon: /*#__PURE__*/React.createElement(ShortcutIcon, {
+      label: "open in new tab",
+      size: "medium"
+    }),
+    iconPosition: 'before',
+    onClick: function onClick() {
+      window.open(url, '_blank');
+      analytics.ui.hoverCardOpenLinkClickedEvent('card');
+    },
+    testId: 'hover-card-open-button'
+  };
+};
+
+var toFooterActions = function toFooterActions(cardActions) {
+  return cardActions.map(function (action) {
+    return {
+      content: action.text,
+      name: ActionName.CustomAction,
+      onClick: function onClick() {
+        return action.invoke();
+      },
+      testId: action.id
+    };
+  });
+};
+
+var HoverCardContent = function HoverCardContent(_ref) {
+  var _cardState$details;
+
+  var analytics = _ref.analytics,
+      _ref$cardActions = _ref.cardActions,
+      cardActions = _ref$cardActions === void 0 ? [] : _ref$cardActions,
+      cardState = _ref.cardState,
+      onResolve = _ref.onResolve,
+      renderers = _ref.renderers,
+      url = _ref.url;
+  useEffect(function () {
+    // Since hover preview only render on resolved status,
+    // there is no need to check for statuses.
+    analytics.ui.renderSuccessEvent(HOVER_CARD_ANALYTICS_DISPLAY, cardState.status);
+  }, [analytics.ui, cardState.status]);
+  var extensionKey = useMemo(function () {
+    return getExtensionKey(cardState.details);
+  }, [cardState.details]);
+  var onClick = useCallback(function (event) {
+    var isModifierKeyPressed = isSpecialEvent(event);
+    analytics.ui.cardClickedEvent(undefined, HOVER_CARD_ANALYTICS_DISPLAY, cardState.status, undefined, undefined, isModifierKeyPressed);
+  }, [cardState.status, analytics.ui]);
+  var titleActions = useMemo(function () {
+    return [getOpenAction(url, analytics)];
+  }, [url, analytics]);
+  var footerActions = useMemo(function () {
+    return toFooterActions(cardActions);
+  }, [cardActions]); //TODO: EDM-3224 deleted simulated and use real JsonLd
+
+  var _extractMetadata = extractMetadata(getSimulatedMetadata(extensionKey)),
+      primary = _extractMetadata.primary,
+      secondary = _extractMetadata.secondary;
+
+  var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
+  var body = data && extractPreview(data) ? /*#__PURE__*/React.createElement(PreviewBlock, null) : /*#__PURE__*/React.createElement(SnippetBlock, null);
+  return /*#__PURE__*/React.createElement(FlexibleCard, {
+    cardState: cardState,
+    onClick: onClick,
+    onResolve: onResolve,
+    renderers: renderers,
+    ui: flexibleUiOptions,
+    url: url
+  }, /*#__PURE__*/React.createElement(TitleBlock, {
+    actions: titleActions
+  }), /*#__PURE__*/React.createElement(MetadataBlock, {
+    primary: primary,
+    secondary: secondary
+  }), body, /*#__PURE__*/React.createElement(FooterBlock, {
+    actions: footerActions
+  }));
+};
+
+export default HoverCardContent;

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

@@ -3,22 +3,17 @@ 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, MetadataBlock, PreviewBlock } from '../FlexibleCard/components/blocks';
-import { Card } from '../Card';
+import React, { useCallback, useRef } from 'react';
 import Popup from '@atlaskit/popup';
-import { SmartLinkSize, ActionName, SmartLinkTheme } from '../../constants';
 import { useSmartLinkActions } from '../../state/hooks-external/useSmartLinkActions';
 import { HoverCardContainer } from './styled';
-import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
-import { withAnalyticsEvents, withAnalyticsContext } from '@atlaskit/analytics-next';
+import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { fireSmartLinkEvent } from '../../utils/analytics';
 import { useSmartCardState as useLinkState } from '../../state/store';
 import { useSmartLinkAnalytics } from '../../state/analytics';
-import { getExtensionKey, getDefinitionId } from '../../state/helpers';
-import { extractMetadata } from '../../extractors/hover/extractMetadata';
-import { getSimulatedMetadata } from './utils';
-import extractPreview from '../../extractors/flexible/extract-preview';
+import { useSmartLinkRenderers } from '../../state/renderers';
+import HoverCardContent from './components/hover-card-content';
+import { HOVER_CARD_ANALYTICS_DISPLAY } from './utils';
 export var HoverCardComponent = function HoverCardComponent(_ref) {
   var children = _ref.children,
       id = _ref.id,
@@ -37,14 +32,9 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
   var fadeOutTimeoutId = useRef();
   var fadeInTimeoutId = useRef();
   var cardOpenTime = useRef();
+  var renderers = useSmartLinkRenderers();
   var linkState = useLinkState(url);
   var analytics = useSmartLinkAnalytics(url, analyticsHandler, id);
-  var extensionKey = useMemo(function () {
-    return getExtensionKey(linkState.details);
-  }, [linkState]);
-  var definitionId = useMemo(function () {
-    return getDefinitionId(linkState.details);
-  }, [linkState]);
   var initHideCard = useCallback(function () {
     if (fadeInTimeoutId.current) {
       clearTimeout(fadeInTimeoutId.current);
@@ -54,12 +44,12 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
       //Check its previously open to avoid firing events when moving between the child and hover card components
       if (isOpen === true && cardOpenTime.current) {
         var hoverTime = Date.now() - cardOpenTime.current;
-        analytics.ui.hoverCardDismissedEvent('card', hoverTime, definitionId, extensionKey, 'mouse_hover');
+        analytics.ui.hoverCardDismissedEvent('card', hoverTime, 'mouse_hover');
       }
 
       setIsOpen(false);
     }, delay);
-  }, [delay, isOpen, definitionId, extensionKey, analytics]);
+  }, [delay, isOpen, analytics.ui]);
   var initShowCard = useCallback(function () {
     if (fadeOutTimeoutId.current) {
       clearTimeout(fadeOutTimeoutId.current);
@@ -69,78 +59,17 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
       //Check if its previously closed to avoid firing events when moving between the child and hover card components
       if (isOpen === false) {
         cardOpenTime.current = Date.now();
-        analytics.ui.hoverCardViewedEvent('card', definitionId, extensionKey, 'mouse_hover');
+        analytics.ui.hoverCardViewedEvent('card', 'mouse_hover');
       }
 
       setIsOpen(true);
     }, delay);
-  }, [delay, isOpen, definitionId, extensionKey, analytics]);
+  }, [delay, isOpen, analytics.ui]);
   var linkActions = useSmartLinkActions({
     url: url,
-    appearance: 'block',
+    appearance: HOVER_CARD_ANALYTICS_DISPLAY,
     analyticsHandler: analyticsHandler
   });
-  var smartlinkActions = useMemo(function () {
-    return linkActions.map(function (action) {
-      return {
-        content: action.text,
-        name: ActionName.CustomAction,
-        onClick: function onClick() {
-          return action.invoke();
-        },
-        testId: action.id
-      };
-    });
-  }, [linkActions]);
-  var openAction = useMemo(function () {
-    return {
-      name: ActionName.CustomAction,
-      icon: jsx(ShortcutIcon, {
-        label: "open in new tab",
-        size: "medium"
-      }),
-      iconPosition: 'before',
-      onClick: function onClick() {
-        window.open(url, '_blank');
-        analytics.ui.hoverCardOpenLinkClickedEvent('card', definitionId, extensionKey);
-      },
-      testId: 'hover-card-open-button'
-    };
-  }, [url, definitionId, extensionKey, analytics]);
-
-  var CardComponent = function CardComponent(_ref2) {
-    var _linkState$details;
-
-    var update = _ref2.update;
-    //TODO: EDM-3224 deleted simulated and use real JsonLd
-    var metadataElements = extractMetadata(getSimulatedMetadata(extensionKey));
-    var linkData = (_linkState$details = linkState.details) === null || _linkState$details === void 0 ? void 0 : _linkState$details.data;
-    var content = extractPreview(linkData) ? jsx(PreviewBlock, null) : jsx(SnippetBlock, null);
-    return jsx("div", {
-      onMouseEnter: initShowCard,
-      onMouseLeave: initHideCard,
-      css: HoverCardContainer
-    }, jsx(Card, {
-      id: id,
-      appearance: "block",
-      url: url,
-      ui: {
-        hideElevation: true,
-        size: SmartLinkSize.Large,
-        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-        theme: SmartLinkTheme.Black
-      },
-      onResolve: update
-    }, jsx(TitleBlock, {
-      actions: [openAction]
-    }), jsx(MetadataBlock, {
-      primary: metadataElements.primary,
-      secondary: metadataElements.secondary
-    }), content, jsx(FooterBlock, {
-      actions: smartlinkActions
-    })));
-  };
-
   var onClose = useCallback(function () {
     return setIsOpen(false);
   }, []);
@@ -149,11 +78,20 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
     isOpen: isOpen,
     onClose: onClose,
     placement: "bottom-start",
-    content: function content(_ref3) {
-      var update = _ref3.update;
-      return jsx(CardComponent, {
-        update: update
-      });
+    content: function content(_ref2) {
+      var update = _ref2.update;
+      return jsx("div", {
+        onMouseEnter: initShowCard,
+        onMouseLeave: initHideCard,
+        css: HoverCardContainer
+      }, jsx(HoverCardContent, {
+        analytics: analytics,
+        cardActions: linkActions,
+        cardState: linkState,
+        onResolve: update,
+        renderers: renderers,
+        url: url
+      }));
     },
     trigger: function trigger(triggerProps) {
       return jsx("span", _extends({}, triggerProps, {

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

@@ -1,3 +1,4 @@
+export var HOVER_CARD_ANALYTICS_DISPLAY = 'flexible';
 export var getSimulatedMetadata = function getSimulatedMetadata() {
   var extensionKey = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
 

package/dist/types/extractors/block/types.d.ts

@@ -1,8 +1,10 @@
 import { InvokeHandler } from '../../model/invoke-handler';
 import { AnalyticsHandler } from '../../utils/types';
+import { CardInnerAppearance } from '../../view/Card/types';
 export interface ExtractBlockOpts {
     handleInvoke: InvokeHandler;
     handleAnalytics: AnalyticsHandler;
     extensionKey?: string;
+    source?: CardInnerAppearance;
     testId?: string;
 }

package/dist/types/extractors/common/actions/extractPreviewAction.d.ts

@@ -1,5 +1,6 @@
 import { JsonLd } from 'json-ld-types';
 import { InvokeHandler } from '../../../model/invoke-handler';
+import { CardInnerAppearance } from '../../../view/Card/types';
 import { AnalyticsHandler } from '../../../utils/types';
 import { BlockCardResolvedViewProps } from '../../../view/BlockCard';
-export declare const extractPreviewAction: (extensionKey: string | undefined, viewProps: BlockCardResolvedViewProps, jsonLd: JsonLd.Data.BaseData, handleInvoke: InvokeHandler, handleAnalytics: AnalyticsHandler, testId?: string | undefined, platform?: JsonLd.Primitives.Platforms | undefined) => import("../../../view/BlockCard/components/Action").ActionProps | undefined;
+export declare const extractPreviewAction: (extensionKey: string | undefined, viewProps: BlockCardResolvedViewProps, jsonLd: JsonLd.Data.BaseData, handleInvoke: InvokeHandler, handleAnalytics: AnalyticsHandler, testId?: string | undefined, platform?: JsonLd.Primitives.Platforms | undefined, source?: CardInnerAppearance | undefined) => import("../../../view/BlockCard/components/Action").ActionProps | undefined;