Renamed component props.

Author: stanislavgeorgiev

src/modal/alert-modal.component.ts

@@ -1,9 +1,7 @@
 import {
 	Component,
 	Injector,
-	OnInit,
-	ElementRef,
-	AfterViewInit
+	ElementRef
 } from "@angular/core";
 import {
 	trigger,
@@ -13,7 +11,6 @@ import {
 	animate
 } from "@angular/animations";
 import Modal from "./modal.decorator";
-import { ModalService } from "./modal.service";
 
 /**
  * Component to create standard modals for presenting content or asking for user's input.
@@ -40,8 +37,8 @@ import { ModalService } from "./modal.service";
  * 	openModal() {
  * 		this.modalService.show({
  *			modalType: "default",
- *			headerLabel: "optional header text",
- *			title: "Modal title",
+ *			modalLabel: "optional header text",
+ *			modalTitle: "Modal modalTitle",
  *			text: "Modal text",
  *			buttons: [{
  *				text: "Button text",
@@ -62,11 +59,11 @@ import { ModalService } from "./modal.service";
 	template: `
 		<ibm-modal [modalType]="modalType">
 			<ibm-modal-header (closeSelect)="closeModal()">
-				<p class="bx--modal-header__label bx--type-delta">{{headerLabel}}</p>
-      			<p class="bx--modal-header__heading bx--type-beta">{{title}}</p>
+				<p class="bx--modal-header__label bx--type-delta">{{modalLabel}}</p>
+      			<p class="bx--modal-header__heading bx--type-beta">{{modalTitle}}</p>
 			</ibm-modal-header>
 			<div class="bx--modal-content">
-				<p>{{text}}</p>
+				<p>{{modalContent}}</p>
 			</div>
 			<ibm-modal-footer *ngIf="buttons.length > 0">
 				<ng-container *ngFor="let button of buttons; let i = index">
@@ -84,9 +81,9 @@ import { ModalService } from "./modal.service";
 })
 export class AlertModalComponent {
 	modalType = "default";
-	headerLabel: string;
-	title: string;
-	text: string;
+	modalLabel: string;
+	modalTitle: string;
+	modalContent: string;
 	buttons = [];
 
 	/**
@@ -99,9 +96,9 @@ export class AlertModalComponent {
 		private elementRef: ElementRef
 	) {
 		this.modalType = this.injector.get("modalType");
-		this.headerLabel = this.injector.get("headerLabel");
-		this.title = this.injector.get("title");
-		this.text = this.injector.get("text");
+		this.modalLabel = this.injector.get("modalLabel");
+		this.modalTitle = this.injector.get("modalTitle");
+		this.modalContent = this.injector.get("modalContent");
 
 		this.buttons = this.injector.get("buttons") || [];
 		for (let i = 0; i < this.buttons.length; i++) {

src/modal/modal.service.ts

@@ -82,14 +82,14 @@ export class ModalService {
 	 * @returns {ComponentRef<any>}
 	 * @memberof ModalService
 	 */
-	show(data: {modalType?: string, headerLabel?: string, title: string, text: string, buttons?: null}) {
+	show(data: {modalType?: string, modalLabel?: string, modalTitle: string, modalContent: string, buttons?: null}) {
 		return this.create({
 			component: AlertModalComponent,
 			inputs: {
 				modalType: data.modalType,
-				headerLabel: data.headerLabel,
-				title: data.title,
-				text: data.text,
+				modalLabel: data.modalLabel,
+				modalTitle: data.modalTitle,
+				modalContent: data.modalContent,
 				buttons: data.buttons || []
 			}
 		});

src/modal/modal.stories.ts

@@ -64,19 +64,19 @@ class ModalStory {
 })
 class AlertModalStory {
 	@Input() modalType: string;
-	@Input() headerLabel: string;
-	@Input() title: string;
-	@Input() text: string;
+	@Input() modalLabel: string;
+	@Input() modalTitle: string;
+	@Input() modalContent: string;
 	@Input() buttons: any;
 
 	constructor(private modalService: ModalService) { }
 
 	openModal() {
 		this.modalService.show({
 			modalType: this.modalType,
-			headerLabel: this.headerLabel,
-			title: this.title,
-			text: this.text,
+			modalLabel: this.modalLabel,
+			modalTitle: this.modalTitle,
+			modalContent: this.modalContent,
 			buttons: this.buttons
 		});
 	}
@@ -129,18 +129,18 @@ storiesOf("Modal", module)
 		template: `
 		<app-alert-modal-story
 			[modalType]="modalType"
-			[headerLabel]="headerLabel"
-			[title]="title"
-			[text]="text"
+			[modalLabel]="modalLabel"
+			[modalTitle]="modalTitle"
+			[modalContent]="modalContent"
 			[buttons]="buttons">
 		</app-alert-modal-story>
 		<ibm-modal-placeholder></ibm-modal-placeholder>
 		`,
 		props: {
 			modalType: select("modalType", ["default", "danger"], "default"),
-			headerLabel: text("headerLabel", "optional header label"),
-			title: text("title", "Delete service from application"),
-			text: text("text", `Are you sure you want to remove the Speech to Text service from the node-test app?`),
+			modalLabel: text("modalLabel", "optional label"),
+			modalTitle: text("modalTitle", "Delete service from application"),
+			modalContent: text("modalContent", `Are you sure you want to remove the Speech to Text service from the node-test app?`),
 			buttons: [{
 				text: "Cancel",
 				type: "secondary"
@@ -171,17 +171,17 @@ storiesOf("Modal", module)
 		template: `
 		<app-alert-modal-story
 			[modalType]="modalType"
-			[headerLabel]="headerLabel"
-			[title]="title"
-			[text]="text">
+			[modalLabel]="modalLabel"
+			[modalTitle]="modalTitle"
+			[modalContent]="modalContent">
 		</app-alert-modal-story>
 		<ibm-modal-placeholder></ibm-modal-placeholder>
 		`,
 		props: {
 			modalType: select("modalType", ["default", "danger"], "default"),
-			headerLabel: text("headerLabel", "optional header label"),
-			title: text("title", "Passive modal title"),
-			text: text("text", "Passive modal notifications should only appear if there is an action " +
+			modalLabel: text("modalLabel", "optional label"),
+			modalTitle: text("modalTitle", "Passive modal title"),
+			modalContent: text("modalContent", "Passive modal notifications should only appear if there is an action " +
 				"the user needs to address immediately. Passive modal notifications are persistent on screen")
 		}
 	}))