Merge pull request #1417 from valor-software/feat-docs-split-samples

Feat docs split samples
valor-software · Dec 30, 2016 · 6c6ad18 · 6c6ad18
2 parents 78f6e49 + e96dc5c
commit 6c6ad18
Show file tree

Hide file tree

Showing 103 changed files with 1,308 additions and 617 deletions.
diff --git a/demo/src/app/api-docs/api-doc-class/api-doc-class.component.html b/demo/src/app/api-docs/api-doc-class/api-doc-class.component.html
@@ -1,10 +1,10 @@
 <div class="api-doc-component">
-  <h2>
+  <h3>
     <a (click)="trackSourceClick()"
        href="https://github.com/valor-software/ng2-bootstrap/tree/development/{{apiDocs.fileName}}"
        target="_blank">{{apiDocs.className}}</a>
-  </h2>
-  <p>{{apiDocs.description}}</p>
+  </h3>
+  <p [innerHtml]="apiDocs.description"></p>
 
   <template [ngIf]="apiDocs.properties && apiDocs.properties.length">
     <section>
@@ -13,17 +13,12 @@ <h3 id="inputs">Properties</h3>
         <tbody>
         <tr *ngFor="let prop of apiDocs.properties">
           <td class="col-md-3"><code>{{prop.name}}</code></td>
-          <td class="col-md-3">
+          <td class="col-md-9">
             <div><i>Type: </i><code>{{ prop.type }}</code></div>
             <template [ngIf]="prop.defaultValue">
-              <div><i>Default value: </i><code>{{prop.defaultValue ||
-                '-'}}</code></div>
+              <div><i>Default value: </i><code>{{prop.defaultValue || '-'}}</code></div>
             </template>
-
-          </td>
-          <td class="col-md-6">
-            <div><span
-              [innerHtml]="prop.description"></span></div>
+            <div><span [innerHtml]="prop.description"></span></div>
           </td>
         </tr>
         </tbody>
@@ -38,14 +33,11 @@ <h3 id="methods">Methods</h3>
         <tbody>
         <tr *ngFor="let method of apiDocs.methods">
           <td class="col-md-3"><code>{{method.name}}</code></td>
-          <td class="col-md-3">
+          <td class="col-md-9">
             <div><i>Signature: </i><code>{{ methodSignature(method) }}</code>
             </div>
             <div><i>Return type: </i><code>{{ method.returnType }}</code></div>
-          </td>
-          <td class="col-md-6">
-            <div><span
-              [innerHtml]="method.description"></span></div>
+            <div><span [innerHtml]="method.description"></span></div>
           </td>
         </tr>
         </tbody>

diff --git a/demo/src/app/api-docs/api-doc-config/api-doc-config.component.html b/demo/src/app/api-docs/api-doc-config/api-doc-config.component.html
@@ -1,8 +1,8 @@
 <div (click)="trackSourceClick()" class="api-doc-component">
-  <h2>
+  <h3>
     <a href="https://github.com/valor-software/ng2-bootstrap/tree/development/{{apiDocs.fileName}}" target="_blank">{{apiDocs.className}}</a>
-  </h2>
-  <p>{{apiDocs.description}}</p>
+  </h3>
+  <p [innerHtml]="apiDocs.description"></p>
 
   <template [ngIf]="apiDocs.properties && apiDocs.properties.length">
     <section>
@@ -11,13 +11,13 @@ <h3 id="inputs">Properties</h3>
         <tbody>
         <tr *ngFor="let prop of apiDocs.properties">
           <td class="col-md-3"><code>{{prop.name}}</code></td>
-          <td class="col-md-3">
+          <td class="col-md-9">
             <div><i>Type: </i><code>{{ prop.type }}</code></div>
             <template [ngIf]="prop.defaultValue">
               <div><i>Default value: </i><code>{{prop.defaultValue || '-'}}</code></div>
             </template>
+            <div [innerHtml]="prop.description"></div>
           </td>
-          <td class="col-md-6"><div style="margin: 10px 0">{{ prop.description }}</div></td>
         </tr>
         </tbody>
       </table>

diff --git a/demo/src/app/api-docs/api-doc/api-doc.component.html b/demo/src/app/api-docs/api-doc/api-doc.component.html
@@ -1,8 +1,8 @@
 <div class="api-doc-component">
-  <h2>
+  <h3>
     <a (click)="trackSourceClick()" href="https://github.com/valor-software/ng2-bootstrap/tree/development/{{apiDocs.fileName}}" target="_blank">{{apiDocs.className}}</a>
-  </h2>
-  <p>{{apiDocs.description}}</p>
+  </h3>
+  <p [innerHtml]="apiDocs.description"></p>
     <table class="table table-sm table-hover">
       <tbody>
         <tr>
@@ -23,16 +23,16 @@ <h3 id="inputs">Inputs</h3>
         <tbody>
         <tr *ngFor="let input of apiDocs.inputs">
           <td class="col-md-3"><code>{{input.name}}</code></td>
-          <td class="col-md-3">
+          <td class="col-md-9">
             <div><i>Type: </i><code>{{ input.type }}</code></div>
             <template [ngIf]="defaultInputValue(input) || hasConfigProperty(input)">
               <div>
                 <span><i>Default value: </i><code>{{ defaultInputValue(input) || '-' }}</code></span>
                 <span *ngIf="hasConfigProperty(input)">&mdash; initialized from {{ configServiceName }} service</span>
               </div>
             </template>
+            <div [innerHtml]="input.description"></div>
           </td>
-          <td class="col-md-6"><div>{{ input.description }}</div></td>
         </tr>
         </tbody>
       </table>
@@ -46,7 +46,7 @@ <h3 id="outputs">Outputs</h3>
         <tbody>
           <tr *ngFor="let output of apiDocs.outputs">
             <td class="col-md-3"><code>{{output.name}}</code></td>
-            <td class="col-md-9"><div>{{output.description}}</div></td>
+            <td class="col-md-9"><div [innerHtml]="output.description"></div></td>
           </tr>
         </tbody>
       </table>
@@ -60,11 +60,11 @@ <h3 id="methods">Methods</h3>
         <tbody>
         <tr *ngFor="let method of apiDocs.methods">
           <td class="col-md-3"><code>{{method.name}}</code></td>
-          <td class="col-md-6">
+          <td class="col-md-9">
             <div><i>Signature: </i><code>{{ methodSignature(method) }}</code></div>
             <div><i>Return type: </i><code>{{ method.returnType }}</code></div>
+            <div [innerHtml]="method.description"></div>
           </td>
-          <td class="col-md-9"><div>{{ method.description }}</div></td>
         </tr>
         </tbody>
       </table>

diff --git a/demo/src/app/app.module.ts b/demo/src/app/app.module.ts
@@ -20,6 +20,7 @@ import { DemoDatepickerModule } from './components/datepicker';
 import { DemoDropdownModule } from './components/dropdown';
 import { DemoModalModule } from './components/modal';
 import { DemoPaginationModule } from './components/pagination';
+import { DemoPopoverModule } from './components/popover/index';
 import { DemoProgressbarModule } from './components/progressbar';
 import { DemoRatingModule } from './components/rating';
 import { DemoTabsModule } from './components/tabs';
@@ -55,6 +56,7 @@ import { ngdoc } from '../ng-api-doc';
     DemoDropdownModule,
     DemoModalModule,
     DemoPaginationModule,
+    DemoPopoverModule,
     DemoProgressbarModule,
     DemoRatingModule,
     DemoTabsModule,

diff --git a/demo/src/app/app.routing.ts b/demo/src/app/app.routing.ts
@@ -14,6 +14,7 @@ import { TabsSectionComponent } from './components/tabs/tabs-section.component';
 import { TimepickerSectionComponent } from './components/timepicker/timepicker-section.component';
 import { TooltipSectionComponent } from './components/tooltip/tooltip-section.component';
 import { TypeaheadSectionComponent } from './components/typeahead/typeahead-section.component';
+import { PopoverSectionComponent } from './components/popover/popover-section.component';
 
 export const routes = [
   {
@@ -66,6 +67,11 @@ export const routes = [
     data: ['Pagination'],
     component: PaginationSectionComponent
   },
+  {
+    path: 'popover',
+    data: ['Popover'],
+    component: PopoverSectionComponent
+  },
   {
     path: 'progressbar',
     data: ['Progressbar'],

diff --git a/demo/src/app/components/accordion/accordion-section.component.ts b/demo/src/app/components/accordion/accordion-section.component.ts
@@ -2,13 +2,11 @@
 // todo: add more samples http://getbootstrap.com/components/#panels-alternatives
 
 import { Component } from '@angular/core';
+import { DEMOS } from './demos';
 
 // webpack html imports
 let titleDoc = require('html!markdown!./docs/usage.md');
 
-let ts = require('!!raw!./demos/accordion-demo.component.ts');
-let html = require('!!raw!./demos/accordion-demo.component.html');
-
 @Component({
   selector: 'accordion-section',
   template: `
@@ -41,7 +39,7 @@ let html = require('!!raw!./demos/accordion-demo.component.html');
   <!-- basic -->
   <p>Click headers to expand/collapse content that is broken into logical sections, much like tabs.</p>
   
-  <ng-sample-box [ts]="ts" [html]="html">
+  <ng-sample-box [ts]="demos.old.component" [html]="demos.old.html">
     <accordion-demo></accordion-demo>
   </ng-sample-box>
       
@@ -53,7 +51,6 @@ let html = require('!!raw!./demos/accordion-demo.component.html');
 export class AccordionSectionComponent {
   public name: string = 'Accordion';
   public src: string = 'https://github.com/valor-software/ng2-bootstrap/tree/development/src/accordion';
-  public html: string = html;
-  public ts: string = ts;
   public titleDoc: string = titleDoc;
+  public demos: any = DEMOS;
 }
diff --git a/demo/src/app/components/accordion/demos/accordion-demo.component.html b/demo/src/app/components/accordion/demos/accordion-demo.component.html
@@ -3,7 +3,8 @@
           (click)="group.isOpen = !group.isOpen">Toggle last panel
   </button>
   <button type="button" class="btn btn-primary btn-sm"
-          (click)="status.isFirstDisabled = ! status.isFirstDisabled">Enable / Disable first panel
+          (click)="status.isFirstDisabled = ! status.isFirstDisabled">Enable /
+    Disable first panel
   </button>
 </p>
 
@@ -21,18 +22,20 @@
     This content is straight in the template.
   </accordion-group>
   <accordion-group *ngFor="let group of groups" [heading]="group.title">
-     {{ group?.content }}
+    {{ group?.content }}
   </accordion-group>
   <accordion-group heading="Dynamic Body Content">
     <p>The body of the accordion group grows to fit the contents</p>
-    <button type="button" class="btn btn-primary btn-sm" (click)="addItem()">Add Item</button>
+    <button type="button" class="btn btn-primary btn-sm" (click)="addItem()">Add
+      Item
+    </button>
     <div *ngFor="let item of items">{{item}}</div>
   </accordion-group>
   <accordion-group #group [isOpen]="status.open">
     <div accordion-heading>
-      I can have markup, too!
-      <i class="pull-right glyphicon"
-         [ngClass]="{'glyphicon-chevron-down': group?._isOpen, 'glyphicon-chevron-right': !group?._isOpen}"></i>
+        I can have markup, too!
+        <i class="pull-right float-xs-right glyphicon"
+           [ngClass]="{'glyphicon-chevron-down': group?._isOpen, 'glyphicon-chevron-right': !group?._isOpen}"></i>
     </div>
     This is just some content to illustrate fancy headings.
   </accordion-group>

diff --git a/demo/src/app/components/accordion/demos/index.ts b/demo/src/app/components/accordion/demos/index.ts
@@ -1,5 +1,7 @@
-export const DEMO_COMPONENTS = [
+import { AccordionDemoComponent } from './accordion-demo.component';
 
+export const DEMO_COMPONENTS = [
+  AccordionDemoComponent
 ];
 
 export const DEMOS = {

diff --git a/demo/src/app/components/accordion/index.ts b/demo/src/app/components/accordion/index.ts
@@ -5,13 +5,11 @@ import { AccordionModule } from 'ng2-bootstrap';
 
 import { SharedModule } from '../../shared';
 import { AccordionSectionComponent } from './accordion-section.component';
-import { AccordionDemoComponent } from './demos/accordion-demo.component';
 import { DEMO_COMPONENTS } from './demos';
 
 @NgModule({
   declarations: [
     AccordionSectionComponent,
-    AccordionDemoComponent,
     ...DEMO_COMPONENTS
   ],
   imports: [

diff --git a/demo/src/app/components/accordion/todo.md b/demo/src/app/components/accordion/todo.md
@@ -0,0 +1,9 @@
+- basic sample, all defaults (disabled, header template)
+- panel class
+- multi select true
+- manual toggling of tabs
+- dynamically generated list
+- custom css (local + global)
+
+// component
+- add type
diff --git a/demo/src/app/components/alerts/alerts-section.component.ts b/demo/src/app/components/alerts/alerts-section.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { DEMOS } from './demos/index';
+import { DEMOS } from './demos';
 
 // webpack html imports
 let titleDoc = require('html!markdown!./docs/usage.md');

diff --git a/demo/src/app/components/buttons/buttons-section.component.ts b/demo/src/app/components/buttons/buttons-section.component.ts
@@ -1,11 +1,9 @@
 import { Component } from '@angular/core';
+import { DEMOS } from './demos';
 
 // webpack html imports
 let titleDoc = require('html!markdown!./docs/title.md');
 
-let ts = require('!!raw?lang=typescript!./demos/buttons-demo.component.ts');
-let html = require('!!raw?lang=markup!./demos/buttons-demo.component.html');
-
 @Component({
   selector: 'buttons-section',
   template: `
@@ -35,7 +33,7 @@ let html = require('!!raw?lang=markup!./demos/buttons-demo.component.html');
     <!-- basic -->
   <p>Click headers to expand/collapse content that is broken into logical sections, much like tabs.</p>
     
-  <ng-sample-box [ts]="ts" [html]="html">
+  <ng-sample-box [ts]="demos.old.component" [html]="demos.old.html">
     <buttons-demo></buttons-demo>
   </ng-sample-box>
       
@@ -46,8 +44,7 @@ let html = require('!!raw?lang=markup!./demos/buttons-demo.component.html');
 })
 export class ButtonsSectionComponent {
   public name:string = 'Buttons';
-  public src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/buttons';
-  public html:string = html;
-  public ts:string = ts;
+  public src:string = 'https://github.com/valor-software/ng2-bootstrap/tree/development/src/buttons';
   public titleDoc:string = titleDoc;
+  public demos: any = DEMOS;
 }
diff --git a/demo/src/app/components/buttons/demos/index.ts b/demo/src/app/components/buttons/demos/index.ts
@@ -0,0 +1,12 @@
+import { ButtonsDemoComponent } from './buttons-demo.component';
+
+export const DEMO_COMPONENTS = [
+  ButtonsDemoComponent
+];
+
+export const DEMOS = {
+  old: {
+    component: require('!!raw?lang=typescript!./buttons-demo.component'),
+    html: require('!!raw?lang=markup!./buttons-demo.component.html')
+  }
+};
diff --git a/demo/src/app/components/buttons/index.ts b/demo/src/app/components/buttons/index.ts
@@ -3,13 +3,13 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { SharedModule } from '../../shared';
 import { ButtonsSectionComponent } from './buttons-section.component';
-import { ButtonsDemoComponent } from './demos/buttons-demo.component';
 import { ButtonsModule } from 'ng2-bootstrap';
+import { DEMO_COMPONENTS } from './demos';
 
 @NgModule({
   declarations: [
     ButtonsSectionComponent,
-    ButtonsDemoComponent
+    ...DEMO_COMPONENTS
   ],
   imports: [
     ButtonsModule.forRoot(),

diff --git a/demo/src/app/components/buttons/todo.md b/demo/src/app/components/buttons/todo.md
@@ -0,0 +1,12 @@
+radio
+- basic sample
+- group
+checkbox
+- basic sample
+- group
+
+
+? split in two pages ?
++ aria-pressed
++ autocomplete="off"
+? class.active
diff --git a/demo/src/app/components/carousel/carousel-section.component.ts b/demo/src/app/components/carousel/carousel-section.component.ts
@@ -1,11 +1,9 @@
 import { Component } from '@angular/core';
+import { DEMOS } from './demos';
 
 // webpack html imports
 let titleDoc = require('html!markdown!./docs/title.md');
 
-let ts = require('!!raw?lang=typescript!./demos/carousel-demo.component.ts');
-let html = require('!!raw?lang=markup!./demos/carousel-demo.component.html');
-
 @Component({
   selector: 'carousel-section',
   template: `
@@ -35,7 +33,7 @@ let html = require('!!raw?lang=markup!./demos/carousel-demo.component.html');
   <h2 id="examples">Examples</h2>
    
   <!-- basic -->
-  <ng-sample-box [ts]="ts" [html]="html">
+  <ng-sample-box [ts]="demos.old.component" [html]="demos.old.html">
     <carousel-demo></carousel-demo>
   </ng-sample-box>
   
@@ -47,8 +45,7 @@ let html = require('!!raw?lang=markup!./demos/carousel-demo.component.html');
 })
 export class CarouselSectionComponent {
   public name:string = 'Carousel';
-  public src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/carousel';
-  public html:string = html;
-  public ts:string = ts;
+  public src:string = 'https://github.com/valor-software/ng2-bootstrap/tree/development/src/carousel';
+  public demos: any = DEMOS;
   public titleDoc:string = titleDoc;
 }
diff --git a/demo/src/app/components/carousel/demos/index.ts b/demo/src/app/components/carousel/demos/index.ts
@@ -0,0 +1,12 @@
+import { CarouselDemoComponent } from './carousel-demo.component';
+
+export const DEMO_COMPONENTS = [
+  CarouselDemoComponent
+];
+
+export const DEMOS = {
+  old: {
+    component: require('!!raw?lang=typescript!./carousel-demo.component'),
+    html: require('!!raw?lang=markup!./carousel-demo.component.html')
+  }
+};