Merge pull request #161 from vagnersabadi/update-documentation

Update documentation components

Author: garygrossgarten

src/app/pages/bottom-sheet/bottom-sheet.page.html

@@ -6,9 +6,12 @@
     <ion-row>
       <ion-col sizeXl="10" offsetXl="1" sizeLg="10" offsetLg="1" sizeMd="12" sizeXs="12" offsetXs="0" offsetSm="0"
         offsetMd="0" sizeSm="12" sizeMd="12">
-        <app-example *fivIf="['mobile']" [api]="'assets/docs/snippets/expandable/api.md'"
-          [typescript]="'assets/docs/snippets/expandable/ts.md'" [css]="'assets/docs/snippets/expandable/css.md'"
-          [html]="'assets/docs/snippets/expandable/html.md'" [title]="'Bottom Sheet Component'"
+        <app-example *fivIf="['mobile']" 
+        [api]="'assets/docs/snippets/bottom-sheet/bottom-sheet.api.md'"
+          [typescript]="'assets/docs/snippets/bottom-sheet/bottom-sheet.ts.md'" 
+          [css]="'assets/docs/snippets/bottom-sheet/bottom-sheet.css.md'"
+          [html]="'assets/docs/snippets/bottom-sheet/bottom-sheet.html.md'" 
+          [title]="'Bottom Sheet Component'"
           [subtitle]="'Easy to use Bottom Sheet and Content Drawer (mobile only)'">
           <ion-list>
             <ion-item>
@@ -55,9 +58,12 @@
           </ion-list>
 
         </app-example>
-        <app-example *fivIf="['desktop']" [api]="'assets/docs/snippets/expandable/api.md'"
-          [typescript]="'assets/docs/snippets/expandable/ts.md'" [css]="'assets/docs/snippets/expandable/css.md'"
-          [html]="'assets/docs/snippets/expandable/html.md'" [title]="'Bottom Sheet Component'"
+        <app-example *fivIf="['desktop']" 
+        [api]="'assets/docs/snippets/bottom-sheet/bottom-sheet.api.md'"
+        [typescript]="'assets/docs/snippets/bottom-sheet/bottom-sheet.ts.md'" 
+        [css]="'assets/docs/snippets/bottom-sheet/bottom-sheet.css.md'"
+        [html]="'assets/docs/snippets/bottom-sheet/bottom-sheet.html.md'" 
+          [title]="'Bottom Sheet Component'"
           [subtitle]="'Easy to use Bottom Sheet and Content Drawer (mobile only)'">
 
           this component only works on mobile.

src/app/pages/refresh/refresh.page.html

@@ -6,10 +6,13 @@
   <ion-grid class="page-content" fixed>
     <ion-row>
       <ion-col size="12">
-        <app-example [api]="'assets/docs/snippets/expandable/api.md'"
-          [typescript]="'assets/docs/snippets/expandable/ts.md'" [css]="'assets/docs/snippets/expandable/css.md'"
-          [html]="'assets/docs/snippets/expandable/html.md'" [title]="'Pull to Refresh'"
-          [subtitle]="'Material Design Pull to Refresh Layout component (gestures only supported on mobile).'">
+        <app-example 
+        [api]="'assets/docs/snippets/refresh/refresh.api.md'"
+        [typescript]="'assets/docs/snippets/refresh/refresh.ts.md'" 
+        [css]="'assets/docs/snippets/refresh/refresh.css.md'"
+        [html]="'assets/docs/snippets/refresh/refresh.html.md'" 
+        [title]="'Pull to Refresh'"
+        [subtitle]="'Material Design Pull to Refresh Layout component (gestures only supported on mobile).'">
 
           <ion-button (click)="content.showHint()">
             Show hint

src/assets/docs/snippets/bottom-sheet/bottom-sheet.api.md

@@ -0,0 +1,13 @@
+```typescript
+...
+import { FivBottomSheetModule } from '@fivethree/core';
+
+@NgModule({
+  imports: [
+    ...
+    FivBottomSheetModule
+  ],
+    ...
+})
+export class HomePageModule {}
+```

src/assets/docs/snippets/bottom-sheet/bottom-sheet.css.md

@@ -0,0 +1,17 @@
+```html
+<fiv-bottom-sheet
+  #fbs
+  [(state)]="drawerState"
+  [dockedHeight]="dockedHeight"
+  [shouldBounce]="shouldBounce"
+  [distanceTop]="distanceTop"
+>
+  <fiv-bottom-sheet-content
+    [float]="float"
+    [rounded]="rounded"
+    [handle]="handle"
+  >
+    ...
+  </fiv-bottom-sheet-content>
+</fiv-bottom-sheet>
+```

src/assets/docs/snippets/bottom-sheet/bottom-sheet.html.md

@@ -0,0 +1,28 @@
+```typescript
+
+import { Component, OnInit } from '@angular/core';
+import { DrawerState } from '@fivethree/core';
+
+@Component({
+  selector: 'app-bottom-sheet',
+  templateUrl: './bottom-sheet.page.html',
+  styleUrls: ['./bottom-sheet.page.scss']
+})
+export class BottomSheetPage implements OnInit {
+  shouldBounce = true;
+  dockedHeight = 204;
+  distanceTop = 0;
+  drawerState = DrawerState.Docked;
+  states = DrawerState;
+
+  handle = true;
+  float = true;
+  rounded = true;
+
+  constructor() {}
+
+  ngOnInit() {}
+}
+
+
+```

src/assets/docs/snippets/bottom-sheet/bottom-sheet.ts.md

@@ -0,0 +1,13 @@
+```typescript
+...
+import { FivLoadingContentModule } from '@fivethree/core';
+
+@NgModule({
+  imports: [
+    ...
+    FivLoadingContentModule
+  ],
+  declarations: [HomePage]
+})
+export class HomePageModule {}
+```

src/assets/docs/snippets/refresh/refresh.api.md

@@ -0,0 +1,17 @@
+```html
+<fiv-loading-content spinColor="dark" #content>
+  ...
+
+  <ion-button (click)="content.showHint()">
+    Show hint
+  </ion-button>
+  <ion-button (click)="content.refresh()">
+    Refresh
+  </ion-button>
+  <ion-button (click)="content.completeRefresh()">
+    complete
+  </ion-button>
+
+  ...
+</fiv-loading-content>
+```