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

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

@@ -1 +1 @@
-{"version":3,"file":"RadioTile.d.ts","sourceRoot":"","sources":["../../../src/components/RadioTile/RadioTile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAErD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,kBAAkB,CAAC;AAMxD,OAAO,KAAK,EAAC,QAAQ,EAAE,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAQ5D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC1B,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACzE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,SAAS,EAAE,IAAI,CAAC,iBAAiB,CAAC,cAAc,EAAE,cAAc,CAwE1E,CAAC"}
+{"version":3,"file":"RadioTile.d.ts","sourceRoot":"","sources":["../../../src/components/RadioTile/RadioTile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAErD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,kBAAkB,CAAC;AAOxD,OAAO,KAAK,EAAC,QAAQ,EAAE,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAQ5D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC1B,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACzE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,SAAS,EAAE,IAAI,CAAC,iBAAiB,CAAC,cAAc,EAAE,cAAc,CA8F1E,CAAC"}

package/lib/components/RadioTile/RadioTile.js

@@ -7,6 +7,7 @@ exports.RadioTile = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _common = require("../../types/common");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
 var _Card = require("../Card");
 var _Chip = require("../Chip");
 var _Icon = require("../Icon");
@@ -29,6 +30,7 @@ const RadioTile = exports.RadioTile = /*#__PURE__*/React.forwardRef((_ref, ref)
     iconType = _Icon.ICON_TYPE.solid,
     onTileClick,
     isSelected = false,
+    testId,
     ...props
   } = _ref;
   const handleTileClick = e => {
@@ -37,7 +39,10 @@ const RadioTile = exports.RadioTile = /*#__PURE__*/React.forwardRef((_ref, ref)
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.ClickableCard, {
     ...props,
     ref: ref,
-    "data-testid": "RadioTile",
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'wrapper'
+    }),
     classNames: {
       wrapper: (0, _classify.default)(_RadioTileModule.default.wrapper, classNames?.wrapper)
     },
@@ -48,25 +53,41 @@ const RadioTile = exports.RadioTile = /*#__PURE__*/React.forwardRef((_ref, ref)
         semantic: semantic,
         name: iconName,
         size: iconSize,
-        type: iconType
+        type: iconType,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'icon'
+        })
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: _RadioTileModule.default.contentContainer,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: _RadioTileModule.default.textContainer,
         children: [!!header && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.SubTitleMedium, {
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'header'
+          }),
           children: header
         }), !!description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodyMedium, {
           color: "secondary",
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'description'
+          }),
           children: description
         })]
       }), !!chipItems?.length && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: _RadioTileModule.default.chipsContainer,
-        children: chipItems.map((item, index) =>
-        /*#__PURE__*/
+        children: chipItems.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.Chip
         // eslint-disable-next-line react/no-array-index-key
-        (0, _jsxRuntime.jsx)(_Chip.Chip, {
+        , {
           semantic: "primary",
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'chip',
+            index: index.toString()
+          }),
           children: item
         }, index))
       })]
@@ -78,7 +99,11 @@ const RadioTile = exports.RadioTile = /*#__PURE__*/React.forwardRef((_ref, ref)
         },
         value: id,
         selectedValue: isSelected ? id : '',
-        tabIndex: -1
+        tabIndex: -1,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'radio-button'
+        })
       })
     })]
   });

package/lib/components/RangeSlider/RangeSlider.d.ts

@@ -21,6 +21,7 @@ export interface RangeSliderProps {
     ariaLabel?: string;
     showRange?: boolean;
     hideValueInput?: boolean;
+    testId?: string;
 }
 export declare const RangeSlider: Flow.AbstractComponent<RangeSliderProps, HTMLDivElement>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"RangeSlider.d.ts","sourceRoot":"","sources":["../../../src/components/RangeSlider/RangeSlider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AASrD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AAQtD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,WAAW,gBAAgB;IAC/B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,WAAW,EAAE,IAAI,CAAC,iBAAiB,CAC9C,gBAAgB,EAChB,cAAc,CA8Jf,CAAC"}
+{"version":3,"file":"RangeSlider.d.ts","sourceRoot":"","sources":["../../../src/components/RangeSlider/RangeSlider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAUrD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AAQtD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,WAAW,gBAAgB;IAC/B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,WAAW,EAAE,IAAI,CAAC,iBAAiB,CAC9C,gBAAgB,EAChB,cAAc,CAqKf,CAAC"}

package/lib/components/RangeSlider/RangeSlider.js

@@ -7,6 +7,7 @@ exports.RangeSlider = void 0;
 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 _Input = require("../Input");
 var _Text = require("../Text");
@@ -33,6 +34,7 @@ const RangeSlider = exports.RangeSlider = /*#__PURE__*/React.forwardRef((_ref, r
     ariaLabel = 'Slider',
     showRange,
     hideValueInput,
+    testId,
     ...restInputProps
   } = _ref;
   const progress = (value - min) / (max - min) * 100;
@@ -63,7 +65,10 @@ const RangeSlider = exports.RangeSlider = /*#__PURE__*/React.forwardRef((_ref, r
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     ref: ref,
-    "data-testid": "RangeSlider",
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'wrapper'
+    }),
     className: (0, _classify.default)(_RangeSliderModule.default.wrapper, {
       [_RangeSliderModule.default.disabled]: disabled
     }, classNames?.wrapper),
@@ -73,10 +78,18 @@ const RangeSlider = exports.RangeSlider = /*#__PURE__*/React.forwardRef((_ref, r
       size: btnLeftSize,
       ariaLabel: "Decrease Value",
       disabled: btnLeftDisabled,
-      onClick: () => emitRoundedValue(value - step)
+      onClick: () => emitRoundedValue(value - step),
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'decrease-button'
+      })
     }), showRange && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodySmall, {
       className: _RangeSliderModule.default.rangeText,
       color: disabled ? 'disabled' : 'primary',
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'min-value'
+      }),
       children: min
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: _RangeSliderModule.default.sliderContainer,
@@ -92,6 +105,10 @@ const RangeSlider = exports.RangeSlider = /*#__PURE__*/React.forwardRef((_ref, r
         list: showTicks ? 'ticks' : undefined,
         disabled: disabled,
         "aria-label": ariaLabel,
+        "data-testid": (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'slider'
+        }),
         style: {
           background: `linear-gradient(to right, ${progressColor} ${progress}%, ${_color.colorGrayLightest} ${progress}%)`
         }
@@ -110,6 +127,10 @@ const RangeSlider = exports.RangeSlider = /*#__PURE__*/React.forwardRef((_ref, r
     }), showRange && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodySmall, {
       className: _RangeSliderModule.default.rangeText,
       color: disabled ? 'disabled' : 'primary',
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'max-value'
+      }),
       children: max
     }), !hideRightBtn && !showRange && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
       type: "ghost",
@@ -117,7 +138,11 @@ const RangeSlider = exports.RangeSlider = /*#__PURE__*/React.forwardRef((_ref, r
       size: btnRightSize,
       ariaLabel: "Increase Value",
       disabled: btnRightDisabled,
-      onClick: () => emitRoundedValue(value + step)
+      onClick: () => emitRoundedValue(value + step),
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'increase-button'
+      })
     }), !hideValueInput && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, {
       size: "small",
       type: "number",
@@ -128,7 +153,11 @@ const RangeSlider = exports.RangeSlider = /*#__PURE__*/React.forwardRef((_ref, r
       disabled: disabled,
       onChange: handleInputChange,
       disallowExponents: true,
-      hideNumberSpinner: true
+      hideNumberSpinner: true,
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'value-input'
+      })
     })]
   });
 });

package/lib/components/Rating/Rating.d.ts

@@ -26,6 +26,7 @@ export interface RatingProps {
     iconName?: string;
     classNames?: ClassNames;
     chipSemantic?: ChipSemanticType;
+    testId?: string;
 }
 export declare const Rating: Flow.AbstractComponent<RatingProps, HTMLDivElement>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"Rating.d.ts","sourceRoot":"","sources":["../../../src/components/Rating/Rating.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAIrD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAKrD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,qBAAqB,CAAC;AAS1D,eAAO,MAAM,WAAW;;;EAGtB,CAAC;AAEH,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC,CAAC;AAEH,KAAK,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,OAAO,WAAW,CAAC,CAAC;AAEjE,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACvB,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,QAAQ,CAAC,EAAE,CACT,MAAM,EAAE,MAAM,EACd,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,IAAI,GAAG,SAAS,KACxD,OAAO,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,gBAAgB,CAAC;CACjC;AAED,eAAO,MAAM,MAAM,EAAE,IAAI,CAAC,iBAAiB,CAAC,WAAW,EAAE,cAAc,CAyFpE,CAAC"}
+{"version":3,"file":"Rating.d.ts","sourceRoot":"","sources":["../../../src/components/Rating/Rating.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAIrD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAMrD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,qBAAqB,CAAC;AAS1D,eAAO,MAAM,WAAW;;;EAGtB,CAAC;AAEH,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC,CAAC;AAEH,KAAK,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,OAAO,WAAW,CAAC,CAAC;AAEjE,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACvB,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,QAAQ,CAAC,EAAE,CACT,MAAM,EAAE,MAAM,EACd,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,IAAI,GAAG,SAAS,KACxD,OAAO,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,MAAM,EAAE,IAAI,CAAC,iBAAiB,CAAC,WAAW,EAAE,cAAc,CAwGpE,CAAC"}

package/lib/components/Rating/Rating.js

@@ -8,6 +8,7 @@ var React = _interopRequireWildcard(require("react"));
 var _invariant = _interopRequireDefault(require("invariant"));
 var _lodash = require("lodash");
 var _classify = require("../../utils/classify");
+var _qa = require("../../utils/qa");
 var _rating = require("../../utils/rating");
 var _Button = require("../Button");
 var _Chip = require("../Chip");
@@ -36,7 +37,8 @@ const Rating = exports.Rating = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     iconName = 'star',
     iconColor = _Text.TEXT_COLORS.favorite,
     chipSemantic = _Chip.CHIP_SEMANTIC.warning,
-    classNames
+    classNames,
+    testId
   } = _ref;
   const [hoverIcon, setHoverIcon] = React.useState(-1);
   const chipText = (0, _rating.getRatingLabel)(rating - start, labels);
@@ -44,7 +46,10 @@ const Rating = exports.Rating = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   (0, _invariant.default)(totalIcons, JSON.stringify(_rating.RATING_ERRORS.INVALID_RANGE));
   (0, _invariant.default)((0, _lodash.isUndefined)(labels) || (0, _lodash.isArray)(labels) && labels.length, JSON.stringify(_rating.RATING_ERRORS.INVALID_RATING_LABELS));
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    "data-testid": "Rating",
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'wrapper'
+    }),
     ref: ref,
     className: (0, _classify.classify)(_RatingModule.default.ratingContainer, classNames?.wrapper),
     onBlur: () => !quiet && setHoverIcon(-1),
@@ -69,6 +74,11 @@ const Rating = exports.Rating = /*#__PURE__*/React.forwardRef((_ref, ref) => {
             onClick: e => onChange?.(start + iconCount, e),
             onMouseEnter: () => !quiet && setHoverIcon(iconCount),
             onMouseLeave: () => !quiet && setHoverIcon(-1),
+            testId: (0, _qa.generateTestId)({
+              base: testId,
+              slot: 'star-button',
+              index: iconCount.toString()
+            }),
             children: children
           }),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
@@ -76,13 +86,22 @@ const Rating = exports.Rating = /*#__PURE__*/React.forwardRef((_ref, ref) => {
             name: iconName,
             type: iconType,
             color: iconColor,
-            className: (0, _classify.classify)(_RatingModule.default.icon, classNames?.icon)
+            className: (0, _classify.classify)(_RatingModule.default.icon, classNames?.icon),
+            testId: (0, _qa.generateTestId)({
+              base: testId,
+              slot: 'star-icon',
+              index: iconCount.toString()
+            })
           })
         }, iconCount);
       })
     }), !hideLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.Chip, {
       size: size,
       semantic: chipSemantic,
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'rating-chip'
+      }),
       children: chipText
     })]
   });

package/lib/components/ScoreBar/ScoreBar.d.ts

@@ -22,6 +22,7 @@ export interface ScoreBarProps {
     totalBars?: number;
     score?: number;
     withBorder?: boolean;
+    testId?: string;
 }
 export declare const DEFAULT_COLOR_MAP: ScoreBarColorMap;
 export declare const ScoreBar: Flow.AbstractComponent<ScoreBarProps, HTMLDivElement>;

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

@@ -1 +1 @@
-{"version":3,"file":"ScoreBar.d.ts","sourceRoot":"","sources":["../../../src/components/ScoreBar/ScoreBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAyBrD,eAAO,MAAM,SAAS;;;EAGpB,CAAC;AAEH,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,OAAO,SAAS,CAAC,CAAC;AAE3E,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC;IACtC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB,CAAC,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,CAAC;AAEhD,MAAM,WAAW,aAAa;IAC5B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAGD,eAAO,MAAM,iBAAiB,EAAE,gBAO/B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,IAAI,CAAC,iBAAiB,CAAC,aAAa,EAAE,cAAc,CAqExE,CAAC"}
+{"version":3,"file":"ScoreBar.d.ts","sourceRoot":"","sources":["../../../src/components/ScoreBar/ScoreBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AA0BrD,eAAO,MAAM,SAAS;;;EAGpB,CAAC;AAEH,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,OAAO,SAAS,CAAC,CAAC;AAE3E,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC;IACtC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB,CAAC,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,CAAC;AAEhD,MAAM,WAAW,aAAa;IAC5B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAGD,eAAO,MAAM,iBAAiB,EAAE,gBAO/B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,IAAI,CAAC,iBAAiB,CAAC,aAAa,EAAE,cAAc,CA4ExE,CAAC"}

package/lib/components/ScoreBar/ScoreBar.js

@@ -10,6 +10,7 @@ var _clamp = _interopRequireDefault(require("lodash/clamp"));
 var _color = require("../../styles/variables/_color");
 var _size = require("../../styles/variables/_size");
 var _classify = require("../../utils/classify");
+var _qa = require("../../utils/qa");
 var _scoreBar = require("../../utils/score-bar");
 var _Text = require("../Text");
 var _ScoreBarModule = _interopRequireDefault(require("./ScoreBar.module.css"));
@@ -37,13 +38,17 @@ const ScoreBar = exports.ScoreBar = /*#__PURE__*/React.forwardRef((_ref, ref) =>
     direction = 'vertical',
     classNames,
     withBorder = false,
-    labelMap
+    labelMap,
+    testId
   } = _ref;
   (0, _invariant.default)(totalBars > 0, JSON.stringify(_scoreBar.SCORE_BAR_ERRORS.INVALID_BAR_COUNT));
   const activeLabel = (0, _scoreBar.getLabelByScorePercentage)(score, totalBars, labelMap);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     ref: ref,
-    "data-testid": "ScoreBar",
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'scoreBar'
+    }),
     className: (0, _classify.classify)(_ScoreBarModule.default.scoreBarWrapper, {
       [_ScoreBarModule.default.scoreBarBorder]: withBorder
     }, classNames?.wrapper),
@@ -55,6 +60,11 @@ const ScoreBar = exports.ScoreBar = /*#__PURE__*/React.forwardRef((_ref, ref) =>
         '--width': direction === Direction.vertical ? _size.size18 : 'unset'
       },
       children: [...Array(totalBars).keys()].reverse().map(count => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        "data-testid": (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'bar',
+          index: count
+        }),
         className: (0, _classify.classify)(_ScoreBarModule.default.bar, classNames?.bar),
         style: {
           '--background-color': (0, _scoreBar.getColorByScorePercentage)(totalBars, (0, _clamp.default)(score, 0, totalBars), count, colorMap),
@@ -64,6 +74,10 @@ const ScoreBar = exports.ScoreBar = /*#__PURE__*/React.forwardRef((_ref, ref) =>
       }, count))
     }), activeLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.SubTitleExtraSmall, {
       className: (0, _classify.classify)(_ScoreBarModule.default.scoreBarLabel, classNames?.label),
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'label'
+      }),
       children: activeLabel
     })]
   });

package/lib/components/SearchInput/SearchInput.d.ts

@@ -9,6 +9,7 @@ export interface SearchInputProps extends Omit<InputProps, 'classNames' | 'onCle
     classNames?: ClassNames;
     onClear?: () => void;
     isLoading?: boolean;
+    testId?: string;
 }
 export declare const SearchInput: Flow.AbstractComponent<SearchInputProps, HTMLInputElement>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAKrD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAMrD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAEH,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,UAAU,EAAE,YAAY,GAAG,SAAS,GAAG,WAAW,CAAC;IAChE,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,EAAE,IAAI,CAAC,iBAAiB,CAC9C,gBAAgB,EAChB,gBAAgB,CA2DjB,CAAC"}
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAMrD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAMrD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAEH,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,UAAU,EAAE,YAAY,GAAG,SAAS,GAAG,WAAW,CAAC;IAChE,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,WAAW,EAAE,IAAI,CAAC,iBAAiB,CAC9C,gBAAgB,EAChB,gBAAgB,CAqEjB,CAAC"}

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