@financial-times/n-myft-ui 25.0.0-beta.1 → 25.0.1

package/components/collections/collections.html

@@ -0,0 +1,77 @@
+<section
+	class="collection {{#if liteStyle}}collection--lite{{else}}collection--regular{{/if}}"
+	data-trackable="{{#if trackable}}{{trackable}}{{else}}collection{{/if}}">
+	<header class="collection__header {{#if liteStyle}}collection__header--lite{{else}}collection__header--regular{{/if}}">
+		<h2 class="collection__title {{#if liteStyle}}collection__title--lite{{else}}collection__title--regular{{/if}}">
+			{{title}}
+		</h2>
+	</header>
+	<ul class="collection__concepts">
+		{{#concepts}}
+			<li class="collection__concept">
+				{{#if ../liteStyle}}
+					{{{renderReactComponent localPath="components/follow-button/follow-button" variant="primary" buttonText=name flags=@root.flags collectionName=../collectionName}}}
+				{{else}}
+					{{{renderReactComponent localPath="components/follow-button/follow-button" variant="inverse" buttonText=name flags=@root.flags collectionName=../collectionName}}}
+				{{/if}}
+			</li>
+		{{/concepts}}
+	</ul>
+	<div class="collection__meta">
+		<form
+			method="POST"
+			action="#"
+			data-myft-ui="follow"
+			{{#if collectionName}}data-myft-tracking="collectionName={{collectionName}}"{{/if}}
+			data-concept-id="
+				{{~#concepts~}}
+					{{conceptId}}
+					{{~#unless @last~}}
+						,
+					{{~/unless~}}
+				{{~/concepts~}}"
+			class="n-myft-ui n-myft-ui--follow n-ui-hide-core collection-follow-all">
+			<input
+				type="hidden"
+				name="directType"
+				value="
+					{{~#concepts~}}
+						{{directType}}
+						{{~#unless @last~}}
+							,
+						{{~/unless~}}
+					{{~/concepts~}}"
+			/>
+			{{{renderReactComponent localPath="components/csrf-token/input"}}}
+			<input
+				type="hidden"
+				name="name"
+				value="
+					{{~#concepts~}}
+						{{name}}
+					{{~#unless @last~}}
+						,
+					{{~/unless~}}
+				{{~/concepts~}}"
+			/>
+			<button
+				type="submit"
+				aria-pressed="false"
+				class="collection-follow-all__button {{#if liteStyle}}collection-follow-all__button--lite{{else}}collection-follow-all__button--regular{{/if}}"
+				data-trackable="follow all"
+				data-concept-id="
+					{{~#concepts~}}
+						{{conceptId}}
+						{{~#unless @last~}}
+							,
+						{{~/unless~}}
+					{{~/concepts~}}"
+				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/concept-list/concept-list.html

@@ -0,0 +1,28 @@
+{{#ifAll @root.flags.myFtApi @root.flags.myFtApiWrite concepts concepts.length}}
+	<div
+		class="concept-list"
+		data-trackable="{{#if trackable}}{{trackable}}{{else}}concept-list{{/if}}">
+		{{#ifSome contentType conceptListTitle}}
+			<h2 class="concept-list__title">
+				{{#if conceptListTitle}}
+					{{conceptListTitle}}
+				{{else}}
+					Follow the topics in this {{contentType}}
+				{{/if}}
+			</h2>
+		{{/ifSome}}
+		<ul class="concept-list__list">
+			{{#each concepts}}
+				<li class="concept-list__list-item">
+					<a
+						href="{{relativeUrl}}"
+						data-trackable="{{#if conceptTrackable}}{{conceptTrackable}}{{else}}concept{{/if}}"
+						class="concept-list__concept">
+						{{prefLabel}}
+					</a>
+					{{{renderReactComponent localPath="components/follow-button/follow-button" conceptId=id name=prefLabel flags=@root.flags}}}
+				</li>
+			{{/each}}
+		</ul>
+	</div>
+{{/ifAll}}

package/components/follow-button/__tests__/follow-button.test.js

@@ -16,7 +16,7 @@ describe('Follow button', () => {
 
 	test('It renders default button', async () => {
 		render(<FollowButton {...props} />);
-		expect(await screen.findByText('Add to myFT')).toBeTruthy();
+		expect(screen.findByText('Add to myFT')).toBeTruthy();
 	});
 
 	test('It renders a variant', async () => {
@@ -29,12 +29,12 @@ describe('Follow button', () => {
 		expect(container.querySelector(`form[action='/myft/add/${props.conceptId}']`)).toBeTruthy();
 	});
 
-	test('Button state changes when attributes change', async () => {
+	test('Button state changes when attributes change', () => {
 		render(<FollowButton {...props}
 			variant={'standard'}
 			setFollowButtonStateToSelected={true}
 			cacheablePersonalisedUrl={true} />);
-		expect(await screen.findByText('Added')).toBeTruthy();
+		expect(screen.findByText('Added')).toBeTruthy();
 	});
 
 });

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

@@ -1,4 +1,4 @@
-import React, {Fragment} from 'react';
+import React from 'react';
 import CsrfToken from '../csrf-token/input';
 
 function generateFormProps (props) {
@@ -148,7 +148,7 @@ export default function FollowButton (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"
@@ -168,7 +168,7 @@ export default function FollowButton (props) {
 					{getButtonText(props)}
 				</button>
 			</form>}
-		</Fragment>
+		</>
 	);
 
 }

package/components/pin-button/pin-button.html

@@ -0,0 +1,20 @@
+{{#if showPrioritiseButton}}
+<span class="myft-pin-divider"></span>
+<div class="myft-pin-button-wrapper">
+	<form method="post" action="/__myft/api/core/prioritised/concept/{{id}}?method={{#if prioritised}}delete{{else}}put{{/if}}" data-myft-prioritise>
+		{{{renderReactComponent localPath="components/csrf-token/input"}}}
+		<input type="hidden" value="{{name}}" name="name"> {{#if directType}}
+		<input type="hidden" value="{{directType}}" name="directType"> {{else}}
+		<input type="hidden" value="http://www.ft.com/ontology/concept/Concept" name="directType"> {{/if}}
+		<div
+			class="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}}" class="myft-pin-button" data-prioritise-button data-trackable="prioritised" data-concept-id="{{id}}" data-prioritised="{{#if prioritised}}true{{else}}false{{/if}}"
+				aria-label="{{#if prioritised}}Unpin{{else}}Pin{{/if}} {{name}} {{#if prioritised}}from{{else}}in{{/if}} myFT" aria-pressed="{{#if prioritised}}true{{else}}false{{/if}}" title="{{#if prioritised}}Unpin{{else}}Pin{{/if}} {{name}}">
+		</button>
+	</form>
+</div>
+{{/if}}

package/components/save-for-later/save-for-later.html

@@ -0,0 +1,67 @@
+{{#if @root.flags.myFtApiWrite}}
+<form class="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">
+	{{{renderReactComponent localPath="components/csrf-token/input"}}}
+	<div
+		class="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
+		type="submit"
+		class="{{#if saveButtonWithIcon}}n-myft-ui__save-button-with-icon{{else}}n-myft-ui__button{{#variant}} n-myft-ui__button--{{this}}{{/variant}}{{/if}}"
+		data-trackable="{{#if trackableId}}{{trackableId}}{{else}}save-for-later{{/if}}"
+		{{#if isSaved}}
+			{{!-- The value of alternate label needs to be the opposite of label / the current saved state. This allows the client side JS to toggle the labels on state changes --}}
+			title="{{#if title}}{{title}} is{{/if}} Saved to myFT"
+			aria-label="{{#if title}}{{title}} is{{/if}} Saved to myFT"
+			data-alternate-label="{{#if title}}Save {{title}} to myFT for later{{else}}Save this article to myFT for later{{/if}}"
+			aria-pressed="true"
+		{{else}}
+			title="{{#if title}}Save {{title}} to myFT for later{{else}}Save this article to myFT for later{{/if}}"
+			aria-label="{{#if title}}Save {{title}} to myFT for later{{else}}Save this article to myFT for later{{/if}}"
+			data-alternate-label="{{#if title}}{{title}} is{{/if}} Saved to myFT"
+			aria-pressed="false"
+		{{/if}}
+		{{#unlessEquals appIsStreamPage true}}
+			{{#if saveButtonWithIcon}}
+				data-text-variant="save-button-with-icon-copy"
+			{{else}}
+				data-text-variant="save-button-longer-copy"
+			{{/if}}
+		{{/unlessEquals}}
+		{{#if alternateText}}
+			data-alternate-text="{{alternateText}}"
+		{{else}}
+			{{#if isSaved}}
+				data-alternate-text="Save&nbsp;"
+			{{else}}
+				data-alternate-text="Saved&nbsp;"
+			{{/if}}
+		{{/if}}
+		data-content-id="{{contentId}}" {{! duplicated here for tracking}}
+		>
+			{{#if saveButtonWithIcon}}
+				<span class="save-button-with-icon-copy" data-variant-label>{{#if buttonText~}}
+					{{buttonText}}
+				{{~else~}}
+					{{#if isSaved}}Saved{{else}}Save{{/if}}
+				{{~/if}}</span>
+			{{else}}
+				{{#if buttonText}}{{buttonText}}{{else}}
+					{{#unlessEquals appIsStreamPage true}}
+						<span class="save-button-longer-copy" data-variant-label>{{#if isSaved}}Saved&nbsp;{{else}}Save&nbsp;{{/if}}</span><span class="n-myft-ui__button--viewport-large" aria-hidden="true">to myFT</span>
+					{{else}}
+						<span>{{#if isSaved}}Saved{{else}}Save{{/if}}</span>
+					{{/unlessEquals}}
+				{{/if}}
+			{{/if}}
+		</button>
+	</form>
+{{else}}
+	<!-- Save button hidden due to myFtApiWrite being off -->
+{{/if }}

package/demos/app.js

@@ -41,7 +41,9 @@ 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 }));
@@ -54,7 +56,7 @@ app.get('/', (req, res) => {
 		flags: {
 			myFtApi: true,
 			myFtApiWrite: true
-		},
+		}
 	}, fixtures));
 });
 

package/demos/templates/demo.html

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

package/demos/templates/demo.jsx

@@ -1,9 +1,5 @@
 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) {
 
@@ -11,13 +7,9 @@ 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">
@@ -33,93 +25,9 @@ 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>
 	)
 }

package/package.json

@@ -1,15 +1,13 @@
 {
   "name": "@financial-times/n-myft-ui",
-  "version": "25.0.0-beta.1",
+  "version": "25.0.1",
   "description": "Client side component for interaction with myft",
-  "main": "dist/bundles/bundle.js",
-  "module": "dist/bundles/bundle.js",
+  "main": "server.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "commit": "commit-wizard",
     "prepare": "npx snyk protect || npx snyk protect -d || true",
-    "preinstall": "npm_config_yes=true npx check-engine",
-    "build-package": "webpack"
+    "preinstall": "[ \"$INIT_CWD\" != \"$PWD\" ] || npm_config_yes=true npx check-engine"
   },
   "repository": {
     "type": "git",
@@ -46,8 +44,6 @@
     "babel-plugin-transform-runtime": "^6.9.0",
     "babel-preset-env": "^1.7.0",
     "babel-preset-es2015": "^6.6.0",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-2": "^6.24.1",
     "babel-runtime": "^6.9.2",
     "bower": "^1.8.8",
     "bower-resolve-webpack-plugin": "^1.0.5",

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 = [] }) {
-	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 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 />
-					<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,55 +0,0 @@
-import React, { Fragment } from 'react';
-import FollowButton from '../follow-button/follow-button';
-
-export default function ConceptList ({ flags, concepts, contentType, conceptListTitle, trackable }) {
-
-	const {
-		myFtApi,
-		myFtApiWrite
-	} = flags;
-
-	const generateTrackableProps = (primary, seconday) => {
-		return {
-			'data-trackable': primary ? primary : seconday
-		}
-	}
-
-
-	return (
-
-		<Fragment>
-			{(myFtApi && myFtApiWrite && concepts && concepts.length) &&
-				<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'>
-									<a
-										href={relativeUrl || url}
-										{...generateTrackableProps(conceptTrackable, 'concept')}
-										className='concept-list__concept'>
-										{prefLabel}
-									</a>
-									<FollowButton conceptId={id} name={prefLabel} flags={flags} />
-								</li>
-							)
-						})}
-					</ul>
-				</div>}
-		</Fragment>)
-}