feat(tiles): Merge pull request #37 from markewallace/add_tiles_module

Add new tiles module with basic and clickable tile components

package.json

@@ -8,7 +8,7 @@
     "storybook": "start-storybook -p 6006",
     "docs:build": "compodoc src -p tsconfig.json",
     "docs:server": "compodoc src -p tsconfig.json -s -w",
-    "lint": "tslint -e spec.ts src/**/*.ts && stylelint src/**/*.scss --config .stylelintrc.yml",
+    "lint": "tslint src/**/*.ts && stylelint src/**/*.scss --config .stylelintrc.yml",
     "test": "karma start",
     "test:watch": "karma start --auto-watch --no-single-run",
     "utils:add": "git subtree add --prefix=src/utils [email protected]:peretz/utils.git master --squash",

src/index.ts

@@ -20,3 +20,4 @@ export * from "./switch/switch.module";
 export * from "./radio/radio.module";
 export * from "./input/input.module";
 export * from "./select/select.module";
+export * from "./tiles/tiles.module";

src/tiles/clickable-tile.component.spec.ts

@@ -0,0 +1,48 @@
+/// <reference path="../../node_modules/@types/jasmine/index.d.ts" />
+
+import { DebugElement, Component } from "@angular/core";
+import {
+	async,
+	ComponentFixture,
+	TestBed
+} from "@angular/core/testing";
+import { By } from "@angular/platform-browser";
+
+import { ClickableTile } from "./clickable-tile.component";
+
+describe("ClickableTile", () => {
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			declarations: [ClickableTile, ClickableTileTestComponent],
+		}).compileComponents();
+	}));
+
+	it("should create a ClickableTile", () => {
+		let fixture: ComponentFixture<ClickableTile> = TestBed.createComponent(ClickableTile);
+		let component: ClickableTile = fixture.componentInstance;
+		fixture.detectChanges();
+
+		expect(component).toBeTruthy();
+	});
+
+	it("should create a disabled ClickableTile", () => {
+		let fixture: ComponentFixture<ClickableTileTestComponent> = TestBed.createComponent(ClickableTileTestComponent);
+		let component: ClickableTileTestComponent = fixture.componentInstance;
+		fixture.detectChanges();
+
+		const directiveEl = fixture.debugElement.query(By.directive(ClickableTile));
+		expect(directiveEl).not.toBeNull();
+		expect(directiveEl.attributes["disabled"]).toBeTruthy();
+		expect(directiveEl.attributes["href"]).toBe("https://angular.carbondesignsystem.com/");
+	});
+});
+
+@Component({
+	selector: "test-cmp",
+	template: `
+	<ibm-clickable-tile disabled="true" href="https://angular.carbondesignsystem.com/">
+		Test Clickable Tile
+	</ibm-clickable-tile>`,
+	entryComponents: [ClickableTile]
+})
+class ClickableTileTestComponent {}

src/tiles/clickable-tile.component.ts

@@ -0,0 +1,63 @@
+import {
+	Component,
+	Input
+} from "@angular/core";
+
+/**
+ * Build application's clickable tiles using this component.
+ *
+ * ## Basic usage
+ *
+ * ```html
+ * <ibm-clickable-tile>
+ * 		tile content
+ * </ibm-clickable-tile>
+ * ```
+ *
+ * @export
+ * @class ClickableTile
+ * @implements {OnInit}
+ */
+@Component({
+	selector: "ibm-clickable-tile",
+	template: `
+	<a
+		class="bx--link bx--tile bx--tile--clickable"
+		[ngClass]="{
+			'bx--tile--is-clicked': clicked
+		}"
+		tabindex="0"
+		(click)="onClick($event)"
+		(keydown)="onKeyDown($event)"
+		[href]="href"
+		[attr.aria-disabled]="disabled">
+		<ng-content></ng-content>
+	</a>`
+})
+export class ClickableTile {
+	/**
+	 * Sets the `href` attribute on the `ibm-clickable-tile` element.
+	 * @type {string}
+	 * @memberof ClickableTile
+	 */
+	@Input() href: string;
+
+	/**
+	 * Set to `true` to disable the clickable tile.
+	 * @type {boolean}
+	 * @memberof ClickableTile
+	 */
+	@Input() disabled = false;
+
+	clicked = false;
+
+	onClick(event) {
+		this.clicked = !this.clicked;
+	}
+
+	onKeyDown(event) {
+		if (event.key === "Enter" || event.key === " ") {
+			this.clicked = !this.clicked;
+		}
+	}
+}

src/tiles/tile.component.spec.ts

@@ -0,0 +1,30 @@
+/// <reference path="../../node_modules/@types/jasmine/index.d.ts" />
+
+import {
+	async,
+	ComponentFixture,
+	TestBed
+} from "@angular/core/testing";
+
+import { Tile } from "./tile.component";
+
+describe("Tile", () => {
+	let component: Tile;
+	let fixture: ComponentFixture<Tile>;
+
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			declarations: [Tile],
+		}).compileComponents();
+	}));
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(Tile);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it("should create a Tile", () => {
+		expect(component).toBeTruthy();
+	});
+});

src/tiles/tile.component.ts

@@ -0,0 +1,27 @@
+import {
+	Component,
+	HostBinding
+} from "@angular/core";
+
+/**
+ * Build application's tiles using this component.
+ *
+ * ## Basic usage
+ *
+ * ```html
+ * <ibm-tile>
+ * 		tile content
+ * </ibm-tile>
+ * ```
+ *
+ * @export
+ * @class Tile
+ * @implements {OnInit}
+ */
+@Component({
+	selector: "ibm-tile",
+	template: `<ng-content></ng-content>`
+})
+export class Tile {
+	@HostBinding("class") tileClass = "bx--tile";
+}

src/tiles/tiles.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { TranslateModule } from "@ngx-translate/core";
+
+import { Tile } from "./tile.component";
+import { ClickableTile } from "./clickable-tile.component";
+
+export { Tile } from "./tile.component";
+export { ClickableTile } from "./clickable-tile.component";
+
+@NgModule({
+	declarations: [
+		Tile,
+		ClickableTile
+	],
+	exports: [
+		Tile,
+		ClickableTile
+	],
+	imports: [
+		CommonModule,
+		TranslateModule.forChild()
+	]
+})
+export class TilesModule {}

src/tiles/tiles.stories.ts

@@ -0,0 +1,51 @@
+import { storiesOf, moduleMetadata } from "@storybook/angular";
+import { withKnobs } from "@storybook/addon-knobs/angular";
+
+import { TranslateModule } from "@ngx-translate/core";
+
+import { TilesModule } from "../";
+
+storiesOf("Tiles", module)
+	.addDecorator(
+		moduleMetadata({
+			imports: [
+				TilesModule,
+				TranslateModule.forRoot()
+			]
+		})
+	)
+	.addDecorator(withKnobs)
+	.add("Basic", () => ({
+		template: `
+		<ibm-tile>
+			tile content goes here...
+		</ibm-tile>
+		`
+	}))
+	.add("Multiple", () => ({
+		template: `
+		<div style="display: flex; flex-flow: row wrap; justify-content: space-around;">
+			<ibm-tile>
+				Tile 1
+			</ibm-tile>
+			<ibm-tile>
+				Tile 2
+			</ibm-tile>
+			<ibm-tile>
+				Tile 3
+			</ibm-tile>
+		</div>
+		`
+	}))
+	.add("Clickable", () => ({
+		template: `
+		<p>Normal</p>
+		<ibm-clickable-tile href="#">
+			clickable tile content goes here...
+		</ibm-clickable-tile>
+		<p>Disabled</p>
+		<ibm-clickable-tile href="#" [disabled]="true">
+			clickable tile content goes here...
+		</ibm-clickable-tile>
+		`
+	}));