@times-components/ts-components 1.53.0 → 1.54.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +21 -0
- package/dist/components/newsletter-puff/AutoNewsletterPuff.d.ts +2 -3
- package/dist/components/newsletter-puff/AutoNewsletterPuff.js +3 -3
- package/dist/components/newsletter-puff/InlineNewsletterPuff.d.ts +2 -3
- package/dist/components/newsletter-puff/InlineNewsletterPuff.js +7 -22
- package/dist/components/newsletter-puff/NewsletterPuff.stories.js +5 -5
- package/dist/components/newsletter-puff/__tests__/AutoNewsletterPuff.test.js +2 -4
- package/dist/components/newsletter-puff/__tests__/InlineNewsletterPuff.test.js +12 -94
- package/dist/components/newsletter-puff/loading-overlay/LoadingOverlay.d.ts +1 -0
- package/dist/components/newsletter-puff/loading-overlay/LoadingOverlay.js +10 -0
- package/dist/components/newsletter-puff/loading-overlay/styles.d.ts +3 -0
- package/dist/components/newsletter-puff/loading-overlay/styles.js +50 -0
- package/dist/components/newsletter-puff/newsletter/Newsletter.d.ts +12 -0
- package/dist/components/newsletter-puff/newsletter/Newsletter.js +34 -0
- package/dist/components/newsletter-puff/newsletter/styles.d.ts +8 -0
- package/dist/components/newsletter-puff/newsletter/styles.js +52 -0
- package/dist/components/newsletter-puff/{NewsletterPuffButton.d.ts → newsletter-puff-button/NewsletterPuffButton.d.ts} +2 -1
- package/dist/components/newsletter-puff/newsletter-puff-button/NewsletterPuffButton.js +24 -0
- package/dist/components/newsletter-puff/{__tests__ → newsletter-puff-button/__tests__}/NewsletterPuffButton.test.d.ts +0 -0
- package/dist/components/newsletter-puff/newsletter-puff-button/__tests__/NewsletterPuffButton.test.js +41 -0
- package/dist/components/newsletter-puff/newsletter-puff-button/styles.d.ts +15 -0
- package/dist/components/newsletter-puff/newsletter-puff-button/styles.js +26 -0
- package/dist/components/newsletter-puff/{NewsletterPuffLink.d.ts → newsletter-puff-link/NewsletterPuffLink.d.ts} +0 -0
- package/dist/components/newsletter-puff/newsletter-puff-link/NewsletterPuffLink.js +29 -0
- package/dist/components/newsletter-puff/{__tests__ → newsletter-puff-link/__tests__}/NewsletterPuffLink.test.d.ts +0 -0
- package/dist/components/newsletter-puff/newsletter-puff-link/__tests__/NewsletterPuffLink.test.js +58 -0
- package/dist/components/newsletter-puff/preview-newsletter-puff/PreviewNewsletterPuff.d.ts +7 -0
- package/dist/components/newsletter-puff/preview-newsletter-puff/PreviewNewsletterPuff.js +11 -0
- package/dist/components/newsletter-puff/{__tests__ → preview-newsletter-puff/__tests__}/PreviewNewsletterPuff.test.d.ts +0 -0
- package/dist/components/newsletter-puff/preview-newsletter-puff/__tests__/PreviewNewsletterPuff.test.js +17 -0
- package/dist/components/newsletter-puff/styles.d.ts +6 -29
- package/dist/components/newsletter-puff/styles.js +11 -88
- package/dist/helpers/text-formatting/CapitaliseFirstCharacter.d.ts +1 -0
- package/dist/helpers/text-formatting/CapitaliseFirstCharacter.js +9 -0
- package/dist/helpers/text-formatting/__tests__/CapitaliseFirstCharacter.test.d.ts +1 -0
- package/dist/helpers/text-formatting/__tests__/CapitaliseFirstCharacter.test.js +12 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.js +2 -2
- package/package.json +3 -3
- package/rnw.js +1 -1
- package/src/components/newsletter-puff/AutoNewsletterPuff.tsx +3 -6
- package/src/components/newsletter-puff/InlineNewsletterPuff.tsx +16 -53
- package/src/components/newsletter-puff/NewsletterPuff.stories.tsx +4 -13
- package/src/components/newsletter-puff/__tests__/AutoNewsletterPuff.test.tsx +1 -3
- package/src/components/newsletter-puff/__tests__/InlineNewsletterPuff.test.tsx +13 -119
- package/src/components/newsletter-puff/__tests__/__snapshots__/AutoNewsletterPuff.test.tsx.snap +4 -4
- package/src/components/newsletter-puff/__tests__/__snapshots__/InlineNewsletterPuff.test.tsx.snap +68 -260
- package/src/components/newsletter-puff/loading-overlay/LoadingOverlay.tsx +15 -0
- package/src/components/newsletter-puff/loading-overlay/styles.ts +54 -0
- package/src/components/newsletter-puff/newsletter/Newsletter.tsx +79 -0
- package/src/components/newsletter-puff/newsletter/styles.ts +65 -0
- package/src/components/newsletter-puff/{NewsletterPuffButton.tsx → newsletter-puff-button/NewsletterPuffButton.tsx} +10 -8
- package/src/components/newsletter-puff/{__tests__ → newsletter-puff-button/__tests__}/NewsletterPuffButton.test.tsx +12 -20
- package/src/components/newsletter-puff/newsletter-puff-button/styles.ts +28 -0
- package/src/components/newsletter-puff/{NewsletterPuffLink.tsx → newsletter-puff-link/NewsletterPuffLink.tsx} +5 -14
- package/src/components/newsletter-puff/{__tests__ → newsletter-puff-link/__tests__}/NewsletterPuffLink.test.tsx +5 -19
- package/src/components/newsletter-puff/preview-newsletter-puff/PreviewNewsletterPuff.tsx +32 -0
- package/src/components/newsletter-puff/{__tests__ → preview-newsletter-puff/__tests__}/PreviewNewsletterPuff.test.tsx +2 -5
- package/src/components/newsletter-puff/preview-newsletter-puff/__tests__/__snapshots__/PreviewNewsletterPuff.test.tsx.snap +36 -0
- package/src/components/newsletter-puff/styles.ts +10 -100
- package/src/helpers/text-formatting/CapitaliseFirstCharacter.ts +9 -0
- package/src/helpers/text-formatting/__tests__/CapitaliseFirstCharacter.test.tsx +13 -0
- package/src/index.ts +1 -1
- package/dist/components/newsletter-puff/NewsletterPuffButton.js +0 -24
- package/dist/components/newsletter-puff/NewsletterPuffLink.js +0 -34
- package/dist/components/newsletter-puff/PreviewNewsletterPuff.d.ts +0 -8
- package/dist/components/newsletter-puff/PreviewNewsletterPuff.js +0 -14
- package/dist/components/newsletter-puff/__tests__/NewsletterPuffButton.test.js +0 -47
- package/dist/components/newsletter-puff/__tests__/NewsletterPuffLink.test.js +0 -64
- package/dist/components/newsletter-puff/__tests__/PreviewNewsletterPuff.test.js +0 -18
- package/src/components/newsletter-puff/PreviewNewsletterPuff.tsx +0 -40
- package/src/components/newsletter-puff/__tests__/__snapshots__/NewsletterPuffButton.test.tsx.snap +0 -27
- package/src/components/newsletter-puff/__tests__/__snapshots__/NewsletterPuffLink.test.tsx.snap +0 -40
- package/src/components/newsletter-puff/__tests__/__snapshots__/PreviewNewsletterPuff.test.tsx.snap +0 -83
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
|
|
3
2
|
import { render, cleanup, fireEvent } from '@testing-library/react';
|
|
4
3
|
import mockDate from 'mockdate';
|
|
5
4
|
import { NewsletterPuffButton } from '../NewsletterPuffButton';
|
|
6
|
-
import { TrackingContextProvider } from '
|
|
5
|
+
import { TrackingContextProvider } from '../../../../helpers/tracking/TrackingContextProvider';
|
|
7
6
|
|
|
8
7
|
describe('NewsletterPuffButton', () => {
|
|
9
8
|
beforeEach(() => {
|
|
@@ -21,26 +20,13 @@ describe('NewsletterPuffButton', () => {
|
|
|
21
20
|
|
|
22
21
|
const component = render(
|
|
23
22
|
<NewsletterPuffButton
|
|
23
|
+
style="button"
|
|
24
24
|
updatingSubscription={false}
|
|
25
25
|
onPress={mockedOnPress}
|
|
26
26
|
/>
|
|
27
27
|
);
|
|
28
28
|
|
|
29
|
-
expect(component.
|
|
30
|
-
|
|
31
|
-
fireEvent.click(component.getByText('Sign up now'));
|
|
32
|
-
|
|
33
|
-
expect(mockedOnPress).toHaveBeenCalledTimes(1);
|
|
34
|
-
});
|
|
35
|
-
|
|
36
|
-
it('renders the button with the text `Saving...`', () => {
|
|
37
|
-
const mockedOnPress = jest.fn();
|
|
38
|
-
|
|
39
|
-
const component = render(
|
|
40
|
-
<NewsletterPuffButton updatingSubscription onPress={mockedOnPress} />
|
|
41
|
-
);
|
|
42
|
-
|
|
43
|
-
expect(component.baseElement).toMatchSnapshot();
|
|
29
|
+
expect(component.getByText('One click sign up'));
|
|
44
30
|
});
|
|
45
31
|
|
|
46
32
|
it('should track button viewed and clicked in analytics', () => {
|
|
@@ -52,13 +38,19 @@ describe('NewsletterPuffButton', () => {
|
|
|
52
38
|
analyticsStream={mockedAnalyticsStream}
|
|
53
39
|
context={{ component: 'ArticleSkeleton' }}
|
|
54
40
|
>
|
|
55
|
-
<NewsletterPuffButton
|
|
41
|
+
<NewsletterPuffButton
|
|
42
|
+
updatingSubscription={false}
|
|
43
|
+
onPress={onPress}
|
|
44
|
+
style="button"
|
|
45
|
+
/>
|
|
56
46
|
</TrackingContextProvider>
|
|
57
47
|
);
|
|
58
48
|
|
|
59
|
-
|
|
49
|
+
const oneClickSignUp = component.getByText('One click sign up');
|
|
50
|
+
|
|
51
|
+
fireEvent.click(oneClickSignUp);
|
|
60
52
|
|
|
61
|
-
expect(onPress).
|
|
53
|
+
expect(onPress).toHaveBeenCalledTimes(1);
|
|
62
54
|
|
|
63
55
|
expect(mockedAnalyticsStream).toHaveBeenCalledWith({
|
|
64
56
|
action: 'Clicked',
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import styled from 'styled-components';
|
|
2
|
+
|
|
3
|
+
import { colours, fonts } from '@times-components/ts-styleguide';
|
|
4
|
+
|
|
5
|
+
export const buttonStyles = {
|
|
6
|
+
alignItems: 'center',
|
|
7
|
+
backgroundColor: 'transparent',
|
|
8
|
+
borderColor: colours.functional.brandColour,
|
|
9
|
+
borderStyle: 'thin',
|
|
10
|
+
borderWidth: 1,
|
|
11
|
+
color: colours.functional.brandColour,
|
|
12
|
+
elevation: 0,
|
|
13
|
+
fontFamily: fonts.supporting,
|
|
14
|
+
height: 48,
|
|
15
|
+
justifyContent: 'center',
|
|
16
|
+
letterSpacing: 0.2,
|
|
17
|
+
width: '100%'
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
export const LinkButton = styled.button`
|
|
21
|
+
color: ${colours.functional.action};
|
|
22
|
+
font-family: ${fonts.body};
|
|
23
|
+
font-size: 18px;
|
|
24
|
+
text-align: left;
|
|
25
|
+
letter-spacing: -0.4px;
|
|
26
|
+
border: none;
|
|
27
|
+
background-color: white;
|
|
28
|
+
`;
|
|
@@ -1,15 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import Link from '@times-components/link';
|
|
3
|
-
import { IconForwardArrow } from '@times-components/icons';
|
|
4
|
-
import { colours } from '@times-components/ts-styleguide';
|
|
5
3
|
|
|
6
|
-
import { TrackingContextProvider } from '
|
|
4
|
+
import { TrackingContextProvider } from '../../../helpers/tracking/TrackingContextProvider';
|
|
7
5
|
|
|
8
|
-
import {
|
|
9
|
-
InpPreferencesView,
|
|
10
|
-
InpPreferencesText,
|
|
11
|
-
InpIconContainer
|
|
12
|
-
} from './styles';
|
|
6
|
+
import { InpPreferencesText } from '../styles';
|
|
13
7
|
|
|
14
8
|
export const NewsletterPuffLink = ({ onPress }: any) => {
|
|
15
9
|
return (
|
|
@@ -42,12 +36,9 @@ export const NewsletterPuffLink = ({ onPress }: any) => {
|
|
|
42
36
|
url="https://home.thetimes.co.uk/myNews"
|
|
43
37
|
onPress={() => handlePress()}
|
|
44
38
|
>
|
|
45
|
-
<
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
<IconForwardArrow fillColour={colours.functional.action} />
|
|
49
|
-
</InpIconContainer>
|
|
50
|
-
</InpPreferencesView>
|
|
39
|
+
<InpPreferencesText ref={intersectObserverRef}>
|
|
40
|
+
Manage preferences here
|
|
41
|
+
</InpPreferencesText>
|
|
51
42
|
</Link>
|
|
52
43
|
);
|
|
53
44
|
}}
|
|
@@ -2,8 +2,8 @@ import React from 'react';
|
|
|
2
2
|
import { render, cleanup, fireEvent } from '@testing-library/react';
|
|
3
3
|
import mockDate from 'mockdate';
|
|
4
4
|
import { NewsletterPuffLink } from '../NewsletterPuffLink';
|
|
5
|
-
import { TrackingContextProvider } from '
|
|
6
|
-
import FakeIntersectionObserver from '
|
|
5
|
+
import { TrackingContextProvider } from '../../../../helpers/tracking/TrackingContextProvider';
|
|
6
|
+
import FakeIntersectionObserver from '../../../../test-utils/FakeIntersectionObserver';
|
|
7
7
|
|
|
8
8
|
describe('NewsletterPuffLink', () => {
|
|
9
9
|
let oldIntersectionObserver: typeof IntersectionObserver;
|
|
@@ -22,27 +22,11 @@ describe('NewsletterPuffLink', () => {
|
|
|
22
22
|
cleanup();
|
|
23
23
|
});
|
|
24
24
|
|
|
25
|
-
it('renders the link with the text `Manage preferences here`', () => {
|
|
26
|
-
const mockedOnPress = jest.fn();
|
|
27
|
-
const mockedAnalyticsStream = jest.fn();
|
|
28
|
-
|
|
29
|
-
const component = render(
|
|
30
|
-
<TrackingContextProvider
|
|
31
|
-
context={{ attrs: { context: 'value' } }}
|
|
32
|
-
analyticsStream={mockedAnalyticsStream}
|
|
33
|
-
>
|
|
34
|
-
<NewsletterPuffLink onPress={mockedOnPress} />
|
|
35
|
-
</TrackingContextProvider>
|
|
36
|
-
);
|
|
37
|
-
|
|
38
|
-
expect(component.baseElement).toMatchSnapshot();
|
|
39
|
-
});
|
|
40
|
-
|
|
41
25
|
it('should track link viewed in analytics', () => {
|
|
42
26
|
const mockedAnalyticsStream = jest.fn();
|
|
43
27
|
const mockedOnPress = jest.fn();
|
|
44
28
|
|
|
45
|
-
render(
|
|
29
|
+
const component = render(
|
|
46
30
|
<TrackingContextProvider
|
|
47
31
|
context={{ attrs: { context: 'value' } }}
|
|
48
32
|
analyticsStream={mockedAnalyticsStream}
|
|
@@ -52,6 +36,8 @@ describe('NewsletterPuffLink', () => {
|
|
|
52
36
|
);
|
|
53
37
|
FakeIntersectionObserver.intersect();
|
|
54
38
|
|
|
39
|
+
expect(component.getByText('Manage preferences here')!);
|
|
40
|
+
|
|
55
41
|
expect(mockedAnalyticsStream).toHaveBeenCalledWith({
|
|
56
42
|
object: 'NewsletterPuffLink',
|
|
57
43
|
action: 'Scrolled',
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { InpSignupCTAContainer, InpContainer } from '../styles';
|
|
2
|
+
|
|
3
|
+
import {
|
|
4
|
+
InpCopy,
|
|
5
|
+
InpSignupContainer,
|
|
6
|
+
InpSignupHeadline
|
|
7
|
+
} from '../newsletter/styles';
|
|
8
|
+
|
|
9
|
+
import { NewsletterPuffButton } from '../newsletter-puff-button/NewsletterPuffButton';
|
|
10
|
+
import React from 'react';
|
|
11
|
+
|
|
12
|
+
type PreviewNewsletterPuffProps = {
|
|
13
|
+
copy: string;
|
|
14
|
+
headline: string;
|
|
15
|
+
section: string;
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
export const PreviewNewsletterPuff = ({
|
|
19
|
+
copy,
|
|
20
|
+
headline,
|
|
21
|
+
section
|
|
22
|
+
}: PreviewNewsletterPuffProps) => (
|
|
23
|
+
<InpContainer section={section}>
|
|
24
|
+
<InpSignupContainer>
|
|
25
|
+
<InpSignupHeadline>{headline}</InpSignupHeadline>
|
|
26
|
+
<InpCopy>{copy}</InpCopy>
|
|
27
|
+
<InpSignupCTAContainer>
|
|
28
|
+
<NewsletterPuffButton style="button" />
|
|
29
|
+
</InpSignupCTAContainer>
|
|
30
|
+
</InpSignupContainer>
|
|
31
|
+
</InpContainer>
|
|
32
|
+
);
|
|
@@ -10,13 +10,10 @@ const renderComponent = () =>
|
|
|
10
10
|
<PreviewNewsletterPuff
|
|
11
11
|
{...{
|
|
12
12
|
code: 'TNL-119',
|
|
13
|
-
|
|
14
|
-
label: 'STRAIGHT IN YOUR INBOX',
|
|
13
|
+
section: 'news',
|
|
15
14
|
headline: 'Politics. Explained.',
|
|
16
15
|
copy:
|
|
17
|
-
'Sign up to receive our brilliant Red Box newsletter, Matt Chorley`s poke at politics delivered every weekday morning at 8am.'
|
|
18
|
-
imageUri:
|
|
19
|
-
'https://nuk-tnl-deck-prod-static.s3-eu-west-1.amazonaws.com/uploads/2aa9050e6c3d4de682f11a4802ebba96.jpg'
|
|
16
|
+
'Sign up to receive our brilliant Red Box newsletter, Matt Chorley`s poke at politics delivered every weekday morning at 8am.'
|
|
20
17
|
}}
|
|
21
18
|
/>
|
|
22
19
|
);
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
+
|
|
3
|
+
exports[`Preview Newsletter Puff renders 1`] = `
|
|
4
|
+
<body>
|
|
5
|
+
<div>
|
|
6
|
+
<div
|
|
7
|
+
class="sc-bdVaJa sc-htpNat iikmtA"
|
|
8
|
+
>
|
|
9
|
+
<div
|
|
10
|
+
class="sc-bdVaJa sc-bZQynM dePmGy"
|
|
11
|
+
>
|
|
12
|
+
<div
|
|
13
|
+
class="sc-bwzfXH sc-gzVnrw guVfgd"
|
|
14
|
+
>
|
|
15
|
+
Politics. Explained.
|
|
16
|
+
</div>
|
|
17
|
+
<div
|
|
18
|
+
class="sc-bwzfXH sc-htoDjs dLSNbg"
|
|
19
|
+
>
|
|
20
|
+
Sign up to receive our brilliant Red Box newsletter, Matt Chorley\`s poke at politics delivered every weekday morning at 8am.
|
|
21
|
+
</div>
|
|
22
|
+
<div
|
|
23
|
+
class="sc-bdVaJa sc-ifAKCX jaUowH"
|
|
24
|
+
>
|
|
25
|
+
<button
|
|
26
|
+
style="font-family: GillSansMTStd-Medium; font-size: 16px; line-height: 0; align-items: center; background-color: transparent; border-radius: 2px; color: rgb(29, 29, 27); cursor: pointer; height: 48px; justify-content: center; min-width: 100px; padding-top: 4px; width: 100%; border-color: #1d1d1b; border-width: 1px; elevation: 0; letter-spacing: 0.2px;"
|
|
27
|
+
type="button"
|
|
28
|
+
>
|
|
29
|
+
One click sign up
|
|
30
|
+
</button>
|
|
31
|
+
</div>
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
35
|
+
</body>
|
|
36
|
+
`;
|
|
@@ -4,13 +4,11 @@ import {
|
|
|
4
4
|
breakpoints,
|
|
5
5
|
colours,
|
|
6
6
|
fonts,
|
|
7
|
-
fontSizes,
|
|
8
7
|
spacing
|
|
9
8
|
} from '@times-components/ts-styleguide';
|
|
10
9
|
|
|
11
|
-
const View = styled.div`
|
|
10
|
+
export const View = styled.div`
|
|
12
11
|
align-items: stretch;
|
|
13
|
-
border: 0 solid black;
|
|
14
12
|
box-sizing: border-box;
|
|
15
13
|
display: flex;
|
|
16
14
|
flex-basis: auto;
|
|
@@ -24,7 +22,7 @@ const View = styled.div`
|
|
|
24
22
|
z-index: 0;
|
|
25
23
|
`;
|
|
26
24
|
|
|
27
|
-
const Text = styled.div`
|
|
25
|
+
export const Text = styled.div`
|
|
28
26
|
border: 0 solid black;
|
|
29
27
|
box-sizing: border-box;
|
|
30
28
|
color: rgba(0, 0, 0, 1);
|
|
@@ -37,8 +35,9 @@ const Text = styled.div`
|
|
|
37
35
|
word-wrap: break-word;
|
|
38
36
|
`;
|
|
39
37
|
|
|
40
|
-
export const InpContainer = styled(View)
|
|
41
|
-
|
|
38
|
+
export const InpContainer = styled(View)<{ section?: string }>`
|
|
39
|
+
border-top: 2px solid
|
|
40
|
+
${({ section }) => (section ? colours.section[section] : 'black')};
|
|
42
41
|
display: flex;
|
|
43
42
|
flex-direction: column;
|
|
44
43
|
margin-right: ${spacing(2)};
|
|
@@ -55,63 +54,12 @@ export const InpContainer = styled(View)`
|
|
|
55
54
|
}
|
|
56
55
|
`;
|
|
57
56
|
|
|
58
|
-
export const
|
|
59
|
-
|
|
60
|
-
width: 45%;
|
|
61
|
-
}
|
|
62
|
-
`;
|
|
63
|
-
|
|
64
|
-
export const InpSubscribedContainer = styled(View)`
|
|
65
|
-
justify-content: center;
|
|
66
|
-
padding: ${spacing(9)}px ${spacing(8)}px;
|
|
67
|
-
@media (min-width: ${breakpoints.small}px) {
|
|
68
|
-
padding: ${spacing(0)} ${spacing(1)};
|
|
69
|
-
flex: 1;
|
|
70
|
-
}
|
|
71
|
-
`;
|
|
72
|
-
|
|
73
|
-
export const InpSubscribedHeadline = styled(Text)`
|
|
74
|
-
color: ${colours.functional.brandColour};
|
|
75
|
-
font-family: ${fonts.headline};
|
|
76
|
-
text-align: center;
|
|
77
|
-
font-size: ${fontSizes.newsletterPuffHeadline}px;
|
|
78
|
-
text-decoration: none;
|
|
79
|
-
margin-bottom: ${spacing(2)};
|
|
80
|
-
`;
|
|
81
|
-
|
|
82
|
-
export const InpSignupContainer = styled(View)`
|
|
83
|
-
justify-content: center;
|
|
84
|
-
padding: ${spacing(4)}px;
|
|
85
|
-
@media (min-width: ${breakpoints.small}px) {
|
|
86
|
-
padding: ${spacing(0)} ${spacing(4)};
|
|
87
|
-
flex: 1;
|
|
88
|
-
}
|
|
89
|
-
`;
|
|
90
|
-
|
|
91
|
-
export const InpSignupLabel = styled(Text)`
|
|
92
|
-
font-family: ${fonts.supporting};
|
|
93
|
-
font-size: ${fontSizes.newsletterPuffLabel}px;
|
|
94
|
-
letter-spacing: 1px;
|
|
95
|
-
color: ${colours.functional.brandColour};
|
|
96
|
-
text-align: center;
|
|
97
|
-
text-transform: uppercase;
|
|
98
|
-
margin-bottom: ${spacing(1)};
|
|
99
|
-
`;
|
|
100
|
-
|
|
101
|
-
export const InpSignupHeadline = styled(Text)`
|
|
102
|
-
color: ${colours.functional.brandColour};
|
|
103
|
-
font-family: ${fonts.headline};
|
|
104
|
-
text-align: center;
|
|
105
|
-
font-size: ${fontSizes.newsletterPuffHeadline}px;
|
|
106
|
-
text-decoration: none;
|
|
107
|
-
margin-bottom: ${spacing(1)};
|
|
108
|
-
`;
|
|
109
|
-
|
|
110
|
-
export const InpCopy = styled(Text)`
|
|
57
|
+
export const InpPreferencesText = styled(Text)`
|
|
58
|
+
color: ${colours.functional.action};
|
|
111
59
|
font-family: ${fonts.body};
|
|
112
|
-
font-size:
|
|
113
|
-
text-align:
|
|
114
|
-
|
|
60
|
+
font-size: 18px;
|
|
61
|
+
text-align: left;
|
|
62
|
+
letter-spacing: -0.4px;
|
|
115
63
|
margin-bottom: ${spacing(3)};
|
|
116
64
|
`;
|
|
117
65
|
|
|
@@ -121,41 +69,3 @@ export const InpSignupCTAContainer = styled(View)`
|
|
|
121
69
|
margin: 0px auto;
|
|
122
70
|
}
|
|
123
71
|
`;
|
|
124
|
-
|
|
125
|
-
export const InpPreferencesContainer = styled(View)`
|
|
126
|
-
flex-direction: row;
|
|
127
|
-
justify-content: center;
|
|
128
|
-
`;
|
|
129
|
-
|
|
130
|
-
export const InpPreferencesText = styled(Text)`
|
|
131
|
-
color: ${colours.functional.action};
|
|
132
|
-
`;
|
|
133
|
-
|
|
134
|
-
export const InpIconContainer = styled(View)`
|
|
135
|
-
padding-left: 8px;
|
|
136
|
-
margin: auto;
|
|
137
|
-
`;
|
|
138
|
-
|
|
139
|
-
export const InpPreferencesView = styled(View)`
|
|
140
|
-
display: flex;
|
|
141
|
-
flex-direction: row;
|
|
142
|
-
`;
|
|
143
|
-
|
|
144
|
-
export const buttonStyles = {
|
|
145
|
-
alignItems: 'center',
|
|
146
|
-
backgroundColor: 'transparent',
|
|
147
|
-
borderColor: colours.functional.brandColour,
|
|
148
|
-
borderStyle: 'solid',
|
|
149
|
-
borderWidth: 2,
|
|
150
|
-
color: colours.functional.brandColour,
|
|
151
|
-
elevation: 0,
|
|
152
|
-
fontFamily: fonts.supporting,
|
|
153
|
-
height: 45,
|
|
154
|
-
justifyContent: 'center',
|
|
155
|
-
letterSpacing: 0.2,
|
|
156
|
-
width: '100%'
|
|
157
|
-
};
|
|
158
|
-
|
|
159
|
-
export const textStyle = {
|
|
160
|
-
color: colours.functional.brandColour
|
|
161
|
-
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export const capitaliseFirstCharacter = (stringToCapitalise?: string) => {
|
|
2
|
+
if (!stringToCapitalise) {
|
|
3
|
+
return;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
const firstCharacter = stringToCapitalise.charAt(0);
|
|
7
|
+
const restOfString = stringToCapitalise.split(firstCharacter);
|
|
8
|
+
return `${firstCharacter.toUpperCase()}${restOfString[1]}`;
|
|
9
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { capitaliseFirstCharacter } from '../CapitaliseFirstCharacter';
|
|
2
|
+
|
|
3
|
+
describe('capitaliseFirstCharacter()', () => {
|
|
4
|
+
it('capitalizes the first character of a string', async () => {
|
|
5
|
+
const copy = capitaliseFirstCharacter('sport');
|
|
6
|
+
expect(copy).toBe('Sport');
|
|
7
|
+
});
|
|
8
|
+
|
|
9
|
+
it('returns early when a string is not passed as a parameter', async () => {
|
|
10
|
+
const copy = capitaliseFirstCharacter();
|
|
11
|
+
expect(copy).toBe(undefined);
|
|
12
|
+
});
|
|
13
|
+
});
|
package/src/index.ts
CHANGED
|
@@ -30,7 +30,7 @@ export {
|
|
|
30
30
|
} from './components/newsletter-puff/InlineNewsletterPuff';
|
|
31
31
|
export {
|
|
32
32
|
PreviewNewsletterPuff
|
|
33
|
-
} from './components/newsletter-puff/PreviewNewsletterPuff';
|
|
33
|
+
} from './components/newsletter-puff/preview-newsletter-puff/PreviewNewsletterPuff';
|
|
34
34
|
|
|
35
35
|
// Sport Components
|
|
36
36
|
export {
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import Button from '@times-components/button';
|
|
3
|
-
import { buttonStyles, textStyle } from './styles';
|
|
4
|
-
import { useTrackingContext } from '../../helpers/tracking/TrackingContextProvider';
|
|
5
|
-
export const NewsletterPuffButton = ({ updatingSubscription = false, onPress }) => {
|
|
6
|
-
const { fireAnalyticsEvent } = useTrackingContext();
|
|
7
|
-
const handlePress = () => {
|
|
8
|
-
if (!updatingSubscription) {
|
|
9
|
-
onPress && onPress();
|
|
10
|
-
fireAnalyticsEvent &&
|
|
11
|
-
fireAnalyticsEvent({
|
|
12
|
-
action: 'Clicked',
|
|
13
|
-
object: 'NewsletterPuffButton',
|
|
14
|
-
attrs: {
|
|
15
|
-
event_navigation_name: 'widget : puff : sign up now',
|
|
16
|
-
event_navigation_browsing_method: 'click',
|
|
17
|
-
event_navigation_action: 'navigation'
|
|
18
|
-
}
|
|
19
|
-
});
|
|
20
|
-
}
|
|
21
|
-
};
|
|
22
|
-
return (React.createElement(Button, { title: updatingSubscription ? 'Saving…' : 'Sign up now', onPress: () => handlePress(), style: buttonStyles, underlayColor: "transparent", textStyle: textStyle }));
|
|
23
|
-
};
|
|
24
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTmV3c2xldHRlclB1ZmZCdXR0b24uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9uZXdzbGV0dGVyLXB1ZmYvTmV3c2xldHRlclB1ZmZCdXR0b24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUUxQixPQUFPLE1BQU0sTUFBTSwwQkFBMEIsQ0FBQztBQUU5QyxPQUFPLEVBQUUsWUFBWSxFQUFFLFNBQVMsRUFBRSxNQUFNLFVBQVUsQ0FBQztBQUNuRCxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxnREFBZ0QsQ0FBQztBQU9wRixNQUFNLENBQUMsTUFBTSxvQkFBb0IsR0FBRyxDQUFDLEVBQ25DLG9CQUFvQixHQUFHLEtBQUssRUFDNUIsT0FBTyxFQUNhLEVBQUUsRUFBRTtJQUN4QixNQUFNLEVBQUUsa0JBQWtCLEVBQUUsR0FBRyxrQkFBa0IsRUFBRSxDQUFDO0lBQ3BELE1BQU0sV0FBVyxHQUFHLEdBQUcsRUFBRTtRQUN2QixJQUFJLENBQUMsb0JBQW9CLEVBQUU7WUFDekIsT0FBTyxJQUFJLE9BQU8sRUFBRSxDQUFDO1lBQ3JCLGtCQUFrQjtnQkFDaEIsa0JBQWtCLENBQUM7b0JBQ2pCLE1BQU0sRUFBRSxTQUFTO29CQUNqQixNQUFNLEVBQUUsc0JBQXNCO29CQUM5QixLQUFLLEVBQUU7d0JBQ0wscUJBQXFCLEVBQUUsNkJBQTZCO3dCQUNwRCxnQ0FBZ0MsRUFBRSxPQUFPO3dCQUN6Qyx1QkFBdUIsRUFBRSxZQUFZO3FCQUN0QztpQkFDRixDQUFDLENBQUM7U0FDTjtJQUNILENBQUMsQ0FBQztJQUNGLE9BQU8sQ0FDTCxvQkFBQyxNQUFNLElBQ0wsS0FBSyxFQUFFLG9CQUFvQixDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLGFBQWEsRUFDdkQsT0FBTyxFQUFFLEdBQUcsRUFBRSxDQUFDLFdBQVcsRUFBRSxFQUM1QixLQUFLLEVBQUUsWUFBWSxFQUNuQixhQUFhLEVBQUMsYUFBYSxFQUMzQixTQUFTLEVBQUUsU0FBUyxHQUNwQixDQUNILENBQUM7QUFDSixDQUFDLENBQUMifQ==
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import Link from '@times-components/link';
|
|
3
|
-
import { IconForwardArrow } from '@times-components/icons';
|
|
4
|
-
import { colours } from '@times-components/ts-styleguide';
|
|
5
|
-
import { TrackingContextProvider } from '../../helpers/tracking/TrackingContextProvider';
|
|
6
|
-
import { InpPreferencesView, InpPreferencesText, InpIconContainer } from './styles';
|
|
7
|
-
export const NewsletterPuffLink = ({ onPress }) => {
|
|
8
|
-
return (React.createElement(TrackingContextProvider, { scrolledEvent: {
|
|
9
|
-
object: 'NewsletterPuffLink',
|
|
10
|
-
attrs: {
|
|
11
|
-
event_navigation_name: 'widget : puff : manage preferences here : displayed',
|
|
12
|
-
event_navigation_browsing_method: 'automated'
|
|
13
|
-
}
|
|
14
|
-
} }, ({ fireAnalyticsEvent, intersectObserverRef }) => {
|
|
15
|
-
const handlePress = () => {
|
|
16
|
-
onPress && onPress();
|
|
17
|
-
fireAnalyticsEvent &&
|
|
18
|
-
fireAnalyticsEvent({
|
|
19
|
-
action: 'Clicked',
|
|
20
|
-
object: 'NewsletterPuffLink',
|
|
21
|
-
attrs: {
|
|
22
|
-
event_navigation_name: 'widget : puff : manage preferences here',
|
|
23
|
-
event_navigation_browsing_method: 'click'
|
|
24
|
-
}
|
|
25
|
-
});
|
|
26
|
-
};
|
|
27
|
-
return (React.createElement(Link, { url: "https://home.thetimes.co.uk/myNews", onPress: () => handlePress() },
|
|
28
|
-
React.createElement(InpPreferencesView, { ref: intersectObserverRef },
|
|
29
|
-
React.createElement(InpPreferencesText, null, "Manage preferences here"),
|
|
30
|
-
React.createElement(InpIconContainer, null,
|
|
31
|
-
React.createElement(IconForwardArrow, { fillColour: colours.functional.action })))));
|
|
32
|
-
}));
|
|
33
|
-
};
|
|
34
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTmV3c2xldHRlclB1ZmZMaW5rLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvbmV3c2xldHRlci1wdWZmL05ld3NsZXR0ZXJQdWZmTGluay50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sSUFBSSxNQUFNLHdCQUF3QixDQUFDO0FBQzFDLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBQzNELE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUUxRCxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSxnREFBZ0QsQ0FBQztBQUV6RixPQUFPLEVBQ0wsa0JBQWtCLEVBQ2xCLGtCQUFrQixFQUNsQixnQkFBZ0IsRUFDakIsTUFBTSxVQUFVLENBQUM7QUFFbEIsTUFBTSxDQUFDLE1BQU0sa0JBQWtCLEdBQUcsQ0FBQyxFQUFFLE9BQU8sRUFBTyxFQUFFLEVBQUU7SUFDckQsT0FBTyxDQUNMLG9CQUFDLHVCQUF1QixJQUN0QixhQUFhLEVBQUU7WUFDYixNQUFNLEVBQUUsb0JBQW9CO1lBQzVCLEtBQUssRUFBRTtnQkFDTCxxQkFBcUIsRUFDbkIscURBQXFEO2dCQUN2RCxnQ0FBZ0MsRUFBRSxXQUFXO2FBQzlDO1NBQ0YsSUFFQSxDQUFDLEVBQUUsa0JBQWtCLEVBQUUsb0JBQW9CLEVBQUUsRUFBRSxFQUFFO1FBQ2hELE1BQU0sV0FBVyxHQUFHLEdBQUcsRUFBRTtZQUN2QixPQUFPLElBQUksT0FBTyxFQUFFLENBQUM7WUFDckIsa0JBQWtCO2dCQUNoQixrQkFBa0IsQ0FBQztvQkFDakIsTUFBTSxFQUFFLFNBQVM7b0JBQ2pCLE1BQU0sRUFBRSxvQkFBb0I7b0JBQzVCLEtBQUssRUFBRTt3QkFDTCxxQkFBcUIsRUFDbkIseUNBQXlDO3dCQUMzQyxnQ0FBZ0MsRUFBRSxPQUFPO3FCQUMxQztpQkFDRixDQUFDLENBQUM7UUFDUCxDQUFDLENBQUM7UUFDRixPQUFPLENBQ0wsb0JBQUMsSUFBSSxJQUNILEdBQUcsRUFBQyxvQ0FBb0MsRUFDeEMsT0FBTyxFQUFFLEdBQUcsRUFBRSxDQUFDLFdBQVcsRUFBRTtZQUU1QixvQkFBQyxrQkFBa0IsSUFBQyxHQUFHLEVBQUUsb0JBQW9CO2dCQUMzQyxvQkFBQyxrQkFBa0Isa0NBQTZDO2dCQUNoRSxvQkFBQyxnQkFBZ0I7b0JBQ2Ysb0JBQUMsZ0JBQWdCLElBQUMsVUFBVSxFQUFFLE9BQU8sQ0FBQyxVQUFVLENBQUMsTUFBTSxHQUFJLENBQzFDLENBQ0EsQ0FDaEIsQ0FDUixDQUFDO0lBQ0osQ0FBQyxDQUN1QixDQUMzQixDQUFDO0FBQ0osQ0FBQyxDQUFDIn0=
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { InpContainer, InpCopy, InpImageContainer, InpSignupContainer, InpSignupCTAContainer, InpSignupHeadline, InpSignupLabel } from './styles';
|
|
2
|
-
import Image from '@times-components/image';
|
|
3
|
-
import { NewsletterPuffButton } from './NewsletterPuffButton';
|
|
4
|
-
import React from 'react';
|
|
5
|
-
export const PreviewNewsletterPuff = ({ copy, headline, imageUri, label }) => (React.createElement(InpContainer, null,
|
|
6
|
-
React.createElement(InpImageContainer, null,
|
|
7
|
-
React.createElement(Image, { aspectRatio: 1.42, uri: imageUri })),
|
|
8
|
-
React.createElement(InpSignupContainer, null,
|
|
9
|
-
React.createElement(InpSignupLabel, null, label),
|
|
10
|
-
React.createElement(InpSignupHeadline, null, headline),
|
|
11
|
-
React.createElement(InpCopy, null, copy),
|
|
12
|
-
React.createElement(InpSignupCTAContainer, null,
|
|
13
|
-
React.createElement(NewsletterPuffButton, null)))));
|
|
14
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUHJldmlld05ld3NsZXR0ZXJQdWZmLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvbmV3c2xldHRlci1wdWZmL1ByZXZpZXdOZXdzbGV0dGVyUHVmZi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFlBQVksRUFDWixPQUFPLEVBQ1AsaUJBQWlCLEVBQ2pCLGtCQUFrQixFQUNsQixxQkFBcUIsRUFDckIsaUJBQWlCLEVBQ2pCLGNBQWMsRUFDZixNQUFNLFVBQVUsQ0FBQztBQUNsQixPQUFPLEtBQUssTUFBTSx5QkFBeUIsQ0FBQztBQUM1QyxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUM5RCxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFTMUIsTUFBTSxDQUFDLE1BQU0scUJBQXFCLEdBQUcsQ0FBQyxFQUNwQyxJQUFJLEVBQ0osUUFBUSxFQUNSLFFBQVEsRUFDUixLQUFLLEVBQ3NCLEVBQUUsRUFBRSxDQUFDLENBQ2hDLG9CQUFDLFlBQVk7SUFDWCxvQkFBQyxpQkFBaUI7UUFDaEIsb0JBQUMsS0FBSyxJQUFDLFdBQVcsRUFBRSxJQUFJLEVBQUUsR0FBRyxFQUFFLFFBQVEsR0FBSSxDQUN6QjtJQUNwQixvQkFBQyxrQkFBa0I7UUFDakIsb0JBQUMsY0FBYyxRQUFFLEtBQUssQ0FBa0I7UUFDeEMsb0JBQUMsaUJBQWlCLFFBQUUsUUFBUSxDQUFxQjtRQUNqRCxvQkFBQyxPQUFPLFFBQUUsSUFBSSxDQUFXO1FBQ3pCLG9CQUFDLHFCQUFxQjtZQUNwQixvQkFBQyxvQkFBb0IsT0FBRyxDQUNGLENBQ0wsQ0FDUixDQUNoQixDQUFDIn0=
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { render, cleanup, fireEvent } from '@testing-library/react';
|
|
3
|
-
import mockDate from 'mockdate';
|
|
4
|
-
import { NewsletterPuffButton } from '../NewsletterPuffButton';
|
|
5
|
-
import { TrackingContextProvider } from '../../../helpers/tracking/TrackingContextProvider';
|
|
6
|
-
describe('NewsletterPuffButton', () => {
|
|
7
|
-
beforeEach(() => {
|
|
8
|
-
mockDate.set(1620000000000);
|
|
9
|
-
});
|
|
10
|
-
afterEach(() => {
|
|
11
|
-
mockDate.reset();
|
|
12
|
-
jest.clearAllMocks();
|
|
13
|
-
cleanup();
|
|
14
|
-
});
|
|
15
|
-
it('renders the button with the text `Sign up to newsletter`', () => {
|
|
16
|
-
const mockedOnPress = jest.fn();
|
|
17
|
-
const component = render(React.createElement(NewsletterPuffButton, { updatingSubscription: false, onPress: mockedOnPress }));
|
|
18
|
-
expect(component.baseElement).toMatchSnapshot();
|
|
19
|
-
fireEvent.click(component.getByText('Sign up now'));
|
|
20
|
-
expect(mockedOnPress).toHaveBeenCalledTimes(1);
|
|
21
|
-
});
|
|
22
|
-
it('renders the button with the text `Saving...`', () => {
|
|
23
|
-
const mockedOnPress = jest.fn();
|
|
24
|
-
const component = render(React.createElement(NewsletterPuffButton, { updatingSubscription: true, onPress: mockedOnPress }));
|
|
25
|
-
expect(component.baseElement).toMatchSnapshot();
|
|
26
|
-
});
|
|
27
|
-
it('should track button viewed and clicked in analytics', () => {
|
|
28
|
-
const mockedAnalyticsStream = jest.fn();
|
|
29
|
-
const onPress = jest.fn();
|
|
30
|
-
const component = render(React.createElement(TrackingContextProvider, { analyticsStream: mockedAnalyticsStream, context: { component: 'ArticleSkeleton' } },
|
|
31
|
-
React.createElement(NewsletterPuffButton, { updatingSubscription: false, onPress: onPress })));
|
|
32
|
-
fireEvent.click(component.getByText('Sign up now'));
|
|
33
|
-
expect(onPress).toHaveBeenCalled();
|
|
34
|
-
expect(mockedAnalyticsStream).toHaveBeenCalledWith({
|
|
35
|
-
action: 'Clicked',
|
|
36
|
-
component: 'ArticleSkeleton',
|
|
37
|
-
object: 'NewsletterPuffButton',
|
|
38
|
-
attrs: {
|
|
39
|
-
eventTime: '2021-05-03T00:00:00.000Z',
|
|
40
|
-
event_navigation_action: 'navigation',
|
|
41
|
-
event_navigation_browsing_method: 'click',
|
|
42
|
-
event_navigation_name: 'widget : puff : sign up now'
|
|
43
|
-
}
|
|
44
|
-
});
|
|
45
|
-
});
|
|
46
|
-
});
|
|
47
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTmV3c2xldHRlclB1ZmZCdXR0b24udGVzdC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL25ld3NsZXR0ZXItcHVmZi9fX3Rlc3RzX18vTmV3c2xldHRlclB1ZmZCdXR0b24udGVzdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBRTFCLE9BQU8sRUFBRSxNQUFNLEVBQUUsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ3BFLE9BQU8sUUFBUSxNQUFNLFVBQVUsQ0FBQztBQUNoQyxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUMvRCxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSxtREFBbUQsQ0FBQztBQUU1RixRQUFRLENBQUMsc0JBQXNCLEVBQUUsR0FBRyxFQUFFO0lBQ3BDLFVBQVUsQ0FBQyxHQUFHLEVBQUU7UUFDZCxRQUFRLENBQUMsR0FBRyxDQUFDLGFBQWEsQ0FBQyxDQUFDO0lBQzlCLENBQUMsQ0FBQyxDQUFDO0lBRUgsU0FBUyxDQUFDLEdBQUcsRUFBRTtRQUNiLFFBQVEsQ0FBQyxLQUFLLEVBQUUsQ0FBQztRQUNqQixJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7UUFDckIsT0FBTyxFQUFFLENBQUM7SUFDWixDQUFDLENBQUMsQ0FBQztJQUVILEVBQUUsQ0FBQywwREFBMEQsRUFBRSxHQUFHLEVBQUU7UUFDbEUsTUFBTSxhQUFhLEdBQUcsSUFBSSxDQUFDLEVBQUUsRUFBRSxDQUFDO1FBRWhDLE1BQU0sU0FBUyxHQUFHLE1BQU0sQ0FDdEIsb0JBQUMsb0JBQW9CLElBQ25CLG9CQUFvQixFQUFFLEtBQUssRUFDM0IsT0FBTyxFQUFFLGFBQWEsR0FDdEIsQ0FDSCxDQUFDO1FBRUYsTUFBTSxDQUFDLFNBQVMsQ0FBQyxXQUFXLENBQUMsQ0FBQyxlQUFlLEVBQUUsQ0FBQztRQUVoRCxTQUFTLENBQUMsS0FBSyxDQUFDLFNBQVMsQ0FBQyxTQUFTLENBQUMsYUFBYSxDQUFDLENBQUMsQ0FBQztRQUVwRCxNQUFNLENBQUMsYUFBYSxDQUFDLENBQUMscUJBQXFCLENBQUMsQ0FBQyxDQUFDLENBQUM7SUFDakQsQ0FBQyxDQUFDLENBQUM7SUFFSCxFQUFFLENBQUMsOENBQThDLEVBQUUsR0FBRyxFQUFFO1FBQ3RELE1BQU0sYUFBYSxHQUFHLElBQUksQ0FBQyxFQUFFLEVBQUUsQ0FBQztRQUVoQyxNQUFNLFNBQVMsR0FBRyxNQUFNLENBQ3RCLG9CQUFDLG9CQUFvQixJQUFDLG9CQUFvQixRQUFDLE9BQU8sRUFBRSxhQUFhLEdBQUksQ0FDdEUsQ0FBQztRQUVGLE1BQU0sQ0FBQyxTQUFTLENBQUMsV0FBVyxDQUFDLENBQUMsZUFBZSxFQUFFLENBQUM7SUFDbEQsQ0FBQyxDQUFDLENBQUM7SUFFSCxFQUFFLENBQUMscURBQXFELEVBQUUsR0FBRyxFQUFFO1FBQzdELE1BQU0scUJBQXFCLEdBQUcsSUFBSSxDQUFDLEVBQUUsRUFBRSxDQUFDO1FBQ3hDLE1BQU0sT0FBTyxHQUFHLElBQUksQ0FBQyxFQUFFLEVBQUUsQ0FBQztRQUUxQixNQUFNLFNBQVMsR0FBRyxNQUFNLENBQ3RCLG9CQUFDLHVCQUF1QixJQUN0QixlQUFlLEVBQUUscUJBQXFCLEVBQ3RDLE9BQU8sRUFBRSxFQUFFLFNBQVMsRUFBRSxpQkFBaUIsRUFBRTtZQUV6QyxvQkFBQyxvQkFBb0IsSUFBQyxvQkFBb0IsRUFBRSxLQUFLLEVBQUUsT0FBTyxFQUFFLE9BQU8sR0FBSSxDQUMvQyxDQUMzQixDQUFDO1FBRUYsU0FBUyxDQUFDLEtBQUssQ0FBQyxTQUFTLENBQUMsU0FBUyxDQUFDLGFBQWEsQ0FBQyxDQUFDLENBQUM7UUFFcEQsTUFBTSxDQUFDLE9BQU8sQ0FBQyxDQUFDLGdCQUFnQixFQUFFLENBQUM7UUFFbkMsTUFBTSxDQUFDLHFCQUFxQixDQUFDLENBQUMsb0JBQW9CLENBQUM7WUFDakQsTUFBTSxFQUFFLFNBQVM7WUFDakIsU0FBUyxFQUFFLGlCQUFpQjtZQUM1QixNQUFNLEVBQUUsc0JBQXNCO1lBQzlCLEtBQUssRUFBRTtnQkFDTCxTQUFTLEVBQUUsMEJBQTBCO2dCQUNyQyx1QkFBdUIsRUFBRSxZQUFZO2dCQUNyQyxnQ0FBZ0MsRUFBRSxPQUFPO2dCQUN6QyxxQkFBcUIsRUFBRSw2QkFBNkI7YUFDckQ7U0FDRixDQUFDLENBQUM7SUFDTCxDQUFDLENBQUMsQ0FBQztBQUNMLENBQUMsQ0FBQyxDQUFDIn0=
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { render, cleanup, fireEvent } from '@testing-library/react';
|
|
3
|
-
import mockDate from 'mockdate';
|
|
4
|
-
import { NewsletterPuffLink } from '../NewsletterPuffLink';
|
|
5
|
-
import { TrackingContextProvider } from '../../../helpers/tracking/TrackingContextProvider';
|
|
6
|
-
import FakeIntersectionObserver from '../../../test-utils/FakeIntersectionObserver';
|
|
7
|
-
describe('NewsletterPuffLink', () => {
|
|
8
|
-
let oldIntersectionObserver;
|
|
9
|
-
beforeEach(() => {
|
|
10
|
-
mockDate.set(1620000000000);
|
|
11
|
-
oldIntersectionObserver = window.IntersectionObserver;
|
|
12
|
-
// @ts-ignore
|
|
13
|
-
window.IntersectionObserver = FakeIntersectionObserver;
|
|
14
|
-
});
|
|
15
|
-
afterEach(() => {
|
|
16
|
-
mockDate.reset();
|
|
17
|
-
window.IntersectionObserver = oldIntersectionObserver;
|
|
18
|
-
jest.clearAllMocks();
|
|
19
|
-
cleanup();
|
|
20
|
-
});
|
|
21
|
-
it('renders the link with the text `Manage preferences here`', () => {
|
|
22
|
-
const mockedOnPress = jest.fn();
|
|
23
|
-
const mockedAnalyticsStream = jest.fn();
|
|
24
|
-
const component = render(React.createElement(TrackingContextProvider, { context: { attrs: { context: 'value' } }, analyticsStream: mockedAnalyticsStream },
|
|
25
|
-
React.createElement(NewsletterPuffLink, { onPress: mockedOnPress })));
|
|
26
|
-
expect(component.baseElement).toMatchSnapshot();
|
|
27
|
-
});
|
|
28
|
-
it('should track link viewed in analytics', () => {
|
|
29
|
-
const mockedAnalyticsStream = jest.fn();
|
|
30
|
-
const mockedOnPress = jest.fn();
|
|
31
|
-
render(React.createElement(TrackingContextProvider, { context: { attrs: { context: 'value' } }, analyticsStream: mockedAnalyticsStream },
|
|
32
|
-
React.createElement(NewsletterPuffLink, { onPress: mockedOnPress })));
|
|
33
|
-
FakeIntersectionObserver.intersect();
|
|
34
|
-
expect(mockedAnalyticsStream).toHaveBeenCalledWith({
|
|
35
|
-
object: 'NewsletterPuffLink',
|
|
36
|
-
action: 'Scrolled',
|
|
37
|
-
attrs: {
|
|
38
|
-
context: 'value',
|
|
39
|
-
eventTime: '2021-05-03T00:00:00.000Z',
|
|
40
|
-
event_navigation_browsing_method: 'automated',
|
|
41
|
-
event_navigation_name: 'widget : puff : manage preferences here : displayed'
|
|
42
|
-
}
|
|
43
|
-
});
|
|
44
|
-
});
|
|
45
|
-
it('should track link viewed and clicked in analytics', async () => {
|
|
46
|
-
const mockedAnalyticsStream = jest.fn();
|
|
47
|
-
const mockedOnPress = jest.fn();
|
|
48
|
-
const component = render(React.createElement(TrackingContextProvider, { context: { component: 'ArticleSkeleton', attrs: { context: 'value' } }, analyticsStream: mockedAnalyticsStream },
|
|
49
|
-
React.createElement(NewsletterPuffLink, { onPress: mockedOnPress })));
|
|
50
|
-
fireEvent.click(await component.queryByRole('link'));
|
|
51
|
-
expect(mockedAnalyticsStream).toHaveBeenCalledWith({
|
|
52
|
-
action: 'Clicked',
|
|
53
|
-
component: 'ArticleSkeleton',
|
|
54
|
-
object: 'NewsletterPuffLink',
|
|
55
|
-
attrs: {
|
|
56
|
-
context: 'value',
|
|
57
|
-
eventTime: '2021-05-03T00:00:00.000Z',
|
|
58
|
-
event_navigation_browsing_method: 'click',
|
|
59
|
-
event_navigation_name: 'widget : puff : manage preferences here'
|
|
60
|
-
}
|
|
61
|
-
});
|
|
62
|
-
});
|
|
63
|
-
});
|
|
64
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTmV3c2xldHRlclB1ZmZMaW5rLnRlc3QuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9uZXdzbGV0dGVyLXB1ZmYvX190ZXN0c19fL05ld3NsZXR0ZXJQdWZmTGluay50ZXN0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUFFLE1BQU0sRUFBRSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDcEUsT0FBTyxRQUFRLE1BQU0sVUFBVSxDQUFDO0FBQ2hDLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBQzNELE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLG1EQUFtRCxDQUFDO0FBQzVGLE9BQU8sd0JBQXdCLE1BQU0sOENBQThDLENBQUM7QUFFcEYsUUFBUSxDQUFDLG9CQUFvQixFQUFFLEdBQUcsRUFBRTtJQUNsQyxJQUFJLHVCQUFvRCxDQUFDO0lBQ3pELFVBQVUsQ0FBQyxHQUFHLEVBQUU7UUFDZCxRQUFRLENBQUMsR0FBRyxDQUFDLGFBQWEsQ0FBQyxDQUFDO1FBQzVCLHVCQUF1QixHQUFHLE1BQU0sQ0FBQyxvQkFBb0IsQ0FBQztRQUV0RCxhQUFhO1FBQ2IsTUFBTSxDQUFDLG9CQUFvQixHQUFHLHdCQUF3QixDQUFDO0lBQ3pELENBQUMsQ0FBQyxDQUFDO0lBRUgsU0FBUyxDQUFDLEdBQUcsRUFBRTtRQUNiLFFBQVEsQ0FBQyxLQUFLLEVBQUUsQ0FBQztRQUNqQixNQUFNLENBQUMsb0JBQW9CLEdBQUcsdUJBQXVCLENBQUM7UUFDdEQsSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO1FBQ3JCLE9BQU8sRUFBRSxDQUFDO0lBQ1osQ0FBQyxDQUFDLENBQUM7SUFFSCxFQUFFLENBQUMsMERBQTBELEVBQUUsR0FBRyxFQUFFO1FBQ2xFLE1BQU0sYUFBYSxHQUFHLElBQUks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
|