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

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
@@ -78,6 +85,7 @@ const tracking = (conceptId) => {
 const preferenceModalHide = ({ event, preferencesModal }) => {
 	if (!preferencesModal.contains(event.detail.targetElement)) {
 		preferencesModal.classList.remove('n-myft-ui__preferences-modal--show');
+		removeError({ preferencesModal });
 	}
 };
 
@@ -91,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');
 };
 
@@ -175,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
 	};
@@ -194,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

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.1",
+  "version": "32.0.0",
   "description": "Client side component for interaction with myft",
   "main": "server.js",
   "scripts": {
@@ -101,7 +101,7 @@
     "@financial-times/o-spacing": "^3.0.0",
     "@financial-times/o-tooltip": "^5.2.4",
     "n-ui-foundations": "^9.0.0",
-    "react": "^16.14.0"
+    "react": "^17.0.2"
   },
   "dependencies": {
     "date-fns": "2.30.0",