Skip to content

Commit 9c3a5e4

Browse files
webstackdevwebstackdev
committed
Styling and save handling updates to consent form modal
1 parent 747ab73 commit 9c3a5e4

5 files changed

Lines changed: 50 additions & 20 deletions

File tree

‎src/components/Pages/Consent/client/__tests__/index.spec.ts‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@ const consentContent = {
2727
description: 'Manage your cookie preferences.',
2828
},
2929
intro: 'Intro content',
30+
introLinks: {
31+
privacyPolicyText: 'Privacy Policy',
32+
myDataText: 'My Data',
33+
},
3034
essential: {
3135
heading: 'Essential Data',
3236
subheading: 'Always active',
@@ -68,7 +72,7 @@ const consentContent = {
6872
questions: {
6973
heading: 'Questions',
7074
subheading: 'Questions subheading',
71-
metods: [],
75+
methods: [],
7276
},
7377
}
7478

@@ -352,18 +356,20 @@ describe('ConsentPreferencesElement', () => {
352356
const functionalCheckbox = window.document.getElementById(
353357
'functional-cookies'
354358
) as HTMLInputElement | null
355-
const contactLink = window.document.querySelector('a[href="/contact/"]') as HTMLAnchorElement | null
359+
const contactLink = window.document.createElement('a')
360+
contactLink.href = '/contact/'
361+
contactLink.textContent = 'Contact'
362+
window.document.body.append(contactLink)
356363
const dialog = window.document.getElementById('consent-unsaved-dialog') as HTMLElement | null
357364

358365
expect(functionalCheckbox).not.toBeNull()
359-
expect(contactLink).not.toBeNull()
360366
expect(dialog).not.toBeNull()
361367

362368
functionalCheckbox!.checked = true
363369
functionalCheckbox!.dispatchEvent(new window.Event('change', { bubbles: true }))
364370

365371
const navigationEvent = new window.MouseEvent('click', { bubbles: true, cancelable: true })
366-
contactLink!.dispatchEvent(navigationEvent)
372+
contactLink.dispatchEvent(navigationEvent)
367373

368374
expect(navigationEvent.defaultPrevented).toBe(true)
369375
expect(dialog!.hasAttribute('open')).toBe(true)
@@ -375,19 +381,21 @@ describe('ConsentPreferencesElement', () => {
375381
const functionalCheckbox = window.document.getElementById(
376382
'functional-cookies'
377383
) as HTMLInputElement | null
378-
const contactLink = window.document.querySelector('a[href="/contact/"]') as HTMLAnchorElement | null
384+
const contactLink = window.document.createElement('a')
385+
contactLink.href = '/contact/'
386+
contactLink.textContent = 'Contact'
387+
window.document.body.append(contactLink)
379388
const discardBtn = window.document.getElementById('consent-unsaved-discard') as HTMLButtonElement | null
380389
const dialog = window.document.getElementById('consent-unsaved-dialog') as HTMLElement | null
381390

382391
expect(functionalCheckbox).not.toBeNull()
383-
expect(contactLink).not.toBeNull()
384392
expect(discardBtn).not.toBeNull()
385393
expect(dialog).not.toBeNull()
386394

387395
functionalCheckbox!.checked = true
388396
functionalCheckbox!.dispatchEvent(new window.Event('change', { bubbles: true }))
389397

390-
contactLink!.dispatchEvent(new window.MouseEvent('click', { bubbles: true, cancelable: true }))
398+
contactLink.dispatchEvent(new window.MouseEvent('click', { bubbles: true, cancelable: true }))
391399
expect(dialog!.hasAttribute('open')).toBe(true)
392400

393401
discardBtn!.dispatchEvent(new window.MouseEvent('click', { bubbles: true }))

‎src/components/Pages/Consent/client/__tests__/selectors.spec.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,10 @@ const consentContent = {
2323
description: 'Manage your cookie preferences.',
2424
},
2525
intro: 'Intro content',
26+
introLinks: {
27+
privacyPolicyText: 'Privacy Policy',
28+
myDataText: 'My Data',
29+
},
2630
essential: {
2731
heading: 'Essential Data',
2832
subheading: 'Always active',
@@ -64,7 +68,7 @@ const consentContent = {
6468
questions: {
6569
heading: 'Questions',
6670
subheading: 'Questions subheading',
67-
metods: [],
71+
methods: [],
6872
},
6973
}
7074

‎src/components/Pages/Consent/client/index.ts‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,12 @@ export class ConsentPreferencesElement extends LitElement {
4141

4242
private static readonly saveButtonEnabledClasses = ['bg-page-inverse', 'hover:bg-secondary-offset']
4343

44+
private static readonly saveButtonSavingClasses = [
45+
'bg-secondary-offset',
46+
'hover:bg-secondary-offset',
47+
'cursor-progress',
48+
]
49+
4450
private allowAllBtn!: HTMLButtonElement
4551
private denyAllBtn!: HTMLButtonElement
4652
private saveBtn!: HTMLButtonElement
@@ -249,7 +255,8 @@ export class ConsentPreferencesElement extends LitElement {
249255
async () => {
250256
const saved = await this.savePreferencesWithDelay()
251257
if (saved) {
252-
this.navigateToPendingUrl()
258+
this.closeUnsavedDialog()
259+
this.pendingNavigationUrl = null
253260
}
254261
},
255262
this
@@ -301,13 +308,13 @@ export class ConsentPreferencesElement extends LitElement {
301308
}
302309
}
303310

304-
document.addEventListener('click', this.documentClickHandler, true)
311+
window.addEventListener('click', this.documentClickHandler, true)
305312
window.addEventListener('beforeunload', this.beforeUnloadHandler)
306313
}
307314

308315
private removeUnsavedChangesProtection(): void {
309316
if (this.documentClickHandler) {
310-
document.removeEventListener('click', this.documentClickHandler, true)
317+
window.removeEventListener('click', this.documentClickHandler, true)
311318
this.documentClickHandler = null
312319
}
313320

@@ -353,6 +360,8 @@ export class ConsentPreferencesElement extends LitElement {
353360
}
354361

355362
event.preventDefault()
363+
event.stopPropagation()
364+
event.stopImmediatePropagation()
356365
this.pendingNavigationUrl = destination.toString()
357366
this.openUnsavedDialog()
358367
}
@@ -457,8 +466,14 @@ export class ConsentPreferencesElement extends LitElement {
457466

458467
const disabledClasses = ConsentPreferencesElement.saveButtonDisabledClasses
459468
const enabledClasses = ConsentPreferencesElement.saveButtonEnabledClasses
469+
const savingClasses = ConsentPreferencesElement.saveButtonSavingClasses
470+
471+
this.saveBtn.classList.remove(...disabledClasses, ...enabledClasses, ...savingClasses)
460472

461-
this.saveBtn.classList.remove(...disabledClasses, ...enabledClasses)
473+
if (this.isSavingPreferences) {
474+
this.saveBtn.classList.add(...savingClasses)
475+
return
476+
}
462477

463478
if (!isSaveDisabled) {
464479
this.saveBtn.classList.add(...enabledClasses)

‎src/components/Pages/Consent/index.astro‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,9 @@ const { content } = Astro.props
101101
aria-labelledby="consent-preferences__title"
102102
aria-describedby="consent-preferences__settings-desc"
103103
>
104+
<p id="consent-preferences__settings-desc" class="sr-only">
105+
Adjust your consent settings using the options below.
106+
</p>
104107
<div class="px-6 pt-8 pb-2">
105108
{/* Introduction */}
106109
<div class="bg-page-offset rounded-xl p-6 mb-4">

‎src/components/Pages/Consent/unsaved.astro‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,36 +2,36 @@
22
id="consent-unsaved-dialog"
33
aria-labelledby="consent-unsaved-title"
44
aria-describedby="consent-unsaved-description"
5-
class="bg-content-inverse border border-trim rounded-md p-4 max-w-xl w-[min(42rem,90vw)]"
5+
class="mx-auto mt-12 bg-content-inverse-active rounded-md p-4"
66
>
77
<div class="flex items-start justify-between gap-4">
8-
<h2 id="consent-unsaved-title" class="text-xl font-bold">Unsaved preference changes</h2>
8+
<h2 id="consent-unsaved-title" class="text-xl font-bold text-content-active">Unsaved preference changes</h2>
99
<button
1010
id="consent-unsaved-stay"
1111
type="button"
12-
class="hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none"
12+
class="inline-flex items-center justify-center rounded-full px-3 py-1 bg-page-offset text-page-inverse hover:bg-content-inverse-active transition-colors duration-200 focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 ml-2"
1313
>
1414
Stay
1515
</button>
1616
</div>
1717

18-
<p id="consent-unsaved-description" class="mt-2 text-base">
19-
You have unsaved consent changes. Save before leaving this page?
18+
<p id="consent-unsaved-description" class="text-base text-center mt-4 mb-6">
19+
You have unsaved consent changes.<br />Save before leaving this page?
2020
</p>
2121

22-
<div class="mt-4 flex items-center gap-3">
22+
<div class="mt-4 flex items-center justify-center gap-3">
2323
<button
2424
id="consent-unsaved-save"
2525
type="button"
26-
class="inline-flex items-center justify-center rounded-md px-4 py-2 bg-spotlight text-content-inverse hover:opacity-90 focus:outline-none"
26+
class="inline-flex items-center justify-center rounded-md px-4 py-2 bg-page-inverse text-content-inverse hover:bg-page-active transition-colors duration-200 focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none"
2727
>
2828
Save changes
2929
</button>
3030

3131
<button
3232
id="consent-unsaved-discard"
3333
type="button"
34-
class="hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none"
34+
class="inline-flex items-center justify-center rounded-md px-4 py-2 bg-warning text-content-inverse hover:bg-warning-offset transition-colors duration-200 focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none"
3535
>
3636
Discard changes
3737
</button>

0 commit comments

Comments
 (0)