@financial-times/n-myft-ui 28.3.1 → 28.3.3

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

@@ -20,7 +20,7 @@
 		{{#if isSaved}}
 			{{!-- The value of alternate label needs to be the opposite of label / the current saved state. This allows the client side JS to toggle the labels on state changes --}}
 			title="{{#if title}}{{title}} is{{/if}} Saved to myFT"
-			aria-label="{{#if title}}{{title}} is{{/if}} Saved to myFT"
+			aria-label="{{#if title}}{{title}} is{{/if}} Saved to myFT - Unsave"
 			data-alternate-label="{{#if title}}Save {{title}} to myFT for later{{else}}Save this article to myFT for later{{/if}}"
 			aria-pressed="true"
 		{{else}}

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

@@ -21,10 +21,10 @@ export default async function openSaveArticleToListVariant (contentId, options =
 			return restoreContent();
 		}
 
-		myFtClient.add('user', null, 'created', 'list', uuid(), { name: newList.name,	token: csrfToken })
+		myFtClient.add('user', null, 'created', 'list', uuid(), { name: newList.name,	token: csrfToken, isPublic: newList.isPublic })
 			.then(detail => {
 				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 };
+					const createdList = { name: newList.name, uuid: data.actorId, checked: true, isPublic: !!newList.isPublic };
 					lists.unshift(createdList);
 					const announceListContainer = document.querySelector('.myft-ui-create-list-variant-announcement');
 					announceListContainer.textContent = `${newList.name} created`;
@@ -116,7 +116,6 @@ export default async function openSaveArticleToListVariant (contentId, options =
 		const overlayContent = document.querySelector('.o-overlay__content');
 		removeDescription();
 		overlayContent.insertAdjacentElement('beforeend', formElement);
-		formElement.elements[0].focus();
 	}
 
 	createListOverlay.open();
@@ -153,44 +152,6 @@ export default async function openSaveArticleToListVariant (contentId, options =
 	});
 }
 
-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);
 }
@@ -206,7 +167,8 @@ function FormElement (createList, showPublicToggle, attachDescription, onListCre
 	<form class="myft-ui-create-list-variant-form">
 		<label class="myft-ui-create-list-variant-form-name o-forms-field">
 			<span class="o-forms-input o-forms-input--text">
-				<input class="myft-ui-create-list-variant-text" type="text" name="list-name" aria-label="List name">
+				<input class="myft-ui-create-list-variant-text" type="text" name="list-name">
+				List name
 			</span>
 		</label>
 
@@ -214,7 +176,7 @@ function FormElement (createList, showPublicToggle, attachDescription, onListCre
 		`<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">
+						<input class="myft-ui-create-list-variant-form-toggle" type="checkbox" name="is-public" 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
@@ -246,23 +208,17 @@ function FormElement (createList, showPublicToggle, attachDescription, onListCre
 		event.preventDefault();
 		event.stopPropagation();
 		const inputListName = formElement.querySelector('input[name="list-name"]');
-		const inputIsShareable = formElement.querySelector('input[name="is-shareable"]');
+		const inputIsPublic = formElement.querySelector('input[name="is-public"]');
 
 		const newList = {
 			name: inputListName.value,
-			isShareable: inputIsShareable ? inputIsShareable.checked : false
+			isPublic: inputIsPublic ? inputIsPublic.checked : false
 		};
 
 		createList(newList, ((contentId, createdList) => {
 			triggerCreateListEvent(contentId, createdList.uuid);
 			triggerAddToListEvent(contentId, createdList.uuid);
 			positionOverlay(createListOverlay.wrapper);
-
-			if (createdList.isShareable) {
-				createListOverlay.close();
-				showMessageOverlay();
-			}
-
 			onListCreated();
 		}));
 		formElement.remove();
@@ -294,7 +250,7 @@ function addPublicToggleListener (formElement) {
 		triggerPublicToggleEvent(event.target.checked);
 	}
 
-	formElement.querySelector('input[name="is-shareable"]').addEventListener('click', onPublicToggleClick);
+	formElement.querySelector('input[name="is-public"]').addEventListener('click', onPublicToggleClick);
 }
 
 function ContentElement (hasDescription, onClick) {
@@ -302,7 +258,7 @@ function ContentElement (hasDescription, onClick) {
 
 	const content = `
 		<div class="myft-ui-create-list-variant-footer">
-			<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>
+			<button class="myft-ui-create-list-variant-add myft-ui-create-list-variant-add-collapsed" aria-expanded=false data-trackable="add-to-new-list" text="add to new list">Add to a new list</button>
 			${hasDescription ? `
 			${description}
 		` : ''}
@@ -328,11 +284,13 @@ function ContentElement (hasDescription, onClick) {
 
 	function restoreFormHandler () {
 		contentElement.querySelector('.myft-ui-create-list-variant-add').classList.add('myft-ui-create-list-variant-add-collapsed');
+		contentElement.querySelector('.myft-ui-create-list-variant-add').setAttribute('aria-expanded', false);
 		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');
+		contentElement.querySelector('.myft-ui-create-list-variant-add').setAttribute('aria-expanded', true);
 		onClick(event);
 	}
 
@@ -420,28 +378,6 @@ 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;
@@ -495,7 +431,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, isShareable: false };
+			return { name: list.name, uuid: list.uuid, checked: isChecked, content: list.content, isPublic: list.isPublic };
 		}));
 }
 
@@ -569,20 +505,6 @@ function triggerAddToNewListEvent () {
 	}));
 }
 
-// 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 () {

package/package.json

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