@widergy/mobile-ui 1.41.0 → 1.42.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [1.42.0](https://github.com/widergy/mobile-ui/compare/v1.41.0...v1.42.0) (2025-04-30)
+
+
+### Features
+
+* [UGC-1420] UTStatus and support in UTProductItem ([#429](https://github.com/widergy/mobile-ui/issues/429)) ([3e2b309](https://github.com/widergy/mobile-ui/commit/3e2b309479ff062f4949b0cbedcb781eab8aa5fc))
+
 # [1.41.0](https://github.com/widergy/mobile-ui/compare/v1.40.4...v1.41.0) (2025-04-29)
 
 

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+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;
+
+  return (
+    <UTStatus
+      Icon={Icon}
+      labelProps={labelProps}
+      style={{ container: [shouldUseGap ? themedStyles.gap : '', themedStyles.status] }}
+      type={type}
+      variant={variant}
+      withoutIcon={withoutIcon}
+    >
+      {label}
+    </UTStatus>
+  );
+};
+
+Status.propTypes = {
+  shouldUseGap: bool,
+  statusProps: shape({
+    label: string,
+    labelProps: object
+  }),
+  themedStyles: ViewPropTypes.style
+};
+
+export default Status;

package/lib/components/UTProductItem/index.js

@@ -29,6 +29,7 @@ const UTProductItem = ({
   secondaryAction,
   selectedQuantity,
   style,
+  statusProps = {},
   title
 }) => {
   const theme = useTheme();
@@ -47,7 +48,8 @@ const UTProductItem = ({
             discount,
             previousAmount,
             themedStyles,
-            title
+            title,
+            statusProps
           }).map(({ Component, props }, index, array) => (
             <Component key={Math.random} {...props} shouldUseGap={index !== array.length - 1} />
           ))}
@@ -90,7 +92,8 @@ UTProductItem.propTypes = {
   quantityLabelProps: object,
   secondaryAction: ActionPropTypes,
   selectedQuantity: number,
-  title: string
+  title: string,
+  statusProps: object
 };
 
 export default UTProductItem;

package/lib/components/UTProductItem/styles.js

@@ -83,5 +83,8 @@ export const getUTProductItemStyles = (theme = {}) =>
     },
     spaceBetween: {
       justifyContent: 'space-between'
+    },
+    status: {
+      alignSelf: 'flex-start'
     }
   });

package/lib/components/UTProductItem/utils.js

@@ -1,7 +1,10 @@
+import isEmpty from 'lodash/isEmpty';
+
 import Title from './components/Title';
 import AdditionalInfo from './components/AdditionalInfo';
 import Discount from './components/Discount';
 import Amount from './components/Amount';
+import Status from './components/Status';
 
 export const leftSectionComponents = ({
   additionalInfo,
@@ -9,7 +12,8 @@ export const leftSectionComponents = ({
   discount,
   previousAmount,
   themedStyles,
-  title
+  title,
+  statusProps
 }) =>
   [
     { Component: Title, key: 'title', props: { themedStyles, title }, show: !!title },
@@ -19,6 +23,12 @@ export const leftSectionComponents = ({
       props: { additionalInfo, themedStyles },
       show: additionalInfo
     },
+    {
+      Component: Status,
+      key: 'status',
+      props: { themedStyles, statusProps },
+      show: !isEmpty(statusProps)
+    },
     {
       Component: Discount,
       key: 'discount',

package/lib/components/UTStatus/README.md

@@ -0,0 +1,24 @@
+# UTStatus
+
+## Description
+
+`UTStatus` is a simple status indicator that combines an icon and a label. It's fully theme-aware and supports multiple variants and types. It is designed to be flexible and themeable to fit different UI requirements.
+
+## Props
+
+| Name        | Type   | Default   | Description                                                                                                                         |
+| ----------- | ------ | --------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+| 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.                                                                              |
+| 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 }}>
+  Error con Markdown
+</UTStatus>
+```

package/lib/components/UTStatus/constants.js

@@ -0,0 +1,14 @@
+export const VARIANTS = {
+  accent: 'accent',
+  error: 'error',
+  gray: 'gray',
+  information: 'information',
+  success: 'success',
+  warning: 'warning'
+};
+
+export const TYPES = {
+  accent: 'accent',
+  dark: 'dark',
+  negative: 'negative'
+};

package/lib/components/UTStatus/index.js

@@ -0,0 +1,48 @@
+import { View } from 'react-native';
+import React from 'react';
+import { bool, object, string } from 'prop-types';
+
+import UTLabel from '../UTLabel';
+import UTIcon from '../UTIcon';
+import { mergeMultipleStyles } from '../../utils/styleUtils';
+import { useTheme } from '../../theming';
+
+import { defaultIconMapper, ownStyles, getVariantStyles } from './theme';
+import { TYPES, VARIANTS } from './constants';
+
+const UTStatus = ({
+  children,
+  Icon,
+  labelProps = {},
+  style,
+  type = TYPES.dark,
+  variant = VARIANTS.success,
+  withoutIcon
+}) => {
+  const theme = useTheme();
+  const themedStyles = mergeMultipleStyles(
+    ownStyles,
+    getVariantStyles(theme)({ variant, type }),
+    theme?.UTStatus,
+    style
+  );
+  const StatusIcon = Icon ?? defaultIconMapper(variant);
+  return (
+    <View style={themedStyles.container}>
+      {withoutIcon ? null : <UTIcon colorTheme={type} name={StatusIcon} />}
+      <UTLabel colorTheme={type} {...labelProps}>
+        {children}
+      </UTLabel>
+    </View>
+  );
+};
+
+UTStatus.propTypes = {
+  Icon: string,
+  labelProps: object,
+  type: string,
+  variant: string,
+  withoutIcon: bool
+};
+
+export default UTStatus;

package/lib/components/UTStatus/theme.js

@@ -0,0 +1,30 @@
+import { TYPES, VARIANTS } from './constants';
+
+export const defaultIconMapper = variant =>
+  ({
+    [VARIANTS.accent]: 'IconInfoCircle',
+    [VARIANTS.error]: 'IconX',
+    [VARIANTS.information]: 'IconInfoCircle',
+    [VARIANTS.success]: 'IconCheck',
+    [VARIANTS.gray]: 'IconArchive',
+    [VARIANTS.warning]: 'IconAlertTriangle'
+  })[variant];
+
+export const ownStyles = {
+  container: {
+    flexDirection: 'row',
+    gap: 8,
+    borderRadius: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    alignItems: 'center'
+  }
+};
+
+export const getVariantStyles =
+  theme =>
+  ({ variant, type }) => ({
+    container: {
+      backgroundColor: theme.Palette[variant]?.[type === TYPES.negative ? '04' : '01']
+    }
+  });

package/lib/index.js

@@ -64,6 +64,7 @@ export { default as UTRoundView } from './components/UTRoundView';
 export { default as UTSearchField } from './components/UTSearchField';
 export { default as UTSelect } from './components/UTSelect';
 export { default as UTSelectableCard } from './components/UTSelectableCard';
+export { default as UTStatus } from './components/UTStatus';
 export { default as UTStatusMessage } from './components/UTStatusMessage';
 export { default as UTStepFeedback } from './components/UTStepFeedback';
 export { default as UTSwitch } from './components/UTSwitch';

package/package.json

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