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

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.5.12](https://github.com/spaced-out/ui-design-system/compare/v0.5.11...v0.5.12) (2025-10-15)
+
+
+### Features
+
+* removes border in last timeline item ([#411](https://github.com/spaced-out/ui-design-system/issues/411)) ([ea9c819](https://github.com/spaced-out/ui-design-system/commit/ea9c819fe9af112f978cbebf22b1c7df8d9163a9))
+
+
+### Bug Fixes
+
+* added testid support in level 2 parents ([c02570f](https://github.com/spaced-out/ui-design-system/commit/c02570fa3ec46698028d4fbf443b35539bc4ab63))
+* added testid support in level 3 parents ([66c263d](https://github.com/spaced-out/ui-design-system/commit/66c263db029d31c3d4c657a8464c716df848202c))
+* added testid support in level 3 parents ([6bc25ba](https://github.com/spaced-out/ui-design-system/commit/6bc25ba7ab9221794f5888b4c0b87e09222e5c34))
+* added testid support in level 5 parents ([08d2c45](https://github.com/spaced-out/ui-design-system/commit/08d2c450f847b6c633a1779b30cd873b458a020e))
+* adds testid in level 1 parents and stories ([376c635](https://github.com/spaced-out/ui-design-system/commit/376c6351f87d58ef1a86d953bb641613dc115002))
+* fixes an issue with unstyled button ([3548097](https://github.com/spaced-out/ui-design-system/commit/35480978ca7aa3efa35c1c63250cc2bbd0b44d35))
+
 ### [0.5.11](https://github.com/spaced-out/ui-design-system/compare/v0.5.10...v0.5.11) (2025-09-23)
 
 

package/lib/components/Accordion/Accordion.d.ts

@@ -17,6 +17,7 @@ export interface AccordionPropsType {
     onChange?: ((id: string, isOpen: boolean) => unknown) | null | undefined;
     checked?: boolean;
     onToggle?: (checked: boolean) => unknown;
+    testId?: string;
 }
 export declare const Accordion: Flow.AbstractComponent<AccordionPropsType, HTMLDivElement>;
 //# sourceMappingURL=Accordion.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAUrD,MAAM,MAAM,mBAAmB,GAAG,QAAQ,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,OAAO,CAAC;CAC1C;AAED,eAAO,MAAM,SAAS,EAAE,IAAI,CAAC,iBAAiB,CAC5C,kBAAkB,EAClB,cAAc,CAgFf,CAAC"}
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAWrD,MAAM,MAAM,mBAAmB,GAAG,QAAQ,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,OAAO,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,SAAS,EAAE,IAAI,CAAC,iBAAiB,CAC5C,kBAAkB,EAClB,cAAc,CA2Ff,CAAC"}

package/lib/components/Accordion/Accordion.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.Accordion = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
 var _Button = require("../Button");
 var _Toggle = require("../Toggle");
 var _AccordionModule = _interopRequireDefault(require("./Accordion.module.css"));
@@ -23,7 +24,8 @@ const Accordion = exports.Accordion = /*#__PURE__*/React.forwardRef((_ref, ref)
     isOpen = false,
     showToggle = false,
     checked = false,
-    children
+    children,
+    testId
   } = _ref;
   const [accordionIsOpen, setAccordionIsOpen] = React.useState(isOpen);
   const handleToggle = () => {
@@ -40,22 +42,37 @@ const Accordion = exports.Accordion = /*#__PURE__*/React.forwardRef((_ref, ref)
   }, [isOpen]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     ref: ref,
-    "data-testid": "Accordion",
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'wrapper'
+    }),
     className: (0, _classify.default)(_AccordionModule.default.wrapper, classNames?.wrapper),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _classify.default)(_AccordionModule.default.headerWrapper, classNames?.headerWrapper),
       onClick: handleAccordionClick,
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'header-wrapper'
+      }),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: (0, _classify.default)(_AccordionModule.default.header, classNames?.header),
         children: [showToggle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           onClick: e => {
             e.stopPropagation(); // prevent toggle click from triggering accordion toggle
           },
+          "data-testid": (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'toggle-container'
+          }),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toggle.Toggle, {
             checked: checked,
             onChange: handleToggle,
             ariaLabel: 'toggle',
-            disabled: disabled
+            disabled: disabled,
+            testId: (0, _qa.generateTestId)({
+              base: testId,
+              slot: 'toggle'
+            })
           })
         }), header]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
@@ -66,11 +83,19 @@ const Accordion = exports.Accordion = /*#__PURE__*/React.forwardRef((_ref, ref)
         classNames: {
           wrapper: _AccordionModule.default.icon
         },
-        ariaLabel: 'Collapse button'
+        ariaLabel: 'Collapse button',
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'collapse-button'
+        })
         // we are not defining onClick here as we are using onClick of the parent here.
       })]
     }), accordionIsOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _classify.default)(_AccordionModule.default.content, classNames?.content),
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'content'
+      }),
       children: children
     })]
   });

package/lib/components/Accordion/AccordionGroup.d.ts

@@ -9,9 +9,10 @@ export interface AccordionGroupPropsType {
     enabledToggleIds?: Array<string>;
     initialOpenId?: string;
     classNames?: AccordionGroupClassNames;
+    testId?: string;
 }
 export declare const AccordionGroup: {
-    ({ children, onAccordionClick, onToggle, initialOpenId, classNames, }: AccordionGroupPropsType): React.JSX.Element;
+    ({ children, onAccordionClick, onToggle, initialOpenId, classNames, testId, }: AccordionGroupPropsType): React.JSX.Element;
     displayName: string;
 };
 //# sourceMappingURL=AccordionGroup.d.ts.map

package/lib/components/Accordion/AccordionGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionGroup.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/AccordionGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,MAAM,wBAAwB,GAAG,QAAQ,CAAC;IAC9C,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAcH,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gBAAgB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAC5D,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC;IACtD,gBAAgB,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACjC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,wBAAwB,CAAC;CACvC;AAED,eAAO,MAAM,cAAc;2EAMxB,uBAAuB;;CA6CzB,CAAC"}
+{"version":3,"file":"AccordionGroup.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/AccordionGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,MAAM,wBAAwB,GAAG,QAAQ,CAAC;IAC9C,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAeH,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gBAAgB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAC5D,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC;IACtD,gBAAgB,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACjC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,wBAAwB,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,cAAc;mFAOxB,uBAAuB;;CAiDzB,CAAC"}

package/lib/components/Accordion/AccordionGroup.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.AccordionGroup = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
 var _AccordionGroupModule = _interopRequireDefault(require("./AccordionGroup.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -16,7 +17,8 @@ const AccordionGroup = _ref => {
     onAccordionClick,
     onToggle,
     initialOpenId = '',
-    classNames
+    classNames,
+    testId
   } = _ref;
   const [openId, setOpenedId] = React.useState(initialOpenId);
   const handleAccordionChange = (id, isOpen) => {
@@ -46,11 +48,20 @@ const AccordionGroup = _ref => {
       onToggle: accordionOnToggle,
       showToggle: true,
       isOpen,
-      key: childId
+      key: childId,
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'accordion',
+        index: childId
+      })
     });
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: (0, _classify.default)(_AccordionGroupModule.default.wrapper, classNames?.wrapper),
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'wrapper'
+    }),
     children: enhancedChildren
   });
 };

package/lib/components/Avatar/Avatar.d.ts

@@ -41,6 +41,7 @@ export interface AvatarProps {
     iconType?: IconType;
     status?: StatusSemanticType;
     statusBorderColorToken?: keyof typeof COLORS;
+    testId?: string;
 }
 export interface AvatarContentProps {
     imageSrc?: string;
@@ -53,8 +54,9 @@ export interface AvatarContentProps {
     status?: StatusSemanticType;
     statusBorderColorToken?: keyof typeof COLORS;
     classNames?: ClassNames;
+    testId?: string;
 }
 export declare const Avatar: Flow.AbstractComponent<AvatarProps, HTMLDivElement>;
-export declare const BaseAvatar: ({ classNames, size, text, style, color, }: AvatarProps) => React.JSX.Element;
+export declare const BaseAvatar: ({ classNames, size, text, style, color, testId, }: AvatarProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=Avatar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAErD,OAAO,KAAK,KAAK,MAAM,MAAM,6BAA6B,CAAC;AAW3D,OAAO,KAAK,EAAW,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAE5D,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,gCAAgC,CAAC;AAYvE,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;EAKtB,CAAC;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,OAAO,CAAiC,CAAC;AAE/E,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,OAAO,WAAW,CAAC,CAAC;AACxE,eAAO,MAAM,YAAY;;;;;;;EAOvB,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,MAAM,WAAW,WAAW;IAC1B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,sBAAsB,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC;CAC9C;AAwCD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,sBAAsB,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC;IAC7C,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAwDD,eAAO,MAAM,MAAM,EAAE,IAAI,CAAC,iBAAiB,CAAC,WAAW,EAAE,cAAc,CA+DpE,CAAC;AAEJ,eAAO,MAAM,UAAU,GAAI,2CAMxB,WAAW,sBAoBb,CAAC"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAErD,OAAO,KAAK,KAAK,MAAM,MAAM,6BAA6B,CAAC;AAY3D,OAAO,KAAK,EAAW,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAE5D,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,gCAAgC,CAAC;AAYvE,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;EAKtB,CAAC;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,OAAO,CAAiC,CAAC;AAE/E,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,OAAO,WAAW,CAAC,CAAC;AACxE,eAAO,MAAM,YAAY;;;;;;;EAOvB,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,MAAM,WAAW,WAAW;IAC1B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,sBAAsB,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAwDD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,sBAAsB,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC;IAC7C,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA8DD,eAAO,MAAM,MAAM,EAAE,IAAI,CAAC,iBAAiB,CAAC,WAAW,EAAE,cAAc,CAsEpE,CAAC;AAEJ,eAAO,MAAM,UAAU,GAAI,mDAOxB,WAAW,sBAsBb,CAAC"}

package/lib/components/Avatar/Avatar.js

@@ -7,6 +7,7 @@ exports.avatarSizeOptions = exports.BaseAvatar = exports.Avatar = exports.AVATAR
 var React = _interopRequireWildcard(require("react"));
 var _color = require("../../styles/variables/_color");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
 var _Icon = require("../Icon");
 var _StatusIndicator = require("../StatusIndicator");
 var _Text = require("../Text");
@@ -40,27 +41,32 @@ const AvatarTextDecorator = _ref => {
   let {
     avatarText,
     size,
-    className
+    className,
+    testId
   } = _ref;
   switch (size) {
     case 'small':
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.SubTitleSmall, {
         className: className,
+        testId: testId,
         children: avatarText
       });
     case 'medium':
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.SubTitleMedium, {
         className: className,
+        testId: testId,
         children: avatarText
       });
     case 'large':
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.SubTitleLarge, {
         className: className,
+        testId: testId,
         children: avatarText
       });
     case 'extraLarge':
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.JumboSmall, {
         className: className,
+        testId: testId,
         children: avatarText
       });
   }
@@ -83,9 +89,14 @@ const AvatarConditionalContent = _ref2 => {
     color = 'blue',
     status,
     statusBorderColorToken,
-    classNames
+    classNames,
+    testId
   } = _ref2;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'content'
+    }),
     className: (0, _classify.default)(_AvatarModule.default.innerContainer, {
       [_AvatarModule.default.alignCenter]: !imageSrc
     }, classNames?.content),
@@ -97,21 +108,37 @@ const AvatarConditionalContent = _ref2 => {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StatusIndicator.StatusIndicator, {
         status: status,
         withBorder: true,
-        borderColorToken: statusBorderColorToken
+        borderColorToken: statusBorderColorToken,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'status'
+        })
       })
     }), imageSrc ? /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
       src: imageSrc,
       alt: "Avatar",
-      className: (0, _classify.default)(_AvatarModule.default.avatar, classNames?.image)
+      className: (0, _classify.default)(_AvatarModule.default.avatar, classNames?.image),
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'image'
+      })
     }) : iconName ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
       name: iconName,
       type: iconType,
       size: iconSize[size],
-      className: classNames?.icon
+      className: classNames?.icon,
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'icon'
+      })
     }) : text ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AvatarTextDecorator, {
       avatarText: getAvatarText(text),
       size: size,
-      className: classNames?.text
+      className: classNames?.text,
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'text'
+      })
     }) : null]
   });
 };
@@ -127,9 +154,14 @@ const Avatar = exports.Avatar = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     color,
     ring = false,
     status,
-    statusBorderColorToken
+    statusBorderColorToken,
+    testId
   } = _ref3;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'root'
+    }),
     className: (0, _classify.default)(_AvatarModule.default.container, {
       [_AvatarModule.default.extraLargeSize]: size === 'extraLarge',
       [_AvatarModule.default.largeSize]: size === 'large',
@@ -140,6 +172,10 @@ const Avatar = exports.Avatar = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     ref: ref,
     children: ring ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _classify.default)(_AvatarModule.default.ring, classNames?.ring),
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'ring'
+      }),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: _AvatarModule.default.whiteCircle,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AvatarConditionalContent, {
@@ -151,7 +187,8 @@ const Avatar = exports.Avatar = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
           size: size,
           status: status,
           statusBorderColorToken: statusBorderColorToken,
-          classNames: classNames
+          classNames: classNames,
+          testId: testId
         })
       })
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(AvatarConditionalContent, {
@@ -163,7 +200,8 @@ const Avatar = exports.Avatar = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       size: size,
       status: status,
       statusBorderColorToken: statusBorderColorToken,
-      classNames: classNames
+      classNames: classNames,
+      testId: testId
     })
   });
 });
@@ -173,9 +211,14 @@ const BaseAvatar = _ref4 => {
     size = AVATAR_SIZE.medium,
     text = '',
     style,
-    color = 'blue'
+    color = 'blue',
+    testId
   } = _ref4;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'root'
+    }),
     className: (0, _classify.default)(_AvatarModule.default.container, {
       [_AvatarModule.default.baseExtraLargeSize]: size === 'extraLarge',
       [_AvatarModule.default.baseLargeSize]: size === 'large',
@@ -189,7 +232,11 @@ const BaseAvatar = _ref4 => {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AvatarTextDecorator, {
       avatarText: text,
       size: size,
-      className: classNames?.text
+      className: classNames?.text,
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'text'
+      })
     })
   });
 };

package/lib/components/AvatarGroup/AvatarGroup.d.ts

@@ -10,6 +10,7 @@ export interface AvatarGroupProps {
     placement?: PlacementType;
     maxAvatars?: number;
     tooltipElevation?: ElevationType;
+    testId?: string;
 }
 export declare const AvatarGroup: Flow.AbstractComponent<AvatarGroupProps, HTMLDivElement>;
 //# sourceMappingURL=AvatarGroup.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAUrD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AAEtD,OAAO,KAAK,EAAC,aAAa,EAAE,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAQzE,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,aAAa,CAAC;CAClC;AAmBD,eAAO,MAAM,WAAW,EAAE,IAAI,CAAC,iBAAiB,CAC9C,gBAAgB,EAChB,cAAc,CAqJf,CAAC"}
+{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAWrD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AAEtD,OAAO,KAAK,EAAC,aAAa,EAAE,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAQzE,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,aAAa,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAoBD,eAAO,MAAM,WAAW,EAAE,IAAI,CAAC,iBAAiB,CAC9C,gBAAgB,EAChB,cAAc,CAuKf,CAAC"}

package/lib/components/AvatarGroup/AvatarGroup.js

@@ -8,6 +8,7 @@ var React = _interopRequireWildcard(require("react"));
 var _color = require("../../styles/variables/_color");
 var _space = require("../../styles/variables/_space");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
 var _Avatar = require("../Avatar");
 var _Tooltip = require("../Tooltip");
 var _AvatarGroupModule = _interopRequireDefault(require("./AvatarGroup.module.css"));
@@ -28,7 +29,8 @@ const AvatarGroup = exports.AvatarGroup = /*#__PURE__*/React.forwardRef((_ref, r
     maxTooltipLines = 7,
     placement = 'top',
     maxAvatars = 5,
-    tooltipElevation
+    tooltipElevation,
+    testId
   } = _ref;
   const childAvatarCount = React.Children.count(children);
   const leftOverlap = {
@@ -58,12 +60,22 @@ const AvatarGroup = exports.AvatarGroup = /*#__PURE__*/React.forwardRef((_ref, r
         borderColor,
         marginLeft: `-${index !== 0 ? leftOverlap[size] : 0}`
       },
-      color
+      color,
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'avatar',
+        index: index.toString()
+      })
     });
     return text ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
       body: text,
       placement: placement,
       elevation: tooltipElevation,
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'avatar-tooltip',
+        index: index.toString()
+      }),
       children: avatar
     }) : avatar;
   };
@@ -96,6 +108,10 @@ const AvatarGroup = exports.AvatarGroup = /*#__PURE__*/React.forwardRef((_ref, r
       bodyMaxLines: maxTooltipLines,
       placement: placement,
       elevation: tooltipElevation,
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'plus-avatar-tooltip'
+      }),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: _AvatarGroupModule.default.plusAvatar,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.BaseAvatar, {
@@ -108,7 +124,11 @@ const AvatarGroup = exports.AvatarGroup = /*#__PURE__*/React.forwardRef((_ref, r
           style: {
             borderColor,
             marginLeft: `-${leftOverlap[size]}`
-          }
+          },
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'plus-avatar'
+          })
         })
       })
     });
@@ -148,6 +168,10 @@ const AvatarGroup = exports.AvatarGroup = /*#__PURE__*/React.forwardRef((_ref, r
       [_AvatarGroupModule.default.smallSize]: size === 'small'
     }),
     ref: ref,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'wrapper'
+    }),
     children: childrenWithProps
   });
 });

package/lib/components/Badge/Badge.d.ts

@@ -23,6 +23,7 @@ export type BadgeColorType = keyof typeof BADGE_COLOR;
 export interface BaseBadgeProps {
     classNames?: ClassNames;
     fill?: BadgeColorType;
+    testId?: string;
 }
 export interface BadgeProps extends Omit<BaseBadgeProps, 'text'> {
     text: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAiBrD,OAAO,KAAK,EAAC,QAAQ,EAAE,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAO5D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;EAYtB,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,WAAW,CAAC;AAEtD,MAAM,WAAW,cAAc;IAC7B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB;AAED,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC;IAC9D,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,cACf,SAAQ,IAAI,CACV,cAAc,EACd,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,WAAW,CAC/D;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC,UAAU,EAAE,cAAc,CAkClE,CAAC;AAEJ,eAAO,MAAM,SAAS,EAAE,IAAI,CAAC,iBAAiB,CAAC,cAAc,EAAE,cAAc,CA8C1E,CAAC"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAkBrD,OAAO,KAAK,EAAC,QAAQ,EAAE,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAO5D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;EAYtB,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,WAAW,CAAC;AAEtD,MAAM,WAAW,cAAc;IAC7B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC;IAC9D,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,cACf,SAAQ,IAAI,CACV,cAAc,EACd,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,WAAW,CAC/D;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC,UAAU,EAAE,cAAc,CAmClE,CAAC;AAEJ,eAAO,MAAM,SAAS,EAAE,IAAI,CAAC,iBAAiB,CAAC,cAAc,EAAE,cAAc,CAgD1E,CAAC"}

package/lib/components/Badge/Badge.js

@@ -7,6 +7,7 @@ exports.IconBadge = exports.Badge = exports.BADGE_COLOR = 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 _Icon = require("../Icon");
 var _Text = require("../Text");
 var _BadgeModule = _interopRequireDefault(require("./Badge.module.css"));
@@ -30,11 +31,15 @@ const Badge = exports.Badge = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     classNames,
     text,
-    fill = 'gray'
+    fill = 'gray',
+    testId
   } = _ref;
   const isDark = fill.includes('Dark');
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    "data-testid": "Badge",
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'root'
+    }),
     style: {
       '--wrapperBgColor': BADGE_COLOR[fill]
     },
@@ -47,6 +52,10 @@ const Badge = exports.Badge = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         [_BadgeModule.default.dark]: isDark,
         [_BadgeModule.default.light]: !isDark
       }, classNames?.text),
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'text'
+      }),
       children: text
     })
   });
@@ -59,11 +68,15 @@ const IconBadge = exports.IconBadge = /*#__PURE__*/React.forwardRef((_ref2, ref)
     iconSize = 'small',
     iconType = 'solid',
     ariaLabel,
-    onClick
+    onClick,
+    testId
   } = _ref2;
   const isDark = fill.includes('Dark');
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    "data-testid": "Badge",
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'root'
+    }),
     style: {
       '--wrapperBgColor': BADGE_COLOR[fill]
     },
@@ -78,7 +91,11 @@ const IconBadge = exports.IconBadge = /*#__PURE__*/React.forwardRef((_ref2, ref)
       className: (0, _classify.default)({
         [_BadgeModule.default.dark]: isDark,
         [_BadgeModule.default.light]: !isDark
-      }, classNames?.icon)
+      }, classNames?.icon),
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'icon'
+      })
     })
   });
 });

package/lib/components/BadgedIcon/BadgedIcon.d.ts

@@ -12,7 +12,8 @@ export interface BadgedIconProps {
     ariaLabel?: string;
     showBadge?: boolean;
     classNames?: ClassNames;
+    testId?: string;
 }
-export declare const BadgedIcon: ({ name, showBadge, classNames, size, type, ariaLabel, }: BadgedIconProps) => React.JSX.Element;
+export declare const BadgedIcon: ({ name, showBadge, classNames, size, type, ariaLabel, testId, }: BadgedIconProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=BadgedIcon.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BadgedIcon.d.ts","sourceRoot":"","sources":["../../../src/components/BadgedIcon/BadgedIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAC,QAAQ,EAAE,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAO5D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAED,eAAO,MAAM,UAAU,GAAI,yDAOxB,eAAe,sBAkBjB,CAAC"}
+{"version":3,"file":"BadgedIcon.d.ts","sourceRoot":"","sources":["../../../src/components/BadgedIcon/BadgedIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAC,QAAQ,EAAE,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAO5D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,UAAU,GAAI,iEAQxB,eAAe,sBAyBjB,CAAC"}

package/lib/components/BadgedIcon/BadgedIcon.js

@@ -7,6 +7,7 @@ exports.BadgedIcon = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _typography = require("../../types/typography");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
 var _Icon = require("../Icon");
 var _BadgedIconModule = _interopRequireDefault(require("./BadgedIcon.module.css"));
 var _typographyModule = _interopRequireDefault(require("../../styles/typography.module.css"));
@@ -20,10 +21,15 @@ const BadgedIcon = _ref => {
     classNames,
     size = 'medium',
     type = 'solid',
-    ariaLabel
+    ariaLabel,
+    testId
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: !!name && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'root'
+      }),
       className: (0, _classify.default)(_BadgedIconModule.default.iconContainer, _BadgedIconModule.default[size], classNames?.wrapper),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
         ariaLabel: ariaLabel,
@@ -31,9 +37,17 @@ const BadgedIcon = _ref => {
         className: classNames?.icon,
         size: size === 'large' ? 'medium' : size,
         type: type,
-        color: _typography.TEXT_COLORS.clickable
+        color: _typography.TEXT_COLORS.clickable,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'icon'
+        })
       }), showBadge && /*#__PURE__*/(0, _jsxRuntime.jsx)(BadgeIcon, {
-        className: classNames?.badgeIcon
+        className: classNames?.badgeIcon,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'badge'
+        })
       })]
     })
   });
@@ -41,9 +55,11 @@ const BadgedIcon = _ref => {
 exports.BadgedIcon = BadgedIcon;
 const BadgeIcon = _ref2 => {
   let {
-    className
+    className,
+    testId
   } = _ref2;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+    "data-testid": testId,
     className: (0, _classify.default)(_BadgedIconModule.default.badgeIcon, _typographyModule.default[_typography.TEXT_COLORS['clickable']], className),
     viewBox: "0 0 12 13",
     fill: "none",

package/lib/components/Banner/Banner.d.ts

@@ -2,6 +2,7 @@ import type { Flow } from 'flow-to-typescript-codemod';
 import type { InContextAlertProps } from '../../components/InContextAlert';
 export interface BannerProps extends Omit<InContextAlertProps, 'alignment'> {
     alignment?: 'top' | 'bottom';
+    testId?: string;
 }
 export declare const Banner: Flow.AbstractComponent<BannerProps, HTMLDivElement>;
 //# sourceMappingURL=Banner.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAKrD,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,+BAA+B,CAAC;AAMvE,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,mBAAmB,EAAE,WAAW,CAAC;IACzE,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CAC9B;AAED,eAAO,MAAM,MAAM,EAAE,IAAI,CAAC,iBAAiB,CAAC,WAAW,EAAE,cAAc,CA0CpE,CAAC"}
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAKrD,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,+BAA+B,CAAC;AAMvE,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,mBAAmB,EAAE,WAAW,CAAC;IACzE,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,MAAM,EAAE,IAAI,CAAC,iBAAiB,CAAC,WAAW,EAAE,cAAc,CA4CpE,CAAC"}