Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import React from 'react';
import Avatar from './Avatar';
import _ from 'lodash';
const rndNum = _.random(99);
const avatarImg = `https://randomuser.me/api/portraits/men/${rndNum}.jpg`;
const smallImg = 'http://placeimg.com/32/32/people';
const largeImg = 'http://placeimg.com/1920/1920/people';
const noProportionalImg = 'http://placeimg.com/640/320/people';
const user = () => ({
title: 'John Smith',
src: `https://randomuser.me/api/portraits/men/${_.random(99)}.jpg`,
});
module.exports = function ({ storiesOf, action, knob }) {
return storiesOf('Avatar', module)
.add('Default as img', () => (
<Avatar
title="John Smith"
src={avatarImg}
/>
))
.add('Alternative as User', () => (
<Avatar
name="John Smith"
avatar={avatarImg}
/>
))
.add('Empty', () => (
<Avatar />
))
.add('No image', () => (
<div>
<Avatar title="John Smith" />
<Avatar title="John Smith" textScale={0.5} />
<Avatar title="John Smith" textScale={2} />
<Avatar title="John Smith" textScale={4} />
</div>
))
.add('Size', () => (
<div>
<Avatar {...user()} />
<Avatar {...user()} size={32} />
<Avatar {...user()} size={64} />
<Avatar {...user()} size={100} />
<Avatar {...user()} width={100} height={50} />
<Avatar {...user()} width={50} height={100} />
</div>
))
.add('Custom styles', () => (
<div>
<Avatar {...user()} style={{ margin: 10 }} />
<Avatar {...user()} style={{ padding: 10 }} />
<Avatar {...user()} style={{ border: '4px solid rgb(244, 67, 54)' }} />
<Avatar {...user()} innerStyle={{ boxShadow: '1px 1px 10px 2px #333' }} />
<Avatar {...user()} innerStyle={{ filter: 'grayscale(100%)' }} />
<Avatar {...user()} innerStyle={{ border: '4px solid rgb(244, 67, 54)' }} />
<Avatar {...user()} innerStyle={{ border: '2px solid #4CAF50'}} />
<Avatar {...user()} innerStyle={{ border: '4px solid #F44336' }} />
</div>
))
.add('Badge', () => (
<div>
<Avatar {...user()}>
<Avatar.Badge left top>
<div style={{ width: 10, height: 10, backgroundColor: '#4CAF50', borderRadius: '50%', border: '2px solid #fff' }} />
</Avatar.Badge>
</Avatar>
<Avatar title="Offline Smith">
<Avatar.Badge right bottom>
<div style={{ width: 10, height: 10, backgroundColor: '#F44336', borderRadius: '50%', border: '2px solid #fff' }} />
</Avatar.Badge>
</Avatar>
<Avatar>
<Avatar.Badge left top >
<div style={{ width: 10, height: 10, backgroundColor: '#4CAF50', borderRadius: '50%', border: '2px solid #fff' }} />
</Avatar.Badge>
<Avatar.Badge right top >
<div style={{ width: 10, height: 10, backgroundColor: '#F44336', borderRadius: '50%', border: '2px solid #fff' }} />
</Avatar.Badge>
<Avatar.Badge left bottom >
<div style={{ width: 10, height: 10, backgroundColor: '#574caf', borderRadius: '50%', border: '2px solid #fff' }} />
</Avatar.Badge>
<Avatar.Badge right bottom >
<div style={{ width: 10, height: 10, backgroundColor: '#c6972f', borderRadius: '50%', border: '2px solid #fff' }} />
</Avatar.Badge>
</Avatar>
<Avatar>
<div style={{ width: 10, height: 10, backgroundColor: '#F44336', borderRadius: '50%', position: 'absolute', right: '24px', bottom: '24px', border: '2px solid #fff' }} />
</Avatar>
</div>
))
.add('Shape', () => (
<div>
<Avatar {...user()} shape="circle" />
<Avatar {...user()} shape="square" />
<Avatar {...user()} shape="rounded" />
</div>
))
.add('Failed img', () => (
<Avatar title="John Smith" src="/failed-img.png" />
))
.add('No proportional', () => (
<div>
<Avatar title="John Smith" src={smallImg} />
<Avatar title="John Smith" src={largeImg} />
<Avatar title="John Smith" src={noProportionalImg} />
<Avatar title="John Smith" src={noProportionalImg} width={128} height={64} />
<Avatar title="John Smith" src={noProportionalImg} shape="rounded" width={128} height={64} />
</div>
))
.add('With tag a', () => (
<a href="#"><Avatar {...user()} /></a>
))
.add('Knobs', () => (
<Avatar
name={knob.string('Name')}
title={knob.string('Title')}
avatar={knob.string('Avatar')}
src={knob.string('Src')}
size={knob.number('Size', 64)}
width={knob.number('Width')}
height={knob.number('Height')}
shape={knob.select('Shape', { cirlce: 'circle', rounded: 'rounded', square: 'square' }, 'circle')}
border={knob.boolean('Border')}
borderColor={knob.color('Border color')}
borderWidth={knob.number('Border width')}
borderPadding={knob.number('Border padding')}
bgColor={knob.color('Background color')}
textColor={knob.color('Text color')}
textScale={knob.number('Text size scale')}
shadow={knob.boolean('Shadow')}
inactive={knob.boolean('Inactive')}
style={knob.object('Custom styles', { padding: '10px' })}
/>
));
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.