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

package/components/save-for-later/save-for-later.html

@@ -4,8 +4,8 @@
 	data-myft-ui="saved"
 	action="/myft/save/{{contentId}}"
 	data-js-action="/__myft/api/core/saved/content/{{contentId}}?method=put"
-	{{#if flags.manageArticleLists}}data-myft-ui-save-new="manageArticleLists"{{/if}}
-	{{#if flags.manageArticleLists}}data-myft-ui-save-new-config="{{#if flags.myftListPublicPrivateToggle}}showPublicToggle{{/if}}"{{/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 modal}}modal{{/if}}"{{/if}}>
 	{{> n-myft-ui/components/csrf-token/input}}
 	<div
 		class="n-myft-ui__announcement o-normalise-visually-hidden"
@@ -20,7 +20,7 @@
 		{{#if isSaved}}
 			{{!-- The value of alternate label needs to be the opposite of label / the current saved state. This allows the client side JS to toggle the labels on state changes --}}
 			title="{{#if title}}{{title}} is{{/if}} Saved to myFT"
-			aria-label="{{#if title}}{{title}} is{{/if}} Saved to myFT"
+			aria-label="{{#if title}}{{title}} is{{/if}} Saved to myFT - Unsave"
 			data-alternate-label="{{#if title}}Save {{title}} to myFT for later{{else}}Save this article to myFT for later{{/if}}"
 			aria-pressed="true"
 		{{else}}

package/myft/main.scss

@@ -24,6 +24,17 @@ $spacing-unit: 20px;
 	display: inline-block;
 }
 
+// article lists modal
+@include oForms($opts: (
+	'elements': ('text', 'checkbox', 'toggle')
+));
+
+@include oButtons($opts: (
+	'sizes': ('big'),
+	'types': ('primary', 'secondary'),
+	'themes': ('inverse')
+));
+
 // experimental flash animation on header icon
 @include myftHeaderIconFlash;
 
@@ -174,196 +185,198 @@ $spacing-unit: 20px;
 
 }
 
-.share-nav {
-	&.data-overlap-initialised {
-		.o-overlay {
-			transition: opacity 0.15s ease-in;
-			opacity: 0;
-			z-index: -1;
+.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;
 		}
 	}
 
-	.myft-ui-create-list-variant-message {
-		border-radius: 10px;
-		border: 1px solid oColorsByName('black-5');
-		background: oColorsByName('white-80');
+	&-buttons {
+		text-align: center;
+	}
+}
 
-		&-content {
-			display: flex;
-			flex-direction: column;
+.myft-ui-create-list-variant {
+	border-radius: 10px;
+	border: 1px solid oColorsByName('black-5');
+	background: oColorsByName('white-80');
 
-			h3 {
-				margin: 0;
-			}
-		}
+	.o-overlay__heading {
+		border-radius: 10px 10px 0 0;
+		background: oColorsByName('white-60');
+		@include oTypographySans($scale: 2);
+		color: oColorsByName('black-80');
+	}
 
-		&-buttons {
-			text-align: center;
-		}
+	.o-overlay__content {
+		@include oTypographySans($scale: 0);
+		color: oColorsByName('black-80');
+		padding: 0;
 	}
 
+	.o-overlay__title {
+		margin: 8px 14px 0 8px;
+	}
 
-	.myft-ui-create-list-variant {
-		border-radius: 10px;
-		border: 1px solid oColorsByName('black-5');
-		background: oColorsByName('white-80');
+	&-container {
+		display: block;
+		width: 340px;
+		top: 115.5px;
+		left: 50px;
+	}
 
-		.o-overlay__heading {
-			border-radius: 10px 10px 0 0;
-			background: oColorsByName('white-60');
-			@include oTypographySans($scale: 2);
-			color: oColorsByName('black-80');
-		}
+	&-add {
+		border: 0;
+		background: none;
+		@include oTypographySans($scale: 1, $weight: 'semibold');
+		color: oColorsByName('black-80');
 
-		.o-overlay__content {
-			@include oTypographySans($scale: 0);
-			color: oColorsByName('black-80');
-			padding: 0;
-		}
+		padding-left: 0;
 
-		.o-overlay__title {
-			margin: 8px 14px 0 8px;
+		&:hover {
+			text-decoration: underline;
 		}
 
-		&-container {
-			display: block;
-			width: 340px;
-			top: 115.5px;
-			left: 50px;
+		&-collapsed::before {
+			content: '';
+			@include oIconsContent(
+				'plus',
+				oColorsByName('black-80'),
+				28,
+				$iconset-version: 1
+			);
+			vertical-align: middle;
+			margin-top: -2px;
+			margin-left: -8px;
 		}
+	}
 
-		&-add {
-			border: 0;
-			background: none;
-			@include oTypographySans($scale: 1, $weight: 'semibold');
-			color: oColorsByName('black-80');
-
-			padding-left: 0;
-
-			&:hover {
-				text-decoration: underline;
-			}
+	&-add-description {
+		margin: oSpacingByName('s1') 0;
+	}
 
-			&-collapsed::before {
-				content: '';
-				@include oIconsContent(
-					'plus',
-					oColorsByName('black-80'),
-					28,
-					$iconset-version: 1
+	&-heading {
+		&::before {
+			content: '';
+			@include oIconsContent(
+				'tick',
+				oColorsByName('teal'),
+				32,
+				$iconset-version: 1
 				);
 				vertical-align: middle;
 				margin-top: -2px;
-				margin-left: -8px;
 			}
 		}
 
-		&-add-description {
-			margin: oSpacingByName('s1') 0;
-		}
+	&-footer {
+		border-top: 1px solid oColorsByName('black-5');
+		padding: oSpacingByName('s4');
+	}
 
-		&-heading {
-			&::before {
-				content: '';
-				@include oIconsContent(
-					'tick',
-					oColorsByName('teal'),
-					32,
-					$iconset-version: 1
-				);
-				vertical-align: middle;
-				margin-top: -2px;
-			}
+	&-icon {
+		&::before {
+			content: "";
+			display: inline-block;
+			background-repeat: no-repeat;
+			background-size: contain;
+			background-position: 50%;
+			background-color: transparent;
+			background-image: url(https://www.ft.com/__origami/service/image/v2/images/raw/ftlogo-v1:brand-myft?source=next-article);
+			width: 42px;
+			height: 42px;
+			vertical-align: middle;
+			margin-top: -2px;
 		}
 
-		&-footer {
-			border-top: 1px solid oColorsByName('black-5');
-			padding: oSpacingByName('s4');
+		&-visually-hidden {
+			clip: rect(0 0 0 0);
+			clip-path: inset(50%);
+			height: 1px;
+			overflow: hidden;
+			position: absolute;
+			white-space: nowrap;
+			width: 1px;
+		}
 		}
 
-		&-icon {
-			&::before {
-				content: "";
-				display: inline-block;
-				background-repeat: no-repeat;
-				background-size: contain;
-				background-position: 50%;
-				background-color: transparent;
-				background-image: url(https://www.ft.com/__origami/service/image/v2/images/raw/ftlogo-v1:brand-myft?source=next-article);
-				width: 42px;
-				height: 42px;
-				vertical-align: middle;
-				margin-top: -2px;
-			}
-
-			&-visually-hidden {
-				clip: rect(0 0 0 0);
-				clip-path: inset(50%);
-				height: 1px;
-				overflow: hidden;
-				position: absolute;
-				white-space: nowrap;
-				width: 1px;
-			}
+	&-form {
+		$field-spacing: 's4';
+		display: flex;
+		flex-direction: column;
+		width: calc(100% - 32px);
+		gap: oSpacingByName($field-spacing);
+		padding: 0 oSpacingByName($field-spacing) oSpacingByName('s3');
+
+		& >* {
+			flex: 1 1 auto;
+			margin-bottom: 0;
 		}
 
-		&-form {
-			$field-spacing: 's4';
-			display: flex;
-			flex-direction: column;
-			width: calc(100% - 32px);
-			gap: oSpacingByName($field-spacing);
-			padding: 0 oSpacingByName($field-spacing) oSpacingByName('s3');
-
-			& > * {
-				flex: 1 1 auto;
-				margin-bottom: 0;
-			}
+		& >*.o-forms-field {
+			margin-bottom: 0;
+		}
 
-			.o-forms-input {
-				margin-top: 0;
-			}
+		.o-forms-input {
+			margin-top: 0;
+		}
 
-			&-toggle {
-				position: absolute;
-			}
+		&-toggle {
+			position: absolute;
+		}
 
-			&-toggle-label::after {
-				background-color: oColorsByName('white');
-			}
+		&-toggle-label.o-forms-input__label::after {
+			background-color: oColorsByName('white');
+		}
 
-			&-buttons {
-				display: flex;
-				justify-content: flex-end;
-				@include oTypographySans($scale: 2);
-			}
+		&-buttons {
+			display: flex;
+			justify-content: flex-end;
+			@include oTypographySans($scale: 2);
+		}
 
-			&-public {
-				max-width: 300px;
-				padding: 0 3px;
-			}
+		&-public {
+			max-width: 300px;
+			padding: 0 3px;
 		}
+	}
 
-		&-lists {
-			padding: oSpacingByName('s4') oSpacingByName('s4') 0;
-			@include oTypographySans($scale: 1);
-			&-text {
-				@include oTypographySans($weight: 'semibold');
-				color: oColorsByName('black-80');
-				margin-bottom: oSpacingByName('s3');
-			}
-			&-container {
-				margin-top: 0;
-				max-height: 92px;
-				padding: 4px 2px;
-				overflow-y: auto;
-				@include oGridRespondTo($from: M) {
-					max-height: 126px;
-				}
+	&-lists {
+		padding: oSpacingByName('s4') oSpacingByName('s4') 0;
+		@include oTypographySans($scale: 1);
+		&-text {
+			@include oTypographySans($weight: 'semibold');
+			color: oColorsByName('black-80');
+			margin-bottom: oSpacingByName('s3');
+		}
+		&-container {
+			margin-top: 0;
+			max-height: 92px;
+			padding: 4px 2px;
+			overflow-y: auto;
+			@include oGridRespondTo($from: M) {
+				max-height: 126px;
 			}
 		}
 	}
+}
 
+.share-nav {
+	&.data-overlap-initialised {
+		.o-overlay {
+			transition: opacity 0.15s ease-in;
+			opacity: 0;
+			z-index: -1;
+		}
+	}
 	.myft-notification {
 		background: oColorsByName('white-80');
 		box-sizing: border-box;

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

@@ -14,7 +14,7 @@ let scrolledOnOpen;
 let listOverlayBottom;
 
 export default async function openSaveArticleToListVariant (contentId, options = {}) {
-	const { name, showPublicToggle = false } = options;
+	const { name, showPublicToggle = false, modal = false } = options;
 
 	function createList (newList, cb) {
 		if(!newList || !newList.name) {
@@ -81,9 +81,9 @@ export default async function openSaveArticleToListVariant (contentId, options =
 	const [listElement, refreshListElement, hideListElement, showListElement] = ListsElement(lists, addToList, removeFromList);
 
 	createListOverlay = new Overlay(name, {
+		modal,
 		html: contentElement,
 		heading: { title: headingElement.outerHTML },
-		modal: false,
 		parentnode: isMobile() ? '.o-share--horizontal' : '.o-share--vertical',
 		class: 'myft-ui-create-list-variant',
 	});
@@ -112,11 +112,10 @@ export default async function openSaveArticleToListVariant (contentId, options =
 
 	function openFormHandler () {
 		hideListElement();
-		const formElement = FormElement(createList, showPublicToggle, attachDescription, onFormListCreated, onFormCancel);
+		const formElement = FormElement(createList, showPublicToggle, attachDescription, onFormListCreated, onFormCancel, modal);
 		const overlayContent = document.querySelector('.o-overlay__content');
 		removeDescription();
 		overlayContent.insertAdjacentElement('beforeend', formElement);
-		formElement.elements[0].focus();
 	}
 
 	createListOverlay.open();
@@ -131,17 +130,20 @@ export default async function openSaveArticleToListVariant (contentId, options =
 			overlayContent.insertAdjacentElement('afterbegin', listElement);
 		}
 
-		positionOverlay(data.currentTarget);
+		if (!modal) {
+			positionOverlay(data.currentTarget);
+
+			window.addEventListener('oViewport.resize', resizeHandler);
+			window.addEventListener('scroll', scrollHandler);
+		}
 
 		listOverlayBottom = document.querySelector('.myft-ui-create-list-variant').getBoundingClientRect().bottom;
 
 		restoreFormHandler();
 
-		document.querySelector('.article-content').addEventListener('click', outsideClickHandler);
+		document.body.addEventListener('click', outsideClickHandler);
 
-		window.addEventListener('scroll', scrollHandler);
 
-		window.addEventListener('oViewport.resize', resizeHandler);
 	});
 
 	createListOverlay.wrapper.addEventListener('oOverlay.destroy', () => {
@@ -149,7 +151,7 @@ export default async function openSaveArticleToListVariant (contentId, options =
 
 		window.removeEventListener('oViewport.resize', resizeHandler);
 
-		document.querySelector('.article-content').removeEventListener('click', outsideClickHandler);
+		document.body.removeEventListener('click', outsideClickHandler);
 	});
 }
 
@@ -163,12 +165,13 @@ function getResizeHandler (target) {
 	};
 }
 
-function FormElement (createList, showPublicToggle, attachDescription, onListCreated, onCancel) {
+function FormElement (createList, showPublicToggle, attachDescription, onListCreated, onCancel, modal=false) {
 	const formString = `
 	<form class="myft-ui-create-list-variant-form">
 		<label class="myft-ui-create-list-variant-form-name o-forms-field">
 			<span class="o-forms-input o-forms-input--text">
-				<input class="myft-ui-create-list-variant-text" type="text" name="list-name" aria-label="List name">
+				<input class="myft-ui-create-list-variant-text" type="text" name="list-name">
+				List name
 			</span>
 		</label>
 
@@ -218,7 +221,9 @@ function FormElement (createList, showPublicToggle, attachDescription, onListCre
 		createList(newList, ((contentId, createdList) => {
 			triggerCreateListEvent(contentId, createdList.uuid);
 			triggerAddToListEvent(contentId, createdList.uuid);
-			positionOverlay(createListOverlay.wrapper);
+			if (!modal) {
+				positionOverlay(createListOverlay.wrapper);
+			}
 			onListCreated();
 		}));
 		formElement.remove();
@@ -258,10 +263,15 @@ function ContentElement (hasDescription, onClick) {
 
 	const content = `
 		<div class="myft-ui-create-list-variant-footer">
-			<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>
+			<button class="myft-ui-create-list-variant-add myft-ui-create-list-variant-add-collapsed" aria-expanded=false data-trackable="add-to-new-list" text="add to new list">Add to a new list</button>
 			${hasDescription ? `
 			${description}
 		` : ''}
+			<span
+			class="myft-ui-create-list-variant-announcement o-normalise-visually-hidden"
+			role="region"
+			aria-live="assertive"
+			/>
 		</div>
 	`;
 
@@ -284,11 +294,13 @@ function ContentElement (hasDescription, onClick) {
 
 	function restoreFormHandler () {
 		contentElement.querySelector('.myft-ui-create-list-variant-add').classList.add('myft-ui-create-list-variant-add-collapsed');
+		contentElement.querySelector('.myft-ui-create-list-variant-add').setAttribute('aria-expanded', false);
 		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');
+		contentElement.querySelector('.myft-ui-create-list-variant-add').setAttribute('aria-expanded', true);
 		onClick(event);
 	}
 

package/package.json

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