@spaced-out/ui-design-system 0.5.11 → 0.5.12

package/lib/components/FocusManagerWithArrowKeyNavigation/FocusManagerWithArrowKeyNavigation.js

@@ -7,6 +7,7 @@ exports.SkipElementFromNavigation = exports.FocusManagerWithArrowKeyNavigation =
 var React = _interopRequireWildcard(require("react"));
 var _react2 = require("@floating-ui/react");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
 var _FocusManagerWithArrowKeyNavigationModule = _interopRequireDefault(require("./FocusManagerWithArrowKeyNavigation.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -16,10 +17,15 @@ const SkipElementFromNavigation = exports.SkipElementFromNavigation = /*#__PURE_
   let {
     children,
     className,
+    testId,
     ...restProps
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ...restProps,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'skipElement'
+    }),
     className: className,
     tabIndex: -1,
     ref: ref,
@@ -43,6 +49,7 @@ const FocusManagerWithArrowKeyNavigation = props => {
     focusItemOnOpen = 'auto',
     loop = false,
     listReference,
+    testId,
     ...restFloatingFocusManagerProps
   } = props;
   const {
@@ -137,7 +144,10 @@ const FocusManagerWithArrowKeyNavigation = props => {
     ...restFloatingFocusManagerProps,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       ref: refs.setFloating,
-      "data-testid": "FocusManagerWithArrowKeyNavigation",
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'focusManager'
+      }),
       ...getFloatingProps(),
       className: (0, _classify.default)(_FocusManagerWithArrowKeyNavigationModule.default.wrapper, classNames?.wrapper),
       children: clonedChildren

package/lib/components/FormTitleWrapper/FormTitleWrapper.d.ts

@@ -15,6 +15,7 @@ export interface FormTitleWrapperProps {
     iconColor?: ColorTypes;
     title: React.ReactNode;
     rightSlot?: React.ReactNode;
+    testId?: string;
 }
 export declare const FormTitleWrapper: Flow.AbstractComponent<FormTitleWrapperProps, HTMLDivElement>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"FormTitleWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/FormTitleWrapper/FormTitleWrapper.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;AAGrD,OAAO,KAAK,EAAC,QAAQ,EAAE,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAM5D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,MAAM,WAAW,qBAAqB;IACpC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,eAAO,MAAM,gBAAgB,EAAE,IAAI,CAAC,iBAAiB,CACnD,qBAAqB,EACrB,cAAc,CAqCf,CAAC"}
+{"version":3,"file":"FormTitleWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/FormTitleWrapper/FormTitleWrapper.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;AAIrD,OAAO,KAAK,EAAC,QAAQ,EAAE,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAM5D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,MAAM,WAAW,qBAAqB;IACpC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,gBAAgB,EAAE,IAAI,CAAC,iBAAiB,CACnD,qBAAqB,EACrB,cAAc,CAoDf,CAAC"}

package/lib/components/FormTitleWrapper/FormTitleWrapper.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.FormTitleWrapper = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
 var _Icon = require("../Icon");
 var _FormTitleWrapperModule = _interopRequireDefault(require("./FormTitleWrapper.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -19,25 +20,45 @@ const FormTitleWrapper = exports.FormTitleWrapper = /*#__PURE__*/React.forwardRe
     iconSize = 'small',
     iconColor,
     title,
-    rightSlot
+    rightSlot,
+    testId
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     ref: ref,
-    "data-testid": "FormTitleWrapper",
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'root'
+    }),
     className: _FormTitleWrapperModule.default.container,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _classify.default)(_FormTitleWrapperModule.default.leftSection, classNames?.wrapper),
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'left'
+      }),
       children: [!!iconName && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
         type: iconType,
         name: iconName,
         size: iconSize,
-        color: iconColor
+        color: iconColor,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'icon'
+        })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: (0, _classify.default)(_FormTitleWrapperModule.default.componentHousing, classNames?.title),
+        "data-testid": (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'title'
+        }),
         children: title
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _classify.default)(_FormTitleWrapperModule.default.rightSection, classNames?.rightSlot),
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'right'
+      }),
       children: rightSlot
     })]
   });

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

@@ -10,6 +10,7 @@ export interface ClickableIconProps extends Omit<IconProps, 'disabled' | 'classN
     disabled?: boolean;
     classNames?: ClassNames;
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    testId?: string;
 }
 export declare const ClickableIcon: Flow.AbstractComponent<ClickableIconProps, HTMLButtonElement>;
 export interface CloseIconProps {
@@ -21,6 +22,7 @@ export interface CloseIconProps {
     ariaLabel?: string;
     disabled?: boolean;
     classNames?: ClassNames;
+    testId?: string;
 }
 export declare const CloseIcon: Flow.AbstractComponent<CloseIconProps, HTMLButtonElement>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"ClickableIcon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/ClickableIcon.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;AAIrD,OAAO,KAAK,EAAC,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAOvE,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC,CAAC;AAEH,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,YAAY,GAAG,SAAS,CAAC;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CACtD;AAED,eAAO,MAAM,aAAa,EAAE,IAAI,CAAC,iBAAiB,CAChD,kBAAkB,EAClB,iBAAiB,CAmDlB,CAAC;AAEF,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAED,eAAO,MAAM,SAAS,EAAE,IAAI,CAAC,iBAAiB,CAC5C,cAAc,EACd,iBAAiB,CAoBlB,CAAC"}
+{"version":3,"file":"ClickableIcon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/ClickableIcon.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;AAKrD,OAAO,KAAK,EAAC,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAOvE,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC,CAAC;AAEH,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,YAAY,GAAG,SAAS,CAAC;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACrD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,aAAa,EAAE,IAAI,CAAC,iBAAiB,CAChD,kBAAkB,EAClB,iBAAiB,CAsDlB,CAAC;AAEF,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,SAAS,EAAE,IAAI,CAAC,iBAAiB,CAC5C,cAAc,EACd,iBAAiB,CAsBlB,CAAC"}

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.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/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/KPIBox/KPIBox.d.ts

@@ -18,6 +18,7 @@ export interface KPIBoxProps {
     iconName?: string;
     iconSize?: IconSize;
     iconType?: IconType;
+    testId?: string;
 }
 export declare const KPIBox: Flow.AbstractComponent<KPIBoxProps, HTMLDivElement>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"KPIBox.d.ts","sourceRoot":"","sources":["../../../src/components/KPIBox/KPIBox.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;AAGxD,OAAO,KAAK,EAAC,QAAQ,EAAE,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAM5D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC,CAAC;AAEH,MAAM,WAAW,WAAW;IAC1B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB;AAED,eAAO,MAAM,MAAM,EAAE,IAAI,CAAC,iBAAiB,CAAC,WAAW,EAAE,cAAc,CAiEpE,CAAC"}
+{"version":3,"file":"KPIBox.d.ts","sourceRoot":"","sources":["../../../src/components/KPIBox/KPIBox.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;AAIxD,OAAO,KAAK,EAAC,QAAQ,EAAE,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAM5D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC,CAAC;AAEH,MAAM,WAAW,WAAW;IAC1B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,MAAM,EAAE,IAAI,CAAC,iBAAiB,CAAC,WAAW,EAAE,cAAc,CAyEpE,CAAC"}

package/lib/components/KPIBox/KPIBox.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.KPIBox = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
 var _Icon = require("../Icon");
 var _KPIBoxModule = _interopRequireDefault(require("./KPIBox.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -21,28 +22,52 @@ const KPIBox = exports.KPIBox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     iconName,
     iconSize = 'large',
     iconType = 'solid',
+    testId,
     ...props
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     ...props,
     ref: ref,
-    "data-testid": "KPIBox",
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'root'
+    }),
     className: (0, _classify.default)(_KPIBoxModule.default.wrapper, classNames?.wrapper),
     children: [!!iconName && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.SemanticIcon, {
       semantic: semantic,
       name: iconName,
       size: iconSize,
-      type: iconType
+      type: iconType,
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'icon'
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _classify.default)(_KPIBoxModule.default.textContainer, classNames?.textContainer),
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'content'
+      }),
       children: [!!topContent && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: (0, _classify.default)(_KPIBoxModule.default.topFoldContent, classNames?.topFoldContent),
+        "data-testid": (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'top'
+        }),
         children: topContent
       }), !!middleContent && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: (0, _classify.default)(_KPIBoxModule.default.middleFoldContent, classNames?.middleFoldContent),
+        "data-testid": (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'middle'
+        }),
         children: middleContent
       }), !!bottomContent && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: (0, _classify.default)(_KPIBoxModule.default.bottomFoldContent, classNames?.bottomFoldContent),
+        "data-testid": (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'bottom'
+        }),
         children: bottomContent
       })]
     })]