@atlaskit/smart-card 27.1.0 → 27.2.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/smart-card
 
+## 27.2.1
+
+### Patch Changes
+
+-   [#103165](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/103165)
+    [`ea89f19613e2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ea89f19613e2) -
+    Create modal context to fix issue where action modal triggered from hover card disappears when
+    hover card disappears
+
+## 27.2.0
+
+### Minor Changes
+
+-   [#104135](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/104135)
+    [`c78fc8b1e424`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c78fc8b1e424) -
+    [ux] FF clean up for ActionOptions disabled within Jira
+
+### Patch Changes
+
+-   [#103703](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/103703)
+    [`84a7f7c6ea21`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/84a7f7c6ea21) -
+    EDM-9887: add resolved view for related-links-modal which renders items in a list for incoming
+    and outgoing links
+
 ## 27.1.0
 
 ### Minor Changes

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

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _lozenge = require("../common/lozenge");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _helpers = require("../../state/helpers");
 var _extractServerAction = _interopRequireDefault(require("./extract-server-action"));
 var _linkExtractors = require("@atlaskit/link-extractors");
@@ -65,7 +64,7 @@ var extractState = function extractState(response, actionOptions, id) {
   if (!lozenge) {
     return;
   }
-  if (!(0, _canShowAction.canShowAction)(_types.CardAction.ChangeStatusAction, actionOptions) || (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.disable-jira-status-action')) {
+  if (!(0, _canShowAction.canShowAction)(_types.CardAction.ChangeStatusAction, actionOptions)) {
     return lozenge;
   }
   var action = extractAction(response, id);

package/dist/cjs/messages.js

@@ -706,8 +706,8 @@ var messages = exports.messages = (0, _reactIntlNext.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'
   },
@@ -715,5 +715,20 @@ var messages = exports.messages = (0, _reactIntlNext.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/cjs/state/modal/index.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSmartLinkModal = exports.SmartLinkModalProvider = exports.SmartLinkModalContext = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactErrorBoundary = require("react-error-boundary");
+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 FALLBACK_API = {
+  open: function open() {},
+  close: function close() {}
+};
+var SmartLinkModalContext = exports.SmartLinkModalContext = /*#__PURE__*/_react.default.createContext(FALLBACK_API);
+var SmartLinkModalProvider = exports.SmartLinkModalProvider = function SmartLinkModalProvider(_ref) {
+  var children = _ref.children;
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    element = _useState2[0],
+    setElement = _useState2[1];
+  var api = (0, _react.useMemo)(function () {
+    return {
+      open: function open(modal) {
+        return setElement( /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+          fallback: null
+        }, modal));
+      },
+      close: function close() {
+        return setElement(null);
+      }
+    };
+  }, []);
+  var fallbackRender = (0, _react.useCallback)(function (_ref2) {
+    var resetErrorBoundary = _ref2.resetErrorBoundary;
+    resetErrorBoundary();
+    return null;
+  }, []);
+  var onReset = (0, _react.useCallback)(function () {
+    return setElement(null);
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(SmartLinkModalContext.Provider, {
+    value: api
+  }, children), /*#__PURE__*/_react.default.createElement(_reactErrorBoundary.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()} />);
+ */
+var useSmartLinkModal = exports.useSmartLinkModal = function useSmartLinkModal() {
+  return (0, _react.useContext)(SmartLinkModalContext);
+};

package/dist/cjs/utils/analytics/analytics.js

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

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

@@ -28,20 +28,28 @@ var ActionIcon = exports.ActionIcon = function ActionIcon(_ref) {
     case 'loading':
       return null;
     case 'success':
-      return /*#__PURE__*/_react.default.createElement("div", {
-        "data-testid": "check-icon",
-        style: spinnerStyles
-      }, /*#__PURE__*/_react.default.createElement(_check.default, {
-        size: "small",
-        label: "check"
-      }));
+      return (
+        /*#__PURE__*/
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        _react.default.createElement("div", {
+          "data-testid": "check-icon",
+          style: spinnerStyles
+        }, /*#__PURE__*/_react.default.createElement(_check.default, {
+          size: "small",
+          label: "check"
+        }))
+      );
     case 'failure':
-      return /*#__PURE__*/_react.default.createElement("div", {
-        "data-testid": "cross-icon",
-        style: spinnerStyles
-      }, /*#__PURE__*/_react.default.createElement(_cross.default, {
-        size: "small",
-        label: "check"
-      }));
+      return (
+        /*#__PURE__*/
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        _react.default.createElement("div", {
+          "data-testid": "cross-icon",
+          style: spinnerStyles
+        }, /*#__PURE__*/_react.default.createElement(_cross.default, {
+          size: "small",
+          label: "check"
+        }))
+      );
   }
 };

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

@@ -28,7 +28,9 @@ var Content = exports.Content = function Content(_ref) {
       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/cjs/view/BlockCard/components/ContentFooter.js

@@ -22,7 +22,9 @@ var ContentFooter = exports.ContentFooter = function ContentFooter(_ref) {
       alignItems: ['unset', 'center'],
       // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       marginTop: [(0, _utils.gs)(1), (0, _utils.gs)(1.5)]
-    }),
+    })
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: contentFooterClassName
   }, children);
 };

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

@@ -32,7 +32,9 @@ var ContentHeader = exports.ContentHeader = function ContentHeader(_ref) {
       // 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/cjs/view/BlockCard/components/Frame.js

@@ -47,7 +47,9 @@ var ExpandedFrame = exports.ExpandedFrame = function ExpandedFrame(_ref) {
       overflow: 'hidden',
       boxShadow: "var(--ds-shadow-raised, ".concat("0 1px 1px ".concat(_colors.N50A, ", 0 0 1px 1px ").concat(_colors.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);
@@ -74,7 +76,9 @@ var CompactFrame = exports.CompactFrame = function CompactFrame(_ref2) {
       // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       padding: ["0px ".concat((0, _utils.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/cjs/view/BlockCard/components/Link.js

@@ -14,7 +14,9 @@ var Link = exports.Link = function Link(_ref) {
     testId = _ref$testId === void 0 ? 'block-card' : _ref$testId,
     className = _ref.className;
   return (0, _react.jsx)("span", {
-    "data-testid": "".concat(testId, "-link"),
+    "data-testid": "".concat(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, ".concat(_colors.B400, ")"),

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

@@ -41,7 +41,9 @@ var Name = exports.Name = function Name(_ref) {
       maxHeight: (0, _utils.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/cjs/view/BlockCard/components/Provider.js

@@ -15,6 +15,7 @@ var Provider = exports.Provider = function Provider(_ref) {
   var iconToRender = icon || null;
   if (typeof icon === 'string') {
     iconToRender = (0, _react.jsx)("img", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: "smart-link-icon",
       css: {
         height: (0, _utils.gs)(1.5),

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

@@ -52,7 +52,9 @@ var ErroredView = exports.ErroredView = function ErroredView(_ref) {
   }, [onRetry]);
   return (0, _react.jsx)(_Frame.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/cjs/view/BlockCard/views/ForbiddenView.js

@@ -69,7 +69,9 @@ var ForbiddenView = exports.ForbiddenView = function ForbiddenView(_ref) {
   var items = action !== undefined && !(buttonDisabled !== null && buttonDisabled !== void 0 ? buttonDisabled : false) ? [].concat((0, _toConsumableArray2.default)(actions), [action]) : actions;
   return (0, _react.jsx)(_Frame.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
   }, (0, _react.jsx)(_Content.Content, {
@@ -79,7 +81,9 @@ var ForbiddenView = exports.ForbiddenView = function ForbiddenView(_ref) {
     link: link
   }, (0, _react.jsx)(_Link.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
   })), (0, _react.jsx)(_Byline.Byline, null, (0, _react.jsx)(_UnresolvedText.UnresolvedText, {
     icon: (0, _react.jsx)(_lockFilled.default, {

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

@@ -49,7 +49,9 @@ var NotFoundView = exports.NotFoundView = function NotFoundView(_ref) {
   };
   return (0, _react.jsx)(_Frame.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
   }, (0, _react.jsx)(_Content.Content, {

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

@@ -83,7 +83,9 @@ var ResolvedView = exports.ResolvedView = function ResolvedView(_ref) {
     items: details
   }) : undefined;
   var resolvedByline = (0, _react.jsx)(_Byline.Byline, {
-    testId: testId ? "".concat(testId, "-by") : undefined,
+    testId: testId ? "".concat(testId, "-by") : undefined
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: blockCardResolvedViewByClassName
   }, byline);
   var handleClick = function handleClick(event) {
@@ -92,7 +94,9 @@ var ResolvedView = exports.ResolvedView = function ResolvedView(_ref) {
   var hasActions = actions.length > 0;
   return (0, _react.jsx)(_Frame.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
   }, (0, _react.jsx)(_Content.Content, null, (0, _react.jsx)("div", null, (0, _react.jsx)("div", {
     css: styles

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

@@ -32,7 +32,9 @@ var ResolvingView = exports.ResolvingView = function ResolvingView(_ref) {
     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
   }, (0, _react.jsx)(_documentFilled.default, {
     size: "small",

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

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

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

@@ -24,7 +24,9 @@ function LazyLazilyRenderCard(props) {
   });
   return /*#__PURE__*/_react.default.createElement(_reactLazilyRender.default, {
     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.default.createElement(_LoadingCardLink.LoadingCardLink, props),
     scrollContainer: container,

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

@@ -17,7 +17,9 @@ var LoadingCardLink = exports.LoadingCardLink = function LoadingCardLink(_ref) {
     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: _LazyFallback.loadingPlaceholderClassName,
     placeholder: placeholder
   });

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

@@ -9,6 +9,7 @@ exports.CardWithUrlContent = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _linkProvider = require("@atlaskit/link-provider");
+var _modal = require("../../state/modal");
 var _utils = require("../../utils");
 var measure = _interopRequireWildcard(require("../../utils/performance"));
 var _helpers = require("../../state/helpers");
@@ -278,9 +279,9 @@ function Component(_ref) {
 }
 var CardWithUrlContent = exports.CardWithUrlContent = function CardWithUrlContent(props) {
   var display = (0, _flexible.isFlexibleUiCard)(props.children) ? _constants.CardDisplay.Flexible : props.appearance;
-  return /*#__PURE__*/_react.default.createElement(_SmartLinkAnalyticsContext.SmartLinkAnalyticsContext, {
+  return /*#__PURE__*/_react.default.createElement(_modal.SmartLinkModalProvider, null, /*#__PURE__*/_react.default.createElement(_SmartLinkAnalyticsContext.SmartLinkAnalyticsContext, {
     url: props.url,
     id: props.id,
     display: display
-  }, /*#__PURE__*/_react.default.createElement(Component, props));
+  }, /*#__PURE__*/_react.default.createElement(Component, props)));
 };

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

@@ -38,35 +38,43 @@ var ExpandedFrame = exports.ExpandedFrame = function ExpandedFrame(_ref) {
   var handleMouseDown = (0, _useLinkClicked.useMouseDownEvent)();
   var isFixEmbedCardBlurEnabled = (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.fix-embed-card-blurring') ? true : false;
   var renderHeaderOld = function renderHeaderOld() {
-    return /*#__PURE__*/_react.default.createElement(_styled.Header, {
-      className: "embed-header",
-      frameStyle: frameStyle
-    }, /*#__PURE__*/_react.default.createElement(_styled.IconWrapper, {
-      isPlaceholder: isPlaceholder
-    }, !isPlaceholder && icon), /*#__PURE__*/_react.default.createElement(_styled.TextWrapper, {
-      isPlaceholder: isPlaceholder
-    }, !isPlaceholder && /*#__PURE__*/_react.default.createElement("a", {
-      href: href,
-      onClick: handleClick,
-      onMouseDown: handleMouseDown
-    }, text)));
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      _react.default.createElement(_styled.Header, {
+        className: "embed-header",
+        frameStyle: frameStyle
+      }, /*#__PURE__*/_react.default.createElement(_styled.IconWrapper, {
+        isPlaceholder: isPlaceholder
+      }, !isPlaceholder && icon), /*#__PURE__*/_react.default.createElement(_styled.TextWrapper, {
+        isPlaceholder: isPlaceholder
+      }, !isPlaceholder && /*#__PURE__*/_react.default.createElement("a", {
+        href: href,
+        onClick: handleClick,
+        onMouseDown: handleMouseDown
+      }, text)))
+    );
   };
   var renderHeader = function renderHeader() {
-    return /*#__PURE__*/_react.default.createElement(_styled.Header, {
-      className: "embed-header",
-      frameStyle: frameStyle
-    }, /*#__PURE__*/_react.default.createElement(_styled.IconWrapper, {
-      isPlaceholder: isPlaceholder
-    }, !isPlaceholder && icon), /*#__PURE__*/_react.default.createElement(_styled.TooltipWrapper, null, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
-      content: text,
-      hideTooltipOnMouseDown: true
-    }, /*#__PURE__*/_react.default.createElement(_styled.TextWrapper, {
-      isPlaceholder: isPlaceholder
-    }, !isPlaceholder && /*#__PURE__*/_react.default.createElement("a", {
-      href: href,
-      onClick: handleClick,
-      onMouseDown: handleMouseDown
-    }, text)))));
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      _react.default.createElement(_styled.Header, {
+        className: "embed-header",
+        frameStyle: frameStyle
+      }, /*#__PURE__*/_react.default.createElement(_styled.IconWrapper, {
+        isPlaceholder: isPlaceholder
+      }, !isPlaceholder && icon), /*#__PURE__*/_react.default.createElement(_styled.TooltipWrapper, null, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+        content: text,
+        hideTooltipOnMouseDown: true
+      }, /*#__PURE__*/_react.default.createElement(_styled.TextWrapper, {
+        isPlaceholder: isPlaceholder
+      }, !isPlaceholder && /*#__PURE__*/_react.default.createElement("a", {
+        href: href,
+        onClick: handleClick,
+        onMouseDown: handleMouseDown
+      }, text)))))
+    );
   };
   var renderContent = function renderContent() {
     return /*#__PURE__*/_react.default.createElement(_styled.Content, {
@@ -78,7 +86,9 @@ var ExpandedFrame = exports.ExpandedFrame = function ExpandedFrame(_ref) {
     }, children);
   };
   if (!isPlaceholder && href) {
-    return /*#__PURE__*/_react.default.createElement(_styled.LinkWrapper, {
+    return /*#__PURE__*/_react.default.createElement(_styled.LinkWrapper
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    , {
       className: _styled.className,
       isInteractive: isInteractive(),
       isSelected: isSelected,
@@ -93,7 +103,9 @@ var ExpandedFrame = exports.ExpandedFrame = function ExpandedFrame(_ref) {
       inheritDimensions: inheritDimensions
     }, (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-embed-card-header-tooltip_g9saw') ? renderHeader() : renderHeaderOld(), renderContent());
   } else {
-    return /*#__PURE__*/_react.default.createElement(_styled.Wrapper, {
+    return /*#__PURE__*/_react.default.createElement(_styled.Wrapper
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    , {
       className: _styled.className,
       isInteractive: isInteractive(),
       isSelected: isSelected,

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

@@ -23,7 +23,9 @@ var ImageIcon = exports.ImageIcon = function ImageIcon(_ref) {
   return /*#__PURE__*/_react.default.createElement(_reactRenderImage.default, {
     src: src,
     loading: defaultIcon,
-    loaded: /*#__PURE__*/_react.default.createElement(_styled.Image, {
+    loaded: /*#__PURE__*/_react.default.createElement(_styled.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/cjs/view/EmbedModal/components/link-info/index.js

@@ -68,14 +68,17 @@ var LinkInfo = function LinkInfo(_ref) {
     }) : (0, _react.jsx)(_vidFullScreenOn.default, {
       label: message.defaultMessage
     });
-    return (0, _react.jsx)("span", {
-      className: "smart-link-resize-button"
-    }, (0, _react.jsx)(_linkInfoButton.default, {
-      content: (0, _react.jsx)(_reactIntlNext.FormattedMessage, message),
-      icon: icon,
-      onClick: onResizeButtonClick,
-      testId: "".concat(testId, "-resize")
-    }));
+    return (
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      (0, _react.jsx)("span", {
+        className: "smart-link-resize-button"
+      }, (0, _react.jsx)(_linkInfoButton.default, {
+        content: (0, _react.jsx)(_reactIntlNext.FormattedMessage, message),
+        icon: icon,
+        onClick: onResizeButtonClick,
+        testId: "".concat(testId, "-resize")
+      }))
+    );
   }, [onResizeButtonClick, size, testId]);
   return (0, _react.jsx)("div", {
     css: _styled.containerStyles

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

@@ -14,7 +14,9 @@ var UnfollowGlyph = function UnfollowGlyph(props) {
     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/cjs/view/FlexibleCard/components/blocks/action-group/index.js

@@ -129,7 +129,9 @@ var ActionGroup = function ActionGroup(_ref) {
     return null;
   }, [appearance, isMoreThenTwoItems, isOpen, onActionItemClick, onOpenChange, renderableActionItems, size, ui === null || ui === void 0 ? void 0 : ui.zIndex, visibleButtonsNum]);
   return renderableActionItems.length > 0 ? (0, _react2.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
   }, (0, _react2.jsx)(_buttonGroup.default, null, actionButtons, moreActionDropdown)) : null;

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

@@ -69,6 +69,7 @@ var TitleBlockErroredView = function TitleBlockErroredView(_ref) {
     direction: _constants.SmartLinkDirection.Horizontal,
     align: _constants.SmartLinkAlignment.Right
   }, (0, _react2.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/cjs/view/FlexibleCard/components/common/motion-wrapper/index.js

@@ -40,13 +40,16 @@ var MotionWrapper = exports.MotionWrapper = function MotionWrapper(_ref) {
     style: {
       height: height,
       minHeight: 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/cjs/view/FlexibleCard/components/container/layered-link/index.js

@@ -56,6 +56,7 @@ var LayeredLink = function LayeredLink(_ref) {
     url = _ref.url;
   var onMouseDown = (0, _useLinkClicked.useMouseDownEvent)();
   return (0, _react2.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": "".concat(testId, "-layered-link"),