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

package/lib/components/FileUpload/FileBlock/FileBlock.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.FileBlock = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../../utils/classify"));
+var _qa = require("../../../utils/qa");
 var _Icon = require("../../Icon");
 var _LinearLoader = require("../../LinearLoader");
 var _Truncate = require("../../Truncate");
@@ -19,12 +20,17 @@ const FileBlock = exports.FileBlock = /*#__PURE__*/React.forwardRef((_ref, ref)
     fileObject,
     onFileRefreshClick,
     handleFileClear,
-    showRemoveFile = true
+    showRemoveFile = true,
+    testId
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _classify.default)(_FileUploadModule.default.file, classNames?.wrapper),
       ref: ref,
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'wrapper'
+      }),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: _FileUploadModule.default.fileInfo,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -32,22 +38,35 @@ const FileBlock = exports.FileBlock = /*#__PURE__*/React.forwardRef((_ref, ref)
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: _FileUploadModule.default.icon,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(FileStatusIcon, {
-              fileObject: fileObject
+              fileObject: fileObject,
+              testId: testId
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: _FileUploadModule.default.fileName,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Truncate.Truncate, {
+              testId: (0, _qa.generateTestId)({
+                base: testId,
+                slot: 'file-name'
+              }),
               children: fileObject.file.name
             })
           })]
         }), fileObject.success && !!fileObject.successMessage && !fileObject.progress && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: _FileUploadModule.default.fileSuccess,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Truncate.Truncate, {
+            testId: (0, _qa.generateTestId)({
+              base: testId,
+              slot: 'success-message'
+            }),
             children: fileObject.successMessage
           })
         }), fileObject.reject && !!fileObject.rejectReason && !fileObject.progress && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: _FileUploadModule.default.fileError,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Truncate.Truncate, {
+            testId: (0, _qa.generateTestId)({
+              base: testId,
+              slot: 'error-message'
+            }),
             children: fileObject.rejectReason
           })
         }), !!fileObject.progress && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -55,7 +74,11 @@ const FileBlock = exports.FileBlock = /*#__PURE__*/React.forwardRef((_ref, ref)
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinearLoader.LinearLoader, {
             size: "small",
             value: fileObject.progress === 'indeterminate' ? 0 : fileObject.progress,
-            indeterminate: fileObject.progress === 'indeterminate'
+            indeterminate: fileObject.progress === 'indeterminate',
+            testId: (0, _qa.generateTestId)({
+              base: testId,
+              slot: 'progress'
+            })
           })
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -65,13 +88,21 @@ const FileBlock = exports.FileBlock = /*#__PURE__*/React.forwardRef((_ref, ref)
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.ClickableIcon, {
             name: "refresh",
             size: "small",
-            onClick: () => onFileRefreshClick?.(fileObject)
+            onClick: () => onFileRefreshClick?.(fileObject),
+            testId: (0, _qa.generateTestId)({
+              base: testId,
+              slot: 'refresh-button'
+            })
           })
         }), showRemoveFile && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: _FileUploadModule.default.rightBlock,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.CloseIcon, {
             size: "small",
-            onClick: () => handleFileClear?.(fileObject.id)
+            onClick: () => handleFileClear?.(fileObject.id),
+            testId: (0, _qa.generateTestId)({
+              base: testId,
+              slot: 'remove-button'
+            })
           })
         })]
       })]
@@ -96,7 +127,8 @@ const getFileStatus = fileObject => {
 // This component renders the status icon for a file
 const FileStatusIcon = _ref2 => {
   let {
-    fileObject
+    fileObject,
+    testId
   } = _ref2;
   const status = getFileStatus(fileObject);
   switch (status) {
@@ -104,26 +136,42 @@ const FileStatusIcon = _ref2 => {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
         size: "small",
         name: "loader",
-        color: "tertiary"
+        color: "tertiary",
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'status-icon'
+        })
       });
     case 'success':
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
         size: "small",
         name: "check",
-        color: "success"
+        color: "success",
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'status-icon'
+        })
       });
     case 'error':
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
         size: "small",
         name: "circle-exclamation",
         color: "danger",
-        type: "solid"
+        type: "solid",
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'status-icon'
+        })
       });
     default:
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
         size: "small",
         name: "check",
-        color: "success"
+        color: "success",
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'status-icon'
+        })
       });
   }
 };

package/lib/components/FileUpload/FileUpload.d.ts

@@ -58,6 +58,7 @@ export interface FileUploadProps extends Omit<FileUploadBaseProps, 'classNames'
     required?: boolean;
     handleFileDeletionExternally?: boolean;
     onFileRefreshClick?: (file: FileObject) => unknown;
+    testId?: string;
 }
 export declare const FileUpload: Flow.AbstractComponent<FileUploadProps, FileUploadRef>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"FileUpload.d.ts","sourceRoot":"","sources":["../../../src/components/FileUpload/FileUpload.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"FileUpload.d.ts","sourceRoot":"","sources":["../../../src/components/FileUpload/FileUpload.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,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,eAAe,CAAC;AAEpD,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,IAAI,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAGD,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;CACd;AAGD,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IACzB,IAAI,EAAE,IAAI,CAAC;CACZ;AAGD,MAAM,WAAW,aAAa;IAC5B,kBAAkB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,YAAY,KAAK,OAAO,CAAC;IACpE,iBAAiB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,cAAc,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC;IACpE,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC;IACjE,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC;IACjE,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC;IACzC,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC9B,aAAa,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IACjC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;CAC1B;AAGD,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE;QACP,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;KACzB,CAAC;IACF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,gBAAgB,CAAC,EAAE,CAAC,aAAa,EAAE,KAAK,CAAC,UAAU,CAAC,KAAK,OAAO,CAAC;IACjE,mBAAmB,CAAC,EAAE,CAAC,cAAc,EAAE,KAAK,CAAC,UAAU,CAAC,KAAK,OAAO,CAAC;IACrE,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC;IACtC,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,eACf,SAAQ,IAAI,CACV,mBAAmB,EACjB,YAAY,GACZ,OAAO,GACP,aAAa,GACb,qBAAqB,GACrB,sBAAsB,GACtB,UAAU,GACV,8BAA8B,GAC9B,oBAAoB,CACvB;IACD,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtC,oBAAoB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,OAAO,CAAC;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAuID,eAAO,MAAM,UAAU,EAAE,IAAI,CAAC,iBAAiB,CAC7C,eAAe,EACf,aAAa,CACqD,CAAC"}

package/lib/components/FileUpload/FileUpload.js

@@ -7,6 +7,7 @@ exports.FileUpload = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useFileUpload = require("../../hooks/useFileUpload");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
 var _Button = require("../Button");
 var _FileBlock = require("./FileBlock");
 var _Truncate = require("../Truncate");
@@ -39,7 +40,8 @@ const FileUploadBase = (props, ref) => {
     onFileClear,
     onFileRefreshClick,
     maxFiles = 1,
-    handleFileDeletionExternally
+    handleFileDeletionExternally,
+    testId
   } = props;
 
   // Get file upload state from useFileUpload hook
@@ -66,7 +68,6 @@ const FileUploadBase = (props, ref) => {
   });
 
   // Expose file upload actions to parent component
-
   React.useImperativeHandle(ref, () => ({
     moveFileToProgress,
     moveFileToSuccess,
@@ -82,9 +83,17 @@ const FileUploadBase = (props, ref) => {
   const files = [...validFiles, ...rejectedFiles];
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _classify.default)(_FileUploadModule.default.wrapper, classNames?.wrapper),
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'wrapper'
+    }),
     children: [Boolean(label) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: _FileUploadModule.default.label,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Truncate.Truncate, {
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'label'
+        }),
         children: label
       }), required && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: _FileUploadModule.default.required,
@@ -98,8 +107,16 @@ const FileUploadBase = (props, ref) => {
         [_FileUploadModule.default.dragActive]: isDragActive,
         [_FileUploadModule.default.error]: error
       }, classNames?.dropZone),
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'dropzone'
+      }),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-        ...getInputProps()
+        ...getInputProps(),
+        "data-testid": (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'input'
+        })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: (0, _classify.default)(_FileUploadModule.default.instruction, classNames?.instruction),
         children: isDragActive ? draggingInstruction : instruction
@@ -109,6 +126,10 @@ const FileUploadBase = (props, ref) => {
       })]
     }), files.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: _FileUploadModule.default.files,
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'files'
+      }),
       children: files.map(fileObject => /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FileBlock.FileBlock, {
           fileObject: fileObject,
@@ -116,7 +137,12 @@ const FileUploadBase = (props, ref) => {
           handleFileClear: handleFileDeletionExternally ? onFileClear : handleFileClear,
           classNames: {
             wrapper: classNames?.files
-          }
+          },
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'file-block',
+            index: fileObject.id
+          })
         })
       }, fileObject.id))
     })]

package/lib/components/FilterButtonOverlay/FilterButtonOverlay.d.ts

@@ -24,6 +24,7 @@ export interface FilterButtonOverlayProps extends Omit<NewButtonProps, 'classNam
     buttonSize?: ButtonSize;
     elevation?: ElevationType;
     buttonIsFluid?: boolean;
+    testId?: string;
 }
 export declare const FilterButtonOverlay: Flow.AbstractComponent<FilterButtonOverlayProps, HTMLDivElement>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"FilterButtonOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/FilterButtonOverlay/FilterButtonOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAIrD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,WAAW,CAAC;AAIhD,OAAO,KAAK,EAAC,WAAW,EAAE,UAAU,EAAC,MAAM,uBAAuB,CAAC;AAEnE,OAAO,KAAK,EAAC,UAAU,EAAE,QAAQ,EAAC,MAAM,+BAA+B,CAAC;AAKxE,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAM1D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC,CAAC;AAEH,MAAM,MAAM,4BAA4B,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE9D,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CACpC,WAAW,EACX;IACE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CACF,CAAC;AAEF,MAAM,WAAW,wBACf,SAAQ,IAAI,CACV,cAAc,EACZ,YAAY,GACZ,UAAU,GACV,kBAAkB,GAClB,gBAAgB,GAChB,cAAc,GACd,SAAS,GACT,MAAM,GACN,aAAa,GACb,YAAY,GACZ,WAAW,GACX,eAAe,CAClB;IACD,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gBAAgB,CAAC,EAAE,QAAQ,CAAC;IAC5B,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,4BAA4B,CAAC;IACpC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,mBAAmB,EAAE,IAAI,CAAC,iBAAiB,CACtD,wBAAwB,EACxB,cAAc,CA6Gf,CAAC"}
+{"version":3,"file":"FilterButtonOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/FilterButtonOverlay/FilterButtonOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAIrD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,WAAW,CAAC;AAKhD,OAAO,KAAK,EAAC,WAAW,EAAE,UAAU,EAAC,MAAM,uBAAuB,CAAC;AAEnE,OAAO,KAAK,EAAC,UAAU,EAAE,QAAQ,EAAC,MAAM,+BAA+B,CAAC;AAKxE,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAM1D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC,CAAC;AAEH,MAAM,MAAM,4BAA4B,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE9D,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CACpC,WAAW,EACX;IACE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CACF,CAAC;AAEF,MAAM,WAAW,wBACf,SAAQ,IAAI,CACV,cAAc,EACZ,YAAY,GACZ,UAAU,GACV,kBAAkB,GAClB,gBAAgB,GAChB,cAAc,GACd,SAAS,GACT,MAAM,GACN,aAAa,GACb,YAAY,GACZ,WAAW,GACX,eAAe,CAClB;IACD,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gBAAgB,CAAC,EAAE,QAAQ,CAAC;IAC5B,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,4BAA4B,CAAC;IACpC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,mBAAmB,EAAE,IAAI,CAAC,iBAAiB,CACtD,wBAAwB,EACxB,cAAc,CAuHf,CAAC"}

package/lib/components/FilterButtonOverlay/FilterButtonOverlay.js

@@ -10,6 +10,7 @@ var _hooks = require("../../hooks");
 var _space = require("../../styles/variables/_space");
 var _utils = require("../../utils");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
 var _Button = require("../Button");
 var _ButtonDropdown = require("../ButtonDropdown");
 var _Tooltip = require("../Tooltip");
@@ -30,6 +31,7 @@ const FilterButtonOverlay = exports.FilterButtonOverlay = /*#__PURE__*/React.for
     buttonIsFluid,
     buttonSize,
     elevation = 'modal',
+    testId,
     ...restProps
   } = _ref;
   const {
@@ -58,7 +60,10 @@ const FilterButtonOverlay = exports.FilterButtonOverlay = /*#__PURE__*/React.for
         triggerRef
       } = _ref2;
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        "data-testid": "FilterButtonOverlay",
+        "data-testid": (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'root'
+        }),
         className: (0, _classify.default)({
           [_FilterButtonOverlayModule.default.isFluid]: buttonIsFluid
         }, classNames?.wrapper),
@@ -72,6 +77,10 @@ const FilterButtonOverlay = exports.FilterButtonOverlay = /*#__PURE__*/React.for
           },
           isFluid: buttonIsFluid,
           size: buttonSize,
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'button'
+          }),
           children: buttonLabel
         }), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.FloatingPortal, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.FloatingFocusManager, {
@@ -81,6 +90,10 @@ const FilterButtonOverlay = exports.FilterButtonOverlay = /*#__PURE__*/React.for
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               ref: (0, _utils.mergeRefs)([refs.setFloating, boundaryRef]),
               className: _FilterButtonOverlayModule.default.overlayContainer,
+              "data-testid": (0, _qa.generateTestId)({
+                base: testId,
+                slot: 'overlay'
+              }),
               style: {
                 display: 'flex',
                 position: strategy,
@@ -102,6 +115,10 @@ const FilterButtonOverlay = exports.FilterButtonOverlay = /*#__PURE__*/React.for
                   [_FilterButtonOverlayModule.default.small]: size === 'small',
                   [_FilterButtonOverlayModule.default.medium]: size === 'medium'
                 }, classNames?.overlayContainer),
+                "data-testid": (0, _qa.generateTestId)({
+                  base: testId,
+                  slot: 'content'
+                }),
                 children: children
               })
             })

package/lib/components/FocusManager/FocusManager.d.ts

@@ -9,6 +9,7 @@ export interface FocusManagerProps {
     returnFocus?: boolean;
     guards?: boolean;
     modal?: boolean;
+    testId?: string;
 }
 export declare const FocusManager: (props: FocusManagerProps) => React.JSX.Element;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"FocusManager.d.ts","sourceRoot":"","sources":["../../../src/components/FocusManager/FocusManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,sBA8BpD,CAAC"}
+{"version":3,"file":"FocusManager.d.ts","sourceRoot":"","sources":["../../../src/components/FocusManager/FocusManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,sBA+BpD,CAAC"}

package/lib/components/FocusManager/FocusManager.js

@@ -7,6 +7,7 @@ exports.FocusManager = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _react2 = require("@floating-ui/react");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
 var _FocusManagerModule = _interopRequireDefault(require("./FocusManager.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -25,6 +26,7 @@ const FocusManager = props => {
     returnFocus = true,
     modal = true,
     guards = true,
+    testId,
     ...restFloatingFocusManagerProps
   } = props;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.FloatingFocusManager, {
@@ -36,7 +38,10 @@ const FocusManager = props => {
     ...restFloatingFocusManagerProps,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       ref: refs.setFloating,
-      "data-testid": "FocusManager",
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'focusManager'
+      }),
       className: (0, _classify.default)(_FocusManagerModule.default.wrapper, classNames?.wrapper),
       children: children
     })

package/lib/components/FocusManagerWithArrowKeyNavigation/FocusManagerWithArrowKeyNavigation.d.ts

@@ -4,6 +4,7 @@ import type { FocusManagerProps } from '../../components/FocusManager';
 export interface SkipElementFromNavigationProps {
     children: React.ReactNode;
     className?: string;
+    testId?: string;
 }
 export declare const SkipElementFromNavigation: Flow.AbstractComponent<SkipElementFromNavigationProps, HTMLDivElement>;
 export interface FocusManagerWithArrowKeyNavigationProps extends Omit<FocusManagerProps, 'cols' | 'orientation' | 'focusItemOnOpen' | 'loop' | 'listReference'> {
@@ -14,6 +15,7 @@ export interface FocusManagerWithArrowKeyNavigationProps extends Omit<FocusManag
     listReference?: {
         current: Array<HTMLElement>;
     };
+    testId?: string;
 }
 export declare const FocusManagerWithArrowKeyNavigation: (props: FocusManagerWithArrowKeyNavigationProps) => React.JSX.Element;
 //# sourceMappingURL=FocusManagerWithArrowKeyNavigation.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FocusManagerWithArrowKeyNavigation.d.ts","sourceRoot":"","sources":["../../../src/components/FocusManagerWithArrowKeyNavigation/FocusManagerWithArrowKeyNavigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAIrD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,6BAA6B,CAAC;AAOnE,MAAM,WAAW,8BAA8B;IAC7C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,yBAAyB,EAAE,IAAI,CAAC,iBAAiB,CAC5D,8BAA8B,EAC9B,cAAc,CAUf,CAAC;AAIF,MAAM,WAAW,uCACf,SAAQ,IAAI,CACV,iBAAiB,EACjB,MAAM,GAAG,aAAa,GAAG,iBAAiB,GAAG,MAAM,GAAG,eAAe,CACtE;IACD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACnC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,aAAa,CAAC,EAAE;QACd,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;KAC7B,CAAC;CACH;AAgBD,eAAO,MAAM,kCAAkC,GAC7C,OAAO,uCAAuC,sBAwH/C,CAAC"}
+{"version":3,"file":"FocusManagerWithArrowKeyNavigation.d.ts","sourceRoot":"","sources":["../../../src/components/FocusManagerWithArrowKeyNavigation/FocusManagerWithArrowKeyNavigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAKrD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,6BAA6B,CAAC;AAOnE,MAAM,WAAW,8BAA8B;IAC7C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,yBAAyB,EAAE,IAAI,CAAC,iBAAiB,CAC5D,8BAA8B,EAC9B,cAAc,CAgBf,CAAC;AAIF,MAAM,WAAW,uCACf,SAAQ,IAAI,CACV,iBAAiB,EACjB,MAAM,GAAG,aAAa,GAAG,iBAAiB,GAAG,MAAM,GAAG,eAAe,CACtE;IACD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACnC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,aAAa,CAAC,EAAE;QACd,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;KAC7B,CAAC;IACF,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAgBD,eAAO,MAAM,kCAAkC,GAC7C,OAAO,uCAAuC,sBAyH/C,CAAC"}

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

@@ -6,8 +6,9 @@ export interface RowProps {
     offset?: number;
     gridType?: 'small' | 'medium' | 'large' | 'autoFill' | 'autoFit';
     repeatTracks?: string;
+    testId?: string;
 }
-export declare const Row: ({ className, children, gridType, repeatTracks, }: RowProps) => React.JSX.Element;
+export declare const Row: ({ className, children, gridType, repeatTracks, testId, }: RowProps) => React.JSX.Element;
 export interface ColProps {
     className?: string;
     children?: React.ReactNode;
@@ -15,6 +16,7 @@ export interface ColProps {
     offset?: number;
     gridColumnStart?: number | string;
     gridColumnEnd?: number | string;
+    testId?: string;
 }
-export declare const Col: ({ className, children, gridColumnStart, gridColumnEnd, }: ColProps) => React.JSX.Element;
+export declare const Col: ({ className, children, gridColumnStart, gridColumnEnd, testId, }: ColProps) => React.JSX.Element;
 //# sourceMappingURL=Grid.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,MAAM,WAAW,QAAQ;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,CAAC;IACjE,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAUD,eAAO,MAAM,GAAG,GAAI,kDAKjB,QAAQ,sBA0DV,CAAC;AAEF,MAAM,WAAW,QAAQ;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACjC;AAED,eAAO,MAAM,GAAG,GAAI,0DAKjB,QAAQ,sBAUV,CAAC"}
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,MAAM,WAAW,QAAQ;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,CAAC;IACjE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAUD,eAAO,MAAM,GAAG,GAAI,0DAMjB,QAAQ,sBA0DV,CAAC;AAEF,MAAM,WAAW,QAAQ;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,GAAG,GAAI,kEAMjB,QAAQ,sBAWV,CAAC"}

package/lib/components/Grid/Grid.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.Row = exports.Col = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = require("../../utils/classify");
+var _qa = require("../../utils/qa");
 var _GridModule = _interopRequireDefault(require("./Grid.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -22,7 +23,8 @@ const Row = _ref => {
     className,
     children,
     gridType = 'medium',
-    repeatTracks = '1fr'
+    repeatTracks = '1fr',
+    testId
   } = _ref;
   const gridRepeatCount = GRID_SYSTEM_MAP[gridType];
   let columnSpanCount = 0;
@@ -65,7 +67,10 @@ const Row = _ref => {
     return child;
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    "data-testid": "Grid",
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'row'
+    }),
     className: (0, _classify.classify)(_GridModule.default.gridRow, className),
     style: {
       '--grid-repeat-count': gridRepeatCount,
@@ -80,9 +85,14 @@ const Col = _ref2 => {
     className,
     children,
     gridColumnStart,
-    gridColumnEnd
+    gridColumnEnd,
+    testId
   } = _ref2;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'col'
+    }),
     className: (0, _classify.classify)(_GridModule.default.gridColumn, className),
     style: {
       '--grid-column-start': gridColumnStart || 0,

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"}