[feat] Name Card Component Closes #45

packages/react-silk-docs/src/components/Anchors.tsx

@@ -33,5 +33,8 @@ export default () => (
     <NavItem>
       <Link to="/components/input_pins">Input Pins</Link>
     </NavItem>
+    <NavItem>
+      <Link to="/components/namecard">Name Card</Link>
+    </NavItem>
   </NavItems>
 )

packages/react-silk-docs/src/demo/NameCardDemo.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react'
+import { NameCard } from 'react-silk-ui'
+import styled from 'styled-components'
+
+const NameCardWrapper = styled.div`
+  display: flex;
+  > div > div {
+    margin-bottom: 0.5rem;
+  }
+`
+
+export default () => (
+  <div>
+    <NameCardWrapper>
+      <div>
+        <NameCard
+          image="https://avatars1.githubusercontent.com/u/5728560?s=460&v=4"
+          title="Bill Gate"
+          subTitle="goblin@gmail.com"
+        />
+        <NameCard
+          image="https://avatars3.githubusercontent.com/u/24296018?s=460&v=4"
+          title="Mark Zuckerberg"
+          subTitle="jetaimefrc@gmail.com"
+          rtl={true}
+        />
+      </div>
+    </NameCardWrapper>
+  </div>
+)

packages/react-silk-docs/src/pages/components/namecard.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react'
+import MyMom from '.'
+import NameCardDemo from '../../demo/NameCardDemo'
+
+export default () => (
+  <MyMom>
+    <NameCardDemo />
+  </MyMom>
+)

packages/react-silk-ui/src/components/NameCard.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react'
+import { View, Image, StyleSheet } from 'react-native'
+import { Heading5, Heading6, Text } from './Text'
+import Colors from './Colors'
+import Spacing from './Spacing'
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  nameCardWrapper: {
+    flex: 1,
+    padding: 10,
+    backgroundColor: Colors.white,
+    flexDirection: 'row',
+    borderWidth: 1,
+    borderColor: Colors.gray,
+  },
+  contentWrapper: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  image: {
+    width: 80,
+    height: 80,
+  },
+  orderReverse: {
+    flexDirection: 'row-reverse',
+  },
+  title: {
+    marginBottom: 0,
+  },
+})
+
+export interface Props {
+  image?: string
+  title: string
+  subTitle?: string
+  rtl?: boolean
+}
+
+export const NameCard = ({ image, title, subTitle, rtl }: Props) => {
+  const orderStyles = []
+  if (!rtl) {
+    orderStyles.push(styles.orderReverse)
+  }
+  return (
+    <View style={styles.container}>
+      <View style={[styles.nameCardWrapper, ...orderStyles]}>
+        <View
+          style={[styles.contentWrapper, rtl ? Spacing.pr10 : Spacing.pl10]}
+        >
+          <Heading6 style={styles.title}>{title}</Heading6>
+          <Text>{subTitle}</Text>
+        </View>
+        <Image style={styles.image} source={{ uri: image }} />
+      </View>
+    </View>
+  )
+}
+
+NameCard.defaultProps = {
+  rtl: false,
+}

packages/react-silk-ui/src/components/Spacing.ts

@@ -0,0 +1,10 @@
+import { StyleSheet } from 'react-native'
+
+export default StyleSheet.create({
+  pr10: {
+    paddingRight: 10,
+  },
+  pl10: {
+    paddingLeft: 10,
+  },
+})

packages/react-silk-ui/src/index.ts

@@ -18,6 +18,7 @@ import { DropdownItem } from './components/Dropdown/Item'
 import { Carousel } from './components/Carousel'
 import * as Colors from './components/Colors'
 import { InputPin } from './components/InputPin'
+import { NameCard } from './components/NameCard'
 
 export {
   Text,
@@ -39,6 +40,7 @@ export {
   DropdownItem,
   Carousel,
   InputPin,
+  NameCard,
 }
 
 export default {
@@ -61,4 +63,5 @@ export default {
   DropdownItem,
   Carousel,
   InputPin,
+  NameCard,
 }