@financial-times/n-myft-ui 25.0.1 → 26.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 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

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

@@ -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/demos/app.js

@@ -41,9 +41,7 @@ app.set('view engine', '.html');
 app.engine('.html', new PageKitHandlebars({
 	cache: false,
 	handlebars,
-	helpers: {
-		...helpers
-	}
+	helpers
 }).engine);
 
 app.use('/public', nExpress.static(path.join(__dirname, '../public'), { redirect: false }));
@@ -56,7 +54,7 @@ app.get('/', (req, res) => {
 		flags: {
 			myFtApi: true,
 			myFtApiWrite: true
-		}
+		},
 	}, fixtures));
 });
 

package/demos/templates/demo.html

@@ -48,45 +48,44 @@
 						<h2 class="demo-section__title">
 							Save button
 						</h2>
-						{{> n-myft-ui/components/save-for-later/save-for-later }}
+						{{{renderReactComponent localPath="components/save-for-later/save-for-later" flags=@root.flags title=title contentId=contentId }}}
 					{{/saveButton}}
 
 					{{#saveButton}}
 						<h2 class="demo-section__title">
 							Unsave button
 						</h2>
-						{{> n-myft-ui/components/save-for-later/save-for-later isSaved=true }}
+						{{{renderReactComponent localPath="components/save-for-later/save-for-later" flags=@root.flags title=title contentId=contentId isSaved=true }}}
 					{{/saveButton}}
 
 					{{#saveButton}}
 						<h2 class="demo-section__title">
 							Save button with icon
 						</h2>
-						{{> n-myft-ui/components/save-for-later/save-for-later saveButtonWithIcon=true }}
+						{{{renderReactComponent localPath="components/save-for-later/save-for-later" flags=@root.flags title=title contentId=contentId saveButtonWithIcon=true }}}
 					{{/saveButton}}
 
 					{{#saveButton}}
 						<h2 class="demo-section__title">
 							Unsave button with icon
 						</h2>
-						{{> n-myft-ui/components/save-for-later/save-for-later isSaved=true saveButtonWithIcon=true }}
+						{{{renderReactComponent localPath="components/save-for-later/save-for-later" flags=@root.flags title=title contentId=contentId saveButtonWithIcon=true isSaved=true }}}
 					{{/saveButton}}
 
 					<h2 class="demo-section__title">
 						Pin button
 					</h2>
 					{{#each pinButton}}
-						{{> n-myft-ui/components/pin-button/pin-button }}
+						{{{renderReactComponent localPath="components/pin-button/pin-button" flags=@root.flags title=title id=id name=name directType=directType showPrioritiseButton=showPrioritiseButton }}}
 					{{/each}}
 
 					{{#instantAlert}}
 						<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>
@@ -449,7 +448,7 @@
 
 				{{#collections}}
 					<div data-o-grid-colspan="3">
-						{{> n-myft-ui/components/collections/collections }}
+						{{{renderReactComponent localPath="components/collections/collections" flags=@root.flags concepts=this.concepts title=this.title liteStyle=this.liteStyle collectionName=this.collectionName trackable=this.trackable}}}
 					</div>
 				{{/collections}}
 			</div>
@@ -471,7 +470,7 @@
 
 				{{#each conceptList}}
 					<div data-o-grid-colspan="3">
-						{{> n-myft-ui/components/concept-list/concept-list }}
+						{{{renderReactComponent localPath="components/concept-list/concept-list" flags=@root.flags concepts=this.concepts contentType=this.contentType conceptListTitle=this.conceptListTitle trackable=this.trackable}}}
 					</div>
 				{{/each}}
 			</div>

package/demos/templates/demo.jsx

@@ -1,5 +1,9 @@
 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) {
 
@@ -7,9 +11,13 @@ export default function Demo (props) {
 		title,
 		flags,
 		followButton,
+		conceptList,
+		collections,
+		saveButton,
+		pinButton
 	} = props;
 
-	const followButtonProps = {...followButton, flags};
+	const followButtonProps = { ...followButton, flags };
 
 	return (
 		<div className="o-grid-container o-grid-container--snappy demo-container">
@@ -25,9 +33,93 @@ export default function Demo (props) {
 							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>
 	)
 }