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

package/lib/components/Tabs/TabList/TabList.js

@@ -9,6 +9,7 @@ var _useWindowSize = require("../../../hooks/useWindowSize/useWindowSize");
 var _size = require("../../../styles/variables/_size");
 var _space = require("../../../styles/variables/_space");
 var _classify = require("../../../utils/classify");
+var _qa = require("../../../utils/qa");
 var _TabDropdown = require("./TabDropdown");
 var _TabListModule = _interopRequireDefault(require("./TabList.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -27,7 +28,8 @@ const TabList = exports.TabList = /*#__PURE__*/React.forwardRef((_ref, forwardRe
     // Default to 'modal' elevation. Note: When using Modal with allowBackgroundInteraction=true,
     // tooltips may appear over the modal. In such cases, handle it by passing an appropriate elevation.
     elevation = 'modal',
-    maxTabWidth = _size.size120
+    maxTabWidth = _size.size120,
+    testId
   } = _ref;
   const ref = React.useRef(null);
   React.useImperativeHandle(forwardRef, () => ref.current);
@@ -51,7 +53,8 @@ const TabList = exports.TabList = /*#__PURE__*/React.forwardRef((_ref, forwardRe
           label,
           disabled,
           iconName,
-          iconType
+          iconType,
+          testId: childTestId
         } = child.props;
         const effectiveMaxWidth = maxWidthChild || maxTabWidth;
         const widthInt = parseInt(effectiveMaxWidth);
@@ -65,7 +68,12 @@ const TabList = exports.TabList = /*#__PURE__*/React.forwardRef((_ref, forwardRe
             onSelect: childOnSelect,
             selectedTab,
             maxWidth: effectiveMaxWidth,
-            elevation
+            elevation,
+            testId: childTestId || (0, _qa.generateTestId)({
+              base: testId,
+              slot: 'tab',
+              index: i.toString()
+            })
           }));
         } else {
           menuOptions.push({
@@ -112,7 +120,11 @@ const TabList = exports.TabList = /*#__PURE__*/React.forwardRef((_ref, forwardRe
           width: menuWidth
         }
       },
-      elevation: elevation
+      elevation: elevation,
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'dropdown'
+      })
     }, 'tabDropdown' + menuOptions.length) : null;
     nodes = [...tabListNodes, tabDropDownNode];
     return nodes;
@@ -126,7 +138,10 @@ const TabList = exports.TabList = /*#__PURE__*/React.forwardRef((_ref, forwardRe
   }, [ref.current, width]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ref: ref,
-    "data-testid": "Tabs",
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'root'
+    }),
     className: (0, _classify.classify)(_TabListModule.default.tabsContainer, {
       [_TabListModule.default.mediumSize]: size === 'medium',
       [_TabListModule.default.smallSize]: size === 'small'

package/lib/components/TextTile/TextTile.d.ts

@@ -10,6 +10,7 @@ export interface TextTileProps {
     iconName?: string;
     classNames?: ClassNames;
     description?: React.ReactNode;
+    testId?: string;
 }
 export declare const TextTile: Flow.AbstractComponent<TextTileProps, HTMLDivElement>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"TextTile.d.ts","sourceRoot":"","sources":["../../../src/components/TextTile/TextTile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAUrD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,WAAW,aAAa;IAC5B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B;AAED,eAAO,MAAM,QAAQ,EAAE,IAAI,CAAC,iBAAiB,CAAC,aAAa,EAAE,cAAc,CA+BxE,CAAC"}
+{"version":3,"file":"TextTile.d.ts","sourceRoot":"","sources":["../../../src/components/TextTile/TextTile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAWrD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,WAAW,aAAa;IAC5B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,QAAQ,EAAE,IAAI,CAAC,iBAAiB,CAAC,aAAa,EAAE,cAAc,CAiDxE,CAAC"}

package/lib/components/TextTile/TextTile.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.TextTile = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
 var _Icon = require("../Icon");
 var _Text = require("../Text");
 var _TextTileModule = _interopRequireDefault(require("./TextTile.module.css"));
@@ -17,23 +18,43 @@ const TextTile = exports.TextTile = /*#__PURE__*/React.forwardRef((_ref, ref) =>
     header,
     iconName = 'sparkles',
     classNames,
-    description
+    description,
+    testId
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     ref: ref,
-    "data-testid": "TextTile",
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'root'
+    }),
     className: (0, _classify.default)(_TextTileModule.default.textTileWrapper, classNames?.wrapper),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _classify.default)(_TextTileModule.default.textTileTitle, classNames?.title),
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'title'
+      }),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
         size: _Icon.ICON_SIZE.large,
         name: iconName,
         type: _Icon.ICON_TYPE.solid,
-        className: (0, _classify.default)(_TextTileModule.default.sparkles, classNames?.icon)
+        className: (0, _classify.default)(_TextTileModule.default.sparkles, classNames?.icon),
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'icon'
+        })
       }), typeof header === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.JumboMedium, {
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'header'
+        }),
         children: header
       }) : header]
     }), typeof description === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodyLarge, {
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'description'
+      }),
       children: description
     }) : description]
   });

package/lib/components/Textarea/Textarea.d.ts

@@ -22,6 +22,7 @@ export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTex
     size?: 'medium' | 'small';
     required?: boolean;
     textCountLimit?: number;
+    testId?: string;
 }
 export declare const Textarea: Flow.AbstractComponent<TextareaProps, HTMLTextAreaElement>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AASrD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAEH,MAAM,WAAW,aACf,SAAQ,IAAI,CACV,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAC/C,OAAO,GACP,UAAU,GACV,SAAS,GACT,QAAQ,GACR,WAAW,GACX,MAAM,GACN,UAAU,GACV,aAAa,GACb,QAAQ,GACR,OAAO,GACP,WAAW,GACX,OAAO,GACP,YAAY,GACZ,YAAY,GACZ,MAAM,GACN,UAAU,GACV,gBAAgB,CACnB;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CACT,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,mBAAmB,CAAC,EAC3C,OAAO,CAAC,EAAE,OAAO,KACd,OAAO,CAAC;IACb,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,mBAAmB,CAAC,KAAK,OAAO,CAAC;IAChE,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,mBAAmB,CAAC,KAAK,OAAO,CAAC;IAC/D,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC,KAAK,OAAO,CAAC;IACrE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACtC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AA4GD,eAAO,MAAM,QAAQ,EAEhB,IAAI,CAAC,iBAAiB,CAAC,aAAa,EAAE,mBAAmB,CAAC,CAAC"}
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAUrD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAEH,MAAM,WAAW,aACf,SAAQ,IAAI,CACV,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAC/C,OAAO,GACP,UAAU,GACV,SAAS,GACT,QAAQ,GACR,WAAW,GACX,MAAM,GACN,UAAU,GACV,aAAa,GACb,QAAQ,GACR,OAAO,GACP,WAAW,GACX,OAAO,GACP,YAAY,GACZ,YAAY,GACZ,MAAM,GACN,UAAU,GACV,gBAAgB,CACnB;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CACT,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,mBAAmB,CAAC,EAC3C,OAAO,CAAC,EAAE,OAAO,KACd,OAAO,CAAC;IACb,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,mBAAmB,CAAC,KAAK,OAAO,CAAC;IAChE,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,mBAAmB,CAAC,KAAK,OAAO,CAAC;IAC/D,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC,KAAK,OAAO,CAAC;IACrE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACtC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAuID,eAAO,MAAM,QAAQ,EAEhB,IAAI,CAAC,iBAAiB,CAAC,aAAa,EAAE,mBAAmB,CAAC,CAAC"}

package/lib/components/Textarea/Textarea.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.Textarea = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = require("../../utils/classify");
+var _qa = require("../../utils/qa");
 var _Text = require("../Text");
 var _TextareaModule = _interopRequireDefault(require("./Textarea.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -30,6 +31,7 @@ const Textarea_ = (props, ref) => {
     size = 'medium',
     required,
     textCountLimit,
+    testId,
     ...textareaProps
   } = props;
   const [textCountError, setTextCountError] = React.useState(false);
@@ -44,26 +46,50 @@ const Textarea_ = (props, ref) => {
   }, [value]);
   const controlledTextareaFilled = value !== '';
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'root'
+    }),
     className: (0, _classify.classify)(_TextareaModule.default.wrapper, {
       [_TextareaModule.default.filled]: controlledTextareaFilled ?? false,
       [_TextareaModule.default.withError]: (error || textCountError) ?? false
     }),
     children: [Boolean(label) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'label'
+      }),
       className: _TextareaModule.default.info,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: _TextareaModule.default.infoContent,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.FormLabelSmall, {
           color: "secondary",
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'labelText'
+          }),
           children: label ?? ''
         }), "\xA0", required && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.FormLabelSmall, {
           color: "danger",
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'requiredIndicator'
+          }),
           children: '*'
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.FormLabelSmall, {
         color: error || textCountError ? 'danger' : 'secondary',
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'textCount'
+        }),
         children: !!textCountLimit && (value && value.length || 0) + '/' + textCountLimit
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'box'
+      }),
       className: (0, _classify.classify)(_TextareaModule.default.box, {
         [_TextareaModule.default.inputDisabled]: disabled ?? false,
         [_TextareaModule.default.medium]: size === 'medium',
@@ -72,6 +98,10 @@ const Textarea_ = (props, ref) => {
       }, classNames?.box),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", {
         ...textareaProps,
+        "data-testid": (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'textarea'
+        }),
         disabled: locked || disabled,
         name: name,
         ref: ref,
@@ -84,9 +114,17 @@ const Textarea_ = (props, ref) => {
         className: classNames?.textarea
       })
     }), (Boolean(helperText) || error) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'helperText'
+      }),
       className: _TextareaModule.default.info,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodySmall, {
         color: error && errorText ? 'danger' : disabled ? 'disabled' : 'secondary',
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'errorText'
+        }),
         children: error && errorText ? errorText : helperText ?? ''
       })
     })]

package/lib/components/Timeline/Timeline.d.ts

@@ -12,6 +12,7 @@ export interface TimelineProps {
     children: React.ReactNode;
     classNames?: ClassNames;
     orientation?: Orientation;
+    testId?: string;
 }
 export declare const Timeline: Flow.AbstractComponent<TimelineProps, HTMLDivElement>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAOrD,eAAO,MAAM,WAAW;;;EAGtB,CAAC;AAEH,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,OAAO,WAAW,CAAC,CAAC;AAWzE,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAkCD,eAAO,MAAM,QAAQ,EAEhB,IAAI,CAAC,iBAAiB,CAAC,aAAa,EAAE,cAAc,CAAC,CAAC"}
+{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAQrD,eAAO,MAAM,WAAW;;;EAGtB,CAAC;AAEH,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,OAAO,WAAW,CAAC,CAAC;AAYzE,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAuCD,eAAO,MAAM,QAAQ,EAEhB,IAAI,CAAC,iBAAiB,CAAC,aAAa,EAAE,cAAc,CAAC,CAAC"}

package/lib/components/Timeline/Timeline.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.Timeline = exports.ORIENTATION = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = require("../../utils/classify");
+var _qa = require("../../utils/qa");
 var _TimelineModule = _interopRequireDefault(require("./Timeline.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -23,10 +24,11 @@ const Timeline_ = (_ref, ref) => {
   let {
     classNames,
     orientation = ORIENTATION.left,
-    children
+    children,
+    testId
   } = _ref;
   const childrenArray = React.Children.toArray(children).filter(Boolean);
-  const timelineItems = childrenArray.map(timelineItem => {
+  const timelineItems = childrenArray.map((timelineItem, index) => {
     // Type guard to ensure timelineItem is a ReactElement
     if (! /*#__PURE__*/React.isValidElement(timelineItem)) {
       return timelineItem;
@@ -37,13 +39,21 @@ const Timeline_ = (_ref, ref) => {
     const timelineItemProps = timelineItemElement.props;
     return /*#__PURE__*/React.cloneElement(timelineItemElement, {
       ...timelineItemProps,
-      orientation
+      orientation,
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'item',
+        index: index.toString()
+      })
     });
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ref: ref,
     className: (0, _classify.classify)(_TimelineModule.default.timelineWrapper, classNames?.wrapper),
-    "data-testid": "Timeline",
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'root'
+    }),
     children: timelineItems
   });
 };

package/lib/components/Timeline/TimelineItem/TimelineItem.d.ts

@@ -22,6 +22,7 @@ export interface TimelineItemProps {
     orientation?: Orientation;
     parentComponent?: React.ReactNode;
     enableCardWrapper?: boolean;
+    testId?: string;
 }
 export declare const TimelineItem: Flow.AbstractComponent<TimelineItemProps, HTMLDivElement>;
 export {};

package/lib/components/Timeline/TimelineItem/TimelineItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineItem.d.ts","sourceRoot":"","sources":["../../../../src/components/Timeline/TimelineItem/TimelineItem.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,sBAAsB,CAAC;AAMrD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAElD,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,kCAAkC,CAAC;AAMlE,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC,CAAC;AAEH,MAAM,WAAW,iBAAiB;IAChC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAuFD,eAAO,MAAM,YAAY,EAEpB,IAAI,CAAC,iBAAiB,CAAC,iBAAiB,EAAE,cAAc,CAAC,CAAC"}
+{"version":3,"file":"TimelineItem.d.ts","sourceRoot":"","sources":["../../../../src/components/Timeline/TimelineItem/TimelineItem.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,sBAAsB,CAAC;AAOrD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAElD,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,kCAAkC,CAAC;AAMlE,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC,CAAC;AAEH,MAAM,WAAW,iBAAiB;IAChC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA2GD,eAAO,MAAM,YAAY,EAEpB,IAAI,CAAC,iBAAiB,CAAC,iBAAiB,EAAE,cAAc,CAAC,CAAC"}

package/lib/components/Timeline/TimelineItem/TimelineItem.js

@@ -7,6 +7,7 @@ exports.TimelineItem = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _typography = require("../../../types/typography");
 var _classify = require("../../../utils/classify");
+var _qa = require("../../../utils/qa");
 var _Card = require("../../Card");
 var _ConditionalWrapper = require("../../ConditionalWrapper");
 var _Icon = require("../../Icon");
@@ -27,11 +28,15 @@ const TimelineItem_ = (_ref, ref) => {
     description,
     orientation = _Timeline.ORIENTATION.left,
     parentComponent,
-    enableCardWrapper = true
+    enableCardWrapper = true,
+    testId
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     id: id,
-    "data-testid": "Timeline-item",
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'root'
+    }),
     className: (0, _classify.classify)(_TimelineModule.default.timelineItemWrapper, classNames?.wrapper),
     style: {
       '--align': orientation === 'left' ? 'flex-start' : 'flex-end'
@@ -42,29 +47,61 @@ const TimelineItem_ = (_ref, ref) => {
         '--direction': orientation === 'left' ? 'row' : 'row-reverse'
       },
       className: _TimelineModule.default.timelineItemContent,
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'content'
+      }),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: _TimelineModule.default.timelineItemIconWrapper,
+        "data-testid": (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'icon-wrapper'
+        }),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
           name: iconName,
           type: iconType,
           size: _Icon.ICON_SIZE.small,
           color: iconColor,
-          className: (0, _classify.classify)(_TimelineModule.default.timelineItemIcon, classNames?.icon)
+          className: (0, _classify.classify)(_TimelineModule.default.timelineItemIcon, classNames?.icon),
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'icon'
+          })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: _TimelineModule.default.timelineItemBorder,
+          "data-testid": (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'border'
+          }),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: _TimelineModule.default.border
           })
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: _TimelineModule.default.timelineItemEventDetails,
+        "data-testid": (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'details'
+        }),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: _TimelineModule.default.timelineItemInfo,
+          "data-testid": (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'info'
+          }),
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: (0, _classify.classify)(_TimelineModule.default.timelineItemTitle, classNames?.title),
+            "data-testid": (0, _qa.generateTestId)({
+              base: testId,
+              slot: 'title'
+            }),
             children: title
           }), description ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: (0, _classify.classify)(_TimelineModule.default.timelineItemDescription, classNames?.description),
+            "data-testid": (0, _qa.generateTestId)({
+              base: testId,
+              slot: 'description'
+            }),
             children: description
           }) : null]
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.ConditionalWrapper, {
@@ -75,6 +112,10 @@ const TimelineItem_ = (_ref, ref) => {
             classNames: {
               wrapper: (0, _classify.classify)(_TimelineModule.default.timelineItemCardWrapper, classNames?.card)
             },
+            testId: (0, _qa.generateTestId)({
+              base: testId,
+              slot: 'card'
+            }),
             children: children
           }),
           children: children

package/lib/components/Toast/Toast.d.ts

@@ -21,26 +21,30 @@ export interface ToastProps {
     initialFocus?: number;
     customIcon?: React.ReactNode;
     hideCloseIcon?: boolean;
+    testId?: string;
 }
 export interface ToastTitleProps {
     children?: React.ReactNode;
     className?: string;
     semantic?: ToastSemanticType;
+    testId?: string;
 }
 export declare const ToastTitle: Flow.AbstractComponent<ToastTitleProps, HTMLDivElement>;
 export interface ToastBodyProps {
     children?: React.ReactNode;
     className?: string;
+    testId?: string;
 }
 export declare const ToastBody: Flow.AbstractComponent<ToastBodyProps, HTMLDivElement>;
 export interface ToastFooterProps {
     children?: React.ReactNode;
     onClose?: () => void;
+    testId?: string;
 }
 export declare const ToastFooter: {
-    ({ children, onClose }: ToastFooterProps): React.JSX.Element | null;
+    ({ children, onClose, testId }: ToastFooterProps): React.JSX.Element | null;
     displayName: string;
 };
-export declare const Toast: ({ classNames, children, time, semantic, onClose, initialFocus, customIcon, hideCloseIcon, }: ToastProps) => React.JSX.Element;
+export declare const Toast: ({ classNames, children, time, semantic, onClose, initialFocus, customIcon, hideCloseIcon, testId, }: ToastProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=Toast.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAWrD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;EAMzB,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAC3B,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,OAAO,cAAc,CAAC,CAAC;AAEvD,MAAM,WAAW,UAAU;IACzB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAuFD,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAED,eAAO,MAAM,UAAU,EAAE,IAAI,CAAC,iBAAiB,CAC7C,eAAe,EACf,cAAc,CAmBf,CAAC;AAIF,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,EAAE,IAAI,CAAC,iBAAiB,CAAC,cAAc,EAAE,cAAc,CAO1E,CAAC;AAIJ,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,WAAW;4BAAyB,gBAAgB;;CAqChE,CAAC;AAIF,eAAO,MAAM,KAAK,GAAI,6FASnB,UAAU,sBA6DZ,CAAC"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAYrD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;EAMzB,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAC3B,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,OAAO,cAAc,CAAC,CAAC;AAEvD,MAAM,WAAW,UAAU;IACzB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAoGD,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,UAAU,EAAE,IAAI,CAAC,iBAAiB,CAC7C,eAAe,EACf,cAAc,CAqBf,CAAC;AAIF,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,SAAS,EAAE,IAAI,CAAC,iBAAiB,CAAC,cAAc,EAAE,cAAc,CAY1E,CAAC;AAIJ,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,WAAW;oCAAiC,gBAAgB;;CAoDxE,CAAC;AAIF,eAAO,MAAM,KAAK,GAAI,qGAUnB,UAAU,sBAuEZ,CAAC"}