Merge branch 'master' into skeleton-dropdown

Author: zvonimirfras

src/accordion/accordion-item.component.ts

@@ -21,17 +21,29 @@ import {
 				viewBox="0 0 7 12">
           		<path fill-rule="nonzero" d="M5.569 5.994L0 .726.687 0l6.336 5.994-6.335 6.002L0 11.27z"/>
 			</svg>
-			 <p class="bx--accordion__title">{{title}}</p>
+			<p
+				class="bx--accordion__title"
+				[ngClass]="{
+					'bx--skeleton__text': skeleton
+				}">
+				{{!skeleton ? title : null}}
+			</p>
 		</button>
 		<div [id]="id" class="bx--accordion__content">
-			<ng-content></ng-content>
+			<ng-content *ngIf="!skeleton; else skeletonTemplate"></ng-content>
+			<ng-template #skeletonTemplate>
+				<p class="bx--skeleton__text" style="width: 90%"></p>
+				<p class="bx--skeleton__text" style="width: 80%"></p>
+				<p class="bx--skeleton__text" style="width: 95%"></p>
+			</ng-template>
 		</div>
 	`
 })
 export class AccordionItem {
 	static accordionItemCount = 0;
 	@Input() title = `Title ${AccordionItem.accordionItemCount}`;
 	@Input() id = `accordion-item-${AccordionItem.accordionItemCount}`;
+	@Input() skeleton = false;
 	@Output() selected = new EventEmitter();
 
 	@HostBinding("class.bx--accordion__item") itemClass = true;
@@ -45,7 +57,9 @@ export class AccordionItem {
 	}
 
 	public toggleExpanded() {
-		this.expanded = !this.expanded;
-		this.selected.emit({id: this.id, expanded: this.expanded});
+		if (!this.skeleton) {
+			this.expanded = !this.expanded;
+			this.selected.emit({id: this.id, expanded: this.expanded});
+		}
 	}
 }

src/accordion/accordion.component.ts

@@ -1,4 +1,11 @@
-import { Component } from "@angular/core";
+import {
+	Component,
+	Input,
+	ContentChildren,
+	QueryList,
+	AfterContentInit
+} from "@angular/core";
+import { AccordionItem } from "./accordion-item.component";
 
 @Component({
 	selector: "ibm-accordion",
@@ -8,6 +15,28 @@ import { Component } from "@angular/core";
 		</ul>
 	`
 })
-export class Accordion {
+export class Accordion implements AfterContentInit {
+	@ContentChildren(AccordionItem) children: QueryList<AccordionItem>;
 
+	protected _skeleton = false;
+
+	@Input()
+	set skeleton(value: any) {
+		this._skeleton = value;
+		this.updateChildren();
+	}
+
+	get skeleton(): any {
+		return this._skeleton;
+	}
+
+	ngAfterContentInit() {
+		this.updateChildren();
+	}
+
+	protected updateChildren() {
+		if (this.children) {
+			this.children.toArray().forEach(child => child.skeleton = this.skeleton);
+		}
+	}
 }

src/accordion/accordion.stories.ts

@@ -52,4 +52,16 @@ storiesOf("Accordion", module)
 			],
 			selected: action("item expanded")
 		}
+	}))
+	.add("Skeleton", () => ({
+		template: `
+			<div style="width: 500px">
+				<ibm-accordion skeleton="true">
+					<ibm-accordion-item expanded="true"></ibm-accordion-item>
+					<ibm-accordion-item></ibm-accordion-item>
+					<ibm-accordion-item></ibm-accordion-item>
+					<ibm-accordion-item></ibm-accordion-item>
+				</ibm-accordion>
+			</div>
+		`
 	}));

src/breadcrumb/breadcrumb-item.component.ts

@@ -8,8 +8,8 @@ import {
 	selector: "ibm-breadcrumb-item",
 	template: `
 	<a class="bx--link"
-		href="{{href}}"
-		*ngIf="href; else content">
+		href="{{skeleton ? href : '/#'}}"
+		*ngIf="skeleton || href; else content">
 		<ng-container *ngTemplateOutlet="content"></ng-container>
 	</a>
 	<ng-template #content>
@@ -19,5 +19,7 @@ import {
 export class BreadcrumbItemComponent {
 	@Input() href: string;
 
+	@Input() skeleton = false;
+
 	@HostBinding("class.bx--breadcrumb-item") itemClass = true;
 }

src/breadcrumb/breadcrumb.component.ts

@@ -1,9 +1,13 @@
 import {
 	Component,
-	Input
+	Input,
+	ContentChildren,
+	QueryList,
+	AfterContentInit
 } from "@angular/core";
 
 import { BreadcrumbItem } from "./breadcrumb-item.interface";
+import { BreadcrumbItemComponent } from "./breadcrumb-item.component";
 
 const MINIMUM_OVERFLOW_THRESHOLD = 4;
 
@@ -12,6 +16,7 @@ const MINIMUM_OVERFLOW_THRESHOLD = 4;
 	template: `
 	<nav #nav class="bx--breadcrumb"
 		[ngClass]="{
+			'bx--skeleton' : skeleton,
 			'bx--breadcrumb--no-trailing-slash' : noTrailingSlash
 		}"
 		[attr.aria-label]="ariaLabel">
@@ -50,14 +55,27 @@ const MINIMUM_OVERFLOW_THRESHOLD = 4;
 		</ng-template>
 	</nav>`
 })
-export class Breadcrumb {
+export class Breadcrumb implements AfterContentInit {
+	@ContentChildren(BreadcrumbItemComponent) children: QueryList<BreadcrumbItemComponent>;
+
 	@Input() items: Array<BreadcrumbItem>;
 
 	@Input() noTrailingSlash = false;
 
 	@Input() ariaLabel: string;
 
 	protected _threshold: number;
+	protected _skeleton = false;
+
+	@Input()
+	set skeleton(value: any) {
+		this._skeleton = value;
+		this.updateChildren();
+	}
+
+	get skeleton(): any {
+		return this._skeleton;
+	}
 
 	@Input()
 	set threshold(threshold: number) {
@@ -71,6 +89,10 @@ export class Breadcrumb {
 		return this._threshold;
 	}
 
+	ngAfterContentInit() {
+		this.updateChildren();
+	}
+
 	get shouldShowContent(): boolean {
 		return !this.items;
 	}
@@ -97,4 +119,10 @@ export class Breadcrumb {
 	get last(): BreadcrumbItem {
 		return this.shouldShowOverflow ? this.items[this.items.length - 1] : null;
 	}
+
+	protected updateChildren() {
+		if (this.children) {
+			this.children.toArray().forEach(child => child.skeleton = this.skeleton);
+		}
+	}
 }

src/breadcrumb/breadcrumb.stories.ts

@@ -57,4 +57,16 @@ storiesOf("Breadcrumb", module)
 		threshold: number("threshold", 4),
 		items: createBreadcrumbItems
 	}
+}))
+.add("Skeleton", () => ({
+	template: `
+	<ibm-breadcrumb skeleton="true" [noTrailingSlash]="noTrailingSlash">
+		<ibm-breadcrumb-item></ibm-breadcrumb-item>
+		<ibm-breadcrumb-item></ibm-breadcrumb-item>
+		<ibm-breadcrumb-item></ibm-breadcrumb-item>
+		<ibm-breadcrumb-item></ibm-breadcrumb-item>
+	</ibm-breadcrumb>`,
+	props: {
+		noTrailingSlash: boolean("noTrailingSlash", true)
+	}
 }));

src/button/button.directive.ts

@@ -37,6 +37,7 @@ export class Button implements OnInit {
 	@HostBinding("class.bx--btn--ghost") ghost = false;
 	@HostBinding("class.bx--btn--danger") danger = false;
 	@HostBinding("class.bx--btn--danger--primary") dangerPrimary = false;
+	@HostBinding("class.bx--skeleton") @Input() skeleton = false;
 	@HostBinding("class.bx--btn--sm") smallSize = false;
 
 	ngOnInit() {

src/button/button.stories.ts

@@ -29,4 +29,11 @@ storiesOf("Button", module)
 		props: {
 			size: select("Size of the buttons", ["normal", "sm"], "normal")
 		}
+	}))
+	.add("Skeleton", () => ({
+		template: `
+			<button ibmButton skeleton="true"></button>
+			&nbsp;
+			<button ibmButton skeleton="true" size="sm"></button>
+		`
 	}));

src/checkbox/checkbox.component.ts

@@ -70,7 +70,12 @@ export class CheckboxChange {
 			[attr.aria-checked]="(indeterminate ? 'mixed' : checked)"
 			(change)="onChange($event)"
 			(click)="onClick($event)">
-		<label [for]="id" class="bx--checkbox-label">
+		<label
+			[for]="id"
+			class="bx--checkbox-label"
+			[ngClass]="{
+				'bx--skeleton' : skeleton
+			}">
 			<ng-content></ng-content>
 		</label>
 	`,
@@ -107,6 +112,10 @@ export class Checkbox implements ControlValueAccessor, AfterViewInit {
 	 * Set to `true` for a disabled checkbox.
 	 */
 	@Input() disabled = false;
+	/**
+	 * Set to `true` for a loading checkbox.
+	 */
+	@Input() skeleton = false;
 	/**
 	 * Sets the name attribute on the `input` element.
 	 */

src/checkbox/checkbox.stories.ts

@@ -28,4 +28,7 @@ storiesOf("Checkbox", module).addDecorator(
 			onChange: action("Change fired!"),
 			onIndeterminateChange: action("Indeterminate change fired!")
 		}
-	}));
+	}))
+	.add("Skeleton", () => ({
+		template: `<ibm-checkbox skeleton="true"></ibm-checkbox>`
+}));