@widergy/mobile-ui 1.47.0 → 1.48.0

package/lib/components/UTSelectableCard/index.js

@@ -10,17 +10,31 @@ import { useTheme } from '../../theming';
 import UTIcon from '../UTIcon';
 import UTLabel from '../UTLabel';
 import { mergeMultipleStyles } from '../../utils/styleUtils';
+import { TEST_ID_CONSTANTS } from '../../constants/testIds';
 
 import { getColorTheme, ownStyles, ICON_SIZE, getAppearanceStyles, ownSizeStyles } from './styles';
 
+const {
+  icon,
+  titleText: titleTextTestId,
+  tooltip: tooltipTestId,
+  content,
+  description: descriptionTestId,
+  additionalInfo: additionalInfoTestId,
+  title: titleTestId,
+  checkIcon: checkIconTestId
+} = TEST_ID_CONSTANTS;
+
 const UTSelectableCard = ({
   additionalInfo = {},
   appearance = 'white',
   checkIcon = true,
   children,
+  dataTestId,
   description,
   disabled = false,
   Icon,
+  iconDataTestId,
   numberOfLines,
   onPress,
   selected = false,
@@ -43,6 +57,7 @@ const UTSelectableCard = ({
   return (
     <Surface style={themedStyles.outerContainer}>
       <Touchable
+        dataTestId={dataTestId}
         disabled={disabled}
         onPress={() => onPress?.()}
         style={[
@@ -56,6 +71,7 @@ const UTSelectableCard = ({
           {hasIcon &&
             (Icon.url ? (
               <Image
+                testID={dataTestId ? `${dataTestId}.${icon}` : undefined}
                 source={{ uri: Icon.url }}
                 width={Icon.size || ICON_SIZE}
                 height={Icon.size || ICON_SIZE}
@@ -63,6 +79,7 @@ const UTSelectableCard = ({
               />
             ) : Icon.name ? (
               <UTIcon
+                dataTestId={dataTestId ? `${dataTestId}.${icon}` : undefined}
                 name={Icon.name}
                 colorTheme={colorTheme}
                 shade={Icon.shade}
@@ -70,12 +87,16 @@ const UTSelectableCard = ({
                 style={themedStyles.icon}
               />
             ) : (
-              <Icon.Component style={themedStyles.icon} />
+              <Icon.Component
+                testID={iconDataTestId || (dataTestId ? `${dataTestId}.${icon}` : undefined)}
+                style={themedStyles.icon}
+              />
             ))}
           <View style={themedStyles.textContainer}>
             <View style={[themedStyles.column, themedStyles.leftColumn]}>
               <View style={[themedStyles.titleAndTooltip, selected && themedStyles.selectedTitleAndTooltip]}>
                 <UTLabel
+                  dataTestId={dataTestId ? `${dataTestId}.${titleTextTestId}` : undefined}
                   colorTheme={colorTheme}
                   numberOfLines={numberOfLines}
                   style={tooltip && themedStyles.titleMargin}
@@ -85,13 +106,24 @@ const UTSelectableCard = ({
                   {titleText}
                 </UTLabel>
                 {tooltip && (
-                  <UTTooltip content={<UTLabel>{tooltip}</UTLabel>} position="top">
+                  <UTTooltip
+                    dataTestId={dataTestId ? `${dataTestId}.${tooltipTestId}` : undefined}
+                    content={
+                      <UTLabel
+                        dataTestId={dataTestId ? `${dataTestId}.${tooltipTestId}.${content}` : undefined}
+                      >
+                        {tooltip}
+                      </UTLabel>
+                    }
+                    position="top"
+                  >
                     <UTIcon colorTheme={colorTheme} name="IconHelp" />
                   </UTTooltip>
                 )}
               </View>
               {description && (
                 <UTLabel
+                  dataTestId={dataTestId ? `${dataTestId}.${descriptionTestId}` : undefined}
                   numberOfLines={numberOfLines}
                   colorTheme={selected ? 'accent' : 'gray'}
                   style={themedStyles.description}
@@ -103,12 +135,21 @@ const UTSelectableCard = ({
             {!isEmpty(additionalInfo) && (
               <View style={themedStyles.column}>
                 {!!additionalInfo.title && (
-                  <UTLabel colorTheme={colorTheme} style={themedStyles.additionalInfo}>
+                  <UTLabel
+                    dataTestId={
+                      dataTestId ? `${dataTestId}.${additionalInfoTestId}.${titleTestId}` : undefined
+                    }
+                    colorTheme={colorTheme}
+                    style={themedStyles.additionalInfo}
+                  >
                     {additionalInfo.title}
                   </UTLabel>
                 )}
                 {!!additionalInfo.description && (
                   <UTLabel
+                    dataTestId={
+                      dataTestId ? `${dataTestId}.${additionalInfoTestId}.${descriptionTestId}` : undefined
+                    }
                     colorTheme={colorTheme}
                     style={[themedStyles.description, themedStyles.additionalInfo]}
                   >
@@ -120,7 +161,12 @@ const UTSelectableCard = ({
           </View>
           {children}
           {checkIcon && selected && (
-            <UTIcon colorTheme="accent" name="IconCheck" style={themedStyles.checkIcon} />
+            <UTIcon
+              dataTestId={dataTestId ? `${dataTestId}.${checkIconTestId}` : undefined}
+              colorTheme="accent"
+              name="IconCheck"
+              style={themedStyles.checkIcon}
+            />
           )}
         </View>
       </Touchable>
@@ -132,9 +178,11 @@ UTSelectableCard.propTypes = {
   additionalInfo: shape({ description: string, title: string }),
   appearance: string,
   checkIcon: bool,
+  dataTestId: string,
   description: string,
   disabled: bool,
   Icon: shape({ name: string, shade: string, size: number }),
+  iconDataTestId: string,
   numberOfLines: number,
   onPress: func,
   selected: bool,

package/lib/components/UTTextInput/versions/V0/components/BaseInput/index.js

@@ -23,6 +23,7 @@ const BaseInput = forwardRef(
   (
     {
       onBlur,
+      dataTestId,
       onFocus,
       onLayout,
       label,
@@ -80,6 +81,7 @@ const BaseInput = forwardRef(
     return (
       <Fragment>
         <TextInput
+          testID={dataTestId}
           autoCorrect={false}
           ref={textInputRef}
           onLayout={onLayout}
@@ -100,6 +102,7 @@ const BaseInput = forwardRef(
         {(RightIcon || hiddenInput) && (
           <Touchable
             borderless
+            dataTestId={dataTestId ? `${dataTestId}.icon` : undefined}
             onPress={hiddenInput ? toggleShowInput : onRightIconPress}
             style={[
               styles.iconContainer,
@@ -141,7 +144,8 @@ BaseInput.propTypes = {
   outlined: bool,
   InputRef: func,
   variantStyle: ViewPropTypes.style,
-  standard: bool
+  standard: bool,
+  dataTestId: string
 };
 
 export default withTheme(BaseInput);

package/lib/components/UTTextInput/versions/V0/components/InputLabel/index.js

@@ -10,6 +10,7 @@ const AnimatedView = Animated.View;
 const AnimatedText = Animated.Text;
 
 const InputLabel = ({
+  dataTestId,
   focused,
   error,
   value,
@@ -109,6 +110,7 @@ const InputLabel = ({
       ]}
     >
       <AnimatedText
+        testID={dataTestId}
         onLayout={handleLayout}
         ellipsizeMode={overflowControl?.ellipsizeMode}
         numberOfLines={overflowControl?.numberOfLines}
@@ -167,7 +169,8 @@ InputLabel.propTypes = {
     initX: number,
     initY: number
   }),
-  labelBackgroundColor: string
+  labelBackgroundColor: string,
+  dataTestId: string
 };
 
 export default withTheme(InputLabel);

package/lib/components/UTTextInput/versions/V0/flavors/FilledInput/index.js

@@ -97,6 +97,7 @@ const FilledInput = ({
             />
             {!!label && (
               <InputLabel
+                dataTestId={props.dataTestId ? `${props.dataTestId}.inputLabel` : undefined}
                 focused={focused}
                 error={error}
                 value={value}
@@ -127,8 +128,14 @@ const FilledInput = ({
         </View>
         {!!tooltip && (
           <View style={[ownStyles.tooltipContainer, multiline && { height: initialHeight }]}>
-            <UTTooltip content={tooltip} position="left" {...tooltipProps}>
+            <UTTooltip
+              dataTestId={props.dataTestId ? `${props.dataTestId}.tooltip` : undefined}
+              content={tooltip}
+              position="left"
+              {...tooltipProps}
+            >
               <Icon
+                testID={props.dataTestId ? `${props.dataTestId}.tooltip.icon` : undefined}
                 name="questioncircleo"
                 type="antdesign"
                 color={themeStyles?.tooltip?.color}
@@ -140,6 +147,7 @@ const FilledInput = ({
         )}
       </View>
       <CaptionLabel
+        dataTestId={props.dataTestId ? `${props.dataTestId}.captionLabel` : undefined}
         error={error}
         color={theme.colors.primary}
         errorColor={theme.colors.error}

package/lib/components/UTTextInput/versions/V0/flavors/OutlinedInput/index.js

@@ -125,6 +125,7 @@ const OutlinedInput = ({
           />
           {!!label && (
             <InputLabel
+              dataTestId={props.dataTestId ? `${props.dataTestId}.inputLabel` : undefined}
               focused={focused}
               error={error}
               value={value}
@@ -152,8 +153,14 @@ const OutlinedInput = ({
         </View>
         {!!tooltip && (
           <View style={[ownStyles.tooltipContainer, multiline && { height: initialHeight }]}>
-            <UTTooltip content={<UTLabel>{tooltip}</UTLabel>} position="left" {...tooltipProps}>
+            <UTTooltip
+              dataTestId={props.dataTestId ? `${props.dataTestId}.tooltip` : undefined}
+              content={<UTLabel>{tooltip}</UTLabel>}
+              position="left"
+              {...tooltipProps}
+            >
               <Icon
+                testID={props.dataTestId ? `${props.dataTestId}.tooltip.icon` : undefined}
                 name="questioncircleo"
                 type="antdesign"
                 color={themeStyles?.tooltip?.color}
@@ -165,6 +172,7 @@ const OutlinedInput = ({
         )}
       </View>
       <CaptionLabel
+        dataTestId={props.dataTestId ? `${props.dataTestId}.captionLabel` : undefined}
         error={error}
         color={theme.colors.primary}
         errorColor={theme.colors.error}

package/lib/components/UTTextInput/versions/V0/flavors/StandardInput/index.js

@@ -84,6 +84,7 @@ const StandardInput = ({
             />
             {!!label && (
               <InputLabel
+                dataTestId={props.dataTestId ? `${props.dataTestId}.inputLabel` : undefined}
                 focused={focused}
                 error={error}
                 value={value}
@@ -115,8 +116,14 @@ const StandardInput = ({
         </View>
         {!!tooltip && (
           <View style={ownStyles.tooltipContainer}>
-            <UTTooltip content={tooltip} position="left" {...tooltipProps}>
+            <UTTooltip
+              dataTestId={props.dataTestId ? `${props.dataTestId}.tooltip` : undefined}
+              content={tooltip}
+              position="left"
+              {...tooltipProps}
+            >
               <Icon
+                testID={props.dataTestId ? `${props.dataTestId}.tooltip.icon` : undefined}
                 name="questioncircleo"
                 type="antdesign"
                 color={themeStyles?.tooltip?.color}
@@ -128,6 +135,7 @@ const StandardInput = ({
         )}
       </View>
       <CaptionLabel
+        dataTestId={props.dataTestId ? `${props.dataTestId}.captionLabel` : undefined}
         error={error}
         color={theme.colors.primary}
         errorColor={theme.colors.error}

package/lib/components/UTTextInput/versions/V1/components/TextInputField/index.js

@@ -9,6 +9,7 @@ const TextInputField = ({
   autoCapitalize,
   alwaysShowPlaceholder,
   blurOnSubmit,
+  dataTestId,
   disabled,
   error,
   id,
@@ -51,6 +52,7 @@ const TextInputField = ({
       alwaysShowPlaceholder={alwaysShowPlaceholder}
       autoCapitalize={autoCapitalize}
       blurOnSubmit={blurOnSubmit}
+      dataTestId={dataTestId}
       disabled={disabled && !readOnly}
       error={error}
       id={id}
@@ -82,6 +84,7 @@ TextInputField.propTypes = {
   alwaysShowPlaceholder: bool,
   autoCapitalize: string,
   blurOnSubmit: bool,
+  dataTestId: string,
   disabled: bool,
   error: string,
   id: oneOfType([number, string]),

package/lib/components/UTTextInput/versions/V1/index.js

@@ -16,6 +16,7 @@ const UTTextInput = ({
   alwaysShowPlaceholder,
   autoCapitalize,
   blurOnSubmit,
+  dataTestId,
   disabled,
   error,
   helpText,
@@ -56,7 +57,12 @@ const UTTextInput = ({
   return (
     <View style={[styles.container, style.root]}>
       {title && (
-        <UTFieldLabel colorTheme={titleColorTheme} required={required} variant={TITLE_VARIANTS[titleVariant]}>
+        <UTFieldLabel
+          colorTheme={titleColorTheme}
+          dataTestId={dataTestId ? `${dataTestId}.title` : undefined}
+          required={required}
+          variant={TITLE_VARIANTS[titleVariant]}
+        >
           {title}
         </UTFieldLabel>
       )}
@@ -65,6 +71,7 @@ const UTTextInput = ({
         alwaysShowPlaceholder={alwaysShowPlaceholder}
         autoCapitalize={autoCapitalize}
         blurOnSubmit={blurOnSubmit}
+        dataTestId={dataTestId}
         disabled={disabled}
         error={error}
         id={id}
@@ -91,11 +98,20 @@ const UTTextInput = ({
         value={value}
       />
       {helpText && (
-        <UTLabel colorTheme="gray" variant="small">
+        <UTLabel
+          colorTheme="gray"
+          dataTestId={dataTestId ? `${dataTestId}.helpText` : undefined}
+          variant="small"
+        >
           {helpText}
         </UTLabel>
       )}
-      {validationData && <UTValidation validationData={validationData} />}
+      {validationData && (
+        <UTValidation
+          dataTestId={dataTestId ? `${dataTestId}.validation` : undefined}
+          validationData={validationData}
+        />
+      )}
     </View>
   );
 };
@@ -110,6 +126,7 @@ export const propTypes = {
   alwaysShowPlaceholder: bool,
   autoCapitalize: string,
   blurOnSubmit: bool,
+  dataTestId: string,
   disabled: bool,
   error: string,
   helpText: string,

package/lib/components/UTTooltip/README.md

@@ -0,0 +1,99 @@
+# UTTooltip
+
+## 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.
+
+`UTTooltip` is a tooltip component that displays contextual information when triggered. It provides a flexible way to show additional details or help text for UI elements.
+
+## Props
+
+| Name       | Type   | Default | Description                                                          |
+| ---------- | ------ | ------- | -------------------------------------------------------------------- |
+| children   | node   |         | The trigger element that will show the tooltip when interacted with. |
+| dataTestId | string |         | Test ID for automated testing.                                       |
+| tooltip    | string |         | The text content to display in the tooltip.                          |
+| style      | object |         | Custom styles to apply to the tooltip container.                     |
+
+## Test IDs
+
+When `dataTestId` is provided, the component applies the test ID to its element:
+
+| Element | Test ID         | Condition                         |
+| ------- | --------------- | --------------------------------- |
+| Tooltip | `${dataTestId}` | Always when `dataTestId` provided |
+
+### Test ID Details
+
+- **Tooltip**: The main tooltip container element
+
+The UTTooltip component applies the test ID directly to its root tooltip element, making it easy to identify and interact with in automated tests.
+
+## Usage
+
+### Basic Example
+
+```jsx
+import React from 'react';
+import { Text, View } from 'react-native';
+import UTTooltip from '@widergy/mobile-ui';
+
+const BasicExample = () => {
+  return (
+    <UTTooltip tooltip="This is helpful information">
+      <View style={{ padding: 10, backgroundColor: '#f0f0f0' }}>
+        <Text>Hover or press for tooltip</Text>
+      </View>
+    </UTTooltip>
+  );
+};
+
+export default BasicExample;
+```
+
+### Example with Test IDs
+
+```jsx
+import React from 'react';
+import { Text, View } from 'react-native';
+import UTTooltip from '@widergy/mobile-ui';
+
+const TestableExample = () => {
+  return (
+    <UTTooltip dataTestId="helpTooltip" tooltip="Click here to get help with this feature">
+      <View style={{ padding: 10, backgroundColor: '#e3f2fd' }}>
+        <Text>Help</Text>
+      </View>
+    </UTTooltip>
+  );
+};
+
+// Generated test IDs:
+// helpTooltip (tooltip container)
+
+export default TestableExample;
+```
+
+### Custom Styled Example
+
+```jsx
+import React from 'react';
+import { Text, View } from 'react-native';
+import UTTooltip from '@widergy/mobile-ui';
+
+const StyledExample = () => {
+  return (
+    <UTTooltip
+      tooltip="Custom styled tooltip with longer text content"
+      style={{ backgroundColor: '#333', borderRadius: 8 }}
+    >
+      <View style={{ padding: 12, backgroundColor: '#4caf50' }}>
+        <Text style={{ color: 'white' }}>Custom Trigger</Text>
+      </View>
+    </UTTooltip>
+  );
+};
+
+export default StyledExample;
+```

package/lib/components/UTTooltip/index.js

@@ -10,6 +10,7 @@ const UTTooltip = ({
   content,
   onClose,
   children,
+  dataTestId,
   onOpen,
   offset = 5,
   disabled,
@@ -107,6 +108,7 @@ const UTTooltip = ({
           <View style={styles.overlay} />
         </TouchableOpacity>
         <View
+          testID={dataTestId}
           style={[styles.tooltip, tooltipPosition, propStyles?.tooltip]}
           ref={contentRef}
           onLayout={handleTooltipLayout}

package/lib/components/UTTooltip/proptypes.js

@@ -1,9 +1,10 @@
-import { bool, func, number, node, oneOf } from 'prop-types';
+import { bool, func, number, node, oneOf, string } from 'prop-types';
 
 import { BOTTOM, LEFT, RIGHT, TOP } from './constants';
 
 export default {
   content: node,
+  dataTestId: string,
   onClose: func,
   onOpen: func,
   fullWidth: bool,

package/lib/components/UTValidation/index.js

@@ -6,13 +6,16 @@ import { View } from 'react-native';
 import { useTheme } from '../../theming';
 import UTIcon from '../UTIcon';
 import UTLabel from '../UTLabel';
+import { TEST_ID_CONSTANTS } from '../../constants/testIds';
 
 import { ICON_MAPPER, ICON_SIZE, STATUS_COLOR_MAPPER, STATUSES_WITH_ICON, STATUSES } from './constants';
 import { retrieveStyle } from './theme';
 import styles from './styles';
 import { generateItemKey, generateKey } from './utils';
 
-const UTValidation = ({ style, validationData = [] }) => {
+const { title: titleTestId, icon, text: textTestId } = TEST_ID_CONSTANTS;
+
+const UTValidation = ({ dataTestId, style, validationData = [] }) => {
   const theme = useTheme();
 
   if (isEmpty(validationData)) return null;
@@ -26,7 +29,11 @@ const UTValidation = ({ style, validationData = [] }) => {
       {validationData.map(({ items, status = STATUSES.default, title }, index) => (
         <View key={generateKey({ items, status, title }, index)} style={styles.validationContainer}>
           {title && (
-            <UTLabel colorTheme={STATUS_COLOR_MAPPER[status]} variant="small">
+            <UTLabel
+              dataTestId={dataTestId ? `${dataTestId}.group_${index}.${titleTestId}` : undefined}
+              colorTheme={STATUS_COLOR_MAPPER[status]}
+              variant="small"
+            >
               {title}
             </UTLabel>
           )}
@@ -39,11 +46,25 @@ const UTValidation = ({ style, validationData = [] }) => {
                 {withIcon && (
                   <View style={[styles.iconContainer, themeStyles.icon[itemStatus]]}>
                     {showIcon(itemStatus) && (
-                      <UTIcon colorTheme={itemStatus} name={ICON_MAPPER[itemStatus]} size={ICON_SIZE} />
+                      <UTIcon
+                        dataTestId={
+                          dataTestId ? `${dataTestId}.group_${index}.item_${itemIndex}.${icon}` : undefined
+                        }
+                        colorTheme={itemStatus}
+                        name={ICON_MAPPER[itemStatus]}
+                        size={ICON_SIZE}
+                      />
                     )}
                   </View>
                 )}
-                <UTLabel colorTheme={STATUS_COLOR_MAPPER[itemStatus]} variant="small" style={styles.itemText}>
+                <UTLabel
+                  dataTestId={
+                    dataTestId ? `${dataTestId}.group_${index}.item_${itemIndex}.${textTestId}` : undefined
+                  }
+                  colorTheme={STATUS_COLOR_MAPPER[itemStatus]}
+                  variant="small"
+                  style={styles.itemText}
+                >
                   {text}
                 </UTLabel>
               </View>
@@ -70,6 +91,7 @@ export const validationDataProptypes = arrayOf(
 );
 
 UTValidation.propTypes = {
+  dataTestId: string,
   style: object,
   validationData: validationDataProptypes
 };

package/lib/constants/testIds.js

@@ -0,0 +1,44 @@
+export const TEST_IDS = {
+  modal: 'modal',
+  roundView: 'roundView'
+};
+
+export const TEST_ID_CONSTANTS = {
+  acceptButton: 'acceptButton',
+  additionalInfo: 'additionalInfo',
+  anchor: 'anchor',
+  areaCode: 'areaCode',
+  attribution: 'attribution',
+  badge: 'badge',
+  cancelButton: 'cancelButton',
+  characterCount: 'characterCount',
+  checkIcon: 'checkIcon',
+  close: 'close',
+  closeButton: 'closeButton',
+  content: 'content',
+  description: 'description',
+  error: 'error',
+  helpText: 'helpText',
+  icon: 'icon',
+  label: 'label',
+  left: 'left',
+  list: 'list',
+  logo: 'logo',
+  modal: 'modal',
+  option: 'option',
+  phoneNumber: 'phoneNumber',
+  primaryAction: 'primaryAction',
+  required: 'required',
+  right: 'right',
+  searchInput: 'searchInput',
+  secondaryAction: 'secondaryAction',
+  selectAll: 'selectAll',
+  subLabel: 'subLabel',
+  subtitle: 'subtitle',
+  tertiaryAction: 'tertiaryAction',
+  text: 'text',
+  title: 'title',
+  titleText: 'titleText',
+  tooltip: 'tooltip',
+  validation: 'validation'
+};

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "1.47.0",
+  "version": "1.48.0",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [