@newskit-render/core 2.31.0 → 2.32.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.
Files changed (19) hide show
  1. package/.eslintignore +1 -0
  2. package/CHANGELOG.md +8 -0
  3. package/Dockerfile +1 -0
  4. package/__tests__/pages/[articleSlug].test.tsx +2 -1
  5. package/__tests__/pages/__snapshots__/home.test.tsx.snap +135 -60
  6. package/components/ErrorPage/ErrorPage.tsx +2 -5
  7. package/components/article/__tests__/__snapshots__/index.test.tsx.snap +63 -69
  8. package/components/article/__tests__/index.test.tsx +7 -110
  9. package/components/article/__tests__/mocks.ts +105 -0
  10. package/components/article/index.tsx +196 -200
  11. package/components/footer/index.tsx +2 -6
  12. package/components/section/layouts/Block.tsx +1 -5
  13. package/components/section/layouts/__tests__/__snapshots__/Lead.test.tsx.snap +33 -12
  14. package/components/teaser/index.test.tsx +8 -6
  15. package/components/teaser/index.tsx +15 -7
  16. package/jest.config.js +3 -4
  17. package/next.config.js +84 -58
  18. package/package.json +5 -5
  19. package/public/assets/plchldr150x100.png +0 -0
package/.eslintignore CHANGED
@@ -14,6 +14,7 @@ helpers/setupTests.ts
14
14
  newrelic.js
15
15
  infrastructure/helm/*
16
16
  infrastructure/terraform-newrelic/*.js
17
+ next.config.js
17
18
 
18
19
  # for after scaffold
19
20
  helm/*
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [2.31.0](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@2.31.0-alpha.0...@newskit-render/core@2.31.0) (2022-12-12)
7
+
8
+ **Note:** Version bump only for package @newskit-render/core
9
+
10
+
11
+
12
+
13
+
6
14
  ## [2.30.9](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@2.30.9-alpha.0...@newskit-render/core@2.30.9) (2022-12-12)
7
15
 
8
16
  **Note:** Version bump only for package @newskit-render/core
package/Dockerfile CHANGED
@@ -12,6 +12,7 @@ COPY queries ./queries
12
12
  COPY package.json ./package.json
13
13
  COPY tsconfig.json ./tsconfig.json
14
14
  COPY newrelic.js ./newrelic.js
15
+ COPY next.config.js ./next.config.js
15
16
 
16
17
  EXPOSE 3000
17
18
 
package/__tests__/pages/[articleSlug].test.tsx CHANGED
@@ -68,6 +68,7 @@ const user = {
68
68
  },
69
69
  subscriptions: [{ endDate: null }],
70
70
  }
71
+
71
72
  jest.mock('swr')
72
73
  let swrMock
73
74
 
@@ -162,7 +163,7 @@ describe('Recommendation', () => {
162
163
  swrMock = useSWR as jest.Mock
163
164
  })
164
165
  afterEach(() => {
165
- jest.clearAllMocks()
166
+ jest.resetAllMocks()
166
167
  })
167
168
  it('render related article page when data is null page', async () => {
168
169
  let result
package/__tests__/pages/__snapshots__/home.test.tsx.snap CHANGED
@@ -253,15 +253,22 @@ exports[`getServerSideProps Homepage 1`] = `
253
253
  <div
254
254
  class="css-x4egtb"
255
255
  >
256
- <picture
257
- class="css-vl2swp"
256
+ <figure
257
+ class="css-439ral"
258
258
  >
259
259
  <img
260
260
  alt=""
261
- class="css-ssxt4f"
261
+ data-nimg="fill"
262
+ decoding="async"
262
263
  loading="lazy"
264
+ sizes="(max-width: 768px) 100vw,
265
+ (max-width: 1200px) 50vw,
266
+ 33vw"
267
+ src="/_next/image?url=%2Fassets%2Fplchldr150x100.png&w=3840&q=75"
268
+ srcset="/_next/image?url=%2Fassets%2Fplchldr150x100.png&w=256&q=75 256w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=384&q=75 384w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=640&q=75 640w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=750&q=75 750w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=828&q=75 828w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=1080&q=75 1080w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=1200&q=75 1200w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=1920&q=75 1920w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=2048&q=75 2048w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=3840&q=75 3840w"
269
+ style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; right: 0px; bottom: 0px; object-fit: contain; color: transparent; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat;"
263
270
  />
264
- </picture>
271
+ </figure>
265
272
  </div>
266
273
  <div
267
274
  class="css-1shocxe"
@@ -304,15 +311,22 @@ exports[`getServerSideProps Homepage 1`] = `
304
311
  <div
305
312
  class="css-1rsw0n0"
306
313
  >
307
- <picture
308
- class="css-vl2swp"
314
+ <figure
315
+ class="css-439ral"
309
316
  >
310
317
  <img
311
318
  alt=""
312
- class="css-ssxt4f"
319
+ data-nimg="fill"
320
+ decoding="async"
313
321
  loading="lazy"
322
+ sizes="(max-width: 768px) 100vw,
323
+ (max-width: 1200px) 50vw,
324
+ 33vw"
325
+ src="/_next/image?url=%2Fassets%2Fplchldr150x100.png&w=3840&q=75"
326
+ srcset="/_next/image?url=%2Fassets%2Fplchldr150x100.png&w=256&q=75 256w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=384&q=75 384w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=640&q=75 640w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=750&q=75 750w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=828&q=75 828w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=1080&q=75 1080w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=1200&q=75 1200w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=1920&q=75 1920w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=2048&q=75 2048w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=3840&q=75 3840w"
327
+ style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; right: 0px; bottom: 0px; object-fit: contain; color: transparent; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat;"
314
328
  />
315
- </picture>
329
+ </figure>
316
330
  </div>
317
331
  <div
318
332
  class="css-1r2lt0d"
@@ -352,15 +366,22 @@ exports[`getServerSideProps Homepage 1`] = `
352
366
  <div
353
367
  class="css-1rsw0n0"
354
368
  >
355
- <picture
356
- class="css-vl2swp"
369
+ <figure
370
+ class="css-439ral"
357
371
  >
358
372
  <img
359
373
  alt=""
360
- class="css-ssxt4f"
374
+ data-nimg="fill"
375
+ decoding="async"
361
376
  loading="lazy"
377
+ sizes="(max-width: 768px) 100vw,
378
+ (max-width: 1200px) 50vw,
379
+ 33vw"
380
+ src="/_next/image?url=%2Fassets%2Fplchldr150x100.png&w=3840&q=75"
381
+ srcset="/_next/image?url=%2Fassets%2Fplchldr150x100.png&w=256&q=75 256w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=384&q=75 384w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=640&q=75 640w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=750&q=75 750w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=828&q=75 828w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=1080&q=75 1080w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=1200&q=75 1200w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=1920&q=75 1920w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=2048&q=75 2048w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=3840&q=75 3840w"
382
+ style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; right: 0px; bottom: 0px; object-fit: contain; color: transparent; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat;"
362
383
  />
363
- </picture>
384
+ </figure>
364
385
  </div>
365
386
  <div
366
387
  class="css-1r2lt0d"
@@ -409,15 +430,22 @@ exports[`getServerSideProps Homepage 1`] = `
409
430
  <div
410
431
  class="css-1rsw0n0"
411
432
  >
412
- <picture
413
- class="css-vl2swp"
433
+ <figure
434
+ class="css-439ral"
414
435
  >
415
436
  <img
416
437
  alt="image alt"
417
- class="css-ssxt4f"
438
+ data-nimg="fill"
439
+ decoding="async"
418
440
  loading="lazy"
441
+ sizes="(max-width: 768px) 100vw,
442
+ (max-width: 1200px) 50vw,
443
+ 33vw"
444
+ src="/_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=3840&q=75"
445
+ srcset="/_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=256&q=75 256w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=384&q=75 384w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=640&q=75 640w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=750&q=75 750w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=828&q=75 828w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=1080&q=75 1080w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=1200&q=75 1200w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=1920&q=75 1920w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=2048&q=75 2048w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=3840&q=75 3840w"
446
+ style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; right: 0px; bottom: 0px; object-fit: contain; color: transparent; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat;"
419
447
  />
420
- </picture>
448
+ </figure>
421
449
  </div>
422
450
  <div
423
451
  class="css-1r2lt0d"
@@ -457,15 +485,22 @@ exports[`getServerSideProps Homepage 1`] = `
457
485
  <div
458
486
  class="css-1rsw0n0"
459
487
  >
460
- <picture
461
- class="css-vl2swp"
488
+ <figure
489
+ class="css-439ral"
462
490
  >
463
491
  <img
464
492
  alt="image alt 2"
465
- class="css-ssxt4f"
493
+ data-nimg="fill"
494
+ decoding="async"
466
495
  loading="lazy"
496
+ sizes="(max-width: 768px) 100vw,
497
+ (max-width: 1200px) 50vw,
498
+ 33vw"
499
+ src="/_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=3840&q=75"
500
+ srcset="/_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=256&q=75 256w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=384&q=75 384w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=640&q=75 640w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=750&q=75 750w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=828&q=75 828w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=1080&q=75 1080w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=1200&q=75 1200w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=1920&q=75 1920w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=2048&q=75 2048w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=3840&q=75 3840w"
501
+ style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; right: 0px; bottom: 0px; object-fit: contain; color: transparent; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat;"
467
502
  />
468
- </picture>
503
+ </figure>
469
504
  </div>
470
505
  <div
471
506
  class="css-1r2lt0d"
@@ -505,15 +540,22 @@ exports[`getServerSideProps Homepage 1`] = `
505
540
  <div
506
541
  class="css-1rsw0n0"
507
542
  >
508
- <picture
509
- class="css-vl2swp"
543
+ <figure
544
+ class="css-439ral"
510
545
  >
511
546
  <img
512
547
  alt=""
513
- class="css-ssxt4f"
548
+ data-nimg="fill"
549
+ decoding="async"
514
550
  loading="lazy"
551
+ sizes="(max-width: 768px) 100vw,
552
+ (max-width: 1200px) 50vw,
553
+ 33vw"
554
+ src="/_next/image?url=%2Fassets%2Fplchldr150x100.png&w=3840&q=75"
555
+ srcset="/_next/image?url=%2Fassets%2Fplchldr150x100.png&w=256&q=75 256w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=384&q=75 384w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=640&q=75 640w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=750&q=75 750w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=828&q=75 828w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=1080&q=75 1080w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=1200&q=75 1200w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=1920&q=75 1920w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=2048&q=75 2048w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=3840&q=75 3840w"
556
+ style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; right: 0px; bottom: 0px; object-fit: contain; color: transparent; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat;"
515
557
  />
516
- </picture>
558
+ </figure>
517
559
  </div>
518
560
  <div
519
561
  class="css-1r2lt0d"
@@ -553,15 +595,22 @@ exports[`getServerSideProps Homepage 1`] = `
553
595
  <div
554
596
  class="css-1rsw0n0"
555
597
  >
556
- <picture
557
- class="css-vl2swp"
598
+ <figure
599
+ class="css-439ral"
558
600
  >
559
601
  <img
560
602
  alt="image alt 3"
561
- class="css-ssxt4f"
603
+ data-nimg="fill"
604
+ decoding="async"
562
605
  loading="lazy"
606
+ sizes="(max-width: 768px) 100vw,
607
+ (max-width: 1200px) 50vw,
608
+ 33vw"
609
+ src="/_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=3840&q=75"
610
+ srcset="/_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=256&q=75 256w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=384&q=75 384w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=640&q=75 640w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=750&q=75 750w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=828&q=75 828w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=1080&q=75 1080w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=1200&q=75 1200w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=1920&q=75 1920w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=2048&q=75 2048w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=3840&q=75 3840w"
611
+ style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; right: 0px; bottom: 0px; object-fit: contain; color: transparent; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat;"
563
612
  />
564
- </picture>
613
+ </figure>
565
614
  </div>
566
615
  <div
567
616
  class="css-1r2lt0d"
@@ -709,17 +758,21 @@ exports[`getServerSideProps Homepage 1`] = `
709
758
  <div
710
759
  class="css-x4egtb"
711
760
  >
712
- <picture
713
- class="css-38m0e9"
761
+ <figure
762
+ class="css-4uue21"
714
763
  >
715
- <div
716
- class="css-5pczz7"
717
- />
718
764
  <img
719
- class="css-1qgqq71"
720
- src="https://plchldr.co/i/802x451?bg=F0F0F0&fc=111111&text=img"
765
+ data-nimg="fill"
766
+ decoding="async"
767
+ loading="lazy"
768
+ sizes="(max-width: 768px) 100vw,
769
+ (max-width: 1200px) 50vw,
770
+ 33vw"
771
+ src="/_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F802x451%3Fbg%3DF0F0F0%26fc%3D111111%26text%3Dimg&w=3840&q=75"
772
+ srcset="/_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F802x451%3Fbg%3DF0F0F0%26fc%3D111111%26text%3Dimg&w=256&q=75 256w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F802x451%3Fbg%3DF0F0F0%26fc%3D111111%26text%3Dimg&w=384&q=75 384w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F802x451%3Fbg%3DF0F0F0%26fc%3D111111%26text%3Dimg&w=640&q=75 640w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F802x451%3Fbg%3DF0F0F0%26fc%3D111111%26text%3Dimg&w=750&q=75 750w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F802x451%3Fbg%3DF0F0F0%26fc%3D111111%26text%3Dimg&w=828&q=75 828w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F802x451%3Fbg%3DF0F0F0%26fc%3D111111%26text%3Dimg&w=1080&q=75 1080w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F802x451%3Fbg%3DF0F0F0%26fc%3D111111%26text%3Dimg&w=1200&q=75 1200w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F802x451%3Fbg%3DF0F0F0%26fc%3D111111%26text%3Dimg&w=1920&q=75 1920w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F802x451%3Fbg%3DF0F0F0%26fc%3D111111%26text%3Dimg&w=2048&q=75 2048w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F802x451%3Fbg%3DF0F0F0%26fc%3D111111%26text%3Dimg&w=3840&q=75 3840w"
773
+ style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; right: 0px; bottom: 0px; object-fit: contain; color: transparent; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat;"
721
774
  />
722
- </picture>
775
+ </figure>
723
776
  </div>
724
777
  <div
725
778
  class="css-1shocxe"
@@ -757,17 +810,21 @@ exports[`getServerSideProps Homepage 1`] = `
757
810
  <div
758
811
  class="css-1rsw0n0"
759
812
  >
760
- <picture
761
- class="css-38m0e9"
813
+ <figure
814
+ class="css-4uue21"
762
815
  >
763
- <div
764
- class="css-5pczz7"
765
- />
766
816
  <img
767
- class="css-1qgqq71"
768
- src="https://plchldr.co/i/802x451?bg=F0F0F0&fc=111111&text=img"
817
+ data-nimg="fill"
818
+ decoding="async"
819
+ loading="lazy"
820
+ sizes="(max-width: 768px) 100vw,
821
+ (max-width: 1200px) 50vw,
822
+ 33vw"
823
+ src="/_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F802x451%3Fbg%3DF0F0F0%26fc%3D111111%26text%3Dimg&w=3840&q=75"
824
+ srcset="/_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F802x451%3Fbg%3DF0F0F0%26fc%3D111111%26text%3Dimg&w=256&q=75 256w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F802x451%3Fbg%3DF0F0F0%26fc%3D111111%26text%3Dimg&w=384&q=75 384w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F802x451%3Fbg%3DF0F0F0%26fc%3D111111%26text%3Dimg&w=640&q=75 640w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F802x451%3Fbg%3DF0F0F0%26fc%3D111111%26text%3Dimg&w=750&q=75 750w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F802x451%3Fbg%3DF0F0F0%26fc%3D111111%26text%3Dimg&w=828&q=75 828w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F802x451%3Fbg%3DF0F0F0%26fc%3D111111%26text%3Dimg&w=1080&q=75 1080w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F802x451%3Fbg%3DF0F0F0%26fc%3D111111%26text%3Dimg&w=1200&q=75 1200w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F802x451%3Fbg%3DF0F0F0%26fc%3D111111%26text%3Dimg&w=1920&q=75 1920w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F802x451%3Fbg%3DF0F0F0%26fc%3D111111%26text%3Dimg&w=2048&q=75 2048w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F802x451%3Fbg%3DF0F0F0%26fc%3D111111%26text%3Dimg&w=3840&q=75 3840w"
825
+ style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; right: 0px; bottom: 0px; object-fit: contain; color: transparent; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat;"
769
826
  />
770
- </picture>
827
+ </figure>
771
828
  </div>
772
829
  <div
773
830
  class="css-1r2lt0d"
@@ -802,17 +859,21 @@ exports[`getServerSideProps Homepage 1`] = `
802
859
  <div
803
860
  class="css-1rsw0n0"
804
861
  >
805
- <picture
806
- class="css-38m0e9"
862
+ <figure
863
+ class="css-4uue21"
807
864
  >
808
- <div
809
- class="css-5pczz7"
810
- />
811
865
  <img
812
- class="css-1qgqq71"
813
- src="https://plchldr.co/i/802x451?bg=F0F0F0&fc=111111&text=img"
866
+ data-nimg="fill"
867
+ decoding="async"
868
+ loading="lazy"
869
+ sizes="(max-width: 768px) 100vw,
870
+ (max-width: 1200px) 50vw,
871
+ 33vw"
872
+ src="/_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F802x451%3Fbg%3DF0F0F0%26fc%3D111111%26text%3Dimg&w=3840&q=75"
873
+ srcset="/_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F802x451%3Fbg%3DF0F0F0%26fc%3D111111%26text%3Dimg&w=256&q=75 256w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F802x451%3Fbg%3DF0F0F0%26fc%3D111111%26text%3Dimg&w=384&q=75 384w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F802x451%3Fbg%3DF0F0F0%26fc%3D111111%26text%3Dimg&w=640&q=75 640w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F802x451%3Fbg%3DF0F0F0%26fc%3D111111%26text%3Dimg&w=750&q=75 750w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F802x451%3Fbg%3DF0F0F0%26fc%3D111111%26text%3Dimg&w=828&q=75 828w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F802x451%3Fbg%3DF0F0F0%26fc%3D111111%26text%3Dimg&w=1080&q=75 1080w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F802x451%3Fbg%3DF0F0F0%26fc%3D111111%26text%3Dimg&w=1200&q=75 1200w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F802x451%3Fbg%3DF0F0F0%26fc%3D111111%26text%3Dimg&w=1920&q=75 1920w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F802x451%3Fbg%3DF0F0F0%26fc%3D111111%26text%3Dimg&w=2048&q=75 2048w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F802x451%3Fbg%3DF0F0F0%26fc%3D111111%26text%3Dimg&w=3840&q=75 3840w"
874
+ style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; right: 0px; bottom: 0px; object-fit: contain; color: transparent; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat;"
814
875
  />
815
- </picture>
876
+ </figure>
816
877
  </div>
817
878
  <div
818
879
  class="css-1r2lt0d"
@@ -856,15 +917,22 @@ exports[`getServerSideProps Homepage 1`] = `
856
917
  <div
857
918
  class="css-c5dn4i"
858
919
  >
859
- <picture
860
- class="css-vl2swp"
920
+ <figure
921
+ class="css-439ral"
861
922
  >
862
923
  <img
863
924
  alt="image alt"
864
- class="css-ssxt4f"
925
+ data-nimg="fill"
926
+ decoding="async"
865
927
  loading="lazy"
928
+ sizes="(max-width: 768px) 100vw,
929
+ (max-width: 1200px) 50vw,
930
+ 33vw"
931
+ src="/_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=3840&q=75"
932
+ srcset="/_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=256&q=75 256w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=384&q=75 384w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=640&q=75 640w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=750&q=75 750w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=828&q=75 828w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=1080&q=75 1080w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=1200&q=75 1200w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=1920&q=75 1920w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=2048&q=75 2048w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=3840&q=75 3840w"
933
+ style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; right: 0px; bottom: 0px; object-fit: contain; color: transparent; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat;"
866
934
  />
867
- </picture>
935
+ </figure>
868
936
  </div>
869
937
  <div
870
938
  class="css-1shocxe"
@@ -913,15 +981,22 @@ exports[`getServerSideProps Homepage 1`] = `
913
981
  <div
914
982
  class="css-c5dn4i"
915
983
  >
916
- <picture
917
- class="css-vl2swp"
984
+ <figure
985
+ class="css-439ral"
918
986
  >
919
987
  <img
920
988
  alt="image alt 2"
921
- class="css-ssxt4f"
989
+ data-nimg="fill"
990
+ decoding="async"
922
991
  loading="lazy"
992
+ sizes="(max-width: 768px) 100vw,
993
+ (max-width: 1200px) 50vw,
994
+ 33vw"
995
+ src="/_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=3840&q=75"
996
+ srcset="/_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=256&q=75 256w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=384&q=75 384w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=640&q=75 640w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=750&q=75 750w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=828&q=75 828w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=1080&q=75 1080w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=1200&q=75 1200w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=1920&q=75 1920w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=2048&q=75 2048w, /_next/image?url=https%3A%2F%2Fwww.thesun.co.uk%2Fwp-content%2Fuploads%2F2022%2F03%2FSPORT-PREVIEW-Amadou-Onana-to-WHU.jpg%3Fstrip%3Dall%26w%3D620%26h%3D413%26crop%3D1&w=3840&q=75 3840w"
997
+ style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; right: 0px; bottom: 0px; object-fit: contain; color: transparent; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat;"
923
998
  />
924
- </picture>
999
+ </figure>
925
1000
  </div>
926
1001
  <div
927
1002
  class="css-1shocxe"
package/components/ErrorPage/ErrorPage.tsx CHANGED
@@ -2,7 +2,6 @@ import React from 'react'
2
2
  import {
3
3
  Block,
4
4
  Cell,
5
- Image,
6
5
  TextBlock,
7
6
  styled,
8
7
  getMediaQueryFromTheme,
@@ -10,7 +9,7 @@ import {
10
9
  toNewsKitIcon,
11
10
  } from 'newskit'
12
11
  import Head from 'next/head'
13
- import { NextLink } from '@newskit-render/shared-components'
12
+ import { NextLink, Image } from '@newskit-render/shared-components'
14
13
  import { KeyboardArrowLeft as FilledKeyboardArrowLeft } from '@emotion-icons/material/KeyboardArrowLeft'
15
14
  import Layout from '../layout'
16
15
  import { headerSize } from '../header'
@@ -78,11 +77,9 @@ const ErrorPage = ({ title, errorMassage }: ErrorPageProps) => (
78
77
  <StyledMain>
79
78
  <Block spaceStack="space070">
80
79
  <Image
80
+ aspectRatio="16/9"
81
81
  src="https://plchldr.co/i/594x364?bg=F0F0F0&fc=111111&text=IMG"
82
82
  alt="404 page"
83
- loadingAspectRatio="16x9"
84
- placeholderIcon={true}
85
- loading="lazy"
86
83
  />
87
84
  </Block>
88
85
  <Block spaceStack={{ xs: 'space040', md: 'space050' }}>
package/components/article/__tests__/__snapshots__/index.test.tsx.snap CHANGED
@@ -599,42 +599,20 @@ exports[`Article should render tile and sub title 1`] = `
599
599
  class="css-nvrg5u"
600
600
  >
601
601
  <figure
602
- class="css-r44k6v"
602
+ class="css-121in6i"
603
603
  >
604
- <picture
605
- class="css-1c1nui0"
606
- >
607
- <div
608
- class="css-5pczz7"
609
- >
610
- <div
611
- class="css-1q2lbmy"
612
- >
613
- <svg
614
- aria-hidden="true"
615
- class="css-34d4d9-EmotionIconBase ex0cdmw0"
616
- fill="currentColor"
617
- focusable="false"
618
- viewBox="0 0 24 24"
619
- xmlns="http://www.w3.org/2000/svg"
620
- >
621
- <path
622
- d="M0 0h24v24H0V0z"
623
- fill="none"
624
- />
625
- <path
626
- d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z"
627
- />
628
- </svg>
629
- </div>
630
- </div>
631
- <img
632
- alt="testIMG"
633
- class="css-1qgqq71"
634
- loading="lazy"
635
- src="img//url"
636
- />
637
- </picture>
604
+ <img
605
+ alt="testIMG"
606
+ data-nimg="fill"
607
+ decoding="async"
608
+ loading="lazy"
609
+ sizes="(max-width: 768px) 100vw,
610
+ (max-width: 1200px) 50vw,
611
+ 33vw"
612
+ src="/_next/image?url=%2Fimg%2Furl&w=3840&q=75"
613
+ srcset="/_next/image?url=%2Fimg%2Furl&w=256&q=75 256w, /_next/image?url=%2Fimg%2Furl&w=384&q=75 384w, /_next/image?url=%2Fimg%2Furl&w=640&q=75 640w, /_next/image?url=%2Fimg%2Furl&w=750&q=75 750w, /_next/image?url=%2Fimg%2Furl&w=828&q=75 828w, /_next/image?url=%2Fimg%2Furl&w=1080&q=75 1080w, /_next/image?url=%2Fimg%2Furl&w=1200&q=75 1200w, /_next/image?url=%2Fimg%2Furl&w=1920&q=75 1920w, /_next/image?url=%2Fimg%2Furl&w=2048&q=75 2048w, /_next/image?url=%2Fimg%2Furl&w=3840&q=75 3840w"
614
+ style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; right: 0px; bottom: 0px; object-fit: contain; color: transparent; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat;"
615
+ />
638
616
  </figure>
639
617
  </div>
640
618
  <div
@@ -1025,18 +1003,22 @@ exports[`Article should render tile and sub title 1`] = `
1025
1003
  <div
1026
1004
  class="css-14avdtw"
1027
1005
  >
1028
- <picture
1029
- class="css-1li59sn"
1006
+ <figure
1007
+ class="css-yzl8al"
1030
1008
  >
1031
- <div
1032
- class="css-5pczz7"
1033
- />
1034
1009
  <img
1035
- alt="Card Media"
1036
- class="css-n57idg"
1037
- src="https://plchldr.co/i/70x50"
1010
+ alt="Prince Harry"
1011
+ data-nimg="fill"
1012
+ decoding="async"
1013
+ loading="lazy"
1014
+ sizes="(max-width: 768px) 100vw,
1015
+ (max-width: 1200px) 50vw,
1016
+ 33vw"
1017
+ src="/_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=3840&q=75"
1018
+ srcset="/_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=256&q=75 256w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=384&q=75 384w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=640&q=75 640w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=750&q=75 750w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=828&q=75 828w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=1080&q=75 1080w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=1200&q=75 1200w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=1920&q=75 1920w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=2048&q=75 2048w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=3840&q=75 3840w"
1019
+ style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; right: 0px; bottom: 0px; object-fit: contain; color: transparent; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat;"
1038
1020
  />
1039
- </picture>
1021
+ </figure>
1040
1022
  </div>
1041
1023
  <div
1042
1024
  class="css-1r2lt0d"
@@ -1068,18 +1050,22 @@ exports[`Article should render tile and sub title 1`] = `
1068
1050
  <div
1069
1051
  class="css-14avdtw"
1070
1052
  >
1071
- <picture
1072
- class="css-1li59sn"
1053
+ <figure
1054
+ class="css-yzl8al"
1073
1055
  >
1074
- <div
1075
- class="css-5pczz7"
1076
- />
1077
1056
  <img
1078
- alt="Card Media"
1079
- class="css-n57idg"
1080
- src="https://plchldr.co/i/70x50"
1057
+ alt="Meghan Markle"
1058
+ data-nimg="fill"
1059
+ decoding="async"
1060
+ loading="lazy"
1061
+ sizes="(max-width: 768px) 100vw,
1062
+ (max-width: 1200px) 50vw,
1063
+ 33vw"
1064
+ src="/_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=3840&q=75"
1065
+ srcset="/_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=256&q=75 256w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=384&q=75 384w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=640&q=75 640w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=750&q=75 750w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=828&q=75 828w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=1080&q=75 1080w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=1200&q=75 1200w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=1920&q=75 1920w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=2048&q=75 2048w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=3840&q=75 3840w"
1066
+ style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; right: 0px; bottom: 0px; object-fit: contain; color: transparent; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat;"
1081
1067
  />
1082
- </picture>
1068
+ </figure>
1083
1069
  </div>
1084
1070
  <div
1085
1071
  class="css-1r2lt0d"
@@ -1235,18 +1221,22 @@ exports[`Article should render tile and sub title 1`] = `
1235
1221
  <div
1236
1222
  class="css-b5xivb"
1237
1223
  >
1238
- <picture
1239
- class="css-qg6b0i"
1224
+ <figure
1225
+ class="css-yzl8al"
1240
1226
  >
1241
- <div
1242
- class="css-5pczz7"
1243
- />
1244
1227
  <img
1245
1228
  alt="Prince Harry"
1246
- class="css-1qgqq71"
1247
- src="https://plchldr.co/i/70x50"
1229
+ data-nimg="fill"
1230
+ decoding="async"
1231
+ loading="lazy"
1232
+ sizes="(max-width: 768px) 100vw,
1233
+ (max-width: 1200px) 50vw,
1234
+ 33vw"
1235
+ src="/_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=3840&q=75"
1236
+ srcset="/_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=256&q=75 256w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=384&q=75 384w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=640&q=75 640w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=750&q=75 750w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=828&q=75 828w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=1080&q=75 1080w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=1200&q=75 1200w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=1920&q=75 1920w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=2048&q=75 2048w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=3840&q=75 3840w"
1237
+ style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; right: 0px; bottom: 0px; object-fit: contain; color: transparent; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat;"
1248
1238
  />
1249
- </picture>
1239
+ </figure>
1250
1240
  </div>
1251
1241
  <div
1252
1242
  class="css-1shocxe"
@@ -1295,18 +1285,22 @@ exports[`Article should render tile and sub title 1`] = `
1295
1285
  <div
1296
1286
  class="css-b5xivb"
1297
1287
  >
1298
- <picture
1299
- class="css-qg6b0i"
1288
+ <figure
1289
+ class="css-yzl8al"
1300
1290
  >
1301
- <div
1302
- class="css-5pczz7"
1303
- />
1304
1291
  <img
1305
1292
  alt="Meghan Markle"
1306
- class="css-1qgqq71"
1307
- src="https://plchldr.co/i/70x50"
1293
+ data-nimg="fill"
1294
+ decoding="async"
1295
+ loading="lazy"
1296
+ sizes="(max-width: 768px) 100vw,
1297
+ (max-width: 1200px) 50vw,
1298
+ 33vw"
1299
+ src="/_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=3840&q=75"
1300
+ srcset="/_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=256&q=75 256w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=384&q=75 384w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=640&q=75 640w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=750&q=75 750w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=828&q=75 828w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=1080&q=75 1080w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=1200&q=75 1200w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=1920&q=75 1920w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=2048&q=75 2048w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=3840&q=75 3840w"
1301
+ style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; right: 0px; bottom: 0px; object-fit: contain; color: transparent; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat;"
1308
1302
  />
1309
- </picture>
1303
+ </figure>
1310
1304
  </div>
1311
1305
  <div
1312
1306
  class="css-1shocxe"