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

public/docs/_examples/style-guide/ts/03-05/app/+heroes/shared/hero.service.avoid.ts

@@ -6,7 +6,7 @@ import {Injectable} from 'angular2/core';
 import {Http, Response} from 'angular2/http';
 
 import {Hero} from './hero.model';
-import {ExceptionService, SpinnerService, ToastService} from '../../../app/shared';
+import {ExceptionService, SpinnerService, ToastService} from '../../shared';
 // #enddocregion example
 
 @Injectable()

public/docs/_examples/style-guide/ts/03-05/app/+heroes/shared/hero.service.ts

@@ -4,11 +4,12 @@ import { Injectable } from 'angular2/core';
 import { Http, Response } from 'angular2/http';
 
 import { Hero } from './hero.model';
-import { ExceptionService, SpinnerService, ToastService } from '../../../app/shared';
+import { ExceptionService, SpinnerService, ToastService } from '../../shared';
 // #enddocregion example
 
 @Injectable()
 export class HeroService {
+  cachedHeroes: Hero[];
 
   constructor(
     private exceptionService: ExceptionService,

public/docs/_examples/style-guide/ts/03-06/app/+heroes/shared/hero.service.ts

@@ -9,6 +9,7 @@ import { ExceptionService, SpinnerService, ToastService } from '../../../app/sha
 
 @Injectable()
 export class HeroService {
+  cachedHeroes: Hero[];
 
   constructor(
     private exceptionService: ExceptionService,

public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.ts

@@ -1,3 +1,4 @@
+// #docplaster
 // #docregion
 // #docregion example
 import { Component, OnInit } from 'angular2/core';
@@ -10,13 +11,21 @@ import {
   InitCapsPipe,
   SpinnerService,
   ToastService
-} from '../../app/shared';
+} from '../shared';
 
 @Component({
+  // #enddocregion example
+  providers: [EntityService, ExceptionService, SpinnerService, ToastService],
+  directives: [FilterTextComponent],
+  pipes: [InitCapsPipe],
+  // #docregion example
   selector: 'toh-heroes',
   templateUrl: 'app/+heroes/heroes.component.html'
 })
 export class HeroesComponent implements OnInit {
+  // #enddocregion example
+  urls = CONFIG.baseUrls;
+  // #docregion example
   constructor() { }
 
   ngOnInit() { }

public/docs/_examples/style-guide/ts/04-10/app/app.component.ts

@@ -7,6 +7,7 @@ import { HeroesComponent } from './+heroes/index';
 
 @Component({
   selector: 'toh-app',
-  template: '<div>app</div>'
+  template: '<div>app</div>',
+  directives: [HeroesComponent]
 })
 export class AppComponent { }

public/docs/_examples/style-guide/ts/04-14/app/heroes/heroes.component.ts

@@ -9,7 +9,8 @@ import { Logger } from '../shared/logger.service';
 @Component({
   selector: 'toh-heroes',
   templateUrl: 'heroes.component.html',
-  styleUrls:  ['heroes.component.css']
+  styleUrls:  ['heroes.component.css'],
+  providers: [Logger]
 })
 export class HeroesComponent implements OnInit {
   heroes: Hero[];

public/docs/_examples/style-guide/ts/05-14/app/shared/toast/toast.component.avoid.ts

@@ -12,7 +12,6 @@ export class ToastComponent implements OnInit {
   title: string;
   private toastElement: any;
 
-
   ngOnInit() {
     this.toastElement = document.getElementById('toh-toast');
   }

public/docs/_examples/style-guide/ts/05-14/app/shared/toast/toast.component.ts

@@ -10,26 +10,31 @@ export class ToastComponent implements OnInit {
   // public properties
   message: string;
   title: string;
+
   // private fields
   private defaults = {
     title: '',
     message: 'May the Force be with You'
   };
   private toastElement: any;
+
   // public methods
   activate(message = this.defaults.message, title = this.defaults.title) {
     this.title = title;
     this.message = message;
     this.show();
   }
+
   ngOnInit() {
     this.toastElement = document.getElementById('toh-toast');
   }
+
   // private methods
   private hide() {
     this.toastElement.style.opacity = 0;
     window.setTimeout(() => this.toastElement.style.zIndex = 0, 400);
   }
+
   private show() {
     console.log(this.message);
     this.toastElement.style.opacity = 1;

public/docs/_examples/style-guide/ts/05-17/app/heroes/hero-list/hero-list.component.avoid.ts

@@ -6,7 +6,7 @@ import { Hero } from '../shared/hero.model';
 /* avoid */
 
 @Component({
-  selector: 'toh-heroes-list',
+  selector: 'toh-hero-list',
   template: `
     <section>
       Our list of heroes:
@@ -17,7 +17,7 @@ import { Hero } from '../shared/hero.model';
     </section>
   `
 })
-export class HeroesListComponent {
+export class HeroListComponent {
   heroes: Hero[];
   totalPowers: number;
 }

public/docs/_examples/style-guide/ts/05-17/app/heroes/hero-list/hero-list.component.ts

@@ -5,7 +5,7 @@ import { Hero } from '../shared/hero.model.ts';
 
 // #docregion example
 @Component({
-  selector: 'toh-heroes-list',
+  selector: 'toh-hero-list',
   template: `
     <section>
       Our list of heroes:
@@ -16,9 +16,12 @@ import { Hero } from '../shared/hero.model.ts';
     </section>
   `
 })
-export class HeroesListComponent {
+export class HeroListComponent {
   heroes: Hero[];
   totalPowers: number;
-  avgPower: number;
+
+  get avgPower() {
+    return this.totalPowers / this.heroes.length;
+  }
 }
 // #enddocregion example

public/docs/_examples/style-guide/ts/06-03/app/shared/validate.directive.avoid.ts

@@ -2,15 +2,20 @@
 import { Directive, HostBinding, HostListener } from 'angular2/core';
 
 // #docregion example
+/* avoid */
+
 @Directive({
-  selector: '[tohValidator]'
+  selector: '[tohValidator]',
+  host: {
+    '(mouseenter)': 'onMouseEnter()',
+    'attr.role': 'button'
+  }
 })
 export class ValidatorDirective {
-  @HostBinding('attr.role') role = 'button';
-  @HostListener('mouseenter') onMouseEnter() {
+  role = 'button';
+  onMouseEnter() {
     // do work
   }
 }
 export class ValidateDirective { }
 // #enddocregion example
-

public/docs/_examples/style-guide/ts/06-03/app/shared/validate.directive.ts

@@ -2,18 +2,12 @@
 import { Directive, HostBinding, HostListener } from 'angular2/core';
 
 // #docregion example
-/* avoid */
-
 @Directive({
-  selector: '[tohValidator]',
-  host: {
-    '(mouseenter)': 'onMouseEnter()',
-    'attr.role': 'button'
-  }
+  selector: '[tohValidator]'
 })
 export class ValidatorDirective {
-  role = 'button';
-  onMouseEnter() {
+  @HostBinding('attr.role') role = 'button';
+  @HostListener('mouseenter') onMouseEnter() {
     // do work
   }
 }

public/resources/css/module/_style-guide.scss

@@ -37,6 +37,16 @@
   border-left-color: #EEE;
 }
 
+.s-why.s-why-last {
+  margin-bottom:32px;
+}
+
 .filetree {
-  margin: 32px 0;
+  margin-bottom: 32px;
+  background-color: #FFF;
+  border:1px solid #1976D2;
+}
+
+table tr code-example .prettyprint {
+  margin-bottom: 0;
 }

tslint.json

@@ -94,8 +94,6 @@
     "component-selector-name": [true, "kebab-case"],
     "directive-selector-type": [true, "attribute"],
     "component-selector-type": [true, "element"],
-    "directive-selector-prefix": [true, "toh"],
-    "component-selector-prefix": [true, "toh"],
     "use-input-property-decorator": true,
     "use-output-property-decorator": true,
     "use-host-property-decorator": true,