@atlaskit/smart-card 34.10.2 → 34.10.4

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/smart-card
 
+## 34.10.4
+
+### Patch Changes
+
+- [#110251](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110251)
+  [`b6adb9244b072`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b6adb9244b072) -
+  [ux] Visual refresh of the EmbedCard component
+
+## 34.10.3
+
+### Patch Changes
+
+- [#110748](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110748)
+  [`a3f7f14d75b3c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a3f7f14d75b3c) -
+  [ux] Update inline card icons
+- Updated dependencies
+
 ## 34.10.2
 
 ### Patch Changes

package/dist/cjs/extractors/common/icon/extractIconFromDocument.js

@@ -12,10 +12,64 @@ var _3 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/presenta
 var _4 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/spreadsheet/16"));
 var _pageLiveDoc = _interopRequireDefault(require("@atlaskit/icon-lab/core/page-live-doc"));
 var _5 = _interopRequireDefault(require("@atlaskit/icon-object/glyph/blog/16"));
+var _fileDocumentFilled = _interopRequireDefault(require("@atlaskit/icon/core/migration/file--document-filled"));
 var _pageDocumentFilled = _interopRequireDefault(require("@atlaskit/icon/core/migration/page--document-filled"));
 var _linkExtractors = require("@atlaskit/link-extractors");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _blogIcon = _interopRequireDefault(require("../../../common/ui/icons/blog-icon"));
+var _chartBarIcon = _interopRequireDefault(require("../../../common/ui/icons/chart-bar-icon"));
+var _fileIcon = _interopRequireDefault(require("../../../common/ui/icons/file-icon"));
+var _listBulletIcon = _interopRequireDefault(require("../../../common/ui/icons/list-bullet-icon"));
+var _pageIcon = _interopRequireDefault(require("../../../common/ui/icons/page-icon"));
 var _utils = require("../../../utils");
 var _prioritiseIcon = require("./prioritiseIcon");
+// TODO Delete this and rename BlogIconNew to BlogIcon when cleaning platform-smart-card-icon-migration
+var BlogIcon = function BlogIcon(props) {
+  if ((0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration')) {
+    return /*#__PURE__*/_react.default.createElement(_blogIcon.default, props);
+  }
+  return /*#__PURE__*/_react.default.createElement(_5.default, props);
+};
+
+// TODO Delete this and rename FileIconNew to FileIcon when cleaning platform-smart-card-icon-migration
+var FileIcon = function FileIcon(props) {
+  if ((0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration')) {
+    return /*#__PURE__*/_react.default.createElement(_fileIcon.default, props);
+  }
+  return /*#__PURE__*/_react.default.createElement(_2.default, props);
+};
+
+// TODO Delete this and rename DocumentIconNew to DocumentIcon when cleaning platform-smart-card-icon-migration
+var DocumentIcon = function DocumentIcon(props) {
+  if ((0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration')) {
+    return /*#__PURE__*/_react.default.createElement(_pageIcon.default, props);
+  }
+  return /*#__PURE__*/_react.default.createElement(_.default, props);
+};
+
+// TODO Delete this and rename PresentationIconNew to PresentationIcon when cleaning platform-smart-card-icon-migration
+var PresentationIcon = function PresentationIcon(props) {
+  if ((0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration')) {
+    return /*#__PURE__*/_react.default.createElement(_chartBarIcon.default, props);
+  }
+  return /*#__PURE__*/_react.default.createElement(_3.default, props);
+};
+
+// TODO Delete this and rename SpreadsheetIconNew to SpreadsheetIcon when cleaning platform-smart-card-icon-migration
+var SpreadsheetIcon = function SpreadsheetIcon(props) {
+  if ((0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration')) {
+    return /*#__PURE__*/_react.default.createElement(_listBulletIcon.default, props);
+  }
+  return /*#__PURE__*/_react.default.createElement(_4.default, props);
+};
+
+// TODO Delete this and rename DocumentFilledIconNew to DocumentFilledIcon when cleaning platform-smart-card-icon-migration
+var DocumentFilledIcon = function DocumentFilledIcon(props) {
+  if ((0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration')) {
+    return /*#__PURE__*/_react.default.createElement(_fileDocumentFilled.default, props);
+  }
+  return /*#__PURE__*/_react.default.createElement(_pageDocumentFilled.default, props);
+};
 /**
  * Extracts an icon for a document pbject
  *
@@ -42,35 +96,35 @@ var documentFileFormatToIcon = function documentFileFormatToIcon(opts) {
 var documentTypeToIcon = function documentTypeToIcon(type, opts) {
   switch (type) {
     case 'schema:BlogPosting':
-      return /*#__PURE__*/_react.default.createElement(_5.default, {
+      return /*#__PURE__*/_react.default.createElement(BlogIcon, {
         label: opts.title || 'blog',
         testId: "blog-icon"
       });
     case 'schema:DigitalDocument':
       return digitalDocumentToIcon(opts);
     case 'schema:TextDigitalDocument':
-      return /*#__PURE__*/_react.default.createElement(_.default, {
+      return /*#__PURE__*/_react.default.createElement(DocumentIcon, {
         label: opts.title || 'document',
         testId: "document-icon"
       });
     case 'schema:PresentationDigitalDocument':
-      return /*#__PURE__*/_react.default.createElement(_3.default, {
+      return /*#__PURE__*/_react.default.createElement(PresentationIcon, {
         label: opts.title || 'presentation',
         testId: "presentation-icon"
       });
     case 'schema:SpreadsheetDigitalDocument':
-      return /*#__PURE__*/_react.default.createElement(_4.default, {
+      return /*#__PURE__*/_react.default.createElement(SpreadsheetIcon, {
         label: opts.title || 'spreadsheet',
         testId: "spreadsheet-icon"
       });
     case 'atlassian:Template':
-      return /*#__PURE__*/_react.default.createElement(_pageDocumentFilled.default, {
+      return /*#__PURE__*/_react.default.createElement(DocumentFilledIcon, {
         color: "currentColor",
         label: opts.title || 'template',
         testId: "document-filled-icon"
       });
     case 'atlassian:UndefinedLink':
-      return /*#__PURE__*/_react.default.createElement(_.default, {
+      return /*#__PURE__*/_react.default.createElement(DocumentIcon, {
         label: opts.title || 'undefinedLink',
         testId: "document-icon"
       });
@@ -93,7 +147,7 @@ var digitalDocumentToIcon = function digitalDocumentToIcon(opts) {
       testId: "live-doc-icon"
     });
   } else {
-    return /*#__PURE__*/_react.default.createElement(_2.default, {
+    return /*#__PURE__*/_react.default.createElement(FileIcon, {
       label: opts.title || 'file',
       testId: "file-icon"
     });

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: "34.10.2"
+  packageVersion: "34.10.4"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/cjs/view/EmbedCard/components/ExpandedFrame.compiled.css

@@ -0,0 +1,50 @@
+._11c81il0{font:var(--ds-font-heading-xsmall,normal 600 14px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._14mj1crf:after{border-radius:9pt}
+._19it1pvm{border:solid 1px var(--ds-border,#091e4224)}
+._1tqzzgxb:after{outline:1px solid var(--ds-border,#091e4224)}
+._2rko1y44{border-radius:4px}
+._hcgvzgxb:hover:after{outline:1px solid var(--ds-border,#091e4224)}
+._qc5o94zs:after{transition:background .3s,box-shadow .3s}
+._v56414au{transition:outline .3s}
+._zulp1b66{gap:var(--ds-space-050,4px)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}
+._15l2idpf:after{top:0}
+._16jlkb7n{flex-grow:1}
+._18m915vq{overflow-y:hidden}
+._18m91wug{overflow-y:auto}
+._18postnw:after{position:absolute}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._19doidpf:after{left:0}
+._1bqqidpf:after{z-index:0}
+._1bsb7vkz{width:1pc}
+._1e0c1txw{display:flex}
+._1hfk18uv:after{background-color:initial}
+._1hfkhp5a:after{background-color:var(--ds-surface-raised,#fff)}
+._1ifiidpf .embed-header{opacity:0}
+._1ifikb7n .embed-header{opacity:1}
+._1pbykb7n{z-index:1}
+._1reo15vq{overflow-x:hidden}
+._1reo1wug{overflow-x:auto}
+._1x88idpf:after{bottom:0}
+._2lx21bp4{flex-direction:column}
+._32rxidpf:after{right:0}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
+._4t3i7vkz{height:1pc}
+._4t3igktf{height:20px}
+._4t3ik5xz{height:27pc}
+._4tpuhp5a:hover:after{background-color:var(--ds-surface-raised,#fff)}
+._8x3u92p9:after{box-shadow:0 0 0 3px var(--ds-border-selected,#0c66e4)}
+._aetrb3bt:after{content:""}
+._bfhkhp5a{background-color:var(--ds-surface-raised,#fff)}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._kqswh2mm{position:relative}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
+._u94kidpf:after{flex-grow:0}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
+._x148kb7n:hover .embed-header{opacity:1}
+._1bnxglyw:hover{text-decoration-line:none}
+._9oik18uv:hover{text-decoration-color:initial}
+._jf4cnqa1:hover{text-decoration-style:solid}
+._1jhm1ips:active{outline:8px solid var(--ds-background-selected,#e9f2ff)}

package/dist/cjs/view/EmbedCard/components/ExpandedFrame.js

@@ -7,8 +7,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ExpandedFrame = void 0;
+require("./ExpandedFrame.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _useLinkClicked = require("../../../state/analytics/useLinkClicked");
@@ -45,18 +47,35 @@ var ExpandedFrameNew = function ExpandedFrameNew(_ref) {
   };
   var handleMouseDown = (0, _useLinkClicked.useMouseDownEvent)();
   var renderHeader = function renderHeader() {
+    if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
+      return frameStyle !== 'hide' && /*#__PURE__*/React.createElement("div", {
+        className: (0, _runtime.ax)([styles.header, "embed-header"])
+      }, /*#__PURE__*/React.createElement("div", {
+        className: (0, _runtime.ax)([styles.headerIcon])
+      }, icon), /*#__PURE__*/React.createElement("div", {
+        className: (0, _runtime.ax)([styles.tooltipWrapper])
+      }, !isPlaceholder && /*#__PURE__*/React.createElement(_tooltip.default, {
+        content: text,
+        hideTooltipOnMouseDown: true
+      }, /*#__PURE__*/React.createElement("a", {
+        href: href,
+        onClick: handleClick,
+        onMouseDown: handleMouseDown,
+        className: (0, _runtime.ax)([styles.headerAnchor])
+      }, text))));
+    }
     return (
       /*#__PURE__*/
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      React.createElement(_styled.Header, {
+      React.createElement(_styled.HeaderOldVisualRefresh, {
         className: "embed-header",
         frameStyle: frameStyle
-      }, /*#__PURE__*/React.createElement(_styled.IconWrapper, {
+      }, /*#__PURE__*/React.createElement(_styled.IconWrapperOldVisualRefresh, {
         isPlaceholder: isPlaceholder
-      }, !isPlaceholder && icon), /*#__PURE__*/React.createElement(_styled.TooltipWrapper, null, /*#__PURE__*/React.createElement(_tooltip.default, {
+      }, !isPlaceholder && icon), /*#__PURE__*/React.createElement(_styled.TooltipWrapperOldVisualRefresh, null, /*#__PURE__*/React.createElement(_tooltip.default, {
         content: text,
         hideTooltipOnMouseDown: true
-      }, /*#__PURE__*/React.createElement(_styled.TextWrapper, {
+      }, /*#__PURE__*/React.createElement(_styled.TextWrapperOldVisualRefresh, {
         isPlaceholder: isPlaceholder
       }, !isPlaceholder && /*#__PURE__*/React.createElement("a", {
         href: href,
@@ -65,8 +84,20 @@ var ExpandedFrameNew = function ExpandedFrameNew(_ref) {
       }, text)))))
     );
   };
+  var interactive = isInteractive();
+  var showBackgroundAlways = frameStyle === 'show' || isSelected && frameStyle !== 'hide';
+  var showBackgroundOnHover = interactive && frameStyle !== 'hide';
   var renderContent = function renderContent() {
-    return /*#__PURE__*/React.createElement(_styled.Content, {
+    if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
+      return /*#__PURE__*/React.createElement("div", {
+        "data-testid": "embed-content-wrapper",
+        // This fixes an issue with input fields in cross domain iframes (ie. databases and jira fields from different domains)
+        // See: HOT-107830
+        contentEditable: false,
+        className: (0, _runtime.ax)([styles.contentStyle, setOverflow && allowScrollBar && styles.contentOverflowAuto, interactive && !showBackgroundAlways && !showBackgroundOnHover && styles.contentInteractiveActiveBorder])
+      }, children);
+    }
+    return /*#__PURE__*/React.createElement(_styled.ContentOldVisualRefresh, {
       "data-testid": "embed-content-wrapper",
       allowScrollBar: allowScrollBar,
       removeOverflow: !setOverflow,
@@ -79,8 +110,26 @@ var ExpandedFrameNew = function ExpandedFrameNew(_ref) {
       suppressContentEditableWarning: true
     }, children);
   };
+  if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
+    return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: (0, _runtime.ax)([styles.linkWrapper, inheritDimensions && styles.linkWrapperInheritDimensions, isSelected && frameStyle !== 'hide' && styles.linkWrapperSelected, showBackgroundAlways && styles.linkWrapperBorderAndBackground, showBackgroundOnHover && !showBackgroundAlways && styles.linkWrapperInteractiveNotHidden, _styled.className]),
+      style: {
+        minWidth: minWidth ? "".concat(minWidth, "px") : '',
+        maxWidth: maxWidth ? "".concat(maxWidth, "px") : ''
+      },
+      "data-testid": testId,
+      "data-trello-do-not-use-override": testId
+      // Due to limitations of testing library, we can't assert ::after
+      ,
+      "data-is-selected": isSelected
+    }, (isPlaceholder || !href) && {
+      'data-wrapper-type': 'default',
+      'data-is-interactive': isInteractive()
+    }), renderHeader(), renderContent());
+  }
   if (!isPlaceholder && href) {
-    return /*#__PURE__*/React.createElement(_styled.LinkWrapper
+    return /*#__PURE__*/React.createElement(_styled.LinkWrapperOldVisualRefresh
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     , {
       className: _styled.className,
@@ -97,7 +146,7 @@ var ExpandedFrameNew = function ExpandedFrameNew(_ref) {
       inheritDimensions: inheritDimensions
     }, renderHeader(), renderContent());
   } else {
-    return /*#__PURE__*/React.createElement(_styled.Wrapper
+    return /*#__PURE__*/React.createElement(_styled.WrapperOldVisualRefresh
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     , {
       className: _styled.className,
@@ -120,4 +169,18 @@ var ExpandedFrame = exports.ExpandedFrame = function ExpandedFrame(props) {
   } else {
     return /*#__PURE__*/React.createElement(_ExpandedFrameOld.ExpandedFrameOld, props);
   }
+};
+var styles = {
+  linkWrapper: "_zulpu2gc _kqswh2mm _1e0c1txw _2lx21bp4 _4t3ik5xz _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc _uiztglyw _qc5o94zs _14mj1crf _aetrb3bt _18postnw _15l2idpf _32rxidpf _1x88idpf _19doidpf _1hfk18uv _1bqqidpf _u94kidpf _1ifiidpf",
+  linkWrapperInheritDimensions: "_4t3i1osq",
+  linkWrapperSelected: "_8x3u92p9",
+  linkWrapperBorderAndBackground: "_1tqzzgxb _1hfkhp5a _1ifikb7n",
+  linkWrapperInteractiveNotHidden: "_hcgvzgxb _4tpuhp5a _x148kb7n",
+  header: "_zulp1b66 _1e0c1txw _4cvr1h6o _4t3igktf _1pbykb7n",
+  tooltipWrapper: "_1reo15vq _18m915vq",
+  headerAnchor: "_11c81il0 _9oik18uv _1bnxglyw _jf4cnqa1",
+  headerIcon: "_1bsb7vkz _4t3i7vkz",
+  contentStyle: "_19it1pvm _2rko1y44 _1reo15vq _18m915vq _v56414au _bfhkhp5a _16jlkb7n _4t3i1osq _1pbykb7n",
+  contentInteractiveActiveBorder: "_1jhm1ips",
+  contentOverflowAuto: "_1reo1wug _18m91wug"
 };

package/dist/cjs/view/EmbedCard/components/styled.js

@@ -6,7 +6,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.embedHeaderHeight = exports.className = exports.Wrapper = exports.TooltipWrapper = exports.Thumbnail = exports.TextWrapper = exports.LinkWrapper = exports.Image = exports.IconWrapper = exports.Header = exports.Content = void 0;
+exports.embedHeaderHeight = exports.className = exports.WrapperOldVisualRefresh = exports.TooltipWrapperOldVisualRefresh = exports.Thumbnail = exports.TextWrapperOldVisualRefresh = exports.LinkWrapperOldVisualRefresh = exports.Image = exports.IconWrapperOldVisualRefresh = exports.HeaderOldVisualRefresh = exports.ContentOldVisualRefresh = void 0;
 require("./styled.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
@@ -37,8 +37,9 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var className = exports.className = 'media-card-frame';
 var embedHeaderHeight = exports.embedHeaderHeight = 32;
+// 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
-var LinkWrapper = exports.LinkWrapper = (0, _react.forwardRef)(function (_ref, __cmplr) {
+var LinkWrapperOldVisualRefresh = exports.LinkWrapperOldVisualRefresh = (0, _react.forwardRef)(function (_ref, __cmplr) {
   var _ref$as = _ref.as,
     C = _ref$as === void 0 ? "div" : _ref$as,
     __cmpls = _ref.style,
@@ -60,11 +61,12 @@ var LinkWrapper = exports.LinkWrapper = (0, _react.forwardRef)(function (_ref, _
   }));
 });
 
+// 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
 if (process.env.NODE_ENV !== 'production') {
-  LinkWrapper.displayName = 'LinkWrapper';
+  LinkWrapperOldVisualRefresh.displayName = 'LinkWrapperOldVisualRefresh';
 }
-var Wrapper = exports.Wrapper = (0, _react.forwardRef)(function (_ref2, __cmplr) {
+var WrapperOldVisualRefresh = exports.WrapperOldVisualRefresh = (0, _react.forwardRef)(function (_ref2, __cmplr) {
   var _ref2$as = _ref2.as,
     C = _ref2$as === void 0 ? "div" : _ref2$as,
     __cmpls = _ref2.style,
@@ -86,11 +88,12 @@ var Wrapper = exports.Wrapper = (0, _react.forwardRef)(function (_ref2, __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
 if (process.env.NODE_ENV !== 'production') {
-  Wrapper.displayName = 'Wrapper';
+  WrapperOldVisualRefresh.displayName = 'WrapperOldVisualRefresh';
 }
-var Header = exports.Header = (0, _react.forwardRef)(function (_ref3, __cmplr) {
+var HeaderOldVisualRefresh = exports.HeaderOldVisualRefresh = (0, _react.forwardRef)(function (_ref3, __cmplr) {
   var _ref3$as = _ref3.as,
     C = _ref3$as === void 0 ? "div" : _ref3$as,
     __cmpls = _ref3.style,
@@ -104,11 +107,12 @@ var Header = exports.Header = (0, _react.forwardRef)(function (_ref3, __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
 if (process.env.NODE_ENV !== 'production') {
-  Header.displayName = 'Header';
+  HeaderOldVisualRefresh.displayName = 'HeaderOldVisualRefresh';
 }
-var IconWrapper = exports.IconWrapper = (0, _react.forwardRef)(function (_ref4, __cmplr) {
+var IconWrapperOldVisualRefresh = exports.IconWrapperOldVisualRefresh = (0, _react.forwardRef)(function (_ref4, __cmplr) {
   var _ref4$as = _ref4.as,
     C = _ref4$as === void 0 ? "div" : _ref4$as,
     __cmpls = _ref4.style,
@@ -122,11 +126,12 @@ var IconWrapper = exports.IconWrapper = (0, _react.forwardRef)(function (_ref4,
   }));
 });
 
+// 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
 if (process.env.NODE_ENV !== 'production') {
-  IconWrapper.displayName = 'IconWrapper';
+  IconWrapperOldVisualRefresh.displayName = 'IconWrapperOldVisualRefresh';
 }
-var TextWrapper = exports.TextWrapper = (0, _react.forwardRef)(function (_ref5, __cmplr) {
+var TextWrapperOldVisualRefresh = exports.TextWrapperOldVisualRefresh = (0, _react.forwardRef)(function (_ref5, __cmplr) {
   var _ref5$as = _ref5.as,
     C = _ref5$as === void 0 ? "div" : _ref5$as,
     __cmpls = _ref5.style,
@@ -140,11 +145,12 @@ var TextWrapper = exports.TextWrapper = (0, _react.forwardRef)(function (_ref5,
   }));
 });
 
+// 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
 if (process.env.NODE_ENV !== 'production') {
-  TextWrapper.displayName = 'TextWrapper';
+  TextWrapperOldVisualRefresh.displayName = 'TextWrapperOldVisualRefresh';
 }
-var TooltipWrapper = exports.TooltipWrapper = (0, _react.forwardRef)(function (_ref6, __cmplr) {
+var TooltipWrapperOldVisualRefresh = exports.TooltipWrapperOldVisualRefresh = (0, _react.forwardRef)(function (_ref6, __cmplr) {
   var _ref6$as = _ref6.as,
     C = _ref6$as === void 0 ? "div" : _ref6$as,
     __cmpls = _ref6.style,
@@ -156,14 +162,15 @@ var TooltipWrapper = exports.TooltipWrapper = (0, _react.forwardRef)(function (_
   }));
 });
 
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // NB: `overflow` is kept as `hidden` since
 // the internal contents of the `iframe` should
 // manage scrolling behaviour.
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled,@atlaskit/ui-styling-standard/no-exported-styles
 if (process.env.NODE_ENV !== 'production') {
-  TooltipWrapper.displayName = 'TooltipWrapper';
+  TooltipWrapperOldVisualRefresh.displayName = 'TooltipWrapperOldVisualRefresh';
 }
-var Content = exports.Content = (0, _react.forwardRef)(function (_ref7, __cmplr) {
+var ContentOldVisualRefresh = exports.ContentOldVisualRefresh = (0, _react.forwardRef)(function (_ref7, __cmplr) {
   var _ref7$as = _ref7.as,
     C = _ref7$as === void 0 ? "div" : _ref7$as,
     __cmpls = _ref7.style,
@@ -179,7 +186,7 @@ var Content = exports.Content = (0, _react.forwardRef)(function (_ref7, __cmplr)
   }));
 });
 if (process.env.NODE_ENV !== 'production') {
-  Content.displayName = 'Content';
+  ContentOldVisualRefresh.displayName = 'ContentOldVisualRefresh';
 }
 var getSizeWithUnit = function getSizeWithUnit() {
   var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '100%';

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

@@ -19,13 +19,16 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var ActionButton = exports.ActionButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  // `Button transforms `testId` into `data-testid`. We need to transform it back to `testId`
+  var testId = props["data-testid"];
   return /*#__PURE__*/_react.default.createElement(_primitives.Box, (0, _extends2.default)({
     as: "span",
     ref: ref,
     xcss: [actionButtonStyle, !props.disabled && actionButtonNotDisabledStyle]
   }, props, {
     "aria-disabled": props.disabled,
-    role: "button"
+    role: "button",
+    testId: testId
   }), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
     as: "span",
     xcss: internalButtonStyle

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: "34.10.2",
+  packageVersion: "34.10.4",
   componentName: 'linkUrl'
 };
 var Anchor = (0, _click.withLinkClickedEvent)('a');

package/dist/cjs/view/common/UnauthorisedViewContent.js

@@ -9,6 +9,8 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _primitives = require("@atlaskit/primitives");
 var _useAnalyticsEvents2 = require("../../common/analytics/generated/use-analytics-events");
 var _constants = require("../../constants");
 var _messages = require("../../messages");
@@ -33,7 +35,12 @@ var UnauthorisedViewContent = function UnauthorisedViewContent(_ref) {
     values: {
       context: providerName
     }
-  })) : /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.connect_unauthorised_account_description_no_provider), ' ', /*#__PURE__*/_react.default.createElement("a", {
+  })) : /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.connect_unauthorised_account_description_no_provider), ' ', (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? /*#__PURE__*/_react.default.createElement(_primitives.Anchor, {
+    href: isProductIntegrationSupported ? _constants.CONTENT_URL_3P_ACCOUNT_AUTH : _constants.CONTENT_URL_SECURITY_AND_PERMISSIONS,
+    target: "_blank",
+    testId: "".concat(testId, "-learn-more"),
+    onClick: handleLearnMoreClick
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, learnMoreMessage)) : /*#__PURE__*/_react.default.createElement("a", {
     href: isProductIntegrationSupported ? _constants.CONTENT_URL_3P_ACCOUNT_AUTH : _constants.CONTENT_URL_SECURITY_AND_PERMISSIONS,
     target: "_blank",
     "data-testid": "".concat(testId, "-learn-more"),

package/dist/es2019/extractors/common/icon/extractIconFromDocument.js

@@ -1,14 +1,69 @@
 import React from 'react';
-import DocumentIcon from '@atlaskit/icon-file-type/glyph/document/16';
-import FileIcon from '@atlaskit/icon-file-type/glyph/generic/16';
-import PresentationIcon from '@atlaskit/icon-file-type/glyph/presentation/16';
-import SpreadsheetIcon from '@atlaskit/icon-file-type/glyph/spreadsheet/16';
+import DocumentIconOld from '@atlaskit/icon-file-type/glyph/document/16';
+import FileIconOld from '@atlaskit/icon-file-type/glyph/generic/16';
+import PresentationIconOld from '@atlaskit/icon-file-type/glyph/presentation/16';
+import SpreadsheetIconOld from '@atlaskit/icon-file-type/glyph/spreadsheet/16';
 import LiveDocumentIcon from '@atlaskit/icon-lab/core/page-live-doc';
-import BlogIcon from '@atlaskit/icon-object/glyph/blog/16';
-import DocumentFilledIcon from '@atlaskit/icon/core/migration/page--document-filled';
+import BlogIconOld from '@atlaskit/icon-object/glyph/blog/16';
+import DocumentFilledIconNew from '@atlaskit/icon/core/migration/file--document-filled';
+import DocumentFilledIconOld from '@atlaskit/icon/core/migration/page--document-filled';
 import { isConfluenceGenerator } from '@atlaskit/link-extractors';
+import { fg } from '@atlaskit/platform-feature-flags';
+import BlogIconNew from '../../../common/ui/icons/blog-icon';
+import PresentationIconNew from '../../../common/ui/icons/chart-bar-icon';
+import FileIconNew from '../../../common/ui/icons/file-icon';
+import SpreadsheetIconNew from '../../../common/ui/icons/list-bullet-icon';
+import DocumentIconNew from '../../../common/ui/icons/page-icon';
 import { getIconForFileType } from '../../../utils';
 import { prioritiseIcon } from './prioritiseIcon';
+
+// TODO Delete this and rename BlogIconNew to BlogIcon when cleaning platform-smart-card-icon-migration
+const BlogIcon = props => {
+  if (fg('platform-smart-card-icon-migration')) {
+    return /*#__PURE__*/React.createElement(BlogIconNew, props);
+  }
+  return /*#__PURE__*/React.createElement(BlogIconOld, props);
+};
+
+// TODO Delete this and rename FileIconNew to FileIcon when cleaning platform-smart-card-icon-migration
+const FileIcon = props => {
+  if (fg('platform-smart-card-icon-migration')) {
+    return /*#__PURE__*/React.createElement(FileIconNew, props);
+  }
+  return /*#__PURE__*/React.createElement(FileIconOld, props);
+};
+
+// TODO Delete this and rename DocumentIconNew to DocumentIcon when cleaning platform-smart-card-icon-migration
+const DocumentIcon = props => {
+  if (fg('platform-smart-card-icon-migration')) {
+    return /*#__PURE__*/React.createElement(DocumentIconNew, props);
+  }
+  return /*#__PURE__*/React.createElement(DocumentIconOld, props);
+};
+
+// TODO Delete this and rename PresentationIconNew to PresentationIcon when cleaning platform-smart-card-icon-migration
+const PresentationIcon = props => {
+  if (fg('platform-smart-card-icon-migration')) {
+    return /*#__PURE__*/React.createElement(PresentationIconNew, props);
+  }
+  return /*#__PURE__*/React.createElement(PresentationIconOld, props);
+};
+
+// TODO Delete this and rename SpreadsheetIconNew to SpreadsheetIcon when cleaning platform-smart-card-icon-migration
+const SpreadsheetIcon = props => {
+  if (fg('platform-smart-card-icon-migration')) {
+    return /*#__PURE__*/React.createElement(SpreadsheetIconNew, props);
+  }
+  return /*#__PURE__*/React.createElement(SpreadsheetIconOld, props);
+};
+
+// TODO Delete this and rename DocumentFilledIconNew to DocumentFilledIcon when cleaning platform-smart-card-icon-migration
+const DocumentFilledIcon = props => {
+  if (fg('platform-smart-card-icon-migration')) {
+    return /*#__PURE__*/React.createElement(DocumentFilledIconNew, props);
+  }
+  return /*#__PURE__*/React.createElement(DocumentFilledIconOld, props);
+};
 /**
  * Extracts an icon for a document pbject
  *

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: "34.10.2"
+  packageVersion: "34.10.4"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/es2019/view/EmbedCard/components/ExpandedFrame.compiled.css

@@ -0,0 +1,50 @@
+._11c81il0{font:var(--ds-font-heading-xsmall,normal 600 14px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._14mj1crf:after{border-radius:9pt}
+._19it1pvm{border:solid 1px var(--ds-border,#091e4224)}
+._1tqzzgxb:after{outline:1px solid var(--ds-border,#091e4224)}
+._2rko1y44{border-radius:4px}
+._hcgvzgxb:hover:after{outline:1px solid var(--ds-border,#091e4224)}
+._qc5o94zs:after{transition:background .3s,box-shadow .3s}
+._v56414au{transition:outline .3s}
+._zulp1b66{gap:var(--ds-space-050,4px)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}
+._15l2idpf:after{top:0}
+._16jlkb7n{flex-grow:1}
+._18m915vq{overflow-y:hidden}
+._18m91wug{overflow-y:auto}
+._18postnw:after{position:absolute}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._19doidpf:after{left:0}
+._1bqqidpf:after{z-index:0}
+._1bsb7vkz{width:1pc}
+._1e0c1txw{display:flex}
+._1hfk18uv:after{background-color:initial}
+._1hfkhp5a:after{background-color:var(--ds-surface-raised,#fff)}
+._1ifiidpf .embed-header{opacity:0}
+._1ifikb7n .embed-header{opacity:1}
+._1pbykb7n{z-index:1}
+._1reo15vq{overflow-x:hidden}
+._1reo1wug{overflow-x:auto}
+._1x88idpf:after{bottom:0}
+._2lx21bp4{flex-direction:column}
+._32rxidpf:after{right:0}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
+._4t3i7vkz{height:1pc}
+._4t3igktf{height:20px}
+._4t3ik5xz{height:27pc}
+._4tpuhp5a:hover:after{background-color:var(--ds-surface-raised,#fff)}
+._8x3u92p9:after{box-shadow:0 0 0 3px var(--ds-border-selected,#0c66e4)}
+._aetrb3bt:after{content:""}
+._bfhkhp5a{background-color:var(--ds-surface-raised,#fff)}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._kqswh2mm{position:relative}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
+._u94kidpf:after{flex-grow:0}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
+._x148kb7n:hover .embed-header{opacity:1}
+._1bnxglyw:hover{text-decoration-line:none}
+._9oik18uv:hover{text-decoration-color:initial}
+._jf4cnqa1:hover{text-decoration-style:solid}
+._1jhm1ips:active{outline:8px solid var(--ds-background-selected,#e9f2ff)}