Merge branch 'master' into tabs

Author: zvonimirfras

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/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>`
+}));

src/progress-indicator/progress-indicator.component.ts

@@ -3,7 +3,13 @@ import { Component, Input } from "@angular/core";
 @Component({
 	selector: "ibm-progress-indicator",
 	template: `
-	<ul data-progress data-progress-current class="bx--progress">
+	<ul
+		data-progress
+		data-progress-current
+		class="bx--progress"
+		[ngClass]="{
+			'bx--skeleton': skeleton
+		}">
 		<li
 		class="bx--progress-step bx--progress-step--{{step.state}}"
 		*ngFor="let step of steps; let i = index">
@@ -27,5 +33,15 @@ import { Component, Input } from "@angular/core";
 	`
 })
 export class ProgressIndicator {
+	static skeletonSteps(stepCount: number) {
+		const steps = [];
+		for (let i = 0; i < stepCount; i++) {
+			steps.push({"state": ["incomplete"]});
+		}
+
+		return steps;
+	}
+
 	@Input() steps = [];
+	@Input() skeleton = false;
 }

src/progress-indicator/progrss-indicator.stories.ts

@@ -1,15 +1,40 @@
+import {
+	Component,
+	Input,
+	OnInit
+} from "@angular/core";
 import { storiesOf, moduleMetadata } from "@storybook/angular";
 import { withNotes } from "@storybook/addon-notes";
 import { action } from "@storybook/addon-actions";
 import { withKnobs, boolean, object } from "@storybook/addon-knobs/angular";
 
 import { ProgressIndicatorModule } from "../";
+import { ProgressIndicator } from "./progress-indicator.component";
+
+@Component({
+	selector: "app-skeleton-progress-indicator",
+	template: `
+		<ibm-progress-indicator [steps]="skeletonSteps" skeleton="true">
+		</ibm-progress-indicator>
+	`
+})
+class SkeletonStory implements OnInit {
+	@Input() skeletonSteps = [];
+
+	ngOnInit() {
+		// Creates an empty progress indicator with 4 steps
+		this.skeletonSteps = ProgressIndicator.skeletonSteps(4);
+	}
+}
 
 storiesOf("ProgressIndicator", module)
 	.addDecorator(
 		moduleMetadata({
 			imports: [
 				ProgressIndicatorModule
+			],
+			declarations: [
+				SkeletonStory
 			]
 		})
 	)
@@ -47,4 +72,9 @@ storiesOf("ProgressIndicator", module)
 				}
 			]
 		}
+	}))
+	.add("Skeleton", () => ({
+		template: `
+		<app-skeleton-progress-indicator></app-skeleton-progress-indicator>
+		`
 	}));

src/structured-list/list-column.component.ts

@@ -12,9 +12,14 @@ import { Component, HostBinding, Input } from "@angular/core";
  */
 @Component({
 	selector: "ibm-list-column",
-	template: `<ng-content></ng-content>`
+	template: `
+		<span *ngIf="skeleton"></span>
+		<ng-content></ng-content>
+	`
 })
 export class ListColumn {
+	@Input() skeleton = false;
+
 	@HostBinding("class.bx--structured-list-th") isHeaderColumn = true;
 	@HostBinding("class.bx--structured-list-td") isBodyColumn = true;
 	/**

src/structured-list/list-header.component.ts

@@ -3,7 +3,8 @@ import {
 	HostBinding,
 	ContentChildren,
 	QueryList,
-	AfterContentInit
+	AfterContentInit,
+	Input
 } from "@angular/core";
 import { ListColumn } from "./list-column.component";
 
@@ -31,17 +32,36 @@ import { ListColumn } from "./list-column.component";
 export class ListHeader implements AfterContentInit {
 	@HostBinding("class.bx--structured-list-thead") wrapper = true;
 
+	@Input()
+	set skeleton(value: any) {
+		this._skeleton = value;
+		this.updateChildren();
+	}
+
+	get skeleton(): any {
+		return this._skeleton;
+	}
+
 	@ContentChildren(ListColumn) columns: QueryList<ListColumn>;
 
 	/**
 	 * Set by the containing `StructuredList`. Adds a dummy header for the selection column when set to true.
 	 */
 	selection = false;
 
+	protected _skeleton = false;
+
 	ngAfterContentInit() {
 		this.columns.forEach(column => {
 			column.isBodyColumn = false;
 			column.isHeaderColumn = true;
 		});
+		this.updateChildren();
+	}
+
+	protected updateChildren() {
+		if (this.columns) {
+			this.columns.toArray().forEach(child => child.skeleton = this.skeleton);
+		}
 	}
 }

src/structured-list/structured-list.component.ts

@@ -58,7 +58,8 @@ import { NG_VALUE_ACCESSOR, ControlValueAccessor } from "@angular/forms";
 				'bx--structured-list--border': border,
 				'bx--structured-list--selection': selection,
 				'bx--structured-list--condensed': condensed,
-				'bx--structured-list-content--nowrap': nowrap
+				'bx--structured-list-content--nowrap': nowrap,
+				'bx--skeleton': skeleton
 			}">
 			<ng-content select="ibm-list-header"></ng-content>
 			<div class="bx--structured-list-tbody">
@@ -99,6 +100,23 @@ export class StructuredList implements AfterContentInit, ControlValueAccessor {
 	 * Used when `selection = true` as the row radio group `name`
 	 */
 	@Input() name = `structured-list-${StructuredList.listCount++}`;
+
+	/**
+	 * Sets the skeleton value for all `ListHeader` to the skeleton value of `StructuredList`.
+	 */
+	@Input()
+	set skeleton(value: any) {
+		this._skeleton = value;
+		this.updateChildren();
+	}
+
+	/**
+	 * Returns the skeleton value in the `StructuredList` if there is one.
+	 */
+	get skeleton(): any {
+		return this._skeleton;
+	}
+
 	/**
 	 * Emits an event when the row selection changes.
 	 *
@@ -116,6 +134,8 @@ export class StructuredList implements AfterContentInit, ControlValueAccessor {
 	@ContentChildren(ListRow) rows: QueryList<ListRow>;
 	@ContentChildren(ListHeader) headers: QueryList<ListHeader>;
 
+	protected _skeleton = false;
+
 	onChange = (_: any) => { };
 
 	onTouched = () => { };
@@ -138,6 +158,7 @@ export class StructuredList implements AfterContentInit, ControlValueAccessor {
 				this.onChange(row.value);
 			});
 		});
+		this.updateChildren();
 	}
 
 	writeValue(value: any) {
@@ -158,4 +179,10 @@ export class StructuredList implements AfterContentInit, ControlValueAccessor {
 	registerOnTouched(fn: any) {
 		this.onTouched = fn;
 	}
+
+	protected updateChildren() {
+		if (this.headers) {
+			this.headers.toArray().forEach(child => child.skeleton = this.skeleton);
+		}
+	}
 }