@financial-times/n-myft-ui 28.2.1 → 28.2.4

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

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

package/myft/main.scss

@@ -183,6 +183,26 @@ $spacing-unit: 20px;
 		}
 	}
 
+	.myft-ui-create-list-variant-message {
+		border-radius: 10px;
+		border: 1px solid oColorsByName('black-5');
+		background: oColorsByName('white-80');
+
+		&-content {
+			display: flex;
+			flex-direction: column;
+
+			h3 {
+				margin: 0;
+			}
+		}
+
+		&-buttons {
+			text-align: center;
+		}
+	}
+
+
 	.myft-ui-create-list-variant {
 		border-radius: 10px;
 		border: 1px solid oColorsByName('black-5');
@@ -219,13 +239,12 @@ $spacing-unit: 20px;
 			color: oColorsByName('black-80');
 
 			padding-left: 0;
-			margin-left: -8px;
 
 			&:hover {
 				text-decoration: underline;
 			}
 
-			&::before {
+			&-collapsed::before {
 				content: '';
 				@include oIconsContent(
 					'plus',
@@ -235,11 +254,12 @@ $spacing-unit: 20px;
 				);
 				vertical-align: middle;
 				margin-top: -2px;
+				margin-left: -8px;
 			}
 		}
 
 		&-add-description {
-			margin: 4px 0;
+			margin: oSpacingByName('s1') 0;
 		}
 
 		&-heading {
@@ -258,7 +278,7 @@ $spacing-unit: 20px;
 
 		&-footer {
 			border-top: 1px solid oColorsByName('black-5');
-			padding: 16px;
+			padding: oSpacingByName('s4');
 		}
 
 		&-icon {
@@ -288,34 +308,54 @@ $spacing-unit: 20px;
 		}
 
 		&-form {
+			$field-spacing: 's4';
 			display: flex;
+			flex-direction: column;
 			width: calc(100% - 32px);
-			justify-content: space-between;
-			height: 40px;
-			gap: 8px;
-			padding: 0 16px 16px;
+			gap: oSpacingByName($field-spacing);
+			padding: 0 oSpacingByName($field-spacing) oSpacingByName('s3');
 
 			& > * {
 				flex: 1 1 auto;
+				margin-bottom: 0;
 			}
 
 			.o-forms-input {
 				margin-top: 0;
 			}
+
+			&-toggle {
+				position: absolute;
+			}
+
+			&-toggle-label::after {
+				background-color: oColorsByName('white');
+			}
+
+			&-buttons {
+				display: flex;
+				justify-content: flex-end;
+				@include oTypographySans($scale: 2);
+			}
+
+			&-public {
+				max-width: 300px;
+				padding: 0 3px;
+			}
 		}
 
 		&-lists {
-			padding: 16px 16px 0;
+			padding: oSpacingByName('s4') oSpacingByName('s4') 0;
 			@include oTypographySans($scale: 1);
 			&-text {
 				@include oTypographySans($weight: 'semibold');
 				color: oColorsByName('black-80');
-				margin-bottom: 16px;
+				margin-bottom: oSpacingByName('s3');
 			}
 			&-container {
 				margin-top: 0;
 				max-height: 92px;
-				padding-bottom: 2px;
+				padding: 4px 2px;
 				overflow-y: auto;
 				@include oGridRespondTo($from: M) {
 					max-height: 126px;

package/myft/ui/lists.js

@@ -180,8 +180,13 @@ function showArticleSavedOverlay (contentId) {
 	showListsOverlay('Article saved', `/myft/list?fragment=true&fromArticleSaved=true&contentId=${contentId}`, contentId);
 }
 
-function showCreateListAndAddArticleOverlay (contentId, name = 'myft-ui-create-list-variant') {
-	return openSaveArticleToListVariant(name, contentId);
+function showCreateListAndAddArticleOverlay (contentId, config) {
+	const options = {
+		name: 'myft-ui-create-list-variant',
+		...config
+	};
+
+	return openSaveArticleToListVariant(contentId, options);
 }
 
 function handleArticleSaved (contentId) {
@@ -194,11 +199,11 @@ function handleArticleSaved (contentId) {
 		});
 }
 
-function openCreateListAndAddArticleOverlay (contentId) {
+function openCreateListAndAddArticleOverlay (contentId, config) {
 	return myFtClient.getAll('created', 'list')
 		.then(createdLists => createdLists.filter(list => !list.isRedirect))
 		.then(() => {
-			return showCreateListAndAddArticleOverlay(contentId);
+			return showCreateListAndAddArticleOverlay(contentId, config);
 		});
 }
 
@@ -269,7 +274,23 @@ function initialEventListeners () {
 		// otherwise it will show the classic overlay
 		const newListDesign = event.currentTarget.querySelector('[data-myft-ui-save-new="manageArticleLists"]');
 		if (newListDesign) {
-			return openCreateListAndAddArticleOverlay(contentId);
+			const configKeys = newListDesign.dataset.myftUiSaveNewConfig.split(',');
+			const config = configKeys.reduce((configObj, key) => (key ? { ...configObj, [key]: true} : configObj), {});
+
+			// Temporary events on the public toggle feature.
+			// These will be used to build a sanity check dashboard, and will be removed after we get clean-up this test.
+			document.body.dispatchEvent(new CustomEvent('oTracking.event', {
+				detail: {
+					category: 'publicToggle',
+					action: 'savedArticle',
+					article_id: contentId,
+					teamName: 'customer-products-us-growth',
+					amplitudeExploratory: true
+				},
+				bubbles: true
+			}));
+
+			return openCreateListAndAddArticleOverlay(contentId, config);
 		}
 
 		handleArticleSaved(contentId);

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

@@ -11,29 +11,26 @@ let lists = [];
 let haveLoadedLists = false;
 let createListOverlay;
 
-export default async function openSaveArticleToListVariant (name, contentId) {
-	function createList (list, cb) {
-		if(!list) {
-			if (!lists.length) attachDescription();
-			return contentElement.addEventListener('click', openFormHandler, { once: true });
+export default async function openSaveArticleToListVariant (contentId, options = {}) {
+	const { name, showPublicToggle = false } = options;
+
+	function createList (newList, cb) {
+		if(!newList || !newList.name) {
+			return restoreContent();
 		}
 
-		myFtClient.add('user', null, 'created', 'list', uuid(), { name: list,	token: csrfToken })
+		myFtClient.add('user', null, 'created', 'list', uuid(), { name: newList.name,	token: csrfToken })
 			.then(detail => {
-				myFtClient.add('list', detail.subject, 'contained', 'content', contentId, { token: csrfToken }).then((createdList) => {
-					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);
+				myFtClient.add('list', detail.subject, 'contained', 'content', contentId, { token: csrfToken }).then((data) => {
+					const createdList = { name: newList.name, uuid: data.actorId, checked: true, isShareable: !!newList.isShareable };
+					lists.unshift(createdList);
 					const announceListContainer = document.querySelector('.myft-ui-create-list-variant-announcement');
-					announceListContainer.textContent = `${list} created`;
-					contentElement.addEventListener('click', openFormHandler, { once: true });
-					cb(contentId, createdList.actorId);
+					announceListContainer.textContent = `${newList.name} created`;
+					cb(contentId, createdList);
 				});
 			})
 			.catch(() => {
-				if (!lists.length) attachDescription();
-				return contentElement.addEventListener('click', openFormHandler, { once: true });
+				return restoreContent();
 			});
 	}
 
@@ -59,6 +56,13 @@ export default async function openSaveArticleToListVariant (name, contentId) {
 		});
 	}
 
+	function restoreContent () {
+		if (!lists.length) attachDescription();
+		refreshListElement();
+		showListElement();
+		return restoreFormHandler();
+	}
+
 	if (!haveLoadedLists) {
 		lists = await getLists(contentId);
 		haveLoadedLists = true;
@@ -71,7 +75,8 @@ export default async function openSaveArticleToListVariant (name, contentId) {
 	}
 
 	const headingElement = HeadingElement();
-	let [contentElement, removeDescription, attachDescription] = ContentElement(!lists.length);
+	let [contentElement, removeDescription, attachDescription, restoreFormHandler] = ContentElement(!lists.length, openFormHandler);
+	const [listElement, refreshListElement, hideListElement, showListElement] = ListsElement(lists, addToList, removeFromList);
 
 	createListOverlay = new Overlay(name, {
 		html: contentElement,
@@ -92,36 +97,40 @@ export default async function openSaveArticleToListVariant (name, contentId) {
 		}
 	}
 
+	function onFormCancel () {
+		showListElement();
+		restoreFormHandler();
+	}
+
+	function onFormListCreated () {
+		refreshListElement();
+		showListElement();
+		restoreFormHandler();
+	}
+
 	function openFormHandler () {
-		const formElement = FormElement(createList);
+		hideListElement();
+		const formElement = FormElement(createList, showPublicToggle, attachDescription, onFormListCreated, onFormCancel);
 		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);
+	const resizeHandler = getResizeHandler(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 });
+		restoreFormHandler();
 
 		document.querySelector('.article-content').addEventListener('click', outsideClickHandler);
 
@@ -139,17 +148,90 @@ export default async function openSaveArticleToListVariant (name, contentId) {
 	});
 }
 
-function FormElement (createList) {
+function showMessageOverlay () {
+	function onContinue () {
+		messageOverlay.destroy();
+		createListOverlay.show();
+		triggerAcknowledgeMessageEvent();
+	}
+
+	const messageElement = MessageElement(onContinue);
+
+	const messageOverlay = new Overlay('myft-ui-create-list-variant-message', {
+		html: messageElement,
+		modal: false,
+		parentnode: isMobile() ? '.o-share--horizontal' : '.o-share--vertical',
+		class: 'myft-ui-create-list-variant-message',
+	});
+
+	const scrollHandler = getScrollHandler(messageOverlay.wrapper);
+	const resizeHandler = getResizeHandler(messageOverlay.wrapper);
+
+	messageOverlay.open();
+
+	messageOverlay.wrapper.addEventListener('oOverlay.ready', (data) => {
+		positionOverlay(data.currentTarget);
+
+		window.addEventListener('scroll', scrollHandler);
+
+		window.addEventListener('oViewport.resize', resizeHandler);
+	});
+
+	messageOverlay.wrapper.addEventListener('oOverlay.destroy', () => {
+		window.removeEventListener('scroll', scrollHandler);
+
+		window.removeEventListener('oViewport.resize', resizeHandler);
+	});
+
+	return messageOverlay;
+}
+
+function getScrollHandler (target) {
+	return realignOverlay(window.scrollY, target);
+}
+
+function getResizeHandler (target) {
+	return function resizeHandler () {
+		positionOverlay(target);
+	};
+}
+
+function FormElement (createList, showPublicToggle, attachDescription, onListCreated, onCancel) {
 	const formString = `
 	<form class="myft-ui-create-list-variant-form">
-		<label class="o-forms-field">
+		<label class="myft-ui-create-list-variant-form-name o-forms-field">
 			<span class="o-forms-input o-forms-input--text">
-				<input type="text" name="list-name" aria-label="List name">
+				<input class="myft-ui-create-list-variant-text" type="text" name="list-name" aria-label="List name">
 			</span>
 		</label>
-		<button class="o-buttons o-buttons--secondary" type="submit">
-			Save
-		</button>
+
+		${showPublicToggle ?
+		`<div class="myft-ui-create-list-variant-form-public o-forms-field" role="group">
+				<span class="o-forms-input o-forms-input--toggle">
+					<label>
+						<input class="myft-ui-create-list-variant-form-toggle" type="checkbox" name="is-shareable" value="public" checked data-trackable="private-link" text="private">
+						<span class="myft-ui-create-list-variant-form-toggle-label o-forms-input__label">
+							<span class="o-forms-input__label__main">
+								Public
+							</span>
+							<span id="myft-ui-create-list-variant-form-public-description" class="o-forms-input__label__prompt">
+								Your profession & list will be visible to others
+							</span>
+						</span>
+					</label>
+				</span>
+			</div>` :
+		''
+}
+
+		<div class="myft-ui-create-list-variant-form-buttons">
+			<button class="o-buttons o-buttons--primary o-buttons--inverse o-buttons--big" type="button" data-trackable="cancel-link" text="cancel">
+			Cancel
+			</button>
+			<button class="o-buttons o-buttons--big o-buttons--secondary" type="submit">
+			Add
+			</button>
+		</div>
 	</form>
 	`;
 
@@ -159,26 +241,63 @@ function FormElement (createList) {
 		event.preventDefault();
 		event.stopPropagation();
 		const inputListName = formElement.querySelector('input[name="list-name"]');
-		createList(inputListName.value, ((contentId, listId) => {
-			triggerCreateListEvent(contentId, listId);
-			triggerAddToListEvent(contentId, listId);
+		const inputIsShareable = formElement.querySelector('input[name="is-shareable"]');
+
+		const newList = {
+			name: inputListName.value,
+			isShareable: inputIsShareable ? inputIsShareable.checked : false
+		};
+
+		createList(newList, ((contentId, createdList) => {
+			triggerCreateListEvent(contentId, createdList.uuid);
+			triggerAddToListEvent(contentId, createdList.uuid);
 			positionOverlay(createListOverlay.wrapper);
+			triggerCancelEvent();
+
+			if (createdList.isShareable) {
+				createListOverlay.close();
+				showMessageOverlay();
+			}
+
+			onListCreated();
 		}));
-		inputListName.value = '';
 		formElement.remove();
 	}
 
+	function handleCancelClick (event) {
+		event.preventDefault();
+		event.stopPropagation();
+		formElement.remove();
+		if (!lists.length) attachDescription();
+		onCancel();
+	}
+
 	formElement.querySelector('button[type="submit"]').addEventListener('click', handleSubmit);
+	formElement.querySelector('button[type="button"]').addEventListener('click', handleCancelClick);
+
+	if (showPublicToggle) {
+		addPublicToggleListener(formElement);
+	}
 
 	return formElement;
 }
 
-function ContentElement (hasDescription) {
+function addPublicToggleListener (formElement) {
+	function onPublicToggleClick (event) {
+		event.target.setAttribute('data-trackable', event.target.checked ? 'private-link' : 'public-link');
+		event.target.setAttribute('text', event.target.checked ? 'private' : 'public');
+		triggerPublicToggleEvent(event.target.checked);
+	}
+
+	formElement.querySelector('input[name="is-shareable"]').addEventListener('click', onPublicToggleClick);
+}
+
+function ContentElement (hasDescription, onClick) {
 	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" data-trackable="add-to-new-list" text="Add to a new list">Add to a new list</button>
+			<button class="myft-ui-create-list-variant-add myft-ui-create-list-variant-add-collapsed" data-trackable="add-to-new-list" text="add to new list">Add to a new list</button>
 			${hasDescription ? `
 			${description}
 		` : ''}
@@ -187,6 +306,8 @@ function ContentElement (hasDescription) {
 
 	const contentElement = stringToHTMLElement(content);
 
+	contentElement.querySelector('.myft-ui-create-list-variant-add').addEventListener('click', triggerAddToNewListEvent);
+
 	function removeDescription () {
 		const descriptionElement = contentElement.querySelector('.myft-ui-create-list-variant-add-description');
 		if (descriptionElement) {
@@ -199,7 +320,17 @@ function ContentElement (hasDescription) {
 		contentElement.insertAdjacentElement('beforeend', descriptionElement);
 	}
 
-	return [contentElement, removeDescription, attachDescription];
+	function restoreFormHandler () {
+		contentElement.querySelector('.myft-ui-create-list-variant-add').classList.add('myft-ui-create-list-variant-add-collapsed');
+		return contentElement.addEventListener('click', clickHandler, { once: true });
+	}
+
+	function clickHandler (event) {
+		contentElement.querySelector('.myft-ui-create-list-variant-add').classList.remove('myft-ui-create-list-variant-add-collapsed');
+		onClick(event);
+	}
+
+	return [contentElement, removeDescription, attachDescription, restoreFormHandler];
 }
 
 function HeadingElement () {
@@ -220,7 +351,7 @@ function ListsElement (lists, addToList, removeFromList) {
 
 	const listsTemplate = `
 	<div class="myft-ui-create-list-variant-lists o-forms-field o-forms-field--optional" role="group">
-		<span class="myft-ui-create-list-variant-lists-text">Add to a list</span>
+		<span class="myft-ui-create-list-variant-lists-text">Add to list</span>
 		<span class="myft-ui-create-list-variant-lists-container o-forms-input o-forms-input--checkbox">
 		</span>
 	</div>
@@ -229,9 +360,21 @@ function ListsElement (lists, addToList, removeFromList) {
 
 	const listsElementContainer = listsElement.querySelector('.myft-ui-create-list-variant-lists-container');
 
-	lists.map(list => listsElementContainer.insertAdjacentElement('beforeend', listCheckboxElement(list)));
+	function refresh () {
+		listsElementContainer.replaceChildren(...lists.map(list => listCheckboxElement(list)));
+	}
+
+	function hide () {
+		listsElement.style.display = 'none';
+	}
 
-	return listsElement;
+	function show () {
+		listsElement.style.display = 'flex';
+	}
+
+	refresh();
+
+	return [listsElement, refresh, hide, show];
 }
 
 function ListCheckboxElement (addToList, removeFromList) {
@@ -271,6 +414,28 @@ function ListCheckboxElement (addToList, removeFromList) {
 	};
 }
 
+function MessageElement (onContinue) {
+	const message = `
+	<div class="myft-ui-create-list-variant-message-content" >
+		<div class="myft-ui-create-list-variant-message-text" aria-live="polite">
+			<h3>Thank you for your interest in making a public list</h3>
+			<p>We're currently testing this feature. For now, your list remains private and isn't visible to others.</p>
+		</div>
+		<div class="myft-ui-create-list-variant-message-buttons">
+			<button class="o-buttons o-buttons--big o-buttons--secondary" data-trackable="continue-link" text="continue">
+			Continue
+			</button>
+		</div>
+	</div>
+`;
+
+	const messageElement = stringToHTMLElement(message);
+
+	messageElement.querySelector('button').addEventListener('click', onContinue);
+
+	return messageElement;
+}
+
 function realignOverlay (originalScrollPosition, target) {
 	return function () {
 		const currentScrollPosition = window.scrollY;
@@ -290,20 +455,19 @@ function realignOverlay (originalScrollPosition, target) {
 function positionOverlay (target) {
 	target.style['min-width'] = '340px';
 	target.style['width'] = '100%';
-	target.style['margin-top'] = '-50px';
+	target.style['margin-top'] = 0;
 	target.style['left'] = 0;
+	target.style['top'] = 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';
 	}
 }
 
@@ -325,7 +489,7 @@ 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 };
+			return { name: list.name, uuid: list.uuid, checked: isChecked, content: list.content, isShareable: false };
 		}));
 }
 
@@ -370,3 +534,59 @@ function triggerCreateListEvent (contentId, listId) {
 		bubbles: true
 	}));
 }
+
+// Temporary event on the public toggle feature.
+// These will be used to build a sanity check dashboard, and will be removed after we get clean-up this test.
+function triggerPublicToggleEvent (isPublic) {
+	document.body.dispatchEvent(new CustomEvent('oTracking.event', {
+		detail: {
+			category: 'publicToggle',
+			action: `${isPublic ? 'setPublic' : 'setPrivate'}`,
+			teamName: 'customer-products-us-growth',
+			amplitudeExploratory: true
+		},
+		bubbles: true
+	}));
+}
+
+// Temporary event on the public toggle feature.
+// These will be used to build a sanity check dashboard, and will be removed after we get clean-up this test.
+function triggerAddToNewListEvent () {
+	document.body.dispatchEvent(new CustomEvent('oTracking.event', {
+		detail: {
+			category: 'publicToggle',
+			action: 'addToNewList',
+			teamName: 'customer-products-us-growth',
+			amplitudeExploratory: true
+		},
+		bubbles: true
+	}));
+}
+
+// Temporary event on the public toggle feature.
+// These will be used to build a sanity check dashboard, and will be removed after we get clean-up this test.
+function triggerAcknowledgeMessageEvent () {
+	document.body.dispatchEvent(new CustomEvent('oTracking.event', {
+		detail: {
+			category: 'publicToggle',
+			action: 'acknowledgeMessage',
+			teamName: 'customer-products-us-growth',
+			amplitudeExploratory: true
+		},
+		bubbles: true
+	}));
+}
+
+// Temporary event on the public toggle feature.
+// These will be used to build a sanity check dashboard, and will be removed after we get clean-up this test.
+function triggerCancelEvent () {
+	document.body.dispatchEvent(new CustomEvent('oTracking.event', {
+		detail: {
+			category: 'publicToggle',
+			action: 'cancel ',
+			teamName: 'customer-products-us-growth',
+			amplitudeExploratory: true
+		},
+		bubbles: true
+	}));
+}

package/package.json

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