Merge pull request #338 from youda97/skeleton-breadcrumb

 feat(breadcrumb): Add skeleton state

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