Merge branch 'ap-peoplepicker' of https://github.com/AsishP/sp-dev-fx-controls-react into AsishP-ap-peoplepicker

Author: estruyf

docs/documentation/docs/assets/Peoplepicker-multiplechoices.png

@@ -0,0 +1,70 @@
+# People Picker
+
+This control renders a People picker field which can be used to select one or many users from a SharePoint group, or filter from all users in a SharePoint site. You could also set the control as mandatory and show a custom error message if field is empty.
+
+**Empty People Picker control with error message and tooltip**
+
+![People Picker](../assets/Peoplepicker-witherrorandtooltip.png)
+
+**Selecting People**
+
+![Selecting People](../assets/Peoplepicker-selectingchoices.png)
+
+**Selected people** 
+
+![Selected people](../assets/Peoplepicker-multiplechoices.png)
+
+
+## How to use this control in your solutions
+
+- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../#getting-started) page for more information about installing the dependency.
+- Import the following modules to your component:
+
+```TypeScript
+import { PeoplePicker } from "@pnp/spfx-controls-react/lib/PeoplePicker";
+```
+
+- Use the `PeoplePicker` control in your code as follows:
+
+```TypeScript
+<PeoplePicker
+    context={this.props.context}
+    titleText="People Picker"
+    personSelectionLimit={3}
+    groupName = {"Team Site Owners"} //leave this blank in case you want to filter from all users
+    showtooltip = {true}
+    isRequired = {true}
+    selectedItems = {this._getPeoplePickerItems}
+/>
+```
+
+- With the `selectedItems` property you can get the selected People in the Peoplepicker :
+
+```typescript
+private _getPeoplePickerItems(items: any[]) {
+    console.log('Items:', items);
+  }
+```
+
+## Implementation
+
+The People picker control can be configured with the following properties:
+
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| context | WebPartContext | yes | Context of the current web part. |
+| groupName | string | yes | group from which users are fetched. Leave it blank if need to filter all users |
+| titleText | string | yes | Text to be displayed on the control |
+| personSelectionLimit | number | no | Defines the limit of people that can be selected in the control|
+| isRequired | boolean | no | Set if the control is required or not |
+| errorMessage | string | no | Specify the error message to display |
+| errorMessageclassName | string | no | applies custom styling to the error message section|
+| showtooltip | boolean | no | Defines if need a tooltip or not |
+| tooltip | string | no | Specify the tooltip message to display |
+| tooltipDirectional | DirectionalHint | no | Direction where the tooltip would be shown |
+| selectedItems | function | no | get the selected users in the control|
+| peoplePickerWPclassName | string | no | applies custom styling to the people picker element|
+| peoplePickerCntrlclassName | string | no | applies custom styling to the people picker control only|
+
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/PeoplePicker)

docs/documentation/docs/assets/Peoplepicker-selectingchoices.png

@@ -0,0 +1 @@
+export * from './controls/peoplepicker/index';

docs/documentation/docs/assets/Peoplepicker-witherrorandtooltip.png

@@ -0,0 +1,84 @@
+import { IPersonaProps, DirectionalHint } from "office-ui-fabric-react";
+import { WebPartContext } from '@microsoft/sp-webpart-base';
+
+/**
+ * Used to display a placeholder in case of no or temporary content. Button is optional.
+ *
+ */
+export interface IPeoplePickerProps {
+  /**
+   * Context of the component
+   */
+  context: WebPartContext;
+  /**
+   * Name of SharePoint Group
+   */
+  groupName: string;
+  /** 
+   * Text of the Control 
+  */
+  titleText: string;
+  /**
+   * Selection Limit of Control
+   */
+  personSelectionLimit?: number;
+  /**
+   * Show or Hide Tooltip
+   */
+  showtooltip? : boolean;
+  /**
+   * People Field is mandatory
+   */
+  isRequired? : boolean;
+  /**
+   * Mandatory field error message
+   */
+  errorMessage? : string;
+  /**
+   * Method to check value of People Picker text
+   */
+  selectedItems?: (items: any[]) => void; 
+  /**
+   * Tooltip Message
+   */
+  tooltipMessage? : string;
+  /**
+   * Directional Hint of tool tip
+   */
+  tooltipDirectional? : DirectionalHint;
+   /**
+   * Class Name for the whole People picker control
+   */
+  peoplePickerWPclassName?:string;
+  /**
+   * Class Name for the People picker control
+   */
+  peoplePickerCntrlclassName?: string;
+  /**
+   * Class Name for the Error Section
+   */
+  errorMessageclassName?: string;
+}
+
+export interface IPeoplePickerState {
+  selectedPersons?: IPersonaProps[];
+  mostRecentlyUsedPersons: IPersonaProps[];
+  currentSelectedPersons: IPersonaProps[];
+  allPersons: [{
+    id: string,
+    imageUrl: string,
+    imageInitials: string,
+    primaryText: string, //Name
+    secondaryText: string, //Role
+    tertiaryText: string, //status
+    optionalText: string //stgring
+  }];
+  delayResults?: boolean;
+  currentPicker?: number | string;
+  peoplePersonaMenu?: IPersonaProps[];
+  peoplePartTitle: string;
+  peoplePartTooltip : string;
+  isLoading : boolean;
+  peopleValidatorText? : string;
+  showmessageerror: boolean;
+}

docs/documentation/docs/controls/PeoplePicker.md

@@ -0,0 +1,3 @@
+.defaultClass {
+  color : black;    
+}