@financial-times/n-myft-ui 28.2.6 → 28.3.0

package/demos/src/demo.scss

@@ -37,6 +37,10 @@ $system-code: "n-myft-ui-demo";
 	background-color: oColorsByName('claret-60');
 	color: oColorsByName('white');
 }
+.concept-collection--alphaville {
+	background-color: oColorsByName('matisse');
+	color: oColorsByName('white');
+}
 
 .concept-collection--opinion {
 	background-color: oColorsByName('sky');

package/demos/templates/demo.html

@@ -249,6 +249,40 @@
 					</div>
 				</div>
 			</div>
+			<div class="o-grid-row">
+				<div data-o-grid-colspan="12">
+					<div class="concept-collection concept-collection--alphaville">
+						<h3 class="concept-collection__title">
+							Alphaville
+						</h3>
+						<ul class="concept-collection__list">
+							<li>
+								<button
+									class="n-myft-follow-button n-myft-follow-button--alphaville"
+									aria-pressed="false">
+									Theo Leanse
+								</button>
+							</li>
+							<li>
+								<button
+									class="n-myft-follow-button n-myft-follow-button--alphaville"
+									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--alphaville"
+									aria-pressed="false">
+									chee
+								</button>
+							</li>
+						</ul>
+					</div>
+				</div>
+			</div>
 		</section>
 
 		<section
@@ -431,6 +465,40 @@
 					</div>
 				</div>
 			</div>
+			<div class="o-grid-row">
+				<div data-o-grid-colspan="12">
+					<div class="concept-collection concept-collection--alphaville">
+						<h3 class="concept-collection__title">
+							Alphaville topper
+						</h3>
+						<ul class="concept-collection__list">
+							<li>
+								<a
+									class="n-myft-concept-pill n-myft-concept-pill--alphaville"
+									aria-pressed="false">
+									Theo Leanse
+								</a>
+							</li>
+							<li>
+								<a
+									class="n-myft-concept-pill n-myft-concept-pill--alphaville"
+									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--alphaville"
+									aria-pressed="true">
+									chee
+								</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+			</div>
 		</section>
 
 		<section

package/mixins/lozenge/_themes.scss

@@ -30,6 +30,14 @@ $myft-lozenge-themes: (
 		pressed-highlight: rgba(oColorsByName('white'), 0.2),
 		disabled: rgba(oColorsByName('white'), 0.5),
 		focus-outline: oColorsByName('white')
+	),
+	alphaville: (
+		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')
 	)
 );
 

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

@@ -257,7 +257,6 @@ function FormElement (createList, showPublicToggle, attachDescription, onListCre
 			triggerCreateListEvent(contentId, createdList.uuid);
 			triggerAddToListEvent(contentId, createdList.uuid);
 			positionOverlay(createListOverlay.wrapper);
-			triggerCancelEvent();
 
 			if (createdList.isShareable) {
 				createListOverlay.close();
@@ -272,6 +271,7 @@ function FormElement (createList, showPublicToggle, attachDescription, onListCre
 	function handleCancelClick (event) {
 		event.preventDefault();
 		event.stopPropagation();
+		triggerCancelEvent();
 		formElement.remove();
 		if (!lists.length) attachDescription();
 		onCancel();

package/package.json

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