@atlaskit/smart-card 35.2.8 → 35.2.9

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/smart-card
 
+## 35.2.9
+
+### Patch Changes
+
+- [#124203](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/124203)
+  [`e28e412a54a1e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e28e412a54a1e) -
+  [ux] EDM-11969: Fix SL inline card icon positioning
+- Updated dependencies
+
 ## 35.2.8
 
 ### Patch Changes

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

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

package/dist/cjs/view/InlineCard/ErroredView/index.compiled.css

@@ -1 +1,2 @@
+._1e0cbu77{display:inline flex}
 ._2hwx1i6y{margin-right:var(--ds-space-negative-025,-2px)}

package/dist/cjs/view/InlineCard/ErroredView/index.js

@@ -11,7 +11,8 @@ var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _button = _interopRequireDefault(require("@atlaskit/button"));
-var _error = _interopRequireDefault(require("@atlaskit/icon/utility/migration/error"));
+var _error = _interopRequireDefault(require("@atlaskit/icon/core/migration/error"));
+var _error2 = _interopRequireDefault(require("@atlaskit/icon/utility/migration/error"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _colors = require("@atlaskit/theme/colors");
@@ -25,7 +26,38 @@ var _styled = require("../styled");
 var _withFrameStyleControl = _interopRequireDefault(require("../utils/withFrameStyleControl"));
 var _InlineCardErroredViewOld = require("./InlineCardErroredViewOld");
 var styles = {
-  iconWrapper: "_2hwx1i6y"
+  iconWrapper: "_2hwx1i6y",
+  fallbackIconWrapper: "_2hwx1i6y _1e0cbu77"
+};
+var fallbackIcon = function fallbackIcon() {
+  if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
+    return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      as: "span",
+      xcss: styles.fallbackIconWrapper
+    }, /*#__PURE__*/_react.default.createElement(_error.default, {
+      color: "var(--ds-icon-danger, #C9372C)",
+      label: "error",
+      LEGACY_size: "small",
+      testId: "errored-view-default-icon"
+    }));
+  }
+  if ((0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration')) {
+    return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      as: "span",
+      xcss: styles.iconWrapper
+    }, /*#__PURE__*/_react.default.createElement(_error2.default, {
+      color: "var(--ds-icon-danger, #C9372C)",
+      label: "error",
+      LEGACY_size: "small",
+      testId: "errored-view-default-icon"
+    }));
+  }
+  return /*#__PURE__*/_react.default.createElement(_Icon.AKIconWrapper, null, /*#__PURE__*/_react.default.createElement(_error2.default, {
+    label: "error",
+    LEGACY_size: "small",
+    color: "var(--ds-icon-danger, ".concat(_colors.R300, ")"),
+    testId: "errored-view-default-icon"
+  }));
 };
 var InlineCardErroredViewNew = function InlineCardErroredViewNew(_ref) {
   var url = _ref.url,
@@ -39,6 +71,7 @@ var InlineCardErroredViewNew = function InlineCardErroredViewNew(_ref) {
     truncateInline = _ref.truncateInline,
     showHoverPreview = _ref.showHoverPreview;
   var frameRef = _react.default.useRef(null);
+  var hashAction = !!onRetry;
   var handleRetry = _react.default.useCallback(function (event) {
     if (onRetry) {
       event.preventDefault();
@@ -57,27 +90,26 @@ var InlineCardErroredViewNew = function InlineCardErroredViewNew(_ref) {
       role: "button"
     }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.try_again)));
   }, [handleRetry, onRetry]);
-  var defaultIcon = (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    as: "span",
-    xcss: styles.iconWrapper
-  }, /*#__PURE__*/_react.default.createElement(_error.default, {
-    color: "var(--ds-icon-danger, #C9372C)",
-    label: "error",
-    LEGACY_size: "small",
-    testId: "errored-view-default-icon"
-  })) : /*#__PURE__*/_react.default.createElement(_Icon.AKIconWrapper, null, /*#__PURE__*/_react.default.createElement(_error.default, {
-    label: "error",
-    LEGACY_size: "small",
-    color: "var(--ds-icon-danger, ".concat(_colors.R300, ")"),
-    testId: "errored-view-default-icon"
-  }));
-  var content = /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
+  var content = (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
+    link: hashAction ? undefined : url,
+    onClick: hashAction ? undefined : onClick,
+    isSelected: isSelected,
+    ref: frameRef,
+    testId: testId,
+    truncateInline: truncateInline
+  }, /*#__PURE__*/_react.default.createElement(_IconAndTitleLayout.IconAndTitleLayout, {
+    icon: icon || fallbackIcon(),
+    link: hashAction ? url : undefined,
+    title: url,
+    onClick: hashAction ? onClick : undefined,
+    rightSide: message
+  }), renderActionButton()) : /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
     testId: testId,
     isSelected: isSelected,
     ref: frameRef,
     truncateInline: truncateInline
   }, /*#__PURE__*/_react.default.createElement(_IconAndTitleLayout.IconAndTitleLayout, {
-    icon: icon || defaultIcon,
+    icon: icon || fallbackIcon(),
     link: url,
     title: url,
     onClick: onClick,

package/dist/cjs/view/InlineCard/ForbiddenView/index.compiled.css

@@ -1,4 +1,6 @@
-._19bvze3t{padding-left:var(--ds-space-0,0)}
+
+._2rkogqwt{border-radius:var(--ds-border-radius-050,2px)}._19bvze3t{padding-left:var(--ds-space-0,0)}
+._1e0cbu77{display:inline flex}
 ._2hwx1i6y{margin-right:var(--ds-space-negative-025,-2px)}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._ca0qze3t{padding-top:var(--ds-space-0,0)}

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

@@ -29,8 +29,8 @@ var _styled = require("../styled");
 var _withFrameStyleControl = _interopRequireDefault(require("../utils/withFrameStyleControl"));
 var _InlineCardForbiddenViewOld = require("./InlineCardForbiddenViewOld");
 var styles = {
-  iconWrapper: "_2hwx1i6y",
-  actionButtonLozengeStyle: "_bfhksm61 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t"
+  iconWrapper: "_2hwx1i6y _1e0cbu77",
+  actionButtonLozengeStyle: "_2rkogqwt _bfhksm61 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t"
 };
 var fallbackForbiddenIcon = function fallbackForbiddenIcon() {
   return (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {

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

@@ -1,4 +1,5 @@
-._154ize3t{top:var(--ds-space-0,0)}
+
+._2rkogqwt{border-radius:var(--ds-border-radius-050,2px)}._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)}
@@ -14,6 +15,7 @@
 ._2hwx1b66{margin-right:var(--ds-space-050,4px)}
 ._4cvr1h6o{align-items:center}
 ._94n5ze3t{bottom:var(--ds-space-0,0)}
+._c71l7vkz{max-height:1pc}
 ._ca0qv77o{padding-top:var(--ds-space-025,2px)}
 ._kqswh2mm{position:relative}
 ._kqswstnw{position:absolute}

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

@@ -31,9 +31,10 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var iconWrapperStyleSVG = null;
 var styles = {
   iconEmptyStyle: "_1bsb7vkz _1e0c1o8l _tzy4idpf",
-  iconOuterWrapperStyle: "_2hwx1b66 _1e0c1o8l _kqswh2mm",
+  iconOuterWrapperStyle: "_2hwx1b66 _kqswh2mm",
   iconTitleWrapperStyle: "_o5721jtm _1nmz9jpi _16d9qvcn _ca0qv77o _u5f31b66 _n3tdv77o _19bv1b66",
   iconWrapperStyle: "_kqswstnw _1e0c116y _4cvr1h6o _vchhusvi _154ize3t _1ltvze3t _94n5ze3t _1bsb7vkz _uiztglyw",
+  linkStyle: "_2rkogqwt",
   noLinkAppearanceStyle: "_syaz131l _18u01b66"
 };
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- Ignored via go/DSP-18766
@@ -113,7 +114,7 @@ var IconAndTitleLayoutNew = function IconAndTitleLayoutNew(_ref3) {
           src: icon,
           "data-testid": "".concat(testId, "-image"),
           alt: "",
-          className: (0, _runtime.ax)(["_1bsb1osq"])
+          className: (0, _runtime.ax)(["_c71l7vkz _1bsb1osq"])
         }),
         errored: errored,
         loading: /*#__PURE__*/_react.default.createElement(_Icon.Shimmer, {
@@ -225,7 +226,8 @@ var IconAndTitleLayoutNew = function IconAndTitleLayoutNew(_ref3) {
   }, link ? /*#__PURE__*/_react.default.createElement(LinkAppearance, {
     href: link,
     onClick: handleClick,
-    onKeyPress: handleKeyPress
+    onKeyPress: handleKeyPress,
+    className: (0, _runtime.ax)([styles.linkStyle])
   }, titlePart) : titlePart, rightSide ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     as: "span",
     xcss: styles.noLinkAppearanceStyle

package/dist/cjs/view/InlineCard/UnauthorisedView/index.compiled.css

@@ -1 +1,2 @@
+._1e0cbu77{display:inline flex}
 ._2hwx1i6y{margin-right:var(--ds-space-negative-025,-2px)}

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

@@ -28,18 +28,33 @@ var _styled = require("../styled");
 var _withFrameStyleControl = _interopRequireDefault(require("../utils/withFrameStyleControl"));
 var _InlineCardUnauthorizedViewOld = require("./InlineCardUnauthorizedViewOld");
 var styles = {
-  iconWrapper: "_2hwx1i6y"
+  iconWrapper: "_2hwx1i6y",
+  fallbackIconWrapper: "_2hwx1i6y _1e0cbu77"
 };
 var fallbackUnauthorizedIcon = function fallbackUnauthorizedIcon() {
-  return (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    as: "span",
-    xcss: styles.iconWrapper
-  }, /*#__PURE__*/_react.default.createElement(_lockLocked.default, {
-    color: "var(--ds-icon-danger, #C9372C)",
-    label: "error",
-    LEGACY_fallbackIcon: _lockFilled.default,
-    LEGACY_size: "small"
-  })) : /*#__PURE__*/_react.default.createElement(_Icon.AKIconWrapper, null, /*#__PURE__*/_react.default.createElement(_lockFilled.default, {
+  if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
+    return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      as: "span",
+      xcss: styles.fallbackIconWrapper
+    }, /*#__PURE__*/_react.default.createElement(_lockLocked.default, {
+      color: "var(--ds-icon-danger, #C9372C)",
+      label: "error",
+      LEGACY_fallbackIcon: _lockFilled.default,
+      LEGACY_size: "small"
+    }));
+  }
+  if ((0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration')) {
+    return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      as: "span",
+      xcss: styles.iconWrapper
+    }, /*#__PURE__*/_react.default.createElement(_lockLocked.default, {
+      color: "var(--ds-icon-danger, #C9372C)",
+      label: "error",
+      LEGACY_fallbackIcon: _lockFilled.default,
+      LEGACY_size: "small"
+    }));
+  }
+  return /*#__PURE__*/_react.default.createElement(_Icon.AKIconWrapper, null, /*#__PURE__*/_react.default.createElement(_lockFilled.default, {
     label: "error",
     size: "small",
     primaryColor: "var(--ds-icon-danger, ".concat(_colors.R400, ")")

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

@@ -41,6 +41,7 @@ var ActionButton = exports.ActionButton = /*#__PURE__*/(0, _react.forwardRef)(fu
     },
     xcss: styles.button
   }), /*#__PURE__*/React.createElement("span", {
+    tabIndex: isDisabled ? undefined : 0,
     className: (0, _runtime.ax)([styles.innerContainer, isDisabled ? styles.disabled : styles.enabled])
   }, children));
 });

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

@@ -20,7 +20,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId", "isLink
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "35.2.8",
+  packageVersion: "35.2.9",
   componentName: 'linkUrl'
 };
 var Anchor = (0, _click.withLinkClickedEvent)('a');

package/dist/es2019/utils/analytics/analytics.js

@@ -2,7 +2,7 @@ export const ANALYTICS_CHANNEL = 'media';
 export const context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "35.2.8"
+  packageVersion: "35.2.9"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/es2019/view/InlineCard/ErroredView/index.compiled.css

@@ -1 +1,2 @@
+._1e0cbu77{display:inline flex}
 ._2hwx1i6y{margin-right:var(--ds-space-negative-025,-2px)}

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

@@ -4,6 +4,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import ButtonOld from '@atlaskit/button';
+import ErrorIconCore from '@atlaskit/icon/core/migration/error';
 import ErrorIcon from '@atlaskit/icon/utility/migration/error';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
@@ -18,7 +19,38 @@ import { IconStyledButtonOldVisualRefresh } from '../styled';
 import withFrameStyleControl from '../utils/withFrameStyleControl';
 import { InlineCardErroredViewOld } from './InlineCardErroredViewOld';
 const styles = {
-  iconWrapper: "_2hwx1i6y"
+  iconWrapper: "_2hwx1i6y",
+  fallbackIconWrapper: "_2hwx1i6y _1e0cbu77"
+};
+const fallbackIcon = () => {
+  if (fg('platform-linking-visual-refresh-v1')) {
+    return /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: styles.fallbackIconWrapper
+    }, /*#__PURE__*/React.createElement(ErrorIconCore, {
+      color: "var(--ds-icon-danger, #C9372C)",
+      label: "error",
+      LEGACY_size: "small",
+      testId: "errored-view-default-icon"
+    }));
+  }
+  if (fg('platform-smart-card-icon-migration')) {
+    return /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: styles.iconWrapper
+    }, /*#__PURE__*/React.createElement(ErrorIcon, {
+      color: "var(--ds-icon-danger, #C9372C)",
+      label: "error",
+      LEGACY_size: "small",
+      testId: "errored-view-default-icon"
+    }));
+  }
+  return /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(ErrorIcon, {
+    label: "error",
+    LEGACY_size: "small",
+    color: `var(--ds-icon-danger, ${R300})`,
+    testId: "errored-view-default-icon"
+  }));
 };
 const InlineCardErroredViewNew = ({
   url,
@@ -32,6 +64,7 @@ const InlineCardErroredViewNew = ({
   showHoverPreview
 }) => {
   const frameRef = React.useRef(null);
+  const hashAction = !!onRetry;
   const handleRetry = React.useCallback(event => {
     if (onRetry) {
       event.preventDefault();
@@ -50,27 +83,26 @@ const InlineCardErroredViewNew = ({
       role: "button"
     }, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_again)));
   }, [handleRetry, onRetry]);
-  const defaultIcon = fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(Box, {
-    as: "span",
-    xcss: styles.iconWrapper
-  }, /*#__PURE__*/React.createElement(ErrorIcon, {
-    color: "var(--ds-icon-danger, #C9372C)",
-    label: "error",
-    LEGACY_size: "small",
-    testId: "errored-view-default-icon"
-  })) : /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(ErrorIcon, {
-    label: "error",
-    LEGACY_size: "small",
-    color: `var(--ds-icon-danger, ${R300})`,
-    testId: "errored-view-default-icon"
-  }));
-  const content = /*#__PURE__*/React.createElement(Frame, {
+  const content = fg('platform-linking-visual-refresh-v1') ? /*#__PURE__*/React.createElement(Frame, {
+    link: hashAction ? undefined : url,
+    onClick: hashAction ? undefined : onClick,
+    isSelected: isSelected,
+    ref: frameRef,
+    testId: testId,
+    truncateInline: truncateInline
+  }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
+    icon: icon || fallbackIcon(),
+    link: hashAction ? url : undefined,
+    title: url,
+    onClick: hashAction ? onClick : undefined,
+    rightSide: message
+  }), renderActionButton()) : /*#__PURE__*/React.createElement(Frame, {
     testId: testId,
     isSelected: isSelected,
     ref: frameRef,
     truncateInline: truncateInline
   }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
-    icon: icon || defaultIcon,
+    icon: icon || fallbackIcon(),
     link: url,
     title: url,
     onClick: onClick,

package/dist/es2019/view/InlineCard/ForbiddenView/index.compiled.css

@@ -1,4 +1,6 @@
-._19bvze3t{padding-left:var(--ds-space-0,0)}
+
+._2rkogqwt{border-radius:var(--ds-border-radius-050,2px)}._19bvze3t{padding-left:var(--ds-space-0,0)}
+._1e0cbu77{display:inline flex}
 ._2hwx1i6y{margin-right:var(--ds-space-negative-025,-2px)}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._ca0qze3t{padding-top:var(--ds-space-0,0)}

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

@@ -21,8 +21,8 @@ import { IconStyledButtonOldVisualRefresh } from '../styled';
 import withFrameStyleControl from '../utils/withFrameStyleControl';
 import { InlineCardForbiddenViewOld } from './InlineCardForbiddenViewOld';
 const styles = {
-  iconWrapper: "_2hwx1i6y",
-  actionButtonLozengeStyle: "_bfhksm61 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t"
+  iconWrapper: "_2hwx1i6y _1e0cbu77",
+  actionButtonLozengeStyle: "_2rkogqwt _bfhksm61 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t"
 };
 const fallbackForbiddenIcon = () => {
   return fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(Box, {

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

@@ -1,4 +1,5 @@
-._154ize3t{top:var(--ds-space-0,0)}
+
+._2rkogqwt{border-radius:var(--ds-border-radius-050,2px)}._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)}
@@ -14,6 +15,7 @@
 ._2hwx1b66{margin-right:var(--ds-space-050,4px)}
 ._4cvr1h6o{align-items:center}
 ._94n5ze3t{bottom:var(--ds-space-0,0)}
+._c71l7vkz{max-height:1pc}
 ._ca0qv77o{padding-top:var(--ds-space-025,2px)}
 ._kqswh2mm{position:relative}
 ._kqswstnw{position:absolute}

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

@@ -16,9 +16,10 @@ import { EmojiWrapperOldVisualRefresh, IconEmptyWrapperOldVisualRefresh, IconPos
 const iconWrapperStyleSVG = null;
 const styles = {
   iconEmptyStyle: "_1bsb7vkz _1e0c1o8l _tzy4idpf",
-  iconOuterWrapperStyle: "_2hwx1b66 _1e0c1o8l _kqswh2mm",
+  iconOuterWrapperStyle: "_2hwx1b66 _kqswh2mm",
   iconTitleWrapperStyle: "_o5721jtm _1nmz9jpi _16d9qvcn _ca0qv77o _u5f31b66 _n3tdv77o _19bv1b66",
   iconWrapperStyle: "_kqswstnw _1e0c116y _4cvr1h6o _vchhusvi _154ize3t _1ltvze3t _94n5ze3t _1bsb7vkz _uiztglyw",
+  linkStyle: "_2rkogqwt",
   noLinkAppearanceStyle: "_syaz131l _18u01b66"
 };
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- Ignored via go/DSP-18766
@@ -98,7 +99,7 @@ const IconAndTitleLayoutNew = ({
           src: icon,
           "data-testid": `${testId}-image`,
           alt: "",
-          className: ax(["_1bsb1osq"])
+          className: ax(["_c71l7vkz _1bsb1osq"])
         }),
         errored: errored,
         loading: /*#__PURE__*/React.createElement(Shimmer, {
@@ -210,7 +211,8 @@ const IconAndTitleLayoutNew = ({
   }, link ? /*#__PURE__*/React.createElement(LinkAppearance, {
     href: link,
     onClick: handleClick,
-    onKeyPress: handleKeyPress
+    onKeyPress: handleKeyPress,
+    className: ax([styles.linkStyle])
   }, titlePart) : titlePart, rightSide ? /*#__PURE__*/React.createElement(Box, {
     as: "span",
     xcss: styles.noLinkAppearanceStyle

package/dist/es2019/view/InlineCard/UnauthorisedView/index.compiled.css

@@ -1 +1,2 @@
+._1e0cbu77{display:inline flex}
 ._2hwx1i6y{margin-right:var(--ds-space-negative-025,-2px)}

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

@@ -21,18 +21,33 @@ import { IconStyledButtonOldVisualRefresh } from '../styled';
 import withFrameStyleControl from '../utils/withFrameStyleControl';
 import { InlineCardUnauthorizedViewOld } from './InlineCardUnauthorizedViewOld';
 const styles = {
-  iconWrapper: "_2hwx1i6y"
+  iconWrapper: "_2hwx1i6y",
+  fallbackIconWrapper: "_2hwx1i6y _1e0cbu77"
 };
 const fallbackUnauthorizedIcon = () => {
-  return fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(Box, {
-    as: "span",
-    xcss: styles.iconWrapper
-  }, /*#__PURE__*/React.createElement(LockLockedIcon, {
-    color: "var(--ds-icon-danger, #C9372C)",
-    label: "error",
-    LEGACY_fallbackIcon: LegacyLockIcon,
-    LEGACY_size: "small"
-  })) : /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LegacyLockIcon, {
+  if (fg('platform-linking-visual-refresh-v1')) {
+    return /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: styles.fallbackIconWrapper
+    }, /*#__PURE__*/React.createElement(LockLockedIcon, {
+      color: "var(--ds-icon-danger, #C9372C)",
+      label: "error",
+      LEGACY_fallbackIcon: LegacyLockIcon,
+      LEGACY_size: "small"
+    }));
+  }
+  if (fg('platform-smart-card-icon-migration')) {
+    return /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: styles.iconWrapper
+    }, /*#__PURE__*/React.createElement(LockLockedIcon, {
+      color: "var(--ds-icon-danger, #C9372C)",
+      label: "error",
+      LEGACY_fallbackIcon: LegacyLockIcon,
+      LEGACY_size: "small"
+    }));
+  }
+  return /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LegacyLockIcon, {
     label: "error",
     size: "small",
     primaryColor: `var(--ds-icon-danger, ${R400})`

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

@@ -30,6 +30,7 @@ export const ActionButton = /*#__PURE__*/forwardRef(({
     },
     xcss: styles.button
   }), /*#__PURE__*/React.createElement("span", {
+    tabIndex: isDisabled ? undefined : 0,
     className: ax([styles.innerContainer, isDisabled ? styles.disabled : styles.enabled])
   }, children));
 });

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

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

package/dist/esm/utils/analytics/analytics.js

@@ -4,7 +4,7 @@ export var ANALYTICS_CHANNEL = 'media';
 export var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "35.2.8"
+  packageVersion: "35.2.9"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -1 +1,2 @@
+._1e0cbu77{display:inline flex}
 ._2hwx1i6y{margin-right:var(--ds-space-negative-025,-2px)}

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

@@ -4,6 +4,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import ButtonOld from '@atlaskit/button';
+import ErrorIconCore from '@atlaskit/icon/core/migration/error';
 import ErrorIcon from '@atlaskit/icon/utility/migration/error';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
@@ -18,7 +19,38 @@ import { IconStyledButtonOldVisualRefresh } from '../styled';
 import withFrameStyleControl from '../utils/withFrameStyleControl';
 import { InlineCardErroredViewOld } from './InlineCardErroredViewOld';
 var styles = {
-  iconWrapper: "_2hwx1i6y"
+  iconWrapper: "_2hwx1i6y",
+  fallbackIconWrapper: "_2hwx1i6y _1e0cbu77"
+};
+var fallbackIcon = function fallbackIcon() {
+  if (fg('platform-linking-visual-refresh-v1')) {
+    return /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: styles.fallbackIconWrapper
+    }, /*#__PURE__*/React.createElement(ErrorIconCore, {
+      color: "var(--ds-icon-danger, #C9372C)",
+      label: "error",
+      LEGACY_size: "small",
+      testId: "errored-view-default-icon"
+    }));
+  }
+  if (fg('platform-smart-card-icon-migration')) {
+    return /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: styles.iconWrapper
+    }, /*#__PURE__*/React.createElement(ErrorIcon, {
+      color: "var(--ds-icon-danger, #C9372C)",
+      label: "error",
+      LEGACY_size: "small",
+      testId: "errored-view-default-icon"
+    }));
+  }
+  return /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(ErrorIcon, {
+    label: "error",
+    LEGACY_size: "small",
+    color: "var(--ds-icon-danger, ".concat(R300, ")"),
+    testId: "errored-view-default-icon"
+  }));
 };
 var InlineCardErroredViewNew = function InlineCardErroredViewNew(_ref) {
   var url = _ref.url,
@@ -32,6 +64,7 @@ var InlineCardErroredViewNew = function InlineCardErroredViewNew(_ref) {
     truncateInline = _ref.truncateInline,
     showHoverPreview = _ref.showHoverPreview;
   var frameRef = React.useRef(null);
+  var hashAction = !!onRetry;
   var handleRetry = React.useCallback(function (event) {
     if (onRetry) {
       event.preventDefault();
@@ -50,27 +83,26 @@ var InlineCardErroredViewNew = function InlineCardErroredViewNew(_ref) {
       role: "button"
     }, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_again)));
   }, [handleRetry, onRetry]);
-  var defaultIcon = fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(Box, {
-    as: "span",
-    xcss: styles.iconWrapper
-  }, /*#__PURE__*/React.createElement(ErrorIcon, {
-    color: "var(--ds-icon-danger, #C9372C)",
-    label: "error",
-    LEGACY_size: "small",
-    testId: "errored-view-default-icon"
-  })) : /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(ErrorIcon, {
-    label: "error",
-    LEGACY_size: "small",
-    color: "var(--ds-icon-danger, ".concat(R300, ")"),
-    testId: "errored-view-default-icon"
-  }));
-  var content = /*#__PURE__*/React.createElement(Frame, {
+  var content = fg('platform-linking-visual-refresh-v1') ? /*#__PURE__*/React.createElement(Frame, {
+    link: hashAction ? undefined : url,
+    onClick: hashAction ? undefined : onClick,
+    isSelected: isSelected,
+    ref: frameRef,
+    testId: testId,
+    truncateInline: truncateInline
+  }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
+    icon: icon || fallbackIcon(),
+    link: hashAction ? url : undefined,
+    title: url,
+    onClick: hashAction ? onClick : undefined,
+    rightSide: message
+  }), renderActionButton()) : /*#__PURE__*/React.createElement(Frame, {
     testId: testId,
     isSelected: isSelected,
     ref: frameRef,
     truncateInline: truncateInline
   }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
-    icon: icon || defaultIcon,
+    icon: icon || fallbackIcon(),
     link: url,
     title: url,
     onClick: onClick,

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

@@ -1,4 +1,6 @@
-._19bvze3t{padding-left:var(--ds-space-0,0)}
+
+._2rkogqwt{border-radius:var(--ds-border-radius-050,2px)}._19bvze3t{padding-left:var(--ds-space-0,0)}
+._1e0cbu77{display:inline flex}
 ._2hwx1i6y{margin-right:var(--ds-space-negative-025,-2px)}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._ca0qze3t{padding-top:var(--ds-space-0,0)}

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

@@ -22,8 +22,8 @@ import { IconStyledButtonOldVisualRefresh } from '../styled';
 import withFrameStyleControl from '../utils/withFrameStyleControl';
 import { InlineCardForbiddenViewOld } from './InlineCardForbiddenViewOld';
 var styles = {
-  iconWrapper: "_2hwx1i6y",
-  actionButtonLozengeStyle: "_bfhksm61 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t"
+  iconWrapper: "_2hwx1i6y _1e0cbu77",
+  actionButtonLozengeStyle: "_2rkogqwt _bfhksm61 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t"
 };
 var fallbackForbiddenIcon = function fallbackForbiddenIcon() {
   return fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(Box, {

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

@@ -1,4 +1,5 @@
-._154ize3t{top:var(--ds-space-0,0)}
+
+._2rkogqwt{border-radius:var(--ds-border-radius-050,2px)}._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)}
@@ -14,6 +15,7 @@
 ._2hwx1b66{margin-right:var(--ds-space-050,4px)}
 ._4cvr1h6o{align-items:center}
 ._94n5ze3t{bottom:var(--ds-space-0,0)}
+._c71l7vkz{max-height:1pc}
 ._ca0qv77o{padding-top:var(--ds-space-025,2px)}
 ._kqswh2mm{position:relative}
 ._kqswstnw{position:absolute}

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

@@ -22,9 +22,10 @@ import { EmojiWrapperOldVisualRefresh, IconEmptyWrapperOldVisualRefresh, IconPos
 var iconWrapperStyleSVG = null;
 var styles = {
   iconEmptyStyle: "_1bsb7vkz _1e0c1o8l _tzy4idpf",
-  iconOuterWrapperStyle: "_2hwx1b66 _1e0c1o8l _kqswh2mm",
+  iconOuterWrapperStyle: "_2hwx1b66 _kqswh2mm",
   iconTitleWrapperStyle: "_o5721jtm _1nmz9jpi _16d9qvcn _ca0qv77o _u5f31b66 _n3tdv77o _19bv1b66",
   iconWrapperStyle: "_kqswstnw _1e0c116y _4cvr1h6o _vchhusvi _154ize3t _1ltvze3t _94n5ze3t _1bsb7vkz _uiztglyw",
+  linkStyle: "_2rkogqwt",
   noLinkAppearanceStyle: "_syaz131l _18u01b66"
 };
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- Ignored via go/DSP-18766
@@ -104,7 +105,7 @@ var IconAndTitleLayoutNew = function IconAndTitleLayoutNew(_ref3) {
           src: icon,
           "data-testid": "".concat(testId, "-image"),
           alt: "",
-          className: ax(["_1bsb1osq"])
+          className: ax(["_c71l7vkz _1bsb1osq"])
         }),
         errored: errored,
         loading: /*#__PURE__*/React.createElement(Shimmer, {
@@ -216,7 +217,8 @@ var IconAndTitleLayoutNew = function IconAndTitleLayoutNew(_ref3) {
   }, link ? /*#__PURE__*/React.createElement(LinkAppearance, {
     href: link,
     onClick: handleClick,
-    onKeyPress: handleKeyPress
+    onKeyPress: handleKeyPress,
+    className: ax([styles.linkStyle])
   }, titlePart) : titlePart, rightSide ? /*#__PURE__*/React.createElement(Box, {
     as: "span",
     xcss: styles.noLinkAppearanceStyle

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

@@ -1 +1,2 @@
+._1e0cbu77{display:inline flex}
 ._2hwx1i6y{margin-right:var(--ds-space-negative-025,-2px)}

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

@@ -21,18 +21,33 @@ import { IconStyledButtonOldVisualRefresh } from '../styled';
 import withFrameStyleControl from '../utils/withFrameStyleControl';
 import { InlineCardUnauthorizedViewOld } from './InlineCardUnauthorizedViewOld';
 var styles = {
-  iconWrapper: "_2hwx1i6y"
+  iconWrapper: "_2hwx1i6y",
+  fallbackIconWrapper: "_2hwx1i6y _1e0cbu77"
 };
 var fallbackUnauthorizedIcon = function fallbackUnauthorizedIcon() {
-  return fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(Box, {
-    as: "span",
-    xcss: styles.iconWrapper
-  }, /*#__PURE__*/React.createElement(LockLockedIcon, {
-    color: "var(--ds-icon-danger, #C9372C)",
-    label: "error",
-    LEGACY_fallbackIcon: LegacyLockIcon,
-    LEGACY_size: "small"
-  })) : /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LegacyLockIcon, {
+  if (fg('platform-linking-visual-refresh-v1')) {
+    return /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: styles.fallbackIconWrapper
+    }, /*#__PURE__*/React.createElement(LockLockedIcon, {
+      color: "var(--ds-icon-danger, #C9372C)",
+      label: "error",
+      LEGACY_fallbackIcon: LegacyLockIcon,
+      LEGACY_size: "small"
+    }));
+  }
+  if (fg('platform-smart-card-icon-migration')) {
+    return /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: styles.iconWrapper
+    }, /*#__PURE__*/React.createElement(LockLockedIcon, {
+      color: "var(--ds-icon-danger, #C9372C)",
+      label: "error",
+      LEGACY_fallbackIcon: LegacyLockIcon,
+      LEGACY_size: "small"
+    }));
+  }
+  return /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LegacyLockIcon, {
     label: "error",
     size: "small",
     primaryColor: "var(--ds-icon-danger, ".concat(R400, ")")

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

@@ -31,6 +31,7 @@ export var ActionButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
     },
     xcss: styles.button
   }), /*#__PURE__*/React.createElement("span", {
+    tabIndex: isDisabled ? undefined : 0,
     className: ax([styles.innerContainer, isDisabled ? styles.disabled : styles.enabled])
   }, children));
 });

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: "35.2.8",
+  packageVersion: "35.2.9",
   componentName: 'linkUrl'
 };
 var Anchor = withLinkClickedEvent('a');

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "35.2.8",
+	"version": "35.2.9",
 	"description": "Smart card component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -41,7 +41,7 @@
 		"@atlaskit/heading": "^5.1.0",
 		"@atlaskit/icon": "^25.0.0",
 		"@atlaskit/icon-file-type": "^7.0.0",
-		"@atlaskit/icon-lab": "^4.0.0",
+		"@atlaskit/icon-lab": "^4.1.0",
 		"@atlaskit/icon-object": "^7.0.0",
 		"@atlaskit/icon-priority": "^6.3.0",
 		"@atlaskit/legacy-custom-icons": "^0.22.0",
@@ -65,7 +65,7 @@
 		"@atlaskit/textarea": "^8.0.0",
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tokens": "^4.4.0",
+		"@atlaskit/tokens": "^4.5.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@atlaskit/ufo": "^0.4.0",
 		"@babel/runtime": "^7.0.0",