From dd2895dc06dd3a86aa75877192cf8e1beea271e8 Mon Sep 17 00:00:00 2001 From: Akshat Patel Date: Sat, 9 Nov 2024 21:06:06 -0500 Subject: [PATCH 1/4] feat: add clickable tile Icon directive Signed-off-by: Akshat Patel --- src/tiles/clickable-tile-icon.directive.ts | 8 ++++++++ src/tiles/clickable-tile.stories.ts | 12 +++++++++++- src/tiles/index.ts | 1 + src/tiles/tiles.module.ts | 3 +++ 4 files changed, 23 insertions(+), 1 deletion(-) create mode 100644 src/tiles/clickable-tile-icon.directive.ts diff --git a/src/tiles/clickable-tile-icon.directive.ts b/src/tiles/clickable-tile-icon.directive.ts new file mode 100644 index 0000000000..976c0abe19 --- /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..466db1768b 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..0d0ce83eaa 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, From d41aada6e4c5b5c5b5bc483fdfc887c49a4dbc1e Mon Sep 17 00:00:00 2001 From: Akshat Patel Date: Sat, 9 Nov 2024 21:07:11 -0500 Subject: [PATCH 2/4] chore: lint fix Signed-off-by: Akshat Patel --- src/tiles/clickable-tile-icon.directive.ts | 4 ++-- src/tiles/clickable-tile.stories.ts | 2 +- src/tiles/index.ts | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/tiles/clickable-tile-icon.directive.ts b/src/tiles/clickable-tile-icon.directive.ts index 976c0abe19..39ba7b414d 100644 --- a/src/tiles/clickable-tile-icon.directive.ts +++ b/src/tiles/clickable-tile-icon.directive.ts @@ -1,7 +1,7 @@ -import { Directive, HostBinding } from '@angular/core'; +import { Directive, HostBinding } from "@angular/core"; @Directive({ - selector: '[cdsClickableTileIcon], [ibmClickableTileIcon]' + 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 466db1768b..230bef5499 100644 --- a/src/tiles/clickable-tile.stories.ts +++ b/src/tiles/clickable-tile.stories.ts @@ -2,7 +2,7 @@ import { moduleMetadata, Meta } from "@storybook/angular"; import { LayerModule } from "../layer"; -import { IconModule } from '../icon'; +import { IconModule } from "../icon"; import { TilesModule, ClickableTile } from "./"; export default { diff --git a/src/tiles/index.ts b/src/tiles/index.ts index 0d0ce83eaa..b9fe9991be 100644 --- a/src/tiles/index.ts +++ b/src/tiles/index.ts @@ -1,4 +1,4 @@ -export * from './clickable-tile-icon.directive'; +export * from "./clickable-tile-icon.directive"; export * from "./clickable-tile.component"; export * from "./expandable-tile.component"; export * from "./expandable-tile-above.directive"; From 82e3628edf3c0f00b295056b8599038b65c4c8b8 Mon Sep 17 00:00:00 2001 From: Akshat Patel Date: Mon, 11 Nov 2024 19:13:14 -0500 Subject: [PATCH 3/4] feat: create link directive to pair icon with link Signed-off-by: Akshat Patel --- src/icon/icon.directive.ts | 3 ++- src/link/link-icon.directive.ts | 8 ++++++++ src/link/link.module.ts | 7 +++++-- src/link/link.stories.ts | 23 ++++++++++++++++++++++- 4 files changed, 37 insertions(+), 4 deletions(-) create mode 100644 src/link/link-icon.directive.ts diff --git a/src/icon/icon.directive.ts b/src/icon/icon.directive.ts index c3a5fea1fd..d912742020 100644 --- a/src/icon/icon.directive.ts +++ b/src/icon/icon.directive.ts @@ -91,7 +91,8 @@ export class IconDirective implements AfterViewInit, OnChanges { "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledBy, "aria-hidden": this.ariaHidden, - focusable: this.isFocusable.toString() + focusable: this.isFocusable.toString(), + fill: icon.attrs.fill }); const attrKeys = Object.keys(attributes); diff --git a/src/link/link-icon.directive.ts b/src/link/link-icon.directive.ts new file mode 100644 index 0000000000..792e79679f --- /dev/null +++ b/src/link/link-icon.directive.ts @@ -0,0 +1,8 @@ +import { Directive, HostBinding } from "@angular/core"; + +@Directive({ + selector: "[ibmLinkIcon], [cdsLinkIcon]" +}) +export class LinkIconDirective { + @HostBinding("class.cds--link__icon") iconClass = true; +} diff --git a/src/link/link.module.ts b/src/link/link.module.ts index 2bba2cd56d..9781fe18af 100644 --- a/src/link/link.module.ts +++ b/src/link/link.module.ts @@ -2,13 +2,16 @@ import { NgModule } from "@angular/core"; import { CommonModule } from "@angular/common"; import { Link } from "./link.directive"; +import { LinkIconDirective } from "./link-icon.directive"; @NgModule({ declarations: [ - Link + Link, + LinkIconDirective ], exports: [ - Link + Link, + LinkIconDirective ], imports: [ CommonModule diff --git a/src/link/link.stories.ts b/src/link/link.stories.ts index 150d40fea5..ae5d09232c 100644 --- a/src/link/link.stories.ts +++ b/src/link/link.stories.ts @@ -3,11 +3,13 @@ import { moduleMetadata, Meta } from "@storybook/angular"; import { LinkModule, Link } from "./"; +import { IconModule } from "../icon"; + export default { title: "Components/Link", decorators: [ moduleMetadata({ - imports: [LinkModule] + imports: [LinkModule, IconModule] }) ], component: Link @@ -24,3 +26,22 @@ Basic.args = { disabled: false, inline: false }; + +const IconTemplate = (args) => ({ + props: args, + template: ` + + Link + + + ` +}); +export const WithIcon = IconTemplate.bind({}); +WithIcon.args = { + disabled: false, + inline: false +}; From 7db29d7c93297f19efaf0cd5d869c35ed8308c2d Mon Sep 17 00:00:00 2001 From: Akshat Patel Date: Mon, 11 Nov 2024 19:28:57 -0500 Subject: [PATCH 4/4] fix: export link icon directive Signed-off-by: Akshat Patel --- src/link/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/link/index.ts b/src/link/index.ts index 480f5396de..e17aac5039 100644 --- a/src/link/index.ts +++ b/src/link/index.ts @@ -1,2 +1,3 @@ export * from "./link.directive"; +export * from "./link-icon.directive"; export * from "./link.module";