@financial-times/n-myft-ui 29.0.7 → 30.0.0

package/components/button/main.scss

@@ -4,11 +4,6 @@
 	@include oButtonsContent($opts: (
 		'type': 'secondary'
 	));
-
-	&:focus {
-		outline: 3px solid oColorsByName('teal-40');
-		outline-offset: 3px;
-	}
 }
 
 .n-myft-ui__button--inverse {
@@ -38,7 +33,7 @@
 	color: oColorsByName('black');
 	background-position: 0 0;
 	border: 0;
-	min-height: $icon-size;
+	min-height: $icon-size + 16px; // add line-height for 'save' text
 	width: $icon-size;
 	position: relative;
 

package/components/concept-pill/main.scss

@@ -6,7 +6,7 @@
 }
 
 @each $theme in map-keys($myft-lozenge-themes) {
-	.n-myft-concept-pill--#{$theme} {
+	.n-myft-concept-pill#{getThemeModifier($theme)} {
 		@include myftLozengeTheme($theme);
 	}
 }

package/components/digest-promo/main.scss

@@ -110,7 +110,7 @@ $spacing-unit: 20px;
 }
 
 .n-myft-digest-promo__cta-btn {
-	@include myftLozenge($with-toggle-icon: true);
+	@include myftLozengeToggleButton();
 	display: inline-block;
 	text-transform: none;
 	min-width: 134px;

package/components/follow-button/main.scss

@@ -1,11 +1,7 @@
 @import '../../mixins/lozenge/main';
 
-.n-myft-follow-button {
-	@include myftLozenge($with-toggle-icon: true);
-}
-
 @each $theme in map-keys($myft-lozenge-themes) {
-	.n-myft-follow-button--#{$theme} {
-		@include myftLozengeTheme($theme, $with-toggle-icon: true);
+	.n-myft-follow-button#{getThemeModifier($theme)} {
+		@include myftLozengeToggleButton($theme);
 	}
 }

package/demos/src/demo.scss

@@ -9,6 +9,11 @@ $system-code: "n-myft-ui-demo";
 @import '../../components/follow-button/main';
 @import '../../components/onboarding-cta/main';
 
+@import '../../components/digest-promo/main';
+.n-myft-digest-promo {
+	display: block;
+}
+
 .demo-container {
 	margin-bottom: 400px;
 }

package/demos/templates/demo.html

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

package/mixins/lozenge/_themes.scss

@@ -1,44 +1,44 @@
 $myft-lozenge-themes: (
 	standard: (
+		toggle-button-theme: ('color': 'claret'),
 		background: oColorsByName('claret'),
 		text: oColorsByName('white'),
 		highlight: oColorsByName('claret-50'),
 		pressed-highlight: rgba(oColorsByName('black'), 0.05),
 		disabled: rgba(oColorsByName('black'), 0.5),
-		focus-outline: oColorsByUsecase('focus', 'outline', $fallback: null)
 	),
 	inverse: (
+		toggle-button-theme: 'inverse',
 		background: oColorsByName('white'),
 		text: oColorsByName('black'),
 		highlight: rgba(white, 0.8),
 		pressed-highlight: rgba(white, 0.2),
 		disabled: rgba(oColorsByName('white'), 0.5),
-		focus-outline: oColorsByName('white'),
 		mix-blend-mode: lighten
 	),
 	opinion: (
+		toggle-button-theme: ('color': 'oxford-40'),
 		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),
-		focus-outline: oColorsByUsecase('focus', 'outline', $fallback: null)
 	),
 	monochrome: (
+		toggle-button-theme: 'inverse',
 		background: oColorsByName('white'),
 		text: oColorsByName('black'),
 		highlight: oColorsByName('white-80'),
 		pressed-highlight: rgba(oColorsByName('white'), 0.2),
 		disabled: rgba(oColorsByName('white'), 0.5),
-		focus-outline: oColorsByName('white')
 	),
 	alphaville: (
+		toggle-button-theme: 'inverse',
 		background: oColorsByName('white'),
 		text: oColorsByName('matisse'),
 		highlight: rgba(white, 0.8),
 		pressed-highlight: rgba(white, 0.2),
 		disabled: rgba(oColorsByName('white'), 0.5),
-		focus-outline: oColorsByName('white')
 	)
 );
 
@@ -46,6 +46,15 @@ $myft-lozenge-themes: (
 	@return map-get($theme-map, $key);
 }
 
+// to avoid creating --standard styles
+@function getThemeModifier ($theme) {
+	@if $theme == 'standard' {
+		@return '';
+	} @else {
+		@return '--#{$theme}';
+	}
+}
+
 @mixin withTheme($theme) {
 	@if type-of($theme) == 'map' {
 		$theme-map: $theme !global;

package/mixins/lozenge/main.scss

@@ -1,66 +1,39 @@
 @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)
+@include oNormalise($opts: (
+	'elements': ('forms', 'text', 'links')
+));
 
-	// 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;
-	}
+@mixin commonMyftLozengeStyles {
+	border-radius: 100px;
+	box-sizing: content-box;
+	display: block;
+	font-size: 14px;
+	margin: 6px 4px 6px 2px;
+	max-width: 200px;
+	outline-offset: 2px;
+	overflow: hidden;
+	text-align: left;
+	text-overflow: ellipsis;
+	transition: border-color, background-color 0.5s ease;
+	white-space: nowrap;
 
-	// 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;
+	&[disabled]:hover,
+	&[disabled] {
+		background: transparent;
+		border: 1px solid getThemeColor(disabled);
+		color: getThemeColor(disabled);
+		opacity: unset;
 	}
 }
 
-
-@mixin myftLozengeTheme($theme: standard, $with-toggle-icon: false) {
-	@if $with-toggle-icon != false {
-		@include myftToggleIcon($theme);
-	}
-
+@mixin myftLozengeTheme($theme: standard) {
 	@include withTheme($theme) {
 		background-color: transparent;
 		border: 1px solid getThemeColor(background);
 		color: getThemeColor(background);
 
-		@include focusOutlineColor(getThemeColor(focus-outline));
-
 		&:hover,
 		&:focus {
 			background-color: getThemeColor(pressed-highlight);
@@ -68,14 +41,30 @@
 			color: getThemeColor(background);
 		}
 
+		@include commonMyftLozengeStyles;
+		padding: 5px 12px;
+	}
+}
+
+@mixin myftLozenge($theme: standard) {
+	@include myftLozengeTheme($theme);
+	@include oTypographySans($weight: 'semibold', $scale: -1);
+}
+
+@mixin myftLozengeToggleButton($theme: standard) {
+	@include myftToggleIcon($theme);
+	@include withTheme($theme) {
+		@include oButtonsContent($opts: (
+			'type': 'secondary',
+			'theme': getThemeColor(toggle-button-theme)
+		));
+
 		&[aria-pressed="true"] {
-			background-color: getThemeColor(background);
-			border: 1px solid getThemeColor(background);
 			color: getThemeColor(text);
-
 			@if getThemeColor(mix-blend-mode) {
-				mix-blend-mode: lighten;
+				mix-blend-mode: getThemeColor(mix-blend-mode);
 			}
+
 			&:hover,
 			&:focus {
 				border-color: getThemeColor(highlight);
@@ -90,30 +79,7 @@
 			}
 		}
 
-		&[disabled]:hover,
-		&[disabled] {
-			background: transparent;
-			border: 1px solid getThemeColor(disabled);
-			color: getThemeColor(disabled);
-		}
+		@include commonMyftLozengeStyles;
+		padding: 0 12px;
 	}
 }
-
-@mixin myftLozenge($theme: standard, $with-toggle-icon: false) {
-	@include myftLozengeTheme($theme, $with-toggle-icon);
-	@include oTypographySans($weight: 'semibold', $scale: -1);
-
-	border-radius: 100px;
-	box-sizing: content-box;
-	display: block;
-	font-size: 14px;
-	margin: 6px 4px 6px 2px;
-	max-width: 200px;
-	outline-offset: 2px;
-	overflow: hidden;
-	padding: 5px 12px;
-	text-align: left;
-	text-overflow: ellipsis;
-	transition: border-color, background-color 0.5s ease;
-	white-space: nowrap;
-}

package/myft/main.scss

@@ -366,6 +366,10 @@ $spacing-unit: 20px;
 			}
 		}
 	}
+
+	&-label {
+		margin-top: 10px;
+	}
 }
 
 .share-nav {

package/myft/ui/save-article-to-list-variant.js

@@ -125,9 +125,10 @@ export default async function openSaveArticleToListVariant (contentId, options =
 	const resizeHandler = getResizeHandler(createListOverlay.wrapper);
 
 	createListOverlay.wrapper.addEventListener('oOverlay.ready', (data) => {
-		if (lists.length) {
-			const overlayContent = document.querySelector('.o-overlay__content');
-			overlayContent.insertAdjacentElement('afterbegin', listElement);
+		const overlayContent = document.querySelector('.o-overlay__content');
+		overlayContent.insertAdjacentElement('afterbegin', listElement);
+		if (!lists.length) {
+			hideListElement();
 		}
 
 		if (!modal) {
@@ -171,7 +172,7 @@ function FormElement (createList, showPublicToggle, attachDescription, onListCre
 		<label class="myft-ui-create-list-variant-form-name o-forms-field">
 			<span class="o-forms-input o-forms-input--text">
 				<input class="myft-ui-create-list-variant-text" type="text" name="list-name">
-				List name
+				<div class="myft-ui-create-list-variant-label">List name</div>
 			</span>
 		</label>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/n-myft-ui",
-  "version": "29.0.7",
+  "version": "30.0.0",
   "description": "Client side component for interaction with myft",
   "main": "server.js",
   "scripts": {
@@ -20,11 +20,11 @@
   },
   "homepage": "https://github.com/Financial-Times/n-myft-ui#readme",
   "devDependencies": {
-    "@financial-times/dotcom-build-base": "^7.0.0",
-    "@financial-times/dotcom-build-code-splitting": "^5.0.0",
-    "@financial-times/dotcom-build-js": "^5.0.0",
-    "@financial-times/dotcom-build-sass": "^5.0.0",
-    "@financial-times/dotcom-server-handlebars": "^5.0.0",
+    "@financial-times/dotcom-build-base": "^7.2.7",
+    "@financial-times/dotcom-build-code-splitting": "^7.2.7",
+    "@financial-times/dotcom-build-js": "^7.2.7",
+    "@financial-times/dotcom-build-sass": "^7.2.7",
+    "@financial-times/dotcom-server-handlebars": "^7.2.7",
     "@financial-times/n-express": "^23.0.1",
     "@financial-times/n-gage": "^8.3.2",
     "ascii-table": "0.0.9",
@@ -87,11 +87,12 @@
   },
   "peerDependencies": {
     "@financial-times/n-notification": "^8.2.2",
+    "@financial-times/o-buttons": "^7.7.3",
     "@financial-times/o-editorial-typography": "^2.3.2",
     "@financial-times/o-errors": "^5.0.0",
     "@financial-times/o-forms": "^9.4.0",
     "@financial-times/o-grid": "^6.1.1",
-    "@financial-times/o-normalise": "^3.0.0",
+    "@financial-times/o-normalise": "^3.3.0",
     "@financial-times/o-overlay": "^4.0.0",
     "@financial-times/o-spacing": "^3.0.0",
     "@financial-times/o-tooltip": "^5.2.4",