@atlaskit/smart-card 36.2.6 → 36.2.7

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 36.2.7
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 36.2.6
 
 ### Patch Changes

package/dist/cjs/messages.js

@@ -706,16 +706,31 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Recent links',
     description: 'Shown as the title for the related links modal'
   },
+  related_links_modal_title_v2: {
+    id: 'fabric.linking.related_links_modal_title_v2',
+    defaultMessage: 'Related links',
+    description: 'Shown as the title for the related links modal'
+  },
   related_links_view_related_urls: {
     id: 'fabric.linking.related_links_view_related_urls',
     defaultMessage: 'View recent links',
     description: 'Action to view related links to the given resource'
   },
+  related_links_view_related_links: {
+    id: 'fabric.linking.related_links_view_related_links',
+    defaultMessage: 'View related links',
+    description: 'Action to view related links to the given resource'
+  },
   related_links_found_in: {
     id: 'fabric.linking.related_links_found_in',
     defaultMessage: 'Found In',
     description: 'Informs the user of the resources are found in the given url'
   },
+  related_links_found_in_v2: {
+    id: 'fabric.linking.related_links_found_in_v2',
+    defaultMessage: 'Found in',
+    description: 'Informs the user of the resources are found in the given url'
+  },
   related_links_not_found: {
     id: 'fabric.linking.related_links_not_found',
     defaultMessage: "We didn't find any links to show here.",
@@ -726,16 +741,31 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Includes Links To',
     description: 'Informs the user of the resources the url links to'
   },
+  related_links_includes_links_to_v2: {
+    id: 'fabric.linking.related_links_includes_links_to_v2',
+    defaultMessage: 'Includes links to',
+    description: 'Informs the user of the resources the url links to'
+  },
   related_links_modal_error_header: {
     id: 'fabric.linking.related_links_modal_error_header',
     defaultMessage: 'Something went wrong',
     description: 'Title for related links error'
   },
+  related_links_modal_unavailable_title: {
+    id: 'fabric.linking.related_links_modal_unavailable_title',
+    defaultMessage: "We couldn't find any related links",
+    description: 'Title for related links error'
+  },
   related_links_modal_error_message: {
     id: 'fabric.linking.related_links_modal_error_message',
     defaultMessage: 'We ran into an issue trying to load recent links. Check your connection or refresh to try again.',
     description: 'Informs the user that there was a problem loading related links'
   },
+  related_links_modal_unavailable_description: {
+    id: 'fabric.linking.related_links_modal_unavailable_description',
+    defaultMessage: 'We continuously review and add related links for updated pages or other content types',
+    description: 'Informs the user that there was a problem loading related links'
+  },
   related_links_modal_unavailable_header: {
     id: 'fabric.linking.related_links_modal_unavailable_header',
     defaultMessage: 'No recent links',

package/dist/cjs/utils/analytics/analytics.js

@@ -11,7 +11,7 @@ var ANALYTICS_CHANNEL = exports.ANALYTICS_CHANNEL = 'media';
 var context = exports.context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "36.2.6"
+  packageVersion: "36.2.7"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -10,6 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useAnalyticsEvents2 = require("../../../../../common/analytics/generated/use-analytics-events");
 var _messages = require("../../../../../messages");
 var _flexibleUiContext = require("../../../../../state/flexible-ui-context");
@@ -48,7 +49,7 @@ var ViewRelatedLinksAction = function ViewRelatedLinksAction(_ref) {
     onClickCallback === null || onClickCallback === void 0 || onClickCallback();
   }, [actionData === null || actionData === void 0 ? void 0 : actionData.ari, fireEvent, modal, onClickCallback]);
   return actionData ? /*#__PURE__*/_react.default.createElement(_action.default, (0, _extends2.default)({
-    content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.related_links_view_related_urls),
+    content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v2') ? _messages.messages.related_links_view_related_links : _messages.messages.related_links_view_related_urls),
     icon: /*#__PURE__*/_react.default.createElement(_relatedLinksActionIcon.default, null),
     onClick: onClick,
     testId: "smart-action-view-related-links-action",

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

@@ -10,7 +10,9 @@ exports.default = void 0;
 require("./index.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
+var _clock = _interopRequireDefault(require("@atlaskit/icon/core/clock"));
 var _childIssues = _interopRequireDefault(require("@atlaskit/icon/core/migration/child-issues"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var rotateSvg = null;
@@ -19,7 +21,11 @@ var rotateSvg = null;
  * ChildIssuesIcon but 180 degrees rotated
  */
 var RelatedLinksActionIcon = function RelatedLinksActionIcon() {
-  return /*#__PURE__*/React.createElement("span", {
+  return (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v2') ? /*#__PURE__*/React.createElement(_clock.default, {
+    color: "currentColor",
+    spacing: "spacious",
+    label: "View related links..."
+  }) : /*#__PURE__*/React.createElement("span", {
     className: (0, _runtime.ax)(["_t9ec1sub _1e0c1o8l"])
   }, /*#__PURE__*/React.createElement(_childIssues.default, {
     color: "currentColor",

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

@@ -20,7 +20,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId", "isLink
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "36.2.6",
+  packageVersion: "36.2.7",
   componentName: 'linkUrl'
 };
 var Anchor = (0, _click.withLinkClickedEvent)('a');

package/dist/cjs/view/RelatedLinksModal/components/RelatedLinksBaseModal.js

@@ -14,6 +14,7 @@ var _runtime = require("@compiled/react/runtime");
 var _reactIntlNext = require("react-intl-next");
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _useAnalyticsEvents2 = require("../../../common/analytics/generated/use-analytics-events");
 var _messages = require("../../../messages");
@@ -48,8 +49,9 @@ var RelatedLinksBaseModal = function RelatedLinksBaseModal(_ref) {
     width: fixedWidth,
     autoFocus: false,
     shouldReturnFocus: false,
-    onOpenComplete: openCompleteHandler
-  }, /*#__PURE__*/React.createElement(_modalDialog.ModalHeader, null, /*#__PURE__*/React.createElement(_modalDialog.ModalTitle, null, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _messages.messages.related_links_modal_title))), /*#__PURE__*/React.createElement(_modalDialog.ModalBody, null, /*#__PURE__*/React.createElement(_compiled.Box, {
+    onOpenComplete: openCompleteHandler,
+    height: (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v2') ? '504px' : undefined
+  }, /*#__PURE__*/React.createElement(_modalDialog.ModalHeader, null, /*#__PURE__*/React.createElement(_modalDialog.ModalTitle, null, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v2') ? _messages.messages.related_links_modal_title_v2 : _messages.messages.related_links_modal_title))), /*#__PURE__*/React.createElement(_modalDialog.ModalBody, null, (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v2') ? children : /*#__PURE__*/React.createElement(_compiled.Box, {
     xcss: styles.box
   }, children)), /*#__PURE__*/React.createElement(_modalDialog.ModalFooter, null, /*#__PURE__*/React.createElement(_new.default, {
     appearance: "primary",

package/dist/cjs/view/RelatedLinksModal/components/related-link-item/index.compiled.css

@@ -1,8 +1,20 @@
 
 ._11c81o8v{font:var(--ds-font-body-small,normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._zulputpp{gap:var(--ds-space-150,9pt)}
+._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
+._195gmgjw{margin-inline:var(--ds-space-negative-200,-1pc)}
+._1kl71vrj{border-left:2px solid transparent}
+._1kl7nmxp{border-left:var(--_nu2mv8)}
+._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
 ._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
 ._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
 ._8vu4iti9:hover{border-radius:var(--ds-border-radius-100,4px)}._10swu2gc:hover{padding-inline:var(--ds-space-100,8px)}
 ._1mxox0bf:hover{margin-inline:var(--ds-space-negative-100,-8px)}
-._irr31d5g:hover{background-color:var(--ds-background-input-hovered,#f7f8f9)}
+._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
+._irr31d5g:hover{background-color:var(--ds-background-input-hovered,#f7f8f9)}
+._irr3i1yw:hover{background-color:var(--ds-background-selected-hovered,#cce0ff)}
+._1di619ru:active{background-color:var(--ds-background-selected-pressed,#85b8ff)}
+._1di61dty:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)}
+._1ohyglyw:active{outline-style:none}
+._1q5t1r31:active{outline-color:currentColor}
+._1r9x1o36:active{outline-width:medium}

package/dist/cjs/view/RelatedLinksModal/components/related-link-item/index.js

@@ -9,15 +9,21 @@ exports.default = void 0;
 require("./index.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../../../constants");
 var _index = require("../../../../index");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var hoverStyleOld = null;
 var hoverStyle = null;
+var baseStyle = null;
+var selectedStyle = null;
 var relatedLinkItemStyles = null;
 var RelatedLinkItem = function RelatedLinkItem(_ref) {
   var url = _ref.url,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    isSelected = _ref.isSelected,
+    onFocus = _ref.onFocus;
   var subtitle = [{
     name: _index.ElementName.Provider,
     hideIcon: true
@@ -28,11 +34,15 @@ var RelatedLinkItem = function RelatedLinkItem(_ref) {
     hideBackground: true,
     theme: _index.SmartLinkTheme.Black,
     clickableContainer: true,
-    size: _index.SmartLinkSize.Large
+    size: (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v2') ? _index.SmartLinkSize.Medium : _index.SmartLinkSize.Large
   };
   return /*#__PURE__*/React.createElement("div", {
     "data-testId": testId,
-    className: (0, _runtime.ax)(["_8vu4iti9 _1mxox0bf _10swu2gc _irr31d5g"])
+    onFocus: onFocus,
+    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v2') && "_195gmgjw _18zrpxbi _1kl71vrj", (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v2') ? "_irr3166n _1di61dty" : "_8vu4iti9 _1mxox0bf _10swu2gc _irr31d5g", isSelected && (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v2') && "_1kl7nmxp _bfhkfg4m _irr3i1yw _1q5t1r31 _1ohyglyw _1r9x1o36 _1di619ru"]),
+    style: {
+      "--_nu2mv8": (0, _runtime.ix)("2px solid ".concat("var(--ds-border-selected, #0C66E4)"))
+    }
   }, /*#__PURE__*/React.createElement(_index.Card, {
     appearance: "block",
     ui: ui,
@@ -40,7 +50,7 @@ var RelatedLinkItem = function RelatedLinkItem(_ref) {
   }, /*#__PURE__*/React.createElement(_index.TitleBlock, {
     maxLines: 1,
     hideTitleTooltip: true,
-    position: _index.SmartLinkPosition.Center,
+    position: (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v2') ? _index.SmartLinkPosition.Top : _index.SmartLinkPosition.Center,
     subtitle: subtitle,
     anchorTarget: "_blank",
     size: ui.size,

package/dist/cjs/view/RelatedLinksModal/components/related-links-list/index.compiled.css

@@ -1,4 +1,5 @@
 ._11c81o8v{font:var(--ds-font-body-small,normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._11c81vhk{font:var(--ds-font-heading-xxsmall,normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._1rjcu2gc{padding-block:var(--ds-space-100,8px)}
-._1q511b66{padding-block-start:var(--ds-space-050,4px)}
+._1q511b66{padding-block-start:var(--ds-space-050,4px)}
+._syaz1gjq{color:var(--ds-text-subtle,#44546f)}

package/dist/cjs/view/RelatedLinksModal/components/related-links-list/index.js

@@ -11,29 +11,43 @@ require("./index.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
 var _reactIntlNext = require("react-intl-next");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _messages = require("../../../../messages");
 var _relatedLinkItem = _interopRequireDefault(require("../related-link-item"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var styles = {
-  sectionTitle: "_11c81vhk _1q511b66",
+  sectionTitleOld: "_11c81vhk _1q511b66",
+  sectionTitle: "_11c81vhk _syaz1gjq _1q511b66",
   boxStyle: "_11c81o8v _1rjcu2gc"
 };
 var RelatedLinksList = function RelatedLinksList(_ref) {
   var urls = _ref.urls,
     title = _ref.title,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    selected = _ref.selected,
+    handleSelectedUpdate = _ref.handleSelectedUpdate;
+  var TitleWrapper = function TitleWrapper(_ref2) {
+    var children = _ref2.children;
+    return (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v2') ? /*#__PURE__*/React.createElement(_compiled.Box, {
+      xcss: styles.sectionTitle
+    }, children) : /*#__PURE__*/React.createElement(_compiled.Box, {
+      xcss: styles.sectionTitleOld
+    }, children);
+  };
   return /*#__PURE__*/React.createElement(_compiled.Stack, {
     testId: testId
-  }, /*#__PURE__*/React.createElement(_compiled.Box, {
-    xcss: styles.sectionTitle
-  }, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, title)), urls.length > 0 && /*#__PURE__*/React.createElement(_compiled.Box, null, urls.map(function (url, idx) {
+  }, /*#__PURE__*/React.createElement(TitleWrapper, null, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, title)), urls.length > 0 && /*#__PURE__*/React.createElement(_compiled.Box, null, urls.map(function (url, idx) {
     return /*#__PURE__*/React.createElement(_compiled.Stack, {
       key: "".concat(idx, "-").concat(url)
     }, /*#__PURE__*/React.createElement(_relatedLinkItem.default, {
       url: url,
-      testId: "".concat(testId, "-item-").concat(idx)
+      testId: "".concat(testId, "-item-").concat(idx),
+      isSelected: selected === "".concat(idx, "-").concat(url),
+      onFocus: function onFocus() {
+        return handleSelectedUpdate && handleSelectedUpdate("".concat(idx, "-").concat(url));
+      }
     }));
   })), urls.length === 0 && /*#__PURE__*/React.createElement(_compiled.Box, {
     xcss: styles.boxStyle

package/dist/cjs/view/RelatedLinksModal/views/errored/error-svg/search-no-result/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SpotSearchNoResult = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _renderSvg = require("../../../../../common/render-svg");
+var _dark = _interopRequireDefault(require("./assets/dark.svg"));
+var _light = _interopRequireDefault(require("./assets/light.svg"));
+var SpotSearchNoResult = exports.SpotSearchNoResult = function SpotSearchNoResult(props) {
+  return /*#__PURE__*/_react.default.createElement(_renderSvg.RenderSVG, (0, _extends2.default)({
+    src: _light.default,
+    srcDark: _dark.default
+  }, props));
+};

package/dist/cjs/view/RelatedLinksModal/views/resolved/index.js

@@ -5,8 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
 var _analyticsNext = require("@atlaskit/analytics-next");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _messages = require("../../../../messages");
 var _relatedLinksList = _interopRequireDefault(require("../../components/related-links-list"));
@@ -15,6 +17,13 @@ var RelatedLinksResolvedView = function RelatedLinksResolvedView(_ref) {
     incomingLinks = _ref$incomingLinks === void 0 ? [] : _ref$incomingLinks,
     _ref$outgoingLinks = _ref.outgoingLinks,
     outgoingLinks = _ref$outgoingLinks === void 0 ? [] : _ref$outgoingLinks;
+  var _React$useState = _react.default.useState(""),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    selected = _React$useState2[0],
+    setSelected = _React$useState2[1];
+  var handleSelectedUpdate = function handleSelectedUpdate(selectedKey) {
+    setSelected(selectedKey);
+  };
   return /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
     space: "space.150"
   }, /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {
@@ -23,16 +32,20 @@ var RelatedLinksResolvedView = function RelatedLinksResolvedView(_ref) {
     }
   }, /*#__PURE__*/_react.default.createElement(_relatedLinksList.default, {
     urls: incomingLinks,
-    title: _messages.messages.related_links_found_in,
-    testId: "incoming-related-links-list"
+    title: (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v2') ? _messages.messages.related_links_found_in_v2 : _messages.messages.related_links_found_in,
+    testId: "incoming-related-links-list",
+    selected: selected,
+    handleSelectedUpdate: handleSelectedUpdate
   })), /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {
     data: {
       component: 'relatedLinksOutgoing'
     }
   }, /*#__PURE__*/_react.default.createElement(_relatedLinksList.default, {
     urls: outgoingLinks,
-    title: _messages.messages.related_links_includes_links_to,
-    testId: "outgoing-related-links-list"
+    title: (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v2') ? _messages.messages.related_links_includes_links_to_v2 : _messages.messages.related_links_includes_links_to,
+    testId: "outgoing-related-links-list",
+    selected: selected,
+    handleSelectedUpdate: handleSelectedUpdate
   })));
 };
 var _default = exports.default = RelatedLinksResolvedView;

package/dist/cjs/view/RelatedLinksModal/views/unavailable/index.js

@@ -7,12 +7,23 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _messages = require("../../../../messages");
 var _EmptyState = require("../../components/EmptyState");
+var _searchNoResult = require("../errored/error-svg/search-no-result");
 var _unavailableSvg = require("./unavailable-svg");
 var RelatedLinksUnavailableView = function RelatedLinksUnavailableView() {
   var intl = (0, _reactIntlNext.useIntl)();
-  return /*#__PURE__*/_react.default.createElement(_EmptyState.EmptyState, {
+  return (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v2') ? /*#__PURE__*/_react.default.createElement(_EmptyState.EmptyState, {
+    renderImage: function renderImage() {
+      return /*#__PURE__*/_react.default.createElement(_searchNoResult.SpotSearchNoResult, {
+        size: 'large',
+        alt: intl.formatMessage(_messages.messages.related_links_modal_unavailable_title)
+      });
+    },
+    header: intl.formatMessage(_messages.messages.related_links_modal_unavailable_title),
+    description: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.related_links_modal_unavailable_description)
+  }) : /*#__PURE__*/_react.default.createElement(_EmptyState.EmptyState, {
     renderImage: function renderImage() {
       return /*#__PURE__*/_react.default.createElement(_unavailableSvg.UnavailableSVG, null);
     },

package/dist/cjs/view/common/render-svg.compiled.css

@@ -0,0 +1,3 @@
+._1bsb1lit{width:10pc}
+._1bsb1wqb{width:60px}
+._1bsb53f4{width:75pt}

package/dist/cjs/view/common/render-svg.js

@@ -0,0 +1,32 @@
+/* render-svg.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RenderSVG = void 0;
+require("./render-svg.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _image = _interopRequireDefault(require("@atlaskit/image"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var imageSizeStyles = {
+  xlarge: "_1bsb1lit",
+  large: "_1bsb53f4",
+  medium: "_1bsb1wqb"
+};
+var RenderSVG = exports.RenderSVG = function RenderSVG(_ref) {
+  var alt = _ref.alt,
+    size = _ref.size,
+    src = _ref.src,
+    srcDark = _ref.srcDark;
+  return /*#__PURE__*/React.createElement(_image.default, {
+    src: src,
+    srcDark: srcDark,
+    alt: alt,
+    className: (0, _runtime.ax)([size && imageSizeStyles[size]])
+  });
+};

package/dist/es2019/messages.js

@@ -700,16 +700,31 @@ export const messages = defineMessages({
     defaultMessage: 'Recent links',
     description: 'Shown as the title for the related links modal'
   },
+  related_links_modal_title_v2: {
+    id: 'fabric.linking.related_links_modal_title_v2',
+    defaultMessage: 'Related links',
+    description: 'Shown as the title for the related links modal'
+  },
   related_links_view_related_urls: {
     id: 'fabric.linking.related_links_view_related_urls',
     defaultMessage: 'View recent links',
     description: 'Action to view related links to the given resource'
   },
+  related_links_view_related_links: {
+    id: 'fabric.linking.related_links_view_related_links',
+    defaultMessage: 'View related links',
+    description: 'Action to view related links to the given resource'
+  },
   related_links_found_in: {
     id: 'fabric.linking.related_links_found_in',
     defaultMessage: 'Found In',
     description: 'Informs the user of the resources are found in the given url'
   },
+  related_links_found_in_v2: {
+    id: 'fabric.linking.related_links_found_in_v2',
+    defaultMessage: 'Found in',
+    description: 'Informs the user of the resources are found in the given url'
+  },
   related_links_not_found: {
     id: 'fabric.linking.related_links_not_found',
     defaultMessage: "We didn't find any links to show here.",
@@ -720,16 +735,31 @@ export const messages = defineMessages({
     defaultMessage: 'Includes Links To',
     description: 'Informs the user of the resources the url links to'
   },
+  related_links_includes_links_to_v2: {
+    id: 'fabric.linking.related_links_includes_links_to_v2',
+    defaultMessage: 'Includes links to',
+    description: 'Informs the user of the resources the url links to'
+  },
   related_links_modal_error_header: {
     id: 'fabric.linking.related_links_modal_error_header',
     defaultMessage: 'Something went wrong',
     description: 'Title for related links error'
   },
+  related_links_modal_unavailable_title: {
+    id: 'fabric.linking.related_links_modal_unavailable_title',
+    defaultMessage: `We couldn't find any related links`,
+    description: 'Title for related links error'
+  },
   related_links_modal_error_message: {
     id: 'fabric.linking.related_links_modal_error_message',
     defaultMessage: 'We ran into an issue trying to load recent links. Check your connection or refresh to try again.',
     description: 'Informs the user that there was a problem loading related links'
   },
+  related_links_modal_unavailable_description: {
+    id: 'fabric.linking.related_links_modal_unavailable_description',
+    defaultMessage: 'We continuously review and add related links for updated pages or other content types',
+    description: 'Informs the user that there was a problem loading related links'
+  },
   related_links_modal_unavailable_header: {
     id: 'fabric.linking.related_links_modal_unavailable_header',
     defaultMessage: 'No recent links',

package/dist/es2019/utils/analytics/analytics.js

@@ -2,7 +2,7 @@ export const ANALYTICS_CHANNEL = 'media';
 export const context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "36.2.6"
+  packageVersion: "36.2.7"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { lazy, useCallback } from 'react';
 import { FormattedMessage } from 'react-intl-next';
+import { fg } from "@atlaskit/platform-feature-flags";
 import { useAnalyticsEvents } from '../../../../../common/analytics/generated/use-analytics-events';
 import { messages } from '../../../../../messages';
 import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
@@ -32,7 +33,7 @@ const ViewRelatedLinksAction = ({
     onClickCallback === null || onClickCallback === void 0 ? void 0 : onClickCallback();
   }, [actionData === null || actionData === void 0 ? void 0 : actionData.ari, fireEvent, modal, onClickCallback]);
   return actionData ? /*#__PURE__*/React.createElement(Action, _extends({
-    content: /*#__PURE__*/React.createElement(FormattedMessage, messages.related_links_view_related_urls),
+    content: /*#__PURE__*/React.createElement(FormattedMessage, fg('platform-linking-visual-refresh-v2') ? messages.related_links_view_related_links : messages.related_links_view_related_urls),
     icon: /*#__PURE__*/React.createElement(RelatedLinksActionIcon, null),
     onClick: onClick,
     testId: "smart-action-view-related-links-action",

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

@@ -2,13 +2,19 @@
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import ClockIcon from '@atlaskit/icon/core/clock';
 import ChildIssuesIcon from '@atlaskit/icon/core/migration/child-issues';
+import { fg } from '@atlaskit/platform-feature-flags';
 const rotateSvg = null;
 
 /**
  * ChildIssuesIcon but 180 degrees rotated
  */
-const RelatedLinksActionIcon = () => /*#__PURE__*/React.createElement("span", {
+const RelatedLinksActionIcon = () => fg('platform-linking-visual-refresh-v2') ? /*#__PURE__*/React.createElement(ClockIcon, {
+  color: "currentColor",
+  spacing: "spacious",
+  label: "View related links..."
+}) : /*#__PURE__*/React.createElement("span", {
   className: ax(["_t9ec1sub _1e0c1o8l"])
 }, /*#__PURE__*/React.createElement(ChildIssuesIcon, {
   color: "currentColor",

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

@@ -10,7 +10,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "36.2.6",
+  packageVersion: "36.2.7",
   componentName: 'linkUrl'
 };
 const Anchor = withLinkClickedEvent('a');

package/dist/es2019/view/RelatedLinksModal/components/RelatedLinksBaseModal.js

@@ -6,6 +6,7 @@ import { useCallback, useRef } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import Button from '@atlaskit/button/new';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
+import { fg } from "@atlaskit/platform-feature-flags";
 import { Box } from '@atlaskit/primitives/compiled';
 import { useAnalyticsEvents } from '../../../common/analytics/generated/use-analytics-events';
 import { messages } from '../../../messages';
@@ -40,8 +41,9 @@ const RelatedLinksBaseModal = ({
     width: fixedWidth,
     autoFocus: false,
     shouldReturnFocus: false,
-    onOpenComplete: openCompleteHandler
-  }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.related_links_modal_title))), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(Box, {
+    onOpenComplete: openCompleteHandler,
+    height: fg('platform-linking-visual-refresh-v2') ? '504px' : undefined
+  }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, null, /*#__PURE__*/React.createElement(FormattedMessage, fg('platform-linking-visual-refresh-v2') ? messages.related_links_modal_title_v2 : messages.related_links_modal_title))), /*#__PURE__*/React.createElement(ModalBody, null, fg('platform-linking-visual-refresh-v2') ? children : /*#__PURE__*/React.createElement(Box, {
     xcss: styles.box
   }, children)), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
     appearance: "primary",

package/dist/es2019/view/RelatedLinksModal/components/related-link-item/index.compiled.css

@@ -1,8 +1,20 @@
 
 ._11c81o8v{font:var(--ds-font-body-small,normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._zulputpp{gap:var(--ds-space-150,9pt)}
+._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
+._195gmgjw{margin-inline:var(--ds-space-negative-200,-1pc)}
+._1kl71vrj{border-left:2px solid transparent}
+._1kl7neh2{border-left:2px solid var(--ds-border-selected,#0c66e4)}
+._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
 ._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
 ._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
 ._8vu4iti9:hover{border-radius:var(--ds-border-radius-100,4px)}._10swu2gc:hover{padding-inline:var(--ds-space-100,8px)}
 ._1mxox0bf:hover{margin-inline:var(--ds-space-negative-100,-8px)}
-._irr31d5g:hover{background-color:var(--ds-background-input-hovered,#f7f8f9)}
+._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
+._irr31d5g:hover{background-color:var(--ds-background-input-hovered,#f7f8f9)}
+._irr3i1yw:hover{background-color:var(--ds-background-selected-hovered,#cce0ff)}
+._1di619ru:active{background-color:var(--ds-background-selected-pressed,#85b8ff)}
+._1di61dty:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)}
+._1ohyglyw:active{outline-style:none}
+._1q5t1r31:active{outline-color:currentColor}
+._1r9x1o36:active{outline-width:medium}