@atlaskit/smart-card 26.33.2 → 26.34.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/smart-card
 
+## 26.34.1
+
+### Patch Changes
+
+- [#41295](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41295) [`d18dc7aba6d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d18dc7aba6d) - [ux] Update embed unauth view styling (behind feature flag)
+
+## 26.34.0
+
+### Minor Changes
+
+- [#41278](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41278) [`abf3bed4cf2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/abf3bed4cf2) - Flexible-UI: add isDisabled option to action items to show disabled view and disable clicks on button
+
 ## 26.33.2
 
 ### Patch Changes

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

package/dist/cjs/utils/mocks.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.waitFor = exports.mocks = exports.mockContext = exports.mockByUrl = exports.mockAnalytics = exports.fakeResponse = exports.fakeFactory = void 0;
+exports.waitFor = exports.mocks = exports.mockGenerator = exports.mockContext = exports.mockByUrl = exports.mockAnalytics = exports.fakeResponse = exports.fakeFactory = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -23,6 +23,11 @@ var mockContext = exports.mockContext = {
   atlassian: 'https://schema.atlassian.com/ns/vocabulary#',
   schema: 'http://schema.org/'
 };
+var mockGenerator = exports.mockGenerator = {
+  '@type': 'Application',
+  '@id': 'https://www.atlassian.com/#Jira',
+  name: 'Jira'
+};
 var mockByUrl = exports.mockByUrl = function mockByUrl(url) {
   return {
     meta: {

package/dist/cjs/utils/token.js

@@ -4,6 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.tokens = void 0;
+/**
+ * @private
+ * @deprecated {@link https://product-fabric.atlassian.net/browse/EDM-8175 Internal documentation for deprecation (no external access)}\
+ * @deprecated Use the token directly in the file
+ */
 var tokens = exports.tokens = {
   actionIcon: "var(--ds-icon, #44546F)",
   background: "var(--ds-surface-raised, #FFFFFF)",

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

@@ -24,6 +24,7 @@ var _UnauthorisedView = require("./views/UnauthorisedView");
 var _ErroredView = require("./views/ErroredView");
 var _forbiddenView = _interopRequireDefault(require("./views/forbidden-view"));
 var _notFoundView = _interopRequireDefault(require("./views/not-found-view"));
+var _unauthorizedView = _interopRequireDefault(require("./views/unauthorized-view"));
 var EmbedCard = exports.EmbedCard = /*#__PURE__*/_react.default.forwardRef(function (_ref, iframeRef) {
   var _details$meta, _forbiddenViewProps$c3;
   var url = _ref.url,
@@ -110,6 +111,19 @@ var EmbedCard = exports.EmbedCard = /*#__PURE__*/_react.default.forwardRef(funct
         });
       }
       var unauthorisedViewProps = (0, _embed.extractEmbedProps)(data, meta, platform);
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.cross-join')) {
+        return /*#__PURE__*/_react.default.createElement(_unauthorizedView.default, {
+          analytics: analytics,
+          context: unauthorisedViewProps.context,
+          extensionKey: extensionKey,
+          inheritDimensions: inheritDimensions,
+          isSelected: isSelected,
+          onAuthorize: handleAuthorize,
+          onClick: handleFrameClick,
+          testId: testId,
+          url: unauthorisedViewProps.link
+        });
+      }
       return /*#__PURE__*/_react.default.createElement(_UnauthorisedView.EmbedCardUnauthorisedView, (0, _extends2.default)({}, unauthorisedViewProps, {
         isSelected: isSelected,
         onAuthorise: handleAuthorize,
@@ -149,7 +163,7 @@ var EmbedCard = exports.EmbedCard = /*#__PURE__*/_react.default.forwardRef(funct
           context: forbiddenViewProps.context,
           inheritDimensions: inheritDimensions,
           isSelected: isSelected,
-          onAuthorise: handleAuthorize,
+          onAuthorize: handleAuthorize,
           onClick: handleFrameClick,
           accessContext: accessContext,
           url: forbiddenViewProps.link

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

@@ -15,6 +15,10 @@ var _UnauthorisedViewContent = _interopRequireDefault(require("../../common/Unau
 var _utils = require("../utils");
 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; }
+/**
+ * @deprecated {@link https://product-fabric.atlassian.net/browse/EDM-7977 Internal documentation for deprecation (no external access)}\
+ * @deprecated Replaced by unauthorized-view
+ */
 var EmbedCardUnauthorisedView = exports.EmbedCardUnauthorisedView = function EmbedCardUnauthorisedView(_ref) {
   var analytics = _ref.analytics,
     link = _ref.link,

package/dist/cjs/view/EmbedCard/views/forbidden-view/index.js

@@ -16,12 +16,12 @@ var _messages = require("../../../../messages");
 var _intlUtils = require("../../../../utils/intl-utils");
 var _unresolvedView = _interopRequireDefault(require("../unresolved-view"));
 var _utils = require("../../utils");
-var _excluded = ["context", "onAuthorise", "accessContext", "testId"];
+var _excluded = ["context", "onAuthorize", "accessContext", "testId"];
 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 ForbiddenView = function ForbiddenView(_ref) {
   var context = _ref.context,
-    onAuthorise = _ref.onAuthorise,
+    onAuthorize = _ref.onAuthorize,
     accessContext = _ref.accessContext,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'embed-card-forbidden-view' : _ref$testId,
@@ -55,7 +55,7 @@ var ForbiddenView = function ForbiddenView(_ref) {
    */
   var button = (0, _react.useMemo)(function () {
     var _action$promise;
-    var onEmbedCardClick = (_action$promise = action === null || action === void 0 ? void 0 : action.promise) !== null && _action$promise !== void 0 ? _action$promise : onAuthorise;
+    var onEmbedCardClick = (_action$promise = action === null || action === void 0 ? void 0 : action.promise) !== null && _action$promise !== void 0 ? _action$promise : onAuthorize;
     if (!onEmbedCardClick) {
       return null;
     }
@@ -67,7 +67,7 @@ var ForbiddenView = function ForbiddenView(_ref) {
     }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, (0, _intlUtils.toMessage)(_messages.messages.try_another_account, callToActionMessageKey), {
       values: values
     })));
-  }, [accessType, action === null || action === void 0 ? void 0 : action.id, action === null || action === void 0 ? void 0 : action.promise, callToActionMessageKey, onAuthorise, values]);
+  }, [accessType, action === null || action === void 0 ? void 0 : action.id, action === null || action === void 0 ? void 0 : action.promise, callToActionMessageKey, onAuthorize, values]);
   return /*#__PURE__*/_react.default.createElement(_unresolvedView.default, (0, _extends2.default)({}, unresolvedViewProps, {
     icon: icon,
     image: image !== null && image !== void 0 ? image : (0, _utils.getUnresolvedEmbedCardImage)('forbidden'),

package/dist/cjs/view/EmbedCard/views/unauthorized-view/index.js

@@ -0,0 +1,100 @@
+"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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _button = _interopRequireDefault(require("@atlaskit/button"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _reactMagneticDi = require("react-magnetic-di");
+var _messages = require("../../../../messages");
+var _UnauthorisedViewContent = _interopRequireDefault(require("../../../common/UnauthorisedViewContent"));
+var _utils = require("../../utils");
+var _unresolvedView = _interopRequireDefault(require("../unresolved-view"));
+var _excluded = ["analytics", "context", "extensionKey", "onAuthorize", "testId"];
+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 UnauthorizedView = function UnauthorizedView(_ref) {
+  var _context$image;
+  var analytics = _ref.analytics,
+    context = _ref.context,
+    extensionKey = _ref.extensionKey,
+    onAuthorize = _ref.onAuthorize,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'embed-card-unauthorized-view' : _ref$testId,
+    unresolvedViewProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var handleOnAuthorizeClick = (0, _react.useCallback)(function () {
+    if (onAuthorize) {
+      analytics.track.appAccountAuthStarted({
+        extensionKey: extensionKey
+      });
+      onAuthorize();
+    }
+  }, [onAuthorize, analytics.track, extensionKey]);
+  var content = (0, _react.useMemo)(function () {
+    if (onAuthorize) {
+      var _context$text;
+      // Our title and button messages always expect the product name to be present
+      // while the description support when product name is not present.
+      // To be looked at https://product-fabric.atlassian.net/browse/EDM-8173
+      var _values = {
+        context: (_context$text = context === null || context === void 0 ? void 0 : context.text) !== null && _context$text !== void 0 ? _context$text : ''
+      };
+      if (_values) {
+        // title: Connect your {context} account
+        // button: Connect to {context}
+        return {
+          title: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages.connect_link_account_card_name, {
+            values: _values
+          })),
+          description: /*#__PURE__*/_react.default.createElement(_UnauthorisedViewContent.default, {
+            analytics: analytics,
+            providerName: context === null || context === void 0 ? void 0 : context.text,
+            testId: testId
+          }),
+          button: /*#__PURE__*/_react.default.createElement(_button.default, {
+            testId: "connect-account",
+            appearance: "primary",
+            onClick: handleOnAuthorizeClick
+          }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages.connect_unauthorised_account_action, {
+            values: _values
+          })))
+        };
+      }
+    }
+    var values = context !== null && context !== void 0 && context.text ? {
+      context: context === null || context === void 0 ? void 0 : context.text
+    } : undefined;
+    if (values) {
+      // title: We can't display private pages from {context}
+      // description: You're trying to preview a link to a private {context} page. We recommend you review the URL or contact the page owner.
+      return {
+        title: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages.unauthorised_account_name, {
+          values: values
+        })),
+        description: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages.unauthorised_account_description, {
+          values: values
+        }))
+      };
+    }
+
+    // title: We can't display private pages
+    // description: You're trying to preview a link to a private page. We recommend you review the URL or contact the page owner.
+    return {
+      title: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.unauthorised_account_name_no_provider),
+      description: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.unauthorised_account_description_no_provider)
+    };
+  }, [analytics, context === null || context === void 0 ? void 0 : context.text, handleOnAuthorizeClick, onAuthorize, testId]);
+  return /*#__PURE__*/_react.default.createElement(_unresolvedView.default, (0, _extends2.default)({}, unresolvedViewProps, content, {
+    icon: context === null || context === void 0 ? void 0 : context.icon,
+    image: (_context$image = context === null || context === void 0 ? void 0 : context.image) !== null && _context$image !== void 0 ? _context$image : (0, _utils.getUnresolvedEmbedCardImage)('unauthorized'),
+    testId: testId,
+    text: context === null || context === void 0 ? void 0 : context.text
+  }));
+};
+var _default = exports.default = UnauthorizedView;

package/dist/cjs/view/EmbedCard/views/unauthorized-view/types.js

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

package/dist/cjs/view/FlexibleCard/components/actions/action/action-button/index.js

@@ -41,7 +41,8 @@ var ActionButton = function ActionButton(_ref) {
     overrideCss = _ref.overrideCss,
     size = _ref.size,
     testId = _ref.testId,
-    tooltipMessage = _ref.tooltipMessage;
+    tooltipMessage = _ref.tooltipMessage,
+    isDisabled = _ref.isDisabled;
   var iconOnly = !content;
   var onButtonClick = (0, _react.useCallback)(function (handler) {
     return function (e) {
@@ -70,7 +71,8 @@ var ActionButton = function ActionButton(_ref) {
     iconBefore: iconBefore,
     onClick: onButtonClick(onClick),
     spacing: _utils.sizeToButtonSpacing[size],
-    testId: testId
+    testId: testId,
+    isDisabled: isDisabled
   }, content)));
 };
 var _default = exports.default = ActionButton;

package/dist/cjs/view/FlexibleCard/components/actions/action/action-icon/index.js

@@ -9,7 +9,6 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _constants = require("../../../../../../constants");
-var _token = require("../../../../../../utils/token");
 var _utils = require("../../../utils");
 var _templateObject;
 /** @jsx jsx */
@@ -24,15 +23,16 @@ var getIconWidth = function getIconWidth(size) {
       return '1rem';
   }
 };
-var getIconStyles = function getIconStyles(size) {
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  ", ";\n"])), _token.tokens.actionIcon, (0, _utils.getIconSizeStyles)(getIconWidth(size)));
+var getIconStyles = function getIconStyles(size, isDisabled) {
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  ", ";\n"])), isDisabled ? "var(--ds-text-disabled, #6B778C)" : "var(--ds-icon, #44546F)", (0, _utils.getIconSizeStyles)(getIconWidth(size)));
 };
 var ActionIcon = function ActionIcon(_ref) {
   var size = _ref.size,
     testId = _ref.testId,
-    icon = _ref.icon;
+    icon = _ref.icon,
+    isDisabled = _ref.isDisabled;
   return (0, _react2.jsx)("span", {
-    css: getIconStyles(size),
+    css: getIconStyles(size, isDisabled),
     "data-testid": "".concat(testId, "-icon")
   }, icon);
 };

package/dist/cjs/view/FlexibleCard/components/actions/action/index.js

@@ -37,11 +37,13 @@ var Action = function Action(_ref) {
     iconPosition = _ref$iconPosition === void 0 ? 'before' : _ref$iconPosition,
     tooltipMessage = _ref.tooltipMessage,
     asDropDownItem = _ref.asDropDownItem,
-    overrideCss = _ref.overrideCss;
+    overrideCss = _ref.overrideCss,
+    isDisabled = _ref.isDisabled;
   if (!onClick) {
     return null;
   }
   var actionIcon = icon && (0, _react2.jsx)(_actionIcon.default, {
+    isDisabled: isDisabled,
     icon: icon,
     size: size,
     testId: testId
@@ -68,7 +70,8 @@ var Action = function Action(_ref) {
       overrideCss: overrideCss,
       size: size,
       testId: testId,
-      tooltipMessage: tooltipMessage || content
+      tooltipMessage: tooltipMessage || content,
+      isDisabled: isDisabled
     });
   }
 };

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

@@ -13,7 +13,7 @@ var _react = require("@emotion/react");
 var _react2 = _interopRequireWildcard(require("react"));
 var Actions = _interopRequireWildcard(require("../../../actions"));
 var _utils = require("../../utils");
-var _excluded = ["name", "hideContent", "hideIcon", "onClick"];
+var _excluded = ["name", "hideContent", "hideIcon", "onClick", "isDisabled"];
 /** @jsx jsx */
 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; }
@@ -29,6 +29,7 @@ var ActionGroupItem = function ActionGroupItem(_ref) {
     hideContent = item.hideContent,
     hideIcon = item.hideIcon,
     onClick = item.onClick,
+    isDisabled = item.isDisabled,
     props = (0, _objectWithoutProperties2.default)(item, _excluded);
   var handleOnClick = (0, _react2.useCallback)(function () {
     if (onActionItemClick) {
@@ -54,7 +55,8 @@ var ActionGroupItem = function ActionGroupItem(_ref) {
     asDropDownItem: asDropDownItems,
     size: size,
     appearance: appearance,
-    onClick: handleOnClick
+    onClick: handleOnClick,
+    isDisabled: isDisabled
   }, actionProps));
   if (!(0, _utils.isJSXElementNull)(action)) {
     return action;

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

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

package/dist/es2019/utils/mocks.js

@@ -4,6 +4,11 @@ export const mockContext = {
   atlassian: 'https://schema.atlassian.com/ns/vocabulary#',
   schema: 'http://schema.org/'
 };
+export const mockGenerator = {
+  '@type': 'Application',
+  '@id': 'https://www.atlassian.com/#Jira',
+  name: 'Jira'
+};
 export const mockByUrl = url => {
   return {
     meta: {

package/dist/es2019/utils/token.js

@@ -1,3 +1,8 @@
+/**
+ * @private
+ * @deprecated {@link https://product-fabric.atlassian.net/browse/EDM-8175 Internal documentation for deprecation (no external access)}\
+ * @deprecated Use the token directly in the file
+ */
 export const tokens = {
   actionIcon: "var(--ds-icon, #44546F)",
   background: "var(--ds-surface-raised, #FFFFFF)",

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

@@ -17,6 +17,7 @@ import { EmbedCardUnauthorisedView } from './views/UnauthorisedView';
 import { EmbedCardErroredView } from './views/ErroredView';
 import ForbiddenView from './views/forbidden-view';
 import NotFoundView from './views/not-found-view';
+import UnauthorizedView from './views/unauthorized-view';
 export const EmbedCard = /*#__PURE__*/React.forwardRef(({
   url,
   cardState: {
@@ -105,6 +106,19 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
         });
       }
       const unauthorisedViewProps = extractEmbedProps(data, meta, platform);
+      if (getBooleanFF('platform.linking-platform.smart-card.cross-join')) {
+        return /*#__PURE__*/React.createElement(UnauthorizedView, {
+          analytics: analytics,
+          context: unauthorisedViewProps.context,
+          extensionKey: extensionKey,
+          inheritDimensions: inheritDimensions,
+          isSelected: isSelected,
+          onAuthorize: handleAuthorize,
+          onClick: handleFrameClick,
+          testId: testId,
+          url: unauthorisedViewProps.link
+        });
+      }
       return /*#__PURE__*/React.createElement(EmbedCardUnauthorisedView, _extends({}, unauthorisedViewProps, {
         isSelected: isSelected,
         onAuthorise: handleAuthorize,
@@ -144,7 +158,7 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
           context: forbiddenViewProps.context,
           inheritDimensions: inheritDimensions,
           isSelected: isSelected,
-          onAuthorise: handleAuthorize,
+          onAuthorize: handleAuthorize,
           onClick: handleFrameClick,
           accessContext: accessContext,
           url: forbiddenViewProps.link

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

@@ -5,6 +5,10 @@ import { ExpandedFrame } from '../components/ExpandedFrame';
 import { ImageIcon } from '../components/ImageIcon';
 import UnauthorisedViewContent from '../../common/UnauthorisedViewContent';
 import { getUnresolvedEmbedCardImage } from '../utils';
+/**
+ * @deprecated {@link https://product-fabric.atlassian.net/browse/EDM-7977 Internal documentation for deprecation (no external access)}\
+ * @deprecated Replaced by unauthorized-view
+ */
 export const EmbedCardUnauthorisedView = ({
   analytics,
   link,

package/dist/es2019/view/EmbedCard/views/forbidden-view/index.js

@@ -9,7 +9,7 @@ import UnresolvedView from '../unresolved-view';
 import { getUnresolvedEmbedCardImage } from '../../utils';
 const ForbiddenView = ({
   context,
-  onAuthorise,
+  onAuthorize,
   accessContext,
   testId = 'embed-card-forbidden-view',
   ...unresolvedViewProps
@@ -44,7 +44,7 @@ const ForbiddenView = ({
    */
   const button = useMemo(() => {
     var _action$promise;
-    const onEmbedCardClick = (_action$promise = action === null || action === void 0 ? void 0 : action.promise) !== null && _action$promise !== void 0 ? _action$promise : onAuthorise;
+    const onEmbedCardClick = (_action$promise = action === null || action === void 0 ? void 0 : action.promise) !== null && _action$promise !== void 0 ? _action$promise : onAuthorize;
     if (!onEmbedCardClick) {
       return null;
     }
@@ -56,7 +56,7 @@ const ForbiddenView = ({
     }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, toMessage(messages.try_another_account, callToActionMessageKey), {
       values: values
     })));
-  }, [accessType, action === null || action === void 0 ? void 0 : action.id, action === null || action === void 0 ? void 0 : action.promise, callToActionMessageKey, onAuthorise, values]);
+  }, [accessType, action === null || action === void 0 ? void 0 : action.id, action === null || action === void 0 ? void 0 : action.promise, callToActionMessageKey, onAuthorize, values]);
   return /*#__PURE__*/React.createElement(UnresolvedView, _extends({}, unresolvedViewProps, {
     icon: icon,
     image: image !== null && image !== void 0 ? image : getUnresolvedEmbedCardImage('forbidden'),

package/dist/es2019/view/EmbedCard/views/unauthorized-view/index.js

@@ -0,0 +1,88 @@
+import _extends from "@babel/runtime/helpers/extends";
+import Button from '@atlaskit/button';
+import React, { useCallback, useMemo } from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { di } from 'react-magnetic-di';
+import { messages } from '../../../../messages';
+import UnauthorisedViewContent from '../../../common/UnauthorisedViewContent';
+import { getUnresolvedEmbedCardImage } from '../../utils';
+import UnresolvedView from '../unresolved-view';
+const UnauthorizedView = ({
+  analytics,
+  context,
+  extensionKey,
+  onAuthorize,
+  testId = 'embed-card-unauthorized-view',
+  ...unresolvedViewProps
+}) => {
+  var _context$image;
+  const handleOnAuthorizeClick = useCallback(() => {
+    if (onAuthorize) {
+      analytics.track.appAccountAuthStarted({
+        extensionKey
+      });
+      onAuthorize();
+    }
+  }, [onAuthorize, analytics.track, extensionKey]);
+  const content = useMemo(() => {
+    if (onAuthorize) {
+      var _context$text;
+      // Our title and button messages always expect the product name to be present
+      // while the description support when product name is not present.
+      // To be looked at https://product-fabric.atlassian.net/browse/EDM-8173
+      const values = {
+        context: (_context$text = context === null || context === void 0 ? void 0 : context.text) !== null && _context$text !== void 0 ? _context$text : ''
+      };
+      if (values) {
+        // title: Connect your {context} account
+        // button: Connect to {context}
+        return {
+          title: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_link_account_card_name, {
+            values: values
+          })),
+          description: /*#__PURE__*/React.createElement(UnauthorisedViewContent, {
+            analytics: analytics,
+            providerName: context === null || context === void 0 ? void 0 : context.text,
+            testId: testId
+          }),
+          button: /*#__PURE__*/React.createElement(Button, {
+            testId: "connect-account",
+            appearance: "primary",
+            onClick: handleOnAuthorizeClick
+          }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_unauthorised_account_action, {
+            values: values
+          })))
+        };
+      }
+    }
+    const values = context !== null && context !== void 0 && context.text ? {
+      context: context === null || context === void 0 ? void 0 : context.text
+    } : undefined;
+    if (values) {
+      // title: We can't display private pages from {context}
+      // description: You're trying to preview a link to a private {context} page. We recommend you review the URL or contact the page owner.
+      return {
+        title: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.unauthorised_account_name, {
+          values: values
+        })),
+        description: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.unauthorised_account_description, {
+          values: values
+        }))
+      };
+    }
+
+    // title: We can't display private pages
+    // description: You're trying to preview a link to a private page. We recommend you review the URL or contact the page owner.
+    return {
+      title: /*#__PURE__*/React.createElement(FormattedMessage, messages.unauthorised_account_name_no_provider),
+      description: /*#__PURE__*/React.createElement(FormattedMessage, messages.unauthorised_account_description_no_provider)
+    };
+  }, [analytics, context === null || context === void 0 ? void 0 : context.text, handleOnAuthorizeClick, onAuthorize, testId]);
+  return /*#__PURE__*/React.createElement(UnresolvedView, _extends({}, unresolvedViewProps, content, {
+    icon: context === null || context === void 0 ? void 0 : context.icon,
+    image: (_context$image = context === null || context === void 0 ? void 0 : context.image) !== null && _context$image !== void 0 ? _context$image : getUnresolvedEmbedCardImage('unauthorized'),
+    testId: testId,
+    text: context === null || context === void 0 ? void 0 : context.text
+  }));
+};
+export default UnauthorizedView;

package/dist/es2019/view/EmbedCard/views/unauthorized-view/types.js

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

package/dist/es2019/view/FlexibleCard/components/actions/action/action-button/index.js

@@ -55,7 +55,8 @@ const ActionButton = ({
   overrideCss,
   size,
   testId,
-  tooltipMessage
+  tooltipMessage,
+  isDisabled
 }) => {
   const iconOnly = !content;
   const onButtonClick = useCallback(handler => e => {
@@ -83,7 +84,8 @@ const ActionButton = ({
     iconBefore: iconBefore,
     onClick: onButtonClick(onClick),
     spacing: sizeToButtonSpacing[size],
-    testId: testId
+    testId: testId,
+    isDisabled: isDisabled
   }, content)));
 };
 export default ActionButton;

package/dist/es2019/view/FlexibleCard/components/actions/action/action-icon/index.js

@@ -2,7 +2,6 @@
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { SmartLinkSize } from '../../../../../../constants';
-import { tokens } from '../../../../../../utils/token';
 import { getIconSizeStyles } from '../../../utils';
 const getIconWidth = size => {
   switch (size) {
@@ -15,16 +14,17 @@ const getIconWidth = size => {
       return '1rem';
   }
 };
-const getIconStyles = size => css`
-  color: ${tokens.actionIcon};
+const getIconStyles = (size, isDisabled) => css`
+  color: ${isDisabled ? "var(--ds-text-disabled, #6B778C)" : "var(--ds-icon, #44546F)"};
   ${getIconSizeStyles(getIconWidth(size))};
 `;
 const ActionIcon = ({
   size,
   testId,
-  icon
+  icon,
+  isDisabled
 }) => jsx("span", {
-  css: getIconStyles(size),
+  css: getIconStyles(size, isDisabled),
   "data-testid": `${testId}-icon`
 }, icon);
 export default ActionIcon;