Support placeholders with arbitrary width, height and borderRadius (#34)

* Add a box placeholder type with customizable width, height and border radius

* Add docs

* Fix comment

* Extend the media component to handle arbitrary width and height

* Revert "Extend the media component to handle arbitrary width and height"

This reverts commit 6699ab1.

* Use radius instead of borderRadius and default to a square

* Replace borderRadius -> radius in api example

* Fix default height in example

API.md

@@ -10,7 +10,7 @@ width="200" src="https://img15.hostingpics.net/pics/198734skeletonloaderandroid.
 
 # Components
 
-The project currently supports 4 different placeholder components.
+The project currently supports 5 different placeholder components.
 
 Each of this components are wrapped in a HOC that brings two others (optional) props :
 
@@ -126,6 +126,27 @@ Display a Media on the left / right part of a Paragraph
 />
 ```
 
+<h2 name="box">Box</h2>
+
+Display a generic rectangle shape with customisable width, height, color and border radius
+
+#### Props available
+- `height: Number | String`: the height of the component (default: `50`)
+- `width: Number | String`: the width of the component (default: `50`)
+- `radius: Number`: the border radius of the component (default: `0`)
+- `color: String`: the background color of the component (default: `#efefef`)
+
+#### Example
+
+```javascript
+<Placeholder.Box
+  height={50}
+  width="100%"
+  radius={5}
+  color="teal"
+/>
+```
+
 <h2 name="custom">Custom components</h2>
 
 You can create your own placeholder component based on your own ones. Based on that, we're exposing a `Placeholder.connect` function that returns a new `ComponentContainer`.

src/box/__tests__/box.test.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { View } from 'react-native';
+import Box from './../box';
+
+describe('Box#render', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallow(<Box />);
+  });
+
+  it('should own a props style that matches the default style', () => {
+    const style = {
+      height: 50,
+      width: 50,
+      borderRadius: 0,
+      backgroundColor: '#efefef',
+    };
+    expect(wrapper.find(View).prop('style')).toEqual(style);
+  });
+
+  it('should own a props style that matches the props', () => {
+    wrapper = shallow(<Box height={50} width={20} color="red" radius={5} />);
+    const style = {
+      height: 50,
+      width: 20,
+      backgroundColor: 'red',
+      borderRadius: 5,
+    };
+    expect(wrapper.find(View).prop('style')).toEqual(style);
+  });
+});

src/box/box.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { View } from 'react-native';
+import computeStyle from './box.style';
+
+/**
+ * Create a box placeholder
+ */
+export default function (props) {
+  return <View style={computeStyle(props)} />;
+}

src/box/box.style.js

@@ -0,0 +1,6 @@
+export default ({ height = 50, width = 50, radius = 0, color = '#efefef' }) => ({
+  height,
+  width,
+  borderRadius: radius,
+  backgroundColor: color,
+});

src/placeholder.js

@@ -4,6 +4,7 @@ import Media from './media/media';
 import Line from './line/line';
 import ImageContent from './imageContent/imageContent';
 import MultiWords from './multiWords/multiWords';
+import Box from './box/box';
 
 /**
  * Export the placeholder
@@ -14,5 +15,6 @@ export default {
   Media: connect(Media),
   Line: connect(Line),
   MultiWords: connect(MultiWords),
+  Box: connect(Box),
   connect,
 };