pnp · estruyf · Apr 24, 2019 · Feb 1, 2019 · Feb 2, 2019 · Feb 2, 2019
diff --git a/CHANGELOG.JSON b/CHANGELOG.JSON
@@ -1,5 +1,37 @@
 {
   "versions": [
+    {
+      "version": "1.13.0",
+      "changes": {
+        "new": [
+          "`Progress`: New control added [#230](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/230)",
+          "`DateTimePicker`: New control added [#21](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/21)",
+          "`RichText`: New control added [#20](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/20)"
+        ],
+        "enhancements": [
+          "`SecurityTrimmedControl`: Support for item and folder permission checks added [#271](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/271)",
+          "Retrieve the user its profile picture from SharePoint instead of Office 365 / Outlook [#248](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/248)",
+          "Added `Lithuanian` localization [#247](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/247)",
+          "`FileTypeIcon`: Added support for PDF icon file types [#260](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/260)",
+          "`WebPartTitle`: Added the ability to render a `see all` link or custom component [#228](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/228)"
+        ],
+        "fixes": [
+          "`PeoplePicker`: Fix for single quotes around the ms-peoplepicker class [#275](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/275)",
+          "`RichText`: Fix for toolbar that appears at top of the page [#265](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/265)",
+          "`ListItemAttachments`: Updated import statement reference in the documentation [#254](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/254)",
+          "`ListView`: Updated documentation for the `iconFieldName` property [#245](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/245)"
+        ]
+      },
+      "contributions": [
+        "[Francis](https://github.com/PzKfWg)",
+        "[Fredrik Andreasson](https://github.com/Varuuna)",
+        "[Hugo Bernier](https://github.com/hugoabernier)",
+        "[Tautvydas Duda](https://github.com/ltdu)",
+        "[Özgür Ersoy](https://github.com/moersoy)",
+        "[Robert Lindström](https://github.com/robert-lindstrom)",
+        "[Alex Terentiev](https://github.com/AJIXuMuK)"
+      ]
+    },
     {
       "version": "1.12.0",
       "changes": {

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,32 @@
 # Releases
 
+## 1.13.0
+
+### New control(s)
+
+- `Progress`: New control added [#230](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/230)
+- `DateTimePicker`: New control added [#21](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/21)
+- `RichText`: New control added [#20](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/20)
+
+### Enhancements
+
+- `SecurityTrimmedControl`: Support for item and folder permission checks added [#271](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/271)
+- Retrieve the user its profile picture from SharePoint instead of Office 365 / Outlook [#248](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/248)
+- Added `Lithuanian` localization [#247](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/247)
+- `FileTypeIcon`: Added support for PDF icon file types [#260](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/260)
+- `WebPartTitle`: Added the ability to render a `see all` link or custom component [#228](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/228)
+
+### Fixes
+
+- `PeoplePicker`: Fix for single quotes around the ms-peoplepicker class [#275](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/275)
+- `RichText`: Fix for toolbar that appears at top of the page [#265](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/265)
+- `ListItemAttachments`: Updated import statement reference in the documentation [#254](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/254)
+- `ListView`: Updated documentation for the `iconFieldName` property [#245](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/245)
+
+### Contributors
+
+Special thanks to our contributors (in alphabetical order): [Francis](https://github.com/PzKfWg), [Fredrik Andreasson](https://github.com/Varuuna), [Hugo Bernier](https://github.com/hugoabernier), [Tautvydas Duda](https://github.com/ltdu), [Özgür Ersoy](https://github.com/moersoy), [Robert Lindström](https://github.com/robert-lindstrom), [Alex Terentiev](https://github.com/AJIXuMuK).
+
 ## 1.12.0
 
 ### New control(s)

diff --git a/docs/documentation/docs/about/release-notes.md b/docs/documentation/docs/about/release-notes.md
@@ -1,5 +1,32 @@
 # Releases
 
+## 1.13.0
+
+### New control(s)
+
+- `Progress`: New control added [#230](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/230)
+- `DateTimePicker`: New control added [#21](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/21)
+- `RichText`: New control added [#20](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/20)
+
+### Enhancements
+
+- `SecurityTrimmedControl`: Support for item and folder permission checks added [#271](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/271)
+- Retrieve the user its profile picture from SharePoint instead of Office 365 / Outlook [#248](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/248)
+- Added `Lithuanian` localization [#247](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/247)
+- `FileTypeIcon`: Added support for PDF icon file types [#260](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/260)
+- `WebPartTitle`: Added the ability to render a `see all` link or custom component [#228](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/228)
+
+### Fixes
+
+- `PeoplePicker`: Fix for single quotes around the ms-peoplepicker class [#275](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/275)
+- `RichText`: Fix for toolbar that appears at top of the page [#265](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/265)
+- `ListItemAttachments`: Updated import statement reference in the documentation [#254](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/254)
+- `ListView`: Updated documentation for the `iconFieldName` property [#245](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/245)
+
+### Contributors
+
+Special thanks to our contributors (in alphabetical order): [Francis](https://github.com/PzKfWg), [Fredrik Andreasson](https://github.com/Varuuna), [Hugo Bernier](https://github.com/hugoabernier), [Tautvydas Duda](https://github.com/ltdu), [Özgür Ersoy](https://github.com/moersoy), [Robert Lindström](https://github.com/robert-lindstrom), [Alex Terentiev](https://github.com/AJIXuMuK).
+
 ## 1.12.0
 
 ### New control(s)

diff --git a/docs/documentation/docs/assets/DateTimePicker-12h.png b/docs/documentation/docs/assets/DateTimePicker-12h.png
diff --git a/docs/documentation/docs/assets/DateTimePicker-24h.png b/docs/documentation/docs/assets/DateTimePicker-24h.png
diff --git a/docs/documentation/docs/assets/DateTimePicker-dateOnly.png b/docs/documentation/docs/assets/DateTimePicker-dateOnly.png
diff --git a/docs/documentation/docs/assets/Progress.png b/docs/documentation/docs/assets/Progress.png
diff --git a/docs/documentation/docs/assets/RichTextOutput.gif b/docs/documentation/docs/assets/RichTextOutput.gif
diff --git a/docs/documentation/docs/assets/webparttitle-morelink.png b/docs/documentation/docs/assets/webparttitle-morelink.png
diff --git a/docs/documentation/docs/controls/DateTimePicker.md b/docs/documentation/docs/controls/DateTimePicker.md
@@ -0,0 +1,88 @@
+# DateTimePicker control
+
+This control allows you to select dates from a calendar and optionally the time of day using dropdown controls. You can configure the control to use 12 or 24-hour clock.
+
+Here are some examples of the control:
+
+**DateTime Picker 12-hour clock**  
+![DateTimePicker 12-hour clock](../assets/DateTimePicker-12h.png)
+
+**DateTime Picker 24-hour clock**  
+![DateTimePicker 24-hour clock](../assets/DateTimePicker-24h.png)
+
+**DateTime Picker Date Only**  
+![DateTimePicker Date Only](../assets/DateTimePicker-dateOnly.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 control into your component. The DateConvention and TimeConvention controls if the time of day controls are shown and the time format used (12 hours/24 hours).
+
+```TypeScript
+import { DateTimePicker, DateConvention, TimeConvention } from '@pnp/spfx-controls-react/lib/dateTimePicker';
+```
+- Use the `DateTimePicker` control in your code as follows, either as an uncontrolled or a controlled component:
+
+```TypeScript
+// Uncontrolled
+<DateTimePicker label="DateTime Picker - 12h"
+                dateConvention={DateConvention.DateTime}
+                timeConvention={TimeConvention.Hours12} />
+
+// Controlled
+<DateTimePicker label="DateTime Picker - 24h"
+                dateConvention={DateConvention.DateTime}
+                timeConvention={TimeConvention.Hours24}
+                value={this.state.date}
+                onChange={this.handleChange} />
+```
+
+## Implementation
+
+The `DateTimePicker` control can be configured with the following properties:
+
+
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| label | string | no | Property field label displayed on top. |
+| disabled | boolean | no | Specifies if the control is disabled or not. |
+| formatDate | function | no | Defines a formatDate function that can override the output value in Date picker. |
+| dateConvention | DateConvention | no | Defines the date convention to use. The default is date and time.|
+| timeConvention | TimeConvention | no | Defines the time convention to use. The default value is the 24-hour clock convention. |
+| firstDayOfWeek | DayOfWeek | no | Specify the first day of the week for your locale. |
+| key | string | no | A unique key that indicates the identity of this control |
+| onGetErrorMessage | function | no | The method is used to get the validation error message and determine whether the input value is valid or not. See [this documentation](https://dev.office.com/sharepoint/docs/spfx/web-parts/guidance/validate-web-part-property-values) to learn how to use it. |
+| showGoToToday | boolean | no | Controls whether the "Go to today" link should be shown or not |
+| isMonthPickerVisible | boolean | no | Controls whether the month picker is shown beside the day picker or hidden. |
+| showMonthPickerAsOverlay | boolean | no | Show month picker on top of date picker when visible. |
+| showWeekNumbers | boolean | no | Controls whether the calendar should show the week number (weeks 1 to 53) before each week row |
+| strings | IDatePickerStrings | no | Localized strings to use in the DateTimePicker |
+| value | Date | no | Default value of the DatePicker, if any |
+| onChange | function | no | Callback issued when date or time is changed |
+| showSeconds | boolean | no | Specifies, if seconds dropdown should be shown, defaults to false. |
+
+Enum `DateConvention`
+
+| Name | Description |
+| ---- | ---- |
+| DateTime | Shows the date and time picker |
+| Date | Shows only the date picker |
+
+Enum `TimeConvention`
+
+| Name | Description |
+| ---- | ---- |
+| Hours12 | Specify the hours in 12-hours (AM / PM) time convention. |
+| Hours24 | Specify the hours in 24-hours time convention. |
+
+Interface `IDateTimePickerStrings` extends [IDatePickerStrings](https://developer.microsoft.com/en-us/fabric#/components/datepicker)
+
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| dateLabel | string | no | Label for the date selector. |
+| timeLabel | string | no | Label for the time of day selector. |
+| timeSeparator | string | no | Separator between time of day components (hours, minutes, seconds). |
+| amDesignator | string | no | Used as AM designator when 12-hour clock is used. |
+| pmDesignator | string | no | Used as PM designator when 12-hour clock is used. |
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/DateTimePicker)
diff --git a/docs/documentation/docs/controls/ListItemAttachments.md b/docs/documentation/docs/controls/ListItemAttachments.md
@@ -18,7 +18,7 @@ Here is an example of the control:
 - Import the control into your component:
 
 ```TypeScript
-import { ListItemAttachments } from '@pnp/spfx-controls-react/listItemAttachments';
+import { ListItemAttachments } from '@pnp/spfx-controls-react/lib/ListItemAttachments';
 ```
 - Use the `ListItemAttachments` control in your code as follows:
 

diff --git a/docs/documentation/docs/controls/ListView.md b/docs/documentation/docs/controls/ListView.md
@@ -67,7 +67,7 @@ The ListView control can be configured with the following properties:
 
 | Property | Type | Required | Description |
 | ---- | ---- | ---- | ---- |
-| iconFieldName | string | no | Specify the name of the file URL path which will be used to show the file icon. |
+| iconFieldName | string | no | Specify the items' property name that defines the file URL path which will be used to show the file icon. This automatically creates a column and renders the file icon. |
 | items | any[]| yes | Items to render in the list view. |
 | viewFields | IViewField[] | no | The fields you want to render in the list view. Check the `IViewField` implementation to see which properties you can define. |
 | compact | boolean | no | Boolean value to indicate if the control should render in compact mode. By default this is set to `false`. |

diff --git a/docs/documentation/docs/controls/Map.md b/docs/documentation/docs/controls/Map.md
@@ -1,6 +1,6 @@
 # Map control
 
-This control renders can be used to render a map in your solution. The control has also the ability to search for new locations.
+This control renders a map in your solution. The control has also the ability to search for new locations.
 
 Here is an example of the control in action:
 

diff --git a/docs/documentation/docs/controls/Progress.md b/docs/documentation/docs/controls/Progress.md
@@ -0,0 +1,120 @@
+# Progress control
+
+This control shows progress of multiple SEQUENTIALLY executed actions.
+
+Here is an example of the control in action:
+
+![Progress control](../assets/Progress.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 { Progress } from "@pnp/spfx-controls-react/lib/Progress";
+```
+
+- Use the `Progress` control in your code as follows:
+
+```TypeScript
+<Progress title={'Progress Test'}
+          showOverallProgress={true}
+          showIndeterminateOverallProgress={false}
+          hideNotStartedActions={false}
+          actions={this.state.progressActions}
+          currentActionIndex={this.state.currentProgressActionIndex}
+          longRunningText={'This operation takes longer than expected'}
+          longRunningTextDisplayDelay={7000}
+          height={'350px'} />
+```
+
+**Note**: the control itself is not responsible for actions' execution. It only renders the actions, overall progress and actions' execution states.
+When using the control, you should implement actions execution.
+As example, you can have a base class that implements `IProgressAction` interface and has an `execute` method:
+
+```TypeScript
+class BaseAction implements IProgressAction {
+  public get title(): string { ... }
+  public get subActionsTitles(): string[] { ... }
+  public get hasError(): boolean { ... }
+  public get errorMessage(): string { ... }
+  public async execute(): Promise<void> { ... }
+}
+```
+
+Then, you have multiple actions derived from the base one:
+
+```TypeScript
+class FirstAction extends BaseAction {
+  public async execute(): Promise<void> { 
+    // implementation for FirstAction
+  }
+}
+
+class SecondAction extends BaseAction {
+  public async execute(): Promise<void> {
+    // implementation for SecondAction
+  }
+}
+```
+
+Now, in a component, where `Progress` is used you can have code as below:
+
+```TypeScript
+export interface IYourComponentState {
+  actions: IProgressAction[];
+  currentActionIndex?: number;
+  // other state properties
+}
+
+// ...
+
+export class YourComponent extends React.Component<IYourComponentProps, IYourComponentState> {
+  // all other code, including render with Progress reference listed above
+
+  private _initActions() {
+    this.setState({
+      actions: [
+        new FirstAction(),
+        new SecondAction()
+      ]
+    });
+  }
+
+  private async _execute() {
+    for (let i = 0; i <= this.state.actions.length; i++) {
+      this.setState(currentActionIndex: i);
+
+      if (i < this.state.actions.length) {
+        await this.state.actions[i].execute();
+      }
+    }
+  }
+}
+```
+
+## Implementation
+
+The `Progress` component can be configured with the following properties:
+
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| title | string | no | Title, or header, of the progress. |
+| showOverallProgress | boolean | true | Specifies if overall progress indicator should be shown. |
+| showIndeterminateOverallProgress | boolean | no | Specifies if indeterminate overall progress animation will be shown. |
+| hideNotStartedActions | boolean | yes | Specifies if not started actions should not be rendered. |
+| actions | IProgressAction[] | yes | Progress actions |
+| currentActionIndex | number | no | Index of currently executing action |
+| heigth | string | no | Height of the component |
+| longRunningText | string | no | Text to be displayed for long running operations |
+| longRunningTextDisplayDelay | number | no | Delay until longRunningText is displayed im milliseconds. If not set or 0 longRunningText is displayed right away. |
+| className | string | no | Class name to be applied to the component |
+| headerClassName | string | no | Header class name. Header contains title, progress indicator, and delay text |
+| actionsContainerClassName | string | no | Actions container class name |
+| actionClassName | string | no | Single action class name |
+| successIconName | string | no | Success icon name. Default is CheckMark |
+| errorIconName | string | no | Error icon name. Default is Error |
+| inProgressIconName | string | no | InProgress icon name. Default is '', spinner is displayed. |
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/Progress)