Merge branch 'master' into master

Author: Akshat55

src/tiles/clickable-tile.component.ts

@@ -24,10 +24,13 @@ import { Router } from "@angular/router";
 	<a
 		ibmLink
 		class="bx--tile bx--tile--clickable"
-		[ngClass]="{'bx--tile--light': theme === 'light'}"
+		[ngClass]="{
+			'bx--tile--light': theme === 'light',
+			'bx--tile--disabled bx--link--disabled' : disabled
+		}"
 		tabindex="0"
 		(click)="navigate($event)"
-		[href]="href"
+		[attr.href]="disabled ? null : href"
 		[attr.target]="target"
 		[attr.aria-disabled]="disabled">
 		<ng-content></ng-content>
@@ -71,7 +74,7 @@ export class ClickableTile {
 	constructor(@Optional() protected router: Router) {}
 
 	navigate(event) {
-		if (this.router && this.route) {
+		if (this.router && this.route && !this.disabled) {
 			event.preventDefault();
 			const status = this.router.navigate(this.route, this.routeExtras);
 			this.navigation.emit(status);

src/tiles/selection-tile.component.ts

@@ -15,18 +15,20 @@ import { I18n } from "carbon-components-angular/i18n";
 	template: `
 		<label
 			class="bx--tile bx--tile--selectable"
-			tabindex="0"
+			tabindex="disabled ? null : 0"
 			[for]="id"
 			[ngClass]="{
 				'bx--tile--is-selected' : selected,
-				'bx--tile--light': theme === 'light'
+				'bx--tile--light': theme === 'light',
+				'bx--tile--disabled' : disabled
 			}"
 			[attr.aria-label]="i18n.get('TILES.TILE') | async">
 			<input
 				#input
 				tabindex="-1"
 				class="bx--tile-input"
 				[id]="id"
+				[disabled]="disabled"
 				[type]="(multiple ? 'checkbox': 'radio')"
 				[value]="value"
 				[name]="name"
@@ -78,6 +80,11 @@ export class SelectionTile implements AfterViewInit {
 	 */
 	@Output() change: EventEmitter<Event> = new EventEmitter();
 
+	/**
+	 * Set to `true` to disable the selection tile.
+	 */
+	@Input() disabled = false;
+
 	/**
 	 * Set by the containing `TileGroup`. Used for the `name` property on the input.
 	 */

src/tiles/tiles.stories.ts

@@ -1,5 +1,5 @@
 import { storiesOf, moduleMetadata } from "@storybook/angular";
-import { select, withKnobs } from "@storybook/addon-knobs/angular";
+import { select, withKnobs, boolean } from "@storybook/addon-knobs/angular";
 import { action } from "@storybook/addon-actions";
 
 import { TilesModule } from "../tiles/tiles.module";
@@ -99,26 +99,28 @@ storiesOf("Components|Tiles", module)
 			Edit on Carbon UI Builder
 		</a>
 		<br><br>
-		<ibm-clickable-tile href="https://www.carbondesignsystem.com/" target="_blank" [theme]="theme">
+		<ibm-clickable-tile href="https://www.carbondesignsystem.com/" target="_blank" [theme]="theme" [disabled]="disabled">
 			Click the tile to open the Carbon Design System
 		</ibm-clickable-tile>
 		`,
 		props: {
-			theme: select("theme", ["dark", "light"], "dark")
+			theme: select("theme", ["dark", "light"], "dark"),
+			disabled: boolean("disabled", false)
 		}
 	}))
 	.add("Routable", () => ({
 		template: `
-			<ibm-clickable-tile [route]="['foo']" [theme]="theme">
+			<ibm-clickable-tile [route]="['foo']" [theme]="theme" [disabled]="disabled">
 				Click to trigger the <code>foo</code> route
 			</ibm-clickable-tile>
-			<ibm-clickable-tile [route]="['bar']" [theme]="theme">
+			<ibm-clickable-tile [route]="['bar']" [theme]="theme" [disabled]="disabled">
 				Click to trigger the <code>bar</code> route
 			</ibm-clickable-tile>
 			<router-outlet></router-outlet>
 		`,
 		props: {
-			theme: select("theme", ["dark", "light"], "dark")
+			theme: select("theme", ["dark", "light"], "dark"),
+			disabled: boolean("disabled", false)
 		}
 	}))
 	.add("Selectable", () => ({
@@ -135,14 +137,15 @@ storiesOf("Components|Tiles", module)
 			</a>
 			<br><br>
 			<ibm-tile-group (selected)="selected($event)" [multiple]="false">
-				<ibm-selection-tile value="tile1" [selected]="true" [theme]="theme">Selectable Tile</ibm-selection-tile>
-				<ibm-selection-tile value="tile2" [theme]="theme">Selectable Tile</ibm-selection-tile>
-				<ibm-selection-tile value="tile3" [theme]="theme">Selectable Tile</ibm-selection-tile>
+				<ibm-selection-tile value="tile1" [disabled]="disabled" [selected]="true" [theme]="theme">Selectable Tile</ibm-selection-tile>
+				<ibm-selection-tile value="tile2" [disabled]="disabled" [theme]="theme">Selectable Tile</ibm-selection-tile>
+				<ibm-selection-tile value="tile3" [disabled]="disabled" [theme]="theme">Selectable Tile</ibm-selection-tile>
 			</ibm-tile-group>
 		`,
 		props: {
 			selected: action("tile selected"),
-			theme: select("theme", ["dark", "light"], "dark")
+			theme: select("theme", ["dark", "light"], "dark"),
+			disabled: boolean("disabled", false)
 		}
 	}))
 	.add("Multi-select", () => ({
@@ -172,14 +175,15 @@ storiesOf("Components|Tiles", module)
 			</a>
 			<br><br>
 			<ibm-tile-group (selected)="selected($event)" [multiple]="true">
-				<ibm-selection-tile value="tile1" [selected]="true" [theme]="theme">Selectable Tile</ibm-selection-tile>
-				<ibm-selection-tile value="tile2" [theme]="theme">Selectable Tile</ibm-selection-tile>
-				<ibm-selection-tile value="tile3" [theme]="theme">Selectable Tile</ibm-selection-tile>
+				<ibm-selection-tile value="tile1" [selected]="true" [theme]="theme" [disabled]="disabled">Selectable Tile</ibm-selection-tile>
+				<ibm-selection-tile value="tile2" [theme]="theme" [disabled]="disabled">Selectable Tile</ibm-selection-tile>
+				<ibm-selection-tile value="tile3" [theme]="theme" [disabled]="disabled">Selectable Tile</ibm-selection-tile>
 			</ibm-tile-group>
 		`,
 		props: {
 			selected: action("tile selected"),
-			theme: select("theme", ["dark", "light"], "dark")
+			theme: select("theme", ["dark", "light"], "dark"),
+			disabled: boolean("disabled", false)
 		}
 	}))
 	.add("Expandable", () => ({