@widergy/mobile-ui 1.46.1 → 1.48.0

package/lib/components/UTBaseInputField/components/ActionAdornment/index.js

@@ -1,14 +1,20 @@
 import React from 'react';
-import { bool, object, shape } from 'prop-types';
+import { bool, object, shape, string } from 'prop-types';
 
 import UTButton from '../../../UTButton';
 import { propTypes as utbuttonProptypes } from '../../../UTButton/proptypes';
 
-const ActionAdornment = ({ action, disabled, actionStyle }) => {
+const ActionAdornment = ({ action, dataTestId, disabled, actionStyle }) => {
   if (!action) return null;
 
   return (
-    <UTButton disabled={disabled} style={actionStyle} variant="text" {...action}>
+    <UTButton
+      dataTestId={dataTestId ? `${dataTestId}.actionAdornment` : undefined}
+      disabled={disabled}
+      style={actionStyle}
+      variant="text"
+      {...action}
+    >
       {action.text}
     </UTButton>
   );
@@ -21,6 +27,7 @@ ActionAdornment.propTypes = {
     icon: object,
     root: object
   }),
+  dataTestId: string,
   disabled: bool
 };
 

package/lib/components/UTBaseInputField/components/BadgeAdornment/index.js

@@ -3,10 +3,15 @@ import { number, oneOfType, string } from 'prop-types';
 
 import UTBadge from '../../../UTBadge';
 
-const BadgeAdornment = ({ text, colorTheme }) => <UTBadge colorTheme={colorTheme}>{text}</UTBadge>;
+const BadgeAdornment = ({ dataTestId, text, colorTheme }) => (
+  <UTBadge dataTestId={dataTestId ? `${dataTestId}.badgeAdornment` : undefined} colorTheme={colorTheme}>
+    {text}
+  </UTBadge>
+);
 
 BadgeAdornment.propTypes = {
   colorTheme: string,
+  dataTestId: string,
   text: oneOfType([string, number])
 };
 

package/lib/components/UTBaseInputField/components/IconAdornment/index.js

@@ -12,6 +12,7 @@ const IconAdornment = ({
   changeOnError,
   changeOnFocus,
   colorTheme,
+  dataTestId,
   error,
   focused,
   Icon,
@@ -23,12 +24,17 @@ const IconAdornment = ({
 
   return isUTIcon(IconToRender) ? (
     <UTIcon
+      dataTestId={dataTestId ? `${dataTestId}.iconAdornment` : undefined}
       name={IconToRender}
       size={ICON_SIZE}
       {...getIconColorProps(changeOnError, changeOnFocus, colorTheme, error, focused, shade)}
     />
   ) : (
-    <Icon size={ICON_SIZE} fill={inputStyle.root.color} />
+    <Icon
+      testID={dataTestId ? `${dataTestId}.iconAdornment` : undefined}
+      size={ICON_SIZE}
+      fill={inputStyle.root.color}
+    />
   );
 };
 
@@ -36,6 +42,7 @@ IconAdornment.propTypes = {
   changeOnError: bool,
   changeOnFocus: bool,
   colorTheme: string,
+  dataTestId: string,
   error: oneOfType([bool, string]),
   focused: bool,
   Icon: elementType,

package/lib/components/UTBaseInputField/components/PrefixAdornment/index.js

@@ -3,13 +3,19 @@ import { string } from 'prop-types';
 
 import UTLabel from '../../../UTLabel';
 
-const PrefixAdornment = ({ text }) => (
-  <UTLabel colorTheme="gray" variant="small" weight="medium">
+const PrefixAdornment = ({ dataTestId, text }) => (
+  <UTLabel
+    dataTestId={dataTestId ? `${dataTestId}.prefixAdornment` : undefined}
+    colorTheme="gray"
+    variant="small"
+    weight="medium"
+  >
     {text}
   </UTLabel>
 );
 
 PrefixAdornment.propTypes = {
+  dataTestId: string,
   text: string
 };
 

package/lib/components/UTBaseInputField/components/SuffixAdornment/index.js

@@ -3,9 +3,14 @@ import { string } from 'prop-types';
 
 import UTLabel from '../../../UTLabel';
 
-const SuffixAdornment = ({ text }) => <UTLabel colorTheme="gray">{text}</UTLabel>;
+const SuffixAdornment = ({ dataTestId, text }) => (
+  <UTLabel dataTestId={dataTestId ? `${dataTestId}.suffixAdornment` : undefined} colorTheme="gray">
+    {text}
+  </UTLabel>
+);
 
 SuffixAdornment.propTypes = {
+  dataTestId: string,
   text: string
 };
 

package/lib/components/UTBaseInputField/components/TooltipAdornment/index.js

@@ -5,19 +5,32 @@ import UTTooltip from '../../../UTTooltip';
 import UTIcon from '../../../UTIcon';
 import UTLabel from '../../../UTLabel';
 
-const TooltipAdornment = ({ tooltip, tooltipProps }) => {
+const TooltipAdornment = ({ dataTestId, tooltip, tooltipProps }) => {
   const { tooltip: tooltipStyles, arrowTouchable, labelProps } = tooltipProps || {};
   return tooltip ? (
     <UTTooltip
+      dataTestId={dataTestId ? `${dataTestId}.tooltipAdornment` : undefined}
       styles={{ tooltip: tooltipStyles, arrow: arrowTouchable }}
-      content={<UTLabel {...labelProps}>{tooltip}</UTLabel>}
+      content={
+        <UTLabel
+          dataTestId={dataTestId ? `${dataTestId}.tooltipAdornment.content` : undefined}
+          {...labelProps}
+        >
+          {tooltip}
+        </UTLabel>
+      }
     >
-      <UTIcon name="IconInfoCircle" colorTheme="gray" />
+      <UTIcon
+        dataTestId={dataTestId ? `${dataTestId}.tooltipAdornment.icon` : undefined}
+        name="IconInfoCircle"
+        colorTheme="gray"
+      />
     </UTTooltip>
   ) : undefined;
 };
 
 TooltipAdornment.propTypes = {
+  dataTestId: string,
   tooltip: string,
   tooltipProps: shape({
     tooltip: object,

package/lib/components/UTBaseInputField/index.js

@@ -14,11 +14,14 @@ import { arrayOf, bool, func, number, object, oneOfType, shape, string } from 'p
 
 import { useTheme } from '../../theming';
 import UTLabel from '../UTLabel';
+import { TEST_ID_CONSTANTS } from '../../constants/testIds';
 
 import { COMPONENTS_MAPPER, DEBOUNCE_CONFIG, DEBOUNCE_DELAY } from './constants';
 import { getPropsByType } from './utils';
 import { CONTAINER, LINE_HEIGHT, retrieveStyle } from './theme';
 
+const { characterCount } = TEST_ID_CONSTANTS;
+
 const UTBaseInputField = forwardRef(
   (
     {
@@ -26,6 +29,7 @@ const UTBaseInputField = forwardRef(
       autoCapitalize: autoCapitalize_,
       blurOnSubmit,
       disabled,
+      dataTestId,
       editable = true,
       error,
       id,
@@ -153,10 +157,11 @@ const UTBaseInputField = forwardRef(
     }));
 
     const renderElement = useCallback(
-      element => {
+      (element, adornmentSide) => {
         const Component = COMPONENTS_MAPPER[element.name];
         return Component ? (
           <Component
+            dataTestId={dataTestId ? `${dataTestId}.${adornmentSide}` : undefined}
             actionStyle={actionStyle}
             disabled={disabled}
             error={error}
@@ -179,11 +184,12 @@ const UTBaseInputField = forwardRef(
     return (
       <View style={[containerStyle, { minHeight }]}>
         <View style={inputRowStyle}>
-          {leftAdornments.map(renderElement)}
+          {leftAdornments.map(element => renderElement(element, 'left'))}
           <TextInput
             autoCapitalize={autoCapitalize}
             autoCorrect={false}
             cursorColor={inputStyle.cursorColor}
+            testID={dataTestId}
             defaultValue={value}
             editable={!disabled && !readOnly && editable}
             id={id ? `${id}` : undefined}
@@ -206,11 +212,15 @@ const UTBaseInputField = forwardRef(
             style={inputStyle.root}
             type={type}
           />
-          {rightAdornments.map(renderElement)}
+          {rightAdornments.map(element => renderElement(element, 'right'))}
         </View>
         {hasCharactersCount && (
           <View style={textLengthRowStyle}>
-            <UTLabel colorTheme="gray" variant="small">
+            <UTLabel
+              dataTestId={dataTestId ? `${dataTestId}.${characterCount}` : undefined}
+              colorTheme="gray"
+              variant="small"
+            >
               {value?.length || 0}/{maxLength}
             </UTLabel>
           </View>
@@ -226,6 +236,7 @@ UTBaseInputField.propTypes = {
   alwaysShowPlaceholder: bool,
   autoCapitalize: string,
   blurOnSubmit: bool,
+  dataTestId: string,
   disabled: bool,
   editable: bool,
   error: oneOfType([bool, string]),

package/lib/components/UTBottomSheet/README.md

@@ -6,29 +6,30 @@
 
 ## Props
 
-| Name                      | Type     | Default     | Description                                                                 |
-| ------------------------- | -------- | ----------- | --------------------------------------------------------------------------- |
-| `actionAlignment`         | `string` |             | Aligns the actions.                                                         |
-| `adjustableHeight`        | `bool`   | `false`     | If true the height of the component adjusts to the content.                 |
-| `buttonText`              | `string` |             | Text for the button that appears in the top right corner of the header.     |
-| `description`             | `string` |             | Description that appears below the title in the header.                     |
-| `onClose`                 | `func`   |             | Function called when the bottom sheet is closed.                            |
-| `onCloseProps`            | `object` |             | Additional props passed to the `onClose` function (optional).               |
-| `primaryAction`           | `func`   |             | Callback for the primary action button.                                     |
-| `primaryActionProps`      | `object` |             | Props for the primary action button.                                        |
-| `primaryActionText`       | `string` |             | Text for the primary action button.                                         |
-| `required`                | `bool`   |             | Indicates if the field is required, showing an asterisk in the title.       |
-| `scrolleable`             | `bool`   | `false`     | Determines if the content inside the bottom sheet should be scrollable.     |
-| `secondaryAction`         | `func`   |             | Callback for the secondary action button.                                   |
-| `secondaryActionProps`    | `object` |             | Props for the secondary action button.                                      |
-| `secondaryActionText`     | `string` |             | Text for the secondary action button.                                       |
-| `tertiaryAction`          | `func`   |             | Callback for the tertiary action button.                                    |
-| `tertiaryActionProps`     | `object` |             | Props for the tertiary action button .                                      |
-| `tertiaryActionText`      | `string` |             | Text for the tertiary action button.                                        |
-| `title`                   | `string` |             | Title that appears in the bottom sheet header.                              |
-| `titleProps`              | `object` |             | Props for the title label                                                   |
-| `visible`                 | `bool`   |             | Controls the visibility of the bottom sheet.                                |
-| `withBodyPadding`         | `bool`   | `true`      | Controls the visibility of the bottom sheet.                                |
+| Name                   | Type     | Default | Description                                                             |
+| ---------------------- | -------- | ------- | ----------------------------------------------------------------------- |
+| `actionAlignment`      | `string` |         | Aligns the actions.                                                     |
+| `adjustableHeight`     | `bool`   | `false` | If true the height of the component adjusts to the content.             |
+| `buttonText`           | `string` |         | Text for the button that appears in the top right corner of the header. |
+| `dataTestId`           | `string` |         | Test ID for automated testing. Enables hierarchical test ID structure.  |
+| `description`          | `string` |         | Description that appears below the title in the header.                 |
+| `onClose`              | `func`   |         | Function called when the bottom sheet is closed.                        |
+| `onCloseProps`         | `object` |         | Additional props passed to the `onClose` function (optional).           |
+| `primaryAction`        | `func`   |         | Callback for the primary action button.                                 |
+| `primaryActionProps`   | `object` |         | Props for the primary action button.                                    |
+| `primaryActionText`    | `string` |         | Text for the primary action button.                                     |
+| `required`             | `bool`   |         | Indicates if the field is required, showing an asterisk in the title.   |
+| `scrolleable`          | `bool`   | `false` | Determines if the content inside the bottom sheet should be scrollable. |
+| `secondaryAction`      | `func`   |         | Callback for the secondary action button.                               |
+| `secondaryActionProps` | `object` |         | Props for the secondary action button.                                  |
+| `secondaryActionText`  | `string` |         | Text for the secondary action button.                                   |
+| `tertiaryAction`       | `func`   |         | Callback for the tertiary action button.                                |
+| `tertiaryActionProps`  | `object` |         | Props for the tertiary action button .                                  |
+| `tertiaryActionText`   | `string` |         | Text for the tertiary action button.                                    |
+| `title`                | `string` |         | Title that appears in the bottom sheet header.                          |
+| `titleProps`           | `object` |         | Props for the title label                                               |
+| `visible`              | `bool`   |         | Controls the visibility of the bottom sheet.                            |
+| `withBodyPadding`      | `bool`   | `true`  | Controls the visibility of the bottom sheet.                            |
 
 ### actionAlignment
 
@@ -39,8 +40,35 @@ The value of `actionAlignment` must be one of the following:
 
 By default, actions are aligned horizontally if there are two, and vertically otherwise.
 
+## Test IDs
+
+When `dataTestId` is provided, the component creates a hierarchical test ID structure:
+
+| Element          | Test ID                         | Condition                               |
+| ---------------- | ------------------------------- | --------------------------------------- |
+| Modal container  | `${dataTestId}`                 | Always when `dataTestId` provided       |
+| Title            | `${dataTestId}.title`           | When `title` prop is provided           |
+| Description      | `${dataTestId}.description`     | When `description` prop is provided     |
+| Close button     | `${dataTestId}.closeButton`     | When `buttonText` prop is provided      |
+| Primary action   | `${dataTestId}.primaryAction`   | When `primaryAction` prop is provided   |
+| Secondary action | `${dataTestId}.secondaryAction` | When `secondaryAction` prop is provided |
+| Tertiary action  | `${dataTestId}.tertiaryAction`  | When `tertiaryAction` prop is provided  |
+
+### Action Button Test IDs
+
+Action buttons inherit test IDs from `UTButton` component:
+
+- Each action gets its specific test ID (e.g., `${dataTestId}.primaryAction`)
+- UTButton creates its own hierarchy for internal elements
+
+### Children Test IDs
+
+The content area (children) does not receive a test ID automatically. Developers should add test IDs directly to their children components as needed.
+
 ## Example
 
+### Basic Usage
+
 ```jsx
 import React, { useState } from 'react';
 import { View, Button, Text } from 'react-native';
@@ -74,3 +102,46 @@ const Example = () => {
 
 export default Example;
 ```
+
+### With Test IDs
+
+```jsx
+import React, { useState } from 'react';
+import { View, Button, Text } from 'react-native';
+import UTBottomSheet from './UTBottomSheet';
+
+const TestableExample = () => {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <View style={{ flex: 1 }}>
+      <Button title="Show Bottom Sheet" onPress={() => setVisible(true)} />
+      <UTBottomSheet
+        dataTestId="settingsSheet"
+        title="Settings"
+        description="Configure your preferences"
+        buttonText="Done"
+        visible={visible}
+        onClose={() => setVisible(false)}
+        primaryAction={() => console.log('Save')}
+        primaryActionText="Save Changes"
+        secondaryAction={() => console.log('Cancel')}
+        secondaryActionText="Cancel"
+        tertiaryAction={() => console.log('Reset')}
+        tertiaryActionText="Reset to Default"
+      >
+        <Text>Settings content goes here</Text>
+      </UTBottomSheet>
+    </View>
+  );
+};
+
+// Generated test IDs:
+// settingsSheet
+// settingsSheet.title
+// settingsSheet.description
+// settingsSheet.closeButton
+// settingsSheet.primaryAction
+// settingsSheet.secondaryAction
+// settingsSheet.tertiaryAction
+```

package/lib/components/UTBottomSheet/index.js

@@ -8,10 +8,20 @@ import UTButton from '../UTButton';
 import UTFieldLabel from '../UTFieldLabel';
 import UTLabel from '../UTLabel';
 import { IS_IOS } from '../../utils/platformUtils/constants';
+import { TEST_ID_CONSTANTS } from '../../constants/testIds';
 
 import styles from './styles';
 import { ACTION_ALIGNMENTS } from './constants';
 
+const {
+  title: titleTestId,
+  closeButton,
+  description: descriptionTestId,
+  primaryAction: primaryActionTestId,
+  secondaryAction: secondaryActionTestId,
+  tertiaryAction: tertiaryActionTestId
+} = TEST_ID_CONSTANTS;
+
 const screenHeight = Dimensions.get('window').height;
 
 const UTBottomSheet = ({
@@ -36,7 +46,8 @@ const UTBottomSheet = ({
   title,
   titleProps = {},
   visible,
-  withBodyPadding = true
+  withBodyPadding = true,
+  dataTestId
 }) => {
   const [height, setHeight] = useState('70%');
   const [modalHeight, setModalHeight] = useState(height);
@@ -94,6 +105,7 @@ const UTBottomSheet = ({
       propagateSwipe
       style={styles.modal}
       swipeDirection="down"
+      testID={dataTestId}
     >
       <Animated.View style={[styles.animatedContainer(theme), { height: modalHeight }, pan.getLayout()]}>
         <SafeAreaView onLayout={onLayout} style={styles.content(adjustableHeight)}>
@@ -108,6 +120,7 @@ const UTBottomSheet = ({
                   style={styles.title}
                   variant="subtitle1"
                   weight="medium"
+                  dataTestId={dataTestId ? `${dataTestId}.${titleTestId}` : undefined}
                   {...titleProps}
                 >
                   {title}
@@ -117,6 +130,7 @@ const UTBottomSheet = ({
                     colorTheme="primary"
                     onPress={onClose}
                     variant="semitransparent"
+                    dataTestId={dataTestId ? `${dataTestId}.${closeButton}` : undefined}
                     {...onCloseProps}
                   >
                     {buttonText}
@@ -124,7 +138,11 @@ const UTBottomSheet = ({
                 )}
               </View>
               {description && (
-                <UTLabel colorTheme="gray" variant="small">
+                <UTLabel
+                  colorTheme="gray"
+                  variant="small"
+                  dataTestId={dataTestId ? `${dataTestId}.${descriptionTestId}` : undefined}
+                >
                   {description}
                 </UTLabel>
               )}
@@ -142,12 +160,14 @@ const UTBottomSheet = ({
                   variant: 'semitransparent',
                   onPress: primaryAction,
                   text: primaryActionText,
+                  dataTestId: dataTestId ? `${dataTestId}.${primaryActionTestId}` : undefined,
                   ...primaryActionProps
                 },
                 {
                   key: 'secondaryAction',
                   onPress: secondaryAction,
                   text: secondaryActionText,
+                  dataTestId: dataTestId ? `${dataTestId}.${secondaryActionTestId}` : undefined,
                   ...secondaryActionProps
                 },
                 {
@@ -155,16 +175,18 @@ const UTBottomSheet = ({
                   onPress: tertiaryAction,
                   text: tertiaryActionText,
                   variant: 'text',
+                  dataTestId: dataTestId ? `${dataTestId}.${tertiaryActionTestId}` : undefined,
                   ...tertiaryActionProps
                 }
               ].map(
-                ({ text, key, onPress, ...actionProps }) =>
+                ({ text, key, onPress, dataTestId: actionDataTestId, ...actionProps }) =>
                   onPress && (
                     <UTButton
                       key={key}
                       onPress={onPress}
                       size="large"
                       style={styles.action(actionAlignment)}
+                      dataTestId={actionDataTestId}
                       {...actionProps}
                     >
                       {text}
@@ -204,7 +226,8 @@ UTBottomSheet.propTypes = {
   title: string,
   titleProps: object,
   visible: bool,
-  withBodyPadding: bool
+  withBodyPadding: bool,
+  dataTestId: string
 };
 
 export default UTBottomSheet;

package/lib/components/UTButton/index.js

@@ -8,15 +8,19 @@ import UTBadge from '../UTBadge';
 import UTIcon from '../UTIcon';
 import UTLabel from '../UTLabel';
 import UTLoading from '../UTLoading';
+import { TEST_ID_CONSTANTS } from '../../constants/testIds';
 
 import { COLORS_MAPPER, ICON_PLACEMENTS, VARIANTS_NAMES } from './constants';
 import { defaultProps, propTypes } from './proptypes';
 import { retrieveStyle } from './theme';
 
+const { icon, badge, label: labelTestId } = TEST_ID_CONSTANTS;
+
 const UTButton = ({
   children,
   colorTheme,
   count,
+  dataTestId,
   disabled,
   Icon,
   iconPlacement,
@@ -67,6 +71,7 @@ const UTButton = ({
         return (
           <UTIcon
             colorTheme={textStyles.colorTheme}
+            dataTestId={`${dataTestId}.${icon}`}
             name={Icon}
             size={iconSize}
             style={remainingIconStyles}
@@ -74,15 +79,24 @@ const UTButton = ({
         );
       })()
     ) : (
-      <Icon style={iconStyles} fill={iconStyles.color} />
+      <Icon testID={`${dataTestId}.${icon}`} style={iconStyles} fill={iconStyles.color} />
     ));
 
   const RenderedChildren = (
     <View style={themeChildrenContainerStyles}>
-      {count && <UTBadge colorTheme={counterColorTheme}>{count}</UTBadge>}
+      {count && (
+        <UTBadge colorTheme={counterColorTheme} dataTestId={`${dataTestId}.${badge}`}>
+          {count}
+        </UTBadge>
+      )}
       {iconPlacement === ICON_PLACEMENTS.LEFT && IconToShow}
       {children && (
-        <UTLabel colorTheme={textStyles.colorTheme} variant={textStyles.variant} weight={textStyles.weight}>
+        <UTLabel
+          colorTheme={textStyles.colorTheme}
+          dataTestId={`${dataTestId}.${labelTestId}`}
+          variant={textStyles.variant}
+          weight={textStyles.weight}
+        >
           {children}
         </UTLabel>
       )}
@@ -91,7 +105,7 @@ const UTButton = ({
   );
 
   return (
-    <Pressable disabled={disabled || loading} onPress={onPress} style={buttonStyles}>
+    <Pressable testID={dataTestId} disabled={disabled || loading} onPress={onPress} style={buttonStyles}>
       <UTLoading color={iconStyles.color} loading={loading} size={24} thickness={2}>
         {RenderedChildren}
       </UTLoading>

package/lib/components/UTButton/proptypes.js

@@ -15,6 +15,7 @@ export const propTypes = {
   colorTheme: string,
   count: number,
   disabled: bool,
+  dataTestId: string,
   Icon: elementType,
   iconPlacement: string,
   loading: bool,

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)
+```