@financial-times/n-myft-ui 23.1.3 → 24.0.0

package/components/collections/collections.html

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

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

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

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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,174 @@
+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/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">
-	{{> n-myft-ui/components/csrf-token/input}}
+	{{{renderReactComponent localPath="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>
-		{{> n-myft-ui/components/csrf-token/input }}
+		{{{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}}

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">
-	{{> n-myft-ui/components/csrf-token/input}}
+	{{{renderReactComponent localPath="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

@@ -1,5 +1,5 @@
 // date-fns from v2 doesn't accept String arguments anymore.
-// the detail => https://github.com/date-fns/date-fns/blob/master/CHANGELOG.md#200---2019-08-20
+// 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';
@@ -11,22 +11,15 @@ import parseISO from 'date-fns/src/parseISO';
 
 const isValid = (date) => {
 	if (!isValidOriginal(date)) {
-		console.error('Invalid date passed', [date]); //eslint-disable-line
+		console.error("Invalid date passed", [date]); //eslint-disable-line
 	}
 	return date;
 };
 
 const isToday = (date) => isTodayOriginal(isValid(date));
-const isAfter = (date, dateToCompare) => isAfterOriginal(isValid(date), isValid(dateToCompare));
+const isAfter = (date, dateToCompare) =>
+	isAfterOriginal(isValid(date), isValid(dateToCompare));
 const addMinutes = (date, amount) => addMinutesOriginal(isValid(date), amount);
 const startOfDay = (date) => startOfDayOriginal(isValid(date));
 
-
-export {
-	isToday,
-	isAfter,
-	addMinutes,
-	startOfDay,
-	isValid,
-	parseISO,
-};
+export { isToday, isAfter, addMinutes, startOfDay, isValid, parseISO };

package/demos/app.js

@@ -1,9 +1,17 @@
+require('sucrase/register');
 const express = require('@financial-times/n-internal-tool');
 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 xHandlebars = require('@financial-times/x-handlebars');
+const handlebars = require('handlebars');
+const { 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'),
@@ -29,10 +37,13 @@ const app = module.exports = express({
 	demo: true,
 	s3o: false,
 	helpers: {
-		x: xHandlebars()
-	}
+		x: xHandlebars(),
+		renderReactComponent: helpers.renderReactComponent
+	},
 });
 
+const jsxRenderer = (new PageKitReactJSX({ includeDoctype: false }));
+
 app.get('/', (req, res) => {
 	res.render('demo', Object.assign({
 		title: 'n-myft-ui demo',
@@ -44,6 +55,22 @@ 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',
+		layout: 'demo-layout',
+		flags: {
+			myFtApi: true,
+			myFtApiWrite: true
+		}
+	}, fixtures));
+
+	let template = handlebars.compile(demoLayoutSource);
+	let result = template({body: demo});
+
+	res.send(result);
+});
+
 app.get('/digest-on-follow', (req, res) => {
 	res.render('digest-on-follow', Object.assign({
 		title: 'n-myft-ui digest on follow',

package/demos/templates/demo.html

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

package/demos/templates/demo.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import FollowButton from '../../components/follow-button/follow-button';
+
+export default function Demo (props) {
+
+	const {
+		title,
+		flags,
+		followButton,
+	} = props;
+
+	const followButtonProps = {...followButton, flags};
+
+	return (
+		<div className="o-grid-container o-grid-container--snappy demo-container">
+			<h1>{title}</h1>
+
+			<section
+				id="follow-button"
+				className="demo-section">
+				<div className="o-grid-row">
+					<div data-o-grid-colspan="12">
+						<h2
+							className="demo-section__title">
+							Follow button
+						</h2>
+						<FollowButton {...followButtonProps} />
+					</div>
+				</div>
+			</section>
+		</div>
+	)
+}

package/demos/templates/digest-on-follow.html

@@ -5,7 +5,7 @@
 			<h2>Follow button</h2>
 
 			{{#followButton}}
-				{{> n-myft-ui/components/follow-button/follow-button}}
+				{{{renderReactComponent localPath="components/follow-button/follow-button" flags=@root.flags}}}
 			{{/followButton}}
 		</div>
 	</div>

package/jest.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+	transform: {
+		'.(js|jsx)': '@sucrase/jest-plugin',
+	},
+	testEnvironment: 'jest-environment-jsdom',
+	modulePathIgnorePatterns: ['node_modules', 'bower_components'],
+	testMatch: ['<rootDir>/components/**/*.test.js']
+};

package/package.json

@@ -1,14 +1,11 @@
 {
   "name": "@financial-times/n-myft-ui",
-  "version": "23.1.3",
+  "version": "24.0.0",
   "description": "Client side component for interaction with myft",
   "main": "server.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "commit": "commit-wizard",
-    "precommit": "node_modules/.bin/secret-squirrel",
-    "prepush": "make verify -j3",
-    "commitmsg": "node_modules/.bin/secret-squirrel-commitmsg",
     "prepare": "npx snyk protect || npx snyk protect -d || true"
   },
   "repository": {
@@ -27,10 +24,15 @@
     "@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/n-gage": "^3.12.0",
+    "@financial-times/dotcom-server-handlebars": "^3.0.0",
+    "@financial-times/dotcom-server-react-jsx": "^2.6.2",
+    "@financial-times/n-gage": "^8.3.0",
     "@financial-times/n-heroku-tools": "8.3.1",
     "@financial-times/n-internal-tool": "2.3.4",
     "@financial-times/x-handlebars": "1.0.0-beta.21",
+    "@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",
@@ -53,6 +55,7 @@
     "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",
@@ -62,6 +65,8 @@
     "hyperons": "^0.4.1",
     "imports-loader": "0.8.0",
     "inject-loader": "^3.0.0",
+    "jest": "^27.4.5",
+    "jsdom": "^19.0.0",
     "karma": "4.4.1",
     "karma-browserstack-launcher": "1.5.1",
     "karma-chai": "^0.1.0",
@@ -83,16 +88,25 @@
     "npm-prepublish": "^1.2.1",
     "pa11y-ci": "^2.1.1",
     "postcss-loader": "^0.9.1",
+    "react": "^17.0.2",
     "regenerator-runtime": "^0.13.3",
     "sass-loader": "^3.2.0",
     "semver": "6.3.0",
     "sinon": "^7.1.0",
     "sinon-chai": "^3.2.0",
-    "snyk": "^1.216.5"
+    "snyk": "^1.216.5",
+    "sucrase": "^3.10.1"
   },
   "x-dash": {
     "engine": {
       "server": "hyperons"
     }
+  },
+  "husky": {
+    "hooks": {
+      "commit-msg": "node_modules/.bin/secret-squirrel-commitmsg",
+      "pre-commit": "node_modules/.bin/secret-squirrel",
+      "pre-push": "make verify -j3"
+    }
   }
 }

package/components/csrf-token/input.html

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

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

@@ -1,79 +0,0 @@
-{{#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}}