DocSpace-client/web/ASC.Web.Components/example/stories/avatar/base/base.avatar.stories.js
2019-06-28 11:55:24 +03:00

30 lines
989 B
JavaScript

import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs, boolean, text, select } from '@storybook/addon-knobs/react';
import withReadme from 'storybook-readme/with-readme';
import Readme from './README.md';
import { Avatar } from 'asc-web-components';
import Section from '../../../.storybook/decorators/section';
const roleOptions = ['owner', 'admin','guest','user'];
const sizeOptions = ['max', 'big', 'medium', 'small'];
storiesOf('Components|Avatar', module)
.addDecorator(withKnobs)
.addDecorator(withReadme(Readme))
.add('base', () => {
const size = select('size', sizeOptions, 'max');
const editing = size === 'max' ? boolean('editing', false) : false;
return (
<Section>
<Avatar
size={size}
role={select('role', roleOptions, 'admin')}
source={text('source', '')}
userName={text('userName', '')}
editing={editing}
/>
</Section>
);
});