@financial-times/n-myft-ui 28.1.0 → 28.2.2

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"
       },
@@ -65,6 +65,7 @@
         "karma-sinon": "^1.0.5",
         "karma-sinon-chai": "2.0.2",
         "karma-sourcemap-loader": "^0.3.7",
+        "karma-viewport": "^1.0.9",
         "karma-webpack": "^4.0.2",
         "lintspaces-cli": "^0.7.0",
         "lolex": "5.1.1",
@@ -3383,6 +3384,84 @@
       "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
       "dev": true
     },
+    "node_modules/@types/karma": {
+      "version": "6.3.3",
+      "resolved": "https://registry.npmjs.org/@types/karma/-/karma-6.3.3.tgz",
+      "integrity": "sha512-nRMec4mTCt+tkpRqh5/pAxmnjzEgAaalIq7mdfLFH88gSRC8+bxejLiSjHMMT/vHIhJHqg4GPIGCnCFbwvDRww==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*",
+        "log4js": "^6.4.1"
+      }
+    },
+    "node_modules/@types/karma/node_modules/date-format": {
+      "version": "4.0.13",
+      "resolved": "https://registry.npmjs.org/date-format/-/date-format-4.0.13.tgz",
+      "integrity": "sha512-bnYCwf8Emc3pTD8pXnre+wfnjGtfi5ncMDKy7+cWZXbmRAsdWkOQHrfC1yz/KiwP5thDp2kCHWYWKBX4HP1hoQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/@types/karma/node_modules/flatted": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.6.tgz",
+      "integrity": "sha512-0sQoMh9s0BYsm+12Huy/rkKxVu4R1+r96YX5cG44rHV0pQ6iC3Q+mkoMFaGWObMFYQxCVT+ssG1ksneA2MI9KQ==",
+      "dev": true
+    },
+    "node_modules/@types/karma/node_modules/fs-extra": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
+      "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^4.0.0",
+        "universalify": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=6 <7 || >=8"
+      }
+    },
+    "node_modules/@types/karma/node_modules/jsonfile": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+      "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
+      "dev": true,
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/@types/karma/node_modules/log4js": {
+      "version": "6.6.1",
+      "resolved": "https://registry.npmjs.org/log4js/-/log4js-6.6.1.tgz",
+      "integrity": "sha512-J8VYFH2UQq/xucdNu71io4Fo+purYYudyErgBbswWKO0MC6QVOERRomt5su/z6d3RJSmLyTGmXl3Q/XjKCf+/A==",
+      "dev": true,
+      "dependencies": {
+        "date-format": "^4.0.13",
+        "debug": "^4.3.4",
+        "flatted": "^3.2.6",
+        "rfdc": "^1.3.0",
+        "streamroller": "^3.1.2"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/@types/karma/node_modules/streamroller": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/streamroller/-/streamroller-3.1.2.tgz",
+      "integrity": "sha512-wZswqzbgGGsXYIrBYhOE0yP+nQ6XRk7xDcYwuQAGTYXdyAUmvgVFE0YU1g5pvQT0m7GBaQfYcSnlHbapuK0H0A==",
+      "dev": true,
+      "dependencies": {
+        "date-format": "^4.0.13",
+        "debug": "^4.3.4",
+        "fs-extra": "^8.1.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
     "node_modules/@types/mdast": {
       "version": "3.0.10",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.10.tgz",
@@ -12267,6 +12346,15 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/jsonschema": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/jsonschema/-/jsonschema-1.4.1.tgz",
+      "integrity": "sha512-S6cATIPVv1z0IlxdN+zUk5EPjkGCdnhN4wVSBlvoUO1tOLJootbo9CquNJmbIh4yikWHiUedhRYrNPn1arpEmQ==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/jsprim": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.2.tgz",
@@ -12441,6 +12529,16 @@
         "graceful-fs": "^4.1.2"
       }
     },
+    "node_modules/karma-viewport": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/karma-viewport/-/karma-viewport-1.0.9.tgz",
+      "integrity": "sha512-E1xVe66vBQtI66TGOtZMzV5nf6BW5tW4TQVUqPK+oakVLdsG/ZUG688tGK0lL1q0t7nfQD1dwLD8Z9Guu/RVdg==",
+      "dev": true,
+      "dependencies": {
+        "@types/karma": "^6.3.3",
+        "jsonschema": "^1.4.0"
+      }
+    },
     "node_modules/karma-webpack": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/karma-webpack/-/karma-webpack-4.0.2.tgz",
@@ -14265,9 +14363,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",
@@ -25822,6 +25920,74 @@
       "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
       "dev": true
     },
+    "@types/karma": {
+      "version": "6.3.3",
+      "resolved": "https://registry.npmjs.org/@types/karma/-/karma-6.3.3.tgz",
+      "integrity": "sha512-nRMec4mTCt+tkpRqh5/pAxmnjzEgAaalIq7mdfLFH88gSRC8+bxejLiSjHMMT/vHIhJHqg4GPIGCnCFbwvDRww==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*",
+        "log4js": "^6.4.1"
+      },
+      "dependencies": {
+        "date-format": {
+          "version": "4.0.13",
+          "resolved": "https://registry.npmjs.org/date-format/-/date-format-4.0.13.tgz",
+          "integrity": "sha512-bnYCwf8Emc3pTD8pXnre+wfnjGtfi5ncMDKy7+cWZXbmRAsdWkOQHrfC1yz/KiwP5thDp2kCHWYWKBX4HP1hoQ==",
+          "dev": true
+        },
+        "flatted": {
+          "version": "3.2.6",
+          "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.6.tgz",
+          "integrity": "sha512-0sQoMh9s0BYsm+12Huy/rkKxVu4R1+r96YX5cG44rHV0pQ6iC3Q+mkoMFaGWObMFYQxCVT+ssG1ksneA2MI9KQ==",
+          "dev": true
+        },
+        "fs-extra": {
+          "version": "8.1.0",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
+          "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^4.0.0",
+            "universalify": "^0.1.0"
+          }
+        },
+        "jsonfile": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+          "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.6"
+          }
+        },
+        "log4js": {
+          "version": "6.6.1",
+          "resolved": "https://registry.npmjs.org/log4js/-/log4js-6.6.1.tgz",
+          "integrity": "sha512-J8VYFH2UQq/xucdNu71io4Fo+purYYudyErgBbswWKO0MC6QVOERRomt5su/z6d3RJSmLyTGmXl3Q/XjKCf+/A==",
+          "dev": true,
+          "requires": {
+            "date-format": "^4.0.13",
+            "debug": "^4.3.4",
+            "flatted": "^3.2.6",
+            "rfdc": "^1.3.0",
+            "streamroller": "^3.1.2"
+          }
+        },
+        "streamroller": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/streamroller/-/streamroller-3.1.2.tgz",
+          "integrity": "sha512-wZswqzbgGGsXYIrBYhOE0yP+nQ6XRk7xDcYwuQAGTYXdyAUmvgVFE0YU1g5pvQT0m7GBaQfYcSnlHbapuK0H0A==",
+          "dev": true,
+          "requires": {
+            "date-format": "^4.0.13",
+            "debug": "^4.3.4",
+            "fs-extra": "^8.1.0"
+          }
+        }
+      }
+    },
     "@types/mdast": {
       "version": "3.0.10",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.10.tgz",
@@ -33156,6 +33322,12 @@
         "universalify": "^0.1.2"
       }
     },
+    "jsonschema": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/jsonschema/-/jsonschema-1.4.1.tgz",
+      "integrity": "sha512-S6cATIPVv1z0IlxdN+zUk5EPjkGCdnhN4wVSBlvoUO1tOLJootbo9CquNJmbIh4yikWHiUedhRYrNPn1arpEmQ==",
+      "dev": true
+    },
     "jsprim": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.2.tgz",
@@ -33415,6 +33587,16 @@
         "graceful-fs": "^4.1.2"
       }
     },
+    "karma-viewport": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/karma-viewport/-/karma-viewport-1.0.9.tgz",
+      "integrity": "sha512-E1xVe66vBQtI66TGOtZMzV5nf6BW5tW4TQVUqPK+oakVLdsG/ZUG688tGK0lL1q0t7nfQD1dwLD8Z9Guu/RVdg==",
+      "dev": true,
+      "requires": {
+        "@types/karma": "^6.3.3",
+        "jsonschema": "^1.4.0"
+      }
+    },
     "karma-webpack": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/karma-webpack/-/karma-webpack-4.0.2.tgz",
@@ -34770,9 +34952,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,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/karma.conf.js

@@ -10,7 +10,7 @@ module.exports = function (karma) {
 
 		// frameworks to use
 		// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-		frameworks: ['mocha', 'chai', 'sinon', 'sinon-chai'],
+		frameworks: ['mocha', 'chai', 'sinon', 'sinon-chai', 'viewport'],
 
 		// list of files / patterns to load in the browser
 		files: [
@@ -110,7 +110,8 @@ module.exports = function (karma) {
 			require('karma-webpack'),
 			require('karma-chrome-launcher'),
 			require('karma-browserstack-launcher'),
-			require('karma-html-reporter')
+			require('karma-html-reporter'),
+			require('karma-viewport')
 		],
 		client: {
 			mocha: {

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');
@@ -239,7 +259,7 @@ $spacing-unit: 20px;
 		}
 
 		&-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,33 +308,89 @@ $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: 4px 2px;
+				overflow-y: auto;
+				@include oGridRespondTo($from: M) {
+					max-height: 126px;
+				}
 			}
 		}
 	}
+
+	.myft-notification {
+		background: oColorsByName('white-80');
+		box-sizing: border-box;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: absolute;
+		border-radius: 5px;
+		font-family: MetricWeb, sans-serif;
+		font-size: 18px;
+	}
+
+	.share-nav__vertical {
+		.myft-notification {
+			top: 175px;
+			width: 340px;
+			height: 44px;
+			left: 50px;
+		}
+	}
+
+	.share-nav__horizontal {
+		.myft-notification {
+			top: -52px;
+			width: 340px;
+			height: 44px;
+			z-index: 10;
+		}
+	}
 }

package/myft/ui/lib/convert-string-to-html-element.js

@@ -0,0 +1,5 @@
+export default function stringToHTMLElement (string) {
+	const template = document.createElement('template');
+	template.innerHTML = string.trim();
+	return template.content.firstChild;
+}

package/myft/ui/lib/is-mobile.js

@@ -0,0 +1,7 @@
+const MOBILE_BREAKPOINT = 980;
+
+export default function isMobile () {
+	const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+
+	return vw <= MOBILE_BREAKPOINT;
+}

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

@@ -5,8 +5,10 @@ import * as myFtUiButtonStates from './lib/button-states';
 import nNotification from '@financial-times/n-notification';
 import { uuid } from 'n-ui-foundations';
 import getToken from './lib/get-csrf-token';
+import isMobile from './lib/is-mobile';
 import oForms from '@financial-times/o-forms';
 import openSaveArticleToListVariant from './save-article-to-list-variant';
+import stringToHTMLElement from './lib/convert-string-to-html-element';
 
 const delegate = new Delegate(document.body);
 const csrfToken = getToken();
@@ -51,6 +53,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 +97,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();
 
@@ -162,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) {
@@ -176,11 +199,68 @@ 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);
+		});
+}
+
+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,14 +272,39 @@ 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 createNewListDesign = event.currentTarget.querySelector('[data-myft-ui-save-new="manageArticleLists"]');
-		if (createNewListDesign) {
-			return openCreateListAndAddArticleOverlay(contentId);
+		const newListDesign = event.currentTarget.querySelector('[data-myft-ui-save-new="manageArticleLists"]');
+		if (newListDesign) {
+			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);
 	});
 
+	document.body.addEventListener('myft.user.saved.content.remove', event => {
+		const contentId = event.detail.subject;
+
+		const newListDesign = event.currentTarget.querySelector('[data-myft-ui-save-new="manageArticleLists"]');
+		if (newListDesign) {
+			return showUnsavedNotification(contentId);
+		}
+	});
+
 	delegate.on('click', '[data-myft-ui="copy-to-list"]', event => {
 		event.preventDefault();
 		showCopyToListOverlay(event.target.getAttribute('data-content-id'), event.target.getAttribute('data-actor-id'));
@@ -208,6 +313,36 @@ function initialEventListeners () {
 		ev.preventDefault();
 		showCreateListOverlay();
 	});
+
+	delegate.on('submit', '[data-myft-ui="contained"]', handleRemoveToggleSubmit);
+}
+
+function showUnsavedNotification () {
+	const parentSelector = isMobile() ? '.o-share--horizontal' : '.o-share--vertical';
+	const parentNode = document.querySelector(parentSelector);
+
+	// We're not supporting multiple notifications for now
+	// If a notification is present, we'll silently avoid showing another
+	if (document.querySelector('.myft-notification') || !parentNode) {
+		return;
+	}
+
+	const content = `
+		<p role="alert">Removed from <a href="https://www.ft.com/myft/saved-articles">saved articles</a> in myFT</p>
+	`;
+
+	const contentNode = stringToHTMLElement(content);
+
+	const container = document.createElement('div');
+	container.className = 'myft-notification';
+	container.appendChild(contentNode);
+
+	parentNode.appendChild(container);
+
+	setTimeout(
+		() => parentNode.removeChild(container),
+		5 * 1000
+	);
 }
 
 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

@@ -2,65 +2,63 @@ import Overlay from '@financial-times/o-overlay';
 import myFtClient from 'next-myft-client';
 import { uuid } from 'n-ui-foundations';
 import getToken from './lib/get-csrf-token';
+import isMobile from './lib/is-mobile';
+import stringToHTMLElement from './lib/convert-string-to-html-element';
 
 const csrfToken = getToken();
 
 let lists = [];
 let haveLoadedLists = false;
+let createListOverlay;
 
-export default async function openSaveArticleToListVariant (name, contentId) {
-	function createList (list) {
-		if(!list) {
+export default async function openSaveArticleToListVariant (contentId, options = {}) {
+	const { name, showPublicToggle = false } = options;
+
+	function createList (newList, cb) {
+		if(!newList || !newList.name) {
 			if (!lists.length) attachDescription();
-			return contentElement.addEventListener('click', openFormHandler, { once: true });
+			return restoreFormHandler();
 		}
 
-		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.push({ name: list, uuid: createdList.actorId, checked: true });
+				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 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 });
+					announceListContainer.textContent = `${newList.name} created`;
+					restoreFormHandler();
+					cb(contentId, createdList);
 				});
 			})
 			.catch(() => {
 				if (!lists.length) attachDescription();
-				return contentElement.addEventListener('click', openFormHandler, { once: true });
+				return restoreFormHandler();
 			});
 	}
 
-	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);
 		});
 	}
 
@@ -76,9 +74,9 @@ 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 createListOverlay = new Overlay(name, {
+	createListOverlay = new Overlay(name, {
 		html: contentElement,
 		heading: { title: headingElement.outerHTML },
 		modal: false,
@@ -88,43 +86,40 @@ export default async function openSaveArticleToListVariant (name, contentId) {
 
 	function outsideClickHandler (e) {
 		const overlayContent = document.querySelector('.o-overlay__content');
-		if(createListOverlay.visible && (!overlayContent || !overlayContent.contains(e.target))) {
+		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 () {
-		const formElement = FormElement(createList);
+		const formElement = FormElement(createList, showPublicToggle, restoreFormHandler, attachDescription);
 		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) => {
-		positionOverlay(data.currentTarget);
-
 		if (lists.length) {
 			const listElement = ListsElement(lists, addToList, removeFromList);
 			const overlayContent = document.querySelector('.o-overlay__content');
 			overlayContent.insertAdjacentElement('afterbegin', listElement);
 		}
 
-		contentElement.addEventListener('click', openFormHandler, { once: true });
+		positionOverlay(data.currentTarget);
+
+		restoreFormHandler();
 
-		document.querySelector('.article-content').addEventListener('click', outsideClickHandler, { once: true });
+		document.querySelector('.article-content').addEventListener('click', outsideClickHandler);
 
 		window.addEventListener('scroll', scrollHandler);
 
@@ -135,26 +130,95 @@ export default async function openSaveArticleToListVariant (name, contentId) {
 		window.removeEventListener('scroll', scrollHandler);
 
 		window.removeEventListener('oViewport.resize', resizeHandler);
+
+		document.querySelector('.article-content').removeEventListener('click', outsideClickHandler);
 	});
 }
 
-function stringToHTMLElement (string) {
-	const template = document.createElement('template');
-	template.innerHTML = string.trim();
-	return template.content.firstChild;
+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 FormElement (createList) {
+function getResizeHandler (target) {
+	return function resizeHandler () {
+		positionOverlay(target);
+	};
+}
+
+function FormElement (createList, showPublicToggle, restoreFormHandler, attachDescription) {
 	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>
 	`;
 
@@ -164,22 +228,54 @@ function FormElement (createList) {
 		event.preventDefault();
 		event.stopPropagation();
 		const inputListName = formElement.querySelector('input[name="list-name"]');
-		createList(inputListName.value);
-		inputListName.value = '';
+		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();
+			}
+		}));
+		formElement.remove();
+	}
+
+	function handleCancelClick (event) {
+		event.preventDefault();
+		event.stopPropagation();
 		formElement.remove();
+		if (!lists.length) attachDescription();
+		restoreFormHandler();
+	}
+
+	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('button[type="submit"]').addEventListener('click', handleSubmit);
+	formElement.querySelector('button[type="button"]').addEventListener('click', handleCancelClick);
+	formElement.querySelector('input[name="is-shareable"]').addEventListener('click', onPublicToggleClick);
 
 	return formElement;
 }
 
-function ContentElement (hasDescription) {
+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">Add to a new list</button>
+			<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>
 			${hasDescription ? `
 			${description}
 		` : ''}
@@ -188,6 +284,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) {
@@ -200,12 +298,16 @@ function ContentElement (hasDescription) {
 		contentElement.insertAdjacentElement('beforeend', descriptionElement);
 	}
 
-	return [contentElement, removeDescription, attachDescription];
+	function restoreFormHandler () {
+		return contentElement.addEventListener('click', onClick, { once: true });
+	}
+
+	return [contentElement, removeDescription, attachDescription, restoreFormHandler];
 }
 
 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);
@@ -221,7 +323,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>
@@ -237,8 +339,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 ' }
@@ -254,7 +357,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);
@@ -263,6 +374,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;
@@ -282,28 +415,22 @@ 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' ? '-120px' : '50px';
+		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);
-
-	return vw <= 980;
-}
-
 function calculateLargerScreenHalf (target) {
 	if (!target) {
 		return 'BELOW';
@@ -318,20 +445,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, isShareable: false };
+		}));
 }
 
-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
 		},
@@ -339,12 +467,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
 		},
@@ -352,23 +481,71 @@ 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', {
+// 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: 'myFT',
-			action: 'create-list-success',
-			article_id: contentId
+			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.1.0",
+  "version": "28.2.2",
   "description": "Client side component for interaction with myft",
   "main": "server.js",
   "scripts": {
@@ -65,6 +65,7 @@
     "karma-sinon": "^1.0.5",
     "karma-sinon-chai": "2.0.2",
     "karma-sourcemap-loader": "^0.3.7",
+    "karma-viewport": "^1.0.9",
     "karma-webpack": "^4.0.2",
     "lintspaces-cli": "^0.7.0",
     "lolex": "5.1.1",
@@ -103,13 +104,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",

package/test/lib/is-mobile.spec.js

@@ -0,0 +1,20 @@
+const expect = require('chai').expect;
+const isMobile = require('../../myft/ui/lib/is-mobile');
+
+/* global viewport */
+
+describe('IsMobile', function () {
+	afterEach(() => {
+		viewport.reset();
+	});
+
+	it('detects a desktop device', () => {
+		viewport.set(981, 800);
+		expect(isMobile()).to.be.false;
+	});
+
+	it('detects a mobile device', () => {
+		viewport.set(979, 800);
+		expect(isMobile()).to.be.true;
+	});
+});