@financial-times/n-myft-ui 30.3.0 → 30.4.2

package/demos/templates/demo.html

@@ -21,66 +21,116 @@
 	<div class="o-grid-container o-grid-container--snappy demo-container">
 		<h1>{{title}}</h1>
 
+
+		<section
+			id="example-component"
+			class="demo-section">
+			<div class="o-grid-row">
+
+				<div data-o-grid-colspan="12">
+					<h2>JSX components</h2>
+
+					{{#instantAlertsPreferencesModal}}
+						<h3
+							class="demo-section__title">
+							Instant alerts popup to manage preferences
+						</h3>
+
+						<div style="height:200px">
+							{{{renderReactComponent localPath="components/jsx/preferences-modal/preferences-modal.jsx" flags=@root.flags visible=true}}}
+						</div>
+					{{/instantAlertsPreferencesModal}}
+
+					{{#followPlusInstantAlerts}}
+						<h3
+							class="demo-section__title">
+							Follow plus instant alerts button (same appearance as normal follow button)
+						</h3>
+
+						{{{renderReactComponent localPath="components/jsx/follow-plus-instant-alerts/follow-plus-instant-alerts.jsx" conceptId=this.conceptId name=this.name flags=@root.flags}}}
+					{{/followPlusInstantAlerts}}
+
+					{{#followPlusInstantAlerts}}
+						<h3
+							class="demo-section__title">
+							Unfollow plus instant alerts button
+						</h3>
+
+						{{{renderReactComponent localPath="components/jsx/follow-plus-instant-alerts/follow-plus-instant-alerts.jsx" conceptId=this.conceptId name=this.name setFollowButtonStateToSelected=true cacheablePersonalisedUrl=true flags=@root.flags}}}
+					{{/followPlusInstantAlerts}}
+
+					{{#followPlusInstantAlerts}}
+						<h3
+							class="demo-section__title">
+							Unfollow plus instant alerts button (instant alerts turned on)
+						</h3>
+
+						{{{renderReactComponent localPath="components/jsx/follow-plus-instant-alerts/follow-plus-instant-alerts.jsx" conceptId=this.conceptId name=this.name setFollowButtonStateToSelected=true cacheablePersonalisedUrl=true setInstantAlertsOn=true flags=@root.flags}}}
+					{{/followPlusInstantAlerts}}
+				</div>
+			</div>
+		</section>
 		<section
 			id="follow-button"
 			class="demo-section">
 			<div class="o-grid-row">
 				<div data-o-grid-colspan="12">
+					<h2>Handlebars components</h2>
 					{{#followButton}}
-						<h2
+						<h3
 							class="demo-section__title">
 							Follow button
-						</h2>
+						</h3>
 						{{> n-myft-ui/components/follow-button/follow-button}}
 					{{/followButton}}
 
 					{{#followButton}}
-						<h2
+						<h3
 							class="demo-section__title">
 							Unfollow button
-						</h2>
+						</h3>
 						{{> n-myft-ui/components/follow-button/follow-button setFollowButtonStateToSelected=true }}
 					{{/followButton}}
 
 					{{#saveButton}}
-						<h2 class="demo-section__title">
+						<h3 class="demo-section__title">
 							Save button
-						</h2>
+						</h3>
 						{{> n-myft-ui/components/save-for-later/save-for-later }}
 					{{/saveButton}}
 
 					{{#saveButton}}
-						<h2 class="demo-section__title">
+						<h3 class="demo-section__title">
 							Unsave button
-						</h2>
+						</h3>
 						{{> n-myft-ui/components/save-for-later/save-for-later isSaved=true }}
 					{{/saveButton}}
 
 					{{#saveButton}}
-						<h2 class="demo-section__title">
+						<h3 class="demo-section__title">
 							Save button with icon
-						</h2>
+						</h3>
 						{{> n-myft-ui/components/save-for-later/save-for-later saveButtonWithIcon=true }}
 					{{/saveButton}}
 
 					{{#saveButton}}
-						<h2 class="demo-section__title">
+						<h3 class="demo-section__title">
 							Unsave button with icon
-						</h2>
+						</h3>
 						{{> n-myft-ui/components/save-for-later/save-for-later isSaved=true saveButtonWithIcon=true }}
 					{{/saveButton}}
 
-					<h2 class="demo-section__title">
+					<h3 class="demo-section__title">
 						Pin button
-					</h2>
+					</h3>
 					{{#each pinButton}}
 						{{> n-myft-ui/components/pin-button/pin-button }}
 					{{/each}}
 
 					{{#instantAlert}}
-						<h2 class="demo-section__title">
+						<h3 class="demo-section__title">
 							Instant Alert
-						</h2>
+						</h3>
 						{{> n-myft-ui/components/instant-alert/instant-alert }}
 					{{/instantAlert}}
 
@@ -93,9 +143,9 @@
 			class="demo-section">
 			<div class="o-grid-row">
 				<div data-o-grid-colspan="12">
-					<h2 class="demo-section__title">
+					<h3 class="demo-section__title">
 						Follow concept
-					</h2>
+					</h3>
 					<p class="demo-section__description">
 						These are used in a group of many suggested follows/unfollows such as
 						the myFT page cold start.
@@ -322,9 +372,9 @@
 			class="demo-section">
 			<div class="o-grid-row">
 				<div data-o-grid-colspan="12">
-					<h2 class="demo-section__title">
+					<h3 class="demo-section__title">
 						Onboarding call to action
-					</h2>
+					</h3>
 
 					<p class="demo-section__description">
 						Used on the myFT section of the homepage.
@@ -342,9 +392,9 @@
 			class="demo-section">
 			<div class="o-grid-row">
 				<div data-o-grid-colspan="12">
-					<h2 class="demo-section__title">
+					<h3 class="demo-section__title">
 						Concept pill
-					</h2>
+					</h3>
 					<p class="demo-section__description">
 						Used for links to concepts (eg: on the email digest page)
 					</p>
@@ -574,9 +624,9 @@
 			class="demo-section">
 			<div class="o-grid-row">
 				<div data-o-grid-colspan="12">
-					<h2 class="demo-section__title">
+					<h3 class="demo-section__title">
 						Collections
-					</h2>
+					</h3>
 
 					<p class="demo-section__description">
 						Curated collections of topics to follow.
@@ -596,9 +646,9 @@
 			class="demo-section">
 			<div class="o-grid-row">
 				<div data-o-grid-colspan="12">
-					<h2 class="demo-section__title">
+					<h3 class="demo-section__title">
 						Topic list
-					</h2>
+					</h3>
 
 					<p class="demo-section__description">
 						A list of topics to follow
@@ -618,9 +668,9 @@
 			class="demo-section">
 			<div class="o-grid-row">
 				<div data-o-grid-colspan="12">
-					<h2 class="demo-section__title">
+					<h3 class="demo-section__title">
 						Digest promo
-					</h2>
+					</h3>
 					{{> n-myft-ui/components/digest-promo/generic-promo-message }}
 					{{> n-myft-ui/components/digest-promo/promo-message }}
 				</div>

package/myft/main.scss

@@ -16,6 +16,9 @@ $n-notification-is-silent: false !default;
 @import '../components/pin-button/main';
 @import '../components/instant-alert/main';
 
+@import '../components/jsx/follow-plus-instant-alerts/main';
+@import '../components/jsx/preferences-modal/main';
+
 // TODO Fix below
 $spacing-unit: 20px;
 

package/myft/ui/myft-buttons/do-form-submit.js

@@ -43,14 +43,21 @@ function getTrackingInfo (formEl) {
 }
 
 export default function (relationshipName, formEl) {
+	const action = getAction(formEl);
+
 	if (formButtonIsDisabled(formEl)) {
 		return;
+	} else if (formEl.getAttribute('data-myft-ui-variant') === 'followPlusInstantAlerts' && action === 'remove') {
+		/**
+		 * The follow + instant alerts button has a 2 click user journey for unfollows
+		 * When the user clicks on a followed button it opens a menu modal
+		 * Amongst other options the menu modal has a "remove" option within it
+		 */
+		return;
 	} else {
 		formEl.querySelector('button').setAttribute('disabled', '');
 	}
 
-	const action = getAction(formEl);
-
 	// note that where the actor is a user, the actorId may be null, in which case myFT client will fill
 	// in the userId from the session 😕
 	const actorId = formEl.getAttribute('data-actor-id');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/n-myft-ui",
-  "version": "30.3.0",
+  "version": "30.4.2",
   "description": "Client side component for interaction with myft",
   "main": "server.js",
   "scripts": {
@@ -30,6 +30,7 @@
     "ascii-table": "0.0.9",
     "autoprefixer": "9.7.0",
     "aws-sdk-mock": "4.5.0",
+    "babel-cli": "^6.26.0",
     "babel-core": "^6.2.1",
     "babel-loader": "7.1.4",
     "babel-plugin-add-module-exports": "^0.3.0",
@@ -39,6 +40,7 @@
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.7.0",
     "babel-preset-es2015": "^6.6.0",
+    "babel-preset-react": "^6.24.1",
     "babel-runtime": "^6.9.2",
     "brotli": "^1.3.1",
     "chai": "4.2.0",
@@ -47,6 +49,7 @@
     "css-loader": "^0.23.1",
     "denodeify": "^1.2.1",
     "eslint": "6.5.1",
+    "eslint-plugin-react": "^7.33.1",
     "extract-css-block-webpack-plugin": "^1.3.0",
     "fetch-mock": "^5.0.3",
     "handlebars": "^4.0.6",
@@ -82,6 +85,7 @@
     "sinon": "^7.1.0",
     "sinon-chai": "^3.2.0",
     "snyk": "^1.216.5",
+    "sucrase": "^3.34.0",
     "webpack": "^4.46.0",
     "webpack-cli": "^4.9.2"
   },
@@ -96,7 +100,8 @@
     "@financial-times/o-overlay": "^4.0.0",
     "@financial-times/o-spacing": "^3.0.0",
     "@financial-times/o-tooltip": "^5.2.4",
-    "n-ui-foundations": "^9.0.0"
+    "n-ui-foundations": "^9.0.0",
+    "react": "^16.14.0"
   },
   "dependencies": {
     "date-fns": "2.16.1",