@atlaskit/smart-card 18.0.17 → 18.0.20

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 (182) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/client/package.json +1 -0
  3. package/dist/cjs/i18n/cs.js +43 -0
  4. package/dist/cjs/i18n/da.js +43 -0
  5. package/dist/cjs/i18n/de.js +43 -0
  6. package/dist/cjs/i18n/en.js +43 -0
  7. package/dist/cjs/i18n/en_GB.js +43 -0
  8. package/dist/cjs/i18n/en_ZZ.js +43 -0
  9. package/dist/cjs/i18n/es.js +43 -0
  10. package/dist/cjs/i18n/et.js +16 -0
  11. package/dist/cjs/i18n/fi.js +43 -0
  12. package/dist/cjs/i18n/fr.js +43 -0
  13. package/dist/cjs/i18n/hu.js +43 -0
  14. package/dist/cjs/i18n/it.js +43 -0
  15. package/dist/cjs/i18n/ja.js +43 -0
  16. package/dist/cjs/i18n/ko.js +43 -0
  17. package/dist/cjs/i18n/nb.js +43 -0
  18. package/dist/cjs/i18n/nl.js +43 -0
  19. package/dist/cjs/i18n/pl.js +43 -0
  20. package/dist/cjs/i18n/pt_BR.js +43 -0
  21. package/dist/cjs/i18n/pt_PT.js +16 -0
  22. package/dist/cjs/i18n/ru.js +43 -0
  23. package/dist/cjs/i18n/sk.js +16 -0
  24. package/dist/cjs/i18n/sv.js +43 -0
  25. package/dist/cjs/i18n/th.js +43 -0
  26. package/dist/cjs/i18n/tr.js +43 -0
  27. package/dist/cjs/i18n/uk.js +43 -0
  28. package/dist/cjs/i18n/vi.js +43 -0
  29. package/dist/cjs/i18n/zh.js +43 -0
  30. package/dist/cjs/i18n/zh_TW.js +43 -0
  31. package/dist/cjs/utils/token.js +1 -0
  32. package/dist/cjs/version.json +1 -1
  33. package/dist/cjs/view/FlexibleCard/components/blocks/action-group/index.js +3 -1
  34. package/dist/cjs/view/FlexibleCard/components/blocks/title-block/errored/index.js +4 -2
  35. package/dist/cjs/view/FlexibleCard/components/blocks/title-block/index.js +1 -1
  36. package/dist/cjs/view/FlexibleCard/components/blocks/title-block/resolving/index.js +11 -25
  37. package/dist/cjs/view/FlexibleCard/components/blocks/utils.js +1 -1
  38. package/dist/cjs/view/FlexibleCard/components/common/image-icon/index.js +4 -11
  39. package/dist/cjs/view/FlexibleCard/components/common/loading-skeleton/index.js +32 -0
  40. package/dist/cjs/view/FlexibleCard/components/common/loading-skeleton/types.js +5 -0
  41. package/dist/cjs/view/FlexibleCard/components/container/index.js +66 -23
  42. package/dist/cjs/view/FlexibleCard/components/container/layered-link/index.js +37 -0
  43. package/dist/cjs/view/FlexibleCard/components/container/layered-link/types.js +5 -0
  44. package/dist/cjs/view/FlexibleCard/components/elements/avatar-group/index.js +1 -0
  45. package/dist/cjs/view/FlexibleCard/components/elements/icon/index.js +1 -18
  46. package/dist/cjs/view/FlexibleCard/components/elements/link/index.js +13 -4
  47. package/dist/cjs/view/FlexibleCard/components/utils.js +29 -3
  48. package/dist/cjs/view/FlexibleCard/index.js +2 -2
  49. package/dist/es2019/i18n/cs.js +35 -0
  50. package/dist/es2019/i18n/da.js +35 -0
  51. package/dist/es2019/i18n/de.js +35 -0
  52. package/dist/es2019/i18n/en.js +35 -0
  53. package/dist/es2019/i18n/en_GB.js +35 -0
  54. package/dist/es2019/i18n/en_ZZ.js +35 -0
  55. package/dist/es2019/i18n/es.js +35 -0
  56. package/dist/es2019/i18n/et.js +8 -0
  57. package/dist/es2019/i18n/fi.js +35 -0
  58. package/dist/es2019/i18n/fr.js +35 -0
  59. package/dist/es2019/i18n/hu.js +35 -0
  60. package/dist/es2019/i18n/it.js +35 -0
  61. package/dist/es2019/i18n/ja.js +35 -0
  62. package/dist/es2019/i18n/ko.js +35 -0
  63. package/dist/es2019/i18n/nb.js +35 -0
  64. package/dist/es2019/i18n/nl.js +35 -0
  65. package/dist/es2019/i18n/pl.js +35 -0
  66. package/dist/es2019/i18n/pt_BR.js +35 -0
  67. package/dist/es2019/i18n/pt_PT.js +8 -0
  68. package/dist/es2019/i18n/ru.js +35 -0
  69. package/dist/es2019/i18n/sk.js +8 -0
  70. package/dist/es2019/i18n/sv.js +35 -0
  71. package/dist/es2019/i18n/th.js +35 -0
  72. package/dist/es2019/i18n/tr.js +35 -0
  73. package/dist/es2019/i18n/uk.js +35 -0
  74. package/dist/es2019/i18n/vi.js +35 -0
  75. package/dist/es2019/i18n/zh.js +35 -0
  76. package/dist/es2019/i18n/zh_TW.js +35 -0
  77. package/dist/es2019/utils/token.js +1 -0
  78. package/dist/es2019/version.json +1 -1
  79. package/dist/es2019/view/FlexibleCard/components/blocks/action-group/index.js +13 -0
  80. package/dist/es2019/view/FlexibleCard/components/blocks/title-block/errored/index.js +6 -1
  81. package/dist/es2019/view/FlexibleCard/components/blocks/title-block/index.js +4 -5
  82. package/dist/es2019/view/FlexibleCard/components/blocks/title-block/resolving/index.js +10 -25
  83. package/dist/es2019/view/FlexibleCard/components/blocks/utils.js +0 -1
  84. package/dist/es2019/view/FlexibleCard/components/common/image-icon/index.js +4 -31
  85. package/dist/es2019/view/FlexibleCard/components/common/loading-skeleton/index.js +39 -0
  86. package/dist/es2019/view/FlexibleCard/components/common/loading-skeleton/types.js +1 -0
  87. package/dist/es2019/view/FlexibleCard/components/container/index.js +59 -10
  88. package/dist/es2019/view/FlexibleCard/components/container/layered-link/index.js +54 -0
  89. package/dist/es2019/view/FlexibleCard/components/container/layered-link/types.js +1 -0
  90. package/dist/es2019/view/FlexibleCard/components/elements/avatar-group/index.js +1 -0
  91. package/dist/es2019/view/FlexibleCard/components/elements/icon/index.js +2 -19
  92. package/dist/es2019/view/FlexibleCard/components/elements/link/index.js +21 -18
  93. package/dist/es2019/view/FlexibleCard/components/utils.js +22 -3
  94. package/dist/es2019/view/FlexibleCard/index.js +2 -2
  95. package/dist/esm/i18n/cs.js +35 -0
  96. package/dist/esm/i18n/da.js +35 -0
  97. package/dist/esm/i18n/de.js +35 -0
  98. package/dist/esm/i18n/en.js +35 -0
  99. package/dist/esm/i18n/en_GB.js +35 -0
  100. package/dist/esm/i18n/en_ZZ.js +35 -0
  101. package/dist/esm/i18n/es.js +35 -0
  102. package/dist/esm/i18n/et.js +8 -0
  103. package/dist/esm/i18n/fi.js +35 -0
  104. package/dist/esm/i18n/fr.js +35 -0
  105. package/dist/esm/i18n/hu.js +35 -0
  106. package/dist/esm/i18n/it.js +35 -0
  107. package/dist/esm/i18n/ja.js +35 -0
  108. package/dist/esm/i18n/ko.js +35 -0
  109. package/dist/esm/i18n/nb.js +35 -0
  110. package/dist/esm/i18n/nl.js +35 -0
  111. package/dist/esm/i18n/pl.js +35 -0
  112. package/dist/esm/i18n/pt_BR.js +35 -0
  113. package/dist/esm/i18n/pt_PT.js +8 -0
  114. package/dist/esm/i18n/ru.js +35 -0
  115. package/dist/esm/i18n/sk.js +8 -0
  116. package/dist/esm/i18n/sv.js +35 -0
  117. package/dist/esm/i18n/th.js +35 -0
  118. package/dist/esm/i18n/tr.js +35 -0
  119. package/dist/esm/i18n/uk.js +35 -0
  120. package/dist/esm/i18n/vi.js +35 -0
  121. package/dist/esm/i18n/zh.js +35 -0
  122. package/dist/esm/i18n/zh_TW.js +35 -0
  123. package/dist/esm/utils/token.js +1 -0
  124. package/dist/esm/version.json +1 -1
  125. package/dist/esm/view/FlexibleCard/components/blocks/action-group/index.js +2 -1
  126. package/dist/esm/view/FlexibleCard/components/blocks/title-block/errored/index.js +4 -2
  127. package/dist/esm/view/FlexibleCard/components/blocks/title-block/index.js +1 -1
  128. package/dist/esm/view/FlexibleCard/components/blocks/title-block/resolving/index.js +10 -25
  129. package/dist/esm/view/FlexibleCard/components/blocks/utils.js +1 -1
  130. package/dist/esm/view/FlexibleCard/components/common/image-icon/index.js +4 -11
  131. package/dist/esm/view/FlexibleCard/components/common/loading-skeleton/index.js +20 -0
  132. package/dist/esm/view/FlexibleCard/components/common/loading-skeleton/types.js +1 -0
  133. package/dist/esm/view/FlexibleCard/components/container/index.js +57 -23
  134. package/dist/esm/view/FlexibleCard/components/container/layered-link/index.js +26 -0
  135. package/dist/esm/view/FlexibleCard/components/container/layered-link/types.js +1 -0
  136. package/dist/esm/view/FlexibleCard/components/elements/avatar-group/index.js +1 -0
  137. package/dist/esm/view/FlexibleCard/components/elements/icon/index.js +2 -19
  138. package/dist/esm/view/FlexibleCard/components/elements/link/index.js +8 -5
  139. package/dist/esm/view/FlexibleCard/components/utils.js +21 -1
  140. package/dist/esm/view/FlexibleCard/index.js +2 -2
  141. package/dist/types/i18n/cs.d.ts +35 -0
  142. package/dist/types/i18n/da.d.ts +35 -0
  143. package/dist/types/i18n/de.d.ts +35 -0
  144. package/dist/types/i18n/en.d.ts +35 -0
  145. package/dist/types/i18n/en_GB.d.ts +35 -0
  146. package/dist/types/i18n/en_ZZ.d.ts +35 -0
  147. package/dist/types/i18n/es.d.ts +35 -0
  148. package/dist/types/i18n/et.d.ts +8 -0
  149. package/dist/types/i18n/fi.d.ts +35 -0
  150. package/dist/types/i18n/fr.d.ts +35 -0
  151. package/dist/types/i18n/hu.d.ts +35 -0
  152. package/dist/types/i18n/it.d.ts +35 -0
  153. package/dist/types/i18n/ja.d.ts +35 -0
  154. package/dist/types/i18n/ko.d.ts +35 -0
  155. package/dist/types/i18n/nb.d.ts +35 -0
  156. package/dist/types/i18n/nl.d.ts +35 -0
  157. package/dist/types/i18n/pl.d.ts +35 -0
  158. package/dist/types/i18n/pt_BR.d.ts +35 -0
  159. package/dist/types/i18n/pt_PT.d.ts +8 -0
  160. package/dist/types/i18n/ru.d.ts +35 -0
  161. package/dist/types/i18n/sk.d.ts +8 -0
  162. package/dist/types/i18n/sv.d.ts +35 -0
  163. package/dist/types/i18n/th.d.ts +35 -0
  164. package/dist/types/i18n/tr.d.ts +35 -0
  165. package/dist/types/i18n/uk.d.ts +35 -0
  166. package/dist/types/i18n/vi.d.ts +35 -0
  167. package/dist/types/i18n/zh.d.ts +35 -0
  168. package/dist/types/i18n/zh_TW.d.ts +35 -0
  169. package/dist/types/utils/token.d.ts +1 -0
  170. package/dist/types/view/FlexibleCard/components/common/loading-skeleton/index.d.ts +5 -0
  171. package/dist/types/view/FlexibleCard/components/common/loading-skeleton/types.d.ts +3 -0
  172. package/dist/types/view/FlexibleCard/components/container/index.d.ts +1 -1
  173. package/dist/types/view/FlexibleCard/components/container/layered-link/index.d.ts +5 -0
  174. package/dist/types/view/FlexibleCard/components/container/layered-link/types.d.ts +6 -0
  175. package/dist/types/view/FlexibleCard/components/container/types.d.ts +1 -0
  176. package/dist/types/view/FlexibleCard/components/utils.d.ts +3 -1
  177. package/dist/types/view/FlexibleCard/types.d.ts +1 -0
  178. package/hooks/package.json +1 -0
  179. package/in-product/package.json +1 -0
  180. package/package.json +1 -1
  181. package/ssr/package.json +1 -0
  182. package/types/package.json +1 -0
@@ -0,0 +1,20 @@
1
+ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
+
3
+ var _templateObject, _templateObject2;
4
+
5
+ /** @jsx jsx */
6
+ import React from 'react';
7
+ import { css, jsx, keyframes } from '@emotion/core';
8
+ import { token } from '@atlaskit/tokens';
9
+ var animationNameStyles = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n 0% { background-position: -20px 0; }\n 100% { background-position: 20px 0; }\n"])));
10
+ var styles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n border-radius: 2px;\n user-select: none;\n background: ", ";\n // TODO: https://product-fabric.atlassian.net/browse/DSP-4236\n background-image: linear-gradient(\n to right,\n ", " 0%,\n ", " 20%,\n ", " 40%,\n ", "100%\n );\n background-repeat: no-repeat;\n background-size: 280% 100%;\n display: inline-block;\n\n animation-duration: 1s;\n animation-fill-mode: forwards;\n animation-iteration-count: infinite;\n animation-name: ", ";\n animation-timing-function: linear;\n"])), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton', '#edeef1'), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton.subtle', '#f6f7f8'), animationNameStyles);
11
+
12
+ var LoadingSkeleton = function LoadingSkeleton(_ref) {
13
+ var testId = _ref.testId;
14
+ return jsx("span", {
15
+ css: styles,
16
+ "data-testid": testId
17
+ });
18
+ };
19
+
20
+ export default LoadingSkeleton;
@@ -1,13 +1,15 @@
1
1
  import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
2
 
3
- var _templateObject, _templateObject2;
3
+ var _templateObject, _templateObject2, _templateObject3;
4
4
 
5
5
  /** @jsx jsx */
6
- import React from 'react';
6
+ import React, { useContext } from 'react';
7
7
  import { css, jsx } from '@emotion/core';
8
8
  import { SmartLinkSize, SmartLinkTheme } from '../../../../constants';
9
9
  import { isFlexibleUiBlock, isFlexibleUiTitleBlock } from '../../../../utils/flexible';
10
10
  import { tokens } from '../../../../utils/token';
11
+ import { FlexibleUiContext } from '../../../../state/flexible-ui-context';
12
+ import LayeredLink from './layered-link';
11
13
  var elevationStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n border: 1px solid transparent;\n border-radius: 1.5px;\n box-shadow: ", ";\n margin: 2px;\n"])), tokens.elevation);
12
14
 
13
15
  var getGap = function getGap(size) {
@@ -44,8 +46,9 @@ var getPadding = function getPadding(size) {
44
46
  }
45
47
  };
46
48
 
47
- export var getContainerStyles = function getContainerStyles(size, hideBackground, hideElevation, hidePadding) {
48
- return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n gap: ", " 0;\n flex-direction: column;\n min-width: 0;\n overflow: hidden;\n ", "\n ", "\n ", "\n"])), getGap(size), hideBackground ? '' : "background-color: ".concat(tokens.background, ";"), hidePadding ? '' : "padding: ".concat(getPadding(size), ";"), hideElevation ? '' : elevationStyles);
49
+ var clickableContainerStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n // Position any interactive elements at the top of the z-index stack.\n a,\n button,\n .has-action {\n position: relative;\n z-index: 1;\n }\n"])));
50
+ export var getContainerStyles = function getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer) {
51
+ return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n gap: ", " 0;\n flex-direction: column;\n min-width: 0;\n overflow-x: hidden;\n position: relative;\n ", "\n ", "\n ", "\n ", "\n &:hover ~ .actions-button-group {\n opacity: 1;\n }\n a:focus,\n .has-action:focus {\n outline-offset: -2px;\n }\n"])), getGap(size), hideBackground ? '' : "background-color: ".concat(tokens.background, ";"), hidePadding ? '' : "padding: ".concat(getPadding(size), ";"), hideElevation ? '' : elevationStyles, clickableContainer ? clickableContainerStyles : '');
49
52
  };
50
53
 
51
54
  var renderChildren = function renderChildren(children, containerSize, containerTheme, status, retry, onClick) {
@@ -62,34 +65,65 @@ var renderChildren = function renderChildren(children, containerSize, containerT
62
65
  }
63
66
  });
64
67
  };
68
+
69
+ var getTitleBlockProps = function getTitleBlockProps(children) {
70
+ var block = React.Children.toArray(children).find(function (child) {
71
+ return isFlexibleUiTitleBlock(child);
72
+ });
73
+
74
+ if ( /*#__PURE__*/React.isValidElement(block)) {
75
+ return block.props;
76
+ }
77
+ };
78
+
79
+ var getLayeredLink = function getLayeredLink(testId, context, children) {
80
+ var _ref = context || {},
81
+ title = _ref.title,
82
+ _ref$url = _ref.url,
83
+ url = _ref$url === void 0 ? '' : _ref$url;
84
+
85
+ var _ref2 = getTitleBlockProps(children) || {},
86
+ target = _ref2.anchorTarget,
87
+ text = _ref2.text;
88
+
89
+ return jsx(LayeredLink, {
90
+ target: target,
91
+ testId: testId,
92
+ text: text || title,
93
+ url: url
94
+ });
95
+ };
65
96
  /**
66
97
  * This represents the container in which all Flexible UI Smart Links are rendered.
67
98
  * @see Block
68
99
  */
69
100
 
70
101
 
71
- var Container = function Container(_ref) {
72
- var children = _ref.children,
73
- _ref$hideBackground = _ref.hideBackground,
74
- hideBackground = _ref$hideBackground === void 0 ? false : _ref$hideBackground,
75
- _ref$hideElevation = _ref.hideElevation,
76
- hideElevation = _ref$hideElevation === void 0 ? false : _ref$hideElevation,
77
- _ref$hidePadding = _ref.hidePadding,
78
- hidePadding = _ref$hidePadding === void 0 ? false : _ref$hidePadding,
79
- retry = _ref.retry,
80
- _ref$size = _ref.size,
81
- size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
82
- status = _ref.status,
83
- _ref$testId = _ref.testId,
84
- testId = _ref$testId === void 0 ? 'smart-links-container' : _ref$testId,
85
- _ref$theme = _ref.theme,
86
- theme = _ref$theme === void 0 ? SmartLinkTheme.Link : _ref$theme,
87
- onClick = _ref.onClick;
102
+ var Container = function Container(_ref3) {
103
+ var children = _ref3.children,
104
+ _ref3$clickableContai = _ref3.clickableContainer,
105
+ clickableContainer = _ref3$clickableContai === void 0 ? false : _ref3$clickableContai,
106
+ _ref3$hideBackground = _ref3.hideBackground,
107
+ hideBackground = _ref3$hideBackground === void 0 ? false : _ref3$hideBackground,
108
+ _ref3$hideElevation = _ref3.hideElevation,
109
+ hideElevation = _ref3$hideElevation === void 0 ? false : _ref3$hideElevation,
110
+ _ref3$hidePadding = _ref3.hidePadding,
111
+ hidePadding = _ref3$hidePadding === void 0 ? false : _ref3$hidePadding,
112
+ onClick = _ref3.onClick,
113
+ retry = _ref3.retry,
114
+ _ref3$size = _ref3.size,
115
+ size = _ref3$size === void 0 ? SmartLinkSize.Medium : _ref3$size,
116
+ status = _ref3.status,
117
+ _ref3$testId = _ref3.testId,
118
+ testId = _ref3$testId === void 0 ? 'smart-links-container' : _ref3$testId,
119
+ _ref3$theme = _ref3.theme,
120
+ theme = _ref3$theme === void 0 ? SmartLinkTheme.Link : _ref3$theme;
121
+ var context = useContext(FlexibleUiContext);
88
122
  return jsx("div", {
89
- css: getContainerStyles(size, hideBackground, hideElevation, hidePadding),
123
+ css: getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer),
90
124
  "data-smart-link-container": true,
91
125
  "data-testid": testId
92
- }, renderChildren(children, size, theme, status, retry, onClick));
126
+ }, clickableContainer ? getLayeredLink(testId, context, children) : null, renderChildren(children, size, theme, status, retry, onClick));
93
127
  };
94
128
 
95
129
  export default Container;
@@ -0,0 +1,26 @@
1
+ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
+
3
+ var _templateObject;
4
+
5
+ /** @jsx jsx */
6
+ import React from 'react';
7
+ import { jsx, css } from '@emotion/core';
8
+ var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n // Stretch the invisible link over the whole of the post.\n // Hide the link\u2019s text.\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n overflow-x: hidden;\n text-indent: 100%;\n white-space: nowrap;\n\n // Needs a heightened specificity to trump other anchor.\n // Stack it under all other links in the post text.\n a&.layered-link {\n position: absolute;\n z-index: 0;\n }\n\n // When hovering over the layered link, any hidden action buttons inside\n // the Container should become visible.\n // As actions resides inside blocks and layered link is expected to be\n // on the same level of blocks. That makes the blocks, e.g. TitleBlock,\n // its sibling. Using general sibling combinator here to apply styling to\n // all the siblings of layered link.\n // The general sibling combinator (~) separates two selectors and matches all\n // iterations of the second element, that are following the first element\n // (though not necessarily immediately), and are children of the same parent\n // element.\n &:hover ~ * {\n .actions-button-group {\n opacity: 1;\n }\n }\n"])));
9
+
10
+ var LayeredLink = function LayeredLink(_ref) {
11
+ var target = _ref.target,
12
+ testId = _ref.testId,
13
+ text = _ref.text,
14
+ url = _ref.url;
15
+ return jsx("a", {
16
+ className: "layered-link",
17
+ css: styles,
18
+ "data-testid": "".concat(testId, "-layered-link"),
19
+ href: url,
20
+ target: target,
21
+ tabIndex: -1 // Hide tab index and let the title link be the link.
22
+
23
+ }, text);
24
+ };
25
+
26
+ export default LayeredLink;
@@ -48,6 +48,7 @@ var AvatarGroup = function AvatarGroup(_ref) {
48
48
 
49
49
  return jsx("span", {
50
50
  css: [getStyles(size), overrideCss],
51
+ "data-fit-to-content": true,
51
52
  "data-smart-element-avatar-group": true,
52
53
  "data-testid": testId
53
54
  }, jsx(AtlaskitAvatarGroup, {
@@ -9,7 +9,7 @@ import { css, jsx } from '@emotion/core';
9
9
  import { SmartLinkPosition, SmartLinkSize } from '../../../../../constants';
10
10
  import AtlaskitIcon from '../../common/atlaskit-icon';
11
11
  import ImageIcon from '../../common/image-icon';
12
- import { getIconSizeStyles, getTruncateStyles } from '../../utils';
12
+ import { getIconSizeStyles, getIconWidth, getTruncateStyles } from '../../utils';
13
13
 
14
14
  var getPositionStyles = function getPositionStyles(size, position) {
15
15
  switch (position) {
@@ -22,23 +22,6 @@ var getPositionStyles = function getPositionStyles(size, position) {
22
22
  }
23
23
  };
24
24
 
25
- var getWidth = function getWidth(size) {
26
- switch (size) {
27
- case SmartLinkSize.XLarge:
28
- return '2rem';
29
-
30
- case SmartLinkSize.Large:
31
- return '1.5rem';
32
-
33
- case SmartLinkSize.Medium:
34
- return '1rem';
35
-
36
- case SmartLinkSize.Small:
37
- default:
38
- return '.75rem';
39
- }
40
- };
41
-
42
25
  var getIconStyles = function getIconStyles(size, position, width) {
43
26
  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n ", "\n ", "\n"])), getPositionStyles(size, position), getIconSizeStyles(width));
44
27
  };
@@ -98,7 +81,7 @@ var Icon = function Icon(_ref) {
98
81
  var defaultIcon = renderDefaultIcon(label, testId);
99
82
  return (render === null || render === void 0 ? void 0 : render()) || renderImageIcon(defaultIcon, icon, url, testId) || renderAtlaskitIcon(icon, label, testId) || defaultIcon;
100
83
  }, [icon, label, render, testId, url]);
101
- var width = getWidth(size);
84
+ var width = getIconWidth(size);
102
85
  var styles = getIconStyles(size, position, width);
103
86
  var renderStyles = render ? getCustomRenderStyles(width) : undefined;
104
87
  return jsx("div", {
@@ -3,11 +3,11 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
3
3
  var _templateObject, _templateObject2, _templateObject3, _templateObject4;
4
4
 
5
5
  /** @jsx jsx */
6
- import React from 'react';
6
+ import React, { useMemo } from 'react';
7
7
  import { css, jsx } from '@emotion/core';
8
8
  import Tooltip from '@atlaskit/tooltip';
9
9
  import { SmartLinkSize, SmartLinkTheme } from '../../../../../constants';
10
- import { getLinkLineHeight, getLinkSizeStyles, getTruncateStyles } from '../../utils';
10
+ import { getLinkLineHeight, getLinkSizeStyles, getTruncateStyles, hasWhiteSpace } from '../../utils';
11
11
  import { tokens } from '../../../../../utils/token';
12
12
  var DEFAULT_MAX_LINES = 2;
13
13
  var MAXIMUM_MAX_LINES = 2;
@@ -26,9 +26,9 @@ var getThemeStyles = function getThemeStyles(theme) {
26
26
  }
27
27
  };
28
28
 
29
- var getAnchorStyles = function getAnchorStyles(size, theme, maxLines) {
29
+ var getAnchorStyles = function getAnchorStyles(size, theme, maxLines, hasSpace) {
30
30
  var sizeStyles = getLinkSizeStyles(size);
31
- return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n flex: 1 1 auto;\n ", "\n ", "\n // Theme should be last to be spread because it contains override values\n ", "\n "])), sizeStyles, getTruncateStyles(maxLines, getLinkLineHeight(size)), getThemeStyles(theme));
31
+ return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n flex: 1 1 auto;\n ", "\n ", "\n // Theme should be last to be spread because it contains override values\n ", "\n "])), sizeStyles, getTruncateStyles(maxLines, getLinkLineHeight(size), hasSpace ? 'break-word' : 'break-all'), getThemeStyles(theme));
32
32
  };
33
33
 
34
34
  var getMaxLines = function getMaxLines(maxLines) {
@@ -64,6 +64,9 @@ var Link = function Link(_ref) {
64
64
  url = _ref.url,
65
65
  onClick = _ref.onClick,
66
66
  target = _ref.target;
67
+ var hasSpace = useMemo(function () {
68
+ return text ? hasWhiteSpace(text) : false;
69
+ }, [text]);
67
70
  return jsx("span", {
68
71
  css: containerStyles
69
72
  }, jsx(Tooltip, {
@@ -71,7 +74,7 @@ var Link = function Link(_ref) {
71
74
  testId: "".concat(testId, "-tooltip"),
72
75
  tag: "span"
73
76
  }, jsx("a", {
74
- css: [getAnchorStyles(size, theme, getMaxLines(maxLines)), overrideCss],
77
+ css: [getAnchorStyles(size, theme, getMaxLines(maxLines), hasSpace), overrideCss],
75
78
  "data-smart-element-link": true,
76
79
  "data-testid": testId,
77
80
  onClick: onClick,
@@ -25,6 +25,22 @@ export var getIconSizeStyles = function getIconSizeStyles(width) {
25
25
  var sizeStyles = getIconDimensionStyles(width);
26
26
  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n flex: 0 0 auto;\n ", "\n span,\n svg,\n img {\n ", "\n }\n svg {\n padding: 0;\n }\n "])), sizeStyles, sizeStyles);
27
27
  };
28
+ export var getIconWidth = function getIconWidth(size) {
29
+ switch (size) {
30
+ case SmartLinkSize.XLarge:
31
+ return '2rem';
32
+
33
+ case SmartLinkSize.Large:
34
+ return '1.5rem';
35
+
36
+ case SmartLinkSize.Medium:
37
+ return '1rem';
38
+
39
+ case SmartLinkSize.Small:
40
+ default:
41
+ return '.75rem';
42
+ }
43
+ };
28
44
  export var getLinkLineHeight = function getLinkLineHeight(size) {
29
45
  switch (size) {
30
46
  case SmartLinkSize.XLarge:
@@ -64,5 +80,9 @@ export var getMaxLines = function getMaxLines(value, defaultValue, max, min) {
64
80
  };
65
81
  export var getTruncateStyles = function getTruncateStyles(maxLines) {
66
82
  var lineHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '1rem';
67
- return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n display: -webkit-box;\n overflow: hidden;\n text-overflow: ellipsis;\n word-break: break-word;\n -webkit-line-clamp: ", ";\n -webkit-box-orient: vertical;\n // Fallback options\n max-height: calc(", " * ", ");\n "])), maxLines, maxLines, lineHeight);
83
+ var wordBreak = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'break-word';
84
+ return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n display: -webkit-box;\n overflow: hidden;\n text-overflow: ellipsis;\n word-break: ", ";\n -webkit-line-clamp: ", ";\n -webkit-box-orient: vertical;\n // Fallback options\n max-height: calc(", " * ", ");\n "])), wordBreak, maxLines, maxLines, lineHeight);
85
+ };
86
+ export var hasWhiteSpace = function hasWhiteSpace(str) {
87
+ return str.search(/\s/) >= 0;
68
88
  };
@@ -29,9 +29,9 @@ var FlexibleCard = function FlexibleCard(_ref) {
29
29
  }, /*#__PURE__*/React.createElement(Container, _extends({
30
30
  testId: testId
31
31
  }, ui, {
32
+ onClick: onClick,
32
33
  retry: retry,
33
- status: status,
34
- onClick: onClick
34
+ status: status
35
35
  }), children));
36
36
  };
37
37
 
@@ -0,0 +1,35 @@
1
+ declare const _default: {
2
+ 'fabric.linking.cannot_connect': string;
3
+ 'fabric.linking.cannot_find_link': string;
4
+ 'fabric.linking.click_to_join': string;
5
+ 'fabric.linking.connect_link_account': string;
6
+ 'fabric.linking.create_on': string;
7
+ 'fabric.linking.created_by': string;
8
+ 'fabric.linking.delete': string;
9
+ 'fabric.linking.edit': string;
10
+ 'fabric.linking.forbidden_access': string;
11
+ 'fabric.linking.invalid_permissions': string;
12
+ 'fabric.linking.modified_on': string;
13
+ 'fabric.linking.pending_request': string;
14
+ 'fabric.linking.priority_blocker': string;
15
+ 'fabric.linking.priority_critical': string;
16
+ 'fabric.linking.priority_high': string;
17
+ 'fabric.linking.priority_highest': string;
18
+ 'fabric.linking.priority_low': string;
19
+ 'fabric.linking.priority_lowest': string;
20
+ 'fabric.linking.priority_major': string;
21
+ 'fabric.linking.priority_medium': string;
22
+ 'fabric.linking.priority_minor': string;
23
+ 'fabric.linking.priority_trivial': string;
24
+ 'fabric.linking.priority_undefined': string;
25
+ 'fabric.linking.request_access': string;
26
+ 'fabric.linking.request_denied': string;
27
+ 'fabric.linking.updated_by': string;
28
+ };
29
+ /**
30
+ * NOTE:
31
+ *
32
+ * This file is automatically generated by Traduki 2.0.
33
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
34
+ */
35
+ export default _default;
@@ -0,0 +1,35 @@
1
+ declare const _default: {
2
+ 'fabric.linking.cannot_connect': string;
3
+ 'fabric.linking.cannot_find_link': string;
4
+ 'fabric.linking.click_to_join': string;
5
+ 'fabric.linking.connect_link_account': string;
6
+ 'fabric.linking.create_on': string;
7
+ 'fabric.linking.created_by': string;
8
+ 'fabric.linking.delete': string;
9
+ 'fabric.linking.edit': string;
10
+ 'fabric.linking.forbidden_access': string;
11
+ 'fabric.linking.invalid_permissions': string;
12
+ 'fabric.linking.modified_on': string;
13
+ 'fabric.linking.pending_request': string;
14
+ 'fabric.linking.priority_blocker': string;
15
+ 'fabric.linking.priority_critical': string;
16
+ 'fabric.linking.priority_high': string;
17
+ 'fabric.linking.priority_highest': string;
18
+ 'fabric.linking.priority_low': string;
19
+ 'fabric.linking.priority_lowest': string;
20
+ 'fabric.linking.priority_major': string;
21
+ 'fabric.linking.priority_medium': string;
22
+ 'fabric.linking.priority_minor': string;
23
+ 'fabric.linking.priority_trivial': string;
24
+ 'fabric.linking.priority_undefined': string;
25
+ 'fabric.linking.request_access': string;
26
+ 'fabric.linking.request_denied': string;
27
+ 'fabric.linking.updated_by': string;
28
+ };
29
+ /**
30
+ * NOTE:
31
+ *
32
+ * This file is automatically generated by Traduki 2.0.
33
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
34
+ */
35
+ export default _default;
@@ -0,0 +1,35 @@
1
+ declare const _default: {
2
+ 'fabric.linking.cannot_connect': string;
3
+ 'fabric.linking.cannot_find_link': string;
4
+ 'fabric.linking.click_to_join': string;
5
+ 'fabric.linking.connect_link_account': string;
6
+ 'fabric.linking.create_on': string;
7
+ 'fabric.linking.created_by': string;
8
+ 'fabric.linking.delete': string;
9
+ 'fabric.linking.edit': string;
10
+ 'fabric.linking.forbidden_access': string;
11
+ 'fabric.linking.invalid_permissions': string;
12
+ 'fabric.linking.modified_on': string;
13
+ 'fabric.linking.pending_request': string;
14
+ 'fabric.linking.priority_blocker': string;
15
+ 'fabric.linking.priority_critical': string;
16
+ 'fabric.linking.priority_high': string;
17
+ 'fabric.linking.priority_highest': string;
18
+ 'fabric.linking.priority_low': string;
19
+ 'fabric.linking.priority_lowest': string;
20
+ 'fabric.linking.priority_major': string;
21
+ 'fabric.linking.priority_medium': string;
22
+ 'fabric.linking.priority_minor': string;
23
+ 'fabric.linking.priority_trivial': string;
24
+ 'fabric.linking.priority_undefined': string;
25
+ 'fabric.linking.request_access': string;
26
+ 'fabric.linking.request_denied': string;
27
+ 'fabric.linking.updated_by': string;
28
+ };
29
+ /**
30
+ * NOTE:
31
+ *
32
+ * This file is automatically generated by Traduki 2.0.
33
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
34
+ */
35
+ export default _default;
@@ -0,0 +1,35 @@
1
+ declare const _default: {
2
+ 'fabric.linking.cannot_connect': string;
3
+ 'fabric.linking.cannot_find_link': string;
4
+ 'fabric.linking.click_to_join': string;
5
+ 'fabric.linking.connect_link_account': string;
6
+ 'fabric.linking.create_on': string;
7
+ 'fabric.linking.created_by': string;
8
+ 'fabric.linking.delete': string;
9
+ 'fabric.linking.edit': string;
10
+ 'fabric.linking.forbidden_access': string;
11
+ 'fabric.linking.invalid_permissions': string;
12
+ 'fabric.linking.modified_on': string;
13
+ 'fabric.linking.pending_request': string;
14
+ 'fabric.linking.priority_blocker': string;
15
+ 'fabric.linking.priority_critical': string;
16
+ 'fabric.linking.priority_high': string;
17
+ 'fabric.linking.priority_highest': string;
18
+ 'fabric.linking.priority_low': string;
19
+ 'fabric.linking.priority_lowest': string;
20
+ 'fabric.linking.priority_major': string;
21
+ 'fabric.linking.priority_medium': string;
22
+ 'fabric.linking.priority_minor': string;
23
+ 'fabric.linking.priority_trivial': string;
24
+ 'fabric.linking.priority_undefined': string;
25
+ 'fabric.linking.request_access': string;
26
+ 'fabric.linking.request_denied': string;
27
+ 'fabric.linking.updated_by': string;
28
+ };
29
+ /**
30
+ * NOTE:
31
+ *
32
+ * This file is automatically generated by Traduki 2.0.
33
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
34
+ */
35
+ export default _default;
@@ -0,0 +1,35 @@
1
+ declare const _default: {
2
+ 'fabric.linking.cannot_connect': string;
3
+ 'fabric.linking.cannot_find_link': string;
4
+ 'fabric.linking.click_to_join': string;
5
+ 'fabric.linking.connect_link_account': string;
6
+ 'fabric.linking.create_on': string;
7
+ 'fabric.linking.created_by': string;
8
+ 'fabric.linking.delete': string;
9
+ 'fabric.linking.edit': string;
10
+ 'fabric.linking.forbidden_access': string;
11
+ 'fabric.linking.invalid_permissions': string;
12
+ 'fabric.linking.modified_on': string;
13
+ 'fabric.linking.pending_request': string;
14
+ 'fabric.linking.priority_blocker': string;
15
+ 'fabric.linking.priority_critical': string;
16
+ 'fabric.linking.priority_high': string;
17
+ 'fabric.linking.priority_highest': string;
18
+ 'fabric.linking.priority_low': string;
19
+ 'fabric.linking.priority_lowest': string;
20
+ 'fabric.linking.priority_major': string;
21
+ 'fabric.linking.priority_medium': string;
22
+ 'fabric.linking.priority_minor': string;
23
+ 'fabric.linking.priority_trivial': string;
24
+ 'fabric.linking.priority_undefined': string;
25
+ 'fabric.linking.request_access': string;
26
+ 'fabric.linking.request_denied': string;
27
+ 'fabric.linking.updated_by': string;
28
+ };
29
+ /**
30
+ * NOTE:
31
+ *
32
+ * This file is automatically generated by Traduki 2.0.
33
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
34
+ */
35
+ export default _default;
@@ -0,0 +1,35 @@
1
+ declare const _default: {
2
+ 'fabric.linking.cannot_connect': string;
3
+ 'fabric.linking.cannot_find_link': string;
4
+ 'fabric.linking.click_to_join': string;
5
+ 'fabric.linking.connect_link_account': string;
6
+ 'fabric.linking.create_on': string;
7
+ 'fabric.linking.created_by': string;
8
+ 'fabric.linking.delete': string;
9
+ 'fabric.linking.edit': string;
10
+ 'fabric.linking.forbidden_access': string;
11
+ 'fabric.linking.invalid_permissions': string;
12
+ 'fabric.linking.modified_on': string;
13
+ 'fabric.linking.pending_request': string;
14
+ 'fabric.linking.priority_blocker': string;
15
+ 'fabric.linking.priority_critical': string;
16
+ 'fabric.linking.priority_high': string;
17
+ 'fabric.linking.priority_highest': string;
18
+ 'fabric.linking.priority_low': string;
19
+ 'fabric.linking.priority_lowest': string;
20
+ 'fabric.linking.priority_major': string;
21
+ 'fabric.linking.priority_medium': string;
22
+ 'fabric.linking.priority_minor': string;
23
+ 'fabric.linking.priority_trivial': string;
24
+ 'fabric.linking.priority_undefined': string;
25
+ 'fabric.linking.request_access': string;
26
+ 'fabric.linking.request_denied': string;
27
+ 'fabric.linking.updated_by': string;
28
+ };
29
+ /**
30
+ * NOTE:
31
+ *
32
+ * This file is automatically generated by Traduki 2.0.
33
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
34
+ */
35
+ export default _default;
@@ -0,0 +1,35 @@
1
+ declare const _default: {
2
+ 'fabric.linking.cannot_connect': string;
3
+ 'fabric.linking.cannot_find_link': string;
4
+ 'fabric.linking.click_to_join': string;
5
+ 'fabric.linking.connect_link_account': string;
6
+ 'fabric.linking.create_on': string;
7
+ 'fabric.linking.created_by': string;
8
+ 'fabric.linking.delete': string;
9
+ 'fabric.linking.edit': string;
10
+ 'fabric.linking.forbidden_access': string;
11
+ 'fabric.linking.invalid_permissions': string;
12
+ 'fabric.linking.modified_on': string;
13
+ 'fabric.linking.pending_request': string;
14
+ 'fabric.linking.priority_blocker': string;
15
+ 'fabric.linking.priority_critical': string;
16
+ 'fabric.linking.priority_high': string;
17
+ 'fabric.linking.priority_highest': string;
18
+ 'fabric.linking.priority_low': string;
19
+ 'fabric.linking.priority_lowest': string;
20
+ 'fabric.linking.priority_major': string;
21
+ 'fabric.linking.priority_medium': string;
22
+ 'fabric.linking.priority_minor': string;
23
+ 'fabric.linking.priority_trivial': string;
24
+ 'fabric.linking.priority_undefined': string;
25
+ 'fabric.linking.request_access': string;
26
+ 'fabric.linking.request_denied': string;
27
+ 'fabric.linking.updated_by': string;
28
+ };
29
+ /**
30
+ * NOTE:
31
+ *
32
+ * This file is automatically generated by Traduki 2.0.
33
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
34
+ */
35
+ export default _default;
@@ -0,0 +1,8 @@
1
+ declare const _default: {};
2
+ /**
3
+ * NOTE:
4
+ *
5
+ * This file is automatically generated by Traduki 2.0.
6
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
7
+ */
8
+ export default _default;
@@ -0,0 +1,35 @@
1
+ declare const _default: {
2
+ 'fabric.linking.cannot_connect': string;
3
+ 'fabric.linking.cannot_find_link': string;
4
+ 'fabric.linking.click_to_join': string;
5
+ 'fabric.linking.connect_link_account': string;
6
+ 'fabric.linking.create_on': string;
7
+ 'fabric.linking.created_by': string;
8
+ 'fabric.linking.delete': string;
9
+ 'fabric.linking.edit': string;
10
+ 'fabric.linking.forbidden_access': string;
11
+ 'fabric.linking.invalid_permissions': string;
12
+ 'fabric.linking.modified_on': string;
13
+ 'fabric.linking.pending_request': string;
14
+ 'fabric.linking.priority_blocker': string;
15
+ 'fabric.linking.priority_critical': string;
16
+ 'fabric.linking.priority_high': string;
17
+ 'fabric.linking.priority_highest': string;
18
+ 'fabric.linking.priority_low': string;
19
+ 'fabric.linking.priority_lowest': string;
20
+ 'fabric.linking.priority_major': string;
21
+ 'fabric.linking.priority_medium': string;
22
+ 'fabric.linking.priority_minor': string;
23
+ 'fabric.linking.priority_trivial': string;
24
+ 'fabric.linking.priority_undefined': string;
25
+ 'fabric.linking.request_access': string;
26
+ 'fabric.linking.request_denied': string;
27
+ 'fabric.linking.updated_by': string;
28
+ };
29
+ /**
30
+ * NOTE:
31
+ *
32
+ * This file is automatically generated by Traduki 2.0.
33
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
34
+ */
35
+ export default _default;
@@ -0,0 +1,35 @@
1
+ declare const _default: {
2
+ 'fabric.linking.cannot_connect': string;
3
+ 'fabric.linking.cannot_find_link': string;
4
+ 'fabric.linking.click_to_join': string;
5
+ 'fabric.linking.connect_link_account': string;
6
+ 'fabric.linking.create_on': string;
7
+ 'fabric.linking.created_by': string;
8
+ 'fabric.linking.delete': string;
9
+ 'fabric.linking.edit': string;
10
+ 'fabric.linking.forbidden_access': string;
11
+ 'fabric.linking.invalid_permissions': string;
12
+ 'fabric.linking.modified_on': string;
13
+ 'fabric.linking.pending_request': string;
14
+ 'fabric.linking.priority_blocker': string;
15
+ 'fabric.linking.priority_critical': string;
16
+ 'fabric.linking.priority_high': string;
17
+ 'fabric.linking.priority_highest': string;
18
+ 'fabric.linking.priority_low': string;
19
+ 'fabric.linking.priority_lowest': string;
20
+ 'fabric.linking.priority_major': string;
21
+ 'fabric.linking.priority_medium': string;
22
+ 'fabric.linking.priority_minor': string;
23
+ 'fabric.linking.priority_trivial': string;
24
+ 'fabric.linking.priority_undefined': string;
25
+ 'fabric.linking.request_access': string;
26
+ 'fabric.linking.request_denied': string;
27
+ 'fabric.linking.updated_by': string;
28
+ };
29
+ /**
30
+ * NOTE:
31
+ *
32
+ * This file is automatically generated by Traduki 2.0.
33
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
34
+ */
35
+ export default _default;