Merge branch 'main' into ebartholomew/aside-bg-image-fix

libs/blocks/featured-article/featured-article.css

@@ -53,7 +53,7 @@
 .featured-article-card-body h3 {
   font-size: var(--type-heading-l-size);
   color: var(--text-color);
-  line-height: var(--type-heading-l-lh);
+  line-height: var(--type-heading-base-lh);
   margin: 0;
   margin-bottom: 1rem;
   overflow: hidden;

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

@@ -34,6 +34,10 @@
   padding: 0;
 }
 
+.feds-footer-icons {
+  display: none;
+}
+
 /* Menu */
 .feds-footer-wrapper .feds-menu-headline {
   font-size: 14px;

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

@@ -77,6 +77,7 @@ class Footer {
       loadBaseStyles,
       this.decorateGrid,
       this.decorateProducts,
+      this.loadIcons,
       this.decorateRegionPicker,
       this.decorateSocial,
       this.decoratePrivacy,
@@ -143,6 +144,13 @@ class Footer {
     return this.elements.footerMenu;
   };
 
+  loadIcons = async () => {
+    const file = await fetch(`${base}/blocks/global-footer/icons.svg`);
+    const content = await file.text();
+    const elem = toFragment`<div class="feds-footer-icons">${content}</div>`;
+    this.footerEl.append(elem);
+  };
+
   decorateProducts = async () => {
     this.elements.featuredProducts = '';
 
@@ -195,7 +203,7 @@ class Footer {
         aria-haspopup="true"
         role="button">
         <svg xmlns="http://www.w3.org/2000/svg" class="feds-regionPicker-globe" focusable="false">
-          <use href="${base}/blocks/global-footer/icons.svg#globe" />
+          <use href="#footer-icon-globe" />
         </svg>
         ${regionPickerTextElem}
       </a>`;
@@ -255,7 +263,7 @@ class Footer {
       const iconElem = toFragment`<li class="feds-social-item">
           <a href="${link.href}#_dnb" class="feds-social-link" aria-label="${platform}">
             <svg xmlns="http://www.w3.org/2000/svg" class="feds-social-icon" alt="${platform} logo">
-              <use href="${base}/blocks/global-footer/icons.svg#${platform}" />
+              <use href="#footer-icon-${platform}" />
             </svg>
           </a>
         </li>`;
@@ -285,7 +293,7 @@ class Footer {
     // Add Ad Choices icon
     const adChoicesElem = privacyContent.querySelector('a[href*="#interest-based-ads"]');
     adChoicesElem?.prepend(toFragment`<svg xmlns="http://www.w3.org/2000/svg" class="feds-adChoices-icon" focusable="false">
-        <use href="${base}/blocks/global-footer/icons.svg#adchoices" />
+        <use href="#footer-icon-adchoices" />
       </svg>`);
 
     this.elements.legal = toFragment`<div class="feds-footer-legalWrapper"></div>`;

libs/blocks/global-navigation/base.css

@@ -68,6 +68,7 @@
   transform: rotateZ(45deg);
   transition: transform 0.1s ease;
   content: "";
+  box-sizing: content-box;
 }
 
 [dir = "rtl"] .feds-navLink--hoverCaret {
@@ -96,7 +97,7 @@
   .feds-navLink--hoverCaret {
     position: static;
   }
-  
+
   .feds-navLink--hoverCaret:after {
     position: static;
     margin-top: 0;

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

@@ -1,5 +1,5 @@
 import { getConfig } from '../../../../utils/utils.js';
-import { toFragment, getFedsPlaceholderConfig, trigger, closeAllDropdowns } from '../../utilities/utilities.js';
+import { toFragment, getFedsPlaceholderConfig, trigger, closeAllDropdowns, logErrorFor } from '../../utilities/utilities.js';
 import { replaceKeyArray } from '../../../../features/placeholders.js';
 
 const getLanguage = (ietfLocale) => {
@@ -54,7 +54,7 @@ class ProfileDropdown {
     this.sections = sections;
     this.openOnInit = openOnInit;
     this.localMenu = rawElem.querySelector('h5')?.parentElement;
-    this.init();
+    logErrorFor(this.init.bind(this), 'ProfileDropdown.init()');
   }
 
   async init() {
@@ -101,15 +101,15 @@ class ProfileDropdown {
     // historically we shrunk the font size and displayed the account name on two lines;
     // 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 
+    this.avatarElem = toFragment`<img
       class="feds-profile-img"
       src="${this.avatar}"
       tabindex="0"
       aria-label="${this.placeholders.profileAvatar}"
       data-url="${decorateProfileLink('account', `profile?lang=${lang}`)}"></img>`;
     return toFragment`
       <div id="feds-profile-menu" class="feds-profile-menu">
-        <a 
+        <a
           href="${decorateProfileLink('account', `?lang=${lang}`)}"
           class="feds-profile-header"
           daa-ll="${this.placeholders.viewAccount}"
@@ -172,11 +172,11 @@ class ProfileDropdown {
   }
 
   addEventListeners() {
-    this.buttonElem.addEventListener('click', () => trigger({ element: this.buttonElem }));
+    this.buttonElem.addEventListener('click', (e) => trigger({ element: this.buttonElem, event: e }));
     this.buttonElem.addEventListener('keydown', (e) => e.code === 'Escape' && closeAllDropdowns());
     this.dropdown.addEventListener('keydown', (e) => e.code === 'Escape' && closeAllDropdowns());
-    this.avatarElem.addEventListener('click', (event) => {
-      event.preventDefault();
+    this.avatarElem.addEventListener('click', (e) => {
+      e.preventDefault();
       window.location.assign(this.avatarElem.dataset?.url);
     });
   }

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

@@ -131,7 +131,8 @@
     top: 100%;
     left: 0;
     right: 0;
-    border-top: 1px solid var(--feds-borderColor--light);
+    /* Relative to nav, not trigger, ensure top border is visible */
+    margin-top: 1px;
     display: none;
     z-index: 1;
   }

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

@@ -3,6 +3,7 @@ import {
   getFedsPlaceholderConfig,
   trigger,
   closeAllDropdowns,
+  logErrorFor,
 } from '../../utilities/utilities.js';
 import { replaceKeyArray } from '../../../../features/placeholders.js';
 import { getConfig } from '../../../../utils/utils.js';
@@ -43,7 +44,7 @@ class Search {
       this.clearSearchForm();
     });
     observer.observe(this.trigger, { attributeFilter: ['aria-expanded'] });
-    this.init();
+    logErrorFor(this.init.bind(this), 'Search has failed loading');
   }
 
   async init() {

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

@@ -30,6 +30,7 @@ header.global-navigation {
   z-index: 10;
   background-color: var(--feds-background-nav--light);
   visibility: visible;
+  box-sizing: content-box;
 }
 
 .feds-topnav-wrapper {
@@ -94,7 +95,9 @@ header.global-navigation {
   flex-shrink: 0;
 }
 
-.feds-brand-image > * {
+.feds-brand-image picture,
+.feds-brand-image img,
+.feds-brand-image svg {
   width: 100%;
   display: block;
 }
@@ -298,11 +301,9 @@ header.global-navigation {
   display: none;
   right: 0;
   top: 100%;
-  border: 1px solid #e1e1e1;
-  border-radius: 0 0 4px 4px;
-  background: #fafafa;
+  background-color: var(--feds-background-popup--light);
   overflow: hidden;
-  box-shadow: 0 2px 6px -1px rgb(0 0 0 / 10%);
+  box-shadow: 0 3px 3px 0 rgb(0 0 0 / 20%);
   line-height: 1.4;
   white-space: nowrap;
   z-index: 1;
@@ -342,6 +343,7 @@ header.global-navigation {
 
   .feds-topnav-wrapper {
     border-bottom: 1px solid var(--feds-borderColor--light);
+    box-sizing: border-box;
   }
 
   .feds-nav-wrapper {
@@ -351,6 +353,7 @@ header.global-navigation {
     flex-grow: 1;
     height: unset;
     border-bottom: unset;
+    border-top: unset;
     justify-content: space-between;
     background-color: transparent;
   }
@@ -394,6 +397,8 @@ header.global-navigation {
     right: 0;
     justify-content: center;
     padding: 20px 0;
+    /* Relative to nav, not trigger, ensure top border is visible */
+    margin-top: 1px;
   }
 
   [dir = "rtl"] .feds-navItem--megaMenu .feds-popup {
@@ -500,6 +505,7 @@ header button.gnav-toggle {
 }
 
 header button.gnav-toggle::after {
+  color: var(--feds-color-link--light);
   content: "\2630";
   font-weight: 700;
 }
@@ -533,7 +539,7 @@ header .app-launcher button svg {
 
 header .app-launcher button:hover svg {
   opacity: 1;
-} 
+}
 
 header .app-launcher {
   display: none;