@times-components/ts-slices 1.3.18 → 1.3.21
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 +24 -0
- package/dist/components/article/Article/styles.js +2 -2
- package/dist/components/article/ArticleComment/styles.js +2 -2
- package/dist/components/article/shared-styles.js +2 -2
- package/dist/components/elements/Headline/__tests__/Headline.test.js +6 -3
- package/dist/components/elements/Headline/styles.js +2 -2
- package/dist/components/elements/Image/__tests__/Image.test.js +18 -12
- package/dist/components/elements/Image/styles.js +2 -2
- package/dist/components/slices/Lead1/styles.js +2 -2
- package/dist/components/slices/Lead1And1/styles.js +2 -2
- package/dist/components/slices/Lead1And2/styles.js +2 -2
- package/dist/components/slices/Lead1And3Reversed/styles.js +2 -2
- package/dist/components/slices/Lead2/styles.js +2 -2
- package/dist/components/slices/RelatedArticle1/styles.js +2 -2
- package/dist/components/slices/Secondary10/styles.js +2 -2
- package/dist/components/slices/Secondary2And2/styles.js +2 -2
- package/dist/components/slices/Secondary2And3/styles.js +2 -2
- package/dist/components/slices/Secondary2And3NoPic/styles.js +2 -2
- package/dist/components/slices/Secondary3/styles.js +2 -2
- package/dist/components/slices/Secondary4/styles.js +2 -2
- package/dist/components/slices/Secondary4Odd/styles.js +2 -2
- package/dist/components/slices/__tests__/Slice.test.d.ts +1 -0
- package/dist/components/slices/__tests__/Slice.test.js +24 -0
- package/dist/components/slices/shared-styles.js +2 -2
- package/dist/fixtures/__tests__/getSlice.test.d.ts +1 -0
- package/dist/fixtures/__tests__/getSlice.test.js +12 -0
- package/dist/fixtures/article-harness/__tests__/ArticleHarness.test.d.ts +1 -0
- package/dist/fixtures/article-harness/__tests__/ArticleHarness.test.js +11 -0
- package/dist/fixtures/article-harness/styles.js +2 -2
- package/dist/utils/FakeIntersectionObserver.d.ts +14 -0
- package/dist/utils/FakeIntersectionObserver.js +14 -0
- package/dist/utils/__tests__/convertChannelSlice.test.d.ts +2 -0
- package/dist/utils/__tests__/convertChannelSlice.test.js +45 -0
- package/dist/utils/__tests__/getSlice.test.d.ts +1 -0
- package/dist/utils/__tests__/getSlice.test.js +59 -0
- package/package.json +4 -4
- package/rnw.js +1 -1
- package/src/components/article/Article/styles.ts +1 -1
- package/src/components/article/ArticleComment/styles.ts +1 -1
- package/src/components/article/shared-styles.ts +1 -1
- package/src/components/elements/Headline/__tests__/Headline.test.tsx +9 -3
- package/src/components/elements/Headline/__tests__/__snapshots__/Headline.test.tsx.snap +1 -15
- package/src/components/elements/Headline/styles.ts +1 -1
- package/src/components/elements/Image/__tests__/Image.test.tsx +20 -17
- package/src/components/elements/Image/__tests__/__snapshots__/Image.test.tsx.snap +8 -9
- package/src/components/elements/Image/styles.ts +1 -1
- package/src/components/slices/Lead1/styles.ts +1 -1
- package/src/components/slices/Lead1And1/styles.ts +1 -1
- package/src/components/slices/Lead1And2/styles.ts +1 -1
- package/src/components/slices/Lead1And3Reversed/styles.ts +1 -1
- package/src/components/slices/Lead2/styles.ts +1 -1
- package/src/components/slices/RelatedArticle1/styles.ts +1 -1
- package/src/components/slices/Secondary10/styles.ts +1 -1
- package/src/components/slices/Secondary2And2/styles.ts +1 -1
- package/src/components/slices/Secondary2And3/styles.ts +1 -1
- package/src/components/slices/Secondary2And3NoPic/styles.ts +1 -1
- package/src/components/slices/Secondary3/styles.ts +1 -1
- package/src/components/slices/Secondary4/styles.ts +1 -1
- package/src/components/slices/Secondary4Odd/styles.ts +1 -1
- package/src/components/slices/__tests__/Slice.test.tsx +32 -0
- package/src/components/slices/shared-styles.ts +1 -1
- package/src/fixtures/__tests__/getSlice.test.tsx +13 -0
- package/src/fixtures/article-harness/__tests__/ArticleHarness.test.tsx +14 -0
- package/src/fixtures/article-harness/styles.ts +1 -1
- package/src/types/externs.d.ts +1 -1
- package/src/utils/FakeIntersectionObserver.tsx +20 -0
- package/src/utils/__tests__/convertChannelSlice.test.ts +49 -0
- package/src/utils/__tests__/getSlice.test.tsx +69 -0
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
class FakeIntersectionObserver {
|
|
2
|
+
constructor(callback) {
|
|
3
|
+
this.observe = FakeIntersectionObserver.observe;
|
|
4
|
+
this.disconnect = FakeIntersectionObserver.disconnect;
|
|
5
|
+
FakeIntersectionObserver.callback = callback;
|
|
6
|
+
}
|
|
7
|
+
static intersect(isIntersecting = true) {
|
|
8
|
+
FakeIntersectionObserver.callback([{ isIntersecting }]);
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
FakeIntersectionObserver.observe = jest.fn();
|
|
12
|
+
FakeIntersectionObserver.disconnect = jest.fn();
|
|
13
|
+
export default FakeIntersectionObserver;
|
|
14
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRmFrZUludGVyc2VjdGlvbk9ic2VydmVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL3V0aWxzL0Zha2VJbnRlcnNlY3Rpb25PYnNlcnZlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRUEsTUFBTSx3QkFBd0I7SUFZNUIsWUFBWSxRQUEwQjtRQUh0QyxZQUFPLEdBQUcsd0JBQXdCLENBQUMsT0FBTyxDQUFDO1FBQzNDLGVBQVUsR0FBRyx3QkFBd0IsQ0FBQyxVQUFVLENBQUM7UUFHL0Msd0JBQXdCLENBQUMsUUFBUSxHQUFHLFFBQVEsQ0FBQztJQUMvQyxDQUFDO0lBVEQsTUFBTSxDQUFDLFNBQVMsQ0FBQyxjQUFjLEdBQUcsSUFBSTtRQUNwQyx3QkFBd0IsQ0FBQyxRQUFRLENBQUMsQ0FBQyxFQUFFLGNBQWMsRUFBRSxDQUFDLENBQUMsQ0FBQztJQUMxRCxDQUFDOztBQUxNLGdDQUFPLEdBQUcsSUFBSSxDQUFDLEVBQUUsRUFBRSxDQUFDO0FBQ3BCLG1DQUFVLEdBQUcsSUFBSSxDQUFDLEVBQUUsRUFBRSxDQUFDO0FBY2hDLGVBQWUsd0JBQXdCLENBQUMifQ==
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import 'react';
|
|
2
|
+
import '@testing-library/react';
|
|
3
|
+
import { convertChannelSlice } from '../convertChannelSlice';
|
|
4
|
+
describe('convertChannelSlice(', () => {
|
|
5
|
+
const mockData = {
|
|
6
|
+
name: 'slice',
|
|
7
|
+
children: [
|
|
8
|
+
{
|
|
9
|
+
article: {
|
|
10
|
+
headline: 'a headline',
|
|
11
|
+
images: {
|
|
12
|
+
alt: 'image alt text',
|
|
13
|
+
crops: [{ ratio: '3:2', url: 'https://dummyimage.com/300' }]
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
]
|
|
18
|
+
};
|
|
19
|
+
it('should convert channel slice', () => {
|
|
20
|
+
expect(convertChannelSlice('channel name', mockData)).toEqual({
|
|
21
|
+
children: [
|
|
22
|
+
{
|
|
23
|
+
article: {
|
|
24
|
+
headline: 'a headline',
|
|
25
|
+
images: {
|
|
26
|
+
alt: 'image alt text',
|
|
27
|
+
crops: [
|
|
28
|
+
{
|
|
29
|
+
ratio: '3:2',
|
|
30
|
+
url: 'https://dummyimage.com/300'
|
|
31
|
+
}
|
|
32
|
+
]
|
|
33
|
+
},
|
|
34
|
+
label: ''
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
],
|
|
38
|
+
name: 'slice'
|
|
39
|
+
});
|
|
40
|
+
});
|
|
41
|
+
it('should return undefined when insufficient data is provided', () => {
|
|
42
|
+
expect(convertChannelSlice('channel name', { name: 'slice', children: [{}] })).toEqual({ children: [{ article: undefined }], name: 'slice' });
|
|
43
|
+
});
|
|
44
|
+
});
|
|
45
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29udmVydENoYW5uZWxTbGljZS50ZXN0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL3V0aWxzL19fdGVzdHNfXy9jb252ZXJ0Q2hhbm5lbFNsaWNlLnRlc3QudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxPQUFPLENBQUM7QUFDZixPQUFPLHdCQUF3QixDQUFDO0FBRWhDLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBRTdELFFBQVEsQ0FBQyxzQkFBc0IsRUFBRSxHQUFHLEVBQUU7SUFDcEMsTUFBTSxRQUFRLEdBQUc7UUFDZixJQUFJLEVBQUUsT0FBTztRQUNiLFFBQVEsRUFBRTtZQUNSO2dCQUNFLE9BQU8sRUFBRTtvQkFDUCxRQUFRLEVBQUUsWUFBWTtvQkFDdEIsTUFBTSxFQUFFO3dCQUNOLEdBQUcsRUFBRSxnQkFBZ0I7d0JBQ3JCLEtBQUssRUFBRSxDQUFDLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxHQUFHLEVBQUUsNEJBQTRCLEVBQUUsQ0FBQztxQkFDN0Q7aUJBQ0Y7YUFDRjtTQUNGO0tBQ0YsQ0FBQztJQUVGLEVBQUUsQ0FBQyw4QkFBOEIsRUFBRSxHQUFHLEVBQUU7UUFDdEMsTUFBTSxDQUFDLG1CQUFtQixDQUFDLGNBQWMsRUFBRSxRQUFRLENBQUMsQ0FBQyxDQUFDLE9BQU8sQ0FBQztZQUM1RCxRQUFRLEVBQUU7Z0JBQ1I7b0JBQ0UsT0FBTyxFQUFFO3dCQUNQLFFBQVEsRUFBRSxZQUFZO3dCQUN0QixNQUFNLEVBQUU7NEJBQ04sR0FBRyxFQUFFLGdCQUFnQjs0QkFDckIsS0FBSyxFQUFFO2dDQUNMO29DQUNFLEtBQUssRUFBRSxLQUFLO29DQUNaLEdBQUcsRUFBRSw0QkFBNEI7aUNBQ2xDOzZCQUNGO3lCQUNGO3dCQUNELEtBQUssRUFBRSxFQUFFO3FCQUNWO2lCQUNGO2FBQ0Y7WUFDRCxJQUFJLEVBQUUsT0FBTztTQUNkLENBQUMsQ0FBQztJQUNMLENBQUMsQ0FBQyxDQUFDO0lBQ0gsRUFBRSxDQUFDLDREQUE0RCxFQUFFLEdBQUcsRUFBRTtRQUNwRSxNQUFNLENBQ0osbUJBQW1CLENBQUMsY0FBYyxFQUFFLEVBQUUsSUFBSSxFQUFFLE9BQU8sRUFBRSxRQUFRLEVBQUUsQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDLENBQ3ZFLENBQUMsT0FBTyxDQUFDLEVBQUUsUUFBUSxFQUFFLENBQUMsRUFBRSxPQUFPLEVBQUUsU0FBUyxFQUFFLENBQUMsRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFLENBQUMsQ0FBQztJQUNuRSxDQUFDLENBQUMsQ0FBQztBQUNMLENBQUMsQ0FBQyxDQUFDIn0=
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { getSliceComponent } from '../getSlice';
|
|
2
|
+
import Lead1 from '../../components/slices/Lead1/Lead1';
|
|
3
|
+
import Lead1And1 from '../../components/slices/Lead1And1/Lead1And1';
|
|
4
|
+
import Lead1And2 from '../../components/slices/Lead1And2/Lead1And2';
|
|
5
|
+
import Lead1And3Reversed from '../../components/slices/Lead1And3Reversed/Lead1And3Reversed';
|
|
6
|
+
import Lead2 from '../../components/slices/Lead2/Lead2';
|
|
7
|
+
import Secondary2And2 from '../../components/slices/Secondary2And2/Secondary2And2';
|
|
8
|
+
import Secondary2And3 from '../../components/slices/Secondary2And3/Secondary2And3';
|
|
9
|
+
import Secondary2And3NoPic from '../../components/slices/Secondary2And3NoPic/Secondary2And3NoPic';
|
|
10
|
+
import Secondary3 from '../../components/slices/Secondary3/Secondary3';
|
|
11
|
+
import Secondary4 from '../../components/slices/Secondary4/Secondary4';
|
|
12
|
+
import Secondary4Odd from '../../components/slices/Secondary4Odd/Secondary4Odd';
|
|
13
|
+
import Secondary10 from '../../components/slices/Secondary10/Secondary10';
|
|
14
|
+
import RelatedArticle1 from '../../components/slices/RelatedArticle1/RelatedArticle1';
|
|
15
|
+
describe('getSlice()', () => {
|
|
16
|
+
it('should render null when not able to find slice', () => {
|
|
17
|
+
expect(getSliceComponent('RELATED_ARTICLE_1000')).not.toBe;
|
|
18
|
+
});
|
|
19
|
+
it('should render RelatedArticle1 when it is called', () => {
|
|
20
|
+
expect(getSliceComponent('RELATED_ARTICLE_1')).toEqual(RelatedArticle1);
|
|
21
|
+
});
|
|
22
|
+
it('should render Secondary4Odd when it is called', () => {
|
|
23
|
+
expect(getSliceComponent('SECONDARY_4_ODD')).toEqual(Secondary4Odd);
|
|
24
|
+
});
|
|
25
|
+
it('should render Secondary10 when it is called', () => {
|
|
26
|
+
expect(getSliceComponent('SECONDARY_10')).toEqual(Secondary10);
|
|
27
|
+
});
|
|
28
|
+
it('should render Secondary4 when it is called', () => {
|
|
29
|
+
expect(getSliceComponent('SECONDARY_4')).toEqual(Secondary4);
|
|
30
|
+
});
|
|
31
|
+
it('should render Secondary3 when it is called', () => {
|
|
32
|
+
expect(getSliceComponent('SECONDARY_3')).toEqual(Secondary3);
|
|
33
|
+
});
|
|
34
|
+
it('should render Secondary2And3NoPic when it is called', () => {
|
|
35
|
+
expect(getSliceComponent('SECONDARY_2_AND_3_NO_PIC')).toEqual(Secondary2And3NoPic);
|
|
36
|
+
});
|
|
37
|
+
it('should render Secondary2And3 when it is called', () => {
|
|
38
|
+
expect(getSliceComponent('SECONDARY_2_AND_3')).toEqual(Secondary2And3);
|
|
39
|
+
});
|
|
40
|
+
it('should render Secondary2And2 when it is called', () => {
|
|
41
|
+
expect(getSliceComponent('SECONDARY_2_AND_2')).toEqual(Secondary2And2);
|
|
42
|
+
});
|
|
43
|
+
it('should render Lead2 when it is called', () => {
|
|
44
|
+
expect(getSliceComponent('LEAD_2')).toEqual(Lead2);
|
|
45
|
+
});
|
|
46
|
+
it('should render Lead1And3Reversed when it is called', () => {
|
|
47
|
+
expect(getSliceComponent('LEAD_1_AND_3_REVERSED')).toEqual(Lead1And3Reversed);
|
|
48
|
+
});
|
|
49
|
+
it('should render Lead1And2 when it is called', () => {
|
|
50
|
+
expect(getSliceComponent('LEAD_1_AND_2_COLUMNIST')).toEqual(Lead1And2);
|
|
51
|
+
});
|
|
52
|
+
it('should render Lead1 when it is called', () => {
|
|
53
|
+
expect(getSliceComponent('LEAD_1')).toEqual(Lead1);
|
|
54
|
+
});
|
|
55
|
+
it('should render Lead1And1 when it is called', () => {
|
|
56
|
+
expect(getSliceComponent('LEAD_1_AND_1_COMPONENT')).toEqual(Lead1And1);
|
|
57
|
+
});
|
|
58
|
+
});
|
|
59
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ2V0U2xpY2UudGVzdC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy91dGlscy9fX3Rlc3RzX18vZ2V0U2xpY2UudGVzdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sYUFBYSxDQUFDO0FBQ2hELE9BQU8sS0FBSyxNQUFNLHFDQUFxQyxDQUFDO0FBQ3hELE9BQU8sU0FBUyxNQUFNLDZDQUE2QyxDQUFDO0FBQ3BFLE9BQU8sU0FBUyxNQUFNLDZDQUE2QyxDQUFDO0FBQ3BFLE9BQU8saUJBQWlCLE1BQU0sNkRBQTZELENBQUM7QUFDNUYsT0FBTyxLQUFLLE1BQU0scUNBQXFDLENBQUM7QUFDeEQsT0FBTyxjQUFjLE1BQU0sdURBQXVELENBQUM7QUFDbkYsT0FBTyxjQUFjLE1BQU0sdURBQXVELENBQUM7QUFDbkYsT0FBTyxtQkFBbUIsTUFBTSxpRUFBaUUsQ0FBQztBQUNsRyxPQUFPLFVBQVUsTUFBTSwrQ0FBK0MsQ0FBQztBQUN2RSxPQUFPLFVBQVUsTUFBTSwrQ0FBK0MsQ0FBQztBQUN2RSxPQUFPLGFBQWEsTUFBTSxxREFBcUQsQ0FBQztBQUNoRixPQUFPLFdBQVcsTUFBTSxpREFBaUQsQ0FBQztBQUMxRSxPQUFPLGVBQWUsTUFBTSx5REFBeUQsQ0FBQztBQUV0RixRQUFRLENBQUMsWUFBWSxFQUFFLEdBQUcsRUFBRTtJQUMxQixFQUFFLENBQUMsZ0RBQWdELEVBQUUsR0FBRyxFQUFFO1FBQ3hELE1BQU0sQ0FBQyxpQkFBaUIsQ0FBQyxzQkFBc0IsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQztJQUM3RCxDQUFDLENBQUMsQ0FBQztJQUVILEVBQUUsQ0FBQyxpREFBaUQsRUFBRSxHQUFHLEVBQUU7UUFDekQsTUFBTSxDQUFDLGlCQUFpQixDQUFDLG1CQUFtQixDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsZUFBZSxDQUFDLENBQUM7SUFDMUUsQ0FBQyxDQUFDLENBQUM7SUFDSCxFQUFFLENBQUMsK0NBQStDLEVBQUUsR0FBRyxFQUFFO1FBQ3ZELE1BQU0sQ0FBQyxpQkFBaUIsQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLGFBQWEsQ0FBQyxDQUFDO0lBQ3RFLENBQUMsQ0FBQyxDQUFDO0lBQ0gsRUFBRSxDQUFDLDZDQUE2QyxFQUFFLEdBQUcsRUFBRTtRQUNyRCxNQUFNLENBQUMsaUJBQWlCLENBQUMsY0FBYyxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsV0FBVyxDQUFDLENBQUM7SUFDakUsQ0FBQyxDQUFDLENBQUM7SUFDSCxFQUFFLENBQUMsNENBQTRDLEVBQUUsR0FBRyxFQUFFO1FBQ3BELE1BQU0sQ0FBQyxpQkFBaUIsQ0FBQyxhQUFhLENBQUMsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxVQUFVLENBQUMsQ0FBQztJQUMvRCxDQUFDLENBQUMsQ0FBQztJQUNILEVBQUUsQ0FBQyw0Q0FBNEMsRUFBRSxHQUFHLEVBQUU7UUFDcEQsTUFBTSxDQUFDLGlCQUFpQixDQUFDLGFBQWEsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLFVBQVUsQ0FBQyxDQUFDO0lBQy9ELENBQUMsQ0FBQyxDQUFDO0lBQ0gsRUFBRSxDQUFDLHFEQUFxRCxFQUFFLEdBQUcsRUFBRTtRQUM3RCxNQUFNLENBQUMsaUJBQWlCLENBQUMsMEJBQTBCLENBQUMsQ0FBQyxDQUFDLE9BQU8sQ0FDM0QsbUJBQW1CLENBQ3BCLENBQUM7SUFDSixDQUFDLENBQUMsQ0FBQztJQUNILEVBQUUsQ0FBQyxnREFBZ0QsRUFBRSxHQUFHLEVBQUU7UUFDeEQsTUFBTSxDQUFDLGlCQUFpQixDQUFDLG1CQUFtQixDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsY0FBYyxDQUFDLENBQUM7SUFDekUsQ0FBQyxDQUFDLENBQUM7SUFDSCxFQUFFLENBQUMsZ0RBQWdELEVBQUUsR0FBRyxFQUFFO1FBQ3hELE1BQU0sQ0FBQyxpQkFBaUIsQ0FBQyxtQkFBbUIsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLGNBQWMsQ0FBQyxDQUFDO0lBQ3pFLENBQUMsQ0FBQyxDQUFDO0lBRUgsRUFBRSxDQUFDLHVDQUF1QyxFQUFFLEdBQUcsRUFBRTtRQUMvQyxNQUFNLENBQUMsaUJBQWlCLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDckQsQ0FBQyxDQUFDLENBQUM7SUFFSCxFQUFFLENBQUMsbURBQW1ELEVBQUUsR0FBRyxFQUFFO1FBQzNELE1BQU0sQ0FBQyxpQkFBaUIsQ0FBQyx1QkFBdUIsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUN4RCxpQkFBaUIsQ0FDbEIsQ0FBQztJQUNKLENBQUMsQ0FBQyxDQUFDO0lBRUgsRUFBRSxDQUFDLDJDQUEyQyxFQUFFLEdBQUcsRUFBRTtRQUNuRCxNQUFNLENBQUMsaUJBQWlCLENBQUMsd0JBQXdCLENBQUMsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxTQUFTLENBQUMsQ0FBQztJQUN6RSxDQUFDLENBQUMsQ0FBQztJQUVILEVBQUUsQ0FBQyx1Q0FBdUMsRUFBRSxHQUFHLEVBQUU7UUFDL0MsTUFBTSxDQUFDLGlCQUFpQixDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3JELENBQUMsQ0FBQyxDQUFDO0lBRUgsRUFBRSxDQUFDLDJDQUEyQyxFQUFFLEdBQUcsRUFBRTtRQUNuRCxNQUFNLENBQUMsaUJBQWlCLENBQUMsd0JBQXdCLENBQUMsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxTQUFTLENBQUMsQ0FBQztJQUN6RSxDQUFDLENBQUMsQ0FBQztBQUNMLENBQUMsQ0FBQyxDQUFDIn0=
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@times-components/ts-slices",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.21",
|
|
4
4
|
"description": "Reuseable Typescript React Components",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"dev": "dist/index.js",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"node": ">=8.9"
|
|
51
51
|
},
|
|
52
52
|
"dependencies": {
|
|
53
|
-
"@times-components/styleguide": "
|
|
53
|
+
"@times-components/ts-styleguide": "1.35.2",
|
|
54
54
|
"date-fns": "2.28.0",
|
|
55
55
|
"lodash.get": "4.4.2",
|
|
56
56
|
"react": "16.9.0",
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
},
|
|
59
59
|
"devDependencies": {
|
|
60
60
|
"@testing-library/react": "^12.1.2",
|
|
61
|
-
"@times-components/storybook": "4.2.
|
|
61
|
+
"@times-components/storybook": "4.2.20",
|
|
62
62
|
"@types/jest": "24.9.1",
|
|
63
63
|
"@types/lodash.get": "4.4.6",
|
|
64
64
|
"@types/lodash.shuffle": "4.2.6",
|
|
@@ -88,5 +88,5 @@
|
|
|
88
88
|
"@testing-library/jest-dom/extend-expect"
|
|
89
89
|
]
|
|
90
90
|
},
|
|
91
|
-
"gitHead": "
|
|
91
|
+
"gitHead": "98e54602483a0e641079df2380f9e24a48b62ef4"
|
|
92
92
|
}
|
package/rnw.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
module.exports=function(e){var t={};function i(a){if(t[a])return t[a].exports;var n=t[a]={i:a,l:!1,exports:{}};return e[a].call(n.exports,n,n.exports,i),n.l=!0,n.exports}return i.m=e,i.c=t,i.d=function(e,t,a){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(i.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(a,n,function(t){return e[t]}.bind(null,n));return a},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="",i(i.s=5)}([function(e,t){e.exports=require("react")},function(e,t){e.exports=require("@times-components/styleguide/rnw")},function(e,t){e.exports=require("styled-components")},function(e,t){var i=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,a=/^\w*$/,n=/^\./,o=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g,l=/\\(\\)?/g,r=/^\[object .+?Constructor\]$/,d="object"==typeof global&&global&&global.Object===Object&&global,s="object"==typeof self&&self&&self.Object===Object&&self,m=d||s||Function("return this")();var c,p=Array.prototype,h=Function.prototype,g=Object.prototype,y=m["__core-js_shared__"],f=(c=/[^.]+$/.exec(y&&y.keys&&y.keys.IE_PROTO||""))?"Symbol(src)_1."+c:"",u=h.toString,x=g.hasOwnProperty,b=g.toString,w=RegExp("^"+u.call(x).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$"),_=m.Symbol,S=p.splice,k=j(m,"Map"),E=j(Object,"create"),C=_?_.prototype:void 0,v=C?C.toString:void 0;function z(e){var t=-1,i=e?e.length:0;for(this.clear();++t<i;){var a=e[t];this.set(a[0],a[1])}}function F(e){var t=-1,i=e?e.length:0;for(this.clear();++t<i;){var a=e[t];this.set(a[0],a[1])}}function I(e){var t=-1,i=e?e.length:0;for(this.clear();++t<i;){var a=e[t];this.set(a[0],a[1])}}function N(e,t){for(var i,a,n=e.length;n--;)if((i=e[n][0])===(a=t)||i!=i&&a!=a)return n;return-1}function H(e,t){for(var n,o=0,l=(t=function(e,t){if(L(e))return!1;var n=typeof e;if("number"==n||"symbol"==n||"boolean"==n||null==e||P(e))return!0;return a.test(e)||!i.test(e)||null!=t&&e in Object(t)}(t,e)?[t]:L(n=t)?n:A(n)).length;null!=e&&o<l;)e=e[D(t[o++])];return o&&o==l?e:void 0}function R(e){return!(!$(e)||(t=e,f&&f in t))&&(function(e){var t=$(e)?b.call(e):"";return"[object Function]"==t||"[object GeneratorFunction]"==t}(e)||function(e){var t=!1;if(null!=e&&"function"!=typeof e.toString)try{t=!!(e+"")}catch(e){}return t}(e)?w:r).test(function(e){if(null!=e){try{return u.call(e)}catch(e){}try{return e+""}catch(e){}}return""}(e));var t}function O(e,t){var i,a,n=e.__data__;return("string"==(a=typeof(i=t))||"number"==a||"symbol"==a||"boolean"==a?"__proto__"!==i:null===i)?n["string"==typeof t?"string":"hash"]:n.map}function j(e,t){var i=function(e,t){return null==e?void 0:e[t]}(e,t);return R(i)?i:void 0}z.prototype.clear=function(){this.__data__=E?E(null):{}},z.prototype.delete=function(e){return this.has(e)&&delete this.__data__[e]},z.prototype.get=function(e){var t=this.__data__;if(E){var i=t[e];return"__lodash_hash_undefined__"===i?void 0:i}return x.call(t,e)?t[e]:void 0},z.prototype.has=function(e){var t=this.__data__;return E?void 0!==t[e]:x.call(t,e)},z.prototype.set=function(e,t){return this.__data__[e]=E&&void 0===t?"__lodash_hash_undefined__":t,this},F.prototype.clear=function(){this.__data__=[]},F.prototype.delete=function(e){var t=this.__data__,i=N(t,e);return!(i<0)&&(i==t.length-1?t.pop():S.call(t,i,1),!0)},F.prototype.get=function(e){var t=this.__data__,i=N(t,e);return i<0?void 0:t[i][1]},F.prototype.has=function(e){return N(this.__data__,e)>-1},F.prototype.set=function(e,t){var i=this.__data__,a=N(i,e);return a<0?i.push([e,t]):i[a][1]=t,this},I.prototype.clear=function(){this.__data__={hash:new z,map:new(k||F),string:new z}},I.prototype.delete=function(e){return O(this,e).delete(e)},I.prototype.get=function(e){return O(this,e).get(e)},I.prototype.has=function(e){return O(this,e).has(e)},I.prototype.set=function(e,t){return O(this,e).set(e,t),this};var A=B((function(e){var t;e=null==(t=e)?"":function(e){if("string"==typeof e)return e;if(P(e))return v?v.call(e):"";var t=e+"";return"0"==t&&1/e==-1/0?"-0":t}(t);var i=[];return n.test(e)&&i.push(""),e.replace(o,(function(e,t,a,n){i.push(a?n.replace(l,"$1"):t||e)})),i}));function D(e){if("string"==typeof e||P(e))return e;var t=e+"";return"0"==t&&1/e==-1/0?"-0":t}function B(e,t){if("function"!=typeof e||t&&"function"!=typeof t)throw new TypeError("Expected a function");var i=function(){var a=arguments,n=t?t.apply(this,a):a[0],o=i.cache;if(o.has(n))return o.get(n);var l=e.apply(this,a);return i.cache=o.set(n,l),l};return i.cache=new(B.Cache||I),i}B.Cache=I;var L=Array.isArray;function $(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}function P(e){return"symbol"==typeof e||function(e){return!!e&&"object"==typeof e}(e)&&"[object Symbol]"==b.call(e)}e.exports=function(e,t,i){var a=null==e?void 0:H(e,t);return void 0===a?i:a}},function(e,t){e.exports=require("date-fns")},function(e,t,i){"use strict";i.r(t);var a=i(0),n=i.n(a),o=i(3),l=i.n(o);const r=["sm","md","lg","xlg"],d=e=>{if(e){let t={};return r.reduce((i,a)=>{const n={...t,...l()(e,a)};return t=n,{...i,[a]:n}},{})}},s=(e,t)=>!0===l()(l()(t,e),"isSideBySide"),m=(e,t)=>!0===l()(l()(t,e),"isCentered"),c=(e,t)=>`calc(${e}% - ${(e=>12*(2*e-2)/e)(t)}px)`;var p=i(4);const h=e=>l()(e,"images.alt",l()(e,"headline")),g=[760,660,560,480,380,320,270,230,180,120,80],y=(e,t)=>{var i;const a=(i=t,g.reduce((e,t)=>i<=t?t:e,g[0]))*window.devicePixelRatio,n=new URL(e),o=new URLSearchParams(n.search.slice(1));o.set("resize",a.toString());return`${"https://www.uat-thetimes.co.uk"===n.origin?"https://www.thetimes.co.uk":n.origin}${n.pathname}?${o.toString()}`},f=(e,t)=>e.includes("thetimes.co.uk/imageserver")?y(e,t):e;var u=i(2),x=i.n(u);const b=x.a.div.withConfig({displayName:"styles__LazyContainer",componentId:"qsbah5-0"})(["position:absolute;width:100%;height:100%;background-color:",";border-radius:",";transition:0.5s;div,img{width:100%;height:100%;border-radius:",";opacity:",";transition:opacity 0.5s;}"],({visible:e})=>e?"transparent":"#f0f0f0",({isRoundal:e})=>e?"50%":0,({isRoundal:e})=>e?"50%":0,({visible:e})=>e?1:0),w=x.a.div.withConfig({displayName:"styles__BackgroundImage",componentId:"qsbah5-1"})(["background:",";background-size:cover;"],({src:e})=>e?`url(${e}) no-repeat center center`:"none"),_=({url:e,alt:t,isRoundal:i,isBackground:o})=>{const l=n.a.createRef(),[r,d]=Object(a.useState)();return Object(a.useEffect)(()=>{if("IntersectionObserver"in window){const t=new IntersectionObserver(i=>i.forEach(i=>{if(i.isIntersecting&&(t.disconnect(),e&&l.current)){const t=l.current.offsetWidth,i=new Image;i.onload=()=>d(i.src),i.src=f(e,t)}}),{rootMargin:"60px"});return l.current&&t.observe(l.current),()=>t.disconnect()}e&&l.current&&d(f(e,l.current.offsetWidth))},[e,l]),n.a.createElement(b,{visible:!!r,isRoundal:i},o?n.a.createElement(w,{src:r,ref:l,role:"img","aria-label":t}):n.a.createElement("img",{src:r,alt:t,ref:l}))};var S=i(1);const k=(e,t)=>s(e,t)||((e,t)=>!0===l()(l()(t,e),"isImageHidden"))(e,t)?0:"12px",E=(e,t)=>t&&t.includes(e)?"block":"none",C=x.a.div.withConfig({displayName:"styles__ImageContainer",componentId:"sc-8lglkt-0"})(["margin-bottom:",";@media (min-width:","px){margin-bottom:",";}@media (min-width:","px){margin-bottom:",";}@media (min-width:","px){margin-bottom:",";}"],({schema:e})=>k("sm",e),S.breakpoints.medium,({schema:e})=>k("md",e),S.breakpoints.wide,({schema:e})=>k("lg",e),S.breakpoints.huge,({schema:e})=>k("xlg",e)),v=x.a.div.withConfig({displayName:"styles__ImageRatio",componentId:"sc-8lglkt-1"})(["position:relative;display:",";overflow:hidden;&:after{content:'';display:block;padding-bottom:",";}@media (min-width:","px){display:",";}@media (min-width:","px){display:",";}@media (min-width:","px){display:",";}"],({schema:e})=>E("sm",e),({ratio:e})=>(e=>{switch(e){case"16:9":return"56.25%";case"3:2":return"66.66%";case"1:1":return"100%";default:return 0}})(e),S.breakpoints.medium,({schema:e})=>E("md",e),S.breakpoints.wide,({schema:e})=>E("lg",e),S.breakpoints.huge,({schema:e})=>E("xlg",e)),z=({article:e,displaySchema:t,clickHandler:i})=>{const a=(e=>{if(!e)return{};let t;return Object.entries(e).reduce((e,[i,a])=>{const n=l()(a,"imageRatio",t);return t=n,n&&!l()(a,"isImageHidden")?{...e,[n]:[...l()(e,n,[]),i]}:e},{})})(t);return n.a.createElement(C,{schema:t},n.a.createElement("a",{onClick:t=>{e&&i&&i(t,e)},href:e.url},Object.entries(a).map(([t,i],a)=>{const o=((e,t)=>t.images.crops.find(t=>"*"===t.ratio||t.ratio===e))(t,e);return n.a.createElement(v,{key:a,ratio:t,schema:i},n.a.createElement(_,{url:l()(o,"url"),alt:h(e),isRoundal:"1:1"===t,isBackground:"*"===l()(o,"ratio")}))})))},F=(e,t)=>l()(l()(t,e),"headlineFontSize",10),I=(e,t)=>m(e,t)?"sm"===e||"md"===e?"90%":"80%":"100%",N=(e,t)=>m(e,t)?"center":"left",H=x.a.div.withConfig({displayName:"styles__HeadlineContainer",componentId:"k0mgwi-0"})(["width:",";margin:0 auto;@media (min-width:","px){width:",";}@media (min-width:","px){width:",";}@media (min-width:","px){width:",";}a{text-decoration:none;h3{margin:0;color:",";font-size:","px;line-height:","px;font-family:",";font-weight:normal;text-align:",";@media (min-width:","px){font-size:","px;line-height:","px;text-align:",";}@media (min-width:","px){font-size:","px;line-height:","px;text-align:",";}@media (min-width:","px){font-size:","px;line-height:","px;text-align:",";}}&:hover{h3{color:#006699;}}}"],({schema:e})=>I("sm",e),S.breakpoints.medium,({schema:e})=>I("md",e),S.breakpoints.wide,({schema:e})=>I("lg",e),S.breakpoints.huge,({schema:e})=>I("xlg",e),S.colours.functional.brandColour,({schema:e})=>F("sm",e),({schema:e})=>F("sm",e),S.fonts.headline,({schema:e})=>N("sm",e),S.breakpoints.medium,({schema:e})=>F("md",e),({schema:e})=>F("md",e),({schema:e})=>N("md",e),S.breakpoints.wide,({schema:e})=>F("lg",e),({schema:e})=>F("lg",e),({schema:e})=>N("lg",e),S.breakpoints.huge,({schema:e})=>F("xlg",e),({schema:e})=>F("xlg",e),({schema:e})=>N("xlg",e)),R=({article:e,displaySchema:t,clickHandler:i})=>{if(!e.headline)return null;return n.a.createElement(H,{schema:t},n.a.createElement("a",{onClick:t=>{e&&i&&i(t,e)},href:e.url},n.a.createElement("h3",null,e.headline)))},O=(e,t)=>s(e,t)?"row":"column",j=(e,t)=>s(e,t)?l()(l()(t,e),"sideBySideWidth","50%"):"100%",A=(e,t)=>s(e,t)?l()(l()(t,e),"sideBySidePadding",8)+"px":0,D=(e,t)=>m(e,t)?"center":"flex-start",B=(e,t)=>m(e,t)&&!s(e,t)?"16px 0 24px 0":0,L=(e,t)=>l()(l()(t,e),"backgroundColor","transparent"),$=x.a.article.withConfig({displayName:"shared-styles__ArticleContainer",componentId:"sc-1kek94e-0"})(["display:flex;flex-direction:",";background-color:",";@media (min-width:","px){flex-direction:",";background-color:",";}@media (min-width:","px){flex-direction:",";background-color:",";}@media (min-width:","px){flex-direction:",";background-color:",";}"],({schema:e})=>O("sm",e),({schema:e})=>L("sm",e),S.breakpoints.medium,({schema:e})=>O("md",e),({schema:e})=>L("md",e),S.breakpoints.wide,({schema:e})=>O("lg",e),({schema:e})=>L("lg",e),S.breakpoints.huge,({schema:e})=>O("xlg",e),({schema:e})=>L("xlg",e)),P=x.a.div.withConfig({displayName:"shared-styles__SideBySideColumn",componentId:"sc-1kek94e-1"})(["width:100%;&:first-of-type{flex-shrink:0;width:",";padding-right:",";}&:last-of-type{display:flex;flex-direction:column;justify-content:",";align-items:",";margin:",";padding-left:",";}@media (min-width:","px){&:first-of-type{width:",";padding-right:",";}&:last-of-type{justify-content:",";align-items:",";margin:",";padding-left:",";}}@media (min-width:","px){&:first-of-type{width:",";padding-right:",";}&:last-of-type{justify-content:",";align-items:",";margin:",";padding-left:",";}}@media (min-width:","px){&:first-of-type{width:",";padding-right:",";}&:last-of-type{justify-content:",";align-items:",";margin:",";padding-left:",";}}"],({schema:e})=>j("sm",e),({schema:e})=>A("sm",e),({schema:e})=>D("sm",e),({schema:e})=>D("sm",e),({schema:e})=>B("sm",e),({schema:e})=>A("sm",e),S.breakpoints.medium,({schema:e})=>j("md",e),({schema:e})=>A("md",e),({schema:e})=>D("md",e),({schema:e})=>D("md",e),({schema:e})=>B("md",e),({schema:e})=>A("md",e),S.breakpoints.wide,({schema:e})=>j("lg",e),({schema:e})=>A("lg",e),({schema:e})=>D("lg",e),({schema:e})=>D("lg",e),({schema:e})=>B("lg",e),({schema:e})=>A("lg",e),S.breakpoints.huge,({schema:e})=>j("xlg",e),({schema:e})=>A("xlg",e),({schema:e})=>D("xlg",e),({schema:e})=>D("xlg",e),({schema:e})=>B("xlg",e),({schema:e})=>A("xlg",e)),T=x.a.p.withConfig({displayName:"shared-styles__Label",componentId:"sc-1kek94e-2"})(["margin:0 0 4px 0;color:",";font-size:12px;line-height:16px;letter-spacing:1px;font-family:",";text-transform:uppercase;"],S.colours.functional.secondary,S.fonts.supporting),q=(e,t)=>m(e,t)?"sm"===e||"md"===e?"90%":"80%":"100%",M=(e,t)=>m(e,t)?"center":"left",W=x.a.p.withConfig({displayName:"styles__Strapline",componentId:"p3h2iu-0"})(["width:",";margin:4px auto 0 auto;color:",";font-size:14px;line-height:20px;text-align:",";font-family:",";@media (min-width:","px){width:",";text-align:",";}@media (min-width:","px){width:",";text-align:",";}@media (min-width:","px){width:",";text-align:",";}"],({schema:e})=>q("sm",e),S.colours.functional.secondary,({schema:e})=>M("sm",e),S.fonts.body,S.breakpoints.medium,({schema:e})=>q("md",e),({schema:e})=>M("md",e),S.breakpoints.wide,({schema:e})=>q("lg",e),({schema:e})=>M("lg",e),S.breakpoints.huge,({schema:e})=>q("xlg",e),({schema:e})=>M("xlg",e)),Y=x.a.p.withConfig({displayName:"styles__TimeSince",componentId:"p3h2iu-1"})(["margin:8px 0 0 0;color:",";font-size:12px;line-height:16px;letter-spacing:1px;font-family:",";text-transform:uppercase;"],S.colours.functional.secondary,S.fonts.supporting),U=x.a.div.withConfig({displayName:"styles__Link",componentId:"p3h2iu-2"})(["margin-top:8px;a{color:#006699;font-size:13px;line-height:13px;letter-spacing:0px;font-family:",";font-weight:500;text-decoration:none;&:after{display:inline-block;content:'\\E003';font-size:10px;font-family:iconfont;padding:0 0 1px 6px;vertical-align:middle;}}"],S.fonts.supporting),V=({article:e,displaySchema:t,clickHandler:i})=>{if(!e)return null;const a=e.standfirst||e.summary,o=(e=>{const t=Object(p.parseISO)(l()(e,"datePublished","")),i=Object(p.parseISO)(l()(e,"dateUpdated","")),a=Object(p.max)([t,i].filter(e=>Object(p.isValid)(e))),n=Object(p.differenceInCalendarDays)(new Date,a);return!Object(p.isValid)(a)||n>=7?null:Object(p.formatDistanceToNowStrict)(a,{roundingMethod:"floor"})+" ago"})(e);return n.a.createElement($,{schema:t},n.a.createElement(P,{schema:t},n.a.createElement(z,{article:e,displaySchema:t,clickHandler:i})),n.a.createElement(P,{schema:t},e.label&&n.a.createElement(T,null,e.label),n.a.createElement(R,{article:e,displaySchema:t,clickHandler:i}),a&&n.a.createElement(W,{schema:t},a),o&&n.a.createElement(Y,null,o),e.cta&&n.a.createElement(U,null,n.a.createElement("a",{href:e.url},e.cta))))},G=x.a.div.withConfig({displayName:"shared-styles__SliceContainer",componentId:"ismxwo-0"})(["display:flex;flex-wrap:wrap;justify-content:space-between;margin:0 auto;padding:",";@media (min-width:","px){max-width:520px;}@media (min-width:","px){max-width:860px;padding:",";}@media (min-width:","px){max-width:1024px;}@media (min-width:","px){max-width:1180px;}"],({styles:e})=>e&&e.removePadding?0:"0 16px",S.breakpoints.small,S.breakpoints.medium,({styles:e})=>e&&e.removePadding?0:"0 20px",S.breakpoints.wide,S.breakpoints.huge),J=x.a.div.withConfig({displayName:"shared-styles__SlotContainer",componentId:"ismxwo-1"})(["position:relative;width:100%;margin-bottom:",";padding-bottom:",";box-sizing:content-box;:before{content:'';display:none;position:absolute;top:0;right:0;bottom:0;width:1px;background-color:",";}:after{content:'';display:",";position:absolute;right:0;bottom:0;left:0;height:1px;background-color:",";}"],({collapse:e})=>e?0:"12px",({collapse:e})=>e?0:"12px",({styles:e})=>e&&e.lineColor?e.lineColor:"#dbdbdb",({collapse:e})=>e?"none":"block",({styles:e})=>e&&e.lineColor?e.lineColor:"#dbdbdb"),K=x()(G).withConfig({displayName:"styles__SliceContainer",componentId:"sc-614vlg-0"})(["@media (min-width:","px){flex-wrap:nowrap;}"],S.breakpoints.medium),Q=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"sc-614vlg-1"})(["@media (min-width:","px){margin-bottom:24px;padding-right:0;padding-bottom:24px;}"],S.breakpoints.medium);var X=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(K,{styles:t},n.a.createElement(Q,{styles:t},n.a.createElement(V,{article:l()(e,"children[0].article"),displaySchema:d({sm:{imageRatio:"3:2",isCentered:!0,headlineFontSize:28,backgroundColor:"#f0f0f0"},md:{isSideBySide:!0},lg:{headlineFontSize:32},xlg:{headlineFontSize:36}}),clickHandler:i}))));const Z=x()(G).withConfig({displayName:"styles__SliceContainer",componentId:"sc-1r0nv22-0"})(["@media (min-width:","px){flex-wrap:nowrap;}"],S.breakpoints.medium),ee=x()(J).withConfig({displayName:"styles__SlotContainerLead",componentId:"sc-1r0nv22-1"})(["@media (min-width:","px){margin-bottom:24px;padding-right:12px;padding-bottom:24px;:before{display:block;bottom:24px;}}"],S.breakpoints.medium),te=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"sc-1r0nv22-2"})(["@media (min-width:","px){flex-shrink:0;width:",";margin-bottom:24px;padding-bottom:24px;padding-left:12px;}"],S.breakpoints.medium,c(33.33,3));var ie=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(Z,{styles:t},n.a.createElement(ee,{styles:t},n.a.createElement(V,{article:l()(e,"children[0].article"),displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:28},md:{imageRatio:"16:9"},lg:{headlineFontSize:32},xlg:{headlineFontSize:36}}),clickHandler:i})),n.a.createElement(te,{styles:t},n.a.createElement(V,{article:l()(e,"children[1].article"),displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:22},lg:{headlineFontSize:24},xlg:{headlineFontSize:28}}),clickHandler:i}))));const ae=e=>e&&("maincomment"===e.template||"magazinecomment"===e.template||"externalcomment"===e.template),ne=x()($).withConfig({displayName:"styles__ArticleContainer",componentId:"sc-2eizyd-0"})(["align-items:center;"]),oe=x.a.div.withConfig({displayName:"styles__ImageContainer",componentId:"sc-2eizyd-1"})(["max-width:120px;margin:0 auto;@media (min-width:","px){max-width:140px;}"],S.breakpoints.huge),le=x.a.p.withConfig({displayName:"styles__Byline",componentId:"sc-2eizyd-2"})(["margin:0 0 4px 0;color:",";font-size:22px;line-height:22px;font-family:",";@media (min-width:","px){font-size:24px;line-height:24px;}"],S.colours.functional.secondary,S.fonts.headlineRegular,S.breakpoints.huge),re=({article:e,displaySchema:t,clickHandler:i})=>e?n.a.createElement(ne,{schema:t},n.a.createElement(P,{schema:t},n.a.createElement(oe,null,n.a.createElement(z,{article:e,displaySchema:t,clickHandler:i}))),n.a.createElement(P,{schema:t},e.label&&n.a.createElement(T,null,e.label),e.byline&&n.a.createElement(le,null,e.byline),n.a.createElement(R,{article:e,displaySchema:t,clickHandler:i}))):null,de=x()(G).withConfig({displayName:"styles__SliceContainer",componentId:"fss0bs-0"})(["@media (min-width:","px){flex-wrap:nowrap;}"],S.breakpoints.medium),se=x()(J).withConfig({displayName:"styles__SlotContainerLead",componentId:"fss0bs-1"})(["@media (min-width:","px){margin-bottom:24px;padding-right:12px;padding-bottom:24px;:before{display:block;bottom:24px;}}"],S.breakpoints.medium),me=x()(J).withConfig({displayName:"styles__StackedColumn",componentId:"fss0bs-2"})(["@media (min-width:","px){flex-shrink:0;width:",";margin-bottom:24px;padding-bottom:24px;padding-left:12px;}"],S.breakpoints.medium,c(33.33,3));var ce=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(de,{styles:t},n.a.createElement(se,{styles:t},n.a.createElement(V,{article:l()(e,"children[0].article"),displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:28},md:{imageRatio:"16:9"},lg:{headlineFontSize:32},xlg:{headlineFontSize:36}}),clickHandler:i})),n.a.createElement(me,{styles:t},n.a.createElement(J,{styles:t},n.a.createElement(V,{article:l()(e,"children[1].article"),displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:22},lg:{headlineFontSize:24},xlg:{headlineFontSize:28}}),clickHandler:i})),ae(l()(e,"children[2].article"))?n.a.createElement(re,{article:e.children[2].article,displaySchema:d({sm:{isSideBySide:!0,sideBySideWidth:"35%",imageRatio:"1:1",headlineFontSize:18},md:{headlineFontSize:16},lg:{sideBySideWidth:"50%"},xlg:{headlineFontSize:18}}),clickHandler:i}):n.a.createElement(V,{article:l()(e,"children[2].article"),displaySchema:d({sm:{isSideBySide:!0,imageRatio:"3:2",headlineFontSize:18},md:{headlineFontSize:16},xlg:{headlineFontSize:18}}),clickHandler:i}))));const pe=x()(J).withConfig({displayName:"styles__StackedColumn",componentId:"rqwi1t-0"})(["@media (min-width:","px){width:",";margin-bottom:24px;padding-right:12px;padding-bottom:24px;:before{display:block;bottom:24px;}}"],S.breakpoints.medium,c(50,2)),he=x.a.div.withConfig({displayName:"styles__SideBySideColumn",componentId:"rqwi1t-1"})(["display:flex;flex-wrap:wrap;justify-content:space-between;"]),ge=x()(J).withConfig({displayName:"styles__SlotContainerLead",componentId:"rqwi1t-2"})(["@media (min-width:","px){width:",";margin-bottom:24px;padding-bottom:24px;padding-left:12px;}"],S.breakpoints.medium,c(50,2)),ye=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"rqwi1t-3"})(["width:",";&:first-of-type{padding-right:12px;:before{display:block;bottom:12px;}}&:last-of-type{padding-left:12px;}"],c(50,2));var fe=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(G,{styles:t},n.a.createElement(pe,{styles:t},n.a.createElement(he,null,[...Array(2)].fill(null).map((a,o)=>n.a.createElement(ye,{key:o,styles:t},n.a.createElement(V,{article:l()(e,`children[${o}].article`),displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:18},md:{imageRatio:"16:9"},lg:{headlineFontSize:22},xlg:{headlineFontSize:24}}),clickHandler:i})))),n.a.createElement(V,{article:l()(e,"children[2].article"),displaySchema:d({sm:{isSideBySide:!0,sideBySidePadding:12,imageRatio:"3:2",headlineFontSize:18},md:{imageRatio:"16:9",headlineFontSize:22},lg:{headlineFontSize:24}}),clickHandler:i})),n.a.createElement(ge,{styles:t},n.a.createElement(V,{article:l()(e,"children[3].article"),displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:22},md:{headlineFontSize:24},xlg:{headlineFontSize:28}}),clickHandler:i}))));const ue=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"z7ncw3-0"})(["@media (min-width:","px){width:",";margin-bottom:24px;padding-bottom:24px;&:first-of-type{padding-right:12px;:before{display:block;bottom:24px;}}&:last-of-type{padding-left:12px;}}"],S.breakpoints.medium,c(50,2));var xe=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(G,{styles:t},e.children.map((e,a)=>n.a.createElement(ue,{key:a,styles:t},n.a.createElement(V,{article:e.article,displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:22},md:{imageRatio:"16:9",headlineFontSize:24},xlg:{headlineFontSize:28}}),clickHandler:i})))));const be=x()(G).withConfig({displayName:"styles__SliceContainer",componentId:"xnsfmb-0"})(["@media (min-width:","px){flex-wrap:nowrap;}"],S.breakpoints.wide),we=x()(J).withConfig({displayName:"styles__SlotContainerLead",componentId:"xnsfmb-1"})(["@media (min-width:","px){width:",";&:first-of-type{padding-right:12px;:before{display:block;bottom:12px;}}&:nth-of-type(2){padding-left:12px;}}@media (min-width:","px){margin-bottom:24px;padding-bottom:24px;:before{display:block;bottom:24px !important;}&:nth-of-type(2){padding-right:12px;}}"],S.breakpoints.medium,c(50,2),S.breakpoints.wide),_e=x()(J).withConfig({displayName:"styles__StackedColumn",componentId:"xnsfmb-2"})(["margin-bottom:0;padding-bottom:0;:after{display:none;}@media (min-width:","px){display:flex;justify-content:space-between;}@media (min-width:","px){display:block;flex-shrink:0;width:",";margin-bottom:24px;padding-bottom:24px;padding-left:12px;:after{display:block;}}"],S.breakpoints.medium,S.breakpoints.wide,c(33.33,3)),Se=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"xnsfmb-3"})(["@media (min-width:","px){width:",";margin-bottom:24px;padding-bottom:24px;&:first-of-type{padding-right:12px;:before{display:block;bottom:24px;}}&:last-of-type{padding-left:12px;}}@media (min-width:","px){width:100%;margin-bottom:12px;padding-bottom:12px;&:first-of-type{padding-right:0;:before{display:none;}}&:last-of-type{margin-bottom:0;padding:0;:after{display:none;}}}"],S.breakpoints.medium,c(50,2),S.breakpoints.wide);var ke=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(be,{styles:t},[...Array(2)].fill(null).map((a,o)=>n.a.createElement(we,{key:o,styles:t},n.a.createElement(V,{article:l()(e,`children[${o}].article`),displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:22},xlg:{headlineFontSize:24}}),clickHandler:i}))),n.a.createElement(_e,{styles:t},[...Array(2)].fill(null).map((a,o)=>{const r=l()(e,`children[${o+2}].article`);return n.a.createElement(Se,{key:o,styles:t},ae(r)?n.a.createElement(re,{article:r,displaySchema:d({sm:{isSideBySide:!0,sideBySideWidth:"35%",imageRatio:"1:1",headlineFontSize:18},md:{sideBySideWidth:"50%",headlineFontSize:16},xlg:{headlineFontSize:18}}),clickHandler:i}):n.a.createElement(V,{article:r,displaySchema:d({sm:{isSideBySide:!0,imageRatio:"3:2",headlineFontSize:18},md:{headlineFontSize:16},xlg:{headlineFontSize:18}}),clickHandler:i}))}))));const Ee=x()(G).withConfig({displayName:"styles__SliceContainer",componentId:"sc-7y5fg-0"})(["@media (min-width:","px){flex-wrap:nowrap;}"],S.breakpoints.wide),Ce=x()(J).withConfig({displayName:"styles__SlotContainerLead",componentId:"sc-7y5fg-1"})(["@media (min-width:","px){width:",";&:first-of-type{padding-right:12px;:before{display:block;bottom:12px;}}&:nth-of-type(2){padding-left:12px;}}@media (min-width:","px){margin-bottom:24px;padding-bottom:24px;:before{display:block;bottom:24px !important;}&:nth-of-type(2){padding-right:12px;}}"],S.breakpoints.medium,c(50,2),S.breakpoints.wide),ve=x()(J).withConfig({displayName:"styles__StackedColumn",componentId:"sc-7y5fg-2"})(["margin-bottom:0;padding-bottom:0;:after{display:none;}@media (min-width:","px){display:flex;justify-content:space-between;}@media (min-width:","px){display:block;flex-shrink:0;width:",";margin-bottom:24px;padding-bottom:24px;padding-left:12px;:after{display:block;}}"],S.breakpoints.medium,S.breakpoints.wide,c(33.33,3)),ze=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"sc-7y5fg-3"})(["@media (min-width:","px){width:",";margin-bottom:24px;padding:0 12px 24px 12px;:before{display:block;bottom:24px;}&:first-of-type{padding-left:0;}&:last-of-type{padding-right:0;:before{display:none;}}}@media (min-width:","px){width:100%;margin-bottom:12px;padding:0 0 12px 0;:before{display:none;}&:last-of-type{margin-bottom:0;padding-bottom:0;:after{display:none;}}}"],S.breakpoints.medium,c(50,2),S.breakpoints.wide);var Fe=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(Ee,{styles:t},[...Array(2)].fill(null).map((a,o)=>n.a.createElement(Ce,{key:o,styles:t},n.a.createElement(V,{article:l()(e,`children[${o}].article`),displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:22},xlg:{headlineFontSize:24}}),clickHandler:i}))),n.a.createElement(ve,{styles:t},[...Array(3)].fill(null).map((a,o)=>n.a.createElement(ze,{key:o,styles:t},n.a.createElement(V,{article:l()(e,`children[${o+2}].article`),displaySchema:d({sm:{isImageHidden:!0,imageRatio:"3:2",headlineFontSize:18},lg:{isSideBySide:!0,isImageHidden:!1,headlineFontSize:16},xlg:{headlineFontSize:18}}),clickHandler:i}))))));const Ie=x()(G).withConfig({displayName:"styles__SliceContainer",componentId:"sc-11upv3n-0"})(["@media (min-width:","px){flex-wrap:nowrap;}"],S.breakpoints.wide),Ne=x()(J).withConfig({displayName:"styles__SlotContainerLead",componentId:"sc-11upv3n-1"})(["@media (min-width:","px){width:",";&:first-of-type{padding-right:12px;:before{display:block;bottom:12px;}}&:nth-of-type(2){padding-left:12px;}}@media (min-width:","px){margin-bottom:24px;padding-bottom:24px;:before{display:block;bottom:24px !important;}&:nth-of-type(2){padding-right:12px;}}"],S.breakpoints.medium,c(50,2),S.breakpoints.wide),He=x()(J).withConfig({displayName:"styles__StackedColumn",componentId:"sc-11upv3n-2"})(["margin-bottom:0;padding-bottom:0;:after{display:none;}@media (min-width:","px){display:flex;justify-content:space-between;}@media (min-width:","px){display:block;flex-shrink:0;width:",";margin-bottom:24px;padding-bottom:24px;padding-left:12px;:after{display:block;}}"],S.breakpoints.medium,S.breakpoints.wide,c(33.33,3)),Re=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"sc-11upv3n-3"})(["@media (min-width:","px){width:",";margin-bottom:24px;padding:0 12px 24px 12px;:before{display:block;bottom:24px;}&:first-of-type{padding-left:0;}&:last-of-type{padding-right:0;:before{display:none;}}}@media (min-width:","px){width:100%;margin-bottom:12px;padding:0 0 12px 0;:before{display:none;}&:last-of-type{margin-bottom:0;padding-bottom:0;:after{display:none;}}}"],S.breakpoints.medium,c(50,2),S.breakpoints.wide);var Oe=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(Ie,{styles:t},[...Array(2)].fill(null).map((a,o)=>n.a.createElement(Ne,{key:o,styles:t},n.a.createElement(V,{article:l()(e,`children[${o}].article`),displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:22},xlg:{headlineFontSize:24}}),clickHandler:i}))),n.a.createElement(He,{styles:t},[...Array(3)].fill(null).map((a,o)=>n.a.createElement(Re,{key:o,styles:t},n.a.createElement(V,{article:l()(e,`children[${o+2}].article`),displaySchema:d({sm:{isImageHidden:!0,headlineFontSize:18},lg:{headlineFontSize:22},xlg:{headlineFontSize:24}}),clickHandler:i}))))));const je=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"bazswq-0"})(["@media (min-width:","px){width:",";margin-bottom:24px;padding:0 12px 24px 12px;:before{display:block;bottom:24px;}:after{display:block;}&:first-of-type{padding-left:0;}&:last-of-type{padding-right:0;&:before{display:none;}}}"],S.breakpoints.medium,c(33.33,3));var Ae=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(G,{styles:t},e.children.map((e,a)=>n.a.createElement(je,{key:a,styles:t,collapse:!e.article},n.a.createElement(V,{article:e.article,displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:22},md:{headlineFontSize:18},lg:{headlineFontSize:22},xlg:{headlineFontSize:24}}),clickHandler:i})))));const De=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"sc-1gqjewy-0"})(["width:",";&:nth-of-type(odd){padding-right:12px;:before{display:block;bottom:12px;}}&:nth-of-type(even){padding-left:12px;}@media (min-width:","px){width:",";margin-bottom:24px;padding:0 12px 24px 12px;:before{display:block;bottom:24px !important;}&:first-of-type{padding-left:0;}&:last-of-type{padding-right:0;&:before{display:none;}}}"],c(50,2),S.breakpoints.medium,c(25,4));var Be=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(G,{styles:t},e.children.map((e,a)=>n.a.createElement(De,{key:a,styles:t},n.a.createElement(V,{article:e.article,displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:18},lg:{headlineFontSize:22},xlg:{headlineFontSize:24}}),clickHandler:i})))));const Le=x()(G).withConfig({displayName:"styles__SliceContainer",componentId:"c5tu9p-0"})(["@media (min-width:","px){flex-wrap:nowrap;}"],S.breakpoints.wide),$e=x()(J).withConfig({displayName:"styles__SlotContainerLarge",componentId:"c5tu9p-1"})(["order:1;@media (min-width:","px){width:",";&:first-of-type{padding-right:12px;:before{display:block;bottom:12px;}}&:nth-of-type(3){padding-left:12px;}}@media (min-width:","px){flex-shrink:0;width:",";margin-bottom:24px;padding-bottom:24px;:before{display:block;bottom:24px !important;}&:nth-of-type(3){padding-right:12px;}}"],S.breakpoints.medium,c(50,2),S.breakpoints.wide,c(33.33,3)),Pe=x()(J).withConfig({displayName:"styles__SlotContainerSmall",componentId:"c5tu9p-2"})(["order:2;@media (min-width:","px){width:",";margin-bottom:24px;padding-bottom:24px;&:nth-of-type(2){padding-right:12px;:before{display:block;bottom:24px;}}&:last-of-type{padding-left:12px;}}@media (min-width:","px){order:1;&:nth-of-type(2){padding-left:12px;:before{bottom:24px;}}}"],S.breakpoints.medium,c(50,2),S.breakpoints.wide);var Te=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(Le,{styles:t},[...Array(2)].fill(null).map((a,o)=>{const r=l()(e,`children[${2*o}].article`),s=l()(e,`children[${2*o+1}].article`);return n.a.createElement(n.a.Fragment,{key:o},n.a.createElement($e,{styles:t},n.a.createElement(V,{article:r,displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:22},xlg:{headlineFontSize:24}}),clickHandler:i})),n.a.createElement(Pe,{styles:t},ae(s)?n.a.createElement(re,{article:s,displaySchema:d({sm:{isSideBySide:!0,sideBySideWidth:"35%",imageRatio:"1:1",headlineFontSize:18},md:{sideBySideWidth:"50%",headlineFontSize:16},lg:{isSideBySide:!1},xlg:{headlineFontSize:18}}),clickHandler:i}):n.a.createElement(V,{article:s,displaySchema:d({sm:{isImageHidden:!0,imageRatio:"3:2",headlineFontSize:18},md:{isImageHidden:!1,isSideBySide:!0,headlineFontSize:16},lg:{isSideBySide:!1},xlg:{headlineFontSize:18}}),clickHandler:i})))})));const qe=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"sc-189xcog-0"})(["width:",";&:nth-of-type(odd){padding-right:12px;:before{display:block;bottom:12px;}}&:nth-of-type(even){padding-left:12px;}@media (min-width:","px){width:",";margin-bottom:24px;padding:0 12px 24px 12px;:before{display:block;bottom:24px !important;}&:nth-of-type(5n + 1){padding-left:0;}&:nth-of-type(5n){padding-right:0;&:before{display:none;}}}"],c(50,2),S.breakpoints.medium,c(20,5));var Me=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(G,{styles:t},e.children.map((e,a)=>n.a.createElement(qe,{key:a,styles:t},n.a.createElement(V,{article:l()(e,"article"),displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:18,isCentered:!0},lg:{headlineFontSize:22},xlg:{headlineFontSize:24}}),clickHandler:i})))));const We=x()(G).withConfig({displayName:"styles__SliceContainer",componentId:"b33h2c-0"})(["@media (min-width:","px){flex-wrap:nowrap;}"],S.breakpoints.medium),Ye=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"b33h2c-1"})(["@media (min-width:","px){margin-bottom:24px;padding-right:0;padding-bottom:24px;}"],S.breakpoints.medium);var Ue=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(We,{styles:t},n.a.createElement(Ye,{styles:t},n.a.createElement(V,{article:l()(e,"children[0].article"),displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:28},md:{isSideBySide:!0},lg:{headlineFontSize:32},xlg:{headlineFontSize:36}}),clickHandler:i}))));const Ve=({slice:e,styles:t,clickHandler:i})=>{const a=(e=>{switch(e){case"LEAD_1":case"LEAD_1_COMPONENT":case"INTERACTIVE_FULL_WIDTH":return X;case"LEAD_1_AND_1":case"LEAD_1_AND_1_COMPONENT":return ie;case"LEAD_1_AND_2":case"LEAD_1_AND_2_COLUMNIST":return ce;case"LEAD_1_AND_3_REVERSED":return fe;case"LEAD_2":case"LEAD_2_COMPONENT":case"INTERACTIVE_HALF_WIDTH":return xe;case"SECONDARY_2_AND_2":return ke;case"SECONDARY_2_AND_3":return Fe;case"SECONDARY_2_AND_3_NO_PIC":return Oe;case"SECONDARY_3":return Ae;case"SECONDARY_4":return Be;case"SECONDARY_4_ODD":case"SECONDARY_4_ODD_COLUMNIST":return Te;case"SECONDARY_10":return Me;case"RELATED_ARTICLE_1":return Ue;default:return()=>null}})(e.name);return n.a.createElement(a,{slice:e,styles:t,clickHandler:i})};i.d(t,"Slice",(function(){return Ve}))}]);
|
|
1
|
+
module.exports=function(e){var t={};function i(a){if(t[a])return t[a].exports;var n=t[a]={i:a,l:!1,exports:{}};return e[a].call(n.exports,n,n.exports,i),n.l=!0,n.exports}return i.m=e,i.c=t,i.d=function(e,t,a){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(i.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(a,n,function(t){return e[t]}.bind(null,n));return a},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="",i(i.s=5)}([function(e,t){e.exports=require("react")},function(e,t){e.exports=require("@times-components/ts-styleguide/rnw")},function(e,t){e.exports=require("styled-components")},function(e,t){var i=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,a=/^\w*$/,n=/^\./,o=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g,l=/\\(\\)?/g,r=/^\[object .+?Constructor\]$/,d="object"==typeof global&&global&&global.Object===Object&&global,s="object"==typeof self&&self&&self.Object===Object&&self,m=d||s||Function("return this")();var c,p=Array.prototype,h=Function.prototype,g=Object.prototype,y=m["__core-js_shared__"],f=(c=/[^.]+$/.exec(y&&y.keys&&y.keys.IE_PROTO||""))?"Symbol(src)_1."+c:"",u=h.toString,x=g.hasOwnProperty,b=g.toString,w=RegExp("^"+u.call(x).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$"),_=m.Symbol,S=p.splice,k=j(m,"Map"),E=j(Object,"create"),C=_?_.prototype:void 0,v=C?C.toString:void 0;function z(e){var t=-1,i=e?e.length:0;for(this.clear();++t<i;){var a=e[t];this.set(a[0],a[1])}}function F(e){var t=-1,i=e?e.length:0;for(this.clear();++t<i;){var a=e[t];this.set(a[0],a[1])}}function I(e){var t=-1,i=e?e.length:0;for(this.clear();++t<i;){var a=e[t];this.set(a[0],a[1])}}function N(e,t){for(var i,a,n=e.length;n--;)if((i=e[n][0])===(a=t)||i!=i&&a!=a)return n;return-1}function H(e,t){for(var n,o=0,l=(t=function(e,t){if(L(e))return!1;var n=typeof e;if("number"==n||"symbol"==n||"boolean"==n||null==e||P(e))return!0;return a.test(e)||!i.test(e)||null!=t&&e in Object(t)}(t,e)?[t]:L(n=t)?n:A(n)).length;null!=e&&o<l;)e=e[D(t[o++])];return o&&o==l?e:void 0}function R(e){return!(!$(e)||(t=e,f&&f in t))&&(function(e){var t=$(e)?b.call(e):"";return"[object Function]"==t||"[object GeneratorFunction]"==t}(e)||function(e){var t=!1;if(null!=e&&"function"!=typeof e.toString)try{t=!!(e+"")}catch(e){}return t}(e)?w:r).test(function(e){if(null!=e){try{return u.call(e)}catch(e){}try{return e+""}catch(e){}}return""}(e));var t}function O(e,t){var i,a,n=e.__data__;return("string"==(a=typeof(i=t))||"number"==a||"symbol"==a||"boolean"==a?"__proto__"!==i:null===i)?n["string"==typeof t?"string":"hash"]:n.map}function j(e,t){var i=function(e,t){return null==e?void 0:e[t]}(e,t);return R(i)?i:void 0}z.prototype.clear=function(){this.__data__=E?E(null):{}},z.prototype.delete=function(e){return this.has(e)&&delete this.__data__[e]},z.prototype.get=function(e){var t=this.__data__;if(E){var i=t[e];return"__lodash_hash_undefined__"===i?void 0:i}return x.call(t,e)?t[e]:void 0},z.prototype.has=function(e){var t=this.__data__;return E?void 0!==t[e]:x.call(t,e)},z.prototype.set=function(e,t){return this.__data__[e]=E&&void 0===t?"__lodash_hash_undefined__":t,this},F.prototype.clear=function(){this.__data__=[]},F.prototype.delete=function(e){var t=this.__data__,i=N(t,e);return!(i<0)&&(i==t.length-1?t.pop():S.call(t,i,1),!0)},F.prototype.get=function(e){var t=this.__data__,i=N(t,e);return i<0?void 0:t[i][1]},F.prototype.has=function(e){return N(this.__data__,e)>-1},F.prototype.set=function(e,t){var i=this.__data__,a=N(i,e);return a<0?i.push([e,t]):i[a][1]=t,this},I.prototype.clear=function(){this.__data__={hash:new z,map:new(k||F),string:new z}},I.prototype.delete=function(e){return O(this,e).delete(e)},I.prototype.get=function(e){return O(this,e).get(e)},I.prototype.has=function(e){return O(this,e).has(e)},I.prototype.set=function(e,t){return O(this,e).set(e,t),this};var A=B((function(e){var t;e=null==(t=e)?"":function(e){if("string"==typeof e)return e;if(P(e))return v?v.call(e):"";var t=e+"";return"0"==t&&1/e==-1/0?"-0":t}(t);var i=[];return n.test(e)&&i.push(""),e.replace(o,(function(e,t,a,n){i.push(a?n.replace(l,"$1"):t||e)})),i}));function D(e){if("string"==typeof e||P(e))return e;var t=e+"";return"0"==t&&1/e==-1/0?"-0":t}function B(e,t){if("function"!=typeof e||t&&"function"!=typeof t)throw new TypeError("Expected a function");var i=function(){var a=arguments,n=t?t.apply(this,a):a[0],o=i.cache;if(o.has(n))return o.get(n);var l=e.apply(this,a);return i.cache=o.set(n,l),l};return i.cache=new(B.Cache||I),i}B.Cache=I;var L=Array.isArray;function $(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}function P(e){return"symbol"==typeof e||function(e){return!!e&&"object"==typeof e}(e)&&"[object Symbol]"==b.call(e)}e.exports=function(e,t,i){var a=null==e?void 0:H(e,t);return void 0===a?i:a}},function(e,t){e.exports=require("date-fns")},function(e,t,i){"use strict";i.r(t);var a=i(0),n=i.n(a),o=i(3),l=i.n(o);const r=["sm","md","lg","xlg"],d=e=>{if(e){let t={};return r.reduce((i,a)=>{const n={...t,...l()(e,a)};return t=n,{...i,[a]:n}},{})}},s=(e,t)=>!0===l()(l()(t,e),"isSideBySide"),m=(e,t)=>!0===l()(l()(t,e),"isCentered"),c=(e,t)=>`calc(${e}% - ${(e=>12*(2*e-2)/e)(t)}px)`;var p=i(4);const h=e=>l()(e,"images.alt",l()(e,"headline")),g=[760,660,560,480,380,320,270,230,180,120,80],y=(e,t)=>{var i;const a=(i=t,g.reduce((e,t)=>i<=t?t:e,g[0]))*window.devicePixelRatio,n=new URL(e),o=new URLSearchParams(n.search.slice(1));o.set("resize",a.toString());return`${"https://www.uat-thetimes.co.uk"===n.origin?"https://www.thetimes.co.uk":n.origin}${n.pathname}?${o.toString()}`},f=(e,t)=>e.includes("thetimes.co.uk/imageserver")?y(e,t):e;var u=i(2),x=i.n(u);const b=x.a.div.withConfig({displayName:"styles__LazyContainer",componentId:"qsbah5-0"})(["position:absolute;width:100%;height:100%;background-color:",";border-radius:",";transition:0.5s;div,img{width:100%;height:100%;border-radius:",";opacity:",";transition:opacity 0.5s;}"],({visible:e})=>e?"transparent":"#f0f0f0",({isRoundal:e})=>e?"50%":0,({isRoundal:e})=>e?"50%":0,({visible:e})=>e?1:0),w=x.a.div.withConfig({displayName:"styles__BackgroundImage",componentId:"qsbah5-1"})(["background:",";background-size:cover;"],({src:e})=>e?`url(${e}) no-repeat center center`:"none"),_=({url:e,alt:t,isRoundal:i,isBackground:o})=>{const l=n.a.createRef(),[r,d]=Object(a.useState)();return Object(a.useEffect)(()=>{if("IntersectionObserver"in window){const t=new IntersectionObserver(i=>i.forEach(i=>{if(i.isIntersecting&&(t.disconnect(),e&&l.current)){const t=l.current.offsetWidth,i=new Image;i.onload=()=>d(i.src),i.src=f(e,t)}}),{rootMargin:"60px"});return l.current&&t.observe(l.current),()=>t.disconnect()}e&&l.current&&d(f(e,l.current.offsetWidth))},[e,l]),n.a.createElement(b,{visible:!!r,isRoundal:i},o?n.a.createElement(w,{src:r,ref:l,role:"img","aria-label":t}):n.a.createElement("img",{src:r,alt:t,ref:l}))};var S=i(1);const k=(e,t)=>s(e,t)||((e,t)=>!0===l()(l()(t,e),"isImageHidden"))(e,t)?0:"12px",E=(e,t)=>t&&t.includes(e)?"block":"none",C=x.a.div.withConfig({displayName:"styles__ImageContainer",componentId:"sc-8lglkt-0"})(["margin-bottom:",";@media (min-width:","px){margin-bottom:",";}@media (min-width:","px){margin-bottom:",";}@media (min-width:","px){margin-bottom:",";}"],({schema:e})=>k("sm",e),S.breakpoints.medium,({schema:e})=>k("md",e),S.breakpoints.wide,({schema:e})=>k("lg",e),S.breakpoints.huge,({schema:e})=>k("xlg",e)),v=x.a.div.withConfig({displayName:"styles__ImageRatio",componentId:"sc-8lglkt-1"})(["position:relative;display:",";overflow:hidden;&:after{content:'';display:block;padding-bottom:",";}@media (min-width:","px){display:",";}@media (min-width:","px){display:",";}@media (min-width:","px){display:",";}"],({schema:e})=>E("sm",e),({ratio:e})=>(e=>{switch(e){case"16:9":return"56.25%";case"3:2":return"66.66%";case"1:1":return"100%";default:return 0}})(e),S.breakpoints.medium,({schema:e})=>E("md",e),S.breakpoints.wide,({schema:e})=>E("lg",e),S.breakpoints.huge,({schema:e})=>E("xlg",e)),z=({article:e,displaySchema:t,clickHandler:i})=>{const a=(e=>{if(!e)return{};let t;return Object.entries(e).reduce((e,[i,a])=>{const n=l()(a,"imageRatio",t);return t=n,n&&!l()(a,"isImageHidden")?{...e,[n]:[...l()(e,n,[]),i]}:e},{})})(t);return n.a.createElement(C,{schema:t},n.a.createElement("a",{onClick:t=>{e&&i&&i(t,e)},href:e.url},Object.entries(a).map(([t,i],a)=>{const o=((e,t)=>t.images.crops.find(t=>"*"===t.ratio||t.ratio===e))(t,e);return n.a.createElement(v,{key:a,ratio:t,schema:i},n.a.createElement(_,{url:l()(o,"url"),alt:h(e),isRoundal:"1:1"===t,isBackground:"*"===l()(o,"ratio")}))})))},F=(e,t)=>l()(l()(t,e),"headlineFontSize",10),I=(e,t)=>m(e,t)?"sm"===e||"md"===e?"90%":"80%":"100%",N=(e,t)=>m(e,t)?"center":"left",H=x.a.div.withConfig({displayName:"styles__HeadlineContainer",componentId:"k0mgwi-0"})(["width:",";margin:0 auto;@media (min-width:","px){width:",";}@media (min-width:","px){width:",";}@media (min-width:","px){width:",";}a{text-decoration:none;h3{margin:0;color:",";font-size:","px;line-height:","px;font-family:",";font-weight:normal;text-align:",";@media (min-width:","px){font-size:","px;line-height:","px;text-align:",";}@media (min-width:","px){font-size:","px;line-height:","px;text-align:",";}@media (min-width:","px){font-size:","px;line-height:","px;text-align:",";}}&:hover{h3{color:#006699;}}}"],({schema:e})=>I("sm",e),S.breakpoints.medium,({schema:e})=>I("md",e),S.breakpoints.wide,({schema:e})=>I("lg",e),S.breakpoints.huge,({schema:e})=>I("xlg",e),S.colours.functional.brandColour,({schema:e})=>F("sm",e),({schema:e})=>F("sm",e),S.fonts.headline,({schema:e})=>N("sm",e),S.breakpoints.medium,({schema:e})=>F("md",e),({schema:e})=>F("md",e),({schema:e})=>N("md",e),S.breakpoints.wide,({schema:e})=>F("lg",e),({schema:e})=>F("lg",e),({schema:e})=>N("lg",e),S.breakpoints.huge,({schema:e})=>F("xlg",e),({schema:e})=>F("xlg",e),({schema:e})=>N("xlg",e)),R=({article:e,displaySchema:t,clickHandler:i})=>{if(!e.headline)return null;return n.a.createElement(H,{schema:t},n.a.createElement("a",{onClick:t=>{e&&i&&i(t,e)},href:e.url},n.a.createElement("h3",null,e.headline)))},O=(e,t)=>s(e,t)?"row":"column",j=(e,t)=>s(e,t)?l()(l()(t,e),"sideBySideWidth","50%"):"100%",A=(e,t)=>s(e,t)?l()(l()(t,e),"sideBySidePadding",8)+"px":0,D=(e,t)=>m(e,t)?"center":"flex-start",B=(e,t)=>m(e,t)&&!s(e,t)?"16px 0 24px 0":0,L=(e,t)=>l()(l()(t,e),"backgroundColor","transparent"),$=x.a.article.withConfig({displayName:"shared-styles__ArticleContainer",componentId:"sc-1kek94e-0"})(["display:flex;flex-direction:",";background-color:",";@media (min-width:","px){flex-direction:",";background-color:",";}@media (min-width:","px){flex-direction:",";background-color:",";}@media (min-width:","px){flex-direction:",";background-color:",";}"],({schema:e})=>O("sm",e),({schema:e})=>L("sm",e),S.breakpoints.medium,({schema:e})=>O("md",e),({schema:e})=>L("md",e),S.breakpoints.wide,({schema:e})=>O("lg",e),({schema:e})=>L("lg",e),S.breakpoints.huge,({schema:e})=>O("xlg",e),({schema:e})=>L("xlg",e)),P=x.a.div.withConfig({displayName:"shared-styles__SideBySideColumn",componentId:"sc-1kek94e-1"})(["width:100%;&:first-of-type{flex-shrink:0;width:",";padding-right:",";}&:last-of-type{display:flex;flex-direction:column;justify-content:",";align-items:",";margin:",";padding-left:",";}@media (min-width:","px){&:first-of-type{width:",";padding-right:",";}&:last-of-type{justify-content:",";align-items:",";margin:",";padding-left:",";}}@media (min-width:","px){&:first-of-type{width:",";padding-right:",";}&:last-of-type{justify-content:",";align-items:",";margin:",";padding-left:",";}}@media (min-width:","px){&:first-of-type{width:",";padding-right:",";}&:last-of-type{justify-content:",";align-items:",";margin:",";padding-left:",";}}"],({schema:e})=>j("sm",e),({schema:e})=>A("sm",e),({schema:e})=>D("sm",e),({schema:e})=>D("sm",e),({schema:e})=>B("sm",e),({schema:e})=>A("sm",e),S.breakpoints.medium,({schema:e})=>j("md",e),({schema:e})=>A("md",e),({schema:e})=>D("md",e),({schema:e})=>D("md",e),({schema:e})=>B("md",e),({schema:e})=>A("md",e),S.breakpoints.wide,({schema:e})=>j("lg",e),({schema:e})=>A("lg",e),({schema:e})=>D("lg",e),({schema:e})=>D("lg",e),({schema:e})=>B("lg",e),({schema:e})=>A("lg",e),S.breakpoints.huge,({schema:e})=>j("xlg",e),({schema:e})=>A("xlg",e),({schema:e})=>D("xlg",e),({schema:e})=>D("xlg",e),({schema:e})=>B("xlg",e),({schema:e})=>A("xlg",e)),T=x.a.p.withConfig({displayName:"shared-styles__Label",componentId:"sc-1kek94e-2"})(["margin:0 0 4px 0;color:",";font-size:12px;line-height:16px;letter-spacing:1px;font-family:",";text-transform:uppercase;"],S.colours.functional.secondary,S.fonts.supporting),q=(e,t)=>m(e,t)?"sm"===e||"md"===e?"90%":"80%":"100%",M=(e,t)=>m(e,t)?"center":"left",W=x.a.p.withConfig({displayName:"styles__Strapline",componentId:"p3h2iu-0"})(["width:",";margin:4px auto 0 auto;color:",";font-size:14px;line-height:20px;text-align:",";font-family:",";@media (min-width:","px){width:",";text-align:",";}@media (min-width:","px){width:",";text-align:",";}@media (min-width:","px){width:",";text-align:",";}"],({schema:e})=>q("sm",e),S.colours.functional.secondary,({schema:e})=>M("sm",e),S.fonts.body,S.breakpoints.medium,({schema:e})=>q("md",e),({schema:e})=>M("md",e),S.breakpoints.wide,({schema:e})=>q("lg",e),({schema:e})=>M("lg",e),S.breakpoints.huge,({schema:e})=>q("xlg",e),({schema:e})=>M("xlg",e)),Y=x.a.p.withConfig({displayName:"styles__TimeSince",componentId:"p3h2iu-1"})(["margin:8px 0 0 0;color:",";font-size:12px;line-height:16px;letter-spacing:1px;font-family:",";text-transform:uppercase;"],S.colours.functional.secondary,S.fonts.supporting),U=x.a.div.withConfig({displayName:"styles__Link",componentId:"p3h2iu-2"})(["margin-top:8px;a{color:#006699;font-size:13px;line-height:13px;letter-spacing:0px;font-family:",";font-weight:500;text-decoration:none;&:after{display:inline-block;content:'\\E003';font-size:10px;font-family:iconfont;padding:0 0 1px 6px;vertical-align:middle;}}"],S.fonts.supporting),V=({article:e,displaySchema:t,clickHandler:i})=>{if(!e)return null;const a=e.standfirst||e.summary,o=(e=>{const t=Object(p.parseISO)(l()(e,"datePublished","")),i=Object(p.parseISO)(l()(e,"dateUpdated","")),a=Object(p.max)([t,i].filter(e=>Object(p.isValid)(e))),n=Object(p.differenceInCalendarDays)(new Date,a);return!Object(p.isValid)(a)||n>=7?null:Object(p.formatDistanceToNowStrict)(a,{roundingMethod:"floor"})+" ago"})(e);return n.a.createElement($,{schema:t},n.a.createElement(P,{schema:t},n.a.createElement(z,{article:e,displaySchema:t,clickHandler:i})),n.a.createElement(P,{schema:t},e.label&&n.a.createElement(T,null,e.label),n.a.createElement(R,{article:e,displaySchema:t,clickHandler:i}),a&&n.a.createElement(W,{schema:t},a),o&&n.a.createElement(Y,null,o),e.cta&&n.a.createElement(U,null,n.a.createElement("a",{href:e.url},e.cta))))},G=x.a.div.withConfig({displayName:"shared-styles__SliceContainer",componentId:"ismxwo-0"})(["display:flex;flex-wrap:wrap;justify-content:space-between;margin:0 auto;padding:",";@media (min-width:","px){max-width:520px;}@media (min-width:","px){max-width:860px;padding:",";}@media (min-width:","px){max-width:1024px;}@media (min-width:","px){max-width:1180px;}"],({styles:e})=>e&&e.removePadding?0:"0 16px",S.breakpoints.small,S.breakpoints.medium,({styles:e})=>e&&e.removePadding?0:"0 20px",S.breakpoints.wide,S.breakpoints.huge),J=x.a.div.withConfig({displayName:"shared-styles__SlotContainer",componentId:"ismxwo-1"})(["position:relative;width:100%;margin-bottom:",";padding-bottom:",";box-sizing:content-box;:before{content:'';display:none;position:absolute;top:0;right:0;bottom:0;width:1px;background-color:",";}:after{content:'';display:",";position:absolute;right:0;bottom:0;left:0;height:1px;background-color:",";}"],({collapse:e})=>e?0:"12px",({collapse:e})=>e?0:"12px",({styles:e})=>e&&e.lineColor?e.lineColor:"#dbdbdb",({collapse:e})=>e?"none":"block",({styles:e})=>e&&e.lineColor?e.lineColor:"#dbdbdb"),K=x()(G).withConfig({displayName:"styles__SliceContainer",componentId:"sc-614vlg-0"})(["@media (min-width:","px){flex-wrap:nowrap;}"],S.breakpoints.medium),Q=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"sc-614vlg-1"})(["@media (min-width:","px){margin-bottom:24px;padding-right:0;padding-bottom:24px;}"],S.breakpoints.medium);var X=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(K,{styles:t},n.a.createElement(Q,{styles:t},n.a.createElement(V,{article:l()(e,"children[0].article"),displaySchema:d({sm:{imageRatio:"3:2",isCentered:!0,headlineFontSize:28,backgroundColor:"#f0f0f0"},md:{isSideBySide:!0},lg:{headlineFontSize:32},xlg:{headlineFontSize:36}}),clickHandler:i}))));const Z=x()(G).withConfig({displayName:"styles__SliceContainer",componentId:"sc-1r0nv22-0"})(["@media (min-width:","px){flex-wrap:nowrap;}"],S.breakpoints.medium),ee=x()(J).withConfig({displayName:"styles__SlotContainerLead",componentId:"sc-1r0nv22-1"})(["@media (min-width:","px){margin-bottom:24px;padding-right:12px;padding-bottom:24px;:before{display:block;bottom:24px;}}"],S.breakpoints.medium),te=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"sc-1r0nv22-2"})(["@media (min-width:","px){flex-shrink:0;width:",";margin-bottom:24px;padding-bottom:24px;padding-left:12px;}"],S.breakpoints.medium,c(33.33,3));var ie=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(Z,{styles:t},n.a.createElement(ee,{styles:t},n.a.createElement(V,{article:l()(e,"children[0].article"),displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:28},md:{imageRatio:"16:9"},lg:{headlineFontSize:32},xlg:{headlineFontSize:36}}),clickHandler:i})),n.a.createElement(te,{styles:t},n.a.createElement(V,{article:l()(e,"children[1].article"),displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:22},lg:{headlineFontSize:24},xlg:{headlineFontSize:28}}),clickHandler:i}))));const ae=e=>e&&("maincomment"===e.template||"magazinecomment"===e.template||"externalcomment"===e.template),ne=x()($).withConfig({displayName:"styles__ArticleContainer",componentId:"sc-2eizyd-0"})(["align-items:center;"]),oe=x.a.div.withConfig({displayName:"styles__ImageContainer",componentId:"sc-2eizyd-1"})(["max-width:120px;margin:0 auto;@media (min-width:","px){max-width:140px;}"],S.breakpoints.huge),le=x.a.p.withConfig({displayName:"styles__Byline",componentId:"sc-2eizyd-2"})(["margin:0 0 4px 0;color:",";font-size:22px;line-height:22px;font-family:",";@media (min-width:","px){font-size:24px;line-height:24px;}"],S.colours.functional.secondary,S.fonts.headlineRegular,S.breakpoints.huge),re=({article:e,displaySchema:t,clickHandler:i})=>e?n.a.createElement(ne,{schema:t},n.a.createElement(P,{schema:t},n.a.createElement(oe,null,n.a.createElement(z,{article:e,displaySchema:t,clickHandler:i}))),n.a.createElement(P,{schema:t},e.label&&n.a.createElement(T,null,e.label),e.byline&&n.a.createElement(le,null,e.byline),n.a.createElement(R,{article:e,displaySchema:t,clickHandler:i}))):null,de=x()(G).withConfig({displayName:"styles__SliceContainer",componentId:"fss0bs-0"})(["@media (min-width:","px){flex-wrap:nowrap;}"],S.breakpoints.medium),se=x()(J).withConfig({displayName:"styles__SlotContainerLead",componentId:"fss0bs-1"})(["@media (min-width:","px){margin-bottom:24px;padding-right:12px;padding-bottom:24px;:before{display:block;bottom:24px;}}"],S.breakpoints.medium),me=x()(J).withConfig({displayName:"styles__StackedColumn",componentId:"fss0bs-2"})(["@media (min-width:","px){flex-shrink:0;width:",";margin-bottom:24px;padding-bottom:24px;padding-left:12px;}"],S.breakpoints.medium,c(33.33,3));var ce=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(de,{styles:t},n.a.createElement(se,{styles:t},n.a.createElement(V,{article:l()(e,"children[0].article"),displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:28},md:{imageRatio:"16:9"},lg:{headlineFontSize:32},xlg:{headlineFontSize:36}}),clickHandler:i})),n.a.createElement(me,{styles:t},n.a.createElement(J,{styles:t},n.a.createElement(V,{article:l()(e,"children[1].article"),displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:22},lg:{headlineFontSize:24},xlg:{headlineFontSize:28}}),clickHandler:i})),ae(l()(e,"children[2].article"))?n.a.createElement(re,{article:e.children[2].article,displaySchema:d({sm:{isSideBySide:!0,sideBySideWidth:"35%",imageRatio:"1:1",headlineFontSize:18},md:{headlineFontSize:16},lg:{sideBySideWidth:"50%"},xlg:{headlineFontSize:18}}),clickHandler:i}):n.a.createElement(V,{article:l()(e,"children[2].article"),displaySchema:d({sm:{isSideBySide:!0,imageRatio:"3:2",headlineFontSize:18},md:{headlineFontSize:16},xlg:{headlineFontSize:18}}),clickHandler:i}))));const pe=x()(J).withConfig({displayName:"styles__StackedColumn",componentId:"rqwi1t-0"})(["@media (min-width:","px){width:",";margin-bottom:24px;padding-right:12px;padding-bottom:24px;:before{display:block;bottom:24px;}}"],S.breakpoints.medium,c(50,2)),he=x.a.div.withConfig({displayName:"styles__SideBySideColumn",componentId:"rqwi1t-1"})(["display:flex;flex-wrap:wrap;justify-content:space-between;"]),ge=x()(J).withConfig({displayName:"styles__SlotContainerLead",componentId:"rqwi1t-2"})(["@media (min-width:","px){width:",";margin-bottom:24px;padding-bottom:24px;padding-left:12px;}"],S.breakpoints.medium,c(50,2)),ye=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"rqwi1t-3"})(["width:",";&:first-of-type{padding-right:12px;:before{display:block;bottom:12px;}}&:last-of-type{padding-left:12px;}"],c(50,2));var fe=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(G,{styles:t},n.a.createElement(pe,{styles:t},n.a.createElement(he,null,[...Array(2)].fill(null).map((a,o)=>n.a.createElement(ye,{key:o,styles:t},n.a.createElement(V,{article:l()(e,`children[${o}].article`),displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:18},md:{imageRatio:"16:9"},lg:{headlineFontSize:22},xlg:{headlineFontSize:24}}),clickHandler:i})))),n.a.createElement(V,{article:l()(e,"children[2].article"),displaySchema:d({sm:{isSideBySide:!0,sideBySidePadding:12,imageRatio:"3:2",headlineFontSize:18},md:{imageRatio:"16:9",headlineFontSize:22},lg:{headlineFontSize:24}}),clickHandler:i})),n.a.createElement(ge,{styles:t},n.a.createElement(V,{article:l()(e,"children[3].article"),displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:22},md:{headlineFontSize:24},xlg:{headlineFontSize:28}}),clickHandler:i}))));const ue=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"z7ncw3-0"})(["@media (min-width:","px){width:",";margin-bottom:24px;padding-bottom:24px;&:first-of-type{padding-right:12px;:before{display:block;bottom:24px;}}&:last-of-type{padding-left:12px;}}"],S.breakpoints.medium,c(50,2));var xe=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(G,{styles:t},e.children.map((e,a)=>n.a.createElement(ue,{key:a,styles:t},n.a.createElement(V,{article:e.article,displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:22},md:{imageRatio:"16:9",headlineFontSize:24},xlg:{headlineFontSize:28}}),clickHandler:i})))));const be=x()(G).withConfig({displayName:"styles__SliceContainer",componentId:"xnsfmb-0"})(["@media (min-width:","px){flex-wrap:nowrap;}"],S.breakpoints.wide),we=x()(J).withConfig({displayName:"styles__SlotContainerLead",componentId:"xnsfmb-1"})(["@media (min-width:","px){width:",";&:first-of-type{padding-right:12px;:before{display:block;bottom:12px;}}&:nth-of-type(2){padding-left:12px;}}@media (min-width:","px){margin-bottom:24px;padding-bottom:24px;:before{display:block;bottom:24px !important;}&:nth-of-type(2){padding-right:12px;}}"],S.breakpoints.medium,c(50,2),S.breakpoints.wide),_e=x()(J).withConfig({displayName:"styles__StackedColumn",componentId:"xnsfmb-2"})(["margin-bottom:0;padding-bottom:0;:after{display:none;}@media (min-width:","px){display:flex;justify-content:space-between;}@media (min-width:","px){display:block;flex-shrink:0;width:",";margin-bottom:24px;padding-bottom:24px;padding-left:12px;:after{display:block;}}"],S.breakpoints.medium,S.breakpoints.wide,c(33.33,3)),Se=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"xnsfmb-3"})(["@media (min-width:","px){width:",";margin-bottom:24px;padding-bottom:24px;&:first-of-type{padding-right:12px;:before{display:block;bottom:24px;}}&:last-of-type{padding-left:12px;}}@media (min-width:","px){width:100%;margin-bottom:12px;padding-bottom:12px;&:first-of-type{padding-right:0;:before{display:none;}}&:last-of-type{margin-bottom:0;padding:0;:after{display:none;}}}"],S.breakpoints.medium,c(50,2),S.breakpoints.wide);var ke=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(be,{styles:t},[...Array(2)].fill(null).map((a,o)=>n.a.createElement(we,{key:o,styles:t},n.a.createElement(V,{article:l()(e,`children[${o}].article`),displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:22},xlg:{headlineFontSize:24}}),clickHandler:i}))),n.a.createElement(_e,{styles:t},[...Array(2)].fill(null).map((a,o)=>{const r=l()(e,`children[${o+2}].article`);return n.a.createElement(Se,{key:o,styles:t},ae(r)?n.a.createElement(re,{article:r,displaySchema:d({sm:{isSideBySide:!0,sideBySideWidth:"35%",imageRatio:"1:1",headlineFontSize:18},md:{sideBySideWidth:"50%",headlineFontSize:16},xlg:{headlineFontSize:18}}),clickHandler:i}):n.a.createElement(V,{article:r,displaySchema:d({sm:{isSideBySide:!0,imageRatio:"3:2",headlineFontSize:18},md:{headlineFontSize:16},xlg:{headlineFontSize:18}}),clickHandler:i}))}))));const Ee=x()(G).withConfig({displayName:"styles__SliceContainer",componentId:"sc-7y5fg-0"})(["@media (min-width:","px){flex-wrap:nowrap;}"],S.breakpoints.wide),Ce=x()(J).withConfig({displayName:"styles__SlotContainerLead",componentId:"sc-7y5fg-1"})(["@media (min-width:","px){width:",";&:first-of-type{padding-right:12px;:before{display:block;bottom:12px;}}&:nth-of-type(2){padding-left:12px;}}@media (min-width:","px){margin-bottom:24px;padding-bottom:24px;:before{display:block;bottom:24px !important;}&:nth-of-type(2){padding-right:12px;}}"],S.breakpoints.medium,c(50,2),S.breakpoints.wide),ve=x()(J).withConfig({displayName:"styles__StackedColumn",componentId:"sc-7y5fg-2"})(["margin-bottom:0;padding-bottom:0;:after{display:none;}@media (min-width:","px){display:flex;justify-content:space-between;}@media (min-width:","px){display:block;flex-shrink:0;width:",";margin-bottom:24px;padding-bottom:24px;padding-left:12px;:after{display:block;}}"],S.breakpoints.medium,S.breakpoints.wide,c(33.33,3)),ze=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"sc-7y5fg-3"})(["@media (min-width:","px){width:",";margin-bottom:24px;padding:0 12px 24px 12px;:before{display:block;bottom:24px;}&:first-of-type{padding-left:0;}&:last-of-type{padding-right:0;:before{display:none;}}}@media (min-width:","px){width:100%;margin-bottom:12px;padding:0 0 12px 0;:before{display:none;}&:last-of-type{margin-bottom:0;padding-bottom:0;:after{display:none;}}}"],S.breakpoints.medium,c(50,2),S.breakpoints.wide);var Fe=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(Ee,{styles:t},[...Array(2)].fill(null).map((a,o)=>n.a.createElement(Ce,{key:o,styles:t},n.a.createElement(V,{article:l()(e,`children[${o}].article`),displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:22},xlg:{headlineFontSize:24}}),clickHandler:i}))),n.a.createElement(ve,{styles:t},[...Array(3)].fill(null).map((a,o)=>n.a.createElement(ze,{key:o,styles:t},n.a.createElement(V,{article:l()(e,`children[${o+2}].article`),displaySchema:d({sm:{isImageHidden:!0,imageRatio:"3:2",headlineFontSize:18},lg:{isSideBySide:!0,isImageHidden:!1,headlineFontSize:16},xlg:{headlineFontSize:18}}),clickHandler:i}))))));const Ie=x()(G).withConfig({displayName:"styles__SliceContainer",componentId:"sc-11upv3n-0"})(["@media (min-width:","px){flex-wrap:nowrap;}"],S.breakpoints.wide),Ne=x()(J).withConfig({displayName:"styles__SlotContainerLead",componentId:"sc-11upv3n-1"})(["@media (min-width:","px){width:",";&:first-of-type{padding-right:12px;:before{display:block;bottom:12px;}}&:nth-of-type(2){padding-left:12px;}}@media (min-width:","px){margin-bottom:24px;padding-bottom:24px;:before{display:block;bottom:24px !important;}&:nth-of-type(2){padding-right:12px;}}"],S.breakpoints.medium,c(50,2),S.breakpoints.wide),He=x()(J).withConfig({displayName:"styles__StackedColumn",componentId:"sc-11upv3n-2"})(["margin-bottom:0;padding-bottom:0;:after{display:none;}@media (min-width:","px){display:flex;justify-content:space-between;}@media (min-width:","px){display:block;flex-shrink:0;width:",";margin-bottom:24px;padding-bottom:24px;padding-left:12px;:after{display:block;}}"],S.breakpoints.medium,S.breakpoints.wide,c(33.33,3)),Re=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"sc-11upv3n-3"})(["@media (min-width:","px){width:",";margin-bottom:24px;padding:0 12px 24px 12px;:before{display:block;bottom:24px;}&:first-of-type{padding-left:0;}&:last-of-type{padding-right:0;:before{display:none;}}}@media (min-width:","px){width:100%;margin-bottom:12px;padding:0 0 12px 0;:before{display:none;}&:last-of-type{margin-bottom:0;padding-bottom:0;:after{display:none;}}}"],S.breakpoints.medium,c(50,2),S.breakpoints.wide);var Oe=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(Ie,{styles:t},[...Array(2)].fill(null).map((a,o)=>n.a.createElement(Ne,{key:o,styles:t},n.a.createElement(V,{article:l()(e,`children[${o}].article`),displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:22},xlg:{headlineFontSize:24}}),clickHandler:i}))),n.a.createElement(He,{styles:t},[...Array(3)].fill(null).map((a,o)=>n.a.createElement(Re,{key:o,styles:t},n.a.createElement(V,{article:l()(e,`children[${o+2}].article`),displaySchema:d({sm:{isImageHidden:!0,headlineFontSize:18},lg:{headlineFontSize:22},xlg:{headlineFontSize:24}}),clickHandler:i}))))));const je=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"bazswq-0"})(["@media (min-width:","px){width:",";margin-bottom:24px;padding:0 12px 24px 12px;:before{display:block;bottom:24px;}:after{display:block;}&:first-of-type{padding-left:0;}&:last-of-type{padding-right:0;&:before{display:none;}}}"],S.breakpoints.medium,c(33.33,3));var Ae=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(G,{styles:t},e.children.map((e,a)=>n.a.createElement(je,{key:a,styles:t,collapse:!e.article},n.a.createElement(V,{article:e.article,displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:22},md:{headlineFontSize:18},lg:{headlineFontSize:22},xlg:{headlineFontSize:24}}),clickHandler:i})))));const De=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"sc-1gqjewy-0"})(["width:",";&:nth-of-type(odd){padding-right:12px;:before{display:block;bottom:12px;}}&:nth-of-type(even){padding-left:12px;}@media (min-width:","px){width:",";margin-bottom:24px;padding:0 12px 24px 12px;:before{display:block;bottom:24px !important;}&:first-of-type{padding-left:0;}&:last-of-type{padding-right:0;&:before{display:none;}}}"],c(50,2),S.breakpoints.medium,c(25,4));var Be=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(G,{styles:t},e.children.map((e,a)=>n.a.createElement(De,{key:a,styles:t},n.a.createElement(V,{article:e.article,displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:18},lg:{headlineFontSize:22},xlg:{headlineFontSize:24}}),clickHandler:i})))));const Le=x()(G).withConfig({displayName:"styles__SliceContainer",componentId:"c5tu9p-0"})(["@media (min-width:","px){flex-wrap:nowrap;}"],S.breakpoints.wide),$e=x()(J).withConfig({displayName:"styles__SlotContainerLarge",componentId:"c5tu9p-1"})(["order:1;@media (min-width:","px){width:",";&:first-of-type{padding-right:12px;:before{display:block;bottom:12px;}}&:nth-of-type(3){padding-left:12px;}}@media (min-width:","px){flex-shrink:0;width:",";margin-bottom:24px;padding-bottom:24px;:before{display:block;bottom:24px !important;}&:nth-of-type(3){padding-right:12px;}}"],S.breakpoints.medium,c(50,2),S.breakpoints.wide,c(33.33,3)),Pe=x()(J).withConfig({displayName:"styles__SlotContainerSmall",componentId:"c5tu9p-2"})(["order:2;@media (min-width:","px){width:",";margin-bottom:24px;padding-bottom:24px;&:nth-of-type(2){padding-right:12px;:before{display:block;bottom:24px;}}&:last-of-type{padding-left:12px;}}@media (min-width:","px){order:1;&:nth-of-type(2){padding-left:12px;:before{bottom:24px;}}}"],S.breakpoints.medium,c(50,2),S.breakpoints.wide);var Te=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(Le,{styles:t},[...Array(2)].fill(null).map((a,o)=>{const r=l()(e,`children[${2*o}].article`),s=l()(e,`children[${2*o+1}].article`);return n.a.createElement(n.a.Fragment,{key:o},n.a.createElement($e,{styles:t},n.a.createElement(V,{article:r,displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:22},xlg:{headlineFontSize:24}}),clickHandler:i})),n.a.createElement(Pe,{styles:t},ae(s)?n.a.createElement(re,{article:s,displaySchema:d({sm:{isSideBySide:!0,sideBySideWidth:"35%",imageRatio:"1:1",headlineFontSize:18},md:{sideBySideWidth:"50%",headlineFontSize:16},lg:{isSideBySide:!1},xlg:{headlineFontSize:18}}),clickHandler:i}):n.a.createElement(V,{article:s,displaySchema:d({sm:{isImageHidden:!0,imageRatio:"3:2",headlineFontSize:18},md:{isImageHidden:!1,isSideBySide:!0,headlineFontSize:16},lg:{isSideBySide:!1},xlg:{headlineFontSize:18}}),clickHandler:i})))})));const qe=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"sc-189xcog-0"})(["width:",";&:nth-of-type(odd){padding-right:12px;:before{display:block;bottom:12px;}}&:nth-of-type(even){padding-left:12px;}@media (min-width:","px){width:",";margin-bottom:24px;padding:0 12px 24px 12px;:before{display:block;bottom:24px !important;}&:nth-of-type(5n + 1){padding-left:0;}&:nth-of-type(5n){padding-right:0;&:before{display:none;}}}"],c(50,2),S.breakpoints.medium,c(20,5));var Me=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(G,{styles:t},e.children.map((e,a)=>n.a.createElement(qe,{key:a,styles:t},n.a.createElement(V,{article:l()(e,"article"),displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:18,isCentered:!0},lg:{headlineFontSize:22},xlg:{headlineFontSize:24}}),clickHandler:i})))));const We=x()(G).withConfig({displayName:"styles__SliceContainer",componentId:"b33h2c-0"})(["@media (min-width:","px){flex-wrap:nowrap;}"],S.breakpoints.medium),Ye=x()(J).withConfig({displayName:"styles__SlotContainer",componentId:"b33h2c-1"})(["@media (min-width:","px){margin-bottom:24px;padding-right:0;padding-bottom:24px;}"],S.breakpoints.medium);var Ue=n.a.memo(({slice:e,styles:t,clickHandler:i})=>n.a.createElement(We,{styles:t},n.a.createElement(Ye,{styles:t},n.a.createElement(V,{article:l()(e,"children[0].article"),displaySchema:d({sm:{imageRatio:"3:2",headlineFontSize:28},md:{isSideBySide:!0},lg:{headlineFontSize:32},xlg:{headlineFontSize:36}}),clickHandler:i}))));const Ve=({slice:e,styles:t,clickHandler:i})=>{const a=(e=>{switch(e){case"LEAD_1":case"LEAD_1_COMPONENT":case"INTERACTIVE_FULL_WIDTH":return X;case"LEAD_1_AND_1":case"LEAD_1_AND_1_COMPONENT":return ie;case"LEAD_1_AND_2":case"LEAD_1_AND_2_COLUMNIST":return ce;case"LEAD_1_AND_3_REVERSED":return fe;case"LEAD_2":case"LEAD_2_COMPONENT":case"INTERACTIVE_HALF_WIDTH":return xe;case"SECONDARY_2_AND_2":return ke;case"SECONDARY_2_AND_3":return Fe;case"SECONDARY_2_AND_3_NO_PIC":return Oe;case"SECONDARY_3":return Ae;case"SECONDARY_4":return Be;case"SECONDARY_4_ODD":case"SECONDARY_4_ODD_COLUMNIST":return Te;case"SECONDARY_10":return Me;case"RELATED_ARTICLE_1":return Ue;default:return()=>null}})(e.name);return n.a.createElement(a,{slice:e,styles:t,clickHandler:i})};i.d(t,"Slice",(function(){return Ve}))}]);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import styled from 'styled-components';
|
|
2
|
-
import { breakpoints, colours, fonts } from '@times-components/styleguide';
|
|
2
|
+
import { breakpoints, colours, fonts } from '@times-components/ts-styleguide';
|
|
3
3
|
|
|
4
4
|
import { DisplaySchema } from '../../../types/styles';
|
|
5
5
|
import { isCentered } from '../../../utils/getArticleStyles';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import styled from 'styled-components';
|
|
2
|
-
import { breakpoints, colours, fonts } from '@times-components/styleguide';
|
|
2
|
+
import { breakpoints, colours, fonts } from '@times-components/ts-styleguide';
|
|
3
3
|
|
|
4
4
|
import { ArticleContainer as ArticleContainerBase } from '../shared-styles';
|
|
5
5
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import get from 'lodash.get';
|
|
2
2
|
|
|
3
3
|
import styled from 'styled-components';
|
|
4
|
-
import { breakpoints, colours, fonts } from '@times-components/styleguide';
|
|
4
|
+
import { breakpoints, colours, fonts } from '@times-components/ts-styleguide';
|
|
5
5
|
|
|
6
6
|
import { DisplaySchema } from '../../types/styles';
|
|
7
7
|
import { isSideBySide, isCentered } from '../../utils/getArticleStyles';
|
|
@@ -20,12 +20,18 @@ describe('<Headline />', () => {
|
|
|
20
20
|
jest.clearAllMocks();
|
|
21
21
|
});
|
|
22
22
|
|
|
23
|
+
it('should not render if the headline attribute is empty in the article object', () => {
|
|
24
|
+
const { asFragment } = render(
|
|
25
|
+
<Headline article={{ images: { crops: [] }, headline: '', url: '' }} />
|
|
26
|
+
);
|
|
27
|
+
|
|
28
|
+
expect(asFragment()).toMatchSnapshot();
|
|
29
|
+
});
|
|
30
|
+
|
|
23
31
|
it('should render headline component correctly', () => {
|
|
24
|
-
const {
|
|
32
|
+
const { getByText } = render(<Headline article={article} />);
|
|
25
33
|
|
|
26
34
|
getByText(article.headline);
|
|
27
|
-
|
|
28
|
-
expect(asFragment()).toMatchSnapshot();
|
|
29
35
|
});
|
|
30
36
|
|
|
31
37
|
it('should fire the correct event when the headline clicked', () => {
|
|
@@ -1,17 +1,3 @@
|
|
|
1
1
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
2
|
|
|
3
|
-
exports[`<Headline /> should render headline
|
|
4
|
-
<DocumentFragment>
|
|
5
|
-
<div
|
|
6
|
-
class="sc-bdVaJa elQUxc"
|
|
7
|
-
>
|
|
8
|
-
<a
|
|
9
|
-
href=""
|
|
10
|
-
>
|
|
11
|
-
<h3>
|
|
12
|
-
Some example headline
|
|
13
|
-
</h3>
|
|
14
|
-
</a>
|
|
15
|
-
</div>
|
|
16
|
-
</DocumentFragment>
|
|
17
|
-
`;
|
|
3
|
+
exports[`<Headline /> should not render if the headline attribute is empty in the article object 1`] = `<DocumentFragment />`;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import get from 'lodash.get';
|
|
2
2
|
|
|
3
3
|
import styled from 'styled-components';
|
|
4
|
-
import { breakpoints, colours, fonts } from '@times-components/styleguide';
|
|
4
|
+
import { breakpoints, colours, fonts } from '@times-components/ts-styleguide';
|
|
5
5
|
|
|
6
6
|
import { DisplaySchema } from '../../../types/styles';
|
|
7
7
|
import { isCentered } from '../../../utils/getArticleStyles';
|
|
@@ -1,21 +1,15 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { render, fireEvent } from '@testing-library/react';
|
|
3
|
-
|
|
3
|
+
import FakeIntersectionObserver from '../../../../utils/FakeIntersectionObserver';
|
|
4
4
|
import { Image } from '../Image';
|
|
5
5
|
|
|
6
6
|
const mockFireEvent = jest.fn();
|
|
7
7
|
|
|
8
|
-
jest.mock('../LazyImage/LazyImage', () => ({
|
|
9
|
-
LazyImage: (props: { url?: string }) => (
|
|
10
|
-
<div>
|
|
11
|
-
<div>LazyImage</div>
|
|
12
|
-
<div>{props.url}</div>
|
|
13
|
-
</div>
|
|
14
|
-
)
|
|
15
|
-
}));
|
|
16
|
-
|
|
17
8
|
const article = {
|
|
18
|
-
images: {
|
|
9
|
+
images: {
|
|
10
|
+
alt: 'image alt text',
|
|
11
|
+
crops: [{ ratio: '3:2', url: 'https://dummyimage.com/300' }]
|
|
12
|
+
},
|
|
19
13
|
headline: '',
|
|
20
14
|
url: ''
|
|
21
15
|
};
|
|
@@ -23,7 +17,17 @@ const article = {
|
|
|
23
17
|
const schema = { sm: { imageRatio: '3:2' } };
|
|
24
18
|
|
|
25
19
|
describe('<Image />', () => {
|
|
20
|
+
let oldIntersectionObserver: typeof IntersectionObserver;
|
|
21
|
+
|
|
22
|
+
beforeEach(() => {
|
|
23
|
+
oldIntersectionObserver = window.IntersectionObserver;
|
|
24
|
+
|
|
25
|
+
// @ts-ignore
|
|
26
|
+
window.IntersectionObserver = FakeIntersectionObserver;
|
|
27
|
+
});
|
|
28
|
+
|
|
26
29
|
afterEach(() => {
|
|
30
|
+
window.IntersectionObserver = oldIntersectionObserver;
|
|
27
31
|
jest.resetAllMocks();
|
|
28
32
|
});
|
|
29
33
|
|
|
@@ -32,26 +36,25 @@ describe('<Image />', () => {
|
|
|
32
36
|
});
|
|
33
37
|
|
|
34
38
|
it('should render image component correctly', () => {
|
|
35
|
-
const { asFragment,
|
|
39
|
+
const { asFragment, getByAltText } = render(
|
|
36
40
|
<Image article={article} displaySchema={schema} />
|
|
37
41
|
);
|
|
38
42
|
|
|
39
|
-
|
|
40
|
-
getByText(article.images.crops[0].url);
|
|
43
|
+
getByAltText('image alt text');
|
|
41
44
|
|
|
42
45
|
expect(asFragment().firstChild).toMatchSnapshot();
|
|
43
46
|
});
|
|
44
47
|
|
|
45
48
|
it('should fire the correct event when the image clicked', () => {
|
|
46
|
-
const {
|
|
49
|
+
const { getByAltText } = render(
|
|
47
50
|
<Image
|
|
48
51
|
article={article}
|
|
49
52
|
displaySchema={schema}
|
|
50
53
|
clickHandler={mockFireEvent}
|
|
51
54
|
/>
|
|
52
55
|
);
|
|
53
|
-
|
|
54
|
-
fireEvent.click(
|
|
56
|
+
FakeIntersectionObserver.intersect();
|
|
57
|
+
fireEvent.click(getByAltText('image alt text'));
|
|
55
58
|
|
|
56
59
|
expect(mockFireEvent).toHaveBeenCalled();
|
|
57
60
|
});
|
|
@@ -2,21 +2,20 @@
|
|
|
2
2
|
|
|
3
3
|
exports[`<Image /> should render image component correctly 1`] = `
|
|
4
4
|
<div
|
|
5
|
-
class="sc-
|
|
5
|
+
class="sc-htpNat hFCgGz"
|
|
6
6
|
>
|
|
7
7
|
<a
|
|
8
8
|
href=""
|
|
9
9
|
>
|
|
10
10
|
<div
|
|
11
|
-
class="sc-
|
|
11
|
+
class="sc-bxivhb gqElVf"
|
|
12
12
|
>
|
|
13
|
-
<div
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
</div>
|
|
13
|
+
<div
|
|
14
|
+
class="sc-bdVaJa gqNbEe"
|
|
15
|
+
>
|
|
16
|
+
<img
|
|
17
|
+
alt="image alt text"
|
|
18
|
+
/>
|
|
20
19
|
</div>
|
|
21
20
|
</div>
|
|
22
21
|
</a>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import styled from 'styled-components';
|
|
2
|
-
import { breakpoints } from '@times-components/styleguide';
|
|
2
|
+
import { breakpoints } from '@times-components/ts-styleguide';
|
|
3
3
|
|
|
4
4
|
import { DisplaySchema } from '../../../types/styles';
|
|
5
5
|
import { isSideBySide, isImageHidden } from '../../../utils/getArticleStyles';
|