@atlaskit/smart-card 45.11.2 → 45.12.1

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

@@ -0,0 +1,191 @@
+"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 _react = _interopRequireWildcard(require("react"));
+var _reactIntl = require("react-intl");
+var _reactMagneticDi = require("react-magnetic-di");
+var _link = _interopRequireDefault(require("@atlaskit/icon/core/link"));
+var _smartLink = _interopRequireDefault(require("@atlaskit/icon/core/smart-link"));
+var _iconTile = _interopRequireDefault(require("@atlaskit/icon/icon-tile"));
+var _image = _interopRequireDefault(require("@atlaskit/image/image"));
+var _useAnalyticsEvents2 = require("../../../../common/analytics/generated/use-analytics-events");
+var _messages = require("../../../../messages");
+var _useRovoConfig2 = _interopRequireDefault(require("../../../../state/hooks/use-rovo-config"));
+var _carousel = _interopRequireDefault(require("../../components/carousel"));
+var _ExpandedFrame = require("../../components/ExpandedFrame");
+var _ImageIcon = require("../../components/ImageIcon");
+var _LazyRovoChatBenefitImage = _interopRequireDefault(require("./carousel-images/LazyRovoChatBenefitImage"));
+var _LazyRovoSearchBenefitImage = _interopRequireDefault(require("./carousel-images/LazyRovoSearchBenefitImage"));
+var _NoAuthAvailableImage = _interopRequireDefault(require("./carousel-images/NoAuthAvailableImage"));
+var _ProductIcon = _interopRequireDefault(require("./carousel-images/ProductIcon"));
+var _SmartLinkBenefitImage = _interopRequireDefault(require("./carousel-images/SmartLinkBenefitImage"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var PARENT_PRODUCT = {
+  ATLAS: 'ATLAS',
+  BITBUCKET: 'BITBUCKET',
+  CONFLUENCE: 'CONFLUENCE',
+  CSM: 'JIRA',
+  JPD: 'JIRA',
+  JSM: 'JIRA',
+  JSW: 'JIRA',
+  JWM: 'JIRA',
+  TRELLO: 'TRELLO'
+};
+var PRODUCT_COMPANION = {
+  ATLAS: 'ATLAS',
+  BITBUCKET: 'BITBUCKET',
+  CONFLUENCE: 'JIRA',
+  JIRA: 'CONFLUENCE',
+  TRELLO: 'TRELLO'
+};
+var UnauthorizedCarouselView = function UnauthorizedCarouselView(_ref) {
+  var context = _ref.context,
+    frameStyle = _ref.frameStyle,
+    inheritDimensions = _ref.inheritDimensions,
+    isSelected = _ref.isSelected,
+    onAuthorize = _ref.onAuthorize,
+    onClick = _ref.onClick,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'embed-card-unauthorized-view' : _ref$testId,
+    url = _ref.url;
+  var intl = (0, _reactIntl.useIntl)();
+  var _useAnalyticsEvents = (0, _useAnalyticsEvents2.useAnalyticsEvents)(),
+    fireEvent = _useAnalyticsEvents.fireEvent;
+  var _useRovoConfig = (0, _useRovoConfig2.default)(),
+    rovoOptions = _useRovoConfig.rovoOptions,
+    product = _useRovoConfig.product;
+  var canAuthorize = typeof onAuthorize === 'function';
+  var providerName = context === null || context === void 0 ? void 0 : context.text;
+  var providerIcon = (0, _react.useMemo)(function () {
+    var _ref2, _context$iconLabel;
+    var iconLabel = (_ref2 = (_context$iconLabel = context === null || context === void 0 ? void 0 : context.iconLabel) !== null && _context$iconLabel !== void 0 ? _context$iconLabel : context === null || context === void 0 ? void 0 : context.text) !== null && _ref2 !== void 0 ? _ref2 : '';
+    if (typeof (context === null || context === void 0 ? void 0 : context.icon) === 'string') {
+      return /*#__PURE__*/_react.default.createElement(_image.default, {
+        src: context.icon,
+        alt: iconLabel
+      });
+    }
+    if (context !== null && context !== void 0 && context.icon) {
+      return context.icon;
+    }
+    return /*#__PURE__*/_react.default.createElement(_iconTile.default, {
+      appearance: "blue",
+      icon: _smartLink.default,
+      label: iconLabel,
+      size: "small",
+      testId: "embed-card-fallback-icon"
+    });
+  }, [context]);
+  var items = (0, _react.useMemo)(function () {
+    if (!canAuthorize) {
+      return [{
+        title: intl.formatMessage(_messages.messages.unauthorised_account_name_no_provider),
+        description: intl.formatMessage(_messages.messages.unauthorised_account_description_no_provider),
+        image: /*#__PURE__*/_react.default.createElement(_NoAuthAvailableImage.default, null)
+      }];
+    }
+    var parentProduct = product ? PARENT_PRODUCT[product] : undefined;
+    var parentProductIcon = /*#__PURE__*/_react.default.createElement(_ProductIcon.default, {
+      product: parentProduct
+    });
+    var parentProductAlt = parentProduct ? PRODUCT_COMPANION[parentProduct] : parentProduct;
+    var parentProductIconAlt = /*#__PURE__*/_react.default.createElement(_ProductIcon.default, {
+      product: parentProductAlt
+    });
+
+    // We only have special text for Google Drive and i18n select takes only one word (no space).
+    var i18nSelectContext = (context === null || context === void 0 ? void 0 : context.text) === 'Google Drive' ? 'Google' : context === null || context === void 0 ? void 0 : context.text;
+    var slides = [{
+      title: intl.formatMessage(_messages.messages.connect_link_account_embed_carousel_sl_title),
+      description: intl.formatMessage(_messages.messages.connect_link_account_embed_carousel_sl_description, {
+        context: i18nSelectContext,
+        product: parentProduct
+      }),
+      image: /*#__PURE__*/_react.default.createElement(_SmartLinkBenefitImage.default, {
+        productIcon: parentProductIcon
+      })
+    }];
+
+    // If the link has an unauthorized status and provides an onAuthorize callback,
+    // it is likely a 3P (third-party) link and is supported by Rovo. In that case,
+    // we show additional Rovo-specific teaser slides to encourage the user to connect their account.
+    if (rovoOptions !== null && rovoOptions !== void 0 && rovoOptions.isRovoEnabled) {
+      slides.push({
+        title: intl.formatMessage(_messages.messages.connect_link_account_embed_carousel_rovo_title),
+        description: intl.formatMessage(_messages.messages.connect_link_account_embed_carousel_rovo_description, {
+          context: providerName,
+          product: parentProduct
+        }),
+        image: /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+          fallback: null
+        }, /*#__PURE__*/_react.default.createElement(_LazyRovoSearchBenefitImage.default, {
+          productIcon: parentProductIcon,
+          productIconAlt: parentProductIconAlt,
+          providerIcon: providerIcon
+        }))
+      });
+    }
+    if (rovoOptions !== null && rovoOptions !== void 0 && rovoOptions.isRovoEnabled && rovoOptions !== null && rovoOptions !== void 0 && rovoOptions.isRovoLLMEnabled) {
+      slides.push({
+        title: intl.formatMessage(_messages.messages.connect_link_account_embed_carousel_rovochat_title),
+        description: intl.formatMessage(_messages.messages.connect_link_account_embed_carousel_rovochat_description, {
+          context: providerName
+        }),
+        image: /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+          fallback: null
+        }, /*#__PURE__*/_react.default.createElement(_LazyRovoChatBenefitImage.default, {
+          productIcon: parentProductIcon,
+          productIconAlt: parentProductIconAlt,
+          providerIcon: providerIcon
+        }))
+      });
+    }
+    return slides;
+  }, [canAuthorize, context, intl, product, providerName, providerIcon, rovoOptions]);
+  var handleOnAuthorizeClick = (0, _react.useCallback)(function () {
+    if (onAuthorize) {
+      fireEvent('track.applicationAccount.authStarted', {});
+      onAuthorize();
+    }
+  }, [onAuthorize, fireEvent]);
+  var buttonLabel = context !== null && context !== void 0 && context.text ? intl.formatMessage(_messages.messages.connect_3p_account, {
+    context: context.text
+  }) : intl.formatMessage(_messages.messages.connect_link_account_card);
+  var icon = (0, _react.useMemo)(function () {
+    if ( /*#__PURE__*/_react.default.isValidElement(context === null || context === void 0 ? void 0 : context.icon)) {
+      return context.icon;
+    }
+    return /*#__PURE__*/_react.default.createElement(_ImageIcon.ImageIcon, {
+      default: /*#__PURE__*/_react.default.createElement(_link.default, {
+        label: "icon",
+        color: "currentColor"
+      }),
+      src: typeof (context === null || context === void 0 ? void 0 : context.icon) === 'string' ? context.icon : undefined
+    });
+  }, [context === null || context === void 0 ? void 0 : context.icon]);
+  return /*#__PURE__*/_react.default.createElement(_ExpandedFrame.ExpandedFrame, {
+    allowScrollBar: true,
+    frameStyle: frameStyle !== null && frameStyle !== void 0 ? frameStyle : 'show',
+    href: url,
+    icon: icon,
+    isSelected: isSelected,
+    inheritDimensions: inheritDimensions,
+    onClick: onClick,
+    setOverflow: true,
+    testId: testId,
+    text: context === null || context === void 0 ? void 0 : context.text
+  }, /*#__PURE__*/_react.default.createElement(_carousel.default, {
+    icon: context === null || context === void 0 ? void 0 : context.icon,
+    iconLabel: context === null || context === void 0 ? void 0 : context.text,
+    items: items,
+    onPrimaryButtonClick: canAuthorize ? handleOnAuthorizeClick : undefined,
+    primaryButtonLabel: buttonLabel,
+    testId: "".concat(testId, "-carousel")
+  }));
+};
+var _default = exports.default = UnauthorizedCarouselView;

package/dist/cjs/view/EmbedCard/views/unauthorized-view/carousel-images/IconSlot.compiled.css

@@ -0,0 +1,7 @@
+._18m915vq{overflow-y:hidden}
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1reo15vq{overflow-x:hidden}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}

package/dist/cjs/view/EmbedCard/views/unauthorized-view/carousel-images/IconSlot.js

@@ -0,0 +1,31 @@
+/* IconSlot.tsx generated by @compiled/babel-plugin v0.40.0 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./IconSlot.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
+var iconSlotDivStyles = null;
+var IconSlot = function IconSlot(_ref) {
+  var icon = _ref.icon,
+    x = _ref.x,
+    y = _ref.y,
+    w = _ref.w,
+    h = _ref.h;
+  if (!icon) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement("foreignObject", {
+    x: x,
+    y: y,
+    width: w,
+    height: h
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)(["_1reo15vq _18m915vq _1bsb1osq _4t3i1osq _1e0c1txw _4cvr1h6o _1bah1h6o"])
+  }, icon));
+};
+var _default = exports.default = IconSlot;

package/dist/cjs/view/EmbedCard/views/unauthorized-view/carousel-images/LazyRovoChatBenefitImage.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _react = require("react");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != (0, _typeof2.default)(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var LazyRovoChatBenefitImage = /*#__PURE__*/(0, _react.lazy)(function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require( /* webpackChunkName: "smart-card-embed-carousel-rovo-chat-benefit-image" */'./RovoChatBenefitImage'));
+  });
+});
+var _default = exports.default = LazyRovoChatBenefitImage;

package/dist/cjs/view/EmbedCard/views/unauthorized-view/carousel-images/LazyRovoSearchBenefitImage.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _react = require("react");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != (0, _typeof2.default)(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var LazyRovoSearchBenefitImage = /*#__PURE__*/(0, _react.lazy)(function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require( /* webpackChunkName: "smart-card-embed-carousel-rovo-search-benefit-image" */'./RovoSearchBenefitImage'));
+  });
+});
+var _default = exports.default = LazyRovoSearchBenefitImage;

package/dist/cjs/view/EmbedCard/views/unauthorized-view/carousel-images/NoAuthAvailableImage.compiled.css

@@ -0,0 +1,6 @@
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
+._ca0q1ejb{padding-top:var(--ds-space-300,24px)}
+._n3td1ejb{padding-bottom:var(--ds-space-300,24px)}

package/dist/cjs/view/EmbedCard/views/unauthorized-view/carousel-images/NoAuthAvailableImage.js

@@ -0,0 +1,22 @@
+/* NoAuthAvailableImage.tsx generated by @compiled/babel-plugin v0.40.0 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./NoAuthAvailableImage.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
+var _compiled = require("@atlaskit/primitives/compiled");
+var _unauthorizedSvg = require("../unauthorized-svg");
+var styles = {
+  container: "_1bsb1osq _1e0c1txw _4cvr1h6o _1bah1h6o _ca0q1ejb _n3td1ejb"
+};
+var NoAuthAvailableImage = function NoAuthAvailableImage() {
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.container
+  }, /*#__PURE__*/_react.default.createElement(_unauthorizedSvg.UnauthorizedSVG, null));
+};
+var _default = exports.default = NoAuthAvailableImage;

package/dist/cjs/view/EmbedCard/views/unauthorized-view/carousel-images/ProductIcon.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _atlassianIcon = require("@atlaskit/logo/atlassian-icon");
+var _bitbucketIcon = require("@atlaskit/logo/bitbucket-icon");
+var _confluenceIcon = require("@atlaskit/logo/confluence-icon");
+var _jiraIcon = require("@atlaskit/logo/jira-icon");
+var _icon = require("@atlaskit/logo/projects/icon");
+var _trelloIcon = require("@atlaskit/logo/trello-icon");
+var ProductIcon = function ProductIcon(_ref) {
+  var product = _ref.product,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'xsmall' : _ref$size;
+  switch (product) {
+    case 'ATLAS':
+      return /*#__PURE__*/_react.default.createElement(_icon.ProjectsIcon, {
+        size: size
+      });
+    case 'BITBUCKET':
+      return /*#__PURE__*/_react.default.createElement(_bitbucketIcon.BitbucketIcon, {
+        size: size
+      });
+    case 'CONFLUENCE':
+      return /*#__PURE__*/_react.default.createElement(_confluenceIcon.ConfluenceIcon, {
+        size: size
+      });
+    case 'JIRA':
+      return /*#__PURE__*/_react.default.createElement(_jiraIcon.JiraIcon, {
+        size: size
+      });
+    case 'TRELLO':
+      return /*#__PURE__*/_react.default.createElement(_trelloIcon.TrelloIcon, {
+        size: size
+      });
+    default:
+      return /*#__PURE__*/_react.default.createElement(_atlassianIcon.AtlassianIcon, {
+        appearance: "brand",
+        size: size
+      });
+  }
+};
+var _default = exports.default = ProductIcon;