List component (#14)

* Add list style component

* Add list component to index

* Add tests for ListStyle

* update readme with list component

Author: Lasse Borly

README.md

@@ -74,13 +74,17 @@ const MyLoader = () => {
 #### Code Style
 ![Code Style](https://cloud.githubusercontent.com/assets/4838076/22555473/effa54c2-e94a-11e6-9128-9b608bcc69d9.gif)
 
+#### List Style
+![List Style](https://user-images.githubusercontent.com/2671660/27986068-7a0040d6-63f9-11e7-8e54-dcb220e42fd7.gif)
+
+
 #### Custom Style
 ![Code Style](https://cloud.githubusercontent.com/assets/4838076/22760218/aa619f32-ee3c-11e6-9cd1-c4af9dd1278e.gif)
 
 ### Todo
 - [x] Code component;
 - [x] Custom elements;
-- [ ] List component;
+- [x] List component;
 - [ ] Test in multiples browser;
 
 #### Credits

src/index.js

@@ -6,6 +6,7 @@ import Wrap from './Wrap'
 import FacebookStyle from './stylized/FacebookStyle'
 import InstagramStyle from './stylized/InstagramStyle'
 import CodeStyle from './stylized/CodeStyle'
+import ListStyle from './stylized/ListStyle'
 // Custom
 import Rect from './custom/Rect'
 import Circle from './custom/Circle'
@@ -50,6 +51,10 @@ class ContentLoader extends Component {
                 return <CodeStyle {...this.state} />
                 break
 
+            case 'list':
+                return <ListStyle {...this.state} />
+                break
+
             default:  
             case 'facebook': 
                 return <FacebookStyle {...this.state} />

src/stylized/ListStyle.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import Wrap from '../Wrap'
+
+const ListStyle = (props) => {
+    return (
+        <Wrap {...props}>
+            <rect x="0" y="0" rx="3" ry="3" width="250" height="10" />
+            <rect x="20" y="20" rx="3" ry="3" width="220" height="10" />
+            <rect x="20" y="40" rx="3" ry="3" width="170" height="10" />
+            <rect x="0" y="60" rx="3" ry="3" width="250" height="10" />
+            <rect x="20" y="80" rx="3" ry="3" width="200" height="10" />
+            <rect x="20" y="100" rx="3" ry="3" width="80" height="10" />
+        </Wrap>
+    )
+}
+
+export default ListStyle

tests/stylized/ListStyle.js

@@ -0,0 +1,37 @@
+import React from 'react'
+
+import {mount, render} from 'enzyme'
+import chai, {expect} from 'chai'
+import chaiEnzyme from 'chai-enzyme'
+import sinon from 'sinon'
+
+chai.use(chaiEnzyme())
+
+import ListStyle from '../../src/stylized/ListStyle'
+
+describe('<ListStyle />', () => {
+    it('has a `svg`', () => {
+        const wrapper = render(<ListStyle />)
+        expect(wrapper.find('svg')).to.have.length(1)
+    })
+
+    it('has a `rect` with `clip-path`', () => {
+        const wrapper = render(<ListStyle />)
+        expect(wrapper.find('rect[clip-path]')).to.have.length(1)
+    })
+
+    it('has a `linearGradient`', () => {
+        const wrapper = render(<ListStyle />)
+        expect(wrapper.find('linearGradient')).to.have.length(1)
+    })
+
+    it('has three `stop`', () => {
+        const wrapper = render(<ListStyle />)
+        expect(wrapper.find('stop')).to.have.length(3)
+    })
+
+    it('has `stop` inside the `linearGradient`', () => {
+        const wrapper = render(<ListStyle />)
+        expect(wrapper.find('stop').parent().is('lineargradient')).to.equal(true)
+    })
+})