docs(component-styles): add chapter about styling components

closes #1047

Author: teropa

public/docs/_examples/component-styles/e2e-spec.js

@@ -0,0 +1,69 @@
+describe('Component Style Tests', function () {
+
+  beforeAll(function () {
+    browser.get('');
+  });
+
+  it('scopes component styles to component view', function() {
+    var componentH1 = element(by.css('hero-app > h1'));
+    var externalH1 = element(by.css('body > h1'));
+
+    expect(componentH1.getCssValue('fontWeight')).toEqual('normal');
+    expect(externalH1.getCssValue('fontWeight')).not.toEqual('normal');
+  });
+
+
+  it('allows styling :host element', function() {
+    var host = element(by.css('hero-details'));
+
+    expect(host.getCssValue('borderWidth')).toEqual('1px');
+  });
+
+  it('supports :host() in function form', function() {
+    var host = element(by.css('hero-details'));
+
+    host.element(by.buttonText('Activate')).click();
+    expect(host.getCssValue('borderWidth')).toEqual('3px');
+  });
+
+  it('allows conditional :host-context() styling', function() {
+    var h2 = element(by.css('hero-details h2'));
+
+    expect(h2.getCssValue('backgroundColor')).toEqual('rgba(238, 238, 255, 1)'); // #eeeeff
+  });
+
+  it('styles both view and content children with /deep/', function() {
+    var viewH3 = element(by.css('hero-team h3'));
+    var contentH3 = element(by.css('hero-controls h3'));
+
+    expect(viewH3.getCssValue('fontStyle')).toEqual('italic');
+    expect(contentH3.getCssValue('fontStyle')).toEqual('italic');
+  });
+
+  it('includes styles loaded with CSS @import', function() {
+    var host = element(by.css('hero-details'));
+
+    expect(host.getCssValue('padding')).toEqual('10px');
+  });
+
+  it('processes template inline styles', function() {
+    var button = element(by.css('hero-controls button'));
+    var externalButton = element(by.css('body > button'));
+    expect(button.getCssValue('backgroundColor')).toEqual('rgba(255, 255, 255, 1)'); // #ffffff
+    expect(externalButton.getCssValue('backgroundColor')).not.toEqual('rgba(255, 255, 255, 1)');
+  });
+
+  it('processes template <link>s', function() {
+    var li = element(by.css('hero-team li:first-child'));
+    var externalLi = element(by.css('body > ul li'));
+
+    expect(li.getCssValue('listStyleType')).toEqual('square');
+    expect(externalLi.getCssValue('listStyleType')).not.toEqual('square');
+  });
+
+  it('supports relative loading with moduleId', function() {
+    var host = element(by.css('quest-summary'));
+    expect(host.getCssValue('color')).toEqual('rgba(255, 255, 255, 1)'); // #ffffff
+  });
+
+});

public/docs/_examples/component-styles/ts/.gitignore

@@ -0,0 +1 @@
+**/*.js

public/docs/_examples/component-styles/ts/app/hero-app-main.component.ts

@@ -0,0 +1,19 @@
+import {Component, Input} from 'angular2/core';
+import {Hero} from './hero';
+import {HeroDetailsComponent} from './hero-details.component';
+import {HeroControlsComponent} from './hero-controls.component';
+import {QuestSummaryComponent} from './quest-summary.component';
+
+@Component({
+  selector: 'hero-app-main',
+  template: `
+    <quest-summary></quest-summary>
+    <hero-details [hero]=hero [class.active]=hero.active>
+      <hero-controls [hero]=hero></hero-controls>
+    </hero-details>
+  `,
+  directives: [HeroDetailsComponent, HeroControlsComponent, QuestSummaryComponent]
+})
+export class HeroAppMainComponent {
+  @Input() hero: Hero;
+}

public/docs/_examples/component-styles/ts/app/hero-app.component.ts

@@ -0,0 +1,25 @@
+import {Component, HostBinding} from 'angular2/core';
+import {Hero} from './hero';
+import {HeroAppMainComponent} from './hero-app-main.component';
+
+// #docregion
+@Component({
+  selector: 'hero-app',
+  template: `
+    <h1>Tour of Heroes</h1>
+    <hero-app-main [hero]=hero></hero-app-main>`,
+  styles: ['h1 { font-weight: normal; }'],
+  directives: [HeroAppMainComponent]
+})
+// #enddocregion
+export class HeroAppComponent {
+  hero = new Hero(
+    'Human Torch',
+    ['Mister Fantastic', 'Invisible Woman', 'Thing']
+  )
+  
+  @HostBinding('class') get themeClass() {
+    return 'theme-light';
+  }
+
+}

public/docs/_examples/component-styles/ts/app/hero-controls.component.ts

@@ -0,0 +1,26 @@
+import {Component, Input} from 'angular2/core';
+import {Hero} from './hero';
+
+// #docregion inlinestyles
+@Component({
+  selector: 'hero-controls',
+  template: `
+    <style>
+      button {
+        background-color: white;
+        border: 1px solid #777;
+      }
+    </style>
+    <h3>Controls</h3>
+    <button (click)="activate()">Activate</button>
+  `
+})
+// #enddocregion inlinestyles
+export class HeroControlsComponent {
+
+  @Input() hero: Hero;
+
+  activate() {
+    this.hero.active = true;
+  }
+}

public/docs/_examples/component-styles/ts/app/hero-details-box.css

@@ -0,0 +1,3 @@
+:host {
+  padding: 10px;
+}

public/docs/_examples/component-styles/ts/app/hero-details.component.css

@@ -0,0 +1,28 @@
+/* #docregion import */
+@import 'hero-details-box.css';
+/* #enddocregion import */
+
+/* #docregion host */
+:host {
+  display: block;
+  border: 1px solid black;
+}
+/* #enddocregion host */
+
+/* #docregion hostfunction */
+:host(.active) {
+  border-width: 3px;
+}
+/* #enddocregion hostfunction */
+
+/* #docregion hostcontext */
+:host-context(.theme-light) h2 {
+  background-color: #eef;
+}
+/* #enddocregion hostcontext */
+
+/* #docregion deep */
+:host /deep/ h3 {
+  font-style: italic;
+}
+/* #enddocregion deep */

public/docs/_examples/component-styles/ts/app/hero-details.component.ts

@@ -0,0 +1,20 @@
+import {Component, Input} from 'angular2/core';
+import {Hero} from './hero';
+import {HeroTeamComponent} from './hero-team.component';
+
+// #docregion styleurls
+@Component({
+  selector: 'hero-details',
+  template: `
+    <h2>{{hero.name}}</h2>
+    <hero-team [hero]=hero></hero-team>
+    <ng-content></ng-content>
+  `,
+  styleUrls: ['app/hero-details.component.css'],
+  directives: [HeroTeamComponent]
+})
+export class HeroDetailsComponent {
+// #enddocregion styleurls
+
+  @Input() hero:Hero;
+}

public/docs/_examples/component-styles/ts/app/hero-team.component.css

@@ -0,0 +1,3 @@
+li {
+  list-style-type: square;
+}

public/docs/_examples/component-styles/ts/app/hero-team.component.ts

@@ -0,0 +1,19 @@
+import {Component, Input} from 'angular2/core';
+import {Hero} from './hero';
+
+// #docregion stylelink
+@Component({
+  selector: 'hero-team',
+  template: `
+    <link rel="stylesheet" href="app/hero-team.component.css">
+    <h3>Team</h3>
+    <ul>
+      <li *ngFor="#member of hero.team">
+        {{member}}
+      </li>
+    </ul>`
+})
+// #enddocregion stylelink
+export class HeroTeamComponent {
+  @Input() hero: Hero;
+}