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

package/components/collections/collections.jsx

@@ -1,68 +0,0 @@
-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 = [], csrfToken, cacheablePersonalisedUrl }) {
-	const getLiteStyleModifier = () => liteStyle ? 'lite' : 'regular';
-	let formProps = {
-		method: 'POST',
-		action: '#',
-		'data-myft-ui': 'follow',
-		'data-concept-id': concepts.map(concept => concept.id).join(',')
-	};
-
-	if (collectionName) {
-		formProps['data-myft-tracking'] = collectionName;
-	}
-
-	return (
-		<section
-			className={`collection collection--${getLiteStyleModifier()}`}
-			data-trackable={trackable ? trackable : 'collection'}>
-			<header className={`collection__header collection__header--${getLiteStyleModifier()}`}>
-				<h2 className={`collection__title collection__title--${getLiteStyleModifier()}`}>
-					{title}
-				</h2>
-			</header>
-			<ul className="collection__concepts">
-				{concepts && concepts.map((concept, index) =>
-					<li className="collection__concept" key={index}>
-						<FollowButton cacheablePersonalisedUrl={cacheablePersonalisedUrl} csrfToken={csrfToken} variant={liteStyle ? 'primary' : 'inverse'} buttonText={concept.name} flags={flags} collectionName={collectionName} />
-					</li>)
-				}
-			</ul>
-
-			<div className="collection__meta">
-				<form
-					{...formProps}
-					className="n-myft-ui n-myft-ui--follow n-ui-hide-core collection-follow-all">
-					<input
-						type="hidden"
-						name="directType"
-						value={concepts.map(concept => concept.directType).join(',')}
-					/>
-					<CsrfToken csrfToken={csrfToken} cacheablePersonalisedUrl={cacheablePersonalisedUrl} />
-					<input
-						type="hidden"
-						name="name"
-						value={concepts.map(concept => concept.name).join(',')}
-					/>
-					<button
-						type="submit"
-						aria-pressed="false"
-						className={`collection-follow-all__button collection-follow-all__button--${getLiteStyleModifier()}`}
-						data-trackable="follow all"
-						data-concept-id={concepts.map(concept => concept.id).join(',')}
-						aria-label={`Add all topics in the ${title} collection to my F T`}
-						data-alternate-label={`Remove all topics in the ${title} collection from my F T`}
-						data-alternate-text="Added"
-						title={`Add all topics in the ${title} collection to my F T`}>
-						Add all to myFT
-					</button>
-				</form>
-			</div>
-		</section>
-
-	)
-
-}

package/components/collections/collections.test.js

@@ -1,83 +0,0 @@
-import React from 'react';
-import Collections from './collections';
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-
-const fixtures = {
-	'title': 'European Union',
-	'concepts': [
-		{
-			'id': '00000000-0000-0000-0000-000000000000',
-			'prefLabel': 'EU immigration',
-			'directType': 'http://www.ft.com/ontology/Topic',
-			'url': 'https://www.ft.com/stream/00000000-0000-0000-0000-000000000000',
-			'name': 'EU immigration'
-		},
-		{
-			'id': '00000000-0000-0000-0000-000000000001',
-			'prefLabel': 'Europe Quantitative Easing',
-			'directType': 'http://www.ft.com/ontology/Topic',
-			'url': 'https://www.ft.com/stream/00000000-0000-0000-0000-000000000000',
-			'name': 'Europe Quantitative Easing'
-		},
-		{
-			'id': '00000000-0000-0000-0000-000000000002',
-			'prefLabel': 'EU financial regulation',
-			'directType': 'http://www.ft.com/ontology/Topic',
-			'url': 'https://www.ft.com/stream/00000000-0000-0000-0000-000000000000',
-			'name': 'EU financial regulation'
-		},
-		{
-			'id': '00000000-0000-0000-0000-000000000003',
-			'prefLabel': 'EU nothing',
-			'directType': 'http://www.ft.com/ontology/Topic',
-			'url': 'https://www.ft.com/stream/00000000-0000-0000-0000-000000000000',
-			'name': 'EU nothing'
-		},
-		{
-			'id': '00000000-0000-0000-0000-000000000004',
-			'prefLabel': 'EU trade',
-			'directType': 'http://www.ft.com/ontology/Topic',
-			'url': 'https://www.ft.com/stream/00000000-0000-0000-0000-000000000000',
-			'name': 'EU trade'
-		}
-	]
-};
-const joinedDirectTypes = 'http://www.ft.com/ontology/Topic,http://www.ft.com/ontology/Topic,http://www.ft.com/ontology/Topic,http://www.ft.com/ontology/Topic,http://www.ft.com/ontology/Topic';
-
-const flags = {
-	myFtApi: true,
-	myFtApiWrite: true
-};
-
-describe('Concept List', () => {
-
-	test('It renders the title of the collection', async () => {
-		render(<Collections {...fixtures} flags={flags} />);
-		expect(await screen.findByText('European Union')).toBeTruthy();
-	});
-
-	test('It renders label for the concept button', async () => {
-		render(<Collections {...fixtures} flags={flags} />);
-		expect(await screen.findByText('EU immigration')).toBeTruthy();
-		expect(await screen.findByText('Europe Quantitative Easing')).toBeTruthy();
-		expect(await screen.findByText('EU financial regulation')).toBeTruthy();
-		expect(await screen.findByText('EU nothing')).toBeTruthy();
-		expect(await screen.findByText('EU trade')).toBeTruthy();
-	});
-
-	test('It renders form "Add all to my FT" from', () => {
-		const { container} = render(<Collections {...fixtures} flags={flags} />);
-		const formElement = container.querySelector('form[action="#"]');
-		expect(formElement).toBeTruthy();
-		expect(formElement.method).toEqual('post');
-	});
-
-	test('It renders directType input with value of types joined', () => {
-		const { container} = render(<Collections {...fixtures} flags={flags} />);
-		const directTypeElement = container.querySelector('input[name="directType"]');
-		expect(directTypeElement).toBeTruthy();
-		expect(directTypeElement.value).toEqual(joinedDirectTypes);
-	});
-
-});

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

@@ -1,69 +0,0 @@
-import React, { Fragment } from 'react';
-import FollowButton from '../follow-button/follow-button';
-
-export default function ConceptList ({ flags, concepts, contentType, conceptListTitle, trackable, csrfToken, cacheablePersonalisedUrl }) {
-
-	const {
-		myFtApi,
-		myFtApiWrite
-	} = flags;
-
-	const generateTrackableProps = (primary, secondary) => {
-		return {
-			'data-trackable': primary ? primary : secondary
-		}
-	}
-
-	const shouldDisplay = () => {
-		if(myFtApi && myFtApiWrite && Array.isArray(concepts) && concepts.length) {
-			return true
-		}
-
-		return false;
-	}
-
-
-	return (
-
-		<Fragment>
-			{shouldDisplay() &&
-				<div
-					className='concept-list'
-					{...generateTrackableProps(trackable, 'concept-list')}>
-					{
-						(contentType || conceptListTitle) &&
-						<h2 className='concept-list__title'>
-							{conceptListTitle ? conceptListTitle : `Follow the topics in this ${contentType}`}
-						</h2>
-					}
-					<ul className='concept-list__list'>
-						{concepts.map((concept, index) => {
-							const {
-								relativeUrl,
-								url,
-								conceptTrackable,
-								prefLabel,
-								id
-							} = 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 csrfToken={csrfToken} cacheablePersonalisedUrl={cacheablePersonalisedUrl} conceptId={id} name={prefLabel} flags={flags} />
-								</li>
-							)
-						})}
-					</ul>
-				</div>}
-		</Fragment>)
-}

package/components/concept-list/concept-list.test.js

@@ -1,116 +0,0 @@
-import React from 'react';
-import ConceptList from './concept-list';
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-
-const fixtures = [
-	{
-		'conceptListTitle': 'Follow european union things',
-		'concepts': [
-			{
-				'id': '00000000-0000-0000-0000-000000000161',
-				'prefLabel': 'EU immigration',
-				'directType': 'http://www.ft.com/ontology/Topic',
-				'url': 'https://www.ft.com/stream/00000000-0000-0000-0000-000000000161',
-				'name': 'EU immigration'
-			},
-			{
-				'id': '00000000-0000-0000-0000-000000000162',
-				'prefLabel': 'Europe Quantitative Easing',
-				'directType': 'http://www.ft.com/ontology/Topic',
-				'url': 'https://www.ft.com/stream/00000000-0000-0000-0000-000000000162',
-				'name': 'Europe Quantitative Easing'
-			},
-			{
-				'id': '00000000-0000-0000-0000-000000000163',
-				'prefLabel': 'EU financial regulation',
-				'directType': 'http://www.ft.com/ontology/Topic',
-				'url': 'https://www.ft.com/stream/00000000-0000-0000-0000-000000000163',
-				'name': 'EU financial regulation'
-			},
-			{
-				'id': '00000000-0000-0000-0000-000000000164',
-				'prefLabel': 'EU nothing',
-				'directType': 'http://www.ft.com/ontology/Topic',
-				'url': 'https://www.ft.com/stream/00000000-0000-0000-0000-000000000164',
-				'name': 'EU nothing'
-			},
-			{
-				'id': '00000000-0000-0000-0000-000000000165',
-				'prefLabel': 'EU trade',
-				'directType': 'http://www.ft.com/ontology/Topic',
-				'url': 'https://www.ft.com/stream/00000000-0000-0000-0000-000000000165',
-				'name': 'EU trade'
-			}
-		]
-	},
-	{
-		'contentType': 'search',
-		'concepts': [
-			{
-				'id': '00000000-0000-0000-0000-000000000166',
-				'prefLabel': 'Noodle',
-				'directType': 'http://www.ft.com/ontology/Topic',
-				'url': 'https://www.ft.com/stream/00000000-0000-0000-0000-000000000166',
-				'name': 'Noodle'
-			},
-			{
-				'id': '00000000-0000-0000-0000-000000000167',
-				'prefLabel': 'Green apples',
-				'directType': 'http://www.ft.com/ontology/Topic',
-				'url': 'https://www.ft.com/stream/00000000-0000-0000-0000-000000000167',
-				'name': 'Green apples'
-			},
-			{
-				'id': '00000000-0000-0000-0000-000000000168',
-				'prefLabel': 'Fox blood',
-				'directType': 'http://www.ft.com/ontology/Topic',
-				'url': 'https://www.ft.com/stream/00000000-0000-0000-0000-000000000168',
-				'name': 'Fox blood'
-			},
-			{
-				'id': '00000000-0000-0000-0000-000000000169',
-				'prefLabel': 'Dog party',
-				'directType': 'http://www.ft.com/ontology/Topic',
-				'url': 'https://www.ft.com/stream/00000000-0000-0000-0000-000000000169',
-				'name': 'Dog party'
-			},
-			{
-				'id': '00000000-0000-0000-0000-000000000170',
-				'prefLabel': 'Fifth thing',
-				'directType': 'http://www.ft.com/ontology/Topic',
-				'url': 'https://www.ft.com/stream/00000000-0000-0000-0000-000000000170',
-				'name': 'Fifth thing'
-			}
-		]
-	},
-];
-
-
-const flags = {
-	myFtApi: true,
-	myFtApiWrite: true
-};
-
-describe('Concept List', () => {
-
-	test('It renders conceptListTitle value as title when conceptListTitle is provided', async () => {
-		render(<ConceptList {...fixtures[0]} flags={flags} />);
-		expect(await screen.findByText('Follow european union things')).toBeTruthy();
-	});
-
-	test('It renders "Follow the topics in this {conceptType}" value as title when conceptType is provided', async () => {
-		render(<ConceptList {...fixtures[1]} flags={flags} />);
-		expect(await screen.findByText('Follow the topics in this search')).toBeTruthy();
-	});
-
-	test('It renders label for the concept button', async () => {
-		render(<ConceptList {...fixtures[0]} flags={flags} />);
-		expect(await screen.findByText('EU immigration')).toBeTruthy();
-		expect(await screen.findByText('Europe Quantitative Easing')).toBeTruthy();
-		expect(await screen.findByText('EU financial regulation')).toBeTruthy();
-		expect(await screen.findByText('EU nothing')).toBeTruthy();
-		expect(await screen.findByText('EU trade')).toBeTruthy();
-	});
-
-});

package/components/csrf-token/input.jsx

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

package/components/csrf-token/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]')).toBeTruthy();
-	});
-
-
-});

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

@@ -1,176 +0,0 @@
-import React, {Fragment} 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,
-		csrfToken,
-		cacheablePersonalisedUrl
-	} = props;
-
-	const formProps = generateFormProps(props);
-	const buttonProps = generateButtonProps(props);
-
-	const getVariantClass = (variant) => variant ? `n-myft-follow-button--${variant}` : '';
-
-	return (
-		<Fragment>
-			{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={cacheablePersonalisedUrl} csrfToken={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>}
-		</Fragment>
-	);
-
-}

package/components/follow-button/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(await 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', async () => {
-		render(<FollowButton {...props}
-			variant={'standard'}
-			setFollowButtonStateToSelected={true}
-			cacheablePersonalisedUrl={true} />);
-		expect(await screen.findByText('Added')).toBeTruthy();
-	});
-
-});

package/components/index.js

@@ -1,17 +0,0 @@
-import CsrfToken from './csrf-token/input';
-import FollowButton from './follow-button/follow-button';
-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,
-	FollowButton,
-	ConceptList,
-	Collections,
-	SaveForLater,
-	PinButton,
-	InstantAlert
-};

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

@@ -1,73 +0,0 @@
-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>
-	);
-
-}