web: Components: Added DropDownProfileItem story
This commit is contained in:
parent
ec8b5f4bde
commit
565277f721
@ -0,0 +1,32 @@
|
||||
# DropDownProfileItem
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
import { DropDownProfileItem } from 'asc-web-components';
|
||||
```
|
||||
|
||||
#### Description
|
||||
|
||||
To add preview of user profile, you must use DropDownProfileItem component inherited from DropDownItem and add isUserPreview parameter to DropDown.
|
||||
|
||||
To add an avatar username and email when you turn on isUserPreview parameter, you need to add parameters of Avatar component: avatarSource - link to user's avatar, avatarRole - user's role, displayName - user name and email - user’s email address.
|
||||
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
<DropDownProfileItem
|
||||
avatarRole='admin'
|
||||
avatarSource=''
|
||||
displayName='Jane Doe'
|
||||
email='janedoe@gmail.com' />
|
||||
```
|
||||
|
||||
#### Properties
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ------------------ | -------- | :------: | --------------------------- | -------------- | ----------------------------------------------------------------- |
|
||||
| `avatarRole` | `oneOf` | - |`owner`,`admin`,`guest`,`user`| `user` | Adds a user role table |
|
||||
| `avatarSource` | `string` | - | - | - | Avatar image source |
|
||||
| `displayName` | `string` | - | - | - | User name for display |
|
||||
| `email` | `string` | - | - | - | User email for display |
|
@ -0,0 +1,37 @@
|
||||
import React from 'react'
|
||||
import { storiesOf } from '@storybook/react'
|
||||
import withReadme from 'storybook-readme/with-readme'
|
||||
import Readme from './README.md'
|
||||
import { DropDown, DropDownItem, DropDownProfileItem } from 'asc-web-components'
|
||||
import Section from '../../../.storybook/decorators/section';
|
||||
|
||||
storiesOf('Components | DropDown', module)
|
||||
.addDecorator(withReadme(Readme))
|
||||
.add('base profile item', () => {
|
||||
|
||||
return (
|
||||
<Section>
|
||||
<DropDown
|
||||
isUserPreview={true}
|
||||
withArrow={true}
|
||||
directionX='right'
|
||||
manualY='1%'
|
||||
opened={true}>
|
||||
<DropDownProfileItem
|
||||
avatarRole='admin'
|
||||
avatarSource='https://static-www.onlyoffice.com/images/team/developers_photos/personal_44_2x.jpg'
|
||||
displayName='Jane Doe'
|
||||
email='janedoe@gmail.com' />
|
||||
<DropDownItem
|
||||
label='Profile'
|
||||
onClick={() => console.log('Profile clicked')} />
|
||||
<DropDownItem
|
||||
label='About'
|
||||
onClick={() => console.log('About clicked')} />
|
||||
<DropDownItem
|
||||
label='Log out'
|
||||
onClick={() => console.log('Log out clicked')} />
|
||||
</DropDown>
|
||||
</Section>
|
||||
)
|
||||
});
|
Loading…
Reference in New Issue
Block a user