@atlaskit/editor-plugin-card 0.14.25 → 0.15.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.
Files changed (5) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/ui/InlineCardOverlay/index.js +87 -104
  3. package/dist/es2019/ui/InlineCardOverlay/index.js +85 -110
  4. package/dist/esm/ui/InlineCardOverlay/index.js +89 -107
  5. package/package.json +5 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/editor-plugin-card
2
2
 
3
+ ## 0.15.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#64107](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/64107) [`0372daafc639`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0372daafc639) - [ux] Refresh the inline card discoverability overlay design:
8
+
9
+ - changed color, text size, font, padding, overlay behaviour
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
3
15
  ## 0.14.25
4
16
 
5
17
  ### Patch Changes
package/dist/cjs/ui/InlineCardOverlay/index.js CHANGED
@@ -9,27 +9,25 @@ exports.default = void 0;
9
9
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
10
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11
11
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
12
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
13
12
  var _react = _interopRequireWildcard(require("react"));
14
13
  var _react2 = require("@emotion/react");
15
14
  var _debounce = _interopRequireDefault(require("lodash/debounce"));
16
15
  var _reactIntlNext = require("react-intl-next");
17
16
  var _messages = require("@atlaskit/editor-common/messages");
18
17
  var _utils = require("@atlaskit/editor-common/utils");
19
- var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/hipchat/chevron-down"));
20
- var _chevronUp = _interopRequireDefault(require("@atlaskit/icon/glyph/hipchat/chevron-up"));
18
+ var _preferences = _interopRequireDefault(require("@atlaskit/icon/glyph/preferences"));
21
19
  var _colors = require("@atlaskit/theme/colors");
22
20
  var _utils2 = require("./utils");
23
21
  var _excluded = ["children", "isSelected", "isVisible", "testId", "url"];
22
+ /* eslint-disable @atlaskit/design-system/prefer-primitives */
23
+ /** @jsx jsx */
24
24
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
25
25
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
26
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
27
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
28
26
  var DEBOUNCE_IN_MS = 5;
29
27
  var ESTIMATED_MIN_WIDTH_IN_PX = 16;
30
- var PADDING_IN_PX = 2;
31
- var ICON_WIDTH_IN_PX = 16;
32
- var OVERLAY_CLASSNAME = 'ak-editor-card-overlay';
28
+ var PADDING_IN_PX = 4;
29
+ var ICON_WIDTH_IN_PX = 14;
30
+ var ICON_AND_LABEL_CLASSNAME = 'ak-editor-card-overlay-icon-and-label';
33
31
  var OVERLAY_LABEL_CLASSNAME = 'ak-editor-card-overlay-label';
34
32
  var OVERLAY_MARKER_CLASSNAME = 'ak-editor-card-overlay-marker';
35
33
  var TEXT_NODE_SELECTOR = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].join(',');
@@ -37,82 +35,69 @@ var containerStyles = (0, _react2.css)({
37
35
  position: 'relative',
38
36
  lineHeight: 'normal'
39
37
  });
40
- var linkStyles = (0, _react2.css)({
41
- color: "var(--ds-text, #172B4D)",
42
- textDecoration: 'none'
43
- });
44
38
  var overlayStyles = (0, _react2.css)({
45
39
  // Set default styling to be invisible but available in dom for width calculation.
46
- position: 'absolute',
47
40
  visibility: 'hidden',
48
- // Positioning
41
+ // Layout
42
+ position: 'absolute',
49
43
  display: 'inline-flex',
50
- flexWrap: 'nowrap',
44
+ justifyContent: 'flex-end',
51
45
  alignItems: 'center',
52
- alignSelf: 'stretch',
53
- height: 'inherit',
54
- lineHeight: 'initial',
55
- width: 'max-content',
56
- bottom: "var(--ds-space-0, 0)",
57
- right: 3,
58
- margin: "-1px ".concat("var(--ds-space-0, 0)"),
59
- padding: "var(--ds-space-0, 0)",
60
- // Styling
61
- fontSize: 'inherit',
62
- fontWeight: 'normal',
63
- color: "var(--ds-text, ".concat(_colors.N800, ")"),
64
- background: "var(--ds-background-accent-gray-subtlest, ".concat(_colors.N20A, ")"),
65
- borderRadius: 3,
66
- // inline card border of 4px - 1px
67
-
68
- // Using `&` twice to increase specificity. (These are not nested styles.)
69
- /* eslint-disable @atlaskit/design-system/no-nested-styles */
70
- '&&:link': _objectSpread({}, linkStyles),
71
- '&&:active': _objectSpread({}, linkStyles),
72
- '&&:focus': _objectSpread({}, linkStyles),
73
- '&&:hover': _objectSpread({}, linkStyles),
74
- '&&:visited': _objectSpread({}, linkStyles),
75
- /* eslint-enable @atlaskit/design-system/no-nested-styles */
76
-
46
+ verticalAlign: 'text-top',
47
+ height: '1lh',
48
+ '@supports not (height: 1lh)': {
49
+ height: '1.2em'
50
+ },
51
+ overflow: 'hidden',
77
52
  // EDM-1717: box-shadow Safari fix bring load wrapper zIndex to 1
78
53
  zIndex: 2,
79
- // Fill lines, match heading and paragraph size
80
- '::before': {
81
- content: '" "',
82
- display: 'inline-block',
83
- verticalAlign: 'middle',
84
- width: "var(--ds-space-0, 0)",
85
- margin: "var(--ds-space-0, 0)",
86
- padding: "var(--ds-space-0, 0)"
87
- }
54
+ // Appearance
55
+ color: "var(--ds-text-subtlest, ".concat(_colors.N700, ")"),
56
+ // Using `&` twice to increase specificity. (These are not nested styles.)+
57
+ // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
58
+ '&&:link, &&:active, &&:focus, &&:hover, &&:visited': {
59
+ color: "var(--ds-text-subtlest, ".concat(_colors.N700, ")"),
60
+ textDecoration: 'none'
61
+ },
62
+ pointerEvents: 'none'
88
63
  });
89
64
  var showOverlayStyles = (0, _react2.css)({
90
65
  position: 'relative',
91
66
  visibility: 'visible'
92
67
  });
93
- var safariOverlayStyles = (0, _react2.css)({
94
- height: '1.1em',
95
- paddingBottom: "var(--ds-space-025, 2px)",
96
- right: 3
97
- });
98
- var textStyles = (0, _react2.css)({
99
- paddingLeft: "var(--ds-space-050, 4px)"
100
- });
101
68
  var iconStyles = (0, _react2.css)({
102
69
  // Position icon in the middle
103
- display: 'inline-grid',
104
- // We want to position the icon in the middle of large text type like heading 1
105
70
  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
106
71
  span: {
107
- display: 'inline-grid'
72
+ display: 'flex'
108
73
  }
109
74
  });
110
- var markerStyles = (0, _react2.css)({
111
- height: "var(--ds-space-0, 0)",
112
- width: "var(--ds-space-0, 0)",
113
- margin: "var(--ds-space-0, 0)",
114
- padding: "var(--ds-space-0, 0)",
115
- whiteSpace: 'nowrap'
75
+ var labelStyles = (0, _react2.css)({
76
+ fontSize: '0.875em',
77
+ fontWeight: '600',
78
+ width: 'max-content'
79
+ });
80
+ var iconAndLabelStyles = (0, _react2.css)({
81
+ background: "var(--ds-surface-raised, white)",
82
+ display: 'flex',
83
+ alignItems: 'center',
84
+ height: '100%',
85
+ gap: "var(--ds-space-050, 4px)",
86
+ paddingRight: "var(--ds-space-050, 4px)",
87
+ // Margin to avoid the background covering the link border
88
+ marginRight: "var(--ds-space-025, 2px)"
89
+ });
90
+ var overflowingContainerStyles = (0, _react2.css)({
91
+ display: 'flex',
92
+ flexDirection: 'row-reverse',
93
+ alignItems: 'center',
94
+ width: 'max-content',
95
+ height: '100%'
96
+ });
97
+ var gradientStyles = (0, _react2.css)({
98
+ width: '2.5rem',
99
+ height: '100%',
100
+ background: "linear-gradient(270deg, ".concat("var(--ds-surface-raised, white)", " 0%, rgba(255, 255, 255, 0.00) 100%)")
116
101
  });
117
102
  var InlineCardOverlay = function InlineCardOverlay(_ref) {
118
103
  var children = _ref.children,
@@ -132,10 +117,10 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
132
117
  _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
133
118
  showLabel = _useState4[0],
134
119
  setShowLabel = _useState4[1];
135
- var _useState5 = (0, _react.useState)(0),
120
+ var _useState5 = (0, _react.useState)(undefined),
136
121
  _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
137
- overlayWidth = _useState6[0],
138
- setOverlayWidth = _useState6[1];
122
+ availableWidth = _useState6[0],
123
+ setAvailableWidth = _useState6[1];
139
124
  var maxOverlayWidth = (0, _react.useRef)(0);
140
125
  var minOverlayWidth = (0, _react.useRef)(ESTIMATED_MIN_WIDTH_IN_PX);
141
126
  var parentWidth = (0, _react.useRef)(0);
@@ -154,26 +139,19 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
154
139
  // Get the width of the available space to display overlay.
155
140
  // This is the width of the inline link itself. If the inline
156
141
  // is wrapped to the next line, this is width of the last line.
157
- var availableWidth = (0, _utils2.getInlineCardAvailableWidth)(containerRef.current, marker) - PADDING_IN_PX - (
142
+ var _availableWidth = (0, _utils2.getInlineCardAvailableWidth)(containerRef.current, marker) - PADDING_IN_PX - (
158
143
  // Always leave at least the icon visible
159
144
  oneLine ? ICON_WIDTH_IN_PX + PADDING_IN_PX : 0);
160
-
161
- // If available width is less than the min width of overlay, don't show overlay.
162
- var canShowOverlay = availableWidth > minOverlayWidth.current;
163
- setShowOverlay(canShowOverlay);
164
- if (!canShowOverlay) {
165
- return;
166
- }
167
-
168
- // Otherwise, check if overlay can be show in full context with label and icon.
169
- var canShowLabel = availableWidth > maxOverlayWidth.current + PADDING_IN_PX;
145
+ setAvailableWidth(_availableWidth);
146
+ var canShowLabel = _availableWidth > maxOverlayWidth.current;
170
147
  setShowLabel(canShowLabel);
171
- setOverlayWidth(canShowLabel ? maxOverlayWidth.current : minOverlayWidth.current);
148
+ var canShowOverlay = _availableWidth > minOverlayWidth.current && !isSelected;
149
+ setShowOverlay(canShowOverlay);
172
150
  } catch (_unused) {
173
151
  // If something goes wrong, hide the overlay all together.
174
152
  setShowOverlay(false);
175
153
  }
176
- }, []);
154
+ }, [isSelected]);
177
155
  (0, _react.useLayoutEffect)(function () {
178
156
  // Using useLayoutEffect here.
179
157
  // 1) We want all to be able to determine whether to display label before
@@ -183,13 +161,14 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
183
161
  if (!containerRef.current) {
184
162
  return;
185
163
  }
164
+
165
+ // This should run only once
186
166
  if (!maxOverlayWidth.current) {
187
- var overlay = (0, _utils2.getChildElement)(containerRef, ".".concat(OVERLAY_CLASSNAME));
167
+ var iconAndLabel = (0, _utils2.getChildElement)(containerRef, ".".concat(ICON_AND_LABEL_CLASSNAME));
188
168
  var _label = (0, _utils2.getChildElement)(containerRef, ".".concat(OVERLAY_LABEL_CLASSNAME));
189
- if (overlay && _label) {
169
+ if (iconAndLabel && _label) {
190
170
  // Set overlay max (label + icon) and min (icon only) width.
191
- // This should run only once.
192
- var _getOverlayWidths = (0, _utils2.getOverlayWidths)(overlay, _label),
171
+ var _getOverlayWidths = (0, _utils2.getOverlayWidths)(iconAndLabel, _label),
193
172
  max = _getOverlayWidths.max,
194
173
  min = _getOverlayWidths.min;
195
174
  maxOverlayWidth.current = max;
@@ -233,26 +212,18 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
233
212
  }, [isVisible, setVisibility]);
234
213
  var intl = (0, _reactIntlNext.useIntl)();
235
214
  var label = intl.formatMessage(_messages.cardMessages.inlineOverlay);
236
- var icon = (0, _react.useMemo)(function () {
237
- var IconComponent = isSelected ? _chevronUp.default : _chevronDown.default;
238
- return (0, _react2.jsx)(IconComponent, {
239
- label: label,
240
- size: "small",
241
- testId: "".concat(testId, "-").concat(isSelected ? 'open' : 'close')
242
- });
243
- }, [isSelected, label, testId]);
244
215
  return (0, _react2.jsx)("span", (0, _extends2.default)({}, props, {
245
216
  css: containerStyles,
246
217
  ref: containerRef
247
218
  }), children, isVisible && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("span", {
248
219
  "aria-hidden": "true",
249
- className: OVERLAY_MARKER_CLASSNAME,
250
- css: markerStyles
220
+ className: OVERLAY_MARKER_CLASSNAME
251
221
  }, _utils.ZERO_WIDTH_JOINER), (0, _react2.jsx)("a", {
252
- className: OVERLAY_CLASSNAME,
253
- css: [overlayStyles, showOverlay && overlayWidth > 0 && showOverlayStyles, _utils.browser.safari && safariOverlayStyles],
222
+ css: [overlayStyles, showOverlay && showOverlayStyles],
254
223
  style: {
255
- marginLeft: -overlayWidth
224
+ // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
225
+ marginLeft: availableWidth && -availableWidth,
226
+ width: availableWidth
256
227
  },
257
228
  "data-testid": testId,
258
229
  href: url,
@@ -260,12 +231,24 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
260
231
  return e.preventDefault();
261
232
  },
262
233
  tabIndex: -1
263
- }, showLabel && (0, _react2.jsx)("span", {
234
+ }, (0, _react2.jsx)("span", {
235
+ css: overflowingContainerStyles
236
+ }, (0, _react2.jsx)("span", {
237
+ css: iconAndLabelStyles,
238
+ className: ICON_AND_LABEL_CLASSNAME
239
+ }, (0, _react2.jsx)("span", {
240
+ css: iconStyles
241
+ }, (0, _react2.jsx)(_preferences.default, {
242
+ label: label,
243
+ size: "small",
244
+ testId: "".concat(testId, "-icon")
245
+ })), showLabel && (0, _react2.jsx)("span", {
246
+ css: labelStyles,
264
247
  className: OVERLAY_LABEL_CLASSNAME,
265
- css: textStyles,
266
248
  "data-testid": "".concat(testId, "-label")
267
- }, label), (0, _react2.jsx)("span", {
268
- css: iconStyles
269
- }, icon))));
249
+ }, label)), (0, _react2.jsx)("span", {
250
+ css: gradientStyles,
251
+ "data-testid": "".concat(testId, "-gradient")
252
+ })))));
270
253
  };
271
254
  var _default = exports.default = InlineCardOverlay;
package/dist/es2019/ui/InlineCardOverlay/index.js CHANGED
@@ -1,21 +1,21 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
+ /* eslint-disable @atlaskit/design-system/prefer-primitives */
2
3
  /** @jsx jsx */
3
4
 
4
- import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
5
+ import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
5
6
  import { css, jsx } from '@emotion/react';
6
7
  import debounce from 'lodash/debounce';
7
8
  import { useIntl } from 'react-intl-next';
8
9
  import { cardMessages as messages } from '@atlaskit/editor-common/messages';
9
- import { browser, ZERO_WIDTH_JOINER } from '@atlaskit/editor-common/utils';
10
- import HipchatChevronDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-down';
11
- import HipchatChevronUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-up';
12
- import { N20A, N800 } from '@atlaskit/theme/colors';
10
+ import { ZERO_WIDTH_JOINER } from '@atlaskit/editor-common/utils';
11
+ import PreferencesIcon from '@atlaskit/icon/glyph/preferences';
12
+ import { N700 } from '@atlaskit/theme/colors';
13
13
  import { getChildElement, getInlineCardAvailableWidth, getOverlayWidths, isOneLine } from './utils';
14
14
  const DEBOUNCE_IN_MS = 5;
15
15
  const ESTIMATED_MIN_WIDTH_IN_PX = 16;
16
- const PADDING_IN_PX = 2;
17
- const ICON_WIDTH_IN_PX = 16;
18
- const OVERLAY_CLASSNAME = 'ak-editor-card-overlay';
16
+ const PADDING_IN_PX = 4;
17
+ const ICON_WIDTH_IN_PX = 14;
18
+ const ICON_AND_LABEL_CLASSNAME = 'ak-editor-card-overlay-icon-and-label';
19
19
  const OVERLAY_LABEL_CLASSNAME = 'ak-editor-card-overlay-label';
20
20
  const OVERLAY_MARKER_CLASSNAME = 'ak-editor-card-overlay-marker';
21
21
  const TEXT_NODE_SELECTOR = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].join(',');
@@ -23,92 +23,69 @@ const containerStyles = css({
23
23
  position: 'relative',
24
24
  lineHeight: 'normal'
25
25
  });
26
- const linkStyles = css({
27
- color: "var(--ds-text, #172B4D)",
28
- textDecoration: 'none'
29
- });
30
26
  const overlayStyles = css({
31
27
  // Set default styling to be invisible but available in dom for width calculation.
32
- position: 'absolute',
33
28
  visibility: 'hidden',
34
- // Positioning
29
+ // Layout
30
+ position: 'absolute',
35
31
  display: 'inline-flex',
36
- flexWrap: 'nowrap',
32
+ justifyContent: 'flex-end',
37
33
  alignItems: 'center',
38
- alignSelf: 'stretch',
39
- height: 'inherit',
40
- lineHeight: 'initial',
41
- width: 'max-content',
42
- bottom: "var(--ds-space-0, 0)",
43
- right: 3,
44
- margin: `-1px ${"var(--ds-space-0, 0)"}`,
45
- padding: "var(--ds-space-0, 0)",
46
- // Styling
47
- fontSize: 'inherit',
48
- fontWeight: 'normal',
49
- color: `var(--ds-text, ${N800})`,
50
- background: `var(--ds-background-accent-gray-subtlest, ${N20A})`,
51
- borderRadius: 3,
52
- // inline card border of 4px - 1px
53
-
54
- // Using `&` twice to increase specificity. (These are not nested styles.)
55
- /* eslint-disable @atlaskit/design-system/no-nested-styles */
56
- '&&:link': {
57
- ...linkStyles
58
- },
59
- '&&:active': {
60
- ...linkStyles
61
- },
62
- '&&:focus': {
63
- ...linkStyles
64
- },
65
- '&&:hover': {
66
- ...linkStyles
34
+ verticalAlign: 'text-top',
35
+ height: '1lh',
36
+ '@supports not (height: 1lh)': {
37
+ height: '1.2em'
67
38
  },
68
- '&&:visited': {
69
- ...linkStyles
70
- },
71
- /* eslint-enable @atlaskit/design-system/no-nested-styles */
72
-
39
+ overflow: 'hidden',
73
40
  // EDM-1717: box-shadow Safari fix bring load wrapper zIndex to 1
74
41
  zIndex: 2,
75
- // Fill lines, match heading and paragraph size
76
- '::before': {
77
- content: '" "',
78
- display: 'inline-block',
79
- verticalAlign: 'middle',
80
- width: "var(--ds-space-0, 0)",
81
- margin: "var(--ds-space-0, 0)",
82
- padding: "var(--ds-space-0, 0)"
83
- }
42
+ // Appearance
43
+ color: `var(--ds-text-subtlest, ${N700})`,
44
+ // Using `&` twice to increase specificity. (These are not nested styles.)+
45
+ // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
46
+ '&&:link, &&:active, &&:focus, &&:hover, &&:visited': {
47
+ color: `var(--ds-text-subtlest, ${N700})`,
48
+ textDecoration: 'none'
49
+ },
50
+ pointerEvents: 'none'
84
51
  });
85
52
  const showOverlayStyles = css({
86
53
  position: 'relative',
87
54
  visibility: 'visible'
88
55
  });
89
- const safariOverlayStyles = css({
90
- height: '1.1em',
91
- paddingBottom: "var(--ds-space-025, 2px)",
92
- right: 3
93
- });
94
- const textStyles = css({
95
- paddingLeft: "var(--ds-space-050, 4px)"
96
- });
97
56
  const iconStyles = css({
98
57
  // Position icon in the middle
99
- display: 'inline-grid',
100
- // We want to position the icon in the middle of large text type like heading 1
101
58
  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
102
59
  span: {
103
- display: 'inline-grid'
60
+ display: 'flex'
104
61
  }
105
62
  });
106
- const markerStyles = css({
107
- height: "var(--ds-space-0, 0)",
108
- width: "var(--ds-space-0, 0)",
109
- margin: "var(--ds-space-0, 0)",
110
- padding: "var(--ds-space-0, 0)",
111
- whiteSpace: 'nowrap'
63
+ const labelStyles = css({
64
+ fontSize: '0.875em',
65
+ fontWeight: '600',
66
+ width: 'max-content'
67
+ });
68
+ const iconAndLabelStyles = css({
69
+ background: "var(--ds-surface-raised, white)",
70
+ display: 'flex',
71
+ alignItems: 'center',
72
+ height: '100%',
73
+ gap: "var(--ds-space-050, 4px)",
74
+ paddingRight: "var(--ds-space-050, 4px)",
75
+ // Margin to avoid the background covering the link border
76
+ marginRight: "var(--ds-space-025, 2px)"
77
+ });
78
+ const overflowingContainerStyles = css({
79
+ display: 'flex',
80
+ flexDirection: 'row-reverse',
81
+ alignItems: 'center',
82
+ width: 'max-content',
83
+ height: '100%'
84
+ });
85
+ const gradientStyles = css({
86
+ width: '2.5rem',
87
+ height: '100%',
88
+ background: `linear-gradient(270deg, ${"var(--ds-surface-raised, white)"} 0%, rgba(255, 255, 255, 0.00) 100%)`
112
89
  });
113
90
  const InlineCardOverlay = ({
114
91
  children,
@@ -120,7 +97,7 @@ const InlineCardOverlay = ({
120
97
  }) => {
121
98
  const [showOverlay, setShowOverlay] = useState(false);
122
99
  const [showLabel, setShowLabel] = useState(true);
123
- const [overlayWidth, setOverlayWidth] = useState(0);
100
+ const [availableWidth, setAvailableWidth] = useState(undefined);
124
101
  const maxOverlayWidth = useRef(0);
125
102
  const minOverlayWidth = useRef(ESTIMATED_MIN_WIDTH_IN_PX);
126
103
  const parentWidth = useRef(0);
@@ -142,23 +119,16 @@ const InlineCardOverlay = ({
142
119
  const availableWidth = getInlineCardAvailableWidth(containerRef.current, marker) - PADDING_IN_PX - (
143
120
  // Always leave at least the icon visible
144
121
  oneLine ? ICON_WIDTH_IN_PX + PADDING_IN_PX : 0);
145
-
146
- // If available width is less than the min width of overlay, don't show overlay.
147
- const canShowOverlay = availableWidth > minOverlayWidth.current;
148
- setShowOverlay(canShowOverlay);
149
- if (!canShowOverlay) {
150
- return;
151
- }
152
-
153
- // Otherwise, check if overlay can be show in full context with label and icon.
154
- const canShowLabel = availableWidth > maxOverlayWidth.current + PADDING_IN_PX;
122
+ setAvailableWidth(availableWidth);
123
+ const canShowLabel = availableWidth > maxOverlayWidth.current;
155
124
  setShowLabel(canShowLabel);
156
- setOverlayWidth(canShowLabel ? maxOverlayWidth.current : minOverlayWidth.current);
125
+ const canShowOverlay = availableWidth > minOverlayWidth.current && !isSelected;
126
+ setShowOverlay(canShowOverlay);
157
127
  } catch {
158
128
  // If something goes wrong, hide the overlay all together.
159
129
  setShowOverlay(false);
160
130
  }
161
- }, []);
131
+ }, [isSelected]);
162
132
  useLayoutEffect(() => {
163
133
  // Using useLayoutEffect here.
164
134
  // 1) We want all to be able to determine whether to display label before
@@ -168,16 +138,17 @@ const InlineCardOverlay = ({
168
138
  if (!containerRef.current) {
169
139
  return;
170
140
  }
141
+
142
+ // This should run only once
171
143
  if (!maxOverlayWidth.current) {
172
- const overlay = getChildElement(containerRef, `.${OVERLAY_CLASSNAME}`);
144
+ const iconAndLabel = getChildElement(containerRef, `.${ICON_AND_LABEL_CLASSNAME}`);
173
145
  const label = getChildElement(containerRef, `.${OVERLAY_LABEL_CLASSNAME}`);
174
- if (overlay && label) {
146
+ if (iconAndLabel && label) {
175
147
  // Set overlay max (label + icon) and min (icon only) width.
176
- // This should run only once.
177
148
  const {
178
149
  max,
179
150
  min
180
- } = getOverlayWidths(overlay, label);
151
+ } = getOverlayWidths(iconAndLabel, label);
181
152
  maxOverlayWidth.current = max;
182
153
  minOverlayWidth.current = min;
183
154
  }
@@ -219,37 +190,41 @@ const InlineCardOverlay = ({
219
190
  }, [isVisible, setVisibility]);
220
191
  const intl = useIntl();
221
192
  const label = intl.formatMessage(messages.inlineOverlay);
222
- const icon = useMemo(() => {
223
- const IconComponent = isSelected ? HipchatChevronUpIcon : HipchatChevronDownIcon;
224
- return jsx(IconComponent, {
225
- label: label,
226
- size: "small",
227
- testId: `${testId}-${isSelected ? 'open' : 'close'}`
228
- });
229
- }, [isSelected, label, testId]);
230
193
  return jsx("span", _extends({}, props, {
231
194
  css: containerStyles,
232
195
  ref: containerRef
233
196
  }), children, isVisible && jsx(React.Fragment, null, jsx("span", {
234
197
  "aria-hidden": "true",
235
- className: OVERLAY_MARKER_CLASSNAME,
236
- css: markerStyles
198
+ className: OVERLAY_MARKER_CLASSNAME
237
199
  }, ZERO_WIDTH_JOINER), jsx("a", {
238
- className: OVERLAY_CLASSNAME,
239
- css: [overlayStyles, showOverlay && overlayWidth > 0 && showOverlayStyles, browser.safari && safariOverlayStyles],
200
+ css: [overlayStyles, showOverlay && showOverlayStyles],
240
201
  style: {
241
- marginLeft: -overlayWidth
202
+ // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
203
+ marginLeft: availableWidth && -availableWidth,
204
+ width: availableWidth
242
205
  },
243
206
  "data-testid": testId,
244
207
  href: url,
245
208
  onClick: e => e.preventDefault(),
246
209
  tabIndex: -1
247
- }, showLabel && jsx("span", {
210
+ }, jsx("span", {
211
+ css: overflowingContainerStyles
212
+ }, jsx("span", {
213
+ css: iconAndLabelStyles,
214
+ className: ICON_AND_LABEL_CLASSNAME
215
+ }, jsx("span", {
216
+ css: iconStyles
217
+ }, jsx(PreferencesIcon, {
218
+ label: label,
219
+ size: "small",
220
+ testId: `${testId}-icon`
221
+ })), showLabel && jsx("span", {
222
+ css: labelStyles,
248
223
  className: OVERLAY_LABEL_CLASSNAME,
249
- css: textStyles,
250
224
  "data-testid": `${testId}-label`
251
- }, label), jsx("span", {
252
- css: iconStyles
253
- }, icon))));
225
+ }, label)), jsx("span", {
226
+ css: gradientStyles,
227
+ "data-testid": `${testId}-gradient`
228
+ })))));
254
229
  };
255
230
  export default InlineCardOverlay;
package/dist/esm/ui/InlineCardOverlay/index.js CHANGED
@@ -1,27 +1,24 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
- import _defineProperty from "@babel/runtime/helpers/defineProperty";
5
4
  var _excluded = ["children", "isSelected", "isVisible", "testId", "url"];
6
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
7
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
5
+ /* eslint-disable @atlaskit/design-system/prefer-primitives */
8
6
  /** @jsx jsx */
9
7
 
10
- import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
8
+ import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
11
9
  import { css, jsx } from '@emotion/react';
12
10
  import debounce from 'lodash/debounce';
13
11
  import { useIntl } from 'react-intl-next';
14
12
  import { cardMessages as messages } from '@atlaskit/editor-common/messages';
15
- import { browser, ZERO_WIDTH_JOINER } from '@atlaskit/editor-common/utils';
16
- import HipchatChevronDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-down';
17
- import HipchatChevronUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-up';
18
- import { N20A, N800 } from '@atlaskit/theme/colors';
13
+ import { ZERO_WIDTH_JOINER } from '@atlaskit/editor-common/utils';
14
+ import PreferencesIcon from '@atlaskit/icon/glyph/preferences';
15
+ import { N700 } from '@atlaskit/theme/colors';
19
16
  import { getChildElement, getInlineCardAvailableWidth, getOverlayWidths, isOneLine } from './utils';
20
17
  var DEBOUNCE_IN_MS = 5;
21
18
  var ESTIMATED_MIN_WIDTH_IN_PX = 16;
22
- var PADDING_IN_PX = 2;
23
- var ICON_WIDTH_IN_PX = 16;
24
- var OVERLAY_CLASSNAME = 'ak-editor-card-overlay';
19
+ var PADDING_IN_PX = 4;
20
+ var ICON_WIDTH_IN_PX = 14;
21
+ var ICON_AND_LABEL_CLASSNAME = 'ak-editor-card-overlay-icon-and-label';
25
22
  var OVERLAY_LABEL_CLASSNAME = 'ak-editor-card-overlay-label';
26
23
  var OVERLAY_MARKER_CLASSNAME = 'ak-editor-card-overlay-marker';
27
24
  var TEXT_NODE_SELECTOR = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].join(',');
@@ -29,82 +26,69 @@ var containerStyles = css({
29
26
  position: 'relative',
30
27
  lineHeight: 'normal'
31
28
  });
32
- var linkStyles = css({
33
- color: "var(--ds-text, #172B4D)",
34
- textDecoration: 'none'
35
- });
36
29
  var overlayStyles = css({
37
30
  // Set default styling to be invisible but available in dom for width calculation.
38
- position: 'absolute',
39
31
  visibility: 'hidden',
40
- // Positioning
32
+ // Layout
33
+ position: 'absolute',
41
34
  display: 'inline-flex',
42
- flexWrap: 'nowrap',
35
+ justifyContent: 'flex-end',
43
36
  alignItems: 'center',
44
- alignSelf: 'stretch',
45
- height: 'inherit',
46
- lineHeight: 'initial',
47
- width: 'max-content',
48
- bottom: "var(--ds-space-0, 0)",
49
- right: 3,
50
- margin: "-1px ".concat("var(--ds-space-0, 0)"),
51
- padding: "var(--ds-space-0, 0)",
52
- // Styling
53
- fontSize: 'inherit',
54
- fontWeight: 'normal',
55
- color: "var(--ds-text, ".concat(N800, ")"),
56
- background: "var(--ds-background-accent-gray-subtlest, ".concat(N20A, ")"),
57
- borderRadius: 3,
58
- // inline card border of 4px - 1px
59
-
60
- // Using `&` twice to increase specificity. (These are not nested styles.)
61
- /* eslint-disable @atlaskit/design-system/no-nested-styles */
62
- '&&:link': _objectSpread({}, linkStyles),
63
- '&&:active': _objectSpread({}, linkStyles),
64
- '&&:focus': _objectSpread({}, linkStyles),
65
- '&&:hover': _objectSpread({}, linkStyles),
66
- '&&:visited': _objectSpread({}, linkStyles),
67
- /* eslint-enable @atlaskit/design-system/no-nested-styles */
68
-
37
+ verticalAlign: 'text-top',
38
+ height: '1lh',
39
+ '@supports not (height: 1lh)': {
40
+ height: '1.2em'
41
+ },
42
+ overflow: 'hidden',
69
43
  // EDM-1717: box-shadow Safari fix bring load wrapper zIndex to 1
70
44
  zIndex: 2,
71
- // Fill lines, match heading and paragraph size
72
- '::before': {
73
- content: '" "',
74
- display: 'inline-block',
75
- verticalAlign: 'middle',
76
- width: "var(--ds-space-0, 0)",
77
- margin: "var(--ds-space-0, 0)",
78
- padding: "var(--ds-space-0, 0)"
79
- }
45
+ // Appearance
46
+ color: "var(--ds-text-subtlest, ".concat(N700, ")"),
47
+ // Using `&` twice to increase specificity. (These are not nested styles.)+
48
+ // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
49
+ '&&:link, &&:active, &&:focus, &&:hover, &&:visited': {
50
+ color: "var(--ds-text-subtlest, ".concat(N700, ")"),
51
+ textDecoration: 'none'
52
+ },
53
+ pointerEvents: 'none'
80
54
  });
81
55
  var showOverlayStyles = css({
82
56
  position: 'relative',
83
57
  visibility: 'visible'
84
58
  });
85
- var safariOverlayStyles = css({
86
- height: '1.1em',
87
- paddingBottom: "var(--ds-space-025, 2px)",
88
- right: 3
89
- });
90
- var textStyles = css({
91
- paddingLeft: "var(--ds-space-050, 4px)"
92
- });
93
59
  var iconStyles = css({
94
60
  // Position icon in the middle
95
- display: 'inline-grid',
96
- // We want to position the icon in the middle of large text type like heading 1
97
61
  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
98
62
  span: {
99
- display: 'inline-grid'
63
+ display: 'flex'
100
64
  }
101
65
  });
102
- var markerStyles = css({
103
- height: "var(--ds-space-0, 0)",
104
- width: "var(--ds-space-0, 0)",
105
- margin: "var(--ds-space-0, 0)",
106
- padding: "var(--ds-space-0, 0)",
107
- whiteSpace: 'nowrap'
66
+ var labelStyles = css({
67
+ fontSize: '0.875em',
68
+ fontWeight: '600',
69
+ width: 'max-content'
70
+ });
71
+ var iconAndLabelStyles = css({
72
+ background: "var(--ds-surface-raised, white)",
73
+ display: 'flex',
74
+ alignItems: 'center',
75
+ height: '100%',
76
+ gap: "var(--ds-space-050, 4px)",
77
+ paddingRight: "var(--ds-space-050, 4px)",
78
+ // Margin to avoid the background covering the link border
79
+ marginRight: "var(--ds-space-025, 2px)"
80
+ });
81
+ var overflowingContainerStyles = css({
82
+ display: 'flex',
83
+ flexDirection: 'row-reverse',
84
+ alignItems: 'center',
85
+ width: 'max-content',
86
+ height: '100%'
87
+ });
88
+ var gradientStyles = css({
89
+ width: '2.5rem',
90
+ height: '100%',
91
+ background: "linear-gradient(270deg, ".concat("var(--ds-surface-raised, white)", " 0%, rgba(255, 255, 255, 0.00) 100%)")
108
92
  });
109
93
  var InlineCardOverlay = function InlineCardOverlay(_ref) {
110
94
  var children = _ref.children,
@@ -124,10 +108,10 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
124
108
  _useState4 = _slicedToArray(_useState3, 2),
125
109
  showLabel = _useState4[0],
126
110
  setShowLabel = _useState4[1];
127
- var _useState5 = useState(0),
111
+ var _useState5 = useState(undefined),
128
112
  _useState6 = _slicedToArray(_useState5, 2),
129
- overlayWidth = _useState6[0],
130
- setOverlayWidth = _useState6[1];
113
+ availableWidth = _useState6[0],
114
+ setAvailableWidth = _useState6[1];
131
115
  var maxOverlayWidth = useRef(0);
132
116
  var minOverlayWidth = useRef(ESTIMATED_MIN_WIDTH_IN_PX);
133
117
  var parentWidth = useRef(0);
@@ -146,26 +130,19 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
146
130
  // Get the width of the available space to display overlay.
147
131
  // This is the width of the inline link itself. If the inline
148
132
  // is wrapped to the next line, this is width of the last line.
149
- var availableWidth = getInlineCardAvailableWidth(containerRef.current, marker) - PADDING_IN_PX - (
133
+ var _availableWidth = getInlineCardAvailableWidth(containerRef.current, marker) - PADDING_IN_PX - (
150
134
  // Always leave at least the icon visible
151
135
  oneLine ? ICON_WIDTH_IN_PX + PADDING_IN_PX : 0);
152
-
153
- // If available width is less than the min width of overlay, don't show overlay.
154
- var canShowOverlay = availableWidth > minOverlayWidth.current;
155
- setShowOverlay(canShowOverlay);
156
- if (!canShowOverlay) {
157
- return;
158
- }
159
-
160
- // Otherwise, check if overlay can be show in full context with label and icon.
161
- var canShowLabel = availableWidth > maxOverlayWidth.current + PADDING_IN_PX;
136
+ setAvailableWidth(_availableWidth);
137
+ var canShowLabel = _availableWidth > maxOverlayWidth.current;
162
138
  setShowLabel(canShowLabel);
163
- setOverlayWidth(canShowLabel ? maxOverlayWidth.current : minOverlayWidth.current);
139
+ var canShowOverlay = _availableWidth > minOverlayWidth.current && !isSelected;
140
+ setShowOverlay(canShowOverlay);
164
141
  } catch (_unused) {
165
142
  // If something goes wrong, hide the overlay all together.
166
143
  setShowOverlay(false);
167
144
  }
168
- }, []);
145
+ }, [isSelected]);
169
146
  useLayoutEffect(function () {
170
147
  // Using useLayoutEffect here.
171
148
  // 1) We want all to be able to determine whether to display label before
@@ -175,13 +152,14 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
175
152
  if (!containerRef.current) {
176
153
  return;
177
154
  }
155
+
156
+ // This should run only once
178
157
  if (!maxOverlayWidth.current) {
179
- var overlay = getChildElement(containerRef, ".".concat(OVERLAY_CLASSNAME));
158
+ var iconAndLabel = getChildElement(containerRef, ".".concat(ICON_AND_LABEL_CLASSNAME));
180
159
  var _label = getChildElement(containerRef, ".".concat(OVERLAY_LABEL_CLASSNAME));
181
- if (overlay && _label) {
160
+ if (iconAndLabel && _label) {
182
161
  // Set overlay max (label + icon) and min (icon only) width.
183
- // This should run only once.
184
- var _getOverlayWidths = getOverlayWidths(overlay, _label),
162
+ var _getOverlayWidths = getOverlayWidths(iconAndLabel, _label),
185
163
  max = _getOverlayWidths.max,
186
164
  min = _getOverlayWidths.min;
187
165
  maxOverlayWidth.current = max;
@@ -225,26 +203,18 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
225
203
  }, [isVisible, setVisibility]);
226
204
  var intl = useIntl();
227
205
  var label = intl.formatMessage(messages.inlineOverlay);
228
- var icon = useMemo(function () {
229
- var IconComponent = isSelected ? HipchatChevronUpIcon : HipchatChevronDownIcon;
230
- return jsx(IconComponent, {
231
- label: label,
232
- size: "small",
233
- testId: "".concat(testId, "-").concat(isSelected ? 'open' : 'close')
234
- });
235
- }, [isSelected, label, testId]);
236
206
  return jsx("span", _extends({}, props, {
237
207
  css: containerStyles,
238
208
  ref: containerRef
239
209
  }), children, isVisible && jsx(React.Fragment, null, jsx("span", {
240
210
  "aria-hidden": "true",
241
- className: OVERLAY_MARKER_CLASSNAME,
242
- css: markerStyles
211
+ className: OVERLAY_MARKER_CLASSNAME
243
212
  }, ZERO_WIDTH_JOINER), jsx("a", {
244
- className: OVERLAY_CLASSNAME,
245
- css: [overlayStyles, showOverlay && overlayWidth > 0 && showOverlayStyles, browser.safari && safariOverlayStyles],
213
+ css: [overlayStyles, showOverlay && showOverlayStyles],
246
214
  style: {
247
- marginLeft: -overlayWidth
215
+ // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
216
+ marginLeft: availableWidth && -availableWidth,
217
+ width: availableWidth
248
218
  },
249
219
  "data-testid": testId,
250
220
  href: url,
@@ -252,12 +222,24 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
252
222
  return e.preventDefault();
253
223
  },
254
224
  tabIndex: -1
255
- }, showLabel && jsx("span", {
225
+ }, jsx("span", {
226
+ css: overflowingContainerStyles
227
+ }, jsx("span", {
228
+ css: iconAndLabelStyles,
229
+ className: ICON_AND_LABEL_CLASSNAME
230
+ }, jsx("span", {
231
+ css: iconStyles
232
+ }, jsx(PreferencesIcon, {
233
+ label: label,
234
+ size: "small",
235
+ testId: "".concat(testId, "-icon")
236
+ })), showLabel && jsx("span", {
237
+ css: labelStyles,
256
238
  className: OVERLAY_LABEL_CLASSNAME,
257
- css: textStyles,
258
239
  "data-testid": "".concat(testId, "-label")
259
- }, label), jsx("span", {
260
- css: iconStyles
261
- }, icon))));
240
+ }, label)), jsx("span", {
241
+ css: gradientStyles,
242
+ "data-testid": "".concat(testId, "-gradient")
243
+ })))));
262
244
  };
263
245
  export default InlineCardOverlay;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-card",
3
- "version": "0.14.25",
3
+ "version": "0.15.0",
4
4
  "description": "Card plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -35,7 +35,7 @@
35
35
  "@atlaskit/adf-schema": "^35.2.0",
36
36
  "@atlaskit/analytics-next": "^9.1.0",
37
37
  "@atlaskit/custom-steps": "^0.0.10",
38
- "@atlaskit/editor-common": "^76.31.0",
38
+ "@atlaskit/editor-common": "^76.33.0",
39
39
  "@atlaskit/editor-plugin-analytics": "^0.4.0",
40
40
  "@atlaskit/editor-plugin-decorations": "^0.2.0",
41
41
  "@atlaskit/editor-plugin-feature-flags": "^1.0.0",
@@ -53,10 +53,10 @@
53
53
  "@atlaskit/linking-common": "^5.1.0",
54
54
  "@atlaskit/linking-types": "^8.5.0",
55
55
  "@atlaskit/platform-feature-flags": "^0.2.0",
56
- "@atlaskit/primitives": "^1.15.0",
56
+ "@atlaskit/primitives": "^1.16.0",
57
57
  "@atlaskit/smart-card": "^26.43.0",
58
58
  "@atlaskit/theme": "^12.6.0",
59
- "@atlaskit/tokens": "^1.32.0",
59
+ "@atlaskit/tokens": "^1.33.0",
60
60
  "@babel/runtime": "^7.0.0",
61
61
  "@emotion/react": "^11.7.1",
62
62
  "lodash": "^4.17.21",
@@ -78,6 +78,7 @@
78
78
  "@atlaskit/webdriver-runner": "*",
79
79
  "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
80
80
  "@atlassian/feature-flags-test-utils": "*",
81
+ "@emotion/jest": "^11.8.0",
81
82
  "@testing-library/dom": "^8.17.1",
82
83
  "@testing-library/react": "^12.1.5",
83
84
  "@testing-library/react-hooks": "^8.0.1",