Passive progress indicator (#2013)

* initial rework of style for passive mode

* fixed up step sizing

* changed input name for passive mode. Disabled for horizontal

* change passive PI demo to be onHover

* add back in the margin on the check mark

* fixed step color. Removed unecessary !important

* removed excess 5 padding from sky-success

* added unit testing

* updated visual testing to cover passive mode

* added missing id. Reset progress indicator visuals

* added hidden note to demo;moved long template logic to ts file

skyux-spa-visual-tests/src/app/progress-indicator/progress-indicator-visual.component.html

@@ -17,6 +17,36 @@
 
 </sky-progress-indicator>
 
+<button
+  id="btn-passive"
+  class="sky-btn sky-btn-link"
+  skyPopoverPlacement="right"
+  type="button"
+  [skyPopover]="myPopover1"
+>
+  In progress
+</button>
+
+<sky-popover #myPopover1>
+  <sky-progress-indicator
+    [isPassive]="true"
+    [startingIndex]="1"
+  >
+    <sky-progress-indicator-item
+      title="Received (02-19-2003)"
+    >
+    </sky-progress-indicator-item>
+    <sky-progress-indicator-item
+      title="Awaiting approval"
+    >
+    </sky-progress-indicator-item>
+    <sky-progress-indicator-item
+      title=""
+    >
+    </sky-progress-indicator-item>
+  </sky-progress-indicator>
+</sky-popover>
+
 <button
   class="sky-btn sky-btn-primary"
   id="btn-regress"

skyux-spa-visual-tests/src/app/progress-indicator/progress-indicator.visual-spec.ts

@@ -49,6 +49,19 @@ describe('Progress indicator component', () => {
       });
     });
   });
+
+  it('should match passive progress indicator screenshot', () => {
+    return SkyVisualTest.setupTest('progress-indicator')
+    .then(() => {
+      element(by.id(`btn-passive`)).click();
+      SkyVisualTest.moveCursorOffScreen();
+
+      return SkyVisualTest.compareScreenshot({
+        screenshotName: 'progress-indicator-passive',
+        selector: '.sky-popover-container'
+      });
+    });
+  });
 });
 
 describe('Progress indicator component wizard', () => {

src/demos/progress-indicator/progress-indicator-demo.component.html

@@ -1,6 +1,7 @@
 <h2>Progress Indicator</h2>
 
 <sky-progress-indicator
+  id="waterfall-indicator"
   [messageStream]="progressMessageStream"
   [startingIndex]="2"
   (progressChanges)="updateIndex($event)"
@@ -92,3 +93,34 @@ <h2>Progress Indicator</h2>
     Erase all settings
   </sky-progress-indicator-reset-button>
 </sky-progress-indicator>
+<hr>
+<h2>Progress indicator passive</h2>
+<button
+  class="sky-btn sky-btn-link"
+  skyPopoverPlacement="right"
+  skyPopoverTrigger="mouseenter"
+  type="button"
+  [skyPopover]="myPopover1"
+>
+  In progress
+</button>
+
+<sky-popover #myPopover1>
+  <sky-progress-indicator
+    [isPassive]="true"
+    [startingIndex]="1"
+  >
+    <sky-progress-indicator-item
+      title="Received (02-19-2003)"
+    >
+    </sky-progress-indicator-item>
+    <sky-progress-indicator-item
+      title="Awaiting approval"
+    >
+    </sky-progress-indicator-item>
+    <sky-progress-indicator-item
+      title="HIDDEN TITLE"
+    >
+    </sky-progress-indicator-item>
+  </sky-progress-indicator>
+</sky-popover>

src/demos/progress-indicator/progress-indicator-demo.component.scss

@@ -1,4 +1,4 @@
-sky-progress-indicator {
+#waterfall-indicator {
   display: block;
   margin-bottom: 30px;
 }

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

@@ -1,5 +1,6 @@
 <sky-progress-indicator
   [displayMode]="displayMode"
+  [isPassive]="isPassive"
   [startingIndex]="startingIndex"
   (progressChanges)="updateIndex($event)"
   #progressIndicator

src/modules/progress-indicator/fixtures/progress-indicator.component.fixture.ts

@@ -29,6 +29,7 @@ import {
 })
 export class ProgressIndicatorTestComponent {
   public displayMode: SkyProgressIndicatorDisplayMode;
+  public isPassive: boolean;
   public startingIndex: number;
 
   public previousButtonText: string;

src/modules/progress-indicator/progress-indicator-item/progress-indicator-item.component.html

@@ -1,32 +1,20 @@
-<div *ngIf="!isHorizontal && (!isComplete || isActive)"
-  class="sky-progress-indicator-item-step"
-  [ngClass]="{
-    'sky-progress-indicator-item-step-active': isActive
-  }"
->
-</div>
 <div *ngIf="!isHorizontal || isActive"
-  [ngClass]="{
-    'sky-text-success': isComplete && !isActive && !isHorizontal,
-    'sky-progress-indicator-item-step-complete': isComplete && !isActive && !isHorizontal
-  }"
+  class="sky-progress-indicator-item-heading"
+  [ngClass]="headingClassList"
 >
   <div
+    class="sky-progress-indicator-item-title"
     [ngClass]="{
-      'sky-emphasized': isHorizontal
+      'sky-emphasized': isHorizontal,
+      'sky-deemphasized': isPassive && isActive
     }"
   >
-    {{ itemNumber }} - {{ title }}
+    {{ displayTitle }}
   </div>
 </div>
-<div *ngIf="!isHorizontal || isActive"
+<div *ngIf="isLineDisplayed"
   class="sky-progress-indicator-item-line"
-  [ngClass]="{
-    'sky-progress-indicator-item-horizontal': isHorizontal,
-    'sky-progress-indicator-item-last': isLastItem,
-    'sky-progress-indicator-item-line-inactive': !isActive && !isComplete,
-    'sky-progress-indicator-item-line-next-inactive': isNextToInactive
-  }"
+  [ngClass]="lineClassList"
 >
   <div *ngIf="isActive || isComplete"
     class="sky-progress-indicator-item-content"

src/modules/progress-indicator/progress-indicator-item/progress-indicator-item.component.scss

@@ -1,39 +1,65 @@
 @import "~@skyux/theme/scss/mixins";
 @import "~@skyux/theme/scss/_compat/mixins";
 
-.sky-progress-indicator-item-step {
+.sky-progress-indicator-item-heading {
+  display: flex;
+  align-items: center;
+  line-height: 15px;
+}
+
+.sky-progress-indicator-item-step::before {
+  box-sizing: border-box;
+  content: '';
   background-color: white;
-  margin-right: $sky-margin-plus-half;
-  float: left;
-  width: 20px;
-  height: 20px;
+  margin-left: 3px;
+  width: 15px;
+  height: 15px;
   border: $sky-border-color-neutral-medium solid 2px;
-  -moz-border-radius: 20px;
-  -webkit-border-radius: 20px;
-  border-radius: 20px;
+  -moz-border-radius: 15px;
+  -webkit-border-radius: 15px;
+  border-radius: 15px;
 }
 
 .sky-progress-indicator-item-step-active {
-  background-color: $sky-highlight-color-success;
-  border-color: $sky-highlight-color-success !important;
+  &::before {
+    border-color: $sky-highlight-color-success;
+  }
+  &:not(.sky-progress-indicator-item-passive)::before {
+    background-color: $sky-highlight-color-success;
+  }
 }
 
 .sky-progress-indicator-item-step-complete {
-  padding-left: 2px;
-  font-size: 20px;
+  font-size: 15px;
+
+  &::before {
+    margin-left: 3px;
+    margin-right: 0;
+    margin-top: $sky-margin-half;
+    margin-bottom: $sky-margin-half;
+  }
 
   div {
     display: inline;
     font-size: 15px;
   }
 }
 
+.sky-progress-indicator-item-title:not(.sky-emphasized) {
+  margin-left: $sky-margin-plus-half;
+}
+
 .sky-progress-indicator-item-line {
   margin-left: $sky-margin;
   min-height: $sky-margin-double;
   padding-top: $sky-margin;
   padding-bottom: $sky-margin-triple;
 
+  &.sky-progress-indicator-item-passive {
+    padding-top: $sky-margin-plus-half;
+    padding-bottom: $sky-margin-double;
+  }
+
   &.sky-progress-indicator-item-horizontal {
     padding-top: $sky-margin-double;
   }

src/modules/progress-indicator/progress-indicator-item/progress-indicator-item.component.ts

@@ -18,11 +18,45 @@ export class SkyProgressIndicatorItemComponent {
   public isComplete = false;
   public isLastItem = false;
   public displayMode = SkyProgressIndicatorDisplayMode.Vertical;
+  public isPassive = false;
   public isNextToInactive = true;
 
   @Input()
   public title: string;
 
+  public get displayTitle(): string {
+    if (this.isPassive) {
+      return this.isActive || this.isComplete ? this.title : '';
+    } else {
+      return this.itemNumber + ' - ' + this.title;
+    }
+  }
+
+  public get isLineDisplayed(): boolean {
+    return !(this.isHorizontal || this.isPassive) || this.isPassive && !this.isLastItem || this.isActive;
+  }
+
+  public get headingClassList(): {[className: string]: boolean} {
+    return {
+      'sky-text-success': this.isComplete && !this.isActive && !this.isHorizontal,
+      'sky-progress-indicator-item-passive': this.isPassive,
+      'sky-progress-indicator-item-step': !this.isHorizontal && (!this.isComplete || this.isActive),
+      'sky-progress-indicator-item-step-active': this.isActive,
+      'sky-progress-indicator-item-step-complete': this.isComplete && !this.isActive && !this.isHorizontal
+    };
+  }
+
+  public get lineClassList(): {[className: string]: boolean} {
+    return {
+      'sky-deemphasized': this.isPassive,
+      'sky-progress-indicator-item-passive': this.isPassive,
+      'sky-progress-indicator-item-horizontal': this.isHorizontal,
+      'sky-progress-indicator-item-last': this.isLastItem,
+      'sky-progress-indicator-item-line-inactive': !this.isActive && !this.isComplete,
+      'sky-progress-indicator-item-line-next-inactive': this.isNextToInactive
+    };
+  }
+
   public get isHorizontal(): boolean {
     return this.displayMode === SkyProgressIndicatorDisplayMode.Horizontal;
   }

src/modules/progress-indicator/progress-indicator.component.spec.ts

@@ -39,7 +39,7 @@ describe('Progress indicator component', function () {
     fixture = TestBed.createComponent(ProgressIndicatorTestComponent);
   });
 
-  it('should use horizontal mode if set', fakeAsync(() => {
+  it('should use horizontal display if set', fakeAsync(() => {
     fixture.componentInstance.displayMode = SkyProgressIndicatorDisplayMode.Horizontal;
     fixture.detectChanges();
     tick();
@@ -56,6 +56,34 @@ describe('Progress indicator component', function () {
     expect(element.querySelector('.sky-progress-indicator-item-step')).toBeFalsy();
   }));
 
+  it('should use passive mode if set', fakeAsync(() => {
+    fixture.componentInstance.isPassive = true;
+    fixture.detectChanges();
+    tick();
+    fixture.detectChanges();
+    componentInstance = fixture.componentInstance.progressIndicator;
+
+    expect(componentInstance.isPassive).toBeTruthy();
+    for (let item of componentInstance.progressItems.toArray()) {
+      expect(item.isPassive).toBeTruthy();
+    }
+  }));
+
+  // May be removed in the future if support is added
+  it('should not use passive mode if set for horizontal display', fakeAsync(() => {
+    fixture.componentInstance.displayMode = SkyProgressIndicatorDisplayMode.Horizontal;
+    fixture.componentInstance.isPassive = true;
+    fixture.detectChanges();
+    tick();
+    fixture.detectChanges();
+    componentInstance = fixture.componentInstance.progressIndicator;
+
+    expect(componentInstance.isPassive).toBeFalsy();
+    for (let item of componentInstance.progressItems.toArray()) {
+      expect(item.isPassive).toBeFalsy();
+    }
+  }));
+
   it('should use starting index if set', fakeAsync(() => {
     fixture.componentInstance.startingIndex = 2;
     fixture.detectChanges();
@@ -82,7 +110,7 @@ describe('Progress indicator component', function () {
       componentInstance = fixture.componentInstance.progressIndicator;
     }));
 
-    it('should use vertical mode by default', fakeAsync(() => {
+    it('should use vertical display by default', fakeAsync(() => {
       let element = fixture.nativeElement;
 
       expect(componentInstance.isHorizontal).toBeFalsy();
@@ -94,6 +122,13 @@ describe('Progress indicator component', function () {
       expect(element.querySelector('.sky-progress-indicator-item-step')).toBeTruthy();
     }));
 
+    it('should not use passive mode by default', fakeAsync(() => {
+      expect(componentInstance.isPassive).toBeFalsy();
+      for (let item of componentInstance.progressItems.toArray()) {
+        expect(item.isPassive).toBeFalsy();
+      }
+    }));
+
     it('should set item numbers', () => {
       componentInstance.progressItems.forEach((item: any, index: number) => {
         expect(item.itemNumber).toBe(index + 1);

src/modules/progress-indicator/progress-indicator.component.ts

@@ -46,6 +46,15 @@ export class SkyProgressIndicatorComponent implements AfterContentInit, OnDestro
     return this.displayMode === SkyProgressIndicatorDisplayMode.Horizontal;
   }
 
+  @Input()
+  public get isPassive(): boolean {
+    // Passive mode is not supported for horizontal displays at the moment
+    return false || (this._isPassive && !this.isHorizontal);
+  }
+  public set isPassive(value: boolean) {
+    this._isPassive = value;
+  }
+
   @Input()
   public messageStream = new Subject<SkyProgressIndicatorMessageType>();
 
@@ -57,6 +66,7 @@ export class SkyProgressIndicatorComponent implements AfterContentInit, OnDestro
 
   private activeIndex = 0;
   private _displayMode: SkyProgressIndicatorDisplayMode;
+  private _isPassive: boolean;
   private ngUnsubscribe = new Subject();
 
   public ngAfterContentInit(): void {
@@ -118,6 +128,7 @@ export class SkyProgressIndicatorComponent implements AfterContentInit, OnDestro
     this.progressItems.forEach((element, index) => {
       element.displayMode = this.displayMode;
       element.itemNumber = index + 1;
+      element.isPassive = this.isPassive;
     });
   }