@atlaskit/smart-card 27.1.0 → 27.2.1

package/dist/es2019/view/BlockCard/views/NotFoundView.js

@@ -36,7 +36,9 @@ export const NotFoundView = ({
   const handleClick = event => handleClickCommon(event, onClick);
   return jsx(Frame, {
     isSelected: isSelected,
-    testId: testId,
+    testId: testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: blockCardNotFoundViewClassName,
     isFluidHeight: true
   }, jsx(Content, {

package/dist/es2019/view/BlockCard/views/ResolvedView.js

@@ -63,14 +63,18 @@ export const ResolvedView = ({
     items: details
   }) : undefined;
   const resolvedByline = jsx(Byline, {
-    testId: testId ? `${testId}-by` : undefined,
+    testId: testId ? `${testId}-by` : undefined
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: blockCardResolvedViewByClassName
   }, byline);
   const handleClick = event => handleClickCommon(event, onClick);
   const hasActions = actions.length > 0;
   return jsx(Frame, {
     isSelected: isSelected,
-    testId: testId,
+    testId: testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: blockCardResolvedViewClassName
   }, jsx(Content, null, jsx("div", null, jsx("div", {
     css: styles

package/dist/es2019/view/BlockCard/views/ResolvingView.js

@@ -22,7 +22,9 @@ export const ResolvingView = ({
   inheritDimensions: inheritDimensions,
   compact: true,
   isSelected: isSelected,
-  testId: testId,
+  testId: testId
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  ,
   className: blockCardResolvingViewClassName
 }, jsx(DocumentFilledIcon, {
   size: "small",

package/dist/es2019/view/CardWithUrl/component-lazy/LazyIntersectionObserverCard.js

@@ -43,6 +43,8 @@ export function LazyIntersectionObserverCard(props) {
   const content = isIntersecting ? /*#__PURE__*/React.createElement(CardWithUrlContent, props) : /*#__PURE__*/React.createElement(ComponentObserver, {
     ref: ref
   }, /*#__PURE__*/React.createElement(LoadingCardLink, props));
+
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   return /*#__PURE__*/React.createElement(Component, {
     className: "loader-wrapper"
   }, content);

package/dist/es2019/view/CardWithUrl/component-lazy/LazyLazilyRenderCard.js

@@ -16,7 +16,9 @@ export function LazyLazilyRenderCard(props) {
   });
   return /*#__PURE__*/React.createElement(LazilyRender, {
     offset: offset,
-    component: appearance === 'inline' ? 'span' : 'div',
+    component: appearance === 'inline' ? 'span' : 'div'
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: "loader-wrapper",
     placeholder: /*#__PURE__*/React.createElement(LoadingCardLink, props),
     scrollContainer: container,

package/dist/es2019/view/CardWithUrl/component-lazy/LoadingCardLink.js

@@ -11,7 +11,9 @@ export const LoadingCardLink = ({
     testId: 'lazy-render-placeholder',
     "data-trello-do-not-use-override": "lazy-render-placeholder-trello",
     isSelected: isSelected,
-    link: url,
+    link: url
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: loadingPlaceholderClassName,
     placeholder: placeholder
   });

package/dist/es2019/view/CardWithUrl/component.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useCallback, useMemo } from 'react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { useFeatureFlag } from '@atlaskit/link-provider';
+import { SmartLinkModalProvider } from '../../state/modal';
 import { combineFrameStyle, isSpecialEvent } from '../../utils';
 import * as measure from '../../utils/performance';
 import { getDefinitionId, getServices, isFinalState, getClickUrl, getResourceType, getExtensionKey, getSubproduct, getProduct, getCanBeDatasource } from '../../state/helpers';
@@ -265,9 +266,9 @@ function Component({
 }
 export const CardWithUrlContent = props => {
   const display = isFlexibleUiCard(props.children) ? CardDisplay.Flexible : props.appearance;
-  return /*#__PURE__*/React.createElement(SmartLinkAnalyticsContext, {
+  return /*#__PURE__*/React.createElement(SmartLinkModalProvider, null, /*#__PURE__*/React.createElement(SmartLinkAnalyticsContext, {
     url: props.url,
     id: props.id,
     display: display
-  }, /*#__PURE__*/React.createElement(Component, props));
+  }, /*#__PURE__*/React.createElement(Component, props)));
 };

package/dist/es2019/view/EmbedCard/components/ExpandedFrame.js

@@ -23,7 +23,10 @@ export const ExpandedFrame = ({
   const handleClick = event => handleClickCommon(event, onClick);
   const handleMouseDown = useMouseDownEvent();
   const isFixEmbedCardBlurEnabled = getBooleanFF('platform.linking-platform.smart-card.fix-embed-card-blurring') ? true : false;
-  const renderHeaderOld = () => /*#__PURE__*/React.createElement(Header, {
+  const renderHeaderOld = () =>
+  /*#__PURE__*/
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  React.createElement(Header, {
     className: "embed-header",
     frameStyle: frameStyle
   }, /*#__PURE__*/React.createElement(IconWrapper, {
@@ -35,7 +38,10 @@ export const ExpandedFrame = ({
     onClick: handleClick,
     onMouseDown: handleMouseDown
   }, text)));
-  const renderHeader = () => /*#__PURE__*/React.createElement(Header, {
+  const renderHeader = () =>
+  /*#__PURE__*/
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  React.createElement(Header, {
     className: "embed-header",
     frameStyle: frameStyle
   }, /*#__PURE__*/React.createElement(IconWrapper, {
@@ -58,7 +64,9 @@ export const ExpandedFrame = ({
     frameStyle: frameStyle
   }, children);
   if (!isPlaceholder && href) {
-    return /*#__PURE__*/React.createElement(LinkWrapper, {
+    return /*#__PURE__*/React.createElement(LinkWrapper
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    , {
       className: className,
       isInteractive: isInteractive(),
       isSelected: isSelected,
@@ -73,7 +81,9 @@ export const ExpandedFrame = ({
       inheritDimensions: inheritDimensions
     }, getBooleanFF('platform.linking-platform.smart-card.enable-embed-card-header-tooltip_g9saw') ? renderHeader() : renderHeaderOld(), renderContent());
   } else {
-    return /*#__PURE__*/React.createElement(Wrapper, {
+    return /*#__PURE__*/React.createElement(Wrapper
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    , {
       className: className,
       isInteractive: isInteractive(),
       isSelected: isSelected,

package/dist/es2019/view/EmbedCard/components/ImageIcon.js

@@ -15,7 +15,9 @@ export const ImageIcon = ({
   return /*#__PURE__*/React.createElement(ImageLoader, {
     src: src,
     loading: defaultIcon,
-    loaded: /*#__PURE__*/React.createElement(Image, {
+    loaded: /*#__PURE__*/React.createElement(Image
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    , {
       className: "smart-link-icon",
       src: src,
       alt: alt,

package/dist/es2019/view/EmbedModal/components/link-info/index.js

@@ -59,14 +59,17 @@ const LinkInfo = ({
     }) : jsx(VidFullScreenOnIcon, {
       label: message.defaultMessage
     });
-    return jsx("span", {
-      className: "smart-link-resize-button"
-    }, jsx(LinkInfoButton, {
-      content: jsx(FormattedMessage, message),
-      icon: icon,
-      onClick: onResizeButtonClick,
-      testId: `${testId}-resize`
-    }));
+    return (
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      jsx("span", {
+        className: "smart-link-resize-button"
+      }, jsx(LinkInfoButton, {
+        content: jsx(FormattedMessage, message),
+        icon: icon,
+        onClick: onResizeButtonClick,
+        testId: `${testId}-resize`
+      }))
+    );
   }, [onResizeButtonClick, size, testId]);
   return jsx("div", {
     css: containerStyles

package/dist/es2019/view/FlexibleCard/components/actions/follow-action/unfollow-icon/index.js

@@ -6,7 +6,9 @@ const UnfollowGlyph = props => /*#__PURE__*/React.createElement("svg", {
   height: "16",
   viewBox: "0 0 16 16",
   "data-testid": props['data-testid'],
-  "aria-label": props['aria-label'],
+  "aria-label": props['aria-label']
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  ,
   className: props.className,
   role: "presentation",
   xmlns: "http://www.w3.org/2000/svg"

package/dist/es2019/view/FlexibleCard/components/blocks/action-group/index.js

@@ -103,7 +103,9 @@ const ActionGroup = ({
     return null;
   }, [appearance, isMoreThenTwoItems, isOpen, onActionItemClick, onOpenChange, renderableActionItems, size, ui === null || ui === void 0 ? void 0 : ui.zIndex, visibleButtonsNum]);
   return renderableActionItems.length > 0 ? jsx("div", {
-    css: styles,
+    css: styles
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: "actions-button-group",
     "data-action-open": isOpen
   }, jsx(ButtonGroup, null, actionButtons, moreActionDropdown)) : null;

package/dist/es2019/view/FlexibleCard/components/blocks/title-block/errored/index.js

@@ -63,6 +63,7 @@ const TitleBlockErroredView = ({
     direction: SmartLinkDirection.Horizontal,
     align: SmartLinkAlignment.Right
   }, jsx("span", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: hasAction ? 'has-action' : '',
     css: getMessageStyles(size, hasAction),
     onClick: onClick,

package/dist/es2019/view/FlexibleCard/components/common/motion-wrapper/index.js

@@ -24,13 +24,16 @@ export const MotionWrapper = ({
     style: {
       height,
       minHeight,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       lineHeight: 0,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       overflow: 'hidden',
       // a fit for purpose state variable to control when the 'visible' styles should be appled
       opacity: height > 0 ? 1 : 0,
       // we only want to transition opacity and height when the error message is initially shown
       // not if its to be shown on mount
       transitionProperty: showTransition ? transition : 'none',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       transitionDuration: '0.3s'
     },
     ref: ref

package/dist/es2019/view/FlexibleCard/components/container/layered-link/index.js

@@ -49,6 +49,7 @@ const LayeredLink = ({
 }) => {
   const onMouseDown = useMouseDownEvent();
   return jsx("a", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "layered-link",
     css: styles,
     "data-testid": `${testId}-layered-link`,

package/dist/es2019/view/FlexibleCard/components/elements/lozenge/index.js

@@ -35,7 +35,9 @@ const Lozenge = ({
     text: text,
     zIndex: ui === null || ui === void 0 ? void 0 : ui.zIndex
   }) : jsx(AtlaskitLozenge, {
-    appearance: appearance,
+    appearance: appearance
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
     style: style,
     testId: `${testId}-lozenge`
   }, text);

package/dist/es2019/view/HoverCard/components/ContentContainer.js

@@ -45,6 +45,7 @@ const ConnectedAIPrismContainer = ({
     setShowPrism(status === 'loading');
   }, [status]);
   const container = jsx("div", _extends({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: hoverCardClassName,
     css: [HoverCardContainer, !isAIEnabled ? popupContainerStyles : undefined],
     "data-testid": testId
@@ -69,6 +70,7 @@ const ContentContainer = ({
     }, props), children);
   }
   return jsx("div", _extends({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: hoverCardClassName,
     css: HoverCardContainer,
     "data-testid": testId

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

@@ -4,6 +4,7 @@ import { jsx } from '@emotion/react';
 import { useCallback } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { useSmartLinkAnalytics } from '../../state/analytics';
+import { SmartLinkModalProvider } from '../../state/modal';
 import { HoverCardComponent } from './components/HoverCardComponent';
 import { CardDisplay } from '../../constants';
 import { di } from 'react-magnetic-di';
@@ -25,7 +26,7 @@ const HoverCardWithErrorBoundary = props => {
   return jsx(ErrorBoundary, {
     fallback: children,
     onError: onError
-  }, jsx(HoverCardComponent, props, children));
+  }, jsx(SmartLinkModalProvider, null, jsx(HoverCardComponent, props, children)));
 };
 const HoverCardWithoutAnalyticsContext = withAnalyticsEvents()(HoverCardWithErrorBoundary);
 

package/dist/es2019/view/InlineCard/Frame/index.js

@@ -44,7 +44,9 @@ export const Frame = /*#__PURE__*/forwardRef((props, ref) => {
     onClick: handleClick,
     onMouseDown: handleMouseDown,
     onKeyPress: handleKeyPress,
-    "data-testid": testId,
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: className,
     ref: ref,
     isHovered: isHovered

package/dist/es2019/view/InlineCard/Icon.js

@@ -43,7 +43,9 @@ export const Shimmer = ({
     width: 14,
     height: 14,
     borderRadius: 2,
-    testId: testId,
+    testId: testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
     style: skeletonCustomStyles
   });
 };

package/dist/es2019/view/InlineCard/IconAndTitleLayout/index.js

@@ -54,7 +54,9 @@ export class IconAndTitleLayout extends React.Component {
     }
     return /*#__PURE__*/React.createElement(ImageLoader, {
       src: url,
-      loaded: /*#__PURE__*/React.createElement(Icon, {
+      loaded: /*#__PURE__*/React.createElement(Icon
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      , {
         className: "smart-link-icon",
         src: url,
         "data-testid": `${testId}-image`
@@ -101,22 +103,30 @@ export class IconAndTitleLayout extends React.Component {
       rightSide,
       testId = 'inline-card-icon-and-title'
     } = this.props;
-    const titlePart = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconPositionWrapper, null, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconEmptyWrapper, null), this.renderIcon(testId))), /*#__PURE__*/React.createElement(TitleWrapper, {
+    const titlePart = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconPositionWrapper, null, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconEmptyWrapper, null), this.renderIcon(testId))), /*#__PURE__*/React.createElement(TitleWrapper
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    , {
       style: {
         color: titleTextColor
-      },
+      }
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
       className: TitleWrapperClassName
     }, title));
-    return /*#__PURE__*/React.createElement(IconTitleWrapper, {
-      style: {
-        color: titleColor
-      },
-      "data-testid": testId
-    }, link ? /*#__PURE__*/React.createElement(LinkAppearance, {
-      href: link,
-      onClick: this.handleClick,
-      onKeyPress: this.handleKeyPress
-    }, titlePart) : titlePart, rightSide ? /*#__PURE__*/React.createElement(NoLinkAppearance, null, rightSide) : null);
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      React.createElement(IconTitleWrapper, {
+        style: {
+          color: titleColor
+        },
+        "data-testid": testId
+      }, link ? /*#__PURE__*/React.createElement(LinkAppearance, {
+        href: link,
+        onClick: this.handleClick,
+        onKeyPress: this.handleKeyPress
+      }, titlePart) : titlePart, rightSide ? /*#__PURE__*/React.createElement(NoLinkAppearance, null, rightSide) : null)
+    );
   }
 }
 _defineProperty(IconAndTitleLayout, "defaultProps", {

package/dist/es2019/view/InlineCard/ResolvedView/index.js

@@ -15,7 +15,9 @@ export class InlineCardResolvedView extends React.Component {
     const appearance = lozenge.appearance || 'default';
     return /*#__PURE__*/React.createElement(LozengeWrapper, null, /*#__PURE__*/React.createElement(Lozenge, {
       testId: "inline-card-resolved-view-lozenge",
-      appearance: appearance,
+      appearance: appearance
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      ,
       style: lozenge.style,
       isBold: lozenge.isBold
     }, lozenge.text));

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

@@ -7,7 +7,7 @@ import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-m
 import LinkWarningModal from './LinkWarningModal';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "27.1.0",
+  packageVersion: "27.2.1",
   componentName: 'linkUrl'
 };
 const Link = withLinkClickedEvent('a');

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

@@ -1,18 +1,21 @@
-import React from 'react';
+/** @jsx jsx */
+
+import { jsx } from '@emotion/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 { messages } from '../../../messages';
-const RelatedLinksModal = ({
+const RelatedLinksBaseModal = ({
   onClose,
   showModal,
   children
 }) => {
-  return /*#__PURE__*/React.createElement(ModalTransition, null, showModal && /*#__PURE__*/React.createElement(Modal, {
-    onClose: onClose
-  }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.related_links_modal_title_nonfinal))), /*#__PURE__*/React.createElement(ModalBody, null, children), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+  return jsx(ModalTransition, null, showModal && jsx(Modal, {
+    onClose: onClose,
+    width: "small"
+  }, jsx(ModalHeader, null, jsx(ModalTitle, null, jsx(FormattedMessage, messages.related_links_modal_title))), jsx(ModalBody, null, children), jsx(ModalFooter, null, jsx(Button, {
     appearance: "primary",
     onClick: onClose
-  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.close)))));
+  }, jsx(FormattedMessage, messages.close)))));
 };
-export default RelatedLinksModal;
+export default RelatedLinksBaseModal;

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

@@ -0,0 +1,50 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import { Box, xcss } from '@atlaskit/primitives';
+import { Card, ElementName, SmartLinkPosition, SmartLinkSize, SmartLinkTheme, TitleBlock } from '../../../../index';
+const hoverStyles = xcss({
+  ':hover': {
+    backgroundColor: 'color.background.input.hovered',
+    borderRadius: 'border.radius.100',
+    marginInline: 'space.negative.100',
+    paddingInline: 'space.100'
+  }
+});
+const relatedLinkItemStyles = css({
+  paddingTop: "var(--ds-space-100, 8px)",
+  paddingBottom: "var(--ds-space-100, 8px)",
+  gap: "var(--ds-space-150, 12px)",
+  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+});
+const RelatedLinkItem = ({
+  url,
+  testId
+}) => {
+  const subtitle = [{
+    name: ElementName.Provider
+  }];
+  const ui = {
+    hideElevation: true,
+    hidePadding: true,
+    hideBackground: true,
+    theme: SmartLinkTheme.Black,
+    clickableContainer: true,
+    size: SmartLinkSize.Large
+  };
+  return jsx(Box, {
+    testId: testId,
+    xcss: hoverStyles
+  }, jsx(Card, {
+    appearance: "block",
+    ui: ui,
+    url: url
+  }, jsx(TitleBlock, {
+    maxLines: 1,
+    hideTitleTooltip: true,
+    position: SmartLinkPosition.Center,
+    subtitle: subtitle,
+    overrideCss: relatedLinkItemStyles,
+    anchorTarget: "_blank"
+  })));
+};
+export default RelatedLinkItem;

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

@@ -0,0 +1,33 @@
+/** @jsx jsx */
+
+import { jsx } from '@emotion/react';
+import { FormattedMessage } from 'react-intl-next';
+import { Box, Stack, xcss } from '@atlaskit/primitives';
+import RelatedLinkItem from '../related-link-item';
+import { messages } from '../../../../messages';
+const RelatedLinksList = ({
+  urls,
+  title,
+  testId
+}) => {
+  return jsx(Stack, {
+    testId: testId
+  }, jsx(Box, {
+    paddingBlockStart: "space.050",
+    xcss: xcss({
+      font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+      textTransform: 'uppercase'
+    })
+  }, jsx(FormattedMessage, title)), urls.length > 0 && jsx(Box, null, urls.map((url, idx) => jsx(Stack, {
+    key: `${idx}-${url}`
+  }, jsx(RelatedLinkItem, {
+    url: url,
+    testId: `${testId}-item-${idx}`
+  })))), urls.length === 0 && jsx(Box, {
+    paddingBlock: "space.100",
+    xcss: xcss({
+      font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+    })
+  }, jsx(FormattedMessage, messages.related_links_not_found)));
+};
+export default RelatedLinksList;

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

@@ -0,0 +1,23 @@
+/** @jsx jsx */
+
+import { jsx } from '@emotion/react';
+import { messages } from '../../../../messages';
+import RelatedLinksList from '../../components/related-links-list';
+import { Stack } from '@atlaskit/primitives';
+const RelatedLinksResolvedView = ({
+  incomingLinks = [],
+  outgoingLinks = []
+}) => {
+  return jsx(Stack, {
+    space: "space.150"
+  }, jsx(RelatedLinksList, {
+    urls: incomingLinks,
+    title: messages.related_links_found_in,
+    testId: "incoming-related-links-list"
+  }), jsx(RelatedLinksList, {
+    urls: outgoingLinks,
+    title: messages.related_links_includes_links_to,
+    testId: "outgoing-related-links-list"
+  }));
+};
+export default RelatedLinksResolvedView;

package/dist/es2019/view/common/Byline.js

@@ -29,6 +29,8 @@ export const Byline = ({
     // due to HTML its unwrapping behaviour on paste.
     MozUserSelect: 'none'
   }),
-  "data-testid": testId,
+  "data-testid": testId
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  ,
   className: className
 }, text || children);

package/dist/es2019/view/common/Icon.js

@@ -55,7 +55,9 @@ export const Icon = ({
   });
   return jsx("span", {
     css: getSpanStyles(isFlexibleUi),
-    "data-testid": testId,
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: blockCardIconImageClassName
   }, icon || image || placeholder);
 };

package/dist/es2019/view/common/MetadataList.js

@@ -18,7 +18,9 @@ export const MetadataList = ({
         marginRight: '0px'
       }
     },
-    "data-testid": testId,
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: metadataListClassName
   }, items.map(item => jsx(Metadata, _extends({
     key: item.text

package/dist/esm/extractors/flexible/extract-state.js

@@ -2,7 +2,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { extractLozenge } from '../common/lozenge';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getExtensionKey } from '../../state/helpers';
 import extractServerAction from './extract-server-action';
 import { extractLink } from '@atlaskit/link-extractors';
@@ -58,7 +57,7 @@ var extractState = function extractState(response, actionOptions, id) {
   if (!lozenge) {
     return;
   }
-  if (!canShowAction(CardAction.ChangeStatusAction, actionOptions) || getBooleanFF('platform.linking-platform.smart-card.disable-jira-status-action')) {
+  if (!canShowAction(CardAction.ChangeStatusAction, actionOptions)) {
     return lozenge;
   }
   var action = extractAction(response, id);

package/dist/esm/messages.js

@@ -700,8 +700,8 @@ export var messages = defineMessages({
     defaultMessage: 'An error occurred',
     description: 'A generic error message to the user'
   },
-  related_links_modal_title_nonfinal: {
-    id: 'fabric.linking.related_links_modal_title.nonfinal',
+  related_links_modal_title: {
+    id: 'fabric.linking.related_links_modal_title',
     defaultMessage: 'Recent Links',
     description: 'Shown as the title for the related links modal'
   },
@@ -709,5 +709,20 @@ export var messages = defineMessages({
     id: 'fabric.linking.related_links_view_related_urls.nonfinal',
     defaultMessage: 'View recent 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_not_found: {
+    id: 'fabric.linking.related_links_not_found',
+    defaultMessage: 'We didn\'t find any links to show here.',
+    description: 'Informs the user that there are no related resources for the given url'
+  },
+  related_links_includes_links_to: {
+    id: 'fabric.linking.related_links_includes_links_to',
+    defaultMessage: 'Includes Links To',
+    description: 'Informs the user of the resources the url links to'
   }
 });