@atlaskit/smart-card 26.32.0 → 26.33.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 26.33.0
+
+### Minor Changes
+
+- [#40996](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/40996) [`b6d96384d32`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b6d96384d32) - [ux] Add forbidden hover card to inline cards
+
 ## 26.32.0
 
 ### Minor Changes

package/dist/cjs/extractors/common/context/extractAccessContext.js

@@ -89,7 +89,8 @@ var extractRequestAccessContextImproved = exports.extractRequestAccessContextImp
         callToActionMessageKey: 'request_access_pending_crossjoin',
         action: (0, _ForbiddenAction.ForbiddenAction)(function () {
           return window.open(url);
-        }, 'request_access_pending', _messages.messages.request_access_pending_crossjoin)
+        }, 'request_access_pending', _messages.messages.request_access_pending_crossjoin),
+        buttonDisabled: true
       });
     case 'DENIED_REQUEST_EXISTS':
       return _objectSpread(_objectSpread({}, requestAccess), {}, {

package/dist/cjs/utils/analytics/analytics.js

@@ -22,7 +22,7 @@ var ANALYTICS_CHANNEL = exports.ANALYTICS_CHANNEL = 'media';
 var context = exports.context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.32.0"
+  packageVersion: "26.33.0"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -183,7 +183,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
       });
     }
     if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.cross-join')) {
-      if (cardState.status === 'forbidden') {
+      if (cardState.status === 'forbidden' || cardState.status === 'not_found') {
         return (0, _react.jsx)(_forbidden.default, {
           flexibleCardProps: flexibleCardProps
         });

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

@@ -1,27 +1,23 @@
 "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 _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _FlexibleCard = _interopRequireDefault(require("../../../../FlexibleCard"));
 var _messages = require("../../../../../messages");
 var _blocks = require("../../../../FlexibleCard/components/blocks");
+var _button = _interopRequireDefault(require("@atlaskit/button"));
 var _linkExtractors = require("@atlaskit/link-extractors");
 var _styled = require("./styled");
-var _actionGroup = _interopRequireDefault(require("../../../../FlexibleCard/components/blocks/action-group"));
-var _constants = require("../../../../../constants");
 var _styled2 = require("../../../styled");
 var _extractAccessContext = require("../../../../../extractors/common/context/extractAccessContext");
-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 HoverCardForbiddenView = function HoverCardForbiddenView(_ref) {
-  var _cardState$details, _cardState$details2, _extractProvider$text, _extractProvider;
+  var _cardState$details, _cardState$details2, _extractProvider$text, _extractProvider, _extractRequestAccess;
   var flexibleCardProps = _ref.flexibleCardProps,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'hover-card-forbidden-view' : _ref$testId;
@@ -30,22 +26,16 @@ var HoverCardForbiddenView = function HoverCardForbiddenView(_ref) {
   var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   var meta = (_cardState$details2 = cardState.details) === null || _cardState$details2 === void 0 ? void 0 : _cardState$details2.meta;
   var product = (_extractProvider$text = (_extractProvider = (0, _linkExtractors.extractProvider)(data)) === null || _extractProvider === void 0 ? void 0 : _extractProvider.text) !== null && _extractProvider$text !== void 0 ? _extractProvider$text : '';
-  var hostname = new URL(url).hostname;
-  var _extractRequestAccess = (0, _extractAccessContext.extractRequestAccessContextImproved)({
+  var hostname = /*#__PURE__*/_react.default.createElement("b", null, new URL(url).hostname);
+  var _ref2 = (_extractRequestAccess = (0, _extractAccessContext.extractRequestAccessContextImproved)({
       jsonLd: meta,
       url: url,
       product: product
-    }),
-    action = _extractRequestAccess.action,
-    descriptiveMessageKey = _extractRequestAccess.descriptiveMessageKey,
-    titleMessageKey = _extractRequestAccess.titleMessageKey;
-  var actions = (0, _react.useMemo)(function () {
-    return [{
-      name: _constants.ActionName.CustomAction,
-      content: action === null || action === void 0 ? void 0 : action.text,
-      onClick: action === null || action === void 0 ? void 0 : action.promise
-    }];
-  }, [action]);
+    })) !== null && _extractRequestAccess !== void 0 ? _extractRequestAccess : {},
+    action = _ref2.action,
+    descriptiveMessageKey = _ref2.descriptiveMessageKey,
+    titleMessageKey = _ref2.titleMessageKey,
+    buttonDisabled = _ref2.buttonDisabled;
   if (!titleMessageKey || !descriptiveMessageKey) {
     return null;
   }
@@ -73,9 +63,10 @@ var HoverCardForbiddenView = function HoverCardForbiddenView(_ref) {
   }))), action && /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, {
     overrideCss: _styled.connectButtonStyles,
     testId: "".concat(testId, "-button")
-  }, /*#__PURE__*/_react.default.createElement(_actionGroup.default, {
-    items: actions,
-    appearance: "primary"
-  })));
+  }, /*#__PURE__*/_react.default.createElement(_button.default, {
+    onClick: action === null || action === void 0 ? void 0 : action.promise,
+    appearance: "primary",
+    isDisabled: buttonDisabled
+  }, action === null || action === void 0 ? void 0 : action.text)));
 };
 var _default = exports.default = HoverCardForbiddenView;

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

@@ -11,5 +11,5 @@ var _templateObject, _templateObject2, _templateObject3;
 var blockGap = '0rem';
 var titleFontWeight = '600';
 var titleBlockStyles = exports.titleBlockStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  justify-content: center;\n  font-weight: ", ";\n"])), titleFontWeight);
-var mainTextStyles = exports.mainTextStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  justify-content: center;\n  margin-top: ", ";\n  font-size: 0.75rem;\n  text-align: center;\n"])), blockGap);
+var mainTextStyles = exports.mainTextStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline;\n  justify-content: center;\n  margin-top: ", ";\n  font-size: 0.75rem;\n  text-align: center;\n"])), blockGap);
 var connectButtonStyles = exports.connectButtonStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  justify-content: center;\n  margin-top: ", ";\n"])), blockGap);

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

@@ -18,7 +18,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId"],
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.32.0",
+  packageVersion: "26.33.0",
   componentName: 'linkUrl'
 };
 var Link = (0, _click.withLinkClickedEvent)('a');

package/dist/cjs/view/RedesignedInlineCard/ErroredView/index.js

@@ -23,6 +23,8 @@ var _messages = require("../../../messages");
 var _reactIntlNext = require("react-intl-next");
 var _styled = require("../styled");
 var _withFrameStyleControl = _interopRequireDefault(require("../utils/withFrameStyleControl"));
+var _HoverCard = require("../../HoverCard");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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; } }
 var InlineCardErroredView = exports.InlineCardErroredView = /*#__PURE__*/function (_React$Component) {
@@ -67,7 +69,7 @@ var InlineCardErroredView = exports.InlineCardErroredView = /*#__PURE__*/functio
         testId = _this$props$testId === void 0 ? 'inline-card-errored-view' : _this$props$testId,
         icon = _this$props.icon,
         message = _this$props.message;
-      return /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
+      var content = /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
         testId: testId,
         isSelected: isSelected,
         ref: this.frameRef
@@ -83,6 +85,12 @@ var InlineCardErroredView = exports.InlineCardErroredView = /*#__PURE__*/functio
         onClick: onClick,
         rightSide: message
       }), this.renderActionButton());
+      if (this.props.showHoverPreview && (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.cross-join')) {
+        return /*#__PURE__*/_react.default.createElement(_HoverCard.HoverCard, {
+          url: url
+        }, content);
+      }
+      return content;
     }
   }]);
   return InlineCardErroredView;

package/dist/cjs/view/RedesignedInlineCard/ForbiddenView/index.js

@@ -26,6 +26,8 @@ var _styled = require("../styled");
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 var _styled2 = require("../IconAndTitleLayout/styled");
 var _withFrameStyleControl = _interopRequireDefault(require("../utils/withFrameStyleControl"));
+var _HoverCard = require("../../HoverCard");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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; } }
 var FallbackForbiddenIcon = /*#__PURE__*/_react.default.createElement(_Icon.AKIconWrapper, null, /*#__PURE__*/_react.default.createElement(_lockFilled.default, {
@@ -111,7 +113,7 @@ var InlineCardForbiddenView = exports.InlineCardForbiddenView = /*#__PURE__*/fun
         isSelected = _this$props4.isSelected,
         _this$props4$testId = _this$props4.testId,
         testId = _this$props4$testId === void 0 ? 'inline-card-forbidden-view' : _this$props4$testId;
-      return /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
+      var content = /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
         testId: testId,
         isSelected: isSelected,
         ref: this.frameRef
@@ -122,6 +124,12 @@ var InlineCardForbiddenView = exports.InlineCardForbiddenView = /*#__PURE__*/fun
         onClick: onClick,
         titleColor: "var(--ds-text-subtle, ".concat(_colors.N500, ")")
       }), this.renderActionButton());
+      if (this.props.showHoverPreview && (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.cross-join')) {
+        return /*#__PURE__*/_react.default.createElement(_HoverCard.HoverCard, {
+          url: url
+        }, content);
+      }
+      return content;
     }
   }]);
   return InlineCardForbiddenView;

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

@@ -145,7 +145,8 @@ var InlineCard = exports.InlineCard = function InlineCard(_ref) {
         onClick: handleFrameClick,
         onAuthorise: handleAuthorize,
         testId: testIdWithStatus,
-        requestAccessContext: requestAccessContext
+        requestAccessContext: requestAccessContext,
+        showHoverPreview: showHoverPreview
       });
     case 'not_found':
       if (onError) {
@@ -161,7 +162,8 @@ var InlineCard = exports.InlineCard = function InlineCard(_ref) {
         isSelected: isSelected,
         message: "Can't find link",
         onClick: handleFrameClick,
-        testId: testIdWithStatus || 'inline-card-not-found-view'
+        testId: testIdWithStatus || 'inline-card-not-found-view',
+        showHoverPreview: showHoverPreview
       });
     case 'fallback':
     case 'errored':

package/dist/es2019/extractors/common/context/extractAccessContext.js

@@ -80,7 +80,8 @@ export const extractRequestAccessContextImproved = ({
         titleMessageKey: 'request_access_pending_title_crossjoin',
         descriptiveMessageKey: 'request_access_pending_description_crossjoin',
         callToActionMessageKey: 'request_access_pending_crossjoin',
-        action: ForbiddenAction(() => window.open(url), 'request_access_pending', messages.request_access_pending_crossjoin)
+        action: ForbiddenAction(() => window.open(url), 'request_access_pending', messages.request_access_pending_crossjoin),
+        buttonDisabled: true
       };
     case 'DENIED_REQUEST_EXISTS':
       return {

package/dist/es2019/utils/analytics/analytics.js

@@ -4,7 +4,7 @@ export const ANALYTICS_CHANNEL = 'media';
 export const context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.32.0"
+  packageVersion: "26.33.0"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -144,7 +144,7 @@ const HoverCardContent = ({
       });
     }
     if (getBooleanFF('platform.linking-platform.smart-card.cross-join')) {
-      if (cardState.status === 'forbidden') {
+      if (cardState.status === 'forbidden' || cardState.status === 'not_found') {
         return jsx(HoverCardForbiddenView, {
           flexibleCardProps: flexibleCardProps
         });

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

@@ -1,20 +1,19 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useMemo } from 'react';
+import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import FlexibleCard from '../../../../FlexibleCard';
 import { messages } from '../../../../../messages';
 import { CustomBlock, PreviewBlock } from '../../../../FlexibleCard/components/blocks';
+import Button from '@atlaskit/button';
 import { extractProvider } from '@atlaskit/link-extractors';
 import { connectButtonStyles, mainTextStyles, titleBlockStyles } from './styled';
-import ActionGroup from '../../../../FlexibleCard/components/blocks/action-group';
-import { ActionName } from '../../../../../constants';
 import { getPreviewBlockStyles } from '../../../styled';
 import { extractRequestAccessContextImproved } from '../../../../../extractors/common/context/extractAccessContext';
 const HoverCardForbiddenView = ({
   flexibleCardProps,
   testId = 'hover-card-forbidden-view'
 }) => {
-  var _cardState$details, _cardState$details2, _extractProvider$text, _extractProvider;
+  var _cardState$details, _cardState$details2, _extractProvider$text, _extractProvider, _extractRequestAccess;
   const {
     cardState,
     url
@@ -22,21 +21,17 @@ const HoverCardForbiddenView = ({
   const data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   const meta = (_cardState$details2 = cardState.details) === null || _cardState$details2 === void 0 ? void 0 : _cardState$details2.meta;
   const product = (_extractProvider$text = (_extractProvider = extractProvider(data)) === null || _extractProvider === void 0 ? void 0 : _extractProvider.text) !== null && _extractProvider$text !== void 0 ? _extractProvider$text : '';
-  const hostname = new URL(url).hostname;
+  const hostname = /*#__PURE__*/React.createElement("b", null, new URL(url).hostname);
   const {
     action,
     descriptiveMessageKey,
-    titleMessageKey
-  } = extractRequestAccessContextImproved({
+    titleMessageKey,
+    buttonDisabled
+  } = (_extractRequestAccess = extractRequestAccessContextImproved({
     jsonLd: meta,
     url,
     product
-  });
-  const actions = useMemo(() => [{
-    name: ActionName.CustomAction,
-    content: action === null || action === void 0 ? void 0 : action.text,
-    onClick: action === null || action === void 0 ? void 0 : action.promise
-  }], [action]);
+  })) !== null && _extractRequestAccess !== void 0 ? _extractRequestAccess : {};
   if (!titleMessageKey || !descriptiveMessageKey) {
     return null;
   }
@@ -64,9 +59,10 @@ const HoverCardForbiddenView = ({
   }))), action && /*#__PURE__*/React.createElement(CustomBlock, {
     overrideCss: connectButtonStyles,
     testId: `${testId}-button`
-  }, /*#__PURE__*/React.createElement(ActionGroup, {
-    items: actions,
-    appearance: "primary"
-  })));
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: action === null || action === void 0 ? void 0 : action.promise,
+    appearance: "primary",
+    isDisabled: buttonDisabled
+  }, action === null || action === void 0 ? void 0 : action.text)));
 };
 export default HoverCardForbiddenView;

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

@@ -6,6 +6,7 @@ export const titleBlockStyles = css`
   font-weight: ${titleFontWeight};
 `;
 export const mainTextStyles = css`
+  display: inline;
   justify-content: center;
   margin-top: ${blockGap};
   font-size: 0.75rem;

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

@@ -8,7 +8,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.32.0",
+  packageVersion: "26.33.0",
   componentName: 'linkUrl'
 };
 const Link = withLinkClickedEvent('a');

package/dist/es2019/view/RedesignedInlineCard/ErroredView/index.js

@@ -10,6 +10,8 @@ import { messages } from '../../../messages';
 import { FormattedMessage } from 'react-intl-next';
 import { IconStyledButton } from '../styled';
 import withFrameStyleControl from '../utils/withFrameStyleControl';
+import { HoverCard } from '../../HoverCard';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export class InlineCardErroredView extends React.Component {
   constructor(...args) {
     super(...args);
@@ -46,7 +48,7 @@ export class InlineCardErroredView extends React.Component {
       icon,
       message
     } = this.props;
-    return /*#__PURE__*/React.createElement(Frame, {
+    const content = /*#__PURE__*/React.createElement(Frame, {
       testId: testId,
       isSelected: isSelected,
       ref: this.frameRef
@@ -62,5 +64,11 @@ export class InlineCardErroredView extends React.Component {
       onClick: onClick,
       rightSide: message
     }), this.renderActionButton());
+    if (this.props.showHoverPreview && getBooleanFF('platform.linking-platform.smart-card.cross-join')) {
+      return /*#__PURE__*/React.createElement(HoverCard, {
+        url: url
+      }, content);
+    }
+    return content;
   }
 }

package/dist/es2019/view/RedesignedInlineCard/ForbiddenView/index.js

@@ -13,6 +13,8 @@ import { IconStyledButton } from '../styled';
 import Lozenge from '@atlaskit/lozenge';
 import { LozengeWrapper } from '../IconAndTitleLayout/styled';
 import withFrameStyleControl from '../utils/withFrameStyleControl';
+import { HoverCard } from '../../HoverCard';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 const FallbackForbiddenIcon = /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LockIcon, {
   label: "error",
   size: "small",
@@ -92,7 +94,7 @@ export class InlineCardForbiddenView extends React.Component {
       isSelected,
       testId = 'inline-card-forbidden-view'
     } = this.props;
-    return /*#__PURE__*/React.createElement(Frame, {
+    const content = /*#__PURE__*/React.createElement(Frame, {
       testId: testId,
       isSelected: isSelected,
       ref: this.frameRef
@@ -103,5 +105,11 @@ export class InlineCardForbiddenView extends React.Component {
       onClick: onClick,
       titleColor: `var(--ds-text-subtle, ${N500})`
     }), this.renderActionButton());
+    if (this.props.showHoverPreview && getBooleanFF('platform.linking-platform.smart-card.cross-join')) {
+      return /*#__PURE__*/React.createElement(HoverCard, {
+        url: url
+      }, content);
+    }
+    return content;
   }
 }

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

@@ -112,7 +112,8 @@ export const InlineCard = ({
         onClick: handleFrameClick,
         onAuthorise: handleAuthorize,
         testId: testIdWithStatus,
-        requestAccessContext: requestAccessContext
+        requestAccessContext: requestAccessContext,
+        showHoverPreview: showHoverPreview
       });
     case 'not_found':
       if (onError) {
@@ -128,7 +129,8 @@ export const InlineCard = ({
         isSelected: isSelected,
         message: "Can't find link",
         onClick: handleFrameClick,
-        testId: testIdWithStatus || 'inline-card-not-found-view'
+        testId: testIdWithStatus || 'inline-card-not-found-view',
+        showHoverPreview: showHoverPreview
       });
     case 'fallback':
     case 'errored':

package/dist/esm/extractors/common/context/extractAccessContext.js

@@ -82,7 +82,8 @@ export var extractRequestAccessContextImproved = function extractRequestAccessCo
         callToActionMessageKey: 'request_access_pending_crossjoin',
         action: ForbiddenAction(function () {
           return window.open(url);
-        }, 'request_access_pending', messages.request_access_pending_crossjoin)
+        }, 'request_access_pending', messages.request_access_pending_crossjoin),
+        buttonDisabled: true
       });
     case 'DENIED_REQUEST_EXISTS':
       return _objectSpread(_objectSpread({}, requestAccess), {}, {

package/dist/esm/utils/analytics/analytics.js

@@ -15,7 +15,7 @@ export var ANALYTICS_CHANNEL = 'media';
 export var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.32.0"
+  packageVersion: "26.33.0"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -172,7 +172,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
       });
     }
     if (getBooleanFF('platform.linking-platform.smart-card.cross-join')) {
-      if (cardState.status === 'forbidden') {
+      if (cardState.status === 'forbidden' || cardState.status === 'not_found') {
         return jsx(HoverCardForbiddenView, {
           flexibleCardProps: flexibleCardProps
         });

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

@@ -1,17 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useMemo } from 'react';
+import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import FlexibleCard from '../../../../FlexibleCard';
 import { messages } from '../../../../../messages';
 import { CustomBlock, PreviewBlock } from '../../../../FlexibleCard/components/blocks';
+import Button from '@atlaskit/button';
 import { extractProvider } from '@atlaskit/link-extractors';
 import { connectButtonStyles, mainTextStyles, titleBlockStyles } from './styled';
-import ActionGroup from '../../../../FlexibleCard/components/blocks/action-group';
-import { ActionName } from '../../../../../constants';
 import { getPreviewBlockStyles } from '../../../styled';
 import { extractRequestAccessContextImproved } from '../../../../../extractors/common/context/extractAccessContext';
 var HoverCardForbiddenView = function HoverCardForbiddenView(_ref) {
-  var _cardState$details, _cardState$details2, _extractProvider$text, _extractProvider;
+  var _cardState$details, _cardState$details2, _extractProvider$text, _extractProvider, _extractRequestAccess;
   var flexibleCardProps = _ref.flexibleCardProps,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'hover-card-forbidden-view' : _ref$testId;
@@ -20,22 +19,16 @@ var HoverCardForbiddenView = function HoverCardForbiddenView(_ref) {
   var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   var meta = (_cardState$details2 = cardState.details) === null || _cardState$details2 === void 0 ? void 0 : _cardState$details2.meta;
   var product = (_extractProvider$text = (_extractProvider = extractProvider(data)) === null || _extractProvider === void 0 ? void 0 : _extractProvider.text) !== null && _extractProvider$text !== void 0 ? _extractProvider$text : '';
-  var hostname = new URL(url).hostname;
-  var _extractRequestAccess = extractRequestAccessContextImproved({
+  var hostname = /*#__PURE__*/React.createElement("b", null, new URL(url).hostname);
+  var _ref2 = (_extractRequestAccess = extractRequestAccessContextImproved({
       jsonLd: meta,
       url: url,
       product: product
-    }),
-    action = _extractRequestAccess.action,
-    descriptiveMessageKey = _extractRequestAccess.descriptiveMessageKey,
-    titleMessageKey = _extractRequestAccess.titleMessageKey;
-  var actions = useMemo(function () {
-    return [{
-      name: ActionName.CustomAction,
-      content: action === null || action === void 0 ? void 0 : action.text,
-      onClick: action === null || action === void 0 ? void 0 : action.promise
-    }];
-  }, [action]);
+    })) !== null && _extractRequestAccess !== void 0 ? _extractRequestAccess : {},
+    action = _ref2.action,
+    descriptiveMessageKey = _ref2.descriptiveMessageKey,
+    titleMessageKey = _ref2.titleMessageKey,
+    buttonDisabled = _ref2.buttonDisabled;
   if (!titleMessageKey || !descriptiveMessageKey) {
     return null;
   }
@@ -63,9 +56,10 @@ var HoverCardForbiddenView = function HoverCardForbiddenView(_ref) {
   }))), action && /*#__PURE__*/React.createElement(CustomBlock, {
     overrideCss: connectButtonStyles,
     testId: "".concat(testId, "-button")
-  }, /*#__PURE__*/React.createElement(ActionGroup, {
-    items: actions,
-    appearance: "primary"
-  })));
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: action === null || action === void 0 ? void 0 : action.promise,
+    appearance: "primary",
+    isDisabled: buttonDisabled
+  }, action === null || action === void 0 ? void 0 : action.text)));
 };
 export default HoverCardForbiddenView;

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

@@ -4,5 +4,5 @@ import { css } from '@emotion/react';
 var blockGap = '0rem';
 var titleFontWeight = '600';
 export var titleBlockStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  justify-content: center;\n  font-weight: ", ";\n"])), titleFontWeight);
-export var mainTextStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  justify-content: center;\n  margin-top: ", ";\n  font-size: 0.75rem;\n  text-align: center;\n"])), blockGap);
+export var mainTextStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: inline;\n  justify-content: center;\n  margin-top: ", ";\n  font-size: 0.75rem;\n  text-align: center;\n"])), blockGap);
 export var connectButtonStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  justify-content: center;\n  margin-top: ", ";\n"])), blockGap);

package/dist/esm/view/LinkUrl/index.js

@@ -11,7 +11,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.32.0",
+  packageVersion: "26.33.0",
   componentName: 'linkUrl'
 };
 var Link = withLinkClickedEvent('a');

package/dist/esm/view/RedesignedInlineCard/ErroredView/index.js

@@ -18,6 +18,8 @@ import { messages } from '../../../messages';
 import { FormattedMessage } from 'react-intl-next';
 import { IconStyledButton } from '../styled';
 import withFrameStyleControl from '../utils/withFrameStyleControl';
+import { HoverCard } from '../../HoverCard';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export var InlineCardErroredView = /*#__PURE__*/function (_React$Component) {
   _inherits(InlineCardErroredView, _React$Component);
   var _super = _createSuper(InlineCardErroredView);
@@ -60,7 +62,7 @@ export var InlineCardErroredView = /*#__PURE__*/function (_React$Component) {
         testId = _this$props$testId === void 0 ? 'inline-card-errored-view' : _this$props$testId,
         icon = _this$props.icon,
         message = _this$props.message;
-      return /*#__PURE__*/React.createElement(Frame, {
+      var content = /*#__PURE__*/React.createElement(Frame, {
         testId: testId,
         isSelected: isSelected,
         ref: this.frameRef
@@ -76,6 +78,12 @@ export var InlineCardErroredView = /*#__PURE__*/function (_React$Component) {
         onClick: onClick,
         rightSide: message
       }), this.renderActionButton());
+      if (this.props.showHoverPreview && getBooleanFF('platform.linking-platform.smart-card.cross-join')) {
+        return /*#__PURE__*/React.createElement(HoverCard, {
+          url: url
+        }, content);
+      }
+      return content;
     }
   }]);
   return InlineCardErroredView;

package/dist/esm/view/RedesignedInlineCard/ForbiddenView/index.js

@@ -21,6 +21,8 @@ import { IconStyledButton } from '../styled';
 import Lozenge from '@atlaskit/lozenge';
 import { LozengeWrapper } from '../IconAndTitleLayout/styled';
 import withFrameStyleControl from '../utils/withFrameStyleControl';
+import { HoverCard } from '../../HoverCard';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 var FallbackForbiddenIcon = /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LockIcon, {
   label: "error",
   size: "small",
@@ -104,7 +106,7 @@ export var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
         isSelected = _this$props4.isSelected,
         _this$props4$testId = _this$props4.testId,
         testId = _this$props4$testId === void 0 ? 'inline-card-forbidden-view' : _this$props4$testId;
-      return /*#__PURE__*/React.createElement(Frame, {
+      var content = /*#__PURE__*/React.createElement(Frame, {
         testId: testId,
         isSelected: isSelected,
         ref: this.frameRef
@@ -115,6 +117,12 @@ export var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
         onClick: onClick,
         titleColor: "var(--ds-text-subtle, ".concat(N500, ")")
       }), this.renderActionButton());
+      if (this.props.showHoverPreview && getBooleanFF('platform.linking-platform.smart-card.cross-join')) {
+        return /*#__PURE__*/React.createElement(HoverCard, {
+          url: url
+        }, content);
+      }
+      return content;
     }
   }]);
   return InlineCardForbiddenView;

package/dist/esm/view/RedesignedInlineCard/index.js

@@ -109,7 +109,8 @@ export var InlineCard = function InlineCard(_ref) {
         onClick: handleFrameClick,
         onAuthorise: handleAuthorize,
         testId: testIdWithStatus,
-        requestAccessContext: requestAccessContext
+        requestAccessContext: requestAccessContext,
+        showHoverPreview: showHoverPreview
       });
     case 'not_found':
       if (onError) {
@@ -125,7 +126,8 @@ export var InlineCard = function InlineCard(_ref) {
         isSelected: isSelected,
         message: "Can't find link",
         onClick: handleFrameClick,
-        testId: testIdWithStatus || 'inline-card-not-found-view'
+        testId: testIdWithStatus || 'inline-card-not-found-view',
+        showHoverPreview: showHoverPreview
       });
     case 'fallback':
     case 'errored':

package/dist/types/view/RedesignedInlineCard/ErroredView/index.d.ts

@@ -13,6 +13,8 @@ export interface InlineCardErroredViewProps {
     /** A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests */
     testId?: string;
     icon?: React.ReactNode;
+    /** Enables showing a custom preview on hover of link */
+    showHoverPreview?: boolean;
 }
 export declare class InlineCardErroredView extends React.Component<InlineCardErroredViewProps> {
     private frameRef;

package/dist/types/view/RedesignedInlineCard/ForbiddenView/index.d.ts

@@ -16,6 +16,8 @@ export interface InlineCardForbiddenViewProps {
     /** A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests */
     testId?: string;
     requestAccessContext?: RequestAccessContextProps;
+    /** Enables showing a custom preview on hover of link */
+    showHoverPreview?: boolean;
 }
 export declare class InlineCardForbiddenView extends React.Component<InlineCardForbiddenViewProps> {
     private frameRef;

package/dist/types/view/types.d.ts

@@ -22,6 +22,7 @@ export interface RequestAccessContextProps extends AccessContext {
     descriptiveMessageKey?: RequestAccessMessageKey;
     titleMessageKey?: RequestAccessMessageKey;
     hostname?: string;
+    buttonDisabled?: boolean;
 }
 export type InlinePreloaderStyle = 'on-left-with-skeleton' | 'on-right-without-skeleton';
 export type ErrorCardType = 'errored' | 'fallback' | 'forbidden' | 'not_found' | 'unauthorized';

package/dist/types-ts4.5/view/RedesignedInlineCard/ErroredView/index.d.ts

@@ -13,6 +13,8 @@ export interface InlineCardErroredViewProps {
     /** A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests */
     testId?: string;
     icon?: React.ReactNode;
+    /** Enables showing a custom preview on hover of link */
+    showHoverPreview?: boolean;
 }
 export declare class InlineCardErroredView extends React.Component<InlineCardErroredViewProps> {
     private frameRef;

package/dist/types-ts4.5/view/RedesignedInlineCard/ForbiddenView/index.d.ts

@@ -16,6 +16,8 @@ export interface InlineCardForbiddenViewProps {
     /** A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests */
     testId?: string;
     requestAccessContext?: RequestAccessContextProps;
+    /** Enables showing a custom preview on hover of link */
+    showHoverPreview?: boolean;
 }
 export declare class InlineCardForbiddenView extends React.Component<InlineCardForbiddenViewProps> {
     private frameRef;

package/dist/types-ts4.5/view/types.d.ts

@@ -22,6 +22,7 @@ export interface RequestAccessContextProps extends AccessContext {
     descriptiveMessageKey?: RequestAccessMessageKey;
     titleMessageKey?: RequestAccessMessageKey;
     hostname?: string;
+    buttonDisabled?: boolean;
 }
 export type InlinePreloaderStyle = 'on-left-with-skeleton' | 'on-right-without-skeleton';
 export type ErrorCardType = 'errored' | 'fallback' | 'forbidden' | 'not_found' | 'unauthorized';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "26.32.0",
+  "version": "26.33.0",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"