@atlaskit/smart-card 36.2.6 → 36.2.7

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

@@ -2,13 +2,19 @@
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import { fg } from "@atlaskit/platform-feature-flags";
 import { SmartLinkStatus } from '../../../../constants';
 import { Card, ElementName, SmartLinkPosition, SmartLinkSize, SmartLinkTheme, TitleBlock } from '../../../../index';
+const hoverStyleOld = null;
 const hoverStyle = null;
+const baseStyle = null;
+const selectedStyle = null;
 const relatedLinkItemStyles = null;
 const RelatedLinkItem = ({
   url,
-  testId
+  testId,
+  isSelected,
+  onFocus
 }) => {
   const subtitle = [{
     name: ElementName.Provider,
@@ -20,11 +26,12 @@ const RelatedLinkItem = ({
     hideBackground: true,
     theme: SmartLinkTheme.Black,
     clickableContainer: true,
-    size: SmartLinkSize.Large
+    size: fg('platform-linking-visual-refresh-v2') ? SmartLinkSize.Medium : SmartLinkSize.Large
   };
   return /*#__PURE__*/React.createElement("div", {
     "data-testId": testId,
-    className: ax(["_8vu4iti9 _1mxox0bf _10swu2gc _irr31d5g"])
+    onFocus: onFocus,
+    className: ax([fg('platform-linking-visual-refresh-v2') && "_195gmgjw _18zrpxbi _1kl71vrj", fg('platform-linking-visual-refresh-v2') ? "_irr3166n _1di61dty" : "_8vu4iti9 _1mxox0bf _10swu2gc _irr31d5g", isSelected && fg('platform-linking-visual-refresh-v2') && "_1kl7neh2 _bfhkfg4m _irr3i1yw _1q5t1r31 _1ohyglyw _1r9x1o36 _1di619ru"])
   }, /*#__PURE__*/React.createElement(Card, {
     appearance: "block",
     ui: ui,
@@ -32,7 +39,7 @@ const RelatedLinkItem = ({
   }, /*#__PURE__*/React.createElement(TitleBlock, {
     maxLines: 1,
     hideTitleTooltip: true,
-    position: SmartLinkPosition.Center,
+    position: fg('platform-linking-visual-refresh-v2') ? SmartLinkPosition.Top : SmartLinkPosition.Center,
     subtitle: subtitle,
     anchorTarget: "_blank",
     size: ui.size,

package/dist/es2019/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/es2019/view/RelatedLinksModal/components/related-links-list/index.js

@@ -3,27 +3,38 @@ import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { FormattedMessage } from 'react-intl-next';
+import { fg } from "@atlaskit/platform-feature-flags";
 import { Box, Stack } from '@atlaskit/primitives/compiled';
 import { messages } from '../../../../messages';
 import RelatedLinkItem from '../related-link-item';
 const styles = {
-  sectionTitle: "_11c81vhk _1q511b66",
+  sectionTitleOld: "_11c81vhk _1q511b66",
+  sectionTitle: "_11c81vhk _syaz1gjq _1q511b66",
   boxStyle: "_11c81o8v _1rjcu2gc"
 };
 const RelatedLinksList = ({
   urls,
   title,
-  testId
+  testId,
+  selected,
+  handleSelectedUpdate
 }) => {
+  const TitleWrapper = ({
+    children
+  }) => fg('platform-linking-visual-refresh-v2') ? /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.sectionTitle
+  }, children) : /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.sectionTitleOld
+  }, children);
   return /*#__PURE__*/React.createElement(Stack, {
     testId: testId
-  }, /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.sectionTitle
-  }, /*#__PURE__*/React.createElement(FormattedMessage, title)), urls.length > 0 && /*#__PURE__*/React.createElement(Box, null, urls.map((url, idx) => /*#__PURE__*/React.createElement(Stack, {
+  }, /*#__PURE__*/React.createElement(TitleWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, title)), urls.length > 0 && /*#__PURE__*/React.createElement(Box, null, urls.map((url, idx) => /*#__PURE__*/React.createElement(Stack, {
     key: `${idx}-${url}`
   }, /*#__PURE__*/React.createElement(RelatedLinkItem, {
     url: url,
-    testId: `${testId}-item-${idx}`
+    testId: `${testId}-item-${idx}`,
+    isSelected: selected === `${idx}-${url}`,
+    onFocus: () => handleSelectedUpdate && handleSelectedUpdate(`${idx}-${url}`)
   })))), urls.length === 0 && /*#__PURE__*/React.createElement(Box, {
     xcss: styles.boxStyle
   }, /*#__PURE__*/React.createElement(FormattedMessage, messages.related_links_not_found)));

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

@@ -0,0 +1,11 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { RenderSVG } from '../../../../../common/render-svg';
+import Dark from './assets/dark.svg';
+import Light from './assets/light.svg';
+export const SpotSearchNoResult = props => {
+  return /*#__PURE__*/React.createElement(RenderSVG, _extends({
+    src: Light,
+    srcDark: Dark
+  }, props));
+};

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { fg } from "@atlaskit/platform-feature-flags";
 import { Stack } from '@atlaskit/primitives/compiled';
 import { messages } from '../../../../messages';
 import RelatedLinksList from '../../components/related-links-list';
@@ -7,6 +8,10 @@ const RelatedLinksResolvedView = ({
   incomingLinks = [],
   outgoingLinks = []
 }) => {
+  const [selected, setSelected] = React.useState("");
+  const handleSelectedUpdate = selectedKey => {
+    setSelected(selectedKey);
+  };
   return /*#__PURE__*/React.createElement(Stack, {
     space: "space.150"
   }, /*#__PURE__*/React.createElement(AnalyticsContext, {
@@ -15,16 +20,20 @@ const RelatedLinksResolvedView = ({
     }
   }, /*#__PURE__*/React.createElement(RelatedLinksList, {
     urls: incomingLinks,
-    title: messages.related_links_found_in,
-    testId: "incoming-related-links-list"
+    title: fg('platform-linking-visual-refresh-v2') ? messages.related_links_found_in_v2 : messages.related_links_found_in,
+    testId: "incoming-related-links-list",
+    selected: selected,
+    handleSelectedUpdate: handleSelectedUpdate
   })), /*#__PURE__*/React.createElement(AnalyticsContext, {
     data: {
       component: 'relatedLinksOutgoing'
     }
   }, /*#__PURE__*/React.createElement(RelatedLinksList, {
     urls: outgoingLinks,
-    title: messages.related_links_includes_links_to,
-    testId: "outgoing-related-links-list"
+    title: fg('platform-linking-visual-refresh-v2') ? messages.related_links_includes_links_to_v2 : messages.related_links_includes_links_to,
+    testId: "outgoing-related-links-list",
+    selected: selected,
+    handleSelectedUpdate: handleSelectedUpdate
   })));
 };
 export default RelatedLinksResolvedView;

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

@@ -1,11 +1,20 @@
 import React from 'react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
+import { fg } from "@atlaskit/platform-feature-flags";
 import { messages } from '../../../../messages';
 import { EmptyState } from '../../components/EmptyState';
+import { SpotSearchNoResult } from "../errored/error-svg/search-no-result";
 import { UnavailableSVG } from './unavailable-svg';
 const RelatedLinksUnavailableView = () => {
   const intl = useIntl();
-  return /*#__PURE__*/React.createElement(EmptyState, {
+  return fg('platform-linking-visual-refresh-v2') ? /*#__PURE__*/React.createElement(EmptyState, {
+    renderImage: () => /*#__PURE__*/React.createElement(SpotSearchNoResult, {
+      size: 'large',
+      alt: intl.formatMessage(messages.related_links_modal_unavailable_title)
+    }),
+    header: intl.formatMessage(messages.related_links_modal_unavailable_title),
+    description: /*#__PURE__*/React.createElement(FormattedMessage, messages.related_links_modal_unavailable_description)
+  }) : /*#__PURE__*/React.createElement(EmptyState, {
     renderImage: () => /*#__PURE__*/React.createElement(UnavailableSVG, null),
     header: intl.formatMessage(messages.related_links_modal_unavailable_header),
     description: /*#__PURE__*/React.createElement(FormattedMessage, messages.related_links_modal_unavailable_message)

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

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

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

@@ -0,0 +1,23 @@
+/* render-svg.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./render-svg.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import Image from '@atlaskit/image';
+const imageSizeStyles = {
+  xlarge: "_1bsb1lit",
+  large: "_1bsb53f4",
+  medium: "_1bsb1wqb"
+};
+export const RenderSVG = ({
+  alt,
+  size,
+  src,
+  srcDark
+}) => {
+  return /*#__PURE__*/React.createElement(Image, {
+    src: src,
+    srcDark: srcDark,
+    alt: alt,
+    className: ax([size && imageSizeStyles[size]])
+  });
+};

package/dist/esm/messages.js

@@ -700,16 +700,31 @@ export var 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 var 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/esm/utils/analytics/analytics.js

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

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

@@ -3,6 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["onClick"];
 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';
@@ -36,7 +37,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.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/esm/view/FlexibleCard/components/actions/view-related-links-action/related-links-action-icon/index.js

@@ -2,14 +2,20 @@
 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';
 var rotateSvg = null;
 
 /**
  * ChildIssuesIcon but 180 degrees rotated
  */
 var RelatedLinksActionIcon = function RelatedLinksActionIcon() {
-  return /*#__PURE__*/React.createElement("span", {
+  return 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/esm/view/LinkUrl/index.js

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

package/dist/esm/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';
@@ -38,8 +39,9 @@ var RelatedLinksBaseModal = function RelatedLinksBaseModal(_ref) {
     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/esm/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/esm/view/RelatedLinksModal/components/related-link-item/index.js

@@ -2,13 +2,19 @@
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import { fg } from "@atlaskit/platform-feature-flags";
 import { SmartLinkStatus } from '../../../../constants';
 import { Card, ElementName, SmartLinkPosition, SmartLinkSize, SmartLinkTheme, TitleBlock } from '../../../../index';
+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: ElementName.Provider,
     hideIcon: true
@@ -19,11 +25,15 @@ var RelatedLinkItem = function RelatedLinkItem(_ref) {
     hideBackground: true,
     theme: SmartLinkTheme.Black,
     clickableContainer: true,
-    size: SmartLinkSize.Large
+    size: fg('platform-linking-visual-refresh-v2') ? SmartLinkSize.Medium : SmartLinkSize.Large
   };
   return /*#__PURE__*/React.createElement("div", {
     "data-testId": testId,
-    className: ax(["_8vu4iti9 _1mxox0bf _10swu2gc _irr31d5g"])
+    onFocus: onFocus,
+    className: ax([fg('platform-linking-visual-refresh-v2') && "_195gmgjw _18zrpxbi _1kl71vrj", fg('platform-linking-visual-refresh-v2') ? "_irr3166n _1di61dty" : "_8vu4iti9 _1mxox0bf _10swu2gc _irr31d5g", isSelected && fg('platform-linking-visual-refresh-v2') && "_1kl7nmxp _bfhkfg4m _irr3i1yw _1q5t1r31 _1ohyglyw _1r9x1o36 _1di619ru"]),
+    style: {
+      "--_nu2mv8": ix("2px solid ".concat("var(--ds-border-selected, #0C66E4)"))
+    }
   }, /*#__PURE__*/React.createElement(Card, {
     appearance: "block",
     ui: ui,
@@ -31,7 +41,7 @@ var RelatedLinkItem = function RelatedLinkItem(_ref) {
   }, /*#__PURE__*/React.createElement(TitleBlock, {
     maxLines: 1,
     hideTitleTooltip: true,
-    position: SmartLinkPosition.Center,
+    position: fg('platform-linking-visual-refresh-v2') ? SmartLinkPosition.Top : SmartLinkPosition.Center,
     subtitle: subtitle,
     anchorTarget: "_blank",
     size: ui.size,

package/dist/esm/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/esm/view/RelatedLinksModal/components/related-links-list/index.js

@@ -3,27 +3,41 @@ import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { FormattedMessage } from 'react-intl-next';
+import { fg } from "@atlaskit/platform-feature-flags";
 import { Box, Stack } from '@atlaskit/primitives/compiled';
 import { messages } from '../../../../messages';
 import RelatedLinkItem from '../related-link-item';
 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 fg('platform-linking-visual-refresh-v2') ? /*#__PURE__*/React.createElement(Box, {
+      xcss: styles.sectionTitle
+    }, children) : /*#__PURE__*/React.createElement(Box, {
+      xcss: styles.sectionTitleOld
+    }, children);
+  };
   return /*#__PURE__*/React.createElement(Stack, {
     testId: testId
-  }, /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.sectionTitle
-  }, /*#__PURE__*/React.createElement(FormattedMessage, title)), urls.length > 0 && /*#__PURE__*/React.createElement(Box, null, urls.map(function (url, idx) {
+  }, /*#__PURE__*/React.createElement(TitleWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, title)), urls.length > 0 && /*#__PURE__*/React.createElement(Box, null, urls.map(function (url, idx) {
     return /*#__PURE__*/React.createElement(Stack, {
       key: "".concat(idx, "-").concat(url)
     }, /*#__PURE__*/React.createElement(RelatedLinkItem, {
       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(Box, {
     xcss: styles.boxStyle

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

@@ -0,0 +1,11 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { RenderSVG } from '../../../../../common/render-svg';
+import Dark from './assets/dark.svg';
+import Light from './assets/light.svg';
+export var SpotSearchNoResult = function SpotSearchNoResult(props) {
+  return /*#__PURE__*/React.createElement(RenderSVG, _extends({
+    src: Light,
+    srcDark: Dark
+  }, props));
+};

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

@@ -1,5 +1,7 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React from 'react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { fg } from "@atlaskit/platform-feature-flags";
 import { Stack } from '@atlaskit/primitives/compiled';
 import { messages } from '../../../../messages';
 import RelatedLinksList from '../../components/related-links-list';
@@ -8,6 +10,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.useState(""),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    selected = _React$useState2[0],
+    setSelected = _React$useState2[1];
+  var handleSelectedUpdate = function handleSelectedUpdate(selectedKey) {
+    setSelected(selectedKey);
+  };
   return /*#__PURE__*/React.createElement(Stack, {
     space: "space.150"
   }, /*#__PURE__*/React.createElement(AnalyticsContext, {
@@ -16,16 +25,20 @@ var RelatedLinksResolvedView = function RelatedLinksResolvedView(_ref) {
     }
   }, /*#__PURE__*/React.createElement(RelatedLinksList, {
     urls: incomingLinks,
-    title: messages.related_links_found_in,
-    testId: "incoming-related-links-list"
+    title: fg('platform-linking-visual-refresh-v2') ? messages.related_links_found_in_v2 : messages.related_links_found_in,
+    testId: "incoming-related-links-list",
+    selected: selected,
+    handleSelectedUpdate: handleSelectedUpdate
   })), /*#__PURE__*/React.createElement(AnalyticsContext, {
     data: {
       component: 'relatedLinksOutgoing'
     }
   }, /*#__PURE__*/React.createElement(RelatedLinksList, {
     urls: outgoingLinks,
-    title: messages.related_links_includes_links_to,
-    testId: "outgoing-related-links-list"
+    title: fg('platform-linking-visual-refresh-v2') ? messages.related_links_includes_links_to_v2 : messages.related_links_includes_links_to,
+    testId: "outgoing-related-links-list",
+    selected: selected,
+    handleSelectedUpdate: handleSelectedUpdate
   })));
 };
 export default RelatedLinksResolvedView;

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

@@ -1,11 +1,22 @@
 import React from 'react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
+import { fg } from "@atlaskit/platform-feature-flags";
 import { messages } from '../../../../messages';
 import { EmptyState } from '../../components/EmptyState';
+import { SpotSearchNoResult } from "../errored/error-svg/search-no-result";
 import { UnavailableSVG } from './unavailable-svg';
 var RelatedLinksUnavailableView = function RelatedLinksUnavailableView() {
   var intl = useIntl();
-  return /*#__PURE__*/React.createElement(EmptyState, {
+  return fg('platform-linking-visual-refresh-v2') ? /*#__PURE__*/React.createElement(EmptyState, {
+    renderImage: function renderImage() {
+      return /*#__PURE__*/React.createElement(SpotSearchNoResult, {
+        size: 'large',
+        alt: intl.formatMessage(messages.related_links_modal_unavailable_title)
+      });
+    },
+    header: intl.formatMessage(messages.related_links_modal_unavailable_title),
+    description: /*#__PURE__*/React.createElement(FormattedMessage, messages.related_links_modal_unavailable_description)
+  }) : /*#__PURE__*/React.createElement(EmptyState, {
     renderImage: function renderImage() {
       return /*#__PURE__*/React.createElement(UnavailableSVG, null);
     },

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

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

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

@@ -0,0 +1,22 @@
+/* render-svg.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./render-svg.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import Image from '@atlaskit/image';
+var imageSizeStyles = {
+  xlarge: "_1bsb1lit",
+  large: "_1bsb53f4",
+  medium: "_1bsb1wqb"
+};
+export var RenderSVG = function RenderSVG(_ref) {
+  var alt = _ref.alt,
+    size = _ref.size,
+    src = _ref.src,
+    srcDark = _ref.srcDark;
+  return /*#__PURE__*/React.createElement(Image, {
+    src: src,
+    srcDark: srcDark,
+    alt: alt,
+    className: ax([size && imageSizeStyles[size]])
+  });
+};

package/dist/types/messages.d.ts

@@ -1,6 +1,6 @@
 import { type MessageDescriptor } from 'react-intl-next';
 export type RequestAccessMessageKey = 'click_to_join' | 'click_to_join_description' | 'forbidden_description' | 'request_access' | 'request_access_description' | 'request_access_pending' | 'request_access_pending_title' | 'request_access_pending_description' | 'request_denied_description' | 'default_no_access_title' | 'direct_access_title' | 'direct_access_description' | 'direct_access' | 'access_exists_description' | 'not_found_description' | 'not_found_title';
-export type MessageKey = 'assigned_to' | 'ai_summarize' | 'ai_summarized' | 'ai_summarized_abbreviation' | 'ai_summarized_info' | 'ai_summarized_info_short' | 'ai_summarizing' | 'ai_summary_error_generic' | 'ai_summary_error_acceptable_use_violation' | 'ai_summary_error_hipaa_content_detected' | 'ai_summary_error_exceeding_context_length_error' | 'ai_summary_action' | 'ai_summary_action_description' | 'automation_action_title' | 'automation_action_tooltip' | 'automation_action_icon_label' | 'automation_action_confluence_page_modal_title' | 'automation_action_confluence_page_modal_description' | 'copy_summary_action' | 'copy_summary_action_description' | 'copied_summary_action_description' | 'beta' | 'cannot_find_link' | 'connect_link_account_card' | 'connect_link_account_card_name' | 'connect_link_account_card_description' | 'connect_unauthorised_account_action' | 'connect_unauthorised_account_description' | 'connect_unauthorised_account_description_no_provider' | 'continue' | 'copy_url_to_clipboard' | 'copied_url_to_clipboard' | 'could_not_load_link' | 'download' | 'download_description' | 'download_file' | 'follow' | 'follow_project_description' | 'follow_project' | 'follow_goal' | 'follow_goal_description' | 'follow_project_error' | 'follow_goal_error' | 'go_back' | 'invalid_permissions' | 'invalid_permissions_description' | 'join_to_view' | 'connect_link_account' | 'created_by' | 'created_on_relative' | 'created_on_absolute' | 'check_this_link' | 'delete' | 'edit' | 'learn_more_about_smart_links' | 'learn_more_about_connecting_account' | 'loading' | 'link_safety_warning_message' | 'modified_by' | 'modified_on_relative' | 'modified_on_absolute' | 'more_actions' | 'more_information_about_this_work_item' | 'not_found_title' | 'not_found_description' | 'open_issue_in_jira' | 'open_link_in_a_new_tab' | 'owned_by' | 'preview_description' | 'preview_improved' | 'preview_close' | 'preview_max_size' | 'preview_min_size' | 'priority_blocker' | 'priority_critical' | 'priority_high' | 'priority_highest' | 'priority_low' | 'priority_lowest' | 'priority_major' | 'priority_medium' | 'priority_minor' | 'priority_trivial' | 'priority_undefined' | 'forbidden_access' | 'pending_request' | 'read_time' | 'restricted_link' | 'request_access_to_view' | 'request_denied' | 'sent_on_relative' | 'sent_on_absolute' | 'status_change_load_error' | 'status_change_permission_error' | 'status_change_update_error' | 'try_again' | 'try_another_account' | 'unauthorised_account_description' | 'unauthorised_account_description_no_provider' | 'unauthorised_account_name' | 'unauthorised_account_name_no_provider' | 'unassigned' | 'unfollow' | 'unfollow_project_description' | 'unfollow_project' | 'unfollow_project_error' | 'unfollow_goal' | 'unfollow_goal_description' | 'unfollow_goal_error' | 'view' | 'viewIn' | 'viewOriginal' | 'actions' | 'add_account' | 'cancel' | 'close' | 'connect_to' | 'connect_account_description' | 'retry' | 'save' | 'unlink_account' | RequestAccessMessageKey | 'related' | 'generic_error_message' | 'related_links_modal_error_header' | 'related_links_modal_error_message' | 'related_links_modal_unavailable_header' | 'related_links_modal_unavailable_message' | 'related_links_modal_title' | 'related_links_view_related_urls' | 'related_links_found_in' | 'related_links_includes_links_to' | 'related_links_not_found' | 'join_to_viewIssueTermRefresh' | 'open_issue_in_jiraIssueTermRefresh' | 'request_access_to_viewIssueTermRefresh' | 'status_change_permission_errorIssueTermRefresh';
+export type MessageKey = 'assigned_to' | 'ai_summarize' | 'ai_summarized' | 'ai_summarized_abbreviation' | 'ai_summarized_info' | 'ai_summarized_info_short' | 'ai_summarizing' | 'ai_summary_error_generic' | 'ai_summary_error_acceptable_use_violation' | 'ai_summary_error_hipaa_content_detected' | 'ai_summary_error_exceeding_context_length_error' | 'ai_summary_action' | 'ai_summary_action_description' | 'automation_action_title' | 'automation_action_tooltip' | 'automation_action_icon_label' | 'automation_action_confluence_page_modal_title' | 'automation_action_confluence_page_modal_description' | 'copy_summary_action' | 'copy_summary_action_description' | 'copied_summary_action_description' | 'beta' | 'cannot_find_link' | 'connect_link_account_card' | 'connect_link_account_card_name' | 'connect_link_account_card_description' | 'connect_unauthorised_account_action' | 'connect_unauthorised_account_description' | 'connect_unauthorised_account_description_no_provider' | 'continue' | 'copy_url_to_clipboard' | 'copied_url_to_clipboard' | 'could_not_load_link' | 'download' | 'download_description' | 'download_file' | 'follow' | 'follow_project_description' | 'follow_project' | 'follow_goal' | 'follow_goal_description' | 'follow_project_error' | 'follow_goal_error' | 'go_back' | 'invalid_permissions' | 'invalid_permissions_description' | 'join_to_view' | 'connect_link_account' | 'created_by' | 'created_on_relative' | 'created_on_absolute' | 'check_this_link' | 'delete' | 'edit' | 'learn_more_about_smart_links' | 'learn_more_about_connecting_account' | 'loading' | 'link_safety_warning_message' | 'modified_by' | 'modified_on_relative' | 'modified_on_absolute' | 'more_actions' | 'more_information_about_this_work_item' | 'not_found_title' | 'not_found_description' | 'open_issue_in_jira' | 'open_link_in_a_new_tab' | 'owned_by' | 'preview_description' | 'preview_improved' | 'preview_close' | 'preview_max_size' | 'preview_min_size' | 'priority_blocker' | 'priority_critical' | 'priority_high' | 'priority_highest' | 'priority_low' | 'priority_lowest' | 'priority_major' | 'priority_medium' | 'priority_minor' | 'priority_trivial' | 'priority_undefined' | 'forbidden_access' | 'pending_request' | 'read_time' | 'restricted_link' | 'request_access_to_view' | 'request_denied' | 'sent_on_relative' | 'sent_on_absolute' | 'status_change_load_error' | 'status_change_permission_error' | 'status_change_update_error' | 'try_again' | 'try_another_account' | 'unauthorised_account_description' | 'unauthorised_account_description_no_provider' | 'unauthorised_account_name' | 'unauthorised_account_name_no_provider' | 'unassigned' | 'unfollow' | 'unfollow_project_description' | 'unfollow_project' | 'unfollow_project_error' | 'unfollow_goal' | 'unfollow_goal_description' | 'unfollow_goal_error' | 'view' | 'viewIn' | 'viewOriginal' | 'actions' | 'add_account' | 'cancel' | 'close' | 'connect_to' | 'connect_account_description' | 'retry' | 'save' | 'unlink_account' | RequestAccessMessageKey | 'related' | 'generic_error_message' | 'related_links_modal_error_header' | 'related_links_modal_error_message' | 'related_links_modal_unavailable_header' | 'related_links_modal_unavailable_title' | 'related_links_modal_unavailable_message' | 'related_links_modal_unavailable_description' | 'related_links_modal_title' | 'related_links_modal_title_v2' | 'related_links_view_related_urls' | 'related_links_view_related_links' | 'related_links_found_in' | 'related_links_found_in_v2' | 'related_links_includes_links_to' | 'related_links_includes_links_to_v2' | 'related_links_not_found' | 'join_to_viewIssueTermRefresh' | 'open_issue_in_jiraIssueTermRefresh' | 'request_access_to_viewIssueTermRefresh' | 'status_change_permission_errorIssueTermRefresh';
 type Messages = {
     [K in MessageKey]: MessageDescriptor;
 };

package/dist/types/view/RelatedLinksModal/components/related-link-item/index.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { type RelatedLinkItemProp } from '../types';
-declare const RelatedLinkItem: ({ url, testId }: RelatedLinkItemProp) => JSX.Element;
+declare const RelatedLinkItem: ({ url, testId, isSelected, onFocus }: RelatedLinkItemProp) => JSX.Element;
 export default RelatedLinkItem;