2019-07-03 11:36:42 +00:00
|
|
|
import React from 'react';
|
|
|
|
import { storiesOf } from '@storybook/react';
|
|
|
|
import { action } from '@storybook/addon-actions';
|
|
|
|
import { BooleanValue } from 'react-values'
|
|
|
|
import { withKnobs, boolean, select, text } from '@storybook/addon-knobs/react';
|
|
|
|
import withReadme from 'storybook-readme/with-readme';
|
|
|
|
import Readme from './README.md';
|
2019-07-03 13:05:08 +00:00
|
|
|
import { ContentRow, Checkbox, Avatar, ContextMenuButton, Text } from 'asc-web-components';
|
2019-07-03 11:36:42 +00:00
|
|
|
import Section from '../../../.storybook/decorators/section';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
storiesOf('Components|ContentRow', module)
|
|
|
|
.addDecorator(withKnobs)
|
|
|
|
.addDecorator(withReadme(Readme))
|
|
|
|
.add('base', () => {
|
|
|
|
|
2019-07-03 13:05:08 +00:00
|
|
|
const avatar = boolean('avatar', true);
|
|
|
|
const contextButton = boolean('contextButton', true);
|
2019-07-03 11:36:42 +00:00
|
|
|
|
2019-07-18 08:42:07 +00:00
|
|
|
|
2019-07-03 11:36:42 +00:00
|
|
|
return(
|
|
|
|
<Section>
|
2019-07-18 08:42:07 +00:00
|
|
|
<ContentRow key='1'
|
|
|
|
avatarName={avatar ? 'Demo Avatar' : ''}
|
|
|
|
avatarRole={avatar ? 'user' : ''}
|
|
|
|
avatarSource={avatar ? '' : ''}
|
|
|
|
contextOptions={contextButton ? [
|
|
|
|
{key: 'key1', label: 'Edit', onClick: () => console.log('Context action: Edit')},
|
|
|
|
{key: 'key2', label: 'Delete', onClick: () => console.log('Context action: Delete')}
|
2019-07-29 08:26:33 +00:00
|
|
|
] : []}
|
2019-07-03 11:36:42 +00:00
|
|
|
>
|
2019-07-03 13:05:08 +00:00
|
|
|
<Text.Body truncate={true} >{text('content', '')}</Text.Body>
|
2019-07-03 11:36:42 +00:00
|
|
|
</ContentRow>
|
|
|
|
</Section>
|
|
|
|
);
|
|
|
|
});
|