Merge branch 'hlxsites:main' into main

Netcentric · Nov 6, 2023 · cfba36f · cfba36f
2 parents 48d128b + a49a590
commit cfba36f
Show file tree

Hide file tree

Showing 10 changed files with 164 additions and 69 deletions.
diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js
@@ -1,5 +1,5 @@
-import { readBlockConfig, decorateIcons } from '../../scripts/lib-franklin.js';
-import { createElement } from '../../scripts/common.js';
+import { readBlockConfig, decorateIcons, getMetadata } from '../../scripts/lib-franklin.js';
+import { createElement, getLanguagePath } from '../../scripts/common.js';
 /* eslint-disable no-use-before-define */
 
 function displayScrollToTop(buttonEl) {
@@ -44,23 +44,32 @@ function addScrollToTopButton(mainEl) {
 export default async function decorate(block) {
   const cfg = readBlockConfig(block);
   block.textContent = '';
-  const { pathname } = new URL(window.location.href);
-  const langCodeMatch = pathname.match('^(/[a-z]{2}(-[a-z]{2})?/).*');
-  const footerPath = cfg.footer || `${langCodeMatch ? langCodeMatch[1] : '/'}footer`;
+  let footerPath = cfg.footer || `${getLanguagePath()}footer`;
+  const isCustomFooter = getMetadata('custom-footer');
+  if (isCustomFooter) {
+    footerPath = cfg.footer || `${getLanguagePath()}${isCustomFooter}`;
+  }
+
   const resp = await fetch(`${footerPath}.plain.html`);
   const html = await resp.text();
   const footer = createElement('div', { classes: 'footer-container' });
   footer.innerHTML = html.replaceAll('{year}', new Date().getFullYear());
 
-  const [mainLinkWrapper, footerBar, footerCopyright] = footer.children;
-
-  openExternalLinksInNewTab(footer);
-  wrapSocialMediaLinks(mainLinkWrapper);
+  // for custom footer we don't need the external link section,
+  // so check if columns block exist
+  const coulmnsWrapper = footer.querySelector('.columns');
+  let footerBar = footer.children[1];
+  let footerCopyright = footer.children[2];
+  let mainLinkWrapper;
 
   const headings = footer.querySelectorAll('h1, h2, h3, h4, h5, h6');
   [...headings].forEach((heading) => heading.classList.add('footer__title'));
 
-  if (mainLinkWrapper) {
+  openExternalLinksInNewTab(footer);
+
+  if (coulmnsWrapper) {
+    mainLinkWrapper = coulmnsWrapper.parentElement;
+    wrapSocialMediaLinks(mainLinkWrapper);
     mainLinkWrapper.classList.add('footer-links-wrapper');
     // in Word, it is edited like a column block, but we style it differently
     mainLinkWrapper.firstElementChild.classList.remove('columns');
@@ -80,6 +89,8 @@ export default async function decorate(block) {
 
       title.addEventListener('click', (e) => toggleExpand(e.currentTarget));
     });
+  } else {
+    [footerBar, footerCopyright] = footer.children;
   }
 
   const copyrightWrapper = createElement('div', { classes: 'footer-copyright-wrapper' });

diff --git a/blocks/header/header.css b/blocks/header/header.css
@@ -510,3 +510,21 @@
     gap: 32px;
   }
 }
+
+/* custom header styles */
+.header__custom-button:any-link {
+  padding: 9px 21px;
+  background-color: var(--c-cta-blue-default);
+  color: var(--c-white);
+  border-radius: 4px;
+  text-transform: uppercase;
+}
+
+.header__custom-button:hover,
+.header__custom-button:focus {
+  background-color: var(--c-cta-blue-hover);
+}
+
+.header__custom-button:active {
+  background-color: var(--c-cta-blue-active);
+}
diff --git a/blocks/header/header.js b/blocks/header/header.js
@@ -1,5 +1,10 @@
-import { createElement, generateId, getTextLabel } from '../../scripts/common.js';
-import { createOptimizedPicture, decorateIcons } from '../../scripts/lib-franklin.js';
+import {
+  createElement,
+  generateId,
+  getTextLabel,
+  getLanguagePath,
+} from '../../scripts/common.js';
+import { createOptimizedPicture, decorateIcons, getMetadata } from '../../scripts/lib-franklin.js';
 
 const blockClass = 'header';
 
@@ -25,25 +30,26 @@ const createLogo = (logoWrapper) => {
 
 const createMainLinks = (mainLinksWrapper) => {
   const list = mainLinksWrapper.querySelector('ul');
+  if (list) {
+    list.setAttribute('id', 'header-main-nav');
+    list.classList.add(`${blockClass}__main-nav`);
+    list.querySelectorAll('li').forEach((listItem) => {
+      listItem.classList.add(`${blockClass}__main-nav-item`);
+      const accordionContainer = document.createRange().createContextualFragment(`
+        <div class="${blockClass}__accordion-container">
+          <div class="${blockClass}__accordion-content-wrapper">
+          </div>
+        </div>
+      `);
+      listItem.append(accordionContainer);
+    });
 
-  list.setAttribute('id', 'header-main-nav');
-  list.classList.add(`${blockClass}__main-nav`);
-  list.querySelectorAll('li').forEach((listItem) => {
-    const accordionContainer = document.createRange().createContextualFragment(`
-    <div class="${blockClass}__accordion-container">
-      <div class="${blockClass}__accordion-content-wrapper">
-      </div>
-    </div>
-    `);
-
-    listItem.classList.add(`${blockClass}__main-nav-item`);
-    listItem.append(accordionContainer);
-  });
-  list.querySelectorAll('li > a').forEach((link) => {
-    link.classList.add(`${blockClass}__main-nav-link`, `${blockClass}__link`, `${blockClass}__link-accordion`);
-  });
-
-  return list;
+    list.querySelectorAll('li > a').forEach((link) => {
+      link.classList.add(`${blockClass}__main-nav-link`, `${blockClass}__link`, `${blockClass}__link-accordion`);
+    });
+    return list;
+  }
+  return null;
 };
 
 const createActions = (actionsWrapper) => {
@@ -54,9 +60,9 @@ const createActions = (actionsWrapper) => {
   list.querySelectorAll('li').forEach((listItem) => {
     listItem.classList.add(`${blockClass}__action-item`);
   });
+
   list.querySelectorAll('li > a').forEach((link) => {
     link.classList.add(`${blockClass}__action-link`, `${blockClass}__link`);
-
     // wrapping text nodes into spans &
     // adding aria labels (because text labels are hidden on mobile)
     [...link.childNodes]
@@ -95,11 +101,7 @@ const mobileActions = () => {
   const openMenuLabel = getTextLabel('Open menu');
 
   const actions = document.createRange().createContextualFragment(`
-    <a
-      href="#"
-      aria-label="${searchLabel}"
-      class="${blockClass}__search-button ${blockClass}__action-link ${blockClass}__link"
-    >
+    <a href="#" aria-label="${searchLabel}" class="${blockClass}__search-button ${blockClass}__action-link ${blockClass}__link">
       <span class="icon icon-search-icon" aria-hidden="true"></span>
     </a>
     <button
@@ -248,6 +250,16 @@ const buildMenuContent = (menuData, navEl) => {
   });
 };
 
+const decorateCTA = (wrapper) => {
+  const anchorTags = wrapper.querySelectorAll('a');
+  anchorTags.forEach((link) => {
+    link.classList.add(`${blockClass}__custom-button`);
+    wrapper.appendChild(link);
+  });
+  wrapper.firstElementChild.remove();
+  return wrapper;
+};
+
 /**
  * decorates the header, mainly the nav
  * @param {Element} block The header block element
@@ -257,9 +269,12 @@ export default async function decorate(block) {
   block.textContent = '';
 
   // fetch nav content
-  const { pathname } = new URL(window.location.href);
-  const langCodeMatch = pathname.match('^(/[a-z]{2}(-[a-z]{2})?/).*');
-  const navPath = `${langCodeMatch ? langCodeMatch[1] : '/'}nav`;
+  let navPath = `${getLanguagePath()}nav`;
+  const isCustomHeader = getMetadata('custom-header');
+  if (isCustomHeader) {
+    navPath = `${getLanguagePath()}${isCustomHeader}`;
+    block.classList.add(`${blockClass}__custom`);
+  }
   const resp = await fetch(`${navPath}.plain.html`);
 
   if (!resp.ok) {
@@ -279,12 +294,12 @@ export default async function decorate(block) {
   const navContent = document.createRange().createContextualFragment(`
     <div class="${blockClass}__menu-overlay"></div>
     ${createLogo(logoContainer).outerHTML}
-    <div class="${blockClass}__main-links">
+    ${navigationContainer.children.length ? `<div class="${blockClass}__main-links">
       ${createMainLinks(navigationContainer).outerHTML}
-    </div>
+    </div>` : ''}
     <div class="${blockClass}__actions">
-      ${mobileActions().outerHTML}
-      ${createActions(actionsContainer).outerHTML}
+      ${isCustomHeader ? '' : mobileActions().outerHTML}
+      ${isCustomHeader ? decorateCTA(actionsContainer).outerHTML : createActions(actionsContainer).outerHTML}
     </div>
   `);
 
@@ -325,12 +340,12 @@ export default async function decorate(block) {
   };
 
   // add actions for search
-  navContent.querySelector(`.${blockClass}__search-button`).addEventListener('click', () => {
+  navContent.querySelector(`.${blockClass}__search-button`)?.addEventListener('click', () => {
     window.location.href = '/search-results';
   });
 
   // add action for hamburger
-  navContent.querySelector(`.${blockClass}__hamburger-menu`).addEventListener('click', () => {
+  navContent.querySelector(`.${blockClass}__hamburger-menu`)?.addEventListener('click', () => {
     block.classList.add(`${blockClass}--menu-open`, `${blockClass}--hamburger-open`);
     document.body.classList.add('disable-scroll');
 
@@ -350,8 +365,11 @@ export default async function decorate(block) {
   block.append(nav);
 
   setAriaForMenu(false);
-  buildMenuContent(menuContent, nav);
-  initAriaForAccordions();
+
+  if (menuContent) {
+    buildMenuContent(menuContent, nav);
+    initAriaForAccordions();
+  }
 
   // hide nav when clicking outside the menu on desktop
   document.addEventListener('click', (event) => {

diff --git a/blocks/nhtsa-header/nhtsa-header.css b/blocks/nhtsa-header/nhtsa-header.css
@@ -22,14 +22,12 @@
   color: var(--c-white);
   text-transform: uppercase;
   padding: 9px 21px;
-  font-family: var(--font-family-body);
   font-size: var(--f-button-font-size);
   line-height: var(--f-button-line-height);
   letter-spacing: var(--f-button-letter-spacing);
   border: 0;
   align-items: center;
   display: flex;
-  text-decoration: none;
   border-radius: 4px;
 }
 
@@ -55,15 +53,10 @@
     border-top: 1px solid var(--c-grey-300);
   }
 
-  .nhtsa-header .icon-logo svg {
-    width: 160px;
-    height: 30px;
-  }
-
+  .nhtsa-header .icon-logo svg,
   .nhtsa-header .icon-nova-bus svg,
   .nhtsa-header .icon-prevost svg {
-    width: initial;
-    height: initial;
+    width: 160px;
+    height: 30px;
   }
-
 }
diff --git a/blocks/nhtsa-header/nhtsa-header.js b/blocks/nhtsa-header/nhtsa-header.js
@@ -3,12 +3,10 @@ import { unwrapDivs } from '../../scripts/common.js';
 // hide buttons for, content if they are from same origin
 function hideButtons(buttons) {
   buttons.forEach((element) => {
-    element.classList.add('button', 'nhsta-header__langauge-switch');
-    const url = element.href;
-    const { location: { origin } = {} } = window.location.origin;
-
-    if (origin === url) {
-      element.classList.add('hide');
+    if (element.href.match(/\/recalls/)) {
+      element.classList.add('button', 'nhsta-header__langauge-switch');
+    } else if (element.href.match(/www.volvotrucks/)) {
+      element.target = '_blank';
     }
   });
 }

diff --git a/blocks/vin-number/vin-number.css b/blocks/vin-number/vin-number.css
@@ -50,8 +50,14 @@
   padding: 20px 0;
 }
 
+.vin-number__no-french-info {
+  padding-top: 20px;
+  color: var(--c-grey-800);
+  font-family: var(--ff-volvo-novum-medium);
+}
+
 .vin-number__recalls-wrapper {
-  margin-top: 40px;
+  margin-top: 25px;
 }
 
 .vin-number__recalls-heading-wrapper {

diff --git a/blocks/vin-number/vin-number.js b/blocks/vin-number/vin-number.js
@@ -24,6 +24,9 @@ const valueDisplayList = [{
 {
   key: 'nhtsa_recall_number',
 },
+{
+  key: 'tc_recall_nbr',
+},
 {
   key: 'mfr_recall_status',
 },
@@ -60,16 +63,22 @@ function capitalize(text) {
 function renderRecalls(recallsData) {
   const resultText = document.querySelector('.vin-number__results-text');
   resultText.innerText = getTextLabel('result text').replace(/\${count}/, recallsData.number_of_recalls).replace(/\${vin}/, recallsData.vin);
+  let noFrenchInfo = false;
 
   if (recallsData.recalls_available) {
     const blockEl = document.querySelector('.vin-number__recalls-wrapper');
+    let refreshDate = recallsData.refresh_date;
+    if (isFrench) {
+      refreshDate = new Date(refreshDate).toLocaleDateString('fr-FR', { year: 'numeric', month: 'short', day: 'numeric' });
+    }
+
     const listWrapperFragment = docRange.createContextualFragment(`
       <div class="vin-number__recalls-heading-wrapper">
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
           <path fill-rule="evenodd" clip-rule="evenodd" d="M12.537 2.77441C12.4523 2.60503 12.2792 2.49804 12.0898 2.49805C11.9004 2.49805 11.7273 2.60506 11.6426 2.77445L2.14458 21.7711C2.06709 21.9261 2.07537 22.1102 2.16647 22.2576C2.25758 22.405 2.41851 22.4947 2.5918 22.4947H21.5897C21.7629 22.4947 21.9239 22.405 22.015 22.2576C22.1061 22.1102 22.1144 21.9261 22.0369 21.7711L12.537 2.77441ZM3.4008 21.4947L12.0898 4.11603L20.7806 21.4947H3.4008ZM12.9995 14.6796V15.7512C12.9995 15.8619 12.9046 15.9974 12.7538 15.9974L12.4304 15.9969C12.2549 15.9965 12.0583 15.9961 11.9556 15.9961H11.2484C11.0976 15.9961 11.0027 15.8606 11.0027 15.7499V14.6796L11.0027 8.24501C11.0027 8.13425 11.0976 7.99874 11.2484 7.99874H11.9556C12.0581 7.99874 12.2545 7.99834 12.4299 7.99798H12.43L12.4304 7.99798L12.7538 7.99744C12.9046 7.99744 12.9995 8.13295 12.9995 8.2437L12.9995 14.6796ZM12.9964 18.8443V19.7512C12.9964 19.8619 12.9015 19.9974 12.7507 19.9974L12.4273 19.9969C12.2517 19.9965 12.0551 19.9961 11.9524 19.9961H11.2452C11.0944 19.9961 10.9995 19.8606 10.9995 19.7499V18.8443V18.2437C10.9995 18.1329 11.0944 17.9974 11.2452 17.9974H11.9524C12.0551 17.9974 12.2517 17.997 12.4273 17.9967L12.7507 17.9961C12.9015 17.9961 12.9964 18.1316 12.9964 18.2424L12.9964 18.8443Z" fill="currentColor"/>
         </svg>
         <h4 class="vin-number__recalls-heading">${getTextLabel('recalls')}  &nbsp; &nbsp;</h4>
-        <span> [${getTextLabel('published_info')}: ${recallsData.refresh_date} | ${getTextLabel('recall_oldest_info')}] </span>
+        <span> [${getTextLabel('published_info')}: ${refreshDate} | ${getTextLabel('recall_oldest_info')}] </span>
       </div>
     `);
 
@@ -91,8 +100,16 @@ function renderRecalls(recallsData) {
           let itemValue = item.class ? capitalize(recall[item.key]) : recall[item.key];
           if (recallClass) {
             itemValue = getTextLabel(recall[item.key]);
-          } else if (isFrench && item.frenchKey && recall[item.frenchKey]) {
-            itemValue = recall[item.frenchKey];
+          } else if (item.key === 'recall_date' && isFrench) {
+            itemValue = new Date(recall[item.key]).toLocaleDateString('fr-FR', { year: 'numeric', month: 'short', day: 'numeric' });
+          } else if (isFrench && item.frenchKey) {
+            if (recall[item.frenchKey]) {
+              itemValue = recall[item.frenchKey];
+            } else if (!noFrenchInfo) {
+              const noFrenchInoEl = document.querySelector('.vin-number__no-french-info');
+              noFrenchInoEl.textContent = getTextLabel('no-french-info');
+              noFrenchInfo = true;
+            }
           }
 
           const itemFragment = docRange.createContextualFragment(`<li class="vin-number__detail-item ${item.class ? item.class : ''}" >
@@ -126,6 +143,9 @@ async function fetchRecalls(e) {
     const recalls = document.querySelector('.vin-number__recalls-wrapper');
     recalls.innerHTML = '';
 
+    const noFrenchInoEl = document.querySelector('.vin-number__no-french-info');
+    noFrenchInoEl.textContent = '';
+
     const resultText = document.querySelector('.vin-number__results-text');
     resultText.innerText = getTextLabel('loading recalls');
 
@@ -183,6 +203,7 @@ export default async function decorate(block) {
   const vinResultsContainer = createElement('div', { classes: 'vin-number__results-container' });
   const innerContent = docRange.createContextualFragment(`
     <span class="vin-number__results-text"></span>
+    <div class="vin-number__no-french-info"></div>
     <div class="vin-number__recalls-wrapper"></div>
   `);
 
@@ -196,6 +217,10 @@ export default async function decorate(block) {
   const vinInput = block.querySelector('.vin-number__input');
 
   vinInput.oninvalid = (e) => {
+    if (e.target.value.length < e.target.maxLength) {
+      e.target.setCustomValidity(getTextLabel('vinformat-length'));
+      return;
+    }
     e.target.setCustomValidity(getTextLabel('vinformat'));
   };