@atlaskit/smart-card 34.5.1 → 34.6.0

package/dist/cjs/view/HoverCard/components/views/resolved/HoverCardResolvedViewOld.js

@@ -0,0 +1,90 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _useAnalyticsEvents2 = require("../../../../../common/analytics/generated/use-analytics-events");
+var _constants = require("../../../../../constants");
+var _analytics = require("../../../../../state/analytics");
+var _FlexibleCard = _interopRequireDefault(require("../../../../FlexibleCard"));
+var _blocks = require("../../../../FlexibleCard/components/blocks");
+var _utils = require("../../../utils");
+var _ImagePreview = _interopRequireDefault(require("../../ImagePreview"));
+var _styled = require("./styled");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var HoverCardResolvedViewOld = function HoverCardResolvedViewOld(_ref) {
+  var _cardState$details;
+  var cardState = _ref.cardState,
+    extensionKey = _ref.extensionKey,
+    flexibleCardProps = _ref.flexibleCardProps,
+    isAISummaryEnabled = _ref.isAISummaryEnabled,
+    onActionClick = _ref.onActionClick,
+    titleBlockProps = _ref.titleBlockProps,
+    id = _ref.id;
+  var _useAnalyticsEvents = (0, _useAnalyticsEvents2.useAnalyticsEvents)(),
+    fireEvent = _useAnalyticsEvents.fireEvent;
+  (0, _react.useEffect)(function () {
+    // Since this hover view is only rendered on resolved status,
+    // there is no need to check for statuses.
+    (0, _analytics.succeedUfoExperience)('smart-link-rendered', id || 'NULL', {
+      extensionKey: extensionKey,
+      display: _constants.CardDisplay.HoverCardPreview
+    });
+
+    // UFO will disregard this if authentication experience has not yet been started
+    (0, _analytics.succeedUfoExperience)('smart-link-authenticated', id || 'NULL', {
+      display: _constants.CardDisplay.HoverCardPreview
+    });
+    fireEvent('ui.smartLink.renderSuccess', {
+      display: _constants.CardDisplay.HoverCardPreview
+    });
+  }, [extensionKey, fireEvent, id]);
+  var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
+  var _useMemo = (0, _react.useMemo)(function () {
+      return (0, _utils.getMetadata)(extensionKey, data);
+    }, [data, extensionKey]),
+    primary = _useMemo.primary,
+    secondary = _useMemo.secondary;
+  var snippetHeight = _react.default.useRef(0);
+  var snippetBlockRef = (0, _react.useRef)(null);
+  var onSnippetRender = (0, _react.useCallback)(function () {
+    var _snippetBlockRef$curr, _snippetBlockRef$curr2;
+    snippetHeight.current = (_snippetBlockRef$curr = (_snippetBlockRef$curr2 = snippetBlockRef.current) === null || _snippetBlockRef$curr2 === void 0 ? void 0 : _snippetBlockRef$curr2.getBoundingClientRect().height) !== null && _snippetBlockRef$curr !== void 0 ? _snippetBlockRef$curr : 0;
+  }, []);
+  var imagePreview = (0, _ImagePreview.default)({
+    data: data,
+    fallbackElementHeight: snippetHeight.current
+  });
+  var snippet = imagePreview ? null : /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, {
+    status: _constants.SmartLinkStatus.Resolved
+  });
+  var aiSummaryMinHeight = snippet ? snippetHeight.current : 0;
+  return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, flexibleCardProps, imagePreview, /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, (0, _extends2.default)({}, titleBlockProps, {
+    metadataPosition: _constants.SmartLinkPosition.Top
+  })), /*#__PURE__*/_react.default.createElement(_blocks.MetadataBlock, {
+    primary: primary,
+    secondary: secondary,
+    overrideCss: _styled.metadataBlockCss,
+    maxLines: 1,
+    size: _constants.SmartLinkSize.Medium
+  }), isAISummaryEnabled ? /*#__PURE__*/_react.default.createElement(_blocks.AISummaryBlock, {
+    aiSummaryMinHeight: aiSummaryMinHeight,
+    placeholder: snippet,
+    status: _constants.SmartLinkStatus.Resolved
+  }) : snippet, /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, {
+    testId: "hidden-snippet",
+    onRender: onSnippetRender,
+    blockRef: snippetBlockRef,
+    overrideCss: _styled.hiddenSnippetStyles
+  }), /*#__PURE__*/_react.default.createElement(_blocks.ActionBlock, {
+    onClick: onActionClick,
+    spaceInline: "space.100"
+  }), /*#__PURE__*/_react.default.createElement(_blocks.AIFooterBlock, null));
+};
+var _default = exports.default = HoverCardResolvedViewOld;

package/dist/cjs/view/HoverCard/components/views/resolved/index.compiled.css

@@ -0,0 +1,15 @@
+
+._2aco1vlj [data-smart-element-group]{font:var(--ds-font-body-small,normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._quenui7n [data-smart-element-group]{gap:.06rem}
+._zulpidpf{gap:0}
+._zulpu2gc{gap:var(--ds-space-100,8px)}._13mh1pd9 [data-smart-element=Title]{font-weight:var(--ds-font-weight-semibold,600)}
+._1ljqu2gc [data-separator]+[data-separator]:before{margin-right:var(--ds-space-100,8px)}
+._3tmpcxkx [data-smart-element-group]:nth-of-type(2)>span{margin-left:var(--ds-space-100,.5rem)}
+._3um015vq{visibility:hidden}
+._fmt31ohn [data-smart-element-group]:first-of-type{flex-grow:7}
+._ia0l11wp [data-smart-element-group]:nth-of-type(2){flex-grow:3}
+._kqswstnw{position:absolute}
+._oebj1txw [data-smart-element-group]{display:flex}
+._w3mucxkx [data-smart-element-group]:first-of-type>span{margin-right:var(--ds-space-100,.5rem)}
+._x7z0u2gc [data-smart-element-group]>[data-smart-element-group]>span{margin-right:var(--ds-space-100,8px)}
+._yklxcxkx [data-smart-element-group]:first-of-type [data-separator]+[data-separator]:before{margin-right:var(--ds-space-100,.5rem)}

package/dist/cjs/view/HoverCard/components/views/resolved/index.js

@@ -1,3 +1,4 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,8 +7,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./index.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useAnalyticsEvents2 = require("../../../../../common/analytics/generated/use-analytics-events");
 var _constants = require("../../../../../constants");
 var _analytics = require("../../../../../state/analytics");
@@ -15,10 +19,17 @@ var _FlexibleCard = _interopRequireDefault(require("../../../../FlexibleCard"));
 var _blocks = require("../../../../FlexibleCard/components/blocks");
 var _utils = require("../../../utils");
 var _ImagePreview = _interopRequireDefault(require("../../ImagePreview"));
-var _styled = require("./styled");
+var _HoverCardResolvedViewOld = _interopRequireDefault(require("./HoverCardResolvedViewOld"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
+var hiddenSnippetStyles = null;
+var metadataBlockCss = null;
+
+/**
+ * Moved from HoverCardContent.tsx due to CompiledCSS migration.
+ */
+var titleBlockStyle = null;
+var HoverCardResolvedViewNew = function HoverCardResolvedViewNew(_ref) {
   var _cardState$details;
   var cardState = _ref.cardState,
     extensionKey = _ref.extensionKey,
@@ -66,13 +77,16 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
   });
   var aiSummaryMinHeight = snippet ? snippetHeight.current : 0;
   return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, flexibleCardProps, imagePreview, /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, (0, _extends2.default)({}, titleBlockProps, {
-    metadataPosition: _constants.SmartLinkPosition.Top
+    metadataPosition: _constants.SmartLinkPosition.Top,
+    status: _constants.SmartLinkStatus.Resolved,
+    className: (0, _runtime.ax)(["_zulpu2gc _quenui7n _oebj1txw _x7z0u2gc _1ljqu2gc _13mh1pd9"])
   })), /*#__PURE__*/_react.default.createElement(_blocks.MetadataBlock, {
     primary: primary,
     secondary: secondary,
-    overrideCss: _styled.metadataBlockCss,
     maxLines: 1,
-    size: _constants.SmartLinkSize.Medium
+    size: _constants.SmartLinkSize.Medium,
+    status: _constants.SmartLinkStatus.Resolved,
+    className: (0, _runtime.ax)(["_zulpidpf _2aco1vlj _fmt31ohn _yklxcxkx _w3mucxkx _ia0l11wp _3tmpcxkx"])
   }), isAISummaryEnabled ? /*#__PURE__*/_react.default.createElement(_blocks.AISummaryBlock, {
     aiSummaryMinHeight: aiSummaryMinHeight,
     placeholder: snippet,
@@ -81,10 +95,18 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
     testId: "hidden-snippet",
     onRender: onSnippetRender,
     blockRef: snippetBlockRef,
-    overrideCss: _styled.hiddenSnippetStyles
+    status: _constants.SmartLinkStatus.Resolved,
+    className: (0, _runtime.ax)(["_3um015vq _kqswstnw"])
   }), /*#__PURE__*/_react.default.createElement(_blocks.ActionBlock, {
     onClick: onActionClick,
     spaceInline: "space.100"
   }), /*#__PURE__*/_react.default.createElement(_blocks.AIFooterBlock, null));
 };
+var HoverCardResolvedView = function HoverCardResolvedView(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/_react.default.createElement(HoverCardResolvedViewNew, props);
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_HoverCardResolvedViewOld.default, props);
+  }
+};
 var _default = exports.default = HoverCardResolvedView;

package/dist/cjs/view/HoverCard/components/views/resolved/styled.js

@@ -11,14 +11,23 @@ var _styled = require("../../../styled");
 var _templateObject; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var elementGap = '0.5rem';
 
+/**
+ * @deprecated remove on FF clean up bandicoots-compiled-migration-smartcard
+ */
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var metadataBlockCss = exports.metadataBlockCss = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tgap: 0px;\n\t/* primary element group */\n\t[data-smart-element-group]:nth-of-type(1) {\n\t\tflex-grow: 7;\n\n\t\t// a separator between text-based element\n\t\t", "\n\n\t\t/* horizontal spacing between elements in group */\n    > span {\n\t\t\tmargin-right: ", ";\n\t\t}\n\t}\n\t/* secondary element group */\n\t[data-smart-element-group]:nth-of-type(2) {\n\t\tflex-grow: 3;\n\t\t/* horizontal spacing between elements in group */\n\t\t> span {\n\t\t\tmargin-left: ", ";\n\t\t}\n\t}\n\n\t[data-smart-element-group] {\n\t\tline-height: 1rem;\n\t}\n"])), _styled.separatorCss, elementGap, elementGap);
 
+/**
+ * @deprecated remove on FF clean up bandicoots-compiled-migration-smartcard
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var footerBlockCss = exports.footerBlockCss = (0, _react.css)({
   height: '1.5rem'
 });
 
+/**
+ * @deprecated remove on FF clean up bandicoots-compiled-migration-smartcard
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var hiddenSnippetStyles = exports.hiddenSnippetStyles = (0, _react.css)({
   visibility: 'hidden',

package/dist/cjs/view/HoverCard/components/views/resolving/HoverCardLoadingViewOld.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _blocks = require("../../../../FlexibleCard/components/blocks");
+var _actionGroup = _interopRequireDefault(require("../../../../FlexibleCard/components/blocks/action-group"));
+var _loadingSkeleton = require("../../../../FlexibleCard/components/common/loading-skeleton");
+var _icon = _interopRequireDefault(require("../../../../FlexibleCard/components/elements/icon"));
+var _styled = require("../../../styled");
+var _styled2 = require("./styled");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var HoverCardLoadingViewOld = function HoverCardLoadingViewOld(_ref) {
+  var titleBlockProps = _ref.titleBlockProps;
+  var testId = 'hover-card-loading-view';
+  var lineHeightRem = 1.25;
+  var skeletonWidth = _styled.CARD_WIDTH_REM - 2;
+  var size = titleBlockProps.size,
+    actions = titleBlockProps.actions;
+  var actionGroup = (actions === null || actions === void 0 ? void 0 : actions.length) && (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && (0, _react2.jsx)(_actionGroup.default, {
+    items: actions,
+    visibleButtonsNum: 2
+  });
+  var LoadingSkeleton = (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? _loadingSkeleton.LoadingSkeletonNew : _loadingSkeleton.LoadingSkeletonOld;
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    (0, _react2.jsx)("div", {
+      css: _styled2.loadingViewContainer,
+      "data-testid": testId
+    }, (0, _react2.jsx)("div", {
+      css: _styled2.skeletonContainer
+    }, (0, _react2.jsx)(_blocks.CustomBlock, (0, _extends2.default)({}, titleBlockProps, {
+      overrideCss: _styled2.titleBlockStyles,
+      testId: "".concat(testId, "-title-block")
+    }), (0, _react2.jsx)(_icon.default, {
+      render: function render() {
+        return (0, _react2.jsx)(LoadingSkeleton, null);
+      },
+      size: size
+    }), (0, _react2.jsx)("span", {
+      css: (0, _styled2.getTitleStyles)(lineHeightRem),
+      "data-testid": "".concat(testId, "-title")
+    }, (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? (0, _react2.jsx)(_loadingSkeleton.LoadingSkeletonNew, {
+      height: "".concat(lineHeightRem, "rem")
+    }) : (0, _react2.jsx)(_loadingSkeleton.LoadingSkeletonOld, {
+      height: lineHeightRem
+    })), actionGroup), (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_loadingSkeleton.LoadingSkeletonNew, {
+      width: "".concat(skeletonWidth, "rem"),
+      height: "".concat(lineHeightRem, "rem")
+    }), (0, _react2.jsx)(_loadingSkeleton.LoadingSkeletonNew, {
+      width: "".concat(skeletonWidth, "rem"),
+      height: "".concat(lineHeightRem * 3, "rem")
+    }), (0, _react2.jsx)(_loadingSkeleton.LoadingSkeletonNew, {
+      width: "".concat(skeletonWidth, "rem"),
+      height: "".concat(lineHeightRem, "rem")
+    })) : (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_loadingSkeleton.LoadingSkeletonOld, {
+      width: skeletonWidth,
+      height: lineHeightRem
+    }), (0, _react2.jsx)(_loadingSkeleton.LoadingSkeletonOld, {
+      width: skeletonWidth,
+      height: lineHeightRem * 3
+    }), (0, _react2.jsx)(_loadingSkeleton.LoadingSkeletonOld, {
+      width: skeletonWidth,
+      height: lineHeightRem
+    }))))
+  );
+};
+var _default = exports.default = HoverCardLoadingViewOld;

package/dist/cjs/view/HoverCard/components/views/resolving/index.compiled.css

@@ -0,0 +1,12 @@
+
+._1yt41e9d{padding:var(--ds-space-200,1rem)}
+._zulpcxkx{gap:var(--ds-space-100,.5rem)}
+._zulpud5o{gap:.625rem}._16jlkb7n{flex-grow:1}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1o9zidpf{flex-shrink:0}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._4t3i1k92{height:1.25rem}
+._e2oo1osq span{width:100%}
+._i0dl1wug{flex-basis:auto}

package/dist/cjs/view/HoverCard/components/views/resolving/index.js

@@ -1,3 +1,4 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,76 +6,78 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./index.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@emotion/react");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _blocks = require("../../../../FlexibleCard/components/blocks");
 var _actionGroup = _interopRequireDefault(require("../../../../FlexibleCard/components/blocks/action-group"));
 var _loadingSkeleton = require("../../../../FlexibleCard/components/common/loading-skeleton");
 var _icon = _interopRequireDefault(require("../../../../FlexibleCard/components/elements/icon"));
 var _styled = require("../../../styled");
-var _styled2 = require("./styled");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var HoverCardLoadingView = function HoverCardLoadingView(_ref) {
+var _HoverCardLoadingViewOld = _interopRequireDefault(require("./HoverCardLoadingViewOld"));
+var loadingViewContainer = null;
+var skeletonContainer = null;
+var titleStyle = null;
+var titleBlockStyles = null;
+var HoverCardLoadingViewNew = function HoverCardLoadingViewNew(_ref) {
   var titleBlockProps = _ref.titleBlockProps;
   var testId = 'hover-card-loading-view';
   var lineHeightRem = 1.25;
   var skeletonWidth = _styled.CARD_WIDTH_REM - 2;
   var size = titleBlockProps.size,
     actions = titleBlockProps.actions;
-  var actionGroup = (actions === null || actions === void 0 ? void 0 : actions.length) && (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && (0, _react2.jsx)(_actionGroup.default, {
+  var actionGroup = (actions === null || actions === void 0 ? void 0 : actions.length) && (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && /*#__PURE__*/_react.default.createElement(_actionGroup.default, {
     items: actions,
     visibleButtonsNum: 2
   });
   var LoadingSkeleton = (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? _loadingSkeleton.LoadingSkeletonNew : _loadingSkeleton.LoadingSkeletonOld;
-  return (
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    (0, _react2.jsx)("div", {
-      css: _styled2.loadingViewContainer,
-      "data-testid": testId
-    }, (0, _react2.jsx)("div", {
-      css: _styled2.skeletonContainer
-    }, (0, _react2.jsx)(_blocks.CustomBlock, (0, _extends2.default)({}, titleBlockProps, {
-      overrideCss: _styled2.titleBlockStyles,
-      testId: "".concat(testId, "-title-block")
-    }), (0, _react2.jsx)(_icon.default, {
-      render: function render() {
-        return (0, _react2.jsx)(LoadingSkeleton, null);
-      },
-      size: size
-    }), (0, _react2.jsx)("span", {
-      css: (0, _styled2.getTitleStyles)(lineHeightRem),
-      "data-testid": "".concat(testId, "-title")
-    }, (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? (0, _react2.jsx)(_loadingSkeleton.LoadingSkeletonNew, {
-      height: "".concat(lineHeightRem, "rem")
-    }) : (0, _react2.jsx)(_loadingSkeleton.LoadingSkeletonOld, {
-      height: lineHeightRem
-    })), actionGroup), (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_loadingSkeleton.LoadingSkeletonNew, {
-      width: "".concat(skeletonWidth, "rem"),
-      height: "".concat(lineHeightRem, "rem")
-    }), (0, _react2.jsx)(_loadingSkeleton.LoadingSkeletonNew, {
-      width: "".concat(skeletonWidth, "rem"),
-      height: "".concat(lineHeightRem * 3, "rem")
-    }), (0, _react2.jsx)(_loadingSkeleton.LoadingSkeletonNew, {
-      width: "".concat(skeletonWidth, "rem"),
-      height: "".concat(lineHeightRem, "rem")
-    })) : (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_loadingSkeleton.LoadingSkeletonOld, {
-      width: skeletonWidth,
-      height: lineHeightRem
-    }), (0, _react2.jsx)(_loadingSkeleton.LoadingSkeletonOld, {
-      width: skeletonWidth,
-      height: lineHeightRem * 3
-    }), (0, _react2.jsx)(_loadingSkeleton.LoadingSkeletonOld, {
-      width: skeletonWidth,
-      height: lineHeightRem
-    }))))
-  );
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": testId,
+    className: (0, _runtime.ax)(["_1yt41e9d _1e0c1txw _2lx21bp4"])
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)(["_zulpud5o _1e0c1txw _2lx21bp4 _4cvr1h6o"])
+  }, /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, (0, _extends2.default)({}, titleBlockProps, {
+    testId: "".concat(testId, "-title-block"),
+    className: (0, _runtime.ax)(["_zulpcxkx _1bsb1osq"])
+  }), /*#__PURE__*/_react.default.createElement(_icon.default, {
+    render: function render() {
+      return /*#__PURE__*/_react.default.createElement(LoadingSkeleton, null);
+    },
+    size: size
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    "data-testid": "".concat(testId, "-title"),
+    className: (0, _runtime.ax)(["_16jlkb7n _1o9zidpf _i0dl1wug _4t3i1k92 _e2oo1osq"])
+  }, (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? /*#__PURE__*/_react.default.createElement(_loadingSkeleton.LoadingSkeletonNew, {
+    height: "".concat(lineHeightRem, "rem")
+  }) : /*#__PURE__*/_react.default.createElement(_loadingSkeleton.LoadingSkeletonOld, {
+    height: lineHeightRem
+  })), actionGroup), (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_loadingSkeleton.LoadingSkeletonNew, {
+    width: "".concat(skeletonWidth, "rem"),
+    height: "".concat(lineHeightRem, "rem")
+  }), /*#__PURE__*/_react.default.createElement(_loadingSkeleton.LoadingSkeletonNew, {
+    width: "".concat(skeletonWidth, "rem"),
+    height: "".concat(lineHeightRem * 3, "rem")
+  }), /*#__PURE__*/_react.default.createElement(_loadingSkeleton.LoadingSkeletonNew, {
+    width: "".concat(skeletonWidth, "rem"),
+    height: "".concat(lineHeightRem, "rem")
+  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_loadingSkeleton.LoadingSkeletonOld, {
+    width: skeletonWidth,
+    height: lineHeightRem
+  }), /*#__PURE__*/_react.default.createElement(_loadingSkeleton.LoadingSkeletonOld, {
+    width: skeletonWidth,
+    height: lineHeightRem * 3
+  }), /*#__PURE__*/_react.default.createElement(_loadingSkeleton.LoadingSkeletonOld, {
+    width: skeletonWidth,
+    height: lineHeightRem
+  }))));
+};
+var HoverCardLoadingView = function HoverCardLoadingView(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/_react.default.createElement(HoverCardLoadingViewNew, props);
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_HoverCardLoadingViewOld.default, props);
+  }
 };
 var _default = exports.default = HoverCardLoadingView;

package/dist/cjs/view/HoverCard/components/views/resolving/styled.js

@@ -7,6 +7,9 @@ exports.titleBlockStyles = exports.skeletonContainer = exports.loadingViewContai
 var _react = require("@emotion/react");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
+/**
+ * @deprecated remove on FF clean up bandicoots-compiled-migration-smartcard
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var loadingViewContainer = exports.loadingViewContainer = (0, _react.css)({
   display: 'flex',
@@ -14,6 +17,9 @@ var loadingViewContainer = exports.loadingViewContainer = (0, _react.css)({
   padding: "var(--ds-space-200, 1rem)"
 });
 
+/**
+ * @deprecated remove on FF clean up bandicoots-compiled-migration-smartcard
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var skeletonContainer = exports.skeletonContainer = (0, _react.css)({
   display: 'flex',
@@ -22,6 +28,10 @@ var skeletonContainer = exports.skeletonContainer = (0, _react.css)({
   gap: '0.625rem',
   alignItems: 'center'
 });
+
+/**
+ * @deprecated remove on FF clean up bandicoots-compiled-migration-smartcard
+ */
 var getTitleStyles = exports.getTitleStyles = function getTitleStyles(height) {
   return (0, _react.css)({
     flex: '1 0 auto',
@@ -34,6 +44,9 @@ var getTitleStyles = exports.getTitleStyles = function getTitleStyles(height) {
   });
 };
 
+/**
+ * @deprecated remove on FF clean up bandicoots-compiled-migration-smartcard
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var titleBlockStyles = exports.titleBlockStyles = (0, _react.css)({
   width: '100%',

package/dist/cjs/view/HoverCard/components/views/unauthorised/HoverCardUnauthorisedViewOld.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _linkExtractors = require("@atlaskit/link-extractors");
+var _useAnalyticsEvents2 = require("../../../../../common/analytics/generated/use-analytics-events");
+var _constants = require("../../../../../constants");
+var _messages = require("../../../../../messages");
+var _actions = require("../../../../../state/actions");
+var _helpers = require("../../../../../state/helpers");
+var _UnauthorisedViewContent = _interopRequireDefault(require("../../../../common/UnauthorisedViewContent"));
+var _FlexibleCard = _interopRequireDefault(require("../../../../FlexibleCard"));
+var _blocks = require("../../../../FlexibleCard/components/blocks");
+var _actionGroup = _interopRequireDefault(require("../../../../FlexibleCard/components/blocks/action-group"));
+var _elements = require("../../../../FlexibleCard/components/elements");
+var _styled = require("./styled");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var HoverCardUnauthorisedViewOld = function HoverCardUnauthorisedViewOld(_ref) {
+  var _cardState$details, _extractProvider;
+  var _ref$id = _ref.id,
+    id = _ref$id === void 0 ? '' : _ref$id,
+    flexibleCardProps = _ref.flexibleCardProps,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'hover-card-unauthorised-view' : _ref$testId,
+    url = _ref.url;
+  var cardState = flexibleCardProps.cardState;
+  var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
+  var providerName = (_extractProvider = (0, _linkExtractors.extractProvider)(data)) === null || _extractProvider === void 0 ? void 0 : _extractProvider.text;
+  var isProductIntegrationSupported = (0, _helpers.hasAuthScopeOverrides)(cardState.details);
+  var _useSmartCardActions = (0, _actions.useSmartCardActions)(id, url),
+    authorize = _useSmartCardActions.authorize;
+  var _useAnalyticsEvents = (0, _useAnalyticsEvents2.useAnalyticsEvents)(),
+    fireEvent = _useAnalyticsEvents.fireEvent;
+  var handleAuthorize = (0, _react.useCallback)(function () {
+    if (authorize) {
+      fireEvent('track.applicationAccount.authStarted', {});
+      authorize(_constants.CardDisplay.HoverCardPreview);
+    }
+  }, [authorize, fireEvent]);
+  var actions = (0, _react.useMemo)(function () {
+    return [{
+      name: _constants.ActionName.CustomAction,
+      content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages.connect_unauthorised_account_action, {
+        values: {
+          context: providerName
+        }
+      })),
+      onClick: handleAuthorize
+    }];
+  }, [handleAuthorize, providerName]);
+  return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, (0, _extends2.default)({}, flexibleCardProps, {
+    testId: testId
+  }), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, {
+    overrideCss: _styled.titleBlockStyles,
+    testId: "".concat(testId, "-title")
+  }, /*#__PURE__*/_react.default.createElement(_elements.LinkIcon, null), /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages.connect_link_account_card_name, {
+    values: {
+      context: providerName
+    }
+  }))), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, {
+    overrideCss: _styled.mainTextStyles,
+    testId: "".concat(testId, "-content")
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_UnauthorisedViewContent.default, {
+    providerName: providerName,
+    isProductIntegrationSupported: isProductIntegrationSupported
+  }))), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, {
+    overrideCss: _styled.connectButtonStyles,
+    testId: "".concat(testId, "-button")
+  }, /*#__PURE__*/_react.default.createElement(_actionGroup.default, {
+    items: actions,
+    appearance: "primary"
+  })));
+};
+var _default = exports.default = HoverCardUnauthorisedViewOld;

package/dist/cjs/view/HoverCard/components/views/unauthorised/index.compiled.css

@@ -0,0 +1,5 @@
+._11c8qk37{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._zulp5l1i{gap:.5rem .5rem}
+._19pkcxkx{margin-top:var(--ds-space-100,.5rem)}
+._1bahesu3{justify-content:flex-end}
+._bpsp1wq8 a{font-weight:var(--ds-font-weight-medium,500)}