@widergy/mobile-ui 1.48.1 → 1.49.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [1.49.0](https://github.com/widergy/mobile-ui/compare/v1.48.2...v1.49.0) (2025-06-11)
+
+
+### Features
+
+* [UGEE-272] OnBoarding mobile ([#438](https://github.com/widergy/mobile-ui/issues/438)) ([5f0d6de](https://github.com/widergy/mobile-ui/commit/5f0d6defd4afbbffa81575802f21da68017b449d))
+
+## [1.48.2](https://github.com/widergy/mobile-ui/compare/v1.48.1...v1.48.2) (2025-06-10)
+
+
+### Bug Fixes
+
+* [UGC-1544] utstatus fixes ([#440](https://github.com/widergy/mobile-ui/issues/440)) ([3eae576](https://github.com/widergy/mobile-ui/commit/3eae5762502ac9c57935ac290510fa0d2cd3534b))
+
 ## [1.48.1](https://github.com/widergy/mobile-ui/compare/v1.48.0...v1.48.1) (2025-06-09)
 
 

package/lib/components/UTProductItem/components/Status/index.js

@@ -5,16 +5,12 @@ import { bool, object, shape, string } from 'prop-types';
 import UTStatus from '../../../UTStatus';
 
 const Status = ({ shouldUseGap, statusProps, themedStyles }) => {
-  const { Icon, label, labelProps, type, variant, withoutIcon } = statusProps;
+  const { label } = statusProps;
 
   return (
     <UTStatus
-      Icon={Icon}
-      labelProps={labelProps}
       style={{ container: [shouldUseGap ? themedStyles.gap : '', themedStyles.status] }}
-      type={type}
-      variant={variant}
-      withoutIcon={withoutIcon}
+      {...statusProps}
     >
       {label}
     </UTStatus>

package/lib/components/UTStatus/README.md

@@ -11,14 +11,14 @@
 | Icon        | string | -         | Allows display for a custom icon. If omitted, a default Icon for the variant will be used.                                          |
 | labelProps  | object | {}        | Props to pass down to the internal UTLabel component.                                                                               |
 | style       | object | -         | Custom styles to apply to the component.                                                                                            |
-| type        | string | 'dark'    | Color theme to apply for both the icon and label text.                                                                              |
+| shade       | string | '01'      | Shade to apply to the palette variant specified                                                                                     |
 | variant     | string | 'success' | The variant will defined the default icon that the component will render, as well as the background color for the status container. |
 | withoutIcon | bool   | false     | if `true`, no icon will be rendered.                                                                                                |
 
 ## Example
 
 ```jsx
-<UTStatus variant="error" type="negative" labelProps={{ withMarkdown: true }}>
+<UTStatus variant="error" shade="03" labelProps={{ withMarkdown: true }}>
   Error con Markdown
 </UTStatus>
 ```

package/lib/components/UTStatus/constants.js

@@ -6,9 +6,3 @@ export const VARIANTS = {
   success: 'success',
   warning: 'warning'
 };
-
-export const TYPES = {
-  accent: 'accent',
-  dark: 'dark',
-  negative: 'negative'
-};

package/lib/components/UTStatus/index.js

@@ -8,29 +8,29 @@ import { mergeMultipleStyles } from '../../utils/styleUtils';
 import { useTheme } from '../../theming';
 
 import { defaultIconMapper, ownStyles, getVariantStyles } from './theme';
-import { TYPES, VARIANTS } from './constants';
+import { VARIANTS } from './constants';
 
 const UTStatus = ({
   children,
   Icon,
   labelProps = {},
+  shade = '01',
   style,
-  type = TYPES.dark,
   variant = VARIANTS.success,
   withoutIcon
 }) => {
   const theme = useTheme();
   const themedStyles = mergeMultipleStyles(
     ownStyles,
-    getVariantStyles(theme)({ variant, type }),
+    getVariantStyles(theme)({ variant, shade }),
     theme?.UTStatus,
     style
   );
   const StatusIcon = Icon ?? defaultIconMapper(variant);
   return (
     <View style={themedStyles.container}>
-      {withoutIcon ? null : <UTIcon colorTheme={type} name={StatusIcon} />}
-      <UTLabel colorTheme={type} {...labelProps}>
+      {withoutIcon ? null : <UTIcon colorTheme={variant} name={StatusIcon} />}
+      <UTLabel colorTheme={variant} {...labelProps}>
         {children}
       </UTLabel>
     </View>
@@ -40,7 +40,7 @@ const UTStatus = ({
 UTStatus.propTypes = {
   Icon: string,
   labelProps: object,
-  type: string,
+  shade: string,
   variant: string,
   withoutIcon: bool
 };

package/lib/components/UTStatus/theme.js

@@ -1,4 +1,4 @@
-import { TYPES, VARIANTS } from './constants';
+import { VARIANTS } from './constants';
 
 export const defaultIconMapper = variant =>
   ({
@@ -23,8 +23,8 @@ export const ownStyles = {
 
 export const getVariantStyles =
   theme =>
-  ({ variant, type }) => ({
+  ({ variant, shade }) => ({
     container: {
-      backgroundColor: theme.Palette[variant]?.[type === TYPES.negative ? '04' : '01']
+      backgroundColor: theme.Palette[variant]?.[shade]
     }
   });

package/lib/components/UTTooltip/index.js

@@ -11,6 +11,7 @@ const UTTooltip = ({
   onClose,
   children,
   dataTestId,
+  forceVisible = false,
   onOpen,
   offset = 5,
   disabled,
@@ -103,7 +104,7 @@ const UTTooltip = ({
       <View ref={anchorRef} onLayout={handleAnchorLayout}>
         {children}
       </View>
-      <Modal animationType="fade" transparent visible={isOpen}>
+      <Modal animationType="fade" transparent visible={forceVisible || isOpen}>
         <TouchableOpacity onPress={closeTooltip} style={styles.overlayTouchable}>
           <View style={styles.overlay} />
         </TouchableOpacity>

package/lib/components/UTWizard/index.js

@@ -1,6 +1,6 @@
 import React, { useState, useReducer, useEffect } from 'react';
 import { View } from 'react-native';
-import PropTypes, { string, number, objectOf, arrayOf, shape } from 'prop-types';
+import PropTypes, { string, number, objectOf, arrayOf, shape, func } from 'prop-types';
 
 import UTLabel from '../UTLabel';
 import UTButton from '../UTButton';
@@ -12,6 +12,7 @@ import { ACTIONS, COLOR_THEMES } from './constants';
 import stylesheet from './styles';
 
 const UTWizard = ({
+  onCloseCallback,
   images,
   steps,
   variant,
@@ -22,7 +23,10 @@ const UTWizard = ({
   const hasSteps = steps.length > 1;
   const [isOpen, setIsOpen] = useState(true);
   const [isClosed, setIsClosed] = useState(false);
-
+  const handleClose = () => {
+    setIsClosed(true);
+    if (onCloseCallback) onCloseCallback();
+  };
   const [currentSubstep, updateSubstep] = useReducer((state, action) => {
     switch (action) {
       case ACTIONS.RESET:
@@ -60,7 +64,7 @@ const UTWizard = ({
             <UTButton
               colorTheme={getButtonTheme(variant)}
               Icon="IconX"
-              onPress={setIsClosed}
+              onPress={handleClose}
               size="small"
               variant="text"
             />
@@ -120,6 +124,7 @@ const UTWizard = ({
 };
 
 UTWizard.propTypes = {
+  onCloseCallback: func,
   images: objectOf(number),
   steps: arrayOf(
     shape({

package/package.json

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