[Release] Stage to Main

CODEOWNERS

@@ -41,7 +41,6 @@
 /libs/blocks/ost/ @adobecom/tacocat
 /libs/blocks/pdf-vewer/ @meganthecoder @JasonHowellSlavin @Brandon32
 /libs/blocks/quiz/ @colloyd @sabyamon @fullcolorcoder @JackySun9
-/libs/blocks/quiz-entry/ @colloyd @fullcolorcoder @JackySun9
 /libs/blocks/quiz-marquee/ @ryanmparrish
 /libs/blocks/quiz-results/ @colloyd @sabyamon @fullcolorcoder @JackySun9
 /libs/blocks/quote/ @ryanmparrish

libs/blocks/accordion/accordion.css

@@ -2,28 +2,28 @@
   padding: var(--spacing-m) 0;
 }
 
-div.accordion {
+div.accordion:not(.descr-list) {
   display: none;
 }
 
-dl.accordion {
+.descr-list.accordion {
   margin: 0 auto;
   max-width: var(--grid-container-width);
   border-bottom: 1px solid var(--color-gray-500);
 }
 
-.accordion-container.no-borders dl.accordion {
+.accordion-container.no-borders .descr-list.accordion {
   border: none;
 }
 
-.accordion dd {
+.accordion .descr-details {
   margin: 0;
   padding: var(--spacing-xs);
   font-size: var(--type-body-s-size);
   line-height: var(--type-body-s-lh);
 }
 
-.accordion dt button {
+.accordion .descr-term button {
   align-items: center;
   background: none;
   border: 1px solid var(--color-gray-500);
@@ -41,16 +41,16 @@ dl.accordion {
   -webkit-text-size-adjust: 100%;
 }
 
-.accordion dt button:hover {
+.accordion .descr-term button:hover {
   cursor: pointer;
   color: var(--color-black);
 }
 
-.accordion-container.no-borders .accordion dt button {
+.accordion-container.no-borders .accordion .descr-term button {
   border: none;
 }
 
-.accordion dt .accordion-heading {
+.accordion .descr-term .accordion-heading {
   margin: 0;
 }
 
@@ -91,7 +91,7 @@ html[dir="rtl"] .accordion-icon {
   height: 2px;
 }
 
-.accordion dt button::before {
+.accordion .descr-term button::before {
   content: "";
   display: block;
   position: absolute;
@@ -102,72 +102,72 @@ html[dir="rtl"] .accordion-icon {
   background-color: transparent;
 }
 
-.accordion dt button[aria-expanded="true"]::before {
+.accordion .descr-term button[aria-expanded="true"]::before {
   background-color: var(--link-color-dark);
 }
 
-.quiet .accordion dt button[aria-expanded="true"]::before {
+.quiet .accordion .descr-term button[aria-expanded="true"]::before {
   display: none;
 }
 
-.accordion dt button[aria-expanded="true"] .accordion-icon::before,
-.accordion dt button[aria-expanded="true"] .accordion-icon::after {
+.accordion .descr-term button[aria-expanded="true"] .accordion-icon::before,
+.accordion .descr-term button[aria-expanded="true"] .accordion-icon::after {
   transform: rotate(90deg);
 }
 
-.accordion dt button[aria-expanded="true"] .accordion-icon::after {
+.accordion .descr-term button[aria-expanded="true"] .accordion-icon::after {
   opacity: 0;
 }
 
-.accordion dt button:hover .accordion-icon::before,
-.accordion dt button:hover .accordion-icon::after {
+.accordion .descr-term button:hover .accordion-icon::before,
+.accordion .descr-term button:hover .accordion-icon::after {
   background: var(--color-black);
 }
 
-.accordion dt button:focus,
-.accordion dt button:hover,
-.accordion dt button[aria-expanded="true"] {
+.accordion .descr-term button:focus,
+.accordion .descr-term button:hover,
+.accordion .descr-term button[aria-expanded="true"] {
   background: #00000005;
 }
 
-.accordion dd p:first-child {
+.accordion .descr-details p:first-child {
   margin-top: 0;
 }
 
 /* dark */
-.dark .accordion dt button,
-.darkest .accordion dt button {
+.dark .accordion .descr-term button,
+.darkest .accordion .descr-term button {
   color: #fff;
 }
 
-.dark dl.accordion {
+.dark .descr-list.accordion {
   border-bottom-color: var(--color-gray-600);
 }
 
-.dark .accordion dt button {
+.dark .accordion .descr-term button {
   border-top-color: var(--color-gray-600);
 }
 
-.dark .accordion dt button:focus,
-.dark .accordion dt button:hover,
-.dark .accordion dt button[aria-expanded="true"] {
+.dark .accordion .descr-term button:focus,
+.dark .accordion .descr-term button:hover,
+.dark .accordion .descr-term button[aria-expanded="true"] {
   background: #00000060;
 }
 
-.dark .accordion dt button:hover .accordion-icon::before,
-.dark .accordion dt button:hover .accordion-icon::after {
+.dark .accordion .descr-term button:hover .accordion-icon::before,
+.dark .accordion .descr-term button:hover .accordion-icon::after {
   background: var(--color-gray-100);
 }
 
-html[dir="rtl"] .accordion dt button {
+html[dir="rtl"] .accordion .descr-term button {
   padding: var(--spacing-s) var(--spacing-xs) var(--spacing-s) var(--spacing-m);
 }
 
-html[dir="rtl"] .accordion dt button::before {
+html[dir="rtl"] .accordion .descr-term button::before {
   right: 0;
 }
 
-.section[class*='-up'] dl.accordion {
+.section[class*='-up'] .descr-list.accordion {
   max-width: unset;
 }
 

libs/blocks/accordion/accordion.js

@@ -64,7 +64,7 @@ function handleClick(el, dd, num) {
 }
 
 function defalutOpen(accordion) {
-  handleClick(accordion.querySelector('.accordion-trigger'), accordion.querySelector('dd'), 1, 0);
+  handleClick(accordion.querySelector('.accordion-trigger'), accordion.querySelector('.descr-details'), 1, 0);
 }
 
 function createItem(accordion, id, heading, num, edit) {
@@ -87,10 +87,10 @@ function createItem(accordion, id, heading, num, edit) {
 
   const para = panel?.querySelector('p');
   const text = para ? para.textContent : panel?.textContent;
-  const dtAttrs = hTag ? {} : { role: 'heading', 'aria-level': 3 };
+  const dtAttrs = hTag ? { class: 'descr-term' } : { role: 'heading', 'aria-level': 3, class: 'descr-term' };
   const dtHtml = hTag ? createTag(hTag.tagName, { class: 'accordion-heading' }, button) : button;
-  const dt = createTag('dt', dtAttrs, dtHtml);
-  const dd = createTag('dd', { 'aria-labelledby': triggerId, id: panelId, hidden: true }, panel);
+  const dt = createTag('div', dtAttrs, dtHtml);
+  const dd = createTag('div', { 'aria-labelledby': triggerId, id: panelId, hidden: true, class: 'descr-details' }, panel);
   const dm = createTag('div', { class: 'media-p' });
 
   if (edit) {
@@ -118,7 +118,7 @@ function populateMedia(accordion, id, num, collection) {
 
 export default function init(el) {
   const id = getUniqueId(el);
-  const accordion = createTag('dl', { class: 'accordion', id: `accordion-${id}`, role: 'presentation' });
+  const accordion = createTag('div', { class: 'descr-list accordion', id: `accordion-${id}`, role: 'presentation' });
   const accordionMedia = createTag('div', { class: 'accordion-media', id: `accordion-media-${id}` });
   const isSeo = el.classList.contains('seo');
   const isEditorial = el.classList.contains('editorial');

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

@@ -76,6 +76,7 @@ const defaultOptions = {
     product: 'Product Card',
     'text-card': 'Text Card',
     'icon-card': 'Icon Card',
+    'news-card': 'News Card',
     'custom-card': 'Custom Card',
   },
   collectionBtnStyle: {

libs/blocks/chart/chart.css

@@ -7,7 +7,7 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    align-items: flex-start;
+    align-items: stretch;
     gap: 16px;
     margin: 0 auto;
 }

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

@@ -179,7 +179,7 @@ class Footer {
 
     if (placeholder && placeholder.length) {
       this.elements.featuredProducts
-        .append(toFragment`<span class="feds-featuredProducts-label">${placeholder}</span>`);
+        .append(toFragment`<span class="feds-featuredProducts-label" role="heading" aria-level="2">${placeholder}</span>`);
     }
 
     featuredProductsContent.querySelectorAll('.link-group').forEach((linkGroup) => {

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

@@ -406,7 +406,6 @@ header.global-navigation {
 
 .feds-utilities .unav-comp-app-switcher-popover, /* App Switcher */
 .feds-utilities .spectrum-Dialog-content, /* Notifications */
-.feds-utilities .unav-comp-external-profile, /* Profile */
 .feds-utilities .unav-comp-help-popover, /* Help */
 .feds-utilities .unc-overlay-container { /* Tooltips */
   transform: translate3d(0,0,0); /* Fix Safari issues w/ position: sticky */

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

@@ -78,17 +78,32 @@ export const CONFIG = {
         name: 'profile',
         attributes: {
           isSignUpRequired: false,
+          messageEventListener: (event) => {
+            const { name, payload, executeDefaultAction } = event.detail;
+            if (!name || name !== 'System' || !payload || typeof executeDefaultAction !== 'function') return;
+            switch (payload.subType) {
+              case 'AppInitiated':
+                window.adobeProfile?.getUserProfile()
+                  .then((data) => { setUserProfile(data); })
+                  .catch(() => { setUserProfile({}); });
+                break;
+              case 'SignOut':
+                executeDefaultAction();
+                break;
+              case 'ProfileSwitch':
+                Promise.resolve(executeDefaultAction()).then((profile) => {
+                  if (profile) window.location.reload();
+                });
+                break;
+              default:
+                break;
+            }
+          },
           componentLoaderConfig: {
             config: {
               enableLocalSection: true,
+              enableProfileSwitcher: true,
               miniAppContext: {
-                onMessage: (name, payload) => {
-                  if (name === 'System' && payload.subType === 'AppInitiated') {
-                    window.adobeProfile?.getUserProfile()
-                      .then((data) => { setUserProfile(data); })
-                      .catch(() => { setUserProfile({}); });
-                  }
-                },
                 logger: {
                   trace: () => {},
                   debug: () => {},
@@ -129,6 +144,7 @@ export const CONFIG = {
           callbacks: getConfig().jarvis?.callbacks,
         },
       },
+      cart: { name: 'cart' },
     },
   },
 };
@@ -262,7 +278,7 @@ const closeOnClickOutside = (e, isLocalNav, navWrapper) => {
   const newMobileNav = getMetadata('mobile-gnav-v2') !== 'false';
   if (!isDesktop.matches && !newMobileNav) return;
 
-  const openElemSelector = `${selectors.globalNav} [aria-expanded = "true"], ${selectors.localNav} [aria-expanded = "true"]`;
+  const openElemSelector = `${selectors.globalNav} [aria-expanded = "true"]:not(.universal-nav-container *), ${selectors.localNav} [aria-expanded = "true"]`;
   const isClickedElemOpen = [...document.querySelectorAll(openElemSelector)]
     .find((openItem) => openItem.parentElement.contains(e.target));
 
@@ -645,7 +661,7 @@ class Gnav {
       return 'linux';
     };
 
-    const unavVersion = new URLSearchParams(window.location.search).get('unavVersion') || '1.3';
+    const unavVersion = new URLSearchParams(window.location.search).get('unavVersion') || '1.4';
     await Promise.all([
       loadScript(`https://${environment}.adobeccstatic.com/unav/${unavVersion}/UniversalNav.js`),
       loadStyles(`https://${environment}.adobeccstatic.com/unav/${unavVersion}/UniversalNav.css`, true),
@@ -745,14 +761,15 @@ class Gnav {
       },
       children: getChildren(),
       isSectionDividerRequired: getConfig()?.unav?.showSectionDivider,
+      showTrayExperience: (!isDesktop.matches),
     });
 
     // Exposing UNAV config for consumers
     CONFIG.universalNav.universalNavConfig = getConfiguration();
     await window.UniversalNav(CONFIG.universalNav.universalNavConfig);
     this.decorateAppPrompt({ getAnchorState: () => window.UniversalNav.getComponent?.('app-switcher') });
     isDesktop.addEventListener('change', () => {
-      window.UniversalNav.reload(CONFIG.universalNav.universalNavConfig);
+      window.UniversalNav.reload(getConfiguration());
     });
   };
 

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

@@ -43,7 +43,15 @@ const fail = (el, err = '') => {
 
 /** Parse and prepare cards */
 async function getCardsRoot(config, html) {
-  const cards = `<div>${html}</div>`;
+  let cards = `<div>${html}</div>`;
+  const { mep, placeholders } = config;
+  if (mep?.commands?.length) {
+    const mepRoot = createTag('div', {}, cards);
+    const { handleCommands, replacePlaceholders } = await import('../../features/personalization/personalization.js');
+    handleCommands(mep?.commands, mepRoot, false, true);
+    if (placeholders) mepRoot.innerHTML = replacePlaceholders(mepRoot.innerHTML, placeholders);
+    cards = mepRoot.innerHTML;
+  }
   const fragment = document.createRange().createContextualFragment(
     await replaceText(cards, config),
   );

libs/blocks/modal/modal.css

@@ -238,6 +238,10 @@
     width: fit-content;
   }
 
+  .dialog-modal .embed-vimeo {
+    min-width: 80vw;
+  }
+
   .dialog-modal.tall-video {
     --modal-width-var: 50vw;