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

package/jsx-migration.md

@@ -0,0 +1,16 @@
+### Handlebars to JSX migration notes
+
+This document serves as a troubleshooting guide for `handlebars` components that have been migrated to `jsx`. Also, notes can be added to this document for anything related to the migration.
+
+A common cause of issues/bugs with migrated components is missing HTML attributes. The business logic related to these components heavily depend on these attributes and their values. If an action related to any of these migrated components fails, compare the jsx version and the handlebars version to see if an attribute is getting the wrong value or is missing.
+
+Another cause of issues will be missing flags. Ensure consuming applications pass the required flags to these components.
+
+Currently we have migrated the following `handlebars` partials to `jsx`:
+- components/collections/collections.jsx [handlebars fount here](https://github.com/Financial-Times/n-myft-ui/blob/dfbf06d10f78756871cfe8d2aeb863ce4bcca1e1/components/collections/collections.html)
+- components/concept-list/concept-list.jsx [handlebars found here](https://github.com/Financial-Times/n-myft-ui/blob/dfbf06d10f78756871cfe8d2aeb863ce4bcca1e1/components/concept-list/concept-list.html)
+- components/follow-button/follow-button.jsx [handlebars found here](https://github.com/Financial-Times/n-myft-ui/blob/bf2145fcfd211001dfab6a3a271dd72808d062bd/components/follow-button/follow-button.html)
+- components/pin-button/pin-button.jsx [handlebars found here](https://github.com/Financial-Times/n-myft-ui/blob/dfbf06d10f78756871cfe8d2aeb863ce4bcca1e1/components/pin-button/pin-button.html)
+- components/save-for-later/save-for-later.jsx [handlebars found here](https://github.com/Financial-Times/n-myft-ui/blob/11d483364bb0f002c3a0b45bc024c83bb055268e/components/save-for-later/save-for-later.jsx)
+- components/instant-alert/instant-alert.jsx [handlebars found here](https://github.com/Financial-Times/n-myft-ui/blob/dfbf06d10f78756871cfe8d2aeb863ce4bcca1e1/components/instant-alert/instant-alert.html)
+- components/csrf-token/input.jsx [handlebars found here](https://github.com/Financial-Times/n-myft-ui/blob/bf2145fcfd211001dfab6a3a271dd72808d062bd/components/csrf-token/input.html)

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "@financial-times/n-myft-ui",
-  "version": "25.0.1",
+  "version": "26.0.0",
   "description": "Client side component for interaction with myft",
-  "main": "server.js",
+  "main": "dist/bundles/bundle.js",
+  "module": "dist/bundles/bundle.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "commit": "commit-wizard",
     "prepare": "npx snyk protect || npx snyk protect -d || true",
-    "preinstall": "[ \"$INIT_CWD\" != \"$PWD\" ] || npm_config_yes=true npx check-engine"
+    "preinstall": "[ \"$INIT_CWD\" != \"$PWD\" ] || npm_config_yes=true npx check-engine",
+    "build-package": "webpack"
   },
   "repository": {
     "type": "git",
@@ -44,6 +46,8 @@
     "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/webpack.config.js

@@ -0,0 +1,34 @@
+const path = require('path');
+
+module.exports = {
+	entry: './components/index.js',
+	resolve: {
+		extensions: ['.js', '.jsx']
+	},
+	module: {
+		rules: [
+			{
+				test: /\.(js|jsx)$/,
+				exclude: /node_modules/,
+				use: [
+					{
+						loader: 'babel-loader',
+						options: {
+							presets: [
+								'react',
+								'stage-2'
+							]
+						}
+					}
+				]
+			}
+		]
+	},
+	target: 'node',
+	output: {
+		path: path.resolve(__dirname, 'dist/bundles'),
+		filename: 'bundle.js',
+		libraryTarget: 'umd',
+		library: '@financial-times/n-myft-ui'
+	}
+};

package/components/collections/collections.html

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

@@ -1,28 +0,0 @@
-{{#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/instant-alert/instant-alert.html

@@ -1,47 +0,0 @@
-{{#if @root.flags.myFtApiWrite}}
-<form class="n-myft-ui n-myft-ui--instant{{#if hideButtonText}} n-myft-ui--instant--hide-text{{/if}} {{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">
-	{{{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}}
-	<button
-			aria-label="Get instant alerts for {{name}}"
-			{{#ifAll hasInstantAlert @root.cacheablePersonalisedUrl}}
-			aria-pressed="true"
-			{{else}}
-			aria-pressed="false"
-			{{/ifAll}}
-	class="n-myft-ui__button
-	{{#variant}} n-myft-ui__button--{{this}}{{/variant}}
-	{{#size}} n-myft-ui__button--{{this}}{{/size}}
-	n-myft-ui__button--instant
-	n-myft-ui__button--instant-light"
-	data-alternate-label="Stop instant alerts for {{name}}"
-	{{#if alternateText}}
-	data-alternate-text="{{alternateText}}"
-	{{else}}
-	{{#if buttonText}}
-	data-alternate-text="{{buttonText}}"
-	{{else}}
-	data-alternate-text="Instant alerts"
-	{{/if}}
-	{{/if}}
-	data-concept-id="{{conceptId}}" {{! duplicated here for tracking}}
-	data-trackable="instant"
-	title="Get instant alerts for {{name}}"
-	name="_rel.instant"
-	value="{{#if hasInstantAlert}}false{{else}}true{{/if}}"
-	type="submit"
-	>{{#if buttonText}}{{buttonText}}{{else}}Instant alerts{{/if}}</button>
-</form>
-{{else}}
-<!-- Instant alert button hidden due to myFtApiWrite being off -->
-{{/if}}

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

@@ -1,20 +0,0 @@
-{{#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

@@ -1,67 +0,0 @@
-{{#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 }}