@atlaskit/smart-card 36.2.6 → 36.3.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/smart-card
 
+## 36.3.0
+
+### Minor Changes
+
+- [#138242](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/138242)
+  [`38ec880107c77`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/38ec880107c77) -
+  [ux] EDM-11840 Related Links design refresh V2 error state
+
+## 36.2.7
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 36.2.6
 
 ### Patch Changes

package/dist/cjs/common/ui/icons/generic-error-icon.compiled.css

@@ -0,0 +1,3 @@
+._1bsbwdok{width:var(--_cjikvn)}
+._1e0c1ule{display:block}
+._4t3iwdok{height:var(--_cjikvn)}

package/dist/cjs/common/ui/icons/generic-error-icon.js

@@ -0,0 +1,54 @@
+/* generic-error-icon.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.GenericErrorIcon = void 0;
+require("./generic-error-icon.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+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 SIZE = 96;
+var genericErrorStyles = null;
+var GenericErrorIcon = exports.GenericErrorIcon = function GenericErrorIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2.default)({
+    viewBox: "0 0 96 96",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props, {
+    className: (0, _runtime.ax)(["_1bsbwdok _4t3iwdok _1e0c1ule"]),
+    style: {
+      "--_cjikvn": (0, _runtime.ix)("".concat(SIZE, "px"))
+    }
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    d: "M64.861 32.06a27.753 27.753 0 0 0-2.667-4.133 28.187 28.187 0 0 0-3.376-3.669c-6.985-6.311-15.57-6.89-23.609-2.53a30.226 30.226 0 0 0-4.056 2.656 30.624 30.624 0 0 0-3.735 3.4c-6.225 6.717-7.82 15.154-3.505 23.462a28.108 28.108 0 0 0 2.698 4.193 27.67 27.67 0 0 0 3.33 3.62c6.94 6.266 15.518 6.85 23.596 2.507a30.492 30.492 0 0 0 4.23-2.758 30.07 30.07 0 0 0 3.593-3.257c6.252-6.692 7.847-15.161 3.494-23.49h.007Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#DDDEE1",
+    d: "M43.092 66.774c-5.306 0-10.382-1.997-14.75-5.938a30.405 30.405 0 0 1-3.62-3.93 30.243 30.243 0 0 1-2.928-4.553c-4.657-8.961-3.247-18.509 3.871-26.192a33.271 33.271 0 0 1 4.025-3.67 32.834 32.834 0 0 1 4.378-2.869c9.209-4.995 18.816-3.951 26.353 2.86a30.945 30.945 0 0 1 3.665 3.98 30.303 30.303 0 0 1 2.898 4.488c4.705 9.003 3.295 18.565-3.868 26.231a32.148 32.148 0 0 1-3.879 3.515 33.415 33.415 0 0 1-4.562 2.975c-3.858 2.073-7.782 3.1-11.583 3.1v.003Zm2.53-45.486c-3.019 0-6.147.84-9.275 2.54a28.433 28.433 0 0 0-3.735 2.448 28.059 28.059 0 0 0-3.442 3.135c-5.746 6.203-6.86 13.566-3.135 20.736a25.395 25.395 0 0 0 2.472 3.83 25.304 25.304 0 0 0 3.044 3.309c5.99 5.41 13.398 6.182 20.862 2.175a28.02 28.02 0 0 0 3.899-2.545 28.03 28.03 0 0 0 3.31-2.999c5.777-6.182 6.883-13.552 3.124-20.75a25.553 25.553 0 0 0-2.44-3.777 25.848 25.848 0 0 0-3.087-3.358c-3.49-3.153-7.442-4.744-11.59-4.744h-.006Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#DDDEE1",
+    d: "M62.822 59.694c-1.235-1.72-2.562-1.71-3.857-.708-1.215.939-1.54 2.21-.244 3.882l1.48 1.913 4.102-3.174-1.48-1.913Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#DDDEE1",
+    d: "m65.334 60.811-6.159 4.762L70.748 80.54l6.16-4.761L65.333 60.81Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#B7B9BE",
+    d: "m64.344 61.577-4.178 3.23 3.925 5.076 4.178-3.23-3.925-5.076Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#DDDEE1",
+    fillRule: "evenodd",
+    d: "M55.057 33.452 36.213 52.296l-2.468-2.469 18.844-18.844 2.468 2.469Z",
+    clipRule: "evenodd"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#DDDEE1",
+    fillRule: "evenodd",
+    d: "M52.589 52.296 33.745 33.452l2.468-2.469 18.844 18.844-2.468 2.469Z",
+    clipRule: "evenodd"
+  }));
+};

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,41 @@ 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_error_title: {
+    id: 'fabric.linking.related_links_modal_error_title',
+    defaultMessage: "We're having trouble loading related links",
+    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_error_description: {
+    id: 'fabric.linking.related_links_modal_error_description',
+    defaultMessage: 'Check your connection or refresh the page 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.3.0"
 };
 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.3.0",
   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/errored/index.js

@@ -7,12 +7,20 @@ 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 _genericErrorIcon = require("../../../../common/ui/icons/generic-error-icon");
 var _messages = require("../../../../messages");
 var _EmptyState = require("../../components/EmptyState");
 var _errorSvg = require("./error-svg");
 var RelatedLinksErroredView = function RelatedLinksErroredView() {
   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(_genericErrorIcon.GenericErrorIcon, null);
+    },
+    header: intl.formatMessage(_messages.messages.related_links_modal_error_title),
+    description: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.related_links_modal_error_description)
+  }) : /*#__PURE__*/_react.default.createElement(_EmptyState.EmptyState, {
     renderImage: function renderImage() {
       return /*#__PURE__*/_react.default.createElement(_errorSvg.ErrorSVG, null);
     },

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/common/ui/icons/generic-error-icon.compiled.css

@@ -0,0 +1,3 @@
+._1bsb16xz{width:6pc}
+._1e0c1ule{display:block}
+._4t3i16xz{height:6pc}

package/dist/es2019/common/ui/icons/generic-error-icon.js

@@ -0,0 +1,41 @@
+/* generic-error-icon.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./generic-error-icon.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+const SIZE = 96;
+const genericErrorStyles = null;
+export const GenericErrorIcon = props => {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 96 96",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props, {
+    className: ax(["_1bsb16xz _4t3i16xz _1e0c1ule"])
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    d: "M64.861 32.06a27.753 27.753 0 0 0-2.667-4.133 28.187 28.187 0 0 0-3.376-3.669c-6.985-6.311-15.57-6.89-23.609-2.53a30.226 30.226 0 0 0-4.056 2.656 30.624 30.624 0 0 0-3.735 3.4c-6.225 6.717-7.82 15.154-3.505 23.462a28.108 28.108 0 0 0 2.698 4.193 27.67 27.67 0 0 0 3.33 3.62c6.94 6.266 15.518 6.85 23.596 2.507a30.492 30.492 0 0 0 4.23-2.758 30.07 30.07 0 0 0 3.593-3.257c6.252-6.692 7.847-15.161 3.494-23.49h.007Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#DDDEE1",
+    d: "M43.092 66.774c-5.306 0-10.382-1.997-14.75-5.938a30.405 30.405 0 0 1-3.62-3.93 30.243 30.243 0 0 1-2.928-4.553c-4.657-8.961-3.247-18.509 3.871-26.192a33.271 33.271 0 0 1 4.025-3.67 32.834 32.834 0 0 1 4.378-2.869c9.209-4.995 18.816-3.951 26.353 2.86a30.945 30.945 0 0 1 3.665 3.98 30.303 30.303 0 0 1 2.898 4.488c4.705 9.003 3.295 18.565-3.868 26.231a32.148 32.148 0 0 1-3.879 3.515 33.415 33.415 0 0 1-4.562 2.975c-3.858 2.073-7.782 3.1-11.583 3.1v.003Zm2.53-45.486c-3.019 0-6.147.84-9.275 2.54a28.433 28.433 0 0 0-3.735 2.448 28.059 28.059 0 0 0-3.442 3.135c-5.746 6.203-6.86 13.566-3.135 20.736a25.395 25.395 0 0 0 2.472 3.83 25.304 25.304 0 0 0 3.044 3.309c5.99 5.41 13.398 6.182 20.862 2.175a28.02 28.02 0 0 0 3.899-2.545 28.03 28.03 0 0 0 3.31-2.999c5.777-6.182 6.883-13.552 3.124-20.75a25.553 25.553 0 0 0-2.44-3.777 25.848 25.848 0 0 0-3.087-3.358c-3.49-3.153-7.442-4.744-11.59-4.744h-.006Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#DDDEE1",
+    d: "M62.822 59.694c-1.235-1.72-2.562-1.71-3.857-.708-1.215.939-1.54 2.21-.244 3.882l1.48 1.913 4.102-3.174-1.48-1.913Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#DDDEE1",
+    d: "m65.334 60.811-6.159 4.762L70.748 80.54l6.16-4.761L65.333 60.81Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#B7B9BE",
+    d: "m64.344 61.577-4.178 3.23 3.925 5.076 4.178-3.23-3.925-5.076Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#DDDEE1",
+    fillRule: "evenodd",
+    d: "M55.057 33.452 36.213 52.296l-2.468-2.469 18.844-18.844 2.468 2.469Z",
+    clipRule: "evenodd"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#DDDEE1",
+    fillRule: "evenodd",
+    d: "M52.589 52.296 33.745 33.452l2.468-2.469 18.844 18.844-2.468 2.469Z",
+    clipRule: "evenodd"
+  }));
+};