@atlaskit/smart-card 34.7.0 → 34.9.0

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

@@ -1,5 +1,4 @@
 /* index.tsx generated by @compiled/babel-plugin v0.36.0 */
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import "./index.compiled.css";
 import { forwardRef } from 'react';
@@ -9,12 +8,20 @@ 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 { Box } from '@atlaskit/primitives/compiled';
 import { B400, N200 } from '@atlaskit/theme/colors';
 import { Icon, Shimmer } from '../Icon';
-import { LinkAppearance as LinkAppearanceOld, NoLinkAppearance as NoLinkAppearanceOld } from '../styled-emotion';
-import { EmojiWrapperOldVisualRefresh, IconEmptyWrapperOldVisualRefresh, IconPositionWrapperOldVisualRefresh, IconTitleWrapperOldVisualRefresh, IconWrapperOldVisualRefresh, TitleWrapperClassNameOldVisualRefresh, TitleWrapperOldVisualRefresh } from './styled';
-import { EmojiWrapper as EmojiWrapperOld, IconEmptyWrapper as IconEmptyWrapperOld, IconPositionWrapper as IconPositionWrapperOld, IconTitleWrapper as IconTitleWrapperOld, IconWrapper as IconWrapperOld, TitleWrapper as TitleWrapperOld } from './styled-emotion';
+import { IconAndTitleLayoutOld } from './IconAndTitleLayoutOld';
+import { EmojiWrapperOldVisualRefresh, IconEmptyWrapperOldVisualRefresh, IconPositionWrapperOldVisualRefresh, IconWrapperOldVisualRefresh, TitleWrapperClassNameOldVisualRefresh } from './styled';
+const styles = {
+  lozengeInternalWrapperStyle: "_n3tdv77o",
+  lozengeWrapperStyle: "_1e0c1o8l _s7n4yfq0 _19pkze3t _2hwx1b66 _otyrze3t _18u0v77o",
+  iconEmptyStyle: "_1bsb7vkz _1e0c1o8l _tzy4idpf",
+  iconOuterWrapperStyle: "_2hwx1b66 _1e0c1o8l _kqswh2mm",
+  iconTitleWrapperStyle: "_o5721jtm _1nmz9jpi _16d9qvcn _ca0qv77o _u5f31b66 _n3tdv77o _19bv1b66",
+  iconWrapperStyle: "_kqswstnw _1e0c116y _4cvr1h6o _vchhusvi _154ize3t _1ltvze3t _94n5ze3t _1bsb7vkz _uiztglyw",
+  noLinkAppearanceStyle: "_11c81oud _syaz131l _18u01b66"
+};
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- Ignored via go/DSP-18766
 const NoLinkAppearanceOldVisualRefresh = forwardRef(({
   as: C = "span",
@@ -46,47 +53,29 @@ const LinkAppearance = forwardRef(({
 if (process.env.NODE_ENV !== 'production') {
   LinkAppearance.displayName = 'LinkAppearance';
 }
-export class IconAndTitleLayout extends React.Component {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "handleClick", event => {
-      const {
-        onClick
-      } = this.props;
-      if (onClick) {
-        event.preventDefault();
-        event.stopPropagation();
-        onClick(event);
-      }
-    });
-    _defineProperty(this, "handleKeyPress", event => {
-      const {
-        onClick
-      } = this.props;
-      if (event.key !== ' ' && event.key !== 'Enter') {
-        return;
-      }
-      if (onClick) {
-        event.preventDefault();
-        event.stopPropagation();
-        onClick(event);
-      }
-    });
-  }
-  renderAtlaskitIcon() {
-    const {
-      icon,
-      emoji
-    } = this.props;
+const IconAndTitleLayoutNew = ({
+  icon,
+  emoji,
+  defaultIcon,
+  onClick,
+  children,
+  title,
+  titleColor,
+  titleTextColor,
+  link,
+  rightSide,
+  testId = 'inline-card-icon-and-title'
+}) => {
+  const renderAtlaskitIcon = React.useCallback(() => {
     if (emoji) {
       if (fg('platform-linking-visual-refresh-v1')) {
         return /*#__PURE__*/React.createElement(Box, {
           as: "span",
-          xcss: iconWrapperStyle,
+          xcss: styles.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);
+      return /*#__PURE__*/React.createElement(EmojiWrapperOldVisualRefresh, null, emoji);
     }
     if (!icon || typeof icon === 'string') {
       return null;
@@ -94,24 +83,21 @@ export class IconAndTitleLayout extends React.Component {
     if (fg('platform-linking-visual-refresh-v1')) {
       return /*#__PURE__*/React.createElement(Box, {
         as: "span",
-        xcss: iconWrapperStyle,
+        xcss: styles.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);
-  }
-  renderImageIcon(errored, testId) {
-    const {
-      icon: url
-    } = this.props;
-    if (!url || typeof url !== 'string') {
+    return /*#__PURE__*/React.createElement(IconWrapperOldVisualRefresh, null, icon);
+  }, [emoji, icon]);
+  const renderImageIcon = React.useCallback((errored, testId) => {
+    if (!icon || typeof icon !== 'string') {
       return null;
     }
     if (fg('platform-linking-visual-refresh-v1')) {
       return /*#__PURE__*/React.createElement(ImageLoader, {
-        src: url,
+        src: icon,
         loaded: /*#__PURE__*/React.createElement("img", {
-          src: url,
+          src: icon,
           "data-testid": `${testId}-image`,
           alt: "",
           className: ax(["_1bsb1osq"])
@@ -123,12 +109,12 @@ export class IconAndTitleLayout extends React.Component {
       });
     }
     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
-      , {
+      src: icon
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+      ,
+      loaded: /*#__PURE__*/React.createElement(Icon, {
         className: "smart-link-icon",
-        src: url,
+        src: icon,
         "data-testid": `${testId}-image`
       }),
       errored: errored,
@@ -136,11 +122,8 @@ export class IconAndTitleLayout extends React.Component {
         testId: `${testId}-loading`
       })
     });
-  }
-  renderIconPlaceholder(testId) {
-    const {
-      defaultIcon
-    } = this.props;
+  }, [icon]);
+  const renderIconPlaceholder = React.useCallback(testId => {
     if (fg('platform-linking-visual-refresh-v1')) {
       return defaultIcon || /*#__PURE__*/React.createElement(LinkIcon, {
         label: "link",
@@ -158,181 +141,156 @@ export class IconAndTitleLayout extends React.Component {
       testId: `${testId}-default`,
       color: "currentColor"
     }));
-  }
-  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.
-    const icon = this.renderAtlaskitIcon();
+  }, [defaultIcon]);
+  const renderIcon = React.useCallback(testId => {
+    const icon = renderAtlaskitIcon();
     if (icon) {
       return icon;
     }
-    const placeholder = this.renderIconPlaceholder(testId);
-    const image = this.renderImageIcon(placeholder, testId);
+    const placeholder = renderIconPlaceholder(testId);
+    const image = renderImageIcon(placeholder, testId);
     if (fg('platform-linking-visual-refresh-v1')) {
       return /*#__PURE__*/React.createElement(Box, {
         as: "span",
-        xcss: iconWrapperStyle,
+        xcss: styles.iconWrapperStyle,
         testId: `${testId}-image-wrapper`
       }, image || placeholder);
     }
     return image || placeholder;
-  }
-  render() {
-    const {
-      children,
-      title,
-      titleColor,
-      titleTextColor,
-      link,
-      rightSide,
-      testId = 'inline-card-icon-and-title'
-    } = this.props;
-    const titlePart = fg('bandicoots-compiled-migration-smartcard') ? /*#__PURE__*/React.createElement(React.Fragment, null, fg('platform-linking-visual-refresh-v1') ? /*#__PURE__*/React.createElement(Box, {
-      as: "span",
-      xcss: iconOuterWrapperStyle,
-      testId: "icon-position-wrapper"
-    }, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
-      as: "span",
-      xcss: iconEmptyStyle,
-      testId: "icon-empty-wrapper"
-    }), this.renderIcon(testId))) : /*#__PURE__*/React.createElement(IconPositionWrapperOldVisualRefresh, {
-      "data-testid": "icon-position-wrapper"
-    }, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconEmptyWrapperOldVisualRefresh, {
-      "data-testid": "icon-empty-wrapper"
-    }), this.renderIcon(testId))), fg('platform-linking-visual-refresh-v1') ? /*#__PURE__*/React.createElement(Box, _extends({
-      as: "span",
-      style: {
-        color: this.props.titleTextColor
-      }
-    }, !fg('platform-linking-visual-refresh-v1') ? {
-      className: TitleWrapperClassNameOldVisualRefresh
-    } : {}), title) : /*#__PURE__*/React.createElement(TitleWrapperOldVisualRefresh, _extends({
-      style: {
-        color: this.props.titleTextColor
-      }
-    }, !fg('platform-linking-visual-refresh-v1') ? {
-      className: TitleWrapperClassNameOldVisualRefresh
-    } : {}), title)) : /*#__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));
-    if (fg('bandicoots-compiled-migration-smartcard')) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, fg('platform-linking-visual-refresh-v1') ? /*#__PURE__*/React.createElement(IconTitleWrapper, {
-        style: {
-          color: this.props.titleColor
-        },
-        testId: testId
-      }, link ? /*#__PURE__*/React.createElement(LinkAppearance, {
-        href: link,
-        onClick: this.handleClick,
-        onKeyPress: this.handleKeyPress
-      }, titlePart) : titlePart, rightSide ? /*#__PURE__*/React.createElement(Box, {
-        as: "span",
-        xcss: noLinkAppearanceStyle
-      }, rightSide) : null) : /*#__PURE__*/React.createElement(IconTitleWrapperOldVisualRefresh, {
-        style: {
-          color: this.props.titleColor
-        },
-        "data-testid": testId
-      }, link ? /*#__PURE__*/React.createElement(LinkAppearance, {
-        href: link,
-        onClick: this.handleClick,
-        onKeyPress: this.handleKeyPress
-      }, titlePart) : titlePart, rightSide ? /*#__PURE__*/React.createElement(NoLinkAppearanceOldVisualRefresh, null, rightSide) : null));
-    } else {
-      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)
-      );
+  }, [renderAtlaskitIcon, renderIconPlaceholder, renderImageIcon]);
+  const handleClick = React.useCallback(event => {
+    if (onClick) {
+      event.preventDefault();
+      event.stopPropagation();
+      onClick(event);
+    }
+  }, [onClick]);
+  const handleKeyPress = React.useCallback(event => {
+    if (event.key !== ' ' && event.key !== 'Enter') {
+      return;
+    }
+    if (onClick) {
+      event.preventDefault();
+      event.stopPropagation();
+      onClick(event);
+    }
+  }, [onClick]);
+
+  // maybe consider memoising this after clean up
+  const titlePart = /*#__PURE__*/React.createElement(React.Fragment, null, fg('platform-linking-visual-refresh-v1') ? /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.iconOuterWrapperStyle,
+    testId: "icon-position-wrapper"
+  }, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.iconEmptyStyle,
+    testId: "icon-empty-wrapper"
+  }), renderIcon(testId))) : /*#__PURE__*/React.createElement(IconPositionWrapperOldVisualRefresh, {
+    "data-testid": "icon-position-wrapper"
+  }, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconEmptyWrapperOldVisualRefresh, {
+    "data-testid": "icon-empty-wrapper"
+  }), renderIcon(testId))), fg('platform-linking-visual-refresh-v1') ? /*#__PURE__*/React.createElement(Box, _extends({
+    as: "span",
+    style: {
+      color: titleTextColor
     }
+  }, !fg('platform-linking-visual-refresh-v1') ? {
+    className: TitleWrapperClassNameOldVisualRefresh
+  } : {}), title) : /*#__PURE__*/React.createElement("span", _extends({
+    style: {
+      color: titleTextColor
+    }
+  }, !fg('platform-linking-visual-refresh-v1') ? {
+    className: TitleWrapperClassNameOldVisualRefresh
+  } : {}), title));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, fg('platform-linking-visual-refresh-v1') ? /*#__PURE__*/React.createElement(IconTitleWrapper, {
+    style: {
+      color: titleColor
+    },
+    testId: testId
+  }, link ? /*#__PURE__*/React.createElement(LinkAppearance, {
+    href: link,
+    onClick: handleClick,
+    onKeyPress: handleKeyPress
+  }, titlePart) : titlePart, rightSide ? /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.noLinkAppearanceStyle
+  }, rightSide) : null) : /*#__PURE__*/React.createElement(IconTitleWrapperOldVisualRefresh, {
+    style: {
+      color: titleColor
+    },
+    "data-testid": testId
+  }, link ? /*#__PURE__*/React.createElement(LinkAppearance, {
+    href: link,
+    onClick: handleClick,
+    onKeyPress: handleKeyPress
+  }, titlePart) : titlePart, rightSide ? /*#__PURE__*/React.createElement(NoLinkAppearanceOldVisualRefresh, null, rightSide) : null));
+};
+export const IconAndTitleLayout = ({
+  rightSideSpacer = true,
+  ...props
+}) => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(IconAndTitleLayoutNew, _extends({
+      rightSideSpacer: rightSideSpacer
+    }, props));
   }
-}
-_defineProperty(IconAndTitleLayout, "defaultProps", {
-  rightSideSpacer: true
+  return /*#__PURE__*/React.createElement(IconAndTitleLayoutOld, _extends({
+    rightSideSpacer: rightSideSpacer
+  }, props));
+};
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+const IconTitleWrapperOldVisualRefresh = forwardRef(({
+  as: C = "span",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_o5721jtm _1nmz9jpi _16d9qvcn _ca0qv77o _u5f31b66 _n3tdv77o _19bv1b66", __cmplp.className])
+  }));
 });
+if (process.env.NODE_ENV !== 'production') {
+  IconTitleWrapperOldVisualRefresh.displayName = 'IconTitleWrapperOldVisualRefresh';
+}
 export const IconTitleWrapper = props => {
-  return /*#__PURE__*/React.createElement(Box, _extends({
-    as: "span",
-    xcss: iconTitleWrapperStyle
-  }, props));
+  if (fg('platform-linking-visual-refresh-v1')) {
+    return /*#__PURE__*/React.createElement(Box, _extends({
+      as: "span",
+      xcss: styles.iconTitleWrapperStyle
+    }, props));
+  }
+  // note: This is just to get the types to work due to compiled css weirdness.
+  return /*#__PURE__*/React.createElement(IconTitleWrapperOldVisualRefresh, props);
 };
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+const LozengeWrapperOldVisualRefresh = forwardRef(({
+  as: C = "span",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_1e0c1o8l _s7n4t94y _19pkidpf _2hwx1b66 _otyridpf _18u0v77o", __cmplp.className])
+  }));
+});
+if (process.env.NODE_ENV !== 'production') {
+  LozengeWrapperOldVisualRefresh.displayName = 'LozengeWrapperOldVisualRefresh';
+}
 export const LozengeWrapper = props => {
-  return /*#__PURE__*/React.createElement(Box, {
-    as: "span",
-    xcss: lozengeWrapperStyle
-  }, /*#__PURE__*/React.createElement(Box, _extends({
-    xcss: lozengeInternalWrapperStyle
-  }, props)));
+  if (fg('platform-linking-visual-refresh-v1')) {
+    return /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: styles.lozengeWrapperStyle
+    }, /*#__PURE__*/React.createElement(Box, _extends({
+      xcss: styles.lozengeInternalWrapperStyle
+    }, props)));
+  }
+  // note: This is just to get the types to work due to compiled css weirdness.
+  return /*#__PURE__*/React.createElement(LozengeWrapperOldVisualRefresh, props);
 };
-const lozengeInternalWrapperStyle = xcss({
-  paddingBottom: 'space.025'
-});
-const lozengeWrapperStyle = xcss({
-  display: 'inline-block',
-  verticalAlign: 'bottom',
-  marginTop: 'space.0',
-  marginRight: 'space.050',
-  marginBottom: 'space.0',
-  marginLeft: 'space.025'
-});
-const horizontalPadding = 'space.050';
-const verticalPadding = 'space.025';
-const iconWidth = '16px';
-const iconEmptyStyle = xcss({
-  width: iconWidth,
-  display: 'inline-block',
-  opacity: 0
-});
-const iconOuterWrapperStyle = xcss({
-  marginRight: 'space.050',
-  display: 'inline-block',
-  position: 'relative'
-});
-const iconTitleWrapperStyle = xcss({
-  whiteSpace: 'pre-wrap',
-  wordBreak: 'break-all',
-  boxDecorationBreak: 'clone',
-  paddingTop: verticalPadding,
-  paddingRight: horizontalPadding,
-  paddingBottom: verticalPadding,
-  paddingLeft: horizontalPadding
-});
-const 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'
-});
-const iconImageStyle = null;
-const noLinkAppearanceStyle = xcss({
-  color: 'color.text.subtlest',
-  font: 'font.body',
-  marginLeft: 'space.050'
-});
+const iconImageStyle = null;

package/dist/es2019/view/InlineCard/IconAndTitleLayout/styled-emotion.js

@@ -111,4 +111,14 @@ export const IconEmptyWrapper = styled.span({
 export const TitleWrapperClassName = 'smart-link-title-wrapper';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-empty-styled-expression -- Ignored via go/DSP-18766
-export const TitleWrapper = styled.span({});
+export const TitleWrapper = styled.span({});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-styled
+export const LozengeWrapperOldVisualRefreshNotCompiled = styled.span({
+  display: 'inline-block',
+  verticalAlign: '1px',
+  marginTop: 0,
+  marginRight: "var(--ds-space-050, 4px)",
+  marginBottom: 0,
+  marginLeft: "var(--ds-space-025, 2px)"
+});

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

@@ -1,10 +1,8 @@
 import React from 'react';
 import Lozenge from '@atlaskit/lozenge';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { HoverCard } from '../../HoverCard';
 import { Frame } from '../Frame';
-import { IconAndTitleLayout, LozengeWrapper as LozengeWrapperNew } from '../IconAndTitleLayout';
-import { LozengeWrapperOldVisualRefresh } from '../IconAndTitleLayout/styled';
+import { IconAndTitleLayout, LozengeWrapper } from '../IconAndTitleLayout';
 export class InlineCardResolvedView extends React.Component {
   renderLozenge() {
     const {
@@ -14,7 +12,6 @@ export class InlineCardResolvedView extends React.Component {
       return null;
     }
     const appearance = lozenge.appearance || 'default';
-    const LozengeWrapper = fg('platform-linking-visual-refresh-v1') ? LozengeWrapperNew : LozengeWrapperOldVisualRefresh;
     return /*#__PURE__*/React.createElement(LozengeWrapper, null, /*#__PURE__*/React.createElement(Lozenge, {
       testId: "inline-card-resolved-view-lozenge",
       appearance: appearance

package/dist/es2019/view/InlineCard/ResolvingView/InlineCardResolvingViewOld.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import Spinner from '@atlaskit/spinner';
+import { Frame } from '../Frame';
+import { IconAndTitleLayout, IconTitleWrapper } from '../IconAndTitleLayout';
+import { RightIconPositionWrapper } from '../IconAndTitleLayout/styled';
+import { IconTitleWrapper as IconTitleWrapperOld, RightIconPositionWrapper as RightIconPositionWrapperOld } from '../IconAndTitleLayout/styled-emotion';
+import { SpinnerWrapperOldVisualRefresh } from './styled';
+import { SpinnerWrapper as SpinnerWrapperOld } from './styled-emotion';
+export class InlineCardResolvingViewOld extends React.Component {
+  render() {
+    const {
+      url,
+      onClick,
+      isSelected,
+      inlinePreloaderStyle,
+      testId = 'inline-card-resolving-view',
+      titleTextColor,
+      resolvingPlaceholder,
+      truncateInline
+    } = this.props;
+    const SpinnerWrapperComponent = fg('bandicoots-compiled-migration-smartcard') ? SpinnerWrapperOldVisualRefresh : SpinnerWrapperOld;
+    if (inlinePreloaderStyle === 'on-right-without-skeleton') {
+      if (fg('bandicoots-compiled-migration-smartcard')) {
+        return /*#__PURE__*/React.createElement(Frame, {
+          withoutBackground: true,
+          testId: testId,
+          onClick: onClick,
+          isSelected: isSelected,
+          truncateInline: truncateInline
+        }, /*#__PURE__*/React.createElement(IconTitleWrapper, null, url, /*#__PURE__*/React.createElement(RightIconPositionWrapper, null, fg('platform-linking-visual-refresh-v1') ? /*#__PURE__*/React.createElement(Spinner, {
+          size: 14
+        }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SpinnerWrapperComponent, {
+          className: "inline-resolving-spinner"
+        }, /*#__PURE__*/React.createElement(Spinner, {
+          size: 14
+        }))))));
+      } else {
+        return /*#__PURE__*/React.createElement(Frame, {
+          withoutBackground: true,
+          testId: testId,
+          onClick: onClick,
+          isSelected: isSelected,
+          truncateInline: truncateInline
+        }, /*#__PURE__*/React.createElement(IconTitleWrapperOld, null, url, /*#__PURE__*/React.createElement(RightIconPositionWrapperOld, null, /*#__PURE__*/React.createElement(SpinnerWrapperComponent, {
+          className: "inline-resolving-spinner"
+        }, /*#__PURE__*/React.createElement(Spinner, {
+          size: 14
+        })))));
+      }
+    } else {
+      return /*#__PURE__*/React.createElement(Frame, {
+        testId: testId,
+        onClick: onClick,
+        isSelected: isSelected,
+        link: url,
+        truncateInline: truncateInline
+      }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
+        title: resolvingPlaceholder !== null && resolvingPlaceholder !== void 0 ? resolvingPlaceholder : url,
+        titleTextColor: titleTextColor
+      }, fg('platform-linking-visual-refresh-v1') ? /*#__PURE__*/React.createElement(Spinner, {
+        size: 14
+      }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SpinnerWrapperComponent, {
+        className: "inline-resolving-spinner"
+      }, /*#__PURE__*/React.createElement(Spinner, {
+        size: 14
+      })))));
+    }
+  }
+}