For completion steps, prioritize .done CSS class over .current (#223)

* For completion steps, prioritize .done CSS over .current Normal steps are unaffected See #221 (comment) * Another take: apply the 'completed' CSS class to completion steps only
madoar · Aug 11, 2019 · 9ee9681 · 9ee9681
1 parent 4eac379
commit 9ee9681
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 22 deletions.
diff --git a/src/css/wizard-navigation-bar.scss b/src/css/wizard-navigation-bar.scss
@@ -149,8 +149,7 @@ $wz-param-indicator-color: null !global;
       $wz-param-indicator-color: $wz-color-optional !global;
       @content;
     }
-    &.done .step-indicator,
-    &.completed .step-indicator {
+    &.done .step-indicator {
       $wz-param-indicator-state: 'default' !global;
       $wz-param-indicator-color: $wz-color-done !global;
       @content;
@@ -165,6 +164,13 @@ $wz-param-indicator-color: null !global;
       $wz-param-indicator-color: $wz-color-editing !global;
       @content;
     }
+    // 'completed' class takes priority
+    // https://github.com/madoar/angular-archwizard/pull/221
+    &.completed .step-indicator {
+      $wz-param-indicator-state: 'default' !global;
+      $wz-param-indicator-color: $wz-color-done !global;
+      @content;
+    }
 
     &.navigable a:hover .step-indicator {
       $wz-param-indicator-state: 'hover' !global;
@@ -177,24 +183,27 @@ $wz-param-indicator-color: null !global;
       $wz-param-indicator-color: $wz-color-optional !global;
       @content;
     }
-    &.navigable.done, &.navigable.completed {
-      a:hover .step-indicator {
-        $wz-param-indicator-state: 'hover' !global;
-        $wz-param-indicator-color: $wz-color-done !global;
-        @content;
-      }
+    &.navigable.done a:hover .step-indicator {
+      $wz-param-indicator-state: 'hover' !global;
+      $wz-param-indicator-color: $wz-color-done !global;
+      @content;
     }
     &.navigable.current a:hover .step-indicator {
       $wz-param-indicator-state: 'hover' !global;
       $wz-param-indicator-color: $wz-color-current !global;
       @content;
     }
-    &.navigable.editing {
-      a:hover .step-indicator {
-        $wz-param-indicator-state: 'hover' !global;
-        $wz-param-indicator-color: $wz-color-editing !global;
-        @content;
-      }
+    &.navigable.editing a:hover .step-indicator {
+      $wz-param-indicator-state: 'hover' !global;
+      $wz-param-indicator-color: $wz-color-editing !global;
+      @content;
+    }
+    // 'completed' class takes priority
+    // https://github.com/madoar/angular-archwizard/pull/221
+    &.navigable.completed a:hover .step-indicator {
+      $wz-param-indicator-state: 'hover' !global;
+      $wz-param-indicator-color: $wz-color-done !global;
+      @content;
     }
   }
 }

diff --git a/src/lib/components/wizard-navigation-bar.component.spec.ts b/src/lib/components/wizard-navigation-bar.component.spec.ts
@@ -320,7 +320,7 @@ describe('WizardNavigationBarComponent', () => {
     expect(navigableLiEls[0]).toBe(allLiELs[0]);
   }));
 
-  it('should mark all steps completed after visiting the completion step', fakeAsync(() => {
+  it('should mark completion steps completed after visiting the completion step', fakeAsync(() => {
     const navBarEl = wizardTestFixture.debugElement.query(By.css('aw-wizard-navigation-bar'));
 
     // go to third step, by jumping over the optional step
@@ -333,10 +333,11 @@ describe('WizardNavigationBarComponent', () => {
     tick();
     wizardTestFixture.detectChanges();
 
-    const allLiELs = navBarEl.queryAll(By.css('li'));
-    const completedLiEls = navBarEl.queryAll(By.css('li.completed'));
-
-    expect(completedLiEls.length).toBe(allLiELs.length);
+    const allLiEls = navBarEl.queryAll(By.css('li'));
+    expect(allLiEls[0].classes['completed']).toBeFalsy('Only completion step should be marked completed');
+    expect(allLiEls[1].classes['completed']).toBeFalsy('Only completion step should be marked completed');
+    expect(allLiEls[2].classes['completed']).toBeFalsy('Only completion step should be marked completed');
+    expect(allLiEls[3].classes['completed']).toBeTruthy('Completion step should be marked completed');
   }));
 
   it('should disable navigation through the navigation bar correctly', fakeAsync(() => {

diff --git a/src/lib/components/wizard-navigation-bar.component.ts b/src/lib/components/wizard-navigation-bar.component.ts
@@ -1,5 +1,5 @@
 import {Component, Input} from '@angular/core';
-import {NavigationMode} from '../navigation/navigation-mode.interface';
+import {WizardCompletionStep} from '../util/wizard-completion-step.interface';
 import {WizardStep} from '../util/wizard-step.interface';
 import {WizardComponent} from './wizard.component';
 
@@ -101,13 +101,15 @@ export class WizardNavigationBarComponent {
   }
 
   /**
-   * Checks, whether a [[WizardStep]] can be marked as `completed` in the navigation bar
+   * Checks, whether a [[WizardStep]] can be marked as `completed` in the navigation bar.
+   *
+   * The `completed` class is only applied to completion steps.
    *
    * @param wizardStep The wizard step to be checked
    * @returns True if the step can be marked as `completed`
    */
   public isCompleted(wizardStep: WizardStep): boolean {
-    return this.wizard.completed;
+    return wizardStep instanceof WizardCompletionStep && this.wizard.completed;
   }
 
   /**