Merge pull request #41 from loadsmart/feature/component-update

Feature/component update

src/components/Buttons/PrimaryButton.tsx

@@ -13,7 +13,7 @@ export default class PrimaryButton extends PureComponent<ButtonProps> {
     return (
       <ThemeContext.Consumer>
         {theme => {
-          const styles = themedStyles(theme)
+          const styles = themedStyles(theme, this.props.style)
           return (
             <TouchableOpacity onPress={this.onPress.bind(this)}>
               <View style={[styles.wrapper, this.props.style]}>
@@ -40,7 +40,9 @@ export default class PrimaryButton extends PureComponent<ButtonProps> {
   }
 
   private renderLoadingState = (styles: any) => {
-    return <ActivityIndicator color={Colors.White} style={styles.activityIndicator} />
+    return (
+      <ActivityIndicator color={styles.activityIndicator.color} style={styles.activityIndicator} />
+    )
   }
 
   private onPress = () => {
@@ -51,7 +53,7 @@ export default class PrimaryButton extends PureComponent<ButtonProps> {
   }
 }
 
-const themedStyles = (theme: Partial<Theme>) => {
+const themedStyles = (theme: Partial<Theme>, style: any) => {
   return StyleSheet.create({
     wrapper: {
       flexDirection: 'row',
@@ -66,14 +68,16 @@ const themedStyles = (theme: Partial<Theme>) => {
       marginRight: 8,
     },
     text: {
-      color: 'white',
-      fontFamily: Fonts.SharpSansExtrabold,
-      fontSize: 15,
       alignSelf: 'center',
+      fontFamily: Fonts.SharpSansExtrabold,
+      color: style && style.color ? style.color : Colors.White,
+      fontSize: style && style.fontSize ? style.fontSize : 15,
+      fontWeight: style && style.fontWeight ? style.fontWeight : 'normal',
     },
     activityIndicator: {
       alignSelf: 'center',
       position: 'absolute',
+      color: style && style.color ? style.color : Colors.White,
     },
   })
 }

src/components/Buttons/__tests__/PrimaryButton.test.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
-import { ActivityIndicator, Text, TouchableOpacity, Image } from 'react-native'
+import { ActivityIndicator, Text, TouchableOpacity, Image, ViewStyle } from 'react-native'
 import renderer from 'react-test-renderer'
 import PrimaryButton from '../PrimaryButton'
 import { ButtonDisplayState, ButtonProps } from '../ButtonProps'
-import { Images } from '../../../res'
+import { Images, Colors } from '../../../res'
 
 describe('PrimaryButton', () => {
   describe('when state is normal', () => {
@@ -16,6 +16,7 @@ describe('PrimaryButton', () => {
         title: 'accept',
         displayState: ButtonDisplayState.Normal,
         onPress: onPressCallback,
+        style: undefined,
       }
       testRenderer = renderer.create(<PrimaryButton {...props} />)
     })
@@ -43,6 +44,28 @@ describe('PrimaryButton', () => {
     it('has a valid snapshot', () => {
       expect(testRenderer.toJSON()).toMatchSnapshot()
     })
+
+    it('renders button text with custom style', () => {
+      const style = {
+        color: Colors.White,
+        fontSize: 12,
+        fontWeight: 'bold',
+      }
+      const props = {
+        icon: Images.Warning,
+        title: 'accept',
+        displayState: ButtonDisplayState.Normal,
+        onPress: onPressCallback,
+        style: style,
+      } as ButtonProps
+
+      testRenderer = renderer.create(<PrimaryButton {...props} />)
+      const text = testRenderer.root.findByType(Text)
+
+      expect(text.props.style.color).toBe(style.color)
+      expect(text.props.style.fontSize).toBe(style.fontSize)
+      expect(text.props.style.fontWeight).toBe(style.fontWeight)
+    })
   })
 
   describe('when state is loading', () => {
@@ -79,6 +102,23 @@ describe('PrimaryButton', () => {
     it('has a valid snapshot', () => {
       expect(testRenderer.toJSON()).toMatchSnapshot()
     })
+
+    it('renders activity indicator with custom spinner color', () => {
+      const style = {
+        color: Colors.DarkGrey,
+      }
+      const props = {
+        title: 'accept',
+        displayState: ButtonDisplayState.Loading,
+        onPress: onPressCallback,
+        style: style,
+      } as ButtonProps
+
+      testRenderer = renderer.create(<PrimaryButton {...props} />)
+      const activityIndicator = testRenderer.root.findByType(ActivityIndicator)
+
+      expect(activityIndicator.props.style.color).toBe(style.color)
+    })
   })
 
   describe('when state is disabled', () => {

src/components/Buttons/__tests__/__snapshots__/PrimaryButton.test.tsx.snap

@@ -36,9 +36,10 @@ exports[`PrimaryButton when state is disabled has a valid snapshot 1`] = `
       style={
         Object {
           "alignSelf": "center",
-          "color": "white",
+          "color": "#fff",
           "fontFamily": "SharpSans-Extrabold",
           "fontSize": 15,
+          "fontWeight": "normal",
         }
       }
     >
@@ -88,6 +89,7 @@ exports[`PrimaryButton when state is loading has a valid snapshot 1`] = `
       style={
         Object {
           "alignSelf": "center",
+          "color": "#fff",
           "position": "absolute",
         }
       }
@@ -147,9 +149,10 @@ exports[`PrimaryButton when state is normal has a valid snapshot 1`] = `
       style={
         Object {
           "alignSelf": "center",
-          "color": "white",
+          "color": "#fff",
           "fontFamily": "SharpSans-Extrabold",
           "fontSize": 15,
+          "fontWeight": "normal",
         }
       }
     >

src/components/Dialogs/__tests__/Dialog.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Image, Text } from 'react-native'
+import { Image, Text, ButtonProps } from 'react-native'
 import renderer from 'react-test-renderer'
 import { Dialog, DialogProps } from '../Dialog'
 import DialogBox from '../DialogBox'
@@ -51,10 +51,13 @@ describe('Dialog', () => {
   })
 
   it('renders buttons if passed as prop', () => {
+    const buttonProps: any = {
+      style: { color: 'white' },
+    }
     const props: DialogProps = {
       buttons: (
         <>
-          <PrimaryButton title={'Confirm'} />
+          <PrimaryButton title={'Confirm'} {...buttonProps} />
           <SecondaryButton title={'Cancel'} />
         </>
       ),

src/components/TextInputs/NumberInput.tsx

@@ -45,7 +45,7 @@ export default class NumberInput extends PureComponent<Props, State> {
               keyboardType={Platform.OS === 'ios' ? 'number-pad' : 'default'}
               maxLength={1}
               selectionColor={Colors.Transparent}
-              style={[styles.container, borderStyle]}
+              style={[styles.container, borderStyle, this.props.style]}
               onChangeText={this.onChangeText}
               onBlur={this.onBlur}
               onFocus={this.onFocus}

src/components/TextInputs/__tests__/__snapshots__/NumberInput.test.tsx.snap

@@ -27,6 +27,7 @@ exports[`NumberInput render renders with gray border when blurred 1`] = `
       Object {
         "borderColor": "#c4ccd6",
       },
+      undefined,
     ]
   }
   underlineColorAndroid="transparent"
@@ -60,6 +61,7 @@ exports[`NumberInput render renders with green border when focused 1`] = `
       Object {
         "borderColor": "#14d64d",
       },
+      undefined,
     ]
   }
   underlineColorAndroid="transparent"

src/components/TextInputs/__tests__/__snapshots__/PinCodeTextInput.test.tsx.snap

@@ -34,6 +34,7 @@ exports[`PinCodeTextInput render renders all number inputs with a digit if auth
         Object {
           "borderColor": "#c4ccd6",
         },
+        undefined,
       ]
     }
     underlineColorAndroid="transparent"
@@ -65,6 +66,7 @@ exports[`PinCodeTextInput render renders all number inputs with a digit if auth
         Object {
           "borderColor": "#c4ccd6",
         },
+        undefined,
       ]
     }
     underlineColorAndroid="transparent"
@@ -96,6 +98,7 @@ exports[`PinCodeTextInput render renders all number inputs with a digit if auth
         Object {
           "borderColor": "#c4ccd6",
         },
+        undefined,
       ]
     }
     underlineColorAndroid="transparent"
@@ -127,6 +130,7 @@ exports[`PinCodeTextInput render renders all number inputs with a digit if auth
         Object {
           "borderColor": "#c4ccd6",
         },
+        undefined,
       ]
     }
     underlineColorAndroid="transparent"
@@ -158,6 +162,7 @@ exports[`PinCodeTextInput render renders all number inputs with a digit if auth
         Object {
           "borderColor": "#c4ccd6",
         },
+        undefined,
       ]
     }
     underlineColorAndroid="transparent"
@@ -189,6 +194,7 @@ exports[`PinCodeTextInput render renders all number inputs with a digit if auth
         Object {
           "borderColor": "#c4ccd6",
         },
+        undefined,
       ]
     }
     underlineColorAndroid="transparent"
@@ -231,6 +237,7 @@ exports[`PinCodeTextInput render renders all number inputs with a empty value if
         Object {
           "borderColor": "#c4ccd6",
         },
+        undefined,
       ]
     }
     underlineColorAndroid="transparent"
@@ -262,6 +269,7 @@ exports[`PinCodeTextInput render renders all number inputs with a empty value if
         Object {
           "borderColor": "#c4ccd6",
         },
+        undefined,
       ]
     }
     underlineColorAndroid="transparent"
@@ -293,6 +301,7 @@ exports[`PinCodeTextInput render renders all number inputs with a empty value if
         Object {
           "borderColor": "#c4ccd6",
         },
+        undefined,
       ]
     }
     underlineColorAndroid="transparent"
@@ -324,6 +333,7 @@ exports[`PinCodeTextInput render renders all number inputs with a empty value if
         Object {
           "borderColor": "#c4ccd6",
         },
+        undefined,
       ]
     }
     underlineColorAndroid="transparent"
@@ -355,6 +365,7 @@ exports[`PinCodeTextInput render renders all number inputs with a empty value if
         Object {
           "borderColor": "#c4ccd6",
         },
+        undefined,
       ]
     }
     underlineColorAndroid="transparent"
@@ -386,6 +397,7 @@ exports[`PinCodeTextInput render renders all number inputs with a empty value if
         Object {
           "borderColor": "#c4ccd6",
         },
+        undefined,
       ]
     }
     underlineColorAndroid="transparent"