@atlaskit/smart-card 27.1.0 → 27.2.1

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

@@ -44,7 +44,9 @@ var Lozenge = function Lozenge(_ref) {
     text: text,
     zIndex: ui === null || ui === void 0 ? void 0 : ui.zIndex
   }) : (0, _react2.jsx)(_lozenge.default, {
-    appearance: appearance,
+    appearance: appearance
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
     style: style,
     testId: "".concat(testId, "-lozenge")
   }, text);

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

@@ -55,6 +55,7 @@ var ConnectedAIPrismContainer = function ConnectedAIPrismContainer(_ref) {
     setShowPrism(status === 'loading');
   }, [status]);
   var container = (0, _react.jsx)("div", (0, _extends2.default)({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: _HoverCardContent.hoverCardClassName,
     css: [_styled.HoverCardContainer, !isAIEnabled ? _styled.popupContainerStyles : undefined],
     "data-testid": testId
@@ -79,6 +80,7 @@ var ContentContainer = function ContentContainer(_ref2) {
     }, props), children);
   }
   return (0, _react.jsx)("div", (0, _extends2.default)({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: _HoverCardContent.hoverCardClassName,
     css: _styled.HoverCardContainer,
     "data-testid": testId

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

@@ -9,6 +9,7 @@ var _react = require("@emotion/react");
 var _react2 = require("react");
 var _reactErrorBoundary = require("react-error-boundary");
 var _analytics = require("../../state/analytics");
+var _modal = require("../../state/modal");
 var _HoverCardComponent = require("./components/HoverCardComponent");
 var _constants = require("../../constants");
 var _reactMagneticDi = require("react-magnetic-di");
@@ -30,7 +31,7 @@ var HoverCardWithErrorBoundary = function HoverCardWithErrorBoundary(props) {
   return (0, _react.jsx)(_reactErrorBoundary.ErrorBoundary, {
     fallback: children,
     onError: onError
-  }, (0, _react.jsx)(_HoverCardComponent.HoverCardComponent, props, children));
+  }, (0, _react.jsx)(_modal.SmartLinkModalProvider, null, (0, _react.jsx)(_HoverCardComponent.HoverCardComponent, props, children)));
 };
 var HoverCardWithoutAnalyticsContext = (0, _analyticsNext.withAnalyticsEvents)()(HoverCardWithErrorBoundary);
 

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

@@ -51,7 +51,9 @@ var Frame = exports.Frame = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     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/cjs/view/InlineCard/Icon.js

@@ -48,7 +48,9 @@ var Shimmer = exports.Shimmer = function Shimmer(_ref) {
     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/cjs/view/InlineCard/IconAndTitleLayout/index.js

@@ -74,7 +74,9 @@ var IconAndTitleLayout = exports.IconAndTitleLayout = /*#__PURE__*/function (_Re
       }
       return /*#__PURE__*/_react.default.createElement(_reactRenderImage.default, {
         src: url,
-        loaded: /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+        loaded: /*#__PURE__*/_react.default.createElement(_Icon.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": "".concat(testId, "-image")
@@ -125,22 +127,30 @@ var IconAndTitleLayout = exports.IconAndTitleLayout = /*#__PURE__*/function (_Re
         rightSide = _this$props2.rightSide,
         _this$props2$testId = _this$props2.testId,
         testId = _this$props2$testId === void 0 ? 'inline-card-icon-and-title' : _this$props2$testId;
-      var titlePart = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.IconPositionWrapper, null, children || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.IconEmptyWrapper, null), this.renderIcon(testId))), /*#__PURE__*/_react.default.createElement(_styled.TitleWrapper, {
+      var titlePart = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.IconPositionWrapper, null, children || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.IconEmptyWrapper, null), this.renderIcon(testId))), /*#__PURE__*/_react.default.createElement(_styled.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: _styled.TitleWrapperClassName
       }, title));
-      return /*#__PURE__*/_react.default.createElement(_styled.IconTitleWrapper, {
-        style: {
-          color: titleColor
-        },
-        "data-testid": testId
-      }, link ? /*#__PURE__*/_react.default.createElement(_styled2.LinkAppearance, {
-        href: link,
-        onClick: this.handleClick,
-        onKeyPress: this.handleKeyPress
-      }, titlePart) : titlePart, rightSide ? /*#__PURE__*/_react.default.createElement(_styled2.NoLinkAppearance, null, rightSide) : null);
+      return (
+        /*#__PURE__*/
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        _react.default.createElement(_styled.IconTitleWrapper, {
+          style: {
+            color: titleColor
+          },
+          "data-testid": testId
+        }, link ? /*#__PURE__*/_react.default.createElement(_styled2.LinkAppearance, {
+          href: link,
+          onClick: this.handleClick,
+          onKeyPress: this.handleKeyPress
+        }, titlePart) : titlePart, rightSide ? /*#__PURE__*/_react.default.createElement(_styled2.NoLinkAppearance, null, rightSide) : null)
+      );
     }
   }]);
   return IconAndTitleLayout;

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

@@ -35,7 +35,9 @@ var InlineCardResolvedView = exports.InlineCardResolvedView = /*#__PURE__*/funct
       var appearance = lozenge.appearance || 'default';
       return /*#__PURE__*/_react.default.createElement(_styled.LozengeWrapper, null, /*#__PURE__*/_react.default.createElement(_lozenge.default, {
         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/cjs/view/LinkUrl/index.js

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

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

@@ -6,22 +6,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
 var _messages = require("../../../messages");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var RelatedLinksModal = function RelatedLinksModal(_ref) {
+/** @jsx jsx */
+
+var RelatedLinksBaseModal = function RelatedLinksBaseModal(_ref) {
   var onClose = _ref.onClose,
     showModal = _ref.showModal,
     children = _ref.children;
-  return /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTransition, null, showModal && /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
-    onClose: onClose
-  }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalHeader, null, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTitle, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.related_links_modal_title_nonfinal))), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, children), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_new.default, {
+  return (0, _react.jsx)(_modalDialog.ModalTransition, null, showModal && (0, _react.jsx)(_modalDialog.default, {
+    onClose: onClose,
+    width: "small"
+  }, (0, _react.jsx)(_modalDialog.ModalHeader, null, (0, _react.jsx)(_modalDialog.ModalTitle, null, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.related_links_modal_title))), (0, _react.jsx)(_modalDialog.ModalBody, null, children), (0, _react.jsx)(_modalDialog.ModalFooter, null, (0, _react.jsx)(_new.default, {
     appearance: "primary",
     onClick: onClose
-  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.close)))));
+  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.close)))));
 };
-var _default = exports.default = RelatedLinksModal;
+var _default = exports.default = RelatedLinksBaseModal;

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

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("@emotion/react");
+var _primitives = require("@atlaskit/primitives");
+var _index = require("../../../../index");
+/** @jsx jsx */
+
+var hoverStyles = (0, _primitives.xcss)({
+  ':hover': {
+    backgroundColor: 'color.background.input.hovered',
+    borderRadius: 'border.radius.100',
+    marginInline: 'space.negative.100',
+    paddingInline: 'space.100'
+  }
+});
+var relatedLinkItemStyles = (0, _react.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)"
+});
+var RelatedLinkItem = function RelatedLinkItem(_ref) {
+  var url = _ref.url,
+    testId = _ref.testId;
+  var subtitle = [{
+    name: _index.ElementName.Provider
+  }];
+  var ui = {
+    hideElevation: true,
+    hidePadding: true,
+    hideBackground: true,
+    theme: _index.SmartLinkTheme.Black,
+    clickableContainer: true,
+    size: _index.SmartLinkSize.Large
+  };
+  return (0, _react.jsx)(_primitives.Box, {
+    testId: testId,
+    xcss: hoverStyles
+  }, (0, _react.jsx)(_index.Card, {
+    appearance: "block",
+    ui: ui,
+    url: url
+  }, (0, _react.jsx)(_index.TitleBlock, {
+    maxLines: 1,
+    hideTitleTooltip: true,
+    position: _index.SmartLinkPosition.Center,
+    subtitle: subtitle,
+    overrideCss: relatedLinkItemStyles,
+    anchorTarget: "_blank"
+  })));
+};
+var _default = exports.default = RelatedLinkItem;

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

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _primitives = require("@atlaskit/primitives");
+var _relatedLinkItem = _interopRequireDefault(require("../related-link-item"));
+var _messages = require("../../../../messages");
+/** @jsx jsx */
+
+var RelatedLinksList = function RelatedLinksList(_ref) {
+  var urls = _ref.urls,
+    title = _ref.title,
+    testId = _ref.testId;
+  return (0, _react.jsx)(_primitives.Stack, {
+    testId: testId
+  }, (0, _react.jsx)(_primitives.Box, {
+    paddingBlockStart: "space.050",
+    xcss: (0, _primitives.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'
+    })
+  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, title)), urls.length > 0 && (0, _react.jsx)(_primitives.Box, null, urls.map(function (url, idx) {
+    return (0, _react.jsx)(_primitives.Stack, {
+      key: "".concat(idx, "-").concat(url)
+    }, (0, _react.jsx)(_relatedLinkItem.default, {
+      url: url,
+      testId: "".concat(testId, "-item-").concat(idx)
+    }));
+  })), urls.length === 0 && (0, _react.jsx)(_primitives.Box, {
+    paddingBlock: "space.100",
+    xcss: (0, _primitives.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)"
+    })
+  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.related_links_not_found)));
+};
+var _default = exports.default = RelatedLinksList;

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("@emotion/react");
+var _messages = require("../../../../messages");
+var _relatedLinksList = _interopRequireDefault(require("../../components/related-links-list"));
+var _primitives = require("@atlaskit/primitives");
+/** @jsx jsx */
+
+var RelatedLinksResolvedView = function RelatedLinksResolvedView(_ref) {
+  var _ref$incomingLinks = _ref.incomingLinks,
+    incomingLinks = _ref$incomingLinks === void 0 ? [] : _ref$incomingLinks,
+    _ref$outgoingLinks = _ref.outgoingLinks,
+    outgoingLinks = _ref$outgoingLinks === void 0 ? [] : _ref$outgoingLinks;
+  return (0, _react.jsx)(_primitives.Stack, {
+    space: "space.150"
+  }, (0, _react.jsx)(_relatedLinksList.default, {
+    urls: incomingLinks,
+    title: _messages.messages.related_links_found_in,
+    testId: "incoming-related-links-list"
+  }), (0, _react.jsx)(_relatedLinksList.default, {
+    urls: outgoingLinks,
+    title: _messages.messages.related_links_includes_links_to,
+    testId: "outgoing-related-links-list"
+  }));
+};
+var _default = exports.default = RelatedLinksResolvedView;

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

@@ -0,0 +1 @@
+"use strict";

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

@@ -36,7 +36,9 @@ var Byline = exports.Byline = function Byline(_ref) {
       // 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/cjs/view/common/Icon.js

@@ -64,7 +64,9 @@ var Icon = exports.Icon = function Icon(_ref) {
   });
   return (0, _react.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/cjs/view/common/MetadataList.js

@@ -25,7 +25,9 @@ var MetadataList = exports.MetadataList = function MetadataList(_ref) {
         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(function (item) {
     return (0, _react.jsx)(_Metadata.Metadata, (0, _extends2.default)({

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

@@ -1,5 +1,4 @@
 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';
@@ -53,7 +52,7 @@ const 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;
   }
   const action = extractAction(response, id);

package/dist/es2019/messages.js

@@ -700,8 +700,8 @@ export const 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 const 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'
   }
 });

package/dist/es2019/state/modal/index.js

@@ -0,0 +1,47 @@
+import React, { Suspense, useCallback, useContext, useMemo, useState } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+const FALLBACK_API = {
+  open: () => {},
+  close: () => {}
+};
+export const SmartLinkModalContext = /*#__PURE__*/React.createContext(FALLBACK_API);
+export const SmartLinkModalProvider = ({
+  children
+}) => {
+  const [element, setElement] = useState(null);
+  const api = useMemo(() => ({
+    open: modal => setElement( /*#__PURE__*/React.createElement(Suspense, {
+      fallback: null
+    }, modal)),
+    close: () => setElement(null)
+  }), []);
+  const fallbackRender = useCallback(({
+    resetErrorBoundary
+  }) => {
+    resetErrorBoundary();
+    return null;
+  }, []);
+  const onReset = useCallback(() => setElement(null), []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SmartLinkModalContext.Provider, {
+    value: api
+  }, children), /*#__PURE__*/React.createElement(ErrorBoundary, {
+    fallbackRender: fallbackRender,
+    onReset: onReset
+  }, element));
+};
+
+/**
+ * Open (lazy load) modal
+ *
+ * This hook injects the element below Card and standalone HoverCard component.
+ * It is intended to solve the issue where modal triggered by the parent component
+ * disappear when the parent component is unmounted.
+ *
+ * For example, clicking on hover card action to open a modal. Once the modal is opened,
+ * hover card disappears.
+ *
+ * Usage:
+ *   const modal = useSmartLinkModal()
+ *   modal.open(<SomeLazyLoadModal isOpen={true} onClose={() => modal.close()} />);
+ */
+export const useSmartLinkModal = () => useContext(SmartLinkModalContext);

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

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

package/dist/es2019/view/BlockCard/components/ActionIcon.js

@@ -22,20 +22,28 @@ export const ActionIcon = ({
     case 'loading':
       return null;
     case 'success':
-      return /*#__PURE__*/React.createElement("div", {
-        "data-testid": "check-icon",
-        style: spinnerStyles
-      }, /*#__PURE__*/React.createElement(CheckIcon, {
-        size: "small",
-        label: "check"
-      }));
+      return (
+        /*#__PURE__*/
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        React.createElement("div", {
+          "data-testid": "check-icon",
+          style: spinnerStyles
+        }, /*#__PURE__*/React.createElement(CheckIcon, {
+          size: "small",
+          label: "check"
+        }))
+      );
     case 'failure':
-      return /*#__PURE__*/React.createElement("div", {
-        "data-testid": "cross-icon",
-        style: spinnerStyles
-      }, /*#__PURE__*/React.createElement(CrossIcon, {
-        size: "small",
-        label: "check"
-      }));
+      return (
+        /*#__PURE__*/
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        React.createElement("div", {
+          "data-testid": "cross-icon",
+          style: spinnerStyles
+        }, /*#__PURE__*/React.createElement(CrossIcon, {
+          size: "small",
+          label: "check"
+        }))
+      );
   }
 };

package/dist/es2019/view/BlockCard/components/Content.js

@@ -20,6 +20,8 @@ export const Content = ({
     justifyContent: isCompact ? 'unset' : ['unset', 'space-between'],
     flexGrow: 1
   }),
-  "data-trello-do-not-use-override": "block-card-content",
+  "data-trello-do-not-use-override": "block-card-content"
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  ,
   className: blockCardContentClassName
 }, children);

package/dist/es2019/view/BlockCard/components/ContentFooter.js

@@ -14,6 +14,8 @@ export const ContentFooter = ({
     alignItems: ['unset', 'center'],
     // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
     marginTop: [gs(1), gs(1.5)]
-  }),
+  })
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  ,
   className: contentFooterClassName
 }, children);

package/dist/es2019/view/BlockCard/components/ContentHeader.js

@@ -26,7 +26,9 @@ export const ContentHeader = ({
       // due to HTML its unwrapping behaviour on paste.
       MozUserSelect: 'none'
     },
-    "data-trello-do-not-use-override": "block-card-content-header",
+    "data-trello-do-not-use-override": "block-card-content-header"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: blockCardContentHeaderClassName
   }, children);
 };

package/dist/es2019/view/BlockCard/components/Frame.js

@@ -37,7 +37,9 @@ export const ExpandedFrame = ({
       overflow: 'hidden',
       boxShadow: `var(--ds-shadow-raised, ${`0 1px 1px ${N50A}, 0 0 1px 1px ${N40A}`})`
     }),
-    "data-testid": testId,
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: className,
     "data-trello-do-not-use-override": testId
   }, children);
@@ -66,7 +68,9 @@ export const CompactFrame = ({
       // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       padding: [`0px ${gs(1)}`, '0']
     }),
-    "data-testid": testId,
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: className
   }, children);
 };

package/dist/es2019/view/BlockCard/components/Link.js

@@ -7,7 +7,9 @@ export const Link = ({
   className
 }) => {
   return jsx("span", {
-    "data-testid": `${testId}-link`,
+    "data-testid": `${testId}-link`
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: className,
     css: {
       color: `var(--ds-link, ${B400})`,

package/dist/es2019/view/BlockCard/components/Name.js

@@ -33,6 +33,8 @@ export const Name = ({
     maxHeight: gs(6)
   },
   "data-testid": testId,
-  "data-trello-do-not-use-override": "block-card-content-header-name",
+  "data-trello-do-not-use-override": "block-card-content-header-name"
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  ,
   className: blockCardContentHeaderNameClassName
 }, name);

package/dist/es2019/view/BlockCard/components/Provider.js

@@ -9,6 +9,7 @@ export const Provider = ({
   let iconToRender = icon || null;
   if (typeof icon === 'string') {
     iconToRender = jsx("img", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: "smart-link-icon",
       css: {
         height: gs(1.5),

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

@@ -37,7 +37,9 @@ export const ErroredView = ({
   const actions = useMemo(() => onRetry ? [RetryAction(onRetry)] : [], [onRetry]);
   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: blockCardErroredViewClassName,
     isFluidHeight: true,
     inheritDimensions: inheritDimensions

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

@@ -52,7 +52,9 @@ export const ForbiddenView = ({
   const items = action !== undefined && !(buttonDisabled !== null && buttonDisabled !== void 0 ? buttonDisabled : false) ? [...actions, action] : actions;
   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: blockCardForbiddenViewClassName,
     isFluidHeight: true
   }, jsx(Content, {
@@ -62,7 +64,9 @@ export const ForbiddenView = ({
     link: link
   }, jsx(Link, {
     url: link,
-    testId: testId,
+    testId: testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: blockCardForbiddenViewLinkClassName
   })), jsx(Byline, null, jsx(UnresolvedText, {
     icon: jsx(LockIcon, {