Merge branch 'spdavid-dev' into dev

Author: estruyf

docs/documentation/docs/assets/TermPicker-autocomplete.png

@@ -0,0 +1,87 @@
+# Taxonomy Picker
+
+This control Allows you to select one or more Terms from a TermSet via its name or TermSet ID. You can also configure the control to select the child terms from a specific term in the TermSet by setting the AnchorId.
+
+!!! note "Disclaimer" 
+    This control makes use of the `ProcessQuery` API end-points to retrieve the managed metadata information. This will get changed once the APIs for managing managed metadata will become available.
+
+**Empty term picker**
+
+![Empty term picker](../assets/termpicker-empty.png)
+
+**Selecting terms**
+
+![Selecting terms](../assets/termpicker-selection.png)
+
+**Selected terms in picker** 
+
+![Selected terms in the input](../assets/termpicker-selected-terms.png)
+
+**Term picker: Auto Complete**
+
+![Selected terms in the input](../assets/termpicker-autocomplete.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 { TaxonomyPicker, IPickerTerms } from "@pnp/spfx-controls-react/lib/TaxonomyPicker";
+```
+
+- Use the `TaxonomyPicker` control in your code as follows:
+
+```TypeScript
+<TaxonomyPicker
+  allowMultipleSelections={true}
+  TermSetNameOrID="Countries"
+  panelTitle="Select Term"
+  label="Taxonomy Picker"
+  context={this.props.context}
+  onChange={this.onTaxPickerChange}
+  isTermSetSelectable={false}
+/>
+```
+
+- With the `onChange` property you can capture the event of when the terms in the picker has changed:
+
+```typescript
+private onTaxPickerChange(terms : IPickerTerms) {
+    console.log("Terms", terms);
+}
+```
+
+## Implementation
+
+The TaxonomyPicker control can be configured with the following properties:
+
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| panelTitle | string | yes | TermSet Picker Panel title. |
+| label | string | yes | Text displayed above the Taxonomy Picker. |
+| disabled | string | no | Specify if the control needs to be disabled. |
+| context | WebPartContext | yes | Context of the current web part. |
+| initialValues | IPickerTerms | no | Defines the selected by default term sets. |
+| allowMultipleSelections | boolean | no | Defines if the user can select only one or many term sets. Default value is false. |
+| TermSetNameOrID | string | yes | The name or Id of your TermSet that you would like the Taxonomy Picker to chose terms from. |
+| onChange | function | no |  captures the event of when the terms in the picker has changed. |
+| isTermSetSelectable | boolean | no | Specify if the TermSet itself is selectable in the tree view. |
+| anchorId | string | no | Set the anchorid to a child term in the TermSet to be able to select terms from that level and below. |
+
+Interface `IPickerTerm`
+
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| key | string | yes | The ID of the term |
+| name | string | yes | The name of the term |
+| path | string | yes | The path of the term |
+| termSet | string | yes | The Id of the parent TermSet of the term |
+| termSetName | string | no | The Name of the parent TermSet of the term |
+
+Interface `IPickerTerms`
+
+An Array of IPickerTerm
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/Placeholder)

docs/documentation/docs/assets/TermPicker-selection.png

@@ -33,12 +33,14 @@ The following controls are currently available:
 - [ListView](./controls/ListView) (List view control)
 - [Placeholder](./controls/Placeholder) (Control that can be used to show an initial placeholder if the web part has to be configured)
 - [SiteBreadcrumb](./controls/SiteBreadcrumb) (Breadcrumb control)
+- [SiteBreadcrumb](./controls/TaxonomyPicker) (Taxonomy Picker)
 - [WebPartTitle](./controls/WebPartTitle) (Customizable web part title control)
 - [IFrameDialog](./controls/IFrameDialog) (renders a Dialog with an iframe as a content)
 
 Field customizer controls:
 
-> **Note**: If you want to use these controls in your solution, first check out the start guide for these controls: [using the field controls](./controls/fields/main).
+!!! note
+    If you want to use these controls in your solution, first check out the start guide for these controls: [using the field controls](./controls/fields/main).
 
 - [FieldAttachmentsRenderer](./controls/fields/FieldAttachmentsRenderer) (renders Clip icon based on the provided `count` property is defined and greater than 0)
 - [FieldDateRenderer](./controls/fields/FieldDateRenderer) (renders date string as a simple text)

docs/documentation/docs/assets/termpicker-empty.png

@@ -8,6 +8,7 @@ pages:
     - Placeholder: 'controls/Placeholder.md'
     - SiteBreadcrumb: 'controls/SiteBreadcrumb.md'
     - WebPartTitle: 'controls/WebPartTitle.md'
+    - TaxonomyPicker: 'controls/TaxonomyPicker.md'
     - IFrameDialog: 'controls/IFrameDialog.md'
   - 'Field Controls':
     - 'Getting started': 'controls/fields/main.md'

docs/documentation/docs/assets/termpicker-limit-to-group.png

@@ -34,7 +34,7 @@ export interface ITaxonomyPickerProps  {
   /**
    * Id of a child term in the termset where to be able to selected and search the terms from
    */
-  ancoreId?: string;
+  anchorId?: string;
   /**
    * Specify if the term set itself is selectable in the tree view
    */

docs/documentation/docs/assets/termpicker-selected-terms.png

@@ -280,7 +280,7 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
             this.state.loaded === true && this.state.termSetAndTerms && (
               <div key={this.state.termSetAndTerms.Id} >
                 <h3>{this.state.termSetAndTerms.Name}</h3>
-                <TermParent anchorId={this.props.ancoreId}
+                <TermParent anchorId={this.props.anchorId}
                             autoExpand={null}
                             termset={this.state.termSetAndTerms}
                             isTermSetSelectable={this.props.isTermSetSelectable}