@financial-times/n-myft-ui 24.0.0 → 25.0.0-beta.2

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@financial-times/n-myft-ui",
-  "version": "24.0.0",
+  "version": "25.0.0-beta.2",
   "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"
+    "prepare": "npx snyk protect || npx snyk protect -d || true",
+    "build-package": "webpack"
   },
   "repository": {
     "type": "git",
@@ -26,10 +28,8 @@
     "@financial-times/dotcom-page-kit-cli": "0.4.1",
     "@financial-times/dotcom-server-handlebars": "^3.0.0",
     "@financial-times/dotcom-server-react-jsx": "^2.6.2",
-    "@financial-times/n-gage": "^8.3.0",
-    "@financial-times/n-heroku-tools": "8.3.1",
-    "@financial-times/n-internal-tool": "2.3.4",
-    "@financial-times/x-handlebars": "1.0.0-beta.21",
+    "@financial-times/n-express": "^22.4.1",
+    "@financial-times/n-gage": "^8.3.2",
     "@sucrase/jest-plugin": "^2.2.0",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
@@ -45,6 +45,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",
@@ -52,6 +54,7 @@
     "brotli": "^1.3.1",
     "chai": "4.2.0",
     "chalk": "2.4.2",
+    "check-engine": "^1.10.1",
     "css-loader": "^0.23.1",
     "denodeify": "^1.2.1",
     "eslint": "6.5.1",
@@ -83,20 +86,27 @@
     "mocha": "6.2.2",
     "mockery": "2.1.0",
     "node-fetch": "2.6.0",
-    "node-sass": "4.13.0",
+    "node-sass": "^4.14.1",
     "nodemon": "^1.9.2",
     "npm-prepublish": "^1.2.1",
     "pa11y-ci": "^2.1.1",
     "postcss-loader": "^0.9.1",
     "react": "^17.0.2",
     "regenerator-runtime": "^0.13.3",
-    "sass-loader": "^3.2.0",
     "semver": "6.3.0",
     "sinon": "^7.1.0",
     "sinon-chai": "^3.2.0",
     "snyk": "^1.216.5",
     "sucrase": "^3.10.1"
   },
+  "volta": {
+    "node": "12.22.5",
+    "npm": "7.20.2"
+  },
+  "engines": {
+    "node": "12.x",
+    "npm": "7.x || 8.x"
+  },
   "x-dash": {
     "engine": {
       "server": "hyperons"

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

package/demos/fixtures/follow-button-plus-digest.json

@@ -1,6 +0,0 @@
-{
-  "conceptId": "00000000-0000-0000-0000-000000000044",
-  "name": "Keith inc.",
-  "directType": "http://www.ft.com/ontology/company/PublicCompany",
-  "followPlusDigestEmail": true
-}

package/demos/templates/digest-on-follow.html

@@ -1,12 +0,0 @@
-<div class="o-grid-container o-grid-container--snappy">
-<h1>{{title}}</h1>
-	<div class="o-grid-row">
-		<div data-o-grid-colspan="12">
-			<h2>Follow button</h2>
-
-			{{#followButton}}
-				{{{renderReactComponent localPath="components/follow-button/follow-button" flags=@root.flags}}}
-			{{/followButton}}
-		</div>
-	</div>
-</div>