@atlaskit/smart-card 23.5.2 → 23.6.0

package/dist/es2019/view/HoverCard/styled.js

@@ -13,7 +13,7 @@ export const CARD_WIDTH_REM = 24; // gap between mouse cursor and hover card
 export const CARD_GAP_PX = 10;
 const blockGap = '0.5rem';
 const elementGap = '0.5rem';
-const separatorCss = css`
+export const separatorCss = css`
   [data-separator] + [data-separator]:before {
     margin-right: ${elementGap};
   }
@@ -47,47 +47,6 @@ export const titleBlockCss = css`
     }
   }
 `;
-export const metadataBlockCss = css`
-  gap: 0px;
-
-  /* primary element group */
-  [data-smart-element-group]:nth-of-type(1) {
-    flex-grow: 7;
-
-    // a separator between text-based element
-    ${separatorCss}
-
-    /* horizontal spacing between elements in group */
-    > span {
-      margin-right: ${elementGap};
-    }
-  }
-  /* secondary element group */
-  [data-smart-element-group]:nth-of-type(2) {
-    flex-grow: 3;
-    /* horizontal spacing between elements in group */
-    > span {
-      margin-left: ${elementGap};
-    }
-  }
-`;
-export const footerBlockCss = css`
-  padding-top: 0.25rem;
-`;
-export const loadingViewContainer = css`
-  display: flex;
-  flex-direction: column;
-`;
-export const skeletonContainer = css`
-  display: flex;
-  flex-direction: column;
-  gap: 0.625rem;
-  align-items: center;
-`;
-export const hiddenSnippetStyles = css`
-  visibility: hidden;
-  position: absolute;
-`;
 export const getTransitionStyles = snippetHeight => css`
   transition: height 300ms ease-in-out;
   height: ${snippetHeight}px;

package/dist/es2019/view/InlineCard/UnauthorisedView/index.js

@@ -11,6 +11,7 @@ import { Frame } from '../Frame';
 import { AKIconWrapper } from '../Icon';
 import { IconAndTitleLayout } from '../IconAndTitleLayout';
 import { IconStyledButton, LinkAppearance } from '../styled';
+import { HoverCard } from '../../HoverCard';
 const FallbackUnauthorizedIcon = /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LockIcon, {
   label: "error",
   size: "small",
@@ -56,9 +57,10 @@ export class InlineCardUnauthorizedView extends React.Component {
       icon,
       onClick,
       isSelected,
-      testId = 'inline-card-unauthorized-view'
+      testId = 'inline-card-unauthorized-view',
+      showAuthTooltip = false
     } = this.props;
-    return /*#__PURE__*/React.createElement(Frame, {
+    const inlineCardUnauthenticatedView = /*#__PURE__*/React.createElement(Frame, {
       testId: testId,
       link: url,
       onClick: onClick,
@@ -68,6 +70,15 @@ export class InlineCardUnauthorizedView extends React.Component {
       title: this.renderMessage(),
       titleColor: token('color.text.subtle', N500)
     }));
+
+    if (showAuthTooltip) {
+      return /*#__PURE__*/React.createElement(HoverCard, {
+        url: url,
+        onAuthorize: this.props.onAuthorise
+      }, inlineCardUnauthenticatedView);
+    }
+
+    return inlineCardUnauthenticatedView;
   }
 
 }

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

@@ -23,7 +23,8 @@ export const InlineCard = ({
   onError,
   testId,
   inlinePreloaderStyle,
-  showHoverPreview
+  showHoverPreview,
+  showAuthTooltip
 }) => {
   var _details$meta;
 
@@ -80,7 +81,8 @@ export const InlineCard = ({
         isSelected: isSelected,
         onClick: handleFrameClick,
         onAuthorise: handleAuthorize,
-        testId: testIdWithStatus
+        testId: testIdWithStatus,
+        showAuthTooltip: showAuthTooltip
       });
 
     case 'forbidden':

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

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { messages } from '../../messages';
+import { CONTENT_URL_SECURITY_AND_PERMISSIONS } from '../../constants';
+
+/**
+ * This component is used in unauthorized views of a smart link.
+ * It represents the main text that provides a user with information on how to connect their account
+ */
+const UnauthorisedViewContent = ({
+  providerName,
+  testId = 'unauthorised-view-content'
+}) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_unauthorised_account_description, {
+  values: {
+    context: providerName
+  }
+})), ' ', /*#__PURE__*/React.createElement("a", {
+  href: CONTENT_URL_SECURITY_AND_PERMISSIONS,
+  target: "_blank",
+  "data-testid": `${testId}-learn-more`
+}, /*#__PURE__*/React.createElement(FormattedMessage, messages.learn_more_about_smart_links_security)));
+
+export default UnauthorisedViewContent;

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "23.5.2",
+	"version": "23.6.0",
 	"sideEffects": false
 }

package/dist/esm/view/CardWithUrl/component.js

@@ -56,6 +56,8 @@ export function CardWithUrlContent(_ref) {
     showHoverPreview = Boolean(showHoverPreviewFlag);
   }
 
+  var showAuthTooltipValue = useFeatureFlag('showAuthTooltip');
+  var showAuthTooltip = !!showAuthTooltipValue && showAuthTooltipValue === 'experiment';
   var enableFlexibleBlockCardFlag = Boolean(useFeatureFlag('enableFlexibleBlockCard')); // Setup UI handlers.
 
   var handleClick = useCallback(function (event) {
@@ -169,7 +171,8 @@ export function CardWithUrlContent(_ref) {
         onError: onError,
         testId: testId,
         inlinePreloaderStyle: inlinePreloaderStyle,
-        showHoverPreview: showHoverPreview
+        showHoverPreview: showHoverPreview,
+        showAuthTooltip: showAuthTooltip
       });
 
     case 'block':

package/dist/esm/view/EmbedCard/views/UnauthorisedView.js

@@ -1,12 +1,9 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { FormattedMessage } from 'react-intl-next';
 import { EmbedCardUnresolvedView } from './UnresolvedView';
 import { UnauthorisedImage } from '../constants';
 import { ExpandedFrame } from '../components/ExpandedFrame';
 import { ImageIcon } from '../components/ImageIcon';
-import { messages } from '../../../messages';
-import { CONTENT_URL_SECURITY_AND_PERMISSIONS } from '../../../constants';
+import UnauthorisedViewContent from '../../common/UnauthorisedViewContent';
 export var EmbedCardUnauthorisedView = function EmbedCardUnauthorisedView(_ref) {
   var _context$image;
 
@@ -43,13 +40,8 @@ export var EmbedCardUnauthorisedView = function EmbedCardUnauthorisedView(_ref)
     },
     onClick: onAuthorise,
     testId: testId
-  }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_unauthorised_account_description, {
-    values: {
-      context: context === null || context === void 0 ? void 0 : context.text
-    }
-  })), ' ', /*#__PURE__*/React.createElement("a", {
-    href: CONTENT_URL_SECURITY_AND_PERMISSIONS,
-    target: "_blank",
-    "data-testid": "".concat(testId, "-learn-more")
-  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.learn_more_about_smart_links_security))));
+  }, /*#__PURE__*/React.createElement(UnauthorisedViewContent, {
+    providerName: context === null || context === void 0 ? void 0 : context.text,
+    testId: testId
+  })));
 };

package/dist/esm/view/HoverCard/components/HoverCardComponent.js

@@ -16,7 +16,8 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
   var children = _ref.children,
       url = _ref.url,
       analyticsHandler = _ref.analyticsHandler,
-      analytics = _ref.analytics;
+      analytics = _ref.analytics,
+      onAuthorize = _ref.onAuthorize;
   var delay = 300;
 
   var _React$useState = React.useState(false),
@@ -133,7 +134,8 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
         onActionClick: onActionClick,
         onResolve: update,
         renderers: renderers,
-        url: url
+        url: url,
+        onAuthorize: onAuthorize
       }));
     },
     trigger: function trigger(triggerProps) {

package/dist/esm/view/HoverCard/components/HoverCardContent.js

@@ -1,18 +1,15 @@
-import { useFeatureFlag } from '@atlaskit/link-provider';
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
 import { extractType } from '@atlaskit/linking-common/extractors';
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { ActionName, SmartLinkPosition, SmartLinkSize } from '../../../constants';
 import { extractMetadata } from '../../../extractors/hover/extractMetadata';
-import { useSmartCardActions } from '../../../state/actions';
 import { getExtensionKey } from '../../../state/helpers';
 import { isSpecialEvent } from '../../../utils';
-import FlexibleCard from '../../FlexibleCard';
-import { FooterBlock, MetadataBlock, SnippetBlock, TitleBlock } from '../../FlexibleCard/components/blocks';
-import { flexibleUiOptions, footerBlockCss, metadataBlockCss, titleBlockCss, hiddenSnippetStyles } from '../styled';
-import { toActionableMetadata, getSimulatedMetadata, SMART_CARD_ANALYTICS_DISPLAY } from '../utils';
-import HoverCardLoadingView from './HoverCardLoadingView';
-import SnippetOrPreview from './SnippetOrPreview';
+import { flexibleUiOptions, titleBlockCss } from '../styled';
+import { getSimulatedMetadata, SMART_CARD_ANALYTICS_DISPLAY } from '../utils';
+import HoverCardLoadingView from './views/resolving';
+import HoverCardUnauthorisedView from './views/unauthorised';
+import HoverCardResolvedView from './views/resolved';
 export var getOpenAction = function getOpenAction(url, analytics, onActionClick) {
   return {
     name: ActionName.CustomAction,
@@ -34,22 +31,6 @@ export var getOpenAction = function getOpenAction(url, analytics, onActionClick)
     testId: 'hover-card-open-button'
   };
 };
-export var toFooterActions = function toFooterActions(cardActions, onActionClick) {
-  return cardActions.map(function (action) {
-    return {
-      content: action.text,
-      name: ActionName.CustomAction,
-      onClick: function onClick() {
-        if (onActionClick) {
-          onActionClick(action.id);
-        }
-
-        return action.invoke();
-      },
-      testId: action.id
-    };
-  });
-};
 
 var HoverCardContent = function HoverCardContent(_ref) {
   var _cardState$details;
@@ -63,20 +44,8 @@ var HoverCardContent = function HoverCardContent(_ref) {
       onActionClick = _ref.onActionClick,
       onResolve = _ref.onResolve,
       renderers = _ref.renderers,
-      url = _ref.url;
-  var showActionableElement = useFeatureFlag('enableActionableElement');
-  var actions = useSmartCardActions(id, url, analytics);
-  useEffect(function () {
-    actions.loadMetadata();
-  }, [actions]);
-  useEffect(function () {
-    // Since hover preview only render on resolved status,
-    // there is no need to check for statuses.
-    analytics.ui.renderSuccessEvent({
-      display: SMART_CARD_ANALYTICS_DISPLAY,
-      status: cardState.status
-    });
-  }, [analytics.ui, cardState.status]);
+      url = _ref.url,
+      onAuthorize = _ref.onAuthorize;
   var extensionKey = useMemo(function () {
     return getExtensionKey(cardState.details);
   }, [cardState.details]);
@@ -93,38 +62,13 @@ var HoverCardContent = function HoverCardContent(_ref) {
   var titleActions = useMemo(function () {
     return [getOpenAction(url, analytics, onActionClick)];
   }, [url, analytics, onActionClick]);
-  var footerActions = useMemo(function () {
-    return toFooterActions(cardActions, onActionClick);
-  }, [cardActions, onActionClick]);
   var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
+  var types = data ? extractType(data) : undefined;
 
-  var _useMemo = useMemo(function () {
-    var types = data ? extractType(data) : undefined; //TODO: EDM-3224 deleted simulated and use real JsonLd
-
-    var metadata = extractMetadata(getSimulatedMetadata(extensionKey, types));
-    var primary = showActionableElement ? toActionableMetadata(onActionClick, extensionKey, types, cardActions, metadata.primary) : metadata.primary;
-    return {
-      primary: primary,
-      secondary: metadata.secondary,
-      subtitle: metadata.subtitle
-    };
-  }, [cardActions, data, extensionKey, onActionClick, showActionableElement]),
-      primary = _useMemo.primary,
-      secondary = _useMemo.secondary,
-      subtitle = _useMemo.subtitle;
+  var _extractMetadata = extractMetadata(getSimulatedMetadata(extensionKey, types)),
+      subtitle = _extractMetadata.subtitle;
 
   var titleMaxLines = subtitle && subtitle.length > 0 ? 1 : 2;
-  var snippetHeight = React.useRef(0);
-  var snippetBlockRef = useRef(null);
-  var onSnippetRender = 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 body = SnippetOrPreview({
-    data: data,
-    snippetHeight: snippetHeight.current
-  });
   var titleBlockProps = {
     actions: titleActions,
     maxLines: titleMaxLines,
@@ -148,25 +92,27 @@ var HoverCardContent = function HoverCardContent(_ref) {
       flexibleCardProps: flexibleCardProps,
       titleBlockProps: titleBlockProps
     });
+  }
+
+  if (cardState.status === 'unauthorized') {
+    return /*#__PURE__*/React.createElement(HoverCardUnauthorisedView, {
+      flexibleCardProps: flexibleCardProps,
+      onAuthorize: onAuthorize
+    });
   } // if metadataStatus is 'errored' simply render using data available (normal path)
 
 
-  return /*#__PURE__*/React.createElement(FlexibleCard, flexibleCardProps, /*#__PURE__*/React.createElement(TitleBlock, titleBlockProps), /*#__PURE__*/React.createElement(MetadataBlock, {
-    primary: primary,
-    secondary: secondary,
-    size: SmartLinkSize.Large,
-    overrideCss: metadataBlockCss,
-    maxLines: 1
-  }), body, /*#__PURE__*/React.createElement(SnippetBlock, {
-    testId: 'hidden-snippet',
-    onRender: onSnippetRender,
-    blockRef: snippetBlockRef,
-    overrideCss: hiddenSnippetStyles
-  }), /*#__PURE__*/React.createElement(FooterBlock, {
-    actions: footerActions,
-    size: SmartLinkSize.Large,
-    overrideCss: footerBlockCss
-  }));
+  return /*#__PURE__*/React.createElement(HoverCardResolvedView, {
+    id: id,
+    url: url,
+    extensionKey: extensionKey,
+    analytics: analytics,
+    cardActions: cardActions,
+    cardState: cardState,
+    flexibleCardProps: flexibleCardProps,
+    onActionClick: onActionClick,
+    titleBlockProps: titleBlockProps
+  });
 };
 
 export default HoverCardContent;

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

@@ -0,0 +1,104 @@
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useFeatureFlag } from '@atlaskit/link-provider';
+import { extractType } from '@atlaskit/linking-common/extractors';
+import { ActionName, SmartLinkSize } from '../../../../../constants';
+import { FooterBlock, MetadataBlock, SnippetBlock, TitleBlock } from '../../../../FlexibleCard/components/blocks';
+import { footerBlockCss, hiddenSnippetStyles, metadataBlockCss } from './styled';
+import FlexibleCard from '../../../../FlexibleCard';
+import { useSmartCardActions } from '../../../../../state/actions';
+import { getSimulatedMetadata, toActionableMetadata, SMART_CARD_ANALYTICS_DISPLAY } from '../../../utils';
+import SnippetOrPreview from '../../SnippetOrPreview';
+import { extractMetadata } from '../../../../../extractors/hover/extractMetadata';
+export var toFooterActions = function toFooterActions(cardActions, onActionClick) {
+  return cardActions.map(function (action) {
+    return {
+      content: action.text,
+      name: ActionName.CustomAction,
+      onClick: function onClick() {
+        if (onActionClick) {
+          onActionClick(action.id);
+        }
+
+        return action.invoke();
+      },
+      testId: action.id
+    };
+  });
+};
+
+var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
+  var _cardState$details;
+
+  var flexibleCardProps = _ref.flexibleCardProps,
+      titleBlockProps = _ref.titleBlockProps,
+      analytics = _ref.analytics,
+      _ref$id = _ref.id,
+      id = _ref$id === void 0 ? '' : _ref$id,
+      url = _ref.url,
+      cardState = _ref.cardState,
+      _ref$cardActions = _ref.cardActions,
+      cardActions = _ref$cardActions === void 0 ? [] : _ref$cardActions,
+      onActionClick = _ref.onActionClick,
+      extensionKey = _ref.extensionKey;
+  var showActionableElement = useFeatureFlag('enableActionableElement');
+  var actions = useSmartCardActions(id, url, analytics);
+  useEffect(function () {
+    actions.loadMetadata();
+  }, [actions]);
+  useEffect(function () {
+    // Since this hover view is only rendered on resolved status,
+    // there is no need to check for statuses.
+    analytics.ui.renderSuccessEvent({
+      display: SMART_CARD_ANALYTICS_DISPLAY,
+      status: cardState.status
+    });
+  }, [analytics.ui, cardState.status]);
+  var footerActions = useMemo(function () {
+    return toFooterActions(cardActions, onActionClick);
+  }, [cardActions, onActionClick]);
+  var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
+
+  var _useMemo = useMemo(function () {
+    var types = data ? extractType(data) : undefined; //TODO: EDM-3224 deleted simulated and use real JsonLd
+
+    var metadata = extractMetadata(getSimulatedMetadata(extensionKey, types));
+    var primary = showActionableElement ? toActionableMetadata(onActionClick, extensionKey, types, cardActions, metadata.primary) : metadata.primary;
+    return {
+      primary: primary,
+      secondary: metadata.secondary,
+      subtitle: metadata.subtitle
+    };
+  }, [cardActions, data, extensionKey, onActionClick, showActionableElement]),
+      primary = _useMemo.primary,
+      secondary = _useMemo.secondary;
+
+  var snippetHeight = React.useRef(0);
+  var snippetBlockRef = useRef(null);
+  var onSnippetRender = 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 body = SnippetOrPreview({
+    data: data,
+    snippetHeight: snippetHeight.current
+  });
+  return /*#__PURE__*/React.createElement(FlexibleCard, flexibleCardProps, /*#__PURE__*/React.createElement(TitleBlock, titleBlockProps), /*#__PURE__*/React.createElement(MetadataBlock, {
+    primary: primary,
+    secondary: secondary,
+    size: SmartLinkSize.Large,
+    overrideCss: metadataBlockCss,
+    maxLines: 1
+  }), body, /*#__PURE__*/React.createElement(SnippetBlock, {
+    testId: 'hidden-snippet',
+    onRender: onSnippetRender,
+    blockRef: snippetBlockRef,
+    overrideCss: hiddenSnippetStyles
+  }), /*#__PURE__*/React.createElement(FooterBlock, {
+    actions: footerActions,
+    size: SmartLinkSize.Large,
+    overrideCss: footerBlockCss
+  }));
+};
+
+export default HoverCardResolvedView;

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

@@ -0,0 +1,10 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3;
+
+import { css } from '@emotion/react';
+import { separatorCss } from '../../../styled';
+var elementGap = '0.5rem';
+export var metadataBlockCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  gap: 0px;\n\n  /* primary element group */\n  [data-smart-element-group]:nth-of-type(1) {\n    flex-grow: 7;\n\n    // a separator between text-based element\n    ", "\n\n    /* horizontal spacing between elements in group */\n    > span {\n      margin-right: ", ";\n    }\n  }\n  /* secondary element group */\n  [data-smart-element-group]:nth-of-type(2) {\n    flex-grow: 3;\n    /* horizontal spacing between elements in group */\n    > span {\n      margin-left: ", ";\n    }\n  }\n"])), separatorCss, elementGap, elementGap);
+export var footerBlockCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding-top: 0.25rem;\n"])));
+export var hiddenSnippetStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  visibility: hidden;\n  position: absolute;\n"])));

package/dist/esm/view/HoverCard/components/views/resolved/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/view/HoverCard/components/{HoverCardLoadingView.js → views/resolving/index.js}

@@ -1,10 +1,11 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import React from 'react';
-import LoadingSkeleton from '../../FlexibleCard/components/common/loading-skeleton';
-import FlexibleCard from '../../FlexibleCard';
-import { TitleBlock } from '../../FlexibleCard/components/blocks';
-import { CARD_WIDTH_REM, loadingViewContainer, skeletonContainer } from '../styled';
+import LoadingSkeleton from '../../../../FlexibleCard/components/common/loading-skeleton';
+import FlexibleCard from '../../../../FlexibleCard';
+import { TitleBlock } from '../../../../FlexibleCard/components/blocks';
+import { CARD_WIDTH_REM } from '../../../styled';
+import { loadingViewContainer, skeletonContainer } from './styled';
 
 var HoverCardLoadingView = function HoverCardLoadingView(_ref) {
   var flexibleCardProps = _ref.flexibleCardProps,

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

@@ -0,0 +1,7 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2;
+
+import { css } from '@emotion/react';
+export var loadingViewContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
+export var skeletonContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 0.625rem;\n  align-items: center;\n"])));

package/dist/esm/view/HoverCard/components/views/resolving/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,58 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useMemo } from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import FlexibleCard from '../../../../FlexibleCard';
+import { messages } from '../../../../../messages';
+import { CustomBlock } from '../../../../FlexibleCard/components/blocks';
+import { extractProvider } from '@atlaskit/linking-common/extractors';
+import { connectButtonStyles, mainTextStyles, titleBlockStyles } from './styled';
+import UnauthorisedViewContent from '../../../../common/UnauthorisedViewContent';
+import ActionGroup from '../../../../FlexibleCard/components/blocks/action-group';
+import { LinkIcon } from '../../../../FlexibleCard/components/elements';
+import { ActionName } from '../../../../../constants';
+
+var HoverCardUnauthorisedView = function HoverCardUnauthorisedView(_ref) {
+  var _cardState$details, _extractProvider;
+
+  var flexibleCardProps = _ref.flexibleCardProps,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'hover-card-unauthorised-view' : _ref$testId,
+      onAuthorize = _ref.onAuthorize;
+  var cardState = flexibleCardProps.cardState;
+  var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
+  var providerName = (_extractProvider = extractProvider(data)) === null || _extractProvider === void 0 ? void 0 : _extractProvider.text;
+  var actions = useMemo(function () {
+    return onAuthorize ? [{
+      name: ActionName.CustomAction,
+      content: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_unauthorised_account_action, {
+        values: {
+          context: providerName
+        }
+      })),
+      onClick: onAuthorize
+    }] : [];
+  }, [onAuthorize, providerName]);
+  return /*#__PURE__*/React.createElement(FlexibleCard, _extends({}, flexibleCardProps, {
+    testId: testId
+  }), /*#__PURE__*/React.createElement(CustomBlock, {
+    overrideCss: titleBlockStyles,
+    testId: "".concat(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: "".concat(testId, "-content")
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(UnauthorisedViewContent, {
+    providerName: providerName
+  }))), /*#__PURE__*/React.createElement(CustomBlock, {
+    overrideCss: connectButtonStyles,
+    testId: "".concat(testId, "-button")
+  }, /*#__PURE__*/React.createElement(ActionGroup, {
+    items: actions,
+    appearance: "primary"
+  })));
+};
+
+export default HoverCardUnauthorisedView;

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

@@ -0,0 +1,11 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3;
+
+import { css } from '@emotion/react';
+var blockGap = '0.5rem';
+var iconGap = '0.5rem';
+var titleFontWeight = '500';
+export var connectButtonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  justify-content: flex-end;\n  margin-top: ", ";\n"])), blockGap);
+export var titleBlockStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  gap: ", " ", ";\n  a {\n    font-weight: ", ";\n  }\n"])), blockGap, iconGap, titleFontWeight);
+export var mainTextStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  font-size: 0.75rem;\n"])), blockGap);

package/dist/esm/view/HoverCard/components/views/unauthorised/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/view/HoverCard/styled.js

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 import { css } from '@emotion/react';
 import { loadingPlaceholderClassName } from '../../index';
@@ -17,14 +17,9 @@ export var CARD_WIDTH_REM = 24; // gap between mouse cursor and hover card
 export var CARD_GAP_PX = 10;
 var blockGap = '0.5rem';
 var elementGap = '0.5rem';
-var separatorCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  [data-separator] + [data-separator]:before {\n    margin-right: ", ";\n  }\n"])), elementGap);
+export var separatorCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  [data-separator] + [data-separator]:before {\n    margin-right: ", ";\n  }\n"])), elementGap);
 export var HoverCardContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: none;\n  border-width: 0;\n  box-sizing: border-box;\n  width: ", "rem;\n  padding: 1rem;\n\n  .", " {\n    display: none;\n  }\n"])), CARD_WIDTH_REM, loadingPlaceholderClassName);
 export var titleBlockCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  gap: ", ";\n\n  ", "\n\n  // title and subtitle element group\n  [data-smart-element-group] {\n    // gap between title and subtitle\n    gap: 0.06rem;\n\n    /* subtitle element group */\n    > [data-smart-element-group] {\n      > span {\n        margin-right: ", ";\n      }\n    }\n  }\n"])), blockGap, separatorCss, elementGap);
-export var metadataBlockCss = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  gap: 0px;\n\n  /* primary element group */\n  [data-smart-element-group]:nth-of-type(1) {\n    flex-grow: 7;\n\n    // a separator between text-based element\n    ", "\n\n    /* horizontal spacing between elements in group */\n    > span {\n      margin-right: ", ";\n    }\n  }\n  /* secondary element group */\n  [data-smart-element-group]:nth-of-type(2) {\n    flex-grow: 3;\n    /* horizontal spacing between elements in group */\n    > span {\n      margin-left: ", ";\n    }\n  }\n"])), separatorCss, elementGap, elementGap);
-export var footerBlockCss = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding-top: 0.25rem;\n"])));
-export var loadingViewContainer = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
-export var skeletonContainer = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 0.625rem;\n  align-items: center;\n"])));
-export var hiddenSnippetStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  visibility: hidden;\n  position: absolute;\n"])));
 export var getTransitionStyles = function getTransitionStyles(snippetHeight) {
-  return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  transition: height 300ms ease-in-out;\n  height: ", "px;\n"])), snippetHeight);
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  transition: height 300ms ease-in-out;\n  height: ", "px;\n"])), snippetHeight);
 };