[WIP] docs(style-guide): create examples

public/docs/_examples/style-guide/ts/02-07/app/hero.component.ts

@@ -0,0 +1,9 @@
+// #docregion
+import { Component } from 'angular2/core';
+
+// #docregion example
+@Component({
+  selector: 'toh-hero'
+})
+export class HeroComponent {}
+// #enddocregion example

public/docs/_examples/style-guide/ts/02-07/app/kitchen-sink.ts

@@ -0,0 +1,20 @@
+// #docregion
+/**
+ * AVOID THIS PATTERN
+ */
+
+/*
+* HeroComponent is in the Tour of Heroes feature
+*/
+@Component({
+  selector: 'hero'
+})
+export class HeroComponent {}
+
+/*
+* UsersComponent is in an Admin feature
+*/
+@Component({
+  selector: 'users'
+})
+export class UsersComponent {}

public/docs/_examples/style-guide/ts/02-07/app/users.component.ts

@@ -0,0 +1,9 @@
+// #docregion
+import { Component } from 'angular2/core';
+
+// #docregion example
+@Component({
+  selector: 'admin-users'
+})
+export class UsersComponent {}
+// #enddocregion example

public/docs/_examples/style-guide/ts/02-08/app/kitchen-sink.ts

@@ -0,0 +1,9 @@
+// #docregion
+/**
+ * AVOID THIS PATTERN
+ */
+
+@Directive({
+  selector: '[validate]'
+})
+export class ValidateDirective {}

public/docs/_examples/style-guide/ts/02-08/app/validate.directive.ts

@@ -0,0 +1,9 @@
+// #docregion
+import { Directive } from 'angular2/core';
+
+// #docregion example
+@Directive({
+  selector: '[tohValidate]'
+})
+export class ValidateDirective {}
+// #enddocregion example

public/docs/_examples/style-guide/ts/05-02/app/app.component.html

@@ -0,0 +1,2 @@
+<!-- #docregion -->
+<toh-hero-button></toh-hero-button>

public/docs/_examples/style-guide/ts/05-02/app/hero-button.component.ts

@@ -0,0 +1,9 @@
+// #docregion
+import { Component } from 'angular2/core';
+
+// #docregion example
+@Component({
+  selector: 'toh-hero-button'
+})
+export class HeroButtonComponent {}
+// #enddocregion example

public/docs/_examples/style-guide/ts/05-02/app/kitchen-sink.ts

@@ -0,0 +1,9 @@
+// #docregion
+/**
+ * AVOID THIS PATTERN
+ */
+
+@Component({
+  selector: 'tohHeroButton'
+})
+export class HeroButtonComponent {}

public/docs/_examples/style-guide/ts/05-03/app/app.component.html

@@ -0,0 +1,2 @@
+<!-- #docregion -->
+<toh-hero-button></toh-hero-button>

public/docs/_examples/style-guide/ts/05-03/app/hero-button.component.ts

@@ -0,0 +1,9 @@
+// #docregion
+import { Component } from 'angular2/core';
+
+// #docregion example
+@Component({
+  selector: 'toh-hero-button'
+})
+export class HeroButtonComponent {}
+// #enddocregion example

public/docs/_examples/style-guide/ts/05-03/app/kitchen-sink.html

@@ -0,0 +1,3 @@
+<!-- #docregion -->
+<!-- AVOID THIS PATTERN -->
+<div tohHeroButton></div>

public/docs/_examples/style-guide/ts/05-03/app/kitchen-sink.ts

@@ -0,0 +1,9 @@
+// #docregion
+/**
+ * AVOID THIS PATTERN
+ */
+
+@Component({
+  selector: '[tohHeroButton]'
+})
+export class HeroButtonComponent {}

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

@@ -0,0 +1,14 @@
+// #docregion
+import { Component } from 'angular2/core';
+
+// #docregion example
+@Component({
+  selector: 'toh-heroes',
+  templateUrl: 'heroes.component.html',
+  styleUrls:  ['heroes.component.css']
+})
+export class HeroesComponent implements OnInit {
+  heroes: Hero[];
+  selectedHero: Hero;
+}
+// #enddocregion example

public/docs/_examples/style-guide/ts/05-04/app/kitchen-sink.ts

@@ -0,0 +1,54 @@
+// #docregion
+/**
+ * AVOID THIS PATTERN
+ */
+
+@Component({
+  selector: 'toh-heroes',
+  template: `
+    <div>
+      <h2>My Heroes</h2>
+      <ul class="heroes">
+        <li *ngFor="#hero of heroes">
+          <span class="badge">{{hero.id}}</span> {{hero.name}}
+        </li>
+      </ul>
+      <div *ngIf="selectedHero">
+        <h2>{{selectedHero.name | uppercase}} is my hero</h2>
+      </div>
+    </div>
+  `,
+  styleUrls:  [`
+    .heroes {
+      margin: 0 0 2em 0; list-style-type: none; padding: 0; width: 15em;
+    }
+    .heroes li {
+      cursor: pointer;
+      position: relative;
+      left: 0;
+      background-color: #EEE;
+      margin: .5em;
+      padding: .3em 0;
+      height: 1.6em;
+      border-radius: 4px;
+    }
+    .heroes .badge {
+      display: inline-block;
+      font-size: small;
+      color: white;
+      padding: 0.8em 0.7em 0 0.7em;
+      background-color: #607D8B;
+      line-height: 1em;
+      position: relative;
+      left: -1px;
+      top: -4px;
+      height: 1.8em;
+      margin-right: .8em;
+      border-radius: 4px 0 0 4px;
+    }
+  `]
+})
+export class HeroesComponent implements OnInit {
+  heroes: Hero[];
+  selectedHero: Hero;
+}

public/docs/_examples/style-guide/ts/05-12/app/button.component.ts

@@ -0,0 +1,13 @@
+// #docregion
+import { Component, Input, Output, EventEmitter } from 'angular2/core';
+
+// #docregion example
+@Component({
+  selector: 'toh-button',
+  template: `...`
+})
+export class ButtonComponent {
+  @Output() change = new EventEmitter<any>();
+  @Input() label: string;
+}
+// #enddocregion example

public/docs/_examples/style-guide/ts/05-12/app/kitchen-sink.ts

@@ -0,0 +1,19 @@
+// #docregion
+/**
+ * AVOID THIS PATTERN
+ */
+
+@Component({
+  selector: 'toh-button',
+  template: `...`,
+  inputs: [
+    'label'
+  ],
+  outputs: [
+    'change'
+  ]
+})
+export class ButtonComponent {
+  change = new EventEmitter<any>();
+  label: string;
+}

public/docs/_examples/style-guide/ts/05-13/app/app.component.html

@@ -0,0 +1,3 @@
+<!-- #docregion -->
+<toh-button label="OK" (change)="doSomething()">
+</toh-button>

public/docs/_examples/style-guide/ts/05-13/app/button.component.ts

@@ -0,0 +1,13 @@
+// #docregion
+import { Component, Input, Output, EventEmitter } from 'angular2/core';
+
+// #docregion example
+@Component({
+  selector: 'toh-button',
+  template: `...`
+})
+export class ButtonComponent {
+  @Output() change = new EventEmitter<any>();
+  @Input() label: string;
+}
+// #enddocregion example

public/docs/_examples/style-guide/ts/05-13/app/kitchen-sink.html

@@ -0,0 +1,4 @@
+<!-- #docregion -->
+<!-- AVOID THIS PATTERN -->
+<toh-button labelAttribute="OK" (changeEvent)="doSomething()">
+</toh-button>

public/docs/_examples/style-guide/ts/05-13/app/kitchen-sink.ts

@@ -0,0 +1,13 @@
+// #docregion
+/**
+ * AVOID THIS PATTERN
+ */
+
+@Component({
+  selector: 'toh-button',
+  template: `...`
+})
+export class ButtonComponent {
+  @Output('changeEvent') change = new EventEmitter<any>();
+  @Input('labelAttribute') label: string;
+}

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

@@ -0,0 +1,40 @@
+// #docregion
+import { Component, OnInit } from 'angular2/core';
+
+@Component({
+  selector: 'my-toast',
+  template: `...`
+})
+// #docregion example
+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;
+    this.toastElement.style.zIndex = 9999;
+    window.setTimeout(() => this.hide(), 2500);
+  }
+}
+// #endregion example

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

@@ -0,0 +1,22 @@
+// #docregion
+import { Component, OnInit } from 'angular2/core';
+
+@Component({
+  selector: 'toh-hero-list',
+  template: `...`
+})
+// #docregion example
+export class HeroListComponent implements OnInit {
+  heroes: Hero[];
+  constructor(private heroService: HeroService) {}
+  getHeros() {
+    this.heroes = [];
+    this.heroService.getHeros()
+      .subscribe(heroes => this.heroes = heroes);
+  }
+  ngOnInit() {
+    this.getHeros();
+  }
+}
+// #enddocregion example
+

public/docs/_examples/style-guide/ts/05-15/app/kitchen-sink.ts

@@ -0,0 +1,28 @@
+// #docplaster
+// #docregion example
+/**
+ * AVOID THIS PATTERN
+ */
+// #enddocregion example
+
+@Component({
+  selector: 'toh-hero-list',
+  template: `...`
+})
+// #docregion example
+export class HeroListComponent implements OnInit {
+  heroes: Hero[];
+  constructor(private http: Http) {}
+  getHeros() {
+    this.heroes = [];
+    this.http.get(heroesUrl)
+      .map((response: Response) => <Hero[]>response.json().data)
+      .catch(this.exceptionService.catchBadResponse)
+      .finally(() => this.spinnerService.hide())
+      .subscribe(heroes => this.heroes = heroes);
+  }
+  ngOnInit() {
+    this.getHeros();
+  }
+}
+// #enddocregion example

public/docs/_examples/style-guide/ts/05-16/app/app.component.html

@@ -0,0 +1,2 @@
+<!-- #docregion -->
+<toh-hero (savedTheDay)="onSavedTheDay($event)"></toh-hero>

public/docs/_examples/style-guide/ts/05-16/app/hero.component.ts

@@ -0,0 +1,14 @@
+// #docregion
+import { Component, Output, EventEmitter } from 'angular2/core';
+
+@Component({
+  selector: 'toh-hero',
+  template: `...`
+})
+// #docregion example
+export class HeroComponent {
+  @Output() savedTheDay = new EventEmitter<boolean>();
+}
+// #enddocregion example
+
+

public/docs/_examples/style-guide/ts/05-16/app/kitchen-sink.html

@@ -0,0 +1,3 @@
+<!-- #docregion -->
+<!-- AVOID THIS PATTERN -->
+<toh-hero (onSavedTheDay)="onSavedTheDay($event)"></toh-hero>

public/docs/_examples/style-guide/ts/05-16/app/kitchen-sink.ts

@@ -0,0 +1,16 @@
+// #docplaster
+// #docregion example
+/**
+ * AVOID THIS PATTERN
+ */
+// #enddocregion example
+
+@Component({
+  selector: 'toh-hero',
+  template: `...`
+})
+// #docregion example
+export class HeroComponent {
+  @Output() onSavedTheDay = new EventEmitter<boolean>();
+}
+// #enddocregion example