feat: add icon str ref to contained list item

Signed-off-by: Maicon Godinho <maicongodinho1@gmail.com>

Author: maicongodinho

src/contained-list/contained-list-item.component.ts

@@ -23,7 +23,8 @@ import {
 		<ng-container *ngIf="!clickable">
 			<div class="cds--contained-list-item__content">
 				<div *ngIf="icon" class="cds--contained-list-item__icon">
-					<ng-template [ngTemplateOutlet]="icon"></ng-template>
+					<ng-container *ngIf="!isTemplate(icon)"><svg [ibmIcon]="icon" size="16"></svg></ng-container>
+					<ng-template *ngIf="isTemplate(icon)" [ngTemplateOutlet]="icon"></ng-template>
 				</div>
 				<ng-content></ng-content>
 			</div>
@@ -58,8 +59,12 @@ export class ContainedListItem {
 
 	/**
 	 * Provide an optional icon to render in front of the item's content.
+	 *
+	 * Note that if you intend to use this as a string ref, it's important to remember
+	 * to register the icon that you wish to add. In this case, it's also worth noting
+	 * that only icons with a size of 16 are currently supported.
 	 */
-	@Input() icon: TemplateRef<any>;
+	@Input() icon: TemplateRef<any> | string;
 
 	/**
 	 * Emits click event.
@@ -90,7 +95,11 @@ export class ContainedListItem {
 		return !!this.icon;
 	}
 
-	onClick() {
+	public onClick() {
 		this.click.emit();
 	}
+
+	public isTemplate(value: string | TemplateRef<any>) {
+		return value instanceof TemplateRef;
+	}
 }

src/contained-list/contained-list.component.spec.ts

@@ -2,9 +2,10 @@ import { Component } from "@angular/core";
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { By } from "@angular/platform-browser";
 import { ButtonModule } from "../button";
-import { IconModule } from "../icon";
+import { IconModule, IconService } from "../icon";
 import { ContainedListItem } from "./contained-list-item.component";
-
+import Apple16 from "@carbon/icons/es/apple/16";
+import Fish16 from "@carbon/icons/es/fish/16";
 import { ContainedList } from "./contained-list.component";
 import { ContainedListKind, ContainedListSize } from "./contained-list.enums";
 
@@ -25,20 +26,25 @@ import { ContainedListKind, ContainedListSize } from "./contained-list.enums";
 		</ng-template>
 
 		<ng-template #icon>
-			<svg ibmIcon="add" size="16"></svg>
+			<svg ibmIcon="fish" size="16"></svg>
 		</ng-template>
 
 		<cds-contained-list [label]="label" [action]="action">
 			<cds-contained-list-item>List item</cds-contained-list-item>
 			<cds-contained-list-item [icon]="icon">List item with icon</cds-contained-list-item>
+			<cds-contained-list-item icon="apple">List item with string ref icon</cds-contained-list-item>
 			<cds-contained-list-item [action]="action">List item with action</cds-contained-list-item>
 			<cds-contained-list-item #clickableListItem [clickable]="true">
 				<ng-container ibmContainedListItemButton>Clickable list item</ng-container>
 			</cds-contained-list-item>
 		</cds-contained-list>
 	`
 })
-class WrapperComponent {}
+class WrapperComponent {
+	constructor(private iconService: IconService) {
+		this.iconService.registerAll([Apple16, Fish16]);
+	}
+}
 
 describe("ContainedList", () => {
 	let component: ContainedList;
@@ -127,23 +133,31 @@ describe("ContainedList", () => {
 			const wrapperFixture: ComponentFixture<WrapperComponent> = TestBed.createComponent(WrapperComponent);
 			wrapperFixture.detectChanges();
 
-			const iconElement = wrapperFixture.debugElement.query(By.css(".cds--contained-list-item:nth-child(2) svg"));
+			const iconElement = wrapperFixture.debugElement.query(By.css(".cds--contained-list-item:nth-child(2) svg[ibmIcon='fish']"));
+			expect(iconElement).toBeTruthy();
+		});
+
+		it("should render the icon", () => {
+			const wrapperFixture: ComponentFixture<WrapperComponent> = TestBed.createComponent(WrapperComponent);
+			wrapperFixture.detectChanges();
+
+			const iconElement = wrapperFixture.debugElement.query(By.css(".cds--contained-list-item:nth-child(3) svg[ng-reflect-ibm-icon='apple']"));
 			expect(iconElement).toBeTruthy();
 		});
 
 		it("should render the action", () => {
 			const wrapperFixture: ComponentFixture<WrapperComponent> = TestBed.createComponent(WrapperComponent);
 			wrapperFixture.detectChanges();
 
-			const actionElement = wrapperFixture.debugElement.query(By.css(".cds--contained-list-item:nth-child(3) ibm-icon-button"));
+			const actionElement = wrapperFixture.debugElement.query(By.css(".cds--contained-list-item:nth-child(4) ibm-icon-button"));
 			expect(actionElement).toBeTruthy();
 		});
 
 		it("should render with the clickable state", () => {
 			const wrapperFixture: ComponentFixture<WrapperComponent> = TestBed.createComponent(WrapperComponent);
 			wrapperFixture.detectChanges();
 
-			const clickableListItemElement = wrapperFixture.debugElement.query(By.css(".cds--contained-list-item:nth-child(4)"));
+			const clickableListItemElement = wrapperFixture.debugElement.query(By.css(".cds--contained-list-item:nth-child(5)"));
 			expect(clickableListItemElement.nativeElement).toHaveClass("cds--contained-list-item--clickable");
 
 			const buttonElement = clickableListItemElement.nativeElement.querySelector("button");

src/contained-list/contained-list.stories.ts

@@ -202,19 +202,11 @@ const withIconsTemplate: Story<ContainedList> = () => ({
 			<svg ibmIcon="wheat" size="16"></svg>
 		</ng-template>
 
-		<ng-template #strawberry let-icon>
-			<svg ibmIcon="strawberry" size="16"></svg>
-		</ng-template>
-
-		<ng-template #fish let-icon>
-			<svg ibmIcon="fish" size="16"></svg>
-		</ng-template>
-
 		<cds-contained-list label="List title">
 			<cds-contained-list-item [icon]="apple">List item</cds-contained-list-item>
 			<cds-contained-list-item [icon]="wheat">List item</cds-contained-list-item>
-			<cds-contained-list-item [icon]="strawberry">List item</cds-contained-list-item>
-			<cds-contained-list-item [icon]="fish">List item</cds-contained-list-item>
+			<cds-contained-list-item icon="strawberry">List item</cds-contained-list-item>
+			<cds-contained-list-item icon="fish">List item</cds-contained-list-item>
 		</cds-contained-list>
 	`
 });