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

package/build-state/npm-shrinkwrap.json

@@ -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",
@@ -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",

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

@@ -323,4 +323,34 @@ $spacing-unit: 20px;
 			}
 		}
 	}
+
+	.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/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();
@@ -265,14 +267,23 @@ 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) {
+		const newListDesign = event.currentTarget.querySelector('[data-myft-ui-save-new="manageArticleLists"]');
+		if (newListDesign) {
 			return openCreateListAndAddArticleOverlay(contentId);
 		}
 
 		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'));
@@ -285,6 +296,34 @@ function initialEventListeners () {
 	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 () {
 	initialEventListeners();
 }

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

@@ -2,6 +2,8 @@ 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();
 
@@ -137,12 +139,6 @@ export default async function openSaveArticleToListVariant (name, contentId) {
 	});
 }
 
-function stringToHTMLElement (string) {
-	const template = document.createElement('template');
-	template.innerHTML = string.trim();
-	return template.content.firstChild;
-}
-
 function FormElement (createList) {
 	const formString = `
 	<form class="myft-ui-create-list-variant-form">
@@ -311,12 +307,6 @@ function positionOverlay (target) {
 	}
 }
 
-function isMobile () {
-	const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
-
-	return vw <= 980;
-}
-
 function calculateLargerScreenHalf (target) {
 	if (!target) {
 		return 'BELOW';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/n-myft-ui",
-  "version": "28.2.0",
+  "version": "28.2.1",
   "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",

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;
+	});
+});