[Release] Stage to Main (adobecom#2868)

libs/blocks/merch-card-collection/merch-card-collection.js

@@ -1,3 +1,4 @@
+import { overrideUrlOrigin } from '../../utils/helpers.js';
 import {
   createTag, decorateLinks, getConfig, loadBlock, loadStyle, localizeLink,
 } from '../../utils/utils.js';
@@ -57,7 +58,7 @@ async function getCardsRoot(config, html) {
 }
 
 const fetchOverrideCard = (action, config) => new Promise((resolve, reject) => {
-  fetch(`${localizeLink(action?.target, config)}.plain.html`).then((res) => {
+  fetch(`${localizeLink(overrideUrlOrigin(action?.target))}.plain.html`).then((res) => {
     if (res.ok) {
       res.text().then((cardContent) => {
         const response = { path: action.target, cardContent: /^<div>(.*)<\/div>$/.exec(cardContent.replaceAll('\n', ''))[1] };

libs/blocks/table/table.css

@@ -264,6 +264,7 @@
 
 .table .section-row .col {
   padding: 16px 24px;
+  column-gap: 0.5ch;
 }
 
 .table .section-row .col:has(> p:nth-child(2)) {

libs/deps/mas/merch-sidenav.js

@@ -1,4 +1,4 @@
-import{html as k,css as H,LitElement as P}from"../lit-all.min.js";var r=class{constructor(e,t){this.key=Symbol("match-media-key"),this.matches=!1,this.host=e,this.host.addController(this),this.media=window.matchMedia(t),this.matches=this.media.matches,this.onChange=this.onChange.bind(this),e.addController(this)}hostConnected(){var e;(e=this.media)==null||e.addEventListener("change",this.onChange)}hostDisconnected(){var e;(e=this.media)==null||e.removeEventListener("change",this.onChange)}onChange(e){this.matches!==e.matches&&(this.matches=e.matches,this.host.requestUpdate(this.key,!this.matches))}};import{css as L}from"../lit-all.min.js";var c=L`
+import{html as k,css as H,LitElement as P}from"/libs/deps/lit-all.min.js";var r=class{constructor(e,t){this.key=Symbol("match-media-key"),this.matches=!1,this.host=e,this.host.addController(this),this.media=window.matchMedia(t),this.matches=this.media.matches,this.onChange=this.onChange.bind(this),e.addController(this)}hostConnected(){var e;(e=this.media)==null||e.addEventListener("change",this.onChange)}hostDisconnected(){var e;(e=this.media)==null||e.removeEventListener("change",this.onChange)}onChange(e){this.matches!==e.matches&&(this.matches=e.matches,this.host.requestUpdate(this.key,!this.matches))}};import{css as L}from"/libs/deps/lit-all.min.js";var c=L`
     h2 {
         font-size: 11px;
         font-style: normal;
@@ -9,7 +9,7 @@ import{html as k,css as H,LitElement as P}from"../lit-all.min.js";var r=class{co
         line-height: 32px;
         color: #747474;
     }
-`;import{html as N,LitElement as R}from"../lit-all.min.js";function d(s,e){let t;return function(){let o=this,i=arguments;clearTimeout(t),t=setTimeout(()=>s.apply(o,i),e)}}var x="merch-search:change";var v="merch-sidenav:select";var g="hashchange";function n(s=window.location.hash){let e=[],t=s.replace(/^#/,"").split("&");for(let o of t){let[i,l=""]=o.split("=");i&&e.push([i,decodeURIComponent(l.replace(/\+/g," "))])}return Object.fromEntries(e)}function a(s,e){if(s.deeplink){let t={};t[s.deeplink]=e,A(t)}}function A(s){let e=new URLSearchParams(window.location.hash.slice(1));Object.entries(s).forEach(([i,l])=>{l?e.set(i,l):e.delete(i)}),e.sort();let t=e.toString();if(t===window.location.hash)return;let o=window.scrollY||document.documentElement.scrollTop;window.location.hash=t,window.scrollTo(0,o)}function b(s){let e=()=>{if(window.location.hash&&!window.location.hash.includes("="))return;let t=n(window.location.hash);s(t)};return e(),window.addEventListener(g,e),()=>{window.removeEventListener(g,e)}}var p=class extends R{static properties={deeplink:{type:String}};get search(){return this.querySelector("sp-search")}constructor(){super(),this.handleInput=()=>{a(this,this.search.value),this.search.value&&this.dispatchEvent(new CustomEvent(x,{bubbles:!0,composed:!0,detail:{type:"search",value:this.search.value}}))},this.handleInputDebounced=d(this.handleInput.bind(this))}connectedCallback(){super.connectedCallback(),this.search&&(this.search.addEventListener("input",this.handleInputDebounced),this.search.addEventListener("submit",this.handleInputSubmit),this.updateComplete.then(()=>{this.setStateFromURL()}),this.startDeeplink())}disconnectedCallback(){super.disconnectedCallback(),this.search.removeEventListener("input",this.handleInputDebounced),this.search.removeEventListener("submit",this.handleInputSubmit),this.stopDeeplink?.()}setStateFromURL(){let t=n()[this.deeplink];t&&(this.search.value=t)}startDeeplink(){this.stopDeeplink=b(({search:e})=>{this.search.value=e??""})}handleInputSubmit(e){e.preventDefault()}render(){return N`<slot></slot>`}};customElements.define("merch-search",p);import{html as C,LitElement as D,css as M}from"../lit-all.min.js";var m=class extends D{static properties={sidenavListTitle:{type:String},label:{type:String},deeplink:{type:String,attribute:"deeplink"},selectedText:{type:String,reflect:!0,attribute:"selected-text"},selectedValue:{type:String,reflect:!0,attribute:"selected-value"}};static styles=[M`
+`;import{html as N,LitElement as R}from"/libs/deps/lit-all.min.js";function d(s,e){let t;return function(){let o=this,i=arguments;clearTimeout(t),t=setTimeout(()=>s.apply(o,i),e)}}var x="merch-search:change";var v="merch-sidenav:select";var g="hashchange";function n(s=window.location.hash){let e=[],t=s.replace(/^#/,"").split("&");for(let o of t){let[i,l=""]=o.split("=");i&&e.push([i,decodeURIComponent(l.replace(/\+/g," "))])}return Object.fromEntries(e)}function a(s,e){if(s.deeplink){let t={};t[s.deeplink]=e,A(t)}}function A(s){let e=new URLSearchParams(window.location.hash.slice(1));Object.entries(s).forEach(([i,l])=>{l?e.set(i,l):e.delete(i)}),e.sort();let t=e.toString();if(t===window.location.hash)return;let o=window.scrollY||document.documentElement.scrollTop;window.location.hash=t,window.scrollTo(0,o)}function b(s){let e=()=>{if(window.location.hash&&!window.location.hash.includes("="))return;let t=n(window.location.hash);s(t)};return e(),window.addEventListener(g,e),()=>{window.removeEventListener(g,e)}}var p=class extends R{static properties={deeplink:{type:String}};get search(){return this.querySelector("sp-search")}constructor(){super(),this.handleInput=()=>{a(this,this.search.value),this.search.value&&this.dispatchEvent(new CustomEvent(x,{bubbles:!0,composed:!0,detail:{type:"search",value:this.search.value}}))},this.handleInputDebounced=d(this.handleInput.bind(this))}connectedCallback(){super.connectedCallback(),this.search&&(this.search.addEventListener("input",this.handleInputDebounced),this.search.addEventListener("submit",this.handleInputSubmit),this.updateComplete.then(()=>{this.setStateFromURL()}),this.startDeeplink())}disconnectedCallback(){super.disconnectedCallback(),this.search.removeEventListener("input",this.handleInputDebounced),this.search.removeEventListener("submit",this.handleInputSubmit),this.stopDeeplink?.()}setStateFromURL(){let t=n()[this.deeplink];t&&(this.search.value=t)}startDeeplink(){this.stopDeeplink=b(({search:e})=>{this.search.value=e??""})}handleInputSubmit(e){e.preventDefault()}render(){return N`<slot></slot>`}};customElements.define("merch-search",p);import{html as C,LitElement as D,css as M}from"/libs/deps/lit-all.min.js";var m=class extends D{static properties={sidenavListTitle:{type:String},label:{type:String},deeplink:{type:String,attribute:"deeplink"},selectedText:{type:String,reflect:!0,attribute:"selected-text"},selectedValue:{type:String,reflect:!0,attribute:"selected-value"}};static styles=[M`
             :host {
                 display: block;
                 contain: content;
@@ -36,7 +36,7 @@ import{html as k,css as H,LitElement as P}from"../lit-all.min.js";var r=class{co
         >
             ${this.sidenavListTitle?C`<h2>${this.sidenavListTitle}</h2>`:""}
             <slot></slot>
-        </div>`}};customElements.define("merch-sidenav-list",m);import{html as V,LitElement as O,css as I}from"../lit-all.min.js";var u=class extends O{static properties={sidenavCheckboxTitle:{type:String},label:{type:String},deeplink:{type:String},selectedValues:{type:Array,reflect:!0},value:{type:String}};static styles=I`
+        </div>`}};customElements.define("merch-sidenav-list",m);import{html as V,LitElement as O,css as I}from"/libs/deps/lit-all.min.js";var u=class extends O{static properties={sidenavCheckboxTitle:{type:String},label:{type:String},deeplink:{type:String},selectedValues:{type:Array,reflect:!0},value:{type:String}};static styles=I`
         :host {
             display: block;
             contain: content;
@@ -66,7 +66,7 @@ import{html as k,css as H,LitElement as P}from"../lit-all.min.js";var r=class{co
             >
                 <slot></slot>
             </div>
-        </div>`}};customElements.define("merch-sidenav-checkbox-group",u);var y="(max-width: 700px)";var S="(max-width: 1199px)";var T=/iP(ad|hone|od)/.test(window?.navigator?.platform)||window?.navigator?.platform==="MacIntel"&&window.navigator.maxTouchPoints>1,E=!1,h,w=s=>{s&&(T?(document.body.style.position="fixed",s.ontouchmove=e=>{e.targetTouches.length===1&&e.stopPropagation()},E||(document.addEventListener("touchmove",e=>e.preventDefault()),E=!0)):(h=document.body.style.overflow,document.body.style.overflow="hidden"))},_=s=>{s&&(T?(s.ontouchstart=null,s.ontouchmove=null,document.body.style.position="",document.removeEventListener("touchmove",e=>e.preventDefault()),E=!1):h!==void 0&&(document.body.style.overflow=h,h=void 0))};document.addEventListener("sp-opened",()=>{document.body.classList.add("merch-modal")});document.addEventListener("sp-closed",()=>{document.body.classList.remove("merch-modal")});var f=class extends P{static properties={sidenavTitle:{type:String},closeText:{type:String,attribute:"close-text"},modal:{type:Boolean,attribute:"modal",reflect:!0}};#e;constructor(){super(),this.modal=!1}static styles=[H`
+        </div>`}};customElements.define("merch-sidenav-checkbox-group",u);var y="(max-width: 700px)";var S="(max-width: 1199px)";var T=/iP(ad|hone|od)/.test(window?.navigator?.platform)||window?.navigator?.platform==="MacIntel"&&window.navigator.maxTouchPoints>1,E=!1,h,w=s=>{s&&(T?(document.body.style.position="fixed",s.ontouchmove=e=>{e.targetTouches.length===1&&e.stopPropagation()},E||(document.addEventListener("touchmove",e=>e.preventDefault()),E=!0)):(h=document.body.style.overflow,document.body.style.overflow="hidden"))},_=s=>{s&&(T?(s.ontouchstart=null,s.ontouchmove=null,document.body.style.position="",document.removeEventListener("touchmove",e=>e.preventDefault()),E=!1):h!==void 0&&(document.body.style.overflow=h,h=void 0))};var f=class extends P{static properties={sidenavTitle:{type:String},closeText:{type:String,attribute:"close-text"},modal:{type:Boolean,attribute:"modal",reflect:!0}};#e;constructor(){super(),this.modal=!1}static styles=[H`
             :host {
                 display: block;
             }
@@ -138,4 +138,4 @@ import{html as k,css as H,LitElement as P}from"../lit-all.min.js";var r=class{co
         `}get asAside(){return k`<sp-theme theme="spectrum" color="light" scale="medium"
             ><h2>${this.sidenavTitle}</h2>
             <slot></slot
-        ></sp-theme>`}get dialog(){return this.shadowRoot.querySelector("sp-dialog-base")}closeModal(e){e.preventDefault(),this.dialog?.close()}openModal(){this.updateComplete.then(async()=>{w(this.dialog);let e={trigger:this.#e,notImmediatelyClosable:!0,type:"auto"},t=await window.__merch__spectrum_Overlay.open(this.dialog,e);t.addEventListener("close",()=>{this.modal=!1,_(this.dialog)}),this.shadowRoot.querySelector("sp-theme").append(t)})}updated(){this.modal&&this.openModal()}showModal({target:e}){this.#e=e,this.modal=!0}};customElements.define("merch-sidenav",f);export{f as MerchSideNav};
+        ></sp-theme>`}get dialog(){return this.shadowRoot.querySelector("sp-dialog-base")}closeModal(e){e.preventDefault(),this.dialog?.close(),document.body.classList.remove("merch-modal")}openModal(){this.updateComplete.then(async()=>{w(this.dialog),document.body.classList.add("merch-modal");let e={trigger:this.#e,notImmediatelyClosable:!0,type:"auto"},t=await window.__merch__spectrum_Overlay.open(this.dialog,e);t.addEventListener("close",()=>{this.modal=!1,_(this.dialog)}),this.shadowRoot.querySelector("sp-theme").append(t)})}updated(){this.modal&&this.openModal()}showModal({target:e}){this.#e=e,this.modal=!0}};customElements.define("merch-sidenav",f);export{f as MerchSideNav};

libs/features/mas/web-components/build.mjs

@@ -57,7 +57,7 @@ Promise.all([
         minify: true,
         outfile: `${outfolder}/merch-sidenav.js`,
         format: 'esm',
-        plugins: [rewriteImports()],
+        plugins: [rewriteImportsToLibsFolder()],
         external: ['lit'],
     }),
     buildLitComponent('merch-icon'),
@@ -84,3 +84,17 @@ function rewriteImports(rew) {
         },
     };
 }
+
+function rewriteImportsToLibsFolder(rew) {
+  return {
+      name: 'rewrite-imports-to-libs-folder',
+      setup(build) {
+          build.onResolve({ filter: /^lit(\/.*)?$/ }, (args) => {
+              return {
+                  path: '/libs/deps/lit-all.min.js',
+                  external: true,
+              };
+          });
+      },
+  };
+}

libs/features/mas/web-components/src/sidenav/merch-sidenav.js

@@ -7,13 +7,6 @@ import './merch-sidenav-checkbox-group.js';
 import { SPECTRUM_MOBILE_LANDSCAPE, TABLET_DOWN } from '../media.js';
 import { disableBodyScroll, enableBodyScroll } from '../bodyScrollLock.js';
 
-document.addEventListener('sp-opened', () => {
-    document.body.classList.add('merch-modal');
-});
-document.addEventListener('sp-closed', () => {
-    document.body.classList.remove('merch-modal');
-});
-
 export class MerchSideNav extends LitElement {
     static properties = {
         sidenavTitle: { type: String },
@@ -137,11 +130,13 @@ export class MerchSideNav extends LitElement {
     closeModal(e) {
         e.preventDefault();
         this.dialog?.close();
+        document.body.classList.remove('merch-modal');
     }
 
     openModal() {
         this.updateComplete.then(async () => {
             disableBodyScroll(this.dialog);
+            document.body.classList.add('merch-modal');
             const options = {
                 trigger: this.#target,
                 notImmediatelyClosable: true,

libs/features/mas/web-components/test/merch-card-collection.test.html.js

@@ -72,14 +72,40 @@ let merchCards;
 
 const shouldSkipTests = sessionStorage.getItem('skipTests') ? 'true' : 'false';
 runTests(async () => {
-    await toggleLargeDesktop();
+    let render;
     mockLana();
     await mockFetch(withWcs);
     await mas();
     if (shouldSkipTests !== 'true') {
-      describe('merch-card-collection web component', () => {
-            let render;
-            beforeEach(() => {
+      describe("merch-card-collection web component on phones and tablets", () => {
+          beforeEach(async () => {
+              [merchCards, render] = prepareTemplate('catalogCards', false);
+          });
+
+          it('sets the class for modal when opening filters in a modal', async () => {
+              render();
+              await delay(100);
+              expect(document.body.classList.contains('merch-modal')).to.be.false;
+              merchCards.shadowRoot.querySelector('#filtersButton').click();
+              await delay(100);
+              expect(document.body.classList.contains('merch-modal')).to.be.true;
+          });
+
+          it('removes the class for modal when closing the filters modal', async () => {
+            render();
+            await delay(100);
+            merchCards.shadowRoot.querySelector('#filtersButton').click();
+            await delay(100);
+            expect(document.body.classList.contains('merch-modal')).to.be.true;
+            document.querySelector('merch-sidenav').shadowRoot.querySelector('#sidenav').querySelector('sp-link').click();
+            await delay(100);
+            expect(document.body.classList.contains('merch-modal')).to.be.false;
+        });
+      });
+
+      describe('merch-card-collection web component on desktop', () => {
+            beforeEach(async () => {
+                await toggleLargeDesktop();
                 document.location.hash = '';
                 [merchCards, render] = prepareTemplate('catalogCards', false);
             });

libs/features/personalization/personalization.js

@@ -366,6 +366,7 @@ function modifySelectorTerm(termParam) {
   const htmlEls = [
     'html', 'body', 'header', 'footer', 'main',
     'div', 'a', 'p', 'strong', 'em', 'picture', 'source', 'img', 'h',
+    'ul', 'ol', 'li',
   ];
   const startTextMatch = term.match(/^[a-zA-Z/./-]*/);
   const startText = startTextMatch ? startTextMatch[0].toLowerCase() : '';
@@ -893,6 +894,8 @@ export function cleanAndSortManifestList(manifests) {
           freshManifest = manifestObj[manifest.manifestPath];
         }
         freshManifest.name = fullManifest.name;
+        freshManifest.selectedVariantName = fullManifest.selectedVariantName;
+        freshManifest.selectedVariant = freshManifest.variants[freshManifest.selectedVariantName];
         manifestObj[manifest.manifestPath] = freshManifest;
       } else {
         manifestObj[manifest.manifestPath] = manifest;

libs/features/webapp-prompt/webapp-prompt.css

@@ -2,6 +2,7 @@
 .appPrompt {
   --pep-background-prompt: #ffffff;
   --pep-background-progress: #e9e9e9;
+  --pep-dismiss-button-focus-border-color: #3b63fb;
   display: none;
 }
 
@@ -159,10 +160,7 @@
   }
 
   .appPrompt-close:focus {
-    /* For Firefox */
-    outline: auto;
-    /* For Chrome, Edge, and Safari */
-    outline: 2px solid -webkit-focus-ring-color;
+    outline: 2px solid var(--pep-dismiss-button-focus-border-color);
   }
 
   .appPrompt-progressWrapper {

libs/scripts/scripts.js

@@ -22,11 +22,19 @@ import locales from '../utils/locales.js';
 const prodDomains = ['milo.adobe.com'];
 
 const stageDomainsMap = {
-  'www.adobe.com': 'www.stage.adobe.com',
-  'blog.adobe.com': 'blog.stage.adobe.com',
-  'business.adobe.com': 'business.stage.adobe.com',
-  'helpx.adobe.com': 'helpx.stage.adobe.com',
-  'news.adobe.com': 'news.stage.adobe.com',
+  'www.stage.adobe.com': {
+    'www.adobe.com': 'origin',
+    'helpx.adobe.com': 'helpx.stage.adobe.com',
+  },
+  '--bacom--adobecom.hlx.live': {
+    'business.adobe.com': 'origin',
+    'news.adobe.com': 'main--news--adobecom.hlx.live',
+  },
+  '--blog--adobecom.hlx.page': {
+    'blog.adobe.com': 'origin',
+    'business.adobe.com': 'main--bacom--adobecom.hlx.page',
+  },
+  '.business-graybox.adobe.com': { 'business.adobe.com': 'origin' },
 };
 
 const config = {

libs/utils/helpers.js

@@ -19,3 +19,21 @@ export function updateLinkWithLangRoot(link) {
     return link;
   }
 }
+
+/**
+ * Replaces the origin of the provided link with location.origin.
+ *
+ * @param link
+ * @returns {string|*}
+ */
+export function overrideUrlOrigin(link) {
+  try {
+    const url = new URL(link);
+    if (url.hostname !== window.location.hostname) {
+      return link.replace(url.origin, window.location.origin);
+    }
+  } catch (e) {
+    // ignore
+  }
+  return link;
+}

libs/utils/utils.js

@@ -638,17 +638,32 @@ const decorateCopyLink = (a, evt) => {
   });
 };
 
+export function convertStageLinks({ anchors, config, hostname }) {
+  if (config.env?.name === 'prod' || !config.stageDomainsMap) return;
+  const matchedRules = Object.entries(config.stageDomainsMap)
+    .find(([domain]) => hostname.includes(domain));
+  if (!matchedRules) return;
+  const [, domainsMap] = matchedRules;
+  [...anchors].forEach((a) => {
+    const matchedDomain = Object.keys(domainsMap)
+      .find((domain) => a.href.includes(domain));
+    if (!matchedDomain) return;
+    a.href = a.href.replace(a.hostname, domainsMap[matchedDomain] === 'origin'
+      ? hostname
+      : domainsMap[matchedDomain]);
+  });
+}
+
 export function decorateLinks(el) {
   const config = getConfig();
   decorateImageLinks(el);
   const anchors = el.getElementsByTagName('a');
+  const { hostname } = window.location;
+  convertStageLinks({ anchors, config, hostname });
   return [...anchors].reduce((rdx, a) => {
     appendHtmlToLink(a);
     a.href = localizeLink(a.href);
     decorateSVG(a);
-    if (config.env?.name === 'stage' && config.stageDomainsMap?.[a.hostname]) {
-      a.href = a.href.replace(a.hostname, config.stageDomainsMap[a.hostname]);
-    }
     if (a.href.includes('#_blank')) {
       a.setAttribute('target', '_blank');
       a.href = a.href.replace('#_blank', '');