[Release] Stage to Main (#2641)

libs/blocks/caas-config/caas-config.js

@@ -364,6 +364,7 @@ const UiPanel = () => html`
   <${Input} label="Use Overlay Links" prop="useOverlayLinks" type="checkbox" />
   <${Input} label="Show total card count at top" prop="showTotalResults" type="checkbox" />
   <${Input} label="Hide date for on-demand content" prop="hideDateInterval" type="checkbox" />
+  <${Input} label="Enable showing card badges (by default hidden)" prop="showCardBadges" type="checkbox" />
   <${Select} label="Card Style" prop="cardStyle" options=${defaultOptions.cardStyle} />
   <${Select} options=${defaultOptions.cardTitleAccessibilityLevel} prop="cardTitleAccessibilityLevel" label="Card Accessibility Title Level" />
   <${Select} label="Layout" prop="container" options=${defaultOptions.container} />

libs/blocks/caas/utils.js

@@ -580,6 +580,7 @@ export const getConfig = async (originalState, strs = {}) => {
       }&size=${state.collectionSize || state.totalCardsToShow}${localesQueryParam}${debug}${flatFile}`,
       fallbackEndpoint: state.fallbackEndpoint,
       totalCardsToShow: state.totalCardsToShow,
+      showCardBadges: state.showCardBadges,
       cardStyle: state.cardStyle,
       showTotalResults: state.showTotalResults,
       i18n: {
@@ -818,6 +819,7 @@ export const defaultState = {
   secondaryTags: [],
   secondarySource: [],
   setCardBorders: false,
+  showCardBadges: false,
   showFooterDivider: false,
   showBookmarksFilter: false,
   showBookmarksOnCards: false,

libs/blocks/global-navigation/global-navigation.css

@@ -84,7 +84,6 @@ header.global-navigation {
 
 /* Promo */
 .global-navigation .aside.promobar {
-  display: none; /* For when someone switches from desktop to mobile */
   z-index: 1;
 }
 
@@ -569,6 +568,11 @@ header.global-navigation {
     padding: 40px 0 0;
     max-height: calc(100vh - 100%);
     overflow: auto;
+    box-sizing: border-box;
+  }
+
+  .global-navigation.has-promo .feds-navItem--megaMenu .feds-popup {
+    max-height: calc(100vh - 100% - var(--global-height-navPromo));
   }
 
   [dir = "rtl"] .feds-navItem--megaMenu .feds-popup {

libs/blocks/global-navigation/global-navigation.js

@@ -777,7 +777,7 @@ class Gnav {
   decorateAside = async () => {
     this.elements.aside = '';
     const promoPath = getMetadata('gnav-promo-source');
-    if (!isDesktop.matches || !promoPath) {
+    if (!promoPath) {
       this.block.classList.remove('has-promo');
       return this.elements.aside;
     }

libs/blocks/graybox/graybox.js

@@ -264,7 +264,16 @@ const setupChangedEls = (globalNoClick) => {
   }
 };
 
+const transformLinks = () => {
+  const grayboxHostname = window.location.hostname;
+  const consumerHostname = grayboxHostname.replace(/[^.]+\.(?:([^.]+)-)?graybox\./, (_, sub) => `${sub || 'www'}.`);
+  document.querySelectorAll(`a[href*="${consumerHostname}"]`).forEach((el) => {
+    el.href = el.href.replace(consumerHostname, grayboxHostname);
+  });
+};
+
 const grayboxThePage = (grayboxEl, grayboxMenuOff) => () => {
+  transformLinks();
   document.body.classList.add(CLASS.GRAYBOX_BODY);
   const globalNoClick = grayboxEl.classList.contains(CLASS.NO_CLICK)
   || grayboxEl.classList.contains(OPTION.NO_CLICK);

libs/blocks/marquee/marquee.css

@@ -301,7 +301,6 @@
 }
 
 .marquee.split .icon-area img {
-  height: auto;
   max-height: var(--icon-size-l);
   max-width: 275px;
   object-fit: contain;

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

@@ -175,6 +175,8 @@ const parseContent = async (el, merchCard) => {
   const innerElements = [
     ...el.querySelectorAll(INNER_ELEMENTS_SELECTOR),
   ];
+  const calloutContainer = createTag('div');
+
   innerElements.forEach((element) => {
     let { tagName } = element;
     if (isHeadingTag(tagName)) {
@@ -233,13 +235,10 @@ const parseContent = async (el, merchCard) => {
       calloutContentWrapper.appendChild(calloutContent);
 
       if (imgElement) {
-        calloutContentWrapper.classList.add('callout-content-wrapper-with-icon');
         calloutContentWrapper.appendChild(imgElement);
       }
 
-      const calloutSlot = createTag('div', { slot: 'callout-text' });
-      calloutSlot.appendChild(calloutContentWrapper);
-      merchCard.appendChild(calloutSlot);
+      calloutContainer.appendChild(calloutContentWrapper);
       return;
     }
     if (isParagraphTag(tagName)) {
@@ -249,6 +248,12 @@ const parseContent = async (el, merchCard) => {
     if (mnemonicList) bodySlot.append(mnemonicList);
   });
 
+  if (calloutContainer.children.length > 0) {
+    const calloutSlot = createTag('div', { slot: 'callout-content' });
+    calloutSlot.appendChild(calloutContainer);
+    merchCard.appendChild(calloutSlot);
+  }
+
   if (merchCard.variant === MINI_COMPARE_CHART && merchCard.childNodes[1]) {
     merchCard.insertBefore(bodySlot, merchCard.childNodes[1]);
   }

libs/blocks/mobile-app-banner/mobile-app-banner.js

@@ -59,7 +59,7 @@ function branchInit(key) {
 /* eslint-enable */
 export default async function init(el) {
   const header = document.querySelector('.global-navigation');
-  if (!header) return;
+  if (!header || header.classList.contains('has-promo')) return;
   const classListArray = Array.from(el.classList);
   const product = classListArray.find((token) => token.startsWith('product-')).split('-')[1];
   const key = await getKey(product);

libs/styles/styles.css

@@ -4,7 +4,7 @@
   --global-height-nav: 64px;
   --global-height-breadcrumbs: 33px;
   /* stylelint-disable-next-line custom-property-pattern */
-  --global-height-navPromo: 65px;
+  --global-height-navPromo: 72px;
   --feds-totalheight-nav: calc(var(--feds-height-nav, --global-height-nav) + var(--feds-height-breadcrumbs, --global-height-breadcrumbs));
 
   /* Colors */
@@ -708,13 +708,12 @@ header.global-navigation {
   visibility: hidden;
 }
 
-@media (min-width: 900px) {
-  header.global-navigation.has-promo {
-    height: auto;
-    /* stylelint-disable-next-line custom-property-pattern */
-    min-height: calc(var(--global-height-nav) + var(--global-height-navPromo));
-  }
+header.global-navigation.has-promo {
+  height: auto;
+  min-height: calc(var(--global-height-nav) + var(--global-height-navPromo));
+}
 
+@media (min-width: 900px) {
   header.global-navigation.has-breadcrumbs {
     padding-bottom: var(--global-height-breadcrumbs);
   }

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

@@ -312,7 +312,7 @@
         // 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 hashWithoutHeader = 'bNhD9Fz47Wafb9kFva+8uYsCbdWMv+lAExZgcSYQpjkoO7VWK/ntB6u44b9I55FzOXPivAKU0a7JgvuI/AT3vwEHlRfbXt4UAC6ZhLf2ajEEZz32BCkUmxIQ8OJCnTVU79F6TFVkOxmM8oLZUaHmAorcXmNYULLtmC7YYTh6JThW400aS3WP01LqY4m/WTxgJTu25MTGWEkz+oURdlNwxB80GH6SMAR210dxs8YxGZL8vhBxSWbHtTdROV+AaMaXHTEcsGb4G9/r7gFkGbdGJTHz6Zbl8gfc/teKyo9Dyoalx1EO2WohMSACfdb93wccLwTNVa3Cqs83wkNyJTPzt0eRiIRR9Id7C92ZLoAY1lfZwNLgCa9H5EXaQ8+Nx+EeratI2Cnq5XD6CoiN+lFTdyVJX6OAD1PpuzFLEG2ftyFZouyrguzRBoYpRdil10JhjDsYcQZ6eRndiIXIEDm52M9eG0T2dB+stsAraqB3YWL7UQBWwlgO9JQmdKgZznuCFliIT5AZo5sevk74zaF/S5amquRk0KgJzquav72IhSgQ1mCm1wjXDRs3/x8Qj8AiMG8vozmAGo9peSWTAFgEK7Pug/7/DqLqBhkJqnBhHqCNEoF7I4c0OtsRXY0fWNDG3VTdOg+xdQOSuLtRQaJtkfbC6Sh+DHyhQiemRJxu7bWy/kfkjgGXNybe9wXc5dUCq1Ei+eTyUWOH9eNGAxJKMQvfmTNsjDn0w7HfodknA3xbCIzhZPms0fWk8SrIKXDNmOEB7Ck5iD3IUZkVOTQfHl3RJOKgC5/AzEaN71GetYptMmF5r/5x66zb3aueFSCb7Xp1gm6sz+5TiDDoQxxWe1BgJchxb8MHLH7BHvAG+kNK5nhQzEZhDMHEoVX+vJdrK76gO9exCi38Fq6jaQ1UbPdn16UAc8j05nqHP3U6YgX1E1yn0+A9ptG7nEHp0Z9JuR2RE9mm5XF4RKUoU2X2Lt+/HleEEXrnrekeUcDl58W0hGArfNufPd2o8I+JRVyDHnX7WceWIAbueKI5zEBdcfOLQxyWnkEEbf8B3fq27/ae6Oi0Ex1A/Iyhti+7lE+V9JGKXpJ47UJzKKMZCBI/baDpaG5wGj69ndAaarbansacm72dgphsLKHh0G5tTHKr//gcEWd70YggAAA==';
 
         const hash = copyTextArea.value.split('#')[1].trim();
 

test/blocks/caas-config/expectedConfigs/defaultConfig.js

@@ -26,6 +26,7 @@ const defaultConfig = {
     },
     detailsTextOption: 'default',
     setCardBorders: false,
+    showCardBadges: false,
     showFooterDivider: false,
     useOverlayLinks: false,
     banner: {

test/blocks/caas/utils.test.js

@@ -186,6 +186,7 @@ describe('getConfig', () => {
           titleHeadingLevel: 'h3',
         },
         setCardBorders: false,
+        showCardBadges: false,
         showFooterDivider: false,
         useOverlayLinks: false,
         additionalRequestParams: {},
@@ -448,6 +449,7 @@ describe('getConfig', () => {
           titleHeadingLevel: 'h3',
         },
         setCardBorders: false,
+        showCardBadges: false,
         showFooterDivider: false,
         useOverlayLinks: false,
         additionalRequestParams: {},
@@ -771,6 +773,7 @@ describe('getFloodgateCaasConfig', () => {
           titleHeadingLevel: 'h3',
         },
         setCardBorders: false,
+        showCardBadges: false,
         showFooterDivider: false,
         useOverlayLinks: false,
         additionalRequestParams: {},

test/blocks/global-navigation/gnav-promo.test.js

@@ -47,13 +47,4 @@ describe('Promo', () => {
     });
     promoMeta.remove();
   });
-
-  it('doesn\'t exist on mobile', async () => {
-    const promoMeta = toFragment`<meta name="gnav-promo-source" content="http://localhost:2000/fragments/correct-promo-fragment">`;
-    document.head.append(promoMeta);
-    const nav = await createFullGlobalNavigation({ viewport: 'mobile', hasPromo: true });
-    expect(nav.block.classList.contains('has-promo')).to.be.false;
-    const asideElem = nav.block.querySelector('.aside.promobar');
-    expect(asideElem).to.not.exist;
-  });
 });

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

@@ -397,26 +397,25 @@ describe('Merch Card with Offer Selection', () => {
     expect(document.querySelector('merch-quantity-select')).to.not.exist;
   });
 
-  it('should handle callout-text with h6 and em tags', async () => {
+  it('should handle callout-content with h6 and em tags', async () => {
     document.body.innerHTML = await readMockText('/test/blocks/merch-card/mocks/callout.html');
 
     const merchCards = document.querySelectorAll('.merch-card');
     const segmentCard = await init(merchCards[0]);
     await delay();
 
     // Assert
-    const calloutSlot = segmentCard.querySelector('[slot="callout-text"]');
+    const calloutSlot = segmentCard.querySelector('[slot="callout-content"]');
     expect(calloutSlot).to.exist;
 
-    const calloutContentWrapper = calloutSlot.querySelector('.callout-content-wrapper-with-icon');
+    const calloutContentWrapper = calloutSlot.querySelector('div > div');
     expect(calloutContentWrapper).to.exist;
-    expect(calloutContentWrapper.classList.contains('callout-content-wrapper-with-icon')).to.be.true;
 
     const imgElement = calloutContentWrapper.querySelector('img.callout-icon');
     expect(imgElement).to.exist;
     expect(imgElement.title).to.equal('this is a dummy tooltip text');
 
-    const calloutContent = calloutContentWrapper.querySelector('div');
+    const calloutContent = calloutContentWrapper.querySelector('div > div');
     expect(calloutContent).to.exist;
     expect(calloutContent.textContent.trim()).to.equal('AI Assistant add-on available');