Merge pull request #171 from cal-smith/a11y

fix for alert modal not having useful types

Author: zvonimirfras

.storybook/tsconfig.json

@@ -5,7 +5,7 @@
 		"emitDecoratorMetadata": true,
 		"experimentalDecorators": true,
 		"lib": [
-			"es2015",
+			"es2016",
 			"dom"
 		],
 		"sourceMap": true,

src/modal/alert-modal.interface.ts

@@ -1,3 +1,8 @@
+export enum AlertModalType {
+	default = "default",
+	danger = "danger"
+}
+
 export interface AlertModalData {
 	/**
 	 * Use of `modalType` is deprecated, use `type` instead
@@ -6,7 +11,7 @@ export interface AlertModalData {
 	/**
 	 * type of the modal
 	 */
-	type?: "default" | "danger";
+	type?: AlertModalType;
 	/**
 	 * Use of `modalLabel` is deprecated, use `label` instead
 	 */
@@ -37,6 +42,15 @@ export interface AlertModalData {
 	buttons?: Array<ModalButton>;
 }
 
+export enum ModalButtonType {
+	primary = "primary",
+	secondary = "secondary",
+	tertiary = "tertiary",
+	ghost = "ghost",
+	danger = "danger",
+	danger_primary = "danger--primary"
+}
+
 export interface ModalButton {
 	/**
 	 * Display value of the button
@@ -45,7 +59,7 @@ export interface ModalButton {
 	/**
 	 * Button type
 	 */
-	type: "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger--primary";
+	type: ModalButtonType;
 	/**
 	 * Callback for the button `click` event
 	 */

src/modal/modal.module.ts

@@ -1,13 +1,12 @@
 // modules
 import {
 	NgModule,
-	ComponentFactoryResolver,
 	Optional,
 	SkipSelf
 } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { TranslateModule } from "@ngx-translate/core";
-import { StaticIcon, StaticIconModule } from "./../icon/static-icon.module";
+import { StaticIconModule } from "./../icon/static-icon.module";
 
 // imports
 import { ModalPlaceholderComponent } from "./modal-placeholder.component";
@@ -23,6 +22,7 @@ import { ButtonModule } from "../forms/forms.module";
 // exports
 export { default as Modal } from "./modal.decorator";
 export { ModalService } from "./modal.service";
+export * from "./alert-modal.interface";
 
 // either provides a new instance of ModalPlaceholderService, or returns the parent
 export function MODAL_PLACEHOLDER_SERVICE_PROVIDER_FACTORY(parentService: ModalPlaceholderService) {

src/modal/modal.service.ts

@@ -88,6 +88,15 @@ export class ModalService {
 	 * @memberof ModalService
 	 */
 	show(data: AlertModalData) {
+		for (let key of Object.keys(data)) {
+			if (["modalType", "modalLabel", "modalTitle", "modalContent"].includes(key)) {
+				try {
+					throw new Error(`${key} is deprecated, use ${key.replace("modal", "").toLowerCase()} instead`);
+				} catch (error) {
+					console.warn(error);
+				}
+			}
+		}
 		return this.create({
 			component: AlertModalComponent,
 			inputs: {

src/modal/modal.stories.ts

@@ -7,6 +7,7 @@ import { ModalModule } from "../";
 import { Component, Input, Inject } from "@angular/core";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { Modal, ModalService } from "../";
+import { ModalButton, AlertModalType } from "./alert-modal.interface";
 
 @Modal()
 @Component({
@@ -60,20 +61,20 @@ class ModalStory {
 	`
 })
 class AlertModalStory {
-	@Input() modalType: string;
+	@Input() modalType: AlertModalType;
 	@Input() modalLabel: string;
 	@Input() modalTitle: string;
 	@Input() modalContent: string;
-	@Input() buttons: any;
+	@Input() buttons: Array<ModalButton>;
 
 	constructor(private modalService: ModalService) { }
 
 	openModal() {
 		this.modalService.show({
 			modalType: this.modalType,
-			modalLabel: this.modalLabel,
-			modalTitle: this.modalTitle,
-			modalContent: this.modalContent,
+			label: this.modalLabel,
+			title: this.modalTitle,
+			content: this.modalContent,
 			buttons: this.buttons
 		});
 	}

tsconfig-aot.json

@@ -4,7 +4,7 @@
 		"declaration": true,
 		"emitDecoratorMetadata": true,
 		"experimentalDecorators": true,
-		"lib": ["es2015", "dom"],
+		"lib": ["es2016", "dom"],
 		"sourceMap": true,
 		"module": "es2015",
 		"moduleResolution": "node",

tsconfig-demo.json

@@ -4,7 +4,7 @@
 		"declaration": true,
 		"emitDecoratorMetadata": true,
 		"experimentalDecorators": true,
-		"lib": ["es2015", "dom"],
+		"lib": ["es2016", "dom"],
 		"sourceMap": true,
 		"mapRoot": "./",
 		"module": "es2015",

tsconfig.json

@@ -4,7 +4,7 @@
 		"declaration": true,
 		"emitDecoratorMetadata": true,
 		"experimentalDecorators": true,
-		"lib": ["es2015", "dom"],
+		"lib": ["es2016", "dom"],
 		"sourceMap": true,
 		"mapRoot": "./",
 		"module": "es2015",