@newskit-render/core 1.91.0-alpha.2 → 2.1.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/CHANGELOG.md +40 -0
  2. package/__tests__/pages/__snapshots__/[articleSlug].test.tsx.snap +6 -6
  3. package/__tests__/pages/__snapshots__/home.test.tsx.snap +22 -37
  4. package/components/ErrorPage/ErrorPage.tsx +2 -0
  5. package/components/article/__tests__/__snapshots__/index.test.tsx.snap +30 -8
  6. package/components/article/__tests__/index.test.tsx +3 -0
  7. package/components/article/index.tsx +12 -1
  8. package/components/footer/index.tsx +2 -0
  9. package/components/section/layouts/Block.tsx +5 -1
  10. package/components/section/layouts/__tests__/__snapshots__/Lead.test.tsx.snap +3 -3
  11. package/components/section/sectionUtils.ts +12 -2
  12. package/components/teaser/index.tsx +1 -0
  13. package/components/teaser/variant-types.ts +1 -1
  14. package/infrastructure/.circleci/config.yml +744 -738
  15. package/package.json +11 -11
  16. package/pages/_document.tsx +4 -1
  17. package/temp/_app.tsx +1 -0
  18. package/temp/_document.tsx +17 -15
  19. package/temp/header.tsx +4 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,46 @@
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.1.0](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@2.1.0-alpha.0...@newskit-render/core@2.1.0) (2022-09-28)
7
+
8
+ **Note:** Version bump only for package @newskit-render/core
9
+
10
+
11
+
12
+
13
+
14
+ # [2.0.0](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@2.0.0-alpha.3...@newskit-render/core@2.0.0) (2022-09-28)
15
+
16
+ **Note:** Version bump only for package @newskit-render/core
17
+
18
+
19
+
20
+
21
+
22
+ # [1.92.0](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.92.0-alpha.0...@newskit-render/core@1.92.0) (2022-09-26)
23
+
24
+ **Note:** Version bump only for package @newskit-render/core
25
+
26
+
27
+
28
+
29
+
30
+ ## [1.91.1](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.91.1-alpha.0...@newskit-render/core@1.91.1) (2022-09-26)
31
+
32
+ **Note:** Version bump only for package @newskit-render/core
33
+
34
+
35
+
36
+
37
+
38
+ # [1.91.0](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.91.0-alpha.3...@newskit-render/core@1.91.0) (2022-09-23)
39
+
40
+ **Note:** Version bump only for package @newskit-render/core
41
+
42
+
43
+
44
+
45
+
6
46
  ## [1.90.2](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.90.2-alpha.0...@newskit-render/core@1.90.2) (2022-09-16)
7
47
 
8
48
  **Note:** Version bump only for package @newskit-render/core
package/__tests__/pages/__snapshots__/[articleSlug].test.tsx.snap CHANGED
@@ -376,7 +376,7 @@ exports[`Recommendation render related article page when data is null page 1`] =
376
376
  class="css-16in0m0"
377
377
  >
378
378
  <a
379
- class="css-110xuym"
379
+ class="css-xnc618"
380
380
  data-testid="buttonLink"
381
381
  href="https://www.newskit.co.uk/"
382
382
  >
@@ -638,7 +638,7 @@ exports[`Recommendation render related article page when data is null page 1`] =
638
638
  class="css-bmafgm"
639
639
  >
640
640
  <a
641
- class="css-110xuym"
641
+ class="css-xnc618"
642
642
  data-testid="buttonLink"
643
643
  href="https://www.newskit.co.uk/"
644
644
  >
@@ -943,7 +943,7 @@ exports[`Recommendation render related article page when data is null page 1`] =
943
943
  class="css-1h0bvuz"
944
944
  >
945
945
  <a
946
- class="css-1jv78aa"
946
+ class="css-1whjihf"
947
947
  data-testid="buttonLink"
948
948
  href="/"
949
949
  >
@@ -1013,7 +1013,7 @@ exports[`Recommendation render related article page when data is null page 1`] =
1013
1013
  class="css-cprg63"
1014
1014
  >
1015
1015
  <a
1016
- class="css-1jv78aa"
1016
+ class="css-1whjihf"
1017
1017
  data-testid="buttonLink"
1018
1018
  href="/"
1019
1019
  >
@@ -1097,7 +1097,7 @@ exports[`Recommendation render related article page when data is null page 1`] =
1097
1097
  class="css-1h0bvuz"
1098
1098
  >
1099
1099
  <a
1100
- class="css-1jv78aa"
1100
+ class="css-1whjihf"
1101
1101
  data-testid="buttonLink"
1102
1102
  href="/relatedArticles"
1103
1103
  >
@@ -1158,7 +1158,7 @@ exports[`Recommendation render related article page when data is null page 1`] =
1158
1158
  class="css-cprg63"
1159
1159
  >
1160
1160
  <a
1161
- class="css-1jv78aa"
1161
+ class="css-1whjihf"
1162
1162
  data-testid="buttonLink"
1163
1163
  href="/relatedArticles"
1164
1164
  >
package/__tests__/pages/__snapshots__/home.test.tsx.snap CHANGED
@@ -259,7 +259,7 @@ exports[`getServerSideProps Homepage 1`] = `
259
259
  <img
260
260
  alt=""
261
261
  class="css-ssxt4f"
262
- src=""
262
+ loading="lazy"
263
263
  />
264
264
  </picture>
265
265
  </div>
@@ -310,7 +310,7 @@ exports[`getServerSideProps Homepage 1`] = `
310
310
  <img
311
311
  alt=""
312
312
  class="css-ssxt4f"
313
- src=""
313
+ loading="lazy"
314
314
  />
315
315
  </picture>
316
316
  </div>
@@ -358,7 +358,7 @@ exports[`getServerSideProps Homepage 1`] = `
358
358
  <img
359
359
  alt=""
360
360
  class="css-ssxt4f"
361
- src=""
361
+ loading="lazy"
362
362
  />
363
363
  </picture>
364
364
  </div>
@@ -410,15 +410,12 @@ exports[`getServerSideProps Homepage 1`] = `
410
410
  class="css-1rsw0n0"
411
411
  >
412
412
  <picture
413
- class="css-38m0e9"
413
+ class="css-vl2swp"
414
414
  >
415
- <div
416
- class="css-5pczz7"
417
- />
418
415
  <img
419
416
  alt="image alt"
420
- class="css-1qgqq71"
421
- src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
417
+ class="css-ssxt4f"
418
+ loading="lazy"
422
419
  />
423
420
  </picture>
424
421
  </div>
@@ -461,15 +458,12 @@ exports[`getServerSideProps Homepage 1`] = `
461
458
  class="css-1rsw0n0"
462
459
  >
463
460
  <picture
464
- class="css-38m0e9"
461
+ class="css-vl2swp"
465
462
  >
466
- <div
467
- class="css-5pczz7"
468
- />
469
463
  <img
470
464
  alt="image alt 2"
471
- class="css-1qgqq71"
472
- src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
465
+ class="css-ssxt4f"
466
+ loading="lazy"
473
467
  />
474
468
  </picture>
475
469
  </div>
@@ -517,7 +511,7 @@ exports[`getServerSideProps Homepage 1`] = `
517
511
  <img
518
512
  alt=""
519
513
  class="css-ssxt4f"
520
- src=""
514
+ loading="lazy"
521
515
  />
522
516
  </picture>
523
517
  </div>
@@ -560,15 +554,12 @@ exports[`getServerSideProps Homepage 1`] = `
560
554
  class="css-1rsw0n0"
561
555
  >
562
556
  <picture
563
- class="css-38m0e9"
557
+ class="css-vl2swp"
564
558
  >
565
- <div
566
- class="css-5pczz7"
567
- />
568
559
  <img
569
560
  alt="image alt 3"
570
- class="css-1qgqq71"
571
- src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
561
+ class="css-ssxt4f"
562
+ loading="lazy"
572
563
  />
573
564
  </picture>
574
565
  </div>
@@ -719,7 +710,7 @@ exports[`getServerSideProps Homepage 1`] = `
719
710
  class="css-x4egtb"
720
711
  >
721
712
  <picture
722
- class="css-fmjvjr"
713
+ class="css-38m0e9"
723
714
  >
724
715
  <div
725
716
  class="css-5pczz7"
@@ -767,7 +758,7 @@ exports[`getServerSideProps Homepage 1`] = `
767
758
  class="css-1rsw0n0"
768
759
  >
769
760
  <picture
770
- class="css-qg6b0i"
761
+ class="css-38m0e9"
771
762
  >
772
763
  <div
773
764
  class="css-5pczz7"
@@ -812,7 +803,7 @@ exports[`getServerSideProps Homepage 1`] = `
812
803
  class="css-1rsw0n0"
813
804
  >
814
805
  <picture
815
- class="css-qg6b0i"
806
+ class="css-38m0e9"
816
807
  >
817
808
  <div
818
809
  class="css-5pczz7"
@@ -866,15 +857,12 @@ exports[`getServerSideProps Homepage 1`] = `
866
857
  class="css-c5dn4i"
867
858
  >
868
859
  <picture
869
- class="css-38m0e9"
860
+ class="css-vl2swp"
870
861
  >
871
- <div
872
- class="css-5pczz7"
873
- />
874
862
  <img
875
863
  alt="image alt"
876
- class="css-1qgqq71"
877
- src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
864
+ class="css-ssxt4f"
865
+ loading="lazy"
878
866
  />
879
867
  </picture>
880
868
  </div>
@@ -926,15 +914,12 @@ exports[`getServerSideProps Homepage 1`] = `
926
914
  class="css-c5dn4i"
927
915
  >
928
916
  <picture
929
- class="css-38m0e9"
917
+ class="css-vl2swp"
930
918
  >
931
- <div
932
- class="css-5pczz7"
933
- />
934
919
  <img
935
920
  alt="image alt 2"
936
- class="css-1qgqq71"
937
- src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
921
+ class="css-ssxt4f"
922
+ loading="lazy"
938
923
  />
939
924
  </picture>
940
925
  </div>
package/components/ErrorPage/ErrorPage.tsx CHANGED
@@ -81,6 +81,8 @@ const ErrorPage = ({ title, errorMassage }: ErrorPageProps) => (
81
81
  src="https://plchldr.co/i/594x364?bg=F0F0F0&fc=111111&text=IMG"
82
82
  alt="404 page"
83
83
  loadingAspectRatio="16x9"
84
+ placeholderIcon={true}
85
+ loading="lazy"
84
86
  />
85
87
  </Block>
86
88
  <Block spaceStack={{ xs: 'space040', md: 'space050' }}>
package/components/article/__tests__/__snapshots__/index.test.tsx.snap CHANGED
@@ -376,7 +376,7 @@ exports[`Article should render tile and sub title 1`] = `
376
376
  class="css-16in0m0"
377
377
  >
378
378
  <a
379
- class="css-110xuym"
379
+ class="css-xnc618"
380
380
  data-testid="buttonLink"
381
381
  href="https://www.newskit.co.uk/"
382
382
  >
@@ -614,14 +614,36 @@ exports[`Article should render tile and sub title 1`] = `
614
614
  class="css-r44k6v"
615
615
  >
616
616
  <picture
617
- class="css-38m0e9"
617
+ class="css-1c1nui0"
618
618
  >
619
619
  <div
620
620
  class="css-5pczz7"
621
- />
621
+ >
622
+ <div
623
+ class="css-1q2lbmy"
624
+ >
625
+ <svg
626
+ aria-hidden="true"
627
+ class="css-34d4d9-EmotionIconBase ex0cdmw0"
628
+ fill="currentColor"
629
+ focusable="false"
630
+ viewBox="0 0 24 24"
631
+ xmlns="http://www.w3.org/2000/svg"
632
+ >
633
+ <path
634
+ d="M0 0h24v24H0V0z"
635
+ fill="none"
636
+ />
637
+ <path
638
+ 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"
639
+ />
640
+ </svg>
641
+ </div>
642
+ </div>
622
643
  <img
623
644
  alt="testIMG"
624
645
  class="css-1qgqq71"
646
+ loading="lazy"
625
647
  src="img//url"
626
648
  />
627
649
  </picture>
@@ -688,7 +710,7 @@ exports[`Article should render tile and sub title 1`] = `
688
710
  class="css-bmafgm"
689
711
  >
690
712
  <a
691
- class="css-110xuym"
713
+ class="css-xnc618"
692
714
  data-testid="buttonLink"
693
715
  href="https://www.newskit.co.uk/"
694
716
  >
@@ -993,7 +1015,7 @@ exports[`Article should render tile and sub title 1`] = `
993
1015
  class="css-1h0bvuz"
994
1016
  >
995
1017
  <a
996
- class="css-1jv78aa"
1018
+ class="css-1whjihf"
997
1019
  data-testid="buttonLink"
998
1020
  href="/"
999
1021
  >
@@ -1167,7 +1189,7 @@ exports[`Article should render tile and sub title 1`] = `
1167
1189
  class="css-cprg63"
1168
1190
  >
1169
1191
  <a
1170
- class="css-1jv78aa"
1192
+ class="css-1whjihf"
1171
1193
  data-testid="buttonLink"
1172
1194
  href="/"
1173
1195
  >
@@ -1251,7 +1273,7 @@ exports[`Article should render tile and sub title 1`] = `
1251
1273
  class="css-1h0bvuz"
1252
1274
  >
1253
1275
  <a
1254
- class="css-1jv78aa"
1276
+ class="css-1whjihf"
1255
1277
  data-testid="buttonLink"
1256
1278
  href="/relatedArticles"
1257
1279
  >
@@ -1441,7 +1463,7 @@ exports[`Article should render tile and sub title 1`] = `
1441
1463
  class="css-cprg63"
1442
1464
  >
1443
1465
  <a
1444
- class="css-1jv78aa"
1466
+ class="css-1whjihf"
1445
1467
  data-testid="buttonLink"
1446
1468
  href="/relatedArticles"
1447
1469
  >
package/components/article/__tests__/index.test.tsx CHANGED
@@ -106,6 +106,9 @@ jest.mock('../../../helpers/getYear', () => ({
106
106
  }))
107
107
 
108
108
  describe('Article', () => {
109
+ beforeAll(() => {
110
+ HTMLImageElement.prototype.loading = 'lazy'
111
+ })
109
112
  test('should render tile and sub title', () => {
110
113
  const { getByTestId, asFragment } = renderWithTheme(Article, articleData)
111
114
  const headLine = within(getByTestId('HeadLine'))
package/components/article/index.tsx CHANGED
@@ -31,6 +31,7 @@ import {
31
31
  } from '../../helpers/global-types'
32
32
  import ShareButton from '../common/ShareButton'
33
33
  import Layout from '../layout'
34
+ import { ratioMap } from '../section/sectionUtils'
34
35
 
35
36
  export type UniversalArticle = {
36
37
  id: string
@@ -234,7 +235,17 @@ const ArticlePage: React.FC<ArticleProps> = ({
234
235
  }}
235
236
  >
236
237
  <StyledFigure>
237
- <Image src={media.crops[0].url} alt={media.crops[0].alt} />
238
+ <Image
239
+ src={media.crops[0].url}
240
+ alt={media.crops[0].alt}
241
+ placeholderIcon={true}
242
+ loading="lazy"
243
+ loadingAspectRatio={
244
+ ratioMap[media?.crops[0].aspectRatio]
245
+ ? ratioMap[media?.crops[0].aspectRatio]
246
+ : media?.crops[0].aspectRatio
247
+ }
248
+ />
238
249
  </StyledFigure>
239
250
  </Block>
240
251
  )}
package/components/footer/index.tsx CHANGED
@@ -87,6 +87,8 @@ const Footer = () => {
87
87
  overrides={{
88
88
  width: clientNavigationLogos[theme.name].width,
89
89
  }}
90
+ placeholderIcon={true}
91
+ loading="lazy"
90
92
  />
91
93
  )}
92
94
  </Block>
package/components/section/layouts/Block.tsx CHANGED
@@ -42,7 +42,11 @@ export const getBlock = (
42
42
  url={teaserURL(
43
43
  ('article' in sliceBlock && sliceBlock.article) as ArticleTeaser
44
44
  )}
45
- media={getMedia(media as Media)}
45
+ media={{
46
+ ...getMedia(media as Media),
47
+ placeholderIcon: true,
48
+ loading: 'lazy',
49
+ }}
46
50
  title={headline as string}
47
51
  teaser={teaserSummary(summary as TeaserSummary)}
48
52
  />
package/components/section/layouts/__tests__/__snapshots__/Lead.test.tsx.snap CHANGED
@@ -22,7 +22,7 @@ exports[`Lead should render Lead 1`] = `
22
22
  <img
23
23
  alt=""
24
24
  class="css-ssxt4f"
25
- src=""
25
+ loading="lazy"
26
26
  />
27
27
  </picture>
28
28
  </div>
@@ -73,7 +73,7 @@ exports[`Lead should render Lead 1`] = `
73
73
  <img
74
74
  alt=""
75
75
  class="css-ssxt4f"
76
- src=""
76
+ loading="lazy"
77
77
  />
78
78
  </picture>
79
79
  </div>
@@ -121,7 +121,7 @@ exports[`Lead should render Lead 1`] = `
121
121
  <img
122
122
  alt=""
123
123
  class="css-ssxt4f"
124
- src=""
124
+ loading="lazy"
125
125
  />
126
126
  </picture>
127
127
  </div>
package/components/section/sectionUtils.ts CHANGED
@@ -16,12 +16,16 @@ export const getMedia = (media?: Media) => {
16
16
  ? {
17
17
  src: media?.crops[0].url || '',
18
18
  alt: media?.crops[0].alt || '',
19
- loadingAspectRatio: media?.crops[0].aspectRatio || '',
19
+ loadingAspectRatio: ratioMap[media?.crops[0].aspectRatio]
20
+ ? ratioMap[media?.crops[0].aspectRatio]
21
+ : media?.crops[0].aspectRatio || '',
20
22
  }
21
23
  : {
22
24
  src: media?.posterImage?.crop?.url || '',
23
25
  alt: media?.posterImage?.crop?.alt || '',
24
- loadingAspectRatio: media?.posterImage?.crop?.aspectRatio || '',
26
+ loadingAspectRatio: ratioMap[media?.posterImage?.crop?.aspectRatio]
27
+ ? ratioMap[media?.posterImage?.crop?.aspectRatio]
28
+ : media?.posterImage?.crop?.aspectRatio || '',
25
29
  }
26
30
  }
27
31
 
@@ -49,3 +53,9 @@ export const teaserURL = (teaser: ArticleTeaser) => {
49
53
  ? `${catagory}/${id}/${generateArticleSlug(headline)}`
50
54
  : catagory
51
55
  }
56
+
57
+ export const ratioMap: Record<string, string> = {
58
+ portrait: '2:3',
59
+ landscape: '3:2',
60
+ hero: '16:9',
61
+ }
package/components/teaser/index.tsx CHANGED
@@ -25,6 +25,7 @@ const Teaser: React.FC<TeaserProps> = ({
25
25
  media={{
26
26
  ...presets.media,
27
27
  ...media,
28
+ loadingAspectRatio: media?.loadingAspectRatio,
28
29
  }}
29
30
  overrides={presets.card}
30
31
  >
package/components/teaser/variant-types.ts CHANGED
@@ -3,7 +3,7 @@ import { CardProps } from 'newskit'
3
3
  export type VariantsObject = {
4
4
  layout: CardProps['layout']
5
5
  card?: {}
6
- media?: {}
6
+ media?: { loadingAspectRatio?: string }
7
7
  title: {
8
8
  stylePreset?: string | {}
9
9
  typographyPreset?: