@atlaskit/smart-card 34.10.3 → 34.10.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/smart-card
 
+## 34.10.4
+
+### Patch Changes
+
+- [#110251](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110251)
+  [`b6adb9244b072`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b6adb9244b072) -
+  [ux] Visual refresh of the EmbedCard component
+
 ## 34.10.3
 
 ### Patch Changes

package/dist/cjs/utils/analytics/analytics.js

@@ -11,7 +11,7 @@ var ANALYTICS_CHANNEL = exports.ANALYTICS_CHANNEL = 'media';
 var context = exports.context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "34.10.3"
+  packageVersion: "34.10.4"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/cjs/view/EmbedCard/components/ExpandedFrame.compiled.css

@@ -0,0 +1,50 @@
+._11c81il0{font:var(--ds-font-heading-xsmall,normal 600 14px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._14mj1crf:after{border-radius:9pt}
+._19it1pvm{border:solid 1px var(--ds-border,#091e4224)}
+._1tqzzgxb:after{outline:1px solid var(--ds-border,#091e4224)}
+._2rko1y44{border-radius:4px}
+._hcgvzgxb:hover:after{outline:1px solid var(--ds-border,#091e4224)}
+._qc5o94zs:after{transition:background .3s,box-shadow .3s}
+._v56414au{transition:outline .3s}
+._zulp1b66{gap:var(--ds-space-050,4px)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}
+._15l2idpf:after{top:0}
+._16jlkb7n{flex-grow:1}
+._18m915vq{overflow-y:hidden}
+._18m91wug{overflow-y:auto}
+._18postnw:after{position:absolute}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._19doidpf:after{left:0}
+._1bqqidpf:after{z-index:0}
+._1bsb7vkz{width:1pc}
+._1e0c1txw{display:flex}
+._1hfk18uv:after{background-color:initial}
+._1hfkhp5a:after{background-color:var(--ds-surface-raised,#fff)}
+._1ifiidpf .embed-header{opacity:0}
+._1ifikb7n .embed-header{opacity:1}
+._1pbykb7n{z-index:1}
+._1reo15vq{overflow-x:hidden}
+._1reo1wug{overflow-x:auto}
+._1x88idpf:after{bottom:0}
+._2lx21bp4{flex-direction:column}
+._32rxidpf:after{right:0}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
+._4t3i7vkz{height:1pc}
+._4t3igktf{height:20px}
+._4t3ik5xz{height:27pc}
+._4tpuhp5a:hover:after{background-color:var(--ds-surface-raised,#fff)}
+._8x3u92p9:after{box-shadow:0 0 0 3px var(--ds-border-selected,#0c66e4)}
+._aetrb3bt:after{content:""}
+._bfhkhp5a{background-color:var(--ds-surface-raised,#fff)}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._kqswh2mm{position:relative}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
+._u94kidpf:after{flex-grow:0}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
+._x148kb7n:hover .embed-header{opacity:1}
+._1bnxglyw:hover{text-decoration-line:none}
+._9oik18uv:hover{text-decoration-color:initial}
+._jf4cnqa1:hover{text-decoration-style:solid}
+._1jhm1ips:active{outline:8px solid var(--ds-background-selected,#e9f2ff)}

package/dist/cjs/view/EmbedCard/components/ExpandedFrame.js

@@ -7,8 +7,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ExpandedFrame = void 0;
+require("./ExpandedFrame.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _useLinkClicked = require("../../../state/analytics/useLinkClicked");
@@ -45,18 +47,35 @@ var ExpandedFrameNew = function ExpandedFrameNew(_ref) {
   };
   var handleMouseDown = (0, _useLinkClicked.useMouseDownEvent)();
   var renderHeader = function renderHeader() {
+    if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
+      return frameStyle !== 'hide' && /*#__PURE__*/React.createElement("div", {
+        className: (0, _runtime.ax)([styles.header, "embed-header"])
+      }, /*#__PURE__*/React.createElement("div", {
+        className: (0, _runtime.ax)([styles.headerIcon])
+      }, icon), /*#__PURE__*/React.createElement("div", {
+        className: (0, _runtime.ax)([styles.tooltipWrapper])
+      }, !isPlaceholder && /*#__PURE__*/React.createElement(_tooltip.default, {
+        content: text,
+        hideTooltipOnMouseDown: true
+      }, /*#__PURE__*/React.createElement("a", {
+        href: href,
+        onClick: handleClick,
+        onMouseDown: handleMouseDown,
+        className: (0, _runtime.ax)([styles.headerAnchor])
+      }, text))));
+    }
     return (
       /*#__PURE__*/
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      React.createElement(_styled.Header, {
+      React.createElement(_styled.HeaderOldVisualRefresh, {
         className: "embed-header",
         frameStyle: frameStyle
-      }, /*#__PURE__*/React.createElement(_styled.IconWrapper, {
+      }, /*#__PURE__*/React.createElement(_styled.IconWrapperOldVisualRefresh, {
         isPlaceholder: isPlaceholder
-      }, !isPlaceholder && icon), /*#__PURE__*/React.createElement(_styled.TooltipWrapper, null, /*#__PURE__*/React.createElement(_tooltip.default, {
+      }, !isPlaceholder && icon), /*#__PURE__*/React.createElement(_styled.TooltipWrapperOldVisualRefresh, null, /*#__PURE__*/React.createElement(_tooltip.default, {
         content: text,
         hideTooltipOnMouseDown: true
-      }, /*#__PURE__*/React.createElement(_styled.TextWrapper, {
+      }, /*#__PURE__*/React.createElement(_styled.TextWrapperOldVisualRefresh, {
         isPlaceholder: isPlaceholder
       }, !isPlaceholder && /*#__PURE__*/React.createElement("a", {
         href: href,
@@ -65,8 +84,20 @@ var ExpandedFrameNew = function ExpandedFrameNew(_ref) {
       }, text)))))
     );
   };
+  var interactive = isInteractive();
+  var showBackgroundAlways = frameStyle === 'show' || isSelected && frameStyle !== 'hide';
+  var showBackgroundOnHover = interactive && frameStyle !== 'hide';
   var renderContent = function renderContent() {
-    return /*#__PURE__*/React.createElement(_styled.Content, {
+    if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
+      return /*#__PURE__*/React.createElement("div", {
+        "data-testid": "embed-content-wrapper",
+        // This fixes an issue with input fields in cross domain iframes (ie. databases and jira fields from different domains)
+        // See: HOT-107830
+        contentEditable: false,
+        className: (0, _runtime.ax)([styles.contentStyle, setOverflow && allowScrollBar && styles.contentOverflowAuto, interactive && !showBackgroundAlways && !showBackgroundOnHover && styles.contentInteractiveActiveBorder])
+      }, children);
+    }
+    return /*#__PURE__*/React.createElement(_styled.ContentOldVisualRefresh, {
       "data-testid": "embed-content-wrapper",
       allowScrollBar: allowScrollBar,
       removeOverflow: !setOverflow,
@@ -79,8 +110,26 @@ var ExpandedFrameNew = function ExpandedFrameNew(_ref) {
       suppressContentEditableWarning: true
     }, children);
   };
+  if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
+    return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: (0, _runtime.ax)([styles.linkWrapper, inheritDimensions && styles.linkWrapperInheritDimensions, isSelected && frameStyle !== 'hide' && styles.linkWrapperSelected, showBackgroundAlways && styles.linkWrapperBorderAndBackground, showBackgroundOnHover && !showBackgroundAlways && styles.linkWrapperInteractiveNotHidden, _styled.className]),
+      style: {
+        minWidth: minWidth ? "".concat(minWidth, "px") : '',
+        maxWidth: maxWidth ? "".concat(maxWidth, "px") : ''
+      },
+      "data-testid": testId,
+      "data-trello-do-not-use-override": testId
+      // Due to limitations of testing library, we can't assert ::after
+      ,
+      "data-is-selected": isSelected
+    }, (isPlaceholder || !href) && {
+      'data-wrapper-type': 'default',
+      'data-is-interactive': isInteractive()
+    }), renderHeader(), renderContent());
+  }
   if (!isPlaceholder && href) {
-    return /*#__PURE__*/React.createElement(_styled.LinkWrapper
+    return /*#__PURE__*/React.createElement(_styled.LinkWrapperOldVisualRefresh
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     , {
       className: _styled.className,
@@ -97,7 +146,7 @@ var ExpandedFrameNew = function ExpandedFrameNew(_ref) {
       inheritDimensions: inheritDimensions
     }, renderHeader(), renderContent());
   } else {
-    return /*#__PURE__*/React.createElement(_styled.Wrapper
+    return /*#__PURE__*/React.createElement(_styled.WrapperOldVisualRefresh
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     , {
       className: _styled.className,
@@ -120,4 +169,18 @@ var ExpandedFrame = exports.ExpandedFrame = function ExpandedFrame(props) {
   } else {
     return /*#__PURE__*/React.createElement(_ExpandedFrameOld.ExpandedFrameOld, props);
   }
+};
+var styles = {
+  linkWrapper: "_zulpu2gc _kqswh2mm _1e0c1txw _2lx21bp4 _4t3ik5xz _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc _uiztglyw _qc5o94zs _14mj1crf _aetrb3bt _18postnw _15l2idpf _32rxidpf _1x88idpf _19doidpf _1hfk18uv _1bqqidpf _u94kidpf _1ifiidpf",
+  linkWrapperInheritDimensions: "_4t3i1osq",
+  linkWrapperSelected: "_8x3u92p9",
+  linkWrapperBorderAndBackground: "_1tqzzgxb _1hfkhp5a _1ifikb7n",
+  linkWrapperInteractiveNotHidden: "_hcgvzgxb _4tpuhp5a _x148kb7n",
+  header: "_zulp1b66 _1e0c1txw _4cvr1h6o _4t3igktf _1pbykb7n",
+  tooltipWrapper: "_1reo15vq _18m915vq",
+  headerAnchor: "_11c81il0 _9oik18uv _1bnxglyw _jf4cnqa1",
+  headerIcon: "_1bsb7vkz _4t3i7vkz",
+  contentStyle: "_19it1pvm _2rko1y44 _1reo15vq _18m915vq _v56414au _bfhkhp5a _16jlkb7n _4t3i1osq _1pbykb7n",
+  contentInteractiveActiveBorder: "_1jhm1ips",
+  contentOverflowAuto: "_1reo1wug _18m91wug"
 };

package/dist/cjs/view/EmbedCard/components/styled.js

@@ -6,7 +6,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.embedHeaderHeight = exports.className = exports.Wrapper = exports.TooltipWrapper = exports.Thumbnail = exports.TextWrapper = exports.LinkWrapper = exports.Image = exports.IconWrapper = exports.Header = exports.Content = void 0;
+exports.embedHeaderHeight = exports.className = exports.WrapperOldVisualRefresh = exports.TooltipWrapperOldVisualRefresh = exports.Thumbnail = exports.TextWrapperOldVisualRefresh = exports.LinkWrapperOldVisualRefresh = exports.Image = exports.IconWrapperOldVisualRefresh = exports.HeaderOldVisualRefresh = exports.ContentOldVisualRefresh = void 0;
 require("./styled.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
@@ -37,8 +37,9 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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; }
 var className = exports.className = 'media-card-frame';
 var embedHeaderHeight = exports.embedHeaderHeight = 32;
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled,@atlaskit/ui-styling-standard/no-exported-styles
-var LinkWrapper = exports.LinkWrapper = (0, _react.forwardRef)(function (_ref, __cmplr) {
+var LinkWrapperOldVisualRefresh = exports.LinkWrapperOldVisualRefresh = (0, _react.forwardRef)(function (_ref, __cmplr) {
   var _ref$as = _ref.as,
     C = _ref$as === void 0 ? "div" : _ref$as,
     __cmpls = _ref.style,
@@ -60,11 +61,12 @@ var LinkWrapper = exports.LinkWrapper = (0, _react.forwardRef)(function (_ref, _
   }));
 });
 
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled,@atlaskit/ui-styling-standard/no-exported-styles
 if (process.env.NODE_ENV !== 'production') {
-  LinkWrapper.displayName = 'LinkWrapper';
+  LinkWrapperOldVisualRefresh.displayName = 'LinkWrapperOldVisualRefresh';
 }
-var Wrapper = exports.Wrapper = (0, _react.forwardRef)(function (_ref2, __cmplr) {
+var WrapperOldVisualRefresh = exports.WrapperOldVisualRefresh = (0, _react.forwardRef)(function (_ref2, __cmplr) {
   var _ref2$as = _ref2.as,
     C = _ref2$as === void 0 ? "div" : _ref2$as,
     __cmpls = _ref2.style,
@@ -86,11 +88,12 @@ var Wrapper = exports.Wrapper = (0, _react.forwardRef)(function (_ref2, __cmplr)
   }));
 });
 
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled,@atlaskit/ui-styling-standard/no-exported-styles
 if (process.env.NODE_ENV !== 'production') {
-  Wrapper.displayName = 'Wrapper';
+  WrapperOldVisualRefresh.displayName = 'WrapperOldVisualRefresh';
 }
-var Header = exports.Header = (0, _react.forwardRef)(function (_ref3, __cmplr) {
+var HeaderOldVisualRefresh = exports.HeaderOldVisualRefresh = (0, _react.forwardRef)(function (_ref3, __cmplr) {
   var _ref3$as = _ref3.as,
     C = _ref3$as === void 0 ? "div" : _ref3$as,
     __cmpls = _ref3.style,
@@ -104,11 +107,12 @@ var Header = exports.Header = (0, _react.forwardRef)(function (_ref3, __cmplr) {
   }));
 });
 
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled,@atlaskit/ui-styling-standard/no-exported-styles
 if (process.env.NODE_ENV !== 'production') {
-  Header.displayName = 'Header';
+  HeaderOldVisualRefresh.displayName = 'HeaderOldVisualRefresh';
 }
-var IconWrapper = exports.IconWrapper = (0, _react.forwardRef)(function (_ref4, __cmplr) {
+var IconWrapperOldVisualRefresh = exports.IconWrapperOldVisualRefresh = (0, _react.forwardRef)(function (_ref4, __cmplr) {
   var _ref4$as = _ref4.as,
     C = _ref4$as === void 0 ? "div" : _ref4$as,
     __cmpls = _ref4.style,
@@ -122,11 +126,12 @@ var IconWrapper = exports.IconWrapper = (0, _react.forwardRef)(function (_ref4,
   }));
 });
 
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled,@atlaskit/ui-styling-standard/no-exported-styles
 if (process.env.NODE_ENV !== 'production') {
-  IconWrapper.displayName = 'IconWrapper';
+  IconWrapperOldVisualRefresh.displayName = 'IconWrapperOldVisualRefresh';
 }
-var TextWrapper = exports.TextWrapper = (0, _react.forwardRef)(function (_ref5, __cmplr) {
+var TextWrapperOldVisualRefresh = exports.TextWrapperOldVisualRefresh = (0, _react.forwardRef)(function (_ref5, __cmplr) {
   var _ref5$as = _ref5.as,
     C = _ref5$as === void 0 ? "div" : _ref5$as,
     __cmpls = _ref5.style,
@@ -140,11 +145,12 @@ var TextWrapper = exports.TextWrapper = (0, _react.forwardRef)(function (_ref5,
   }));
 });
 
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled,@atlaskit/ui-styling-standard/no-exported-styles
 if (process.env.NODE_ENV !== 'production') {
-  TextWrapper.displayName = 'TextWrapper';
+  TextWrapperOldVisualRefresh.displayName = 'TextWrapperOldVisualRefresh';
 }
-var TooltipWrapper = exports.TooltipWrapper = (0, _react.forwardRef)(function (_ref6, __cmplr) {
+var TooltipWrapperOldVisualRefresh = exports.TooltipWrapperOldVisualRefresh = (0, _react.forwardRef)(function (_ref6, __cmplr) {
   var _ref6$as = _ref6.as,
     C = _ref6$as === void 0 ? "div" : _ref6$as,
     __cmpls = _ref6.style,
@@ -156,14 +162,15 @@ var TooltipWrapper = exports.TooltipWrapper = (0, _react.forwardRef)(function (_
   }));
 });
 
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // NB: `overflow` is kept as `hidden` since
 // the internal contents of the `iframe` should
 // manage scrolling behaviour.
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled,@atlaskit/ui-styling-standard/no-exported-styles
 if (process.env.NODE_ENV !== 'production') {
-  TooltipWrapper.displayName = 'TooltipWrapper';
+  TooltipWrapperOldVisualRefresh.displayName = 'TooltipWrapperOldVisualRefresh';
 }
-var Content = exports.Content = (0, _react.forwardRef)(function (_ref7, __cmplr) {
+var ContentOldVisualRefresh = exports.ContentOldVisualRefresh = (0, _react.forwardRef)(function (_ref7, __cmplr) {
   var _ref7$as = _ref7.as,
     C = _ref7$as === void 0 ? "div" : _ref7$as,
     __cmpls = _ref7.style,
@@ -179,7 +186,7 @@ var Content = exports.Content = (0, _react.forwardRef)(function (_ref7, __cmplr)
   }));
 });
 if (process.env.NODE_ENV !== 'production') {
-  Content.displayName = 'Content';
+  ContentOldVisualRefresh.displayName = 'ContentOldVisualRefresh';
 }
 var getSizeWithUnit = function getSizeWithUnit() {
   var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '100%';

package/dist/cjs/view/InlineCard/common/action-button/index.js

@@ -19,13 +19,16 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var ActionButton = exports.ActionButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  // `Button transforms `testId` into `data-testid`. We need to transform it back to `testId`
+  var testId = props["data-testid"];
   return /*#__PURE__*/_react.default.createElement(_primitives.Box, (0, _extends2.default)({
     as: "span",
     ref: ref,
     xcss: [actionButtonStyle, !props.disabled && actionButtonNotDisabledStyle]
   }, props, {
     "aria-disabled": props.disabled,
-    role: "button"
+    role: "button",
+    testId: testId
   }), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
     as: "span",
     xcss: internalButtonStyle

package/dist/cjs/view/LinkUrl/index.js

@@ -20,7 +20,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId", "isLink
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "34.10.3",
+  packageVersion: "34.10.4",
   componentName: 'linkUrl'
 };
 var Anchor = (0, _click.withLinkClickedEvent)('a');

package/dist/cjs/view/common/UnauthorisedViewContent.js

@@ -9,6 +9,8 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _primitives = require("@atlaskit/primitives");
 var _useAnalyticsEvents2 = require("../../common/analytics/generated/use-analytics-events");
 var _constants = require("../../constants");
 var _messages = require("../../messages");
@@ -33,7 +35,12 @@ var UnauthorisedViewContent = function UnauthorisedViewContent(_ref) {
     values: {
       context: providerName
     }
-  })) : /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.connect_unauthorised_account_description_no_provider), ' ', /*#__PURE__*/_react.default.createElement("a", {
+  })) : /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.connect_unauthorised_account_description_no_provider), ' ', (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? /*#__PURE__*/_react.default.createElement(_primitives.Anchor, {
+    href: isProductIntegrationSupported ? _constants.CONTENT_URL_3P_ACCOUNT_AUTH : _constants.CONTENT_URL_SECURITY_AND_PERMISSIONS,
+    target: "_blank",
+    testId: "".concat(testId, "-learn-more"),
+    onClick: handleLearnMoreClick
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, learnMoreMessage)) : /*#__PURE__*/_react.default.createElement("a", {
     href: isProductIntegrationSupported ? _constants.CONTENT_URL_3P_ACCOUNT_AUTH : _constants.CONTENT_URL_SECURITY_AND_PERMISSIONS,
     target: "_blank",
     "data-testid": "".concat(testId, "-learn-more"),

package/dist/es2019/utils/analytics/analytics.js

@@ -2,7 +2,7 @@ export const ANALYTICS_CHANNEL = 'media';
 export const context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "34.10.3"
+  packageVersion: "34.10.4"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/es2019/view/EmbedCard/components/ExpandedFrame.compiled.css

@@ -0,0 +1,50 @@
+._11c81il0{font:var(--ds-font-heading-xsmall,normal 600 14px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._14mj1crf:after{border-radius:9pt}
+._19it1pvm{border:solid 1px var(--ds-border,#091e4224)}
+._1tqzzgxb:after{outline:1px solid var(--ds-border,#091e4224)}
+._2rko1y44{border-radius:4px}
+._hcgvzgxb:hover:after{outline:1px solid var(--ds-border,#091e4224)}
+._qc5o94zs:after{transition:background .3s,box-shadow .3s}
+._v56414au{transition:outline .3s}
+._zulp1b66{gap:var(--ds-space-050,4px)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}
+._15l2idpf:after{top:0}
+._16jlkb7n{flex-grow:1}
+._18m915vq{overflow-y:hidden}
+._18m91wug{overflow-y:auto}
+._18postnw:after{position:absolute}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._19doidpf:after{left:0}
+._1bqqidpf:after{z-index:0}
+._1bsb7vkz{width:1pc}
+._1e0c1txw{display:flex}
+._1hfk18uv:after{background-color:initial}
+._1hfkhp5a:after{background-color:var(--ds-surface-raised,#fff)}
+._1ifiidpf .embed-header{opacity:0}
+._1ifikb7n .embed-header{opacity:1}
+._1pbykb7n{z-index:1}
+._1reo15vq{overflow-x:hidden}
+._1reo1wug{overflow-x:auto}
+._1x88idpf:after{bottom:0}
+._2lx21bp4{flex-direction:column}
+._32rxidpf:after{right:0}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
+._4t3i7vkz{height:1pc}
+._4t3igktf{height:20px}
+._4t3ik5xz{height:27pc}
+._4tpuhp5a:hover:after{background-color:var(--ds-surface-raised,#fff)}
+._8x3u92p9:after{box-shadow:0 0 0 3px var(--ds-border-selected,#0c66e4)}
+._aetrb3bt:after{content:""}
+._bfhkhp5a{background-color:var(--ds-surface-raised,#fff)}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._kqswh2mm{position:relative}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
+._u94kidpf:after{flex-grow:0}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
+._x148kb7n:hover .embed-header{opacity:1}
+._1bnxglyw:hover{text-decoration-line:none}
+._9oik18uv:hover{text-decoration-color:initial}
+._jf4cnqa1:hover{text-decoration-style:solid}
+._1jhm1ips:active{outline:8px solid var(--ds-background-selected,#e9f2ff)}

package/dist/es2019/view/EmbedCard/components/ExpandedFrame.js

@@ -1,4 +1,6 @@
 /* ExpandedFrame.tsx generated by @compiled/babel-plugin v0.36.0 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./ExpandedFrame.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -6,7 +8,7 @@ import Tooltip from '@atlaskit/tooltip';
 import { useMouseDownEvent } from '../../../state/analytics/useLinkClicked';
 import { handleClickCommon } from '../../common/utils';
 import { ExpandedFrameOld } from './ExpandedFrameOld';
-import { className, Content, Header, IconWrapper, LinkWrapper, TextWrapper, TooltipWrapper, Wrapper } from './styled';
+import { className, ContentOldVisualRefresh, HeaderOldVisualRefresh, IconWrapperOldVisualRefresh, LinkWrapperOldVisualRefresh, TextWrapperOldVisualRefresh, TooltipWrapperOldVisualRefresh, WrapperOldVisualRefresh } from './styled';
 const ExpandedFrameNew = ({
   isPlaceholder = false,
   children,
@@ -27,18 +29,35 @@ const ExpandedFrameNew = ({
   const handleClick = event => handleClickCommon(event, onClick);
   const handleMouseDown = useMouseDownEvent();
   const renderHeader = () => {
+    if (fg('platform-linking-visual-refresh-v1')) {
+      return frameStyle !== 'hide' && /*#__PURE__*/React.createElement("div", {
+        className: ax([styles.header, "embed-header"])
+      }, /*#__PURE__*/React.createElement("div", {
+        className: ax([styles.headerIcon])
+      }, icon), /*#__PURE__*/React.createElement("div", {
+        className: ax([styles.tooltipWrapper])
+      }, !isPlaceholder && /*#__PURE__*/React.createElement(Tooltip, {
+        content: text,
+        hideTooltipOnMouseDown: true
+      }, /*#__PURE__*/React.createElement("a", {
+        href: href,
+        onClick: handleClick,
+        onMouseDown: handleMouseDown,
+        className: ax([styles.headerAnchor])
+      }, text))));
+    }
     return (
       /*#__PURE__*/
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      React.createElement(Header, {
+      React.createElement(HeaderOldVisualRefresh, {
         className: "embed-header",
         frameStyle: frameStyle
-      }, /*#__PURE__*/React.createElement(IconWrapper, {
+      }, /*#__PURE__*/React.createElement(IconWrapperOldVisualRefresh, {
         isPlaceholder: isPlaceholder
-      }, !isPlaceholder && icon), /*#__PURE__*/React.createElement(TooltipWrapper, null, /*#__PURE__*/React.createElement(Tooltip, {
+      }, !isPlaceholder && icon), /*#__PURE__*/React.createElement(TooltipWrapperOldVisualRefresh, null, /*#__PURE__*/React.createElement(Tooltip, {
         content: text,
         hideTooltipOnMouseDown: true
-      }, /*#__PURE__*/React.createElement(TextWrapper, {
+      }, /*#__PURE__*/React.createElement(TextWrapperOldVisualRefresh, {
         isPlaceholder: isPlaceholder
       }, !isPlaceholder && /*#__PURE__*/React.createElement("a", {
         href: href,
@@ -47,8 +66,20 @@ const ExpandedFrameNew = ({
       }, text)))))
     );
   };
+  const interactive = isInteractive();
+  const showBackgroundAlways = frameStyle === 'show' || isSelected && frameStyle !== 'hide';
+  const showBackgroundOnHover = interactive && frameStyle !== 'hide';
   const renderContent = () => {
-    return /*#__PURE__*/React.createElement(Content, {
+    if (fg('platform-linking-visual-refresh-v1')) {
+      return /*#__PURE__*/React.createElement("div", {
+        "data-testid": "embed-content-wrapper",
+        // This fixes an issue with input fields in cross domain iframes (ie. databases and jira fields from different domains)
+        // See: HOT-107830
+        contentEditable: false,
+        className: ax([styles.contentStyle, setOverflow && allowScrollBar && styles.contentOverflowAuto, interactive && !showBackgroundAlways && !showBackgroundOnHover && styles.contentInteractiveActiveBorder])
+      }, children);
+    }
+    return /*#__PURE__*/React.createElement(ContentOldVisualRefresh, {
       "data-testid": "embed-content-wrapper",
       allowScrollBar: allowScrollBar,
       removeOverflow: !setOverflow,
@@ -61,8 +92,26 @@ const ExpandedFrameNew = ({
       suppressContentEditableWarning: true
     }, children);
   };
+  if (fg('platform-linking-visual-refresh-v1')) {
+    return /*#__PURE__*/React.createElement("div", _extends({
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: ax([styles.linkWrapper, inheritDimensions && styles.linkWrapperInheritDimensions, isSelected && frameStyle !== 'hide' && styles.linkWrapperSelected, showBackgroundAlways && styles.linkWrapperBorderAndBackground, showBackgroundOnHover && !showBackgroundAlways && styles.linkWrapperInteractiveNotHidden, className]),
+      style: {
+        minWidth: minWidth ? `${minWidth}px` : '',
+        maxWidth: maxWidth ? `${maxWidth}px` : ''
+      },
+      "data-testid": testId,
+      "data-trello-do-not-use-override": testId
+      // Due to limitations of testing library, we can't assert ::after
+      ,
+      "data-is-selected": isSelected
+    }, (isPlaceholder || !href) && {
+      'data-wrapper-type': 'default',
+      'data-is-interactive': isInteractive()
+    }), renderHeader(), renderContent());
+  }
   if (!isPlaceholder && href) {
-    return /*#__PURE__*/React.createElement(LinkWrapper
+    return /*#__PURE__*/React.createElement(LinkWrapperOldVisualRefresh
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     , {
       className: className,
@@ -79,7 +128,7 @@ const ExpandedFrameNew = ({
       inheritDimensions: inheritDimensions
     }, renderHeader(), renderContent());
   } else {
-    return /*#__PURE__*/React.createElement(Wrapper
+    return /*#__PURE__*/React.createElement(WrapperOldVisualRefresh
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     , {
       className: className,
@@ -102,4 +151,18 @@ export const ExpandedFrame = props => {
   } else {
     return /*#__PURE__*/React.createElement(ExpandedFrameOld, props);
   }
+};
+const styles = {
+  linkWrapper: "_zulpu2gc _kqswh2mm _1e0c1txw _2lx21bp4 _4t3ik5xz _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc _uiztglyw _qc5o94zs _14mj1crf _aetrb3bt _18postnw _15l2idpf _32rxidpf _1x88idpf _19doidpf _1hfk18uv _1bqqidpf _u94kidpf _1ifiidpf",
+  linkWrapperInheritDimensions: "_4t3i1osq",
+  linkWrapperSelected: "_8x3u92p9",
+  linkWrapperBorderAndBackground: "_1tqzzgxb _1hfkhp5a _1ifikb7n",
+  linkWrapperInteractiveNotHidden: "_hcgvzgxb _4tpuhp5a _x148kb7n",
+  header: "_zulp1b66 _1e0c1txw _4cvr1h6o _4t3igktf _1pbykb7n",
+  tooltipWrapper: "_1reo15vq _18m915vq",
+  headerAnchor: "_11c81il0 _9oik18uv _1bnxglyw _jf4cnqa1",
+  headerIcon: "_1bsb7vkz _4t3i7vkz",
+  contentStyle: "_19it1pvm _2rko1y44 _1reo15vq _18m915vq _v56414au _bfhkhp5a _16jlkb7n _4t3i1osq _1pbykb7n",
+  contentInteractiveActiveBorder: "_1jhm1ips",
+  contentOverflowAuto: "_1reo1wug _18m91wug"
 };

package/dist/es2019/view/EmbedCard/components/styled.js

@@ -9,8 +9,9 @@ import { ax, ix } from "@compiled/react/runtime";
 import { B100, B50, N30, N300, N40 } from '@atlaskit/theme/colors';
 export const className = 'media-card-frame';
 export const embedHeaderHeight = 32;
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled,@atlaskit/ui-styling-standard/no-exported-styles
-export const LinkWrapper = forwardRef(({
+export const LinkWrapperOldVisualRefresh = forwardRef(({
   as: C = "div",
   style: __cmpls,
   ...__cmplp
@@ -35,11 +36,12 @@ export const LinkWrapper = forwardRef(({
   }));
 });
 
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled,@atlaskit/ui-styling-standard/no-exported-styles
 if (process.env.NODE_ENV !== 'production') {
-  LinkWrapper.displayName = 'LinkWrapper';
+  LinkWrapperOldVisualRefresh.displayName = 'LinkWrapperOldVisualRefresh';
 }
-export const Wrapper = forwardRef(({
+export const WrapperOldVisualRefresh = forwardRef(({
   as: C = "div",
   style: __cmpls,
   ...__cmplp
@@ -64,11 +66,12 @@ export const Wrapper = forwardRef(({
   }));
 });
 
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled,@atlaskit/ui-styling-standard/no-exported-styles
 if (process.env.NODE_ENV !== 'production') {
-  Wrapper.displayName = 'Wrapper';
+  WrapperOldVisualRefresh.displayName = 'WrapperOldVisualRefresh';
 }
-export const Header = forwardRef(({
+export const HeaderOldVisualRefresh = forwardRef(({
   as: C = "div",
   style: __cmpls,
   ...__cmplp
@@ -84,11 +87,12 @@ export const Header = forwardRef(({
   }));
 });
 
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled,@atlaskit/ui-styling-standard/no-exported-styles
 if (process.env.NODE_ENV !== 'production') {
-  Header.displayName = 'Header';
+  HeaderOldVisualRefresh.displayName = 'HeaderOldVisualRefresh';
 }
-export const IconWrapper = forwardRef(({
+export const IconWrapperOldVisualRefresh = forwardRef(({
   as: C = "div",
   style: __cmpls,
   ...__cmplp
@@ -104,11 +108,12 @@ export const IconWrapper = forwardRef(({
   }));
 });
 
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled,@atlaskit/ui-styling-standard/no-exported-styles
 if (process.env.NODE_ENV !== 'production') {
-  IconWrapper.displayName = 'IconWrapper';
+  IconWrapperOldVisualRefresh.displayName = 'IconWrapperOldVisualRefresh';
 }
-export const TextWrapper = forwardRef(({
+export const TextWrapperOldVisualRefresh = forwardRef(({
   as: C = "div",
   style: __cmpls,
   ...__cmplp
@@ -124,11 +129,12 @@ export const TextWrapper = forwardRef(({
   }));
 });
 
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled,@atlaskit/ui-styling-standard/no-exported-styles
 if (process.env.NODE_ENV !== 'production') {
-  TextWrapper.displayName = 'TextWrapper';
+  TextWrapperOldVisualRefresh.displayName = 'TextWrapperOldVisualRefresh';
 }
-export const TooltipWrapper = forwardRef(({
+export const TooltipWrapperOldVisualRefresh = forwardRef(({
   as: C = "div",
   style: __cmpls,
   ...__cmplp
@@ -140,14 +146,15 @@ export const TooltipWrapper = forwardRef(({
   }));
 });
 
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // NB: `overflow` is kept as `hidden` since
 // the internal contents of the `iframe` should
 // manage scrolling behaviour.
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled,@atlaskit/ui-styling-standard/no-exported-styles
 if (process.env.NODE_ENV !== 'production') {
-  TooltipWrapper.displayName = 'TooltipWrapper';
+  TooltipWrapperOldVisualRefresh.displayName = 'TooltipWrapperOldVisualRefresh';
 }
-export const Content = forwardRef(({
+export const ContentOldVisualRefresh = forwardRef(({
   as: C = "div",
   style: __cmpls,
   ...__cmplp
@@ -165,7 +172,7 @@ export const Content = forwardRef(({
   }));
 });
 if (process.env.NODE_ENV !== 'production') {
-  Content.displayName = 'Content';
+  ContentOldVisualRefresh.displayName = 'ContentOldVisualRefresh';
 }
 const getSizeWithUnit = (value = '100%') => {
   const unit = typeof value === 'number' ? 'px' : '';

package/dist/es2019/view/InlineCard/common/action-button/index.js

@@ -8,13 +8,18 @@ export const ActionButton = /*#__PURE__*/forwardRef(({
   children,
   ...props
 }, ref) => {
+  // `Button transforms `testId` into `data-testid`. We need to transform it back to `testId`
+  const {
+    [`data-testid`]: testId
+  } = props;
   return /*#__PURE__*/React.createElement(Box, _extends({
     as: "span",
     ref: ref,
     xcss: [actionButtonStyle, !props.disabled && actionButtonNotDisabledStyle]
   }, props, {
     "aria-disabled": props.disabled,
-    role: "button"
+    role: "button",
+    testId: testId
   }), /*#__PURE__*/React.createElement(Box, {
     as: "span",
     xcss: internalButtonStyle

package/dist/es2019/view/LinkUrl/index.js

@@ -10,7 +10,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "34.10.3",
+  packageVersion: "34.10.4",
   componentName: 'linkUrl'
 };
 const Anchor = withLinkClickedEvent('a');

package/dist/es2019/view/common/UnauthorisedViewContent.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback } from 'react';
 import { FormattedMessage } from 'react-intl-next';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Anchor } from '@atlaskit/primitives';
 import { useAnalyticsEvents } from '../../common/analytics/generated/use-analytics-events';
 import { CONTENT_URL_3P_ACCOUNT_AUTH, CONTENT_URL_SECURITY_AND_PERMISSIONS } from '../../constants';
 import { messages } from '../../messages';
@@ -24,7 +26,12 @@ const UnauthorisedViewContent = ({
     values: {
       context: providerName
     }
-  })) : /*#__PURE__*/React.createElement(FormattedMessage, messages.connect_unauthorised_account_description_no_provider), ' ', /*#__PURE__*/React.createElement("a", {
+  })) : /*#__PURE__*/React.createElement(FormattedMessage, messages.connect_unauthorised_account_description_no_provider), ' ', fg('platform-linking-visual-refresh-v1') ? /*#__PURE__*/React.createElement(Anchor, {
+    href: isProductIntegrationSupported ? CONTENT_URL_3P_ACCOUNT_AUTH : CONTENT_URL_SECURITY_AND_PERMISSIONS,
+    target: "_blank",
+    testId: `${testId}-learn-more`,
+    onClick: handleLearnMoreClick
+  }, /*#__PURE__*/React.createElement(FormattedMessage, learnMoreMessage)) : /*#__PURE__*/React.createElement("a", {
     href: isProductIntegrationSupported ? CONTENT_URL_3P_ACCOUNT_AUTH : CONTENT_URL_SECURITY_AND_PERMISSIONS,
     target: "_blank",
     "data-testid": `${testId}-learn-more`,

package/dist/esm/utils/analytics/analytics.js

@@ -4,7 +4,7 @@ export var ANALYTICS_CHANNEL = 'media';
 export var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "34.10.3"
+  packageVersion: "34.10.4"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/esm/view/EmbedCard/components/ExpandedFrame.compiled.css

@@ -0,0 +1,50 @@
+._11c81il0{font:var(--ds-font-heading-xsmall,normal 600 14px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._14mj1crf:after{border-radius:9pt}
+._19it1pvm{border:solid 1px var(--ds-border,#091e4224)}
+._1tqzzgxb:after{outline:1px solid var(--ds-border,#091e4224)}
+._2rko1y44{border-radius:4px}
+._hcgvzgxb:hover:after{outline:1px solid var(--ds-border,#091e4224)}
+._qc5o94zs:after{transition:background .3s,box-shadow .3s}
+._v56414au{transition:outline .3s}
+._zulp1b66{gap:var(--ds-space-050,4px)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}
+._15l2idpf:after{top:0}
+._16jlkb7n{flex-grow:1}
+._18m915vq{overflow-y:hidden}
+._18m91wug{overflow-y:auto}
+._18postnw:after{position:absolute}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._19doidpf:after{left:0}
+._1bqqidpf:after{z-index:0}
+._1bsb7vkz{width:1pc}
+._1e0c1txw{display:flex}
+._1hfk18uv:after{background-color:initial}
+._1hfkhp5a:after{background-color:var(--ds-surface-raised,#fff)}
+._1ifiidpf .embed-header{opacity:0}
+._1ifikb7n .embed-header{opacity:1}
+._1pbykb7n{z-index:1}
+._1reo15vq{overflow-x:hidden}
+._1reo1wug{overflow-x:auto}
+._1x88idpf:after{bottom:0}
+._2lx21bp4{flex-direction:column}
+._32rxidpf:after{right:0}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
+._4t3i7vkz{height:1pc}
+._4t3igktf{height:20px}
+._4t3ik5xz{height:27pc}
+._4tpuhp5a:hover:after{background-color:var(--ds-surface-raised,#fff)}
+._8x3u92p9:after{box-shadow:0 0 0 3px var(--ds-border-selected,#0c66e4)}
+._aetrb3bt:after{content:""}
+._bfhkhp5a{background-color:var(--ds-surface-raised,#fff)}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._kqswh2mm{position:relative}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
+._u94kidpf:after{flex-grow:0}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
+._x148kb7n:hover .embed-header{opacity:1}
+._1bnxglyw:hover{text-decoration-line:none}
+._9oik18uv:hover{text-decoration-color:initial}
+._jf4cnqa1:hover{text-decoration-style:solid}
+._1jhm1ips:active{outline:8px solid var(--ds-background-selected,#e9f2ff)}

package/dist/esm/view/EmbedCard/components/ExpandedFrame.js

@@ -1,4 +1,6 @@
 /* ExpandedFrame.tsx generated by @compiled/babel-plugin v0.36.0 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./ExpandedFrame.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -6,7 +8,7 @@ import Tooltip from '@atlaskit/tooltip';
 import { useMouseDownEvent } from '../../../state/analytics/useLinkClicked';
 import { handleClickCommon } from '../../common/utils';
 import { ExpandedFrameOld } from './ExpandedFrameOld';
-import { className, Content, Header, IconWrapper, LinkWrapper, TextWrapper, TooltipWrapper, Wrapper } from './styled';
+import { className, ContentOldVisualRefresh, HeaderOldVisualRefresh, IconWrapperOldVisualRefresh, LinkWrapperOldVisualRefresh, TextWrapperOldVisualRefresh, TooltipWrapperOldVisualRefresh, WrapperOldVisualRefresh } from './styled';
 var ExpandedFrameNew = function ExpandedFrameNew(_ref) {
   var _ref$isPlaceholder = _ref.isPlaceholder,
     isPlaceholder = _ref$isPlaceholder === void 0 ? false : _ref$isPlaceholder,
@@ -35,18 +37,35 @@ var ExpandedFrameNew = function ExpandedFrameNew(_ref) {
   };
   var handleMouseDown = useMouseDownEvent();
   var renderHeader = function renderHeader() {
+    if (fg('platform-linking-visual-refresh-v1')) {
+      return frameStyle !== 'hide' && /*#__PURE__*/React.createElement("div", {
+        className: ax([styles.header, "embed-header"])
+      }, /*#__PURE__*/React.createElement("div", {
+        className: ax([styles.headerIcon])
+      }, icon), /*#__PURE__*/React.createElement("div", {
+        className: ax([styles.tooltipWrapper])
+      }, !isPlaceholder && /*#__PURE__*/React.createElement(Tooltip, {
+        content: text,
+        hideTooltipOnMouseDown: true
+      }, /*#__PURE__*/React.createElement("a", {
+        href: href,
+        onClick: handleClick,
+        onMouseDown: handleMouseDown,
+        className: ax([styles.headerAnchor])
+      }, text))));
+    }
     return (
       /*#__PURE__*/
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      React.createElement(Header, {
+      React.createElement(HeaderOldVisualRefresh, {
         className: "embed-header",
         frameStyle: frameStyle
-      }, /*#__PURE__*/React.createElement(IconWrapper, {
+      }, /*#__PURE__*/React.createElement(IconWrapperOldVisualRefresh, {
         isPlaceholder: isPlaceholder
-      }, !isPlaceholder && icon), /*#__PURE__*/React.createElement(TooltipWrapper, null, /*#__PURE__*/React.createElement(Tooltip, {
+      }, !isPlaceholder && icon), /*#__PURE__*/React.createElement(TooltipWrapperOldVisualRefresh, null, /*#__PURE__*/React.createElement(Tooltip, {
         content: text,
         hideTooltipOnMouseDown: true
-      }, /*#__PURE__*/React.createElement(TextWrapper, {
+      }, /*#__PURE__*/React.createElement(TextWrapperOldVisualRefresh, {
         isPlaceholder: isPlaceholder
       }, !isPlaceholder && /*#__PURE__*/React.createElement("a", {
         href: href,
@@ -55,8 +74,20 @@ var ExpandedFrameNew = function ExpandedFrameNew(_ref) {
       }, text)))))
     );
   };
+  var interactive = isInteractive();
+  var showBackgroundAlways = frameStyle === 'show' || isSelected && frameStyle !== 'hide';
+  var showBackgroundOnHover = interactive && frameStyle !== 'hide';
   var renderContent = function renderContent() {
-    return /*#__PURE__*/React.createElement(Content, {
+    if (fg('platform-linking-visual-refresh-v1')) {
+      return /*#__PURE__*/React.createElement("div", {
+        "data-testid": "embed-content-wrapper",
+        // This fixes an issue with input fields in cross domain iframes (ie. databases and jira fields from different domains)
+        // See: HOT-107830
+        contentEditable: false,
+        className: ax([styles.contentStyle, setOverflow && allowScrollBar && styles.contentOverflowAuto, interactive && !showBackgroundAlways && !showBackgroundOnHover && styles.contentInteractiveActiveBorder])
+      }, children);
+    }
+    return /*#__PURE__*/React.createElement(ContentOldVisualRefresh, {
       "data-testid": "embed-content-wrapper",
       allowScrollBar: allowScrollBar,
       removeOverflow: !setOverflow,
@@ -69,8 +100,26 @@ var ExpandedFrameNew = function ExpandedFrameNew(_ref) {
       suppressContentEditableWarning: true
     }, children);
   };
+  if (fg('platform-linking-visual-refresh-v1')) {
+    return /*#__PURE__*/React.createElement("div", _extends({
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: ax([styles.linkWrapper, inheritDimensions && styles.linkWrapperInheritDimensions, isSelected && frameStyle !== 'hide' && styles.linkWrapperSelected, showBackgroundAlways && styles.linkWrapperBorderAndBackground, showBackgroundOnHover && !showBackgroundAlways && styles.linkWrapperInteractiveNotHidden, className]),
+      style: {
+        minWidth: minWidth ? "".concat(minWidth, "px") : '',
+        maxWidth: maxWidth ? "".concat(maxWidth, "px") : ''
+      },
+      "data-testid": testId,
+      "data-trello-do-not-use-override": testId
+      // Due to limitations of testing library, we can't assert ::after
+      ,
+      "data-is-selected": isSelected
+    }, (isPlaceholder || !href) && {
+      'data-wrapper-type': 'default',
+      'data-is-interactive': isInteractive()
+    }), renderHeader(), renderContent());
+  }
   if (!isPlaceholder && href) {
-    return /*#__PURE__*/React.createElement(LinkWrapper
+    return /*#__PURE__*/React.createElement(LinkWrapperOldVisualRefresh
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     , {
       className: className,
@@ -87,7 +136,7 @@ var ExpandedFrameNew = function ExpandedFrameNew(_ref) {
       inheritDimensions: inheritDimensions
     }, renderHeader(), renderContent());
   } else {
-    return /*#__PURE__*/React.createElement(Wrapper
+    return /*#__PURE__*/React.createElement(WrapperOldVisualRefresh
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     , {
       className: className,
@@ -110,4 +159,18 @@ export var ExpandedFrame = function ExpandedFrame(props) {
   } else {
     return /*#__PURE__*/React.createElement(ExpandedFrameOld, props);
   }
+};
+var styles = {
+  linkWrapper: "_zulpu2gc _kqswh2mm _1e0c1txw _2lx21bp4 _4t3ik5xz _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc _uiztglyw _qc5o94zs _14mj1crf _aetrb3bt _18postnw _15l2idpf _32rxidpf _1x88idpf _19doidpf _1hfk18uv _1bqqidpf _u94kidpf _1ifiidpf",
+  linkWrapperInheritDimensions: "_4t3i1osq",
+  linkWrapperSelected: "_8x3u92p9",
+  linkWrapperBorderAndBackground: "_1tqzzgxb _1hfkhp5a _1ifikb7n",
+  linkWrapperInteractiveNotHidden: "_hcgvzgxb _4tpuhp5a _x148kb7n",
+  header: "_zulp1b66 _1e0c1txw _4cvr1h6o _4t3igktf _1pbykb7n",
+  tooltipWrapper: "_1reo15vq _18m915vq",
+  headerAnchor: "_11c81il0 _9oik18uv _1bnxglyw _jf4cnqa1",
+  headerIcon: "_1bsb7vkz _4t3i7vkz",
+  contentStyle: "_19it1pvm _2rko1y44 _1reo15vq _18m915vq _v56414au _bfhkhp5a _16jlkb7n _4t3i1osq _1pbykb7n",
+  contentInteractiveActiveBorder: "_1jhm1ips",
+  contentOverflowAuto: "_1reo1wug _18m91wug"
 };

package/dist/esm/view/EmbedCard/components/styled.js

@@ -28,8 +28,9 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { B100, B50, N30, N300, N40 } from '@atlaskit/theme/colors';
 export var className = 'media-card-frame';
 export var embedHeaderHeight = 32;
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled,@atlaskit/ui-styling-standard/no-exported-styles
-export var LinkWrapper = forwardRef(function (_ref, __cmplr) {
+export var LinkWrapperOldVisualRefresh = forwardRef(function (_ref, __cmplr) {
   var _ref$as = _ref.as,
     C = _ref$as === void 0 ? "div" : _ref$as,
     __cmpls = _ref.style,
@@ -51,11 +52,12 @@ export var LinkWrapper = forwardRef(function (_ref, __cmplr) {
   }));
 });
 
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled,@atlaskit/ui-styling-standard/no-exported-styles
 if (process.env.NODE_ENV !== 'production') {
-  LinkWrapper.displayName = 'LinkWrapper';
+  LinkWrapperOldVisualRefresh.displayName = 'LinkWrapperOldVisualRefresh';
 }
-export var Wrapper = forwardRef(function (_ref2, __cmplr) {
+export var WrapperOldVisualRefresh = forwardRef(function (_ref2, __cmplr) {
   var _ref2$as = _ref2.as,
     C = _ref2$as === void 0 ? "div" : _ref2$as,
     __cmpls = _ref2.style,
@@ -77,11 +79,12 @@ export var Wrapper = forwardRef(function (_ref2, __cmplr) {
   }));
 });
 
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled,@atlaskit/ui-styling-standard/no-exported-styles
 if (process.env.NODE_ENV !== 'production') {
-  Wrapper.displayName = 'Wrapper';
+  WrapperOldVisualRefresh.displayName = 'WrapperOldVisualRefresh';
 }
-export var Header = forwardRef(function (_ref3, __cmplr) {
+export var HeaderOldVisualRefresh = forwardRef(function (_ref3, __cmplr) {
   var _ref3$as = _ref3.as,
     C = _ref3$as === void 0 ? "div" : _ref3$as,
     __cmpls = _ref3.style,
@@ -95,11 +98,12 @@ export var Header = forwardRef(function (_ref3, __cmplr) {
   }));
 });
 
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled,@atlaskit/ui-styling-standard/no-exported-styles
 if (process.env.NODE_ENV !== 'production') {
-  Header.displayName = 'Header';
+  HeaderOldVisualRefresh.displayName = 'HeaderOldVisualRefresh';
 }
-export var IconWrapper = forwardRef(function (_ref4, __cmplr) {
+export var IconWrapperOldVisualRefresh = forwardRef(function (_ref4, __cmplr) {
   var _ref4$as = _ref4.as,
     C = _ref4$as === void 0 ? "div" : _ref4$as,
     __cmpls = _ref4.style,
@@ -113,11 +117,12 @@ export var IconWrapper = forwardRef(function (_ref4, __cmplr) {
   }));
 });
 
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled,@atlaskit/ui-styling-standard/no-exported-styles
 if (process.env.NODE_ENV !== 'production') {
-  IconWrapper.displayName = 'IconWrapper';
+  IconWrapperOldVisualRefresh.displayName = 'IconWrapperOldVisualRefresh';
 }
-export var TextWrapper = forwardRef(function (_ref5, __cmplr) {
+export var TextWrapperOldVisualRefresh = forwardRef(function (_ref5, __cmplr) {
   var _ref5$as = _ref5.as,
     C = _ref5$as === void 0 ? "div" : _ref5$as,
     __cmpls = _ref5.style,
@@ -131,11 +136,12 @@ export var TextWrapper = forwardRef(function (_ref5, __cmplr) {
   }));
 });
 
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled,@atlaskit/ui-styling-standard/no-exported-styles
 if (process.env.NODE_ENV !== 'production') {
-  TextWrapper.displayName = 'TextWrapper';
+  TextWrapperOldVisualRefresh.displayName = 'TextWrapperOldVisualRefresh';
 }
-export var TooltipWrapper = forwardRef(function (_ref6, __cmplr) {
+export var TooltipWrapperOldVisualRefresh = forwardRef(function (_ref6, __cmplr) {
   var _ref6$as = _ref6.as,
     C = _ref6$as === void 0 ? "div" : _ref6$as,
     __cmpls = _ref6.style,
@@ -147,14 +153,15 @@ export var TooltipWrapper = forwardRef(function (_ref6, __cmplr) {
   }));
 });
 
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // NB: `overflow` is kept as `hidden` since
 // the internal contents of the `iframe` should
 // manage scrolling behaviour.
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled,@atlaskit/ui-styling-standard/no-exported-styles
 if (process.env.NODE_ENV !== 'production') {
-  TooltipWrapper.displayName = 'TooltipWrapper';
+  TooltipWrapperOldVisualRefresh.displayName = 'TooltipWrapperOldVisualRefresh';
 }
-export var Content = forwardRef(function (_ref7, __cmplr) {
+export var ContentOldVisualRefresh = forwardRef(function (_ref7, __cmplr) {
   var _ref7$as = _ref7.as,
     C = _ref7$as === void 0 ? "div" : _ref7$as,
     __cmpls = _ref7.style,
@@ -170,7 +177,7 @@ export var Content = forwardRef(function (_ref7, __cmplr) {
   }));
 });
 if (process.env.NODE_ENV !== 'production') {
-  Content.displayName = 'Content';
+  ContentOldVisualRefresh.displayName = 'ContentOldVisualRefresh';
 }
 var getSizeWithUnit = function getSizeWithUnit() {
   var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '100%';

package/dist/esm/view/InlineCard/common/action-button/index.js

@@ -9,13 +9,16 @@ import { Box, xcss } from '@atlaskit/primitives';
 export var ActionButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     props = _objectWithoutProperties(_ref, _excluded);
+  // `Button transforms `testId` into `data-testid`. We need to transform it back to `testId`
+  var testId = props["data-testid"];
   return /*#__PURE__*/React.createElement(Box, _extends({
     as: "span",
     ref: ref,
     xcss: [actionButtonStyle, !props.disabled && actionButtonNotDisabledStyle]
   }, props, {
     "aria-disabled": props.disabled,
-    role: "button"
+    role: "button",
+    testId: testId
   }), /*#__PURE__*/React.createElement(Box, {
     as: "span",
     xcss: internalButtonStyle

package/dist/esm/view/LinkUrl/index.js

@@ -13,7 +13,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "34.10.3",
+  packageVersion: "34.10.4",
   componentName: 'linkUrl'
 };
 var Anchor = withLinkClickedEvent('a');

package/dist/esm/view/common/UnauthorisedViewContent.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback } from 'react';
 import { FormattedMessage } from 'react-intl-next';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Anchor } from '@atlaskit/primitives';
 import { useAnalyticsEvents } from '../../common/analytics/generated/use-analytics-events';
 import { CONTENT_URL_3P_ACCOUNT_AUTH, CONTENT_URL_SECURITY_AND_PERMISSIONS } from '../../constants';
 import { messages } from '../../messages';
@@ -23,7 +25,12 @@ var UnauthorisedViewContent = function UnauthorisedViewContent(_ref) {
     values: {
       context: providerName
     }
-  })) : /*#__PURE__*/React.createElement(FormattedMessage, messages.connect_unauthorised_account_description_no_provider), ' ', /*#__PURE__*/React.createElement("a", {
+  })) : /*#__PURE__*/React.createElement(FormattedMessage, messages.connect_unauthorised_account_description_no_provider), ' ', fg('platform-linking-visual-refresh-v1') ? /*#__PURE__*/React.createElement(Anchor, {
+    href: isProductIntegrationSupported ? CONTENT_URL_3P_ACCOUNT_AUTH : CONTENT_URL_SECURITY_AND_PERMISSIONS,
+    target: "_blank",
+    testId: "".concat(testId, "-learn-more"),
+    onClick: handleLearnMoreClick
+  }, /*#__PURE__*/React.createElement(FormattedMessage, learnMoreMessage)) : /*#__PURE__*/React.createElement("a", {
     href: isProductIntegrationSupported ? CONTENT_URL_3P_ACCOUNT_AUTH : CONTENT_URL_SECURITY_AND_PERMISSIONS,
     target: "_blank",
     "data-testid": "".concat(testId, "-learn-more"),

package/dist/types/view/EmbedCard/components/styled.d.ts

@@ -36,12 +36,12 @@ export interface ThumbnailProps {
 export interface PlaceholderProps {
     isPlaceholder: boolean;
 }
-export declare const LinkWrapper: import("react").ComponentType<WrapperProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@compiled/react").StyledProps>;
-export declare const Wrapper: import("react").ComponentType<WrapperProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@compiled/react").StyledProps>;
-export declare const Header: import("react").ComponentType<HeaderProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@compiled/react").StyledProps>;
-export declare const IconWrapper: import("react").ComponentType<PlaceholderProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@compiled/react").StyledProps>;
-export declare const TextWrapper: import("react").ComponentType<PlaceholderProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@compiled/react").StyledProps>;
-export declare const TooltipWrapper: import("react").ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@compiled/react").StyledProps>;
-export declare const Content: import("react").ComponentType<ContentProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@compiled/react").StyledProps>;
+export declare const LinkWrapperOldVisualRefresh: import("react").ComponentType<WrapperProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@compiled/react").StyledProps>;
+export declare const WrapperOldVisualRefresh: import("react").ComponentType<WrapperProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@compiled/react").StyledProps>;
+export declare const HeaderOldVisualRefresh: import("react").ComponentType<HeaderProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@compiled/react").StyledProps>;
+export declare const IconWrapperOldVisualRefresh: import("react").ComponentType<PlaceholderProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@compiled/react").StyledProps>;
+export declare const TextWrapperOldVisualRefresh: import("react").ComponentType<PlaceholderProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@compiled/react").StyledProps>;
+export declare const TooltipWrapperOldVisualRefresh: import("react").ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@compiled/react").StyledProps>;
+export declare const ContentOldVisualRefresh: import("react").ComponentType<ContentProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@compiled/react").StyledProps>;
 export declare const Image: import("react").ComponentType<ImageProps & import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & import("@compiled/react").StyledProps>;
 export declare const Thumbnail: import("react").ComponentType<ThumbnailProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@compiled/react").StyledProps>;

package/dist/types/view/InlineCard/common/action-button/index.d.ts

@@ -2,6 +2,7 @@ import React, { type ComponentPropsWithRef } from 'react';
 import { Box } from '@atlaskit/primitives';
 type ActionButtonProps = ComponentPropsWithRef<typeof Box> & {
     disabled?: boolean;
+    [`data-testid`]?: string;
 };
 /**
  * Action button has to be a span for the overflow to work correctly

package/dist/types-ts4.5/view/EmbedCard/components/styled.d.ts

@@ -36,12 +36,12 @@ export interface ThumbnailProps {
 export interface PlaceholderProps {
     isPlaceholder: boolean;
 }
-export declare const LinkWrapper: import("react").ComponentType<WrapperProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@compiled/react").StyledProps>;
-export declare const Wrapper: import("react").ComponentType<WrapperProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@compiled/react").StyledProps>;
-export declare const Header: import("react").ComponentType<HeaderProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@compiled/react").StyledProps>;
-export declare const IconWrapper: import("react").ComponentType<PlaceholderProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@compiled/react").StyledProps>;
-export declare const TextWrapper: import("react").ComponentType<PlaceholderProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@compiled/react").StyledProps>;
-export declare const TooltipWrapper: import("react").ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@compiled/react").StyledProps>;
-export declare const Content: import("react").ComponentType<ContentProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@compiled/react").StyledProps>;
+export declare const LinkWrapperOldVisualRefresh: import("react").ComponentType<WrapperProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@compiled/react").StyledProps>;
+export declare const WrapperOldVisualRefresh: import("react").ComponentType<WrapperProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@compiled/react").StyledProps>;
+export declare const HeaderOldVisualRefresh: import("react").ComponentType<HeaderProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@compiled/react").StyledProps>;
+export declare const IconWrapperOldVisualRefresh: import("react").ComponentType<PlaceholderProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@compiled/react").StyledProps>;
+export declare const TextWrapperOldVisualRefresh: import("react").ComponentType<PlaceholderProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@compiled/react").StyledProps>;
+export declare const TooltipWrapperOldVisualRefresh: import("react").ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@compiled/react").StyledProps>;
+export declare const ContentOldVisualRefresh: import("react").ComponentType<ContentProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@compiled/react").StyledProps>;
 export declare const Image: import("react").ComponentType<ImageProps & import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & import("@compiled/react").StyledProps>;
 export declare const Thumbnail: import("react").ComponentType<ThumbnailProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@compiled/react").StyledProps>;

package/dist/types-ts4.5/view/InlineCard/common/action-button/index.d.ts

@@ -2,6 +2,7 @@ import React, { type ComponentPropsWithRef } from 'react';
 import { Box } from '@atlaskit/primitives';
 type ActionButtonProps = ComponentPropsWithRef<typeof Box> & {
     disabled?: boolean;
+    [`data-testid`]?: string;
 };
 /**
  * Action button has to be a span for the overflow to work correctly

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "34.10.3",
+	"version": "34.10.4",
 	"description": "Smart card component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"