@atlaskit/smart-card 26.28.2 → 26.30.0

package/dist/es2019/view/FlexibleCard/components/elements/icon/index.js

@@ -6,7 +6,7 @@ import { SmartLinkPosition, SmartLinkSize } from '../../../../../constants';
 import AtlaskitIcon from '../../common/atlaskit-icon';
 import ImageIcon from '../../common/image-icon';
 import { getIconSizeStyles, getIconWidth, getTruncateStyles } from '../../utils';
-const getPositionStyles = (size, position) => {
+const getPositionStyles = position => {
   switch (position) {
     case SmartLinkPosition.Center:
       return css`
@@ -20,8 +20,8 @@ const getPositionStyles = (size, position) => {
       `;
   }
 };
-const getIconStyles = (size, position, width) => css`
-  ${getPositionStyles(size, position)}
+const getIconStyles = (position, width) => css`
+  ${getPositionStyles(position)}
   ${getIconSizeStyles(width)}
 `;
 const getCustomRenderStyles = value => css`
@@ -50,7 +50,7 @@ const renderDefaultIcon = (label, testId) => jsx(LinkIcon, {
   label: label,
   testId: `${testId}-default`
 });
-const renderImageIcon = (defaultIcon, icon, url, testId) => {
+const renderImageIcon = (defaultIcon, url, testId) => {
   if (url) {
     return jsx(ImageIcon, {
       defaultIcon: defaultIcon,
@@ -79,10 +79,10 @@ const Icon = ({
 }) => {
   const element = useMemo(() => {
     const defaultIcon = renderDefaultIcon(label, testId);
-    return (render === null || render === void 0 ? void 0 : render()) || renderImageIcon(defaultIcon, icon, url, testId) || renderAtlaskitIcon(icon, label, testId) || defaultIcon;
+    return (render === null || render === void 0 ? void 0 : render()) || renderImageIcon(defaultIcon, url, testId) || renderAtlaskitIcon(icon, label, testId) || defaultIcon;
   }, [icon, label, render, testId, url]);
   const width = getIconWidth(size);
-  const styles = getIconStyles(size, position, width);
+  const styles = getIconStyles(position, width);
   const renderStyles = render ? getCustomRenderStyles(width) : undefined;
   return jsx("div", {
     css: [styles, renderStyles, overrideCss],

package/dist/es2019/view/FlexibleCard/utils.js

@@ -7,6 +7,7 @@ import { extractErrorIcon } from '../../extractors/flexible/icon';
 import { handleOnClick } from '../../utils';
 import { extractProvider } from '@atlaskit/link-extractors';
 import extractProviderIcon from '../../extractors/flexible/icon/extract-provider-icon';
+import extractPreview from '../../extractors/flexible/extract-preview';
 export const getContextByStatus = params => {
   const {
     response,
@@ -28,13 +29,15 @@ export const getContextByStatus = params => {
     case SmartLinkStatus.Errored:
     case SmartLinkStatus.Fallback:
     default:
+      const preview = extractPreview(response === null || response === void 0 ? void 0 : response.data);
       const linkIcon = extractErrorIcon(response, status);
       const provider = extractProviderIcon(response === null || response === void 0 ? void 0 : response.data);
       return {
         linkIcon,
         title: url,
         url,
-        provider
+        provider,
+        preview
       };
   }
 };

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

@@ -192,7 +192,7 @@ export const HoverCardComponent = ({
       id: id,
       source: HOVER_CARD_SOURCE
     }, jsx(HoverCardContent, hoverCardContentProps));
-  }, [initHideCard, initShowCard, filteredActions, linkState, onActionClick, renderers, showServerActions, url, id]);
+  }, [initShowCard, initHideCard, filteredActions, linkState, onActionClick, renderers, showServerActions, url, id]);
   const trigger = useCallback(triggerProps => jsx("span", {
     ref: parentSpan
   }, jsx("span", _extends({}, triggerProps, {

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

@@ -17,6 +17,8 @@ import { FormattedMessage } from 'react-intl-next';
 import { messages } from '../../../messages';
 import { fireLinkClickedEvent } from '../../../utils/analytics/click';
 import { useSmartCardState } from '../../../state/store';
+import HoverCardForbiddenView from './views/forbidden';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export const hoverCardClassName = 'smart-links-hover-preview';
 export const getCopyAction = url => ({
   name: ActionName.CustomAction,
@@ -141,6 +143,13 @@ const HoverCardContent = ({
         url: url
       });
     }
+    if (getBooleanFF('platform.linking-platform.smart-card.cross-join')) {
+      if (cardState.status === 'forbidden') {
+        return jsx(HoverCardForbiddenView, {
+          flexibleCardProps: flexibleCardProps
+        });
+      }
+    }
     if (cardState.status === 'resolved') {
       return jsx(HoverCardResolvedView, {
         id: id,

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

@@ -0,0 +1,72 @@
+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, PreviewBlock } from '../../../../FlexibleCard/components/blocks';
+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;
+  const {
+    cardState,
+    url
+  } = flexibleCardProps;
+  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 {
+    action,
+    descriptiveMessageKey,
+    titleMessageKey
+  } = 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]);
+  if (!titleMessageKey || !descriptiveMessageKey) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(FlexibleCard, _extends({}, flexibleCardProps, {
+    testId: testId
+  }), /*#__PURE__*/React.createElement(PreviewBlock, {
+    ignoreContainerPadding: true,
+    overrideCss: getPreviewBlockStyles(),
+    testId: testId
+  }), /*#__PURE__*/React.createElement(CustomBlock, {
+    overrideCss: titleBlockStyles,
+    testId: `${testId}-title`
+  }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages[titleMessageKey], {
+    values: {
+      product
+    }
+  }))), /*#__PURE__*/React.createElement(CustomBlock, {
+    overrideCss: mainTextStyles,
+    testId: `${testId}-content`
+  }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages[descriptiveMessageKey], {
+    values: {
+      product,
+      hostname
+    }
+  }))), action && /*#__PURE__*/React.createElement(CustomBlock, {
+    overrideCss: connectButtonStyles,
+    testId: `${testId}-button`
+  }, /*#__PURE__*/React.createElement(ActionGroup, {
+    items: actions,
+    appearance: "primary"
+  })));
+};
+export default HoverCardForbiddenView;

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

@@ -0,0 +1,17 @@
+import { css } from '@emotion/react';
+const blockGap = '0rem';
+const titleFontWeight = '600';
+export const titleBlockStyles = css`
+  justify-content: center;
+  font-weight: ${titleFontWeight};
+`;
+export const mainTextStyles = css`
+  justify-content: center;
+  margin-top: ${blockGap};
+  font-size: 0.75rem;
+  text-align: center;
+`;
+export const connectButtonStyles = css`
+  justify-content: center;
+  margin-top: ${blockGap};
+`;

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

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

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

@@ -49,8 +49,6 @@ const HoverCardResolvedView = ({
   flexibleCardProps,
   titleBlockProps,
   analytics,
-  id = '',
-  url,
   cardState,
   cardActions = [],
   onActionClick,

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

@@ -76,8 +76,9 @@ export const popupContainerStyles = css`
   dark: "var(--ds-shadow-overlay, 0px 0px 0px rgba(188, 214, 240, 0.12),0px 8px 12px rgba(3, 4, 4, 0.36),0px 0px 1px rgba(3, 4, 4, 0.5))"
 })()};
 `;
-export const getPreviewBlockStyles = snippetHeight => css`
-  height: ${snippetHeight}px;
+export const getPreviewBlockStyles = previewHeight => css`
+  ${previewHeight ? `height: ${previewHeight}px;` : ''}
+
   ${getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? `  border-top-left-radius: ${"var(--ds-border-radius-200, 8px)"};
          border-top-right-radius: ${"var(--ds-border-radius-200, 8px)"};
          margin-bottom: ${blockGap};

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.28.2",
+  packageVersion: "26.30.0",
   componentName: 'linkUrl'
 };
 const Link = withLinkClickedEvent('a');

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

@@ -96,7 +96,8 @@ export var extractRequestAccessContextImproved = function extractRequestAccessCo
       });
     case 'FORBIDDEN':
       return _objectSpread(_objectSpread({}, jsonLd === null || jsonLd === void 0 ? void 0 : jsonLd.requestAccess), {}, {
-        descriptiveMessageKey: 'forbidden_description'
+        titleMessageKey: 'forbidden_title_crossjoin',
+        descriptiveMessageKey: 'forbidden_description_crossjoin'
       });
     default:
       return jsonLd === null || jsonLd === void 0 ? void 0 : jsonLd.requestAccess;

package/dist/esm/extractors/flexible/extract-preview.js

@@ -1,6 +1,9 @@
 import { extractImage } from '@atlaskit/link-extractors';
 import { MediaType } from '../../constants';
 var extractPreview = function extractPreview(data) {
+  if (!data) {
+    return undefined;
+  }
   var url = extractImage(data);
   return url ? {
     type: MediaType.Image,

package/dist/esm/messages.js

@@ -474,7 +474,7 @@ export var messages = defineMessages({
   },
   direct_access_description_crossjoin: {
     id: 'fabric.linking.direct_access_description_crossjoin',
-    defaultMessage: 'All {emailDomain} emails are approved to access {hostname} in {product}.',
+    defaultMessage: 'All accounts with your same email domain are approved to access {hostname} in {product}.',
     description: 'Informs the user that they have access to this product, and can sign up or join right away.'
   },
   direct_access_crossjoin: {
@@ -526,19 +526,15 @@ export var messages = defineMessages({
     id: 'fabric.linking.not_found_title_crossjoin',
     defaultMessage: "We can't show you this {product} page",
     description: 'Error case for when a provided link is not found'
+  },
+  forbidden_title_crossjoin: {
+    id: 'fabric.linking.forbidden_title_crossjoin',
+    defaultMessage: "You don't have access to this content",
+    description: 'Informs the user that they do not have access to the linked content.'
+  },
+  forbidden_description_crossjoin: {
+    id: 'fabric.linking.forbidden_description_crossjoin',
+    defaultMessage: 'Contact your admin to request access.',
+    description: 'Informs the user that they must contact the site administrator for access.'
   }
-
-  // Pending designs:
-  // forbidden_access_crossjoin: {
-  //   id: 'fabric.linking.forbidden_access_crossjoin',
-  //   defaultMessage: 'Your access is forbidden',
-  //   description:
-  //     'Shown when a user does not have access to a resource behind the link.',
-  // },
-  // forbidden_description_crossjoin: {
-  //   id: 'fabric.linking.forbidden_description_crossjoin',
-  //   defaultMessage:
-  //     "You don't have access to this preview. Contact the site admin if you need access.",
-  //   description: 'Informs the user that they cannot view this content.',
-  // },
 });

package/dist/esm/state/analytics/useSmartLinkAnalytics.js

@@ -14,10 +14,10 @@ var applyCommonAttributes = function applyCommonAttributes(event, commonAttribut
   if (event && event.attributes) {
     for (var _i = 0, _Object$entries = Object.entries(commonAttributes); _i < _Object$entries.length; _i++) {
       var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
-        _key = _Object$entries$_i[0],
+        key = _Object$entries$_i[0],
         value = _Object$entries$_i[1];
-      if (event.attributes[_key] === undefined) {
-        event.attributes[_key] = value;
+      if (event.attributes[key] === undefined) {
+        event.attributes[key] = value;
       }
     }
   }
@@ -254,7 +254,6 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatch
         var id = _ref6.id,
           actionType = _ref6.actionType,
           display = _ref6.display,
-          invokeType = _ref6.invokeType,
           overrideExtensionKey = _ref6.extensionKey,
           definitionId = _ref6.definitionId,
           resourceType = _ref6.resourceType,
@@ -751,7 +750,7 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatch
        * Removed in EDM-5153: This is an even from an experiment.
        * @deprecated
        */
-      linkUpdated: function linkUpdated(props) {},
+      linkUpdated: function linkUpdated() {},
       /**
        * This fires a tracking event before an action invoke api call is made
        */

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

@@ -4,9 +4,7 @@ import { AnalyticsContext } from '@atlaskit/analytics-next';
  * Provides an analytics context to supply attributes to events based on a URL
  */
 export var LinkAnalyticsContext = function LinkAnalyticsContext(_ref) {
-  var _ref$url = _ref.url,
-    url = _ref$url === void 0 ? '' : _ref$url,
-    display = _ref.display,
+  var display = _ref.display,
     id = _ref.id,
     children = _ref.children,
     source = _ref.source;

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.28.2"
+  packageVersion: "26.30.0"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/esm/utils/mocks.js

@@ -197,7 +197,8 @@ export var fakeFactory = function fakeFactory(implementation, implementationPost
     }
     _createClass(CustomClient, [{
       key: "fetchData",
-      value: function () {
+      value: // @ts-ignore
+      function () {
         var _fetchData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(url) {
           return _regeneratorRuntime.wrap(function _callee$(_context) {
             while (1) switch (_context.prev = _context.next) {
@@ -216,7 +217,7 @@ export var fakeFactory = function fakeFactory(implementation, implementationPost
           return _fetchData.apply(this, arguments);
         }
         return fetchData;
-      }()
+      }() // @ts-ignore
     }, {
       key: "postData",
       value: function () {
@@ -238,7 +239,7 @@ export var fakeFactory = function fakeFactory(implementation, implementationPost
           return _postData.apply(this, arguments);
         }
         return postData;
-      }()
+      }() // @ts-ignore
     }, {
       key: "prefetchData",
       value: function () {

package/dist/esm/view/BlockCard/views/ResolvedView.js

@@ -53,8 +53,7 @@ export var ResolvedView = function ResolvedView(_ref) {
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'block-card-resolved-view' : _ref$testId,
     _ref$showActions = _ref.showActions,
-    showActions = _ref$showActions === void 0 ? true : _ref$showActions,
-    isSupportTheming = _ref.isSupportTheming;
+    showActions = _ref$showActions === void 0 ? true : _ref$showActions;
   var resolvedMetadata = details.length > 0 ? jsx(MetadataList, {
     testId: testId ? "".concat(testId, "-meta") : undefined,
     items: details

package/dist/esm/view/BlockCard/views/flexible/FlexibleResolvedView.js

@@ -14,8 +14,7 @@ import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardSty
  * @see FlexibleCardProps
  */
 var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
-  var id = _ref.id,
-    cardState = _ref.cardState,
+  var cardState = _ref.cardState,
     onClick = _ref.onClick,
     onError = _ref.onError,
     onResolve = _ref.onResolve,

package/dist/esm/view/FlexibleCard/components/blocks/action-group/index.js

@@ -53,8 +53,7 @@ var ActionGroup = function ActionGroup(_ref) {
     appearance = _ref.appearance,
     _ref$visibleButtonsNu = _ref.visibleButtonsNum,
     visibleButtonsNum = _ref$visibleButtonsNu === void 0 ? 2 : _ref$visibleButtonsNu,
-    onDropdownOpenChange = _ref.onDropdownOpenChange,
-    testId = _ref.testId;
+    onDropdownOpenChange = _ref.onDropdownOpenChange;
   var context = useFlexibleUiContext();
   var ui = useFlexibleUiOptionContext();
   var _useState = useState(false),

package/dist/esm/view/FlexibleCard/components/blocks/preview-block/index.js

@@ -20,9 +20,6 @@ var PreviewBlock = function PreviewBlock(_ref) {
     testId = _ref$testId === void 0 ? 'smart-block-preview' : _ref$testId,
     overrideUrl = _ref.overrideUrl,
     blockProps = _objectWithoutProperties(_ref, _excluded);
-  if (status !== SmartLinkStatus.Resolved) {
-    return null;
-  }
   return jsx(PreviewBlockResolvedView, _extends({}, blockProps, {
     testId: testId,
     overrideUrl: overrideUrl

package/dist/esm/view/FlexibleCard/components/elements/icon/index.js

@@ -8,7 +8,7 @@ import { SmartLinkPosition, SmartLinkSize } from '../../../../../constants';
 import AtlaskitIcon from '../../common/atlaskit-icon';
 import ImageIcon from '../../common/image-icon';
 import { getIconSizeStyles, getIconWidth, getTruncateStyles } from '../../utils';
-var getPositionStyles = function getPositionStyles(size, position) {
+var getPositionStyles = function getPositionStyles(position) {
   switch (position) {
     case SmartLinkPosition.Center:
       return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        align-self: center;\n      "])));
@@ -17,8 +17,8 @@ var getPositionStyles = function getPositionStyles(size, position) {
       return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        align-self: flex-start;\n        margin: 0;\n      "])));
   }
 };
-var getIconStyles = function getIconStyles(size, position, width) {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n"])), getPositionStyles(size, position), getIconSizeStyles(width));
+var getIconStyles = function getIconStyles(position, width) {
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n"])), getPositionStyles(position), getIconSizeStyles(width));
 };
 var getCustomRenderStyles = function getCustomRenderStyles(value) {
   return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n  line-height: ", ";\n  font-size: ", ";\n  text-align: center;\n  text-overflow: clip;\n  -webkit-box-orient: unset;\n  span {\n    margin: 0;\n    padding: 0;\n    vertical-align: baseline;\n  }\n"])), getTruncateStyles(1, value), value, value);
@@ -38,7 +38,7 @@ var renderDefaultIcon = function renderDefaultIcon(label, testId) {
     testId: "".concat(testId, "-default")
   });
 };
-var renderImageIcon = function renderImageIcon(defaultIcon, icon, url, testId) {
+var renderImageIcon = function renderImageIcon(defaultIcon, url, testId) {
   if (url) {
     return jsx(ImageIcon, {
       defaultIcon: defaultIcon,
@@ -70,10 +70,10 @@ var Icon = function Icon(_ref) {
     url = _ref.url;
   var element = useMemo(function () {
     var defaultIcon = renderDefaultIcon(label, testId);
-    return (render === null || render === void 0 ? void 0 : render()) || renderImageIcon(defaultIcon, icon, url, testId) || renderAtlaskitIcon(icon, label, testId) || defaultIcon;
+    return (render === null || render === void 0 ? void 0 : render()) || renderImageIcon(defaultIcon, url, testId) || renderAtlaskitIcon(icon, label, testId) || defaultIcon;
   }, [icon, label, render, testId, url]);
   var width = getIconWidth(size);
-  var styles = getIconStyles(size, position, width);
+  var styles = getIconStyles(position, width);
   var renderStyles = render ? getCustomRenderStyles(width) : undefined;
   return jsx("div", {
     css: [styles, renderStyles, overrideCss],

package/dist/esm/view/FlexibleCard/utils.js

@@ -7,6 +7,7 @@ import { extractErrorIcon } from '../../extractors/flexible/icon';
 import { handleOnClick } from '../../utils';
 import { extractProvider } from '@atlaskit/link-extractors';
 import extractProviderIcon from '../../extractors/flexible/icon/extract-provider-icon';
+import extractPreview from '../../extractors/flexible/extract-preview';
 export var getContextByStatus = function getContextByStatus(params) {
   var _ref = params !== null && params !== void 0 ? params : {},
     response = _ref.response,
@@ -27,13 +28,15 @@ export var getContextByStatus = function getContextByStatus(params) {
     case SmartLinkStatus.Errored:
     case SmartLinkStatus.Fallback:
     default:
+      var preview = extractPreview(response === null || response === void 0 ? void 0 : response.data);
       var linkIcon = extractErrorIcon(response, status);
       var provider = extractProviderIcon(response === null || response === void 0 ? void 0 : response.data);
       return {
         linkIcon: linkIcon,
         title: url,
         url: url,
-        provider: provider
+        provider: provider,
+        preview: preview
       };
   }
 };

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

@@ -208,7 +208,7 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
       id: id,
       source: HOVER_CARD_SOURCE
     }, jsx(HoverCardContent, hoverCardContentProps));
-  }, [initHideCard, initShowCard, filteredActions, linkState, onActionClick, renderers, showServerActions, url, id]);
+  }, [initShowCard, initHideCard, filteredActions, linkState, onActionClick, renderers, showServerActions, url, id]);
   var trigger = useCallback(function (triggerProps) {
     return jsx("span", {
       ref: parentSpan

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

@@ -19,6 +19,8 @@ import { FormattedMessage } from 'react-intl-next';
 import { messages } from '../../../messages';
 import { fireLinkClickedEvent } from '../../../utils/analytics/click';
 import { useSmartCardState } from '../../../state/store';
+import HoverCardForbiddenView from './views/forbidden';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export var hoverCardClassName = 'smart-links-hover-preview';
 export var getCopyAction = function getCopyAction(url) {
   return {
@@ -169,6 +171,13 @@ var HoverCardContent = function HoverCardContent(_ref) {
         url: url
       });
     }
+    if (getBooleanFF('platform.linking-platform.smart-card.cross-join')) {
+      if (cardState.status === 'forbidden') {
+        return jsx(HoverCardForbiddenView, {
+          flexibleCardProps: flexibleCardProps
+        });
+      }
+    }
     if (cardState.status === 'resolved') {
       return jsx(HoverCardResolvedView, {
         id: id,

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

@@ -0,0 +1,71 @@
+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, PreviewBlock } from '../../../../FlexibleCard/components/blocks';
+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 flexibleCardProps = _ref.flexibleCardProps,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'hover-card-forbidden-view' : _ref$testId;
+  var cardState = flexibleCardProps.cardState,
+    url = flexibleCardProps.url;
+  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({
+      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]);
+  if (!titleMessageKey || !descriptiveMessageKey) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(FlexibleCard, _extends({}, flexibleCardProps, {
+    testId: testId
+  }), /*#__PURE__*/React.createElement(PreviewBlock, {
+    ignoreContainerPadding: true,
+    overrideCss: getPreviewBlockStyles(),
+    testId: testId
+  }), /*#__PURE__*/React.createElement(CustomBlock, {
+    overrideCss: titleBlockStyles,
+    testId: "".concat(testId, "-title")
+  }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages[titleMessageKey], {
+    values: {
+      product: product
+    }
+  }))), /*#__PURE__*/React.createElement(CustomBlock, {
+    overrideCss: mainTextStyles,
+    testId: "".concat(testId, "-content")
+  }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages[descriptiveMessageKey], {
+    values: {
+      product: product,
+      hostname: hostname
+    }
+  }))), action && /*#__PURE__*/React.createElement(CustomBlock, {
+    overrideCss: connectButtonStyles,
+    testId: "".concat(testId, "-button")
+  }, /*#__PURE__*/React.createElement(ActionGroup, {
+    items: actions,
+    appearance: "primary"
+  })));
+};
+export default HoverCardForbiddenView;

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

@@ -0,0 +1,8 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3;
+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 connectButtonStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  justify-content: center;\n  margin-top: ", ";\n"])), blockGap);

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

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

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

@@ -51,9 +51,6 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
   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,

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

@@ -40,6 +40,6 @@ export var popupContainerStyles = css(_templateObject5 || (_templateObject5 = _t
   light: "var(--ds-shadow-overlay, 0px 8px 12px rgba(9, 30, 66, 0.15),0px 0px 1px rgba(9, 30, 66, 0.31))",
   dark: "var(--ds-shadow-overlay, 0px 0px 0px rgba(188, 214, 240, 0.12),0px 8px 12px rgba(3, 4, 4, 0.36),0px 0px 1px rgba(3, 4, 4, 0.5))"
 })());
-export var getPreviewBlockStyles = function getPreviewBlockStyles(snippetHeight) {
-  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  height: ", "px;\n  ", "\n"])), snippetHeight, getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "  border-top-left-radius: ".concat("var(--ds-border-radius-200, 8px)", ";\n         border-top-right-radius: ", "var(--ds-border-radius-200, 8px)", ";\n         margin-bottom: ", blockGap, ";\n        }") : "");
+export var getPreviewBlockStyles = function getPreviewBlockStyles(previewHeight) {
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n\n  ", "\n"])), previewHeight ? "height: ".concat(previewHeight, "px;") : '', getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "  border-top-left-radius: ".concat("var(--ds-border-radius-200, 8px)", ";\n         border-top-right-radius: ", "var(--ds-border-radius-200, 8px)", ";\n         margin-bottom: ", blockGap, ";\n        }") : "");
 };

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.28.2",
+  packageVersion: "26.30.0",
   componentName: 'linkUrl'
 };
 var Link = withLinkClickedEvent('a');