@atlaskit/smart-card 34.7.0 → 34.8.0

package/dist/esm/view/InlineCard/ForbiddenView/index.js

@@ -1,12 +1,8 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import ButtonOld from '@atlaskit/button';
@@ -14,189 +10,143 @@ import LockLockedIcon from '@atlaskit/icon/core/lock-locked';
 import LegacyLockIcon from '@atlaskit/icon/glyph/lock-filled';
 import Lozenge from '@atlaskit/lozenge';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Box, Pressable, xcss } from '@atlaskit/primitives';
+import { Box, Pressable } from '@atlaskit/primitives/compiled';
 import { N500, R400 } from '@atlaskit/theme/colors';
 import { messages } from '../../../messages';
 import { HoverCard } from '../../HoverCard';
 import { ActionButton } from '../common/action-button';
 import { Frame } from '../Frame';
 import { AKIconWrapper } from '../Icon';
-import { AKIconWrapper as AKIconWrapperOld } from '../Icon-emotion';
-import { IconAndTitleLayout, LozengeWrapper as LozengeWrapperNew } from '../IconAndTitleLayout';
-import { LozengeWrapperOldVisualRefresh } from '../IconAndTitleLayout/styled';
+import { IconAndTitleLayout, LozengeWrapper } from '../IconAndTitleLayout';
 import { IconStyledButtonOldVisualRefresh } from '../styled';
-import { IconStyledButton as IconStyledButtonOld } from '../styled-emotion';
 import withFrameStyleControl from '../utils/withFrameStyleControl';
-var iconWrapperStyles = xcss({
-  marginRight: 'space.negative.025'
-});
+import { InlineCardForbiddenViewOld } from './InlineCardForbiddenViewOld';
+var styles = {
+  iconWrapper: "_2hwx1i6y",
+  actionButtonLozengeStyle: "_1yt4ze3t _bfhksm61"
+};
 var fallbackForbiddenIcon = function fallbackForbiddenIcon() {
-  if (fg('bandicoots-compiled-migration-smartcard')) {
-    return fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(Box, {
-      as: "span",
-      xcss: iconWrapperStyles
-    }, /*#__PURE__*/React.createElement(LockLockedIcon, {
-      label: "error",
-      color: "var(--ds-icon-danger, #C9372C)",
-      LEGACY_fallbackIcon: LegacyLockIcon,
-      LEGACY_size: "small",
-      testId: "forbidden-view-fallback-icon"
-    })) : /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LegacyLockIcon, {
-      label: "error",
-      size: "small",
-      primaryColor: "var(--ds-icon-danger, ".concat(R400, ")"),
-      testId: "forbidden-view-fallback-icon"
-    }));
-  } else {
-    return fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(Box, {
-      as: "span",
-      xcss: iconWrapperStyles
-    }, /*#__PURE__*/React.createElement(LockLockedIcon, {
-      label: "error",
-      color: "var(--ds-icon-danger, #C9372C)",
-      LEGACY_fallbackIcon: LegacyLockIcon,
-      LEGACY_size: "small",
-      testId: "forbidden-view-fallback-icon"
-    })) : /*#__PURE__*/React.createElement(AKIconWrapperOld, null, /*#__PURE__*/React.createElement(LegacyLockIcon, {
-      label: "error",
-      size: "small",
-      primaryColor: "var(--ds-icon-danger, ".concat(R400, ")"),
-      testId: "forbidden-view-fallback-icon"
-    }));
-  }
+  return fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.iconWrapper
+  }, /*#__PURE__*/React.createElement(LockLockedIcon, {
+    label: "error",
+    color: "var(--ds-icon-danger, #C9372C)",
+    LEGACY_fallbackIcon: LegacyLockIcon,
+    LEGACY_size: "small",
+    testId: "forbidden-view-fallback-icon"
+  })) : /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LegacyLockIcon, {
+    label: "error",
+    size: "small",
+    primaryColor: "var(--ds-icon-danger, ".concat(R400, ")"),
+    testId: "forbidden-view-fallback-icon"
+  }));
 };
-export var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
-  function InlineCardForbiddenView() {
-    var _this$props;
-    var _this;
-    _classCallCheck(this, InlineCardForbiddenView);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+var InlineCardForbiddenViewNew = function InlineCardForbiddenViewNew(_ref) {
+  var url = _ref.url,
+    icon = _ref.icon,
+    onClick = _ref.onClick,
+    isSelected = _ref.isSelected,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'inline-card-forbidden-view' : _ref$testId,
+    truncateInline = _ref.truncateInline,
+    requestAccessContext = _ref.requestAccessContext,
+    onAuthorise = _ref.onAuthorise,
+    context = _ref.context,
+    showHoverPreview = _ref.showHoverPreview;
+  var frameRef = React.useRef(null);
+  var _React$useState = React.useState(!!(requestAccessContext !== null && requestAccessContext !== void 0 && requestAccessContext.callToActionMessageKey)),
+    _React$useState2 = _slicedToArray(_React$useState, 1),
+    hasRequestAccessContextMessage = _React$useState2[0];
+  var handleRetry = React.useCallback(function (event) {
+    event.preventDefault();
+    event.stopPropagation();
+    if (onAuthorise) {
+      onAuthorise();
+    } else {
+      var _requestAccessContext;
+      requestAccessContext === null || requestAccessContext === void 0 || (_requestAccessContext = requestAccessContext.action) === null || _requestAccessContext === void 0 || _requestAccessContext.promise();
     }
-    _this = _callSuper(this, InlineCardForbiddenView, [].concat(args));
-    _defineProperty(_this, "frameRef", /*#__PURE__*/React.createRef());
-    _defineProperty(_this, "state", {
-      hasRequestAccessContextMessage: !!((_this$props = _this.props) !== null && _this$props !== void 0 && (_this$props = _this$props.requestAccessContext) !== null && _this$props !== void 0 && _this$props.callToActionMessageKey)
-    });
-    _defineProperty(_this, "handleRetry", function (event) {
-      var onAuthorise = _this.props.onAuthorise;
-      event.preventDefault();
-      event.stopPropagation();
-      if (onAuthorise) {
-        onAuthorise();
-      } else {
-        var _this$props2;
-        (_this$props2 = _this.props) === null || _this$props2 === void 0 || (_this$props2 = _this$props2.requestAccessContext) === null || _this$props2 === void 0 || (_this$props2 = _this$props2.action) === null || _this$props2 === void 0 || _this$props2.promise();
-      }
-    });
-    _defineProperty(_this, "renderForbiddenAccessMessage", function () {
-      var _this$props3;
-      if ((_this$props3 = _this.props) !== null && _this$props3 !== void 0 && (_this$props3 = _this$props3.requestAccessContext) !== null && _this$props3 !== void 0 && _this$props3.callToActionMessageKey) {
-        var callToActionMessageKey = _this.props.requestAccessContext.callToActionMessageKey;
-        return /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages[callToActionMessageKey], {
-          values: {
-            product: _this.props.context
-          }
-        }));
-      }
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.invalid_permissions, function (formattedMessage) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, formattedMessage);
+  }, [onAuthorise, requestAccessContext === null || requestAccessContext === void 0 ? void 0 : requestAccessContext.action]);
+  var renderForbiddenAccessMessage = React.useCallback(function () {
+    if (requestAccessContext !== null && requestAccessContext !== void 0 && requestAccessContext.callToActionMessageKey) {
+      var callToActionMessageKey = requestAccessContext.callToActionMessageKey;
+      return /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages[callToActionMessageKey], {
+        values: {
+          product: context
+        }
       }));
+    }
+    return /*#__PURE__*/React.createElement(FormattedMessage, messages.invalid_permissions, function (formattedMessage) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, formattedMessage);
     });
-    _defineProperty(_this, "renderActionButton", function () {
-      var _this$props$requestAc;
-      var onAuthorise = _this.props.onAuthorise;
-      var LozengeWrapper = fg('platform-linking-visual-refresh-v1') ? LozengeWrapperNew : LozengeWrapperOldVisualRefresh;
-      var Button = withFrameStyleControl(ButtonOld, _this.frameRef);
-      var accessType = (_this$props$requestAc = _this.props.requestAccessContext) === null || _this$props$requestAc === void 0 ? void 0 : _this$props$requestAc.accessType;
-      if (_this.state.hasRequestAccessContextMessage) {
-        if (fg('bandicoots-compiled-migration-smartcard')) {
-          if (fg('platform-linking-visual-refresh-v1')) {
-            var isDisabled = accessType === 'PENDING_REQUEST_EXISTS';
-            return /*#__PURE__*/React.createElement(Button, {
-              onClick: _this.handleRetry,
-              component: ActionButton,
-              testId: "button-connect-other-account",
-              isDisabled: isDisabled
-            }, _this.renderForbiddenAccessMessage());
-          }
-          return /*#__PURE__*/React.createElement(Button, {
-            spacing: "none",
-            onClick: _this.handleRetry,
-            component: IconStyledButtonOldVisualRefresh,
-            testId: "button-connect-other-account",
-            role: "button",
-            isDisabled: accessType === 'PENDING_REQUEST_EXISTS'
-          }, _this.renderForbiddenAccessMessage());
-        } else {
-          return /*#__PURE__*/React.createElement(Button, {
-            spacing: "none",
-            onClick: _this.handleRetry,
-            component: IconStyledButtonOld,
-            testId: "button-connect-other-account",
-            role: "button",
-            isDisabled: accessType === 'PENDING_REQUEST_EXISTS'
-          }, _this.renderForbiddenAccessMessage());
-        }
-      }
-      if (onAuthorise) {
-        if (fg('platform-linking-visual-refresh-v1')) {
-          return /*#__PURE__*/React.createElement(LozengeWrapper, null, /*#__PURE__*/React.createElement(Pressable, {
-            xcss: actionButtonLozengeStyle,
-            onClick: _this.handleRetry,
-            testId: "button-connect-other-account"
-          }, /*#__PURE__*/React.createElement(Lozenge, {
-            appearance: 'moved'
-          }, _this.renderForbiddenAccessMessage())));
-        }
+  }, [context, requestAccessContext]);
+  var renderActionButton = React.useCallback(function () {
+    var Button = withFrameStyleControl(ButtonOld, frameRef);
+    var accessType = requestAccessContext === null || requestAccessContext === void 0 ? void 0 : requestAccessContext.accessType;
+    if (hasRequestAccessContextMessage) {
+      if (fg('platform-linking-visual-refresh-v1')) {
+        var isDisabled = accessType === 'PENDING_REQUEST_EXISTS';
         return /*#__PURE__*/React.createElement(Button, {
-          spacing: "none",
-          onClick: _this.handleRetry,
-          appearance: "subtle-link",
+          onClick: handleRetry,
+          component: ActionButton,
           testId: "button-connect-other-account",
-          role: "button"
-        }, /*#__PURE__*/React.createElement(LozengeWrapper, null, /*#__PURE__*/React.createElement(Lozenge, {
-          appearance: 'moved'
-        }, _this.renderForbiddenAccessMessage())));
+          isDisabled: isDisabled
+        }, renderForbiddenAccessMessage());
       }
-      return null;
-    });
-    return _this;
-  }
-  _inherits(InlineCardForbiddenView, _React$Component);
-  return _createClass(InlineCardForbiddenView, [{
-    key: "render",
-    value: function render() {
-      var _this$props4 = this.props,
-        url = _this$props4.url,
-        icon = _this$props4.icon,
-        onClick = _this$props4.onClick,
-        isSelected = _this$props4.isSelected,
-        _this$props4$testId = _this$props4.testId,
-        testId = _this$props4$testId === void 0 ? 'inline-card-forbidden-view' : _this$props4$testId,
-        truncateInline = _this$props4.truncateInline;
-      var content = /*#__PURE__*/React.createElement(Frame, {
-        testId: testId,
-        isSelected: isSelected,
-        ref: this.frameRef,
-        truncateInline: truncateInline
-      }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
-        icon: icon ? icon : fallbackForbiddenIcon(),
-        link: url,
-        title: url,
-        onClick: onClick,
-        titleColor: "var(--ds-text-subtle, ".concat(N500, ")")
-      }), this.renderActionButton());
-      if (this.props.showHoverPreview) {
-        return /*#__PURE__*/React.createElement(HoverCard, {
-          url: url
-        }, content);
+      return /*#__PURE__*/React.createElement(Button, {
+        spacing: "none",
+        onClick: handleRetry,
+        component: IconStyledButtonOldVisualRefresh,
+        testId: "button-connect-other-account",
+        role: "button",
+        isDisabled: accessType === 'PENDING_REQUEST_EXISTS'
+      }, renderForbiddenAccessMessage());
+    }
+    if (onAuthorise) {
+      if (fg('platform-linking-visual-refresh-v1')) {
+        return /*#__PURE__*/React.createElement(LozengeWrapper, null, /*#__PURE__*/React.createElement(Pressable, {
+          xcss: styles.actionButtonLozengeStyle,
+          onClick: handleRetry,
+          testId: "button-connect-other-account"
+        }, /*#__PURE__*/React.createElement(Lozenge, {
+          appearance: 'moved'
+        }, renderForbiddenAccessMessage())));
       }
-      return content;
+      return /*#__PURE__*/React.createElement(Button, {
+        spacing: "none",
+        onClick: handleRetry,
+        appearance: "subtle-link",
+        testId: "button-connect-other-account",
+        role: "button"
+      }, /*#__PURE__*/React.createElement(LozengeWrapper, null, /*#__PURE__*/React.createElement(Lozenge, {
+        appearance: 'moved'
+      }, renderForbiddenAccessMessage())));
     }
-  }]);
-}(React.Component);
-var actionButtonLozengeStyle = xcss({
-  backgroundColor: 'color.background.neutral.subtle',
-  padding: 'space.0'
-});
+    return null;
+  }, [handleRetry, hasRequestAccessContextMessage, onAuthorise, renderForbiddenAccessMessage, requestAccessContext === null || requestAccessContext === void 0 ? void 0 : requestAccessContext.accessType]);
+  var content = /*#__PURE__*/React.createElement(Frame, {
+    testId: testId,
+    isSelected: isSelected,
+    ref: frameRef,
+    truncateInline: truncateInline
+  }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
+    icon: icon ? icon : fallbackForbiddenIcon(),
+    link: url,
+    title: url,
+    onClick: onClick,
+    titleColor: "var(--ds-text-subtle, ".concat(N500, ")")
+  }), renderActionButton());
+  if (showHoverPreview) {
+    return /*#__PURE__*/React.createElement(HoverCard, {
+      url: url
+    }, content);
+  }
+  return content;
+};
+export var InlineCardForbiddenView = function InlineCardForbiddenView(props) {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(InlineCardForbiddenViewNew, props);
+  }
+  return /*#__PURE__*/React.createElement(InlineCardForbiddenViewOld, props);
+};

package/dist/esm/view/InlineCard/IconAndTitleLayout/IconAndTitleLayoutOld.compiled.css

@@ -0,0 +1 @@
+._1bsb1osq{width:100%}

package/dist/esm/view/InlineCard/IconAndTitleLayout/IconAndTitleLayoutOld.js

@@ -0,0 +1,219 @@
+/* IconAndTitleLayoutOld.tsx generated by @compiled/babel-plugin v0.36.0 */
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./IconAndTitleLayoutOld.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+import React from 'react';
+import { di } from 'react-magnetic-di';
+import ImageLoader from 'react-render-image';
+import LinkIcon from '@atlaskit/icon/core/migration/link';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, xcss } from '@atlaskit/primitives';
+import { Icon, Shimmer } from '../Icon';
+import { LinkAppearance as LinkAppearanceOld, NoLinkAppearance as NoLinkAppearanceOld } from '../styled-emotion';
+import { EmojiWrapperOldVisualRefresh, IconWrapperOldVisualRefresh, TitleWrapperClassNameOldVisualRefresh } from './styled';
+import { EmojiWrapper as EmojiWrapperOld, IconEmptyWrapper as IconEmptyWrapperOld, IconPositionWrapper as IconPositionWrapperOld, IconTitleWrapper as IconTitleWrapperOld, IconWrapper as IconWrapperOld, TitleWrapper as TitleWrapperOld } from './styled-emotion';
+export var IconAndTitleLayoutOld = /*#__PURE__*/function (_React$Component) {
+  function IconAndTitleLayoutOld() {
+    var _this;
+    _classCallCheck(this, IconAndTitleLayoutOld);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, IconAndTitleLayoutOld, [].concat(args));
+    _defineProperty(_this, "handleClick", function (event) {
+      var onClick = _this.props.onClick;
+      if (onClick) {
+        event.preventDefault();
+        event.stopPropagation();
+        onClick(event);
+      }
+    });
+    _defineProperty(_this, "handleKeyPress", function (event) {
+      var onClick = _this.props.onClick;
+      if (event.key !== ' ' && event.key !== 'Enter') {
+        return;
+      }
+      if (onClick) {
+        event.preventDefault();
+        event.stopPropagation();
+        onClick(event);
+      }
+    });
+    return _this;
+  }
+  _inherits(IconAndTitleLayoutOld, _React$Component);
+  return _createClass(IconAndTitleLayoutOld, [{
+    key: "renderAtlaskitIcon",
+    value: function renderAtlaskitIcon() {
+      var _this$props = this.props,
+        icon = _this$props.icon,
+        emoji = _this$props.emoji;
+      if (emoji) {
+        if (fg('platform-linking-visual-refresh-v1')) {
+          return /*#__PURE__*/React.createElement(Box, {
+            as: "span",
+            xcss: iconWrapperStyle,
+            testId: "icon-position-emoji-wrapper"
+          }, emoji);
+        }
+        return fg('bandicoots-compiled-migration-smartcard') ? /*#__PURE__*/React.createElement(EmojiWrapperOldVisualRefresh, null, emoji) : /*#__PURE__*/React.createElement(EmojiWrapperOld, null, emoji);
+      }
+      if (!icon || typeof icon === 'string') {
+        return null;
+      }
+      if (fg('platform-linking-visual-refresh-v1')) {
+        return /*#__PURE__*/React.createElement(Box, {
+          as: "span",
+          xcss: iconWrapperStyle,
+          testId: "icon-atlaskit-icon-wrapper"
+        }, icon);
+      }
+      return fg('bandicoots-compiled-migration-smartcard') ? /*#__PURE__*/React.createElement(IconWrapperOldVisualRefresh, null, icon) : /*#__PURE__*/React.createElement(IconWrapperOld, null, icon);
+    }
+  }, {
+    key: "renderImageIcon",
+    value: function renderImageIcon(errored, testId) {
+      var url = this.props.icon;
+      if (!url || typeof url !== 'string') {
+        return null;
+      }
+      if (fg('platform-linking-visual-refresh-v1')) {
+        return /*#__PURE__*/React.createElement(ImageLoader, {
+          src: url,
+          loaded: /*#__PURE__*/React.createElement("img", {
+            src: url,
+            "data-testid": "".concat(testId, "-image"),
+            alt: "",
+            className: ax(["_1bsb1osq"])
+          }),
+          errored: errored,
+          loading: /*#__PURE__*/React.createElement(Shimmer, {
+            testId: "".concat(testId, "-loading")
+          })
+        });
+      }
+      return /*#__PURE__*/React.createElement(ImageLoader, {
+        src: url,
+        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": "".concat(testId, "-image")
+        }),
+        errored: errored,
+        loading: /*#__PURE__*/React.createElement(Shimmer, {
+          testId: "".concat(testId, "-loading")
+        })
+      });
+    }
+  }, {
+    key: "renderIconPlaceholder",
+    value: function renderIconPlaceholder(testId) {
+      var defaultIcon = this.props.defaultIcon;
+      if (fg('platform-linking-visual-refresh-v1')) {
+        return defaultIcon || /*#__PURE__*/React.createElement(LinkIcon, {
+          label: "link",
+          LEGACY_size: "small",
+          testId: "".concat(testId, "-default"),
+          color: "currentColor"
+        });
+      }
+      if (defaultIcon) {
+        return /*#__PURE__*/React.createElement(IconWrapperOldVisualRefresh, null, defaultIcon);
+      }
+      return /*#__PURE__*/React.createElement(IconWrapperOldVisualRefresh, null, /*#__PURE__*/React.createElement(LinkIcon, {
+        label: "link",
+        LEGACY_size: "small",
+        testId: "".concat(testId, "-default"),
+        color: "currentColor"
+      }));
+    }
+  }, {
+    key: "renderIcon",
+    value: function renderIcon(testId) {
+      // We render two kinds of icons here:
+      // - Image: acquired from either DAC or Teamwork Platform Apps;
+      // - Atlaskit Icon: an Atlaskit SVG;
+      // Each of these are scaled down to 12x12.
+      var icon = this.renderAtlaskitIcon();
+      if (icon) {
+        return icon;
+      }
+      var placeholder = this.renderIconPlaceholder(testId);
+      var image = this.renderImageIcon(placeholder, testId);
+      if (fg('platform-linking-visual-refresh-v1')) {
+        return /*#__PURE__*/React.createElement(Box, {
+          as: "span",
+          xcss: iconWrapperStyle,
+          testId: "".concat(testId, "-image-wrapper")
+        }, image || placeholder);
+      }
+      return image || placeholder;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+        children = _this$props2.children,
+        title = _this$props2.title,
+        titleColor = _this$props2.titleColor,
+        titleTextColor = _this$props2.titleTextColor,
+        link = _this$props2.link,
+        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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconPositionWrapperOld, {
+        "data-testid": "icon-position-wrapper"
+      }, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconEmptyWrapperOld, {
+        "data-testid": "icon-empty-wrapper"
+      }), this.renderIcon(testId))), /*#__PURE__*/React.createElement(TitleWrapperOld
+      // 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: TitleWrapperClassNameOldVisualRefresh
+      }, title));
+      return (
+        /*#__PURE__*/
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        React.createElement(IconTitleWrapperOld, {
+          style: {
+            color: titleColor
+          },
+          "data-testid": testId
+        }, link ? /*#__PURE__*/React.createElement(LinkAppearanceOld, {
+          href: link,
+          onClick: this.handleClick,
+          onKeyPress: this.handleKeyPress
+        }, titlePart) : titlePart, rightSide ? /*#__PURE__*/React.createElement(NoLinkAppearanceOld, null, rightSide) : null)
+      );
+    }
+  }]);
+}(React.Component);
+_defineProperty(IconAndTitleLayoutOld, "defaultProps", {
+  rightSideSpacer: true
+});
+var iconWidth = '16px';
+var iconWrapperStyle = xcss({
+  position: 'absolute',
+  display: 'inline-flex',
+  alignItems: 'center',
+  boxSizing: 'border-box',
+  top: 'space.0',
+  left: 'space.0',
+  bottom: 'space.0',
+  width: iconWidth,
+  userSelect: 'none'
+});
+var iconImageStyle = null;

package/dist/esm/view/InlineCard/IconAndTitleLayout/index.compiled.css

@@ -1,7 +1,36 @@
+._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)}
+._154ize3t{top:var(--ds-space-0,0)}
+._16d9qvcn{-webkit-box-decoration-break:clone;box-decoration-break:clone}
 ._18u01b66{margin-left:var(--ds-space-050,4px)}
+._18u0v77o{margin-left:var(--ds-space-025,2px)}
+._19bv1b66{padding-left:var(--ds-space-050,4px)}
+._19pkidpf{margin-top:0}
+._19pkze3t{margin-top:var(--ds-space-0,0)}
 ._1bsb1osq{width:100%}
+._1bsb7vkz{width:1pc}
+._1e0c116y{display:inline-flex}
+._1e0c1o8l{display:inline-block}
+._1ltvze3t{left:var(--ds-space-0,0)}
+._1nmz9jpi{word-break:break-all}
+._2hwx1b66{margin-right:var(--ds-space-050,4px)}
+._4cvr1h6o{align-items:center}
+._94n5ze3t{bottom:var(--ds-space-0,0)}
+._ca0qv77o{padding-top:var(--ds-space-025,2px)}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
+._o5721jtm{white-space:pre-wrap}
+._otyridpf{margin-bottom:0}
+._otyrze3t{margin-bottom:var(--ds-space-0,0)}
+._s7n4t94y{vertical-align:1px}
+._s7n4yfq0{vertical-align:bottom}
+._syaz131l{color:var(--ds-text-subtlest,#626f86)}
 ._syaz1wmz{color:var(--ds-text-subtlest,#6b778c)}
 ._syaz1y58{color:var(--ds-link,#0052cc)}
+._tzy4idpf{opacity:0}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
+._vchhusvi{box-sizing:border-box}
 ._1bnxglyw:hover{text-decoration-line:none}
 ._9oik18uv:hover{text-decoration-color:initial}
 ._jf4cnqa1:hover{text-decoration-style:solid}