Documentation updates

estruyf · estruyf · commit 5532f6e42da3 · 2018-01-26T11:37:37.000+02:00
diff --git a/docs/documentation/docs/about/release-notes.md b/docs/documentation/docs/about/release-notes.md
@@ -1,5 +1,10 @@
 # Releases
 
+## 1.2.0
+
+- Field controls are added to the project
+- `IFrameDialog` was added to the project
+
 ## 1.1.3
 
 - `FileTypeIcon` icon fixed. This control should now also work in SPFx extensions.
diff --git a/docs/documentation/docs/controls/FileTypeIcon.md b/docs/documentation/docs/controls/FileTypeIcon.md
@@ -6,7 +6,7 @@ This control returns the file type icon based on a specified file path or applic
 
 ## 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.
+- 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
diff --git a/docs/documentation/docs/controls/IFrameDialog.md b/docs/documentation/docs/controls/IFrameDialog.md
@@ -8,7 +8,7 @@ Here is an example of the control in action:
 
 ## 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.
+- 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
diff --git a/docs/documentation/docs/controls/ListView.md b/docs/documentation/docs/controls/ListView.md
@@ -10,7 +10,7 @@ This control renders a list view for the given set of items.
 
 ## 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.
+- 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
diff --git a/docs/documentation/docs/controls/Placeholder.md b/docs/documentation/docs/controls/Placeholder.md
@@ -6,7 +6,7 @@ This control renders a placeholder which can be used to show a message that the
 
 ## 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.
+- 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
diff --git a/docs/documentation/docs/controls/SiteBreadcrumb.md b/docs/documentation/docs/controls/SiteBreadcrumb.md
@@ -7,7 +7,7 @@ This control returns a breadcrumb based on the current location.
 
 ## 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.
+- 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
diff --git a/docs/documentation/docs/controls/WebPartTitle.md b/docs/documentation/docs/controls/WebPartTitle.md
@@ -8,7 +8,7 @@ Here is an example of the control in action:
 
 ## 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.
+- 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.
 - In the root web part file, the one that extends from the `BaseClientSideWebPart` class. Pass the following properties to your web part main component:
 
 ```TypeScript
diff --git a/docs/documentation/docs/controls/fields/FieldAttachmentsRenderer.md b/docs/documentation/docs/controls/fields/FieldAttachmentsRenderer.md
@@ -11,7 +11,7 @@ This control renders Clip icon based on the provided `count` property is defined
 
 ## 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.
+- 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
diff --git a/docs/documentation/docs/controls/fields/FieldDateRenderer.md b/docs/documentation/docs/controls/fields/FieldDateRenderer.md
@@ -9,7 +9,7 @@ This control renders date string as a simple text.
 
 ## 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.
+- 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
diff --git a/docs/documentation/docs/controls/fields/FieldFileTypeRenderer.md b/docs/documentation/docs/controls/fields/FieldFileTypeRenderer.md
@@ -11,7 +11,7 @@ This control renders document or folder icon based on file path. Office UI Fabri
 
 ## 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.
+- 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
diff --git a/docs/documentation/docs/controls/fields/FieldLookupRenderer.md b/docs/documentation/docs/controls/fields/FieldLookupRenderer.md
@@ -12,7 +12,7 @@ This control renders lookup values. Each lookup item is clickable. Click on the
 
 ## 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.
+- 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
diff --git a/docs/documentation/docs/controls/fields/FieldNameRenderer.md b/docs/documentation/docs/controls/fields/FieldNameRenderer.md
@@ -12,7 +12,7 @@ This control renders document's name as a link. The link provides either preview
 
 ## 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.
+- 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
diff --git a/docs/documentation/docs/controls/fields/FieldRendererHelper.md b/docs/documentation/docs/controls/fields/FieldRendererHelper.md
@@ -2,7 +2,7 @@
 FieldRendererHelper class is used to automatically apply needed Field Control based on current Field parameters.
 
 ## How to use this class 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.
+- 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:
 
@@ -53,4 +53,4 @@ Parameters:
 | listItem | ListItemAccessor | Current List Item |
 | context | IContext | SPFx Context |
 
-![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/fields/FieldRendererHelper)
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/fields/FieldRendererHelper)
diff --git a/docs/documentation/docs/controls/fields/FieldTaxonomyRenderer.md b/docs/documentation/docs/controls/fields/FieldTaxonomyRenderer.md
@@ -9,7 +9,7 @@ This control renders terms from Managed Metadata field.
 
 ## 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.
+- 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
diff --git a/docs/documentation/docs/controls/fields/FieldTextRenderer.md b/docs/documentation/docs/controls/fields/FieldTextRenderer.md
@@ -15,7 +15,7 @@ This control renders simple text.
 
 ## 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.
+- 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
diff --git a/docs/documentation/docs/controls/fields/FieldTitleRenderer.md b/docs/documentation/docs/controls/fields/FieldTitleRenderer.md
@@ -9,7 +9,7 @@ This control renders title either as a simple text or as a link to the Dislpay F
 
 ## 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.
+- 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
diff --git a/docs/documentation/docs/controls/fields/FieldUrlRenderer.md b/docs/documentation/docs/controls/fields/FieldUrlRenderer.md
@@ -11,7 +11,7 @@ This control renders Hyperlink or Picture field value as a link or image.
 
 ## 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.
+- 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
diff --git a/docs/documentation/docs/controls/fields/FieldUserRenderer.md b/docs/documentation/docs/controls/fields/FieldUserRenderer.md
@@ -12,7 +12,7 @@ This control renders each referenced user/group as a link on a separate line. Ho
 
 ## 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.
+- 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
diff --git a/docs/documentation/docs/getting-started.md b/docs/documentation/docs/getting-started.md
diff --git a/docs/documentation/docs/index.md b/docs/documentation/docs/index.md
@@ -1,10 +1,25 @@
 # Reusable React controls for your SharePoint Framework solutions
 
-This repository provides developers with a set of reusable React controls that can be used in SharePoint Framework (SPFx) solutions.
+This repository provides developers with a set of reusable React controls that can be used in SharePoint Framework (SPFx) solutions. The project provides controls for building web parts and extensions.
 
 ## Getting started
 
-Check out how to get started here: [Getting started](./getting-started).
+### Installation
+
+To get started you have to install the following dependency to your project: `@pnp/spfx-controls-react`.
+
+Enter the following command to install the dependency to your project:
+
+```bash
+npm install @pnp/spfx-controls-react --save --save-exact
+```
+
+### Configuration
+
+Once the package is installed, you will have to configure the resource file of the property controls to be used in your project. You can do this by opening the `config/config.json` and adding the following line to the `localizedResources` property:
+
+```json
+"ControlStrings": "./node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js"
 
 ## Available controls
 
@@ -16,6 +31,20 @@ The following controls are currently available:
 - [SiteBreadcrumb](./controls/SiteBreadcrumb) (Breadcrumb control)
 - [WebPartTitle](./controls/WebPartTitle) (Customizable web part title control)
 - [IFrameDialog](./controls/IFrameDialog) (renders a Dialog with an iframe as a content)
-- [Field Controls](./controls/fields/main) (controls to emulate out of the box experience for Field Customizers)
+
+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).
+
+- [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)
+- [FieldFileTypeRenderer](./controls/fields/FieldFileTypeRenderer) (renders document or folder icon based on file path)
+- [FieldLookupRenderer](./controls/fields/FieldLookupRenderer) (renders lookup values)
+- [FieldNameRenderer](./controls/fields/FieldNameRenderer) (renders document's name as a link)
+- [FieldTaxonomyRenderer](./controls/fields/FieldTaxonomyRenderer) (renders terms from Managed Metadata field)
+- [FieldTextRenderer](./controls/fields/FieldTextRenderer) (renders simple text)
+- [FieldTitleRenderer](./controls/fields/FieldTitleRenderer) (renders title either as a simple text or as a link to the Dislpay Form)
+- [FieldUrlRenderer](./controls/fields/FieldUrlRenderer) (renders Hyperlink or Picture field value as a link or image)
+- [FieldUserRenderer](./controls/fields/FieldUserRenderer) (renders each referenced user/group as a link on a separate line)
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki)
diff --git a/docs/documentation/mkdocs.yml b/docs/documentation/mkdocs.yml
@@ -1,27 +1,26 @@
 site_name: SharePoint Framework React Controls
 pages:
   - Home: 'index.md'
-  - 'Getting started': 'getting-started.md'
   - Controls:
     - FileTypeIcon: 'controls/FileTypeIcon.md'
     - ListView: 'controls/ListView.md'
     - Placeholder: 'controls/Placeholder.md'
     - SiteBreadcrumb: 'controls/SiteBreadcrumb.md'
     - WebPartTitle: 'controls/WebPartTitle.md'
     - IFrameDialog: 'controls/IFrameDialog.md'
-    - 'Field Controls':
-      - 'Getting started': 'controls/fields/main.md'
-      - FieldRendererHelper: 'controls/fields/FieldRendererHelper.md'
-      - FieldAttachmentsRenderer: 'controls/fields/FieldAttachmentsRenderer.md'
-      - FieldDateRenderer: 'controls/fields/FieldDateRenderer.md'
-      - FieldFileTypeRenderer: 'controls/fields/FieldFileTypeRenderer.md'
-      - FieldLookupRenderer: 'controls/fields/FieldLookupRenderer.md'
-      - FieldNameRenderer: 'controls/fields/FieldNameRenderer.md'
-      - FieldTaxonomyRenderer: 'controls/fields/FieldTaxonomyRenderer.md'
-      - FieldTextRenderer: 'controls/fields/FieldTextRenderer.md'
-      - FieldTitleRenderer: 'controls/fields/FieldTitleRenderer.md'
-      - FieldUrlRenderer: 'controls/fields/FieldUrlRenderer.md'
-      - FieldUserRenderer: 'controls/fields/FieldUserRenderer.md'
+  - 'Field Controls':
+    - 'Getting started': 'controls/fields/main.md'
+    - FieldRendererHelper: 'controls/fields/FieldRendererHelper.md'
+    - FieldAttachmentsRenderer: 'controls/fields/FieldAttachmentsRenderer.md'
+    - FieldDateRenderer: 'controls/fields/FieldDateRenderer.md'
+    - FieldFileTypeRenderer: 'controls/fields/FieldFileTypeRenderer.md'
+    - FieldLookupRenderer: 'controls/fields/FieldLookupRenderer.md'
+    - FieldNameRenderer: 'controls/fields/FieldNameRenderer.md'
+    - FieldTaxonomyRenderer: 'controls/fields/FieldTaxonomyRenderer.md'
+    - FieldTextRenderer: 'controls/fields/FieldTextRenderer.md'
+    - FieldTitleRenderer: 'controls/fields/FieldTitleRenderer.md'
+    - FieldUrlRenderer: 'controls/fields/FieldUrlRenderer.md'
+    - FieldUserRenderer: 'controls/fields/FieldUserRenderer.md'
   - About:
     - 'Release notes': 'about/release-notes.md'
     - License: 'about/license.md'
diff --git a/src/index.ts b/src/index.ts
@@ -3,6 +3,7 @@ export * from './ListView';
 export * from './Placeholder';
 export * from './SiteBreadcrumb';
 export * from './WebPartTitle';
+export * from './IFrameDialog';
 
 export * from './Common';
 export * from './Utilities';
