@financial-times/n-myft-ui 28.0.6 → 28.2.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": "^10.1.0",
+        "next-myft-client": "^10.3.0",
         "next-session-client": "^4.0.0",
         "superstore-sync": "^2.1.1"
       },
@@ -97,7 +97,7 @@
         "@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"
       }
@@ -3031,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"
@@ -3042,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",
@@ -14264,9 +14265,9 @@
       }
     },
     "node_modules/next-myft-client": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/next-myft-client/-/next-myft-client-10.1.0.tgz",
-      "integrity": "sha512-PqnNE1gxV00yVv6pA+1jWaySJkonQBUx2uWchPNGNcB20SzVmYleSWLeD3bdxdNOD5Tpy8DDl58CEQrKja7bqA==",
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/next-myft-client/-/next-myft-client-10.3.0.tgz",
+      "integrity": "sha512-dAaIs6PhvYGczEsOHGNrI3FKKFDOcm6rSv06SaL9emltqlHqUXt7esun8m4N3D2iL2FzVXKLeMd9/gv/GDryOg==",
       "hasInstallScript": true,
       "dependencies": {
         "black-hole-stream": "0.0.1",
@@ -25571,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"
@@ -34769,9 +34770,9 @@
       }
     },
     "next-myft-client": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/next-myft-client/-/next-myft-client-10.1.0.tgz",
-      "integrity": "sha512-PqnNE1gxV00yVv6pA+1jWaySJkonQBUx2uWchPNGNcB20SzVmYleSWLeD3bdxdNOD5Tpy8DDl58CEQrKja7bqA==",
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/next-myft-client/-/next-myft-client-10.3.0.tgz",
+      "integrity": "sha512-dAaIs6PhvYGczEsOHGNrI3FKKFDOcm6rSv06SaL9emltqlHqUXt7esun8m4N3D2iL2FzVXKLeMd9/gv/GDryOg==",
       "requires": {
         "black-hole-stream": "0.0.1",
         "fetchres": "^1.7.2",

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/main.scss

@@ -314,6 +314,12 @@ $spacing-unit: 20px;
 			}
 			&-container {
 				margin-top: 0;
+				max-height: 92px;
+				padding-bottom: 2px;
+				overflow-y: auto;
+				@include oGridRespondTo($from: M) {
+					max-height: 126px;
+				}
 			}
 		}
 	}

package/myft/ui/lib/relationship-config.js

@@ -11,12 +11,6 @@ const relationshipConfig = {
 		subjectType: 'concept',
 		uiSelector: '[data-myft-ui="follow"]'
 	},
-	contained: {
-		actorType: 'list',
-		idProperty: 'data-content-id',
-		subjectType: 'content',
-		uiSelector: '[data-myft-ui="contained"]'
-	}
 };
 
 export default relationshipConfig;

package/myft/ui/lib/tracking.js

@@ -39,12 +39,10 @@ const getExtraContext = (subjectType, subjectId) => {
  * @param {Object} postedData Event's extra data (required for checking if an instant alert was turned on or off)
  * @return {String} label for the action to send in the custom event
  */
-const getAction = (subjectType, action, postedData, resultData) => {
+const getAction = (subjectType, action, postedData) => {
 	if (action === 'update' && subjectType === 'concept') {
 		const updateState = (postedData && postedData._rel && postedData._rel.instant && postedData._rel.instant === 'true') ? 'on' : 'off';
 		return `instant-alert-${updateState}`;
-	} else if (resultData && resultData.rel && resultData.rel.type && resultData.rel.type === 'contained') {
-		return `${action}-to-list-success`;
 	} else {
 		return customDataSettings[subjectType][action];
 	}
@@ -57,7 +55,7 @@ const getAction = (subjectType, action, postedData, resultData) => {
 export function custom (eventData) {
 	if (Object.keys(customDataSettings).indexOf(eventData.subjectType) !== -1) {
 		const options = Object.assign(
-			{action: getAction(eventData.subjectType, eventData.action, eventData.postedData, eventData.resultData)},
+			{action: getAction(eventData.subjectType, eventData.action, eventData.postedData)},
 			eventData.trackingInfo);
 		const extraContext = getExtraContext(eventData.subjectType, eventData.subjectId);
 		Object.assign(options, extraContext);

package/myft/ui/lists.js

@@ -51,6 +51,18 @@ function updateAfterAddToList (listId, contentId, wasAdded) {
 				content: message,
 				trackable: 'myft-feedback-notification'
 			});
+
+			document.body.dispatchEvent(new CustomEvent('oTracking.event', {
+				detail: {
+					category: 'list',
+					action: 'copy-success',
+					article_id: contentId,
+					list_id: listId,
+					teamName: 'customer-products-us-growth',
+					amplitudeExploratory: true
+				},
+				bubbles: true
+			}));
 		});
 }
 
@@ -83,6 +95,10 @@ function setUpCreateListListeners (overlay, contentId) {
 	const createListButton = overlay.content.querySelector('.js-create-list');
 	const nameInput = overlay.content.querySelector('.js-name');
 
+	if (!createListButton) {
+		return;
+	}
+
 	createListButton.addEventListener('click', event => {
 		event.preventDefault();
 
@@ -179,8 +195,65 @@ 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);
+		});
+}
+
+function handleRemoveToggleSubmit (event) {
+	event.preventDefault();
+
+	const formEl = event.target;
+	const submitBtnEl = formEl.querySelector('button[type="submit"]');
+
+	if (submitBtnEl.hasAttribute('disabled')) {
+		return;
+	}
+
+	const isSubmitBtnPressed = submitBtnEl.getAttribute('aria-pressed') === 'true';
+	const action = isSubmitBtnPressed ? 'remove' : 'add';
+	const contentId = formEl.dataset.contentId;
+	const listId = formEl.dataset.actorId;
+	const csrfToken = formEl.elements.token;
+
+	if (!csrfToken || !csrfToken.value) {
+		document.body.dispatchEvent(new CustomEvent('oErrors.log', {
+			bubbles: true,
+			detail: {
+				error: new Error('myFT form submitted without a CSRF token'),
+				info: {
+					action,
+					actorType: 'list',
+					actorId: listId,
+					relationshipName: 'contained',
+					subjectType: 'content',
+					subjectId: contentId,
+				},
+			},
+		}));
+	}
+
+	submitBtnEl.setAttribute('disabled', '');
+
+	myFtClient[action]('list', listId, 'contained', 'content', contentId, { token: csrfToken.value })
+		.then(() => {
+			myFtUiButtonStates.toggleButton(submitBtnEl, !isSubmitBtnPressed);
+
+			document.body.dispatchEvent(new CustomEvent('oTracking.event', {
+				detail: {
+					category: 'list',
+					action: action === 'add' ? 'add-success' : 'remove-success',
+					article_id: contentId,
+					list_id: listId,
+					teamName: 'customer-products-us-growth',
+					amplitudeExploratory: true
+				},
+				bubbles: true
+			}));
+		})
+		.catch(error => {
+			setTimeout(() => submitBtnEl.removeAttribute('disabled'));
+			throw error;
 		});
 }
 
@@ -192,8 +265,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);
 		}
 
@@ -208,6 +281,8 @@ function initialEventListeners () {
 		ev.preventDefault();
 		showCreateListOverlay();
 	});
+
+	delegate.on('submit', '[data-myft-ui="contained"]', handleRemoveToggleSubmit);
 }
 
 export function init () {

package/myft/ui/myft-buttons/init.js

@@ -65,6 +65,7 @@ function signedInEventListeners () {
 						const resultData = event.detail.results && event.detail.results[0];
 						const isPressed = !!event.detail.results;
 						buttonStates.setStateOfButton(relationshipName, event.detail.subject, isPressed, undefined, resultData, true);
+
 						tracking.custom({
 							subjectType,
 							action,

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

@@ -5,69 +5,61 @@ import getToken from './lib/get-csrf-token';
 
 const csrfToken = getToken();
 
-let lists;
+let lists = [];
+let haveLoadedLists = false;
+let createListOverlay;
 
-export default async function showSaveArticleToListVariant (name, contentId) {
-	try {
-		await openSaveArticleToListVariant (name, contentId);
-	} catch(error) {
-		handleError(error);
-	}
-}
-
-async function openSaveArticleToListVariant (name, contentId) {
-	function createList (list) {
+export default async function openSaveArticleToListVariant (name, contentId) {
+	function createList (list, cb) {
 		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 })
 			.then(detail => {
 				myFtClient.add('list', detail.subject, 'contained', 'content', contentId, { token: csrfToken }).then((createdList) => {
-					lists.push({ name: list, uuid: createdList.actorId, checked: true });
+					lists.unshift({ name: list, uuid: createdList.actorId, checked: true });
 					const listElement = ListsElement(lists, addToList, removeFromList);
 					const overlayContent = document.querySelector('.o-overlay__content');
 					overlayContent.insertAdjacentElement('afterbegin', listElement);
 					const announceListContainer = document.querySelector('.myft-ui-create-list-variant-announcement');
 					announceListContainer.textContent = `${list} created`;
-					triggerCreateListEvent(contentId);
 					contentElement.addEventListener('click', openFormHandler, { once: true });
+					cb(contentId, createdList.actorId);
 				});
+			})
+			.catch(() => {
+				if (!lists.length) attachDescription();
+				return contentElement.addEventListener('click', openFormHandler, { once: true });
 			});
 	}
 
-	function addToList (list) {
+	function addToList (list, cb) {
 		if(!list) {
 			return;
 		}
 
-		myFtClient.add('list', list.uuid, 'contained', 'content', contentId, { token: csrfToken }).then(() => {
-			const indexToUpdate = lists.indexOf(list);
-			lists[indexToUpdate] = { ...lists[indexToUpdate], checked: true };
-			const listElement = ListsElement(lists, addToList, removeFromList);
-			const overlayContent = document.querySelector('.o-overlay__content');
-			overlayContent.insertAdjacentElement('afterbegin', listElement);
-			triggerAddToListEvent(contentId);
+		myFtClient.add('list', list.uuid, 'contained', 'content', contentId, { token: csrfToken }).then((addedList) => {
+			cb();
+			triggerAddToListEvent(contentId, addedList.actorId);
 		});
 	}
 
-	function removeFromList (list) {
+	function removeFromList (list, cb) {
 		if(!list) {
 			return;
 		}
 
-		myFtClient.remove('list', list.uuid, 'contained', 'content', contentId, { token: csrfToken }).then(() => {
-			const indexToUpdate = lists.indexOf(list);
-			lists[indexToUpdate] = { ...lists[indexToUpdate], checked: false };
-			const listElement = ListsElement(lists, addToList, removeFromList);
-			const overlayContent = document.querySelector('.o-overlay__content');
-			overlayContent.insertAdjacentElement('afterbegin', listElement);
-			triggerRemoveFromListEvent(contentId);
+		myFtClient.remove('list', list.uuid, 'contained', 'content', contentId, { token: csrfToken }).then((removedList) => {
+			cb();
+			triggerRemoveFromListEvent(contentId, removedList.actorId);
 		});
 	}
 
-	if (!lists) {
+	if (!haveLoadedLists) {
 		lists = await getLists(contentId);
+		haveLoadedLists = true;
 	}
 
 	const overlays = Overlay.getOverlays();
@@ -77,9 +69,9 @@ 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, {
+	createListOverlay = new Overlay(name, {
 		html: contentElement,
 		heading: { title: headingElement.outerHTML },
 		modal: false,
@@ -87,50 +79,61 @@ 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');
+		const overlayContainer = document.querySelector('.o-overlay');
+		// we don't want to close the overlay if the click happened inside the
+		// overlay, except if the click happened on the overlay close button
+		const isTargetInsideOverlay = overlayContainer.contains(e.target) && !e.target.classList.contains('o-overlay__close');
+		if(createListOverlay.visible && (!overlayContent || !isTargetInsideOverlay)) {
+			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();
-	createListOverlay.wrapper.addEventListener('oOverlay.ready', (data) => {
-		realignListener(data.currentTarget);
 
-		if (lists && lists.length) {
+	const scrollHandler = getScrollHandler(createListOverlay.wrapper);
+
+	createListOverlay.wrapper.addEventListener('oOverlay.ready', (data) => {
+		if (lists.length) {
 			const listElement = ListsElement(lists, addToList, removeFromList);
 			const overlayContent = document.querySelector('.o-overlay__content');
 			overlayContent.insertAdjacentElement('afterbegin', listElement);
 		}
 
+		positionOverlay(data.currentTarget);
+
 		contentElement.addEventListener('click', openFormHandler, { once: true });
 
-		document.querySelector('.article-content').addEventListener('click', outsideClickHandler, { once: true });
+		document.querySelector('.article-content').addEventListener('click', outsideClickHandler);
+
+		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.removeEventListener('oViewport.resize', resizeHandler);
 
-	window.addEventListener('oViewport.resize', () => {
-		realignListener(createListOverlay.wrapper);
+		document.querySelector('.article-content').removeEventListener('click', outsideClickHandler);
 	});
 }
 
@@ -157,16 +160,16 @@ 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, ((contentId, listId) => {
+			triggerCreateListEvent(contentId, listId);
+			triggerAddToListEvent(contentId, listId);
+			positionOverlay(createListOverlay.wrapper);
+		}));
+		inputListName.value = '';
+		formElement.remove();
 	}
 
 	formElement.querySelector('button[type="submit"]').addEventListener('click', handleSubmit);
@@ -174,12 +177,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>
+			<button class="myft-ui-create-list-variant-add" data-trackable="add-to-new-list" text="Add to a new list">Add to a new list</button>
+			${hasDescription ? `
+			${description}
 		` : ''}
 		</div>
 	`;
@@ -193,12 +198,17 @@ function ContentElement (description) {
 		}
 	}
 
-	return [contentElement, removeDescription];
+	function attachDescription () {
+		const descriptionElement = stringToHTMLElement(description);
+		contentElement.insertAdjacentElement('beforeend', descriptionElement);
+	}
+
+	return [contentElement, removeDescription, attachDescription];
 }
 
 function HeadingElement () {
 	const heading = `
-		<span class="myft-ui-create-list-variant-heading">Added to <a href="https://www.ft.com/myft/saved-articles">saved articles</a> in <span class="myft-ui-create-list-variant-icon"><span class="myft-ui-create-list-variant-icon-visually-hidden">my FT</span></span></span>
+		<span class="myft-ui-create-list-variant-heading">Added to <a href="https://www.ft.com/myft/saved-articles" data-trackable="saved-articles">saved articles</a> in <span class="myft-ui-create-list-variant-icon"><span class="myft-ui-create-list-variant-icon-visually-hidden">my FT</span></span></span>
 		`;
 
 	return stringToHTMLElement(heading);
@@ -230,8 +240,9 @@ function ListsElement (lists, addToList, removeFromList) {
 
 function ListCheckboxElement (addToList, removeFromList) {
 	return function (list) {
+
 		const listCheckbox = `<label>
-		<input type="checkbox" name="default" value="${list.name}" ${list.checked ? 'checked' : ''}>
+		<input type="checkbox" name="default" value="${list.uuid}" ${list.checked ? 'checked' : ''}>
 		<span class="o-forms-input__label">
 			<span class="o-normalise-visually-hidden">
 			${list.checked ? 'Remove article from ' : 'Add article to ' }
@@ -247,7 +258,15 @@ function ListCheckboxElement (addToList, removeFromList) {
 
 		function handleCheck (event) {
 			event.preventDefault();
-			return event.target.checked ? addToList(list) : removeFromList(list);
+			const isChecked = event.target.checked;
+
+			function onListUpdated () {
+				const indexToUpdate = lists.indexOf(list);
+				lists[indexToUpdate] = { ...lists[indexToUpdate], checked: isChecked };
+				listCheckboxElement.querySelector('input').checked = isChecked;
+			}
+
+			return isChecked ? addToList(list, onListUpdated) : removeFromList(list, onListUpdated);
 		}
 
 		input.addEventListener('click', handleCheck);
@@ -256,36 +275,42 @@ function ListCheckboxElement (addToList, removeFromList) {
 	};
 }
 
-function realignOverlay (originalScrollPosition) {
-	return function (target, currentScrollPosition) {
-		try {
-			if(currentScrollPosition && Math.abs(currentScrollPosition - originalScrollPosition) < 120) {
-				return;
-			}
+function realignOverlay (originalScrollPosition, target) {
+	return function () {
+		const currentScrollPosition = window.scrollY;
 
-			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);
+		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');
+		const topHalfOffset = target.clientHeight + 10;
+		target.style['position'] = 'absolute';
+		target.style['margin-left'] = 0;
+		target.style['margin-top'] = 0;
+		target.style['top'] = calculateLargerScreenHalf(shareNavComponent) === 'ABOVE' ? `-${topHalfOffset}px` : '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 +318,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();
@@ -302,20 +331,21 @@ function calculateLargerScreenHalf (target) {
 	return spaceBelow < spaceAbove ? 'ABOVE' : 'BELOW';
 }
 
-async function getLists () {
-	return myFtClient.getAll('created', 'list')
-		.then(lists => lists.filter(list => !list.isRedirect))
-		.then(lists => {
-			return lists.map(list => ({ name: list.name, uuid: list.uuid, checked: false }));
-		});
+async function getLists (contentId) {
+	return myFtClient.getListsContent()
+		.then(results => results.items.map(list => {
+			const isChecked = Array.isArray(list.content) && list.content.some(content => content.uuid === contentId);
+			return { name: list.name, uuid: list.uuid, checked: isChecked, content: list.content };
+		}));
 }
 
-function triggerAddToListEvent (contentId) {
+function triggerAddToListEvent (contentId, listId) {
 	return document.body.dispatchEvent(new CustomEvent('oTracking.event', {
 		detail: {
-			category: 'professorLists',
-			action: 'add-to-list',
+			category: 'list',
+			action: 'add-success',
 			article_id: contentId,
+			list_id: listId,
 			teamName: 'customer-products-us-growth',
 			amplitudeExploratory: true
 		},
@@ -323,12 +353,13 @@ function triggerAddToListEvent (contentId) {
 	}));
 }
 
-function triggerRemoveFromListEvent (contentId) {
+function triggerRemoveFromListEvent (contentId, listId) {
 	return document.body.dispatchEvent(new CustomEvent('oTracking.event', {
 		detail: {
-			category: 'professorLists',
-			action: 'remove-from-list',
+			category: 'list',
+			action: 'remove-success',
 			article_id: contentId,
+			list_id: listId,
 			teamName: 'customer-products-us-growth',
 			amplitudeExploratory: true
 		},
@@ -336,34 +367,16 @@ function triggerRemoveFromListEvent (contentId) {
 	}));
 }
 
-function triggerCreateListEvent (contentId) {
+function triggerCreateListEvent (contentId, listId) {
 	document.body.dispatchEvent(new CustomEvent('oTracking.event', {
 		detail: {
-			category: 'professorLists',
-			action: 'create-list',
+			category: 'list',
+			action: 'create-success',
 			article_id: contentId,
+			list_id: listId,
 			teamName: 'customer-products-us-growth',
 			amplitudeExploratory: true
 		},
 		bubbles: true
 	}));
-
-	return document.body.dispatchEvent(new CustomEvent('oTracking.event', {
-		detail: {
-			category: 'myFT',
-			action: 'create-list-success',
-			article_id: 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.6",
+  "version": "28.2.0",
   "description": "Client side component for interaction with myft",
   "main": "server.js",
   "scripts": {
@@ -93,7 +93,7 @@
     "@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,13 +103,13 @@
     "form-serialize": "^0.7.2",
     "ftdomdelegate": "^4.0.6",
     "js-cookie": "^2.2.1",
-    "next-myft-client": "^10.1.0",
+    "next-myft-client": "^10.3.0",
     "next-session-client": "^4.0.0",
     "superstore-sync": "^2.1.1"
   },
   "volta": {
     "node": "16.14.2",
-    "npm": "7.20.2"
+    "npm": "7.24.2"
   },
   "engines": {
     "node": "14.x || 16.x",