@atlaskit/smart-card 44.5.4 → 44.6.1

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

@@ -1,11 +1,17 @@
 /* index.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
+import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
+import { di } from 'react-magnetic-di';
 import LockLockedIcon from '@atlaskit/icon/core/lock-locked';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box } from '@atlaskit/primitives/compiled';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { useAnalyticsEvents } from '../../../common/analytics/generated/use-analytics-events';
 import { messages } from '../../../messages';
+import { getCachedProviderPctMapAndRefresh } from '../../../state/services/personalization';
 import { HoverCard } from '../../HoverCard';
 import { ActionButton } from '../common/action-button';
 import { Frame } from '../Frame';
@@ -16,6 +22,86 @@ const fallbackUnauthorizedIcon = () => {
     label: "error"
   });
 };
+
+/**
+ * When persisted personalization adoption from {@link getCachedProviderPctMapAndRefresh} is strictly below this value,
+ * the pill uses exploratory "previewing" copy instead of a percentage headline.
+ */
+const SOCIAL_PROOF_TEAM_PREVIEW_THRESHOLD = 30;
+const SOCIAL_PROOF_TRAIT_NAME = 'sl_3p_connected_providers_site_pct';
+const socialProofPillStyles = {
+  strong: "_k48pwu06",
+  inlineContainer: "_1e0c116y _4cvr1h6o",
+  root: "_2rko12b0 _1e0c1nu9 _4cvr1h6o _vchhusvi _p12f1osq _bfhk1dpa _syazazsu _y3gn18uv _1wybtjj4 _s7n4t94y _ca0qv77o _n3tdv77o _u5f312x7 _19bv12x7 _2hwx1b66",
+  label: "_1reo15vq _18m915vq _1bto1l2s _o5721q9c"
+};
+
+/**
+ * Renders the social-proof pill and Connect button using persisted percentages only ({@link getCachedProviderPctMapAndRefresh}) — no
+ * loading skeleton; either the cached percentage is shown or the legacy long connect label is used.
+ *
+ * Only mounted when the parent has passed the killswitch and
+ * `platform_sl_3p_preauth_social_proof_inline_cta`. See platform docs: `rules-of-hooks.md` "Should §1".
+ */
+const UnauthorisedConnectWithSocialProof = ({
+  context,
+  extensionKey,
+  testId,
+  onConnectClick
+}) => {
+  var _context$trim;
+  // TODO We need to decide what should we do with FedRAMP. It will not work there (_edge/tenant_info is not available) but so maybe
+  // we can just leave it like that and whole feature won't trigger befcause of that.
+  const providerPctMap = getCachedProviderPctMapAndRefresh(SOCIAL_PROOF_TRAIT_NAME);
+  const connectedPct = extensionKey && providerPctMap ? providerPctMap[extensionKey] : undefined;
+  const isEnabled = true;
+  const trimmedProviderDisplayName = (_context$trim = context === null || context === void 0 ? void 0 : context.trim()) !== null && _context$trim !== void 0 ? _context$trim : '';
+  const hasProviderDisplayName = trimmedProviderDisplayName.length > 0;
+  const isSocialProofUsageHighEnough = connectedPct !== undefined && connectedPct >= SOCIAL_PROOF_TEAM_PREVIEW_THRESHOLD;
+
+  /**
+   * Persisted personalization is required. Below {@link SOCIAL_PROOF_TEAM_PREVIEW_THRESHOLD} adoption we also require
+   * a provider display name; otherwise omit the pill and use the legacy long connect treatment.
+   */
+  const showSocialProofPill = isEnabled && connectedPct !== undefined && (isSocialProofUsageHighEnough || hasProviderDisplayName);
+  const bold = chunks => /*#__PURE__*/React.createElement(Box, {
+    as: "strong",
+    xcss: socialProofPillStyles.strong
+  }, chunks);
+  const socialProofPillContent = isSocialProofUsageHighEnough ? hasProviderDisplayName ? /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.social_proof_inline_cta_tag_high_with_context, {
+    values: {
+      connectedPct,
+      context: trimmedProviderDisplayName,
+      b: bold
+    }
+  })) : /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.social_proof_inline_cta_tag_high_no_context, {
+    values: {
+      connectedPct,
+      b: bold
+    }
+  })) : /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.social_proof_inline_cta_tag_low_with_context, {
+    values: {
+      context: trimmedProviderDisplayName
+    }
+  }));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, showSocialProofPill ? /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: socialProofPillStyles.root,
+    testId: `${testId}-social-proof-tag`
+  }, /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: socialProofPillStyles.label
+  }, socialProofPillContent)) : null, /*#__PURE__*/React.createElement(ActionButton, {
+    onClick: onConnectClick,
+    viewType: "unauthorised",
+    testId: "button-connect-account",
+    isSocialProofInlineUnauthorisedConnect: showSocialProofPill
+  }, showSocialProofPill ? /*#__PURE__*/React.createElement(FormattedMessage, messages.connect_inline_social_proof) : /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_link_account_card_name, {
+    values: {
+      context
+    }
+  }))));
+};
 export const InlineCardUnauthorizedView = ({
   url,
   id,
@@ -26,12 +112,14 @@ export const InlineCardUnauthorizedView = ({
   testId = 'inline-card-unauthorized-view',
   showHoverPreview = false,
   truncateInline,
-  context
+  context,
+  extensionKey
 }) => {
   const frameRef = React.useRef(null);
   const {
     fireEvent
   } = useAnalyticsEvents();
+  const isSocialProofInlineCtaEnabled = onAuthorise && fg('platform_sl_3p_preauth_soc_proof_inline_killswitch') && expValEquals('platform_sl_3p_preauth_social_proof_inline_cta', 'isEnabled', true);
   const handleConnectAccount = React.useCallback(event => {
     event.preventDefault();
     event.stopPropagation();
@@ -63,7 +151,12 @@ export const InlineCardUnauthorizedView = ({
     link: url,
     onClick: onClick,
     titleColor: "var(--ds-text-subtle, #505258)"
-  }), onAuthorise && renderActionButton());
+  }), onAuthorise && (isSocialProofInlineCtaEnabled ? /*#__PURE__*/React.createElement(UnauthorisedConnectWithSocialProof, {
+    context: context,
+    extensionKey: extensionKey,
+    testId: testId,
+    onConnectClick: handleConnectAccount
+  }) : renderActionButton()));
   if (onAuthorise && showHoverPreview) {
     return /*#__PURE__*/React.createElement(HoverCard, {
       url: url,

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

@@ -1,17 +1,16 @@
 
-._1s7zia51{border-right:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
-._n7zlia51{border-bottom:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
-._x3doia51{border-top:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._13liidpf{border-top-left-radius:0}
-._13lilb4i{border-top-left-radius:var(--ds-radius-xsmall,2px)}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}._13lilb4i{border-top-left-radius:var(--ds-radius-xsmall,2px)}
 ._16d9qvcn{-webkit-box-decoration-break:clone;box-decoration-break:clone}
 ._19bv12x7{padding-left:var(--ds-space-075,6px)}
 ._1e0c1bgi{display:contents}
 ._1e0c1nu9{display:inline}
 ._1nmz9jpi{word-break:break-all}
 ._1o0zlb4i{border-bottom-right-radius:var(--ds-radius-xsmall,2px)}
+._1wybtjj4{font-size:.8em}
 ._1y1m1u8q{background-clip:padding-box}
 ._2hwxt94y{margin-right:1px}
 ._2hwxv77o{margin-right:var(--ds-space-025,2px)}
+._4cvr1h6o{align-items:center}
 ._80om13gf{cursor:not-allowed}
 ._80omtlke{cursor:pointer}
 ._bfhkby5v{background-color:var(--ds-background-disabled,#17171708)}
@@ -21,19 +20,17 @@
 ._ca0qv77o{padding-top:var(--ds-space-025,2px)}
 ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
 ._k48pi7a9{font-weight:var(--ds-font-weight-regular,400)}
-._mrkbidpf{border-bottom-left-radius:0}
 ._mrkblb4i{border-bottom-left-radius:var(--ds-radius-xsmall,2px)}
 ._n3tdt94y{padding-bottom:1px}
 ._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
 ._o5721btx{white-space:break-spaces}
-._o5721q9c{white-space:nowrap}
 ._qrwqlb4i{border-top-right-radius:var(--ds-radius-xsmall,2px)}
+._s7n4t94y{vertical-align:1px}
 ._syaz15cr{color:var(--ds-text-inverse,#fff)}
 ._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
 ._syazi7uo{color:var(--ds-text,#292a2e)}
 ._u5f312x7{padding-right:var(--ds-space-075,6px)}
 ._y3gn18uv{text-align:initial}
-._4cvxq98m:hover{border-color:var(--ds-border-selected,#1868db)}
 ._irr31q28:hover{background-color:var(--ds-background-selected-bold-hovered,#1558bc)}
 ._irr3plhp:hover{background-color:var(--ds-background-neutral-hovered,#0b120e24)}
 ._1di612kk:active{background-color:var(--ds-background-selected-bold-pressed,#123263)}

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

@@ -4,15 +4,19 @@ import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Pressable } from '@atlaskit/primitives/compiled';
 const styles = {
   button: "_1e0c1bgi",
   innerContainer: "_1e0c1nu9 _1y1m1u8q _16d9qvcn _k48p1wq8 _19bv12x7 _ca0qv77o _n3tdv77o _u5f312x7 _y3gn18uv _o5721btx _1nmz9jpi",
+  innerContainerSocialProofConnect: "_2rko12b0 _syaz15cr _80omtlke _bfhkjmqp _2hwxv77o _1e0c1nu9 _4cvr1h6o _1wybtjj4 _1y1m1u8q _16d9qvcn _19bv12x7 _ca0qv77o _n3tdv77o _u5f312x7 _y3gn18uv _s7n4t94y _o5721btx _1nmz9jpi _irr31q28 _1di612kk",
   enabled: "_syazi7uo _80omtlke _bfhki8nm _irr3plhp _1di61gdz",
   disabled: "_syaz1gmx _80om13gf _bfhkby5v",
-  unauthorised: "_syaz15cr _80omtlke _bfhkjmqp _qrwqlb4i _1o0zlb4i _13lilb4i _mrkblb4i _ca0qt94y _n3tdt94y _2hwxt94y _k48pi7a9 _irr31q28 _1di612kk",
-  action: "_x3doia51 _1s7zia51 _n7zlia51 _syaz15cr _80omtlke _bfhkjmqp _qrwqlb4i _1o0zlb4i _13liidpf _mrkbidpf _2hwxv77o _k48pi7a9 _o5721q9c _4cvxq98m _irr31q28 _1di612kk"
+  unauthorised: "_syaz15cr _80omtlke _bfhkjmqp _qrwqlb4i _1o0zlb4i _13lilb4i _mrkblb4i _ca0qt94y _n3tdt94y _2hwxt94y _k48pi7a9 _irr31q28 _1di612kk"
 };
+
+/* eslint-enable @compiled/shorthand-property-sorting */
+
 /**
  * Action button has to be a span for the overflow to work correctly
  */
@@ -20,8 +24,21 @@ export const ActionButton = /*#__PURE__*/forwardRef(({
   children,
   isDisabled,
   viewType = 'default',
+  isSocialProofInlineUnauthorisedConnect = false,
   ...props
 }, ref) => {
+  const shouldUseSocialProofConnect = isSocialProofInlineUnauthorisedConnect && viewType === 'unauthorised' && fg('platform_sl_3p_preauth_soc_proof_inline_killswitch');
+  if (shouldUseSocialProofConnect && !isDisabled) {
+    return /*#__PURE__*/React.createElement(Pressable, _extends({}, props, {
+      ref: ref,
+      style: {
+        font: `inherit`
+      },
+      xcss: styles.button
+    }), /*#__PURE__*/React.createElement("span", {
+      className: ax([styles.innerContainerSocialProofConnect])
+    }, children));
+  }
   return /*#__PURE__*/React.createElement(Pressable, _extends({}, props, {
     isDisabled: isDisabled,
     ref: ref

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

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

package/dist/esm/__tests__/vr-tests/__snapshots__/inline-card/inline-card-unauthorised-social-proof-exploratory-low-share-previewing-headline-and-short-connect-label--default.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f5c8377b1d3f1c46152e4056e25fac995df7a0c309fc3bd720342e3f5c83a290
+size 18488

package/dist/esm/__tests__/vr-tests/__snapshots__/inline-card/inline-card-unauthorised-social-proof-no-context-percentage-headline-with-short-connect-label--default.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:36b68e91316715be24892707009d7e486e55f1b86c08e879640c90ba6b7edd86
+size 19001

package/dist/esm/__tests__/vr-tests/__snapshots__/inline-card/inline-card-unauthorised-social-proof-persisted-percentage-previews-headline-30-and-short-connect-label--default.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8333dc40a888fb5ecb629497b5c97541a43beaf45b4d1a5dc3b347747c308c02
+size 19222

package/dist/esm/messages.js

@@ -175,6 +175,26 @@ export var messages = defineMessages({
     defaultMessage: 'Connect to {context}',
     description: 'Shown on a button to connect user external account to their Atlassian account.'
   },
+  connect_inline_social_proof: {
+    id: 'fabric.linking.connect_inline_social_proof',
+    defaultMessage: 'Connect',
+    description: 'Shown on a button for unauthorised inline smart links when the social proof inline CTA experiment is active. Replaces the longer "Connect your {context} account" label.'
+  },
+  social_proof_inline_cta_tag_high_with_context: {
+    id: 'fabric.linking.social_proof_inline_cta_tag_high_with_context',
+    defaultMessage: '<b>{connectedPct}%</b> of your team previews {context}',
+    description: 'Social-proof tag pill beside the shortcut "Connect" on an unauthorised inline smart link when adoption is not in the exploratory range. {connectedPct} is the approximate share previewing/using the integration; {context} is the provider display name.'
+  },
+  social_proof_inline_cta_tag_high_no_context: {
+    id: 'fabric.linking.social_proof_inline_cta_tag_high_no_context',
+    defaultMessage: '<b>{connectedPct}%</b> of your team previews this',
+    description: 'Social-proof tag pill when adoption is above the exploratory threshold and no provider display name is available; {connectedPct} is the approximate share previewing the integration.'
+  },
+  social_proof_inline_cta_tag_low_with_context: {
+    id: 'fabric.linking.social_proof_inline_cta_tag_low_with_context',
+    defaultMessage: 'Your team is previewing {context}',
+    description: 'Social-proof tag pill when share is below the percentage headline threshold; shown only when a provider display name is available. Omit the pill entirely when personalization is unavailable or the provider name is unknown.'
+  },
   connect_unauthorised_account_description: {
     id: 'fabric.linking.connect_unauthorised_account_description',
     defaultMessage: 'Connect your {context} account to collaborate on work across Atlassian products.',

package/dist/esm/state/hooks/use-incoming-outgoing-links/index.js

@@ -2,6 +2,8 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { useCallback, useMemo } from 'react';
 import { request } from '@atlaskit/linking-common';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { getCurrentSiteCloudId } from '../use-current-site-cloud-id';
 import { queryIncomingOutgoingLinks as queryIncomingOutgoingAris } from './query';
 /**
  * @param baseUriWithNoTrailingSlash base url which will then be appended with /gateway/api/graphql to make requests to AGG
@@ -70,11 +72,24 @@ var useIncomingOutgoingAri = function useIncomingOutgoingAri() {
             }
             return _context3.abrupt("return", match[2]);
           case 4:
-            _context3.next = 6;
-            return getCurrentSiteId();
-          case 6:
-            return _context3.abrupt("return", _context3.sent);
+            if (!fg('platform_sl_3p_preauth_soc_proof_inline_killswitch')) {
+              _context3.next = 10;
+              break;
+            }
+            _context3.next = 7;
+            return getCurrentSiteCloudId(baseUriWithNoTrailingSlash);
           case 7:
+            _context3.t0 = _context3.sent;
+            _context3.next = 13;
+            break;
+          case 10:
+            _context3.next = 12;
+            return getCurrentSiteId();
+          case 12:
+            _context3.t0 = _context3.sent;
+          case 13:
+            return _context3.abrupt("return", _context3.t0);
+          case 14:
           case "end":
             return _context3.stop();
         }
@@ -83,7 +98,7 @@ var useIncomingOutgoingAri = function useIncomingOutgoingAri() {
     return function (_x3) {
       return _ref3.apply(this, arguments);
     };
-  }(), [getCurrentSiteId]);
+  }(), [getCurrentSiteId, baseUriWithNoTrailingSlash]);
   var getIncomingOutgoingAris = useCallback(
   /*#__PURE__*/
   /**

package/dist/esm/state/services/current-site-cloud-id/index.js

@@ -143,11 +143,12 @@ export var CurrentSiteCloudIdService = /*#__PURE__*/function () {
         return _get.apply(this, arguments);
       }
       return get;
-    }() /** Clears the session pin so the next {@link get} may run `tenant_info` again (e.g. tests). */)
+    }() /** Clears session pin and persisted storage so the next {@link get} is a fresh tenant_info fetch. */)
   }, {
     key: "clearCache",
     value: function clearCache() {
       this.tenantInfoInflightPromise = null;
+      smartCardStorage.removeItem(CURRENT_SITE_CLOUD_ID_STORAGE_ITEM_KEY);
     }
   }]);
 }();

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

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

@@ -0,0 +1,21 @@
+
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}._18m915vq{overflow-y:hidden}
+._19bv12x7{padding-left:var(--ds-space-075,6px)}
+._1bto1l2s{text-overflow:ellipsis}
+._1e0c116y{display:inline-flex}
+._1e0c1nu9{display:inline}
+._1reo15vq{overflow-x:hidden}
+._1wybtjj4{font-size:.8em}
+._2hwx1b66{margin-right:var(--ds-space-050,4px)}
+._4cvr1h6o{align-items:center}
+._bfhk1dpa{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
+._ca0qv77o{padding-top:var(--ds-space-025,2px)}
+._k48pwu06{font-weight:var(--ds-font-weight-bold,653)}
+._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
+._o5721q9c{white-space:nowrap}
+._p12f1osq{max-width:100%}
+._s7n4t94y{vertical-align:1px}
+._syazazsu{color:var(--ds-text-subtle,#505258)}
+._u5f312x7{padding-right:var(--ds-space-075,6px)}
+._vchhusvi{box-sizing:border-box}
+._y3gn18uv{text-align:initial}

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

@@ -1,11 +1,17 @@
 /* index.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
+import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
+import { di } from 'react-magnetic-di';
 import LockLockedIcon from '@atlaskit/icon/core/lock-locked';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box } from '@atlaskit/primitives/compiled';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { useAnalyticsEvents } from '../../../common/analytics/generated/use-analytics-events';
 import { messages } from '../../../messages';
+import { getCachedProviderPctMapAndRefresh } from '../../../state/services/personalization';
 import { HoverCard } from '../../HoverCard';
 import { ActionButton } from '../common/action-button';
 import { Frame } from '../Frame';
@@ -16,22 +22,105 @@ var fallbackUnauthorizedIcon = function fallbackUnauthorizedIcon() {
     label: "error"
   });
 };
-export var InlineCardUnauthorizedView = function InlineCardUnauthorizedView(_ref) {
-  var url = _ref.url,
-    id = _ref.id,
-    icon = _ref.icon,
-    onAuthorise = _ref.onAuthorise,
-    onClick = _ref.onClick,
-    isSelected = _ref.isSelected,
-    _ref$testId = _ref.testId,
-    testId = _ref$testId === void 0 ? 'inline-card-unauthorized-view' : _ref$testId,
-    _ref$showHoverPreview = _ref.showHoverPreview,
-    showHoverPreview = _ref$showHoverPreview === void 0 ? false : _ref$showHoverPreview,
-    truncateInline = _ref.truncateInline,
-    context = _ref.context;
+
+/**
+ * When persisted personalization adoption from {@link getCachedProviderPctMapAndRefresh} is strictly below this value,
+ * the pill uses exploratory "previewing" copy instead of a percentage headline.
+ */
+var SOCIAL_PROOF_TEAM_PREVIEW_THRESHOLD = 30;
+var SOCIAL_PROOF_TRAIT_NAME = 'sl_3p_connected_providers_site_pct';
+var socialProofPillStyles = {
+  strong: "_k48pwu06",
+  inlineContainer: "_1e0c116y _4cvr1h6o",
+  root: "_2rko12b0 _1e0c1nu9 _4cvr1h6o _vchhusvi _p12f1osq _bfhk1dpa _syazazsu _y3gn18uv _1wybtjj4 _s7n4t94y _ca0qv77o _n3tdv77o _u5f312x7 _19bv12x7 _2hwx1b66",
+  label: "_1reo15vq _18m915vq _1bto1l2s _o5721q9c"
+};
+
+/**
+ * Renders the social-proof pill and Connect button using persisted percentages only ({@link getCachedProviderPctMapAndRefresh}) — no
+ * loading skeleton; either the cached percentage is shown or the legacy long connect label is used.
+ *
+ * Only mounted when the parent has passed the killswitch and
+ * `platform_sl_3p_preauth_social_proof_inline_cta`. See platform docs: `rules-of-hooks.md` "Should §1".
+ */
+var UnauthorisedConnectWithSocialProof = function UnauthorisedConnectWithSocialProof(_ref) {
+  var _context$trim;
+  var context = _ref.context,
+    extensionKey = _ref.extensionKey,
+    testId = _ref.testId,
+    onConnectClick = _ref.onConnectClick;
+  // TODO We need to decide what should we do with FedRAMP. It will not work there (_edge/tenant_info is not available) but so maybe
+  // we can just leave it like that and whole feature won't trigger befcause of that.
+  var providerPctMap = getCachedProviderPctMapAndRefresh(SOCIAL_PROOF_TRAIT_NAME);
+  var connectedPct = extensionKey && providerPctMap ? providerPctMap[extensionKey] : undefined;
+  var isEnabled = true;
+  var trimmedProviderDisplayName = (_context$trim = context === null || context === void 0 ? void 0 : context.trim()) !== null && _context$trim !== void 0 ? _context$trim : '';
+  var hasProviderDisplayName = trimmedProviderDisplayName.length > 0;
+  var isSocialProofUsageHighEnough = connectedPct !== undefined && connectedPct >= SOCIAL_PROOF_TEAM_PREVIEW_THRESHOLD;
+
+  /**
+   * Persisted personalization is required. Below {@link SOCIAL_PROOF_TEAM_PREVIEW_THRESHOLD} adoption we also require
+   * a provider display name; otherwise omit the pill and use the legacy long connect treatment.
+   */
+  var showSocialProofPill = isEnabled && connectedPct !== undefined && (isSocialProofUsageHighEnough || hasProviderDisplayName);
+  var bold = function bold(chunks) {
+    return /*#__PURE__*/React.createElement(Box, {
+      as: "strong",
+      xcss: socialProofPillStyles.strong
+    }, chunks);
+  };
+  var socialProofPillContent = isSocialProofUsageHighEnough ? hasProviderDisplayName ? /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.social_proof_inline_cta_tag_high_with_context, {
+    values: {
+      connectedPct: connectedPct,
+      context: trimmedProviderDisplayName,
+      b: bold
+    }
+  })) : /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.social_proof_inline_cta_tag_high_no_context, {
+    values: {
+      connectedPct: connectedPct,
+      b: bold
+    }
+  })) : /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.social_proof_inline_cta_tag_low_with_context, {
+    values: {
+      context: trimmedProviderDisplayName
+    }
+  }));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, showSocialProofPill ? /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: socialProofPillStyles.root,
+    testId: "".concat(testId, "-social-proof-tag")
+  }, /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: socialProofPillStyles.label
+  }, socialProofPillContent)) : null, /*#__PURE__*/React.createElement(ActionButton, {
+    onClick: onConnectClick,
+    viewType: "unauthorised",
+    testId: "button-connect-account",
+    isSocialProofInlineUnauthorisedConnect: showSocialProofPill
+  }, showSocialProofPill ? /*#__PURE__*/React.createElement(FormattedMessage, messages.connect_inline_social_proof) : /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_link_account_card_name, {
+    values: {
+      context: context
+    }
+  }))));
+};
+export var InlineCardUnauthorizedView = function InlineCardUnauthorizedView(_ref2) {
+  var url = _ref2.url,
+    id = _ref2.id,
+    icon = _ref2.icon,
+    onAuthorise = _ref2.onAuthorise,
+    onClick = _ref2.onClick,
+    isSelected = _ref2.isSelected,
+    _ref2$testId = _ref2.testId,
+    testId = _ref2$testId === void 0 ? 'inline-card-unauthorized-view' : _ref2$testId,
+    _ref2$showHoverPrevie = _ref2.showHoverPreview,
+    showHoverPreview = _ref2$showHoverPrevie === void 0 ? false : _ref2$showHoverPrevie,
+    truncateInline = _ref2.truncateInline,
+    context = _ref2.context,
+    extensionKey = _ref2.extensionKey;
   var frameRef = React.useRef(null);
   var _useAnalyticsEvents = useAnalyticsEvents(),
     fireEvent = _useAnalyticsEvents.fireEvent;
+  var isSocialProofInlineCtaEnabled = onAuthorise && fg('platform_sl_3p_preauth_soc_proof_inline_killswitch') && expValEquals('platform_sl_3p_preauth_social_proof_inline_cta', 'isEnabled', true);
   var handleConnectAccount = React.useCallback(function (event) {
     event.preventDefault();
     event.stopPropagation();
@@ -63,7 +152,12 @@ export var InlineCardUnauthorizedView = function InlineCardUnauthorizedView(_ref
     link: url,
     onClick: onClick,
     titleColor: "var(--ds-text-subtle, #505258)"
-  }), onAuthorise && renderActionButton());
+  }), onAuthorise && (isSocialProofInlineCtaEnabled ? /*#__PURE__*/React.createElement(UnauthorisedConnectWithSocialProof, {
+    context: context,
+    extensionKey: extensionKey,
+    testId: testId,
+    onConnectClick: handleConnectAccount
+  }) : renderActionButton()));
   if (onAuthorise && showHoverPreview) {
     return /*#__PURE__*/React.createElement(HoverCard, {
       url: url,

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

@@ -1,17 +1,16 @@
 
-._1s7zia51{border-right:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
-._n7zlia51{border-bottom:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
-._x3doia51{border-top:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._13liidpf{border-top-left-radius:0}
-._13lilb4i{border-top-left-radius:var(--ds-radius-xsmall,2px)}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}._13lilb4i{border-top-left-radius:var(--ds-radius-xsmall,2px)}
 ._16d9qvcn{-webkit-box-decoration-break:clone;box-decoration-break:clone}
 ._19bv12x7{padding-left:var(--ds-space-075,6px)}
 ._1e0c1bgi{display:contents}
 ._1e0c1nu9{display:inline}
 ._1nmz9jpi{word-break:break-all}
 ._1o0zlb4i{border-bottom-right-radius:var(--ds-radius-xsmall,2px)}
+._1wybtjj4{font-size:.8em}
 ._1y1m1u8q{background-clip:padding-box}
 ._2hwxt94y{margin-right:1px}
 ._2hwxv77o{margin-right:var(--ds-space-025,2px)}
+._4cvr1h6o{align-items:center}
 ._80om13gf{cursor:not-allowed}
 ._80omtlke{cursor:pointer}
 ._bfhkby5v{background-color:var(--ds-background-disabled,#17171708)}
@@ -21,19 +20,17 @@
 ._ca0qv77o{padding-top:var(--ds-space-025,2px)}
 ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
 ._k48pi7a9{font-weight:var(--ds-font-weight-regular,400)}
-._mrkbidpf{border-bottom-left-radius:0}
 ._mrkblb4i{border-bottom-left-radius:var(--ds-radius-xsmall,2px)}
 ._n3tdt94y{padding-bottom:1px}
 ._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
 ._o5721btx{white-space:break-spaces}
-._o5721q9c{white-space:nowrap}
 ._qrwqlb4i{border-top-right-radius:var(--ds-radius-xsmall,2px)}
+._s7n4t94y{vertical-align:1px}
 ._syaz15cr{color:var(--ds-text-inverse,#fff)}
 ._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
 ._syazi7uo{color:var(--ds-text,#292a2e)}
 ._u5f312x7{padding-right:var(--ds-space-075,6px)}
 ._y3gn18uv{text-align:initial}
-._4cvxq98m:hover{border-color:var(--ds-border-selected,#1868db)}
 ._irr31q28:hover{background-color:var(--ds-background-selected-bold-hovered,#1558bc)}
 ._irr3plhp:hover{background-color:var(--ds-background-neutral-hovered,#0b120e24)}
 ._1di612kk:active{background-color:var(--ds-background-selected-bold-pressed,#123263)}

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

@@ -1,20 +1,24 @@
 /* index.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "isDisabled", "viewType"];
+var _excluded = ["children", "isDisabled", "viewType", "isSocialProofInlineUnauthorisedConnect"];
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Pressable } from '@atlaskit/primitives/compiled';
 var styles = {
   button: "_1e0c1bgi",
   innerContainer: "_1e0c1nu9 _1y1m1u8q _16d9qvcn _k48p1wq8 _19bv12x7 _ca0qv77o _n3tdv77o _u5f312x7 _y3gn18uv _o5721btx _1nmz9jpi",
+  innerContainerSocialProofConnect: "_2rko12b0 _syaz15cr _80omtlke _bfhkjmqp _2hwxv77o _1e0c1nu9 _4cvr1h6o _1wybtjj4 _1y1m1u8q _16d9qvcn _19bv12x7 _ca0qv77o _n3tdv77o _u5f312x7 _y3gn18uv _s7n4t94y _o5721btx _1nmz9jpi _irr31q28 _1di612kk",
   enabled: "_syazi7uo _80omtlke _bfhki8nm _irr3plhp _1di61gdz",
   disabled: "_syaz1gmx _80om13gf _bfhkby5v",
-  unauthorised: "_syaz15cr _80omtlke _bfhkjmqp _qrwqlb4i _1o0zlb4i _13lilb4i _mrkblb4i _ca0qt94y _n3tdt94y _2hwxt94y _k48pi7a9 _irr31q28 _1di612kk",
-  action: "_x3doia51 _1s7zia51 _n7zlia51 _syaz15cr _80omtlke _bfhkjmqp _qrwqlb4i _1o0zlb4i _13liidpf _mrkbidpf _2hwxv77o _k48pi7a9 _o5721q9c _4cvxq98m _irr31q28 _1di612kk"
+  unauthorised: "_syaz15cr _80omtlke _bfhkjmqp _qrwqlb4i _1o0zlb4i _13lilb4i _mrkblb4i _ca0qt94y _n3tdt94y _2hwxt94y _k48pi7a9 _irr31q28 _1di612kk"
 };
+
+/* eslint-enable @compiled/shorthand-property-sorting */
+
 /**
  * Action button has to be a span for the overflow to work correctly
  */
@@ -23,7 +27,21 @@ export var ActionButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
     isDisabled = _ref.isDisabled,
     _ref$viewType = _ref.viewType,
     viewType = _ref$viewType === void 0 ? 'default' : _ref$viewType,
+    _ref$isSocialProofInl = _ref.isSocialProofInlineUnauthorisedConnect,
+    isSocialProofInlineUnauthorisedConnect = _ref$isSocialProofInl === void 0 ? false : _ref$isSocialProofInl,
     props = _objectWithoutProperties(_ref, _excluded);
+  var shouldUseSocialProofConnect = isSocialProofInlineUnauthorisedConnect && viewType === 'unauthorised' && fg('platform_sl_3p_preauth_soc_proof_inline_killswitch');
+  if (shouldUseSocialProofConnect && !isDisabled) {
+    return /*#__PURE__*/React.createElement(Pressable, _extends({}, props, {
+      ref: ref,
+      style: {
+        font: "inherit"
+      },
+      xcss: styles.button
+    }), /*#__PURE__*/React.createElement("span", {
+      className: ax([styles.innerContainerSocialProofConnect])
+    }, children));
+  }
   return /*#__PURE__*/React.createElement(Pressable, _extends({}, props, {
     isDisabled: isDisabled,
     ref: ref

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

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