IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Storybook: Added DropDownItem story

Browse Source
This commit is contained in:
Ilya Oleshko 2019-06-24 17:33:15 +03:00
parent 81a9cbb72c
commit 0918325540
2 changed files with 55 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
web/ASC.Web.Components/example/stories/drop-down/drop-down-item/README.md Normal file
View File

@ -0,0 +1,25 @@
# DropDownItem
## Usage
```js
import { DropDownItem } from 'asc-web-components';
```
#### Description
Is a item of DropDown component
#### Usage
```js
<DropDownItem isSeparator={false} label='Button 1' onClick={() => console.log('Button 1 clicked')} />
```
#### Properties
| Props | Type | Required | Values | Default | Description |
| ------------------ | -------- | :------: | --------------------------- | -------------- | ----------------------------------------------------------------- |
| `isSeparator` | `bool` | - | - | `false` | Tells when the dropdown item should display like separator |
| `label` | `string` | - | - | `Dropdown item`| Dropdown item text |
| `onClick` | `func` | - | - | - | What the dropdown item will trigger when clicked |

30
web/ASC.Web.Components/example/stories/drop-down/drop-down-item/drop-down-item.stories.js Normal file
View File

@ -0,0 +1,30 @@
import React from 'react'
import { storiesOf } from '@storybook/react'
import withReadme from 'storybook-readme/with-readme'
import Readme from './README.md'
import { Container, Row, Col } from 'reactstrap';
import { DropDown, DropDownItem } from 'asc-web-components'
storiesOf('Components| DropDownItem', module)
.addDecorator(withReadme(Readme))
.add('DropDownItem', () => (
<Container>
<Row>
<Col xs="2">Only dropdown</Col>
</Row>
<Row>
<Col xs="2">
<DropDown opened={true}>
<DropDownItem label='Button 1' onClick={() => console.log('Button 1 clicked')} />
<DropDownItem label='Button 2' onClick={() => console.log('Button 2 clicked')} />
<DropDownItem label='Button 3' onClick={() => console.log('Button 3 clicked')} />
<DropDownItem label='Button 4' onClick={() => console.log('Button 4 clicked')} />
<DropDownItem isSeparator />
<DropDownItem label='Button 5' onClick={() => console.log('Button 5 clicked')} />
<DropDownItem label='Button 6' onClick={() => console.log('Button 6 clicked')} />
</DropDown>
</Col>
</Row>
</Container>
)
);