@financial-times/n-myft-ui 30.4.5 → 31.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (7) hide show
  1. package/.circleci/config.yml +11 -11
  2. package/.circleci/shared-helpers/helper-setup-heroku-cli +2 -2
  3. package/Makefile +8 -2
  4. package/build-state/npm-shrinkwrap.json +884 -871
  5. package/components/jsx/follow-plus-instant-alerts/index.js +24 -1
  6. package/components/jsx/preferences-modal/index.js +43 -10
  7. package/package.json +35 -33
package/components/jsx/follow-plus-instant-alerts/index.js CHANGED
@@ -44,16 +44,35 @@ const instantAlertsIconUpdate = ({ event, followPlusInstantAlerts }) => {
44
44
  toggleInstantAlertsClass({instantAlertsOn, followPlusInstantAlerts });
45
45
  };
46
46
 
47
+ const instantAlertsIconOff = ({ event, followPlusInstantAlerts }) => {
48
+ const modalConceptId = followPlusInstantAlerts.dataset.conceptId;
49
+ if (!event || !modalConceptId) {
50
+ return;
51
+ }
47
52
 
53
+ const currentConcept = event.detail.subject === modalConceptId;
54
+ if (!currentConcept) {
55
+ return;
56
+ }
48
57
 
58
+ toggleInstantAlertsClass({
59
+ instantAlertsOn: false,
60
+ followPlusInstantAlerts,
61
+ });
62
+ };
49
63
 
50
64
  const sendModalToggleEvent = ({ followPlusInstantAlerts }) => {
51
65
  const preferenceModalToggleEvent = new CustomEvent('myft.preference-modal.show-hide.toggle', { bubbles: true });
52
66
  followPlusInstantAlerts.dispatchEvent(preferenceModalToggleEvent);
53
67
  followPlusInstantAlerts.classList.toggle('n-myft-follow-button--instant-alerts--open');
54
-
55
68
  };
56
69
 
70
+ const sendModalHideEvent = ({ event, followPlusInstantAlerts }) => {
71
+ if (event.target !== followPlusInstantAlerts) {
72
+ const preferenceModalHideEvent = new CustomEvent('myft.preference-modal.hide', { detail: {targetElement: event.target}, bubbles: true });
73
+ followPlusInstantAlerts.dispatchEvent(preferenceModalHideEvent);
74
+ }
75
+ };
57
76
 
58
77
  export default () => {
59
78
  /**
@@ -73,4 +92,8 @@ export default () => {
73
92
  document.body.addEventListener('myft.user.followed.concept.load', (event) => instantAlertsIconLoad({event, followPlusInstantAlerts}));
74
93
 
75
94
  document.body.addEventListener('myft.user.followed.concept.update', (event) => instantAlertsIconUpdate({event, followPlusInstantAlerts}));
95
+
96
+ document.body.addEventListener('myft.user.followed.concept.remove', (event) => instantAlertsIconOff({ event, followPlusInstantAlerts }));
97
+
98
+ document.addEventListener('click', (event) => sendModalHideEvent({event, followPlusInstantAlerts}));
76
99
  };
package/components/jsx/preferences-modal/index.js CHANGED
@@ -45,6 +45,16 @@ const positionModal = ({ event, preferencesModal } = {}) => {
45
45
  }
46
46
  };
47
47
 
48
+ const toggleCheckboxStatus = ({ instantAlertsCheckbox, isChecked }) => {
49
+ if (isChecked) {
50
+ instantAlertsCheckbox.dataset.trackable = 'pop-up-box|set-instant-alert-off';
51
+ instantAlertsCheckbox.checked = true;
52
+ } else {
53
+ instantAlertsCheckbox.dataset.trackable = 'pop-up-box|set-instant-alert-on';
54
+ instantAlertsCheckbox.checked = false;
55
+ }
56
+ }
57
+
48
58
  const tracking = (conceptId) => {
49
59
  const trackingData = {
50
60
  category: 'component',
@@ -65,6 +75,12 @@ const tracking = (conceptId) => {
65
75
  document.body.dispatchEvent(trackingEvent);
66
76
  };
67
77
 
78
+ const preferenceModalHide = ({ event, preferencesModal }) => {
79
+ if (!preferencesModal.contains(event.detail.targetElement)) {
80
+ preferencesModal.classList.remove('n-myft-ui__preferences-modal--show');
81
+ }
82
+ };
83
+
68
84
  const preferenceModalShowAndHide = ({ event, preferencesModal, conceptId }) => {
69
85
  preferencesModal.classList.toggle('n-myft-ui__preferences-modal--show');
70
86
 
@@ -88,7 +104,6 @@ const removeTopic = async ({ event, conceptId, preferencesModal }) => {
88
104
  try {
89
105
  await myFtClient.remove('user', null, 'followed', 'concept', conceptId, { token: csrfToken });
90
106
  preferenceModalShowAndHide({ preferencesModal });
91
-
92
107
  } catch (error) {
93
108
  renderError({ message: 'Sorry, we are unable to remove this topic. Please try again later or try from <a href="/myft">myFT</a>', preferencesModal });
94
109
  }
@@ -144,13 +159,11 @@ const setCheckboxForAlertConcept = ({ event, preferencesModal }) => {
144
159
  // 2. the said concept has instant alert enabled
145
160
  // if so, check the checkbox within the modal
146
161
  const currentConcept = event.detail.items.find(item => item && item.uuid === conceptId);
147
- if (currentConcept && currentConcept._rel && currentConcept._rel.instant) {
148
- instantAlertsCheckbox.dataset.trackable = 'pop-up-box|set-instant-alert-off';
149
- instantAlertsCheckbox.checked = true;
150
- } else {
151
- instantAlertsCheckbox.dataset.trackable = 'pop-up-box|set-instant-alert-on';
152
- instantAlertsCheckbox.checked = false;
153
- }
162
+ const isChecked = currentConcept && currentConcept._rel && currentConcept._rel.instant;
163
+ toggleCheckboxStatus({
164
+ instantAlertsCheckbox,
165
+ isChecked,
166
+ });
154
167
  };
155
168
 
156
169
  const toggleInstantAlertsPreference = async ({ event, conceptId, preferencesModal }) => {
@@ -166,11 +179,13 @@ const toggleInstantAlertsPreference = async ({ event, conceptId, preferencesModa
166
179
  token: csrfToken
167
180
  };
168
181
 
182
+ toggleCheckboxStatus({
183
+ instantAlertsCheckbox,
184
+ isChecked: instantAlertsCheckbox.checked,
185
+ });
169
186
  if (instantAlertsCheckbox.checked) {
170
- instantAlertsCheckbox.dataset.trackable = 'pop-up-box|set-instant-alert-off';
171
187
  data._rel = {instant: 'true'};
172
188
  } else {
173
- instantAlertsCheckbox.dataset.trackable = 'pop-up-box|set-instant-alert-on';
174
189
  data._rel = {instant: 'false'};
175
190
  }
176
191
 
@@ -190,6 +205,21 @@ const toggleInstantAlertsPreference = async ({ event, conceptId, preferencesModa
190
205
  instantAlertsCheckbox.removeAttribute('disabled');
191
206
  };
192
207
 
208
+ const setCheckboxForAlertConceptToOff = ({ event, preferencesModal }) => {
209
+ const conceptId = preferencesModal.dataset.conceptId;
210
+ const instantAlertsCheckbox = preferencesModal.querySelector('[data-component-id="myft-preferences-modal-checkbox"]');
211
+
212
+ const currentConcept = event.detail.subject === conceptId;
213
+ if (!currentConcept) {
214
+ return;
215
+ }
216
+
217
+ toggleCheckboxStatus({
218
+ instantAlertsCheckbox,
219
+ isChecked: false,
220
+ });
221
+ }
222
+
193
223
  export default () => {
194
224
  /**
195
225
  * This feature is part of a test
@@ -221,7 +251,10 @@ export default () => {
221
251
 
222
252
  document.addEventListener('myft.preference-modal.show-hide.toggle', event => preferenceModalShowAndHide({ event, preferencesModal, conceptId }));
223
253
 
254
+ document.addEventListener('myft.preference-modal.hide', event => preferenceModalHide({ event, preferencesModal }));
255
+
224
256
  document.addEventListener('myft.user.preferred.preference.load', (event) => getAlertsPreferences({ event, preferencesModal }));
225
257
 
226
258
  document.body.addEventListener('myft.user.followed.concept.load', (event) => setCheckboxForAlertConcept({ event, preferencesModal }));
259
+ document.body.addEventListener('myft.user.followed.concept.remove', (event) => setCheckboxForAlertConceptToOff({ event, preferencesModal }));
227
260
  };
package/package.json CHANGED
@@ -1,13 +1,12 @@
1
1
  {
2
2
  "name": "@financial-times/n-myft-ui",
3
- "version": "30.4.5",
3
+ "version": "31.0.1",
4
4
  "description": "Client side component for interaction with myft",
5
5
  "main": "server.js",
6
6
  "scripts": {
7
7
  "test": "echo \"Error: no test specified\" && exit 1",
8
8
  "commit": "commit-wizard",
9
- "prepare": "npx snyk protect || npx snyk protect -d || true",
10
- "preinstall": "[ \"$INIT_CWD\" != \"$PWD\" ] || npm_config_yes=true npx check-engine"
9
+ "prepare": "npx snyk protect || npx snyk protect -d || true"
11
10
  },
12
11
  "repository": {
13
12
  "type": "git",
@@ -20,48 +19,48 @@
20
19
  },
21
20
  "homepage": "https://github.com/Financial-Times/n-myft-ui#readme",
22
21
  "devDependencies": {
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
- "@financial-times/n-gage": "^8.3.2",
22
+ "@financial-times/dotcom-build-base": "^8.2.1",
23
+ "@financial-times/dotcom-build-code-splitting": "^8.2.1",
24
+ "@financial-times/dotcom-build-js": "^8.2.1",
25
+ "@financial-times/dotcom-build-sass": "^8.2.1",
26
+ "@financial-times/dotcom-server-handlebars": "^8.2.1",
27
+ "@financial-times/n-express": "^28.0.3",
28
+ "@financial-times/n-gage": "^9.0.1",
30
29
  "ascii-table": "0.0.9",
31
30
  "autoprefixer": "9.7.0",
32
31
  "aws-sdk-mock": "4.5.0",
33
32
  "babel-cli": "^6.26.0",
34
- "babel-core": "^6.2.1",
33
+ "babel-core": "^6.26.3",
35
34
  "babel-loader": "7.1.4",
36
35
  "babel-plugin-add-module-exports": "^0.3.0",
37
36
  "babel-plugin-transform-async-to-generator": "^6.24.1",
38
- "babel-plugin-transform-es2015-classes": "^6.8.0",
39
- "babel-plugin-transform-es2015-modules-commonjs": "^6.5.2",
37
+ "babel-plugin-transform-es2015-classes": "^6.24.1",
38
+ "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
40
39
  "babel-plugin-transform-runtime": "^6.23.0",
41
40
  "babel-preset-env": "^1.7.0",
42
41
  "babel-preset-es2015": "^6.6.0",
43
42
  "babel-preset-react": "^6.24.1",
44
- "babel-runtime": "^6.9.2",
45
- "brotli": "^1.3.1",
46
- "chai": "4.2.0",
43
+ "babel-runtime": "^6.26.0",
44
+ "brotli": "^1.3.3",
45
+ "chai": "4.3.8",
47
46
  "chalk": "2.4.2",
48
- "check-engine": "^1.10.1",
47
+ "check-engine": "^1.12.0",
49
48
  "css-loader": "^0.23.1",
50
49
  "denodeify": "^1.2.1",
51
50
  "eslint": "6.5.1",
52
- "eslint-plugin-react": "^7.33.1",
51
+ "eslint-plugin-react": "^7.33.2",
53
52
  "extract-css-block-webpack-plugin": "^1.3.0",
54
53
  "fetch-mock": "^5.0.3",
55
- "handlebars": "^4.0.6",
56
- "handlebars-loader": "^1.4.0",
54
+ "handlebars": "^4.7.8",
55
+ "handlebars-loader": "^1.7.3",
57
56
  "http-server": "^0.11.1",
58
57
  "hyperons": "^0.4.1",
59
58
  "imports-loader": "0.8.0",
60
59
  "inject-loader": "^4.0.1",
61
60
  "karma": "4.4.1",
62
- "karma-browserstack-launcher": "1.5.1",
61
+ "karma-browserstack-launcher": "1.6.0",
63
62
  "karma-chai": "^0.1.0",
64
- "karma-chrome-launcher": "3.1.0",
63
+ "karma-chrome-launcher": "3.2.0",
65
64
  "karma-firefox-launcher": "^1.0.0",
66
65
  "karma-html-reporter": "^0.2.6",
67
66
  "karma-mocha": "^1.3.0",
@@ -71,22 +70,23 @@
71
70
  "karma-viewport": "^1.0.9",
72
71
  "karma-webpack": "^4.0.2",
73
72
  "lintspaces-cli": "^0.7.0",
74
- "lolex": "5.1.1",
73
+ "lolex": "5.1.2",
75
74
  "mocha": "6.2.2",
76
75
  "mockery": "2.1.0",
77
76
  "node-fetch": "2.6.0",
78
77
  "nodemon": "^1.9.2",
79
- "npm-prepublish": "^1.2.1",
80
- "pa11y-ci": "^2.1.1",
78
+ "npm-prepublish": "^1.2.3",
79
+ "pa11y-ci": "^3.0.1",
81
80
  "postcss-loader": "^0.9.1",
81
+ "puppeteer": "^18.2.1",
82
82
  "regenerator-runtime": "^0.13.3",
83
- "sass": "^1.51.0",
83
+ "sass": "^1.68.0",
84
84
  "semver": "6.3.0",
85
85
  "sinon": "^7.1.0",
86
- "sinon-chai": "^3.2.0",
87
- "snyk": "^1.216.5",
86
+ "sinon-chai": "^3.7.0",
87
+ "snyk": "^1.1227.0",
88
88
  "sucrase": "^3.34.0",
89
- "webpack": "^4.46.0",
89
+ "webpack": "^4.47.0",
90
90
  "webpack-cli": "^4.9.2"
91
91
  },
92
92
  "peerDependencies": {
@@ -104,7 +104,7 @@
104
104
  "react": "^16.14.0"
105
105
  },
106
106
  "dependencies": {
107
- "date-fns": "2.16.1",
107
+ "date-fns": "2.30.0",
108
108
  "fetchres": "^1.7.2",
109
109
  "form-serialize": "^0.7.2",
110
110
  "ftdomdelegate": "^4.0.6",
@@ -114,12 +114,14 @@
114
114
  "ready-state": "^2.0.5",
115
115
  "superstore-sync": "^2.1.1"
116
116
  },
117
+ "overrides": {
118
+ "puppeteer": "$puppeteer"
119
+ },
117
120
  "volta": {
118
- "node": "16.14.2",
119
- "npm": "7.24.2"
121
+ "node": "18.18.0"
120
122
  },
121
123
  "engines": {
122
- "node": "16.x",
124
+ "node": "16.x || 18.x",
123
125
  "npm": "7.x || 8.x || 9.x"
124
126
  },
125
127
  "x-dash": {