@atlaskit/smart-card 36.2.6 → 36.3.0

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,41 @@ 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_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/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.3.0"
 };
 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.3.0",
   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}

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/errored/index.js

@@ -1,11 +1,17 @@
 import React from 'react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
+import { fg } from "@atlaskit/platform-feature-flags";
+import { GenericErrorIcon } from "../../../../common/ui/icons/generic-error-icon";
 import { messages } from '../../../../messages';
 import { EmptyState } from '../../components/EmptyState';
 import { ErrorSVG } from './error-svg';
 const RelatedLinksErroredView = () => {
   const intl = useIntl();
-  return /*#__PURE__*/React.createElement(EmptyState, {
+  return fg('platform-linking-visual-refresh-v2') ? /*#__PURE__*/React.createElement(EmptyState, {
+    renderImage: () => /*#__PURE__*/React.createElement(GenericErrorIcon, null),
+    header: intl.formatMessage(messages.related_links_modal_error_title),
+    description: /*#__PURE__*/React.createElement(FormattedMessage, messages.related_links_modal_error_description)
+  }) : /*#__PURE__*/React.createElement(EmptyState, {
     renderImage: () => /*#__PURE__*/React.createElement(ErrorSVG, null),
     header: intl.formatMessage(messages.related_links_modal_error_header),
     description: /*#__PURE__*/React.createElement(FormattedMessage, messages.related_links_modal_error_message)

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

@@ -0,0 +1,44 @@
+/* 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";
+var SIZE = 96;
+var genericErrorStyles = null;
+export var GenericErrorIcon = function 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(["_1bsbwdok _4t3iwdok _1e0c1ule"]),
+    style: {
+      "--_cjikvn": 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/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,41 @@ 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_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/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.3.0"
 };
 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.3.0",
   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}