added card to readme

Author: dabit3

README.md

@@ -81,4 +81,17 @@
 | iconStyle | none | object | extra styling for icon component ([React Native Vector Icons](https://github.com/oblador/react-native-vector-icons)) |
 | style | none | object | button styling |
 | iconColor | white | string | icon color |
-| title | none | string | title if made into a button |
+| title | none | string | title if made into a button |
+
+## Card
+
+![Card Component](http://i.imgur.com/7kiWw5I.png)
+
+```
+<Card
+  title='CARD WITH DIVIDER'>
+  {
+    users.map((u, i) => {}
+  }
+</Card>
+```

src/about/About.js

@@ -46,9 +46,8 @@ class About extends Component {
           <Text style={styles.heading}>Components</Text>
         </View>
         <View style={styles.container}>
-          <Card>
-            <Text style={styles.cardTitle}>CARD WITH DIVIDER</Text>
-            <Divider style={styles.divider} />
+          <Card
+            title='CARD WITH DIVIDER'>
             {
               users.map((u, i) => {
                 return (
@@ -63,18 +62,16 @@ class About extends Component {
               })
             }
           </Card>
-          <Card containerStyle={{marginTop: 15}}>
-            <Text style={styles.cardTitle}>FONTS</Text>
-            <Divider style={styles.divider} />
+          <Card containerStyle={{marginTop: 15}} title='FONTS'>
             <Text style={styles.fonts} h1>h1 Heading</Text>
             <Text style={styles.fonts} h2>h2 Heading</Text>
             <Text style={styles.fonts} h3>h3 Heading</Text>
             <Text style={styles.fonts} h4>h4 Heading</Text>
             <Text style={styles.fonts} >Normal Text</Text>
           </Card>
-          <Card containerStyle={{marginTop: 15}}>
-            <Text style={styles.cardTitle}>Social Icons</Text>
-            <Divider style={styles.divider} />
+          <Card
+            title='SOCIAL ICONS'
+            containerStyle={{marginTop: 15}}>
             <View style={styles.social}>
               <SocialIcon
                 type='facebook'
@@ -93,9 +90,9 @@ class About extends Component {
               />
             </View>
           </Card>
-          <Card containerStyle={{marginTop: 15}}>
-            <Text style={styles.cardTitle}>Social Buttons</Text>
-            <Divider style={styles.divider} />
+          <Card
+            containerStyle={{marginTop: 15}}
+            title='SOCIAL BUTTONS'>
             <View style={styles.socialButtons}>
               <SocialIcon
                 title='Sign In With Facebook'
@@ -129,8 +126,7 @@ class About extends Component {
 
 styles = StyleSheet.create({
   container: {
-    flex: 1,
-    margin: 15
+    flex: 1
   },
   headerContainer: {
     marginTop: 60,
@@ -147,14 +143,6 @@ styles = StyleSheet.create({
   fonts: {
     marginBottom: 8
   },
-  divider: {
-    marginBottom: 15
-  },
-  cardTitle: {
-    fontFamily: fonts.ios.bold,
-    textAlign: 'center',
-    marginBottom: 15
-  },
   user: {
     flexDirection: 'row',
     marginBottom: 6

src/components/containers/Card.js

@@ -4,12 +4,23 @@
 
 import React from 'react'
 import { View, StyleSheet, Platform } from 'react-native'
+import fonts from 'HSFonts'
 import colors from 'HSColors'
+import Text from 'HSText'
+import Divider from 'HSDivider'
 let styles = {}
 
-const Card = ({children, flexDirection, containerStyle, wrapperStyle}) => (
+const Card = ({children, flexDirection, containerStyle, wrapperStyle, title, titleStyle, dividerStyle}) => (
   <View style={[styles.container, containerStyle && containerStyle]}>
     <View style={[styles.wrapper, wrapperStyle && wrapperStyle, flexDirection && {flexDirection}]}>
+      {
+        title && (
+          <View>
+            <Text style={[styles.cardTitle, titleStyle && titleStyle]}>{title}</Text>
+            <Divider style={[styles.divider, dividerStyle && dividerStyle]} />
+          </View>
+        )
+      }
       {children}
     </View>
   </View>
@@ -22,6 +33,8 @@ styles = StyleSheet.create({
     borderWidth: 1,
     borderRadius: 3,
     padding: 15,
+    margin: 15,
+    marginBottom: 0,
     ...Platform.select({
       ios: {
         shadowColor: 'rgba(0,0,0, .2)',
@@ -36,6 +49,14 @@ styles = StyleSheet.create({
   },
   wrapper: {
     backgroundColor: 'transparent'
+  },
+  divider: {
+    marginBottom: 15
+  },
+  cardTitle: {
+    fontFamily: fonts.ios.bold,
+    textAlign: 'center',
+    marginBottom: 15
   }
 })
 

src/components/social/SocialIcon.js

@@ -14,7 +14,7 @@ const colors = {
   twitter: '#00aced',
   ['google-plus-official']: '#dd4b39',
   pinterest: '#cb2027',
-  linkedIn: '#007bb6',
+  linkedin: '#007bb6',
   youtube: '#bb0000',
   vimeo: '#aad450',
   tumblr: '#32506d',