@financial-times/n-myft-ui 23.0.1 → 24.0.0

package/demos/templates/demo.html

@@ -12,7 +12,7 @@
 				</h2>
 
 				{{#followButton}}
-					{{> n-myft-ui/components/follow-button/follow-button}}
+					{{{renderReactComponent localPath="components/follow-button/follow-button" flags=@root.flags}}}
 				{{/followButton}}
 
 				<h2
@@ -21,9 +21,7 @@
 				</h2>
 
 				{{#followButton}}
-					{{>	n-myft-ui/components/follow-button/follow-button
-						buttonText=name
-					}}
+					{{{renderReactComponent localPath="components/follow-button/follow-button" buttonText=name flags=@root.flags}}}
 				{{/followButton}}
 
 				{{#saveButton}}

package/demos/templates/demo.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import FollowButton from '../../components/follow-button/follow-button';
+
+export default function Demo (props) {
+
+	const {
+		title,
+		flags,
+		followButton,
+	} = props;
+
+	const followButtonProps = {...followButton, flags};
+
+	return (
+		<div className="o-grid-container o-grid-container--snappy demo-container">
+			<h1>{title}</h1>
+
+			<section
+				id="follow-button"
+				className="demo-section">
+				<div className="o-grid-row">
+					<div data-o-grid-colspan="12">
+						<h2
+							className="demo-section__title">
+							Follow button
+						</h2>
+						<FollowButton {...followButtonProps} />
+					</div>
+				</div>
+			</section>
+		</div>
+	)
+}

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

@@ -5,7 +5,7 @@
 			<h2>Follow button</h2>
 
 			{{#followButton}}
-				{{> n-myft-ui/components/follow-button/follow-button}}
+				{{{renderReactComponent localPath="components/follow-button/follow-button" flags=@root.flags}}}
 			{{/followButton}}
 		</div>
 	</div>

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/mixins/lozenge/_themes.scss

@@ -4,28 +4,32 @@ $myft-lozenge-themes: (
 		text: oColorsByName('white'),
 		highlight: oColorsByName('claret-50'),
 		pressed-highlight: rgba(oColorsByName('black'), 0.05),
-		disabled: rgba(oColorsByName('black'), 0.5)
+		disabled: rgba(oColorsByName('black'), 0.5),
+		focus-outline: oColorsByUsecase('focus', 'outline', $fallback: null)
 	),
 	inverse: (
 		background: oColorsByName('white'),
 		text: oColorsByName('claret'),
 		highlight: rgba(white, 0.8),
 		pressed-highlight: rgba(white, 0.2),
-		disabled: rgba(oColorsByName('white'), 0.5)
+		disabled: rgba(oColorsByName('white'), 0.5),
+		focus-outline: oColorsByName('white')
 	),
 	opinion: (
 		background: oColorsByName('oxford-40'),
 		text: oColorsByName('white'),
 		highlight: oColorsByName('oxford-30'),
 		pressed-highlight: rgba(oColorsByName('oxford-40'), 0.2),
-		disabled: rgba(oColorsByName('black'), 0.5)
+		disabled: rgba(oColorsByName('black'), 0.5),
+		focus-outline: oColorsByUsecase('focus', 'outline', $fallback: null)
 	),
 	monochrome: (
 		background: oColorsByName('white'),
 		text: oColorsByName('black'),
 		highlight: oColorsByName('white-80'),
 		pressed-highlight: rgba(oColorsByName('white'), 0.2),
-		disabled: rgba(oColorsByName('white'), 0.5)
+		disabled: rgba(oColorsByName('white'), 0.5),
+		focus-outline: oColorsByName('white')
 	)
 );
 

package/mixins/lozenge/main.scss

@@ -1,6 +1,54 @@
 @import './themes';
 @import './toggle-icon';
 
+@mixin focusOutlineColor($focus-color) {
+	// Apply :focus styles as a fallback
+	// These styles will be applied to all browsers that don't use the polyfill, this includes browsers which support the feature natively.
+	body:not(.js-focus-visible) &,
+	html:not(.js-focus-visible) & {
+		// Standardise focus styles.
+		&:focus {
+			outline: 2px solid $focus-color;
+		}
+	}
+
+	// When the focus-visible polyfill is applied `.js-focus-visible` is added to the html dom node
+	// (the body node in v4 of the 3rd party polyfill)
+
+	// stylelint-disable-next-line selector-no-qualifying-type
+	body.js-focus-visible &, // stylelint-disable-next-line selector-no-qualifying-type
+	html.js-focus-visible & {
+		// Standardise focus styles.
+		// stylelint-disable-next-line selector-no-qualifying-type
+		&.focus-visible {
+			outline: 2px solid $focus-color;
+		}
+		// Disable browser default focus style.
+		// stylelint-disable-next-line selector-no-qualifying-type
+		&:focus:not(.focus-visible) {
+			outline: 0;
+		}
+	}
+
+	// These styles will be ignored by browsers which do not recognise the :focus-visible selector (as per the third bullet point in https://www.w3.org/TR/selectors-3/#Conformance)
+	// If a browser supports :focus-visible we unset the :focus styles that were applied above
+	// (within the html:not(.js-focus-visible) block).
+	&:focus-visible,
+	body:not(.js-focus-visible) &:focus,
+	html:not(.js-focus-visible) &:focus {
+		outline: unset;
+	}
+
+	// Styles given :focus-visible support. Extra selectors needed to match
+	// previous `:focus` selector specificity.
+	body:not(.js-focus-visible) &:focus-visible,
+	html:not(.js-focus-visible) &:focus-visible,
+	&:focus-visible {
+		outline: 2px solid $focus-color;
+	}
+}
+
+
 @mixin myftLozengeTheme($theme: standard, $with-toggle-icon: false) {
 	@if $with-toggle-icon != false {
 		@include myftToggleIcon($theme);
@@ -11,6 +59,8 @@
 		border: 1px solid getThemeColor(background);
 		color: getThemeColor(background);
 
+		@include focusOutlineColor(getThemeColor(focus-outline));
+
 		&:hover,
 		&:focus {
 			background-color: getThemeColor(pressed-highlight);
@@ -57,8 +107,4 @@
 	text-overflow: ellipsis;
 	transition: border-color, background-color 0.5s ease;
 	white-space: nowrap;
-
-	&:focus {
-		outline: 2px solid oColorsByName('teal-90');
-	}
 }

package/myft/main.scss

@@ -13,7 +13,6 @@ $n-notification-is-silent: false !default;
 
 @import './ui/myft-buttons/main';
 @import './ui/lists';
-@import '../components/header-tooltip/main';
 @import '../components/pin-button/main';
 @import '../components/instant-alert/main';
 

package/myft/ui/index.js

@@ -2,12 +2,10 @@ import * as myFtButtons from './myft-buttons';
 import * as lists from './lists';
 import personaliseLinks from './personalise-links';
 import updateUi from './update-ui';
-import * as headerTooltip from '../../components/header-tooltip';
 
 function init (opts) {
 	myFtButtons.init(opts);
 	lists.init();
-	headerTooltip.init();
 }
 
 export {

package/package.json

@@ -1,14 +1,11 @@
 {
   "name": "@financial-times/n-myft-ui",
-  "version": "23.0.1",
+  "version": "24.0.0",
   "description": "Client side component for interaction with myft",
   "main": "server.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"
   },
   "repository": {
@@ -27,10 +24,15 @@
     "@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/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",
+    "@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",
@@ -53,6 +55,7 @@
     "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 +65,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",
@@ -83,16 +88,25 @@
     "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"
   },
   "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/test/unread-articles-indicator/index.spec.js

@@ -1,95 +1,43 @@
 /* global expect */
 import sinon from 'sinon';
 
-const NEW_ARTICLES = [
-	{ id: 'article-1' },
-	{ id: 'article-2' },
-	{ id: 'article-3' },
-];
 const FEED_START_TIME = '2018-06-05T10:00:00.000Z';
 
 describe('unread stories indicator', () => {
-	let unreadStoriesIndicator;
-	let mockUpdate;
+	let unreadArticlesComponent;
 	let mockInitialiseFeedStartTime;
 	let mockStorage;
-	let mockUi;
 	let isStorageAvailable;
 
 	beforeEach(() => {
 		mockStorage = {
 			getFeedStartTime: sinon.stub().returns(FEED_START_TIME),
 			setFeedStartTime: sinon.stub(),
-			getLastUpdate: sinon.stub().returns({count: 22}),
-			updateLastUpdate: sinon.stub(),
-			isAvailable: sinon.stub().callsFake(() => isStorageAvailable),
-			setIndicatorDismissedTime: sinon.stub(),
-			addCountChangeListeners: sinon.stub()
+			isAvailable: sinon.stub().callsFake(() => isStorageAvailable)
 		};
-		mockUi = {
-			createIndicators: sinon.stub(),
-			setCount: sinon.stub(),
-			getState: sinon.stub(),
-		};
-		mockUpdate = sinon.stub().returns(Promise.resolve(NEW_ARTICLES));
+
 		mockInitialiseFeedStartTime = sinon.stub().resolves();
 
-		unreadStoriesIndicator = require('inject-loader!../../components/unread-articles-indicator')({
+		unreadArticlesComponent = require('inject-loader!../../components/unread-articles-indicator')({
 			'next-session-client': {
 				uuid: sinon.stub().resolves({uuid: '00000000-0000-0000-0000-000000000000'})
 			},
 			'./storage': mockStorage,
-			'./ui': mockUi,
-			'./update-count': mockUpdate,
 			'./initialise-feed-start-time': mockInitialiseFeedStartTime
 		});
 	});
 
-	describe('default export', () => {
-		describe('storage availability', () => {
-			it('should not do anything if storage is not available', () => {
-				isStorageAvailable = false;
-				unreadStoriesIndicator.default();
-				expect(mockUi.createIndicators).to.not.have.been.called;
-				expect(mockUi.setCount).to.not.have.been.called;
-				expect(mockInitialiseFeedStartTime).to.not.have.been.called;
-			});
+	describe('getNewsArticlesSinceTime', () => {
+		it('should not do anything if storage is not available', () => {
+			isStorageAvailable = false;
+			unreadArticlesComponent.getNewArticlesSinceTime();
+			expect(mockInitialiseFeedStartTime).to.not.have.been.called;
 		});
 
-		describe('initialisation', () => {
-			beforeEach(() => {
-				isStorageAvailable = true;
-				return unreadStoriesIndicator.default();
-			});
-
-			it('should initialise feed start time', () => {
-				expect(mockInitialiseFeedStartTime).to.have.been.calledOnce;
-			});
-
-			it('should create ui indicators', () => {
-				expect(mockUi.createIndicators).to.have.been.calledOnce;
-			});
-
-			it('should set the ui indicators initial count', () => {
-				expect(mockUi.setCount).to.have.been.calledOnce;
-				expect(mockUi.setCount).to.have.been.calledWith(22);
-			});
-
-			it('should set a listener for storage changes', () => {
-				expect(mockStorage.addCountChangeListeners).to.have.been.calledOnce;
-			});
-
-
-			it('should handle clicks', () => {
-				const args = mockUi.createIndicators.firstCall.args;
-
-				expect(args[1].onClick).to.be.a('function');
-
-				args[1].onClick();
-
-				expect(mockStorage.setIndicatorDismissedTime).to.have.been.calledOnce;
-				expect(mockStorage.updateLastUpdate).to.have.been.calledOnce;
-			});
+		it('should initialise feed start time', () => {
+			isStorageAvailable = true;
+			return unreadArticlesComponent.getNewArticlesSinceTime();
+			expect(mockInitialiseFeedStartTime).to.have.been.calledOnce;
 		});
 	});
 });

package/test/unread-articles-indicator/storage.spec.js

@@ -126,99 +126,6 @@ describe('storage', () => {
 		});
 	});
 
-	describe('getLastUpdate', () => {
-		beforeEach(() => {
-			mockStorage.myFTIndicatorUpdate = JSON.stringify({foo:1, time: now.toISOString(), updateStarted: now.toISOString()});
-		});
-
-		it('converts time from ISOString to Date', () => {
-			expect(storage.getLastUpdate().time).to.be.a('Date');
-		});
-
-		it('converts updateStarted from ISOString to Date', () => {
-			expect(storage.getLastUpdate().updateStarted).to.be.a('Date');
-		});
-
-		it('gives the right time', () => {
-			expect(storage.getLastUpdate().time.getTime()).to.be.equal(now.getTime());
-		});
-
-		it('gives the right updateStarted', () => {
-			expect(storage.getLastUpdate().updateStarted.getTime()).to.be.equal(now.getTime());
-		});
-	});
-
-	describe('getLastUpdate when updateStarted is false', () => {
-		beforeEach(() => {
-			mockStorage.myFTIndicatorUpdate = JSON.stringify({foo:1, time: now.toISOString(), updateStarted: false});
-		});
-
-		it('gives the right updateStarted', () => {
-			expect(storage.getLastUpdate().updateStarted).equal(false);
-		});
-	});
-
-	describe('updateLastUpdate', () => {
-		describe('when updating time', () =>{
-			const date = new Date(2018, 5, 1, 11, 30, 0);
-			beforeEach(() => {
-				mockStorage.myFTIndicatorUpdate = JSON.stringify({foo: 3, time: now.toISOString()});
-				storage.updateLastUpdate({time: date});
-			});
-
-			it('converts time from Date to ISOString', () => {
-				expect(JSON.parse(mockStorage.myFTIndicatorUpdate).time).to.equal(date.toISOString());
-			});
-
-			it('leaves other properties unchanged', () => {
-				expect(JSON.parse(mockStorage.myFTIndicatorUpdate).foo).to.equal(3);
-			});
-		});
-		describe('when updating updateStarted with a Date', () =>{
-			const date = new Date(2018, 5, 1, 11, 30, 0);
-			beforeEach(() => {
-				mockStorage.myFTIndicatorUpdate = JSON.stringify({foo: 3, updateStarted: now.toISOString()});
-				storage.updateLastUpdate({updateStarted: date});
-			});
-
-			it('converts updateStarted from Date to ISOString', () => {
-				expect(JSON.parse(mockStorage.myFTIndicatorUpdate).updateStarted).to.equal(date.toISOString());
-			});
-
-			it('leaves other properties unchanged', () => {
-				expect(JSON.parse(mockStorage.myFTIndicatorUpdate).foo).to.equal(3);
-			});
-		});
-		describe('when updating updateStarted with false', () =>{
-			beforeEach(() => {
-				mockStorage.myFTIndicatorUpdate = JSON.stringify({foo: 3, updateStarted: now.toISOString()});
-				storage.updateLastUpdate({updateStarted: false});
-			});
-
-			it('sets updateStarted to false', () => {
-				expect(JSON.parse(mockStorage.myFTIndicatorUpdate).updateStarted).to.equal(false);
-			});
-		});
-		describe('when updating other properties', () =>{
-			beforeEach(() => {
-				mockStorage.myFTIndicatorUpdate = JSON.stringify({foo: 3, bar:4, baz:5});
-				storage.updateLastUpdate({bar: 5, baz:6});
-			});
-
-			it('updates existing properties', () => {
-				expect(JSON.parse(mockStorage.myFTIndicatorUpdate).bar).to.equal(5);
-			});
-
-			it('add new properties', () => {
-				expect(JSON.parse(mockStorage.myFTIndicatorUpdate).baz).to.equal(6);
-			});
-
-			it('leaves other properties unchanged', () => {
-				expect(JSON.parse(mockStorage.myFTIndicatorUpdate).foo).to.equal(3);
-			});
-		});
-	});
-
 	describe('isAvailable', () => {
 		it('should return true if it is available', () => {
 			sinon.stub(window.Storage.prototype, 'removeItem').callsFake((key) => delete mockStorage[key]);

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/header-tooltip/index.js

@@ -1,37 +0,0 @@
-import Tooltip from 'o-tooltip';
-import myftClient from 'next-myft-client';
-
-const isMyftPage = window.location.pathname.startsWith('/myft');
-const externalReferrer = !document.referrer || !(new URL(document.referrer).hostname.endsWith('ft.com'));
-const myftHeaderLogo = document.querySelector('.o-header__top-link--myft');
-const flagIsEnabled = window.FT && window.FT.flags && window.FT.flags.get('myFT_HeaderTooltip');
-
-export const init = () => {
-	if (!externalReferrer || isMyftPage || !myftHeaderLogo || !flagIsEnabled) {
-		return;
-	}
-
-	return myftClient.getAll('followed', 'concept')
-		.then(followedConcepts => {
-			if (followedConcepts.length) {
-				const concepts = followedConcepts
-					.sort((a, b) => b.lastPublished - a.lastPublished)
-					.map(({name}) => `<span style="no-wrap">${name}</span>`).slice(0, 3);
-				let content = 'Read the latest on ';
-
-				if (concepts.length === 3) {
-					content += `${concepts.shift()}, `;
-				}
-
-				content += concepts.join(' and ');
-				content += ' stories.';
-
-				new Tooltip(myftHeaderLogo, {
-					target: 'myft-header-tooltip',
-					content: content,
-					showOnConstruction: true,
-					position: 'below'
-				});
-			}
-		});
-};

package/components/header-tooltip/main.scss

@@ -1,12 +0,0 @@
-.o-header__top-link--myft__container {
-	position: relative;
-
-	.o-tooltip {
-		white-space: normal;
-		text-align: left;
-		min-width: 200px;
-		@include oGridRespondTo('L') {
-			min-width: 250px;
-		}
-	}
-}

package/components/unread-articles-indicator/constants.js

@@ -1,4 +0,0 @@
-const MINUTE = 60 * 1000;
-
-export const UPDATE_INTERVAL = 5 * MINUTE; // how often we should refresh the data from the server
-export const UPDATE_TIMEOUT = 10 * MINUTE; // how long before we assume an update finished without tidying up.

package/components/unread-articles-indicator/count-unread-articles.js

@@ -1,26 +0,0 @@
-import {json as fetchJson} from 'fetchres';
-import {isAfter, parseISO} from './date-fns';
-
-export default async (userId, startTime) => {
-	const articles = await fetchContentFromPersonalisedFeed(userId);
-	const unreadArticlesSinceLastVisit = articles
-		.filter(({userCompletion = -1}) => userCompletion < 1) // only include unread articles
-		.filter(({contentTimeStamp}) => isAfter(parseISO(contentTimeStamp), startTime)); // only include articles published since last visit
-
-	return unreadArticlesSinceLastVisit.length;
-};
-
-async function fetchContentFromPersonalisedFeed (userId) {
-
-	const searchParams = new URLSearchParams({
-		originatingSignals: 'followed',
-		from: '-1d',
-		source: 'myft-ui'
-	});
-
-	const res = await fetch(`/__myft/api/onsite/feed/${userId}?${searchParams.toString()}`, {
-		credentials: 'include'
-	});
-	const {results = []} = await fetchJson(res);
-	return results;
-}