@widergy/mobile-ui 1.26.4 → 1.27.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [1.27.0](https://github.com/widergy/mobile-ui/compare/v1.26.5...v1.27.0) (2024-10-07)
+
+
+### Features
+
+* ut action card ([#363](https://github.com/widergy/mobile-ui/issues/363)) ([9d539f0](https://github.com/widergy/mobile-ui/commit/9d539f0584489daf1b0f170ffc696402cf333446))
+
+## [1.26.5](https://github.com/widergy/mobile-ui/compare/v1.26.4...v1.26.5) (2024-10-04)
+
+
+### Bug Fixes
+
+* visual fixes ([#367](https://github.com/widergy/mobile-ui/issues/367)) ([b916b9b](https://github.com/widergy/mobile-ui/commit/b916b9b641c2fbff90b8b5ab2efb8b6b8ae447b6))
+
 ## [1.26.4](https://github.com/widergy/mobile-ui/compare/v1.26.3...v1.26.4) (2024-10-01)
 
 

package/lib/components/RadioGroup/components/RadioButton/index.js

@@ -58,7 +58,7 @@ class RadioButton extends Component {
                     <View style={[styles.label, labelComponent && styles.labelComponent]}>
                       <UTLabel
                         colorTheme={status ? 'accent' : 'dark'}
-                        variant="small"
+                        variant="body"
                         weight={status ? 'bold' : 'regular'}
                       >
                         {label}

package/lib/components/RadioGroup/index.js

@@ -3,7 +3,7 @@ import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 import { View } from 'react-native';
 import PropTypes from 'prop-types';
 
-import Label from '../Label';
+import UTLabel from '../UTLabel';
 
 import RadioButton from './components/RadioButton';
 import { DEFAULT_KEY_FIELD } from './constants';
@@ -40,14 +40,14 @@ class RadioGroup extends Component {
     return (
       <View style={styles.container}>
         {title && (
-          <Label medium primary {...titleProps}>
+          <UTLabel variant="body" {...titleProps}>
             {title}
-          </Label>
+          </UTLabel>
         )}
         {options.map(this.renderOptions)}
-        <Label error small>
+        <UTLabel colorTheme="error" shade="05" variant="body">
           {error}
-        </Label>
+        </UTLabel>
       </View>
     );
   }

package/lib/components/UTActionCard/README.md

@@ -0,0 +1,25 @@
+# UTButton
+
+## Props
+
+
+| Name                   | Type                                                                                                                                                                                                     | Default    | Description                                                            |
+| :----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | ------------------------------------------------------------------------ |
+| `additionalMessage`    | `shape({ Icon: elementType, iconProps: shape({ colorTheme: string, size: string }), labelProps: shape({ colorTheme: string, variant: string }), message: string })`                                      |            | Additional message information, including icons and labels.            |
+| `adornment`            | `shape({ alignment: oneOf(['center', 'end', 'start']), position: string, props: object, type: string })`                                                                                                 |            | Adornment object to customize alignment, position, and type.           |
+| `BackgroundImage`      | `elementType`                                                                                                                                                                                            |            | A React component for the background image.                            |
+| `bottomActions`        | `arrayOf(shape({ colorTheme: string, disabled: bool, Icon: elementType, label: string, loading: bool, onPress: func }))`                                                                                 |            | Defines the list of actions to be displayed at the bottom of the card. |
+| `bottomActionsVariant` | `oneOf(['default', 'redirection'])`                                                                                                                                                                      |            | Sets the style variant for bottom actions.                             |
+| `classNames`           | `objectOf(string)`                                                                                                                                                                                       |            | Css classes                                                            |
+| `description`          | `string`                                                                                                                                                                                                 |            | Description text to be displayed.                                      |
+| `descriptionProps`     | `shape({ colorTheme: string, variant: string })`                                                                                                                                                         |            | Props to customize the description's style.                            |
+| `headerActions`        | `arrayOf(shape({ Icon: oneOfType([elementType, string]), id: oneOfType([number, string]), label: string, loading: bool, onPress: func }))`                                            |            | List of actions available in the header section.                       |
+| `headerActionsProps`   | `shape({ alignment: oneOf(['center', 'end', 'start']), buttonGroupProps: shape({ colorTheme: string, shape: string }), variant: oneOf(['default', 'buttonGroup']) })` |            | Props to configure header actions alignment, button group, etc.        |
+| `mainAction`           | `func`                                                                                                                                                                                                   |            | Main action function for the card.                                     |
+| `size`                 | `oneOf(['medium', 'small'])`                                                                                                                                                                             | `'medium'` | Size of the card, either small or medium.                              |
+| `status`               | `string`                                                                                                                                                                                                 |            | Status text to be displayed.                                           |
+| `statusLabel`          | `string`                                                                                                                                                                                                 |            | Status label for additional status info.                               |
+| `statusAlignment`      | `oneOf(['center', 'end', 'start'])`                                                                                                                                                                      |            | Alignment of the status element.                                       |
+| `title`                | `string`                                                                                                                                                                                      |            | The title of the card.                                       |
+| `titleProps`           | `shape({ variant: string, weight: string })`                                                                                                                                                             |            | Props to configure the title style.                                    |
+| `withBodyPadding`      | `bool`                                                                                                                                                                                                   | `false`    | Adds padding to the card body if`true`.                                |

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

@@ -0,0 +1,28 @@
+import React, { memo } from 'react';
+import { oneOf, shape, string } from 'prop-types';
+import { View } from 'react-native';
+
+import UTIcon from '../../../UTIcon';
+import UTLabel from '../../../UTLabel';
+import { SIZES } from '../../constants';
+
+import styles from './styles';
+
+const AdditionalMessage = ({ icon, iconProps = {}, labelProps = {}, message, size = SIZES.SMALL }) => (
+  <View style={[styles.additionalMessageContainer, styles[size]]}>
+    {icon && <UTIcon area colorTheme="gray" name={icon} size={16} {...iconProps} />}
+    <UTLabel colorTheme="gray" variant="small" withMarkdown {...labelProps}>
+      {message}
+    </UTLabel>
+  </View>
+);
+
+AdditionalMessage.propTypes = {
+  icon: string,
+  iconProps: shape({ colorTheme: string, size: string }),
+  labelProps: shape({ colorTheme: string, variant: string }),
+  message: string,
+  size: oneOf([SIZES.MEDIUM, SIZES.SMALL])
+};
+
+export default memo(AdditionalMessage);

package/lib/components/UTActionCard/components/AdditionalMessage/styles.js

@@ -0,0 +1,19 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  additionalMessageContainer: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: 8
+  },
+  medium: {
+    paddingTop: 0,
+    paddingHorizontal: 24,
+    paddingBottom: 24
+  },
+  small: {
+    paddingTop: 0,
+    paddingHorizontal: 16,
+    paddingBottom: 16
+  }
+});

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

@@ -0,0 +1,62 @@
+import React, { Fragment, memo } from 'react';
+import { arrayOf, bool, elementType, func, oneOfType, shape, string } from 'prop-types';
+import { View } from 'react-native';
+
+import UTButton from '../../../UTButton';
+import { ACTION_TYPES } from '../../constants';
+import { useTheme } from '../../../../theming';
+import { mergeMultipleStyles } from '../../../../utils/styleUtils';
+
+import styles, { getThemeStyles } from './styles';
+
+const BottomActions = ({ actions = [], bottomActionsVariant }) => {
+  const theme = useTheme();
+  const type = actions.length > 2 ? ACTION_TYPES.REDIRECTION : bottomActionsVariant || ACTION_TYPES.DEFAULT;
+  const isRedirection = type === ACTION_TYPES.REDIRECTION;
+  const themedStyles = mergeMultipleStyles(styles, getThemeStyles(theme, isRedirection));
+
+  return (
+    <View style={[themedStyles.actionsContainer, themedStyles.redirectionActionsContainer]}>
+      {actions.map(({ colorTheme = 'primary', disabled, Icon, label, loading, onClick }, i) => (
+        <Fragment key={label}>
+          {!isRedirection && i > 0 && <View style={[themedStyles.horizontalSeparator]} />}
+          <UTButton
+            style={{
+              icon: themedStyles.icon,
+              root: themedStyles.actionButton
+            }}
+            colorTheme={colorTheme}
+            disabled={disabled}
+            Icon={isRedirection ? 'IconChevronRight' : Icon}
+            iconPlacement={isRedirection ? 'right' : 'left'}
+            loading={loading}
+            onClick={onClick}
+            size="large"
+            variant="text"
+          >
+            {label}
+          </UTButton>
+          {isRedirection && actions.length > 1 && i !== actions.length - 1 && (
+            <View style={[themedStyles.verticalSeparator]} />
+          )}
+        </Fragment>
+      ))}
+    </View>
+  );
+};
+
+BottomActions.propTypes = {
+  actions: arrayOf(
+    shape({
+      colorTheme: string,
+      disabled: bool,
+      Icon: oneOfType([elementType, string]),
+      label: string,
+      loading: bool,
+      onClick: func
+    })
+  ),
+  bottomActionsVariant: string
+};
+
+export default memo(BottomActions);

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

@@ -0,0 +1,48 @@
+import { StyleSheet } from 'react-native';
+
+export const getThemeStyles = (theme = {}, isRedirection) => {
+  const lightPalette = theme.Palette.light;
+
+  const commonStyles = {
+    actionsContainer: {
+      borderTopColor: lightPalette['04']
+    }
+  };
+
+  if (isRedirection) {
+    return {
+      ...commonStyles,
+      verticalSeparator: {
+        backgroundColor: lightPalette['04'],
+        height: 1
+      },
+      redirectionActionsContainer: {
+        flexDirection: 'column'
+      }
+    };
+  }
+
+  return {
+    ...commonStyles,
+    actionButton: {
+      alignItems: 'center',
+      flex: 1
+    },
+    horizontalSeparator: {
+      backgroundColor: lightPalette['04'],
+      width: 1
+    }
+  };
+};
+
+const styles = StyleSheet.create({
+  actionsContainer: {
+    borderTopWidth: 1,
+    flexDirection: 'row'
+  },
+  icon: {
+    marginLeft: 'auto'
+  }
+});
+
+export default styles;

package/lib/components/UTActionCard/components/Header/components/Avatar/index.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { string, number } from 'prop-types';
+import { View } from 'react-native';
+
+import { useTheme } from '../../../../../../theming';
+import UTLabel from '../../../../../UTLabel';
+
+import styles from './styles';
+
+const Avatar = ({ avatarColor, avatarSize, text = '', textColor = 'dark', textVariant = 'title1' }) => {
+  const theme = useTheme();
+  const backgroundColor = avatarColor || theme.colors.primary;
+  const avatarText = text?.trim().substring(0, 1) || '';
+
+  return (
+    <View
+      style={[
+        {
+          width: avatarSize,
+          height: avatarSize,
+          borderRadius: avatarSize / 2,
+          backgroundColor
+        },
+        styles.container
+      ]}
+    >
+      {avatarText && (
+        <UTLabel colorTheme={textColor || theme.colors.secondary} numberOfLines={1} variant={textVariant}>
+          {avatarText}
+        </UTLabel>
+      )}
+    </View>
+  );
+};
+
+Avatar.propTypes = {
+  avatarColor: string,
+  avatarSize: number,
+  text: string,
+  textColor: string,
+  textVariant: string
+};
+
+export default Avatar;

package/lib/components/UTActionCard/components/Header/components/Avatar/styles.js

@@ -0,0 +1,9 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    elevation: 1
+  }
+});

package/lib/components/UTActionCard/components/Header/components/Status/index.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { string } from 'prop-types';
+import { View } from 'react-native';
+
+import UTLabel from '../../../../../UTLabel';
+
+import styles from './styles';
+
+const Status = ({
+  alignment = 'start',
+  backgroundColor,
+  colorTheme = 'dark',
+  value,
+  variant = 'small',
+  weight = 'medium'
+}) => (
+  <View style={[styles.container, styles[`alignSelf_${alignment}`], { backgroundColor }]}>
+    <UTLabel colorTheme={colorTheme} variant={variant} weight={weight}>
+      {value}
+    </UTLabel>
+  </View>
+);
+
+Status.propTypes = {
+  alignment: string,
+  backgroundColor: string,
+  colorTheme: string,
+  value: string,
+  variant: string,
+  weight: string
+};
+
+export default Status;

package/lib/components/UTActionCard/components/Header/components/Status/styles.js

@@ -0,0 +1,18 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    borderRadius: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 4
+  },
+  alignSelf_center: {
+    alignSelf: 'center'
+  },
+  alignSelf_start: {
+    alignSelf: 'flex-start'
+  },
+  alignSelf_end: {
+    alignSelf: 'flex-end'
+  }
+});

package/lib/components/UTActionCard/components/Header/constants.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Image } from 'react-native';
+
+import UTIcon from '../../../UTIcon';
+
+import Avatar from './components/Avatar';
+
+export const ADORNMENT_COMPONENT_MAPPER = {
+  icon: UTIcon,
+  avatar: props => <Avatar text={props.userName} avatarSize={64} {...props} />,
+  image: props => <Image resizeMode="contain" {...props} />
+};

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

@@ -0,0 +1,101 @@
+import React, { memo } from 'react';
+import { View } from 'react-native';
+import {
+  arrayOf,
+  bool,
+  elementType,
+  func,
+  number,
+  object,
+  objectOf,
+  oneOf,
+  oneOfType,
+  shape,
+  string
+} from 'prop-types';
+import { isEmpty } from '@widergy/web-utils/lib/array';
+
+import UTLabel from '../../../UTLabel';
+import HeaderActions from '../HeaderActions';
+import { HEADER_ACTIONS_VARIANTS, PLACE_SELF_TYPES, SIZES } from '../../constants';
+import { useTheme } from '../../../../theming';
+
+import { renderAdornment, statusPropsMapper } from './utils';
+import Status from './components/Status';
+import styles from './styles';
+
+const Header = ({
+  adornment,
+  classNames,
+  description,
+  descriptionProps,
+  headerActions,
+  headerActionsProps,
+  setMainActionHoverVisible,
+  size,
+  status,
+  statusAlignment,
+  statusLabel,
+  title,
+  titleProps
+}) => {
+  const theme = useTheme();
+
+  return (
+    <View style={[styles.header, styles[size], classNames.header]}>
+      {renderAdornment(adornment, 'left', size)}
+      <View style={styles.headerTitles}>
+        {renderAdornment(adornment, 'top', size)}
+        <UTLabel variant="title3" weight="medium" {...titleProps}>
+          {title}
+        </UTLabel>
+        {description && (
+          <UTLabel colorTheme="gray" {...descriptionProps}>
+            {description}
+          </UTLabel>
+        )}
+      </View>
+      {status ? (
+        <Status
+          {...statusPropsMapper(status, theme)}
+          alignment={statusAlignment}
+          value={statusLabel || status}
+        />
+      ) : null}
+      {!isEmpty(headerActions) && (
+        <HeaderActions {...{ headerActions, headerActionsProps, setMainActionHoverVisible }} />
+      )}
+    </View>
+  );
+};
+
+Header.propTypes = {
+  adornment: shape({ position: string, props: object, type: string }),
+  classNames: objectOf(string),
+  description: string,
+  descriptionProps: shape({ colorTheme: string, variant: string }),
+  headerActions: arrayOf(
+    shape({
+      Icon: oneOfType([elementType, string]),
+      id: oneOfType([number, string]),
+      isPrimary: bool,
+      label: string,
+      loading: bool,
+      onPress: func
+    })
+  ),
+  headerActionsProps: shape({
+    alignment: oneOf([PLACE_SELF_TYPES.CENTER, PLACE_SELF_TYPES.END, PLACE_SELF_TYPES.START]),
+    buttonGroupProps: shape({ colorTheme: string, shape: string }),
+    variant: oneOf([HEADER_ACTIONS_VARIANTS.DEFAULT, HEADER_ACTIONS_VARIANTS.BUTTON_GROUP])
+  }),
+  setMainActionHoverVisible: string,
+  size: oneOf([SIZES.MEDIUM, SIZES.SMALL]),
+  status: string,
+  statusAlignment: oneOf([PLACE_SELF_TYPES.CENTER, PLACE_SELF_TYPES.END, PLACE_SELF_TYPES.START]),
+  statusLabel: string,
+  title: string,
+  titleProps: shape({ variant: string, weight: string })
+};
+
+export default memo(Header);

package/lib/components/UTActionCard/components/Header/styles.js

@@ -0,0 +1,30 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  header: {
+    flexDirection: 'row',
+    gap: 16,
+    justifyContent: 'space-between'
+  },
+  headerTitles: {
+    flex: 1,
+    flexDirection: 'column',
+    gap: 8,
+    marginRight: 'auto'
+  },
+  medium: {
+    padding: 24
+  },
+  small: {
+    padding: 16
+  },
+  alignSelf_center: {
+    alignSelf: 'center'
+  },
+  alignSelf_start: {
+    alignSelf: 'flex-start'
+  },
+  alignSelf_end: {
+    alignSelf: 'flex-end'
+  }
+});

package/lib/components/UTActionCard/components/Header/utils.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import { isEmpty } from 'lodash';
+
+import { PLACE_SELF_TYPES } from '../../constants';
+
+import { ADORNMENT_COMPONENT_MAPPER } from './constants';
+import styles from './styles';
+
+const ACTIVE = 'active';
+const APPROVED = 'approved';
+const CHARGED_BILL = 'factura cobrada';
+const FINISHED = 'finished';
+const INACTIVE = 'inactive';
+const PENDING = 'pending';
+const BILLED = 'cobrada';
+const PAID = 'pagado';
+const ABOUT_TO_EXPIRE = 'por vencer';
+const UNPAID = 'impaga';
+const SUBSCRIBED = 'subscribed_from_utility';
+const UNSUBSCRIBED = 'unsubscribed';
+const CLOSED_STATUS = 'completed';
+const OBSERVED_STATUS = 'observed';
+const ONGOING_STATUS = 'pending';
+const FORM_STATUS = {
+  CANCELED: 'cancelled',
+  FINISHED: 'finished',
+  IN_PROGRESS: 'in_progress',
+  ON_HOLD: 'on_hold',
+  COMPLETED: 'completed'
+};
+const PAYMENTPLAN_STATUS = {
+  ACTIVE: 'active',
+  CANCELLED: 'canceled',
+  DRAFT: 'draft',
+  FINISHED: 'finished',
+  PENDING: 'pending',
+  PAYMENT_IN_PROGRESS: 'payment_in_progress',
+  PENDING_OFFLINE_PAYMENT: 'pending_offline_payment',
+  PENDING_PAYMENT: 'pending_payment'
+};
+
+export const statusPropsMapper = (status, theme) => {
+  const paletteVariantMap = {
+    success: [ACTIVE, APPROVED, BILLED, CHARGED_BILL, FINISHED, PAID, SUBSCRIBED],
+    error: [INACTIVE, PAYMENTPLAN_STATUS.CANCELLED, UNSUBSCRIBED, FORM_STATUS.CANCELED],
+    warning: [
+      OBSERVED_STATUS,
+      PAYMENTPLAN_STATUS.PAYMENT_IN_PROGRESS,
+      PAYMENTPLAN_STATUS.PENDING_OFFLINE_PAYMENT,
+      PAYMENTPLAN_STATUS.PENDING_PAYMENT,
+      UNPAID,
+      FORM_STATUS.ON_HOLD
+    ],
+    information: [ONGOING_STATUS, PENDING, FORM_STATUS.IN_PROGRESS],
+    unassigned: [CLOSED_STATUS, PAYMENTPLAN_STATUS.DRAFT, ABOUT_TO_EXPIRE]
+  };
+
+  const variant =
+    Object.entries(paletteVariantMap).find(([, statuses]) => statuses.includes(status?.toLowerCase()))?.[0] ||
+    'error';
+
+  return { backgroundColor: theme.Palette[variant]['01'] };
+};
+
+export const renderAdornment = (adornment, position, size) => {
+  if (isEmpty(adornment) || adornment.position !== position) return null;
+  const AdornmentComponent = ADORNMENT_COMPONENT_MAPPER[adornment.type];
+  const defaultPlaceSelf = adornment.position === 'left' ? PLACE_SELF_TYPES.CENTER : PLACE_SELF_TYPES.START;
+
+  return (
+    <AdornmentComponent
+      style={[
+        styles[`alignSelf_${adornment.alignment || defaultPlaceSelf}`],
+        position === 'top' && styles[`gap_${size}`],
+        adornment.type === 'image' && { width: adornment.props?.width, height: adornment.props?.height }
+      ]}
+      {...(adornment.props || {})}
+    />
+  );
+};

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

@@ -0,0 +1,80 @@
+import React, { memo, useState } from 'react';
+import { View } from 'react-native';
+import isEmpty from 'lodash/isEmpty';
+import { arrayOf, bool, elementType, func, number, oneOf, oneOfType, shape, string } from 'prop-types';
+
+import UTButton from '../../../UTButton';
+import UTButtonGroup from '../../../UTButtonGroup';
+import UTMenu from '../../../UTMenu';
+import UTIcon from '../../../UTIcon';
+import { HEADER_ACTIONS_VARIANTS, PLACE_SELF_TYPES } from '../../constants';
+
+import { processActions } from './utils';
+import styles from './styles';
+
+const HeaderActions = ({ headerActions, headerActionsProps }) => {
+  const [selectedAction, setSelectedAction] = useState(null);
+  const showButtonGroup = headerActionsProps.variant === HEADER_ACTIONS_VARIANTS.BUTTON_GROUP;
+  const { colorTheme: buttonGroupColorTheme = 'secondary', shape: buttonGroupShape } =
+    headerActionsProps?.buttonGroupProps || {};
+
+  const { primaryActions, secondaryActions } = processActions(headerActions);
+
+  return (
+    <View style={[styles.headerActionsContainer, styles[`alignSelf_${headerActionsProps.alignment}`]]}>
+      {primaryActions.map((buttonProps, i) =>
+        !buttonProps.onPress ? (
+          <UTIcon
+            name={buttonProps.Icon}
+            style={styles.notClickableIconContainer}
+            {...buttonProps}
+            key={buttonProps?.id || i}
+          />
+        ) : (
+          <UTButton size="medium" variant="text" {...buttonProps} key={buttonProps?.id || i} />
+        )
+      )}
+      {!isEmpty(secondaryActions) &&
+        (!showButtonGroup ? (
+          <View>
+            <UTMenu options={secondaryActions} horizontalOffset={-80}>
+              <UTIcon name="IconDots" />
+            </UTMenu>
+          </View>
+        ) : (
+          <UTButtonGroup
+            actions={secondaryActions.map(action => ({
+              ...action,
+              onPress: () => {
+                setSelectedAction(action.id);
+                action.onPress();
+              }
+            }))}
+            colorTheme={buttonGroupColorTheme}
+            selected={selectedAction || secondaryActions[0]?.id}
+            shape={buttonGroupShape}
+          />
+        ))}
+    </View>
+  );
+};
+
+HeaderActions.propTypes = {
+  headerActions: arrayOf(
+    shape({
+      Icon: oneOfType([elementType, string]),
+      id: oneOfType([number, string]),
+      isPrimary: bool,
+      label: string,
+      loading: bool,
+      onPress: func
+    })
+  ),
+  headerActionsProps: shape({
+    alignment: oneOf([PLACE_SELF_TYPES.CENTER, PLACE_SELF_TYPES.END, PLACE_SELF_TYPES.START]),
+    buttonGroupProps: shape({ colorTheme: string, shape: string }),
+    variant: oneOf([HEADER_ACTIONS_VARIANTS.DEFAULT, HEADER_ACTIONS_VARIANTS.BUTTON_GROUP])
+  })
+};
+
+export default memo(HeaderActions);

package/lib/components/UTActionCard/components/HeaderActions/styles.js

@@ -0,0 +1,21 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  headerActionsContainer: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: 8
+  },
+  alignSelf_center: {
+    alignSelf: 'center'
+  },
+  alignSelf_start: {
+    alignSelf: 'flex-start'
+  },
+  alignSelf_end: {
+    alignSelf: 'flex-end'
+  },
+  notClickableIconContainer: {
+    padding: 8
+  }
+});

package/lib/components/UTActionCard/components/HeaderActions/utils.js

@@ -0,0 +1,17 @@
+import { isEmpty } from 'lodash';
+
+const mapAction = action => ({
+  ...action,
+  action: () => {
+    action?.onPress?.();
+  }
+});
+
+export const processActions = headerActions =>
+  headerActions.reduce(
+    (final, current) => {
+      if (current.isPrimary && isEmpty(final.primaryActions)) return { ...final, primaryActions: [current] };
+      return { ...final, secondaryActions: [...final.secondaryActions, mapAction(current)] };
+    },
+    { primaryActions: [], secondaryActions: [] }
+  );

package/lib/components/UTActionCard/constants.js

@@ -0,0 +1,20 @@
+export const SIZES = {
+  MEDIUM: 'medium',
+  SMALL: 'small'
+};
+
+export const ACTION_TYPES = {
+  DEFAULT: 'default',
+  REDIRECTION: 'redirection'
+};
+
+export const HEADER_ACTIONS_VARIANTS = {
+  BUTTON_GROUP: 'buttonGroup',
+  DEFAULT: 'default'
+};
+
+export const PLACE_SELF_TYPES = {
+  CENTER: 'center',
+  END: 'end',
+  START: 'start'
+};

package/lib/components/UTActionCard/index.js

@@ -0,0 +1,157 @@
+import React, { memo } from 'react';
+import { View } from 'react-native';
+import {
+  arrayOf,
+  bool,
+  elementType,
+  func,
+  number,
+  object,
+  objectOf,
+  oneOf,
+  oneOfType,
+  shape,
+  string
+} from 'prop-types';
+import { isEmpty } from 'lodash';
+
+import Surface from '../Surface';
+import Touchable from '../Touchable';
+
+import { ACTION_TYPES, HEADER_ACTIONS_VARIANTS, PLACE_SELF_TYPES, SIZES } from './constants';
+import Header from './components/Header';
+import AdditionalMessage from './components/AdditionalMessage';
+import BottomActions from './components/BottomActions';
+import styles from './styles';
+
+const UTActionCard = ({
+  additionalMessage,
+  adornment,
+  backgroundHeight = '100%',
+  BackgroundImage,
+  backgroundWidth = '100%',
+  bottomActions,
+  bottomActionsVariant,
+  children,
+  classNames = {},
+  description,
+  descriptionProps = {},
+  headerActions,
+  headerActionsProps = { variant: HEADER_ACTIONS_VARIANTS.DEFAULT },
+  mainAction,
+  size = SIZES.SMALL,
+  status,
+  statusAlignment,
+  statusLabel,
+  title,
+  titleProps = {},
+  withBodyPadding = true
+}) => {
+  return (
+    <Surface elevation={1} style={[styles.cardContainer, classNames.container]}>
+      <Touchable
+        onPress={mainAction && (() => mainAction?.())}
+        style={[styles.innerContainer, classNames.innerContainer, mainAction && styles.withMainAction]}
+      >
+        <View>
+          {BackgroundImage && (
+            <BackgroundImage
+              height={backgroundHeight}
+              style={[styles.backgroundImage, classNames.backgroundImage]}
+              width={backgroundWidth}
+            />
+          )}
+          <View style={[styles.headerAndChildrenContainer, classNames.headerAndChildrenContainer]}>
+            <Header
+              {...{
+                adornment,
+                classNames,
+                description,
+                descriptionProps,
+                headerActions,
+                headerActionsProps,
+                mainAction,
+                size,
+                status,
+                statusAlignment,
+                statusLabel,
+                title,
+                titleProps
+              }}
+            />
+            {children && (
+              <View
+                style={[
+                  withBodyPadding ? styles[`bodyPadding_${size}`] : styles[`withoutBodyPadding_${size}`]
+                ]}
+              >
+                {children}
+              </View>
+            )}
+          </View>
+        </View>
+      </Touchable>
+      {!isEmpty(additionalMessage) && <AdditionalMessage {...additionalMessage} size={size} />}
+      {!isEmpty(bottomActions) && (
+        <BottomActions actions={bottomActions} bottomActionsVariant={bottomActionsVariant} />
+      )}
+    </Surface>
+  );
+};
+
+UTActionCard.propTypes = {
+  additionalMessage: shape({
+    Icon: elementType,
+    iconProps: shape({ colorTheme: string, size: string }),
+    labelProps: shape({ colorTheme: string, variant: string }),
+    message: string
+  }),
+  adornment: shape({
+    alignment: oneOf([PLACE_SELF_TYPES.CENTER, PLACE_SELF_TYPES.END, PLACE_SELF_TYPES.START]),
+    position: string,
+    props: object,
+    type: string
+  }),
+  backgroundHeight: oneOfType([string, number]),
+  BackgroundImage: elementType,
+  backgroundWidth: oneOfType([string, number]),
+  bottomActions: arrayOf(
+    shape({
+      colorTheme: string,
+      disabled: bool,
+      Icon: elementType,
+      label: string,
+      loading: bool,
+      onClick: func
+    })
+  ),
+  bottomActionsVariant: oneOf([ACTION_TYPES.DEFAULT, ACTION_TYPES.REDIRECTION]),
+  classNames: objectOf(string),
+  description: string,
+  descriptionProps: shape({ colorTheme: string, variant: string }),
+  headerActions: arrayOf(
+    shape({
+      Icon: oneOfType([elementType, string]),
+      id: oneOfType([number, string]),
+      isPrimary: bool,
+      label: string,
+      loading: bool,
+      onPress: func
+    })
+  ),
+  headerActionsProps: shape({
+    alignment: oneOf([PLACE_SELF_TYPES.CENTER, PLACE_SELF_TYPES.END, PLACE_SELF_TYPES.START]),
+    buttonGroupProps: shape({ colorTheme: string, shape: string }),
+    variant: oneOf([HEADER_ACTIONS_VARIANTS.DEFAULT, HEADER_ACTIONS_VARIANTS.BUTTON_GROUP])
+  }),
+  mainAction: func,
+  size: oneOf([SIZES.MEDIUM, SIZES.SMALL]),
+  status: string,
+  statusLabel: string,
+  statusAlignment: oneOf([PLACE_SELF_TYPES.CENTER, PLACE_SELF_TYPES.END, PLACE_SELF_TYPES.START]),
+  title: string,
+  titleProps: shape({ variant: string, weight: string }),
+  withBodyPadding: bool
+};
+
+export default memo(UTActionCard);

package/lib/components/UTActionCard/styles.js

@@ -0,0 +1,39 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  cardContainer: {
+    borderRadius: 8,
+    overflow: 'hidden'
+  },
+  innerContainer: {
+    position: 'relative',
+    width: '100%'
+  },
+  backgroundImage: {
+    position: 'absolute',
+    zIndex: 0
+  },
+  headerAndChildrenContainer: {
+    flexDirection: 'column',
+    width: '100%',
+    zIndex: 1
+  },
+  bodyPadding_medium: {
+    paddingTop: 0,
+    paddingLeft: 24,
+    paddingRight: 24,
+    paddingBottom: 24
+  },
+  bodyPadding_small: {
+    paddingTop: 0,
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingBottom: 16
+  },
+  withoutBodyPadding_small: {
+    paddingBottom: 16
+  },
+  withoutBodyPadding_medium: {
+    paddingBottom: 24
+  }
+});

package/lib/components/UTIcon/index.js

@@ -40,13 +40,14 @@ const UTIcon = ({
 
   return (
     <View
-      style={
+      style={[
         area && [
           ownStyles.withArea,
           ownStyles[`size${size}`],
           getVariantStyle({ color: colorTheme || color, shade, theme, variant })
-        ]
-      }
+        ],
+        iconProps.style
+      ]}
     >
       <IconComponent {...iconProps} />
     </View>

package/lib/components/UTLabel/constants.js

@@ -1,9 +1,9 @@
 export const VARIANTS_SIZES = {
-  title1: 30,
-  title2: 24,
-  title3: 22,
-  subtitle1: 18,
-  subtitle2: 16,
+  title1: 24,
+  title2: 22,
+  title3: 18,
+  subtitle1: 16,
+  subtitle2: 14,
   body: 16,
   small: 14,
   xsmall: 11,

package/lib/components/UTMenu/proptypes.js

@@ -2,7 +2,7 @@ import { arrayOf, bool, func, number, oneOfType, shape, string } from 'prop-type
 
 const optionType = shape({
   label: string.isRequired,
-  id: string.isRequired,
+  id: oneOfType([number, string]).isRequired,
   action: func,
   value: oneOfType([number, string])
 });

package/lib/components/UTWorkflowContainer/versions/V0/index.js

@@ -38,7 +38,7 @@ const UTWorkflowContainer = ({
   const Title = React.isValidElement(title) ? (
     title
   ) : (
-    <Label big bold {...titleProps} style={themedStyles.title}>
+    <Label big {...titleProps} style={themedStyles.title}>
       {title}
     </Label>
   );

package/lib/index.js

@@ -35,6 +35,7 @@ export { default as Touchable } from './components/Touchable';
 export { default as TransformView } from './components/TransformView';
 export { default as TransitionText } from './components/TransitionText';
 export { default as TransitionView } from './components/TransitionView';
+export { default as UTActionCard } from './components/UTActionCard';
 export { default as UTAutocomplete } from './components/UTAutocomplete';
 export { default as UTBadge } from './components/UTBadge';
 export { default as UTBottomSheet } from './components/UTBottomSheet';

package/package.json

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