@financial-times/n-myft-ui 37.0.0 → 38.0.0

package/.pa11yci.js

@@ -24,7 +24,8 @@ const config = {
 			'Cookie': 'next-flags=ads:off,cookieMessage:off; secure=true'
 		},
 		timeout: 25000,
-		rules: ['Principle1.Guideline1_3.1_3_1_AAA']
+		rules: ['Principle1.Guideline1_3.1_3_1_AAA'],
+		hideElements: '#onboarding-cta'
 	},
 	urls: []
 };

package/.toolkitstate/ci.json

@@ -1,6 +1,6 @@
 {
   "branch": "",
   "repo": "n-myft-ui",
-  "version": "f514e53e2d5c21fe7c366f3836aeefed030438bf",
-  "tag": "v37.0.0"
+  "version": "ffb407326253dccbd05b2705c0f760c0823a3427",
+  "tag": "v38.0.0"
 }

package/components/button/main.scss

@@ -1,68 +1,55 @@
-@import '@financial-times/o-buttons/main';
-
-.n-myft-ui__button {
-	@include oButtonsContent($opts: (
-		'type': 'secondary'
-	));
-}
-
-.n-myft-ui__button--inverse {
-	@include oButtonsContent($opts: (
-		'type': 'secondary',
-		'theme': 'inverse'
-	), $include-base-styles: false);
-}
-
 .n-myft-ui__button--viewport-large {
-	display: none;
+  display: none;
 
-	@include oGridRespondTo('L') {
-		display: inline-block;
-	}
+  @include oGridRespondTo('L') {
+    display: inline-block;
+  }
 }
 
 .n-myft-ui__save-button-with-icon {
-	$icon-size: 38px;
-
-	@include oIconsContent(
-		'bookmark-outline',
-		oColorsByName('black'),
-		$icon-size,
-		$iconset-version: 1
-	);
-	color: oColorsByName('black');
-	background-position: 0 0;
-	border: 0;
-	min-height: $icon-size + 16px; // add line-height for 'save' text
-	width: $icon-size;
-	position: relative;
-
-	.save-button-with-icon-copy {
-		position: absolute;
-		top: $icon-size - 5px;
-		left: 0;
-		right: 0;
-		@include oTypographySans($scale: -2);
-	}
-
-	&:not([disabled]):hover {
-		@include oIconsContent(
-			'bookmark',
-			oColorsByName('black-50'),
-			$icon-size,
-			$iconset-version: 1
-		);
-		background-position: 0 0;
-	}
-
-	&[aria-selected='true'],
-	&[aria-pressed='true'] {
-		@include oIconsContent(
-			'bookmark',
-			oColorsByName('claret'),
-			$icon-size,
-			$iconset-version: 1
-		);
-		background-position: 0 0;
-	}
+  --icon-size: 24px;
+
+  display: inline-block;
+  padding: 30px 0px 4px;
+  width: 40px;
+  color: var(--o3-color-palette-black);
+  background: none;
+  border: 0;
+  position: relative;
+
+  &::after {
+    content: '';
+    width: var(--icon-size);
+    height: var(--icon-size);
+    top: var(--o3-spacing-5xs);
+    left: var(--o3-spacing-4xs);
+    position: absolute;
+    background-color: var(--o3-color-palette-black);
+    mask-image: var(--o3-icon-bookmark);
+    mask-repeat: no-repeat;
+    mask-size: contain;
+    pointer-events: none;
+  }
+
+  .save-button-with-icon-copy {
+    position: static;
+    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);
+  }
+
+  &:not([disabled]):hover {
+    &::after {
+      mask-image: var(--o3-icon-bookmark-filled);
+      background-color: var(--o3-color-palette-black-50);
+    }
+  }
+
+  &[aria-selected='true'],
+  &[aria-pressed='true'] {
+    &::after {
+      mask-image: var(--o3-icon-bookmark-filled);
+      background-color: var(--o3-color-palette-claret);
+    }
+  }
 }

package/components/collections/collections.html

@@ -65,7 +65,7 @@
 			<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}}"
+				class="collection-follow-all__button {{#if liteStyle}}o3-button o3-button--primary o3-button--small{{/if}}"
 				data-trackable="follow all"
 				data-concept-id="
 					{{~#concepts~}}

package/components/collections/main.scss

@@ -11,7 +11,7 @@
 }
 
 .collection--regular {
-	background: oColorsByName('claret-70');
+	background: var(--o3-color-palette-claret-70);
 
 	@include oGridRespondTo(M) {
 		height: 100%;
@@ -19,8 +19,8 @@
 }
 
 .collection--lite {
-	background: oColorsByName('white-40');
-	border: 1px solid oColorsByName('black-5');
+	background: var(--o3-color-palette-white-40);
+	border: 1px solid var(--o3-color-palette-black-5);
 	padding-top: 18px;
 }
 
@@ -30,24 +30,31 @@
 }
 
 .collection__header--regular {
-	color: oColorsByName('white');
+	color: var(--o3-color-palette-white);
 }
 
 .collection__header--lite {
-	color: oColorsByName('black');
+	color: var(--o3-color-palette-black);
 }
 
 .collection__title {
-	@include oTypographySans($weight: 'semibold', $scale: 1);
+
+	font-weight: var(--o3-font-weight-semibold);
+	line-height: var(--o3-font-lineheight-metric2-0);
+	font-size: var(--o3-font-size-metric2-0);
+	font-family: var(--o3-font-family-metric);
 	margin: 0;
 }
 
 .collection__concepts {
-	@include oTypographySans($scale: 1);
+
+	line-height: var(--o3-font-lineheight-metric2-0);
+	font-size: var(--o3-font-size-metric2-0);
+	font-family: var(--o3-font-family-metric);
 
 	margin: 0;
 	margin-left: -3px;
-	padding: oSpacingByName('s4') 0 0;
+	padding: var(--o3-spacing-2xs) 0 0;
 
 	flex-grow: 1;
 	list-style: none;
@@ -58,7 +65,7 @@
 }
 
 .collection__meta {
-	padding-top: oSpacingByName('s4');
+	padding-top: var(--o3-spacing-2xs);
 
 	.n-myft-follow-button {
 		margin: 0;
@@ -66,23 +73,45 @@
 }
 
 .collection-follow-all__button {
-	@include oButtonsContent($opts: (
-		'type': 'secondary'
-	));
+	width: 100%;
+	min-height: 28px;
+	min-width: 60px;
+	border-radius: var(--o3-border-radius-1);
+	padding: 0 var(--o3-spacing-4xs);
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	box-sizing: border-box;
+	vertical-align: middle;
+	font-family: var(--o3-font-family-metric);
+	font-size: var(--o3-font-size-negative-2);
+	line-height: var(--o3-font-lineheight-negative-2);
+	font-weight: var(--o3-font-weight-semibold);
+	border: 1px solid transparent;
+	text-align: center;
+	text-decoration: none;
+	transition: 0.3s background-color, 0.15s color ease-out,
+	0.15s border-color ease-out;
+	appearance: none;
+	background-color: #ffffff;
+	color: var(--o3-color-palette-claret-70);
 }
 
-.collection-follow-all__button--regular {
-	@include oButtonsContent($opts: (
-		'type': 'primary',
-		'theme': (
-			'color': 'white',
-			'context': 'claret-70'
-		)
-	), $include-base-styles: false);
+.collection-follow-all__button--regular[disabled] {
+	pointer-events: none;
+	opacity: 0.4;
+	cursor: default;
 }
-
-.collection-follow-all__button--lite {
-	@include oButtonsContent($opts: (
-		'type': 'primary'
-	), $include-base-styles: false);
+.collection-follow-all__button--regular:hover {
+	background-color: #cccccc;
+	color: #aa1143;
+	border-color: transparent;
+	text-decoration: none;
 }
+.collection-follow-all__button--regular:focus {
+	box-shadow: 0 0 0 4px #4d4845, 0 0 0 8px #ffffff;
+	background-color: #cccccc;
+	color: #aa1143;
+	border-color: transparent;
+	z-index: 1;
+}

package/components/concept-list/concept-list.html

@@ -17,7 +17,7 @@
 					<a
 						href="{{relativeUrl}}"
 						data-trackable="{{#if conceptTrackable}}{{conceptTrackable}}{{else}}concept{{/if}}"
-						class="concept-list__concept">
+						class="o3-type-body-base concept-list__concept">
 						{{prefLabel}}
 					</a>
 					{{> n-myft-ui/components/follow-button/follow-button

package/components/concept-list/main.scss

@@ -1,40 +1,45 @@
 .concept-list__title {
-	@include oTypographySans(1);
-	word-break: break-all;
-	&:after {
-		content: '';
-		display: block;
-		width: 60px;
-		margin-top: 5px;
-		border-bottom: 4px solid oColorsByName('black');
-		position: absolute;
-		z-index: 1;
-	}
+
+  line-height: var(--o3-font-lineheight-metric2-0);
+  font-size: var(--o3-font-size-metric2-0);
+  font-family: var(--o3-font-family-metric);
+  word-break: break-all;
+  &:after {
+    content: '';
+    display: block;
+    width: 60px;
+    margin-top: 5px;
+    border-bottom: 4px solid var(--o3-color-palette-black);
+    position: absolute;
+    z-index: 1;
+  }
 }
 
 .concept-list__list {
-	margin: oSpacingByName("s6") 0 oSpacingByName("m12");
-	padding: 0;
+  margin: var(--o3-spacing-s) 0 var(--o3-spacing-xl);
+  padding: 0;
 }
 
 .concept-list__list-item {
-	@include oTypographySans(1);
-	color: oColorsByName('black');
-	list-style: none;
-	display: flex;
-	align-items: center;
+  line-height: var(--o3-font-lineheight-metric2-0);
+  font-size: var(--o3-font-size-metric2-0);
+  font-family: var(--o3-font-family-metric);
+  color: var(--o3-color-palette-black);
+  list-style: none;
+  display: flex;
+  align-items: center;
 }
 
 .concept-list__concept {
-	word-break: keep-all;
-	@include oTypographySans(0, $weight: 'semibold');
-	margin: oSpacingByName("s1") oSpacingByName("s3") oSpacingByName("s1") 0;
-	text-decoration: none;
-	border: 0;
-	color: oColorsByName('black');
-	flex: 2;
+  word-break: keep-all;
+  margin: var(--o3-spacing-5xs) var(--o3-spacing-3xs) var(--o3-spacing-5xs) 0;
+  text-decoration: none;
+  border: 0;
+  color: var(--o3-color-palette-black);
+  flex: 2;
 
-	&:hover {
-		color: oColorsMix(oColorsByName('black'), oColorsByName('paper'), 73);
-	}
+  &:hover {
+    color: color-mix(in srgb, var(--o3-color-palette-black) 73%, var(--o3-color-palette-paper));
+    text-decoration: underline;
+  }
 }

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

@@ -6,7 +6,7 @@
 					<div class="o-grid-row">
 
 						<div data-o-grid-colspan="12 L8" class="n-myft-digest-promo__content">
-							<h2 class="n-myft-digest-promo__heading">
+							<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>

package/components/digest-promo/main.scss

@@ -7,129 +7,127 @@ $icon-width-m: 90px;
 $spacing-unit: 20px;
 
 .n-myft-digest-promo {
-	@include oNormaliseClearfix;
-	display: none;
-	float: none;
-	position: relative;
-	background-color: oColorsByName("white-60");
-	border-bottom: 1px solid oColorsByName("black-20");
-	border-top: 1px solid oColorsByName("black-20");
-	margin-bottom: 20px;
+  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;
+  display: block;
 }
 
 .n-myft-digest-promo__container {
-	position: relative;
-	@include oGridRespondTo('M') {
-		@include oGridCenter;
-		@include oGridOffset(2);
-	}
+  position: relative;
+  @include oGridRespondTo('M') {
+    @include oGridCenter;
+    @include oGridOffset(2);
+  }
 }
 
 .n-myft-digest-promo__dismiss-btn {
-	position: absolute;
-	top: 5px;
-	right: 0;
-	background-color: transparent;
-	border-color: transparent;
-	height: 22px;
-	width: 22px;
-
-	&::before {
-		@include oIconsContent(
-			"cross",
-			oColorsByName("black-80"),
-			20,
-			$iconset-version: 1
-		);
-		position: absolute;
-		top: 0;
-		right: 0;
-		content: '';
-	}
+  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;
-	}
-
+  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 {
-	@include oTypographySans($weight: 'semibold', $scale: 2);
-
-	margin-top: 0;
-	margin-bottom: 7px;
+  margin-top: 0;
+  margin-bottom: 7px;
 }
 
 .n-myft-digest-promo__para {
-	@include oTypographySans($scale: -1);
-	margin-top: 0;
+  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;
+  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;
-	}
+  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;
-	}
+  @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

@@ -6,7 +6,7 @@
 					<div class="o-grid-row">
 
 						<div data-o-grid-colspan="12 M8" class="n-myft-digest-promo__content">
-							<h2 class="n-myft-digest-promo__heading">
+							<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>

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

@@ -19,7 +19,7 @@
 		{{/if}}>
 		{{> n-myft-ui/components/csrf-token/input}}
 		<div
-			class="n-myft-ui__announcement o-normalise-visually-hidden"
+			class="n-myft-ui__announcement o3-visually-hidden"
 			aria-live="assertive"
 			data-pressed-text="Now following {{name}}."
 			data-unpressed-text="No longer following {{name}}."

package/components/instant-alert/index.js

@@ -1,7 +1,6 @@
 import * as nNotification from '@financial-times/n-notification/main';
 import Delegate from 'ftdomdelegate';
 import myftClient from 'next-myft-client';
-import { $, $$ } from 'n-ui-foundations/main';
 import * as nextButtons from '../../myft-common';
 
 const delegate = new Delegate(document.body);
@@ -40,7 +39,7 @@ function toggleButton (buttonEl, state) {
 }
 
 function updateButtons (subjectId, newState) {
-	const affectedButtons = $$(`${UI_HOOK}[data-concept-id="${subjectId}"] button`);
+	const affectedButtons = document.querySelectorAll(`${UI_HOOK}[data-concept-id="${subjectId}"] button`);
 	affectedButtons.forEach((button) => {
 		toggleButton(button, newState);
 	});
@@ -85,8 +84,8 @@ function formSubmitted (event, element) {
 		showAnonNotification();
 	} else {
 		const subjectId = element.getAttribute('data-concept-id');
-		const submitEl = $('button', element);
-		const inputs = $$('input', element);
+		const submitEl = element.querySelector('button');
+		const inputs = element.querySelectorAll('input');
 		inputs.push(submitEl);
 		updateConceptData(subjectId, extractMetaData(inputs));
 	}
@@ -114,7 +113,7 @@ function eventListeners () {
 // delegate is listening to the whole body therefore events look for forms across the whole page rather than setting up instances
 // if we used instances we could reduce the amount of DOM queries that we do
 export function init (opts) {
-	const instantAlertForms = $$(UI_HOOK);
+	const instantAlertForms = document.querySelectorAll(UI_HOOK);
 	config = opts;
 	if (instantAlertForms.length > 0) {
 		applyModel();

package/components/instant-alert/instant-alert.html

@@ -20,11 +20,7 @@
 			aria-label="Alerts {{name}} currently disabled, change to enable"
 			aria-pressed="false"
 			{{/ifAll}}
-	class="n-myft-ui__button
-	{{#variant}} n-myft-ui__button--{{this}}{{/variant}}
-	{{#size}} n-myft-ui__button--{{this}}{{/size}}
-	n-myft-ui__button--instant
-	n-myft-ui__button--instant-light"
+	class="o3-button n-myft-ui__button--instant"
 	data-name="{{name}}"
 	{{#if alternateText}}
 	data-alternate-text="{{alternateText}}"