@financial-times/n-myft-ui 30.0.1 → 30.1.0

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

@@ -5,7 +5,7 @@
 	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-config="{{#if @root.flags.myftListPublicPrivateToggle}}showPublicToggle{{/if}},{{#if modal}}modal{{/if}}"{{/if}}>
+	{{#if @root.flags.manageArticleLists}}data-myft-ui-save-new-config="{{#if modal}}modal{{/if}}"{{/if}}>
 	{{> n-myft-ui/components/csrf-token/input}}
 	<div
 		class="n-myft-ui__announcement o-normalise-visually-hidden"

package/demos/src/demo.scss

@@ -42,6 +42,12 @@ $system-code: "n-myft-ui-demo";
 	background-color: oColorsByName('claret-60');
 	color: oColorsByName('white');
 }
+
+.concept-collection--inverse-monochrome {
+	background-color: oColorsByName('white');
+	color: oColorsByName('black');
+}
+
 .concept-collection--alphaville {
 	background-color: oColorsByName('matisse');
 	color: oColorsByName('white');

package/demos/templates/demo.html

@@ -212,6 +212,41 @@
 				</div>
 			</div>
 
+			<div class="o-grid-row">
+				<div data-o-grid-colspan="12">
+					<div class="concept-collection concept-collection--inverse-monochrome">
+						<h3 class="concept-collection__title">
+							Inverse Monochrome
+						</h3>
+						<ul class="concept-collection__list">
+							<li>
+								<button
+									class="n-myft-follow-button n-myft-follow-button--inverse-monochrome"
+									aria-pressed="false">
+									Theo Leanse
+								</button>
+							</li>
+							<li>
+								<button
+									class="n-myft-follow-button n-myft-follow-button--inverse-monochrome"
+									aria-pressed="true">
+									Mr. and Mrs. Dursley, of number four, Privet Drive, were proud to
+									say that they were perfectly normal, thank you very much.
+								</button>
+							</li>
+							<li>
+								<button
+									disabled
+									class="n-myft-follow-button n-myft-follow-button--inverse-monochrome"
+									aria-pressed="true">
+									chee
+								</button>
+							</li>
+						</ul>
+					</div>
+				</div>
+			</div>
+
 			<div class="o-grid-row">
 				<div data-o-grid-colspan="12">
 					<div class="concept-collection concept-collection--opinion">
@@ -428,6 +463,42 @@
 				</div>
 			</div>
 
+			<div class="o-grid-row">
+				<div data-o-grid-colspan="12">
+					<div class="concept-collection concept-collection--inverse-monochrome">
+						<h3 class="concept-collection__title">
+							Inverse Monochrome
+						</h3>
+
+						<ul class="concept-collection__list">
+							<li>
+								<a
+									class="n-myft-concept-pill n-myft-concept-pill--inverse-monochrome"
+									aria-pressed="false">
+									Theo Leanse
+								</a>
+							</li>
+							<li>
+								<a
+									class="n-myft-concept-pill n-myft-concept-pill--inverse-monochrome"
+									aria-pressed="false">
+									Mr. and Mrs. Dursley, of number four, Privet Drive, were proud to
+									say that they were perfectly normal, thank you very much.
+								</a>
+							</li>
+							<li>
+								<a
+									disabled
+									class="n-myft-concept-pill n-myft-concept-pill--inverse-monochrome"
+									aria-pressed="true">
+									chee
+								</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+			</div>
+
 			<div class="o-grid-row">
 				<div data-o-grid-colspan="12">
 					<div class="concept-collection concept-collection--opinion">

package/mixins/lozenge/_themes.scss

@@ -32,6 +32,14 @@ $myft-lozenge-themes: (
 		pressed-highlight: rgba(oColorsByName('white'), 0.2),
 		disabled: rgba(oColorsByName('white'), 0.5),
 	),
+	inverse-monochrome: (
+		toggle-button-theme: ('color': 'black'),
+		background: oColorsByName('black'),
+		text: oColorsByName('white'),
+		highlight: oColorsByName('black-80'),
+		pressed-highlight: rgba(oColorsByName('black'), 0.2),
+		disabled: rgba(oColorsByName('black'), 0.5),
+	),
 	alphaville: (
 		toggle-button-theme: 'inverse',
 		background: oColorsByName('white'),

package/myft/ui/lists.js

@@ -291,7 +291,7 @@ function initialEventListeners () {
 			// 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',
+					category: 'lists',
 					action: 'savedArticle',
 					article_id: contentId,
 					teamName: 'customer-products-us-growth',

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, modal = false } = options;
+	const { name, modal = false } = options;
 
 	function createList (newList, cb) {
 		if(!newList || !newList.name) {
@@ -112,7 +112,7 @@ export default async function openSaveArticleToListVariant (contentId, options =
 
 	function openFormHandler () {
 		hideListElement();
-		const formElement = FormElement(createList, showPublicToggle, attachDescription, onFormListCreated, onFormCancel, modal);
+		const formElement = FormElement(createList, attachDescription, onFormListCreated, onFormCancel, modal);
 		const overlayContent = document.querySelector('.o-overlay__content');
 		removeDescription();
 		overlayContent.insertAdjacentElement('beforeend', formElement);
@@ -166,7 +166,7 @@ function getResizeHandler (target) {
 	};
 }
 
-function FormElement (createList, showPublicToggle, attachDescription, onListCreated, onCancel, modal=false) {
+function FormElement (createList, 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">
@@ -176,24 +176,21 @@ function FormElement (createList, showPublicToggle, attachDescription, onListCre
 			</span>
 		</label>
 
-		${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-public" 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>
+		<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-public" 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>
-					</label>
-				</span>
-			</div>` :
-		''
-}
+						<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">
@@ -233,7 +230,6 @@ function FormElement (createList, showPublicToggle, attachDescription, onListCre
 	function handleCancelClick (event) {
 		event.preventDefault();
 		event.stopPropagation();
-		triggerCancelEvent();
 		formElement.remove();
 		if (!lists.length) attachDescription();
 		onCancel();
@@ -242,9 +238,7 @@ function FormElement (createList, showPublicToggle, attachDescription, onListCre
 	formElement.querySelector('button[type="submit"]').addEventListener('click', handleSubmit);
 	formElement.querySelector('button[type="button"]').addEventListener('click', handleCancelClick);
 
-	if (showPublicToggle) {
-		addPublicToggleListener(formElement);
-	}
+	addPublicToggleListener(formElement);
 
 	return formElement;
 }
@@ -253,7 +247,6 @@ function addPublicToggleListener (formElement) {
 	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('input[name="is-public"]').addEventListener('click', onPublicToggleClick);
@@ -488,20 +481,6 @@ function triggerCreateListEvent (contentId, listId) {
 	}));
 }
 
-// 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 () {
@@ -516,20 +495,6 @@ function triggerAddToNewListEvent () {
 	}));
 }
 
-// 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
-	}));
-}
-
 //Temporary event to determine whether users need to scroll to add to a list
 function checkScrollToAdd () {
 	//if the bottom of the overlay was not showing and scrolling has occurred since it was opened

package/package.json

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