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

package/components/pin-button/pin-button.test.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import PinButton from './pin-button';
+
+const flags = {
+	myFtApi: true,
+	myFtApiWrite: true
+};
+
+const fixtures = [
+	{
+		id: '00000000-0000-0000-0000-000000000022',
+		name: 'myFT Enterprises',
+		directType: 'http://www.ft.com/ontology/Topic',
+		showPrioritiseButton: true
+	},
+	{
+		id: '00000000-0000-0000-0000-000000000023',
+		name: 'myFT Enterprises',
+		directType: 'http://www.ft.com/ontology/Topic',
+		showPrioritiseButton: false
+	}
+];
+
+
+describe('Pin Button', () => {
+
+	test('It renders', () => {
+		const { container } = render(<PinButton flags={flags} {...fixtures[0]} />);
+		expect(container.querySelector(`button[id="myft-pin-button__${fixtures[0].id}"]`)).toBeTruthy();
+		expect(container.querySelector('button[data-trackable="prioritised"]')).toBeTruthy();
+	});
+
+	test('It renders unprioritised', () => {
+		const { container } = render(<PinButton flags={flags} {...fixtures[0]} />);
+		expect(container.querySelector('button[aria-label="Pin myFT Enterprises in myFT"]')).toBeTruthy();
+		expect(container.querySelector('button[title="Pin myFT Enterprises"]')).toBeTruthy();
+		expect(container.querySelector('button[data-prioritised=false]')).toBeTruthy();
+		expect(container.querySelector(`button[data-concept-id="${fixtures[0].id}"]`)).toBeTruthy();
+	});
+
+	test('It renders with prioritised', () => {
+		const { container } = render(<PinButton flags={flags} prioritised={true} {...fixtures[0]} />);
+		expect(container.querySelector('button[aria-label="Unpin myFT Enterprises from myFT"]')).toBeTruthy();
+		expect(container.querySelector('button[title="Unpin myFT Enterprises"]')).toBeTruthy();
+		expect(container.querySelector('button[data-prioritised=true]')).toBeTruthy();
+		expect(container.querySelector(`button[data-concept-id="${fixtures[0].id}"]`)).toBeTruthy();
+	});
+
+	test('It renders the form element', () => {
+		const { container } = render(<PinButton flags={flags} {...fixtures[0]} />);
+		expect(container.querySelector('form[method="post"]')).toBeTruthy();
+		expect(container.querySelector(`form[action="/__myft/api/core/prioritised/concept/${fixtures[0].id}?method=put"]`)).toBeTruthy();
+	});
+
+});

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

@@ -0,0 +1,103 @@
+import React, { Fragment } from 'react';
+import CsrfToken from '../csrf-token/input';
+
+const ButtonContent = ({ saveButtonWithIcon, buttonText, isSaved, appIsStreamPage }) => {
+
+	return (<Fragment>
+		{
+			saveButtonWithIcon &&
+			<span className="save-button-with-icon-copy" data-variant-label>
+				{buttonText && buttonText}
+				{!buttonText && (isSaved ? 'Saved' : 'Save')}
+			</span>
+		}
+
+		{
+			!saveButtonWithIcon &&
+			<Fragment>
+				{buttonText && buttonText}
+				{!buttonText &&
+					<Fragment>
+						{
+							appIsStreamPage !== true &&
+							<Fragment>
+								<span className="save-button-longer-copy" data-variant-label>
+									{isSaved ? 'Saved ' : 'Save '}
+								</span>
+								<span className="n-myft-ui__button--viewport-large" aria-hidden="true">to myFT</span>
+							</Fragment>
+						}
+
+						{
+							appIsStreamPage === true && <span>{isSaved ? 'Saved' : 'Save'}</span>
+						}
+					</Fragment>
+				}
+			</Fragment>
+		}
+	</Fragment>);
+}
+export default function SaveForLater ({ flags, contentId, title, variant, trackableId, isSaved, appIsStreamPage, alternateText, saveButtonWithIcon, buttonText }) {
+
+	const { myFtApiWrite } = flags;
+
+	const generateSubmitButtonProps = () => {
+		let props = {
+			type: 'submit',
+			'data-trackable': trackableId ? trackableId : 'save-for-later',
+			'data-text-variant': appIsStreamPage !== true ? 'save-button-with-icon-copy' : 'save-button-longer-copy',
+			'data-content-id': contentId,
+			className: saveButtonWithIcon ? 'n-myft-ui__save-button-with-icon' : `n-myft-ui__button ${variant ? `n-myft-ui__button--${variant}` : ''}`
+		};
+
+		if (isSaved) {
+			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';
+			props['aria-pressed'] = true;
+		} else {
+			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['aria-pressed'] = false;
+		}
+
+		if (alternateText) {
+			props['data-alternate-text'] = alternateText;
+		} else if (isSaved) {
+			props['data-alternate-text'] = 'Save ';
+		} else {
+			props['data-alternate-text'] = 'Saved ';
+		}
+
+		return props;
+	}
+
+
+	return (
+		<Fragment>
+			{myFtApiWrite &&
+				<form className="n-myft-ui n-myft-ui--save" method="GET"
+					data-content-id={contentId}
+					data-myft-ui="saved"
+					action={`/myft/save/${contentId}`}
+					data-js-action={`/__myft/api/core/saved/content/${contentId}?method=put`}>
+					<CsrfToken />
+
+					<div
+						className="n-myft-ui__announcement o-normalise-visually-hidden"
+						aria-live="assertive"
+						data-pressed-text="Article saved in My FT."
+						data-unpressed-text="Removed article from My FT."
+					></div>
+					<button {...generateSubmitButtonProps()}>
+						<ButtonContent buttonText={buttonText} saveButtonWithIcon={saveButtonWithIcon} isSaved={isSaved} appIsStreamPage={appIsStreamPage}/>
+					</button>
+				</form>
+			}
+		</Fragment>
+
+	)
+}

package/components/save-for-later/save-for-later.test.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import SaveForLater from './save-for-later';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+const flags = {
+	myFtApi: true,
+	myFtApiWrite: true
+};
+
+const fixture = {
+	contentId: '00000000-0000-0000-0000-000000000033',
+	title: 'myFT Enterprises'
+};
+
+describe('SaveForLater component', () => {
+
+	test('It renders', async () => {
+		render(<SaveForLater flags={flags} {...fixture}/>);
+		expect(await screen.findByText('Save')).toBeTruthy();
+	});
+
+	test('It renders button text wen provided', async () => {
+		render(<SaveForLater flags={flags} {...fixture} buttonText={'Globetrotter'}/>);
+		expect(await screen.findByText('Globetrotter')).toBeTruthy();
+	});
+
+	test('It renders the correct form action attribute', () => {
+		const { container } = render(<SaveForLater flags={flags} {...fixture} buttonText={'Globetrotter'}/>);
+		const formElement = container.querySelector(`form[action="/myft/save/${fixture.contentId}"]`);
+		expect(formElement).toBeTruthy();
+	});
+
+	test('It renders the correct form data-js-action attribute', () => {
+		const { container } = render(<SaveForLater flags={flags} {...fixture} buttonText={'Globetrotter'}/>);
+		const formElement = container.querySelector(`form[data-js-action="/__myft/api/core/saved/content/${fixture.contentId}?method=put"]`);
+		expect(formElement).toBeTruthy();
+	});
+
+	test('It renders the correct form method attribute', () => {
+		const { container } = render(<SaveForLater flags={flags} {...fixture} buttonText={'Globetrotter'}/>);
+		const formElement = container.querySelector('form[method="GET"]');
+		expect(formElement).toBeTruthy();
+	});
+
+	test('It renders the correct button data-text-variant attribute when appIsStreamPage=true', () => {
+		const { container } = render(<SaveForLater appIsStreamPage={true} flags={flags} {...fixture} buttonText={'Globetrotter'}/>);
+		const buttonElement = container.querySelector('button[data-text-variant="save-button-longer-copy"]');
+		expect(buttonElement).toBeTruthy();
+	});
+
+	describe('Saved', () => {
+		test('It renders saved item', async () => {
+			render(<SaveForLater isSaved={true} flags={flags} {...fixture}/>);
+			expect(await screen.findByText('Saved')).toBeTruthy();
+		});
+	});
+
+});

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,16 @@
-const express = require('@financial-times/n-internal-tool');
+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 xHandlebars = require('@financial-times/x-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'),
@@ -14,48 +21,59 @@ const fixtures = {
 	instantAlert: require('./fixtures/instant-alert')
 };
 
-const app = module.exports = express({
+const app = module.exports = nExpress({
 	name: 'public',
 	systemCode: 'n-myft-ui-demo',
 	withFlags: true,
-	withHandlebars: true,
-	withNavigation: false,
+	withConsent: false,
+	withServiceMetrics: false,
 	withAnonMiddleware: false,
 	hasHeadCss: false,
-	layoutsDir: 'demos/templates',
-	viewsDirectory: '/demos/templates',
 	partialsDirectory: process.cwd(),
 	directory: process.cwd(),
 	demo: true,
-	s3o: false,
-	helpers: {
-		x: xHandlebars()
-	}
+	withBackendAuthentication: false,
 });
 
+app.set('views', path.join(__dirname, '/templates'));
+app.set('view engine', '.html');
+
+app.engine('.html', new PageKitHandlebars({
+	cache: false,
+	handlebars,
+	helpers
+}).engine);
+
+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',
-		layout: 'demo-layout',
 		flags: {
 			myFtApi: true,
 			myFtApiWrite: true
-		}
+		},
 	}, fixtures));
 });
 
-app.get('/digest-on-follow', (req, res) => {
-	res.render('digest-on-follow', Object.assign({
-		title: 'n-myft-ui digest on follow',
-		layout: 'demo-layout',
+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,
-		},
-		appIsStreamPage: false
-	}, fixtures.followButtonPlusDigest));
+			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-layout.html

@@ -14,7 +14,7 @@
 		<div class="o-grid-row">
 			<ul>
 				<li><a href="/">Basic</a></li>
-				<li><a href="/digest-on-follow">Follow plus digest button</a></li>
+				<li><a href="/demo-jsx">JSX demo</a></li>
 			</ul>
 		</div>
 	</div>