[Release] Stage to Main (#2898)

.github/workflows/run-nala.yml

@@ -1,4 +1,4 @@
-name: Nala Tests
+name: Nala Tests (Consuming Apps)
 
 on:
   pull_request:
@@ -8,11 +8,12 @@ jobs:
   action:
     name: Running E2E & IT
     runs-on: ubuntu-latest
+    if: contains(join(github.event.pull_request.labels.*.name, ' '), 'run-nala-on-')
 
     steps:
       - name: Check out repository
         uses: actions/checkout@v4
-      - name: Run Nala
+      - name: Run Nala Tests (Consuming Apps) 
         uses: adobecom/nala@main # Change if doing dev work
         env:
           labels: ${{ join(github.event.pull_request.labels.*.name, ' ') }}

libs/blocks/caas/utils.js

@@ -738,8 +738,10 @@ export const getConfig = async (originalState, strs = {}) => {
       lastViewedSession: state.lastViewedSession || '',
     },
     customCard: ['card', `return \`${state.customCard}\``],
+    linkTransformer: pageConfig.caasLinkTransformer || {},
     headers: caasRequestHeaders,
   };
+
   return config;
 };
 

libs/blocks/editorial-card/editorial-card.js

@@ -57,14 +57,15 @@ const decorateForeground = async (el, rows) => {
   });
 };
 
-const decorateBgRow = (el, background) => {
-  decorateBlockBg(el, background);
+const decorateBgRow = (el, background, remove = false) => {
   const rows = background.querySelectorAll(':scope > div');
   const bgRowsEmpty = [...rows].every((row) => row.innerHTML.trim() === '');
-  if (bgRowsEmpty) {
+  if (bgRowsEmpty || remove) {
     el.classList.add('no-bg');
     background.remove();
+    return;
   }
+  decorateBlockBg(el, background);
 };
 
 function handleClickableCard(el) {
@@ -80,38 +81,50 @@ function handleClickableCard(el) {
 
 const init = async (el) => {
   el.classList.add('con-block');
-  if (el.className.includes('open')) {
-    el.classList.add('no-border', 'l-rounded-corners-image', 'static-links-copy');
-  }
-  if (el.className.includes('rounded-corners')) {
-    loadStyle(`${base}/styles/rounded-corners.css`);
-  }
+  const hasOpenClass = el.className.includes('open');
+  if (hasOpenClass) el.classList.add('no-border', 'l-rounded-corners-image', 'static-links-copy');
+  if (el.className.includes('rounded-corners')) loadStyle(`${base}/styles/rounded-corners.css`);
   if (![...el.classList].some((c) => c.endsWith('-lockup'))) el.classList.add('m-lockup');
   let rows = el.querySelectorAll(':scope > div');
   const [head, middle, ...tail] = rows;
   if (rows.length === 4) el.classList.add('equal-height');
   if (rows.length >= 1) {
-    const count = rows.length >= 3 ? 'three-plus' : rows.length;
+    const count = rows.length >= 4 ? 'four-plus' : rows.length;
     switch (count) {
-      case 'three-plus':
-        // 3+ rows (0:bg, 1:media, 2:copy, ...3:static, last:card-footer)
-        decorateBgRow(el, head);
+      case 'four-plus':
+        // 4+ rows (0:bg, 1:media, 2:copy, ...3:static, last:card-footer)
+        // 4+ rows.open (0:bg[removed], 1:media, 2:copy, ...3:static, last:card-footer)
+        decorateBgRow(el, head, hasOpenClass);
         rows = tail;
-        await decorateForeground(el, rows);
         decorateMedia(el, middle);
+        await decorateForeground(el, rows);
+        break;
+      case 3:
+        // 3 rows (0:bg, 1:media, last:copy)
+        // 3 rows.open (0:media, 1:copy, last:card-footer)
+        if (hasOpenClass) {
+          el.classList.add('no-bg');
+          rows = [middle, tail[0]];
+          decorateMedia(el, head);
+        } else {
+          rows = tail;
+          decorateBgRow(el, head);
+          decorateMedia(el, middle);
+        }
+        await decorateForeground(el, rows);
         break;
       case 2:
         // 2 rows (0:media, 1:copy)
-        rows = middle;
-        await decorateForeground(el, [rows]);
+        rows = [middle];
         decorateMedia(el, head);
         el.classList.add('no-bg');
+        await decorateForeground(el, rows);
         break;
       case 1:
         // 1 row  (0:copy)
-        rows = head;
-        await decorateForeground(el, [rows]);
+        rows = [head];
         el.classList.add('no-bg', 'no-media');
+        await decorateForeground(el, rows);
         break;
       default:
     }

libs/blocks/hero-marquee/hero-marquee.css

@@ -17,7 +17,6 @@
   align-items: center;
 }
 
-.hero-marquee.no-min-height { min-height: unset; }
 .hero-marquee.s-min-height { min-height: var(--s-min-height); }
 .hero-marquee.l-min-height { min-height: var(--l-min-height); }
 

libs/blocks/hero-marquee/hero-marquee.js

@@ -164,16 +164,14 @@ function loadBreakpointThemes() {
 export default async function init(el) {
   el.classList.add('con-block');
   let rows = el.querySelectorAll(':scope > div');
-  if (rows.length <= 1) return;
-  const [head, ...tail] = rows;
-  rows = tail;
-  if (head.textContent.trim() === '') {
-    head.remove();
-  } else {
+  if (rows.length > 1 && rows[0].textContent !== '') {
     el.classList.add('has-bg');
+    const [head, ...tail] = rows;
     handleObjectFit(head);
     decorateBlockBg(el, head, { useHandleFocalpoint: true });
+    rows = tail;
   }
+
   // get first row that's not a keyword key/value row
   const mainRowIndex = rows.findIndex((row) => {
     const firstColText = row.children[0].textContent.toLowerCase().trim();

libs/blocks/quiz-entry/quiz-entry.css

@@ -1,6 +1,6 @@
 .quiz-entry {
   --quiz-button-disabled-bg: #757575;
-  --quiz-button-disabled-text: #FFF6F6;
+  --quiz-button-disabled-text: #FFF;
 }
 
 .quiz-container {
@@ -25,12 +25,13 @@
   font-size: var(--type-heading-xl-size);
   line-height: var(--type-heading-xl-lh);
   font-weight: var(--type-heading-all-weight);
-  margin-bottom: 8px;
+  margin: 0 0 8px;
 }
 
 .quiz-subtitle {
   font-size: var(--type-heading-l-size);
   line-height: var(--type-heading-l-lh);
+  margin: 0;
 }
 
 .quiz-question-container {

libs/blocks/quiz-entry/quiz-entry.js

@@ -345,8 +345,8 @@ const App = ({
 
   return html`<div class="quiz-container">
     <div class="quiz-heading-container">
-      <div id="question" class="quiz-title">${quizLists.strings[selectedQuestion.questions].heading}</div>
-      <div class="quiz-subtitle">${quizLists.strings[selectedQuestion.questions]['sub-head']}</div>
+      <h2 id="question" class="quiz-title">${quizLists.strings[selectedQuestion.questions].heading}</h2>
+      <p class="quiz-subtitle">${quizLists.strings[selectedQuestion.questions]['sub-head']}</p>
     </div>
     <div class="quiz-question-container">
       <div class="quiz-input-container">

libs/blocks/quiz-entry/quizoption.js

@@ -1,5 +1,6 @@
 import { html, useState, useEffect } from '../../deps/htm-preact.js';
 import { getSwipeDistance, getSwipeDirection } from '../carousel/carousel.js';
+import { createTag } from '../../utils/utils.js';
 
 export const OptionCard = ({
   text, title, image, icon, iconTablet, iconDesktop, options,
@@ -51,15 +52,30 @@ export const GetQuizOption = ({
 
   const isRTL = document.documentElement.getAttribute('dir') === 'rtl';
 
+  /**
+ * Resets focus to the top of the quiz-entry options for accessibility.
+ * To ensure that the next keyboard tab after carousel navigation
+ * will focus the first avaiable quiz option.
+ */
+  const resetFocus = () => {
+    const quiz = document.querySelector('.quiz-options-container');
+    const focuser = createTag('button', { tabindex: 0 });
+    quiz.prepend(focuser);
+    focuser.focus();
+    quiz.removeChild(focuser);
+  };
+
   const next = async () => {
     if (index + visibleCount < options.data.length) {
       setIndex(index + 1);
+      resetFocus();
     }
   };
 
   const prev = () => {
     if (index > 0) {
       setIndex(index - 1);
+      resetFocus();
     }
   };
 
@@ -144,24 +160,24 @@ export const GetQuizOption = ({
 
   return html`
   <div class="quiz-options-container" role="group" aria-labelledby="question" tabindex="0" onkeydown=${handleKey}>
-  ${index > 0 && html`<button onClick=${prev} class="carousel-arrow arrow-prev ${isRTL ? 'rtl' : ''}" aria-label="Previous"></button>`}
-  <div class="carousel-slides ${index > 0 ? 'align-right' : ''}">
-    ${options.data.slice(index + 1, index + visibleCount).map((option, idx) => html`
-      <${OptionCard} 
-        key=${idx}
-        text=${option.text}
-        title=${option.title} 
-        icon=${getOptionsValue(option.options, 'icon')}
-        iconTablet=${getOptionsValue(option.options, 'icon-tablet')}
-        iconDesktop=${getOptionsValue(option.options, 'icon-desktop')}
-        image=${getOptionsValue(option.options, 'image')}
-        background=${background}
-        options=${option.options}
-        selected=${selectedCards[option.options] ? 'selected' : ''}
-        disabled=${(countSelectedCards > 0 && !selectedCards[option.options] && countSelectedCards >= maxSelections) || mlInputUsed ? 'disabled' : ''}
-        onClick=${onOptionClick(option)}
-        />`)}
-  </div>
-  ${(index + visibleCount < options.data.length) && html`<button onClick=${next} class="carousel-arrow arrow-next ${isRTL ? 'rtl' : ''}" aria-label="Next"></button>`}
+    ${index > 0 && html`<button onClick=${prev} class="carousel-arrow arrow-prev ${isRTL ? 'rtl' : ''}" aria-label="Previous"></button>`}
+    <div class="carousel-slides ${index > 0 ? 'align-right' : ''}">
+      ${options.data.slice(index + 1, index + visibleCount).map((option, idx) => html`
+        <${OptionCard} 
+          key=${idx}
+          text=${option.text}
+          title=${option.title} 
+          icon=${getOptionsValue(option.options, 'icon')}
+          iconTablet=${getOptionsValue(option.options, 'icon-tablet')}
+          iconDesktop=${getOptionsValue(option.options, 'icon-desktop')}
+          image=${getOptionsValue(option.options, 'image')}
+          background=${background}
+          options=${option.options}
+          selected=${selectedCards[option.options] ? 'selected' : ''}
+          disabled=${(countSelectedCards > 0 && !selectedCards[option.options] && countSelectedCards >= maxSelections) || mlInputUsed ? 'disabled' : ''}
+          onClick=${onOptionClick(option)}
+          />`)}
+    </div>
+    ${(index + visibleCount < options.data.length) && html`<button onClick=${next} class="carousel-arrow arrow-next ${isRTL ? 'rtl' : ''}" aria-label="Next"></button>`}
   </div>`;
 };

libs/features/georoutingv2/georoutingv2.css

@@ -21,10 +21,6 @@
   z-index: -1;
 }
 
-.dialog-modal.locale-modal-v2 .georouting-bg svg {
-  width: 100%;
-}
-
 .dialog-modal.locale-modal-v2 .picker {
   position: fixed;
   margin-top: 2px;
@@ -140,19 +136,6 @@
   padding: initial;
 }
 
-@media (min-width: 480px) {
-  .dialog-modal.locale-modal-v2 {
-    background-image: url('/libs/features/georoutingv2/img/GeoModal_BG_Map_Tablet.png');
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-  }
-
-  .dialog-modal.locale-modal-v2 .georouting-bg {
-    display: none;
-  }
-}
-
 @media (min-width: 600px) {
   .dialog-modal.locale-modal-v2 .georouting-wrapper {
     padding: 56px 56px 40px;
@@ -168,9 +151,3 @@
     max-width: 720px;
   }
 }
-
-@media (min-width: 1200px) {
-  .dialog-modal.locale-modal-v2 {
-    background-image: url('/libs/features/georoutingv2/img/GeoModal_BG_Map_Desktop.png');
-  }
-}

libs/features/georoutingv2/georoutingv2.js

@@ -228,13 +228,7 @@ function buildContent(currentPage, locale, geoData, locales) {
 async function getDetails(currentPage, localeMatches, geoData) {
   const availableLocales = await getAvailableLocales(localeMatches);
   if (!availableLocales.length) return null;
-  const { innerWidth } = window;
-  let svgDiv = null;
-  if (innerWidth < 480) {
-    const { default: getMobileBg } = await import('./getMobileBg.js');
-    svgDiv = createTag('div', { class: 'georouting-bg' }, getMobileBg());
-  }
-  const georoutingWrapper = createTag('div', { class: 'georouting-wrapper fragment', style: 'display:none;' }, svgDiv);
+  const georoutingWrapper = createTag('div', { class: 'georouting-wrapper fragment', style: 'display:none;' });
   currentPage.url = window.location.hash ? document.location.href : '#';
   if (availableLocales.length === 1) {
     const content = buildContent(currentPage, availableLocales[0], geoData);

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

@@ -204,6 +204,7 @@ const defaultConfig = {
     enabled: '',
     lastViewedSession: '',
   },
+  linkTransformer: {},
   customCard: ['card', 'return ``'],
 };
 

test/blocks/caas/utils.test.js

@@ -397,6 +397,7 @@ describe('getConfig', () => {
       },
       language: 'en',
       country: 'us',
+      linkTransformer: {},
       customCard: [
         'card',
         'return ``',
@@ -670,6 +671,7 @@ describe('getConfig', () => {
         enabled: true,
         lastViewedSession: '',
       },
+      linkTransformer: {},
     });
   });
 });
@@ -995,6 +997,7 @@ describe('getFloodgateCaasConfig', () => {
         enabled: true,
         lastViewedSession: '',
       },
+      linkTransformer: {},
     });
   });
 });