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

package/lib/components/SearchInput/SearchInput.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.SearchInput = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
 var _CircularLoader = require("../CircularLoader");
 var _Input = require("../Input");
 var _SearchInputModule = _interopRequireDefault(require("./SearchInput.module.css"));
@@ -23,6 +24,7 @@ const SearchInput = exports.SearchInput = /*#__PURE__*/React.forwardRef((_ref, r
     isLoading,
     size,
     iconLeftName = 'magnifying-glass',
+    testId,
     ...searchInputProps
   } = _ref;
   const handleClearClick = () => {
@@ -32,6 +34,10 @@ const SearchInput = exports.SearchInput = /*#__PURE__*/React.forwardRef((_ref, r
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _classify.default)(_SearchInputModule.default.searchInputWrapper, classNames?.wrapper),
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'wrapper'
+    }),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, {
       ...searchInputProps,
       type: "text",
@@ -48,15 +54,27 @@ const SearchInput = exports.SearchInput = /*#__PURE__*/React.forwardRef((_ref, r
       iconLeftName: iconLeftName,
       size: size,
       iconRightName: value && !(disabled || locked) ? 'xmark' : 'fw',
-      onIconRightClick: handleClearClick
+      onIconRightClick: handleClearClick,
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'input'
+      })
     }), isLoading && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _classify.default)(_SearchInputModule.default.loaderContainer, {
         [_SearchInputModule.default.small]: size === 'small'
       }),
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'loader-container'
+      }),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularLoader.CircularLoader, {
         colorToken: "colorFillPrimary",
         className: _SearchInputModule.default.loader,
-        size: "small"
+        size: "small",
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'loader'
+        })
       })
     })]
   });

package/lib/components/Separator/Separator.d.ts

@@ -12,6 +12,7 @@ export interface SeparatorProps {
     orientation?: OrientationType;
     width?: string;
     height?: string;
+    testId?: string;
 }
 export declare const Separator: Flow.AbstractComponent<SeparatorProps, HTMLDivElement>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../../../src/components/Separator/Separator.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAQrD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,eAAO,MAAM,WAAW;;;EAGtB,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,OAAO,WAAW,CAAC,CAAC;AAE7E,MAAM,WAAW,cAAc;IAC7B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,SAAS,EAAE,IAAI,CAAC,iBAAiB,CAAC,cAAc,EAAE,cAAc,CA+B1E,CAAC"}
+{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../../../src/components/Separator/Separator.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AASrD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,eAAO,MAAM,WAAW;;;EAGtB,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,OAAO,WAAW,CAAC,CAAC;AAE7E,MAAM,WAAW,cAAc;IAC7B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,SAAS,EAAE,IAAI,CAAC,iBAAiB,CAAC,cAAc,EAAE,cAAc,CAgC1E,CAAC"}

package/lib/components/Separator/Separator.js

@@ -7,6 +7,7 @@ exports.Separator = exports.ORIENTATION = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _size = require("../../styles/variables/_size");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
 var _SeparatorModule = _interopRequireDefault(require("./Separator.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -20,7 +21,8 @@ const Separator = exports.Separator = /*#__PURE__*/React.forwardRef((_ref, ref)
     classNames,
     orientation = ORIENTATION.vertical,
     width,
-    height
+    height,
+    testId
   } = _ref;
   // Dynamically compute width and height based on orientation if not provided
   const resolvedWidth = width || (orientation === ORIENTATION.vertical ? _size.size2 : 'auto');
@@ -31,7 +33,10 @@ const Separator = exports.Separator = /*#__PURE__*/React.forwardRef((_ref, ref)
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ref: ref,
-    "data-testid": "Separator",
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'separator'
+    }),
     style: style,
     className: (0, _classify.default)(_SeparatorModule.default.wrapper, classNames?.wrapper)
   });

package/lib/components/Shimmer/Shimmer.d.ts

@@ -24,9 +24,11 @@ export interface ShimmerProps {
     height?: number | string;
     borderRadius?: number | string;
     children?: React.ReactNode;
+    testId?: string;
 }
 export interface ShimmerWrapperProps {
     children?: React.ReactNode;
+    testId?: string;
 }
 /**
  * Note(Nishant): ShimmerWrapper is a wrapper component for Shimmer component. This should only be used for Text based Shimmers
@@ -37,7 +39,7 @@ export interface ShimmerWrapperProps {
  * This would ensure the layout remains same even when you toggle the shimmer to show your actual content
  * @param {React.Node} children - The children to be rendered
  */
-export declare const ShimmerWrapper: ({ children, }: ShimmerWrapperProps) => React.ReactElement<React.ComponentProps<"span">>;
+export declare const ShimmerWrapper: ({ children, testId, }: ShimmerWrapperProps) => React.ReactElement<React.ComponentProps<"span">>;
 export declare const Shimmer: Flow.AbstractComponent<ShimmerProps, HTMLSpanElement>;
 type KPIShimmerClassNames = Readonly<{
     wrapper?: string;
@@ -51,7 +53,8 @@ export interface KPIShimmerProps {
     hasBottomContent?: boolean;
     hasIcon?: boolean;
     classNames?: KPIShimmerClassNames;
+    testId?: string;
 }
-export declare const KPIShimmer: ({ textWidth, hasBottomContent, hasIcon, hasTopContent, hasMiddleContent, classNames, }: KPIShimmerProps) => React.JSX.Element;
+export declare const KPIShimmer: ({ textWidth, hasBottomContent, hasIcon, hasTopContent, hasMiddleContent, classNames, testId, }: KPIShimmerProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=Shimmer.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Shimmer.d.ts","sourceRoot":"","sources":["../../../src/components/Shimmer/Shimmer.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;CAClB,CAAC,CAAC;AAEH,eAAO,MAAM,aAAa;;;;;EAKxB,CAAC;AAEH,eAAO,MAAM,iCAAiC;;;;;EAK5C,CAAC;AAEH,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,OAAO,aAAa,CAAC,CAAC;AAE7E,MAAM,WAAW,YAAY;IAC3B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,cAAc,GAAI,eAE5B,mBAAmB,KAAG,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAEvE,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,YAAY,EAAE,eAAe,CAkCvE,CAAC;AAEJ,KAAK,oBAAoB,GAAG,QAAQ,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAEH,MAAM,WAAW,eAAe;IAC9B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,oBAAoB,CAAC;CACnC;AAED,eAAO,MAAM,UAAU,GAAI,wFAOxB,eAAe,sBAmBjB,CAAC"}
+{"version":3,"file":"Shimmer.d.ts","sourceRoot":"","sources":["../../../src/components/Shimmer/Shimmer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAgBrD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,eAAO,MAAM,aAAa;;;;;EAKxB,CAAC;AAEH,eAAO,MAAM,iCAAiC;;;;;EAK5C,CAAC;AAEH,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,OAAO,aAAa,CAAC,CAAC;AAE7E,MAAM,WAAW,YAAY;IAC3B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,cAAc,GAAI,uBAG5B,mBAAmB,KAAG,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAIvE,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,YAAY,EAAE,eAAe,CAmCvE,CAAC;AAEJ,KAAK,oBAAoB,GAAG,QAAQ,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAEH,MAAM,WAAW,eAAe;IAC9B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,oBAAoB,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,UAAU,GAAI,gGAQxB,eAAe,sBA0CjB,CAAC"}

package/lib/components/Shimmer/Shimmer.js

@@ -8,6 +8,7 @@ var React = _interopRequireWildcard(require("react"));
 var _border = require("../../styles/variables/_border");
 var _size = require("../../styles/variables/_size");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
 var _string = require("../../utils/string");
 var _ShimmerModule = _interopRequireDefault(require("./Shimmer.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -36,9 +37,14 @@ const SHIMMER_TYPE_TO_BORDER_RADIUS_MAP = exports.SHIMMER_TYPE_TO_BORDER_RADIUS_
  */
 const ShimmerWrapper = _ref => {
   let {
-    children
+    children,
+    testId
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'wrapper'
+    }),
     children: children
   });
 };
@@ -51,7 +57,8 @@ const Shimmer = exports.Shimmer = /*#__PURE__*/React.forwardRef((_ref2, ref) =>
     children,
     width = _size.size40,
     height = _size.sizeFluid,
-    borderRadius
+    borderRadius,
+    testId
   } = _ref2;
   if (!show) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
@@ -61,7 +68,10 @@ const Shimmer = exports.Shimmer = /*#__PURE__*/React.forwardRef((_ref2, ref) =>
   const borderRadiusValue = borderRadius ?? SHIMMER_TYPE_TO_BORDER_RADIUS_MAP[type];
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
     ref: ref,
-    "data-testid": "Shimmer",
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'shimmer'
+    }),
     className: (0, _classify.default)(_ShimmerModule.default.wrapper, _ShimmerModule.default[type], classNames?.wrapper),
     style: {
       '--width': (0, _string.appendPx)(width),
@@ -77,31 +87,52 @@ const KPIShimmer = _ref3 => {
     hasIcon = true,
     hasTopContent = true,
     hasMiddleContent = true,
-    classNames
+    classNames,
+    testId
   } = _ref3;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'kpiShimmer'
+    }),
     className: (0, _classify.default)(_ShimmerModule.default.kpiBox, classNames?.wrapper),
     children: [hasIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _classify.default)(_ShimmerModule.default.section, _ShimmerModule.default.iconSection, classNames?.icon),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Shimmer, {
         type: "rounded",
         width: 60,
-        height: 60
+        height: 60,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'iconShimmer'
+        })
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _classify.default)(_ShimmerModule.default.section, classNames?.text),
       children: [hasTopContent && /*#__PURE__*/(0, _jsxRuntime.jsx)(Shimmer, {
         type: "text",
         width: textWidth,
-        height: 15
+        height: 15,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'topTextShimmer'
+        })
       }), hasMiddleContent && /*#__PURE__*/(0, _jsxRuntime.jsx)(Shimmer, {
         type: "text",
         width: textWidth,
-        height: 25
+        height: 25,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'middleTextShimmer'
+        })
       }), hasBottomContent && /*#__PURE__*/(0, _jsxRuntime.jsx)(Shimmer, {
         type: "text",
         width: textWidth,
-        height: 15
+        height: 15,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'bottomTextShimmer'
+        })
       })]
     })]
   });

package/lib/components/SideMenuLink/SideMenuLink.d.ts

@@ -205,6 +205,7 @@ export interface SideMenuLinkProps {
     rightSlot?: React.ReactNode;
     linkComponent?: Flow.AbstractComponent<BaseLinkProps, HTMLAnchorElement | null | undefined>;
     status?: StatusSemanticType;
+    testId?: string;
 }
 export declare const SideMenuLink: Flow.AbstractComponent<SideMenuLinkProps, HTMLButtonElement>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"SideMenuLink.d.ts","sourceRoot":"","sources":["../../../src/components/SideMenuLink/SideMenuLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAQrD,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAEvD,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,gCAAgC,CAAC;AAGvE,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,wBAAwB,CAAC;AAM7D,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqLzB,CAAC;AAEH,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,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CACT,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EACpC,QAAQ,EAAE,MAAM,KACb,OAAO,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,aAAa,CAAC,EAAE,IAAI,CAAC,iBAAiB,CACpC,aAAa,EACb,iBAAiB,GAAG,IAAI,GAAG,SAAS,CACrC,CAAC;IACF,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC7B;AAED,eAAO,MAAM,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAC/C,iBAAiB,EACjB,iBAAiB,CA6HlB,CAAC"}
+{"version":3,"file":"SideMenuLink.d.ts","sourceRoot":"","sources":["../../../src/components/SideMenuLink/SideMenuLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AASrD,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAEvD,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,gCAAgC,CAAC;AAGvE,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,wBAAwB,CAAC;AAM7D,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqLzB,CAAC;AAEH,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,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CACT,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EACpC,QAAQ,EAAE,MAAM,KACb,OAAO,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,aAAa,CAAC,EAAE,IAAI,CAAC,iBAAiB,CACpC,aAAa,EACb,iBAAiB,GAAG,IAAI,GAAG,SAAS,CACrC,CAAC;IACF,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAC/C,iBAAiB,EACjB,iBAAiB,CA+IlB,CAAC"}

package/lib/components/SideMenuLink/SideMenuLink.js

@@ -7,6 +7,7 @@ exports.SideMenuLink = exports.MENU_NAME_LIST = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
 var _Button = require("../Button");
 var _ConditionalWrapper = require("../ConditionalWrapper");
 var _Icon = require("../Icon");
@@ -216,6 +217,7 @@ const SideMenuLink = exports.SideMenuLink = /*#__PURE__*/React.forwardRef((_ref,
     to,
     customTitle,
     status,
+    testId,
     ...restButtonProps
   } = _ref;
   const selected = selectedValue === pageNameKey;
@@ -234,6 +236,10 @@ const SideMenuLink = exports.SideMenuLink = /*#__PURE__*/React.forwardRef((_ref,
         [_SideMenuLinkModule.default.closed]: !opened
       }),
       onClick: onChangeHandler,
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'link'
+      }),
       children: children
     }),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.ConditionalWrapper, {
@@ -241,6 +247,10 @@ const SideMenuLink = exports.SideMenuLink = /*#__PURE__*/React.forwardRef((_ref,
       wrapper: children => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
         body: linkTitle,
         ...tooltip,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'tooltip'
+        }),
         children: children
       }),
       children: /*#__PURE__*/(0, _react.createElement)(_Button.UnstyledButton, {
@@ -255,28 +265,48 @@ const SideMenuLink = exports.SideMenuLink = /*#__PURE__*/React.forwardRef((_ref,
         ref: ref,
         tabIndex: disabled ? -1 : tabIndex,
         disabled: disabled,
-        key: pageNameKey
+        key: pageNameKey,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'button'
+        })
       }, pageNameKey && MENU_NAME_LIST[pageNameKey] ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: _SideMenuLinkModule.default.iconContainer,
         children: [status && /*#__PURE__*/(0, _jsxRuntime.jsx)(_StatusIndicator.StatusIndicator, {
           status: status,
           classNames: {
             wrapper: _SideMenuLinkModule.default.statusIndicatorBlock
-          }
+          },
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'status-indicator'
+          })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
           type: MENU_NAME_LIST[pageNameKey].iconType,
           name: MENU_NAME_LIST[pageNameKey].iconName,
           size: "medium",
           color: _Text.TEXT_COLORS.inverseSecondary,
-          className: _SideMenuLinkModule.default.menuIcon
+          className: _SideMenuLinkModule.default.menuIcon,
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'icon'
+          })
         })]
       }) : null, opened ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: _SideMenuLinkModule.default.menuLabelContainer,
         children: [pageNameKey && MENU_NAME_LIST[pageNameKey] ? isGroupMenuLink ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.SubTitleSmall, {
           className: _SideMenuLinkModule.default.groupMenuLinkText,
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'title'
+          }),
           children: linkTitle
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodyMedium, {
           className: _SideMenuLinkModule.default.menuLinkText,
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'title'
+          }),
           children: linkTitle
         }) : null, rightSlot ? rightSlot : null]
       }) : null)

package/lib/components/StatusIndicator/StatusIndicator.d.ts

@@ -19,6 +19,7 @@ export interface StatusIndicatorProps {
     withBorder?: boolean;
     borderColorToken?: keyof typeof COLORS;
     disabled?: boolean;
+    testId?: string;
 }
 export declare const StatusIndicator: Flow.AbstractComponent<StatusIndicatorProps, HTMLDivElement>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"StatusIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/StatusIndicator/StatusIndicator.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAErD,OAAO,KAAK,MAAM,MAAM,6BAA6B,CAAC;AAMtD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;EAQ1B,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAC5B,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,OAAO,eAAe,CAAC,CAAC;AAEzD,MAAM,WAAW,oBAAoB;IACnC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,eAAe,EAAE,IAAI,CAAC,iBAAiB,CAClD,oBAAoB,EACpB,cAAc,CAgCf,CAAC"}
+{"version":3,"file":"StatusIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/StatusIndicator/StatusIndicator.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAErD,OAAO,KAAK,MAAM,MAAM,6BAA6B,CAAC;AAOtD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;EAQ1B,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAC5B,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,OAAO,eAAe,CAAC,CAAC;AAEzD,MAAM,WAAW,oBAAoB;IACnC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,eAAe,EAAE,IAAI,CAAC,iBAAiB,CAClD,oBAAoB,EACpB,cAAc,CAiCf,CAAC"}

package/lib/components/StatusIndicator/StatusIndicator.js

@@ -7,6 +7,7 @@ exports.StatusIndicator = exports.STATUS_SEMANTIC = void 0;
 var React = _interopRequireWildcard(require("react"));
 var COLORS = _interopRequireWildcard(require("../../styles/variables/_color"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
 var _StatusIndicatorModule = _interopRequireDefault(require("./StatusIndicator.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -27,11 +28,15 @@ const StatusIndicator = exports.StatusIndicator = /*#__PURE__*/React.forwardRef(
     withBorder,
     borderColorToken = 'colorBackgroundTertiary',
     disabled,
+    testId,
     ...props
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ...props,
-    "data-testid": "StatusIndicator",
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'indicator'
+    }),
     className: (0, _classify.default)(_StatusIndicatorModule.default.statusWrapper, _StatusIndicatorModule.default[status], {
       [_StatusIndicatorModule.default.withBorder]: withBorder,
       [_StatusIndicatorModule.default.disabled]: disabled

package/lib/components/Stepper/Step/Step.d.ts

@@ -19,6 +19,7 @@ export interface StepProps {
     onClick?: (idx: number, e?: React.SyntheticEvent<HTMLElement> | null | undefined) => unknown;
     iconName?: string;
     iconType?: IconType;
+    testId?: string;
 }
 export declare const Step: Flow.AbstractComponent<StepProps, HTMLDivElement>;
 export {};

package/lib/components/Stepper/Step/Step.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../../../src/components/Stepper/Step/Step.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAIrD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAalD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,WAAW,SAAS;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,CACR,GAAG,EAAE,MAAM,EACX,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,IAAI,GAAG,SAAS,KACrD,OAAO,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB;AAED,eAAO,MAAM,IAAI,EAAE,IAAI,CAAC,iBAAiB,CAAC,SAAS,EAAE,cAAc,CA8FhE,CAAC"}
+{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../../../src/components/Stepper/Step/Step.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;AAclD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,WAAW,SAAS;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,CACR,GAAG,EAAE,MAAM,EACX,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,IAAI,GAAG,SAAS,KACrD,OAAO,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,IAAI,EAAE,IAAI,CAAC,iBAAiB,CAAC,SAAS,EAAE,cAAc,CAuGhE,CAAC"}

package/lib/components/Stepper/Step/Step.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.Step = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../../utils/classify"));
+var _qa = require("../../../utils/qa");
 var _Icon = require("../../Icon");
 var _StepperModule = _interopRequireDefault(require("../Stepper.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -26,7 +27,8 @@ const Step = exports.Step = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onClick,
     allowClick,
     iconName,
-    iconType
+    iconType,
+    testId
   } = _ref;
   const childrenArray = React.Children.toArray(children).filter(Boolean);
   const stepContent = childrenArray.map(stepContent => {
@@ -35,7 +37,11 @@ const Step = exports.Step = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         ...stepContent.props,
         active,
         completed,
-        disabled
+        disabled,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'content'
+        })
       });
     }
     return stepContent;
@@ -52,6 +58,10 @@ const Step = exports.Step = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       [_StepperModule.default.clickable]: allowClick
     }, classNames?.wrapper),
     onClick: handleClick,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'root'
+    }),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _classify.default)(_StepperModule.default.stepWrapperCounter, {
         [_StepperModule.default.selected]: active,
@@ -61,21 +71,37 @@ const Step = exports.Step = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         [_StepperModule.default.disabled]: disabled,
         [_StepperModule.default.withIcon]: !!iconName
       }, classNames?.stepCounter),
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'counter'
+      }),
       children: completed && !active ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
         name: "check",
         type: _Icon.ICON_TYPE.solid,
         size: _Icon.ICON_SIZE.small,
-        className: _StepperModule.default.stepIcon
+        className: _StepperModule.default.stepIcon,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'check-icon'
+        })
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
         children: iconName ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
           name: iconName,
           className: _StepperModule.default.stepIcon,
           size: _Icon.ICON_SIZE.small,
-          type: iconType
+          type: iconType,
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'icon'
+          })
         }) : (index + 1).toString()
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _classify.default)(_StepperModule.default.stepContent, classNames?.content),
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'content'
+      }),
       children: stepContent
     })]
   });

package/lib/components/Stepper/Step/StepContent.d.ts

@@ -8,7 +8,8 @@ export interface StepContentProps {
     completed?: boolean;
     disabled?: boolean;
     classNames?: ClassNames;
+    testId?: string;
 }
-export declare const StepContent: ({ children, classNames, active, completed, disabled, }: StepContentProps) => React.JSX.Element;
+export declare const StepContent: ({ children, classNames, active, completed, disabled, testId, }: StepContentProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=StepContent.d.ts.map

package/lib/components/Stepper/Step/StepContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StepContent.d.ts","sourceRoot":"","sources":["../../../../src/components/Stepper/Step/StepContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAED,eAAO,MAAM,WAAW,GAAI,wDAMzB,gBAAgB,sBAclB,CAAC"}
+{"version":3,"file":"StepContent.d.ts","sourceRoot":"","sources":["../../../../src/components/Stepper/Step/StepContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,WAAW,GAAI,gEAOzB,gBAAgB,sBAelB,CAAC"}

package/lib/components/Stepper/Step/StepContent.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.StepContent = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = require("../../../utils/classify");
+var _qa = require("../../../utils/qa");
 var _StepperModule = _interopRequireDefault(require("../Stepper.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -16,7 +17,8 @@ const StepContent = _ref => {
     classNames,
     active,
     completed = false,
-    disabled = false
+    disabled = false,
+    testId
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: (0, _classify.classify)(_StepperModule.default.stepContentWrapper, {
@@ -24,6 +26,10 @@ const StepContent = _ref => {
       [_StepperModule.default.completed]: completed,
       [_StepperModule.default.disabled]: disabled
     }, classNames?.wrapper),
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'root'
+    }),
     children: children
   });
 };

package/lib/components/Stepper/Step/StepLabel.d.ts

@@ -8,7 +8,8 @@ export interface StepLabelProps {
     completed?: boolean;
     disabled?: boolean;
     classNames?: ClassNames;
+    testId?: string;
 }
-export declare const StepLabel: ({ children, classNames, active, completed, disabled, }: StepLabelProps) => React.JSX.Element;
+export declare const StepLabel: ({ children, classNames, active, completed, disabled, testId, }: StepLabelProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=StepLabel.d.ts.map

package/lib/components/Stepper/Step/StepLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StepLabel.d.ts","sourceRoot":"","sources":["../../../../src/components/Stepper/Step/StepLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAED,eAAO,MAAM,SAAS,GAAI,wDAMvB,cAAc,sBAchB,CAAC"}
+{"version":3,"file":"StepLabel.d.ts","sourceRoot":"","sources":["../../../../src/components/Stepper/Step/StepLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,SAAS,GAAI,gEAOvB,cAAc,sBAehB,CAAC"}

package/lib/components/Stepper/Step/StepLabel.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.StepLabel = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = require("../../../utils/classify");
+var _qa = require("../../../utils/qa");
 var _StepperModule = _interopRequireDefault(require("../Stepper.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -16,7 +17,8 @@ const StepLabel = _ref => {
     classNames,
     active,
     completed = false,
-    disabled = false
+    disabled = false,
+    testId
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: (0, _classify.classify)(_StepperModule.default.stepLabelWrapper, {
@@ -24,6 +26,10 @@ const StepLabel = _ref => {
       [_StepperModule.default.completed]: completed,
       [_StepperModule.default.disabled]: disabled
     }, classNames?.wrapper),
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'root'
+    }),
     children: children
   });
 };

package/lib/components/Stepper/Stepper.d.ts

@@ -9,6 +9,7 @@ export interface StepperProps {
     children: React.ReactNode;
     orientation?: 'horizontal' | 'vertical';
     disabled?: boolean;
+    testId?: string;
 }
 export declare const Stepper: Flow.AbstractComponent<StepperProps, HTMLDivElement>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/Stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAOrD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAiBH,MAAM,WAAW,YAAY;IAC3B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,YAAY,EAAE,cAAc,CA+DtE,CAAC"}
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/Stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAQrD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAkBH,MAAM,WAAW,YAAY;IAC3B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,YAAY,EAAE,cAAc,CAsEtE,CAAC"}

package/lib/components/Stepper/Stepper.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.Stepper = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = require("../../utils/classify");
+var _qa = require("../../utils/qa");
 var _StepperModule = _interopRequireDefault(require("./Stepper.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -20,7 +21,8 @@ const Stepper = exports.Stepper = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     children,
     orientation = 'horizontal',
     classNames,
-    disabled = false
+    disabled = false,
+    testId
   } = _ref;
   const childrenArray = React.Children.toArray(children).filter(Boolean);
   const steps = childrenArray.map((step, index) => {
@@ -55,12 +57,21 @@ const Stepper = exports.Stepper = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       last: index + 1 === childrenArray.length,
       active: index === activeStep,
       allowClick: onClick && index !== activeStep && isLastStepCompleted,
-      disabled: disabledChild || disabled
+      disabled: disabledChild || disabled,
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'step',
+        index: index.toString()
+      })
     });
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: (0, _classify.classify)(_StepperModule.default.stepperWrapper, _StepperModule.default[orientation], classNames?.wrapper),
     ref: ref,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'root'
+    }),
     children: steps
   });
 });