@widergy/mobile-ui 1.47.0 → 1.48.1

package/lib/components/UTCheckBox/README.md

@@ -10,6 +10,7 @@
 | ------------- | ------ | ------- | ------------------------------------------------------------------------------ |
 | value         | bool   | false   | Indicates whether the checkbox is selected.                                    |
 | onChange      | func   |         | Function to call when the checkbox value changes.                              |
+| dataTestId    | string |         | Test ID for automated testing. Enables hierarchical test ID structure.         |
 | disabled      | bool   | false   | Disables the checkbox, making it unclickable.                                  |
 | indeterminate | bool   | false   | Indicates if the checkbox is in an indeterminate state.                        |
 | isSimple      | bool   | false   | **Deprecated**: Avoid using simple checkboxes in favor of standard checkboxes. |
@@ -21,6 +22,26 @@
 | withMarkdown  | bool   | false   | Enables Markdown rendering for the `title`.                                    |
 | variant       | string |         | The variant to use for styling the checkbox.                                   |
 
+## Test IDs
+
+When `dataTestId` is provided, the component creates a hierarchical test ID structure:
+
+| Element            | Test ID                    | Condition                         |
+| ------------------ | -------------------------- | --------------------------------- |
+| Checkbox pressable | `${dataTestId}`            | Always when `dataTestId` provided |
+| Checkbox icon      | `${dataTestId}.icon`       | Always when `dataTestId` provided |
+| Title              | `${dataTestId}.title`      | When `title` prop is provided     |
+| Validation         | `${dataTestId}.validation` | When `error` prop is provided     |
+
+### Test ID Structure Details
+
+- **Checkbox pressable**: The main interactive element that users click to toggle the checkbox
+- **Checkbox icon**: The visual indicator (checkmark, indeterminate line, or empty box)
+- **Title**: The text/title displayed next to the checkbox (handled by UTFieldLabel)
+- **Validation**: Error message displayed when validation fails
+
+The checkbox icon test ID applies to both simple and standard variants, though the underlying implementation differs.
+
 ## Usage
 
 ### Basic Example
@@ -37,3 +58,29 @@ const Example = () => {
 
 export default Example;
 ```
+
+### With Test IDs
+
+```jsx
+import React from 'react';
+import UTCheckBox from './UTCheckBox';
+
+const TestableExample = () => {
+  const [termsAccepted, setTermsAccepted] = React.useState(false);
+
+  return (
+    <UTCheckBox
+      dataTestId="termsCheckbox"
+      value={termsAccepted}
+      title="I accept the terms and conditions"
+      onChange={setTermsAccepted}
+      required={true}
+    />
+  );
+};
+
+// Generated test IDs:
+// termsCheckbox (main pressable)
+// termsCheckbox.icon (checkbox indicator)
+// termsCheckbox.title (title text)
+```

package/lib/components/UTCheckBox/index.js

@@ -6,12 +6,15 @@ import UTFieldLabel from '../UTFieldLabel';
 import UTIcon from '../UTIcon';
 import { formatErrorToValidation } from '../UTValidation/utils';
 import UTValidation from '../UTValidation';
+import { TEST_ID_CONSTANTS } from '../../constants/testIds';
 
 import { BUTTON_VARIANT, CHECKED_ICON, INDETERMINATE_ICON } from './constants';
 import { propTypes, defaultProps } from './proptypes';
 import { retrieveStyle } from './theme';
 import styles from './styles';
 
+const { icon, title: titleTestId, validation: validationTestId } = TEST_ID_CONSTANTS;
+
 const UTCheckBox = ({
   CustomTitleComponent,
   disabled,
@@ -26,7 +29,8 @@ const UTCheckBox = ({
   title,
   value,
   variant,
-  withMarkdown
+  withMarkdown,
+  dataTestId
 }) => {
   const theme = useTheme();
   const [pressed, setPressed] = useState(false);
@@ -73,6 +77,7 @@ const UTCheckBox = ({
       onPress={handlePress}
       onPressIn={handlePressIn}
       onPressOut={handlePressOut}
+      testID={dataTestId}
     >
       <View style={styles.container}>
         <View style={containerStyles}>
@@ -82,11 +87,21 @@ const UTCheckBox = ({
               shade="04"
               colorTheme="accent"
               style={value ? undefined : styles.hidden}
+              dataTestId={dataTestId ? `${dataTestId}.${icon}` : undefined}
             />
           ) : (
             <View style={boxStyles}>
               <View style={iconContainerStyles}>
-                <UTIcon colorTheme="light" name={iconName} size={16} />
+                <UTIcon
+                  colorTheme="light"
+                  name={iconName}
+                  size={16}
+                  {...(dataTestId
+                    ? {
+                        [!iconName ? 'testID' : 'dataTestId']: `${dataTestId}.${icon}`
+                      }
+                    : {})}
+                />
               </View>
             </View>
           )}
@@ -97,11 +112,17 @@ const UTCheckBox = ({
             required={required}
             style={titleStyles}
             withMarkdown={withMarkdown}
+            dataTestId={dataTestId ? `${dataTestId}.${titleTestId}` : undefined}
           >
             {title}
           </UTFieldLabel>
         </View>
-        {validationData && <UTValidation validationData={validationData} />}
+        {validationData && (
+          <UTValidation
+            validationData={validationData}
+            dataTestId={dataTestId ? `${dataTestId}.${validationTestId}` : undefined}
+          />
+        )}
       </View>
     </Pressable>
   );

package/lib/components/UTCheckBox/proptypes.js

@@ -13,6 +13,7 @@ export const defaultProps = {
 
 export const propTypes = {
   checked: bool,
+  dataTestId: string,
   disabled: bool,
   error: string,
   indeterminate: bool,

package/lib/components/UTCheckList/README.MD

@@ -8,6 +8,7 @@
 
 | Name              | Type            | Default | Description                                                                                                            |
 | ----------------- | --------------- | ------- | ---------------------------------------------------------------------------------------------------------------------- |
+| dataTestId        | string          |         | Test ID for automated testing. Enables hierarchical test ID structure.                                                 |
 | error             | string          |         | Error message to display.                                                                                              |
 | horizontalSpacing | string          | large   | Spacing between the checkbox and the title horizontally.                                                               |
 | title             | string          |         | Title for the checklist.                                                                                               |
@@ -22,6 +23,26 @@
 | variant           | string          |         | Variant style for the checklist.                                                                                       |
 | verticalSpacing   | string          | medium  | Spacing between the checkbox items vertically.                                                                         |
 
+## Test IDs
+
+When `dataTestId` is provided, the component creates a hierarchical test ID structure:
+
+| Element             | Test ID                         | Condition                                   |
+| ------------------- | ------------------------------- | ------------------------------------------- |
+| Title               | `${dataTestId}.title`           | When `title` prop is provided               |
+| Validation          | `${dataTestId}.validation`      | When `error` prop is provided               |
+| Select All checkbox | `${dataTestId}.selectAll`       | When `showSelectAll` is true and not simple |
+| Option checkbox     | `${dataTestId}.option.${index}` | For each option (index-based)               |
+
+### Test ID Structure Details
+
+- **Title**: The title text of the checklist (handled by UTFieldLabel)
+- **Validation**: Error message displayed when validation fails
+- **Select All checkbox**: The "Select All" checkbox (when enabled and not in simple mode)
+- **Option checkbox**: Individual option checkboxes, identified by their index position
+
+Each checkbox (both select all and individual options) follows the UTCheckBox test ID pattern with their own hierarchical structure (e.g., `${dataTestId}.selectAll.icon`, `${dataTestId}.option.0.title`).
+
 ### Option Object
 
 The `options` prop is an array of objects, each representing an option:
@@ -66,6 +87,48 @@ const Example = () => {
 export default Example;
 ```
 
+### With Test IDs
+
+```jsx
+import React from 'react';
+import UTCheckList from './UTCheckList';
+
+const options = [
+  { label: 'Option 1', value: 'option1' },
+  { label: 'Option 2', value: 'option2' },
+  { label: 'Option 3', value: 'option3', disabled: true }
+];
+
+const TestableExample = () => {
+  const [selectedOptions, setSelectedOptions] = React.useState([]);
+
+  return (
+    <UTCheckList
+      dataTestId="surveyQuestions"
+      title="Select your preferences"
+      onChange={setSelectedOptions}
+      options={options}
+      required
+      selectAllLabel="Select All Options"
+      value={selectedOptions}
+    />
+  );
+};
+
+// Generated test IDs:
+// surveyQuestions.title (title text)
+// surveyQuestions.selectAll (select all checkbox)
+// surveyQuestions.selectAll.icon (select all checkbox icon)
+// surveyQuestions.selectAll.title (select all checkbox title)
+// surveyQuestions.option.0 (first option checkbox)
+// surveyQuestions.option.0.icon (first option checkbox icon)
+// surveyQuestions.option.0.title (first option checkbox title)
+// surveyQuestions.option.1 (second option checkbox)
+// surveyQuestions.option.2 (third option checkbox)
+
+export default TestableExample;
+```
+
 ### Custom Styles Example
 
 ```jsx

package/lib/components/UTCheckList/index.js

@@ -6,13 +6,22 @@ import { formatErrorToValidation } from '../UTValidation/utils';
 import UTCheckBox from '../UTCheckBox';
 import UTFieldLabel from '../UTFieldLabel';
 import UTValidation from '../UTValidation';
+import { TEST_ID_CONSTANTS } from '../../constants/testIds';
 
 import { keyExtractor, isChecked, convertIfIsString, getPropValueBasedOnVariant } from './utils';
 import styles from './styles';
 import { defaultProps, propTypes } from './proptypes';
 import { SPACING } from './constants';
 
+const {
+  title: titleTestId,
+  validation: validationTestId,
+  selectAll: selectAllTestId,
+  option: optionTestId
+} = TEST_ID_CONSTANTS;
+
 const UTCheckList = ({
+  dataTestId,
   error,
   horizontalSpacing,
   isSimple,
@@ -77,8 +86,20 @@ const UTCheckList = ({
       style={[styles.container, verticalSpacing === SPACING.SMALL && styles.smallVerticalSpacing, style.root]}
     >
       <View style={[styles.headerContainer, style.header]}>
-        {title && <UTFieldLabel required={required}>{title}</UTFieldLabel>}
-        {validationData && <UTValidation validationData={validationData} />}
+        {title && (
+          <UTFieldLabel
+            required={required}
+            dataTestId={dataTestId ? `${dataTestId}.${titleTestId}` : undefined}
+          >
+            {title}
+          </UTFieldLabel>
+        )}
+        {validationData && (
+          <UTValidation
+            validationData={validationData}
+            dataTestId={dataTestId ? `${dataTestId}.${validationTestId}` : undefined}
+          />
+        )}
       </View>
       <View
         style={[
@@ -98,6 +119,7 @@ const UTCheckList = ({
             spacing={horizontalSpacing}
             style={style.selectAll}
             variant={variant}
+            dataTestId={dataTestId ? `${dataTestId}.${selectAllTestId}` : undefined}
           />
         )}
         {options?.map((item, index) => (
@@ -112,6 +134,7 @@ const UTCheckList = ({
             spacing={horizontalSpacing}
             style={style.item}
             variant={variant}
+            dataTestId={dataTestId ? `${dataTestId}.${optionTestId}.${index}` : undefined}
           />
         ))}
       </View>

package/lib/components/UTCheckList/proptypes.js

@@ -13,6 +13,7 @@ export const defaultProps = {
 };
 
 export const propTypes = {
+  dataTestId: string,
   error: string,
   horizontalSpacing: string,
   isSimple: bool,

package/lib/components/UTDetailDrawer/README.md

@@ -6,17 +6,35 @@ Component to show detail of something as a drawer.
 
 ### Props
 
-| NAME            | TYPE                          | REQUIRED | DESCRIPTION                                                                                                         | DEFAULT VALUE |
-| ---             | ---                           | ---      | ---                                                                                                                 | ---           |
-| onClose         | func | Yes      | Function to close the drawer | -             |
-| visible         | bool | Yes      | Handles drawer visibility (if open or not) | -             |
-| ModalProps       | object | No      | Props to pass to the Modal component (same as [react-native-modal](https://github.com/react-native-community/react-native-modal)) | -             |
-| CloseButtonProps | object | No      | Props to pass to the CloseButton component (same as IconButton) | -             |
-| styles         | object | No      | Styles to pass to the drawer components | -             |
-| width         | string or number | No      | Width of the drawer, could be a percentage or number  | '70%'             |
-| title         | string  | No      |  Title label | ---             |
-| titleProps         | object | No      | props for the title label | {}             |
+| NAME             | TYPE             | REQUIRED | DESCRIPTION                                                                                                                       | DEFAULT VALUE |
+| ---------------- | ---------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------- | ------------- |
+| onClose          | func             | Yes      | Function to close the drawer                                                                                                      | -             |
+| visible          | bool             | Yes      | Handles drawer visibility (if open or not)                                                                                        | -             |
+| dataTestId       | string           | No       | Test ID for automated testing. Enables hierarchical test ID structure.                                                            | -             |
+| ModalProps       | object           | No       | Props to pass to the Modal component (same as [react-native-modal](https://github.com/react-native-community/react-native-modal)) | -             |
+| CloseButtonProps | object           | No       | Props to pass to the CloseButton component (same as IconButton)                                                                   | -             |
+| styles           | object           | No       | Styles to pass to the drawer components                                                                                           | -             |
+| width            | string or number | No       | Width of the drawer, could be a percentage or number                                                                              | '70%'         |
+| title            | string           | No       | Title label                                                                                                                       | ---           |
+| titleProps       | object           | No       | props for the title label                                                                                                         | {}            |
 
+## Test IDs
+
+When `dataTestId` is provided, the component creates a hierarchical test ID structure:
+
+| Element      | Test ID               | Condition                         |
+| ------------ | --------------------- | --------------------------------- |
+| Modal        | `${dataTestId}`       | Always when `dataTestId` provided |
+| Title        | `${dataTestId}.title` | When `title` prop is provided     |
+| Close Button | `${dataTestId}.close` | Always when `dataTestId` provided |
+
+### Test ID Structure Details
+
+- **Modal**: The main modal container that holds the drawer
+- **Title**: The title label displayed in the header
+- **Close Button**: The button used to close the drawer
+
+The children content does not receive automatic test IDs. Developers should add test IDs directly to their children components as needed.
 
 Styles object:
 
@@ -55,3 +73,35 @@ const UTDetailDrawerExample = () => {
   );
 };
 ```
+
+#### Example with Test IDs
+
+```js
+const UTDetailDrawerTestExample = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Layout>
+      <View>
+        <UTLabel big>This is a drawer example</UTLabel>
+        <Button title="Open Settings" onPress={() => setOpen(true)} />
+      </View>
+      <UTDetailDrawer
+        dataTestId="settingsDrawer"
+        title="Settings"
+        onClose={() => setOpen(false)}
+        visible={open}
+      >
+        <View>
+          <UTLabel>Settings content goes here</UTLabel>
+        </View>
+      </UTDetailDrawer>
+    </Layout>
+  );
+};
+
+// Generated test IDs:
+// settingsDrawer (modal container)
+// settingsDrawer.title (title label)
+// settingsDrawer.close (close button)
+```

package/lib/components/UTDetailDrawer/index.js

@@ -5,11 +5,15 @@ import { SafeAreaView, View, ScrollView } from 'react-native';
 import Label from '../Label';
 import { withTheme } from '../../theming';
 import UTButton from '../UTButton';
+import { TEST_ID_CONSTANTS } from '../../constants/testIds';
 
 import propTypes, { UTDetailDrawerDefaultProps } from './propTypes';
 import mergeStyles from './styles';
 
+const { title: titleTestId, close } = TEST_ID_CONSTANTS;
+
 const UTDetailDrawer = ({
+  dataTestId,
   onClose,
   visible,
   children,
@@ -39,6 +43,7 @@ const UTDetailDrawer = ({
 
   return (
     <Modal
+      testID={dataTestId}
       isVisible={visible}
       onBackdropPress={onClose}
       animationIn="slideInRight"
@@ -58,12 +63,17 @@ const UTDetailDrawer = ({
           ) : (
             <View style={mergedStyles.headerContainer}>
               {!!title && (
-                <Label style={mergedStyles.title} {...titleProps}>
+                <Label
+                  dataTestId={dataTestId ? `${dataTestId}.${titleTestId}` : undefined}
+                  style={mergedStyles.title}
+                  {...titleProps}
+                >
                   {title}
                 </Label>
               )}
               {iconButton && (
                 <UTButton
+                  dataTestId={dataTestId ? `${dataTestId}.${close}` : undefined}
                   onPress={onClose}
                   Icon="IconX"
                   variant={CloseButtonProps.variant || 'text'}

package/lib/components/UTDetailDrawer/propTypes.js

@@ -7,6 +7,7 @@ export const UTDetailDrawerDefaultProps = {
 };
 
 export default {
+  dataTestId: string,
   onClose: func.isRequired,
   visible: bool.isRequired,
   ModalProps: shape(any),

package/lib/components/UTFieldLabel/README.md

@@ -0,0 +1,99 @@
+# UTFieldLabel
+
+## Description
+
+> ⚠️ **AI-GENERATED DOCUMENTATION**
+> This documentation was entirely generated by an AI assistant and has NOT been reviewed by human developers. The test ID implementation details, patterns, examples, and usage instructions should be thoroughly verified before use in production. Please validate all functionality and testing approaches with your development team.
+
+`UTFieldLabel` is a label component designed for form fields. It provides consistent styling and supports required field indicators with customizable appearance.
+
+## Props
+
+| Name       | Type   | Default | Description                                                            |
+| ---------- | ------ | ------- | ---------------------------------------------------------------------- |
+| children   | node   |         | The text content to display as the label.                              |
+| dataTestId | string |         | Test ID for automated testing. Enables hierarchical test ID structure. |
+| required   | bool   | false   | Whether to show a required indicator (asterisk) next to the label.     |
+| style      | object |         | Custom styles to apply to the label.                                   |
+
+## Test IDs
+
+When `dataTestId` is provided, the component creates a hierarchical test ID structure:
+
+| Element            | Test ID                  | Condition                         |
+| ------------------ | ------------------------ | --------------------------------- |
+| Label              | `${dataTestId}`          | Always when `dataTestId` provided |
+| Required indicator | `${dataTestId}.required` | When `required` prop is true      |
+
+### Test ID Structure Details
+
+- **Label**: The main label text element
+- **Required indicator**: The asterisk (\*) symbol shown when field is required
+
+The UTFieldLabel component creates a hierarchical test ID structure that allows for precise testing of both the label content and the required indicator.
+
+## Usage
+
+### Basic Example
+
+```jsx
+import React from 'react';
+import UTFieldLabel from '@widergy/mobile-ui';
+
+const BasicExample = () => {
+  return <UTFieldLabel>Email Address</UTFieldLabel>;
+};
+
+export default BasicExample;
+```
+
+### Required Field Example
+
+```jsx
+import React from 'react';
+import UTFieldLabel from '@widergy/mobile-ui';
+
+const RequiredExample = () => {
+  return <UTFieldLabel required>Password</UTFieldLabel>;
+};
+
+export default RequiredExample;
+```
+
+### Example with Test IDs
+
+```jsx
+import React from 'react';
+import UTFieldLabel from '@widergy/mobile-ui';
+
+const TestableExample = () => {
+  return (
+    <UTFieldLabel dataTestId="emailLabel" required>
+      Email Address
+    </UTFieldLabel>
+  );
+};
+
+// Generated test IDs:
+// emailLabel (label text)
+// emailLabel.required (required asterisk indicator)
+
+export default TestableExample;
+```
+
+### Custom Styled Example
+
+```jsx
+import React from 'react';
+import UTFieldLabel from '@widergy/mobile-ui';
+
+const StyledExample = () => {
+  return (
+    <UTFieldLabel style={{ fontSize: 16, fontWeight: 'bold', color: '#333' }} required>
+      Full Name
+    </UTFieldLabel>
+  );
+};
+
+export default StyledExample;
+```

package/lib/components/UTFieldLabel/index.js

@@ -3,14 +3,18 @@ import { bool, elementType, string } from 'prop-types';
 import { View } from 'react-native';
 
 import UTLabel from '../UTLabel';
+import { TEST_ID_CONSTANTS } from '../../constants/testIds';
 
 import { REQUIRED_LABEL } from './constants';
 import styles from './styles';
 
+const { required: requiredTestId } = TEST_ID_CONSTANTS;
+
 const UTFieldLabel = ({
   children,
   colorTheme,
   CustomTitleComponent,
+  dataTestId,
   required,
   style,
   variant,
@@ -21,12 +25,24 @@ const UTFieldLabel = ({
 
   return (
     <View style={[styles.label, style]}>
-      <Title colorTheme={colorTheme} variant={variant} weight={weight} withMarkdown={withMarkdown}>
+      <Title
+        colorTheme={colorTheme}
+        dataTestId={dataTestId}
+        variant={variant}
+        weight={weight}
+        withMarkdown={withMarkdown}
+      >
         {children}
       </Title>
 
       {required && (
-        <UTLabel colorTheme="error" shade="04" variant={variant} weight={weight}>
+        <UTLabel
+          colorTheme="error"
+          dataTestId={dataTestId ? `${dataTestId}.${requiredTestId}` : undefined}
+          shade="04"
+          variant={variant}
+          weight={weight}
+        >
           {REQUIRED_LABEL}
         </UTLabel>
       )}
@@ -37,6 +53,7 @@ const UTFieldLabel = ({
 UTFieldLabel.propTypes = {
   colorTheme: string,
   CustomTitleComponent: elementType,
+  dataTestId: string,
   required: bool,
   variant: string,
   weight: string,

package/lib/components/UTIcon/README.md

@@ -13,11 +13,11 @@ For a comprehensive list of available icons and their design specifications, ref
 
 ## Props
 
-
 | Name       | Type    | Default   | Description                                                                                                                                         |
-| :----------- | --------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| :--------- | ------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
 | area       | boolean | false     | Padding around the icon is added when it is true.                                                                                                   |
 | colorTheme | string  | 'dark'    | The icon color, must be from the theme palette.                                                                                                     |
+| dataTestId | string  |           | Test ID for automated testing.                                                                                                                      |
 | fillTheme  | string  |           | The internal fill color must be from the theme palette.                                                                                             |
 | name       | string  |           | The name of the icon from the Tabler Icons library.                                                                                                 |
 | shade      | string  |           | The shade of the color theme to use.                                                                                                                |
@@ -25,6 +25,20 @@ For a comprehensive list of available icons and their design specifications, ref
 | style      | object  |           | Custom styles to apply to the icon.                                                                                                                 |
 | variant    | string  | 'default' | It depends on the `area` property and defines whether it should be displayed filled (`default`) or just with a border (`outlined`) around the icon. |
 
+## Test IDs
+
+When `dataTestId` is provided, the component applies the test ID to its element:
+
+| Element | Test ID         | Condition                         |
+| ------- | --------------- | --------------------------------- |
+| Icon    | `${dataTestId}` | Always when `dataTestId` provided |
+
+### Test ID Details
+
+- **Icon**: The main icon element that renders the specified icon
+
+The UTIcon component applies the test ID directly to its root icon element, making it easy to identify and interact with in automated tests.
+
 ## Icon Names
 
 Icon names must be in PascalCase. Typically, icon names are a conversion from Figma's or Zeroheight's snake_case to PascalCase, adding `Icon` as a prefix.
@@ -119,3 +133,12 @@ Clarifications:
 ```javascript
 <UTIcon colorTheme="primary" name="IconTruckDelivery" size={48} />
 ```
+
+### Example with Test IDs
+
+```javascript
+<UTIcon dataTestId="deliveryIcon" colorTheme="primary" name="IconTruckDelivery" size={48} />
+
+// Generated test IDs:
+// deliveryIcon (icon element)
+```

package/lib/components/UTIcon/index.js

@@ -13,6 +13,7 @@ const UTIcon = ({
   area,
   color,
   colorTheme = 'dark',
+  dataTestId,
   fillShade,
   fillTheme,
   iconStyles,
@@ -50,7 +51,7 @@ const UTIcon = ({
         style
       ]}
     >
-      <IconComponent {...{ ...iconProps, ...iconStyles }} />
+      <IconComponent testID={dataTestId} {...{ ...iconProps, ...iconStyles }} />
     </View>
   );
 };
@@ -62,6 +63,7 @@ UTIcon.propTypes = {
    */
   color: string,
   colorTheme: string,
+  dataTestId: string,
   fillShade: string,
   fillTheme: string,
   iconStyles: object,