Merge pull request #3054 from Akshat55/clickable-tile-icon

feat: Add clickable tile Icon directive

src/tiles/clickable-tile-icon.directive.ts

@@ -0,0 +1,8 @@
+import { Directive, HostBinding } from "@angular/core";
+
+@Directive({
+	selector: "[cdsClickableTileIcon], [ibmClickableTileIcon]"
+})
+export class ClickableTileIconDirective {
+	@HostBinding("class.cds--tile--icon") icon = true;
+}

src/tiles/clickable-tile.stories.ts

@@ -2,13 +2,18 @@
 
 import { moduleMetadata, Meta } from "@storybook/angular";
 import { LayerModule } from "../layer";
+import { IconModule } from "../icon";
 import { TilesModule, ClickableTile } from "./";
 
 export default {
 	title: "Components/Tiles/Clickable",
 	decorators: [
 		moduleMetadata({
-			imports: [TilesModule, LayerModule]
+			imports: [
+				TilesModule,
+				LayerModule,
+				IconModule
+			]
 		})
 	],
 	component: ClickableTile
@@ -22,6 +27,11 @@ const Template = (args) => ({
 			[href]="href"
 			target="_blank">
 			Click the tile to open the Carbon Design System
+			<svg
+				cdsClickableTileIcon
+				cdsIcon="caret--right"
+				size="16">
+			</svg>
 		</cds-clickable-tile>
 	`
 });

src/tiles/index.ts

@@ -1,3 +1,4 @@
+export * from "./clickable-tile-icon.directive";
 export * from "./clickable-tile.component";
 export * from "./expandable-tile.component";
 export * from "./expandable-tile-above.directive";

src/tiles/tiles.module.ts

@@ -3,6 +3,7 @@ import { CommonModule } from "@angular/common";
 
 import { Tile } from "./tile.component";
 import { ClickableTile } from "./clickable-tile.component";
+import { ClickableTileIconDirective } from "./clickable-tile-icon.directive";
 import { ExpandableTile } from "./expandable-tile.component";
 import { ExpandableTileAboveFoldDirective } from "./expandable-tile-above.directive";
 import { ExpandableTileBelowFoldDirective } from "./expandable-tile-below.directive";
@@ -16,6 +17,7 @@ import { LinkModule } from "carbon-components-angular/link";
 	declarations: [
 		Tile,
 		ClickableTile,
+		ClickableTileIconDirective,
 		ExpandableTileAboveFoldDirective,
 		ExpandableTileBelowFoldDirective,
 		ExpandableTile,
@@ -25,6 +27,7 @@ import { LinkModule } from "carbon-components-angular/link";
 	exports: [
 		Tile,
 		ClickableTile,
+		ClickableTileIconDirective,
 		ExpandableTileAboveFoldDirective,
 		ExpandableTileBelowFoldDirective,
 		ExpandableTile,