docs(feature): update feature discovery

Author: marcjulian

src/assets/docs/components/feature-discovery.md

@@ -1,26 +1,45 @@
+# fivFeature
 
-# Feature Discovery
+### Motivation
 
-## Import
+Material style [Feature Discovery](https://material.io/archive/guidelines/growth-communications/feature-discovery.html) component for Ionic.
+
+## Import the module
+
+Import `FivFeatureDiscoveryModule` into `app.module.ts`, because the `FivFeatureDiscovery` component has to be registered as an entry component.
 
 ```typescript
+import { NgModule } from '@angular/core';
 import { FivFeatureDiscoveryModule } from '@fivethree/core';
-...
+
 @NgModule({
   imports: [
     ...
-    FivFeatureDiscoveryModule
-  ],
-  ...
+    FivFeatureDiscoveryModule,
+    ...
+  ]
 })
-export class HomePageModule {}
+export class AppModule {}
+```
 
+Now import `FivFeatureDiscoveryModule` in your page or component module:
+
+```typescript
+import { NgModule } from '@angular/core';
+import { FivFeatureDiscoveryModule } from '@fivethree/core';
+
+@NgModule({
+  imports: [
+    ...
+    FivFeatureDiscoveryModule,
+    ...
+  ]
+})
+export class HomePageModule {}
 ```
 
 ## Usage
 
-### Basic Example
-
 ```html
 <ion-button #feature="fivFeature" [fivFeature]="content">
   Click Me
@@ -31,7 +50,6 @@ export class HomePageModule {}
   <fiv-icon #feature="fivFeature" [fivFeature]="content" name="add"> </fiv-icon>
 </ion-button>
 
-
 ...
 <!-- the content that will be displayed in the circle -->
 <ng-template #content>
@@ -77,5 +95,52 @@ export class HomePage {
 
 ```
 
+## Properties
+
+| `maxDiameter` |                                                          |
+| ------------- | -------------------------------------------------------- |
+| Description   |  The max diameter for the feature discovery content area |
+| Type          |  `number`                                                |
+| Default       |  1080                                                    |
+
+| `diameter`  |                                                          |
+| ----------- | -------------------------------------------------------- |
+| Description |  The max diameter for the feature discovery content area |
+| Type        |  `number`                                                |
+| Default     |  Minimum value of `maxDiameter` and device width         |
+
+| `contentOffset` |                            |
+| --------------- | -------------------------- |
+| Description     |  The offset of the content |
+| Type            |  `number`                  |
+| Default         |  20                        |
+
+| `featurePadding` |                            |
+| ---------------- | -------------------------- |
+| Description      | The padding of the content |
+| Type             |  `number`                  |
+| Default          |  20                        |
+
+## Events
+
+| Name              | Description                         |
+| ----------------- | ----------------------------------- |
+| `fivFeatureClick` | Emitted when the feature is clicked |
+| `fivOpen`         | Emitted when the feature di         |
+
+## Methods
+
+`FivFeature`
+
+| Name   | Description                |
+| ------ | -------------------------- |
+| `show` | Show the feature discovery |
+| `hide` | Hide the feature discovery |
 
+## CSS Variables
 
+| Name                | Description                                      |
+| ------------------- | ------------------------------------------------ |
+| --fiv-color-feature | Background of the feature discovery content area |
+| --fiv-color-pulse   | Color for the pulse color                        |
+| --fiv-color-icon    | Icon color of the icon inside the pulse circle   |