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

package/lib/components/PromptInput/PromptInput.js

@@ -7,6 +7,7 @@ exports.PromptInput = 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 _Button = require("../Button");
 var _Icon = require("../Icon");
 var _Text = require("../Text");
@@ -46,7 +47,8 @@ const PromptInput = exports.PromptInput = /*#__PURE__*/React.forwardRef((_ref, r
     buttonAriaLabel = CONSTANTS.BUTTON_ARIA_LABEL,
     isButtonLoading,
     buttonIconLeftName = CONSTANTS.BUTTON_ICON,
-    buttonIconLeftType = _Icon.ICON_TYPE.solid
+    buttonIconLeftType = _Icon.ICON_TYPE.solid,
+    testId
   } = _ref;
   const textareaRef = React.useRef(null);
   const handleInput = () => {
@@ -73,7 +75,10 @@ const PromptInput = exports.PromptInput = /*#__PURE__*/React.forwardRef((_ref, r
   }, [value, textCountLimit]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     ref: ref,
-    "data-testid": "PromptInput",
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'wrapper'
+    }),
     className: (0, _classify.default)(_PromptInputModule.default.wrapper, {
       [_PromptInputModule.default.styledPromptContainer]: withPadding
     }, classNames?.wrapper),
@@ -96,7 +101,11 @@ const PromptInput = exports.PromptInput = /*#__PURE__*/React.forwardRef((_ref, r
         locked: inputLocked,
         error: inputError || textCountError,
         errorText: inputErrorText,
-        rows: CONSTANTS.TEXT_AREA_ROWS
+        rows: CONSTANTS.TEXT_AREA_ROWS,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'textarea'
+        })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
         iconLeftName: buttonIconLeftName,
         iconLeftType: buttonIconLeftType,
@@ -110,16 +119,28 @@ const PromptInput = exports.PromptInput = /*#__PURE__*/React.forwardRef((_ref, r
           icon: classNames?.buttonIcon,
           text: classNames?.buttonText
         },
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'button'
+        }),
         children: buttonText
       })]
     }), (!!helperContent || !!textCountLimit) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: _PromptInputModule.default.secondaryRow,
       children: [typeof helperContent === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodySmallBold, {
         color: inputDisabled ? 'disabled' : 'secondary',
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'helper-text'
+        }),
         children: helperContent
       }) : helperContent, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.FormLabelSmall, {
         color: inputError || textCountError ? 'danger' : 'secondary',
         className: _PromptInputModule.default.textCounter,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'text-counter'
+        }),
         children: !!textCountLimit && (value && value.length || 0) + '/' + textCountLimit
       })]
     })]

package/lib/components/RadioButton/RadioButton.d.ts

@@ -25,6 +25,7 @@ export interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInp
     onChange?: (newValue: string) => unknown;
     tabIndex?: number;
     ariaLabel?: string;
+    testId?: string;
 }
 export declare const RadioButton: Flow.AbstractComponent<RadioButtonProps, HTMLInputElement>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButton.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,kBAAkB,CAAC;AAKjD;;;;;GAKG;AACH,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC,CAAC;AAEH,MAAM,WAAW,gBACf,SAAQ,IAAI,CACV,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACzC,UAAU,GACV,OAAO,GACP,UAAU,GACV,SAAS,GACT,MAAM,GACN,eAAe,GACf,OAAO,GACP,YAAY,GACZ,OAAO,GACP,UAAU,GACV,UAAU,GACV,WAAW,CACd;IACD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,EAAE,IAAI,CAAC,iBAAiB,CAC9C,gBAAgB,EAChB,gBAAgB,CAyGjB,CAAC"}
+{"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButton.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,kBAAkB,CAAC;AAMjD;;;;;GAKG;AACH,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC,CAAC;AAEH,MAAM,WAAW,gBACf,SAAQ,IAAI,CACV,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACzC,UAAU,GACV,OAAO,GACP,UAAU,GACV,SAAS,GACT,MAAM,GACN,eAAe,GACf,OAAO,GACP,YAAY,GACZ,OAAO,GACP,UAAU,GACV,UAAU,GACV,WAAW,CACd;IACD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,WAAW,EAAE,IAAI,CAAC,iBAAiB,CAC9C,gBAAgB,EAChB,gBAAgB,CA6GjB,CAAC"}

package/lib/components/RadioButton/RadioButton.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.RadioButton = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
 var _RadioButtonModule = _interopRequireDefault(require("./RadioButton.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -31,6 +32,7 @@ const RadioButton = exports.RadioButton = /*#__PURE__*/React.forwardRef((_ref, f
     error = false,
     tabIndex = 0,
     ariaLabel = '',
+    testId,
     ...props
   } = _ref;
   const radioInput = /*#__PURE__*/React.createRef();
@@ -55,6 +57,10 @@ const RadioButton = exports.RadioButton = /*#__PURE__*/React.forwardRef((_ref, f
     }
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'radioButton'
+    }),
     className: (0, _classify.default)(_RadioButtonModule.default.container, {
       [_RadioButtonModule.default.horizontalRadioButton]: align === 'horizontal-fixed',
       [_RadioButtonModule.default.fluidRadioButton]: align === 'horizontal-fluid',
@@ -63,6 +69,10 @@ const RadioButton = exports.RadioButton = /*#__PURE__*/React.forwardRef((_ref, f
     onClick: onWrapClickHandler,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
       type: "radio",
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'input'
+      }),
       checked: checked,
       disabled: disabled,
       className: (0, _classify.default)(_RadioButtonModule.default.radio, {
@@ -80,6 +90,10 @@ const RadioButton = exports.RadioButton = /*#__PURE__*/React.forwardRef((_ref, f
       "aria-label": ariaLabel || children,
       ...props
     }), React.Children.count(children) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'label'
+      }),
       color: "secondary",
       className: (0, _classify.default)(_RadioButtonModule.default.radioLabel, {
         [_RadioButtonModule.default.labelDisabled]: disabled

package/lib/components/RadioButton/RadioGroup.d.ts

@@ -21,6 +21,7 @@ export interface RadioGroupProps {
     classNames?: ClassNames;
     error?: boolean;
     errorText?: string;
+    testId?: string;
 }
 export declare const RadioGroup: Flow.AbstractComponent<RadioGroupProps, HTMLDivElement>;
 export {};

package/lib/components/RadioButton/RadioGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioGroup.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,kBAAkB,CAAC;AAiBjD;;;;;GAKG;AACH,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACtC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,EAAE,IAAI,CAAC,iBAAiB,CAC7C,eAAe,EACf,cAAc,CAyDf,CAAC"}
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioGroup.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,kBAAkB,CAAC;AAmBjD;;;;;GAKG;AACH,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACtC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,UAAU,EAAE,IAAI,CAAC,iBAAiB,CAC7C,eAAe,EACf,cAAc,CAsEf,CAAC"}

package/lib/components/RadioButton/RadioGroup.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.RadioGroup = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
 var _Text = require("../Text/Text");
 var _RadioGroupModule = _interopRequireDefault(require("./RadioGroup.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -29,7 +30,8 @@ const RadioGroup = exports.RadioGroup = /*#__PURE__*/React.forwardRef((_ref, for
     children,
     classNames,
     error = false,
-    errorText = ''
+    errorText = '',
+    testId
   } = _ref;
   const onChangeHandler = value => {
     if (onChange) {
@@ -43,14 +45,23 @@ const RadioGroup = exports.RadioGroup = /*#__PURE__*/React.forwardRef((_ref, for
         selectedValue: value,
         onChange: onChangeHandler,
         align,
-        error
+        error,
+        testId // Pass testId to child RadioButton components
       });
     }
     return child;
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'radioGroup'
+    }),
     className: (0, _classify.default)(_RadioGroupModule.default.radioGroupContainer, classNames?.wrapper),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'radioGroupContainer'
+      }),
       className: (0, _classify.default)({
         [_RadioGroupModule.default.vertical]: align === 'vertical',
         [_RadioGroupModule.default.horizontal]: align === 'horizontal-fixed',
@@ -61,6 +72,10 @@ const RadioGroup = exports.RadioGroup = /*#__PURE__*/React.forwardRef((_ref, for
     }), error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodySmall, {
       color: "danger",
       className: classNames?.errorText,
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'errorText'
+      }),
       children: errorText
     })]
   });

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

@@ -17,6 +17,7 @@ export interface RadioTileProps {
     iconSize?: IconSize;
     iconType?: IconType;
     isSelected?: boolean;
+    testId?: string;
 }
 export declare const RadioTile: Flow.AbstractComponent<RadioTileProps, HTMLDivElement>;
 export {};

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 {};