@financial-times/n-myft-ui 30.2.3 → 30.4.0
Sign up to get free protection for your applications and to get access to all the features.
- package/.circleci/config.yml +6 -6
- package/CODEOWNERS +1 -0
- package/README.md +1 -1
- package/build-state/npm-shrinkwrap.json +1015 -558
- 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 +13 -10
|
@@ -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": {
|
|
@@ -20,12 +20,12 @@
|
|
|
20
20
|
},
|
|
21
21
|
"homepage": "https://github.com/Financial-Times/n-myft-ui#readme",
|
|
22
22
|
"devDependencies": {
|
|
23
|
-
"@financial-times/dotcom-build-base": "^
|
|
24
|
-
"@financial-times/dotcom-build-code-splitting": "^
|
|
25
|
-
"@financial-times/dotcom-build-js": "^
|
|
26
|
-
"@financial-times/dotcom-build-sass": "^
|
|
27
|
-
"@financial-times/dotcom-server-handlebars": "^
|
|
28
|
-
"@financial-times/n-express": "^
|
|
23
|
+
"@financial-times/dotcom-build-base": "^8.1.0",
|
|
24
|
+
"@financial-times/dotcom-build-code-splitting": "^8.1.0",
|
|
25
|
+
"@financial-times/dotcom-build-js": "^8.1.0",
|
|
26
|
+
"@financial-times/dotcom-build-sass": "^8.1.0",
|
|
27
|
+
"@financial-times/dotcom-server-handlebars": "^8.1.0",
|
|
28
|
+
"@financial-times/n-express": "^27.5.0",
|
|
29
29
|
"@financial-times/n-gage": "^8.3.2",
|
|
30
30
|
"ascii-table": "0.0.9",
|
|
31
31
|
"autoprefixer": "9.7.0",
|
|
@@ -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",
|
|
@@ -114,8 +117,8 @@
|
|
|
114
117
|
"npm": "7.24.2"
|
|
115
118
|
},
|
|
116
119
|
"engines": {
|
|
117
|
-
"node": "
|
|
118
|
-
"npm": "7.x || 8.x"
|
|
120
|
+
"node": "16.x",
|
|
121
|
+
"npm": "7.x || 8.x || 9.x"
|
|
119
122
|
},
|
|
120
123
|
"x-dash": {
|
|
121
124
|
"engine": {
|