Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: (Core) implement wizard summary #4082

Merged
merged 59 commits into from
Dec 29, 2020
Merged

feat: (Core) implement wizard summary #4082

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
59 commits
Select commit Hold shift + click to select a range
5c8ad45
progress on responsive step stacking
mikerodonnell89 Oct 15, 2020
4bad32d
scrolling progress
mikerodonnell89 Nov 17, 2020
e9ba67d
more progress
mikerodonnell89 Nov 18, 2020
e5d7dae
fix flicker
mikerodonnell89 Nov 18, 2020
3a49526
tests
mikerodonnell89 Nov 18, 2020
9780e54
customizable content height
mikerodonnell89 Nov 18, 2020
57e8175
small tweaks
mikerodonnell89 Nov 19, 2020
ce817c7
programmatically set wizard content height
mikerodonnell89 Nov 19, 2020
a380921
fix custom contentHeight
mikerodonnell89 Nov 19, 2020
408c6a6
PR comments
mikerodonnell89 Nov 19, 2020
ffab446
force build
mikerodonnell89 Nov 20, 2020
d679e3b
fix build
mikerodonnell89 Nov 20, 2020
b3682dd
Merge branch 'master' into fix/wizard-scroll
mikerodonnell89 Nov 20, 2020
8a56957
fix scrollspy import
mikerodonnell89 Nov 20, 2020
205e253
pr comments
mikerodonnell89 Nov 23, 2020
b0fe079
fix conflict
mikerodonnell89 Nov 24, 2020
62b0a50
use action sheet
mikerodonnell89 Nov 24, 2020
71a42d3
pr comments
mikerodonnell89 Nov 24, 2020
8a6aa68
fix conflicts
mikerodonnell89 Nov 25, 2020
7e918b1
fix scrolling on mobile
mikerodonnell89 Nov 25, 2020
b9fea5e
Merge branch 'fix/wizard-scroll' into feat/wizard-stacked-step-popover-2
mikerodonnell89 Nov 25, 2020
dcf8acf
two more tiny tweaks
mikerodonnell89 Nov 25, 2020
d09065d
Merge branch 'fix/wizard-scroll' into feat/wizard-stacked-step-popover-2
mikerodonnell89 Nov 25, 2020
8271604
empty
mikerodonnell89 Nov 25, 2020
959c9ad
fix tests
mikerodonnell89 Nov 26, 2020
99594fc
fix conflicts
mikerodonnell89 Dec 2, 2020
645eaa9
fix tests
mikerodonnell89 Dec 3, 2020
a5959b9
fix build
mikerodonnell89 Dec 3, 2020
2ea2083
Merge branch 'master' into fix/wizard-summary-2
mikerodonnell89 Dec 4, 2020
97e53f7
progress on wizard summary - going back with edit buttons not working
mikerodonnell89 Dec 4, 2020
2bb967d
pr comments
mikerodonnell89 Dec 4, 2020
8c59efd
Merge branch 'fix/wizard-action-sheet' into fix/wizard-summary-2
mikerodonnell89 Dec 4, 2020
a4b6edb
some improvements
mikerodonnell89 Dec 7, 2020
3141be0
start on fullscreen thing
mikerodonnell89 Dec 7, 2020
a246823
improve wizard branching docs
mikerodonnell89 Dec 7, 2020
da43d16
Revert "start on fullscreen thing"
mikerodonnell89 Dec 7, 2020
5c0a390
conflicts
mikerodonnell89 Dec 7, 2020
96c51a9
case 1 and 2nd to last step submit button
mikerodonnell89 Dec 8, 2020
265f7d6
branching improvements
mikerodonnell89 Dec 8, 2020
3f0ed81
unused imports
mikerodonnell89 Dec 8, 2020
049ec97
fix scrolling issues, not being able to go back to summary page
mikerodonnell89 Dec 9, 2020
11ec460
Merge branch 'master' into fix/wizard-summary-2
mikerodonnell89 Dec 9, 2020
7649325
wizard branching dialog
mikerodonnell89 Dec 9, 2020
a95bdcd
fix connector
mikerodonnell89 Dec 10, 2020
24986d5
fix conflicts
mikerodonnell89 Dec 10, 2020
5190b0d
fix conflicts
mikerodonnell89 Dec 10, 2020
056699c
fix button hiding bug
mikerodonnell89 Dec 10, 2020
099b883
various bug fixes, full-screen examples
mikerodonnell89 Dec 11, 2020
26d169a
some improvements, mobile wizard progress bar not collapsing properly…
mikerodonnell89 Dec 11, 2020
e46561d
removeFromDom works on first load but not after visiting summary, goi…
mikerodonnell89 Dec 11, 2020
c20a83f
Merge branch 'master' into fix/wizard-summary-2
mikerodonnell89 Dec 16, 2020
93e33b7
fix stacking issue and layout grid on mobile
mikerodonnell89 Dec 16, 2020
90d44f3
prettier and add a little note about the summary page
mikerodonnell89 Dec 16, 2020
78d2a90
pr comments
mikerodonnell89 Dec 17, 2020
74acf64
more pr comments
mikerodonnell89 Dec 18, 2020
7bbd5ea
remove brackets
mikerodonnell89 Dec 23, 2020
5e915e5
Merge branch 'master' into fix/wizard-summary-2
mikerodonnell89 Dec 23, 2020
2ec478d
Merge branch 'main' into fix/wizard-summary-2
mikerodonnell89 Dec 29, 2020
eb434a7
Merge branch 'main' into fix/wizard-summary-2
mikerodonnell89 Dec 29, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
198 changes: 112 additions & 86 deletions .../docs/src/app/core/component-docs/wizard/examples/wizard-branching-example.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,93 +1,119 @@
<fd-wizard>
<fd-wizard-navigation>
<ul fd-wizard-progress-bar>
<li fd-wizard-step [status]="step1status" (statusChange)="step1status = $event" label="Step 1: One Line">
<fd-wizard-step-indicator glyph="accept"></fd-wizard-step-indicator>
<fd-wizard-content>
<div fd-form-item>
<label fd-form-label for="address-1">Address Line 1</label>
<input fd-form-control type="text" id="address-1" />
</div>
<div fd-form-item>
<label fd-form-label for="address-2">Address Line 2</label>
<input fd-form-control type="text" id="address-2" />
</div>
<div fd-form-item>
<label fd-form-label for="address-3">City, State, and Zip</label>
<input fd-form-control type="text" id="address-3" />
</div>
<fd-wizard-next-step>
<button fd-button [compact]="true" fdType="emphasized" (click)="goToStep(2)">
Go to the payment selection page
</button>
</fd-wizard-next-step>
</fd-wizard-content>
</li>
<li
fd-wizard-step
branching="true"
[status]="step2status"
(statusChange)="step2status = $event"
label="Step 2: Payment Selection"
>
<fd-wizard-step-indicator>2</fd-wizard-step-indicator>
<fd-wizard-content>
Please select a payment type:
<fd-radio-button
value="bank"
id="radio-1"
name="radio-name-1"
[(ngModel)]="paymentSelection"
(ngModelChange)="paymentSelectionChanged(confirmationDialog)"
>
Bank Transfer
</fd-radio-button>
<fd-radio-button value="credit" id="radio-2" name="radio-name-2" [(ngModel)]="paymentSelection">
Credit Card
</fd-radio-button>
<fd-wizard-next-step>
<button
[disabled]="!paymentSelection"
fd-button
[compact]="true"
fdType="emphasized"
(click)="goToStep(3)"
<button fd-button (click)="enterFullscreenExample()">Click to open full screen</button>

<div cdkScrollable class="docs-wizard-example-overlay" #overlay>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why don't you use the Dialog for full screen Wizard?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well it is not meant to be used in a dialog, so I didn't want to give the impression that it is, so I decided to go the same route that the flexible column layout docs are used. The mobile wizard is used in a dialog and I'll use a dialog in that example

<ng-container *ngIf="fullscreen">
<div class="docs-wizard-example-overlay-content">
<div class="docs-wizard-example-button">
<button fd-button (click)="exitFullscreenExample($event)">Exit Example</button>
</div>

<!-- The Wizard -->
<fd-wizard>
<fd-wizard-navigation>
<ul fd-wizard-progress-bar>
<li
fd-wizard-step
[status]="step1status"
(statusChange)="step1status = $event"
label="Step 1: One Line"
>
<fd-wizard-step-indicator glyph="accept"></fd-wizard-step-indicator>
<fd-wizard-content>
<div fd-form-item>
<label fd-form-label for="address-1">Address Line 1</label>
<input fd-form-control type="text" id="address-1" />
</div>
<div fd-form-item>
<label fd-form-label for="address-2">Address Line 2</label>
<input fd-form-control type="text" id="address-2" />
</div>
<div fd-form-item>
<label fd-form-label for="address-3">City, State, and Zip</label>
<input fd-form-control type="text" id="address-3" />
</div>
<fd-wizard-next-step>
<button fd-button [compact]="true" fdType="emphasized" (click)="goToStep(2)">
Go to the payment selection page
</button>
</fd-wizard-next-step>
</fd-wizard-content>
</li>
<li
fd-wizard-step
branching="true"
[status]="step2status"
(statusChange)="step2status = $event"
label="Step 2: Payment Selection"
>
Go to Payment Details Page
</button>
</fd-wizard-next-step>
</fd-wizard-content>
</li>
<li
*ngIf="step2status === 'completed'"
fd-wizard-step
[status]="step3status"
(statusChange)="step3status = $event"
[label]="paymentSelection === 'bank' ? 'Step 3: Bank Details' : 'Step 3: Credit Card Details'"
>
<fd-wizard-step-indicator>3</fd-wizard-step-indicator>
<fd-wizard-content>
<div fd-form-item>
<label fd-form-label for="payment"
>Enter your {{ paymentSelection === 'bank' ? 'bank' : 'credit card' }} details:</label
<fd-wizard-step-indicator>2</fd-wizard-step-indicator>
<fd-wizard-content>
Please select a payment type:
<fd-radio-button
value="bank"
id="radio-1"
name="radio-name-1"
[(ngModel)]="paymentSelection"
(ngModelChange)="paymentSelectionChanged(confirmationDialog)"
>
Bank Transfer
</fd-radio-button>
<fd-radio-button
value="credit"
id="radio-2"
name="radio-name-2"
[(ngModel)]="paymentSelection"
>
Credit Card
</fd-radio-button>
<fd-wizard-next-step>
<button
[disabled]="!paymentSelection"
fd-button
[compact]="true"
fdType="emphasized"
(click)="goToStep(3)"
>
Go to Payment Details Page
</button>
</fd-wizard-next-step>
</fd-wizard-content>
</li>
<li
*ngIf="step2status === 'completed'"
fd-wizard-step
[status]="step3status"
(statusChange)="step3status = $event"
[label]="
paymentSelection === 'bank' ? 'Step 3: Bank Details' : 'Step 3: Credit Card Details'
"
>
<input fd-form-control type="text" id="payment" />
<fd-wizard-step-indicator>3</fd-wizard-step-indicator>
<fd-wizard-content>
<div fd-form-item>
<label fd-form-label for="payment"
>Enter your
{{ paymentSelection === 'bank' ? 'bank' : 'credit card' }} details:</label
>
<input fd-form-control type="text" id="payment" />
</div>
</fd-wizard-content>
</li>
</ul>
</fd-wizard-navigation>
<div fd-bar barDesign="footer">
<div fd-bar-right>
<fd-bar-element>
<button fd-button label="Save" fdType="transparent" [compact]="true"></button>
</fd-bar-element>
<fd-bar-element>
<button fd-button label="Cancel" fdType="transparent" [compact]="true"></button>
</fd-bar-element>
</div>
</fd-wizard-content>
</li>
</ul>
</fd-wizard-navigation>
<div fd-bar barDesign="footer">
<div fd-bar-right>
<fd-bar-element>
<button fd-button label="Save" fdType="transparent" [compact]="true"></button>
</fd-bar-element>
<fd-bar-element>
<button fd-button label="Cancel" fdType="transparent" [compact]="true"></button>
</fd-bar-element>
</div>
</fd-wizard>
</div>
</div>
</fd-wizard>
</ng-container>
</div>

<ng-template let-dialog let-dialogConfig="dialogConfig" #confirmationDialog>
<fd-dialog [dialogConfig]="dialogConfig" [dialogRef]="dialog">
Expand Down
36 changes: 35 additions & 1 deletion apps/docs/src/app/core/component-docs/wizard/examples/wizard-branching-example.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,29 @@
import { Component, OnInit, TemplateRef, ViewEncapsulation } from '@angular/core';
import { Component, ElementRef, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
import { DialogService, WizardStepStatus } from '@fundamental-ngx/core';

@Component({
selector: 'fd-wizard-branching-example',
templateUrl: './wizard-branching-example.component.html',
styleUrls: ['./wizard-example.component.scss'],
encapsulation: ViewEncapsulation.None,
host: {
class: 'fd-wizard-example'
}
})
export class WizardBranchingExampleComponent implements OnInit {
/**
* documentation related property
* provides access to the HTML element with "overlay" reference
*/
@ViewChild('overlay')
overlay: ElementRef<HTMLElement>;

/**
* documentation related property
* specifies if the doc example is rendered in fullscreen or not
*/
fullscreen = false;

step1status: WizardStepStatus = 'current';
step2status: WizardStepStatus = 'upcoming';
step3status: WizardStepStatus = 'upcoming';
Expand Down Expand Up @@ -61,4 +75,24 @@ export class WizardBranchingExampleComponent implements OnInit {
}
}
}

/**
* documentation related function
* opens the example in full screen
*/
enterFullscreenExample(): void {
this.goToStep(1);
this.fullscreen = true;
this.overlay.nativeElement.style.width = '100%';
}

/**
* documentation related function
* exits the full screen mode of the example
*/
exitFullscreenExample(event: Event): void {
event.stopPropagation();
this.fullscreen = false;
this.overlay.nativeElement.style.width = '0%';
}
}
122 changes: 70 additions & 52 deletions ...cs/src/app/core/component-docs/wizard/examples/wizard-customizable-example.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,53 +1,71 @@
<fd-wizard [appendToWizard]="false">
<fd-wizard-navigation>
<ul fd-wizard-progress-bar size="sm">
<li fd-wizard-step [status]="step1status" (statusChange)="step1status = $event" label="Step 1: One Line">
<fd-wizard-step-indicator glyph="accept"></fd-wizard-step-indicator>
<fd-wizard-content size="md" contentBackground="solid">
This wizard content has a 'solid' background and padding set with the size input.
<fd-wizard-next-step>
<button fd-button [compact]="true" fdType="emphasized" (click)="goToStep(2)">
Go to Step 2
</button>
</fd-wizard-next-step>
</fd-wizard-content>
</li>
<li
fd-wizard-step
[status]="step2status"
(statusChange)="step2status = $event"
label="Step 2: Another Step"
>
<fd-wizard-step-indicator>2</fd-wizard-step-indicator>
<fd-wizard-content size="md">
Wizard Content for step 2
<fd-wizard-next-step>
<button fd-button [compact]="true" fdType="emphasized" (click)="goToStep(3)">
Go to Step 3
</button>
</fd-wizard-next-step>
</fd-wizard-content>
</li>
<li
fd-wizard-step
[status]="step3status"
(statusChange)="step3status = $event"
label="Step 3: One line truncates"
optionalText="(Optional)"
>
<fd-wizard-step-indicator>3</fd-wizard-step-indicator>
<fd-wizard-content size="md"> Wizard Content for step 3 </fd-wizard-content>
</li>
</ul>
</fd-wizard-navigation>
<div fd-bar barDesign="footer">
<div fd-bar-right>
<fd-bar-element>
<button fd-button label="Save" fdType="transparent" [compact]="true"></button>
</fd-bar-element>
<fd-bar-element>
<button fd-button label="Cancel" fdType="transparent" [compact]="true"></button>
</fd-bar-element>
<button fd-button (click)="enterFullscreenExample()">Click to open full screen</button>

<div cdkScrollable class="docs-wizard-example-overlay" #overlay>
<ng-container *ngIf="fullscreen">
<div class="docs-wizard-example-overlay-content">
<div class="docs-wizard-example-button">
<button fd-button (click)="exitFullscreenExample($event)">Exit Example</button>
</div>

<!-- The Wizard -->
<fd-wizard [appendToWizard]="false">
<fd-wizard-navigation>
<ul fd-wizard-progress-bar size="sm">
<li
fd-wizard-step
[status]="step1status"
(statusChange)="step1status = $event"
label="Step 1: One Line"
>
<fd-wizard-step-indicator glyph="accept"></fd-wizard-step-indicator>
<fd-wizard-content size="md" contentBackground="solid">
This wizard content has a 'solid' background and padding set with the size input.
<fd-wizard-next-step>
<button fd-button [compact]="true" fdType="emphasized" (click)="goToStep(2)">
Go to Step 2
</button>
</fd-wizard-next-step>
</fd-wizard-content>
</li>
<li
fd-wizard-step
[status]="step2status"
(statusChange)="step2status = $event"
label="Step 2: Another Step"
>
<fd-wizard-step-indicator>2</fd-wizard-step-indicator>
<fd-wizard-content size="md">
Wizard Content for step 2
<fd-wizard-next-step>
<button fd-button [compact]="true" fdType="emphasized" (click)="goToStep(3)">
Go to Step 3
</button>
</fd-wizard-next-step>
</fd-wizard-content>
</li>
<li
fd-wizard-step
[status]="step3status"
(statusChange)="step3status = $event"
label="Step 3: One line truncates"
optionalText="(Optional)"
>
<fd-wizard-step-indicator>3</fd-wizard-step-indicator>
<fd-wizard-content size="md"> Wizard Content for step 3 </fd-wizard-content>
</li>
</ul>
</fd-wizard-navigation>
<div fd-bar barDesign="footer">
<div fd-bar-right>
<fd-bar-element>
<button fd-button label="Save" fdType="transparent" [compact]="true"></button>
</fd-bar-element>
<fd-bar-element>
<button fd-button label="Cancel" fdType="transparent" [compact]="true"></button>
</fd-bar-element>
</div>
</div>
</fd-wizard>
</div>
</div>
</fd-wizard>
</ng-container>
</div>
Loading