@atlaskit/smart-card 19.1.1 → 19.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # @atlaskit/smart-card
2
2
 
3
+ ## 19.1.4
4
+
5
+ ### Patch Changes
6
+
7
+ - [`cd2e7183aa5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cd2e7183aa5) - Flexible UI: Fix action tooltips not displayed on hover
8
+
9
+ ## 19.1.3
10
+
11
+ ### Patch Changes
12
+
13
+ - [`3de372f6670`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3de372f6670) - Hover Previews: use black flex-ui theme
14
+
15
+ ## 19.1.2
16
+
17
+ ### Patch Changes
18
+
19
+ - [`3a0fdf3c651`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3a0fdf3c651) - change hover previews to show preview over snippet when its available
20
+
3
21
  ## 19.1.1
4
22
 
5
23
  ### Patch Changes
@@ -68,6 +68,11 @@ var messages = (0, _reactIntlNext.defineMessages)({
68
68
  defaultMessage: 'Updated on {context}',
69
69
  description: 'Indicated when entity was modified (absolute form)'
70
70
  },
71
+ more_actions: {
72
+ id: 'fabric.linking.more_actions',
73
+ defaultMessage: 'More actions',
74
+ description: 'Allows the users to see more link actions'
75
+ },
71
76
  priority_blocker: {
72
77
  id: 'fabric.linking.priority_blocker',
73
78
  defaultMessage: 'Blocker',
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/smart-card",
3
- "version": "19.1.1",
3
+ "version": "19.1.4",
4
4
  "sideEffects": false
5
5
  }
@@ -126,7 +126,8 @@ var Action = function Action(_ref2) {
126
126
  }, content);
127
127
  } else {
128
128
  return (0, _core.jsx)(_tooltip.default, {
129
- content: tooltipMessage
129
+ content: tooltipMessage,
130
+ testId: "".concat(testId, "-tooltip")
130
131
  }, (0, _core.jsx)("div", {
131
132
  css: [getButtonStyle(size, iconOnly), overrideCss],
132
133
  "data-testid": "".concat(testId, "-button-wrapper")
@@ -50,7 +50,7 @@ var actionMappings = (_actionMappings = {}, (0, _defineProperty2.default)(_actio
50
50
  icon: /*#__PURE__*/_react.default.createElement(_cross.default, {
51
51
  label: "Delete"
52
52
  }),
53
- toolTipMessage: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.delete)
53
+ tooltipMessage: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.delete)
54
54
  }
55
55
  }), (0, _defineProperty2.default)(_actionMappings, _constants.ActionName.EditAction, {
56
56
  component: _action.default,
@@ -60,7 +60,7 @@ var actionMappings = (_actionMappings = {}, (0, _defineProperty2.default)(_actio
60
60
  icon: /*#__PURE__*/_react.default.createElement(_edit.default, {
61
61
  label: "Edit"
62
62
  }),
63
- toolTipMessage: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.edit)
63
+ tooltipMessage: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.edit)
64
64
  }
65
65
  }), _actionMappings);
66
66
 
@@ -13,10 +13,14 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
13
13
 
14
14
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
15
15
 
16
+ var _reactIntlNext = require("react-intl-next");
17
+
16
18
  var _core = require("@emotion/core");
17
19
 
18
20
  var _buttonGroup = _interopRequireDefault(require("@atlaskit/button/button-group"));
19
21
 
22
+ var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
23
+
20
24
  var _utils = require("../utils");
21
25
 
22
26
  var _dropdownMenu = _interopRequireDefault(require("@atlaskit/dropdown-menu"));
@@ -31,6 +35,8 @@ var _action = require("../../actions/action");
31
35
 
32
36
  var _token = require("../../../../../utils/token");
33
37
 
38
+ var _messages = require("../../../../../messages");
39
+
34
40
  var _excluded = ["triggerRef"];
35
41
 
36
42
  var _templateObject;
@@ -52,7 +58,8 @@ var ActionGroup = function ActionGroup(_ref) {
52
58
  appearance = _ref.appearance,
53
59
  _ref$visibleButtonsNu = _ref.visibleButtonsNum,
54
60
  visibleButtonsNum = _ref$visibleButtonsNu === void 0 ? 2 : _ref$visibleButtonsNu,
55
- onDropdownOpenChange = _ref.onDropdownOpenChange;
61
+ onDropdownOpenChange = _ref.onDropdownOpenChange,
62
+ testId = _ref.testId;
56
63
  var isMoreThenTwoItems = items.length > visibleButtonsNum;
57
64
  var firstActions = isMoreThenTwoItems ? items.slice(0, visibleButtonsNum - 1) : items;
58
65
  var restActions = isMoreThenTwoItems ? items.slice(visibleButtonsNum - 1) : [];
@@ -67,14 +74,18 @@ var ActionGroup = function ActionGroup(_ref) {
67
74
  trigger: function trigger(_ref3) {
68
75
  var triggerRef = _ref3.triggerRef,
69
76
  props = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
70
- return (0, _core.jsx)(_standardButton.default, (0, _extends2.default)({}, props, {
77
+ return (0, _core.jsx)(_tooltip.default, {
78
+ content: (0, _core.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.more_actions),
79
+ testId: "action-group-more-button-tooltip",
80
+ tag: "span"
81
+ }, (0, _core.jsx)(_standardButton.default, (0, _extends2.default)({}, props, {
71
82
  spacing: _action.sizeToSpacing[size],
72
83
  testId: "action-group-more-button",
73
84
  iconBefore: (0, _core.jsx)(_more.default, {
74
85
  label: "more"
75
86
  }),
76
87
  ref: triggerRef
77
- }));
88
+ })));
78
89
  }
79
90
  }, (0, _utils.renderActionItems)(restActions, size, appearance, true)) : null));
80
91
  };
@@ -45,6 +45,8 @@ var _extractMetadata = require("../../extractors/hover/extractMetadata");
45
45
 
46
46
  var _utils = require("./utils");
47
47
 
48
+ var _extractPreview = _interopRequireDefault(require("../../extractors/flexible/extract-preview"));
49
+
48
50
  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); }
49
51
 
50
52
  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; }
@@ -139,9 +141,13 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
139
141
  }, [url, definitionId, extensionKey, analytics]);
140
142
 
141
143
  var CardComponent = function CardComponent(_ref2) {
144
+ var _linkState$details;
145
+
142
146
  var update = _ref2.update;
143
147
  //TODO: EDM-3224 deleted simulated and use real JsonLd
144
148
  var metadataElements = (0, _extractMetadata.extractMetadata)((0, _utils.getSimulatedMetadata)(extensionKey));
149
+ var linkData = (_linkState$details = linkState.details) === null || _linkState$details === void 0 ? void 0 : _linkState$details.data;
150
+ var content = (0, _extractPreview.default)(linkData) ? (0, _core.jsx)(_blocks.PreviewBlock, null) : (0, _core.jsx)(_blocks.SnippetBlock, null);
145
151
  return (0, _core.jsx)("div", {
146
152
  onMouseEnter: initShowCard,
147
153
  onMouseLeave: initHideCard,
@@ -151,7 +157,9 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
151
157
  url: url,
152
158
  ui: {
153
159
  hideElevation: true,
154
- size: _constants.SmartLinkSize.Large
160
+ size: _constants.SmartLinkSize.Large,
161
+ // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
162
+ theme: _constants.SmartLinkTheme.Black
155
163
  },
156
164
  onResolve: update
157
165
  }, (0, _core.jsx)(_blocks.TitleBlock, {
@@ -159,7 +167,7 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
159
167
  }), (0, _core.jsx)(_blocks.MetadataBlock, {
160
168
  primary: metadataElements.primary,
161
169
  secondary: metadataElements.secondary
162
- }), (0, _core.jsx)(_blocks.SnippetBlock, null), (0, _core.jsx)(_blocks.FooterBlock, {
170
+ }), content, (0, _core.jsx)(_blocks.FooterBlock, {
163
171
  actions: smartlinkActions
164
172
  })));
165
173
  };
@@ -60,6 +60,11 @@ export const messages = defineMessages({
60
60
  defaultMessage: 'Updated on {context}',
61
61
  description: 'Indicated when entity was modified (absolute form)'
62
62
  },
63
+ more_actions: {
64
+ id: 'fabric.linking.more_actions',
65
+ defaultMessage: 'More actions',
66
+ description: 'Allows the users to see more link actions'
67
+ },
63
68
  priority_blocker: {
64
69
  id: 'fabric.linking.priority_blocker',
65
70
  defaultMessage: 'Blocker',
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/smart-card",
3
- "version": "19.1.1",
3
+ "version": "19.1.4",
4
4
  "sideEffects": false
5
5
  }
@@ -129,7 +129,8 @@ const Action = ({
129
129
  }, content);
130
130
  } else {
131
131
  return jsx(Tooltip, {
132
- content: tooltipMessage
132
+ content: tooltipMessage,
133
+ testId: `${testId}-tooltip`
133
134
  }, jsx("div", {
134
135
  css: [getButtonStyle(size, iconOnly), overrideCss],
135
136
  "data-testid": `${testId}-button-wrapper`
@@ -20,7 +20,7 @@ const actionMappings = {
20
20
  icon: /*#__PURE__*/React.createElement(CrossIcon, {
21
21
  label: "Delete"
22
22
  }),
23
- toolTipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.delete)
23
+ tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.delete)
24
24
  }
25
25
  },
26
26
  [ActionName.EditAction]: {
@@ -31,7 +31,7 @@ const actionMappings = {
31
31
  icon: /*#__PURE__*/React.createElement(EditIcon, {
32
32
  label: "Edit"
33
33
  }),
34
- toolTipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.edit)
34
+ tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.edit)
35
35
  }
36
36
  }
37
37
  };
@@ -1,8 +1,10 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
 
3
3
  /** @jsx jsx */
4
+ import { FormattedMessage } from 'react-intl-next';
4
5
  import { css, jsx } from '@emotion/core';
5
6
  import ButtonGroup from '@atlaskit/button/button-group';
7
+ import Tooltip from '@atlaskit/tooltip';
6
8
  import { renderActionItems } from '../utils';
7
9
  import DropdownMenu from '@atlaskit/dropdown-menu';
8
10
  import { SmartLinkSize } from '../../../../../constants';
@@ -10,6 +12,7 @@ import Button from '@atlaskit/button/standard-button';
10
12
  import MoreIcon from '@atlaskit/icon/glyph/more';
11
13
  import { sizeToSpacing } from '../../actions/action';
12
14
  import { tokens } from '../../../../../utils/token';
15
+ import { messages } from '../../../../../messages';
13
16
  const styles = css`
14
17
  display: inline-flex;
15
18
  line-height: 1rem;
@@ -39,7 +42,8 @@ const ActionGroup = ({
39
42
  size = SmartLinkSize.Medium,
40
43
  appearance,
41
44
  visibleButtonsNum = 2,
42
- onDropdownOpenChange
45
+ onDropdownOpenChange,
46
+ testId
43
47
  }) => {
44
48
  const isMoreThenTwoItems = items.length > visibleButtonsNum;
45
49
  const firstActions = isMoreThenTwoItems ? items.slice(0, visibleButtonsNum - 1) : items;
@@ -54,14 +58,18 @@ const ActionGroup = ({
54
58
  trigger: ({
55
59
  triggerRef,
56
60
  ...props
57
- }) => jsx(Button, _extends({}, props, {
61
+ }) => jsx(Tooltip, {
62
+ content: jsx(FormattedMessage, messages.more_actions),
63
+ testId: "action-group-more-button-tooltip",
64
+ tag: "span"
65
+ }, jsx(Button, _extends({}, props, {
58
66
  spacing: sizeToSpacing[size],
59
67
  testId: "action-group-more-button",
60
68
  iconBefore: jsx(MoreIcon, {
61
69
  label: "more"
62
70
  }),
63
71
  ref: triggerRef
64
- }))
72
+ })))
65
73
  }, renderActionItems(restActions, size, appearance, true)) : null));
66
74
  };
67
75
 
@@ -3,10 +3,10 @@ import _extends from "@babel/runtime/helpers/extends";
3
3
  /** @jsx jsx */
4
4
  import { jsx } from '@emotion/core';
5
5
  import React, { useCallback, useRef, useMemo } from 'react';
6
- import { TitleBlock, SnippetBlock, FooterBlock, MetadataBlock } from '../FlexibleCard/components/blocks';
6
+ import { TitleBlock, SnippetBlock, FooterBlock, MetadataBlock, PreviewBlock } from '../FlexibleCard/components/blocks';
7
7
  import { Card } from '../Card';
8
8
  import Popup from '@atlaskit/popup';
9
- import { SmartLinkSize, ActionName } from '../../constants';
9
+ import { SmartLinkSize, ActionName, SmartLinkTheme } from '../../constants';
10
10
  import { useSmartLinkActions } from '../../state/hooks-external/useSmartLinkActions';
11
11
  import { HoverCardContainer } from './styled';
12
12
  import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
@@ -17,6 +17,7 @@ import { useSmartLinkAnalytics } from '../../state/analytics';
17
17
  import { getExtensionKey, getDefinitionId } from '../../state/helpers';
18
18
  import { extractMetadata } from '../../extractors/hover/extractMetadata';
19
19
  import { getSimulatedMetadata } from './utils';
20
+ import extractPreview from '../../extractors/flexible/extract-preview';
20
21
  export const HoverCardComponent = ({
21
22
  children,
22
23
  url,
@@ -94,8 +95,12 @@ export const HoverCardComponent = ({
94
95
  const CardComponent = ({
95
96
  update
96
97
  }) => {
98
+ var _linkState$details;
99
+
97
100
  //TODO: EDM-3224 deleted simulated and use real JsonLd
98
101
  const metadataElements = extractMetadata(getSimulatedMetadata(extensionKey));
102
+ const linkData = (_linkState$details = linkState.details) === null || _linkState$details === void 0 ? void 0 : _linkState$details.data;
103
+ const content = extractPreview(linkData) ? jsx(PreviewBlock, null) : jsx(SnippetBlock, null);
99
104
  return jsx("div", {
100
105
  onMouseEnter: initShowCard,
101
106
  onMouseLeave: initHideCard,
@@ -105,7 +110,9 @@ export const HoverCardComponent = ({
105
110
  url: url,
106
111
  ui: {
107
112
  hideElevation: true,
108
- size: SmartLinkSize.Large
113
+ size: SmartLinkSize.Large,
114
+ // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
115
+ theme: SmartLinkTheme.Black
109
116
  },
110
117
  onResolve: update
111
118
  }, jsx(TitleBlock, {
@@ -113,7 +120,7 @@ export const HoverCardComponent = ({
113
120
  }), jsx(MetadataBlock, {
114
121
  primary: metadataElements.primary,
115
122
  secondary: metadataElements.secondary
116
- }), jsx(SnippetBlock, null), jsx(FooterBlock, {
123
+ }), content, jsx(FooterBlock, {
117
124
  actions: smartlinkActions
118
125
  })));
119
126
  };
@@ -60,6 +60,11 @@ export var messages = defineMessages({
60
60
  defaultMessage: 'Updated on {context}',
61
61
  description: 'Indicated when entity was modified (absolute form)'
62
62
  },
63
+ more_actions: {
64
+ id: 'fabric.linking.more_actions',
65
+ defaultMessage: 'More actions',
66
+ description: 'Allows the users to see more link actions'
67
+ },
63
68
  priority_blocker: {
64
69
  id: 'fabric.linking.priority_blocker',
65
70
  defaultMessage: 'Blocker',
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/smart-card",
3
- "version": "19.1.1",
3
+ "version": "19.1.4",
4
4
  "sideEffects": false
5
5
  }
@@ -107,7 +107,8 @@ var Action = function Action(_ref2) {
107
107
  }, content);
108
108
  } else {
109
109
  return jsx(Tooltip, {
110
- content: tooltipMessage
110
+ content: tooltipMessage,
111
+ testId: "".concat(testId, "-tooltip")
111
112
  }, jsx("div", {
112
113
  css: [getButtonStyle(size, iconOnly), overrideCss],
113
114
  "data-testid": "".concat(testId, "-button-wrapper")
@@ -26,7 +26,7 @@ var actionMappings = (_actionMappings = {}, _defineProperty(_actionMappings, Act
26
26
  icon: /*#__PURE__*/React.createElement(CrossIcon, {
27
27
  label: "Delete"
28
28
  }),
29
- toolTipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.delete)
29
+ tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.delete)
30
30
  }
31
31
  }), _defineProperty(_actionMappings, ActionName.EditAction, {
32
32
  component: Action,
@@ -36,7 +36,7 @@ var actionMappings = (_actionMappings = {}, _defineProperty(_actionMappings, Act
36
36
  icon: /*#__PURE__*/React.createElement(EditIcon, {
37
37
  label: "Edit"
38
38
  }),
39
- toolTipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.edit)
39
+ tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.edit)
40
40
  }
41
41
  }), _actionMappings);
42
42
 
@@ -6,8 +6,10 @@ var _excluded = ["triggerRef"];
6
6
  var _templateObject;
7
7
 
8
8
  /** @jsx jsx */
9
+ import { FormattedMessage } from 'react-intl-next';
9
10
  import { css, jsx } from '@emotion/core';
10
11
  import ButtonGroup from '@atlaskit/button/button-group';
12
+ import Tooltip from '@atlaskit/tooltip';
11
13
  import { renderActionItems } from '../utils';
12
14
  import DropdownMenu from '@atlaskit/dropdown-menu';
13
15
  import { SmartLinkSize } from '../../../../../constants';
@@ -15,6 +17,7 @@ import Button from '@atlaskit/button/standard-button';
15
17
  import MoreIcon from '@atlaskit/icon/glyph/more';
16
18
  import { sizeToSpacing } from '../../actions/action';
17
19
  import { tokens } from '../../../../../utils/token';
20
+ import { messages } from '../../../../../messages';
18
21
  var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: inline-flex;\n line-height: 1rem;\n > div {\n align-items: center;\n button:focus {\n // AK button removes the default browser outline on focus and apply\n // box-shadow styling to create the outline appearance.\n // Due to our container elements (Container/Block/ElementGroup) has\n // overflow hidden to prevent the metadata element from leaking outside\n // of its container, the box-shadow doesn't show properly.\n // Invert the AK box-shadow styling.\n box-shadow: inset 0 0 0 2px ", ";\n }\n }\n"])), tokens.focus);
19
22
  /**
20
23
  * Creates a group of Action components. Accepts an array of Actions, in addition to some styling
@@ -32,7 +35,8 @@ var ActionGroup = function ActionGroup(_ref) {
32
35
  appearance = _ref.appearance,
33
36
  _ref$visibleButtonsNu = _ref.visibleButtonsNum,
34
37
  visibleButtonsNum = _ref$visibleButtonsNu === void 0 ? 2 : _ref$visibleButtonsNu,
35
- onDropdownOpenChange = _ref.onDropdownOpenChange;
38
+ onDropdownOpenChange = _ref.onDropdownOpenChange,
39
+ testId = _ref.testId;
36
40
  var isMoreThenTwoItems = items.length > visibleButtonsNum;
37
41
  var firstActions = isMoreThenTwoItems ? items.slice(0, visibleButtonsNum - 1) : items;
38
42
  var restActions = isMoreThenTwoItems ? items.slice(visibleButtonsNum - 1) : [];
@@ -48,14 +52,18 @@ var ActionGroup = function ActionGroup(_ref) {
48
52
  var triggerRef = _ref3.triggerRef,
49
53
  props = _objectWithoutProperties(_ref3, _excluded);
50
54
 
51
- return jsx(Button, _extends({}, props, {
55
+ return jsx(Tooltip, {
56
+ content: jsx(FormattedMessage, messages.more_actions),
57
+ testId: "action-group-more-button-tooltip",
58
+ tag: "span"
59
+ }, jsx(Button, _extends({}, props, {
52
60
  spacing: sizeToSpacing[size],
53
61
  testId: "action-group-more-button",
54
62
  iconBefore: jsx(MoreIcon, {
55
63
  label: "more"
56
64
  }),
57
65
  ref: triggerRef
58
- }));
66
+ })));
59
67
  }
60
68
  }, renderActionItems(restActions, size, appearance, true)) : null));
61
69
  };
@@ -4,10 +4,10 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
4
4
  /** @jsx jsx */
5
5
  import { jsx } from '@emotion/core';
6
6
  import React, { useCallback, useRef, useMemo } from 'react';
7
- import { TitleBlock, SnippetBlock, FooterBlock, MetadataBlock } from '../FlexibleCard/components/blocks';
7
+ import { TitleBlock, SnippetBlock, FooterBlock, MetadataBlock, PreviewBlock } from '../FlexibleCard/components/blocks';
8
8
  import { Card } from '../Card';
9
9
  import Popup from '@atlaskit/popup';
10
- import { SmartLinkSize, ActionName } from '../../constants';
10
+ import { SmartLinkSize, ActionName, SmartLinkTheme } from '../../constants';
11
11
  import { useSmartLinkActions } from '../../state/hooks-external/useSmartLinkActions';
12
12
  import { HoverCardContainer } from './styled';
13
13
  import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
@@ -18,6 +18,7 @@ import { useSmartLinkAnalytics } from '../../state/analytics';
18
18
  import { getExtensionKey, getDefinitionId } from '../../state/helpers';
19
19
  import { extractMetadata } from '../../extractors/hover/extractMetadata';
20
20
  import { getSimulatedMetadata } from './utils';
21
+ import extractPreview from '../../extractors/flexible/extract-preview';
21
22
  export var HoverCardComponent = function HoverCardComponent(_ref) {
22
23
  var children = _ref.children,
23
24
  url = _ref.url,
@@ -107,9 +108,13 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
107
108
  }, [url, definitionId, extensionKey, analytics]);
108
109
 
109
110
  var CardComponent = function CardComponent(_ref2) {
111
+ var _linkState$details;
112
+
110
113
  var update = _ref2.update;
111
114
  //TODO: EDM-3224 deleted simulated and use real JsonLd
112
115
  var metadataElements = extractMetadata(getSimulatedMetadata(extensionKey));
116
+ var linkData = (_linkState$details = linkState.details) === null || _linkState$details === void 0 ? void 0 : _linkState$details.data;
117
+ var content = extractPreview(linkData) ? jsx(PreviewBlock, null) : jsx(SnippetBlock, null);
113
118
  return jsx("div", {
114
119
  onMouseEnter: initShowCard,
115
120
  onMouseLeave: initHideCard,
@@ -119,7 +124,9 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
119
124
  url: url,
120
125
  ui: {
121
126
  hideElevation: true,
122
- size: SmartLinkSize.Large
127
+ size: SmartLinkSize.Large,
128
+ // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
129
+ theme: SmartLinkTheme.Black
123
130
  },
124
131
  onResolve: update
125
132
  }, jsx(TitleBlock, {
@@ -127,7 +134,7 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
127
134
  }), jsx(MetadataBlock, {
128
135
  primary: metadataElements.primary,
129
136
  secondary: metadataElements.secondary
130
- }), jsx(SnippetBlock, null), jsx(FooterBlock, {
137
+ }), content, jsx(FooterBlock, {
131
138
  actions: smartlinkActions
132
139
  })));
133
140
  };
@@ -1,5 +1,5 @@
1
1
  import { MessageDescriptor } from 'react-intl-next';
2
- export declare type MessageKey = 'cannot_find_link' | 'click_to_join' | 'connect_link_account' | 'created_by' | 'created_on_relative' | 'created_on_absolute' | 'delete' | 'edit' | 'modified_by' | 'modified_on_relative' | 'modified_on_absolute' | 'priority_blocker' | 'priority_critical' | 'priority_high' | 'priority_highest' | 'priority_low' | 'priority_lowest' | 'priority_major' | 'priority_medium' | 'priority_minor' | 'priority_trivial' | 'priority_undefined' | 'forbidden_access' | 'pending_request' | 'restricted_link' | 'request_access' | 'request_denied';
2
+ export declare type MessageKey = 'cannot_find_link' | 'click_to_join' | 'connect_link_account' | 'created_by' | 'created_on_relative' | 'created_on_absolute' | 'delete' | 'edit' | 'modified_by' | 'modified_on_relative' | 'modified_on_absolute' | 'more_actions' | 'priority_blocker' | 'priority_critical' | 'priority_high' | 'priority_highest' | 'priority_low' | 'priority_lowest' | 'priority_major' | 'priority_medium' | 'priority_minor' | 'priority_trivial' | 'priority_undefined' | 'forbidden_access' | 'pending_request' | 'restricted_link' | 'request_access' | 'request_denied';
3
3
  declare type Messages = {
4
4
  [K in MessageKey]: MessageDescriptor;
5
5
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/smart-card",
3
- "version": "19.1.1",
3
+ "version": "19.1.4",
4
4
  "description": "Smart card component",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"