Add finish button; goto specific step; various bug fixes

e2e/progress-indicator.e2e-spec.ts

@@ -1,99 +1,147 @@
-import {
-  element,
-  by
-} from 'protractor';
-
 import {
   expect,
   SkyHostBrowser
 } from '@skyux-sdk/e2e';
 
-describe('Progress indicator component (lg)', () => {
-  beforeEach(() => {
+import {
+  by,
+  element
+} from 'protractor';
+
+function performClick(query: string): void {
+  const elem = element(by.css(query));
+  elem.click();
+}
+
+describe('Progress indicator', function () {
+  beforeEach(function () {
     SkyHostBrowser.get('visual/progress-indicator');
     SkyHostBrowser.setWindowBreakpoint('lg');
   });
 
-  it('should show 1st step active and rest incomplete', (done) => {
-    expect('body').toMatchBaselineScreenshot(done, {
-      screenshotName: 'progress-indicator-lg-1'
+  describe('Vertical display', function () {
+    const screenshotElementId = 'app-screenshot-display-mode-vertical';
+
+    beforeEach(function () {
+      performClick(`#${screenshotElementId}-next-button`);
+
+      SkyHostBrowser.moveCursorOffScreen();
+      SkyHostBrowser.scrollTo(`#${screenshotElementId}`);
     });
-  });
 
-  it('should show 1st and 2nd steps complete and the 3rd as active', (done) => {
-    element(by.id(`btn-progress`)).click();
-    element(by.id(`btn-progress`)).click();
-    expect('body').toMatchBaselineScreenshot(done, {
-      screenshotName: 'progress-indicator-lg-2'
+    it('should match previous screenshot', function (done) {
+      expect(`#${screenshotElementId}`).toMatchBaselineScreenshot(done, {
+        screenshotName: 'progress-indicator-vertical'
+      });
     });
-  });
 
-  it('should show 1st active, 2nd complete, and 3rd incomplete', (done) => {
-    element(by.id(`btn-progress`)).click();
-    element(by.id(`btn-progress`)).click();
+    it('should match previous screenshot (xs)', function (done) {
+      SkyHostBrowser.setWindowBreakpoint('xs');
 
-    element(by.id(`btn-regress`)).click();
-    element(by.id(`btn-regress`)).click();
-    expect('body').toMatchBaselineScreenshot(done, {
-      screenshotName: 'progress-indicator-lg-3'
+      expect(`#${screenshotElementId}`).toMatchBaselineScreenshot(done, {
+        screenshotName: 'progress-indicator-vertical-xs'
+      });
     });
   });
 
-  it('should match passive progress indicator screenshot', (done) => {
-    element(by.id(`btn-passive`)).click();
-    expect('.sky-popover-container').toMatchBaselineScreenshot(done, {
-      screenshotName: 'progress-indicator-lg-passive'
-    });
-  });
+  describe('Horizontal display', function () {
+    const screenshotElementId = 'app-screenshot-display-mode-horizontal';
+
+    beforeEach(function () {
+      performClick(`#${screenshotElementId}-next-button button`);
 
-  describe('wizard', () => {
-    beforeEach(() => {
-      element(by.id(`btn-wizard`)).click();
+      SkyHostBrowser.moveCursorOffScreen();
+      SkyHostBrowser.scrollTo(`#${screenshotElementId}`);
     });
 
-    it('should show 1st step active and rest incomplete', (done) => {
-      expect('.sky-modal').toMatchBaselineScreenshot(done, {
-        screenshotName: 'progress-indicator-lg-wizard-1'
+    it('should match previous screenshot', function (done) {
+      expect(`#${screenshotElementId}`).toMatchBaselineScreenshot(done, {
+        screenshotName: 'progress-indicator-horizontal'
       });
     });
 
-    it('should show 1st and 2nd steps complete and the 3rd as active', (done) => {
-      element(by.id(`btn-wizard-next`)).click();
-      element(by.id(`btn-wizard-next`)).click();
-      expect('.sky-modal').toMatchBaselineScreenshot(done, {
-        screenshotName: 'progress-indicator-lg-wizard-2'
+    it('should match disabled buttons previous screenshot', function (done) {
+      const buttonElement = element(by.id(`${screenshotElementId}-disable-buttons-button`));
+      buttonElement.click();
+
+      expect(`#${screenshotElementId}`).toMatchBaselineScreenshot(done, {
+        screenshotName: 'progress-indicator-horizontal-disabled'
       });
     });
 
-    it('should show 1st active, 2nd complete, and 3rd incomplete', (done) => {
-      element(by.id(`btn-wizard-next`)).click();
-      element(by.id(`btn-wizard-next`)).click();
+    it('should match previous screenshot (xs)', function (done) {
+      SkyHostBrowser.setWindowBreakpoint('xs');
 
-      element(by.id(`btn-wizard-previous`)).click();
-      element(by.id(`btn-wizard-previous`)).click();
-      expect('.sky-modal').toMatchBaselineScreenshot(done, {
-        screenshotName: 'progress-indicator-lg-wizard-3'
+      expect(`#${screenshotElementId}`).toMatchBaselineScreenshot(done, {
+        screenshotName: 'progress-indicator-horizontal-xs'
       });
     });
   });
-});
 
-describe('Progress indicator component (xs)', () => {
-  beforeEach(() => {
-    SkyHostBrowser.get('visual/progress-indicator');
-    SkyHostBrowser.setWindowBreakpoint('xs');
+  describe('Passive mode', function () {
+    const screenshotElementId = 'app-screenshot-passive-mode';
+
+    beforeEach(function () {
+      SkyHostBrowser.moveCursorOffScreen();
+      SkyHostBrowser.scrollTo(`#${screenshotElementId}`);
+    });
+
+    it('should match previous screenshot', function (done) {
+      expect(`#${screenshotElementId}`).toMatchBaselineScreenshot(done, {
+        screenshotName: 'progress-indicator-passive'
+      });
+    });
+
+    it('should match previous screenshot (xs)', function (done) {
+      SkyHostBrowser.setWindowBreakpoint('xs');
+
+      expect(`#${screenshotElementId}`).toMatchBaselineScreenshot(done, {
+        screenshotName: 'progress-indicator-passive-xs'
+      });
+    });
+
+    it('should match previous popover screenshot', function (done) {
+      expect(`#${screenshotElementId}`).toMatchBaselineScreenshot(done, {
+        screenshotName: 'progress-indicator-passive'
+      });
+    });
   });
 
-  it('should show 1st step active and rest incomplete', (done) => {
-    expect('body').toMatchBaselineScreenshot(done, {
-      screenshotName: 'progress-indicator-xs-1'
+  describe('Passive mode (popover)', function () {
+    const screenshotElementId = 'app-screenshot-passive-mode-popover';
+
+    beforeEach(function () {
+      SkyHostBrowser.moveCursorOffScreen();
+      SkyHostBrowser.scrollTo(`#${screenshotElementId}`);
+
+      performClick(`#${screenshotElementId}-button`);
+    });
+
+    it('should match previous screenshot', function (done) {
+      expect(`#${screenshotElementId}-target .sky-popover`).toMatchBaselineScreenshot(done, {
+        screenshotName: 'progress-indicator-passive-popover'
+      });
     });
   });
 
-  it('should show 1st step active and rest incomplete', (done) => {
-    element(by.id(`btn-wizard`)).click();
-    expect('.sky-modal').toMatchBaselineScreenshot(done, {
-      screenshotName: 'progress-indicator-xs-wizard-1'
+  describe('Horizontal mode (modal)', function () {
+    beforeEach(function () {
+      performClick('#app-screenshot-open-modal-button');
+      performClick('#app-screenshot-modal-next-button');
+    });
+
+    it('should match previous screenshot', function (done) {
+      expect(`.sky-modal`).toMatchBaselineScreenshot(done, {
+        screenshotName: 'progress-indicator-modal'
+      });
+    });
+
+    it('should match previous screenshot (xs)', function (done) {
+      SkyHostBrowser.setWindowBreakpoint('xs');
+
+      expect(`.sky-modal`).toMatchBaselineScreenshot(done, {
+        screenshotName: 'progress-indicator-modal-xs'
+      });
     });
   });
 });

package.json

@@ -29,7 +29,7 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@blackbaud/skyux": "2.48.3",
+    "@blackbaud/skyux": "2.49.0",
     "@blackbaud/skyux-builder": "1.34.1",
     "@skyux-sdk/builder-plugin-skyux": "1.0.0"
   }

src/app/app-extras.module.ts

@@ -2,10 +2,6 @@ import {
   NgModule
 } from '@angular/core';
 
-import {
-  SkyCheckboxModule
-} from '@skyux/forms';
-
 import {
   SkyModalModule
 } from '@skyux/modals';
@@ -14,10 +10,6 @@ import {
   SkyPopoverModule
 } from '@skyux/popovers';
 
-import {
-  SkyAppLinkModule
-} from '@skyux/router';
-
 import {
   SkyProgressIndicatorModule
 } from './public';
@@ -28,8 +20,6 @@ import {
 
 @NgModule({
   exports: [
-    SkyAppLinkModule,
-    SkyCheckboxModule,
     SkyModalModule,
     SkyPopoverModule,
     SkyProgressIndicatorModule

src/app/public/modules/progress-indicator/fixtures/progress-indicator.component.fixture.html

@@ -3,100 +3,80 @@
   [isPassive]="isPassive"
   [messageStream]="messageStream"
   [startingIndex]="startingIndex"
-  (progressChanges)="updateIndex($event)"
+  (progressChanges)="onProgressChanges($event)"
   #progressIndicator
 >
-
-  <sky-progress-indicator-title *ngIf="!isHorizontal">
-    Do all the things
+  <sky-progress-indicator-title>
+    Waterfall
   </sky-progress-indicator-title>
 
   <sky-progress-indicator-item
     title="Do the first thing"
   >
-    <div>
-      <button *ngIf="activeIndex === 0"
-        class="sky-btn sky-btn-primary"
-        type="button"
-        (click)="progress()"
-      >
-        Do
-      </button>
-      <button *ngIf="activeIndex === 1"
-        class="sky-btn sky-btn-default"
-        type="button"
-        (click)="regress()"
-      >
-        Undo
-      </button>
-    </div>
+    Waterfall content 1
   </sky-progress-indicator-item>
 
   <sky-progress-indicator-item
     title="Do the second thing"
   >
-    <div *ngIf="activeIndex >= 1">
-        <button *ngIf="activeIndex === 1"
-          class="sky-btn sky-btn-primary"
-          type="button"
-          (click)="progress()"
-        >
-          Do
-        </button>
-        <button *ngIf="activeIndex === 2"
-          class="sky-btn sky-btn-default"
-          type="button"
-          (click)="regress()"
-        >
-          Undo
-        </button>
-    </div>
+    Waterfall content 2
   </sky-progress-indicator-item>
 
   <sky-progress-indicator-item
     title="Do the third thing"
   >
-    <div *ngIf="activeIndex >= 2">
-        <button *ngIf="activeIndex === 2"
-          class="sky-btn sky-btn-primary"
-          type="button"
-          (click)="progress()"
-        >
-          Do
-        </button>
-        <button *ngIf="activeIndex === 3"
-          class="sky-btn sky-btn-default"
-          type="button"
-          (click)="regress()"
-        >
-          Undo
-        </button>
-    </div>
+    Waterfall content 3
   </sky-progress-indicator-item>
 
-  <sky-progress-indicator-reset-button *ngIf="!isHorizontal"
-    id="reset-btn"
-    [disabled]="resetButtonDisabled"
+  <!-- Legacy reset button within a progress indicator -->
+  <sky-progress-indicator-reset-button *ngIf="!showIsolatedLegacyResetButton"
+    [disabled]="disabled"
     [progressIndicator]="progressIndicator"
-    (resetClick)="resetClicked()"
+    (resetClick)="onResetClick()"
+    #legacyResetButton
   >
-    Reset all the things
+    Reset (legacy)
   </sky-progress-indicator-reset-button>
+
+  <!-- Nav button within a progress indicator -->
+  <sky-progress-indicator-nav-button
+    buttonText="Reset"
+    buttonType="reset"
+    class="progress-indicator-fixture-internal-nav-button"
+  >
+  </sky-progress-indicator-nav-button>
 </sky-progress-indicator>
 
-<sky-progress-indicator-nav-button
-  id="previous-btn"
-  [buttonText]="previousButtonText"
-  [buttonType]="previousButtonType"
-  [disabled]="previousButtonDisabled"
+<!-- Legacy reset button outside a progress indicator -->
+<sky-progress-indicator-reset-button *ngIf="showIsolatedLegacyResetButton"
   [progressIndicator]="progressIndicator"
+  (resetClick)="onResetClick()"
+  #legacyIsolatedResetButton
 >
-</sky-progress-indicator-nav-button>
-<sky-progress-indicator-nav-button
-  id="next-btn"
-  [buttonText]="nextButtonText"
-  [buttonType]="nextButtonType"
-  [disabled]="nextButtonDisabled"
-  [progressIndicator]="progressIndicator"
+  Reset (legacy)
+</sky-progress-indicator-reset-button>
+
+<!-- Nav buttons outside a progress indicator -->
+<div *ngIf="showNavButtons"
+  class="progress-indicator-fixture-external-nav-buttons"
 >
-</sky-progress-indicator-nav-button>
+  <sky-progress-indicator-nav-button
+    [progressIndicator]="defaultNavButtonProgressIndicatorRef"
+    #defaultNavButton
+  >
+  </sky-progress-indicator-nav-button>
+
+  <sky-progress-indicator-nav-button *ngFor="let buttonConfig of buttonConfigs"
+    [buttonText]="buttonConfig.text"
+    [buttonType]="buttonConfig.type"
+    [disabled]="disabled"
+    [progressIndicator]="progressIndicator"
+  >
+  </sky-progress-indicator-nav-button>
+</div>
+
+<!-- Empty progress indicator container -->
+<sky-progress-indicator
+  #emptyProgressIndicator
+>
+</sky-progress-indicator>