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

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

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

@@ -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 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();
-	});
-
-	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 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();
-	});
-
-	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,101 +0,0 @@
-import React, { Fragment } from 'react';
-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 &&
-			<span className="save-button-with-icon-copy" data-variant-label>
-				{buttonText && buttonText}
-				{!buttonText && (isSaved ? 'Saved' : 'Save')}
-			</span>
-		}
-
-		{
-			!saveButtonWithIcon &&
-			<Fragment>
-				{buttonText && buttonText}
-				{!buttonText && <DefaultButtonText />
-				}
-			</Fragment>
-		}
-	</Fragment>);
-}
-export default function SaveForLater({ flags, contentId, title, variant, trackableId, isSaved, appIsStreamPage, alternateText, saveButtonWithIcon, buttonText, csrfToken, cacheablePersonalisedUrl }) {
-
-	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 csrfToken={csrfToken} cacheablePersonalisedUrl={cacheablePersonalisedUrl} />
-
-					<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();
-		});
-	});
-
-});

package/demos/templates/demo-layout.html

@@ -1,25 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-	<meta charset="utf-8">
-	<title>{{title}}</title>
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<link rel="stylesheet" href="/public/main.css">
-</head>
-
-<body>
-
-	<div class="o-grid-container o-grid-container--snappy">
-		<div class="o-grid-row">
-			<ul>
-				<li><a href="/">Basic</a></li>
-				<li><a href="/demo-jsx">JSX demo</a></li>
-			</ul>
-		</div>
-	</div>
-
-	{{{body}}}
-</body>
-
-</html>

package/demos/templates/demo.jsx

@@ -1,125 +0,0 @@
-import React from 'react';
-import FollowButton from '../../components/follow-button/follow-button';
-import ConceptList from '../../components/concept-list/concept-list';
-import Collections from '../../components/collections/collections';
-import { SaveForLater } from '../../components';
-import { PinButton } from '../../components';
-
-export default function Demo (props) {
-
-	const {
-		title,
-		flags,
-		followButton,
-		conceptList,
-		collections,
-		saveButton,
-		pinButton
-	} = 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} />
-
-
-						<h2
-							className="demo-section__title">
-							x-dash follow button
-						</h2>
-
-						<FollowButton {...followButtonProps} buttonText={followButton.name} />
-
-
-						<h2 className="demo-section__title">
-							Save button
-						</h2>
-						<SaveForLater flags={flags} {...saveButton} />
-
-						<h2 className="demo-section__title">
-							Unsave button
-						</h2>
-						<SaveForLater flags={flags} {...saveButton} isSaved={true} />
-
-						<h2 className="demo-section__title">
-							Unsave button with icon
-						</h2>
-						<SaveForLater flags={flags} {...saveButton} saveButtonWithIcon={true} />
-
-						<h2 className="demo-section__title">
-							Save button with icon
-						</h2>
-						<SaveForLater flags={flags} {...saveButton} isSaved={true} saveButtonWithIcon={true} />
-
-						<h2 className="demo-section__title">
-						Pin button
-						</h2>
-
-						{pinButton.map((item, index) => <PinButton key={index} {...item}/>)}
-
-					</div>
-				</div>
-			</section>
-
-			<section
-				id="topic-list"
-				className="demo-section">
-				<div className="o-grid-row">
-					<div data-o-grid-colspan="12">
-						<h2 className="demo-section__title">
-							Topic list
-						</h2>
-
-						<p className="demo-section__description">
-							A list of topics to follow
-						</p>
-					</div>
-
-					{
-						conceptList && conceptList.map((list, index) =>
-							<div key={index} data-o-grid-colspan="3">
-								<ConceptList {...list} flags={flags} />
-							</div>)
-					}
-
-				</div>
-			</section>
-
-			<section
-				id="collections"
-				className="demo-section">
-				<div className="o-grid-row">
-					<div data-o-grid-colspan="12">
-						<h2 className="demo-section__title">
-							Collections
-						</h2>
-
-						<p className="demo-section__description">
-							Curated collections of topics to follow.
-						</p>
-					</div>
-
-					{collections.map((collection, index) => (
-						<div key={index} data-o-grid-colspan="3">
-							<Collections {...collection} flags={flags} />
-						</div>
-					))}
-
-				</div>
-			</section>
-
-		</div>
-	)
-}