@financial-times/n-myft-ui 38.0.2 → 38.0.4

package/.toolkitstate/ci.json

@@ -1,6 +1,6 @@
 {
   "branch": "",
   "repo": "n-myft-ui",
-  "version": "032d682829d125edd45469ab17376a909ab61c86",
-  "tag": "v38.0.2"
+  "version": "2e06941445c220495ee1c6c33990cf542f7ae683",
+  "tag": "v38.0.4"
 }

package/components/save-for-later/save-for-later.html

@@ -1,61 +1,81 @@
 {{#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"
-	data-myft-ui-save-config="{{#if nonModal}}nonModal{{/if}}">
-	{{> n-myft-ui/components/csrf-token/input}}
-	<div
-		class="n-myft-ui__announcement o3-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}}o3-button o3-button--secondary o3-button--small{{#variant}} o3-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 - Unsave"
-			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"
+	<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"
+		data-myft-ui-save-config="{{#if nonModal}}nonModal{{/if}}"
+	>
+		{{> n-myft-ui/components/csrf-token/input}}
+
+		<div
+			class="n-myft-ui__announcement o3-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}}o3-button o3-button--secondary o3-button--small{{/if}}"
+			data-trackable="{{#if trackableId}}{{trackableId}}{{else}}save-for-later{{/if}}"
+			{{#if variant}}data-o3-theme="inverse"{{/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 - Unsave"
+				data-alternate-label="{{#if title}}Save {{title}} to myFT for later{{else}}Save this article to myFT for later{{/if}}"
+				aria-pressed="true"
 			{{else}}
-				data-text-variant="save-button-longer-copy"
+				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}}
-		{{#if alternateText}}
-			data-alternate-text="{{alternateText}}"
-		{{else}}
-			{{#if isSaved}}
-				data-alternate-text="Save&nbsp;"
+
+			{{#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}}
-				data-alternate-text="Saved&nbsp;"
+				{{#if isSaved}}
+					data-alternate-text="Save&nbsp;"
+				{{else}}
+					data-alternate-text="Saved&nbsp;"
+				{{/if}}
 			{{/if}}
-		{{/if}}
-		data-content-id="{{contentId}}" {{! duplicated here for tracking}}
+
+			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>
+				<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}}
+				{{#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>
+						<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}}
@@ -65,4 +85,4 @@
 	</form>
 {{else}}
 	<!-- Save button hidden due to myFtApiWrite being off -->
-{{/if }}
+{{/if}}

package/demos/src/demo.scss

@@ -9,17 +9,11 @@ $system-code: "n-myft-ui-demo";
 @import '../../components/jsx/follow-plus-instant-alerts/main';
 @import '../../components/jsx/preferences-modal/main';
 
-@import '../../components/digest-promo/main';
-
 .onboarding-container {
 	background-color: var(--o3-color-palette-slate);
 	padding: 20px;
 }
 
-.n-myft-digest-promo {
-	display: block;
-}
-
 .demo-container {
 	margin-bottom: 400px;
 }

package/demos/templates/demo.html

@@ -664,20 +664,6 @@
 				{{/each}}
 			</div>
 		</section>
-
-		<section
-			id="digest-promo"
-			class="demo-section">
-			<div class="o-grid-row">
-				<div data-o-grid-colspan="12">
-					<h3 class="demo-section__title">
-						Digest promo
-					</h3>
-					{{> n-myft-ui/components/digest-promo/generic-promo-message }}
-					{{> n-myft-ui/components/digest-promo/promo-message }}
-				</div>
-			</div>
-		</section>
 	</div>
 </body>
 

package/myft/ui/personalise-links.js

@@ -1,7 +1,8 @@
 import myFtClient from 'next-myft-client';
 
 export default function (el) {
-	const links = (el && el.nodeName === 'A') ? [el] : Array.from(el.querySelectorAll('a[href^="/myft"]'));
+	const targetElement = el || document;
+	const links = (targetElement && targetElement.nodeName === 'A') ? [targetElement] : Array.from(targetElement.querySelectorAll('a[href^="/myft"]'));
 	return Promise.all(links.map(link => myFtClient.personaliseUrl(link.getAttribute('href'))
 		.then(personalisedUrl => link.setAttribute('href', personalisedUrl)))
 	);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/n-myft-ui",
-  "version": "38.0.2",
+  "version": "38.0.4",
   "description": "Client side component for interaction with myft",
   "main": "server.js",
   "scripts": {

package/components/digest-promo/generic-promo-message.html

@@ -1,37 +0,0 @@
-<div class="n-myft-digest-promo n-myft-digest-promo--generic">
-	<div class="o-grid-container o-grid-container--snappy">
-		<div class="o-grid-row">
-			<div data-o-grid-colspan="12 M8" class="n-myft-digest-promo__container">
-				<div class="o-grid-container o-grid-container--snappy o-grid-container--bleed">
-					<div class="o-grid-row">
-
-						<div data-o-grid-colspan="12 L8" class="n-myft-digest-promo__content">
-							<h2 class="o3-type-body-highlight n-myft-digest-promo__heading">
-								Sign up to <span class="n-myft-digest-promo__branding">myFT Daily Digest</span>
-							</h2>
-							<p class ="n-myft-digest-promo__para">Receive the latest news from topics you follow on myFT straight to your inbox</p>
-						</div>
-
-						<div data-o-grid-colspan="12 L4" class="n-myft-digest-promo__cta-wrapper">
-							<button aria-label="Sign up to myFT Digest"
-									aria-pressed="false"
-									class="n-myft-digest-promo__cta-btn"
-									data-alternate-label="Unsubscribe"
-									data-alternate-text="Signed up"
-									data-trackable="digest-promo"
-									title="Sign up to myFT Digest"
-									data-title="{{title}}"
-									type="submit">
-									Sign up
-							</button>
-						</div>
-
-						{{#unless nonDismissable}}
-						<button class="n-myft-digest-promo__dismiss-btn" title="dismiss" data-trackable="digest-promo-dismiss"></button>
-						{{/unless}}
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</div>

package/components/digest-promo/index.js

@@ -1,104 +0,0 @@
-import myFtClient from 'next-myft-client';
-import buttons from '../../myft-common';
-import getToken from '../../myft/ui/lib/get-csrf-token';
-import superstore from 'superstore-sync';
-const STORAGE_KEY = 'n-myft-digest-promo-seen';
-
-const CLASSES = {
-	ctaBtn:'.n-myft-digest-promo__cta-btn',
-	dismissBtn:'.n-myft-digest-promo__dismiss-btn',
-	promoComponent:'.n-myft-digest-promo',
-	promoEnabled:'n-myft-digest-promo--enabled'
-};
-
-let btn;
-let element;
-let conceptId;
-
-function bindListeners () {
-	const btn = document.querySelector(CLASSES.ctaBtn);
-	const dismissBtn = document.querySelector(CLASSES.dismissBtn);
-
-	btn.addEventListener('click', addToDigest, false);
-
-	if (dismissBtn) {
-		dismissBtn.addEventListener('click', () => {
-			hidePromo();
-			setDismissState();
-		}, false);
-	}
-}
-
-function shouldShowPromo (conceptId) {
-	return Promise.all([
-		myFtClient.get('followed', 'concept', conceptId),
-		myFtClient.get('preferred', 'preference', 'email-digest')
-	]).then(([follows, prefers]) => {
-		return follows.length === 0 && prefers.length === 0 && !getDismissState();
-	});
-}
-
-function showPromo () {
-	element = document.querySelector(CLASSES.promoComponent);
-	element.classList.add(CLASSES.promoEnabled);
-}
-
-function hidePromo () {
-	element = document.querySelector(CLASSES.promoComponent);
-	element.classList.remove(CLASSES.promoEnabled);
-}
-
-function getDismissState () {
-	return superstore.session.get(STORAGE_KEY);
-}
-
-function setDismissState () {
-	superstore.session.set(STORAGE_KEY, 1);
-}
-
-function addToDigest () {
-	const csrfToken = getToken();
-	const metaConcept = {
-		name: btn.getAttribute('data-title'),
-	};
-
-	const directType = btn.getAttribute('data-direct-type');
-
-	if (directType) {
-		metaConcept.directType = directType;
-	}
-
-	const metaEmail = {
-		_rel: {
-			type: 'daily',
-			timezone: 'Europe/London'
-		}
-	};
-
-	const promises = [myFtClient.add('user', null, 'preferred', 'preference', 'email-digest', Object.assign({}, {token: csrfToken}, metaEmail))];
-
-	if (conceptId) {
-		promises.push(myFtClient.add('user', null, 'followed', 'concept', conceptId, Object.assign({}, {token: csrfToken}, metaConcept)));
-	}
-
-	return Promise.all(promises).then(() => {
-		buttons.toggleState(btn, true);
-		btn.setAttribute('disabled', true);
-		btn.setAttribute('aria-pressed', true);
-	});
-}
-
-function init () {
-	element = document.querySelector(CLASSES.promoComponent);
-	if(!superstore.isPersisting() || !element) { return; }
-	btn = document.querySelector(CLASSES.ctaBtn);
-	conceptId = btn.getAttribute('data-concept-id');
-	shouldShowPromo(conceptId).then(shouldShow => {
-		if(shouldShow) {
-			showPromo();
-			bindListeners();
-		}
-	});
-};
-
-export { init };

package/components/digest-promo/main.scss

@@ -1,133 +0,0 @@
-@import '../../mixins/lozenge/main';
-
-$icon-width-s: 90px;
-$icon-width-m: 90px;
-
-// TODO Remove below
-$spacing-unit: 20px;
-
-.n-myft-digest-promo {
-  display: none;
-  float: none;
-  position: relative;
-  background-color: var(--o3-color-palette-white-60);
-  border-bottom: 1px solid var(--o3-color-palette-black-20);
-  border-top: 1px solid var(--o3-color-palette-black-20);
-  margin-bottom: 20px;
-}
-
-.n-myft-digest-promo--enabled {
-  display: block;
-}
-
-.n-myft-digest-promo__container {
-  position: relative;
-  @include oGridRespondTo('M') {
-    @include oGridCenter;
-    @include oGridOffset(2);
-  }
-}
-
-.n-myft-digest-promo__dismiss-btn {
-  position: absolute;
-  top: 0;
-  right: 0;
-  background-color: transparent;
-  border-color: transparent;
-  height: 24px;
-  width: 24px;
-
-  &::before {
-    background-color: var(--o3-color-palette-black-80);
-    mask-image: var(--o3-icon-cross);
-    mask-repeat: no-repeat;
-    mask-size: contain;
-    height: 24px;
-    width: 24px;
-    position: absolute;
-    top: 0;
-    right: 0;
-    content: '';
-  }
-}
-
-.n-myft-digest-promo__content {
-  position: relative;
-  padding-left: $icon-width-s;
-  padding-top: $spacing-unit;
-
-  @include oGridRespondTo('M') {
-    padding-left: $icon-width-m;
-
-    &::before {
-      width: $icon-width-m;
-    }
-  }
-
-  &::before {
-    position: absolute;
-    content: '';
-    display: block;
-    width: $icon-width-s;
-    height: 80px;
-    left: 0;
-    background-image: url('https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fwww.ft.com%2F__assets%2Fcreatives%2Fmyft-alerts-prefs%2Fenvelope.svg?source=next&fit=scale-down&compression=best&width=50');
-    background-repeat: no-repeat;
-    background-size: 60px auto;
-    background-position: 10px 0;
-  }
-}
-
-.n-myft-digest-promo__heading {
-  margin-top: 0;
-  margin-bottom: 7px;
-}
-
-.n-myft-digest-promo__para {
-  line-height: var(--o3-font-lineheight-metric2-negative-2);
-  font-size: var(--o3-font-size-metric2-negative-2);
-  font-family: var(--o3-font-family-metric);
-  margin-top: 0;
-}
-
-.n-myft-digest-promo__branding {
-  font-weight: normal;
-  white-space: nowrap;
-}
-
-.n-myft-digest-promo__cta-wrapper {
-  display: flex;
-  align-items: flex-end;
-  justify-content: unset;
-  padding-bottom: $spacing-unit;
-  clear: both;
-
-  @include oGridRespondTo('M') {
-    justify-content: flex-end;
-  }
-}
-
-.n-myft-digest-promo__cta-btn {
-  @include myftLozengeToggleButton();
-  display: inline-block;
-  text-transform: none;
-  min-width: 134px;
-  width: 134px;
-  margin-left: 80px;
-
-  &[disabled] {
-    min-width: 55px;
-    width: 55px;
-  }
-
-  .n-myft-digest-promo--generic &,
-  .n-myft-digest-promo--generic &[disabled] {
-    width: auto;
-    min-width: auto;
-  }
-
-  @include oGridRespondTo('M') {
-    margin-left: 0;
-    float: right;
-  }
-}

package/components/digest-promo/promo-message.html

@@ -1,39 +0,0 @@
-<div class="n-myft-digest-promo">
-	<div class="o-grid-container o-grid-container--snappy">
-		<div class="o-grid-row">
-			<div data-o-grid-colspan="12 M8" class="n-myft-digest-promo__container">
-				<div class="o-grid-container o-grid-container--snappy o-grid-container--bleed">
-					<div class="o-grid-row">
-
-						<div data-o-grid-colspan="12 M8" class="n-myft-digest-promo__content">
-							<h2 class="o3-type-body-highlight n-myft-digest-promo__heading">
-								Add to <span class="n-myft-digest-promo__branding">myFT Digest</span>
-							</h2>
-							<p class ="n-myft-digest-promo__para">Add this topic to your myFT Digest for news straight to your inbox</p>
-						</div>
-
-						<div data-o-grid-colspan="12 M4" class="n-myft-digest-promo__cta-wrapper">
-							<button aria-label="Add {{title}}"
-											aria-pressed="false"
-											class="n-myft-digest-promo__cta-btn"
-											data-alternate-label="Remove {{title}}"
-											data-alternate-text="Added"
-											data-concept-id="{{conceptId}}"
-											data-trackable="digest-promo"
-											title="Add {{title}}"
-											data-title="{{title}}"
-											data-direct-type="{{directType}}"
-											type="submit">
-											Add to myFT Digest
-							</button>
-						</div>
-
-						{{#unless nonDismissable}}
-						<button class="n-myft-digest-promo__dismiss-btn" title="dismiss" data-trackable="digest-promo-dismiss"></button>
-						{{/unless}}
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</div>