@financial-times/n-myft-ui 30.3.0 → 30.4.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/CODEOWNERS +1 -0
- package/build-state/npm-shrinkwrap.json +610 -24
- package/components/jsx/csrf-token/input.jsx +28 -0
- package/components/jsx/follow-plus-instant-alerts/follow-plus-instant-alerts.jsx +95 -0
- package/components/jsx/follow-plus-instant-alerts/index.js +76 -0
- package/components/jsx/follow-plus-instant-alerts/main.scss +64 -0
- package/components/jsx/preferences-modal/index.js +182 -0
- package/components/jsx/preferences-modal/main.scss +59 -0
- package/components/jsx/preferences-modal/preferences-modal.jsx +53 -0
- package/demos/app.js +5 -1
- package/demos/fixtures/jsx/follow-plus-instant-alerts.json +4 -0
- package/demos/fixtures/jsx/preferences-modal.json +3 -0
- package/demos/src/demo.scss +2 -0
- package/demos/templates/demo.html +78 -28
- package/myft/main.scss +3 -0
- package/myft/ui/myft-buttons/do-form-submit.js +9 -2
- package/package.json +5 -2
|
@@ -21,66 +21,116 @@
|
|
|
21
21
|
<div class="o-grid-container o-grid-container--snappy demo-container">
|
|
22
22
|
<h1>{{title}}</h1>
|
|
23
23
|
|
|
24
|
+
|
|
25
|
+
<section
|
|
26
|
+
id="example-component"
|
|
27
|
+
class="demo-section">
|
|
28
|
+
<div class="o-grid-row">
|
|
29
|
+
|
|
30
|
+
<div data-o-grid-colspan="12">
|
|
31
|
+
<h2>JSX components</h2>
|
|
32
|
+
|
|
33
|
+
{{#instantAlertsPreferencesModal}}
|
|
34
|
+
<h3
|
|
35
|
+
class="demo-section__title">
|
|
36
|
+
Instant alerts popup to manage preferences
|
|
37
|
+
</h3>
|
|
38
|
+
|
|
39
|
+
<div style="height:200px">
|
|
40
|
+
{{{renderReactComponent localPath="components/jsx/preferences-modal/preferences-modal.jsx" flags=@root.flags visible=true}}}
|
|
41
|
+
</div>
|
|
42
|
+
{{/instantAlertsPreferencesModal}}
|
|
43
|
+
|
|
44
|
+
{{#followPlusInstantAlerts}}
|
|
45
|
+
<h3
|
|
46
|
+
class="demo-section__title">
|
|
47
|
+
Follow plus instant alerts button (same appearance as normal follow button)
|
|
48
|
+
</h3>
|
|
49
|
+
|
|
50
|
+
{{{renderReactComponent localPath="components/jsx/follow-plus-instant-alerts/follow-plus-instant-alerts.jsx" conceptId=this.conceptId name=this.name flags=@root.flags}}}
|
|
51
|
+
{{/followPlusInstantAlerts}}
|
|
52
|
+
|
|
53
|
+
{{#followPlusInstantAlerts}}
|
|
54
|
+
<h3
|
|
55
|
+
class="demo-section__title">
|
|
56
|
+
Unfollow plus instant alerts button
|
|
57
|
+
</h3>
|
|
58
|
+
|
|
59
|
+
{{{renderReactComponent localPath="components/jsx/follow-plus-instant-alerts/follow-plus-instant-alerts.jsx" conceptId=this.conceptId name=this.name setFollowButtonStateToSelected=true cacheablePersonalisedUrl=true flags=@root.flags}}}
|
|
60
|
+
{{/followPlusInstantAlerts}}
|
|
61
|
+
|
|
62
|
+
{{#followPlusInstantAlerts}}
|
|
63
|
+
<h3
|
|
64
|
+
class="demo-section__title">
|
|
65
|
+
Unfollow plus instant alerts button (instant alerts turned on)
|
|
66
|
+
</h3>
|
|
67
|
+
|
|
68
|
+
{{{renderReactComponent localPath="components/jsx/follow-plus-instant-alerts/follow-plus-instant-alerts.jsx" conceptId=this.conceptId name=this.name setFollowButtonStateToSelected=true cacheablePersonalisedUrl=true setInstantAlertsOn=true flags=@root.flags}}}
|
|
69
|
+
{{/followPlusInstantAlerts}}
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
</section>
|
|
24
73
|
<section
|
|
25
74
|
id="follow-button"
|
|
26
75
|
class="demo-section">
|
|
27
76
|
<div class="o-grid-row">
|
|
28
77
|
<div data-o-grid-colspan="12">
|
|
78
|
+
<h2>Handlebars components</h2>
|
|
29
79
|
{{#followButton}}
|
|
30
|
-
<
|
|
80
|
+
<h3
|
|
31
81
|
class="demo-section__title">
|
|
32
82
|
Follow button
|
|
33
|
-
</
|
|
83
|
+
</h3>
|
|
34
84
|
{{> n-myft-ui/components/follow-button/follow-button}}
|
|
35
85
|
{{/followButton}}
|
|
36
86
|
|
|
37
87
|
{{#followButton}}
|
|
38
|
-
<
|
|
88
|
+
<h3
|
|
39
89
|
class="demo-section__title">
|
|
40
90
|
Unfollow button
|
|
41
|
-
</
|
|
91
|
+
</h3>
|
|
42
92
|
{{> n-myft-ui/components/follow-button/follow-button setFollowButtonStateToSelected=true }}
|
|
43
93
|
{{/followButton}}
|
|
44
94
|
|
|
45
95
|
{{#saveButton}}
|
|
46
|
-
<
|
|
96
|
+
<h3 class="demo-section__title">
|
|
47
97
|
Save button
|
|
48
|
-
</
|
|
98
|
+
</h3>
|
|
49
99
|
{{> n-myft-ui/components/save-for-later/save-for-later }}
|
|
50
100
|
{{/saveButton}}
|
|
51
101
|
|
|
52
102
|
{{#saveButton}}
|
|
53
|
-
<
|
|
103
|
+
<h3 class="demo-section__title">
|
|
54
104
|
Unsave button
|
|
55
|
-
</
|
|
105
|
+
</h3>
|
|
56
106
|
{{> n-myft-ui/components/save-for-later/save-for-later isSaved=true }}
|
|
57
107
|
{{/saveButton}}
|
|
58
108
|
|
|
59
109
|
{{#saveButton}}
|
|
60
|
-
<
|
|
110
|
+
<h3 class="demo-section__title">
|
|
61
111
|
Save button with icon
|
|
62
|
-
</
|
|
112
|
+
</h3>
|
|
63
113
|
{{> n-myft-ui/components/save-for-later/save-for-later saveButtonWithIcon=true }}
|
|
64
114
|
{{/saveButton}}
|
|
65
115
|
|
|
66
116
|
{{#saveButton}}
|
|
67
|
-
<
|
|
117
|
+
<h3 class="demo-section__title">
|
|
68
118
|
Unsave button with icon
|
|
69
|
-
</
|
|
119
|
+
</h3>
|
|
70
120
|
{{> n-myft-ui/components/save-for-later/save-for-later isSaved=true saveButtonWithIcon=true }}
|
|
71
121
|
{{/saveButton}}
|
|
72
122
|
|
|
73
|
-
<
|
|
123
|
+
<h3 class="demo-section__title">
|
|
74
124
|
Pin button
|
|
75
|
-
</
|
|
125
|
+
</h3>
|
|
76
126
|
{{#each pinButton}}
|
|
77
127
|
{{> n-myft-ui/components/pin-button/pin-button }}
|
|
78
128
|
{{/each}}
|
|
79
129
|
|
|
80
130
|
{{#instantAlert}}
|
|
81
|
-
<
|
|
131
|
+
<h3 class="demo-section__title">
|
|
82
132
|
Instant Alert
|
|
83
|
-
</
|
|
133
|
+
</h3>
|
|
84
134
|
{{> n-myft-ui/components/instant-alert/instant-alert }}
|
|
85
135
|
{{/instantAlert}}
|
|
86
136
|
|
|
@@ -93,9 +143,9 @@
|
|
|
93
143
|
class="demo-section">
|
|
94
144
|
<div class="o-grid-row">
|
|
95
145
|
<div data-o-grid-colspan="12">
|
|
96
|
-
<
|
|
146
|
+
<h3 class="demo-section__title">
|
|
97
147
|
Follow concept
|
|
98
|
-
</
|
|
148
|
+
</h3>
|
|
99
149
|
<p class="demo-section__description">
|
|
100
150
|
These are used in a group of many suggested follows/unfollows such as
|
|
101
151
|
the myFT page cold start.
|
|
@@ -322,9 +372,9 @@
|
|
|
322
372
|
class="demo-section">
|
|
323
373
|
<div class="o-grid-row">
|
|
324
374
|
<div data-o-grid-colspan="12">
|
|
325
|
-
<
|
|
375
|
+
<h3 class="demo-section__title">
|
|
326
376
|
Onboarding call to action
|
|
327
|
-
</
|
|
377
|
+
</h3>
|
|
328
378
|
|
|
329
379
|
<p class="demo-section__description">
|
|
330
380
|
Used on the myFT section of the homepage.
|
|
@@ -342,9 +392,9 @@
|
|
|
342
392
|
class="demo-section">
|
|
343
393
|
<div class="o-grid-row">
|
|
344
394
|
<div data-o-grid-colspan="12">
|
|
345
|
-
<
|
|
395
|
+
<h3 class="demo-section__title">
|
|
346
396
|
Concept pill
|
|
347
|
-
</
|
|
397
|
+
</h3>
|
|
348
398
|
<p class="demo-section__description">
|
|
349
399
|
Used for links to concepts (eg: on the email digest page)
|
|
350
400
|
</p>
|
|
@@ -574,9 +624,9 @@
|
|
|
574
624
|
class="demo-section">
|
|
575
625
|
<div class="o-grid-row">
|
|
576
626
|
<div data-o-grid-colspan="12">
|
|
577
|
-
<
|
|
627
|
+
<h3 class="demo-section__title">
|
|
578
628
|
Collections
|
|
579
|
-
</
|
|
629
|
+
</h3>
|
|
580
630
|
|
|
581
631
|
<p class="demo-section__description">
|
|
582
632
|
Curated collections of topics to follow.
|
|
@@ -596,9 +646,9 @@
|
|
|
596
646
|
class="demo-section">
|
|
597
647
|
<div class="o-grid-row">
|
|
598
648
|
<div data-o-grid-colspan="12">
|
|
599
|
-
<
|
|
649
|
+
<h3 class="demo-section__title">
|
|
600
650
|
Topic list
|
|
601
|
-
</
|
|
651
|
+
</h3>
|
|
602
652
|
|
|
603
653
|
<p class="demo-section__description">
|
|
604
654
|
A list of topics to follow
|
|
@@ -618,9 +668,9 @@
|
|
|
618
668
|
class="demo-section">
|
|
619
669
|
<div class="o-grid-row">
|
|
620
670
|
<div data-o-grid-colspan="12">
|
|
621
|
-
<
|
|
671
|
+
<h3 class="demo-section__title">
|
|
622
672
|
Digest promo
|
|
623
|
-
</
|
|
673
|
+
</h3>
|
|
624
674
|
{{> n-myft-ui/components/digest-promo/generic-promo-message }}
|
|
625
675
|
{{> n-myft-ui/components/digest-promo/promo-message }}
|
|
626
676
|
</div>
|
package/myft/main.scss
CHANGED
|
@@ -16,6 +16,9 @@ $n-notification-is-silent: false !default;
|
|
|
16
16
|
@import '../components/pin-button/main';
|
|
17
17
|
@import '../components/instant-alert/main';
|
|
18
18
|
|
|
19
|
+
@import '../components/jsx/follow-plus-instant-alerts/main';
|
|
20
|
+
@import '../components/jsx/preferences-modal/main';
|
|
21
|
+
|
|
19
22
|
// TODO Fix below
|
|
20
23
|
$spacing-unit: 20px;
|
|
21
24
|
|
|
@@ -43,14 +43,21 @@ function getTrackingInfo (formEl) {
|
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
export default function (relationshipName, formEl) {
|
|
46
|
+
const action = getAction(formEl);
|
|
47
|
+
|
|
46
48
|
if (formButtonIsDisabled(formEl)) {
|
|
47
49
|
return;
|
|
50
|
+
} else if (formEl.getAttribute('data-myft-ui-variant') === 'followPlusInstantAlerts' && action === 'remove') {
|
|
51
|
+
/**
|
|
52
|
+
* The follow + instant alerts button has a 2 click user journey for unfollows
|
|
53
|
+
* When the user clicks on a followed button it opens a menu modal
|
|
54
|
+
* Amongst other options the menu modal has a "remove" option within it
|
|
55
|
+
*/
|
|
56
|
+
return;
|
|
48
57
|
} else {
|
|
49
58
|
formEl.querySelector('button').setAttribute('disabled', '');
|
|
50
59
|
}
|
|
51
60
|
|
|
52
|
-
const action = getAction(formEl);
|
|
53
|
-
|
|
54
61
|
// note that where the actor is a user, the actorId may be null, in which case myFT client will fill
|
|
55
62
|
// in the userId from the session 😕
|
|
56
63
|
const actorId = formEl.getAttribute('data-actor-id');
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@financial-times/n-myft-ui",
|
|
3
|
-
"version": "30.
|
|
3
|
+
"version": "30.4.0",
|
|
4
4
|
"description": "Client side component for interaction with myft",
|
|
5
5
|
"main": "server.js",
|
|
6
6
|
"scripts": {
|
|
@@ -47,6 +47,7 @@
|
|
|
47
47
|
"css-loader": "^0.23.1",
|
|
48
48
|
"denodeify": "^1.2.1",
|
|
49
49
|
"eslint": "6.5.1",
|
|
50
|
+
"eslint-plugin-react": "^7.33.1",
|
|
50
51
|
"extract-css-block-webpack-plugin": "^1.3.0",
|
|
51
52
|
"fetch-mock": "^5.0.3",
|
|
52
53
|
"handlebars": "^4.0.6",
|
|
@@ -82,6 +83,7 @@
|
|
|
82
83
|
"sinon": "^7.1.0",
|
|
83
84
|
"sinon-chai": "^3.2.0",
|
|
84
85
|
"snyk": "^1.216.5",
|
|
86
|
+
"sucrase": "^3.34.0",
|
|
85
87
|
"webpack": "^4.46.0",
|
|
86
88
|
"webpack-cli": "^4.9.2"
|
|
87
89
|
},
|
|
@@ -96,7 +98,8 @@
|
|
|
96
98
|
"@financial-times/o-overlay": "^4.0.0",
|
|
97
99
|
"@financial-times/o-spacing": "^3.0.0",
|
|
98
100
|
"@financial-times/o-tooltip": "^5.2.4",
|
|
99
|
-
"n-ui-foundations": "^9.0.0"
|
|
101
|
+
"n-ui-foundations": "^9.0.0",
|
|
102
|
+
"react": "^16.14.0"
|
|
100
103
|
},
|
|
101
104
|
"dependencies": {
|
|
102
105
|
"date-fns": "2.16.1",
|