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

closes #1170
This commit is contained in:
John Papa 2016-04-25 09:24:13 -07:00 committed by Ward Bell
parent 59c76790af
commit 3bc94147a7
9 changed files with 664 additions and 314 deletions

View File

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

View File

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

View File

@ -1,6 +1,6 @@
// #docplaster // #docplaster
// #docregion 001-1 // #docregion 01-01-1
/* avoid */ /* avoid */
import { bootstrap } from 'angular2/platform/browser'; import { bootstrap } from 'angular2/platform/browser';
import { Component, OnInit } from 'angular2/core'; import { Component, OnInit } from 'angular2/core';
@ -9,7 +9,7 @@
selector: 'my-app', selector: 'my-app',
template: ` template: `
<h1>{{title}}</h1> <h1>{{title}}</h1>
<pre>{{heroes | json}}</pre> <pre>{{heroes | json}}</pre>
`, `,
styleUrls: ['app/app.component.css'] styleUrls: ['app/app.component.css']
}) })
@ -27,11 +27,11 @@
function getHeroes() { function getHeroes() {
return // some promise of data; return // some promise of data;
} }
// #enddocregion 001-1 // #enddocregion 01-01-1
// #docregion 001-2 // #docregion 01-01-2
/* recommended */ /* recommended */
// main.ts // main.ts
@ -50,7 +50,7 @@
@Component({ @Component({
selector: 'my-app', selector: 'my-app',
template: ` template: `
<pre>{{heroes | json}}</pre> <pre>{{heroes | json}}</pre>
`, `,
styleUrls: ['app/app.component.css'], styleUrls: ['app/app.component.css'],
providers: [HeroService] providers: [HeroService]
@ -58,16 +58,16 @@
export class AppComponent implements OnInit{ export class AppComponent implements OnInit{
heroes: Hero[] = []; heroes: Hero[] = [];
constructor(private _heroService: HeroService) {} constructor(private heroService: HeroService) {}
ngOnInit() { ngOnInit() {
this._heroService.getHeroes() this.heroService.getHeroes()
.then(heroes => this.heroes = heroes); .then(heroes => this.heroes = heroes);
} }
} }
// #enddocregion 001-2 // #enddocregion 01-01-2
// #docregion 001-3 // #docregion 01-01-3
/* recommended */ /* recommended */
// hero.service.ts // hero.service.ts
@ -80,9 +80,9 @@
return Promise.resolve(HEROES); return Promise.resolve(HEROES);
} }
} }
// #enddocregion 001-3 // #enddocregion 01-01-3
// #docregion 001-4 // #docregion 01-01-4
/* recommended */ /* recommended */
// hero.ts // hero.ts
@ -90,4 +90,4 @@
id: number; id: number;
name: string; name: string;
} }
// #enddocregion 001-4 // #enddocregion 01-01-4

File diff suppressed because it is too large Load Diff

View File

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

View File

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