@atlaskit/smart-card 43.0.0 → 43.0.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/smart-card
 
+## 43.0.1
+
+### Patch Changes
+
+- [`27d1948b0874f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/27d1948b0874f) -
+  [ux] @atlaskit/smart-card: Added experiment variation coloring for the inline smartlink connect
+  button. @atlaskit/tmp-editor-statsig: Added experiment gate to test config and overrides setup
+- Updated dependencies
+
 ## 43.0.0
 
 ### Major Changes

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

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

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

@@ -54,6 +54,7 @@ var InlineCardUnauthorizedView = exports.InlineCardUnauthorizedView = function I
   var renderActionButton = _react.default.useCallback(function () {
     return /*#__PURE__*/_react.default.createElement(_actionButton.ActionButton, {
       onClick: handleConnectAccount,
+      viewType: 'unauthorised',
       testId: "button-connect-account"
     }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages.connect_link_account_card_name, {
       values: {

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

@@ -3,18 +3,27 @@
 ._1e0c1bgi{display:contents}
 ._1e0c1nu9{display:inline}
 ._1nmz9jpi{word-break:break-all}
+._1o0zlb4i{border-bottom-right-radius:var(--ds-radius-xsmall,2px)}
 ._1y1m1u8q{background-clip:padding-box}
 ._80om13gf{cursor:not-allowed}
 ._80omtlke{cursor:pointer}
+._bfhk1fvw{background-color:var(--ds-background-selected-bold,#0c66e4)}
+._bfhk1t1b{background-color:var(--ds-background-accent-gray-bolder,#626f86)}
 ._bfhkm7j4{background-color:var(--ds-background-neutral,#091e420f)}
 ._bfhksyzs{background-color:var(--ds-background-disabled,#091e4208)}
 ._ca0qv77o{padding-top:var(--ds-space-025,2px)}
 ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
 ._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
 ._o5721btx{white-space:break-spaces}
+._qrwqlb4i{border-top-right-radius:var(--ds-radius-xsmall,2px)}
+._syaz15cr{color:var(--ds-text-inverse,#fff)}
 ._syaz1fxt{color:var(--ds-text,#172b4d)}
 ._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
 ._u5f312x7{padding-right:var(--ds-space-075,6px)}
 ._y3gn18uv{text-align:initial}
 ._irr315ej:hover{background-color:var(--ds-background-neutral-hovered,#091e4224)}
+._irr318hz:hover{background-color:var(--ds-background-selected-bold-hovered,#05c)}
+._irr3e4nv:hover{background-color:var(--ds-background-accent-gray-bolder-hovered,#44546f)}
+._1di682ra:active{background-color:var(--ds-background-accent-gray-bolder-pressed,#2c3e5d)}
+._1di6gr1v:active{background-color:var(--ds-background-selected-bold-pressed,#09326c)}
 ._1di6ip91:active{background-color:var(--ds-background-neutral-pressed,#091e424f)}

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

@@ -14,7 +14,8 @@ var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _compiled = require("@atlaskit/primitives/compiled");
-var _excluded = ["children", "isDisabled"];
+var _expVal = require("@atlaskit/tmp-editor-statsig/expVal");
+var _excluded = ["children", "isDisabled", "viewType"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
   button: "_1e0c1bgi",
@@ -22,13 +23,21 @@ var styles = {
   enabled: "_syaz1fxt _80omtlke _bfhkm7j4 _irr315ej _1di6ip91",
   disabled: "_syaz1lh4 _80om13gf _bfhksyzs"
 };
+var experimentEnabledStyles = {
+  control: "_syaz1fxt _80omtlke _bfhkm7j4 _irr315ej _1di6ip91",
+  test1: "_syaz15cr _80omtlke _bfhk1fvw _qrwqlb4i _1o0zlb4i _irr318hz _1di6gr1v",
+  test2: "_syaz15cr _80omtlke _bfhk1t1b _qrwqlb4i _1o0zlb4i _irr3e4nv _1di682ra"
+};
 /**
  * Action button has to be a span for the overflow to work correctly
  */
 var ActionButton = exports.ActionButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
     isDisabled = _ref.isDisabled,
+    _ref$viewType = _ref.viewType,
+    viewType = _ref$viewType === void 0 ? 'default' : _ref$viewType,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var experimentValue = viewType === 'unauthorised' ? (0, _expVal.expVal)('platform_inline_smartcard_connect_button_exp', 'cohort', 'control') : 'control';
   return /*#__PURE__*/React.createElement(_compiled.Pressable, (0, _extends2.default)({}, props, {
     isDisabled: isDisabled,
     ref: ref
@@ -41,6 +50,6 @@ var ActionButton = exports.ActionButton = /*#__PURE__*/(0, _react.forwardRef)(fu
     xcss: styles.button
   }), /*#__PURE__*/React.createElement("span", {
     tabIndex: isDisabled ? undefined : 0,
-    className: (0, _runtime.ax)([styles.innerContainer, isDisabled ? styles.disabled : styles.enabled])
+    className: (0, _runtime.ax)([styles.innerContainer, isDisabled ? styles.disabled : experimentValue !== 'control' ? experimentEnabledStyles[experimentValue] : styles.enabled])
   }, children));
 });

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

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

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

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

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

@@ -47,6 +47,7 @@ export const InlineCardUnauthorizedView = ({
   const renderActionButton = React.useCallback(() => {
     return /*#__PURE__*/React.createElement(ActionButton, {
       onClick: handleConnectAccount,
+      viewType: 'unauthorised',
       testId: "button-connect-account"
     }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_link_account_card_name, {
       values: {

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

@@ -3,18 +3,27 @@
 ._1e0c1bgi{display:contents}
 ._1e0c1nu9{display:inline}
 ._1nmz9jpi{word-break:break-all}
+._1o0zlb4i{border-bottom-right-radius:var(--ds-radius-xsmall,2px)}
 ._1y1m1u8q{background-clip:padding-box}
 ._80om13gf{cursor:not-allowed}
 ._80omtlke{cursor:pointer}
+._bfhk1fvw{background-color:var(--ds-background-selected-bold,#0c66e4)}
+._bfhk1t1b{background-color:var(--ds-background-accent-gray-bolder,#626f86)}
 ._bfhkm7j4{background-color:var(--ds-background-neutral,#091e420f)}
 ._bfhksyzs{background-color:var(--ds-background-disabled,#091e4208)}
 ._ca0qv77o{padding-top:var(--ds-space-025,2px)}
 ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
 ._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
 ._o5721btx{white-space:break-spaces}
+._qrwqlb4i{border-top-right-radius:var(--ds-radius-xsmall,2px)}
+._syaz15cr{color:var(--ds-text-inverse,#fff)}
 ._syaz1fxt{color:var(--ds-text,#172b4d)}
 ._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
 ._u5f312x7{padding-right:var(--ds-space-075,6px)}
 ._y3gn18uv{text-align:initial}
 ._irr315ej:hover{background-color:var(--ds-background-neutral-hovered,#091e4224)}
+._irr318hz:hover{background-color:var(--ds-background-selected-bold-hovered,#05c)}
+._irr3e4nv:hover{background-color:var(--ds-background-accent-gray-bolder-hovered,#44546f)}
+._1di682ra:active{background-color:var(--ds-background-accent-gray-bolder-pressed,#2c3e5d)}
+._1di6gr1v:active{background-color:var(--ds-background-selected-bold-pressed,#09326c)}
 ._1di6ip91:active{background-color:var(--ds-background-neutral-pressed,#091e424f)}

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

@@ -5,20 +5,28 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef } from 'react';
 import { Pressable } from '@atlaskit/primitives/compiled';
+import { expVal } from '@atlaskit/tmp-editor-statsig/expVal';
 const styles = {
   button: "_1e0c1bgi",
   innerContainer: "_1e0c1nu9 _1y1m1u8q _16d9qvcn _k48p1wq8 _19bv12x7 _ca0qv77o _n3tdv77o _u5f312x7 _y3gn18uv _o5721btx _1nmz9jpi",
   enabled: "_syaz1fxt _80omtlke _bfhkm7j4 _irr315ej _1di6ip91",
   disabled: "_syaz1lh4 _80om13gf _bfhksyzs"
 };
+const experimentEnabledStyles = {
+  control: "_syaz1fxt _80omtlke _bfhkm7j4 _irr315ej _1di6ip91",
+  test1: "_syaz15cr _80omtlke _bfhk1fvw _qrwqlb4i _1o0zlb4i _irr318hz _1di6gr1v",
+  test2: "_syaz15cr _80omtlke _bfhk1t1b _qrwqlb4i _1o0zlb4i _irr3e4nv _1di682ra"
+};
 /**
  * Action button has to be a span for the overflow to work correctly
  */
 export const ActionButton = /*#__PURE__*/forwardRef(({
   children,
   isDisabled,
+  viewType = 'default',
   ...props
 }, ref) => {
+  const experimentValue = viewType === 'unauthorised' ? expVal('platform_inline_smartcard_connect_button_exp', 'cohort', 'control') : 'control';
   return /*#__PURE__*/React.createElement(Pressable, _extends({}, props, {
     isDisabled: isDisabled,
     ref: ref
@@ -31,6 +39,6 @@ export const ActionButton = /*#__PURE__*/forwardRef(({
     xcss: styles.button
   }), /*#__PURE__*/React.createElement("span", {
     tabIndex: isDisabled ? undefined : 0,
-    className: ax([styles.innerContainer, isDisabled ? styles.disabled : styles.enabled])
+    className: ax([styles.innerContainer, isDisabled ? styles.disabled : experimentValue !== 'control' ? experimentEnabledStyles[experimentValue] : styles.enabled])
   }, children));
 });

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

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

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

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

@@ -47,6 +47,7 @@ export var InlineCardUnauthorizedView = function InlineCardUnauthorizedView(_ref
   var renderActionButton = React.useCallback(function () {
     return /*#__PURE__*/React.createElement(ActionButton, {
       onClick: handleConnectAccount,
+      viewType: 'unauthorised',
       testId: "button-connect-account"
     }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_link_account_card_name, {
       values: {

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

@@ -3,18 +3,27 @@
 ._1e0c1bgi{display:contents}
 ._1e0c1nu9{display:inline}
 ._1nmz9jpi{word-break:break-all}
+._1o0zlb4i{border-bottom-right-radius:var(--ds-radius-xsmall,2px)}
 ._1y1m1u8q{background-clip:padding-box}
 ._80om13gf{cursor:not-allowed}
 ._80omtlke{cursor:pointer}
+._bfhk1fvw{background-color:var(--ds-background-selected-bold,#0c66e4)}
+._bfhk1t1b{background-color:var(--ds-background-accent-gray-bolder,#626f86)}
 ._bfhkm7j4{background-color:var(--ds-background-neutral,#091e420f)}
 ._bfhksyzs{background-color:var(--ds-background-disabled,#091e4208)}
 ._ca0qv77o{padding-top:var(--ds-space-025,2px)}
 ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
 ._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
 ._o5721btx{white-space:break-spaces}
+._qrwqlb4i{border-top-right-radius:var(--ds-radius-xsmall,2px)}
+._syaz15cr{color:var(--ds-text-inverse,#fff)}
 ._syaz1fxt{color:var(--ds-text,#172b4d)}
 ._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
 ._u5f312x7{padding-right:var(--ds-space-075,6px)}
 ._y3gn18uv{text-align:initial}
 ._irr315ej:hover{background-color:var(--ds-background-neutral-hovered,#091e4224)}
+._irr318hz:hover{background-color:var(--ds-background-selected-bold-hovered,#05c)}
+._irr3e4nv:hover{background-color:var(--ds-background-accent-gray-bolder-hovered,#44546f)}
+._1di682ra:active{background-color:var(--ds-background-accent-gray-bolder-pressed,#2c3e5d)}
+._1di6gr1v:active{background-color:var(--ds-background-selected-bold-pressed,#09326c)}
 ._1di6ip91:active{background-color:var(--ds-background-neutral-pressed,#091e424f)}

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

@@ -1,25 +1,34 @@
 /* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "isDisabled"];
+var _excluded = ["children", "isDisabled", "viewType"];
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef } from 'react';
 import { Pressable } from '@atlaskit/primitives/compiled';
+import { expVal } from '@atlaskit/tmp-editor-statsig/expVal';
 var styles = {
   button: "_1e0c1bgi",
   innerContainer: "_1e0c1nu9 _1y1m1u8q _16d9qvcn _k48p1wq8 _19bv12x7 _ca0qv77o _n3tdv77o _u5f312x7 _y3gn18uv _o5721btx _1nmz9jpi",
   enabled: "_syaz1fxt _80omtlke _bfhkm7j4 _irr315ej _1di6ip91",
   disabled: "_syaz1lh4 _80om13gf _bfhksyzs"
 };
+var experimentEnabledStyles = {
+  control: "_syaz1fxt _80omtlke _bfhkm7j4 _irr315ej _1di6ip91",
+  test1: "_syaz15cr _80omtlke _bfhk1fvw _qrwqlb4i _1o0zlb4i _irr318hz _1di6gr1v",
+  test2: "_syaz15cr _80omtlke _bfhk1t1b _qrwqlb4i _1o0zlb4i _irr3e4nv _1di682ra"
+};
 /**
  * Action button has to be a span for the overflow to work correctly
  */
 export var ActionButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     isDisabled = _ref.isDisabled,
+    _ref$viewType = _ref.viewType,
+    viewType = _ref$viewType === void 0 ? 'default' : _ref$viewType,
     props = _objectWithoutProperties(_ref, _excluded);
+  var experimentValue = viewType === 'unauthorised' ? expVal('platform_inline_smartcard_connect_button_exp', 'cohort', 'control') : 'control';
   return /*#__PURE__*/React.createElement(Pressable, _extends({}, props, {
     isDisabled: isDisabled,
     ref: ref
@@ -32,6 +41,6 @@ export var ActionButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
     xcss: styles.button
   }), /*#__PURE__*/React.createElement("span", {
     tabIndex: isDisabled ? undefined : 0,
-    className: ax([styles.innerContainer, isDisabled ? styles.disabled : styles.enabled])
+    className: ax([styles.innerContainer, isDisabled ? styles.disabled : experimentValue !== 'control' ? experimentEnabledStyles[experimentValue] : styles.enabled])
   }, children));
 });

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

package/dist/types/view/InlineCard/common/action-button/index.d.ts

@@ -1,4 +1,14 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ComponentPropsWithRef } from 'react';
+import { Pressable } from '@atlaskit/primitives/compiled';
+type ActionButtonProps = ComponentPropsWithRef<typeof Pressable> & {
+    viewType?: 'default' | 'unauthorised';
+};
 /**
  * Action button has to be a span for the overflow to work correctly
  */
-export declare const ActionButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("@atlaskit/primitives/compiled").PressableProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const ActionButton: import("react").ForwardRefExoticComponent<Omit<ActionButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/types-ts4.5/view/InlineCard/common/action-button/index.d.ts

@@ -1,4 +1,14 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ComponentPropsWithRef } from 'react';
+import { Pressable } from '@atlaskit/primitives/compiled';
+type ActionButtonProps = ComponentPropsWithRef<typeof Pressable> & {
+    viewType?: 'default' | 'unauthorised';
+};
 /**
  * Action button has to be a span for the overflow to work correctly
  */
-export declare const ActionButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("@atlaskit/primitives/compiled").PressableProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const ActionButton: import("react").ForwardRefExoticComponent<Omit<ActionButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "43.0.0",
+	"version": "43.0.1",
 	"description": "Smart card component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -56,7 +56,7 @@
 		"@atlaskit/link-test-helpers": "^8.4.0",
 		"@atlaskit/linking-common": "^9.7.0",
 		"@atlaskit/linking-types": "^14.0.0",
-		"@atlaskit/logo": "^19.8.0",
+		"@atlaskit/logo": "^19.9.0",
 		"@atlaskit/lozenge": "^13.0.0",
 		"@atlaskit/menu": "^8.4.0",
 		"@atlaskit/modal-dialog": "^14.4.0",
@@ -70,7 +70,7 @@
 		"@atlaskit/textarea": "^8.0.0",
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^13.2.0",
+		"@atlaskit/tmp-editor-statsig": "^13.3.0",
 		"@atlaskit/tokens": "^6.4.0",
 		"@atlaskit/tooltip": "^20.5.0",
 		"@atlaskit/ufo": "^0.4.0",