@times-components/ts-components 1.106.0 → 1.107.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 (22) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/package.json +3 -3
  3. package/dist/components/latest-from-section/LatestFromSection.d.ts +0 -8
  4. package/dist/components/latest-from-section/LatestFromSection.js +0 -14
  5. package/dist/components/latest-from-section/LatestFromSection.stories.d.ts +0 -1
  6. package/dist/components/latest-from-section/LatestFromSection.stories.js +0 -11
  7. package/dist/components/latest-from-section/__tests__/LatestFromSection.test.d.ts +0 -1
  8. package/dist/components/latest-from-section/__tests__/LatestFromSection.test.js +0 -23
  9. package/dist/components/latest-from-section/__tests__/formatters.test.d.ts +0 -1
  10. package/dist/components/latest-from-section/__tests__/formatters.test.js +0 -11
  11. package/dist/components/latest-from-section/fixtures/fixtures.d.ts +0 -2
  12. package/dist/components/latest-from-section/fixtures/fixtures.js +0 -1064
  13. package/dist/components/latest-from-section/formatters.d.ts +0 -24
  14. package/dist/components/latest-from-section/formatters.js +0 -78
  15. package/src/components/latest-from-section/LatestFromSection.stories.tsx +0 -31
  16. package/src/components/latest-from-section/LatestFromSection.tsx +0 -36
  17. package/src/components/latest-from-section/__tests__/LatestFromSection.test.tsx +0 -33
  18. package/src/components/latest-from-section/__tests__/__snapshots__/LatestFromSection.test.tsx.snap +0 -322
  19. package/src/components/latest-from-section/__tests__/__snapshots__/formatters.test.ts.snap +0 -213
  20. package/src/components/latest-from-section/__tests__/formatters.test.ts +0 -11
  21. package/src/components/latest-from-section/fixtures/fixtures.ts +0 -1286
  22. package/src/components/latest-from-section/formatters.ts +0 -107
@@ -1,24 +0,0 @@
1
- import { RelatedArticleType } from '../../types/related-article-slice';
2
- declare type LatestSectionItem = {
3
- id: string;
4
- headline: string;
5
- canonicalID: string;
6
- summary: string;
7
- publishedTime: string;
8
- updatedTime: string;
9
- author: string;
10
- slug: string;
11
- label?: string;
12
- shortIdentifier: string;
13
- leadAsset: Array<{
14
- ratio: string;
15
- source: string;
16
- }>;
17
- };
18
- export declare type LatestSection = {
19
- section: string;
20
- items: LatestSectionItem[];
21
- };
22
- export declare const getSectionTitle: (section: LatestSection) => string;
23
- export declare const formatLatestFromSection: (section: LatestSection) => RelatedArticleType[] | undefined;
24
- export {};
@@ -1,78 +0,0 @@
1
- export const getSectionTitle = (section) => {
2
- return section && section.section;
3
- };
4
- export const formatLatestFromSection = (section) => {
5
- return (section &&
6
- section.items.map((article) => ({
7
- id: article.id,
8
- shortIdentifier: article.shortIdentifier,
9
- slug: article.slug,
10
- label: article.label || null,
11
- headline: article.headline,
12
- section: section.section,
13
- url: `/article/${article.slug}-${article.shortIdentifier}`,
14
- leadAsset: {
15
- crop169: {
16
- url: article.leadAsset &&
17
- article.leadAsset.find((crop) => crop.ratio === '16:9').source
18
- },
19
- crop32: {
20
- url: article.leadAsset &&
21
- article.leadAsset.find((crop) => crop.ratio === '3:2').source
22
- }
23
- },
24
- summary125: [
25
- {
26
- name: 'paragraph',
27
- children: [
28
- {
29
- name: 'text',
30
- attributes: {
31
- value: article.summary
32
- },
33
- children: []
34
- }
35
- ]
36
- }
37
- ],
38
- summary145: [
39
- {
40
- name: 'paragraph',
41
- children: [
42
- {
43
- name: 'text',
44
- attributes: {
45
- value: article.summary
46
- },
47
- children: []
48
- }
49
- ]
50
- }
51
- ],
52
- publishedTime: article.publishedTime,
53
- updatedTime: article.updatedTime,
54
- bylines: [
55
- {
56
- byline: [
57
- {
58
- name: 'author',
59
- children: [
60
- {
61
- name: 'text',
62
- children: [],
63
- attributes: {
64
- value: article.author
65
- }
66
- }
67
- ],
68
- attributes: {
69
- slug: 'didi-tang'
70
- }
71
- }
72
- ],
73
- image: null
74
- }
75
- ]
76
- })));
77
- };
78
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9ybWF0dGVycy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2xhdGVzdC1mcm9tLXNlY3Rpb24vZm9ybWF0dGVycy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF1QkEsTUFBTSxDQUFDLE1BQU0sZUFBZSxHQUFHLENBQUMsT0FBc0IsRUFBRSxFQUFFO0lBQ3hELE9BQU8sT0FBTyxJQUFJLE9BQU8sQ0FBQyxPQUFPLENBQUM7QUFDcEMsQ0FBQyxDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sdUJBQXVCLEdBQUcsQ0FDckMsT0FBc0IsRUFDWSxFQUFFO0lBQ3BDLE9BQU8sQ0FDTCxPQUFPO1FBQ1AsT0FBTyxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQXFCLENBQUMsT0FBMEIsRUFBRSxFQUFFLENBQUMsQ0FBQztZQUNyRSxFQUFFLEVBQUUsT0FBTyxDQUFDLEVBQUU7WUFDZCxlQUFlLEVBQUUsT0FBTyxDQUFDLGVBQWU7WUFDeEMsSUFBSSxFQUFFLE9BQU8sQ0FBQyxJQUFJO1lBQ2xCLEtBQUssRUFBRSxPQUFPLENBQUMsS0FBSyxJQUFJLElBQUk7WUFDNUIsUUFBUSxFQUFFLE9BQU8sQ0FBQyxRQUFRO1lBQzFCLE9BQU8sRUFBRSxPQUFPLENBQUMsT0FBTztZQUN4QixHQUFHLEVBQUUsWUFBWSxPQUFPLENBQUMsSUFBSSxJQUFJLE9BQU8sQ0FBQyxlQUFlLEVBQUU7WUFDMUQsU0FBUyxFQUFFO2dCQUNULE9BQU8sRUFBRTtvQkFDUCxHQUFHLEVBQ0QsT0FBTyxDQUFDLFNBQVM7d0JBQ2pCLE9BQU8sQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLENBQUMsSUFBUyxFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsS0FBSyxLQUFLLE1BQU0sQ0FBRSxDQUFDLE1BQU07aUJBQ3ZFO2dCQUNELE1BQU0sRUFBRTtvQkFDTixHQUFHLEVBQ0QsT0FBTyxDQUFDLFNBQVM7d0JBQ2pCLE9BQU8sQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLENBQUMsSUFBUyxFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsS0FBSyxLQUFLLEtBQUssQ0FBRSxDQUFDLE1BQU07aUJBQ3RFO2FBQ0Y7WUFDRCxVQUFVLEVBQUU7Z0JBQ1Y7b0JBQ0UsSUFBSSxFQUFFLFdBQVc7b0JBQ2pCLFFBQVEsRUFBRTt3QkFDUjs0QkFDRSxJQUFJLEVBQUUsTUFBTTs0QkFDWixVQUFVLEVBQUU7Z0NBQ1YsS0FBSyxFQUFFLE9BQU8sQ0FBQyxPQUFPOzZCQUN2Qjs0QkFDRCxRQUFRLEVBQUUsRUFBRTt5QkFDYjtxQkFDRjtpQkFDRjthQUNGO1lBQ0QsVUFBVSxFQUFFO2dCQUNWO29CQUNFLElBQUksRUFBRSxXQUFXO29CQUNqQixRQUFRLEVBQUU7d0JBQ1I7NEJBQ0UsSUFBSSxFQUFFLE1BQU07NEJBQ1osVUFBVSxFQUFFO2dDQUNWLEtBQUssRUFBRSxPQUFPLENBQUMsT0FBTzs2QkFDdkI7NEJBQ0QsUUFBUSxFQUFFLEVBQUU7eUJBQ2I7cUJBQ0Y7aUJBQ0Y7YUFDRjtZQUNELGFBQWEsRUFBRSxPQUFPLENBQUMsYUFBYTtZQUNwQyxXQUFXLEVBQUUsT0FBTyxDQUFDLFdBQVc7WUFDaEMsT0FBTyxFQUFFO2dCQUNQO29CQUNFLE1BQU0sRUFBRTt3QkFDTjs0QkFDRSxJQUFJLEVBQUUsUUFBUTs0QkFDZCxRQUFRLEVBQUU7Z0NBQ1I7b0NBQ0UsSUFBSSxFQUFFLE1BQU07b0NBQ1osUUFBUSxFQUFFLEVBQUU7b0NBQ1osVUFBVSxFQUFFO3dDQUNWLEtBQUssRUFBRSxPQUFPLENBQUMsTUFBTTtxQ0FDdEI7aUNBQ0Y7NkJBQ0Y7NEJBQ0QsVUFBVSxFQUFFO2dDQUNWLElBQUksRUFBRSxXQUFXOzZCQUNsQjt5QkFDRjtxQkFDRjtvQkFDRCxLQUFLLEVBQUUsSUFBSTtpQkFDWjthQUNGO1NBQ0YsQ0FBQyxDQUFDLENBQ0osQ0FBQztBQUNKLENBQUMsQ0FBQyJ9
@@ -1,31 +0,0 @@
1
- import React from 'react';
2
-
3
- import { storiesOf } from '@storybook/react';
4
-
5
- import { LatestFromSection } from './LatestFromSection';
6
-
7
- import analyticsStream from '../../fixtures/analytics-actions/analytics-actions';
8
- import { select } from '@storybook/addon-knobs';
9
- import { latestFromSection } from './fixtures/fixtures';
10
-
11
- storiesOf('Typescript Component/Article Extras', module).add(
12
- 'Latest from Section',
13
- () => {
14
- const sectionIndex = select(
15
- 'Section',
16
- latestFromSection.reduce(
17
- (prev, next, index) => ({ ...prev, [next.section]: index }),
18
- {}
19
- ),
20
- 4
21
- );
22
-
23
- return (
24
- <LatestFromSection
25
- key={sectionIndex}
26
- analyticsStream={analyticsStream}
27
- latestFromSection={latestFromSection[sectionIndex]}
28
- />
29
- );
30
- }
31
- );
@@ -1,36 +0,0 @@
1
- import React, { FC } from 'react';
2
- import RelatedArticles from '@times-components/related-articles';
3
-
4
- import { RelatedArticleSliceType } from '../../types/related-article-slice';
5
- import {
6
- formatLatestFromSection,
7
- getSectionTitle,
8
- LatestSection
9
- } from './formatters';
10
-
11
- type Props = {
12
- latestFromSection: LatestSection;
13
- analyticsStream: (evt: any) => void;
14
- };
15
- export const LatestFromSection: FC<Props> = ({
16
- analyticsStream,
17
- latestFromSection
18
- }) => {
19
- const relatedArticles = formatLatestFromSection(latestFromSection);
20
-
21
- const slice: RelatedArticleSliceType = {
22
- sliceName: 'StandardSlice',
23
- items: relatedArticles
24
- ? relatedArticles.map(article => ({ leadAsset: null, article }))
25
- : []
26
- };
27
-
28
- return (
29
- <RelatedArticles
30
- heading={`Latest from ${getSectionTitle(latestFromSection)}`}
31
- analyticsStream={analyticsStream}
32
- isVisible
33
- slice={slice}
34
- />
35
- );
36
- };
@@ -1,33 +0,0 @@
1
- import { latestFromSection } from '../fixtures/fixtures';
2
- import { render } from '@testing-library/react';
3
- import React from 'react';
4
- import { LatestFromSection } from '../LatestFromSection';
5
- describe('<LatestFromSection>', () => {
6
- beforeEach(() => {
7
- global.Intl = {
8
- DateTimeFormat: () => ({
9
- // @ts-ignore
10
- resolvedOptions: () => ({ timeZone: 'Europe/London' })
11
- })
12
- };
13
- });
14
-
15
- it('renders ', () => {
16
- const { asFragment } = render(
17
- <LatestFromSection
18
- analyticsStream={jest.fn()}
19
- latestFromSection={latestFromSection[4]}
20
- />
21
- );
22
- expect(asFragment()).toMatchSnapshot();
23
- });
24
- it('no data ', () => {
25
- const { asFragment } = render(
26
- <LatestFromSection
27
- analyticsStream={jest.fn()}
28
- latestFromSection={{ section: 'Sport', items: [] }}
29
- />
30
- );
31
- expect(asFragment()).toMatchSnapshot();
32
- });
33
- });
@@ -1,322 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`<LatestFromSection> no data 1`] = `
4
- <DocumentFragment>
5
- <div
6
- class="tc-view__TcView-nuazoi-0 fPjBcr"
7
- >
8
- <div
9
- class="tc-view__TcView-nuazoi-0 fPjBcr"
10
- style="align-items: center; border-bottom-color: #DBDBDB; border-bottom-width: 1px; border-style: solid; border-top-color: #DBDBDB; border-top-width: 1px; display: flex; justify-content: center; padding: 15px;"
11
- >
12
- <h3
13
- aria-level="3"
14
- class="related-articles-heading__HeadingForRelatedArticles-sc-1m1bjcq-0 fZqlzx"
15
- role="heading"
16
- >
17
- Latest from Sport
18
- </h3>
19
- </div>
20
- </div>
21
- </DocumentFragment>
22
- `;
23
-
24
- exports[`<LatestFromSection> renders 1`] = `
25
- <DocumentFragment>
26
- <div
27
- class="tc-view__TcView-nuazoi-0 fPjBcr"
28
- >
29
- <div
30
- class="tc-view__TcView-nuazoi-0 fPjBcr"
31
- style="align-items: center; border-bottom-color: #DBDBDB; border-bottom-width: 1px; border-style: solid; border-top-color: #DBDBDB; border-top-width: 1px; display: flex; justify-content: center; padding: 15px;"
32
- >
33
- <h3
34
- aria-level="3"
35
- class="related-articles-heading__HeadingForRelatedArticles-sc-1m1bjcq-0 fZqlzx"
36
- role="heading"
37
- >
38
- Latest from Sport
39
- </h3>
40
- </div>
41
- <div
42
- class="tc-view__TcView-nuazoi-0 config__Base-bs1997-0 config__Base-bs1997-2 gpmFGs"
43
- >
44
- <div
45
- class="tc-view__TcView-nuazoi-0 responsive__SliceContainer-sc-1kirgpc-0 dOGrmV"
46
- >
47
- <div
48
- class="tc-view__TcView-nuazoi-0 responsive__Base-sc-1lqbq6a-1 responsive__Base-sc-1lqbq6a-2 responsive__Base-sc-1lqbq6a-4 fwcUxi"
49
- >
50
- <div
51
- class="tc-view__TcView-nuazoi-0 responsive__ChildContainer-sc-1lqbq6a-0 wGIJh"
52
- >
53
- <div
54
- data-testid="related-article-item"
55
- >
56
- <a
57
- class="link__RespLink-sc-1ocvixa-0 dfMuic"
58
- href="https://www.thetimes.co.uk/article/the-entire-tour-de-france-bows-to-the-greatness-of-mark-cavendish-2zq0zgfmn"
59
- >
60
- <div
61
- class="tc-view__TcView-nuazoi-0 fPjBcr"
62
- >
63
- <div
64
- class="tc-view__TcView-nuazoi-0 fPjBcr"
65
- style="align-items: flex-start; display: block; flex-direction: row; flex-wrap: wrap; justify-content: flex-end;"
66
- >
67
- <div
68
- class="imageContainerClass tc-view__TcView-nuazoi-0 fPjBcr"
69
- style="flex: 1; margin-bottom: 10px; min-width: 100%;"
70
- >
71
- <div
72
- class="tc-view__TcView-nuazoi-0 fPjBcr"
73
- style="background-color: rgb(239, 239, 239);"
74
- >
75
- <div
76
- style="padding-bottom: 56.25%;"
77
- >
78
- <img
79
- class="responsive-sc-1nnon4d-0 bAbKns"
80
- loading="lazy"
81
- src="https://www.thetimes.co.uk/imageserver/image/methode%2Ftimes%2Fprod%2Fweb%2Fbin%2Fb7fca746-d8ec-11eb-8f14-0bb645f59db0.jpg"
82
- />
83
- </div>
84
- </div>
85
- </div>
86
- <div
87
- class="tc-view__TcView-nuazoi-0 contentContainerClass card-content__TcCardContainer-sc-1w0wvq8-0 hzpWKJ"
88
- >
89
- <div
90
- class="tc-view__TcView-nuazoi-0 fPjBcr"
91
- >
92
- <div
93
- class="tc-view__TcView-nuazoi-0 fPjBcr"
94
- style="margin-bottom: 0px;"
95
- >
96
- <div
97
- class="tc-text__TcText-sc-15igzev-0 kwFxdN"
98
- style="font-family: Roboto-Regular, Roboto-Regular-fallback, sans-serif; font-size: 12px; line-height: 12px; font-weight: 400; margin-bottom: 0px; margin-top: -1px; padding-top: 1px; letter-spacing: 0.5px; color: rgb(0, 131, 71);"
99
- >
100
- CYCLING | DAVID WALSH
101
- </div>
102
- </div>
103
- <div
104
- aria-level="3"
105
- class="headlineClass tc-text__TcText-sc-15igzev-0 kwFxdN"
106
- role="heading"
107
- style="color: rgb(51, 51, 51); font-family: TimesModern-Bold, TimesModern-Bold-fallback, serif; font-weight: 400; margin-bottom: 5px; font-size: 22px; line-height: 27px; margin-top: 0px;"
108
- >
109
- The entire Tour bows to the greatness of Cavendish
110
- </div>
111
- <div
112
- class="tc-text__TcText-sc-15igzev-0 kwFxdN"
113
- style="color: rgb(105, 105, 105); font-family: Roboto-Regular, Roboto-Regular-fallback, sans-serif; font-size: 14px; line-height: 17px; margin-bottom: 5px;"
114
- >
115
- <time
116
- datetime="2021-06-29T23:01:00Z"
117
- >
118
- June 30 2021, 12.01am
119
- </time>
120
- </div>
121
- <div
122
- class="tc-text__TcText-sc-15igzev-0 kwFxdN"
123
- >
124
- <div
125
- class="tc-text__TcText-sc-15igzev-0 article-byline__BylineText-ynke2n-0 gfNVkP"
126
- >
127
- David Walsh
128
- </div>
129
- </div>
130
- </div>
131
- </div>
132
- </div>
133
- </div>
134
- </a>
135
- </div>
136
- </div>
137
- <div
138
- class="tc-view__TcView-nuazoi-0 responsive-sc-1kirgpc-1 kpLnTa"
139
- />
140
- <div
141
- class="tc-view__TcView-nuazoi-0 responsive__ChildContainer-sc-1lqbq6a-0 wGIJh"
142
- >
143
- <div
144
- data-testid="related-article-item"
145
- >
146
- <a
147
- class="link__RespLink-sc-1ocvixa-0 dfMuic"
148
- href="https://www.thetimes.co.uk/article/jordan-pickford-repels-everything-germans-muster-ktkcvc85p"
149
- >
150
- <div
151
- class="tc-view__TcView-nuazoi-0 fPjBcr"
152
- >
153
- <div
154
- class="tc-view__TcView-nuazoi-0 fPjBcr"
155
- style="align-items: flex-start; display: block; flex-direction: row; flex-wrap: wrap; justify-content: flex-end;"
156
- >
157
- <div
158
- class="imageContainerClass tc-view__TcView-nuazoi-0 fPjBcr"
159
- style="flex: 1; margin-bottom: 10px; min-width: 100%;"
160
- >
161
- <div
162
- class="tc-view__TcView-nuazoi-0 fPjBcr"
163
- style="background-color: rgb(239, 239, 239);"
164
- >
165
- <div
166
- style="padding-bottom: 56.25%;"
167
- >
168
- <img
169
- class="responsive-sc-1nnon4d-0 bAbKns"
170
- loading="lazy"
171
- src="https://www.thetimes.co.uk/imageserver/image/methode%2Ftimes%2Fprod%2Fweb%2Fbin%2F65e48858-d913-11eb-b92f-5fe539a30c29.jpg"
172
- />
173
- </div>
174
- </div>
175
- </div>
176
- <div
177
- class="tc-view__TcView-nuazoi-0 contentContainerClass card-content__TcCardContainer-sc-1w0wvq8-0 hzpWKJ"
178
- >
179
- <div
180
- class="tc-view__TcView-nuazoi-0 fPjBcr"
181
- >
182
- <div
183
- class="tc-view__TcView-nuazoi-0 fPjBcr"
184
- style="margin-bottom: 0px;"
185
- >
186
- <div
187
- class="tc-text__TcText-sc-15igzev-0 kwFxdN"
188
- style="font-family: Roboto-Regular, Roboto-Regular-fallback, sans-serif; font-size: 12px; line-height: 12px; font-weight: 400; margin-bottom: 0px; margin-top: -1px; padding-top: 1px; letter-spacing: 0.5px; color: rgb(0, 131, 71);"
189
- >
190
- EURO 2020 | MATT LAWTON
191
- </div>
192
- </div>
193
- <div
194
- aria-level="3"
195
- class="headlineClass tc-text__TcText-sc-15igzev-0 kwFxdN"
196
- role="heading"
197
- style="color: rgb(51, 51, 51); font-family: TimesModern-Bold, TimesModern-Bold-fallback, serif; font-weight: 400; margin-bottom: 5px; font-size: 22px; line-height: 27px; margin-top: 0px;"
198
- >
199
- Flawless Pickford repels everything Germans muster
200
- </div>
201
- <div
202
- class="tc-text__TcText-sc-15igzev-0 kwFxdN"
203
- style="color: rgb(105, 105, 105); font-family: Roboto-Regular, Roboto-Regular-fallback, sans-serif; font-size: 14px; line-height: 17px; margin-bottom: 5px;"
204
- >
205
- <time
206
- datetime="2021-06-30T11:00:00Z"
207
- >
208
- June 30 2021, 12.00pm
209
- </time>
210
- </div>
211
- <div
212
- class="tc-text__TcText-sc-15igzev-0 kwFxdN"
213
- >
214
- <div
215
- class="tc-text__TcText-sc-15igzev-0 article-byline__BylineText-ynke2n-0 gfNVkP"
216
- >
217
- Matt Lawton
218
- </div>
219
- </div>
220
- </div>
221
- </div>
222
- </div>
223
- </div>
224
- </a>
225
- </div>
226
- </div>
227
- <div
228
- class="tc-view__TcView-nuazoi-0 responsive-sc-1kirgpc-1 kpLnTa"
229
- />
230
- <div
231
- class="tc-view__TcView-nuazoi-0 responsive__ChildContainer-sc-1lqbq6a-0 wGIJh"
232
- >
233
- <div
234
- data-testid="related-article-item"
235
- >
236
- <a
237
- class="link__RespLink-sc-1ocvixa-0 dfMuic"
238
- href="https://www.thetimes.co.uk/article/the-tactical-masterstrokes-behind-englands-ruthless-win-s2s5j6k8l"
239
- >
240
- <div
241
- class="tc-view__TcView-nuazoi-0 fPjBcr"
242
- >
243
- <div
244
- class="tc-view__TcView-nuazoi-0 fPjBcr"
245
- style="align-items: flex-start; display: block; flex-direction: row; flex-wrap: wrap; justify-content: flex-end;"
246
- >
247
- <div
248
- class="imageContainerClass tc-view__TcView-nuazoi-0 fPjBcr"
249
- style="flex: 1; margin-bottom: 10px; min-width: 100%;"
250
- >
251
- <div
252
- class="tc-view__TcView-nuazoi-0 fPjBcr"
253
- style="background-color: rgb(239, 239, 239);"
254
- >
255
- <div
256
- style="padding-bottom: 56.25%;"
257
- >
258
- <img
259
- class="responsive-sc-1nnon4d-0 bAbKns"
260
- loading="lazy"
261
- src="https://www.thetimes.co.uk/imageserver/image/methode%2Ftimes%2Fprod%2Fweb%2Fbin%2F798e1dce-d918-11eb-b92f-5fe539a30c29.jpg"
262
- />
263
- </div>
264
- </div>
265
- </div>
266
- <div
267
- class="tc-view__TcView-nuazoi-0 contentContainerClass card-content__TcCardContainer-sc-1w0wvq8-0 hzpWKJ"
268
- >
269
- <div
270
- class="tc-view__TcView-nuazoi-0 fPjBcr"
271
- >
272
- <div
273
- class="tc-view__TcView-nuazoi-0 fPjBcr"
274
- style="margin-bottom: 0px;"
275
- >
276
- <div
277
- class="tc-text__TcText-sc-15igzev-0 kwFxdN"
278
- style="font-family: Roboto-Regular, Roboto-Regular-fallback, sans-serif; font-size: 12px; line-height: 12px; font-weight: 400; margin-bottom: 0px; margin-top: -1px; padding-top: 1px; letter-spacing: 0.5px; color: rgb(0, 131, 71);"
279
- >
280
- EURO 2020 | JONATHAN NORTHCROFT
281
- </div>
282
- </div>
283
- <div
284
- aria-level="3"
285
- class="headlineClass tc-text__TcText-sc-15igzev-0 kwFxdN"
286
- role="heading"
287
- style="color: rgb(51, 51, 51); font-family: TimesModern-Bold, TimesModern-Bold-fallback, serif; font-weight: 400; margin-bottom: 5px; font-size: 22px; line-height: 27px; margin-top: 0px;"
288
- >
289
- The tactical masterstrokes behind England’s ruthless win
290
- </div>
291
- <div
292
- class="tc-text__TcText-sc-15igzev-0 kwFxdN"
293
- style="color: rgb(105, 105, 105); font-family: Roboto-Regular, Roboto-Regular-fallback, sans-serif; font-size: 14px; line-height: 17px; margin-bottom: 5px;"
294
- >
295
- <time
296
- datetime="2021-06-29T23:01:00Z"
297
- >
298
- June 30 2021, 12.01am
299
- </time>
300
- </div>
301
- <div
302
- class="tc-text__TcText-sc-15igzev-0 kwFxdN"
303
- >
304
- <div
305
- class="tc-text__TcText-sc-15igzev-0 article-byline__BylineText-ynke2n-0 gfNVkP"
306
- >
307
- Jonathan Northcroft
308
- </div>
309
- </div>
310
- </div>
311
- </div>
312
- </div>
313
- </div>
314
- </a>
315
- </div>
316
- </div>
317
- </div>
318
- </div>
319
- </div>
320
- </div>
321
- </DocumentFragment>
322
- `;