[Release] Stage to Main

.github/workflows/run-lint.yaml

@@ -20,7 +20,7 @@ jobs:
         run: npm ci
 
       - name: Run eslint on changed files
-        uses: tj-actions/eslint-changed-files@v20
+        uses: tj-actions/eslint-changed-files@v25
         with:
           config_path: ".eslintrc.js"
           # ignore_path: "/path/to/.eslintignore"

.github/workflows/run-tests.yaml

@@ -23,14 +23,11 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
 
-    - name: Install XVFB
-      run: sudo apt-get install xvfb
-
     - name: Install dependencies
       run: npm install
 
     - name: Run the tests
-      run: xvfb-run -a npm test
+      run: npm test
 
     - name: Upload coverage to Codecov
       uses: codecov/codecov-action@v4

CODEOWNERS

@@ -42,6 +42,7 @@
 /libs/blocks/merch-card-collection/ @adobecom/tacocat
 /libs/blocks/merch-offers/ @adobecom/tacocat
 /libs/blocks/mnemonic-list/ @adobecom/tacocat
+/libs/blocks/notification/ @elan-tbx @Sartxi @ryanmparrish
 /libs/blocks/ost/ @adobecom/tacocat
 /libs/blocks/pdf-vewer/ @meganthecoder @JasonHowellSlavin @Brandon32
 /libs/blocks/quiz/ @colloyd @sabyamon @fullcolorcoder @JackySun9

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

@@ -60,7 +60,7 @@ const caasFilesLoaded = loadCaasFiles();
 const ConfiguratorContext = createContext();
 
 const defaultOptions = {
-  accessibilityLevel: {
+  cardTitleAccessibilityLevel: {
     2: '2',
     3: '3',
     4: '4',
@@ -365,7 +365,7 @@ const UiPanel = () => html`
   <${Input} label="Show total card count at top" prop="showTotalResults" type="checkbox" />
   <${Input} label="Hide date for on-demand content" prop="hideDateInterval" type="checkbox" />
   <${Select} label="Card Style" prop="cardStyle" options=${defaultOptions.cardStyle} />
-  <${Select} options=${defaultOptions.accessibilityLevel} prop="accessibilityLevel" label="Card Accessibility Title Level" />
+  <${Select} options=${defaultOptions.cardTitleAccessibilityLevel} prop="cardTitleAccessibilityLevel" label="Card Accessibility Title Level" />
   <${Select} label="Layout" prop="container" options=${defaultOptions.container} />
   <${Select} label="Layout Type" prop="layoutType" options=${defaultOptions.layoutType} />
   <${Select} label="Grid Gap (Gutter)" prop="gutter" options=${defaultOptions.gutter} />

libs/blocks/global-footer/global-footer.js

@@ -286,13 +286,15 @@ class Footer {
 
     const socialElem = toFragment`<ul class="feds-social" daa-lh="Social"></ul>`;
 
+    const sanitizeLink = (link) => link.replace('#_blank', '').replace('#_dnb', '');
+
     CONFIG.socialPlatforms.forEach((platform, index) => {
       const link = socialBlock.querySelector(`a[href*="${platform}"]`);
       if (!link) return;
 
       const iconElem = toFragment`<li class="feds-social-item">
           <a
-            href="${link.href}"
+            href="${sanitizeLink(link.href)}"
             class="feds-social-link"
             aria-label="${platform}"
             daa-ll="${getAnalyticsValue(platform, index + 1)}"

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

@@ -255,15 +255,17 @@ const parseContent = async (el, merchCard) => {
 };
 
 const getBadgeStyle = (badgeMetadata) => {
-  const badgeStyleRegex = /^#[0-9a-fA-F]+, #[0-9a-fA-F]+$/;
+  const badgeStyleRegex = /^#[0-9a-fA-F]+, #[0-9a-fA-F]+(, #[0-9a-fA-F]+)?$/;
   if (!badgeStyleRegex.test(badgeMetadata[0]?.innerText)) return null;
-  const style = badgeMetadata[0].innerText;
-  const badgeBackgroundColor = style.split(',')[0].trim();
-  const badgeColor = style.split(',')[1].trim();
+  const style = badgeMetadata[0].innerText.split(',').map((s) => s.trim());
+  if (style.length < 2) return null;
+  const badgeBackgroundColor = style[0];
+  const badgeColor = style[1];
+  const borderColor = style[2] !== 'none' ? style[2] : null;
   const badgeWrapper = badgeMetadata[0].parentNode;
   const badgeText = badgeMetadata[1].innerText;
   badgeWrapper.remove();
-  return { badgeBackgroundColor, badgeColor, badgeText };
+  return { badgeBackgroundColor, badgeColor, badgeText, borderColor };
 };
 
 const getActionMenuContent = (el) => {
@@ -454,7 +456,11 @@ export default async function init(el) {
         );
         merchCard.setAttribute('badge-color', badge.badgeColor);
         merchCard.setAttribute('badge-text', badge.badgeText);
+        if (badge.borderColor) merchCard.setAttribute('border-color', badge.borderColor);
         merchCard.classList.add('badge-card');
+      } else if (badgeMetadata.children.length === 1) {
+        const borderColor = badgeMetadata.children[0].innerText.trim();
+        if (borderColor.startsWith('#')) merchCard.setAttribute('border-color', borderColor);
       }
     }
   }

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

@@ -13,8 +13,18 @@ async function getKey(product) {
   return keyMatch[0]?.key;
 }
 
+async function getECID() {
+  let ecid = null;
+  if (window.alloy) {
+    await window.alloy('getIdentity').then((data) => {
+      ecid = data?.identity?.ECID;
+    }).catch((err) => window.lana.log(`Error fetching ECID: ${err}`, { tags: 'errorType=error,module=mobile-app-banner' }));
+  }
+  return ecid;
+}
+
 /* eslint-disable */
-function branchInit(key) {
+function branchInit(key, ecidVal) {
   let initValue = false;
   function initBranch() {
     if (initValue) {
@@ -48,8 +58,16 @@ function branchInit(key) {
       0
     );
     const privacyConsent = window.adobePrivacy?.hasUserProvidedConsent();
+    const isAndroid = navigator.userAgent.includes('Android');
+
+    const cookieGrp = window.adobePrivacy?.activeCookieGroups();
+    const performanceCookieConsent = cookieGrp.includes('C0002');
+    const advertisingCookieConsent = cookieGrp.includes('C0004');
+
+    if (performanceCookieConsent && advertisingCookieConsent && isAndroid) branch.setBranchViewData({ data: { ecid: ecidVal }});
     branch.init(key, { tracking_disabled: !privacyConsent });
   }
+
   ['adobePrivacy:PrivacyConsent', 'adobePrivacy:PrivacyReject', 'adobePrivacy:PrivacyCustom']
     .forEach((event) => {
       window.addEventListener(event, initBranch);
@@ -63,5 +81,7 @@ export default async function init(el) {
   const classListArray = Array.from(el.classList);
   const product = classListArray.find((token) => token.startsWith('product-')).split('-')[1];
   const key = await getKey(product);
-  if (key) branchInit(key);
+  if (!key) return;
+  const ecid = await getECID();
+  branchInit(key, ecid);
 }

libs/blocks/modal/modal.js

@@ -13,6 +13,7 @@ const CLOSE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="2
 
 let isDelayedModal = false;
 let prevHash = '';
+const dialogLoadingSet = new Set();
 
 export function findDetails(hash, el) {
   const id = hash.replace('#', '');
@@ -113,6 +114,7 @@ export async function getModal(details, custom) {
   if (!(details?.path || custom)) return null;
   const { id } = details || custom;
 
+  dialogLoadingSet.add(id);
   const dialog = createTag('div', { class: 'dialog-modal', id });
   const loadedEvent = new Event('milo:modal:loaded');
 
@@ -180,6 +182,7 @@ export async function getModal(details, custom) {
 
   dialog.append(close);
   document.body.append(dialog);
+  dialogLoadingSet.delete(id);
   firstFocusable.focus({ preventScroll: true, ...focusVisible });
   window.dispatchEvent(loadedEvent);
 
@@ -246,6 +249,7 @@ export function delayedModal(el) {
 export default function init(el) {
   const { modalHash } = el.dataset;
   if (delayedModal(el) || window.location.hash !== modalHash || document.querySelector(`div.dialog-modal${modalHash}`)) return null;
+  if (dialogLoadingSet.has(modalHash?.replace('#', ''))) return null; // prevent duplicate modal loading
   const details = findDetails(window.location.hash, el);
   return details ? getModal(details) : null;
 }