@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.
Files changed (74) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/components/newsletter-puff/AutoNewsletterPuff.d.ts +2 -3
  3. package/dist/components/newsletter-puff/AutoNewsletterPuff.js +3 -3
  4. package/dist/components/newsletter-puff/InlineNewsletterPuff.d.ts +2 -3
  5. package/dist/components/newsletter-puff/InlineNewsletterPuff.js +7 -22
  6. package/dist/components/newsletter-puff/NewsletterPuff.stories.js +5 -5
  7. package/dist/components/newsletter-puff/__tests__/AutoNewsletterPuff.test.js +2 -4
  8. package/dist/components/newsletter-puff/__tests__/InlineNewsletterPuff.test.js +12 -94
  9. package/dist/components/newsletter-puff/loading-overlay/LoadingOverlay.d.ts +1 -0
  10. package/dist/components/newsletter-puff/loading-overlay/LoadingOverlay.js +10 -0
  11. package/dist/components/newsletter-puff/loading-overlay/styles.d.ts +3 -0
  12. package/dist/components/newsletter-puff/loading-overlay/styles.js +50 -0
  13. package/dist/components/newsletter-puff/newsletter/Newsletter.d.ts +12 -0
  14. package/dist/components/newsletter-puff/newsletter/Newsletter.js +34 -0
  15. package/dist/components/newsletter-puff/newsletter/styles.d.ts +8 -0
  16. package/dist/components/newsletter-puff/newsletter/styles.js +52 -0
  17. package/dist/components/newsletter-puff/{NewsletterPuffButton.d.ts → newsletter-puff-button/NewsletterPuffButton.d.ts} +2 -1
  18. package/dist/components/newsletter-puff/newsletter-puff-button/NewsletterPuffButton.js +24 -0
  19. package/dist/components/newsletter-puff/{__tests__ → newsletter-puff-button/__tests__}/NewsletterPuffButton.test.d.ts +0 -0
  20. package/dist/components/newsletter-puff/newsletter-puff-button/__tests__/NewsletterPuffButton.test.js +41 -0
  21. package/dist/components/newsletter-puff/newsletter-puff-button/styles.d.ts +15 -0
  22. package/dist/components/newsletter-puff/newsletter-puff-button/styles.js +26 -0
  23. package/dist/components/newsletter-puff/{NewsletterPuffLink.d.ts → newsletter-puff-link/NewsletterPuffLink.d.ts} +0 -0
  24. package/dist/components/newsletter-puff/newsletter-puff-link/NewsletterPuffLink.js +29 -0
  25. package/dist/components/newsletter-puff/{__tests__ → newsletter-puff-link/__tests__}/NewsletterPuffLink.test.d.ts +0 -0
  26. package/dist/components/newsletter-puff/newsletter-puff-link/__tests__/NewsletterPuffLink.test.js +58 -0
  27. package/dist/components/newsletter-puff/preview-newsletter-puff/PreviewNewsletterPuff.d.ts +7 -0
  28. package/dist/components/newsletter-puff/preview-newsletter-puff/PreviewNewsletterPuff.js +11 -0
  29. package/dist/components/newsletter-puff/{__tests__ → preview-newsletter-puff/__tests__}/PreviewNewsletterPuff.test.d.ts +0 -0
  30. package/dist/components/newsletter-puff/preview-newsletter-puff/__tests__/PreviewNewsletterPuff.test.js +17 -0
  31. package/dist/components/newsletter-puff/styles.d.ts +6 -29
  32. package/dist/components/newsletter-puff/styles.js +11 -88
  33. package/dist/helpers/text-formatting/CapitaliseFirstCharacter.d.ts +1 -0
  34. package/dist/helpers/text-formatting/CapitaliseFirstCharacter.js +9 -0
  35. package/dist/helpers/text-formatting/__tests__/CapitaliseFirstCharacter.test.d.ts +1 -0
  36. package/dist/helpers/text-formatting/__tests__/CapitaliseFirstCharacter.test.js +12 -0
  37. package/dist/index.d.ts +1 -1
  38. package/dist/index.js +2 -2
  39. package/package.json +3 -3
  40. package/rnw.js +1 -1
  41. package/src/components/newsletter-puff/AutoNewsletterPuff.tsx +3 -6
  42. package/src/components/newsletter-puff/InlineNewsletterPuff.tsx +16 -53
  43. package/src/components/newsletter-puff/NewsletterPuff.stories.tsx +4 -13
  44. package/src/components/newsletter-puff/__tests__/AutoNewsletterPuff.test.tsx +1 -3
  45. package/src/components/newsletter-puff/__tests__/InlineNewsletterPuff.test.tsx +13 -119
  46. package/src/components/newsletter-puff/__tests__/__snapshots__/AutoNewsletterPuff.test.tsx.snap +4 -4
  47. package/src/components/newsletter-puff/__tests__/__snapshots__/InlineNewsletterPuff.test.tsx.snap +68 -260
  48. package/src/components/newsletter-puff/loading-overlay/LoadingOverlay.tsx +15 -0
  49. package/src/components/newsletter-puff/loading-overlay/styles.ts +54 -0
  50. package/src/components/newsletter-puff/newsletter/Newsletter.tsx +79 -0
  51. package/src/components/newsletter-puff/newsletter/styles.ts +65 -0
  52. package/src/components/newsletter-puff/{NewsletterPuffButton.tsx → newsletter-puff-button/NewsletterPuffButton.tsx} +10 -8
  53. package/src/components/newsletter-puff/{__tests__ → newsletter-puff-button/__tests__}/NewsletterPuffButton.test.tsx +12 -20
  54. package/src/components/newsletter-puff/newsletter-puff-button/styles.ts +28 -0
  55. package/src/components/newsletter-puff/{NewsletterPuffLink.tsx → newsletter-puff-link/NewsletterPuffLink.tsx} +5 -14
  56. package/src/components/newsletter-puff/{__tests__ → newsletter-puff-link/__tests__}/NewsletterPuffLink.test.tsx +5 -19
  57. package/src/components/newsletter-puff/preview-newsletter-puff/PreviewNewsletterPuff.tsx +32 -0
  58. package/src/components/newsletter-puff/{__tests__ → preview-newsletter-puff/__tests__}/PreviewNewsletterPuff.test.tsx +2 -5
  59. package/src/components/newsletter-puff/preview-newsletter-puff/__tests__/__snapshots__/PreviewNewsletterPuff.test.tsx.snap +36 -0
  60. package/src/components/newsletter-puff/styles.ts +10 -100
  61. package/src/helpers/text-formatting/CapitaliseFirstCharacter.ts +9 -0
  62. package/src/helpers/text-formatting/__tests__/CapitaliseFirstCharacter.test.tsx +13 -0
  63. package/src/index.ts +1 -1
  64. package/dist/components/newsletter-puff/NewsletterPuffButton.js +0 -24
  65. package/dist/components/newsletter-puff/NewsletterPuffLink.js +0 -34
  66. package/dist/components/newsletter-puff/PreviewNewsletterPuff.d.ts +0 -8
  67. package/dist/components/newsletter-puff/PreviewNewsletterPuff.js +0 -14
  68. package/dist/components/newsletter-puff/__tests__/NewsletterPuffButton.test.js +0 -47
  69. package/dist/components/newsletter-puff/__tests__/NewsletterPuffLink.test.js +0 -64
  70. package/dist/components/newsletter-puff/__tests__/PreviewNewsletterPuff.test.js +0 -18
  71. package/src/components/newsletter-puff/PreviewNewsletterPuff.tsx +0 -40
  72. package/src/components/newsletter-puff/__tests__/__snapshots__/NewsletterPuffButton.test.tsx.snap +0 -27
  73. package/src/components/newsletter-puff/__tests__/__snapshots__/NewsletterPuffLink.test.tsx.snap +0 -40
  74. 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 '../../../helpers/tracking/TrackingContextProvider';
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.baseElement).toMatchSnapshot();
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 updatingSubscription={false} onPress={onPress} />
41
+ <NewsletterPuffButton
42
+ updatingSubscription={false}
43
+ onPress={onPress}
44
+ style="button"
45
+ />
56
46
  </TrackingContextProvider>
57
47
  );
58
48
 
59
- fireEvent.click(component.getByText('Sign up now'));
49
+ const oneClickSignUp = component.getByText('One click sign up');
50
+
51
+ fireEvent.click(oneClickSignUp);
60
52
 
61
- expect(onPress).toHaveBeenCalled();
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 '../../helpers/tracking/TrackingContextProvider';
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
- <InpPreferencesView ref={intersectObserverRef}>
46
- <InpPreferencesText>Manage preferences here</InpPreferencesText>
47
- <InpIconContainer>
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 '../../../helpers/tracking/TrackingContextProvider';
6
- import FakeIntersectionObserver from '../../../test-utils/FakeIntersectionObserver';
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
- background-color: ${colours.functional.newsletterPuffBackground};
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 InpImageContainer = styled(View)`
59
- @media (min-width: ${breakpoints.medium}px) {
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: ${fontSizes.newsletterPuffCopy}px;
113
- text-align: center;
114
- color: ${colours.functional.primary};
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,8 +0,0 @@
1
- declare type PreviewNewsletterPuffProps = {
2
- copy: string;
3
- headline: string;
4
- imageUri: string;
5
- label?: string;
6
- };
7
- export declare const PreviewNewsletterPuff: ({ copy, headline, imageUri, label }: PreviewNewsletterPuffProps) => JSX.Element;
8
- export {};
@@ -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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTmV3c2xldHRlclB1ZmZMaW5rLnRlc3QuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9uZXdzbGV0dGVyLXB1ZmYvX190ZXN0c19fL05ld3NsZXR0ZXJQdWZmTGluay50ZXN0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUFFLE1BQU0sRUFBRSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDcEUsT0FBTyxRQUFRLE1BQU0sVUFBVSxDQUFDO0FBQ2hDLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBQzNELE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLG1EQUFtRCxDQUFDO0FBQzVGLE9BQU8sd0JBQXdCLE1BQU0sOENBQThDLENBQUM7QUFFcEYsUUFBUSxDQUFDLG9CQUFvQixFQUFFLEdBQUcsRUFBRTtJQUNsQyxJQUFJLHVCQUFvRCxDQUFDO0lBQ3pELFVBQVUsQ0FBQyxHQUFHLEVBQUU7UUFDZCxRQUFRLENBQUMsR0FBRyxDQUFDLGFBQWEsQ0FBQyxDQUFDO1FBQzVCLHVCQUF1QixHQUFHLE1BQU0sQ0FBQyxvQkFBb0IsQ0FBQztRQUV0RCxhQUFhO1FBQ2IsTUFBTSxDQUFDLG9CQUFvQixHQUFHLHdCQUF3QixDQUFDO0lBQ3pELENBQUMsQ0FBQyxDQUFDO0lBRUgsU0FBUyxDQUFDLEdBQUcsRUFBRTtRQUNiLFFBQVEsQ0FBQyxLQUFLLEVBQUUsQ0FBQztRQUNqQixNQUFNLENBQUMsb0JBQW9CLEdBQUcsdUJBQXVCLENBQUM7UUFDdEQsSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO1FBQ3JCLE9BQU8sRUFBRSxDQUFDO0lBQ1osQ0FBQyxDQUFDLENBQUM7SUFFSCxFQUFFLENBQUMsMERBQTBELEVBQUUsR0FBRyxFQUFFO1FBQ2xFLE1BQU0sYUFBYSxHQUFHLElBQUksQ0FBQyxFQUFFLEVBQUUsQ0FBQztRQUNoQyxNQUFNLHFCQUFxQixHQUFHLElBQUksQ0FBQyxFQUFFLEVBQUUsQ0FBQztRQUV4QyxNQUFNLFNBQVMsR0FBRyxNQUFNLENBQ3RCLG9CQUFDLHVCQUF1QixJQUN0QixPQUFPLEVBQUUsRUFBRSxLQUFLLEVBQUUsRUFBRSxPQUFPLEVBQUUsT0FBTyxFQUFFLEVBQUUsRUFDeEMsZUFBZSxFQUFFLHFCQUFxQjtZQUV0QyxvQkFBQyxrQkFBa0IsSUFBQyxPQUFPLEVBQUUsYUFBYSxHQUFJLENBQ3RCLENBQzNCLENBQUM7UUFFRixNQUFNLENBQUMsU0FBUyxDQUFDLFdBQVcsQ0FBQyxDQUFDLGVBQWUsRUFBRSxDQUFDO0lBQ2xELENBQUMsQ0FBQyxDQUFDO0lBRUgsRUFBRSxDQUFDLHVDQUF1QyxFQUFFLEdBQUcsRUFBRTtRQUMvQyxNQUFNLHFCQUFxQixHQUFHLElBQUksQ0FBQyxFQUFFLEVBQUUsQ0FBQztRQUN4QyxNQUFNLGFBQWEsR0FBRyxJQUFJLENBQUMsRUFBRSxFQUFFLENBQUM7UUFFaEMsTUFBTSxDQUNKLG9CQUFDLHVCQUF1QixJQUN0QixPQUFPLEVBQUUsRUFBRSxLQUFLLEVBQUUsRUFBRSxPQUFPLEVBQUUsT0FBTyxFQUFFLEVBQUUsRUFDeEMsZUFBZSxFQUFFLHFCQUFxQjtZQUV0QyxvQkFBQyxrQkFBa0IsSUFBQyxPQUFPLEVBQUUsYUFBYSxHQUFJLENBQ3RCLENBQzNCLENBQUM7UUFDRix3QkFBd0IsQ0FBQyxTQUFTLEVBQUUsQ0FBQztRQUVyQyxNQUFNLENBQUMscUJBQXFCLENBQUMsQ0FBQyxvQkFBb0IsQ0FBQztZQUNqRCxNQUFNLEVBQUUsb0JBQW9CO1lBQzVCLE1BQU0sRUFBRSxVQUFVO1lBQ2xCLEtBQUssRUFBRTtnQkFDTCxPQUFPLEVBQUUsT0FBTztnQkFDaEIsU0FBUyxFQUFFLDBCQUEwQjtnQkFDckMsZ0NBQWdDLEVBQUUsV0FBVztnQkFDN0MscUJBQXFCLEVBQ25CLHFEQUFxRDthQUN4RDtTQUNGLENBQUMsQ0FBQztJQUNMLENBQUMsQ0FBQyxDQUFDO0lBRUgsRUFBRSxDQUFDLG1EQUFtRCxFQUFFLEtBQUssSUFBSSxFQUFFO1FBQ2pFLE1BQU0scUJBQXFCLEdBQUcsSUFBSSxDQUFDLEVBQUUsRUFBRSxDQUFDO1FBQ3hDLE1BQU0sYUFBYSxHQUFHLElBQUksQ0FBQyxFQUFFLEVBQUUsQ0FBQztRQUVoQyxNQUFNLFNBQVMsR0FBRyxNQUFNLENBQ3RCLG9CQUFDLHVCQUF1QixJQUN0QixPQUFPLEVBQUUsRUFBRSxTQUFTLEVBQUUsaUJBQWlCLEVBQUUsS0FBSyxFQUFFLEVBQUUsT0FBTyxFQUFFLE9BQU8sRUFBRSxFQUFFLEVBQ3RFLGVBQWUsRUFBRSxxQkFBcUI7WUFFdEMsb0JBQUMsa0JBQWtCLElBQUMsT0FBTyxFQUFFLGFBQWEsR0FBSSxDQUN0QixDQUMzQixDQUFDO1FBQ0YsU0FBUyxDQUFDLEtBQUssQ0FBQyxNQUFNLFNBQVMsQ0FBQyxXQUFXLENBQUMsTUFBTSxDQUFFLENBQUMsQ0FBQztRQUN0RCxNQUFNLENBQUMscUJBQXFCLENBQUMsQ0FBQyxvQkFBb0IsQ0FBQztZQUNqRCxNQUFNLEVBQUUsU0FBUztZQUNqQixTQUFTLEVBQUUsaUJBQWlCO1lBQzVCLE1BQU0sRUFBRSxvQkFBb0I7WUFDNUIsS0FBSyxFQUFFO2dCQUNMLE9BQU8sRUFBRSxPQUFPO2dCQUNoQixTQUFTLEVBQUUsMEJBQTBCO2dCQUNyQyxnQ0FBZ0MsRUFBRSxPQUFPO2dCQUN6QyxxQkFBcUIsRUFBRSx5Q0FBeUM7YUFDakU7U0FDRixDQUFDLENBQUM7SUFDTCxDQUFDLENBQUMsQ0FBQztBQUNMLENBQUMsQ0FBQyxDQUFDIn0=