@financial-times/n-myft-ui 40.1.4 → 40.1.6

package/.toolkitstate/ci.json

@@ -1,6 +1,6 @@
 {
   "branch": "",
   "repo": "n-myft-ui",
-  "version": "850351e4890b7c1d0ada2768b318efc373011b28",
-  "tag": "v40.1.4"
+  "version": "f36dc91fa4379bf6ef5a002c197ecb89f98bec8c",
+  "tag": "v40.1.6"
 }

package/demos/src/demo.scss

@@ -78,3 +78,20 @@ $system-code: "n-myft-ui-demo";
 	margin: 12px 0;
 	color: var(--o3-color-palette-black-70);
 }
+
+.demo-save-popup {
+	padding: 12px 0 20px;
+}
+
+.myft-ui-create-list--demo {
+	position: static;
+	top: auto;
+	left: auto;
+	width: 340px;
+	max-width: 100%;
+	z-index: 1;
+}
+
+.myft-ui-create-list--demo .o-overlay__content {
+	overflow: visible;
+}

package/demos/templates/demo.html

@@ -120,6 +120,42 @@
 						{{> n-myft-ui/components/save-for-later/save-for-later isSaved=true saveButtonWithIcon=true }}
 					{{/saveButton}}
 
+					<h3 class="demo-section__title">
+						Article Save popup
+					</h3>
+					<div class="demo-save-popup">
+						<div class="o-overlay myft-ui-create-list myft-ui-create-list--demo">
+							<div class="o-overlay__heading">
+								<span class="o-overlay__title">
+									<span class="myft-ui-create-list-heading">Added to <a href="https://www.ft.com/myft/saved-articles">saved articles</a> in <span class="myft-ui-create-list-icon"><span class="myft-ui-create-list-icon-visually-hidden">my FT</span></span></span>
+								</span>
+							</div>
+							<div class="o-overlay__content">
+								<div class="myft-ui-create-list-lists o-forms-field o-forms-field--optional" role="group" aria-labelledby="demo-add-to-list-label">
+									<span id="demo-add-to-list-label" class="myft-ui-create-list-lists-text">Add to list</span>
+									<span class="myft-ui-create-list-lists-container o-forms-input o-forms-input--checkbox">
+										<label>
+											<input type="checkbox" name="default" value="markets" checked>
+											<span class="o-forms-input__label">Markets</span>
+										</label>
+										<label>
+											<input type="checkbox" name="default" value="weekend-reads">
+											<span class="o-forms-input__label">Weekend reads</span>
+										</label>
+										<label>
+											<input type="checkbox" name="default" value="long-reads">
+											<span class="o-forms-input__label">Long reads</span>
+										</label>
+									</span>
+								</div>
+								<div class="myft-ui-create-list-footer">
+									<button class="myft-ui-create-list-add myft-ui-create-list-add-collapsed" type="button" aria-expanded="false">Add to a new list</button>
+									<p class="myft-ui-create-list-add-description">Lists are a simple way to curate your content</p>
+								</div>
+							</div>
+						</div>
+					</div>
+
 					<h3 class="demo-section__title">
 						Pin button
 					</h3>

package/myft/main.scss

@@ -16,6 +16,9 @@ $n-notification-is-silent: false !default;
 @import '../components/jsx/follow-plus-instant-alerts/main';
 @import '../components/jsx/preferences-modal/main';
 
+// include oOverlay to load the overlay styles, which are used by myft lists
+@include oOverlay();
+
 // TODO Fix below
 $spacing-unit: 20px;
 
@@ -198,7 +201,7 @@ $spacing-unit: 20px;
 .myft-ui-create-list {
   border-radius: 10px;
   border: 1px solid var(--o3-color-palette-black-5);
-  background: var(--o3-color-palette-white-80);
+  background: var(--o3-color-palette-white);
 
   &-content {
     display: flex;
@@ -228,11 +231,12 @@ $spacing-unit: 20px;
 
   border-radius: 10px;
   border: 1px solid var(--o3-color-palette-black-5);
-  background: var(--o3-color-palette-white-80);
+  background: var(--o3-color-palette-white);
 
   .o-overlay__heading {
     border-radius: 10px 10px 0 0;
-    background: var(--o3-color-palette-white-60);
+    background: var(--o3-color-palette-white);
+    border-bottom: 1px solid #D4D4D6;
 
     line-height: var(--o3-font-lineheight-metric2-1);
     font-size: var(--o3-font-size-metric2-1);
@@ -246,6 +250,7 @@ $spacing-unit: 20px;
     font-size: var(--o3-font-size-metric2-negative-1);
     font-family: var(--o3-font-family-metric);
     color: var(--o3-color-palette-black-80);
+    background: var(--o3-color-palette-white);
     padding: 0;
   }
 
@@ -313,7 +318,8 @@ $spacing-unit: 20px;
   }
 
   &-footer {
-    border-top: 1px solid var(--o3-color-palette-black-5);
+    border-top: 1px solid #D4D4D6;
+    background: var(--o3-color-palette-white);
     padding: var(--o3-spacing-2xs);
   }
 
@@ -387,6 +393,7 @@ $spacing-unit: 20px;
   }
 
   &-lists {
+    background: var(--o3-color-palette-white);
     padding: var(--o3-spacing-2xs) var(--o3-spacing-2xs) 0;
 
     line-height: var(--o3-font-lineheight-metric2-0);
@@ -410,6 +417,12 @@ $spacing-unit: 20px;
     }
   }
 
+  .o-forms-input--checkbox {
+    input[type='checkbox']:not(:checked) + .o-forms-input__label::before {
+      border-color: var(--o3-color-use-case-body-text);
+    }
+  }
+
   &-label {
     margin-top: 10px;
   }

package/myft/ui/lists.js

@@ -159,7 +159,7 @@ async function openSaveArticleToList (contentId, options = {}) {
 			// whenever we close the overlay we want to return the focuse to the trigger element
 			closeBtn.addEventListener('click', returnFocusToRefocusElement);
 		}
-		
+
 	});
 
 	createListOverlay.wrapper.addEventListener('oOverlay.destroy', () => {

package/package.json

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