From 565277f72183ba8e26e589c5ee5e10e61ac35f56 Mon Sep 17 00:00:00 2001
From: Ilya Oleshko <oleshko.ilya@gmail.com>
Date: Wed, 7 Aug 2019 13:16:27 +0300
Subject: [PATCH] web: Components: Added DropDownProfileItem story

---
 .../drop-down-profile-item/README.md          | 32 ++++++++++++++++
 .../drop-down-profile-item.stories.js         | 37 +++++++++++++++++++
 2 files changed, 69 insertions(+)
 create mode 100644 web/ASC.Web.Storybook/stories/drop-down/drop-down-profile-item/README.md
 create mode 100644 web/ASC.Web.Storybook/stories/drop-down/drop-down-profile-item/drop-down-profile-item.stories.js

diff --git a/web/ASC.Web.Storybook/stories/drop-down/drop-down-profile-item/README.md b/web/ASC.Web.Storybook/stories/drop-down/drop-down-profile-item/README.md
new file mode 100644
index 0000000000..3620c18c74
--- /dev/null
+++ b/web/ASC.Web.Storybook/stories/drop-down/drop-down-profile-item/README.md
@@ -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                                            |
\ No newline at end of file
diff --git a/web/ASC.Web.Storybook/stories/drop-down/drop-down-profile-item/drop-down-profile-item.stories.js b/web/ASC.Web.Storybook/stories/drop-down/drop-down-profile-item/drop-down-profile-item.stories.js
new file mode 100644
index 0000000000..5df60cef5a
--- /dev/null
+++ b/web/ASC.Web.Storybook/stories/drop-down/drop-down-profile-item/drop-down-profile-item.stories.js
@@ -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>
+    )
+  });
\ No newline at end of file