@tactics/toddle-styleguide 1.2.3 → 1.2.5

package/src/components/atoms/text-input/text-input.component.d.ts

@@ -1,9 +1,8 @@
+import { TextInputProps as NativeTextInputProps } from 'react-native';
 import { KeyBoardTypes } from '../../../types/keyboard-types.enum';
-type TextInputProps = {
-    placeholder?: string;
-    onchangeText?: (text: string) => void;
+interface TextInputProps extends NativeTextInputProps {
     keyboardType: KeyBoardTypes;
     border?: boolean;
-};
-declare const TextInput: ({ placeholder, onchangeText, keyboardType, border, }: TextInputProps) => JSX.Element;
+}
+declare const TextInput: ({ keyboardType, border, ...props }: TextInputProps) => JSX.Element;
 export { TextInput as TextInput };

package/src/components/atoms/text-input/text-input.component.tsx

@@ -1,35 +1,31 @@
 import * as React from 'react';
 import {useContext} from 'react';
 
-import {View, TextInput as NativeTextInput} from 'react-native';
+import {
+  View,
+  TextInput as NativeTextInput,
+  TextInputProps as NativeTextInputProps,
+} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './text-input.styles';
 import {KeyBoardTypes} from '../../../types/keyboard-types.enum';
 
-type TextInputProps = {
-  placeholder?: string;
-  onchangeText?: (text: string) => void;
+interface TextInputProps extends NativeTextInputProps {
   keyboardType: KeyBoardTypes;
   border?: boolean;
-};
+}
 
-const TextInput = ({
-  placeholder,
-  onchangeText,
-  keyboardType,
-  border,
-}: TextInputProps) => {
+const TextInput = ({keyboardType, border, ...props}: TextInputProps) => {
   const context = useContext(ThemeCtx);
   const styles = Stylesheet(context, border);
 
   return (
     <View style={styles.container}>
       <NativeTextInput
-        placeholder={placeholder}
         placeholderTextColor={context.colors.ui.grey}
         style={styles.input}
-        onChangeText={onchangeText}
         keyboardType={keyboardType}
+        {...props}
       />
     </View>
   );

package/src/components/atoms/text-input/text-input.preview.tsx

@@ -7,33 +7,33 @@ export const TextInputPreview = ({} = {}) => {
   return (
     <SafeAreaView style={{flex: 1, justifyContent: 'space-around'}}>
       <TextInput
-        onchangeText={(text: string) =>
+        onChangeText={(text: string) =>
           console.log('text is changed to: ' + text)
         }
         keyboardType={KeyBoardTypes.DECIMAL_PAD}
       />
       <TextInput
         placeholder={'placeholder text'}
-        onchangeText={(text: string) =>
+        onChangeText={(text: string) =>
           console.log('text is changed to: ' + text)
         }
         keyboardType={KeyBoardTypes.DEFAULT}
       />
       <TextInput
-        onchangeText={(text: string) =>
+        onChangeText={(text: string) =>
           console.log('text is changed to: ' + text)
         }
         keyboardType={KeyBoardTypes.EMAIL_ADDRESS}
       />
       <TextInput
         keyboardType={KeyBoardTypes.DEFAULT}
-        onchangeText={(text: string) => console.log('text: ' + text)}
+        onChangeText={(text: string) => console.log('text: ' + text)}
         placeholder={'with border'}
         border={true}
       />
       <TextInput
         keyboardType={KeyBoardTypes.DEFAULT}
-        onchangeText={(text: string) => console.log('text: ' + text)}
+        onChangeText={(text: string) => console.log('text: ' + text)}
         border={true}
       />
     </SafeAreaView>

package/src/components/atoms/text-input/text-input.test.js

@@ -10,7 +10,7 @@ describe('test input texts', () => {
         <TextInput
           keyboardType={KeyBoardTypes.DEFAULT}
           placeholder="dummy placeholder"
-          onchangeText={() => console.log('text changed')}
+          onChangeText={() => console.log('text changed')}
         />
       )
       .toJSON();
@@ -22,7 +22,7 @@ describe('test input texts', () => {
       .create(
         <TextInput
           keyboardType={KeyBoardTypes.EMAIL_ADDRESS}
-          onchangeText={() => console.log('text changed')}
+          onChangeText={() => console.log('text changed')}
         />
       )
       .toJSON();
@@ -34,7 +34,7 @@ describe('test input texts', () => {
       .create(
         <TextInput
           keyboardType={KeyBoardTypes.EMAIL_ADDRESS}
-          onchangeText={() => console.log('text changed')}
+          onChangeText={() => console.log('text changed')}
           border={true}
         />
       )
@@ -47,7 +47,7 @@ describe('test input texts', () => {
       .create(
         <TextInput
           keyboardType={KeyBoardTypes.EMAIL_ADDRESS}
-          onchangeText={() => console.log('text changed')}
+          onChangeText={() => console.log('text changed')}
           border={true}
           placeholder={'Text input field with a border'}
         />

package/src/components/molecules/avatar/__snapshots__/avatar.test.js.snap

@@ -2,88 +2,96 @@
 
 exports[`test avatar given the isBlocked is true, and provide image source is empty return a red colored avatar  1`] = `
 <View
-  style={
-    [
-      {
-        "alignItems": "center",
-        "backgroundColor": "#647ACB",
-        "justifyContent": "center",
-        "overflow": "hidden",
-      },
-      {
-        "borderRadius": 20,
-        "height": 40,
-        "width": 40,
-      },
-      false,
-      false,
-    ]
-  }
+  style={null}
 >
-  <Text
+  <View
     style={
       [
-        [
-          {
-            "fontFamily": "SourceSansProBold",
-            "fontSize": 18,
-            "lineHeight": 22.6,
-          },
-        ],
         {
-          "color": "#FFFFFF",
-          "textAlign": "center",
-          "width": "100%",
+          "alignItems": "center",
+          "backgroundColor": "#647ACB",
+          "justifyContent": "center",
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 20,
+          "height": 40,
+          "width": 40,
         },
-        undefined,
+        false,
+        false,
       ]
     }
   >
-    JD
-  </Text>
+    <Text
+      style={
+        [
+          [
+            {
+              "fontFamily": "SourceSansProBold",
+              "fontSize": 18,
+              "lineHeight": 22.6,
+            },
+          ],
+          {
+            "color": "#FFFFFF",
+            "textAlign": "center",
+            "width": "100%",
+          },
+          undefined,
+        ]
+      }
+    >
+      JD
+    </Text>
+  </View>
 </View>
 `;
 
 exports[`test avatar renders correctly when provided image source is empty 1`] = `
 <View
-  style={
-    [
-      {
-        "alignItems": "center",
-        "backgroundColor": "#647ACB",
-        "justifyContent": "center",
-        "overflow": "hidden",
-      },
-      {
-        "borderRadius": 20,
-        "height": 40,
-        "width": 40,
-      },
-      false,
-      false,
-    ]
-  }
+  style={null}
 >
-  <Text
+  <View
     style={
       [
-        [
-          {
-            "fontFamily": "SourceSansProBold",
-            "fontSize": 18,
-            "lineHeight": 22.6,
-          },
-        ],
         {
-          "color": "#FFFFFF",
-          "textAlign": "center",
-          "width": "100%",
+          "alignItems": "center",
+          "backgroundColor": "#647ACB",
+          "justifyContent": "center",
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 20,
+          "height": 40,
+          "width": 40,
         },
-        undefined,
+        false,
+        false,
       ]
     }
   >
-    JD
-  </Text>
+    <Text
+      style={
+        [
+          [
+            {
+              "fontFamily": "SourceSansProBold",
+              "fontSize": 18,
+              "lineHeight": 22.6,
+            },
+          ],
+          {
+            "color": "#FFFFFF",
+            "textAlign": "center",
+            "width": "100%",
+          },
+          undefined,
+        ]
+      }
+    >
+      JD
+    </Text>
+  </View>
 </View>
 `;

package/src/components/molecules/avatar/avatar.component.d.ts

@@ -7,6 +7,7 @@ type AvatarProps = {
     isBlocked?: boolean;
     isActive?: boolean;
     isLoading?: boolean;
+    hasShadow?: boolean;
 };
-declare const Avatar: ({ source, size, isBlocked, isActive, isLoading, }: AvatarProps) => JSX.Element;
+declare const Avatar: ({ source, size, isBlocked, isActive, isLoading, hasShadow, }: AvatarProps) => JSX.Element;
 export { Avatar as Avatar };

package/src/components/molecules/avatar/avatar.component.tsx

@@ -21,6 +21,7 @@ type AvatarProps = {
   isBlocked?: boolean;
   isActive?: boolean;
   isLoading?: boolean;
+  hasShadow?: boolean;
 };
 
 const Avatar = ({
@@ -29,6 +30,7 @@ const Avatar = ({
   isBlocked,
   isActive = true,
   isLoading,
+  hasShadow,
 }: AvatarProps) => {
   const Context = useContext(ThemeCtx);
   const styles = Stylesheet(Context, size, isBlocked, isActive);
@@ -69,21 +71,30 @@ const Avatar = ({
   };
 
   return source instanceof Initials ? (
-    <View style={styles.container}>
-      {isLoading ? (
-        <ActivityIndicator size={'small'} color={Context.colors.ui.white} />
-      ) : (
-        renderText(size)
-      )}
+    <View style={hasShadow ? styles.shadow : null}>
+      <View style={styles.container}>
+        {isLoading ? (
+          <ActivityIndicator size={'small'} color={Context.colors.ui.white} />
+        ) : (
+          renderText(size)
+        )}
+      </View>
     </View>
   ) : isLoading ? (
-    <View style={styles.container}>
-      <ActivityIndicator size={'small'} color={Context.colors.ui.white} />
+    <View style={hasShadow ? styles.shadow : null}>
+      <View style={styles.container}>
+        {!isBlocked ? <MainGradient isActive={isActive} /> : null}
+        <View style={{zIndex: 100, position: 'absolute'}}>
+          <ActivityIndicator size={'small'} color={Context.colors.ui.white} />
+        </View>
+      </View>
     </View>
   ) : (
-    <View style={styles.container}>
-      {!isBlocked ? <MainGradient isActive={isActive} /> : null}
-      <Image source={source} style={styles.image as ImageStyle} />
+    <View style={hasShadow ? styles.shadow : null}>
+      <View style={styles.container}>
+        {!isBlocked ? <MainGradient isActive={isActive} /> : null}
+        <Image source={source} style={styles.image as ImageStyle} />
+      </View>
     </View>
   );
 };

package/src/components/molecules/avatar/avatar.preview.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import {ScrollView} from 'react-native';
 
 const {Avatar} = require('./avatar.component');
 const {Size} = require('../../../types/size.enum');
@@ -7,49 +8,62 @@ const {View} = require('react-native');
 
 export const AvatarPreview = ({}: {}) => {
   return (
-    <View
-      style={{
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: 'white',
-      }}
-    >
-      <Avatar
-        size={Size.LARGE}
-        source={require('./../../../../assets/components/avatar/baby.png')}
-      />
-      <Avatar
-        size={Size.MEDIUM}
-        source={require('./../../../../assets/components/avatar/baby.png')}
-      />
-      <Avatar
-        size={Size.SMALL}
-        source={require('./../../../../assets/components/avatar/baby.png')}
-      />
-      <Avatar size={Size.LARGE} source={Initials.for('John', 'Doe')} />
-      <Avatar
-        size={Size.MEDIUM}
-        source={Initials.for('John', 'Doe')}
-        isBlocked={true}
-      />
-      <Avatar size={Size.SMALL} source={Initials.for('John', 'Doe')} />
-      <Avatar
-        size={Size.LARGE}
-        source={require('./../../../../assets/components/avatar/baby.png')}
-        isActive={false}
-      />
-      <Avatar
-        size={Size.MEDIUM}
-        source={Initials.for('John', 'Doe')}
-        isActive={false}
-      />
-      <Avatar
-        size={Size.SMALL}
-        source={Initials.for('John', 'Doe')}
-        isBlocked={true}
-        isActive={false}
-      />
-    </View>
+    <ScrollView>
+      <View
+        style={{
+          flex: 1,
+          alignItems: 'center',
+          backgroundColor: 'white',
+          gap: 16,
+        }}
+      >
+        <Avatar
+          size={Size.LARGE}
+          source={require('./../../../../assets/components/avatar/baby.png')}
+          hasShadow={true}
+          isLoading={true}
+        />
+        <Avatar
+          size={Size.MEDIUM}
+          source={require('./../../../../assets/components/avatar/baby.png')}
+          hasShadow={true}
+        />
+        <Avatar
+          size={Size.SMALL}
+          source={require('./../../../../assets/components/avatar/baby.png')}
+        />
+        <Avatar
+          size={Size.LARGE}
+          source={Initials.for('John', 'Doe')}
+          hasShadow={true}
+        />
+        <Avatar
+          size={Size.MEDIUM}
+          source={Initials.for('John', 'Doe')}
+          isBlocked={true}
+          hasShadow={true}
+        />
+        <Avatar size={Size.SMALL} source={Initials.for('John', 'Doe')} />
+        <Avatar
+          size={Size.LARGE}
+          source={require('./../../../../assets/components/avatar/baby.png')}
+          isActive={false}
+          hasShadow={true}
+        />
+        <Avatar
+          size={Size.MEDIUM}
+          source={Initials.for('John', 'Doe')}
+          isActive={false}
+          hasShadow={true}
+        />
+        <Avatar
+          size={Size.SMALL}
+          source={Initials.for('John', 'Doe')}
+          isBlocked={true}
+          isActive={false}
+          hasShadow={true}
+        />
+      </View>
+    </ScrollView>
   );
 };

package/src/components/molecules/avatar/avatar.styles.d.ts

@@ -1,5 +1,5 @@
 export function Stylesheet(
-  Context: any,
+  context: any,
   size: any,
   isBlocked: any,
   isActive: any
@@ -26,24 +26,63 @@ export function Stylesheet(
             alignItems?: undefined;
           }
       )[];
+      shadow: (
+        | {
+            backgroundColor: string;
+            shadowColor?: undefined;
+            shadowOpacity?: undefined;
+            shadowRadius?: undefined;
+            shadowOffset?: undefined;
+            elevation?: undefined;
+            width?: undefined;
+            height?: undefined;
+            borderRadius?: undefined;
+          }
+        | {
+            shadowColor: any;
+            shadowOpacity: number;
+            shadowRadius: number;
+            shadowOffset: {
+              width: number;
+              height: number;
+            };
+            backgroundColor?: undefined;
+            elevation?: undefined;
+            width?: undefined;
+            height?: undefined;
+            borderRadius?: undefined;
+          }
+        | {
+            elevation: number;
+            shadowColor: any;
+            backgroundColor?: undefined;
+            shadowOpacity?: undefined;
+            shadowRadius?: undefined;
+            shadowOffset?: undefined;
+            width?: undefined;
+            height?: undefined;
+            borderRadius?: undefined;
+          }
+        | {
+            width: number;
+            height: number;
+            borderRadius: number;
+            backgroundColor?: undefined;
+            shadowColor?: undefined;
+            shadowOpacity?: undefined;
+            shadowRadius?: undefined;
+            shadowOffset?: undefined;
+            elevation?: undefined;
+          }
+      )[];
       image: {
         position: string;
         width: string;
         height: string;
         borderRadius: number;
       }[];
-      text: (
-        | {
-            color: any;
-            textTransform: string;
-          }
-        | {
-            fontFamily: string;
-            fontSize: number;
-            lineHeight: number;
-            color?: undefined;
-            textTransform?: undefined;
-          }
-      )[];
+      text: {
+        textTransform: 'uppercase';
+      };
     }>;
-import {StyleSheet} from 'react-native';
+import {StyleSheet} from 'react-native/Libraries/StyleSheet/StyleSheet';

package/src/components/molecules/avatar/avatar.styles.js

@@ -1,16 +1,16 @@
-import {StyleSheet} from 'react-native';
+import {StyleSheet, Platform} from 'react-native';
 import {Size} from '../../../types/size.enum';
 
-export const Stylesheet = (Context, size, isBlocked, isActive) =>
+export const Stylesheet = (context, size, isBlocked, isActive) =>
   StyleSheet.create({
     container: [
       {
         overflow: 'hidden',
         backgroundColor: isBlocked
-          ? Context.colors.ui.error.default
+          ? context.colors.ui.error.default
           : isActive
-          ? Context.colors.main['5']
-          : Context.colors.ui.lightgrey,
+          ? context.colors.main['5']
+          : context.colors.ui.lightgrey,
         justifyContent: 'center',
         alignItems: 'center',
       },
@@ -30,6 +30,34 @@ export const Stylesheet = (Context, size, isBlocked, isActive) =>
         borderRadius: 120 / 2,
       },
     ],
+    shadow: [
+      {backgroundColor: 'white'},
+      Platform.OS === 'ios' && {
+        shadowColor: context.colors.ui.black,
+        shadowOpacity: 0.25,
+        shadowRadius: 4,
+        shadowOffset: {width: 0, height: 4},
+      },
+      Platform.OS === 'android' && {
+        elevation: 6,
+        shadowColor: context.colors.ui.black,
+      },
+      size === Size.SMALL && {
+        width: 40,
+        height: 40,
+        borderRadius: 40 / 2,
+      },
+      size === Size.MEDIUM && {
+        width: 72,
+        height: 72,
+        borderRadius: 72 / 2,
+      },
+      size === Size.LARGE && {
+        width: 120,
+        height: 120,
+        borderRadius: 120 / 2,
+      },
+    ],
     image: [
       {
         position: 'absolute',