diff --git a/src/tiles/clickable-tile-icon.directive.ts b/src/tiles/clickable-tile-icon.directive.ts new file mode 100644 index 0000000000..39ba7b414d --- /dev/null +++ b/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; +} diff --git a/src/tiles/clickable-tile.stories.ts b/src/tiles/clickable-tile.stories.ts index 9f92d26b44..230bef5499 100644 --- a/src/tiles/clickable-tile.stories.ts +++ b/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 + + ` }); diff --git a/src/tiles/index.ts b/src/tiles/index.ts index b4f6ea8914..b9fe9991be 100644 --- a/src/tiles/index.ts +++ b/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"; diff --git a/src/tiles/tiles.module.ts b/src/tiles/tiles.module.ts index 96109c8ffd..99ced6e395 100644 --- a/src/tiles/tiles.module.ts +++ b/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,