@widergy/mobile-ui 1.36.8 → 1.38.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [1.38.0](https://github.com/widergy/mobile-ui/compare/v1.37.0...v1.38.0) (2025-03-26)
+
+
+### Features
+
+* [EVENSA-155] data item & data category ([#415](https://github.com/widergy/mobile-ui/issues/415)) ([7c76dee](https://github.com/widergy/mobile-ui/commit/7c76dee1b60c2d730da91064382b0dbcde144543))
+
+# [1.37.0](https://github.com/widergy/mobile-ui/compare/v1.36.8...v1.37.0) (2025-03-19)
+
+
+### Features
+
+* [UGENSA-1544] add meter icons ([#419](https://github.com/widergy/mobile-ui/issues/419)) ([9d3ee4e](https://github.com/widergy/mobile-ui/commit/9d3ee4eafdfbc624af5574faef73fe422e2df26b))
+
 ## [1.36.8](https://github.com/widergy/mobile-ui/compare/v1.36.7...v1.36.8) (2025-03-19)
 
 

package/lib/components/UTActionCard/components/BottomActions/index.js

@@ -18,7 +18,7 @@ const BottomActions = ({ actions = [], bottomActionsVariant }) => {
 
   return (
     <View style={[themedStyles.actionsContainer, themedStyles.redirectionActionsContainer]}>
-      {actions.map(({ colorTheme = 'primary', disabled, Icon, label, loading, onClick }, i) => (
+      {actions.map(({ colorTheme = 'primary', disabled, Icon, label, loading, onPress }, i) => (
         <Fragment key={label}>
           {!isRedirection && i > 0 && <View style={[themedStyles.horizontalSeparator]} />}
           <UTButton
@@ -31,7 +31,7 @@ const BottomActions = ({ actions = [], bottomActionsVariant }) => {
             Icon={isRedirection ? Icon || DEFAULT_REDIRECTION_ICON : Icon}
             iconPlacement={isRedirection ? 'right' : 'left'}
             loading={loading}
-            onClick={onClick}
+            onPress={onPress}
             size="large"
             variant="text"
           >
@@ -54,7 +54,7 @@ BottomActions.propTypes = {
       Icon: oneOfType([elementType, string]),
       label: string,
       loading: bool,
-      onClick: func
+      onPress: func
     })
   ),
   bottomActionsVariant: string

package/lib/components/UTDataCategory/README.md

@@ -0,0 +1,22 @@
+# UTDataCategory
+
+Tabs component.
+
+## Props
+
+
+| Name        | Type      | Default | Description                                              |
+|------------|----------|---------|----------------------------------------------------------|
+| area       | bool     | `false`  | Specifies whether the component has an area.      |
+| collapsable      | bool  | `true`        | Specifies if the data list is collapsable                           |
+|  elements | array |  | Array of items to be rendered as UTDataElement |
+| style      | object   |         | Custom style for the component container.                         |
+| title      | string   |         | Title text displayed in the component.                   |
+| titleProps | object   |         | Additional props for customizing the title.              |
+
+
+
+### colapsable
+
+The component is only collapsable if it has a title
+

package/lib/components/UTDataCategory/index.js

@@ -0,0 +1,67 @@
+/* eslint-disable no-underscore-dangle */
+import { Animated, View } from 'react-native';
+import { array, bool, object, string } from 'prop-types';
+import React, { useCallback, useRef, useState } from 'react';
+
+import { withTheme } from '../../theming';
+import UTDataElement from '../UTDataElement';
+import UTLabel from '../UTLabel';
+import UTButton from '../UTButton';
+
+import styleSheet from './styles';
+
+const UTDataCategory = ({ area, collapsable = true, elements, style, theme, title, titleProps }) => {
+  const styles = styleSheet(theme);
+
+  const collapsed = useRef(new Animated.Value(1)).current;
+  const [childrenHeight, setChildrenHeight] = useState(0);
+
+  const onLayout = useCallback(event => {
+    const { height } = event.nativeEvent.layout;
+    setChildrenHeight(height + (title ? 16 : 0));
+  }, []);
+
+  const toggleCollapsed = () => {
+    Animated.timing(collapsed, {
+      toValue: collapsed.__getValue() === 1 ? 0 : 1,
+      duration: 300,
+      useNativeDriver: false
+    }).start();
+  };
+
+  return (
+    <View style={[styles.container(area), style]}>
+      {title && (
+        <View style={[styles.title]}>
+          <UTLabel colorTheme="gray" weight="medium" {...titleProps}>
+            {title}
+          </UTLabel>
+          {collapsable && (
+            <Animated.View style={styles.collapseButton(collapsed)}>
+              <UTButton Icon="IconChevronDown" variant="text" onPress={toggleCollapsed} />
+            </Animated.View>
+          )}
+        </View>
+      )}
+      <Animated.View style={[styles.childrenAnimation(collapsed, childrenHeight)]}>
+        <View style={styles.childrenContainer} onLayout={onLayout}>
+          {elements.map(element => (
+            <UTDataElement {...element} key={element.key} />
+          ))}
+        </View>
+      </Animated.View>
+    </View>
+  );
+};
+
+UTDataCategory.propTypes = {
+  area: bool,
+  collapsable: bool,
+  elements: array,
+  style: object,
+  theme: object,
+  title: string,
+  titleProps: object
+};
+
+export default withTheme(UTDataCategory);

package/lib/components/UTDataCategory/styles.js

@@ -0,0 +1,54 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create(({ Palette: { light } }) => ({
+  childrenAnimation: (collapsed, childrenHeight) => ({
+    position: 'relative',
+    overflow: 'hidden',
+    height: collapsed.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, childrenHeight]
+    }),
+    width: 'auto'
+  }),
+  childrenContainer: {
+    bottom: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    position: 'absolute',
+    width: '100%'
+  },
+  collapseButton: collapsed => ({
+    borderRadius: collapsed.interpolate({
+      inputRange: [0, 0.5, 1],
+      outputRange: [0, 100, 0]
+    }),
+    overflow: 'hidden',
+    transform: [
+      {
+        rotate: collapsed.interpolate({
+          inputRange: [0, 1],
+          outputRange: ['0deg', '180deg']
+        })
+      }
+    ]
+  }),
+  container: area => ({
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    ...(area
+      ? {
+          backgroundColor: light['03'],
+          padding: 16,
+          borderRadius: 8
+        }
+      : {})
+  }),
+  title: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    gap: 8,
+    width: '100%'
+  }
+}));

package/lib/components/UTDataElement/README.md

@@ -0,0 +1,46 @@
+# UTDataElement
+
+Is a versatile data component that can be customized with various themes, sizes, icons, data elements and actions.
+
+## Props
+
+
+| Name        | Type      | Default | Description                                              |
+|------------|----------|---------|----------------------------------------------------------|
+| action     | object   |         | Props passed to the UTButton    action .        |
+| area       | bool     | `false`  | Specifies whether the component has an area.      |
+| badge      | string   |         | Displays a badge with text.                              |
+| badgeProps | object   |         | Additional props for customizing the badge.              |
+| Data       | element  |         | React element representing a data component (overrides data).             |
+| data       | string   |         | Data string associated with the component.                |
+| dataProps  | object   |         | Additional props for configuring data element.         |
+| Icon       | element  |         | Custom React element (overrides icon).                    |
+| icon       | string   |         | Name of the icon used in the component.                  |
+| iconProps  | object   |         | Additional props for the icon element.                 |
+| orientation | string  | `horizontal` | Defines the layout orientation. |
+| padding    | string   | `medium`        | Padding applied to the component.                        |
+| prefix     | string   |         | Text or symbol displayed before the title.        |
+| prefixProps| object   |         | Additional props for customizing `prefix`.               |
+| spacing    | string   |   `medium`      | Defines the spacing between elements.                    |
+| style      | object   |         | Custom style for the component container.                         |
+| title      | string   |         | Title text displayed in the component.                   |
+| titleProps | object   |         | Additional props for customizing the title.              |
+
+
+### colapsable
+
+If the component has any `children` it will always be collapsable
+
+### orientation
+
+The value of `orientation` must be one of the following:
+
+- `horizontal`
+- `vertical`
+
+### padding & spacing
+
+The value of `padding` and `spacing` must be one of the following:
+
+- `small`
+- `medium`

package/lib/components/UTDataElement/constants.js

@@ -0,0 +1,14 @@
+export const ORIENTATION = {
+  HORIZONTAL: 'horizontal',
+  VERTICAL: 'vertical'
+};
+
+export const PADDING = {
+  SMALL: 'small',
+  MEDIUM: 'medium'
+};
+
+export const SPACING = {
+  SMALL: 'small',
+  MEDIUM: 'medium'
+};

package/lib/components/UTDataElement/index.js

@@ -0,0 +1,133 @@
+/* eslint-disable no-underscore-dangle */
+import { Animated, View } from 'react-native';
+import { bool, element, object, string } from 'prop-types';
+import React, { useCallback, useRef, useState } from 'react';
+
+import { withTheme } from '../../theming';
+import UTBadge from '../UTBadge';
+import UTIcon from '../UTIcon';
+import UTLabel from '../UTLabel';
+import UTButton from '../UTButton';
+
+import styleSheet from './styles';
+import { ORIENTATION, PADDING, SPACING } from './constants';
+
+const UTDataElement = ({
+  action,
+  area,
+  badge,
+  badgeProps,
+  children,
+  data,
+  Data,
+  dataProps,
+  icon,
+  Icon,
+  iconProps = {},
+  orientation = ORIENTATION.HORIZONTAL,
+  padding = PADDING.MEDIUM,
+  prefix,
+  prefixProps,
+  spacing = SPACING.MEDIUM,
+  style,
+  theme,
+  title,
+  titleProps
+}) => {
+  const styles = styleSheet(theme);
+
+  const collapsed = useRef(new Animated.Value(1)).current;
+  const [childrenHeight, setChildrenHeight] = useState(0);
+
+  const onLayout = useCallback(
+    event => {
+      const { height } = event.nativeEvent.layout;
+      setChildrenHeight(
+        height +
+          {
+            [PADDING.SMALL]: 8,
+            [PADDING.MEDIUM]: 16
+          }[padding]
+      );
+    },
+    [padding]
+  );
+
+  const toggleCollapsed = () => {
+    Animated.timing(collapsed, {
+      toValue: collapsed.__getValue() === 1 ? 0 : 1,
+      duration: 300,
+      useNativeDriver: false
+    }).start();
+  };
+
+  const IconComponent = Icon || (icon ? UTIcon : null);
+  const DataComponent = Data || (data ? UTLabel : null);
+
+  return (
+    <View style={[styles.container(area, padding), style]}>
+      <View style={styles.content(spacing)}>
+        {IconComponent && <IconComponent name={icon} size={24} colorTheme="gray" {...iconProps} />}
+        <View style={styles.info(orientation)}>
+          {(prefix || title || badge) && (
+            <View style={styles.topInfo}>
+              {prefix && (
+                <UTLabel colorTheme="gray" {...prefixProps}>
+                  {prefix}
+                </UTLabel>
+              )}
+              {title && (
+                <UTLabel colorTheme="gray" {...titleProps}>
+                  {title}
+                </UTLabel>
+              )}
+              {badge && (
+                <UTBadge colorTheme="accent" {...badgeProps}>
+                  {badge}
+                </UTBadge>
+              )}
+            </View>
+          )}
+          {DataComponent && <DataComponent {...dataProps}>{data}</DataComponent>}
+        </View>
+        {action && <UTButton variant="text" {...action} />}
+        {children && (
+          <Animated.View style={styles.collapseButton(collapsed)}>
+            <UTButton Icon="IconChevronDown" variant="text" onPress={toggleCollapsed} />
+          </Animated.View>
+        )}
+      </View>
+      {children && (
+        <Animated.View style={styles.childrenAnimation(collapsed, childrenHeight)}>
+          <View style={styles.childrenContainer} onLayout={onLayout}>
+            {children}
+          </View>
+        </Animated.View>
+      )}
+    </View>
+  );
+};
+
+UTDataElement.propTypes = {
+  action: object,
+  area: bool,
+  badge: string,
+  badgeProps: object,
+  data: string,
+  Data: element,
+  dataProps: object,
+  icon: string,
+  Icon: element,
+  iconProps: object,
+  orientation: string,
+  padding: string,
+  prefix: string,
+  prefixProps: object,
+  spacing: string,
+  style: object,
+  theme: object,
+  title: string,
+  titleProps: object
+};
+
+export default withTheme(UTDataElement);

package/lib/components/UTDataElement/styles.js

@@ -0,0 +1,71 @@
+import { StyleSheet } from 'react-native';
+
+import { ORIENTATION, PADDING, SPACING } from './constants';
+
+export default StyleSheet.create(({ Palette: { light } }) => ({
+  childrenAnimation: (collapsed, childrenHeight) => ({
+    height: collapsed.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, childrenHeight]
+    }),
+    overflow: 'hidden',
+    position: 'relative'
+  }),
+  childrenContainer: { position: 'absolute', bottom: 0 },
+  collapseButton: collapsed => ({
+    borderRadius: collapsed.interpolate({
+      inputRange: [0, 0.5, 1],
+      outputRange: [0, 100, 0]
+    }),
+    overflow: 'hidden',
+    transform: [
+      {
+        rotate: collapsed.interpolate({
+          inputRange: [0, 1],
+          outputRange: ['0deg', '180deg']
+        })
+      }
+    ]
+  }),
+  container: (area, padding) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    paddingVertical: {
+      [PADDING.SMALL]: 8,
+      [PADDING.MEDIUM]: 16
+    }[padding],
+    ...(area
+      ? {
+          backgroundColor: light['03'],
+          paddingLeft: 16,
+          paddingRight: 24,
+          borderRadius: 8
+        }
+      : {})
+  }),
+  content: spacing => ({
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    gap: {
+      [SPACING.SMALL]: 8,
+      [SPACING.MEDIUM]: 16
+    }[spacing],
+    width: '100%'
+  }),
+  info: orientation => ({
+    flexDirection: {
+      [ORIENTATION.HORIZONTAL]: 'row',
+      [ORIENTATION.VERTICAL]: 'column'
+    }[orientation],
+    gap: 8,
+    justifyContent: 'space-between',
+    flex: 1
+  }),
+  topInfo: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    gap: 8
+  }
+}));

package/lib/components/UTIcon/components/EnergyIcons/EnergyIconMeterPlus.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 20.5C12.5 20.8494 12.2936 21 12 20.9998H5.99975C4.3429 20.9998 2.99976 19.6566 2.99976 17.9998V5.99975C2.99976 4.3429 4.3429 2.99976 5.99975 2.99976H17.9998C19.6566 2.99976 20.9998 4.3429 20.9998 5.99975V11.9865C20.9998 11.9865 20.9998 12.5 20.5 12.5C20.047 12.5 20 12 19.9998 11.9865V5.99975C19.9998 5 19 3.99976 17.9998 3.99976H5.99975C5 3.99976 3.99976 5 3.99976 5.99975V17.9998C3.99976 19 5 19.9998 5.99975 19.9998H12C12.2936 20 12.5 20.1506 12.5 20.5Z" fill="#569A29"/>
+<path d="M17 13.4998C17.4832 13.4998 17.5 13.8915 17.5 14.3748V16.5H19.7224C20.2057 16.5 20.5974 16.5165 20.5974 16.9998C20.5974 17.483 20.2057 17.5 19.7224 17.5H17.5V19.6248C17.5 20.108 17.4832 20.4998 17 20.4998C16.5168 20.4998 16.5 20.108 16.5 19.6248V17.5H14.4724C13.9892 17.5 13.5974 17.483 13.5974 16.9998C13.5974 16.5165 13.9892 16.5 14.4724 16.5H16.5V14.3748C16.5 13.8915 16.5168 13.4998 17 13.4998Z" fill="#569A29"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 20.5C12.5 20.8494 12.2936 21 12 20.9998H5.99975C4.3429 20.9998 2.99976 19.6566 2.99976 17.9998V5.99975C2.99976 4.3429 4.3429 2.99976 5.99975 2.99976H17.9998C19.6566 2.99976 20.9998 4.3429 20.9998 5.99975V11.9865C20.9998 11.9865 20.9998 12.5 20.5 12.5C20.047 12.5 20 12 19.9998 11.9865V5.99975C19.9998 5 19 3.99976 17.9998 3.99976H5.99975C5 3.99976 3.99976 5 3.99976 5.99975V17.9998C3.99976 19 5 19.9998 5.99975 19.9998H12C12.2936 20 12.5 20.1506 12.5 20.5Z" stroke="#569A29" stroke-width="0.3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17 13.4998C17.4832 13.4998 17.5 13.8915 17.5 14.3748V16.5H19.7224C20.2057 16.5 20.5974 16.5165 20.5974 16.9998C20.5974 17.483 20.2057 17.5 19.7224 17.5H17.5V19.6248C17.5 20.108 17.4832 20.4998 17 20.4998C16.5168 20.4998 16.5 20.108 16.5 19.6248V17.5H14.4724C13.9892 17.5 13.5974 17.483 13.5974 16.9998C13.5974 16.5165 13.9892 16.5 14.4724 16.5H16.5V14.3748C16.5 13.8915 16.5168 13.4998 17 13.4998Z" stroke="#569A29" stroke-width="0.3" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5288 8.08252C12.9141 8.27517 13.0703 8.74369 12.8777 9.129L12.0421 10.8002H12.88C13.1503 10.8002 13.4014 10.9401 13.5435 11.1701C13.6856 11.4001 13.6986 11.6872 13.5777 11.929L12.1777 14.729C11.985 15.1143 11.5165 15.2705 11.1312 15.0778C10.7459 14.8852 10.5897 14.4166 10.7823 14.0313L11.6179 12.3602H10.78C10.5097 12.3602 10.2586 12.2202 10.1165 11.9902C9.97437 11.7603 9.96145 11.4731 10.0823 11.2313L11.4823 8.43134C11.675 8.04604 12.1435 7.88987 12.5288 8.08252Z" fill="#569A29"/>
+</svg>

package/lib/components/UTIcon/constants.js

@@ -35,6 +35,7 @@ import EnergyIconMyLocation from './components/EnergyIcons/EnergyIconMyLocation.
 import EnergyIconSettings from './components/EnergyIcons/EnergyIconSettings.svg';
 import EnergyIconShare from './components/EnergyIcons/EnergyIconShare.svg';
 import EnergyIconTruck from './components/EnergyIcons/EnergyIconTruck.svg';
+import EnergyIconMeterPlus from './components/EnergyIcons/EnergyIconMeterPlus.svg';
 
 export const DEFAULT_PROPS = {
   color: COLOR_THEMES.dark
@@ -73,6 +74,7 @@ export const ENERGY_ICONS = {
   EnergyIconHome,
   EnergyIconHome2,
   EnergyIconHome3,
+  EnergyIconMeterPlus,
   EnergyIconMoreVertical,
   EnergyIconMyLocation,
   EnergyIconSettings,

package/lib/components/UTLabel/constants.js

@@ -1,14 +1,21 @@
 export const VARIANTS_SIZES = {
-  title1: 24,
-  title2: 22,
-  title3: 18,
-  subtitle1: 16,
-  subtitle2: 14,
   body: 16,
+  number1: 30,
+  number2: 24,
+  number3: 22,
+  number4: 18,
+  number5: 16,
+  number6: 14,
+  number7: 13,
   small: 14,
-  xsmall: 11,
+  subtitle1: 16,
+  subtitle2: 14,
+  td: 16,
   th: 16,
-  td: 16
+  title1: 24,
+  title2: 22,
+  title3: 18,
+  xsmall: 11
 };
 
 export const LINE_HEIGHTS = {

package/lib/components/UTStatusMessage/styles.js

@@ -64,5 +64,8 @@ export default StyleSheet.create({
     justifyContent: 'center',
     padding: 12,
     width: '100%'
-  })
+  }),
+  label: {
+    textAlign: 'center'
+  }
 });

package/lib/components/UTWorkflowContainer/versions/V1/components/BottomActions/components/ActionButton/index.js

@@ -8,7 +8,7 @@ import { useTheme } from '../../../../../../../../theming';
 
 import ownStyles from './styles';
 
-const ActionButton = ({ colorTheme, disabled, hidden, label, onPress, style, variant }) => {
+const ActionButton = ({ colorTheme, disabled, hidden, label, onPress, style, variant, icon }) => {
   const theme = useTheme();
   const themedStyles = merge({}, ownStyles, theme?.UTWorkflowContainer?.actionButton, style);
 
@@ -21,6 +21,7 @@ const ActionButton = ({ colorTheme, disabled, hidden, label, onPress, style, var
         size="large"
         style={{ root: themedStyles.buttonContainer, childrenContainer: themedStyles.buttonContent }}
         variant={variant}
+        Icon={icon}
       >
         {label}
       </UTButton>
@@ -32,6 +33,7 @@ ActionButton.propTypes = {
   colorTheme: string,
   disabled: bool,
   hidden: bool,
+  icon: string,
   label: string,
   onPress: func,
   variant: string

package/lib/index.js

@@ -45,6 +45,8 @@ export { default as UTButtonGroup } from './components/UTButtonGroup';
 export { default as UTCBUInput } from './components/UTCBUInput';
 export { default as UTCheckBox } from './components/UTCheckBox';
 export { default as UTCheckList } from './components/UTCheckList';
+export { default as UTDataCategory } from './components/UTDataCategory';
+export { default as UTDataElement } from './components/UTDataElement';
 export { default as UTDetailDrawer } from './components/UTDetailDrawer';
 export { default as UTIcon } from './components/UTIcon';
 export { default as UTImage } from './components/UTImage';

package/package.json

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