@spaced-out/ui-design-system 0.5.10 → 0.5.12-beta.0

package/lib/components/Icon/ClickableIcon.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.CloseIcon = exports.ClickableIcon = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
 var _Button = require("../Button");
 var _ = require("./");
 var _Text = require("../Text");
@@ -18,6 +19,7 @@ const ClickableIcon = exports.ClickableIcon = /*#__PURE__*/React.forwardRef((_re
     size = 'medium',
     ariaLabel,
     onClick,
+    testId,
     // Deprecated for Clickable Icon
     className,
     classNames,
@@ -43,11 +45,19 @@ const ClickableIcon = exports.ClickableIcon = /*#__PURE__*/React.forwardRef((_re
       [_ClickableIconModule.default.large]: size === 'large'
     }, classNames?.button),
     ref: ref,
+    testId: (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'button'
+    }),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Icon, {
       ...props,
       size: size,
       color: disabled ? _Text.TEXT_COLORS.disabled : props.color,
-      className: classNames?.icon || className
+      className: classNames?.icon || className,
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'icon'
+      })
     })
   });
 });
@@ -56,6 +66,7 @@ const CloseIcon = exports.CloseIcon = /*#__PURE__*/React.forwardRef((_ref2, ref)
     size = 'medium',
     type = 'regular',
     color = _Text.TEXT_COLORS.primary,
+    testId,
     ...props
   } = _ref2;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ClickableIcon, {
@@ -63,6 +74,7 @@ const CloseIcon = exports.CloseIcon = /*#__PURE__*/React.forwardRef((_ref2, ref)
     size: size,
     type: type,
     color: color,
+    testId: testId,
     ...props,
     ref: ref
   });

package/lib/components/Icon/Icon.d.ts

@@ -26,6 +26,7 @@ export interface IconProps {
     style?: {
         [key: string]: string;
     };
+    testId?: string;
 }
 export declare const Icon: Flow.AbstractComponent<IconProps, HTMLDivElement>;
 //# sourceMappingURL=Icon.d.ts.map

package/lib/components/Icon/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAErD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAOrD,eAAO,MAAM,SAAS;;;;;EAKpB,CAAC;AAEH,eAAO,MAAM,SAAS;;;;EAIpB,CAAC;AAEH,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;AAC9C,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;AAE9C,MAAM,WAAW,SAAS;IACxB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE;QACN,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACvB,CAAC;CACH;AAED,eAAO,MAAM,IAAI,EAAE,IAAI,CAAC,iBAAiB,CAAC,SAAS,EAAE,cAAc,CAqChE,CAAC"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAErD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAQrD,eAAO,MAAM,SAAS;;;;;EAKpB,CAAC;AAEH,eAAO,MAAM,SAAS;;;;EAIpB,CAAC;AAEH,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;AAC9C,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;AAE9C,MAAM,WAAW,SAAS;IACxB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE;QACN,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACvB,CAAC;IACF,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,IAAI,EAAE,IAAI,CAAC,iBAAiB,CAAC,SAAS,EAAE,cAAc,CAuChE,CAAC"}

package/lib/components/Icon/Icon.docs.d.ts

@@ -118,6 +118,17 @@ export declare const ICON_DOCS: {
                 };
             };
         };
+        readonly testId: {
+            readonly description: "Test ID for the component";
+            readonly control: {
+                readonly type: "text";
+            };
+            readonly table: {
+                readonly type: {
+                    readonly summary: "string";
+                };
+            };
+        };
     };
     readonly parameters: {
         readonly docs: {

package/lib/components/Icon/Icon.docs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.docs.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.docs.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6GZ,CAAC"}
+{"version":3,"file":"Icon.docs.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.docs.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsHZ,CAAC"}

package/lib/components/Icon/Icon.docs.js

@@ -127,6 +127,17 @@ const ICON_DOCS = exports.ICON_DOCS = {
           summary: 'string'
         }
       }
+    },
+    testId: {
+      description: 'Test ID for the component',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
     }
   },
   parameters: {

package/lib/components/Icon/Icon.js

@@ -7,6 +7,7 @@ exports.Icon = exports.ICON_TYPE = exports.ICON_SIZE = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _typography = require("../../types/typography");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
 var _typographyModule = _interopRequireDefault(require("../../styles/typography.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -31,10 +32,15 @@ const Icon = exports.Icon = /*#__PURE__*/React.forwardRef((_ref, forwardRef) =>
     className,
     style,
     onClick,
-    swapOpacity
+    swapOpacity,
+    testId = 'icon'
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: !!name && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'icon'
+      }),
       className: (0, _classify.default)(_typographyModule.default.centerAlignFlex, _typographyModule.default[`${size}Icon`], _typographyModule.default[color], className),
       onClick: onClick,
       ref: forwardRef,

package/lib/components/Icon/SemanticIcon.d.ts

@@ -9,7 +9,8 @@ export interface SemanticIconProps extends Omit<IconProps, 'classNames' | 'seman
     classNames?: ClassNames;
     semantic?: AlertSemanticType;
     disabled?: boolean;
+    testId?: string;
 }
-export declare const SemanticIcon: ({ semantic, classNames, size, ...iconProps }: SemanticIconProps) => React.JSX.Element;
+export declare const SemanticIcon: ({ semantic, classNames, size, testId, ...iconProps }: SemanticIconProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=SemanticIcon.d.ts.map

package/lib/components/Icon/SemanticIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SemanticIcon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/SemanticIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,kBAAkB,CAAC;AAIxD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,0BAA0B,CAAC;AAMxD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAEH,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,SAAS,EAAE,YAAY,GAAG,UAAU,GAAG,UAAU,CAAC;IAC/D,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,GAAI,8CAK1B,iBAAiB,sBAuBnB,CAAC"}
+{"version":3,"file":"SemanticIcon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/SemanticIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,kBAAkB,CAAC;AAKxD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,0BAA0B,CAAC;AAMxD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAEH,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,SAAS,EAAE,YAAY,GAAG,UAAU,GAAG,UAAU,CAAC;IAC/D,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,YAAY,GAAI,sDAM1B,iBAAiB,sBAyBnB,CAAC"}

package/lib/components/Icon/SemanticIcon.js

@@ -7,6 +7,7 @@ exports.SemanticIcon = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _typography = require("../../types/typography");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
 var _Icon = require("./Icon");
 var _SemanticIconModule = _interopRequireDefault(require("./SemanticIcon.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -17,10 +18,15 @@ const SemanticIcon = _ref => {
     semantic = 'neutral',
     classNames,
     size = 'medium',
+    testId,
     ...iconProps
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: !!iconProps.name && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'wrapper'
+      }),
       className: (0, _classify.default)(_SemanticIconModule.default.iconContainer, _SemanticIconModule.default[semantic], _SemanticIconModule.default[size], classNames?.wrapper, {
         [_SemanticIconModule.default.disabled]: iconProps.disabled
       }),
@@ -28,7 +34,11 @@ const SemanticIcon = _ref => {
         ...iconProps,
         className: (0, _classify.default)(iconProps.className, classNames?.icon),
         color: iconProps.disabled ? 'disabled' : _typography.TEXT_COLORS[semantic],
-        size: size === 'large' ? 'medium' : size
+        size: size === 'large' ? 'medium' : size,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'icon'
+        })
       })
     })
   });

package/lib/components/InContextAlert/InContextAlert.d.ts

@@ -12,6 +12,7 @@ type ClassNames = Readonly<{
 }>;
 type InContextAlertBaseProps = {
     classNames?: ClassNames;
+    testId?: string;
 } & ({
     dismissable?: true;
     onCloseClick?: (e: React.SyntheticEvent<HTMLElement>) => unknown;
@@ -31,11 +32,12 @@ export interface InContextAlertProps extends Omit<InContextAlertBaseProps, 'sema
     leftIconName?: string;
     leftIconType?: IconType;
 }
-export declare const AlertIcon: ({ semantic, leftIconName, leftIconType, iconClassName, }: {
+export declare const AlertIcon: ({ semantic, leftIconName, leftIconType, iconClassName, testId, }: {
     semantic: AlertSemanticType;
     leftIconName: string;
     leftIconType?: IconType;
     iconClassName?: string;
+    testId?: string;
 }) => React.JSX.Element;
 export declare const InContextAlert: Flow.AbstractComponent<InContextAlertProps, HTMLDivElement>;
 export {};

package/lib/components/InContextAlert/InContextAlert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InContextAlert.d.ts","sourceRoot":"","sources":["../../../src/components/InContextAlert/InContextAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAErD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,kBAAkB,CAAC;AAExD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAIrD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AASlD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC,CAAC;AAEH,KAAK,uBAAuB,GAAG;IAC7B,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,GAAG,CACA;IACE,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,OAAO,CAAC;IACjE,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,GACD;IACE,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB,CACJ,GAAG;IACA,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACtD,eAAe,CAAC,EAAE,UAAU,CAAC;CAC9B,CAAC;AAEJ,MAAM,WAAW,mBACf,SAAQ,IAAI,CACV,uBAAuB,EACvB,UAAU,GAAG,cAAc,GAAG,cAAc,CAC7C;IACD,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,QAAQ,CAAC;CACzB;AAED,eAAO,MAAM,SAAS,GAAI,0DAKvB;IACD,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,QAAQ,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,sBAmEA,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,IAAI,CAAC,iBAAiB,CACjD,mBAAmB,EACnB,cAAc,CAsGf,CAAC"}
+{"version":3,"file":"InContextAlert.d.ts","sourceRoot":"","sources":["../../../src/components/InContextAlert/InContextAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAErD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,kBAAkB,CAAC;AAExD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAKrD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AASlD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC,CAAC;AAEH,KAAK,uBAAuB,GAAG;IAC7B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,CACA;IACE,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,OAAO,CAAC;IACjE,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,GACD;IACE,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB,CACJ,GAAG;IACA,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACtD,eAAe,CAAC,EAAE,UAAU,CAAC;CAC9B,CAAC;AAEJ,MAAM,WAAW,mBACf,SAAQ,IAAI,CACV,uBAAuB,EACvB,UAAU,GAAG,cAAc,GAAG,cAAc,CAC7C;IACD,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,QAAQ,CAAC;CACzB;AAED,eAAO,MAAM,SAAS,GAAI,kEAMvB;IACD,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,QAAQ,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,sBAyEA,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,IAAI,CAAC,iBAAiB,CACjD,mBAAmB,EACnB,cAAc,CAmHf,CAAC"}

package/lib/components/InContextAlert/InContextAlert.js

@@ -8,6 +8,7 @@ var React = _interopRequireWildcard(require("react"));
 var _common = require("../../types/common");
 var _typography = require("../../types/typography");
 var _classify = require("../../utils/classify");
+var _qa = require("../../utils/qa");
 var _Icon = require("../Icon");
 var _Link = require("../Link");
 var _Text = require("../Text");
@@ -21,7 +22,8 @@ const AlertIcon = _ref => {
     semantic,
     leftIconName,
     leftIconType,
-    iconClassName
+    iconClassName,
+    testId
   } = _ref;
   switch (semantic) {
     case _common.ALERT_SEMANTIC.neutral:
@@ -30,7 +32,11 @@ const AlertIcon = _ref => {
         name: leftIconName ? leftIconName : 'face-smile',
         size: "small",
         type: leftIconType,
-        className: iconClassName
+        className: iconClassName,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'icon'
+        })
       });
     case _common.ALERT_SEMANTIC.success:
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
@@ -38,7 +44,11 @@ const AlertIcon = _ref => {
         size: "small",
         color: _typography.TEXT_COLORS.success,
         type: leftIconType,
-        className: iconClassName
+        className: iconClassName,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'icon'
+        })
       });
     case _common.ALERT_SEMANTIC.information:
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
@@ -46,7 +56,11 @@ const AlertIcon = _ref => {
         size: "small",
         color: _typography.TEXT_COLORS.information,
         type: leftIconType,
-        className: iconClassName
+        className: iconClassName,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'icon'
+        })
       });
     case _common.ALERT_SEMANTIC.warning:
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
@@ -54,7 +68,11 @@ const AlertIcon = _ref => {
         size: "small",
         color: _typography.TEXT_COLORS.warning,
         type: leftIconType,
-        className: iconClassName
+        className: iconClassName,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'icon'
+        })
       });
     case _common.ALERT_SEMANTIC.danger:
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
@@ -62,7 +80,11 @@ const AlertIcon = _ref => {
         size: "small",
         color: _typography.TEXT_COLORS.danger,
         type: leftIconType,
-        className: iconClassName
+        className: iconClassName,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'icon'
+        })
       });
     default:
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
@@ -70,7 +92,11 @@ const AlertIcon = _ref => {
         name: leftIconName ? leftIconName : 'face-smile',
         size: "small",
         type: leftIconType,
-        className: iconClassName
+        className: iconClassName,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'icon'
+        })
       });
   }
 };
@@ -85,7 +111,8 @@ const InContextAlert = exports.InContextAlert = /*#__PURE__*/React.forwardRef((p
     actionText = '',
     actionTextColor = _typography.TEXT_COLORS.primary,
     onAction,
-    leftIconType
+    leftIconType,
+    testId
   } = props;
 
   // Type narrowing to safely access properties only when they exist
@@ -108,23 +135,40 @@ const InContextAlert = exports.InContextAlert = /*#__PURE__*/React.forwardRef((p
         [_InContextAlertModule.default.danger]: semantic === _common.ALERT_SEMANTIC.danger
       }, classNames?.wrapper),
       ref: ref,
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'wrapper'
+      }),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AlertIcon, {
         semantic: semantic,
         leftIconName: leftIconName,
         leftIconType: leftIconType,
-        iconClassName: classNames?.icon
+        iconClassName: classNames?.icon,
+        testId: testId
       }), React.Children.count(children) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.SubTitleExtraSmall, {
         className: (0, _classify.classify)(classNames?.alertText),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Truncate.Truncate, {
           line: 2,
           wordBreak: "initial",
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'text'
+          }),
           children: children
         })
       }), !!(actionText || dismissable) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: (0, _classify.classify)(_InContextAlertModule.default.actionContainer, classNames?.actionContainer),
+        "data-testid": (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'actions'
+        }),
         children: [!!actionText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.Link, {
           onClick: onAction,
           color: actionTextColor,
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'action-link'
+          }),
           children: actionText
         }), !!dismissable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.ClickableIcon, {
           color: _typography.TEXT_COLORS.primary,
@@ -133,7 +177,11 @@ const InContextAlert = exports.InContextAlert = /*#__PURE__*/React.forwardRef((p
           size: "small",
           type: "regular",
           onClick: closeClickHandler,
-          className: _InContextAlertModule.default.closeIcon
+          className: _InContextAlertModule.default.closeIcon,
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'close-button'
+          })
         })]
       })]
     })

package/lib/components/InContextAlertWithMultipleActions/InContextAlertWithMultipleActions.d.ts

@@ -7,6 +7,7 @@ export interface InContextAlertWithMultipleActionsProps extends Omit<InContextAl
     secondaryActionText?: string;
     onSecondaryAction?: React.MouseEventHandler<HTMLAnchorElement>;
     secondaryActionTextColor?: ColorTypes;
+    testId?: string;
 }
 export declare const InContextAlertWithMultipleActions: Flow.AbstractComponent<InContextAlertWithMultipleActionsProps, HTMLDivElement>;
 //# sourceMappingURL=InContextAlertWithMultipleActions.d.ts.map

package/lib/components/InContextAlertWithMultipleActions/InContextAlertWithMultipleActions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InContextAlertWithMultipleActions.d.ts","sourceRoot":"","sources":["../../../src/components/InContextAlertWithMultipleActions/InContextAlertWithMultipleActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAGrD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAKrD,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,+BAA+B,CAAC;AAQvE,MAAM,WAAW,sCACf,SAAQ,IAAI,CACV,mBAAmB,EACjB,QAAQ,GACR,qBAAqB,GACrB,mBAAmB,GACnB,0BAA0B,CAC7B;IACD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,iBAAiB,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/D,wBAAwB,CAAC,EAAE,UAAU,CAAC;CACvC;AAED,eAAO,MAAM,iCAAiC,EAAE,IAAI,CAAC,iBAAiB,CACpE,sCAAsC,EACtC,cAAc,CAiHf,CAAC"}
+{"version":3,"file":"InContextAlertWithMultipleActions.d.ts","sourceRoot":"","sources":["../../../src/components/InContextAlertWithMultipleActions/InContextAlertWithMultipleActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAGrD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAMrD,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,+BAA+B,CAAC;AAQvE,MAAM,WAAW,sCACf,SAAQ,IAAI,CACV,mBAAmB,EACjB,QAAQ,GACR,qBAAqB,GACrB,mBAAmB,GACnB,0BAA0B,CAC7B;IACD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,iBAAiB,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/D,wBAAwB,CAAC,EAAE,UAAU,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,iCAAiC,EAAE,IAAI,CAAC,iBAAiB,CACpE,sCAAsC,EACtC,cAAc,CAkIf,CAAC"}

package/lib/components/InContextAlertWithMultipleActions/InContextAlertWithMultipleActions.js

@@ -8,6 +8,7 @@ var React = _interopRequireWildcard(require("react"));
 var _common = require("../../types/common");
 var _typography = require("../../types/typography");
 var _classify = require("../../utils/classify");
+var _qa = require("../../utils/qa");
 var _Icon = require("../Icon");
 var _InContextAlert = require("../InContextAlert");
 var _Link = require("../Link");
@@ -30,7 +31,8 @@ const InContextAlertWithMultipleActions = exports.InContextAlertWithMultipleActi
     secondaryActionText = '',
     onSecondaryAction,
     secondaryActionTextColor = _typography.TEXT_COLORS.primary,
-    leftIconType
+    leftIconType,
+    testId
   } = props;
   // Type narrowing to safely access selfDismiss only when dismissable is true
   const selfDismiss = dismissable === true && 'selfDismiss' in props ? props.selfDismiss : false;
@@ -52,25 +54,46 @@ const InContextAlertWithMultipleActions = exports.InContextAlertWithMultipleActi
         [_InContextAlertWithMultipleActionsModule.default.danger]: semantic === _common.ALERT_SEMANTIC.danger
       }, classNames?.wrapper),
       ref: ref,
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'wrapper'
+      }),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_InContextAlert.AlertIcon, {
         semantic: semantic,
         leftIconName: leftIconName,
         leftIconType: leftIconType,
-        iconClassName: classNames?.icon
+        iconClassName: classNames?.icon,
+        testId: testId
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: (0, _classify.classify)(_InContextAlertWithMultipleActionsModule.default.contentContainer, inline ? _InContextAlertWithMultipleActionsModule.default.contentContainerRow : _InContextAlertWithMultipleActionsModule.default.contentContainerColumn, classNames?.contentContainer),
+        "data-testid": (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'content'
+        }),
         children: [React.Children.count(children) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.SubTitleExtraSmall, {
           className: (0, _classify.classify)(classNames?.alertText),
           children: children
         }), !!(actionText || secondaryActionText) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: (0, _classify.classify)(_InContextAlertWithMultipleActionsModule.default.actionContainer, classNames?.actionContainer),
+          "data-testid": (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'actions'
+          }),
           children: [!!actionText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.Link, {
             onClick: onAction,
             color: actionTextColor,
+            testId: (0, _qa.generateTestId)({
+              base: testId,
+              slot: 'primary-action'
+            }),
             children: actionText
           }), !!secondaryActionText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.Link, {
             onClick: onSecondaryAction,
             color: secondaryActionTextColor,
+            testId: (0, _qa.generateTestId)({
+              base: testId,
+              slot: 'secondary-action'
+            }),
             children: secondaryActionText
           })]
         })]
@@ -82,7 +105,11 @@ const InContextAlertWithMultipleActions = exports.InContextAlertWithMultipleActi
           size: "small",
           type: "regular",
           onClick: closeClickHandler,
-          className: _InContextAlertWithMultipleActionsModule.default.closeIcon
+          className: _InContextAlertWithMultipleActionsModule.default.closeIcon,
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'close-button'
+          })
         })
       })]
     })

package/lib/components/InfinitePagination/InfinitePagination.d.ts

@@ -13,6 +13,7 @@ export type InfinitePaginationProps = {
     getItemKey?: (item: GenericObject, index: number) => string | number;
     hasNextPage: boolean;
     loadMoreItems: () => Promise<void>;
+    testId?: string;
 } & ({
     itemSize: (index: number) => number;
     isVariableSizeList: true;

package/lib/components/InfinitePagination/InfinitePagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InfinitePagination.d.ts","sourceRoot":"","sources":["../../../src/components/InfinitePagination/InfinitePagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAQrD,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,sBAAsB,CAAC;AAKxD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAIH,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,UAAU,EAAE,CAAC,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACpE,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAC;IACrE,WAAW,EAAE,OAAO,CAAC;IACrB,aAAa,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CACpC,GAAG,CACA;IACE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,kBAAkB,EAAE,IAAI,CAAC;CAC1B,GACD;IACE,QAAQ,EAAE,MAAM,CAAC;IACjB,kBAAkB,CAAC,EAAE,KAAK,CAAC;CAC5B,CACJ,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,IAAI,CAAC,iBAAiB,CACrD,uBAAuB,EACvB,cAAc,CA4Ff,CAAC"}
+{"version":3,"file":"InfinitePagination.d.ts","sourceRoot":"","sources":["../../../src/components/InfinitePagination/InfinitePagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AASrD,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,sBAAsB,CAAC;AAKxD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAIH,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,UAAU,EAAE,CAAC,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACpE,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAC;IACrE,WAAW,EAAE,OAAO,CAAC;IACrB,aAAa,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,CACA;IACE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,kBAAkB,EAAE,IAAI,CAAC;CAC1B,GACD;IACE,QAAQ,EAAE,MAAM,CAAC;IACjB,kBAAkB,CAAC,EAAE,KAAK,CAAC;CAC5B,CACJ,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,IAAI,CAAC,iBAAiB,CACrD,uBAAuB,EACvB,cAAc,CAwGf,CAAC"}

package/lib/components/InfinitePagination/InfinitePagination.js

@@ -9,6 +9,7 @@ var _reactWindow = require("react-window");
 var _hooks = require("../../hooks");
 var _space = require("../../styles/variables/_space");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
 var _CircularLoader = require("../CircularLoader");
 var _InfinitePaginationModule = _interopRequireDefault(require("./InfinitePagination.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -26,7 +27,8 @@ const InfinitePagination = exports.InfinitePagination = /*#__PURE__*/React.forwa
     classNames,
     hasNextPage,
     loadMoreItems,
-    isVariableSizeList
+    isVariableSizeList,
+    testId
   } = props;
   const listRef = React.useRef(null);
   const itemsLength = items.length;
@@ -55,19 +57,34 @@ const InfinitePagination = exports.InfinitePagination = /*#__PURE__*/React.forwa
     return index === itemsLength ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       style: style,
       className: _InfinitePaginationModule.default.loader,
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'loader'
+      }),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularLoader.CircularLoader, {
-        size: "large"
+        size: "large",
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'loader-icon'
+        })
       })
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       style: style,
       className: _InfinitePaginationModule.default.listRow,
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: `item-${index}`
+      }),
       children: renderItem(items[index], index)
     });
   };
   const itemKey = React.useCallback(index => index === itemsLength ? 'loading-indicator' : getItemKey ? getItemKey(items[index], index) : index, [items, getItemKey]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ref: containerRef,
-    "data-testid": "InfinitePagination",
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'root'
+    }),
     className: (0, _classify.default)(_InfinitePaginationModule.default.wrapper, classNames?.wrapper),
     children: isVariableSizeList ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactWindow.VariableSizeList, {
       ref: listRef,

package/lib/components/InlineDropdown/InlineDropdown.d.ts

@@ -19,6 +19,7 @@ export interface InlineDropdownProps extends Omit<UnstyledButtonProps, 'classNam
     size?: 'medium' | 'small' | 'extraSmall';
     elevation?: ElevationType;
     clickAwayRef?: React.RefObject<ClickAwayRefType | null>;
+    testId?: string;
 }
 export declare const InlineDropdown: Flow.AbstractComponent<InlineDropdownProps, HTMLDivElement>;
 export {};

package/lib/components/InlineDropdown/InlineDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InlineDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/InlineDropdown/InlineDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAKrD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,sBAAsB,CAAC;AAI3D,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAE/D,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,+BAA+B,CAAC;AAE9D,OAAO,KAAK,EAAC,UAAU,EAAE,SAAS,EAAC,MAAM,qBAAqB,CAAC;AAE/D,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAO1D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC,CAAC;AAEH,MAAM,WAAW,mBACf,SAAQ,IAAI,CACV,mBAAmB,EACjB,YAAY,GACZ,MAAM,GACN,gBAAgB,GAChB,gBAAgB,GAChB,YAAY,GACZ,aAAa,GACb,MAAM,GACN,WAAW,GACX,cAAc,CACjB;IACD,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,cAAc,CAAC,EAAE,CACf,MAAM,EAAE,UAAU,EAClB,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,IAAI,GAAG,SAAS,KACxD,OAAO,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,OAAO,CAAC;IAC5B,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,YAAY,CAAC;IACzC,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;CACzD;AAED,eAAO,MAAM,cAAc,EAAE,IAAI,CAAC,iBAAiB,CACjD,mBAAmB,EACnB,cAAc,CAgIf,CAAC"}
+{"version":3,"file":"InlineDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/InlineDropdown/InlineDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAKrD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,sBAAsB,CAAC;AAK3D,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAE/D,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,+BAA+B,CAAC;AAE9D,OAAO,KAAK,EAAC,UAAU,EAAE,SAAS,EAAC,MAAM,qBAAqB,CAAC;AAE/D,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAO1D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC,CAAC;AAEH,MAAM,WAAW,mBACf,SAAQ,IAAI,CACV,mBAAmB,EACjB,YAAY,GACZ,MAAM,GACN,gBAAgB,GAChB,gBAAgB,GAChB,YAAY,GACZ,aAAa,GACb,MAAM,GACN,WAAW,GACX,cAAc,CACjB;IACD,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,cAAc,CAAC,EAAE,CACf,MAAM,EAAE,UAAU,EAClB,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,IAAI,GAAG,SAAS,KACxD,OAAO,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,OAAO,CAAC;IAC5B,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,YAAY,CAAC;IACzC,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,cAAc,EAAE,IAAI,CAAC,iBAAiB,CACjD,mBAAmB,EACnB,cAAc,CA0If,CAAC"}

package/lib/components/InlineDropdown/InlineDropdown.js

@@ -11,6 +11,7 @@ var _space = require("../../styles/variables/_space");
 var _classify = require("../../utils/classify");
 var _clickAway = require("../../utils/click-away");
 var _mergeRefs = require("../../utils/merge-refs");
+var _qa = require("../../utils/qa");
 var _Button = require("../Button");
 var _Icon = require("../Icon");
 var _Menu = require("../Menu");
@@ -33,6 +34,7 @@ const InlineDropdown = exports.InlineDropdown = /*#__PURE__*/React.forwardRef((_
     children,
     clickAwayRef,
     elevation = 'modal',
+    testId,
     ...restButtonProps
   } = _ref;
   const {
@@ -68,7 +70,10 @@ const InlineDropdown = exports.InlineDropdown = /*#__PURE__*/React.forwardRef((_
         triggerRef
       } = _ref2;
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        "data-testid": "InlineDropdown",
+        "data-testid": (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'root'
+        }),
         className: (0, _classify.classify)(_InlineDropdownModule.default.inlineDropdownContainer, classNames?.dropdownContainer),
         ref: ref,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.UnstyledButton, {
@@ -82,7 +87,15 @@ const InlineDropdown = exports.InlineDropdown = /*#__PURE__*/React.forwardRef((_
           className: (0, _classify.classify)(_InlineDropdownModule.default.inlineButton, {
             [_InlineDropdownModule.default.disabled]: disabled
           }, _InlineDropdownModule.default[size], classNames?.buttonWrapper),
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'button'
+          }),
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Truncate.Truncate, {
+            testId: (0, _qa.generateTestId)({
+              base: testId,
+              slot: 'text'
+            }),
             children: children
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
             name: isOpen ? 'caret-up' : 'caret-down',
@@ -90,6 +103,10 @@ const InlineDropdown = exports.InlineDropdown = /*#__PURE__*/React.forwardRef((_
             type: "solid",
             className: (0, _classify.classify)({
               [_InlineDropdownModule.default.disabled]: disabled
+            }),
+            testId: (0, _qa.generateTestId)({
+              base: testId,
+              slot: 'icon'
             })
           })]
         }), isOpen && menu && /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.FloatingPortal, {
@@ -100,6 +117,10 @@ const InlineDropdown = exports.InlineDropdown = /*#__PURE__*/React.forwardRef((_
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               className: _InlineDropdownModule.default.menuWrapper,
               ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
+              "data-testid": (0, _qa.generateTestId)({
+                base: testId,
+                slot: 'menu-wrapper'
+              }),
               style: {
                 display: 'flex',
                 position: strategy,
@@ -126,7 +147,11 @@ const InlineDropdown = exports.InlineDropdown = /*#__PURE__*/React.forwardRef((_
                   }
                 },
                 size: menu.size || 'medium',
-                onTabOut: clickAway
+                onTabOut: clickAway,
+                testId: (0, _qa.generateTestId)({
+                  base: testId,
+                  slot: 'menu'
+                })
               })
             })
           })