Sync main branch from pricefx-eds-qa, excluding fstab.yaml

pricefx · Jul 15, 2024 · e9d5931 · e9d5931
2 parents 2d76fcd + e21b553
commit e9d5931
Show file tree

Hide file tree

Showing 13 changed files with 24 additions and 14 deletions.
diff --git a/blocks/cards/cards.js b/blocks/cards/cards.js
@@ -12,7 +12,7 @@ function decorateCTA(cta, ctaTarget, isClickable) {
     }
     return cta.firstElementChild.firstElementChild;
   }
-  cta.innerHTML = `<p>${link.textContent.trim()}</p>`;
+  cta.innerHTML = `<p>${link?.textContent.trim()}</p>`;
   return cta;
 }
 

diff --git a/blocks/carousel/carousel.css b/blocks/carousel/carousel.css
@@ -9,6 +9,7 @@ main .carousel:has(.carousel[data-carousel-type='carousel-quote']) .carousel > p
   display: flex;
   justify-content: center;
   padding: 98px 0 98px 15px;
+  box-sizing: border-box;
 }
 
 .carousel[data-carousel-type='carousel-quote'] .carousel-content {

diff --git a/blocks/carousel/carousel.js b/blocks/carousel/carousel.js
@@ -7,7 +7,7 @@ const isCarouselQuoteDesktopBreakpoint = window.matchMedia('(min-width: 768px)')
 const setSlidesPosition = (slides, width, isCarouselImage) => {
   slides.forEach((slide, index) => {
     if (!isCarouselImage) {
-      slide.style.left = `${width * index}px`;
+      slide.style.left = `${(width + 5) * index}px`;
     } else {
       slide.style.left = `${(width + 20) * index}px`;
     }

diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css
@@ -159,7 +159,7 @@ footer .footer {
 }
 
 /* Responsive Styles */
-@media(width >= 768px) {
+@media(width >= 986px) {
   .footer-menu-wrapper {
     padding: 20px var(--spacing-small) 56px var(--spacing-small);;
   }

diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js
@@ -19,7 +19,7 @@ function createMenuLink(childMenu) {
  * @param {Element} navToggle The toggle that show/hide the mobile navigation
  */
 function toggleMobileNavAccordion(navToggle) {
-  if (window.innerWidth > 767) {
+  if (window.innerWidth > 985) {
     return;
   }
 
@@ -154,7 +154,7 @@ export default async function decorate(block) {
 
   // Resetting ADA attributes
   window.addEventListener('resize', () => {
-    if (window.matchMedia('(min-width:768px)').matches) {
+    if (window.matchMedia('(min-width:986px)').matches) {
       block.querySelectorAll('.footer-menu-title-mobile')?.forEach((ele) => {
         ele.setAttribute('aria-expanded', false);
         const navlist = ele.nextElementSibling;

diff --git a/blocks/header/header.css b/blocks/header/header.css
@@ -361,7 +361,7 @@ header nav {
 }
 
 .mobile-nav-list--expanded {
-  height: calc(100vh + 400px);
+  height: calc(100vh - 116px);
   overflow-y: scroll;
 }
 

diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css
@@ -61,6 +61,7 @@
 .hero .hero-right-container .hero-image-container img {
     aspect-ratio: 2 / 1;
     object-fit: cover;
+    width: 100%;
 }
 
 /* Hero Button */

diff --git a/blocks/hero/hero.js b/blocks/hero/hero.js
@@ -75,8 +75,8 @@ export default async function decorate(block) {
     const heroImageContainer = document.createElement('div');
     heroImageContainer.classList.add('hero-image-container');
     const heroImage = imageContainer;
-    if (heroImage !== undefined && window.matchMedia('(min-width:986px)').matches) {
-      if (heroImage?.querySelector('img') !== null) {
+    if (heroImage !== undefined) {
+      if (heroImage?.querySelector('img') !== null && window.matchMedia('(min-width:986px)').matches) {
         const imageUrl = heroImage?.querySelector('img').src;
         heroImageContainer.setAttribute('style', `background-image:url(${imageUrl})`);
       }

diff --git a/blocks/left-right-boxed/left-right-boxed.css b/blocks/left-right-boxed/left-right-boxed.css
@@ -47,6 +47,12 @@
     .left-right-boxed .boxed-right-container .embed .embed-play-title {
         text-align: center;
     }
+
+    .left-right-boxed .boxed-right-container .boxed-image-container img {
+        aspect-ratio: 2 / 1;
+        object-fit: cover;
+        width: 100%;
+    }
 
     @media (width <= 985px) {
         .left-right-boxed .boxed-right-container .boxed-image-container {

diff --git a/blocks/left-right-boxed/left-right-boxed.js b/blocks/left-right-boxed/left-right-boxed.js
@@ -52,8 +52,8 @@ export default async function decorate(block) {
     const boxedImageContainer = document.createElement('div');
     boxedImageContainer.classList.add('boxed-image-container');
     const boxedImage = imageContainer;
-    if (boxedImage !== undefined && window.matchMedia('(min-width:986px)').matches) {
-      if (boxedImage?.querySelector('img') !== null) {
+    if (boxedImage !== undefined) {
+      if (boxedImage?.querySelector('img') !== null && window.matchMedia('(min-width:986px)').matches) {
         boxedImageContainer.setAttribute('style', `background-image:url(${boxedImage.querySelector('img').src})`);
       }
       boxedImageContainer.append(boxedImage);

diff --git a/blocks/related-articles/related-articles.css b/blocks/related-articles/related-articles.css
@@ -186,6 +186,7 @@
     line-height: calc((28 / 16) * 1rem);
     margin: 0 0 var(--spacing-micro);
     text-transform: capitalize;
+    text-align: left;
 }
 
 .blog-articles .article-info {
@@ -194,6 +195,7 @@
     line-height: calc((28 / 16) * 1rem);
     padding: 0 var(--spacing-small);
     margin-top: auto;
+    text-align: left;
 }
 
 .blog-articles .article-author-link {

diff --git a/blocks/search/search.js b/blocks/search/search.js
@@ -255,7 +255,7 @@ export default async function decorate(block) {
     count.innerHTML = currentSearchJSON.length;
 
     const searchTerm = block.querySelector('.search-term');
-    searchTerm.innerHTML = `'${query}'`;
+    searchTerm.textContent = `'${query}'`;
 
     if (currentSearchJSON.length === 0) {
       resultWrapper.innerHTML = `<h4 class="search-no-results">${noResultTitle.textContent.trim()}</h4>`;

diff --git a/blocks/tabbed-filter/tabbed-filter.js b/blocks/tabbed-filter/tabbed-filter.js
@@ -71,7 +71,7 @@ const renderFilterOptions = (filterOptions) => {
   let markup = '';
   filterOptions.forEach((option) => {
     markup += `
-      <option value="${option}">${option}</option>
+      <option value="${option}">${option.toUpperCase()}</option>
     `;
   });
   return markup;
@@ -224,7 +224,7 @@ export default async function decorate(block) {
     industriesFilterContainer.append(industriesFilter);
 
     industriesFilter.innerHTML = `
-    <option value="all-industries" selected>${filterIndustryAllLabel.textContent.trim()}</option>
+    <option value="all-industries" selected>${filterIndustryAllLabel.textContent.trim().toUpperCase()}</option>
     ${renderFilterOptions(industriesFilterOptions)}
   `;
   }
@@ -247,7 +247,7 @@ export default async function decorate(block) {
     regionsFilterContainer.append(regionsFilter);
 
     regionsFilter.innerHTML = `
-      <option value="all-regions" selected>${filterRegionAllLabel.textContent.trim()}</option>
+      <option value="all-regions" selected>${filterRegionAllLabel.textContent.trim().toUpperCase()}</option>
       ${renderFilterOptions(regionsFilterOptions)}
     `;
   }