@times-components/ts-components 1.45.1 → 1.46.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 (17) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/dist/components/recommended-articles/RecommendedArticles.d.ts +0 -1
  3. package/dist/components/recommended-articles/RecommendedArticles.js +3 -3
  4. package/dist/components/recommended-articles/RecommendedArticles.stories.js +4 -4
  5. package/dist/components/recommended-articles/RecommendedFetch.d.ts +5 -1
  6. package/dist/components/recommended-articles/RecommendedFetch.js +15 -4
  7. package/dist/components/recommended-articles/__tests__/RecommendedArticles.test.js +4 -4
  8. package/dist/components/recommended-articles/__tests__/RecommendedFetch.test.js +6 -1
  9. package/package.json +3 -3
  10. package/rnw.js +1 -1
  11. package/src/components/latest-from-section/__tests__/__snapshots__/LatestFromSection.test.tsx.snap +60 -78
  12. package/src/components/recommended-articles/RecommendedArticles.stories.tsx +3 -3
  13. package/src/components/recommended-articles/RecommendedArticles.tsx +2 -6
  14. package/src/components/recommended-articles/RecommendedFetch.tsx +21 -4
  15. package/src/components/recommended-articles/__tests__/RecommendedArticles.test.tsx +3 -3
  16. package/src/components/recommended-articles/__tests__/RecommendedFetch.test.tsx +7 -0
  17. package/src/components/recommended-articles/__tests__/__snapshots__/RecommendedArticles.test.tsx.snap +1 -1
package/src/components/latest-from-section/__tests__/__snapshots__/LatestFromSection.test.tsx.snap CHANGED
@@ -115,10 +115,10 @@ exports[`<LatestFromSection> renders 1`] = `
115
115
  class="tc-view__TcView-nuazoi-0 contentContainerClass card-content__TcCardContainer-sc-1w0wvq8-0 hzpWKJ"
116
116
  >
117
117
  <div
118
- class="css-view-1dbjc4n"
118
+ class="tc-view__TcView-nuazoi-0 fPjBcr"
119
119
  >
120
120
  <div
121
- class="css-view-1dbjc4n"
121
+ class="tc-view__TcView-nuazoi-0 fPjBcr"
122
122
  style="margin-bottom: 0px;"
123
123
  >
124
124
  <div
@@ -128,47 +128,42 @@ exports[`<LatestFromSection> renders 1`] = `
128
128
  CYCLING | DAVID WALSH
129
129
  </div>
130
130
  </div>
131
- <h3
131
+ <div
132
132
  aria-level="3"
133
- class="headlineClass css-reset-4rbku5 headlineClass css-text-901oao"
134
- dir="auto"
133
+ class="headlineClass tc-text__TcText-sc-15igzev-0 lhcAkf"
135
134
  role="heading"
136
- style="color: rgb(51, 51, 51); font-family: TimesModern-Bold; font-size: 22px; font-weight: 400; line-height: 27px; margin-bottom: 5px; margin-top: 0px;"
135
+ style="color: rgb(51, 51, 51); font-family: TimesModern-Bold; font-weight: 400; margin-bottom: 5px; font-size: 22px; line-height: 27px; margin-top: 0px;"
137
136
  >
138
137
  The entire Tour bows to the greatness of Cavendish
139
- </h3>
138
+ </div>
140
139
  <div
141
140
  class="css-view-1dbjc4n"
142
141
  >
143
142
  <div
144
- class="summaryHidden summary125Class summaryHidden summary125Class css-text-901oao"
145
- dir="auto"
146
- style="color: rgb(105, 105, 105); flex-wrap: wrap; font-family: TimesDigitalW04; font-size: 14px; line-height: 20px; margin-bottom: 10px;"
143
+ class="summaryHidden summary125Class tc-text__TcText-sc-15igzev-0 lhcAkf"
144
+ style="color: rgb(105, 105, 105); flex-wrap: wrap; margin-bottom: 10px; font-family: TimesDigitalW04; font-size: 14px; line-height: 20px;"
147
145
  >
148
- <span
149
- class="css-text-901oao css-textHasAncestor-16my406"
150
- dir="auto"
146
+ <div
147
+ class="tc-text__TcText-sc-15igzev-0 lhcAkf"
148
+ style="white-space: inherit;"
151
149
  >
152
150
  The story of Mark Cavendish’s heroic return can be told in many ways. In the brilliance of the sprint, mostly. His team-mates had done an outstanding job but ri...
153
- </span>
151
+ </div>
154
152
  </div>
155
153
  <div
156
- class="summaryHidden summary145Class summaryHidden summary145Class css-text-901oao"
157
- dir="auto"
158
- style="color: rgb(105, 105, 105); flex-wrap: wrap; font-family: TimesDigitalW04; font-size: 14px; line-height: 20px; margin-bottom: 10px;"
154
+ class="summaryHidden summary145Class tc-text__TcText-sc-15igzev-0 lhcAkf"
155
+ style="color: rgb(105, 105, 105); flex-wrap: wrap; margin-bottom: 10px; font-family: TimesDigitalW04; font-size: 14px; line-height: 20px;"
159
156
  >
160
- <span
161
- class="css-text-901oao css-textHasAncestor-16my406"
162
- dir="auto"
157
+ <div
158
+ class="tc-text__TcText-sc-15igzev-0 lhcAkf"
159
+ style="white-space: inherit;"
163
160
  >
164
161
  The story of Mark Cavendish’s heroic return can be told in many ways. In the brilliance of the sprint, mostly. His team-mates had done an outstanding job but ri...
165
- </span>
162
+ </div>
166
163
  </div>
167
164
  </div>
168
165
  <div
169
- class="css-text-901oao"
170
- data-testid="datePublication"
171
- dir="auto"
166
+ class="tc-text__TcText-sc-15igzev-0 lhcAkf"
172
167
  style="color: rgb(105, 105, 105); font-family: GillSansMTStd-Medium; font-size: 13px; line-height: 15px; margin-bottom: 5px;"
173
168
  >
174
169
  <time
@@ -178,8 +173,7 @@ exports[`<LatestFromSection> renders 1`] = `
178
173
  </time>
179
174
  </div>
180
175
  <div
181
- class="css-text-901oao"
182
- dir="auto"
176
+ class="tc-text__TcText-sc-15igzev-0 lhcAkf"
183
177
  >
184
178
  <div
185
179
  class="tc-text__TcText-sc-15igzev-0 article-byline__BylineText-ynke2n-0 hgOVOC"
@@ -261,10 +255,10 @@ exports[`<LatestFromSection> renders 1`] = `
261
255
  class="tc-view__TcView-nuazoi-0 contentContainerClass card-content__TcCardContainer-sc-1w0wvq8-0 hzpWKJ"
262
256
  >
263
257
  <div
264
- class="css-view-1dbjc4n"
258
+ class="tc-view__TcView-nuazoi-0 fPjBcr"
265
259
  >
266
260
  <div
267
- class="css-view-1dbjc4n"
261
+ class="tc-view__TcView-nuazoi-0 fPjBcr"
268
262
  style="margin-bottom: 0px;"
269
263
  >
270
264
  <div
@@ -274,47 +268,42 @@ exports[`<LatestFromSection> renders 1`] = `
274
268
  EURO 2020 | MATT LAWTON
275
269
  </div>
276
270
  </div>
277
- <h3
271
+ <div
278
272
  aria-level="3"
279
- class="headlineClass css-reset-4rbku5 headlineClass css-text-901oao"
280
- dir="auto"
273
+ class="headlineClass tc-text__TcText-sc-15igzev-0 lhcAkf"
281
274
  role="heading"
282
- style="color: rgb(51, 51, 51); font-family: TimesModern-Bold; font-size: 22px; font-weight: 400; line-height: 27px; margin-bottom: 5px; margin-top: 0px;"
275
+ style="color: rgb(51, 51, 51); font-family: TimesModern-Bold; font-weight: 400; margin-bottom: 5px; font-size: 22px; line-height: 27px; margin-top: 0px;"
283
276
  >
284
277
  Flawless Pickford repels everything Germans muster
285
- </h3>
278
+ </div>
286
279
  <div
287
280
  class="css-view-1dbjc4n"
288
281
  >
289
282
  <div
290
- class="summaryHidden summary125Class summaryHidden summary125Class css-text-901oao"
291
- dir="auto"
292
- style="color: rgb(105, 105, 105); flex-wrap: wrap; font-family: TimesDigitalW04; font-size: 14px; line-height: 20px; margin-bottom: 10px;"
283
+ class="summaryHidden summary125Class tc-text__TcText-sc-15igzev-0 lhcAkf"
284
+ style="color: rgb(105, 105, 105); flex-wrap: wrap; margin-bottom: 10px; font-family: TimesDigitalW04; font-size: 14px; line-height: 20px;"
293
285
  >
294
- <span
295
- class="css-text-901oao css-textHasAncestor-16my406"
296
- dir="auto"
286
+ <div
287
+ class="tc-text__TcText-sc-15igzev-0 lhcAkf"
288
+ style="white-space: inherit;"
297
289
  >
298
290
  Accompanied by a ghost of England’s past in the form of Thomas Müller, Germany set out to inflict yet more misery on their hosts with two spirited young forward...
299
- </span>
291
+ </div>
300
292
  </div>
301
293
  <div
302
- class="summaryHidden summary145Class summaryHidden summary145Class css-text-901oao"
303
- dir="auto"
304
- style="color: rgb(105, 105, 105); flex-wrap: wrap; font-family: TimesDigitalW04; font-size: 14px; line-height: 20px; margin-bottom: 10px;"
294
+ class="summaryHidden summary145Class tc-text__TcText-sc-15igzev-0 lhcAkf"
295
+ style="color: rgb(105, 105, 105); flex-wrap: wrap; margin-bottom: 10px; font-family: TimesDigitalW04; font-size: 14px; line-height: 20px;"
305
296
  >
306
- <span
307
- class="css-text-901oao css-textHasAncestor-16my406"
308
- dir="auto"
297
+ <div
298
+ class="tc-text__TcText-sc-15igzev-0 lhcAkf"
299
+ style="white-space: inherit;"
309
300
  >
310
301
  Accompanied by a ghost of England’s past in the form of Thomas Müller, Germany set out to inflict yet more misery on their hosts with two spirited young forward...
311
- </span>
302
+ </div>
312
303
  </div>
313
304
  </div>
314
305
  <div
315
- class="css-text-901oao"
316
- data-testid="datePublication"
317
- dir="auto"
306
+ class="tc-text__TcText-sc-15igzev-0 lhcAkf"
318
307
  style="color: rgb(105, 105, 105); font-family: GillSansMTStd-Medium; font-size: 13px; line-height: 15px; margin-bottom: 5px;"
319
308
  >
320
309
  <time
@@ -324,8 +313,7 @@ exports[`<LatestFromSection> renders 1`] = `
324
313
  </time>
325
314
  </div>
326
315
  <div
327
- class="css-text-901oao"
328
- dir="auto"
316
+ class="tc-text__TcText-sc-15igzev-0 lhcAkf"
329
317
  >
330
318
  <div
331
319
  class="tc-text__TcText-sc-15igzev-0 article-byline__BylineText-ynke2n-0 hgOVOC"
@@ -407,10 +395,10 @@ exports[`<LatestFromSection> renders 1`] = `
407
395
  class="tc-view__TcView-nuazoi-0 contentContainerClass card-content__TcCardContainer-sc-1w0wvq8-0 hzpWKJ"
408
396
  >
409
397
  <div
410
- class="css-view-1dbjc4n"
398
+ class="tc-view__TcView-nuazoi-0 fPjBcr"
411
399
  >
412
400
  <div
413
- class="css-view-1dbjc4n"
401
+ class="tc-view__TcView-nuazoi-0 fPjBcr"
414
402
  style="margin-bottom: 0px;"
415
403
  >
416
404
  <div
@@ -420,47 +408,42 @@ exports[`<LatestFromSection> renders 1`] = `
420
408
  EURO 2020 | JONATHAN NORTHCROFT
421
409
  </div>
422
410
  </div>
423
- <h3
411
+ <div
424
412
  aria-level="3"
425
- class="headlineClass css-reset-4rbku5 headlineClass css-text-901oao"
426
- dir="auto"
413
+ class="headlineClass tc-text__TcText-sc-15igzev-0 lhcAkf"
427
414
  role="heading"
428
- style="color: rgb(51, 51, 51); font-family: TimesModern-Bold; font-size: 22px; font-weight: 400; line-height: 27px; margin-bottom: 5px; margin-top: 0px;"
415
+ style="color: rgb(51, 51, 51); font-family: TimesModern-Bold; font-weight: 400; margin-bottom: 5px; font-size: 22px; line-height: 27px; margin-top: 0px;"
429
416
  >
430
417
  The tactical masterstrokes behind England’s ruthless win
431
- </h3>
418
+ </div>
432
419
  <div
433
420
  class="css-view-1dbjc4n"
434
421
  >
435
422
  <div
436
- class="summaryHidden summary125Class summaryHidden summary125Class css-text-901oao"
437
- dir="auto"
438
- style="color: rgb(105, 105, 105); flex-wrap: wrap; font-family: TimesDigitalW04; font-size: 14px; line-height: 20px; margin-bottom: 10px;"
423
+ class="summaryHidden summary125Class tc-text__TcText-sc-15igzev-0 lhcAkf"
424
+ style="color: rgb(105, 105, 105); flex-wrap: wrap; margin-bottom: 10px; font-family: TimesDigitalW04; font-size: 14px; line-height: 20px;"
439
425
  >
440
- <span
441
- class="css-text-901oao css-textHasAncestor-16my406"
442
- dir="auto"
426
+ <div
427
+ class="tc-text__TcText-sc-15igzev-0 lhcAkf"
428
+ style="white-space: inherit;"
443
429
  >
444
430
  Rising value of SterlingRaheem Sterling is often portrayed as the kid from an estate near Wembley, who transitioned from street player to a star on its pitch. A...
445
- </span>
431
+ </div>
446
432
  </div>
447
433
  <div
448
- class="summaryHidden summary145Class summaryHidden summary145Class css-text-901oao"
449
- dir="auto"
450
- style="color: rgb(105, 105, 105); flex-wrap: wrap; font-family: TimesDigitalW04; font-size: 14px; line-height: 20px; margin-bottom: 10px;"
434
+ class="summaryHidden summary145Class tc-text__TcText-sc-15igzev-0 lhcAkf"
435
+ style="color: rgb(105, 105, 105); flex-wrap: wrap; margin-bottom: 10px; font-family: TimesDigitalW04; font-size: 14px; line-height: 20px;"
451
436
  >
452
- <span
453
- class="css-text-901oao css-textHasAncestor-16my406"
454
- dir="auto"
437
+ <div
438
+ class="tc-text__TcText-sc-15igzev-0 lhcAkf"
439
+ style="white-space: inherit;"
455
440
  >
456
441
  Rising value of SterlingRaheem Sterling is often portrayed as the kid from an estate near Wembley, who transitioned from street player to a star on its pitch. A...
457
- </span>
442
+ </div>
458
443
  </div>
459
444
  </div>
460
445
  <div
461
- class="css-text-901oao"
462
- data-testid="datePublication"
463
- dir="auto"
446
+ class="tc-text__TcText-sc-15igzev-0 lhcAkf"
464
447
  style="color: rgb(105, 105, 105); font-family: GillSansMTStd-Medium; font-size: 13px; line-height: 15px; margin-bottom: 5px;"
465
448
  >
466
449
  <time
@@ -470,8 +453,7 @@ exports[`<LatestFromSection> renders 1`] = `
470
453
  </time>
471
454
  </div>
472
455
  <div
473
- class="css-text-901oao"
474
- dir="auto"
456
+ class="tc-text__TcText-sc-15igzev-0 lhcAkf"
475
457
  >
476
458
  <div
477
459
  class="tc-text__TcText-sc-15igzev-0 article-byline__BylineText-ynke2n-0 hgOVOC"
package/src/components/recommended-articles/RecommendedArticles.stories.tsx CHANGED
@@ -33,16 +33,16 @@ storiesOf('Typescript Component/Recommended Articles', module)
33
33
  ))
34
34
  .add('Recommended Articles - 1 Article', () => (
35
35
  <FetchProvider previewData={getArticles(previewData, 1)}>
36
- <RecommendedArticles heading="Today's news" isVisible />
36
+ <RecommendedArticles heading="Today's news" />
37
37
  </FetchProvider>
38
38
  ))
39
39
  .add('Recommended Articles - 2 Article', () => (
40
40
  <FetchProvider previewData={getArticles(previewData, 2)}>
41
- <RecommendedArticles heading="Today's business" isVisible />
41
+ <RecommendedArticles heading="Today's business" />
42
42
  </FetchProvider>
43
43
  ))
44
44
  .add('Recommended Articles - 3 Article', () => (
45
45
  <FetchProvider previewData={previewData}>
46
- <RecommendedArticles heading="Today's sport" isVisible />
46
+ <RecommendedArticles heading="Today's sport" />
47
47
  </FetchProvider>
48
48
  ));
package/src/components/recommended-articles/RecommendedArticles.tsx CHANGED
@@ -8,8 +8,7 @@ import { getRelatedArticlesSlice } from './formatters';
8
8
 
9
9
  export const RecommendedArticles: React.FC<{
10
10
  heading: string;
11
- isVisible?: boolean;
12
- }> = ({ heading, isVisible }) => {
11
+ }> = ({ heading }) => {
13
12
  const { loading, error, data } = useFetch<any>();
14
13
 
15
14
  if (loading || error || data === undefined) {
@@ -34,10 +33,7 @@ export const RecommendedArticles: React.FC<{
34
33
  };
35
34
 
36
35
  return (
37
- <div
38
- id="recommended-articles"
39
- style={{ display: isVisible ? 'block' : 'none' }}
40
- >
36
+ <div id="recommended-articles" style={{ display: 'block' }}>
41
37
  <RelatedArticles
42
38
  heading={heading}
43
39
  slice={slice}
package/src/components/recommended-articles/RecommendedFetch.tsx CHANGED
@@ -1,3 +1,9 @@
1
+ declare global {
2
+ interface Window {
3
+ nuk: any;
4
+ }
5
+ }
6
+
1
7
  import React, { useEffect, useState } from 'react';
2
8
 
3
9
  import { FetchProvider } from '../../helpers/fetch/FetchProvider';
@@ -8,12 +14,23 @@ export const RecommendedFetch: React.FC<{
8
14
  articleId: string;
9
15
  articleHeadline: string;
10
16
  articleSection: string;
11
- isVisible?: boolean;
12
- }> = ({ articleId, articleHeadline, articleSection, isVisible }) => {
17
+ }> = ({ articleId, articleHeadline, articleSection }) => {
13
18
  const [isClientSide, setIsClientSide] = useState<boolean>(false);
14
19
 
15
20
  useEffect(() => {
16
- setIsClientSide(true);
21
+ try {
22
+ const acsCookie = window.nuk.getCookieValue('acs_tnl');
23
+
24
+ const params = new URLSearchParams(window.location.search);
25
+ const flag = params.get('recommendedArticles');
26
+
27
+ if (acsCookie && flag) {
28
+ setIsClientSide(true);
29
+ }
30
+ } catch (e) {
31
+ // tslint:disable-next-line:no-console
32
+ console.log(e);
33
+ }
17
34
  }, []);
18
35
 
19
36
  const heading = `Today's ${articleSection}`;
@@ -37,7 +54,7 @@ export const RecommendedFetch: React.FC<{
37
54
  }
38
55
  }}
39
56
  >
40
- <RecommendedArticles heading={heading} isVisible={isVisible} />
57
+ <RecommendedArticles heading={heading} />
41
58
  </TrackingContextProvider>
42
59
  </FetchProvider>
43
60
  ) : null;
package/src/components/recommended-articles/__tests__/RecommendedArticles.test.tsx CHANGED
@@ -82,7 +82,7 @@ describe('<RecommendedArticles>', () => {
82
82
  });
83
83
 
84
84
  const { asFragment, getByText } = render(
85
- <RecommendedArticles heading={heading} isVisible />
85
+ <RecommendedArticles heading={heading} />
86
86
  );
87
87
 
88
88
  expect(getByText(heading));
@@ -109,7 +109,7 @@ describe('<RecommendedArticles>', () => {
109
109
  (useFetch as jest.Mock).mockReturnValue({ data: previewData });
110
110
 
111
111
  const { asFragment, getByText } = render(
112
- <RecommendedArticles heading={heading} isVisible />
112
+ <RecommendedArticles heading={heading} />
113
113
  );
114
114
 
115
115
  expect(getByText(heading));
@@ -129,7 +129,7 @@ describe('<RecommendedArticles>', () => {
129
129
  context={initialContext}
130
130
  analyticsStream={analyticsStream}
131
131
  >
132
- <RecommendedArticles heading={heading} isVisible />
132
+ <RecommendedArticles heading={heading} />
133
133
  </TrackingContextProvider>
134
134
  );
135
135
 
package/src/components/recommended-articles/__tests__/RecommendedFetch.test.tsx CHANGED
@@ -18,6 +18,13 @@ jest.mock('../../../helpers/fetch/FetchProvider', () => ({
18
18
 
19
19
  describe('<RecommendedFetch>', () => {
20
20
  it('should render correctly', () => {
21
+ // @ts-ignore
22
+ delete window.location;
23
+ // @ts-ignore
24
+ window.location = { search: '?recommendedArticles=1' };
25
+
26
+ window.nuk = { getCookieValue: () => true };
27
+
21
28
  const { asFragment, getByText } = render(
22
29
  <RecommendedFetch
23
30
  articleId="1234"
package/src/components/recommended-articles/__tests__/__snapshots__/RecommendedArticles.test.tsx.snap CHANGED
@@ -23,7 +23,7 @@ exports[`<RecommendedArticles> should render RelatedArticles correctly with 2 ar
23
23
  <DocumentFragment>
24
24
  <div
25
25
  id="recommended-articles"
26
- style="display: none;"
26
+ style="display: block;"
27
27
  >
28
28
  <div>
29
29
  RelatedArticles