@atlaskit/smart-card 34.5.1 → 34.6.0

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

@@ -0,0 +1,83 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useAnalyticsEvents } from '../../../../../common/analytics/generated/use-analytics-events';
+import { CardDisplay, SmartLinkPosition, SmartLinkSize, SmartLinkStatus } from '../../../../../constants';
+import { succeedUfoExperience } from '../../../../../state/analytics';
+import FlexibleCard from '../../../../FlexibleCard';
+import { ActionBlock, AIFooterBlock, AISummaryBlock, MetadataBlock, SnippetBlock, TitleBlock } from '../../../../FlexibleCard/components/blocks';
+import { getMetadata } from '../../../utils';
+import ImagePreview from '../../ImagePreview';
+import { hiddenSnippetStyles, metadataBlockCss } from './styled';
+const HoverCardResolvedViewOld = ({
+  cardState,
+  extensionKey,
+  flexibleCardProps,
+  isAISummaryEnabled,
+  onActionClick,
+  titleBlockProps,
+  id
+}) => {
+  var _cardState$details;
+  const {
+    fireEvent
+  } = useAnalyticsEvents();
+  useEffect(() => {
+    // Since this hover view is only rendered on resolved status,
+    // there is no need to check for statuses.
+    succeedUfoExperience('smart-link-rendered', id || 'NULL', {
+      extensionKey,
+      display: CardDisplay.HoverCardPreview
+    });
+
+    // UFO will disregard this if authentication experience has not yet been started
+    succeedUfoExperience('smart-link-authenticated', id || 'NULL', {
+      display: CardDisplay.HoverCardPreview
+    });
+    fireEvent('ui.smartLink.renderSuccess', {
+      display: CardDisplay.HoverCardPreview
+    });
+  }, [extensionKey, fireEvent, id]);
+  const data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
+  const {
+    primary,
+    secondary
+  } = useMemo(() => {
+    return getMetadata(extensionKey, data);
+  }, [data, extensionKey]);
+  const snippetHeight = React.useRef(0);
+  const snippetBlockRef = useRef(null);
+  const onSnippetRender = useCallback(() => {
+    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;
+  }, []);
+  const imagePreview = ImagePreview({
+    data: data,
+    fallbackElementHeight: snippetHeight.current
+  });
+  const snippet = imagePreview ? null : /*#__PURE__*/React.createElement(SnippetBlock, {
+    status: SmartLinkStatus.Resolved
+  });
+  const aiSummaryMinHeight = snippet ? snippetHeight.current : 0;
+  return /*#__PURE__*/React.createElement(FlexibleCard, flexibleCardProps, imagePreview, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, titleBlockProps, {
+    metadataPosition: SmartLinkPosition.Top
+  })), /*#__PURE__*/React.createElement(MetadataBlock, {
+    primary: primary,
+    secondary: secondary,
+    overrideCss: metadataBlockCss,
+    maxLines: 1,
+    size: SmartLinkSize.Medium
+  }), isAISummaryEnabled ? /*#__PURE__*/React.createElement(AISummaryBlock, {
+    aiSummaryMinHeight: aiSummaryMinHeight,
+    placeholder: snippet,
+    status: SmartLinkStatus.Resolved
+  }) : snippet, /*#__PURE__*/React.createElement(SnippetBlock, {
+    testId: "hidden-snippet",
+    onRender: onSnippetRender,
+    blockRef: snippetBlockRef,
+    overrideCss: hiddenSnippetStyles
+  }), /*#__PURE__*/React.createElement(ActionBlock, {
+    onClick: onActionClick,
+    spaceInline: "space.100"
+  }), /*#__PURE__*/React.createElement(AIFooterBlock, null));
+};
+export default HoverCardResolvedViewOld;

package/dist/es2019/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/es2019/view/HoverCard/components/views/resolved/index.js

@@ -1,5 +1,9 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 import _extends from "@babel/runtime/helpers/extends";
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useAnalyticsEvents } from '../../../../../common/analytics/generated/use-analytics-events';
 import { CardDisplay, SmartLinkPosition, SmartLinkSize, SmartLinkStatus } from '../../../../../constants';
 import { succeedUfoExperience } from '../../../../../state/analytics';
@@ -7,8 +11,15 @@ import FlexibleCard from '../../../../FlexibleCard';
 import { ActionBlock, AIFooterBlock, AISummaryBlock, MetadataBlock, SnippetBlock, TitleBlock } from '../../../../FlexibleCard/components/blocks';
 import { getMetadata } from '../../../utils';
 import ImagePreview from '../../ImagePreview';
-import { hiddenSnippetStyles, metadataBlockCss } from './styled';
-const HoverCardResolvedView = ({
+import HoverCardResolvedViewOld from './HoverCardResolvedViewOld';
+const hiddenSnippetStyles = null;
+const metadataBlockCss = null;
+
+/**
+ * Moved from HoverCardContent.tsx due to CompiledCSS migration.
+ */
+const titleBlockStyle = null;
+const HoverCardResolvedViewNew = ({
   cardState,
   extensionKey,
   flexibleCardProps,
@@ -59,13 +70,16 @@ const HoverCardResolvedView = ({
   });
   const aiSummaryMinHeight = snippet ? snippetHeight.current : 0;
   return /*#__PURE__*/React.createElement(FlexibleCard, flexibleCardProps, imagePreview, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, titleBlockProps, {
-    metadataPosition: SmartLinkPosition.Top
+    metadataPosition: SmartLinkPosition.Top,
+    status: SmartLinkStatus.Resolved,
+    className: ax(["_zulpu2gc _quenui7n _oebj1txw _x7z0u2gc _1ljqu2gc _13mh1pd9"])
   })), /*#__PURE__*/React.createElement(MetadataBlock, {
     primary: primary,
     secondary: secondary,
-    overrideCss: metadataBlockCss,
     maxLines: 1,
-    size: SmartLinkSize.Medium
+    size: SmartLinkSize.Medium,
+    status: SmartLinkStatus.Resolved,
+    className: ax(["_zulpidpf _2aco1vlj _fmt31ohn _yklxcxkx _w3mucxkx _ia0l11wp _3tmpcxkx"])
   }), isAISummaryEnabled ? /*#__PURE__*/React.createElement(AISummaryBlock, {
     aiSummaryMinHeight: aiSummaryMinHeight,
     placeholder: snippet,
@@ -74,10 +88,18 @@ const HoverCardResolvedView = ({
     testId: "hidden-snippet",
     onRender: onSnippetRender,
     blockRef: snippetBlockRef,
-    overrideCss: hiddenSnippetStyles
+    status: SmartLinkStatus.Resolved,
+    className: ax(["_3um015vq _kqswstnw"])
   }), /*#__PURE__*/React.createElement(ActionBlock, {
     onClick: onActionClick,
     spaceInline: "space.100"
   }), /*#__PURE__*/React.createElement(AIFooterBlock, null));
 };
+const HoverCardResolvedView = props => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(HoverCardResolvedViewNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(HoverCardResolvedViewOld, props);
+  }
+};
 export default HoverCardResolvedView;

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

@@ -3,6 +3,9 @@ import { css } from '@emotion/react';
 import { separatorCss } from '../../../styled';
 const 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
 export const metadataBlockCss = css`
 	gap: 0px;
@@ -32,11 +35,17 @@ export const metadataBlockCss = css`
 	}
 `;
 
+/**
+ * @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
 export const footerBlockCss = 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
 export const hiddenSnippetStyles = css({
   visibility: 'hidden',

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

@@ -0,0 +1,73 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { CustomBlock } from '../../../../FlexibleCard/components/blocks';
+import ActionGroup from '../../../../FlexibleCard/components/blocks/action-group';
+import { LoadingSkeletonNew, LoadingSkeletonOld } from '../../../../FlexibleCard/components/common/loading-skeleton';
+import Icon from '../../../../FlexibleCard/components/elements/icon';
+import { CARD_WIDTH_REM } from '../../../styled';
+import { getTitleStyles, loadingViewContainer, skeletonContainer, titleBlockStyles } from './styled';
+const HoverCardLoadingViewOld = ({
+  titleBlockProps
+}) => {
+  const testId = 'hover-card-loading-view';
+  const lineHeightRem = 1.25;
+  const skeletonWidth = CARD_WIDTH_REM - 2;
+  const {
+    size,
+    actions
+  } = titleBlockProps;
+  const actionGroup = (actions === null || actions === void 0 ? void 0 : actions.length) && (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && jsx(ActionGroup, {
+    items: actions,
+    visibleButtonsNum: 2
+  });
+  const LoadingSkeleton = fg('platform-smart-card-icon-migration') ? LoadingSkeletonNew : 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
+    jsx("div", {
+      css: loadingViewContainer,
+      "data-testid": testId
+    }, jsx("div", {
+      css: skeletonContainer
+    }, jsx(CustomBlock, _extends({}, titleBlockProps, {
+      overrideCss: titleBlockStyles,
+      testId: `${testId}-title-block`
+    }), jsx(Icon, {
+      render: () => jsx(LoadingSkeleton, null),
+      size: size
+    }), jsx("span", {
+      css: getTitleStyles(lineHeightRem),
+      "data-testid": `${testId}-title`
+    }, fg('platform-smart-card-icon-migration') ? jsx(LoadingSkeletonNew, {
+      height: `${lineHeightRem}rem`
+    }) : jsx(LoadingSkeletonOld, {
+      height: lineHeightRem
+    })), actionGroup), fg('platform-smart-card-icon-migration') ? jsx(React.Fragment, null, jsx(LoadingSkeletonNew, {
+      width: `${skeletonWidth}rem`,
+      height: `${lineHeightRem}rem`
+    }), jsx(LoadingSkeletonNew, {
+      width: `${skeletonWidth}rem`,
+      height: `${lineHeightRem * 3}rem`
+    }), jsx(LoadingSkeletonNew, {
+      width: `${skeletonWidth}rem`,
+      height: `${lineHeightRem}rem`
+    })) : jsx(React.Fragment, null, jsx(LoadingSkeletonOld, {
+      width: skeletonWidth,
+      height: lineHeightRem
+    }), jsx(LoadingSkeletonOld, {
+      width: skeletonWidth,
+      height: lineHeightRem * 3
+    }), jsx(LoadingSkeletonOld, {
+      width: skeletonWidth,
+      height: lineHeightRem
+    }))))
+  );
+};
+export default HoverCardLoadingViewOld;

package/dist/es2019/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/es2019/view/HoverCard/components/views/resolving/index.js

@@ -1,20 +1,20 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { CustomBlock } from '../../../../FlexibleCard/components/blocks';
 import ActionGroup from '../../../../FlexibleCard/components/blocks/action-group';
 import { LoadingSkeletonNew, LoadingSkeletonOld } from '../../../../FlexibleCard/components/common/loading-skeleton';
 import Icon from '../../../../FlexibleCard/components/elements/icon';
 import { CARD_WIDTH_REM } from '../../../styled';
-import { getTitleStyles, loadingViewContainer, skeletonContainer, titleBlockStyles } from './styled';
-const HoverCardLoadingView = ({
+import HoverCardLoadingViewOld from './HoverCardLoadingViewOld';
+const loadingViewContainer = null;
+const skeletonContainer = null;
+const titleStyle = null;
+const titleBlockStyles = null;
+const HoverCardLoadingViewNew = ({
   titleBlockProps
 }) => {
   const testId = 'hover-card-loading-view';
@@ -24,50 +24,54 @@ const HoverCardLoadingView = ({
     size,
     actions
   } = titleBlockProps;
-  const actionGroup = (actions === null || actions === void 0 ? void 0 : actions.length) && (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && jsx(ActionGroup, {
+  const actionGroup = (actions === null || actions === void 0 ? void 0 : actions.length) && (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && /*#__PURE__*/React.createElement(ActionGroup, {
     items: actions,
     visibleButtonsNum: 2
   });
   const LoadingSkeleton = fg('platform-smart-card-icon-migration') ? LoadingSkeletonNew : 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
-    jsx("div", {
-      css: loadingViewContainer,
-      "data-testid": testId
-    }, jsx("div", {
-      css: skeletonContainer
-    }, jsx(CustomBlock, _extends({}, titleBlockProps, {
-      overrideCss: titleBlockStyles,
-      testId: `${testId}-title-block`
-    }), jsx(Icon, {
-      render: () => jsx(LoadingSkeleton, null),
-      size: size
-    }), jsx("span", {
-      css: getTitleStyles(lineHeightRem),
-      "data-testid": `${testId}-title`
-    }, fg('platform-smart-card-icon-migration') ? jsx(LoadingSkeletonNew, {
-      height: `${lineHeightRem}rem`
-    }) : jsx(LoadingSkeletonOld, {
-      height: lineHeightRem
-    })), actionGroup), fg('platform-smart-card-icon-migration') ? jsx(React.Fragment, null, jsx(LoadingSkeletonNew, {
-      width: `${skeletonWidth}rem`,
-      height: `${lineHeightRem}rem`
-    }), jsx(LoadingSkeletonNew, {
-      width: `${skeletonWidth}rem`,
-      height: `${lineHeightRem * 3}rem`
-    }), jsx(LoadingSkeletonNew, {
-      width: `${skeletonWidth}rem`,
-      height: `${lineHeightRem}rem`
-    })) : jsx(React.Fragment, null, jsx(LoadingSkeletonOld, {
-      width: skeletonWidth,
-      height: lineHeightRem
-    }), jsx(LoadingSkeletonOld, {
-      width: skeletonWidth,
-      height: lineHeightRem * 3
-    }), jsx(LoadingSkeletonOld, {
-      width: skeletonWidth,
-      height: lineHeightRem
-    }))))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId,
+    className: ax(["_1yt41e9d _1e0c1txw _2lx21bp4"])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax(["_zulpud5o _1e0c1txw _2lx21bp4 _4cvr1h6o"])
+  }, /*#__PURE__*/React.createElement(CustomBlock, _extends({}, titleBlockProps, {
+    testId: `${testId}-title-block`,
+    className: ax(["_zulpcxkx _1bsb1osq"])
+  }), /*#__PURE__*/React.createElement(Icon, {
+    render: () => /*#__PURE__*/React.createElement(LoadingSkeleton, null),
+    size: size
+  }), /*#__PURE__*/React.createElement("span", {
+    "data-testid": `${testId}-title`,
+    className: ax(["_16jlkb7n _1o9zidpf _i0dl1wug _4t3i1k92 _e2oo1osq"])
+  }, fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(LoadingSkeletonNew, {
+    height: `${lineHeightRem}rem`
+  }) : /*#__PURE__*/React.createElement(LoadingSkeletonOld, {
+    height: lineHeightRem
+  })), actionGroup), fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LoadingSkeletonNew, {
+    width: `${skeletonWidth}rem`,
+    height: `${lineHeightRem}rem`
+  }), /*#__PURE__*/React.createElement(LoadingSkeletonNew, {
+    width: `${skeletonWidth}rem`,
+    height: `${lineHeightRem * 3}rem`
+  }), /*#__PURE__*/React.createElement(LoadingSkeletonNew, {
+    width: `${skeletonWidth}rem`,
+    height: `${lineHeightRem}rem`
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LoadingSkeletonOld, {
+    width: skeletonWidth,
+    height: lineHeightRem
+  }), /*#__PURE__*/React.createElement(LoadingSkeletonOld, {
+    width: skeletonWidth,
+    height: lineHeightRem * 3
+  }), /*#__PURE__*/React.createElement(LoadingSkeletonOld, {
+    width: skeletonWidth,
+    height: lineHeightRem
+  }))));
+};
+const HoverCardLoadingView = props => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(HoverCardLoadingViewNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(HoverCardLoadingViewOld, props);
+  }
 };
 export default HoverCardLoadingView;

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

@@ -1,5 +1,8 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
+/**
+ * @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
 export const loadingViewContainer = css({
   display: 'flex',
@@ -7,6 +10,9 @@ export const loadingViewContainer = 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
 export const skeletonContainer = css({
   display: 'flex',
@@ -15,6 +21,10 @@ export const skeletonContainer = css({
   gap: '0.625rem',
   alignItems: 'center'
 });
+
+/**
+ * @deprecated remove on FF clean up bandicoots-compiled-migration-smartcard
+ */
 export const getTitleStyles = height => {
   return css({
     flex: '1 0 auto',
@@ -27,6 +37,9 @@ export const 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
 export const titleBlockStyles = css({
   width: '100%',

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

@@ -0,0 +1,73 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback, useMemo } from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { extractProvider } from '@atlaskit/link-extractors';
+import { useAnalyticsEvents } from '../../../../../common/analytics/generated/use-analytics-events';
+import { ActionName, CardDisplay } from '../../../../../constants';
+import { messages } from '../../../../../messages';
+import { useSmartCardActions } from '../../../../../state/actions';
+import { hasAuthScopeOverrides } from '../../../../../state/helpers';
+import UnauthorisedViewContent from '../../../../common/UnauthorisedViewContent';
+import FlexibleCard from '../../../../FlexibleCard';
+import { CustomBlock } from '../../../../FlexibleCard/components/blocks';
+import ActionGroup from '../../../../FlexibleCard/components/blocks/action-group';
+import { LinkIcon } from '../../../../FlexibleCard/components/elements';
+import { connectButtonStyles, mainTextStyles, titleBlockStyles } from './styled';
+const HoverCardUnauthorisedViewOld = ({
+  id = '',
+  flexibleCardProps,
+  testId = 'hover-card-unauthorised-view',
+  url
+}) => {
+  var _cardState$details, _extractProvider;
+  const {
+    cardState
+  } = flexibleCardProps;
+  const data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
+  const providerName = (_extractProvider = extractProvider(data)) === null || _extractProvider === void 0 ? void 0 : _extractProvider.text;
+  const isProductIntegrationSupported = hasAuthScopeOverrides(cardState.details);
+  const {
+    authorize
+  } = useSmartCardActions(id, url);
+  const {
+    fireEvent
+  } = useAnalyticsEvents();
+  const handleAuthorize = useCallback(() => {
+    if (authorize) {
+      fireEvent('track.applicationAccount.authStarted', {});
+      authorize(CardDisplay.HoverCardPreview);
+    }
+  }, [authorize, fireEvent]);
+  const actions = useMemo(() => [{
+    name: ActionName.CustomAction,
+    content: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_unauthorised_account_action, {
+      values: {
+        context: providerName
+      }
+    })),
+    onClick: handleAuthorize
+  }], [handleAuthorize, providerName]);
+  return /*#__PURE__*/React.createElement(FlexibleCard, _extends({}, flexibleCardProps, {
+    testId: testId
+  }), /*#__PURE__*/React.createElement(CustomBlock, {
+    overrideCss: titleBlockStyles,
+    testId: `${testId}-title`
+  }, /*#__PURE__*/React.createElement(LinkIcon, null), /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_link_account_card_name, {
+    values: {
+      context: providerName
+    }
+  }))), /*#__PURE__*/React.createElement(CustomBlock, {
+    overrideCss: mainTextStyles,
+    testId: `${testId}-content`
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(UnauthorisedViewContent, {
+    providerName: providerName,
+    isProductIntegrationSupported: isProductIntegrationSupported
+  }))), /*#__PURE__*/React.createElement(CustomBlock, {
+    overrideCss: connectButtonStyles,
+    testId: `${testId}-button`
+  }, /*#__PURE__*/React.createElement(ActionGroup, {
+    items: actions,
+    appearance: "primary"
+  })));
+};
+export default HoverCardUnauthorisedViewOld;

package/dist/es2019/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)}

package/dist/es2019/view/HoverCard/components/views/unauthorised/index.js

@@ -1,7 +1,12 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useCallback, useMemo } from 'react';
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useCallback, useMemo } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { extractProvider } from '@atlaskit/link-extractors';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useAnalyticsEvents } from '../../../../../common/analytics/generated/use-analytics-events';
 import { ActionName, CardDisplay } from '../../../../../constants';
 import { messages } from '../../../../../messages';
@@ -12,8 +17,11 @@ import FlexibleCard from '../../../../FlexibleCard';
 import { CustomBlock } from '../../../../FlexibleCard/components/blocks';
 import ActionGroup from '../../../../FlexibleCard/components/blocks/action-group';
 import { LinkIcon } from '../../../../FlexibleCard/components/elements';
-import { connectButtonStyles, mainTextStyles, titleBlockStyles } from './styled';
-const HoverCardUnauthorisedView = ({
+import HoverCardUnauthorisedViewOld from './HoverCardUnauthorisedViewOld';
+const connectButtonStyles = null;
+const titleBlockStyles = null;
+const mainTextStyles = null;
+const HoverCardUnauthorisedViewNew = ({
   id = '',
   flexibleCardProps,
   testId = 'hover-card-unauthorised-view',
@@ -50,24 +58,31 @@ const HoverCardUnauthorisedView = ({
   return /*#__PURE__*/React.createElement(FlexibleCard, _extends({}, flexibleCardProps, {
     testId: testId
   }), /*#__PURE__*/React.createElement(CustomBlock, {
-    overrideCss: titleBlockStyles,
-    testId: `${testId}-title`
+    testId: `${testId}-title`,
+    className: ax(["_zulp5l1i _bpsp1wq8"])
   }, /*#__PURE__*/React.createElement(LinkIcon, null), /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_link_account_card_name, {
     values: {
       context: providerName
     }
   }))), /*#__PURE__*/React.createElement(CustomBlock, {
-    overrideCss: mainTextStyles,
-    testId: `${testId}-content`
+    testId: `${testId}-content`,
+    className: ax(["_11c8qk37 _19pkcxkx"])
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(UnauthorisedViewContent, {
     providerName: providerName,
     isProductIntegrationSupported: isProductIntegrationSupported
   }))), /*#__PURE__*/React.createElement(CustomBlock, {
-    overrideCss: connectButtonStyles,
-    testId: `${testId}-button`
+    testId: `${testId}-button`,
+    className: ax(["_1bahesu3 _19pkcxkx"])
   }, /*#__PURE__*/React.createElement(ActionGroup, {
     items: actions,
     appearance: "primary"
   })));
 };
+const HoverCardUnauthorisedView = props => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(HoverCardUnauthorisedViewNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(HoverCardUnauthorisedViewOld, props);
+  }
+};
 export default HoverCardUnauthorisedView;

package/dist/es2019/view/HoverCard/components/views/unauthorised/styled.js

@@ -3,12 +3,18 @@ import { css } from '@emotion/react';
 const blockGap = '0.5rem';
 const iconGap = '0.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
 export const connectButtonStyles = css({
   justifyContent: 'flex-end',
   marginTop: blockGap
 });
 
+/**
+ * @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
 export const titleBlockStyles = css({
   gap: `${blockGap} ${iconGap}`,
@@ -18,6 +24,9 @@ export const titleBlockStyles = css({
   }
 });
 
+/**
+ * @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
 export const mainTextStyles = css({
   marginTop: blockGap,