renamed container folder to card

src/card/Card.js

@@ -0,0 +1,208 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import {
+  View,
+  StyleSheet,
+  Platform,
+  Image,
+  Text as NativeText,
+} from 'react-native';
+import fonts from '../config/fonts';
+import colors from '../config/colors';
+import Text from '../text/Text';
+import Divider from '../divider/Divider';
+import normalize from '../helpers/normalizeText';
+
+const Card = props => {
+  const {
+    children,
+    flexDirection,
+    containerStyle,
+    wrapperStyle,
+    imageWrapperStyle,
+    title,
+    titleStyle,
+    featuredTitle,
+    featuredTitleStyle,
+    featuredSubtitle,
+    featuredSubtitleStyle,
+    dividerStyle,
+    image,
+    imageStyle,
+    fontFamily,
+    ...attributes
+  } = props;
+
+  return (
+    <View
+      style={[
+        styles.container,
+        image && { padding: 0 },
+        containerStyle && containerStyle,
+      ]}
+      {...attributes}
+    >
+      <View
+        style={[
+          styles.wrapper,
+          wrapperStyle && wrapperStyle,
+          flexDirection && { flexDirection },
+        ]}
+      >
+        {title &&
+          <View>
+            <Text
+              style={[
+                styles.cardTitle,
+                image && styles.imageCardTitle,
+                titleStyle && titleStyle,
+                fontFamily && { fontFamily },
+              ]}
+            >
+              {title}
+            </Text>
+            {!image &&
+              <Divider
+                style={[styles.divider, dividerStyle && dividerStyle]}
+              />}
+          </View>}
+        {image &&
+          <View style={imageWrapperStyle && imageWrapperStyle}>
+            <Image
+              resizeMode="cover"
+              style={[{ width: null, height: 150 }, imageStyle && imageStyle]}
+              source={image}
+            >
+              <View style={styles.overlayContainer}>
+                {featuredTitle &&
+                  <Text
+                    style={[
+                      styles.featuredTitle,
+                      featuredTitleStyle && featuredTitleStyle,
+                    ]}
+                  >
+                    {featuredTitle}
+                  </Text>}
+                {featuredSubtitle &&
+                  <Text
+                    style={[
+                      styles.featuredSubtitle,
+                      featuredSubtitleStyle && featuredSubtitleStyle,
+                    ]}
+                  >
+                    {featuredSubtitle}
+                  </Text>}
+              </View>
+            </Image>
+            <View style={[{ padding: 10 }, wrapperStyle && wrapperStyle]}>
+              {children}
+            </View>
+          </View>}
+        {!image && children}
+      </View>
+    </View>
+  );
+};
+
+Card.propTypes = {
+  children: PropTypes.any,
+  flexDirection: PropTypes.string,
+  containerStyle: View.propTypes.style,
+  wrapperStyle: View.propTypes.style,
+  title: PropTypes.string,
+  titleStyle: NativeText.propTypes.style,
+  featuredTitle: PropTypes.string,
+  featuredTitleStyle: Text.propTypes.style,
+  featuredSubtitle: PropTypes.string,
+  featuredSubtitleStyle: Text.propTypes.style,
+  dividerStyle: View.propTypes.style,
+  image: Image.propTypes.source,
+  imageStyle: View.propTypes.style,
+  imageWrapperStyle: View.propTypes.style,
+  fontFamily: PropTypes.string,
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: 'white',
+    borderColor: colors.grey5,
+    borderWidth: 1,
+    padding: 15,
+    margin: 15,
+    marginBottom: 0,
+    ...Platform.select({
+      ios: {
+        shadowColor: 'rgba(0,0,0, .2)',
+        shadowOffset: { height: 0, width: 0 },
+        shadowOpacity: 1,
+        shadowRadius: 1,
+      },
+      android: {
+        elevation: 1,
+      },
+    }),
+  },
+  featuredTitle: {
+    fontSize: normalize(18),
+    marginBottom: 8,
+    color: 'white',
+    ...Platform.select({
+      ios: {
+        fontWeight: '800',
+      },
+      android: {
+        ...fonts.android.black,
+      },
+    }),
+  },
+  featuredSubtitle: {
+    fontSize: normalize(13),
+    marginBottom: 8,
+    color: 'white',
+    ...Platform.select({
+      ios: {
+        fontWeight: '400',
+      },
+      android: {
+        ...fonts.android.black,
+      },
+    }),
+  },
+  wrapper: {
+    backgroundColor: 'transparent',
+  },
+  divider: {
+    marginBottom: 15,
+  },
+  cardTitle: {
+    fontSize: normalize(14),
+    ...Platform.select({
+      ios: {
+        fontWeight: 'bold',
+      },
+      android: {
+        ...fonts.android.black,
+      },
+    }),
+    textAlign: 'center',
+    marginBottom: 15,
+    color: colors.grey1,
+  },
+  imageCardTitle: {
+    marginTop: 15,
+  },
+  overlayContainer: {
+    flex: 1,
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.2)',
+    alignSelf: 'stretch',
+    justifyContent: 'center',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+});
+
+export default Card;

src/card/__tests__/Card.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import Card from '../Card';
+
+describe('Card Component', () => {
+  it('should render without issues', () => {
+    const component = shallow(<Card />);
+
+    expect(component.length).toBe(1);
+    expect(toJson(component)).toMatchSnapshot();
+  });
+
+  it('should have Card title without image', () => {
+    const component = shallow(
+      <Card
+        title="Card Title"
+        containerStyle={{ backgroundColor: 'red' }}
+        fontFamily="arial"
+        dividerStyle={{ backgroundColor: 'red' }}
+        flexDirection="row"
+      />
+    );
+
+    expect(component.length).toBe(1);
+    expect(toJson(component)).toMatchSnapshot();
+  });
+
+  it('should have Card title with image', () => {
+    const component = shallow(
+      <Card
+        title="HELLO WORLD"
+        image={{
+          uri:
+            'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
+        }}
+        containerStyle={{ backgroundColor: 'red' }}
+        titleStyle={{ backgroundColor: 'red' }}
+        fontFamily="arial"
+      />
+    );
+
+    expect(component.length).toBe(1);
+    expect(toJson(component)).toMatchSnapshot();
+  });
+
+  it('should have Card with featured title', () => {
+    const component = shallow(
+      <Card
+        title="foo title"
+        image={{
+          uri:
+            'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
+        }}
+        imageWrapperStyle={{ backgroundColor: 'red' }}
+        imageStyle={{ backgroundColor: 'red' }}
+        wrapperStyle={{ backgroundColor: 'red' }}
+        featuredTitle="featured title"
+        featuredSubtitle="featured sub title"
+        featuredTitleStyle={{ backgroundColor: 'red' }}
+        featuredSubtitleStyle={{ backgroundColor: 'red' }}
+      />
+    );
+
+    expect(component.length).toBe(1);
+    expect(toJson(component)).toMatchSnapshot();
+  });
+});