@times-components/ts-components 1.20.0 → 1.22.1

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.
Files changed (48) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/README.md +1 -1
  3. package/dist/components/article-flag/ArticleFlag.d.ts +17 -6
  4. package/dist/components/article-flag/ArticleFlag.js +28 -20
  5. package/dist/components/article-flag/ArticleFlag.stories.js +21 -3
  6. package/dist/components/article-flag/LiveArticleFlag.js +13 -6
  7. package/dist/components/article-flag/__tests__/ArticleFlag.test.js +35 -1
  8. package/dist/components/article-flag/styles.d.ts +1 -0
  9. package/dist/components/article-flag/styles.js +6 -1
  10. package/dist/components/in-article-puff/InArticlePuff.d.ts +1 -1
  11. package/dist/components/in-article-puff/InArticlePuff.js +6 -6
  12. package/dist/components/in-article-puff/InArticlePuff.stories.js +3 -3
  13. package/dist/components/updated-timestamp/UpdatedTimestamp.d.ts +4 -0
  14. package/dist/components/updated-timestamp/UpdatedTimestamp.js +21 -0
  15. package/dist/components/updated-timestamp/UpdatedTimestamp.stories.d.ts +1 -0
  16. package/dist/components/updated-timestamp/UpdatedTimestamp.stories.js +13 -0
  17. package/dist/components/updated-timestamp/__tests__/UpdatedTimestamp.test.d.ts +1 -0
  18. package/dist/components/updated-timestamp/__tests__/UpdatedTimestamp.test.js +34 -0
  19. package/dist/components/updated-timestamp/styles.d.ts +2 -0
  20. package/dist/components/updated-timestamp/styles.js +14 -0
  21. package/dist/helpers/time/UpdatedTimeProvider.d.ts +5 -0
  22. package/dist/helpers/time/UpdatedTimeProvider.js +9 -0
  23. package/dist/helpers/time/__tests__/UpdatedTimeProvider.test.d.ts +1 -0
  24. package/dist/helpers/time/__tests__/UpdatedTimeProvider.test.js +17 -0
  25. package/dist/helpers/tracking/TrackingContextProvider.js +9 -1
  26. package/dist/index.d.ts +2 -0
  27. package/dist/index.js +3 -1
  28. package/package.json +6 -5
  29. package/rnw.js +1 -1
  30. package/src/components/article-flag/ArticleFlag.stories.tsx +28 -2
  31. package/src/components/article-flag/ArticleFlag.tsx +39 -31
  32. package/src/components/article-flag/LiveArticleFlag.tsx +19 -9
  33. package/src/components/article-flag/__tests__/ArticleFlag.test.tsx +56 -0
  34. package/src/components/article-flag/__tests__/__snapshots__/ArticleFlag.test.tsx.snap +273 -47
  35. package/src/components/article-flag/__tests__/__snapshots__/LiveArticleFlag.test.tsx.snap +39 -27
  36. package/src/components/article-flag/styles.ts +6 -0
  37. package/src/components/article-header/__tests__/__snapshots__/ArticleHeader.test.tsx.snap +13 -9
  38. package/src/components/in-article-puff/InArticlePuff.stories.tsx +2 -2
  39. package/src/components/in-article-puff/InArticlePuff.tsx +6 -6
  40. package/src/components/updated-timestamp/UpdatedTimestamp.stories.tsx +18 -0
  41. package/src/components/updated-timestamp/UpdatedTimestamp.tsx +38 -0
  42. package/src/components/updated-timestamp/__tests__/UpdatedTimestamp.test.tsx +50 -0
  43. package/src/components/updated-timestamp/__tests__/__snapshots__/UpdatedTimestamp.test.tsx.snap +11 -0
  44. package/src/components/updated-timestamp/styles.ts +15 -0
  45. package/src/helpers/time/UpdatedTimeProvider.tsx +17 -0
  46. package/src/helpers/time/__tests__/UpdatedTimeProvider.test.tsx +23 -0
  47. package/src/helpers/tracking/TrackingContextProvider.tsx +10 -0
  48. package/src/index.ts +6 -0
package/src/components/article-flag/__tests__/__snapshots__/ArticleFlag.test.tsx.snap CHANGED
@@ -13,12 +13,12 @@ exports[`ArticleFlag renders a red article flag 1`] = `
13
13
  class="sc-bdVaJa fXEEbM"
14
14
  >
15
15
  <div
16
- class="sc-htpNat ZOZQE"
16
+ class="sc-bxivhb jYSxqD"
17
17
  color="red"
18
18
  />
19
19
  <div
20
20
  aria-label="Coloured Red Flag"
21
- class="sc-ifAKCX dTECV"
21
+ class="sc-EHOje ccbsVi"
22
22
  color="red"
23
23
  data-testid="flag-Coloured Red"
24
24
  >
@@ -36,12 +36,12 @@ exports[`ArticleFlag renders an article flag 1`] = `
36
36
  class="sc-bdVaJa fXEEbM"
37
37
  >
38
38
  <div
39
- class="sc-htpNat qvwfW"
39
+ class="sc-bxivhb kvBniC"
40
40
  color=""
41
41
  />
42
42
  <div
43
43
  aria-label="No Colour Flag"
44
- class="sc-ifAKCX juPnZa"
44
+ class="sc-EHOje dihMln"
45
45
  color=""
46
46
  data-testid="flag-No Colour"
47
47
  >
@@ -56,21 +56,21 @@ exports[`ArticleFlag renders multiple article flags 1`] = `
56
56
  <body>
57
57
  <div>
58
58
  <div
59
- class="sc-gzVnrw kpMYNz"
59
+ class="sc-htoDjs OefKN"
60
60
  >
61
61
  <div
62
- class="sc-bZQynM fMCtl"
62
+ class="sc-gzVnrw kAkVRf"
63
63
  >
64
64
  <div
65
65
  class="sc-bdVaJa fXEEbM"
66
66
  >
67
67
  <div
68
- class="sc-htpNat fugARQ"
68
+ class="sc-bxivhb cQXhxF"
69
69
  color="#3C81BE"
70
70
  />
71
71
  <div
72
72
  aria-label="updated Flag"
73
- class="sc-ifAKCX hSeRZN"
73
+ class="sc-EHOje iWbzHt"
74
74
  color="#3C81BE"
75
75
  data-testid="flag-updated"
76
76
  >
@@ -79,18 +79,18 @@ exports[`ArticleFlag renders multiple article flags 1`] = `
79
79
  </div>
80
80
  </div>
81
81
  <div
82
- class="sc-bZQynM fMCtl"
82
+ class="sc-gzVnrw kAkVRf"
83
83
  >
84
84
  <div
85
85
  class="sc-bdVaJa fXEEbM"
86
86
  >
87
87
  <div
88
- class="sc-htpNat dZoUoM"
88
+ class="sc-bxivhb iUYsYd"
89
89
  color="#C51D24"
90
90
  />
91
91
  <div
92
92
  aria-label="exclusive Flag"
93
- class="sc-ifAKCX fupmhj"
93
+ class="sc-EHOje jaegbj"
94
94
  color="#C51D24"
95
95
  data-testid="flag-exclusive"
96
96
  >
@@ -99,18 +99,18 @@ exports[`ArticleFlag renders multiple article flags 1`] = `
99
99
  </div>
100
100
  </div>
101
101
  <div
102
- class="sc-bZQynM fMCtl"
102
+ class="sc-gzVnrw kAkVRf"
103
103
  >
104
104
  <div
105
105
  class="sc-bdVaJa fXEEbM"
106
106
  >
107
107
  <div
108
- class="sc-htpNat jkDJOE"
108
+ class="sc-bxivhb beSIBk"
109
109
  color="#E34605"
110
110
  />
111
111
  <div
112
112
  aria-label="new Flag"
113
- class="sc-ifAKCX iquuBv"
113
+ class="sc-EHOje fHTjcy"
114
114
  color="#E34605"
115
115
  data-testid="flag-new"
116
116
  >
@@ -119,18 +119,18 @@ exports[`ArticleFlag renders multiple article flags 1`] = `
119
119
  </div>
120
120
  </div>
121
121
  <div
122
- class="sc-bZQynM fMCtl"
122
+ class="sc-gzVnrw kAkVRf"
123
123
  >
124
124
  <div
125
125
  class="sc-bdVaJa fXEEbM"
126
126
  >
127
127
  <div
128
- class="sc-htpNat gaRHEk"
128
+ class="sc-bxivhb hdKGZm"
129
129
  color="#4D4D4D"
130
130
  />
131
131
  <div
132
132
  aria-label="sponsored Flag"
133
- class="sc-ifAKCX fzZyiZ"
133
+ class="sc-EHOje hRBZkE"
134
134
  color="#4D4D4D"
135
135
  data-testid="flag-sponsored"
136
136
  >
@@ -139,18 +139,18 @@ exports[`ArticleFlag renders multiple article flags 1`] = `
139
139
  </div>
140
140
  </div>
141
141
  <div
142
- class="sc-bZQynM fMCtl"
142
+ class="sc-gzVnrw kAkVRf"
143
143
  >
144
144
  <div
145
145
  class="sc-bdVaJa fXEEbM"
146
146
  >
147
147
  <div
148
- class="sc-htpNat fRxTiY"
148
+ class="sc-bxivhb iClafV"
149
149
  color="#696969"
150
150
  />
151
151
  <div
152
152
  aria-label="long read Flag"
153
- class="sc-ifAKCX cRBzVF"
153
+ class="sc-EHOje iFYRKM"
154
154
  color="#696969"
155
155
  data-testid="flag-long read"
156
156
  >
@@ -167,24 +167,24 @@ exports[`ArticleFlag renders multiple article flags in a container 1`] = `
167
167
  <body>
168
168
  <div>
169
169
  <div
170
- class="sc-htoDjs gNxXwX"
170
+ class="sc-dnqmqq gkiwaN"
171
171
  >
172
172
  <div
173
- class="sc-gzVnrw kpMYNz"
173
+ class="sc-htoDjs OefKN"
174
174
  >
175
175
  <div
176
- class="sc-bZQynM fMCtl"
176
+ class="sc-gzVnrw kAkVRf"
177
177
  >
178
178
  <div
179
179
  class="sc-bdVaJa fXEEbM"
180
180
  >
181
181
  <div
182
- class="sc-htpNat fugARQ"
182
+ class="sc-bxivhb cQXhxF"
183
183
  color="#3C81BE"
184
184
  />
185
185
  <div
186
186
  aria-label="updated Flag"
187
- class="sc-ifAKCX hSeRZN"
187
+ class="sc-EHOje iWbzHt"
188
188
  color="#3C81BE"
189
189
  data-testid="flag-updated"
190
190
  >
@@ -193,18 +193,18 @@ exports[`ArticleFlag renders multiple article flags in a container 1`] = `
193
193
  </div>
194
194
  </div>
195
195
  <div
196
- class="sc-bZQynM fMCtl"
196
+ class="sc-gzVnrw kAkVRf"
197
197
  >
198
198
  <div
199
199
  class="sc-bdVaJa fXEEbM"
200
200
  >
201
201
  <div
202
- class="sc-htpNat dZoUoM"
202
+ class="sc-bxivhb iUYsYd"
203
203
  color="#C51D24"
204
204
  />
205
205
  <div
206
206
  aria-label="exclusive Flag"
207
- class="sc-ifAKCX fupmhj"
207
+ class="sc-EHOje jaegbj"
208
208
  color="#C51D24"
209
209
  data-testid="flag-exclusive"
210
210
  >
@@ -213,18 +213,18 @@ exports[`ArticleFlag renders multiple article flags in a container 1`] = `
213
213
  </div>
214
214
  </div>
215
215
  <div
216
- class="sc-bZQynM fMCtl"
216
+ class="sc-gzVnrw kAkVRf"
217
217
  >
218
218
  <div
219
219
  class="sc-bdVaJa fXEEbM"
220
220
  >
221
221
  <div
222
- class="sc-htpNat jkDJOE"
222
+ class="sc-bxivhb beSIBk"
223
223
  color="#E34605"
224
224
  />
225
225
  <div
226
226
  aria-label="new Flag"
227
- class="sc-ifAKCX iquuBv"
227
+ class="sc-EHOje fHTjcy"
228
228
  color="#E34605"
229
229
  data-testid="flag-new"
230
230
  >
@@ -233,18 +233,18 @@ exports[`ArticleFlag renders multiple article flags in a container 1`] = `
233
233
  </div>
234
234
  </div>
235
235
  <div
236
- class="sc-bZQynM fMCtl"
236
+ class="sc-gzVnrw kAkVRf"
237
237
  >
238
238
  <div
239
239
  class="sc-bdVaJa fXEEbM"
240
240
  >
241
241
  <div
242
- class="sc-htpNat gaRHEk"
242
+ class="sc-bxivhb hdKGZm"
243
243
  color="#4D4D4D"
244
244
  />
245
245
  <div
246
246
  aria-label="sponsored Flag"
247
- class="sc-ifAKCX fzZyiZ"
247
+ class="sc-EHOje hRBZkE"
248
248
  color="#4D4D4D"
249
249
  data-testid="flag-sponsored"
250
250
  >
@@ -253,18 +253,18 @@ exports[`ArticleFlag renders multiple article flags in a container 1`] = `
253
253
  </div>
254
254
  </div>
255
255
  <div
256
- class="sc-bZQynM fMCtl"
256
+ class="sc-gzVnrw kAkVRf"
257
257
  >
258
258
  <div
259
259
  class="sc-bdVaJa fXEEbM"
260
260
  >
261
261
  <div
262
- class="sc-htpNat fRxTiY"
262
+ class="sc-bxivhb iClafV"
263
263
  color="#696969"
264
264
  />
265
265
  <div
266
266
  aria-label="long read Flag"
267
- class="sc-ifAKCX cRBzVF"
267
+ class="sc-EHOje iFYRKM"
268
268
  color="#696969"
269
269
  data-testid="flag-long read"
270
270
  >
@@ -278,6 +278,117 @@ exports[`ArticleFlag renders multiple article flags in a container 1`] = `
278
278
  </body>
279
279
  `;
280
280
 
281
+ exports[`ArticleFlag renders multiple article flags with override colours 1`] = `
282
+ <body>
283
+ <div>
284
+ <div
285
+ class="sc-htoDjs OefKN"
286
+ >
287
+ <div
288
+ class="sc-gzVnrw kAkVRf"
289
+ >
290
+ <div
291
+ class="sc-bdVaJa fXEEbM"
292
+ >
293
+ <div
294
+ class="sc-bxivhb dwHzqd"
295
+ color="#FFFFFF"
296
+ />
297
+ <div
298
+ aria-label="updated Flag"
299
+ class="sc-EHOje jgkNJo"
300
+ color="#FFFFFF"
301
+ data-testid="flag-updated"
302
+ >
303
+ updated
304
+ </div>
305
+ </div>
306
+ </div>
307
+ <div
308
+ class="sc-gzVnrw kAkVRf"
309
+ >
310
+ <div
311
+ class="sc-bdVaJa fXEEbM"
312
+ >
313
+ <div
314
+ class="sc-bxivhb dwHzqd"
315
+ color="#FFFFFF"
316
+ />
317
+ <div
318
+ aria-label="exclusive Flag"
319
+ class="sc-EHOje jgkNJo"
320
+ color="#FFFFFF"
321
+ data-testid="flag-exclusive"
322
+ >
323
+ exclusive
324
+ </div>
325
+ </div>
326
+ </div>
327
+ <div
328
+ class="sc-gzVnrw kAkVRf"
329
+ >
330
+ <div
331
+ class="sc-bdVaJa fXEEbM"
332
+ >
333
+ <div
334
+ class="sc-bxivhb dwHzqd"
335
+ color="#FFFFFF"
336
+ />
337
+ <div
338
+ aria-label="new Flag"
339
+ class="sc-EHOje jgkNJo"
340
+ color="#FFFFFF"
341
+ data-testid="flag-new"
342
+ >
343
+ new
344
+ </div>
345
+ </div>
346
+ </div>
347
+ <div
348
+ class="sc-gzVnrw kAkVRf"
349
+ >
350
+ <div
351
+ class="sc-bdVaJa fXEEbM"
352
+ >
353
+ <div
354
+ class="sc-bxivhb dwHzqd"
355
+ color="#FFFFFF"
356
+ />
357
+ <div
358
+ aria-label="sponsored Flag"
359
+ class="sc-EHOje jgkNJo"
360
+ color="#FFFFFF"
361
+ data-testid="flag-sponsored"
362
+ >
363
+ sponsored
364
+ </div>
365
+ </div>
366
+ </div>
367
+ <div
368
+ class="sc-gzVnrw kAkVRf"
369
+ >
370
+ <div
371
+ class="sc-bdVaJa fXEEbM"
372
+ >
373
+ <div
374
+ class="sc-bxivhb dwHzqd"
375
+ color="#FFFFFF"
376
+ />
377
+ <div
378
+ aria-label="long read Flag"
379
+ class="sc-EHOje jgkNJo"
380
+ color="#FFFFFF"
381
+ data-testid="flag-long read"
382
+ >
383
+ long read
384
+ </div>
385
+ </div>
386
+ </div>
387
+ </div>
388
+ </div>
389
+ </body>
390
+ `;
391
+
281
392
  exports[`ArticleFlag renders the exclusive article flag 1`] = `
282
393
  <body>
283
394
  <div>
@@ -285,12 +396,12 @@ exports[`ArticleFlag renders the exclusive article flag 1`] = `
285
396
  class="sc-bdVaJa fXEEbM"
286
397
  >
287
398
  <div
288
- class="sc-htpNat dZoUoM"
399
+ class="sc-bxivhb iUYsYd"
289
400
  color="#C51D24"
290
401
  />
291
402
  <div
292
403
  aria-label="exclusive Flag"
293
- class="sc-ifAKCX fupmhj"
404
+ class="sc-EHOje jaegbj"
294
405
  color="#C51D24"
295
406
  data-testid="flag-exclusive"
296
407
  >
@@ -301,6 +412,29 @@ exports[`ArticleFlag renders the exclusive article flag 1`] = `
301
412
  </body>
302
413
  `;
303
414
 
415
+ exports[`ArticleFlag renders the exclusive article flag with an override colour 1`] = `
416
+ <body>
417
+ <div>
418
+ <div
419
+ class="sc-bdVaJa fXEEbM"
420
+ >
421
+ <div
422
+ class="sc-bxivhb dwHzqd"
423
+ color="#FFFFFF"
424
+ />
425
+ <div
426
+ aria-label="exclusive Flag"
427
+ class="sc-EHOje jgkNJo"
428
+ color="#FFFFFF"
429
+ data-testid="flag-exclusive"
430
+ >
431
+ exclusive
432
+ </div>
433
+ </div>
434
+ </div>
435
+ </body>
436
+ `;
437
+
304
438
  exports[`ArticleFlag renders the long read article flag 1`] = `
305
439
  <body>
306
440
  <div>
@@ -308,12 +442,12 @@ exports[`ArticleFlag renders the long read article flag 1`] = `
308
442
  class="sc-bdVaJa fXEEbM"
309
443
  >
310
444
  <div
311
- class="sc-htpNat fRxTiY"
445
+ class="sc-bxivhb iClafV"
312
446
  color="#696969"
313
447
  />
314
448
  <div
315
449
  aria-label="long read Flag"
316
- class="sc-ifAKCX cRBzVF"
450
+ class="sc-EHOje iFYRKM"
317
451
  color="#696969"
318
452
  data-testid="flag-long read"
319
453
  >
@@ -324,6 +458,29 @@ exports[`ArticleFlag renders the long read article flag 1`] = `
324
458
  </body>
325
459
  `;
326
460
 
461
+ exports[`ArticleFlag renders the long read article flag with an override colour 1`] = `
462
+ <body>
463
+ <div>
464
+ <div
465
+ class="sc-bdVaJa fXEEbM"
466
+ >
467
+ <div
468
+ class="sc-bxivhb dwHzqd"
469
+ color="#FFFFFF"
470
+ />
471
+ <div
472
+ aria-label="long read Flag"
473
+ class="sc-EHOje jgkNJo"
474
+ color="#FFFFFF"
475
+ data-testid="flag-long read"
476
+ >
477
+ long read
478
+ </div>
479
+ </div>
480
+ </div>
481
+ </body>
482
+ `;
483
+
327
484
  exports[`ArticleFlag renders the new article flag 1`] = `
328
485
  <body>
329
486
  <div>
@@ -331,12 +488,12 @@ exports[`ArticleFlag renders the new article flag 1`] = `
331
488
  class="sc-bdVaJa fXEEbM"
332
489
  >
333
490
  <div
334
- class="sc-htpNat jkDJOE"
491
+ class="sc-bxivhb beSIBk"
335
492
  color="#E34605"
336
493
  />
337
494
  <div
338
495
  aria-label="new Flag"
339
- class="sc-ifAKCX iquuBv"
496
+ class="sc-EHOje fHTjcy"
340
497
  color="#E34605"
341
498
  data-testid="flag-new"
342
499
  >
@@ -347,6 +504,29 @@ exports[`ArticleFlag renders the new article flag 1`] = `
347
504
  </body>
348
505
  `;
349
506
 
507
+ exports[`ArticleFlag renders the new article flag with an override colour 1`] = `
508
+ <body>
509
+ <div>
510
+ <div
511
+ class="sc-bdVaJa fXEEbM"
512
+ >
513
+ <div
514
+ class="sc-bxivhb dwHzqd"
515
+ color="#FFFFFF"
516
+ />
517
+ <div
518
+ aria-label="new Flag"
519
+ class="sc-EHOje jgkNJo"
520
+ color="#FFFFFF"
521
+ data-testid="flag-new"
522
+ >
523
+ new
524
+ </div>
525
+ </div>
526
+ </div>
527
+ </body>
528
+ `;
529
+
350
530
  exports[`ArticleFlag renders the sponsored article flag 1`] = `
351
531
  <body>
352
532
  <div>
@@ -354,12 +534,12 @@ exports[`ArticleFlag renders the sponsored article flag 1`] = `
354
534
  class="sc-bdVaJa fXEEbM"
355
535
  >
356
536
  <div
357
- class="sc-htpNat gaRHEk"
537
+ class="sc-bxivhb hdKGZm"
358
538
  color="#4D4D4D"
359
539
  />
360
540
  <div
361
541
  aria-label="sponsored Flag"
362
- class="sc-ifAKCX fzZyiZ"
542
+ class="sc-EHOje hRBZkE"
363
543
  color="#4D4D4D"
364
544
  data-testid="flag-sponsored"
365
545
  >
@@ -370,6 +550,29 @@ exports[`ArticleFlag renders the sponsored article flag 1`] = `
370
550
  </body>
371
551
  `;
372
552
 
553
+ exports[`ArticleFlag renders the sponsored article flag with an override colour 1`] = `
554
+ <body>
555
+ <div>
556
+ <div
557
+ class="sc-bdVaJa fXEEbM"
558
+ >
559
+ <div
560
+ class="sc-bxivhb dwHzqd"
561
+ color="#FFFFFF"
562
+ />
563
+ <div
564
+ aria-label="sponsored Flag"
565
+ class="sc-EHOje jgkNJo"
566
+ color="#FFFFFF"
567
+ data-testid="flag-sponsored"
568
+ >
569
+ sponsored
570
+ </div>
571
+ </div>
572
+ </div>
573
+ </body>
574
+ `;
575
+
373
576
  exports[`ArticleFlag renders the updated article flag 1`] = `
374
577
  <body>
375
578
  <div>
@@ -377,12 +580,12 @@ exports[`ArticleFlag renders the updated article flag 1`] = `
377
580
  class="sc-bdVaJa fXEEbM"
378
581
  >
379
582
  <div
380
- class="sc-htpNat fugARQ"
583
+ class="sc-bxivhb cQXhxF"
381
584
  color="#3C81BE"
382
585
  />
383
586
  <div
384
587
  aria-label="updated Flag"
385
- class="sc-ifAKCX hSeRZN"
588
+ class="sc-EHOje iWbzHt"
386
589
  color="#3C81BE"
387
590
  data-testid="flag-updated"
388
591
  >
@@ -392,3 +595,26 @@ exports[`ArticleFlag renders the updated article flag 1`] = `
392
595
  </div>
393
596
  </body>
394
597
  `;
598
+
599
+ exports[`ArticleFlag renders the updated article flag with an override colour 1`] = `
600
+ <body>
601
+ <div>
602
+ <div
603
+ class="sc-bdVaJa fXEEbM"
604
+ >
605
+ <div
606
+ class="sc-bxivhb dwHzqd"
607
+ color="#FFFFFF"
608
+ />
609
+ <div
610
+ aria-label="updated Flag"
611
+ class="sc-EHOje jgkNJo"
612
+ color="#FFFFFF"
613
+ data-testid="flag-updated"
614
+ >
615
+ updated
616
+ </div>
617
+ </div>
618
+ </div>
619
+ </body>
620
+ `;
package/src/components/article-flag/__tests__/__snapshots__/LiveArticleFlag.test.tsx.snap CHANGED
@@ -4,19 +4,23 @@ exports[`LiveArticleFlag should render the base live article flag 1`] = `
4
4
  <body>
5
5
  <div>
6
6
  <div
7
- class="sc-bwzfXH WFEid"
7
+ class="sc-bwzfXH lfBIaS"
8
8
  >
9
9
  <div
10
- class="sc-bxivhb fnsGfe"
10
+ class="sc-htpNat iVkuQW"
11
11
  >
12
- ■
13
- </div>
14
- <div>
15
- <span
16
- class="sc-EHOje jboioV"
12
+ <div
13
+ class="sc-ifAKCX cyXNjp"
17
14
  >
18
- BASE
19
- </span>
15
+ ■
16
+ </div>
17
+ <div>
18
+ <span
19
+ class="sc-bZQynM fRMWFX"
20
+ >
21
+ BASE
22
+ </span>
23
+ </div>
20
24
  </div>
21
25
  </div>
22
26
  </div>
@@ -27,19 +31,23 @@ exports[`LiveArticleFlag should render the breaking article flag 1`] = `
27
31
  <body>
28
32
  <div>
29
33
  <div
30
- class="sc-bwzfXH WFEid"
34
+ class="sc-bwzfXH lfBIaS"
31
35
  >
32
36
  <div
33
- class="sc-bxivhb fnsGfe"
37
+ class="sc-htpNat iVkuQW"
34
38
  >
35
- ■
36
- </div>
37
- <div>
38
- <span
39
- class="sc-EHOje jboioV"
39
+ <div
40
+ class="sc-ifAKCX cyXNjp"
40
41
  >
41
- BREAKING
42
- </span>
42
+ ■
43
+ </div>
44
+ <div>
45
+ <span
46
+ class="sc-bZQynM fRMWFX"
47
+ >
48
+ BREAKING
49
+ </span>
50
+ </div>
43
51
  </div>
44
52
  </div>
45
53
  </div>
@@ -50,19 +58,23 @@ exports[`LiveArticleFlag should render the live article flag 1`] = `
50
58
  <body>
51
59
  <div>
52
60
  <div
53
- class="sc-bwzfXH WFEid"
61
+ class="sc-bwzfXH lfBIaS"
54
62
  >
55
63
  <div
56
- class="sc-bxivhb fnsGfe"
64
+ class="sc-htpNat iVkuQW"
57
65
  >
58
- ■
59
- </div>
60
- <div>
61
- <span
62
- class="sc-EHOje jboioV"
66
+ <div
67
+ class="sc-ifAKCX cyXNjp"
63
68
  >
64
- LIVE
65
- </span>
69
+ ■
70
+ </div>
71
+ <div>
72
+ <span
73
+ class="sc-bZQynM fRMWFX"
74
+ >
75
+ LIVE
76
+ </span>
77
+ </div>
66
78
  </div>
67
79
  </div>
68
80
  </div>
package/src/components/article-flag/styles.ts CHANGED
@@ -9,6 +9,12 @@ export const ArticleFlagContainer = styled.div`
9
9
  flex-direction: row;
10
10
  `;
11
11
 
12
+ export const LiveFlagAndTimestampContainer = styled.div`
13
+ display: flex;
14
+ align-items: center;
15
+ flex-direction: row;
16
+ `;
17
+
12
18
  export const LiveArticleFlagContainer = styled.div`
13
19
  display: flex;
14
20
  padding: 2px 6px;