@financial-times/n-myft-ui 28.2.7 → 28.3.1

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/lists.js

@@ -60,6 +60,9 @@ function updateAfterAddToList (listId, contentId, wasAdded) {
 					action: 'copy-success',
 					article_id: contentId,
 					list_id: listId,
+					content: {
+						uuid: contentId
+					},
 					teamName: 'customer-products-us-growth',
 					amplitudeExploratory: true
 				},
@@ -85,7 +88,7 @@ function setUpSaveToExistingListListeners (overlay, contentId) {
 			const listId = listSelect.options[listSelect.selectedIndex].value;
 			myFtClient.add('list', listId, 'contained', 'content', contentId, { token: csrfToken })
 				.then(detail => {
-					updateAfterAddToList(detail.actorId, detail.subjectId, !!detail.results);
+					updateAfterAddToList(detail.actorId, detail.subject, !!detail.results);
 					overlay.close();
 				});
 		});
@@ -252,6 +255,9 @@ function handleRemoveToggleSubmit (event) {
 					action: action === 'add' ? 'add-success' : 'remove-success',
 					article_id: contentId,
 					list_id: listId,
+					content: {
+						uuid: contentId
+					},
 					teamName: 'customer-products-us-growth',
 					amplitudeExploratory: true
 				},

package/package.json

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