Update Card component to allow overriding styles

List of changes: - Update Card component to allow overriding styles for all views - Update StoriesTest snapshot to reflect Card component changes
codeandrobots · Feb 13, 2019 · 83086cd · 83086cd
1 parent 9b74850
commit 83086cd
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 18 deletions.
diff --git a/App/Components/Card/index.js b/App/Components/Card/index.js
@@ -15,26 +15,26 @@ export default class Card extends Component {
     onPress: PropTypes.func
   }
   render () {
-    const {image, title, text, button, onPress = () => {}} = this.props
+    const {image, title, text, button, onPress = () => {}, styles = {}} = this.props
     return (
       <View>
         {image && (
-          <View style={s.imageView}>
+          <View style={[s.imageView, styles.imageView]}>
             <Image source={image} />
           </View>
         )}
         {title && (
-          <View style={[s.titleView]}>
+          <View style={[s.titleView, styles.titleView]}>
             <Text style={s.title}>{title}</Text>
           </View>
         )}
         {text && (
-          <View style={[s.textView]}>
+          <View style={[s.textView, styles.textView]}>
             <Text style={s.text}>{text}</Text>
           </View>
         )}
         {button && (
-          <Button containerStyle={s.centered} text={button} onPress={onPress} />
+          <Button containerStyle={[s.centered, styles.buttonView]} text={button} onPress={onPress} />
         )}
       </View>
     )

diff --git a/Tests/Components/__snapshots__/StoriesTest.js.snap b/Tests/Components/__snapshots__/StoriesTest.js.snap
@@ -369,13 +369,16 @@ exports[`Storyshots Card Hello 1`] = `
 <View>
   <View
     style={
-      Object {
-        "alignItems": "center",
-        "display": "flex",
-        "justifyContent": "center",
-        "marginVertical": 16,
-        "width": "100%",
-      }
+      Array [
+        Object {
+          "alignItems": "center",
+          "display": "flex",
+          "justifyContent": "center",
+          "marginVertical": 16,
+          "width": "100%",
+        },
+        undefined,
+      ]
     }
   >
     <Image
@@ -396,6 +399,7 @@ exports[`Storyshots Card Hello 1`] = `
           "marginTop": 24,
           "width": "100%",
         },
+        undefined,
       ]
     }
   >
@@ -425,6 +429,7 @@ exports[`Storyshots Card Hello 1`] = `
           "marginTop": 8,
           "width": "100%",
         },
+        undefined,
       ]
     }
   >
@@ -447,12 +452,15 @@ exports[`Storyshots Card Hello 1`] = `
   </View>
   <View
     style={
-      Object {
-        "alignItems": "center",
-        "display": "flex",
-        "justifyContent": "center",
-        "width": "100%",
-      }
+      Array [
+        Object {
+          "alignItems": "center",
+          "display": "flex",
+          "justifyContent": "center",
+          "width": "100%",
+        },
+        undefined,
+      ]
     }
   >
     <View