componente reutilizable terminado

src/components/StatusChip/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,96 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StatusChip component render correct a valid component is passed 1`] = `
+<View
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#fff",
+      "borderColor": "#C4C6CC",
+      "borderRadius": 12,
+      "borderWidth": 1,
+      "flexDirection": "row",
+      "height": 24,
+      "paddingLeft": 12,
+      "paddingRight": 12,
+    }
+  }
+>
+  <Text
+    style={
+      Object {
+        "fontFamily": "Roboto",
+        "fontSize": 16,
+      }
+    }
+  >
+    Custom component
+  </Text>
+</View>
+`;
+
+exports[`StatusChip component render correct if a color is passed 1`] = `
+<View
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#2979FF",
+      "borderColor": "#2979FF",
+      "borderRadius": 12,
+      "borderWidth": 1,
+      "flexDirection": "row",
+      "height": 24,
+      "paddingLeft": 12,
+      "paddingRight": 12,
+    }
+  }
+>
+  <Text
+    style={
+      Object {
+        "color": "#fff",
+        "fontFamily": "Roboto",
+        "fontSize": 15,
+        "fontWeight": "900",
+        "lineHeight": 18,
+        "textAlign": "center",
+      }
+    }
+  >
+    Delivered
+  </Text>
+</View>
+`;
+
+exports[`StatusChip component render correct text is passed 1`] = `
+<View
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#fff",
+      "borderColor": "#C4C6CC",
+      "borderRadius": 12,
+      "borderWidth": 1,
+      "flexDirection": "row",
+      "height": 24,
+      "paddingLeft": 12,
+      "paddingRight": 12,
+    }
+  }
+>
+  <Text
+    style={
+      Object {
+        "color": "#2979FF",
+        "fontFamily": "Roboto",
+        "fontSize": 15,
+        "fontWeight": "900",
+        "lineHeight": 18,
+        "textAlign": "center",
+      }
+    }
+  >
+    Partially delivered
+  </Text>
+</View>
+`;

src/components/StatusChip/index.test.tsx

@@ -0,0 +1,36 @@
+import 'react-native';
+import React from 'react';
+import {create} from 'react-test-renderer';
+import StatusChip from './index';
+import Text from '../Text';
+import {primary} from '../../theme/palette';
+
+describe('StatusChip component', () => {
+	describe('return error because is not a valid children', () => {
+		it('undefined children', () => {
+			const {toJSON} = create(<StatusChip />);
+			expect(toJSON()).toBeNull();
+		});
+	});
+
+	describe('render correct', () => {
+		it('text is passed', () => {
+			const {toJSON} = create(<StatusChip>Partially delivered</StatusChip>);
+			expect(toJSON()).toMatchSnapshot();
+		});
+
+		it('if a color is passed', () => {
+			const {toJSON} = create(<StatusChip color={primary.main}>Delivered</StatusChip>);
+			expect(toJSON()).toMatchSnapshot();
+		});
+
+		it('a valid component is passed', () => {
+			const {toJSON} = create(
+				<StatusChip>
+					<Text>Custom component</Text>
+				</StatusChip>
+			);
+			expect(toJSON()).toMatchSnapshot();
+		});
+	});
+});

src/components/StatusChip/index.tsx

@@ -0,0 +1,47 @@
+import React, {ReactElement, isValidElement} from 'react';
+import {StyleSheet, Text, ViewProps, View} from 'react-native';
+import {base, grey, primary} from '../../theme/palette';
+
+interface StatusChipProps extends ViewProps {
+	children?: ReactElement | string;
+	color?: string;
+}
+
+const StatusChip = ({children, color, ...props}: StatusChipProps) => {
+	const isString = typeof children === 'string';
+	const isCustomComponent = isValidElement(children);
+
+	if (!children || (!isString && !isCustomComponent)) {
+		return null;
+	}
+
+	const styles = StyleSheet.create({
+		ViewStyles: {
+			height: 24,
+			flexDirection: 'row',
+			alignItems: 'center',
+			paddingLeft: 12,
+			paddingRight: 12,
+			borderRadius: 12,
+			backgroundColor: color ?? base.white,
+			borderWidth: 1,
+			borderColor: color ?? grey['300'],
+		},
+		TextStyles: {
+			fontSize: 15,
+			lineHeight: 18,
+			fontFamily: 'Roboto',
+			fontWeight: '900',
+			textAlign: 'center',
+			color: color ? base.white : primary.main,
+		},
+	});
+
+	return (
+		<View style={styles.ViewStyles} {...props}>
+			{isCustomComponent ? children : <Text style={styles.TextStyles}>{children}</Text>}
+		</View>
+	);
+};
+
+export default StatusChip;

src/index.ts

@@ -2,5 +2,6 @@ import Text from './components/Text';
 import Avatar from './components/Avatar';
 import CheckBox from './components/CheckBox';
 import Image from './components/Image';
+import StatusChip from './components/StatusChip';
 
-export {Text, Avatar, CheckBox, Image};
+export {Text, Avatar, CheckBox, Image, StatusChip};

storybook/stories/StatusChip/StatusChip.stories.js

@@ -0,0 +1,63 @@
+import {storiesOf} from '@storybook/react-native';
+import {text, select, number, color} from '@storybook/addon-knobs';
+import StatusChip from '../../../src/components/StatusChip';
+import Text from '../Text';
+import CenterView from '../CenterView';
+import React from 'react';
+
+const fontFamilies = [
+	'normal',
+	'notoserif',
+	'sans-serif',
+	'sans-serif-light',
+	'sans-serif-thin',
+	'sans-serif-condensed',
+	'sans-serif-medium',
+	'serif',
+	'Roboto',
+	'monospace',
+];
+const fontWeight = [
+	'normal',
+	'bold',
+	'100',
+	'200',
+	'300',
+	'400',
+	'500',
+	'600',
+	'700',
+	'800',
+	'900',
+];
+
+storiesOf('StatusChip', module)
+	.addDecorator((getStory) => <CenterView>{getStory()}</CenterView>)
+	.add('passing it text', () => (
+		<StatusChip color={select('color', ['#2979FF', '#1DB779', ''], '')}>
+			Partially delivered
+		</StatusChip>
+	))
+	.add('passing it a custom component', () => (
+		<StatusChip color={select('color', ['#2979FF', '#1DB779', null], null)}>
+			<Text
+				fontSize={number('fontSize', 16)}
+				color={color('text color', '#000000')}
+				fontFamily={select('fontFamily', fontFamilies, 'Roboto')}
+				fontStyle={select('fontStyle', ['normal', 'italic'], 'normal')}
+				fontWeight={select('fontWeight', fontWeight, 'normal')}
+				letterSpacing={number('letterSpacing', 0)}
+				textDecorationLine={select(
+					'textDecorationLine',
+					['none', 'underline', 'line-through', 'underline line-through'],
+					'none'
+				)}
+				textTransform={select(
+					'textTransform',
+					['none', 'uppercase', 'lowercase', 'capitalize'],
+					'none'
+				)}>
+				{text('text', 'Janis Commerce')}
+			</Text>
+		</StatusChip>
+	));

storybook/stories/index.js

@@ -2,3 +2,4 @@ import './Avatar/Avatar.stories';
 import './CheckBox/CheckBox.stories';
 import './Image/Image.stories';
 import './Text/Text.stories';
+import './StatusChip/StatusChip.stories';

storybook/storyLoader.js

@@ -7,13 +7,15 @@ function loadStories() {
 	require('./stories/Avatar/Avatar.stories');
 	require('./stories/CheckBox/CheckBox.stories');
 	require('./stories/Image/Image.stories');
+	require('./stories/StatusChip/StatusChip.stories');
 	require('./stories/Text/Text.stories');
 }
 
 const stories = [
 	'./stories/Avatar/Avatar.stories',
 	'./stories/CheckBox/CheckBox.stories',
 	'./stories/Image/Image.stories',
+	'./stories/StatusChip/StatusChip.stories',
 	'./stories/Text/Text.stories',
 ];