@times-components/ts-components 1.25.0 → 1.26.1
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 +27 -0
- package/dist/__mocks__/isomorphic-unfetch.d.ts +3 -0
- package/dist/__mocks__/isomorphic-unfetch.js +4 -0
- package/dist/components/common-styles.d.ts +13 -0
- package/dist/components/common-styles.js +54 -10
- package/dist/components/in-article-big-numbers/BigNumbers.js +4 -4
- package/dist/components/in-article-big-numbers/styles.d.ts +1 -13
- package/dist/components/in-article-big-numbers/styles.js +3 -52
- package/dist/components/in-article-timelines/Timelines.d.ts +4 -0
- package/dist/components/in-article-timelines/Timelines.js +70 -0
- package/dist/components/in-article-timelines/Timelines.stories.d.ts +1 -0
- package/dist/components/in-article-timelines/Timelines.stories.js +21 -0
- package/dist/components/in-article-timelines/__tests__/Timelines.test.d.ts +2 -0
- package/dist/components/in-article-timelines/__tests__/Timelines.test.js +256 -0
- package/dist/components/in-article-timelines/styles.d.ts +15 -0
- package/dist/components/in-article-timelines/styles.js +115 -0
- package/dist/components/opta/football/fixtures/OptaFootballFixtures.js +5 -4
- package/dist/components/opta/football/fixtures/__tests__/OptaFootballFixtures.test.d.ts +2 -0
- package/dist/components/opta/football/fixtures/__tests__/OptaFootballFixtures.test.js +41 -0
- package/dist/components/opta/football/match-stats/OptaFootballMatchStats.js +4 -3
- package/dist/components/opta/football/match-stats/__tests__/OptaFootballMatchStats.test.d.ts +2 -0
- package/dist/components/opta/football/match-stats/__tests__/OptaFootballMatchStats.test.js +40 -0
- package/dist/components/opta/football/standings/OptaFootballStandings.js +4 -3
- package/dist/components/opta/football/standings/__tests__/OptaFootballStandings.test.d.ts +2 -0
- package/dist/components/opta/football/standings/__tests__/OptaFootballStandings.test.js +39 -0
- package/dist/components/opta/football/summary/OptaFootballSummary.js +4 -3
- package/dist/components/opta/football/summary/__tests__/OptaFootballSummary.test.d.ts +2 -0
- package/dist/components/opta/football/summary/__tests__/OptaFootballSummary.test.js +40 -0
- package/dist/components/opta/rugby/fixtures/OptaRugbyFixtures.d.ts +8 -0
- package/dist/components/opta/rugby/fixtures/OptaRugbyFixtures.js +54 -0
- package/dist/components/opta/rugby/fixtures/OptaRugbyFixtures.stories.d.ts +1 -0
- package/dist/components/opta/rugby/fixtures/OptaRugbyFixtures.stories.js +26 -0
- package/dist/components/opta/rugby/fixtures/__tests__/OptaRugbyFixtures.test.d.ts +2 -0
- package/dist/components/opta/rugby/fixtures/__tests__/OptaRugbyFixtures.test.js +41 -0
- package/dist/components/opta/rugby/fixtures/styles.d.ts +2 -0
- package/dist/components/opta/rugby/fixtures/styles.js +255 -0
- package/dist/components/opta/rugby/match-stats/OptaRugbyMatchStats.d.ts +7 -0
- package/dist/components/opta/rugby/match-stats/OptaRugbyMatchStats.js +43 -0
- package/dist/components/opta/rugby/match-stats/OptaRugbyMatchStats.stories.d.ts +1 -0
- package/dist/components/opta/rugby/match-stats/OptaRugbyMatchStats.stories.js +26 -0
- package/dist/components/opta/rugby/match-stats/__tests__/OptaRugbyMatchStats.test.d.ts +2 -0
- package/dist/components/opta/rugby/match-stats/__tests__/OptaRugbyMatchStats.test.js +40 -0
- package/dist/components/opta/rugby/match-stats/styles.d.ts +1 -0
- package/dist/components/opta/rugby/match-stats/styles.js +153 -0
- package/dist/components/opta/rugby/shared-styles.d.ts +6 -0
- package/dist/components/opta/rugby/shared-styles.js +72 -0
- package/dist/components/opta/rugby/standings/OptaRugbyStandings.d.ts +8 -0
- package/dist/components/opta/rugby/standings/OptaRugbyStandings.js +36 -0
- package/dist/components/opta/rugby/standings/OptaRugbyStandings.stories.d.ts +1 -0
- package/dist/components/opta/rugby/standings/OptaRugbyStandings.stories.js +36 -0
- package/dist/components/opta/rugby/standings/__tests__/OptaRugbyStandings.test.d.ts +2 -0
- package/dist/components/opta/rugby/standings/__tests__/OptaRugbyStandings.test.js +39 -0
- package/dist/components/opta/rugby/standings/styles.d.ts +1 -0
- package/dist/components/opta/rugby/standings/styles.js +247 -0
- package/dist/components/opta/rugby/summary/OptaRugbySummary.d.ts +7 -0
- package/dist/components/opta/rugby/summary/OptaRugbySummary.js +44 -0
- package/dist/components/opta/rugby/summary/OptaRugbySummary.stories.d.ts +1 -0
- package/dist/components/opta/rugby/summary/OptaRugbySummary.stories.js +26 -0
- package/dist/components/opta/rugby/summary/__tests__/OptaRugbySummary.test.d.ts +2 -0
- package/dist/components/opta/rugby/summary/__tests__/OptaRugbySummary.test.js +40 -0
- package/dist/components/opta/rugby/summary/styles.d.ts +1 -0
- package/dist/components/opta/rugby/summary/styles.js +152 -0
- package/dist/components/opta/utils/__tests__/config.test.d.ts +1 -0
- package/dist/components/opta/utils/__tests__/config.test.js +24 -0
- package/dist/components/opta/utils/config.d.ts +1 -1
- package/dist/components/opta/utils/config.js +12 -3
- package/dist/helpers/fetch/FetchProvider.js +3 -3
- package/dist/helpers/fetch/__tests__/FetchProvider.test.d.ts +0 -1
- package/dist/helpers/fetch/__tests__/FetchProvider.test.js +17 -23
- package/dist/index.d.ts +5 -0
- package/dist/index.js +6 -1
- package/jest.config.js +4 -4
- package/package.json +4 -3
- package/rnw.js +1 -1
- package/src/__mocks__/isomorphic-unfetch.ts +3 -0
- package/src/components/carousel/__tests__/__snapshots__/GalleryCarousel.test.tsx.snap +3 -3
- package/src/components/common-styles.ts +66 -7
- package/src/components/in-article-big-numbers/BigNumbers.tsx +11 -8
- package/src/components/in-article-big-numbers/__tests__/__snapshots__/BigNumbers.test.tsx.snap +67 -67
- package/src/components/in-article-big-numbers/styles.ts +2 -65
- package/src/components/in-article-info-card/__tests__/__snapshots__/InfoCard.test.tsx.snap +8 -8
- package/src/components/in-article-info-card-bulletpoints/__tests__/__snapshots__/InfoCardBulletPoints.test.tsx.snap +2 -2
- package/src/components/in-article-puff/__tests__/__snapshots__/InArticlePuff.test.tsx.snap +10 -10
- package/src/components/in-article-timelines/Timelines.stories.tsx +33 -0
- package/src/components/in-article-timelines/Timelines.tsx +160 -0
- package/src/components/in-article-timelines/__tests__/Timelines.test.tsx +309 -0
- package/src/components/in-article-timelines/__tests__/__snapshots__/Timelines.test.tsx.snap +727 -0
- package/src/components/in-article-timelines/styles.ts +127 -0
- package/src/components/opta/football/fixtures/OptaFootballFixtures.tsx +5 -3
- package/src/components/opta/football/fixtures/__tests__/OptaFootballFixtures.test.tsx +53 -0
- package/src/components/opta/football/fixtures/__tests__/__snapshots__/OptaFootballFixtures.test.tsx.snap +34 -0
- package/src/components/opta/football/match-stats/OptaFootballMatchStats.tsx +4 -2
- package/src/components/opta/football/match-stats/__tests__/OptaFootballMatchStats.test.tsx +52 -0
- package/src/components/opta/football/match-stats/__tests__/__snapshots__/OptaFootballMatchStats.test.tsx.snap +34 -0
- package/src/components/opta/football/standings/OptaFootballStandings.tsx +4 -2
- package/src/components/opta/football/standings/__tests__/OptaFootballStandings.test.tsx +51 -0
- package/src/components/opta/football/standings/__tests__/__snapshots__/OptaFootballStandings.test.tsx.snap +34 -0
- package/src/components/opta/football/summary/OptaFootballSummary.tsx +4 -2
- package/src/components/opta/football/summary/__tests__/OptaFootballSummary.test.tsx +52 -0
- package/src/components/opta/football/summary/__tests__/__snapshots__/OptaFootballSummary.test.tsx.snap +34 -0
- package/src/components/opta/rugby/fixtures/OptaRugbyFixtures.stories.tsx +44 -0
- package/src/components/opta/rugby/fixtures/OptaRugbyFixtures.tsx +86 -0
- package/src/components/opta/rugby/fixtures/__tests__/OptaRugbyFixtures.test.tsx +53 -0
- package/src/components/opta/rugby/fixtures/__tests__/__snapshots__/OptaRugbyFixtures.test.tsx.snap +34 -0
- package/src/components/opta/rugby/fixtures/styles.ts +257 -0
- package/src/components/opta/rugby/match-stats/OptaRugbyMatchStats.stories.tsx +34 -0
- package/src/components/opta/rugby/match-stats/OptaRugbyMatchStats.tsx +71 -0
- package/src/components/opta/rugby/match-stats/__tests__/OptaRugbyMatchStats.test.tsx +52 -0
- package/src/components/opta/rugby/match-stats/__tests__/__snapshots__/OptaRugbyMatchStats.test.tsx.snap +34 -0
- package/src/components/opta/rugby/match-stats/styles.ts +154 -0
- package/src/components/opta/rugby/shared-styles.ts +75 -0
- package/src/components/opta/rugby/standings/OptaRugbyStandings.stories.tsx +49 -0
- package/src/components/opta/rugby/standings/OptaRugbyStandings.tsx +66 -0
- package/src/components/opta/rugby/standings/__tests__/OptaRugbyStandings.test.tsx +51 -0
- package/src/components/opta/rugby/standings/__tests__/__snapshots__/OptaRugbyStandings.test.tsx.snap +34 -0
- package/src/components/opta/rugby/standings/styles.ts +248 -0
- package/src/components/opta/rugby/summary/OptaRugbySummary.stories.tsx +34 -0
- package/src/components/opta/rugby/summary/OptaRugbySummary.tsx +71 -0
- package/src/components/opta/rugby/summary/__tests__/OptaRugbySummary.test.tsx +52 -0
- package/src/components/opta/rugby/summary/__tests__/__snapshots__/OptaRugbySummary.test.tsx.snap +34 -0
- package/src/components/opta/rugby/summary/styles.ts +153 -0
- package/src/components/opta/utils/__tests__/config.test.tsx +38 -0
- package/src/components/opta/utils/config.ts +13 -3
- package/src/helpers/fetch/FetchProvider.tsx +2 -2
- package/src/helpers/fetch/__tests__/FetchProvider.test.tsx +21 -31
- package/src/helpers/fetch/__tests__/__snapshots__/FetchProvider.test.tsx.snap +10 -2
- package/src/index.ts +15 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,33 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.26.1](https://github.com/newsuk/times-components/compare/@times-components/ts-components@1.26.0...@times-components/ts-components@1.26.1) (2022-03-18)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @times-components/ts-components
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
# [1.26.0](https://github.com/newsuk/times-components/compare/@times-components/ts-components@1.25.1...@times-components/ts-components@1.26.0) (2022-03-17)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### Features
|
|
18
|
+
|
|
19
|
+
* add Opta rugby widget ([#2882](https://github.com/newsuk/times-components/issues/2882)) ([5b3b767](https://github.com/newsuk/times-components/commit/5b3b76702817a704b0418125bff6ca9737745528))
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
## [1.25.1](https://github.com/newsuk/times-components/compare/@times-components/ts-components@1.25.0...@times-components/ts-components@1.25.1) (2022-03-16)
|
|
26
|
+
|
|
27
|
+
**Note:** Version bump only for package @times-components/ts-components
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
6
33
|
# [1.25.0](https://github.com/newsuk/times-components/compare/@times-components/ts-components@1.24.0...@times-components/ts-components@1.25.0) (2022-03-16)
|
|
7
34
|
|
|
8
35
|
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import fetchMock from 'fetch-mock';
|
|
2
|
+
const fetch = fetchMock.sandbox();
|
|
3
|
+
export default fetch;
|
|
4
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaXNvbW9ycGhpYy11bmZldGNoLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL19fbW9ja3NfXy9pc29tb3JwaGljLXVuZmV0Y2gudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxTQUFTLE1BQU0sWUFBWSxDQUFDO0FBQ25DLE1BQU0sS0FBSyxHQUFHLFNBQVMsQ0FBQyxPQUFPLEVBQUUsQ0FBQztBQUNsQyxlQUFlLEtBQUssQ0FBQyJ9
|
|
@@ -3,3 +3,16 @@ export declare const Label: import("styled-components").StyledComponent<"div", a
|
|
|
3
3
|
sectionColour: string;
|
|
4
4
|
}, never>;
|
|
5
5
|
export declare const HiddenDiv: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
6
|
+
export declare const Copy: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
7
|
+
export declare const List: import("styled-components").StyledComponent<"ul", any, {}, never>;
|
|
8
|
+
export declare const ListContainer: import("styled-components").StyledComponent<"div", any, {
|
|
9
|
+
showAll: boolean;
|
|
10
|
+
maxHeight: number;
|
|
11
|
+
displayShowAll: boolean;
|
|
12
|
+
}, never>;
|
|
13
|
+
export declare const ShowAllContainer: import("styled-components").StyledComponent<"div", any, {
|
|
14
|
+
showAll: boolean;
|
|
15
|
+
displayShowAll: boolean;
|
|
16
|
+
}, never>;
|
|
17
|
+
export declare const Headline: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
18
|
+
export declare const ShowAllButton: import("styled-components").StyledComponent<"button", any, {}, never>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import styled from 'styled-components';
|
|
2
|
-
import { breakpoints, fonts } from '@times-components/styleguide';
|
|
2
|
+
import { breakpoints, fonts, colours } from '@times-components/styleguide';
|
|
3
3
|
export const PlaceholderContainer = styled.div `
|
|
4
4
|
position: relative;
|
|
5
5
|
height: 200px;
|
|
@@ -19,18 +19,62 @@ export const Label = styled.div `
|
|
|
19
19
|
line-height: 16px;
|
|
20
20
|
text-transform: uppercase;
|
|
21
21
|
color: ${({ sectionColour }) => `${sectionColour}`};
|
|
22
|
-
padding-bottom:
|
|
22
|
+
padding-bottom: 5px;
|
|
23
23
|
letter-spacing: 1px;
|
|
24
|
-
|
|
24
|
+
`;
|
|
25
|
+
export const HiddenDiv = styled.div `
|
|
26
|
+
display: none;
|
|
27
|
+
`;
|
|
28
|
+
export const Copy = styled.div `
|
|
29
|
+
color: ${colours.functional.secondary};
|
|
30
|
+
font-family: ${fonts.body};
|
|
31
|
+
font-size: 16px;
|
|
32
|
+
line-height: 24px;
|
|
33
|
+
`;
|
|
34
|
+
export const List = styled.ul `
|
|
35
|
+
display: flex;
|
|
36
|
+
flex-wrap: wrap;
|
|
37
|
+
margin: 0 -2px -1px -15px;
|
|
38
|
+
list-style: none;
|
|
39
|
+
padding: 0;
|
|
25
40
|
@media (min-width: ${breakpoints.medium}px) {
|
|
26
|
-
padding-bottom: 6px;
|
|
27
41
|
}
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
42
|
+
`;
|
|
43
|
+
export const ListContainer = styled.div `
|
|
44
|
+
display: flex;
|
|
45
|
+
flex-direction: column;
|
|
46
|
+
justify-content: space-between;
|
|
47
|
+
overflow: hidden;
|
|
48
|
+
max-height: ${({ showAll, maxHeight, displayShowAll }) => !showAll && displayShowAll ? maxHeight + 'px' : 'none'};
|
|
49
|
+
`;
|
|
50
|
+
export const ShowAllContainer = styled.div `
|
|
51
|
+
display: flex;
|
|
52
|
+
border-top: 1px solid ${colours.functional.keyline};
|
|
53
|
+
padding: 5px;
|
|
54
|
+
justify-content: center;
|
|
55
|
+
display: ${({ displayShowAll: displayShowAll }) => displayShowAll ? 'flex' : 'none'};
|
|
56
|
+
`;
|
|
57
|
+
export const Headline = styled.div `
|
|
58
|
+
font-family: ${fonts.headline};
|
|
59
|
+
font-size: 24px;
|
|
60
|
+
line-height: 24px;
|
|
61
|
+
color: ${colours.functional.brandColour};
|
|
62
|
+
margin: 0 0 6px;
|
|
63
|
+
@media (min-width: ${breakpoints.medium}px) {
|
|
64
|
+
font-size: 32px;
|
|
65
|
+
line-height: 32px;
|
|
31
66
|
}
|
|
32
67
|
`;
|
|
33
|
-
export const
|
|
34
|
-
|
|
68
|
+
export const ShowAllButton = styled.button `
|
|
69
|
+
font-family: ${fonts.supporting};
|
|
70
|
+
font-weight: 500;
|
|
71
|
+
line-height: 20px;
|
|
72
|
+
border: 1px solid ${colours.functional.primary};
|
|
73
|
+
background: transparent;
|
|
74
|
+
cursor: pointer;
|
|
75
|
+
&:active {
|
|
76
|
+
border: 1px solid ${colours.functional.action};
|
|
77
|
+
color: ${colours.functional.action};
|
|
78
|
+
}
|
|
35
79
|
`;
|
|
36
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
80
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tbW9uLXN0eWxlcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2NvbW1vbi1zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxNQUFNLE1BQU0sbUJBQW1CLENBQUM7QUFDdkMsT0FBTyxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQUUsT0FBTyxFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFFM0UsTUFBTSxDQUFDLE1BQU0sb0JBQW9CLEdBQUcsTUFBTSxDQUFDLEdBQUcsQ0FBQTs7Ozs7dUJBS3ZCLFdBQVcsQ0FBQyxNQUFNOzs7O3VCQUlsQixXQUFXLENBQUMsSUFBSTs7O0NBR3RDLENBQUM7QUFFRixNQUFNLENBQUMsTUFBTSxLQUFLLEdBQUcsTUFBTSxDQUFDLEdBQUcsQ0FBMkI7aUJBQ3pDLEtBQUssQ0FBQyxVQUFVOzs7O1dBSXRCLENBQUMsRUFBRSxhQUFhLEVBQUUsRUFBRSxFQUFFLENBQUMsR0FBRyxhQUFhLEVBQUU7OztDQUduRCxDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sU0FBUyxHQUFHLE1BQU0sQ0FBQyxHQUFHLENBQUE7O0NBRWxDLENBQUM7QUFFRixNQUFNLENBQUMsTUFBTSxJQUFJLEdBQUcsTUFBTSxDQUFDLEdBQUcsQ0FBQTtXQUNuQixPQUFPLENBQUMsVUFBVSxDQUFDLFNBQVM7aUJBQ3RCLEtBQUssQ0FBQyxJQUFJOzs7Q0FHMUIsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLElBQUksR0FBRyxNQUFNLENBQUMsRUFBRSxDQUFBOzs7Ozs7dUJBTU4sV0FBVyxDQUFDLE1BQU07O0NBRXhDLENBQUM7QUFFRixNQUFNLENBQUMsTUFBTSxhQUFhLEdBQUcsTUFBTSxDQUFDLEdBQUcsQ0FJckM7Ozs7O2dCQUtjLENBQUMsRUFBRSxPQUFPLEVBQUUsU0FBUyxFQUFFLGNBQWMsRUFBRSxFQUFFLEVBQUUsQ0FDdkQsQ0FBQyxPQUFPLElBQUksY0FBYyxDQUFDLENBQUMsQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDLENBQUMsQ0FBQyxNQUFNO0NBQ3pELENBQUM7QUFFRixNQUFNLENBQUMsTUFBTSxnQkFBZ0IsR0FBRyxNQUFNLENBQUMsR0FBRyxDQUd4Qzs7MEJBRXdCLE9BQU8sQ0FBQyxVQUFVLENBQUMsT0FBTzs7O2FBR3ZDLENBQUMsRUFBRSxjQUFjLEVBQUUsY0FBYyxFQUFFLEVBQUUsRUFBRSxDQUNoRCxjQUFjLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsTUFBTTtDQUNuQyxDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sUUFBUSxHQUFHLE1BQU0sQ0FBQyxHQUFHLENBQUE7aUJBQ2pCLEtBQUssQ0FBQyxRQUFROzs7V0FHcEIsT0FBTyxDQUFDLFVBQVUsQ0FBQyxXQUFXOzt1QkFFbEIsV0FBVyxDQUFDLE1BQU07Ozs7Q0FJeEMsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLGFBQWEsR0FBRyxNQUFNLENBQUMsTUFBTSxDQUFBO2lCQUN6QixLQUFLLENBQUMsVUFBVTs7O3NCQUdYLE9BQU8sQ0FBQyxVQUFVLENBQUMsT0FBTzs7Ozt3QkFJeEIsT0FBTyxDQUFDLFVBQVUsQ0FBQyxNQUFNO2FBQ3BDLE9BQU8sQ0FBQyxVQUFVLENBQUMsTUFBTTs7Q0FFckMsQ0FBQyJ9
|
|
@@ -3,8 +3,8 @@ import { Placeholder } from '@times-components/image';
|
|
|
3
3
|
import { useFetch } from '../../helpers/fetch/FetchProvider';
|
|
4
4
|
import { TrackingContextProvider } from '../../helpers/tracking/TrackingContextProvider';
|
|
5
5
|
import { sanitiseCopy } from '../../helpers/text-formatting/SanitiseCopy';
|
|
6
|
-
import { Container, ContentContainer,
|
|
7
|
-
import { PlaceholderContainer, Label } from '../common-styles';
|
|
6
|
+
import { Container, ContentContainer, ListItem, NumberContainer, StyledShowAllButton } from './styles';
|
|
7
|
+
import { PlaceholderContainer, Label, Headline, ListContainer, List, Copy, ShowAllContainer } from '../common-styles';
|
|
8
8
|
import { isStandard, isWide } from '../../helpers/layout-size/layoutSize';
|
|
9
9
|
const scrollEvent = {
|
|
10
10
|
attrs: {
|
|
@@ -67,6 +67,6 @@ export const BigNumbers = ({ sectionColour }) => {
|
|
|
67
67
|
})
|
|
68
68
|
} }))))))),
|
|
69
69
|
React.createElement(ShowAllContainer, { showAll: showAll, displayShowAll: displayShowAll },
|
|
70
|
-
React.createElement(
|
|
70
|
+
React.createElement(StyledShowAllButton, { onClick: () => handleShowAll(fireAnalyticsEvent, showAll ? 'Collapse' : 'Show all') }, showAll ? 'Collapse' : 'Show all'))))));
|
|
71
71
|
};
|
|
72
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
72
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQmlnTnVtYmVycy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2luLWFydGljbGUtYmlnLW51bWJlcnMvQmlnTnVtYmVycy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLEVBQUUsRUFBRSxNQUFNLEVBQUUsUUFBUSxFQUFFLFNBQVMsRUFBRSxNQUFNLE9BQU8sQ0FBQztBQUMzRCxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDdEQsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLG1DQUFtQyxDQUFDO0FBQzdELE9BQU8sRUFFTCx1QkFBdUIsRUFDeEIsTUFBTSxnREFBZ0QsQ0FBQztBQUN4RCxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sNENBQTRDLENBQUM7QUFDMUUsT0FBTyxFQUNMLFNBQVMsRUFDVCxnQkFBZ0IsRUFDaEIsUUFBUSxFQUNSLGVBQWUsRUFDZixtQkFBbUIsRUFDcEIsTUFBTSxVQUFVLENBQUM7QUFDbEIsT0FBTyxFQUNMLG9CQUFvQixFQUNwQixLQUFLLEVBQ0wsUUFBUSxFQUNSLGFBQWEsRUFDYixJQUFJLEVBQ0osSUFBSSxFQUNKLGdCQUFnQixFQUNqQixNQUFNLGtCQUFrQixDQUFDO0FBQzFCLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxFQUFFLE1BQU0sc0NBQXNDLENBQUM7QUFhMUUsTUFBTSxXQUFXLEdBQUc7SUFDbEIsS0FBSyxFQUFFO1FBQ0wscUJBQXFCLEVBQUUsOENBQThDO1FBQ3JFLGdDQUFnQyxFQUFFLFFBQVE7S0FDM0M7Q0FDRixDQUFDO0FBRUYsTUFBTSxVQUFVLEdBQUcsQ0FBQyxXQUFtQixFQUFFLEVBQUUsQ0FBQyxDQUFDO0lBQzNDLE1BQU0sRUFBRSxTQUFTO0lBQ2pCLEtBQUssRUFBRTtRQUNMLHFCQUFxQixFQUFFLFlBQVksV0FBVyxFQUFFO1FBQ2hELGdDQUFnQyxFQUFFLE9BQU87S0FDMUM7Q0FDRixD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
|
|
@@ -3,22 +3,10 @@ export declare const Container: import("styled-components").StyledComponent<"div
|
|
|
3
3
|
isWide?: boolean | undefined;
|
|
4
4
|
}, never>;
|
|
5
5
|
export declare const ContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
6
|
-
export declare const
|
|
7
|
-
export declare const ShowAllContainer: import("styled-components").StyledComponent<"div", any, {
|
|
8
|
-
showAll: boolean;
|
|
9
|
-
displayShowAll: boolean;
|
|
10
|
-
}, never>;
|
|
11
|
-
export declare const ShowAllButton: import("styled-components").StyledComponent<"button", any, {}, never>;
|
|
12
|
-
export declare const ListContainer: import("styled-components").StyledComponent<"div", any, {
|
|
13
|
-
showAll: boolean;
|
|
14
|
-
maxHeight: number;
|
|
15
|
-
displayShowAll: boolean;
|
|
16
|
-
}, never>;
|
|
17
|
-
export declare const List: import("styled-components").StyledComponent<"ul", any, {}, never>;
|
|
6
|
+
export declare const StyledShowAllButton: import("styled-components").StyledComponent<"button", any, {}, never>;
|
|
18
7
|
export declare const ListItem: import("styled-components").StyledComponent<"li", any, {
|
|
19
8
|
isStandard?: boolean | undefined;
|
|
20
9
|
}, never>;
|
|
21
10
|
export declare const NumberContainer: import("styled-components").StyledComponent<"div", any, {
|
|
22
11
|
sectionColour: string;
|
|
23
12
|
}, never>;
|
|
24
|
-
export declare const Copy: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import styled from 'styled-components';
|
|
2
2
|
import { breakpoints, colours, fonts } from '@times-components/styleguide';
|
|
3
|
+
import { ShowAllButton } from '../common-styles';
|
|
3
4
|
export const Container = styled.div `
|
|
4
5
|
margin: 0 auto 20px auto;
|
|
5
6
|
padding: 23px 0 0;
|
|
@@ -25,54 +26,10 @@ export const ContentContainer = styled.div `
|
|
|
25
26
|
justify-content: space-between;
|
|
26
27
|
padding: 0 16px;
|
|
27
28
|
`;
|
|
28
|
-
export const
|
|
29
|
-
font-family: ${fonts.headline};
|
|
30
|
-
font-size: 24px;
|
|
31
|
-
line-height: 24px;
|
|
32
|
-
color: ${colours.functional.brandColour};
|
|
33
|
-
margin: 0 0 6px;
|
|
34
|
-
@media (min-width: ${breakpoints.medium}px) {
|
|
35
|
-
font-size: 32px;
|
|
36
|
-
line-height: 32px;
|
|
37
|
-
}
|
|
38
|
-
`;
|
|
39
|
-
export const ShowAllContainer = styled.div `
|
|
40
|
-
display: flex;
|
|
41
|
-
border-top: 1px solid ${colours.functional.keyline};
|
|
42
|
-
padding: 5px;
|
|
43
|
-
justify-content: center;
|
|
44
|
-
display: ${({ displayShowAll: displayShowAll }) => displayShowAll ? 'flex' : 'none'};
|
|
45
|
-
`;
|
|
46
|
-
export const ShowAllButton = styled.button `
|
|
29
|
+
export const StyledShowAllButton = styled(ShowAllButton) `
|
|
47
30
|
font-size: 12px;
|
|
48
|
-
font-family: ${fonts.supporting};
|
|
49
|
-
font-weight: 500;
|
|
50
|
-
line-height: 20px;
|
|
51
|
-
border: 1px solid ${colours.functional.primary};
|
|
52
|
-
background: transparent;
|
|
53
31
|
margin: 15px 0;
|
|
54
32
|
padding: 10px 12px 5px;
|
|
55
|
-
cursor: pointer;
|
|
56
|
-
&:active {
|
|
57
|
-
border: 1px solid ${colours.functional.action};
|
|
58
|
-
color: ${colours.functional.action};
|
|
59
|
-
}
|
|
60
|
-
`;
|
|
61
|
-
export const ListContainer = styled.div `
|
|
62
|
-
display: flex;
|
|
63
|
-
flex-direction: column;
|
|
64
|
-
justify-content: space-between;
|
|
65
|
-
overflow: hidden;
|
|
66
|
-
max-height: ${({ showAll, maxHeight, displayShowAll }) => !showAll && displayShowAll ? maxHeight + 'px' : 'none'};
|
|
67
|
-
`;
|
|
68
|
-
export const List = styled.ul `
|
|
69
|
-
display: flex;
|
|
70
|
-
flex-wrap: wrap;
|
|
71
|
-
margin: 0 -2px -1px -15px;
|
|
72
|
-
list-style: none;
|
|
73
|
-
padding: 0;
|
|
74
|
-
@media (min-width: ${breakpoints.medium}px) {
|
|
75
|
-
}
|
|
76
33
|
`;
|
|
77
34
|
export const ListItem = styled.li `
|
|
78
35
|
flex: 1 0 50%;
|
|
@@ -106,10 +63,4 @@ export const NumberContainer = styled.div `
|
|
|
106
63
|
line-height: 40px;
|
|
107
64
|
}
|
|
108
65
|
`;
|
|
109
|
-
|
|
110
|
-
color: ${colours.functional.secondary};
|
|
111
|
-
font-family: ${fonts.body};
|
|
112
|
-
font-size: 16px;
|
|
113
|
-
line-height: 24px;
|
|
114
|
-
`;
|
|
115
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3R5bGVzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvaW4tYXJ0aWNsZS1iaWctbnVtYmVycy9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxNQUFNLE1BQU0sbUJBQW1CLENBQUM7QUFDdkMsT0FBTyxFQUFFLFdBQVcsRUFBRSxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFFM0UsTUFBTSxDQUFDLE1BQU0sU0FBUyxHQUFHLE1BQU0sQ0FBQyxHQUFHLENBR2pDOzs7c0JBR29CLE9BQU8sQ0FBQyxVQUFVLENBQUMsaUJBQWlCO2dCQUMxQyxDQUFDLEVBQUUsYUFBYSxFQUFFLEVBQUUsRUFBRSxDQUFDLGFBQWEsYUFBYSxFQUFFO1dBQ3hELENBQUMsRUFBRSxNQUFNLEVBQUUsRUFBRSxFQUFFLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDOzt1QkFFOUIsV0FBVyxDQUFDLE1BQU07YUFDNUIsQ0FBQyxFQUFFLE1BQU0sRUFBRSxFQUFFLEVBQUUsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUM7Ozt1QkFHakMsV0FBVyxDQUFDLElBQUk7YUFDMUIsQ0FBQyxFQUFFLE1BQU0sRUFBRSxFQUFFLEVBQUUsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUM7Ozs7OztDQU12RCxDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sZ0JBQWdCLEdBQUcsTUFBTSxDQUFDLEdBQUcsQ0FBQTs7Ozs7Q0FLekMsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLFFBQVEsR0FBRyxNQUFNLENBQUMsR0FBRyxDQUFBO2lCQUNqQixLQUFLLENBQUMsUUFBUTs7O1dBR3BCLE9BQU8sQ0FBQyxVQUFVLENBQUMsV0FBVzs7dUJBRWxCLFdBQVcsQ0FBQyxNQUFNOzs7O0NBSXhDLENBQUM7QUFFRixNQUFNLENBQUMsTUFBTSxnQkFBZ0IsR0FBRyxNQUFNLENBQUMsR0FBRyxDQUd4Qzs7MEJBRXdCLE9BQU8sQ0FBQyxVQUFVLENBQUMsT0FBTzs7O2FBR3ZDLENBQUMsRUFBRSxjQUFjLEVBQUUsY0FBYyxFQUFFLEVBQUUsRUFBRSxDQUNoRCxjQUFjLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsTUFBTTtDQUNuQyxDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sYUFBYSxHQUFHLE1BQU0sQ0FBQyxNQUFNLENBQUE7O2lCQUV6QixLQUFLLENBQUMsVUFBVTs7O3NCQUdYLE9BQU8sQ0FBQyxVQUFVLENBQUMsT0FBTzs7Ozs7O3dCQU14QixPQUFPLENBQUMsVUFBVSxDQUFDLE1BQU07YUFDcEMsT0FBTyxDQUFDLFVBQVUsQ0FBQyxNQUFNOztDQUVyQyxDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sYUFBYSxHQUFHLE1BQU0sQ0FBQyxHQUFHLENBSXJDOzs7OztnQkFLYyxDQUFDLEVBQUUsT0FBTyxFQUFFLFNBQVMsRUFBRSxjQUFjLEVBQUUsRUFBRSxFQUFFLENBQ3ZELENBQUMsT0FBTyxJQUFJLGNBQWMsQ0FBQyxDQUFDLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQyxDQUFDLENBQUMsTUFBTTtDQUN6RCxDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sSUFBSSxHQUFHLE1BQU0sQ0FBQyxFQUFFLENBQUE7Ozs7Ozt1QkFNTixXQUFXLENBQUMsTUFBTTs7Q0FFeEMsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLFFBQVEsR0FBRyxNQUFNLENBQUMsRUFBRSxDQUUvQjs7Ozs7a0JBS2dCLE9BQU8sQ0FBQyxVQUFVLENBQUMsT0FBTzs7Ozs7Ozs7Ozs7O3VCQVlyQixXQUFXLENBQUMsTUFBTTtnQkFDekIsQ0FBQyxFQUFFLFVBQVUsRUFBRSxFQUFFLEVBQUUsQ0FBQyxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUM7O0NBRS9ELENBQUM7QUFFRixNQUFNLENBQUMsTUFBTSxlQUFlLEdBQUcsTUFBTSxDQUFDLEdBQUcsQ0FBMkI7aUJBQ25ELEtBQUssQ0FBQyxRQUFROzs7O1dBSXBCLENBQUMsRUFBRSxhQUFhLEVBQUUsRUFBRSxFQUFFLENBQUMsR0FBRyxhQUFhLEVBQUU7dUJBQzdCLFdBQVcsQ0FBQyxNQUFNOzs7O0NBSXhDLENBQUM7QUFFRixNQUFNLENBQUMsTUFBTSxJQUFJLEdBQUcsTUFBTSxDQUFDLEdBQUcsQ0FBQTtXQUNuQixPQUFPLENBQUMsVUFBVSxDQUFDLFNBQVM7aUJBQ3RCLEtBQUssQ0FBQyxJQUFJOzs7Q0FHMUIsQ0FBQyJ9
|
|
66
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3R5bGVzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvaW4tYXJ0aWNsZS1iaWctbnVtYmVycy9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxNQUFNLE1BQU0sbUJBQW1CLENBQUM7QUFDdkMsT0FBTyxFQUFFLFdBQVcsRUFBRSxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDM0UsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBRWpELE1BQU0sQ0FBQyxNQUFNLFNBQVMsR0FBRyxNQUFNLENBQUMsR0FBRyxDQUdqQzs7O3NCQUdvQixPQUFPLENBQUMsVUFBVSxDQUFDLGlCQUFpQjtnQkFDMUMsQ0FBQyxFQUFFLGFBQWEsRUFBRSxFQUFFLEVBQUUsQ0FBQyxhQUFhLGFBQWEsRUFBRTtXQUN4RCxDQUFDLEVBQUUsTUFBTSxFQUFFLEVBQUUsRUFBRSxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQzs7dUJBRTlCLFdBQVcsQ0FBQyxNQUFNO2FBQzVCLENBQUMsRUFBRSxNQUFNLEVBQUUsRUFBRSxFQUFFLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDOzs7dUJBR2pDLFdBQVcsQ0FBQyxJQUFJO2FBQzFCLENBQUMsRUFBRSxNQUFNLEVBQUUsRUFBRSxFQUFFLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDOzs7Ozs7Q0FNdkQsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLGdCQUFnQixHQUFHLE1BQU0sQ0FBQyxHQUFHLENBQUE7Ozs7O0NBS3pDLENBQUM7QUFFRixNQUFNLENBQUMsTUFBTSxtQkFBbUIsR0FBRyxNQUFNLENBQUMsYUFBYSxDQUFDLENBQUE7Ozs7Q0FJdkQsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLFFBQVEsR0FBRyxNQUFNLENBQUMsRUFBRSxDQUUvQjs7Ozs7a0JBS2dCLE9BQU8sQ0FBQyxVQUFVLENBQUMsT0FBTzs7Ozs7Ozs7Ozs7O3VCQVlyQixXQUFXLENBQUMsTUFBTTtnQkFDekIsQ0FBQyxFQUFFLFVBQVUsRUFBRSxFQUFFLEVBQUUsQ0FBQyxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUM7O0NBRS9ELENBQUM7QUFFRixNQUFNLENBQUMsTUFBTSxlQUFlLEdBQUcsTUFBTSxDQUFDLEdBQUcsQ0FBMkI7aUJBQ25ELEtBQUssQ0FBQyxRQUFROzs7O1dBSXBCLENBQUMsRUFBRSxhQUFhLEVBQUUsRUFBRSxFQUFFLENBQUMsR0FBRyxhQUFhLEVBQUU7dUJBQzdCLFdBQVcsQ0FBQyxNQUFNOzs7O0NBSXhDLENBQUMifQ==
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import React, { useRef, useState, useEffect } from 'react';
|
|
2
|
+
import { Placeholder } from '@times-components/image';
|
|
3
|
+
import { useFetch } from '../../helpers/fetch/FetchProvider';
|
|
4
|
+
import { TrackingContextProvider } from '../../helpers/tracking/TrackingContextProvider';
|
|
5
|
+
import { sanitiseCopy } from '../../helpers/text-formatting/SanitiseCopy';
|
|
6
|
+
import { Container, ContentContainer, ListItem, LeftPanel, RightPanel, Date, SubHeading, StyledShowAllButton } from './styles';
|
|
7
|
+
import { PlaceholderContainer, Label, Headline, ListContainer, List, Copy, ShowAllContainer } from '../common-styles';
|
|
8
|
+
const scrollEvent = {
|
|
9
|
+
attrs: {
|
|
10
|
+
event_navigation_name: 'in-article component displayed : timelines',
|
|
11
|
+
event_navigation_browsing_method: 'scroll'
|
|
12
|
+
}
|
|
13
|
+
};
|
|
14
|
+
const clickEvent = (buttonLabel) => ({
|
|
15
|
+
action: 'Clicked',
|
|
16
|
+
attrs: {
|
|
17
|
+
event_navigation_name: `button : ${buttonLabel}`,
|
|
18
|
+
event_navigation_browsing_method: 'click'
|
|
19
|
+
}
|
|
20
|
+
});
|
|
21
|
+
export const Timelines = ({ sectionColour }) => {
|
|
22
|
+
const { loading, error, data } = useFetch();
|
|
23
|
+
if (loading) {
|
|
24
|
+
return (React.createElement(PlaceholderContainer, null,
|
|
25
|
+
React.createElement(Placeholder, null)));
|
|
26
|
+
}
|
|
27
|
+
if (error || data === undefined) {
|
|
28
|
+
return null;
|
|
29
|
+
}
|
|
30
|
+
const { headline, label } = data.fields;
|
|
31
|
+
const timelinesData = data.body.data;
|
|
32
|
+
const [showAll, setShowAll] = useState(false);
|
|
33
|
+
const handleShowAll = (fireAnalyticsEvent, buttonLabel) => {
|
|
34
|
+
fireAnalyticsEvent && fireAnalyticsEvent(clickEvent(buttonLabel));
|
|
35
|
+
setShowAll(!showAll);
|
|
36
|
+
};
|
|
37
|
+
const showAllRef = useRef(null);
|
|
38
|
+
const [displayShowAll, setShowShowAll] = useState(false);
|
|
39
|
+
const maxHeight = 375;
|
|
40
|
+
useEffect(() => {
|
|
41
|
+
const listContainer = showAllRef.current;
|
|
42
|
+
if (listContainer) {
|
|
43
|
+
setShowShowAll(listContainer.clientHeight > maxHeight);
|
|
44
|
+
}
|
|
45
|
+
}, []);
|
|
46
|
+
return (React.createElement(TrackingContextProvider, { context: {
|
|
47
|
+
object: 'InArticleTimelines',
|
|
48
|
+
attrs: {
|
|
49
|
+
component_type: 'in-article component : timelines: ' +
|
|
50
|
+
(displayShowAll ? 'interactive' : 'static'),
|
|
51
|
+
event_navigation_action: 'navigation',
|
|
52
|
+
component_name: `${headline}`
|
|
53
|
+
}
|
|
54
|
+
}, scrolledEvent: scrollEvent }, ({ fireAnalyticsEvent, intersectObserverRef }) => (React.createElement(Container, { ref: intersectObserverRef, sectionColour: sectionColour },
|
|
55
|
+
React.createElement(ContentContainer, null,
|
|
56
|
+
React.createElement(Label, { sectionColour: sectionColour }, label),
|
|
57
|
+
headline && React.createElement(Headline, null, headline),
|
|
58
|
+
React.createElement(ListContainer, { ref: showAllRef, showAll: showAll, maxHeight: maxHeight, displayShowAll: displayShowAll },
|
|
59
|
+
React.createElement(List, null, timelinesData.map((row, index) => (React.createElement(ListItem, { key: index },
|
|
60
|
+
React.createElement(LeftPanel, { sectionColour: sectionColour, circularImage: row.data.image }, row.data.image && React.createElement("img", { src: row.data.image })),
|
|
61
|
+
React.createElement(RightPanel, null,
|
|
62
|
+
React.createElement(Date, { sectionColour: sectionColour }, row.data.date),
|
|
63
|
+
React.createElement(SubHeading, null, row.data.eventHeading),
|
|
64
|
+
React.createElement(Copy, { dangerouslySetInnerHTML: {
|
|
65
|
+
__html: sanitiseCopy(row.data.copy, ['br', 'b', 'i'])
|
|
66
|
+
} })))))))),
|
|
67
|
+
React.createElement(ShowAllContainer, { showAll: showAll, displayShowAll: displayShowAll },
|
|
68
|
+
React.createElement(StyledShowAllButton, { onClick: () => handleShowAll(fireAnalyticsEvent, showAll ? 'Collapse' : 'Show all') }, showAll ? 'Collapse' : 'Show all'))))));
|
|
69
|
+
};
|
|
70
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGltZWxpbmVzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvaW4tYXJ0aWNsZS10aW1lbGluZXMvVGltZWxpbmVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLE1BQU0sRUFBRSxRQUFRLEVBQUUsU0FBUyxFQUFFLE1BQU0sT0FBTyxDQUFDO0FBQzNELE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUN0RCxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sbUNBQW1DLENBQUM7QUFDN0QsT0FBTyxFQUVMLHVCQUF1QixFQUN4QixNQUFNLGdEQUFnRCxDQUFDO0FBQ3hELE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSw0Q0FBNEMsQ0FBQztBQUMxRSxPQUFPLEVBQ0wsU0FBUyxFQUNULGdCQUFnQixFQUNoQixRQUFRLEVBQ1IsU0FBUyxFQUNULFVBQVUsRUFDVixJQUFJLEVBQ0osVUFBVSxFQUNWLG1CQUFtQixFQUNwQixNQUFNLFVBQVUsQ0FBQztBQUNsQixPQUFPLEVBQ0wsb0JBQW9CLEVBQ3BCLEtBQUssRUFDTCxRQUFRLEVBQ1IsYUFBYSxFQUNiLElBQUksRUFDSixJQUFJLEVBQ0osZ0JBQWdCLEVBQ2pCLE1BQU0sa0JBQWtCLENBQUM7QUFlMUIsTUFBTSxXQUFXLEdBQUc7SUFDbEIsS0FBSyxFQUFFO1FBQ0wscUJBQXFCLEVBQUUsNENBQTRDO1FBQ25FLGdDQUFnQyxFQUFFLFFBQVE7S0FDM0M7Q0FDRixDQUFDO0FBRUYsTUFBTSxVQUFVLEdBQUcsQ0FBQyxXQUFtQixFQUFFLEVBQUUsQ0FBQyxDQUFDO0lBQzNDLE1BQU0sRUFBRSxTQUFTO0lBQ2pCLEtBQUssRUFBRTtRQUNMLHFCQUFxQixFQUFFLFlBQVksV0FBVyxFQUFFO1FBQ2hELGdDQUFnQyxFQUFFLE9BQU87S0FDMUM7Q0FDRixDQUFDLENBQUM7QUFFSCxNQUFNLENBQUMsTUFB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
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { storiesOf } from '@storybook/react';
|
|
3
|
+
import { ArticleHarness } from '../../fixtures/article-harness/ArticleHarness';
|
|
4
|
+
import { FetchProvider } from '../../helpers/fetch/FetchProvider';
|
|
5
|
+
import { Timelines } from './Timelines';
|
|
6
|
+
import { TrackingContextProvider } from '../../helpers/tracking/TrackingContextProvider';
|
|
7
|
+
import analyticsStream from '../../fixtures/analytics-actions/analytics-actions';
|
|
8
|
+
storiesOf('Typescript Component/In Article/Timelines', module)
|
|
9
|
+
.addDecorator((storyFn) => (React.createElement(TrackingContextProvider, { context: {
|
|
10
|
+
component: 'ArticleSkeleton',
|
|
11
|
+
attrs: {
|
|
12
|
+
article_name: 'articleHeadline',
|
|
13
|
+
section_details: 'section'
|
|
14
|
+
}
|
|
15
|
+
}, analyticsStream: analyticsStream },
|
|
16
|
+
React.createElement(ArticleHarness, null, storyFn()))))
|
|
17
|
+
.add('Timelines with Bullet Point', () => (React.createElement(FetchProvider, { url: "https://gobble.timesdev.tools/deck/api/deck-post-action/45060" },
|
|
18
|
+
React.createElement(Timelines, { sectionColour: "#008347" }))))
|
|
19
|
+
.add('Timelines with Circular Image', () => (React.createElement(FetchProvider, { url: "https://gobble.timesdev.tools/deck/api/deck-post-action/45061" },
|
|
20
|
+
React.createElement(Timelines, { sectionColour: "#008347" }))));
|
|
21
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGltZWxpbmVzLnN0b3JpZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9pbi1hcnRpY2xlLXRpbWVsaW5lcy9UaW1lbGluZXMuc3Rvcmllcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQztBQUM3QyxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sK0NBQStDLENBQUM7QUFDL0UsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLG1DQUFtQyxDQUFDO0FBQ2xFLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxhQUFhLENBQUM7QUFDeEMsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0sZ0RBQWdELENBQUM7QUFDekYsT0FBTyxlQUFlLE1BQU0sb0RBQW9ELENBQUM7QUFFakYsU0FBUyxDQUFDLDJDQUEyQyxFQUFFLE1BQU0sQ0FBQztLQUMzRCxZQUFZLENBQUMsQ0FBQyxPQUE4QixFQUFFLEVBQUUsQ0FBQyxDQUNoRCxvQkFBQyx1QkFBdUIsSUFDdEIsT0FBTyxFQUFFO1FBQ1AsU0FBUyxFQUFFLGlCQUFpQjtRQUM1QixLQUFLLEVBQUU7WUFDTCxZQUFZLEVBQUUsaUJBQWlCO1lBQy9CLGVBQWUsRUFBRSxTQUFTO1NBQzNCO0tBQ0YsRUFDRCxlQUFlLEVBQUUsZUFBZTtJQUVoQyxvQkFBQyxjQUFjLFFBQUUsT0FBTyxFQUFFLENBQWtCLENBQ3BCLENBQzNCLENBQUM7S0FDRCxHQUFHLENBQUMsNkJBQTZCLEVBQUUsR0FBRyxFQUFFLENBQUMsQ0FDeEMsb0JBQUMsYUFBYSxJQUFDLEdBQUcsRUFBQywrREFBK0Q7SUFDaEYsb0JBQUMsU0FBUyxJQUFDLGFBQWEsRUFBQyxTQUFTLEdBQUcsQ0FDdkIsQ0FDakIsQ0FBQztLQUNELEdBQUcsQ0FBQywrQkFBK0IsRUFBRSxHQUFHLEVBQUUsQ0FBQyxDQUMxQyxvQkFBQyxhQUFhLElBQUMsR0FBRyxFQUFDLCtEQUErRDtJQUNoRixvQkFBQyxTQUFTLElBQUMsYUFBYSxFQUFDLFNBQVMsR0FBRyxDQUN2QixDQUNqQixDQUFDLENBQUMifQ==
|