@financial-times/n-myft-ui 25.0.0-beta.3 → 26.0.0

package/components/collections/collections.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import CsrfToken from '../csrf-token/input';
 import FollowButton from '../follow-button/follow-button';
 
-export default function Collections ({ title, liteStyle, flags, collectionName, trackable, concepts = [] }) {
+export default function Collections ({ title, liteStyle, flags, collectionName, trackable, concepts = [], csrfToken, cacheablePersonalisedUrl }) {
 	const getLiteStyleModifier = () => liteStyle ? 'lite' : 'regular';
 	let formProps = {
 		method: 'POST',
@@ -27,7 +27,7 @@ export default function Collections ({ title, liteStyle, flags, collectionName,
 			<ul className="collection__concepts">
 				{concepts && concepts.map((concept, index) =>
 					<li className="collection__concept" key={index}>
-						<FollowButton variant={liteStyle ? 'primary' : 'inverse'} buttonText={concept.name} flags={flags} collectionName={collectionName} />
+						<FollowButton cacheablePersonalisedUrl={cacheablePersonalisedUrl} csrfToken={csrfToken} variant={liteStyle ? 'primary' : 'inverse'} buttonText={concept.name} flags={flags} collectionName={collectionName} />
 					</li>)
 				}
 			</ul>
@@ -41,7 +41,7 @@ export default function Collections ({ title, liteStyle, flags, collectionName,
 						name="directType"
 						value={concepts.map(concept => concept.directType).join(',')}
 					/>
-					<CsrfToken />
+					<CsrfToken csrfToken={csrfToken} cacheablePersonalisedUrl={cacheablePersonalisedUrl} />
 					<input
 						type="hidden"
 						name="name"

package/components/concept-list/concept-list.jsx

@@ -1,16 +1,16 @@
 import React, { Fragment } from 'react';
 import FollowButton from '../follow-button/follow-button';
 
-export default function ConceptList ({ flags, concepts, contentType, conceptListTitle, trackable }) {
+export default 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
 		}
 	}
 
@@ -47,13 +47,19 @@ export default function ConceptList ({ flags, concepts, contentType, conceptList
 							} = concept;
 							return (
 								<li key={index} className='concept-list__list-item'>
+									{/* The relativeUrl and url point to the same resource. The url is the base path + the relative url.
+									Example: browser_path = https://ft.com, relativeUrl = /capital-markets then url = https://www.ft.com/capital-markets.
+
+									Note: we don't need to compute these urls in the business logic of these components as they're passed in as props.
+
+									This note is just an explanation for why relativeUrl has preference over url.*/}
 									<a
 										href={relativeUrl || url}
 										{...generateTrackableProps(conceptTrackable, 'concept')}
 										className='concept-list__concept'>
 										{prefLabel}
 									</a>
-									<FollowButton conceptId={id} name={prefLabel} flags={flags} />
+									<FollowButton csrfToken={csrfToken} cacheablePersonalisedUrl={cacheablePersonalisedUrl} conceptId={id} name={prefLabel} flags={flags} />
 								</li>
 							)
 						})}

package/components/csrf-token/input.jsx

@@ -5,18 +5,12 @@ export default function CsrfToken ({ cacheablePersonalisedUrl, csrfToken }) {
 	let inputProps = {};
 
 	if (cacheablePersonalisedUrl) {
-		inputProps = {
-			...inputProps,
-			'data-myft-csrf-token': csrfToken
-		};
-	}
-
-	if(csrfToken) {
 		inputProps.value = csrfToken;
 	}
 
 	return (
 		<input
+			data-myft-csrf-token
 			{...inputProps}
 			type="hidden"
 			name="token"

package/components/csrf-token/{__tests__/input.test.js → input.test.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import CsrfToken from '../input';
+import CsrfToken from './input';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
@@ -16,7 +16,7 @@ describe('Csrf Token Input', () => {
 
 	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();
+		expect(container.querySelector('[data-myft-csrf-token]')).toBeTruthy();
 	});
 
 

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

@@ -140,6 +140,8 @@ export default function FollowButton (props) {
 		extraClasses,
 		conceptId,
 		variant,
+		csrfToken,
+		cacheablePersonalisedUrl
 	} = props;
 
 	const formProps = generateFormProps(props);
@@ -155,7 +157,7 @@ export default function FollowButton (props) {
 				data-myft-ui="follow"
 				data-concept-id={conceptId}
 				{...formProps}>
-				<CsrfToken cacheablePersonalisedUrl={props.cacheablePersonalisedUrl} csrfToken={props.csrfToken} />
+				<CsrfToken cacheablePersonalisedUrl={cacheablePersonalisedUrl} csrfToken={csrfToken} />
 				<div
 					className="n-myft-ui__announcement o-normalise-visually-hidden"
 					aria-live="assertive"

package/components/follow-button/{__tests__/follow-button.test.js → follow-button.test.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import FollowButton from '../follow-button';
+import FollowButton from './follow-button';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 

package/components/index.js

@@ -4,6 +4,7 @@ import ConceptList from './concept-list/concept-list';
 import Collections from './collections/collections';
 import SaveForLater from './save-for-later/save-for-later';
 import PinButton from './pin-button/pin-button';
+import InstantAlert from './instant-alert/instant-alert';
 
 export {
 	CsrfToken,
@@ -11,5 +12,6 @@ export {
 	ConceptList,
 	Collections,
 	SaveForLater,
-	PinButton
+	PinButton,
+	InstantAlert
 };

package/components/instant-alert/instant-alert.jsx

@@ -0,0 +1,73 @@
+import React, { Fragment } from 'react';
+import CsrfToken from '../csrf-token/input';
+
+/**
+ *
+ * @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
+ */
+export default 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 (
+		<Fragment>
+			{flags.myFtApiWrite &&
+				<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`}>
+					<CsrfToken />
+					<input type="hidden" value={name} name="name" />
+					<input type="hidden" value={directType || 'http://www.ft.com/ontology/concept/Concept'} name="directType" />
+					<button {...generateButtonProps()}>{buttonText ? buttonText : 'Instant alerts'}</button>
+				</form>}
+		</Fragment>
+	);
+
+}

package/components/instant-alert/instant-alert.test.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import InstantAlert from './instant-alert';
+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: 'Instant Alert',
+	buttonText: 'Instant Alert'
+};
+
+describe('InstantAlert', () => {
+
+	test('It renders', async () => {
+		render(<InstantAlert {...props} />);
+		expect(await screen.findByText('Instant Alert')).toBeInTheDocument();
+	});
+
+	test('It renders form attributes', () => {
+		const { container } = render(<InstantAlert {...props} />);
+		expect(container.querySelector('form[method="GET"]')).toBeInTheDocument();
+		expect(container.querySelector(`form[action='/myft/add/${props.conceptId}?instant=true']`)).toBeInTheDocument();
+		expect(container.querySelector('form[data-myft-ui="instant"]')).toBeInTheDocument();
+		expect(container.querySelector(`form[data-concept-id="${props.conceptId}"]`)).toBeInTheDocument();
+		expect(container.querySelector(`form[data-js-action="/__myft/api/core/followed/concept/${props.conceptId}?method=put"]`)).toBeInTheDocument();
+	});
+
+	test('It renders extraClasses in form', () => {
+		const { container } = render(<InstantAlert {...props} extraClasses={'extra'} />);
+		expect(container.querySelector('form[class="n-myft-ui n-myft-ui--instant extra"]')).toBeInTheDocument();
+	});
+
+	test('It renders hide button class in form', () => {
+		const { container } = render(<InstantAlert {...props} hideButtonText={true} />);
+		expect(container.querySelector('form[class="n-myft-ui n-myft-ui--instant n-myft-ui--instant--hide-text"]')).toBeInTheDocument();
+	});
+
+	test('It renders csrftoken input', () => {
+		const { container } = render(<InstantAlert {...props} />);
+		expect(container.querySelector('input[data-myft-csrf-token]')).toBeInTheDocument();
+	});
+
+	test('It renders input name as value attribute', () => {
+		const { container } = render(<InstantAlert {...props} />);
+		expect(container.querySelector('input[value="Instant Alert"]')).toBeInTheDocument();
+	});
+
+	test('It renders input directType as value attribute', () => {
+		const { container } = render(<InstantAlert {...props} directType={'http://www.ft.com/ontology/test/Test'} />);
+		expect(container.querySelector('input[value="http://www.ft.com/ontology/test/Test"]')).toBeInTheDocument();
+	});
+
+	test('It renders button props', () => {
+		const { container } = render(<InstantAlert {...props} alternateText={'Sample alternate text'} variant={'blue'} size={'small'} />);
+		expect(container.querySelector(`button[aria-label="Get instant alerts for ${props.name}"]`)).toBeInTheDocument();
+		expect(container.querySelector('button[data-alternate-text="Sample alternate text"]')).toBeInTheDocument();
+		expect(container.querySelector(`button[data-concept-id="${props.conceptId}"]`)).toBeInTheDocument();
+		expect(container.querySelector('button[data-trackable="instant"]')).toBeInTheDocument();
+		expect(container.querySelector(`button[title="Get instant alerts for ${props.name}"]`)).toBeInTheDocument();
+		expect(container.querySelector('button[value="true"]')).toBeInTheDocument();
+		expect(container.querySelector('button[type="submit"]')).toBeInTheDocument();
+		expect(container.querySelector('button[name="_rel.instant"]')).toBeInTheDocument();
+		expect(container.getElementsByClassName('n-myft-ui__button--blue')).toHaveLength(1);
+		expect(container.getElementsByClassName('n-myft-ui__button--small')).toHaveLength(1);
+	});
+
+	test('It renders buttonText as data-alternate-text attribute when alternateText prop is not provided', () => {
+		const { container } = render(<InstantAlert {...props} buttonText={'Sample button text'} variant={'blue'} size={'small'} />);
+		expect(container.querySelector('button[data-alternate-text="Sample button text"]')).toBeInTheDocument();
+	});
+
+	test('It renders button aria-pressed=false attribute when hasInstantAlert=false or cacheablePersonalisedUrl props is not provided', () => {
+		render(<InstantAlert {...props} buttonText={'Sample button text'} hasInstantAlert={false} cacheablePersonalisedUrl={'https://ft.com'} />);
+		expect(screen.getByRole('button', {pressed: false})).toBeInTheDocument();
+	});
+
+	test('It renders button aria-pressed=true attribute when hasInstantAlert=true and cacheablePersonalisedUrl provided', () => {
+		render(<InstantAlert {...props} buttonText={'Sample button text'} hasInstantAlert={true} cacheablePersonalisedUrl={'https://ft.com'} />);
+		expect(screen.getByRole('button', {pressed: true})).toBeInTheDocument();
+	});
+
+});

package/components/pin-button/pin-button.jsx

@@ -1,39 +1,39 @@
 import React, { Fragment } from 'react';
 import CsrfToken from '../csrf-token/input';
-export default function PinButton ({ showPrioritiseButton, id, name, directType, prioritised }) {
+export default function PinButton ({ showPrioritiseButton, id, name, directType, prioritised, csrfToken, cacheablePersonalisedUrl }) {
 
-	const getAction = () => `/__myft/api/core/prioritised/concept/${id}?method=${prioritised ? 'delete' : 'put'}`
+	const getAction = () => `/__myft/api/core/prioritised/concept/${id}?method=${prioritised ? 'delete' : 'put'}`;
+
+	if (!showPrioritiseButton) {
+		return null;
+	}
 
 	return (
 		<Fragment>
-			{showPrioritiseButton &&
-				<Fragment>
-					<span className="myft-pin-divider"></span>
-					<div className="myft-pin-button-wrapper">
-						<form method="post" action={getAction()} data-myft-prioritise>
-							<CsrfToken />
-							<input type="hidden" value={name} name="name" />
-							<input type="hidden" value={directType || 'http://www.ft.com/ontology/concept/Concept'} name="directType" />
-							<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.`}
-							></div>
-							<button id={`myft-pin-button__${id}`}
-								className="myft-pin-button"
-								data-prioritise-button
-								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}`}>
-							</button>
-						</form>
-					</div>
-				</Fragment>
-			}
+			<span className="myft-pin-divider"></span>
+			<div className="myft-pin-button-wrapper">
+				<form method="post" action={getAction()} data-myft-prioritise>
+					<CsrfToken csrfToken={csrfToken} cacheablePersonalisedUrl={cacheablePersonalisedUrl} />
+					<input type="hidden" value={name} name="name" />
+					<input type="hidden" value={directType || 'http://www.ft.com/ontology/concept/Concept'} name="directType" />
+					<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.`}
+					></div>
+					<button id={`myft-pin-button__${id}`}
+						className="myft-pin-button"
+						data-prioritise-button
+						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}`}>
+					</button>
+				</form>
+			</div>
 		</Fragment>
 	)
 

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

@@ -34,7 +34,7 @@ describe('Pin Button', () => {
 
 	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[aria-label="Pin myFT Enterprises in my F T"]')).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();
@@ -42,7 +42,7 @@ describe('Pin Button', () => {
 
 	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[aria-label="Unpin myFT Enterprises from my F T"]')).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();

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

@@ -3,6 +3,19 @@ import CsrfToken from '../csrf-token/input';
 
 const ButtonContent = ({ saveButtonWithIcon, buttonText, isSaved, appIsStreamPage }) => {
 
+	const DefaultButtonText = () => {
+		if (appIsStreamPage !== true) {
+			return <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>
+		}
+
+		return <span>{isSaved ? 'Saved' : 'Save'}</span>;
+	}
+
 	return (<Fragment>
 		{
 			saveButtonWithIcon &&
@@ -16,28 +29,13 @@ const ButtonContent = ({ saveButtonWithIcon, buttonText, isSaved, appIsStreamPag
 			!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>
+				{!buttonText && <DefaultButtonText />
 				}
 			</Fragment>
 		}
 	</Fragment>);
 }
-export default function SaveForLater ({ flags, contentId, title, variant, trackableId, isSaved, appIsStreamPage, alternateText, saveButtonWithIcon, buttonText }) {
+export default function SaveForLater({ flags, contentId, title, variant, trackableId, isSaved, appIsStreamPage, alternateText, saveButtonWithIcon, buttonText, csrfToken, cacheablePersonalisedUrl }) {
 
 	const { myFtApiWrite } = flags;
 
@@ -51,7 +49,7 @@ export default function SaveForLater ({ flags, contentId, title, variant, tracka
 		};
 
 		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';
@@ -60,7 +58,7 @@ export default function SaveForLater ({ flags, contentId, title, variant, tracka
 			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;
 		}
 
@@ -84,7 +82,7 @@ export default function SaveForLater ({ flags, contentId, title, variant, tracka
 					data-myft-ui="saved"
 					action={`/myft/save/${contentId}`}
 					data-js-action={`/__myft/api/core/saved/content/${contentId}?method=put`}>
-					<CsrfToken />
+					<CsrfToken csrfToken={csrfToken} cacheablePersonalisedUrl={cacheablePersonalisedUrl} />
 
 					<div
 						className="n-myft-ui__announcement o-normalise-visually-hidden"
@@ -93,7 +91,7 @@ export default function SaveForLater ({ flags, contentId, title, variant, tracka
 						data-unpressed-text="Removed article from My FT."
 					></div>
 					<button {...generateSubmitButtonProps()}>
-						<ButtonContent buttonText={buttonText} saveButtonWithIcon={saveButtonWithIcon} isSaved={isSaved} appIsStreamPage={appIsStreamPage}/>
+						<ButtonContent buttonText={buttonText} saveButtonWithIcon={saveButtonWithIcon} isSaved={isSaved} appIsStreamPage={appIsStreamPage} />
 					</button>
 				</form>
 			}

package/demos/templates/demo.html

@@ -83,10 +83,9 @@
 						<h2 class="demo-section__title">
 							Instant Alert
 						</h2>
-						{{> n-myft-ui/components/instant-alert/instant-alert }}
+						{{{renderReactComponent localPath="components/instant-alert/instant-alert" flags=@root.flags title=title conceptId=id name=name directType=directType }}}
 					{{/instantAlert}}
 
-
 				</div>
 			</div>
 		</section>