diff --git a/README.md b/README.md
index 94e713c9..05c7ed56 100755
--- a/README.md
+++ b/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
diff --git a/src/index.js b/src/index.js
index b40ce3cb..cd879c80 100755
--- a/src/index.js
+++ b/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
break
+ case 'list':
+ return
+ break
+
default:
case 'facebook':
return
diff --git a/src/stylized/ListStyle.js b/src/stylized/ListStyle.js
new file mode 100644
index 00000000..32649457
--- /dev/null
+++ b/src/stylized/ListStyle.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import Wrap from '../Wrap'
+
+const ListStyle = (props) => {
+ return (
+
+
+
+
+
+
+
+
+ )
+}
+
+export default ListStyle
diff --git a/tests/stylized/ListStyle.js b/tests/stylized/ListStyle.js
new file mode 100644
index 00000000..fce3bb3b
--- /dev/null
+++ b/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('', () => {
+ it('has a `svg`', () => {
+ const wrapper = render()
+ expect(wrapper.find('svg')).to.have.length(1)
+ })
+
+ it('has a `rect` with `clip-path`', () => {
+ const wrapper = render()
+ expect(wrapper.find('rect[clip-path]')).to.have.length(1)
+ })
+
+ it('has a `linearGradient`', () => {
+ const wrapper = render()
+ expect(wrapper.find('linearGradient')).to.have.length(1)
+ })
+
+ it('has three `stop`', () => {
+ const wrapper = render()
+ expect(wrapper.find('stop')).to.have.length(3)
+ })
+
+ it('has `stop` inside the `linearGradient`', () => {
+ const wrapper = render()
+ expect(wrapper.find('stop').parent().is('lineargradient')).to.equal(true)
+ })
+})