Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Remove .avatar-stack #658

Merged
merged 2 commits into from
Jan 23, 2019
Merged

Remove .avatar-stack #658

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a8fec99
get avatar stories from markdown
shawnbot Jan 23, 2019
113894c
remove .avatar-stack styles
shawnbot Jan 23, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 0 additions & 47 deletions modules/primer-avatars/lib/avatar-stack.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,5 @@
// Stacked avatars can be used to show who is participating in thread when
// there is limited space available.
//
// No styleguide references
@warn ".avatar-stack will be deprecated in version 11. Use .AvatarStack instead.";

.avatar-stack {
display: inline-block;
white-space: nowrap;

.avatar {
position: relative;
z-index: 2;
display: inline-block;
width: 20px;
height: 20px;
box-sizing: content-box;
margin-right: -15px;
background-color: $bg-white;
border-right: 1px solid $white;
border-radius: 2px;
transition: margin 0.1s ease-in-out;

&:only-child {
background-color: transparent;
}

&:first-child {
z-index: 3;
}

&:last-child {
z-index: 1;
margin-right: 0;
border-right: 0;
}
}

// When more than one avatar, margin-left will animate from -15 to 2, and reveal the stack
&:hover .avatar {
margin-right: 3px;

&:last-child {
margin-right: 0;
}
}
}

// Refactored, new avatar stack:

.AvatarStack {
position: relative;
Expand Down
119 changes: 6 additions & 113 deletions modules/primer-avatars/stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,117 +1,10 @@
import React from 'react'
import { storiesOf } from '@storybook/react'
import storiesFromMarkdown from '../../.storybook/lib/storiesFromMarkdown'

storiesOf('Avatars', module)
.add('avatar', () => (
<img className='avatar' alt='Uncle Cat' width='72' height='72' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
))
.add('avatar-small', () => (
<img className='avatar avatar-small' width='32' height='32' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
))
.add('avatar-parent-child', () => (
<div>
<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>
</div>
))
.add('avatar-stack', () => (
<div>
<div className='avatar-stack'>
<img className='avatar' alt='Uncle Cat' width='39' height='39' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
<img className='avatar' alt='Uncle Cat' width='39' height='39' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
<img className='avatar' alt='Uncle Cat' width='39' height='39' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
</div>
</div>
const stories = storiesOf('Avatars', module)

))
.add('AvatarStack', () => (
<div>
<div className='AvatarStack AvatarStack-three-plus mb-2'>
<div className='AvatarStack-body tooltipped tooltipped-se tooltipped-align-left-1' aria-label='five avatars'>
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
<div className='avatar-more avatar'></div>
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
</div>
</div>
<div className='AvatarStack AvatarStack-two mb-2'>
<div className='AvatarStack-body tooltipped tooltipped-se tooltipped-align-left-1' aria-label='two avatars'>
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
</div>
</div>
<div className='AvatarStack AvatarStack-three-plus AvatarStack--right mb-2'>
<div className='AvatarStack-body tooltipped tooltipped-sw tooltipped-align-right-1' aria-label='five avatars'>
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
<div className='avatar-more avatar'></div>
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
</div>
</div>
<div className='AvatarStack AvatarStack-two AvatarStack--right mb-2'>
<div className='AvatarStack-body tooltipped tooltipped-sw tooltipped-align-right-1' aria-label='two avatars'>
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
</div>
</div>
</div>
))
.add('AvatarStack on blue background', () => (
<div className='border bg-blue-light p-4'>
<div className='AvatarStack flex-self-start'>
<div className='AvatarStack-body' aria-label='chesterbr'>
<a className='avatar' aria-describedby='hovercard-aria-description'>
<img height='20' width='20' alt='@github' src='https://avatars0.githubusercontent.com/github?s=60&amp;v=4' />
</a>
</div>
</div>
<div className='AvatarStack AvatarStack-two mt-2'>
<div className='AvatarStack-body tooltipped tooltipped-sw tooltipped-align-right-1' aria-label='two avatars'>
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
</div>
</div>
</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>
))
storiesFromMarkdown(require.context('.', true, /\.md$/))
.forEach(({title, story}) => {
stories.add(title, story)
})