@financial-times/n-myft-ui 25.0.1 → 27.1.0

package/components/collections/collections.html

@@ -10,9 +10,17 @@
 		{{#concepts}}
 			<li class="collection__concept">
 				{{#if ../liteStyle}}
-					{{{renderReactComponent localPath="components/follow-button/follow-button" variant="primary" buttonText=name flags=@root.flags collectionName=../collectionName}}}
+					{{>	n-myft-ui/components/follow-button/follow-button
+						variant="primary"
+						buttonText=name
+						collectionName=../collectionName
+					}}
 				{{else}}
-					{{{renderReactComponent localPath="components/follow-button/follow-button" variant="inverse" buttonText=name flags=@root.flags collectionName=../collectionName}}}
+					{{>	n-myft-ui/components/follow-button/follow-button
+						variant="inverse"
+						buttonText=name
+						collectionName=../collectionName
+					}}
 				{{/if}}
 			</li>
 		{{/concepts}}
@@ -42,7 +50,7 @@
 						{{~/unless~}}
 					{{~/concepts~}}"
 			/>
-			{{{renderReactComponent localPath="components/csrf-token/input"}}}
+			{{> n-myft-ui/components/csrf-token/input}}
 			<input
 				type="hidden"
 				name="name"

package/components/concept-list/concept-list.html

@@ -20,7 +20,10 @@
 						class="concept-list__concept">
 						{{prefLabel}}
 					</a>
-					{{{renderReactComponent localPath="components/follow-button/follow-button" conceptId=id name=prefLabel flags=@root.flags}}}
+					{{> n-myft-ui/components/follow-button/follow-button
+						conceptId=id
+						name=prefLabel
+					}}
 				</li>
 			{{/each}}
 		</ul>

package/components/csrf-token/input.html

@@ -0,0 +1,5 @@
+<input
+	data-myft-csrf-token
+	value="{{#if @root.cacheablePersonalisedUrl}}{{@root.csrfToken}}{{/if}}"
+	type="hidden"
+	name="token">

package/components/follow-button/follow-button.html

@@ -0,0 +1,79 @@
+{{#if @root.flags.myFtApiWrite}}
+	<form
+		class="n-myft-ui n-myft-ui--follow {{extraClasses}}"
+		method="GET"
+		data-myft-ui="follow"
+		data-concept-id="{{conceptId}}"
+		{{#if collectionName}}data-myft-tracking="collectionName={{collectionName}}"{{/if}}
+		{{#if followPlusDigestEmail}}
+			action="/__myft/api/core/follow-plus-digest-email/{{conceptId}}?method=put"
+			data-myft-ui-variant="followPlusDigestEmail"
+		{{else}}
+			{{#ifAll setFollowButtonStateToSelected @root.cacheablePersonalisedUrl}}
+				action="/myft/remove/{{conceptId}}"
+				data-js-action="/__myft/api/core/followed/concept/{{conceptId}}?method=delete"
+			{{else}}
+				action="/myft/add/{{conceptId}}"
+				data-js-action="/__myft/api/core/followed/concept/{{conceptId}}?method=put"
+			{{/ifAll}}
+		{{/if}}>
+		{{> n-myft-ui/components/csrf-token/input}}
+		<div
+			class="n-myft-ui__announcement o-normalise-visually-hidden"
+			aria-live="assertive"
+			data-pressed-text="Now following {{name}}."
+			data-unpressed-text="No longer following {{name}}."
+		></div>
+		<button
+			{{#ifAll setFollowButtonStateToSelected @root.cacheablePersonalisedUrl}}
+				aria-label="Remove {{name}} from myFT"
+				title="Remove {{name}} from myFT"
+				data-alternate-label="Add {{name}} to myFT"
+				aria-pressed="true"
+				{{#if alternateText}}
+					data-alternate-text="{{alternateText}}"
+				{{else}}
+					{{#if buttonText}}
+						data-alternate-text="{{buttonText}}"
+					{{else}}
+						data-alternate-text="Add to myFT"
+					{{/if}}
+				{{/if}}
+			{{else}}
+				aria-pressed="false"
+				aria-label="Add {{name}} to myFT"
+				title="Add {{name}} to myFT"
+				data-alternate-label="Remove {{name}} from myFT"
+				{{#if alternateText}}
+					data-alternate-text="{{alternateText}}"
+				{{else}}
+					{{#if buttonText}}
+						data-alternate-text="{{buttonText}}"
+					{{else}}
+						data-alternate-text="Added"
+					{{/if}}
+				{{/if}}
+			{{/ifAll}}
+			class="{{extraButtonClasses}}
+				n-myft-follow-button
+				{{~#variant}} n-myft-follow-button--{{this}}{{/variant~}}"
+			data-concept-id="{{conceptId}}" {{! duplicated here for tracking}}
+			{{#if followPlusDigestEmail}}
+				data-trackable-context-messaging="add-to-myft-plus-digest-button"
+			{{/if}}
+			data-trackable="follow"
+			type="submit">
+			{{~#if buttonText~}}
+				{{buttonText}}
+			{{~else~}}
+				{{~#ifAll setFollowButtonStateToSelected @root.cacheablePersonalisedUrl~}}
+					Added
+				{{~else~}}
+					Add to myFT
+				{{~/ifAll~}}
+			{{~/if~}}
+		</button>
+	</form>
+{{else}}
+	<!-- Add to myFT button hidden due to myFtApiWrite being off -->
+{{/if}}

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

@@ -5,7 +5,7 @@
 			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"}}}
+	{{> n-myft-ui/components/csrf-token/input}}
 	<input type="hidden" value="{{name}}" name="name">
 	{{#if directType}}
 	<input type="hidden" value="{{directType}}" name="directType">

package/components/pin-button/pin-button.html

@@ -2,7 +2,7 @@
 <span class="myft-pin-divider"></span>
 <div class="myft-pin-button-wrapper">
 	<form method="post" action="/__myft/api/core/prioritised/concept/{{id}}?method={{#if prioritised}}delete{{else}}put{{/if}}" data-myft-prioritise>
-		{{{renderReactComponent localPath="components/csrf-token/input"}}}
+		{{> n-myft-ui/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}}

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

@@ -4,7 +4,7 @@
 	data-myft-ui="saved"
 	action="/myft/save/{{contentId}}"
 	data-js-action="/__myft/api/core/saved/content/{{contentId}}?method=put">
-	{{{renderReactComponent localPath="components/csrf-token/input"}}}
+	{{> n-myft-ui/components/csrf-token/input}}
 	<div
 		class="n-myft-ui__announcement o-normalise-visually-hidden"
 		aria-live="assertive"

package/components/unread-articles-indicator/date-fns.js

@@ -2,12 +2,12 @@
 // the detail => https://github.com/date-fns/date-fns/blob/HEAD/CHANGELOG.md#200---2019-08-20
 // By adding validation for dates before their functions allows us to know it when unexpected value passed.
 
-import isTodayOriginal from 'date-fns/src/isToday';
-import isAfterOriginal from 'date-fns/src/isAfter';
-import addMinutesOriginal from 'date-fns/src/addMinutes';
-import startOfDayOriginal from 'date-fns/src/startOfDay';
-import isValidOriginal from 'date-fns/src/isValid';
-import parseISO from 'date-fns/src/parseISO';
+import isTodayOriginal from "date-fns/src/isToday";
+import isAfterOriginal from "date-fns/src/isAfter";
+import addMinutesOriginal from "date-fns/src/addMinutes";
+import startOfDayOriginal from "date-fns/src/startOfDay";
+import isValidOriginal from "date-fns/src/isValid";
+import parseISO from "date-fns/src/parseISO";
 
 const isValid = (date) => {
 	if (!isValidOriginal(date)) {

package/demos/app.js

@@ -1,17 +1,11 @@
-require('sucrase/register');
 const nExpress = require('@financial-times/n-express');
 const chalk = require('chalk');
 const errorHighlight = chalk.bold.red;
 const highlight = chalk.bold.green;
-const { PageKitReactJSX } = require('@financial-times/dotcom-server-react-jsx');
-const fs = require('fs');
 const path = require('path');
 const handlebars = require('handlebars');
 const { PageKitHandlebars, helpers } = require('@financial-times/dotcom-server-handlebars');
 
-const demoJSX = require('./templates/demo').default;
-const demoLayoutSource = fs.readFileSync(path.join(__dirname, './templates/demo-layout.html'),'utf8').toString();
-
 const fixtures = {
 	followButton: require('./fixtures/follow-button'),
 	saveButton: require('./fixtures/save-button'),
@@ -37,7 +31,6 @@ const app = module.exports = nExpress({
 
 app.set('views', path.join(__dirname, '/templates'));
 app.set('view engine', '.html');
-
 app.engine('.html', new PageKitHandlebars({
 	cache: false,
 	handlebars,
@@ -48,8 +41,6 @@ app.engine('.html', new PageKitHandlebars({
 
 app.use('/public', nExpress.static(path.join(__dirname, '../public'), { redirect: false }));
 
-const jsxRenderer = (new PageKitReactJSX({ includeDoctype: false }));
-
 app.get('/', (req, res) => {
 	res.render('demo', Object.assign({
 		title: 'n-myft-ui demo',
@@ -60,22 +51,6 @@ app.get('/', (req, res) => {
 	}, fixtures));
 });
 
-app.get('/demo-jsx', async (req, res) => {
-	let demo = await jsxRenderer.render(demoJSX, Object.assign({
-		title: 'n-myft-ui demo',
-		flags: {
-			myFtApi: true,
-			myFtApiWrite: true
-		}
-	}, fixtures));
-
-	let template = handlebars.compile(demoLayoutSource);
-	let result = template({body: demo});
-
-	res.send(result);
-});
-
-
 function runPa11yTests () {
 	const spawn = require('child_process').spawn;
 	const pa11y = spawn('pa11y-ci');

package/demos/templates/demo.html

@@ -32,7 +32,7 @@
 					</h2>
 
 					{{#followButton}}
-						{{{renderReactComponent localPath="components/follow-button/follow-button" flags=@root.flags}}}
+						{{> n-myft-ui/components/follow-button/follow-button}}
 					{{/followButton}}
 
 					<h2
@@ -41,7 +41,7 @@
 					</h2>
 
 					{{#followButton}}
-						{{{renderReactComponent localPath="components/follow-button/follow-button" buttonText=name flags=@root.flags}}}
+						{{> n-myft-ui/components/follow-button/follow-button buttonText=name}}
 					{{/followButton}}
 
 					{{#saveButton}}

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@financial-times/n-myft-ui",
-  "version": "25.0.1",
+  "version": "27.1.0",
   "description": "Client side component for interaction with myft",
   "main": "server.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "commit": "commit-wizard",
     "prepare": "npx snyk protect || npx snyk protect -d || true",
-    "preinstall": "[ \"$INIT_CWD\" != \"$PWD\" ] || npm_config_yes=true npx check-engine"
+    "preinstall": "npm_config_yes=true npx check-engine"
   },
   "repository": {
     "type": "git",
@@ -20,18 +20,14 @@
   },
   "homepage": "https://github.com/Financial-Times/n-myft-ui#readme",
   "devDependencies": {
-    "@financial-times/dotcom-build-bower-resolve": "0.4.1",
-    "@financial-times/dotcom-build-code-splitting": "0.4.1",
-    "@financial-times/dotcom-build-js": "0.4.1",
-    "@financial-times/dotcom-build-sass": "0.4.1",
-    "@financial-times/dotcom-page-kit-cli": "0.4.1",
-    "@financial-times/dotcom-server-handlebars": "^3.0.0",
-    "@financial-times/dotcom-server-react-jsx": "^2.6.2",
-    "@financial-times/n-express": "^22.4.1",
+    "@financial-times/dotcom-build-bower-resolve": "^2.6.2",
+    "@financial-times/dotcom-build-code-splitting": "^5.0.0",
+    "@financial-times/dotcom-build-js": "^5.0.0",
+    "@financial-times/dotcom-build-sass": "^5.0.0",
+    "@financial-times/dotcom-page-kit-cli": "^0.6.5",
+    "@financial-times/dotcom-server-handlebars": "^5.0.0",
+    "@financial-times/n-express": "^23.0.1",
     "@financial-times/n-gage": "^8.3.2",
-    "@sucrase/jest-plugin": "^2.2.0",
-    "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "^12.1.2",
     "ascii-table": "0.0.9",
     "autoprefixer": "9.7.0",
     "aws-sdk-mock": "4.5.0",
@@ -55,18 +51,14 @@
     "css-loader": "^0.23.1",
     "denodeify": "^1.2.1",
     "eslint": "6.5.1",
-    "eslint-plugin-react": "^7.27.1",
     "extract-css-block-webpack-plugin": "^1.3.0",
-    "extract-text-webpack-plugin": "3.0.2",
     "fetch-mock": "^5.0.3",
     "handlebars": "^4.0.6",
     "handlebars-loader": "^1.4.0",
     "http-server": "^0.11.1",
     "hyperons": "^0.4.1",
     "imports-loader": "0.8.0",
-    "inject-loader": "^3.0.0",
-    "jest": "^27.4.5",
-    "jsdom": "^19.0.0",
+    "inject-loader": "^4.0.1",
     "karma": "4.4.1",
     "karma-browserstack-launcher": "1.5.1",
     "karma-chai": "^0.1.0",
@@ -77,31 +69,29 @@
     "karma-sinon": "^1.0.5",
     "karma-sinon-chai": "2.0.2",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^3.0.0",
+    "karma-webpack": "^4.0.2",
     "lintspaces-cli": "^0.7.0",
     "lolex": "5.1.1",
     "mocha": "6.2.2",
     "mockery": "2.1.0",
     "node-fetch": "2.6.0",
-    "node-sass": "^4.14.1",
+    "node-sass": "^6.0.1",
     "nodemon": "^1.9.2",
     "npm-prepublish": "^1.2.1",
     "pa11y-ci": "^2.1.1",
     "postcss-loader": "^0.9.1",
-    "react": "^17.0.2",
     "regenerator-runtime": "^0.13.3",
     "semver": "6.3.0",
     "sinon": "^7.1.0",
     "sinon-chai": "^3.2.0",
-    "snyk": "^1.216.5",
-    "sucrase": "^3.10.1"
+    "snyk": "^1.216.5"
   },
   "volta": {
-    "node": "12.22.5",
+    "node": "16.14.2",
     "npm": "7.20.2"
   },
   "engines": {
-    "node": "12.x",
+    "node": "14.x || 16.x",
     "npm": "7.x || 8.x"
   },
   "x-dash": {

package/components/csrf-token/__tests__/input.test.js

@@ -1,23 +0,0 @@
-import React from 'react';
-import CsrfToken from '../input';
-import { render } from '@testing-library/react';
-import '@testing-library/jest-dom';
-
-const props = {
-	cacheablePersonalisedUrl: false
-};
-
-describe('Csrf Token Input', () => {
-
-	test('It renders default button', async () => {
-		let { container } = render(<CsrfToken {...props} />);
-		expect(container.querySelector('[name=\'token\']')).toBeTruthy();
-	});
-
-	test('It renders csrf token attribute', async () => {
-		let { container } = render(<CsrfToken cacheablePersonalisedUrl={true} csrfToken={'test-token'} />);
-		expect(container.querySelector('[data-myft-csrf-token=\'test-token\']')).toBeTruthy();
-	});
-
-
-});

package/components/csrf-token/input.jsx

@@ -1,26 +0,0 @@
-import React from 'react';
-
-export default function CsrfToken ({ cacheablePersonalisedUrl, csrfToken }) {
-
-	let inputProps = {};
-
-	if (cacheablePersonalisedUrl) {
-		inputProps = {
-			...inputProps,
-			'data-myft-csrf-token': csrfToken
-		};
-	}
-
-	if(csrfToken) {
-		inputProps.value = csrfToken;
-	}
-
-	return (
-		<input
-			{...inputProps}
-			type="hidden"
-			name="token"
-		/>
-	);
-
-}

package/components/follow-button/__tests__/follow-button.test.js

@@ -1,40 +0,0 @@
-import React from 'react';
-import FollowButton from '../follow-button';
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-
-const props = {
-	flags: {
-		myFtApi: true,
-		myFtApiWrite: true
-	},
-	conceptId: '0000-000000-00000-0000',
-	name: 'Follow button'
-};
-
-describe('Follow button', () => {
-
-	test('It renders default button', async () => {
-		render(<FollowButton {...props} />);
-		expect(screen.findByText('Add to myFT')).toBeTruthy();
-	});
-
-	test('It renders a variant', async () => {
-		const { container } = render(<FollowButton {...props} variant={'standard'} />);
-		expect(container.getElementsByClassName('n-myft-follow-button--standard')).toHaveLength(1);
-	});
-
-	test('It renders follow button form', async () => {
-		const { container } = render(<FollowButton {...props} variant={'standard'} />);
-		expect(container.querySelector(`form[action='/myft/add/${props.conceptId}']`)).toBeTruthy();
-	});
-
-	test('Button state changes when attributes change', () => {
-		render(<FollowButton {...props}
-			variant={'standard'}
-			setFollowButtonStateToSelected={true}
-			cacheablePersonalisedUrl={true} />);
-		expect(screen.findByText('Added')).toBeTruthy();
-	});
-
-});

package/components/follow-button/follow-button.jsx

@@ -1,174 +0,0 @@
-import React from 'react';
-import CsrfToken from '../csrf-token/input';
-
-function generateFormProps (props) {
-	let generatedProps = {};
-
-	const {
-		collectionName,
-		followPlusDigestEmail,
-		conceptId,
-		setFollowButtonStateToSelected,
-		cacheablePersonalisedUrl
-	} = props;
-
-	if (collectionName) {
-		generatedProps['data-myft-tracking'] = `collectionName=${collectionName}`;
-	}
-
-	if(followPlusDigestEmail) {
-		generatedProps['action'] = `/__myft/api/core/follow-plus-digest-email/${conceptId}?method=put`;
-		generatedProps['data-myft-ui-variant'] = 'followPlusDigestEmail';
-	} else {
-		if(setFollowButtonStateToSelected && cacheablePersonalisedUrl) {
-			generatedProps['action'] = `/myft/remove/${conceptId}`;
-			generatedProps['data-js-action'] = `/__myft/api/core/followed/concept/${conceptId}?method=delete`;
-		} else {
-			generatedProps['action'] = `/myft/add/${conceptId}`;
-			generatedProps['data-js-action'] = `/__myft/api/core/followed/concept/${conceptId}?method=put`;
-		}
-	}
-
-	return generatedProps;
-
-}
-
-function generateButtonProps (props) {
-
-	const {
-		cacheablePersonalisedUrl,
-		setFollowButtonStateToSelected,
-		name,
-		buttonText,
-		variant,
-		conceptId,
-		alternateText,
-		followPlusDigestEmail
-	} = props;
-
-	let generatedProps = {
-		'data-concept-id': conceptId,
-		'n-myft-follow-button': 'true',
-		'data-trackable': 'follow',
-		type: 'submit'
-	};
-
-	if (cacheablePersonalisedUrl && setFollowButtonStateToSelected) {
-		generatedProps['aria-label'] = `Remove ${name} from myFT`;
-		generatedProps['title'] = `Remove ${name} from myFT`
-		generatedProps['data-alternate-label'] = `Add ${name} to myFT`;
-		generatedProps['aria-pressed'] = true;
-
-		if(alternateText) {
-			generatedProps['data-alternate-text'] = alternateText;
-		} else {
-			if(buttonText) {
-				generatedProps['data-alternate-text'] = buttonText;
-			} else {
-				generatedProps['data-alternate-text'] = 'Add to myFT';
-			}
-		}
-	} else {
-		generatedProps['aria-pressed'] = false;
-		generatedProps['aria-label'] = `Add ${name} to myFT`;
-		generatedProps['title'] = `Add ${name} to myFT`;
-		generatedProps['data-alternate-label'] = `Remove ${name} from myFT`;
-		if (alternateText) {
-			generatedProps['data-alternate-text'] = alternateText;
-		} else {
-			if (buttonText) {
-				generatedProps['data-alternate-text'] = buttonText;
-			} else {
-				generatedProps['data-alternate-text'] = 'Added';
-			}
-		}
-	}
-
-	if(variant) {
-		generatedProps[`n-myft-follow-button--${variant}`] = 'true';
-	}
-
-	if(followPlusDigestEmail) {
-		generatedProps['data-trackable-context-messaging'] = 'add-to-myft-plus-digest-button';
-	}
-
-	return generatedProps;
-}
-
-function getButtonText (props) {
-
-	const {
-		buttonText,
-		setFollowButtonStateToSelected,
-		cacheablePersonalisedUrl
-	} = props;
-	let outputText;
-
-	if(buttonText) {
-		outputText = buttonText;
-	} else {
-		if(setFollowButtonStateToSelected && cacheablePersonalisedUrl) {
-			outputText = 'Added';
-		} else {
-			outputText = 'Add to myFT';
-		}
-	}
-
-	return outputText;
-}
-
-/**
- *
- * @param {Object} props
- * @param {string} props.name
- * @param {Object} props.flags
- * @param {string} props.extraClasses
- * @param {string} props.conceptId
- * @param {string} props.variant
- * @param {string} props.buttonText
- * @param {*} props.setFollowButtonStateToSelected
- * @param {string} props.cacheablePersonalisedUrl
- * @param {string} props.alternateText
- * @param {*} props.followPlusDigestEmail
- * @param {string} props.collectionName
- */
-export default function FollowButton (props) {
-
-	const {
-		name,
-		flags,
-		extraClasses,
-		conceptId,
-		variant,
-	} = props;
-
-	const formProps = generateFormProps(props);
-	const buttonProps = generateButtonProps(props);
-
-	const getVariantClass = (variant) => variant ? `n-myft-follow-button--${variant}` : '';
-
-	return (
-		<>
-			{flags.myFtApiWrite && <form
-				className={`n-myft-ui n-myft-ui--follow ${extraClasses || ''}`}
-				method="GET"
-				data-myft-ui="follow"
-				data-concept-id={conceptId}
-				{...formProps}>
-				<CsrfToken cacheablePersonalisedUrl={props.cacheablePersonalisedUrl} csrfToken={props.csrfToken} />
-				<div
-					className="n-myft-ui__announcement o-normalise-visually-hidden"
-					aria-live="assertive"
-					data-pressed-text={`Now following ${name}.`}
-					data-unpressed-text={`No longer following ${name}.`}
-				></div>
-				<button
-					{...buttonProps}
-					className={[`n-myft-follow-button ${getVariantClass(variant)}`]}>
-					{getButtonText(props)}
-				</button>
-			</form>}
-		</>
-	);
-
-}

package/demos/templates/demo-layout.html

@@ -1,25 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-	<meta charset="utf-8">
-	<title>{{title}}</title>
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<link rel="stylesheet" href="/public/main.css">
-</head>
-
-<body>
-
-	<div class="o-grid-container o-grid-container--snappy">
-		<div class="o-grid-row">
-			<ul>
-				<li><a href="/">Basic</a></li>
-				<li><a href="/demo-jsx">JSX demo</a></li>
-			</ul>
-		</div>
-	</div>
-
-	{{{body}}}
-</body>
-
-</html>