@times-components/ts-components 1.28.0 → 1.30.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.
@@ -43,12 +43,12 @@ const scrollEvent = {
43
43
  }
44
44
  };
45
45
 
46
- const clickEvent = (buttonLabel: string, isLiveOrBreaking?: string) => ({
46
+ const clickEvent = (buttonLabel: string, flag?: string) => ({
47
47
  action: 'Clicked',
48
48
  attrs: {
49
49
  event_navigation_name: `button : ${buttonLabel}`,
50
50
  event_navigation_browsing_method: 'click',
51
- other_details: isLiveOrBreaking
51
+ article_flag: flag
52
52
  }
53
53
  });
54
54
 
@@ -57,12 +57,13 @@ export const InArticlePuff: React.FC<{
57
57
  forceImageAspectRatio?: AspectRatios;
58
58
  isLiveOrBreaking?: string;
59
59
  }> = ({ sectionColour, forceImageAspectRatio, isLiveOrBreaking }) => {
60
+ const articleFlag = isLiveOrBreaking || 'no flag';
60
61
  const handleClick = (
61
62
  fireAnalyticsEvent: (evt: TrackingContext) => void,
62
63
  buttonLabel: string
63
64
  ) => {
64
65
  fireAnalyticsEvent &&
65
- fireAnalyticsEvent(clickEvent(buttonLabel, isLiveOrBreaking));
66
+ fireAnalyticsEvent(clickEvent(buttonLabel, articleFlag));
66
67
  };
67
68
 
68
69
  const { loading, error, data } = useFetch<InArticlePuffDeckData>();
@@ -98,7 +99,7 @@ export const InArticlePuff: React.FC<{
98
99
  component_type: 'in-article component : puff : interactive',
99
100
  event_navigation_action: 'navigation',
100
101
  component_name: `${headline}`,
101
- other_details: isLiveOrBreaking
102
+ article_flag: articleFlag
102
103
  }
103
104
  }}
104
105
  scrolledEvent={scrollEvent}
@@ -169,13 +169,13 @@ describe('InArticlePuff', () => {
169
169
  event_navigation_action: 'navigation',
170
170
  event_navigation_browsing_method: 'scroll',
171
171
  event_navigation_name: 'in-article component displayed : puff',
172
- section: 'section'
172
+ section: 'section',
173
+ article_flag: 'no flag'
173
174
  }
174
175
  });
175
176
  });
176
177
 
177
178
  it('fires click event when Read more clicked', () => {
178
- mockIsLiveOrBreakingFlag = 'live';
179
179
  (useFetch as jest.Mock).mockReturnValue(
180
180
  deckApiPayloadWrapper(optionalFields)
181
181
  );
@@ -187,12 +187,12 @@ describe('InArticlePuff', () => {
187
187
  attrs: {
188
188
  articleHeadline: 'articleHeadline',
189
189
  section: 'section',
190
- other_details: 'live'
190
+ article_flag: 'live'
191
191
  }
192
192
  }}
193
193
  analyticsStream={analyticsStream}
194
194
  >
195
- <InArticlePuff {...requiredProps} />
195
+ <InArticlePuff sectionColour="yellow" isLiveOrBreaking={'live'} />
196
196
  </TrackingContextProvider>
197
197
  );
198
198
 
@@ -213,13 +213,12 @@ describe('InArticlePuff', () => {
213
213
  event_navigation_browsing_method: 'click',
214
214
  event_navigation_name: 'button : Read the full article',
215
215
  section: 'section',
216
- other_details: 'live'
216
+ article_flag: 'live'
217
217
  }
218
218
  });
219
219
  });
220
220
 
221
221
  it('fires click event when headline clicked', () => {
222
- mockIsLiveOrBreakingFlag = 'breaking';
223
222
  (useFetch as jest.Mock).mockReturnValue(
224
223
  deckApiPayloadWrapper(optionalFields)
225
224
  );
@@ -231,12 +230,12 @@ describe('InArticlePuff', () => {
231
230
  attrs: {
232
231
  articleHeadline: 'articleHeadline',
233
232
  section: 'section',
234
- other_details: 'breaking'
233
+ article_flag: 'breaking'
235
234
  }
236
235
  }}
237
236
  analyticsStream={analyticsStream}
238
237
  >
239
- <InArticlePuff {...requiredProps} />
238
+ <InArticlePuff sectionColour="yellow" isLiveOrBreaking={'breaking'} />
240
239
  </TrackingContextProvider>
241
240
  );
242
241
 
@@ -257,7 +256,7 @@ describe('InArticlePuff', () => {
257
256
  event_navigation_browsing_method: 'click',
258
257
  event_navigation_name: 'button : headline',
259
258
  section: 'section',
260
- other_details: 'breaking'
259
+ article_flag: 'breaking'
261
260
  }
262
261
  });
263
262
  });
@@ -297,7 +296,8 @@ describe('InArticlePuff', () => {
297
296
  event_navigation_action: 'navigation',
298
297
  event_navigation_browsing_method: 'click',
299
298
  event_navigation_name: 'button : image',
300
- section: 'section'
299
+ section: 'section',
300
+ article_flag: 'no flag'
301
301
  }
302
302
  });
303
303
  });
@@ -30,16 +30,4 @@ describe('<LatestFromSection>', () => {
30
30
  );
31
31
  expect(asFragment()).toMatchSnapshot();
32
32
  });
33
- it('no data ', () => {
34
- const { asFragment } = render(
35
- <LatestFromSection
36
- analyticsStream={jest.fn()}
37
- latestFromSection={{
38
- section: 'Sport',
39
- items: []
40
- }}
41
- />
42
- );
43
- expect(asFragment()).toMatchSnapshot();
44
- });
45
33
  });
@@ -23,29 +23,6 @@ exports[`<LatestFromSection> no data 1`] = `
23
23
  </DocumentFragment>
24
24
  `;
25
25
 
26
- exports[`<LatestFromSection> no data 2`] = `
27
- <DocumentFragment>
28
- <div
29
- class="css-view-1dbjc4n"
30
- >
31
- <div
32
- class="css-view-1dbjc4n"
33
- style="align-items: center; border-bottom-color: rgba(219,219,219,1.00); border-bottom-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgba(219,219,219,1.00); border-top-width: 1px; display: flex; justify-content: center; padding: 15px 15px 15px 15px;"
34
- >
35
- <h3
36
- aria-level="3"
37
- class="css-reset-4rbku5 css-text-901oao"
38
- dir="auto"
39
- role="heading"
40
- style="color: rgb(51, 51, 51); font-family: TimesModern-Bold; font-size: 25px; line-height: 27px; padding-top: 5px;"
41
- >
42
- Latest from Sport
43
- </h3>
44
- </div>
45
- </div>
46
- </DocumentFragment>
47
- `;
48
-
49
26
  exports[`<LatestFromSection> renders 1`] = `
50
27
  <DocumentFragment>
51
28
  <div
@@ -96,8 +73,7 @@ exports[`<LatestFromSection> renders 1`] = `
96
73
  style="flex-grow: 1; flex-shrink: 1; flex-basis: 0%; margin-bottom: 10px; min-width: 100%;"
97
74
  >
98
75
  <div
99
- class="css-view-1dbjc4n"
100
- data-testid="Image"
76
+ class="tc-view__TcView-nuazoi-0 fPjBcr"
101
77
  >
102
78
  <div
103
79
  style="padding-bottom: 56.25%;"
@@ -107,8 +83,10 @@ exports[`<LatestFromSection> renders 1`] = `
107
83
  src="https://www.thetimes.co.uk/imageserver/image/methode%2Ftimes%2Fprod%2Fweb%2Fbin%2Fb7fca746-d8ec-11eb-8f14-0bb645f59db0.jpg?resize=200&quality=3"
108
84
  />
109
85
  <div
110
- class="css-view-1dbjc4n"
111
- style="align-items: center; background-color: rgb(237, 237, 237); bottom: 0px; justify-content: center; left: 0px; position: absolute; right: 0px; top: 0px; z-index: 0;"
86
+ class="tc-view__TcView-nuazoi-0 fPjBcr"
87
+ height="100%"
88
+ style="align-items: center; background-color: rgb(237, 237, 237); bottom: 0px; justify-content: center; left: 0px; position: absolute; right: 0px; top: 0px; z-index: 0; border-radius: 0;"
89
+ width="100%"
112
90
  >
113
91
  <svg
114
92
  height="auto"
@@ -243,8 +221,7 @@ exports[`<LatestFromSection> renders 1`] = `
243
221
  style="flex-grow: 1; flex-shrink: 1; flex-basis: 0%; margin-bottom: 10px; min-width: 100%;"
244
222
  >
245
223
  <div
246
- class="css-view-1dbjc4n"
247
- data-testid="Image"
224
+ class="tc-view__TcView-nuazoi-0 fPjBcr"
248
225
  >
249
226
  <div
250
227
  style="padding-bottom: 56.25%;"
@@ -254,8 +231,10 @@ exports[`<LatestFromSection> renders 1`] = `
254
231
  src="https://www.thetimes.co.uk/imageserver/image/methode%2Ftimes%2Fprod%2Fweb%2Fbin%2F65e48858-d913-11eb-b92f-5fe539a30c29.jpg?resize=200&quality=3"
255
232
  />
256
233
  <div
257
- class="css-view-1dbjc4n"
258
- style="align-items: center; background-color: rgb(237, 237, 237); bottom: 0px; justify-content: center; left: 0px; position: absolute; right: 0px; top: 0px; z-index: 0;"
234
+ class="tc-view__TcView-nuazoi-0 fPjBcr"
235
+ height="100%"
236
+ style="align-items: center; background-color: rgb(237, 237, 237); bottom: 0px; justify-content: center; left: 0px; position: absolute; right: 0px; top: 0px; z-index: 0; border-radius: 0;"
237
+ width="100%"
259
238
  >
260
239
  <svg
261
240
  height="auto"
@@ -390,8 +369,7 @@ exports[`<LatestFromSection> renders 1`] = `
390
369
  style="flex-grow: 1; flex-shrink: 1; flex-basis: 0%; margin-bottom: 10px; min-width: 100%;"
391
370
  >
392
371
  <div
393
- class="css-view-1dbjc4n"
394
- data-testid="Image"
372
+ class="tc-view__TcView-nuazoi-0 fPjBcr"
395
373
  >
396
374
  <div
397
375
  style="padding-bottom: 56.25%;"
@@ -401,8 +379,10 @@ exports[`<LatestFromSection> renders 1`] = `
401
379
  src="https://www.thetimes.co.uk/imageserver/image/methode%2Ftimes%2Fprod%2Fweb%2Fbin%2F798e1dce-d918-11eb-b92f-5fe539a30c29.jpg?resize=200&quality=3"
402
380
  />
403
381
  <div
404
- class="css-view-1dbjc4n"
405
- style="align-items: center; background-color: rgb(237, 237, 237); bottom: 0px; justify-content: center; left: 0px; position: absolute; right: 0px; top: 0px; z-index: 0;"
382
+ class="tc-view__TcView-nuazoi-0 fPjBcr"
383
+ height="100%"
384
+ style="align-items: center; background-color: rgb(237, 237, 237); bottom: 0px; justify-content: center; left: 0px; position: absolute; right: 0px; top: 0px; z-index: 0; border-radius: 0;"
385
+ width="100%"
406
386
  >
407
387
  <svg
408
388
  height="auto"
@@ -10,8 +10,10 @@ exports[`<AutoNewsletterPuff> display function always renders 1`] = `
10
10
  style="height: 257px;"
11
11
  >
12
12
  <div
13
- class="css-view-1dbjc4n"
14
- style="align-items: center; background-color: rgb(237, 237, 237); bottom: 0px; justify-content: center; left: 0px; position: absolute; right: 0px; top: 0px; z-index: 0;"
13
+ class="tc-view__TcView-nuazoi-0 fPjBcr"
14
+ height="100%"
15
+ style="align-items: center; background-color: rgb(237, 237, 237); bottom: 0px; justify-content: center; left: 0px; position: absolute; right: 0px; top: 0px; z-index: 0; border-radius: 0;"
16
+ width="100%"
15
17
  >
16
18
  <svg
17
19
  height="auto"
@@ -47,8 +49,10 @@ exports[`<AutoNewsletterPuff> display function doesnt render without consent 1`]
47
49
  style="height: 257px;"
48
50
  >
49
51
  <div
50
- class="css-view-1dbjc4n"
51
- style="align-items: center; background-color: rgb(237, 237, 237); bottom: 0px; justify-content: center; left: 0px; position: absolute; right: 0px; top: 0px; z-index: 0;"
52
+ class="tc-view__TcView-nuazoi-0 fPjBcr"
53
+ height="100%"
54
+ style="align-items: center; background-color: rgb(237, 237, 237); bottom: 0px; justify-content: center; left: 0px; position: absolute; right: 0px; top: 0px; z-index: 0; border-radius: 0;"
55
+ width="100%"
52
56
  >
53
57
  <svg
54
58
  height="auto"
@@ -84,8 +88,10 @@ exports[`<AutoNewsletterPuff> using a display function [1, 3] count = 1 1`] = `
84
88
  style="height: 257px;"
85
89
  >
86
90
  <div
87
- class="css-view-1dbjc4n"
88
- style="align-items: center; background-color: rgb(237, 237, 237); bottom: 0px; justify-content: center; left: 0px; position: absolute; right: 0px; top: 0px; z-index: 0;"
91
+ class="tc-view__TcView-nuazoi-0 fPjBcr"
92
+ height="100%"
93
+ style="align-items: center; background-color: rgb(237, 237, 237); bottom: 0px; justify-content: center; left: 0px; position: absolute; right: 0px; top: 0px; z-index: 0; border-radius: 0;"
94
+ width="100%"
89
95
  >
90
96
  <svg
91
97
  height="auto"
@@ -121,8 +127,10 @@ exports[`<AutoNewsletterPuff> using a display function [1, 3] count = 2 1`] = `
121
127
  style="height: 257px;"
122
128
  >
123
129
  <div
124
- class="css-view-1dbjc4n"
125
- style="align-items: center; background-color: rgb(237, 237, 237); bottom: 0px; justify-content: center; left: 0px; position: absolute; right: 0px; top: 0px; z-index: 0;"
130
+ class="tc-view__TcView-nuazoi-0 fPjBcr"
131
+ height="100%"
132
+ style="align-items: center; background-color: rgb(237, 237, 237); bottom: 0px; justify-content: center; left: 0px; position: absolute; right: 0px; top: 0px; z-index: 0; border-radius: 0;"
133
+ width="100%"
126
134
  >
127
135
  <svg
128
136
  height="auto"
@@ -10,8 +10,7 @@ exports[`Inline Newsletter Puff Clicking Subscribe renders 'saving' when the but
10
10
  class="sc-bdVaJa sc-bxivhb fstdFq"
11
11
  >
12
12
  <div
13
- class="css-view-1dbjc4n"
14
- data-testid="Image"
13
+ class="tc-view__TcView-nuazoi-0 fPjBcr"
15
14
  >
16
15
  <div
17
16
  style="padding-bottom: 70.42253521126761%;"
@@ -21,8 +20,10 @@ exports[`Inline Newsletter Puff Clicking Subscribe renders 'saving' when the but
21
20
  src="https://nuk-tnl-deck-prod-static.s3-eu-west-1.amazonaws.com/uploads/2aa9050e6c3d4de682f11a4802ebba96.jpg"
22
21
  />
23
22
  <div
24
- class="css-view-1dbjc4n"
25
- style="align-items: center; background-color: rgb(237, 237, 237); bottom: 0px; justify-content: center; left: 0px; position: absolute; right: 0px; top: 0px; z-index: 0;"
23
+ class="tc-view__TcView-nuazoi-0 fPjBcr"
24
+ height="100%"
25
+ style="align-items: center; background-color: rgb(237, 237, 237); bottom: 0px; justify-content: center; left: 0px; position: absolute; right: 0px; top: 0px; z-index: 0; border-radius: 0;"
26
+ width="100%"
26
27
  >
27
28
  <svg
28
29
  height="auto"
@@ -91,8 +92,7 @@ exports[`Inline Newsletter Puff Manage preferences renders the success view aft
91
92
  class="sc-bdVaJa sc-bxivhb fstdFq"
92
93
  >
93
94
  <div
94
- class="css-view-1dbjc4n"
95
- data-testid="Image"
95
+ class="tc-view__TcView-nuazoi-0 fPjBcr"
96
96
  >
97
97
  <div
98
98
  style="padding-bottom: 70.42253521126761%;"
@@ -102,8 +102,10 @@ exports[`Inline Newsletter Puff Manage preferences renders the success view aft
102
102
  src="https://nuk-tnl-deck-prod-static.s3-eu-west-1.amazonaws.com/uploads/2aa9050e6c3d4de682f11a4802ebba96.jpg"
103
103
  />
104
104
  <div
105
- class="css-view-1dbjc4n"
106
- style="align-items: center; background-color: rgb(237, 237, 237); bottom: 0px; justify-content: center; left: 0px; position: absolute; right: 0px; top: 0px; z-index: 0;"
105
+ class="tc-view__TcView-nuazoi-0 fPjBcr"
106
+ height="100%"
107
+ style="align-items: center; background-color: rgb(237, 237, 237); bottom: 0px; justify-content: center; left: 0px; position: absolute; right: 0px; top: 0px; z-index: 0; border-radius: 0;"
108
+ width="100%"
107
109
  >
108
110
  <svg
109
111
  height="auto"
@@ -192,8 +194,10 @@ exports[`Inline Newsletter Puff renders placeholder when loading 1`] = `
192
194
  style="height: 257px;"
193
195
  >
194
196
  <div
195
- class="css-view-1dbjc4n"
196
- style="align-items: center; background-color: rgb(237, 237, 237); bottom: 0px; justify-content: center; left: 0px; position: absolute; right: 0px; top: 0px; z-index: 0;"
197
+ class="tc-view__TcView-nuazoi-0 fPjBcr"
198
+ height="100%"
199
+ style="align-items: center; background-color: rgb(237, 237, 237); bottom: 0px; justify-content: center; left: 0px; position: absolute; right: 0px; top: 0px; z-index: 0; border-radius: 0;"
200
+ width="100%"
197
201
  >
198
202
  <svg
199
203
  height="auto"
@@ -230,8 +234,7 @@ exports[`Inline Newsletter Puff renders signup state 1`] = `
230
234
  class="sc-bdVaJa sc-bxivhb fstdFq"
231
235
  >
232
236
  <div
233
- class="css-view-1dbjc4n"
234
- data-testid="Image"
237
+ class="tc-view__TcView-nuazoi-0 fPjBcr"
235
238
  >
236
239
  <div
237
240
  style="padding-bottom: 70.42253521126761%;"
@@ -241,8 +244,10 @@ exports[`Inline Newsletter Puff renders signup state 1`] = `
241
244
  src="https://nuk-tnl-deck-prod-static.s3-eu-west-1.amazonaws.com/uploads/2aa9050e6c3d4de682f11a4802ebba96.jpg"
242
245
  />
243
246
  <div
244
- class="css-view-1dbjc4n"
245
- style="align-items: center; background-color: rgb(237, 237, 237); bottom: 0px; justify-content: center; left: 0px; position: absolute; right: 0px; top: 0px; z-index: 0;"
247
+ class="tc-view__TcView-nuazoi-0 fPjBcr"
248
+ height="100%"
249
+ style="align-items: center; background-color: rgb(237, 237, 237); bottom: 0px; justify-content: center; left: 0px; position: absolute; right: 0px; top: 0px; z-index: 0; border-radius: 0;"
250
+ width="100%"
246
251
  >
247
252
  <svg
248
253
  height="auto"
@@ -311,8 +316,7 @@ exports[`Inline Newsletter Puff renders signup view when not already subscribed
311
316
  class="sc-bdVaJa sc-bxivhb fstdFq"
312
317
  >
313
318
  <div
314
- class="css-view-1dbjc4n"
315
- data-testid="Image"
319
+ class="tc-view__TcView-nuazoi-0 fPjBcr"
316
320
  >
317
321
  <div
318
322
  style="padding-bottom: 70.42253521126761%;"
@@ -322,8 +326,10 @@ exports[`Inline Newsletter Puff renders signup view when not already subscribed
322
326
  src="https://nuk-tnl-deck-prod-static.s3-eu-west-1.amazonaws.com/uploads/2aa9050e6c3d4de682f11a4802ebba96.jpg"
323
327
  />
324
328
  <div
325
- class="css-view-1dbjc4n"
326
- style="align-items: center; background-color: rgb(237, 237, 237); bottom: 0px; justify-content: center; left: 0px; position: absolute; right: 0px; top: 0px; z-index: 0;"
329
+ class="tc-view__TcView-nuazoi-0 fPjBcr"
330
+ height="100%"
331
+ style="align-items: center; background-color: rgb(237, 237, 237); bottom: 0px; justify-content: center; left: 0px; position: absolute; right: 0px; top: 0px; z-index: 0; border-radius: 0;"
332
+ width="100%"
327
333
  >
328
334
  <svg
329
335
  height="auto"
@@ -10,8 +10,7 @@ exports[`Preview Newsletter Puff renders 1`] = `
10
10
  class="sc-bdVaJa sc-bxivhb fstdFq"
11
11
  >
12
12
  <div
13
- class="css-view-1dbjc4n"
14
- data-testid="Image"
13
+ class="tc-view__TcView-nuazoi-0 fPjBcr"
15
14
  >
16
15
  <div
17
16
  style="padding-bottom: 70.42253521126761%;"
@@ -21,8 +20,10 @@ exports[`Preview Newsletter Puff renders 1`] = `
21
20
  src="https://nuk-tnl-deck-prod-static.s3-eu-west-1.amazonaws.com/uploads/2aa9050e6c3d4de682f11a4802ebba96.jpg"
22
21
  />
23
22
  <div
24
- class="css-view-1dbjc4n"
25
- style="align-items: center; background-color: rgb(237, 237, 237); bottom: 0px; justify-content: center; left: 0px; position: absolute; right: 0px; top: 0px; z-index: 0;"
23
+ class="tc-view__TcView-nuazoi-0 fPjBcr"
24
+ height="100%"
25
+ style="align-items: center; background-color: rgb(237, 237, 237); bottom: 0px; justify-content: center; left: 0px; position: absolute; right: 0px; top: 0px; z-index: 0; border-radius: 0;"
26
+ width="100%"
26
27
  >
27
28
  <svg
28
29
  height="auto"