[Release] Stage to Main

.eslintrc-code-compatibility.js

@@ -14,6 +14,7 @@ module.exports = {
   ],
   ignorePatterns: [
     '/libs/deps/*',
+    '/libs/navigation/dist/*',
     '/tools/loc/*',
   ],
 };

.eslintrc.js

@@ -62,6 +62,7 @@ module.exports = {
     '/libs/features/mas/*',
     '/tools/loc/*',
     '/libs/features/spectrum-web-components/*',
+    '/libs/navigation/dist/*',
   ],
   plugins: [
     'chai-friendly',

.github/workflows/merge-to-stage.js

@@ -20,19 +20,20 @@ const LABELS = {
   zeroImpact: 'zero-impact',
 };
 const TEAM_MENTIONS = [
-  '@adobecom/miq-sot',
   '@adobecom/bacom-sot',
-  '@adobecom/homepage-sot',
   '@adobecom/creative-cloud-sot',
   '@adobecom/document-cloud-sot',
+  '@adobecom/express-sot',
+  '@adobecom/homepage-sot',
+  '@adobecom/miq-sot',
 ];
 const SLACK = {
   merge: ({ html_url, number, title, prefix = '' }) => `:merged: PR merged to stage: ${prefix} <${html_url}|${number}: ${title}>.`,
   openedSyncPr: ({ html_url, number }) => `:fast_forward: Created <${html_url}|Stage to Main PR ${number}>`,
 };
 
-let github; 
-let owner; 
+let github;
+let owner;
 let repo;
 
 let body = `

.github/workflows/release-standalone-feds.yml

@@ -0,0 +1,55 @@
+name: Create a Release for Standalone Feds GlobalNav and Footer
+on:
+  workflow_dispatch:
+    inputs:
+      version:
+        description: 'Version'
+        required: true
+        type: string
+
+permissions:
+  contents: write
+
+jobs:
+  release-feds:
+    name: Release Standalone Feds
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [20.x]
+    defaults:
+      run:
+        working-directory: ./libs/navigation
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+      with:
+        fetch-depth: 2
+
+    - name: Set up Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ matrix.node-version }}
+
+    - name: Install dependencies
+      run: npm install
+
+    - name: Build Files
+      run: node ./build.mjs
+
+    - name: Generate tarball
+      run: npm pack
+
+    - name: Create Release
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      run: |
+          gh release create "feds-standalone-v${{ inputs.version }}" \
+              --repo="$GITHUB_REPOSITORY" \
+              --title="@adobecom/standalone-feds v${{ inputs.version }} Release" \
+              --generate-notes
+
+    - name: Upload Files to Release
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      run: gh release upload "feds-standalone-v${{ inputs.version }}" "adobecom-standalone-feds-${{ inputs.version }}.tgz"

.gitignore

@@ -11,3 +11,4 @@ logs/*
 test-html-results/
 test-results/
 test-a11y-results/
+libs/navigation/dist/

libs/blocks/adobetv/adobetv.css

@@ -1,4 +1,5 @@
 @import url('../../styles/iframe.css');
+@import url('../video/video.css');
 
 a[href*='.mp4'].hide-video {
   visibility: hidden !important;

libs/blocks/aside/aside.css

@@ -298,6 +298,7 @@
 }
 
 .aside.rounded-corners .foreground .image img,
+.aside.rounded-corners .foreground .image:not(:has(.video-container)) .pause-play-wrapper,
 .aside.rounded-corners .foreground .image video {
   border-radius: 16px;
 }

libs/blocks/aside/aside.js

@@ -197,8 +197,8 @@ function decorateLayout(el) {
   }
   const foregroundImage = foreground.querySelector(':scope > div:not(.text) img')?.closest('div');
   const bgImage = el.querySelector(':scope > div:not(.text):not(.foreground) img')?.closest('div');
-  const foregroundMedia = foreground.querySelector(':scope > div:not(.text) video, :scope > div:not(.text) a:is([href*=".mp4"], [href*="tv.adobe.com"]), :scope > div:not(.text) iframe[src*="tv.adobe.com"]')?.closest('div');
-
+  const foregroundMedia = foreground.querySelector(':scope > div:not(.text) :is(.video-container, video, a[href*=".mp4"], a[href*="tv.adobe.com"]), :scope > div:not(.text) iframe[src*="tv.adobe.com"]')
+    ?.closest('div:not(.video-container)');
   const bgMedia = el.querySelector(':scope > div:not(.text):not(.foreground) video, :scope > div:not(.text):not(.foreground) a:is([href*=".mp4"], [href*="tv.adobe.com"])')?.closest('div');
   const image = foregroundImage ?? bgImage;
   const asideMedia = foregroundMedia ?? bgMedia ?? image;

libs/blocks/brick/brick.css

@@ -98,6 +98,10 @@
   margin: 0;
 }
 
+.brick .foreground div > .video-container {
+  margin: 0;
+}
+
 .brick .foreground div > * {
   margin-top: var(--spacing-xs);
 }
@@ -342,6 +346,11 @@
     position: absolute;
   }
 
+  .brick.split.row .foreground .brick-media .video-container img,
+  .brick.split.row .foreground .brick-media .video-container video {
+    width: 100%;
+  }
+
   .brick .foreground .brick-media video,
   .brick.split.row .foreground .brick-media video {
     object-fit: fill;

libs/blocks/carousel/carousel.css

@@ -397,7 +397,7 @@ html[dir="rtl"] .carousel-slides .section.carousel-slide {
   overflow: hidden;
 }
 
-.carousel .carousel-slide > div p > video {
+.carousel .carousel-slide > div p :is(.video-holder, video) {
   width: 100%;
   height: auto;
 }

libs/blocks/carousel/carousel.js

@@ -168,7 +168,7 @@ function moveSlides(event, carouselElements, jumpToIndex) {
   referenceSlide.classList.remove('reference-slide');
   referenceSlide.style.order = null;
   activeSlide.classList.remove('active');
-  activeSlide.querySelectorAll('a').forEach((focusableElement) => { focusableElement.setAttribute('tabindex', -1); });
+  activeSlide.querySelectorAll('a, video').forEach((focusableElement) => focusableElement.setAttribute('tabindex', -1));
   activeSlideIndicator.classList.remove('active');
   activeSlideIndicator.setAttribute('tabindex', -1);
 
@@ -230,10 +230,12 @@ function moveSlides(event, carouselElements, jumpToIndex) {
       if (index < show) {
         tabIndex = 0;
       }
-      slide.querySelectorAll('a').forEach((focusableElement) => { focusableElement.setAttribute('tabindex', tabIndex); });
+      slide.querySelectorAll('a,:not(.video-container, .pause-play-wrapper) > video')
+        .forEach((focusableElement) => { focusableElement.setAttribute('tabindex', tabIndex); });
     });
   } else {
-    activeSlide.querySelectorAll('a').forEach((focusableElement) => { focusableElement.setAttribute('tabindex', 0); });
+    activeSlide.querySelectorAll('a,:not(.video-container, .pause-play-wrapper) > video')
+      .forEach((focusableElement) => { focusableElement.setAttribute('tabindex', 0); });
   }
   activeSlideIndicator.classList.add('active');
   activeSlideIndicator.setAttribute('tabindex', 0);

libs/blocks/figure/figure.js

@@ -1,4 +1,4 @@
-import { applyHoverPlay, decorateAnchorVideo } from '../../utils/decorate.js';
+import { applyHoverPlay, decorateAnchorVideo, applyAccessibilityEvents, decoratePausePlayWrapper, isVideoAccessible } from '../../utils/decorate.js';
 import { createTag } from '../../utils/utils.js';
 
 function buildCaption(pEl) {
@@ -31,7 +31,11 @@ function decorateVideo(clone, figEl) {
       );
     }
     applyHoverPlay(videoTag);
-    figEl.prepend(videoTag);
+    if (!videoTag.controls && isVideoAccessible(anchorTag)) {
+      applyAccessibilityEvents(videoTag);
+      decoratePausePlayWrapper(videoTag, 'autoplay');
+    }
+    figEl.prepend(clone.querySelector('.video-container, .pause-play-wrapper, video'));
   }
 }
 
@@ -68,7 +72,7 @@ export function buildFigure(blockEl) {
       const link = clone.querySelector('a');
       if (link) {
         const img = figEl.querySelector('picture') || figEl.querySelector('video');
-        if (img) {
+        if (img && !link.classList.contains('pause-play-wrapper')) {
           // wrap picture or video in A tag
           link.textContent = '';
           link.append(img);

libs/blocks/global-footer/global-footer.css

@@ -252,6 +252,20 @@
   height: 12px;
 }
 
+@media (min-width: 600px) {
+  dialog.feds-dialog {
+    max-width: 80vw;
+    width: fit-content;
+  }
+}
+
+@media (min-width: 1200px) {
+  dialog.feds-dialog {
+    width: 1200px;
+    max-width: calc((100% - 6px) - 2em);
+  }
+}
+
 @media (min-width: 900px) {
   /* If there is too much content, float it on multiple rows */
   .feds-footer-wrapper .feds-menu-content {

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

@@ -4,12 +4,11 @@ import {
   decorateLinks,
   getMetadata,
   getConfig,
-  loadBlock,
   localizeLink,
+  loadStyle,
 } from '../../utils/utils.js';
 
 import {
-  getFedsPlaceholderConfig,
   getExperienceName,
   getAnalyticsValue,
   loadDecorateMenu,
@@ -23,7 +22,7 @@ import {
   isDarkMode,
 } from '../global-navigation/utilities/utilities.js';
 
-import { getFederatedUrl } from '../../utils/federated.js';
+import { getFederatedUrl, getFedsPlaceholderConfig } from '../../utils/federated.js';
 
 import { replaceKey } from '../../features/placeholders.js';
 
@@ -218,6 +217,8 @@ class Footer {
         </svg>
         ${regionPickerTextElem}
       </a>`;
+    regionPickerElem.dataset.modalPath = `${url.pathname}#_inline`;
+    regionPickerElem.dataset.modalHash = url.hash;
     const regionPickerWrapperClass = 'feds-regionPicker-wrapper';
     this.elements.regionPicker = toFragment`<div class="${regionPickerWrapperClass}">
         ${regionPickerElem}
@@ -231,24 +232,48 @@ class Footer {
       // Hash -> region selector opens a modal
       decorateAutoBlock(regionPickerElem); // add modal-specific attributes
       // TODO remove logs after finding the root cause for the region picker 404s -> MWPW-143627
+      regionPickerElem.href = url.hash;
       if (regionPickerElem.classList[0] !== 'modal') {
         lanaLog({
           message: `Modal block class missing from region picker pre loading the block; locale: ${locale}; regionPickerElem: ${regionPickerElem.outerHTML}`,
           tags: 'errorType=warn,module=global-footer',
         });
       }
-      await loadBlock(regionPickerElem); // load modal logic and styles
+      loadStyle(`${base}/blocks/modal/modal.css`);
+      const { default: initModal } = await import('../modal/modal.js');
+      const modal = await initModal(regionPickerElem);
+
+      const loadRegionNav = async () => {
+        const block = document.querySelector('.region-nav');
+        if (block && getConfig().standaloneGnav) {
+          // on standalone the region-nav will fail to load automatically through
+          // the modal calling fragment.js. In that case we will have data-failed=true
+          // and we should manually load region nav
+          // If that's not the case then we're not a standalone gnav
+          // and we mustn't load region-nav twice.
+          if (block.getAttribute('data-failed') !== 'true') return;
+          block.classList.add('hide');
+          loadStyle(`${base}/blocks/region-nav/region-nav.css`);
+          const { default: initRegionNav } = await import('../region-nav/region-nav.js');
+          initRegionNav(block);
+          // decoratePlaceholders(block, getConfig());
+          block.classList.remove('hide');
+        }
+      };
+
+      if (modal) await loadRegionNav(); // just in case the modal is already open
+
       if (regionPickerElem.classList[0] !== 'modal') {
         lanaLog({
           message: `Modal block class missing from region picker post loading the block; locale: ${locale}; regionPickerElem: ${regionPickerElem.outerHTML}`,
           tags: 'errorType=warn,module=global-footer',
         });
       }
-      // 'decorateAutoBlock' logic replaces class name entirely, need to add it back
-      regionPickerElem.classList.add(regionPickerClass);
       regionPickerElem.addEventListener('click', () => {
         if (!isRegionPickerExpanded()) {
           regionPickerElem.setAttribute('aria-expanded', 'true');
+          // wait for the modal to load before we load the region nav
+          window.addEventListener('milo:modal:loaded', loadRegionNav, { once: true });
         }
       });
       // Set aria-expanded to false when region modal is closed
@@ -263,7 +288,8 @@ class Footer {
       regionSelector.href = localizeLink(regionSelector.href);
       decorateAutoBlock(regionSelector); // add fragment-specific class(es)
       this.elements.regionPicker.append(regionSelector); // add fragment after regionPickerElem
-      await loadBlock(regionSelector); // load fragment and replace original link
+      const { default: initFragment } = await import('../fragment/fragment.js');
+      await initFragment(regionSelector); // load fragment and replace original link
       // Update aria-expanded on click
       regionPickerElem.addEventListener('click', (e) => {
         e.preventDefault();
@@ -272,14 +298,15 @@ class Footer {
       });
       // Close region picker dropdown on outside click
       document.addEventListener('click', (e) => {
+        e.preventDefault();
         if (isRegionPickerExpanded()
           && !e.target.closest(`.${regionPickerWrapperClass}`)) {
           regionPickerElem.setAttribute('aria-expanded', false);
         }
       });
     }
 
-    return this.regionPicker;
+    return this.elements.regionPicker;
   };
 
   decorateSocial = () => {

libs/blocks/global-navigation/base.css

@@ -118,8 +118,8 @@
   align-items: center;
 }
 
-header.global-navigation {
-  visibility: visible;
+header.global-navigation.ready {
+  visibility: visible !important;
 }
 
 /* Desktop styles */

libs/blocks/global-navigation/features/profile/dropdown.js

@@ -1,6 +1,7 @@
 import { getConfig } from '../../../../utils/utils.js';
-import { toFragment, getFedsPlaceholderConfig, trigger, closeAllDropdowns, logErrorFor } from '../../utilities/utilities.js';
+import { toFragment, trigger, closeAllDropdowns, logErrorFor } from '../../utilities/utilities.js';
 import { replaceKeyArray } from '../../../../features/placeholders.js';
+import { getFedsPlaceholderConfig } from '../../../../utils/federated.js';
 
 const getLanguage = (ietfLocale) => {
   if (!ietfLocale.length) return 'en';

libs/blocks/global-navigation/features/search/gnav-search.js

@@ -1,6 +1,5 @@
 import {
   toFragment,
-  getFedsPlaceholderConfig,
   isDesktop,
   setCurtainState,
   trigger,
@@ -10,6 +9,7 @@ import {
 import { replaceKeyArray } from '../../../../features/placeholders.js';
 import { getConfig } from '../../../../utils/utils.js';
 import { debounce } from '../../../../utils/action.js';
+import { getFedsPlaceholderConfig } from '../../../../utils/federated.js';
 
 const CONFIG = {
   suggestions: {