@atlaskit/smart-card 23.5.2 → 23.6.0

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.titleBlockCss = exports.skeletonContainer = exports.metadataBlockCss = exports.loadingViewContainer = exports.hiddenSnippetStyles = exports.getTransitionStyles = exports.footerBlockCss = exports.flexibleUiOptions = exports.HoverCardContainer = exports.CARD_WIDTH_REM = exports.CARD_GAP_PX = void 0;
+exports.titleBlockCss = exports.separatorCss = exports.getTransitionStyles = exports.flexibleUiOptions = exports.HoverCardContainer = exports.CARD_WIDTH_REM = exports.CARD_GAP_PX = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -15,7 +15,7 @@ var _index = require("../../index");
 
 var _constants = require("../../constants");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 var flexibleUiOptions = {
   hideElevation: true,
@@ -33,23 +33,14 @@ exports.CARD_GAP_PX = CARD_GAP_PX;
 var blockGap = '0.5rem';
 var elementGap = '0.5rem';
 var separatorCss = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  [data-separator] + [data-separator]:before {\n    margin-right: ", ";\n  }\n"])), elementGap);
+exports.separatorCss = separatorCss;
 var HoverCardContainer = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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, _index.loadingPlaceholderClassName);
 exports.HoverCardContainer = HoverCardContainer;
 var titleBlockCss = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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);
 exports.titleBlockCss = titleBlockCss;
-var metadataBlockCss = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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);
-exports.metadataBlockCss = metadataBlockCss;
-var footerBlockCss = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  padding-top: 0.25rem;\n"])));
-exports.footerBlockCss = footerBlockCss;
-var loadingViewContainer = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n"])));
-exports.loadingViewContainer = loadingViewContainer;
-var skeletonContainer = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  gap: 0.625rem;\n  align-items: center;\n"])));
-exports.skeletonContainer = skeletonContainer;
-var hiddenSnippetStyles = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  visibility: hidden;\n  position: absolute;\n"])));
-exports.hiddenSnippetStyles = hiddenSnippetStyles;
 
 var getTransitionStyles = function getTransitionStyles(snippetHeight) {
-  return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  transition: height 300ms ease-in-out;\n  height: ", "px;\n"])), snippetHeight);
+  return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  transition: height 300ms ease-in-out;\n  height: ", "px;\n"])), snippetHeight);
 };
 
 exports.getTransitionStyles = getTransitionStyles;

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

@@ -45,6 +45,8 @@ var _IconAndTitleLayout = require("../IconAndTitleLayout");
 
 var _styled = require("../styled");
 
+var _HoverCard = require("../../HoverCard");
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -108,8 +110,11 @@ var InlineCardUnauthorizedView = /*#__PURE__*/function (_React$Component) {
           onClick = _this$props2.onClick,
           isSelected = _this$props2.isSelected,
           _this$props2$testId = _this$props2.testId,
-          testId = _this$props2$testId === void 0 ? 'inline-card-unauthorized-view' : _this$props2$testId;
-      return /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
+          testId = _this$props2$testId === void 0 ? 'inline-card-unauthorized-view' : _this$props2$testId,
+          _this$props2$showAuth = _this$props2.showAuthTooltip,
+          showAuthTooltip = _this$props2$showAuth === void 0 ? false : _this$props2$showAuth;
+
+      var inlineCardUnauthenticatedView = /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
         testId: testId,
         link: url,
         onClick: onClick,
@@ -119,6 +124,15 @@ var InlineCardUnauthorizedView = /*#__PURE__*/function (_React$Component) {
         title: this.renderMessage(),
         titleColor: (0, _tokens.token)('color.text.subtle', _colors.N500)
       }));
+
+      if (showAuthTooltip) {
+        return /*#__PURE__*/_react.default.createElement(_HoverCard.HoverCard, {
+          url: url,
+          onAuthorize: this.props.onAuthorise
+        }, inlineCardUnauthenticatedView);
+      }
+
+      return inlineCardUnauthenticatedView;
     }
   }]);
   return InlineCardUnauthorizedView;

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

@@ -75,7 +75,8 @@ var InlineCard = function InlineCard(_ref) {
       onError = _ref.onError,
       testId = _ref.testId,
       inlinePreloaderStyle = _ref.inlinePreloaderStyle,
-      showHoverPreview = _ref.showHoverPreview;
+      showHoverPreview = _ref.showHoverPreview,
+      showAuthTooltip = _ref.showAuthTooltip;
   var status = cardState.status,
       details = cardState.details;
   var cardDetails = details && details.data || (0, _jsonld.getEmptyJsonLd)();
@@ -127,7 +128,8 @@ var InlineCard = function InlineCard(_ref) {
         isSelected: isSelected,
         onClick: handleFrameClick,
         onAuthorise: handleAuthorize,
-        testId: testIdWithStatus
+        testId: testIdWithStatus,
+        showAuthTooltip: showAuthTooltip
       });
 
     case 'forbidden':

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

@@ -0,0 +1,40 @@
+"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 _reactIntlNext = require("react-intl-next");
+
+var _messages = require("../../messages");
+
+var _constants = require("../../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
+ */
+var UnauthorisedViewContent = function UnauthorisedViewContent(_ref) {
+  var providerName = _ref.providerName,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'unauthorised-view-content' : _ref$testId;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages.connect_unauthorised_account_description, {
+    values: {
+      context: providerName
+    }
+  })), ' ', /*#__PURE__*/_react.default.createElement("a", {
+    href: _constants.CONTENT_URL_SECURITY_AND_PERMISSIONS,
+    target: "_blank",
+    "data-testid": "".concat(testId, "-learn-more")
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.learn_more_about_smart_links_security)));
+};
+
+var _default = UnauthorisedViewContent;
+exports.default = _default;

package/dist/es2019/version.json

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

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

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

package/dist/es2019/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 const EmbedCardUnauthorisedView = ({
   link,
   context,
@@ -43,13 +40,8 @@ export const EmbedCardUnauthorisedView = ({
     },
     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": `${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/es2019/view/HoverCard/components/HoverCardComponent.js

@@ -15,7 +15,8 @@ export const HoverCardComponent = ({
   children,
   url,
   analyticsHandler,
-  analytics
+  analytics,
+  onAuthorize
 }) => {
   const delay = 300;
   const [isOpen, setIsOpen] = React.useState(false);
@@ -124,7 +125,8 @@ export const HoverCardComponent = ({
       onActionClick: onActionClick,
       onResolve: update,
       renderers: renderers,
-      url: url
+      url: url,
+      onAuthorize: onAuthorize
     })),
     trigger: triggerProps => jsx("span", {
       ref: parentSpan

package/dist/es2019/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 const getOpenAction = (url, analytics, onActionClick) => ({
   name: ActionName.CustomAction,
   icon: /*#__PURE__*/React.createElement(ShortcutIcon, {
@@ -32,18 +29,6 @@ export const getOpenAction = (url, analytics, onActionClick) => ({
   },
   testId: 'hover-card-open-button'
 });
-export const toFooterActions = (cardActions, onActionClick) => cardActions.map(action => ({
-  content: action.text,
-  name: ActionName.CustomAction,
-  onClick: () => {
-    if (onActionClick) {
-      onActionClick(action.id);
-    }
-
-    return action.invoke();
-  },
-  testId: action.id
-}));
 
 const HoverCardContent = ({
   id = '',
@@ -53,23 +38,11 @@ const HoverCardContent = ({
   onActionClick,
   onResolve,
   renderers,
-  url
+  url,
+  onAuthorize
 }) => {
   var _cardState$details;
 
-  const showActionableElement = useFeatureFlag('enableActionableElement');
-  const actions = useSmartCardActions(id, url, analytics);
-  useEffect(() => {
-    actions.loadMetadata();
-  }, [actions]);
-  useEffect(() => {
-    // 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]);
   const extensionKey = useMemo(() => getExtensionKey(cardState.details), [cardState.details]);
   const onClick = useCallback(event => {
     const isModifierKeyPressed = isSpecialEvent(event);
@@ -82,35 +55,12 @@ const HoverCardContent = ({
     });
   }, [cardState.status, analytics.ui, id]);
   const titleActions = useMemo(() => [getOpenAction(url, analytics, onActionClick)], [url, analytics, onActionClick]);
-  const footerActions = useMemo(() => toFooterActions(cardActions, onActionClick), [cardActions, onActionClick]);
   const data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
+  const types = data ? extractType(data) : undefined;
   const {
-    primary,
-    secondary,
     subtitle
-  } = useMemo(() => {
-    const types = data ? extractType(data) : undefined; //TODO: EDM-3224 deleted simulated and use real JsonLd
-
-    const metadata = extractMetadata(getSimulatedMetadata(extensionKey, types));
-    const primary = showActionableElement ? toActionableMetadata(onActionClick, extensionKey, types, cardActions, metadata.primary) : metadata.primary;
-    return {
-      primary,
-      secondary: metadata.secondary,
-      subtitle: metadata.subtitle
-    };
-  }, [cardActions, data, extensionKey, onActionClick, showActionableElement]);
+  } = extractMetadata(getSimulatedMetadata(extensionKey, types));
   const titleMaxLines = subtitle && subtitle.length > 0 ? 1 : 2;
-  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 body = SnippetOrPreview({
-    data: data,
-    snippetHeight: snippetHeight.current
-  });
   const titleBlockProps = {
     actions: titleActions,
     maxLines: titleMaxLines,
@@ -134,25 +84,27 @@ const HoverCardContent = ({
       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/es2019/view/HoverCard/components/views/resolved/index.js

@@ -0,0 +1,96 @@
+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 const toFooterActions = (cardActions, onActionClick) => cardActions.map(action => ({
+  content: action.text,
+  name: ActionName.CustomAction,
+  onClick: () => {
+    if (onActionClick) {
+      onActionClick(action.id);
+    }
+
+    return action.invoke();
+  },
+  testId: action.id
+}));
+
+const HoverCardResolvedView = ({
+  flexibleCardProps,
+  titleBlockProps,
+  analytics,
+  id = '',
+  url,
+  cardState,
+  cardActions = [],
+  onActionClick,
+  extensionKey
+}) => {
+  var _cardState$details;
+
+  const showActionableElement = useFeatureFlag('enableActionableElement');
+  const actions = useSmartCardActions(id, url, analytics);
+  useEffect(() => {
+    actions.loadMetadata();
+  }, [actions]);
+  useEffect(() => {
+    // 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]);
+  const footerActions = useMemo(() => toFooterActions(cardActions, onActionClick), [cardActions, onActionClick]);
+  const data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
+  const {
+    primary,
+    secondary
+  } = useMemo(() => {
+    const types = data ? extractType(data) : undefined; //TODO: EDM-3224 deleted simulated and use real JsonLd
+
+    const metadata = extractMetadata(getSimulatedMetadata(extensionKey, types));
+    const primary = showActionableElement ? toActionableMetadata(onActionClick, extensionKey, types, cardActions, metadata.primary) : metadata.primary;
+    return {
+      primary,
+      secondary: metadata.secondary,
+      subtitle: metadata.subtitle
+    };
+  }, [cardActions, data, extensionKey, onActionClick, showActionableElement]);
+  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 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/es2019/view/HoverCard/components/views/resolved/styled.js

@@ -0,0 +1,34 @@
+import { css } from '@emotion/react';
+import { separatorCss } from '../../../styled';
+const elementGap = '0.5rem';
+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 hiddenSnippetStyles = css`
+  visibility: hidden;
+  position: absolute;
+`;

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

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

package/dist/es2019/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';
 
 const HoverCardLoadingView = ({
   flexibleCardProps,

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

@@ -0,0 +1,11 @@
+import { css } from '@emotion/react';
+export const loadingViewContainer = css`
+  display: flex;
+  flex-direction: column;
+`;
+export const skeletonContainer = css`
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  align-items: center;
+`;

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

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

package/dist/es2019/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';
+
+const HoverCardUnauthorisedView = ({
+  flexibleCardProps,
+  testId = 'hover-card-unauthorised-view',
+  onAuthorize
+}) => {
+  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 actions = useMemo(() => 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: `${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
+  }))), /*#__PURE__*/React.createElement(CustomBlock, {
+    overrideCss: connectButtonStyles,
+    testId: `${testId}-button`
+  }, /*#__PURE__*/React.createElement(ActionGroup, {
+    items: actions,
+    appearance: "primary"
+  })));
+};
+
+export default HoverCardUnauthorisedView;

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

@@ -0,0 +1,18 @@
+import { css } from '@emotion/react';
+const blockGap = '0.5rem';
+const iconGap = '0.5rem';
+const titleFontWeight = '500';
+export const connectButtonStyles = css`
+  justify-content: flex-end;
+  margin-top: ${blockGap};
+`;
+export const titleBlockStyles = css`
+  gap: ${blockGap} ${iconGap};
+  a {
+    font-weight: ${titleFontWeight};
+  }
+`;
+export const mainTextStyles = css`
+  margin-top: ${blockGap};
+  font-size: 0.75rem;
+`;

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

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