@momo-kits/badge 0.81.8 → 0.81.9-beta.1

package/Badge.tsx

@@ -1,12 +1,26 @@
 import React, {FC, useContext} from 'react';
 import {View} from 'react-native';
 import {ApplicationContext, Colors, Text} from '@momo-kits/foundation';
-import {BadgeProps, BadgeType} from './types';
+import {BadgeProps} from './types';
 import styles from './styles';
 
-const Badge: FC<BadgeProps> = ({label = 'Label', style}) => {
+const Badge: FC<BadgeProps> = ({label = 'Label', style, backgroundColor}) => {
   const {theme} = useContext(ApplicationContext);
 
+  const isValidatedColor = () => {
+    const colorKeys = Object.keys(Colors);
+    const colorValue = Object.values(Colors);
+    if (backgroundColor) {
+      const colorIndex = colorValue.indexOf(backgroundColor);
+      if (colorIndex !== -1) {
+        if (colorKeys[colorIndex].includes('_03')) {
+          return true;
+        }
+      }
+    }
+    return false;
+  };
+
   const isNumber = () => {
     const numberRegex = /^\d+$/;
     return numberRegex.test(String(label));
@@ -19,12 +33,16 @@ const Badge: FC<BadgeProps> = ({label = 'Label', style}) => {
     return label.toString();
   };
 
-  const backgroundColor = isNumber()
+  let badgeColor = isNumber()
     ? theme.colors.error.primary
     : theme.colors.warning.primary;
 
+  if (backgroundColor && isValidatedColor()) {
+    badgeColor = backgroundColor;
+  }
+
   return (
-    <View style={[style, styles.badge, {backgroundColor}]}>
+    <View style={[style, styles.badge, {backgroundColor: badgeColor}]}>
       <Text color={Colors.black_01} typography={'action_xxs'}>
         {formatTitle()}
       </Text>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/badge",
-    "version": "0.81.8",
+    "version": "0.81.9-beta.1",
     "private": false,
     "main": "index.tsx",
     "peerDependencies": {

package/styles.ts

@@ -47,11 +47,8 @@ export default StyleSheet.create({
     alignItems: 'center',
   },
   ribbonLabel: {
-    fontSize: 10,
-    lineHeight: 14,
     color: Colors.black_01,
-    minWidth: 20,
-    marginRight: 8,
+    marginRight: Spacing.S,
     fontWeight: 'bold',
   },
 });

package/types.ts

@@ -18,6 +18,8 @@ export type BadgeProps = {
    * Optional. Custom styles to apply to the badge component. Can be a single style or an array of styles.
    */
   style?: ViewStyle | ViewStyle[];
+
+  backgroundColor?: string;
 };
 
 /**