@atlaskit/smart-card 23.5.2 → 23.6.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/smart-card
 
+## 23.6.1
+
+### Patch Changes
+
+- [`55429f504d6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/55429f504d6) - [ux] Change the 'Preview' button text to 'Full screen view' with a matching icon
+
+## 23.6.0
+
+### Minor Changes
+
+- [`3626f0cc5c0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3626f0cc5c0) - [ux] An unauthorised view was implemented for Hover Card. It will show up if the link is in 'unauthorized' state and it will offer a way for a user to connect their account.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 23.5.2
 
 ### Patch Changes

package/dist/cjs/messages.js

@@ -185,7 +185,7 @@ var messages = (0, _reactIntlNext.defineMessages)({
   },
   preview: {
     id: 'fabric.linking.preview',
-    defaultMessage: 'Preview',
+    defaultMessage: 'Full screen view',
     description: 'Click to view a richer view of your content, without needing to navigate to it.'
   },
   preview_close: {

package/dist/cjs/version.json

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

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

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

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

@@ -7,12 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EmbedCardUnauthorisedView = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntlNext = require("react-intl-next");
-
 var _UnresolvedView = require("./UnresolvedView");
 
 var _constants = require("../constants");
@@ -21,9 +17,7 @@ var _ExpandedFrame = require("../components/ExpandedFrame");
 
 var _ImageIcon = require("../components/ImageIcon");
 
-var _messages = require("../../../messages");
-
-var _constants2 = require("../../../constants");
+var _UnauthorisedViewContent = _interopRequireDefault(require("../../common/UnauthorisedViewContent"));
 
 var EmbedCardUnauthorisedView = function EmbedCardUnauthorisedView(_ref) {
   var _context$image;
@@ -63,15 +57,10 @@ var EmbedCardUnauthorisedView = function EmbedCardUnauthorisedView(_ref) {
     },
     onClick: onAuthorise,
     testId: testId
-  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages.connect_unauthorised_account_description, {
-    values: {
-      context: context === null || context === void 0 ? void 0 : context.text
-    }
-  })), ' ', /*#__PURE__*/_react.default.createElement("a", {
-    href: _constants2.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))));
+  }, /*#__PURE__*/_react.default.createElement(_UnauthorisedViewContent.default, {
+    providerName: context === null || context === void 0 ? void 0 : context.text,
+    testId: testId
+  })));
 };
 
 exports.EmbedCardUnauthorisedView = EmbedCardUnauthorisedView;

package/dist/cjs/view/FlexibleCard/components/actions/utils.js

@@ -80,7 +80,7 @@ var actionMappings = (_actionMappings = {}, (0, _defineProperty2.default)(_actio
     testId: 'smart-action-preview-action',
     content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.preview),
     icon: /*#__PURE__*/_react.default.createElement(_vidFullScreenOn.default, {
-      label: "Preview"
+      label: "Full screen view"
     }),
     tooltipMessage: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.preview)
   }

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

@@ -43,7 +43,8 @@ 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 = _react2.default.useState(false),
@@ -160,7 +161,8 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
         onActionClick: onActionClick,
         onResolve: update,
         renderers: renderers,
-        url: url
+        url: url,
+        onAuthorize: onAuthorize
       }));
     },
     trigger: function trigger(triggerProps) {

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

@@ -7,9 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.toFooterActions = exports.getOpenAction = exports.default = void 0;
-
-var _linkProvider = require("@atlaskit/link-provider");
+exports.getOpenAction = exports.default = void 0;
 
 var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"));
 
@@ -19,25 +17,21 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _constants = require("../../../constants");
 
-var _extractMetadata = require("../../../extractors/hover/extractMetadata");
-
-var _actions = require("../../../state/actions");
+var _extractMetadata2 = require("../../../extractors/hover/extractMetadata");
 
 var _helpers = require("../../../state/helpers");
 
 var _utils = require("../../../utils");
 
-var _FlexibleCard = _interopRequireDefault(require("../../FlexibleCard"));
-
-var _blocks = require("../../FlexibleCard/components/blocks");
-
 var _styled = require("../styled");
 
 var _utils2 = require("../utils");
 
-var _HoverCardLoadingView = _interopRequireDefault(require("./HoverCardLoadingView"));
+var _resolving = _interopRequireDefault(require("./views/resolving"));
+
+var _unauthorised = _interopRequireDefault(require("./views/unauthorised"));
 
-var _SnippetOrPreview = _interopRequireDefault(require("./SnippetOrPreview"));
+var _resolved = _interopRequireDefault(require("./views/resolved"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -67,25 +61,6 @@ var getOpenAction = function getOpenAction(url, analytics, onActionClick) {
 
 exports.getOpenAction = getOpenAction;
 
-var toFooterActions = function toFooterActions(cardActions, onActionClick) {
-  return cardActions.map(function (action) {
-    return {
-      content: action.text,
-      name: _constants.ActionName.CustomAction,
-      onClick: function onClick() {
-        if (onActionClick) {
-          onActionClick(action.id);
-        }
-
-        return action.invoke();
-      },
-      testId: action.id
-    };
-  });
-};
-
-exports.toFooterActions = toFooterActions;
-
 var HoverCardContent = function HoverCardContent(_ref) {
   var _cardState$details;
 
@@ -98,20 +73,8 @@ var HoverCardContent = function HoverCardContent(_ref) {
       onActionClick = _ref.onActionClick,
       onResolve = _ref.onResolve,
       renderers = _ref.renderers,
-      url = _ref.url;
-  var showActionableElement = (0, _linkProvider.useFeatureFlag)('enableActionableElement');
-  var actions = (0, _actions.useSmartCardActions)(id, url, analytics);
-  (0, _react.useEffect)(function () {
-    actions.loadMetadata();
-  }, [actions]);
-  (0, _react.useEffect)(function () {
-    // Since hover preview only render on resolved status,
-    // there is no need to check for statuses.
-    analytics.ui.renderSuccessEvent({
-      display: _utils2.SMART_CARD_ANALYTICS_DISPLAY,
-      status: cardState.status
-    });
-  }, [analytics.ui, cardState.status]);
+      url = _ref.url,
+      onAuthorize = _ref.onAuthorize;
   var extensionKey = (0, _react.useMemo)(function () {
     return (0, _helpers.getExtensionKey)(cardState.details);
   }, [cardState.details]);
@@ -128,40 +91,13 @@ var HoverCardContent = function HoverCardContent(_ref) {
   var titleActions = (0, _react.useMemo)(function () {
     return [getOpenAction(url, analytics, onActionClick)];
   }, [url, analytics, onActionClick]);
-  var footerActions = (0, _react.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 ? (0, _extractors.extractType)(data) : undefined;
 
-  var _useMemo = (0, _react.useMemo)(function () {
-    var types = data ? (0, _extractors.extractType)(data) : undefined; //TODO: EDM-3224 deleted simulated and use real JsonLd
-
-    var metadata = (0, _extractMetadata.extractMetadata)((0, _utils2.getSimulatedMetadata)(extensionKey, types));
-    var primary = showActionableElement ? (0, _utils2.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 = (0, _extractMetadata2.extractMetadata)((0, _utils2.getSimulatedMetadata)(extensionKey, types)),
+      subtitle = _extractMetadata.subtitle;
 
   var titleMaxLines = subtitle && subtitle.length > 0 ? 1 : 2;
-
-  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 body = (0, _SnippetOrPreview.default)({
-    data: data,
-    snippetHeight: snippetHeight.current
-  });
   var titleBlockProps = {
     actions: titleActions,
     maxLines: titleMaxLines,
@@ -181,29 +117,31 @@ var HoverCardContent = function HoverCardContent(_ref) {
   };
 
   if (cardState.metadataStatus === 'pending') {
-    return /*#__PURE__*/_react.default.createElement(_HoverCardLoadingView.default, {
+    return /*#__PURE__*/_react.default.createElement(_resolving.default, {
       flexibleCardProps: flexibleCardProps,
       titleBlockProps: titleBlockProps
     });
+  }
+
+  if (cardState.status === 'unauthorized') {
+    return /*#__PURE__*/_react.default.createElement(_unauthorised.default, {
+      flexibleCardProps: flexibleCardProps,
+      onAuthorize: onAuthorize
+    });
   } // if metadataStatus is 'errored' simply render using data available (normal path)
 
 
-  return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, flexibleCardProps, /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, titleBlockProps), /*#__PURE__*/_react.default.createElement(_blocks.MetadataBlock, {
-    primary: primary,
-    secondary: secondary,
-    size: _constants.SmartLinkSize.Large,
-    overrideCss: _styled.metadataBlockCss,
-    maxLines: 1
-  }), body, /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, {
-    testId: 'hidden-snippet',
-    onRender: onSnippetRender,
-    blockRef: snippetBlockRef,
-    overrideCss: _styled.hiddenSnippetStyles
-  }), /*#__PURE__*/_react.default.createElement(_blocks.FooterBlock, {
-    actions: footerActions,
-    size: _constants.SmartLinkSize.Large,
-    overrideCss: _styled.footerBlockCss
-  }));
+  return /*#__PURE__*/_react.default.createElement(_resolved.default, {
+    id: id,
+    url: url,
+    extensionKey: extensionKey,
+    analytics: analytics,
+    cardActions: cardActions,
+    cardState: cardState,
+    flexibleCardProps: flexibleCardProps,
+    onActionClick: onActionClick,
+    titleBlockProps: titleBlockProps
+  });
 };
 
 var _default = HoverCardContent;

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

@@ -0,0 +1,134 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toFooterActions = exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _linkProvider = require("@atlaskit/link-provider");
+
+var _extractors = require("@atlaskit/linking-common/extractors");
+
+var _constants = require("../../../../../constants");
+
+var _blocks = require("../../../../FlexibleCard/components/blocks");
+
+var _styled = require("./styled");
+
+var _FlexibleCard = _interopRequireDefault(require("../../../../FlexibleCard"));
+
+var _actions = require("../../../../../state/actions");
+
+var _utils = require("../../../utils");
+
+var _SnippetOrPreview = _interopRequireDefault(require("../../SnippetOrPreview"));
+
+var _extractMetadata = require("../../../../../extractors/hover/extractMetadata");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var toFooterActions = function toFooterActions(cardActions, onActionClick) {
+  return cardActions.map(function (action) {
+    return {
+      content: action.text,
+      name: _constants.ActionName.CustomAction,
+      onClick: function onClick() {
+        if (onActionClick) {
+          onActionClick(action.id);
+        }
+
+        return action.invoke();
+      },
+      testId: action.id
+    };
+  });
+};
+
+exports.toFooterActions = toFooterActions;
+
+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 = (0, _linkProvider.useFeatureFlag)('enableActionableElement');
+  var actions = (0, _actions.useSmartCardActions)(id, url, analytics);
+  (0, _react.useEffect)(function () {
+    actions.loadMetadata();
+  }, [actions]);
+  (0, _react.useEffect)(function () {
+    // Since this hover view is only rendered on resolved status,
+    // there is no need to check for statuses.
+    analytics.ui.renderSuccessEvent({
+      display: _utils.SMART_CARD_ANALYTICS_DISPLAY,
+      status: cardState.status
+    });
+  }, [analytics.ui, cardState.status]);
+  var footerActions = (0, _react.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 = (0, _react.useMemo)(function () {
+    var types = data ? (0, _extractors.extractType)(data) : undefined; //TODO: EDM-3224 deleted simulated and use real JsonLd
+
+    var metadata = (0, _extractMetadata.extractMetadata)((0, _utils.getSimulatedMetadata)(extensionKey, types));
+    var primary = showActionableElement ? (0, _utils.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.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 body = (0, _SnippetOrPreview.default)({
+    data: data,
+    snippetHeight: snippetHeight.current
+  });
+  return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, flexibleCardProps, /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, titleBlockProps), /*#__PURE__*/_react.default.createElement(_blocks.MetadataBlock, {
+    primary: primary,
+    secondary: secondary,
+    size: _constants.SmartLinkSize.Large,
+    overrideCss: _styled.metadataBlockCss,
+    maxLines: 1
+  }), body, /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, {
+    testId: 'hidden-snippet',
+    onRender: onSnippetRender,
+    blockRef: snippetBlockRef,
+    overrideCss: _styled.hiddenSnippetStyles
+  }), /*#__PURE__*/_react.default.createElement(_blocks.FooterBlock, {
+    actions: footerActions,
+    size: _constants.SmartLinkSize.Large,
+    overrideCss: _styled.footerBlockCss
+  }));
+};
+
+var _default = HoverCardResolvedView;
+exports.default = _default;

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

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.metadataBlockCss = exports.hiddenSnippetStyles = exports.footerBlockCss = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _styled = require("../../../styled");
+
+var _templateObject, _templateObject2, _templateObject3;
+
+var elementGap = '0.5rem';
+var metadataBlockCss = (0, _react.css)(_templateObject || (_templateObject = (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"])), _styled.separatorCss, elementGap, elementGap);
+exports.metadataBlockCss = metadataBlockCss;
+var footerBlockCss = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding-top: 0.25rem;\n"])));
+exports.footerBlockCss = footerBlockCss;
+var hiddenSnippetStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  visibility: hidden;\n  position: absolute;\n"])));
+exports.hiddenSnippetStyles = hiddenSnippetStyles;

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -11,13 +11,15 @@ var _react = require("@emotion/react");
 
 var _react2 = _interopRequireDefault(require("react"));
 
-var _loadingSkeleton = _interopRequireDefault(require("../../FlexibleCard/components/common/loading-skeleton"));
+var _loadingSkeleton = _interopRequireDefault(require("../../../../FlexibleCard/components/common/loading-skeleton"));
 
-var _FlexibleCard = _interopRequireDefault(require("../../FlexibleCard"));
+var _FlexibleCard = _interopRequireDefault(require("../../../../FlexibleCard"));
 
-var _blocks = require("../../FlexibleCard/components/blocks");
+var _blocks = require("../../../../FlexibleCard/components/blocks");
 
-var _styled = require("../styled");
+var _styled = require("../../../styled");
+
+var _styled2 = require("./styled");
 
 /** @jsx jsx */
 var HoverCardLoadingView = function HoverCardLoadingView(_ref) {
@@ -26,10 +28,10 @@ var HoverCardLoadingView = function HoverCardLoadingView(_ref) {
   var lineHeightRem = 1.25;
   var skeletonWidth = _styled.CARD_WIDTH_REM - 2;
   return (0, _react.jsx)("div", {
-    css: _styled.loadingViewContainer,
+    css: _styled2.loadingViewContainer,
     "data-testid": "hover-card-loading-view"
   }, (0, _react.jsx)(_FlexibleCard.default, flexibleCardProps, (0, _react.jsx)(_blocks.TitleBlock, titleBlockProps)), (0, _react.jsx)("div", {
-    css: _styled.skeletonContainer
+    css: _styled2.skeletonContainer
   }, (0, _react.jsx)("span", null), (0, _react.jsx)(_loadingSkeleton.default, {
     width: skeletonWidth,
     height: lineHeightRem

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

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.skeletonContainer = exports.loadingViewContainer = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _templateObject, _templateObject2;
+
+var loadingViewContainer = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n"])));
+exports.loadingViewContainer = loadingViewContainer;
+var skeletonContainer = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  gap: 0.625rem;\n  align-items: center;\n"])));
+exports.skeletonContainer = skeletonContainer;

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,85 @@
+"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 _FlexibleCard = _interopRequireDefault(require("../../../../FlexibleCard"));
+
+var _messages = require("../../../../../messages");
+
+var _blocks = require("../../../../FlexibleCard/components/blocks");
+
+var _extractors = require("@atlaskit/linking-common/extractors");
+
+var _styled = require("./styled");
+
+var _UnauthorisedViewContent = _interopRequireDefault(require("../../../../common/UnauthorisedViewContent"));
+
+var _actionGroup = _interopRequireDefault(require("../../../../FlexibleCard/components/blocks/action-group"));
+
+var _elements = require("../../../../FlexibleCard/components/elements");
+
+var _constants = require("../../../../../constants");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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 = (0, _extractors.extractProvider)(data)) === null || _extractProvider === void 0 ? void 0 : _extractProvider.text;
+  var actions = (0, _react.useMemo)(function () {
+    return onAuthorize ? [{
+      name: _constants.ActionName.CustomAction,
+      content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages.connect_unauthorised_account_action, {
+        values: {
+          context: providerName
+        }
+      })),
+      onClick: onAuthorize
+    }] : [];
+  }, [onAuthorize, 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
+  }))), /*#__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 = HoverCardUnauthorisedView;
+exports.default = _default;

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

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.titleBlockStyles = exports.mainTextStyles = exports.connectButtonStyles = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _templateObject, _templateObject2, _templateObject3;
+
+var blockGap = '0.5rem';
+var iconGap = '0.5rem';
+var titleFontWeight = '500';
+var connectButtonStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  justify-content: flex-end;\n  margin-top: ", ";\n"])), blockGap);
+exports.connectButtonStyles = connectButtonStyles;
+var titleBlockStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  gap: ", " ", ";\n  a {\n    font-weight: ", ";\n  }\n"])), blockGap, iconGap, titleFontWeight);
+exports.titleBlockStyles = titleBlockStyles;
+var mainTextStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", ";\n  font-size: 0.75rem;\n"])), blockGap);
+exports.mainTextStyles = mainTextStyles;