[Release] Stage to Main (#3531)

adobecom · Jan 27, 2025 · 36827bd · 36827bd
2 parents f3ab5ac + 6cb26a3
commit 36827bd
Show file tree

Hide file tree

Showing 45 changed files with 4,740 additions and 635 deletions.
diff --git a/.github/workflows/helpers.js b/.github/workflows/helpers.js
@@ -164,6 +164,7 @@ const getReviews = ({ pr, github, owner, repo }) =>
       owner,
       repo,
       pull_number: pr.number,
+      per_page: 100,
     })
     .then(({ data }) => {
       pr.reviews = data;

diff --git a/libs/blocks/global-navigation/features/breadcrumbs/breadcrumbs.js b/libs/blocks/global-navigation/features/breadcrumbs/breadcrumbs.js
@@ -57,9 +57,11 @@ const createBreadcrumbs = (element) => {
     if (hiddenEntries.includes(li.innerText?.toLowerCase().trim())) li.remove();
   });
 
+  const noTransform = element.classList.contains('no-transform') ? ' no-transform' : '';
+
   const breadcrumbs = toFragment`
     <div class="feds-breadcrumbs-wrapper">
-      <nav class="feds-breadcrumbs" aria-label="Breadcrumb">${ul}</nav>
+      <nav class="feds-breadcrumbs${noTransform}" aria-label="Breadcrumb">${ul}</nav>
     </div>
   `;
   ul.querySelector('li:last-of-type')?.setAttribute('aria-current', 'page');

diff --git a/libs/blocks/global-navigation/features/profile/dropdown.js b/libs/blocks/global-navigation/features/profile/dropdown.js
@@ -102,6 +102,7 @@ class ProfileDropdown {
     // the email had some special logic as well;
     // for MVP, we took a simpler approach ("Some very long name, very l...")
     this.avatarElem = toFragment`<img
+      data-cs-mask
       class="feds-profile-img"
       src="${this.avatar}"
       tabindex="0"
@@ -117,8 +118,8 @@ class ProfileDropdown {
         >
           ${this.avatarElem}
           <div class="feds-profile-details">
-            <p class="feds-profile-name">${this.profileData.displayName}</p>
-            <p class="feds-profile-email">${this.decorateEmail(this.profileData.email)}</p>
+            <p data-cs-mask class="feds-profile-name">${this.profileData.displayName}</p>
+            <p data-cs-mask class="feds-profile-email">${this.decorateEmail(this.profileData.email)}</p>
             <p class="feds-profile-account">${this.placeholders.viewAccount}</p>
           </div>
         </a>

diff --git a/libs/blocks/global-navigation/global-navigation.css b/libs/blocks/global-navigation/global-navigation.css
@@ -378,6 +378,11 @@ header.global-navigation {
   text-transform: capitalize;
 }
 
+.feds-breadcrumbs.no-transform a,
+.feds-breadcrumbs.no-transform [aria-current] {
+  text-transform: none;
+}
+
 .feds-breadcrumbs a {
   display: block;
   color: var(--feds-color-link-breadcrumbs);

diff --git a/libs/blocks/global-navigation/global-navigation.js b/libs/blocks/global-navigation/global-navigation.js
@@ -218,14 +218,15 @@ const decorateProfileTrigger = async ({ avatar }) => {
 
   const buttonElem = toFragment`
     <button
+      data-cs-mask
       class="feds-profile-button"
       aria-expanded="false"
       aria-controls="feds-profile-menu"
       aria-label="${label}"
       daa-ll="Account"
       aria-haspopup="true"
     >
-      <img class="feds-profile-img" src="${avatar}" alt="${profileAvatar}"></img>
+      <img data-cs-mask class="feds-profile-img" src="${avatar}" alt="${profileAvatar}"></img>
     </button>
   `;
 
@@ -301,7 +302,7 @@ class Gnav {
     this.blocks = {
       profile: {
         rawElem: this.content.querySelector('.profile'),
-        decoratedElem: toFragment`<div class="feds-profile"></div>`,
+        decoratedElem: toFragment`<div data-cs-mask class="feds-profile"></div>`,
       },
       search: { config: { icon: CONFIG.icons.search } },
       breadcrumbs: { wrapper: '' },

diff --git a/libs/blocks/mmm/mmm.js b/libs/blocks/mmm/mmm.js
@@ -3,6 +3,7 @@ import { fetchData, DATA_TYPE } from '../../features/personalization/personaliza
 import { getMepPopup, API_URLS } from '../../features/personalization/preview.js';
 
 const SEARCH_CRITERIA_CHANGE_EVENT = 'mmm-search-change';
+let cachedSearchCriteria = '';
 export const DEBOUNCE_TIME = 800;
 
 async function toggleDrawer(target, dd, pageId) {
@@ -319,7 +320,11 @@ async function createPageList(el, search) {
 
 function subscribeToSearchCriteriaChanges() {
   document.addEventListener(SEARCH_CRITERIA_CHANGE_EVENT, (el) => {
-    createPageList(document.querySelector('.mmm').parentNode, el.detail);
+    const searchCriteria = JSON.stringify(el?.detail || {});
+    if (cachedSearchCriteria !== searchCriteria) {
+      createPageList(document.querySelector('.mmm').parentNode, el.detail);
+      cachedSearchCriteria = searchCriteria;
+    }
   });
 }
 

diff --git a/libs/blocks/rollout/rollout.js b/libs/blocks/rollout/rollout.js
@@ -94,7 +94,7 @@ const createRadioButton = (value, checked = false) => {
  * @param {HTMLElement} el - Container element
  * @param {string} previewUrl - Preview URL
  */
-const buildUi = async (el, previewUrl) => {
+const buildUi = async (el, previewUrl, overrideBranch) => {
   try {
     const modal = createTag('div', { class: 'modal' });
     const radioGroup = createTag('div', { class: 'radio-group' });
@@ -113,13 +113,18 @@ const buildUi = async (el, previewUrl) => {
       const selectedEnv = document.querySelector('input[name="deployTarget"]:checked')?.value;
       if (!selectedEnv) return;
 
+      let branch = urlData.urlBranch;
+      if (overrideBranch) {
+        branch = selectedEnv === 'stage' ? `${overrideBranch}-stage` : overrideBranch;
+      }
+
       const locV3ConfigUrl = new URL(
         'tools/locui-create',
-        `https://${urlData.urlBranch}--${urlData.urlRepo}--${urlData.urlOwner}.hlx.page`,
+        `https://${branch}--${urlData.urlRepo}--${urlData.urlOwner}.hlx.page`,
       );
 
       const params = {
-        milolibs: 'milostudio-stage',
+        milolibs: selectedEnv === 'stage' ? 'milostudio-stage' : 'milostudio',
         ref: urlData.urlBranch,
         repo: urlData.urlRepo,
         owner: urlData.urlOwner,
@@ -154,7 +159,7 @@ const buildUi = async (el, previewUrl) => {
  * @param {HTMLElement} el - Container element
  * @param {string} previewUrl - Preview URL
  */
-const setup = async (el, previewUrl) => {
+const setup = async (el, previewUrl, overrideBranch) => {
   if (!el || !previewUrl) return;
 
   const data = setUrlData(previewUrl, true);
@@ -163,7 +168,7 @@ const setup = async (el, previewUrl) => {
     return;
   }
   el.innerHTML = '';
-  await buildUi(el, previewUrl);
+  await buildUi(el, previewUrl, overrideBranch);
 };
 
 /**
@@ -174,13 +179,12 @@ const setup = async (el, previewUrl) => {
  */
 export default async function init(el, search = window.location.search) {
   if (!el) return false;
-
   try {
     const params = new URLSearchParams(search);
+    const overrideBranch = params?.get('overrideBranch')?.trim();
     const referrer = params?.get('referrer')?.trim();
     const host = params?.get('host')?.trim();
     const project = params?.get('project')?.trim();
-
     if (!referrer || !host || !project) {
       el.innerHTML = '<div class="modal">Missing required parameters</div>';
       return false;
@@ -192,7 +196,7 @@ export default async function init(el, search = window.location.search) {
     }
 
     Object.assign(urlData, { referrer, host, project });
-    await setup(el, referrer);
+    await setup(el, referrer, overrideBranch);
     return true;
   } catch (err) {
     el.innerHTML = '<div class="modal">Initialization failed</div>';

diff --git a/libs/blocks/tabs/tabs.css b/libs/blocks/tabs/tabs.css
@@ -49,22 +49,42 @@
   padding: var(--spacing-xxl) 0;
 }
 
+.tabs.xxl-spacing .paddle {
+  top: var(--spacing-xxl);
+}
+
 .tabs.xl-spacing {
   padding: var(--spacing-xl) 0;
 }
 
+.tabs.xl-spacing .paddle {
+  top: var(--spacing-xl);
+}
+
 .tabs.l-spacing {
   padding: var(--spacing-l) 0;
 }
 
+.tabs.l-spacing .paddle {
+  top: var(--spacing-l);
+}
+
 .tabs.s-spacing {
   padding: var(--spacing-s) 0;
 }
 
+.tabs.s-spacing .paddle {
+  top: var(--spacing-s);
+}
+
 .tabs.xs-spacing {
   padding: var(--spacing-xs) 0;
 }
 
+.tabs.xs-spacing .paddle {
+  top: var(--spacing-xs);
+}
+
 .tabs div[role="tablist"] {
   position: relative;
   box-shadow: 0 -1px 0 inset var(--tabs-border-color);
@@ -161,12 +181,12 @@
   z-index: 1;
 }
 
-.tabs .tab-paddles .paddle {
+.tabs .paddle {
   position: absolute;
   cursor: pointer;
   width: 32px;
   height: 48px;
-  bottom: 0;
+  top: 0;
   background: var(--tabs-active-bg-color);
   border: 0;
   border-bottom: 1px solid var(--tabs-border-color);
@@ -177,7 +197,7 @@
 
 .tabs.radio div[role="tablist"],
 .tabs.radio div[role="tablist"] button,
-.tabs.radio .tab-paddles .paddle {
+.tabs.radio .paddle {
   box-shadow: none;
   background: none;
   border: none;
@@ -303,28 +323,27 @@
   height: 24px;
 }
 
-.tabs .tab-paddles {
-  position: relative;
+.tabs .paddle {
   z-index: 3;
 }
 
-.tabs .tab-paddles .paddle:disabled {
+.tabs .paddle:disabled {
   cursor: default;
   box-shadow: none;
   background: var(--tabs-list-bg-gradient);
 }
 
-.tabs .tab-paddles .paddle-left {
+.tabs .paddle-left {
   box-shadow: 4px 0 4px -2px var(--tabs-paddle-bs-color);
   left: 0;
 }
 
-.tabs .tab-paddles .paddle-right {
+.tabs .paddle-right {
   box-shadow: -4px 0 4px -2px var(--tabs-paddle-bs-color);
   right: 0;
 }
 
-.tabs .tab-paddles .paddle svg {
+.tabs .paddle svg {
   opacity: 1;
   width: 8px;
   height: 14px;
@@ -333,19 +352,19 @@
   color: var(--tabs-text-color);
 }
 
-.tabs .tab-paddles .paddle-left svg {
+.tabs .paddle-left svg {
   transform: rotate(180deg);
 }
 
-.tabs .tab-paddles .paddle:hover svg {
+.tabs .paddle:hover svg {
   color: var(--tabs-active-text-color);
 }
 
-.tabs .tab-paddles .paddle:disabled svg {
+.tabs .paddle:disabled svg {
   opacity: 0;
 }
 
-.tabs[class*='pill'] .tab-paddles .paddle {
+.tabs[class*='pill'] .paddle {
   background: unset;
   border: none;
 }
@@ -358,7 +377,7 @@
   border: none;
 }
 
-.tabs.radio .tab-paddles {
+.tabs.radio .paddle {
   display: none;
 }
 
@@ -417,7 +436,7 @@
 .tabs-background-transparent .tabs,
 .tabs-background-transparent .tabs div[role="tablist"],
 .tabs-background-transparent .tabs div[role="tablist"] button[aria-selected="true"],
-.tabs-background-transparent .tabs .tab-paddles .paddle {
+.tabs-background-transparent .tabs .tabList .paddle {
   background: transparent;
 }
 
@@ -485,11 +504,11 @@
     padding-bottom: 18px;
   }
 
-  .tabs .tab-paddles .paddle {
+  .tabs .paddle {
     height: 62px;
   }
 
-  .tabs .tab-paddles .paddle svg {
+  .tabs .paddle svg {
     top: 24px;
   }
 }

diff --git a/libs/blocks/tabs/tabs.js b/libs/blocks/tabs/tabs.js
@@ -2,7 +2,6 @@
  * tabs - consonant v6
  * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role
  */
-import { debounce } from '../../utils/action.js';
 import { createTag, MILO_EVENTS, getConfig } from '../../utils/utils.js';
 import { processTrackingLabels } from '../../martech/attributes.js';
 
@@ -88,8 +87,9 @@ function configTabs(config, rootElem) {
 function initTabs(elm, config, rootElem) {
   const tabs = elm.querySelectorAll('[role="tab"]');
   const tabLists = elm.querySelectorAll('[role="tablist"]');
+  let tabFocus = 0;
+
   tabLists.forEach((tabList) => {
-    let tabFocus = 0;
     tabList.addEventListener('keydown', (e) => {
       if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
         if (e.key === 'ArrowRight') {
@@ -124,9 +124,7 @@ function nextTab(current, i, arr) {
   return (previous && isTabInTabListView(previous) && !isTabInTabListView(current));
 }
 
-function initPaddles(tabList, tabPaddles) {
-  const left = tabPaddles.firstElementChild;
-  const right = tabPaddles.lastElementChild;
+function initPaddles(tabList, left, right) {
   const tabListItems = tabList.querySelectorAll('[role="tab"]');
   const tabListItemsArray = [...tabListItems];
   const firstTab = tabListItemsArray[0];
@@ -153,13 +151,6 @@ function initPaddles(tabList, tabPaddles) {
     }
   });
 
-  tabList.addEventListener('scroll', debounce(() => {
-    tabPaddles.setAttribute(
-      'aria-valuenow',
-      ((tabList.scrollLeft / (tabList.scrollWidth - tabList.clientWidth)) * 100).toFixed(0),
-    );
-  }, 500));
-
   const options = {
     root: tabList,
     rootMargin: '0px',
@@ -277,12 +268,11 @@ const init = (block) => {
   }
 
   // Tab Paddles
-  const tabPaddles = createTag('div', { class: 'tab-paddles', role: 'scrollbar', 'aria-valuenow': 0 });
   const paddleLeft = createTag('button', { class: 'paddle paddle-left', disabled: '', 'aria-hidden': true, 'aria-label': 'Scroll tabs to left' }, PADDLE);
   const paddleRight = createTag('button', { class: 'paddle paddle-right', disabled: '', 'aria-hidden': true, 'aria-label': 'Scroll tabs to right' }, PADDLE);
-  tabPaddles.append(paddleLeft, paddleRight);
-  tabList.after(tabPaddles);
-  initPaddles(tabList, tabPaddles);
+  tabList.insertAdjacentElement('afterend', paddleRight);
+  block.prepend(paddleLeft);
+  initPaddles(tabList, paddleLeft, paddleRight);
 
   // Tab Sections
   const allSections = Array.from(rootElem.querySelectorAll('div.section'));

diff --git a/libs/deps/mas/commerce.js b/libs/deps/mas/commerce.js
diff --git a/libs/deps/mas/mas.js b/libs/deps/mas/mas.js