feat(docs): applied new docs style

valor-software · Jun 6, 2016 · d84211a · d84211a
1 parent 26a64cc
commit d84211a
Show file tree

Hide file tree

Showing 44 changed files with 1,099 additions and 1,041 deletions.
diff --git a/demo/assets/css/style.css b/demo/assets/css/style.css
diff --git a/demo/assets/images/active.svg b/demo/assets/images/active.svg
diff --git a/demo/assets/images/anactive.svg b/demo/assets/images/anactive.svg
diff --git a/demo/assets/images/bar-doc.png b/demo/assets/images/bar-doc.png
diff --git a/demo/assets/images/border-dot.png b/demo/assets/images/border-dot.png
diff --git a/demo/assets/images/link-doc.png b/demo/assets/images/link-doc.png
diff --git a/demo/assets/images/logo.png b/demo/assets/images/logo.png
diff --git a/demo/assets/images/menu-left.svg b/demo/assets/images/menu-left.svg
diff --git a/demo/assets/images/menu-right.svg b/demo/assets/images/menu-right.svg
diff --git a/demo/assets/images/repa-down.png b/demo/assets/images/repa-down.png
diff --git a/demo/assets/images/repa-up.png b/demo/assets/images/repa-up.png
diff --git a/demo/assets/images/search-doc.png b/demo/assets/images/search-doc.png
diff --git a/demo/components/accordion-section.ts b/demo/components/accordion-section.ts
@@ -1,62 +1,29 @@
 import {Component} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 
-import {TAB_DIRECTIVES} from '../../ng2-bootstrap';
 import {AccordionDemoComponent} from './accordion/accordion-demo';
+import {DemoSection} from './demo-section';
 
-let name = 'Accordion';
-let src = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/accordion/';
 // webpack html imports
 let doc = require('../../components/accordion/readme.md');
 let titleDoc = require('../../components/accordion/title.md');
+
 let ts = require('!!prismjs?lang=typescript!./accordion/accordion-demo.ts');
 let html = require('!!prismjs?lang=markup!./accordion/accordion-demo.html');
 
 @Component({
   selector: 'accordion-section',
+  directives: [DemoSection, AccordionDemo, CORE_DIRECTIVES],
   template: `
-  <section id="${name.toLowerCase()}">
-    <h1>${name}<small>(<a href="${src}">src</a>)</small></h1>
-
-    <hr>
-
-    <div class="description">${titleDoc}</div>
-
-    <br/>
-
-    <div class="example">
-      <h2>Example</h2>
-      <div class="card card-block panel panel-default panel-body">
-        <accordion-demo></accordion-demo>
-      </div>
-    </div>
-    
-    <br/>
-
-    <div class="markup">
-      <tabset>
-        <tab heading="Markup">
-          <div class="card card-block panel panel-default panel-body">
-            <pre class="language-html"><code class="language-html" ngNonBindable>${html}</code></pre>
-          </div>
-        </tab>
-        <tab heading="TypeScript">
-          <div class="card card-block panel panel-default panel-body">
-            <pre class="language-typescript"><code class="language-typescript" ngNonBindable>${ts}</code></pre>
-          </div>
-        </tab>
-      </tabset>
-    </div>
-    
-    <br/>
-
-    <div class="api">
-      <h2>API</h2>
-      <div class="card card-block panel panel-default panel-body">${doc}</div>
-    </div>
-  </section>
-  `,
-  directives: [AccordionDemoComponent, TAB_DIRECTIVES, CORE_DIRECTIVES]
+    <demo-section [name]="name" [src]="src" [titleDoc]="titleDoc" [html]="html" [ts]="ts" [doc]="doc">
+      <accordion-demo></accordion-demo>
+    </demo-section>`
 })
 export class AccordionSectionComponent {
+  private name:string = 'Accordion';
+  private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/accordion';
+  private html:string = html;
+  private ts:string = ts;
+  private titleDoc:string = titleDoc;
+  private doc:string = doc;
 }
diff --git a/demo/components/alert-section.ts b/demo/components/alert-section.ts
@@ -1,64 +1,28 @@
 import {Component} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 
-import {TAB_DIRECTIVES} from '../../ng2-bootstrap';
 import {AlertDemoComponent} from './alert/alert-demo';
-
-let name = 'Alerts';
-let src = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/alert/';
+import {DemoSection} from './demo-section';
 
 // webpack html imports
 let doc = require('../../components/alert/readme.md');
 let titleDoc = require('../../components/alert/title.md');
-
 let ts = require('!!prismjs?lang=typescript!./alert/alert-demo.ts');
 let html = require('!!prismjs?lang=markup!./alert/alert-demo.html');
 
 @Component({
   selector: 'alert-section',
+  directives: [DemoSection, AlertDemo, CORE_DIRECTIVES],
   template: `
-  <section id="${name.toLowerCase()}">
-    <h1>${name}<small>(<a href="${src}">src</a>)</small></h1>
-
-    <hr>
-
-    <div class="description">${titleDoc}</div>
-    
-    <br/>
-
-    <div class="example">
-      <h2>Example</h2>
-      <div class="card card-block panel panel-default panel-body">
-        <alert-demo></alert-demo>
-      </div>
-    </div>
-    
-    <br/>
-
-    <div class="markup">
-      <tabset>
-        <tab heading="Markup">
-          <div class="card card-block panel panel-default panel-body">
-            <pre class="language-html"><code class="language-html" ngNonBindable>${html}</code></pre>
-          </div>
-        </tab>
-        <tab heading="TypeScript">
-          <div class="card card-block panel panel-default panel-body">
-            <pre class="language-typescript"><code class="language-typescript" ngNonBindable>${ts}</code></pre>
-          </div>
-        </tab>
-      </tabset>
-    </div>
-    
-    <br/>
-      
-    <div class="api">
-      <h2>API</h2>
-      <div class="card card-block panel panel-default panel-body">${doc}</div>
-    </div>
-  </section>
-  `,
-  directives: [AlertDemoComponent, TAB_DIRECTIVES, CORE_DIRECTIVES]
+    <demo-section [name]="name" [src]="src" [titleDoc]="titleDoc" [html]="html" [ts]="ts" [doc]="doc">
+      <alert-demo></alert-demo>
+    </demo-section>`
 })
 export class AlertSectionComponent {
+  private name:string = 'Alerts';
+  private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/alert';
+  private html:string = html;
+  private ts:string = ts;
+  private titleDoc:string = titleDoc;
+  private doc:string = doc;
 }
diff --git a/demo/components/buttons-section.ts b/demo/components/buttons-section.ts
@@ -1,11 +1,8 @@
 import {Component} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 
-import {TAB_DIRECTIVES} from '../../ng2-bootstrap';
 import {ButtonsDemoComponent} from './buttons/buttons-demo';
-
-let name = 'Buttons';
-let src = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/buttons/';
+import {DemoSection} from './demo-section';
 
 // webpack html imports
 let doc = require('../../components/buttons/readme.md');
@@ -16,49 +13,17 @@ let html = require('!!prismjs?lang=markup!./buttons/buttons-demo.html');
 
 @Component({
   selector: 'buttons-section',
-  directives: [ButtonsDemoComponent, TAB_DIRECTIVES, CORE_DIRECTIVES],
+  directives: [DemoSection, ButtonsDemo, CORE_DIRECTIVES],
   template: `
-  <section id="${name.toLowerCase()}">
-    <h1>${name}<small>(<a href="${src}">src</a>)</small></h1>
-
-    <hr>
-
-    <div class="description">${titleDoc}</div>
-    
-    <br/>
-    
-    <div class="example">
-      <h2>Example</h2>
-      <div class="card card-block panel panel-default panel-body">
-        <buttons-demo></buttons-demo>
-      </div>
-    </div>
-
-    <br/>
-    
-    <div class="markup">
-      <tabset>
-        <tab heading="Markup">
-          <div class="card card-block panel panel-default panel-body">
-            <pre class="language-html"><code class="language-html" ngNonBindable>${html}</code></pre>
-          </div>
-        </tab>
-        <tab heading="TypeScript">
-          <div class="card card-block panel panel-default panel-body">
-            <pre class="language-typescript"><code class="language-typescript" ngNonBindable>${ts}</code></pre>
-          </div>
-        </tab>
-      </tabset>
-    </div>
-
-    <br/>
-
-    <div class="api">
-      <h2>API</h2>
-      <div class="card card-block panel panel-default panel-body">${doc}</div>
-    </div>
-  </section>
-  `
+    <demo-section [name]="name" [src]="src" [titleDoc]="titleDoc" [html]="html" [ts]="ts" [doc]="doc">
+      <buttons-demo></buttons-demo>
+    </demo-section>`
 })
-export class ButtonsSectionComponent {
+
+  private name:string = 'Buttons';
+  private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/buttons';
+  private html:string = html;
+  private ts:string = ts;
+  private titleDoc:string = titleDoc;
+  private doc:string = doc;
 }
diff --git a/demo/components/carousel-section.ts b/demo/components/carousel-section.ts
@@ -1,11 +1,8 @@
 import {Component} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 
-import {TAB_DIRECTIVES} from '../../ng2-bootstrap';
 import {CarouselDemoComponent} from './carousel/carousel-demo';
-
-let name = 'Carousel';
-let src = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/carousel/';
+import {DemoSection} from './demo-section';
 
 // webpack html imports
 let doc = require('../../components/carousel/readme.md');
@@ -16,49 +13,17 @@ let html = require('!!prismjs?lang=markup!./carousel/carousel-demo.html');
 
 @Component({
   selector: 'carousel-section',
-  directives: [CarouselDemoComponent, TAB_DIRECTIVES, CORE_DIRECTIVES],
+  directives: [DemoSection, CarouselDemo, CORE_DIRECTIVES],
   template: `
-  <section id="${name.toLowerCase()}">
-    <h1>${name}<small>(<a href="${src}">src</a>)</small></h1>
-
-    <hr>
-
-    <div class="description">${titleDoc}</div>
-    
-    <br/>
-    
-    <div class="example">
-      <h2>Example</h2>
-      <div class="card card-block panel panel-default panel-body">
-        <carousel-demo></carousel-demo>
-      </div>
-    </div>
-
-    <br/>
-
-    <div class="markup">
-      <tabset>
-        <tab heading="Markup">
-          <div class="card card-block panel panel-default panel-body">
-            <pre class="language-html"><code class="language-html" ngNonBindable>${html}</code></pre>
-          </div>
-        </tab>
-        <tab heading="TypeScript">
-          <div class="card card-block panel panel-default panel-body">
-            <pre class="language-typescript"><code class="language-typescript" ngNonBindable>${ts}</code></pre>
-          </div>
-        </tab>
-      </tabset>
-    </div>
-
-    <br/>
-
-    <div class="api">
-      <h2>API</h2>
-      <div class="card card-block panel panel-default panel-body">${doc}</div>
-    </div>
-  </section>
-  `
+    <demo-section [name]="name" [src]="src" [titleDoc]="titleDoc" [html]="html" [ts]="ts" [doc]="doc">
+      <carousel-demo></carousel-demo>
+    </demo-section>`
 })
 export class CarouselSectionComponent {
+  private name:string = 'Carousel';
+  private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/carousel';
+  private html:string = html;
+  private ts:string = ts;
+  private titleDoc:string = titleDoc;
+  private doc:string = doc;
 }