etendo-ui-library 1.0.77 → 1.0.78

package/components/button/Button.stories.tsx

@@ -6,6 +6,7 @@ import {View} from 'react-native';
 import {styles} from './Button.styles';
 import addMarginContainer from '../../helpers/addMargin';
 import {CheckIcon} from '../../assets/images/icons/CheckIcon';
+import {WHITE} from '../../styles/colors';
 
 const meta: Meta = {
   title: 'Etendo/Button',
@@ -28,7 +29,7 @@ const Template1: Story<ButtonProps> = args => (
         onPress={() => {}}
         image={
           <CheckIcon
-            fill={'white'}
+            fill={WHITE}
             style={{
               marginRight: 10,
               width: 12,
@@ -38,9 +39,7 @@ const Template1: Story<ButtonProps> = args => (
         }
         text={'Primary'}
         typeStyle={'primary'}
-        typeSize={'medium'}
-        width={150}
-        height={50}
+        width={'full'}
       />
     </View>
     <View style={styles.storiesButtonContainer}>
@@ -57,9 +56,7 @@ const Template1: Story<ButtonProps> = args => (
         }
         text={'Secondary'}
         typeStyle={'secondary'}
-        typeSize={'medium'}
-        width={150}
-        height={50}
+        width={'full'}
       />
     </View>
     <View style={styles.storiesButtonContainer}>
@@ -76,9 +73,7 @@ const Template1: Story<ButtonProps> = args => (
         }
         text={'Terciary'}
         typeStyle={'terciary'}
-        typeSize={'medium'}
-        width={150}
-        height={50}
+        width={'full'}
       />
     </View>
     <View style={styles.storiesButtonContainer}>
@@ -95,9 +90,7 @@ const Template1: Story<ButtonProps> = args => (
         }
         text={'White'}
         typeStyle={'white'}
-        typeSize={'medium'}
-        width={150}
-        height={50}
+        width={'full'}
       />
     </View>
     <View style={styles.storiesButtonContainer}>
@@ -114,9 +107,7 @@ const Template1: Story<ButtonProps> = args => (
         }
         text={'WhiteBorder'}
         typeStyle={'whiteBorder'}
-        typeSize={'medium'}
-        width={150}
-        height={50}
+        width={'full'}
       />
     </View>
   </View>
@@ -129,7 +120,6 @@ ButtonDefault.args = {
   text: 'Button',
   typeStyle: 'primary',
   disabled: false,
-  typeSize: 'medium',
   width: 150,
   height: 50,
 };

package/components/button/Button.styles.tsx

@@ -8,7 +8,7 @@ import {
   YELLOW,
   YELLOW_30,
 } from '../../styles/colors';
-import {buttonSizeVariant, buttonStyleVariant} from './Button.types';
+import {buttonStyleVariant} from './Button.types';
 
 export const ButtonStyleVariant: buttonStyleVariant = {
   primary: {
@@ -17,14 +17,13 @@ export const ButtonStyleVariant: buttonStyleVariant = {
       borderRadius: 5,
       flexDirection: 'row',
       justifyContent: 'center',
-      width: '100%',
       height: '100%',
       alignItems: 'center',
+      padding: 24,
     },
     text: {
       color: WHITE,
       fontWeight: '600',
-      fontSize: 16,
     },
     containerDisabled: {
       backgroundColor: GREY_BLUE_50,
@@ -37,9 +36,7 @@ export const ButtonStyleVariant: buttonStyleVariant = {
       color: WHITE,
       fontWeight: 'bold',
     },
-    imageColor: {
-      tintColor: WHITE,
-    },
+    imageColor: WHITE,
   },
   secondary: {
     container: {
@@ -48,6 +45,7 @@ export const ButtonStyleVariant: buttonStyleVariant = {
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'center',
+      padding: 24,
     },
     text: {
       color: BLUE,
@@ -64,9 +62,7 @@ export const ButtonStyleVariant: buttonStyleVariant = {
       color: GREY_BLUE_50,
       fontWeight: 'bold',
     },
-    imageColor: {
-      tintColor: BLUE,
-    },
+    imageColor: BLUE,
   },
   terciary: {
     container: {
@@ -75,6 +71,7 @@ export const ButtonStyleVariant: buttonStyleVariant = {
       flexDirection: 'row',
       justifyContent: 'center',
       alignItems: 'center',
+      padding: 24,
     },
     text: {
       color: BLUE,
@@ -91,9 +88,7 @@ export const ButtonStyleVariant: buttonStyleVariant = {
       color: GREY_BLUE_50,
       fontWeight: 'bold',
     },
-    imageColor: {
-      tintColor: BLUE,
-    },
+    imageColor: BLUE,
   },
   whiteBorder: {
     container: {
@@ -104,6 +99,7 @@ export const ButtonStyleVariant: buttonStyleVariant = {
       borderColor: BLUE,
       justifyContent: 'center',
       alignItems: 'center',
+      padding: 24,
     },
     text: {
       color: BLUE,
@@ -122,9 +118,7 @@ export const ButtonStyleVariant: buttonStyleVariant = {
       color: GREY_BLUE_50,
       fontWeight: 'bold',
     },
-    imageColor: {
-      tintColor: BLUE,
-    },
+    imageColor: BLUE,
   },
   white: {
     container: {
@@ -133,6 +127,7 @@ export const ButtonStyleVariant: buttonStyleVariant = {
       flexDirection: 'row',
       justifyContent: 'center',
       alignItems: 'center',
+      padding: 24,
     },
     text: {
       color: BLUE,
@@ -149,39 +144,7 @@ export const ButtonStyleVariant: buttonStyleVariant = {
       color: GREY_BLUE_50,
       fontWeight: 'bold',
     },
-    imageColor: {
-      tintColor: BLUE,
-    },
-  },
-};
-
-export const ButtonSizeVariant: buttonSizeVariant = {
-  small: {
-    containerSize: {
-      paddingVertical: 4,
-      paddingHorizontal: 8,
-    },
-    buttonSize: {
-      fontSize: 14,
-    },
-  },
-  medium: {
-    containerSize: {
-      paddingVertical: 10,
-      paddingHorizontal: 12,
-    },
-    buttonSize: {
-      fontSize: 18,
-    },
-  },
-  large: {
-    containerSize: {
-      paddingVertical: 14,
-      paddingHorizontal: 18,
-    },
-    buttonSize: {
-      fontSize: 20,
-    },
+    imageColor: BLUE,
   },
 };
 
@@ -192,6 +155,7 @@ export const styles = StyleSheet.create({
     alignItems: 'flex-start',
     flex: 1,
     width: '100%',
+
     justifyContent: 'space-between',
   },
   storiesButtonContainer: {

package/components/button/Button.tsx

@@ -1,7 +1,15 @@
-import React from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
-import {ButtonSizeVariant, ButtonStyleVariant} from './Button.styles';
-import {ButtonProps} from './Button.types';
+import React, {useState} from 'react';
+import {Pressable, Text, View} from 'react-native';
+import {
+  BLUE,
+  BLUE_80,
+  LIGHT_PURPLE_60,
+  PURPLE,
+  WHITE,
+  YELLOW_50,
+} from '../../styles/colors';
+import {ButtonStyleVariant} from './Button.styles';
+import {ButtonProps, ButtonStyleType} from './Button.types';
 
 const Button = ({
   text,
@@ -9,33 +17,92 @@ const Button = ({
   typeStyle,
   image,
   disabled,
-  width,
+  width = 'auto',
   height,
 }: ButtonProps) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  const getHoveredBackgroundColor = (backgroundColor: ButtonStyleType) => {
+    switch (backgroundColor) {
+      case 'primary':
+        return BLUE_80;
+      case 'secondary':
+        return YELLOW_50;
+      case 'terciary':
+        return LIGHT_PURPLE_60;
+      case 'whiteBorder':
+        return BLUE;
+    }
+  };
+  const getHoveredTextColorAndViewColor = (typeStyle: ButtonStyleType) => {
+    switch (typeStyle) {
+      case 'white':
+        return PURPLE;
+      case 'whiteBorder':
+        return WHITE;
+      case 'primary':
+        return WHITE;
+      default:
+        return BLUE;
+    }
+  };
+
   const stateStyleContainer = () => {
     if (disabled) {
       return ButtonStyleVariant[typeStyle].containerDisabled;
     }
+    if (isHovered) {
+      const hoveredBackgroundColor = getHoveredBackgroundColor(typeStyle);
+      return {
+        ...ButtonStyleVariant[typeStyle].container,
+        backgroundColor: hoveredBackgroundColor,
+        width: width === 'full' ? '100%' : width,
+      };
+    }
     return ButtonStyleVariant[typeStyle].container;
   };
+  const handleHoverIn = () => {
+    setIsHovered(true);
+  };
+
+  const handleHoverOut = () => {
+    setIsHovered(false);
+  };
 
   const stateStyleText = () => {
     if (disabled) {
       return ButtonStyleVariant[typeStyle].textDisabled;
     }
+    if (isHovered) {
+      const hoveredTextColor = getHoveredTextColorAndViewColor(typeStyle);
+      if (hoveredTextColor) {
+        return {
+          ...ButtonStyleVariant[typeStyle].text,
+          color: hoveredTextColor,
+        };
+      }
+    }
     return ButtonStyleVariant[typeStyle].text;
   };
 
+  const newImage =
+    image &&
+    React.cloneElement(image, {
+      fill: isHovered
+        ? getHoveredTextColorAndViewColor(typeStyle)
+        : ButtonStyleVariant[typeStyle].imageColor,
+    });
+
   return (
-    <TouchableOpacity
-      style={[stateStyleContainer(), {width: width, height: height}]}
+    <Pressable
+      onHoverIn={handleHoverIn}
+      onHoverOut={handleHoverOut}
+      style={[stateStyleContainer(), {height: height, width: width}]}
       onPress={onPress}
     >
-      <View>{image && image}</View>
-      <Text style={[stateStyleText(), ButtonSizeVariant['medium'].buttonSize]}>
-        {text}
-      </Text>
-    </TouchableOpacity>
+      <View>{image && newImage}</View>
+      <Text style={[stateStyleText()]}>{text}</Text>
+    </Pressable>
   );
 };
 

package/components/button/Button.types.tsx

@@ -1,4 +1,4 @@
-import {ImageStyle, TextStyle, ViewStyle} from 'react-native';
+import {ColorValue, TextStyle, ViewStyle} from 'react-native';
 
 export type ButtonStyleType =
   | 'primary'
@@ -7,8 +7,6 @@ export type ButtonStyleType =
   | 'whiteBorder'
   | 'white';
 
-export type ButtonSizeType = 'small' | 'medium' | 'large';
-
 export type buttonStyleVariant = Record<
   ButtonStyleType,
   {
@@ -16,15 +14,7 @@ export type buttonStyleVariant = Record<
     text: TextStyle;
     containerDisabled: ViewStyle;
     textDisabled: TextStyle;
-    imageColor: ImageStyle;
-  }
->;
-
-export type buttonSizeVariant = Record<
-  ButtonSizeType,
-  {
-    buttonSize: TextStyle;
-    containerSize: ViewStyle;
+    imageColor: ColorValue;
   }
 >;
 
@@ -34,7 +24,6 @@ export interface ButtonProps {
   typeStyle: ButtonStyleType;
   image?: React.ReactNode;
   disabled?: boolean;
-  typeSize: ButtonSizeType;
-  width?: number | string;
+  width?: number | string | 'full';
   height?: number | string;
 }

package/components/button/__snapshots__/Button.test.tsx.snap

@@ -5,7 +5,9 @@ exports[`Running Test for Input Check Button disabled 1`] = `
   accessible={true}
   collapsable={false}
   focusable={true}
+  onBlur={[Function]}
   onClick={[Function]}
+  onFocus={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
   onResponderRelease={[Function]}
@@ -13,16 +15,19 @@ exports[`Running Test for Input Check Button disabled 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Object {
-      "alignItems": "center",
-      "backgroundColor": "#D3D6E1",
-      "borderRadius": 5,
-      "flexDirection": "row",
-      "height": undefined,
-      "justifyContent": "center",
-      "opacity": 1,
-      "width": undefined,
-    }
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#D3D6E1",
+        "borderRadius": 5,
+        "flexDirection": "row",
+        "justifyContent": "center",
+      },
+      Object {
+        "height": undefined,
+        "width": "auto",
+      },
+    ]
   }
 >
   <View>
@@ -90,9 +95,6 @@ exports[`Running Test for Input Check Button disabled 1`] = `
           "color": "#FFFFFF",
           "fontWeight": "bold",
         },
-        Object {
-          "fontSize": 18,
-        },
       ]
     }
   >

package/components/tab/Tab.tsx

@@ -1,7 +1,13 @@
 // Imports
-import React from 'react';
-import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
-import {BLUE, GREY_BLUE_50, WHITE, YELLOW} from '../../styles/colors';
+import React, {useState} from 'react';
+import {View, Text, StyleSheet, Pressable} from 'react-native';
+import {
+  BLUE,
+  GREY_BLUE_30,
+  GREY_BLUE_50,
+  WHITE,
+  YELLOW,
+} from '../../styles/colors';
 import {TabProps} from './Tab.types';
 
 const Tab = ({
@@ -12,21 +18,38 @@ const Tab = ({
   fontFamily,
   fontWeight,
 }: TabProps) => {
+  const [hoveredTab, setHoveredTab] = useState<number | null>(null);
+
+  const handleHoverIn = (index: number) => {
+    setHoveredTab(index);
+  };
+
+  const handleHoverOut = () => {
+    setHoveredTab(null);
+  };
+
   return (
     <View style={styles.container}>
       {tabInformation.map((tabItem: any, index: number) => (
-        <TouchableOpacity
+        <Pressable
           key={index}
           style={[
             styles.tab,
             {
               flex: 1 / tabInformation.length,
-              backgroundColor: index === selectedTab ? BLUE : GREY_BLUE_50,
+              backgroundColor:
+                index === selectedTab
+                  ? BLUE
+                  : index === hoveredTab
+                  ? GREY_BLUE_30
+                  : GREY_BLUE_50,
               height: height,
               borderTopColor: index === selectedTab ? YELLOW : 'transparent',
             },
           ]}
           onPress={() => (setSelectedTab ? setSelectedTab(index) : {})}
+          onHoverIn={() => handleHoverIn(index)}
+          onHoverOut={handleHoverOut}
         >
           <Text
             style={{
@@ -37,7 +60,7 @@ const Tab = ({
           >
             {tabItem.name}
           </Text>
-        </TouchableOpacity>
+        </Pressable>
       ))}
     </View>
   );

package/components/tab/__snapshots__/Tab.test.tsx.snap

@@ -13,7 +13,9 @@ exports[`Running Test for Tab Check Tab Disabled 1`] = `
     accessible={true}
     collapsable={false}
     focusable={true}
+    onBlur={[Function]}
     onClick={[Function]}
+    onFocus={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
     onResponderRelease={[Function]}
@@ -21,18 +23,21 @@ exports[`Running Test for Tab Check Tab Disabled 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Object {
-        "alignItems": "center",
-        "backgroundColor": "#D3D6E1",
-        "borderBottomColor": "#202452",
-        "borderBottomWidth": 3,
-        "borderTopColor": "transparent",
-        "borderTopWidth": 4,
-        "flex": 0.2,
-        "height": 40,
-        "justifyContent": "center",
-        "opacity": 1,
-      }
+      Array [
+        Object {
+          "alignItems": "center",
+          "borderBottomColor": "#202452",
+          "borderBottomWidth": 3,
+          "borderTopWidth": 4,
+          "justifyContent": "center",
+        },
+        Object {
+          "backgroundColor": "#D3D6E1",
+          "borderTopColor": "transparent",
+          "flex": 0.2,
+          "height": 40,
+        },
+      ]
     }
   >
     <Text
@@ -51,7 +56,9 @@ exports[`Running Test for Tab Check Tab Disabled 1`] = `
     accessible={true}
     collapsable={false}
     focusable={true}
+    onBlur={[Function]}
     onClick={[Function]}
+    onFocus={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
     onResponderRelease={[Function]}
@@ -59,18 +66,21 @@ exports[`Running Test for Tab Check Tab Disabled 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Object {
-        "alignItems": "center",
-        "backgroundColor": "#202452",
-        "borderBottomColor": "#202452",
-        "borderBottomWidth": 3,
-        "borderTopColor": "#FAD614",
-        "borderTopWidth": 4,
-        "flex": 0.2,
-        "height": 40,
-        "justifyContent": "center",
-        "opacity": 1,
-      }
+      Array [
+        Object {
+          "alignItems": "center",
+          "borderBottomColor": "#202452",
+          "borderBottomWidth": 3,
+          "borderTopWidth": 4,
+          "justifyContent": "center",
+        },
+        Object {
+          "backgroundColor": "#202452",
+          "borderTopColor": "#FAD614",
+          "flex": 0.2,
+          "height": 40,
+        },
+      ]
     }
   >
     <Text
@@ -89,7 +99,9 @@ exports[`Running Test for Tab Check Tab Disabled 1`] = `
     accessible={true}
     collapsable={false}
     focusable={true}
+    onBlur={[Function]}
     onClick={[Function]}
+    onFocus={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
     onResponderRelease={[Function]}
@@ -97,18 +109,21 @@ exports[`Running Test for Tab Check Tab Disabled 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Object {
-        "alignItems": "center",
-        "backgroundColor": "#D3D6E1",
-        "borderBottomColor": "#202452",
-        "borderBottomWidth": 3,
-        "borderTopColor": "transparent",
-        "borderTopWidth": 4,
-        "flex": 0.2,
-        "height": 40,
-        "justifyContent": "center",
-        "opacity": 1,
-      }
+      Array [
+        Object {
+          "alignItems": "center",
+          "borderBottomColor": "#202452",
+          "borderBottomWidth": 3,
+          "borderTopWidth": 4,
+          "justifyContent": "center",
+        },
+        Object {
+          "backgroundColor": "#D3D6E1",
+          "borderTopColor": "transparent",
+          "flex": 0.2,
+          "height": 40,
+        },
+      ]
     }
   >
     <Text
@@ -127,7 +142,9 @@ exports[`Running Test for Tab Check Tab Disabled 1`] = `
     accessible={true}
     collapsable={false}
     focusable={true}
+    onBlur={[Function]}
     onClick={[Function]}
+    onFocus={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
     onResponderRelease={[Function]}
@@ -135,18 +152,21 @@ exports[`Running Test for Tab Check Tab Disabled 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Object {
-        "alignItems": "center",
-        "backgroundColor": "#D3D6E1",
-        "borderBottomColor": "#202452",
-        "borderBottomWidth": 3,
-        "borderTopColor": "transparent",
-        "borderTopWidth": 4,
-        "flex": 0.2,
-        "height": 40,
-        "justifyContent": "center",
-        "opacity": 1,
-      }
+      Array [
+        Object {
+          "alignItems": "center",
+          "borderBottomColor": "#202452",
+          "borderBottomWidth": 3,
+          "borderTopWidth": 4,
+          "justifyContent": "center",
+        },
+        Object {
+          "backgroundColor": "#D3D6E1",
+          "borderTopColor": "transparent",
+          "flex": 0.2,
+          "height": 40,
+        },
+      ]
     }
   >
     <Text
@@ -165,7 +185,9 @@ exports[`Running Test for Tab Check Tab Disabled 1`] = `
     accessible={true}
     collapsable={false}
     focusable={true}
+    onBlur={[Function]}
     onClick={[Function]}
+    onFocus={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
     onResponderRelease={[Function]}
@@ -173,18 +195,21 @@ exports[`Running Test for Tab Check Tab Disabled 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Object {
-        "alignItems": "center",
-        "backgroundColor": "#D3D6E1",
-        "borderBottomColor": "#202452",
-        "borderBottomWidth": 3,
-        "borderTopColor": "transparent",
-        "borderTopWidth": 4,
-        "flex": 0.2,
-        "height": 40,
-        "justifyContent": "center",
-        "opacity": 1,
-      }
+      Array [
+        Object {
+          "alignItems": "center",
+          "borderBottomColor": "#202452",
+          "borderBottomWidth": 3,
+          "borderTopWidth": 4,
+          "justifyContent": "center",
+        },
+        Object {
+          "backgroundColor": "#D3D6E1",
+          "borderTopColor": "transparent",
+          "flex": 0.2,
+          "height": 40,
+        },
+      ]
     }
   >
     <Text

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "etendo-ui-library",
-  "version": "1.0.77",
+  "version": "1.0.78",
   "private": false,
   "scripts": {
     "android": "react-native run-android",

package/styles/colors.ts

@@ -1,6 +1,8 @@
 export const BLUE = '#202452';
+export const BLUE_80 = '#303775';
 
 export const YELLOW = '#FAD614';
+export const YELLOW_50 = '#FFEB7A';
 export const YELLOW_30 = '#FEF7D0';
 
 export const GREY_BLUE = '#808695';
@@ -10,6 +12,9 @@ export const GREY_BLUE_10 = '#F2F5F9';
 
 export const PURPLE = '#7182FF';
 export const PURPLE_60 = '#564BC7';
+export const LIGHT_PURPLE_60 = '#EBECFA';
+
+
 export const PURPLE_50 = '#DDDFF6';
 export const PURPLE_10 = '#F5F5FC';