fln-espranza 0.0.26 → 0.0.27

package/components/EOption.tsx

@@ -12,32 +12,34 @@ import { Colors } from "../utils/Color";
 
 const ImageWidth = Dimensions.get("window").width / 2 - 18;
 const ContentWidth = Dimensions.get("window").width - 32;
-const ImageHeight = 120;
+const ImageHeight = 140;
 const MediaContainerStyle = "rounded-md overflow-hidden";
 
 interface RadioButtonProps extends TouchableOpacityProps {
   text?: string;
   isActive: boolean;
   imageSource?: string;
+  optionLabel: string;
   onPress?: () => void;
 }
 const EOption = ({
   isActive,
   text,
   imageSource,
+  optionLabel,
   onPress,
   ...props
 }: RadioButtonProps) => {
   return (
     <TouchableOpacity
       style={[
-        tw`flex flex-row justify-start items-center mt-1 px-4 py-3 border rounded-lg ${
+        tw`flex flex-row justify-start items-center mt-2 px-4 py-3 border rounded-lg ${
           imageSource ? "flex-col p-0 items-start" : ""
         }`,
         {
           borderColor: isActive ? Colors["secondary-base"] : Colors.border,
           backgroundColor: isActive ? Colors["secondary-light"] : Colors.white,
-          width: imageSource ? ImageWidth : ContentWidth,
+          width: imageSource ? ImageWidth - 10 : ContentWidth,
         },
       ]}
       onPress={() => {
@@ -51,22 +53,31 @@ const EOption = ({
           style={[
             tw`${MediaContainerStyle}`,
             {
-              height: ImageHeight,
-              width: ImageWidth - 2,
-              backgroundColor: Colors["secondary-base"],
+              height: ImageHeight - 20,
+              width: ImageWidth - 12,
+              backgroundColor: Colors.white
             },
           ]}
         >
+          <View
+            style={[
+              tw`h-8 w-8 bg-slate-300 rounded-full justify-center items-center m-2 absolute z-10`,
+            ]}
+          >
+          <EText size={"base"} style={tw`font-normal`}>
+            {optionLabel}
+          </EText>
+          </View>
           <Image
             style={[
-              tw`h-full w-full`,
+              tw`w-full mt-4`,
               {
                 opacity: isActive ? 0.5 : 1,
               },
+              {height: ImageHeight - 40}
             ]}
-            source={{
-              uri: imageSource ,
-            }}
+            source={{uri: imageSource}}
+            resizeMode="contain"
           />
         </View>
       )}

package/components/ETimeLineCard.tsx

@@ -1,4 +1,3 @@
-import { EIconAdd } from 'fln-espranza';
 import React from 'react'
 import { Dimensions, TouchableOpacity, View } from 'react-native'
 import { ChevronRightIcon } from 'react-native-heroicons/solid';
@@ -7,7 +6,8 @@ import { Colors } from '../utils/Color';
 import EBadge from './EBadge'
 import EButton from './EButton';
 import EDateAndTimeCard from './EDateAndTimeCard'
-import EText from './EText'
+import EText from './EText';
+import EIconAdd from './icons/EIconAdd';
 
 interface IProps {
   title: string;
@@ -16,19 +16,21 @@ interface IProps {
   anotherButton?: boolean;
   onPress?: () => void;
   onAnotherButtonPress?: () => void;
+  disabled: boolean;
 }
 
-export default function ETimeLineCard({ title, description, completed, anotherButton, onPress, onAnotherButtonPress }: IProps) {
+export default function ETimeLineCard({ title, description, completed, anotherButton, disabled, onPress, onAnotherButtonPress }: IProps) {
   return (
     <TouchableOpacity
-      onPress={() =>  onPress && onPress()}
+      onPress={() => onPress && onPress()}
       style={[
         tw` rounded-lg p-4 mb-3 w-full border border}`,
         {
-          backgroundColor: completed ? Colors['primary-light']  : Colors['white'],
+          backgroundColor: completed ? Colors['primary-light'] : Colors['white'],
           borderColor: completed ? Colors['primary-base'] : Colors['border'],
         }
       ]}
+      disabled={disabled}
     >
 
       <View style={tw`flex-row justify-between `}>
@@ -36,12 +38,12 @@ export default function ETimeLineCard({ title, description, completed, anotherBu
           <EText size="lg" style={[tw`font-bold`, { color: Colors['text-primary'] }]}>
             {title}
           </EText>
-          <EText size='sm' style={[tw`font-normal mt-1`, {color: Colors['text-body']}]}>
+          <EText size='sm' style={[tw`font-normal mt-1`, { color: Colors['text-body'] }]}>
             {description}
           </EText>
         </View>
         <View style={tw`ml-4`}>
-          <ChevronRightIcon style={[tw``,{ color: Colors['text-body']}]} size={16} />
+          <ChevronRightIcon style={[tw``, { color: Colors['text-body'] }]} size={16} />
         </View>
       </View>
 
@@ -55,13 +57,13 @@ export default function ETimeLineCard({ title, description, completed, anotherBu
         {
           anotherButton ? (
             <TouchableOpacity style={tw`flex-row`} onPress={onAnotherButtonPress}>
-              <EText size="sm" style={[tw`ml-2 font-semibold`, {color: Colors['primary-base']}]}>
+              <EText size="sm" style={[tw`ml-2 font-semibold`, { color: Colors['primary-base'] }]}>
                 Another Assessment
               </EText>
-              <EIconAdd size={20} style={[tw`ml-2`, {color: Colors['primary-base']}]}/>
+              <EIconAdd size={20} style={[tw`ml-2`, { color: Colors['primary-base'] }]} />
             </TouchableOpacity>
-            
-            ) : <></>
+
+          ) : <></>
         }
       </View>
     </TouchableOpacity>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fln-espranza",
-  "version": "0.0.26",
+  "version": "0.0.27",
   "description": "All components used inside FLN Project of Espranza Innovations",
   "main": "index.ts",
   "scripts": {