add simple confirmation dialog component

skyux-spa-visual-tests/src/app/confirmation-dialog/confirmation-dialog-visual.component.html

@@ -0,0 +1,41 @@
+<div id="screenshot-confirmation-dialog">
+  <div>
+    <button
+      type="button"
+      class="sky-btn sky-btn-primary sky-test-one-confirmation-dialog"
+      (click)="openOneBtnDialog()"
+    >
+    Open one-button dialog
+    </button>
+  </div>
+
+  <div>
+    <button
+      type="button"
+      class="sky-btn sky-btn-primary sky-test-two-confirmation-dialog"
+      (click)="openTwoBtnDialog()"
+    >
+    Open two-button dialog
+    </button>
+  </div>
+
+  <div>
+    <button
+      type="button"
+      class="sky-btn sky-btn-primary sky-test-three-confirmation-dialog"
+      (click)="openThreeBtnDialog()"
+    >
+    Open three-button dialog
+    </button>
+  </div>
+
+  <div>
+    <button
+      type="button"
+      class="sky-btn sky-btn-primary sky-test-long-confirmation-dialog"
+      (click)="openLongDescriptionDialog()"
+    >
+    Open dialog with long description
+    </button>
+  </div>
+</div>

skyux-spa-visual-tests/src/app/confirmation-dialog/confirmation-dialog-visual.component.ts

@@ -0,0 +1,52 @@
+import { Component } from '@angular/core';
+
+import { SkyConfirmationDialogService,
+  SkyConfirmationDialogType } from '@blackbaud/skyux/dist/core';
+
+@Component({
+  selector: 'confirmation-dialog-visual',
+  templateUrl: './confirmation-dialog-visual.component.html'
+})
+export class ConfirmationDialogVisualComponent {
+  constructor(private confirm: SkyConfirmationDialogService) { }
+
+  public openOneBtnDialog() {
+    const config: any = {
+      message: 'Description of text',
+      type: SkyConfirmationDialogType.OKDialog,
+      buttons: [ { text: 'Accept' } ]
+    };
+
+    this.confirm.open(config);
+  }
+
+  public openTwoBtnDialog() {
+    const config: any = {
+      message: 'Description of text',
+      type: SkyConfirmationDialogType.YesCancelDialog,
+      buttons: [ { text: 'Accept' }, { text: 'Cancel' } ]
+    };
+
+    this.confirm.open(config);
+  }
+
+  public openThreeBtnDialog() {
+    const config: any = {
+      message: 'Description of text',
+      type: SkyConfirmationDialogType.YesNoCancelDialog,
+      buttons: [ { text: 'Accept' }, { text: 'Deny' }, { text: 'Cancel' } ]
+    };
+
+    this.confirm.open(config);
+  }
+
+  public openLongDescriptionDialog() {
+    const config: any = {
+      message: 'This is really long text so that it goes to the next line. This is really long '
+       + 'text so that it goes to the next line. This is really long text so that it goes to the '
+       + 'next line.'
+    };
+
+    this.confirm.open(config);
+  }
+}

skyux-spa-visual-tests/src/app/confirmation-dialog/confirmation-dialog.visual-spec.ts

@@ -0,0 +1,66 @@
+import { SkyVisualTest } from '../../../config/utils/visual-test-commands';
+
+import { element, by } from 'protractor';
+
+describe('Confirmation dialog', () => {
+
+  it('should match previous one button confirmation-dialog screenshot', () => {
+    return SkyVisualTest.setupTest('confirmation-dialog')
+    .then(() => {
+      element(by.css('.sky-test-one-confirmation-dialog')).click();
+      SkyVisualTest.moveCursorOffScreen();
+      return SkyVisualTest.compareScreenshot({
+        screenshotName: 'confirmation-dialog-one-button',
+        selector: '.sky-modal',
+        checkAccessibility: true
+      }).then(() => {
+        element(by.css('.sky-confirmation-dialog-buttons .sky-btn-primary')).click();
+      });
+    });
+  });
+
+  it('should match previous two button confirmation dialog screenshot', () => {
+    return SkyVisualTest.setupTest('confirmation-dialog')
+    .then(() => {
+      element(by.css('.sky-test-two-confirmation-dialog')).click();
+      SkyVisualTest.moveCursorOffScreen();
+      return SkyVisualTest.compareScreenshot({
+        screenshotName: 'confirmation-dialog-two-button',
+        selector: '.sky-modal',
+        checkAccessibility: true
+      }).then(() => {
+        element(by.css('.sky-confirmation-dialog-buttons .sky-btn-primary')).click();
+      });
+    });
+  });
+
+  it('should match previous three button confirmation dialog screenshot', () => {
+    return SkyVisualTest.setupTest('confirmation-dialog')
+    .then(() => {
+      element(by.css('.sky-test-three-confirmation-dialog')).click();
+      SkyVisualTest.moveCursorOffScreen();
+      return SkyVisualTest.compareScreenshot({
+        screenshotName: 'confirmation-dialog-three-button',
+        selector: '.sky-modal',
+        checkAccessibility: true
+      }).then(() => {
+        element(by.css('.sky-confirmation-dialog-buttons .sky-btn-primary')).click();
+      });
+    });
+  });
+
+  it('should match previous confirmation dialog with long description screenshot', () => {
+    return SkyVisualTest.setupTest('confirmation-dialog')
+    .then(() => {
+      element(by.css('.sky-test-long-confirmation-dialog')).click();
+      SkyVisualTest.moveCursorOffScreen();
+      return SkyVisualTest.compareScreenshot({
+        screenshotName: 'confirmation-dialog-long-description',
+        selector: '.sky-modal',
+        checkAccessibility: true
+      }).then(() => {
+        element(by.css('.sky-confirmation-dialog-buttons .sky-btn-primary')).click();
+      });
+    });
+  });
+});

skyux-spa-visual-tests/src/app/confirmation-dialog/index.html

@@ -0,0 +1 @@
+<confirmation-dialog-visual></confirmation-dialog-visual>

src/app/components/confirmation-dialog/confirmation-dialog-demo.component.html

@@ -0,0 +1,16 @@
+<button type="button" class="sky-btn sky-btn-primary" (click)="openConfirmationDialog(1)">
+    One-button dialog
+</button>
+<button type="button" class="sky-btn sky-btn-primary" (click)="openConfirmationDialog(2)">
+    Two-button dialog
+</button>
+<button type="button" class="sky-btn sky-btn-primary" (click)="openConfirmationDialog(3)">
+    Three-button dialog
+</button>
+<button type="button" class="sky-btn sky-btn-primary" (click)="openCustomDialog()">
+    Dialog with custom button text
+</button>
+<p>
+  {{action}}
+</p>
+

src/app/components/confirmation-dialog/confirmation-dialog-demo.component.ts

@@ -0,0 +1,37 @@
+import { Component } from '@angular/core';
+
+import { SkyConfirmationDialogService } from
+  '../../../modules/confirmation-dialog/confirmation-dialog.service';
+
+@Component({
+  selector: 'sky-confirmation-dialog-demo',
+  templateUrl: './confirmation-dialog-demo.component.html'
+})
+export class SkyConfirmationDialogDemoComponent {
+  public action: string;
+
+  constructor(private confirmService: SkyConfirmationDialogService) {}
+
+  public openConfirmationDialog(type: number) {
+    const config: any = {
+      message: 'Are you really sure you want to do this?',
+      type: type
+    };
+
+    this.confirmService.open(config).closed.subscribe((result: string) => {
+      this.action = 'You clicked \'' + result + '\'';
+    });
+  }
+
+  public openCustomDialog() {
+    const config: any = {
+      message: 'What option are you going to select?',
+      type: 3,
+      buttons: [ { text: '1' }, { text: '2' }, { text: '3', autofocus: true } ]
+    };
+
+    this.confirmService.open(config).closed.subscribe((result: string) => {
+      this.action = 'You clicked \'' + result + '\'';
+    });
+  }
+}

src/app/components/confirmation-dialog/index.html

@@ -0,0 +1,83 @@
+<sky-demo-page pageTitle="Confirmation Dialog">
+  <sky-demo-page-summary>
+    The confirmation dialog service launches simple confirmation dialogs to allow users to confirm actions. The <stache-code>SkyConfirmationDialogService</stache-code> provider lauches the confirmation dialog. Within the service, you have options to specify a description, type of dialog, and button text.
+  </sky-demo-page-summary>
+
+  <sky-demo-page-properties sectionHeading="Confirmation dialog service methods">
+    <sky-demo-page-property
+        propertyName="open(config)"
+    >
+      Opens a confirmation dialog. The <stache-code>config</stache-code> parameter is an object literal to be passed to the component's constructor. This method returns the confirmation dialog instance. 
+    </sky-demo-page-property>
+  </sky-demo-page-properties>
+
+  <sky-demo-page-properties sectionHeading="Confirmation dialog config properties">
+    <sky-demo-page-property
+        propertyName="message"
+    >
+      A string property of <stache-code>config</stache-code> that displays the message in the dialog.
+    </sky-demo-page-property>
+    <sky-demo-page-property
+        propertyName="type"
+        isOptional="true"
+    >
+      An enum of type <stache-code>SkyConfirmationDialogType</stache-code> that specifies the number of buttons and their default text.
+    </sky-demo-page-property>
+    <sky-demo-page-property
+        propertyName="buttons"
+        isOptional="true"
+    >
+      An optional array of <stache-code>SkyConfirmationDialogButton</stache-code> that overrides the default button config.
+
+    </sky-demo-page-property>
+  </sky-demo-page-properties>
+
+  <sky-demo-page-properties sectionHeading="SkyConfirmationDialogType types">
+      <sky-demo-page-property
+          propertyName="OKDialog"
+      >
+        A one-button dialog with 'OK' as the default button text. The integer value equivalent is 1.
+
+      </sky-demo-page-property>
+      <sky-demo-page-property
+          propertyName="YesCancelDialog"
+      >
+        A two-button dialog with 'Yes' and 'Cancel' as the default button text. The integer value equivalent is 2.
+
+      </sky-demo-page-property>
+      <sky-demo-page-property
+          propertyName="YesNoCancelDialog"
+      >
+        A three-button dialog with 'Yes', 'No', and 'Cancel' as the default button text. The integer value equivalent is 3.
+
+      </sky-demo-page-property>
+    </sky-demo-page-properties>
+
+    <sky-demo-page-properties sectionHeading="SkyConfirmationDialogButton properties">
+        <sky-demo-page-property
+            propertyName="text"
+        >
+          A string property that displays the button text.
+
+        </sky-demo-page-property>
+        <sky-demo-page-property
+            propertyName="autofocus"
+        >
+          A boolean property that specifies whether to autofocus this button.
+
+        </sky-demo-page-property>
+      </sky-demo-page-properties>
+
+  <sky-demo-page-properties sectionHeading="Confirmation dialog events">
+    <sky-demo-page-property
+      propertyName="closed">
+      The event that the confirmation dialog instance emits when the dialog is closed. A string is passed back with the text of the button that the user clicked.
+    </sky-demo-page-property>
+  </sky-demo-page-properties>
+
+  <sky-demo-page-example>
+    <sky-confirmation-dialog-demo></sky-confirmation-dialog-demo>
+    <sky-demo-page-code demoName="Confirmation dialog"></sky-demo-page-code>
+  </sky-demo-page-example>
+
+</sky-demo-page>

src/app/components/demo-components.service.ts

@@ -140,6 +140,29 @@ export class SkyDemoComponentsService {
           ];
         }
       },
+      {
+        name: 'Confirmation dialog',
+        icon: 'list-alt',
+        // tslint:disable-next-line
+        summary: `The confirmation dialog component launches simple confirmation dialogs to allow users to confirm actions.`,
+        url: '/components/confirmation-dialog',
+        getCodeFiles: function () {
+          return [
+            {
+              name: 'confirmation-dialog-demo.component.html',
+              fileContents: require('!!raw-loader!./confirmation-dialog/' +
+                'confirmation-dialog-demo.component.html')
+            },
+            {
+              name: 'confirmation-dialog-demo.component.ts',
+              fileContents: require('!!raw-loader!./confirmation-dialog/' +
+                'confirmation-dialog-demo.component.ts'),
+              componentName: 'SkyConfirmationDialogDemoComponent',
+              bootstrapSelector: 'sky-confirmation-dialog-demo'
+            }
+          ];
+        }
+      },
       {
         name: 'Datepicker',
         icon: 'calendar',

src/core.ts

@@ -20,6 +20,7 @@ import { SkyCheckboxModule } from './modules/checkbox';
 import { SkyChevronModule } from './modules/chevron';
 import { SkyColorpickerModule } from './modules/colorpicker';
 import { SkyColumnSelectorModule } from './modules/column-selector';
+import { SkyConfirmationDialogModule } from './modules/confirmation-dialog';
 import { SkyDatepickerModule } from './modules/datepicker';
 import { SkyDefinitionListModule } from './modules/definition-list';
 import { SkyDropdownModule } from './modules/dropdown';
@@ -73,6 +74,7 @@ import { SkyWaitModule } from './modules/wait';
     SkyChevronModule,
     SkyColorpickerModule,
     SkyColumnSelectorModule,
+    SkyConfirmationDialogModule,
     SkyDefinitionListModule,
     SkyDropdownModule,
     SkyEmailValidationModule,
@@ -174,6 +176,13 @@ export {
   SkyColumnSelectorModel
 } from './modules/column-selector';
 
+export {
+  SkyConfirmationDialogService,
+  SkyConfirmationDialogModule,
+  SkyConfirmationDialogType,
+  SkyConfirmationDialogButton
+} from './modules/confirmation-dialog';
+
 export {
   SkyDateFormatter,
   SkyDatepickerCalendarComponent,

src/locales/resources_en_US.json

@@ -103,6 +103,22 @@
     "_description": "Label for the reset button to change the color back to the initial color",
     "message": "Reset"
   },
+  "confirm_dialog_default_ok_text" : {
+    "_description": "Default text for confirm dialog's OK button",
+    "message": "OK"
+  },
+  "confirm_dialog_default_yes_text" : {
+    "_description": "Default text for confirm dialog's Yes button",
+    "message": "Yes"
+  },
+  "confirm_dialog_default_no_text" : {
+    "_description": "Default text for confirm dialog's No button",
+    "message": "No"
+  },
+  "confirm_dialog_default_cancel_text" : {
+    "_description": "Default text for confirm dialog's Cancel button",
+    "message": "Cancel"
+  },
   "context_menu_default_label": {
     "_description": "The label on the context menu button used for screen readers when the consumer has not specified a label",
     "message": "Context menu"

src/modules/confirmation-dialog/confirmation-dialog-button.ts

@@ -0,0 +1,5 @@
+export class SkyConfirmationDialogButton {
+  public text?: string;
+  public autofocus?: boolean;
+  public buttonType?: string;
+}