@atlaskit/smart-card 26.37.2 → 26.38.1

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.
Files changed (88) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/cjs/utils/analytics/analytics.js +1 -1
  3. package/dist/cjs/view/BlockCard/actions/flexible/AuthorizeAction.js +1 -0
  4. package/dist/cjs/view/BlockCard/index.js +5 -18
  5. package/dist/cjs/view/BlockCard/views/flexible/FlexibleErroredView.js +12 -34
  6. package/dist/cjs/view/BlockCard/views/flexible/FlexibleForbiddenView.js +25 -51
  7. package/dist/cjs/view/BlockCard/views/flexible/FlexibleForbiddenViewOld.js +13 -32
  8. package/dist/cjs/view/BlockCard/views/flexible/FlexibleNotFoundView.js +9 -31
  9. package/dist/cjs/view/BlockCard/views/flexible/FlexibleResolvedView.js +7 -18
  10. package/dist/cjs/view/BlockCard/views/flexible/FlexibleUnauthorisedView.js +28 -51
  11. package/dist/cjs/view/BlockCard/views/flexible/styled.js +5 -5
  12. package/dist/cjs/view/BlockCard/views/flexible/unresolved-view/index.js +41 -0
  13. package/dist/cjs/view/BlockCard/views/flexible/utils/index.js +30 -1
  14. package/dist/cjs/view/FlexibleCard/components/blocks/footer-block/index.js +12 -57
  15. package/dist/cjs/view/FlexibleCard/components/blocks/footer-block/resolved/index.js +65 -0
  16. package/dist/cjs/view/FlexibleCard/components/blocks/index.js +8 -1
  17. package/dist/cjs/view/FlexibleCard/components/blocks/snippet-block/index.js +4 -2
  18. package/dist/cjs/view/FlexibleCard/components/elements/text/index.js +3 -2
  19. package/dist/cjs/view/LinkUrl/index.js +1 -1
  20. package/dist/es2019/utils/analytics/analytics.js +1 -1
  21. package/dist/es2019/view/BlockCard/actions/flexible/AuthorizeAction.js +1 -0
  22. package/dist/es2019/view/BlockCard/index.js +1 -15
  23. package/dist/es2019/view/BlockCard/views/flexible/FlexibleErroredView.js +8 -32
  24. package/dist/es2019/view/BlockCard/views/flexible/FlexibleForbiddenView.js +25 -52
  25. package/dist/es2019/view/BlockCard/views/flexible/FlexibleForbiddenViewOld.js +12 -31
  26. package/dist/es2019/view/BlockCard/views/flexible/FlexibleNotFoundView.js +15 -41
  27. package/dist/es2019/view/BlockCard/views/flexible/FlexibleResolvedView.js +10 -21
  28. package/dist/es2019/view/BlockCard/views/flexible/FlexibleUnauthorisedView.js +24 -43
  29. package/dist/es2019/view/BlockCard/views/flexible/styled.js +3 -4
  30. package/dist/es2019/view/BlockCard/views/flexible/unresolved-view/index.js +33 -0
  31. package/dist/es2019/view/BlockCard/views/flexible/utils/index.js +27 -2
  32. package/dist/es2019/view/FlexibleCard/components/blocks/footer-block/index.js +11 -54
  33. package/dist/es2019/view/FlexibleCard/components/blocks/footer-block/resolved/index.js +56 -0
  34. package/dist/es2019/view/FlexibleCard/components/blocks/index.js +4 -1
  35. package/dist/es2019/view/FlexibleCard/components/blocks/snippet-block/index.js +3 -1
  36. package/dist/es2019/view/FlexibleCard/components/elements/text/index.js +3 -2
  37. package/dist/es2019/view/LinkUrl/index.js +1 -1
  38. package/dist/esm/utils/analytics/analytics.js +1 -1
  39. package/dist/esm/view/BlockCard/actions/flexible/AuthorizeAction.js +1 -0
  40. package/dist/esm/view/BlockCard/index.js +3 -18
  41. package/dist/esm/view/BlockCard/views/flexible/FlexibleErroredView.js +12 -34
  42. package/dist/esm/view/BlockCard/views/flexible/FlexibleForbiddenView.js +26 -52
  43. package/dist/esm/view/BlockCard/views/flexible/FlexibleForbiddenViewOld.js +13 -32
  44. package/dist/esm/view/BlockCard/views/flexible/FlexibleNotFoundView.js +9 -31
  45. package/dist/esm/view/BlockCard/views/flexible/FlexibleResolvedView.js +10 -21
  46. package/dist/esm/view/BlockCard/views/flexible/FlexibleUnauthorisedView.js +25 -45
  47. package/dist/esm/view/BlockCard/views/flexible/styled.js +4 -4
  48. package/dist/esm/view/BlockCard/views/flexible/unresolved-view/index.js +35 -0
  49. package/dist/esm/view/BlockCard/views/flexible/utils/index.js +30 -1
  50. package/dist/esm/view/FlexibleCard/components/blocks/footer-block/index.js +13 -54
  51. package/dist/esm/view/FlexibleCard/components/blocks/footer-block/resolved/index.js +55 -0
  52. package/dist/esm/view/FlexibleCard/components/blocks/index.js +4 -1
  53. package/dist/esm/view/FlexibleCard/components/blocks/snippet-block/index.js +4 -2
  54. package/dist/esm/view/FlexibleCard/components/elements/text/index.js +3 -2
  55. package/dist/esm/view/LinkUrl/index.js +1 -1
  56. package/dist/types/view/BlockCard/views/flexible/FlexibleUnauthorisedView.d.ts +3 -1
  57. package/dist/types/view/BlockCard/views/flexible/styled.d.ts +0 -1
  58. package/dist/types/view/BlockCard/views/flexible/types.d.ts +2 -83
  59. package/dist/types/view/BlockCard/views/flexible/unresolved-view/index.d.ts +4 -0
  60. package/dist/types/view/BlockCard/views/flexible/unresolved-view/types.d.ts +7 -0
  61. package/dist/types/view/BlockCard/views/flexible/utils/index.d.ts +8 -0
  62. package/dist/types/view/FlexibleCard/components/blocks/footer-block/resolved/index.d.ts +4 -0
  63. package/dist/types/view/FlexibleCard/components/blocks/index.d.ts +1 -0
  64. package/dist/types/view/FlexibleCard/components/blocks/snippet-block/types.d.ts +4 -0
  65. package/dist/types/view/FlexibleCard/components/elements/text/types.d.ts +4 -0
  66. package/dist/types-ts4.5/view/BlockCard/views/flexible/FlexibleUnauthorisedView.d.ts +3 -1
  67. package/dist/types-ts4.5/view/BlockCard/views/flexible/styled.d.ts +0 -1
  68. package/dist/types-ts4.5/view/BlockCard/views/flexible/types.d.ts +2 -83
  69. package/dist/types-ts4.5/view/BlockCard/views/flexible/unresolved-view/index.d.ts +4 -0
  70. package/dist/types-ts4.5/view/BlockCard/views/flexible/unresolved-view/types.d.ts +7 -0
  71. package/dist/types-ts4.5/view/BlockCard/views/flexible/utils/index.d.ts +8 -0
  72. package/dist/types-ts4.5/view/FlexibleCard/components/blocks/footer-block/resolved/index.d.ts +4 -0
  73. package/dist/types-ts4.5/view/FlexibleCard/components/blocks/index.d.ts +1 -0
  74. package/dist/types-ts4.5/view/FlexibleCard/components/blocks/snippet-block/types.d.ts +4 -0
  75. package/dist/types-ts4.5/view/FlexibleCard/components/elements/text/types.d.ts +4 -0
  76. package/package.json +1 -1
  77. package/report.api.md +1 -0
  78. package/tmp/api-report-tmp.d.ts +1 -0
  79. package/dist/cjs/view/BlockCard/components/flexible/footer/index.js +0 -56
  80. package/dist/es2019/view/BlockCard/components/flexible/footer/index.js +0 -52
  81. package/dist/esm/view/BlockCard/components/flexible/footer/index.js +0 -49
  82. package/dist/types/view/BlockCard/components/flexible/footer/index.d.ts +0 -12
  83. package/dist/types/view/BlockCard/components/flexible/footer/types.d.ts +0 -5
  84. package/dist/types-ts4.5/view/BlockCard/components/flexible/footer/index.d.ts +0 -12
  85. package/dist/types-ts4.5/view/BlockCard/components/flexible/footer/types.d.ts +0 -5
  86. /package/dist/cjs/view/BlockCard/{components/flexible/footer → views/flexible/unresolved-view}/types.js +0 -0
  87. /package/dist/es2019/view/BlockCard/{components/flexible/footer → views/flexible/unresolved-view}/types.js +0 -0
  88. /package/dist/esm/view/BlockCard/{components/flexible/footer → views/flexible/unresolved-view}/types.js +0 -0
@@ -1,17 +1,14 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import React, { useMemo } from 'react';
3
- import FlexibleCard from '../../../FlexibleCard';
4
- import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
5
- import { CustomBlock } from '../../../FlexibleCard/components/blocks';
6
3
  import { R300 } from '@atlaskit/theme/colors';
7
4
  import { messages } from '../../../../messages';
8
5
  import LockIcon from '@atlaskit/icon/glyph/lock-filled';
9
- import BlockCardFooter from '../../components/flexible/footer';
10
6
  import { ForbiddenAction } from '../../actions/flexible/ForbiddenAction';
11
7
  import Text from '../../../FlexibleCard/components/elements/text';
12
8
  import { getForbiddenJsonLd } from '../../../../utils/jsonld';
13
9
  import { extractProvider } from '@atlaskit/link-extractors';
14
10
  import { extractRequestAccessContext } from '../../../../extractors/common/context';
11
+ import UnresolvedView from './unresolved-view';
15
12
  import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
16
13
 
17
14
  /**
@@ -20,17 +17,15 @@ import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardSty
20
17
  * @deprecated Replaced by FlexibleForbiddenView
21
18
  */
22
19
  const FlexibleForbiddenView = ({
23
- anchorTarget,
24
- cardState,
25
- onAuthorize,
26
- onClick,
27
- onError,
28
20
  testId = 'smart-block-forbidden-view',
29
- url,
30
- titleBlockProps
21
+ ...props
31
22
  }) => {
32
23
  var _details$meta;
33
- const status = cardState.status;
24
+ const {
25
+ cardState,
26
+ onAuthorize,
27
+ url
28
+ } = props;
34
29
  const details = cardState === null || cardState === void 0 ? void 0 : cardState.details;
35
30
  const cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : getForbiddenJsonLd().meta;
36
31
  const provider = extractProvider(details === null || details === void 0 ? void 0 : details.data);
@@ -55,21 +50,10 @@ const FlexibleForbiddenView = ({
55
50
  }
56
51
  return [...tryAnotherAccountAction, ...actionFromAccessContext];
57
52
  }, [onAuthorize, requestAccessContext, providerName]);
58
- return /*#__PURE__*/React.createElement(FlexibleCard, {
59
- appearance: "block",
60
- cardState: cardState,
61
- onAuthorize: onAuthorize,
62
- onClick: onClick,
63
- onError: onError,
64
- testId: testId,
65
- ui: {
66
- hideElevation: true
67
- },
68
- url: url
69
- }, /*#__PURE__*/React.createElement(TitleBlock, _extends({
70
- hideRetry: true,
71
- anchorTarget: anchorTarget
72
- }, titleBlockProps)), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(LockIcon, {
53
+ return /*#__PURE__*/React.createElement(UnresolvedView, _extends({}, props, {
54
+ actions: actions,
55
+ testId: testId
56
+ }), /*#__PURE__*/React.createElement(LockIcon, {
73
57
  label: "forbidden-lock-icon",
74
58
  size: "small",
75
59
  primaryColor: `var(--ds-icon-danger, ${R300})`,
@@ -81,10 +65,7 @@ const FlexibleForbiddenView = ({
81
65
  context: providerName
82
66
  }
83
67
  }
84
- })), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
85
- actions: actions,
86
- status: status
87
- })));
68
+ }));
88
69
  };
89
70
 
90
71
  /**
@@ -1,13 +1,10 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import React from 'react';
3
- import FlexibleCard from '../../../FlexibleCard';
4
- import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
5
3
  import { messages } from '../../../../messages';
6
4
  import WarningIcon from '@atlaskit/icon/glyph/warning';
7
5
  import { R300 } from '@atlaskit/theme/colors';
8
- import BlockCardFooter from '../../components/flexible/footer';
9
6
  import Text from '../../../FlexibleCard/components/elements/text';
10
- import { CustomBlock } from '../../../FlexibleCard/components/blocks';
7
+ import UnresolvedView from './unresolved-view';
11
8
  import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
12
9
 
13
10
  /**
@@ -17,42 +14,19 @@ import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardSty
17
14
  * @see FlexibleCardProps
18
15
  */
19
16
  const FlexibleNotFoundView = ({
20
- anchorTarget,
21
- cardState,
22
- onAuthorize,
23
- onError,
24
- url,
25
- onClick,
26
17
  testId = 'smart-block-not-found-view',
27
- titleBlockProps
28
- }) => {
29
- const status = cardState.status;
30
- return /*#__PURE__*/React.createElement(FlexibleCard, {
31
- appearance: "block",
32
- cardState: cardState,
33
- onAuthorize: onAuthorize,
34
- onClick: onClick,
35
- onError: onError,
36
- testId: testId,
37
- ui: {
38
- hideElevation: true
39
- },
40
- url: url
41
- }, /*#__PURE__*/React.createElement(TitleBlock, _extends({
42
- hideRetry: true,
43
- anchorTarget: anchorTarget
44
- }, titleBlockProps)), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(WarningIcon, {
45
- label: "not-found-warning-icon",
46
- size: "small",
47
- primaryColor: `var(--ds-icon-warning, ${R300})`,
48
- testId: `${testId}-warning-icon`
49
- }), /*#__PURE__*/React.createElement(Text, {
50
- message: {
51
- descriptor: messages.not_found_description
52
- },
53
- testId: `${testId}-message`
54
- })), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
55
- status: status
56
- })));
57
- };
18
+ ...props
19
+ }) => /*#__PURE__*/React.createElement(UnresolvedView, _extends({}, props, {
20
+ testId: testId
21
+ }), /*#__PURE__*/React.createElement(WarningIcon, {
22
+ label: "not-found-warning-icon",
23
+ size: "small",
24
+ primaryColor: `var(--ds-icon-warning, ${R300})`,
25
+ testId: `${testId}-warning-icon`
26
+ }), /*#__PURE__*/React.createElement(Text, {
27
+ message: {
28
+ descriptor: messages.not_found_description
29
+ },
30
+ testId: `${testId}-message`
31
+ }));
58
32
  export default withFlexibleUIBlockCardStyle(FlexibleNotFoundView);
@@ -2,9 +2,9 @@ import _extends from "@babel/runtime/helpers/extends";
2
2
  import React, { useEffect, useMemo, useState } from 'react';
3
3
  import FlexibleCard from '../../../FlexibleCard';
4
4
  import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock, TitleBlock } from '../../../FlexibleCard/components/blocks';
5
- import { metadataBlockCss, footerBlockCss } from './styled';
6
- import { ActionName, ElementName, MediaPlacement, SmartLinkPosition } from '../../../../constants';
7
- import { getSimulatedMetadata, getSimulatedBetterMetadata } from './utils';
5
+ import { metadataBlockCss } from './styled';
6
+ import { ActionName, ElementName, SmartLinkPosition } from '../../../../constants';
7
+ import { getSimulatedMetadata, getSimulatedBetterMetadata, getTitleBlockOptions, getFooterBlockOptions, PreviewBlockOptions, FlexibleCardUiOptions } from './utils';
8
8
  import { getBooleanFF } from '@atlaskit/platform-feature-flags';
9
9
  import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
10
10
  /**
@@ -18,11 +18,9 @@ const FlexibleResolvedView = ({
18
18
  onError,
19
19
  onResolve,
20
20
  showServerActions,
21
- anchorTarget,
22
21
  testId = 'smart-block-resolved-view',
23
22
  url,
24
- analytics,
25
- titleBlockProps
23
+ analytics
26
24
  }) => {
27
25
  const [isPreviewBlockErrored, setIsPreviewBlockErrored] = useState(false);
28
26
  useEffect(() => {
@@ -55,20 +53,15 @@ const FlexibleResolvedView = ({
55
53
  onResolve: onResolve,
56
54
  showServerActions: showServerActions,
57
55
  testId: testId,
58
- ui: {
59
- hideElevation: true
60
- },
56
+ ui: FlexibleCardUiOptions,
61
57
  url: url
62
- }, /*#__PURE__*/React.createElement(TitleBlock, _extends({
63
- position: SmartLinkPosition.Center,
58
+ }, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, getTitleBlockOptions(), {
64
59
  metadata: titleMetadata,
65
- hideRetry: true,
66
60
  subtitle: [{
67
61
  name: ElementName.Location
68
62
  }],
69
- metadataPosition: SmartLinkPosition.Top,
70
- anchorTarget: anchorTarget
71
- }, titleBlockProps)), /*#__PURE__*/React.createElement(MetadataBlock, _extends({
63
+ metadataPosition: SmartLinkPosition.Top
64
+ })), /*#__PURE__*/React.createElement(MetadataBlock, _extends({
72
65
  primary: topMetadata,
73
66
  maxLines: 1
74
67
  }, getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
@@ -77,15 +70,11 @@ const FlexibleResolvedView = ({
77
70
  primary: bottomMetadata,
78
71
  maxLines: 1,
79
72
  overrideCss: metadataBlockCss
80
- }), !isPreviewBlockErrored ? /*#__PURE__*/React.createElement(PreviewBlock, {
81
- placement: MediaPlacement.Right,
82
- ignoreContainerPadding: true,
73
+ }), !isPreviewBlockErrored ? /*#__PURE__*/React.createElement(PreviewBlock, _extends({}, PreviewBlockOptions, {
83
74
  onError: () => {
84
75
  setIsPreviewBlockErrored(true);
85
76
  }
86
- }) : null, /*#__PURE__*/React.createElement(FooterBlock, _extends({}, getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
87
- overrideCss: footerBlockCss
88
- }, {
77
+ })) : null, /*#__PURE__*/React.createElement(FooterBlock, _extends({}, getFooterBlockOptions(), {
89
78
  actions: footerActions
90
79
  })));
91
80
  };
@@ -1,19 +1,17 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
- import React, { useCallback, useMemo } from 'react';
2
+ /** @jsx jsx */
3
+ import { css, jsx } from '@emotion/react';
4
+ import { useCallback, useMemo } from 'react';
3
5
  import { FormattedMessage } from 'react-intl-next';
4
- import FlexibleCard from '../../../FlexibleCard';
6
+ import { getExtensionKey } from '../../../../state/helpers';
5
7
  import { AuthorizeAction } from '../../actions/flexible/AuthorizeAction';
6
- import BlockCardFooter from '../../components/flexible/footer';
7
- import { CustomBlock, TitleBlock } from '../../../FlexibleCard/components/blocks';
8
- import { SmartLinkStatus } from '../../../../constants';
9
8
  import { extractProvider } from '@atlaskit/link-extractors';
10
9
  import UnauthorisedViewContent from '../../../common/UnauthorisedViewContent';
11
- import { css } from '@emotion/react';
12
- import { tokens } from '../../../../utils/token';
13
10
  import { messages } from '../../../../messages';
11
+ import UnresolvedView from './unresolved-view';
14
12
  import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
15
13
  const contentStyles = css`
16
- color: ${tokens.text};
14
+ color: ${"var(--ds-text-subtlest, #626F86)"};
17
15
  margin-top: 0.5rem;
18
16
  font-size: 0.75rem;
19
17
  `;
@@ -26,59 +24,42 @@ const contentStyles = css`
26
24
  * @see FlexibleCardProps
27
25
  */
28
26
  const FlexibleUnauthorisedView = ({
29
- anchorTarget,
30
- analytics,
31
- cardState,
32
- extensionKey = '',
33
- onAuthorize,
34
- onClick,
35
- onError,
36
27
  testId = 'smart-block-unauthorized-view',
37
- url,
38
- titleBlockProps
28
+ ...props
39
29
  }) => {
40
- var _cardState$details, _extractProvider;
30
+ var _getExtensionKey, _cardState$details, _extractProvider;
31
+ const {
32
+ analytics,
33
+ cardState,
34
+ onAuthorize
35
+ } = props;
36
+ const extensionKey = (_getExtensionKey = getExtensionKey(cardState === null || cardState === void 0 ? void 0 : cardState.details)) !== null && _getExtensionKey !== void 0 ? _getExtensionKey : '';
41
37
  const data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
42
38
  const providerName = (_extractProvider = extractProvider(data)) === null || _extractProvider === void 0 ? void 0 : _extractProvider.text;
43
39
  const handleAuthorize = useCallback(() => {
44
40
  if (onAuthorize) {
45
- analytics.track.appAccountAuthStarted({
41
+ analytics === null || analytics === void 0 ? void 0 : analytics.track.appAccountAuthStarted({
46
42
  extensionKey
47
43
  });
48
44
  onAuthorize();
49
45
  }
50
- }, [onAuthorize, extensionKey, analytics.track]);
51
- const content = useMemo(() => onAuthorize ? /*#__PURE__*/React.createElement(UnauthorisedViewContent, {
46
+ }, [onAuthorize, extensionKey, analytics === null || analytics === void 0 ? void 0 : analytics.track]);
47
+ const content = useMemo(() => onAuthorize ? jsx(UnauthorisedViewContent, {
52
48
  providerName: providerName,
53
49
  analytics: analytics,
54
50
  testId: testId
55
- }) : /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages[providerName ? 'unauthorised_account_description' : 'unauthorised_account_description_no_provider'], {
51
+ }) : jsx(FormattedMessage, _extends({}, messages[providerName ? 'unauthorised_account_description' : 'unauthorised_account_description_no_provider'], {
56
52
  values: {
57
53
  context: providerName
58
54
  }
59
55
  })), [analytics, onAuthorize, providerName, testId]);
60
56
  const actions = useMemo(() => onAuthorize ? [AuthorizeAction(handleAuthorize, providerName)] : [], [handleAuthorize, onAuthorize, providerName]);
61
- return /*#__PURE__*/React.createElement(FlexibleCard, {
62
- appearance: "block",
63
- cardState: cardState,
64
- onAuthorize: onAuthorize,
65
- onClick: onClick,
66
- onError: onError,
67
- testId: testId,
68
- ui: {
69
- hideElevation: true
70
- },
71
- url: url
72
- }, /*#__PURE__*/React.createElement(TitleBlock, _extends({
73
- hideRetry: true,
74
- anchorTarget: anchorTarget
75
- }, titleBlockProps)), /*#__PURE__*/React.createElement(CustomBlock, {
76
- overrideCss: contentStyles,
77
- testId: `${testId}-content`
78
- }, /*#__PURE__*/React.createElement("div", null, content)), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
57
+ return jsx(UnresolvedView, _extends({}, props, {
79
58
  actions: actions,
80
- status: SmartLinkStatus.Unauthorized,
81
- actionGroupAppearance: "primary"
82
- })));
59
+ testId: testId
60
+ }), jsx("div", {
61
+ css: contentStyles,
62
+ "data-testid": `${testId}-content`
63
+ }, content));
83
64
  };
84
65
  export default withFlexibleUIBlockCardStyle(FlexibleUnauthorisedView);
@@ -4,11 +4,13 @@ import { N40 } from '@atlaskit/theme/colors';
4
4
  import { getBooleanFF } from '@atlaskit/platform-feature-flags';
5
5
 
6
6
  // in editor prosemirror adds padding-left so we need to overwrite it
7
+ // renderer overwrites the margin-right so we need to add it here
7
8
  export const metadataBlockCss = css`
8
9
  /* primary element group */
9
10
  span[data-smart-element-avatar-group] {
10
11
  > ul {
11
12
  padding-left: 0px;
13
+ margin-right: 0.5rem;
12
14
  }
13
15
  }
14
16
  [data-smart-element-group] {
@@ -44,7 +46,4 @@ const refreshedFlexibleBlockCardStyle = css`
44
46
  border: 1px solid ${`var(--ds-border, ${N40})`};
45
47
  }
46
48
  `;
47
- export const flexibleBlockCardStyle = getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? refreshedFlexibleBlockCardStyle : flexibleBlockCardElevationStyle;
48
- export const forbiddenViewTitleStyle = css`
49
- font-weight: 600;
50
- `;
49
+ export const flexibleBlockCardStyle = getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? refreshedFlexibleBlockCardStyle : flexibleBlockCardElevationStyle;
@@ -0,0 +1,33 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import { CustomBlock, PreviewBlock, TitleBlock } from '../../../../FlexibleCard/components/blocks';
3
+ import React from 'react';
4
+ import FlexibleCard from '../../../../FlexibleCard';
5
+ import { InternalFooterBlock } from '../../../../FlexibleCard/components/blocks';
6
+ import { FlexibleCardUiOptions, getFooterBlockOptions, PreviewBlockOptions, getTitleBlockOptions } from '../utils';
7
+ const UnresolvedView = ({
8
+ actions,
9
+ cardState,
10
+ children,
11
+ onAuthorize,
12
+ onClick,
13
+ onError,
14
+ showPreview = false,
15
+ testId,
16
+ title,
17
+ url
18
+ }) => /*#__PURE__*/React.createElement(FlexibleCard, {
19
+ appearance: "block",
20
+ cardState: cardState,
21
+ onAuthorize: onAuthorize,
22
+ onClick: onClick,
23
+ onError: onError,
24
+ testId: testId,
25
+ ui: FlexibleCardUiOptions,
26
+ url: url
27
+ }, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, getTitleBlockOptions(), {
28
+ text: title
29
+ })), /*#__PURE__*/React.createElement(CustomBlock, null, children), showPreview && /*#__PURE__*/React.createElement(PreviewBlock, PreviewBlockOptions), /*#__PURE__*/React.createElement(InternalFooterBlock, _extends({}, getFooterBlockOptions(), {
30
+ actions: actions,
31
+ testId: "smart-block-card-footer"
32
+ })));
33
+ export default UnresolvedView;
@@ -1,6 +1,8 @@
1
- import { ElementName } from '../../../../../constants';
1
+ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
2
+ import { ElementName, MediaPlacement, SmartLinkPosition, SmartLinkSize } from '../../../../../constants';
2
3
  import { extractOwnedBy } from '../../../../../extractors/flexible/utils';
3
4
  import { getExtensionKey } from '../../../../../state/helpers';
5
+ import { footerBlockCss, titleBlockCss } from '../styled';
4
6
  const baseTopMetadata = [{
5
7
  name: ElementName.ModifiedOn
6
8
  }, {
@@ -134,4 +136,27 @@ export const getSimulatedMetadata = cardDetails => {
134
136
  titleMetadata,
135
137
  topMetadata
136
138
  };
137
- };
139
+ };
140
+ export const FlexibleCardUiOptions = {
141
+ hideElevation: true
142
+ };
143
+
144
+ // Due to the use of getBooleanFF(), this has to be a function.
145
+ // Make this a const object after ff cleanup.
146
+ export const getTitleBlockOptions = () => ({
147
+ anchorTarget: getBooleanFF('platform.linking-platform.smart-card.enable-block-card-clicks-opening-in-same-tab') ? '_self' : undefined,
148
+ position: SmartLinkPosition.Center,
149
+ overrideCss: titleBlockCss,
150
+ hideRetry: true,
151
+ size: getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? SmartLinkSize.Large : undefined
152
+ });
153
+ export const PreviewBlockOptions = {
154
+ placement: MediaPlacement.Right,
155
+ ignoreContainerPadding: true
156
+ };
157
+
158
+ // Due to the use of getBooleanFF(), this has to be a function.
159
+ // Make this a const object after ff cleanup.
160
+ export const getFooterBlockOptions = () => ({
161
+ overrideCss: getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? footerBlockCss : undefined
162
+ });
@@ -1,23 +1,7 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
- import React, { useCallback, useMemo } from 'react';
3
- import { css } from '@emotion/react';
4
- import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkStatus, SmartLinkWidth } from '../../../../../constants';
5
- import Block from '../block';
6
- import ElementGroup from '../element-group';
7
- import { Provider } from '../../elements';
8
- import ActionGroup from '../action-group';
9
- import { filterActionItems } from '../utils';
10
- import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
11
- const getActionGroupStyles = size => {
12
- if (size === SmartLinkSize.XLarge) {
13
- // The biggest height of the action button exceeds the max line-height
14
- // of the elements causing the action on the block with x-large size to
15
- // get cut at the bottom.
16
- return css`
17
- max-height: 2rem;
18
- `;
19
- }
20
- };
2
+ import React from 'react';
3
+ import FooterBlockResolvedView from './resolved';
4
+ import { SmartLinkStatus } from '../../../../../constants';
21
5
 
22
6
  /**
23
7
  * Represents a FooterBlock, designed to contain elements and actions that should appear
@@ -26,43 +10,16 @@ const getActionGroupStyles = size => {
26
10
  * @param {FooterBlockProps} FooterBlockProps
27
11
  * @see Block
28
12
  */
29
- const FooterBlock = props => {
30
- const {
31
- status,
32
- actions,
33
- size = SmartLinkSize.Medium,
34
- testId = 'smart-footer-block',
35
- onActionMenuOpenChange
36
- } = props;
37
- const context = useFlexibleUiContext();
38
- const hasActions = useMemo(() => {
39
- var _filterActionItems;
40
- return ((_filterActionItems = filterActionItems(actions, context)) === null || _filterActionItems === void 0 ? void 0 : _filterActionItems.length) > 0;
41
- }, [actions, context]);
42
- const onDropdownOpenChange = useCallback(isOpen => {
43
- if (onActionMenuOpenChange) {
44
- onActionMenuOpenChange({
45
- isOpen
46
- });
47
- }
48
- }, [onActionMenuOpenChange]);
13
+ const FooterBlock = ({
14
+ status,
15
+ testId = 'smart-footer-block',
16
+ ...props
17
+ }) => {
49
18
  if (status !== SmartLinkStatus.Resolved) {
50
19
  return null;
51
20
  }
52
- return /*#__PURE__*/React.createElement(Block, _extends({}, props, {
53
- testId: `${testId}-resolved-view`
54
- }), /*#__PURE__*/React.createElement(Provider, {
55
- testId: `${testId}-provider`
56
- }), actions && hasActions ? /*#__PURE__*/React.createElement(ElementGroup, {
57
- testId: "smart-element-group-actions",
58
- align: SmartLinkAlignment.Right,
59
- direction: SmartLinkDirection.Horizontal,
60
- overrideCss: getActionGroupStyles(size),
61
- width: SmartLinkWidth.Flexible
62
- }, /*#__PURE__*/React.createElement(ActionGroup, {
63
- onDropdownOpenChange: onDropdownOpenChange,
64
- items: actions,
65
- appearance: "default"
66
- })) : null);
21
+ return /*#__PURE__*/React.createElement(FooterBlockResolvedView, _extends({}, props, {
22
+ testId: testId
23
+ }));
67
24
  };
68
25
  export default FooterBlock;
@@ -0,0 +1,56 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import { css } from '@emotion/react';
3
+ import React, { useCallback, useMemo } from 'react';
4
+ import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../../../../constants';
5
+ import { useFlexibleUiContext } from '../../../../../../state/flexible-ui-context';
6
+ import { Provider } from '../../../elements';
7
+ import ActionGroup from '../../action-group';
8
+ import Block from '../../block';
9
+ import ElementGroup from '../../element-group';
10
+ import { filterActionItems } from '../../utils';
11
+ const getActionGroupStyles = size => {
12
+ if (size === SmartLinkSize.XLarge) {
13
+ // The biggest height of the action button exceeds the max line-height
14
+ // of the elements causing the action on the block with x-large size to
15
+ // get cut at the bottom.
16
+ return css`
17
+ max-height: 2rem;
18
+ `;
19
+ }
20
+ };
21
+ const FooterBlockResolvedView = props => {
22
+ const {
23
+ actions,
24
+ testId,
25
+ onActionMenuOpenChange,
26
+ size = SmartLinkSize.Medium
27
+ } = props;
28
+ const context = useFlexibleUiContext();
29
+ const hasActions = useMemo(() => {
30
+ var _filterActionItems;
31
+ return ((_filterActionItems = filterActionItems(actions, context)) === null || _filterActionItems === void 0 ? void 0 : _filterActionItems.length) > 0;
32
+ }, [actions, context]);
33
+ const onDropdownOpenChange = useCallback(isOpen => {
34
+ if (onActionMenuOpenChange) {
35
+ onActionMenuOpenChange({
36
+ isOpen
37
+ });
38
+ }
39
+ }, [onActionMenuOpenChange]);
40
+ return /*#__PURE__*/React.createElement(Block, _extends({}, props, {
41
+ testId: `${testId}-resolved-view`
42
+ }), /*#__PURE__*/React.createElement(Provider, {
43
+ testId: `${testId}-provider`
44
+ }), actions && hasActions ? /*#__PURE__*/React.createElement(ElementGroup, {
45
+ testId: "smart-element-group-actions",
46
+ align: SmartLinkAlignment.Right,
47
+ direction: SmartLinkDirection.Horizontal,
48
+ overrideCss: getActionGroupStyles(size),
49
+ width: SmartLinkWidth.Flexible
50
+ }, /*#__PURE__*/React.createElement(ActionGroup, {
51
+ onDropdownOpenChange: onDropdownOpenChange,
52
+ items: actions,
53
+ appearance: "default"
54
+ })) : null);
55
+ };
56
+ export default FooterBlockResolvedView;
@@ -3,4 +3,7 @@ export { default as MetadataBlock } from './metadata-block';
3
3
  export { default as PreviewBlock } from './preview-block';
4
4
  export { default as SnippetBlock } from './snippet-block';
5
5
  export { default as TitleBlock } from './title-block';
6
- export { default as CustomBlock } from './block';
6
+ export { default as CustomBlock } from './block';
7
+
8
+ // Internal components to be used within @atlaskit/smart-card only.
9
+ export { default as InternalFooterBlock } from './footer-block/resolved';
@@ -18,6 +18,7 @@ const SnippetBlock = ({
18
18
  maxLines = DEFAULT_MAX_LINES,
19
19
  status = SmartLinkStatus.Fallback,
20
20
  testId = 'smart-block-snippet',
21
+ text,
21
22
  ...blockProps
22
23
  }) => {
23
24
  if (status !== SmartLinkStatus.Resolved) {
@@ -27,7 +28,8 @@ const SnippetBlock = ({
27
28
  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
28
29
  testId: `${testId}-resolved-view`
29
30
  }), /*#__PURE__*/React.createElement(Snippet, {
30
- maxLines: snippetMaxLines
31
+ maxLines: snippetMaxLines,
32
+ text: text
31
33
  }));
32
34
  };
33
35
  export default SnippetBlock;
@@ -23,7 +23,8 @@ const Text = ({
23
23
  message,
24
24
  name,
25
25
  overrideCss,
26
- testId = 'smart-element-text'
26
+ testId = 'smart-element-text',
27
+ text
27
28
  }) => {
28
29
  if (!message && !content) {
29
30
  return null;
@@ -34,6 +35,6 @@ const Text = ({
34
35
  "data-smart-element": name,
35
36
  "data-smart-element-text": true,
36
37
  "data-testid": testId
37
- }, getFormattedMessage(message) || content);
38
+ }, text ? text : getFormattedMessage(message) || content);
38
39
  };
39
40
  export default Text;
@@ -8,7 +8,7 @@ import LinkWarningModal from './LinkWarningModal';
8
8
  import { getBooleanFF } from '@atlaskit/platform-feature-flags';
9
9
  const PACKAGE_DATA = {
10
10
  packageName: "@atlaskit/smart-card",
11
- packageVersion: "26.37.2",
11
+ packageVersion: "26.38.1",
12
12
  componentName: 'linkUrl'
13
13
  };
14
14
  const Link = withLinkClickedEvent('a');
@@ -15,7 +15,7 @@ export var ANALYTICS_CHANNEL = 'media';
15
15
  export var context = {
16
16
  componentName: 'smart-cards',
17
17
  packageName: "@atlaskit/smart-card",
18
- packageVersion: "26.37.2"
18
+ packageVersion: "26.38.1"
19
19
  };
20
20
  export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
21
21
  TrackQuickActionType["StatusUpdate"] = "StatusUpdate";
@@ -13,6 +13,7 @@ import { messages } from '../../../../messages';
13
13
  */
14
14
  export var AuthorizeAction = function AuthorizeAction(onAuthorize, providerName) {
15
15
  return {
16
+ appearance: 'primary',
16
17
  name: ActionName.CustomAction,
17
18
  content: providerName ? /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_unauthorised_account_action, {
18
19
  values: {