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

package/lib/components/Modal/Modal.js

@@ -13,6 +13,7 @@ var _opacity = require("../../styles/variables/_opacity");
 var _space = require("../../styles/variables/_space");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _helpers = require("../../utils/helpers");
+var _qa = require("../../utils/qa");
 var _Button = require("../Button/Button");
 var _Truncate = require("../Truncate/Truncate");
 var _ModalModule = _interopRequireDefault(require("./Modal.module.css"));
@@ -42,21 +43,34 @@ const ModalHeader = _ref => {
     children,
     hideCloseBtn,
     onCloseButtonClick,
-    className
+    className,
+    testId
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: React.Children.count(children) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _classify.default)(_ModalModule.default.modalHeader, className),
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'wrapper'
+      }),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: _ModalModule.default.headerContent,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Truncate.Truncate, {
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'title'
+          }),
           children: children
         })
       }), !hideCloseBtn && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
         iconLeftName: "xmark",
         type: "ghost",
         onClick: onCloseButtonClick,
-        ariaLabel: "Close Button"
+        ariaLabel: "Close Button",
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'close-button'
+        })
       })]
     })
   });
@@ -65,10 +79,15 @@ exports.ModalHeader = ModalHeader;
 const ModalBody = _ref2 => {
   let {
     children,
-    className
+    className,
+    testId
   } = _ref2;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: (0, _classify.default)(_ModalModule.default.modalBody, className),
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'wrapper'
+    }),
     children: children
   });
 };
@@ -76,13 +95,22 @@ exports.ModalBody = ModalBody;
 const ModalFooter = _ref3 => {
   let {
     children,
-    classNames
+    classNames,
+    testId
   } = _ref3;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: React.Children.count(children) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _classify.default)(_ModalModule.default.modalFooter, classNames?.wrapper),
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'wrapper'
+      }),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: (0, _classify.default)(_ModalModule.default.modalFooterActions, classNames?.actions),
+        "data-testid": (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'actions'
+        }),
         children: children
       })
     })
@@ -145,6 +173,7 @@ const Modal = _ref4 => {
     initialFocus = -1,
     customAnimation,
     allowBackgroundInteraction = false,
+    testId,
     // Size is not set to default for backward compatibility. Don't change if you don't know this.
     size
   } = _ref4;
@@ -233,6 +262,10 @@ const Modal = _ref4 => {
         [_ModalModule.default.in]: isTransitioning,
         [_ModalModule.default.open]: isOpen
       }, classNames?.container),
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'container'
+      }),
       children: [!allowBackgroundInteraction && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: (0, _classify.default)(_ModalModule.default.backdrop, {
           [_ModalModule.default.darkBackdrop]: !hideBackdrop
@@ -241,7 +274,11 @@ const Modal = _ref4 => {
         style: {
           opacity: styles?.opacity,
           transition: styles?.transition
-        }
+        },
+        "data-testid": (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'backdrop'
+        })
       }), isMounted && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: (0, _classify.default)(_ModalModule.default.modal, {
           [_ModalModule.default.small]: size === 'small',
@@ -253,6 +290,10 @@ const Modal = _ref4 => {
           // Transition styles
           ...styles
         },
+        "data-testid": (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'content'
+        }),
         children: children
       })]
     })
@@ -264,6 +305,7 @@ exports.Modal = Modal;
 const FullScreenModal = _ref5 => {
   let {
     classNames,
+    testId,
     ...props
   } = _ref5;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Modal, {
@@ -271,6 +313,7 @@ const FullScreenModal = _ref5 => {
       ...classNames,
       content: (0, _classify.default)(_ModalModule.default.fullscreenModalContainer, classNames?.content)
     },
+    testId: testId,
     ...props
   });
 };

package/lib/components/Notification/Notification.d.ts

@@ -19,6 +19,7 @@ interface BaseNotificationProps {
     dismissable?: boolean;
     children?: string;
     onCloseClick?: React.MouseEventHandler<HTMLDivElement>;
+    testId?: string;
 }
 type NotificationBaseProps = BaseNotificationProps & {
     classNames?: ClassNames;

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

@@ -1 +1 @@
-{"version":3,"file":"Notification.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/Notification.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAKrD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAOlD,eAAO,MAAM,qBAAqB;;;;EAIhC,CAAC;AAEH,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAEH,MAAM,MAAM,wBAAwB,GAClC,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,OAAO,qBAAqB,CAAC,CAAC;AAErE,UAAU,qBAAqB;IAC7B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,EAAE,wBAAwB,CAAC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,QAAQ,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;CACxD;AAED,KAAK,qBAAqB,GAAG,qBAAqB,GAAG;IACnD,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,GAAG,CACE;IACE,WAAW,EAAE,IAAI,CAAC;IAClB,YAAY,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACvD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,GACD;IACE,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,YAAY,CAAC,EAAE,KAAK,CAAC;CACtB,CACJ,CAAC;AAEJ,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,qBAAqB,EAAE,UAAU,CAAC;IAC/C,QAAQ,EAAE,wBAAwB,CAAC;CACpC;AA6DD,eAAO,MAAM,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAC/C,iBAAiB,EACjB,cAAc,CA6Cf,CAAC"}
+{"version":3,"file":"Notification.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/Notification.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAMrD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAOlD,eAAO,MAAM,qBAAqB;;;;EAIhC,CAAC;AAEH,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAEH,MAAM,MAAM,wBAAwB,GAClC,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,OAAO,qBAAqB,CAAC,CAAC;AAErE,UAAU,qBAAqB;IAC7B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,EAAE,wBAAwB,CAAC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,QAAQ,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,KAAK,qBAAqB,GAAG,qBAAqB,GAAG;IACnD,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,GAAG,CACE;IACE,WAAW,EAAE,IAAI,CAAC;IAClB,YAAY,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACvD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,GACD;IACE,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,YAAY,CAAC,EAAE,KAAK,CAAC;CACtB,CACJ,CAAC;AAEJ,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,qBAAqB,EAAE,UAAU,CAAC;IAC/C,QAAQ,EAAE,wBAAwB,CAAC;CACpC;AAkED,eAAO,MAAM,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAC/C,iBAAiB,EACjB,cAAc,CA+Cf,CAAC"}

package/lib/components/Notification/Notification.js

@@ -7,6 +7,7 @@ exports.Notification = exports.NOTIFICATION_SEMANTIC = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _typography = require("../../types/typography");
 var _classify = require("../../utils/classify");
+var _qa = require("../../utils/qa");
 var _Icon = require("../Icon");
 var _Text = require("../Text");
 var _NotificationModule = _interopRequireDefault(require("./Notification.module.css"));
@@ -28,7 +29,8 @@ const BaseNotification = /*#__PURE__*/React.forwardRef((props, ref) => {
     iconLeftType = 'regular',
     dismissable,
     children,
-    onCloseClick
+    onCloseClick,
+    testId
   } = props;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _classify.classify)(_NotificationModule.default.baseContainer, {
@@ -38,14 +40,26 @@ const BaseNotification = /*#__PURE__*/React.forwardRef((props, ref) => {
       [_NotificationModule.default.dismissable]: dismissable
     }, classNames?.wrapper),
     ref: ref,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'root'
+    }),
     children: [iconLeftName ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
       name: iconLeftName,
       color: _typography.TEXT_COLORS.inversePrimary,
       size: "small",
-      type: iconLeftType
+      type: iconLeftType,
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'icon'
+      })
     }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.SubTitleSmall, {
       className: (0, _classify.classify)(classNames?.text),
       color: _typography.TEXT_COLORS.inversePrimary,
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'text'
+      }),
       children: children
     }), dismissable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
       color: _typography.TEXT_COLORS.inversePrimary,
@@ -53,7 +67,11 @@ const BaseNotification = /*#__PURE__*/React.forwardRef((props, ref) => {
       size: "small",
       type: "regular",
       onClick: onCloseClick,
-      className: _NotificationModule.default.closeIcon
+      className: _NotificationModule.default.closeIcon,
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'close'
+      })
     })]
   });
 });
@@ -65,7 +83,8 @@ const Notification = exports.Notification = /*#__PURE__*/React.forwardRef((props
     iconLeftType,
     dismissable,
     children,
-    onCloseClick
+    onCloseClick,
+    testId
   } = props;
 
   // Type narrowing to safely access selfDismiss only when dismissable is true
@@ -85,6 +104,7 @@ const Notification = exports.Notification = /*#__PURE__*/React.forwardRef((props
       semantic: semantic,
       dismissable: dismissable,
       onCloseClick: closeClickHandler,
+      testId: testId,
       ref: ref,
       children: children
     })

package/lib/components/OptionButton/OptionButton.d.ts

@@ -27,6 +27,7 @@ export interface OptionButtonProps extends Omit<ButtonProps, 'menu' | 'anchorPos
     tooltip?: OptionButtonTooltipProps;
     classNames?: ClassNames;
     clickAwayRef?: React.RefObject<ClickAwayRefType | null>;
+    testId?: string;
 }
 export declare const OptionButton: Flow.AbstractComponent<OptionButtonProps, HTMLDivElement>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"OptionButton.d.ts","sourceRoot":"","sources":["../../../src/components/OptionButton/OptionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAGrD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,sBAAsB,CAAC;AAE3D,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAEvD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,+BAA+B,CAAC;AAG9D,OAAO,KAAK,EAAC,UAAU,EAAE,SAAS,EAAC,MAAM,qBAAqB,CAAC;AAC/D,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,wBAAwB,CAAC;AAM7D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC,CAAC;AAEH,MAAM,WAAW,wBAAwB;IACvC,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,aAAa,CAAC,EAAE,gBAAgB,CAAC;CAClC;AAED,MAAM,WAAW,iBACf,SAAQ,IAAI,CACV,WAAW,EACT,MAAM,GACN,gBAAgB,GAChB,gBAAgB,GAChB,eAAe,GACf,YAAY,GACZ,aAAa,GACb,SAAS,GACT,YAAY,GACZ,cAAc,CACjB;IACD,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,aAAa,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC3D,UAAU,CAAC,EAAE,MAAM,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,wBAAwB,CAAC;IACnC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;CACzD;AAED,eAAO,MAAM,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAC/C,iBAAiB,EACjB,cAAc,CAwGf,CAAC"}
+{"version":3,"file":"OptionButton.d.ts","sourceRoot":"","sources":["../../../src/components/OptionButton/OptionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAGrD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,sBAAsB,CAAC;AAG3D,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAEvD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,+BAA+B,CAAC;AAG9D,OAAO,KAAK,EAAC,UAAU,EAAE,SAAS,EAAC,MAAM,qBAAqB,CAAC;AAC/D,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,wBAAwB,CAAC;AAM7D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC,CAAC;AAEH,MAAM,WAAW,wBAAwB;IACvC,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,aAAa,CAAC,EAAE,gBAAgB,CAAC;CAClC;AAED,MAAM,WAAW,iBACf,SAAQ,IAAI,CACV,WAAW,EACT,MAAM,GACN,gBAAgB,GAChB,gBAAgB,GAChB,eAAe,GACf,YAAY,GACZ,aAAa,GACb,SAAS,GACT,YAAY,GACZ,cAAc,CACjB;IACD,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,aAAa,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC3D,UAAU,CAAC,EAAE,MAAM,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,wBAAwB,CAAC;IACnC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAC/C,iBAAiB,EACjB,cAAc,CA6Gf,CAAC"}

package/lib/components/OptionButton/OptionButton.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.OptionButton = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
 var _Button = require("../Button");
 var _ButtonDropdown = require("../ButtonDropdown");
 var _ConditionalWrapper = require("../ConditionalWrapper");
@@ -34,7 +35,8 @@ const OptionButton = exports.OptionButton = /*#__PURE__*/React.forwardRef((_ref,
     actionType,
     tooltip,
     classNames,
-    clickAwayRef
+    clickAwayRef,
+    testId
   } = _ref;
   const [iconName, setIconName] = React.useState('chevron-down');
   const [isMenuOpen, setIsMenuOpen] = React.useState(false);
@@ -43,11 +45,19 @@ const OptionButton = exports.OptionButton = /*#__PURE__*/React.forwardRef((_ref,
       [_OptionButtonModule.default.isFluid]: isFluid
     }, classNames?.wrapper),
     ref: ref,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'root'
+    }),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.ConditionalWrapper, {
       condition: Boolean(tooltip?.baseButton),
       wrapper: children => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
         ...tooltip?.baseButton,
         hidden: isMenuOpen ? true : tooltip?.optionsButton?.hidden,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'base-tooltip'
+        }),
         children: children
       }),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
@@ -65,6 +75,10 @@ const OptionButton = exports.OptionButton = /*#__PURE__*/React.forwardRef((_ref,
           wrapper: (0, _classify.default)(_OptionButtonModule.default.leftButton, classNames?.baseButtonWrapper),
           icon: classNames?.baseButtonIcon
         },
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'base-button'
+        }),
         children: children
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonDropdown.ButtonDropdown, {
@@ -92,7 +106,11 @@ const OptionButton = exports.OptionButton = /*#__PURE__*/React.forwardRef((_ref,
       },
       onOptionSelect: onOptionSelect,
       size: size,
-      clickAwayRef: clickAwayRef
+      clickAwayRef: clickAwayRef,
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'dropdown'
+      })
     })]
   });
 });

package/lib/components/OptionButton/SimpleOptionButton.d.ts

@@ -17,7 +17,7 @@ type ClassNames = Readonly<{
 export interface SimpleOptionButtonRef {
     selectedKeys?: Array<string>;
 }
-export interface SimpleOptionButtonProps extends Omit<ButtonProps, 'classNames' | 'anchorPosition' | 'tooltip' | 'menuSize' | 'options' | 'optionsVariant' | 'allowSearch' | 'selectedKeys' | 'menuVirtualization' | 'header' | 'footer' | 'menuClassNames' | 'showLabelTooltip' | 'allowWrap' | 'onOptionSelect' | 'onButtonClick' | 'onMenuOpen' | 'onMenuClose' | 'resolveLabel' | 'resolveSecondaryLabel' | 'clickAwayRef'> {
+export interface SimpleOptionButtonProps extends Omit<ButtonProps, 'classNames' | 'anchorPosition' | 'tooltip' | 'menuSize' | 'options' | 'optionsVariant' | 'allowSearch' | 'selectedKeys' | 'menuVirtualization' | 'header' | 'footer' | 'menuClassNames' | 'showLabelTooltip' | 'allowWrap' | 'onOptionSelect' | 'onButtonClick' | 'onMenuOpen' | 'onMenuClose' | 'resolveLabel' | 'resolveSecondaryLabel' | 'clickAwayRef' | 'testId'> {
     classNames?: ClassNames;
     anchorPosition?: AnchorType;
     tooltip?: OptionButtonTooltipProps;
@@ -39,6 +39,7 @@ export interface SimpleOptionButtonProps extends Omit<ButtonProps, 'classNames'
     resolveLabel?: (option: MenuOption) => string | React.ReactNode;
     resolveSecondaryLabel?: (option: MenuOption) => string | React.ReactNode;
     clickAwayRef?: React.RefObject<ClickAwayRefType | null>;
+    testId?: string;
 }
 export declare const SimpleOptionButton: Flow.AbstractComponent<SimpleOptionButtonProps, SimpleOptionButtonRef>;
 export {};

package/lib/components/OptionButton/SimpleOptionButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleOptionButton.d.ts","sourceRoot":"","sources":["../../../src/components/OptionButton/SimpleOptionButton.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SimpleOptionButton.d.ts","sourceRoot":"","sources":["../../../src/components/OptionButton/SimpleOptionButton.tsx"],"names":[],"mappings":"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"}

package/lib/components/OptionButton/SimpleOptionButton.js

@@ -34,6 +34,7 @@ const SimpleOptionButtonBase = (props, ref) => {
     showLabelTooltip,
     clickAwayRef,
     allowWrap = false,
+    testId,
     ...buttonProps
   } = props;
   const [optionButtonSelectedKeys, setOptionButtonSelectedKeys] = React.useState(selectedKeys);
@@ -67,6 +68,7 @@ const SimpleOptionButtonBase = (props, ref) => {
     onMenuOpen: onMenuOpen,
     onMenuClose: onMenuClose,
     clickAwayRef: clickAwayRef,
+    testId: testId,
     menu: {
       isFluid: false,
       options,

package/lib/components/PageTitle/PageTitle.d.ts

@@ -11,6 +11,7 @@ export interface PageTitleProps {
     pageNameKey?: string;
     showBackButton?: boolean;
     onBack?: () => void;
+    testId?: string;
 }
 export declare const PAGE_NAME_LIST: Readonly<{
     dashboard: {
@@ -132,24 +133,27 @@ export declare const PAGE_NAME_LIST: Readonly<{
 export interface TabSlotProps {
     children?: React.ReactNode;
     className: string;
+    testId?: string;
 }
 export declare const TabSlot: {
-    ({ children, className, ...props }: TabSlotProps): React.JSX.Element;
+    ({ children, className, testId, ...props }: TabSlotProps): React.JSX.Element;
     displayName: string;
 };
 export interface RightSlotProps {
     children?: React.ReactNode;
     className?: string;
+    testId?: string;
 }
 export declare const RightSlot: {
-    ({ children, ...props }: RightSlotProps): React.JSX.Element;
+    ({ children, testId, ...props }: RightSlotProps): React.JSX.Element;
     displayName: string;
 };
 export interface PageNameProps {
     children?: React.ReactNode;
+    testId?: string;
 }
 export declare const PageName: {
-    ({ children, ...props }: PageNameProps): React.JSX.Element;
+    ({ children, testId, ...props }: PageNameProps): React.JSX.Element;
     displayName: string;
 };
 export declare const PageTitle: Flow.AbstractComponent<PageTitleProps, HTMLDivElement>;

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

@@ -1 +1 @@
-{"version":3,"file":"PageTitle.d.ts","sourceRoot":"","sources":["../../../src/components/PageTitle/PageTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAiBrD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,MAAM,WAAW,cAAc;IAC7B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAeD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoHzB,CAAC;AAKH,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,OAAO;wCAAqC,YAAY;;CAIpE,CAAC;AAIF,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,SAAS;6BAA0B,cAAc;;CAE7D,CAAC;AAIF,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,QAAQ;6BAA0B,aAAa;;CAI3D,CAAC;AAGF,eAAO,MAAM,SAAS,EAAE,IAAI,CAAC,iBAAiB,CAAC,cAAc,EAAE,cAAc,CAwF1E,CAAC"}
+{"version":3,"file":"PageTitle.d.ts","sourceRoot":"","sources":["../../../src/components/PageTitle/PageTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAkBrD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,MAAM,WAAW,cAAc;IAC7B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAgBD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoHzB,CAAC;AAKH,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,OAAO;gDAKjB,YAAY;;CAQd,CAAC;AAIF,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,SAAS;qCAAkC,cAAc;;CAIrE,CAAC;AAIF,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,QAAQ;qCAAkC,aAAa;;CAQnE,CAAC;AAIF,eAAO,MAAM,SAAS,EAAE,IAAI,CAAC,iBAAiB,CAAC,cAAc,EAAE,cAAc,CA8F1E,CAAC"}

package/lib/components/PageTitle/PageTitle.js

@@ -7,6 +7,7 @@ exports.TabSlot = exports.RightSlot = exports.PageTitle = exports.PageName = exp
 var React = _interopRequireWildcard(require("react"));
 var _color = require("../../styles/variables/_color");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
 var _Button = require("../Button");
 var _Icon = require("../Icon");
 var _Text = require("../Text");
@@ -143,11 +144,16 @@ const TabSlot = _ref => {
   let {
     children,
     className,
+    testId,
     ...props
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ...props,
     className: (0, _classify.default)(_PageTitleModule.default.tabSlot, className),
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'wrapper'
+    }),
     children: children
   });
 };
@@ -156,10 +162,15 @@ TabSlot.displayName = 'TabSlot';
 const RightSlot = _ref2 => {
   let {
     children,
+    testId,
     ...props
   } = _ref2;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ...props,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'wrapper'
+    }),
     children: children
   });
 };
@@ -168,11 +179,16 @@ RightSlot.displayName = 'RightSlot';
 const PageName = _ref3 => {
   let {
     children,
+    testId,
     ...props
   } = _ref3;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ...props,
     className: _PageTitleModule.default.pageTitle,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'wrapper'
+    }),
     children: children
   });
 };
@@ -184,7 +200,8 @@ const PageTitle = exports.PageTitle = /*#__PURE__*/React.forwardRef((_ref4, ref)
     children,
     pageNameKey,
     showBackButton,
-    onBack
+    onBack,
+    testId
   } = _ref4;
   const getNamedComp = comp => {
     const childrenArray = React.Children.toArray(children);
@@ -206,7 +223,10 @@ const PageTitle = exports.PageTitle = /*#__PURE__*/React.forwardRef((_ref4, ref)
     onBack?.();
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    "data-testid": "PageTitle",
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'wrapper'
+    }),
     className: (0, _classify.default)(_PageTitleModule.default.pageTitleWrapper, classNames?.wrapper),
     ref: ref,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -217,14 +237,27 @@ const PageTitle = exports.PageTitle = /*#__PURE__*/React.forwardRef((_ref4, ref)
           title: "Navigate Back",
           delayMotionDuration: "slow",
           placement: "top-start",
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'back-tooltip'
+          }),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
             onClick: handleBack,
             type: "tertiary",
             iconLeftName: "chevron-left",
-            ariaLabel: "Navigate Back Button"
+            ariaLabel: "Navigate Back Button",
+            testId: (0, _qa.generateTestId)({
+              base: testId,
+              slot: 'back-button'
+            })
           })
         }), pageNameKey && PAGE_NAME_LIST[pageNameKey] ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(PageName, {
+          testId: testId,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Text.TitleMedium, {
+            testId: (0, _qa.generateTestId)({
+              base: testId,
+              slot: 'title'
+            }),
             children: [PAGE_NAME_LIST[pageNameKey].title, ' ']
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
             type: PAGE_NAME_LIST[pageNameKey].iconType,
@@ -236,7 +269,11 @@ const PageTitle = exports.PageTitle = /*#__PURE__*/React.forwardRef((_ref4, ref)
               '--fa-secondary-color': _color.colorIconSecondary,
               '--fa-primary-opacity': '1.0',
               '--fa-secondary-opacity': '1.0'
-            }
+            },
+            testId: (0, _qa.generateTestId)({
+              base: testId,
+              slot: 'icon'
+            })
           })]
         }) : getNamedComp('PageName')]
       }), getNamedComp('TabSlot')]

package/lib/components/Pagination/Pagination.d.ts

@@ -27,6 +27,7 @@ export interface PaginationProps extends Omit<{
     classNames?: ClassNames;
 }>, PaginationBaseProps {
     classNames?: ClassNames;
+    testId?: string;
 }
 export interface PaginationItemProps {
     id: string;
@@ -35,6 +36,7 @@ export interface PaginationItemProps {
     page: number | null | undefined;
     selected: boolean;
     type: PaginationItemType;
+    testId?: string;
 }
 export declare const Pagination: Flow.AbstractComponent<PaginationProps, HTMLDivElement>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAcrD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,KAAK,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC;AAE5D,MAAM,MAAM,kBAAkB,GAC1B,OAAO,GACP,UAAU,GACV,MAAM,GACN,gBAAgB,GAChB,cAAc,GACd,MAAM,GACN,MAAM,CAAC;AAEX,MAAM,WAAW,mBAAmB;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CACT,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EACjC,KAAK,CAAC,EAAE,UAAU,GAAG,IAAI,GAAG,SAAS,KAClC,IAAI,CAAC;IACV,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAChC,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,MAAM,WAAW,eACf,SAAQ,IAAI,CACR;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,EAC5B,MAAM,mBAAmB,GAAG,MAAM;IAAC,UAAU,CAAC,EAAE,UAAU,CAAA;CAAC,CAC5D,EACD,mBAAmB;IACrB,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAED,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC5D,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAChC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,kBAAkB,CAAC;CAC1B;AAMD,eAAO,MAAM,UAAU,EAAE,IAAI,CAAC,iBAAiB,CAC7C,eAAe,EACf,cAAc,CA0Ff,CAAC"}
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAerD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,KAAK,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC;AAE5D,MAAM,MAAM,kBAAkB,GAC1B,OAAO,GACP,UAAU,GACV,MAAM,GACN,gBAAgB,GAChB,cAAc,GACd,MAAM,GACN,MAAM,CAAC;AAEX,MAAM,WAAW,mBAAmB;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CACT,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EACjC,KAAK,CAAC,EAAE,UAAU,GAAG,IAAI,GAAG,SAAS,KAClC,IAAI,CAAC;IACV,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAChC,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,MAAM,WAAW,eACf,SAAQ,IAAI,CACR;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,EAC5B,MAAM,mBAAmB,GAAG,MAAM;IAAC,UAAU,CAAC,EAAE,UAAU,CAAA;CAAC,CAC5D,EACD,mBAAmB;IACrB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC5D,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAChC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,kBAAkB,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAMD,eAAO,MAAM,UAAU,EAAE,IAAI,CAAC,iBAAiB,CAC7C,eAAe,EACf,cAAc,CA8Gf,CAAC"}

package/lib/components/Pagination/Pagination.js

@@ -9,6 +9,7 @@ var _usePagination = require("../../hooks/usePagination");
 var _useWindowSize = require("../../hooks/useWindowSize");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _helpers = require("../../utils/helpers");
+var _qa = require("../../utils/qa");
 var _Dropdown = require("../Dropdown");
 var _PaginationItem = require("./PaginationItem");
 var _Text = require("../Text");
@@ -33,6 +34,7 @@ const Pagination = exports.Pagination = /*#__PURE__*/React.forwardRef((props, re
     showFirstButton = style !== 'primary' && showExtraSecPaginationButtons,
     showLastButton = style !== 'primary' && showExtraSecPaginationButtons,
     staticPaginationLabel,
+    testId,
     ...restPaginationProps
   } = props;
   const showPageSelectionDropDown = style !== 'primary' && showExtraSecPaginationButtons;
@@ -57,13 +59,24 @@ const Pagination = exports.Pagination = /*#__PURE__*/React.forwardRef((props, re
   }));
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     ref: ref,
-    "data-testid": "Pagination",
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'root'
+    }),
     className: (0, _classify.default)(_PaginationModule.default.wrapper, classNames?.wrapper),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _classify.default)(_PaginationModule.default.childrenSlot, classNames?.children),
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'children'
+      }),
       children: children
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: _PaginationModule.default.paginatorSlots,
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'paginator-slots'
+      }),
       children: [style === 'secondary' && showPageSelectionDropDown && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.Dropdown, {
           size: "small",
@@ -80,16 +93,33 @@ const Pagination = exports.Pagination = /*#__PURE__*/React.forwardRef((props, re
             virtualization: menuVirtualization
           },
           dropdownInputText: currentPage.toString(),
-          onChange: option => onChange?.(parseInt(option.key))
+          onChange: option => onChange?.(parseInt(option.key)),
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'dropdown'
+          })
         }), !!totalPages && !!currentPage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.SubTitleExtraSmall, {
           color: "tertiary",
           className: _PaginationModule.default.secondaryLabel,
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'label'
+          }),
           children: staticPaginationLabel ? staticPaginationLabel : `of ${totalPages} ${totalPages > 1 ? 'Pages' : 'Page'}`
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: (0, _classify.default)(_PaginationModule.default.paginatorSlot, classNames?.paginator),
+        "data-testid": (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'paginator'
+        }),
         children: items?.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_PaginationItem.PaginationItem, {
-          ...item
+          ...item,
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'item',
+            index: item.id
+          })
         }, item.id))
       })]
     })]

package/lib/components/Pagination/PaginationItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationItem.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/PaginationItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,sCAAsC,CAAC;AAM9E,eAAO,MAAM,gBAAgB,GAAI,OAAO,mBAAmB,kCAsG1D,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,sBAExD,CAAC"}
+{"version":3,"file":"PaginationItem.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/PaginationItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,sCAAsC,CAAC;AAM9E,eAAO,MAAM,gBAAgB,GAAI,OAAO,mBAAmB,kCA8G1D,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,sBAExD,CAAC"}