@atlaskit/smart-card 28.3.1 → 29.0.0
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 +28 -0
- package/dist/cjs/index.js +0 -6
- package/dist/cjs/state/analytics/useSmartLinkAnalytics.js +2 -12
- package/dist/cjs/state/hooks/useSmartLink.js +2 -7
- package/dist/cjs/state/hooks-external/useSmartLinkActions.js +1 -2
- package/dist/cjs/state/hooks-external/useSmartLinkReload.js +2 -3
- package/dist/cjs/utils/analytics/analytics.js +1 -1
- package/dist/cjs/utils/index.js +1 -14
- package/dist/cjs/view/CardWithUrl/component.js +2 -5
- package/dist/cjs/view/CardWithUrl/loader.js +1 -5
- package/dist/cjs/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-trigger/index.js +14 -4
- package/dist/cjs/view/FlexibleCard/components/elements/lozenge/lozenge-action/styled.js +1 -5
- package/dist/cjs/view/HoverCard/components/HoverCardComponent.js +1 -1
- package/dist/cjs/view/HoverCard/components/HoverCardContent.js +1 -1
- package/dist/cjs/view/HoverCard/index.js +1 -1
- package/dist/cjs/view/InlineCard/Icon.js +3 -17
- package/dist/cjs/view/InlineCard/IconAndTitleLayout/index.js +13 -29
- package/dist/cjs/view/InlineCard/IconAndTitleLayout/styled.js +6 -43
- package/dist/cjs/view/LinkUrl/index.js +1 -1
- package/dist/es2019/client/index.js +4 -0
- package/dist/es2019/index.js +20 -1
- package/dist/es2019/state/analytics/useSmartLinkAnalytics.js +2 -12
- package/dist/es2019/state/hooks/useSmartLink.js +2 -7
- package/dist/es2019/state/hooks-external/useSmartLinkActions.js +1 -2
- package/dist/es2019/state/hooks-external/useSmartLinkReload.js +2 -3
- package/dist/es2019/utils/analytics/analytics.js +1 -1
- package/dist/es2019/utils/index.js +0 -13
- package/dist/es2019/view/CardWithUrl/component.js +3 -6
- package/dist/es2019/view/CardWithUrl/loader.js +1 -5
- package/dist/es2019/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-trigger/index.js +14 -4
- package/dist/es2019/view/FlexibleCard/components/elements/lozenge/lozenge-action/styled.js +1 -5
- package/dist/es2019/view/HoverCard/components/HoverCardComponent.js +1 -1
- package/dist/es2019/view/HoverCard/components/HoverCardContent.js +1 -1
- package/dist/es2019/view/HoverCard/index.js +1 -1
- package/dist/es2019/view/InlineCard/Icon.js +2 -16
- package/dist/es2019/view/InlineCard/IconAndTitleLayout/index.js +15 -31
- package/dist/es2019/view/InlineCard/IconAndTitleLayout/styled.js +5 -71
- package/dist/es2019/view/LinkUrl/index.js +1 -1
- package/dist/esm/client/index.js +4 -0
- package/dist/esm/index.js +20 -1
- package/dist/esm/state/analytics/useSmartLinkAnalytics.js +2 -12
- package/dist/esm/state/hooks/useSmartLink.js +2 -7
- package/dist/esm/state/hooks-external/useSmartLinkActions.js +1 -2
- package/dist/esm/state/hooks-external/useSmartLinkReload.js +2 -3
- package/dist/esm/utils/analytics/analytics.js +1 -1
- package/dist/esm/utils/index.js +0 -13
- package/dist/esm/view/CardWithUrl/component.js +3 -6
- package/dist/esm/view/CardWithUrl/loader.js +1 -5
- package/dist/esm/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-trigger/index.js +14 -4
- package/dist/esm/view/FlexibleCard/components/elements/lozenge/lozenge-action/styled.js +1 -5
- package/dist/esm/view/HoverCard/components/HoverCardComponent.js +1 -1
- package/dist/esm/view/HoverCard/components/HoverCardContent.js +1 -1
- package/dist/esm/view/HoverCard/index.js +1 -1
- package/dist/esm/view/InlineCard/Icon.js +2 -16
- package/dist/esm/view/InlineCard/IconAndTitleLayout/index.js +15 -31
- package/dist/esm/view/InlineCard/IconAndTitleLayout/styled.js +5 -42
- package/dist/esm/view/LinkUrl/index.js +1 -1
- package/dist/types/client/index.d.ts +4 -0
- package/dist/types/index.d.ts +9 -1
- package/dist/types/state/analytics/useSmartLinkAnalytics.d.ts +2 -12
- package/dist/types/state/hooks/useSmartLink.d.ts +4 -11
- package/dist/types/state/hooks-external/useSmartLinkActions.d.ts +2 -10
- package/dist/types/state/hooks-external/useSmartLinkReload.d.ts +1 -10
- package/dist/types/utils/index.d.ts +0 -6
- package/dist/types/utils/mocks.d.ts +0 -1
- package/dist/types/view/Card/index.d.ts +1 -1
- package/dist/types/view/Card/types.d.ts +0 -25
- package/dist/types/view/CardWithData/types.d.ts +0 -6
- package/dist/types/view/CardWithUrl/types.d.ts +0 -19
- package/dist/types/view/HoverCard/types.d.ts +1 -7
- package/dist/types/view/InlineCard/Icon.d.ts +0 -4
- package/dist/types/view/InlineCard/IconAndTitleLayout/styled.d.ts +2 -16
- package/dist/types-ts4.5/client/index.d.ts +4 -0
- package/dist/types-ts4.5/index.d.ts +9 -1
- package/dist/types-ts4.5/state/analytics/useSmartLinkAnalytics.d.ts +2 -12
- package/dist/types-ts4.5/state/hooks/useSmartLink.d.ts +4 -11
- package/dist/types-ts4.5/state/hooks-external/useSmartLinkActions.d.ts +2 -10
- package/dist/types-ts4.5/state/hooks-external/useSmartLinkReload.d.ts +1 -10
- package/dist/types-ts4.5/utils/index.d.ts +0 -6
- package/dist/types-ts4.5/utils/mocks.d.ts +0 -1
- package/dist/types-ts4.5/view/Card/index.d.ts +1 -1
- package/dist/types-ts4.5/view/Card/types.d.ts +0 -25
- package/dist/types-ts4.5/view/CardWithData/types.d.ts +0 -6
- package/dist/types-ts4.5/view/CardWithUrl/types.d.ts +0 -19
- package/dist/types-ts4.5/view/HoverCard/types.d.ts +1 -7
- package/dist/types-ts4.5/view/InlineCard/Icon.d.ts +0 -4
- package/dist/types-ts4.5/view/InlineCard/IconAndTitleLayout/styled.d.ts +2 -16
- package/package.json +3 -6
|
@@ -21,20 +21,16 @@ const applyCommonAttributes = (event, commonAttributes) => {
|
|
|
21
21
|
* This hook provides usage of Smart Link analytics outside of the Card component.
|
|
22
22
|
* Can be provided to Card via the analyticsEvents prop to change the analytics events.
|
|
23
23
|
*
|
|
24
|
-
* @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-2681 Internal documentation for deprecation (no external access)}
|
|
25
|
-
* This hook's external use is deprecated and may no longer be exported from this package in future releases.
|
|
26
|
-
* Please avoid using it in conjunction with the `analyticsEvents` prop.
|
|
27
|
-
*
|
|
28
24
|
* @param url URL of the link
|
|
29
25
|
* @param dispatchAnalytics dispatchAnalytics function
|
|
30
26
|
* @param id fallback id of the events sent if no id is available
|
|
31
27
|
* @param defaultLocation location attribute to be used
|
|
32
28
|
* @returns
|
|
33
29
|
*/
|
|
34
|
-
export const useSmartLinkAnalytics = (url,
|
|
30
|
+
export const useSmartLinkAnalytics = (url, id, defaultLocation) => {
|
|
35
31
|
const {
|
|
36
32
|
dispatchAnalytics
|
|
37
|
-
} = useDispatchAnalytics(
|
|
33
|
+
} = useDispatchAnalytics();
|
|
38
34
|
const defaultId = id || 'NULL';
|
|
39
35
|
// We don't want to trigger a re-render by using useSmartCardState
|
|
40
36
|
const {
|
|
@@ -235,7 +231,6 @@ export const useSmartLinkAnalytics = (url, _dispatchAnalytics, id, defaultLocati
|
|
|
235
231
|
* @param extensionKey The extensionKey of the Smart Link resovler invoked.
|
|
236
232
|
* @param actionType The type of the action that was clicked, e.g. PreviewAction
|
|
237
233
|
* @param display Whether the card was an Inline, Block, Embed or Flexible UI.
|
|
238
|
-
* @param invokeType @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-2681 Internal documentation for deprecation (no external access)}
|
|
239
234
|
* @returns
|
|
240
235
|
*/
|
|
241
236
|
actionClickedEvent: ({
|
|
@@ -730,11 +725,6 @@ export const useSmartLinkAnalytics = (url, _dispatchAnalytics, id, defaultLocati
|
|
|
730
725
|
extensionKey,
|
|
731
726
|
location
|
|
732
727
|
}), commonAttributes)),
|
|
733
|
-
/**
|
|
734
|
-
* Removed in EDM-5153: This is an even from an experiment.
|
|
735
|
-
* @deprecated
|
|
736
|
-
*/
|
|
737
|
-
linkUpdated: () => {},
|
|
738
728
|
/**
|
|
739
729
|
* This fires a tracking event before an action invoke api call is made
|
|
740
730
|
*/
|
|
@@ -5,17 +5,12 @@ import { useSmartLinkConfig } from '../config';
|
|
|
5
5
|
import { useSmartLinkAnalytics } from '../analytics';
|
|
6
6
|
import { useSmartLinkRenderers } from '../renderers';
|
|
7
7
|
import { useSmartLinkContext } from '@atlaskit/link-provider';
|
|
8
|
-
export function useSmartLink(id, url
|
|
9
|
-
/**
|
|
10
|
-
* @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-2681 Internal documentation for deprecation (no external access)}
|
|
11
|
-
* Avoid prop drilling analytics handlers. Continue passing a handler for now if there's already one in place.
|
|
12
|
-
*/
|
|
13
|
-
dispatchAnalytics) {
|
|
8
|
+
export function useSmartLink(id, url) {
|
|
14
9
|
const state = useSmartLinkState(url);
|
|
15
10
|
const {
|
|
16
11
|
store
|
|
17
12
|
} = useSmartLinkContext();
|
|
18
|
-
const analytics = useSmartLinkAnalytics(url,
|
|
13
|
+
const analytics = useSmartLinkAnalytics(url, id);
|
|
19
14
|
const actions = useSmartLinkActions(id, url, analytics);
|
|
20
15
|
const config = useSmartLinkConfig();
|
|
21
16
|
const renderers = useSmartLinkRenderers();
|
|
@@ -8,14 +8,13 @@ import { getExtensionKey } from '../helpers';
|
|
|
8
8
|
export function useSmartLinkActions({
|
|
9
9
|
url,
|
|
10
10
|
appearance,
|
|
11
|
-
analyticsHandler,
|
|
12
11
|
platform = 'web',
|
|
13
12
|
origin,
|
|
14
13
|
actionOptions
|
|
15
14
|
}) {
|
|
16
15
|
const id = useMemo(() => uuid(), []);
|
|
17
16
|
const linkState = useLinkState(url);
|
|
18
|
-
const linkAnalytics = useLinkAnalytics(url,
|
|
17
|
+
const linkAnalytics = useLinkAnalytics(url, id);
|
|
19
18
|
const linkActions = useLinkActions(id, url, linkAnalytics);
|
|
20
19
|
if (linkState.details && !(actionOptions !== null && actionOptions !== void 0 && actionOptions.hide)) {
|
|
21
20
|
const cardProperties = extractCardProps(linkState.details.data, linkState.details.meta, {
|
|
@@ -8,11 +8,10 @@ import { useSmartLinkAnalytics as useLinkAnalytics } from '../analytics';
|
|
|
8
8
|
* @returns
|
|
9
9
|
*/
|
|
10
10
|
export function useSmartLinkReload({
|
|
11
|
-
url
|
|
12
|
-
analyticsHandler
|
|
11
|
+
url
|
|
13
12
|
}) {
|
|
14
13
|
const id = useMemo(() => uuid(), []);
|
|
15
|
-
const linkAnalytics = useLinkAnalytics(url,
|
|
14
|
+
const linkAnalytics = useLinkAnalytics(url, id);
|
|
16
15
|
const linkActions = useLinkActions(id, url, linkAnalytics);
|
|
17
16
|
return linkActions.reload;
|
|
18
17
|
}
|
|
@@ -4,7 +4,7 @@ export const ANALYTICS_CHANNEL = 'media';
|
|
|
4
4
|
export const context = {
|
|
5
5
|
componentName: 'smart-cards',
|
|
6
6
|
packageName: "@atlaskit/smart-card",
|
|
7
|
-
packageVersion: "
|
|
7
|
+
packageVersion: "29.0.0"
|
|
8
8
|
};
|
|
9
9
|
export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
|
|
10
10
|
TrackQuickActionType["StatusUpdate"] = "StatusUpdate";
|
|
@@ -157,19 +157,6 @@ export const openUrl = async url => {
|
|
|
157
157
|
window.open(url, '_blank', 'noopener=yes');
|
|
158
158
|
};
|
|
159
159
|
|
|
160
|
-
/**
|
|
161
|
-
* Migrate internal usages of the deprecated isFrameVisible to frameStyle
|
|
162
|
-
* This function is to be removed on deprecation of isFrameVisible.
|
|
163
|
-
*/
|
|
164
|
-
export const combineFrameStyle = (frameStyle, isFrameVisible) => {
|
|
165
|
-
if (frameStyle !== undefined) {
|
|
166
|
-
return frameStyle;
|
|
167
|
-
}
|
|
168
|
-
if (isFrameVisible) {
|
|
169
|
-
return 'show';
|
|
170
|
-
}
|
|
171
|
-
};
|
|
172
|
-
|
|
173
160
|
/**
|
|
174
161
|
* Append a theme to the URL if it exists
|
|
175
162
|
* @param previewUrl
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { useEffect, useCallback, useMemo } from 'react';
|
|
2
2
|
import { useAnalyticsEvents } from '@atlaskit/analytics-next';
|
|
3
3
|
import { SmartLinkModalProvider } from '../../state/modal';
|
|
4
|
-
import {
|
|
4
|
+
import { isSpecialEvent } from '../../utils';
|
|
5
5
|
import * as measure from '../../utils/performance';
|
|
6
6
|
import { getDefinitionId, getServices, isFinalState, getClickUrl, getResourceType, getExtensionKey, getSubproduct, getProduct, getCanBeDatasource } from '../../state/helpers';
|
|
7
7
|
import { useSmartLink } from '../../state';
|
|
@@ -19,12 +19,10 @@ function Component({
|
|
|
19
19
|
url,
|
|
20
20
|
isSelected,
|
|
21
21
|
isHovered,
|
|
22
|
-
|
|
23
|
-
frameStyle: frameStyleProp,
|
|
22
|
+
frameStyle,
|
|
24
23
|
platform,
|
|
25
24
|
onClick,
|
|
26
25
|
appearance,
|
|
27
|
-
dispatchAnalytics,
|
|
28
26
|
onResolve,
|
|
29
27
|
onError,
|
|
30
28
|
testId,
|
|
@@ -56,7 +54,7 @@ function Component({
|
|
|
56
54
|
config,
|
|
57
55
|
renderers,
|
|
58
56
|
error
|
|
59
|
-
} = useSmartLink(id, url
|
|
57
|
+
} = useSmartLink(id, url);
|
|
60
58
|
const analytics = analyticsEvents || defaultAnalytics;
|
|
61
59
|
const definitionId = getDefinitionId(state.details);
|
|
62
60
|
const extensionKey = getExtensionKey(state.details);
|
|
@@ -70,7 +68,6 @@ function Component({
|
|
|
70
68
|
actionOptions: actionOptionsProp,
|
|
71
69
|
platform
|
|
72
70
|
});
|
|
73
|
-
const frameStyle = combineFrameStyle(frameStyleProp, isFrameVisible);
|
|
74
71
|
|
|
75
72
|
// Setup UI handlers.
|
|
76
73
|
const handleClickWrapper = useCallback(event => {
|
|
@@ -22,7 +22,6 @@ export function CardWithURLRenderer(props) {
|
|
|
22
22
|
appearance,
|
|
23
23
|
isSelected,
|
|
24
24
|
isHovered,
|
|
25
|
-
isFrameVisible,
|
|
26
25
|
frameStyle,
|
|
27
26
|
onClick,
|
|
28
27
|
container,
|
|
@@ -40,7 +39,6 @@ export function CardWithURLRenderer(props) {
|
|
|
40
39
|
showHoverPreview,
|
|
41
40
|
hoverPreviewOptions,
|
|
42
41
|
showAuthTooltip,
|
|
43
|
-
analyticsEvents,
|
|
44
42
|
placeholder,
|
|
45
43
|
fallbackComponent,
|
|
46
44
|
useLegacyBlockCard,
|
|
@@ -48,7 +46,7 @@ export function CardWithURLRenderer(props) {
|
|
|
48
46
|
resolvingPlaceholder,
|
|
49
47
|
truncateInline
|
|
50
48
|
} = props;
|
|
51
|
-
const analytics = useSmartLinkAnalytics(url !== null && url !== void 0 ? url : '',
|
|
49
|
+
const analytics = useSmartLinkAnalytics(url !== null && url !== void 0 ? url : '', id);
|
|
52
50
|
const isFlexibleUi = isFlexibleUiCard(children);
|
|
53
51
|
const errorHandler = useCallback((error, info) => {
|
|
54
52
|
const {
|
|
@@ -95,7 +93,6 @@ export function CardWithURLRenderer(props) {
|
|
|
95
93
|
onClick,
|
|
96
94
|
isSelected,
|
|
97
95
|
isHovered,
|
|
98
|
-
isFrameVisible,
|
|
99
96
|
frameStyle,
|
|
100
97
|
container,
|
|
101
98
|
onResolve,
|
|
@@ -111,7 +108,6 @@ export function CardWithURLRenderer(props) {
|
|
|
111
108
|
showHoverPreview,
|
|
112
109
|
hoverPreviewOptions,
|
|
113
110
|
showAuthTooltip,
|
|
114
|
-
analyticsEvents,
|
|
115
111
|
placeholder,
|
|
116
112
|
useLegacyBlockCard,
|
|
117
113
|
removeTextHighlightingFromTitle,
|
|
@@ -7,8 +7,13 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
7
7
|
import { jsx } from '@emotion/react';
|
|
8
8
|
import { useCallback, useMemo, useState } from 'react';
|
|
9
9
|
import Lozenge from '@atlaskit/lozenge';
|
|
10
|
-
import ChevronDownIcon from '@atlaskit/icon/
|
|
10
|
+
import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
|
|
11
11
|
import { triggerButtonStyles, triggerLozengeStyles } from '../styled';
|
|
12
|
+
import { Box, xcss } from '@atlaskit/primitives';
|
|
13
|
+
const chevronDownStyles = xcss({
|
|
14
|
+
marginLeft: 'space.075',
|
|
15
|
+
display: 'flex'
|
|
16
|
+
});
|
|
12
17
|
const LozengeActionTrigger = ({
|
|
13
18
|
appearance,
|
|
14
19
|
isOpen,
|
|
@@ -25,10 +30,15 @@ const LozengeActionTrigger = ({
|
|
|
25
30
|
isBold: isBold
|
|
26
31
|
}, jsx("span", {
|
|
27
32
|
css: triggerLozengeStyles
|
|
28
|
-
}, jsx("span", null, text), jsx(
|
|
33
|
+
}, jsx("span", null, text), jsx(Box, {
|
|
34
|
+
as: "span",
|
|
35
|
+
xcss: chevronDownStyles
|
|
36
|
+
}, jsx(ChevronDownIcon, {
|
|
37
|
+
color: "currentColor",
|
|
29
38
|
label: "options",
|
|
30
|
-
|
|
31
|
-
|
|
39
|
+
LEGACY_size: "medium",
|
|
40
|
+
LEGACY_margin: "-4px -8px -4px -7px"
|
|
41
|
+
})))), [appearance, isBold, text]);
|
|
32
42
|
return jsx("button", _extends({
|
|
33
43
|
type: "button"
|
|
34
44
|
}, props, {
|
|
@@ -27,11 +27,7 @@ export const triggerButtonStyles = css({
|
|
|
27
27
|
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
28
28
|
export const triggerLozengeStyles = css({
|
|
29
29
|
alignItems: 'center',
|
|
30
|
-
display: 'flex'
|
|
31
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
32
|
-
"span[role='img']": {
|
|
33
|
-
margin: `${"var(--ds-space-negative-050, -4px)"} ${"var(--ds-space-negative-100, -8px)"} ${"var(--ds-space-negative-050, -4px)"} -1px`
|
|
34
|
-
}
|
|
30
|
+
display: 'flex'
|
|
35
31
|
});
|
|
36
32
|
|
|
37
33
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
@@ -46,7 +46,7 @@ export const HoverCardComponent = ({
|
|
|
46
46
|
const parentSpan = useRef(null);
|
|
47
47
|
const renderers = useSmartLinkRenderers();
|
|
48
48
|
const linkState = useLinkState(url);
|
|
49
|
-
const analytics = useSmartLinkAnalytics(url,
|
|
49
|
+
const analytics = useSmartLinkAnalytics(url, id);
|
|
50
50
|
const {
|
|
51
51
|
loadMetadata
|
|
52
52
|
} = useSmartCardActions(id, url, analytics);
|
|
@@ -38,7 +38,7 @@ const HoverCardContent = ({
|
|
|
38
38
|
const {
|
|
39
39
|
createAnalyticsEvent
|
|
40
40
|
} = useAnalyticsEvents();
|
|
41
|
-
const defaultAnalytics = useSmartLinkAnalytics(url,
|
|
41
|
+
const defaultAnalytics = useSmartLinkAnalytics(url, id);
|
|
42
42
|
const analytics = _analytics !== null && _analytics !== void 0 ? _analytics : defaultAnalytics;
|
|
43
43
|
const extensionKey = useMemo(() => getExtensionKey(cardState.details), [cardState.details]);
|
|
44
44
|
const linkState = useSmartCardState(url);
|
|
@@ -18,7 +18,7 @@ const HoverCardWithErrorBoundary = props => {
|
|
|
18
18
|
id,
|
|
19
19
|
children
|
|
20
20
|
} = props;
|
|
21
|
-
const analytics = useSmartLinkAnalytics(url,
|
|
21
|
+
const analytics = useSmartLinkAnalytics(url, id);
|
|
22
22
|
const onError = useCallback((error, info) => {
|
|
23
23
|
analytics.ui.renderFailedEvent({
|
|
24
24
|
display: CardDisplay.HoverCardPreview,
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
2
2
|
import styled from '@emotion/styled';
|
|
3
3
|
import { SpanSkeleton } from '@atlaskit/linking-common';
|
|
4
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
5
4
|
import React from 'react';
|
|
6
5
|
|
|
7
6
|
// TODO: Figure out a more scalable/responsive solution
|
|
@@ -11,19 +10,6 @@ import React from 'react';
|
|
|
11
10
|
// to position it with appropriate whitespace from the top.
|
|
12
11
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
13
12
|
export const Icon = styled.img({
|
|
14
|
-
height: '14px',
|
|
15
|
-
width: '14px',
|
|
16
|
-
marginRight: "var(--ds-space-050, 4px)",
|
|
17
|
-
borderRadius: '2px',
|
|
18
|
-
userSelect: 'none',
|
|
19
|
-
position: 'absolute',
|
|
20
|
-
top: '50%',
|
|
21
|
-
left: '50%',
|
|
22
|
-
transform: 'translate(-50%, -50%)'
|
|
23
|
-
});
|
|
24
|
-
|
|
25
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
26
|
-
export const IconResized = styled.img({
|
|
27
13
|
height: '16px',
|
|
28
14
|
width: '16px',
|
|
29
15
|
marginRight: "var(--ds-space-050, 4px)",
|
|
@@ -55,8 +41,8 @@ export const Shimmer = ({
|
|
|
55
41
|
marginRight: "var(--ds-space-050, 4px)"
|
|
56
42
|
};
|
|
57
43
|
return /*#__PURE__*/React.createElement(SpanSkeleton, {
|
|
58
|
-
width:
|
|
59
|
-
height:
|
|
44
|
+
width: 16,
|
|
45
|
+
height: 16,
|
|
60
46
|
borderRadius: 2,
|
|
61
47
|
testId: testId
|
|
62
48
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import ImageLoader from 'react-render-image';
|
|
4
|
-
import { Icon,
|
|
5
|
-
import { IconEmptyWrapper, IconPositionWrapper, IconTitleWrapper, IconWrapper, TitleWrapper, EmojiWrapper, TitleWrapperClassName
|
|
4
|
+
import { Icon, Shimmer } from '../Icon';
|
|
5
|
+
import { IconEmptyWrapper, IconPositionWrapper, IconTitleWrapper, IconWrapper, TitleWrapper, EmojiWrapper, TitleWrapperClassName } from './styled';
|
|
6
6
|
import LinkIcon from '@atlaskit/icon/core/migration/link';
|
|
7
7
|
import { LinkAppearance, NoLinkAppearance } from '../styled';
|
|
8
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
9
8
|
export class IconAndTitleLayout extends React.Component {
|
|
10
9
|
constructor(...args) {
|
|
11
10
|
super(...args);
|
|
@@ -39,12 +38,12 @@ export class IconAndTitleLayout extends React.Component {
|
|
|
39
38
|
emoji
|
|
40
39
|
} = this.props;
|
|
41
40
|
if (emoji) {
|
|
42
|
-
return
|
|
41
|
+
return /*#__PURE__*/React.createElement(EmojiWrapper, null, emoji);
|
|
43
42
|
}
|
|
44
43
|
if (!icon || typeof icon === 'string') {
|
|
45
44
|
return null;
|
|
46
45
|
}
|
|
47
|
-
return
|
|
46
|
+
return /*#__PURE__*/React.createElement(IconWrapper, null, icon);
|
|
48
47
|
}
|
|
49
48
|
renderImageIcon(errored, testId) {
|
|
50
49
|
const {
|
|
@@ -53,22 +52,15 @@ export class IconAndTitleLayout extends React.Component {
|
|
|
53
52
|
if (!url || typeof url !== 'string') {
|
|
54
53
|
return null;
|
|
55
54
|
}
|
|
56
|
-
const icon = fg('linking-platform-increase-inline-card-icon-size') ? /*#__PURE__*/React.createElement(IconResized
|
|
57
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
58
|
-
, {
|
|
59
|
-
className: "smart-link-icon",
|
|
60
|
-
src: url,
|
|
61
|
-
"data-testid": `${testId}-image`
|
|
62
|
-
}) : /*#__PURE__*/React.createElement(Icon
|
|
63
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
64
|
-
, {
|
|
65
|
-
className: "smart-link-icon",
|
|
66
|
-
src: url,
|
|
67
|
-
"data-testid": `${testId}-image`
|
|
68
|
-
});
|
|
69
55
|
return /*#__PURE__*/React.createElement(ImageLoader, {
|
|
70
56
|
src: url,
|
|
71
|
-
loaded:
|
|
57
|
+
loaded: /*#__PURE__*/React.createElement(Icon
|
|
58
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
59
|
+
, {
|
|
60
|
+
className: "smart-link-icon",
|
|
61
|
+
src: url,
|
|
62
|
+
"data-testid": `${testId}-image`
|
|
63
|
+
}),
|
|
72
64
|
errored: errored,
|
|
73
65
|
loading: /*#__PURE__*/React.createElement(Shimmer, {
|
|
74
66
|
testId: `${testId}-loading`
|
|
@@ -82,14 +74,7 @@ export class IconAndTitleLayout extends React.Component {
|
|
|
82
74
|
if (defaultIcon) {
|
|
83
75
|
return /*#__PURE__*/React.createElement(IconWrapper, null, defaultIcon);
|
|
84
76
|
}
|
|
85
|
-
return
|
|
86
|
-
"data-testid": `${testId}-default`
|
|
87
|
-
}, /*#__PURE__*/React.createElement(LinkIcon, {
|
|
88
|
-
label: "link",
|
|
89
|
-
LEGACY_size: "small",
|
|
90
|
-
testId: `${testId}-default`,
|
|
91
|
-
color: "currentColor"
|
|
92
|
-
})) : /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement(LinkIcon, {
|
|
77
|
+
return /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement(LinkIcon, {
|
|
93
78
|
label: "link",
|
|
94
79
|
LEGACY_size: "small",
|
|
95
80
|
testId: `${testId}-default`,
|
|
@@ -119,12 +104,11 @@ export class IconAndTitleLayout extends React.Component {
|
|
|
119
104
|
rightSide,
|
|
120
105
|
testId = 'inline-card-icon-and-title'
|
|
121
106
|
} = this.props;
|
|
122
|
-
const
|
|
107
|
+
const titlePart = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconPositionWrapper, {
|
|
123
108
|
"data-testid": "icon-position-wrapper"
|
|
124
|
-
}, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(
|
|
109
|
+
}, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconEmptyWrapper, {
|
|
125
110
|
"data-testid": "icon-empty-wrapper"
|
|
126
|
-
}), this.renderIcon(testId)))
|
|
127
|
-
const titlePart = /*#__PURE__*/React.createElement(React.Fragment, null, iconPart, /*#__PURE__*/React.createElement(TitleWrapper
|
|
111
|
+
}), this.renderIcon(testId))), /*#__PURE__*/React.createElement(TitleWrapper
|
|
128
112
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
129
113
|
, {
|
|
130
114
|
style: {
|
|
@@ -1,60 +1,15 @@
|
|
|
1
1
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
2
2
|
import styled from '@emotion/styled';
|
|
3
|
-
// TODO: remove this override behaviour for @atlaskit/icon-object
|
|
4
|
-
// Replace with IconObjectOverridesResized during linking-platform-increase-inline-card-icon-size cleanup (EDM=10529)
|
|
5
|
-
export const IconObjectOverrides = `
|
|
6
|
-
& > span {
|
|
7
|
-
height: 16px;
|
|
8
|
-
width: 14px;
|
|
9
|
-
position: absolute;
|
|
10
|
-
top: 3px;
|
|
11
|
-
left: 0;
|
|
12
|
-
line-height: 14px;
|
|
13
|
-
& > svg {
|
|
14
|
-
position: absolute;
|
|
15
|
-
top: 50%;
|
|
16
|
-
left: 50%;
|
|
17
|
-
transform: translate(-50%, -50%);
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
`;
|
|
21
|
-
|
|
22
|
-
// TODO: remove this override behaviour for @atlaskit/icon
|
|
23
|
-
// Replace with IconOverridesResized during linking-platform-increase-inline-card-icon-size cleanup (EDM=10529)
|
|
24
|
-
export const IconOverrides = `
|
|
25
|
-
|
|
26
|
-
& > * > span {
|
|
27
|
-
height: 16px;
|
|
28
|
-
width: 14px;
|
|
29
|
-
position: absolute;
|
|
30
|
-
left: 0;
|
|
31
|
-
& > svg {
|
|
32
|
-
position: absolute;
|
|
33
|
-
top: 50%;
|
|
34
|
-
left: 50%;
|
|
35
|
-
transform: translate(-50%, -50%);
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
`;
|
|
39
|
-
|
|
40
3
|
// Wraps all icons represented in Inline Links. Icons have three sources/types:
|
|
41
4
|
// - JSON-LD: from the generator.icon property coming back from ORS.
|
|
42
5
|
// - @atlaskit/icon: for lock icons, unauthorized, etc.
|
|
43
6
|
// - @atlaskit/icon-object: for object icons, e.g. repository, branch, etc.
|
|
44
7
|
// NB: the first set of overrides style icons imported from @atlaskit/icon-object correctly.
|
|
45
8
|
// NB: the second set of overrides style icons imported from @atlaskit/icon correctly.
|
|
46
|
-
// Replace with IconWrapperResized during linking-platform-increase-inline-card-icon-size cleanup (EDM=10529)
|
|
47
9
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
48
|
-
export const IconWrapper = styled.span({
|
|
49
|
-
userSelect: 'none'
|
|
50
|
-
},
|
|
51
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
52
|
-
IconOverrides,
|
|
53
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
54
|
-
IconObjectOverrides);
|
|
55
10
|
|
|
56
11
|
// TODO: remove this override behaviour for @atlaskit/icon-object
|
|
57
|
-
export const
|
|
12
|
+
export const IconObjectOverrides = `
|
|
58
13
|
& > span {
|
|
59
14
|
height: 16px;
|
|
60
15
|
width: 16px;
|
|
@@ -71,7 +26,7 @@ export const IconObjectOverridesResized = `
|
|
|
71
26
|
`;
|
|
72
27
|
|
|
73
28
|
// TODO: remove this override behaviour for @atlaskit/icon
|
|
74
|
-
export const
|
|
29
|
+
export const IconOverrides = `
|
|
75
30
|
& > * > span {
|
|
76
31
|
height: 16px;
|
|
77
32
|
width: 16px;
|
|
@@ -87,16 +42,15 @@ export const IconOverridesResized = `
|
|
|
87
42
|
`;
|
|
88
43
|
|
|
89
44
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
90
|
-
export const
|
|
45
|
+
export const IconWrapper = styled.span({
|
|
91
46
|
userSelect: 'none'
|
|
92
47
|
},
|
|
93
48
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
94
|
-
|
|
49
|
+
IconOverrides,
|
|
95
50
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
96
|
-
|
|
51
|
+
IconObjectOverrides);
|
|
97
52
|
|
|
98
53
|
// Wraps all emoji in Inline Links similar to icon
|
|
99
|
-
// Replace with EmojiWrapperResized during linking-platform-increase-inline-card-icon-size cleanup (EDM=10529)
|
|
100
54
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
101
55
|
export const EmojiWrapper = styled.span({
|
|
102
56
|
display: 'inline-block',
|
|
@@ -108,17 +62,6 @@ IconOverrides,
|
|
|
108
62
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
109
63
|
IconObjectOverrides);
|
|
110
64
|
|
|
111
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
112
|
-
export const EmojiWrapperResized = styled.span({
|
|
113
|
-
display: 'inline-block',
|
|
114
|
-
marginRight: "var(--ds-space-025, 2px)",
|
|
115
|
-
userSelect: 'none'
|
|
116
|
-
},
|
|
117
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
118
|
-
IconOverridesResized,
|
|
119
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
120
|
-
IconObjectOverridesResized);
|
|
121
|
-
|
|
122
65
|
// The main 'wrapping' element, title of the content.
|
|
123
66
|
// NB: `white-space` adds little whitespace before wrapping.
|
|
124
67
|
// NB: `word-break` line breaks as soon as an overflow takes place.
|
|
@@ -155,17 +98,8 @@ export const IconPositionWrapper = styled.span({
|
|
|
155
98
|
display: 'inline-block'
|
|
156
99
|
});
|
|
157
100
|
|
|
158
|
-
// Replace with IconEmptyWrapperResized during linking-platform-increase-inline-card-icon-size cleanup (EDM=10529)
|
|
159
101
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
160
102
|
export const IconEmptyWrapper = styled.span({
|
|
161
|
-
width: '14px',
|
|
162
|
-
height: '100%',
|
|
163
|
-
display: 'inline-block',
|
|
164
|
-
opacity: 0
|
|
165
|
-
});
|
|
166
|
-
|
|
167
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
168
|
-
export const IconEmptyWrapperResized = styled.span({
|
|
169
103
|
width: '16px',
|
|
170
104
|
height: '100%',
|
|
171
105
|
display: 'inline-block',
|
|
@@ -7,7 +7,7 @@ import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-m
|
|
|
7
7
|
import LinkWarningModal from './LinkWarningModal';
|
|
8
8
|
const PACKAGE_DATA = {
|
|
9
9
|
packageName: "@atlaskit/smart-card",
|
|
10
|
-
packageVersion: "
|
|
10
|
+
packageVersion: "29.0.0",
|
|
11
11
|
componentName: 'linkUrl'
|
|
12
12
|
};
|
|
13
13
|
const Link = withLinkClickedEvent('a');
|
package/dist/esm/client/index.js
CHANGED
|
@@ -1 +1,5 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-15961 Internal documentation for deprecation (no external access)}
|
|
3
|
+
* Remove access from entrypoint /client and use `@atlaskit/link-provider`
|
|
4
|
+
**/
|
|
1
5
|
export { CardClient as default } from '@atlaskit/link-provider';
|
package/dist/esm/index.js
CHANGED
|
@@ -1,14 +1,33 @@
|
|
|
1
|
-
|
|
1
|
+
/** @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-15961 Internal documentation for deprecation (no external access)} */
|
|
2
|
+
|
|
3
|
+
/** @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-15961 Internal documentation for deprecation (no external access)} */
|
|
4
|
+
export { SmartCardProvider as Provider, SmartCardContext } from './state';
|
|
5
|
+
|
|
6
|
+
/** @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-15961 Internal documentation for deprecation (no external access)} */
|
|
7
|
+
|
|
8
|
+
/** @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-15961 Internal documentation for deprecation (no external access)} */
|
|
9
|
+
|
|
10
|
+
/** @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-15961 Internal documentation for deprecation (no external access)} */
|
|
2
11
|
export { APIError } from '@atlaskit/linking-common';
|
|
12
|
+
|
|
13
|
+
/** @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-15961 Internal documentation for deprecation (no external access)} */
|
|
3
14
|
export { CardClient as Client } from '@atlaskit/link-provider';
|
|
4
15
|
export { Card } from './view/Card';
|
|
5
16
|
export { CardAction } from './view/Card/types';
|
|
17
|
+
|
|
18
|
+
/** @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-15961 Internal documentation for deprecation (no external access)} */
|
|
6
19
|
export { SmartCardContext as Context } from '@atlaskit/link-provider';
|
|
20
|
+
|
|
21
|
+
/** @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-15961 Internal documentation for deprecation (no external access)} */
|
|
22
|
+
|
|
7
23
|
export { EmbedResizeMessageListener } from './view/EmbedCard/EmbedResizeMessageListener';
|
|
8
24
|
export { ExpandedFrame } from './view/EmbedCard/components/ExpandedFrame';
|
|
9
25
|
export { embedHeaderHeight } from './view/EmbedCard/components/styled';
|
|
10
26
|
export { SmartLinkEvents } from './utils/analytics/analytics';
|
|
27
|
+
|
|
28
|
+
// This hook should be migrated to /hooks entrypoint
|
|
11
29
|
export { useSmartLinkEvents } from './view/SmartLinkEvents/useSmartLinkEvents';
|
|
30
|
+
|
|
12
31
|
// Classnames for integrators
|
|
13
32
|
export { contentFooterClassName, metadataListClassName, blockCardResolvingViewClassName, blockCardResolvedViewClassName, blockCardForbiddenViewClassName, blockCardIconImageClassName, blockCardResolvedViewByClassName, blockCardForbiddenViewLinkClassName, blockCardContentClassName, blockCardContentHeaderClassName, blockCardContentHeaderNameClassName, blockCardNotFoundViewClassName, blockCardErroredViewClassName } from './classNames';
|
|
14
33
|
export { loadingPlaceholderClassName } from './view/CardWithUrl/component-lazy/LazyFallback';
|
|
@@ -28,18 +28,14 @@ var applyCommonAttributes = function applyCommonAttributes(event, commonAttribut
|
|
|
28
28
|
* This hook provides usage of Smart Link analytics outside of the Card component.
|
|
29
29
|
* Can be provided to Card via the analyticsEvents prop to change the analytics events.
|
|
30
30
|
*
|
|
31
|
-
* @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-2681 Internal documentation for deprecation (no external access)}
|
|
32
|
-
* This hook's external use is deprecated and may no longer be exported from this package in future releases.
|
|
33
|
-
* Please avoid using it in conjunction with the `analyticsEvents` prop.
|
|
34
|
-
*
|
|
35
31
|
* @param url URL of the link
|
|
36
32
|
* @param dispatchAnalytics dispatchAnalytics function
|
|
37
33
|
* @param id fallback id of the events sent if no id is available
|
|
38
34
|
* @param defaultLocation location attribute to be used
|
|
39
35
|
* @returns
|
|
40
36
|
*/
|
|
41
|
-
export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url,
|
|
42
|
-
var _useDispatchAnalytics = useDispatchAnalytics(
|
|
37
|
+
export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, id, defaultLocation) {
|
|
38
|
+
var _useDispatchAnalytics = useDispatchAnalytics(),
|
|
43
39
|
dispatchAnalytics = _useDispatchAnalytics.dispatchAnalytics;
|
|
44
40
|
var defaultId = id || 'NULL';
|
|
45
41
|
// We don't want to trigger a re-render by using useSmartCardState
|
|
@@ -247,7 +243,6 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatch
|
|
|
247
243
|
* @param extensionKey The extensionKey of the Smart Link resovler invoked.
|
|
248
244
|
* @param actionType The type of the action that was clicked, e.g. PreviewAction
|
|
249
245
|
* @param display Whether the card was an Inline, Block, Embed or Flexible UI.
|
|
250
|
-
* @param invokeType @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-2681 Internal documentation for deprecation (no external access)}
|
|
251
246
|
* @returns
|
|
252
247
|
*/
|
|
253
248
|
actionClickedEvent: function actionClickedEvent(_ref6) {
|
|
@@ -746,11 +741,6 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatch
|
|
|
746
741
|
location: location
|
|
747
742
|
})), commonAttributes));
|
|
748
743
|
},
|
|
749
|
-
/**
|
|
750
|
-
* Removed in EDM-5153: This is an even from an experiment.
|
|
751
|
-
* @deprecated
|
|
752
|
-
*/
|
|
753
|
-
linkUpdated: function linkUpdated() {},
|
|
754
744
|
/**
|
|
755
745
|
* This fires a tracking event before an action invoke api call is made
|
|
756
746
|
*/
|