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

package/myft/main.scss

@@ -239,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',
@@ -255,6 +254,7 @@ $spacing-unit: 20px;
 				);
 				vertical-align: middle;
 				margin-top: -2px;
+				margin-left: -8px;
 			}
 		}
 

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

@@ -297,7 +297,7 @@ function ContentElement (hasDescription, onClick) {
 
 	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 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}
 		` : ''}
@@ -321,7 +321,13 @@ function ContentElement (hasDescription, onClick) {
 	}
 
 	function restoreFormHandler () {
-		return contentElement.addEventListener('click', onClick, { once: true });
+		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];

package/package.json

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