@atlaskit/smart-card 34.6.5 → 34.6.6

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

@@ -15,16 +15,18 @@ 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 { B400, N200 } from '@atlaskit/theme/colors';
 import { Icon, Shimmer } from '../Icon';
 import { LinkAppearance as LinkAppearanceOld, NoLinkAppearance as NoLinkAppearanceOld } from '../styled-emotion';
-import { EmojiWrapper, IconEmptyWrapper, IconPositionWrapper, IconTitleWrapper, IconWrapper, TitleWrapper, TitleWrapperClassName } from './styled';
+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';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- Ignored via go/DSP-18766
-var NoLinkAppearance = forwardRef(function (_ref, __cmplr) {
+var NoLinkAppearanceOldVisualRefresh = forwardRef(function (_ref, __cmplr) {
   var _ref$as = _ref.as,
     C = _ref$as === void 0 ? "span" : _ref$as,
     __cmpls = _ref.style,
@@ -38,7 +40,7 @@ var NoLinkAppearance = forwardRef(function (_ref, __cmplr) {
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- Ignored via go/DSP-18766
 if (process.env.NODE_ENV !== 'production') {
-  NoLinkAppearance.displayName = 'NoLinkAppearance';
+  NoLinkAppearanceOldVisualRefresh.displayName = 'NoLinkAppearanceOldVisualRefresh';
 }
 var LinkAppearance = forwardRef(function (_ref2, __cmplr) {
   var _ref2$as = _ref2.as,
@@ -91,12 +93,26 @@ export var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
         icon = _this$props.icon,
         emoji = _this$props.emoji;
       if (emoji) {
-        return fg('bandicoots-compiled-migration-smartcard') ? /*#__PURE__*/React.createElement(EmojiWrapper, null, emoji) : /*#__PURE__*/React.createElement(EmojiWrapperOld, null, 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;
       }
-      return fg('bandicoots-compiled-migration-smartcard') ? /*#__PURE__*/React.createElement(IconWrapper, null, icon) : /*#__PURE__*/React.createElement(IconWrapperOld, null, icon);
+      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",
@@ -105,6 +121,21 @@ export var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
       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
@@ -124,10 +155,18 @@ export var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
     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(IconWrapper, null, defaultIcon);
+        return /*#__PURE__*/React.createElement(IconWrapperOldVisualRefresh, null, defaultIcon);
       }
-      return /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement(LinkIcon, {
+      return /*#__PURE__*/React.createElement(IconWrapperOldVisualRefresh, null, /*#__PURE__*/React.createElement(LinkIcon, {
         label: "link",
         LEGACY_size: "small",
         testId: "".concat(testId, "-default"),
@@ -147,6 +186,13 @@ export var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
       }
       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;
     }
   }, {
@@ -161,20 +207,32 @@ export var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
         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 = fg('bandicoots-compiled-migration-smartcard') ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconPositionWrapper, {
+      var 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(IconEmptyWrapper, {
+      }, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconEmptyWrapperOldVisualRefresh, {
         "data-testid": "icon-empty-wrapper"
-      }), this.renderIcon(testId))), /*#__PURE__*/React.createElement(TitleWrapper
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      , {
+      }), this.renderIcon(testId))), fg('platform-linking-visual-refresh-v1') ? /*#__PURE__*/React.createElement(Box, _extends({
+        as: "span",
         style: {
-          color: titleTextColor
+          color: this.props.titleTextColor
         }
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        ,
-        className: TitleWrapperClassName
-      }, title)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconPositionWrapperOld, {
+      }, !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"
@@ -186,23 +244,31 @@ export var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
         }
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         ,
-        className: TitleWrapperClassName
+        className: TitleWrapperClassNameOldVisualRefresh
       }, title));
       if (fg('bandicoots-compiled-migration-smartcard')) {
-        return (
-          /*#__PURE__*/
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-          React.createElement(IconTitleWrapper, {
-            style: {
-              color: titleColor
-            },
-            "data-testid": testId
-          }, link ? /*#__PURE__*/React.createElement(LinkAppearance, {
-            href: link,
-            onClick: this.handleClick,
-            onKeyPress: this.handleKeyPress
-          }, titlePart) : titlePart, rightSide ? /*#__PURE__*/React.createElement(NoLinkAppearance, null, rightSide) : null)
-        );
+        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__*/
@@ -224,4 +290,68 @@ export var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
 }(React.Component);
 _defineProperty(IconAndTitleLayout, "defaultProps", {
   rightSideSpacer: true
+});
+export var IconTitleWrapper = function IconTitleWrapper(props) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: "span",
+    xcss: iconTitleWrapperStyle
+  }, props));
+};
+export var LozengeWrapper = function LozengeWrapper(props) {
+  return /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: lozengeWrapperStyle
+  }, /*#__PURE__*/React.createElement(Box, _extends({
+    xcss: lozengeInternalWrapperStyle
+  }, props)));
+};
+var lozengeInternalWrapperStyle = xcss({
+  paddingBottom: 'space.025'
+});
+var lozengeWrapperStyle = xcss({
+  display: 'inline-block',
+  verticalAlign: 'bottom',
+  marginTop: 'space.0',
+  marginRight: 'space.050',
+  marginBottom: 'space.0',
+  marginLeft: 'space.025'
+});
+var horizontalPadding = 'space.050';
+var verticalPadding = 'space.025';
+var iconWidth = '16px';
+var iconEmptyStyle = xcss({
+  width: iconWidth,
+  display: 'inline-block',
+  opacity: 0
+});
+var iconOuterWrapperStyle = xcss({
+  marginRight: 'space.050',
+  display: 'inline-block',
+  position: 'relative'
+});
+var iconTitleWrapperStyle = xcss({
+  whiteSpace: 'pre-wrap',
+  wordBreak: 'break-all',
+  boxDecorationBreak: 'clone',
+  paddingTop: verticalPadding,
+  paddingRight: horizontalPadding,
+  paddingBottom: verticalPadding,
+  paddingLeft: horizontalPadding
+});
+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;
+var noLinkAppearanceStyle = xcss({
+  color: 'color.text.subtlest',
+  font: 'font.body',
+  marginLeft: 'space.050'
 });

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

@@ -27,8 +27,9 @@ var IconObjectOverrides = "\n  & > span {\n    height: 16px;\n    width: 16px;\n
 // TODO: remove this override behaviour for @atlaskit/icon
 var IconOverrides = "\n  & > * > span {\n    height: 16px;\n    width: 16px;\n    position: absolute;\n    left: 0;\n    & > svg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n";
 
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var IconWrapper = forwardRef(function (_ref, __cmplr) {
+export var IconWrapperOldVisualRefresh = forwardRef(function (_ref, __cmplr) {
   var _ref$as = _ref.as,
     C = _ref$as === void 0 ? "span" : _ref$as,
     __cmpls = _ref.style,
@@ -41,11 +42,12 @@ export var IconWrapper = forwardRef(function (_ref, __cmplr) {
 });
 
 // Wraps all emoji in Inline Links similar to icon
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 if (process.env.NODE_ENV !== 'production') {
-  IconWrapper.displayName = 'IconWrapper';
+  IconWrapperOldVisualRefresh.displayName = 'IconWrapperOldVisualRefresh';
 }
-export var EmojiWrapper = forwardRef(function (_ref2, __cmplr) {
+export var EmojiWrapperOldVisualRefresh = forwardRef(function (_ref2, __cmplr) {
   var _ref2$as = _ref2.as,
     C = _ref2$as === void 0 ? "span" : _ref2$as,
     __cmpls = _ref2.style,
@@ -60,11 +62,12 @@ export var EmojiWrapper = forwardRef(function (_ref2, __cmplr) {
 // The main 'wrapping' element, title of the content.
 // NB: `white-space` adds little whitespace before wrapping.
 // NB: `word-break` line breaks as soon as an overflow takes place.
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 if (process.env.NODE_ENV !== 'production') {
-  EmojiWrapper.displayName = 'EmojiWrapper';
+  EmojiWrapperOldVisualRefresh.displayName = 'EmojiWrapperOldVisualRefresh';
 }
-export var IconTitleWrapper = forwardRef(function (_ref3, __cmplr) {
+export var IconTitleWrapperOldVisualRefresh = forwardRef(function (_ref3, __cmplr) {
   var _ref3$as = _ref3.as,
     C = _ref3$as === void 0 ? "span" : _ref3$as,
     __cmpls = _ref3.style,
@@ -76,12 +79,12 @@ export var IconTitleWrapper = forwardRef(function (_ref3, __cmplr) {
   }));
 });
 
-// TODO: Replace overrides with proper AtlasKit solution.
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 if (process.env.NODE_ENV !== 'production') {
-  IconTitleWrapper.displayName = 'IconTitleWrapper';
+  IconTitleWrapperOldVisualRefresh.displayName = 'IconTitleWrapperOldVisualRefresh';
 }
-export var LozengeWrapper = forwardRef(function (_ref4, __cmplr) {
+export var LozengeWrapperOldVisualRefresh = forwardRef(function (_ref4, __cmplr) {
   var _ref4$as = _ref4.as,
     C = _ref4$as === void 0 ? "span" : _ref4$as,
     __cmpls = _ref4.style,
@@ -95,7 +98,7 @@ export var LozengeWrapper = forwardRef(function (_ref4, __cmplr) {
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 if (process.env.NODE_ENV !== 'production') {
-  LozengeWrapper.displayName = 'LozengeWrapper';
+  LozengeWrapperOldVisualRefresh.displayName = 'LozengeWrapperOldVisualRefresh';
 }
 export var RightIconPositionWrapper = forwardRef(function (_ref5, __cmplr) {
   var _ref5$as = _ref5.as,
@@ -112,11 +115,12 @@ export var RightIconPositionWrapper = forwardRef(function (_ref5, __cmplr) {
 // The following components are used to absolutely position icons in the vertical center.
 // - IconPositionWrapper: the `relative` parent which has no height in itself.
 // - IconEmptyWrapper: the child which forces `IconPositionWrapper` to have a height.
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 if (process.env.NODE_ENV !== 'production') {
   RightIconPositionWrapper.displayName = 'RightIconPositionWrapper';
 }
-export var IconPositionWrapper = forwardRef(function (_ref6, __cmplr) {
+export var IconPositionWrapperOldVisualRefresh = forwardRef(function (_ref6, __cmplr) {
   var _ref6$as = _ref6.as,
     C = _ref6$as === void 0 ? "span" : _ref6$as,
     __cmpls = _ref6.style,
@@ -128,11 +132,12 @@ export var IconPositionWrapper = forwardRef(function (_ref6, __cmplr) {
   }));
 });
 
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 if (process.env.NODE_ENV !== 'production') {
-  IconPositionWrapper.displayName = 'IconPositionWrapper';
+  IconPositionWrapperOldVisualRefresh.displayName = 'IconPositionWrapperOldVisualRefresh';
 }
-export var IconEmptyWrapper = forwardRef(function (_ref7, __cmplr) {
+export var IconEmptyWrapperOldVisualRefresh = forwardRef(function (_ref7, __cmplr) {
   var _ref7$as = _ref7.as,
     C = _ref7$as === void 0 ? "span" : _ref7$as,
     __cmpls = _ref7.style,
@@ -145,14 +150,16 @@ export var IconEmptyWrapper = forwardRef(function (_ref7, __cmplr) {
 });
 
 // With emotion it's not possible to use reference to `TitleWrapper` as part of a selector,
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // To achieve same result we use classname instead.
 if (process.env.NODE_ENV !== 'production') {
-  IconEmptyWrapper.displayName = 'IconEmptyWrapper';
+  IconEmptyWrapperOldVisualRefresh.displayName = 'IconEmptyWrapperOldVisualRefresh';
 }
-export var TitleWrapperClassName = 'smart-link-title-wrapper';
+export var TitleWrapperClassNameOldVisualRefresh = 'smart-link-title-wrapper';
 
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // 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 var TitleWrapper = forwardRef(function (_ref8, __cmplr) {
+export var TitleWrapperOldVisualRefresh = forwardRef(function (_ref8, __cmplr) {
   var _ref8$as = _ref8.as,
     C = _ref8$as === void 0 ? "span" : _ref8$as,
     __cmpls = _ref8.style,
@@ -164,5 +171,5 @@ export var TitleWrapper = forwardRef(function (_ref8, __cmplr) {
   }));
 });
 if (process.env.NODE_ENV !== 'production') {
-  TitleWrapper.displayName = 'TitleWrapper';
+  TitleWrapperOldVisualRefresh.displayName = 'TitleWrapperOldVisualRefresh';
 }

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

@@ -7,10 +7,11 @@ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstruct
 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 Lozenge from '@atlaskit/lozenge';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { HoverCard } from '../../HoverCard';
 import { Frame } from '../Frame';
-import { IconAndTitleLayout } from '../IconAndTitleLayout';
-import { LozengeWrapper } from '../IconAndTitleLayout/styled';
+import { IconAndTitleLayout, LozengeWrapper as LozengeWrapperNew } from '../IconAndTitleLayout';
+import { LozengeWrapperOldVisualRefresh } from '../IconAndTitleLayout/styled';
 export var InlineCardResolvedView = /*#__PURE__*/function (_React$Component) {
   function InlineCardResolvedView() {
     _classCallCheck(this, InlineCardResolvedView);
@@ -25,6 +26,7 @@ export var InlineCardResolvedView = /*#__PURE__*/function (_React$Component) {
         return null;
       }
       var appearance = lozenge.appearance || 'default';
+      var 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/esm/view/InlineCard/ResolvingView/index.js

@@ -9,10 +9,10 @@ import React from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Spinner from '@atlaskit/spinner';
 import { Frame } from '../Frame';
-import { IconAndTitleLayout } from '../IconAndTitleLayout';
-import { IconTitleWrapper, RightIconPositionWrapper } from '../IconAndTitleLayout/styled';
+import { IconAndTitleLayout, IconTitleWrapper } from '../IconAndTitleLayout';
+import { IconTitleWrapperOldVisualRefresh, RightIconPositionWrapper } from '../IconAndTitleLayout/styled';
 import { IconTitleWrapper as IconTitleWrapperOld, RightIconPositionWrapper as RightIconPositionWrapperOld } from '../IconAndTitleLayout/styled-emotion';
-import { SpinnerWrapper } from './styled';
+import { SpinnerWrapperOldVisualRefresh } from './styled';
 import { SpinnerWrapper as SpinnerWrapperOld } from './styled-emotion';
 export var InlineCardResolvingView = /*#__PURE__*/function (_React$Component) {
   function InlineCardResolvingView() {
@@ -33,7 +33,8 @@ export var InlineCardResolvingView = /*#__PURE__*/function (_React$Component) {
         titleTextColor = _this$props.titleTextColor,
         resolvingPlaceholder = _this$props.resolvingPlaceholder,
         truncateInline = _this$props.truncateInline;
-      var SpinnerWrapperComponent = fg('bandicoots-compiled-migration-smartcard') ? SpinnerWrapper : SpinnerWrapperOld;
+      var SpinnerWrapperComponent = fg('bandicoots-compiled-migration-smartcard') ? SpinnerWrapperOldVisualRefresh : SpinnerWrapperOld;
+      var IconTitleWrapperFFed = fg('platform-linking-visual-refresh-v1') ? IconTitleWrapper : IconTitleWrapperOldVisualRefresh;
       if (inlinePreloaderStyle === 'on-right-without-skeleton') {
         if (fg('bandicoots-compiled-migration-smartcard')) {
           return /*#__PURE__*/React.createElement(Frame, {
@@ -42,11 +43,13 @@ export var InlineCardResolvingView = /*#__PURE__*/function (_React$Component) {
             onClick: onClick,
             isSelected: isSelected,
             truncateInline: truncateInline
-          }, /*#__PURE__*/React.createElement(IconTitleWrapper, null, url, /*#__PURE__*/React.createElement(RightIconPositionWrapper, null, /*#__PURE__*/React.createElement(SpinnerWrapperComponent, {
+          }, /*#__PURE__*/React.createElement(IconTitleWrapperFFed, 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,
@@ -70,11 +73,13 @@ export var InlineCardResolvingView = /*#__PURE__*/function (_React$Component) {
         }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
           title: resolvingPlaceholder !== null && resolvingPlaceholder !== void 0 ? resolvingPlaceholder : url,
           titleTextColor: titleTextColor
-        }, /*#__PURE__*/React.createElement(SpinnerWrapperComponent, {
+        }, 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
-        }))));
+        })))));
       }
     }
   }]);

package/dist/esm/view/InlineCard/ResolvingView/styled.js

@@ -6,12 +6,13 @@ import "./styled.compiled.css";
 import { forwardRef } from 'react';
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { IconTitleWrapper } from '../IconAndTitleLayout/styled';
+import { IconTitleWrapperOldVisualRefresh } from '../IconAndTitleLayout/styled';
 
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var SpinnerWrapper = forwardRef(function (_ref, __cmplr) {
+export var SpinnerWrapperOldVisualRefresh = forwardRef(function (_ref, __cmplr) {
   var _ref$as = _ref.as,
-    C = _ref$as === void 0 ? IconTitleWrapper : _ref$as,
+    C = _ref$as === void 0 ? IconTitleWrapperOldVisualRefresh : _ref$as,
     __cmpls = _ref.style,
     __cmplp = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
@@ -21,5 +22,5 @@ export var SpinnerWrapper = forwardRef(function (_ref, __cmplr) {
   }));
 });
 if (process.env.NODE_ENV !== 'production') {
-  SpinnerWrapper.displayName = 'SpinnerWrapper';
+  SpinnerWrapperOldVisualRefresh.displayName = 'SpinnerWrapperOldVisualRefresh';
 }

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import Button from '@atlaskit/button';
+import ButtonOld from '@atlaskit/button';
 import LockLockedIcon from '@atlaskit/icon/core/lock-locked';
 import LegacyLockIcon from '@atlaskit/icon/glyph/lock-filled';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -10,11 +10,12 @@ import { N500, R400 } from '@atlaskit/theme/colors';
 import { useAnalyticsEvents } from '../../../common/analytics/generated/use-analytics-events';
 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 } from '../IconAndTitleLayout';
-import { IconStyledButton } from '../styled';
+import { IconStyledButtonOldVisualRefresh } from '../styled';
 import { IconStyledButton as IconStyledButtonOld } from '../styled-emotion';
 import withFrameStyleControl from '../utils/withFrameStyleControl';
 var iconWrapperStyles = xcss({
@@ -76,11 +77,22 @@ export var InlineCardUnauthorizedView = function InlineCardUnauthorizedView(_ref
     }
   }, [fireEvent, onAuthorise]);
   var renderActionButton = React.useCallback(function () {
-    var ActionButton = withFrameStyleControl(Button, frameRef);
+    var Button = withFrameStyleControl(ButtonOld, frameRef);
     if (fg('bandicoots-compiled-migration-smartcard')) {
-      return onAuthorise ? /*#__PURE__*/React.createElement(ActionButton, {
+      if (fg('platform-linking-visual-refresh-v1')) {
+        return /*#__PURE__*/React.createElement(Button, {
+          component: ActionButton,
+          onClick: handleConnectAccount,
+          testId: "button-connect-account"
+        }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_link_account_card_name, {
+          values: {
+            context: context
+          }
+        })));
+      }
+      return onAuthorise ? /*#__PURE__*/React.createElement(Button, {
         spacing: "none",
-        component: IconStyledButton,
+        component: IconStyledButtonOldVisualRefresh,
         onClick: handleConnectAccount,
         testId: "button-connect-account"
       }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_link_account_card_name, {
@@ -89,7 +101,7 @@ export var InlineCardUnauthorizedView = function InlineCardUnauthorizedView(_ref
         }
       }))) : undefined;
     } else {
-      return onAuthorise ? /*#__PURE__*/React.createElement(ActionButton, {
+      return onAuthorise ? /*#__PURE__*/React.createElement(Button, {
         spacing: "none",
         component: IconStyledButtonOld,
         onClick: handleConnectAccount,

package/dist/esm/view/InlineCard/common/action-button/index.js

@@ -0,0 +1,51 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children"];
+import React, { forwardRef } from 'react';
+import { Box, xcss } from '@atlaskit/primitives';
+/**
+ * Action button has to be a span for the overflow to work correctly
+ */
+export var ActionButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: "span",
+    ref: ref,
+    xcss: [actionButtonStyle, !props.disabled && actionButtonNotDisabledStyle]
+  }, props, {
+    "aria-disabled": props.disabled,
+    role: "button"
+  }), /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: internalButtonStyle
+  }, children));
+});
+var actionButtonStyle = xcss({
+  textAlign: 'initial',
+  display: 'inline',
+  borderRadius: 'border.radius.100',
+  borderTopLeftRadius: '0px',
+  borderBottomLeftRadius: '0px',
+  backgroundClip: 'padding-box',
+  boxDecorationBreak: 'clone',
+  font: 'font.body.large',
+  paddingTop: 'space.025',
+  paddingLeft: 'space.075',
+  paddingBottom: 'space.025',
+  paddingRight: 'space.075',
+  whiteSpace: 'nowrap',
+  backgroundColor: 'color.background.neutral',
+  cursor: 'not-allowed',
+  color: 'color.text.disabled'
+});
+var internalButtonStyle = xcss({
+  font: 'font.body'
+});
+var actionButtonNotDisabledStyle = xcss({
+  color: 'color.text',
+  cursor: 'pointer',
+  ':hover': {
+    backgroundColor: 'color.background.neutral.hovered'
+  }
+});

package/dist/esm/view/InlineCard/styled.js

@@ -8,8 +8,9 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 // By default buttons will hide overflow and ellipsis content instead of wrapping.
 // This basically turns the button back into inline content
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var IconStyledButton = forwardRef(function (_ref, __cmplr) {
+export var IconStyledButtonOldVisualRefresh = forwardRef(function (_ref, __cmplr) {
   var _ref$as = _ref.as,
     C = _ref$as === void 0 ? "span" : _ref$as,
     __cmpls = _ref.style,
@@ -21,5 +22,5 @@ export var IconStyledButton = forwardRef(function (_ref, __cmplr) {
   }));
 });
 if (process.env.NODE_ENV !== 'production') {
-  IconStyledButton.displayName = 'IconStyledButton';
+  IconStyledButtonOldVisualRefresh.displayName = 'IconStyledButtonOldVisualRefresh';
 }

package/dist/esm/view/LinkUrl/index.js

@@ -13,7 +13,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "34.6.5",
+  packageVersion: "34.6.6",
   componentName: 'linkUrl'
 };
 var Anchor = withLinkClickedEvent('a');