73 lines
3.3 KiB
JavaScript
73 lines
3.3 KiB
JavaScript
import React from 'react'
|
|
import { storiesOf } from '@storybook/react'
|
|
import { withKnobs, boolean, select } from '@storybook/addon-knobs/react';
|
|
import withReadme from 'storybook-readme/with-readme'
|
|
import Readme from './README.md'
|
|
import { DropDown, DropDownItem } from 'asc-web-components'
|
|
import Section from '../../../.storybook/decorators/section';
|
|
|
|
storiesOf('Components | DropDown | DropDownItem', module)
|
|
.addDecorator(withKnobs)
|
|
.addDecorator(withReadme(Readme))
|
|
.add('base item', () => {
|
|
|
|
const isUserPreview = boolean('Show user preview', true);
|
|
const isHeader = boolean('Show category`s', true);
|
|
const isSeparator = boolean('Show separator', true);
|
|
const useIcon = boolean('Show icons', true);
|
|
const direction = select('direction', ['left', 'right'], 'left');
|
|
|
|
return (
|
|
<Section>
|
|
<DropDown
|
|
isUserPreview={isUserPreview}
|
|
withArrow={isUserPreview}
|
|
directionX={direction}
|
|
directionY='0%'
|
|
opened={true}>
|
|
<DropDownItem
|
|
isUserPreview={isUserPreview}
|
|
role='admin'
|
|
source='https://static-www.onlyoffice.com/images/team/developers_photos/personal_44_2x.jpg'
|
|
userName='Jane Doe'
|
|
label={isUserPreview ? 'janedoe@gmail.com' : ''} />
|
|
<DropDownItem
|
|
isHeader={isHeader}
|
|
label={isHeader ? 'Category' : ''}
|
|
onClick={() => console.log('Button 1 clicked')} />
|
|
<DropDownItem
|
|
icon={useIcon ? 'WindowsMsnIcon': ''}
|
|
label='Button 1'
|
|
onClick={() => console.log('Button 1 clicked')} />
|
|
<DropDownItem
|
|
icon={useIcon ? 'PlaneIcon' : ''}
|
|
label='Button 2'
|
|
onClick={() => console.log('Button 2 clicked')} />
|
|
<DropDownItem
|
|
disabled
|
|
icon={useIcon ? 'CopyIcon' : ''}
|
|
label='Button 3'
|
|
onClick={() => console.log('Button 3 clicked')} />
|
|
<DropDownItem
|
|
icon={useIcon ? 'ActionsDocumentsIcon' : ''}
|
|
label='Button 4'
|
|
onClick={() => console.log('Button 4 clicked')} />
|
|
<DropDownItem
|
|
isSeparator={isSeparator} />
|
|
<DropDownItem
|
|
isHeader={isHeader}
|
|
label={isHeader ? 'Category' : ''}
|
|
onClick={() => console.log('Button 1 clicked')} />
|
|
<DropDownItem
|
|
icon={useIcon ? 'NavLogoIcon' : ''}
|
|
label='Button 5'
|
|
onClick={() => console.log('Button 5 clicked')} />
|
|
<DropDownItem
|
|
disabled
|
|
icon={useIcon ? 'NavLogoIcon' : ''}
|
|
label='Button 6'
|
|
onClick={() => console.log('Button 6 clicked')} />
|
|
</DropDown>
|
|
</Section>
|
|
)
|
|
}); |