[Release] Stage to Main (#3468)

README.md

@@ -74,7 +74,7 @@ npm run test:watch
 -----
 
 #### 1. Running Nala Tests
-Make sure you ran `npm run install` in the project root.
+Make sure you ran `npm install` in the project root.
 You might need also to run `npx playwright install`.
 Nala tests are run using the `npm run nala <env> [options]` command:
 

libs/blocks/marketo/marketo.css

@@ -4,7 +4,9 @@
   --marketo-form-border: #6E6E6E;
   --marketo-form-error: #D7373F;
   --marketo-form-selected: #0265DC;
-  --marketo-form-placeholder-height: calc(78px * 3 + 57px); /* 3 rows + submit */
+  --marketo-form-focus: #147AF3;
+  --marketo-form-placeholder-height: calc(78px * 7 + 57px); /* 7 rows + submit */
+  --marketo-form-placeholder-height-desktop: calc(78px * 4 + 57px); /* 4 rows + submit */
   --marketo-form-min-height: 215px;
   --marketo-form-max-height: 10000px;
 }
@@ -174,8 +176,8 @@
 }
 
 .marketo .mktoForm .mktoField:focus-visible {
-  outline: 0;
-  border-color: var(--link-color-dark);
+  outline: 2px solid var(--marketo-form-focus);
+  outline-offset: 2px;
 }
 
 .marketo .mktoForm select {
@@ -194,7 +196,7 @@
 
 .marketo .mktoForm .mktoCheckboxList .mktoField:focus-visible,
 .marketo .mktoForm .mktoRadioList .mktoField:focus-visible {
-  outline: var(--link-color-dark) auto 2px;
+  outline: 2px solid var(--marketo-form-focus);
 }
 
 .marketo .mktoForm .mktoCheckboxList label,
@@ -230,16 +232,16 @@
   border-radius: 2px;
 }
 
-.marketo .mktoForm .mktoCheckboxList.mktoInvalid input::before {
-  border: 2px solid var(--marketo-form-error);
-}
-
 .marketo .mktoForm .mktoCheckboxList input:checked::before {
   border: 2px solid var(--marketo-form-selected);
   background: var(--marketo-form-selected);
 }
 
-.marketo .mktoForm .mktoCheckboxList.mktoInvalid input:checked::before {
+.marketo .mktoForm.show-warnings .mktoCheckboxList.mktoInvalid input::before {
+  border: 2px solid var(--marketo-form-error);
+}
+
+.marketo .mktoForm.show-warnings .mktoCheckboxList.mktoInvalid input:checked::before {
   background: var(--marketo-form-error);
 }
 
@@ -579,6 +581,14 @@
 }
 
 @media screen and (min-width: 1200px) {
+  .marketo.loading form {
+    min-height: var(--marketo-form-placeholder-height-desktop);
+  }
+
+  .marketo .mktoForm {
+    max-height: var(--marketo-form-placeholder-height-desktop);
+  }
+
   .resource-form.section.two-up {
     grid-template-columns: repeat(2, 1fr);
   }

libs/blocks/marketo/marketo.js

@@ -229,7 +229,7 @@ export default function init(el) {
 
   if (formData[SUCCESS_TYPE] === 'section' && ungated) {
     el.classList.add('hide-block');
-    showSuccessSection(formData, false);
+    showSuccessSection(formData, true);
     return;
   }
 

libs/blocks/ost/ctaTextOption.js

@@ -13,6 +13,7 @@ const ctaTextOption = {
     { id: 'take-the-quiz', name: 'Take the quiz' },
     { id: 'see-more', name: 'See more' },
     { id: 'upgrade-now', name: 'Upgrade now' },
+    { id: 'save-today', name: 'Save today' },
   ],
 
   getDefaultText() {

libs/blocks/preflight/panels/seo.js

@@ -127,7 +127,8 @@ async function checkBody() {
 async function checkLorem() {
   const result = { ...loremResult.value };
   const { innerHTML } = document.documentElement;
-  if (innerHTML.includes('Lorem ipsum')) {
+  const htmlWithoutPreflight = innerHTML.replace(document.getElementById('preflight')?.outerHTML, '');
+  if (htmlWithoutPreflight.includes('Lorem ipsum')) {
     result.icon = fail;
     result.description = 'Reason: Lorem ipsum is used on the page.';
   } else {

libs/blocks/section-metadata/section-metadata.css

@@ -208,7 +208,8 @@
   z-index: 4; 
 }
 
-.section.sticky-bottom.popup {
+.section.sticky-bottom.popup,
+.section.sticky-bottom:has(.notification.pill) {
   bottom: var(--spacing-xs);
 }
 

libs/deps/mas/merch-card-collection.js

@@ -96,7 +96,7 @@ var N=Object.defineProperty;var y=(s,e,t)=>e in s?N(s,e,{enumerable:!0,configura
             justify-content: end;
         }
     }
-`;var u=(s,e)=>s.querySelector(`[slot="${e}"]`).textContent.trim();var D="merch-card-collection",a={alphabetical:"alphabetical",authored:"authored"},v={filters:["noResultText","resultText","resultsText"],mobile:["noSearchResultsMobileText","searchResultMobileText","searchResultsMobileText"],desktop:["noSearchResultsText","searchResultText","searchResultsText"]},P=(s,e={})=>{s.querySelectorAll("span[data-placeholder]").forEach(t=>{let{placeholder:o}=t.dataset;t.innerText=e[o]??""})},B=(s,{filter:e})=>s.filter(t=>t.filters.hasOwnProperty(e)),H=(s,{types:e})=>e?(e=e.split(","),s.filter(t=>e.some(o=>t.types.includes(o)))):s,V=s=>s.sort((e,t)=>(e.title??"").localeCompare(t.title??"","en",{sensitivity:"base"})),I=(s,{filter:e})=>s.sort((t,o)=>o.filters[e]?.order==null||isNaN(o.filters[e]?.order)?-1:t.filters[e]?.order==null||isNaN(t.filters[e]?.order)?1:t.filters[e].order-o.filters[e].order),k=(s,{search:e})=>e?.length?(e=e.toLowerCase(),s.filter(t=>(t.title??"").toLowerCase().includes(e))):s,p=class extends O{constructor(){super();E(this,"mobileAndTablet",new f(this,A));this.filter="all",this.hasMore=!1,this.resultCount=void 0,this.displayResult=!1}render(){return l`${this.header}
+`;var u=(s,e)=>s.querySelector(`[slot="${e}"]`)?.textContent?.trim();var D="merch-card-collection",a={alphabetical:"alphabetical",authored:"authored"},v={filters:["noResultText","resultText","resultsText"],mobile:["noSearchResultsMobileText","searchResultMobileText","searchResultsMobileText"],desktop:["noSearchResultsText","searchResultText","searchResultsText"]},P=(s,e={})=>{s.querySelectorAll("span[data-placeholder]").forEach(t=>{let{placeholder:o}=t.dataset;t.innerText=e[o]??""})},B=(s,{filter:e})=>s.filter(t=>t.filters.hasOwnProperty(e)),H=(s,{types:e})=>e?(e=e.split(","),s.filter(t=>e.some(o=>t.types.includes(o)))):s,V=s=>s.sort((e,t)=>(e.title??"").localeCompare(t.title??"","en",{sensitivity:"base"})),I=(s,{filter:e})=>s.sort((t,o)=>o.filters[e]?.order==null||isNaN(o.filters[e]?.order)?-1:t.filters[e]?.order==null||isNaN(t.filters[e]?.order)?1:t.filters[e].order-o.filters[e].order),k=(s,{search:e})=>e?.length?(e=e.toLowerCase(),s.filter(t=>(t.title??"").toLowerCase().includes(e))):s,p=class extends O{constructor(){super();E(this,"mobileAndTablet",new f(this,A));this.filter="all",this.hasMore=!1,this.resultCount=void 0,this.displayResult=!1}render(){return l`${this.header}
             <slot></slot>
             ${this.footer}`}updated(t){if(!this.querySelector("merch-card"))return;let o=window.scrollY||document.documentElement.scrollTop,n=[...this.children].filter(r=>r.tagName==="MERCH-CARD");if(n.length===0)return;t.has("singleApp")&&this.singleApp&&n.forEach(r=>{r.updateFilters(r.name===this.singleApp)});let i=this.sort===a.alphabetical?V:I,h=[B,H,k,i].reduce((r,c)=>c(r,this),n).map((r,c)=>[r,c]);if(this.resultCount=h.length,this.page&&this.limit){let r=this.page*this.limit;this.hasMore=h.length>r,h=h.filter(([,c])=>c<r)}let m=new Map(h);n.forEach(r=>{if(m.has(r)){let c=m.get(r);r.style.order=c,r.setAttribute("tabindex",c+1),r.size=r.filters[this.filter]?.size,r.style.removeProperty("display"),r.requestUpdate()}else r.style.display="none",r.size=void 0,r.style.removeProperty("order")}),window.scrollTo(0,o),this.updateComplete.then(()=>{let r=this.shadowRoot.getElementById("resultText")?.firstElementChild?.assignedElements?.()?.[0];r&&P(r,{resultCount:this.resultCount,searchTerm:this.search,filter:this.sidenav?.filters.selectedText})})}connectedCallback(){super.connectedCallback(),this.filtered?(this.filter=this.filtered,this.page=1):this.startDeeplink(),this.sidenav=document.querySelector("merch-sidenav")}disconnectedCallback(){super.disconnectedCallback(),this.stopDeeplink?.()}get header(){if(!this.filtered)return l`<div id="header">
                 <sp-theme  color="light" scale="medium">