@financial-times/n-myft-ui 28.0.2 → 28.1.0

package/build-state/npm-shrinkwrap.json

@@ -15,7 +15,7 @@
         "form-serialize": "^0.7.2",
         "ftdomdelegate": "^4.0.6",
         "js-cookie": "^2.2.1",
-        "next-myft-client": "^9.0.0",
+        "next-myft-client": "^10.1.0",
         "next-session-client": "^4.0.0",
         "superstore-sync": "^2.1.1"
       },
@@ -36,7 +36,7 @@
         "babel-plugin-transform-async-to-generator": "^6.24.1",
         "babel-plugin-transform-es2015-classes": "^6.8.0",
         "babel-plugin-transform-es2015-modules-commonjs": "^6.5.2",
-        "babel-plugin-transform-runtime": "^6.9.0",
+        "babel-plugin-transform-runtime": "^6.23.0",
         "babel-preset-env": "^1.7.0",
         "babel-preset-es2015": "^6.6.0",
         "babel-runtime": "^6.9.2",
@@ -91,13 +91,13 @@
       "peerDependencies": {
         "@financial-times/n-notification": "^8.2.2",
         "@financial-times/o-editorial-typography": "^2.3.2",
-        "@financial-times/o-errors": "^4.0.2",
+        "@financial-times/o-errors": "^5.0.0",
         "@financial-times/o-forms": "^9.4.0",
         "@financial-times/o-grid": "^6.1.1",
         "@financial-times/o-normalise": "^3.0.0",
         "@financial-times/o-overlay": "^4.0.0",
         "@financial-times/o-spacing": "^3.0.0",
-        "@financial-times/o-tooltip": "^5.0.0",
+        "@financial-times/o-tooltip": "^5.2.4",
         "@financial-times/o-topper": "^5.2.3",
         "n-ui-foundations": "^9.0.0"
       }
@@ -2899,12 +2899,15 @@
       }
     },
     "node_modules/@financial-times/o-errors": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/@financial-times/o-errors/-/o-errors-4.0.8.tgz",
-      "integrity": "sha512-hdVQqF4Fx9CcbxuurBGHekaJZ4a4wfGFmtp7fzr0f4Hdpc0gPZMONTfrKjXvJFu0Z4V+5HIRRWL9DAkMamp4FA==",
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/@financial-times/o-errors/-/o-errors-5.2.2.tgz",
+      "integrity": "sha512-27GaGSp6Wb3O66n1zPj4wIL1p8akutIMPttkZ2cq0K0SZcQ2rgb7MtfQ/E6YvMDCUapcCeAwAZ+HMkHEYef4+A==",
       "peer": true,
       "dependencies": {
-        "raven-js": "^3.14.0"
+        "raven-js": "^3.27.2"
+      },
+      "engines": {
+        "npm": "^7 || ^8"
       }
     },
     "node_modules/@financial-times/o-fonts": {
@@ -3028,9 +3031,9 @@
       }
     },
     "node_modules/@financial-times/o-tooltip": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/@financial-times/o-tooltip/-/o-tooltip-5.2.2.tgz",
-      "integrity": "sha512-JUklwHvNmEFXfqjc6Ft7jV5Rc3cTfqBbcnexMCOvWTr8BE3Xidbg6/VumLKhmS+MTmG4NFl5EgP4Kt2hLrAa1Q==",
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/@financial-times/o-tooltip/-/o-tooltip-5.2.4.tgz",
+      "integrity": "sha512-GXC320/zwTNvacG4PCHSwGBPb+3eWMw7pePUAw41iJ70Wjwy+H9aGbbQikWOiBCiSb6BohwImWOJ6RR0g1dReg==",
       "peer": true,
       "dependencies": {
         "ftdomdelegate": "^4.0.6"
@@ -3039,6 +3042,7 @@
         "npm": "^7 || ^8"
       },
       "peerDependencies": {
+        "@financial-times/o-brand": "^4.2.1",
         "@financial-times/o-grid": "^6.0.0",
         "@financial-times/o-icons": "^7.0.1",
         "@financial-times/o-normalise": "^3.0.0",
@@ -5030,7 +5034,7 @@
     "node_modules/babel-plugin-transform-runtime": {
       "version": "6.23.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-runtime/-/babel-plugin-transform-runtime-6.23.0.tgz",
-      "integrity": "sha1-iEkNRGUC6puOfvsP4J7E2ZR5se4=",
+      "integrity": "sha512-cpGMVC1vt/772y3jx1gwSaTitQVZuFDlllgreMsZ+rTYC6jlYXRyf5FQOgSnckOiA5QmzbXTyBY2A5AmZXF1fA==",
       "dev": true,
       "dependencies": {
         "babel-runtime": "^6.22.0"
@@ -14261,13 +14265,13 @@
       }
     },
     "node_modules/next-myft-client": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/next-myft-client/-/next-myft-client-9.0.0.tgz",
-      "integrity": "sha512-TxLrNdPY0q60S5P4pGrqqQvG8gukr7QNAMaDUg7mraGY39GeHyyoHl4WW+hdOJf4N2rVY4ydqCRs6SEbf36tQg==",
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/next-myft-client/-/next-myft-client-10.1.0.tgz",
+      "integrity": "sha512-PqnNE1gxV00yVv6pA+1jWaySJkonQBUx2uWchPNGNcB20SzVmYleSWLeD3bdxdNOD5Tpy8DDl58CEQrKja7bqA==",
       "hasInstallScript": true,
       "dependencies": {
         "black-hole-stream": "0.0.1",
-        "fetchres": "1.7.2",
+        "fetchres": "^1.7.2",
         "next-session-client": "^4.0.0"
       },
       "engines": {
@@ -25500,12 +25504,12 @@
       "requires": {}
     },
     "@financial-times/o-errors": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/@financial-times/o-errors/-/o-errors-4.0.8.tgz",
-      "integrity": "sha512-hdVQqF4Fx9CcbxuurBGHekaJZ4a4wfGFmtp7fzr0f4Hdpc0gPZMONTfrKjXvJFu0Z4V+5HIRRWL9DAkMamp4FA==",
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/@financial-times/o-errors/-/o-errors-5.2.2.tgz",
+      "integrity": "sha512-27GaGSp6Wb3O66n1zPj4wIL1p8akutIMPttkZ2cq0K0SZcQ2rgb7MtfQ/E6YvMDCUapcCeAwAZ+HMkHEYef4+A==",
       "peer": true,
       "requires": {
-        "raven-js": "^3.14.0"
+        "raven-js": "^3.27.2"
       }
     },
     "@financial-times/o-fonts": {
@@ -25568,9 +25572,9 @@
       "requires": {}
     },
     "@financial-times/o-tooltip": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/@financial-times/o-tooltip/-/o-tooltip-5.2.2.tgz",
-      "integrity": "sha512-JUklwHvNmEFXfqjc6Ft7jV5Rc3cTfqBbcnexMCOvWTr8BE3Xidbg6/VumLKhmS+MTmG4NFl5EgP4Kt2hLrAa1Q==",
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/@financial-times/o-tooltip/-/o-tooltip-5.2.4.tgz",
+      "integrity": "sha512-GXC320/zwTNvacG4PCHSwGBPb+3eWMw7pePUAw41iJ70Wjwy+H9aGbbQikWOiBCiSb6BohwImWOJ6RR0g1dReg==",
       "peer": true,
       "requires": {
         "ftdomdelegate": "^4.0.6"
@@ -27304,7 +27308,7 @@
     "babel-plugin-transform-runtime": {
       "version": "6.23.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-runtime/-/babel-plugin-transform-runtime-6.23.0.tgz",
-      "integrity": "sha1-iEkNRGUC6puOfvsP4J7E2ZR5se4=",
+      "integrity": "sha512-cpGMVC1vt/772y3jx1gwSaTitQVZuFDlllgreMsZ+rTYC6jlYXRyf5FQOgSnckOiA5QmzbXTyBY2A5AmZXF1fA==",
       "dev": true,
       "requires": {
         "babel-runtime": "^6.22.0"
@@ -34766,12 +34770,12 @@
       }
     },
     "next-myft-client": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/next-myft-client/-/next-myft-client-9.0.0.tgz",
-      "integrity": "sha512-TxLrNdPY0q60S5P4pGrqqQvG8gukr7QNAMaDUg7mraGY39GeHyyoHl4WW+hdOJf4N2rVY4ydqCRs6SEbf36tQg==",
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/next-myft-client/-/next-myft-client-10.1.0.tgz",
+      "integrity": "sha512-PqnNE1gxV00yVv6pA+1jWaySJkonQBUx2uWchPNGNcB20SzVmYleSWLeD3bdxdNOD5Tpy8DDl58CEQrKja7bqA==",
       "requires": {
         "black-hole-stream": "0.0.1",
-        "fetchres": "1.7.2",
+        "fetchres": "^1.7.2",
         "next-session-client": "^4.0.0"
       }
     },

package/components/save-for-later/save-for-later.html

@@ -4,7 +4,7 @@
 	data-myft-ui="saved"
 	action="/myft/save/{{contentId}}"
 	data-js-action="/__myft/api/core/saved/content/{{contentId}}?method=put"
-	{{#ifEquals @root.flags.professorLists 'variant'}}data-myft-ui-variant="createListAndSaveArticleVariant"{{/ifEquals}}>
+	{{#if @root.flags.manageArticleLists}}data-myft-ui-save-new="manageArticleLists"{{/if}}>
 	{{> n-myft-ui/components/csrf-token/input}}
 	<div
 		class="n-myft-ui__announcement o-normalise-visually-hidden"

package/myft/ui/lists.js

@@ -179,8 +179,8 @@ function handleArticleSaved (contentId) {
 function openCreateListAndAddArticleOverlay (contentId) {
 	return myFtClient.getAll('created', 'list')
 		.then(createdLists => createdLists.filter(list => !list.isRedirect))
-		.then(createdLists => {
-			return !createdLists.length ? showCreateListAndAddArticleOverlay(contentId) : showArticleSavedOverlay(contentId);
+		.then(() => {
+			return showCreateListAndAddArticleOverlay(contentId);
 		});
 }
 
@@ -192,8 +192,8 @@ function initialEventListeners () {
 		// Checks if the createListAndSaveArticle variant is active
 		// and will show the variant overlay if the user has no lists,
 		// otherwise it will show the classic overlay
-		const createListVariant = event.currentTarget.querySelector('[data-myft-ui-variant="createListAndSaveArticleVariant"]');
-		if (createListVariant) {
+		const createNewListDesign = event.currentTarget.querySelector('[data-myft-ui-save-new="manageArticleLists"]');
+		if (createNewListDesign) {
 			return openCreateListAndAddArticleOverlay(contentId);
 		}
 

package/myft/ui/save-article-to-list-variant.js

@@ -5,20 +5,14 @@ import getToken from './lib/get-csrf-token';
 
 const csrfToken = getToken();
 
-let lists;
+let lists = [];
+let haveLoadedLists = false;
 
-export default async function showSaveArticleToListVariant (name, contentId) {
-	try {
-		await openSaveArticleToListVariant (name, contentId);
-	} catch(error) {
-		handleError(error);
-	}
-}
-
-async function openSaveArticleToListVariant (name, contentId) {
+export default async function openSaveArticleToListVariant (name, contentId) {
 	function createList (list) {
 		if(!list) {
-			return;
+			if (!lists.length) attachDescription();
+			return contentElement.addEventListener('click', openFormHandler, { once: true });
 		}
 
 		myFtClient.add('user', null, 'created', 'list', uuid(), { name: list,	token: csrfToken })
@@ -33,6 +27,10 @@ async function openSaveArticleToListVariant (name, contentId) {
 					triggerCreateListEvent(contentId);
 					contentElement.addEventListener('click', openFormHandler, { once: true });
 				});
+			})
+			.catch(() => {
+				if (!lists.length) attachDescription();
+				return contentElement.addEventListener('click', openFormHandler, { once: true });
 			});
 	}
 
@@ -66,8 +64,9 @@ async function openSaveArticleToListVariant (name, contentId) {
 		});
 	}
 
-	if (!lists) {
+	if (!haveLoadedLists) {
 		lists = await getLists(contentId);
+		haveLoadedLists = true;
 	}
 
 	const overlays = Overlay.getOverlays();
@@ -77,7 +76,7 @@ async function openSaveArticleToListVariant (name, contentId) {
 	}
 
 	const headingElement = HeadingElement();
-	let [contentElement, removeDescription] = ContentElement(!lists.length);
+	let [contentElement, removeDescription, attachDescription] = ContentElement(!lists.length);
 
 	const createListOverlay = new Overlay(name, {
 		html: contentElement,
@@ -87,36 +86,37 @@ async function openSaveArticleToListVariant (name, contentId) {
 		class: 'myft-ui-create-list-variant',
 	});
 
-	const realignListener = realignOverlay(window.scrollY);
-
 	function outsideClickHandler (e) {
-		try {
-			const overlayContent = document.querySelector('.o-overlay__content');
-			if(!overlayContent || !overlayContent.contains(e.target)) {
-				createListOverlay.close();
-			}
-		} catch(error) {
-			handleError(error);
+		const overlayContent = document.querySelector('.o-overlay__content');
+		if(createListOverlay.visible && (!overlayContent || !overlayContent.contains(e.target))) {
+			createListOverlay.close();
 		}
 	}
 
 	function openFormHandler () {
-		try {
-			const formElement = FormElement(createList);
-			const overlayContent = document.querySelector('.o-overlay__content');
-			removeDescription();
-			overlayContent.insertAdjacentElement('beforeend', formElement);
-			formElement.elements[0].focus();
-		} catch(error) {
-			handleError(error);
-		}
+		const formElement = FormElement(createList);
+		const overlayContent = document.querySelector('.o-overlay__content');
+		removeDescription();
+		overlayContent.insertAdjacentElement('beforeend', formElement);
+		formElement.elements[0].focus();
+	}
+
+	function getScrollHandler (target) {
+		return realignOverlay(window.scrollY, target);
+	}
+
+	function resizeHandler () {
+		positionOverlay(createListOverlay.wrapper);
 	}
 
 	createListOverlay.open();
+
+	const scrollHandler = getScrollHandler(createListOverlay.wrapper);
+
 	createListOverlay.wrapper.addEventListener('oOverlay.ready', (data) => {
-		realignListener(data.currentTarget);
+		positionOverlay(data.currentTarget);
 
-		if (lists && lists.length) {
+		if (lists.length) {
 			const listElement = ListsElement(lists, addToList, removeFromList);
 			const overlayContent = document.querySelector('.o-overlay__content');
 			overlayContent.insertAdjacentElement('afterbegin', listElement);
@@ -125,12 +125,16 @@ async function openSaveArticleToListVariant (name, contentId) {
 		contentElement.addEventListener('click', openFormHandler, { once: true });
 
 		document.querySelector('.article-content').addEventListener('click', outsideClickHandler, { once: true });
+
+		window.addEventListener('scroll', scrollHandler);
+
+		window.addEventListener('oViewport.resize', resizeHandler);
 	});
 
-	window.addEventListener('scroll', realignListener(createListOverlay.wrapper, window.scrollY));
+	createListOverlay.wrapper.addEventListener('oOverlay.destroy', () => {
+		window.removeEventListener('scroll', scrollHandler);
 
-	window.addEventListener('oViewport.resize', () => {
-		realignListener(createListOverlay.wrapper);
+		window.removeEventListener('oViewport.resize', resizeHandler);
 	});
 }
 
@@ -157,16 +161,12 @@ function FormElement (createList) {
 	const formElement = stringToHTMLElement(formString);
 
 	function handleSubmit (event) {
-		try {
-			event.preventDefault();
-			event.stopPropagation();
-			const inputListName = formElement.querySelector('input[name="list-name"]');
-			createList(inputListName.value);
-			inputListName.value = '';
-			formElement.remove();
-		} catch(error) {
-			handleError(error);
-		}
+		event.preventDefault();
+		event.stopPropagation();
+		const inputListName = formElement.querySelector('input[name="list-name"]');
+		createList(inputListName.value);
+		inputListName.value = '';
+		formElement.remove();
 	}
 
 	formElement.querySelector('button[type="submit"]').addEventListener('click', handleSubmit);
@@ -174,12 +174,14 @@ function FormElement (createList) {
 	return formElement;
 }
 
-function ContentElement (description) {
+function ContentElement (hasDescription) {
+	const description = '<p class="myft-ui-create-list-variant-add-description">Lists are a simple way to curate your content</p>';
+
 	const content = `
 		<div class="myft-ui-create-list-variant-footer">
 			<button class="myft-ui-create-list-variant-add">Add to a new list</button>
-			${description ? `
-			<p class="myft-ui-create-list-variant-add-description">Lists are a simple way to curate your content</p>
+			${hasDescription ? `
+			${description}
 		` : ''}
 		</div>
 	`;
@@ -193,7 +195,12 @@ function ContentElement (description) {
 		}
 	}
 
-	return [contentElement, removeDescription];
+	function attachDescription () {
+		const descriptionElement = stringToHTMLElement(description);
+		contentElement.insertAdjacentElement('beforeend', descriptionElement);
+	}
+
+	return [contentElement, removeDescription, attachDescription];
 }
 
 function HeadingElement () {
@@ -256,36 +263,41 @@ function ListCheckboxElement (addToList, removeFromList) {
 	};
 }
 
-function realignOverlay (originalScrollPosition) {
-	return function (target, currentScrollPosition) {
-		try {
-			if(currentScrollPosition && Math.abs(currentScrollPosition - originalScrollPosition) < 120) {
-				return;
-			}
-
-			originalScrollPosition = currentScrollPosition;
-
-			target.style['min-width'] = '340px';
-			target.style['width'] = '100%';
-			target.style['margin-top'] = '-50px';
-			target.style['left'] = 0;
-
-			if (isMobile()) {
-				target.style['position'] = 'absolute';
-				target.style['margin-left'] = 0;
-				target.style['margin-top'] = 0;
-				target.style['top'] = calculateLargerScreenHalf(target) === 'ABOVE' ? '-120px' : '50px';
-			} else {
-				target.style['position'] = 'absolute';
-				target.style['margin-left'] = '45px';
-				target.style['top'] = '220px';
-			}
-		} catch (error) {
-			handleError(error);
+function realignOverlay (originalScrollPosition, target) {
+	return function () {
+		const currentScrollPosition = window.scrollY;
+
+		if(Math.abs(currentScrollPosition - originalScrollPosition) < 120) {
+			return;
 		}
+
+		if (currentScrollPosition) {
+			originalScrollPosition = currentScrollPosition;;
+		}
+
+		positionOverlay(target);
 	};
 }
 
+function positionOverlay (target) {
+	target.style['min-width'] = '340px';
+	target.style['width'] = '100%';
+	target.style['margin-top'] = '-50px';
+	target.style['left'] = 0;
+
+	if (isMobile()) {
+		const shareNavComponent = document.querySelector('.share-nav__horizontal');
+		target.style['position'] = 'absolute';
+		target.style['margin-left'] = 0;
+		target.style['margin-top'] = 0;
+		target.style['top'] = calculateLargerScreenHalf(shareNavComponent) === 'ABOVE' ? '-120px' : '50px';
+	} else {
+		target.style['position'] = 'absolute';
+		target.style['margin-left'] = '45px';
+		target.style['top'] = '220px';
+	}
+}
+
 function isMobile () {
 	const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
 
@@ -293,6 +305,10 @@ function isMobile () {
 }
 
 function calculateLargerScreenHalf (target) {
+	if (!target) {
+		return 'BELOW';
+	}
+
 	const vh = Math.min(document.documentElement.clientHeight || 0, window.innerHeight || 0);
 
 	const targetBox = target.getBoundingClientRect();
@@ -357,13 +373,3 @@ function triggerCreateListEvent (contentId) {
 		bubbles: true
 	}));
 }
-
-function handleError (error) {
-	document.body.dispatchEvent(new CustomEvent('oErrors.log', {
-		bubbles: true,
-		detail: {
-			error,
-			info: { component: 'professorLists' },
-		}
-	}));
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/n-myft-ui",
-  "version": "28.0.2",
+  "version": "28.1.0",
   "description": "Client side component for interaction with myft",
   "main": "server.js",
   "scripts": {
@@ -36,7 +36,7 @@
     "babel-plugin-transform-async-to-generator": "^6.24.1",
     "babel-plugin-transform-es2015-classes": "^6.8.0",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.5.2",
-    "babel-plugin-transform-runtime": "^6.9.0",
+    "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.7.0",
     "babel-preset-es2015": "^6.6.0",
     "babel-runtime": "^6.9.2",
@@ -87,13 +87,13 @@
   "peerDependencies": {
     "@financial-times/n-notification": "^8.2.2",
     "@financial-times/o-editorial-typography": "^2.3.2",
-    "@financial-times/o-errors": "^4.0.2",
+    "@financial-times/o-errors": "^5.0.0",
     "@financial-times/o-forms": "^9.4.0",
     "@financial-times/o-grid": "^6.1.1",
     "@financial-times/o-normalise": "^3.0.0",
     "@financial-times/o-overlay": "^4.0.0",
     "@financial-times/o-spacing": "^3.0.0",
-    "@financial-times/o-tooltip": "^5.0.0",
+    "@financial-times/o-tooltip": "^5.2.4",
     "@financial-times/o-topper": "^5.2.3",
     "n-ui-foundations": "^9.0.0"
   },
@@ -103,7 +103,7 @@
     "form-serialize": "^0.7.2",
     "ftdomdelegate": "^4.0.6",
     "js-cookie": "^2.2.1",
-    "next-myft-client": "^9.0.0",
+    "next-myft-client": "^10.1.0",
     "next-session-client": "^4.0.0",
     "superstore-sync": "^2.1.1"
   },

package/webpack.config.js

@@ -5,9 +5,7 @@ const { PageKitSassPlugin } = require('@financial-times/dotcom-build-sass');
 module.exports = {
 	plugins: [
 		new PageKitJsPlugin(),
-		new PageKitSassPlugin({
-			includePaths: [path.resolve('./node_modules/@financial-times')],
-		}),
+		new PageKitSassPlugin()
 	],
 	entry: {
 		scripts: ['./myft/index.js', './myft-common/index.js'],