Merge pull request #3056 from Akshat55/link-icon

feat: create link directive to pair icon with link

Author: zvonimirfras

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);

src/link/index.ts

@@ -1,2 +1,3 @@
 export * from "./link.directive";
+export * from "./link-icon.directive";
 export * from "./link.module";

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;
+}

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

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: `
+		<a
+			href="#"
+			cdsLink
+			[disabled]="disabled"
+			[inline]="inline">
+			Link
+			<svg cdsLinkIcon cdsIcon="close" size="16"></svg>
+		</a>
+	`
+});
+export const WithIcon = IconTemplate.bind({});
+WithIcon.args = {
+	disabled: false,
+	inline: false
+};