docs(style-guide): add style-guide - v.3

closes #1170

public/_includes/_util-fns.jade

@@ -9,7 +9,12 @@ mixin makeExample(filePath, region, title, stylePatterns)
   - var frag = getFrag(filePath, region);
   - var defaultFormat = frag.split('\n').length > 2 ? "linenums" : "";
   - var format = attributes.format || defaultFormat;
+  - var avoid = !!attributes.avoid;
+
   if (title)
+    if (avoid)
+      .example-title.avoid AVOID: #{title}
+    else
       .example-title #{title}
   code-example(language="#{language}" format="#{format}")
     != styleString(frag, stylePatterns)
@@ -37,8 +42,12 @@ mixin makeJson( filePath, jsonConfig, title, stylePatterns)
   - var frag = getFrag(filePath, '');
   - var json = unescapeHtml(frag);
   - var jsonExtract = extractJson(json, jsonConfig);
+  - var avoid = !!attributes.avoid;
 
   if (title)
+    if (avoid)
+      .example-title.avoid #{title}
+    else
       .example-title #{title}
   code-example(language="#{language}" format="#{format}")
     if (jsonExtract == 'ERROR')

public/docs/_examples/style-guide/ts/01-01/app/app.component.ts

@@ -10,7 +10,7 @@ import { Hero } from './hero';
 import { HeroService } from './hero.service';
 
 @Component({
-  selector: 'my-app',
+  selector: 'toh-app',
   template: `
       <pre>{{heroes | json}}</pre>
     `,
@@ -20,10 +20,10 @@ import { HeroService } from './hero.service';
 export class AppComponent implements OnInit{
   heroes: Hero[] = [];
 
-  constructor(private _heroService: HeroService) {}
+  constructor(private heroService: HeroService) {}
 
   ngOnInit() {
-    this._heroService.getHeroes()
+    this.heroService.getHeroes()
       .then(heroes => this.heroes = heroes);
   }
 }

public/docs/_examples/style-guide/ts/01-01/app/placeholder.ts

@@ -1,6 +1,6 @@
 // #docplaster
 
-// #docregion 001-1
+// #docregion 01-01-1
   /* avoid */
   import { bootstrap } from 'angular2/platform/browser';
   import { Component, OnInit } from 'angular2/core';
@@ -28,10 +28,10 @@
   function getHeroes() {
     return // some promise of data;
   }
-// #enddocregion 001-1
+// #enddocregion 01-01-1
 
 
-// #docregion 001-2
+// #docregion 01-01-2
   /* recommended */
 
   // main.ts
@@ -58,16 +58,16 @@
   export class AppComponent implements OnInit{
     heroes: Hero[] = [];
 
-    constructor(private _heroService: HeroService) {}
+    constructor(private heroService: HeroService) {}
 
     ngOnInit() {
-      this._heroService.getHeroes()
+      this.heroService.getHeroes()
         .then(heroes => this.heroes = heroes);
     }
   }
-// #enddocregion 001-2
+// #enddocregion 01-01-2
 
-// #docregion 001-3
+// #docregion 01-01-3
   /* recommended */
 
   // hero.service.ts
@@ -80,9 +80,9 @@
       return Promise.resolve(HEROES);
     }
   }
-// #enddocregion 001-3
+// #enddocregion 01-01-3
 
-// #docregion 001-4
+// #docregion 01-01-4
   /* recommended */
 
   // hero.ts
@@ -90,4 +90,4 @@
     id: number;
     name: string;
   }
-// #enddocregion 001-4
+// #enddocregion 01-01-4

public/resources/css/_print.scss

@@ -126,4 +126,9 @@
     box-shadow: none;
     margin-bottom: -18px;
   }
+  .example-title.avoid {
+    background: #E0343D;
+    border-color: #E0343D;
+  }
+
 }

public/resources/css/module/_example-title.scss

@@ -15,3 +15,7 @@
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
+.example-title.avoid {
+  background: #E0343D;
+  border-color: #E0343D;
+}