Skip to content

Commit 907210c

Browse files
webstackdevwebstackdev
committed
Fixes to Uppy audio buttons
1 parent c1de43d commit 907210c

8 files changed

Lines changed: 241 additions & 93 deletions

File tree

‎src/components/Animations/Confetti/client/__tests__/index.spec.ts‎

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -165,14 +165,22 @@ describe('ConfettiAnimationElement', () => {
165165
element.fire()
166166

167167
expect(confettiCreateMock).toHaveBeenCalledTimes(1)
168-
expect(confettiInstanceMock).toHaveBeenCalledTimes(1)
168+
expect(confettiInstanceMock).toHaveBeenCalledTimes(2)
169169

170170
const args = confettiInstanceMock.mock.calls[0]?.[0]
171171
expect(args).toEqual(
172172
expect.objectContaining({
173173
particleCount: expect.any(Number),
174174
spread: expect.any(Number),
175175
startVelocity: expect.any(Number),
176+
shapes: ['star'],
177+
})
178+
)
179+
180+
const accentArgs = confettiInstanceMock.mock.calls[1]?.[0]
181+
expect(accentArgs).toEqual(
182+
expect.objectContaining({
183+
shapes: ['circle'],
176184
})
177185
)
178186
})
@@ -220,7 +228,7 @@ describe('ConfettiAnimationElement', () => {
220228
controllerArgs?.onPlay()
221229

222230
element.fire()
223-
expect(confettiInstanceMock).toHaveBeenCalledTimes(1)
231+
expect(confettiInstanceMock).toHaveBeenCalledTimes(2)
224232
})
225233
})
226234

@@ -234,8 +242,9 @@ describe('ConfettiAnimationElement', () => {
234242
})
235243
)
236244

237-
expect(confettiInstanceMock).toHaveBeenCalledTimes(1)
238-
expect(confettiInstanceMock).toHaveBeenCalledWith(
245+
expect(confettiInstanceMock).toHaveBeenCalledTimes(2)
246+
expect(confettiInstanceMock).toHaveBeenNthCalledWith(
247+
1,
239248
expect.objectContaining({ particleCount: 12 })
240249
)
241250
})
@@ -272,7 +281,7 @@ describe('ConfettiAnimationElement', () => {
272281
})
273282
)
274283

275-
expect(confettiInstanceMock).toHaveBeenCalledTimes(1)
284+
expect(confettiInstanceMock).toHaveBeenCalledTimes(2)
276285

277286
const callArgs = confettiInstanceMock.mock.calls[0]?.[0]
278287
expect(callArgs).toEqual(expect.objectContaining({ particleCount: 12 }))
@@ -290,13 +299,22 @@ describe('ConfettiAnimationElement', () => {
290299
shapes: ['star'],
291300
})
292301

293-
expect(confettiInstanceMock).toHaveBeenCalledTimes(1)
294-
expect(confettiInstanceMock).toHaveBeenCalledWith(
302+
expect(confettiInstanceMock).toHaveBeenCalledTimes(2)
303+
expect(confettiInstanceMock).toHaveBeenNthCalledWith(
304+
1,
295305
expect.objectContaining({
296306
colors: ['#bada55', '#ff0000'],
297307
shapes: ['star'],
298308
})
299309
)
310+
311+
expect(confettiInstanceMock).toHaveBeenNthCalledWith(
312+
2,
313+
expect.objectContaining({
314+
colors: ['#bada55', '#ff0000'],
315+
shapes: ['circle'],
316+
})
317+
)
300318
})
301319
})
302320
})

‎src/components/Animations/Confetti/client/index.ts‎

Lines changed: 47 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,21 @@ export type ConfettiFireOptions = {
4747
*/
4848
startVelocity?: number
4949

50+
/**
51+
* How long each particle should animate for, in frames.
52+
*/
53+
ticks?: number
54+
55+
/**
56+
* Downward acceleration to apply to particles.
57+
*/
58+
gravity?: number
59+
60+
/**
61+
* How quickly particle velocity decays over time.
62+
*/
63+
decay?: number
64+
5065
/**
5166
* Scale factor for each confetti particle. Use decimals to make the confetti
5267
* smaller. (default: 1)
@@ -72,6 +87,12 @@ export type ConfettiFireOptions = {
7287

7388
type ConfettiInstance = ReturnType<typeof createConfetti>
7489

90+
const defaultConfettiColors = ['#003d86', '#dc2626', '#facc15']
91+
92+
const toAccentShapes = (shapes: ConfettiShape[]): ConfettiShape[] => {
93+
return shapes.includes('star') ? ['circle'] : shapes
94+
}
95+
7596
export class ConfettiAnimationElement extends LitElement {
7697
private initialized = false
7798
private animationController: AnimationControllerHandle | undefined
@@ -175,23 +196,40 @@ export class ConfettiAnimationElement extends LitElement {
175196

176197
const {
177198
origin,
178-
particleCount = 50,
179-
spread = 70,
180-
startVelocity = 45,
181-
scalar = 1,
182-
colors,
183-
shapes = ['square', 'circle'],
199+
particleCount = 40,
200+
spread = 360,
201+
startVelocity = 30,
202+
ticks = 50,
203+
gravity = 0,
204+
decay = 0.94,
205+
scalar = 1.2,
206+
colors = defaultConfettiColors,
207+
shapes = ['star'],
184208
} = options
185209

186-
void this.confettiInstance({
187-
particleCount,
210+
const baseBurstOptions = {
188211
spread,
189212
startVelocity,
190-
scalar,
213+
ticks,
214+
gravity,
215+
decay,
191216
origin,
192217
colors,
218+
}
219+
220+
void this.confettiInstance({
221+
...baseBurstOptions,
222+
particleCount,
223+
scalar,
193224
shapes,
194225
})
226+
227+
void this.confettiInstance({
228+
...baseBurstOptions,
229+
particleCount: Math.max(10, Math.round(particleCount / 4)),
230+
scalar: Math.max(0.75, scalar * 0.625),
231+
shapes: toAccentShapes(shapes),
232+
})
195233
} catch (error) {
196234
handleScriptError(error, context)
197235
}

‎src/components/Animations/Confetti/index.astro‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,12 @@
66
*/
77
export interface Props {
88
/** Additional classes to add to the component wrapper */
9-
classes: string
9+
classes?: string
10+
/** Additional classes to add to the canvas element */
11+
canvasClasses?: string
1012
}
1113
12-
const { classes } = Astro.props
14+
const { classes = '', canvasClasses = '' } = Astro.props
1315
---
1416

1517
<confetti-animation
@@ -19,7 +21,10 @@ const { classes } = Astro.props
1921
<canvas
2022
data-confetti-canvas
2123
aria-hidden="true"
22-
class="absolute inset-0 w-full h-full pointer-events-none z-(--z-content-overlay)"
24+
class:list={[
25+
'absolute inset-0 w-full h-full pointer-events-none z-(--z-modal)',
26+
canvasClasses,
27+
]}
2328
></canvas>
2429
<slot />
2530
</confetti-animation>

‎src/components/Pages/Contact/client/__tests__/formSubmission.spec.ts‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@ describe('ContactForm submission', () => {
6767
expect(resolveContactPreviewState('?contactState=error')).toBe('error')
6868
expect(resolveContactPreviewState('?contactState=loading')).toBe('loading')
6969
expect(resolveContactPreviewState('?contactState=validation')).toBe('validation')
70+
expect(resolveContactPreviewState('?contactState=confetti')).toBe('confetti')
7071
expect(resolveContactPreviewState('?contactState=unknown')).toBeNull()
7172
expect(resolveContactPreviewState('')).toBeNull()
7273
})
@@ -158,6 +159,20 @@ describe('ContactForm submission', () => {
158159
})
159160
})
160161

162+
it('applies confetti preview state without disabling the submit button', async () => {
163+
await renderContactForm(async context => {
164+
applyContactPreviewState(context.elements, {
165+
state: 'confetti',
166+
rootElement: context.element,
167+
})
168+
169+
expect(context.element.getAttribute('data-contact-state')).toBe('idle')
170+
expect(context.element.getAttribute('data-contact-preview-mode')).toBe('confetti')
171+
expect(context.elements.submitBtn.disabled).toBe(false)
172+
expect(context.elements.messages.style.display).toBe('none')
173+
})
174+
})
175+
161176
it('submits successfully and resets UI state', async () => {
162177
await renderContactForm(async context => {
163178
fillValidFields(context)
@@ -200,6 +215,33 @@ describe('ContactForm submission', () => {
200215
})
201216
})
202217

218+
it('runs the confetti preview sequence without submitting the form', async () => {
219+
await renderContactForm(async context => {
220+
applyContactPreviewState(context.elements, {
221+
state: 'confetti',
222+
rootElement: context.element,
223+
})
224+
225+
let confettiEvent: Event | undefined
226+
context.elements.submitBtn.addEventListener('confetti:fire', event => {
227+
confettiEvent = event
228+
})
229+
230+
const submitEvent = new context.window.Event('submit', { bubbles: true, cancelable: true })
231+
context.elements.form.dispatchEvent(submitEvent)
232+
233+
await flushPromises()
234+
235+
expect(contactSubmitMock).not.toHaveBeenCalled()
236+
expect(context.element.getAttribute('data-contact-state')).toBe('success')
237+
expect(context.elements.submitBtn.disabled).toBe(false)
238+
expect(context.elements.messages.style.display).toBe('block')
239+
expect(context.elements.successMessage.classList.contains('hidden')).toBe(false)
240+
expect(context.elements.errorMessage.classList.contains('hidden')).toBe(true)
241+
expect(confettiEvent).toBeDefined()
242+
})
243+
})
244+
203245
it('displays error message when server rejects submission', async () => {
204246
await renderContactForm(async context => {
205247
fillValidFields(context)

‎src/components/Pages/Contact/client/formSubmission.ts‎

Lines changed: 62 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,12 @@ import { queryContactFormGeneratedFieldError, queryContactFormGenericFields } fr
1616

1717
export type ContactUiState = 'idle' | 'loading' | 'success' | 'error' | 'validation'
1818

19-
export const contactPreviewStates = ['loading', 'success', 'error', 'validation'] as const
19+
export const contactPreviewStates = ['loading', 'success', 'error', 'validation', 'confetti'] as const
2020

2121
type ContactPreviewState = (typeof contactPreviewStates)[number]
22+
type ContactPreviewMode = 'confetti'
23+
24+
const contactPreviewModeAttribute = 'data-contact-preview-mode'
2225

2326
interface SubmissionControllers {
2427
labelController: LabelController
@@ -48,6 +51,26 @@ const setContactState = (
4851
rootElement?.setAttribute('data-contact-state', state)
4952
}
5053

54+
const setContactPreviewMode = (
55+
rootElement: HTMLElement | null | undefined,
56+
previewMode?: ContactPreviewMode
57+
): void => {
58+
if (!rootElement) {
59+
return
60+
}
61+
62+
if (previewMode) {
63+
rootElement.setAttribute(contactPreviewModeAttribute, previewMode)
64+
return
65+
}
66+
67+
rootElement.removeAttribute(contactPreviewModeAttribute)
68+
}
69+
70+
const isConfettiPreviewMode = (rootElement: HTMLElement | null | undefined): boolean => {
71+
return rootElement?.getAttribute(contactPreviewModeAttribute) === 'confetti'
72+
}
73+
5174
const showSuccessMessage = (elements: ContactFormElements): void => {
5275
elements.messages.style.display = 'block'
5376
elements.successMessage.classList.remove('hidden')
@@ -62,6 +85,15 @@ const showErrorMessage = (elements: ContactFormElements, message: string): void
6285
elements.errorText.textContent = message
6386
}
6487

88+
const fireConfetti = (elements: ContactFormElements): void => {
89+
elements.submitBtn.dispatchEvent(
90+
new CustomEvent('confetti:fire', {
91+
bubbles: true,
92+
composed: true,
93+
})
94+
)
95+
}
96+
6597
const setLoading = (elements: ContactFormElements, loading: boolean): void => {
6698
elements.submitBtn.disabled = loading
6799

@@ -114,6 +146,7 @@ export const applyContactPreviewState = (
114146
}
115147
): void => {
116148
resetSubmissionFeedback(elements)
149+
setContactPreviewMode(options.rootElement, options.state === 'confetti' ? 'confetti' : undefined)
117150

118151
switch (options.state) {
119152
case 'loading':
@@ -139,9 +172,29 @@ export const applyContactPreviewState = (
139172
showErrorMessage(elements, 'Please correct the highlighted fields and try again.')
140173
setContactState(options.rootElement, 'validation')
141174
return
175+
176+
case 'confetti':
177+
setContactState(options.rootElement, 'idle')
178+
return
142179
}
143180
}
144181

182+
const runConfettiPreviewSequence = async (
183+
elements: ContactFormElements,
184+
rootElement: HTMLElement | null | undefined
185+
): Promise<void> => {
186+
hideErrorBanner(elements.formErrorBanner)
187+
hideMessages(elements)
188+
setLoading(elements, true)
189+
setContactState(rootElement, 'loading')
190+
191+
await Promise.resolve()
192+
193+
showSuccessMessage(elements)
194+
setContactState(rootElement, 'success')
195+
fireConfetti(elements)
196+
}
197+
145198
const runFieldValidations = (elements: ContactFormElements): boolean => {
146199
const validations = [
147200
validateEmailField(elements.fields.email),
@@ -205,6 +258,13 @@ export const initFormSubmission = (
205258
addScriptBreadcrumb(context)
206259

207260
try {
261+
if (isConfettiPreviewMode(controllers.rootElement)) {
262+
resetSubmissionFeedback(elements)
263+
await runConfettiPreviewSequence(elements, controllers.rootElement)
264+
setLoading(elements, false)
265+
return
266+
}
267+
208268
Object.values(elements.fields).forEach(clearFieldFeedback)
209269
const isValid = runFieldValidations(elements)
210270

@@ -240,12 +300,7 @@ export const initFormSubmission = (
240300
showSuccessMessage(elements)
241301
setContactState(controllers.rootElement, 'success')
242302

243-
elements.submitBtn.dispatchEvent(
244-
new CustomEvent('confetti:fire', {
245-
bubbles: true,
246-
composed: true,
247-
})
248-
)
303+
fireConfetti(elements)
249304

250305
resetFormState(elements, controllers)
251306
} catch (error) {

0 commit comments

Comments
 (0)