@widergy/mobile-ui 1.17.1 → 1.18.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [1.18.0](https://github.com/widergy/mobile-ui/compare/v1.17.1...v1.18.0) (2024-08-12)
+
+
+### Features
+
+* button counter ([#333](https://github.com/widergy/mobile-ui/issues/333)) ([7a87e45](https://github.com/widergy/mobile-ui/commit/7a87e452d04a227bc7b18b3d5db54435ca9f1345))
+
 ## [1.17.1](https://github.com/widergy/mobile-ui/compare/v1.17.0...v1.17.1) (2024-08-12)
 
 

package/lib/components/UTButton/README.md

@@ -2,13 +2,14 @@
 
 ## Description
 
-`UTButton` is a versatile button component that can be customized with various themes, sizes, icons, and loading states.
+`UTButton` is a versatile button component that can be customized with various themes, sizes, icons, counters, and loading states.
 
 ## Props
 
 | Name          | Type        | Default     | Description                                                                                                                            |
 | ------------- | ----------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- |
 | colorTheme    | string      | 'secondary' | The color theme to use. One of: `error`, `negative`, `primary`, `secondary`, `success`.                                                |
+| count         | number      |             | The value to be shown inside the `UTBadge` component                                     |
 | disabled      | bool        | false       | Disables the button, making it unclickable and applying a disabled style.                                                              |
 | Icon          | elementType |             | Icon component to be displayed inside the button. Can be a text (name of the icon from tabler icons) or a React component (e.g., SVG). |
 | iconPlacement | string      | 'left'      | Position of the icon relative to the text. One of: `left`, `right`.                                                                    |

package/lib/components/UTButton/constants.js

@@ -1,5 +1,6 @@
 export const ELEVATION = 2;
 export const PRESSED_ELEVATION = 2;
+export const PRIMARY = 'primary';
 
 export const SIZES = {
   SMALL: 'small',
@@ -19,3 +20,9 @@ export const COLORS_MAPPER = {
   secondary: 'neutral',
   success: 'success'
 };
+
+export const COUNTER_THEMES = {
+  IDENTITY: 'identity',
+  IDENTITY_SECONDARY: 'identitySecondary',
+  NEGATIVE: 'negative'
+};

package/lib/components/UTButton/index.js

@@ -3,6 +3,7 @@ import { Pressable, View } from 'react-native';
 
 import { isUTIcon } from '../UTIcon/utils';
 import { useTheme } from '../../theming';
+import UTBadge from '../UTBadge';
 import UTIcon from '../UTIcon';
 import UTLabel from '../UTLabel';
 import UTLoading from '../UTLoading';
@@ -14,6 +15,7 @@ import { retrieveStyle } from './theme';
 const UTButton = ({
   children,
   colorTheme,
+  count,
   disabled,
   Icon,
   iconPlacement,
@@ -27,6 +29,7 @@ const UTButton = ({
 
   const {
     buttonStyles: themeButtonStyles,
+    counterStyles,
     childrenContainerStyles: themeChildrenContainerStyles,
     disabledStyles,
     iconStyles: themeIconStyles,
@@ -42,6 +45,8 @@ const UTButton = ({
 
   const iconStyles = children ? themeIconStyles.icon : themeIconStyles.iconOnly;
 
+  const { colorTheme: counterTheme, iconLeftAndCounter, ...remainingCounterStyles } = counterStyles;
+
   const buttonStyles = ({ pressed }) => [
     themeButtonStyles,
     (disabled || loading) && disabledStyles,
@@ -70,6 +75,16 @@ const UTButton = ({
   const RenderedChildren = (
     <View style={themeChildrenContainerStyles}>
       {iconPlacement === ICON_PLACEMENTS.LEFT && IconToShow}
+      {count && count > 0 ? (
+        <UTBadge
+          colorTheme={counterTheme}
+          style={
+            iconPlacement === ICON_PLACEMENTS.LEFT && !children ? iconLeftAndCounter : remainingCounterStyles
+          }
+        >
+          {count}
+        </UTBadge>
+      ) : null}
       {children && (
         <UTLabel colorTheme={textStyles.colorTheme} variant={textStyles.variant} weight={textStyles.weight}>
           {children}

package/lib/components/UTButton/proptypes.js

@@ -1,4 +1,4 @@
-import { bool, func, elementType, string, shape } from 'prop-types';
+import { bool, func, elementType, string, shape, number } from 'prop-types';
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 
 import { ICON_PLACEMENTS, SIZES } from './constants';
@@ -14,6 +14,7 @@ export const defaultProps = {
 
 export const propTypes = {
   colorTheme: string,
+  count: number,
   disabled: bool,
   Icon: elementType,
   iconPlacement: string,

package/lib/components/UTButton/theme.js

@@ -1,7 +1,7 @@
 import { getShadow } from '../../utils/styleUtils';
 import { COLOR_THEMES } from '../UTLabel/constants';
 
-import { COLORS_MAPPER, ELEVATION, PRESSED_ELEVATION } from './constants';
+import { COLORS_MAPPER, COUNTER_THEMES, ELEVATION, PRESSED_ELEVATION, PRIMARY } from './constants';
 import { defaultProps } from './proptypes';
 
 const baseButtonTheme = () => ({
@@ -16,6 +16,13 @@ const baseButtonTheme = () => ({
     paddingHorizontal: 12,
     paddingVertical: 8
   },
+  counter: {
+    marginRight: 8
+  },
+  iconLeftAndCounter: {
+    marginLeft: 8,
+    marginRight: 0
+  },
   icon: {
     fontSize: 20
   },
@@ -54,6 +61,10 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
           backgroundColor: actionTheme['05']
         }
       },
+      counter: {
+        colorTheme:
+          colorTheme === COLORS_MAPPER.negative ? COUNTER_THEMES.IDENTITY_SECONDARY : COUNTER_THEMES.NEGATIVE
+      },
       text: {
         colorTheme: colorTheme === COLORS_MAPPER.negative ? COLOR_THEMES.NEUTRAL : COLOR_THEMES.NEGATIVE
       },
@@ -71,6 +82,14 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
           backgroundColor: actionTheme['03']
         }
       },
+      counter: {
+        colorTheme:
+          colorTheme === COLORS_MAPPER.negative
+            ? colorTheme
+            : colorTheme === PRIMARY
+              ? COUNTER_THEMES.IDENTITY
+              : COUNTER_THEMES.IDENTITY_SECONDARY
+      },
       text: {
         colorTheme: colorName
       },
@@ -87,6 +106,14 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
           backgroundColor: actionTheme['02']
         }
       },
+      counter: {
+        colorTheme:
+          colorTheme === COLORS_MAPPER.negative
+            ? colorTheme
+            : colorTheme === PRIMARY
+              ? COUNTER_THEMES.IDENTITY
+              : COUNTER_THEMES.IDENTITY_SECONDARY
+      },
       text: {
         colorTheme: colorName
       },
@@ -103,6 +130,14 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
           backgroundColor: actionTheme['02']
         }
       },
+      counter: {
+        colorTheme:
+          colorTheme === COLORS_MAPPER.negative
+            ? colorTheme
+            : colorTheme === PRIMARY
+              ? COUNTER_THEMES.IDENTITY
+              : COUNTER_THEMES.IDENTITY_SECONDARY
+      },
       text: {
         colorTheme: colorName
       },
@@ -122,6 +157,14 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
         },
         notPressed: shadow
       },
+      counter: {
+        colorTheme:
+          colorTheme === COLORS_MAPPER.negative
+            ? colorTheme
+            : colorTheme === PRIMARY
+              ? COUNTER_THEMES.IDENTITY
+              : COUNTER_THEMES.IDENTITY_SECONDARY
+      },
       text: {
         colorTheme: colorName
       },
@@ -198,6 +241,14 @@ export const retrieveStyle = ({ style = {}, colorTheme, variant, theme, size, ic
     ...style.root
   };
 
+  const counterStyles = {
+    ...baseTheme.counter,
+    ...variantTheme.counter,
+    iconLeftAndCounter: {
+      ...baseTheme.iconLeftAndCounter
+    }
+  };
+
   const textStyles = {
     colorTheme: variantTheme.text.colorTheme,
     variant: sizeTheme.text?.variant || baseTheme.text?.variant,
@@ -226,5 +277,5 @@ export const retrieveStyle = ({ style = {}, colorTheme, variant, theme, size, ic
     opacity: 0.5
   };
 
-  return { buttonStyles, textStyles, disabledStyles, iconStyles, childrenContainerStyles };
+  return { buttonStyles, counterStyles, textStyles, disabledStyles, iconStyles, childrenContainerStyles };
 };

package/package.json

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