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

package/components/unread-articles-indicator/main.scss

@@ -1,59 +0,0 @@
-$circle-radius-desktop: 17px;
-$circle-radius-mobile-single-digit: 14px;
-$circle-radius-mobile: 8px;
-
-.myft__indicator-container {
-	position: relative;
-}
-
-.myft__indicator {
-	padding: 0;
-	position: absolute;
-	top: 18px;
-	right: -3px;
-
-	border: 1px solid oColorsByName("paper");
-	background-color: oColorsByName("claret");
-
-	font-family: MetricWeb, sans-serif;
-	vertical-align: middle;
-	overflow: hidden;
-	text-align: center;
-
-	font-size: 12px;
-	font-weight: 500;
-	line-height: $circle-radius-mobile;
-	border-radius: $circle-radius-mobile;
-	width: $circle-radius-mobile;
-	height: $circle-radius-mobile;
-
-	// On mobile hide text unless its only one digit
-	color: transparent;
-
-	&.myft__indicator--single-digit {
-		top: 16px;
-		right: -6px;
-		color: oColorsByName("white");
-		line-height: $circle-radius-mobile-single-digit;
-		border-radius: $circle-radius-mobile-single-digit;
-		width: $circle-radius-mobile-single-digit;
-		height: $circle-radius-mobile-single-digit;
-	}
-	@include oGridRespondTo(M) {
-		top: 16px;
-		right: -8px;
-		color: oColorsByName("white");
-		line-height: $circle-radius-desktop;
-		border-radius: $circle-radius-desktop;
-		width: $circle-radius-desktop;
-		height: $circle-radius-desktop;
-		&.myft__indicator--single-digit {
-			// shows single digit counts slightly larger for more legibility
-			font-size: 13px;
-		}
-	}
-}
-
-.myft__indicator--hidden {
-	display: none;
-}

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

@@ -1,15 +0,0 @@
-function dispatchEvent (detail) {
-	const event = new CustomEvent('oTracking.event', {
-		detail,
-		bubbles: true
-	});
-
-	document.body.dispatchEvent(event);
-}
-
-export const onCountChange = (count, newArticlesSinceTime) => dispatchEvent({
-	category: 'unread-articles-indicator',
-	action: 'render',
-	count,
-	newArticlesSinceTime
-});

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

@@ -1,99 +0,0 @@
-class Indicator {
-	constructor (container, {onClick} = {}) {
-		this.count = undefined;
-
-		this.container = container;
-		this.container.classList.add('myft__indicator-container');
-
-		this.el = document.createElement('span');
-		this.el.classList.add('myft__indicator');
-		this.el.classList.add('myft__indicator--hidden');
-
-		container.appendChild(this.el);
-
-		if (typeof onClick === 'function') {
-			this.container.addEventListener('click', () => onClick());
-		}
-	}
-
-	setCount (count) {
-		if( count === this.count ) {
-			return;
-		}
-		if( count < 1 ) {
-			this.el.classList.add('myft__indicator--hidden');
-		} else {
-			this.el.classList.remove('myft__indicator--hidden');
-			if( count < 10 ) {
-				this.el.classList.add('myft__indicator--single-digit');
-			} else {
-				this.el.classList.remove('myft__indicator--single-digit');
-			}
-			this.el.innerText = count > 0 && count < 200 ? count : '';
-		}
-		this.count = count;
-	}
-}
-
-class Favicon {
-	constructor () {
-		this.count = undefined;
-		this.faviconLinks = Array.from(document.querySelectorAll('head link[rel=icon]'));
-		this.showDot = false;
-	}
-
-	setCount (count) {
-		if( count === this.count ) {
-			return;
-		}
-		this.showDot = count > 0;
-		const newImage = this.showDot ? 'brand-ft-logo-square-coloured-dot' : 'brand-ft-logo-square-coloured-no-dot';
-		this.faviconLinks.forEach(link => {
-			link.href = link.href.replace(/brand-ft-logo-square-coloured(-dot|-no-dot)?/, newImage);
-		});
-		this.count = count;
-	}
-}
-
-class Title {
-	constructor () {
-		this.count = undefined;
-		this.originalTitle = document.title;
-	}
-
-	setCount (count) {
-		if( count === this.count ) {
-			return;
-		}
-		document.title = count > 0 ? `(${count}) ${this.originalTitle}` : this.originalTitle;
-		this.count = count;
-	}
-}
-
-let indicators;
-let favicon;
-let title;
-
-export const createIndicators = (targets, options = {}) => {
-	indicators = [...targets].map(target => new Indicator(target, options));
-
-	if (options.flags && options.flags.myftUnreadFavicon) {
-		favicon = new Favicon();
-		title = new Title();
-	}
-};
-
-export const setCount = count => {
-	indicators.forEach(indicator => indicator.setCount(count));
-	if (favicon) {
-		favicon.setCount(count);
-	}
-	if (title) {
-		title.setCount(count);
-	}
-};
-
-export const getState = () => ({
-	faviconHasDot: favicon ? favicon.showDot : false,
-	numberInTitle: title ? title.count : 0
-});

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

@@ -1,40 +0,0 @@
-import {isAfter} from './date-fns';
-import * as storage from './storage';
-import countUnreadArticles from './count-unread-articles';
-import * as tracking from './tracking';
-import {UPDATE_INTERVAL, UPDATE_TIMEOUT} from './constants';
-
-
-function latest (a, b) {
-	if (!a) return b;
-	if (!b) return a;
-	return isAfter(a, b) ? a : b;
-}
-
-export default async function updateCount (userId, now) {
-	let doingUpdate;
-	try {
-		const lastUpdate = storage.getLastUpdate();
-
-		const isFirstUpdate = !lastUpdate; // Always update if there has never been an update before.
-		const noUpdateInProgress = !isFirstUpdate && (!lastUpdate.time || now.getTime() - lastUpdate.time.getTime() > UPDATE_INTERVAL);
-		const updateInProgressHasTimedOut = !isFirstUpdate && (!lastUpdate.updateStarted || now.getTime() - lastUpdate.updateStarted.getTime() > UPDATE_TIMEOUT);
-
-		if (isFirstUpdate || noUpdateInProgress && updateInProgressHasTimedOut) {
-
-			storage.updateLastUpdate({updateStarted: now});
-
-			const startTime = latest(storage.getFeedStartTime(), storage.getIndicatorDismissedTime());
-
-			doingUpdate = true;
-			const count = await countUnreadArticles(userId, startTime);
-			if (!lastUpdate || count !== lastUpdate.count) {
-				tracking.onCountChange(count, startTime);
-			}
-			storage.setLastUpdate({time: now, count, updateStarted: false});
-		}
-	} catch (error) {
-		if (doingUpdate) storage.updateLastUpdate({updateStarted: false});
-		throw error;
-	}
-};

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

@@ -1,72 +0,0 @@
-/* global expect */
-
-import fetchMock from 'fetch-mock';
-
-const START_TIME = new Date('2018-06-05T06:48:26.635Z');
-const userId = '00000000-0000-0000-0000-000000000000';
-
-const timestamps = {
-	BEFORE: '2018-06-04T06:48:26.635Z',
-	AFTER: '2018-06-05T07:48:26.635Z'
-};
-
-const articleGenerator = () => {
-	const counters = {};
-	return (read, when) => {
-		if (counters[read] === undefined) {
-			counters[read] = {};
-		}
-		if (counters[read][when] === undefined) {
-			counters[read][when] = 0;
-		}
-		const count = counters[read][when]++;
-		return {
-			id: `${read}_${when}_${count}`,
-			contentTimeStamp: timestamps[when],
-			userCompletion: read === 'READ' ? 1 : 0
-		};
-	};
-};
-
-
-const generateFeedArticle = articleGenerator();
-const mockPersonalisedFeedData = {
-	results: [
-		generateFeedArticle('READ', 'AFTER'),
-		generateFeedArticle('UNREAD', 'BEFORE'),
-		generateFeedArticle('READ', 'AFTER'),
-		generateFeedArticle('UNREAD', 'BEFORE'),
-		generateFeedArticle('UNREAD', 'BEFORE'),
-		generateFeedArticle('UNREAD', 'AFTER'),
-		generateFeedArticle('UNREAD', 'BEFORE'),
-		generateFeedArticle('UNREAD', 'AFTER'),
-		generateFeedArticle('UNREAD', 'AFTER'),
-		generateFeedArticle('UNREAD', 'AFTER'),
-		generateFeedArticle('UNREAD', 'AFTER'),
-		generateFeedArticle('UNREAD', 'AFTER'),
-		generateFeedArticle('UNREAD', 'AFTER'),
-		generateFeedArticle('UNREAD', 'AFTER'),
-	]
-};
-
-describe('count-unread-articles', () => {
-	let count;
-
-	const countUnreadArticles = require('../../components/unread-articles-indicator/count-unread-articles');
-
-	beforeEach(() => {
-		count = null;
-		fetchMock.get('begin:/__myft/api/onsite/feed/', mockPersonalisedFeedData);
-
-		return countUnreadArticles(userId, START_TIME)
-			.then(resolvedValue => {
-				count = resolvedValue;
-			});
-	});
-
-	afterEach(fetchMock.restore);
-
-	it('should return only the unread articles after the start time', () => {
-		expect(count).to.equal(8);
-	});
-});

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

@@ -1,26 +0,0 @@
-/* global expect */
-import * as tracking from '../../components/unread-articles-indicator/tracking';
-
-describe('unread-articles-indicator tracking', () => {
-	describe('onCountChange', () => {
-		let dispatchedEvent;
-		const COUNT = 3;
-		const NEW_ARTICLES_SINCE_TIME = '2018-06-18T14:22:51.098Z';
-
-		beforeEach(() => {
-			dispatchedEvent = null;
-			document.addEventListener('oTracking.event', event => dispatchedEvent = event);
-		});
-
-		it('should should dispatch the event', () => {
-			tracking.onCountChange(COUNT, NEW_ARTICLES_SINCE_TIME);
-
-			expect(dispatchedEvent.detail).to.deep.equal({
-				category: 'unread-articles-indicator',
-				action: 'render',
-				count: COUNT,
-				newArticlesSinceTime: NEW_ARTICLES_SINCE_TIME
-			});
-		});
-	});
-});

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

@@ -1,123 +0,0 @@
-/* global expect */
-import sinon from 'sinon';
-import * as ui from '../../components/unread-articles-indicator/ui';
-
-describe('unread stories indicator - ui', () => {
-
-	describe('createIndicators', () => {
-		let containers;
-		let options;
-		const mockContainer = document.createElement('div');
-
-		mockContainer.classList.add('o-header__top-link--myft');
-
-		beforeEach(() => {
-			containers = [0, 1].map(() => {
-				const cont = mockContainer.cloneNode(false);
-
-				document.body.appendChild(cont);
-
-				return cont;
-			});
-		});
-
-		afterEach(() => {
-			containers.forEach(container => container.remove());
-		});
-
-		describe('createIndicators', () => {
-			beforeEach(() => {
-				ui.createIndicators(containers);
-			});
-
-			it('should set a class on each container', () => {
-				containers.forEach(container => {
-					expect(container.classList.contains('myft__indicator-container')).to.equal(true);
-				});
-			});
-
-			it('should add a count element to each container', () => {
-				containers.forEach(container => {
-					const els = container.querySelectorAll('.myft__indicator');
-
-					expect(els.length).to.equal(1);
-				});
-			});
-		});
-
-		describe('setCount', () => {
-			beforeEach(() => {
-				ui.createIndicators(containers);
-				ui.setCount(3);
-			});
-
-			it('should show the count in the count element', () => {
-				containers.forEach(container => {
-					const el = container.querySelector('.myft__indicator');
-
-					expect(el.innerText).to.equal('3');
-				});
-			});
-
-			it('should hide the indicator when count is zero', () => {
-				ui.setCount(0);
-				containers.forEach(container => {
-					const el = container.querySelector('.myft__indicator');
-
-					expect(el.classList.contains('myft__indicator--hidden')).to.equal(true);
-				});
-			});
-
-			it('should set a single digit class when count is less than 10', () => {
-				ui.setCount(9);
-				containers.forEach(container => {
-					const el = container.querySelector('.myft__indicator');
-
-					expect(el.classList.contains('myft__indicator--hidden')).to.equal(false);
-					expect(el.classList.contains('myft__indicator--single-digit')).to.equal(true);
-				});
-			});
-
-			it('should remove a single digit class when count is more than 10', () => {
-				ui.setCount(10);
-				containers.forEach(container => {
-					const el = container.querySelector('.myft__indicator');
-
-					expect(el.classList.contains('myft__indicator--hidden')).to.equal(false);
-					expect(el.classList.contains('myft__indicator--single-digit')).to.equal(false);
-				});
-			});
-
-			it('should not display number when count is more than 200', () => {
-				ui.setCount(200);
-				containers.forEach(container => {
-					const el = container.querySelector('.myft__indicator');
-
-					expect(el.classList.contains('myft__indicator--hidden')).to.equal(false);
-					expect(el.classList.contains('myft__indicator--single-digit')).to.equal(false);
-					expect(el.innerText).to.equal('');
-				});
-			});
-		});
-
-		describe('click handling', () => {
-			beforeEach(() => {
-				options = {
-					onClick: sinon.stub()
-				};
-				ui.createIndicators(containers, options);
-				ui.setCount(3);
-			});
-
-			describe('given an indicator is clicked', () => {
-				beforeEach(() => {
-					containers[0].click();
-				});
-
-				it('should set the indicator dismissed time', () => {
-					expect(options.onClick.called).to.equal(true);
-				});
-			});
-		});
-	});
-});

package/test/unread-articles-indicator/update-count.spec.js

@@ -1,156 +0,0 @@
-/* global expect */
-import sinon from 'sinon';
-
-const MOCK_COUNT = 1234;
-const MOCK_PREVIOUS_COUNT = 1230;
-const MOCK_NOW = new Date('2019-09-23T11:29:00Z');
-const MOCK_EARLIEST_CUTOFF_TIME = new Date('2019-09-22T00:00:00Z');
-const MOCK_OVERDUE_REFRESH_TIME = new Date('2019-09-23T11:23:59Z');
-const MOCK_UNDUE_REFRESH_TIME = new Date('2019-09-23T11:24:01Z');
-const USER_ID = '00000000-0000-0000-0000-000000000000';
-
-const mocks = {
-	countUnreadArticles: sinon.stub().resolves(MOCK_COUNT),
-	setCount: sinon.stub(),
-	onCountChange: sinon.stub()
-};
-
-const mockStorage = {
-	_lastUpdate: undefined,
-	_setLastUpdate: sinon.spy( function (x) { this.default.lastUpdate = x; } ),
-	getLastUpdate () { return this.default.lastUpdate; },
-	setLastUpdate (x) { this._setLastUpdate(x); },
-	updateLastUpdate (x) { this._setLastUpdate(x); },
-	getFeedStartTime () { return MOCK_EARLIEST_CUTOFF_TIME; },
-	getIndicatorDismissedTime () { return MOCK_EARLIEST_CUTOFF_TIME; }
-};
-
-function resetMocks () {
-	mocks.countUnreadArticles.resetHistory();
-	mocks.setCount.resetHistory();
-	mockStorage._setLastUpdate.resetHistory();
-}
-
-describe('update function', () => {
-
-	const injector = require('inject-loader!../../components/unread-articles-indicator/update-count');
-	const updateCount = injector({
-		'./storage': mockStorage,
-		'./count-unread-articles': mocks.countUnreadArticles,
-		'./tracking': {onCountChange: mocks.onCountChange}
-	});
-
-	context('when there is no previous update', () => {
-		before( function () {
-			resetMocks();
-			mockStorage.lastUpdate = undefined;
-			return updateCount(USER_ID, MOCK_NOW);
-		} );
-
-		it('checks for new articles', () => {
-			expect(mocks.countUnreadArticles).calledWith(USER_ID, MOCK_EARLIEST_CUTOFF_TIME);
-		});
-
-		it('marked an update as in progress', () => {
-			expect(mockStorage._setLastUpdate.firstCall.args[0].updateStarted.toISOString()).equal(MOCK_NOW.toISOString());
-		});
-
-		it('updates the local storage', () => {
-			expect(mockStorage.lastUpdate.count).equal(MOCK_COUNT);
-		});
-
-	});
-
-
-	context('when an update is due', () => {
-		before( function () {
-			resetMocks();
-			mockStorage.lastUpdate = {time: MOCK_OVERDUE_REFRESH_TIME};
-			return updateCount(USER_ID, MOCK_NOW);
-		} );
-
-		it('checks for new articles', () => {
-			expect(mocks.countUnreadArticles).calledWith(USER_ID, MOCK_EARLIEST_CUTOFF_TIME);
-		});
-
-		it('updates the local storage', () => {
-			expect(mockStorage.lastUpdate.count).equal(MOCK_COUNT);
-		});
-
-		it('marked an update as in progress', () => {
-			expect(mockStorage._setLastUpdate.firstCall.args[0].updateStarted.toISOString()).equal(MOCK_NOW.toISOString());
-		});
-
-		it('doesn\'t block further updates', () => {
-			expect(mockStorage.lastUpdate.updateStarted).equal(false);
-		});
-	});
-
-	context('when an update is not due', () => {
-		const lastUpdate = {time: MOCK_UNDUE_REFRESH_TIME, count: MOCK_PREVIOUS_COUNT};
-		before( function () {
-			resetMocks();
-			mockStorage.lastUpdate = lastUpdate;
-			return updateCount(USER_ID, MOCK_NOW);
-		} );
-
-		it('does not check for new articles', () => {
-			expect(mocks.countUnreadArticles.notCalled).equal(true,'Unexpected call to countUnreadArticles()');
-		});
-
-		it('did not mark an update as in progress', () => {
-			expect(mockStorage._setLastUpdate.notCalled).equal(true,'Unexpected storage update');
-		});
-
-		it('doesn\'t update the local storage', () => {
-			expect(mockStorage.lastUpdate).equal(lastUpdate);
-		});
-	});
-
-	context('when an update fails', () => {
-		let err;
-		before( async () => {
-			resetMocks();
-			mocks.countUnreadArticles.rejects(new Error('boom'));
-			mockStorage.lastUpdate = undefined;
-			try {
-				await updateCount(USER_ID, MOCK_NOW);
-			} catch(e) {
-				err = e;
-			}
-		} );
-
-		after( () => {
-			mocks.countUnreadArticles.resolves(MOCK_COUNT);
-		});
-
-		it('marks the update as in progress', () => {
-			expect(mockStorage._setLastUpdate.firstCall.args[0].updateStarted.toISOString()).equal(MOCK_NOW.toISOString());
-		});
-
-		it('doesn\'t block further updates', () => {
-			expect(mockStorage.lastUpdate.updateStarted).equal(false);
-		});
-
-		it('should throw an error', () => {
-			expect(err.message).to.equal('boom');
-		});
-	});
-
-	context('when an update is due but already happening', () => {
-		before( function () {
-			resetMocks();
-			mockStorage.lastUpdate = {time: MOCK_OVERDUE_REFRESH_TIME, count: MOCK_PREVIOUS_COUNT, updateStarted: MOCK_OVERDUE_REFRESH_TIME};
-			return updateCount(USER_ID, MOCK_NOW);
-		} );
-
-		it('does not check for new articles', () => {
-			expect(mocks.countUnreadArticles.notCalled).equal(true,'Unexpected call to countUnreadArticles()');
-		});
-
-		it('does not touch local storage', () => {
-			expect(mockStorage._setLastUpdate.notCalled).equal(true,'Unexpected storage update');
-		});
-
-	});
-});