@atlaskit/smart-card 26.40.0 → 26.41.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/smart-card
 
+## 26.41.1
+
+### Patch Changes
+
+- [#42443](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42443) [`220a7a76105`](https://bitbucket.org/atlassian/atlassian-frontend/commits/220a7a76105) - Display override content on Snippet element without link data
+
+## 26.41.0
+
+### Minor Changes
+
+- [#41654](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41654) [`dddfb1500d0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dddfb1500d0) - [ux] expermintal hover chard changes to show related urls section behind feature flag
+
 ## 26.40.0
 
 ### Minor Changes

package/dist/cjs/messages.js

@@ -542,5 +542,25 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     id: 'fabric.linking.forbidden_description_crossjoin',
     defaultMessage: 'Contact your admin to request access to {hostname}.',
     description: 'Informs the user that they must contact the site administrator for access.'
+  },
+  related_work_items_not_found: {
+    id: 'fabric.linking.related_work_items_not_found',
+    defaultMessage: 'This link is not mentioned anywhere else.',
+    description: 'Informs the user that there are no related resources for a given url'
+  },
+  last_mentioned_in: {
+    id: 'fabric.linking.last_mentioned_in',
+    defaultMessage: 'Last mentioned in',
+    description: 'Informs the user about where the resource was last mentioned in'
+  },
+  related: {
+    id: 'fabric.linking.related',
+    defaultMessage: 'Related',
+    description: 'Informs the user about related resources'
+  },
+  generic_error_message: {
+    id: 'fabric.linking.generic_error_message',
+    defaultMessage: 'An error occurred',
+    description: 'A generic error message to the user'
   }
 });

package/dist/cjs/state/hooks/use-related-urls/index.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = require("react");
+var _linkClientExtension = require("@atlaskit/link-client-extension");
+var _linkProvider = require("@atlaskit/link-provider");
+var useRelatedUrls = function useRelatedUrls() {
+  var _useSmartLinkContext = (0, _linkProvider.useSmartLinkContext)(),
+    connections = _useSmartLinkContext.connections;
+  var clientExt = (0, _linkClientExtension.useSmartLinkClientExtension)(connections.client);
+  return (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(url) {
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return clientExt.relatedUrls(url);
+          case 2:
+            return _context.abrupt("return", _context.sent);
+          case 3:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }(), [clientExt]);
+};
+var _default = exports.default = useRelatedUrls;

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

package/dist/cjs/view/FlexibleCard/components/blocks/index.js

@@ -34,6 +34,12 @@ Object.defineProperty(exports, "PreviewBlock", {
     return _previewBlock.default;
   }
 });
+Object.defineProperty(exports, "RelatedUrlsBlock", {
+  enumerable: true,
+  get: function get() {
+    return _relatedUrlsBlock.default;
+  }
+});
 Object.defineProperty(exports, "SnippetBlock", {
   enumerable: true,
   get: function get() {
@@ -52,4 +58,5 @@ var _previewBlock = _interopRequireDefault(require("./preview-block"));
 var _snippetBlock = _interopRequireDefault(require("./snippet-block"));
 var _titleBlock = _interopRequireDefault(require("./title-block"));
 var _block = _interopRequireDefault(require("./block"));
-var _resolved = _interopRequireDefault(require("./footer-block/resolved"));
+var _resolved = _interopRequireDefault(require("./footer-block/resolved"));
+var _relatedUrlsBlock = _interopRequireDefault(require("./related-urls-block"));

package/dist/cjs/view/FlexibleCard/components/blocks/related-urls-block/errored/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RelatedUrlsBlockErroredView = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _messages = require("../../../../../../messages");
+var _text = _interopRequireDefault(require("../../../elements/text"));
+var _block = _interopRequireDefault(require("../../block"));
+var _excluded = ["testId"];
+var RelatedUrlsBlockErroredView = exports.RelatedUrlsBlockErroredView = function RelatedUrlsBlockErroredView(_ref) {
+  var testId = _ref.testId,
+    blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_block.default, (0, _extends2.default)({}, blockProps, {
+    testId: testId
+  }), /*#__PURE__*/_react.default.createElement(_text.default, {
+    message: {
+      descriptor: _messages.messages.generic_error_message
+    }
+  }));
+};

package/dist/cjs/view/FlexibleCard/components/blocks/related-urls-block/errored/types.js

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

package/dist/cjs/view/FlexibleCard/components/blocks/related-urls-block/index.js

@@ -0,0 +1,99 @@
+"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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactMagneticDi = require("react-magnetic-di");
+var _react2 = require("@emotion/react");
+var _useRelatedUrls = _interopRequireDefault(require("../../../../../state/hooks/use-related-urls"));
+var _errored = require("./errored");
+var _resolved = require("./resolved");
+var _resolving = require("./resolving");
+var _templateObject;
+var _excluded = ["testId", "url", "renderers"];
+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; }
+/**
+ * Represents a block to display related resources of a url
+ */
+var RelatedUrlsBlock = function RelatedUrlsBlock(_ref) {
+  var _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'smart-block-related-urls' : _ref$testId,
+    url = _ref.url,
+    renderers = _ref.renderers,
+    blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useState = (0, _react.useState)(true),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    loadingRelatedUrls = _useState2[0],
+    setLoadingRelatedUrls = _useState2[1];
+  var _useState3 = (0, _react.useState)(),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    err = _useState4[0],
+    setErr = _useState4[1];
+  var _useState5 = (0, _react.useState)(),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    relatedUrls = _useState6[0],
+    setRelatedUrls = _useState6[1];
+  var getRelatedUrls = (0, _useRelatedUrls.default)();
+  (0, _react.useEffect)(function () {
+    var fetchRelatedUrls = /*#__PURE__*/function () {
+      var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        var relUrls;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              _context.next = 3;
+              return getRelatedUrls(url);
+            case 3:
+              relUrls = _context.sent;
+              setRelatedUrls(relUrls);
+              _context.next = 10;
+              break;
+            case 7:
+              _context.prev = 7;
+              _context.t0 = _context["catch"](0);
+              setErr(_context.t0);
+            case 10:
+              setLoadingRelatedUrls(false);
+            case 11:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[0, 7]]);
+      }));
+      return function fetchRelatedUrls() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    fetchRelatedUrls();
+  }, [getRelatedUrls, url]);
+  if (loadingRelatedUrls) {
+    return /*#__PURE__*/_react.default.createElement(_resolving.RelatedUrlsBlockResolvingView, (0, _extends2.default)({
+      testId: "".concat(testId, "-resolving-view")
+    }, blockProps));
+  }
+  if (relatedUrls) {
+    return /*#__PURE__*/_react.default.createElement(_resolved.RelatedUrlsResolvedView, (0, _extends2.default)({
+      renderers: renderers,
+      overrideCss: (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n          min-height: 1.55rem;\n        "]))),
+      testId: "".concat(testId, "-resolved-view"),
+      relatedUrlsResponse: relatedUrls
+    }, blockProps));
+  }
+  return /*#__PURE__*/_react.default.createElement(_errored.RelatedUrlsBlockErroredView, (0, _extends2.default)({
+    err: err,
+    testId: "".concat(testId, "-errored-view")
+  }, blockProps));
+};
+var _default = exports.default = RelatedUrlsBlock;

package/dist/cjs/view/FlexibleCard/components/blocks/related-urls-block/resolved/index.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RelatedUrlsResolvedView = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _messages = require("../../../../../../messages");
+var _block = _interopRequireDefault(require("../../block"));
+var _relatedUrlList = _interopRequireDefault(require("./related-url-list"));
+var _excluded = ["relatedUrlsResponse", "renderers", "testId", "initializeOpened"];
+var RelatedUrlsResolvedView = exports.RelatedUrlsResolvedView = function RelatedUrlsResolvedView(_ref) {
+  var resolvedResults = _ref.relatedUrlsResponse.resolvedResults,
+    renderers = _ref.renderers,
+    testId = _ref.testId,
+    initializeOpened = _ref.initializeOpened,
+    blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_block.default, (0, _extends2.default)({}, blockProps, {
+    testId: testId
+  }), resolvedResults && /*#__PURE__*/_react.default.createElement(_relatedUrlList.default, {
+    testId: "".concat(testId, "-list"),
+    renderers: renderers,
+    initializeOpened: initializeOpened,
+    title: _messages.messages.last_mentioned_in,
+    resolvedResults: resolvedResults
+  }));
+};

package/dist/cjs/view/FlexibleCard/components/blocks/related-urls-block/resolved/related-url-list/index.js

@@ -0,0 +1,78 @@
+"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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
+var _chevronUp = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-up"));
+var _primitives = require("@atlaskit/primitives");
+var _react2 = require("@emotion/react");
+var _messages = require("../../../../../../../messages");
+var _utils = require("../../../../../components/utils");
+var _text = _interopRequireDefault(require("../../../../elements/text"));
+var _relatedUrlItem = _interopRequireDefault(require("./related-url-item"));
+var _templateObject;
+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 RelatedUrlList = function RelatedUrlList(_ref) {
+  var resolvedResults = _ref.resolvedResults,
+    title = _ref.title,
+    renderers = _ref.renderers,
+    testId = _ref.testId,
+    initializeOpened = _ref.initializeOpened;
+  var _useState = (0, _react.useState)(initializeOpened),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var chevronClickHandler = (0, _react.useCallback)(function () {
+    return setIsOpen(!isOpen);
+  }, [isOpen]);
+  var ChevronComponent = isOpen ? _chevronUp.default : _chevronDown.default;
+  var intl = (0, _reactIntlNext.useIntl)();
+  var resolvedResultsStack = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
+      space: "space.050",
+      testId: "".concat(testId, "-items-wrapper")
+    }, resolvedResults.map(function (resolvedResults, idx) {
+      return /*#__PURE__*/_react.default.createElement(_relatedUrlItem.default, {
+        testId: "".concat(testId, "-item"),
+        key: idx,
+        results: resolvedResults,
+        renderers: renderers
+      });
+    }));
+  }, [renderers, resolvedResults, testId]);
+  return resolvedResults.length > 0 ? /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
+    testId: testId,
+    xcss: (0, _primitives.xcss)({
+      width: '100%'
+    })
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    onClick: chevronClickHandler,
+    testId: "".concat(testId, "-expand-title")
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
+    alignBlock: "center",
+    spread: "space-between"
+  }, /*#__PURE__*/_react.default.createElement(_text.default, {
+    overrideCss: (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n              font-weight: ", ";\n            "])), "var(--ds-font-weight-medium, 500)"),
+    message: {
+      descriptor: title
+    }
+  }), /*#__PURE__*/_react.default.createElement(ChevronComponent, {
+    label: (0, _utils.getFormattedMessageAsString)(intl, title),
+    size: 'medium'
+  }))), isOpen && resolvedResultsStack) : /*#__PURE__*/_react.default.createElement(_text.default, {
+    testId: testId,
+    message: {
+      descriptor: _messages.messages.related_work_items_not_found
+    }
+  });
+};
+var _default = exports.default = RelatedUrlList;

package/dist/cjs/view/FlexibleCard/components/blocks/related-urls-block/resolved/related-url-list/related-url-item/index.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _primitives = require("@atlaskit/primitives");
+var _constants = require("../../../../../../../../constants");
+var _flexible = _interopRequireDefault(require("../../../../../../../../extractors/flexible"));
+var _icon = _interopRequireDefault(require("../../../../../elements/icon"));
+var _link = _interopRequireDefault(require("../../../../../elements/link"));
+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 RelatedUrlItem = function RelatedUrlItem(_ref) {
+  var results = _ref.results,
+    renderers = _ref.renderers,
+    testId = _ref.testId;
+  var flexibleDataContext = (0, _react.useMemo)(function () {
+    return (0, _flexible.default)({
+      response: results,
+      renderers: renderers
+    });
+  }, [renderers, results]);
+  return /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
+    alignBlock: "center",
+    space: "space.050",
+    testId: testId
+  }, /*#__PURE__*/_react.default.createElement(_icon.default, (0, _extends2.default)({}, flexibleDataContext === null || flexibleDataContext === void 0 ? void 0 : flexibleDataContext.linkIcon, {
+    testId: "".concat(testId, "-icon"),
+    size: _constants.SmartLinkSize.Small
+  })), /*#__PURE__*/_react.default.createElement(_link.default, {
+    testId: "".concat(testId, "-link"),
+    text: flexibleDataContext === null || flexibleDataContext === void 0 ? void 0 : flexibleDataContext.title,
+    url: flexibleDataContext === null || flexibleDataContext === void 0 ? void 0 : flexibleDataContext.url,
+    size: _constants.SmartLinkSize.Small,
+    maxLines: 1
+  }));
+};
+var _default = exports.default = RelatedUrlItem;

package/dist/cjs/view/FlexibleCard/components/blocks/related-urls-block/resolved/related-url-list/related-url-item/types.js

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

package/dist/cjs/view/FlexibleCard/components/blocks/related-urls-block/resolved/related-url-list/types.js

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

package/dist/cjs/view/FlexibleCard/components/blocks/related-urls-block/resolved/types.js

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

package/dist/cjs/view/FlexibleCard/components/blocks/related-urls-block/resolving/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RelatedUrlsBlockResolvingView = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _loadingSkeleton = _interopRequireDefault(require("../../../common/loading-skeleton"));
+var _block = _interopRequireDefault(require("../../block"));
+var _excluded = ["testId"];
+var RelatedUrlsBlockResolvingView = exports.RelatedUrlsBlockResolvingView = function RelatedUrlsBlockResolvingView(_ref) {
+  var testId = _ref.testId,
+    blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_block.default, (0, _extends2.default)({}, blockProps, {
+    testId: testId
+  }), /*#__PURE__*/_react.default.createElement(_loadingSkeleton.default, {
+    height: 1.55,
+    width: 22
+  }));
+};

package/dist/cjs/view/FlexibleCard/components/blocks/snippet-block/index.js

@@ -40,7 +40,7 @@ var SnippetBlock = function SnippetBlock(_ref) {
     testId: "".concat(testId, "-resolved-view")
   }), /*#__PURE__*/_react.default.createElement(_elements.Snippet, {
     maxLines: snippetMaxLines,
-    text: text
+    content: text
   }));
 };
 var _default = exports.default = SnippetBlock;

package/dist/cjs/view/FlexibleCard/components/elements/index.js

@@ -11,10 +11,18 @@ Object.defineProperty(exports, "Preview", {
     return _preview.default;
   }
 });
-exports.VoteCount = exports.ViewCount = exports.Title = exports.TargetBranch = exports.SubscriberCount = exports.SubTasksProgress = exports.StoryPoints = exports.State = exports.SourceBranch = exports.Snippet = exports.SentOn = exports.ReadTime = exports.ReactCount = exports.Provider = exports.ProgrammingLanguage = exports.Priority = void 0;
+exports.SentOn = exports.ReadTime = exports.ReactCount = exports.Provider = exports.ProgrammingLanguage = exports.Priority = void 0;
+Object.defineProperty(exports, "Snippet", {
+  enumerable: true,
+  get: function get() {
+    return _snippetElement.default;
+  }
+});
+exports.VoteCount = exports.ViewCount = exports.Title = exports.TargetBranch = exports.SubscriberCount = exports.SubTasksProgress = exports.StoryPoints = exports.State = exports.SourceBranch = void 0;
 var _utils = require("./utils");
 var _constants = require("../../../../constants");
 var _preview = _interopRequireDefault(require("./preview"));
+var _snippetElement = _interopRequireDefault(require("./snippet-element"));
 // Attention: Keep the export name and element name the same.
 // This will help reducing the code for mapping elements inside
 // createElement and renderElementItems
@@ -141,7 +149,7 @@ var SentOn = exports.SentOn = (0, _utils.createElement)(_constants.ElementName.S
  * Creates a Snippet element using the data from Snippet in the Flexible UI Context.
  * @see Text
  */
-var Snippet = exports.Snippet = (0, _utils.createElement)(_constants.ElementName.Snippet);
+
 /**
  * Creates a SourceBranch Text element using the data from sourceBranch in the Flexible UI Context.
  * @see Text

package/dist/cjs/view/FlexibleCard/components/elements/snippet-element/index.js

@@ -0,0 +1,39 @@
+"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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _react2 = _interopRequireWildcard(require("react"));
+var _flexibleUiContext = require("../../../../../state/flexible-ui-context");
+var _text = _interopRequireDefault(require("../text"));
+var _excluded = ["content", "maxLines", "overrideCss"];
+var _templateObject;
+/** @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; }
+var SNIPPET_DEFAULT_MAX_LINES = 3;
+var getSnippetStyles = function getSnippetStyles(overrideCss) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  ", ";\n"])), "var(--ds-text, #172B4D)", overrideCss);
+};
+var SnippetElement = function SnippetElement() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var overrideContent = _ref.content,
+    _ref$maxLines = _ref.maxLines,
+    maxLines = _ref$maxLines === void 0 ? SNIPPET_DEFAULT_MAX_LINES : _ref$maxLines,
+    overrideCss = _ref.overrideCss,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var context = (0, _react2.useContext)(_flexibleUiContext.FlexibleUiContext);
+  return (0, _react.jsx)(_text.default, (0, _extends2.default)({
+    content: overrideContent !== null && overrideContent !== void 0 ? overrideContent : context === null || context === void 0 ? void 0 : context.snippet,
+    maxLines: maxLines,
+    overrideCss: getSnippetStyles(overrideCss)
+  }, props));
+};
+var _default = exports.default = SnippetElement;

package/dist/cjs/view/FlexibleCard/components/elements/text/index.js

@@ -30,8 +30,7 @@ var Text = function Text(_ref) {
     name = _ref.name,
     overrideCss = _ref.overrideCss,
     _ref$testId = _ref.testId,
-    testId = _ref$testId === void 0 ? 'smart-element-text' : _ref$testId,
-    text = _ref.text;
+    testId = _ref$testId === void 0 ? 'smart-element-text' : _ref$testId;
   if (!message && !content) {
     return null;
   }
@@ -41,6 +40,6 @@ var Text = function Text(_ref) {
     "data-smart-element": name,
     "data-smart-element-text": true,
     "data-testid": testId
-  }, text ? text : (0, _utils.getFormattedMessage)(message) || content);
+  }, (0, _utils.getFormattedMessage)(message) || content);
 };
 var _default = exports.default = Text;

package/dist/cjs/view/FlexibleCard/components/elements/utils.js

@@ -9,10 +9,8 @@ exports.createElement = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
-var _react2 = require("@emotion/react");
 var _constants = require("../../../../constants");
 var _icon = _interopRequireDefault(require("./icon"));
 var _link = _interopRequireDefault(require("./link"));
@@ -24,12 +22,10 @@ var _media = _interopRequireDefault(require("./media"));
 var _text = _interopRequireDefault(require("./text"));
 var _messages = require("../../../../messages");
 var _dateTime = _interopRequireDefault(require("./date-time"));
-var _token = require("../../../../utils/token");
 var _atlaskitBadge = _interopRequireDefault(require("./atlaskit-badge"));
-var _templateObject, _elementMappings;
+var _elementMappings;
 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 || _typeof3(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 SNIPPET_DEFAULT_MAX_LINES = 3;
 var elementMappings = (_elementMappings = {}, (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.AttachmentCount, {
   component: _badge.default,
   props: {
@@ -104,12 +100,6 @@ var elementMappings = (_elementMappings = {}, (0, _defineProperty2.default)(_ele
   component: _text.default
 }), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.SentOn, {
   component: _dateTime.default
-}), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.Snippet, {
-  component: _text.default,
-  props: {
-    maxLines: SNIPPET_DEFAULT_MAX_LINES,
-    overrideCss: (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        color: ", ";\n      "])), _token.tokens.snippet)
-  }
 }), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.SourceBranch, {
   component: _text.default
 }), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.State, {
@@ -185,7 +175,6 @@ var getData = function getData(elementName, contextKey, context) {
       return toDateTimeProps('sent', context.sentOn);
     case _constants.ElementName.ReadTime:
       return toFormattedTextProps(_messages.messages.read_time, data);
-    case _constants.ElementName.Snippet:
     case _constants.ElementName.SourceBranch:
     case _constants.ElementName.TargetBranch:
       return toTextProps(data);

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

@@ -65,7 +65,8 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
     _ref$cardActions = _ref.cardActions,
     cardActions = _ref$cardActions === void 0 ? [] : _ref$cardActions,
     onActionClick = _ref.onActionClick,
-    extensionKey = _ref.extensionKey;
+    extensionKey = _ref.extensionKey,
+    url = _ref.url;
   var canBeDatasource = (0, _helpers.getCanBeDatasource)(cardState.details);
   (0, _react.useEffect)(function () {
     // Since this hover view is only rendered on resolved status,
@@ -129,6 +130,9 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
     size: _constants.SmartLinkSize.Large,
     overrideCss: _styled.metadataBlockCss,
     maxLines: 1
+  }), (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-hover-card-related-urls') && /*#__PURE__*/_react.default.createElement(_blocks.RelatedUrlsBlock, {
+    url: url,
+    size: _constants.SmartLinkSize.Small
   }), /*#__PURE__*/_react.default.createElement(_blocks.FooterBlock, {
     actions: footerActions,
     size: _constants.SmartLinkSize.Large,

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