@times-components/ts-components 1.185.1 → 1.186.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -284,8 +284,15 @@ export const OptaMatchStatsMomentum: React.FC<{
284
284
  });
285
285
 
286
286
  // HTML overlays for goal/card icons (positioned via percentage over the SVG).
287
+ // Render cards first, then goals — so goals paint on top when they share a minute.
287
288
  const overlays: React.ReactNode[] = [];
288
- momentumData.forEach(point => {
289
+ const eventPoints = momentumData.filter(
290
+ p => p.type === 'YC' || p.type === 'RC' || p.type === 'GOAL'
291
+ );
292
+ const sortedEvents = [...eventPoints].sort(
293
+ (a, b) => (a.type === 'GOAL' ? 1 : 0) - (b.type === 'GOAL' ? 1 : 0)
294
+ );
295
+ sortedEvents.forEach(point => {
289
296
  const xCenter = toX(point.min, point.half);
290
297
  const isHome = point.teamId ? point.teamId === homeTeamId : true;
291
298
  const teamName = isHome ? homeTeamName : awayTeamName;
@@ -161,6 +161,24 @@ exports[`OptaMatchStatsMomentum renders snapshot correctly 1`] = `
161
161
  <g />
162
162
  </svg>
163
163
  <div>
164
+ <div
165
+ class="sc-EHOje jxBDNz"
166
+ >
167
+ <div
168
+ aria-label="Yellow card for Home FC at 30 minutes"
169
+ role="img"
170
+ style="width: 10px; height: 12px; border-radius: 2px; background-color: rgb(243, 217, 43);"
171
+ />
172
+ </div>
173
+ <div
174
+ class="sc-EHOje jDNWuF"
175
+ >
176
+ <div
177
+ aria-label="Red card for Away United at 70 minutes"
178
+ role="img"
179
+ style="width: 10px; height: 12px; border-radius: 2px; background-color: rgb(235, 0, 31);"
180
+ />
181
+ </div>
164
182
  <div
165
183
  class="sc-EHOje dnzWbF"
166
184
  >
@@ -195,24 +213,6 @@ exports[`OptaMatchStatsMomentum renders snapshot correctly 1`] = `
195
213
  />
196
214
  </svg>
197
215
  </div>
198
- <div
199
- class="sc-EHOje jxBDNz"
200
- >
201
- <div
202
- aria-label="Yellow card for Home FC at 30 minutes"
203
- role="img"
204
- style="width: 10px; height: 12px; border-radius: 2px; background-color: rgb(243, 217, 43);"
205
- />
206
- </div>
207
- <div
208
- class="sc-EHOje jDNWuF"
209
- >
210
- <div
211
- aria-label="Red card for Away United at 70 minutes"
212
- role="img"
213
- style="width: 10px; height: 12px; border-radius: 2px; background-color: rgb(235, 0, 31);"
214
- />
215
- </div>
216
216
  </div>
217
217
  </div>
218
218
  <span
@@ -389,6 +389,24 @@ exports[`OptaMatchStatsMomentum renders snapshot with isApp=true 1`] = `
389
389
  <g />
390
390
  </svg>
391
391
  <div>
392
+ <div
393
+ class="sc-EHOje jxBDNz"
394
+ >
395
+ <div
396
+ aria-label="Yellow card for Home FC at 30 minutes"
397
+ role="img"
398
+ style="width: 10px; height: 12px; border-radius: 2px; background-color: rgb(243, 217, 43);"
399
+ />
400
+ </div>
401
+ <div
402
+ class="sc-EHOje jDNWuF"
403
+ >
404
+ <div
405
+ aria-label="Red card for Away United at 70 minutes"
406
+ role="img"
407
+ style="width: 10px; height: 12px; border-radius: 2px; background-color: rgb(235, 0, 31);"
408
+ />
409
+ </div>
392
410
  <div
393
411
  class="sc-EHOje dnzWbF"
394
412
  >
@@ -423,24 +441,6 @@ exports[`OptaMatchStatsMomentum renders snapshot with isApp=true 1`] = `
423
441
  />
424
442
  </svg>
425
443
  </div>
426
- <div
427
- class="sc-EHOje jxBDNz"
428
- >
429
- <div
430
- aria-label="Yellow card for Home FC at 30 minutes"
431
- role="img"
432
- style="width: 10px; height: 12px; border-radius: 2px; background-color: rgb(243, 217, 43);"
433
- />
434
- </div>
435
- <div
436
- class="sc-EHOje jDNWuF"
437
- >
438
- <div
439
- aria-label="Red card for Away United at 70 minutes"
440
- role="img"
441
- style="width: 10px; height: 12px; border-radius: 2px; background-color: rgb(235, 0, 31);"
442
- />
443
- </div>
444
444
  </div>
445
445
  </div>
446
446
  <span