@newskit-render/core 1.42.3 → 1.45.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.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,101 @@
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
+ # [1.45.0](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.44.6...@newskit-render/core@1.45.0) (2022-04-01)
7
+
8
+
9
+ ### Features
10
+
11
+ * **PPDSR-694:** Ensure sitemap works on demo site ([#664](https://github.com/newscorp-ghfb/ncu-newskit-render/issues/664)) ([ba3d10f](https://github.com/newscorp-ghfb/ncu-newskit-render/commit/ba3d10f296f50ba40a9684041f10ce2f9c0b3424))
12
+
13
+
14
+
15
+
16
+
17
+ ## [1.44.6](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.44.5...@newskit-render/core@1.44.6) (2022-04-01)
18
+
19
+ **Note:** Version bump only for package @newskit-render/core
20
+
21
+
22
+
23
+
24
+
25
+ ## [1.44.5](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.44.4...@newskit-render/core@1.44.5) (2022-04-01)
26
+
27
+ **Note:** Version bump only for package @newskit-render/core
28
+
29
+
30
+
31
+
32
+
33
+ ## [1.44.4](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.44.3...@newskit-render/core@1.44.4) (2022-03-31)
34
+
35
+
36
+ ### Bug Fixes
37
+
38
+ * **PPDSR-747:** Add dob data to profile ([#660](https://github.com/newscorp-ghfb/ncu-newskit-render/issues/660)) ([8ebd19b](https://github.com/newscorp-ghfb/ncu-newskit-render/commit/8ebd19b7d5003074e4d25c457c0c0747c7796cc7))
39
+
40
+
41
+
42
+
43
+
44
+ ## [1.44.3](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.44.2...@newskit-render/core@1.44.3) (2022-03-31)
45
+
46
+ **Note:** Version bump only for package @newskit-render/core
47
+
48
+
49
+
50
+
51
+
52
+ ## [1.44.2](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.44.1...@newskit-render/core@1.44.2) (2022-03-30)
53
+
54
+ **Note:** Version bump only for package @newskit-render/core
55
+
56
+
57
+
58
+
59
+
60
+ ## [1.44.1](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.44.0...@newskit-render/core@1.44.1) (2022-03-30)
61
+
62
+
63
+ ### Bug Fixes
64
+
65
+ * **PPDSR-691:** missing styles in temp files ([#658](https://github.com/newscorp-ghfb/ncu-newskit-render/issues/658)) ([2b01484](https://github.com/newscorp-ghfb/ncu-newskit-render/commit/2b01484dba99814d0a9ddb0987e9ba0b48f6401f))
66
+
67
+
68
+
69
+
70
+
71
+ # [1.44.0](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.43.1...@newskit-render/core@1.44.0) (2022-03-29)
72
+
73
+
74
+ ### Features
75
+
76
+ * **PPDSR-725:** Add logic to stop cancelation if user is in payment failure ([#653](https://github.com/newscorp-ghfb/ncu-newskit-render/issues/653)) ([7d07e65](https://github.com/newscorp-ghfb/ncu-newskit-render/commit/7d07e65ac0c31186cca1df8d9ae66606148c4797))
77
+
78
+
79
+
80
+
81
+
82
+ ## [1.43.1](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.43.0...@newskit-render/core@1.43.1) (2022-03-29)
83
+
84
+ **Note:** Version bump only for package @newskit-render/core
85
+
86
+
87
+
88
+
89
+
90
+ # [1.43.0](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.42.3...@newskit-render/core@1.43.0) (2022-03-28)
91
+
92
+
93
+ ### Features
94
+
95
+ * **PPDSR-691:** add account link ([#646](https://github.com/newscorp-ghfb/ncu-newskit-render/issues/646)) ([5e41f45](https://github.com/newscorp-ghfb/ncu-newskit-render/commit/5e41f45ac200963ab23ea91ed3115edfdd13757a))
96
+
97
+
98
+
99
+
100
+
6
101
  ## [1.42.3](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.42.2...@newskit-render/core@1.42.3) (2022-03-28)
7
102
 
8
103
 
@@ -1,10 +1,7 @@
1
- import { within } from '@testing-library/react'
2
- import Article, {
1
+ import {
3
2
  ArticleSlug,
4
3
  getServerSideProps,
5
4
  } from '../../pages/[section]/[articleId]/[articleSlug]'
6
- import { renderWithQuery } from '../../helpers/test-utils'
7
- import { getUniversalArticleMock } from '../../helpers/mocks'
8
5
  import { URL, Slug } from '../../helpers/global-types'
9
6
 
10
7
  const props: ArticleSlug = {
@@ -57,6 +54,31 @@ const props: ArticleSlug = {
57
54
  twitterUsername: 'D_Trump',
58
55
  siteHost: 'hostname',
59
56
  gscId: '4320982',
57
+ recommendations: [
58
+ {
59
+ href:
60
+ 'https://www.thesun.co.uk/wp-content/uploads/2022/03/image-656eaa885d.jpg?strip=all&w=600&h=338&crop=1',
61
+ tag: 'FOOT ON THE GAZ',
62
+ text:
63
+ 'Bale considering short deal with new club before RETIRING after World Cup',
64
+ title: 'FOOT ON THE GAZ',
65
+ },
66
+ {
67
+ href:
68
+ 'https://www.thesun.co.uk/wp-content/uploads/2022/03/image-a21f115694-1.jpg?strip=all&w=600&h=338&crop=1',
69
+ tag: 'TOUGH TIMES',
70
+ text:
71
+ 'I only made £5k last year - I sold £801k villa for cash, says Claire Sweeney',
72
+ title: 'TOUGH TIMES',
73
+ },
74
+ {
75
+ href: null,
76
+ tag: 'TOUGH TIMES',
77
+ text:
78
+ 'I only made £5k last year - I sold £801k villa for cash, says Claire Sweeney',
79
+ title: 'TOUGH TIMES',
80
+ },
81
+ ],
60
82
  }
61
83
 
62
84
  const user = {
@@ -87,6 +109,9 @@ jest.mock('@newskit-render/api', () => ({
87
109
  })
88
110
  }),
89
111
  getAcsCookie: jest.fn().mockReturnValue({ Cookie: 'something' }),
112
+ Publisher: {
113
+ SUN_UK: 'SUN_UK',
114
+ },
90
115
  }))
91
116
 
92
117
  jest.mock('@newskit-render/my-account', () => {
@@ -94,21 +119,37 @@ jest.mock('@newskit-render/my-account', () => {
94
119
  PastDueBannerExternal: 'PastDueBannerExternal',
95
120
  }
96
121
  })
122
+ jest.mock('@newskit-render/standalone-components', () => {
123
+ return {
124
+ recommendationsProvider: jest.fn().mockResolvedValueOnce([
125
+ {
126
+ href:
127
+ 'https://www.thesun.co.uk/wp-content/uploads/2022/03/image-656eaa885d.jpg?strip=all&w=600&h=338&crop=1',
128
+ tag: 'FOOT ON THE GAZ',
129
+ text:
130
+ 'Bale considering short deal with new club before RETIRING after World Cup',
131
+ title: 'FOOT ON THE GAZ',
132
+ },
133
+ {
134
+ href:
135
+ 'https://www.thesun.co.uk/wp-content/uploads/2022/03/image-a21f115694-1.jpg?strip=all&w=600&h=338&crop=1',
136
+ tag: 'TOUGH TIMES',
137
+ text:
138
+ 'I only made £5k last year - I sold £801k villa for cash, says Claire Sweeney',
139
+ title: 'TOUGH TIMES',
140
+ },
141
+ {
142
+ href: null,
143
+ tag: 'TOUGH TIMES',
144
+ text:
145
+ 'I only made £5k last year - I sold £801k villa for cash, says Claire Sweeney',
146
+ title: 'TOUGH TIMES',
147
+ },
148
+ ]),
149
+ }
150
+ })
97
151
 
98
152
  describe('Article', () => {
99
- test('should load ArticleDisplay component and pass it query data', async () => {
100
- const { getByTestId } = renderWithQuery(
101
- Article,
102
- getUniversalArticleMock,
103
- props
104
- )
105
-
106
- const headLine = within(getByTestId('HeadLine')).getByText(
107
- 'Mock Article: Lorem ipsum dolor sit amet consectetur adipiscing elit'
108
- )
109
- expect(headLine).toBeInTheDocument()
110
- })
111
-
112
153
  describe('getServerSideProps', () => {
113
154
  beforeAll(() => {
114
155
  process.env = Object.assign(process.env, {
@@ -118,7 +159,7 @@ describe('Article', () => {
118
159
  })
119
160
  })
120
161
 
121
- test('should return props', async () => {
162
+ it('should return props', async () => {
122
163
  const setHeaderMock = jest.fn()
123
164
 
124
165
  const response = await getServerSideProps({
@@ -3,7 +3,8 @@
3
3
  exports[`getServerSideProps Homepage 1`] = `
4
4
  <DocumentFragment>
5
5
  .emotion-0 {
6
- height: 64px;
6
+ height: 80px;
7
+ background-color: #3358CC;
7
8
  }
8
9
 
9
10
  .emotion-0 a,
@@ -15,8 +16,8 @@ exports[`getServerSideProps Homepage 1`] = `
15
16
 
16
17
  @media screen {
17
18
  .emotion-0 {
18
- padding-top: 12px;
19
- padding-bottom: 12px;
19
+ padding-top: 16px;
20
+ padding-bottom: 16px;
20
21
  padding-left: 0;
21
22
  padding-right: 0;
22
23
  }
@@ -24,8 +25,8 @@ exports[`getServerSideProps Homepage 1`] = `
24
25
 
25
26
  @media screen and (min-width: 1024px) {
26
27
  .emotion-0 {
27
- padding-top: 12px;
28
- padding-bottom: 12px;
28
+ padding-top: 16px;
29
+ padding-bottom: 16px;
29
30
  padding-left: 64px;
30
31
  padding-right: 64px;
31
32
  }
@@ -279,16 +280,19 @@ exports[`getServerSideProps Homepage 1`] = `
279
280
  overflow: auto;
280
281
  width: 100%;
281
282
  min-height: 100vh;
282
- background-color: #0A0A0A;
283
+ background-color: #3358CC;
283
284
  left: 0;
284
- top: 64px;
285
- z-index: 1;
285
+ top: 80px;
286
+ z-index: 2;
286
287
  display: none;
287
288
  }
288
289
 
289
290
  @media screen and (min-width: 768px) {
290
291
  .emotion-12 {
291
- display: block;
292
+ display: -webkit-box;
293
+ display: -webkit-flex;
294
+ display: -ms-flexbox;
295
+ display: flex;
292
296
  position: relative;
293
297
  overflow: hidden;
294
298
  width: initial;
@@ -297,6 +301,7 @@ exports[`getServerSideProps Homepage 1`] = `
297
301
  left: initial;
298
302
  top: initial;
299
303
  z-index: 1;
304
+ height: 48px;
300
305
  }
301
306
  }
302
307
 
@@ -341,7 +346,19 @@ exports[`getServerSideProps Homepage 1`] = `
341
346
 
342
347
  @media screen and (min-width: 768px) {
343
348
  .emotion-14 {
344
- margin-right: 24px;
349
+ margin-right: 16px;
350
+ }
351
+ }
352
+
353
+ @media screen and (max-width: 767px) {
354
+ .emotion-14 {
355
+ margin-bottom: 24px;
356
+ }
357
+ }
358
+
359
+ @media screen and (min-width: 768px) {
360
+ .emotion-14 {
361
+ margin-bottom: 0;
345
362
  }
346
363
  }
347
364
 
@@ -432,15 +449,17 @@ exports[`getServerSideProps Homepage 1`] = `
432
449
  />
433
450
  <path
434
451
  d="M61.846.936c3.35.413 4.944 4.005 4.92 8.746l.017-.013c-5.497 4.462-16.323 7.515-26.958 1.71l.011-.016c1.568.832 3.224 1.475 5.172 1.715 2.386.294 4.303-1.023 6.043-2.889l.124-.134.062-.068.123-.137.123-.138.122-.14.121-.142.061-.071.121-.144.12-.145.146-.178.073-.09.182-.226.181-.228.144-.184.144-.185.143-.185.215-.279 1.091-1.431.209-.271.209-.269.14-.178.14-.177.14-.175.141-.173.141-.172.113-.136.113-.135.114-.133.114-.132.057-.065.114-.13.057-.064.115-.127.173-.187.116-.123.175-.18.117-.118C58.328 1.663 59.933.7 61.846.936z"
435
- fill="#aebfff"
452
+ fill="white"
436
453
  />
437
454
  <path
438
455
  d="M26.763 28.981l.011.013c-1.414-.671-2.883-1.176-4.519-1.378-1.738-.214-3.244.513-4.634 1.704l-.11.095-.163.146-.108.1-.108.101-.268.261-.106.107-.106.109-.106.11-.053.056-.105.112-.053.057-.125.136-.124.138-.124.139-.062.07-.123.142-.123.143-.122.145-.122.146-.061.073-.15.183-.075.092-.149.185-.075.093-.149.187-.149.188-.223.283-.296.38-.671.866-.222.285-.222.283-.148.188-.223.28-.149.185-.149.183-.149.182-.15.18-.117.139-.118.138-.118.136-.118.135-.119.133-.119.132-.119.13-.06.064-.12.127-.1.104-.1.103-.1.101-.151.15-.101.098-.102.096-.051.048-.102.094-.206.183-.103.089-.052.044-.104.086c-1.302 1.066-2.706 1.698-4.305 1.5-3.321-.41-4.98-3.93-5.064-8.601l-.097.09c6.351-5.963 17.155-6.757 26.506-2.264z"
439
- fill="#3358cc"
456
+ fill="white"
457
+ fill-opacity="0.4"
440
458
  />
441
459
  <path
442
460
  d="M42.216 35.925c-2.861-.398-5.212-1.275-7.302-2.318l-.189-.095-.188-.096-.186-.097-.231-.122-.229-.123-.182-.099-.226-.125-.224-.126-.178-.101-.177-.102-.264-.153-.349-.205-.278-.166-.276-.166-.411-.249-1.214-.738-.334-.201-.333-.199-2.669-1.45-.012-.013c-9.258-4.447-19.94-3.714-26.315 2.087l-.095.088C.156 20.101 8.779 2.598 25.068 4.608c2.854.352 5.141 1.176 7.14 2.181l.178.09.177.091.175.092.087.046.173.093.172.094.17.095.085.048.211.12.209.121.166.097.165.098.164.098.163.099.162.099.161.099.16.1.261.164.13.082.258.164.256.164 1.137.733.25.161.25.159.312.197.312.194a31.02 31.02 0 0 0 1.568.911l.199.106c10.506 5.694 21.166 2.775 26.7-1.604l.149-.12c-.055 10.998-8.815 28.185-24.55 26.243z"
443
- fill="#577ffb"
461
+ fill="white"
462
+ fill-opacity="0.701961"
444
463
  />
445
464
  </svg>
446
465
  </div>
@@ -449,7 +468,7 @@ exports[`getServerSideProps Homepage 1`] = `
449
468
  >
450
469
  <svg
451
470
  class="emotion-8"
452
- height="40px"
471
+ height="48px"
453
472
  viewBox="0 0 244 40"
454
473
  >
455
474
  <title>
@@ -457,15 +476,17 @@ exports[`getServerSideProps Homepage 1`] = `
457
476
  </title>
458
477
  <path
459
478
  d="M61.846.936c3.35.413 4.944 4.005 4.92 8.746l.017-.013c-5.497 4.462-16.323 7.515-26.958 1.71l.011-.016c1.568.832 3.224 1.475 5.172 1.715 2.386.294 4.303-1.023 6.043-2.889l.124-.134.062-.068.123-.137.123-.138.122-.14.121-.142.061-.071.121-.144.12-.145.146-.178.073-.09.182-.226.181-.228.144-.184.144-.185.143-.185.215-.279 1.091-1.431.209-.271.209-.269.14-.178.14-.177.14-.175.141-.173.141-.172.113-.136.113-.135.114-.133.114-.132.057-.065.114-.13.057-.064.115-.127.173-.187.116-.123.175-.18.117-.118C58.328 1.663 59.933.7 61.846.936z"
460
- fill="#aebfff"
479
+ fill="white"
461
480
  />
462
481
  <path
463
482
  d="M26.763 28.981l.011.013c-1.414-.671-2.883-1.176-4.519-1.378-1.738-.214-3.244.513-4.634 1.704l-.11.095-.163.146-.108.1-.108.101-.268.261-.106.107-.106.109-.106.11-.053.056-.105.112-.053.057-.125.136-.124.138-.124.139-.062.07-.123.142-.123.143-.122.145-.122.146-.061.073-.15.183-.075.092-.149.185-.075.093-.149.187-.149.188-.223.283-.296.38-.671.866-.222.285-.222.283-.148.188-.223.28-.149.185-.149.183-.149.182-.15.18-.117.139-.118.138-.118.136-.118.135-.119.133-.119.132-.119.13-.06.064-.12.127-.1.104-.1.103-.1.101-.151.15-.101.098-.102.096-.051.048-.102.094-.206.183-.103.089-.052.044-.104.086c-1.302 1.066-2.706 1.698-4.305 1.5-3.321-.41-4.98-3.93-5.064-8.601l-.097.09c6.351-5.963 17.155-6.757 26.506-2.264z"
464
- fill="#3358cc"
483
+ fill="white"
484
+ fill-opacity="0.4"
465
485
  />
466
486
  <path
467
487
  d="M42.216 35.925c-2.861-.398-5.212-1.275-7.302-2.318l-.189-.095-.188-.096-.186-.097-.231-.122-.229-.123-.182-.099-.226-.125-.224-.126-.178-.101-.177-.102-.264-.153-.349-.205-.278-.166-.276-.166-.411-.249-1.214-.738-.334-.201-.333-.199-2.669-1.45-.012-.013c-9.258-4.447-19.94-3.714-26.315 2.087l-.095.088C.156 20.101 8.779 2.598 25.068 4.608c2.854.352 5.141 1.176 7.14 2.181l.178.09.177.091.175.092.087.046.173.093.172.094.17.095.085.048.211.12.209.121.166.097.165.098.164.098.163.099.162.099.161.099.16.1.261.164.13.082.258.164.256.164 1.137.733.25.161.25.159.312.197.312.194a31.02 31.02 0 0 0 1.568.911l.199.106c10.506 5.694 21.166 2.775 26.7-1.604l.149-.12c-.055 10.998-8.815 28.185-24.55 26.243z"
468
- fill="#577ffb"
488
+ fill="white"
489
+ fill-opacity="0.701961"
469
490
  />
470
491
  </svg>
471
492
  </div>
@@ -476,9 +497,11 @@ exports[`getServerSideProps Homepage 1`] = `
476
497
  >
477
498
  <div
478
499
  class="emotion-12"
500
+ data-testid="NavigationContainer"
479
501
  >
480
502
  <div
481
503
  class="emotion-13"
504
+ data-testid="Navigation"
482
505
  >
483
506
  <span
484
507
  class="emotion-14"
@@ -3045,7 +3068,7 @@ exports[`getServerSideProps Homepage 1`] = `
3045
3068
  >
3046
3069
  <svg
3047
3070
  class="emotion-5"
3048
- height="40px"
3071
+ height="48px"
3049
3072
  viewBox="0 0 244 40"
3050
3073
  >
3051
3074
  <title>
@@ -3053,15 +3076,17 @@ exports[`getServerSideProps Homepage 1`] = `
3053
3076
  </title>
3054
3077
  <path
3055
3078
  d="M61.846.936c3.35.413 4.944 4.005 4.92 8.746l.017-.013c-5.497 4.462-16.323 7.515-26.958 1.71l.011-.016c1.568.832 3.224 1.475 5.172 1.715 2.386.294 4.303-1.023 6.043-2.889l.124-.134.062-.068.123-.137.123-.138.122-.14.121-.142.061-.071.121-.144.12-.145.146-.178.073-.09.182-.226.181-.228.144-.184.144-.185.143-.185.215-.279 1.091-1.431.209-.271.209-.269.14-.178.14-.177.14-.175.141-.173.141-.172.113-.136.113-.135.114-.133.114-.132.057-.065.114-.13.057-.064.115-.127.173-.187.116-.123.175-.18.117-.118C58.328 1.663 59.933.7 61.846.936z"
3056
- fill="#aebfff"
3079
+ fill="white"
3057
3080
  />
3058
3081
  <path
3059
3082
  d="M26.763 28.981l.011.013c-1.414-.671-2.883-1.176-4.519-1.378-1.738-.214-3.244.513-4.634 1.704l-.11.095-.163.146-.108.1-.108.101-.268.261-.106.107-.106.109-.106.11-.053.056-.105.112-.053.057-.125.136-.124.138-.124.139-.062.07-.123.142-.123.143-.122.145-.122.146-.061.073-.15.183-.075.092-.149.185-.075.093-.149.187-.149.188-.223.283-.296.38-.671.866-.222.285-.222.283-.148.188-.223.28-.149.185-.149.183-.149.182-.15.18-.117.139-.118.138-.118.136-.118.135-.119.133-.119.132-.119.13-.06.064-.12.127-.1.104-.1.103-.1.101-.151.15-.101.098-.102.096-.051.048-.102.094-.206.183-.103.089-.052.044-.104.086c-1.302 1.066-2.706 1.698-4.305 1.5-3.321-.41-4.98-3.93-5.064-8.601l-.097.09c6.351-5.963 17.155-6.757 26.506-2.264z"
3060
- fill="#3358cc"
3083
+ fill="white"
3084
+ fill-opacity="0.4"
3061
3085
  />
3062
3086
  <path
3063
3087
  d="M42.216 35.925c-2.861-.398-5.212-1.275-7.302-2.318l-.189-.095-.188-.096-.186-.097-.231-.122-.229-.123-.182-.099-.226-.125-.224-.126-.178-.101-.177-.102-.264-.153-.349-.205-.278-.166-.276-.166-.411-.249-1.214-.738-.334-.201-.333-.199-2.669-1.45-.012-.013c-9.258-4.447-19.94-3.714-26.315 2.087l-.095.088C.156 20.101 8.779 2.598 25.068 4.608c2.854.352 5.141 1.176 7.14 2.181l.178.09.177.091.175.092.087.046.173.093.172.094.17.095.085.048.211.12.209.121.166.097.165.098.164.098.163.099.162.099.161.099.16.1.261.164.13.082.258.164.256.164 1.137.733.25.161.25.159.312.197.312.194a31.02 31.02 0 0 0 1.568.911l.199.106c10.506 5.694 21.166 2.775 26.7-1.604l.149-.12c-.055 10.998-8.815 28.185-24.55 26.243z"
3064
- fill="#577ffb"
3088
+ fill="white"
3089
+ fill-opacity="0.701961"
3065
3090
  />
3066
3091
  </svg>
3067
3092
  </div>
@@ -12,6 +12,7 @@ import {
12
12
  Visible,
13
13
  TitleBar,
14
14
  } from 'newskit'
15
+ import { ArticleRecommendation } from '@newskit-render/standalone-components'
15
16
  import ViewMoreButton from '../common/ViewMoreButton'
16
17
 
17
18
  const Highlights: React.FC<{
@@ -60,40 +61,10 @@ const Highlights: React.FC<{
60
61
 
61
62
  <Block spaceStack="space040">
62
63
  <Grid xsMargin="space000">
63
- {highlightsArticles.map(({ title, href }) => (
64
- <Cell key={title} xs={12} sm={6} lg={12}>
64
+ {highlightsArticles.map((article) => (
65
+ <Cell key={article.title} xs={12} sm={6} lg={12}>
65
66
  <Block spaceStack="space040" data-testid="HighlightsHorizontalCard">
66
- <Card
67
- href="https://newskit.co.uk/"
68
- layout="horizontal"
69
- media={{
70
- src: href,
71
- alt: 'Card Media',
72
- loadingAspectRatio: '3:2',
73
- overrides: {
74
- width: '150px',
75
- height: '100px',
76
- },
77
- }}
78
- overrides={{
79
- stylePreset: 'cardContainer',
80
- mediaContainer: {
81
- spaceInline: 'space030',
82
- },
83
- }}
84
- >
85
- <Headline
86
- headingAs="h4"
87
- overrides={{
88
- typographyPreset: {
89
- xs: 'editorialHeadline040',
90
- xl: 'editorialHeadline020',
91
- },
92
- }}
93
- >
94
- {title}
95
- </Headline>
96
- </Card>
67
+ <ArticleRecommendation article={article} size="small" />
97
68
  </Block>
98
69
  </Cell>
99
70
  ))}
@@ -13,6 +13,7 @@ import {
13
13
  Headline,
14
14
  Visible,
15
15
  } from 'newskit'
16
+ import { ArticleRecommendation } from '@newskit-render/standalone-components'
16
17
  import ViewMoreButton from '../common/ViewMoreButton'
17
18
 
18
19
  const viewMoreButton = () => <ViewMoreButton href="/" />
@@ -48,65 +49,15 @@ const RelatedArticles: React.FC<{
48
49
  </Block>
49
50
 
50
51
  <Grid xsMargin="space000">
51
- {relatedArticles.map(({ title, href, text, tag }) => (
52
+ {relatedArticles.map((article) => (
52
53
  <Cell
53
- key={title}
54
+ key={article.title}
54
55
  xs={12}
55
56
  sm={6}
56
57
  lg={3}
57
58
  data-testid="RelatedArticlesVerticalCard"
58
59
  >
59
- <Card
60
- media={{
61
- src: href,
62
- alt: title,
63
- loadingAspectRatio: '3:2',
64
- }}
65
- overrides={{
66
- stylePreset: 'cardContainer',
67
- mediaContainer: {
68
- spaceInline: 'space030',
69
- },
70
- }}
71
- >
72
- <Block spaceStack="space060">
73
- <Block
74
- spaceStack={{
75
- xs: 'space040',
76
- md: 'space050',
77
- }}
78
- >
79
- <Headline
80
- headingAs="h6"
81
- overrides={{
82
- typographyPreset: {
83
- xs: 'editorialHeadline020',
84
- md: 'editorialHeadline030',
85
- xl: 'editorialHeadline040',
86
- },
87
- }}
88
- >
89
- {title}
90
- </Headline>
91
- </Block>
92
- <Block
93
- spaceStack={{
94
- xs: 'space040',
95
- md: 'space050',
96
- }}
97
- >
98
- <TextBlock
99
- stylePreset="inkContrast"
100
- typographyPreset={{
101
- xs: 'editorialParagraph010',
102
- md: 'editorialParagraph020',
103
- }}
104
- >
105
- {text}
106
- </TextBlock>
107
- </Block>
108
- </Block>
109
- </Card>
60
+ <ArticleRecommendation article={article} size="large" />
110
61
  </Cell>
111
62
  ))}
112
63
  <Cell xs={12}>