@atlaskit/smart-card 34.10.2 → 34.10.4

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

@@ -1,4 +1,6 @@
 /* ExpandedFrame.tsx generated by @compiled/babel-plugin v0.36.0 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./ExpandedFrame.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -6,7 +8,7 @@ import Tooltip from '@atlaskit/tooltip';
 import { useMouseDownEvent } from '../../../state/analytics/useLinkClicked';
 import { handleClickCommon } from '../../common/utils';
 import { ExpandedFrameOld } from './ExpandedFrameOld';
-import { className, Content, Header, IconWrapper, LinkWrapper, TextWrapper, TooltipWrapper, Wrapper } from './styled';
+import { className, ContentOldVisualRefresh, HeaderOldVisualRefresh, IconWrapperOldVisualRefresh, LinkWrapperOldVisualRefresh, TextWrapperOldVisualRefresh, TooltipWrapperOldVisualRefresh, WrapperOldVisualRefresh } from './styled';
 const ExpandedFrameNew = ({
   isPlaceholder = false,
   children,
@@ -27,18 +29,35 @@ const ExpandedFrameNew = ({
   const handleClick = event => handleClickCommon(event, onClick);
   const handleMouseDown = useMouseDownEvent();
   const renderHeader = () => {
+    if (fg('platform-linking-visual-refresh-v1')) {
+      return frameStyle !== 'hide' && /*#__PURE__*/React.createElement("div", {
+        className: ax([styles.header, "embed-header"])
+      }, /*#__PURE__*/React.createElement("div", {
+        className: ax([styles.headerIcon])
+      }, icon), /*#__PURE__*/React.createElement("div", {
+        className: ax([styles.tooltipWrapper])
+      }, !isPlaceholder && /*#__PURE__*/React.createElement(Tooltip, {
+        content: text,
+        hideTooltipOnMouseDown: true
+      }, /*#__PURE__*/React.createElement("a", {
+        href: href,
+        onClick: handleClick,
+        onMouseDown: handleMouseDown,
+        className: ax([styles.headerAnchor])
+      }, text))));
+    }
     return (
       /*#__PURE__*/
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      React.createElement(Header, {
+      React.createElement(HeaderOldVisualRefresh, {
         className: "embed-header",
         frameStyle: frameStyle
-      }, /*#__PURE__*/React.createElement(IconWrapper, {
+      }, /*#__PURE__*/React.createElement(IconWrapperOldVisualRefresh, {
         isPlaceholder: isPlaceholder
-      }, !isPlaceholder && icon), /*#__PURE__*/React.createElement(TooltipWrapper, null, /*#__PURE__*/React.createElement(Tooltip, {
+      }, !isPlaceholder && icon), /*#__PURE__*/React.createElement(TooltipWrapperOldVisualRefresh, null, /*#__PURE__*/React.createElement(Tooltip, {
         content: text,
         hideTooltipOnMouseDown: true
-      }, /*#__PURE__*/React.createElement(TextWrapper, {
+      }, /*#__PURE__*/React.createElement(TextWrapperOldVisualRefresh, {
         isPlaceholder: isPlaceholder
       }, !isPlaceholder && /*#__PURE__*/React.createElement("a", {
         href: href,
@@ -47,8 +66,20 @@ const ExpandedFrameNew = ({
       }, text)))))
     );
   };
+  const interactive = isInteractive();
+  const showBackgroundAlways = frameStyle === 'show' || isSelected && frameStyle !== 'hide';
+  const showBackgroundOnHover = interactive && frameStyle !== 'hide';
   const renderContent = () => {
-    return /*#__PURE__*/React.createElement(Content, {
+    if (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: ax([styles.contentStyle, setOverflow && allowScrollBar && styles.contentOverflowAuto, interactive && !showBackgroundAlways && !showBackgroundOnHover && styles.contentInteractiveActiveBorder])
+      }, children);
+    }
+    return /*#__PURE__*/React.createElement(ContentOldVisualRefresh, {
       "data-testid": "embed-content-wrapper",
       allowScrollBar: allowScrollBar,
       removeOverflow: !setOverflow,
@@ -61,8 +92,26 @@ const ExpandedFrameNew = ({
       suppressContentEditableWarning: true
     }, children);
   };
+  if (fg('platform-linking-visual-refresh-v1')) {
+    return /*#__PURE__*/React.createElement("div", _extends({
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: ax([styles.linkWrapper, inheritDimensions && styles.linkWrapperInheritDimensions, isSelected && frameStyle !== 'hide' && styles.linkWrapperSelected, showBackgroundAlways && styles.linkWrapperBorderAndBackground, showBackgroundOnHover && !showBackgroundAlways && styles.linkWrapperInteractiveNotHidden, className]),
+      style: {
+        minWidth: minWidth ? `${minWidth}px` : '',
+        maxWidth: maxWidth ? `${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(LinkWrapper
+    return /*#__PURE__*/React.createElement(LinkWrapperOldVisualRefresh
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     , {
       className: className,
@@ -79,7 +128,7 @@ const ExpandedFrameNew = ({
       inheritDimensions: inheritDimensions
     }, renderHeader(), renderContent());
   } else {
-    return /*#__PURE__*/React.createElement(Wrapper
+    return /*#__PURE__*/React.createElement(WrapperOldVisualRefresh
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     , {
       className: className,
@@ -102,4 +151,18 @@ export const ExpandedFrame = props => {
   } else {
     return /*#__PURE__*/React.createElement(ExpandedFrameOld, props);
   }
+};
+const 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/es2019/view/EmbedCard/components/styled.js

@@ -9,8 +9,9 @@ import { ax, ix } from "@compiled/react/runtime";
 import { B100, B50, N30, N300, N40 } from '@atlaskit/theme/colors';
 export const className = 'media-card-frame';
 export const 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
-export const LinkWrapper = forwardRef(({
+export const LinkWrapperOldVisualRefresh = forwardRef(({
   as: C = "div",
   style: __cmpls,
   ...__cmplp
@@ -35,11 +36,12 @@ export const LinkWrapper = forwardRef(({
   }));
 });
 
+// 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';
 }
-export const Wrapper = forwardRef(({
+export const WrapperOldVisualRefresh = forwardRef(({
   as: C = "div",
   style: __cmpls,
   ...__cmplp
@@ -64,11 +66,12 @@ export const Wrapper = forwardRef(({
   }));
 });
 
+// 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';
 }
-export const Header = forwardRef(({
+export const HeaderOldVisualRefresh = forwardRef(({
   as: C = "div",
   style: __cmpls,
   ...__cmplp
@@ -84,11 +87,12 @@ export const Header = forwardRef(({
   }));
 });
 
+// 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';
 }
-export const IconWrapper = forwardRef(({
+export const IconWrapperOldVisualRefresh = forwardRef(({
   as: C = "div",
   style: __cmpls,
   ...__cmplp
@@ -104,11 +108,12 @@ export const IconWrapper = forwardRef(({
   }));
 });
 
+// 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';
 }
-export const TextWrapper = forwardRef(({
+export const TextWrapperOldVisualRefresh = forwardRef(({
   as: C = "div",
   style: __cmpls,
   ...__cmplp
@@ -124,11 +129,12 @@ export const TextWrapper = forwardRef(({
   }));
 });
 
+// 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';
 }
-export const TooltipWrapper = forwardRef(({
+export const TooltipWrapperOldVisualRefresh = forwardRef(({
   as: C = "div",
   style: __cmpls,
   ...__cmplp
@@ -140,14 +146,15 @@ export const TooltipWrapper = forwardRef(({
   }));
 });
 
+// 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';
 }
-export const Content = forwardRef(({
+export const ContentOldVisualRefresh = forwardRef(({
   as: C = "div",
   style: __cmpls,
   ...__cmplp
@@ -165,7 +172,7 @@ export const Content = forwardRef(({
   }));
 });
 if (process.env.NODE_ENV !== 'production') {
-  Content.displayName = 'Content';
+  ContentOldVisualRefresh.displayName = 'ContentOldVisualRefresh';
 }
 const getSizeWithUnit = (value = '100%') => {
   const unit = typeof value === 'number' ? 'px' : '';

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

@@ -8,13 +8,18 @@ export const ActionButton = /*#__PURE__*/forwardRef(({
   children,
   ...props
 }, ref) => {
+  // `Button transforms `testId` into `data-testid`. We need to transform it back to `testId`
+  const {
+    [`data-testid`]: testId
+  } = props;
   return /*#__PURE__*/React.createElement(Box, _extends({
     as: "span",
     ref: ref,
     xcss: [actionButtonStyle, !props.disabled && actionButtonNotDisabledStyle]
   }, props, {
     "aria-disabled": props.disabled,
-    role: "button"
+    role: "button",
+    testId: testId
   }), /*#__PURE__*/React.createElement(Box, {
     as: "span",
     xcss: internalButtonStyle

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

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

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback } from 'react';
 import { FormattedMessage } from 'react-intl-next';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Anchor } from '@atlaskit/primitives';
 import { useAnalyticsEvents } from '../../common/analytics/generated/use-analytics-events';
 import { CONTENT_URL_3P_ACCOUNT_AUTH, CONTENT_URL_SECURITY_AND_PERMISSIONS } from '../../constants';
 import { messages } from '../../messages';
@@ -24,7 +26,12 @@ const UnauthorisedViewContent = ({
     values: {
       context: providerName
     }
-  })) : /*#__PURE__*/React.createElement(FormattedMessage, messages.connect_unauthorised_account_description_no_provider), ' ', /*#__PURE__*/React.createElement("a", {
+  })) : /*#__PURE__*/React.createElement(FormattedMessage, messages.connect_unauthorised_account_description_no_provider), ' ', fg('platform-linking-visual-refresh-v1') ? /*#__PURE__*/React.createElement(Anchor, {
+    href: isProductIntegrationSupported ? CONTENT_URL_3P_ACCOUNT_AUTH : CONTENT_URL_SECURITY_AND_PERMISSIONS,
+    target: "_blank",
+    testId: `${testId}-learn-more`,
+    onClick: handleLearnMoreClick
+  }, /*#__PURE__*/React.createElement(FormattedMessage, learnMoreMessage)) : /*#__PURE__*/React.createElement("a", {
     href: isProductIntegrationSupported ? CONTENT_URL_3P_ACCOUNT_AUTH : CONTENT_URL_SECURITY_AND_PERMISSIONS,
     target: "_blank",
     "data-testid": `${testId}-learn-more`,

package/dist/esm/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
+var BlogIcon = function 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
+var FileIcon = function 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
+var DocumentIcon = function 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
+var PresentationIcon = function 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
+var SpreadsheetIcon = function 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
+var DocumentFilledIcon = function 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/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: "34.10.2"
+  packageVersion: "34.10.4"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/esm/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/esm/view/EmbedCard/components/ExpandedFrame.js

@@ -1,4 +1,6 @@
 /* ExpandedFrame.tsx generated by @compiled/babel-plugin v0.36.0 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./ExpandedFrame.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -6,7 +8,7 @@ import Tooltip from '@atlaskit/tooltip';
 import { useMouseDownEvent } from '../../../state/analytics/useLinkClicked';
 import { handleClickCommon } from '../../common/utils';
 import { ExpandedFrameOld } from './ExpandedFrameOld';
-import { className, Content, Header, IconWrapper, LinkWrapper, TextWrapper, TooltipWrapper, Wrapper } from './styled';
+import { className, ContentOldVisualRefresh, HeaderOldVisualRefresh, IconWrapperOldVisualRefresh, LinkWrapperOldVisualRefresh, TextWrapperOldVisualRefresh, TooltipWrapperOldVisualRefresh, WrapperOldVisualRefresh } from './styled';
 var ExpandedFrameNew = function ExpandedFrameNew(_ref) {
   var _ref$isPlaceholder = _ref.isPlaceholder,
     isPlaceholder = _ref$isPlaceholder === void 0 ? false : _ref$isPlaceholder,
@@ -35,18 +37,35 @@ var ExpandedFrameNew = function ExpandedFrameNew(_ref) {
   };
   var handleMouseDown = useMouseDownEvent();
   var renderHeader = function renderHeader() {
+    if (fg('platform-linking-visual-refresh-v1')) {
+      return frameStyle !== 'hide' && /*#__PURE__*/React.createElement("div", {
+        className: ax([styles.header, "embed-header"])
+      }, /*#__PURE__*/React.createElement("div", {
+        className: ax([styles.headerIcon])
+      }, icon), /*#__PURE__*/React.createElement("div", {
+        className: ax([styles.tooltipWrapper])
+      }, !isPlaceholder && /*#__PURE__*/React.createElement(Tooltip, {
+        content: text,
+        hideTooltipOnMouseDown: true
+      }, /*#__PURE__*/React.createElement("a", {
+        href: href,
+        onClick: handleClick,
+        onMouseDown: handleMouseDown,
+        className: ax([styles.headerAnchor])
+      }, text))));
+    }
     return (
       /*#__PURE__*/
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      React.createElement(Header, {
+      React.createElement(HeaderOldVisualRefresh, {
         className: "embed-header",
         frameStyle: frameStyle
-      }, /*#__PURE__*/React.createElement(IconWrapper, {
+      }, /*#__PURE__*/React.createElement(IconWrapperOldVisualRefresh, {
         isPlaceholder: isPlaceholder
-      }, !isPlaceholder && icon), /*#__PURE__*/React.createElement(TooltipWrapper, null, /*#__PURE__*/React.createElement(Tooltip, {
+      }, !isPlaceholder && icon), /*#__PURE__*/React.createElement(TooltipWrapperOldVisualRefresh, null, /*#__PURE__*/React.createElement(Tooltip, {
         content: text,
         hideTooltipOnMouseDown: true
-      }, /*#__PURE__*/React.createElement(TextWrapper, {
+      }, /*#__PURE__*/React.createElement(TextWrapperOldVisualRefresh, {
         isPlaceholder: isPlaceholder
       }, !isPlaceholder && /*#__PURE__*/React.createElement("a", {
         href: href,
@@ -55,8 +74,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(Content, {
+    if (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: ax([styles.contentStyle, setOverflow && allowScrollBar && styles.contentOverflowAuto, interactive && !showBackgroundAlways && !showBackgroundOnHover && styles.contentInteractiveActiveBorder])
+      }, children);
+    }
+    return /*#__PURE__*/React.createElement(ContentOldVisualRefresh, {
       "data-testid": "embed-content-wrapper",
       allowScrollBar: allowScrollBar,
       removeOverflow: !setOverflow,
@@ -69,8 +100,26 @@ var ExpandedFrameNew = function ExpandedFrameNew(_ref) {
       suppressContentEditableWarning: true
     }, children);
   };
+  if (fg('platform-linking-visual-refresh-v1')) {
+    return /*#__PURE__*/React.createElement("div", _extends({
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: ax([styles.linkWrapper, inheritDimensions && styles.linkWrapperInheritDimensions, isSelected && frameStyle !== 'hide' && styles.linkWrapperSelected, showBackgroundAlways && styles.linkWrapperBorderAndBackground, showBackgroundOnHover && !showBackgroundAlways && styles.linkWrapperInteractiveNotHidden, 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(LinkWrapper
+    return /*#__PURE__*/React.createElement(LinkWrapperOldVisualRefresh
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     , {
       className: className,
@@ -87,7 +136,7 @@ var ExpandedFrameNew = function ExpandedFrameNew(_ref) {
       inheritDimensions: inheritDimensions
     }, renderHeader(), renderContent());
   } else {
-    return /*#__PURE__*/React.createElement(Wrapper
+    return /*#__PURE__*/React.createElement(WrapperOldVisualRefresh
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     , {
       className: className,
@@ -110,4 +159,18 @@ export var ExpandedFrame = function ExpandedFrame(props) {
   } else {
     return /*#__PURE__*/React.createElement(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"
 };