Add a breadcrumb and breadcrumb item components

Author: markewallace

src/breadcrumb/breadcrumb-item.component.ts

@@ -20,4 +20,4 @@ export class BreadcrumbItemComponent {
 	@Input() href: string;
 
 	@HostBinding("class.bx--breadcrumb-item") itemClass = true;
-}
+}

src/breadcrumb/breadcrumb-item.interface.ts

@@ -17,4 +17,4 @@ export interface BreadcrumbItem {
 	 * @memberof BreadcrumbItem
 	 */
 	href: string;
-}
+}

src/breadcrumb/breadcrumb.component.spec.ts

@@ -118,4 +118,4 @@ describe("Breadcrumb", () => {
 		expect(breadcrumbItemElements.length).toBe(4); // 4 because one is created for the overflow menu
 		expect(breadcrumbItemElements[1].children[0].name).toEqual("ibm-overflow-menu");
 	});
-});
+});

src/breadcrumb/breadcrumb.component.ts

@@ -51,14 +51,14 @@ const MINIMUM_OVERFLOW_THRESHOLD = 4;
 	</nav>`
 })
 export class Breadcrumb {
-	items: Array<BreadcrumbItem>;
-
-  protected _threshold: number;
+	@Input() items: Array<BreadcrumbItem>;
 
 	@Input() noTrailingSlash = false;
 
 	@Input() ariaLabel: string;
 
+	protected _threshold: number;
+
 	@Input()
 	set threshold(threshold: number) {
 		this._threshold = threshold;

src/breadcrumb/breadcrumb.stories.ts

@@ -15,47 +15,46 @@ const createBreadcrumbItems = (count: number): Array<BreadcrumbItem> => {
 };
 
 storiesOf("Breadcrumb", module)
-	.addDecorator(
-		moduleMetadata({
-			imports: [
-				BreadcrumbModule,
-				DialogModule
-			]
-		})
-	)
-	.addDecorator(withKnobs)
-	.add("Basic", () => ({
-		template: `
-		<ibm-breadcrumb [noTrailingSlash]="noTrailingSlash">
-			<ibm-breadcrumb-item href="#1">
-				Breadcrumb 1
-			</ibm-breadcrumb-item>
-			<ibm-breadcrumb-item href="#2">
-				Breadcrumb 2
-			</ibm-breadcrumb-item>
-			<ibm-breadcrumb-item href="#3">
-				Breadcrumb 3
-			</ibm-breadcrumb-item>
-			<ibm-breadcrumb-item href="#4">
-				Breadcrumb 4
-			</ibm-breadcrumb-item>
-		</ibm-breadcrumb>`,
-		props: {
-			noTrailingSlash: boolean("noTrailingSlash", true)
-		}
-	}))
-	.add("Model", () => ({
-		template: `
-		<ibm-breadcrumb
-			[noTrailingSlash]="noTrailingSlash"
-			[threshold]="threshold"
-			[items]="items(itemCount)">
-		</ibm-breadcrumb>`,
-		props: {
-			noTrailingSlash: boolean("noTrailingSlash", true),
-			itemCount: number("itemCount", 10),
-			threshold: number("threshold", 4),
-			items: createBreadcrumbItems
-		}
-  }));
-  
+.addDecorator(
+	moduleMetadata({
+		imports: [
+			BreadcrumbModule,
+			DialogModule
+		]
+	})
+)
+.addDecorator(withKnobs)
+.add("Basic", () => ({
+	template: `
+	<ibm-breadcrumb [noTrailingSlash]="noTrailingSlash">
+		<ibm-breadcrumb-item href="#1">
+			Breadcrumb 1
+		</ibm-breadcrumb-item>
+		<ibm-breadcrumb-item href="#2">
+			Breadcrumb 2
+		</ibm-breadcrumb-item>
+		<ibm-breadcrumb-item href="#3">
+			Breadcrumb 3
+		</ibm-breadcrumb-item>
+		<ibm-breadcrumb-item href="#4">
+			Breadcrumb 4
+		</ibm-breadcrumb-item>
+	</ibm-breadcrumb>`,
+	props: {
+		noTrailingSlash: boolean("noTrailingSlash", true)
+	}
+}))
+.add("Model", () => ({
+	template: `
+	<ibm-breadcrumb
+		[noTrailingSlash]="noTrailingSlash"
+		[threshold]="threshold"
+		[items]="items(itemCount)">
+	</ibm-breadcrumb>`,
+	props: {
+		noTrailingSlash: boolean("noTrailingSlash", true),
+		itemCount: number("itemCount", 10),
+		threshold: number("threshold", 4),
+		items: createBreadcrumbItems
+	}
+}));