@financial-times/n-myft-ui 30.2.0 → 30.2.2

package/myft/ui/lists.js

@@ -87,6 +87,11 @@ async function openSaveArticleToList (contentId, options = {}) {
 		class: 'myft-ui-create-list',
 	});
 
+	function addCloseButtonDataTrackable () {
+		const closeBtn = document.querySelector('.o-overlay__close');
+		closeBtn.setAttribute('data-trackable', 'close-button');
+	}
+
 	function outsideClickHandler (e) {
 		const overlayContent = document.querySelector('.o-overlay__content');
 		const overlayContainer = document.querySelector('.o-overlay');
@@ -150,6 +155,8 @@ async function openSaveArticleToList (contentId, options = {}) {
 
 		document.body.removeEventListener('click', outsideClickHandler);
 	});
+
+	addCloseButtonDataTrackable();
 }
 
 function getScrollHandler (target) {
@@ -192,7 +199,7 @@ function FormElement (createList, attachDescription, onListCreated, onCancel, mo
 			<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">
+			<button class="o-buttons o-buttons--big o-buttons--secondary" type="submit" data-trackable="add-button">
 			Add
 			</button>
 		</div>

package/myft/ui/lists.scss

@@ -9,6 +9,8 @@
 }
 
 .n-notification {
+	z-index: 105; //bring notifications in front of the sticky header
+
 	.myft-ui__icon {
 		@include oIconsContent('logo', oColorsByName('black-80'), 20);
 		margin: 0 3px -5px;

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

@@ -26,7 +26,7 @@ function getInteractionHandler (relationshipName) {
 	};
 }
 
-function anonEventListeners () {
+function anonEventListeners (flags = {}) {
 	const currentPath = window.location.pathname;
 	const subscribeUrl = '/products?segID=400863&segmentID=190b4443-dc03-bd53-e79b-b4b6fbd04e64';
 	const signInLink = `/login${currentPath.length ? `?location=${currentPath}` : ''}`;
@@ -35,6 +35,12 @@ function anonEventListeners () {
 		saved: `Please <a href="${subscribeUrl}" class="myft-ui-subscribe" data-trackable="Subscribe">subscribe</a> or <a href="${signInLink}" data-trackable="Sign In">sign in</a> to save this article.`
 	};
 
+	// 11/5/23 - US Growth test for Free Article Demand, see https://financialtimes.atlassian.net/browse/UG-1191
+	// This will be cleaned up after the test as part of https://financialtimes.atlassian.net/browse/UG-1221
+	if (flags.get && flags.get('podcastReferral')) {
+		messages.saved = `<a href="/register/access?multistepRegForm=multistep" data-trackable="Register">Register</a> for free or  <a href="${signInLink}" data-trackable="Sign In">sign in</a> to save this article`;
+	};
+
 	['followed', 'saved'].forEach(action => {
 		createDelegate('submit', relationshipConfig[action].uiSelector, event => {
 			event.preventDefault();
@@ -99,7 +105,7 @@ export default function (opts) {
 		enhanceActionUrls();
 
 		if (opts && opts.anonymous) {
-			anonEventListeners();
+			anonEventListeners(opts.flags);
 		} else {
 			signedInEventListeners();
 			personaliseLinks();

package/package.json

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