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

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

@@ -9,6 +9,13 @@ const renderError = ({ message, preferencesModal }) => {
 	errorElement.innerHTML = message;
 };
 
+const removeError = ({ preferencesModal }) => {
+	renderError({
+		message: "",
+		preferencesModal,
+	});
+}
+
 /**
  * This preference modal is part of a test
  * Therefore we have built the positioning function to work within the known parameters of that test
@@ -75,6 +82,13 @@ 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');
+		removeError({ preferencesModal });
+	}
+};
+
 const preferenceModalShowAndHide = ({ event, preferencesModal, conceptId }) => {
 	preferencesModal.classList.toggle('n-myft-ui__preferences-modal--show');
 
@@ -85,23 +99,25 @@ const preferenceModalShowAndHide = ({ event, preferencesModal, conceptId }) => {
 
 	} else {
 		// Remove existing errors when hiding the modal
-		renderError({
-			message: '',
-			preferencesModal,
-		});
+		removeError({ preferencesModal });
 	}
 };
 
 const removeTopic = async ({ event, conceptId, preferencesModal }) => {
 	event.target.setAttribute('disabled', true);
 
+	// remove error message before attempt to remove topic
+	removeError({ preferencesModal });
+
 	try {
 		await myFtClient.remove('user', null, 'followed', 'concept', conceptId, { token: csrfToken });
 		preferenceModalShowAndHide({ preferencesModal });
 	} catch (error) {
-		renderError({ message: 'Sorry, we are unable to remove this topic. Please try again later or try from <a href="/myft">myFT</a>', preferencesModal });
+		renderError({
+			message: 'Sorry, we are unable to remove this topic. Please try again later or try from <a href="/myft">myFT</a>',
+			preferencesModal,
+		});
 	}
-
 	event.target.removeAttribute('disabled');
 };
 
@@ -169,6 +185,9 @@ const toggleInstantAlertsPreference = async ({ event, conceptId, preferencesModa
 
 	instantAlertsCheckbox.setAttribute('disabled', true);
 
+	// remove error message before attempt to toggle instant alert
+	removeError({ preferencesModal });
+
 	const data = {
 		token: csrfToken
 	};
@@ -188,7 +207,7 @@ const toggleInstantAlertsPreference = async ({ event, conceptId, preferencesModa
 	} catch (error) {
 		renderError({
 			message: 'Sorry, we are unable to change your instant alert preference. Please try again later or try from <a href="/myft">myFT</a>',
-			preferencesModal
+			preferencesModal,
 		});
 
 		instantAlertsCheckbox.checked = instantAlertsCheckbox.checked
@@ -245,6 +264,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/components/jsx/preferences-modal/main.scss

@@ -47,14 +47,39 @@
 	color: oColorsByName('claret-60');
 }
 
+.n-myft-ui__preferences-modal__remove-button:disabled {
+	opacity: 0.5;
+}
+
 .n-myft-ui__preferences-modal--show {
 	display: block;
 	visibility: visible;
 }
 
+// reference to the color/BG color of the error message
+// components/o-message/src/scss/_brand.scss#L21 in origami
 .n-myft-ui__preferences-modal-error {
 	display: block;
 	@include oTypographySans($scale: -1, $weight: 'regular', $style: 'normal');
-	color: oColorsByName('claret');
-	text-align: center;
+	color: oColorsMix('black', 'crimson', $percentage: 12.5);
+	background-color: oColorsMix('crimson', $percentage: 10);
+	text-align: left;
+	padding: 8px 12px;
+	margin-top: 16px;
+
+	// use opacity to enforce CSS transition
+	opacity: 1;
+	transition: opacity 0.5s;
+
+	a {
+		@include oTypographySans($scale: -1, $weight: 'semibold', $style: 'normal');
+		color: oColorsMix('black', 'crimson', $percentage: 12.5);
+		text-decoration-color: oColorsMix('black', 'crimson', $percentage: 12.5);
+	}
+}
+
+.n-myft-ui__preferences-modal-error:empty {
+	opacity: 0;
+	padding: 0;
+	margin-top: 0;
 }

package/package.json

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