@times-components/ts-components 1.21.0 → 1.22.2

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 (42) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/dist/components/article-flag/ArticleFlag.stories.js +21 -3
  3. package/dist/components/article-flag/LiveArticleFlag.js +13 -6
  4. package/dist/components/article-flag/styles.d.ts +1 -0
  5. package/dist/components/article-flag/styles.js +6 -1
  6. package/dist/components/in-article-puff/InArticlePuff.d.ts +1 -1
  7. package/dist/components/in-article-puff/InArticlePuff.js +6 -6
  8. package/dist/components/in-article-puff/InArticlePuff.stories.js +3 -3
  9. package/dist/components/updated-timestamp/UpdatedTimestamp.d.ts +4 -0
  10. package/dist/components/updated-timestamp/UpdatedTimestamp.js +21 -0
  11. package/dist/components/updated-timestamp/UpdatedTimestamp.stories.d.ts +1 -0
  12. package/dist/components/updated-timestamp/UpdatedTimestamp.stories.js +13 -0
  13. package/dist/components/updated-timestamp/__tests__/UpdatedTimestamp.test.d.ts +1 -0
  14. package/dist/components/updated-timestamp/__tests__/UpdatedTimestamp.test.js +34 -0
  15. package/dist/components/updated-timestamp/styles.d.ts +2 -0
  16. package/dist/components/updated-timestamp/styles.js +14 -0
  17. package/dist/helpers/time/UpdatedTimeProvider.d.ts +5 -0
  18. package/dist/helpers/time/UpdatedTimeProvider.js +9 -0
  19. package/dist/helpers/time/__tests__/UpdatedTimeProvider.test.d.ts +1 -0
  20. package/dist/helpers/time/__tests__/UpdatedTimeProvider.test.js +17 -0
  21. package/dist/helpers/tracking/TrackingContextProvider.js +11 -1
  22. package/dist/index.d.ts +2 -0
  23. package/dist/index.js +3 -1
  24. package/package.json +5 -5
  25. package/rnw.js +1 -1
  26. package/src/components/article-flag/ArticleFlag.stories.tsx +28 -2
  27. package/src/components/article-flag/LiveArticleFlag.tsx +19 -9
  28. package/src/components/article-flag/__tests__/__snapshots__/ArticleFlag.test.tsx.snap +73 -73
  29. package/src/components/article-flag/__tests__/__snapshots__/LiveArticleFlag.test.tsx.snap +39 -27
  30. package/src/components/article-flag/styles.ts +6 -0
  31. package/src/components/article-header/__tests__/__snapshots__/ArticleHeader.test.tsx.snap +13 -9
  32. package/src/components/in-article-puff/InArticlePuff.stories.tsx +2 -2
  33. package/src/components/in-article-puff/InArticlePuff.tsx +6 -6
  34. package/src/components/updated-timestamp/UpdatedTimestamp.stories.tsx +18 -0
  35. package/src/components/updated-timestamp/UpdatedTimestamp.tsx +38 -0
  36. package/src/components/updated-timestamp/__tests__/UpdatedTimestamp.test.tsx +50 -0
  37. package/src/components/updated-timestamp/__tests__/__snapshots__/UpdatedTimestamp.test.tsx.snap +11 -0
  38. package/src/components/updated-timestamp/styles.ts +15 -0
  39. package/src/helpers/time/UpdatedTimeProvider.tsx +17 -0
  40. package/src/helpers/time/__tests__/UpdatedTimeProvider.test.tsx +23 -0
  41. package/src/helpers/tracking/TrackingContextProvider.tsx +14 -0
  42. package/src/index.ts +6 -0
package/src/components/article-flag/LiveArticleFlag.tsx CHANGED
@@ -2,17 +2,27 @@ import React from 'react';
2
2
  import {
3
3
  LiveArticleFlagContainer,
4
4
  LiveIconContainer,
5
- LiveArticleFlagText
5
+ LiveArticleFlagText,
6
+ LiveFlagAndTimestampContainer
6
7
  } from './styles';
8
+ import { UpdatedTimestamp } from '../updated-timestamp/UpdatedTimestamp';
9
+ import { useUpdatedTime } from '../../helpers/time/UpdatedTimeProvider';
7
10
 
8
- export const BaseLiveArticleFlag: React.FC<{ title: string }> = ({ title }) => (
9
- <LiveArticleFlagContainer>
10
- <LiveIconContainer>{'\u25a0'}</LiveIconContainer>
11
- <div>
12
- <LiveArticleFlagText>{title}</LiveArticleFlagText>
13
- </div>
14
- </LiveArticleFlagContainer>
15
- );
11
+ export const BaseLiveArticleFlag: React.FC<{ title: string }> = ({ title }) => {
12
+ const updatedTime = useUpdatedTime();
13
+
14
+ return (
15
+ <LiveFlagAndTimestampContainer>
16
+ <LiveArticleFlagContainer>
17
+ <LiveIconContainer>{'\u25a0'}</LiveIconContainer>
18
+ <div>
19
+ <LiveArticleFlagText>{title}</LiveArticleFlagText>
20
+ </div>
21
+ </LiveArticleFlagContainer>
22
+ <UpdatedTimestamp updatedTime={updatedTime} />
23
+ </LiveFlagAndTimestampContainer>
24
+ );
25
+ };
16
26
 
17
27
  export const LiveArticleFlag: React.FC = () => (
18
28
  <BaseLiveArticleFlag title="LIVE" />
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
  >
@@ -282,21 +282,21 @@ exports[`ArticleFlag renders multiple article flags with override colours 1`] =
282
282
  <body>
283
283
  <div>
284
284
  <div
285
- class="sc-gzVnrw kpMYNz"
285
+ class="sc-htoDjs OefKN"
286
286
  >
287
287
  <div
288
- class="sc-bZQynM fMCtl"
288
+ class="sc-gzVnrw kAkVRf"
289
289
  >
290
290
  <div
291
291
  class="sc-bdVaJa fXEEbM"
292
292
  >
293
293
  <div
294
- class="sc-htpNat cCStZm"
294
+ class="sc-bxivhb dwHzqd"
295
295
  color="#FFFFFF"
296
296
  />
297
297
  <div
298
298
  aria-label="updated Flag"
299
- class="sc-ifAKCX gNUzAJ"
299
+ class="sc-EHOje jgkNJo"
300
300
  color="#FFFFFF"
301
301
  data-testid="flag-updated"
302
302
  >
@@ -305,18 +305,18 @@ exports[`ArticleFlag renders multiple article flags with override colours 1`] =
305
305
  </div>
306
306
  </div>
307
307
  <div
308
- class="sc-bZQynM fMCtl"
308
+ class="sc-gzVnrw kAkVRf"
309
309
  >
310
310
  <div
311
311
  class="sc-bdVaJa fXEEbM"
312
312
  >
313
313
  <div
314
- class="sc-htpNat cCStZm"
314
+ class="sc-bxivhb dwHzqd"
315
315
  color="#FFFFFF"
316
316
  />
317
317
  <div
318
318
  aria-label="exclusive Flag"
319
- class="sc-ifAKCX gNUzAJ"
319
+ class="sc-EHOje jgkNJo"
320
320
  color="#FFFFFF"
321
321
  data-testid="flag-exclusive"
322
322
  >
@@ -325,18 +325,18 @@ exports[`ArticleFlag renders multiple article flags with override colours 1`] =
325
325
  </div>
326
326
  </div>
327
327
  <div
328
- class="sc-bZQynM fMCtl"
328
+ class="sc-gzVnrw kAkVRf"
329
329
  >
330
330
  <div
331
331
  class="sc-bdVaJa fXEEbM"
332
332
  >
333
333
  <div
334
- class="sc-htpNat cCStZm"
334
+ class="sc-bxivhb dwHzqd"
335
335
  color="#FFFFFF"
336
336
  />
337
337
  <div
338
338
  aria-label="new Flag"
339
- class="sc-ifAKCX gNUzAJ"
339
+ class="sc-EHOje jgkNJo"
340
340
  color="#FFFFFF"
341
341
  data-testid="flag-new"
342
342
  >
@@ -345,18 +345,18 @@ exports[`ArticleFlag renders multiple article flags with override colours 1`] =
345
345
  </div>
346
346
  </div>
347
347
  <div
348
- class="sc-bZQynM fMCtl"
348
+ class="sc-gzVnrw kAkVRf"
349
349
  >
350
350
  <div
351
351
  class="sc-bdVaJa fXEEbM"
352
352
  >
353
353
  <div
354
- class="sc-htpNat cCStZm"
354
+ class="sc-bxivhb dwHzqd"
355
355
  color="#FFFFFF"
356
356
  />
357
357
  <div
358
358
  aria-label="sponsored Flag"
359
- class="sc-ifAKCX gNUzAJ"
359
+ class="sc-EHOje jgkNJo"
360
360
  color="#FFFFFF"
361
361
  data-testid="flag-sponsored"
362
362
  >
@@ -365,18 +365,18 @@ exports[`ArticleFlag renders multiple article flags with override colours 1`] =
365
365
  </div>
366
366
  </div>
367
367
  <div
368
- class="sc-bZQynM fMCtl"
368
+ class="sc-gzVnrw kAkVRf"
369
369
  >
370
370
  <div
371
371
  class="sc-bdVaJa fXEEbM"
372
372
  >
373
373
  <div
374
- class="sc-htpNat cCStZm"
374
+ class="sc-bxivhb dwHzqd"
375
375
  color="#FFFFFF"
376
376
  />
377
377
  <div
378
378
  aria-label="long read Flag"
379
- class="sc-ifAKCX gNUzAJ"
379
+ class="sc-EHOje jgkNJo"
380
380
  color="#FFFFFF"
381
381
  data-testid="flag-long read"
382
382
  >
@@ -396,12 +396,12 @@ exports[`ArticleFlag renders the exclusive article flag 1`] = `
396
396
  class="sc-bdVaJa fXEEbM"
397
397
  >
398
398
  <div
399
- class="sc-htpNat dZoUoM"
399
+ class="sc-bxivhb iUYsYd"
400
400
  color="#C51D24"
401
401
  />
402
402
  <div
403
403
  aria-label="exclusive Flag"
404
- class="sc-ifAKCX fupmhj"
404
+ class="sc-EHOje jaegbj"
405
405
  color="#C51D24"
406
406
  data-testid="flag-exclusive"
407
407
  >
@@ -419,12 +419,12 @@ exports[`ArticleFlag renders the exclusive article flag with an override colour
419
419
  class="sc-bdVaJa fXEEbM"
420
420
  >
421
421
  <div
422
- class="sc-htpNat cCStZm"
422
+ class="sc-bxivhb dwHzqd"
423
423
  color="#FFFFFF"
424
424
  />
425
425
  <div
426
426
  aria-label="exclusive Flag"
427
- class="sc-ifAKCX gNUzAJ"
427
+ class="sc-EHOje jgkNJo"
428
428
  color="#FFFFFF"
429
429
  data-testid="flag-exclusive"
430
430
  >
@@ -442,12 +442,12 @@ exports[`ArticleFlag renders the long read article flag 1`] = `
442
442
  class="sc-bdVaJa fXEEbM"
443
443
  >
444
444
  <div
445
- class="sc-htpNat fRxTiY"
445
+ class="sc-bxivhb iClafV"
446
446
  color="#696969"
447
447
  />
448
448
  <div
449
449
  aria-label="long read Flag"
450
- class="sc-ifAKCX cRBzVF"
450
+ class="sc-EHOje iFYRKM"
451
451
  color="#696969"
452
452
  data-testid="flag-long read"
453
453
  >
@@ -465,12 +465,12 @@ exports[`ArticleFlag renders the long read article flag with an override colour
465
465
  class="sc-bdVaJa fXEEbM"
466
466
  >
467
467
  <div
468
- class="sc-htpNat cCStZm"
468
+ class="sc-bxivhb dwHzqd"
469
469
  color="#FFFFFF"
470
470
  />
471
471
  <div
472
472
  aria-label="long read Flag"
473
- class="sc-ifAKCX gNUzAJ"
473
+ class="sc-EHOje jgkNJo"
474
474
  color="#FFFFFF"
475
475
  data-testid="flag-long read"
476
476
  >
@@ -488,12 +488,12 @@ exports[`ArticleFlag renders the new article flag 1`] = `
488
488
  class="sc-bdVaJa fXEEbM"
489
489
  >
490
490
  <div
491
- class="sc-htpNat jkDJOE"
491
+ class="sc-bxivhb beSIBk"
492
492
  color="#E34605"
493
493
  />
494
494
  <div
495
495
  aria-label="new Flag"
496
- class="sc-ifAKCX iquuBv"
496
+ class="sc-EHOje fHTjcy"
497
497
  color="#E34605"
498
498
  data-testid="flag-new"
499
499
  >
@@ -511,12 +511,12 @@ exports[`ArticleFlag renders the new article flag with an override colour 1`] =
511
511
  class="sc-bdVaJa fXEEbM"
512
512
  >
513
513
  <div
514
- class="sc-htpNat cCStZm"
514
+ class="sc-bxivhb dwHzqd"
515
515
  color="#FFFFFF"
516
516
  />
517
517
  <div
518
518
  aria-label="new Flag"
519
- class="sc-ifAKCX gNUzAJ"
519
+ class="sc-EHOje jgkNJo"
520
520
  color="#FFFFFF"
521
521
  data-testid="flag-new"
522
522
  >
@@ -534,12 +534,12 @@ exports[`ArticleFlag renders the sponsored article flag 1`] = `
534
534
  class="sc-bdVaJa fXEEbM"
535
535
  >
536
536
  <div
537
- class="sc-htpNat gaRHEk"
537
+ class="sc-bxivhb hdKGZm"
538
538
  color="#4D4D4D"
539
539
  />
540
540
  <div
541
541
  aria-label="sponsored Flag"
542
- class="sc-ifAKCX fzZyiZ"
542
+ class="sc-EHOje hRBZkE"
543
543
  color="#4D4D4D"
544
544
  data-testid="flag-sponsored"
545
545
  >
@@ -557,12 +557,12 @@ exports[`ArticleFlag renders the sponsored article flag with an override colour
557
557
  class="sc-bdVaJa fXEEbM"
558
558
  >
559
559
  <div
560
- class="sc-htpNat cCStZm"
560
+ class="sc-bxivhb dwHzqd"
561
561
  color="#FFFFFF"
562
562
  />
563
563
  <div
564
564
  aria-label="sponsored Flag"
565
- class="sc-ifAKCX gNUzAJ"
565
+ class="sc-EHOje jgkNJo"
566
566
  color="#FFFFFF"
567
567
  data-testid="flag-sponsored"
568
568
  >
@@ -580,12 +580,12 @@ exports[`ArticleFlag renders the updated article flag 1`] = `
580
580
  class="sc-bdVaJa fXEEbM"
581
581
  >
582
582
  <div
583
- class="sc-htpNat fugARQ"
583
+ class="sc-bxivhb cQXhxF"
584
584
  color="#3C81BE"
585
585
  />
586
586
  <div
587
587
  aria-label="updated Flag"
588
- class="sc-ifAKCX hSeRZN"
588
+ class="sc-EHOje iWbzHt"
589
589
  color="#3C81BE"
590
590
  data-testid="flag-updated"
591
591
  >
@@ -603,12 +603,12 @@ exports[`ArticleFlag renders the updated article flag with an override colour 1`
603
603
  class="sc-bdVaJa fXEEbM"
604
604
  >
605
605
  <div
606
- class="sc-htpNat cCStZm"
606
+ class="sc-bxivhb dwHzqd"
607
607
  color="#FFFFFF"
608
608
  />
609
609
  <div
610
610
  aria-label="updated Flag"
611
- class="sc-ifAKCX gNUzAJ"
611
+ class="sc-EHOje jgkNJo"
612
612
  color="#FFFFFF"
613
613
  data-testid="flag-updated"
614
614
  >
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;