63 lines
2.3 KiB
JavaScript
63 lines
2.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', module)
|
|
.addDecorator(withKnobs)
|
|
.addDecorator(withReadme(Readme))
|
|
.add('base item', () => {
|
|
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
|
|
directionX={direction}
|
|
manualY='1%'
|
|
opened={true}>
|
|
<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>
|
|
)
|
|
}); |