feat(breadcrumb): Add skeleton state

Author: youda97

src/breadcrumb/breadcrumb-item.component.ts

@@ -17,7 +17,7 @@ import {
 	</ng-template>`
 })
 export class BreadcrumbItemComponent {
-	@Input() href: string;
+	@Input() href = "/#";
 
 	@HostBinding("class.bx--breadcrumb-item") itemClass = true;
 }

src/breadcrumb/breadcrumb.component.ts

@@ -12,6 +12,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">
@@ -57,6 +58,8 @@ export class Breadcrumb {
 
 	@Input() ariaLabel: string;
 
+	@Input() skeleton = false;
+
 	protected _threshold: number;
 
 	@Input()

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