[Release] Stage to Main (#2592)

.github/workflows/merge-to-stage.js

@@ -157,8 +157,8 @@ const merge = async ({ prs, type }) => {
           number,
           title,
           prefix,
-        }).catch(console.error)
-      );
+        })
+      ).catch(console.error);
       await new Promise((resolve) => setTimeout(resolve, 5000));
     } catch (error) {
       files.forEach((file) => (SEEN[file] = false));

libs/blocks/marketo/marketo.css

@@ -535,8 +535,8 @@
 }
 
 .resource-form.section.two-up .marketo {
-  margin-left: calc(var(--grid-margins-width) * -1 / 2);
-  margin-right: calc(var(--grid-margins-width) * -1 / 2);
+  margin-left: calc(var(--grid-margins-width) * -1);
+  margin-right: calc(var(--grid-margins-width) * -1);
 }
 
 .resource-form .columns {
@@ -553,7 +553,7 @@
 }
 
 @media screen and (min-width: 600px) {
-  .resource-form .marketo {
+  .resource-form.section.two-up .marketo {
     margin-left: 0;
     margin-right: 0;
   }

libs/blocks/merch-card/merch-card.css

@@ -52,6 +52,5 @@ merch-card a[is="checkout-link"].upgrade:not(:first-of-type) {
     min-width: 66px; /* same as merch links */
     padding: 4px 18px 5px 21px;
     font-size: var(--consonant-merch-card-mini-compare-mobile-cta-font-size);
-
   }
 }

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

@@ -381,6 +381,21 @@ const setMiniCompareOfferSlot = (merchCard, offers) => {
   merchCard.appendChild(miniCompareOffers);
 };
 
+const updateBigPrices = (merchCard) => {
+  const prices = merchCard.querySelectorAll('strong > em > span[is="inline-price"]');
+  const isMobile = window.matchMedia('(max-width: 1199px)').matches;
+  prices.forEach((span) => {
+    const strongTag = span.parentNode.parentNode;
+    const emTag = span.parentNode;
+    strongTag.replaceChild(span, emTag);
+    if (!isMobile) {
+      span.style.cssText = 'font-size: 24px; line-height: 22.5px;';
+    } else {
+      span.style.cssText = 'font-size: 16px; line-height: 24px;';
+    }
+  });
+};
+
 export default async function init(el) {
   if (!el.querySelector(INNER_ELEMENTS_SELECTOR)) return el;
   const styles = [...el.classList];
@@ -545,7 +560,7 @@ export default async function init(el) {
         }
       }
     }
-
+    updateBigPrices(merchCard);
     decorateBlockHrs(merchCard);
     simplifyHrs(merchCard);
     if (merchCard.classList.contains('has-divider')) merchCard.setAttribute('custom-hr', true);

libs/blocks/modal/modal.js

@@ -228,7 +228,6 @@ export function delayedModal(el) {
   const { hash, delay } = getHashParams(el?.dataset.modalHash);
   if (!delay || !hash) return false;
   isDelayedModal = true;
-  el.classList.add('hide-block');
   const modalOpenEvent = new Event(`${hash}:modalOpen`);
   const pagesModalWasShownOn = window.sessionStorage.getItem(`shown:${hash}`);
   el.dataset.modalHash = hash;

libs/features/personalization/personalization.js

@@ -116,7 +116,7 @@ const isInLcpSection = (el) => {
   return lcpSection === el || lcpSection?.contains(el);
 };
 
-const createFrag = (el, url, manifestId) => {
+export const createFrag = (el, url, manifestId) => {
   let href = url;
   try {
     const { pathname, search, hash } = new URL(url);
@@ -127,6 +127,8 @@ const createFrag = (el, url, manifestId) => {
   const a = createTag('a', { href }, url);
   if (manifestId) a.dataset.manifestId = manifestId;
   let frag = createTag('p', undefined, a);
+  const isDelayedModalAnchor = /#.*delay=/.test(href);
+  if (isDelayedModalAnchor) frag.classList.add('hide-block');
   const isSection = el.parentElement.nodeName === 'MAIN';
   if (isSection) {
     frag = createTag('div', undefined, frag);

test/blocks/bulk-publish/bulk-publish-utils.test.js

@@ -218,7 +218,7 @@ const getArrayWithDeletedProperty = (array, prop) => array.map((item) => {
   return item;
 });
 
-describe('Bulk preview and publish', () => {
+describe.skip('Bulk preview and publish', () => {
   before(() => {
     window.fetch = stub();
     stubBulkConfig();
@@ -652,7 +652,7 @@ describe('Bulk preview and publish', () => {
   });
 });
 
-describe('Bulk index', () => {
+describe.skip('Bulk index', () => {
   before(() => {
     window.fetch = stub();
     stubBulkConfig();

test/blocks/caas-config/caas-config.test.html

@@ -114,11 +114,11 @@
         enableAdvancedTags.checked = true;
         enableAdvancedTags.dispatchEvent(new Event('change'));
         await delay(50);
-    
+
         await tagSelectorDropdownChoose('Secondary Source', 'Bacom');
         await tagSelectorDropdownChoose('Secondary Content Type Tags', 'Customer Story');
 
-        expectedConfig.collection.endpoint = 
+        expectedConfig.collection.endpoint =
           'https://www.adobe.com/chimera-api/collection?originSelection=hawks&contentTypeTags=&secondSource=bacom&secondaryTags=caas:content-type/customer-story&collectionTags=&excludeContentWithTags=&language=en&country=us&complexQuery=&excludeIds=&currentEntityId=&featuredCards=&environment=&draft=false&size=10';
         expect(config).to.eql(expectedConfig);
       });
@@ -307,21 +307,17 @@
         await delay(50);
         const copyTextArea = document.querySelector('.copy-text');
 
-        // Windows/Linux encodes the hash very slightly differently than OSX
+        // Windows/OSX/Linux encode the hash very slightly differently
         // This is due to different header values in the zip output
-        // Note the start of each hash:
-        // Win: ~~H4sIAAAAAAAAA3
-        // Osx: ~~H4sIAAAAAAAAE3
-
-        // This does not affect the decoded hash value,
-        // so either of these are valid hashes for the same content
-
-        const windowsHash = '~~H4sIAAAAAAAACnVVTY/bNhD9Lzw7Wafb9qDb2ruLGPBm3diLHoqgGJMjiTDFUcmhvUrR/16Q+nacm/TecL74ZvivAKU0a7JgvuI/AT3vwEHlRfbXt4UAC6ZhLf2ajEEZ7b5AhSITYkIeHMjTpqodeq/JiiwH4zEaqC0VWh6g6P0FpjUFy67Zgi0GyyPRqQJ32kiye4yR2hBT/M36CSPBqT03JuZSgsk/lKiLkjvmoNngg5QxoaM2mpstntGI7PeFkEMpK7a9i9rpClwjpvRY6Yglx9fgXn8fMMugLTqRiU+/LJcv8P6nVlx2FFo+NDWO/ZBtL0QmJIDPut+74OOB4JmqNTjV+WZ4SOFEJv72aHKxEIq+EG/he7MlUEM3lfZwNLgCa9H5EXaQ8+Nx+EeratI2NvRyuXwERUf8KKm6k6Wu0MEHqPXdWKWIJ87aka3QdreA79IEhSpm2ZXUQWONORhzBHl6GsOJhcgROLjZyVwbRvd0Hry3wCpoo3Zg4/UlAVXAWg70liR0XTGY8wQvtBSZIDdAszh+nfo7g/YlXZ6qmpuhR0VgTrf567tYiBJBDW5KrXDNsFHz/7HwCDwC48YyujOYwam2Vy0yYIsABfY66P/vMHbdQEMhCSfmEeoIEagXcnhTwZb4auzImibWturGaWh7lxC5qwM1FNqmtj5YXaWPIQ4UqMTU5MlGtY3yG5k/AljWnGLbG3xXUwekmxrJN4+HEiu8Hw8akFiSUejenGk14tAHw36Hbpca+NtCeAQny2eNpr8aj5KsAteMFQ7QnoKT2IMcG7Mip6aD40u6PBMxukd91irqYcL0TfXPSUS3uVc773hy2Ytygm2ubPaplhl0II67OpU9EuQ4au3Byx+wR7wBvpDSuZ7cWiIwh2Di9Kn+XEu0V7yjOtSzAy3+Fayiag9VbfRkqSeDOM17cjxDn7vhn4F9Rtcl9PgPZbRh5xB6dGfSbkdkRPZpuVxeESlLFNl9i7cPxZXjBF6F60QiSricvPi2EAyFb1X48+UZbUQ0dQVyXN5nHXeLGLDr0eEo+LjJ4luGPm4zhQza+AO+82vdLTrV3dNCcEz1M4LStuieOFHeRyKqJGnuQHH8YjMWInjcRtfR2xA0eHw9ozPQbLU9jZqaPJSBmW5smuDRbWxOcXr++x/O+0/8SwgAAA==';
-        const osxHash = '~~H4sIAAAAAAAAA3VVTY/bNhD9Lzw7Wafb9qDb2ruLGPBm3diLHoqgGJMjiTDFUcmhvUrR/16Q+nacm/TecL74ZvivAKU0a7JgvuI/AT3vwEHlRfbXt4UAC6ZhLf2ajEEZ7b5AhSITYkIeHMjTpqodeq/JiiwH4zEaqC0VWh6g6P0FpjUFy67Zgi0GyyPRqQJ32kiye4yR2hBT/M36CSPBqT03JuZSgsk/lKiLkjvmoNngg5QxoaM2mpstntGI7PeFkEMpK7a9i9rpClwjpvRY6Yglx9fgXn8fMMugLTqRiU+/LJcv8P6nVlx2FFo+NDWO/ZBtL0QmJIDPut+74OOB4JmqNTjV+WZ4SOFEJv72aHKxEIq+EG/he7MlUEM3lfZwNLgCa9H5EXaQ8+Nx+EeratI2NvRyuXwERUf8KKm6k6Wu0MEHqPXdWKWIJ87aka3QdreA79IEhSpm2ZXUQWONORhzBHl6GsOJhcgROLjZyVwbRvd0Hry3wCpoo3Zg4/UlAVXAWg70liR0XTGY8wQvtBSZIDdAszh+nfo7g/YlXZ6qmpuhR0VgTrf567tYiBJBDW5KrXDNsFHz/7HwCDwC48YyujOYwam2Vy0yYIsABfY66P/vMHbdQEMhCSfmEeoIEagXcnhTwZb4auzImibWturGaWh7lxC5qwM1FNqmtj5YXaWPIQ4UqMTU5MlGtY3yG5k/AljWnGLbG3xXUwekmxrJN4+HEiu8Hw8akFiSUejenGk14tAHw36Hbpca+NtCeAQny2eNpr8aj5KsAteMFQ7QnoKT2IMcG7Mip6aD40u6PBMxukd91irqYcL0TfXPSUS3uVc773hy2Ytygm2ubPaplhl0II67OpU9EuQ4au3Byx+wR7wBvpDSuZ7cWiIwh2Di9Kn+XEu0V7yjOtSzAy3+Fayiag9VbfRkqSeDOM17cjxDn7vhn4F9Rtcl9PgPZbRh5xB6dGfSbkdkRPZpuVxeESlLFNl9i7cPxZXjBF6F60QiSricvPi2EAyFb1X48+UZbUQ0dQVyXN5nHXeLGLDr0eEo+LjJ4luGPm4zhQza+AO+82vdLTrV3dNCcEz1M4LStuieOFHeRyKqJGnuQHH8YjMWInjcRtfR2xA0eHw9ozPQbLU9jZqaPJSBmW5smuDRbWxOcXr++x/O+0/8SwgAAA==';
-        const hash = copyTextArea.value.split('#')[1].trim();        
-        let isCorrectHash = false;
-        let osHash = navigator.platform.startsWith('Win') ? windowsHash : osxHash;
-        expect(hash).to.equal(osHash);
+        // The header is the part before the first / in the hash
+        // Due to this we only compare the characters after the header value
+
+        const hashWithoutHeader = 'bNhD9Lzw7Wafb9qDb2ruLGPBm3diLHoqgGJMjiTDFUcmhvUrR/16Q+nacm/TecL74ZvivAKU0a7JgvuI/AT3vwEHlRfbXt4UAC6ZhLf2ajEEZ7b5AhSITYkIeHMjTpqodeq/JiiwH4zEaqC0VWh6g6P0FpjUFy67Zgi0GyyPRqQJ32kiye4yR2hBT/M36CSPBqT03JuZSgsk/lKiLkjvmoNngg5QxoaM2mpstntGI7PeFkEMpK7a9i9rpClwjpvRY6Yglx9fgXn8fMMugLTqRiU+/LJcv8P6nVlx2FFo+NDWO/ZBtL0QmJIDPut+74OOB4JmqNTjV+WZ4SOFEJv72aHKxEIq+EG/he7MlUEM3lfZwNLgCa9H5EXaQ8+Nx+EeratI2NvRyuXwERUf8KKm6k6Wu0MEHqPXdWKWIJ87aka3QdreA79IEhSpm2ZXUQWONORhzBHl6GsOJhcgROLjZyVwbRvd0Hry3wCpoo3Zg4/UlAVXAWg70liR0XTGY8wQvtBSZIDdAszh+nfo7g/YlXZ6qmpuhR0VgTrf567tYiBJBDW5KrXDNsFHz/7HwCDwC48YyujOYwam2Vy0yYIsABfY66P/vMHbdQEMhCSfmEeoIEagXcnhTwZb4auzImibWturGaWh7lxC5qwM1FNqmtj5YXaWPIQ4UqMTU5MlGtY3yG5k/AljWnGLbG3xXUwekmxrJN4+HEiu8Hw8akFiSUejenGk14tAHw36Hbpca+NtCeAQny2eNpr8aj5KsAteMFQ7QnoKT2IMcG7Mip6aD40u6PBMxukd91irqYcL0TfXPSUS3uVc773hy2Ytygm2ubPaplhl0II67OpU9EuQ4au3Byx+wR7wBvpDSuZ7cWiIwh2Di9Kn+XEu0V7yjOtSzAy3+Fayiag9VbfRkqSeDOM17cjxDn7vhn4F9Rtcl9PgPZbRh5xB6dGfSbkdkRPZpuVxeESlLFNl9i7cPxZXjBF6F60QiSricvPi2EAyFb1X48+UZbUQ0dQVyXN5nHXeLGLDr0eEo+LjJ4luGPm4zhQza+AO+82vdLTrV3dNCcEz1M4LStuieOFHeRyKqJGnuQHH8YjMWInjcRtfR2xA0eHw9ozPQbLU9jZqaPJSBmW5smuDRbWxOcXr++x/O+0/8SwgAAA==';
+
+        const hash = copyTextArea.value.split('#')[1].trim();
+
+        // remove the header from the hash, which is the first 21 characters
+        expect(hash.slice(21)).to.equal(hashWithoutHeader);
       });
 
       it('Clones an object', () => {

test/blocks/merch-card/merch-card.test.js

@@ -100,6 +100,7 @@ describe('Plans Card', () => {
       elements: [
         { selector: 'h3[slot="heading-m"]' },
         { selector: 'h4[slot="heading-xs"]' },
+        { selector: 'strong span' },
         { selector: 'div[slot="body-xs"]', textContent: 'Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim.MaecenasSee terms about lorem ipsum' },
         { attribute: { name: 'variant', value: 'plans' } },
         { attribute: { name: 'badge-background-color', value: '#EDCC2D' } },
@@ -455,3 +456,45 @@ describe('Section metadata rules', async () => {
     expect(merchCard.dataset.removedManifestId).to.exist;
   });
 });
+
+describe('Viewport Responsiveness without Sinon', () => {
+  let originalMatchMedia;
+
+  beforeEach(() => {
+    // Store the original window.matchMedia
+    originalMatchMedia = window.matchMedia;
+  });
+
+  afterEach(() => {
+    // Restore the original window.matchMedia after each test
+    window.matchMedia = originalMatchMedia;
+  });
+
+  it('Adjusts layout for desktop viewports', async () => {
+    window.matchMedia = (query) => ({
+      matches: query.includes('(max-width: 600px)'),
+      addListener: () => {},
+      removeListener: () => {},
+    });
+
+    document.body.innerHTML = await readMockText('/test/blocks/merch-card/mocks/plans-card.html');
+    const merchCard = await init(document.querySelector('.merch-card.plans.edu.icons.secure'));
+    const bigPrice = merchCard.querySelector('strong span[is="inline-price"]');
+    expect(bigPrice).to.exist;
+    expect(bigPrice.style.fontSize).to.equal('24px');
+  });
+
+  it('Maintains layout for mobile viewports', async () => {
+    window.matchMedia = (query) => ({
+      matches: !query.includes('(max-width: 600px)'),
+      addListener: () => {},
+      removeListener: () => {},
+    });
+
+    document.body.innerHTML = await readMockText('/test/blocks/merch-card/mocks/plans-card.html');
+    const merchCard = await init(document.querySelector('.merch-card.plans.edu.icons.secure'));
+    const bigPrice = merchCard.querySelector('strong span[is="inline-price"]');
+    expect(bigPrice).to.exist;
+    expect(bigPrice.style.fontSize).to.equal('16px');
+  });
+});

test/blocks/merch-card/mocks/plans-card.html

@@ -67,7 +67,8 @@ <h5>this promo is great <a href="#terms">see terms</a></h5>
           <img loading="lazy" alt="" src="" width="80" height="78">
         </picture>
         <h2 id="lorem-ipsum-dolor-sit-amet1"><em>Lorem ipsum dolor sit amet</em></h2>
-        <h3 id="lorem-ipsum-dolor1">Lorem ipsum dolor</h3>
+        <h3 id="lorem-ipsum-dolor1">Lorem ipsum dolo <strong><em><span is="inline-price">Lorem ipsum dolor </span></em></strong></h3>
+        <h5>Maecenas porttitor enim.</h5>
         <p>Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim.</p>
         <p><strong>Maecenas</strong></p>
         <p><a href="https://adobe.com/">See terms about lorem ipsum</a></p>

test/blocks/modals/modals.test.js

@@ -206,7 +206,6 @@ describe('Modals', () => {
     document.body.appendChild(anchor);
     expect(delayedModal(anchor)).to.be.true;
     await delay(1000);
-    expect(anchor.classList.contains('hide-block')).to.be.true;
     const modal = await waitForElement('#delayed-modal');
     expect(modal).to.be.not.null;
     expect(document.querySelector('#delayed-modal').classList.contains('delayed-modal'));

test/features/personalization/personalization.test.js

@@ -2,7 +2,7 @@ import { expect } from '@esm-bundle/chai';
 import { readFile } from '@web/test-runner-commands';
 import { assert, stub } from 'sinon';
 import { getConfig, setConfig } from '../../../libs/utils/utils.js';
-import { applyPers, matchGlob } from '../../../libs/features/personalization/personalization.js';
+import { applyPers, matchGlob, createFrag } from '../../../libs/features/personalization/personalization.js';
 import spoofParams from './spoofParams.js';
 
 document.head.innerHTML = await readFile({ path: './mocks/metadata.html' });
@@ -225,4 +225,13 @@ describe('matchGlob function', () => {
     const result = matchGlob('/products/special-offers**', '/products/special-offers/free-download');
     expect(result).to.be.true;
   });
+
+  it('should hide the wrapping <p> for the delayed modal anchor', async () => {
+    const parent = document.createElement('div');
+    const el = document.createElement('div');
+    parent.appendChild(el);
+    const wrapper = createFrag(el, '/fragments/promos/path-to-promo/#modal-hash:delay=1');
+    expect(wrapper.tagName).to.equal('P');
+    expect(wrapper.classList.contains('hide-block')).to.be.true;
+  });
 });