@financial-times/n-myft-ui 25.0.0 → 26.1.0

package/dist/bundles/bundle.js

@@ -104,18 +104,14 @@ function CsrfToken({ cacheablePersonalisedUrl, csrfToken }) {
 	let inputProps = {};
 
 	if (cacheablePersonalisedUrl) {
-		inputProps = _extends({}, inputProps, {
-			'data-myft-csrf-token': csrfToken
-		});
-	}
-
-	if (csrfToken) {
 		inputProps.value = csrfToken;
 	}
 
-	return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('input', _extends({}, inputProps, {
-		type: 'hidden',
-		name: 'token'
+	return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement("input", _extends({
+		"data-myft-csrf-token": true
+	}, inputProps, {
+		type: "hidden",
+		name: "token"
 	}));
 }
 
@@ -270,7 +266,9 @@ function FollowButton(props) {
 		flags,
 		extraClasses,
 		conceptId,
-		variant
+		variant,
+		csrfToken,
+		cacheablePersonalisedUrl
 	} = props;
 
 	const formProps = generateFormProps(props);
@@ -289,7 +287,7 @@ function FollowButton(props) {
 				'data-myft-ui': 'follow',
 				'data-concept-id': conceptId
 			}, formProps),
-			__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_1__csrf_token_input__["a" /* default */], { cacheablePersonalisedUrl: props.cacheablePersonalisedUrl, csrfToken: props.csrfToken }),
+			__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_1__csrf_token_input__["a" /* default */], { cacheablePersonalisedUrl: cacheablePersonalisedUrl, csrfToken: csrfToken }),
 			__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', {
 				className: 'n-myft-ui__announcement o-normalise-visually-hidden',
 				'aria-live': 'assertive',
@@ -415,12 +413,15 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__collections_collections__ = __webpack_require__(8);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__save_for_later_save_for_later__ = __webpack_require__(9);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__pin_button_pin_button__ = __webpack_require__(10);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__instant_alert_instant_alert__ = __webpack_require__(11);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "CsrfToken", function() { return __WEBPACK_IMPORTED_MODULE_0__csrf_token_input__["a"]; });
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "FollowButton", function() { return __WEBPACK_IMPORTED_MODULE_1__follow_button_follow_button__["a"]; });
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "ConceptList", function() { return __WEBPACK_IMPORTED_MODULE_2__concept_list_concept_list__["a"]; });
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "Collections", function() { return __WEBPACK_IMPORTED_MODULE_3__collections_collections__["a"]; });
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "SaveForLater", function() { return __WEBPACK_IMPORTED_MODULE_4__save_for_later_save_for_later__["a"]; });
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "PinButton", function() { return __WEBPACK_IMPORTED_MODULE_5__pin_button_pin_button__["a"]; });
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "InstantAlert", function() { return __WEBPACK_IMPORTED_MODULE_6__instant_alert_instant_alert__["a"]; });
+
 
 
 
@@ -2814,23 +2815,31 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 
 
 
-function ConceptList({ flags, concepts, contentType, conceptListTitle, trackable }) {
+function ConceptList({ flags, concepts, contentType, conceptListTitle, trackable, csrfToken, cacheablePersonalisedUrl }) {
 
 	const {
 		myFtApi,
 		myFtApiWrite
 	} = flags;
 
-	const generateTrackableProps = (primary, seconday) => {
+	const generateTrackableProps = (primary, secondary) => {
 		return {
-			'data-trackable': primary ? primary : seconday
+			'data-trackable': primary ? primary : secondary
 		};
 	};
 
+	const shouldDisplay = () => {
+		if (myFtApi && myFtApiWrite && Array.isArray(concepts) && concepts.length) {
+			return true;
+		}
+
+		return false;
+	};
+
 	return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
 		__WEBPACK_IMPORTED_MODULE_0_react__["Fragment"],
 		null,
-		myFtApi && myFtApiWrite && concepts && concepts.length && __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
+		shouldDisplay() && __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
 			'div',
 			_extends({
 				className: 'concept-list'
@@ -2862,7 +2871,7 @@ function ConceptList({ flags, concepts, contentType, conceptListTitle, trackable
 								className: 'concept-list__concept' }),
 							prefLabel
 						),
-						__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_1__follow_button_follow_button__["a" /* default */], { conceptId: id, name: prefLabel, flags: flags })
+						__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_1__follow_button_follow_button__["a" /* default */], { csrfToken: csrfToken, cacheablePersonalisedUrl: cacheablePersonalisedUrl, conceptId: id, name: prefLabel, flags: flags })
 					);
 				})
 			)
@@ -2886,7 +2895,7 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 
 
 
-function Collections({ title, liteStyle, flags, collectionName, trackable, concepts = [] }) {
+function Collections({ title, liteStyle, flags, collectionName, trackable, concepts = [], csrfToken, cacheablePersonalisedUrl }) {
 	const getLiteStyleModifier = () => liteStyle ? 'lite' : 'regular';
 	let formProps = {
 		method: 'POST',
@@ -2919,7 +2928,7 @@ function Collections({ title, liteStyle, flags, collectionName, trackable, conce
 			concepts && concepts.map((concept, index) => __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
 				'li',
 				{ className: 'collection__concept', key: index },
-				__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_2__follow_button_follow_button__["a" /* default */], { variant: liteStyle ? 'primary' : 'inverse', buttonText: concept.name, flags: flags, collectionName: collectionName })
+				__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_2__follow_button_follow_button__["a" /* default */], { cacheablePersonalisedUrl: cacheablePersonalisedUrl, csrfToken: csrfToken, variant: liteStyle ? 'primary' : 'inverse', buttonText: concept.name, flags: flags, collectionName: collectionName })
 			))
 		),
 		__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
@@ -2934,7 +2943,7 @@ function Collections({ title, liteStyle, flags, collectionName, trackable, conce
 					name: 'directType',
 					value: concepts.map(concept => concept.directType).join(',')
 				}),
-				__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_1__csrf_token_input__["a" /* default */], null),
+				__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_1__csrf_token_input__["a" /* default */], { csrfToken: csrfToken, cacheablePersonalisedUrl: cacheablePersonalisedUrl }),
 				__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('input', {
 					type: 'hidden',
 					name: 'name',
@@ -2973,6 +2982,31 @@ function Collections({ title, liteStyle, flags, collectionName, trackable, conce
 
 const ButtonContent = ({ saveButtonWithIcon, buttonText, isSaved, appIsStreamPage }) => {
 
+	const DefaultButtonText = () => {
+		if (appIsStreamPage !== true) {
+			return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
+				__WEBPACK_IMPORTED_MODULE_0_react__["Fragment"],
+				null,
+				__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
+					'span',
+					{ className: 'save-button-longer-copy', 'data-variant-label': true },
+					isSaved ? 'Saved ' : 'Save '
+				),
+				__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
+					'span',
+					{ className: 'n-myft-ui__button--viewport-large', 'aria-hidden': 'true' },
+					'to myFT'
+				)
+			);
+		}
+
+		return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
+			'span',
+			null,
+			isSaved ? 'Saved' : 'Save'
+		);
+	};
+
 	return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
 		__WEBPACK_IMPORTED_MODULE_0_react__["Fragment"],
 		null,
@@ -2986,33 +3020,11 @@ const ButtonContent = ({ saveButtonWithIcon, buttonText, isSaved, appIsStreamPag
 			__WEBPACK_IMPORTED_MODULE_0_react__["Fragment"],
 			null,
 			buttonText && buttonText,
-			!buttonText && __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
-				__WEBPACK_IMPORTED_MODULE_0_react__["Fragment"],
-				null,
-				appIsStreamPage !== true && __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
-					__WEBPACK_IMPORTED_MODULE_0_react__["Fragment"],
-					null,
-					__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
-						'span',
-						{ className: 'save-button-longer-copy', 'data-variant-label': true },
-						isSaved ? 'Saved ' : 'Save '
-					),
-					__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
-						'span',
-						{ className: 'n-myft-ui__button--viewport-large', 'aria-hidden': 'true' },
-						'to myFT'
-					)
-				),
-				appIsStreamPage === true && __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
-					'span',
-					null,
-					isSaved ? 'Saved' : 'Save'
-				)
-			)
+			!buttonText && __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(DefaultButtonText, null)
 		)
 	);
 };
-function SaveForLater({ flags, contentId, title, variant, trackableId, isSaved, appIsStreamPage, alternateText, saveButtonWithIcon, buttonText }) {
+function SaveForLater({ flags, contentId, title, variant, trackableId, isSaved, appIsStreamPage, alternateText, saveButtonWithIcon, buttonText, csrfToken, cacheablePersonalisedUrl }) {
 
 	const { myFtApiWrite } = flags;
 
@@ -3026,7 +3038,7 @@ function SaveForLater({ flags, contentId, title, variant, trackableId, isSaved,
 		};
 
 		if (isSaved) {
-			let titleText = `${title ? `${title} is` : ''} Saved to myFT`;
+			let titleText = `${title ? `${title} is` : ''} saved to myFT`;
 			props['title'] = title;
 			props['aria-label'] = titleText;
 			props['data-alternate-label'] = title ? `Save ${title} to myFT for later` : 'Save this article to myFT for later';
@@ -3035,7 +3047,7 @@ function SaveForLater({ flags, contentId, title, variant, trackableId, isSaved,
 			let titleText = title ? `Save ${title} to myFT for later` : 'Save this article to myFT for later';
 			props['title'] = titleText;
 			props['aria-label'] = titleText;
-			props['data-alternate-label'] = `${title ? `${title} is` : ''} Saved to myFT`;
+			props['data-alternate-label'] = `${title ? `${title} is` : ''} saved to myFT`;
 			props['aria-pressed'] = false;
 		}
 
@@ -3060,7 +3072,7 @@ function SaveForLater({ flags, contentId, title, variant, trackableId, isSaved,
 				'data-myft-ui': 'saved',
 				action: `/myft/save/${contentId}`,
 				'data-js-action': `/__myft/api/core/saved/content/${contentId}?method=put` },
-			__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_1__csrf_token_input__["a" /* default */], null),
+			__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_1__csrf_token_input__["a" /* default */], { csrfToken: csrfToken, cacheablePersonalisedUrl: cacheablePersonalisedUrl }),
 			__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', {
 				className: 'n-myft-ui__announcement o-normalise-visually-hidden',
 				'aria-live': 'assertive',
@@ -3087,42 +3099,129 @@ function SaveForLater({ flags, contentId, title, variant, trackableId, isSaved,
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__csrf_token_input__ = __webpack_require__(1);
 
 
-function PinButton({ showPrioritiseButton, id, name, directType, prioritised }) {
+function PinButton({ showPrioritiseButton, id, name, directType, prioritised, csrfToken, cacheablePersonalisedUrl }) {
 
 	const getAction = () => `/__myft/api/core/prioritised/concept/${id}?method=${prioritised ? 'delete' : 'put'}`;
 
+	if (!showPrioritiseButton) {
+		return null;
+	}
+
 	return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
 		__WEBPACK_IMPORTED_MODULE_0_react__["Fragment"],
 		null,
-		showPrioritiseButton && __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
-			__WEBPACK_IMPORTED_MODULE_0_react__["Fragment"],
-			null,
-			__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('span', { className: 'myft-pin-divider' }),
+		__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('span', { className: 'myft-pin-divider' }),
+		__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
+			'div',
+			{ className: 'myft-pin-button-wrapper' },
 			__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
-				'div',
-				{ className: 'myft-pin-button-wrapper' },
-				__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
-					'form',
-					{ method: 'post', action: getAction(), 'data-myft-prioritise': true },
-					__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_1__csrf_token_input__["a" /* default */], null),
-					__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('input', { type: 'hidden', value: name, name: 'name' }),
-					__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('input', { type: 'hidden', value: directType || 'http://www.ft.com/ontology/concept/Concept', name: 'directType' }),
-					__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', {
-						className: 'n-myft-ui__announcement o-normalise-visually-hidden',
-						'aria-live': 'assertive',
-						'data-pressed-text': `${name} pinned in myFT.`,
-						'data-unpressed-text': `Unpinned ${name} from myFT.`
-					}),
-					__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('button', { id: `myft-pin-button__${id}`,
-						className: 'myft-pin-button',
-						'data-prioritise-button': true,
-						'data-trackable': 'prioritised',
-						'data-concept-id': id,
-						'data-prioritised': prioritised ? true : false,
-						'aria-label': `${prioritised ? 'Unpin' : 'Pin'} ${name} ${prioritised ? 'from' : 'in'} myFT`,
-						'aria-pressed': prioritised ? true : false,
-						title: `${prioritised ? 'Unpin' : 'Pin'} ${name}` })
-				)
+				'form',
+				{ method: 'post', action: getAction(), 'data-myft-prioritise': true },
+				__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_1__csrf_token_input__["a" /* default */], { csrfToken: csrfToken, cacheablePersonalisedUrl: cacheablePersonalisedUrl }),
+				__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('input', { type: 'hidden', value: name, name: 'name' }),
+				__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('input', { type: 'hidden', value: directType || 'http://www.ft.com/ontology/concept/Concept', name: 'directType' }),
+				__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', {
+					className: 'n-myft-ui__announcement o-normalise-visually-hidden',
+					'aria-live': 'assertive',
+					'data-pressed-text': `${name} pinned in myFT.`,
+					'data-unpressed-text': `Unpinned ${name} from myFT.`
+				}),
+				__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('button', { id: `myft-pin-button__${id}`,
+					className: 'myft-pin-button',
+					'data-prioritise-button': true,
+					'data-trackable': 'prioritised',
+					'data-concept-id': id,
+					'data-prioritised': prioritised ? true : false,
+					'aria-label': `${prioritised ? 'Unpin' : 'Pin'} ${name} ${prioritised ? 'from' : 'in'} my F T`,
+					'aria-pressed': prioritised ? true : false,
+					title: `${prioritised ? 'Unpin' : 'Pin'} ${name}` })
+			)
+		)
+	);
+}
+
+/***/ }),
+/* 11 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (immutable) */ __webpack_exports__["a"] = InstantAlert;
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__(0);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_react__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__csrf_token_input__ = __webpack_require__(1);
+
+
+
+/**
+ *
+ * @param {Object} props
+ * @param {string} props.name
+ * @param {Object} props.flags
+ * @param {booelan} props.hideButtonText
+ * @param {string} props.conceptId
+ * @param {string} props.name
+ * @param {string} props.extraClasses
+ * @param {boolean} props.directType
+ * @param {string} props.cacheablePersonalisedUrl
+ * @param {string} props.hasInstantAlert
+ * @param {string} props.buttonText
+ * @param {string} props.alternateText
+ * @param {string} props.variant
+ * @param {string} props.size
+ */
+function InstantAlert(props) {
+
+	const {
+		hasInstantAlert,
+		cacheablePersonalisedUrl,
+		name,
+		alternateText,
+		buttonText,
+		conceptId,
+		variant,
+		size,
+		flags,
+		hideButtonText,
+		directType,
+		extraClasses
+	} = props;
+
+	const generateButtonProps = () => {
+
+		let buttonProps = {
+			'aria-pressed': `${Boolean(hasInstantAlert) && Boolean(cacheablePersonalisedUrl)}`,
+			'aria-label': `Get instant alerts for ${name}`,
+			'data-alternate-label': `Stop instant alerts for ${name}`,
+			'data-alternate-text': alternateText ? alternateText : buttonText ? buttonText : 'Instant alerts',
+			'data-concept-id': conceptId, // duplicated here for tracking
+			'data-trackable': 'instant',
+			title: `Get instant alerts for ${name}`,
+			value: hasInstantAlert ? false : true,
+			type: 'submit',
+			name: '_rel.instant',
+			className: `n-myft-ui__button n-myft-ui__button--instant n-myft-ui__button--instant-light${variant ? ` n-myft-ui__button--${variant}` : ''}${size ? ` n-myft-ui__button--${size}` : ''}`
+		};
+		return buttonProps;
+	};
+
+	return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
+		__WEBPACK_IMPORTED_MODULE_0_react__["Fragment"],
+		null,
+		flags.myFtApiWrite && __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
+			'form',
+			{ className: `n-myft-ui n-myft-ui--instant${hideButtonText ? ' n-myft-ui--instant--hide-text' : ''}${extraClasses ? ` ${extraClasses}` : ''}`,
+				method: 'GET',
+				'data-myft-ui': 'instant',
+				'data-concept-id': conceptId,
+				action: `/myft/add/${conceptId}?instant=true`,
+				'data-js-action': `/__myft/api/core/followed/concept/${conceptId}?method=put` },
+			__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_1__csrf_token_input__["a" /* default */], null),
+			__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('input', { type: 'hidden', value: name, name: 'name' }),
+			__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('input', { type: 'hidden', value: directType || 'http://www.ft.com/ontology/concept/Concept', name: 'directType' }),
+			__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
+				'button',
+				generateButtonProps(),
+				buttonText ? buttonText : 'Instant alerts'
 			)
 		)
 	);

package/jsx-migration.md

@@ -0,0 +1,16 @@
+### Handlebars to JSX migration notes
+
+This document serves as a troubleshooting guide for `handlebars` components that have been migrated to `jsx`. Also, notes can be added to this document for anything related to the migration.
+
+A common cause of issues/bugs with migrated components is missing HTML attributes. The business logic related to these components heavily depend on these attributes and their values. If an action related to any of these migrated components fails, compare the jsx version and the handlebars version to see if an attribute is getting the wrong value or is missing.
+
+Another cause of issues will be missing flags. Ensure consuming applications pass the required flags to these components.
+
+Currently we have migrated the following `handlebars` partials to `jsx`:
+- components/collections/collections.jsx [handlebars fount here](https://github.com/Financial-Times/n-myft-ui/blob/dfbf06d10f78756871cfe8d2aeb863ce4bcca1e1/components/collections/collections.html)
+- components/concept-list/concept-list.jsx [handlebars found here](https://github.com/Financial-Times/n-myft-ui/blob/dfbf06d10f78756871cfe8d2aeb863ce4bcca1e1/components/concept-list/concept-list.html)
+- components/follow-button/follow-button.jsx [handlebars found here](https://github.com/Financial-Times/n-myft-ui/blob/bf2145fcfd211001dfab6a3a271dd72808d062bd/components/follow-button/follow-button.html)
+- components/pin-button/pin-button.jsx [handlebars found here](https://github.com/Financial-Times/n-myft-ui/blob/dfbf06d10f78756871cfe8d2aeb863ce4bcca1e1/components/pin-button/pin-button.html)
+- components/save-for-later/save-for-later.jsx [handlebars found here](https://github.com/Financial-Times/n-myft-ui/blob/11d483364bb0f002c3a0b45bc024c83bb055268e/components/save-for-later/save-for-later.jsx)
+- components/instant-alert/instant-alert.jsx [handlebars found here](https://github.com/Financial-Times/n-myft-ui/blob/dfbf06d10f78756871cfe8d2aeb863ce4bcca1e1/components/instant-alert/instant-alert.html)
+- components/csrf-token/input.jsx [handlebars found here](https://github.com/Financial-Times/n-myft-ui/blob/bf2145fcfd211001dfab6a3a271dd72808d062bd/components/csrf-token/input.html)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/n-myft-ui",
-  "version": "25.0.0",
+  "version": "26.1.0",
   "description": "Client side component for interaction with myft",
   "main": "dist/bundles/bundle.js",
   "module": "dist/bundles/bundle.js",
@@ -8,7 +8,7 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "commit": "commit-wizard",
     "prepare": "npx snyk protect || npx snyk protect -d || true",
-    "preinstall": "npm_config_yes=true npx check-engine",
+    "preinstall": "[ \"$INIT_CWD\" != \"$PWD\" ] || npm_config_yes=true npx check-engine",
     "build-package": "webpack"
   },
   "repository": {

package/components/instant-alert/instant-alert.html

@@ -1,47 +0,0 @@
-{{#if @root.flags.myFtApiWrite}}
-<form class="n-myft-ui n-myft-ui--instant{{#if hideButtonText}} n-myft-ui--instant--hide-text{{/if}} {{extraClasses}}"
-			method="GET"
-			data-myft-ui="instant"
-			data-concept-id="{{conceptId}}"
-			action="/myft/add/{{conceptId}}?instant=true"
-			data-js-action="/__myft/api/core/followed/concept/{{conceptId}}?method=put">
-	{{{renderReactComponent localPath="components/csrf-token/input"}}}
-	<input type="hidden" value="{{name}}" name="name">
-	{{#if directType}}
-	<input type="hidden" value="{{directType}}" name="directType">
-	{{else}}
-	<input type="hidden" value="http://www.ft.com/ontology/concept/Concept" name="directType">
-	{{/if}}
-	<button
-			aria-label="Get instant alerts for {{name}}"
-			{{#ifAll hasInstantAlert @root.cacheablePersonalisedUrl}}
-			aria-pressed="true"
-			{{else}}
-			aria-pressed="false"
-			{{/ifAll}}
-	class="n-myft-ui__button
-	{{#variant}} n-myft-ui__button--{{this}}{{/variant}}
-	{{#size}} n-myft-ui__button--{{this}}{{/size}}
-	n-myft-ui__button--instant
-	n-myft-ui__button--instant-light"
-	data-alternate-label="Stop instant alerts for {{name}}"
-	{{#if alternateText}}
-	data-alternate-text="{{alternateText}}"
-	{{else}}
-	{{#if buttonText}}
-	data-alternate-text="{{buttonText}}"
-	{{else}}
-	data-alternate-text="Instant alerts"
-	{{/if}}
-	{{/if}}
-	data-concept-id="{{conceptId}}" {{! duplicated here for tracking}}
-	data-trackable="instant"
-	title="Get instant alerts for {{name}}"
-	name="_rel.instant"
-	value="{{#if hasInstantAlert}}false{{else}}true{{/if}}"
-	type="submit"
-	>{{#if buttonText}}{{buttonText}}{{else}}Instant alerts{{/if}}</button>
-</form>
-{{else}}
-<!-- Instant alert button hidden due to myFtApiWrite being off -->
-{{/if}}