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

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/index.js

@@ -1,15 +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';
-
-export {
-	CsrfToken,
-	FollowButton,
-	ConceptList,
-	Collections,
-	SaveForLater,
-	PinButton
-};

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

@@ -1,40 +0,0 @@
-import React, { Fragment } from 'react';
-import CsrfToken from '../csrf-token/input';
-export default function PinButton ({ showPrioritiseButton, id, name, directType, prioritised }) {
-
-	const getAction = () => `/__myft/api/core/prioritised/concept/${id}?method=${prioritised ? 'delete' : 'put'}`
-
-	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>
-			}
-		</Fragment>
-	)
-
-}

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

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

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

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