Fixing documentation typo / Markdown syntax

docs/documentation/docs/about/license.md

@@ -1,4 +1,4 @@
-License
+# License
 
 MIT License
 

docs/documentation/docs/beta.md

@@ -1,8 +1,10 @@
-# Testing out a beta release ![](https://img.shields.io/npm/v/@pnp/spfx-controls-react/next.svg)
+# Testing out a beta release
+
+![](https://img.shields.io/npm/v/@pnp/spfx-controls-react/next.svg)
 
 All you need to do for testing out a beta release of `@pnp/spfx-controls-react` is to install the dependency as follows:
 
-```
+```bash
 npm install @pnp/spfx-controls-react@next --save
 ```
 

docs/documentation/docs/controls/AccessibleAccordion.md

@@ -63,19 +63,16 @@ import {
 
 The `Accordion` control can be configured with the following properties:
 
-
 ### Accordion
 
 | Property | Type | Required | Description | Default |
 | ---- | ---- | ---- | ---- | ---- |
-| allowMultipleExpanded | boolean | no | Don't autocollapse items when expanding other items. | `false` |
+| allowMultipleExpanded | boolean | no | Don't auto-collapse items when expanding other items. | `false` |
 | allowZeroExpanded | boolean | no | Allow the only remaining expanded item to be collapsed. | `false` |
 | preExpanded | string[] | no | Accepts an array of strings and any `AccordionItem` whose `uuid` prop matches any one of these strings will be expanded on mount. | `[]` |
 | className | string | no | Class(es) to apply to element. | "accordion" |
 | onChange | (string[]) => void | no | Callback which is invoked when items are expanded or collapsed. Gets passed `uuid`s of the currently expanded `AccordionItem`s. | |
-| theme | IPartialTheme \| ITheme | no | Set Fluent UI Theme. If not set or set to null or not defined, the theme passed through context will be used, or the default theme of the page will be loaded. |
-
-
+| theme | IPartialTheme \| ITheme | no | Set Fluent UI Theme. If not set or set to null or not defined, the theme passed through context will be used, or the default theme of the page will be loaded. | |
 
 ### AccordionItem
 
@@ -85,7 +82,6 @@ The `Accordion` control can be configured with the following properties:
 | uuid | string \| number | no | Recommended for use with `onChange`. Will be auto-generated if not provided. | |
 | dangerouslySetExpanded | boolean | no | Enables external control of the expansion. **Warning: This may impact accessibility negatively, use at your own risk** | |
 
-
 ### AccordionItemHeading
 
 | Property | Type | Required | Description | Default |
@@ -95,24 +91,21 @@ The `Accordion` control can be configured with the following properties:
 
 ### AccordionItemButton
 
-| Property | Type | Required | Description | Default |
-| ---- | ---- | ---- | ---- | ---- |
-| className | string | no | Class(es) to apply to the 'button' element. | "accordion__button" |
-
+| Property  | Type   | Required | Description                                 | Default             |
+| --------- | ------ | -------- | ------------------------------------------- | ------------------- |
+| className | string | no       | Class(es) to apply to the 'button' element. | "accordion__button" |
 
 ### AccordionItemPanel
 
-| Property | Type | Required | Description | Default |
-| ---- | ---- | ---- | ---- | ---- |
-| className | string | no | Class(es) to apply to element. | "accordion__panel" |
-
+| Property  | Type   | Required | Description                    | Default            |
+| --------- | ------ | -------- | ------------------------------ | ------------------ |
+| className | string | no       | Class(es) to apply to element. | "accordion__panel" |
 
 ### AccordionItemState
 
-| Property | Type | Required | Description | Default |
-| ---- | ---- | ---- | ---- | ---- |
-| children | ({ expanded: boolean, disabled: booleam }): JSX.Element | yes | item's children. | |
-
+| Property | Type                                                    | Required | Description      | Default |
+| -------- | ------------------------------------------------------- | -------- | ---------------- | ------- |
+| children | ({ expanded: boolean, disabled: boolean }): JSX.Element | yes      | item's children. |         |
 
 ## Helpers
 
@@ -125,5 +118,4 @@ resetNextUuid : () => void
 Resets the internal counter for Accordion items' identifiers (including `id`
 attributes). For use in test suites and isomorphic frameworks.
 
-
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/AccessibleAccordion)

docs/documentation/docs/controls/Accordion.md

@@ -54,5 +54,4 @@ The `Accordion` control can be configured with the following properties:
 | collapsedIcon | string | no | Optional custom icon when accordion is collapsed [See Fluent UI icons](https://developer.microsoft.com/en-us/fluentui#/styles/web/icons)| ChevronRight |
 | expandedIcon | string | no | Optional custom icon when accordion is expanded [See Fluent UI icons](https://developer.microsoft.com/en-us/fluentui#/styles/web/icons)| ChevronDown |
 
-
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/Accordion)

docs/documentation/docs/controls/AdaptiveCardDesignerHost.md

@@ -17,9 +17,9 @@ All Inputs Elements and Actions of Adaptive Cards have been redefined using Flue
 
 Thanks to the "context" property that allows you to pass the SPFx context, whether the "data" property is passed or not, a new field called @context will be injected into the data object.
 
-This allows, using Adaptive Cards templating syntax and binding feature of the Designer, to access to the context informations.
+This allows, using Adaptive Cards templating syntax and binding feature of the Designer, to access to the context information.
 
-For more info please to refear tot he documentation of [AdaptiveCardHost ](http://www.google.com)control
+For more info please to refer tot he documentation of [AdaptiveCardHost ](http://www.google.com)control
 
 Here is an example of the control in action inside a Web Part:
 
@@ -89,7 +89,7 @@ The `AdaptiveCardDesignerHost` control can be configured with the following prop
 | data | { "$root": object } | false | Set Data Source for template rendering | - |
 | newCardPayload | object | false | Set Adaptive Card payload for the New Card | - |
 | hostContainers | HostContainer[] | false | Set custom HostContainers | [] |
-| supportedTargetVersions | Version[] | false | Set the suported Versions | [Versions.v1_5] |
+| supportedTargetVersions | Version[] | false | Set the supported Versions | [Versions.v1_5] |
 | snippets | IToolboxSnippet[] | false | Set the Toolbox Snippets | [] |
 | bindingPreviewMode | BindingPreviewMode | false | Set the Binding preview mode | BindingPreviewMode.GeneratedData |
 | enableDataBindingSupport | boolean | false | Enable the support for Data Binding | true |

docs/documentation/docs/controls/AdaptiveCardHost.md

@@ -13,15 +13,16 @@ All Elements and Actions of Adaptive Cards have been redefined using Fluent UI R
 
 Thanks to the "context" property that allows you to pass the SPFx context, whether the "data" property is passed or not, a new field called @context will be injected into the data object.
 
-This allows, using Adaptive Cards templating syntax, to access to the context informations using the following fields (for more information on these fields, refer to the [BaseComponentContext](https://docs.microsoft.com/en-us/javascript/api/sp-component-base/basecomponentcontext) class):
+This allows, using Adaptive Cards templating syntax, to access to the context information using the following fields (for more information on these fields, refer to the [BaseComponentContext](https://docs.microsoft.com/javascript/api/sp-component-base/basecomponentcontext) class):
+
 - "theme": property "theme" from the current theme applied to the card.
-- "aadInfo": Azure AD informations retrieved from the SPFx context object.
-- "cultureInfo": Culture informations retrieved from the SPFx context object.
-- "userInfo": User informations retrieved from the SPFx context object.
-- "spListInfo": Current List informations retrieved from the SPFx context object.
-- "spListItemInfo": Current List item informations retrieved from the SPFx context object.
-- "spSiteInfo": Current Site informations retrieved from the SPFx context object.
-- "spWebInfo": Current Web informations retrieved from the SPFx context object.
+- "aadInfo": Azure AD information retrieved from the SPFx context object.
+- "cultureInfo": Culture information retrieved from the SPFx context object.
+- "userInfo": User information retrieved from the SPFx context object.
+- "spListInfo": Current List information retrieved from the SPFx context object.
+- "spListItemInfo": Current List item information retrieved from the SPFx context object.
+- "spSiteInfo": Current Site information retrieved from the SPFx context object.
+- "spWebInfo": Current Web information retrieved from the SPFx context object.
 
 The Adaptive Cards version supported is 1.5, by using the 'adaptivecards' npm package version 2.10.0.
 
@@ -91,7 +92,7 @@ import { AdaptiveCardHost, IAdaptiveCardHostActionResult, AdaptiveCardHostThemeT
 />
 ```
 
-- Example on use the `AdaptiveCardHost` control with SharePoint Theme "Section Variation" ('this.props.theme' is the theme that come from the Web Part) */):
+- Example on use the `AdaptiveCardHost` control with SharePoint Theme "Section Variation" ('this.props.theme' is the theme that come from the Web Part):
 
 ```TypeScript
 <AdaptiveCardHost
@@ -155,28 +156,28 @@ The `AdaptiveCardHost` control can be configured with the following properties:
 | hostConfig | object | no | Set custom HostConfig. |
 | onInvokeAction | (action: IAdaptiveCardActionResult) => void | yes | Invoked every time an Action is performed. |
 | onError | (error: Error) => void | yes | Invoked every time an exception occurs in the rendering phase. |
-| onSetCustomElements | (registry: CardObjectRegistry<CardElement>) => void | no | Invoked to manage Elements to the current Adaptive Card instance. |
-| onSetCustomActions | (registry: CardObjectRegistry<Action>) => void | no | Invoked to manage Actions to the current Adaptive Card instance. |
+| onSetCustomElements | (registry: CardObjectRegistry&lt;CardElement&gt;) => void | no | Invoked to manage Elements to the current Adaptive Card instance. |
+| onSetCustomActions | (registry: CardObjectRegistry&lt;Action&gt;) => void | no | Invoked to manage Actions to the current Adaptive Card instance. |
 | onUpdateHostCapabilities | (hostCapabilities: HostCapabilities) => void | no | Invoked to manage the HostCapabilities object like add custom properties. |
 | context | BaseComponentContext | no | Set the context from the SPFx component. If set, some context properties will be automatically injected into the data object, so they can be used by the Adaptive Cards binding engine. |
 
 Interface `IAdaptiveCardHostActionResult`
 
-| Property | Type | Required | Description |
-| ---- | ---- | ---- | ---- |
-| type | string | yes | Type of the Action. |
-| title | string | no | Title of the Action. |
-| url | string | no | Url of the Action. |
-| data | object | no | Data of the Action. |
-| verb | string | no | Verb of the Action. |
+| Property | Type   | Required | Description          |
+| -------- | ------ | -------- | -------------------- |
+| type     | string | yes      | Type of the Action.  |
+| title    | string | no       | Title of the Action. |
+| url      | string | no       | Url of the Action.   |
+| data     | object | no       | Data of the Action.  |
+| verb     | string | no       | Verb of the Action.  |
 
 Enum `AdaptiveCardHostThemeType`
 
-| Type | Description |
-| ---- | ---- |
-| SharePoint | Use the SharePoint current Theme or Theme Variation |
-| Teams | Use the Fluent UI Teams default theme |
-| TeamsDark | Use the Fluent UI Teams dark theme |
-| TeamsHighContrast | Use the Fluent UI Teams high contrast theme |
+| Type              | Description                                         |
+| ----------------- | --------------------------------------------------- |
+| SharePoint        | Use the SharePoint current Theme or Theme Variation |
+| Teams             | Use the Fluent UI Teams default theme               |
+| TeamsDark         | Use the Fluent UI Teams dark theme                  |
+| TeamsHighContrast | Use the Fluent UI Teams high contrast theme         |
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/AdaptiveCardHost)

docs/documentation/docs/controls/AnimatedDialog.md

@@ -1,8 +1,9 @@
 # Animated Dialog
 
-Animated Dialog control is an extended version of the [Office UI Fabric React Dialog](https://developer.microsoft.com/en-us/fluentui#/controls/web/dialog#IDialog). Animated Dialog control adds the following to the dialog 
- - Entrance and exit animations
- - Animated icon above the title
+Animated Dialog control is an extended version of the [Office UI Fabric React Dialog](https://developer.microsoft.com/en-us/fluentui#/controls/web/dialog#IDialog). Animated Dialog control adds the following to the dialog:
+
+- Entrance and exit animations
+- Animated icon above the title
 
 This control uses [Animate.css](https://animate.style/) to add the animations.
 
@@ -12,7 +13,7 @@ Here is an example of the control in action:
 
 ## Animate.css and animation names
 
-[Animate.css](https://animate.style/) is a library that adds css animtions to controls. The website has all the names of the animations and any of them can be used in the `Animated Dialog` control. The default entrance animation name used in this control is `bounceIn` and the default exit animaton name is `zoomOut`.
+[Animate.css](https://animate.style/) is a library that adds css animations to controls. The website has all the names of the animations and any of them can be used in the `Animated Dialog` control. The default entrance animation name used in this control is `bounceIn` and the default exit animation name is `zoomOut`.
 
 ## How to use this control in your solutions
 
@@ -25,7 +26,7 @@ import { AnimatedDialog } from "@pnp/spfx-controls-react/lib/AnimatedDialog";
 
 ## Different ways of using the control
 
-### 1. Simple way 
+### 1. Simple way
 
 The code below adds a dialog with an entrance animation of `bounceIn` and exit animation of `zoomOut`. (These are the default animations)
 
@@ -63,6 +64,7 @@ const animatedModalProps: IModalProps = {
         </DialogFooter>
 </AnimatedDialog>
 ```
+
 #### Simple animated dialog
 
 ![Simple animated dialog control](../assets/DefaultAnimatedDialog.gif)
@@ -115,12 +117,13 @@ const animatedModalProps: IModalProps = {
 ### 3. Adding icons and functions
 
 The code below does the following:
+
 - adds an icon (question mark) above the title
 - adds `Yes` and `No` buttons in the footer as `showAnimatedDialogFooter` is set to `true`.
-- passes 3 functions
+- passes 3 functions:
     - onOkClick : The function that gets executed when the `Ok/Yes` button is clicked.
     - onSuccess : The function that gets executed on successful operation of the above function.
-    - onError: The function that gets executed when the `onOkClick` function fails. 
+    - onError: The function that gets executed when the `onOkClick` function fails.
 
 ```TypeScript
 // Initial state
@@ -338,16 +341,15 @@ In addition to the`Office UI Fabric dialog` [properties](https://developer.micro
 
 | Property | Type | Required | Description | Default |
 | ---- | ---- | ---- | ---- | ---- |
-| dialogAnimationInType | string | no | The name of the dialog entrace animation. See [animate.css](https://animate.style/) for values | bounceIn |
+| dialogAnimationInType | string | no | The name of the dialog entrance animation. See [animate.css](https://animate.style/) for values | bounceIn |
 | dialogAnimationOutType | string | no | The name of the dialog exit animation. See [animate.css](https://animate.style/) for values | zoomOut |
 | iconName | string | no | The name of the Fabric UI icon that appears above title. | |
-| iconAnimationType | string | no | The name of the icon entrace animation. See [animate.css](https://animate.style/) for values. | zoomIn |
-| showAnimatedDialogFooter | boolean | no | Should the animated dialog show it's own footer. [See example 3 and 4](#3-Adding-icons-and-functions) above for usage. | false |
-| okButtonText | string | no | The text of the the OK button if showAnimatedDialogFooter is `true`. [See example 3](#3-Adding-icons-and-functions) above for usage. | Ok |
-| cancelButtonText | string | no | The text of the the Cancel button if showAnimatedDialogFooter is `true`. [See example 3](#3-Adding-icons-and-functions) above for usage. | Cancel |
-| onOkClick | function | no | The function to be executed when Ok button is clicked. Valid only when showAnimatedDialogFooter is `true`. [See example 3](#3-Adding-icons-and-functions) above for usage. | |
-| onSuccess | function | no | The function to be executed after successful execution of the OK button function. Valid only when showAnimatedDialogFooter is `true`. [See example 3](#3-Adding-icons-and-functions) above for usage. | |
-| onError | function | no | The function to be executed after unsuccessful execution of the OK button function. Valid only when showAnimatedDialogFooter is `true`. [See example 3](#3-Adding-icons-and-functions) above for usage. | |
-
+| iconAnimationType | string | no | The name of the icon entrance animation. See [animate.css](https://animate.style/) for values. | zoomIn |
+| showAnimatedDialogFooter | boolean | no | Should the animated dialog show it's own footer. [See example 3 and 4](#3-adding-icons-and-functions) above for usage. | false |
+| okButtonText | string | no | The text of the the OK button if showAnimatedDialogFooter is `true`. [See example 3](#3-adding-icons-and-functions) above for usage. | Ok |
+| cancelButtonText | string | no | The text of the the Cancel button if showAnimatedDialogFooter is `true`. [See example 3](#3-adding-icons-and-functions) above for usage. | Cancel |
+| onOkClick | function | no | The function to be executed when Ok button is clicked. Valid only when showAnimatedDialogFooter is `true`. [See example 3](#3-adding-icons-and-functions) above for usage. | |
+| onSuccess | function | no | The function to be executed after successful execution of the OK button function. Valid only when showAnimatedDialogFooter is `true`. [See example 3](#3-adding-icons-and-functions) above for usage. | |
+| onError | function | no | The function to be executed after unsuccessful execution of the OK button function. Valid only when showAnimatedDialogFooter is `true`. [See example 3](#3-adding-icons-and-functions) above for usage. | |
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/AnimatedDialog)