@atlaskit/smart-card 26.28.2 → 26.29.0

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

package/dist/types/view/HoverCard/components/views/forbidden/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { HoverCardForbiddenProps } from './types';
+declare const HoverCardForbiddenView: React.FC<HoverCardForbiddenProps>;
+export default HoverCardForbiddenView;

package/dist/types/view/HoverCard/components/views/forbidden/styled.d.ts

@@ -0,0 +1,3 @@
+export declare const titleBlockStyles: import("@emotion/react").SerializedStyles;
+export declare const mainTextStyles: import("@emotion/react").SerializedStyles;
+export declare const connectButtonStyles: import("@emotion/react").SerializedStyles;

package/dist/types/view/HoverCard/components/views/forbidden/types.d.ts

@@ -0,0 +1,13 @@
+import { FlexibleCardProps } from '../../../../FlexibleCard/types';
+export type HoverCardForbiddenProps = {
+    /**
+     * Data required for rendering a Flexible Card
+     */
+    flexibleCardProps: FlexibleCardProps;
+    /**
+     * 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;
+};

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

@@ -8,4 +8,4 @@ export declare const HoverCardContainer: import("@emotion/react").SerializedStyl
 export declare const titleBlockCss: import("@emotion/react").SerializedStyles;
 export declare const getTransitionStyles: (snippetHeight: number) => import("@emotion/react").SerializedStyles;
 export declare const popupContainerStyles: import("@emotion/react").SerializedStyles;
-export declare const getPreviewBlockStyles: (snippetHeight: number) => import("@emotion/react").SerializedStyles;
+export declare const getPreviewBlockStyles: (previewHeight?: number) => import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/view/HoverCard/components/views/forbidden/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { HoverCardForbiddenProps } from './types';
+declare const HoverCardForbiddenView: React.FC<HoverCardForbiddenProps>;
+export default HoverCardForbiddenView;

package/dist/types-ts4.5/view/HoverCard/components/views/forbidden/styled.d.ts

@@ -0,0 +1,3 @@
+export declare const titleBlockStyles: import("@emotion/react").SerializedStyles;
+export declare const mainTextStyles: import("@emotion/react").SerializedStyles;
+export declare const connectButtonStyles: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/view/HoverCard/components/views/forbidden/types.d.ts

@@ -0,0 +1,13 @@
+import { FlexibleCardProps } from '../../../../FlexibleCard/types';
+export type HoverCardForbiddenProps = {
+    /**
+     * Data required for rendering a Flexible Card
+     */
+    flexibleCardProps: FlexibleCardProps;
+    /**
+     * 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;
+};

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

@@ -8,4 +8,4 @@ export declare const HoverCardContainer: import("@emotion/react").SerializedStyl
 export declare const titleBlockCss: import("@emotion/react").SerializedStyles;
 export declare const getTransitionStyles: (snippetHeight: number) => import("@emotion/react").SerializedStyles;
 export declare const popupContainerStyles: import("@emotion/react").SerializedStyles;
-export declare const getPreviewBlockStyles: (snippetHeight: number) => import("@emotion/react").SerializedStyles;
+export declare const getPreviewBlockStyles: (previewHeight?: number) => import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "26.28.2",
+  "version": "26.29.0",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -37,9 +37,9 @@
     "@atlaskit/in-product-testing": "^0.2.0",
     "@atlaskit/link-analytics": "^8.3.0",
     "@atlaskit/link-client-extension": "^1.7.0",
-    "@atlaskit/link-extractors": "^1.1.0",
+    "@atlaskit/link-extractors": "^1.2.0",
     "@atlaskit/linking-common": "^4.10.0",
-    "@atlaskit/linking-types": "^8.3.0",
+    "@atlaskit/linking-types": "^8.4.0",
     "@atlaskit/logo": "^13.14.0",
     "@atlaskit/lozenge": "^11.4.0",
     "@atlaskit/modal-dialog": "^12.7.0",
@@ -154,6 +154,9 @@
     },
     "platform.linking-platform.smart-card.iframes-allow-storage-access-by-user-activation": {
       "type": "boolean"
+    },
+    "platform.linking-platform.smart-card.cross-join": {
+      "type": "boolean"
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"