@financial-times/n-myft-ui 26.0.0 → 27.2.0

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>
-	);
-
-}

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>
-	)
-
-}