@atlaskit/smart-card 34.6.6 → 34.8.0

package/dist/cjs/view/EmbedCard/views/unresolved-view/UnresolvedViewOld.js

@@ -0,0 +1,129 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
+var _link = _interopRequireDefault(require("@atlaskit/icon/core/migration/link"));
+var _utils = require("../../../common/utils");
+var _ExpandedFrame = require("../../components/ExpandedFrame");
+var _ImageIcon = require("../../components/ImageIcon");
+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 && {}.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; }
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var containerStyles = (0, _react2.css)({
+  display: 'grid',
+  height: 'inherit'
+});
+var contentStyles = (0, _react2.css)({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  textAlign: 'center',
+  alignItems: 'center',
+  margin: 'auto',
+  padding: "var(--ds-space-200, 16px)",
+  gap: "var(--ds-space-250, 20px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  maxWidth: (0, _utils.gs)(50)
+});
+var descriptionStyles = (0, _react2.css)({
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  textAlign: 'center'
+});
+var imageStyles = (0, _react2.css)({
+  height: '120px',
+  width: '180px',
+  objectFit: 'contain',
+  objectPosition: 'center center'
+});
+var UnresolvedViewOld = function UnresolvedViewOld(_ref) {
+  var button = _ref.button,
+    description = _ref.description,
+    frameStyle = _ref.frameStyle,
+    iconUrlOrElement = _ref.icon,
+    imageUrlOrElement = _ref.image,
+    inheritDimensions = _ref.inheritDimensions,
+    isSelected = _ref.isSelected,
+    onClick = _ref.onClick,
+    testId = _ref.testId,
+    text = _ref.text,
+    title = _ref.title,
+    url = _ref.url;
+  var icon = (0, _react.useMemo)(function () {
+    if ( /*#__PURE__*/_react.default.isValidElement(iconUrlOrElement)) {
+      return iconUrlOrElement;
+    }
+    return (0, _react2.jsx)(_ImageIcon.ImageIcon, {
+      src: typeof iconUrlOrElement === 'string' ? iconUrlOrElement : undefined,
+      default: (0, _react2.jsx)(_link.default, {
+        label: "icon",
+        LEGACY_size: "small",
+        testId: "embed-card-fallback-icon",
+        color: "currentColor"
+      })
+    });
+  }, [iconUrlOrElement]);
+  var image = (0, _react.useMemo)(function () {
+    if (!imageUrlOrElement) {
+      return null;
+    }
+    var imageTestId = "".concat(testId, "-unresolved-image");
+    if (typeof imageUrlOrElement === 'string') {
+      // eslint-disable-next-line jsx-a11y/alt-text
+      return (0, _react2.jsx)("img", {
+        css: imageStyles,
+        "data-testid": imageTestId,
+        src: imageUrlOrElement
+      });
+    }
+    return (0, _react2.jsx)("div", {
+      css: imageStyles,
+      "data-testid": imageTestId
+    }, imageUrlOrElement);
+  }, [imageUrlOrElement, testId]);
+  return (0, _react2.jsx)(_ExpandedFrame.ExpandedFrame
+  // Scroll bar must be shown for unresolved views to display the connect account button
+  , {
+    allowScrollBar: true,
+    setOverflow: true
+    // EDM-9259: Fix embed frame showing on unresolved views when frameStyle is set to hide.
+    // Set fallback to 'show' here to maintain the current behaviour when platform.editor.show-embed-card-frame-renderer is OFF.
+    // Remove 'show' on platform.editor.show-embed-card-frame-renderer cleanup as frameStyle will be set to 'show' both in renderer and editor.
+    // We want all views to be consistent and respect frameStyle instead of
+    // having resolved view default to showOnHover and unresolved view default to show.
+    // Default frameStyle is set inside <ExpandedFrame />
+    ,
+    frameStyle: frameStyle !== null && frameStyle !== void 0 ? frameStyle : 'show',
+    href: url,
+    icon: icon,
+    inheritDimensions: inheritDimensions,
+    isSelected: isSelected,
+    onClick: onClick,
+    testId: testId,
+    text: text
+  }, (0, _react2.jsx)("div", {
+    css: containerStyles,
+    "data-testid": "".concat(testId, "-unresolved-container")
+  }, (0, _react2.jsx)("div", {
+    css: contentStyles
+  }, image, (0, _react2.jsx)(_heading.default, {
+    size: "large",
+    testId: "".concat(testId, "-unresolved-title")
+  }, title), (0, _react2.jsx)("span", {
+    css: descriptionStyles,
+    "data-testid": "".concat(testId, "-unresolved-description")
+  }, description), button)));
+};
+var _default = exports.default = UnresolvedViewOld;

package/dist/cjs/view/EmbedCard/views/unresolved-view/index.compiled.css

@@ -0,0 +1,19 @@
+._11c81oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._1yt4pxbi{padding:var(--ds-space-200,1pc)}
+._zulpv47k{gap:var(--ds-space-250,20px)}
+._18u01wug{margin-left:auto}
+._19pk1wug{margin-top:auto}
+._1bah1h6o{justify-content:center}
+._1bsbmgvx{width:180px}
+._1e0c11p5{display:grid}
+._1e0c1txw{display:flex}
+._2hwx1wug{margin-right:auto}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._4t3i1kw7{height:inherit}
+._4t3i68cl{height:90pt}
+._5ral1f51{object-fit:contain}
+._otyr1wug{margin-bottom:auto}
+._p12f1kdj{max-width:25pc}
+._rsufaqso{object-position:center center}
+._y3gn1h6o{text-align:center}

package/dist/cjs/view/EmbedCard/views/unresolved-view/index.js

@@ -1,3 +1,4 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,49 +6,22 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.UnresolvedViewExported = void 0;
+require("./index.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var _link = _interopRequireDefault(require("@atlaskit/icon/core/migration/link"));
-var _utils = require("../../../common/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _ExpandedFrame = require("../../components/ExpandedFrame");
 var _ImageIcon = require("../../components/ImageIcon");
+var _UnresolvedViewOld = _interopRequireDefault(require("./UnresolvedViewOld"));
 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 && {}.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; }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var containerStyles = (0, _react2.css)({
-  display: 'grid',
-  height: 'inherit'
-});
-var contentStyles = (0, _react2.css)({
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  textAlign: 'center',
-  alignItems: 'center',
-  margin: 'auto',
-  padding: "var(--ds-space-200, 16px)",
-  gap: "var(--ds-space-250, 20px)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  maxWidth: (0, _utils.gs)(50)
-});
-var descriptionStyles = (0, _react2.css)({
-  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  textAlign: 'center'
-});
-var imageStyles = (0, _react2.css)({
-  height: '120px',
-  width: '180px',
-  objectFit: 'contain',
-  objectPosition: 'center center'
-});
+var containerStyles = null;
+var contentStyles = null;
+var descriptionStyles = null;
+var imageStyles = null;
 var UnresolvedView = function UnresolvedView(_ref) {
   var button = _ref.button,
     description = _ref.description,
@@ -65,9 +39,9 @@ var UnresolvedView = function UnresolvedView(_ref) {
     if ( /*#__PURE__*/_react.default.isValidElement(iconUrlOrElement)) {
       return iconUrlOrElement;
     }
-    return (0, _react2.jsx)(_ImageIcon.ImageIcon, {
+    return /*#__PURE__*/_react.default.createElement(_ImageIcon.ImageIcon, {
       src: typeof iconUrlOrElement === 'string' ? iconUrlOrElement : undefined,
-      default: (0, _react2.jsx)(_link.default, {
+      default: /*#__PURE__*/_react.default.createElement(_link.default, {
         label: "icon",
         LEGACY_size: "small",
         testId: "embed-card-fallback-icon",
@@ -82,18 +56,18 @@ var UnresolvedView = function UnresolvedView(_ref) {
     var imageTestId = "".concat(testId, "-unresolved-image");
     if (typeof imageUrlOrElement === 'string') {
       // eslint-disable-next-line jsx-a11y/alt-text
-      return (0, _react2.jsx)("img", {
-        css: imageStyles,
+      return /*#__PURE__*/_react.default.createElement("img", {
         "data-testid": imageTestId,
-        src: imageUrlOrElement
+        src: imageUrlOrElement,
+        className: (0, _runtime.ax)(["_4t3i68cl _1bsbmgvx _5ral1f51 _rsufaqso"])
       });
     }
-    return (0, _react2.jsx)("div", {
-      css: imageStyles,
-      "data-testid": imageTestId
+    return /*#__PURE__*/_react.default.createElement("div", {
+      "data-testid": imageTestId,
+      className: (0, _runtime.ax)(["_4t3i68cl _1bsbmgvx _5ral1f51 _rsufaqso"])
     }, imageUrlOrElement);
   }, [imageUrlOrElement, testId]);
-  return (0, _react2.jsx)(_ExpandedFrame.ExpandedFrame
+  return /*#__PURE__*/_react.default.createElement(_ExpandedFrame.ExpandedFrame
   // Scroll bar must be shown for unresolved views to display the connect account button
   , {
     allowScrollBar: true,
@@ -113,17 +87,24 @@ var UnresolvedView = function UnresolvedView(_ref) {
     onClick: onClick,
     testId: testId,
     text: text
-  }, (0, _react2.jsx)("div", {
-    css: containerStyles,
-    "data-testid": "".concat(testId, "-unresolved-container")
-  }, (0, _react2.jsx)("div", {
-    css: contentStyles
-  }, image, (0, _react2.jsx)(_heading.default, {
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": "".concat(testId, "-unresolved-container"),
+    className: (0, _runtime.ax)(["_1e0c11p5 _4t3i1kw7"])
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)(["_19pk1wug _2hwx1wug _otyr1wug _18u01wug _1yt4pxbi _zulpv47k _1e0c1txw _2lx21bp4 _1bah1h6o _y3gn1h6o _4cvr1h6o _p12f1kdj"])
+  }, image, /*#__PURE__*/_react.default.createElement(_heading.default, {
     size: "large",
     testId: "".concat(testId, "-unresolved-title")
-  }, title), (0, _react2.jsx)("span", {
-    css: descriptionStyles,
-    "data-testid": "".concat(testId, "-unresolved-description")
+  }, title), /*#__PURE__*/_react.default.createElement("span", {
+    "data-testid": "".concat(testId, "-unresolved-description"),
+    className: (0, _runtime.ax)(["_11c81oud _y3gn1h6o"])
   }, description), button)));
 };
-var _default = exports.default = UnresolvedView;
+var UnresolvedViewExported = exports.UnresolvedViewExported = function UnresolvedViewExported(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/_react.default.createElement(UnresolvedView, props);
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_UnresolvedViewOld.default, props);
+  }
+};
+var _default = exports.default = UnresolvedViewExported;

package/dist/cjs/view/FlexibleCard/components/actions/action/action-stack-item/action-button.compiled.css

@@ -0,0 +1,7 @@
+
+._kkk2n7od{all:unset}._11c8qk37{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._1yt41b66{padding:var(--ds-space-050,4px)}
+._1bsb1osq{width:100%}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
+._1di61dty:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)}

package/dist/cjs/view/FlexibleCard/components/actions/action/action-stack-item/action-button.js

@@ -1,3 +1,4 @@
+/* action-button.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,30 +7,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+require("./action-button.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
-var _primitives = require("@atlaskit/primitives");
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _utils = require("../../../utils");
 var _actionIcon = _interopRequireDefault(require("../action-icon"));
+var _actionButtonOld = _interopRequireDefault(require("./action-buttonOld"));
 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 && {}.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 buttonStyles = (0, _primitives.xcss)({
-  all: 'unset',
-  padding: 'space.050',
-  width: '100%',
-  ':hover': {
-    backgroundColor: 'color.background.neutral.subtle.hovered'
-  },
-  ':active': {
-    backgroundColor: 'color.background.neutral.subtle.pressed'
-  }
-});
-var contentStyles = (0, _primitives.xcss)({
-  color: 'color.text',
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
-});
-var ActionButton = function ActionButton(_ref) {
+var styles = {
+  button: "_kkk2n7od _1yt41b66 _1bsb1osq _irr3166n _1di61dty",
+  content: "_11c8qk37 _syaz1fxt"
+};
+var ActionButtonNew = function ActionButtonNew(_ref) {
   var content = _ref.content,
     iconOption = _ref.icon,
     isDisabled = _ref.isDisabled,
@@ -39,35 +34,40 @@ var ActionButton = function ActionButton(_ref) {
     spaceOption = _ref.space,
     testId = _ref.testId,
     tooltipProps = _ref.tooltipProps,
-    xcss = _ref.xcss;
+    style = _ref.style;
   var space = spaceOption !== null && spaceOption !== void 0 ? spaceOption : (0, _utils.getPrimitivesInlineSpaceBySize)(size);
   var onClick = (0, _react.useCallback)(function () {
     if (!isDisabled && !isLoading && onClickCallback) {
       onClickCallback();
     }
   }, [isDisabled, isLoading, onClickCallback]);
-  var icon = iconOption && isLoading ? /*#__PURE__*/_react.default.createElement(_actionIcon.default, {
+  var icon = iconOption && isLoading ? /*#__PURE__*/React.createElement(_actionIcon.default, {
     asStackItemIcon: true,
-    icon: /*#__PURE__*/_react.default.createElement(_spinner.default, {
+    icon: /*#__PURE__*/React.createElement(_spinner.default, {
       testId: "".concat(testId, "-loading")
     }),
     size: size
   }) : iconOption;
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    _react.default.createElement(_primitives.Pressable, (0, _extends2.default)({
-      xcss: [buttonStyles, xcss]
-    }, tooltipProps, {
-      onClick: onClick,
-      testId: testId
-    }), /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
-      alignBlock: "center",
-      grow: "fill",
-      space: space
-    }, icon, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-      xcss: contentStyles
-    }, content)))
-  );
+  return /*#__PURE__*/React.createElement(_compiled.Pressable, (0, _extends2.default)({
+    xcss: styles.button
+  }, tooltipProps, {
+    onClick: onClick,
+    testId: testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ,
+    style: style
+  }), /*#__PURE__*/React.createElement(_compiled.Inline, {
+    alignBlock: "center",
+    grow: "fill",
+    space: space
+  }, icon, /*#__PURE__*/React.createElement(_compiled.Box, {
+    xcss: styles.content
+  }, content)));
+};
+var ActionButton = function ActionButton(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(ActionButtonNew, props);
+  }
+  return /*#__PURE__*/React.createElement(_actionButtonOld.default, props);
 };
 var _default = exports.default = ActionButton;

package/dist/cjs/view/FlexibleCard/components/actions/action/action-stack-item/action-buttonOld.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _primitives = require("@atlaskit/primitives");
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+var _utils = require("../../../utils");
+var _actionIcon = _interopRequireDefault(require("../action-icon"));
+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 && {}.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 buttonStyles = (0, _primitives.xcss)({
+  all: 'unset',
+  padding: 'space.050',
+  width: '100%',
+  ':hover': {
+    backgroundColor: 'color.background.neutral.subtle.hovered'
+  },
+  ':active': {
+    backgroundColor: 'color.background.neutral.subtle.pressed'
+  }
+});
+var contentStyles = (0, _primitives.xcss)({
+  color: 'color.text',
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+});
+var ActionButtonOld = function ActionButtonOld(_ref) {
+  var content = _ref.content,
+    iconOption = _ref.icon,
+    isDisabled = _ref.isDisabled,
+    isLoading = _ref.isLoading,
+    onClickCallback = _ref.onClick,
+    size = _ref.size,
+    spaceOption = _ref.space,
+    testId = _ref.testId,
+    tooltipProps = _ref.tooltipProps,
+    xcss = _ref.xcss;
+  var space = spaceOption !== null && spaceOption !== void 0 ? spaceOption : (0, _utils.getPrimitivesInlineSpaceBySize)(size);
+  var onClick = (0, _react.useCallback)(function () {
+    if (!isDisabled && !isLoading && onClickCallback) {
+      onClickCallback();
+    }
+  }, [isDisabled, isLoading, onClickCallback]);
+  var icon = iconOption && isLoading ? /*#__PURE__*/_react.default.createElement(_actionIcon.default, {
+    asStackItemIcon: true,
+    icon: /*#__PURE__*/_react.default.createElement(_spinner.default, {
+      testId: "".concat(testId, "-loading")
+    }),
+    size: size
+  }) : iconOption;
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    _react.default.createElement(_primitives.Pressable, (0, _extends2.default)({
+      xcss: [buttonStyles, xcss]
+    }, tooltipProps, {
+      onClick: onClick,
+      testId: testId
+    }), /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
+      alignBlock: "center",
+      grow: "fill",
+      space: space
+    }, icon, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+      xcss: contentStyles
+    }, content)))
+  );
+};
+var _default = exports.default = ActionButtonOld;

package/dist/cjs/view/FlexibleCard/components/actions/action/index.js

@@ -38,7 +38,7 @@ var ActionNew = function ActionNew(_ref) {
     tooltipOnHide = _ref.tooltipOnHide,
     hideTooltip = _ref.hideTooltip,
     hideTooltipOnMouseDown = _ref.hideTooltipOnMouseDown,
-    xcss = _ref.xcss,
+    style = _ref.style,
     asDropDownItem = _ref.asDropDownItem,
     className = _ref.className,
     isDisabled = _ref.isDisabled,
@@ -70,9 +70,9 @@ var ActionNew = function ActionNew(_ref) {
       size: size,
       testId: testId,
       tooltipMessage: tooltipMessage || content
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
       ,
-      xcss: xcss,
+      style: style,
       tooltipOnHide: tooltipOnHide,
       hideTooltipOnMouseDown: hideTooltipOnMouseDown,
       hideTooltip: hideTooltip

package/dist/cjs/view/FlexibleCard/components/actions/automation-action/AutomationActionOld.js

@@ -0,0 +1,100 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _automation = _interopRequireDefault(require("@atlaskit/icon/core/automation"));
+var _primitives = require("@atlaskit/primitives");
+var _useAnalyticsEvents2 = require("../../../../../common/analytics/generated/use-analytics-events");
+var _constants = require("../../../../../constants");
+var _messages = require("../../../../../messages");
+var _flexibleUiContext = require("../../../../../state/flexible-ui-context");
+var _modal = require("../../../../../state/modal");
+var _action = _interopRequireDefault(require("../action"));
+var _manualTriggersIcon = _interopRequireDefault(require("./manual-triggers-icon"));
+var _utils = require("./utils");
+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" != (0, _typeof2.default)(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 && {}.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 AutomationModal = /*#__PURE__*/(0, _react.lazy)(function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_smart-card-automation-modal" */'./automation-manual-triggers/manual-triggers-modal'));
+  });
+});
+var AutomationActionOld = function AutomationActionOld(props) {
+  var _context$actions;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var modal = (0, _modal.useSmartLinkModal)();
+  var onClickCallback = props.onClick;
+  var context = (0, _flexibleUiContext.useFlexibleUiContext)();
+  var _useAnalyticsEvents = (0, _useAnalyticsEvents2.useAnalyticsEvents)(),
+    fireEvent = _useAnalyticsEvents.fireEvent;
+  var automationActionData = context === null || context === void 0 || (_context$actions = context.actions) === null || _context$actions === void 0 ? void 0 : _context$actions[_constants.ActionName.AutomationAction];
+  var automationActionOnClick = (0, _react.useCallback)(function (automationActionData) {
+    var product = automationActionData.product,
+      resourceType = automationActionData.resourceType,
+      baseAutomationUrl = automationActionData.baseAutomationUrl,
+      objectAri = automationActionData.objectAri,
+      siteAri = automationActionData.siteAri,
+      canManageAutomation = automationActionData.canManageAutomation,
+      analyticsSource = automationActionData.analyticsSource,
+      objectName = automationActionData.objectName;
+    fireEvent('ui.button.clicked.automationAction', {});
+    var _ref = (0, _utils.getModalContent)(product, resourceType) || {},
+      modalTitle = _ref.modalTitle,
+      modalDescription = _ref.modalDescription;
+    var automationModalTitle = modalTitle ? /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, modalTitle) : undefined;
+    var automationModalDescription = modalDescription ? /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, modalDescription, {
+      values: {
+        name: objectName,
+        b: function b(chunks) {
+          return /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+            as: "strong"
+          }, chunks);
+        },
+        br: /*#__PURE__*/_react.default.createElement("br", null)
+      }
+    })) : undefined;
+    modal.open( /*#__PURE__*/_react.default.createElement(AutomationModal, {
+      baseAutomationUrl: baseAutomationUrl,
+      objectAri: objectAri,
+      siteAri: siteAri,
+      canManageAutomation: canManageAutomation,
+      analyticsSource: analyticsSource,
+      modalTitle: automationModalTitle,
+      modalDescription: automationModalDescription,
+      onClose: function onClose() {
+        return modal.close();
+      }
+    }));
+    onClickCallback === null || onClickCallback === void 0 || onClickCallback();
+  }, [modal, onClickCallback, fireEvent]);
+  if (!automationActionData) {
+    return null;
+  }
+  var automationActionTitle = /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.automation_action_title);
+  var automationActionTooltip = /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.automation_action_tooltip);
+  var automationActionIconLabel = formatMessage(_messages.messages.automation_action_icon_label);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_action.default, (0, _extends2.default)({
+    content: automationActionTitle,
+    icon: /*#__PURE__*/_react.default.createElement(_automation.default, {
+      spacing: "spacious",
+      LEGACY_fallbackIcon: _manualTriggersIcon.default,
+      color: "currentColor",
+      label: automationActionIconLabel
+    }),
+    testId: "smart-action-automation-action",
+    tooltipMessage: automationActionTooltip
+  }, props, {
+    onClick: function onClick() {
+      return automationActionOnClick(automationActionData);
+    }
+  })));
+};
+var _default = exports.default = AutomationActionOld;