Skip to content

Commit 80f8fb9

Browse files
jsandoval81jsandoval81
authored
Frontend/updating purchase flow nav (#748)
### Requirements List - _None_ ### Description List - Create a common style mixin for the purchase-flow button UI - Update the purchase-flow HTML templates to support the desired tab order of buttons - Various HTML / style cleanup in the purchase-flow button UI - Minor style updates to match the latest designs ### Testing List - `yarn test:unit:all` should run without errors or warnings - `yarn serve` should run without errors or warnings - `yarn build` should run without errors or warnings - Code review - Testing - As a practitioner who is able to purchase privileges, begin the purchase process - Go through the purchase forms on both mobile and desktop, making sure the buttons at the bottom of each form still look & work as expected from the designs (e.g. Cancel, Back, Next) - Confirm keyboard tab navigation on each purchase form has the order of the tab selection of the buttons at the bottom of each form order as follows: 1) Next / Continue, 2) Back, 3) Cancel Closes #549 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Style** - Unified and improved button row styling across all purchase-related forms for a more consistent and responsive layout. - Primary navigation buttons (submit, back) are now grouped together and visually separated from the cancel button in all purchase flows. - Enhanced button alignment and spacing for better usability on both desktop and mobile devices. - **New Features** - Introduced a reusable style for purchase flow buttons, ensuring consistent appearance and behavior throughout the application. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
1 parent 540c1ff commit 80f8fb9

File tree

14 files changed

+172
-305
lines changed

14 files changed

+172
-305
lines changed

‎webroot/src/components/PrivilegePurchaseAttestation/PrivilegePurchaseAttestation.less

Lines changed: 1 addition & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -79,42 +79,7 @@
7979
}
8080

8181
.button-row {
82-
display: flex;
83-
flex-direction: column-reverse;
84-
align-items: center;
85-
justify-content: center;
86-
width: 100%;
87-
margin-top: 2rem;
88-
89-
@media @tabletWidth {
90-
flex-direction: row;
91-
align-items: flex-end;
92-
justify-content: space-between;
93-
}
94-
95-
:deep(.input-container) {
96-
margin-bottom: 1rem;
97-
98-
@media @tabletWidth {
99-
margin-bottom: unset;
100-
}
101-
}
102-
103-
.right-cell {
104-
display: flex;
105-
flex-direction: row;
106-
align-items: center;
107-
justify-content: center;
108-
109-
@media @tabletWidth {
110-
align-items: flex-end;
111-
justify-content: space-between;
112-
}
113-
114-
.back {
115-
margin-right: 1rem;
116-
}
117-
}
82+
.purchase-flow-buttons();
11883
}
11984
}
12085

‎webroot/src/components/PrivilegePurchaseAttestation/PrivilegePurchaseAttestation.vue

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -33,24 +33,28 @@
3333
</div>
3434
</div>
3535
<div v-if="areFormInputsSet" class="button-row">
36-
<InputButton
37-
:isTextLike="true"
38-
:label="$t('common.cancel')"
39-
:aria-label="$t('common.cancel')"
40-
class="cancel"
41-
@click="handleCancelClicked"
42-
/>
43-
<div class="right-cell">
36+
<div class="form-nav-buttons">
37+
<InputSubmit
38+
:formInput="formData.submit"
39+
class="form-nav-button"
40+
:label="submitLabel"
41+
:isEnabled="!isFormLoading"
42+
/>
4443
<InputButton
4544
:label="$t('common.back')"
4645
:aria-label="$t('common.back')"
47-
class="back"
46+
class="form-nav-button back"
47+
:isTransparent="true"
4848
@click="handleBackClicked"
4949
/>
50-
<InputSubmit
51-
:formInput="formData.submit"
52-
:label="submitLabel"
53-
:isEnabled="!isFormLoading"
50+
</div>
51+
<div class="form-override-buttons">
52+
<InputButton
53+
:isTextLike="true"
54+
:label="$t('common.cancel')"
55+
:aria-label="$t('common.cancel')"
56+
class="form-override-button cancel"
57+
@click="handleCancelClicked"
5458
/>
5559
</div>
5660
</div>

‎webroot/src/components/PrivilegePurchaseFinalize/PrivilegePurchaseFinalize.less

Lines changed: 1 addition & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -21,42 +21,7 @@
2121
}
2222

2323
.button-row {
24-
display: flex;
25-
flex-direction: column-reverse;
26-
align-items: center;
27-
justify-content: center;
28-
width: 100%;
29-
margin-top: 2rem;
30-
31-
@media @tabletWidth {
32-
flex-direction: row;
33-
align-items: flex-end;
34-
justify-content: space-between;
35-
}
36-
37-
:deep(.input-container) {
38-
margin-bottom: 1rem;
39-
40-
@media @tabletWidth {
41-
margin-bottom: unset;
42-
}
43-
}
44-
45-
.right-cell {
46-
display: flex;
47-
flex-direction: row;
48-
align-items: center;
49-
justify-content: center;
50-
51-
@media @tabletWidth {
52-
align-items: flex-end;
53-
justify-content: space-between;
54-
}
55-
56-
.back-button {
57-
margin-right: 1rem;
58-
}
59-
}
24+
.purchase-flow-buttons();
6025
}
6126

6227
.finalize-purchase-container {

‎webroot/src/components/PrivilegePurchaseFinalize/PrivilegePurchaseFinalize.vue

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -111,25 +111,28 @@
111111
</div>
112112
<div v-if="formErrorMessage" class="form-error-message">{{formErrorMessage}}</div>
113113
<div class="button-row">
114-
<InputButton
115-
:label="cancelText"
116-
:isTextLike="true"
117-
aria-label="close modal"
118-
class="cancel-button"
119-
@click="handleCancelClicked"
120-
/>
121-
<div class="right-cell">
114+
<div class="form-nav-buttons">
115+
<InputSubmit
116+
:formInput="formData.submit"
117+
class="form-nav-button"
118+
:label="submitLabel"
119+
:isEnabled="!isFormLoading && isSubmitEnabled"
120+
/>
122121
<InputButton
123122
:label="backText"
124123
:isTransparent="true"
125124
aria-label="close modal"
126-
class="back-button"
125+
class="form-nav-button back-button"
127126
@click="handleBackClicked"
128127
/>
129-
<InputSubmit
130-
:formInput="formData.submit"
131-
:label="submitLabel"
132-
:isEnabled="!isFormLoading && isSubmitEnabled"
128+
</div>
129+
<div class="form-override-buttons">
130+
<InputButton
131+
:label="cancelText"
132+
:isTextLike="true"
133+
aria-label="close modal"
134+
class="form-override-button cancel-button"
135+
@click="handleCancelClicked"
133136
/>
134137
</div>
135138
</div>

‎webroot/src/components/PrivilegePurchaseInformationConfirmation/PrivilegePurchaseInformationConfirmation.less

Lines changed: 1 addition & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -25,55 +25,7 @@
2525
}
2626

2727
.button-row {
28-
position: fixed;
29-
bottom: 0;
30-
z-index: 3;
31-
display: flex;
32-
flex-direction: column-reverse;
33-
align-items: center;
34-
justify-content: center;
35-
width: 100%;
36-
margin-top: 2rem;
37-
padding-top: 1rem;
38-
background-color: @veryLightGrey;
39-
40-
@media @tabletWidth {
41-
position: unset;
42-
display: flex;
43-
flex-direction: row;
44-
align-items: flex-end;
45-
justify-content: space-between;
46-
width: 100%;
47-
margin-top: 2rem;
48-
background-color: unset;
49-
}
50-
51-
:deep(.input-container) {
52-
margin-bottom: 1rem;
53-
54-
@media @tabletWidth {
55-
margin-bottom: unset;
56-
}
57-
58-
input {
59-
width: 41vw;
60-
61-
@media @tabletWidth {
62-
width: unset;
63-
}
64-
}
65-
}
66-
67-
.right-cell {
68-
display: flex;
69-
flex-direction: row;
70-
align-items: flex-end;
71-
justify-content: space-between;
72-
73-
.back-button {
74-
margin-right: 1rem;
75-
}
76-
}
28+
.purchase-flow-buttons();
7729
}
7830

7931
.confirm-info-core-container {

‎webroot/src/components/PrivilegePurchaseInformationConfirmation/PrivilegePurchaseInformationConfirmation.vue

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -86,25 +86,28 @@
8686
</div>
8787
</div>
8888
<div v-if="areFormInputsSet" class="button-row">
89-
<InputButton
90-
:label="cancelText"
91-
:isTextLike="true"
92-
:aria-label="cancelText"
93-
class="icon icon-close-modal"
94-
@click="handleCancelClicked"
95-
/>
96-
<div class="right-cell">
89+
<div class="form-nav-buttons">
90+
<InputSubmit
91+
:formInput="formData.submit"
92+
class="form-nav-button"
93+
:label="$t('common.confirm')"
94+
:isEnabled="!isFormLoading"
95+
/>
9796
<InputButton
9897
:label="backText"
9998
:aria-label="backText"
100-
class="back-button"
99+
class="form-nav-button back-button"
101100
:isTransparent="true"
102101
@click="handleBackClicked"
103102
/>
104-
<InputSubmit
105-
:formInput="formData.submit"
106-
:label="$t('common.confirm')"
107-
:isEnabled="!isFormLoading"
103+
</div>
104+
<div class="form-override-buttons">
105+
<InputButton
106+
:label="cancelText"
107+
:isTextLike="true"
108+
:aria-label="cancelText"
109+
class="form-override-button icon icon-close-modal"
110+
@click="handleCancelClicked"
108111
/>
109112
</div>
110113
</div>

‎webroot/src/components/PrivilegePurchaseLicense/PrivilegePurchaseLicense.less

Lines changed: 1 addition & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -14,55 +14,7 @@
1414
width: 100%;
1515

1616
.button-row {
17-
position: fixed;
18-
bottom: 0;
19-
z-index: 3;
20-
display: flex;
21-
flex-direction: column-reverse;
22-
align-items: center;
23-
justify-content: center;
24-
width: 100%;
25-
margin-top: 2rem;
26-
padding-top: 1rem;
27-
background-color: @veryLightGrey;
28-
29-
@media @tabletWidth {
30-
position: unset;
31-
display: flex;
32-
flex-direction: row;
33-
align-items: flex-end;
34-
justify-content: space-between;
35-
width: 100%;
36-
margin-top: 2rem;
37-
background-color: unset;
38-
}
39-
40-
:deep(.input-container) {
41-
margin-bottom: 1rem;
42-
43-
@media @tabletWidth {
44-
margin-bottom: unset;
45-
}
46-
47-
input {
48-
width: 41vw;
49-
50-
@media @tabletWidth {
51-
width: unset;
52-
}
53-
}
54-
}
55-
56-
.right-cell {
57-
display: flex;
58-
flex-direction: row;
59-
align-items: flex-end;
60-
justify-content: space-between;
61-
62-
.back-button {
63-
margin-right: 1rem;
64-
}
65-
}
17+
.purchase-flow-buttons();
6618
}
6719

6820
.select-license-core-container {

‎webroot/src/components/PrivilegePurchaseLicense/PrivilegePurchaseLicense.vue

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -23,25 +23,28 @@
2323
</div>
2424
</div>
2525
<div class="button-row">
26-
<InputButton
27-
:label="cancelText"
28-
:isTextLike="true"
29-
:aria-label="cancelText"
30-
class="icon icon-close-modal"
31-
@click="handleCancelClicked"
32-
/>
33-
<div class="right-cell">
26+
<div class="form-nav-buttons">
27+
<InputSubmit
28+
:formInput="formData.submit"
29+
class="form-nav-button"
30+
:label="submitLabel"
31+
:isEnabled="!isFormLoading"
32+
/>
3433
<InputButton
3534
:label="backText"
3635
:aria-label="backText"
37-
class="back-button"
36+
class="form-nav-button back-button"
3837
:isTransparent="true"
3938
@click="handleBackClicked"
4039
/>
41-
<InputSubmit
42-
:formInput="formData.submit"
43-
:label="submitLabel"
44-
:isEnabled="!isFormLoading"
40+
</div>
41+
<div class="form-override-buttons">
42+
<InputButton
43+
:label="cancelText"
44+
:isTextLike="true"
45+
:aria-label="cancelText"
46+
class="form-override-button icon icon-close-modal"
47+
@click="handleCancelClicked"
4548
/>
4649
</div>
4750
</div>

0 commit comments

Comments
 (0)