@financial-times/n-myft-ui 29.0.0 → 29.0.3

package/components/collections/collections.html

@@ -2,9 +2,9 @@
 	class="collection {{#if liteStyle}}collection--lite{{else}}collection--regular{{/if}}"
 	data-trackable="{{#if trackable}}{{trackable}}{{else}}collection{{/if}}">
 	<header class="collection__header {{#if liteStyle}}collection__header--lite{{else}}collection__header--regular{{/if}}">
-		<h2 class="collection__title {{#if liteStyle}}collection__title--lite{{else}}collection__title--regular{{/if}}">
+		<h3 class="collection__title {{#if liteStyle}}collection__title--lite{{else}}collection__title--regular{{/if}}">
 			{{title}}
-		</h2>
+		</h3>
 	</header>
 	<ul class="collection__concepts">
 		{{#concepts}}

package/mixins/lozenge/_themes.scss

@@ -13,7 +13,8 @@ $myft-lozenge-themes: (
 		highlight: rgba(white, 0.8),
 		pressed-highlight: rgba(white, 0.2),
 		disabled: rgba(oColorsByName('white'), 0.5),
-		focus-outline: oColorsByName('white')
+		focus-outline: oColorsByName('white'),
+		mix-blend-mode: lighten
 	),
 	opinion: (
 		background: oColorsByName('oxford-40'),

package/mixins/lozenge/main.scss

@@ -73,11 +73,20 @@
 			border: 1px solid getThemeColor(background);
 			color: getThemeColor(text);
 
+			@if getThemeColor(mix-blend-mode) {
+				mix-blend-mode: lighten;
+			}
 			&:hover,
 			&:focus {
-				background-color: getThemeColor(highlight);
 				border-color: getThemeColor(highlight);
 				color: getThemeColor(text);
+
+				@if getThemeColor(mix-blend-mode) {
+					mix-blend-mode: getThemeColor(mix-blend-mode);
+					background-color: rgba(getThemeColor(highlight), 0.85);
+				} @else {
+					background-color: getThemeColor(highlight);
+				}
 			}
 		}
 

package/myft/ui/lists.js

@@ -14,7 +14,7 @@ const delegate = new Delegate(document.body);
 const csrfToken = getToken();
 
 
-function openOverlay (html, { name = 'myft-ui', title = ' ', shaded = false }) {
+function openOverlay (html, { name = 'myft-ui', title = ' ', shaded = false, trigger = false }) {
 	// If an overlay already exists of the same name destroy it.
 	const overlays = Overlay.getOverlays();
 	const existingOverlay = overlays[name];
@@ -24,11 +24,15 @@ function openOverlay (html, { name = 'myft-ui', title = ' ', shaded = false
 	// Create a new overlay.
 	const overlay = new Overlay(name, {
 		heading: { title, shaded },
-		html
+		html,
 	});
 
 	overlay.open();
 
+	if (trigger) {
+		document.body.addEventListener('oOverlay.destroy', () => trigger.focus(), true);
+	}
+
 	return new Promise(resolve => {
 		document.body.addEventListener('oOverlay.ready', () => resolve(overlay));
 	});
@@ -143,7 +147,7 @@ function setUpCreateListListeners (overlay, contentId) {
 }
 
 
-function showListsOverlay (overlayTitle, formHtmlUrl, contentId) {
+function showListsOverlay (overlayTitle, formHtmlUrl, contentId, trigger) {
 	myFtClient.personaliseUrl(formHtmlUrl)
 		.then(url => fetch(url, {
 			credentials: 'same-origin'
@@ -155,7 +159,7 @@ function showListsOverlay (overlayTitle, formHtmlUrl, contentId) {
 				throw new Error(`Unexpected response: ${res.statusText}`);
 			}
 		})
-		.then(html => openOverlay(html, { name: 'myft-lists', title: overlayTitle }))
+		.then(html => openOverlay(html, { name: 'myft-lists', title: overlayTitle, trigger }))
 		.then(overlay => {
 			oForms.init(overlay.content);
 			setUpSaveToExistingListListeners(overlay, contentId);
@@ -171,12 +175,12 @@ function showListsOverlay (overlayTitle, formHtmlUrl, contentId) {
 
 }
 
-function showCopyToListOverlay (contentId, excludeList) {
-	showListsOverlay('Copy to list', `/myft/list?fragment=true&copy=true&contentId=${contentId}&excludeList=${excludeList}`, contentId);
+function showCopyToListOverlay (contentId, excludeList, trigger) {
+	showListsOverlay('Copy to list', `/myft/list?fragment=true&copy=true&contentId=${contentId}&excludeList=${excludeList}`, contentId, trigger);
 }
 
-function showCreateListOverlay () {
-	showListsOverlay('Create list', '/myft/list?fragment=true');
+function showCreateListOverlay (trigger) {
+	showListsOverlay('Create list', '/myft/list?fragment=true', null, trigger);
 }
 
 function showArticleSavedOverlay (contentId) {
@@ -313,11 +317,11 @@ function initialEventListeners () {
 
 	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'));
+		showCopyToListOverlay(event.target.getAttribute('data-content-id'), event.target.getAttribute('data-actor-id'), event.target);
 	});
-	delegate.on('click', '[data-myft-ui="create-list"]', ev => {
-		ev.preventDefault();
-		showCreateListOverlay();
+	delegate.on('click', '[data-myft-ui="create-list"]', event => {
+		event.preventDefault();
+		showCreateListOverlay(event.target);
 	});
 
 	delegate.on('submit', '[data-myft-ui="contained"]', handleRemoveToggleSubmit);

package/package.json

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