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

package/components/jsx/follow-plus-instant-alerts/index.js

@@ -61,14 +61,18 @@ const instantAlertsIconOff = ({ event, followPlusInstantAlerts }) => {
 	});
 };
 
-
 const sendModalToggleEvent = ({ followPlusInstantAlerts }) => {
 	const preferenceModalToggleEvent = new CustomEvent('myft.preference-modal.show-hide.toggle', { bubbles: true });
 	followPlusInstantAlerts.dispatchEvent(preferenceModalToggleEvent);
 	followPlusInstantAlerts.classList.toggle('n-myft-follow-button--instant-alerts--open');
-
 };
 
+const sendModalHideEvent = ({ event, followPlusInstantAlerts }) => {
+	if (event.target !== followPlusInstantAlerts) {
+		const preferenceModalHideEvent = new CustomEvent('myft.preference-modal.hide', { detail: {targetElement: event.target}, bubbles: true });
+		followPlusInstantAlerts.dispatchEvent(preferenceModalHideEvent);
+	}
+};
 
 export default () => {
 	/**
@@ -88,5 +92,8 @@ export default () => {
 	document.body.addEventListener('myft.user.followed.concept.load', (event) => instantAlertsIconLoad({event, followPlusInstantAlerts}));
 
 	document.body.addEventListener('myft.user.followed.concept.update', (event) => instantAlertsIconUpdate({event, followPlusInstantAlerts}));
+
 	document.body.addEventListener('myft.user.followed.concept.remove', (event) => instantAlertsIconOff({ event, followPlusInstantAlerts }));
+
+	document.addEventListener('click', (event) => sendModalHideEvent({event, followPlusInstantAlerts}));
 };

package/components/jsx/preferences-modal/index.js

@@ -75,6 +75,12 @@ const tracking = (conceptId) => {
 	document.body.dispatchEvent(trackingEvent);
 };
 
+const preferenceModalHide = ({ event, preferencesModal }) => {
+	if (!preferencesModal.contains(event.detail.targetElement)) {
+		preferencesModal.classList.remove('n-myft-ui__preferences-modal--show');
+	}
+};
+
 const preferenceModalShowAndHide = ({ event, preferencesModal, conceptId }) => {
 	preferencesModal.classList.toggle('n-myft-ui__preferences-modal--show');
 
@@ -245,6 +251,8 @@ export default () => {
 
 	document.addEventListener('myft.preference-modal.show-hide.toggle', event => preferenceModalShowAndHide({ event, preferencesModal, conceptId }));
 
+	document.addEventListener('myft.preference-modal.hide', event => preferenceModalHide({ event, preferencesModal }));
+
 	document.addEventListener('myft.user.preferred.preference.load', (event) => getAlertsPreferences({ event, preferencesModal }));
 
 	document.body.addEventListener('myft.user.followed.concept.load', (event) => setCheckboxForAlertConcept({ event, preferencesModal }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/n-myft-ui",
-  "version": "31.0.0",
+  "version": "31.0.1",
   "description": "Client side component for interaction with myft",
   "main": "server.js",
   "scripts": {