@financial-times/n-myft-ui 23.1.3 → 25.0.0

package/jest.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+	transform: {
+		'.(js|jsx)': '@sucrase/jest-plugin',
+	},
+	testEnvironment: 'jest-environment-jsdom',
+	modulePathIgnorePatterns: ['node_modules', 'bower_components'],
+	testMatch: ['<rootDir>/components/**/*.test.js']
+};

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@financial-times/n-myft-ui",
-  "version": "23.1.3",
+  "version": "25.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",
-    "precommit": "node_modules/.bin/secret-squirrel",
-    "prepush": "make verify -j3",
-    "commitmsg": "node_modules/.bin/secret-squirrel-commitmsg",
-    "prepare": "npx snyk protect || npx snyk protect -d || true"
+    "prepare": "npx snyk protect || npx snyk protect -d || true",
+    "preinstall": "npm_config_yes=true npx check-engine",
+    "build-package": "webpack"
   },
   "repository": {
     "type": "git",
@@ -27,10 +27,13 @@
     "@financial-times/dotcom-build-js": "0.4.1",
     "@financial-times/dotcom-build-sass": "0.4.1",
     "@financial-times/dotcom-page-kit-cli": "0.4.1",
-    "@financial-times/n-gage": "^3.12.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/dotcom-server-handlebars": "^3.0.0",
+    "@financial-times/dotcom-server-react-jsx": "^2.6.2",
+    "@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",
     "ascii-table": "0.0.9",
     "autoprefixer": "9.7.0",
     "aws-sdk-mock": "4.5.0",
@@ -43,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",
@@ -50,9 +55,11 @@
     "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",
+    "eslint-plugin-react": "^7.27.1",
     "extract-css-block-webpack-plugin": "^1.3.0",
     "extract-text-webpack-plugin": "3.0.2",
     "fetch-mock": "^5.0.3",
@@ -62,6 +69,8 @@
     "hyperons": "^0.4.1",
     "imports-loader": "0.8.0",
     "inject-loader": "^3.0.0",
+    "jest": "^27.4.5",
+    "jsdom": "^19.0.0",
     "karma": "4.4.1",
     "karma-browserstack-launcher": "1.5.1",
     "karma-chai": "^0.1.0",
@@ -78,21 +87,37 @@
     "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"
+    "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"
     }
+  },
+  "husky": {
+    "hooks": {
+      "commit-msg": "node_modules/.bin/secret-squirrel-commitmsg",
+      "pre-commit": "node_modules/.bin/secret-squirrel",
+      "pre-push": "make verify -j3"
+    }
   }
 }

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,85 +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}}
-					{{>	n-myft-ui/components/follow-button/follow-button
-						variant="primary"
-						buttonText=name
-						collectionName=../collectionName
-					}}
-				{{else}}
-					{{>	n-myft-ui/components/follow-button/follow-button
-						variant="inverse"
-						buttonText=name
-						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~}}"
-			/>
-			{{> n-myft-ui/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,31 +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>
-					{{> n-myft-ui/components/follow-button/follow-button
-						conceptId=id
-						name=prefLabel
-					}}
-				</li>
-			{{/each}}
-		</ul>
-	</div>
-{{/ifAll}}

package/components/csrf-token/input.html

@@ -1,5 +0,0 @@
-<input
-	data-myft-csrf-token
-	value="{{#if @root.cacheablePersonalisedUrl}}{{@root.csrfToken}}{{/if}}"
-	type="hidden"
-	name="token">

package/components/follow-button/follow-button.html

@@ -1,79 +0,0 @@
-{{#if @root.flags.myFtApiWrite}}
-	<form
-		class="n-myft-ui n-myft-ui--follow {{extraClasses}}"
-		method="GET"
-		data-myft-ui="follow"
-		data-concept-id="{{conceptId}}"
-		{{#if collectionName}}data-myft-tracking="collectionName={{collectionName}}"{{/if}}
-		{{#if followPlusDigestEmail}}
-			action="/__myft/api/core/follow-plus-digest-email/{{conceptId}}?method=put"
-			data-myft-ui-variant="followPlusDigestEmail"
-		{{else}}
-			{{#ifAll setFollowButtonStateToSelected @root.cacheablePersonalisedUrl}}
-				action="/myft/remove/{{conceptId}}"
-				data-js-action="/__myft/api/core/followed/concept/{{conceptId}}?method=delete"
-			{{else}}
-				action="/myft/add/{{conceptId}}"
-				data-js-action="/__myft/api/core/followed/concept/{{conceptId}}?method=put"
-			{{/ifAll}}
-		{{/if}}>
-		{{> n-myft-ui/components/csrf-token/input}}
-		<div
-			class="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
-			{{#ifAll setFollowButtonStateToSelected @root.cacheablePersonalisedUrl}}
-				aria-label="Remove {{name}} from myFT"
-				title="Remove {{name}} from myFT"
-				data-alternate-label="Add {{name}} to myFT"
-				aria-pressed="true"
-				{{#if alternateText}}
-					data-alternate-text="{{alternateText}}"
-				{{else}}
-					{{#if buttonText}}
-						data-alternate-text="{{buttonText}}"
-					{{else}}
-						data-alternate-text="Add to myFT"
-					{{/if}}
-				{{/if}}
-			{{else}}
-				aria-pressed="false"
-				aria-label="Add {{name}} to myFT"
-				title="Add {{name}} to myFT"
-				data-alternate-label="Remove {{name}} from myFT"
-				{{#if alternateText}}
-					data-alternate-text="{{alternateText}}"
-				{{else}}
-					{{#if buttonText}}
-						data-alternate-text="{{buttonText}}"
-					{{else}}
-						data-alternate-text="Added"
-					{{/if}}
-				{{/if}}
-			{{/ifAll}}
-			class="{{extraButtonClasses}}
-				n-myft-follow-button
-				{{~#variant}} n-myft-follow-button--{{this}}{{/variant~}}"
-			data-concept-id="{{conceptId}}" {{! duplicated here for tracking}}
-			{{#if followPlusDigestEmail}}
-				data-trackable-context-messaging="add-to-myft-plus-digest-button"
-			{{/if}}
-			data-trackable="follow"
-			type="submit">
-			{{~#if buttonText~}}
-				{{buttonText}}
-			{{~else~}}
-				{{~#ifAll setFollowButtonStateToSelected @root.cacheablePersonalisedUrl~}}
-					Added
-				{{~else~}}
-					Add to myFT
-				{{~/ifAll~}}
-			{{~/if~}}
-		</button>
-	</form>
-{{else}}
-	<!-- Add to myFT 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>
-		{{> n-myft-ui/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">
-	{{> n-myft-ui/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}}
-				{{> n-myft-ui/components/follow-button/follow-button}}
-			{{/followButton}}
-		</div>
-	</div>
-</div>