Merge pull request #123 from ZeroGachis/fix/Labelsize

✨ Adding the small size button and fixing the colors.
ZeroGachis · Nov 17, 2023 · 0b8e879 · 0b8e879
2 parents a867deb + d056d16
commit 0b8e879
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 12 deletions.
diff --git a/.eslint.js b/.eslint.js
@@ -0,0 +1,36 @@
+module.exports = {
+    root: true,
+    extends: [
+        '@react-native',
+        'eslint:recommended',
+        'plugin:eslint-plugin/recommended',
+        'plugin:@typescript-eslint/recommended',
+    ],
+    parser: '@typescript-eslint/parser',
+    plugins: ['@typescript-eslint', 'functional'],
+    overrides: [
+        {
+            files: ['*.ts', '*.tsx'],
+            rules: {
+                '@typescript-eslint/no-shadow': ['error'],
+                'no-shadow': 'off',
+                'no-undef': 'off',
+                'no-unreachable': ['error'],
+                'functional/no-promise-reject': ['warn'],
+                'functional/no-throw-statements': ['warn'],
+            },
+        },
+        {
+            files: ['__test__/**'],
+            plugins: ['jest'],
+            extends: ['plugin:jest/recommended'],
+            rules: { 'jest/prefer-expect-assertions': 'off' },
+        },
+        {
+            files: ['metro.config.js'],
+            rules: {
+                '@typescript-eslint/no-var-requires': 'off',
+            },
+        },
+    ],
+};
diff --git a/src/components/label/Label.tsx b/src/components/label/Label.tsx
@@ -14,17 +14,20 @@ type LabelColor =
     | 'primary'
     | 'neutral';
 
-type OptionnalBodyPropsWithoutSizeAndWeight = Partial<Omit<Omit<BodyProps, 'size'>, 'weight'>>;
+type OptionnalBodyPropsWithoutSizeAndWeight = Partial<
+    Omit<Omit<BodyProps, 'size'>, 'weight'>
+>;
 
 export interface Props extends OptionnalBodyPropsWithoutSizeAndWeight {
     style?: ViewStyle;
     text: string;
     type: LabelType;
     labelColor?: LabelColor;
+    size?: 'm' | 's';
 }
 
 export const Label = (props: Props) => {
-    const { style, text, type, labelColor = 'neutral' } = props;
+    const { style, text, type, labelColor = 'neutral', size = 'm' } = props;
     const theme = useTheme();
 
     const transparencyValue = theme.sw.transparency[16];
@@ -76,31 +79,39 @@ export const Label = (props: Props) => {
                       }
                     : labelColor === 'primary'
                     ? {
-                          backgroundColor: theme.sw.colors.primary.main + transparencyValue,
+                          backgroundColor:
+                              theme.sw.colors.primary.main + transparencyValue,
                           color: theme.sw.colors.primary[600],
                       }
                     : labelColor === 'secondary'
                     ? {
-                          backgroundColor: theme.sw.colors.secondary[400] + transparencyValue,
+                          backgroundColor:
+                              theme.sw.colors.secondary[400] +
+                              transparencyValue,
                           color: theme.sw.colors.secondary[600],
                       }
                     : labelColor === 'information'
                     ? {
-                          backgroundColor: theme.sw.colors.information[400] + transparencyValue,
+                          backgroundColor:
+                              theme.sw.colors.information[400] +
+                              transparencyValue,
                           color: theme.sw.colors.information[600],
                       }
                     : labelColor === 'success'
                     ? {
-                          backgroundColor: theme.sw.colors.success[400] + transparencyValue,
+                          backgroundColor:
+                              theme.sw.colors.success[400] + transparencyValue,
                           color: theme.sw.colors.success[600],
                       }
                     : labelColor === 'warning'
                     ? {
-                          backgroundColor: theme.sw.colors.warning[400] + transparencyValue,
+                          backgroundColor:
+                              theme.sw.colors.warning[400] + transparencyValue,
                           color: theme.sw.colors.warning[600],
                       }
                     : {
-                          backgroundColor: theme.sw.colors.error['main'] + transparencyValue,
+                          backgroundColor:
+                              theme.sw.colors.error['main'] + transparencyValue,
                           color: theme.sw.colors.error[600],
                       };
         }
@@ -109,7 +120,7 @@ export const Label = (props: Props) => {
                 return labelColor === 'neutral'
                     ? {
                           borderColor: theme.sw.colors.neutral[400],
-                          color: theme.sw.colors.neutral[800],
+                          color: theme.sw.colors.neutral[500],
                       }
                     : labelColor === 'primary'
                     ? {
@@ -148,20 +159,25 @@ export const Label = (props: Props) => {
         container: {
             borderWidth: type === 'outlined' ? 1 : 0,
             backgroundColor,
-            paddingHorizontal: 10,
+            paddingHorizontal: size == 'm' ? 10 : 8,
             paddingVertical: 4,
             borderRadius: 8,
             borderColor,
             ...style,
         },
         text: {
-            lineHeight: 20,
+            lineHeight: size == 'm' ? 20 : undefined,
             color,
         },
     });
     return (
         <View style={styles.container}>
-            <Body {...props} style={styles.text} size="B1" weight="bold">
+            <Body
+                {...props}
+                style={styles.text}
+                size={size == 'm' ? 'B1' : 'B2'}
+                weight='bold'
+            >
                 {text}
             </Body>
         </View>