Review updates

Author: imandyie

src/grid/grid-test.component.ts

@@ -1,9 +1,15 @@
+import { Component } from "@angular/core";
 import { async, TestBed } from "@angular/core/testing";
 import { By } from "@angular/platform-browser";
-import { TestGridComponent } from "./grid-test.component";
 import { ColumnDirective, GridDirective, RowDirective } from "./grid.directive";
 
-describe("Grid Directive", () => {
+@Component({
+	selector: "ibm-test-grid",
+	template: ""
+})
+class TestGridComponent {}
+
+describe("GridDirective", () => {
 	beforeEach(() => {
 		TestBed.configureTestingModule({
 			declarations: [
@@ -18,7 +24,7 @@ describe("Grid Directive", () => {
 	it("should render a grid", async(() => {
 		TestBed.overrideComponent(TestGridComponent, {
 			set: {
-				template: "<div ibmGrid class='test-directive'></div>"
+				template: "<div ibmGrid></div>"
 			}
 		});
 
@@ -36,7 +42,7 @@ describe("Grid Directive", () => {
 	it("should render a row", async(() => {
 		TestBed.overrideComponent(TestGridComponent, {
 			set: {
-				template: "<div ibmRow class='test-directive'></div>"
+				template: "<div ibmRow></div>"
 			}
 		});
 
@@ -55,7 +61,7 @@ describe("Grid Directive", () => {
 		TestBed.overrideComponent(TestGridComponent, {
 			set: {
 				template:
-				"<div ibmCol [offsets]='{\"md\": 2}' [columnNumbers]='{\"lg\":3, \"md\": \"nobreak\"}' class='test-directive'></div>"
+				"<div ibmCol [offsets]='{\"md\": 2}' [columnNumbers]='{\"lg\":3, \"md\": \"nobreak\"}' class='custom-class-example'></div>"
 			}
 		});
 
@@ -70,7 +76,7 @@ describe("Grid Directive", () => {
 
 			const directiveInstance = directiveEl.injector.get(ColumnDirective);
 			expect(directiveInstance.columnClasses).toBe(
-				"bx--col-lg-3 bx--col-md bx--offset-md-2 test-directive"
+				"bx--col-lg-3 bx--col-md bx--offset-md-2 custom-class-example"
 			);
 		});
 	}));

src/grid/grid.directive.spec.ts

@@ -24,30 +24,36 @@ export class ColumnDirective implements OnInit {
 
 	@Input() offsets = {};
 
-	@HostBinding("class") columnClasses: string;
+	protected _columnClasses: string[] = [];
+
+	@HostBinding("class")
+	get columnClasses(): string {
+		return this._columnClasses.join(" ");
+	}
+
+	set(classes: string) {
+		this._columnClasses = classes.split(" ");
+	}
 
 	ngOnInit() {
-		const classNames = [];
 		try {
 			Object.keys(this.columnNumbers).forEach(key => {
 				if (this.columnNumbers[key] === "nobreak") {
-					classNames.push(`bx--col-${key}`);
+					this._columnClasses.push(`bx--col-${key}`);
 				} else {
-					classNames.push(`bx--col-${key}-${this.columnNumbers[key]}`);
+					this._columnClasses.push(`bx--col-${key}-${this.columnNumbers[key]}`);
 				}
 			});
 
 			Object.keys(this.offsets).forEach(key => {
-				classNames.push(`bx--offset-${key}-${this.offsets[key]}`);
+				this._columnClasses.push(`bx--offset-${key}-${this.offsets[key]}`);
 			});
 		} catch (err) {
 			console.error(`Malformed \`offsets\` or \`columnNumbers\`: ${err}`);
 		}
 
 		if (this.class !== "") {
-			classNames.push(this.class);
+			this._columnClasses.push(this.class);
 		}
-
-		this.columnClasses = classNames.join(" ");
 	}
 }

src/grid/grid.directive.ts

@@ -0,0 +1,24 @@
+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 { GridModule } from "../";
+
+storiesOf("Grid", module)
+	.addDecorator(
+		moduleMetadata({
+			imports: [GridModule]
+		})
+	)
+	.addDecorator(withKnobs)
+	.add("Basic", () => ({
+		template: `
+        	<div ibmGrid>
+            	<div ibmRow>
+              		<div ibmCol class="custom-class-example" [columnNumbers]="{'md':3, 'sm': 12}">First Column</div>
+              		<div ibmCol class="custom-class-example" [columnNumbers]="{'md':3, 'sm': 12}">Second column</div>
+            	</div>
+         	</div>
+		`
+	}));