Remove custom components (#48)

* Remove custom components #46

* return <rect/> and <circle/> in stories, update readme.md, return test for 'when type is custom'

* fix indentation, move 'when type is custom' test from 'Type props are used' block

Author: lasfin

README.md

@@ -46,14 +46,14 @@ your custom loaders
 
 ```jsx
 // import the component
-import ContentLoader, { Rect, Circle } from 'react-content-loader'
+import ContentLoader from 'react-content-loader'
 
 const MyLoader = () => {
   return (
     <ContentLoader height={140} speed={1} primaryColor={'#333'} secondaryColor={'#999'}>
-      <Circle x={195} y={30} radius={30} />
-      <Rect x={50} y={80} height={10} radius={5} width={300} />
-      <Rect x={75} y={100} height={10} radius={5} width={250} />
+      <rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
+      <rect x="82" y="44" rx="3" ry="3" width="250" height="10" />
+      <circle cx="35" cy="35" r="35" />
     </ContentLoader>
   )
 }

src/custom/Circle.js

@@ -8,9 +8,6 @@ import InstagramStyle from './stylized/InstagramStyle'
 import CodeStyle from './stylized/CodeStyle'
 import ListStyle from './stylized/ListStyle'
 import BulletListStyle from './stylized/BulletListStyle'
-// Custom
-import Rect from './custom/Rect'
-import Circle from './custom/Circle'
 
 export type Props = {
   style: { [key: string]: any },
@@ -60,4 +57,3 @@ ContentLoader.defaultProps = {
 };
 
 export default ContentLoader
-export { Rect, Circle }

src/custom/Rect.js

@@ -3,7 +3,6 @@ import React from 'react'
 import { storiesOf } from '@storybook/react'
 
 import ContentLoader from '../src/index'
-import { Rect, Circle } from '../src/index'
 
 let defaultStyle = {
   width: 400,
@@ -16,9 +15,9 @@ const Container = props => <div style={defaultStyle}>{props.children}</div>
 const MyLoader = () => {
   return (
     <ContentLoader height={140} speed={1} primaryColor={'#333'} secondaryColor={'#999'}>
-      <Circle x={195} y={30} radius={30} />
-      <Rect x={50} y={80} height={10} radius={5} width={300} />
-      <Rect x={75} y={100} height={10} radius={5} width={250} />
+      <rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
+      <rect x="82" y="44" rx="3" ry="3" width="250" height="10" />
+      <circle cx="35" cy="35" r="35" />
     </ContentLoader>
   )
 }

src/index.js

@@ -15,9 +15,6 @@ import FacebookStyle from '../src/stylized/FacebookStyle'
 import InstagramStyle from '../src/stylized/InstagramStyle'
 import CodeStyle from '../src/stylized/CodeStyle'
 
-import Rect from '../src/custom/Rect'
-import Circle from '../src/custom/Circle'
-
 describe('<ContentLoader />:', () => {
   describe('Type props are used', () => {
     describe('when type is facebook', () => {
@@ -52,18 +49,21 @@ describe('<ContentLoader />:', () => {
       })
     })
 
-    describe('when type is custom', () => {
-      const wrapper = mount(
-        <ContentLoader>
-          <Rect />
-          <Circle />
-        </ContentLoader>
-      )
-
-      it('should render custom element', () => {
-        expect(wrapper).to.have.descendants(Rect)
-        expect(wrapper).to.have.descendants(Circle)
-      })
+  })
+
+  describe('when type is custom', () => {
+
+    const wrapper = mount(
+      <ContentLoader>
+        <rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
+        <rect x="82" y="44" rx="3" ry="3" width="250" height="10" />
+        <circle cx="35" cy="35" r="35" />
+      </ContentLoader>
+    )
+
+    it('should render custom element', () => {
+      expect(wrapper.find('rect')).to.have.length(3)
+      expect(wrapper.find('circle')).to.have.length(1)
     })
   })