Skip to content

Commit 8e7a741

Browse files
madoarmadoar
authored
Rename title input to stepTitle (#41)
- remove duplicate fields from the wizard step implemenations - remove the title tests - add alternative names for optional and selected directives - use By.directive instead of By.css - fix spelling error in wizard-completion-step.interface.ts - declutter tests for the wizard steps - remove unnecessary tests from enable-back-links-directive.spec.ts - rename SelectedDirective to SelectedStepDirective - rename titleTemplate to stepTitleTemplate - rename title to stepTitle - add alternative selector stepTitle to the WizardStepTitleDirective - rename title to `stepTitle` in the README - add alternative selectors for selected and optional steps to the README
1 parent 0acef34 commit 8e7a741

35 files changed

+507
-1197
lines changed

‎README.md‎

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -42,17 +42,17 @@ To use the this wizard component in an angular 2 project simply add a wizard com
4242

4343
```html
4444
<wizard>
45-
<wizard-step title="Title of step 1">
45+
<wizard-step stepTitle="Title of step 1">
4646
Content of Step 1
4747
<button type="button" nextStep>Next Step</button>
4848
<button type="button" goToStep="2">Go directly to third Step</button>
4949
</wizard-step>
50-
<wizard-step title="Title of step 2" optionalStep>
50+
<wizard-step stepTitle="Title of step 2" optionalStep>
5151
Content of Step 2
5252
<button type="button" previousStep>Go to previous step</button>
5353
<button type="button" nextStep>Go to next step</button>
5454
</wizard-step>
55-
<wizard-step title="Title of step 3">
55+
<wizard-step stepTitle="Title of step 3">
5656
Content of Step 3
5757
<button type="button" previousStep>Previous Step</button>
5858
<button type="button" (click)="finishFunction()">Finish</button>
@@ -127,9 +127,9 @@ Possible `<wizard>` parameters:
127127
The `<wizard-step></wizard-step>` environment is the wizard step environment.
128128
Every step that belongs to your wizard must be defined inside its own `<wizard-step></wizard-step>` environment.
129129

130-
#### \[title\]
131-
A wizard must contain a title, which is shown in the navigation bar of the wizard.
132-
The title of a step can be set by adding a `title` attribute to the step definition.
130+
#### \[stepTitle\]
131+
A wizard step must contain a title, which is shown in the navigation bar of the wizard.
132+
The step title can be set by adding a `stepTitle` attribute to the step definition.
133133

134134
#### \[navigationSymbol\]
135135
Sometimes it's useful to add a symbol in the center of the circle in the navigation bar, that belongs to the step.
@@ -140,7 +140,7 @@ Be aware, that not all layouts display the symbols. Only the layouts `large-fill
140140
If you want to add a `2` to the circle in the navigation bar belonging to the second step you can do it like this:
141141

142142
```html
143-
<wizard-step title="Second Step" navigationSymbol="2"></wizard-step>
143+
<wizard-step stepTitle="Second Step" navigationSymbol="2"></wizard-step>
144144
```
145145

146146
In addition to normal symbols it's also possible to use an icon from a font as a symbol.
@@ -157,7 +157,7 @@ For example, if you want to show the icon with the unicode `\f2dd` of [FontAweso
157157
you need to set the `navigationSymbol` input attribute of the step to `&#xf2dd;` and the `navigationSymbolFontFamily` to `FontAwesome`:
158158

159159
```html
160-
<wizard-step title="Second Step" navigationSymbol="&#xf2dd;" navigationSymbolFontFamily="FontAwesome"></wizard-step>
160+
<wizard-step stepTitle="Second Step" navigationSymbol="&#xf2dd;" navigationSymbolFontFamily="FontAwesome"></wizard-step>
161161
```
162162

163163
#### \[canEnter\]
@@ -181,7 +181,7 @@ It then returns true, when the step change should succeed and false otherwise.
181181
If you need to call a function to do some initialisation work before entering a wizard step you can add a `stepEnter` attribute to the wizard step environment like this:
182182

183183
```html
184-
<wizard-step title="Second Step" (stepEnter)="enterSecondStep($event)"></wizard-step>
184+
<wizard-step stepTitle="Second Step" (stepEnter)="enterSecondStep($event)"></wizard-step>
185185
```
186186

187187
This leads to the calling of the `enterSecondStep` function when the wizard moves to this step.
@@ -201,7 +201,7 @@ Possible `<wizard-step>` parameters:
201201

202202
| Parameter name | Possible Values | Default Value |
203203
| ----------------------------- | ------------------------------------------------- | ------------- |
204-
| [title] | string | null |
204+
| [stepTitle] | string | null |
205205
| [navigationSymbol] | string | '' |
206206
| [navigationSymbolFontFamily] | string | null |
207207
| [canEnter] | function(MovingDirection): boolean &#124; boolean | true |
@@ -225,7 +225,7 @@ Possible `<wizard-completion-step>` parameters:
225225

226226
| Parameter name | Possible Values | Default Value |
227227
| ----------------------------- | ------------------------------------------------- | ------------- |
228-
| [title] | string | null |
228+
| [stepTitle] | string | null |
229229
| [navigationSymbol] | string | '' |
230230
| [navigationSymbolFontFamily] | string | null |
231231
| [canEnter] | function(MovingDirection): boolean &#124; boolean | true |
@@ -250,7 +250,7 @@ Possible `[enableBackLinks]` parameters:
250250

251251

252252
### \[wizardStepTitle\]
253-
Sometimes it's not enough to define a title with the `title` attribute in `<wizard-step>` and `<wizard-completion-step>`.
253+
Sometimes it's not enough to define a title with the `stepTitle` attribute in `<wizard-step>` and `<wizard-completion-step>`.
254254
One example for such a case is, if the title should be written in another font.
255255
Another example would be if it's desired that the title should be choosen depending on the available width of your screen or window.
256256
In such cases you may want to specify the html for the title of a wizard step yourself.
@@ -270,12 +270,14 @@ Be aware, that you can only use `[wizardStepTitle]` together with Angular, becau
270270
### \[optionalStep\]
271271
If you need to define an optional step, that doesn't need to be done to continue to the next steps, you can define an optional step
272272
by adding the `optionalStep` directive to the step you want to declare as optional.
273+
To add the `optionalStep` directive to a wizard step, you can either add `optional` or `optionalStep` to the step definition.
273274

274-
### \[selected\]
275+
### \[selectedStep\]
275276
In some cases it may be a better choice to set the default wizard step not via a static number.
276-
Another way to set the default wizard step is by using the `selected` directive.
277-
When attaching the `selected` directive to an arbitrary wizard step, it will be marked as the default wizard step,
277+
Another way to set the default wizard step is by using the `selectedStep` directive.
278+
When attaching the `selectedStep` directive to an arbitrary wizard step, it will be marked as the default wizard step,
278279
which is shown directly after the wizard startup.
280+
To add the `selectedStep` directive to a wizard step, you can either add `selected` or `selectedStep` to the step definition.
279281

280282
### \[goToStep\]
281283
`ng2-archwizard` has three directives, that allow moving between steps.
@@ -363,11 +365,11 @@ This can be done by defining adding the `[wizardStep]` directive to the componen
363365

364366
```html
365367
<wizard>
366-
<wizard-step title="Steptitle 1">
368+
<wizard-step stepTitle="Steptitle 1">
367369
Step 1
368370
</wizard-step>
369-
<custom-step wizardStep title="Steptitle 2"></custom-step>
370-
<wizard-step title="Steptitle 3">
371+
<custom-step wizardStep stepTitle="Steptitle 2"></custom-step>
372+
<wizard-step stepTitle="Steptitle 3">
371373
Step 3
372374
</wizard-step>
373375
</wizard>
@@ -378,7 +380,7 @@ Possible `[wizardStep]` parameters:
378380

379381
| Parameter name | Possible Values | Default Value |
380382
| ----------------------------- | ------------------------------------------------- | ------------- |
381-
| [title] | string | null |
383+
| [stepTitle] | string | null |
382384
| [navigationSymbol] | string | '' |
383385
| [navigationSymbolFontFamily] | string | null |
384386
| [canEnter] | function(MovingDirection): boolean &#124; boolean | true |
@@ -394,10 +396,10 @@ that contains the wizard completion step.
394396

395397
```html
396398
<wizard>
397-
<wizard-step title="Steptitle 1">
399+
<wizard-step stepTitle="Steptitle 1">
398400
Step 1
399401
</wizard-step>
400-
<custom-step wizardCompletionStep title="Completion steptitle">
402+
<custom-step wizardCompletionStep stepTitle="Completion steptitle">
401403
</custom-step>
402404
</wizard>
403405
```
@@ -407,7 +409,7 @@ Possible `[wizardCompletionStep]` parameters:
407409

408410
| Parameter name | Possible Values | Default Value |
409411
| ----------------------------- | ------------------------------------------------- | ------------- |
410-
| [title] | string | null |
412+
| [stepTitle] | string | null |
411413
| [navigationSymbol] | string | '' |
412414
| [navigationSymbolFontFamily] | string | null |
413415
| [canEnter] | function(MovingDirection): boolean &#124; boolean | true |

‎src/components/components/wizard-completion-step.component.spec.ts‎

Lines changed: 3 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,10 @@ import {NavigationMode} from '../navigation/navigation-mode.interface';
1414
selector: 'test-wizard',
1515
template: `
1616
<wizard>
17-
<wizard-step title='Steptitle 1' (stepEnter)="enterInto($event, 1)" (stepExit)="exitFrom($event, 1)">Step 1</wizard-step>
18-
<wizard-step title='Steptitle 2' [canExit]="isValid"
17+
<wizard-step stepTitle='Steptitle 1' (stepEnter)="enterInto($event, 1)" (stepExit)="exitFrom($event, 1)">Step 1</wizard-step>
18+
<wizard-step stepTitle='Steptitle 2' [canExit]="isValid"
1919
optionalStep (stepEnter)="enterInto($event, 2)" (stepExit)="exitFrom($event, 2)">Step 2</wizard-step>
20-
<wizard-completion-step title='Completion steptitle 3' (stepEnter)="enterInto($event, 3)">Step 3</wizard-completion-step>
20+
<wizard-completion-step stepTitle='Completion steptitle 3' (stepEnter)="enterInto($event, 3)">Step 3</wizard-completion-step>
2121
</wizard>
2222
`
2323
})
@@ -62,81 +62,4 @@ describe('WizardCompletionStepComponent', () => {
6262
expect(wizardTestFixture.debugElement.queryAll(By.css('wizard-step')).length).toBe(2);
6363
expect(wizardTestFixture.debugElement.queryAll(By.css('wizard-completion-step')).length).toBe(1);
6464
});
65-
66-
it('should have correct step title', () => {
67-
expect(wizardTest).toBeTruthy();
68-
expect(wizardState.getStepAtIndex(0).title).toBe('Steptitle 1');
69-
expect(wizardState.getStepAtIndex(1).title).toBe('Steptitle 2');
70-
expect(wizardState.getStepAtIndex(2).title).toBe('Completion steptitle 3');
71-
});
72-
73-
it('should enter first step after initialisation', () => {
74-
expect(wizardTest.eventLog).toEqual(['enter Forwards 1']);
75-
});
76-
77-
it('should enter completion step after first step', () => {
78-
expect(wizardState.currentStepIndex).toBe(0);
79-
80-
navigationMode.goToNextStep();
81-
wizardTestFixture.detectChanges();
82-
83-
expect(wizardState.currentStepIndex).toBe(1);
84-
expect(wizardTest.eventLog).toEqual(['enter Forwards 1', 'exit Forwards 1', 'enter Forwards 2']);
85-
86-
navigationMode.goToNextStep();
87-
wizardTestFixture.detectChanges();
88-
89-
expect(wizardState.currentStepIndex).toBe(2);
90-
expect(wizardTest.eventLog).toEqual(['enter Forwards 1', 'exit Forwards 1', 'enter Forwards 2',
91-
'exit Forwards 2', 'enter Forwards 3']);
92-
});
93-
94-
it('should enter completion step after jumping over second optional step', () => {
95-
navigationMode.goToStep(2);
96-
wizardTestFixture.detectChanges();
97-
98-
expect(wizardTest.eventLog).toEqual(['enter Forwards 1', 'exit Forwards 1', 'enter Forwards 3']);
99-
});
100-
101-
it('should set the wizard as completed after entering the completion step', () => {
102-
navigationMode.goToStep(2);
103-
wizardTestFixture.detectChanges();
104-
105-
expect(wizardState.completed).toBe(true);
106-
});
107-
108-
it('should be unable to leave the completion step', () => {
109-
navigationMode.goToStep(2);
110-
wizardTestFixture.detectChanges();
111-
112-
expect(navigationMode.canGoToStep(0)).toBe(false);
113-
expect(navigationMode.canGoToStep(1)).toBe(false);
114-
});
115-
116-
117-
it('should not be able to leave the completion step in any direction', () => {
118-
wizardTest.isValid = false;
119-
120-
navigationMode.goToStep(2);
121-
wizardTestFixture.detectChanges();
122-
123-
expect(wizardState.currentStepIndex).toBe(2);
124-
expect(wizardState.currentStep.canExit).toBe(false);
125-
});
126-
127-
it('should not leave the completion step if it can\'t be exited', () => {
128-
wizardTest.isValid = false;
129-
130-
navigationMode.goToStep(2);
131-
wizardTestFixture.detectChanges();
132-
133-
expect(wizardState.currentStepIndex).toBe(2);
134-
135-
navigationMode.goToPreviousStep();
136-
wizardTestFixture.detectChanges();
137-
138-
expect(wizardState.currentStepIndex).toBe(2);
139-
expect(wizardTest.eventLog)
140-
.toEqual(['enter Forwards 1', 'exit Forwards 1', 'enter Forwards 3', 'enter Stay 3']);
141-
});
14265
});

‎src/components/components/wizard-completion-step.component.ts‎

Lines changed: 4 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {MovingDirection} from '../util/moving-direction.enum';
77
import {WizardComponent} from './wizard.component';
88
import {WizardStep} from '../util/wizard-step.interface';
99
import {WizardStepTitleDirective} from '../directives/wizard-step-title.directive';
10-
import {WizardCompletionStep} from '../util/wizard-completion-step.inferface';
10+
import {WizardCompletionStep} from '../util/wizard-completion-step.interface';
1111

1212
/**
1313
* The `wizard-completion-step` component can be used to define a completion/success step at the end of your wizard
@@ -19,7 +19,7 @@ import {WizardCompletionStep} from '../util/wizard-completion-step.inferface';
1919
* ### Syntax
2020
*
2121
* ```html
22-
* <wizard-completion-step [title]="title of the wizard step" [navigationSymbol]="navigation symbol"
22+
* <wizard-completion-step [stepTitle]="title of the wizard step" [navigationSymbol]="navigation symbol"
2323
* [navigationSymbolFontFamily]="navigation symbol font family"
2424
* (stepEnter)="event emitter to be called when the wizard step is entered"
2525
* (stepExit)="event emitter to be called when the wizard step is exited">
@@ -30,15 +30,15 @@ import {WizardCompletionStep} from '../util/wizard-completion-step.inferface';
3030
* ### Example
3131
*
3232
* ```html
33-
* <wizard-completion-step title="Step 1" navigationSymbol="1">
33+
* <wizard-completion-step stepTitle="Step 1" navigationSymbol="1">
3434
* ...
3535
* </wizard-completion-step>
3636
* ```
3737
*
3838
* With a navigation symbol from the `font-awesome` font:
3939
*
4040
* ```html
41-
* <wizard-completion-step title="Step 1" navigationSymbol="&#xf1ba;" navigationSymbolFontFamily="FontAwesome">
41+
* <wizard-completion-step stepTitle="Step 1" navigationSymbol="&#xf1ba;" navigationSymbolFontFamily="FontAwesome">
4242
* ...
4343
* </wizard-completion-step>
4444
* ```
@@ -55,89 +55,4 @@ import {WizardCompletionStep} from '../util/wizard-completion-step.inferface';
5555
]
5656
})
5757
export class WizardCompletionStepComponent extends WizardCompletionStep {
58-
/**
59-
* @inheritDoc
60-
*/
61-
@ContentChild(WizardStepTitleDirective)
62-
public titleTemplate: WizardStepTitleDirective;
63-
64-
/**
65-
* @inheritDoc
66-
*/
67-
@Input()
68-
public title: string;
69-
70-
/**
71-
* @inheritDoc
72-
*/
73-
@Input()
74-
public navigationSymbol = '';
75-
76-
/**
77-
* @inheritDoc
78-
*/
79-
@Input()
80-
public navigationSymbolFontFamily: string;
81-
82-
/**
83-
* @inheritDoc
84-
*/
85-
@Output()
86-
public stepEnter = new EventEmitter<MovingDirection>();
87-
88-
/**
89-
* @inheritDoc
90-
*/
91-
public stepExit = new EventEmitter<MovingDirection>();
92-
93-
/**
94-
* @inheritDoc
95-
*/
96-
@HostBinding('hidden')
97-
public get hidden(): boolean {
98-
return !this.selected;
99-
}
100-
101-
/**
102-
* @inheritDoc
103-
*/
104-
public completed = false;
105-
106-
/**
107-
* @inheritDoc
108-
*/
109-
public selected = false;
110-
111-
/**
112-
* @inheritDoc
113-
*/
114-
public optional = false;
115-
116-
/**
117-
* @inheritDoc
118-
*/
119-
@Input()
120-
public canEnter: ((direction: MovingDirection) => boolean) | boolean = true;
121-
122-
/**
123-
* @inheritDoc
124-
*/
125-
public canExit: ((direction: MovingDirection) => boolean) | boolean = false;
126-
127-
/**
128-
* @inheritDoc
129-
*/
130-
enter(direction: MovingDirection): void {
131-
this.completed = true;
132-
this.stepEnter.emit(direction);
133-
}
134-
135-
/**
136-
* @inheritDoc
137-
*/
138-
exit(direction: MovingDirection): void {
139-
// set this completion step as incomplete
140-
this.completed = false;
141-
this.stepExit.emit(direction);
142-
}
14358
}

‎src/components/components/wizard-navigation-bar.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@
1414
}">
1515
<div>
1616
<a [goToStep]="step">
17-
<ng-container *ngIf="step.titleTemplate" [ngTemplateOutlet]="step.titleTemplate.templateRef"></ng-container>
18-
<ng-container *ngIf="!step.titleTemplate">{{step.title}}</ng-container>
17+
<ng-container *ngIf="step.stepTitleTemplate" [ngTemplateOutlet]="step.stepTitleTemplate.templateRef"></ng-container>
18+
<ng-container *ngIf="!step.stepTitleTemplate">{{step.stepTitle}}</ng-container>
1919
</a>
2020
</div>
2121
</li>

0 commit comments

Comments
 (0)