@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 +18 -0
- package/dist/cjs/messages.js +5 -0
- package/dist/cjs/version.json +1 -1
- package/dist/cjs/view/FlexibleCard/components/actions/action/index.js +2 -1
- package/dist/cjs/view/FlexibleCard/components/actions/utils.js +2 -2
- package/dist/cjs/view/FlexibleCard/components/blocks/action-group/index.js +14 -3
- package/dist/cjs/view/HoverCard/index.js +10 -2
- package/dist/es2019/messages.js +5 -0
- package/dist/es2019/version.json +1 -1
- package/dist/es2019/view/FlexibleCard/components/actions/action/index.js +2 -1
- package/dist/es2019/view/FlexibleCard/components/actions/utils.js +2 -2
- package/dist/es2019/view/FlexibleCard/components/blocks/action-group/index.js +11 -3
- package/dist/es2019/view/HoverCard/index.js +11 -4
- package/dist/esm/messages.js +5 -0
- package/dist/esm/version.json +1 -1
- package/dist/esm/view/FlexibleCard/components/actions/action/index.js +2 -1
- package/dist/esm/view/FlexibleCard/components/actions/utils.js +2 -2
- package/dist/esm/view/FlexibleCard/components/blocks/action-group/index.js +11 -3
- package/dist/esm/view/HoverCard/index.js +11 -4
- package/dist/types/messages.d.ts +1 -1
- package/package.json +1 -1
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
|
package/dist/cjs/messages.js
CHANGED
|
@@ -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',
|
package/dist/cjs/version.json
CHANGED
|
@@ -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
|
-
|
|
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
|
-
|
|
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)(
|
|
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
|
-
}),
|
|
170
|
+
}), content, (0, _core.jsx)(_blocks.FooterBlock, {
|
|
163
171
|
actions: smartlinkActions
|
|
164
172
|
})));
|
|
165
173
|
};
|
package/dist/es2019/messages.js
CHANGED
|
@@ -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',
|
package/dist/es2019/version.json
CHANGED
|
@@ -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
|
-
|
|
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
|
-
|
|
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(
|
|
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
|
-
}),
|
|
123
|
+
}), content, jsx(FooterBlock, {
|
|
117
124
|
actions: smartlinkActions
|
|
118
125
|
})));
|
|
119
126
|
};
|
package/dist/esm/messages.js
CHANGED
|
@@ -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',
|
package/dist/esm/version.json
CHANGED
|
@@ -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
|
-
|
|
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
|
-
|
|
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(
|
|
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
|
-
}),
|
|
137
|
+
}), content, jsx(FooterBlock, {
|
|
131
138
|
actions: smartlinkActions
|
|
132
139
|
})));
|
|
133
140
|
};
|
package/dist/types/messages.d.ts
CHANGED
|
@@ -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
|
};
|