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

closes #1170

public/_includes/_util-fns.jade

@@ -9,8 +9,13 @@ 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)
-    .example-title #{title}
+    if (avoid)
+      .example-title.avoid AVOID: #{title}
+    else
+      .example-title #{title}
   code-example(language="#{language}" format="#{format}")
     != styleString(frag, stylePatterns)
 
@@ -37,9 +42,13 @@ 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)
-    .example-title #{title}
+    if (avoid)
+      .example-title.avoid #{title}
+    else
+      .example-title #{title}
   code-example(language="#{language}" format="#{format}")
     if (jsonExtract == 'ERROR')
       err ERROR: Unable to extract json using config: "#{jsonConfig.toString()}"
@@ -303,4 +312,4 @@ script.
 -       }
 -     }
 -   }
-- }
+- }

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

@@ -10,9 +10,9 @@ import { Hero } from './hero';
 import { HeroService } from './hero.service';
 
 @Component({
-  selector: 'my-app',
+  selector: 'toh-app',
   template: `
-      <pre>{{heroes | json}}</pre>  
+      <pre>{{heroes | json}}</pre>
     `,
   styleUrls: ['app/app.component.css'],
   providers: [HeroService]
@@ -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';
@@ -9,7 +9,7 @@
     selector: 'my-app',
     template: `
         <h1>{{title}}</h1>
-        <pre>{{heroes | json}}</pre>  
+        <pre>{{heroes | json}}</pre>
       `,
     styleUrls: ['app/app.component.css']
   })
@@ -27,11 +27,11 @@
 
   function getHeroes() {
     return // some promise of data;
-  }  
-// #enddocregion 001-1
+  }
+// #enddocregion 01-01-1
 
 
-// #docregion 001-2
+// #docregion 01-01-2
   /* recommended */
 
   // main.ts
@@ -50,7 +50,7 @@
   @Component({
     selector: 'my-app',
     template: `
-        <pre>{{heroes | json}}</pre>  
+        <pre>{{heroes | json}}</pre>
       `,
     styleUrls: ['app/app.component.css'],
     providers: [HeroService]
@@ -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;
+}