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

package/.storybook/public/component-parent-levels.json

@@ -1,95 +1,95 @@
 {
   "leaves": [
-    "Card - Done",
-    "CircularLoader - Done",
-    "ConditionalWrapper - Done",
-    "EmptyState - Done",
-    "ErrorMessage - Done",
-    "FocusManager - Done",
-    "Grid - Done",
-    "LinearLoader - Done",
-    "Separator - Done",
-    "Shimmer - Done",
-    "StatusIndicator - Done",
-    "StickyBar - Done",
-    "Text - Done",
-    "Toggle - Done",
-    "Truncate - Done"
+    "Card",
+    "CircularLoader",
+    "ConditionalWrapper",
+    "EmptyState",
+    "ErrorMessage",
+    "FocusManager",
+    "Grid",
+    "LinearLoader",
+    "Separator",
+    "Shimmer",
+    "StatusIndicator",
+    "StickyBar",
+    "Text",
+    "Toggle",
+    "Truncate"
   ],
   "1_level_parents": [
-    "FocusManagerWithArrowKeyNavigation - Done",
-    "Icon - Done",
-    "ProgressDonut - Done",
-    "RadioButton - Done",
-    "ScoreBar - Done",
-    "Textarea - Done",
-    "Tooltip - Done"
+    "FocusManagerWithArrowKeyNavigation",
+    "Icon",
+    "ProgressDonut",
+    "RadioButton",
+    "ScoreBar",
+    "Textarea",
+    "Tooltip"
   ],
   "2_level_parents": [
-    "Avatar - Done",
-    "Badge - Done",
-    "BadgedIcon - Done",
-    "Button - Done",
-    "Checkbox - Done",
-    "Chip - Done",
-    "FormTitleWrapper - Done",
-    "Input - Done",
-    "KPIBox - Done",
-    "Link - Done",
-    "Notification - Done",
-    "PromptChip - Done",
-    "Stepper - Done",
-    "TextTile - Done",
-    "Timeline - Done",
-    "Toast - Done",
-    "TruncatedTextWithTooltip - Done"
+    "Avatar",
+    "Badge",
+    "BadgedIcon",
+    "Button",
+    "Checkbox",
+    "Chip",
+    "FormTitleWrapper",
+    "Input",
+    "KPIBox",
+    "Link",
+    "Notification",
+    "PromptChip",
+    "Stepper",
+    "TextTile",
+    "Timeline",
+    "Toast",
+    "TruncatedTextWithTooltip"
   ],
   "3_level_parents": [
-    "Accordion - Done",
-    "AvatarGroup - Done",
-    "Breadcrumbs - Done",
-    "ChatBubble - Done",
-    "CollapsibleCard - Done",
-    "FileUpload - Done",
-    "InContextAlert - Done",
-    "Modal - Done",
-    "PageTitle - Done",
-    "PromptInput - Done",
-    "RadioTile - Done",
-    "RangeSlider - Done",
-    "Rating - Done",
-    "SearchInput - Done",
-    "SideMenuLink - Done",
-    "SubMenu - Done",
-    "WeekdayPicker - Done"
+    "Accordion",
+    "AvatarGroup",
+    "Breadcrumbs",
+    "ChatBubble",
+    "CollapsibleCard",
+    "FileUpload",
+    "InContextAlert",
+    "Modal",
+    "PageTitle",
+    "PromptInput",
+    "RadioTile",
+    "RangeSlider",
+    "Rating",
+    "SearchInput",
+    "SideMenuLink",
+    "SubMenu",
+    "WeekdayPicker"
   ],
   "4_level_parents": [
-    "Banner - Done",
-    "Dialog - Done",
-    "InContextAlertWithMultipleActions - Done",
-    "Menu - Done",
-    "Panel - Done"
+    "Banner",
+    "Dialog",
+    "InContextAlertWithMultipleActions",
+    "Menu",
+    "Panel"
   ],
   "5_level_parents": [
-    "ButtonDropdown - Done",
-    "Disclaimer - Done",
-    "Dropdown - Done",
-    "Typeahead - Done"
+    "ButtonDropdown",
+    "Disclaimer",
+    "Dropdown",
+    "Typeahead"
   ],
   "6_level_parents": [
-    "ButtonTabs - Done",
-    "Charts - Done",
-    "Combobox - Done",
-    "DateRangePicker - Done",
-    "FilterButtonOverlay - Done",
-    "InlineDropdown - Done",
-    "OptionButton - Done",
-    "Pagination - Done",
-    "Table - Done",
-    "Tabs - Done",
-    "TokenListInput - Done"
+    "ButtonTabs",
+    "Charts",
+    "Combobox",
+    "DateRangePicker",
+    "FilterButtonOverlay",
+    "InlineDropdown",
+    "OptionButton",
+    "Pagination",
+    "Table",
+    "Tabs",
+    "TokenListInput"
   ],
   "7_level_parents": [
-    "InfinitePagination - Done"
+    "InfinitePagination"
   ]
 }

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 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-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.5.11...v0.5.12-beta.0) (2025-09-24)
+
+
+### Bug Fixes
+
+* added testid support for remaining components ([5f041c6](https://github.com/spaced-out/ui-design-system/commit/5f041c6314c1fba80f86f5e569eb7be212ee352e))
+* 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)
+
+
+### Features
+
+* adds testid support in input icon and text ([3ce908f](https://github.com/spaced-out/ui-design-system/commit/3ce908f6171b85cba0757433e1924df5d9ee09f2))
+* adds testid support other leaf nodes ([ccdd323](https://github.com/spaced-out/ui-design-system/commit/ccdd3230a73b8813033024473a83271024b2b6d9))
+* extra classNames in prompt chip ([#408](https://github.com/spaced-out/ui-design-system/issues/408)) ([f000cbf](https://github.com/spaced-out/ui-design-system/commit/f000cbf6b8841680460a7c5d82db86066514b200))
+
 ### [0.5.10](https://github.com/spaced-out/ui-design-system/compare/v0.5.9...v0.5.10) (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;