Permalink
Browse files

List component (#14)

* Add list style component

* Add list component to index

* Add tests for ListStyle

* update readme with list component
  • Loading branch information...
Lasse Borly authored and danilowoz committed Jul 10, 2017
1 parent a7f72dc commit 3c820c3e7ff83bc02cc86a07d2fe027c756874f5
Showing with 64 additions and 1 deletion.
  1. +5 −1 README.md
  2. +5 −0 src/index.js
  3. +17 −0 src/stylized/ListStyle.js
  4. +37 −0 tests/stylized/ListStyle.js
View
@@ -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
View
@@ -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} />
View
@@ -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
@@ -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)
})
})

0 comments on commit 3c820c3

Please sign in to comment.