- fixing used codestyle

madoar · madoar · commit 9dd125b877a5 · 2017-02-07T15:26:25.000+01:00
- improving css in the wizard component and the wizard-step component
- adding travis badge to README
diff --git a/README.md b/README.md
@@ -1,5 +1,7 @@
 # Ng2Wizard
 
+[![Build Status](https://travis-ci.org/madoar/ng2-wizard.png)](https://travis-ci.org/madoar/ng2-wizard)
+
 This project contains a functional wizard component for [Angular 2](https://angular.io/).
 
 ## Build
diff --git a/src/components/components/wizard-navigation-bar.component.less b/src/components/components/wizard-navigation-bar.component.less
@@ -5,15 +5,6 @@
 @wz-color-editing:  #FF0000;
 
 .steps-indicator {
-  /* ---- steps quantity ---- */
-  right: 0;
-  bottom: 0;
-  left: 0;
-  margin: 0;
-  padding: 20px 0 0 0;
-  height: auto;
-  padding-bottom: 10px;
-  overflow: hidden;
   list-style: none;
 
   &:before {
diff --git a/src/components/components/wizard-navigation-bar.component.spec.ts b/src/components/components/wizard-navigation-bar.component.spec.ts
@@ -1,12 +1,11 @@
 /* tslint:disable:no-unused-variable */
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-import {By} from '@angular/platform-browser';
 import {DebugElement, QueryList} from '@angular/core';
 
 import {WizardNavigationBarComponent} from './wizard-navigation-bar.component';
-import {WizardComponent} from "./wizard.component";
-import {WizardStepComponent} from "./wizard-step.component";
-import {GoToStepDirective} from "../directives/go-to-step.directive";
+import {WizardComponent} from './wizard.component';
+import {WizardStepComponent} from './wizard-step.component';
+import {GoToStepDirective} from '../directives/go-to-step.directive';
 
 describe('WizardNavigationBarComponent', () => {
   let component: WizardNavigationBarComponent;
diff --git a/src/components/components/wizard-navigation-bar.component.ts b/src/components/components/wizard-navigation-bar.component.ts
@@ -1,6 +1,6 @@
-import {Component, QueryList} from "@angular/core";
-import {WizardComponent} from "./wizard.component";
-import {WizardStepComponent} from "./wizard-step.component";
+import {Component, QueryList} from '@angular/core';
+import {WizardComponent} from './wizard.component';
+import {WizardStepComponent} from './wizard-step.component';
 
 @Component({
   selector: 'wizard-navigation-bar',
diff --git a/src/components/components/wizard-step.component.spec.ts b/src/components/components/wizard-step.component.spec.ts
@@ -1,7 +1,5 @@
 /* tslint:disable:no-unused-variable */
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
 
 import { WizardStepComponent } from './wizard-step.component';
 
diff --git a/src/components/components/wizard-step.component.ts b/src/components/components/wizard-step.component.ts
@@ -1,5 +1,5 @@
-import {Component, Input, Output, EventEmitter} from "@angular/core";
-import {MovingDirection} from "../util/MovingDirection";
+import {Component, Input, Output, EventEmitter} from '@angular/core';
+import {MovingDirection} from '../util/MovingDirection';
 
 @Component({
   selector: 'wizard-step',
diff --git a/src/components/components/wizard.component.css b/src/components/components/wizard.component.css
diff --git a/src/components/components/wizard.component.html b/src/components/components/wizard.component.html
@@ -1,9 +1,9 @@
 <div class="wizard-centered">
-  <wizard-navigation-bar *ngIf="navBarLocation == 'top'"></wizard-navigation-bar>
+  <wizard-navigation-bar *ngIf="navBarLocation == 'top'" [ngClass]="['nav-bar', 'top']"></wizard-navigation-bar>
 
   <div class="steps">
     <ng-content></ng-content>
   </div>
 
-  <wizard-navigation-bar *ngIf="navBarLocation == 'bottom'"></wizard-navigation-bar>
+  <wizard-navigation-bar *ngIf="navBarLocation == 'bottom'" [ngClass]="['nav-bar', 'bottom']"></wizard-navigation-bar>
 </div>
diff --git a/src/components/components/wizard.component.less b/src/components/components/wizard.component.less
@@ -0,0 +1,22 @@
+.wizard-centered {
+  text-align: center;
+  margin: 0 auto;
+
+  .nav-bar {
+    right: 0;
+    bottom: 0;
+    left: 0;
+    margin: 0;
+    width: 100%;
+    height: auto;
+    overflow: hidden;
+
+    &.top {
+      padding-bottom: 10px;
+    }
+
+    &.bottom {
+      padding-top: 10px;
+    }
+  }
+}
diff --git a/src/components/components/wizard.component.spec.ts b/src/components/components/wizard.component.spec.ts
@@ -1,18 +1,18 @@
 /* tslint:disable:no-unused-variable */
-import {async, ComponentFixture, TestBed} from "@angular/core/testing";
-import {QueryList, Component, ViewChild} from "@angular/core";
-import {WizardComponent} from "./wizard.component";
-import {WizardStepComponent} from "./wizard-step.component";
-import {WizardNavigationBarComponent} from "./wizard-navigation-bar.component";
-import {GoToStepDirective} from "../directives/go-to-step.directive";
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {QueryList, Component, ViewChild} from '@angular/core';
+import {WizardComponent} from './wizard.component';
+import {WizardStepComponent} from './wizard-step.component';
+import {WizardNavigationBarComponent} from './wizard-navigation-bar.component';
+import {GoToStepDirective} from '../directives/go-to-step.directive';
 
 @Component({
-  selector: "test-wizard",
+  selector: 'test-wizard',
   template: `
     <wizard>
-      <wizard-step title="Steptitle 1">Step 1</wizard-step>
-      <wizard-step title="Steptitle 2">Step 2</wizard-step>
-      <wizard-step title="Steptitle 3">Step 3</wizard-step>
+      <wizard-step title='Steptitle 1'>Step 1</wizard-step>
+      <wizard-step title='Steptitle 2'>Step 2</wizard-step>
+      <wizard-step title='Steptitle 3'>Step 3</wizard-step>
     </wizard>
   `
 })
@@ -24,7 +24,7 @@ class WizardTestComponent {
 function checkWizardSteps(steps: QueryList<WizardStepComponent>, selectedStepIndex: number) {
   steps.forEach((step, index, array) => {
     // Only the selected step should be selected
-    if (index == selectedStepIndex) {
+    if (index === selectedStepIndex) {
       expect(step.selected).toBe(true, `the selected wizard step index ${index} is not selected`);
     } else {
       expect(step.selected).toBe(false, `the not selected wizard step index ${index} is selected`);
@@ -66,17 +66,17 @@ describe('WizardComponent', () => {
 
   it('should start at first step', () => {
     expect(wizardTest.wizard.currentStepIndex).toBe(0);
-    expect(wizardTest.wizard.currentStep.title).toBe("Steptitle 1");
+    expect(wizardTest.wizard.currentStep.title).toBe('Steptitle 1');
 
     checkWizardSteps(wizardTest.wizard.wizardSteps, 0);
   });
 
   it('should return correct step at index', () => {
     expect(() => wizardTest.wizard.getStepAtIndex(-1)).toThrow(new Error(`Expected a known step, but got stepIndex: -1.`));
 
-    expect(wizardTest.wizard.getStepAtIndex(0).title).toBe("Steptitle 1");
-    expect(wizardTest.wizard.getStepAtIndex(1).title).toBe("Steptitle 2");
-    expect(wizardTest.wizard.getStepAtIndex(2).title).toBe("Steptitle 3");
+    expect(wizardTest.wizard.getStepAtIndex(0).title).toBe('Steptitle 1');
+    expect(wizardTest.wizard.getStepAtIndex(1).title).toBe('Steptitle 2');
+    expect(wizardTest.wizard.getStepAtIndex(2).title).toBe('Steptitle 3');
 
     // Check that the first wizard step is the only selected one
     checkWizardSteps(wizardTest.wizard.wizardSteps, 0);
@@ -179,7 +179,7 @@ describe('WizardComponent', () => {
     wizardTestFixture.detectChanges();
 
     expect(wizardTest.wizard.currentStepIndex).toBe(1);
-    expect(wizardTest.wizard.currentStep.title).toBe("Steptitle 2");
+    expect(wizardTest.wizard.currentStep.title).toBe('Steptitle 2');
     expect(wizardTest.wizard.currentStep.completed).toBe(false);
 
     checkWizardSteps(wizardTest.wizard.wizardSteps, 1);
diff --git a/src/components/components/wizard.component.ts b/src/components/components/wizard.component.ts
@@ -1,12 +1,12 @@
-import {Component, ContentChildren, QueryList, AfterContentInit, Input} from "@angular/core";
-import {WizardStepComponent} from "./wizard-step.component";
-import {isNumber} from "util";
-import {MovingDirection} from "../util/MovingDirection";
+import {Component, ContentChildren, QueryList, AfterContentInit, Input} from '@angular/core';
+import {WizardStepComponent} from './wizard-step.component';
+import {isNumber} from 'util';
+import {MovingDirection} from '../util/MovingDirection';
 
 @Component({
   selector: 'wizard',
   templateUrl: 'wizard.component.html',
-  styleUrls: ['wizard.component.css']
+  styleUrls: ['wizard.component.less']
 })
 export class WizardComponent implements AfterContentInit {
   /**
@@ -16,7 +16,7 @@ export class WizardComponent implements AfterContentInit {
   public wizardSteps: QueryList<WizardStepComponent>;
 
   @Input()
-  public navBarLocation = "top";
+  public navBarLocation = 'top';
 
   /**
    * The index of the currently visible and selected step inside the wizardSteps QueryList.
diff --git a/src/components/directives/go-to-step.directive.spec.ts b/src/components/directives/go-to-step.directive.spec.ts
@@ -1,7 +1,7 @@
 /**
  * Created by marc on 09.01.17.
  */
-import {GoToStepDirective} from "./go-to-step.directive";
+import {GoToStepDirective} from './go-to-step.directive';
 
 describe('GoToStepDirective', () => {
   it('should create an instance', () => {
diff --git a/src/components/directives/go-to-step.directive.ts b/src/components/directives/go-to-step.directive.ts
@@ -3,8 +3,8 @@
  */
 
 import {Directive, Output, HostListener, EventEmitter, Input} from '@angular/core';
-import {WizardComponent} from "../components/wizard.component";
-import {WizardStepComponent} from "../components/wizard-step.component";
+import {WizardComponent} from '../components/wizard.component';
+import {WizardStepComponent} from '../components/wizard-step.component';
 
 @Directive({
   selector: '[goToStep]'
diff --git a/src/components/directives/index.ts b/src/components/directives/index.ts
@@ -2,7 +2,7 @@
  * Created by marc on 29.12.16.
  */
 
-export {GoToStepDirective} from "./go-to-step.directive";
+export {GoToStepDirective} from './go-to-step.directive';
 export {NextStepDirective} from './next-step.directive';
 export {PreviousStepDirective} from './previous-step.directive';
 export {OptionalStepDirective} from './optional-step.directive';
diff --git a/src/components/directives/next-step.directive.spec.ts b/src/components/directives/next-step.directive.spec.ts
@@ -1,6 +1,5 @@
 /* tslint:disable:no-unused-variable */
 
-import { TestBed, async } from '@angular/core/testing';
 import { NextStepDirective } from './next-step.directive';
 
 describe('NextStepDirective', () => {
diff --git a/src/components/directives/next-step.directive.ts b/src/components/directives/next-step.directive.ts
@@ -1,5 +1,5 @@
 import {Directive, Output, HostListener, EventEmitter} from '@angular/core';
-import {WizardComponent} from "../components/wizard.component";
+import {WizardComponent} from '../components/wizard.component';
 
 @Directive({
   selector: '[nextStep]'
diff --git a/src/components/directives/optional-step.directive.spec.ts b/src/components/directives/optional-step.directive.spec.ts
@@ -1,6 +1,5 @@
 /* tslint:disable:no-unused-variable */
 
-import { TestBed, async } from '@angular/core/testing';
 import { OptionalStepDirective } from './optional-step.directive';
 
 describe('OptionalStepDirective', () => {
diff --git a/src/components/directives/optional-step.directive.ts b/src/components/directives/optional-step.directive.ts
@@ -1,5 +1,5 @@
 import {Directive, OnInit} from '@angular/core';
-import {WizardStepComponent} from "../components/wizard-step.component";
+import {WizardStepComponent} from '../components/wizard-step.component';
 
 @Directive({
   selector: 'wizard-step[optionalStep]'
diff --git a/src/components/directives/previous-step.directive.spec.ts b/src/components/directives/previous-step.directive.spec.ts
@@ -1,6 +1,5 @@
 /* tslint:disable:no-unused-variable */
 
-import { TestBed, async } from '@angular/core/testing';
 import { PreviousStepDirective } from './previous-step.directive';
 
 describe('PreviousStepDirective', () => {
diff --git a/src/components/directives/previous-step.directive.ts b/src/components/directives/previous-step.directive.ts
@@ -1,5 +1,5 @@
 import {Directive, HostListener} from '@angular/core';
-import {WizardComponent} from "../components/wizard.component";
+import {WizardComponent} from '../components/wizard.component';
 
 @Directive({
   selector: '[previousStep]'
diff --git a/src/components/util/index.ts b/src/components/util/index.ts
@@ -2,4 +2,4 @@
  * Created by marc on 04.01.17.
  */
 
-export {MovingDirection} from "./MovingDirection";
+export {MovingDirection} from './MovingDirection';
diff --git a/src/components/wizard.module.ts b/src/components/wizard.module.ts
@@ -1,4 +1,4 @@
-import {CommonModule} from "@angular/common";
+import {CommonModule} from '@angular/common';
 import {NgModule, ModuleWithProviders} from '@angular/core';
 
 import {WizardComponent} from './components/wizard.component';
@@ -7,7 +7,7 @@ import {NextStepDirective} from './directives/next-step.directive';
 import {PreviousStepDirective} from './directives/previous-step.directive';
 import {OptionalStepDirective} from './directives/optional-step.directive';
 import {WizardNavigationBarComponent} from './components/wizard-navigation-bar.component';
-import {GoToStepDirective} from "./directives/go-to-step.directive";
+import {GoToStepDirective} from './directives/go-to-step.directive';
 
 
 @NgModule({
