primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-18 03:31:43 +03:00
Code Issues Projects Releases Wiki Activity

add CircleBadge and DashedConnection stores

Browse Source
This commit is contained in:
Diana Mounter 2017-09-03 12:19:45 -04:00
parent 6d05288884
commit 09c340b3f1
1 changed files with 37 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
.storybook/Avatars.js
View File

@ -10,7 +10,7 @@ storiesOf('Avatars', module)
))
.add('avatar-parent-child', () => (
<div>
<div className="avatar-parent-child float-left">
<div className='avatar-parent-child float-left'>
<img className='avatar'width='48' height='48' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
<img className='avatar avatar-child' alt='Child cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
</div>
@ -26,3 +26,39 @@ storiesOf('Avatars', module)
</div>
))
.add('CircleBadge--small', () => (
<div>
<a className='CircleBadge CircleBadge--small' href='#url' title='Travis CI'>
<img src='https://user-images.githubusercontent.com/334891/30004619-adc8ca86-90a0-11e7-8ccc-2322261d2ab1.png' className='CircleBadge-icon'/>
</a>
</div>
))
.add('CircleBadge--medium', () => (
<div>
<a className='CircleBadge CircleBadge--medium' href='#url' title='Travis CI'>
<img src='https://user-images.githubusercontent.com/334891/30004619-adc8ca86-90a0-11e7-8ccc-2322261d2ab1.png' className='CircleBadge-icon'/>
</a>
</div>
))
.add('CircleBadge--large', () => (
<div>
<a className='CircleBadge CircleBadge--large' href='#url' title='Travis CI'>
<img src='https://user-images.githubusercontent.com/334891/30004619-adc8ca86-90a0-11e7-8ccc-2322261d2ab1.png' className='CircleBadge-icon'/>
</a>
</div>
))
.add('DashedConnection', () => (
<div className='DashedConnection'>
<ul className='d-flex list-style-none flex-justify-between' aria-label='A sample GitHub workflow'>
<li className='CircleBadge CircleBadge--small' aria-label='GitHub'>
<img width='32' src='https://user-images.githubusercontent.com/334891/30004619-adc8ca86-90a0-11e7-8ccc-2322261d2ab1.png'/>
</li>
<li className='CircleBadge CircleBadge--small' aria-label='Slack'>
<img width='32' src='https://user-images.githubusercontent.com/334891/30004619-adc8ca86-90a0-11e7-8ccc-2322261d2ab1.png'/>
</li>
<li className='CircleBadge CircleBadge--small' aria-label='Travis CI'>
<img width='32' src='https://user-images.githubusercontent.com/334891/30004619-adc8ca86-90a0-11e7-8ccc-2322261d2ab1.png'/>
</li>
</ul>
</div>
))