@financial-times/n-conversion-forms 35.0.0 → 36.0.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/.toolkitstate/ci.json +2 -2
- package/components/__snapshots__/ft-edit-registration-confirmation.spec.js.snap +480 -0
- package/components/ft-edit-registration-confirmation.jsx +141 -0
- package/components/ft-edit-registration-confirmation.spec.js +40 -0
- package/components/ft-edit-registration-confirmation.stories.js +27 -0
- package/components/index.js +1 -0
- package/dist/ft-edit-registration-confirmation.jsx +113 -0
- package/dist/index.js +7 -0
- package/main.scss +1 -0
- package/package.json +2 -2
- package/styles/ft-edit-registration-confirmation.scss +139 -0
package/.toolkitstate/ci.json
CHANGED
|
@@ -0,0 +1,480 @@
|
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
+
|
|
3
|
+
exports[`RegistrationConfirmation renders a continue reading button when an articleUrl is provided 1`] = `
|
|
4
|
+
<div class="ncf">
|
|
5
|
+
<div class="ncf__center ncf__margin">
|
|
6
|
+
<div class="ncf__icon ncf__icon--tick ncf__icon--large">
|
|
7
|
+
</div>
|
|
8
|
+
<h1 class="ncf__header ncf__header--confirmation">
|
|
9
|
+
Success
|
|
10
|
+
</h1>
|
|
11
|
+
<p class="ncf__FT_Edit_confirmation--message">
|
|
12
|
+
Thank you for registering for FT Edit.
|
|
13
|
+
</p>
|
|
14
|
+
<p class="ncf__FT_Edit_confirmation--message margin-top-x4 ">
|
|
15
|
+
Enjoy 30 days of great journalism. We’ve sent confirmation to test@example.com.
|
|
16
|
+
</p>
|
|
17
|
+
</div>
|
|
18
|
+
<div class="ncf__divider-horizontal">
|
|
19
|
+
</div>
|
|
20
|
+
<div class="ncf__FT_Edit_confirmation--links ncf__margin">
|
|
21
|
+
<div class="ncf__FT_Edit_confirmation--socials">
|
|
22
|
+
<b>
|
|
23
|
+
Breaking news alerts, direct to your lock screen
|
|
24
|
+
</b>
|
|
25
|
+
<p class="ncf__FT_Edit_confirmation--mobile">
|
|
26
|
+
Download our apps or follow us on our socials
|
|
27
|
+
</p>
|
|
28
|
+
<p class="ncf__FT_Edit_confirmation--desktop">
|
|
29
|
+
Find us in the app stores or follow us on our socials
|
|
30
|
+
</p>
|
|
31
|
+
<div class="ncf__FT_Edit_confirmation--badges">
|
|
32
|
+
<div class="o-social-follow"
|
|
33
|
+
aria-label="Follow on social media"
|
|
34
|
+
>
|
|
35
|
+
<a href="https://www.instagram.com/financialtimes"
|
|
36
|
+
class="o-social-follow-icon o-social-follow-icon--instagram"
|
|
37
|
+
target="_blank"
|
|
38
|
+
rel="noopener noreferrer"
|
|
39
|
+
data-trackable="register-social-instagram"
|
|
40
|
+
>
|
|
41
|
+
<span class="o-social-follow-icon__label">
|
|
42
|
+
on instagram
|
|
43
|
+
</span>
|
|
44
|
+
</a>
|
|
45
|
+
<a href="https://www.linkedin.com/company/financial-times"
|
|
46
|
+
class="o-social-follow-icon o-social-follow-icon--linkedin"
|
|
47
|
+
target="_blank"
|
|
48
|
+
rel="noopener noreferrer"
|
|
49
|
+
data-trackable="register-social-linkedin"
|
|
50
|
+
>
|
|
51
|
+
<span class="o-social-follow-icon__label">
|
|
52
|
+
on linkedin
|
|
53
|
+
</span>
|
|
54
|
+
</a>
|
|
55
|
+
<a href="https://twitter.com/FT"
|
|
56
|
+
class="o-social-follow-icon o-social-follow-icon--twitter"
|
|
57
|
+
target="_blank"
|
|
58
|
+
rel="noopener noreferrer"
|
|
59
|
+
data-trackable="register-social-twitter"
|
|
60
|
+
>
|
|
61
|
+
<span class="o-social-follow-icon__label">
|
|
62
|
+
on twitter
|
|
63
|
+
</span>
|
|
64
|
+
</a>
|
|
65
|
+
<a href="https://www.facebook.com/financialtimes"
|
|
66
|
+
class="o-social-follow-icon o-social-follow-icon--facebook"
|
|
67
|
+
target="_blank"
|
|
68
|
+
rel="noopener noreferrer"
|
|
69
|
+
data-trackable="register-social-facebook"
|
|
70
|
+
>
|
|
71
|
+
<span class="o-social-follow-icon__label">
|
|
72
|
+
on facebook
|
|
73
|
+
</span>
|
|
74
|
+
</a>
|
|
75
|
+
</div>
|
|
76
|
+
<div class="ncf__FT_Edit_confirmation--mobile ncf__FT_Edit_confirmation--app-badges"
|
|
77
|
+
aria-label="Download the app"
|
|
78
|
+
>
|
|
79
|
+
<a href="https://apps.apple.com/gb/app/ft-edit-by-the-financial-times/id1574510369"
|
|
80
|
+
class="ncf-icon ncf-icon--apple"
|
|
81
|
+
target="_blank"
|
|
82
|
+
rel="noopener noreferrer"
|
|
83
|
+
data-trackable="register-app-apple-ft-edit"
|
|
84
|
+
>
|
|
85
|
+
<span class="o-social-follow-icon__label">
|
|
86
|
+
on apple
|
|
87
|
+
</span>
|
|
88
|
+
</a>
|
|
89
|
+
</div>
|
|
90
|
+
</div>
|
|
91
|
+
</div>
|
|
92
|
+
<div class="ncf__FT_Edit_confirmation--alerts">
|
|
93
|
+
<b>
|
|
94
|
+
Set up email alerts in
|
|
95
|
+
<span aria-label="myFT"
|
|
96
|
+
class="ncf-icon ncf-icon--myft"
|
|
97
|
+
>
|
|
98
|
+
</span>
|
|
99
|
+
</b>
|
|
100
|
+
<p>
|
|
101
|
+
Choose the content you want to follow by personalising your alerts for the most important topics and additional newsletters
|
|
102
|
+
</p>
|
|
103
|
+
<a href="/myft"
|
|
104
|
+
class="margin-top-x4 ncf__button ncf__button--secondary"
|
|
105
|
+
data-trackable="register-personalise-my-alerts"
|
|
106
|
+
>
|
|
107
|
+
Personalise my alerts
|
|
108
|
+
</a>
|
|
109
|
+
</div>
|
|
110
|
+
</div>
|
|
111
|
+
<a href="/"
|
|
112
|
+
target="_parent"
|
|
113
|
+
class=" ncf__FT_Edit_confirmation--finish ncf__button ncf__button--submit"
|
|
114
|
+
data-trackable="register-finish-head-to-ft-edit-hub"
|
|
115
|
+
>
|
|
116
|
+
Explore our FT Edit hub
|
|
117
|
+
</a>
|
|
118
|
+
<a href="https://www.ft.com/content/9141eee7-825a-41d7-913d-49e8c12e76db"
|
|
119
|
+
target="_parent"
|
|
120
|
+
class=" ncf__FT_Edit_confirmation--finish-article-read ncf__button ncf__button--secondary reduce-bottom-spacing"
|
|
121
|
+
data-trackable="register-finish-head-to-article"
|
|
122
|
+
>
|
|
123
|
+
Continue reading
|
|
124
|
+
</a>
|
|
125
|
+
</div>
|
|
126
|
+
`;
|
|
127
|
+
|
|
128
|
+
exports[`RegistrationConfirmation renders an explore hub button always 1`] = `
|
|
129
|
+
<div class="ncf">
|
|
130
|
+
<div class="ncf__center ncf__margin">
|
|
131
|
+
<div class="ncf__icon ncf__icon--tick ncf__icon--large">
|
|
132
|
+
</div>
|
|
133
|
+
<h1 class="ncf__header ncf__header--confirmation">
|
|
134
|
+
Success
|
|
135
|
+
</h1>
|
|
136
|
+
<p class="ncf__FT_Edit_confirmation--message">
|
|
137
|
+
Thank you for registering for FT Edit.
|
|
138
|
+
</p>
|
|
139
|
+
<p class="ncf__FT_Edit_confirmation--message margin-top-x4 ">
|
|
140
|
+
Enjoy 30 days of great journalism. We’ve sent confirmation to test@example.com.
|
|
141
|
+
</p>
|
|
142
|
+
</div>
|
|
143
|
+
<div class="ncf__divider-horizontal">
|
|
144
|
+
</div>
|
|
145
|
+
<div class="ncf__FT_Edit_confirmation--links ncf__margin">
|
|
146
|
+
<div class="ncf__FT_Edit_confirmation--socials">
|
|
147
|
+
<b>
|
|
148
|
+
Breaking news alerts, direct to your lock screen
|
|
149
|
+
</b>
|
|
150
|
+
<p class="ncf__FT_Edit_confirmation--mobile">
|
|
151
|
+
Download our apps or follow us on our socials
|
|
152
|
+
</p>
|
|
153
|
+
<p class="ncf__FT_Edit_confirmation--desktop">
|
|
154
|
+
Find us in the app stores or follow us on our socials
|
|
155
|
+
</p>
|
|
156
|
+
<div class="ncf__FT_Edit_confirmation--badges">
|
|
157
|
+
<div class="o-social-follow"
|
|
158
|
+
aria-label="Follow on social media"
|
|
159
|
+
>
|
|
160
|
+
<a href="https://www.instagram.com/financialtimes"
|
|
161
|
+
class="o-social-follow-icon o-social-follow-icon--instagram"
|
|
162
|
+
target="_blank"
|
|
163
|
+
rel="noopener noreferrer"
|
|
164
|
+
data-trackable="register-social-instagram"
|
|
165
|
+
>
|
|
166
|
+
<span class="o-social-follow-icon__label">
|
|
167
|
+
on instagram
|
|
168
|
+
</span>
|
|
169
|
+
</a>
|
|
170
|
+
<a href="https://www.linkedin.com/company/financial-times"
|
|
171
|
+
class="o-social-follow-icon o-social-follow-icon--linkedin"
|
|
172
|
+
target="_blank"
|
|
173
|
+
rel="noopener noreferrer"
|
|
174
|
+
data-trackable="register-social-linkedin"
|
|
175
|
+
>
|
|
176
|
+
<span class="o-social-follow-icon__label">
|
|
177
|
+
on linkedin
|
|
178
|
+
</span>
|
|
179
|
+
</a>
|
|
180
|
+
<a href="https://twitter.com/FT"
|
|
181
|
+
class="o-social-follow-icon o-social-follow-icon--twitter"
|
|
182
|
+
target="_blank"
|
|
183
|
+
rel="noopener noreferrer"
|
|
184
|
+
data-trackable="register-social-twitter"
|
|
185
|
+
>
|
|
186
|
+
<span class="o-social-follow-icon__label">
|
|
187
|
+
on twitter
|
|
188
|
+
</span>
|
|
189
|
+
</a>
|
|
190
|
+
<a href="https://www.facebook.com/financialtimes"
|
|
191
|
+
class="o-social-follow-icon o-social-follow-icon--facebook"
|
|
192
|
+
target="_blank"
|
|
193
|
+
rel="noopener noreferrer"
|
|
194
|
+
data-trackable="register-social-facebook"
|
|
195
|
+
>
|
|
196
|
+
<span class="o-social-follow-icon__label">
|
|
197
|
+
on facebook
|
|
198
|
+
</span>
|
|
199
|
+
</a>
|
|
200
|
+
</div>
|
|
201
|
+
<div class="ncf__FT_Edit_confirmation--mobile ncf__FT_Edit_confirmation--app-badges"
|
|
202
|
+
aria-label="Download the app"
|
|
203
|
+
>
|
|
204
|
+
<a href="https://apps.apple.com/gb/app/ft-edit-by-the-financial-times/id1574510369"
|
|
205
|
+
class="ncf-icon ncf-icon--apple"
|
|
206
|
+
target="_blank"
|
|
207
|
+
rel="noopener noreferrer"
|
|
208
|
+
data-trackable="register-app-apple-ft-edit"
|
|
209
|
+
>
|
|
210
|
+
<span class="o-social-follow-icon__label">
|
|
211
|
+
on apple
|
|
212
|
+
</span>
|
|
213
|
+
</a>
|
|
214
|
+
</div>
|
|
215
|
+
</div>
|
|
216
|
+
</div>
|
|
217
|
+
<div class="ncf__FT_Edit_confirmation--alerts">
|
|
218
|
+
<b>
|
|
219
|
+
Set up email alerts in
|
|
220
|
+
<span aria-label="myFT"
|
|
221
|
+
class="ncf-icon ncf-icon--myft"
|
|
222
|
+
>
|
|
223
|
+
</span>
|
|
224
|
+
</b>
|
|
225
|
+
<p>
|
|
226
|
+
Choose the content you want to follow by personalising your alerts for the most important topics and additional newsletters
|
|
227
|
+
</p>
|
|
228
|
+
<a href="/myft"
|
|
229
|
+
class="margin-top-x4 ncf__button ncf__button--secondary"
|
|
230
|
+
data-trackable="register-personalise-my-alerts"
|
|
231
|
+
>
|
|
232
|
+
Personalise my alerts
|
|
233
|
+
</a>
|
|
234
|
+
</div>
|
|
235
|
+
</div>
|
|
236
|
+
<a href="http://thing-hub"
|
|
237
|
+
target="_parent"
|
|
238
|
+
class=" ncf__FT_Edit_confirmation--finish ncf__button ncf__button--submit"
|
|
239
|
+
data-trackable="register-finish-head-to-ft-edit-hub"
|
|
240
|
+
>
|
|
241
|
+
Explore our FT Edit hub
|
|
242
|
+
</a>
|
|
243
|
+
</div>
|
|
244
|
+
`;
|
|
245
|
+
|
|
246
|
+
exports[`RegistrationConfirmation renders with a custom email 1`] = `
|
|
247
|
+
<div class="ncf">
|
|
248
|
+
<div class="ncf__center ncf__margin">
|
|
249
|
+
<div class="ncf__icon ncf__icon--tick ncf__icon--large">
|
|
250
|
+
</div>
|
|
251
|
+
<h1 class="ncf__header ncf__header--confirmation">
|
|
252
|
+
Success
|
|
253
|
+
</h1>
|
|
254
|
+
<p class="ncf__FT_Edit_confirmation--message">
|
|
255
|
+
Thank you for registering for FT Edit.
|
|
256
|
+
</p>
|
|
257
|
+
<p class="ncf__FT_Edit_confirmation--message margin-top-x4 ">
|
|
258
|
+
Enjoy 30 days of great journalism. We’ve sent confirmation to test@example.com.
|
|
259
|
+
</p>
|
|
260
|
+
</div>
|
|
261
|
+
<div class="ncf__divider-horizontal">
|
|
262
|
+
</div>
|
|
263
|
+
<div class="ncf__FT_Edit_confirmation--links ncf__margin">
|
|
264
|
+
<div class="ncf__FT_Edit_confirmation--socials">
|
|
265
|
+
<b>
|
|
266
|
+
Breaking news alerts, direct to your lock screen
|
|
267
|
+
</b>
|
|
268
|
+
<p class="ncf__FT_Edit_confirmation--mobile">
|
|
269
|
+
Download our apps or follow us on our socials
|
|
270
|
+
</p>
|
|
271
|
+
<p class="ncf__FT_Edit_confirmation--desktop">
|
|
272
|
+
Find us in the app stores or follow us on our socials
|
|
273
|
+
</p>
|
|
274
|
+
<div class="ncf__FT_Edit_confirmation--badges">
|
|
275
|
+
<div class="o-social-follow"
|
|
276
|
+
aria-label="Follow on social media"
|
|
277
|
+
>
|
|
278
|
+
<a href="https://www.instagram.com/financialtimes"
|
|
279
|
+
class="o-social-follow-icon o-social-follow-icon--instagram"
|
|
280
|
+
target="_blank"
|
|
281
|
+
rel="noopener noreferrer"
|
|
282
|
+
data-trackable="register-social-instagram"
|
|
283
|
+
>
|
|
284
|
+
<span class="o-social-follow-icon__label">
|
|
285
|
+
on instagram
|
|
286
|
+
</span>
|
|
287
|
+
</a>
|
|
288
|
+
<a href="https://www.linkedin.com/company/financial-times"
|
|
289
|
+
class="o-social-follow-icon o-social-follow-icon--linkedin"
|
|
290
|
+
target="_blank"
|
|
291
|
+
rel="noopener noreferrer"
|
|
292
|
+
data-trackable="register-social-linkedin"
|
|
293
|
+
>
|
|
294
|
+
<span class="o-social-follow-icon__label">
|
|
295
|
+
on linkedin
|
|
296
|
+
</span>
|
|
297
|
+
</a>
|
|
298
|
+
<a href="https://twitter.com/FT"
|
|
299
|
+
class="o-social-follow-icon o-social-follow-icon--twitter"
|
|
300
|
+
target="_blank"
|
|
301
|
+
rel="noopener noreferrer"
|
|
302
|
+
data-trackable="register-social-twitter"
|
|
303
|
+
>
|
|
304
|
+
<span class="o-social-follow-icon__label">
|
|
305
|
+
on twitter
|
|
306
|
+
</span>
|
|
307
|
+
</a>
|
|
308
|
+
<a href="https://www.facebook.com/financialtimes"
|
|
309
|
+
class="o-social-follow-icon o-social-follow-icon--facebook"
|
|
310
|
+
target="_blank"
|
|
311
|
+
rel="noopener noreferrer"
|
|
312
|
+
data-trackable="register-social-facebook"
|
|
313
|
+
>
|
|
314
|
+
<span class="o-social-follow-icon__label">
|
|
315
|
+
on facebook
|
|
316
|
+
</span>
|
|
317
|
+
</a>
|
|
318
|
+
</div>
|
|
319
|
+
<div class="ncf__FT_Edit_confirmation--mobile ncf__FT_Edit_confirmation--app-badges"
|
|
320
|
+
aria-label="Download the app"
|
|
321
|
+
>
|
|
322
|
+
<a href="https://apps.apple.com/gb/app/ft-edit-by-the-financial-times/id1574510369"
|
|
323
|
+
class="ncf-icon ncf-icon--apple"
|
|
324
|
+
target="_blank"
|
|
325
|
+
rel="noopener noreferrer"
|
|
326
|
+
data-trackable="register-app-apple-ft-edit"
|
|
327
|
+
>
|
|
328
|
+
<span class="o-social-follow-icon__label">
|
|
329
|
+
on apple
|
|
330
|
+
</span>
|
|
331
|
+
</a>
|
|
332
|
+
</div>
|
|
333
|
+
</div>
|
|
334
|
+
</div>
|
|
335
|
+
<div class="ncf__FT_Edit_confirmation--alerts">
|
|
336
|
+
<b>
|
|
337
|
+
Set up email alerts in
|
|
338
|
+
<span aria-label="myFT"
|
|
339
|
+
class="ncf-icon ncf-icon--myft"
|
|
340
|
+
>
|
|
341
|
+
</span>
|
|
342
|
+
</b>
|
|
343
|
+
<p>
|
|
344
|
+
Choose the content you want to follow by personalising your alerts for the most important topics and additional newsletters
|
|
345
|
+
</p>
|
|
346
|
+
<a href="/myft"
|
|
347
|
+
class="margin-top-x4 ncf__button ncf__button--secondary"
|
|
348
|
+
data-trackable="register-personalise-my-alerts"
|
|
349
|
+
>
|
|
350
|
+
Personalise my alerts
|
|
351
|
+
</a>
|
|
352
|
+
</div>
|
|
353
|
+
</div>
|
|
354
|
+
<a href="/"
|
|
355
|
+
target="_parent"
|
|
356
|
+
class=" ncf__FT_Edit_confirmation--finish ncf__button ncf__button--submit"
|
|
357
|
+
data-trackable="register-finish-head-to-ft-edit-hub"
|
|
358
|
+
>
|
|
359
|
+
Explore our FT Edit hub
|
|
360
|
+
</a>
|
|
361
|
+
</div>
|
|
362
|
+
`;
|
|
363
|
+
|
|
364
|
+
exports[`RegistrationConfirmation renders with default props 1`] = `
|
|
365
|
+
<div class="ncf">
|
|
366
|
+
<div class="ncf__center ncf__margin">
|
|
367
|
+
<div class="ncf__icon ncf__icon--tick ncf__icon--large">
|
|
368
|
+
</div>
|
|
369
|
+
<h1 class="ncf__header ncf__header--confirmation">
|
|
370
|
+
Success
|
|
371
|
+
</h1>
|
|
372
|
+
<p class="ncf__FT_Edit_confirmation--message">
|
|
373
|
+
Thank you for registering for FT Edit.
|
|
374
|
+
</p>
|
|
375
|
+
<p class="ncf__FT_Edit_confirmation--message margin-top-x4 ">
|
|
376
|
+
Enjoy 30 days of great journalism. We’ve sent confirmation to your email.
|
|
377
|
+
</p>
|
|
378
|
+
</div>
|
|
379
|
+
<div class="ncf__divider-horizontal">
|
|
380
|
+
</div>
|
|
381
|
+
<div class="ncf__FT_Edit_confirmation--links ncf__margin">
|
|
382
|
+
<div class="ncf__FT_Edit_confirmation--socials">
|
|
383
|
+
<b>
|
|
384
|
+
Breaking news alerts, direct to your lock screen
|
|
385
|
+
</b>
|
|
386
|
+
<p class="ncf__FT_Edit_confirmation--mobile">
|
|
387
|
+
Download our apps or follow us on our socials
|
|
388
|
+
</p>
|
|
389
|
+
<p class="ncf__FT_Edit_confirmation--desktop">
|
|
390
|
+
Find us in the app stores or follow us on our socials
|
|
391
|
+
</p>
|
|
392
|
+
<div class="ncf__FT_Edit_confirmation--badges">
|
|
393
|
+
<div class="o-social-follow"
|
|
394
|
+
aria-label="Follow on social media"
|
|
395
|
+
>
|
|
396
|
+
<a href="https://www.instagram.com/financialtimes"
|
|
397
|
+
class="o-social-follow-icon o-social-follow-icon--instagram"
|
|
398
|
+
target="_blank"
|
|
399
|
+
rel="noopener noreferrer"
|
|
400
|
+
data-trackable="register-social-instagram"
|
|
401
|
+
>
|
|
402
|
+
<span class="o-social-follow-icon__label">
|
|
403
|
+
on instagram
|
|
404
|
+
</span>
|
|
405
|
+
</a>
|
|
406
|
+
<a href="https://www.linkedin.com/company/financial-times"
|
|
407
|
+
class="o-social-follow-icon o-social-follow-icon--linkedin"
|
|
408
|
+
target="_blank"
|
|
409
|
+
rel="noopener noreferrer"
|
|
410
|
+
data-trackable="register-social-linkedin"
|
|
411
|
+
>
|
|
412
|
+
<span class="o-social-follow-icon__label">
|
|
413
|
+
on linkedin
|
|
414
|
+
</span>
|
|
415
|
+
</a>
|
|
416
|
+
<a href="https://twitter.com/FT"
|
|
417
|
+
class="o-social-follow-icon o-social-follow-icon--twitter"
|
|
418
|
+
target="_blank"
|
|
419
|
+
rel="noopener noreferrer"
|
|
420
|
+
data-trackable="register-social-twitter"
|
|
421
|
+
>
|
|
422
|
+
<span class="o-social-follow-icon__label">
|
|
423
|
+
on twitter
|
|
424
|
+
</span>
|
|
425
|
+
</a>
|
|
426
|
+
<a href="https://www.facebook.com/financialtimes"
|
|
427
|
+
class="o-social-follow-icon o-social-follow-icon--facebook"
|
|
428
|
+
target="_blank"
|
|
429
|
+
rel="noopener noreferrer"
|
|
430
|
+
data-trackable="register-social-facebook"
|
|
431
|
+
>
|
|
432
|
+
<span class="o-social-follow-icon__label">
|
|
433
|
+
on facebook
|
|
434
|
+
</span>
|
|
435
|
+
</a>
|
|
436
|
+
</div>
|
|
437
|
+
<div class="ncf__FT_Edit_confirmation--mobile ncf__FT_Edit_confirmation--app-badges"
|
|
438
|
+
aria-label="Download the app"
|
|
439
|
+
>
|
|
440
|
+
<a href="https://apps.apple.com/gb/app/ft-edit-by-the-financial-times/id1574510369"
|
|
441
|
+
class="ncf-icon ncf-icon--apple"
|
|
442
|
+
target="_blank"
|
|
443
|
+
rel="noopener noreferrer"
|
|
444
|
+
data-trackable="register-app-apple-ft-edit"
|
|
445
|
+
>
|
|
446
|
+
<span class="o-social-follow-icon__label">
|
|
447
|
+
on apple
|
|
448
|
+
</span>
|
|
449
|
+
</a>
|
|
450
|
+
</div>
|
|
451
|
+
</div>
|
|
452
|
+
</div>
|
|
453
|
+
<div class="ncf__FT_Edit_confirmation--alerts">
|
|
454
|
+
<b>
|
|
455
|
+
Set up email alerts in
|
|
456
|
+
<span aria-label="myFT"
|
|
457
|
+
class="ncf-icon ncf-icon--myft"
|
|
458
|
+
>
|
|
459
|
+
</span>
|
|
460
|
+
</b>
|
|
461
|
+
<p>
|
|
462
|
+
Choose the content you want to follow by personalising your alerts for the most important topics and additional newsletters
|
|
463
|
+
</p>
|
|
464
|
+
<a href="/myft"
|
|
465
|
+
class="margin-top-x4 ncf__button ncf__button--secondary"
|
|
466
|
+
data-trackable="register-personalise-my-alerts"
|
|
467
|
+
>
|
|
468
|
+
Personalise my alerts
|
|
469
|
+
</a>
|
|
470
|
+
</div>
|
|
471
|
+
</div>
|
|
472
|
+
<a href="/"
|
|
473
|
+
target="_parent"
|
|
474
|
+
class=" ncf__FT_Edit_confirmation--finish ncf__button ncf__button--submit"
|
|
475
|
+
data-trackable="register-finish-head-to-ft-edit-hub"
|
|
476
|
+
>
|
|
477
|
+
Explore our FT Edit hub
|
|
478
|
+
</a>
|
|
479
|
+
</div>
|
|
480
|
+
`;
|
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
|
|
4
|
+
/***
|
|
5
|
+
* This component has been created for a trial feature for the FT Edit app to be used inside
|
|
6
|
+
* next-subscribe. This can be removed after the trial. The trial is beginning May 2024, please
|
|
7
|
+
* reach out to light-apps channel if we dont reach out first, as to when this can be deleted.
|
|
8
|
+
*/
|
|
9
|
+
const EMAIL_DEFAULT_TEXT = 'your email';
|
|
10
|
+
|
|
11
|
+
const SOCIALS = [
|
|
12
|
+
{
|
|
13
|
+
name: 'instagram',
|
|
14
|
+
link: 'https://www.instagram.com/financialtimes',
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
name: 'linkedin',
|
|
18
|
+
link: 'https://www.linkedin.com/company/financial-times',
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
name: 'twitter',
|
|
22
|
+
link: 'https://twitter.com/FT',
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
name: 'facebook',
|
|
26
|
+
link: 'https://www.facebook.com/financialtimes',
|
|
27
|
+
},
|
|
28
|
+
];
|
|
29
|
+
|
|
30
|
+
export function FTEditRegistrationConfirmation({
|
|
31
|
+
email = EMAIL_DEFAULT_TEXT,
|
|
32
|
+
articleUrl = '',
|
|
33
|
+
hubUrl = '/',
|
|
34
|
+
}) {
|
|
35
|
+
return (
|
|
36
|
+
<div className="ncf">
|
|
37
|
+
<div className="ncf__center ncf__margin">
|
|
38
|
+
<div className="ncf__icon ncf__icon--tick ncf__icon--large"></div>
|
|
39
|
+
<h1 className="ncf__header ncf__header--confirmation">Success</h1>
|
|
40
|
+
<p className="ncf__FT_Edit_confirmation--message">
|
|
41
|
+
Thank you for registering for FT Edit.
|
|
42
|
+
</p>
|
|
43
|
+
<p className="ncf__FT_Edit_confirmation--message margin-top-x4 ">
|
|
44
|
+
Enjoy 30 days of great journalism. We’ve sent confirmation to {email}.
|
|
45
|
+
</p>
|
|
46
|
+
</div>
|
|
47
|
+
|
|
48
|
+
<div className="ncf__divider-horizontal" />
|
|
49
|
+
|
|
50
|
+
<div className="ncf__FT_Edit_confirmation--links ncf__margin">
|
|
51
|
+
<div className="ncf__FT_Edit_confirmation--socials">
|
|
52
|
+
<b>Breaking news alerts, direct to your lock screen</b>
|
|
53
|
+
<p className="ncf__FT_Edit_confirmation--mobile">
|
|
54
|
+
Download our apps or follow us on our socials
|
|
55
|
+
</p>
|
|
56
|
+
<p className="ncf__FT_Edit_confirmation--desktop">
|
|
57
|
+
Find us in the app stores or follow us on our socials
|
|
58
|
+
</p>
|
|
59
|
+
<div className="ncf__FT_Edit_confirmation--badges">
|
|
60
|
+
<div
|
|
61
|
+
className="o-social-follow"
|
|
62
|
+
aria-label="Follow on social media"
|
|
63
|
+
>
|
|
64
|
+
{SOCIALS.map(({ name, link }) => (
|
|
65
|
+
<a
|
|
66
|
+
key={name}
|
|
67
|
+
href={link}
|
|
68
|
+
className={`o-social-follow-icon o-social-follow-icon--${name}`}
|
|
69
|
+
target="_blank"
|
|
70
|
+
rel="noopener noreferrer"
|
|
71
|
+
data-trackable={`register-social-${name}`}
|
|
72
|
+
>
|
|
73
|
+
<span className="o-social-follow-icon__label">on {name}</span>
|
|
74
|
+
</a>
|
|
75
|
+
))}
|
|
76
|
+
</div>
|
|
77
|
+
<div
|
|
78
|
+
className="ncf__FT_Edit_confirmation--mobile ncf__FT_Edit_confirmation--app-badges"
|
|
79
|
+
aria-label="Download the app"
|
|
80
|
+
>
|
|
81
|
+
<a
|
|
82
|
+
key="apple-ft-edit"
|
|
83
|
+
href="https://apps.apple.com/gb/app/ft-edit-by-the-financial-times/id1574510369"
|
|
84
|
+
className={`ncf-icon ncf-icon--apple`}
|
|
85
|
+
target="_blank"
|
|
86
|
+
rel="noopener noreferrer"
|
|
87
|
+
data-trackable={`register-app-apple-ft-edit`}
|
|
88
|
+
>
|
|
89
|
+
<span className="o-social-follow-icon__label">on apple</span>
|
|
90
|
+
</a>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
</div>
|
|
94
|
+
<div className="ncf__FT_Edit_confirmation--alerts">
|
|
95
|
+
<b>
|
|
96
|
+
Set up email alerts in
|
|
97
|
+
<span aria-label="myFT" className="ncf-icon ncf-icon--myft" />
|
|
98
|
+
</b>
|
|
99
|
+
|
|
100
|
+
<p>
|
|
101
|
+
Choose the content you want to follow by personalising your alerts
|
|
102
|
+
for the most important topics and additional newsletters
|
|
103
|
+
</p>
|
|
104
|
+
<a
|
|
105
|
+
href="/myft"
|
|
106
|
+
className="margin-top-x4 ncf__button ncf__button--secondary"
|
|
107
|
+
data-trackable="register-personalise-my-alerts"
|
|
108
|
+
>
|
|
109
|
+
Personalise my alerts
|
|
110
|
+
</a>
|
|
111
|
+
</div>
|
|
112
|
+
</div>
|
|
113
|
+
|
|
114
|
+
<a
|
|
115
|
+
href={hubUrl}
|
|
116
|
+
target="_parent"
|
|
117
|
+
className=" ncf__FT_Edit_confirmation--finish ncf__button ncf__button--submit"
|
|
118
|
+
data-trackable="register-finish-head-to-ft-edit-hub"
|
|
119
|
+
>
|
|
120
|
+
Explore our FT Edit hub
|
|
121
|
+
</a>
|
|
122
|
+
|
|
123
|
+
{articleUrl && (
|
|
124
|
+
<a
|
|
125
|
+
href={articleUrl}
|
|
126
|
+
target="_parent"
|
|
127
|
+
className=" ncf__FT_Edit_confirmation--finish-article-read ncf__button ncf__button--secondary reduce-bottom-spacing"
|
|
128
|
+
data-trackable="register-finish-head-to-article"
|
|
129
|
+
>
|
|
130
|
+
Continue reading
|
|
131
|
+
</a>
|
|
132
|
+
)}
|
|
133
|
+
</div>
|
|
134
|
+
);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
FTEditRegistrationConfirmation.propTypes = {
|
|
138
|
+
email: PropTypes.string,
|
|
139
|
+
articleUrl: PropTypes.string,
|
|
140
|
+
hubUrl: PropTypes.string,
|
|
141
|
+
};
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { FTEditRegistrationConfirmation } from './index';
|
|
2
|
+
import { expectToRenderCorrectly } from '../test-jest/helpers/expect-to-render-correctly';
|
|
3
|
+
|
|
4
|
+
/***
|
|
5
|
+
* This component has been created for a trial feature for the FT Edit app to be used inside
|
|
6
|
+
* next-subscribe. This can be removed after the trial. The trial is beginning May 2024, please
|
|
7
|
+
* reach out to light-apps channel if we dont reach out first, as to when this can be deleted.
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
expect.extend(expectToRenderCorrectly);
|
|
11
|
+
|
|
12
|
+
describe('RegistrationConfirmation', () => {
|
|
13
|
+
it('renders with default props', () => {
|
|
14
|
+
const props = {};
|
|
15
|
+
|
|
16
|
+
expect(FTEditRegistrationConfirmation).toRenderCorrectly(props);
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
it('renders with a custom email', () => {
|
|
20
|
+
const props = { email: 'test@example.com' };
|
|
21
|
+
|
|
22
|
+
expect(FTEditRegistrationConfirmation).toRenderCorrectly(props);
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
it('renders an explore hub button always', () => {
|
|
26
|
+
const props = { email: 'test@example.com', hubUrl: 'http://thing-hub' };
|
|
27
|
+
|
|
28
|
+
expect(FTEditRegistrationConfirmation).toRenderCorrectly(props);
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
it('renders a continue reading button when an articleUrl is provided', () => {
|
|
32
|
+
const props = {
|
|
33
|
+
email: 'test@example.com',
|
|
34
|
+
articleUrl:
|
|
35
|
+
'https://www.ft.com/content/9141eee7-825a-41d7-913d-49e8c12e76db',
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
expect(FTEditRegistrationConfirmation).toRenderCorrectly(props);
|
|
39
|
+
});
|
|
40
|
+
});
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { FTEditRegistrationConfirmation } from './ft-edit-registration-confirmation';
|
|
3
|
+
|
|
4
|
+
/***
|
|
5
|
+
* This component has been created for a trial feature for the FT Edit app to be used inside
|
|
6
|
+
* next-subscribe. This can be removed after the trial. The trial is beginning May 2024, please
|
|
7
|
+
* reach out to light-apps channel if we dont reach out first, as to when this can be deleted.
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
export default {
|
|
11
|
+
title: 'FT Edit Registration Confirmation',
|
|
12
|
+
component: FTEditRegistrationConfirmation,
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
export const Basic = (args) => <FTEditRegistrationConfirmation {...args} />;
|
|
16
|
+
Basic.args = {
|
|
17
|
+
email: 'some@email.com',
|
|
18
|
+
hubUrl: 'https://ft-hub',
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
export const WithArticleUrl = (args) => (
|
|
22
|
+
<FTEditRegistrationConfirmation {...args} />
|
|
23
|
+
);
|
|
24
|
+
Basic.args = {
|
|
25
|
+
email: 'some@email.com',
|
|
26
|
+
articleUrl: 'http://read-this-article.com',
|
|
27
|
+
};
|
package/components/index.js
CHANGED
|
@@ -29,6 +29,7 @@ export { ErrorPage } from './error-page';
|
|
|
29
29
|
export { Fieldset } from './fieldset';
|
|
30
30
|
export { FirstName } from './first-name';
|
|
31
31
|
export { Form } from './form';
|
|
32
|
+
export { FTEditRegistrationConfirmation } from './ft-edit-registration-confirmation';
|
|
32
33
|
export { Industry } from './industry';
|
|
33
34
|
export { JobTitle } from './job-title';
|
|
34
35
|
export { PersonalTitle } from './personal-title';
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.FTEditRegistrationConfirmation = FTEditRegistrationConfirmation;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
10
|
+
/***
|
|
11
|
+
* This component has been created for a trial feature for the FT Edit app to be used inside
|
|
12
|
+
* next-subscribe. This can be removed after the trial. The trial is beginning May 2024, please
|
|
13
|
+
* reach out to light-apps channel if we dont reach out first, as to when this can be deleted.
|
|
14
|
+
*/
|
|
15
|
+
var EMAIL_DEFAULT_TEXT = 'your email';
|
|
16
|
+
var SOCIALS = [{
|
|
17
|
+
name: 'instagram',
|
|
18
|
+
link: 'https://www.instagram.com/financialtimes'
|
|
19
|
+
}, {
|
|
20
|
+
name: 'linkedin',
|
|
21
|
+
link: 'https://www.linkedin.com/company/financial-times'
|
|
22
|
+
}, {
|
|
23
|
+
name: 'twitter',
|
|
24
|
+
link: 'https://twitter.com/FT'
|
|
25
|
+
}, {
|
|
26
|
+
name: 'facebook',
|
|
27
|
+
link: 'https://www.facebook.com/financialtimes'
|
|
28
|
+
}];
|
|
29
|
+
function FTEditRegistrationConfirmation(_ref) {
|
|
30
|
+
var _ref$email = _ref.email,
|
|
31
|
+
email = _ref$email === void 0 ? EMAIL_DEFAULT_TEXT : _ref$email,
|
|
32
|
+
_ref$articleUrl = _ref.articleUrl,
|
|
33
|
+
articleUrl = _ref$articleUrl === void 0 ? '' : _ref$articleUrl,
|
|
34
|
+
_ref$hubUrl = _ref.hubUrl,
|
|
35
|
+
hubUrl = _ref$hubUrl === void 0 ? '/' : _ref$hubUrl;
|
|
36
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
37
|
+
className: "ncf"
|
|
38
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
39
|
+
className: "ncf__center ncf__margin"
|
|
40
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
41
|
+
className: "ncf__icon ncf__icon--tick ncf__icon--large"
|
|
42
|
+
}), /*#__PURE__*/_react["default"].createElement("h1", {
|
|
43
|
+
className: "ncf__header ncf__header--confirmation"
|
|
44
|
+
}, "Success"), /*#__PURE__*/_react["default"].createElement("p", {
|
|
45
|
+
className: "ncf__FT_Edit_confirmation--message"
|
|
46
|
+
}, "Thank you for registering for FT Edit."), /*#__PURE__*/_react["default"].createElement("p", {
|
|
47
|
+
className: "ncf__FT_Edit_confirmation--message margin-top-x4 "
|
|
48
|
+
}, "Enjoy 30 days of great journalism. We\u2019ve sent confirmation to ", email, ".")), /*#__PURE__*/_react["default"].createElement("div", {
|
|
49
|
+
className: "ncf__divider-horizontal"
|
|
50
|
+
}), /*#__PURE__*/_react["default"].createElement("div", {
|
|
51
|
+
className: "ncf__FT_Edit_confirmation--links ncf__margin"
|
|
52
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
53
|
+
className: "ncf__FT_Edit_confirmation--socials"
|
|
54
|
+
}, /*#__PURE__*/_react["default"].createElement("b", null, "Breaking news alerts, direct to your lock screen"), /*#__PURE__*/_react["default"].createElement("p", {
|
|
55
|
+
className: "ncf__FT_Edit_confirmation--mobile"
|
|
56
|
+
}, "Download our apps or follow us on our socials"), /*#__PURE__*/_react["default"].createElement("p", {
|
|
57
|
+
className: "ncf__FT_Edit_confirmation--desktop"
|
|
58
|
+
}, "Find us in the app stores or follow us on our socials"), /*#__PURE__*/_react["default"].createElement("div", {
|
|
59
|
+
className: "ncf__FT_Edit_confirmation--badges"
|
|
60
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
61
|
+
className: "o-social-follow",
|
|
62
|
+
"aria-label": "Follow on social media"
|
|
63
|
+
}, SOCIALS.map(function (_ref2) {
|
|
64
|
+
var name = _ref2.name,
|
|
65
|
+
link = _ref2.link;
|
|
66
|
+
return /*#__PURE__*/_react["default"].createElement("a", {
|
|
67
|
+
key: name,
|
|
68
|
+
href: link,
|
|
69
|
+
className: "o-social-follow-icon o-social-follow-icon--".concat(name),
|
|
70
|
+
target: "_blank",
|
|
71
|
+
rel: "noopener noreferrer",
|
|
72
|
+
"data-trackable": "register-social-".concat(name)
|
|
73
|
+
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
74
|
+
className: "o-social-follow-icon__label"
|
|
75
|
+
}, "on ", name));
|
|
76
|
+
})), /*#__PURE__*/_react["default"].createElement("div", {
|
|
77
|
+
className: "ncf__FT_Edit_confirmation--mobile ncf__FT_Edit_confirmation--app-badges",
|
|
78
|
+
"aria-label": "Download the app"
|
|
79
|
+
}, /*#__PURE__*/_react["default"].createElement("a", {
|
|
80
|
+
key: "apple-ft-edit",
|
|
81
|
+
href: "https://apps.apple.com/gb/app/ft-edit-by-the-financial-times/id1574510369",
|
|
82
|
+
className: "ncf-icon ncf-icon--apple",
|
|
83
|
+
target: "_blank",
|
|
84
|
+
rel: "noopener noreferrer",
|
|
85
|
+
"data-trackable": "register-app-apple-ft-edit"
|
|
86
|
+
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
87
|
+
className: "o-social-follow-icon__label"
|
|
88
|
+
}, "on apple"))))), /*#__PURE__*/_react["default"].createElement("div", {
|
|
89
|
+
className: "ncf__FT_Edit_confirmation--alerts"
|
|
90
|
+
}, /*#__PURE__*/_react["default"].createElement("b", null, "Set up email alerts in", /*#__PURE__*/_react["default"].createElement("span", {
|
|
91
|
+
"aria-label": "myFT",
|
|
92
|
+
className: "ncf-icon ncf-icon--myft"
|
|
93
|
+
})), /*#__PURE__*/_react["default"].createElement("p", null, "Choose the content you want to follow by personalising your alerts for the most important topics and additional newsletters"), /*#__PURE__*/_react["default"].createElement("a", {
|
|
94
|
+
href: "/myft",
|
|
95
|
+
className: "margin-top-x4 ncf__button ncf__button--secondary",
|
|
96
|
+
"data-trackable": "register-personalise-my-alerts"
|
|
97
|
+
}, "Personalise my alerts"))), /*#__PURE__*/_react["default"].createElement("a", {
|
|
98
|
+
href: hubUrl,
|
|
99
|
+
target: "_parent",
|
|
100
|
+
className: " ncf__FT_Edit_confirmation--finish ncf__button ncf__button--submit",
|
|
101
|
+
"data-trackable": "register-finish-head-to-ft-edit-hub"
|
|
102
|
+
}, "Explore our FT Edit hub"), articleUrl && /*#__PURE__*/_react["default"].createElement("a", {
|
|
103
|
+
href: articleUrl,
|
|
104
|
+
target: "_parent",
|
|
105
|
+
className: " ncf__FT_Edit_confirmation--finish-article-read ncf__button ncf__button--secondary reduce-bottom-spacing",
|
|
106
|
+
"data-trackable": "register-finish-head-to-article"
|
|
107
|
+
}, "Continue reading"));
|
|
108
|
+
}
|
|
109
|
+
FTEditRegistrationConfirmation.propTypes = {
|
|
110
|
+
email: _propTypes["default"].string,
|
|
111
|
+
articleUrl: _propTypes["default"].string,
|
|
112
|
+
hubUrl: _propTypes["default"].string
|
|
113
|
+
};
|
package/dist/index.js
CHANGED
|
@@ -183,6 +183,12 @@ Object.defineProperty(exports, "ErrorPage", {
|
|
|
183
183
|
return _errorPage.ErrorPage;
|
|
184
184
|
}
|
|
185
185
|
});
|
|
186
|
+
Object.defineProperty(exports, "FTEditRegistrationConfirmation", {
|
|
187
|
+
enumerable: true,
|
|
188
|
+
get: function get() {
|
|
189
|
+
return _ftEditRegistrationConfirmation.FTEditRegistrationConfirmation;
|
|
190
|
+
}
|
|
191
|
+
});
|
|
186
192
|
Object.defineProperty(exports, "Fieldset", {
|
|
187
193
|
enumerable: true,
|
|
188
194
|
get: function get() {
|
|
@@ -388,6 +394,7 @@ var _errorPage = require("./error-page");
|
|
|
388
394
|
var _fieldset = require("./fieldset");
|
|
389
395
|
var _firstName = require("./first-name");
|
|
390
396
|
var _form = require("./form");
|
|
397
|
+
var _ftEditRegistrationConfirmation = require("./ft-edit-registration-confirmation");
|
|
391
398
|
var _industry = require("./industry");
|
|
392
399
|
var _jobTitle = require("./job-title");
|
|
393
400
|
var _personalTitle = require("./personal-title");
|
package/main.scss
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@financial-times/n-conversion-forms",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "36.0.0",
|
|
4
4
|
"description": "Containing jsx components and styles for forms included on Accounts and Acqusition apps (next-signup, next-profile, next-retention, etc).",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
"webpack-cli": "^5.1.4"
|
|
82
82
|
},
|
|
83
83
|
"engines": {
|
|
84
|
-
"node": "
|
|
84
|
+
"node": "18.x",
|
|
85
85
|
"npm": "7.x || 8.x || 9.x"
|
|
86
86
|
},
|
|
87
87
|
"lint-staged": {
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
@import '@financial-times/o-social-follow/main';
|
|
2
|
+
@import '@financial-times/o-grid/main';
|
|
3
|
+
|
|
4
|
+
/***
|
|
5
|
+
* This component has been created for a trial feature for the FT Edit app to be used inside
|
|
6
|
+
* next-subscribe. This can be removed after the trial. The trial is beginning May 2024, please
|
|
7
|
+
* reach out to light-apps channel if we dont reach out first, as to when this can be deleted.
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
@include oSocialFollow(
|
|
11
|
+
$opts: (
|
|
12
|
+
'icons': (
|
|
13
|
+
'twitter',
|
|
14
|
+
'facebook',
|
|
15
|
+
'linkedin',
|
|
16
|
+
'instagram',
|
|
17
|
+
),
|
|
18
|
+
)
|
|
19
|
+
);
|
|
20
|
+
|
|
21
|
+
@mixin ncfConfirmation() {
|
|
22
|
+
&__FT_Edit_confirmation {
|
|
23
|
+
&--message {
|
|
24
|
+
max-width: 304px;
|
|
25
|
+
margin: auto;
|
|
26
|
+
margin-bottom: 12px;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
&--desktop {
|
|
30
|
+
@include oGridRespondTo($until: M) {
|
|
31
|
+
display: none;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
&--mobile {
|
|
36
|
+
@include oGridRespondTo(M) {
|
|
37
|
+
display: none;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
&--links {
|
|
42
|
+
display: grid;
|
|
43
|
+
grid-template-rows: 1fr 1fr;
|
|
44
|
+
gap: oSpacingByName('s4');
|
|
45
|
+
margin-top: oSpacingByName('s6');
|
|
46
|
+
|
|
47
|
+
@include oGridRespondTo(M) {
|
|
48
|
+
grid-template-rows: unset;
|
|
49
|
+
grid-template-columns: 1fr 1fr;
|
|
50
|
+
gap: oSpacingByName('s8');
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&--socials {
|
|
55
|
+
@include oGridRespondTo(M) {
|
|
56
|
+
padding: oSpacingByName('s6') oSpacingByName('s4');
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
&--badges {
|
|
61
|
+
@include oGridRespondTo($until: M) {
|
|
62
|
+
display: grid;
|
|
63
|
+
grid-template-columns: 1fr 1fr;
|
|
64
|
+
gap: oSpacingByName('s6');
|
|
65
|
+
margin: auto;
|
|
66
|
+
max-width: 256px;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
&--app-badges {
|
|
71
|
+
@include oGridRespondTo($until: M) {
|
|
72
|
+
display: flex;
|
|
73
|
+
flex-direction: column;
|
|
74
|
+
gap: 16px;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
&--alerts {
|
|
79
|
+
display: flex;
|
|
80
|
+
flex-direction: column;
|
|
81
|
+
padding: 24px 20px;
|
|
82
|
+
background-color: oColorsByName('white-60');
|
|
83
|
+
|
|
84
|
+
a {
|
|
85
|
+
color: oColorsByName('black-90');
|
|
86
|
+
border-color: currentColor;
|
|
87
|
+
position: sticky;
|
|
88
|
+
top: 100vh;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
&--finish {
|
|
93
|
+
display: block;
|
|
94
|
+
margin: 48px auto 0;
|
|
95
|
+
width: 100%;
|
|
96
|
+
|
|
97
|
+
@include oGridRespondTo(M) {
|
|
98
|
+
max-width: 260px;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
&--finish-article-read {
|
|
103
|
+
display: block;
|
|
104
|
+
margin: 12px auto 0px;
|
|
105
|
+
width: 100%;
|
|
106
|
+
|
|
107
|
+
@include oGridRespondTo(M) {
|
|
108
|
+
max-width: 260px;
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.ncf-icon::before {
|
|
115
|
+
content: '';
|
|
116
|
+
display: inline-block;
|
|
117
|
+
vertical-align: middle;
|
|
118
|
+
background-size: contain;
|
|
119
|
+
background-repeat: no-repeat;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.ncf-icon--myft::before {
|
|
123
|
+
margin-left: 0.5rem;
|
|
124
|
+
height: 1rem;
|
|
125
|
+
width: 3rem;
|
|
126
|
+
background-image: url('https://www.ft.com/__origami/service/image/v2/images/raw/ftlogo:brand-myft?format=svg&source=next-subscribe&tint=%2333302E%2C%2333302E&width=28&height=16');
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.ncf-icon--android::before {
|
|
130
|
+
height: 40px;
|
|
131
|
+
width: 136px;
|
|
132
|
+
background-image: url('https://www.ft.com/__origami/service/image/v2/images/raw/app-badge-v1%3Aandroid?source=next-subscribe');
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.ncf-icon--apple::before {
|
|
136
|
+
height: 40px;
|
|
137
|
+
width: 136px;
|
|
138
|
+
background-image: url('https://www.ft.com/__origami/service/image/v2/images/raw/app-badge-v1%3Aapple?format=svg&source=next-subscribe');
|
|
139
|
+
}
|