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

package/build-state/npm-shrinkwrap.json

@@ -17,6 +17,7 @@
         "js-cookie": "^2.2.1",
         "next-myft-client": "^10.3.0",
         "next-session-client": "^4.0.0",
+        "ready-state": "^2.0.5",
         "superstore-sync": "^2.1.1"
       },
       "devDependencies": {
@@ -18554,6 +18555,11 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/ready-state": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/ready-state/-/ready-state-2.0.5.tgz",
+      "integrity": "sha512-rwuszAC+hAAhQWK0alQOSq0Fa5/SO9XvbzVY/Ki82d1ocwLY7kdjEooVbYg7GELrCXySckTmsuTgLd8hqKz9Og=="
+    },
     "node_modules/rechoir": {
       "version": "0.7.1",
       "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.1.tgz",
@@ -38860,6 +38866,11 @@
         "readable-stream": "^2.0.2"
       }
     },
+    "ready-state": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/ready-state/-/ready-state-2.0.5.tgz",
+      "integrity": "sha512-rwuszAC+hAAhQWK0alQOSq0Fa5/SO9XvbzVY/Ki82d1ocwLY7kdjEooVbYg7GELrCXySckTmsuTgLd8hqKz9Og=="
+    },
     "rechoir": {
       "version": "0.7.1",
       "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.1.tgz",

package/demos/src/demo.scss

@@ -42,6 +42,12 @@ $system-code: "n-myft-ui-demo";
 	background-color: oColorsByName('claret-60');
 	color: oColorsByName('white');
 }
+
+.concept-collection--inverse-monochrome {
+	background-color: oColorsByName('white');
+	color: oColorsByName('black');
+}
+
 .concept-collection--alphaville {
 	background-color: oColorsByName('matisse');
 	color: oColorsByName('white');

package/demos/templates/demo.html

@@ -212,6 +212,41 @@
 				</div>
 			</div>
 
+			<div class="o-grid-row">
+				<div data-o-grid-colspan="12">
+					<div class="concept-collection concept-collection--inverse-monochrome">
+						<h3 class="concept-collection__title">
+							Inverse Monochrome
+						</h3>
+						<ul class="concept-collection__list">
+							<li>
+								<button
+									class="n-myft-follow-button n-myft-follow-button--inverse-monochrome"
+									aria-pressed="false">
+									Theo Leanse
+								</button>
+							</li>
+							<li>
+								<button
+									class="n-myft-follow-button n-myft-follow-button--inverse-monochrome"
+									aria-pressed="true">
+									Mr. and Mrs. Dursley, of number four, Privet Drive, were proud to
+									say that they were perfectly normal, thank you very much.
+								</button>
+							</li>
+							<li>
+								<button
+									disabled
+									class="n-myft-follow-button n-myft-follow-button--inverse-monochrome"
+									aria-pressed="true">
+									chee
+								</button>
+							</li>
+						</ul>
+					</div>
+				</div>
+			</div>
+
 			<div class="o-grid-row">
 				<div data-o-grid-colspan="12">
 					<div class="concept-collection concept-collection--opinion">
@@ -428,6 +463,42 @@
 				</div>
 			</div>
 
+			<div class="o-grid-row">
+				<div data-o-grid-colspan="12">
+					<div class="concept-collection concept-collection--inverse-monochrome">
+						<h3 class="concept-collection__title">
+							Inverse Monochrome
+						</h3>
+
+						<ul class="concept-collection__list">
+							<li>
+								<a
+									class="n-myft-concept-pill n-myft-concept-pill--inverse-monochrome"
+									aria-pressed="false">
+									Theo Leanse
+								</a>
+							</li>
+							<li>
+								<a
+									class="n-myft-concept-pill n-myft-concept-pill--inverse-monochrome"
+									aria-pressed="false">
+									Mr. and Mrs. Dursley, of number four, Privet Drive, were proud to
+									say that they were perfectly normal, thank you very much.
+								</a>
+							</li>
+							<li>
+								<a
+									disabled
+									class="n-myft-concept-pill n-myft-concept-pill--inverse-monochrome"
+									aria-pressed="true">
+									chee
+								</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+			</div>
+
 			<div class="o-grid-row">
 				<div data-o-grid-colspan="12">
 					<div class="concept-collection concept-collection--opinion">

package/mixins/lozenge/_themes.scss

@@ -32,6 +32,14 @@ $myft-lozenge-themes: (
 		pressed-highlight: rgba(oColorsByName('white'), 0.2),
 		disabled: rgba(oColorsByName('white'), 0.5),
 	),
+	inverse-monochrome: (
+		toggle-button-theme: ('color': 'black'),
+		background: oColorsByName('black'),
+		text: oColorsByName('white'),
+		highlight: oColorsByName('black-80'),
+		pressed-highlight: rgba(oColorsByName('black'), 0.2),
+		disabled: rgba(oColorsByName('black'), 0.5),
+	),
 	alphaville: (
 		toggle-button-theme: 'inverse',
 		background: oColorsByName('white'),

package/myft/ui/myft-buttons/init.js

@@ -8,10 +8,17 @@ import Delegate from 'ftdomdelegate';
 import personaliseLinks from '../personalise-links';
 import doFormSubmit from './do-form-submit';
 import enhanceActionUrls from './enhance-action-urls';
+import readyState from 'ready-state';
 
-const delegate = new Delegate(document.body);
 let initialised;
 
+function createDelegate (action, selector, cb) {
+	readyState.domready.then(() => {
+		const delegate = new Delegate(document.body);
+		delegate.on(action, selector, cb);
+	});
+}
+
 function getInteractionHandler (relationshipName) {
 	return (ev, formEl) => {
 		ev.preventDefault();
@@ -29,7 +36,7 @@ function anonEventListeners () {
 	};
 
 	['followed', 'saved'].forEach(action => {
-		delegate.on('submit', relationshipConfig[action].uiSelector, event => {
+		createDelegate('submit', relationshipConfig[action].uiSelector, event => {
 			event.preventDefault();
 			nNotification.show({
 				content: messages[action],
@@ -77,7 +84,7 @@ function signedInEventListeners () {
 					});
 				});
 
-			delegate.on('submit', uiSelector, getInteractionHandler(relationshipName));
+			createDelegate('submit', uiSelector, getInteractionHandler(relationshipName));
 		}
 	});
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/n-myft-ui",
-  "version": "30.0.0",
+  "version": "30.0.2",
   "description": "Client side component for interaction with myft",
   "main": "server.js",
   "scripts": {
@@ -107,6 +107,7 @@
     "js-cookie": "^2.2.1",
     "next-myft-client": "^10.3.0",
     "next-session-client": "^4.0.0",
+    "ready-state": "^2.0.5",
     "superstore-sync": "^2.1.1"
   },
   "volta": {